docs: rewrite README; feat: dark login bg, svg logo, avatar fallback
This commit is contained in:
张家训
@@ -1,187 +1,101 @@
|
|||||||
<p align="center">
|
# Freedom Web
|
||||||
<a href="https://www.iviewui.com">
|
|
||||||
<img width="200" src="https://file.iviewui.com/logo-new.svg">
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
# iView Admin
|
基于 **Vue 2 + view-design（iView 4）** 的后台管理前端，配套 [freedom-admin](https://gitlab.jiaxun.site/yiciheng/freedom-admin.git) 后端服务，支持动态路由菜单、权限控制与代码生成。
|
||||||
|
|
||||||
[](https://github.com/iview/iview-admin/releases)
|
## 技术栈
|
||||||
[](https://travis-ci.org/iview/iview-admin)
|
|
||||||
[](https://github.com/vuejs/vue)
|
|
||||||
[](https://github.com/iview/iview)
|
|
||||||
[]()
|
|
||||||
|
|
||||||
[更新日志](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
|
npm install
|
||||||
```
|
```
|
||||||
## Run
|
|
||||||
### Development
|
### 开发运行
|
||||||
```bush
|
|
||||||
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
### Production(Build)
|
|
||||||
```bush
|
默认访问 `http://localhost:8080`（由 Vue CLI 自动打开）。
|
||||||
|
|
||||||
|
### 生产构建
|
||||||
|
|
||||||
|
```bash
|
||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
## 简介
|
构建产物输出到 `dist/` 目录。
|
||||||
  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)来做开发。
|
|
||||||
|
|
||||||
## 功能
|
## 接口对接
|
||||||
|
|
||||||
- 登录/登出
|
- 请求前缀与后端地址在 `src/config` 中配置，后端服务默认运行于 `http://localhost:8800`。
|
||||||
- 权限管理
|
- 登录后携带 JWT Token（存放于 Cookie / Header），守卫与请求拦截器统一处理。
|
||||||
- 列表过滤
|
|
||||||
- 权限切换
|
|
||||||
- 多语言切换
|
|
||||||
- 组件
|
|
||||||
- 富文本编辑器
|
|
||||||
- Markdown编辑器
|
|
||||||
- 城市级联
|
|
||||||
- 图片预览编辑
|
|
||||||
- 可拖拽列表
|
|
||||||
- 文件上传
|
|
||||||
- 数字渐变
|
|
||||||
- split-pane
|
|
||||||
- 表单编辑
|
|
||||||
- 文章发布
|
|
||||||
- 工作流
|
|
||||||
- 表格
|
|
||||||
- 可拖拽排序
|
|
||||||
- 可编辑表格
|
|
||||||
- 行内编辑
|
|
||||||
- 单元格编辑
|
|
||||||
- 可搜索表格
|
|
||||||
- 表格导出数据
|
|
||||||
- 导出为Csv文件
|
|
||||||
- 导出为Xls文件
|
|
||||||
- 表格转图片
|
|
||||||
- 错误页面
|
|
||||||
- 403页面
|
|
||||||
- 404页面
|
|
||||||
- 500页面
|
|
||||||
- 高级路由
|
|
||||||
- 动态路由
|
|
||||||
- 带参页面
|
|
||||||
- 换肤
|
|
||||||
- 收缩侧边栏
|
|
||||||
- tag标签导航
|
|
||||||
- 面包屑导航
|
|
||||||
- 全屏/退出全屏
|
|
||||||
- 锁屏
|
|
||||||
- 消息中心
|
|
||||||
- 个人中心
|
|
||||||
|
|
||||||
## 文件结构
|
## 默认账号
|
||||||
```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)
|
|
||||||
|
|
||||||
## 效果展示
|
|
||||||
|
|
||||||
- 响应式布局首页
|
|
||||||
|
|
||||||
|
|
||||||
- 标签导航
|
|
||||||
|
|
||||||
|
|
||||||
- 权限管理
|
|
||||||
|
|
||||||
|
|
||||||
- 可拖拽列表
|
|
||||||
|
|
||||||
|
|
||||||
- 图片预览编辑
|
|
||||||
|
|
||||||
|
|
||||||
- 文件上传
|
|
||||||
|
|
||||||
|
|
||||||
- 数字渐变
|
|
||||||
|
|
||||||
|
|
||||||
- split-pane
|
|
||||||
|
|
||||||
|
|
||||||
- 文章发布
|
|
||||||
|
|
||||||
|
|
||||||
- 工作流
|
|
||||||
|
|
||||||
|
|
||||||
- 可拖拽表格
|
|
||||||
|
|
||||||
|
|
||||||
- 可编辑表格
|
|
||||||
|
|
||||||
|
|
||||||
- 表格导出数据
|
|
||||||
|
|
||||||
|
|
||||||
- 表格转图片
|
|
||||||
|
|
||||||
|
|
||||||
- 错误页面
|
|
||||||
|
|
||||||
|
|
||||||
- 锁屏
|
|
||||||
|
|
||||||
|
|
||||||
- 可收缩侧边栏
|
|
||||||
|
|
||||||
|
|
||||||
- 主题切换
|
|
||||||
|
|
||||||
|
|
||||||
- 消息中心
|
|
||||||
|
|
||||||
|
|
||||||
### 💖💖 If you find this project helpful, maybe you can buy me a coffee. 💖💖
|
|
||||||
|
|
||||||
|
|
||||||
|
| 账号 | 密码 | 说明 |
|
||||||
|
| ---- | ---- | ---- |
|
||||||
|
| `admin` | `123456` | 超级管理员 |
|
||||||
|
|
||||||
## License
|
## License
|
||||||
[MIT](http://opensource.org/licenses/MIT)
|
|
||||||
|
|
||||||
Copyright (c) 2016-present, iView
|
本项目仅用于内部学习与研究使用。
|
||||||
|
|||||||
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="fdLogoMinGrad" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#2d8cf0"/>
|
||||||
|
<stop offset="100%" stop-color="#1a5bb8"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="0" y="0" width="44" height="44" rx="11" fill="url(#fdLogoMinGrad)"/>
|
||||||
|
<path d="M11 18 L33 12 L28 32 L21 24 L16 28 Z" fill="#ffffff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 442 B |
@@ -0,0 +1,11 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="184" height="44" viewBox="0 0 184 44">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="fdLogoGrad" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#2d8cf0"/>
|
||||||
|
<stop offset="100%" stop-color="#1a5bb8"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="2" y="2" width="40" height="40" rx="10" fill="url(#fdLogoGrad)"/>
|
||||||
|
<path d="M12 17 L33 12 L28 32 L21 24 L16 28 Z" fill="#ffffff"/>
|
||||||
|
<text x="54" y="28" font-family="'Helvetica Neue', Arial, 'PingFang SC', sans-serif" font-size="20" font-weight="600" letter-spacing="1" fill="#ffffff">Freedom</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 607 B |
@@ -2,7 +2,7 @@
|
|||||||
<div class="user-avator-dropdown">
|
<div class="user-avator-dropdown">
|
||||||
<Dropdown @on-click="handleClick">
|
<Dropdown @on-click="handleClick">
|
||||||
<span style="font-size: 15px;font-weight: bold"> {{ nickname }} </span>
|
<span style="font-size: 15px;font-weight: bold"> {{ nickname }} </span>
|
||||||
<Avatar :src="userAvator"/>
|
<Avatar :key="userAvator" :src="userAvator" style="background-color: #2d8cf0; vertical-align: middle">{{ avatarText }}</Avatar>
|
||||||
<Icon :size="18" type="md-arrow-dropdown"></Icon>
|
<Icon :size="18" type="md-arrow-dropdown"></Icon>
|
||||||
<DropdownMenu slot="list">
|
<DropdownMenu slot="list">
|
||||||
<DropdownItem name="personal-center">个人中心</DropdownItem>
|
<DropdownItem name="personal-center">个人中心</DropdownItem>
|
||||||
@@ -27,6 +27,12 @@ export default {
|
|||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
avatarText () {
|
||||||
|
const name = (this.nickname || '').trim()
|
||||||
|
return name ? name.charAt(0) : 'U'
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions([
|
...mapActions([
|
||||||
'handleLogOut'
|
'handleLogOut'
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
.logo-con{
|
.logo-con{
|
||||||
height: 64px;
|
height: 64px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
img{
|
img{
|
||||||
height: 44px;
|
height: 44px;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|||||||
@@ -41,8 +41,8 @@ import Fullscreen from './components/fullscreen'
|
|||||||
import ErrorStore from './components/error-store'
|
import ErrorStore from './components/error-store'
|
||||||
import { mapMutations, mapActions, mapGetters } from 'vuex'
|
import { mapMutations, mapActions, mapGetters } from 'vuex'
|
||||||
import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
|
import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
|
||||||
import minLogo from '@/assets/images/logo-min.jpg'
|
import minLogo from '@/assets/images/logo-min.svg'
|
||||||
import maxLogo from '@/assets/images/logo.jpg'
|
import maxLogo from '@/assets/images/logo.svg'
|
||||||
import './main.less'
|
import './main.less'
|
||||||
export default {
|
export default {
|
||||||
name: 'Main',
|
name: 'Main',
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
.login{
|
.login{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url('../../assets/images/login-bg.jpg');
|
background-color: #0d0d0d;
|
||||||
background-size: cover;
|
background-image: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
|
||||||
background-position: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
&-con{
|
&-con{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -5,17 +5,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login">
|
||||||
<vue-particles
|
<vue-particles
|
||||||
color="#dedede"
|
color="#ffffff"
|
||||||
:particleOpacity="0.7"
|
:particleOpacity="0.6"
|
||||||
:particlesNumber="80"
|
:particlesNumber="60"
|
||||||
shapeType="circle"
|
shapeType="circle"
|
||||||
:particleSize="4"
|
:particleSize="3"
|
||||||
linesColor="#dedede"
|
linesColor="#ffffff"
|
||||||
:linesWidth="1"
|
:linesWidth="1"
|
||||||
:lineLinked="true"
|
:lineLinked="true"
|
||||||
:lineOpacity="0.4"
|
:lineOpacity="0.3"
|
||||||
:linesDistance="150"
|
:linesDistance="150"
|
||||||
:moveSpeed="3"
|
:moveSpeed="2"
|
||||||
:hoverEffect="true"
|
:hoverEffect="true"
|
||||||
hoverMode="grab"
|
hoverMode="grab"
|
||||||
:clickEffect="true"
|
:clickEffect="true"
|
||||||
|
|||||||
@@ -152,17 +152,25 @@
|
|||||||
key: 'nickname',
|
key: 'nickname',
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
render: (h, params) => {
|
render: (h, params) => {
|
||||||
|
const row = params.row
|
||||||
|
const text = (row.nickname || row.username || 'U').trim().charAt(0)
|
||||||
return h('div',
|
return h('div',
|
||||||
[
|
[
|
||||||
h('Avatar',
|
h('Avatar',
|
||||||
{
|
{
|
||||||
props: {
|
props: {
|
||||||
shape: 'square',
|
shape: 'square',
|
||||||
src: params.row.avatar
|
src: row.avatar || ''
|
||||||
}
|
},
|
||||||
|
style: {
|
||||||
|
marginRight: '8px',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
backgroundColor: '#2d8cf0'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
text
|
||||||
),
|
),
|
||||||
h('span', params.row.nickname)
|
h('span', row.nickname)
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user