fix(projects): 修复切换接口详情的时候响应数据编辑框内容没有更改的问题

Author: lixin59

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -1,7 +1,7 @@
 name: Bug提交
 description: 在使用软件或功能的过程中遇到了错误
 title: '[Bug]: '
-labels: [ "bug?" ]
+labels: [bug?]
 
 body:
   - type: markdown

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ windows-latest, ubuntu-latest ]
+        os: [windows-latest, ubuntu-latest]
     steps:
       - uses: actions/checkout@v3
         with:
@@ -66,7 +66,7 @@ jobs:
         uses: softprops/action-gh-release@v1
         if: startsWith(github.ref, 'refs/tags/')
         with:
-          files: "release/**"
+          files: 'release/**'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

src/store/modules/mock-project/index.ts

@@ -49,9 +49,19 @@ export const useProjectStore = defineStore('mock-project', () => {
 
   const editMock = async (pid: number, id: number, mock: tMockItem) => {
     try {
-      await removeMock(pid, id);
-      await addMock(pid, mock);
-      return { code: 200 };
+      const project = projectList.value?.find(p => p?.config?.id === pid);
+      if (!project) {
+        return { code: 0, data: [], msg: '没有找到该项目' };
+      }
+      const mockList = project.mockList?.map(m => {
+        if (m.id === id) {
+          return mock;
+        }
+        return m;
+      });
+      project.mockList = mockList;
+      const res: { code: number; data: tMockProject[] } = await updateServer();
+      return { ...res, msg: '保存成功' };
     } catch (e: any) {
       return { code: 0, msg: e };
     }

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

@@ -69,7 +69,7 @@
         <n-divider title-placement="left"> 请求参数 </n-divider>
         <n-space :vertical="true"> 开发中敬请期待 </n-space>
         <n-divider title-placement="left"> 响应数据 </n-divider>
-        <n-code :code="resData" language="json" />
+        <n-code :code="resData" language="json" word-wrap />
       </n-tab-pane>
     </n-tabs>
   </n-card>
@@ -165,7 +165,7 @@ const saveData = async (e: any) => {
           window.$message?.error(data.msg);
           return;
         }
-        window.$message?.success('验证成功');
+        window.$message?.success('保存成功');
       } else {
         window.$message?.error('Invalid');
       }
@@ -195,6 +195,7 @@ const fetchData = () => {
   if (data) {
     mockData.value = data;
   }
+  resData.value = '';
 };
 watch(
   () => props.id,

src/views/mock/api-list/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <n-card title="接口数据" class="h-full shadow-sm rounded-16px">
+  <n-card title="接口数据" class="h-full shadow-sm">
     <n-space :vertical="true">
-      <loading-empty-wrapper class="h-480px" :loading="loading" :empty="empty">
-        <n-data-table :columns="columns" :data="mockList" :flex-height="true" class="h-480px" />
+      <loading-empty-wrapper class="h-500px" :loading="loading" :empty="empty">
+        <n-data-table :columns="columns" :data="mockList" :flex-height="true" class="h-500px" />
       </loading-empty-wrapper>
     </n-space>
   </n-card>
 </template>
 
 <script setup lang="tsx">
 import { watch } from 'vue';
-import { NSpace, NTag, NPopconfirm, NButton } from 'naive-ui';
+import { NSpace, NTag, NPopconfirm, NButton, NTime } from 'naive-ui';
 import type { DataTableColumn } from 'naive-ui';
 import { useProjectStore } from '@/store';
 import { useLoadingEmpty } from '@/hooks';
@@ -71,6 +71,7 @@ const columns: DataTableColumn<tMockItem>[] = [
   {
     title: '接口路径',
     key: 'method',
+    minWidth: 400,
     align: 'center',
     render: row => {
       return (
@@ -81,8 +82,33 @@ const columns: DataTableColumn<tMockItem>[] = [
       );
     }
   },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    align: 'center',
+    render: row => {
+      return (
+        <NSpace justify={'center'}>
+          <NTime time={row.createdAt} />
+        </NSpace>
+      );
+    }
+  },
+  {
+    title: '最后更新时间',
+    key: 'lastUpdateAt',
+    align: 'center',
+    render: row => {
+      return (
+        <NSpace justify={'center'}>
+          <NTime time={row.lastUpdateAt} />
+        </NSpace>
+      );
+    }
+  },
   {
     title: '状态',
+    width: 100,
     key: 'enable',
     align: 'center',
     render: row => {
@@ -96,14 +122,16 @@ const columns: DataTableColumn<tMockItem>[] = [
   {
     title: '延时',
     key: 'timeout',
+    width: 100,
     align: 'center',
     render: row => {
-      return row.timeout;
+      return `${row.timeout}ms`;
     }
   },
   {
     key: 'action',
-    title: 'Action',
+    title: '操作',
+    width: 80,
     align: 'center',
     render: row => {
       return (

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

@@ -32,7 +32,9 @@
                 :mock-list="project?.mockList || []"
                 :base-url="project?.config?.baseUrl || ''"
               />
-              <ApiDetail v-else :id="mockId" :project="project" />
+              <template v-for="item in project?.mockList">
+                <ApiDetail v-if="item.id === mockId" :id="mockId" :key="item.id" :project="project" />
+              </template>
             </n-layout>
           </n-layout>
         </n-layout>
@@ -90,9 +92,7 @@ const handleToProjects = () => {
 };
 const handleUpdateValue = (key: string, item: any) => {
   menuValue.value = key;
-  if (item.id) {
-    mockId.value = item.id;
-  }
+  mockId.value = item.id;
 };
 const handleAddMock = async () => {
   try {