perf: 删除不必要的页面

src/components/message-box/locale/en-US.ts

@@ -7,7 +7,6 @@ export default {
   'messageBox.viewMore': 'View More',
   'messageBox.noContent': 'No Content',
   'messageBox.switchRoles': 'Switch Roles',
-  'messageBox.userCenter': 'User Center',
   'messageBox.userSettings': 'User Settings',
   'messageBox.logout': 'Logout',
 };

src/components/message-box/locale/zh-CN.ts

@@ -7,7 +7,6 @@ export default {
   'messageBox.viewMore': '查看更多',
   'messageBox.noContent': '暂无内容',
   'messageBox.switchRoles': '切换角色',
-  'messageBox.userCenter': '用户中心',
   'messageBox.userSettings': '用户设置',
   'messageBox.logout': '登出登录',
 };

src/components/navbar/index.vue

@@ -159,14 +159,6 @@
                 </span>
               </a-space>
             </a-doption>
-            <a-doption>
-              <a-space @click="$router.push({ name: 'Info' })">
-                <icon-user />
-                <span>
-                  {{ $t('messageBox.userCenter') }}
-                </span>
-              </a-space>
-            </a-doption>
             <a-doption>
               <a-space @click="$router.push({ name: 'Setting' })">
                 <icon-settings />

src/locale/en-US.ts

@@ -7,7 +7,6 @@ import locale403 from '@/views/exception/403/locale/en-US';
 import locale404 from '@/views/exception/404/locale/en-US';
 import locale500 from '@/views/exception/500/locale/en-US';
 
-import localeUserInfo from '@/views/user/info/locale/en-US';
 import localeUserSetting from '@/views/user/setting/locale/en-US';
 
 import localeSettings from './en-US/settings';
@@ -29,6 +28,5 @@ export default {
   ...locale403,
   ...locale404,
   ...locale500,
-  ...localeUserInfo,
   ...localeUserSetting,
 };

src/locale/zh-CN.ts

@@ -7,7 +7,6 @@ import locale403 from '@/views/exception/403/locale/zh-CN';
 import locale404 from '@/views/exception/404/locale/zh-CN';
 import locale500 from '@/views/exception/500/locale/zh-CN';
 
-import localeUserInfo from '@/views/user/info/locale/zh-CN';
 import localeUserSetting from '@/views/user/setting/locale/zh-CN';
 import localeSettings from './zh-CN/settings';
 
@@ -28,6 +27,5 @@ export default {
   ...locale403,
   ...locale404,
   ...locale500,
-  ...localeUserInfo,
   ...localeUserSetting,
 };

src/mock/index.ts

@@ -2,8 +2,6 @@ import Mock from 'mockjs';
 
 import './user';
 import './message-box';
-
-import '@/views/user/info/mock';
 import '@/views/user/setting/mock';
 
 Mock.setup({

src/mock/user.ts

@@ -8,6 +8,8 @@ import { MockParams } from '@/types/mock';
 import { isLogin } from '@/utils/auth';
 
 setupMock({
+  // mock: false,
+
   setup() {
     // Mock.XHR.prototype.withCredentials = true;
 

src/router/routes/modules/user.ts

@@ -12,16 +12,6 @@ const USER: AppRouteRecordRaw = {
     order: 7,
   },
   children: [
-    {
-      path: 'info',
-      name: 'Info',
-      component: () => import('@/views/user/info/index.vue'),
-      meta: {
-        locale: 'menu.user.info',
-        requiresAuth: true,
-        roles: ['*'],
-      },
-    },
     {
       path: 'setting',
       name: 'Setting',

src/views/user/info/components/latest-activity.vue

@@ -1,92 +0,0 @@
-<template>
-  <a-card class="general-card" :title="$t('userInfo.title.latestActivity')">
-    <template #extra>
-      <a-link>{{ $t('userInfo.viewAll') }}</a-link>
-    </template>
-    <a-list :bordered="false">
-      <a-list-item
-        v-for="activity in activityList"
-        :key="activity.id"
-        action-layout="horizontal"
-      >
-        <a-skeleton
-          v-if="loading"
-          :loading="loading"
-          :animation="true"
-          class="skeleton-item"
-        >
-          <a-row :gutter="6">
-            <a-col :span="2">
-              <a-skeleton-shape shape="circle" />
-            </a-col>
-            <a-col :span="22">
-              <a-skeleton-line :widths="['40%', '100%']" :rows="2" />
-            </a-col>
-          </a-row>
-        </a-skeleton>
-        <a-list-item-meta
-          v-else
-          :title="activity.title"
-          :description="activity.description"
-        >
-          <template #avatar>
-            <a-avatar>
-              <img :src="activity.avatar" />
-            </a-avatar>
-          </template>
-        </a-list-item-meta>
-      </a-list-item>
-    </a-list>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { queryLatestActivity, LatestActivity } from '@/api/user-center';
-  import useLoading from '@/hooks/loading';
-
-  const { loading, setLoading } = useLoading(true);
-  const activityList = ref<LatestActivity[]>(new Array(7).fill({}));
-  const fetchData = async () => {
-    try {
-      const { data } = await queryLatestActivity();
-      activityList.value = data;
-    } catch (err) {
-      // you can report use errorHandler or other
-    } finally {
-      setLoading(false);
-    }
-  };
-  fetchData();
-</script>
-
-<style scoped lang="less">
-  .latest-activity {
-    &-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-
-  .general-card :deep(.arco-list-item) {
-    padding-left: 0;
-    border-bottom: none;
-
-    .arco-list-item-meta-content {
-      flex: 1;
-      padding-bottom: 27px;
-      border-bottom: 1px solid var(--color-neutral-3);
-    }
-
-    .arco-list-item-meta-avatar {
-      padding-bottom: 27px;
-    }
-
-    .skeleton-item {
-      margin-top: 10px;
-      padding-bottom: 20px;
-      border-bottom: 1px solid var(--color-neutral-3);
-    }
-  }
-</style>

src/views/user/info/components/latest-notification.vue

@@ -1,27 +0,0 @@
-<template>
-  <a-card class="general-card" :title="$t('userInfo.title.latestNotification')">
-    <a-skeleton v-if="loading" :animation="true">
-      <a-skeleton-line :rows="3" />
-    </a-skeleton>
-    <a-result v-else status="404">
-      <template #subtitle>
-        {{ $t('userInfo.nodata') }}
-      </template>
-    </a-result>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import useLoading from '@/hooks/loading';
-
-  const { loading, setLoading } = useLoading(true);
-  setTimeout(() => {
-    setLoading(false);
-  }, 500);
-</script>
-
-<style lang="less" scoped>
-  :deep(.arco-result) {
-    padding: 40px 32px 108px;
-  }
-</style>

src/views/user/info/components/my-project.vue

@@ -1,92 +0,0 @@
-<template>
-  <a-card class="general-card" :title="$t('userInfo.title.myProject')">
-    <template #extra>
-      <a-link>{{ $t('userInfo.showMore') }}</a-link>
-    </template>
-    <a-row :gutter="16">
-      <a-col
-        v-for="(project, index) in projectList"
-        :key="index"
-        :xs="12"
-        :sm="12"
-        :md="12"
-        :lg="12"
-        :xl="8"
-        :xxl="8"
-        class="my-project-item"
-      >
-        <a-card>
-          <a-skeleton v-if="loading" :loading="loading" :animation="true">
-            <a-skeleton-line :rows="3" />
-          </a-skeleton>
-          <a-space v-else direction="vertical">
-            <a-typography-text bold>{{ project.name }}</a-typography-text>
-            <a-typography-text type="secondary">
-              {{ project.description }}
-            </a-typography-text>
-            <a-space>
-              <a-avatar-group :size="24">
-                {{ project.contributors }}
-                <a-avatar
-                  v-for="(contributor, idx) in project.contributors"
-                  :key="idx"
-                  :size="32"
-                >
-                  <img alt="avatar" :src="contributor.avatar" />
-                </a-avatar>
-              </a-avatar-group>
-              <a-typography-text type="secondary">
-                等{{ project.peopleNumber }}人
-              </a-typography-text>
-            </a-space>
-          </a-space>
-        </a-card>
-      </a-col>
-    </a-row>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { queryMyProjectList, MyProjectRecord } from '@/api/user-center';
-  import useRequest from '@/hooks/request';
-
-  const defaultValue = Array(6).fill({} as MyProjectRecord);
-  const { loading, response: projectList } = useRequest<MyProjectRecord[]>(
-    queryMyProjectList,
-    defaultValue
-  );
-</script>
-
-<style scoped lang="less">
-  :deep(.arco-card-body) {
-    min-height: 128px;
-    padding-bottom: 0;
-  }
-
-  .my-project {
-    &-header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-    }
-
-    &-title {
-      margin-top: 0 !important;
-      margin-bottom: 18px !important;
-    }
-
-    &-list {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    &-item {
-      // padding-right: 16px;
-      margin-bottom: 16px;
-
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-  }
-</style>

src/views/user/info/components/my-team.vue

@@ -1,67 +0,0 @@
-<template>
-  <a-card
-    class="general-card"
-    :title="$t('userInfo.tab.title.team')"
-    :header-style="{ paddingBottom: '18px' }"
-    :body-style="{ paddingBottom: '12px' }"
-  >
-    <a-list :bordered="false">
-      <a-list-item
-        v-for="team in teamList"
-        :key="team.id"
-        action-layout="horizontal"
-      >
-        <a-skeleton v-if="loading" :loading="loading" :animation="true">
-          <a-row :gutter="6">
-            <a-col :span="6">
-              <a-skeleton-shape shape="circle" />
-            </a-col>
-            <a-col :span="16">
-              <a-skeleton-line :widths="['100%', '40%']" :rows="2" />
-            </a-col>
-          </a-row>
-        </a-skeleton>
-        <a-list-item-meta v-else :title="team.name">
-          <template #avatar>
-            <a-avatar>
-              <img :src="team.avatar" />
-            </a-avatar>
-          </template>
-          <template #description> 共{{ team.peopleNumber }}人 </template>
-        </a-list-item-meta>
-      </a-list-item>
-    </a-list>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { queryMyTeamList, MyTeamRecord } from '@/api/user-center';
-  import useRequest from '@/hooks/request';
-
-  const defaultValue: MyTeamRecord[] = new Array(4).fill({});
-  const { loading, response: teamList } = useRequest<MyTeamRecord[]>(
-    queryMyTeamList,
-    defaultValue
-  );
-</script>
-
-<style scoped lang="less">
-  .general-card {
-    height: 356px;
-
-    .arco-list-item {
-      height: 72px;
-      padding-bottom: 12px;
-      padding-left: 0;
-      border-bottom: 1px solid var(--color-neutral-3);
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .arco-list-item-meta {
-        padding: 0;
-      }
-    }
-  }
-</style>

src/views/user/info/components/user-info-header.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="header">
-    <a-space :size="12" direction="vertical" align="center">
-      <a-avatar :size="64">
-        <template #trigger-icon>
-          <icon-camera />
-        </template>
-        <img :src="userInfo.avatar" />
-      </a-avatar>
-      <a-typography-title :heading="6" style="margin: 0">
-        {{ userInfo.name }}
-      </a-typography-title>
-      <div class="user-msg">
-        <a-space :size="18">
-          <div>
-            <icon-user />
-            <a-typography-text>{{ userInfo.jobName }}</a-typography-text>
-          </div>
-          <div>
-            <icon-home />
-            <a-typography-text>
-              {{ userInfo.organizationName }}
-            </a-typography-text>
-          </div>
-          <div>
-            <icon-location />
-            <a-typography-text>{{ userInfo.locationName }}</a-typography-text>
-          </div>
-        </a-space>
-      </div>
-    </a-space>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { useUserStore } from '@/store';
-
-  const userInfo = useUserStore();
-</script>
-
-<style scoped lang="less">
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 204px;
-    color: var(--gray-10);
-    background: url('//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/41c6b125cc2e27021bf7fcc9a9b1897c.svg~tplv-49unhts6dw-image.image')
-      no-repeat;
-    background-size: cover;
-    border-radius: 4px;
-
-    :deep(.arco-avatar-trigger-icon-button) {
-      color: rgb(var(--arcoblue-6));
-
-      :deep(.arco-icon) {
-        vertical-align: -1px;
-      }
-    }
-
-    .user-msg {
-      .arco-icon {
-        color: rgb(var(--gray-10));
-      }
-
-      .arco-typography {
-        margin-left: 6px;
-      }
-    }
-  }
-</style>

src/views/user/info/index.vue

@@ -1,88 +0,0 @@
-<template>
-  <div class="container">
-    <Breadcrumb :items="['menu.user', 'menu.user.info']" />
-    <UserInfoHeader />
-    <div class="content">
-      <div class="content-left">
-        <a-grid :cols="24" :col-gap="16" :row-gap="16">
-          <a-grid-item :span="24">
-            <MyProject />
-          </a-grid-item>
-          <a-grid-item :span="24">
-            <LatestActivity />
-          </a-grid-item>
-        </a-grid>
-      </div>
-      <div class="content-right">
-        <a-grid :cols="24" :row-gap="16">
-          <a-grid-item :span="24">
-            <MyTeam />
-          </a-grid-item>
-          <a-grid-item class="panel" :span="24">
-            <LatestNotification />
-          </a-grid-item>
-        </a-grid>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import UserInfoHeader from './components/user-info-header.vue';
-  import LatestNotification from './components/latest-notification.vue';
-  import MyProject from './components/my-project.vue';
-  import LatestActivity from './components/latest-activity.vue';
-  import MyTeam from './components/my-team.vue';
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'Info',
-  };
-</script>
-
-<style scoped lang="less">
-  .container {
-    padding: 0 10px 20px;
-  }
-
-  .content {
-    display: flex;
-    margin-top: 12px;
-
-    &-left {
-      flex: 1;
-      margin-right: 16px;
-      overflow: hidden;
-      // background-color: var(--color-bg-2);
-      :deep(.arco-tabs-nav-tab) {
-        margin-left: 16px;
-      }
-    }
-
-    &-right {
-      width: 332px;
-    }
-
-    .tab-pane-wrapper {
-      padding: 0 16px 16px;
-    }
-  }
-</style>
-
-<style lang="less" scoped>
-  .mobile {
-    .content {
-      display: block;
-
-      &-left {
-        margin-right: 0;
-        margin-bottom: 16px;
-      }
-
-      &-right {
-        width: 100%;
-      }
-    }
-  }
-</style>

src/views/user/info/locale/en-US.ts

@@ -1,15 +0,0 @@
-export default {
-  'menu.user.info': 'User Info',
-  'userInfo.editUserInfo': 'Edit Info',
-  'userInfo.tab.title.overview': 'Overview',
-  'userInfo.tab.title.project': 'Project',
-  'userInfo.tab.title.team': 'My Team',
-  'userInfo.title.latestActivity': 'Latest Activity',
-  'userInfo.title.latestNotification': 'In-site Notification',
-  'userInfo.title.myProject': 'My Project',
-  'userInfo.showMore': 'Show More',
-  'userInfo.viewAll': 'View All',
-  'userInfo.nodata': 'No Data',
-  'userInfo.visits.unit': 'times',
-  'userInfo.visits.lastMonth': 'Last Month',
-};

src/views/user/info/locale/zh-CN.ts

@@ -1,15 +0,0 @@
-export default {
-  'menu.user.info': '用户信息',
-  'userInfo.editUserInfo': '编辑信息',
-  'userInfo.tab.title.overview': '总览',
-  'userInfo.tab.title.project': '项目',
-  'userInfo.tab.title.team': '我的团队',
-  'userInfo.title.latestActivity': '最新动态',
-  'userInfo.title.latestNotification': '站内通知',
-  'userInfo.title.myProject': '我的项目',
-  'userInfo.showMore': '查看更多',
-  'userInfo.viewAll': '查看全部',
-  'userInfo.nodata': '暂无数据',
-  'userInfo.visits.unit': '人次',
-  'userInfo.visits.lastMonth': '较上月',
-};

src/views/user/info/mock.ts

@@ -1,162 +0,0 @@
-import Mock from 'mockjs';
-import setupMock, { successResponseWrap } from '@/utils/setup-mock';
-
-setupMock({
-  setup() {
-    // 最新项目
-    Mock.mock(new RegExp('/api/user/my-project/list'), () => {
-      const contributors = [
-        {
-          name: '秦臻宇',
-          email: 'qingzhenyu@arco.design',
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
-        },
-        {
-          name: '于涛',
-          email: 'yuebao@arco.design',
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
-        },
-        {
-          name: '宁波',
-          email: 'ningbo@arco.design',
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-        },
-        {
-          name: '郑曦月',
-          email: 'zhengxiyue@arco.design',
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp',
-        },
-        {
-          name: '宁波',
-          email: 'ningbo@arco.design',
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-        },
-      ];
-      const units = [
-        {
-          name: '企业级产品设计系统',
-          description: 'Arco Design System',
-        },
-        {
-          name: '火山引擎智能应用',
-          description: 'The Volcano Engine',
-        },
-        {
-          name: 'OCR文本识别',
-          description: 'OCR text recognition',
-        },
-        {
-          name: '内容资源管理',
-          description: 'Content resource management ',
-        },
-        {
-          name: '今日头条内容管理',
-          description: 'Toutiao content management',
-        },
-        {
-          name: '智能机器人',
-          description: 'Intelligent Robot Project',
-        },
-      ];
-      return successResponseWrap(
-        new Array(6).fill(null).map((_item, index) => ({
-          id: index,
-          name: units[index].name,
-          description: units[index].description,
-          peopleNumber: Mock.Random.natural(10, 1000),
-          contributors,
-        }))
-      );
-    });
-
-    // 最新动态
-    Mock.mock(new RegExp('/api/user/latest-activity'), () => {
-      return successResponseWrap(
-        new Array(7).fill(null).map((_item, index) => ({
-          id: index,
-          title: '发布了项目 Arco Design System',
-          description: '企业级产品设计系统',
-          avatar:
-            '//lf1-xgcdn-tos.pstatp.com/obj/vcloud/vadmin/start.8e0e4855ee346a46ccff8ff3e24db27b.png',
-        }))
-      );
-    });
-
-    // 访问量
-    Mock.mock(new RegExp('/api/user/visits'), () => {
-      return successResponseWrap([
-        {
-          name: '主页访问量',
-          visits: 5670,
-          growth: 206.32,
-        },
-        {
-          name: '项目访问量',
-          visits: 5670,
-          growth: 206.32,
-        },
-      ]);
-    });
-
-    // 项目和团队列表
-    Mock.mock(new RegExp('/api/user/project-and-team/list'), () => {
-      return successResponseWrap([
-        {
-          id: 1,
-          content: '他创建的项目',
-        },
-        {
-          id: 2,
-          content: '他参与的项目',
-        },
-        {
-          id: 3,
-          content: '他创建的团队',
-        },
-        {
-          id: 4,
-          content: '他加入的团队',
-        },
-      ]);
-    });
-
-    // 团队列表
-    Mock.mock(new RegExp('/api/user/my-team/list'), () => {
-      return successResponseWrap([
-        {
-          id: 1,
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
-          name: '火山引擎智能应用团队',
-          peopleNumber: Mock.Random.natural(10, 100),
-        },
-        {
-          id: 2,
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-          name: '企业级产品设计团队',
-          peopleNumber: Mock.Random.natural(5000, 6000),
-        },
-        {
-          id: 3,
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
-          name: '前端/UE小分队',
-          peopleNumber: Mock.Random.natural(10, 5000),
-        },
-        {
-          id: 4,
-          avatar:
-            '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp',
-          name: '内容识别插件小分队',
-          peopleNumber: Mock.Random.natural(10, 100),
-        },
-      ]);
-    });
-  },
-});

src/views/user/setting/components/basic-information.vue

@@ -1,159 +0,0 @@
-<template>
-  <a-form
-    ref="formRef"
-    :model="formData"
-    class="form"
-    :label-col-props="{ span: 8 }"
-    :wrapper-col-props="{ span: 16 }"
-  >
-    <a-form-item
-      field="email"
-      :label="$t('userSetting.basicInfo.form.label.email')"
-      :rules="[
-        {
-          required: true,
-          message: $t('userSetting.form.error.email.required'),
-        },
-      ]"
-    >
-      <a-input
-        v-model="formData.email"
-        :placeholder="$t('userSetting.basicInfo.placeholder.email')"
-      />
-    </a-form-item>
-    <a-form-item
-      field="nickname"
-      :label="$t('userSetting.basicInfo.form.label.nickname')"
-      :rules="[
-        {
-          required: true,
-          message: $t('userSetting.form.error.nickname.required'),
-        },
-      ]"
-    >
-      <a-input
-        v-model="formData.nickname"
-        :placeholder="$t('userSetting.basicInfo.placeholder.nickname')"
-      />
-    </a-form-item>
-    <a-form-item
-      field="countryRegion"
-      :label="$t('userSetting.basicInfo.form.label.countryRegion')"
-      :rules="[
-        {
-          required: true,
-          message: $t('userSetting.form.error.countryRegion.required'),
-        },
-      ]"
-    >
-      <a-select
-        v-model="formData.countryRegion"
-        :placeholder="$t('userSetting.basicInfo.placeholder.area')"
-      >
-        <a-option value="China">中国</a-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item
-      field="area"
-      :label="$t('userSetting.basicInfo.form.label.area')"
-      :rules="[
-        {
-          required: true,
-          message: $t('userSetting.form.error.area.required'),
-        },
-      ]"
-    >
-      <a-cascader
-        v-model="formData.area"
-        :placeholder="$t('userSetting.basicInfo.placeholder.area')"
-        :options="[
-          {
-            label: '北京',
-            value: 'beijing',
-            children: [
-              {
-                label: '北京',
-                value: 'beijing',
-                children: [
-                  {
-                    label: '朝阳',
-                    value: 'chaoyang',
-                  },
-                ],
-              },
-            ],
-          },
-        ]"
-        allow-clear
-      />
-    </a-form-item>
-    <a-form-item
-      field="address"
-      :label="$t('userSetting.basicInfo.form.label.address')"
-    >
-      <a-input
-        v-model="formData.address"
-        :placeholder="$t('userSetting.basicInfo.placeholder.address')"
-      />
-    </a-form-item>
-    <a-form-item
-      field="profile"
-      :label="$t('userSetting.basicInfo.form.label.profile')"
-      :rules="[
-        {
-          maxLength: 200,
-          message: $t('userSetting.form.error.profile.maxLength'),
-        },
-      ]"
-      row-class="keep-margin"
-    >
-      <a-textarea
-        v-model="formData.profile"
-        :placeholder="$t('userSetting.basicInfo.placeholder.profile')"
-      />
-    </a-form-item>
-    <a-form-item>
-      <a-space>
-        <a-button type="primary" @click="validate">
-          {{ $t('userSetting.save') }}
-        </a-button>
-        <a-button type="secondary" @click="reset">
-          {{ $t('userSetting.reset') }}
-        </a-button>
-      </a-space>
-    </a-form-item>
-  </a-form>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { FormInstance } from '@arco-design/web-vue';
-  import { BasicInfoModel } from '@/api/user-center';
-
-  const formRef = ref<FormInstance>();
-  const formData = ref<BasicInfoModel>({
-    email: '',
-    nickname: '',
-    countryRegion: '',
-    area: '',
-    address: '',
-    profile: '',
-  });
-  const validate = async () => {
-    const res = await formRef.value?.validate();
-    if (!res) {
-      // do some thing
-      // you also can use html-type to submit
-    }
-  };
-  const reset = async () => {
-    await formRef.value?.resetFields();
-  };
-</script>
-
-<style scoped lang="less">
-  .form {
-    width: 540px;
-    margin: 0 auto;
-  }
-</style>

src/views/user/setting/components/certification-records.vue

@@ -1,77 +0,0 @@
-<template>
-  <a-card
-    class="general-card"
-    :title="$t('userSetting.certification.title.record')"
-    :header-style="{ border: 'none' }"
-  >
-    <a-table v-if="renderData.length" :data="renderData">
-      <template #columns>
-        <a-table-column
-          :title="$t('userSetting.certification.columns.certificationType')"
-        >
-          <template #cell>
-            {{ $t('userSetting.certification.cell.certificationType') }}
-          </template>
-        </a-table-column>
-        <a-table-column
-          :title="$t('userSetting.certification.columns.certificationContent')"
-          data-index="certificationContent"
-        />
-        <a-table-column :title="$t('userSetting.certification.columns.status')">
-          <template #cell="{ record }">
-            <p v-if="record.status === 0">
-              <span class="circle"></span>
-              <span>{{ $t('userSetting.certification.cell.auditing') }}</span>
-            </p>
-            <p v-if="record.status === 1">
-              <span class="circle pass"></span>
-              <span>{{ $t('userSetting.certification.cell.pass') }}</span>
-            </p>
-          </template>
-        </a-table-column>
-        <a-table-column
-          :title="$t('userSetting.certification.columns.time')"
-          data-index="time"
-        />
-        <a-table-column
-          :title="$t('userSetting.certification.columns.operation')"
-        >
-          <template #cell="{ record }">
-            <a-space>
-              <a-button type="text">
-                {{ $t('userSetting.certification.button.check') }}
-              </a-button>
-              <a-button v-if="record.status === 0" type="text">
-                {{ $t('userSetting.certification.button.withdraw') }}
-              </a-button>
-            </a-space>
-          </template>
-        </a-table-column>
-      </template>
-    </a-table>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { PropType } from 'vue';
-  import { CertificationRecord } from '@/api/user-center';
-
-  defineProps({
-    renderData: {
-      type: Array as PropType<CertificationRecord>,
-      default() {
-        return [];
-      },
-    },
-  });
-</script>
-
-<style scoped lang="less">
-  :deep(.arco-table-th) {
-    &:last-child {
-      .arco-table-th-item-title {
-        margin-left: 16px;
-      }
-    }
-  }
-</style>

src/views/user/setting/components/certification.vue

@@ -1,37 +0,0 @@
-<template>
-  <a-spin :loading="loading" style="width: 100%">
-    <EnterpriseCertification :enterprise-info="data.enterpriseInfo" />
-    <CertificationRecords :render-data="data.record" />
-  </a-spin>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import {
-    queryCertification,
-    UnitCertification,
-    EnterpriseCertificationModel,
-  } from '@/api/user-center';
-  import useLoading from '@/hooks/loading';
-  import EnterpriseCertification from './enterprise-certification.vue';
-  import CertificationRecords from './certification-records.vue';
-
-  const { loading, setLoading } = useLoading(true);
-  const data = ref<UnitCertification>({
-    enterpriseInfo: {} as EnterpriseCertificationModel,
-    record: [],
-  });
-  const fetchData = async () => {
-    try {
-      const { data: resData } = await queryCertification();
-      data.value = resData;
-    } catch (err) {
-      // you can report use errorHandler or other
-    } finally {
-      setLoading(false);
-    }
-  };
-  fetchData();
-</script>
-
-<style scoped lang="less"></style>

src/views/user/setting/components/enterprise-certification.vue

@@ -1,118 +0,0 @@
-<template>
-  <a-card
-    class="general-card"
-    :title="$t('userSetting.certification.title.enterprise')"
-    :header-style="{ padding: '0px 20px 16px 20px' }"
-  >
-    <template #extra>
-      <a-link>{{ $t('userSetting.certification.extra.enterprise') }}</a-link>
-    </template>
-    <a-descriptions
-      class="card-content"
-      :data="renderData"
-      :column="3"
-      align="right"
-      layout="inline-horizontal"
-      :label-style="{ fontWeight: 'normal' }"
-      :value-style="{
-        width: '200px',
-        paddingLeft: '8px',
-        textAlign: 'left',
-      }"
-    >
-      <template #label="{ label }">{{ $t(label) }} :</template>
-      <template #value="{ value, data }">
-        <a-tag
-          v-if="data.label === 'userSetting.certification.label.status'"
-          color="green"
-          size="small"
-        >
-          已认证
-        </a-tag>
-        <span v-else>{{ value }}</span>
-      </template>
-    </a-descriptions>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { PropType, computed } from 'vue';
-  import { EnterpriseCertificationModel } from '@/api/user-center';
-  import type { DescData } from '@arco-design/web-vue/es/descriptions/interface';
-
-  const props = defineProps({
-    enterpriseInfo: {
-      type: Object as PropType<EnterpriseCertificationModel>,
-      required: true,
-    },
-  });
-  const renderData = computed(() => {
-    const {
-      accountType,
-      status,
-      time,
-      legalPerson,
-      certificateType,
-      authenticationNumber,
-      enterpriseName,
-      enterpriseCertificateType,
-      organizationCode,
-    } = props.enterpriseInfo;
-    return [
-      {
-        label: 'userSetting.certification.label.accountType',
-        value: accountType,
-      },
-      {
-        label: 'userSetting.certification.label.status',
-        value: status,
-      },
-      {
-        label: 'userSetting.certification.label.time',
-        value: time,
-      },
-      {
-        label: 'userSetting.certification.label.legalPerson',
-        value: legalPerson,
-      },
-      {
-        label: 'userSetting.certification.label.certificateType',
-        value: certificateType,
-      },
-      {
-        label: 'userSetting.certification.label.authenticationNumber',
-        value: authenticationNumber,
-      },
-      {
-        label: 'userSetting.certification.label.enterpriseName',
-        value: enterpriseName,
-      },
-      {
-        label: 'userSetting.certification.label.enterpriseCertificateType',
-        value: enterpriseCertificateType,
-      },
-      {
-        label: 'userSetting.certification.label.organizationCode',
-        value: organizationCode,
-      },
-    ] as DescData[];
-  });
-</script>
-
-<style scoped lang="less">
-  .card-content {
-    width: 100%;
-    padding: 20px;
-    background-color: rgb(var(--gray-1));
-  }
-
-  .item-label {
-    min-width: 98px;
-    color: var(--color-text-8);
-    text-align: right;
-
-    &::after {
-      content: ':';
-    }
-  }
-</style>

src/views/user/setting/components/security-settings.vue

@@ -1,129 +0,0 @@
-<template>
-  <a-list :bordered="false">
-    <a-list-item>
-      <a-list-item-meta>
-        <template #avatar>
-          <a-typography-paragraph>
-            {{ $t('userSetting.SecuritySettings.form.label.password') }}
-          </a-typography-paragraph>
-        </template>
-        <template #description>
-          <div class="content">
-            <a-typography-paragraph>
-              {{ $t('userSetting.SecuritySettings.placeholder.password') }}
-            </a-typography-paragraph>
-          </div>
-          <div class="operation">
-            <a-link>
-              {{ $t('userSetting.SecuritySettings.button.update') }}
-            </a-link>
-          </div>
-        </template>
-      </a-list-item-meta>
-    </a-list-item>
-    <a-list-item>
-      <a-list-item-meta>
-        <template #avatar>
-          <a-typography-paragraph>
-            {{ $t('userSetting.SecuritySettings.form.label.securityQuestion') }}
-          </a-typography-paragraph>
-        </template>
-        <template #description>
-          <div class="content">
-            <a-typography-paragraph class="tip">
-              {{
-                $t('userSetting.SecuritySettings.placeholder.securityQuestion')
-              }}
-            </a-typography-paragraph>
-          </div>
-          <div class="operation">
-            <a-link>
-              {{ $t('userSetting.SecuritySettings.button.settings') }}
-            </a-link>
-          </div>
-        </template>
-      </a-list-item-meta>
-    </a-list-item>
-    <a-list-item>
-      <a-list-item-meta>
-        <template #avatar>
-          <a-typography-paragraph>
-            {{ $t('userSetting.SecuritySettings.form.label.phone') }}
-          </a-typography-paragraph>
-        </template>
-        <template #description>
-          <div class="content">
-            <a-typography-paragraph>
-              已绑定：150******50
-            </a-typography-paragraph>
-          </div>
-          <div class="operation">
-            <a-link>
-              {{ $t('userSetting.SecuritySettings.button.update') }}
-            </a-link>
-          </div>
-        </template>
-      </a-list-item-meta>
-    </a-list-item>
-    <a-list-item>
-      <a-list-item-meta>
-        <template #avatar>
-          <a-typography-paragraph>
-            {{ $t('userSetting.SecuritySettings.form.label.email') }}
-          </a-typography-paragraph>
-        </template>
-        <template #description>
-          <div class="content">
-            <a-typography-paragraph class="tip">
-              {{ $t('userSetting.SecuritySettings.placeholder.email') }}
-            </a-typography-paragraph>
-          </div>
-          <div class="operation">
-            <a-link>
-              {{ $t('userSetting.SecuritySettings.button.update') }}
-            </a-link>
-          </div>
-        </template>
-      </a-list-item-meta>
-    </a-list-item>
-  </a-list>
-</template>
-
-<script lang="ts" setup></script>
-
-<style scoped lang="less">
-  :deep(.arco-list-item) {
-    border-bottom: none !important;
-
-    .arco-typography {
-      margin-bottom: 20px;
-    }
-
-    .arco-list-item-meta-avatar {
-      margin-bottom: 1px;
-    }
-
-    .arco-list-item-meta {
-      padding: 0;
-    }
-  }
-
-  :deep(.arco-list-item-meta-content) {
-    flex: 1;
-    border-bottom: 1px solid var(--color-neutral-3);
-
-    .arco-list-item-meta-description {
-      display: flex;
-      flex-flow: row;
-      justify-content: space-between;
-
-      .tip {
-        color: rgb(var(--gray-6));
-      }
-
-      .operation {
-        margin-right: 6px;
-      }
-    }
-  }
-</style>

src/views/user/setting/index.vue

@@ -1,57 +1,41 @@
 <template>
   <div class="container">
-    <Breadcrumb :items="['menu.user', 'menu.user.setting']" />
-    <a-row style="margin-bottom: 16px">
+    <a-row :style="{ marginBottom: '10px' }">
       <a-col :span="24">
         <UserPanel />
       </a-col>
     </a-row>
     <a-row class="wrapper">
-      <a-col :span="24">
-        <a-tabs default-active-key="1" type="rounded">
-          <a-tab-pane key="1" :title="$t('userSetting.tab.basicInformation')">
-            <BasicInformation />
-          </a-tab-pane>
-          <a-tab-pane key="2" :title="$t('userSetting.tab.securitySettings')">
-            <SecuritySettings />
-          </a-tab-pane>
-          <a-tab-pane key="3" :title="$t('userSetting.tab.certification')">
-            <Certification />
-          </a-tab-pane>
-        </a-tabs>
-      </a-col>
+      <a-col :span="24"> </a-col>
     </a-row>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import UserPanel from './components/user-panel.vue';
-  import BasicInformation from './components/basic-information.vue';
-  import SecuritySettings from './components/security-settings.vue';
-  import Certification from './components/certification.vue';
+import UserPanel from './components/user-panel.vue';
 </script>
 
 <script lang="ts">
-  export default {
-    name: 'Setting',
-  };
+export default {
+  name: 'Setting',
+};
 </script>
 
 <style scoped lang="less">
-  .container {
-    padding: 0 10px 20px;
-  }
+.container {
+  padding: 0 10px 20px;
+}
 
-  .wrapper {
-    min-height: 580px;
-    padding: 20px 0 0 20px;
-    background-color: var(--color-bg-2);
-    border-radius: 4px;
-  }
+.wrapper {
+  min-height: 580px;
+  padding: 20px 0 0 20px;
+  background-color: var(--color-bg-2);
+  border-radius: 4px;
+}
 
-  :deep(.section-title) {
-    margin-top: 0;
-    margin-bottom: 16px;
-    font-size: 14px;
-  }
+:deep(.section-title) {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
 </style>

src/views/user/setting/locale/en-US.ts

@@ -25,67 +25,4 @@ export default {
   'userSetting.tab.basicInformation': 'Basic Information',
   'userSetting.tab.securitySettings': 'Security Settings',
   'userSetting.tab.certification': 'Certification',
-  'userSetting.basicInfo.form.label.email': 'Email',
-  'userSetting.basicInfo.placeholder.email': `Please enter your email address, such as xxx{'@'}bytedance.com`,
-  'userSetting.form.error.email.required': 'Please enter email address',
-  'userSetting.basicInfo.form.label.nickname': 'Nickname',
-  'userSetting.basicInfo.placeholder.nickname': 'Please enter nickname',
-  'userSetting.form.error.nickname.required': 'Please enter nickname',
-  'userSetting.basicInfo.form.label.countryRegion': 'Country/region',
-  'userSetting.basicInfo.placeholder.countryRegion':
-    'Please select country/region',
-  'userSetting.form.error.countryRegion.required':
-    'Please select country/region',
-  'userSetting.basicInfo.form.label.area': 'Area',
-  'userSetting.basicInfo.placeholder.area': 'Please select area',
-  'userSetting.form.error.area.required': 'Please Select a area',
-  'userSetting.basicInfo.form.label.address': 'Address',
-  'userSetting.basicInfo.placeholder.address': 'Please enter address',
-  'userSetting.basicInfo.form.label.profile': 'Personal profile',
-  'userSetting.basicInfo.placeholder.profile':
-    'Please enter your profile, no more than 200 words',
-  'userSetting.form.error.profile.maxLength': 'No more than 200 words',
-  'userSetting.SecuritySettings.form.label.password': 'Login Password',
-  'userSetting.SecuritySettings.placeholder.password':
-    'Has been set. The password must contain at least six letters, digits, and special characters except Spaces. The password must contain both uppercase and lowercase letters.',
-  'userSetting.SecuritySettings.form.label.securityQuestion':
-    'Security Question',
-  'userSetting.SecuritySettings.placeholder.securityQuestion':
-    'You have not set the password protection question. The password protection question can effectively protect the account security.',
-  'userSetting.SecuritySettings.form.label.phone': 'Phone',
-  // 'userSetting.SecuritySettings.placeholder.phone': '已绑定：150******50',
-  'userSetting.SecuritySettings.form.label.email': 'Email',
-  'userSetting.SecuritySettings.placeholder.email':
-    'You have not set a mailbox yet. The mailbox binding can be used to retrieve passwords and receive notifications.',
-  'userSetting.SecuritySettings.button.settings': 'Settings',
-  'userSetting.SecuritySettings.button.update': 'Update',
-  'userSetting.certification.title.enterprise':
-    'Enterprise Real Name Authentication',
-  'userSetting.certification.extra.enterprise':
-    'Modifying an Authentication Body',
-  'userSetting.certification.label.accountType': 'Account Type',
-  'userSetting.certification.label.status': 'status',
-  'userSetting.certification.label.time': 'time',
-  'userSetting.certification.label.legalPerson': 'Legal Person Name',
-  'userSetting.certification.label.certificateType':
-    'Types of legal person documents',
-  'userSetting.certification.label.authenticationNumber':
-    'Legal person certification number',
-  'userSetting.certification.label.enterpriseName': 'Enterprise Name',
-  'userSetting.certification.label.enterpriseCertificateType':
-    'Types of corporate certificates',
-  'userSetting.certification.label.organizationCode': 'Organization Code',
-  'userSetting.certification.title.record': 'Certification Records',
-  'userSetting.certification.columns.certificationType': 'Certification Type',
-  'userSetting.certification.cell.certificationType':
-    'Enterprise certificate Certification',
-  'userSetting.certification.columns.certificationContent':
-    'Certification Content',
-  'userSetting.certification.columns.status': 'Status',
-  'userSetting.certification.cell.pass': 'Pass',
-  'userSetting.certification.cell.auditing': 'Auditing',
-  'userSetting.certification.columns.time': 'Time',
-  'userSetting.certification.columns.operation': 'Operation',
-  'userSetting.certification.button.check': 'Check',
-  'userSetting.certification.button.withdraw': 'Withdraw',
 };

src/views/user/setting/locale/zh-CN.ts

@@ -24,57 +24,4 @@ export default {
   'userSetting.tab.basicInformation': '基础信息',
   'userSetting.tab.securitySettings': '安全设置',
   'userSetting.tab.certification': '实名认证',
-  'userSetting.basicInfo.form.label.email': '邮箱',
-  'userSetting.basicInfo.placeholder.email': `请输入邮箱地址，如xxx{'@'}bytedance.com`,
-  'userSetting.form.error.email.required': '请输入邮箱',
-  'userSetting.basicInfo.form.label.nickname': '昵称',
-  'userSetting.basicInfo.placeholder.nickname': '请输入您的昵称',
-  'userSetting.form.error.nickname.required': '请输入昵称',
-  'userSetting.basicInfo.form.label.countryRegion': '国家/地区',
-  'userSetting.basicInfo.placeholder.countryRegion': '请选择',
-  'userSetting.form.error.countryRegion.required': '请选择国家/地区',
-  'userSetting.basicInfo.form.label.area': '所在区域',
-  'userSetting.basicInfo.placeholder.area': '请选择',
-  'userSetting.form.error.area.required': '请选择所在区域',
-  'userSetting.basicInfo.form.label.address': '具体地址',
-  'userSetting.basicInfo.placeholder.address': '请输入您的地址',
-  'userSetting.basicInfo.form.label.profile': '个人简介',
-  'userSetting.basicInfo.placeholder.profile':
-    '请输入您的个人简介，最多不超过200字。',
-  'userSetting.form.error.profile.maxLength': '最多不超过200字',
-  'userSetting.SecuritySettings.form.label.password': '登录密码',
-  'userSetting.SecuritySettings.placeholder.password':
-    '已设置。密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。',
-  'userSetting.SecuritySettings.form.label.securityQuestion': '密保问题',
-  'userSetting.SecuritySettings.placeholder.securityQuestion':
-    '您暂未设置密保问题，密保问题可以有效的保护账号的安全。',
-  'userSetting.SecuritySettings.form.label.phone': '安全手机',
-  // 'userSetting.SecuritySettings.placeholder.phone': '已绑定：150******50',
-  'userSetting.SecuritySettings.form.label.email': '安全邮箱',
-  'userSetting.SecuritySettings.placeholder.email':
-    '您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。',
-  'userSetting.SecuritySettings.button.settings': '设置',
-  'userSetting.SecuritySettings.button.update': '修改',
-  'userSetting.certification.title.enterprise': '企业实名认证',
-  'userSetting.certification.extra.enterprise': '修改认证主体',
-  'userSetting.certification.label.accountType': '账号类型',
-  'userSetting.certification.label.status': '认证状态',
-  'userSetting.certification.label.time': '认证时间',
-  'userSetting.certification.label.legalPerson': '法人姓名',
-  'userSetting.certification.label.certificateType': '法人证件类型',
-  'userSetting.certification.label.authenticationNumber': '法人认证号码',
-  'userSetting.certification.label.enterpriseName': '企业名称',
-  'userSetting.certification.label.enterpriseCertificateType': '企业证件类型',
-  'userSetting.certification.label.organizationCode': '组织机构代码',
-  'userSetting.certification.title.record': '认证记录',
-  'userSetting.certification.columns.certificationType': '认证类型',
-  'userSetting.certification.cell.certificationType': '企业证件认证',
-  'userSetting.certification.columns.certificationContent': '认证内容',
-  'userSetting.certification.columns.status': '当前状态',
-  'userSetting.certification.cell.pass': '已通过',
-  'userSetting.certification.cell.auditing': '审核中',
-  'userSetting.certification.columns.time': '创建时间',
-  'userSetting.certification.columns.operation': '操作',
-  'userSetting.certification.button.check': '查看',
-  'userSetting.certification.button.withdraw': '撤回',
 };