Merge branch 'main' into feature/linzhijun_扣子智能体_0710

# Conflicts:
#	src/components/_base/navbar/index.vue
#	src/main.ts
#	src/permission/permission.ts
#	vite.config.ts

.eslintrc.cjs

@@ -28,6 +28,14 @@ module.exports = {
       tsx: '@typescript-eslint/parser',
     },
   },
+  babelOptions: {
+    presets: [
+      '@babel/preset-env'
+    ],
+    plugins: [
+      '@vue/babel-plugin-jsx'
+    ]
+  },
   rules: {
     '@typescript-eslint/prefer-optional-chain': 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

config/plugins/unocss.ts

@@ -1,8 +1,8 @@
 /*
  * @Author: 田鑫
  * @Date: 2023-03-05 18:14:16
- * @LastEditors: Please set LastEditors
+ * @LastEditors: rd 1344903914@qq.com
- * @LastEditTime: 2025-06-25 10:54:24
+ * @LastEditTime: 2025-07-11 16:30:29
  * @Description:
  */
 import Unocss from 'unocss/vite';
@@ -41,21 +41,5 @@ export const configUnocss = () =>
       [/^w-(\d+)$/, ([, d]) => ({ width: `${d}px !important` })],
       [/^h-(\d+)$/, ([, d]) => ({ height: `${d}px !important` })],
       [/^ft-(\d+)$/, ([, d]) => ({ 'font-size': `${d}px !important` })],
-      [
-        'box-container',
-        {
-          'border-radius': '2px',
-          padding: '20px',
-          margin: '8px',
-          'background-color': '#fff',
-        },
-      ],
-      [
-        'justify-between',
-        {
-          'justify-content': 'space-between',
-        },
-      ],
-      ['align-center', { 'text-align': 'center' }],
     ],
   });

config/unplugin/auto-import.ts

@@ -1,14 +1,9 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-24 16:29:10
- */
 /**
  * 自动引入API
  * */
 import AutoImport from 'unplugin-auto-import/vite';
 
 import { ArcoResolver } from 'unplugin-vue-components/resolvers';
-import IconsResolver from 'unplugin-icons/resolver';
 
 import { layoutsResolver } from '../utils';
 
@@ -21,7 +16,7 @@ export function configAutoImport() {
       '@vueuse/core',
       {
         dayjs: [['default', 'dayjs']],
-        'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'uniq', 'isNumber', 'uniqBy', 'isEmpty'],
+        'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'uniq', 'isNumber', 'uniqBy', 'isEmpty', 'merge', 'debounce'],
         '@/hooks': ['useModal'],
       },
     ],
@@ -31,9 +26,6 @@ export function configAutoImport() {
           enable: true,
         },
       }),
-      IconsResolver({
-        enabledCollections: [],
-      }),
       layoutsResolver(),
     ],
     eslintrc: {

config/unplugin/component.ts

@@ -5,7 +5,6 @@ import { kebabCase } from 'unplugin-vue-components';
 import Components from 'unplugin-vue-components/vite';
 
 import { ArcoResolver } from 'unplugin-vue-components/resolvers';
-import IconsResolver from 'unplugin-icons/resolver';
 
 import { getSep, getPath, setResolve, layoutsResolver } from '../utils';
 
@@ -20,11 +19,6 @@ export function configComponents() {
         },
         sideEffect: true,
       }),
-      IconsResolver({
-        prefix: false,
-        customCollections: ['i'],
-        enabledCollections: [],
-      }),
       layoutsResolver(),
       {
         type: 'component',

config/unplugin/icons.ts

@@ -1,14 +1,14 @@
-/**
+// /**
- * 自动引入 svg 图标
+//  * 自动引入 svg 图标
- * */
+//  * */
-import Icons from 'unplugin-icons/vite';
+import { resolve } from '../utils';
-import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
 export function configIcons() {
-  return Icons({
+  return createSvgIconsPlugin({
-    compiler: 'vue3',
+    iconDirs: [resolve( "src/assets/svg")],
-    customCollections: {
+    symbolId: "icon-[dir]-[name]",
-      i: FileSystemIconLoader('./src/assets', (svg) => svg.replace(/^<svg /, '<svg class="eo-i" ')),
+  })
-    },
+};
-  });
+
-}

package.json

@@ -72,6 +72,7 @@
     "vite": "^4.0.4",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-progress": "^0.0.6",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.24"
   },

src/App.vue

@@ -5,14 +5,16 @@
   </a-config-provider>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { useUserStore } from '@/stores';
 
 import { getUserEnterpriseInfo } from '@/utils/user';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
 
 const userStore = useUserStore();
+const sidebarStore = useSidebarStore();
 
 const redTheme = {
   token: {
@@ -20,7 +22,6 @@ const redTheme = {
     colorLink: '#f5222d', // 链接色
   },
 };
-// 初始化企业信息
 
 const init = async () => {
   const { isLogin, getUserInfo } = userStore;
@@ -28,6 +29,10 @@ const init = async () => {
   if (isLogin) {
     await getUserInfo(); // 初始化用户信息
     await getUserEnterpriseInfo();
+
+    sidebarStore.startUnreadInfoPolling();
+  } else {
+    sidebarStore.stopUnreadInfoPolling();
   }
 };
 
@@ -40,4 +45,11 @@ onMounted(() => {
     console.error(`发现catch报错：${event.reason}`);
   });
 });
+onUnmounted(() => {
+  sideBarStore.stopUnreadInfoPolling();
+});
 </script>
+
+<style lang="scss">
+@import './styles/index.scss';
+</style>

src/api/all/common.ts

@@ -13,3 +13,52 @@ export const getCustomColumns = (params = {}) => {
 export const updateCustomColumns = (params = {}) => {
   return Http.put('/v1/custom-columns', params);
 };
+
+export const getUserList = (params = {}) => {
+  return Http.get('/v1/users/list', params);
+};
+
+// 任务中心-分页
+export const getTask = (params = {}) => {
+  return Http.get('/v1/tasks', params);
+};
+
+// 任务中心-批量删除
+export const deleteBatchTasks = (params = {}) => {
+  return Http.delete('/v1/tasks', { data: params });
+};
+
+// 任务中心-删除
+export const deleteTask = (id: string) => {
+  return Http.delete(`/v1/tasks/${id}`);
+};
+
+// 任务中心-查询任务状态
+export const getTaskStatus = (id: string) => {
+  return Http.get(`/v1/tasks/${id}/status`);
+};
+
+// 任务中心-获取未读任务
+export const getTaskUnread = () => {
+  return Http.get(`/v1/tasks/unread`);
+};
+
+// 任务中心-已读
+export const patchTaskRead = (params = {}) => {
+  return Http.patch('/v1/tasks/read', params);
+};
+
+// 任务中心-重做任务
+export const postRedoTask = (id: string) => {
+  return Http.post(`/v1/tasks/${id}/redo`);
+};
+
+// 任务中心-批量下载
+export const postBatchDownload = (params = {}) => {
+  return Http.post(`/v1/tasks/batch-download`, params);
+};
+
+// 任务中心-批量查询任务状态
+export const batchQueryTaskStatus = (params = {}) => {
+  return Http.get(`/v1/tasks/batch-query-status`, params);
+};

src/api/all/propertyMarketing.ts

@@ -24,6 +24,11 @@ export const getMediaAccounts = (params = {}) => {
   return Http.get('/v1/media-accounts', params);
 };
 
+// 媒体账号-列表
+export const getMediaAccountList = (params = {}) => {
+  return Http.get('/v1/media-accounts/list', params);
+};
+
 // 媒体账号-健康情况
 export const getMediaAccountsHealth = (params = {}) => {
   return Http.get('/v1/media-accounts/health', params);
@@ -332,4 +337,68 @@ export const postPlacementAccountsSync = (id: string) => {
   return Http.post(`/v1/placement-accounts/${id}/sync-data`);
 };
 
+// 投放账号-子账号分页
+export const postSubAccount = (params = {}) => {
+  return Http.post('/v1/placement-accounts/get-subaccount', params);
+};
 
+// 投放账号-添加子账号
+export const postAddSubAccount = (params = {}) => {
+  return Http.post('/v1/placement-accounts/subaccount', params);
+};
+
+// 媒体账号-同步数据
+export const postSyncMediaAccountData = (id: string) => {
+  return Http.post(`/v1/media-accounts/${id}/sync-data`);
+};
+
+// 媒体账号-批量同步数据
+export const postBatchSyncMediaAccountData = (params: {}) => {
+  return Http.post(`/v1/media-accounts/batch-sync-data`, params);
+};
+
+// 媒体账号-查询同步状态
+export const getMediaAccountSyncStatus = (params = {}) => {
+  return Http.get('/v1/media-accounts/sync-status', params);
+};
+
+// 媒体账号-移除同步状态
+export const deleteSyncStatus = (id: string) => {
+  return Http.delete(`/v1/media-accounts/${id}/sync-status`);
+};
+
+// 内容稿件-列表
+export const getWorksList = (params = {}) => {
+  return Http.get('/v1/works/list', params);
+};
+
+// 项目管理-分页
+export const getProjects = (params = {}) => {
+  return Http.get('/v1/projects', params);
+};
+
+// 项目管理-列表
+export const getProjectList = () => {
+  return Http.get('/v1/projects/list');
+};
+
+// 项目管理-删除
+export const deleteProject = (id: string) => {
+  return Http.delete(`/v1/projects/${id}`);
+};
+
+// 项目管理-添加
+export const postAddProject = (params: {}) => {
+  return Http.post('/v1/projects', params);
+};
+
+// 项目管理-修改
+export const putProject = (params = {}) => {
+  const { id, ...rest } = params as { id: string; [key: string]: any };
+  return Http.put(`/v1/projects/${id}`, rest);
+};
+
+// 项目管理-详情
+export const getProjectDetail = (id: string) => {
+  return Http.get(`/v1/projects/${id}`);
+};

src/assets/svg/svg-projectManagement.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M5.25065 1.3125C5.4638 1.31254 5.67398 1.36363 5.86328 1.46159L7.86328 2.49674C8.05258 2.5947 8.26278 2.64579 8.47591 2.64583L13.3822 2.64583C14.1185 2.64583 14.7155 3.24282 14.7155 3.97917L14.7155 13.3542C14.7155 14.0905 14.1185 14.6875 13.3822 14.6875L2.61784 14.6875C1.88146 14.6875 1.28451 14.0905 1.28451 13.3542L1.28451 2.64583C1.28455 1.90949 1.88149 1.3125 2.61784 1.3125L5.25065 1.3125ZM4.528 9.99023C4.14147 9.9903 3.82815 10.3036 3.82813 10.6901C3.82813 11.0767 4.14146 11.3899 4.528 11.39C4.91459 11.39 5.22787 11.0767 5.22787 10.6901C5.22784 10.3035 4.91458 9.99023 4.528 9.99023ZM7.153 10.0905C6.82179 10.0907 6.55342 10.3589 6.55339 10.6901C6.55339 11.0214 6.82177 11.2902 7.153 11.2904L11.5384 11.2904C11.8698 11.2904 12.1387 11.0215 12.1387 10.6901C12.1386 10.3588 11.8698 10.0905 11.5384 10.0905L7.153 10.0905ZM4.528 6.50846C4.14155 6.50853 3.82828 6.82191 3.82813 7.20833C3.82813 7.59489 4.14146 7.90878 4.528 7.90885C4.91459 7.90885 5.22787 7.59493 5.22787 7.20833C5.22771 6.82187 4.9145 6.50846 4.528 6.50846ZM7.153 6.60872C6.82187 6.60889 6.55355 6.87721 6.55339 7.20833C6.55339 7.5396 6.82177 7.80843 7.153 7.80859H11.5384C11.8698 7.80859 12.1387 7.5397 12.1387 7.20833C12.1385 6.8771 11.8697 6.60872 11.5384 6.60872H7.153Z" fill="currentColor"/>
+</svg>

src/assets/svg/svg-taskCenter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M9.2041 2.32617C11.6897 2.32617 13.7595 4.10156 14.2178 6.45312C15.2902 7.15513 16 8.36571 16 9.74316C16 11.9142 14.2393 13.6738 12.0684 13.6738H3.93066C1.75983 13.6736 3.83345e-05 11.9141 0 9.74316C0 9.63068 0.00538693 9.51927 0.0146484 9.40918C0.00563418 9.29576 7.49779e-06 9.18117 0 9.06543C0 6.69938 1.91817 4.78127 4.28418 4.78125C4.46476 4.78126 4.64268 4.79275 4.81738 4.81445C5.70979 3.32391 7.34052 2.32633 9.2041 2.32617ZM9.2041 3.52539C7.77983 3.52555 6.53145 4.28786 5.84668 5.43164L5.44531 6.10156L4.66992 6.00586C4.53994 5.9897 4.41129 5.98048 4.28418 5.98047C2.6345 5.98048 1.28692 7.27669 1.2041 8.90625L1.2002 9.06543C1.2002 9.14467 1.20305 9.22752 1.20996 9.31445L1.21777 9.41211L1.20996 9.50977L1.2002 9.74316C1.20023 11.2514 2.42259 12.4744 3.93066 12.4746H12.0684C13.5297 12.4746 14.7226 11.3265 14.7959 9.88379L14.7998 9.74316C14.7998 8.78847 14.3094 7.94732 13.5605 7.45703L13.1377 7.17969L13.04 6.68262C12.6894 4.8834 11.104 3.52539 9.2041 3.52539ZM6.79688 6.74121C6.93478 6.61179 7.13694 6.57633 7.31055 6.65137C7.48407 6.72651 7.59654 6.89783 7.59668 7.08691V10.749C7.59642 11.0109 7.38396 11.2235 7.12207 11.2236C6.86013 11.2236 6.64772 11.0109 6.64746 10.749V8.18457L6.05859 8.73828C5.86754 8.91775 5.5662 8.90785 5.38672 8.7168C5.20757 8.52576 5.21736 8.2253 5.4082 8.0459L6.79688 6.74121ZM8.87793 6.6123C9.14003 6.61235 9.35254 6.82578 9.35254 7.08789V9.65137L9.94141 9.09863C10.1325 8.91917 10.4338 8.92809 10.6133 9.11914C10.7925 9.31017 10.7827 9.61061 10.5918 9.79004L9.20312 11.0947C9.0652 11.2242 8.86308 11.2596 8.68945 11.1846C8.51588 11.1094 8.40339 10.9382 8.40332 10.749V7.08789C8.40332 6.82582 8.61588 6.61241 8.87793 6.6123Z" fill="currentColor"/>
+</svg>

src/components/_base/breadcrumb/index.vue

@@ -37,7 +37,7 @@ const matched = computed(() => {
   </a-breadcrumb> -->
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .container-breadcrumb {
   margin: 16px 0;
   :deep(.arco-breadcrumb-item) {

src/components/_base/exit-account-modal/index.vue

@@ -17,7 +17,7 @@
     </div>
     <p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
     <div class="flex items-center justify-end">
-      <a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
+      <a-button class="!rounded-4px" size="medium" @click="onClose">返回</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
         >退出登录</a-button
       >
@@ -67,7 +67,7 @@ defineExpose({ open });
     padding: 24px;
     .s1 {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -75,7 +75,7 @@ defineExpose({ open });
     }
     .s2 {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -83,15 +83,12 @@ defineExpose({ open });
     }
     .cancel-btn {
       border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
     }
     .danger-btn {
-      border-radius: 4px;
       background: var(--Functional-Danger-6, #f64b31) !important;
-      border: none !important;
+      &:hover {
+        background: var(--Functional-Danger-6, #f64b31) !important;
+      }
     }
   }
 }

src/components/_base/menu/index.vue

@@ -170,7 +170,7 @@ export default defineComponent({
     }
     .arco-menu-title {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
@@ -194,7 +194,7 @@ export default defineComponent({
     border-radius: 8px;
     .arco-menu-item-inner {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;

src/components/_base/navbar/components/navbar-menu/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="navbar-menu h-100%">
+    <a-menu mode="horizontal" :selected-keys="selectedKey">
+      <a-menu-item v-for="item in menuList" :key="String(item.id)">
+        <template v-if="item.children">
+          <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
+            <a-button type="text">
+              <span class="menu-item-text mr-2px"> {{ item.name }}</span>
+              <icon-caret-down size="16" class="arco-icon-down !mr-0" />
+            </a-button>
+            <template #content>
+              <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDropdownClick(child)">
+                <span class="menu-item-text"> {{ child.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+        </template>
+        <template v-else>
+          <a-menu-item :key="String(item.id)" @click="handleDropdownClick(item)">
+            <span class="menu-item-text"> {{ item.name }}</span>
+          </a-menu-item>
+        </template>
+      </a-menu-item>
+    </a-menu>
+  </div>
+</template>
+
+<script setup>
+import { useSidebarStore } from '@/stores/modules/side-bar';
+import router from '@/router';
+
+const sidebarStore = useSidebarStore();
+
+const selectedKey = computed(() => {
+  return [String(sidebarStore.activeMenuId)];
+});
+const menuList = computed(() => {
+  return sidebarStore.menuList;
+});
+const handleDropdownClick = (item) => {
+  router.push({ name: item.routeName });
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
+<style lang="scss">
+.layout-menu-item-dropdown {
+  .arco-dropdown {
+    border-radius: 8px;
+    border: 1px solid var(--BG-300, #e6e6e8);
+    background: var(--BG-white, #fff);
+    padding: 12px 0px;
+    .arco-dropdown-option {
+      padding: 0 12px;
+      margin-bottom: 4px;
+      &-content {
+        display: flex;
+        height: 40px;
+        width: 100%;
+        padding: 10px 24px;
+        align-items: center;
+        .menu-item-text {
+          color: var(--Text-2, #3c4043);
+          font-family: 'PuHuiTi-Regular';
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 137.5% */
+        }
+      }
+      &:not(.arco-dropdown-option-disabled):hover {
+        background-color: transparent;
+        .arco-dropdown-option-content {
+          border-radius: 8px;
+          background: var(--BG-200, #f2f3f5);
+        }
+      }
+    }
+  }
+}
+</style>

src/components/_base/navbar/components/navbar-menu/style.scss

@@ -0,0 +1,45 @@
+.navbar-menu {
+  display: flex;
+  align-items: center;
+  margin-left: 40px;
+  .menu-item-text {
+    color: var(--Text-2, #3c4043);
+    font-family: $font-family-medium;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  :deep(.arco-menu) {
+    height: 100%;
+    .arco-menu-inner {
+      padding: 0 20px;
+    }
+    .arco-menu-item {
+      padding: 0;
+      position: relative;
+      &.arco-menu-selected {
+        .menu-item-text,
+        .arco-menu-selected-label {
+          color: #6d4cfe;
+        }
+        .arco-menu-selected-label {
+          background: var(--Brand-Brand-6, #6d4cfe);
+          height: 4px;
+          border-radius: 4px;
+          width: 50%;
+          position: absolute;
+          bottom: -8px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+  .arco-icon-down {
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .arco-dropdown-open .arco-icon-down {
+    transform: rotate(180deg);
+  }
+}

src/components/_base/navbar/components/right-side/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="right-wrap">
+    <div class="relative mr-12px" @click="setUnread">
+      <SvgIcon
+        name="svg-taskCenter"
+        size="16"
+        class="cursor-pointer color-#737478 hover:color-#6D4CFE"
+        @click="openDownloadCenter"
+      />
+      <div class="w-4px h-4px rounded-50% bg-#F64B31 absolute top-1px right-1px" v-if="hasUnreadInfo"></div>
+    </div>
+
+    <a-dropdown trigger="click" class="layout-avatar-dropdown">
+      <a-avatar class="cursor-pointer" :size="32">
+        <img alt="avatar" src="@/assets/avatar.svg" />
+      </a-avatar>
+      <template #content>
+        <div>
+          <a-doption>
+            <a-space class="flex justify-between w-100%" @click="setServerMenu">
+              <div class="flex items-center">
+                <img :src="icon1" class="w-16px h-16px mr-8px" />
+                <span>管理中心</span>
+              </div>
+              <icon-right size="12" />
+            </a-space>
+          </a-doption>
+          <a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
+            <a-doption class="enterprises-doption">
+              <a-space class="flex justify-between w-100%">
+                <div class="flex items-center">
+                  <img :src="icon3" class="w-16px h-16px mr-8px" />
+                  <span>切换企业账号</span>
+                </div>
+                <icon-right size="12" />
+              </a-space>
+            </a-doption>
+            <template #content>
+              <a-doption
+                v-for="(item, index) in enterprises"
+                :key="index"
+                class="rounded-8px hover:bg-#F2F3F5"
+                @click="onEnterpriseItemClick(item)"
+              >
+                <div
+                  class="flex items-center w-100% justify-between"
+                  :class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
+                >
+                  <span>{{ item.name }}</span>
+                  <icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
+                </div>
+              </a-doption>
+            </template>
+          </a-dsubmenu>
+          <a-doption>
+            <a-space class="flex justify-between w-100%" @click="clickExit">
+              <div class="flex items-center">
+                <img :src="icon2" class="w-16px h-16px mr-8px" />
+                <span>退出登录</span>
+              </div>
+              <icon-right size="12" />
+            </a-space>
+          </a-doption>
+        </div>
+      </template>
+    </a-dropdown>
+
+    <ExitAccountModal ref="exitAccountModalRef" />
+    <DownloadCenterModal ref="downloadCenterModalRef" />
+  </div>
+</template>
+
+<script setup>
+import router from '@/router';
+import { useEnterpriseStore } from '@/stores/modules/enterprise';
+import { useSidebarStore } from '@/stores/modules/side-bar';
+import { useUserStore } from '@/stores';
+
+import ExitAccountModal from '@/components/_base/exit-account-modal';
+import DownloadCenterModal from '../task-center-modal';
+
+import icon1 from '@/assets/option.svg';
+import icon2 from '@/assets/exit.svg';
+import icon3 from '@/assets/change.svg';
+
+const enterpriseStore = useEnterpriseStore();
+const userStore = useUserStore();
+const sideBarStore = useSidebarStore();
+
+const hasUnreadInfo = computed(() => sideBarStore.unreadInfo.length);
+
+const exitAccountModalRef = ref(null);
+const downloadCenterModalRef = ref(null);
+
+const enterprises = computed(() => {
+  return userStore.userInfo?.enterprises ?? [];
+});
+const enterpriseInfo = computed(() => {
+  return enterpriseStore?.enterpriseInfo ?? {};
+});
+
+const openDownloadCenter = () => {
+  downloadCenterModalRef.value.open();
+};
+const onEnterpriseItemClick = async (item) => {
+  enterpriseStore.setEnterpriseInfo(item);
+  window.location.reload();
+};
+const clickExit = async () => {
+  exitAccountModalRef.value?.open();
+};
+const setServerMenu = () => {
+  router.push('/management/person');
+};
+const setUnread = () => {
+  if (sideBarStore.unreadInfo.length) {
+    sideBarStore.removeTaskUnreadInfo();
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.right-wrap {
+  display: flex;
+  padding-right: 20px;
+  list-style: none;
+  align-items: center;
+}
+</style>
+<style lang="scss">
+.layout-avatar-dropdown,
+.enterprises-dsubmenu {
+  .arco-dropdown {
+    border-radius: 8px;
+    border: 1px solid var(--BG-300, #e6e6e8);
+    background: var(--BG-white, #fff);
+    padding: 12px 0px;
+    .arco-dropdown-option {
+      padding: 0 12px;
+      margin-bottom: 4px;
+      &-content {
+        display: flex;
+        height: 40px;
+        width: 100%;
+        padding: 10px 24px;
+        align-items: center;
+        .menu-item-text {
+          color: var(--Text-2, #3c4043);
+          font-family: $font-family-regular;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px;
+        }
+      }
+      .arco-dropdown-option-content {
+        border-radius: 8px !important;
+      }
+      &:not(.arco-dropdown-option-disabled):hover {
+        background-color: transparent;
+        .arco-dropdown-option-content {
+          background: var(--BG-200, #f2f3f5);
+        }
+      }
+    }
+  }
+}
+.layout-avatar-dropdown,
+.enterprises-dsubmenu {
+  width: 200px;
+  .arco-dropdown {
+    padding: 12px 4px;
+    .arco-dropdown-option {
+      padding: 0 !important;
+      &-content {
+        padding: 0 12px !important;
+      }
+    }
+  }
+  .arco-dropdown-option-suffix {
+    display: none;
+  }
+  .enterprises-doption {
+    .arco-dropdown-option-content {
+      padding: 0 !important;
+      border-radius: 8px;
+    }
+    &:not(.arco-dropdown-option-disabled):hover {
+      background-color: transparent;
+      .arco-dropdown-option-content {
+        background: var(--BG-200, #f2f3f5);
+      }
+    }
+  }
+}
+</style>

src/components/_base/navbar/components/task-center-modal/components/export-task/constants.ts

@@ -0,0 +1,38 @@
+export const INITIAL_FORM = {
+  type: 1,
+  operator_name: '',
+  module: '',
+  sort_column: undefined,
+  sort_order: undefined,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '文件名称',
+    dataIndex: 'name',
+    width: 180,
+  },
+  {
+    title: '所属模块',
+    dataIndex: 'module',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    width: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '操作人员',
+    dataIndex: 'operator.name',
+    width: 150,
+  },
+];

src/components/_base/navbar/components/task-center-modal/components/export-task/delete-task-modal.vue

@@ -0,0 +1,62 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isBatch ? '批量删除下载记录' : '删除下载记录'"
+    width="400px"
+    @close="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ accountName }} 这条记录吗？</span>
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
+        >确定</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteTask, deleteBatchTasks } from '@/api/all/common';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['update', 'close', 'batchUpdate']);
+
+const visible = ref(false);
+const taskId = ref(null);
+const accountName = ref('');
+
+const isBatch = computed(() => Array.isArray(taskId.value));
+
+function onClose() {
+  visible.value = false;
+  taskId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  taskId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
+  const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
+
+  const { code } = await _fn(_params);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    isBatch.value ? emits('batchUpdate') : emits('update');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

src/components/_base/navbar/components/task-center-modal/components/export-task/index.vue

@@ -0,0 +1,386 @@
+<script lang="jsx">
+import { ref, computed } from 'vue';
+import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
+import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
+import NoData from '@/components/no-data';
+import { getTask, postRedoTask, postBatchDownload, batchQueryTaskStatus } from '@/api/all/common';
+import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
+import { EXPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
+import { formatTableField, exactFormatTime, genRandomId } from '@/utils/tools';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { downloadByUrl } from '@/utils/tools';
+import DeleteTaskModal from './delete-task-modal.vue';
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+import { showExportNotification, showFailExportNotification } from '@/utils/arcoD';
+
+export default {
+  setup(props, { emit, expose }) {
+    const {
+      selectedRowKeys,
+      selectedRows,
+      dataSource,
+      pageInfo,
+      onPageChange,
+      onPageSizeChange,
+      rowSelection,
+      handleSelect,
+      handleSelectAll,
+      DEFAULT_PAGE_INFO,
+    } = useTableSelectionWithPagination({
+      onPageChange: () => {
+        getData();
+      },
+      onPageSizeChange: () => {
+        getData();
+      },
+    });
+    let queryTaskTimer = null;
+
+    const query = ref(cloneDeep(INITIAL_FORM));
+    const deleteTaskModalRef = ref(null);
+    const downloadTaskInfos = ref([]);
+
+    const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
+    const indeterminate = computed(
+      () => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
+    );
+
+    const reset = () => {
+      query.value = cloneDeep(INITIAL_FORM);
+      pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
+      selectedRowKeys.value = [];
+      selectedRows.value = [];
+      dataSource.value = [];
+      downloadTaskInfos.value = [];
+    };
+
+    const init = () => {
+      getData();
+    };
+
+    const getData = async () => {
+      const { page, page_size } = pageInfo.value;
+      const { code, data } = await getTask({
+        ...query.value,
+        page,
+        page_size,
+      });
+      if (code === 200) {
+        dataSource.value = data?.data ?? [];
+        pageInfo.value.total = data?.total;
+      }
+    };
+    const reload = () => {
+      pageInfo.value.page = 1;
+      getData();
+    };
+
+    const handleSorterChange = (column, order) => {
+      query.value.sort_column = column;
+      query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
+      reload();
+    };
+
+    const handleSearch = () => {
+      reload();
+    };
+
+    const clearSelectedRows = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+    };
+
+    const handleDownload = async (record) => {
+      if (record.status === enumTaskStatus.Failed) {
+        const { code } = await postRedoTask(record.id);
+        if (code === 200) {
+          showExportNotification(`正在下载“${record.name}”，请稍后...`);
+          getData();
+        }
+      } else {
+        record.file && downloadByUrl(record.file);
+      }
+    };
+
+    // 批量下载
+    const handleBatchDownload = debounce(async () => {
+      const { code, data } = await postBatchDownload({ ids: selectedRowKeys.value });
+      if (code === 200) {
+        startBatchDownload(data.id);
+      }
+    }, 500);
+    const startBatchDownload = (id) => {
+      const randomId = genRandomId();
+      showExportNotification(
+        `正在批量下载“${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件，请稍后...`,
+        {
+          duration: 0,
+          id: randomId,
+        },
+      );
+      downloadTaskInfos.value.push({
+        id,
+        randomId,
+      });
+
+      if (!queryTaskTimer) {
+        queryTaskTimer = setInterval(() => getSyncTaskStatus(), 3000);
+      }
+    };
+    const getSyncTaskStatus = async () => {
+      const { code, data } = await batchQueryTaskStatus({ ids: downloadTaskInfos.value.map((v) => v.id) });
+      if (code === 200) {
+        let completeTaskNum = 0;
+        data.forEach((item) => {
+          const { status, file, id } = item;
+          if (status !== 0) {
+            completeTaskNum++;
+
+            const notificationId = downloadTaskInfos.value.find((v) => v.id === id)?.randomId;
+            notificationId && Notification.remove(notificationId);
+
+            if (status === 1) {
+              AMessage.success('批量下载已完成，正在下载文件...');
+              downloadByUrl(file);
+            } else if (status === 2) {
+              const onReDownload = () => {
+                startBatchDownload(id);
+              };
+              showFailExportNotification(
+                `${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件下载失败`,
+                { onReDownload },
+              );
+            }
+
+            // 结束的任务过滤掉
+            downloadTaskInfos.value = downloadTaskInfos.value.filter((v) => v.id !== id);
+          }
+        });
+
+        // 全部完成了
+        if (completeTaskNum === data.length) {
+          clearQueryTaskTimer();
+          clearSelectedRows();
+          downloadTaskInfos.value = [];
+        }
+      }
+    };
+
+    const handleDelete = (record) => {
+      const { id, name } = record;
+      deleteTaskModalRef.value.open({
+        id,
+        name: `“${name || '-'}”`,
+      });
+    };
+    const handleBatchDelete = () => {
+      const ids = selectedRows.value.map((item) => item.id);
+      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
+
+      deleteTaskModalRef.value?.open({ id: ids, name: names });
+    };
+
+    const onBatchSuccess = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+      getData();
+    };
+
+    const clearQueryTaskTimer = () => {
+      if (queryTaskTimer) {
+        clearInterval(queryTaskTimer);
+        queryTaskTimer = null;
+      }
+    };
+    const unloadComp = () => {
+      clearQueryTaskTimer();
+    };
+    onUnmounted(() => {
+      clearQueryTaskTimer;
+    });
+
+    expose({ init, reset, unloadComp });
+
+    return () => (
+      <div class="export-task-wrap">
+        {/* 筛选行 */}
+        <div class="filter-row flex mb-16px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">操作人员</span>
+            <Input
+              v-model={query.value.operator_name}
+              class="w-240px"
+              placeholder="请输入操作人员"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">所属模块</span>
+            <Input
+              v-model={query.value.module}
+              class="w-240px"
+              placeholder="请输入所属模块"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+        </div>
+
+        {/* 已选提示行 */}
+        {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
+          <div
+            class={[
+              'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
+              selectedRows.value.length > 0 ? ' selected' : '',
+            ].join('')}
+          >
+            <div class="flex items-center">
+              <div class="flex items-center">
+                <Checkbox
+                  modelValue={checkedAll.value}
+                  indeterminate={indeterminate.value}
+                  class="mr-8px"
+                  onChange={handleSelectAll}
+                />
+                <span class="label mr-24px">
+                  已选
+                  <span class="color-#6D4CFE">{selectedRows.value.length}</span>
+                  个文件
+                </span>
+                <span class="operation-btn" onClick={handleBatchDownload}>
+                  批量下载
+                </span>
+                <span class="operation-btn red" onClick={handleBatchDelete}>
+                  批量删除
+                </span>
+              </div>
+            </div>
+            <IconClose size={16} class="cursor-pointer color-#737478" onClick={clearSelectedRows} />
+          </div>
+        )}
+
+        {/* 表格 */}
+        <Table
+          ref="tableRef"
+          data={dataSource.value}
+          column-resizable
+          row-key="id"
+          row-selection={rowSelection.value}
+          selected-keys={selectedRowKeys.value}
+          pagination={false}
+          scroll={{ x: '100%', y: '100%' }}
+          class="w-100% flex-1 overflow-hidden"
+          bordered
+          onSorterChange={handleSorterChange}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+          v-slots={{
+            empty: () => <NoData />,
+            columns: () => (
+              <>
+                {TABLE_COLUMNS.map((column) => (
+                  <TableColumn
+                    key={column.dataIndex}
+                    data-index={column.dataIndex}
+                    fixed={column.fixed}
+                    width={column.width}
+                    min-width={column.minWidth}
+                    sortable={column.sortable}
+                    align={column.align}
+                    ellipsis
+                    tooltip
+                    v-slots={{
+                      title: () => (
+                        <div class="flex items-center">
+                          <span class="cts mr-4px">{column.title}</span>
+                          {column.tooltip && (
+                            <Tooltip content={column.tooltip} position="top">
+                              <IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
+                            </Tooltip>
+                          )}
+                        </div>
+                      ),
+                      cell: ({ record }) => {
+                        if (column.dataIndex === 'status') {
+                          return (
+                            <div class={['status-box', `status-box-${record.status}`]}>
+                              <span>{EXPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
+                            </div>
+                          );
+                        } else if (column.dataIndex === 'operator.name') {
+                          return record.operator?.name || record.operator?.mobile;
+                        } else if (column.dataIndex === 'created_at') {
+                          return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
+                        } else {
+                          return formatTableField(column, record, true);
+                        }
+                      },
+                    }}
+                  />
+                ))}
+                <TableColumn
+                  data-index="operation"
+                  width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60}
+                  fixed="right"
+                  title="操作"
+                  v-slots={{
+                    cell: ({ record }) => (
+                      <div class="flex items-center">
+                        <img
+                          src={icon1}
+                          width="14"
+                          height="14"
+                          class="mr-8px cursor-pointer"
+                          onClick={() => handleDelete(record)}
+                        />
+                        {record.status !== enumTaskStatus.Exporting && (
+                          <Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
+                            {record.status === enumTaskStatus.Failed ? '重新导出' : '下载'}
+                          </Button>
+                        )}
+                      </div>
+                    ),
+                  }}
+                />
+              </>
+            ),
+          }}
+        />
+
+        {/* 分页 */}
+        {pageInfo.value.total > 0 && (
+          <div class="flex justify-end my-16px">
+            <Pagination
+              total={pageInfo.value.total}
+              size="mini"
+              show-total
+              show-jumper
+              show-page-size
+              current={pageInfo.value.page}
+              page-size={pageInfo.value.page_size}
+              onChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </div>
+        )}
+
+        {/* 删除弹窗 */}
+        <DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/components/_base/navbar/components/task-center-modal/components/export-task/style.scss

@@ -0,0 +1,86 @@
+.export-task-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .tip-row {
+    border-radius: 2px;
+    background: #f0edff;
+    .label {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.normal {
+      background: #ebf7f2;
+      .label {
+        color: #211f24;
+      }
+    }
+    &.abnormal {
+      background: #ffe7e4;
+      .label {
+        color: #211f24;
+      }
+    }
+    .err-btn {
+      background-color: #f64b31 !important;
+      color: var(--BG-white, #fff);
+      font-family: 'PingFang SC';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+    .operation-btn {
+      padding: 0;
+      cursor: pointer;
+      color: var(--Brand-Brand-6, #6d4cfe);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &.red {
+        color: #f64b31;
+      }
+    }
+  }
+  .status-box {
+    border-radius: 2px;
+    display: flex;
+    height: 24px;
+    padding: 0px 8px;
+    align-items: center;
+    width: fit-content;
+    span {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; 
+    }
+    &-0 {
+      background: var(--Functional-yellow-1, #fff7e5);
+      span {
+        color: var(--Functional-yellow-6, #ffae00);
+      }
+    }
+    &-1 {
+      background: var(--Functional-Green-1, #ebf7f2);
+      span {
+        color: var(--Functional-Green-6, #25c883);
+      }
+    }
+    &-2 {
+      background: var(--Functional-Red-1, #ffe9e7);
+      span {
+        color: var(--Functional-Red-6, #f64b31);
+      }
+    }
+  }
+}

src/components/_base/navbar/components/task-center-modal/components/import-task/constants.ts

@@ -0,0 +1,53 @@
+export const INITIAL_FORM = {
+  type: 0,
+  operator_name: '',
+  module: '',
+  sort_column: undefined,
+  sort_order: undefined,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '任务名称',
+    dataIndex: 'name',
+    width: 180,
+  },
+  {
+    title: '所属模块',
+    dataIndex: 'module',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+  },
+  {
+    title: '共导入',
+    dataIndex: 'total_number',
+    width: 100,
+  },
+  {
+    title: '导入成功',
+    dataIndex: 'success_number',
+    width: 100,
+  },
+  {
+    title: '导入失败',
+    dataIndex: 'fail_number',
+    width: 100,
+  },
+  {
+    title: '导入时间',
+    dataIndex: 'created_at',
+    width: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '操作人员',
+    dataIndex: 'operator.name',
+    width: 150,
+  },
+];

src/components/_base/navbar/components/task-center-modal/components/import-task/delete-task-modal.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isBatch ? '批量删除导入记录' : '删除导入记录'"
+    width="400px"
+    @close="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ accountName }} 这条记录吗？</span>
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
+        >确定</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteTask, deleteBatchTasks } from '@/api/all/common';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['update', 'close', 'batchUpdate']);
+
+const visible = ref(false);
+const taskId = ref(null);
+const accountName = ref('');
+
+const isBatch = computed(() => Array.isArray(taskId.value));
+
+function onClose() {
+  visible.value = false;
+  taskId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  taskId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
+  const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
+  const { code } = await _fn(_params);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    isBatch.value ? emits('batchUpdate') : emits('update');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

src/components/_base/navbar/components/task-center-modal/components/import-task/index.vue

@@ -0,0 +1,300 @@
+<script lang="jsx">
+import { ref, computed } from 'vue';
+import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
+import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
+import NoData from '@/components/no-data';
+import { getTask } from '@/api/all/common';
+import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
+import { IMPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
+import { formatTableField, exactFormatTime } from '@/utils/tools';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { downloadByUrl } from '@/utils/tools';
+import DeleteTaskModal from './delete-task-modal.vue';
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+// import { showExportNotification } from '@/utils/arcoD';
+
+export default {
+  setup(props, { emit, expose }) {
+    const {
+      selectedRowKeys,
+      selectedRows,
+      dataSource,
+      pageInfo,
+      onPageChange,
+      onPageSizeChange,
+      rowSelection,
+      handleSelect,
+      handleSelectAll,
+      DEFAULT_PAGE_INFO,
+    } = useTableSelectionWithPagination({
+      onPageChange: () => {
+        getData();
+      },
+      onPageSizeChange: () => {
+        getData();
+      },
+    });
+
+    const query = ref({ ...INITIAL_FORM });
+    const deleteTaskModalRef = ref(null);
+
+    const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
+    const indeterminate = computed(
+      () => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
+    );
+
+    const reset = () => {
+      query.value = { ...INITIAL_FORM };
+      pageInfo.value = { ...DEFAULT_PAGE_INFO };
+      selectedRowKeys.value = [];
+      selectedRows.value = [];
+      dataSource.value = [];
+    };
+
+    const init = () => {
+      getData();
+    };
+
+    const getData = async () => {
+      const { page, page_size } = pageInfo.value;
+      const { code, data } = await getTask({
+        ...query.value,
+        page,
+        page_size,
+      });
+      if (code === 200) {
+        dataSource.value = data?.data ?? [];
+        pageInfo.value.total = data?.total;
+      }
+    };
+    const reload = () => {
+      pageInfo.value.page = 1;
+      getData();
+    };
+
+    const handleSorterChange = (column, order) => {
+      query.value.sort_column = column;
+      query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
+      reload();
+    };
+
+    const handleSearch = () => {
+      reload();
+    };
+
+    const handleCloseTip = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+    };
+
+    const handleDownload = (record) => {
+      downloadByUrl(record.file);
+      // showExportNotification(`正在下载“${record.name}”，请稍后...`)
+    };
+    const handleBatchDownload = () => {
+      // 批量下载逻辑
+    };
+
+    const handleDelete = (record) => {
+      const { id, name } = record;
+      deleteTaskModalRef.value.open({
+        id,
+        name: `“${name || '-'}”`,
+      });
+    };
+    const handleBatchDelete = () => {
+      const ids = selectedRows.value.map((item) => item.id);
+      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
+      deleteTaskModalRef.value?.open({ id: ids, name: names });
+    };
+
+    const onBatchSuccess = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+      getData();
+    };
+    
+    expose({ init, reset });
+
+    return () => (
+      <div class="import-task-wrap">
+        {/* 筛选行 */}
+        {/* <div class="filter-row flex mb-16px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">操作人员</span>
+            <Input
+              v-model={query.value.operator_name}
+              class="w-240px"
+              placeholder="请输入操作人员"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">所属模块</span>
+            <Input
+              v-model={query.value.module}
+              class="w-240px"
+              placeholder="请输入所属模块"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+        </div> */}
+
+        {/* 已选提示行 */}
+        {/* {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
+          <div
+            class={[
+              'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
+              selectedRows.value.length > 0 ? ' selected' : '',
+            ].join('')}
+          >
+            <div class="flex items-center">
+              <div class="flex items-center">
+                <Checkbox
+                  modelValue={checkedAll.value}
+                  indeterminate={indeterminate.value}
+                  class="mr-8px"
+                  onChange={handleSelectAll}
+                />
+                <span class="label mr-24px">
+                  已选
+                  <span class="color-#6D4CFE">{selectedRows.value.length}</span>
+                  个文件
+                </span>
+                <span class="operation-btn" onClick={handleBatchDownload}>
+                  批量下载
+                </span>
+                <span class="operation-btn red" onClick={handleBatchDelete}>
+                  批量删除
+                </span>
+              </div>
+            </div>
+            <IconClose size={16} class="cursor-pointer color-#737478" onClick={handleCloseTip} />
+          </div>
+        )} */}
+
+        {/* 表格 */}
+        <Table
+          ref="tableRef"
+          data={dataSource.value}
+          column-resizable
+          row-key="id"
+          selected-keys={selectedRowKeys.value}
+          pagination={false}
+          scroll={{ x: '100%', y: '100%' }}
+          class="w-100% flex-1 overflow-hidden"
+          bordered
+          onSorterChange={handleSorterChange}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+          v-slots={{
+            empty: () => <NoData />,
+            columns: () => (
+              <>
+                {TABLE_COLUMNS.map((column) => (
+                  <TableColumn
+                    key={column.dataIndex}
+                    data-index={column.dataIndex}
+                    fixed={column.fixed}
+                    width={column.width}
+                    min-width={column.minWidth}
+                    sortable={column.sortable}
+                    align={column.align}
+                    ellipsis
+                    tooltip
+                    v-slots={{
+                      title: () => (
+                        <div class="flex items-center">
+                          <span class="cts mr-4px">{column.title}</span>
+                          {column.tooltip && (
+                            <Tooltip content={column.tooltip} position="top">
+                              <IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
+                            </Tooltip>
+                          )}
+                        </div>
+                      ),
+                      cell: ({ record }) => {
+                        if (column.dataIndex === 'status') {
+                          return (
+                            <div class={['status-box', `status-box-${record.status}`]}>
+                              <span>{IMPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
+                            </div>
+                          );
+                        } else if (column.dataIndex === 'operator.name') {
+                          return <span>{record.operator?.name || record.operator?.mobile}</span>;
+                        } else if (column.dataIndex === 'created_at') {
+                          return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
+                        } else {
+                          return formatTableField(column, record, true);
+                        }
+                      },
+                    }}
+                  />
+                ))}
+                <TableColumn
+                  data-index="operation"
+                  width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60}
+                  fixed="right"
+                  title="操作"
+                  v-slots={{
+                    cell: ({ record }) => (
+                      <div class="flex items-center">
+                        <img
+                          src={icon1}
+                          width="14"
+                          height="14"
+                          class="mr-8px cursor-pointer"
+                          onClick={() => handleDelete(record)}
+                        />
+                        {record.status === enumTaskStatus.Failed && (
+                          <Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
+                            下载问题表格
+                          </Button>
+                        )}
+                      </div>
+                    ),
+                  }}
+                />
+              </>
+            ),
+          }}
+        />
+
+        {/* 分页 */}
+        {pageInfo.value.total > 0 && (
+          <div class="flex justify-end my-16px">
+            <Pagination
+              total={pageInfo.value.total}
+              size="mini"
+              show-total
+              show-jumper
+              show-page-size
+              current={pageInfo.value.page}
+              page-size={pageInfo.value.page_size}
+              onChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </div>
+        )}
+
+        {/* 删除弹窗 */}
+        <DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/components/_base/navbar/components/task-center-modal/components/import-task/style.scss

@@ -0,0 +1,86 @@
+.import-task-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .tip-row {
+    border-radius: 2px;
+    background: #f0edff;
+    .label {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.normal {
+      background: #ebf7f2;
+      .label {
+        color: #211f24;
+      }
+    }
+    &.abnormal {
+      background: #ffe7e4;
+      .label {
+        color: #211f24;
+      }
+    }
+    .err-btn {
+      background-color: #f64b31 !important;
+      color: var(--BG-white, #fff);
+      font-family: 'PingFang SC';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; 
+    }
+    .operation-btn {
+      padding: 0;
+      cursor: pointer;
+      color: var(--Brand-Brand-6, #6d4cfe);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; 
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &.red {
+        color: #f64b31;
+      }
+    }
+  }
+  .status-box {
+    border-radius: 2px;
+    display: flex;
+    height: 24px;
+    padding: 0px 8px;
+    align-items: center;
+    width: fit-content;
+    span {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; 
+    }
+    &-0 {
+      background: var(--Functional-yellow-1, #fff7e5);
+      span {
+        color: var(--Functional-yellow-6, #ffae00);
+      }
+    }
+    &-1 {
+      background: var(--Functional-Green-1, #ebf7f2);
+      span {
+        color: var(--Functional-Green-6, #25c883);
+      }
+    }
+    &-2 {
+      background: var(--Functional-Red-1, #ffe9e7);
+      span {
+        color: var(--Functional-Red-6, #f64b31);
+      }
+    }
+  }
+}

src/components/_base/navbar/components/task-center-modal/constants.ts

@@ -0,0 +1,34 @@
+export enum enumTaskStatus {
+  Exporting = 0, // 导出中
+  Finished = 1, // 已完成
+  Failed = 2, // 导出失败
+}
+
+export const EXPORT_TASK_STATUS = [
+  {
+    label: '导出中',
+    value: enumTaskStatus.Exporting,
+  },
+  {
+    label: '已完成',
+    value: enumTaskStatus.Finished,
+  },
+  {
+    label: '导出失败',
+    value: enumTaskStatus.Failed,
+  },
+];
+export const IMPORT_TASK_STATUS = [
+  {
+    label: '导入中',
+    value: enumTaskStatus.Exporting,
+  },
+  {
+    label: '已完成',
+    value: enumTaskStatus.Finished,
+  },
+  {
+    label: '导入失败',
+    value: enumTaskStatus.Failed,
+  },
+];

src/components/_base/navbar/components/task-center-modal/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="任务中心"
+    modal-class="task-center-modal"
+    width="860px"
+    :mask-closable="false"
+    :footer="false"
+    @close="onClose"
+  >
+    <a-tabs :active-key="activeTab" @tab-click="handleTabClick">
+      <a-tab-pane key="0" title="导入"> </a-tab-pane>
+      <a-tab-pane key="1" title="导出"> </a-tab-pane>
+    </a-tabs>
+    <div class="content">
+      <component :is="activeTab === '0' ? ImportTask : ExportTask" ref="componentRef" />
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { Notification } from '@arco-design/web-vue';
+
+import ExportTask from './components/export-task';
+import ImportTask from './components/import-task';
+
+const visible = ref(false);
+const componentRef = ref(null);
+const activeTab = ref('0');
+
+let timer = null;
+
+const handleTabClick = (key) => {
+  activeTab.value = key;
+  nextTick(() => {
+    getData();
+  });
+};
+
+const getData = () => {
+  componentRef.value?.init();
+};
+
+const open = () => {
+  getData();
+
+  timer = setInterval(() => {
+    getData();
+  }, 10000);
+
+  visible.value = true;
+};
+const onClose = () => {
+  activeTab.value = '0';
+
+  clearTimer();
+  componentRef.value?.unloadComp?.();
+  Notification.clear();
+  visible.value = false;
+};
+const clearTimer = () => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

src/components/_base/navbar/components/task-center-modal/style.scss

@@ -0,0 +1,77 @@
+.task-center-modal {
+  .arco-modal-header {
+    border-bottom: none !important;
+    .arco-modal-title {
+      color: var(--Text-1, #211f24);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+      font-family: $font-family-medium;
+    }
+  }
+  .arco-modal-body {
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
+    height: 650px;
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+        .label {
+          margin-right: 12px;
+          color: #211f24;
+          font-family: 'PuHuiTi-Regular';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; /* 157.143% */
+        }
+        :deep(.arco-space-item) {
+          width: 100%;
+        }
+      }
+    }
+    .arco-tabs {
+      .arco-tabs-nav-top {
+        .arco-tabs-tab {
+          margin: 0 20px;
+          .arco-tabs-tab-title {
+            color: var(--Text-2, #3c4043);
+            font-family: $font-family-regular;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 22px; 
+          }
+          &.arco-tabs-tab-active {
+            .arco-tabs-tab-title {
+              color: #6D4CFE;
+              font-family: $font-family-medium;
+            }
+          }
+        }
+      }
+      .arco-tabs-content {
+        display: none;
+      }
+    }
+    .content {
+      flex: 1;
+      padding: 24px 20px;
+      overflow: hidden;
+    }
+  }
+
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}

src/components/_base/navbar/index.vue

@@ -1,257 +1,49 @@
-<script setup>
-import { useAppStore } from '@/stores';
-import { useEnterpriseStore } from '@/stores/modules/enterprise';
-// import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
-// import { handleUserLogout } from '@/utils/user';
-// import { fetchLogOut } from '@/api/all/login';
-import { useSidebarStore } from '@/stores/modules/side-bar';
-import { MENU_GROUP_IDS } from '@/router/constants';
-import router from '@/router';
-// import { useRoute } from 'vue-router';
-import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
-// import { appRoutes } from '@/router/routes';
-// import { MENU_LIST } from './AgentConstants.ts';
-
-const sidebarStore = useSidebarStore();
-// const enterpriseStore = useEnterpriseStore();
-// const route = useRoute();
-const exitAccountModalRef = ref(null);
-// const selectedKey = ref([]);
-
-const selectedKey = computed(() => {
-  return [String(sidebarStore.activeMenuId)];
-});
-const menuList = computed(() => {
-  return sidebarStore.menuList;
-});
-
-const clickExit = async () => {
-  exitAccountModalRef.value?.open();
-};
-
-// const appStore = useAppStore();
-
-const setServerMenu = () => {
-  router.push('/management/person');
-};
-
-const handleDopdownClick = (item) => {
-  router.push({ name: item.routeName });
-};
-</script>
-
 <template>
-  <div class="navbar">
+  <div class="navbar-wrap">
-    <div class="left-side">
+    <div class="left-wrap">
       <a-space class="cursor-pointer" @click="router.push('/')">
         <img src="@/assets/logo.svg" alt="" />
       </a-space>
     </div>
-    <div class="center-side">
+    <div class="flex-1">
-      <div class="menu-demo h-100%">
+      <NavbarMenu />
-        <a-menu mode="horizontal" :selected-keys="selectedKey">
-          <a-menu-item v-for="item in menuList" :key="String(item.id)">
-            <template v-if="item.children">
-              <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
-                <a-button>
-                  <span class="menu-item-text mr-2px"> {{ item.name }}</span>
-                  <icon-caret-down size="16" class="arco-icon-down !mr-0" />
-                </a-button>
-                <template #content>
-                  <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(child)">
-                    <span class="menu-item-text"> {{ child.name }}</span>
-                  </a-doption>
-                </template>
-              </a-dropdown>
-            </template>
-            <template v-else>
-              <a-menu-item :key="String(item.id)" @click="handleDopdownClick(item)">
-                <span class="menu-item-text"> {{ item.name }}</span>
-              </a-menu-item>
-            </template>
-          </a-menu-item>
-        </a-menu>
     </div>
-    </div>
+    <RightSide />
-    <ul class="right-side">
-      <li>
-        <a-dropdown trigger="click" class="layout-avatar-dropdown">
-          <a-avatar class="cursor-pointer" :size="32">
-            <img alt="avatar" src="@/assets/avatar.svg" />
-          </a-avatar>
-          <template #content>
-            <div>
-              <a-doption>
-                <a-space class="flex justify-between w-100%" @click="setServerMenu">
-                  <div class="flex items-center">
-                    <img src="@/assets/option.svg" class="w-16px h-16px mr-8px" />
-                    <span>管理中心</span>
-                  </div>
-                  <icon-right size="12" />
-                </a-space>
-              </a-doption>
-              <!-- <a-doption>
-                <a-space class="flex justify-between w-100%">
-                  <div class="flex items-center">
-                    <img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
-                    <span>切换企业账号</span>
-                  </div>
-                  <icon-right size="12" />
-                </a-space>
-              </a-doption> -->
-              <a-doption>
-                <a-space class="flex justify-between w-100%" @click="clickExit">
-                  <div class="flex items-center">
-                    <img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
-                    <span>退出登录</span>
-                  </div>
-                  <icon-right size="12" />
-                </a-space>
-              </a-doption>
-            </div>
-          </template>
-        </a-dropdown>
-      </li>
-    </ul>
-    <ExitAccountModal ref="exitAccountModalRef" />
   </div>
 </template>
 
+<script setup>
+import NavbarMenu from './components/navbar-menu';
+import RightSide from './components/right-side';
+
+import router from '@/router';
+</script>
 <style scoped lang="scss">
-.navbar {
+.navbar-wrap {
   display: flex;
   justify-content: space-between;
   height: 100%;
   background-color: var(--color-bg-2);
   border-bottom: 1px solid var(--color-border);
-}
+  .left-wrap {
-.left-side {
     display: flex;
     align-items: center;
     padding-left: 20px;
   }
-.center-side {
+  .arco-dropdown-option-suffix {
-  flex: 1;
+    display: none;
-  display: flex;
-  align-items: center;
-
-  margin-left: 40px;
-  .menu-item-text {
-    color: var(--Text-2, #3c4043);
-    font-family: 'PuHuiTi-Medium';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 22px;
   }
-  :deep(.arco-menu) {
+  .enterprises-doption {
-    height: 100%;
+    .arco-dropdown-option-content {
-    .arco-menu-inner {
+      padding: 0 !important;
-      padding: 0 20px;
-    }
-    .arco-menu-item {
-      padding: 0;
-      position: relative;
-      &.arco-menu-selected {
-        .menu-item-text,
-        .arco-menu-selected-label {
-          color: #6d4cfe;
-        }
-        .arco-menu-selected-label {
-          background: var(--Brand-Brand-6, #6d4cfe);
-          height: 4px;
-          border-radius: 4px;
-          width: 50%;
-          position: absolute;
-          bottom: -8px;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-  .arco-icon-down {
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .arco-dropdown-open .arco-icon-down {
-    transform: rotate(180deg);
-  }
-}
-.cneter-tip {
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--color-text-1);
-}
-.menu-demo {
-  flex: 1;
-}
-.right-side {
-  display: flex;
-  padding-right: 20px;
-  list-style: none;
-  li {
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-  }
-  a {
-    color: var(--color-text-1);
-    text-decoration: none;
-  }
-  .nav-btn {
-    border-color: rgb(var(--gray-2));
-    color: rgb(var(--gray-8));
-    font-size: 16px;
-  }
-}
-</style>
-
-<style lang="scss">
-.layout-menu-item-dropdown,
-.layout-avatar-dropdown {
-  .arco-dropdown {
       border-radius: 8px;
-    border: 1px solid var(--BG-300, #e6e6e8);
-    background: var(--BG-white, #fff);
-    padding: 12px 0px;
-    .arco-dropdown-option {
-      padding: 0 12px;
-      margin-bottom: 4px;
-      &-content {
-        display: flex;
-        height: 40px;
-        width: 100%;
-        padding: 10px 24px;
-        align-items: center;
-        .menu-item-text {
-          color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Regular';
-          font-size: 16px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 22px; /* 137.5% */
-        }
     }
     &:not(.arco-dropdown-option-disabled):hover {
       background-color: transparent;
       .arco-dropdown-option-content {
-          border-radius: 8px;
         background: var(--BG-200, #f2f3f5);
       }
     }
   }
 }
-}
-.layout-avatar-dropdown {
-  width: 200px;
-  .arco-dropdown {
-    padding: 12px 4px;
-    .arco-dropdown-option {
-      padding: 0 !important;
-      &-content {
-        padding: 0 12px !important;
-      }
-    }
-  }
-}
 </style>

src/components/_base/tab-bar/index.vue

@@ -43,7 +43,7 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tab-bar-container {
   position: relative;
   background-color: var(--color-bg-2);

src/components/_base/tab-bar/tab-item.vue

@@ -144,7 +144,7 @@ const actionSelect = async (value: any) => {
   </a-dropdown>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tag-link {
   color: var(--color-text-2);
   text-decoration: none;

src/components/common-select/index.vue

@@ -4,11 +4,12 @@
 -->
 <template>
   <a-select
-    v-model="selectedTags"
+    v-model="selectedValues"
     :multiple="multiple"
     size="medium"
     :placeholder="placeholder"
     allow-clear
+    :max-tag-count="maxTagCount"
     @change="handleChange"
   >
     <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
@@ -37,28 +38,30 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  maxTagCount: {
+    type: Number,
+    default: 3,
+  },  
 });
 
 const emits = defineEmits(['update:modelValue', 'change']);
 
-const selectedTags = ref(props.multiple ? [] : '');
+const selectedValues = ref(props.multiple ? [] : '');
 
-// 监听外部传入的值变化
 watch(
   () => props.modelValue,
   (newVal) => {
-    selectedTags.value = newVal;
+    selectedValues.value = newVal;
   },
   { immediate: true },
 );
 
-// 监听内部值变化，向外部发送更新
+watch(selectedValues, (newVal) => {
-watch(selectedTags, (newVal) => {
   emits('update:modelValue', newVal);
 });
 
 const handleChange = (value) => {
-  selectedTags.value = value;
+  selectedValues.value = value;
   emits('change', value);
 };
 </script>

src/components/confirm-button/index.vue

@@ -67,4 +67,4 @@ function handleCancel() {
   emit('cancelEmit');
 }
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>

src/components/container.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
   title: string;
 }>();
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
   background: var(--BG-white, rgba(255, 255, 255, 1));
@@ -23,7 +23,7 @@ const props = defineProps<{
   border-radius: 8px;
 }
 .title {
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 18px;
   line-height: 24px;

src/components/custom-table-column-modal/index.vue

@@ -65,7 +65,7 @@
 
     <template #footer>
       <div style="text-align: right">
-        <a-button class="mr-8px cancel-btn" size="medium" @click="close">取消</a-button>
+        <a-button class="mr-8px" size="medium" @click="close">取消</a-button>
         <a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
       </div>
     </template>

src/components/custom-table-column-modal/style.scss

@@ -22,7 +22,7 @@
             margin-bottom: 16px;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
@@ -47,7 +47,7 @@
         flex-direction: column;
         .checked-title {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
             align-items: center;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 14px;
               font-style: normal;
               font-weight: 400;
@@ -87,13 +87,6 @@
     }
   }
   .arco-modal-footer {
-    .cancel-btn {
+
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
   }
 }

src/components/customer-service-modal.vue

@@ -8,5 +8,4 @@
 <script setup lang="ts">
 import Modal from '@/components/modal.vue';
 </script>
-<style lang="less">
+<style lang="scss"></style>
-</style>

src/components/delete-modal.vue

@@ -8,7 +8,7 @@
   </a-modal>
 </template>
 <script setup lang="ts"></script>
-<style lang="less">
+<style lang="scss">
 :deep(.arco-btn-status-danger) {
   background-color: red !important;
   width: 1000px !important;
@@ -19,7 +19,7 @@
   }
   .delete-modal-title {
     margin-top: 24px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
@@ -35,14 +35,14 @@
       border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
     :last-child {
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       margin-left: 16px;

src/components/join-modal.vue

@@ -12,6 +12,7 @@ import { ref, onMounted } from 'vue';
 import { getQueryParam } from '@/utils/helper';
 
 import { getEnterpriseByInviteCode, joinEnterpriseByInviteCode } from '@/api/all';
+
 const enterprise = ref();
 const inviteCode = ref();
 
@@ -27,14 +28,17 @@ async function handleJoin() {
   await joinEnterpriseByInviteCode(inviteCode.value);
   AMessage.success('加入成功');
 }
-onMounted(() => {
+// onMounted(() => {
-  getEnterprise();
+//   getEnterprise();
+// });
+defineExpose({
+  getEnterprise,
 });
 </script>
-<style lang="less">
+<style lang="scss">
 .join-body {
   margin: 0;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 14px;
   color: var(--Text-1, rgba(33, 31, 36, 1));

src/components/modal.vue

@@ -4,7 +4,7 @@
   </a-modal>
 </template>
 <script setup lang="ts"></script>
-<style lang="less">
+<style lang="scss">
 .modal {
   .arco-modal-header {
     border-bottom: none;
@@ -15,14 +15,14 @@
       border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
     :last-child {
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       margin-left: 16px;

src/components/no-data/index.vue

@@ -39,7 +39,7 @@ const props = defineProps({
   line-height: 1.5em;
   .text {
     color: var(--Text-3, #737478);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/components/svg-icon/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
+    <use :xlink:href="symbolId" :fill="props.color" />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: '#333',
+  },
+  size: {
+    type: String,
+    default: '12',
+  },
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>

src/components/wyg-form/index.vue

@@ -249,7 +249,7 @@ defineExpose({
   updateFieldsList,
 });
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 :deep(.arco-picker) {
   width: 100%;
 }

src/components/wyg-table/index.vue

@@ -70,4 +70,4 @@ watchEffect(() => {
   }
 });
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>

src/hooks/useTableSelectionWithPagination.ts

@@ -0,0 +1,96 @@
+import { ref, computed } from 'vue';
+
+interface UseTableSelectionWithPaginationOptions {
+  rowKey?: string; // 主键字段名，默认 'id'
+  pageInfo?: {
+    page?: number;
+    page_size?: number;
+    total?: number;
+  };
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  onSelectChange?: () => void;
+}
+
+const DEFAULT_PAGE_INFO = {
+  page: 1,
+  page_size: 20,
+  total: 0,
+};
+
+export function useTableSelectionWithPagination(options: UseTableSelectionWithPaginationOptions = {}) {
+  const rowKey = options.rowKey || 'id';
+
+  const selectedRowKeys = ref<Array<string | number>>([]);
+  const selectedRows = ref<any[]>([]);
+
+  const pageInfo = ref(merge({}, DEFAULT_PAGE_INFO, options.pageInfo));
+
+  const dataSource = ref<any[]>([]);
+
+  // 单行选择
+  const handleSelect = (selectedKeys: (string | number)[], rowKeyValue: string | number, record: any) => {
+    const select = selectedKeys.includes(rowKeyValue);
+    selectedRowKeys.value = selectedKeys;
+
+    if (select) {
+      if (!selectedRows.value.some((v) => v[rowKey] === record[rowKey])) {
+        selectedRows.value.push(record);
+      }
+    } else {
+      selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== record[rowKey]);
+    }
+    options.onSelectChange?.();
+  };
+
+  // 全选/取消全选
+  const handleSelectAll = (checked: boolean) => {
+    const currentPageRows = dataSource.value;
+    const currentPageKeys = currentPageRows.map((v) => v[rowKey]);
+
+    if (checked) {
+      selectedRowKeys.value = Array.from(new Set([...selectedRowKeys.value, ...currentPageKeys]));
+      const allRows = [...selectedRows.value, ...currentPageRows];
+      const map = new Map();
+      allRows.forEach((row) => map.set(row[rowKey], row));
+      selectedRows.value = Array.from(map.values());
+    } else {
+      selectedRowKeys.value = selectedRowKeys.value.filter((key) => !currentPageKeys.includes(key));
+      selectedRows.value = selectedRows.value.filter((row) => !currentPageKeys.includes(row[rowKey]));
+    }
+    options.onSelectChange?.();
+  };
+
+  const onPageChange = (page: number) => {
+    pageInfo.value.page = page;
+    options.onPageChange?.(page);
+  };
+  const onPageSizeChange = (size: number) => {
+    pageInfo.value.page_size = size;
+    pageInfo.value.page = 1;
+    options.onPageSizeChange?.(size);
+  };
+  const resetPageInfo = () => {
+    pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO)
+  }
+
+  const rowSelection = computed(() => ({
+    type: 'checkbox',
+    showCheckedAll: true,
+    width: 48,
+  }));
+
+  return {
+    selectedRowKeys,
+    selectedRows,
+    dataSource,
+    pageInfo,
+    onPageChange,
+    onPageSizeChange,
+    rowSelection,
+    handleSelect,
+    handleSelectAll,
+    resetPageInfo,
+    DEFAULT_PAGE_INFO,
+  };
+}

src/layouts/Basic.vue

@@ -1,13 +1,17 @@
-<script setup lang="ts">
+<script setup>
 import { useAppStore } from '@/stores';
 import { useResponsive } from '@/hooks';
 import JoinModal from '@/components/join-modal.vue';
 import { getQueryParam } from '@/utils/helper';
+import { useUserStore } from '@/stores';
+
 import { ref, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 const joinEnterpriseVisible = ref(false);
+const joinModalRef = ref(null);
 const appStore = useAppStore();
+const userStore = useUserStore();
 const router = useRouter();
 const route = useRoute();
 
@@ -36,14 +40,15 @@ const paddingStyle = computed(() => {
 onMounted(() => {
   checkHasInviteCode();
 });
-const setCollapsed = (val: boolean) => {
+const setCollapsed = (val) => {
   appStore.updateSettings({ menuCollapse: val });
 };
 
 const checkHasInviteCode = () => {
   const inviteCode = getQueryParam('invite_code');
-  if (inviteCode) {
+  if (userStore.isLogin && inviteCode) {
     joinEnterpriseVisible.value = true;
+    joinModalRef.value?.getEnterprise?.();
   }
 };
 const drawerVisible = ref(false);
@@ -57,7 +62,7 @@ provide('toggleDrawerMenu', () => {
 
 <template>
   <a-layout :class="['layout', { mobile: appStore.hideMenu }]">
-    <JoinModal v-model:visible="joinEnterpriseVisible" />
+    <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
     <div v-if="navbar" class="layout-navbar">
       <base-navbar />
     </div>
@@ -102,9 +107,9 @@ provide('toggleDrawerMenu', () => {
   </a-layout>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
-@nav-size-height: 72px;
+$nav-size-height: 72px;
-@layout-max-width: 1100px;
+$layout-max-width: 1100px;
 
 .layout {
   width: 100%;
@@ -116,7 +121,7 @@ provide('toggleDrawerMenu', () => {
   left: 0;
   z-index: 100;
   width: 100%;
-  height: @nav-size-height;
+  height: $nav-size-height;
 }
 .layout-sider {
   position: fixed;

src/layouts/NotFound.vue

@@ -14,7 +14,7 @@ const back = () => {
   </div>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .content {
   position: absolute;
   top: 50%;

src/layouts/Page.vue

@@ -27,7 +27,7 @@ const hideFooter = computed(() => route.meta?.hideFooter);
   </router-view>
 </template>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .footer {
   margin: 20px;
   width: 98%;

src/main.ts

@@ -5,22 +5,25 @@
 import App from './App.vue';
 import router from './router';
 import store from './stores';
-import NoData from '@/components/no-data';
-import '@/api/index';
 
+import NoData from '@/components/no-data';
+import SvgIcon from "@/components/svg-icon";
+
+import '@/api/index';
 import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
-import './styles';
 import './core';
+
+import 'normalize.css';
 import 'uno.css';
-import './mock';
+import 'virtual:svg-icons-register'
+
 // import '@/styles/vars.css'; // 优先加载
 
 const app = createApp(App);
+
+app.component('NoData', NoData);
+app.component('SvgIcon', SvgIcon);
+
 app.use(store);
 app.use(router);
-app.component('NoData', NoData);
-
-router.isReady().then(async () => {
-
 app.mount('#app');
-});

src/permission/permission.ts

@@ -5,7 +5,5 @@ export function checkRoutePermission(routeName: string) {
   const allowAccessRoutes = userStore.allowAccessRoutes;
 
   if (!routeName) return false;
-  // todo
+  return allowAccessRoutes.includes(routeName);
-  return true;
-  // return allowAccessRoutes.includes(routeName);
 }

src/router/guard/userLoginInfo.ts

@@ -18,9 +18,10 @@ export default function setupUserLoginInfoGuard(router: Router) {
     const routeName = to?.name as string;
     const requiresAuth = to?.meta?.requiresAuth || false;
     const requireLogin = to?.meta?.requireLogin || false;
+    const query = to?.query ?? {};
 
     if (requireLogin && !userStore.isLogin) {
-      goUserLogin();
+      goUserLogin(query);
       next();
       return;
     }

src/router/routes/modules/propertyMarketing.ts

@@ -5,10 +5,11 @@
 import type { AppRouteRecordRaw } from '../types';
 import { MENU_GROUP_IDS } from '@/router/constants';
 
-import IconRepository from '@/assets/svg/icon-repository.svg';
+import IconRepository from '@/assets/svg/svg-repository.svg';
-import IconMediaAccount from '@/assets/svg/icon-mediaAccount.svg';
+import IconMediaAccount from '@/assets/svg/svg-mediaAccount.svg';
-import IconPutAccount from '@/assets/svg/icon-putAccount.svg';
+import IconPutAccount from '@/assets/svg/svg-putAccount.svg';
-import IconIntelligentSolution from '@/assets/svg/icon-intelligentSolution.svg';
+import IconIntelligentSolution from '@/assets/svg/svg-intelligentSolution.svg';
+import IconProjectManagement from '@/assets/svg/svg-projectManagement.svg';
 
 const COMPONENTS: AppRouteRecordRaw[] = [
   {
@@ -158,13 +159,50 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       },
     ],
   },
+  // {
+  //   path: '/intelligent-solution',
+  //   name: 'IntelligentSolution',
+  //   redirect: 'intelligent-solution/businessAnalysisReport',
+  //   meta: {
+  //     locale: '智能方案管理',
+  //     icon: IconIntelligentSolution,
+  //     requiresAuth: true,
+  //     requireLogin: true,
+  //     roles: ['*'],
+  //     id: MENU_GROUP_IDS.PROPERTY_ID,
+  //   },
+  //   children: [
+  //     {
+  //       path: 'businessAnalysisReport',
+  //       name: 'IntelligentSolutionBusinessAnalysisReport',
+  //       meta: {
+  //         locale: '业务洞察报告',
+  //         requiresAuth: true,
+  //         requireLogin: true,
+  //         roles: ['*'],
+  //       },
+  //       component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'),
+  //     },
+  //     {
+  //       path: 'competitiveProductAnalysisReport',
+  //       name: 'IntelligentSolutionCompetitiveProductAnalysisReport',
+  //       meta: {
+  //         locale: '竟品对比报告',
+  //         requiresAuth: true,
+  //         requireLogin: true,
+  //         roles: ['*'],
+  //       },
+  //       component: () => import('@/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport'),
+  //     },
+  //   ],
+  // },
   {
-    path: '/intelligent-solution',
+    path: '/project-manage',
-    name: 'IntelligentSolution',
+    name: 'ProjectManagement',
-    redirect: 'intelligent-solution/businessAnalysisReport',
+    redirect: 'project-manage/project-list',
     meta: {
-      locale: '智能方案管理',
+      locale: '项目管理',
-      icon: IconIntelligentSolution,
+      icon: IconProjectManagement,
       requiresAuth: true,
       requireLogin: true,
       roles: ['*'],
@@ -172,26 +210,15 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'businessAnalysisReport',
+        path: 'project-list',
-        name: 'IntelligentSolutionBusinessAnalysisReport',
+        name: 'ProjectList',
         meta: {
-          locale: '业务洞察报告',
+          locale: '项目列表',
           requiresAuth: true,
           requireLogin: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'),
+        component: () => import('@/views/property-marketing/project-manage/project-list'),
-      },
-      {
-        path: 'competitiveProductAnalysisReport',
-        name: 'IntelligentSolutionCompetitiveProductAnalysisReport',
-        meta: {
-          locale: '竟品对比报告',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport'),
       },
     ],
   },

src/stores/modules/side-bar/constants.ts

@@ -77,12 +77,19 @@ export const MENU_LIST = [
           'guideDetail',
         ],
       },
+      // {
+      //   name: '智能方案管理',
+      //   routeName: 'IntelligentSolutionBusinessAnalysisReport',
+      //   includeRouteNames: [
+      //     'IntelligentSolutionBusinessAnalysisReport',
+      //     'IntelligentSolutionCompetitiveProductAnalysisReport',
+      //   ],
+      // },
       {
-        name: '智能方案管理',
+        name: '项目管理',
-        routeName: 'IntelligentSolutionBusinessAnalysisReport',
+        routeName: 'ProjectList',
         includeRouteNames: [
-          'IntelligentSolutionBusinessAnalysisReport',
+          'ProjectList',
-          'IntelligentSolutionCompetitiveProductAnalysisReport',
         ],
       },
     ],

src/stores/modules/side-bar/index.ts

@@ -7,18 +7,22 @@ import router from '@/router';
 import type { RouteLocationNormalized } from 'vue-router';
 import { MENU_LIST } from './constants';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
+import { getTaskUnread, patchTaskRead } from '@/api/all/common';
 
 interface sidebarState {
   activeMenuId: number | null;
   menuList: any[];
   allowAccessRoutes: any[];
+  unreadInfo: number[];
 }
 
+let unreadInfoTimer: number | null = null;
+
 export const useSidebarStore = defineStore('sidebar', {
   state: (): sidebarState => ({
-    activeMenuId: null,
+    activeMenuId: null, // 
-    menuList: [],
+    menuList: [], // 菜单信息 
-
+    unreadInfo: [], // 未读消息
     allowAccessRoutes: [], // 允许访问的路由列表
   }),
   actions: {
@@ -42,17 +46,13 @@ export const useSidebarStore = defineStore('sidebar', {
     setActiveMenuIdByRoute(route: RouteLocationNormalized) {
       const appRoutes = router.options?.routes ?? [];
 
-      // 查找当前路由所属的菜单组
       const findMenuGroup = (routes: any[]): number | null => {
         for (const routeItem of routes) {
-          // 检查子路由
           if (routeItem.children?.length > 0) {
-            // 检查当前路由是否是这个父路由的子路由
             const isChildRoute = routeItem.children.some((child: any) => child.name === route.name);
             if (isChildRoute) {
               return routeItem.meta?.id || null;
             }
-            // 递归检查更深层的子路由
             const childResult = findMenuGroup(routeItem.children);
             if (childResult !== null) {
               return routeItem.meta?.id || childResult;
@@ -71,5 +71,31 @@ export const useSidebarStore = defineStore('sidebar', {
         this.activeMenuId = menuId;
       }
     },
+    async getTaskUnreadInfo() {
+      const { code, data } = await getTaskUnread();
+      if (code === 200) {
+        this.unreadInfo = data;
+      }
+    },
+
+    // 查询未读信息
+    startUnreadInfoPolling() {
+      if (unreadInfoTimer) return;
+      this.getTaskUnreadInfo();
+      unreadInfoTimer = window.setInterval(() => {
+        this.getTaskUnreadInfo();
+      }, 30000);
+    },
+    stopUnreadInfoPolling() {
+      this.unreadInfo = [];
+      if (unreadInfoTimer) {
+        clearInterval(unreadInfoTimer);
+        unreadInfoTimer = null;
+      }
+    },
+    async removeTaskUnreadInfo() {
+      patchTaskRead({ ids: this.unreadInfo });
+      this.unreadInfo = [];
+    },
   },
 });

src/stores/modules/user/index.ts

@@ -47,7 +47,7 @@ export const useUserStore = defineStore('user', {
       slsWithCatch('accessToken', this.token);
     },
 
-    deleteToken() {
+    clearToken() {
       this.token = '';
       rlsWithCatch('accessToken');
     },

src/styles/components/button.scss

@@ -0,0 +1,183 @@
+.arco-btn {
+  border-radius: 2px;
+  border: 1px solid #d7d7d9 !important;
+  color: #3c4043 !important;
+  font-family: $font-family-regular;
+  font-size: 14px !important;
+  font-style: normal;
+  font-weight: 400 !important;
+  line-height: 22px !important;
+  &.arco-btn-disabled {
+    border-color: #f2f3f5 !important;
+    color: #b1b2b5 !important;
+  }
+  &:not(.arco-btn-disabled) {
+    &:hover {
+      border-color: #e6e6e8 !important;
+      color: #737478 !important;
+    }
+  }
+}
+
+.arco-btn-primary {
+  background-color: $color-primary !important;
+  border: none !important;
+  color: #fff !important;
+  &.arco-btn-disabled {
+    color: #fff !important;
+    background-color: $color-primary-3 !important;
+  }
+  &:not(.arco-btn-disabled) {
+    &:hover {
+      color: #fff !important;
+      background-color: $color-primary-5 !important;
+    }
+  }
+
+  //success
+  &.arco-btn-status-success {
+    background-color: $color-success !important;
+    &.arco-btn-disabled {
+      background-color: $color-success-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-success-5 !important;
+      }
+    }
+  }
+
+  // danger
+  &.arco-btn-status-danger {
+    background-color: $color-error !important;
+    &.arco-btn-disabled {
+      background-color: $color-error-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-error-5 !important;
+      }
+    }
+  }
+
+  // warning
+  &.arco-btn-status-warning {
+    background-color: $color-warning !important;
+    &.arco-btn-disabled {
+      background-color: $color-warning-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-warning-5 !important;
+      }
+    }
+  }
+}
+
+.arco-btn-outline {
+  border: 1px solid $color-primary !important;
+  color: $color-primary !important;
+  &.arco-btn-disabled {
+    border-color: $color-primary-3 !important;
+    color: $color-primary-3 !important;
+  }
+  &:not(.arco-btn-disabled) {
+    &:hover {
+      border-color: $color-primary-5 !important;
+      color: $color-primary-5 !important;
+    }
+  }
+
+  &.arco-btn-status-success {
+    border: 1px solid $color-success !important;
+    color: $color-success !important;
+    &.arco-btn-disabled {
+      border-color: $color-success-3 !important;
+      color: $color-success-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-success-5 !important;
+        color: $color-success-5 !important;
+      }
+    }
+  }
+  &.arco-btn-status-danger {
+    border: 1px solid $color-error !important;
+    color: $color-error !important;
+    &.arco-btn-disabled {
+      border-color: $color-error-3 !important;
+      color: $color-error-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-error-5 !important;
+        color: $color-error-5 !important;
+      }
+    }
+  }
+  &.arco-btn-status-warning {
+    border: 1px solid $color-warning !important;
+    color: $color-warning !important;
+    &.arco-btn-disabled {
+      border-color: $color-warning-3 !important;
+      color: $color-warning-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-warning-5 !important;
+        color: $color-warning-5 !important;
+      }
+    }
+  }
+}
+
+.arco-btn-text {
+  background-color: transparent !important;
+  border: none !important;
+  color: $color-primary !important;
+  &.arco-btn-disabled {
+    color: $color-primary-2 !important;
+  }
+  &:not(.arco-btn-disabled) {
+    &:hover {
+      color: $color-primary-5 !important;
+    }
+  }
+
+  &.arco-btn-status-success {
+    color: $color-success !important;
+    &.arco-btn-disabled {
+      color: $color-success-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-success-5 !important;
+      }
+    }
+  }
+
+  &.arco-btn-status-danger {
+    color: $color-error !important;
+    &.arco-btn-disabled {
+      color: $color-error-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-error-5 !important;
+      }
+    }
+  }
+
+  &.arco-btn-status-warning {
+    color: $color-warning !important;
+    &.arco-btn-disabled {
+      color: $color-warning-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-warning-5 !important;
+      }
+    }
+  }
+}

src/styles/components/checkbox.scss

@@ -11,13 +11,13 @@
     }
     &.arco-checkbox-checked {
       .arco-checkbox-icon {
-        background-color: #A794FE !important;
+        background-color: #a794fe !important;
       }
     }
     &.arco-checkbox-indeterminate {
       .arco-checkbox-icon {
         border: none;
-        background-color: #A794FE !important;
+        background-color: #a794fe !important;
       }
     }
   }
@@ -25,7 +25,7 @@
   &.arco-checkbox-indeterminate {
     .arco-checkbox-icon  {
      background-color: #6D4CFE !important; 
+     border: none;
     }
   }
-
 }

src/styles/components/date-picker.scss

@@ -0,0 +1,18 @@
+.arco-picker {
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    border-color: rgb(var(--primary-6)) !important;
+    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
+  }
+  &.arco-picker-disabled {
+    background-color: var(--BG-200, #F2F3F5) !important;
+  }
+}

src/styles/components/form.scss

@@ -0,0 +1,22 @@
+.arco-form {
+  .arco-form-item {
+    margin-bottom: 16px !important;
+    .arco-form-item-label-col {
+      padding-right: 12px !important;
+      .arco-form-item-label {
+        color: #211f24;
+        font-family: $font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+        .arco-form-item-label-required-symbol {
+          color: #f64b31;
+          margin-right: 4px;
+          font-size: 14px;
+          font-family: $font-family-regular;
+        }
+      }
+    }
+  }
+}

src/styles/components/index.scss

@@ -4,3 +4,9 @@
 @import './pagination.scss';
 @import './tabs.scss';
 @import './modal.scss';
+@import "./textarea.scss";
+@import "./select.scss";
+@import "./date-picker.scss";
+@import "./button.scss";
+@import "./steps.scss";
+@import "./form.scss";

src/styles/components/input.scss

@@ -1,5 +1,18 @@
 .arco-input-wrapper {
-  border-radius: 4px;
+  border-radius: 4px !important;
-  border-color: #d7d7d9;
+  border-color: #d7d7d9 !important;
-  background-color: #fff;
+  background-color: #fff !important;
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    border-color: rgb(var(--primary-6)) !important;
+    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
+  }
+  &.arco-input-disabled {
+    background-color: var(--BG-200, #F2F3F5) !important;
+  }
 }

src/styles/components/modal.scss

@@ -4,6 +4,11 @@
     height: 56px;
     padding: 0 20px;
     .arco-modal-title {
+      font-family: $font-family-medium;
+      color: #211f24;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
       justify-content: flex-start;
     }
   }

src/styles/components/pagination.scss

@@ -28,7 +28,7 @@
     &-prepend {
       color: var(--Text-2, #3c4043);
       text-align: right;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/styles/components/select.scss

@@ -0,0 +1,18 @@
+.arco-select {
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    border-color: rgb(var(--primary-6)) !important;
+    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
+  }
+  &.arco-select-view-disabled {
+    background-color: var(--BG-200, #F2F3F5) !important;
+  }
+}

src/styles/components/steps.scss

@@ -0,0 +1,47 @@
+.arco-steps {
+  .arco-steps-item {
+    .arco-steps-item-node {
+      .arco-steps-icon {
+        width: 28px;
+        height: 28px;
+        border-radius: 32px;
+        color: #3c4043;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        font-family: $font-family-manrope-medium;
+        background-color: #f2f3f5;
+      }
+    }
+    .arco-steps-item-content {
+      .arco-steps-item-title {
+        color: #3c4043;
+        font-family: $font-family-regular;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        &::after {
+          background-color: #e6e6e8 !important;
+        }
+      }
+    }
+    &-active,
+    &-finish {
+      .arco-steps-item-node {
+        .arco-steps-icon {
+          color: #fff;
+          background-color: #6d4cfe;
+        }
+      }
+      .arco-steps-item-content {
+        .arco-steps-item-title {
+          font-family: $font-family-medium;
+          &::after {
+            background-color: #6d4cfe !important;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/components/table.scss

@@ -1,7 +1,7 @@
 .arco-table {
   @mixin table-cell-text {
     color: var(--Text-1, #3C4043);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/styles/components/tabs.scss

@@ -4,7 +4,7 @@
       .arco-tabs-tab {
         .arco-tabs-tab-title {
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;

src/styles/components/textarea.scss

@@ -0,0 +1,18 @@
+.arco-textarea-wrapper {
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    border-color: rgb(var(--primary-6)) !important;
+    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
+  }
+  &.arco-textarea-disabled {
+    background-color: var(--BG-200, #F2F3F5) !important;
+  }
+}

src/styles/font.scss

@@ -1,30 +1,18 @@
 @font-face {
-  font-family: 'PuHuiTi-Regular';
+  font-family: 'Manrope-Regular';
-  src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.woff2') format('woff2');
+  src: url('@/assets/fonts/Manrope-Regular.ttf');
-  font-display: swap;
+}
+@font-face {
+  font-family: 'Manrope-Medium';
+  src: url('@/assets/fonts/Manrope-Medium.ttf');
 }
 
 @font-face {
-  font-family: 'PuHuiTi-Medium';
+  font-family: 'Manrope-Bold';
-  src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.woff2') format('woff2');
+  src: url('@/assets/fonts/Manrope-Bold.ttf');
-  font-display: swap;
 }
 
 @font-face {
-  font-family: 'PuHuiTi-Bold';
+  font-family: 'Manrope-SemiBold';
-  src: url('@/assets/fonts/Alibaba-PuHuiTi-Bold.woff2') format('woff2');
+  src: url('@/assets/fonts/Manrope-SemiBold.ttf');
-  font-display: swap;
-}
-
-// 使用统一的字体族名
-.font-family-puhui-regular {
-  font-family: 'PuHuiTi-Regular' !important;
-}
-
-.font-family-puhui-medium {
-  font-family: 'PuHuiTi-Medium' !important;
-}
-
-.font-family-puhui-bold {
-  font-family: 'PuHuiTi-Bold' !important;
 }

src/styles/index.scss

@@ -0,0 +1,10 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-30 16:03:42
+ */
+@import './font.scss';
+@import './lib/variable.scss';
+@import './lib/reset.scss';
+
+@import './vars.scss';
+@import './components/index.scss';

src/styles/index.ts

@@ -1,9 +0,0 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-30 16:03:42
- */
-import './vars.css';
-import './components/index.scss';
-import './font.scss';
-import 'normalize.css';
-import 'uno.css';

src/styles/lib/reset.scss

@@ -0,0 +1,25 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: PingFangSC-Regular, PingFang SC;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  background: $color-background;
+  font-family: $font-family-regular;
+  font-size: 14px;
+  -webkit-print-color-adjust: exact;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}

src/styles/lib/variable.scss

@@ -0,0 +1,56 @@
+
+// 汉字字体
+$font-family-regular: 'PingFangSC-Regular', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-medium: 'PingFangSC-Medium', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-light: 'PingFangSC-Light', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-bold: 'PingFangSC-Semibold', 'PingFangSC-Regular', 'Microsoft Yahei', Arial, sans-serif;
+
+// 数字字体包
+$font-family-manrope-regular: 'Manrope-Regular';
+$font-family-manrope-medium: 'Manrope-Medium';
+$font-family-manrope-bold: 'Manrope-Bold';
+$font-family-manrope-semiBold: 'Manrope-SemiBold';
+
+$color-background: #f9f9f9;
+
+$color-primary: #6d4cfe;   // 常规
+$color-primary-5: #8A70FE; // hover
+$color-primary-7: #573DCB; // click
+$color-primary-3: #A794FE; // disabled
+$color-primary-2: #C5B7FF; // text disabled
+$color-primary-1: #F0EDFF; // 浅色
+
+$color-success: #25C883;      
+$color-success-5: #57CF9C;
+$color-success-7: #1BAE71;
+$color-success-3: #81DBB5;
+$color-success-2: #ABE7CE;
+$color-success-1: #EBF7F2;  
+
+$color-warning: #FFAE00;
+$color-warning-5: #FFBE33;
+$color-warning-7: #CC8B00;
+$color-warning-3: #FFCF66;
+$color-warning-2: #FFDF99;  
+$color-warning-1: #FFF7E5;  
+
+$color-error: #F64B31;
+$color-error-5: #F86F5A;
+$color-error-7: #C53C27;
+$color-error-3: #FA9383;
+$color-error-2: #FBB7AD;
+$color-error-1: #FFE9E7;
+
+$color-blue: #2A59F3;
+$color-blue-5: #557AF6;
+$color-blue-7: #2247C2;
+$color-blue-3: #7F9CF8;
+$color-blue-2: #AABDFA;
+$color-blue-1: #E5ECFF;
+
+$color-teal: #39C6E9;
+$color-teal-5: #60D2ED;
+$color-teal-7: #2E9EBA;
+$color-teal-3: #88DDF2;
+$color-teal-2: #B0E8F6;
+$color-teal-1: #E1F9FF;

src/styles/mixins/ellipsis.scss

@@ -0,0 +1,14 @@
+@mixin multi-ellipsis($lines) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: $lines;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/styles/mixins/index.scss

@@ -0,0 +1 @@
+@import "./ellipsis.scss"

src/styles/vars.scss

@@ -1,8 +1,9 @@
 :root {
-  /* 修改主色 */
+  /* 主色覆盖（强制替换 Arco 默认蓝色） */
-  --arco-primary-6: #dd3e05 !important; /* 默认主色 */
+  --arco-primary-6: #6d4cfe !important;
-  --arco-primary-5: #40ffdf !important; /* 悬停色 */
+  --arco-primary-5: #8a70fe !important;
-  --arco-primary-7: #c9dbed !important; /* 点击色 */
+  --arco-primary-7: #573dcb !important;
+  --arco-primary-1: #f5f2ff !important; /* 浅色背景 */
 
   /* 修改成功/警告/错误色 */
   --arco-success-6: #52c41a !important;
@@ -14,40 +15,6 @@
   --arco-bg-1: #f7f8fa !important; /* 页面背景 */
 }
 
-* {
-  box-sizing: border-box;
-}
-p {
-  margin: 0;
-  padding: 0;
-}
-
-.flex {
-  display: flex;
-}
-
-.item-center {
-  align-items: center;
-}
-
-.box-container {
-  border-radius: 2px;
-  padding: 20px;
-  margin: 8px;
-  background-color: #fff;
-}
-
-:root {
-  /* 主色覆盖（强制替换 Arco 默认蓝色） */
-  --arco-primary-6: #6d4cfe !important;
-  --arco-primary-5: #8a70fe !important;
-  --arco-primary-7: #573dcb !important;
-  --arco-primary-1: #f5f2ff !important; /* 浅色背景 */
-}
-
-.arco-checkbox-checked .arco-checkbox-icon {
-  background-color: #573dcb !important;
-}
 /* 强制所有组件使用主色 */
 .arco-btn-primary,
 .arco-menu-selected,

src/utils/arcoD.tsx

@@ -0,0 +1,94 @@
+import { Notification } from '@arco-design/web-vue';
+import { downloadByUrl } from '@/utils/tools';
+import { IconLoading } from '@arco-design/web-vue/es/icon';
+
+
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+import icon2 from '@/assets/img/media-account/icon-success.png';
+import icon3 from "@/assets/img/media-account/icon-warn.png"
+
+interface RenderNotificationData {
+  total_number: number;
+  success_number: number;
+  fail_number: number;
+  file?: string;
+}
+
+// 下载通知框
+export function showExportNotification(label: string, others: { id?: string, duration?: number }) {
+  const { id = '', duration = 3000 } = others ?? {}
+  Notification.warning({
+    id,
+    showIcon: false,
+    closable: true,
+    content: () => (
+      <div class="flex items-center pr-16px">
+        <IconLoading size={16} class="color-#6D4CFE mr-8px" />
+        <p class="text-14px lh-22px font-400 color-#211F24">{label}</p>
+      </div>
+    ),
+    duration,
+    class: 'px-16px py-9px w-450px rounded-2px bg-#F0EDFF',
+  });
+}
+
+// 下载失败框
+export function showFailExportNotification(label: string, others: { id?: string, duration?: number, onReDownload?: Function }) {
+  const { id = '', duration = 0, onReDownload } = others ?? {}
+  Notification.warning({
+    id,
+    showIcon: false,
+    closable: true,
+    content: () => (
+      <div class="flex items-center justify-between pr-16px">
+        <div class="flex items-center mr-10px">
+          <img src={icon3} width={16} height={16} class=" mr-8px" />
+          <p class="text-14px lh-22px font-400 color-#211F24 ">{label}</p>
+        </div>
+
+        <p class="text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={() => onReDownload?.()}>重新下载</p>
+      </div>
+    ),
+    duration,
+    class: 'px-16px py-9px w-500px rounded-2px bg-#FFE9E7',
+  });
+}
+
+export const showImportResultNotification = (data: RenderNotificationData) => {
+  const { total_number, success_number, fail_number, file } = data;
+  const hasError = fail_number > 0;
+  const handleDownloadError = (file?: string) => {
+    file && downloadByUrl(file);
+  };
+
+  Notification.warning({
+    showIcon: false,
+    closable: true,
+    content: () => (
+      <div>
+        <div class="flex items-center mb-4px">
+          <img src={hasError ? icon1 : icon2} width="16" height="16" class="mr-8px" />
+          <span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
+        </div>
+        <p class="text-14px lh-22px font-400 color-#211F24">
+          共导入 {total_number} 个账号，导入成功 {success_number} 个
+          {hasError && (
+            <span>
+              ，失败 <span class="color-#F64B31">{fail_number}</span> 个
+            </span>
+          )}
+        </p>
+        {hasError && (
+          <div
+            class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer"
+            onClick={() => handleDownloadError(file)}
+          >
+            下载问题表格
+          </div>
+        )}
+      </div>
+    ),
+    duration: 3000,
+    class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
+  });
+};

src/utils/platform.ts

@@ -0,0 +1,55 @@
+import icon1 from '@/assets/img/media-account/icon-jl.png';
+import icon2 from '@/assets/img/media-account/icon-jg.png';
+import icon3 from '@/assets/img/media-account/icon-bili.png';
+import icon4 from '@/assets/img/media-account/icon-dy.png';
+import icon5 from '@/assets/img/media-account/icon-xhs.png';
+
+// 投放账户
+export enum ENUM_PUT_ACCOUNT_PLATFORM  {
+  jl =  0,
+  jg = 1,
+  bili = 2,
+};
+// 新媒体账号
+export enum ENUM_MEDIA_ACCOUNT_PLATFORM {
+  dy = 0,
+  xhs = 1,
+}
+
+export const PLATFORM_LIST = [
+  {
+    label: '巨量',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.jl,
+    icon: icon1,
+  },
+  {
+    label: '聚光',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.jg,
+    icon: icon2,
+  },
+  {
+    label: 'B站',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.bili,
+    icon: icon3,
+  },
+];
+
+export const MEDIA_ACCOUNT_PLATFORMS = [
+  {
+    label: '抖音',
+    value: 0,
+    icon: icon4,
+  },
+  {
+    label: '小红书',
+    value: 1,
+    icon: icon5,
+  },
+];
+
+export const getPutAccountPlatformLogo = (value: ENUM_PUT_ACCOUNT_PLATFORM) => {
+  return PLATFORM_LIST.find((v) => v.value === value)?.icon ?? null;
+};
+export const getMediaAccountPlatformLogo = (value: ENUM_MEDIA_ACCOUNT_PLATFORM) => {
+  return MEDIA_ACCOUNT_PLATFORMS.find((v) => v.value === value)?.icon ?? null;
+};

src/utils/tools.ts

@@ -3,6 +3,7 @@
  * @Date: 2025-06-27 17:36:31
  */
 import dayjs from 'dayjs';
+
 export function toFixed(num: number | string, n: number): number {
   return parseFloat(parseFloat(num.toString()).toFixed(n));
 }
@@ -84,7 +85,7 @@ export function formatTableField(fieldItem: any, rowValue: any, showExactValue =
   return `${fieldItem.prefix || ''}${value}${fieldItem.suffix || ''}`;
 }
 
-export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm', otherYearFmt = 'YYYY-MM-DD HH:mm') {
+export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm:ss', otherYearFmt = 'YYYY-MM-DD HH:mm:ss') {
   if (!val) return '-';
   const year = dayjs(val * 1000).year();
   const currYear = dayjs().year();
@@ -105,3 +106,7 @@ export function downloadByUrl(url: string, filename?: string) {
   a.click();
   document.body.removeChild(a);
 }
+
+export function genRandomId() {
+  return `id_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
+}

src/utils/user.ts

@@ -12,13 +12,13 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
 export function goUserLogin(query?: any) {
   router.push({ name: 'UserLogin', query });
 }
-// 初始化企业信息、navbar菜单、允许访问的路由
+
 export const getUserEnterpriseInfo = async () => {
   const enterpriseStore = useEnterpriseStore();
   const sidebarStore = useSidebarStore();
   const userStore = useUserStore();
 
-  await enterpriseStore.getEnterpriseInfo();
+  await enterpriseStore.getEnterpriseInfo(); // 初始化企业信息
   sidebarStore.getUserNavbarMenuList(); // 初始化navbar菜单
   userStore.getUserAllowAccessRoutes(); // 初始化允许访问的路由
 };
@@ -26,9 +26,11 @@ export const getUserEnterpriseInfo = async () => {
 // 登录处理
 export async function handleUserLogin() {
   const userStore = useUserStore();
+  const sidebarStore = useSidebarStore();
 
   await userStore.getUserInfo(); // 初始化用户信息
-  await getUserEnterpriseInfo();
+  await getUserEnterpriseInfo(); // 初始化企业信息、navbar菜单、允许访问的路由
+  sidebarStore.startUnreadInfoPolling(); // 初始化未读信息
 
   handleUserHome();
 }
@@ -38,18 +40,19 @@ export function handleUserHome() {
   router.push({ name: 'Home' });
 }
 
+// 登出处理
 export function handleUserLogout() {
   const userStore = useUserStore();
   const enterpriseStore = useEnterpriseStore();
   const sidebarStore = useSidebarStore();
 
-  userStore.clearUserInfo();
+  userStore.clearUserInfo(); // 清除用户信息
-  enterpriseStore.clearUserEnterpriseInfo();
+  userStore.clearToken(); // 清除token
-  sidebarStore.clearUserNavbarMenuList();
+  enterpriseStore.clearUserEnterpriseInfo(); // 清除企业信息
-  userStore.clearUserAllowAccessRoutes();
+  sidebarStore.clearUserNavbarMenuList(); // 清除navbar菜单信息
-
+  userStore.clearUserAllowAccessRoutes(); // 清除权限路由列表
-  sidebarStore.clearActiveMenuId();
+  sidebarStore.stopUnreadInfoPolling(); // 清除未读消息
-  userStore.deleteToken();
+  sidebarStore.clearActiveMenuId(); // 清除active菜单id
 
   goUserLogin();
 }

src/views/components/dataEngine/hotCloud.vue

@@ -160,7 +160,7 @@ const processTagData = (apiData) => {
 };
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -219,7 +219,7 @@ a-tag:hover {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;

src/views/components/dataEngine/hotTranslation.vue

@@ -133,7 +133,7 @@
         </a-space>
       </div>
       <template #footer>
-        <a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
+        <a-button size="large" @click="handleCancel">取消</a-button>
         <a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
       </template>
     </a-modal>
@@ -354,7 +354,7 @@ const handleOk = () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -378,7 +378,7 @@ const handleOk = () => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -397,14 +397,6 @@ const handleOk = () => {
     justify-content: flex-end;
     align-items: center;
     border-top: 1px solid var(--Border-1, #d7d7d9);
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
   }
 }
 </style>

src/views/components/dataEngine/keyBrandMovement.vue

@@ -287,7 +287,7 @@ watch(selectedIndustry, () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;

src/views/components/dataEngine/keyWord.vue

@@ -260,7 +260,7 @@
         </a-space>
       </div>
       <template #footer>
-        <a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
+        <a-button size="large" @click="handleCancel">取消</a-button>
         <a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
       </template>
     </a-modal>
@@ -659,7 +659,7 @@ onMounted(() => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -668,13 +668,13 @@ onMounted(() => {
 }
 .cts {
   color: var(--Text-2, #3c4043);
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px; /* 157.143% */
   &.num {
-    font-family: 'HarmonyOS Sans SC';
+    font-family: $font-family-manrope-regular;
   }
 }
 </style>
@@ -694,7 +694,7 @@ onMounted(() => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -713,14 +713,6 @@ onMounted(() => {
     justify-content: flex-end;
     align-items: center;
     border-top: 1px solid var(--Border-1, #d7d7d9);
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
   }
 }
 </style>

src/views/components/dataEngine/userPainPoints.vue

@@ -110,7 +110,7 @@
         </a-space>
       </div>
       <template #footer>
-        <a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
+        <a-button size="large" @click="handleCancel">取消</a-button>
         <a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
       </template>
     </a-modal>
@@ -276,7 +276,7 @@ const search = () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -299,7 +299,7 @@ const search = () => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -318,14 +318,6 @@ const search = () => {
     justify-content: flex-end;
     align-items: center;
     border-top: 1px solid var(--Border-1, #d7d7d9);
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
   }
 }
 </style>

src/views/components/dataEngine/userPersona.vue

@@ -18,16 +18,16 @@
             <a-space>
               <span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
               <span>女性</span>
-              <span v-if="genderData.length > 0" style="width: 40px">{{ genderData[0].rate * 100 }}%</span>
+              <span>{{ (girlData.rate * 100).toFixed(2) }}%</span>
               <span>TGI</span>
-              <span v-if="genderData.length > 0">{{ genderData[0].tgi }}</span>
+              <span>{{ girlData.tgi }}</span>
             </a-space>
             <a-space>
               <span style="width: 8px; height: 8px; background-color: #2a59f3; border-radius: 50%"></span>
               <span>男性</span>
-              <span v-if="genderData.length > 1" style="width: 40px">{{ genderData[1].rate * 100 }}%</span>
+              <span>{{ (boyData.rate * 100).toFixed(2) }}%</span>
               <span>TGI</span>
-              <span v-if="genderData.length > 1">{{ genderData[1].tgi }}</span>
+              <span>{{ boyData.tgi }}</span>
             </a-space>
           </a-space>
         </a-space>
@@ -145,10 +145,13 @@ const topHeaderRef = ref();
 const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
 const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
 const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
+
 const genderData = ref([]);
 const genderValueData = ref([]);
 const ageValueData = ref([]);
 const geoList = ref([]);
+const boyData = computed(() => genderData.value.find( v => v.gender === 1) ?? {})
+const girlData = computed(() => genderData.value.find( v => v.gender === 2) ?? {})
 // 监听筛选条件变化
 watch([selectedIndustry, selectedTimePeriod, selectedSubCategory], () => {
   getAgeDistributionsList();
@@ -233,7 +236,7 @@ const getGenderDistributionsList = async () => {
     await nextTick();
 
     genderValueData.value = data.map((item) => ({
-      value: item.rate * 100,
+      value: (item.rate * 100).toFixed(2),
       tgi: item.tgi,
       name: item.gender === 1 ? '女性' : '男性',
     }));
@@ -602,7 +605,7 @@ onMounted(() => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -611,13 +614,13 @@ onMounted(() => {
 }
 .cts {
   color: var(--Text-2, #3c4043);
-  font-family: 'PuHuiTi-Regular';
+  font-family: $font-family-regular;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px; /* 157.143% */
   &.num {
-    font-family: 'HarmonyOS Sans SC';
+    font-family: $font-family-manrope-regular;
   }
 }
 :deep(.arco-tabs) {

src/views/components/drag/DraggableResizable.vue

@@ -360,7 +360,7 @@ if (container.value) {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .draggable-resizable {
   position: absolute;
   background-color: lightblue;

src/views/components/drag/index.vue

@@ -447,7 +447,7 @@ const adjustComponentPosition = (
   return { x: adjustedX, y: adjustedY };
 };
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .app {
   position: relative;
   width: 100%;