cloudhao1999/cloud-app-admin

cloud-app-admin 使用了最新的 Vue3.2 + Vite3 + Element-Plus + TypeScript 等主流技术开发。

cloud-app-admin☁️

简介

cloud-app-admin 使用了最新的vue3.2+ vite3 Element-Plus TypeScript Tailwind CSS等主流技术开发，希望能和大家一起学习最新前端技术。

在线体验

线上地址： cloud-app-admin

项目文档（WIP）

线上地址： cloud-blog

已实现功能

• 路由集成 🧭
• 页面与按钮权限集成 🔒
• 状态管理集成（Pinia）🍍
• Hooks集成（VueUse）🪝
• ElementPlus集成 🖌️
• Tailwind CSS集成 🌹
• Axios二次封装 📦
• i18n国际化集成 🌍
• 代码规范集成（EditorConfig、Eslint、Prettier、Husky、Lint-staged）📒
• Vxe-table多维度图表组件引入 📈
• 封装常用通知、表格Hooks 🎺
• Echarts图表组件库引入 🪐
• 富文本编辑器引入（WangEditor）📝
• Mock引入 🔍
• 支持暗黑模式 🎆
• 支持动态换肤（CSS Variables方案） 🌈
• unplugin-icons引入，配合unplugin-components，无需注册即可按需访问数千个图标作为组件 😊

安装使用

• 获取项目代码

git clone https://github.com/cloudhao1999/cloud-app-admin.git

• 安装依赖

cd cloud-app-admin

pnpm install

• 运行

pnpm dev

项目结构

├── LICENSE                   授权文件
├── README.md                 README
├── dist                      编译目录
│   ├── assets
│   ├── favicon.ico
│   ├── images
│   └── index.html
├── index.html                HTML模板
├── locales                   I18n文件
│   ├── en.json
│   └── zh-CN.json
├── mock                      模拟数据文件
│   ├── article.ts
│   ├── route.ts
│   ├── upload.ts
│   └── user.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public                    网站公共目录 
│   ├── favicon.ico           网站图标 
│   └── images                资源文件
├── screenshot                截图
│   ├── crud.png
│   ├── dashboard-dark.png
│   ├── dashboard-light.png
│   ├── editor.png
│   ├── i18n.png
│   ├── login.png
│   ├── mobile.png
│   └── nested.png
├── src  源码目录
│   ├── App.vue               页面入口
│   ├── api                   接口文件
│   ├── assets                静态资源
│   ├── components            公共组件
│   ├── directives            指令库
│   ├── enum                  全局枚举文件
│   ├── env.d.ts
│   ├── hooks                 自定义hooks
│   ├── layouts               项目布局文件
│   ├── main.ts               程序入口
│   ├── model                 模型定义类型文件
│   ├── plugins               插件文件
│   ├── router                路由文件
│   ├── store                 全局状态
│   ├── style                 全局样式
│   ├── utils                 工具库
│   └── views                 视图
├── stats.html
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
├── types                     ts类型定义
│   ├── auto-imports.d.ts
│   ├── components.d.ts
│   ├── http.d.ts
│   ├── menu.d.ts
│   ├── resultType.d.ts
│   ├── router.d.ts
│   ├── table.d.ts
│   └── viteEnv.d.ts
├── vite															
│   ├── alias.ts              vite别名配置
│   ├── plugins               vite插件模块
│   └── util.ts               vite工具库
└── vite.config.ts            vite配置文件

Git 贡献提交规范

项目已经内置angular提交规范，通过cz 代替git commit 命令即可

pnpm commit

注意 ⚠️

本项目从V1.7版本开始基于vite3构建，由于vite3不再支持node14.18以下版本，使用较低node版本进行安装或启动本项目可能会出现异常。推荐升级至最新稳定版本node16，或使用V1.6版本，V1.6及以下版本使用vite2构建。

运行截图

• 登陆页

• 首页

• 暗黑模式

• 富文本编辑器

• CRUD列表

• 国际化

• 多级菜单

• 自适应

浏览器支持

本地开发推荐使用Chrome 90+ 浏览器

支持现代浏览器, 不支持 IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Q&A

1. 启动项目进入首页出现401报错怎么回事？

   这是由于时间线组件调用了GitHub的API来获取仓库的commit信息，调用API需要申请token，申请token的方法可参考 github的token使用方法，token获取后可以在src/enum/secretEnum.ts中进行修改，在TimeLine.vue组件中，你可以修改 UserEnum.GITHUB_USER,UserEnum.GITHUB_REPO, SecretEnum.GITHUB_ACCESS_TOKEN枚举字段实现监测自己仓库commit信息功能。

2. 登录界面账号密码是多少？

   随便填，但是账号和密码需要遵循校验规则，账号为手机号或标准邮箱格式，密码不低于三位。

cloud-app-admin's Issues

请教运行问题

作者你好 ！ 可以留一个联系方式吗？ 运行的时候报错了，没办法解决，想请教一下

建议： 加入delete、put方法及示例

bug： 表格位置错误

当 表格的cloumns都没有 locked和showOverflowTooltip 属性的时候，表格位置靠右展示。

使用

请问下树形数据该如何使用呢？

net::ERR_ABORTED 404 (Not Found)

通过pnpm run build 打包运行一些css和js文件提示找不到

建议： 加入 restful 风格的url地址访问

建议： 将tailwindcss替换为unocss

建议： 封装图片上传到阿里云的组件

以下代码是我以前封装的组件，您可以参考一下

https://github.com/luoqiz/kite-admin-antd-vue/blob/vite/src/components/ImageUpload/index.vue

error： 打包错误

执行的命令为： npm install n -g && n stable && npm install npm -g && npm install --force && npm run build

Error: 打包报错

useSimpleList 建议

建议完善的方法分为 ： 新增、根据id删除、批量id删除、根据id的更新、查询。
同时写个简单使用示例。

help：在Cfrom中添加富文本编辑器选项

在cform中设置强制一行一个输入项，或者自适应多个。我的需求是：我一个表单大概有50个字段，弹出窗口小，而且一行放置了两个输入项，但是我好几个字段是富文本的，大多需要单独占一行，这个您看看怎么设置比较好。

help: 页面内路由跳转

需求： 单表字段特别多，只展示个别比较重要的字段所以分为多个操作按钮：
1：查看 按钮，跳转到一个新的窗口展示完整信息（根据id去后台查询完整信息）。
2：编辑 按钮，跳转到一个单开的路由页面。
3：新增 按钮，跳转到和编辑页面一样，携带空参数。

以上操作需要携带参数，如何携带参数跳转？
辛苦您写个例子吧。

请教一下 slot radio checkbox 在 cForm.vue 中如何使用？

bug：表格滚动条错误

表格列比较多的时候，同时将第一列和第二列固定的时候，下方滚动条使用错误。

error: 路由加入keepAlive: true后报错

动态权限和路由

有计划加入动态权限和路由吗？权限和路由都是从后台获取的。

建议： 拆分为monorepo模式，多包开发

TypeError: parentComponent.ctx.deactivate is not a function

1. 从master分支拉代码
2. 修改 src/router/routes.ts 第14行，在meta中新增keepAlive属性，代码如下：
   meta: { menu: { title: "router.dashboard" }, keepAlive: true }
3. npm run dev
4. 进入首页后，修改文件 src/views/HomePage.vue 第8行新增如下代码
   console.log('HomePage init')
5. 触发热更新后，控制台报错：
   Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function

建议：标签栏控制

添加标签栏的控制

路由装载重复

您好，我在使用的过程中发现，刷新页面的时候组装路由的autoLoad方法会被调用两次
一次是初始化路由
一次是在路由守卫中
发现有token但是没有用户信息，则重新装载路由
不知道您是处于什么考虑，是因为权限么
因为，这种装载，远程路由接口会调用两次，而且，routes会出现重复的数据，希望大佬能解答我的疑虑

help: select 如何使用

建议： 表格控制

表格控制（我公司的后台管理参考）

登录故障

输入正确的邮箱或手机号，以及密码。登录校验报错。还有表单一输入就报警告啊

[Vue warn] Set operation on key "password" failed: target is readonly. Proxy(Object) {account: '', password: ''}

建议： 加入keep-alive组件

建议：统一写个工具类

比如后台时间戳转字符串、字符串切分等等

示例提供

您提供的文章列表页面demo可展示的组件使用方式有点简单，我提供您两个json，您看看能否按照这个写一个各个组件的使用demo。

如有需要，我可以提供公网接口供您测试

第一个：租户管理的 json
{
"code":200,
"msg":"请求成功",
"data":[
{
"id":"1",
"name":"芋道源码",
"contactUserId":null,
"contactName":"芋艿",
"contactMobile":"17321315478",
"status":0,
"domain":"https://www.iocoder.cn/",
"packageId":"0",
"expireTime":4075175656000,
"accountCount":9999,
"creator":"1",
"createTime":1609837427000,
"updater":"1",
"updateTime":1645589711000,
"deleted":false
},
{
"id":"121",
"name":"小租户",
"contactUserId":"110",
"contactName":"小王2",
"contactMobile":"15601691300",
"status":0,
"domain":"http://www.iocoder.cn/",
"packageId":"111",
"expireTime":1710086400000,
"accountCount":20,
"creator":"1",
"createTime":1645462574000,
"updater":"1",
"updateTime":1652753039000,
"deleted":false
},
{
"id":"122",
"name":"测试租户",
"contactUserId":"113",
"contactName":"芋道",
"contactMobile":"15601691300",
"status":0,
"domain":"https://www.iocoder.cn/",
"packageId":"111",
"expireTime":1651248000000,
"accountCount":50,
"creator":"1",
"createTime":1646660278000,
"updater":"1",
"updateTime":1646660278000,
"deleted":false
}
],
"total":"3",
"pageIndex":1,
"pageSize":10,
"nextPageIndex":2
}

第二个 租户套餐管理json
{
"code":200,
"msg":"请求成功",
"data":[
{
"id":"111",
"name":"普通套餐",
"status":0,
"remark":"小功能",
"menuIds":"[1024,1025,1,102,103,104,1013,1014,1015,1016,1017,1018,1019,1020,1021,1022,1023]",
"creator":"1",
"createTime":1645462440000,
"updater":"1",
"updateTime":1647686353000,
"deleted":false
}
],
"total":"1",
"pageIndex":1,
"pageSize":10,
"nextPageIndex":2
}

建议使用 volta 来锁定 node、yarn 或 npm 的版本

https://docs.volta.sh/guide/

建议： 将封装的组件以及使用方式写入到 readme 中