feat: 可以从被代理的请求创建mockItem了

components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     MockItem: typeof import('./src/components/MockItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/api/system.ts

@@ -3,6 +3,9 @@ const systemApiPrefix = '/mock-system';
 
 export const login = defineRequest(`${systemApiPrefix}/login`, 'POST');
 
+// 是否从请求中创建mockItem
+export const isCreateMockItemFromRequest = defineRequest(`${systemApiPrefix}/isCreateMockItemFromRequest`, 'GET');
+
 // 搜索 & 获取mockItem列表
 export const search = defineRequest(`${systemApiPrefix}/search`, 'POST');
 // 获取迭代期列表

src/components/SearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search-bar-component flex justify-between px-4 py-2">
+  <div class="search-bar-component flex justify-between px-4 py-2 bg-white">
     <el-form :inline="true">
       <el-form-item>
         <div class="w-96">
@@ -39,6 +39,14 @@
         </div>
       </el-form-item>
 
+      <el-form-item :label="t(`${i18nBase}.mockFromRequestLabel`)" class="items-center">
+        <el-switch
+          v-model="innerMockFromRequest"
+          size="large"
+          @change="$emit('mockFromRequestChange', $event)"
+        />
+      </el-form-item>
+
       <el-form-item>
         <el-button @click="$emit('search', param)" type="primary">{{ t(`${i18nBase}.searchBtn`) }}</el-button>
       </el-form-item>
@@ -50,22 +58,31 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, defineModel } from 'vue';
+import { ref, defineModel, watch } from 'vue';
 import { Search } from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n';
 const { t }  = useI18n();
 
 const i18nBase = 'components.SearchBar'
+
+interface Props {
+  mockFromRequest: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mockFromRequest: false,
+});
 const iterationList = defineModel('iterationList', {type: Array, default: []});
+const componentEvent = defineEmits(['search', 'addMockItem', 'iterationListChange', 'mockFromRequestChange']);
 
 const toAddIterationTag = ref('');
+const innerMockFromRequest = ref(props.mockFromRequest);
 
 const param = ref({
   searchText: '', // 查找的字符串（path、接口名、接口备注）
   iteration: '', // 迭代版本tag，
 });
 
-const componentEvent = defineEmits(['search', 'addMockItem', 'iterationListChange']);
 
 const handleSaveIterationTag = () => {
   if (toAddIterationTag.value) {
@@ -85,6 +102,10 @@ const handleDeleteIterationTag = (tag: any) => {
   componentEvent('iterationListChange', iterationList.value);
 };
 
+watch(() => props.mockFromRequest, (value) => {
+  innerMockFromRequest.value = value;
+});
+
 </script>
 <style lang="scss">
 .search-bar-component {

src/i18n/en.ts

@@ -4,6 +4,7 @@ export default {
       searchInputPlaceholder: 'please input text for search (apiPath、remarks)',
       iterativeTagPlaceholder: 'select iterative tag',
       searchPatternLabel: 'searchPattern',
+      mockFromRequestLabel: "generate mock item from request?",
       searchPatternList: {
         path: 'path',
         apiName: 'apiName',
@@ -25,6 +26,7 @@ export default {
           mock: 'Mock',
           request: 'realRequest',
           mockJs: 'MockJs',
+          'request&create': 'Request&CreateScene',
         },
       },
       matchedSceneLabel: 'Matched Scene',

src/i18n/zh.ts

@@ -4,6 +4,7 @@ export default {
       searchInputPlaceholder: '请输入查询（请求路径、备注）',
       iterativeTagPlaceholder: '迭代期标签',
       searchPatternLabel: '搜索模式',
+      mockFromRequestLabel: "是否从请求生成Mock项",
       searchPatternList: {
         path: '路径',
         apiName: '接口名',
@@ -25,6 +26,7 @@ export default {
           mock: 'Mock',
           request: '真实请求',
           mockJs: 'MockJs',
+          'request&create': '请求&创建场景',
         },
       },
       matchedSceneLabel: '匹配到的场景',

src/utils/constants.ts

@@ -17,12 +17,12 @@ export const menuItems: MenuItem[] = [
 ];
 
 // 处理请求的方式
-export const mockPatternList = ['mock', 'request', 'mockJs'] as const;
+export const mockPatternList = ['mock', 'request', 'request&create', 'mockJs'] as const;
 
 // 接口请求方式
 export const requestMethodList = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'] as const;
 
 // 接口类型
 export const apiTypeList = ['HTTP', 'JSON-RPC'] as const;
 
-export const wsMessageTypeList = ['param'] as const;
+export const wsMessageTypeList = ['param', 'refresh:mockList'] as const;

src/views/HomeView.vue

@@ -1,17 +1,19 @@
 <template>
-  <div class="flex w-full min-h-full pb-16 flex-col box-border relative">
+  <div class="flex w-full min-h-full gap-4 flex-col box-border relative bg-gray-50">
 
     <div class="relative">
       <search-bar 
         @search="handleSearch"
         @addMockItem="handleAddMockItem"
         @iteration-list-change="handleIterationListChange"
+        @mock-from-request-change="handleMockFromRequestChange"
+        :mockFromRequest="isMockItemFromRequest"
         v-model:iterationList="iterationList"
       />
     </div>
 
-    <div class="flex-1 gap-4 flex flex-col">
-      <mock-item 
+    <div class="flex-1 grid grid-cols-1 gap-4">
+      <mock-item
         v-for="item in mockItemList"
         :key="item.basicInfo.id"
         :basic-info="item.basicInfo"
@@ -93,7 +95,7 @@
       </div>
     </el-drawer>
 
-    <div class="absolute bg-white box-border bottom-0 left-0 w-full h-16 flex items-center flex-row-reverse pr-9">
+    <div class="w-full h-16 flex items-center flex-row-reverse pr-9">
       <el-pagination
         v-model:current-page="pageInfo.current"
         v-model:page-size="pageInfo.size"
@@ -126,6 +128,7 @@ import {
   selectSceneItem,
   getIterationList,
   saveIterationList,
+  isCreateMockItemFromRequest,
 } from '@/api/system';
 
 const { t }  = useI18n();
@@ -146,8 +149,10 @@ const mockItemAndSelectedSceneIdPair = ref<{[key: string]: string}>({});
 const iterationList = ref<string[]>([]);
 // 搜索参数
 const searchParam = ref({} as any);
+// 是否从请求中创建mockItem
+const isMockItemFromRequest = ref(false);
 // 分页信息
-const pageInfo = ref({current: 1, size: 10, total: 0} as any);
+const pageInfo = ref({current: 1, size: 10, total: 0} as {current: number, size: number, total: number});
 // 被匹配到的mockItem的参数信息
 const mockItemMatchedParam = ref({} as MockItemMatchedInfoType);
 
@@ -340,12 +345,25 @@ const handleMockItemMatched = (arg: any) => {
   };
 };
 
+// 处理是否从请求中创建mockItem
+const handleMockFromRequestChange = async () => {
+  const res = await isCreateMockItemFromRequest();
+  if (res.code === 200) {
+    isMockItemFromRequest.value = res.data;
+  } else {
+    ElMessage.error('操作失败');
+  }
+};
 
 watch(() => pageInfo.value, handleGetMockList, { immediate: true, deep: true });
 
 onBeforeMount(() => {
   clearEventCallBack('param');
   registerWsCallBack('param', handleMockItemMatched);
+  registerWsCallBack('refresh:mockList', () => {
+    pageInfo.value.current = 1;
+    handleGetMockList();
+  });
   handleGetIterationList();
 
 });