From 8eb6c2f1ad235b06a8b54af481c1581544ffcfdc Mon Sep 17 00:00:00 2001 From: congzc Date: Tue, 16 May 2023 17:46:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=9C=E5=93=81=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 281 +++++++++++++++++---------------- src/styles/reset.scss | 5 + src/types/components.d.ts | 88 ++++++----- src/views/myCreating/index.vue | 199 +++++++++++++++++++---- 4 files changed, 362 insertions(+), 211 deletions(-) diff --git a/README.md b/README.md index c45a8af..aea82a0 100644 --- a/README.md +++ b/README.md @@ -1,139 +1,142 @@ -

- - - - - - - -

-

- vue3-element-admin官方文档 | 在线预览 -

- -## 项目介绍 - -[vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 `Vue3` 版本后台管理框架,使用 Vue3、Vite4、TypeScript、Pinia、Element Plus 当前主流技术栈开发。 - -## 项目特色 - -- 基于 `vue-element-admin` 升级的 `Vue3` 版本,主流技术栈,无过度自定义封装,极易上手,减少学习成本; -- 配套 `Java` 后台接口,非 `Mock` 数据,[在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240); -- 从 `0` 到 `1` 的项目文档支持,[官方文档](https://www.cnblogs.com/haoxianrui/p/16090029.html)。 -- 系统功能:用户、角色、菜单、字典管和部门管理等; -- 基础设施:动态路由,按钮权限,常用组件封装。 - -## 技术栈 - -| 技术栈 | 描述 | 官网 | -| --- | --- | --- | -| Vue3 | 渐进式 JavaScript 框架 | https://v3.cn.vuejs.org/ | -| TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ | -| Vite | 前端开发与构建工具 | https://cn.vitejs.dev/ | -| Element Plus | 基于 Vue 3,面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/ | -| Pinia | 新一代状态管理工具 | https://pinia.vuejs.org/ | -| Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ | - -## 项目预览 - -**在线预览地址**: [http://vue3.youlai.tech/](http://vue3.youlai.tech/) - -**控制台 & 接口文档** - -| ![暗黑模式](https://s2.loli.net/2023/03/13/QvjY4zf3VCGteNF.png) | -| --------------------------------------------------------------- | -| ![接口文档](https://s2.loli.net/2023/03/13/bH4J3O6WRgCUpwt.png) | - -**权限管理系统** - -| ![用户管理](https://s2.loli.net/2023/03/13/L9xgT5sSMVZukQj.png) | ![image-20230313003008012](https://s2.loli.net/2023/03/13/nQg6HmrtFUkPDYv.png) | -| --- | --- | -| ![image-20230313003028425](https://s2.loli.net/2023/03/13/C4fDRJeTuUO7gPI.png) | ![字典管理](https://s2.loli.net/2023/03/13/BzqjHpa64wfeWhE.png) | - -## 项目地址 - -| | Gitee | Github | -| --- | --- | --- | -| vue3-element-admin | [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) | -| 后端 | [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) | [youlai-boot](https://github.com/hxrui/youlai-boot.git) | - -## 环境要求 - -- Node 环境 - - 版本:16+ - -- 开发工具 - - VSCode - -- 必装插件 - - - Vue Language Features (Volar) - - TypeScript Vue Plugin (Volar) - -## 项目启动 - -```bash -# 安装 pnpm -npm install pnpm -g - -# 安装依赖 -pnpm install - -# 项目运行 -pnpm run dev - -# 项目打包 -pnpm run build:prod - -``` - -## 项目部署 - -- 上传文件 - - 将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html` 目录 - -- nginx.cofig 配置 - - ``` - server { - listen 80; - server_name localhost; - - location / { - root /usr/share/nginx/html; - index index.html index.htm; - } - - # 代理转发 prod-api 标识至 vapi.youlai.tech - location /prod-api/ { - proxy_pass http://vapi.youlai.tech/; - } - } - - ``` - -## 接口文档 - -- 接口调用地址:[vapi.youlai.tech](http://vapi.youlai.tech) -- 接口文档地址:[vue3-element-admin 在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240) - -## 本地接口 - -> 默认使用线上接口,你可以通过以下步骤完成本地接口环境搭建: - -1. 获取基于 `Java 、SpringBoot` 开发的后端 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git) 源码 ; -2. 根据后端工程说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 完成本地启动; -3. 替换 [vite.config.ts](vite.config.ts) 的代理目标地址 [vapi.youlai.tech](vapi.youlai.tech) 为本地的 [localhost:8989](localhost:8989) 。 - -## 关于我们 - -> 欢迎加我的微信,备注 `前端`、`后端`、`全栈` 进对应技术交流群 - -| 微信交流群 | 我的微信 | -| --- | --- | -| ![](https://s2.loli.net/2023/05/06/NwhFvKqZ4zjfO5i.png)| ![](https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg) | - -![](https://s2.loli.net/2022/11/19/OGjum9wr8f6idLX.png) +

+ + + + + + + +

+

+ vue3-element-admin官方文档 | 在线预览 +

+ +## 项目介绍 + +[vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 `Vue3` 版本后台管理框架,使用 Vue3、Vite4、TypeScript、Pinia、Element Plus 当前主流技术栈开发。 + +## 项目特色 + +- 基于 `vue-element-admin` 升级的 `Vue3` 版本,主流技术栈,无过度自定义封装,极易上手,减少学习成本; +- 配套 `Java` 后台接口,非 `Mock` 数据,[在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240); +- 从 `0` 到 `1` 的项目文档支持,[官方文档](https://www.cnblogs.com/haoxianrui/p/16090029.html)。 +- 系统功能:用户、角色、菜单、字典管和部门管理等; +- 基础设施:动态路由,按钮权限,常用组件封装。 + +## 技术栈 + +| 技术栈 | 描述 | 官网 | +| --- | --- | --- | +| Vue3 | 渐进式 JavaScript 框架 | https://v3.cn.vuejs.org/ | +| TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ | +| Vite | 前端开发与构建工具 | https://cn.vitejs.dev/ | +| Element Plus | 基于 Vue 3,面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/ | +| Pinia | 新一代状态管理工具 | https://pinia.vuejs.org/ | +| Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ | + +## 项目预览 + +**在线预览地址**: [http://vue3.youlai.tech/](http://vue3.youlai.tech/) + +**控制台 & 接口文档** + +| ![暗黑模式](https://s2.loli.net/2023/03/13/QvjY4zf3VCGteNF.png) | +| --------------------------------------------------------------- | +| ![接口文档](https://s2.loli.net/2023/03/13/bH4J3O6WRgCUpwt.png) | + +**权限管理系统** + +| ![用户管理](https://s2.loli.net/2023/03/13/L9xgT5sSMVZukQj.png) | ![image-20230313003008012](https://s2.loli.net/2023/03/13/nQg6HmrtFUkPDYv.png) | +| --- | --- | +| ![image-20230313003028425](https://s2.loli.net/2023/03/13/C4fDRJeTuUO7gPI.png) | ![字典管理](https://s2.loli.net/2023/03/13/BzqjHpa64wfeWhE.png) | + +## 项目地址 + +| | Gitee | Github | +| --- | --- | --- | +| vue3-element-admin | [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) | +| 后端 | [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) | [youlai-boot](https://github.com/hxrui/youlai-boot.git) | + +## 环境要求 + +- Node 环境 + + 版本:16+ + +- 开发工具 + + VSCode + +- 必装插件 + + - Vue Language Features (Volar) + - TypeScript Vue Plugin (Volar) + +## 项目启动 + +```bash +# 安装 pnpm +npm install pnpm -g + +# 安装依赖 +pnpm install + +# 项目运行 +pnpm run dev + +# 项目打包 +pnpm run build:prod + +``` + +## 项目部署 + +- 上传文件 + + 将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html` 目录 + +- nginx.cofig 配置 + + ``` + server { + listen 80; + server_name localhost; + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + } + + # 代理转发 prod-api 标识至 vapi.youlai.tech + location /prod-api/ { + proxy_pass http://vapi.youlai.tech/; + } + } + + ``` + +## 接口文档 + +- 接口调用地址:[vapi.youlai.tech](http://vapi.youlai.tech) +- 接口文档地址:[vue3-element-admin 在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240) + +## 本地接口 + +> 默认使用线上接口,你可以通过以下步骤完成本地接口环境搭建: + +1. 获取基于 `Java 、SpringBoot` 开发的后端 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git) 源码 ; +2. 根据后端工程说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 完成本地启动; +3. 替换 [vite.config.ts](vite.config.ts) 的代理目标地址 [vapi.youlai.tech](vapi.youlai.tech) 为本地的 [localhost:8989](localhost:8989) 。 + +## 关于我们 + +> 欢迎加我的微信,备注 `前端`、`后端`、`全栈` 进对应技术交流群 + +| 微信交流群 | 我的微信 | +| --- | --- | +| ![](https://s2.loli.net/2023/05/06/NwhFvKqZ4zjfO5i.png)| ![](https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg) | + +![](https://s2.loli.net/2022/11/19/OGjum9wr8f6idLX.png) + + +git commit -m "feat: " \ No newline at end of file diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 9b19e4c..4367236 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -73,3 +73,8 @@ a:active, div:focus { outline: none; } + +div { + padding: 0; + margin: 0; +} diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 348146d..5797272 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -1,48 +1,56 @@ // generated by unplugin-vue-components // We suggest you to commit this file into source control // Read more: https://github.com/vuejs/core/pull/3399 -import "@vue/runtime-core"; +import '@vue/runtime-core' -export {}; +export {} -declare module "@vue/runtime-core" { +declare module '@vue/runtime-core' { export interface GlobalComponents { - Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"]; - ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"]; - ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"]; - ElButton: typeof import("element-plus/es")["ElButton"]; - ElDivider: typeof import("element-plus/es")["ElDivider"]; - ElDropdown: typeof import("element-plus/es")["ElDropdown"]; - ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"]; - ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"]; - ElIcon: typeof import("element-plus/es")["ElIcon"]; - ElInput: typeof import("element-plus/es")["ElInput"]; - ElMenu: typeof import("element-plus/es")["ElMenu"]; - ElMenuItem: typeof import("element-plus/es")["ElMenuItem"]; - ElOption: typeof import("element-plus/es")["ElOption"]; - ElRow: typeof import("element-plus/es")["ElRow"]; - ElScrollbar: typeof import("element-plus/es")["ElScrollbar"]; - ElSelect: typeof import("element-plus/es")["ElSelect"]; - ElSubMenu: typeof import("element-plus/es")["ElSubMenu"]; - ElSwitch: typeof import("element-plus/es")["ElSwitch"]; - ElTabPane: typeof import("element-plus/es")["ElTabPane"]; - ElTabs: typeof import("element-plus/es")["ElTabs"]; - ElTooltip: typeof import("element-plus/es")["ElTooltip"]; - GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"]; - Hamburger: typeof import("./../components/Hamburger/index.vue")["default"]; - IconSelect: typeof import("./../components/IconSelect/index.vue")["default"]; - IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"]; - IEpClose: typeof import("~icons/ep/close")["default"]; - IEpSetting: typeof import("~icons/ep/setting")["default"]; - LangSelect: typeof import("./../components/LangSelect/index.vue")["default"]; - MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")["default"]; - Pagination: typeof import("./../components/Pagination/index.vue")["default"]; - RightPanel: typeof import("./../components/RightPanel/index.vue")["default"]; - RouterLink: typeof import("vue-router")["RouterLink"]; - RouterView: typeof import("vue-router")["RouterView"]; - SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"]; - SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"]; - SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"]; - WangEditor: typeof import("./../components/WangEditor/index.vue")["default"]; + Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] + ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] + ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] + ElButton: typeof import('element-plus/es')['ElButton'] + ElDialog: typeof import('element-plus/es')['ElDialog'] + ElDivider: typeof import('element-plus/es')['ElDivider'] + ElDropdown: typeof import('element-plus/es')['ElDropdown'] + ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] + ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] + ElForm: typeof import('element-plus/es')['ElForm'] + ElFormItem: typeof import('element-plus/es')['ElFormItem'] + ElIcon: typeof import('element-plus/es')['ElIcon'] + ElInput: typeof import('element-plus/es')['ElInput'] + ElMenu: typeof import('element-plus/es')['ElMenu'] + ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] + ElOption: typeof import('element-plus/es')['ElOption'] + ElRow: typeof import('element-plus/es')['ElRow'] + ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] + ElSelect: typeof import('element-plus/es')['ElSelect'] + ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] + ElSwitch: typeof import('element-plus/es')['ElSwitch'] + ElTabPane: typeof import('element-plus/es')['ElTabPane'] + ElTabs: typeof import('element-plus/es')['ElTabs'] + ElTooltip: typeof import('element-plus/es')['ElTooltip'] + GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] + Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] + IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] + IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default'] + IEpClose: typeof import('~icons/ep/close')['default'] + IEpDelete: typeof import('~icons/ep/delete')['default'] + IEpDownload: typeof import('~icons/ep/download')['default'] + IEpEdit: typeof import('~icons/ep/edit')['default'] + IEpPlus: typeof import('~icons/ep/plus')['default'] + IEpSetting: typeof import('~icons/ep/setting')['default'] + IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] + LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] + MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] + Pagination: typeof import('./../components/Pagination/index.vue')['default'] + RightPanel: typeof import('./../components/RightPanel/index.vue')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default'] + SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default'] + SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default'] + WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] } } diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue index 8945681..b08a1ff 100644 --- a/src/views/myCreating/index.vue +++ b/src/views/myCreating/index.vue @@ -4,15 +4,12 @@
- +
-
+
@@ -20,44 +17,113 @@ 名称 时间
- -
-
...
-
-
下载
-
删除
+ +
+ +
...
+
+
+
+ +
+
下载
+
+
+
+ +
+
删除
+
+ + +
+ +
+ +
+