Skip to content

fix(upload-list): When maxNameLength is not set, excessively long file names are displayed using CSS ellipsis. - #4315

Open
discreted66 wants to merge 1 commit into
opentiny:devfrom
discreted66:dev-0828
Open

fix(upload-list): When maxNameLength is not set, excessively long file names are displayed using CSS ellipsis.#4315
discreted66 wants to merge 1 commit into
opentiny:devfrom
discreted66:dev-0828

Conversation

@discreted66

@discreted66 discreted66 commented Aug 28, 2026

Copy link
Copy Markdown
Collaborator

fix(upload-list): 未设置 maxNameLength 时超长文件名通过 CSS 省略号显示

  • maxNameLength 默认值从 20 改为 0,未设置时不进行 JS 截断

  • 为 __item-name 添加 CSS text-overflow:ellipsis 实现超长省略

  • 为 SAAS 主题 __li-title 补充缺失的省略号样式及宽度约束

  • --picture 模式下设置 overflow:visible 以保持浮动缩略图布局

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)

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:

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

  • Enhancements
    • Upload filenames now display more naturally, with long names clipped using ellipses where appropriate.
    • Full filenames are shown by default instead of being shortened automatically.
    • Improved filename handling across standard, picture-card, picture, desktop, and mobile upload lists.
    • Prevented empty or ellipsis-only filenames when truncation is disabled.

- maxNameLength 默认值从 20 改为 0,未设置时不进行 JS 截断

- 为 __item-name 添加 CSS text-overflow:ellipsis 实现超长省略

- 为 SAAS 主题 __li-title 补充缺失的省略号样式及宽度约束

- --picture 模式下设置 overflow:visible 以保持浮动缩略图布局
@github-actions github-actions Bot added the bug Something isn't working label Aug 28, 2026
@coderabbitai

coderabbitai Bot commented Aug 28, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1387983c-745e-4d2c-94de-61bf08e109ce

📥 Commits

Reviewing files that changed from the base of the PR and between e31f607 and 51223a1.

📒 Files selected for processing (6)
  • packages/theme-saas/src/upload-list/index.less
  • packages/theme/src/upload-list/index.less
  • packages/vue/src/file-upload/src/index.ts
  • packages/vue/src/upload-list/src/index.ts
  • packages/vue/src/upload-list/src/mobile-first.vue
  • packages/vue/src/upload-list/src/pc.vue

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.


Walkthrough

Upload lists now display full filenames by default. Truncation runs only when maxNameLength is truthy. Theme styles add ellipsis handling for standard and picture-card names and allow visible overflow in picture layouts.

Changes

Upload filename display

Layer / File(s) Summary
Filename defaults and truncation guards
packages/vue/src/file-upload/src/index.ts, packages/vue/src/upload-list/src/index.ts, packages/vue/src/upload-list/src/mobile-first.vue, packages/vue/src/upload-list/src/pc.vue
maxNameLength now defaults to 0. Upload list views display full filenames when the limit is falsy.
Filename overflow styles
packages/theme-saas/src/upload-list/index.less, packages/theme/src/upload-list/index.less
Standard and picture-card names use hidden overflow, ellipses, and no wrapping. Picture-layout names allow visible overflow.

Estimated code review effort: 2 (Simple) | ~8 minutes

Merge Risk: ⚪ Minimal · up to 51223

The PR changes long filename handling from JavaScript truncation to CSS ellipsis when maxNameLength is unset, while preserving explicit positive limits. No actionable merge-blocking risk remains after normal checks and review.

Poem

A rabbit checks each filename in line

Full names now fit when limits decline
Ellipses appear when space is tight
Card titles stay within their height
Soft CSS keeps every label right

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: long file names use CSS ellipsis when maxNameLength is not set. It is specific and related to the changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files. (4 skipped: 4 unsupported.)

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/vue/src/file-upload/src/index.ts

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

packages/vue/src/upload-list/src/index.ts

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

packages/vue/src/upload-list/src/mobile-first.vue

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

  • 1 others

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.

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.

1 participant