Repository navigation
feat(dashboard): restyle the command and function tool views in the handlers panel - #10499
Open
mantoujun12 wants to merge 1 commit into
Open
mantoujun12 wants to merge 1 commit into
mantoujun12 wants to merge 1 commit into
Conversation
…andlers panel Bring the search and filter controls of the "Manage Handlers" panel back in line with the flat filled-control style used across the dashboard. The four command filter selects (plugin, type, permission, status) and the function tool search field now use variant="solo-filled" with flat instead of the outlined variant, matching the conversation page and the sibling Plugins, Skills and MCP tabs. Density and hide-details are kept as they were, so the information density is unchanged. The search field wrapper in CommandFilters no longer carries the hardcoded 1px #B9B9B9 border and 16px radius; the field keeps its min and max width constraints and takes its rounding from the global VTextField rounded: 'lg' default. The function tool search field also picks up single-line for consistency with the command view. The command and function tool table cards drop elevation-1 in favour of variant="outlined", so they render flat with a hairline border and no shadow, the same treatment the plugin detail cards and the config page sections already use. The per-page select in the data table footer is restyled through scoped CSS, because Vuetify hardcodes variant="outlined" on it inside VDataTableFooter and no prop can reach it. It now gets the same 4% on-surface fill and 8px radius as a filled control, with the outline hidden by default and restored on focus so keyboard focus stays visible. No behavior changed: filtering logic, component props and emits, table columns and i18n keys are all untouched. Scope is limited to the two tables in the handlers panel, so the remaining data tables keep the default outlined footer select. There is no backend or API change, so the generated API client was not regenerated. Verified with vue-tsc --noEmit.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
This branch has not been deployed
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
1 participant
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.
管理行为（插件 → 管理行为）下的指令视图与函数工具视图，顶部搜索与筛选控件的视觉风格和仪表盘其余部分对不上：指令的四个筛选下拉用的是 outlined 变体，搜索框外面还额外套了一层硬编码 1px 灰边框加 16px 圆角的容器；函数工具的搜索框又是另一种写法，且缺少 single-line。两张表所在的卡片都带 elevation-1 投影，而配置文件页与插件详情页用的是扁平描边卡片。本次改动把这两处统一到仓库既有的扁平填充控件风格，让「管理行为」不再成为插件工作区里唯一跑偏的页面。
Modifications / 改动点
dashboard/src/components/extension/componentPanel/components/CommandFilters.vue：指令视图的插件、类型、权限、状态四个筛选下拉由variant="outlined"改为variant="solo-filled"并补上flat，密度与 hide-details 保持不变；同时移除搜索框外层容器上硬编码的border: 1px solid #B9B9B9与border-radius: 16px，保留其 min-width 200px、max-width 350px、flex 1 的尺寸约束，圆角改由全局VTextField的rounded: 'lg'默认值提供。dashboard/src/components/extension/componentPanel/index.vue：函数工具视图的搜索框由variant="outlined"改为variant="solo-filled"，补上flat与single-line，与指令视图保持一致。dashboard/src/components/extension/componentPanel/components/CommandTable.vue与ToolTable.vue：表格卡片去掉elevation-1，改用variant="outlined"，渲染为无投影、细描边的扁平卡片，与插件详情页卡片和配置文件页分区保持同一处理方式。同上两个文件：数据表页脚的每页数量选择器通过 scoped CSS 重做外观。该控件由 Vuetify 在 VDataTableFooter 内部硬编码为
variant="outlined"，props 无法触达，因此覆盖为与填充式控件一致的 4% on-surface 底色与 8px 圆角，默认隐藏描边，聚焦时恢复描边以保证键盘焦点可见。未改动的内容：筛选与搜索逻辑、组件 props 与 emits、表格列定义、i18n key、路由与后端接口。本次不涉及 OpenAPI 变更，因此未重新生成前端 API 客户端。
本次未改动导航入口、页面结构与界面术语，
docs/zh与docs/en无需同步更新。This is NOT a breaking change. / 这不是一个破坏性变更。
Screenshots or Test Results / 运行截图或测试结果
Before / 改动前
指令
函数工具
After / 改动后
指令
函数工具
Checklist / 检查清单
😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
/ 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。
👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
/ 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。
📚 I checked the affected WebUI instructions and screenshots in
docs/zhanddocs/enagainst the changed navigation, page structure, and labels, and updated them in this PR (or explained why no documentation update is needed). For renamed, moved, or merged entry points, I included an old entry → new entry mapping in the documentation and changelog./ 我已对照变化后的 WebUI 入口、页面结构和术语，核对并在本 PR 中更新
docs/zh和docs/en的相关操作说明与截图（或说明无需更新文档的原因）。入口改名、移动或合并时，已在文档和 changelog 中补充 旧入口 → 新入口 对照。🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in
requirements.txtandpyproject.toml./ 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到
requirements.txt和pyproject.toml文件相应位置。😮 My changes do not introduce malicious code.
/ 我的更改没有引入恶意代码。
Summary by Sourcery
Enhancements: