Merge branch 'feature/v1.3_营销资产中台' of http://gogs.lvfunai.com:444/ai-team/lingji-work-fe into feature/v1.3_营销资产中台

src/api/all/propertyMarketing.ts

@@ -0,0 +1,97 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:34:56
+ */
+import Http from '@/api';
+
+// 媒体账号标签-列表
+export const fetchAccountTags = (params = {}) => {
+  return Http.get('/v1/media-account-tags/list', params);
+};
+
+// 媒体账号分组-列表
+export const fetchAccountGroups = (params = {}) => {
+  return Http.get('/v1/media-account-groups/list', params);
+};
+
+// 媒体运营人员分组-列表
+export const fetchAccountOperators = (params = {}) => {
+  return Http.get('/v1/media-account-operators/list', params);
+};
+
+// 媒体账号-分页
+export const getMediaAccounts = (params = {}) => {
+  return Http.get('/v1/media-accounts', params);
+};
+
+// 媒体账号-添加
+export const postMediaAccounts = (params = {}) => {
+  return Http.post('/v1/media-accounts', params);
+};
+
+// 媒体账号-详情
+export const getMediaAccountsDetail = (id: string) => {
+  return Http.get(`/v1/media-accounts/${id}`);
+};
+
+// 媒体账号-修改
+export const putMediaAccounts = (id: string) => {
+  return Http.put(`/v1/media-accounts/${id}`);
+};
+
+// 媒体账号-删除
+export const deleteMediaAccount = (id: string) => {
+  return Http.delete(`/v1/media-accounts/${id}`);
+};
+
+// 媒体账号-获取模板地址
+export const getTemplateUrl = (params = {}) => {
+  return Http.get('/v1/media-accounts/template', params);
+};
+
+// 媒体账号分组-分页
+export const getGroupList = (params = {}) => {
+  return Http.get('/v1/media-account-groups/list', params);
+};
+
+// 媒体账号分组 -添加
+export const postAccountGroups = (params = {}) => {
+  return Http.post('/v1/media-account-groups', params);
+};
+
+// 媒体账号分组-编辑
+export const putGroup = (params = {}) => {
+  const { id, ...rest } = params as { id: string; [key: string]: any };
+  return Http.put(`/v1/media-account-groups/${id}`, rest);
+};
+
+// 媒体账号分组-删除
+export const deleteGroup = (id: string) => {
+  return Http.delete(`/v1/media-account-groups/${id}`);
+};
+
+// 媒体账号标签-列表
+export const getTagsList = (params = {}) => {
+  return Http.get('/v1/media-account-tags/list', params);
+};
+
+// 媒体账号标签-添加
+export const postAccountTags = (params = {}) => {
+  return Http.post('/v1/media-account-tags', params);
+};
+
+// 媒体账号标签-修改
+export const putTag = (params = {}) => {
+  const { id, ...rest } = params as { id: string; [key: string]: any };
+  return Http.put(`/v1/media-account-tags/${id}`, rest);
+};
+
+// 媒体账号标签-删除
+export const deleteTag = (id: string) => {
+  return Http.delete(`/v1/media-account-tags/${id}`);
+};
+
+// 媒体账号-批量删除
+export const batchDeleteMediaAccounts = (params = {}) => {
+  return Http.delete(`/v1/media-accounts/batch`, params);
+};

src/api/index.ts

@@ -8,21 +8,20 @@
 
 import axios from 'axios';
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import { handleUserLogout } from '@/utils/user';
+import { handleUserLogout, goUserLogin } from '@/utils/user';
+import { useEnterpriseStore } from '@/stores/modules/enterprise';
+import pinia from '@/stores';
 
 const contentType = 'application/json';
 const requestTimeout = 30000;
 
-const HttpStatusCode = {
-  OK: 200,
-  BadRequest: 400, // 请求参数错误
-  Unauthorized: 401, // token 无效或过期
-  NotFound: 404,
-  InternalServerError: 500,
-};
-
-import { useEnterpriseStore } from '@/stores/modules/enterprise';
-import pinia from '@/stores';
+enum HttpStatusCode {
+  OK = 200,
+  BadRequest = 400, // 请求参数错误
+  Unauthorized = 401, // token 无效或过期
+  NotFound = 404,
+  InternalServerError = 500,
+}
 
 //* 导出Request类，可以用来自定义传递配置来创建实例
 export class Request {
@@ -70,9 +69,15 @@ export class Request {
         }
       },
       (err: any) => {
-        const message = err.response?.data?.message ?? err.message;
-        AMessage.error(message);
-        // 这里用来处理http常见错误，进行全局提示
+        const { message, code } = err.response?.data ?? {};
+        AMessage.error(message ?? err.message);
+
+        switch (code) {
+          case HttpStatusCode.Unauthorized:
+            goUserLogin();
+            break;
+        }
+
         return Promise.reject(err.response);
       },
     );

src/layouts/Basic.vue

@@ -91,7 +91,7 @@ provide('toggleDrawerMenu', () => {
         </a-drawer>
         <a-layout class="layout-content" :style="paddingStyle">
           <base-tab-bar v-if="appStore.tabBar" />
-          <a-layout-content class="px-5">
+          <a-layout-content class="px-5 py-5">
             <base-breadcrumb />
             <layout-page />
           </a-layout-content>

src/main.ts

@@ -1,14 +1,18 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-24 16:29:10
+ */
 import App from './App.vue';
 import router from './router';
 import store from './stores';
 import '@/api/index';
 
+import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
 import './styles';
 import './core';
 import 'uno.css';
 import './mock';
-import '@/styles/vars.css'; // 优先加载
-import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
+// import '@/styles/vars.css'; // 优先加载
 
 const app = createApp(App);
 app.use(store);

src/router/constants.ts

@@ -1,3 +1,7 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-24 16:50:35
+ */
 export const WHITE_LIST = [
   { name: 'notFound', children: [] },
   { name: 'login', children: [] },
@@ -20,6 +24,6 @@ export const DEFAULT_ROUTE = {
 export const MENU_GROUP_IDS = {
   DATA_ENGINE_ID: 1, // 全域数据分析
   MANAGEMENT_ID: -1, // 管理中心
-  PROPERTY_ID: 2, // 资产营销平台
+  PROPERTY_ID: 10, // 资产营销平台
   WORK_BENCH_ID: -99, // 工作台
 };

src/router/routes/modules/dataEngine.ts

@@ -27,6 +27,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '行业热门话题洞察',
           requiresAuth: true,
           roles: ['*'],
+          id: 2,
         },
         component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
       },
@@ -37,6 +38,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '行业词云',
           requiresAuth: true,
           roles: ['*'],
+          id: 3,
         },
         component: () => import('@/views/components/dataEngine/hotCloud.vue'),
       },
@@ -47,6 +49,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '行业关键词动向',
           requiresAuth: true,
           roles: ['*'],
+          id: 4,
         },
         component: () => import('@/views/components/dataEngine/keyWord.vue'),
       },
@@ -57,6 +60,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '用户痛点观察',
           requiresAuth: true,
           roles: ['*'],
+          id: 5,
         },
         component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
       },
@@ -67,6 +71,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '重点品牌动向',
           requiresAuth: true,
           roles: ['*'],
+          id: 6,
         },
         component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
       },
@@ -77,6 +82,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '用户画像',
           requiresAuth: true,
           roles: ['*'],
+          id: 7,
         },
         component: () => import('@/views/components/dataEngine/userPersona.vue'),
       },

src/router/routes/modules/propertyMarketing.ts

@@ -53,7 +53,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requiresAuth: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/repository/test'),
+        component: () => import('@/views/property-marketing/media-account/account-manage'),
       },
       {
         path: 'accountDashboard',
@@ -98,7 +98,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requiresAuth: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/repository/test'),
+        component: () => import('@/views/property-marketing/put-account/account-manage'),
       },
       {
         path: 'accountData',

src/styles/components/index.scss

@@ -0,0 +1 @@
+@import "./input.scss";

src/styles/components/input.scss

@@ -0,0 +1,5 @@
+.arco-input-wrapper {
+  border-radius: 4px;
+  border-color: #d7d7d9;
+  background-color: #fff;
+}

src/styles/index.ts

@@ -1,3 +1,4 @@
+import './vars.css';
+import './components/index.scss';
 import 'normalize.css';
 import 'uno.css';
-import './vars.css';

src/styles/vars.css

@@ -17,6 +17,10 @@
 * {
   box-sizing: border-box;
 }
+p {
+  margin: 0;
+  padding: 0;
+}
 
 .flex {
   display: flex;

src/views/property-marketing/component.scss

@@ -0,0 +1,48 @@
+.arco-input-wrapper,
+.arco-select-view-single,
+.arco-select-view-multiple {
+  border-radius: 4px;
+  border-color: #d7d7d9;
+  background-color: #fff;
+  &:focus-within,
+  &.arco-input-focus {
+    background-color: var(--color-bg-2);
+    border-color: rgb(var(--primary-6));
+    box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  }
+}
+.arco-modal {
+  .arco-modal-header {
+    border-bottom: none;
+    height: 56px;
+    padding: 22px 24px 16px 24px;
+    .arco-modal-title {
+      justify-content: flex-start;
+    }
+  }
+
+  .arco-modal-body {
+    padding: 24px 24px 20px;
+    .arco-form-item {
+      margin-bottom: 16px;
+      .arco-form-item-label {
+        color: var(--Text-1, #211f24);
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+      }
+    }
+    .cancel-btn {
+      border-radius: 4px;
+      border: 1px solid var(--BG-500, #b1b2b5);
+      background: var(--BG-white, #fff);
+    }
+  }
+
+  .arco-modal-footer {
+    border-top: none;
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,12 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 10:02:20
+-->
+
+<template></template>
+
+<script lang="ts"></script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,70 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:44:16
+-->
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:23:52
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isBatch ? '批量删除账号' : '删除账号'"
+    width="400px"
+    :footer="false"
+    modal-class="account-manage-modal"
+    @close="onClose"
+  >
+    <div class="flex items-center mb-24px">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ accountName }} 这个账号吗？</span>
+    </div>
+    <div class="text-right">
+      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
+        >确认删除</a-button
+      >
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const accountId = ref(null);
+const accountName = ref('');
+
+const isBatch = computed(() => Array.isArray(accountId.value));
+
+function onClose() {
+  visible.value = false;
+  accountId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  accountId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch ? batchDeleteMediaAccounts : deleteMediaAccount;
+  const { code } = await _fn(accountId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,109 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 15:31:15
+-->
+<template>
+  <div class="card-container">
+    <div v-for="(item, index) in dataSource" :key="index" class="card-item">
+      <a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
+      <div class="ml-8px flex-1">
+        <p class="name">{{ item.name }}</p>
+        <div class="field-row">
+          <span class="label">状态</span>
+          <div class="status-box" :class="`status-box-${item.status}`">
+            <span class="text">{{ STATUS_LIST.find((v) => v.value === item.status)?.label ?? '-' }}</span>
+          </div>
+        </div>
+        <div class="field-row">
+          <span class="label">平台</span>
+          <img :src="item.platform === 0 ? icon1 : icon2" width="20" height="19" />
+        </div>
+        <div class="field-row">
+          <span class="label">账号ID</span>
+          <span class="cts">{{ item.account_id }}</span>
+        </div>
+        <div class="field-row">
+          <span class="label">手机号码</span>
+          <span class="cts">{{ item.mobile }}</span>
+        </div>
+        <div class="field-row">
+          <span class="label">运营人员</span>
+          <span class="cts">{{ item.operator?.name }}</span>
+        </div>
+        <div class="field-row">
+          <span class="label">分组</span>
+          <span class="cts">{{ item.group?.name }}</span>
+        </div>
+        <div class="field-row">
+          <span class="label">标签</span>
+          <div class="flex items-center">
+            <div v-for="(tag, index) in item.tags" :key="index" class="tag-box">
+              <span class="text">{{ tag.name }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="operate-row">
+          <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
+          <a-button class="w-64px search-btn mr-8px" size="mini">
+            <template #default>暂停同步</template>
+          </a-button>
+          <a-button class="w-64px search-btn mr-8px" size="mini">
+            <template #default>重新授权</template>
+          </a-button>
+          <a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
+            <template #default>编辑</template>
+          </a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref, computed } from 'vue';
+import { STATUS_LIST } from '../../constants';
+
+import icon1 from '@/assets/img/media-account/icon-dy.png';
+import icon2 from '@/assets/img/media-account/icon-xhs.png';
+import icon3 from '@/assets/img/media-account/icon-delete.png';
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => [],
+  },
+  selectedItems: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
+
+// 判断当前 item 是否被选中
+const isSelected = (item) => {
+  return props.selectedItems.some((i) => i.id === item.id);
+};
+
+const toggleSelect = (item) => {
+  let newSelected;
+  if (isSelected(item)) {
+    newSelected = props.selectedItems.filter((i) => i.id !== item.id);
+  } else {
+    newSelected = [...props.selectedItems, item];
+  }
+  emits('selectionChange', newSelected);
+};
+
+const openEdit = (item) => {
+  emits('openEdit', item.id);
+};
+
+const openDelete = (item) => {
+  emits('delete', item);
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,103 @@
+.card-container {
+  flex: 1;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr); /* 2行 */
+  grid-template-columns: repeat(4, 1fr); /* 4列 */
+  gap: 20px;
+  .card-item {
+    border-radius: 8px;
+    border: 1px solid var(--BG-300, #e6e6e8);
+    background: var(--BG-white, #fff);
+    padding: 12px 16px 16px;
+    display: flex;
+    align-items: flex-start;
+    .name {
+      color: var(--Text-1, #211f24);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      margin-bottom: 11px;
+      // line-height: 22px; /* 157.143% */
+    }
+    .label {
+      color: var(--Text-3, #737478);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 166.667% */
+    }
+    .field-row {
+      width: 100%;
+      margin-bottom: 4px;
+      display: flex;
+      justify-content: space-between;
+      .cts {
+        color: var(--Text-2, #3c4043);
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 166.667% */
+      }
+      .status-box {
+        display: flex;
+        padding: 0px 8px;
+        align-items: center;
+        border-radius: 2px;
+        background: #f2f3f5;
+        .text {
+          color: var(--BG-700, #737478);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px; /* 166.667% */
+        }
+
+        &-1 {
+          background: #ebf7f2;
+          .text {
+            color: #25c883;
+          }
+        }
+        &-2 {
+          background: #ffe7e4;
+          .text {
+            color: #f64b31;
+          }
+        }
+      }
+      .tag-box {
+        display: flex;
+        height: 16px;
+        padding: 0px 4px;
+        align-items: center;
+        border-radius: 2px;
+        background: var(--BG-200, #f2f3f5);
+        .text {
+          color: var(--Text-2, #3c4043);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 10px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+        }
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+      }
+      &:last-child {
+        margin-bottom: 8px;
+      }
+    }
+
+    .operate-row {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-top: 8px;
+    }
+  }
+}

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

@@ -0,0 +1,282 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isEdit ? '编辑账号' : '添加账号'"
+    modal-class="add-account-modal"
+    :footer="false"
+    width="500px"
+    :mask-closable="false"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+      <a-form-item label="上传方式" required>
+        <a-radio-group v-model="uploadType">
+          <a-radio value="manual">手动添加账号</a-radio>
+          <a-radio value="batch">批量导入账号</a-radio>
+        </a-radio-group>
+      </a-form-item>
+
+      <!-- 批量导入账号模式下的内容 -->
+      <template v-if="isBatchImport">
+        <a-form-item label="账号文件" required>
+          <!-- 默认状态 -->
+          <div class="upload-block">
+            <template v-if="uploadStatus === 'default'">
+              <a-upload draggable :custom-request="handleUpload" />
+            </template>
+            <template v-else>
+              <div class="flex items-center">
+                <div
+                  class="flex items-center justify-between py-9px px-12px flex-1 import-row"
+                  :class="{
+                    error: uploadStatus === 'error',
+                  }"
+                >
+                  <div class="flex items-center">
+                    <icon-file size="16" />
+                    <span class="name ml-8px">{{ fileName }}</span>
+                  </div>
+                  <span v-if="uploadStatus === 'error'" class="upload-error" @click="retryUpload">点击重试</span>
+                </div>
+                <img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
+              </div>
+            </template>
+            <div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
+              <img :src="icon1" width="16" height="16" class="mr-4px" />
+              <span class="dt">下载账号导入模板.xlsx</span>
+            </div>
+          </div>
+        </a-form-item>
+      </template>
+
+      <!-- 手动添加账号 -->
+      <template v-else>
+        <a-form-item label="手机号" field="mobile" required>
+          <a-input v-model="form.mobile" placeholder="请输入..." size="large" />
+        </a-form-item>
+        <a-form-item label="运营人员" field="operator_name" required>
+          <a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
+        </a-form-item>
+        <a-form-item label="号码持有人" field="holder_name" required>
+          <a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
+        </a-form-item>
+        <a-form-item label="运营平台" required>
+          <a-radio-group v-model="form.platform">
+            <a-radio :value="0">抖音</a-radio>
+            <a-radio :value="1">小红书</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="选择分组">
+          <GroupSelect
+            v-model="form.group_id"
+            :multiple="false"
+            :options="groupOptions"
+            placeholder="请选择…"
+            size="large"
+          />
+        </a-form-item>
+        <a-form-item label="选择标签">
+          <TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
+        </a-form-item>
+      </template>
+
+      <div class="mt-24px text-right">
+        <a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
+        <a-button type="primary" size="large" @click="onSubmit">
+          {{ isBatchImport ? '确定导入' : '生成授权码' }}
+        </a-button>
+      </div>
+    </a-form>
+
+    <QrCodeModal ref="qrCodeModalRef" />
+    <ImportPromptModal ref="importPromptModalRef" />
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import TagSelect from '../tag-select';
+import GroupSelect from '../group-select';
+import QrCodeModal from '../qrCode-modal';
+import ImportPromptModal from '../import-prompt-modal';
+
+import {
+  fetchAccountTags,
+  fetchAccountGroups,
+  postMediaAccounts,
+  getMediaAccountsDetail,
+  putMediaAccounts,
+  getTemplateUrl,
+} from '@/api/all/propertyMarketing';
+
+import icon1 from '@/assets/img/media-account/icon-download.png';
+import icon2 from '@/assets/img/media-account/icon-delete.png';
+
+const groupOptions = ref([]);
+const tagOptions = ref([]);
+const visible = ref(false);
+const uploadType = ref('manual');
+const uploadStatus = ref('default');
+const id = ref('');
+const isEdit = ref(false);
+const fileName = ref('账号导入模板.xlsx');
+const formRef = ref();
+const qrCodeModalRef = ref(null);
+const importPromptModalRef = ref(null);
+const form = reactive({
+  mobile: '',
+  operator_name: '',
+  holder_name: '',
+  platform: 0,
+  group_id: '',
+  tag_ids: [],
+});
+
+const isBatchImport = computed(() => uploadType.value === 'batch');
+const confirmBtnText = computed(() => {
+  if (isBatchImport.value) return '确定导入';
+  return isEdit.value ? '确定' : '生成授权码';
+});
+
+const rules = {
+  mobile: [
+    {
+      required: true,
+      message: '请填写手机号',
+      trigger: ['blur', 'change'],
+    },
+    {
+      validator: (value, callback) => {
+        if (!/^1[3-9]\d{9}$/.test(value)) {
+          callback('手机号格式不正确');
+        } else {
+          callback();
+        }
+      },
+      trigger: ['blur', 'change'],
+    },
+  ],
+  operator_name: [{ required: true, message: '请输入运营人员' }],
+  holder_name: [{ required: true, message: '请输入号码持有人' }],
+};
+
+// 获取分组数据
+const getGroups = async () => {
+  try {
+    const { code, data } = await fetchAccountGroups();
+    if (code === 200) {
+      groupOptions.value = data;
+    }
+  } catch (error) {
+    console.error('获取分组列表失败:', error);
+  }
+};
+
+// 获取标签数据
+const getTags = async () => {
+  try {
+    const { code, data } = await fetchAccountTags();
+    if (code === 200) {
+      tagOptions.value = data;
+    }
+  } catch (error) {
+    console.error('获取标签列表失败:', error);
+  }
+};
+
+function handleUpload({ file, onSuccess, onError }) {
+  // 模拟上传
+  uploadStatus.value = 'error';
+}
+
+function removeFile() {
+  fileName.value = '';
+  uploadStatus.value = 'default';
+}
+
+function retryUpload() {
+  handleUpload();
+  // uploadStatus.value = 'default';
+}
+const reset = () => {
+  formRef.value.resetFields();
+  formRef.value.clearValidate();
+
+  fileName.value = '';
+  uploadStatus.value = 'default';
+  uploadType.value = 'manual';
+};
+function onClose() {
+  reset();
+  visible.value = false;
+}
+
+const open = (accountId = '') => {
+  id.value = accountId;
+  isEdit.value = !!accountId;
+  if (accountId) {
+    getAccountDetail();
+  }
+  getGroups();
+  getTags();
+
+  visible.value = true;
+};
+
+const getAccountDetail = async () => {
+  const { code, data } = await getMediaAccountsDetail(id.value);
+  if (code === 200) {
+    form.value = data;
+  }
+};
+
+const handleBatchImport = () => {
+  onClose();
+  importPromptModalRef.value.open();
+};
+
+async function onSubmit() {
+  if (isBatchImport.value) {
+    handleBatchImport();
+    return;
+  }
+
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const _fn = id.value ? putMediaAccounts : postMediaAccounts;
+      const _params = id.value ? { id: id.value, ...form.value } : form;
+      const { code } = await _fn(_params);
+      if (code === 200) {
+        AMessage.success(isEdit.value ? '修改成功' : '生成授权码成功');
+
+        if (isEdit.value) {
+          visible.value = false;
+        } else {
+          handleSuccess();
+        }
+      }
+    }
+  });
+}
+
+const handleSuccess = () => {
+  qrCodeModalRef.value.open();
+};
+
+const handleDownloadTemplate = async () => {
+  const { code, data } = await getTemplateUrl();
+  if (code === 200) {
+    window.open(data.url, '_blank');
+  }
+};
+
+// 对外暴露打开弹窗方法
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,63 @@
+@import "@/views/property-marketing/component.scss";
+.add-account-modal {
+  border-radius: 8px;
+  .w-240px {
+    width: 240px !important;
+  }
+  .arco-modal-body {
+    .upload-block {
+      width: 100%;
+      .dt {
+        color: var(--Brand-Brand-6, #6d4cfe);
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+      }
+      .import-row {
+        border-radius: 4px;
+        border: 1px solid var(--BG-400, #d7d7d9);
+        background: var(--BG-200, #f2f3f5);
+        .name {
+          color: var(--Text-1, #211f24);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+        &.error {
+          background: #ffe7e4;
+          color: #f64b31;
+          border: none;
+          .name {
+            color: #f64b31;
+          }
+        }
+      }
+      .arco-upload-drag {
+        height: 120px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .arco-icon {
+          margin-bottom: 16px;
+        }
+      }
+    }
+    .upload-dragger {
+      border: 1px dashed #d9d9d9;
+      padding: 24px 0;
+      text-align: center;
+      background: #fafafa;
+      cursor: pointer;
+    }
+    .upload-error {
+      color: #f53f3f;
+      margin-left: 8px;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,141 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <div class="container px-24px pt-12px pb-24px">
+    <div class="filter-row flex mb-20px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">账号名称/ID/手机号</span>
+        <a-space size="medium">
+          <a-input
+            v-model="query.search"
+            class="w-240px"
+            placeholder="请搜索..."
+            size="medium"
+            allow-clear
+            @change="handleSearch"
+          >
+            <template #prefix>
+              <icon-search />
+            </template>
+          </a-input>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">状态</span>
+        <a-space class="w-160px">
+          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.label">{{
+              item.label
+            }}</a-option>
+          </a-select>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">平台</span>
+        <a-space class="w-160px">
+          <a-select v-model="query.platform" 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>
+          </a-select>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">运营人员</span>
+        <a-space class="w-160px">
+          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
+              item.name
+            }}</a-option>
+          </a-select>
+        </a-space>
+      </div>
+    </div>
+    <div class="filter-row flex mb-20px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">分组</span>
+        <a-space class="w-200px">
+          <group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">标签</span>
+        <a-space class="w-320px">
+          <tag-select v-model="query.tag_ids" :options="tags" @change="handleSearch" />
+        </a-space>
+      </div>
+    </div>
+    <a-space class="flex items-center">
+      <a-button class="w-84px search-btn" size="medium" @click="handleSearch">
+        <template #icon>
+          <icon-search />
+        </template>
+        <template #default>搜索</template>
+      </a-button>
+      <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+        <template #icon>
+          <icon-refresh />
+        </template>
+        <template #default>重置</template>
+      </a-button>
+    </a-space>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, defineProps } from 'vue';
+import { fetchAccountTags, fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
+import TagSelect from '../tag-select/index.vue';
+import GroupSelect from '../group-select/index.vue';
+import {
+  INITIAL_QUERY,
+  PLATFORM_LIST,
+  STATUS_LIST,
+} from '@/views/property-marketing/media-account/account-manage/constants';
+
+const emits = defineEmits('onSearch', 'onReset');
+
+const query = ref(cloneDeep(INITIAL_QUERY));
+const tags = ref([]);
+const groups = ref([]);
+const operators = ref([]);
+
+const handleSearch = () => {
+  emits('onSearch', query);
+};
+const handleReset = () => {
+  query.value = cloneDeep(INITIAL_QUERY);
+  emits('onReset');
+};
+
+const getTags = async () => {
+  const { code, data } = await fetchAccountTags();
+  if (code === 200) {
+    tags.value = data;
+  }
+};
+const getGroups = async () => {
+  const { code, data } = await fetchAccountGroups();
+  if (code === 200) {
+    groups.value = data;
+  }
+};
+const getOperators = async () => {
+  const { code, data } = await fetchAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+
+onMounted(() => {
+  getTags();
+  getGroups();
+  getOperators();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,36 @@
+.container {
+  :deep(.arco-input-wrapper),
+  :deep(.arco-select-view-single),
+  :deep(.arco-select-view-multiple) {
+    border-radius: 4px;
+    border-color: #d7d7d9;
+    background-color: #fff;
+    &:focus-within,
+    &.arco-input-focus {
+      background-color: var(--color-bg-2);
+      border-color: rgb(var(--primary-6));
+      box-shadow: 0 0 0 0 var(--color-primary-light-2);
+    }
+  }
+  .filter-row {
+    .filter-row-item {
+      &:not(:last-child) {
+        margin-right: 24px;
+      }
+      .label {
+        margin-right: 8px;
+        color: #211f24;
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        flex-shrink: 0;
+        line-height: 22px; /* 157.143% */
+      }
+      :deep(.arco-space-item) {
+        width: 100%;
+      }
+    }
+  }
+  
+}

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue

@@ -0,0 +1,80 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 11:44:17
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isEdit ? '编辑分组' : '添加新分组'"
+    modal-class="account-manage-modal"
+    width="400px"
+    :footer="false"
+    @close="onClose"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+      <a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
+        <a-input v-model="form.name" placeholder="请输入…" />
+      </a-form-item>
+      <div class="text-right">
+        <a-button class="cancel-btn" @click="onClose">取消</a-button>
+        <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
+      </div>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const isEdit = ref(false);
+const formRef = ref();
+const form = ref({ name: '' });
+const groupId = ref('');
+
+const rules = {
+  name: [{ required: true, message: '请输入分组名称' }],
+};
+
+function resetForm() {
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+}
+
+function onClose() {
+  visible.value = false;
+  form.value.name = '';
+  groupId.value = '';
+  isEdit.value = false;
+  resetForm();
+}
+
+const open = (record = {}) => {
+  const { id = '', name = '' } = record;
+  groupId.value = id;
+  isEdit.value = !!id;
+  form.value.name = name;
+  visible.value = true;
+};
+
+async function onSubmit() {
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const _fn = isEdit.value ? putGroup : postAccountGroups;
+      const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
+      const { code } = await _fn(_params);
+      if (code === 200) {
+        AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
+        emits('success');
+        onClose();
+      }
+    }
+  });
+}
+
+defineExpose({ open });
+</script>

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 11:45:05
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="删除分组"
+    width="400px"
+    :footer="false"
+    modal-class="account-manage-modal"
+    @close="onClose"
+  >
+    <div class="flex items-center mb-24px">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
+    </div>
+    <div class="text-right">
+      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
+        >确认删除</a-button
+      >
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteGroup } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const groupId = ref('');
+const groupName = ref('');
+
+function onClose() {
+  visible.value = false;
+  groupId.value = '';
+  groupName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = '', name = '' } = record;
+  groupId.value = id;
+  groupName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deleteGroup(groupId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,185 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="900px"
+    modal-class="account-manage-modal"
+    :footer="false"
+    title="分组管理"
+    :mask-closable="false"
+    @close="close"
+  >
+    <template v-if="!list.length">
+      <div class="flex items-center justify-center flex-col">
+        <div class="w-120px h-120px flex items-center justify-center mb-32px">
+          <img :src="icon2" width="106" height="72" />
+        </div>
+        <span class="s1 mb-16px">暂无分组</span>
+        <a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
+          ><template #icon>
+            <img :src="icon3" width="16" height="16" />
+          </template>
+          <template #default>去添加</template>
+        </a-button>
+      </div>
+    </template>
+    <template v-else>
+      <a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
+        ><template #icon>
+          <img :src="icon3" width="16" height="16" />
+        </template>
+        <template #default>添加新分组</template>
+      </a-button>
+      <a-table
+        :columns="columns"
+        :data="list"
+        row-key="id"
+        :loading="loading"
+        :scroll="{ y: 500 }"
+        :pagination="false"
+        @change="onTableChange"
+      >
+        <template #action="{ record }">
+          <div class="flex items-center">
+            <img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
+            <a-button type="primary" @click="openEdit(record)">编辑</a-button>
+          </div>
+        </template>
+      </a-table>
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </template>
+
+    <AddGroup ref="addGroupRef" @success="getData" />
+    <DeleteGroup ref="deleteGroupRef" @success="getData" />
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { getGroupList } from '@/api/all/propertyMarketing';
+import AddGroup from './add-group.vue';
+import DeleteGroup from './delete-group.vue';
+
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+import icon2 from '@/assets/img/media-account/icon-empty.png';
+import icon3 from '@/assets/img/media-account/icon-add.png';
+
+const visible = ref(false);
+const isEdit = ref(false);
+const addGroupRef = ref(null);
+const deleteGroupRef = ref(null);
+
+const currentGroup = ref(null);
+
+const list = ref([]);
+const loading = ref(false);
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+
+const sortInfo = ref({
+  field: '',
+  direction: '',
+});
+
+const columns = [
+  { title: '分组名称', dataIndex: 'name' },
+  {
+    title: '创建人',
+    dataIndex: 'creator',
+    render: ({ record }) => record.creator?.name || '-',
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'created_at',
+    width: 160,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  { title: '操作', slotName: 'action', align: 'center', width: 120 },
+];
+
+function open() {
+  visible.value = true;
+  getData();
+}
+
+function openAdd() {
+  addGroupRef.value.open();
+}
+
+function openEdit(record) {
+  addGroupRef.value.open(record);
+}
+
+function openDelete(record) {
+  deleteGroupRef.value.open(record);
+}
+
+async function getData() {
+  try {
+    loading.value = true;
+    const { page, pageSize } = pageInfo;
+    const params = {
+      page,
+      pageSize,
+    };
+    if (sortInfo.value.field && sortInfo.value.direction) {
+      params.orderField = sortInfo.value.field;
+      params.orderType = sortInfo.value.direction === 'ascend' ? 'asc' : 'desc';
+    }
+    const { code, data } = await getGroupList(params);
+    if (code === 200) {
+      list.value = data.list;
+      pageInfo.total = data.total;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+const onTableChange = (pagination, filters, sorter) => {
+  if (sorter && sorter.field) {
+    sortInfo.value.field = sorter.field;
+    sortInfo.value.direction = sorter.order;
+  } else {
+    sortInfo.value.field = '';
+    sortInfo.value.direction = '';
+  }
+  getData();
+};
+
+const onPageChange = (current) => {
+  pageInfo.page = current;
+  getData();
+};
+const onPageSizeChange = (pageSize) => {
+  pageInfo.pageSize = pageSize;
+  pageInfo.page = 1;
+  getData();
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,62 @@
+@import '@/views/property-marketing/component.scss';
+
+.account-manage-modal {
+  border-radius: 8px;
+  .arco-modal-body {
+    .arco-btn {
+      .arco-btn-icon {
+        line-height: 16px;
+      }
+    }
+    .s1 {
+      color: var(--Text-3, #737478);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+      .arco-pagination {
+        .arco-pagination-list {
+          .arco-pagination-item {
+            border-radius: 4px;
+            border: 1px solid var(--BG-300, #e6e6e8);
+            &.arco-pagination-item-ellipsis {
+              border: none;
+            }
+
+            &.arco-pagination-item-active {
+              background-color: transparent;
+              border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+            }
+          }
+        }
+        .arco-pagination-jumper-prepend {
+          color: var(--Text-2, #3c4043);
+          text-align: right;
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+        .arco-select-view-single,
+        .arco-pagination-jumper-input {
+          border-radius: 4px;
+          border: 1px solid var(--BG-300, #e6e6e8);
+          background-color: #fff;
+        }
+      }
+    }
+  }
+  .danger-btn {
+    border: none !important;
+    background-color: #f64b31 !important;
+  }
+}

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

@@ -0,0 +1,64 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <a-select
+    v-model="selectedGroups"
+    :multiple="multiple"
+    size="medium"
+    :placeholder="placeholder"
+    allow-clear
+    @change="handleChange"
+  >
+    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
+      {{ item.name }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, String, Number],
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: '全部',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const selectedGroups = ref(props.multiple ? [] : '');
+
+// 监听外部传入的值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedGroups.value = newVal;
+  },
+  { immediate: true },
+);
+
+// 监听内部值变化，向外部发送更新
+watch(selectedGroups, (newVal) => {
+  emits('update:modelValue', newVal);
+});
+
+const handleChange = (value) => {
+  selectedGroups.value = value;
+  emits('change', value);
+};
+</script>

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

@@ -0,0 +1,51 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="480px"
+    title="导入提示"
+    modal-class="import-prompt-modal"
+    :footer="false"
+    :mask-closable="false"
+    @close="close"
+  >
+    <div class="flex flex-col items-center">
+      <div class="flex items-center">
+        <img :src="icon1" width="20" height="20" class="mr-12px" />
+        <span class="tip"> 账号已成功导入，当前为未授权状态。请前往卡片列表手动授权，完成授权后账号可正常使用。 </span>
+      </div>
+
+      <div class="mt-24px text-right w-100%">
+        <a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
+        <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose } from 'vue';
+
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const visible = ref(false);
+const open = () => {
+  visible.value = true;
+};
+const close = () => {
+  visible.value = false;
+};
+const handleOk = () => {
+  close();
+};
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,14 @@
+@import "@/views/property-marketing/component.scss";
+.import-prompt-modal {
+  border-radius: 8px;
+  .arco-modal-body {
+    .tip {
+      color: var(--Text-1, #211f24);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="480px"
+    title="添加账号"
+    modal-class="qrCode-modal"
+    :footer="false"
+    :mask-closable="false"
+    @close="close"
+  >
+    <div class="flex flex-col items-center">
+      <img src="" width="160" height="160" class="mb-16px" />
+      <span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+
+      <div class="mt-24px text-center">
+        <a-button type="primary" size="large" @click="handleOk"> 完成扫码 </a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose } from 'vue';
+
+const visible = ref(false);
+const open = () => {
+  visible.value = true;
+};
+const close = () => {
+  visible.value = false;
+};
+const handleOk = () => {
+  console.log('handleOk');
+};
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,19 @@
+.qrCode-modal {
+  border-radius: 8px;
+
+  .arco-modal-header {
+    border-bottom: none;
+    height: 56px;
+    padding: 22px 24px 16px 24px;
+    .arco-modal-title {
+      justify-content: flex-start;
+    }
+  }
+  .arco-modal-body {
+    padding: 20px 24px 20px;
+  }
+  .arco-modal-footer {
+    border-top: none;
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,64 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <a-select
+    v-model="selectedTags"
+    :multiple="multiple"
+    size="medium"
+    :placeholder="placeholder"
+    allow-clear
+    @change="handleChange"
+  >
+    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
+      {{ item.name }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, String, Number],
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: '全部',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const selectedTags = ref(props.multiple ? [] : '');
+
+// 监听外部传入的值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedTags.value = newVal;
+  },
+  { immediate: true },
+);
+
+// 监听内部值变化，向外部发送更新
+watch(selectedTags, (newVal) => {
+  emits('update:modelValue', newVal);
+});
+
+const handleChange = (value) => {
+  selectedTags.value = value;
+  emits('change', value);
+};
+</script>

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue

@@ -0,0 +1,80 @@
+<!--
+ * @Author: AI
+ * @Date: 2025-06-27
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isEdit ? '编辑标签' : '添加新标签'"
+    modal-class="tags-manage-modal"
+    width="400px"
+    :footer="false"
+    @close="onClose"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+      <a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
+        <a-input v-model="form.name" placeholder="请输入…" />
+      </a-form-item>
+      <div class="text-right">
+        <a-button class="cancel-btn" @click="onClose">取消</a-button>
+        <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
+      </div>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue';
+import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const isEdit = ref(false);
+const formRef = ref();
+const form = ref({ name: '' });
+const tagId = ref('');
+
+const rules = {
+  name: [{ required: true, message: '请输入标签名称' }],
+};
+
+function resetForm() {
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+}
+
+function onClose() {
+  visible.value = false;
+  form.value.name = '';
+  tagId.value = '';
+  isEdit.value = false;
+  resetForm();
+}
+
+const open = (record = {}) => {
+  const { id = '', name = '' } = record;
+  tagId.value = id;
+  isEdit.value = !!id;
+  form.value.name = name;
+  visible.value = true;
+};
+
+async function onSubmit() {
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const _fn = isEdit.value ? putTag : postAccountTags;
+      const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
+      const { code } = await _fn(_params);
+      if (code === 200) {
+        AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
+        emits('success');
+        onClose();
+      }
+    }
+  });
+}
+
+defineExpose({ open });
+</script>

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:23:52
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="删除标签"
+    width="400px"
+    :footer="false"
+    modal-class="account-manage-modal"
+    @close="onClose"
+  >
+    <div class="flex items-center mb-24px">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 "{{ tagName }}" 这个标签吗？</span>
+    </div>
+    <div class="text-right">
+      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
+        >确认删除</a-button
+      >
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteTag } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const tagId = ref('');
+const tagName = ref('');
+
+function onClose() {
+  visible.value = false;
+  tagId.value = '';
+  tagName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = '', name = '' } = record;
+  tagId.value = id;
+  tagName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deleteTag(tagId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,137 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:58:28
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="800px"
+    modal-class="tags-manage-modal"
+    :footer="false"
+    :mask-closable="false"
+    @close="close"
+  >
+    <template #title>标签管理</template>
+    <template v-if="!list.length">
+      <div class="flex items-center justify-center flex-col">
+        <div class="w-120px h-120px flex items-center justify-center mb-32px">
+          <img :src="iconEmpty" width="106" height="72" />
+        </div>
+        <span class="s1 mb-16px">暂无标签</span>
+        <a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
+          <template #icon>
+            <img :src="iconAdd" width="16" height="16" />
+          </template>
+          <template #default>去添加</template>
+        </a-button>
+      </div>
+    </template>
+    <template v-else>
+      <a-button type="primary" size="medium" @click="openAdd">
+        <template #icon>
+          <img :src="iconAdd" width="16" height="16" />
+        </template>
+        <template #default>添加新标签</template>
+      </a-button>
+      <div class="tag-list">
+        <a-tooltip v-for="tag in list" :key="tag.id" content="双击修改标签名">
+          <div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
+            <span>{{ tag.name }}</span>
+            <img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
+          </div>
+        </a-tooltip>
+      </div>
+    </template>
+    <AddTag ref="addTagRef" @success="getData" />
+    <DeleteTag ref="deleteTagRef" @success="getData" />
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { getTagsList } from '@/api/all/propertyMarketing';
+
+import AddTag from './add-tag.vue';
+import DeleteTag from './delete-tag.vue';
+
+import iconAdd from '@/assets/img/media-account/icon-add.png';
+import iconEmpty from '@/assets/img/media-account/icon-empty.png';
+import iconDelete from '@/assets/img/media-account/icon-delete-1.png';
+
+const visible = ref(false);
+const list = ref([]);
+const addTagRef = ref(null);
+const deleteTagRef = ref(null);
+
+const getData = async () => {
+  list.value = [
+    { id: 1, name: '测试1' },
+    { id: 2, name: '测试2' },
+    { id: 3, name: '测试3' },
+    { id: 4, name: '测试4' },
+    { id: 5, name: '测试5' },
+    { id: 6, name: '测试6' },
+    { id: 7, name: '测试7' },
+    { id: 8, name: '测试8' },
+    { id: 9, name: '测试9' },
+    { id: 10, name: '测试10' },
+  ];
+  // const { code, data } = await getTagsList();
+  // if (code === 200) list.value = data.list;
+};
+
+const open = () => {
+  visible.value = true;
+  getData();
+};
+const close = () => {
+  visible.value = false;
+};
+const openAdd = () => {
+  // 打开新增标签弹窗
+  addTagRef.value.open();
+};
+
+function openEdit(record) {
+  addTagRef.value.open(record);
+}
+
+function openDelete(record) {
+  deleteTagRef.value.open(record);
+}
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-top: 16px;
+  .tag-item {
+    display: flex;
+    align-items: center;
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 4px 12px;
+    position: relative;
+    .delete-icon {
+      position: absolute;
+      z-index: 1;
+      top: -6px;
+      right: -6px;
+      cursor: pointer;
+      width: 12px;
+      height: 12px;
+      display: none;
+    }
+    &:hover {
+      .delete-icon {
+        display: block;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,42 @@
+@import '@/views/property-marketing/component.scss';
+
+.tags-manage-modal {
+  border-radius: 8px;
+
+  .arco-modal-body {
+    padding: 24px 24px 44px !important;
+    max-height: 304px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    .arco-btn {
+      width: fit-content;
+      .arco-btn-icon {
+        line-height: 16px;
+      }
+    }
+    .tag-list {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-wrap: wrap;
+      .tag-item {
+        display: flex;
+        height: 32px;
+        padding: 0px 8px;
+        align-items: center;
+        border-radius: 2px;
+        background: var(--BG-200, #f2f3f5);
+        gap: 12px;
+        .text {
+          color: var(--Text-2, #3c4043);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+      }
+    }
+  }
+}

src/views/property-marketing/media-account/account-manage/constants.ts

@@ -0,0 +1,38 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 15:24:59
+ */
+export const INITIAL_QUERY = {
+  search: '',
+  status: '',
+  platform: '',
+  operator_id: '',
+  group_ids: [],
+  tag_ids: [],
+};
+
+export const PLATFORM_LIST = [
+  {
+    label: '抖音',
+    value: 0,
+  },
+  {
+    label: '小红书',
+    value: 1,
+  },
+];
+
+export const STATUS_LIST = [
+  {
+    label: '未授权',
+    value: 0,
+  },
+  {
+    label: '正常',
+    value: 1,
+  },
+  {
+    label: '异常',
+    value: 2,
+  },
+];

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

@@ -0,0 +1,273 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 10:00:50
+-->
+<template>
+  <div class="account-manage-wrap">
+    <div class="filter-wrap bg-#fff border-radius-8px">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
+        <p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
+        <div class="flex items-center">
+          <a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenTagsModal">
+            <template #icon>
+              <img :src="icon3" width="16" height="16" />
+            </template>
+            <template #default>标签管理</template>
+          </a-button>
+          <a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenGroupModal">
+            <template #icon>
+              <img :src="icon2" width="16" height="16" />
+            </template>
+            <template #default>分组管理</template>
+          </a-button>
+          <a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
+            <template #icon>
+              <img :src="icon1" width="16" height="16" />
+            </template>
+            <template #default>添加账号</template>
+          </a-button>
+        </div>
+      </div>
+      <FilterBlock @onSearch="handleSearch" @onReset="handleReset" />
+    </div>
+
+    <div
+      class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
+      :class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
+    >
+      <div class="flex items-center">
+        <div class="flex items-center">
+          <template v-if="selectedItems.length > 0">
+            <a-checkbox
+              :model-value="checkedAll"
+              :indeterminate="indeterminate"
+              class="mr-8px"
+              @change="handleChangeAll"
+            />
+            <span class="label mr-24px">
+              已选
+              <span class="color-#6D4CFE">{{ selectedItems.length }}</span>
+              个账号
+            </span>
+
+            <span class="operation-btn" @click="handleBatchTag">批量标签</span>
+            <span class="operation-btn" @click="handleBatchGroup">批量分组</span>
+            <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
+          </template>
+          <template v-else>
+            <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
+            <span class="label">
+              {{
+                isNormalStatus
+                  ? '太棒啦！所有账号都在正常运行。'
+                  : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
+              }}
+            </span>
+          </template>
+        </div>
+      </div>
+
+      <template v-if="selectedItems.length > 0">
+        <img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
+      </template>
+      <div v-else>
+        <a-space v-if="isAbnormalStatus" class="flex items-center">
+          <a-button class="w-96px err-btn" size="mini">
+            <template #default>查看异常账号</template>
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+    <div class="card-wrap">
+      <AccountTable
+        :dataSource="dataSource"
+        :selectedItems="selectedItems"
+        @selectionChange="handleSelectionChange"
+        @delete="handleDelete"
+      />
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+
+    <GroupManageModal ref="groupManageModalRef" />
+    <TagsManageModal ref="tagsManageModalRef" />
+    <AddAccountModal ref="addAccountModalRef" />
+    <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import FilterBlock from './components/filter-block';
+import AccountTable from './components/account-table';
+import GroupManageModal from './components/group-manage-modal';
+import TagsManageModal from './components/tags-manage-modal';
+import AddAccountModal from './components/add-account-modal';
+import DeleteAccountModal from './components/account-table/delete-account';
+
+import { INITIAL_QUERY } from './constants';
+import { getMediaAccounts } from '@/api/all/propertyMarketing';
+
+import icon1 from '@/assets/img/media-account/icon-add.png';
+import icon2 from '@/assets/img/media-account/icon-group.png';
+import icon3 from '@/assets/img/media-account/icon-tag.png';
+import icon4 from '@/assets/img/media-account/icon-success.png';
+import icon5 from '@/assets/img/media-account/icon-warn.png';
+import icon6 from '@/assets/img/media-account/icon-close.png';
+
+const groupManageModalRef = ref(null);
+const tagsManageModalRef = ref(null);
+const addAccountModalRef = ref(null);
+const deleteAccountRef = ref(null);
+
+const tipStatus = ref(2);
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 100,
+});
+const query = ref(cloneDeep(INITIAL_QUERY));
+const dataSource = ref([]);
+const selectedItems = ref([]);
+
+const isNormalStatus = computed(() => tipStatus.value === 1);
+const isAbnormalStatus = computed(() => tipStatus.value === 2);
+const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
+const indeterminate = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
+);
+
+onMounted(() => {
+  getData();
+});
+
+const getData = async () => {
+  // const { page, pageSize } = pageInfo;
+  // const { code, data, total } = await getMediaAccounts({
+  //   page,
+  //   page_size: pageSize,
+  //   ...query.value,
+  // });
+  // if (code === 200) {
+  //   dataSource.value = data.data;
+  //   pageInfo.total = total;
+  // }
+  dataSource.value = [
+    {
+      id: 1,
+      name: '全球',
+      account_id: 1,
+      mobile: 1777777,
+      status: 1,
+      platform: 0,
+      operator: {
+        name: '小周',
+      },
+      group: {
+        name: '美团组',
+      },
+      tags: [
+        {
+          name: '标签1',
+        },
+        {
+          name: '标签2',
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: '全球2',
+      account_id: 1,
+      mobile: 1777777,
+      status: 1,
+      platform: 0,
+      operator: {
+        name: '小周',
+      },
+      group: {
+        name: '美团组',
+      },
+      tags: [
+        {
+          name: '标签1',
+        },
+        {
+          name: '标签2',
+        },
+      ],
+    },
+  ];
+};
+const handleSearch = (newQuery) => {
+  query.value = { ...newQuery };
+  getData();
+};
+const handleReset = () => {
+  query.value = cloneDeep(INITIAL_QUERY);
+  getData();
+};
+
+const onPageChange = (current) => {
+  pageInfo.page = current;
+  getData();
+};
+const onPageSizeChange = (pageSize) => {
+  pageInfo.pageSize = pageSize;
+  pageInfo.page = 1;
+  getData();
+};
+
+const handleOpenGroupModal = () => {
+  groupManageModalRef.value?.open();
+};
+const handleOpenTagsModal = () => {
+  tagsManageModalRef.value?.open();
+};
+const handleOpenAccountModal = () => {
+  addAccountModalRef.value?.open();
+};
+
+const handleOpenEdit = (item) => {
+  addAccountModalRef.value?.open(item.id);
+};
+
+const handleSelectionChange = (val) => {
+  selectedItems.value = val;
+};
+const handleChangeAll = (val) => {
+  if (val) {
+    selectedItems.value = cloneDeep(dataSource.value);
+  } else {
+    selectedItems.value = [];
+  }
+};
+const handleBatchDelete = () => {
+  const ids = selectedItems.value.map((item) => item.id);
+  const names = selectedItems.value.map((item) => `“${item.name}”`).join(',');
+  deleteAccountRef.value?.open({ id: ids, name: names });
+};
+const handleDelete = (item) => {
+  const { id, name } = item;
+  deleteAccountRef.value?.open({ id, name: `“${name}”` });
+};
+const handleCloseTip = () => {
+  selectedItems.value = [];
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,122 @@
+.account-manage-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  :deep(.search-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+  .filter-wrap {
+    border-radius: 8px;
+    border: 1px solid #e6e6e8;
+    .top {
+      .title {
+        font-family: 'Alibaba PuHuiTi';
+        font-style: normal;
+      }
+      :deep(.arco-btn) {
+        .arco-btn-icon {
+          line-height: 16px;
+        }
+      }
+    }
+  }
+  .tip-row {
+    border-radius: 2px;
+    background: #f0edff;
+    .label {
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.normal {
+      background: #ebf7f2;
+      .label {
+        color: #211f24;
+      }
+    }
+    &.abnormal {
+      background: #ffe7e4;
+      .label {
+        color: #211f24;
+      }
+    }
+    .err-btn {
+      background-color: #f64b31 !important;
+      color: var(--BG-white, #fff);
+      font-family: 'PingFang SC';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 166.667% */
+    }
+    .operation-btn {
+      padding: 0;
+      cursor: pointer;
+      color: var(--Brand-Brand-6, #6d4cfe);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &.red {
+        color: #F64B31;
+      }
+    }
+  }
+  .card-wrap {
+    display: flex;
+    flex-direction: column;
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+      :deep(.arco-pagination) {
+        .arco-pagination-list {
+          .arco-pagination-item {
+            border-radius: 4px;
+            border: 1px solid var(--BG-300, #e6e6e8);
+            &.arco-pagination-item-ellipsis {
+              border: none;
+            }
+
+            &.arco-pagination-item-active {
+              background-color: transparent;
+              border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+            }
+          }
+        }
+        .arco-pagination-jumper-input {
+          border-radius: 4px;
+          border: 1px solid var(--BG-300, #e6e6e8);
+        }
+        .arco-pagination-jumper-prepend {
+          color: var(--Text-2, #3c4043);
+          text-align: right;
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+        .arco-select-view-single {
+          border-radius: 4px;
+          border: 1px solid var(--BG-300, #e6e6e8);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 15:31:15
+-->
+<template>
+  <div class="card-container">
+    <div v-for="(item, index) in dataSource" :key="index" class="card-item">
+      <a-checkbox></a-checkbox>
+      <div class="ml-8px flex-1">
+        <p class="name">{{ item.name }}</p>
+        <div class="field-row">
+          <span class="label">状态</span>
+          <div class="status-box" :class="`status-box-${item.status}`">
+            <span class="text">{{ STATUS_LIST.find((v) => v.value === item.status)?.label ?? '-' }}</span>
+          </div>
+        </div>
+        <div class="field-row">
+          <span class="label">平台</span>
+          <img :src="item.platform === 0 ? icon1 : icon2" width="20" height="19" />
+        </div>
+        <div class="field-row">
+          <span class="label">账号ID</span>
+          <span class="cts">{{ item.account_id }}</span>
+        </div>
+        <div class="field-row">
+          <span class="label">手机号码</span>
+          <span class="cts">{{ item.mobile }}</span>
+        </div>
+        <div class="field-row">
+          <span class="label">运营人员</span>
+          <span class="cts">{{ item.operator?.name }}</span>
+        </div>
+        <div class="field-row">
+          <span class="label">分组</span>
+          <span class="cts">{{ item.group?.name }}</span>
+        </div>
+        <div class="field-row">
+          <span class="label">标签</span>
+          <div class="flex items-center">
+            <div v-for="(tag, index) in item.tags" :key="index" class="tag-box">
+              <span class="text">{{ tag.name }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="operate-row">
+          <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" />
+          <a-button class="w-64px search-btn mr-8px" size="mini">
+            <template #default>暂停同步</template>
+          </a-button>
+          <a-button class="w-64px search-btn mr-8px" size="mini">
+            <template #default>获取凭证</template>
+          </a-button>
+          <a-button class="w-40px search-btn" size="mini">
+            <template #default>编辑</template>
+          </a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import { STATUS_LIST } from '../../constants';
+
+import icon1 from '@/assets/img/media-account/icon-dy.png';
+import icon2 from '@/assets/img/media-account/icon-xhs.png';
+import icon3 from '@/assets/img/media-account/icon-delete.png';
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,103 @@
+.card-container {
+  flex: 1;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr); /* 2行 */
+  grid-template-columns: repeat(4, 1fr); /* 4列 */
+  gap: 20px;
+  .card-item {
+    border-radius: 8px;
+    border: 1px solid var(--BG-300, #e6e6e8);
+    background: var(--BG-white, #fff);
+    padding: 12px 16px 16px;
+    display: flex;
+    align-items: flex-start;
+    .name {
+      color: var(--Text-1, #211f24);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      margin-bottom: 11px;
+      // line-height: 22px; /* 157.143% */
+    }
+    .label {
+      color: var(--Text-3, #737478);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 166.667% */
+    }
+    .field-row {
+      width: 100%;
+      margin-bottom: 4px;
+      display: flex;
+      justify-content: space-between;
+      .cts {
+        color: var(--Text-2, #3c4043);
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 166.667% */
+      }
+      .status-box {
+        display: flex;
+        padding: 0px 8px;
+        align-items: center;
+        border-radius: 2px;
+        background: #f2f3f5;
+        .text {
+          color: var(--BG-700, #737478);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px; /* 166.667% */
+        }
+
+        &-1 {
+          background: #ebf7f2;
+          .text {
+            color: #25c883;
+          }
+        }
+        &-2 {
+          background: #ffe7e4;
+          .text {
+            color: #f64b31;
+          }
+        }
+      }
+      .tag-box {
+        display: flex;
+        height: 16px;
+        padding: 0px 4px;
+        align-items: center;
+        border-radius: 2px;
+        background: var(--BG-200, #f2f3f5);
+        .text {
+          color: var(--Text-2, #3c4043);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 10px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+        }
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+      }
+      &:last-child {
+        margin-bottom: 8px;
+      }
+    }
+
+    .operate-row {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-top: 8px;
+    }
+  }
+}

src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue

@@ -0,0 +1,94 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <div class="container px-24px pt-12px pb-24px">
+    <div class="filter-row flex mb-20px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">账号名称/ID/手机号</span>
+        <a-space size="medium">
+          <a-input
+            v-model="query.search"
+            class="w-240px"
+            placeholder="请搜索..."
+            size="medium"
+            allow-clear
+            @change="handleSearch"
+          >
+            <template #prefix>
+              <icon-search />
+            </template>
+          </a-input>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">状态</span>
+        <a-space class="w-160px">
+          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.label">{{
+              item.label
+            }}</a-option>
+          </a-select>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">平台</span>
+        <a-space class="w-160px">
+          <a-select v-model="query.platform" 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>
+          </a-select>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">运营人员</span>
+        <a-space class="w-160px">
+          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+            <a-option value="Beijing" label="Beijing">Beijing</a-option>
+          </a-select>
+        </a-space>
+      </div>
+    </div>
+    <a-space class="flex items-center">
+      <a-button class="w-84px search-btn" size="medium" @click="handleSearch">
+        <template #icon>
+          <icon-search />
+        </template>
+        <template #default>搜索</template>
+      </a-button>
+      <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+        <template #icon>
+          <icon-refresh />
+        </template>
+        <template #default>重置</template>
+      </a-button>
+    </a-space>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, defineProps } from 'vue';
+import {
+  INITIAL_QUERY,
+  PLATFORM_LIST,
+  STATUS_LIST,
+} from '@/views/property-marketing/media-account/account-manage/constants';
+
+const emits = defineEmits('onSearch', 'onReset');
+
+const query = ref(cloneDeep(INITIAL_QUERY));
+
+const handleSearch = () => {
+  emits('onSearch', query);
+};
+const handleReset = () => {
+  query.value = cloneDeep(INITIAL_QUERY);
+  emits('onReset');
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,36 @@
+.container {
+  :deep(.arco-input-wrapper),
+  :deep(.arco-select-view-single),
+  :deep(.arco-select-view-multiple) {
+    border-radius: 4px;
+    border-color: #d7d7d9;
+    background-color: #fff;
+    &:focus-within,
+    &.arco-input-focus {
+      background-color: var(--color-bg-2);
+      border-color: rgb(var(--primary-6));
+      box-shadow: 0 0 0 0 var(--color-primary-light-2);
+    }
+  }
+  .filter-row {
+    .filter-row-item {
+      &:not(:last-child) {
+        margin-right: 24px;
+      }
+      .label {
+        margin-right: 8px;
+        color: #211f24;
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        flex-shrink: 0;
+        line-height: 22px; /* 157.143% */
+      }
+      :deep(.arco-space-item) {
+        width: 100%;
+      }
+    }
+  }
+  
+}

src/views/property-marketing/put-account/account-manage/constants.ts

@@ -0,0 +1,36 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 15:24:59
+ */
+export const INITIAL_QUERY = {
+  search: '',
+  status: '',
+  platform: '',
+  operator_id: '',
+};
+
+export const PLATFORM_LIST = [
+  {
+    label: '抖音',
+    value: 0,
+  },
+  {
+    label: '小红书',
+    value: 1,
+  },
+];
+
+export const STATUS_LIST = [
+  {
+    label: '未授权',
+    value: 0,
+  },
+  {
+    label: '正常',
+    value: 1,
+  },
+  {
+    label: '异常',
+    value: 2,
+  },
+];

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

@@ -0,0 +1,143 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 10:00:50
+-->
+<template>
+  <div class="account-manage-wrap">
+    <div class="filter-wrap bg-#fff border-radius-8px">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
+        <p class="text-18px font-400 lh-26px color-#211F24 title">账户管理</p>
+        <div class="flex items-center">
+          <a-button type="primary" class="w-139px search-btn" size="medium">
+            <template #icon>
+              <img :src="icon1" width="16" height="16" />
+            </template>
+            <template #default>添加投放账号</template>
+          </a-button>
+        </div>
+      </div>
+      <FilterBlock @onSearch="handleSearch" @onReset="handleReset" />
+    </div>
+
+    <div
+      class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
+      :class="{
+        normal: isNormalStatus,
+        abnormal: isAbnormalStatus,
+      }"
+    >
+      <div class="flex items-center">
+        <template v-if="isNormalStatus || isAbnormalStatus">
+          <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
+          <span class="label">
+            {{
+              isNormalStatus
+                ? '太棒啦！所有账号都在正常运行。'
+                : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
+            }}
+          </span>
+        </template>
+      </div>
+      <div>
+        <a-space v-if="isAbnormalStatus" class="flex items-center">
+          <a-button class="w-96px err-btn" size="mini">
+            <template #default>查看异常账号</template>
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+    <div class="card-wrap">
+      <AccountTable :dataSource="dataSource" />
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import FilterBlock from './components/filter-block';
+import AccountTable from './components/account-table';
+import { INITIAL_QUERY } from './constants';
+
+import icon1 from '@/assets/img/media-account/icon-add.png';
+import icon4 from '@/assets/img/media-account/icon-success.png';
+import icon5 from '@/assets/img/media-account/icon-warn.png';
+
+const tipStatus = ref(2);
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 100,
+});
+
+const query = ref(cloneDeep(INITIAL_QUERY));
+const dataSource = ref([]);
+
+const isNormalStatus = computed(() => tipStatus.value === 1);
+const isAbnormalStatus = computed(() => tipStatus.value === 2);
+
+onMounted(() => {
+  getData();
+});
+
+const getData = () => {
+  console.log('getData', query.value, pageInfo);
+  dataSource.value = new Array(8).fill({
+    id: 1,
+    name: '全球',
+    account_id: 1,
+    mobile: 1777777,
+    status: 1,
+    platform: 0,
+    operator: {
+      name: '小周',
+    },
+    group: {
+      name: '美团组',
+    },
+    tags: [
+      {
+        name: '标签1',
+      },
+      {
+        name: '标签2',
+      },
+    ],
+  });
+};
+const handleSearch = (newQuery) => {
+  query.value = { ...newQuery };
+  getData();
+};
+const handleReset = () => {
+  query.value = cloneDeep(INITIAL_QUERY);
+  getData();
+};
+
+const onPageChange = (current) => {
+  pageInfo.page = current;
+  getData();
+};
+const onPageSizeChange = (pageSize) => {
+  pageInfo.pageSize = pageSize;
+  pageInfo.page = 1;
+  getData();
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,106 @@
+.account-manage-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  :deep(.search-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+  .filter-wrap {
+    border-radius: 8px;
+    border: 1px solid #e6e6e8;
+    .top {
+      .title {
+        font-family: 'Alibaba PuHuiTi';
+        font-style: normal;
+      }
+      :deep(.arco-btn) {
+        .arco-btn-icon {
+          line-height: 16px;
+        }
+      }
+    }
+  }
+  .tip-row {
+    border-radius: 2px;
+    background: #f0edff;
+    .label {
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.normal {
+      background: #ebf7f2;
+      .label {
+        color: #211f24;
+      }
+    }
+    &.abnormal {
+      background: #ffe7e4;
+      .label {
+        color: #211f24;
+      }
+    }
+    .err-btn {
+      background-color: #f64b31 !important;
+      color: var(--BG-white, #fff);
+      font-family: 'PingFang SC';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 166.667% */
+    }
+  }
+  .card-wrap {
+    display: flex;
+    flex-direction: column;
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+      :deep(.arco-pagination) {
+        .arco-pagination-list {
+          .arco-pagination-item {
+            border-radius: 4px;
+            border: 1px solid var(--BG-300, #e6e6e8);
+            &.arco-pagination-item-ellipsis {
+              border: none;
+            }
+
+            &.arco-pagination-item-active {
+              background-color: transparent;
+              border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+            }
+          }
+        }
+        .arco-pagination-jumper-input {
+          border-radius: 4px;
+          border: 1px solid var(--BG-300, #e6e6e8);
+        }
+        .arco-pagination-jumper-prepend {
+          color: var(--Text-2, #3c4043);
+          text-align: right;
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+        .arco-select-view-single {
+          border-radius: 4px;
+          border: 1px solid var(--BG-300, #e6e6e8);
+        }
+      }
+    }
+  }
+}