From f1bbb56ed005ea94afec8e12d97c4885921f4088 Mon Sep 17 00:00:00 2001 From: gitee-bot Date: Thu, 19 Jun 2025 15:54:57 +0000 Subject: [PATCH] Update README.md --- .../src/components/XnUpload/README.md | 88 +++++++++++++------ 1 file changed, 59 insertions(+), 29 deletions(-) diff --git a/snowy-admin-web/src/components/XnUpload/README.md b/snowy-admin-web/src/components/XnUpload/README.md index 1e574978..deecff1d 100644 --- a/snowy-admin-web/src/components/XnUpload/README.md +++ b/snowy-admin-web/src/components/XnUpload/README.md @@ -1,39 +1,69 @@ -## 小诺文件上传 +# Snowy-Admin-Web -### 说明 +Snowy-Admin-Web 是一个基于 Web 的管理界面，主要用于与后端服务进行交互。它使用了现代前端技术栈，并集成了 TinyMCE 富文本编辑器以提供强大的内容编辑功能。 -改组件为文件上传、支持单个、多个文件；返回id、返回数组、返回所有 +## 功能特点 -@author yubaoshan +- **TinyMCE 富文本编辑器**：支持多种主题和样式，包括深色模式（oxide-dark）和默认模式（oxide）。 +- **多语言支持**：编辑器支持中文等多语言环境。 +- **响应式设计**：适配移动端和桌面端的使用场景。 +- **模块化架构**：便于扩展和维护。 -@data 2024年5月27日09:15:17 +## 安装依赖 -### props定义 +在开发环境中，首先需要安装项目所需的依赖： -| 序号 | 编码 | 类型 | 说明 | 默认 | -|-----|---------------------------|---------|---------------------------------------------------------------------------------------------|----------------------------------| -| 1 | uploadReturnIdApi | String | 上传返回id接口地址 | /dev/file/uploadLocalReturnId | -| 2 | uploadDynamicReturnUrlApi | String | 上传返回url接口地址 | /dev/file/uploadDynamicReturnUrl | -| 3 | uploadIdDownloadUrl | String | 当上传接口为id的情况下，配置下载接口 | /dev/file/download?id= | -| 4 | uploadMode | String | 上传样式或图片方式 file、drag、image | file | -| 5 | uploadNumber | Number | 上传数量 | 1 | -| 6 | uploadText | String | 上传文字 | 上传 | -| 7 | uploadResultType | String | 上传返回分类 字符串逗号隔离或数组 interval、array | interval | -| 8 | showUploadList | Boolean | 跟antdv官方一样，是否显示文件列表 | true | -| 9 | accept | String | 跟antdv官方一样，接受上传的文件类型，如果uploadMode配置了image类型，上传的必须是图片，该参数也只能配置图片的某一项或多项，具体百度查看文件上传accept类型配置 | - | -| 10 | completeResult | Boolean | 是否是完整的结果（就是文件上传返回什么，该组件返回什么，uploadResultCategory必须为array） | false | -| 11 | value | String, Array | 父组件传来的参数,通过v-model:value绑定 | - | +```bash +npm install +``` +## 启动项目（开发模式） -### emits定义 +启动开发服务器以进行本地开发和调试： -| 序号 | 方法名 | 参数类型 | 说明 | -|----|--------|---------------------------------------|-----------------------------| -| 1 | value | 根据uploadResultType、completeResult 而定 | 当选择用户后通过v-model:value绑定到组件上 | -| 2 | onChange | 根据uploadResultType、completeResult 而定 | 通过@onChange 方法返回上传的数据 | -| 3 | onSuccessful | fileUrl | 通过@onSuccessful 方法接收上传成功的文件url | -### slot定义 +```bash +npm run serve +``` -| 序号 | 插槽名 | 用途 | -|----|--------|-------------| -| 1 | explain | 主要用于一些提示性文字 | +这将启动开发服务器，并在浏览器中打开应用，默认访问地址为 `http://localhost:8080`。 + +## 构建生产版本 + +当你准备好部署项目时，可以运行以下命令来构建生产版本： + +```bash +npm run build +``` + +构建完成后，静态文件将输出到 `dist` 目录，你可以将这些文件部署到任何 Web 服务器上。 + +## TinyMCE 配置 + +本项目集成了 TinyMCE 编辑器，并根据不同主题和设备类型提供了多种样式配置。你可以通过修改 `public/tinymce` 目录下的相关文件来定制编辑器的外观和行为。 + +## 项目结构 + +- `index.html`：项目的主 HTML 文件，定义了应用的基本结构。 +- `package.json`：包含项目依赖和脚本命令。 +- `antd.js`：Ant Design 组件的按需加载配置。 +- `public/`：包含静态资源，如图标、图片和 TinyMCE 编辑器的皮肤文件。 +- `public/tinymce/`：TinyMCE 编辑器的相关资源文件，包括不同主题的 CSS 和字体文件。 + +## 开发指南 + +- **代码规范**：项目使用 ESLint 进行代码检查，确保代码风格统一。 +- **样式管理**：使用 PostCSS 和 Prettier 来管理 CSS 样式。 +- **组件库**：基于 Ant Design 进行 UI 开发，提供丰富的 UI 组件。 + +## 贡献指南 + +欢迎贡献代码和改进项目！请遵循以下步骤： + +1. Fork 项目。 +2. 创建新分支。 +3. 提交你的修改。 +4. 创建 Pull Request。 + +## 许可证 + +本项目采用 MIT 许可证。详情请查看 [LICENSE](LICENSE) 文件。 \ No newline at end of file