Skip to content

style: card style #7807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 1 commit into from
Nov 10, 2026
Merged

style: card style #7807

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ui/src/components/global/mk-resource-card/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,9 @@ function handleSelectedChange(selected: boolean | string | number) {
<div class="text-sm text-N600" v-if="slots.subtitle || create_time || nick_name">
<slot name="subtitle">
<div class="flex gap-1">
<span>{{ props.nick_name }}</span>
<span>创建于</span>
<span>{{ dateFormat(props.create_time) }}</span>
<span class="min-w-0 truncate" :title="props.nick_name">{{ props.nick_name }}</span>
<span class="shrink-0">创建于</span>
<span class="shrink-0">{{ dateFormat(props.create_time) }}</span>
</div>
</slot>
</div>

@shaohuzhang1 shaohuzhang1 Nov 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Review of the diff

Overall the change is reasonable: making the nickname the only shrinkable item and giving it truncate + a title tooltip is the standard way to stop a long nickname from pushing “创建于 / date” out of the container. A few things to tighten:

Potential issues

  1. title doesn’t work on touch devices. On mobile/tablet the truncated nickname becomes unreadable with no way to reveal it. Consider a tap-to-expand, a proper tooltip component, or allowing the name to wrap (e.g. line-clamp-2) under a sm: breakpoint.
  2. Tooltip shows even when not truncated. title is always present, so short names also get a redundant tooltip. Minor UX noise; only fixable with JS overflow detection, so may be acceptable.
  3. Truncation only works if the ancestor chain is width-constrained. min-w-0 fixes the flex-item min-width:auto problem on this <span>, but if the wrapping div.text-sm.text-N600 (or its parent) is itself a flex/grid item, it also needs min-w-0 (or overflow-hidden), otherwise the row will still overflow instead of ellipsizing. Worth verifying in the surrounding template.
  4. shrink-0 on the date can cause overflow in very narrow containers. With both “创建于” and the date locked to their intrinsic width, a very narrow card can overflow horizontally; consider flex-wrap on the row or hiding the date at the smallest breakpoint.
  5. Empty values still render. The outer v-if is slots.subtitle || create_time || nick_name, so if only nick_name exists you still render a dangling “创建于” with an empty/invalid date (dateFormat(undefined)). Guard dateFormat against falsy/invalid input, or conditionally render the “创建于 + date” pair.
  6. Accessibility. <span title> is not focusable, so keyboard and screen-reader users may not get the full value. If the full name matters, consider an aria-label or a focusable disclosure.
  7. Hunk header sanity. @@ -94,9 +94,9 @@ is consistent (3 context + 3 removed + 3 added on each side), so no diff-format problem.

Optimization suggestions

  • Compute the formatted date once (const formattedTime = computed(() => dateFormat(props.create_time))) rather than calling dateFormat on every render; also makes guarding invalid dates easier.
  • Drop the props. prefix in the template if the component uses <script setup> — nick_name and create_time are directly accessible; it’s only cosmetic, but more idiomatic.
  • "创建于" is hard-coded. Since the file is being touched anyway, consider moving it to i18n if the project supports it.
  • truncate implies overflow-hidden, which can clip focus rings/descenders on the span; if you later add interactivity there, use overflow-hidden on a wrapper instead.
  • Consider flex-1 min-w-0 truncate if you want the nickname to consume the remaining space predictably; min-w-0 truncate alone already works, but flex-1 makes the layout intent explicit.
  • If the nickname can be very long or contain leading/trailing whitespace, :title="props.nick_name?.trim()" avoids odd tooltips.

Net

No functional bug introduced; the change is an improvement. The main real-world risks are (3) missing min-w-0 higher up the tree and (1) the tooltip being invisible on touch devices.

Expand Down
Loading