@ticatec/uniface-element 0.3.17 → 0.3.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/COMPONENT_GUIDE.md +441 -0
  3. package/COMPONENT_GUIDE_CN.md +465 -0
  4. package/COMPONENT_SELECTION_PROMPTS.md +568 -0
  5. package/CONTRIBUTING.md +217 -0
  6. package/README.md +19 -9
  7. package/dist/attachment-files/README.md +169 -0
  8. package/dist/attachment-files/README_CN.md +169 -0
  9. package/dist/color-picker/README.md +184 -0
  10. package/dist/color-picker/README_CN.md +185 -0
  11. package/dist/form-field/README.md +193 -0
  12. package/dist/form-field/README_CN.md +193 -0
  13. package/dist/form-panel/flex-form/FlexForm.svelte +1 -1
  14. package/dist/inline-cell-editor/README.md +116 -0
  15. package/dist/inline-cell-editor/README_CN.md +116 -0
  16. package/dist/lib/TreeNode_README.md +32 -57
  17. package/dist/lib/TreeNode_README_CN.md +25 -43
  18. package/dist/lib/TreeNodes.d.ts +49 -98
  19. package/dist/lib/TreeNodes.js +97 -86
  20. package/dist/lib/index.d.ts +2 -0
  21. package/dist/lib/index.js +2 -0
  22. package/dist/nav-menu/MenuItem.d.ts +2 -2
  23. package/dist/navigator/README.md +377 -0
  24. package/dist/navigator/README_CN.md +377 -0
  25. package/dist/separator/README.md +105 -0
  26. package/dist/separator/README_CN.md +105 -0
  27. package/dist/split/README.md +240 -0
  28. package/dist/split/README_CN.md +240 -0
  29. package/dist/tree-view/README.md +48 -36
  30. package/dist/tree-view/README_CN.md +45 -9
  31. package/dist/tree-view/TreeNodeView.svelte +3 -9
  32. package/dist/tree-view/TreeView.svelte +4 -6
  33. package/dist/tree-view/Types.d.ts +2 -2
  34. package/package.json +16 -9
package/CONTRIBUTING.md ADDED
@@ -0,0 +1,217 @@
1
+ # Contributing to Uniface Element
2
+
3
+ Thank you for your interest in contributing to Uniface Element! We welcome contributions from the community.
4
+
5
+ ## Table of Contents
6
+
7
+ - [Code of Conduct](#code-of-conduct)
8
+ - [How Can I Contribute?](#how-can-i-contribute)
9
+ - [Development Setup](#development-setup)
10
+ - [Coding Standards](#coding-standards)
11
+ - [Commit Guidelines](#commit-guidelines)
12
+ - [Pull Request Process](#pull-request-process)
13
+
14
+ ## Code of Conduct
15
+
16
+ - Be respectful and inclusive
17
+ - Provide constructive feedback
18
+ - Focus on what is best for the community
19
+ - Show empathy towards other community members
20
+
21
+ ## How Can I Contribute?
22
+
23
+ ### Reporting Bugs
24
+
25
+ Before creating bug reports, please check existing issues to avoid duplicates. When creating a bug report, include:
26
+
27
+ - **Title**: Clear and descriptive
28
+ - **Description**: Detailed explanation of the issue
29
+ - **Reproduction**: Steps to reproduce the behavior
30
+ - **Expected behavior**: What you expected to happen
31
+ - **Environment**: OS, browser, Node.js version, package version
32
+ - **Screenshots**: If applicable, add screenshots
33
+
34
+ ### Suggesting Enhancements
35
+
36
+ Enhancement suggestions are welcome! Please include:
37
+
38
+ - **Use case**: What problem would this solve?
39
+ - **Proposed solution**: How should it work?
40
+ - **Alternatives**: What alternatives have you considered?
41
+ - **Impact**: Who would benefit from this feature?
42
+
43
+ ### Pull Requests
44
+
45
+ Pull requests are the best way to propose changes. Here's how to submit one:
46
+
47
+ 1. Fork the repository
48
+ 2. Create a branch for your feature or bugfix
49
+ 3. Make your changes following our coding standards
50
+ 4. Write tests for your changes (if applicable)
51
+ 5. Ensure all tests pass
52
+ 6. Commit your changes with clear messages
53
+ 7. Push to your fork and submit a pull request
54
+
55
+ ## Development Setup
56
+
57
+ ### Prerequisites
58
+
59
+ - Node.js >= 18.0.0
60
+ - npm >= 8.0.0
61
+
62
+ ### Installation
63
+
64
+ ```bash
65
+ # Clone your fork
66
+ git clone https://github.com/your-username/uniface-element.git
67
+ cd uniface-element
68
+
69
+ # Install dependencies
70
+ npm install
71
+
72
+ # Start development server
73
+ npm run dev
74
+ ```
75
+
76
+ ### Build and Test
77
+
78
+ ```bash
79
+ # Type check
80
+ npm run check
81
+
82
+ # Build the library
83
+ npm run build
84
+
85
+ # Run linting
86
+ npm run lint
87
+
88
+ # Format code
89
+ npm run format
90
+
91
+ # Run security audit
92
+ npm run audit
93
+ ```
94
+
95
+ ## Coding Standards
96
+
97
+ ### TypeScript
98
+
99
+ - Use TypeScript for all new code
100
+ - Avoid using `any` type
101
+ - Provide proper type definitions for props and events
102
+ - Use interfaces for object shapes
103
+
104
+ ### Svelte Components
105
+
106
+ - Follow Svelte best practices
107
+ - Use `<script lang="ts">` for TypeScript
108
+ - Organize component structure: script → template → styles
109
+ - Use meaningful component and variable names
110
+
111
+ ### Code Style
112
+
113
+ We use ESLint and Prettier for code formatting:
114
+
115
+ ```bash
116
+ # Auto-fix linting issues
117
+ npm run lint:fix
118
+
119
+ # Format all files
120
+ npm run format
121
+ ```
122
+
123
+ ### Documentation
124
+
125
+ - Update README.md if you change user-facing behavior
126
+ - Add JSDoc comments for public APIs
127
+ - Update relevant documentation files
128
+ - Include usage examples for new features
129
+
130
+ ## Commit Guidelines
131
+
132
+ We follow [Conventional Commits](https://www.conventionalcommits.org/) specification:
133
+
134
+ ### Commit Message Format
135
+
136
+ ```
137
+ <type>(<scope>): <subject>
138
+
139
+ <body>
140
+
141
+ <footer>
142
+ ```
143
+
144
+ ### Types
145
+
146
+ - **feat**: A new feature
147
+ - **fix**: A bug fix
148
+ - **docs**: Documentation only changes
149
+ - **style**: Changes that don't affect code meaning (formatting, etc.)
150
+ - **refactor**: Code change that neither fixes a bug nor adds a feature
151
+ - **perf**: Performance improvement
152
+ - **test**: Adding or updating tests
153
+ - **chore**: Changes to build process or auxiliary tools
154
+ - **ci**: CI/CD changes
155
+
156
+ ### Examples
157
+
158
+ ```
159
+ feat(button): add loading state support
160
+
161
+ feat(dialog): add backdrop blur option
162
+
163
+ fix(datatable): correct column width calculation
164
+
165
+ docs(readme): update installation instructions
166
+
167
+ refactor(utils): extract common validation logic
168
+ ```
169
+
170
+ ## Pull Request Process
171
+
172
+ ### Before Submitting
173
+
174
+ 1. **Test your changes**: Ensure all existing tests pass
175
+ 2. **Add tests**: Write tests for new features or bug fixes
176
+ 3. **Update docs**: Update documentation as needed
177
+ 4. **Check formatting**: Run `npm run format` and `npm run lint:fix`
178
+ 5. **Rebase**: Make sure your branch is up to date with main
179
+
180
+ ### PR Title
181
+
182
+ Use the same format as commit messages:
183
+
184
+ ```
185
+ feat(component): brief description of changes
186
+ ```
187
+
188
+ ### PR Description
189
+
190
+ Include:
191
+
192
+ - **Summary**: What changes were made and why
193
+ - **Type**: What type of change is this? (feature, bugfix, refactor, etc.)
194
+ - **Testing**: How did you test these changes?
195
+ - **Screenshots**: Add screenshots for UI changes
196
+ - **Break changes**: List any breaking changes
197
+
198
+ ### Review Process
199
+
200
+ 1. Automated checks (CI/CD) will run
201
+ 2. Maintainers will review your code
202
+ 3. Address review comments
203
+ 4. Once approved, your PR will be merged
204
+
205
+ ## Getting Help
206
+
207
+ - **Documentation**: Check `/docs` directory for detailed documentation
208
+ - **Issues**: Search existing issues or create a new one
209
+ - **Discussions**: Use GitHub Discussions for questions
210
+
211
+ ## License
212
+
213
+ By contributing, you agree that your contributions will be licensed under the [MIT License](LICENSE).
214
+
215
+ ## Thank You!
216
+
217
+ Thank you for contributing to Uniface Element! Your contributions help make this project better for everyone.
package/README.md CHANGED
@@ -23,6 +23,12 @@ A comprehensive enterprise-grade UI component library built with Svelte 5, desig
23
23
  npm install @ticatec/uniface-element
24
24
  ```
25
25
 
26
+ ## 📚 Documentation
27
+
28
+ - **[Component Guide](./COMPONENT_GUIDE.md)** - Complete guide on when to use each component
29
+ - **[Component Selection Prompts](./COMPONENT_SELECTION_PROMPTS.md)** - AI prompt system for component selection
30
+ - **[中文文档](./README_CN.md)** - Chinese documentation
31
+
26
32
  ## Quick Start
27
33
 
28
34
  ### 1. Import Styles
@@ -36,14 +42,15 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
36
42
 
37
43
  ```svelte
38
44
  <script lang="ts">
39
- import Button, DataTable, Dialog from '@ticatec/uniface-element/Button, DataTable, Dialog';
45
+ import Button from '@ticatec/uniface-element/Button';
46
+ import DataTable from '@ticatec/uniface-element/DataTable';
40
47
  import type { DataColumn } from '@ticatec/uniface-element';
41
-
48
+
42
49
  let columns: DataColumn[] = [
43
50
  { field: 'name', title: 'Name', width: 150 },
44
51
  { field: 'email', title: 'Email', width: 200 }
45
52
  ];
46
-
53
+
47
54
  let data = [
48
55
  { name: 'John Doe', email: 'john@example.com' },
49
56
  { name: 'Jane Smith', email: 'jane@example.com' }
@@ -97,7 +104,7 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
97
104
  <script lang="ts">
98
105
  import DataTable from '@ticatec/uniface-element/DataTable';
99
106
  import type { DataColumn } from '@ticatec/uniface-element';
100
-
107
+
101
108
  let columns: DataColumn[] = [
102
109
  {
103
110
  field: 'name',
@@ -132,8 +139,11 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
132
139
 
133
140
  ```svelte
134
141
  <script lang="ts">
135
- import Dialog, Button, TextEditor, FormField from '@ticatec/uniface-element/Dialog, Button, TextEditor, FormField';
136
-
142
+ import Dialog from '@ticatec/uniface-element/Dialog';
143
+ import Button from '@ticatec/uniface-element/Button';
144
+ import TextEditor from '@ticatec/uniface-element/TextEditor';
145
+ import FormField from '@ticatec/uniface-element/FormField';
146
+
137
147
  let showDialog = false;
138
148
  let formData = { name: '', email: '' };
139
149
  </script>
@@ -239,11 +249,11 @@ i18nUtils.loadResources('/assets/uniface.json'); //the language code will insert
239
249
  ### Modular Imports
240
250
  ```typescript
241
251
  // Individual component imports
242
- import Button from '@ticatec/uniface-element/Button';
252
+ import Button from '@ticatec/uniface-element/Button';
243
253
  import DataTable from '@ticatec/uniface-element/DataTable';
244
254
  import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
245
- import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFiles';
246
- import ImageFilesField from '@ticatec/uniface-element/ImageFiles';
255
+ import AttachmentFiles from '@ticatec/uniface-element/AttachmentFiles';
256
+ import ImageFiles from '@ticatec/uniface-element/ImageFiles';
247
257
  import MemoEditor from '@ticatec/uniface-element/MemoEditor';
248
258
 
249
259
  // Utility imports
package/dist/attachment-files/README.md ADDED
@@ -0,0 +1,169 @@
1
+ # AttachmentFilesField
2
+
3
+ A comprehensive file attachment component for managing file uploads and displays. Features file type detection, upload progress tracking, file preview, and removal confirmation.
4
+
5
+ ## Features
6
+
7
+ - **File Upload**: Upload files with custom handlers and progress tracking
8
+ - **File Type Detection**: Automatic detection of images, PDFs, Office documents, audio, video
9
+ - **File Preview**: Display uploaded files with type-specific icons
10
+ - **Removal Confirmation**: Optional confirmation dialog before removing files
11
+ - **Display Modes**: Edit and View modes
12
+ - **Compact Layout**: Space-saving compact mode
13
+ - **Focus Management**: Built-in focus/blur event handling
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install @ticatec/uniface-element
19
+ ```
20
+
21
+ ```typescript
22
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
23
+ ```
24
+
25
+ ## Basic Usage
26
+
27
+ ```svelte
28
+ <script>
29
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
30
+
31
+ let files = [];
32
+
33
+ const uploadFile = async (file, progressUpdate, onUploaded, errorHandler) => {
34
+ try {
35
+ const formData = new FormData();
36
+ formData.append('file', file);
37
+
38
+ const response = await fetch('/api/upload', {
39
+ method: 'POST',
40
+ body: formData
41
+ });
42
+
43
+ const result = await response.json();
44
+ onUploaded(result.url, result.thumbnail);
45
+
46
+ return { cancel: async () => true };
47
+ } catch (error) {
48
+ errorHandler(error);
49
+ throw error;
50
+ }
51
+ };
52
+ </script>
53
+
54
+ <AttachmentFilesField bind:files {uploadFile} />
55
+ ```
56
+
57
+ ## Props
58
+
59
+ | Prop | Type | Default | Description |
60
+ |------|------|---------|-------------|
61
+ | `files` | `Array<AttachmentFile>` | `[]` | Array of attachment files |
62
+ | `uploadFile` | `FileUpload` | Required | File upload handler |
63
+ | `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual variant |
64
+ | `disabled` | `boolean` | `false` | Disable the field |
65
+ | `readonly` | `boolean` | `false` | Read-only mode |
66
+ | `compact` | `boolean` | `false` | Compact layout |
67
+ | `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode |
68
+ | `removeFileConfirm` | `RemoveConfirm \| null` | `null` | Removal confirmation |
69
+ | `style` | `string` | `''` | Custom styles |
70
+ | `onfocus` | `() => void \| null` | `null` | Focus callback |
71
+ | `onblur` | `() => void \| null` | `null` | Blur callback |
72
+ | `onchange` | `(files: Array<AttachmentFile>) => void \| null` | `null` | Change callback |
73
+
74
+ ## Type Definitions
75
+
76
+ ```typescript
77
+ interface AttachmentFile {
78
+ name: string; // File name
79
+ type: FileType; // File type enum
80
+ uri: string; // File URI/path
81
+ }
82
+
83
+ enum FileType {
84
+ IMAGE = 'img', // Images (jpg, png, gif, etc.)
85
+ PDF = 'pdf', // PDF documents
86
+ DOC = 'doc', // Word (doc, docx)
87
+ XLS = 'xml', // Excel (xls, xlsx, csv)
88
+ PPT = 'ppt', // PowerPoint (ppt, pptx)
89
+ AUDIO = 'wav', // Audio (mp3, wav, aac, etc.)
90
+ VIDEO = 'mov', // Video (mp4, avi, mkv, etc.)
91
+ OTHER = 'dat' // Other files
92
+ }
93
+ ```
94
+
95
+ ## Examples
96
+
97
+ ### Basic Upload
98
+
99
+ ```svelte
100
+ <script>
101
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
102
+
103
+ let files = [];
104
+
105
+ const uploadFile = async (file, progressUpdate, onUploaded) => {
106
+ // Your upload logic
107
+ onUploaded(`/uploads/${file.name}`);
108
+ return { cancel: async () => true };
109
+ };
110
+ </script>
111
+
112
+ <AttachmentFilesField bind:files {uploadFile} />
113
+ ```
114
+
115
+ ### Read-only Mode
116
+
117
+ ```svelte
118
+ <script>
119
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
120
+
121
+ let files = [
122
+ { name: 'report.pdf', uri: '/files/report.pdf', type: 'pdf' }
123
+ ];
124
+ </script>
125
+
126
+ <AttachmentFilesField bind:files readonly />
127
+ ```
128
+
129
+ ### With Removal Confirmation
130
+
131
+ ```svelte
132
+ <script>
133
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
134
+
135
+ let files = [];
136
+
137
+ const uploadFile = async (file, progressUpdate, onUploaded) => {
138
+ onUploaded(`/uploads/${file.name}`);
139
+ return { cancel: async () => true };
140
+ };
141
+
142
+ const removeFileConfirm = async (file) => {
143
+ return confirm(`Remove ${file.name}?`);
144
+ };
145
+ </script>
146
+
147
+ <AttachmentFilesField bind:files {uploadFile} {removeFileConfirm} />
148
+ ```
149
+
150
+ ## Best Practices
151
+
152
+ 1. **Server Validation**: Always validate files on the server
153
+ 2. **File Size Limits**: Enforce size limits to prevent issues
154
+ 3. **Error Handling**: Implement proper error handling
155
+ 4. **Progress Updates**: Show upload progress to users
156
+ 5. **Security**: Validate file types on the server
157
+ 6. **Cleanup**: Properly cancel uploads when needed
158
+
159
+ ## Browser Support
160
+
161
+ - Modern browsers with File API support
162
+ - Touch-friendly interface
163
+ - Requires server-side upload implementation
164
+
165
+ ## Notes
166
+
167
+ - Maximum 10 files can be uploaded at once
168
+ - File types are detected by extension
169
+ - Component automatically detects and displays file type icons
package/dist/attachment-files/README_CN.md ADDED
@@ -0,0 +1,169 @@
1
+ # AttachmentFilesField 附件文件字段
2
+
3
+ 一个功能全面的文件附件组件，用于管理文件上传和显示。支持文件类型检测、上传进度跟踪、文件预览和删除确认。
4
+
5
+ ## 特性
6
+
7
+ - **文件上传**: 支持自定义上传处理程序和进度跟踪
8
+ - **文件类型检测**: 自动检测图片、PDF、Office文档、音频、视频等
9
+ - **文件预览**: 显示上传的文件及类型特定的图标
10
+ - **删除确认**: 删除文件前可选的确认对话框
11
+ - **显示模式**: 编辑和查看模式
12
+ - **紧凑布局**: 节省空间的紧凑模式
13
+ - **焦点管理**: 内置的焦点/失焦事件处理
14
+
15
+ ## 安装
16
+
17
+ ```bash
18
+ npm install @ticatec/uniface-element
19
+ ```
20
+
21
+ ```typescript
22
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
23
+ ```
24
+
25
+ ## 基本用法
26
+
27
+ ```svelte
28
+ <script>
29
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
30
+
31
+ let files = [];
32
+
33
+ const uploadFile = async (file, progressUpdate, onUploaded, errorHandler) => {
34
+ try {
35
+ const formData = new FormData();
36
+ formData.append('file', file);
37
+
38
+ const response = await fetch('/api/upload', {
39
+ method: 'POST',
40
+ body: formData
41
+ });
42
+
43
+ const result = await response.json();
44
+ onUploaded(result.url, result.thumbnail);
45
+
46
+ return { cancel: async () => true };
47
+ } catch (error) {
48
+ errorHandler(error);
49
+ throw error;
50
+ }
51
+ };
52
+ </script>
53
+
54
+ <AttachmentFilesField bind:files {uploadFile} />
55
+ ```
56
+
57
+ ## 属性
58
+
59
+ | 属性 | 类型 | 默认值 | 说明 |
60
+ |------|------|---------|-------------|
61
+ | `files` | `Array<AttachmentFile>` | `[]` | 附件文件数组 |
62
+ | `uploadFile` | `FileUpload` | 必填 | 文件上传处理函数 |
63
+ | `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉变体 |
64
+ | `disabled` | `boolean` | `false` | 禁用字段 |
65
+ | `readonly` | `boolean` | `false` | 只读模式 |
66
+ | `compact` | `boolean` | `false` | 紧凑布局 |
67
+ | `displayMode` | `DisplayMode` | `DisplayMode.Edit` | 显示模式 |
68
+ | `removeFileConfirm` | `RemoveConfirm \| null` | `null` | 删除确认 |
69
+ | `style` | `string` | `''` | 自定义样式 |
70
+ | `onfocus` | `() => void \| null` | `null` | 焦点回调 |
71
+ | `onblur` | `() => void \| null` | `null` | 失焦回调 |
72
+ | `onchange` | `(files: Array<AttachmentFile>) => void \| null` | `null` | 更改回调 |
73
+
74
+ ## 类型定义
75
+
76
+ ```typescript
77
+ interface AttachmentFile {
78
+ name: string; // 文件名
79
+ type: FileType; // 文件类型枚举
80
+ uri: string; // 文件URI/路径
81
+ }
82
+
83
+ enum FileType {
84
+ IMAGE = 'img', // 图片（jpg、png、gif等）
85
+ PDF = 'pdf', // PDF文档
86
+ DOC = 'doc', // Word（doc、docx）
87
+ XLS = 'xml', // Excel（xls、xlsx、csv）
88
+ PPT = 'ppt', // PowerPoint（ppt、pptx）
89
+ AUDIO = 'wav', // 音频（mp3、wav、aac等）
90
+ VIDEO = 'mov', // 视频（mp4、avi、mkv等）
91
+ OTHER = 'dat' // 其他文件
92
+ }
93
+ ```
94
+
95
+ ## 示例
96
+
97
+ ### 基本上传
98
+
99
+ ```svelte
100
+ <script>
101
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
102
+
103
+ let files = [];
104
+
105
+ const uploadFile = async (file, progressUpdate, onUploaded) => {
106
+ // 你的上传逻辑
107
+ onUploaded(`/uploads/${file.name}`);
108
+ return { cancel: async () => true };
109
+ };
110
+ </script>
111
+
112
+ <AttachmentFilesField bind:files {uploadFile} />
113
+ ```
114
+
115
+ ### 只读模式
116
+
117
+ ```svelte
118
+ <script>
119
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
120
+
121
+ let files = [
122
+ { name: 'report.pdf', uri: '/files/report.pdf', type: 'pdf' }
123
+ ];
124
+ </script>
125
+
126
+ <AttachmentFilesField bind:files readonly />
127
+ ```
128
+
129
+ ### 带删除确认
130
+
131
+ ```svelte
132
+ <script>
133
+ import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
134
+
135
+ let files = [];
136
+
137
+ const uploadFile = async (file, progressUpdate, onUploaded) => {
138
+ onUploaded(`/uploads/${file.name}`);
139
+ return { cancel: async () => true };
140
+ };
141
+
142
+ const removeFileConfirm = async (file) => {
143
+ return confirm(`确定要删除 ${file.name} 吗？`);
144
+ };
145
+ </script>
146
+
147
+ <AttachmentFilesField bind:files {uploadFile} {removeFileConfirm} />
148
+ ```
149
+
150
+ ## 最佳实践
151
+
152
+ 1. **服务器验证**: 始终在服务器上验证文件
153
+ 2. **文件大小限制**: 强制执行大小限制以防止问题
154
+ 3. **错误处理**: 实现适当的错误处理
155
+ 4. **进度更新**: 向用户显示上传进度
156
+ 5. **安全性**: 在服务器上验证文件类型
157
+ 6. **清理**: 需要时正确取消上传
158
+
159
+ ## 浏览器支持
160
+
161
+ - 支持文件API的现代浏览器
162
+ - 触摸友好的界面
163
+ - 需要服务器端上传实现
164
+
165
+ ## 注意事项
166
+
167
+ - 最多可一次上传10个文件
168
+ - 文件类型通过扩展名检测
169
+ - 组件自动检测并显示文件类型图标