fix review ui

src/App.vue

@@ -40,6 +40,13 @@ const historyList = ref<string[]>([]);
 const historyMap = ref<Record<string, string[]>>({});
 const currentHistoryKey = ref(""); 
 
+const filteredHistoryList = computed(() => {
+  if (!videoNameInput.value) {
+    return historyList.value;
+  }
+  return historyList.value.filter(item => item.toLowerCase().includes(videoNameInput.value.toLowerCase()));
+});
+
 // Check Data
 const checkLogs = ref<string[]>([]);
 const logContainerRef = ref<HTMLElement | null>(null);
@@ -504,7 +511,7 @@ watch(currentDir, (newPath) => {
       </div>
     </el-aside>
 
-    <el-main>
+    <el-main :class="{ 'review-active': activeMenu === 'review' }">
       <!-- Preparation Page -->
       <div v-if="activeMenu === 'preparation'">
         
@@ -575,7 +582,7 @@ watch(currentDir, (newPath) => {
       </div>
 
       <!-- Review Page -->
-      <div v-else-if="activeMenu === 'review'">
+      <div v-else-if="activeMenu === 'review'" style="display: flex; flex-direction: column; height: 100%; overflow: hidden;">
         
         <el-alert
             v-if="isReviewDisabled"
@@ -586,7 +593,7 @@ watch(currentDir, (newPath) => {
             style="margin-bottom: 20px"
         />
 
-        <div :class="{ 'disabled-area': isReviewDisabled }">
+        <div :class="{ 'disabled-area': isReviewDisabled }" style="display: flex; flex-direction: column; flex: 1; overflow: hidden;">
             <!-- Drag Area -->
             <div class="drag-area">
                 <el-icon class="el-icon--upload"><upload-filled /></el-icon>
@@ -602,18 +609,19 @@ watch(currentDir, (newPath) => {
 
             <!-- Action Area -->
             <div class="action-area">
-                 <el-input v-model="videoNameInput" placeholder="视频名称" class="name-input">
+                 <el-input v-model="videoNameInput" placeholder="视频名称" class="name-input" @keyup.enter="handleRename">
                     <template #prepend>{{ videoNamePrefix }}</template>
                  </el-input>
                  <el-button type="primary" @click="handleRename" :disabled="isReviewDisabled || importedFiles.length === 0">命名</el-button>
+                 <el-button @click="videoNameInput = ''" class="clear-button-margin-fix">清空</el-button>
             </div>
             
             <!-- History List -->
-            <div class="history-area" v-if="historyList.length > 0">
+            <div class="history-area" v-if="historyList.length > 0" style="display: flex; flex-direction: column; flex: 1; overflow: hidden; margin-bottom: 0px;">
                  <h4>历史记录 ({{ currentHistoryKey || '未关联目录' }})</h4>
-                 <el-scrollbar max-height="300px">
+                 <el-scrollbar style="flex: 1" class="history-scrollbar">
                     <ul class="history-list">
-                        <li v-for="item in historyList" :key="item" @click="useHistoryItem(item)">
+                        <li v-for="item in filteredHistoryList" :key="item" @click="useHistoryItem(item)">
                             <span class="history-text">{{ item }}</span>
                             <el-icon class="delete-icon" @click.stop="deleteHistoryItem(item)"><Delete /></el-icon>
                         </li>
@@ -760,6 +768,7 @@ body {
     margin-bottom: 20px;
 }
 .history-area h4 {
+    margin-top: 0;
     margin-bottom: 10px;
     color: var(--el-text-color-primary);
 }
@@ -767,6 +776,8 @@ body {
     list-style: none;
     padding: 0;
     margin: 0;
+}
+.history-scrollbar {
     border: 1px solid var(--el-border-color);
     border-radius: 4px;
 }
@@ -841,4 +852,10 @@ body {
     text-align: center;
     margin-top: 20px;
 }
+.el-main.review-active {
+    padding: 20px;
+}
+.action-area .clear-button-margin-fix {
+    margin-left: 0; /* Adjust this value as needed to fine-tune the gap */
+}
 </style>