ux: 优化 Key 搜索区布局和操作逻辑
- 去掉 MATCH 前缀标签, 改为搜索图标 (Search icon prefix) - Go 按钮改为搜索图标按钮, 带 tooltip 说明通配符用法 - Filter 输入框加 Filter 图标前缀, 与扫描区分 - placeholder 更新: '扫描 Key (如 user:*, 支持 * ?)' - 新增 scanHint i18n (5 语言): 说明 * ? 通配符和回车扫描
This commit is contained in:
@@ -520,8 +520,8 @@ onUnmounted(() => {
|
||||
@focus="showHistory = searchHistory.length > 0"
|
||||
@blur="handleHistoryBlur"
|
||||
>
|
||||
<template #prepend>
|
||||
<span class="pattern-label">MATCH</span>
|
||||
<template #prefix>
|
||||
<el-icon class="search-icon"><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<div v-if="showHistory && searchHistory.length > 0" class="history-dropdown">
|
||||
@@ -542,7 +542,11 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button size="small" type="primary" @click="applyPattern">Go</el-button>
|
||||
<el-tooltip :content="t('key.scanHint')" placement="bottom">
|
||||
<el-button size="small" type="primary" @click="applyPattern">
|
||||
<el-icon><Search /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="key-toolbar">
|
||||
@@ -552,7 +556,11 @@ onUnmounted(() => {
|
||||
size="small"
|
||||
clearable
|
||||
class="filter-input"
|
||||
/>
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="search-icon"><Filter /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button size="small" @click="importKeys" :disabled="!connStore.activeId" class="import-btn">
|
||||
{{ t('key.importKeys') }}
|
||||
</el-button>
|
||||
@@ -710,16 +718,8 @@ onUnmounted(() => {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pattern-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-light);
|
||||
}
|
||||
|
||||
.pattern-input :deep(.el-input-group__prepend) {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--accent-light);
|
||||
.search-icon {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.key-toolbar {
|
||||
|
||||
@@ -102,7 +102,8 @@ export default {
|
||||
selected: '{n} ausgewählt',
|
||||
selectKey: 'Wählen Sie einen Schlüssel für Details',
|
||||
unsupported: 'Typ "{type}"-Anzeige noch nicht implementiert',
|
||||
patternPlaceholder: 'Schlüsselmuster (z.B. user:*)',
|
||||
patternPlaceholder: 'Schlüssel scannen (z.B. user:*, * ? unterstützt)',
|
||||
scanHint: 'Schlüssel auf dem Redis-Server scannen. * passt zu beliebigen Zeichen, ? zu einem einzelnen Zeichen. Enter zum Scannen.',
|
||||
searchHistory: 'Suchverlauf',
|
||||
clearHistory: 'Verlauf löschen',
|
||||
noHistory: 'Kein Verlauf',
|
||||
|
||||
@@ -102,7 +102,8 @@ export default {
|
||||
selected: '{n} selected',
|
||||
selectKey: 'Select a key to view details',
|
||||
unsupported: 'Type "{type}" viewer not yet implemented',
|
||||
patternPlaceholder: 'Key pattern (e.g. user:*)',
|
||||
patternPlaceholder: 'Scan keys (e.g. user:*, supports * ?)',
|
||||
scanHint: 'Scan keys on Redis server. * matches any characters, ? matches a single character. Press Enter to scan.',
|
||||
searchHistory: 'Search History',
|
||||
clearHistory: 'Clear History',
|
||||
noHistory: 'No history',
|
||||
|
||||
@@ -102,7 +102,8 @@ export default {
|
||||
selected: '{n} 個選択済み',
|
||||
selectKey: 'キーを選択して詳細を表示',
|
||||
unsupported: 'タイプ "{type}" のビューアーは未実装です',
|
||||
patternPlaceholder: 'キーパターン (例: user:*)',
|
||||
patternPlaceholder: 'キーをスキャン (例: user:*, * ? 対応)',
|
||||
scanHint: 'Redisサーバーでキーをスキャン。* は任意の文字列、? は1文字に一致。Enterでスキャン。',
|
||||
searchHistory: '検索履歴',
|
||||
clearHistory: '履歴をクリア',
|
||||
noHistory: '履歴なし',
|
||||
|
||||
@@ -102,7 +102,8 @@ export default {
|
||||
selected: '{n}개 선택됨',
|
||||
selectKey: '키를 선택하여 세부 정보 보기',
|
||||
unsupported: '"{type}" 유형 뷰어가 아직 구현되지 않았습니다',
|
||||
patternPlaceholder: '키 패턴 (예: user:*)',
|
||||
patternPlaceholder: '키 스캔 (예: user:*, * ? 지원)',
|
||||
scanHint: 'Redis 서버에서 키를 스캔합니다. * 는 임의의 문자, ? 는 단일 문자와 일치. Enter로 스캔.',
|
||||
searchHistory: '검색 기록',
|
||||
clearHistory: '기록 지우기',
|
||||
noHistory: '기록 없음',
|
||||
|
||||
@@ -102,7 +102,8 @@ export default {
|
||||
selected: '已选 {n} 项',
|
||||
selectKey: '选择一个键查看详情',
|
||||
unsupported: '类型 "{type}" 查看器尚未实现',
|
||||
patternPlaceholder: '键模式 (例如 user:*)',
|
||||
patternPlaceholder: '扫描 Key (如 user:*, 支持 * ?)',
|
||||
scanHint: '在 Redis 服务端按模式扫描 Key。* 匹配任意字符, ? 匹配单个字符。回车扫描。',
|
||||
searchHistory: '搜索历史',
|
||||
clearHistory: '清除历史',
|
||||
noHistory: '暂无历史',
|
||||
|
||||
Reference in New Issue
Block a user