feat: 组件库替换

src/views/components/dataEngine/hotTranslation.vue

@@ -134,9 +134,9 @@
             <p class="!mr-16px w-48px cts relative top-2px">原始来源</p>
             <div class="flex flex-col">
               <div v-for="item in topicInfo.industry_topic_sources" :key="item" class="mb-18px flex items-center">
-                <a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
+                <Link :href="item.link" target="_blank" class="!text-12px">{{
                   item.title
-                }}</a-link>
+                }}</Link>
                 <img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
               </div>
             </div>
@@ -153,7 +153,8 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
+import { Modal, Button, Tooltip, Space, Table, Tag, Typography } from 'ant-design-vue';
+const { Link } = Typography;
 import { ref, computed } from 'vue';
 import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
 import star1 from '@/assets/img/hottranslation/star-fill1.png';

src/views/components/dataEngine/keyBrandMovement.vue

@@ -48,7 +48,7 @@
             </div>
           </template>
           <template v-else-if="column.slotName === 'volumeRate'" #customRender="{ record }">
-            <a-statistic :value="record.volume_rate * 100" />%
+            <Statistic :value="record.volume_rate * 100" />%
           </template>
           <template v-else-if="column.titleSlotName === 'hotTitle'" #title>
             <Space>
@@ -118,7 +118,7 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Tooltip, Space, Table } from 'ant-design-vue';
+import { Tooltip, Space, Table, Statistic } from 'ant-design-vue';
 import { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
 import { ref, onMounted, computed } from 'vue';
 import star1 from '@/assets/img/hottranslation/star-fill1.png';

src/views/components/dataEngine/keyWord.vue

@@ -250,9 +250,9 @@
             <p class="!mr-16px w-83px cts relative top-2px">原始来源</p>
             <div class="flex flex-col">
               <div v-for="item in topicInfo.industry_new_keyword_sources" :key="item" class="mb-18px flex items-center">
-                <a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
+                <Link :href="item.link" target="_blank" class="!text-12px">{{
                   item.title
-                }}</a-link>
+                }}</Link>
                 <img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
               </div>
             </div>
@@ -269,7 +269,8 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Checkbox, Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
+import { Modal, Button, Tooltip, Space, Table, Tag, Typography } from 'ant-design-vue';
+const { Link } = Typography;
 import {
   fetchKeywordTrendsList,
   fetchIndustryEmotions,

src/views/components/dataEngine/userPainPoints.vue

@@ -108,9 +108,9 @@
             <p class="cts !mr-16px flex-shrink-0 w-60px">原始来源</p>
             <div class="flex flex-col">
               <div v-for="item in topicInfo.user_pain_point_sources" :key="item" class="mb-18px flex items-center">
-                <a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
+                <Link :href="item.link" target="_blank" class="!text-12px">{{
                   item.title
-                }}</a-link>
+                }}</Link>
                 <img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
               </div>
             </div>
@@ -127,7 +127,8 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
+import { Modal, Button, Tooltip, Space, Table, Tag, Typography } from 'ant-design-vue';
+const { Link } = Typography;
 import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
 import { ref, onMounted, computed } from 'vue';
 import top1 from '@/assets/img/captcha/top1.svg';

src/views/components/login/index.vue

@@ -65,9 +65,9 @@
           <Space class="text-12px color-#737478 justify-start items-center">
             <Checkbox v-model:checked="hasCheck" class="!text-12px mr-8px"></Checkbox>
             <span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
-            <a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link>
+            <Link href="link" class="form-link color-#211F24" target="_blank">用户协议</Link>
             <span class="text-12px color-#737478">和</span>
-            <a-link href="link" class="form-link color-#211f24" target="_blank">隐私政策</a-link>
+            <Link href="link" class="form-link color-#211f24" target="_blank">隐私政策</Link>
           </Space>
         </Space>
       </div>
@@ -87,13 +87,13 @@
       <span style="text-align: left; width: 100%">选择账号</span>
     </template>
     <div class="account-bind-container">
-      <a-card :bordered="false" class="bind-card">
+      <Card :bordered="false" class="bind-card">
         <div class="bind-header">
-          <a-typography-text class="mobile-number">{{ mobileNumber }} 已在以下企业绑定了账号</a-typography-text>
+          <Typography.Text class="mobile-number">{{ mobileNumber }} 已在以下企业绑定了账号</Typography.Text>
         </div>
 
-        <a-list :bordered="false" :split="false" class="account-list">
-          <a-list-item
+        <List :bordered="false" :split="false" class="account-list">
+          <List.Item
             v-for="(account, index) in accounts"
             :key="index"
             class="account-item"
@@ -104,17 +104,17 @@
             }"
             @click="selectAccount(account, index)"
           >
-            <a-list-item-meta>
+            <List.Item.Meta>
               <template #title>
                 <div style="display: flex; align-items: center; gap: 12px">
                   <Checkbox :checked="selectedAccountIndex === index" />
-                  <a-typography-text>{{ account.name || '-' }}</a-typography-text>
+                  <Typography.Text>{{ account.name || '-' }}</Typography.Text>
                 </div>
               </template>
-            </a-list-item-meta>
-          </a-list-item>
-        </a-list>
-      </a-card>
+            </List.Item.Meta>
+          </List.Item>
+        </List>
+      </Card>
     </div>
     <template #footer>
       <div class="flex">
@@ -125,7 +125,8 @@
 </template>
 
 <script setup lang="ts">
-import { Checkbox, Modal, Button, Form, FormItem, Input, Space, message } from 'ant-design-vue';
+import { Checkbox, Modal, Button, Form, FormItem, Input, Space, message, Typography, Card, List } from 'ant-design-vue';
+const { Link } = Typography;
 import PuzzleVerification from './components/PuzzleVerification.vue';
 import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
 import { joinEnterpriseByInviteCode } from '@/api/all';

src/views/components/login/style.scss

@@ -69,6 +69,7 @@
     width: 100%;
     flex-direction: column;
     align-items: start;
+    box-shadow: none;
   }
 
   .bind-header {
@@ -111,6 +112,9 @@
         background-color: rgba(109, 76, 254, 0.1);
         box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5);
       }
+      :deep(.ant-list-item-meta-title) {
+        margin: 0;
+      }
     }
 
     .account-item:deep(.arco-list-item-main) {

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

@@ -7,7 +7,7 @@
       <Table.Column title="用户信息" dataIndex="info">
         <template #customRender="{ record }">
           <div class="pt-3px pb-3px">
-            <a-avatar :image-url="record.head_image" :size="32" />
+            <Avatar :src="record.head_image" :size="32" />
             {{ record.name || '-' }}
             <icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
           </div>
@@ -33,7 +33,7 @@
       >
         <FormItem name="head_image" label="头像">
           <div class="flex items-center">
-            <a-avatar :image-url="userInfoForm.file_url" :size="48" />
+            <Avatar :src="userInfoForm.file_url" :size="48" />
             <span class="upload-button" @click="triggerFileInput">
               <input
                 ref="uploadInputRef"
@@ -85,7 +85,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Button, Form, FormItem, Input, Table, message } from 'ant-design-vue';
+import { Button, Form, FormItem, Input, Table, message, Avatar } from 'ant-design-vue';
 import Container from '@/components/container.vue';
 import Modal from '@/components/modal.vue';
 import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';

src/views/components/workplace/index.vue

@@ -6,7 +6,7 @@
   <div class="m-auto mt-24px max-w-1000px">
     <Container title="推荐产品" class="container-body">
       <div class="grid grid-cols-3 gap-20px">
-        <Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" />
+        <!-- <Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" /> -->
       </div>
       <NoData v-if="products.length === 0" />
     </Container>
@@ -20,7 +20,7 @@
 </template>
 <script setup lang="ts">
 import Container from '@/components/container.vue';
-import Product from '@/views/components/workplace/modules/product.vue';
+// import Product from '@/views/components/workplace/modules/product.vue';
 import Case from '@/views/components/workplace/modules/case.vue';
 import { fetchProductList, fetchSuccessCaseList } from '@/api/all/index';
 import { ref, onMounted } from 'vue';

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

@@ -6,12 +6,11 @@
       <Tag v-if="props.product.status === Status.Disable" class="status status-disable">未开通</Tag>
       <Tag v-if="props.product.status === Status.EXPIRED" class="status status-expired">已到期</Tag>
       <Tag v-if="props.product.status === Status.TRIAL_ENDS" class="status status-expired">试用结束</Tag>
-      <a-countdown
+      <Countdown
         v-if="props.product.status === Status.ON_TRIAL"
         class="status-on-trill"
         title="试用中"
         :value="1000 * (props.product.expired_at ?? 0)"
-        :now="now()"
         format="D天H时m分s秒"
       />
     </div>
@@ -60,9 +59,10 @@
       >
         联系客服
       </Button>
-      <a-popconfirm focusLock title="试用产品" content="确定试用该产品吗？" @ok="handleTrial(props.product.id)">
+      <Popconfirm title="试用产品" ok-text="确定" cancel-text="取消" @confirm="handleTrial(props.product.id)">
+        <template #description>确定试用该产品吗？</template>
         <Button v-if="props.product.status === Status.Disable" size="small" type="default" ghost> 免费试用7天 </Button>
-      </a-popconfirm>
+      </Popconfirm>
     </div>
     <CustomerServiceModal v-model:open="visible" centered/>
   </div>
@@ -73,7 +73,8 @@ import { now } from '@vueuse/core';
 import { trialProduct } from '@/api/all';
 import { useRouter } from 'vue-router';
 import CustomerServiceModal from '@/components/customer-service-modal.vue';
-import { Button, message, Tag } from 'ant-design-vue';
+import { Button, message, Tag, Statistic, Popconfirm } from 'ant-design-vue';
+const { Countdown } = Statistic;
 
 import { useSidebarStore } from '@/stores/modules/side-bar';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
@@ -177,7 +178,7 @@ const gotoModule = (menuId: number) => {
     border-radius: 4px;
     background: rgba(255, 245, 222, 1);
 
-    :deep(.arco-statistic-title) {
+    :deep(.ant-statistic-title) {
       font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
@@ -187,7 +188,7 @@ const gotoModule = (menuId: number) => {
       padding: 0;
     }
 
-    :deep(.arco-statistic-value) {
+    :deep(.ant-statistic-content) {
       font-family: $font-family-medium;
       font-weight: 400;
       font-size: 10px;