docs(attachments): add with sender demo and update basic demo #100
Conversation
WalkthroughThe changes introduce a new documentation section ("组合示例") in the Attachments component docs that provides a demo linking to Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant D as Demo Function
participant S as Sender
participant A as Attachments
U->>D: Load basic demo component
D->>D: Compute attachmentsNode
D->>S: Pass attachmentsNode as prefix prop
S->>A: Render Attachments component within Sender
U->>S: Interact with attachments (e.g., file upload)
sequenceDiagram
participant U as User
participant X as AXAttachmentWithSender
participant S as Sender
participant A as Attachments
participant B as Badge
U->>X: Open the component view
X->>X: Compute senderHeader with embedded Attachments
X->>X: Compute badgeNode for uploaded items
X->>S: Render Sender with senderHeader and badgeNode
S->>A: Render Attachments (with beforeUpload and onChange handling)
U->>S: Upload file / interact with Sender
S->>X: Process submission and update state (reset items and text)
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
docs/examples/attachments/with-sender.vueOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser 'vue-eslint-parser' declared in '.eslintrc.js': Cannot find module 'vue-eslint-parser'
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for antd-design-x-vue ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
基础示例现在全局拖拽上传失效，需要处理一下 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/examples/attachments/with-sender.vue (1)
9-15: State management implemented well.The reactive references for managing component state are appropriately defined. Consider adding type annotations to the empty array for better type safety.
- const items = ref([]); + const items = ref<any[]>([]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/component/attachments.md(1 hunks)docs/examples/attachments/basic.vue(2 hunks)docs/examples/attachments/with-sender.vue(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/component/attachments.md
🔇 Additional comments (7)
docs/examples/attachments/basic.vue (3)
4-5: Import modifications look good.The imports have been correctly updated to include both
SenderandAttachmentsfrom the library, as well as adding thecomputedimport from Vue which is needed for the refactoring.
23-36: Well-structured component encapsulation.Moving the
Attachmentscomponent into a computed property is a good refactoring choice that improves code modularity and prepares it for use with theSendercomponent. The implementation preserves all the original functionality while making the code more maintainable.
41-41: Good implementation of the new Sender component.The replacement of the direct
Attachmentsrendering with aSendercomponent that uses the computedattachmentsNodeas its prefix aligns perfectly with the PR objective to update the basic demo to useSender.docs/examples/attachments/with-sender.vue (4)
1-8: Component setup and imports look good.The component is correctly set up with the appropriate imports and naming convention. The TypeScript setup is properly configured.
16-47: Sender.Header with Attachments is well-implemented.The computed property for the header component is well-structured. The
Attachmentscomponent is properly configured with mock upload functionality and dynamic placeholders based on the context.
55-71: Well-structured Sender component implementation.The Sender component is well configured with the appropriate props and event handlers. The onSubmit handler properly clears both the items and text when the message is sent, providing a good user experience.
74-81: Render function looks good.The render function correctly wraps the Demo component within an App component, following the pattern used in other examples.
添加配合 Sender.Header 使用的 Demo，并使用 Sender 更新了基础 Demo
Summary by CodeRabbit
AXAttachmentWithSender, demonstrating the combined functionality of attachments and messaging elements.