-
- 拖拽组件
- 拖拽弹框
-
-
-
-
-点我弹框
-
- 通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。
--
+
+
+
+ 
+
-[更新日志](https://github.com/lin-xin/vue-manage-system/releases)
-
-## 赞赏
-请作者喝杯咖啡吧！
-
-
-
-## 前言 ##
-之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
-
-该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
-（已经升级到 vue-cli@3.2.3，请更新依赖）
-
-## 功能 ##
-- [x] Element UI
-- [x] 登录/注销
-- [x] Dashboard
-- [x] 表格
-- [x] Tab选项卡
-- [x] 表单
-- [x] 图表 :bar_chart:
-- [x] 富文本编辑器
-- [x] markdown编辑器
-- [x] 图片拖拽/裁剪上传
-- [x] 支持切换主题色 :sparkles:
-- [x] 列表拖拽排序
-- [x] 权限测试
-- [x] 404 / 403
-- [x] 三级菜单
-- [x] 自定义图标
-- [x] 可拖拽弹窗
-
-## 安装步骤 ##
-
- git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
- cd vue-manage-system // 进入模板目录
- npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn
-
-## 本地开发 ##
-
- // 开启服务器，浏览器访问 http://localhost:8080
- npm run serve
-
-## 构建生产 ##
-
- // 执行构建命令，生成的dist文件夹放在服务器下即可访问
- npm run build
-
-## 组件使用说明与演示 ##
-
-### vue-schart ###
-vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
-
](https://www.bestqa.net/home/index.html)
-## 其他注意事项 ##
-### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
+专业问卷服务，一对一客服，按需定制
-举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
+## 支持作者
-第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。
+请作者喝杯咖啡吧！(微信号：linxin_20)
-```JavaScript
-{
- // 富文本编辑器组件
- path: '/editor',
- component: resolve => require(['../components/page/VueEditor.vue'], resolve)
-},
-```
+
-第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
+## 前言
-第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
-
-```js
-{
- index: 'editor',
- title: '富文本编辑器'
-},
-```
+该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统开发。基于 Vue3 + pinia + typescript，引用 Element Plus 组件库，方便开发。实现逻辑简单，适合外包项目，快速交付。
-第四步：卸载该组件。执行以下命令：
-
- npm un vue-quill-editor -S
+## 功能
-完成。
+- [x] Element Plus
+- [x] vite 3
+- [x] pinia
+- [x] typescript
+- [x] 登录/注册
+- [x] Dashboard
+- [x] 表格/表单
+- [x] 图表 :bar_chart:
+- [x] 富文本/markdown 编辑器
+- [x] 图片拖拽/裁剪上传
+- [x] 权限管理
+- [x] 三级菜单
+- [x] 自定义图标
+- [x] 主题切换
-### 二、如何切换主题色呢？ ###
+## 安装步骤
-第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
+> 因为使用 vite3，node 版本需要 14.18+
-```javascript
-import 'element-ui/lib/theme-default/index.css'; // 默认主题
-// import '../static/css/theme-green/index.css'; // 浅绿色主题
```
+git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
+cd vue-manage-system // 进入模板目录
+npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn
-第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。
+// 运行
+npm run dev
-```javascript
-@import "../static/css/main.css";
-@import "../static/css/color-dark.css"; /*深色主题*/
-/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/
+// 执行构建命令，生成的dist文件夹放在服务器下即可访问
+npm run build
```
-第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。
+## 项目截图
-## 项目截图 ##
-### 默认皮肤 ###
+### 首页
-### 浅绿色皮肤 ###
+### 登录
+
+
+
+## License
-
\ No newline at end of file
+[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
diff --git a/README_EN.md b/README_EN.md
index a0fc95572..438d22fd1 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -1,160 +1,119 @@
-# vue-manage-system #
-The web management system solution based on Vue2 and Element-UI。[live demo](http://blog.gdfengshuo.com/example/work/)
+# vue-manage-system
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+The web management system solution based on Vue3 and ElementPlus。[live demo](https://lin-xin.gitee.io/example/work/)
+
+Please check the version of vue2 in [tag V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
## Donation
-
-## Preface ##
-The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
+
-## Function ##
-- [x] Element-UI
-- [x] Login/Logout
-- [x] Dashboard
-- [x] Table
-- [x] Tabs
-- [x] From
-- [x] Chart :bar_chart:
-- [x] Editor
-- [x] Markdown
-- [x] Upload pictures by clipping or dragging
-- [x] Support manual switch themes :sparkles:
-- [x] List drag sort
-- [x] Permission
-- [x] 404 / 403
-- [x] Three level menu
-- [x] Custom icon
+## Preface
+The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue3 and ElementPlus. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
-## Installation steps ##
+## Function
- git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
- cd vue-manage-system // Enter template directory
- npm install // Installation dependency
+- [x] Element-UI
+- [x] Login/Logout
+- [x] Dashboard
+- [x] Table
+- [x] Tabs
+- [x] From
+- [x] Chart :bar_chart:
+- [x] Editor
+- [x] Markdown
+- [x] Upload pictures by clipping or dragging
+- [x] Permission
+- [x] Three level menu
+- [x] Custom icon
-## Local development ##
+## Installation steps
- // Open server and access http://localhost:8080 in browser
- npm run serve
+ git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
+ cd vue-manage-system // Enter template directory
+ npm install // Installation dependency
-## Constructing production ##
+## Local development
- // Constructing project
- npm run build
+ npm run dev
-## Component description and presentation ##
+## Constructing production
-### vue-schart ###
-Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
+ // Constructing project
+ npm run build
-```JavaScript
+## Component description and presentation
+
+### vue-schart
+
+Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/lin-xin/vue-schart#/)
+
+```html
+ 
-
- 通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。
-- 直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标） -
-- - <i class="el-icon-lx-redpacket_fill"></i> -
-- - <i class="el-icon-lx-weibo"></i> -
-- - <i class="el-icon-lx-emojifill"></i> -
-Tips : 用户名和密码随便填。
-只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到403页面，重新用管理员账号登录才有权限。
-想尝试一下，请
订单动态
+最近一周订单状态，包括订单成交量和订单退货量
+品类分布
+最近一个月销售商品的品类情况
+时间线
+最新的销售动态和活动信息
+{{ activity.content }}
+{{ activity.description }}
+渠道统计
+最近一个月的订单来源统计
+排行榜
+销售商品的热门榜单Top5
+基础用法
+具体配置
+更新数值
+输入注册时的邮箱，我们会发送验证码到您的邮箱
+验证码已发送至您的邮箱，请输入验证码
+请输入6位以上密码
+
+ + 直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{ iconList.length }}个图标） +
++ + <i class="el-icon-lx-redpacket_fill"></i> +
++ + <i class="el-icon-lx-weibo"></i> +
++ + <i class="el-icon-lx-emojifill"></i> +
+
+ Tips : 用户名和密码随便填。
+
+ 没有账号？
+
+ 已有账号，
输入你的邮箱，我们将发送重置密码邮件
+
+