feat: 新媒体账号状态处理

src/views/property-marketing/media-account/account-manage/components/account-table/footer-btn.tsx

@@ -0,0 +1,166 @@
+import {
+  EnumStatus,
+  EnumErrorStatus,
+  getStatusInfo,
+} from '@/views/property-marketing/media-account/components/status-select/status-box';
+import { Dropdown, Doption, Button, Tooltip } from '@arco-design/web-vue';
+export default defineComponent({
+  name: 'FooterBtn',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['syncData', 'handleReauthorize', 'handlePause', 'openDelete', 'openEdit'],
+  setup(props, { emit }) {
+    const statusInfo = computed(() => {
+      const { status, error_status, to_be_expire_for_cookie } = props.item;
+      return getStatusInfo(status, error_status, to_be_expire_for_cookie) ?? {};
+    });
+
+    const renderEditDoption = () => {
+      return (
+        <Doption class="color-#211F24" onClick={() => emit('openEdit', props.item)}>
+          编辑
+        </Doption>
+      );
+    };
+    const renderReauthorizeDoption = (text = '重新授权') => {
+      return (
+        <Doption class="color-#211F24" onClick={() => emit('handleReauthorize', props.item)}>
+          {text}
+        </Doption>
+      );
+    };
+    const renderPauseDoption = () => {
+      return (
+        <Doption class="color-#211F24" onClick={() => emit('handlePause', props.item)}>
+          暂停同步
+        </Doption>
+      );
+    };
+    const renderSyncBtn = () => {
+      return (
+        <Button type="outline" size="mini" onClick={() => emit('syncData', props.item)}>
+          更新数据
+        </Button>
+      );
+    };
+    const renderDeleteDoption = () => {
+      return (
+        <Doption class="color-#F64B31" onClick={() => emit('openDelete', props.item)}>
+          删除
+        </Doption>
+      );
+    };
+    const renderNormal = () => {
+      return (
+        <>
+          <Dropdown
+            trigger="hover"
+            v-slots={{
+              default: () => (
+                <Button type="outline" class="mr-8px" size="mini">
+                  更多
+                </Button>
+              ),
+              content: () => (
+                <>
+                  {renderEditDoption()}
+                  {renderReauthorizeDoption()}
+                  {renderPauseDoption()}
+                  {renderDeleteDoption()}
+                </>
+              ),
+            }}
+          ></Dropdown>
+          {renderSyncBtn()}
+        </>
+      );
+    };
+    const renderPause = () => {
+      return (
+        <>
+          <Dropdown
+            trigger="hover"
+            v-slots={{
+              default: () => (
+                <Button type="outline" class="mr-8px" size="mini">
+                  更多
+                </Button>
+              ),
+              content: () => (
+                <>
+                  {renderEditDoption()}
+                  {renderDeleteDoption()}
+                </>
+              ),
+            }}
+          ></Dropdown>
+          <Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
+            开启同步
+          </Button>
+        </>
+      );
+    };
+    const renderAbnormal = () => {
+      const { error_status } = props.item;
+      const isMissing = error_status === EnumErrorStatus.MISSING;
+      const isUnauthorized = error_status === EnumErrorStatus.UNAUTHORIZED;
+      const renderSyncBtn = () => {
+        if (isMissing) {
+          renderSyncBtn();
+        } else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
+          return (
+            <Tooltip content={statusInfo.value.disabledBtnTooltip}>
+              <Button type="outline" size="mini" disabled>
+                重新授权
+              </Button>
+            </Tooltip>
+          );
+        } else {
+          return (
+            <Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
+              {isUnauthorized ? '去授权' : '重新授权'}
+            </Button>
+          );
+        }
+      };
+      return (
+        <>
+          <Dropdown
+            trigger="hover"
+            v-slots={{
+              default: () => (
+                <Button type="outline" class="mr-8px" size="mini">
+                  更多
+                </Button>
+              ),
+              content: () => (
+                <>
+                  {renderEditDoption()}
+                  {isMissing && renderReauthorizeDoption()}
+                  {renderPauseDoption()}
+                  {renderDeleteDoption()}
+                </>
+              ),
+            }}
+          ></Dropdown>
+          {renderSyncBtn()}
+        </>
+      );
+    };
+    const renderContent = () => {
+      const { status } = props.item;
+      if (status === EnumStatus.NORMAL) {
+        return renderNormal();
+      } else if (status === EnumStatus.PAUSE) {
+        return renderPause();
+      } else {
+        return renderAbnormal();
+      }
+    };
+    return () => renderContent();
+  },
+});

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

@@ -24,7 +24,7 @@
         </a-tooltip>
         <div class="field-row">
           <span class="label">状态</span>
-          <StatusBox :status="item.status" />
+          <StatusBox :item="item" />
         </div>
         <div class="field-row">
           <span class="label">数据更新时间</span>
@@ -75,24 +75,14 @@
           </div>
         </div>
         <div class="operate-row">
-          <a-dropdown trigger="hover">
-            <a-button class="w-52px search-btn mr-8px" size="mini">
-              <template #default>更多</template>
-            </a-button>
-            <template #content>
-              <a-doption class="color-#211F24" @click="openEdit(item)">编辑</a-doption>
-              <a-doption v-if="item.status === EnumStatus.NORMAL" class="color-#211F24" @click="handleReauthorize(item)"
-                >重新授权</a-doption
-              >
-              <a-doption v-if="showPauseButton(item.status)" class="color-#211F24" @click="handlePause(item)"
-                >暂停同步</a-doption
-              >
-              <a-doption class="color-#F64B31" @click="openDelete(item)">删除</a-doption>
-            </template>
-            <a-button class="search-btn" size="mini" @click="onBtnClick(item)">
-              <template #default>{{ getBtnText(item) }}</template>
-            </a-button>
-          </a-dropdown>
+          <FooterBtn
+            :item="item"
+            @handleReauthorize="handleReauthorize"
+            @syncData="syncData"
+            @openEdit="openEdit"
+            @openDelete="openDelete"
+            @handlePause="handlePause"
+          />
         </div>
       </div>
       <div v-if="isSyncFailed(item)" class="mask">
@@ -115,14 +105,15 @@
 <script setup>
 import { defineProps, ref, computed, inject } from 'vue';
 import { useRouter } from 'vue-router';
-import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+import { EnumErrorStatus } from '@/views/property-marketing/media-account/components/status-select/status-box';
 import { deleteSyncStatus } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';
 
 import PauseAccountPatchModal from './pause-account-patch';
-import StatusBox from '../status-box';
+import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
 import ReauthorizeAccountModal from '../reauthorize-account-modal';
 import AuthorizedAccountModal from '../authorized-account-modal';
+import FooterBtn from './footer-btn';
 
 import icon1 from '@/assets/img/media-account/icon-dy.png';
 import icon2 from '@/assets/img/media-account/icon-xhs.png';
@@ -186,8 +177,8 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  const { id, platform, status } = item;
-  const isUnauthorized = isUnauthorizedStatus(status);
+  const { id, platform, error_status } = item;
+  const isUnauthorized = isUnauthorizedStatus(error_status);
   if (isUnauthorized) {
     authorizedAccountModalRef.value?.open(id, platform);
   } else {
@@ -199,66 +190,12 @@ const handlePause = (item) => {
   pauseAccountPatchModalRef.value?.open(item);
 };
 
-const showPauseButton = (status) => {
-  return ![EnumStatus.PAUSE, EnumStatus.UNAUTHORIZED].includes(status);
+const isUnauthorizedStatus = (error_status) => {
+  return [EnumErrorStatus.UNAUTHORIZED].includes(error_status);
 };
-const showSyncDataButton = (status) => {
-  return [EnumStatus.NORMAL, EnumStatus.ABNORMAL_MISSING].includes(status);
-};
-const isUnauthorizedStatus = (status) => {
-  return [EnumStatus.UNAUTHORIZED].includes(status);
-};
-
-// 三种异常情况
-const isAbnormalStatus = (status) => {
-  return [
-    EnumStatus.ABNORMAL,
-    EnumStatus.ABNORMAL_LOGIN,
-    EnumStatus.ABNORMAL_REQUEST,
-    EnumStatus.ABNORMAL_FREEZE,
-  ].includes(status);
-};
-
-// const getTooltipText = (status) => {
-//   return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
-// };
 
 const syncData = inject('handleSyncData');
 
-const onBtnClick = (item) => {
-  if (showSyncDataButton(item.status)) {
-    syncData(item);
-    return;
-  }
-  if (isUnauthorizedStatus(item.status)) {
-    handleReauthorize(item);
-    return;
-  }
-
-  if ([EnumStatus.PAUSE].includes(item.status) || isAbnormalStatus(item.status)) {
-    handleReauthorize(item);
-    return;
-  }
-
-  handlePause(item);
-};
-
-const getBtnText = (item) => {
-  if (showSyncDataButton(item.status)) {
-    return '更新数据';
-  }
-
-  if (isUnauthorizedStatus(item.status)) {
-    return '去授权';
-  }
-
-  if ([EnumStatus.PAUSE].includes(item.status) || isAbnormalStatus(item.status)) {
-    return '重新授权';
-  }
-
-  return '暂停同步';
-};
-
 const goDetail = (item) => {
   router.push(`/media-account/detail/${item.id}`);
 };

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

@@ -23,7 +23,7 @@ import TagSelect from '@/views/property-marketing/media-account/components/tag-s
 import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
 import AuthorizedAccountModal from '../authorized-account-modal';
 // import ImportPromptModal from '../import-prompt-modal';
-import StatusBox from '../status-box';
+import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
 import SyncDataModal from '../sync-data-modal';
 
 // import { downloadByUrl } from '@/utils/tools';
@@ -341,7 +341,7 @@ export default {
                     <Input v-model={form.value.account_id} placeholder="请输入..." size="large" disabled />
                   </FormItem>
                   <FormItem label="状态" field="status">
-                    <StatusBox status={form.value.status} />
+                    <StatusBox item={form.value} />
                   </FormItem>
                 </>
               )}

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

@@ -1,97 +0,0 @@
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-25 15:31:15
--->
-<template>
-  <div class="status-box" :class="`status-box-${status}`">
-    <span class="text">{{ statusText }}</span>
-    <a-tooltip v-if="showTooltip" :content="tooltipText">
-      <img v-if="showIcon" :src="iconSrc" width="12" height="12" class="ml-4px" />
-    </a-tooltip>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
-
-import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
-import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
-
-const props = defineProps({
-  status: {
-    type: Number,
-    required: true,
-  },
-});
-
-const statusText = computed(() => {
-  return STATUS_LIST.find((v) => v.value === props.status)?.label ?? '-';
-});
-
-const showTooltip = computed(() => {
-  return isDisabledReauthorize(props.status);
-});
-
-const tooltipText = computed(() => {
-  return STATUS_LIST.find((v) => v.value === props.status)?.tooltip ?? '-';
-});
-
-const showIcon = computed(() => {
-  return ![EnumStatus.NORMAL, EnumStatus.UNAUTHORIZED].includes(props.status);
-});
-
-const iconSrc = computed(() => {
-  return props.status === EnumStatus.PAUSE ? iconWarn1 : iconWarn2;
-});
-
-// 判断是否为禁用重新授权的状态
-const isDisabledReauthorize = (status) => {
-  return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
-};
-</script>
-
-<style scoped lang="scss">
-.status-box {
-  display: flex;
-  padding: 0px 8px;
-  align-items: center;
-  border-radius: 2px;
-  background: #f2f3f5;
-
-  .text {
-    color: var(--BG-700, #737478);
-    font-family: $font-family-medium;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 166.667% */
-  }
-
-  &-1 {
-    background: #ebf7f2;
-    .text {
-      color: #25c883;
-    }
-  }
-
-  &-2,
-  &-4,
-  &-5,
-  &-6,
-  &-7 {
-    background: #ffe7e4;
-    .text {
-      color: #f64b31;
-    }
-  }
-
-  &-3 {
-    background: #fff7e5;
-    color: #ffae00;
-    .text {
-      color: #ffae00;
-    }
-  }
-}
-</style>