1

src/components/Admin/AdminPublicPage.vue

+<template>
+  <div class="custom-admin-page">
+    <div class="admin-page-header">
+      <div>
+        <span class="page-header-title">{{ form.title }}</span>
+        <span class="page-header-title_2">{{ form.title_2 }}</span>
+      </div>
+      <div></div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  form: any;
+}>();
+</script>
+
+<style lang="less">
+.custom-admin-page {
+  padding: 20px 30px 0 30px;
+  .admin-page-header {
+    .page-header-title {
+      font-weight: 400;
+      font-size: 24px;
+    }
+    .page-header-title_2 {
+      font-weight: 400;
+      font-size: 15px;
+      color: #c5c5c5;
+    }
+  }
+}
+</style>

src/components/Admin/Interface.ts

+export interface ComponentOption {
+  type: string;
+  name: string;
+  label: string;
+  placeholder?: string;
+  value: string;
+}
+
+export interface AdminForm {
+  title: string;
+  title_2: string;
+  refresh: boolean;
+  filter: boolean;
+  add: boolean;
+  filter_option: ComponentOption[];
+}

src/layout/header.vue

@@ -77,10 +77,10 @@ const btns = [
     label: '图片展示',
     path: '/PhotoGallery',
   },
-  // {
-  //   label: 'AI直播',
-  //   path: '/AILiveStreaming',
-  // },
+  {
+    label: 'AI直播',
+    path: '/AILiveStreaming',
+  },
 ];
 const changeBtn = (item: any) => {
   router.replace({

src/layout/tab/index.tsx

-import { computed, defineComponent, reactive, ref } from 'vue';
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
 import './index.less';
 import HomeSvg from '@/assets/svg/tab/home.svg';
 import RaffleSvg from '@/assets/svg/tab/raffle.svg';
 import LpSvg from '@/assets/svg/tab/lp.svg';
 import { RouterView, useRoute, useRouter } from 'vue-router';
-import { getCurrentDevice } from '@/utils/tool';
+import { getCurrentDevice, getLocalData, setLocalData } from '@/utils/tool';
 export default defineComponent({
   setup(props) {
     let navStatusKey = 'navstatus';
     const route = useRoute();
     const router = useRouter();
+    const tabOptions = computed(() => [
+      {
+        icon: <HomeSvg></HomeSvg>,
+        label: '话术管理',
+        value: '/AILiveStreaming/DiscourseManagement',
+        disable: false,
+      },
+      {
+        icon: <RaffleSvg></RaffleSvg>,
+        label: '互动设置',
+        value: '/raffle',
+        disable: false,
+      },
+      {
+        icon: <LpSvg></LpSvg>,
+        label: '直播管理',
+        value: '/lp',
+        disable: false,
+      },
+    ]);
+    const localStorage_key = 'ai_router';
+    const getCurrentRoute = () => {
+      const cur_route = getLocalData(localStorage_key)
+        ? getLocalData(localStorage_key)
+        : tabOptions.value[0].value;
+      // 存本地
+      setLocalData(localStorage_key, cur_route);
+      // 跳转路由
+      return cur_route;
+    };
     // 当前路由
-    const currentRoute = ref<string>(route.path);
+    const currentRoute = ref<string>(getCurrentRoute());
+    // 本地路由key
     // 文字要加个延迟显示
     const navTextShow = ref<boolean>(false);
     // nav-item的高度
@@ -43,26 +74,6 @@ export default defineComponent({
     };
     // nav当前状态-默认展开
     const navStatus = ref<string>(getNavDefaultStatus());
-    const tabOptions = computed(() => [
-      {
-        icon: <HomeSvg></HomeSvg>,
-        label: '话术管理',
-        value: '/',
-        disable: false,
-      },
-      {
-        icon: <RaffleSvg></RaffleSvg>,
-        label: '互动设置',
-        value: '/raffle',
-        disable: false,
-      },
-      {
-        icon: <LpSvg></LpSvg>,
-        label: '直播管理',
-        value: '/lp',
-        disable: false,
-      },
-    ]);
 
     // 切换导航栏展示形式
     const changeNavStatus = () => {
@@ -83,13 +94,6 @@ export default defineComponent({
       navStatus.value = 'close';
       navTextShow.value = false;
     };
-    // 判断当前路由
-    const getCurRoute = (value: string) => {
-      if (value == '/raffle' && currentRoute.value.indexOf('/raffle') != -1) {
-        return 'nav-icon-active';
-      }
-      return currentRoute.value == value ? 'nav-icon-active' : '';
-    };
     const NavChange = (item: any, index: number) => {
       if (item.disable) {
         return;
@@ -99,12 +103,28 @@ export default defineComponent({
         navTextShow.value = true;
       }, 100);
       currentRoute.value = item.value;
+      // 存本地
+      setLocalData(localStorage_key, item.value);
       // 计算重新计算线条的位置
       PositionLine.top = NavItemHeight.value * index;
-      // router.push({
-      //   path: item.value,
-      // });
+      router.push({
+        path: item.value,
+      });
+    };
+    // 初始化绝对定位线条的位置
+    const initLinePosition = () => {
+      // 当前路由所在下标
+      const index = tabOptions.value.findIndex(
+        (item: any) => item.value == currentRoute.value
+      );
+      if (index !== -1) {
+        PositionLine.top = NavItemHeight.value * index;
+      }
     };
+
+    onMounted(() => {
+      initLinePosition();
+    });
     return () => (
       <header class="custom-nav">
         <div class="custom-tabs">
@@ -131,7 +151,12 @@ export default defineComponent({
                   }}
                   onClick={NavChange.bind(this, item, index)}
                 >
-                  <div class={['nav-icon', getCurRoute(item.value)]}>
+                  <div
+                    class={[
+                      'nav-icon',
+                      currentRoute.value == item.value ? 'nav-icon-active' : '',
+                    ]}
+                  >
                     {item.icon}
                     <span
                       class="nav-text"

src/pages/AILiveStreaming/DiscourseManagement/index.vue

+<template>
+  <AdminPublicPageVue :form="ManagementForm">
+    <div class="custom-discourse-management"></div>
+  </AdminPublicPageVue>
+</template>
+
+<script lang="ts" setup>
+import AdminPublicPageVue from '@/components/Admin/AdminPublicPage.vue';
+import { reactive } from 'vue';
+// 表单配置项
+const ManagementForm = reactive({
+  title: '话术列表',
+  title_2: '列表',
+  // 能否刷新
+  refresh: true,
+  // 能否筛选
+  filter: true,
+  // 能否新增
+  add: true,
+  filter_option: [
+    {
+      type: 'select',
+      name: 'select_title',
+      label: '标题',
+      placeholder: '请选择标题',
+      value: '',
+    },
+    {
+      type: 'select',
+      name: 'select_product',
+      label: '产品',
+      placeholder: '产品',
+      value: '',
+    },
+    {
+      type: 'select',
+      name: 'select_language',
+      label: '语言',
+      placeholder: '语言',
+      value: '',
+    },
+  ],
+});
+</script>
+
+<style lang="less">
+.custom-discourse-management {
+}
+</style>

src/router/modules/home.ts

@@ -112,7 +112,7 @@ export default [
       },
       // 图片提交场景
       {
-        path: 'submit',
+        path: '/submit',
         name: 'submit',
         component: () => import('@/pages/submit/index.vue'),
         meta: {
@@ -121,12 +121,20 @@ export default [
       },
       // ai直播
       {
-        path: 'AILiveStreaming',
+        path: '/AILiveStreaming',
         name: 'AILiveStreaming',
         component: () => import('@/layout/tab'),
         meta: {
           header: true,
         },
+        children: [
+          {
+            path: '/AILiveStreaming/DiscourseManagement',
+            name: 'DiscourseManagement',
+            component: () =>
+              import('@/pages/AILiveStreaming/DiscourseManagement/index.vue'),
+          },
+        ],
       },
     ],
   },