Open
Conversation
Contributor
审阅者指南为每个服务器添加基于 localStorage 的控制台命令历史记录,并支持在控制台输入框中通过上下方向键导航之前发送过的命令。 控制台输入上下方向键历史导航的时序图sequenceDiagram
actor User
participant ConsoleInputComponent
participant LocalStorage
User->>ConsoleInputComponent: keydown ArrowUp/ArrowDown
ConsoleInputComponent->>ConsoleInputComponent: handleKeydown(e)
alt showSuggestions is false and key is ArrowUp/ArrowDown
ConsoleInputComponent->>ConsoleInputComponent: update commandHistoryIndex
ConsoleInputComponent->>ConsoleInputComponent: clamp index within [0, commandHistoryCache.length - 1]
ConsoleInputComponent->>ConsoleInputComponent: commandInput.value = commandHistoryCache[commandHistoryIndex]
else other keys or suggestions visible
ConsoleInputComponent->>ConsoleInputComponent: existing key handling
end
User->>ConsoleInputComponent: keydown Enter
ConsoleInputComponent->>ConsoleInputComponent: sendCommand()
ConsoleInputComponent->>ConsoleInputComponent: command = commandInput.value.trim()
ConsoleInputComponent->>User: emit sendCommand(command)
ConsoleInputComponent->>ConsoleInputComponent: commandHistoryCache.unshift(command)
ConsoleInputComponent->>ConsoleInputComponent: trim commandHistoryCache to COMMAND_HISTORY_MAX_LENGTH
ConsoleInputComponent->>LocalStorage: setItem(COMMAND_HISTORY_CACHE_KEY, JSON.stringify(commandHistoryCacheAll))
ConsoleInputComponent->>ConsoleInputComponent: commandHistoryIndex = -1
ConsoleInputComponent->>ConsoleInputComponent: reset commandInput and suggestion state
更新后的控制台输入命令历史处理类图classDiagram
class ConsoleInputComponent {
+number consoleFontSize
+Ref commandInput
+Ref showSuggestions
+Ref suggestionIndex
+Ref lastTabOriginalWord
+Ref lastTabWordIndex
+Ref tabCycleIndex
-boolean isCompleting
-string serverId
-string COMMAND_HISTORY_CACHE_KEY
-number COMMAND_HISTORY_MAX_LENGTH
-Record~string, string[]~ commandTree
-any commandHistoryCacheAll
-string[] commandHistoryCache
-number commandHistoryIndex
+sendCommand() void
+handleKeydown(e KeyboardEvent) void
}
class ServerStore {
+string currentServerId
}
class LocalStorageService {
+getItem(key string) string
+setItem(key string, value string) void
}
ConsoleInputComponent --> ServerStore : uses useServerStore
ConsoleInputComponent --> LocalStorageService : uses localStorage
ConsoleInputComponent ..> commandTree : autocomplete data source
ConsoleInputComponent ..> commandHistoryCache : perServerHistory
ConsoleInputComponent ..> commandHistoryCacheAll : allServersHistory
文件级变更
可能关联的议题
提示与指令与 Sourcery 交互
自定义你的体验访问你的 dashboard 以:
获取帮助Original review guide in EnglishReviewer's GuideAdds per-server console command history backed by localStorage and enables navigating previously sent commands in the console input using up/down arrow keys. Sequence diagram for console input up/down history navigationsequenceDiagram
actor User
participant ConsoleInputComponent
participant LocalStorage
User->>ConsoleInputComponent: keydown ArrowUp/ArrowDown
ConsoleInputComponent->>ConsoleInputComponent: handleKeydown(e)
alt showSuggestions is false and key is ArrowUp/ArrowDown
ConsoleInputComponent->>ConsoleInputComponent: update commandHistoryIndex
ConsoleInputComponent->>ConsoleInputComponent: clamp index within [0, commandHistoryCache.length - 1]
ConsoleInputComponent->>ConsoleInputComponent: commandInput.value = commandHistoryCache[commandHistoryIndex]
else other keys or suggestions visible
ConsoleInputComponent->>ConsoleInputComponent: existing key handling
end
User->>ConsoleInputComponent: keydown Enter
ConsoleInputComponent->>ConsoleInputComponent: sendCommand()
ConsoleInputComponent->>ConsoleInputComponent: command = commandInput.value.trim()
ConsoleInputComponent->>User: emit sendCommand(command)
ConsoleInputComponent->>ConsoleInputComponent: commandHistoryCache.unshift(command)
ConsoleInputComponent->>ConsoleInputComponent: trim commandHistoryCache to COMMAND_HISTORY_MAX_LENGTH
ConsoleInputComponent->>LocalStorage: setItem(COMMAND_HISTORY_CACHE_KEY, JSON.stringify(commandHistoryCacheAll))
ConsoleInputComponent->>ConsoleInputComponent: commandHistoryIndex = -1
ConsoleInputComponent->>ConsoleInputComponent: reset commandInput and suggestion state
Class diagram for updated console input command history handlingclassDiagram
class ConsoleInputComponent {
+number consoleFontSize
+Ref commandInput
+Ref showSuggestions
+Ref suggestionIndex
+Ref lastTabOriginalWord
+Ref lastTabWordIndex
+Ref tabCycleIndex
-boolean isCompleting
-string serverId
-string COMMAND_HISTORY_CACHE_KEY
-number COMMAND_HISTORY_MAX_LENGTH
-Record~string, string[]~ commandTree
-any commandHistoryCacheAll
-string[] commandHistoryCache
-number commandHistoryIndex
+sendCommand() void
+handleKeydown(e KeyboardEvent) void
}
class ServerStore {
+string currentServerId
}
class LocalStorageService {
+getItem(key string) string
+setItem(key string, value string) void
}
ConsoleInputComponent --> ServerStore : uses useServerStore
ConsoleInputComponent --> LocalStorageService : uses localStorage
ConsoleInputComponent ..> commandTree : autocomplete data source
ConsoleInputComponent ..> commandHistoryCache : perServerHistory
ConsoleInputComponent ..> commandHistoryCacheAll : allServersHistory
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
There was a problem hiding this comment.
Hey - 我这边发现了 4 个问题,并给出了一些总体性的反馈:
- 当前的命令历史持久化逻辑会读取
commandHistoryCacheAll[serverId.value],但在字符串化之前从未把更新后的commandHistoryCache再写回这个 key,同时只在初始化时获取了一次serverId.value;建议显式地在保存前执行commandHistoryCacheAll[serverId.value] = commandHistoryCache,并且对服务器变更进行响应式处理,这样才能正确地按服务器分别存储和读取历史记录。 - 在 setup 脚本的顶层访问
localStorage,在非浏览器或 SSR 场景中可能会出问题;建议对这些调用加保护(例如检查window/localStorage是否可用),或者在组件挂载时再延迟初始化历史记录。 - 目前
commandHistoryIndex的方向键导航逻辑会产生一些比较别扭的边界行为(例如从 -1 开始再被钳制,或者在超出最新命令时无法清空输入);你可能需要重新审视索引更新/钳制策略,并明确定义在超出历史边界时的统一交互体验。
给 AI Agent 的 Prompt
Please address the comments from this code review:
## Overall Comments
- 当前的命令历史持久化逻辑会读取 `commandHistoryCacheAll[serverId.value]`,但在字符串化之前从未把更新后的 `commandHistoryCache` 再写回这个 key,同时只在初始化时获取了一次 `serverId.value`;建议显式地在保存前执行 `commandHistoryCacheAll[serverId.value] = commandHistoryCache`,并且对服务器变更进行响应式处理,这样才能正确地按服务器分别存储和读取历史记录。
- 在 setup 脚本的顶层访问 `localStorage`,在非浏览器或 SSR 场景中可能会出问题;建议对这些调用加保护(例如检查 `window` / `localStorage` 是否可用),或者在组件挂载时再延迟初始化历史记录。
- 目前 `commandHistoryIndex` 的方向键导航逻辑会产生一些比较别扭的边界行为(例如从 -1 开始再被钳制,或者在超出最新命令时无法清空输入);你可能需要重新审视索引更新/钳制策略,并明确定义在超出历史边界时的统一交互体验。
## Individual Comments
### Comment 1
<location path="src/components/console/ConsoleInput.vue" line_range="10" />
<code_context>
+// 获取服务器ID,定义历史指令缓存参数
+const serverStore = useServerStore();
+const serverId = computed(() => serverStore.currentServerId || "");
+const COMMAND_HISTORY_CACHE_KEY = "commond_history";
+const COMMAND_HISTORY_MAX_LENGTH = 20;
+
</code_context>
<issue_to_address>
**suggestion (typo):** 历史缓存 key 存在拼写错误,后续可能造成困惑或不一致。
字符串 `"commond_history"` 很可能是想写成 `"command_history"`。现在就进行重命名能让 key 更一致、易理解;如果已经在使用旧 key,可以考虑做一个简单的数据迁移。
建议实现:
```
// 获取服务器ID,定义历史指令缓存参数
const serverStore = useServerStore();
const serverId = computed(() => serverStore.currentServerId || "");
const COMMAND_HISTORY_CACHE_KEY = "command_history";
const COMMAND_HISTORY_MAX_LENGTH = 20;
```
如果 `"commond_history"` 已经写入过 localStorage 或其他持久化存储,你应该在首次读取历史记录的地方加入一个小迁移逻辑:
1. 初始化时,如果在 `"command_history"` 下没有数据,但在 `"commond_history"` 下有数据,则读取旧 key 的数据并存入新的 `"command_history"` key,然后删除旧 key。
2. 这段逻辑应放在首次通过 `COMMAND_HISTORY_CACHE_KEY` 加载历史记录的地方(本文件或相关文件中)。
</issue_to_address>
### Comment 2
<location path="src/components/console/ConsoleInput.vue" line_range="33-34" />
<code_context>
const tabCycleIndex = ref(0);
+
let isCompleting = false;
+const commandHistoryCacheAll = JSON.parse(localStorage.getItem(COMMAND_HISTORY_CACHE_KEY) || "{}");
+const commandHistoryCache = commandHistoryCacheAll[serverId.value] || [];
+let commandHistoryIndex = -1;
</code_context>
<issue_to_address>
**issue (bug_risk):** 当前在持久化历史记录时,没有把当前服务器对应的 `commandHistoryCache` 更新回 `commandHistoryCacheAll`,因此按服务器区分的历史可能无法被正确保存。
当当前服务器的 key 不存在时,`commandHistoryCache` 会是一个单独的数组,对它的修改不会反映到 `commandHistoryCacheAll` 上。在调用 `localStorage.setItem` 之前,应先执行 `commandHistoryCacheAll[serverId.value] = commandHistoryCache`,这样序列化后的对象中才会包含该服务器更新后的历史记录。
</issue_to_address>
### Comment 3
<location path="src/components/console/ConsoleInput.vue" line_range="249-256" />
<code_context>
}
+ // 上下键选择历史指令
+ if (showSuggestions.value == false && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+ commandHistoryIndex += e.key === "ArrowUp" ? 1 : -1;
+ if (commandHistoryCache.length <= commandHistoryIndex) {
+ commandHistoryIndex = commandHistoryCache.length - 1;
+ } else if (commandHistoryIndex < 0) {
+ commandHistoryIndex = 0;
+ }
+ commandInput.value = commandHistoryCache[commandHistoryIndex];
+ return;
+ }
</code_context>
<issue_to_address>
**suggestion (bug_risk):** 上/下方向键导航逻辑存在一些潜在的异常行为,并且在历史记录为空时没有安全处理。
主要问题:
- 在 `commandHistoryIndex` 初始为 `-1` 的情况下,第一次按下 ArrowDown 会将其设为 `-2`,然后被钳制为 `0`,因此 ArrowUp 和 ArrowDown 第一次都会落在索引 `0`,违反了预期的「向上 = 更旧,向下 = 更新」的语义。
- 当 `commandHistoryCache.length === 0` 时,索引会被钳制到 `0`,此时 `commandInput.value` 会变成 `undefined`。在历史为空时,最好直接提前返回。
- 建议重构索引钳制逻辑,使方向语义更明确,例如:
- Up:`index = Math.min(index + 1, maxIndex)`
- Down:`index = Math.max(index - 1, -1)`
并且在索引为 `-1` 时恢复原始输入内容,而不是强制跳到索引 0。
</issue_to_address>
### Comment 4
<location path="src/components/console/ConsoleInput.vue" line_range="9-15" />
<code_context>
+// 获取服务器ID,定义历史指令缓存参数
+const serverStore = useServerStore();
+const serverId = computed(() => serverStore.currentServerId || "");
+const COMMAND_HISTORY_CACHE_KEY = "commond_history";
+const COMMAND_HISTORY_MAX_LENGTH = 20;
</code_context>
<issue_to_address>
**issue (bug_risk):** 命令历史缓存和初始化时的 `serverId` 绑定在一起,当当前服务器发生变化时不会更新。
由于 `serverId` 是一个可能变化的 computed,`commandHistoryCache` 必须从它中以响应式方式派生出来。否则,在切换服务器后,命令仍然会在原服务器的历史下读写。请让 `commandHistoryCache` 依赖 `serverId`(例如使用另一个 computed,或 watcher 重新解析底层数组),以确保始终使用当前服务器对应的历史数据。
</issue_to_address>帮我变得更有用!请在每条评论上点 👍 或 👎,我会根据你的反馈改进 Review 质量。
Original comment in English
Hey - I've found 4 issues, and left some high level feedback:
- The command history persistence currently reads
commandHistoryCacheAll[serverId.value]but never writes the updatedcommandHistoryCacheback under that key before stringifying, and also only capturesserverId.valueonce at setup; consider explicitly assigningcommandHistoryCacheAll[serverId.value] = commandHistoryCacheand handling server changes reactively so per-server history is actually stored and retrieved correctly. - Accessing
localStorageat the top level of the setup script can cause issues in non-browser or SSR contexts; consider guarding these calls (e.g. checking forwindow/localStorageavailability) or lazily initializing the history when the component is mounted. - The arrow key navigation logic for
commandHistoryIndexcan produce awkward edge behavior (e.g., starting from -1 and clamping, or not allowing clearing the input when navigating past the newest command); you may want to revisit the index update/clamping strategy and define a consistent UX for navigating beyond the bounds of the history.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The command history persistence currently reads `commandHistoryCacheAll[serverId.value]` but never writes the updated `commandHistoryCache` back under that key before stringifying, and also only captures `serverId.value` once at setup; consider explicitly assigning `commandHistoryCacheAll[serverId.value] = commandHistoryCache` and handling server changes reactively so per-server history is actually stored and retrieved correctly.
- Accessing `localStorage` at the top level of the setup script can cause issues in non-browser or SSR contexts; consider guarding these calls (e.g. checking for `window`/`localStorage` availability) or lazily initializing the history when the component is mounted.
- The arrow key navigation logic for `commandHistoryIndex` can produce awkward edge behavior (e.g., starting from -1 and clamping, or not allowing clearing the input when navigating past the newest command); you may want to revisit the index update/clamping strategy and define a consistent UX for navigating beyond the bounds of the history.
## Individual Comments
### Comment 1
<location path="src/components/console/ConsoleInput.vue" line_range="10" />
<code_context>
+// 获取服务器ID,定义历史指令缓存参数
+const serverStore = useServerStore();
+const serverId = computed(() => serverStore.currentServerId || "");
+const COMMAND_HISTORY_CACHE_KEY = "commond_history";
+const COMMAND_HISTORY_MAX_LENGTH = 20;
+
</code_context>
<issue_to_address>
**suggestion (typo):** The history cache key has a typo that may cause confusion or inconsistency later.
The string `"commond_history"` is likely meant to be `"command_history"`. Renaming it now will keep the key consistent and easier to understand; if this is already in use, consider a simple migration for existing data.
Suggested implementation:
```
// 获取服务器ID,定义历史指令缓存参数
const serverStore = useServerStore();
const serverId = computed(() => serverStore.currentServerId || "");
const COMMAND_HISTORY_CACHE_KEY = "command_history";
const COMMAND_HISTORY_MAX_LENGTH = 20;
```
If `"commond_history"` has already been written to localStorage or another persistence layer, you should add a small migration where the history is first read:
1. On initialization, if there is no data under `"command_history"` but data exists under `"commond_history"`, read it and store it under the new `"command_history"` key, then remove the old key.
2. This logic should be placed wherever the history is initially loaded using `COMMAND_HISTORY_CACHE_KEY` in this or related files.
</issue_to_address>
### Comment 2
<location path="src/components/console/ConsoleInput.vue" line_range="33-34" />
<code_context>
const tabCycleIndex = ref(0);
+
let isCompleting = false;
+const commandHistoryCacheAll = JSON.parse(localStorage.getItem(COMMAND_HISTORY_CACHE_KEY) || "{}");
+const commandHistoryCache = commandHistoryCacheAll[serverId.value] || [];
+let commandHistoryIndex = -1;
</code_context>
<issue_to_address>
**issue (bug_risk):** History is persisted without updating `commandHistoryCacheAll` for the current server, so per-server history may not be saved correctly.
Because `commandHistoryCache` is a separate array when the server key is missing, mutations to it are not reflected in `commandHistoryCacheAll`. Before calling `localStorage.setItem`, you should assign `commandHistoryCacheAll[serverId.value] = commandHistoryCache` so the serialized object includes the updated history for this server.
</issue_to_address>
### Comment 3
<location path="src/components/console/ConsoleInput.vue" line_range="249-256" />
<code_context>
}
+ // 上下键选择历史指令
+ if (showSuggestions.value == false && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+ commandHistoryIndex += e.key === "ArrowUp" ? 1 : -1;
+ if (commandHistoryCache.length <= commandHistoryIndex) {
+ commandHistoryIndex = commandHistoryCache.length - 1;
+ } else if (commandHistoryIndex < 0) {
+ commandHistoryIndex = 0;
+ }
+ commandInput.value = commandHistoryCache[commandHistoryIndex];
+ return;
+ }
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Arrow up/down navigation logic can behave unexpectedly and does not handle an empty history safely.
Key issues:
- With `commandHistoryIndex` starting at `-1`, the first ArrowDown sets it to `-2`, then it’s clamped to `0`, so both ArrowUp and ArrowDown first land on index `0`. This breaks the expected "Up = older, Down = newer" behavior.
- When `commandHistoryCache.length === 0`, the index is clamped to `0` and `commandInput.value` becomes `undefined`. It’s safer to early-return when the history is empty.
- Refactor the clamping so the direction semantics are explicit, e.g.:
- Up: `index = Math.min(index + 1, maxIndex)`
- Down: `index = Math.max(index - 1, -1)`
and when at `-1`, restore the original input instead of forcing index 0.
</issue_to_address>
### Comment 4
<location path="src/components/console/ConsoleInput.vue" line_range="9-15" />
<code_context>
+// 获取服务器ID,定义历史指令缓存参数
+const serverStore = useServerStore();
+const serverId = computed(() => serverStore.currentServerId || "");
+const COMMAND_HISTORY_CACHE_KEY = "commond_history";
+const COMMAND_HISTORY_MAX_LENGTH = 20;
</code_context>
<issue_to_address>
**issue (bug_risk):** The command history cache is bound to the initial `serverId` value and won’t update if the current server changes.
Because `serverId` is a computed that can change, `commandHistoryCache` must be derived reactively from it. Otherwise, after a server switch, commands will still be read/written under the original server’s history. Please make `commandHistoryCache` depend on `serverId` (e.g., another computed or a watcher that re-resolves the underlying array) so it always uses the current server’s history.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Collaborator
|
改成db添加命令历史,使用查询更好 即服务器日志新增一个input或者command类型 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
提交前检查清单
提交前测试必读!!!.md并完成要求测试变更分类(必选其一)
feat新功能影响范围(可多选)
导入规范检查: 使用别名导入,避免相对路径
../变更详情
具体改动
修改输入框组件,使用 localStorage 存储历史发送记录,监听按键自动键入历史记录
关联 Issue
自动化审查说明
sourcery-ai 及其他 code review 工具请务必进行中英双语审查与交流。
Note: Please ensure sourcery-ai and other tools perform bilingual (Chinese & English) review.
由 Sourcery 提供的摘要
在控制台输入中添加基于服务器的命令历史记录以及键盘导航功能。
新特性:
localStorage中按服务器分别持久化控制台命令历史记录,并设置历史记录数量上限。Original summary in English
Summary by Sourcery
Add per-server console command history with keyboard navigation in the console input.
New Features: