navbar改为动态添加

src/layouts/components/ToolBar.vue

@@ -3,7 +3,7 @@
     <div class="home-icon" @click="goHome">
       <img :src="imgs.home" alt="" />
     </div>
-    <div class="navigator-item" v-for="item in navigatorList" :key="item.path" @click="jump(item)">
+    <div class="navigator-item" v-for="item in navbarList" :key="item.path" @click="jump(item)">
       <img class="navigator-icon" :src="item.icon" alt="" />
       <span class="label">
         {{ item.label }}
@@ -19,9 +19,14 @@
 import routerConfig from '@/router/tool';
 import { useRouter } from 'vue-router';
 import { createLiveRouteKey } from '@/constants/token';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
+const store = useStore();
 const router = useRouter();
 
+const navbarList = computed(() => store.getters['navbar/getNavbar']);
+
 const imgs = {
   home: new URL('../../assets/svg/home/home.svg', import.meta.url).href,
   live: new URL('../../assets/svg/home/navLive.svg', import.meta.url).href,

src/pages/ImageCustomization/index.vue

@@ -27,9 +27,13 @@ import CustomTabs from '@/components/CustomTabs';
 import CustomTabPanel from '@/components/CustomTabPanel';
 import Customizable from '@/components/Customizable';
 import PersonSvg from '@/assets/svg/custom/person.svg';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { customizedImageSubmission } from '@/utils/api/userApi';
 import { show_message } from '@/utils/tool';
+import routerConfig from '@/router/tool';
+import { useStore } from 'vuex';
+
+const store = useStore();
 
 const currentTab = ref('1');
 
@@ -67,6 +71,12 @@ const submit = async (params: any) => {
     console.log(e);
   }
 };
+
+onMounted(() => {
+  store.commit('navbar/setNavbar', {
+    path: routerConfig.ImageCustomization.path,
+  });
+});
 </script>
 
 <style lang="less"></style>

src/pages/VocalCustomization/index.vue

@@ -27,9 +27,13 @@ import MyDigitalPerson from './components/MyDigitalPerson.vue';
 import CustomTabs from '@/components/CustomTabs';
 import CustomTabPanel from '@/components/CustomTabPanel';
 import Customizable from '@/components/Customizable';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { customizedPhoneticSubmission } from '@/utils/api/userApi';
 import { show_message } from '@/utils/tool';
+import { useStore } from 'vuex';
+import routerConfig from '@/router/tool';
+
+const store = useStore();
 
 const imgs = {
   speak: new URL('../../assets/img/speaking.png', import.meta.url).href,
@@ -67,6 +71,12 @@ const submit = async (params: any) => {
     console.log(e);
   }
 };
+
+onMounted(() => {
+  store.commit('navbar/setNavbar', {
+    path: routerConfig.VocalCustomization.path,
+  });
+});
 </script>
 
 <style lang="less"></style>

src/pages/createInteract/index.vue

@@ -99,6 +99,10 @@ import YesSvg from '@/assets/svg/home/yes.svg';
 import NoSvg from '@/assets/svg/home/no.svg';
 import { getLiveInteraction } from '@/service/Common';
 import { createInteraction, editGroupsInteractionName, deleteGroupsInteraction } from '@/utils/api/userApi';
+import { useStore } from 'vuex';
+import routerConfig from '@/router/tool';
+
+const store = useStore();
 
 const interactRef = ref<HTMLDivElement>();
 const maxHeight = ref();
@@ -258,6 +262,10 @@ onMounted(() => {
   let client = getWindowClient();
   maxHeight.value = client.height - obj.top;
   getInteractList();
+  // navbar
+  store.commit('navbar/setNavbar', {
+    path: routerConfig.createInteract.path,
+  });
 });
 </script>
 

src/pages/createLive/index.vue

@@ -411,6 +411,11 @@ onMounted(() => {
   store.commit('live/setName', route.query.title ? route.query.title : '');
   // 记录本次路由
   window.localStorage.setItem(createLiveRouteKey, JSON.stringify(route.query));
+  // 添加导航
+  store.commit('navbar/setNavbar', {
+    path: routerConfig.createLive.path,
+    query: route.query,
+  });
 });
 
 onBeforeUnmount(() => {

src/store/index.ts

@@ -4,6 +4,7 @@ import setting from './modules/setting';
 import theme from './modules/theme';
 import language from './modules/language';
 import live from './modules/live';
+import navbar from './modules/navbar';
 
 export const store = createStore({
   modules: {
@@ -12,6 +13,7 @@ export const store = createStore({
     theme,
     language,
     live,
+    navbar,
   },
 });
 

src/store/modules/navbar.ts

+import routerConfig from '@/router/tool';
+
+const imgs = {
+  home: new URL('../../assets/svg/home/home.svg', import.meta.url).href,
+  live: new URL('../../assets/svg/home/navLive.svg', import.meta.url).href,
+  person: new URL('../../assets/svg/home/person.svg', import.meta.url).href,
+  speak: new URL('../../assets/svg/home/speaking.svg', import.meta.url).href,
+  interaction: new URL('../../assets/svg/home/interaction.svg', import.meta.url).href,
+};
+
+const state = {
+  version: 'v1',
+  navbarList: [],
+};
+type StateType = typeof state;
+
+interface infoType {
+  path: string;
+  query: any;
+  label: string;
+  icon: string;
+}
+
+const mutations = {
+  setNavbar(state: StateType, info: infoType) {
+    let index = state.navbarList.findIndex((item: any) => item.path == info.path);
+    if (index !== -1) {
+      // 替换
+      state.navbarList[index].query = info.query;
+    } else {
+      if (info.path == routerConfig.createLive.path) {
+        info.icon = imgs.live;
+        info.label = '直播创建';
+      } else if (info.path == routerConfig.ImageCustomization.path) {
+        info.icon = imgs.person;
+        info.label = '形象定制';
+      } else if (info.path == routerConfig.VocalCustomization.path) {
+        info.icon = imgs.speak;
+        info.label = '声音定制';
+      } else if (info.path == routerConfig.createInteract.path) {
+        info.icon = imgs.interaction;
+        info.label = '互动回答';
+      }
+      state.navbarList.push(info);
+    }
+  },
+};
+
+const getters = {
+  getNavbar: (state: StateType) => {
+    return state.navbarList;
+  },
+};
+
+const actions = {};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};

src/utils/request.ts

@@ -8,7 +8,7 @@ const error_messaage = '请求错误';
 const getBaseUrl = () => {
   if (isDev()) {
     //
-    return 'http://156.247.11.21:92/';
+    // return 'http://156.247.11.21:92/';
     return '';
   }
   // return 'http://video-assistant.test';
@@ -17,8 +17,8 @@ const getBaseUrl = () => {
 
 const instance = axios.create({
   baseURL: getBaseUrl(),
-  withCredentials: false,
-  // withCredentials: isDev() ? true : false,
+  // withCredentials: false,
+  withCredentials: isDev() ? true : false,
 });
 
 // 请求头