feat(projects): 完成api详情界面数据获取

Author: lixin59

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

@@ -10,24 +10,21 @@
     >
       <n-tab-pane name="signin" tab="编辑">
         <n-form>
-          <n-form-item-row label="用户名">
+          <n-form-item-row label="接口名称">
             <n-input />
           </n-form-item-row>
-          <n-form-item-row label="密码">
+          <n-form-item-row label="url">
             <n-input />
           </n-form-item-row>
         </n-form>
-        <n-button type="primary" block secondary strong> 登录 </n-button>
+        <n-button type="primary" block secondary strong> 接口名称 </n-button>
       </n-tab-pane>
-      <n-tab-pane name="signup" tab="编辑">
+      <n-tab-pane name="signup" tab="预览">
         <n-form>
-          <n-form-item-row label="用户名">
+          <n-form-item-row label="接口名称">
             <n-input />
           </n-form-item-row>
-          <n-form-item-row label="密码">
-            <n-input />
-          </n-form-item-row>
-          <n-form-item-row label="重复密码">
+          <n-form-item-row label="url">
             <n-input />
           </n-form-item-row>
         </n-form>
@@ -38,6 +35,33 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import type { tMockItem, tMockProject } from '~/electron/utils/mock/types';
+
+interface Props {
+  id: number;
+  project: tMockProject | null;
+}
+const props = defineProps<Props>();
+
+const mockData = ref<tMockItem>();
+
+const fetchData = () => {
+  const { id, project } = props;
+  const data = project?.mockList.find((m: tMockItem) => m.id === id);
+  if (data) {
+    mockData.value = data;
+  }
+};
+watch(
+  () => props.project,
+  () => {
+    fetchData();
+  }
+);
+onMounted(() => {
+  fetchData();
+});
 </script>
 
 <style scoped></style>

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

@@ -32,7 +32,7 @@
                 :mock-list="project?.mockList || []"
                 :base-url="project?.config?.baseUrl || ''"
               />
-              <ApiDetail v-else />
+              <ApiDetail v-else :id="mockId" :project="project" />
             </n-layout>
           </n-layout>
         </n-layout>
@@ -56,15 +56,16 @@ const { routerPush } = useRouterPush();
 const route = useRoute();
 const id = Number(route.query?.id);
 const menuValue = ref('api-list');
-// eslint-disable-next-line @typescript-eslint/ban-types
 const project = ref<tMockProject | null>(null);
+const mockId = ref(0);
 
 const { iconRender } = useIconRender();
 
 const options = computed<any[]>(() => {
   const baseItem = {
     label: '全部接口',
     key: 'api-list',
+    id: 0,
     icon: iconRender({ icon: 'vscode-icons:default-folder-opened' })
   };
   const list =
@@ -87,8 +88,11 @@ const fetchData = async () => {
 const handleToProjects = () => {
   routerPush({ name: routeName('mock_projects') });
 };
-const handleUpdateValue = (key: string) => {
+const handleUpdateValue = (key: string, item: any) => {
   menuValue.value = key;
+  if (item.id) {
+    mockId.value = item.id;
+  }
 };
 const handleAddMock = async () => {
   try {
@@ -101,7 +105,7 @@ const handleAddMock = async () => {
       createdAt: new Date().getTime(),
       data: {
         code: 200,
-        msg: 'holle',
+        msg: 'test',
         data: {
           'list|1-10': [
             {