Merge remote-tracking branch 'origin/feature/0905_登录注册流程重构' into test

# Conflicts: # src/App.vue # src/layouts/components/siderBar/menu-list.ts # src/views/components/login/index.vue
2025-09-15 10:31:18 +08:00
parent a1f2bb0519 6971440b81
commit d4f4619486
44 changed files with 1574 additions and 788 deletions
--- a/src/layouts/components/siderBar/index.vue
+++ b/src/layouts/components/siderBar/index.vue
@ -1,14 +1,14 @@
 <script lang="tsx">
-import { Dropdown, Menu, Layout } from 'ant-design-vue';
-import type { RouteMeta, RouteRecordRaw } from 'vue-router';
+import { Dropdown, Layout, Menu } from 'ant-design-vue';
 import { useRoute } from 'vue-router';
 import SvgIcon from '@/components/svg-icon/index.vue';

-import { useAppStore } from '@/stores';
+import { useAppStore, useUserStore } from '@/stores';
 import { useSidebarStore } from '@/stores/modules/side-bar';
-import { MENU_LIST } from './menu-list';
 import type { typeMenuItem } from './menu-list';
+import { MENU_LIST } from './menu-list';
 import { handleUserHome } from '@/utils/user';
+import { useEnterpriseStore } from '@/stores/modules/enterprise';

 import icon1 from '@/assets/img/agent/icon1.png';

@ -21,14 +21,18 @@ export default defineComponent({

    const sidebarStore = useSidebarStore();
    const appStore = useAppStore();
+    const userStore = useUserStore();
+    const enterpriseStore = useEnterpriseStore();

-    const currentMenuList = ref<typeMenuItem[]>([]);
+    // const currentMenuList = ref<typeMenuItem[]>([]);
    const currentMenuModInfo = ref<typeMenuItem>({});

    const currentRouteName = computed(() => route.name as string);
    const currentRouteGroup = computed(() => route.meta?.group ?? 'GroupMain');
    const isHomeRoute = computed(() => currentRouteName.value === 'Home');
    const showAiSearch = computed(() => !route.meta?.hideAiSearch);
+    const currentMenuList = computed(() => sidebarStore.currentMenuList);
+    const hasOpenEnterprise = computed(() => enterpriseStore.isOpenEnterprise);

    const collapsed = computed(() => {
      return sidebarStore.menuCollapse;
@ -70,10 +74,18 @@ export default defineComponent({
      }
      router.push({ name: targetRoute });
    };
-    const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
+    const renderMenuItem = ({
+      item,
+      hideLabel = false,
+      menuItemClass = '',
+    }: {
+      item: typeMenuItem;
+      hideLabel?: boolean;
+      menuItemClass?: string;
+    }) => {
      const getMenuItemClass = () => {
        const hasChildren = item.children?.length;
-        let target = !hasChildren ? 'sub-menu-item ' : '';
+        let target = '';
        if (hasChildren) {
          target += getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
        } else {
@ -83,9 +95,9 @@ export default defineComponent({
      };

      return (
-        <Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item)}>
+        <Menu.Item class={`menu-item ${getMenuItemClass()} ${menuItemClass}`} onClick={() => onClickItem(item)}>
          {(() => {
-            const isActive = getMenuItemClass() === 'active';
+            const isActive = getMenuItemClass().includes('active');
            const iconName = Array.isArray(item.icon)
              ? isActive
                ? item.icon[1] ?? item.icon[0]
@ -100,7 +112,7 @@ export default defineComponent({
    const renderMenuList = () => {
      return currentMenuList.value.map((item) => {
        if (!item.children) {
-          return renderMenuItem(item, collapsed.value);
+          return renderMenuItem({ item, hideLabel: collapsed.value });
        }
        return (
          <Dropdown
@ -112,22 +124,41 @@ export default defineComponent({
                return (
                  <div class="p-8px bg-#fff container w-139px">
                    {item.children.map((child) => {
-                      return renderMenuItem(child);
+                      return renderMenuItem({ item: child, menuItemClass: 'sub-menu-item' });
                    })}
                  </div>
                );
              },
            }}
          >
-            {renderMenuItem(item, collapsed.value)}
+            {renderMenuItem({ item, hideLabel: collapsed.value })}
          </Dropdown>
        );
      });
    };

    const initMenuList = () => {
-      const groupMenuList = MENU_LIST?.[currentRouteGroup.value as string] ?? [];
-      currentMenuList.value = cloneDeep(groupMenuList);
+      let groupMenuList = MENU_LIST?.[currentRouteGroup.value as string] ?? [];
+
+      // 如果企业未开通，过滤掉 requireAuth 为 true 的菜单项
+      if (!hasOpenEnterprise.value) {
+        groupMenuList = groupMenuList.filter((item) => {
+          if (item.requireAuth === true) {
+            return false;
+          }
+
+          if (item.children && item.children.length > 0) {
+            const filteredChildren = item.children.filter((child) => !child.requireAuth);
+            if (filteredChildren.length === 0 && !item.routeName) {
+              return false;
+            }
+            item.children = filteredChildren;
+          }
+
+          return true;
+        });
+      }
+
      sidebarStore.setCurrentMenuList(groupMenuList);
    };
    const initCollapse = () => {
@ -209,29 +240,25 @@ export default defineComponent({
 </style>
 <style lang="scss">
@import './style.scss';
+
 .layout-sider-dropdown-xt {
  .container {
    border-radius: 8px;
    background: var(--BG-White, #fff);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+
    .menu-item {
      @include menu-item;
      padding: 8px;
+
      &:hover {
        background-color: rgba(109, 76, 254, 0.08) !important;
        color: #6d4cfe !important;
+
        .svg-icon {
          color: #6d4cfe !important;
        }
      }
-      // &.active {
-      //   background-color: rgba(109, 76, 254, 0.08);
-      //   color: #6d4cfe;
-      //   .label,
-      //   .svg-icon {
-      //     color: #6d4cfe;
-      //   }
-      // }
    }
  }
 }
--- a/src/layouts/components/siderBar/menu-list.ts
+++ b/src/layouts/components/siderBar/menu-list.ts
@ -26,6 +26,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
          label: '账号管理',
          routeName: 'MediaAccountAccountManagement',
          requireLogin: true,
+          requireAuth: true,
          activeMatch: ['MediaAccountAccountManagement'],
        },
        {
@ -34,6 +35,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
          label: '账号数据',
          routeName: 'MediaAccountAccountDashboard',
          requireLogin: true,
+          requireAuth: true,
          activeMatch: ['MediaAccountAccountDashboard', 'MediaAccountAccountDetails'],
        },
        // {
@ -42,6 +44,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
        //   label: '账户管理',
        //   routeName: 'PutAccountAccountManagement',
        //   requireLogin: true,
+        //   requireAuth: true,
        //   activeMatch: ['PutAccountAccountManagement'],
        // },
        // {
@ -50,6 +53,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
        //   label: '账户数据',
        //   routeName: 'PutAccountAccountData',
        //   requireLogin: true,
+        //   requireAuth: true,
        //   activeMatch: ['PutAccountAccountData'],
        // },
        // {
@ -58,6 +62,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
        //   label: '投放表现分析',
        //   routeName: 'PutAccountAccountDashboard',
        //   requireLogin: true,
+        //   requireAuth: true,
        //   activeMatch: ['PutAccountAccountDashboard'],
        // },
        // {
@ -66,6 +71,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
        //   label: '投放指南',
        //   routeName: 'PutAccountInvestmentGuidelines',
        //   requireLogin: true,
+        //   requireAuth: true,
        //   activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
        // },
      ],
@ -81,6 +87,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
          label: '成品库',
          routeName: 'MaterialCenterFinishedProducts',
          requireLogin: true,
+          requireAuth: true,
          activeMatch: [
            'MaterialCenterFinishedProducts',
            'ManuscriptUpload',
@ -96,6 +103,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
          label: '原料库',
          routeName: 'MaterialCenterRawMaterial',
          requireLogin: true,
+          requireAuth: true,
          activeMatch: ['MaterialCenterRawMaterial'],
        },
      ],
@ -120,6 +128,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
          label: '成品库',
          routeName: 'WriterMaterialCenterFinishedProducts',
          requireLogin: true,
+          requireAuth: true,
          activeMatch: [
            'WriterMaterialCenterFinishedProducts',
            'WriterManuscriptUpload',
@ -135,6 +144,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
        //   label: '原料库',
        //   routeName: 'WriterMaterialCenterRawMaterial',
        //   requireLogin: true,
+        //   requireAuth: true,
        //   activeMatch: ['WriterMaterialCenterRawMaterial'],
        // },
      ],
@ -142,35 +152,30 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
  ],
  [GROUP_MANAGEMENT_NAME]: [
    {
-      key: 'ModManagement',
-      label: '管理中心',
-      icon: ['svg-management', 'svg-management-active'],
-      children: [
-        {
-          key: 'ModManagementPerson',
-          icon: 'svg-managementPerson',
-          label: '个人信息',
-          routeName: 'ManagementPerson',
-          requireLogin: true,
-          activeMatch: ['ManagementPerson'],
-        },
-        {
-          key: 'ModManagementEnterprise',
-          icon: 'svg-managementEnterprise',
-          label: '企业信息',
-          routeName: 'ManagementEnterprise',
-          requireLogin: true,
-          activeMatch: ['ManagementEnterprise'],
-        },
-        {
-          key: 'ModManagementAccount',
-          icon: 'svg-managementAccount',
-          label: '账号管理',
-          routeName: 'ManagementAccount',
-          requireLogin: true,
-          activeMatch: ['ManagementAccount'],
-        },
-      ],
+      key: 'ModManagementPerson',
+      icon: ['svg-managementPerson', 'svg-managementPerson-active'],
+      label: '个人信息',
+      routeName: 'ManagementPerson',
+      requireLogin: true,
+      activeMatch: ['ManagementPerson'],
+    },
+    {
+      key: 'ModManagementEnterprise',
+      icon: ['svg-managementEnterprise', 'svg-managementEnterprise-active'],
+      label: '企业信息',
+      routeName: 'ManagementEnterprise',
+      requireLogin: true,
+      requireAuth: true,
+      activeMatch: ['ManagementEnterprise'],
+    },
+    {
+      key: 'ModManagementAccount',
+      icon: ['svg-managementAccount', 'svg-managementAccount-active'],
+      label: '账号管理',
+      routeName: 'ManagementAccount',
+      requireLogin: true,
+      requireAuth: true,
+      activeMatch: ['ManagementAccount'],
    },
  ],
 };
--- a/src/layouts/components/siderBar/use-menu-tree.ts
+++ b/src/layouts/components/siderBar/use-menu-tree.ts
@ -1,62 +0,0 @@
-// /*
-//  * @Author: RenXiaoDong
-//  * @Date: 2025-06-19 01:45:53
-//  */
-// import type { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
-// import { useRouter } from 'vue-router';
-// import { useSidebarStore } from '@/stores/modules/side-bar';
-
-// export default function useMenuTree() {
-//   const router  = useRouter();
-//   const appRoutes = router.options?.routes ?? [];
-//   const sidebarStore = useSidebarStore();
-//   const appRoute = computed(() => {
-//     const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuKey);
-//     return _filterRoutes;
-//   });
-//   const menuTree = computed(() => {
-//     const copyRouter = cloneDeep(appRoute.value) as RouteRecordNormalized[];
-//     copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
-//       return (a.meta.order || 0) - (b.meta.order || 0);
-//     });
-//     function travel(_routes: RouteRecordRaw[], layer: number) {
-//       if (!_routes) return null;
-
-//       const collector: any = _routes.map((element) => {
-//         // leaf node
-//         if (element.meta?.hideChildrenInMenu || !element.children) {
-//           element.children = [];
-//           return element;
-//         }
-
-//         // route filter hideInMenu true
-//         element.children = element.children.filter((x) => x.meta?.hideInMenu !== true);
-
-//         // Associated child node
-//         const subItem = travel(element.children, layer + 1);
-
-//         if (subItem.length) {
-//           element.children = subItem;
-//           return element;
-//         }
-//         // the else logic
-//         if (layer > 1) {
-//           element.children = subItem;
-//           return element;
-//         }
-
-//         if (element.meta?.hideInMenu === false) {
-//           return element;
-//         }
-
-//         return null;
-//       });
-//       return collector.filter(Boolean);
-//     }
-//     return travel(copyRouter, 0);
-//   });
-
-//   return {
-//     menuTree,
-//   };
-// }