update
This commit is contained in:
Baobhan Sith
@@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<div class="command-history-view">
|
||||
<!-- 移除 PaneTitleBar -->
|
||||
<!-- Removed original top controls -->
|
||||
<div class="history-list-container">
|
||||
<!-- Moved controls inside the container -->
|
||||
<div class="embedded-controls">
|
||||
<div class="flex flex-col h-full overflow-hidden bg-background p-2">
|
||||
<!-- Container for controls and list -->
|
||||
<div class="flex flex-col flex-grow border border-border rounded-md overflow-hidden bg-background">
|
||||
<!-- Controls embedded within the container -->
|
||||
<div class="flex items-stretch p-2 border-b border-border flex-shrink-0 gap-1 bg-header">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="$t('commandHistory.searchPlaceholder', '搜索历史记录...')"
|
||||
@@ -13,38 +12,41 @@
|
||||
@input="updateSearchTerm($event)"
|
||||
@keydown="handleKeydown"
|
||||
ref="searchInputRef"
|
||||
class="search-input"
|
||||
class="flex-grow min-w-[8px] px-2 py-1 border border-border rounded-sm bg-background text-foreground text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
|
||||
/>
|
||||
<button @click="confirmClearAll" class="clear-button" :title="$t('commandHistory.clear', '清空')">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
<button @click="confirmClearAll" class="w-8 py-1 border border-border rounded-sm text-text-secondary hover:bg-error/10 hover:text-error hover:border-error/50 transition-colors duration-150 flex-shrink-0 flex" :title="$t('commandHistory.clear', '清空')">
|
||||
<i class="fas fa-trash-alt text-sm m-auto"></i>
|
||||
</button>
|
||||
</div>
|
||||
<ul ref="historyListRef" v-if="filteredHistory.length > 0" class="history-list">
|
||||
<li
|
||||
v-for="(entry, index) in filteredHistory"
|
||||
:key="entry.id"
|
||||
class="history-item"
|
||||
:class="{ selected: index === selectedIndex }"
|
||||
@mouseover="hoveredItemId = entry.id; selectedIndex = index"
|
||||
@mouseleave="hoveredItemId = null; selectedIndex = -1"
|
||||
@click="executeCommand(entry.command)"
|
||||
>
|
||||
<span class="command-text">{{ entry.command }}</span>
|
||||
<div class="item-actions" v-show="hoveredItemId === entry.id">
|
||||
<button @click.stop="copyCommand(entry.command)" class="action-button" :title="$t('commandHistory.copy', '复制')">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
<button @click.stop="deleteSingleCommand(entry.id)" class="action-button delete" :title="$t('commandHistory.delete', '删除')">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else-if="isLoading" class="loading-message">
|
||||
{{ $t('commandHistory.loading', '加载中...') }}
|
||||
</div>
|
||||
<div v-else class="empty-message">
|
||||
{{ $t('commandHistory.empty', '没有历史记录') }}
|
||||
<!-- List Area -->
|
||||
<div class="flex-grow overflow-y-auto">
|
||||
<ul ref="historyListRef" v-if="filteredHistory.length > 0" class="list-none p-0 m-0">
|
||||
<li
|
||||
v-for="(entry, index) in filteredHistory"
|
||||
:key="entry.id"
|
||||
class="group flex justify-between items-center px-3 py-2 cursor-pointer border-b border-border last:border-b-0 hover:bg-header/50 transition-colors duration-150"
|
||||
:class="{ 'bg-primary/10 text-primary': index === selectedIndex }"
|
||||
@mouseover="hoveredItemId = entry.id; selectedIndex = index"
|
||||
@mouseleave="hoveredItemId = null; selectedIndex = -1"
|
||||
@click="executeCommand(entry.command)"
|
||||
>
|
||||
<span class="truncate mr-2 flex-grow font-mono text-sm text-foreground" :class="{'text-primary': index === selectedIndex}">{{ entry.command }}</span>
|
||||
<div class="flex items-center flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
|
||||
<button @click.stop="copyCommand(entry.command)" class="p-1 text-text-secondary hover:text-primary transition-colors duration-150" :class="{'text-primary': index === selectedIndex}" :title="$t('commandHistory.copy', '复制')">
|
||||
<i class="fas fa-copy text-xs"></i>
|
||||
</button>
|
||||
<button @click.stop="deleteSingleCommand(entry.id)" class="ml-1 p-1 text-text-secondary hover:text-error transition-colors duration-150" :class="{'text-primary': index === selectedIndex}" :title="$t('commandHistory.delete', '删除')">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else-if="isLoading" class="p-6 text-center text-text-secondary text-sm">
|
||||
{{ $t('commandHistory.loading', '加载中...') }}
|
||||
</div>
|
||||
<div v-else class="p-6 text-center text-text-secondary text-sm italic">
|
||||
{{ $t('commandHistory.empty', '没有历史记录') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,158 +201,3 @@ defineExpose({ focusSearchInput });
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.command-history-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%; /* 填充父 Pane 高度 */
|
||||
overflow: hidden;
|
||||
background-color: var(--app-bg-color); /* Use standard app background */
|
||||
padding: 0.5rem; /* Keep overall padding */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove original .history-controls styles */
|
||||
/* .history-controls { ... } */
|
||||
|
||||
/* Styles for controls embedded within the list container */
|
||||
.embedded-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
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 5px var(--button-bg-color, #007bff); /* Use theme variable for glow */
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
background: none;
|
||||
border: 1px solid var(--border-color); /* Add border */
|
||||
color: var(--text-color-secondary); /* Use standard secondary text color */
|
||||
cursor: pointer;
|
||||
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(--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 {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
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; /* Keep removing border for last item */
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background-color: var(--header-bg-color); /* Use header background for hover */
|
||||
}
|
||||
/* Style for the keyboard-selected item */
|
||||
.history-item.selected {
|
||||
background-color: var(--button-bg-color, #007bff); /* Use button background or fallback */
|
||||
color: var(--button-text-color, white); /* Use button text color or fallback */
|
||||
}
|
||||
.history-item.selected .command-text,
|
||||
.history-item.selected .action-button {
|
||||
color: var(--button-text-color, white); /* Ensure text inside selected item is readable */
|
||||
}
|
||||
|
||||
|
||||
.command-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 10px;
|
||||
flex-grow: 1;
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-size: 0.9em;
|
||||
color: var(--text-color); /* Use standard text color */
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-color-secondary); /* Use standard secondary text color */
|
||||
cursor: pointer;
|
||||
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 {
|
||||
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(--bs-danger, red); /* Use danger color */
|
||||
background-color: rgba(220, 53, 69, 0.1); /* Subtle danger background */
|
||||
}
|
||||
|
||||
.loading-message,
|
||||
.empty-message {
|
||||
padding: calc(var(--base-padding, 1rem) * 2); /* Increase padding */
|
||||
text-align: center;
|
||||
color: var(--text-color-secondary); /* Use standard secondary text color */
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user