feat(projects): 新增项目详情页面，用于接口的添加和修改

electron/utils/mock/types.d.ts

@@ -3,6 +3,8 @@ export type Method = 'get' | 'delete' | 'head' | 'options' | 'post' | 'put' | 'p
 // eslint-disable-next-line no-warning-comments
 // TODO 修复响应数据类型
 export type tMockItem = {
+  name: string;
+  id: number;
   enable: boolean;
   url: string;
   method: Method;

src/router/modules/mock.ts

@@ -12,6 +12,17 @@ const functionRoute: AuthRoute.Route = {
         requiresAuth: true,
         icon: 'nonicons:interface-16'
       }
+    },
+    {
+      name: 'mock_project-detail',
+      path: '/mock/project-detail',
+      component: 'self',
+      meta: {
+        title: '项目详情',
+        requiresAuth: true,
+        hide: true,
+        icon: 'nonicons:interface-16'
+      }
     }
   ],
   meta: {

src/typings/page-route.d.ts

@@ -31,6 +31,7 @@ declare namespace PageRoute {
     | 'management_route'
     | 'management_user'
     | 'mock'
+    | 'mock_project-detail'
     | 'mock_projects'
     | 'plugin'
     | 'plugin_charts'
@@ -64,6 +65,7 @@ declare namespace PageRoute {
     | 'management_role'
     | 'management_route'
     | 'management_user'
+    | 'mock_project-detail'
     | 'mock_projects'
     | 'plugin_charts_antv'
     | 'plugin_charts_echarts'

src/views/index.ts

@@ -16,6 +16,7 @@ export const views: Record<
   management_role: () => import('./management/role/index.vue'),
   management_route: () => import('./management/route/index.vue'),
   management_user: () => import('./management/user/index.vue'),
+  'mock_project-detail': () => import('./mock/project-detail/index.vue'),
   mock_projects: () => import('./mock/projects/index.vue'),
   plugin_charts_antv: () => import('./plugin/charts/antv/index.vue'),
   plugin_charts_echarts: () => import('./plugin/charts/echarts/index.vue'),

src/views/mock/project-detail/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <n-space :vertical="true" :size="16">
+    <n-card :title="project?.config?.projectName" :bordered="false" size="small" class="shadow-sm rounded-16px">
+      <n-space vertical>
+        <n-layout>
+          <n-layout has-sider>
+            <n-layout-sider
+              bordered
+              show-trigger
+              collapse-mode="width"
+              :collapsed-width="64"
+              :width="240"
+              :native-scrollbar="false"
+              style="min-height: 500px"
+            >
+              <n-menu
+                :collapsed-width="64"
+                :collapsed-icon-size="22"
+                :options="menuOptions"
+                @update:value="handleUpdateValue"
+              />
+            </n-layout-sider>
+            <n-layout style="min-height: 500px">
+              <n-space vertical>
+                <n-form ref="formRef" inline :label-width="80" :model="mockData" size="medium">
+                  <n-form-item label="项目名称" path="user.name">
+                    <n-input v-model:value="mockData.name" placeholder="请输入接口名称" />
+                  </n-form-item>
+                  <n-form-item label="url" path="phone">
+                    <n-input v-model:value="mockData.url" placeholder="/test" />
+                  </n-form-item>
+                  <n-form-item>
+                    <n-select
+                      v-model:value="mockData.method"
+                      :options="[
+                        { label: 'get', value: 'get' },
+                        { label: 'delete', value: 'delete' },
+                        { label: 'put', value: 'put' },
+                        { label: 'post', value: 'post' }
+                      ]"
+                      style="min-width: 100px"
+                    />
+                  </n-form-item>
+                  <n-form-item>
+                    <n-button attr-type="button" type="warning" dashed> 取消 </n-button>
+                  </n-form-item>
+                </n-form>
+              </n-space>
+            </n-layout>
+          </n-layout>
+        </n-layout>
+      </n-space>
+      <n-space :vertical="true" :size="12">
+        <n-button @click="handleToProjects">返回</n-button>
+      </n-space>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { routeName } from '@/router';
+import { useProjectStore } from '@/store';
+import { useRouterPush } from '@/composables';
+import type { tMockProject, tMockItem } from '~/electron/utils/mock/types';
+
+const { projectList } = useProjectStore();
+const { routerPush } = useRouterPush();
+const route = useRoute();
+const id = Number(route.query?.id);
+const baseMockData: tMockItem = {
+  name: '',
+  enable: true,
+  url: '',
+  id: 0,
+  method: 'get',
+  data: {
+    code: 200,
+    msg: 'holle',
+    data: {
+      'list|1-10': [
+        {
+          'id|+1': 1
+        }
+      ]
+    }
+  },
+  timeout: 1000,
+  responseType: 'json'
+};
+const mockData = ref<tMockItem>(baseMockData);
+const project = ref<tMockProject | undefined>(projectList.find((p: tMockProject) => p.config.id === id));
+const menuOptions = project.value?.mockList
+  ?.map(mock => ({
+    label: mock?.name || '',
+    key: mock?.id || 1,
+    id: mock?.id || 1
+  }))
+  .concat([
+    {
+      label: '添加',
+      key: 0,
+      id: 0
+    }
+  ]);
+
+const handleToProjects = () => {
+  routerPush({ name: routeName('mock_projects') });
+};
+const handleUpdateValue = (key: number, item: any) => {
+  console.log(key);
+  console.log(item);
+};
+</script>
+
+<style scoped></style>

src/views/mock/projects/index.vue

@@ -62,10 +62,14 @@
 import { onMounted, reactive, ref } from 'vue';
 import { NSpace, NButton, NPopconfirm, NTime } from 'naive-ui';
 import type { DataTableColumn, FormInst } from 'naive-ui';
+import { routeName } from '@/router';
 import { useProjectStore } from '@/store';
+import { useRouterPush } from '@/composables';
 import { useLoadingEmpty } from '@/hooks';
 import { ipcRenderer } from '@/service/api/electronAPI';
 import type { tMockProject } from '~/electron/utils/mock/types';
+
+const { routerPush } = useRouterPush();
 const project = useProjectStore();
 
 const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
@@ -117,8 +121,10 @@ const addProject = async () => {
       config: { ...formValue, createdAt: id, id, lastUpdateAt: id },
       mockList: [
         {
+          name: 'test',
           enable: true,
           url: '/test',
+          id,
           method: 'get',
           data: {
             code: 200,
@@ -168,6 +174,10 @@ const handleValidateClick = async (e: any) => {
   }
 };
 
+const viewProject = (row: tMockProject) => {
+  routerPush({ name: routeName('mock_project-detail'), query: { id: row.config.id } });
+};
+
 const columns: DataTableColumn<tMockProject>[] = [
   {
     title: '项目名称',
@@ -258,6 +268,9 @@ const columns: DataTableColumn<tMockProject>[] = [
               )
             }}
           </NPopconfirm>
+          <NButton type="info" size={'small'} onClick={() => viewProject(row)}>
+            查看
+          </NButton>
         </NSpace>
       );
     }