feat(spx-gui): uITag adapted for the new UI specification #2585

Overu · 2025-12-11T10:39:19Z

gemini-code-assist · 2025-12-11T10:39:44Z

Summary of Changes

Hello @Overu, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses the adaptation of the UITag component to a new UI specification. It introduces a new UIChips component for basic tag-like elements and extensively refactors the UITag component to support a wider range of styling and interactive features, including different variants, colors, sizes, and closable states. The changes ensure that the UI components are more flexible and adhere to the updated design guidelines across the application.

Highlights

Introduction of UIChips Component: A new UIChips.vue component has been added to provide a simpler tag-like element, separating its concerns from the more complex UITag.
Refactoring of UITag Component: The existing UITag.vue component has undergone a significant refactor to align with new UI specifications, introducing props for variant, color, size, disabled, and closable states, and utilizing CSS variables for flexible styling.
Migration to UIChips: Instances of the old UITag component in AssetLibraryModal.vue, AssetLibraryManagementModal.vue, and UITagRadio.vue have been replaced with the new UIChips component where appropriate.
AnglePicker Component Update: The AnglePicker.vue component now leverages the refactored UITag component, applying new color and variant="none" props for its directional indicators.
UI Documentation Update: The ui-design.vue documentation page has been updated to showcase the new capabilities of the refactored UITag component and its various properties, alongside renaming button-related variables for clarity.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request refactors the UITag component to align with new UI specifications. The old UITag is renamed to UIChips to maintain compatibility, and a new, more versatile UITag component is introduced. The changes are well-structured, and the new component is demonstrated in the UI design documentation page.

I've left a few comments for improvement:

In UIChips.vue, I've suggested renaming the CSS class for consistency.
In the new UITag.vue, I've pointed out a potential bug with event handling on the close icon and suggested a fix.

Overall, this is a great improvement to the UI component library.

spx-gui/src/components/ui/UITag.vue

spx-gui/src/components/ui/UIChips.vue

spx-gui/src/components/ui/UITag.vue

xgopilot · 2025-12-11T10:44:31Z

spx-gui/src/components/ui/UIChip.vue

+  display: flex;
+  width: fit-content;
+  align-items: center;
+  height: 32px; // TODO: support different sizes


Hardcoded dimensions: Consider using CSS variables for consistency with UITag:

height: var(--ui-chips-height, 32px); padding: var(--ui-chips-padding, 0 16px);

This enables flexible sizing without code changes and maintains consistency across the component system.

spx-gui/src/components/ui/UIChip.vue

spx-gui/src/components/ui/UITag.vue

xgopilot · 2025-12-11T10:44:38Z

spx-gui/src/components/ui/index.ts

 export { default as UILoading } from './loading/UILoading.vue'
 export { default as UIDetailedLoading } from './loading/UIDetailedLoading.vue'
 export * from './message'
+export { default as UIChips } from './UIChips.vue'


Missing type exports: Export the component types for TypeScript usage:

export { default as UIChips, type ChipsType } from './UIChips.vue' export { default as UITag, type TagVariant, type TagColor, type TagSize } from './UITag.vue'

This allows consumers to import types for proper type hints when using these components.

xgopilot · 2025-12-11T10:44:41Z

spx-gui/src/components/asset/library/AssetLibraryModal.vue

-import { UITextInput, UIIcon, UITag, UIPagination, UIButton, UISearchableModal, UIDivider } from '@/components/ui'
+import { UITextInput, UIIcon, UIChips, UIPagination, UIButton, UISearchableModal, UIDivider } from '@/components/ui'
 import { listAsset, AssetType, type AssetData, Visibility } from '@/apis/asset'
 import { debounce } from 'lodash'


Bundle size optimization: Import from specific lodash modules to reduce bundle size:

import debounce from 'lodash/debounce' // or import { debounce } from 'lodash-es'

This reduces bundle size from ~70KB (full lodash) to ~2KB (debounce only).

xgopilot · 2025-12-11T10:44:42Z

Code Review Summary

Comprehensive review completed across code quality, performance, documentation, and security. The implementation is solid with good Vue 3 practices. Key findings:

Critical Issues:

Missing .stop modifier on UITag close icon (prevents event bubbling)
Type exports missing from index.ts (breaks TypeScript imports)

Important Improvements:

Consider renaming/documenting UIChips vs UITag semantic distinction
Add JSDoc for component props, events, and slots
Optimize lodash imports for bundle size
Use specific CSS transition properties for better performance

Overall well-implemented with minor improvements needed for production readiness.

nighca · 2025-12-16T01:06:36Z

spx-gui/src/components/ui/UIChip.vue

这个 UIChip 对应的是设计 UIKit 里的哪个？我好像没找到

这个是旧的 UITag，起了一个感觉更符合它的作用的名字。目前没有在规范中体现，之前同步给清清了，后续可以补齐相关的规范。

它定位上跟 UITag 的区别是？

UITag 交互性低，更偏向于静态展示内容，比如 beta 展示
UIChip 交互性高，偏向于动作触发，比如点击条件过滤

我看大多数组件库是没有严格区分二者的。UIChip 如果作为 UITag 的一个 variant，行为和理解上也不会有什么区别。这里更多的是把 UIChip 作为旧的 UITag 的别名，且它的确是重交互。

UIChip 交互性高，偏向于动作触发，比如点击条件过滤

现在其实很像一个残缺版的 button..总感觉这个东西不应该存在

先这样吧，不过建议把二者的定位差异也在代码中注释说明下，选用的时候有个参考依据

done， 0980360

spx-gui/src/components/ui/UITag.vue

gemini-code-assist bot reviewed Dec 11, 2025

View reviewed changes

spx-gui/src/components/ui/UITag.vue Outdated Show resolved Hide resolved

spx-gui/src/components/ui/UIChips.vue Outdated Show resolved Hide resolved

spx-gui/src/components/ui/UIChips.vue Outdated Show resolved Hide resolved

vercel bot deployed to Preview – builder December 11, 2025 10:41 View deployment

xgopilot bot reviewed Dec 11, 2025

View reviewed changes

spx-gui/src/components/ui/UITag.vue Outdated Show resolved Hide resolved

xgopilot bot reviewed Dec 11, 2025

View reviewed changes

spx-gui/src/components/ui/UIChip.vue Show resolved Hide resolved

xgopilot bot reviewed Dec 11, 2025

View reviewed changes

spx-gui/src/components/ui/UITag.vue Outdated Show resolved Hide resolved

xgopilot bot reviewed Dec 11, 2025

View reviewed changes

feat(spx-giu): ui-tag adapted for the new UI specification

8893419

Overu force-pushed the issue-2583 branch from c8f8059 to 8893419 Compare December 11, 2025 11:05

vercel bot deployed to Preview – builder December 11, 2025 11:07 View deployment

vercel bot deployed to Preview – builder December 12, 2025 01:54 View deployment

Overu force-pushed the issue-2583 branch from cc2bb39 to 8893419 Compare December 12, 2025 01:54

vercel bot deployed to Preview – builder December 12, 2025 09:29 View deployment

Overu force-pushed the issue-2583 branch from 661f701 to d2dcc45 Compare December 12, 2025 09:42

vercel bot deployed to Preview – builder December 12, 2025 09:44 View deployment

Overu force-pushed the issue-2583 branch from d2dcc45 to b661cc5 Compare December 12, 2025 10:00

vercel bot deployed to Preview – builder December 12, 2025 10:02 View deployment

refactor(spx-gui): enhance UITag with checkable functionality

c920fae

Overu force-pushed the issue-2583 branch from b661cc5 to c920fae Compare December 12, 2025 10:16

vercel bot deployed to Preview – builder December 12, 2025 10:19 View deployment

refactor(spx-gui): beta tag to UITag

5fc0864

vercel bot deployed to Preview – builder December 15, 2025 06:16 View deployment

nighca reviewed Dec 16, 2025

View reviewed changes

refactor(spx-gui): merge checkable and checked into a single object prop

85b929c

vercel bot deployed to Preview – builder December 16, 2025 02:05 View deployment

docs(spx-gui): added comments to the UIChip and UITag components

0980360

vercel bot deployed to Preview – builder December 16, 2025 12:37 View deployment

nighca approved these changes Dec 17, 2025

View reviewed changes

nighca merged commit 7943200 into goplus:dev Dec 17, 2025
5 checks passed

feat(spx-gui): uITag adapted for the new UI specification #2585

feat(spx-gui): uITag adapted for the new UI specification #2585

Conversation

Overu commented Dec 11, 2025

Uh oh!

gemini-code-assist bot commented Dec 11, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

xgopilot bot Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

xgopilot bot Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

xgopilot bot Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

xgopilot bot commented Dec 11, 2025

Code Review Summary

Uh oh!

nighca Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Overu Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

nighca Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Overu Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

nighca Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Overu Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Overu Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants