Skip to content

fix: Modify UI reviews#1786

Merged
hexqi merged 4 commits intoopentiny:developfrom
xuanlid:fix/uiReview
Mar 18, 2026
Merged

fix: Modify UI reviews#1786
hexqi merged 4 commits intoopentiny:developfrom
xuanlid:fix/uiReview

Conversation

@xuanlid
Copy link
Contributor

@xuanlid xuanlid commented Mar 17, 2026

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our Commit Message Guidelines
  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)
  • Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

Background and solution

主要修改内容:

  1. 部分图标替换
  2. 模型驱动面板样式
  3. 模型设置器面板样式
  4. 资源管理面板样式
  5. 工具管理面板标题和描述信息
  6. ai对话框样式

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • Style

    • Visual refinements: spacing, padding, margins, and font-size tweaks across configurator, plugins, chat, workspace, and toolbars.
    • Popover/panel updates: new popper class hooks, adjusted border-radius, left-side shadow, themed color tokens, removed some hardcoded backgrounds, and added a panel shadow variable.
    • Increased popover widths, improved username truncation, and updated several SVG icon graphics.
  • Chores

    • Updated plugin UI labels/text and default toolbar icons; swapped some icon usages to inline SVG.

@github-actions github-actions bot added the bug Something isn't working label Mar 17, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 17, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

Multiple styling and UI text updates across configurator, plugin, toolbar, layout, and icon SVG files: padding/margin adjustments, new popper classes and popper styles, theme variable addition, SVG icon geometry/clip changes, and a few text/comment replacements from "资源管理" to "工具管理". No JS logic or public API changes.

Changes

Cohort / File(s) Summary
Configurator: model UI
packages/configurator/src/model-api-configurator/ModelApiConfigurator.vue, packages/configurator/src/model-configurator/ModelConfigurator.vue
Added popper classes (model-function-popper, model-popper), adjusted margins/padding, added global popper styles (zero radius, left box-shadow), and replaced hardcoded colors with theme variables.
Configurator: source select
packages/configurator/src/source-select-configurator/SourceSelectConfigurator.vue
Removed container background; updated image wrapper background and modal button border to configurator theme tokens.
Configurator: theme vars
packages/configurator/src/styles/vars.less
Added --te-configurator-common-panel-shadow-color = var(--te-common-shadow-panel).
Plugins: bridge (UI/docs/comments & http)
packages/plugins/bridge/src/Main.vue, packages/plugins/bridge/src/http.ts, packages/plugins/bridge/src/styles/vars.less
Replaced display text and comments from "资源管理" → "工具管理"; template/docs/comment-only changes, no API/signature edits.
Plugins: model manager
packages/plugins/model-manager/src/components/ModelBasicForm.vue, packages/plugins/model-manager/src/components/ModelSetting.vue
Reduced form-item spacing, removed fixed width, refined header/content padding, removed header borders via deep selectors, adjusted tiny-collapse styling.
Plugins: resource
packages/plugins/resource/src/ResourceSetting.vue
Added resource-plugin-setting wrapper class; applied deep selectors to remove header border, adjust content padding, and tweak collapse styles.
Plugins: robot UI & icons
packages/plugins/robot/src/components/chat/RobotChat.vue, packages/plugins/robot/src/components/header-extension/robot-setting/RobotSetting.vue, packages/plugins/robot/src/Main.vue, packages/plugins/robot/src/components/footer-extension/McpServer.vue, packages/plugins/robot/src/components/footer-button/FooterButton.vue, packages/plugins/robot/src/components/icons/*
UI tweaks: reduced font/icon sizes and spacing, swapped some Icon components to <svg-icon>, added footer color rule, and updated several SVG icons (added clipPath/defs, adjusted geometry/fills). No behavioral changes.
Layout & toolbar: user popover / icons
packages/layout/src/DesignWorkspace.vue, packages/toolbars/user/src/Main.vue, packages/layout/src/DesignToolbars.vue, packages/layout/src/ToolbarCollapse.vue
Increased popover widths, moved username into .name element with two-line truncation and flex layout, expanded tenant width, and swapped toolbar icons (visual-only).
Theme / base styles
packages/theme/base/src/component-common.less
Changed tiny-select top-create text color from --te-common-text-emphasize to --te-common-text-primary.
Toolbars: meta icons
packages/toolbars/generate-code/meta.js, packages/toolbars/view-setting/meta.js
Updated default toolbar icons (flow-downloadgenerate-code, routerviewnest-attempt).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through pixels, margins, and shade,
Nudged poppers and names where layouts are laid,
Tokens aligned, fonts trimmed small and bright,
I clipped and stroked each SVG bite,
A whisker-twitch later — UI feels light. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'fix: Modify UI reviews' is vague and overly generic, using non-descriptive terms that don't convey meaningful information about the specific UI changes made. Use a more specific and descriptive title that captures the primary changes, such as 'fix: Update UI styling and icons across components' or 'fix: Refactor component styling and icon updates'.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/layout/src/DesignWorkspace.vue (1)

247-261: Consider extracting shared username-truncation styles.

This block is very similar to packages/toolbars/user/src/Main.vue; moving it to a shared utility/mixin would reduce style drift over time.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/layout/src/DesignWorkspace.vue` around lines 247 - 261, Extract the
repeated username-truncation and user-icon styles from DesignWorkspace.vue into
a shared style utility (e.g., a common CSS/SCSS partial or a Vue style mixin)
and import it into both DesignWorkspace.vue and
packages/toolbars/user/src/Main.vue; specifically move the .user-icon rules
(margin-right, font-size) and the .name truncation rules (-webkit-line-clamp,
-webkit-box-orient, overflow, text-overflow, word-break, width) into the shared
file, replace the local block in DesignWorkspace.vue with an import/usage of
that shared style, and update Main.vue to use the same shared import so both
components reference the single source of truth for username truncation and icon
spacing.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/layout/src/DesignWorkspace.vue`:
- Around line 247-261: Extract the repeated username-truncation and user-icon
styles from DesignWorkspace.vue into a shared style utility (e.g., a common
CSS/SCSS partial or a Vue style mixin) and import it into both
DesignWorkspace.vue and packages/toolbars/user/src/Main.vue; specifically move
the .user-icon rules (margin-right, font-size) and the .name truncation rules
(-webkit-line-clamp, -webkit-box-orient, overflow, text-overflow, word-break,
width) into the shared file, replace the local block in DesignWorkspace.vue with
an import/usage of that shared style, and update Main.vue to use the same shared
import so both components reference the single source of truth for username
truncation and icon spacing.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ecce8d04-4ebb-431b-af86-fa23ef5899a0

📥 Commits

Reviewing files that changed from the base of the PR and between bb7d746 and 09b2277.

📒 Files selected for processing (2)
  • packages/layout/src/DesignWorkspace.vue
  • packages/toolbars/user/src/Main.vue

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/layout/src/ToolbarCollapse.vue (1)

44-47: Consider removing unused IconPopup import.

IconPopup is imported and registered as a component but is not used anywhere in the template.

🧹 Suggested cleanup
 import { Popover } from '@opentiny/vue'
-import { IconPopup } from '@opentiny/vue-icon'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
   components: {
-    TinyPopover: Popover as Component,
-    IconPopup: IconPopup()
+    TinyPopover: Popover as Component
   },
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/layout/src/ToolbarCollapse.vue` around lines 44 - 47, The IconPopup
component is imported and registered in ToolbarCollapse.vue but not used in the
template; either remove the IconPopup import and its registration entry (the
IconPopup() registration in the components object) or add the missing usage
where intended. Update the components block to only include TinyPopover (Popover
as Component) if you choose removal, and delete the IconPopup() call and its
import to eliminate the unused symbol.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/plugins/robot/src/components/icons/mcp-icon.vue`:
- Around line 18-28: Remove the orphaned/invalid SVG id attributes in the
mcp-icon.vue SVG: delete the duplicate id="容器 6" attributes (they appear on
multiple <rect> elements) and either remove or sanitize id="矢量 667" so it
contains no whitespace (e.g., change to "矢量_667" or remove if unused). Ensure no
other SVG elements in this component retain duplicate or space-containing id
values; leave IDs only if they are actually referenced by scripts or CSS.

---

Nitpick comments:
In `@packages/layout/src/ToolbarCollapse.vue`:
- Around line 44-47: The IconPopup component is imported and registered in
ToolbarCollapse.vue but not used in the template; either remove the IconPopup
import and its registration entry (the IconPopup() registration in the
components object) or add the missing usage where intended. Update the
components block to only include TinyPopover (Popover as Component) if you
choose removal, and delete the IconPopup() call and its import to eliminate the
unused symbol.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 940256ec-741b-49dc-abad-10416fdef2fe

📥 Commits

Reviewing files that changed from the base of the PR and between 5c4988b and f8d0270.

⛔ Files ignored due to path filters (9)
  • packages/design-core/assets/chat.svg is excluded by !**/*.svg
  • packages/design-core/assets/generate-code.svg is excluded by !**/*.svg
  • packages/design-core/assets/intelligent-construction.svg is excluded by !**/*.svg
  • packages/design-core/assets/more.svg is excluded by !**/*.svg
  • packages/design-core/assets/nest-attempt.svg is excluded by !**/*.svg
  • packages/design-core/assets/plugin.svg is excluded by !**/*.svg
  • packages/design-core/assets/think.svg is excluded by !**/*.svg
  • packages/design-core/assets/upload.svg is excluded by !**/*.svg
  • packages/design-core/assets/workspace-menu.svg is excluded by !**/*.svg
📒 Files selected for processing (10)
  • packages/layout/src/DesignToolbars.vue
  • packages/layout/src/ToolbarCollapse.vue
  • packages/plugins/robot/src/Main.vue
  • packages/plugins/robot/src/components/chat/FooterButton.vue
  • packages/plugins/robot/src/components/footer-extension/McpServer.vue
  • packages/plugins/robot/src/components/icons/mcp-icon.vue
  • packages/plugins/robot/src/components/icons/page-icon.vue
  • packages/plugins/robot/src/components/icons/study-icon.vue
  • packages/toolbars/generate-code/meta.js
  • packages/toolbars/view-setting/meta.js
✅ Files skipped from review due to trivial changes (1)
  • packages/toolbars/generate-code/meta.js

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
packages/layout/src/ToolbarCollapse.vue (1)

44-47: Unused IconPopup import and registration.

IconPopup is imported from @opentiny/vue-icon and registered in the components but is never used in the template. Consider removing it to reduce bundle size.

♻️ Proposed cleanup
 import { Popover } from '@opentiny/vue'
-import { IconPopup } from '@opentiny/vue-icon'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { computed } from 'vue'
 import type { Component } from 'vue'

 const { OPEN_DELAY } = constants

 export default {
   components: {
-    TinyPopover: Popover as Component,
-    IconPopup: IconPopup()
+    TinyPopover: Popover as Component
   },
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/layout/src/ToolbarCollapse.vue` around lines 44 - 47, The IconPopup
import and registration are unused: remove the IconPopup import from
`@opentiny/vue-icon` and delete the IconPopup entry in the components object in
ToolbarCollapse.vue (the IconPopup() registration) to avoid bundling unused code
and ensure the template contains no references to IconPopup before removing.
packages/plugins/robot/src/components/icons/mcp-icon.vue (1)

10-10: Non-standard customFrame attribute on SVG element.

The customFrame attribute is not a standard SVG attribute. If this is intentional for custom tooling or design software metadata, consider adding a brief comment. Otherwise, it can be safely removed.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/plugins/robot/src/components/icons/mcp-icon.vue` at line 10, The svg
in component mcp-icon.vue contains a non-standard attribute
customFrame="url(`#clipPath_2`)"; remove this attribute from the SVG element (or,
if it is required by external tooling, wrap a brief inline comment next to it
documenting its purpose) so the SVG uses only standard attributes; search for
customFrame in mcp-icon.vue to locate and either delete the attribute or replace
it with a documented comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/plugins/robot/src/components/icons/page-icon.vue`:
- Around line 17-42: The SVG contains duplicate and invalid id attributes from
the design export: remove or rename the duplicate id="容器 7" attributes on the
<rect> elements and remove or replace the id="矢量 673" on the <path> so they are
unique and contain no ASCII whitespace; simplest fix is to delete these orphaned
id attributes entirely from the page-icon SVG (the <rect> and <path> elements
shown) since they are not referenced elsewhere.

In `@packages/plugins/robot/src/components/icons/study-icon.vue`:
- Around line 17-42: Remove the non-conforming/duplicate SVG id attributes in
the study-icon component: delete the two rect id="容器 8" attributes and remove or
replace the path id="矢量 670" (which contains whitespace) because they are
unused; if IDs are needed later, give them unique, valid names (no spaces) and
update any references accordingly.

---

Nitpick comments:
In `@packages/layout/src/ToolbarCollapse.vue`:
- Around line 44-47: The IconPopup import and registration are unused: remove
the IconPopup import from `@opentiny/vue-icon` and delete the IconPopup entry in
the components object in ToolbarCollapse.vue (the IconPopup() registration) to
avoid bundling unused code and ensure the template contains no references to
IconPopup before removing.

In `@packages/plugins/robot/src/components/icons/mcp-icon.vue`:
- Line 10: The svg in component mcp-icon.vue contains a non-standard attribute
customFrame="url(`#clipPath_2`)"; remove this attribute from the SVG element (or,
if it is required by external tooling, wrap a brief inline comment next to it
documenting its purpose) so the SVG uses only standard attributes; search for
customFrame in mcp-icon.vue to locate and either delete the attribute or replace
it with a documented comment.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 35774310-a5e7-4bdb-b620-c2bc2264dc5a

📥 Commits

Reviewing files that changed from the base of the PR and between f8d0270 and f477070.

⛔ Files ignored due to path filters (9)
  • packages/design-core/assets/chat.svg is excluded by !**/*.svg
  • packages/design-core/assets/generate-code.svg is excluded by !**/*.svg
  • packages/design-core/assets/intelligent-construction.svg is excluded by !**/*.svg
  • packages/design-core/assets/more.svg is excluded by !**/*.svg
  • packages/design-core/assets/nest-attempt.svg is excluded by !**/*.svg
  • packages/design-core/assets/plugin.svg is excluded by !**/*.svg
  • packages/design-core/assets/think.svg is excluded by !**/*.svg
  • packages/design-core/assets/upload.svg is excluded by !**/*.svg
  • packages/design-core/assets/workspace-menu.svg is excluded by !**/*.svg
📒 Files selected for processing (10)
  • packages/layout/src/DesignToolbars.vue
  • packages/layout/src/ToolbarCollapse.vue
  • packages/plugins/robot/src/Main.vue
  • packages/plugins/robot/src/components/chat/FooterButton.vue
  • packages/plugins/robot/src/components/footer-extension/McpServer.vue
  • packages/plugins/robot/src/components/icons/mcp-icon.vue
  • packages/plugins/robot/src/components/icons/page-icon.vue
  • packages/plugins/robot/src/components/icons/study-icon.vue
  • packages/toolbars/generate-code/meta.js
  • packages/toolbars/view-setting/meta.js
✅ Files skipped from review due to trivial changes (1)
  • packages/toolbars/generate-code/meta.js
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/plugins/robot/src/components/footer-extension/McpServer.vue
  • packages/layout/src/DesignToolbars.vue
  • packages/plugins/robot/src/Main.vue
  • packages/toolbars/view-setting/meta.js
  • packages/plugins/robot/src/components/chat/FooterButton.vue

@hexqi hexqi merged commit 95ec88b into opentiny:develop Mar 18, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants