Merge remote-tracking branch 'origin/main' into feature/0710_下载中心_rxd

# Conflicts:
#	src/components/_base/navbar/index.vue
#	src/styles/components/checkbox.scss

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' }],
     ],
   });

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "run-p build-only",
     "build:test": "vite build --mode test && tar -czvf dist-test.tar.gz dist",
     "build:prod": "vite build --mode production && tar -czvf dist.tar.gz dist",
     "build-only": "vite build -- mode development",

src/App.vue

@@ -41,3 +41,7 @@ onMounted(() => {
   });
 });
 </script>
+
+<style lang="scss">
+@import './styles/index.scss';
+</style>

src/api/all/propertyMarketing.ts

@@ -322,6 +322,11 @@ export const getPlacementAccountsList = (params = {}) => {
   return Http.get('/v1/placement-accounts/list', params);
 };
 
+// 投放账号计划
+export const getplacementAccountProjectsLlist = (params = {}) => {
+  return Http.get('/v1/placement-account-projects/list', params);
+};
+
 // 投放账号-同步数据
 export const postPlacementAccountsSync = (id: string) => {
   return Http.post(`/v1/placement-accounts/${id}/sync-data`);

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

@@ -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;

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/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/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/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;

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

@@ -31,10 +31,10 @@ onMounted(() => {
   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/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/layouts/Basic.vue

@@ -102,9 +102,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 +116,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

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

src/main.ts

@@ -9,10 +9,10 @@ import NoData from '@/components/no-data';
 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 '@/styles/vars.css'; // 优先加载
 
 const app = createApp(App);

src/permission/permission.ts

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

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;
       }
     }
   }
@@ -28,5 +28,4 @@
      border: none;
     }
   }
-
 }

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/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/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 './lib/variable.scss';
+@import './lib/reset.scss';
+
+@import './vars.scss';
+@import './components/index.scss';
+// @import './font.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: $font-size-14;
+  -webkit-print-color-adjust: exact;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}

src/styles/lib/variable.scss

@@ -0,0 +1,15 @@
+
+// 汉字字体
+$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;
+
+$font-size-14: 14px;

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/views/components/common/AccountSelect.vue

@@ -0,0 +1,66 @@
+<template>
+  <a-select allow-search v-model="selectedValue" placeholder="请选择账号" allow-clear filterable @change="handleChange">
+    <a-option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name">
+      {{ account.name }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { getPlacementAccountsList } from '@/api/all/propertyMarketing';
+
+// 定义账号对象类型
+interface Account {
+  id: number;
+  name: string;
+}
+
+const props = defineProps<{
+  modelValue?: number | string;
+}>();
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 响应式数据
+const selectedValue = ref(props.modelValue);
+const allAccounts = ref<Account[]>([]);
+const filteredAccounts = ref<Account[]>([]);
+const loading = ref(false);
+const searchKeyword = ref('');
+
+// 获取账号列表
+const fetchAccounts = async () => {
+  try {
+    loading.value = true;
+    const { code, data } = await getPlacementAccountsList({
+      names: searchKeyword.value,
+    });
+    if (code === 200) {
+      allAccounts.value = data;
+      filteredAccounts.value = data;
+    }
+  } catch (error) {
+    console.error('获取账号列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 搜索处理
+const handleSearch = (value: string) => {};
+
+// 值变化处理
+const handleChange = (value: number | string) => {
+  let data = [];
+  if (value === '') {
+    data = [];
+  } else {
+    data = [value];
+  }
+  emit('update:modelValue', data);
+};
+
+// 初始化获取数据
+onMounted(fetchAccounts);
+</script>

src/views/components/common/PlanSelect.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-select allow-search v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange">
+    <a-option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
+      {{ item.name }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { getplacementAccountProjectsLlist } from '@/api/all/propertyMarketing';
+
+interface Account {
+  id: number;
+  name: string;
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 响应式数据
+const selectedValue = ref(props.modelValue);
+const allAccounts = ref<Account[]>([]);
+const listData = ref<Account[]>([]);
+const loading = ref(false);
+const searchKeyword = ref('');
+
+const fetchData = async () => {
+  try {
+    loading.value = true;
+    const { code, data } = await getplacementAccountProjectsLlist({
+      names: searchKeyword.value,
+    });
+    if (code === 200) {
+      allAccounts.value = data;
+      listData.value = data;
+    }
+  } catch (error) {
+    console.error('获取账号列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+const handleChange = (value: any) => {
+  let data = [];
+  if (value === '') {
+    data = [];
+  } else {
+    data = [value];
+  }
+  emit('update:modelValue', data);
+};
+
+onMounted(fetchData);
+</script>

src/views/components/common/RangeDatePicker.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template></template>
+
+<style scoped lang="scss"></style>

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

@@ -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;

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

@@ -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;

src/views/components/dataEngine/userPainPoints.vue

@@ -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;

src/views/components/dataEngine/userPersona.vue

@@ -602,7 +602,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 +611,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%;

src/views/components/layout/comp1.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts"></script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .flex-container {
   display: flex;
   flex-direction: row;

src/views/components/layout/comp2.vue

@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>

src/views/components/layout/comp3.vue

@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>

src/views/components/layout/comp4.vue

@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>

src/views/components/layout/index.vue

@@ -380,7 +380,7 @@ function getComponentStyle(component: ComponentState) {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .page-container {
   width: 100%;
   height: 100%;

src/views/components/login/style.scss

@@ -39,7 +39,7 @@
     transform: translateX(-50%);
 
     .text {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;

src/views/components/management/account/index.vue

@@ -178,13 +178,13 @@ onMounted(() => {
 });
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .primary-account {
   border-radius: 2px;
   padding-right: 8px;
   padding-left: 8px;
   background: var(--Brand-Brand-1, rgba(240, 237, 255, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -195,7 +195,7 @@ onMounted(() => {
   padding-right: 8px;
   padding-left: 8px;
   background: var(--Functional-Warning-1, rgba(255, 245, 222, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: var(--Functional-Warning-6, rgba(255, 174, 0, 1));
@@ -204,7 +204,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 2px 12px;
   border: 1px solid var(--Functional-Danger-6, rgba(246, 75, 49, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -214,7 +214,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 5px 16px;
   border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 14px;
   color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
@@ -224,14 +224,14 @@ onMounted(() => {
   margin-bottom: 12px;
   .add-account-title {
     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));
   }
   .add-account-subtitle {
     margin: 4px 0 0 0;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -243,7 +243,7 @@ onMounted(() => {
     border-radius: 4px;
     padding: 12px 16px;
     background: var(--BG-200, rgba(242, 243, 245, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -254,7 +254,7 @@ onMounted(() => {
   }
   .cannot-add-account-title {
     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));
@@ -267,7 +267,7 @@ onMounted(() => {
   .cannot-add-account-subtitle {
     margin: 16px 0 0 0;
     padding-left: 32px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -276,7 +276,7 @@ onMounted(() => {
 .delete-modal-content {
   margin-left: 34px;
   margin-top: 16px;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -289,7 +289,7 @@ onMounted(() => {
   justify-content: space-between;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;

src/views/components/management/enterprise/index.vue

@@ -98,14 +98,14 @@ async function handleOk() {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tips {
   height: 40px;
   border-radius: 4px;
   padding: 10px 16px;
   background: var(--BG-100, rgba(247, 248, 250, 1));
   border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   span {
@@ -118,7 +118,7 @@ async function handleOk() {
     align-items: center;
   }
   :deep(.arco-form-item-label) {
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     margin: 0;
@@ -126,12 +126,12 @@ async function handleOk() {
   :deep(.arco-input-wrapper) {
     background: white;
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     padding: 4px 12px;
     input::placeholder {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       color: var(--Text-4, rgba(147, 148, 153, 1));
@@ -141,7 +141,7 @@ async function handleOk() {
     background: var(--BG-200, rgba(242, 243, 245, 1));
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
     .arco-input:disabled {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
@@ -156,7 +156,7 @@ async function handleOk() {
   border: 1px solid rgba(109, 76, 254, 1);
   border-radius: 4px;
   padding: 2px 12px;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: rgba(109, 76, 254, 1);
@@ -168,7 +168,7 @@ async function handleOk() {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;

src/views/components/management/person/index.vue

@@ -261,7 +261,7 @@ function getFileExtension(filename: string): string {
     align-items: center;
   }
   :deep(.arco-form-item-label) {
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     margin: 0;
@@ -269,12 +269,12 @@ function getFileExtension(filename: string): string {
   :deep(.arco-input-wrapper) {
     background: white;
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     padding: 4px 12px;
     input::placeholder {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       color: var(--Text-4, rgba(147, 148, 153, 1));
@@ -284,7 +284,7 @@ function getFileExtension(filename: string): string {
     background: var(--BG-200, rgba(242, 243, 245, 1));
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
     .arco-input:disabled {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
@@ -304,7 +304,7 @@ function getFileExtension(filename: string): string {
     border-radius: 4px;
     padding: 2px 12px;
     border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     vertical-align: middle;
@@ -318,7 +318,7 @@ function getFileExtension(filename: string): string {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;

src/views/components/permission/auth.vue

@@ -30,5 +30,5 @@ function login() {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>

src/views/components/permission/choose-enterprise.vue

@@ -15,5 +15,5 @@
 const enterprise = ref('');
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>

src/views/components/table/index.vue

@@ -49,4 +49,4 @@ function add() {
 
 function deleteItem(record) {}
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>

src/views/components/workplace/index.vue

@@ -46,7 +46,7 @@ const getSuccessCaseList = async () => {
 };
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .container-body {
   padding-left: 24px !important;
   :deep(> div > .title) {

src/views/components/workplace/modules/case.vue

@@ -89,7 +89,7 @@ interface SuccessCase {
   data: { label: string; value: string }[];
 }
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   width: 304px;
   height: 306px;
@@ -139,7 +139,7 @@ interface SuccessCase {
       max-width: 100%;
     }
     .title {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
@@ -151,7 +151,7 @@ interface SuccessCase {
       margin: 0;
       padding: 0;
       .keyword {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-weight: 400;
         font-size: 12px;
         line-height: 20px;
@@ -169,7 +169,7 @@ interface SuccessCase {
       line-height: 28px;
       text-align: center;
       .unit {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-weight: 400;
         font-size: 10px;
         line-height: 24px;
@@ -178,7 +178,7 @@ interface SuccessCase {
       }
     }
     .label {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 10px;
       line-height: 100%;

src/views/components/workplace/modules/product.vue

@@ -123,7 +123,7 @@ const gotoModule = (menuId: number) => {
   router.push({ name: routeMap[menuId] });
 };
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   width: 304px;
   height: 220px;
@@ -141,7 +141,7 @@ const gotoModule = (menuId: number) => {
     border-radius: 4px;
     padding-right: 8px;
     padding-left: 8px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     line-height: 20px;
@@ -175,7 +175,7 @@ const gotoModule = (menuId: number) => {
     background: rgba(255, 245, 222, 1);
 
     :deep(.arco-statistic-title) {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@@ -185,7 +185,7 @@ const gotoModule = (menuId: number) => {
     }
 
     :deep(.arco-statistic-value) {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 10px;
       color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@@ -201,7 +201,7 @@ const gotoModule = (menuId: number) => {
 
     .title {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 16px;
       line-height: 24px;
@@ -211,7 +211,7 @@ const gotoModule = (menuId: number) => {
 
     .desc {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
@@ -228,7 +228,7 @@ const gotoModule = (menuId: number) => {
       gap: 8px;
       padding: 2px 12px;
       background-color: rgba(109, 76, 254, 1) !important;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
@@ -244,7 +244,7 @@ const gotoModule = (menuId: number) => {
       gap: 8px;
       padding: 2px 12px;
       border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;

src/views/property-marketing/brands/brand-materials/style.scss

@@ -44,7 +44,7 @@
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/component.scss

@@ -32,7 +32,7 @@
       }
       .arco-form-item-label {
         color: var(--Text-1, #211f24);
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue

@@ -198,7 +198,7 @@ const columns = [
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue

@@ -190,7 +190,7 @@ const columns = [
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss

@@ -9,7 +9,7 @@
 .account-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/media-account/account-dashboard/components/custom-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;

src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss

@@ -20,7 +20,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/media-account/account-dashboard/style.scss

@@ -17,7 +17,7 @@
     border: 1px solid #e6e6e8;
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -37,7 +37,7 @@
         }
         .label {
           color: var(--Text-3, #737478);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
@@ -45,7 +45,7 @@
         }
         .value {
           color: var(--Text-1, #211f24);
-          font-family: 'HarmonyOS Sans SC';
+          font-family: $font-family-manrope-regular;
           font-size: 18px;
           font-style: normal;
           font-weight: 500;

src/views/property-marketing/media-account/account-detail/components/note-table/style.scss

@@ -21,7 +21,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/media-account/account-detail/style.scss

@@ -4,13 +4,13 @@
   flex-direction: column;
   :deep(.cts) {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
     &.title {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
     }
   }
   :deep(.title-row) {

src/views/property-marketing/media-account/account-manage/components/account-table/index.vue

@@ -25,11 +25,11 @@
         </div>
         <div class="field-row">
           <span class="label">账号ID</span>
-          <span class="cts">{{ item.account_id || '-' }}</span>
+          <span class="cts num">{{ item.account_id || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">手机号码</span>
-          <span class="cts">{{ item.mobile || '-' }}</span>
+          <span class="cts num">{{ item.mobile || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">运营人员</span>

src/views/property-marketing/media-account/account-manage/components/account-table/style.scss

@@ -19,7 +19,7 @@
     align-items: flex-start;
     .name {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -30,7 +30,7 @@
       margin-right: 20px;
       flex-shrink: 0;
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -44,11 +44,14 @@
       .cts {
         @include ellipsis;
         color: var(--Text-2, #3c4043);
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px; /* 166.667% */
+        &.num {
+          font-family: $font-family-manrope-regular;
+        }
       }
       .tag-box {
         display: flex;
@@ -61,7 +64,7 @@
         .text {
           @include ellipsis();
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 10px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss

@@ -9,7 +9,7 @@
       width: 100%;
       .dt {
         color: var(--Brand-Brand-6, #6d4cfe);
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -21,7 +21,7 @@
         background: var(--BG-200, #f2f3f5);
         .name {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
         .tip {
           color: var(--Text-3, #737478);
           text-align: center;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 12px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue

@@ -9,11 +9,12 @@
     title="授权账号"
     modal-class="authorized-account-modal"
     :mask-closable="false"
-    :footer="!isLoading"
+    :footer="modalState !== MODAL_STATE.LOADING"
     @close="close"
   >
     <div class="flex flex-col items-center">
-      <template v-if="isLoading">
+      <!-- 加载中状态 -->
+      <template v-if="modalState === MODAL_STATE.LOADING">
         <a-progress
           :percent="progress"
           color="#6D4CFE"
@@ -24,32 +25,48 @@
         />
         <p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
       </template>
+
       <template v-else>
-        <template v-if="isCompleted">
+        <!-- 完成状态 -->
-          <img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
+        <template v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED">
-          <p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
+          <img :src="modalState === MODAL_STATE.SUCCESS ? icon2 : icon3" width="80" height="80" class="mb-16px" />
-          <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
+          <p class="s2">{{ `数据初始化${modalState === MODAL_STATE.SUCCESS ? '成功' : '失败'}。` }}</p>
+          <p v-if="modalState === MODAL_STATE.FAILED" class="red-text">失败原因：{{ failReason || '-' }}</p>
         </template>
+
+        <!-- 二维码状态 -->
         <template v-else>
           <div class="img-box">
-            <template v-if="qrCodeLoading || isFailLoadQrCode">
+            <!-- 二维码加载中或失败 -->
+            <template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
               <div class="relative w-160px h-160px">
                 <a-image :src="icon1" width="160" height="160" />
                 <div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
-                  <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
+                  <img
+                    v-if="modalState === MODAL_STATE.QR_FAILED"
+                    :src="icon4"
+                    width="24"
+                    height="24"
+                    class="mb-13px"
+                  />
                   <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
-                  <span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
+                  <span
-                    isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
+                    :class="modalState === MODAL_STATE.QR_FAILED ? '!color-#F64B31' : '!color-#6D4CFE'"
-                  }}</span>
+                    class="s2"
+                    >{{ modalState === MODAL_STATE.QR_FAILED ? '二维码生成失败' : '二维码生成中...' }}</span
+                  >
                 </div>
                 <div
                   class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
                 ></div>
               </div>
             </template>
+
+            <!-- 正常二维码 -->
             <a-image v-else :src="qrCodeUrl" width="160" height="160" />
 
-            <div v-if="isOverdue" class="mask cursor-pointer" @click="handleRefreshQrCode">
+            <!-- 二维码失效遮罩 -->
+            <div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
               <icon-refresh size="24" class="mb-13px" />
               <p class="s1">二维码失效</p>
               <p class="s1">请点击刷新</p>
@@ -59,15 +76,29 @@
         </template>
       </template>
     </div>
+
     <template #footer>
-      <a-button v-if="isCompleted" size="large" class="cancel-btn" @click="close">取消</a-button>
+      <a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" class="cancel-btn" @click="handleRefreshQrCode">
-      <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
+        重新生成
+      </a-button>
+      <a-button
+        v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
+        size="large"
+        class="cancel-btn"
+        @click="close"
+      >
+        取消
+      </a-button>
+      <a-button type="primary" size="large" @click="handleOk">
+        {{ confirmBtnText }}
+      </a-button>
     </template>
   </a-modal>
 </template>
 
 <script setup>
-import { defineExpose, ref } from 'vue';
+import { defineExpose, ref, computed } from 'vue';
+import { Message as AMessage } from '@arco-design/web-vue';
 import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
@@ -75,52 +106,67 @@ import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
 import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
 import icon4 from '@/assets/img/media-account/icon-warn.png';
 
-// 失效时间
-
 const emits = defineEmits(['update']);
 
-const OVERDUE_TIME = 30000;
+// 状态枚举
+const MODAL_STATE = {
+  QR_LOADING: 0, // 二维码加载中
+  QR_FAILED: 1, // 二维码生成失败
+  QR_READY: 2, // 二维码就绪，等待扫码
+  QR_EXPIRED: 3, // 二维码已过期
+  LOADING: 4, // 数据同步中
+  SUCCESS: 5, // 授权成功
+  FAILED: 6, // 授权失败
+};
+
+const OVERDUE_TIME = 30000; // 失效时间
 const visible = ref(false);
-const isOverdue = ref(false); // 二维码失效
+const modalState = ref(MODAL_STATE.QR_LOADING);
-const isLoading = ref(false);
-const isCompleted = ref(false);
-const isSuccess = ref(false);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
 const platform = ref('');
-const isFailLoadQrCode = ref(false);
 const qrCodeUrl = ref('');
-const qrCodeLoading = ref(false);
 
 let progressTimer = null;
 let overdueTimer = null;
 let statusPollingTimer = null;
 
+// 按钮文案映射
 const confirmBtnText = computed(() => {
-  if (isFailLoadQrCode.value) return '重新生成';
+  const btnTextMap = {
-  if (!isCompleted.value) return '完成扫码';
+    [MODAL_STATE.QR_LOADING]: '完成扫码',
-  return isSuccess.value ? '继续添加' : '重新扫码';
+    [MODAL_STATE.QR_FAILED]: '重新生成',
+    [MODAL_STATE.QR_READY]: '完成扫码',
+    [MODAL_STATE.QR_EXPIRED]: '重新生成',
+    [MODAL_STATE.LOADING]: '处理中...',
+    [MODAL_STATE.SUCCESS]: '继续添加',
+    [MODAL_STATE.FAILED]: '重新扫码',
+  };
+  return btnTextMap[modalState.value] || '确定';
+});
+
+// 按钮是否禁用
+const isBtnDisabled = computed(() => {
+  return false; // 所有状态下按钮都是可点击的
 });
 
 const open = (accountId, platformCode) => {
   id.value = accountId;
   platform.value = platformCode === 0 ? '抖音' : '小红书';
+  modalState.value = MODAL_STATE.QR_LOADING;
   getAuthorizedQrCode();
   visible.value = true;
 };
+
 const resetTaskFields = () => {
-  isOverdue.value = false;
+  modalState.value = MODAL_STATE.QR_LOADING;
-  isLoading.value = false;
-  isCompleted.value = false;
-  isSuccess.value = false;
   failReason.value = '';
   platform.value = '';
   progress.value = 0;
   qrCodeUrl.value = '';
-  qrCodeLoading.value = false;
-  isFailLoadQrCode.value = false;
 };
+
 const close = () => {
   resetTaskFields();
   id.value = '';
@@ -132,24 +178,22 @@ const close = () => {
 
 const getAuthorizedQrCode = async () => {
   try {
-    qrCodeLoading.value = true;
+    modalState.value = MODAL_STATE.QR_LOADING;
     const { code, data } = await getAuthorizedImage(id.value);
     if (code === 200) {
       qrCodeUrl.value = data.image;
       overdueTimer = null;
-      isOverdue.value = false;
+      modalState.value = MODAL_STATE.QR_READY;
 
       // 约定：后端限制40s内必须扫码，前端定30s后失效
       overdueTimer = setTimeout(() => {
-        isOverdue.value = true;
+        modalState.value = MODAL_STATE.QR_EXPIRED;
       }, OVERDUE_TIME);
     } else {
-      isFailLoadQrCode.value = true;
+      modalState.value = MODAL_STATE.QR_FAILED;
     }
   } catch (error) {
-    isFailLoadQrCode.value = true;
+    modalState.value = MODAL_STATE.QR_FAILED;
-  } finally {
-    qrCodeLoading.value = false;
   }
 };
 
@@ -163,22 +207,14 @@ const clearStatusPollingTimer = () => {
 const startStatusPolling = () => {
   clearStatusPollingTimer();
   statusPollingTimer = setInterval(async () => {
-    if (!isCompleted.value) {
+    if (modalState.value === MODAL_STATE.LOADING) {
       await getAuthorizedStatus();
-      if (isCompleted.value) {
-        progress.value = 1;
-        clearFakeProgressTimer();
-        clearStatusPollingTimer();
-        isLoading.value = false;
-        emits('update');
-      }
     }
   }, 2000);
 };
 
 const startLoading = async () => {
-  isLoading.value = true;
+  modalState.value = MODAL_STATE.LOADING;
-  isCompleted.value = false;
   progress.value = 0;
   startFakeProgressPolling();
   startStatusPolling();
@@ -189,10 +225,18 @@ const getAuthorizedStatus = async () => {
   if (code === 200) {
     const { status, message } = data;
     if (status !== 0) {
-      isCompleted.value = true;
+      progress.value = 1;
-      isSuccess.value = status === 1;
+      clearFakeProgressTimer();
-      failReason.value = status === 2 ? message : '';
+      clearStatusPollingTimer();
-      isOverdue.value = false;
+
+      if (status === 1) {
+        modalState.value = MODAL_STATE.SUCCESS;
+      } else {
+        modalState.value = MODAL_STATE.FAILED;
+        failReason.value = message || '';
+      }
+
+      emits('update');
     }
   }
 };
@@ -200,11 +244,11 @@ const getAuthorizedStatus = async () => {
 const startFakeProgressPolling = () => {
   clearFakeProgressTimer();
   progressTimer = setInterval(() => {
-    if (!isCompleted.value && progress.value < 0.99) {
+    if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
       const step = Math.random() * 0.04 + 0.01;
       progress.value = Math.min(progress.value + step, 0.99);
       progress.value = Number(progress.value.toFixed(2));
-    } else if (!isCompleted.value && progress.value >= 0.99) {
+    } else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
       progress.value = 0.99; // 卡在99%
     } else {
       clearFakeProgressTimer();
@@ -219,44 +263,57 @@ const clearFakeProgressTimer = () => {
     progressTimer = null;
   }
 };
+
 const clearOverdueTimer = () => {
   if (overdueTimer) {
     clearTimeout(overdueTimer);
     overdueTimer = null;
   }
 };
+
 // 重新扫码
 const handleRefreshQrCode = () => {
+  clearOverdueTimer();
   resetTaskFields();
   getAuthorizedQrCode();
 };
 
 const handleOk = () => {
-  if (isFailLoadQrCode.value) {
+  // 二维码已过期
+  if (modalState.value === MODAL_STATE.QR_EXPIRED) {
     handleRefreshQrCode();
     return;
   }
 
-  if (!qrCodeUrl.value) {
+  // 二维码还在加载中
+  if (modalState.value === MODAL_STATE.QR_LOADING) {
     AMessage.warning('二维码生成中，请稍等');
     return;
   }
 
-  if (isOverdue.value) {
+  // 二维码生成失败
-    AMessage.error('二维码已失效，请重新扫码');
+  if (modalState.value === MODAL_STATE.QR_FAILED) {
+    handleRefreshQrCode();
     return;
   }
 
-  if (isCompleted.value) {
+  // 授权成功，关闭弹窗
-    clearOverdueTimer();
+  if (modalState.value === MODAL_STATE.SUCCESS) {
+    close();
+    return;
+  }
 
-    if (isSuccess.value) {
+  // 授权失败，重新扫码
-      close();
+  if (modalState.value === MODAL_STATE.FAILED) {
-    } else {
+    handleRefreshQrCode();
-      handleRefreshQrCode();
+    return;
-    }
+  }
-  } else {
+
+  // 二维码就绪，开始授权流程
+  if (modalState.value === MODAL_STATE.QR_READY) {
+    clearOverdueTimer();
     startLoading();
+    return;
   }
 };
 

src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss

@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss

@@ -6,7 +6,7 @@
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss

@@ -6,7 +6,7 @@
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss

@@ -20,7 +20,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss

@@ -10,7 +10,7 @@
     }
     .s1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -40,7 +40,7 @@
         .arco-pagination-jumper-prepend {
           color: var(--Text-2, #3c4043);
           text-align: right;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss

@@ -4,7 +4,7 @@
   .arco-modal-body {
     .tip {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue

@@ -9,56 +9,12 @@
     title="重新授权"
     modal-class="reauthorize-account-modal"
     :mask-closable="false"
-    :footer="taskStep !== TASK_STEP.loading"
+    :footer="modalState !== MODAL_STATE.LOADING"
     @close="close"
   >
     <div class="flex flex-col items-center">
-      <template v-if="taskStep === TASK_STEP.default">
+      <!-- 加载中状态 -->
-        <!-- <template v-if="hasUnsyncData">
+      <template v-if="modalState === MODAL_STATE.LOADING">
-          <div class="flex items-center mb-20px">
-            <img :src="icon4" width="16" height="16" class="mr-16px" />
-            <span class="s2 color-#3C4043">检测到该账号最后更新日期为x月x日，已有x天未同步最新数据。</span>
-          </div>
-          <a-radio-group v-model="actionType" class="ml-32px">
-            <a-radio :value="1" class="mb-16px"
-              ><span class="s2"
-                >立即同步遗漏数据 - 获取完整的最新数据 <span class="color-#6D4CFE">（推荐）</span></span
-              ></a-radio
-            >
-            <a-radio :value="2" class="mb-16px"
-              ><span class="s2">仅授权不更新 - 继续使用当前不完全的数据</span></a-radio
-            >
-          </a-radio-group>
-        </template> -->
-        <!-- <template v-else> -->
-        <div class="img-box">
-          <template v-if="qrCodeLoading || isFailLoadQrCode">
-            <div class="relative w-160px h-160px">
-              <a-image :src="icon1" width="160" height="160" />
-              <div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
-                <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
-                <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
-                <span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
-                  isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
-                }}</span>
-              </div>
-              <div
-                class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
-              ></div>
-            </div>
-          </template>
-          <a-image v-else :src="qrCodeUrl" width="160" height="160" />
-
-          <div v-if="isOverdue" class="mask cursor-pointer" @click="handleRefreshQrCode">
-            <icon-refresh size="24" class="mb-13px" />
-            <p class="s1">二维码失效</p>
-            <p class="s1">请点击刷新</p>
-          </div>
-        </div>
-        <span class="mt-16px"> 请使用{{ platform }}扫码，将公司账号绑定至灵机平台。 </span>
-      </template>
-      <!-- </template> -->
-      <template v-else-if="taskStep === TASK_STEP.loading">
         <a-progress
           :percent="progress"
           color="#6D4CFE"
@@ -69,41 +25,94 @@
         />
         <p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
       </template>
+
+      <!-- 完成状态 -->
       <template v-else>
-        <template v-if="isNicknameChanged">
+        <template v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED">
-          <div class="flex items-center mb-20px">
+          <template v-if="isNicknameChanged">
-            <img :src="icon4" width="16" height="16" class="mr-16px" />
+            <div class="flex items-center mb-20px">
-            <span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
+              <img :src="icon4" width="16" height="16" class="mr-16px" />
-          </div>
+              <span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
-          <div class="w-100% pl-32px">
+            </div>
-            <div class="account-tip-box">
+            <div class="w-100% pl-32px">
-              <p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
+              <div class="account-tip-box">
-              <p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
+                <p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
+                <p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <img :src="modalState === MODAL_STATE.SUCCESS ? icon2 : icon3" width="80" height="80" class="mb-16px" />
+            <p class="s2">{{ `数据初始化${modalState === MODAL_STATE.SUCCESS ? '成功' : '失败'}。` }}</p>
+            <p v-if="modalState === MODAL_STATE.FAILED" class="red-text">失败原因：{{ failReason || '-' }}</p>
+          </template>
+        </template>
+
+        <!-- 二维码状态 -->
+        <template v-else>
+          <div class="img-box">
+            <!-- 二维码加载中或失败 -->
+            <template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
+              <div class="relative w-160px h-160px">
+                <a-image :src="icon1" width="160" height="160" />
+                <div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
+                  <img
+                    v-if="modalState === MODAL_STATE.QR_FAILED"
+                    :src="icon4"
+                    width="24"
+                    height="24"
+                    class="mb-13px"
+                  />
+                  <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
+                  <span
+                    :class="modalState === MODAL_STATE.QR_FAILED ? '!color-#F64B31' : '!color-#6D4CFE'"
+                    class="s2"
+                    >{{ modalState === MODAL_STATE.QR_FAILED ? '二维码生成失败' : '二维码生成中...' }}</span
+                  >
+                </div>
+                <div
+                  class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
+                ></div>
+              </div>
+            </template>
+
+            <!-- 正常二维码 -->
+            <a-image v-else :src="qrCodeUrl" width="160" height="160" />
+
+            <!-- 二维码失效遮罩 -->
+            <div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
+              <icon-refresh size="24" class="mb-13px" />
+              <p class="s1">二维码失效</p>
+              <p class="s1">请点击刷新</p>
             </div>
           </div>
-        </template>
+          <span class="mt-16px"> 请使用{{ platform }}扫码，将公司账号绑定至灵机平台。 </span>
-        <template v-else>
-          <img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
-          <p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
-          <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
         </template>
       </template>
     </div>
+
     <template #footer>
+      <a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" class="cancel-btn" @click="handleRefreshQrCode">
+        重新生成
+      </a-button>
       <a-button
-        v-if="taskStep === TASK_STEP.default || taskStep === TASK_STEP.end"
+        v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
         size="large"
         class="cancel-btn"
         @click="close"
-        >取消</a-button
       >
-      <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
+        取消
+      </a-button>
+      <a-button type="primary" size="large" @click="handleOk">
+        {{ confirmBtnText }}
+      </a-button>
     </template>
   </a-modal>
 </template>
 
 <script setup>
-import { defineExpose, ref, onUnmounted } from 'vue';
+import { defineExpose, ref, computed } from 'vue';
+import { Message as AMessage } from '@arco-design/web-vue';
 import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
@@ -112,144 +121,148 @@ import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
 import icon4 from '@/assets/img/media-account/icon-warn-1.png';
 
 const emits = defineEmits(['update']);
-const OVERDUE_TIME = 30000; // 失效时间
+
-const TASK_STEP = {
+// 状态枚举
-  default: 1,
+const MODAL_STATE = {
-  loading: 2,
+  QR_LOADING: 0, // 二维码加载中
-  end: 3,
+  QR_FAILED: 1, // 二维码生成失败
+  QR_READY: 2, // 二维码就绪，等待扫码
+  QR_EXPIRED: 3, // 二维码已过期
+  LOADING: 4, // 数据同步中
+  SUCCESS: 5, // 授权成功
+  FAILED: 6, // 授权失败
 };
+
+const OVERDUE_TIME = 30000; // 失效时间
 const visible = ref(false);
-const isOverdue = ref(false); // 二维码失效
+const modalState = ref(MODAL_STATE.QR_LOADING);
-const isSuccess = ref(false);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
 const platform = ref('');
-
-const isFailLoadQrCode = ref(false);
 const qrCodeUrl = ref('');
-const qrCodeLoading = ref(false);
-
-const taskStep = ref(TASK_STEP.default);
-// const hasUnsyncData = ref(false); // 含有未同步数据
 const isNicknameChanged = ref(false); // 昵称发生变化
-const actionType = ref(1);
 
 let progressTimer = null;
 let overdueTimer = null;
 let statusPollingTimer = null;
 
+// 按钮文案映射
 const confirmBtnText = computed(() => {
-  if (isFailLoadQrCode.value) return '重新生成';
+  const btnTextMap = {
-  if (taskStep.value === TASK_STEP.default) {
+    [MODAL_STATE.QR_LOADING]: '完成扫码',
-    // return hasUnsyncData.value ? '确定' : '完成扫码';
+    [MODAL_STATE.QR_FAILED]: '重新生成',
-    return '完成扫码';
+    [MODAL_STATE.QR_READY]: '完成扫码',
-  }
+    [MODAL_STATE.QR_EXPIRED]: '重新生成',
-
+    [MODAL_STATE.LOADING]: '处理中...',
-  if (taskStep.value === TASK_STEP.end) {
+    [MODAL_STATE.SUCCESS]: isNicknameChanged.value ? '确定覆盖' : '继续添加',
-    if (isNicknameChanged.value) return '确定覆盖';
+    [MODAL_STATE.FAILED]: '重新扫码',
-    return isSuccess.value ? '继续添加' : '重新扫码';
+  };
-  }
+  return btnTextMap[modalState.value] || '确定';
-
-  return '';
 });
 
 const open = (accountId, platformCode) => {
   id.value = accountId;
   platform.value = platformCode === 0 ? '抖音' : '小红书';
+  modalState.value = MODAL_STATE.QR_LOADING;
   getAuthorizedQrCode();
   visible.value = true;
 };
+
 const resetTaskFields = () => {
-  isOverdue.value = false;
+  modalState.value = MODAL_STATE.QR_LOADING;
-  isSuccess.value = false;
   failReason.value = '';
   platform.value = '';
   progress.value = 0;
   qrCodeUrl.value = '';
-  qrCodeLoading.value = false;
   isNicknameChanged.value = false;
-  isFailLoadQrCode.value = false;
-  actionType.value = 1;
-  taskStep.value = TASK_STEP.default;
 };
+
 const close = () => {
   resetTaskFields();
   id.value = '';
   clearFakeProgressTimer();
+  clearStatusPollingTimer();
   clearOverdueTimer();
   visible.value = false;
 };
 
+const getAuthorizedQrCode = async () => {
+  try {
+    modalState.value = MODAL_STATE.QR_LOADING;
+    const { code, data } = await getAuthorizedImage(id.value);
+    if (code === 200) {
+      qrCodeUrl.value = data.image;
+      overdueTimer = null;
+      modalState.value = MODAL_STATE.QR_READY;
+
+      // 约定：后端限制40s内必须扫码，前端定30s后失效
+      overdueTimer = setTimeout(() => {
+        modalState.value = MODAL_STATE.QR_EXPIRED;
+      }, OVERDUE_TIME);
+    } else {
+      modalState.value = MODAL_STATE.QR_FAILED;
+    }
+  } catch (error) {
+    modalState.value = MODAL_STATE.QR_FAILED;
+  }
+};
+
+const clearStatusPollingTimer = () => {
+  if (statusPollingTimer) {
+    clearInterval(statusPollingTimer);
+    statusPollingTimer = null;
+  }
+};
+
+const startStatusPolling = () => {
+  clearStatusPollingTimer();
+  statusPollingTimer = setInterval(async () => {
+    if (modalState.value === MODAL_STATE.LOADING) {
+      await getAuthorizedStatus();
+    }
+  }, 2000);
+};
+
+const startLoading = async () => {
+  modalState.value = MODAL_STATE.LOADING;
+  progress.value = 0;
+  startFakeProgressPolling();
+  startStatusPolling();
+};
+
 const getAuthorizedStatus = async () => {
   const { code, data } = await getMediaAccountsAuthorizedStatus(id.value);
   if (code === 200) {
     const { status, message } = data;
     if (status !== 0) {
-      taskStep.value = TASK_STEP.end;
+      progress.value = 1;
-      isSuccess.value = status === 1;
+      clearFakeProgressTimer();
-      failReason.value = status === 2 ? message : '';
+      clearStatusPollingTimer();
-      isOverdue.value = false;
-    }
-  }
-};
 
-const startStatusPolling = () => {
+      if (status === 1) {
-  clearStatusPollingTimer();
+        modalState.value = MODAL_STATE.SUCCESS;
-  statusPollingTimer = setInterval(async () => {
+        // 这里可以根据实际业务逻辑判断是否需要显示昵称变更提示
-    if (taskStep.value === TASK_STEP.loading) {
+        // isNicknameChanged.value = true; // 示例：如果需要显示昵称变更
-      await getAuthorizedStatus();
+      } else {
-      if (taskStep.value === TASK_STEP.end) {
+        modalState.value = MODAL_STATE.FAILED;
-        progress.value = 1;
+        failReason.value = message || '';
-        clearFakeProgressTimer();
-        clearStatusPollingTimer();
-        emits('update');
       }
-    }
-  }, 2000);
-};
 
-const getAuthorizedQrCode = async () => {
+      emits('update');
-  try {
-    qrCodeLoading.value = true;
-    const { code, data } = await getAuthorizedImage(id.value);
-    if (code === 200) {
-      qrCodeUrl.value = data.image;
-      overdueTimer = null;
-      isOverdue.value = false;
-
-      // 约定：后端限制40s内必须扫码，前端定30s后失效
-      overdueTimer = setTimeout(() => {
-        isOverdue.value = true;
-      }, OVERDUE_TIME);
-    } else {
-      isFailLoadQrCode.value = true;
     }
-  } catch (error) {
-    isFailLoadQrCode.value = true;
-  } finally {
-    qrCodeLoading.value = false;
   }
 };
 
-const startLoading = async () => {
-  taskStep.value = TASK_STEP.loading;
-  progress.value = 0;
-  startFakeProgressPolling();
-  startStatusPolling();
-};
-
 const startFakeProgressPolling = () => {
   clearFakeProgressTimer();
   progressTimer = setInterval(() => {
-    if (taskStep.value === TASK_STEP.loading) {
+    if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
-      if (progress.value < 0.99) {
+      const step = Math.random() * 0.04 + 0.01;
-        const step = Math.random() * 0.04 + 0.01;
+      progress.value = Math.min(progress.value + step, 0.99);
-        progress.value = Math.min(progress.value + step, 0.99);
+      progress.value = Number(progress.value.toFixed(2));
-        progress.value = Number(progress.value.toFixed(2));
+    } else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
-      } else if (progress.value >= 0.99) {
+      progress.value = 0.99; // 卡在99%
-        progress.value = 0.99; // 卡在99%
-      }
     } else {
       clearFakeProgressTimer();
       clearStatusPollingTimer();
@@ -263,6 +276,7 @@ const clearFakeProgressTimer = () => {
     progressTimer = null;
   }
 };
+
 const clearOverdueTimer = () => {
   if (overdueTimer) {
     clearTimeout(overdueTimer);
@@ -270,52 +284,56 @@ const clearOverdueTimer = () => {
   }
 };
 
-const clearStatusPollingTimer = () => {
-  if (statusPollingTimer) {
-    clearInterval(statusPollingTimer);
-    statusPollingTimer = null;
-  }
-};
-
 // 重新扫码
 const handleRefreshQrCode = () => {
+  clearOverdueTimer();
   resetTaskFields();
   getAuthorizedQrCode();
 };
 
 const handleOk = () => {
-  if (taskStep.value === TASK_STEP.default) {
+  // 二维码已过期
-    if (isFailLoadQrCode.value) {
+  if (modalState.value === MODAL_STATE.QR_EXPIRED) {
-      handleRefreshQrCode();
+    AMessage.error('二维码已失效，请重新扫码');
-      return;
+    handleRefreshQrCode();
-    }
-
-    clearOverdueTimer();
-
-    if (!qrCodeUrl.value) {
-      AMessage.warning('二维码生成中，请稍等');
-      return;
-    }
-    if (isOverdue.value) {
-      AMessage.error('二维码已失效，请重新扫码');
-      return;
-    }
-
-    startLoading();
     return;
   }
 
-  if (taskStep.value === TASK_STEP.end) {
+  // 二维码还在加载中
+  if (modalState.value === MODAL_STATE.QR_LOADING) {
+    AMessage.warning('二维码生成中，请稍等');
+    return;
+  }
+
+  // 二维码生成失败
+  if (modalState.value === MODAL_STATE.QR_FAILED) {
+    handleRefreshQrCode();
+    return;
+  }
+
+  // 授权成功
+  if (modalState.value === MODAL_STATE.SUCCESS) {
     if (isNicknameChanged.value) {
       isNicknameChanged.value = false;
       console.log('确定覆盖');
+      // 这里可以添加覆盖逻辑
     } else {
-      if (isSuccess.value) {
+      close();
-        close();
-      } else {
-        handleRefreshQrCode();
-      }
     }
+    return;
+  }
+
+  // 授权失败，重新扫码
+  if (modalState.value === MODAL_STATE.FAILED) {
+    handleRefreshQrCode();
+    return;
+  }
+
+  // 二维码就绪，开始授权流程
+  if (modalState.value === MODAL_STATE.QR_READY) {
+    clearOverdueTimer();
+    startLoading();
+    return;
   }
 };
 

src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss

@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/status-box/index.vue

@@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
 
   .text {
     color: var(--BG-700, #737478);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/media-account/account-manage/index.vue

@@ -146,7 +146,7 @@ const dataSource = ref([]);
 const selectedItems = ref([]);
 const healthData = ref({});
 
-const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
+const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
 
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
@@ -159,23 +159,25 @@ const tipLabel = computed(() => {
   }
 
   const {
-    abnormal_number = 0,
+    total_abnormal_number = 0,
     login_invalid_number = 0,
     too_many_requests_number = 0,
     account_frozen_number = 0,
+    miss_data_number = 0,
   } = healthData.value;
 
   // 定义异常类型映射
   const abnormalTypes = [
     { count: login_invalid_number, label: 'cookie过期' },
-    { count: too_many_requests_number, label: '已请求频繁' },
+    { count: too_many_requests_number, label: '请求频繁' },
     { count: account_frozen_number, label: '账号被封' },
+    { count: miss_data_number, label: '数据缺失' },
   ];
 
   // 过滤出有异常的项并格式化
   const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
 
-  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
+  return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
 });
 
 onMounted(() => {

src/views/property-marketing/media-account/account-manage/style.scss

@@ -15,7 +15,7 @@
   .filter-wrap {
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -29,7 +29,7 @@
     border-radius: 2px;
     background: #f0edff;
     .label {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -60,7 +60,7 @@
       padding: 0;
       cursor: pointer;
       color: var(--Brand-Brand-6, #6d4cfe);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue

@@ -1,123 +1,160 @@
 <template>
-  <div>
+  <a-card :bordered="false" class="chart-container" ref="chartContainer">
-    <a-card :bordered="false" class="echart-item-card">
+    <template #title>
-      <template #title>
+      <span class="a-card-title">{{ title.name }}</span>
-        <span class="a-card-title">{{ title.name }}</span>
+      <a-popover position="tl">
-        <a-popover position="tl">
+        <icon-question-circle />
-          <icon-question-circle />
+        <template #content>
-          <template #content>
+          <p style="margin: 0">{{ title.popover }}</p>
-            <p style="margin: 0">{{ title.popover }}</p>
+        </template>
-          </template>
+      </a-popover>
-        </a-popover>
+    </template>
-      </template>
+    <NoData v-if="isChartEmpty" text="暂无数据" />
-      <div ref="chart" style="width: 100%; height: 450px"></div>
+
-    </a-card>
+    <div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
-  </div>
+  </a-card>
 </template>
 
-<script setup lang="ts">
+<script setup>
-import { defineProps, onMounted } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
-import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
 
 const props = defineProps({
-  title: {
+  chartData: Object,
-    type: Object,
+  title: Object,
-    default: {
+  height: {
-      name: '',
+    type: Number,
-      popover: '',
+    default: 300,
-    },
-  },
-  xAxisData: {
-    type: Array,
-    default: [],
-  },
-  seriesData: {
-    type: Array,
-    default: [],
   },
 });
 
-const chart = ref<HTMLElement | null>(null);
+const chartEl = ref(null);
-let chartInstance: echarts.ECharts | null = null;
+const chartContainer = ref(null);
+let chartInstance = null;
 
-const xAxisData = props.xAxisData;
+// 判断 series_data 是否为空或 undefined/null
-const seriesData = props.seriesData;
+const isChartEmpty = computed(() => {
+  const seriesData = props.chartData?.series_data;
+  return Array.isArray(seriesData) ? seriesData.length === 0 : !seriesData;
+});
 
+console.log(isChartEmpty, 'isChartEmpty');
+// 初始化图表
 const initChart = () => {
-  if (!chart.value) return;
+  if (!chartEl.value) return;
-  // 如果已有实例，就不重复初始化
+  chartInstance = echarts.init(chartEl.value);
-  if (chartInstance) {
+  updateChart();
-    chartInstance.dispose(chart.value);
+};
-  }
+// 更新图表数据
-  chartInstance = echarts.init(chart.value);
+const updateChart = () => {
-
+  if (!chartInstance) return;
+  const { date, series_data } = props.chartData;
   const option = {
     tooltip: {
       trigger: 'axis',
-      axisPointer: { type: 'cross' },
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
-      borderColor: '#ccc',
-      borderWidth: 1,
-      textStyle: { color: '#333' },
     },
     legend: {
-      type: 'scroll',
+      data: series_data.map((item) => item.name),
-      orient: 'horizontal',
-      top: 10, // 将图例位置调整到顶部
-      itemWidth: 10,
-      itemHeight: 10,
-      pageButtonItemGap: 5,
-      pageButtonStyle: { color: '#666' },
-      textStyle: { color: '#666' },
-      data: seriesData,
     },
     grid: {
-      top: 80, // 调整图表内容位置，避免与图例重叠
+      left: '3%',
-      left: 40,
+      right: '4%',
-      right: 40,
+      bottom: '15%',
-      bottom: 40,
+      top: '15%',
+      containLabel: true,
     },
     xAxis: {
       type: 'category',
-      data: xAxisData,
+      boundaryGap: false,
-      axisLabel: { color: '#666' },
+      data: date,
     },
     yAxis: {
       type: 'value',
-      axisLabel: { color: '#666' },
-      splitLine: { lineStyle: { type: 'dashed', color: '#eee' } },
     },
-    series: seriesData,
+    series: series_data.map((series) => ({
+      name: series.name,
+      type: 'line',
+      data: series.data,
+      itemStyle: {
+        color: series.color,
+      },
+      smooth: true,
+      symbolSize: 6,
+    })),
   };
 
-  chartInstance.setOption(option);
+  chartInstance.setOption(option, { notMerge: true });
 };
 
-watch(
+// 响应式调整大小
-  () => [props.xAxisData, props.seriesData],
+const resizeChart = () => {
-  ([newXAxis, newSeries]) => {
+  if (chartInstance) {
-    if (chartInstance) {
+    chartInstance.resize();
-      chartInstance.setOption({
+  }
-        xAxis: newXAxis,
+};
-        series: newSeries,
-      });
-    }
-  },
-  { deep: true },
-);
 
+// 初始化
 onMounted(() => {
   initChart();
+  window.addEventListener('resize', resizeChart);
 });
+
+// 清理
 onBeforeUnmount(() => {
   if (chartInstance) {
     chartInstance.dispose();
     chartInstance = null;
   }
+  window.removeEventListener('resize', resizeChart);
+});
+
+// 监听数据变化
+
+watchEffect(() => {
+  JSON.stringify(props.chartData); // 强制深度监听
+  initChart();
 });
 </script>
 
 <style scoped lang="scss">
-@import './style.scss';
+.chart-container {
+  position: relative;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 15px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  background: #fff;
+  margin-bottom: 20px;
+  width: 100%;
+  height: 50%;
+
+  border-radius: 10px;
+  margin-bottom: 24px;
+
+  :deep(.arco-card-header) {
+    border-bottom: none !important;
+  }
+
+  .a-card-title {
+    color: var(--Text-1, #211f24);
+    font-size: 16px;
+    font-family: PuHuiTi-Medium;
+    font-weight: 400;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+}
+
+.chart-title {
+  position: absolute;
+  top: 10px;
+  left: 20px;
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+
+.chart {
+  width: 100%;
+}
 </style>

src/views/property-marketing/put-account/account-dashboard/index.vue

@@ -8,26 +8,21 @@
 
       <div class="container px-24px">
         <div class="filter-row flex mb-20px">
-          <div class="filter-row-item flex items-center">
+          <div class="filter-row-item flex items-center" v-if="accountType == 2">
-            <span class="label">{{ accountType == 1 ? '账号名称' : '计划名称' }}</span>
+            <span class="label">计划名称</span>
             <a-space size="medium" class="w-240px">
-              <a-input v-model="query.names" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
+              <PlanSelect v-model="query.ids"></PlanSelect>
-                <template #prefix>
+            </a-space>
-                  <icon-search />
+          </div>
-                </template>
+          <div class="filter-row-item flex items-center">
-              </a-input>
+            <span class="label">账号名称</span>
+            <a-space size="medium" class="w-240px">
+              <AccountSelect v-model="query.placement_account_id"></AccountSelect>
             </a-space>
           </div>
           <div class="filter-row-item flex items-center">
             <span class="label">平台</span>
-            <a-select
+            <a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear>
-              v-model="query.platform"
-              class="w-150"
-              size="medium"
-              placeholder="全部"
-              allow-clear
-              @change="handleSearch"
-            >
               <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
                 >{{ item.label }}
               </a-option>
@@ -37,7 +32,7 @@
           <div class="filter-row-item flex items-center">
             <span class="label">运营人员</span>
             <a-space class="w-160px">
-              <OperatorSelect v-model="query.operator_id" :options="operators"  />
+              <OperatorSelect v-model="query.operator_id" :options="operators" />
             </a-space>
           </div>
         </div>
@@ -64,68 +59,14 @@
       </div>
     </div>
     <div class="table-wrap rounded-8px py-5px flex-1 flex flex-col" v-if="onLoading == false">
-      <a-row class="grid-demo" :gutter="24">
+      <a-row :gutter="[24, 24]">
-        <a-col :span="12">
+        <a-col v-for="(chart, key) in chartConfigs" :key="chart.dataKey" :span="12">
-          <EchartsItem
+          <div>
-            :xAxisData="xhlEcharts?.total_use_amount?.date"
+            <EchartsItem
-            :seriesData="xhlEcharts?.total_use_amount?.series_data"
+              :chartData="{ date: chart.date, series_data: chart.series_data }"
-            :title="{ name: '消耗量', popover: '消耗量' }"
+              :title="{ name: chart.title.name, popover: chart.title.popover }"
-          ></EchartsItem>
+            />
-        </a-col>
+          </div>
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.avg_conversion_cost?.date"
-            :seriesData="xhlEcharts?.avg_conversion_cost?.series_data"
-            :title="{ name: '展示量', popover: '展示量' }"
-          ></EchartsItem>
-        </a-col>
-      </a-row>
-      <a-row class="grid-demo" :gutter="24">
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.click_number?.date"
-            :seriesData="xhlEcharts?.click_number?.series_data"
-            :title="{ name: '点击量', popover: '点击量' }"
-          ></EchartsItem>
-        </a-col>
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.click_rate?.date"
-            :seriesData="xhlEcharts?.click_rate?.series_data"
-            :title="{ name: '点击率', popover: '点击率' }"
-          ></EchartsItem>
-        </a-col>
-      </a-row>
-      <a-row class="grid-demo" :gutter="24">
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.avg_click_cost?.date"
-            :seriesData="xhlEcharts?.avg_click_cost?.series_data"
-            :title="{ name: '平均点击成本', popover: '平均点击成本' }"
-          ></EchartsItem>
-        </a-col>
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.thousand_show_cost?.date"
-            :seriesData="xhlEcharts?.thousand_show_cost?.series_data"
-            :title="{ name: '千次展示成本', popover: '千次展示成本' }"
-          ></EchartsItem>
-        </a-col>
-      </a-row>
-      <a-row class="grid-demo" :gutter="24">
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.conversion_number?.date"
-            :seriesData="xhlEcharts?.conversion_number?.series_data"
-            :title="{ name: '转化数', popover: '转化数' }"
-          ></EchartsItem>
-        </a-col>
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.conversion_rate?.date"
-            :seriesData="xhlEcharts?.conversion_rate?.series_data"
-            :title="{ name: '转化率', popover: '转化率' }"
-          ></EchartsItem>
         </a-col>
       </a-row>
     </div>
@@ -135,12 +76,13 @@
 import EchartsItem from './components/echarts-item/index';
 import { PLATFORM_LIST } from '../common_constants';
 import {
-  getPlacementAccountsList,
   getPlacementAccountsTrend,
   getPlacementAccountProjectsTrend,
   fetchAccountOperators,
 } from '@/api/all/propertyMarketing';
 import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select/index.vue';
+import AccountSelect from '@/views/components/common/AccountSelect.vue';
+import PlanSelect from '@/views/components/common/PlanSelect.vue';
 
 const accountType = ref(1);
 
@@ -153,24 +95,39 @@ const getOperators = async () => {
   }
 };
 const query = reactive({
-  names: '',
   platform: '',
   operator_id: '',
   data_time: [],
+  ids: [],
+  placement_account_id: [],
 });
-const xhlEcharts = reactive({});
 const getAccountsTrends = async () => {
   const { code, data } = await getPlacementAccountsTrend(query);
   if (code === 200) {
-    Object.assign(xhlEcharts, data);
+    mergeChartData(data);
   }
   onLoading.value = false;
 };
 
+const handleTabClick = (value) => {
+  accountType.value = value;
+  handleSearch();
+};
+const mergeChartData = (apiResponse) => {
+  console.log(apiResponse, 'apiResponse');
+  chartConfigs.value = chartConfigs.value.map((config) => {
+    const apiItem = apiResponse[config.dataKey] || {};
+    return {
+      ...config,
+      date: Array.isArray(apiItem.date) ? [...apiItem.date] : [],
+      series_data: Array.isArray(apiItem.series_data) ? [...apiItem.series_data] : [],
+    };
+  });
+};
 const getAccountProjectsTrend = async () => {
   const { code, data } = await getPlacementAccountProjectsTrend(query);
   if (code === 200) {
-    Object.assign(xhlEcharts, data);
+    mergeChartData(data);
   }
   onLoading.value = false;
 };
@@ -182,25 +139,103 @@ const handleSearch = async () => {
     getAccountProjectsTrend();
   }
 };
-const handleReset = async () => {};
+const chartConfigs = ref([
+  {
+    dataKey: 'total_use_amount',
+    title: { name: '消耗量', popover: '广告投放期间已使用的预算总额，代表该账户的实际广告花费。' },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'show_number',
+    title: { name: '展示量', popover: '广告被用户看到的总次数，是衡量广告曝光覆盖的核心指标。' },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'click_number',
+    title: { name: '点击量', popover: '用户点击广告的次数，表示广告对用户产生了实际吸引。' },
+    date: [],
+    series_data: [],
+  },
+
+  {
+    dataKey: 'click_rate',
+    title: { name: '点击率', popover: '点击率（CTR）= 点击量 ÷ 展示量，衡量广告吸引力与内容质量。' },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'avg_click_cost',
+    title: {
+      name: '平均点击成本',
+      popover: '每次点击广告的平均花费（CPC），= 消耗量 ÷ 点击量。 ',
+      date: [],
+      series_data: [],
+    },
+  },
+  {
+    dataKey: 'thousand_show_cost',
+    title: { name: '千次展现费用', popover: '每千次展示带来的平均成本（CPM），= 消耗量 ÷ 展示量 × 1000。' },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'conversion_number',
+    title: { name: '转化数', popover: '用户完成设定行为（如注册、下单）的总次数，衡量广告实际效果。' },
+    date: [],
+    series_data: [],
+  },
+
+  {
+    dataKey: 'conversion_rate',
+    title: { name: '转化率', popover: '转化率（CVR）= 转化数 ÷ 点击量，代表广告引导行为转化的能力。' },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'avg_conversion_cost',
+    title: { name: '平均转化成本', popover: '每次转化所花费的平均广告费用（CPA），= 消耗量 ÷ 转化数。' },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'deep_conversion_number',
+    title: {
+      name: '深度转化数',
+      popover: '完成更高价值行为（如支付、留资等）的用户数量，是衡量广告质量的进阶指标。',
+    },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'deep_conversion_rate',
+    title: {
+      name: '深度转化率',
+      popover: '深度转化率 = 深度转化数 ÷ 点击量，用于评估优质转化的效率。',
+    },
+    date: [],
+    series_data: [],
+  },
+
+  {
+    dataKey: 'roi',
+    title: { name: '投资回报率', popover: 'ROI = 收益 ÷ 投入，衡量广告投放的整体经济回报情况。' },
+    date: [],
+    series_data: [],
+  },
+]);
+const handleReset = async () => {
+  query.platform = '';
+  query.operator_id = '';
+  query.ids = [];
+  query.placement_account_id = [];
+  handleSearch();
+};
 
 const operators = ref([]);
-const accountList = ref([]);
-const handleTabClick = (key) => {
-  handleSearch();
-};
-
-// 获取账户名称
-const getAccountList = async () => {
-  const { code, data } = await getPlacementAccountsList(query);
-  if (code === 200) {
-    accountList.value = data;
-  }
-};
-
 onMounted(() => {
   handleSearch();
-  getAccountList();
   getOperators();
 });
 </script>

src/views/property-marketing/put-account/account-dashboard/style.scss

@@ -28,7 +28,7 @@
 
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
 
@@ -74,6 +74,7 @@
       border-color: #d7d7d9;
       background-color: #fff;
       height: 32px;
+
       &:focus-within,
       &.arco-input-focus {
         background-color: var(--color-bg-2);
@@ -91,7 +92,7 @@
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/put-account/account-data/components/board-table/style.scss

@@ -9,7 +9,7 @@
 .account-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/put-account/account-data/components/filter-block/style.scss

@@ -21,7 +21,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss

@@ -10,7 +10,7 @@
     }
     .s1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -40,7 +40,7 @@
         .arco-pagination-jumper-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/views/property-marketing/put-account/account-data/components/plan-table/style.scss

@@ -9,7 +9,7 @@
 .plan-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;