feat: 新增精简模式

a-super-cat · Mar 29, 2024 · a5270bf · a5270bf
1 parent 05dc676
commit a5270bf
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 63 deletions.
diff --git a/src/assets/svgIcons/collapse.svg b/src/assets/svgIcons/collapse.svg
diff --git a/src/assets/svgIcons/expand.svg b/src/assets/svgIcons/expand.svg
diff --git a/src/components/MockItem.vue b/src/components/MockItem.vue
@@ -1,10 +1,17 @@
 <template>
-  <div class="shadow-sm min-h-64 mx-4 rounded-lg py-4 px-6 flex justify-between text-gray-500 gap-6 bg-white font-sans group/mockItem relative">
+  <div class="shadow-sm mx-4 rounded-lg py-4 px-6 flex justify-between text-gray-500 gap-6 bg-white font-sans group/mockItem relative">
 
     <!-- 删除mockItem按钮 -->
     <div class="absolute top-1 right-1 hidden group-hover/mockItem:block" @click="$emit('delete', mockItemBasicInfo.id)">
       <el-button type="danger" :icon="Delete" circle />
     </div>
+    <!-- 精简模式下展开或者关闭 -->
+    <SvgIcon 
+      v-if="isBriefMode" 
+      class="text-gray-300 absolute top-1/2 left-2 transform translate-y-[-50%] cursor-pointer hidden group-hover/mockItem:block" 
+      :icon-name="isShowFull ? 'collapse' : 'expand' " 
+      @click="isShowFull = !isShowFull" 
+    />
 
     <div class="flex flex-1 flex-col gap-4">
 
@@ -16,55 +23,60 @@
           <el-input v-model="mockItemBasicInfo.path" />
         </div>
 
-        <div class="col-span-12 flex items-center">
-          <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.apiRemarksLabel`) }}</div>
-          <el-input :autosize="{minRows: 1}" resize="none" type="textarea" v-model="mockItemBasicInfo.remarks" />
-        </div>
-
-        <div class="col-span-12 flex items-center justify-between">
-          <!-- api名 -->
-          <div class="flex items-center flex-1 box-border pr-4">
-            <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.apiNameLabel`) }}</div>
-            <el-input v-model="mockItemBasicInfo.name" />
+        <div :class="{'col-span-12 grid grid-cols-12 gap-4': true, 'is-brief-mode': isBrierf, 'not-brief-mode': !isBrierf}">
+          <!-- 接口备注 -->
+          <div class="col-span-12 flex items-center">
+            <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.apiRemarksLabel`) }}</div>
+            <el-input :autosize="{minRows: 1}" resize="none" type="textarea" v-model="mockItemBasicInfo.remarks" />
           </div>
 
-          <!-- mock模式 -->
-          <div class="flex items-center">
-            <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.mockPatternLabel`) }}</div>
-            <el-radio-group v-model="mockItemBasicInfo.mockPattern">
-              <el-radio-button v-for="item in mockPatternList" :key="item" :label="t(`${i18nBase}.base.mockPatternList.${item}`)" :value="item" />
-            </el-radio-group>
+          <!-- api名、mock模式 -->
+          <div class="col-span-12 flex items-center justify-between">
+            <!-- api名 -->
+            <div class="flex items-center flex-1 box-border pr-4">
+              <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.apiNameLabel`) }}</div>
+              <el-input v-model="mockItemBasicInfo.name" />
+            </div>
+
+            <!-- mock模式 -->
+            <div class="flex items-center">
+              <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.mockPatternLabel`) }}</div>
+              <el-radio-group v-model="mockItemBasicInfo.mockPattern">
+                <el-radio-button v-for="item in mockPatternList" :key="item" :label="t(`${i18nBase}.base.mockPatternList.${item}`)" :value="item" />
+              </el-radio-group>
+            </div>
+          </div>
+
+
+          <!-- 请求方式 -->
+          <div class="col-span-6 flex items-center">
+            <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.requestMethodLabel`) }}</div>
+            <el-select v-model="mockItemBasicInfo.requestMethod" class="flex-1">
+              <el-option
+                v-for="item in requestMethodList"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </div>
+
+          <!-- 接口类型 -->
+          <div class="col-span-6 flex items-center">
+            <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.apiTypeLabel`) }}</div>
+            <el-select v-model="mockItemBasicInfo.type" class="w-24">
+              <el-option 
+                v-for="item in apiTypeList"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
           </div>
-        </div>
-
-
-        <!-- 请求方式 -->
-        <div class="col-span-6 flex items-center">
-          <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.requestMethodLabel`) }}</div>
-          <el-select v-model="mockItemBasicInfo.requestMethod" class="flex-1">
-            <el-option
-              v-for="item in requestMethodList"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </div>
-
-        <!-- 接口类型 -->
-        <div class="col-span-6 flex items-center">
-          <div class="whitespace-nowrap min-w-20 mr-3 text-right font-medium">{{ t(`${i18nBase}.base.apiTypeLabel`) }}</div>
-          <el-select v-model="mockItemBasicInfo.type" class="w-24">
-            <el-option 
-              v-for="item in apiTypeList"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
         </div>
       </div>
 
+
       <!-- 场景列表区域 -->
       <div class="flex items-center gap-2">
         <div class="font-bold">
@@ -89,7 +101,7 @@
       </div>
     </div>
     <!-- mockItem右侧监视及操作区域 -->
-    <div class="w-1/3 relative box-border p-4">
+    <div class="w-1/3 relative box-border px-4">
       <SimpleAnimation
         animate="fadeInUp"
       >
@@ -99,10 +111,11 @@
             <span class="font-bold">{{ matchedInfo.sceneName }}</span>
           </div>
 
-          <div class="param-text-bg">
-            <el-input type="textarea" :rows="8" :value="matchedInfo.param"></el-input>
+          <div :class="{'param-text-bg': !isBrierf, 'param-text-bg-brief': isBrierf}">
+            <el-input ref="textAreaRef" type="textarea" :rows="isBrierf ? 2 : 8" :value="matchedInfo.param"></el-input>
           </div>
         </div>
+
         <div v-else class="flex flex-col h-full gap-4">
           <button  class="flex-1 block bg-primary-normal text-white rounded-lg" @click="$emit('save', mockItemBasicInfo)">
             {{ t('global.save') }}
@@ -112,8 +125,10 @@
             {{ t('global.cancel') }}
           </button>
         </div>
+
       </SimpleAnimation>
     </div>
+
   </div>
 </template>
 
@@ -131,6 +146,7 @@ const { t }  = useI18n();
 const i18nBase = 'components.MockItem';
 
 interface MockItemProps {
+  isBriefMode: boolean;
   basicInfo: MockItemBasicType;
   selectedSceneId?: string;
   scenesList: SceneItemType[];
@@ -141,6 +157,7 @@ interface MockItemProps {
 }
 
 const props = withDefaults(defineProps<MockItemProps>(), {
+  isBriefMode: false,
   basicInfo: () => ({
     id: '',
     path: '',
@@ -158,13 +175,20 @@ const props = withDefaults(defineProps<MockItemProps>(), {
     param: '',
   }),
 })
+// textarea的引用
+const textAreaRef = ref(null as any);
 // mockItem的基础信息（除了场景列表）
 const mockItemBasicInfo = ref({} as MockItemProps['basicInfo']);
+// 当是精简模式时，用于临时展开的mockItem的flag
+const isShowFull = ref(false);
 // mockItem的配置是否发生更改
 const hasBasicConfChange = computed(() => {
   return !isEqual(mockItemBasicInfo.value, props.basicInfo);
 });
 
+// 是否是brief模式
+const isBrierf = computed(() => props.isBriefMode && !hasBasicConfChange.value && !isShowFull.value);
+
 
 const componentEvent = defineEmits(['sceneOperation', 'save', 'delete']);
 
@@ -184,10 +208,16 @@ watch(() => props.basicInfo, () => {
 
 }, { immediate: true, deep: true });
 
+watch(() => isBrierf.value, () => {
+  if(textAreaRef.value?.textarea) {
+    textAreaRef.value.textarea.style.height = '';
+  }
+});
+
 </script>
 
 <style lang="scss">
-.param-text-bg {
+.param-text-bg, .param-text-bg-brief {
   position: relative;
   background-color: #fff;
   textarea {
@@ -209,7 +239,27 @@ watch(() => props.basicInfo, () => {
     transform: translateX(-50%);
     color: rgba($color: #000000, $alpha: 0.1);
     font-size: 48px;
+    transition: font-size 0.2s ease-in-out;
     z-index: 1;
   }
 }
+
+.param-text-bg-brief {
+  &::before {
+    font-size: 18px;
+    transition: font-size 0.2s ease-in-out;
+  }
+}
+
+
+.is-brief-mode {
+  max-height: 0;
+  transition: max-height 0.6s ease-in-out;
+  overflow: hidden;
+}
+.not-brief-mode {
+  max-height: 150px;
+  transition: max-height 0.6s ease-in-out;
+  overflow: hidden;
+}
 </style>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -50,6 +50,16 @@
       <el-form-item>
         <el-button @click="$emit('search', param)" type="primary">{{ t(`${i18nBase}.searchBtn`) }}</el-button>
       </el-form-item>
+
+      <el-switch
+        v-model="isBriefMode"
+        size="large"
+        class="ml-2"
+        inline-prompt
+        style="--el-switch-on-color: #409eff; --el-switch-off-color: #409eff"
+        :active-text="t(`${i18nBase}.formOfDisplay.brief`)"
+        :inactive-text="t(`${i18nBase}.formOfDisplay.normal`)"
+      />
     </el-form>
 
     <div>
@@ -73,6 +83,8 @@ const props = withDefaults(defineProps<Props>(), {
   mockFromRequest: false,
 });
 const iterationList = defineModel('iterationList', {type: Array, default: []});
+const isBriefMode = defineModel('isBriefMode', {type: Boolean, default: false});
+
 const componentEvent = defineEmits(['search', 'addMockItem', 'iterationListChange', 'mockFromRequestChange']);
 
 const toAddIterationTag = ref('');

diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="$attrs.class">
     <svg aria-hidden="true" :class="`svg-icon ${''}`" :style="{width, height}">
       <use :xlink:href="`/mock-web/svgIcons.svg#${iconName}`" :fill="color" />
     </svg>

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -11,6 +11,10 @@ export default {
         apiRemarks: 'apiRemarks',
         param: 'param'
       },
+      formOfDisplay: {
+        brief: 'brief',
+        normal: 'normal',
+      },
       searchBtn: 'search',
       createNewMockItem: 'Create New MockItem',
     },
@@ -29,6 +33,7 @@ export default {
           'request&create': 'Request&CreateScene',
         },
       },
+
       matchedSceneLabel: 'Matched Scene',
       scene: 'scene',
       currentMockPatternLabel: 'pattern',

diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -11,6 +11,10 @@ export default {
         apiRemarks: '接口备注',
         param: '参数'
       },
+      formOfDisplay: {
+        brief: '精简',
+        normal: '标准',
+      },
       searchBtn: '查询',
       createNewMockItem: '新建Mock项',
     },

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -8,12 +8,12 @@ export const menuItems: MenuItem[] = [
     icon: 'mock',
     component: () => import('@/views/HomeView.vue'),
   },
-  {
-    path: '/request',
-    name: '接口请求',
-    icon: 'requestApi',
-    component: () => import('@/views/ApiRequest.vue'),
-  },
+  // {
+  //   path: '/assetsManage',
+  //   name: '接口请求',
+  //   icon: 'requestApi',
+  //   component: () => import('@/views/AssetsManage.vue'),
+  // },
 ];
 
 // 处理请求的方式

diff --git a/src/views/ApiRequest.vue → src/views/AssetsManage.vue b/src/views/ApiRequest.vue → src/views/AssetsManage.vue