docs(attachments): improve file card demo

[wzc520pyfm]

Summary by CodeRabbit

• Documentation

  • Updated file attachment component documentation regarding custom card icons and file type property definitions.

• Examples

  • Enhanced file list examples with styled icon rendering and color customization.
  • Added new image file entry example demonstrating image preview mode capabilities.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for antd-design-x-vue ready!

Name	Link
🔨 Latest commit	82c841d
🔍 Latest deploy log	https://app.netlify.com/projects/antd-design-x-vue/deploys/692c4cf6007f8100083cdaea
😎 Deploy Preview	https://deploy-preview-453--antd-design-x-vue.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

Documentation and example updates for the Attachments component, including clarified descriptions for file card properties, styled icon rendering in examples, and demonstration of the image type functionality with a new example entry.

Changes

Cohort / File(s)	Change Summary
Documentation docs/component/attachments.md	Updated section header from "自定义文件卡片" to "自定义卡片图标" and clarified the type property description to specify image preview mode behavior.
Example Files docs/examples-setup/attachments/files-custom.vue, docs/examples/attachments/files-custom.vue	Added RobotOutlined icon import, applied color styling to icon nodes for existing file items (uid 1–5), and appended a new image-type file entry (uid '6') with URL reference.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Straightforward documentation wording updates and repetitive icon styling applied uniformly across two similar example files
• Addition of a new example data entry follows established pattern with no complex logic

Possibly related PRs

• feat(attachments): add custom icon options for FileCard #381: Introduces the custom icon and type props for Attachments component that these documentation and examples directly demonstrate and document.

Suggested labels

documentation, Attachments

Poem

🐰 A rabbit hops through docs with glee,
Icons painted in color spree—
Types defined, examples bright,
Attachments now shown just right! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'docs(attachments): improve file card demo' directly corresponds to the changeset which improves documentation and demo examples for file card components in the attachments module.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch docs/improve-file-card-demo-for-attachment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 706e1ec and 82c841d.

📒 Files selected for processing (3)

• docs/component/attachments.md (2 hunks)
• docs/examples-setup/attachments/files-custom.vue (2 hunks)
• docs/examples/attachments/files-custom.vue (2 hunks)

🔇 Additional comments (6)

docs/component/attachments.md (2)

64-64: Improved header specificity.

The updated header "自定义卡片图标" (Custom Card Icon) is more precise than the previous "自定义文件卡片" (Custom File Card), better reflecting that the example focuses on icon customization.

---

125-125: Enhanced type property description.

The updated description clearly explains that the type property defines the file type and that image type enables image preview mode, which is much more informative than the previous vague "是否图片类型" (whether it's an image type).

docs/examples/attachments/files-custom.vue (3)

4-4: LGTM! RobotOutlined added for demonstration.

The import is correctly added to support the colored icon demonstration in the first file entry.

---

24-24: Excellent demonstration of icon color customization.

The addition of inline color styles to the icons effectively demonstrates the custom icon feature and makes the example more visually engaging.

Also applies to: 31-31, 38-38, 45-45, 52-52

---

55-61: Great addition of image type demonstration.

The new entry with type: 'image' and a valid image URL effectively demonstrates the image preview mode described in the updated documentation. The filename "image name without file ext" is a good edge case to showcase.

docs/examples-setup/attachments/files-custom.vue (1)

4-4: Excellent consistency with the JSX example.

This template-style example perfectly mirrors the changes in docs/examples/attachments/files-custom.vue, using the h() function for icon creation instead of JSX syntax. The additions of:

• RobotOutlined import
• Colored icons for all file types
• New image type entry for demonstration

are all implemented correctly and maintain consistency across both example formats.

Also applies to: 23-23, 30-30, 37-37, 44-44, 51-51, 54-60

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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