diff --git a/README.md b/README.md index 9945af9..120fef4 100644 --- a/README.md +++ b/README.md @@ -1,187 +1,101 @@ -

- - - -

+# Freedom Web -# iView Admin +基于 **Vue 2 + view-design（iView 4）** 的后台管理前端，配套 [freedom-admin](https://gitlab.jiaxun.site/yiciheng/freedom-admin.git) 后端服务，支持动态路由菜单、权限控制与代码生成。 -[![](https://img.shields.io/github/release/iview/iview-admin.svg)](https://github.com/iview/iview-admin/releases) -[![](https://img.shields.io/travis/iview/iview-admin.svg?style=flat-square)](https://travis-ci.org/iview/iview-admin) -[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg?style=flat-square)](https://github.com/vuejs/vue) -[![iview ui](https://img.shields.io/badge/iview-3.0.0-brightgreen.svg?style=flat-square)](https://github.com/iview/iview) -[![npm](https://img.shields.io/npm/l/express.svg)]() +## 技术栈 -[更新日志](https://github.com/iview/iview-admin/releases) +| 分类 | 技术 | +| ---- | ---- | +| 核心框架 | Vue 2.5+ | +| UI 组件库 | view-design 4.5 | +| 路由 / 状态 | Vue Router 3、Vuex 3 | +| 构建工具 | Vue CLI 3 | +| HTTP | Axios | +| 图表 | ECharts 4 | +| 其他 | vue-particles（登录页粒子）、js-cookie、jsencrypt、xlsx 等 | -[使用文档](https://lison16.github.io/iview-admin-doc/#/) +## 项目结构 -[在线访问](https://admin.iviewui.com/) +``` +freedom-web +├── public/ # 打包所需静态资源 +├── src/ +│ ├── api/ # 接口请求层 +│ │ ├── sys/ # 系统管理（用户/角色/部门/权限） +│ │ ├── code/ # 代码生成 +│ │ ├── basic/ # 基础配置 +│ │ └── kpi/ # KPI 指标模块 +│ ├── assets/ # 静态资源（图标/图片） +│ ├── components/ # 业务组件（主框架/用户信息等） +│ ├── config/ # 项目运行配置 +│ ├── libs/ # 封装工具（路由处理等） +│ ├── router/ # 路由配置与守卫 +│ ├── store/ # Vuex 状态管理 +│ ├── view/ # 页面 +│ │ ├── login/ # 登录页 +│ │ ├── home/ # 首页/个人中心/消息中心 +│ │ ├── sys/ # 系统管理（用户/角色/部门/权限） +│ │ ├── code/ # 代码生成（配置 + 生成器） +│ │ └── kpi/ # KPI 指标模块 +│ └── main.js # 应用入口 +└── vue.config.js # 构建配置 +``` -[简化版模板](https://github.com/iview/iview-admin/tree/template) +## 功能特性 -[教学视频(26课时)](https://segmentfault.com/ls/1650000016221751?utm_source=banner) +- **登录页**：黑色简约风格 + 白色粒子动效 +- **动态路由菜单**：菜单由后端权限表驱动，登录后动态注册路由并渲染侧边栏 +- **系统管理** + - 用户管理（含头像兜底：无头像时显示昵称首字） + - 角色管理 + - 部门管理（树形） + - 权限管理 +- **代码生成** + - 研发中心-代码生成全局配置（项目路径 / 包名 / 模板选择） + - 代码生成器（读取数据库表，一键生成前后端代码） +- **KPI 指标模块**：指标库、员工指标、模板管理、指标记录等 +- **通用能力**：tag 标签导航、面包屑、全屏、锁屏、个人中心、消息中心、错误页（401/403/404/500） -`注：在线版本会在开发版本新小版本发布后更新到相应版本，所以如果想体验最新版本iview-admin，请clone完整项目代码到本地运行。` +## 快速开始 -## Install -```bush -// install dependencies +### 环境要求 + +- Node.js 8.9+（推荐 10~14） +- npm / yarn + +### 安装依赖 + +```bash npm install ``` -## Run -### Development -```bush + +### 开发运行 + +```bash npm run dev ``` -### Production(Build) -```bush + +默认访问 `http://localhost:8080`（由 Vue CLI 自动打开）。 + +### 生产构建 + +```bash npm run build ``` -## 简介 -  iView admin是基于Vue.js，搭配使用[iView](https://www.iviewui.com) UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护。iView admin遵守iView设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。 -如果您想查看iview-admin的更新动态，您可以到[更新日志](https://github.com/iview/iview-admin/releases)查看了解最新更新；如果您是新手，想快速入手iview-admin，您可以到[使用教程](https://github.com/iview/iview-admin/wiki)查看讲解；如果您想在线体验iview-admin，您可以到[在线访问](https://admin.iviewui.com/)体验。如果你只是想要一个清醒爽朗的界面，那你可以下载[简化版模板](https://github.com/iview/iview-admin/tree/template)来做开发。 +构建产物输出到 `dist/` 目录。 -## 功能 +## 接口对接 -- 登录/登出 -- 权限管理 - - 列表过滤 - - 权限切换 -- 多语言切换 -- 组件 - - 富文本编辑器 - - Markdown编辑器 - - 城市级联 - - 图片预览编辑 - - 可拖拽列表 - - 文件上传 - - 数字渐变 - - split-pane -- 表单编辑 - - 文章发布 - - 工作流 -- 表格 - - 可拖拽排序 - - 可编辑表格 - - 行内编辑 - - 单元格编辑 - - 可搜索表格 - - 表格导出数据 - - 导出为Csv文件 - - 导出为Xls文件 - - 表格转图片 -- 错误页面 - - 403页面 - - 404页面 - - 500页面 -- 高级路由 - - 动态路由 - - 带参页面 -- 换肤 -- 收缩侧边栏 -- tag标签导航 -- 面包屑导航 -- 全屏/退出全屏 -- 锁屏 -- 消息中心 -- 个人中心 +- 请求前缀与后端地址在 `src/config` 中配置，后端服务默认运行于 `http://localhost:8800`。 +- 登录后携带 JWT Token（存放于 Cookie / Header），守卫与请求拦截器统一处理。 -## 文件结构 -```shell -. -├── build 项目构建配置 -├── config 开发相关配置 -├── public 打包所需静态资源 -└── src - ├── api AJAX请求 - └── assets 项目静态资源 - ├── icons 自定义图标资源 - └── images 图片资源 - ├── components 业务组件 - ├── config 项目运行配置 - ├── directive 自定义指令 - ├── libs 封装工具函数 - ├── locale 多语言文件 - ├── mock mock模拟数据 - ├── router 路由配置 - ├── store Vuex配置 - ├── view 页面文件 - └── tests 测试相关 -``` - -## Links - -- [TalkingData](https://github.com/TalkingData) -- [iView](https://github.com/iview/iview) -- [Vue](https://github.com/vuejs/vue) -- [Webpack](https://github.com/webpack/webpack) - -## 效果展示 - -- 响应式布局首页 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/home.gif) - -- 标签导航 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/page-tags.gif) - -- 权限管理 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/access.gif) - -- 可拖拽列表 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/dragable-list.gif) - -- 图片预览编辑 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/image-editor.gif) - -- 文件上传 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/upload.gif) - -- 数字渐变 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/count-to.gif) - -- split-pane -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/split-pane.gif) - -- 文章发布 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/article-publish.gif) - -- 工作流 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/workflow.gif) - -- 可拖拽表格 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/dragable-table.gif) - -- 可编辑表格 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/editable-table.gif) - -- 表格导出数据 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/exportable-table.gif) - -- 表格转图片 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/table2image.gif) - -- 错误页面 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/error-page.gif) - -- 锁屏 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/locking.gif) - -- 可收缩侧边栏 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/sidebarmenu.gif) - -- 主题切换 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/theme.gif) - -- 消息中心 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/message.gif) - -### 💖💖 If you find this project helpful, maybe you can buy me a coffee. 💖💖 -![image](https://github.com/iview/iview-admin/raw/dev/github-gif/code.png) +## 默认账号 +| 账号 | 密码 | 说明 | +| ---- | ---- | ---- | +| `admin` | `123456` | 超级管理员 | ## License -[MIT](http://opensource.org/licenses/MIT) -Copyright (c) 2016-present, iView +本项目仅用于内部学习与研究使用。 diff --git a/src/assets/images/logo-min.svg b/src/assets/images/logo-min.svg new file mode 100644 index 0000000..dbaf720 --- /dev/null +++ b/src/assets/images/logo-min.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg new file mode 100644 index 0000000..68a8060 --- /dev/null +++ b/src/assets/images/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + Freedom + diff --git a/src/components/main/components/user/user.vue b/src/components/main/components/user/user.vue index be9de81..7a4dbab 100644 --- a/src/components/main/components/user/user.vue +++ b/src/components/main/components/user/user.vue @@ -2,7 +2,7 @@
{{ nickname }} - + {{ avatarText }} 个人中心 @@ -27,6 +27,12 @@ export default { default: '' } }, + computed: { + avatarText () { + const name = (this.nickname || '').trim() + return name ? name.charAt(0) : 'U' + } + }, methods: { ...mapActions([ 'handleLogOut' diff --git a/src/components/main/main.less b/src/components/main/main.less index f982f79..712f049 100644 --- a/src/components/main/main.less +++ b/src/components/main/main.less @@ -2,6 +2,7 @@ .logo-con{ height: 64px; padding: 10px; + text-align: center; img{ height: 44px; width: auto; diff --git a/src/components/main/main.vue b/src/components/main/main.vue index 2635e63..adc2469 100644 --- a/src/components/main/main.vue +++ b/src/components/main/main.vue @@ -41,8 +41,8 @@ import Fullscreen from './components/fullscreen' import ErrorStore from './components/error-store' import { mapMutations, mapActions, mapGetters } from 'vuex' import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util' -import minLogo from '@/assets/images/logo-min.jpg' -import maxLogo from '@/assets/images/logo.jpg' +import minLogo from '@/assets/images/logo-min.svg' +import maxLogo from '@/assets/images/logo.svg' import './main.less' export default { name: 'Main', diff --git a/src/view/login/login.less b/src/view/login/login.less index e986ed4..5246d69 100644 --- a/src/view/login/login.less +++ b/src/view/login/login.less @@ -1,9 +1,8 @@ .login{ width: 100%; height: 100%; - background-image: url('../../assets/images/login-bg.jpg'); - background-size: cover; - background-position: center; + background-color: #0d0d0d; + background-image: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%); position: relative; &-con{ position: absolute; diff --git a/src/view/login/login.vue b/src/view/login/login.vue index 5cfb68d..5d4a930 100644 --- a/src/view/login/login.vue +++ b/src/view/login/login.vue @@ -5,17 +5,17 @@