邃芒慧影管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

338 lines
8.5 KiB

  1. <template>
  2. <div class="app-wrapper">
  3. <!-- 侧边栏 -->
  4. <div class="Sidebar">
  5. <div class="imgBox">
  6. <img
  7. class="boxCentreImg"
  8. src="../assets//img/left-top-logo.png"
  9. alt=""
  10. />
  11. </div>
  12. <!-- 侧边路由列表 -->
  13. <div class="myRouter">
  14. <el-menu
  15. default-active="1"
  16. active-text-color="#ffd04b"
  17. background-color="#000"
  18. text-color="#fff"
  19. class="el-menu-vertical-demo">
  20. <el-menu-item index="1" @click="router.push('/home')">
  21. <el-icon><i-ep-House /></el-icon>
  22. <span>首页</span>
  23. </el-menu-item>
  24. <!-- 邃芒后台 -->
  25. <el-menu-item v-if="isAdmin === '1'" index="2" @click="router.push('/apiManage')">
  26. <el-icon><i-ep-link /></el-icon>
  27. <span>API接入方管理</span>
  28. </el-menu-item>
  29. <el-menu-item v-if="isAdmin === '1' && localDeploy !== 'true'" index="3" @click="router.push('/privatization')">
  30. <el-icon><i-ep-edit /></el-icon>
  31. <span>私有化客户管理</span>
  32. </el-menu-item>
  33. <!-- 私有化客户管理 API v-if="(isAdmin === '1' && localDeploy === 'true') || isAdmin === '0'" -->
  34. <template v-else>
  35. <el-menu-item index="4" @click="router.push('/template')">
  36. <el-icon><i-ep-edit /></el-icon>
  37. <span>模版管理</span>
  38. </el-menu-item>
  39. <el-menu-item index="5" @click="router.push('/secretKey')">
  40. <el-icon><i-ep-edit /></el-icon>
  41. <span>密钥查看</span>
  42. </el-menu-item>
  43. <el-menu-item index="6" @click="router.push('/video')">
  44. <el-icon><i-ep-edit /></el-icon>
  45. <span>视频制作统计</span>
  46. </el-menu-item>
  47. </template>
  48. </el-menu>
  49. </div>
  50. </div>
  51. <!-- 右边显示部分 -->
  52. <div class="rightBox">
  53. <!-- nav栏 -->
  54. <div class="nav">
  55. <!-- 语言 -->
  56. <el-tooltip
  57. style="cursor: pointer; z-index: 999"
  58. class="box-item"
  59. effect="dark"
  60. :content="$t('navbar.LanguageChange')"
  61. placement="top-start"
  62. >
  63. <lang-select class="navItem" />
  64. </el-tooltip>
  65. <!-- 登录 -->
  66. <div class="navItem" v-if="!isLogin" @click="router.push('login')">
  67. {{ $t("navbar.goLogin") }}
  68. </div>
  69. <!-- 注销 -->
  70. <div
  71. v-if="isLogin"
  72. class="navItem"
  73. @click="logout"
  74. style="margin-left: 10px"
  75. >
  76. {{ $t("navbar.logout") }}
  77. </div>
  78. </div>
  79. <!-- 主页面 -->
  80. <app-main style="background-color: #000" />
  81. </div>
  82. <!-- 联系我们对话框 -->
  83. <talkUs
  84. :showTalkUsDialog="showTalkUsDialog"
  85. @updateShowTalkUsDialog="updateShowTalkUsDialog"
  86. ></talkUs>
  87. </div>
  88. </template>
  89. <script setup lang="ts">
  90. import { computed, watchEffect } from "vue";
  91. import { useWindowSize } from "@vueuse/core";
  92. import { AppMain, Navbar } from "./components/index";
  93. import talkUs from "@/components/talkUs.vue";
  94. import LangSelect from "@/components/LangSelect/index.vue";
  95. import { useAppStore } from "@/store/modules/app";
  96. // import { useSettingsStore } from "@/store/modules/settings";
  97. import { useRoute, useRouter } from "vue-router";
  98. import { useI18n } from "vue-i18n";
  99. import { getMenuNavApi } from "@/apis/Permission.js";
  100. import { userInfoModules } from "@/store/modules/userInfo";
  101. import { logoutApi } from '@/apis/login.js'
  102. const userInfoPinia = userInfoModules();
  103. const route = useRoute();
  104. const router = useRouter();
  105. const { params } = route;
  106. const { width } = useWindowSize();
  107. const AccessToken = localStorage.getItem("AccessToken");
  108. // 当前语言状态与国际化组件
  109. const { locale } = useI18n();
  110. const lanChange = ref(locale);
  111. const isLogin = ref(false);
  112. const isAdmin = localStorage.getItem("isAdmin")
  113. const localDeploy = localStorage.getItem("localDeploy")
  114. function logout() {
  115. const msg =
  116. (lanChange.value as string) == "zh-cn"
  117. ? "确定退出登录吗?"
  118. : "Are you sure to log out?";
  119. const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
  120. const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
  121. const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
  122. ElMessageBox.confirm(msg, notice, {
  123. confirmButtonText: confirm,
  124. cancelButtonText: cancel,
  125. }).then(() => {
  126. logoutApi().then(res => {
  127. userInfoPinia.loginOut();
  128. localStorage.clear()
  129. router.push(`/login`);
  130. })
  131. localStorage.removeItem("AccessToken");
  132. });
  133. }
  134. /**
  135. * 响应式布局容器固定宽度
  136. *
  137. * 大屏(>=1200px)
  138. * 中屏(>=992px)
  139. * 小屏(>=768px)
  140. */
  141. const WIDTH = 992;
  142. const appStore = useAppStore();
  143. // const settingsStore = useSettingsStore();
  144. watchEffect(() => {
  145. if (width.value < WIDTH) {
  146. appStore.toggleDevice("mobile");
  147. appStore.closeSideBar(true);
  148. } else {
  149. appStore.toggleDevice("desktop");
  150. if (width.value >= 1200) {
  151. //大屏
  152. appStore.openSideBar(true);
  153. } else {
  154. appStore.closeSideBar(true);
  155. }
  156. }
  157. });
  158. function handleOutsideClick() {
  159. appStore.closeSideBar(false);
  160. }
  161. onMounted(() => {
  162. getMenuNavFunc();
  163. });
  164. //#region 联系我们弹窗
  165. const showTalkUsDialog = ref(false);
  166. const updateShowTalkUsDialog = (newValue: any) => {
  167. showTalkUsDialog.value = newValue;
  168. };
  169. //#endregion ------------------------------------
  170. //#region 获取路由列表
  171. const MenuList = ref([{ id: "", name: "" }]);
  172. async function getMenuNavFunc() {
  173. try {
  174. const res = await getMenuNavApi();
  175. MenuList.value = res.data.menuList;
  176. if (res.code === 200) {
  177. isLogin.value = true
  178. }
  179. } catch (error) {
  180. console.log(error);
  181. }
  182. }
  183. //#endregion ------------------------------------
  184. //#region 路由及子路由
  185. const showChildrenRouter = ref("");
  186. //#endregion ------------------------------------
  187. </script>
  188. <!-- 新样式 -->
  189. <style lang="scss" scoped>
  190. .app-wrapper {
  191. // width: 1920px;
  192. display: flex;
  193. }
  194. .Sidebar {
  195. width: 230px;
  196. background-color: #000;
  197. height: 100vh;
  198. color: #fff;
  199. .imgBox {
  200. width: 100%;
  201. height: 80px;
  202. position: relative;
  203. img {
  204. max-width: 80%;
  205. max-height: 80%;
  206. }
  207. }
  208. .myRouter {
  209. position: relative;
  210. height: calc(100% - 80px);
  211. padding: 130px 20px 0;
  212. color: #fff;
  213. width: 230px;
  214. // color: #868593;
  215. .bottomBtx {
  216. position: absolute;
  217. bottom: 30px;
  218. }
  219. &-item {
  220. // display: flex;
  221. width: 100%;
  222. // height: 50px;
  223. // padding-left: 10px;
  224. font-size: 20px;
  225. font-weight: 500;
  226. line-height: 50px;
  227. text-align: center;
  228. cursor: pointer;
  229. // border-bottom: 2px solid #fff;
  230. transition: all 0.3s;
  231. border-radius: 5px;
  232. margin-bottom: 20px;
  233. margin-right: 20px;
  234. overflow: hidden;
  235. .icon {
  236. display: flex;
  237. color: #fff;
  238. border-radius: 50%;
  239. margin-right: 10px;
  240. width: 100%;
  241. height: 50px;
  242. line-height: 50px;
  243. .el-icon {
  244. margin-left: 10px;
  245. margin-top: 12px;
  246. margin-right: 10px;
  247. width: 25px;
  248. height: 25px;
  249. font-size: 25px;
  250. // color: #797a9f;
  251. color: #fff;
  252. text-align: center;
  253. vertical-align: sub;
  254. }
  255. }
  256. .childrenRouter {
  257. cursor: pointer;
  258. transition: all 0.3s;
  259. }
  260. .childrenRouter:hover {
  261. color: #ffffff;
  262. background-color: #000000;
  263. }
  264. &:hover {
  265. // background: rgba(255, 255, 255, 0.2);
  266. color: #000;
  267. background: #fff;
  268. .icon {
  269. color: #000;
  270. }
  271. .el-icon {
  272. // color: #d4d0ff;
  273. color: #000;
  274. }
  275. }
  276. }
  277. .pricing {
  278. position: absolute;
  279. bottom: 60px;
  280. width: calc(100% - 40px);
  281. text-align: center;
  282. }
  283. .API {
  284. position: absolute;
  285. bottom: 0px;
  286. width: calc(100% - 40px);
  287. text-align: center;
  288. }
  289. }
  290. }
  291. .rightBox {
  292. width: 1690px;
  293. // background-color: #000;
  294. .nav {
  295. display: flex;
  296. justify-content: flex-end;
  297. align-items: center;
  298. margin-right: 20px;
  299. width: 100%;
  300. height: 80px;
  301. background-color: #000;
  302. padding: 30px;
  303. // padding: 30px 30px 0 1500px;
  304. color: #fff;
  305. .navItem {
  306. font-size: 16px;
  307. margin-right: 30px;
  308. }
  309. }
  310. }
  311. .el-menu{
  312. border: none;
  313. :deep .el-sub-menu__title, :deep .el-menu-item{
  314. font-size: 16px;
  315. }
  316. }
  317. </style>