feat: table 接口 对接

frontend/.env.development

@@ -1 +1,2 @@
-VITE_API_BASE_URL= 'http://localhost:8080'
+VITE_API_BASE_URL= 'http://192.168.200.10:8081'
+VUE_APP_Access_Control_Allow_Origin= '*'

frontend/config/vite.config.dev.ts

@@ -11,6 +11,12 @@ export default mergeConfig(
       fs: {
         strict: true,
       },
+      proxy: {
+        '/api': {
+          target: 'http://192.168.200.10:8081',
+          changeOrigin: true,
+        },
+      },
     },
     plugins: [
       eslint({

frontend/src/api/http/index.ts

@@ -76,12 +76,12 @@ const transform: AxiosTransform = {
       throw new Error(t('api.apiRequestFailed'));
     }
     //  这里 code，result，message为 后台统一的字段
-    const { code, result, message } = data;
+    const { code, data: dataResult, message } = data;
 
     // TODO:定义完成功code后需要重写
     const hasSuccess = data && Reflect.has(data, 'code') && Number(code) === ResultEnum.SUCCESS;
     if (hasSuccess) {
-      return result;
+      return dataResult;
     }
 
     // 在此处根据自己项目的实际情况对不同的code执行不同的操作

frontend/src/api/modules/api-test/index.ts

@@ -2,13 +2,15 @@ import MSR from '@/api/http/index';
 import { GetApiTestList, GetApiTestListUrl } from '@/api/requrls/api-test';
 import { QueryParams } from '@/components/ms-table/useTable';
 import { ApiTestListI } from '@/models/api-test';
-import CommonReponse from '@/models/common';
 
 export function getTableList(params: QueryParams) {
   const { current, pageSize } = params;
-  return MSR.get<CommonReponse<ApiTestListI>>({ url: `${GetApiTestList}/${current}/${pageSize}` });
+  return MSR.post<ApiTestListI>({
+    url: GetApiTestList,
+    data: { current, pageSize, projectId: 'test-project-id' },
+  });
 }
 
 export function getlist() {
-  return MSR.get<CommonReponse<ApiTestListI>>({ url: GetApiTestListUrl });
+  return MSR.get<ApiTestListI>({ url: GetApiTestListUrl });
 }

frontend/src/api/requrls/api-test.ts

@@ -1,2 +1,2 @@
 export const GetApiTestListUrl = '/mock/list/menu';
-export const GetApiTestList = '/mock/api-test/define/list/';
+export const GetApiTestList = '/api/definition/page';

frontend/src/assets/style/arco-reset.less

@@ -1,19 +1,21 @@
-/** 表格样式  **/
+.arco-reset {
-.arco-table-cell {
+  /** 表格样式  **/
-  .circle {
+  .arco-table-cell {
-    display: inline-block;
+    .circle {
-    margin-right: 4px;
+      display: inline-block;
-    width: 6px;
+      margin-right: 4px;
-    height: 6px;
+      width: 6px;
-    border-radius: 50%;
+      height: 6px;
-    background-color: rgb(var(--blue-6));
+      border-radius: 50%;
-    &.pass {
+      background-color: rgb(var(--blue-6));
-      background-color: rgb(var(--green-6));
+      &.pass {
+        background-color: rgb(var(--green-6));
+      }
     }
   }
-}
 
-/** Tabs 组件样式 **/
+  /** Tabs 组件样式 **/
-.arco-tabs-nav-add-btn {
+  .arco-tabs-nav-add-btn {
-  font-size: var(--font-size-base);
+    font-size: var(--font-size-base);
+  }
 }

frontend/src/components/ms-table/type.ts

@@ -13,7 +13,7 @@ export interface MsTabelProps extends MsPaginationI {
   // 表格数据 - 详见 TableData  https://arco.design/web-vue/components/table-data;
   data: TableData[];
   // 表格尺寸
-  size?: 'small' | 'default' | 'large';
+  size?: 'mini' | 'small' | 'default' | 'large';
   // 表格是否可滚动
   scroll?: {
     x?: number | string;

frontend/src/components/ms-table/useTable.ts

@@ -3,7 +3,6 @@
 
 import { ref } from 'vue';
 import { MsTabelProps, MsTableData, MsTableColumn } from './type';
-import CommonReponse from '@/models/common';
 import { ApiTestListI } from '@/models/api-test';
 
 export interface Pagination {
@@ -19,11 +18,11 @@ export interface QueryParams {
   [key: string]: any;
 }
 
-type GetListFunc = (v: QueryParams) => Promise<CommonReponse<ApiTestListI>>;
+type GetListFunc = (v: QueryParams) => Promise<ApiTestListI>;
 export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<MsTabelProps>) {
   const defaultProps: MsTabelProps = {
     'bordered': true,
-    'size': 'small',
+    'size': 'mini',
     'scroll': { y: 550, x: '1400px' },
     'expandable': false,
     'loading': true,
@@ -85,7 +84,7 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
   const loadList = async () => {
     const { current, pageSize } = propsRes.value.pagination as Pagination;
     setLoading(true);
-    const { data } = await loadListFunc({
+    const data = await loadListFunc({
       current,
       pageSize,
       ...loadListParams.value,

frontend/src/layout/default-layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout class="layout" :class="{ mobile: appStore.hideMenu }">
+  <a-layout class="layout arco-reset" :class="{ mobile: appStore.hideMenu }">
     <div v-if="navbar" class="layout-navbar">
       <NavBar />
     </div>

frontend/src/models/common.ts

@@ -1,5 +1,6 @@
 export default interface CommonReponse<T> {
   code: number;
   message: string;
+  messageDetail: string;
   data: T;
 }

frontend/src/utils/setup-mock.ts

@@ -4,18 +4,18 @@ export default ({ mock, setup }: { mock?: boolean; setup: () => void }) => {
   if (mock !== false && debug) setup();
 };
 
-export const successResponseWrap = (result: unknown) => {
+export const successResponseWrap = (data: unknown) => {
   return {
-    result,
+    data,
     status: 'ok',
     message: '请求成功',
     code: 0,
   };
 };
 
-export const failResponseWrap = (result: unknown, message: string, code = 50000) => {
+export const failResponseWrap = (data: unknown, message: string, code = 50000) => {
   return {
-    result,
+    data,
     status: 'fail',
     message,
     code,

frontend/types/axios.d.ts

@@ -18,10 +18,11 @@ export interface RequestOptions {
 }
 
 export interface Result<T = any> {
-  code: string;
+  code: number;
   type: 'success' | 'error' | 'warning';
   message: string;
-  result: T;
+  messageDetail?: string;
+  data: T;
 }
 
 // multipart/form-data: upload file