feat(工作台): 工作台页面路由搭建&小tab卡片页面

frontend/src/enums/routeEnum.ts

@@ -74,6 +74,10 @@ export enum UITestRouteEnum {
 
 export enum WorkbenchRouteEnum {
   WORKBENCH = 'workstation',
+  WORKBENCH_INDEX = 'workstationIndex',
+  WORKBENCH_INDEX_WAIT = 'workstationIndexWait',
+  WORKBENCH_INDEX_FOLLOW = 'workstationIndexFollowed',
+  WORKBENCH_INDEX_CREATED = 'workstationIndexCreated',
 }
 
 export enum SettingRouteEnum {

frontend/src/locale/en-US/index.ts

@@ -20,6 +20,10 @@ Object.keys(_Vmodules).forEach((key) => {
 export default {
   message: {
     'menu.workbench': 'Workbench',
+    'menu.workbenchHomeSort': 'Home page',
+    'menu.workbenchWaitSort': 'To be done',
+    'menu.workbenchFollowSort': 'My follow',
+    'menu.workbenchCreatedSort': 'My created',
     'menu.testPlan': 'Test Plan',
     'menu.testPlanGroup': 'Planning groups',
     'menu.testPlanShort': 'Plan',

frontend/src/locale/zh-CN/index.ts

@@ -19,6 +19,10 @@ Object.keys(_Vmodules).forEach((key) => {
 export default {
   message: {
     'menu.workbench': '工作台',
+    'menu.workbenchHomeSort': '首页',
+    'menu.workbenchWaitSort': '待办',
+    'menu.workbenchFollowSort': '我关注的',
+    'menu.workbenchCreatedSort': '我创建的',
     'menu.testPlan': '测试计划',
     'menu.testPlanGroup': '计划组',
     'menu.testPlanShort': '计划',

frontend/src/router/routes/modules/workbench.ts

@@ -0,0 +1,68 @@
+import { WorkbenchRouteEnum } from '@/enums/routeEnum';
+
+import { DEFAULT_LAYOUT } from '../base';
+import type { AppRouteRecordRaw } from '../types';
+
+const TestPlan: AppRouteRecordRaw = {
+  path: '/workstation',
+  name: WorkbenchRouteEnum.WORKBENCH,
+  redirect: '/workstation/home',
+  component: DEFAULT_LAYOUT,
+  meta: {
+    locale: 'menu.workbench',
+    collapsedLocale: 'menu.workbenchHomeSort',
+    icon: 'icon-a-icon_test-tracking_filled1',
+    order: 0,
+    hideChildrenInMenu: true,
+    roles: ['*'],
+  },
+  children: [
+    // 首页
+    {
+      path: 'home',
+      name: WorkbenchRouteEnum.WORKBENCH_INDEX,
+      component: () => import('@/views/workbench/homePage/index.vue'),
+      meta: {
+        locale: 'menu.workbenchHomeSort',
+        roles: ['*'],
+        isTopMenu: true,
+      },
+    },
+    // TODO 更换component 页面即可
+    // 待办
+    {
+      path: 'wait',
+      name: WorkbenchRouteEnum.WORKBENCH_INDEX_WAIT,
+      component: () => import('@/views/workbench/homePage/index.vue'),
+      meta: {
+        locale: 'menu.workbenchWaitSort',
+        roles: ['*'],
+        isTopMenu: true,
+      },
+    },
+    // 我关注的
+    {
+      path: 'followed',
+      name: WorkbenchRouteEnum.WORKBENCH_INDEX_FOLLOW,
+      component: () => import('@/views/workbench/homePage/index.vue'),
+      meta: {
+        locale: 'menu.workbenchFollowSort',
+        roles: ['*'],
+        isTopMenu: true,
+      },
+    },
+    // 我创建的
+    {
+      path: 'created',
+      name: WorkbenchRouteEnum.WORKBENCH_INDEX_CREATED,
+      component: () => import('@/views/workbench/homePage/index.vue'),
+      meta: {
+        locale: 'menu.workbenchCreatedSort',
+        roles: ['*'],
+        isTopMenu: true,
+      },
+    },
+  ],
+};
+
+export default TestPlan;

frontend/src/views/workbench/homePage/components/tabCard.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <a-tabs default-active-key="1" class="ms-tab-card">
+      <a-tab-pane v-for="item of props.contentTabList" :key="item.value" :title="`${item.label}`">
+        <template #title>
+          <div>
+            <div class="card-title flex items-center gap-[8px]">
+              <MsIcon :type="item.icon" class="text-[rgb(var(--primary-5))]" size="16" />
+              <div class="text-[var(--color-text-1)]"> {{ item.label }}</div>
+            </div>
+            <div class="card-number !text-[20px] !font-medium"> {{ addCommasToNumber(item.count) }} </div>
+          </div>
+        </template>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import { addCommasToNumber } from '@/utils';
+
+  const props = defineProps<{
+    contentTabList: { label: string | number; value: string | number; count: number; icon: string }[];
+  }>();
+</script>
+
+<style scoped lang="less">
+  :deep(.ms-tab-card) {
+    .arco-tabs-nav-tab {
+      .arco-tabs-nav-ink {
+        display: none;
+      }
+      .arco-tabs-tab {
+        margin: 0 8px;
+        padding: 16px !important;
+        border: 1px solid var(--color-text-n8);
+        border-radius: 4px;
+        &.arco-tabs-tab-active {
+          color: var(--color-text-1);
+        }
+        &:hover {
+          color: var(--color-text-1);
+        }
+      }
+      .arco-tabs-tab-title {
+        .card-number {
+          margin-left: 24px;
+          font-size: 20px !important;
+        }
+      }
+    }
+  }
+  :deep(.arco-tabs-nav-button) {
+    width: 36px;
+    height: 36px;
+    border: 1px solid var(--color-text-n8);
+    border-radius: 2px;
+  }
+</style>

frontend/src/views/workbench/homePage/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <!-- TOTO 页面待写 -->
+  <div>工作台 </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+</script>
+
+<style scoped></style>