update

packages/frontend/src/views/CommandHistoryView.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="command-history-view">
     <!-- 移除 PaneTitleBar -->
-    <div class="history-controls">
-      <input
-        type="text"
-        :placeholder="$t('commandHistory.searchPlaceholder', '搜索历史记录...')"
-        :value="searchTerm"
-        @input="updateSearchTerm($event)"
-        class="search-input"
-      />
-      <button @click="confirmClearAll" class="clear-button" :title="$t('commandHistory.clear', '清空')">
-        <i class="fas fa-trash-alt"></i> <!-- 假设使用 Font Awesome -->
-      </button>
-    </div>
+    <!-- Removed original top controls -->
     <div class="history-list-container">
+      <!-- Moved controls inside the container -->
+      <div class="embedded-controls">
+        <input
+          type="text"
+          :placeholder="$t('commandHistory.searchPlaceholder', '搜索历史记录...')"
+          :value="searchTerm"
+          @input="updateSearchTerm($event)"
+          class="search-input"
+        />
+        <button @click="confirmClearAll" class="clear-button" :title="$t('commandHistory.clear', '清空')">
+          <i class="fas fa-trash-alt"></i>
+        </button>
+      </div>
       <ul v-if="filteredHistory.length > 0" class="history-list">
         <li
           v-for="entry in filteredHistory"
@@ -120,45 +122,71 @@ const executeCommand = (command: string) => {
   flex-direction: column;
   height: 100%; /* 填充父 Pane 高度 */
   overflow: hidden;
-  background-color: var(--color-bg-secondary);
+  background-color: var(--app-bg-color); /* Use standard app background */
+  padding: 0.5rem; /* Keep overall padding */
+  box-sizing: border-box;
 }
 
-.history-controls {
+/* Remove original .history-controls styles */
+/* .history-controls { ... } */
+
+/* Styles for controls embedded within the list container */
+.embedded-controls {
   display: flex;
   align-items: center;
-  padding: 8px;
-  border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-bg-tertiary);
-  flex-shrink: 0; /* 防止被压缩 */
+  padding: 0.5rem; /* Add padding around embedded controls */
+  /* Removed border-bottom and margin-bottom */
+  flex-shrink: 0;
+  gap: 0.25rem;
 }
 
 .search-input {
   flex-grow: 1;
-  padding: 6px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 3px;
-  background-color: var(--color-input-bg);
-  color: var(--color-text);
-  margin-right: 8px;
+  min-width: 8px; /* Added smaller min-width */
+  padding: 0.3rem 0.5rem; /* Reduced padding */
+  border: 1px solid var(--border-color); /* Use standard border color */
+  border-radius: 4px; /* Consistent border radius */
+  background-color: var(--app-bg-color); /* Use app background */
+  color: var(--text-color); /* Use standard text color */
+  /* margin-right: 8px; */ /* Replaced by gap */
   font-size: 0.9em;
 }
+.search-input:focus {
+    outline: none;
+    border-color: var(--button-bg-color); /* Highlight border on focus */
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Example focus shadow */
+}
 
 .clear-button {
   background: none;
-  border: none;
-  color: var(--color-text-secondary);
+  border: 1px solid var(--border-color); /* Add border */
+  color: var(--text-color-secondary); /* Use standard secondary text color */
   cursor: pointer;
-  padding: 5px;
-  font-size: 1.1em;
+  padding: 0.3rem 0.5rem; /* Reduced padding */
+  font-size: 0.9em; /* Match input font size */
   line-height: 1;
+  border-radius: 4px; /* Consistent border radius */
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
 }
 .clear-button:hover {
-  color: var(--color-danger);
+  color: var(--bs-danger, red); /* Use danger color on hover */
+  border-color: var(--bs-danger, red);
+  background-color: rgba(220, 53, 69, 0.1); /* Subtle danger background */
 }
+.clear-button i {
+    display: block; /* Ensure icon takes space */
+}
+
 
 .history-list-container {
   flex-grow: 1; /* 占据剩余空间 */
   overflow-y: auto; /* 超出时显示滚动条 */
+  border: 1px solid var(--border-color); /* Keep border */
+  border-radius: 5px; /* Keep radius */
+  background-color: var(--app-bg-color); /* Ensure background */
+  /* Add display:flex and flex-direction:column to stack controls and list */
+  display: flex;
+  flex-direction: column;
 }
 
 .history-list {
@@ -171,18 +199,18 @@ const executeCommand = (command: string) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 12px;
-  cursor: default; /* 列表项本身不可点击 */
-  border-bottom: 1px solid var(--color-border-light);
-  transition: background-color 0.2s ease;
+  padding: 0.4rem 0.75rem; /* Reduced padding */
+  cursor: pointer; /* Make item clickable */
+  border-bottom: 1px solid var(--border-color); /* Use standard border color */
+  transition: background-color 0.15s ease;
 }
 
 .history-item:last-child {
-  border-bottom: none;
+  border-bottom: none; /* Keep removing border for last item */
 }
 
 .history-item:hover {
-  background-color: var(--color-bg-hover);
+  background-color: var(--header-bg-color); /* Use header background for hover */
 }
 
 .command-text {
@@ -191,8 +219,9 @@ const executeCommand = (command: string) => {
   text-overflow: ellipsis;
   margin-right: 10px;
   flex-grow: 1;
-  font-family: var(--font-family-mono);
+  font-family: var(--font-family-mono, monospace); /* Use mono font variable */
   font-size: 0.9em;
+  color: var(--text-color); /* Use standard text color */
 }
 
 .item-actions {
@@ -204,26 +233,31 @@ const executeCommand = (command: string) => {
 .action-button {
   background: none;
   border: none;
-  color: var(--color-text-secondary);
+  color: var(--text-color-secondary); /* Use standard secondary text color */
   cursor: pointer;
-  padding: 2px 4px;
-  margin-left: 6px;
-  font-size: 0.9em;
+  padding: 2px 4px; /* Reduced padding */
+  margin-left: 4px; /* Reduced margin */
+  font-size: 1em; /* Slightly larger icon size */
   line-height: 1;
+  border-radius: 4px; /* Add radius for hover */
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .action-button:hover {
-  color: var(--color-primary);
+  background-color: rgba(128, 128, 128, 0.1); /* Subtle hover background */
+  color: var(--link-hover-color); /* Use link hover color */
 }
 
 .action-button.delete:hover {
-  color: var(--color-danger);
+  color: var(--bs-danger, red); /* Use danger color */
+  background-color: rgba(220, 53, 69, 0.1); /* Subtle danger background */
 }
 
 .loading-message,
 .empty-message {
-  padding: 20px;
+  padding: calc(var(--base-padding, 1rem) * 2); /* Increase padding */
   text-align: center;
-  color: var(--color-text-secondary);
+  color: var(--text-color-secondary); /* Use standard secondary text color */
+  font-style: italic;
 }
 </style>