diff --git a/src/assets/svgIcons/collapse.svg b/src/assets/svgIcons/collapse.svg
new file mode 100644
index 0000000..420f646
--- /dev/null
+++ b/src/assets/svgIcons/collapse.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711690048633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2919" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M718.933333 786.773333a20.48 20.48 0 0 1 0 29.866667l-30.293333 30.293333a21.333333 21.333333 0 0 1-29.866667 0L512 699.733333l-146.773333 147.2a21.333333 21.333333 0 0 1-30.293334 0l-29.866666-30.293333a20.48 20.48 0 0 1 0-29.866667l176.213333-177.066666a32 32 0 0 1 22.613333-9.386667h16.213334a32.853333 32.853333 0 0 1 22.613333 9.386667z m-237.653333-369.493333a32.853333 32.853333 0 0 0 22.613333 9.386667h16.213334a32 32 0 0 0 22.613333-9.386667l176.213333-176.64a21.333333 21.333333 0 0 0 0-30.293333l-29.866666-30.293334a21.333333 21.333333 0 0 0-30.293334 0L512 327.253333 365.226667 180.48a20.906667 20.906667 0 0 0-29.866667 0l-30.293333 30.293333a21.333333 21.333333 0 0 0 0 30.293334z" p-id="2920"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgIcons/expand.svg b/src/assets/svgIcons/expand.svg
new file mode 100644
index 0000000..c4e5ec3
--- /dev/null
+++ b/src/assets/svgIcons/expand.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711690057687" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3075" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M305.066667 344.32a21.333333 21.333333 0 0 1 0-30.293333l176.213333-176.64a32 32 0 0 1 22.613333-9.386667h16.213334a32.853333 32.853333 0 0 1 22.613333 9.386667l176.213333 176.64a21.333333 21.333333 0 0 1 0 30.293333l-30.293333 30.293333a20.906667 20.906667 0 0 1-29.866667 0L512 227.413333 365.226667 374.613333a21.333333 21.333333 0 0 1-30.293334 0z m384 305.066667a21.333333 21.333333 0 0 0-30.293334 0L512 796.586667l-146.773333-146.773334a20.906667 20.906667 0 0 0-29.866667 0l-30.293333 30.293334a21.333333 21.333333 0 0 0 0 30.293333l176.213333 176.64a32.853333 32.853333 0 0 0 22.613333 9.386667h16.213334a32 32 0 0 0 22.613333-9.386667l176.213333-176.64a21.333333 21.333333 0 0 0 0-30.293333z" p-id="3076"></path></svg>
\ No newline at end of file
diff --git a/src/components/MockItem.vue b/src/components/MockItem.vue
index c1e77e0..2e71883 100644
--- 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
index f7e18b7..10ca1c4 100644
--- 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
index 93f506d..b2e9904 100644
--- 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
index 4e9af91..bb6e6dd 100644
--- 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
index 14b9dd7..1b7c98f 100644
--- 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
index b902f47..782e6f5 100644
--- 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 b/src/views/AssetsManage.vue
similarity index 100%
rename from src/views/ApiRequest.vue
rename to src/views/AssetsManage.vue
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 315a185..c3ed184 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -9,6 +9,7 @@
         @mock-from-request-change="handleMockFromRequestChange"
         :mockFromRequest="isMockItemFromRequest"
         v-model:iterationList="iterationList"
+        v-model:is-brief-mode="isBriefMode"
       />
     </div>
     
@@ -18,6 +19,7 @@
         :key="item.basicInfo.id"
         :basic-info="item.basicInfo"
         :scenes-list="item.scenesList"
+        :is-brief-mode="isBriefMode"
         @save="handleSaveMockItem"
         @delete="handleDeleteMockItem"
         @sceneOperation="handleMockItemSceneOperation"
@@ -95,7 +97,7 @@
       </div>
     </el-drawer>
 
-    <div class="w-full h-16 flex items-center flex-row-reverse pr-9">
+    <div class="w-full h-16 flex items-center flex-row-reverse bg-white pr-9">
       <el-pagination
         v-model:current-page="pageInfo.current"
         v-model:page-size="pageInfo.size"
@@ -136,6 +138,14 @@ const { t }  = useI18n();
 
 const i18nBase = 'page.HomeView';
 const editorActions = ['save', 'saveAndClose', 'close'];
+// 迭代期
+const iterationList = ref<string[]>([]);
+// 搜索参数
+const searchParam = ref({} as any);
+// 是否从请求中创建mockItem
+const isMockItemFromRequest = ref(false);
+// 是否简洁模式
+const isBriefMode = ref(false);
 // 当前正在编辑的mockItem
 const currentEditingMockItemBaseInfo = ref<MockItemBasicType>({} as MockItemBasicType);
 // 当前正在编辑的场景
@@ -146,12 +156,6 @@ const isShowCodeEditor = ref(false);
 const mockItemList = ref<{basicInfo: MockItemBasicType, scenesList: SceneItemType[]}[]>([] as any);
 // 每个mockItem被选中的场景id
 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 {current: number, size: number, total: number});
 // 被匹配到的mockItem的参数信息
@@ -307,7 +311,22 @@ const handleGetMockList = async () => {
     list.forEach((item: any) => {
       mockItemAndSelectedSceneIdPair.value[item.basicInfo.id] = item.basicInfo.selectedSceneId;
     });
-    mockItemList.value = list;
+    if (list?.length) {
+      mockItemList.value = list;
+    } else {
+      mockItemList.value = [{
+        basicInfo: {
+          id: uuid(),
+          path: '',
+          name: '接口名',
+          type: 'HTTP',
+          remarks: '接口备注',
+          requestMethod: 'GET',
+          mockPattern: 'mock',
+        },
+        scenesList: [],
+      }];
+    }
     pageInfo.value = { ...pageInfo.value, ...pageInfo };
   } else {
     ElMessage.error('获取mock列表失败');