init: v3 init
|
@ -1,9 +0,0 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
|
@ -1,8 +0,0 @@
|
|||
/build/
|
||||
/config/
|
||||
/dist/
|
||||
/*.js
|
||||
/*.d.ts
|
||||
/test/unit/coverage/
|
||||
/node_modules/*
|
||||
/src/env.d.ts
|
322
.eslintrc.js
|
@ -1,322 +0,0 @@
|
|||
// @ts-check
|
||||
const { defineConfig } = require('eslint-define-config')
|
||||
module.exports = defineConfig({
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true
|
||||
},
|
||||
parser: 'vue-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser',
|
||||
ecmaVersion: 2020,
|
||||
sourceType: 'module',
|
||||
jsxPragma: 'React',
|
||||
ecmaFeatures: {
|
||||
jsx: true
|
||||
}
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'prettier',
|
||||
'plugin:prettier/recommended',
|
||||
'plugin:jest/recommended'
|
||||
],
|
||||
rules: {
|
||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'vue/custom-event-name-casing': 'off',
|
||||
'no-use-before-define': 'off',
|
||||
// 'no-use-before-define': [
|
||||
// 'error',
|
||||
// {
|
||||
// functions: false,
|
||||
// classes: true,
|
||||
// },
|
||||
// ],
|
||||
'@typescript-eslint/no-use-before-define': 'off',
|
||||
// '@typescript-eslint/no-use-before-define': [
|
||||
// 'error',
|
||||
// {
|
||||
// functions: false,
|
||||
// classes: true,
|
||||
// },
|
||||
// ],
|
||||
'@typescript-eslint/ban-ts-comment': 'off',
|
||||
'@typescript-eslint/ban-types': 'off',
|
||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-unused-vars': [2],
|
||||
'@typescript-eslint/no-extra-semi': 'off',
|
||||
'no-unused-vars': [2],
|
||||
'prefer-rest-params': 'off',
|
||||
'prefer-spread': 'off',
|
||||
'space-before-function-paren': 'off',
|
||||
'vue/html-indent': 'off',
|
||||
'vue/html-self-closing': [
|
||||
'error',
|
||||
{
|
||||
html: {
|
||||
void: 'always',
|
||||
normal: 'never',
|
||||
component: 'always'
|
||||
},
|
||||
svg: 'always',
|
||||
math: 'always'
|
||||
}
|
||||
],
|
||||
'vue/max-attributes-per-line': [
|
||||
2,
|
||||
{
|
||||
singleline: 10,
|
||||
multiline: {
|
||||
max: 1,
|
||||
allowFirstLine: false
|
||||
}
|
||||
}
|
||||
],
|
||||
'vue/singleline-html-element-content-newline': 'off',
|
||||
'vue/multiline-html-element-content-newline': 'off',
|
||||
'vue/name-property-casing': ['error', 'PascalCase'],
|
||||
'vue/no-v-html': 'off',
|
||||
'accessor-pairs': 2,
|
||||
'jsx-quotes': ['error', 'prefer-double'],
|
||||
'arrow-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'block-spacing': [2, 'always'],
|
||||
'brace-style': [
|
||||
2,
|
||||
'1tbs',
|
||||
{
|
||||
allowSingleLine: true
|
||||
}
|
||||
],
|
||||
camelcase: [
|
||||
0,
|
||||
{
|
||||
properties: 'always'
|
||||
}
|
||||
],
|
||||
'comma-dangle': [2, 'never'],
|
||||
'comma-spacing': [
|
||||
2,
|
||||
{
|
||||
before: false,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'comma-style': [2, 'last'],
|
||||
'constructor-super': 2,
|
||||
curly: [2, 'multi-line'],
|
||||
'dot-location': [2, 'property'],
|
||||
'eol-last': 2,
|
||||
eqeqeq: [
|
||||
'error',
|
||||
'always',
|
||||
{
|
||||
null: 'ignore'
|
||||
}
|
||||
],
|
||||
'generator-star-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'handle-callback-err': [2, '^(err|error)$'],
|
||||
indent: [
|
||||
'off',
|
||||
2,
|
||||
{
|
||||
SwitchCase: 1
|
||||
}
|
||||
],
|
||||
'key-spacing': [
|
||||
2,
|
||||
{
|
||||
beforeColon: false,
|
||||
afterColon: true
|
||||
}
|
||||
],
|
||||
'keyword-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'new-cap': [
|
||||
2,
|
||||
{
|
||||
newIsCap: true,
|
||||
capIsNew: false
|
||||
}
|
||||
],
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
'no-console': 'off',
|
||||
'no-class-assign': 2,
|
||||
'no-cond-assign': 2,
|
||||
'no-const-assign': 2,
|
||||
'no-control-regex': 0,
|
||||
'no-delete-var': 2,
|
||||
'no-dupe-args': 2,
|
||||
'no-dupe-class-members': 2,
|
||||
'no-dupe-keys': 2,
|
||||
'no-duplicate-case': 2,
|
||||
'no-empty-character-class': 2,
|
||||
'no-empty-pattern': 2,
|
||||
'no-eval': 2,
|
||||
'no-ex-assign': 2,
|
||||
'no-extend-native': 2,
|
||||
'no-extra-bind': 2,
|
||||
'no-extra-boolean-cast': 2,
|
||||
'no-extra-parens': [2, 'functions'],
|
||||
'no-fallthrough': 2,
|
||||
'no-floating-decimal': 2,
|
||||
'no-func-assign': 2,
|
||||
'no-implied-eval': 2,
|
||||
'no-inner-declarations': [2, 'functions'],
|
||||
'no-invalid-regexp': 2,
|
||||
'no-irregular-whitespace': 2,
|
||||
'no-iterator': 2,
|
||||
'no-label-var': 2,
|
||||
'no-labels': [
|
||||
2,
|
||||
{
|
||||
allowLoop: false,
|
||||
allowSwitch: false
|
||||
}
|
||||
],
|
||||
'no-lone-blocks': 2,
|
||||
'no-mixed-spaces-and-tabs': 2,
|
||||
'no-multi-spaces': 2,
|
||||
'no-multi-str': 2,
|
||||
'no-multiple-empty-lines': [
|
||||
2,
|
||||
{
|
||||
max: 1
|
||||
}
|
||||
],
|
||||
'no-native-reassign': 2,
|
||||
'no-negated-in-lhs': 2,
|
||||
'no-new-object': 2,
|
||||
'no-new-require': 2,
|
||||
'no-new-symbol': 2,
|
||||
'no-new-wrappers': 2,
|
||||
'no-obj-calls': 2,
|
||||
'no-octal': 2,
|
||||
'no-octal-escape': 2,
|
||||
'no-path-concat': 2,
|
||||
'no-proto': 2,
|
||||
'no-redeclare': 2,
|
||||
'no-regex-spaces': 2,
|
||||
'no-return-assign': [2, 'except-parens'],
|
||||
'no-self-assign': 2,
|
||||
'no-self-compare': 2,
|
||||
'no-sequences': 2,
|
||||
'no-shadow-restricted-names': 2,
|
||||
'no-spaced-func': 2,
|
||||
'no-sparse-arrays': 2,
|
||||
'no-this-before-super': 2,
|
||||
'no-throw-literal': 2,
|
||||
'no-trailing-spaces': 2,
|
||||
'no-undef': 0,
|
||||
'no-undef-init': 2,
|
||||
'no-unexpected-multiline': 2,
|
||||
'no-unmodified-loop-condition': 2,
|
||||
'no-unneeded-ternary': [
|
||||
2,
|
||||
{
|
||||
defaultAssignment: false
|
||||
}
|
||||
],
|
||||
'no-unreachable': 2,
|
||||
'no-unsafe-finally': 2,
|
||||
'no-useless-call': 'off',
|
||||
'no-useless-computed-key': 2,
|
||||
'no-useless-constructor': 2,
|
||||
'no-useless-escape': 0,
|
||||
'no-whitespace-before-property': 2,
|
||||
'no-with': 2,
|
||||
'one-var': [
|
||||
2,
|
||||
{
|
||||
initialized: 'never'
|
||||
}
|
||||
],
|
||||
'operator-linebreak': [
|
||||
2,
|
||||
'after',
|
||||
{
|
||||
overrides: {
|
||||
'?': 'before',
|
||||
':': 'before'
|
||||
}
|
||||
}
|
||||
],
|
||||
'padded-blocks': [2, 'never'],
|
||||
quotes: [
|
||||
2,
|
||||
'single',
|
||||
{
|
||||
avoidEscape: true,
|
||||
allowTemplateLiterals: true
|
||||
}
|
||||
],
|
||||
semi: [2, 'never'],
|
||||
'semi-spacing': [
|
||||
2,
|
||||
{
|
||||
before: false,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'space-in-parens': [2, 'never'],
|
||||
'space-infix-ops': 2,
|
||||
'space-unary-ops': [
|
||||
2,
|
||||
{
|
||||
words: true,
|
||||
nonwords: false
|
||||
}
|
||||
],
|
||||
'spaced-comment': [
|
||||
2,
|
||||
'always',
|
||||
{
|
||||
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
||||
}
|
||||
],
|
||||
'template-curly-spacing': [2, 'never'],
|
||||
'use-isnan': 2,
|
||||
'valid-typeof': 2,
|
||||
'wrap-iife': [2, 'any'],
|
||||
'yield-star-spacing': [2, 'both'],
|
||||
yoda: [2, 'never'],
|
||||
'prefer-const': 2,
|
||||
'no-debugger': 0,
|
||||
'object-curly-spacing': [
|
||||
2,
|
||||
'always',
|
||||
{
|
||||
objectsInObjects: false
|
||||
}
|
||||
],
|
||||
'array-bracket-spacing': [2, 'never'],
|
||||
'vue/no-use-v-if-with-v-for': 'off'
|
||||
}
|
||||
})
|
|
@ -3,4 +3,3 @@ node_modules
|
|||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
/components.d.ts
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
_
|
|
@ -1,4 +0,0 @@
|
|||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
yarn commitlint --edit "$1"
|
|
@ -1,9 +0,0 @@
|
|||
#!/bin/sh
|
||||
command_exists () {
|
||||
command -v "$1" >/dev/null 2>&1
|
||||
}
|
||||
|
||||
# Workaround for Windows 10, Git Bash and Yarn
|
||||
if command_exists winpty && test -t 1; then
|
||||
exec < /dev/tty
|
||||
fi
|
|
@ -1,8 +0,0 @@
|
|||
module.exports = {
|
||||
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
|
||||
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
|
||||
'package.json': ['prettier --write'],
|
||||
'*.vue': ['prettier --write', 'stylelint --fix'],
|
||||
'*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write'],
|
||||
'*.md': ['prettier --write']
|
||||
}
|
|
@ -1,10 +0,0 @@
|
|||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
. "$(dirname "$0")/common.sh"
|
||||
|
||||
[ -n "$CI" ] && exit 0
|
||||
|
||||
# Format and submit code according to lintstagedrc.js configuration
|
||||
npm run lint:lint-staged
|
||||
npm run ts:check
|
||||
npm run lint:pretty
|
|
@ -1,8 +0,0 @@
|
|||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
plugins: {
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
|
@ -1,8 +0,0 @@
|
|||
/node_modules/**
|
||||
/dist/
|
||||
/dist*
|
||||
/public/*
|
||||
/docs/*
|
||||
/vite.config.ts
|
||||
/src/env.d.ts
|
||||
/docs/**/*
|
|
@ -1,19 +0,0 @@
|
|||
module.exports = {
|
||||
printWidth: 100,
|
||||
tabWidth: 2,
|
||||
useTabs: false,
|
||||
semi: false,
|
||||
vueIndentScriptAndStyle: false,
|
||||
singleQuote: true,
|
||||
quoteProps: 'as-needed',
|
||||
bracketSpacing: true,
|
||||
trailingComma: 'none',
|
||||
jsxSingleQuote: false,
|
||||
arrowParens: 'always',
|
||||
insertPragma: false,
|
||||
requirePragma: false,
|
||||
proseWrap: 'never',
|
||||
htmlWhitespaceSensitivity: 'strict',
|
||||
endOfLine: 'lf',
|
||||
rangeStart: 0
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
/dist/*
|
||||
/public/*
|
||||
public/*
|
||||
/dist*
|
||||
/src/env.d.ts
|
||||
/docs/**/*
|
13
CHANGLOG.md
|
@ -1,13 +0,0 @@
|
|||
# 更新日志
|
||||
|
||||
## 2.0.0
|
||||
|
||||
`2021-10-24`
|
||||
|
||||
### Features
|
||||
|
||||
- vite 版本发布
|
||||
|
||||
### Docs
|
||||
|
||||
- 更新对应文档
|
75
README.md
|
@ -1,72 +1,11 @@
|
|||
# vue-element-plus-admin
|
||||
# Vue 3 + Typescript + Vite
|
||||
|
||||
> 一套基于 vue3 & typeScript4 & vite2 的后台集成方案
|
||||
This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## 介绍
|
||||
|
||||
vue-element-plus-admin 是一套基于 vue3 & typeScript4 & vite2 的后台集成方案,内置了动态路由,权限验证,典型的业务模型,丰富的功能组件,开箱即用,可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型,也可以作为一个示例,用于学习。
|
||||
|
||||
vue-element-plus-admin 的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。
|
||||
|
||||
[在线预览地址](http://8.133.179.48:4000/dist-pro/#/login)
|
||||
|
||||
如需要基础模版,请切换到`tempalte`分支。
|
||||
|
||||
## 前序准备
|
||||
|
||||
你需要在本地安装[node](https://nodejs.org/en/)和[git](https://git-scm.com/)。本项目技术栈基于[ES2015+](https://es6.ruanyifeng.com/)、[typescript](https://www.typescriptlang.org/)、[vue](https://cn.vuejs.org/index.html)、[pinia](https://pinia.esm.dev/)、[vue-router](https://router.vuejs.org/zh/)、[axios](https://github.com/axios/axios)和[element-plus](https://github.com/element-plus/element-plus),所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```sh
|
||||
.
|
||||
├── public # 静态资源
|
||||
├── src # 项目代码
|
||||
│ ├── assets # 静态资源
|
||||
│ ├── axios-config # axios配置
|
||||
│ ├── components # 公用组件
|
||||
│ ├── directive # 自定义指令
|
||||
│ ├── hooks # 常用hooks
|
||||
│ ├── layout # 布局组件
|
||||
│ ├── plugins # 外部插件
|
||||
│ ├── mock # 模拟数据
|
||||
│ ├── router # 路由配置
|
||||
│ ├── store # 状态管理
|
||||
│ ├── styles # 全局样式
|
||||
│ ├── utils # 全局工具类
|
||||
│ ├── views # 路由页面
|
||||
│ ├── vue-bus # 跨组件通信
|
||||
│ ├── App.vue # 入口vue文件
|
||||
│ ├── env.d.ts # vue全局声明
|
||||
│ ├── global.d.ts # 业务代码全局声明
|
||||
│ ├── main.ts # 主入口文件
|
||||
│ └── permission.ts # 路由拦截
|
||||
├── .babelrc # babel配置
|
||||
├── .editorconfig # 编辑器配置
|
||||
├── .eslintignore # eslint 忽略配置项
|
||||
├── .eslintrc # eslint 配置文件
|
||||
├── .gitignore # git 忽略提交配置文件
|
||||
├── .postcssrc.js # postcss 配置文件
|
||||
├── .prettierrc.js # 代码格式 配置文件
|
||||
├── .stylelintignore # stylelint 忽略文件
|
||||
├── CHANGLOG.md # 更新日志
|
||||
├── commitlint.config.js # git commit 配置文件
|
||||
├── package.json
|
||||
├── README.md
|
||||
├── stylelint.config # stylelint配置文件
|
||||
├── tsconfig.json # ts 配置文件
|
||||
├── vite.config.ts # vite配置
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
由于 Vue 3 不再支持 IE11,vue-element-plus-admin 也不支持 IE
|
||||
|
||||
| [<img src="https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --- | --- | --- | --- |
|
||||
| Edge ≥ 79 | Firefox ≥ 78 | Chrome ≥ 64 | Safari ≥ 12 |
|
||||
|
||||
## IDE 推荐设置
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
|
||||
|
||||
## Type Support For `.vue` Imports in TS
|
||||
|
||||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
|
||||
|
|
|
@ -1,29 +0,0 @@
|
|||
module.exports = {
|
||||
extends: ['@commitlint/config-conventional'],
|
||||
rules: {
|
||||
'type-enum': [
|
||||
2,
|
||||
'always',
|
||||
[
|
||||
'feat', // 新功能(feature)
|
||||
'fix', // 修补bug
|
||||
'docs', // 文档(documentation)
|
||||
'style', // 格式、样式(不影响代码运行的变动)
|
||||
'refactor', // 重构(即不是新增功能,也不是修改BUG的代码)
|
||||
'perf', // 优化相关,比如提升性能、体验
|
||||
'test', // 添加测试
|
||||
'build', // 编译相关的修改,对项目构建或者依赖的改动
|
||||
'ci', // 持续集成修改
|
||||
'chore', // 构建过程或辅助工具的变动
|
||||
'revert', // 回滚到上一个版本
|
||||
'workflow', // 工作流改进
|
||||
'mod', // 不确定分类的修改
|
||||
'wip', // 开发中
|
||||
'types', // 类型修改
|
||||
'release' // 版本发布
|
||||
]
|
||||
],
|
||||
'subject-full-stop': [0, 'never'],
|
||||
'subject-case': [0, 'never']
|
||||
}
|
||||
}
|
|
@ -1,66 +0,0 @@
|
|||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/vue-next/pull/3399
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
404: typeof import('./src/components/Error/404.vue')['default']
|
||||
Avatars: typeof import('./src/components/Avatars/index.vue')['default']
|
||||
ComDetail: typeof import('./src/components/ComDetail/index.vue')['default']
|
||||
ComDialog: typeof import('./src/components/ComDialog/index.vue')['default']
|
||||
ComSearch: typeof import('./src/components/ComSearch/index.vue')['default']
|
||||
ComTable: typeof import('./src/components/ComTable/index.vue')['default']
|
||||
CountTo: typeof import('./src/components/CountTo/index.vue')['default']
|
||||
Echart: typeof import('./src/components/Echart/index.vue')['default']
|
||||
Editor: typeof import('./src/components/Editor/index.vue')['default']
|
||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElBacktop: typeof import('element-plus/es')['ElBacktop']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||
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']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
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']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
|
||||
ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTree: typeof import('element-plus/es')['ElTree']
|
||||
Loading: typeof import('element-plus/es')['ElLoadingDirective']
|
||||
ParentView: typeof import('./src/components/ParentView/index.vue')['default']
|
||||
Preview: typeof import('./src/components/Preview/index.vue')['default']
|
||||
Qrcode: typeof import('./src/components/Qrcode/index.vue')['default']
|
||||
Redirect: typeof import('./src/components/Redirect/index.vue')['default']
|
||||
Slot: typeof import('./src/components/ComTable/components/Slot.vue')['default']
|
||||
SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
|
||||
TableColumn: typeof import('./src/components/ComTable/components/TableColumn.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
|
@ -1,22 +0,0 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
/dist*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
|
@ -1,107 +0,0 @@
|
|||
module.exports = {
|
||||
title: 'vue-element-plus-admin',
|
||||
description: '种一棵树最好的时间是十年前,其次就是现在。',
|
||||
base: process.argv[2] === 'dev' ? '/' : '/dist-doc/', // 这是部署到github相关的配置
|
||||
// base: '/',
|
||||
// base: '/dist-doc2.0/',
|
||||
// base: '/ue/2019/doc/vue-standard/dist/',
|
||||
markdown: {
|
||||
lineNumbers: false // 代码块显示行号
|
||||
},
|
||||
themeConfig: {
|
||||
search: true, // 是否开启搜索
|
||||
searchMaxSuggestions: 10, // 搜索最大条数
|
||||
// 侧边栏
|
||||
sidebar: {
|
||||
'/guide/': [
|
||||
{
|
||||
title: '基础',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/guide/',
|
||||
'/guide/quick-start',
|
||||
'/guide/configuration',
|
||||
'/guide/router',
|
||||
'/guide/mock'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '进阶',
|
||||
collapsable: false,
|
||||
children: ['/guide/standard', '/guide/style', '/guide/role']
|
||||
}
|
||||
],
|
||||
'/components/': [
|
||||
{
|
||||
title: '组件',
|
||||
collapsable: false,
|
||||
children: ['/components/']
|
||||
},
|
||||
{
|
||||
title: '全局组件',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/components/svg-icon',
|
||||
'/components/com-table',
|
||||
'/components/com-search',
|
||||
'/components/com-dialog',
|
||||
'/components/com-detail'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '普通组件',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/components/echart',
|
||||
'/components/preview',
|
||||
'/components/avatars',
|
||||
'/components/highlight',
|
||||
'/components/editor',
|
||||
'/components/qrcode'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 导航栏
|
||||
nav: [
|
||||
{
|
||||
text: '首页',
|
||||
link: '/'
|
||||
},
|
||||
{
|
||||
text: '指南',
|
||||
link: '/guide/'
|
||||
},
|
||||
{
|
||||
text: '功能组件',
|
||||
link: '/components/'
|
||||
},
|
||||
{
|
||||
text: '更新日志',
|
||||
link: '/changLog/changLog'
|
||||
},
|
||||
{
|
||||
text: '预览',
|
||||
link: 'http://8.133.179.48:4000/dist-pro/'
|
||||
},
|
||||
{
|
||||
text: 'Github',
|
||||
link: 'https://github.com/kailong321200875/vue-element-plus-admin'
|
||||
},
|
||||
{
|
||||
text: 'Gitee',
|
||||
link: 'https://gitee.com/kailong110120130/vue-element-plus-admin'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
[
|
||||
'vuepress-plugin-typescript',
|
||||
{
|
||||
tsLoaderOptions: {
|
||||
// ts-loader 的所有配置项
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
|
@ -1,19 +0,0 @@
|
|||
---
|
||||
home: true
|
||||
actionText: 快速上手 →
|
||||
actionLink: /guide/
|
||||
features:
|
||||
- title: 技术栈
|
||||
details: 基于vue3、typescript4、vite2、element-plus构建
|
||||
- title: 组件封装
|
||||
details: 对常用功能进行组件化封装,统一维护。
|
||||
- title: 权限验证
|
||||
details: 根据权限动态加载路由,渲染侧边栏
|
||||
- title: 说明
|
||||
details: 本文档归纳出一些常见的开发规范,注重团队之间的协同开发,保证代码的可读性。
|
||||
- title: 积累
|
||||
details: 本文档会定期积累常见问题,知识点。
|
||||
- title: 持续更新
|
||||
details: 本文档将会持续更新,当做一个长期项目来维护,期望这个文档能够给开发人员带来帮助。
|
||||
footer: MIT Licensed | Copyright © 2021-present Archer
|
||||
---
|
|
@ -1,13 +0,0 @@
|
|||
# 更新日志
|
||||
|
||||
## 2.0.0
|
||||
|
||||
`2021-10-24`
|
||||
|
||||
### Features
|
||||
|
||||
- vite 版本发布
|
||||
|
||||
### Docs
|
||||
|
||||
- 更新对应文档
|
|
@ -1,46 +0,0 @@
|
|||
# 介绍
|
||||
|
||||
为了更好演示,`vue-element-plus-admin`对`element-ui`的所有组件进行了全局的按需引入注册,这样也就导致了打包之后可能会出现不需要的组件代码,开发者可以根据实际情况,去掉全局的按需引入,改为局部引入,或者删除不必要的全局注册,减少打包体积。具体代码可查看`src/element-ui/index.ts`。
|
||||
|
||||
除了 `element-ui` 中的组件进行了全局注册,本项目还全局注册了使用率比较高的组件,具体代码可查看`src/components/index.ts`,如下
|
||||
|
||||
```javaScript
|
||||
import Vue from 'vue'
|
||||
import SvgIcon from './SvgIcon/index.vue' // svg组件
|
||||
import Table from './Table/index.vue' // ComTable组件
|
||||
import Search from './Search/index.vue' // Search组件
|
||||
import Dialog from './Dialog/index.vue' // Dialog组件
|
||||
import Detail from './Detail/index.vue' // Detail组件
|
||||
|
||||
// register globally
|
||||
Vue.component('SvgIcon', SvgIcon)
|
||||
Vue.component('ComTable', Table)
|
||||
Vue.component('ComSearch', Search)
|
||||
Vue.component('ComDialog', Dialog)
|
||||
Vue.component('ComDetail', Detail)
|
||||
|
||||
import '@/assets/icons' // icon
|
||||
|
||||
```
|
||||
|
||||
`vue-element-plus-admin`的组件大部分没有进行全局注册。采用了哪里使用哪里引入的方式,如下
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<qrcode text="vue-element-plus-admin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Qrcode: () => import('_c/Qrcode/index.vue')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
|
@ -1,58 +0,0 @@
|
|||
# Avatars 头像组
|
||||
|
||||
头像组组件。
|
||||
|
||||
`Avatars` 组件代码位于`src/components/Avatars`
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<avatars :data="data" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { AvatarConfig } from '_c/Avatars/types'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Avatars: () => import('_c/Avatars/index.vue')
|
||||
},
|
||||
setup() {
|
||||
const data = ref<AvatarConfig[]>([
|
||||
{ text: '陈某某' },
|
||||
{ text: '李某某', type: 'success' },
|
||||
{ text: '张某某', type: 'danger' },
|
||||
{ text: '王某某', type: 'warning' },
|
||||
{ text: '龙某某' },
|
||||
{ text: '孙某某' },
|
||||
{ text: '刘某某' },
|
||||
{ text: '赵某某' }
|
||||
])
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ---------- | ------------------------------------- | ------- | ---------- | ------ |
|
||||
| data | 展示的数据,具体配置详见[下表](#Data) | array | — | — |
|
||||
| max | 最大展示数量,0 为不设置 | number | — | 0 |
|
||||
| showAvatar | 是否使用头像 | boolean | true/false | false |
|
||||
| tooltip | 是否显示完整名称 | boolean | false/true | true |
|
||||
|
||||
## Data<span id="Data"></span>
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ---- | ---------- | ------ | ---------------------- | ------ |
|
||||
| text | 展示的文字 | string | — | — |
|
||||
| type | 头像类型 | string | success/danger/warning | — |
|
||||
| url | 头像地址 | string | — | — |
|
|
@ -1,95 +0,0 @@
|
|||
# ComDetail 详情
|
||||
|
||||
用于详情预览的组件,基于`element-ui`的`Row Col`组件进行二次封装。
|
||||
|
||||
`ComDetail` 组件位于`src/components/Detail`
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<com-detail :data="data" :schema="schema" title="基础示例" message="辅助文字" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const data = reactive<IObj>({
|
||||
username: 'chenkl',
|
||||
nickName: '梦似花落。',
|
||||
age: 26,
|
||||
phone: '13655971xxxx',
|
||||
email: '502431556@qq.com',
|
||||
addr: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的地址',
|
||||
sex: '男',
|
||||
certy: '35058319940712xxxx'
|
||||
})
|
||||
const schema = ref<IObj>([
|
||||
{
|
||||
field: 'username',
|
||||
label: '用户名'
|
||||
},
|
||||
{
|
||||
field: 'nickName',
|
||||
label: '昵称'
|
||||
},
|
||||
{
|
||||
field: 'phone',
|
||||
label: '联系电话'
|
||||
},
|
||||
{
|
||||
field: 'email',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
field: 'addr',
|
||||
label: '地址',
|
||||
span: 24
|
||||
}
|
||||
])
|
||||
|
||||
return {
|
||||
data,
|
||||
schema
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------- | ----------------------------------------- | ------- | ----------------- | ------- |
|
||||
| title | 详情标题 | string | — | — |
|
||||
| collapsed | 是否可折叠 | boolean | true/false | true |
|
||||
| message | 辅助提示 | string | — | — |
|
||||
| border | 是否需要边框 | boolean | true/false | true |
|
||||
| data | 需要展示的数据 | object | — | — |
|
||||
| schema | 布局展示的数据,具体项详见[下表](#Schema) | array | — | [] |
|
||||
| vertical | 是否标题和内容各占一行 垂直布局 | boolean | false/true | false |
|
||||
| labelWidth | 标题宽度 | string | — | — |
|
||||
| labelAlign | 标题位置 | string | left/right/center | left |
|
||||
| borderColor | 边框颜色 | string | — | #f0f0f0 |
|
||||
| labelBg | 标题背景颜色 | string | — | #fafafa |
|
||||
|
||||
## Schema<span id="Schema"></span>
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----- | ---------------------------------- | ------ | ------- | ------ |
|
||||
| field | 字段名,与 data 中的数据项字段对应 | string | — | — |
|
||||
| label | 标题 | string | — | — |
|
||||
| span | 在一行中的占比 | number | [1, 24] | 12 |
|
||||
|
||||
## Slot
|
||||
|
||||
| name | 说明 |
|
||||
| -------------- | ---------------------- |
|
||||
| {field} | 标题内容 |
|
||||
| {field}Content | 对应字段需要展示的内容 |
|
|
@ -1,30 +0,0 @@
|
|||
# ComDialog 弹窗
|
||||
|
||||
为了保证 `弹窗` 样式的统一性,对 `element-ui` 的 `Dialog` 组件进行二次封装。
|
||||
|
||||
`ComDialog` 组件位于`src/components/Dialog`
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
<com-dialog v-model="visible" title="提示">
|
||||
<div style="height: 1000px;">
|
||||
我是弹窗内容
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="visible = false">确定</el-button>
|
||||
</template>
|
||||
</com-dialog>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
::: tip 提示
|
||||
除以下参数外,官方文档内的 `Attributes` 都支持,具体可以参考 [element Dailog](https://element.eleme.cn/#/zh-CN/component/dialog)
|
||||
:::
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| showFullscreen | 是否显示全屏按钮 | boolean | false/true | true |
|
||||
| draggable | 是否可拖拽 | boolean | false/true | true |
|
|
@ -1,53 +0,0 @@
|
|||
# ComSearch 查询
|
||||
|
||||
针对常用的查询业务场景,对 `element` 的 `Form` 组件进行二次封装。
|
||||
|
||||
只需传入 `data` 即可渲染整个查询组件。
|
||||
|
||||
`Search` 组件代码位于`src/components/Search`
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
<div class="searh">
|
||||
<com-search
|
||||
:data="data"
|
||||
@search-submit="searchSubmit"
|
||||
@reset-submit="resetSubmit"
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| labelWidth | 表单域标签的宽度,例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 | string | — | - |
|
||||
| labelPosition | 表单域标签的宽度的文字布局 | string | left/center/right | right |
|
||||
| hideRequiredAsterisk | 隐藏所有表单项的必选标记 | boolean | true/false | false |
|
||||
| data | 表单数据,详见[下表](#Data) | array | — | [] |
|
||||
| rules | 表单验证规则 | object | — | — |
|
||||
| showReset | 是否显示重置按钮 | boolean | false/true | true |
|
||||
| layout | 布局风格 | string | right/bottom/classic | classic |
|
||||
|
||||
### <span id="Data">Data</span>
|
||||
|
||||
::: tip 提示
|
||||
除以下参数外,官方文档内的 `表单组件` 的 `Attributes` 也都支持,具体可以参考 [form-item](https://element.eleme.cn/#/zh-CN/component/form)
|
||||
:::
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| field | 每个查询项的字段名 | string | — | — |
|
||||
| label | 每个查询项的标题 | string | — | — |
|
||||
| value | 每个查询项的值 | any | — | — |
|
||||
| itemType | 每个查询项的类型,根据此值渲染不同的组件,开发者可以进行扩展 | string | switch/input/select/radio/datePicker | — |
|
||||
| onChange | 是否为当前项进行数据变化监听 | boolean | true/false | false |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|---------- |-------- |-------- |
|
||||
| searchSubmit | 点击查询时的回调事件 | data |
|
||||
| resetSubmit | 点击重置时的回调事件 | data |
|
||||
| change | 查询项改变时的回调事件 | { field, value } |
|
|
@ -1,98 +0,0 @@
|
|||
# ComTable 表格
|
||||
|
||||
对 `element-ui` 中的 `Table` 组件进行二次封装,并把 `分页` 给结合进 `ComTable` 组件中。
|
||||
|
||||
数据渲染采用的是数据驱动,只需传入 `columns` 和 `data` 就可以进行最简单的数据展示。
|
||||
|
||||
`ComTable` 组件代码位于`src/components/Table`
|
||||
|
||||
更多示例,可以查看在线预览。
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<com-table :columns="columns" :data="tableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
field: 'date',
|
||||
label: '日期'
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '姓名'
|
||||
},
|
||||
{
|
||||
field: 'address',
|
||||
label: '地址'
|
||||
}
|
||||
]
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
columns,
|
||||
tableData
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
::: tip 提示
|
||||
除以下参数外,官方文档内的 `Attributes` 也都支持,具体可以参考 [element Table](https://element.eleme.cn/#/zh-CN/component/table)
|
||||
:::
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| columns | 表格列的配置描述,具体项见[下表](#Columns) | array | — | [] |
|
||||
| data | 需要渲染的表格数据 | array | — | [] |
|
||||
| selection | 是否多选 | boolean | true | false |
|
||||
| pagination | 是否展示分页,默认为 false,如果为 object 类型,则支持[element Pagination](https://element.eleme.cn/#/zh-CN/component/pagination)所有参数 | object/boolean | — | false |
|
||||
| reserveSelection | 仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key) | boolean | true | false |
|
||||
|
||||
## Columns<span id="Columns"></span>
|
||||
|
||||
::: tip 提示
|
||||
除以下参数外,官方文档内的 `Table-column` 的 `Attributes` 也都支持,具体可以参考 [element Table](https://element.eleme.cn/#/zh-CN/component/table)
|
||||
:::
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| field | 每列需要展示的字段名 | string | — | — |
|
||||
| label | 每列的表头名 | string | — | — |
|
||||
| slots | 使用 columns 时,可以通过该属性配置支持 slot 的属性,如 slots: { header: 'XXX', default: 'xxx' } | object | — | — |
|
|
@ -1,29 +0,0 @@
|
|||
# 图片裁剪 组件
|
||||
|
||||
`Cropper` 组件位于[src/components/Cropper](http://192.168.169.57:9000/scm/index.html#contentPanel;9IRMTD52f3;null;vue-doc/src/components/Cropper/index.vue;content)
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
// 引入
|
||||
import Cropper from '_c/Cropper'
|
||||
|
||||
// 使用
|
||||
<cropper @on-crop="handleCroped" />
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| src | string | — | — | 默认展示的图片地址 |
|
||||
| preview | boolean | true | false | 是否展示预览区域 |
|
||||
| moveStep | number | false | true | 是否禁用 |
|
||||
| clearable | boolean | 4 | — | 每次移动多少距离 |
|
||||
| cropButtonText | string | 裁剪 | — | 裁剪按钮文字 |
|
||||
|
||||
## 事件
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
|---------- |-------- |-------- |
|
||||
| on-crop | 裁剪时的回调事件 | base64 |
|
|
@ -1,47 +0,0 @@
|
|||
# Echart 图表
|
||||
|
||||
基于`echarts`二次封装的图表的组件,内置了主题色。
|
||||
|
||||
`Echart` 组件代码位于`src/components/Echart`
|
||||
|
||||
::: tip 提示
|
||||
需要给一个固定高度,才能展示出图表
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<echart :options="pieOptions" :height="'300px'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { pieOptions } from './echart-data'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Echart: () => import('_c/Echart/index.vue')
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
pieOptions
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | 图表类名 | string | — | chart |
|
||||
| width | 图表宽度 | string | — | 100% |
|
||||
| height | 图表高度 | string | — | 200px |
|
||||
| theme | 主题 | string | light/dark/default | default |
|
||||
| options | 图表的配置项,具体可参考[echarts](https://echarts.apache.org/zh/api.html#echarts) | object | — | — |
|
|
@ -1,69 +0,0 @@
|
|||
# Editor 富文本
|
||||
|
||||
基于 `wangeditor` 进行二次封装的富文本组件。
|
||||
|
||||
`Editor` 组件位于`src/components/Editor`
|
||||
|
||||
::: tip 提示
|
||||
如果该富文本组件无法满足业务需求,可以自行引入其他富文本插件。
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<editor :value="content" @change="handleChange" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Editor: () => import('_c/Editor/index.vue')
|
||||
},
|
||||
setup() {
|
||||
const content = ref<string>('默认展示数据')
|
||||
function handleChange(html: string, text: string) {
|
||||
console.log(html, text)
|
||||
}
|
||||
return {
|
||||
content,
|
||||
handleChange
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --------- | ------------------------------------------ | ------ | --------- | ------ |
|
||||
| value | 富文本内容 | string | — | — |
|
||||
| valueType | 富文本绑定的值的类型 | string | html/text | html |
|
||||
| config | wangeditor 配置项,具体详见[下表](#Config) | object | — | — |
|
||||
|
||||
## Config<span id="Config"></span>
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| height | 富文本高度 | number | — | 500 |
|
||||
| zIndex | 层级 | number | — | 0 |
|
||||
| placeholder | 提示文字 | string | — | 请输入文本 |
|
||||
| focus | 是否聚焦 | boolean | true/false | false |
|
||||
| onchangeTimeout | 几秒监听一次变化 | number | — | 1000 |
|
||||
| customAlert | 自定义提示 | function | — | — |
|
||||
| menus | 按钮菜单 | array | — | ['head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','list','justify','quote','emoticon','image','video','table','code','splitLine','undo','redo'] |
|
||||
| colors | 颜色 | array | — | ['#000000','#eeece0','#1c487f','#4d80bf'] |
|
||||
| fontNames | 字体 | array | — | ['黑体','仿宋','楷体','标楷体','华文仿宋','华文楷体','宋体','微软雅黑','Arial','Tahoma','Verdana','Times New Roman','Courier New'] |
|
||||
| lineHeights | 行间距 | array | — | ['1','1.15','1.6','2','2.5','3'] |
|
||||
| showFullScreen | 是否全屏 | boolean | true/false | false |
|
||||
|
||||
## Methods
|
||||
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ------- | --------- | ---------------------- |
|
||||
| getHtml | 获取 HTML | Function(html: string) |
|
||||
| getText | 获取 text | Function(text: string) |
|
||||
| getJson | 获取 Json | Function(json: object) |
|
|
@ -1,39 +0,0 @@
|
|||
# Highlight 文字高亮
|
||||
|
||||
文字高亮组件,用于突出显示文字。
|
||||
|
||||
`Highlight` 组件代码位于`src/components/Highlight`
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<highlight :keys="['vue-element-plus-admin']">
|
||||
vue-element-plus-admin内置了动态路由,权限验证,典型的业务模型,丰富的功能组件,并且提供了多页配置,开箱即用,可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型,也可以作为一个示例,用于学习。
|
||||
</highlight>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Highlight: () => import('_c/Highlight/index.vue')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----- | ------------ | ------ | ------ | ------- |
|
||||
| tag | 标签类型 | string | — | span |
|
||||
| keys | 关键字 | array | — | — |
|
||||
| color | 文字高亮颜色 | string | — | #2d8cf0 |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| -------- | ------------------ | -------- |
|
||||
| click | 点击高亮文字的回调 | key |
|
|
@ -1,36 +0,0 @@
|
|||
# MarkDown编辑器 组件
|
||||
|
||||
基于 `tui-editor` 进行二次封装的 `MarkDown编辑器` 组件。
|
||||
|
||||
`MarkDown` 组件位于[src/components/MarkDown](http://192.168.169.57:9000/scm/index.html#contentPanel;9IRMTD52f3;null;vue-doc/src/components/MarkDown/index.vue;content)
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
// 引入
|
||||
import MarkDown from '_c/MarkDown'
|
||||
|
||||
// 使用
|
||||
<mark-down ref="markdown" :content="content" height="600px" />
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| content | string | — | — | 编辑器内容 |
|
||||
| height | string | 400px | — | 编辑器高度 |
|
||||
| initialEditType | string | markdown | wysiwyg | 编辑器类型 |
|
||||
| hideToolBar | boolean | true | false | 是否隐藏工具栏 |
|
||||
| hideFooter | boolean | false | true | 是否隐藏底部操作栏 |
|
||||
| hideHeader | boolean | false | true | 是否隐藏头部操作栏 |
|
||||
| placeholder | string | 请输入文章标题 | — | 提示语 |
|
||||
| btnText | string | 发布 | — | 发布按钮文字 |
|
||||
| hideUi | boolean | false | true | 隐藏预览区域 |
|
||||
|
||||
## 事件
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
|---------- |-------- |-------- |
|
||||
| change | 编辑器内容改变时的回调 | data |
|
||||
| setMarkdown | 点击发布时的回调 | { title, value, html } |
|
|
@ -1,30 +0,0 @@
|
|||
# More 组件
|
||||
|
||||
显示更多组件。
|
||||
|
||||
`More` 组件位于[src/components/More](http://192.168.169.57:9000/scm/index.html#contentPanel;9IRMTD52f3;null;vue-doc/src/components/More/index.vue;content)
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
// 引入
|
||||
import More from '_c/More/index.vue'
|
||||
|
||||
// 使用
|
||||
<More
|
||||
:style-obj="{
|
||||
width: '600px',
|
||||
height: '100px',
|
||||
lineHeight: '28px'
|
||||
}"
|
||||
content="有两个年轻人同在一家车行里工作,两个人关系很好,以兄弟相称。他们在这家车行已经做了两年了,每天除了修理汽车外什么也没有。哥哥总不肯闲着,他一会儿扫地,一会儿擦玻璃,有时还帮助别人干活儿。弟弟却不这么勤快,没有急活儿的时候他总是懒洋洋地躺着。一天,车行里来了一位中年主顾,他说汽车出了点毛病,让他们给修理一下。弟弟刚刚吃完饭,正在休息呢,哪里肯干活。于是,哥哥走了过去,把弟弟手中的抹布接过来,给汽车做了检查。车子没什么大问题,就是很长时间没修养过了,于是他对那位先生说:“您放心地交给我吧,车子明天一定能修好。”客人听到这话,放心地走了。哥哥一刻不停地忙了起来,他不但修理好了汽车的毛病,还把汽车里里外外擦得一尘不染。这时,躺在一旁的弟弟嘲笑他说:“老兄,别太傻了,不该干的活儿也干了,那么勤快有什么用!”哥哥却笑了笑说:“反正我也没事做,擦擦车我并没有受损失呀,等明天顾客来取车时看到车子焕然一新心里一定很高兴。”第二天,那个顾客来取车了,他看到修好的汽车后非常吃惊,连声感谢修车的哥哥,并对他说:“我是一个大公司的董事长,你为我修车的这种勤快、细致、周到的精神,使我深受感动。我认为你是一个优秀的人,你愿意到我的公司去工作吗?”哥哥的命运从此发生了改变,不久,经过努力他当上了这个公司的部门经理;而弟弟却仍然在车行里做着他觉得枯燥的工作。"
|
||||
/>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| content | string | — | — | 内容 |
|
||||
| lineClamp | number | 1 | — | 默认超过几行之后隐藏 |
|
||||
| styleObj | object | — | — | 内容样式 |
|
|
@ -1,48 +0,0 @@
|
|||
# Preview 预览
|
||||
|
||||
图片预览组件,实现函数式调用组件,无需基于图片进行点击预览。
|
||||
|
||||
`Preview` 组件代码位于`src/components/Preview`
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { createImgPreview } from '_c/Preview'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const imgList = ref<IObj>([
|
||||
'https://img1.baidu.com/it/u=657828739,1486746195&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img0.baidu.com/it/u=3114228356,677481409&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img1.baidu.com/it/u=508846955,3814747122&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img1.baidu.com/it/u=3536647690,3616605490&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img1.baidu.com/it/u=4087287201,1148061266&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img2.baidu.com/it/u=3429163260,2974496379&fm=26&fmt=auto&gp=0.jpg'
|
||||
])
|
||||
function showHasImg(i: number) {
|
||||
createImgPreview({
|
||||
index: i,
|
||||
imageList: imgList.value
|
||||
})
|
||||
}
|
||||
return {
|
||||
imgList,
|
||||
showHasImg
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| -------- | ------------------ | -------- | ---------- | ------ |
|
||||
| index | 默认展示第几张图片 | number | — | 0 |
|
||||
| list | 需要预览的图片列表 | array | — | [] |
|
||||
| zIndex | 层级 | number | — | 2000 |
|
||||
| infinite | 是否无缝 | boolean | false/true | true |
|
||||
| onClose | 关闭时的回调 | function | — | — |
|
||||
| onSelect | 点击时的回调 | function | — | — |
|
|
@ -1,58 +0,0 @@
|
|||
# Qrcode 二维码
|
||||
|
||||
基于 `qrcode.js` 封装的二维码组件。
|
||||
|
||||
`Qrcode` 组件代码位于`src/components/Qrcode`
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<qrcode text="vue-element-plus-admin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Qrcode: () => import('_c/Qrcode/index.vue')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| text | 二维码内容 | string/array | — | — |
|
||||
| tag | 组件标签 | string | — | canvas |
|
||||
| options | qrcode.js 配置项 | object | — | — |
|
||||
| width | 二维码宽度 | number | — | 200 |
|
||||
| disabled | 是否过期 | boolean | true/false | false |
|
||||
| disabledText | 过期提示内容 | string | — | 二维码已失效 |
|
||||
| logo | logo 图标,如果为 object 类型,配置项详见[下表](#Logo) | object/string | — | — |
|
||||
|
||||
## Logo<span id="Logo"></span>
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | -------------------- | ------ | ------ | --------- |
|
||||
| logoSize | 二维码 logo 尺寸 | number | — | 0.15 |
|
||||
| bgColor | 二维码 logo 背景颜色 | string | — | #ffffff |
|
||||
| borderSize | 二维码 logo 边框尺寸 | number | — | 0.05 |
|
||||
| crossOrigin | 二维码 logo 跨域设置 | string | — | anonymous |
|
||||
| borderRadius | 二维码 logo 边框圆角 | number | — | 8 |
|
||||
| logoRadius | 二维码 logo 圆角 | number | — | 0 |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | ---------------------- | -------- |
|
||||
| done | 二维码加载成功后的回调 | dataURL |
|
||||
| click | 二维码点击后的回调 | — |
|
||||
| disabledClick | 二维码失效点击后的回调 | — |
|
|
@ -1,18 +0,0 @@
|
|||
# SvgIcon 图标
|
||||
|
||||
用于项目内组件的展示,基本支持所有图标库
|
||||
|
||||
`SvgIcon` 组件代码位于`src/components/SvgIcon`
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
<svg-icon icon-class="dashboard" class-name="disabled" />
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| iconClass | svg文件名,必填项 | string | - | - |
|
||||
| className | 自定义类名 | string | - | - |
|
|
@ -1,134 +0,0 @@
|
|||
# 介绍
|
||||
|
||||
[vue-element-plus-admin](https://github.com/kailong321200875/vue-element-plus-admin)是一个基于[vue3](https://cn.vuejs.org/index.html)、[typescript4](https://www.typescriptlang.org/)、[vite2](https://vitejs.cn/)、[element-ui](https://github.com/ElemeFE/element)的后台集成方案,内置了动态路由,权限验证,典型的业务模型,丰富的功能组件,开箱即用,可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型,也可以作为一个示例,用于学习。
|
||||
|
||||
::: tip 建议
|
||||
`vue-element-plus-admin`的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。如果需要二次开发,推荐使用`template`分支下的基础模版进行开发。
|
||||
:::
|
||||
|
||||
## 前序准备
|
||||
|
||||
你需要在本地安装[node](https://nodejs.org/en/)和[git](https://git-scm.com/)。本项目技术栈基于[ES2015+](https://es6.ruanyifeng.com/)、[typescript](https://www.typescriptlang.org/)、[vue](https://cn.vuejs.org/index.html)、[pinia](https://pinia.esm.dev/)、[vue-router](https://router.vuejs.org/zh/)、[axios](https://github.com/axios/axios)和[element-plus](https://github.com/element-plus/element-plus),所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。
|
||||
|
||||
## 功能
|
||||
|
||||
```sh
|
||||
- 登录 / 注销
|
||||
|
||||
- 权限验证
|
||||
- 页面权限
|
||||
- 按钮权限
|
||||
- 权限配置
|
||||
|
||||
- 多环境
|
||||
|
||||
- 全局功能
|
||||
- 三种不同风格 layout 布局
|
||||
- 引导页
|
||||
- 动态侧边栏(支持多级路由嵌套)
|
||||
- 动态面包屑
|
||||
- 快捷导航(标签页)
|
||||
- Svg Sprite 图标
|
||||
- 本地 mock 数据
|
||||
- Screenfull全屏
|
||||
|
||||
- 功能组件
|
||||
- 图表
|
||||
- 图片预览
|
||||
- 消息提示
|
||||
- 弹窗
|
||||
- 详情
|
||||
- 头像组
|
||||
- 文字高亮
|
||||
- 查询
|
||||
- 富文本编辑器
|
||||
- 二维码
|
||||
- 水印
|
||||
|
||||
- 表格
|
||||
- 基础表格
|
||||
- 分页表格
|
||||
- 带斑马纹表格
|
||||
- 带边框表格
|
||||
- 带状态表格
|
||||
- 固定表头
|
||||
- 固定列
|
||||
- 固定列和表头
|
||||
- 流体高度
|
||||
- 多级表头
|
||||
- 单选
|
||||
- 多选
|
||||
- 排序
|
||||
- 筛选
|
||||
- 展开行
|
||||
- 树形数据与懒加载
|
||||
- 自定义表头
|
||||
- 表尾合计行
|
||||
- 合并行或列
|
||||
- 自定义索引
|
||||
|
||||
- 多级菜单缓存
|
||||
|
||||
- 综合实例
|
||||
- 列表综合实例-弹窗
|
||||
- 列表综合实例-页面
|
||||
|
||||
- 权限管理
|
||||
- 用户管理
|
||||
- 角色管理
|
||||
```
|
||||
|
||||
## 目录结构
|
||||
|
||||
```sh
|
||||
.
|
||||
├── public # 静态资源
|
||||
├── src # 项目代码
|
||||
│ ├── assets # 静态资源
|
||||
│ ├── axios-config # axios配置
|
||||
│ ├── components # 公用组件
|
||||
│ ├── directive # 自定义指令
|
||||
│ ├── hooks # 常用hooks
|
||||
│ ├── layout # 布局组件
|
||||
│ ├── plugins # 外部插件
|
||||
│ ├── mock # 模拟数据
|
||||
│ ├── router # 路由配置
|
||||
│ ├── store # 状态管理
|
||||
│ ├── styles # 全局样式
|
||||
│ ├── utils # 全局工具类
|
||||
│ ├── views # 路由页面
|
||||
│ ├── vue-bus # 跨组件通信
|
||||
│ ├── App.vue # 入口vue文件
|
||||
│ ├── env.d.ts # vue全局声明
|
||||
│ ├── global.d.ts # 业务代码全局声明
|
||||
│ ├── main.ts # 主入口文件
|
||||
│ └── permission.ts # 路由拦截
|
||||
├── .babelrc # babel配置
|
||||
├── .editorconfig # 编辑器配置
|
||||
├── .eslintignore # eslint 忽略配置项
|
||||
├── .eslintrc # eslint 配置文件
|
||||
├── .gitignore # git 忽略提交配置文件
|
||||
├── .postcssrc.js # postcss 配置文件
|
||||
├── .prettierrc.js # 代码格式 配置文件
|
||||
├── .stylelintignore # stylelint 忽略文件
|
||||
├── CHANGLOG.md # 更新日志
|
||||
├── commitlint.config.js # git commit 配置文件
|
||||
├── package.json
|
||||
├── README.md
|
||||
├── stylelint.config # stylelint配置文件
|
||||
├── tsconfig.json # ts 配置文件
|
||||
├── vite.config.ts # vite配置
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
由于 Vue 3 不再支持 IE11,vue-element-plus-admin 也不支持 IE。
|
||||
|
||||
| [<img src="https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --- | --- | --- | --- |
|
||||
| Edge ≥ 79 | Firefox ≥ 78 | Chrome ≥ 64 | Safari ≥ 12 |
|
||||
|
||||
## IDE推荐设置
|
||||
|
||||
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
|
|
@ -1,154 +0,0 @@
|
|||
# 项目配置
|
||||
|
||||
## 环境变量配置
|
||||
|
||||
在项目中,难免会碰到需要在不同环境下做不同的事,这时候,就需要自己去配置环境变量。目前`vue-element-plus-admin`提供了四种环境变量。除了`.env.base`是针对开发的时候,其他三种环境变量是针对打包的时候去构建不同环境的。目前主要的一个区别就是为了区分出接口前缀。
|
||||
|
||||
开发人员可以根据实际项目情况去进行扩展改造。
|
||||
|
||||
环境变量文件都存放更目录下的`.env.xx`文件中。
|
||||
|
||||
::: tip 提示
|
||||
获取全局环境变量:import.meta.env
|
||||
:::
|
||||
|
||||
### .env.base
|
||||
|
||||
当运行`npm run dev`的时候,默认取的是`.env.base`中的环境变量以及参数。
|
||||
|
||||
```javascript
|
||||
// 环境
|
||||
NODE_ENV=development
|
||||
// 接口环境
|
||||
VITE_API_BASEPATH='base'
|
||||
```
|
||||
|
||||
### .env.dev
|
||||
|
||||
当运行`npm run build:dev`的时候,默认取的是`.env.dev`中的环境变量以及参数,打包开发环境的项目代码,适用于开发人员的自我测试。
|
||||
|
||||
```javascript
|
||||
// 环境
|
||||
NODE_ENV=production
|
||||
// 接口环境
|
||||
VITE_API_BASEPATH='dev'
|
||||
```
|
||||
|
||||
### .env.test
|
||||
|
||||
当运行`npm run build:test`的时候,默认取的是`.env.test`中的环境变量以及参数,打包测试环境的项目代码,适用于测试人员进行项目测试。
|
||||
|
||||
```javascript
|
||||
// 环境
|
||||
NODE_ENV=production
|
||||
// 接口环境
|
||||
VITE_API_BASEPATH='test'
|
||||
```
|
||||
|
||||
### .env.pro
|
||||
|
||||
当运行`npm run build:pro`的时候,默认取的是`.env.pro`中的环境变量以及参数,打包生产环境的项目代码,用于上线交付。
|
||||
|
||||
```javascript
|
||||
// 环境
|
||||
NODE_ENV=production
|
||||
// 接口环境
|
||||
VITE_API_BASEPATH='pro'
|
||||
```
|
||||
|
||||
## 主题色和样式配置
|
||||
|
||||
主要用于配置侧边栏菜单和顶部菜单的主题色以及`layout`整体布局
|
||||
|
||||
侧边栏菜单和顶部菜单的样式主要代码位置位于`src/styles/sidebar.less`
|
||||
|
||||
目前`vue-element-plus-admin`的布局和主题采用的是`css变量`,如果需要更,可在`src/styles/var.less`中进行更改,更改后将影响整个项目的主题和布局。
|
||||
|
||||
::: tip 提示
|
||||
目前并没有开放主题更改,只能手动在代码上进行变更,后续也会针对这个需求去进行主题的改造。
|
||||
:::
|
||||
|
||||
```css
|
||||
:root {
|
||||
--main-color: #018ffb; // 主颜色
|
||||
|
||||
// Silder
|
||||
--menu-text-color: #bfcbd9; // 左侧菜单字体颜色
|
||||
--menu-active-text-color: #fff; // 左侧菜单选中字体颜色
|
||||
--menu-active-background-color: #2d8cf0; // 左侧菜单选中背景颜色
|
||||
--menu-background-color: #001529; // 左侧菜单背景颜色
|
||||
--sub-menu-background-color: #1f2d3d; // 左侧子菜单背景颜色
|
||||
--sub-menu-hover-color: #2d8cf0; // 左侧子菜单悬停字体颜色
|
||||
--sub-menu-active-text-color: #fff; // 左侧子菜单选中字体颜色
|
||||
--menu-width: 200px; // 左侧菜单宽度
|
||||
--menu-min-width: 64px; // 左侧菜单最小宽度
|
||||
|
||||
// topSider
|
||||
--top-sider-height: 60px; // 顶部菜单高度,最低60px,element的最小高度。
|
||||
--top-menu-text-color: #303133; // 顶部菜单字体颜色
|
||||
--top-menu-active-text-color: #2d8cf0; // 顶部菜单选中字体颜色
|
||||
--top-menu-active-background-color: #fff; // 顶部菜单选中背景颜色
|
||||
--top-menu-background-color: #fff; // 顶部菜单背景颜色
|
||||
--top-sub-menu-background-color: #1f2d3d; // 顶部子菜单背景颜色
|
||||
--top-sub-menu-hover-color: #2d8cf0; // 顶部子菜单悬停字体颜色
|
||||
--top-sub-menu-active-text-color: #2d8cf0; // 顶部子菜单选中字体颜色
|
||||
|
||||
// meunTab
|
||||
--menu-tab-width: 90px; // 菜单tab宽度
|
||||
--menu-tab-item-height: 70px; // 菜单子tab高度
|
||||
--menu-tab-background-color: #fff; // 菜单tab背景颜色
|
||||
--menu-tab-text-color: #000; // 菜单tab字体颜色
|
||||
--menu-tab-active-background-color: #2d8cf0; // 菜单tab选中背景颜色
|
||||
--menu-tab-active-text-color: #fff; // 菜单tab选中字体颜色
|
||||
|
||||
// menuTopTab
|
||||
--menu-top-tab-width: 120px; // 顶部菜单tab宽度
|
||||
--menu-top-tab-background-color: #fff; // 顶部菜单tab背景颜色
|
||||
--menu-top-tab-text-color: #000; // 顶部菜单tab字体颜色
|
||||
--menu-top-tab-active-background-color: #2d8cf0; // 顶部菜单选中背景颜色
|
||||
--menu-top-tab-active-text-color: #fff; // 顶部菜单选中字体颜色
|
||||
|
||||
// navbar
|
||||
--navbar-height: 40px; // navbar高度
|
||||
|
||||
// tagsView
|
||||
--tags-view-height: 40px; // 标签页高度
|
||||
--tag-background-color: #fbfbfb; // 标签页背景颜色
|
||||
--tag-active-background-color: #fff; // 标签页选中背景颜色
|
||||
|
||||
// content
|
||||
--content-background-color: #fff; // 展示区域背景颜色
|
||||
--app-background-color: #f5f7f9; // 整体背景颜色
|
||||
|
||||
// html body
|
||||
--content-min-width: 992px; // 项目最小宽度
|
||||
}
|
||||
```
|
||||
|
||||
## 项目配置
|
||||
|
||||
::: tip 提示
|
||||
项目配置用于配置项目内展示的内容/布局/文本等效果,存于 `pinia` 中。
|
||||
|
||||
文件位置`src/store/modules/app.ts`,更改保存之后将会立即作用于整个项目中,开发者可根据实际项目进行扩展。
|
||||
:::
|
||||
|
||||
```javaScript
|
||||
collapsed: false, // 菜单栏是否栏缩收
|
||||
showLogo: true, // 是否显示logo
|
||||
showTags: true, // 是否显示标签栏
|
||||
showNavbar: true, // 是否显示navbar
|
||||
fixedHeader: true, // 是否固定header
|
||||
layout: 'Classic', // layout布局
|
||||
showBreadcrumb: true, // 是否显示面包屑
|
||||
showHamburger: true, // 是否显示侧边栏缩收按钮
|
||||
showScreenfull: true, // 是否全屏按钮
|
||||
showUserInfo: true, // 是否显示用户头像
|
||||
title: 'vue-element-plus-admin', // 标题
|
||||
logoTitle: 'vue-ElPlus-admin', // logo标题
|
||||
userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段,避免与其他项目冲突
|
||||
greyMode: false, // 是否开始灰色模式,用于特殊悼念日
|
||||
showBackTop: true, // 是否显示回到顶部
|
||||
showMenuTab: false, // 是否固定一级菜单
|
||||
requestTime: false // 是否在接口调用时添加时间戳,避免IE缓存
|
||||
```
|
|
@ -1,364 +0,0 @@
|
|||
# Mock 与联调
|
||||
|
||||
## Mock
|
||||
|
||||
本项目中的接口采用的是`Mock.js`配合`axios`进行接口对接模拟,默认是所有环境下都开启`mock`。如需不需要,可以删除`src/main.ts`中引入`mock`的代码。
|
||||
|
||||
具体配置代码可查看`src/mock/index.ts`
|
||||
|
||||
::: warning 注意
|
||||
自定义`mock`接口的时候,可能会出现跨域的问题,这时候开发者可以自行在`vite.config.ts`中自行代理。
|
||||
|
||||
Mock的模拟请求,在浏览器中是看不到请求记录的,这点也是一个弊端,开发者只能通过代码打印的形式去查看返回的结果,后续考虑还有没有更优的方案。
|
||||
:::
|
||||
|
||||
`mock`接口的写法可参考`src/mock/example/index.ts`
|
||||
|
||||
```javaScript
|
||||
import Mock from 'mockjs'
|
||||
import { toAnyString } from '@/utils'
|
||||
|
||||
let List: any[] = []
|
||||
const count = 100
|
||||
|
||||
const baseContent =
|
||||
'<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
List.push(
|
||||
Mock.mock({
|
||||
id: toAnyString(),
|
||||
// timestamp: +Mock.Random.date('T'),
|
||||
author: '@first',
|
||||
title: '@title(5, 10)',
|
||||
content: baseContent,
|
||||
importance: '@integer(1, 3)',
|
||||
display_time: '@datetime',
|
||||
pageviews: '@integer(300, 5000)'
|
||||
// image_uri
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
export default [
|
||||
// 列表接口
|
||||
{
|
||||
url: 'http://mockjs.test.cn/example/list',
|
||||
type: 'get',
|
||||
response: (config: any) => {
|
||||
const { title, pageIndex, pageSize } = config.query
|
||||
|
||||
const mockList = List.filter((item) => {
|
||||
if (title && item.title.indexOf(title) < 0) return false
|
||||
return true
|
||||
})
|
||||
const pageList = mockList.filter(
|
||||
(item, index) =>
|
||||
index < pageSize * pageIndex && index >= pageSize * (pageIndex - 1)
|
||||
)
|
||||
|
||||
return {
|
||||
code: '0000',
|
||||
data: {
|
||||
total: mockList.length,
|
||||
list: pageList
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 删除接口
|
||||
{
|
||||
url: 'http://mockjs.test.cn/example/delete',
|
||||
type: 'post',
|
||||
response: (config: any) => {
|
||||
const ids = config.body.ids
|
||||
if (!ids) {
|
||||
return {
|
||||
code: '500',
|
||||
message: '请选择需要删除的数据'
|
||||
}
|
||||
} else {
|
||||
let i = List.length
|
||||
while (i--) {
|
||||
if (ids.indexOf(List[i].id) !== -1) {
|
||||
List.splice(i, 1)
|
||||
}
|
||||
}
|
||||
return {
|
||||
code: '0000',
|
||||
data: 'success'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 详情接口
|
||||
{
|
||||
url: 'http://mockjs.test.cn/example/detail',
|
||||
type: 'get',
|
||||
response: (config: any) => {
|
||||
const { id } = config.query
|
||||
for (const example of List) {
|
||||
if (example.id === id) {
|
||||
return {
|
||||
code: '0000',
|
||||
data: example
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 保存接口
|
||||
{
|
||||
url: 'http://mockjs.test.cn/example/save',
|
||||
type: 'post',
|
||||
response: (config: any) => {
|
||||
const data = config.body
|
||||
if (!data.id) {
|
||||
List = [
|
||||
Object.assign(data, {
|
||||
id: toAnyString(),
|
||||
importance: Number(data.importance)
|
||||
})
|
||||
].concat(List)
|
||||
return {
|
||||
code: '0000',
|
||||
data: 'success'
|
||||
}
|
||||
} else {
|
||||
List.map((item) => {
|
||||
if (item.id === data.id) {
|
||||
for (const key in item) {
|
||||
if (key === 'importance') {
|
||||
item[key] = Number(data[key])
|
||||
} else {
|
||||
item[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
return {
|
||||
code: '0000',
|
||||
data: 'success'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
```
|
||||
|
||||
## Axios
|
||||
|
||||
本项目中的所有接口请求都是基于[axios.js](https://github.com/axios/axios)来进行的。
|
||||
|
||||
为了便于后期的维护,本项目中对`axios`进行了二次封装,从而可以对接口请求进行统一拦截。
|
||||
|
||||
### 配置项
|
||||
|
||||
同时,可供了一些`axios`的全局配置,具体代码`src/axios-config/config.ts`,开发者可自行更改扩展。
|
||||
|
||||
```typeScript
|
||||
/**
|
||||
* request全局配置
|
||||
*/
|
||||
|
||||
const config: {
|
||||
base_url: {
|
||||
base: string
|
||||
dev: string
|
||||
pro: string
|
||||
test: string
|
||||
}
|
||||
result_code: number | string
|
||||
default_headers:
|
||||
| 'application/json'
|
||||
| 'application/x-www-form-urlencoded'
|
||||
| 'multipart/form-data'
|
||||
request_timeout: number
|
||||
} = {
|
||||
/**
|
||||
* api请求基础路径
|
||||
*/
|
||||
base_url: {
|
||||
// 开发环境接口前缀
|
||||
base: 'http://mockjs.test.cn',
|
||||
|
||||
// 打包开发环境接口前缀
|
||||
dev: 'http://mockjs.test.cn',
|
||||
|
||||
// 打包生产环境接口前缀
|
||||
pro: 'http://mockjs.test.cn',
|
||||
|
||||
// 打包测试环境接口前缀
|
||||
test: 'http://mockjs.test.cn'
|
||||
},
|
||||
|
||||
/**
|
||||
* 接口成功返回状态码
|
||||
*/
|
||||
result_code: '0000',
|
||||
|
||||
/**
|
||||
* 接口请求超时时间
|
||||
*/
|
||||
request_timeout: 60000,
|
||||
|
||||
/**
|
||||
* 默认接口请求类型
|
||||
* 可选值:application/x-www-form-urlencoded multipart/form-data
|
||||
*/
|
||||
default_headers: 'application/json'
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
### 请求方法
|
||||
|
||||
为了便于维护,本项目中对所有请求方式的接口进行封装,开发者只需要参数对应参数即可使用如`get`、`post`请求。
|
||||
|
||||
具体代码`src/axios-config/index.ts`,开发者可自行更改扩展。
|
||||
|
||||
```typeScript
|
||||
import request from './request'
|
||||
|
||||
import { appStore } from '@/store/modules/app'
|
||||
|
||||
import config from './config'
|
||||
|
||||
import { AxiosPromise, ResponseType } from 'axios'
|
||||
|
||||
const { default_headers } = config
|
||||
|
||||
export interface Config {
|
||||
params?: any
|
||||
data?: any
|
||||
url?: string
|
||||
method?: 'get' | 'post' | 'delete' | 'put'
|
||||
headersType?: string
|
||||
responseType?: ResponseType
|
||||
}
|
||||
|
||||
function fetch({
|
||||
url,
|
||||
method,
|
||||
params,
|
||||
data,
|
||||
headersType,
|
||||
responseType
|
||||
}: Config): AxiosPromise {
|
||||
return request({
|
||||
url: url,
|
||||
method,
|
||||
params: appStore.requestTime
|
||||
? { time: new Date().getTime(), ...(params || {}) }
|
||||
: params,
|
||||
data,
|
||||
responseType: responseType,
|
||||
headers: {
|
||||
'Content-Type': headersType || default_headers
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default fetch
|
||||
|
||||
```
|
||||
|
||||
### 请求拦截
|
||||
|
||||
具体代码`src/axios-config/request.ts`,开发者可自行更改扩展。
|
||||
|
||||
``` javascript
|
||||
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
|
||||
|
||||
import { Message } from '_c/Message'
|
||||
|
||||
import qs from 'qs'
|
||||
|
||||
import config from './config'
|
||||
|
||||
const { result_code, base_url } = config
|
||||
|
||||
export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH as string]
|
||||
|
||||
// 创建axios实例
|
||||
const service: AxiosInstance = axios.create({
|
||||
baseURL: PATH_URL, // api 的 base_url
|
||||
timeout: config.request_timeout // 请求超时时间
|
||||
})
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
if (
|
||||
config.method === 'post' &&
|
||||
(config.headers as any)['Content-Type'] === 'application/x-www-form-urlencoded'
|
||||
) {
|
||||
config.data = qs.stringify(config.data)
|
||||
}
|
||||
// get参数编码
|
||||
if (config.method === 'get' && config.params) {
|
||||
let url = config.url as string
|
||||
url += '?'
|
||||
const keys = Object.keys(config.params)
|
||||
for (const key of keys) {
|
||||
if (config.params[key] !== void 0 && config.params[key] !== null) {
|
||||
url += `${key}=${encodeURIComponent(config.params[key])}&`
|
||||
}
|
||||
}
|
||||
url = url.substring(0, url.length - 1)
|
||||
config.params = {}
|
||||
config.url = url
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
// Do something with request error
|
||||
console.log(error) // for debug
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response 拦截器
|
||||
service.interceptors.response.use(
|
||||
(response: AxiosResponse<any>) => {
|
||||
if (response.config.responseType === 'blob') {
|
||||
// 如果是文件流,直接过
|
||||
return response
|
||||
} else if (response.data.code === result_code) {
|
||||
return response.data
|
||||
} else {
|
||||
Message.error(response.data.message)
|
||||
}
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.log('err' + error) // for debug
|
||||
Message.error(error.message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
|
||||
```
|
||||
|
||||
## Api管理
|
||||
|
||||
在之前,我一直在纠结,`api`接口到底是集中管理,还是分模块各自管理,在之后的几个公司项目的实践中,在项目越来越大,一个模块有可能调用了几十个接口,那这时候在集中管理`api`,会导致`api`的来源不明确,不利于查找对应`api`接口。所以现在比较偏向分模块进行`api`管理,这样更便于后期的维护,各模块只关心和维护模块中使用的`api`接口。
|
||||
|
||||
```typeScript
|
||||
import fetch from '@/axios-config'
|
||||
|
||||
export const loginApi = ({ data }: any) => {
|
||||
return fetch({ url: '/user/login', method: 'post', data })
|
||||
}
|
||||
|
||||
export const getRoleDetApi = ({ params }: any) => {
|
||||
return fetch({ url: '/role/detail', method: 'get', params })
|
||||
}
|
||||
|
||||
```
|
|
@ -1,101 +0,0 @@
|
|||
# 快速上手
|
||||
|
||||
::: tip 提示
|
||||
本项目需要[Node.js](https://nodejs.org/en/)版本>=14
|
||||
:::
|
||||
|
||||
## 代码获取
|
||||
|
||||
::: warning 注意
|
||||
注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格,否则安装依赖后启动会出错。
|
||||
:::
|
||||
|
||||
```sh
|
||||
# clone 代码
|
||||
git https://github.com/kailong321200875/vue-element-plus-admin.git
|
||||
```
|
||||
|
||||
## 安装
|
||||
|
||||
### 安装 Node.js
|
||||
|
||||
如果您电脑未安装[Node.js](https://nodejs.org/en/),请安装它。
|
||||
|
||||
#### 验证
|
||||
|
||||
```sh
|
||||
# 出现相应npm版本即可
|
||||
npm -v
|
||||
|
||||
# 出现相应node版本即可
|
||||
node -v
|
||||
```
|
||||
|
||||
### 安装依赖
|
||||
|
||||
推荐使用[Yarn](https://github.com/yarnpkg/yarn)进行依赖安装。
|
||||
|
||||
在项目根目录下,打开命令窗口执行,耐心等待安装完成即可
|
||||
|
||||
```sh
|
||||
# 安装依赖
|
||||
yarn
|
||||
```
|
||||
|
||||
::: tip 提示
|
||||
安装依赖时`husky`安装失败
|
||||
|
||||
请查看你的源码是否从`github`直接下载的,直接下载是没有`.git`文件夹的,而`husky`需要依赖`git`才能安装。此时需使用`git init`初始化项目,再尝试重新安装即可。
|
||||
|
||||
或者,当前安装依赖的命令框,没有`git`环境,请确保存在`git`环境。
|
||||
:::
|
||||
|
||||
## 运行项目
|
||||
|
||||
```sh
|
||||
# 运行项目
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## npm scripts
|
||||
|
||||
```sh
|
||||
"scripts": {
|
||||
# 安装所有依赖
|
||||
"i:all": "npm run i && npm run docs:i",
|
||||
# 安装项目依赖
|
||||
"i": "yarn install",
|
||||
# 启动项目
|
||||
"dev": "vite --mode base",
|
||||
# 打包生产环境
|
||||
"build:pro": "vue-tsc --noEmit && vite build --mode pro",
|
||||
# 打包开发环境
|
||||
"build:dev": "vue-tsc --noEmit && vite build --mode dev",
|
||||
# 打包测试环境
|
||||
"build:test": "vue-tsc --noEmit && vite build --mode test",
|
||||
# 本地预览打包后的文件
|
||||
"serve": "vite preview",
|
||||
# 检测所有依赖更新
|
||||
"check": "npx npm-check-updates",
|
||||
# 删除所有的node包
|
||||
"clean": "npx rimraf docs/node_modules && npx rimraf node_modules",
|
||||
# 删除文档的node包
|
||||
"clean:docs": "npx rimraf docs/node_modules",
|
||||
# 删除主依赖
|
||||
"clean:main": "npx rimraf node_modules",
|
||||
# eslint检测修复
|
||||
"lint": "eslint --fix --ext .js,.ts,.vue ./src",
|
||||
# prettier格式化
|
||||
"format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
|
||||
# stylelint 格式化
|
||||
"lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
|
||||
# 提交前的统一格式化
|
||||
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
|
||||
# 只对已提交文件进行格式化
|
||||
"lint:pretty": "pretty-quick --staged",
|
||||
# husky初始化
|
||||
"postinstall": "husky install",
|
||||
# ts 类型检测
|
||||
"ts:check": "vue-tsc --noEmit"
|
||||
}
|
||||
```
|
|
@ -1,169 +0,0 @@
|
|||
# 权限配置
|
||||
|
||||
## 介绍
|
||||
|
||||
在实际开发中,我们经常需要根据项目需求进行一个权限的控制,例如:菜单的权限,页面的按钮权限,这样做的好处是可以让每个用户都能专注于自己的业务。
|
||||
|
||||
本系项目前提供了两种权限控制的示例,当然,都是比较简单的,只是给开发者提供一点思路和借鉴而已。一般来讲,权限控制可以是前端控制,也可以是后端控制。两种都有自个的优势:
|
||||
|
||||
前端控制权限,那本质上就是以静态路由表为准,后端接口只提供简单的配置规则,然后有前端进行循环遍历,筛选出所需要的路由,然后进行动态路由的生成。优势在于比较快捷,所有的配置都已经在静态路由表中配置好了。劣势就是不太灵活,假如需要换下菜单的顺序或者更改菜单的名称,都需要前端这边修改完之后重新打包部署。
|
||||
|
||||
## 前端控制权限
|
||||
|
||||
我们可以看下本项目的前端路由控制逻辑,具体代码在`src/views/role-demo/role/components/InfoWrite.vue`
|
||||
|
||||

|
||||
|
||||
前端控制的例子的界面相对简单,我们直接看保存之后的逻辑:
|
||||
|
||||
``` JavaScript
|
||||
// 获取所有被选中节点,由于是前端渲染,所以只要保存一维数组就行
|
||||
form.checkedNodes = (tree.value as any).getCheckedNodes(false, true)
|
||||
console.log(JSON.stringify(form.checkedNodes))
|
||||
// 获取所有被选中的keys,便于渲染是否选中
|
||||
form.checkedkeys = (tree.value as any).getCheckedKeys()
|
||||
console.log(JSON.stringify(form.checkedkeys))
|
||||
|
||||
```
|
||||
|
||||
我们通过`Element-ui Tree`组件提供的API,可以轻松的获取到被选中的数据。之后就可以调用后端接口进行权限数据的保存了,当然,开发者可以根据实际情况进行扩展,流程大体是一致的。
|
||||
|
||||
之后,用户登录的时候,我们就可以拿到对应的权限数据,进行动态渲染了。权限过滤的逻辑主要在`src/store/modules/permission.ts`中的`generateRoutes`方法:
|
||||
|
||||
``` JavaScript
|
||||
// 路由过滤,主要用于权限控制
|
||||
function generateRoutesFn(routes: AppRouteRecordRaw[], basePath = '/'): AppRouteRecordRaw[] {
|
||||
const res: AppRouteRecordRaw[] = []
|
||||
|
||||
for (const route of routes) {
|
||||
// skip some route
|
||||
if (route.meta && route.meta.hidden && !route.meta.showMainRoute) {
|
||||
console.log(route)
|
||||
continue
|
||||
}
|
||||
|
||||
let onlyOneChild: Nullable<string> = null
|
||||
|
||||
if (route.children && route.children.length === 1 && !route.meta.alwaysShow) {
|
||||
onlyOneChild = (
|
||||
isExternal(route.children[0].path)
|
||||
? route.children[0].path
|
||||
: path.resolve(path.resolve(basePath, route.path), route.children[0].path)
|
||||
) as string
|
||||
}
|
||||
|
||||
let data: Nullable<IObj> = null
|
||||
|
||||
// 如不需要路由权限,可注释以下逻辑
|
||||
// 权限过滤,通过获取登录信息里面的角色权限,动态的渲染菜单。
|
||||
const list = wsCache.get(appStore.getUserInfo).checkedNodes
|
||||
// 开发者可以根据实际情况进行扩展
|
||||
for (const item of list) {
|
||||
// 通过路径去匹配
|
||||
if (isExternal(item.path) && (onlyOneChild === item.path || route.path === item.path)) {
|
||||
data = Object.assign({}, route)
|
||||
} else {
|
||||
const routePath = path.resolve(basePath, onlyOneChild || route.path)
|
||||
if (routePath === item.path || (route.meta && route.meta.followRoute === item.path)) {
|
||||
data = Object.assign({}, route)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 如不需要路由权限,解注释下面一行
|
||||
// data = Object.assign({}, route)
|
||||
|
||||
// recursive child routes
|
||||
if (route.children && data) {
|
||||
data.children = generateRoutesFn(route.children, path.resolve(basePath, data.path))
|
||||
}
|
||||
if (data) {
|
||||
res.push(data as AppRouteRecordRaw)
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
```
|
||||
|
||||
::: tip 提示
|
||||
由于是前端控制,所以我们存储在后端的权限数据,可以是一维数组,或者直接拿被选中的keys进行过滤,这个也是完全根据实际情况来的。
|
||||
:::
|
||||
|
||||
## 后端控制权限
|
||||
|
||||
由于在静态路由表配置中,我们会把一些相关展示配置放在`meta`中,如果是以后端控制为主,我们项目中的静态路由表基本上没什么作用了。我们需要把`meta`中的配置放到后端中,有后端去统一管理。基本上,前端静态路由表就没什么用了。
|
||||
|
||||
我们可以看下本项目的后路由控制逻辑,具体代码在`src/views/role-demo/role/components/InfoWrite2.vue`
|
||||
|
||||

|
||||
|
||||
由于是后端控制为主,所以存储在后端就是以树形的方式存储了,便于我们拿到数据之后直接渲染,格式大致如下:
|
||||
|
||||
``` JavaScript
|
||||
{
|
||||
path: '/components-demo',
|
||||
component: '#',
|
||||
redirect: '/components-demo/echarts',
|
||||
name: 'ComponentsDemo',
|
||||
meta: {
|
||||
title: '功能组件',
|
||||
icon: 'component',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'echarts',
|
||||
component: 'views/components-demo/echarts/index',
|
||||
name: 'EchartsDemo',
|
||||
meta: {
|
||||
title: '图表'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
`component`不再是直接加载路由文件了,而是以字符串的形式存在,之后当我们在渲染的时候,才会动态去加载对应的路由文件。
|
||||
|
||||
权限过滤的逻辑主要在`src/store/modules/permission.ts`中的`getFilterRoutes`方法:
|
||||
|
||||
``` JavaScript
|
||||
// 模拟后端过滤路由
|
||||
function getFilterRoutes(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
|
||||
const res: AppRouteRecordRaw[] = []
|
||||
|
||||
for (const route of routes) {
|
||||
const data: AppRouteRecordRaw | IObj = {
|
||||
path: route.path,
|
||||
name: route.name,
|
||||
redirect: route.redirect
|
||||
}
|
||||
data.meta = Object.assign({}, route.meta || {}, { title: route.meta.title })
|
||||
if (route.component) {
|
||||
// 动态加载路由文件,可根据实际情况进行自定义逻辑
|
||||
data.component = (
|
||||
(route.component as any) === '#'
|
||||
? Layout
|
||||
: (route.component as any).includes('##')
|
||||
? getParentLayout((route.component as any).split('##')[1])
|
||||
: modules[`../../${route.component}.vue`]
|
||||
) as any
|
||||
}
|
||||
// recursive child routes
|
||||
if (route.children) {
|
||||
data.children = getFilterRoutes(route.children)
|
||||
}
|
||||
res.push(data as AppRouteRecordRaw)
|
||||
}
|
||||
return res
|
||||
}
|
||||
```
|
||||
|
||||
::: tip 提示
|
||||
后端控制的权限,我们只需要关注`component`的动态生成就行。
|
||||
:::
|
||||
|
||||
## 总结
|
||||
|
||||
其实我们不用太纠结到底是前端控制还是后端控制,主要还是要根据实际情况来。一般来讲,大多数都是比较推崇使用后端控制,这样就不需要前端修改完配置之后在重新打包部署。
|
||||
|
||||
本项目中的例子是相对比较简单的,因为不想给出太复杂的而让开发者有无从下手的感觉。但是流程基本上是一致的,开发者是可以在本项目原有的基础上去扩展。
|
|
@ -1,80 +0,0 @@
|
|||
# 路由配置和侧边栏
|
||||
|
||||
路由和侧边栏是组织起一个后台应用的关键骨架。
|
||||
|
||||
本项目侧边栏和路由是绑定在一起的,所以你只有在`src/router/index.ts`下面配置对应的路由,侧边栏就能动态的生成了。大大减轻了手动重复编辑侧边栏的工作量。当然这样就需要在配置路由的时候遵循一些约定的规则。
|
||||
|
||||
## 配置项
|
||||
|
||||
首先我们了解一下本项目配置路由时提供了哪些配置项。
|
||||
|
||||
```javaScript
|
||||
{
|
||||
redirect: 'noredirect', // 当设置 noredirect 的时候该路由在面包屑导航中不可被点击
|
||||
name:'router-name' , // 设定路由的名字,一定要填写不然使用<keep-alive>时会出现各种问题
|
||||
meta : {
|
||||
hidden: true , // 当设置 true 的时候该路由不会再侧边栏出现 如404,login等页面(默认 false)
|
||||
alwaysShow: true, // 当你一个路由下面的 children 声明的路由大于1个时,自动会变成嵌套的模式,
|
||||
// 只有一个时,会将那个子路由当做根路由显示在侧边栏,
|
||||
// 若你想不管路由下面的 children 声明的个数都显示你的根路由,
|
||||
// 你可以设置 alwaysShow: true,这样它就会忽略之前定义的规则,
|
||||
// 一直显示根路由(默认 false)
|
||||
title: 'title', // 设置该路由在侧边栏和面包屑中展示的名字
|
||||
icon: 'svg-name', // 设置该路由的图标
|
||||
noCache: true, // 如果设置为true,则不会被 <keep-alive> 缓存(默认 false)
|
||||
breadcrumb: false, // 如果设置为false,则不会在breadcrumb面包屑中显示(默认 true)
|
||||
affix: true, // 如果设置为true,则会一直固定在tag项中(默认 false)
|
||||
noTagsView: true, // 如果设置为true,则不会出现在tag中(默认 false)
|
||||
activeMenu: '/dashboard', // 显示高亮的路由路径
|
||||
followAuth: '/dashboard', // 跟随哪个路由进行权限过滤
|
||||
showMainRoute: true, // 设置为true即使hidden为true,也依然可以进行路由跳转(默认 false)
|
||||
followRoute: '/dashboard',// 为路由设置跟随其他路由的权限
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 路由
|
||||
|
||||
这里的路由分为两种,`constantRoutes` 和 `asyncRoutes`。
|
||||
|
||||
`constantRoutes`: 代表那些不需要动态判断权限的路由,如登录页、404、等通用页面。
|
||||
|
||||
`asyncRoutes`: 代表那些需求动态判断权限并通过 `addRoutes` 动态添加的页面。
|
||||
|
||||
## 侧边栏
|
||||
|
||||
本项目侧边栏主要基于 `element-plus` 的 `el-menu` 改造。
|
||||
|
||||
侧边栏是通过读取路由并结合权限判断而动态生成的,而且还需要支持路由无限嵌套,所以这里还使用到了递归组件。
|
||||
|
||||
具体代码可查看`src/layout/components/Sider/index.vue`
|
||||
|
||||
## 多级目录(嵌套路由)
|
||||
|
||||
如果你的路由是多级目录,如本项目 `src/views/level` 那样,有三级路由嵌套的情况下,不要忘记还要手动在二级目录的根文件下添加一个 `<router-view />`。
|
||||
|
||||
## 路由缓存
|
||||
|
||||
::: tip 提示
|
||||
本项目中路由都是默认缓存的,这里涉及到了嵌套路由的缓存问题。为了保证多级路由缓存可以正常使用,本项目中在动态路由中,把二级以下的路由全部转换成二级路由,菜单栏还是遵循开发者的嵌套结构来渲染。
|
||||
|
||||
具体过滤代码可以查看`src/store/modules/permission.ts`
|
||||
:::
|
||||
|
||||
## 面包屑
|
||||
|
||||
::: tip 提示
|
||||
本项目中也封装了一个面包屑导航,它也是通过 `watch $route` 变化动态生成的。它和 `menu` 也一样,也可以通过之前那些配置项控制一些路由在面包屑中的展现。大家也可以结合自己的业务需求增改这些自定义属性。比如可以在路由中声明`breadcrumb:false`,让其不在 `breadcrumb` 面包屑显示。
|
||||
|
||||
具体代码可以查看`src/layout/components/Breadcrumb/index.vue`
|
||||
:::
|
||||
|
||||
## 标签页
|
||||
|
||||
::: tip 提示
|
||||
本项目中每进行一次路由跳转,都会相应的把跳转的路由进行存储,进而在 `标签页` 中展示,让开发者可以快速的进行路由历史记录的操作。如果不需要,可以在路由配置中设置`noTagsView: true`即可隐藏。
|
||||
|
||||
组件具体代码可查看`src/layout/components/TagsView/index.vue`
|
||||
|
||||
标签页过滤代码可查看`src/store/modules/tags-view.ts`
|
||||
:::
|
|
@ -1,147 +0,0 @@
|
|||
# 项目规范
|
||||
|
||||
## ESlint
|
||||
|
||||
### 介绍
|
||||
|
||||
::: tip
|
||||
使用 lint 的好处不管是多人合作还是个人项目,具备基本工程素养的同学都会注重编码规范,而代码风格检查(Code Linting,简称 Lint)是保障代码规范一致性的重要手段。
|
||||
|
||||
遵循相应的代码规范有以下好处
|
||||
|
||||
- 较少 bug 错误率
|
||||
- 高效的开发效率
|
||||
- 更高的可读性
|
||||
:::
|
||||
|
||||
### 配置项
|
||||
|
||||
所有的配置文件都在`.eslintrc.js`中。 本项目基本规范是依托于 `vue` 官方的 `eslint` 规则 [eslint-config-vue](https://github.com/vuejs/eslint-config-vue) 做了少许的修改。大家可以按照自己的需求进行定制化配置。
|
||||
|
||||
比如:我个人或者项目组习惯于使用两个空格,但你可能觉得四个空格更顺眼,你可以做如下修改。 进入项目 `.eslintrc.js` 中,找到 `indent`,然后修改为 `4` 即可。 还有各种各样的配置信息,详情见 [ESLint](https://eslint.org/docs/rules/) 文档。
|
||||
|
||||
默认情况下使用了最严格的`plugin:vue/recommended`来校验代码,若你觉得太严格可自行修改。
|
||||
|
||||
```javaScript
|
||||
eslintrc.js
|
||||
|
||||
module.exports = {
|
||||
extends: ['plugin:vue/recommended', 'eslint:recommended']
|
||||
//你可以修改为 extends: ['plugin:vue/essential', 'eslint:recommended']
|
||||
}
|
||||
```
|
||||
|
||||
### 自动修复
|
||||
|
||||
运行如下命令,`eslint` 会自动修复一些简单的错误。
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
|
||||
## CommitLint
|
||||
|
||||
### 介绍
|
||||
|
||||
在一个团队中,每个人的`git`的`commit`信息都不一样,五花八门,没有一个机制很难保证规范化,如何才能规范化呢?可能你想到的是`git`的`hook`机制,去写`shell`脚本去实现。这当然可以,其实`JavaScript`有一个很好的工具可以实现这个模板,它就是`commitlint`(用于校验 git 提交信息规范)。
|
||||
|
||||
### 配置项
|
||||
|
||||
commit-lint 的配置位于项目根目录下`commitlint.config.js`
|
||||
|
||||
### 提交规范
|
||||
|
||||
- feat 新功能(feature)
|
||||
- fix 修补 bug
|
||||
- docs 文档(documentation)
|
||||
- style 格式、样式(不影响代码运行的变动)
|
||||
- refactor 重构(即不是新增功能,也不是修改 BUG 的代码)
|
||||
- perf 优化相关,比如提升性能、体验
|
||||
- test 添加测试
|
||||
- build 编译相关的修改,例如发布版本、对项目构建或者依赖的改动
|
||||
- ci 持续集成修改
|
||||
- chore 构建过程或辅助工具的变动
|
||||
- revert 回滚到上一个版本
|
||||
- workflow 工作流改进
|
||||
- mod 不确定分类的修改
|
||||
- wip 开发中
|
||||
- types 类型修改
|
||||
- release 版本发布
|
||||
|
||||
### 如何关闭
|
||||
|
||||
在`.husky/commit-msg`内注释以下代码即可
|
||||
|
||||
```sh
|
||||
# npx --no-install commitlint --edit "$1"
|
||||
```
|
||||
|
||||
### 提交示例
|
||||
|
||||
```sh
|
||||
git commit -m 'feat(home): add home page'
|
||||
```
|
||||
|
||||
## Stylelint
|
||||
|
||||
### 介绍
|
||||
|
||||
`stylelint`用于校验项目内部 css 的风格,加上编辑器的自动修复,可以很好的统一项目内部 css 风格
|
||||
|
||||
### 配置
|
||||
|
||||
`stylelint` 配置位于根目录下 stylelint.config.js
|
||||
|
||||
### 编辑器配合
|
||||
|
||||
如果您使用的是 `vscode` 编辑器的话,只需要安装[StyleLint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)插件,即可在保存的时候自动格式化文件内部 css 样式。
|
||||
|
||||
## Prettier
|
||||
|
||||
### 介绍
|
||||
|
||||
`prettier`可以用于统一项目代码风格,统一的缩进,单双引号,尾逗号等等风格。
|
||||
|
||||
### 配置
|
||||
|
||||
`prettier` 配置文件位于项目根目录下 prettier.config.js
|
||||
|
||||
### 编辑器配合
|
||||
|
||||
如果您使用的是 `vscode` 编辑器的话,只需要安装[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)插件,即可在保存的时候自动格式化文件内部 `js | ts` 格式。
|
||||
|
||||
## Git Hooks
|
||||
|
||||
很多时候我们 lint 的校验是放在持续集成阶段,大概流程如下:
|
||||
|
||||
::: tip
|
||||
流程代码提交 --> 跑 CI 发现问题(远程) --> 本地修复问题 --> 重新提交 --> 通过检查(远程)
|
||||
:::
|
||||
|
||||
但这样有一个问题,我们的 `CI(持续集成)` 往往不是仅仅只做 `Lint`工作,它还有会有很多其它的任务(如打包文件,静态资源上传 `CDN` 等),这样就导致特别的浪费时间,往往可能需要几分钟之后你才会发现问题,或者有的时候你根本就没有发现你的 `CI` 没有跑通过。
|
||||
|
||||
常见的流程:本地写好了代码,提交,开始跑 `lint`,发现不通过,本地修改代码,再提交,再等待 `CI` 的结果,若还有问题再重复之前的操作。
|
||||
|
||||
### husky
|
||||
|
||||
最有效的解决方案就是将 `Lint` 校验放到本地,常见做法是使用 [husky](https://github.com/typicode/husky) 或者 [pre-commit](https://github.com/observing/pre-commit) 在本地提交之前先做一次 `Lint`校验。
|
||||
|
||||
最后尝试 Git 提交,你就会很快收到反馈:
|
||||
|
||||
```sh
|
||||
git commit -m "Keep calm and commit"
|
||||
```
|
||||
|
||||
但这样会有一个问题,就是这次提交,我可能只修改了一个文件,比如我就修改了 `foo.js` 的内容,但它依然会校验所有`src` 下面的`.js`文件,非常的不友好。导致的问题就是:每次我提交我写的代码,还先要帮人的代码问题解决了才能顺利提交,而且当项目大了之后,检查速度也会变得越来越慢了。
|
||||
|
||||
### lint-staged
|
||||
|
||||
解决上面的痛点就需要使用 [lint-staged](https://github.com/okonet/lint-staged) 了。它只会校验检查你提交或者说你修改的部分内容。
|
||||
|
||||
如上配置,每次它只会在你本地 `commit` 之前,校验你提交的内容是否符合你本地配置的 `eslint`规则,如果符合规则,则会提交成功。如果不符合它会自动执行 `eslint --fix` 尝试帮你自动修复,如果修复成功则会帮你把修复好的代码提交,如果失败,则会提示你错误,让你修好这个错误之后才能允许你提交代码。
|
||||
|
||||
### 总结
|
||||
|
||||
最佳的 `lint` 规范流程就是推荐团队成员先在自己的编辑器中配置 `eslint`,这样平时写的时候编辑器就能帮你修正一些简单的格式错误,同时提醒你有哪些不符合 `lint` 规范的的地方,并在命令行中提示你错误。。
|
||||
|
||||
但这并不是强制的,有些团队成员或者说刚来的实习生没有在编辑器中配置或者无视命令行中提示的错误,这时候就需要配置`pre-commit` 这种强制性校验的东西,保证所有提交到远程仓库的内容都是符合团队规范的。
|
|
@ -1,42 +0,0 @@
|
|||
# 风格指南
|
||||
|
||||
## 介绍
|
||||
|
||||
::: tip 推荐
|
||||
本项目的风格指南主要是参照 `vue` 官方的[风格指南](https://cn.vuejs.org/v2/style-guide/index.html)。在真正开始使用该项目之前建议先阅读一遍指南,这能帮助让你写出更规范和统一的代码。当然每个团队都会有所区别。其中大部分规则也都配置在了[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)之中,当没有遵循规则的时候会报错,详细内容见[eslint](http://192.168.169.57/ue/2019/doc/vue-standard/dist/advanced/eslint.html#介绍)章节。
|
||||
|
||||
当然也有一些特殊的规范,是不能被 `eslint` 校验的。需要人为的自己注意,并且来遵循。最主要的就是文件的命名规则,这里以本项目来举例。
|
||||
:::
|
||||
|
||||
## Component
|
||||
|
||||
所有的`Component`文件都是以大写开头 `(PascalCase)`,这也是官方所推荐的。
|
||||
|
||||
但除了 `index.vue`。
|
||||
|
||||
- @/views/example-demo/example-dialog/components/Detail.vue
|
||||
- @/components/Charts/index.vue
|
||||
|
||||
## JS | TS 文件
|
||||
|
||||
所有的`.js .ts`文件都遵循横线连接 `(kebab-case)`。
|
||||
|
||||
例子:
|
||||
|
||||
- @/utils/dom-uitls.ts
|
||||
|
||||
## Views
|
||||
|
||||
在`views`文件下,代表路由的`.vue`文件都使用横线连接 `(kebab-case)`,代表路由的文件夹也是使用同样的规则。
|
||||
|
||||
例子:
|
||||
|
||||
- @/views/icons/index.vue
|
||||
|
||||
使用横线连接 `(kebab-case)`来命名`views`主要是出于以下几个考虑。
|
||||
|
||||
横线连接 `(kebab-case)` 也是官方推荐的命名规范之一 [文档](https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)
|
||||
|
||||
`views`下的`.vue`文件代表的是一个路由,所以它需要和`component`进行区分(component 都是大写开头)
|
||||
页面的`url` 也都是横线连接的,比如`https://www.xxx.admin/export-excel`,所以路由对应的`view`应该要保持统一
|
||||
没有大小写敏感问题。
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"name": "vue-standard",
|
||||
"version": "1.0.0",
|
||||
"description": "'vue规范文档'",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "vuepress dev docs",
|
||||
"build": "vuepress build docs"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"vuepress": "^1.8.2"
|
||||
}
|
||||
}
|
8043
docs/yarn.lock
133
index.html
|
@ -4,139 +4,10 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title></title>
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<style>
|
||||
.app-loading {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
.app-loading .app-loading-wrap {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-loading .app-loading-title {
|
||||
margin-bottom: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-loading .app-loading-logo {
|
||||
/* width: 100px; */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.app-loading .app-loading-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.app-loading .app-loading-outter {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 4px solid #2d8cf0;
|
||||
border-bottom: 0;
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
|
||||
}
|
||||
|
||||
.app-loading .app-loading-inner {
|
||||
position: absolute;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #87bdff;
|
||||
border-right: 0;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loader-outter {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-outter {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes loader-inner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg);
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-inner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg);
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="app-loading">
|
||||
<div class="app-loading-wrap">
|
||||
<div class="app-loading-title">
|
||||
<img src="/logo.png" class="app-loading-logo" alt="Logo" />
|
||||
<div class="app-loading-title">vue-element-plus-admin</div>
|
||||
</div>
|
||||
<div class="app-loading-item">
|
||||
<div class="app-loading-outter"></div>
|
||||
<div class="app-loading-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
90
package.json
|
@ -1,88 +1,18 @@
|
|||
{
|
||||
"name": "vue-element-plus-admin",
|
||||
"version": "2.0.0",
|
||||
"description": "一套基于vue3、element-plus、typesScript4、vite2的后台集成方案",
|
||||
"author": "Archer <502431556@qq.com>",
|
||||
"private": false,
|
||||
"name": "new-element-plus-admin",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"i:all": "npm run i && npm run docs:i",
|
||||
"i": "yarn install",
|
||||
"dev": "vite --mode base",
|
||||
"build:pro": "vue-tsc --noEmit && vite build --mode pro",
|
||||
"build:dev": "vue-tsc --noEmit && vite build --mode dev",
|
||||
"build:test": "vue-tsc --noEmit && vite build --mode test",
|
||||
"serve": "vite preview",
|
||||
"check": "npx npm-check-updates",
|
||||
"clean": "npx rimraf docs/node_modules && npx rimraf node_modules",
|
||||
"clean:docs": "npx rimraf docs/node_modules",
|
||||
"clean:main": "npx rimraf node_modules",
|
||||
"lint": "eslint --fix --ext .js,.ts,.vue ./src",
|
||||
"format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
|
||||
"lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
|
||||
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
|
||||
"lint:pretty": "pretty-quick --staged",
|
||||
"postinstall": "husky install",
|
||||
"ts:check": "vue-tsc --noEmit"
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons": "^0.0.11",
|
||||
"echarts": "^5.2.1",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "1.1.0-beta.24",
|
||||
"lodash-es": "^4.17.21",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"pinia": "^2.0.0-rc.13",
|
||||
"qs": "^6.10.1",
|
||||
"vue": "^3.2.16",
|
||||
"vue-router": "^4.0.11",
|
||||
"web-storage-cache": "^1.1.1"
|
||||
"vue": "^3.2.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^13.2.1",
|
||||
"@commitlint/config-conventional": "^13.2.0",
|
||||
"@types/clipboard": "^2.0.7",
|
||||
"@types/intro.js": "^3.0.2",
|
||||
"@types/path-to-regexp": "^1.7.0",
|
||||
"@types/screenfull": "^4.1.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
||||
"@typescript-eslint/parser": "^4.33.0",
|
||||
"@vitejs/plugin-vue": "^1.9.3",
|
||||
"@vitejs/plugin-vue-jsx": "^1.2.0",
|
||||
"autoprefixer": "^10.3.7",
|
||||
"commitizen": "^4.2.4",
|
||||
"eslint": "7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-define-config": "^1.1.1",
|
||||
"eslint-plugin-jest": "^25.0.1",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^7.19.1",
|
||||
"husky": "^7.0.2",
|
||||
"jest": "^27.2.5",
|
||||
"less": "^4.1.2",
|
||||
"lint-staged": "^11.2.3",
|
||||
"postcss": "^8.3.9",
|
||||
"prettier": "^2.4.1",
|
||||
"pretty-quick": "^3.1.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-config-prettier": "^8.0.2",
|
||||
"stylelint-config-standard": "^22.0.0",
|
||||
"stylelint-order": "^4.1.0",
|
||||
"typescript": "^4.4.4",
|
||||
"unplugin-element-plus": "^0.1.3",
|
||||
"unplugin-vue-components": "^0.16.0",
|
||||
"vite": "^2.6.10",
|
||||
"vite-plugin-commonjs-externals": "^0.1.1",
|
||||
"vite-plugin-eslint": "^1.3.0",
|
||||
"vite-plugin-svg-icons": "^1.0.5",
|
||||
"vite-plugin-vue-setup-extend": "^0.1.0",
|
||||
"vue-eslint-parser": "^7.11.0",
|
||||
"vue-tsc": "^0.28.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
"typescript": "^4.4.3",
|
||||
"vite": "^2.6.4",
|
||||
"vue-tsc": "^0.3.0"
|
||||
}
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
BIN
public/logo.png
Before Width: | Height: | Size: 2.1 KiB |
54
src/App.vue
|
@ -1,45 +1,21 @@
|
|||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view class="app" :class="{ grey__mode: greyMode }" />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="App">
|
||||
import { computed } from 'vue'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
const appStore = useAppStore()
|
||||
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
const greyMode = computed(() => appStore.getGreyMode)
|
||||
<script setup lang="ts">
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.size {
|
||||
width: 100;
|
||||
height: 100%;
|
||||
min-width: var(--content-min-width);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
.size;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
<template>
|
||||
<img alt="Vue logo" src="./assets/logo.png" />
|
||||
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
.size;
|
||||
|
||||
background: var(--app-background-color);
|
||||
}
|
||||
|
||||
.grey__mode {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>
|
Before Width: | Height: | Size: 1.4 KiB |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566004829076" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10493" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M817.3 551.1c-7.9 10.7-17.2 19.8-27.2 27.1-23 30.8-56 46.8-85.2 37.2-40.3-13.2-58-69.6-39.5-126.1 5.8-17.7 14.7-33 25.1-45.7l68.3-160.3 28.1-66.1c-84.6-85.9-216.1-138.1-394.6-109.6C0.8 170.1-120 649.1 134.1 874c237.7 210.5 362.4 67.1 452.6-92.1 10.2-18 34.3-28.6 54.9-26.4 65.5 7 199.8-0.4 246.3-164.7 13-46 16-96.6 9.1-147.3l-79.7 107.6z m-585.4-206c44.9 0 81.2 36.4 81.2 81.2 0 44.9-36.4 81.2-81.2 81.2-44.8 0-81.2-36.4-81.2-81.2 0-44.9 36.4-81.2 81.2-81.2z m-46.8 371.6c-44.8 0-81.2-36.4-81.2-81.2 0-44.8 36.3-81.2 81.2-81.2s81.2 36.4 81.2 81.2c0 44.9-36.4 81.2-81.2 81.2z m159.3 162.5c-44.8 0-81.2-36.3-81.2-81.2 0-44.9 36.4-81.2 81.2-81.2 44.9 0 81.2 36.4 81.2 81.2 0 44.8-36.3 81.2-81.2 81.2zM410 366.9c-44.8 0-81.2-36.3-81.2-81.2 0-44.8 36.4-81.2 81.2-81.2 44.8 0 81.2 36.4 81.2 81.2 0 44.9-36.4 81.2-81.2 81.2zM939.5 66.6c-52.6 3.4-92 54.3-92 54.3l0.4 0.2c-2.2 2.2-4.4 4.5-6.4 6.9-35.8 42.6-30.2 106.2 12.5 142 42.6 35.8 106.2 30.2 142-12.4 13-15.4 20.4-33.7 22.7-52.3 19.4-91.6-20.4-153.5-20.4-153.5s-6.2 11.4-58.8 14.8z" fill="" p-id="10494"></path><path d="M707.3 579.5c19.8 11.5 52.7-1.9 73.5-30l96.9-130.9c-45.1-10.4-85.6-38.4-111.7-60.2-2.4-2-4.7-4-6.9-5.9l-63 148c-13.5 32-8.6 67.5 11.2 79zM844.3 281.4c-16-13.4-27.4-30.2-34.2-48.5l-28.9 68c25.6 25.4 81.6 69.7 132.7 69l52.9-71.4c-39.5 17.4-87.2 12.5-122.5-17.1z" fill="" p-id="10495"></path></svg>
|
Before Width: | Height: | Size: 1.7 KiB |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1562375978982" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M512 832a21.333333 21.333333 0 0 1-21.333333-21.333333V213.333333a21.333333 21.333333 0 0 1 42.666666 0v597.333334a21.333333 21.333333 0 0 1-21.333333 21.333333z" p-id="1575"></path><path d="M512 832a21.333333 21.333333 0 0 1-15.146667-6.186667l-277.333333-277.333333a21.333333 21.333333 0 0 1 30.293333-30.293333L512 780.586667l262.186667-262.4a21.333333 21.333333 0 0 1 30.293333 30.293333l-277.333333 277.333333A21.333333 21.333333 0 0 1 512 832z" p-id="1576"></path></svg>
|
Before Width: | Height: | Size: 851 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M127.88 73.143c0 1.412-.506 2.635-1.518 3.669-1.011 1.033-2.209 1.55-3.592 1.55h-17.887c0 9.296-1.783 17.178-5.35 23.645l16.609 17.044c1.011 1.034 1.517 2.257 1.517 3.67 0 1.412-.506 2.635-1.517 3.668-.958 1.033-2.155 1.55-3.593 1.55-1.438 0-2.635-.517-3.593-1.55l-15.811-16.063a15.49 15.49 0 0 1-1.196 1.06c-.532.434-1.65 1.208-3.353 2.322a50.104 50.104 0 0 1-5.192 2.974c-1.758.87-3.94 1.658-6.546 2.364-2.607.706-5.189 1.06-7.748 1.06V47.044H58.89v73.062c-2.716 0-5.417-.367-8.106-1.102-2.688-.734-5.003-1.631-6.945-2.692a66.769 66.769 0 0 1-5.268-3.179c-1.571-1.057-2.73-1.94-3.476-2.65L33.9 109.34l-14.611 16.877c-1.066 1.14-2.344 1.711-3.833 1.711-1.277 0-2.422-.434-3.434-1.304-1.012-.978-1.557-2.187-1.635-3.627-.079-1.44.333-2.705 1.236-3.794l16.129-18.51c-3.087-6.197-4.63-13.644-4.63-22.342H5.235c-1.383 0-2.58-.517-3.592-1.55S.125 74.545.125 73.132c0-1.412.506-2.635 1.518-3.668 1.012-1.034 2.21-1.55 3.592-1.55h17.887V43.939L9.308 29.833c-1.012-1.033-1.517-2.256-1.517-3.669 0-1.412.505-2.635 1.517-3.668 1.012-1.034 2.21-1.55 3.593-1.55s2.58.516 3.593 1.55l13.813 14.106h67.396l13.814-14.106c1.012-1.034 2.21-1.55 3.592-1.55 1.384 0 2.581.516 3.593 1.55 1.012 1.033 1.518 2.256 1.518 3.668 0 1.413-.506 2.636-1.518 3.67l-13.814 14.105v23.975h17.887c1.383 0 2.58.516 3.593 1.55 1.011 1.033 1.517 2.256 1.517 3.668l-.005.01zM89.552 26.175H38.448c0-7.23 2.489-13.386 7.466-18.469C50.892 2.623 56.92.082 64 .082c7.08 0 13.108 2.541 18.086 7.624 4.977 5.083 7.466 11.24 7.466 18.469z"/></svg>
|
Before Width: | Height: | Size: 1.5 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h36.571V128H0V54.857zM91.429 27.43H128V128H91.429V27.429zM45.714 0h36.572v128H45.714V0z"/></svg>
|
Before Width: | Height: | Size: 179 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.857 118.857h64V73.143H89.143c-1.902 0-3.52-.668-4.855-2.002-1.335-1.335-2.002-2.954-2.002-4.855V36.57H54.857v82.286zM73.143 16v-4.571a2.2 2.2 0 0 0-.677-1.61 2.198 2.198 0 0 0-1.609-.676H20.571c-.621 0-1.158.225-1.609.676a2.198 2.198 0 0 0-.676 1.61V16a2.2 2.2 0 0 0 .676 1.61c.451.45.988.676 1.61.676h50.285c.622 0 1.158-.226 1.61-.677.45-.45.676-.987.676-1.609zm18.286 48h21.357L91.43 42.642V64zM128 73.143v48c0 1.902-.667 3.52-2.002 4.855-1.335 1.335-2.953 2.002-4.855 2.002H52.57c-1.901 0-3.52-.667-4.854-2.002-1.335-1.335-2.003-2.953-2.003-4.855v-11.429H6.857c-1.902 0-3.52-.667-4.855-2.002C.667 106.377 0 104.759 0 102.857v-96c0-1.902.667-3.52 2.002-4.855C3.337.667 4.955 0 6.857 0h77.714c1.902 0 3.52.667 4.855 2.002 1.335 1.335 2.003 2.953 2.003 4.855V30.29c1 .622 1.856 1.29 2.569 2.003l29.147 29.147c1.335 1.335 2.478 3.145 3.429 5.43.95 2.287 1.426 4.383 1.426 6.291v-.018z"/></svg>
|
Before Width: | Height: | Size: 971 B |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1563171044087" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2252" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M574.55 522.35L904.4 192.5c16.65-16.65 16.65-44.1 0-60.75l-1.8-1.8c-16.65-16.65-44.1-16.65-60.75 0L512 460.25 182.15 129.95c-16.65-16.65-44.1-16.65-60.75 0l-1.8 1.8c-17.1 16.65-17.1 44.1 0 60.75l329.85 329.85L119.6 852.2c-16.65 16.65-16.65 44.1 0 60.75l1.8 1.8c16.65 16.65 44.1 16.65 60.75 0L512 584.9 841.85 914.75c16.65 16.65 44.1 16.65 60.75 0l1.8-1.8c16.65-16.65 16.65-44.1 0-60.75L574.55 522.35z" p-id="2253"></path></svg>
|
Before Width: | Height: | Size: 804 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h54.857v54.857H0V0zm0 73.143h54.857V128H0V73.143zm73.143 0H128V128H73.143V73.143zm27.428-18.286C115.72 54.857 128 42.577 128 27.43 128 12.28 115.72 0 100.571 0 85.423 0 73.143 12.28 73.143 27.429c0 15.148 12.28 27.428 27.428 27.428z"/></svg>
|
Before Width: | Height: | Size: 319 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>
|
Before Width: | Height: | Size: 2.3 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M71.984 44.815H115.9L71.984 9.642v35.173zM16.094.05h63.875l47.906 38.37v76.74c0 3.392-1.682 6.645-4.677 9.044-2.995 2.399-7.056 3.746-11.292 3.746H16.094c-4.236 0-8.297-1.347-11.292-3.746-2.995-2.399-4.677-5.652-4.677-9.044V12.84C.125 5.742 7.23.05 16.094.05zm71.86 102.32V89.58h-71.86v12.79h71.86zm23.952-25.58V64H16.094v12.79h95.812z"/></svg>
|
Before Width: | Height: | Size: 418 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M73.137 29.08h-9.209 29.7L63.886.093 34.373 29.08h20.49v27.035H27.238v17.948h27.625v27.133h18.274V74.063h27.41V56.115h-27.41V29.08zm-9.245 98.827l27.518-26.711H36.59l27.302 26.71zM.042 64.982l27.196 27.029V38.167L.042 64.982zm100.505-26.815V92.01l27.41-27.029-27.41-26.815z"/></svg>
|
Before Width: | Height: | Size: 356 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M106.133 67.2a4.797 4.797 0 0 0-4.8 4.8c0 .187.014.36.027.533h-.027V118.4H9.6V26.667h50.133c2.654 0 4.8-2.147 4.8-4.8 0-2.654-2.146-4.8-4.8-4.8H9.6a9.594 9.594 0 0 0-9.6 9.6V118.4c0 5.307 4.293 9.6 9.6 9.6h91.733c5.307 0 9.6-4.293 9.6-9.6V72.533h-.026c.013-.173.026-.346.026-.533 0-2.653-2.146-4.8-4.8-4.8z"/><path d="M125.16 13.373L114.587 2.8c-3.747-3.747-9.854-3.72-13.6.027l-52.96 52.96a4.264 4.264 0 0 0-.907 1.36L33.813 88.533c-.746 1.76-.226 3.534.907 4.68 1.133 1.147 2.92 1.667 4.693.92l31.4-13.293c.507-.213.96-.52 1.36-.907l52.96-52.96c3.747-3.746 3.774-9.853.027-13.6zM66.107 72.4l-18.32 7.76 7.76-18.32L92.72 24.667l10.56 10.56L66.107 72.4zm52.226-52.227l-8.266 8.267-10.56-10.56 8.266-8.267.027-.026 10.56 10.56-.027.026z"/></svg>
|
Before Width: | Height: | Size: 818 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="96" xmlns="http://www.w3.org/2000/svg"><path d="M64.125 56.975L120.188.912A12.476 12.476 0 0 0 115.5 0h-103c-1.588 0-3.113.3-4.513.838l56.138 56.137z"/><path d="M64.125 68.287l-62.3-62.3A12.42 12.42 0 0 0 0 12.5v71C0 90.4 5.6 96 12.5 96h103c6.9 0 12.5-5.6 12.5-12.5v-71a12.47 12.47 0 0 0-1.737-6.35L64.125 68.287z"/></svg>
|
Before Width: | Height: | Size: 347 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
|
Before Width: | Height: | Size: 497 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.208 16.576v8.384h38.72v5.376h-38.72v8.704h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.512h38.72v5.376h-38.72v11.136H128v-94.72H78.208zM0 114.368L72.128 128V0L0 13.632v100.736z"/><path d="M28.672 82.56h-11.2l14.784-23.488-14.08-22.592h11.52l8.192 14.976 8.448-14.976h11.136l-14.08 22.208L58.368 82.56H46.656l-8.768-15.68z"/></svg>
|
Before Width: | Height: | Size: 459 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
|
Before Width: | Height: | Size: 1.8 KiB |
|
@ -1 +0,0 @@
|
|||
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
|
Before Width: | Height: | Size: 1.3 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
|
Before Width: | Height: | Size: 944 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
|
Before Width: | Height: | Size: 2.4 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
|
Before Width: | Height: | Size: 421 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.482 70.131l36.204 16.18 69.932-65.485-61.38 70.594 46.435 18.735c1.119.425 2.397-.17 2.797-1.363v-.085L127.998.047 1.322 65.874c-1.12.597-1.519 1.959-1.04 3.151.32.511.72.937 1.2 1.107zm44.676 57.821L64.22 107.26l-18.062-7.834v28.527z"/></svg>
|
Before Width: | Height: | Size: 320 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.147.062a13 13 0 0 1 4.94.945c1.55.63 2.907 1.526 4.069 2.688a13.148 13.148 0 0 1 2.761 4.069c.678 1.55 1.017 3.245 1.017 5.086v102.3c0 3.681-1.187 6.733-3.56 9.155-2.373 2.422-5.352 3.633-8.937 3.633H12.992c-3.875 0-7-1.26-9.373-3.779-2.373-2.518-3.56-5.667-3.56-9.445V12.704c0-3.39 1.163-6.345 3.488-8.863C5.872 1.32 8.972.062 12.847.062h102.3zM81.434 109.047c1.744 0 3.003-.412 3.778-1.235.775-.824 1.163-1.914 1.163-3.27 0-1.26-.388-2.325-1.163-3.197-.775-.872-2.034-1.307-3.778-1.307H72.57c.097-.194.145-.485.145-.872V27.09h9.01c1.743 0 2.954-.436 3.633-1.308.678-.872 1.017-1.938 1.017-3.197 0-1.26-.34-2.325-1.017-3.197-.679-.872-1.89-1.308-3.633-1.308H46.268c-1.743 0-2.954.436-3.632 1.308-.678.872-1.018 1.938-1.018 3.197 0 1.26.34 2.325 1.018 3.197.678.872 1.889 1.308 3.632 1.308h8.138v72.075c0 .193.024.339.073.436.048.096.072.242.072.436H46.56c-1.744 0-3.003.435-3.778 1.307-.775.872-1.163 1.938-1.163 3.197 0 1.356.388 2.446 1.163 3.27.775.823 2.034 1.235 3.778 1.235h34.875z"/></svg>
|
Before Width: | Height: | Size: 1.1 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M83.287 103.01c-1.57-3.84-6.778-10.414-15.447-19.548-2.327-2.444-2.182-4.306-1.338-9.862v-.64c.553-3.81 1.513-6.05 14.313-8.087 6.516-1.018 8.203 1.57 10.589 5.178l.785 1.193a12.625 12.625 0 0 0 6.43 5.207c1.134.524 2.53 1.164 4.421 2.24 4.596 2.53 4.596 5.41 4.596 11.753v.727a26.91 26.91 0 0 1-5.178 17.454 59.055 59.055 0 0 1-19.025 11.026c3.49-6.546.814-14.313 0-16.553l-.146-.087zM64 5.12a58.502 58.502 0 0 1 25.484 5.818 54.313 54.313 0 0 0-12.859 10.327c-.93 1.28-1.716 2.473-2.472 3.579-2.444 3.694-3.637 5.352-5.818 5.614a25.105 25.105 0 0 1-4.219 0c-4.276-.29-10.094-.64-11.956 4.422-1.193 3.23-1.396 11.956 2.444 16.495.66 1.077.778 2.4.32 3.578a7.01 7.01 0 0 1-2.066 3.229 18.938 18.938 0 0 1-2.909-2.91 18.91 18.91 0 0 0-8.32-6.603c-1.25-.349-2.647-.64-3.985-.93-3.782-.786-8.03-1.688-9.019-3.812a14.895 14.895 0 0 1-.727-5.818 21.935 21.935 0 0 0-1.396-9.25 8.873 8.873 0 0 0-5.557-4.946A58.705 58.705 0 0 1 64 5.12zM0 64c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64z"/></svg>
|
Before Width: | Height: | Size: 1.1 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.742 36.8c2.398 7.2 5.595 12.8 11.19 18.4 4.795-4.8 7.992-11.2 10.39-18.4h-21.58zm-52.748 40h20.78l-10.39-28-10.39 28z"/><path d="M111.916 0H16.009C7.218 0 .025 7.2.025 16v96c0 8.8 7.193 16 15.984 16h95.907c8.791 0 15.984-7.2 15.984-16V16c0-8.8-6.394-16-15.984-16zM72.754 103.2c-1.598 1.6-3.197 1.6-4.795 1.6-.8 0-2.398 0-3.197-.8-.8-.8-1.599 0-1.599-.8s-.799-1.6-1.598-3.2c-.8-1.6-.8-2.4-1.599-4l-3.196-8.8H28.797L25.6 96c-1.598 3.2-2.398 5.6-3.197 7.2-.8 1.6-2.398 1.6-4.795 1.6-1.599 0-3.197-.8-4.796-1.6-1.598-1.6-2.397-2.4-2.397-4 0-.8 0-1.6.799-3.2.8-1.6.8-2.4 1.598-4l17.583-44.8c.8-1.6.8-3.2 1.599-4.8.799-1.6 1.598-3.2 2.397-4 .8-.8 1.599-2.4 3.197-3.2 1.599-.8 3.197-.8 4.796-.8 1.598 0 3.196 0 4.795.8 1.598.8 2.398 1.6 3.197 3.2.799.8 1.598 2.4 2.397 4 .8 1.6 1.599 3.2 2.398 5.6l17.583 44c1.598 3.2 2.398 5.6 2.398 7.2-.8.8-1.599 2.4-2.398 4zM116.711 72c-8.791-3.2-15.185-7.2-20.78-12-5.594 5.6-12.787 9.6-21.579 12l-2.397-4c8.791-2.4 15.984-5.6 21.579-11.2C87.939 51.2 83.144 44 81.545 36h-7.992v-3.2h21.58c-1.6-2.4-3.198-5.6-4.796-8l2.397-.8c1.599 2.4 3.997 5.6 5.595 8.8h19.98v4h-7.992c-2.397 8-6.393 15.2-11.189 20 5.595 4.8 11.988 8.8 20.78 11.2l-3.197 4z"/></svg>
|
Before Width: | Height: | Size: 1.2 KiB |
|
@ -1,39 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
|
||||
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
|
||||
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<g id="Rectangle-18">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 2.3 KiB |
|
@ -1,39 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<defs>
|
||||
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="setting-copy-2" transform="translate(-1254.000000, -337.000000)">
|
||||
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
|
||||
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 338.000000)">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<g id="Rectangle-18">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 2.1 KiB |
|
@ -1,39 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="é
ç½®é¢æ¿" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
|
||||
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
|
||||
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<g id="Rectangle-18">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<rect id="Rectangle-18" fill="#fff" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
|
||||
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 2.5 KiB |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1562375964995" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1423" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M810.666667 533.333333H240.64a21.333333 21.333333 0 1 1 0-42.666666H810.666667a21.333333 21.333333 0 0 1 0 42.666666z" p-id="1424"></path><path d="M490.666667 810.666667a21.333333 21.333333 0 0 1-15.146667-6.186667l-277.333333-277.333333a21.333333 21.333333 0 0 1 0-30.293334l277.333333-277.333333a21.333333 21.333333 0 0 1 30.293333 30.293333L243.413333 512l262.4 262.186667a21.333333 21.333333 0 0 1 0 30.293333A21.333333 21.333333 0 0 1 490.666667 810.666667z" p-id="1425"></path></svg>
|
Before Width: | Height: | Size: 864 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
|
Before Width: | Height: | Size: 285 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.585 12.087c0 6.616 3.974 11.98 8.877 11.98 4.902 0 8.877-5.364 8.877-11.98 0-6.616-3.975-11.98-8.877-11.98-4.903 0-8.877 5.364-8.877 11.98zM125.86.107H35.613c-1.268 0-2.114 1.426-2.114 2.852v18.255c0 1.712 1.057 2.853 2.114 2.853h90.247c1.268 0 2.114-1.426 2.114-2.853V2.96c0-1.711-1.057-2.852-2.114-2.852zM.106 62.86c0 6.615 3.974 11.979 8.876 11.979 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zM124.17 50.88H33.921c-1.268 0-2.114 1.425-2.114 2.851v18.256c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852V53.73c0-1.426-.846-2.852-2.114-2.852zM.106 115.913c0 6.616 3.974 11.98 8.876 11.98 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zm124.064-11.98H33.921c-1.268 0-2.114 1.426-2.114 2.853v18.255c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852v-18.255c0-1.427-.846-2.853-2.114-2.853z"/></svg>
|
Before Width: | Height: | Size: 1017 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M119.88 49.674h-7.987V39.52C111.893 17.738 90.45.08 63.996.08 37.543.08 16.1 17.738 16.1 39.52v10.154H8.113c-4.408 0-7.987 2.94-7.987 6.577v65.13c0 3.637 3.57 6.577 7.987 6.577H119.88c4.407 0 7.987-2.94 7.987-6.577v-65.13c-.008-3.636-3.58-6.577-7.987-6.577zm-23.953 0H32.065V39.52c0-14.524 14.301-26.295 31.931-26.295 17.63 0 31.932 11.777 31.932 26.295v10.153z"/></svg>
|
Before Width: | Height: | Size: 444 B |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1562375412765" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4196" width="32.09375" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M853.95951925 475.5066105h-310.08967642v-300.83326917c0-13.88461268-13.88461268-32.39742862-32.39742936-32.39742862-18.51281666 0-32.39742862 18.51281666-32.39742861 37.02563333v300.83326844H178.2417157c-18.51281666-4.62820399-37.02563333 13.88461268-37.02563262 32.39742934s18.51281666 32.39742862 32.39742863 32.39742861h300.83326916v300.83326845c4.62820399 18.51281666 18.51281666 37.02563333 37.02563261 37.02563334s32.39742862-18.51281666 32.39742935-32.39742862v-305.46147317h305.46147243c18.51281666 0 32.39742862-18.51281666 32.39742934-32.39742861s-9.25640796-37.02563333-27.76922535-37.02563333z" fill="" p-id="4197"></path></svg>
|
Before Width: | Height: | Size: 1021 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 20.967v59.59c0 11.59 8.537 20.966 19.075 20.966h28.613l1 26.477L76.8 101.523h32.125c10.538 0 19.075-9.377 19.075-20.966v-59.59C128 9.377 119.463 0 108.925 0h-89.85C8.538 0 0 9.377 0 20.967zm82.325 33.1c0-5.524 4.013-9.935 9.037-9.935 5.026 0 9.038 4.41 9.038 9.934 0 5.524-4.025 9.934-9.038 9.934-5.024 0-9.037-4.41-9.037-9.934zm-27.613 0c0-5.524 4.013-9.935 9.038-9.935s9.037 4.41 9.037 9.934c0 5.524-4.025 9.934-9.037 9.934-5.025 0-9.038-4.41-9.038-9.934zm-27.1 0c0-5.524 4.013-9.935 9.038-9.935s9.038 4.41 9.038 9.934c0 5.524-4.026 9.934-9.05 9.934-5.013 0-9.025-4.41-9.025-9.934z"/></svg>
|
Before Width: | Height: | Size: 669 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.122 127.892v-28.68H7.513V87.274h46.609v-12.4H7.513v-12.86h38.003L.099 0h22.6l32.556 45.07c3.617 5.144 6.44 9.611 8.487 13.385 1.788-3.05 4.89-7.779 9.301-14.186L103.93 0h24.01L82.385 62.013h38.34v12.862h-46.41v12.4h46.41v11.937h-46.41v28.68H54.123z"/></svg>
|
Before Width: | Height: | Size: 335 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>
|
Before Width: | Height: | Size: 821 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
|
Before Width: | Height: | Size: 623 B |
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M869.073 277.307H657.111V65.344l211.962 211.963zm-238.232 26.27V65.344l-476.498-.054v416.957h714.73v-178.67H630.841zm-335.836 360.57c-5.07-3.064-10.944-5.133-17.61-6.201-6.67-1.064-13.603-1.6-20.81-1.6h-48.821v85.641h48.822c7.206 0 14.14-.532 20.81-1.6 6.665-1.065 12.54-3.133 17.609-6.202 5.064-3.063 9.134-7.406 12.208-13.007 3.065-5.602 4.6-12.937 4.6-22.011 0-9.07-1.535-16.408-4.6-22.01-3.074-5.603-7.144-9.94-12.208-13.01zM35.82 541.805v416.904h952.358V541.805H35.821zm331.421 191.179c-3.6 11.071-9.343 20.879-17.209 29.413-7.874 8.542-18.078 15.408-30.617 20.61-12.544 5.206-27.747 7.807-45.621 7.807h-66.036v102.45h-62.831V607.517h128.867c17.874 0 33.077 2.6 45.62 7.802 12.541 5.207 22.745 12.076 30.618 20.615 7.866 8.538 13.604 18.277 17.21 29.212 3.6 10.943 5.401 22.278 5.401 34.018 0 11.477-1.8 22.752-5.402 33.819zM644.9 806.417c-5.343 17.61-13.408 32.818-24.212 45.627-10.807 12.803-24.283 22.879-40.423 30.213-16.146 7.343-35.155 11.007-57.03 11.007h-123.26V607.518h123.26c18.41 0 35.552 2.941 51.428 8.808 15.873 5.869 29.618 14.671 41.22 26.412 11.608 11.744 20.674 26.411 27.217 44.02 6.535 17.61 9.803 38.288 9.803 62.035 0 20.81-2.67 40.02-8.003 57.624zm245.362-146.07h-138.07v66.03h119.66v48.829h-119.66v118.058h-62.83V607.518h200.9v52.829h-.001zm-318.2 25.611c-6.402-8.266-14.877-14.604-25.412-19.01-10.544-4.402-23.551-6.602-39.019-6.602h-44.825v180.088h56.029c9.07 0 17.872-1.463 26.415-4.401 8.535-2.932 16.14-7.802 22.812-14.609 6.665-6.8 12.007-15.667 16.007-26.61 4.003-10.94 6.003-24.275 6.003-40.021 0-14.408-1.4-27.416-4.202-39.019-2.8-11.607-7.406-21.542-13.808-29.816zm0 0"/></svg>
|
Before Width: | Height: | Size: 1.7 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M104.185 95.254c8.161 7.574 13.145 17.441 13.145 28.28 0 1.508-.098 2.998-.285 4.466h-10.784c.238-1.465.403-2.948.403-4.465 0-8.983-4.36-17.115-11.419-23.216C86 104.66 75.355 107.162 64 107.162c-11.344 0-21.98-2.495-31.22-6.83-7.064 6.099-11.444 14.218-11.444 23.203 0 1.517.165 3 .403 4.465H10.955a35.444 35.444 0 0 1-.285-4.465c0-10.838 4.974-20.713 13.127-28.291C9.294 85.42.003 70.417.003 53.58.003 23.99 28.656.001 64 .001s63.997 23.988 63.997 53.58c0 16.842-9.299 31.85-23.812 41.673zM64 36.867c-29.454 0-53.33-10.077-53.33 15.342 0 25.418 23.876 46.023 53.33 46.023 29.454 0 53.33-20.605 53.33-46.023 0-25.419-23.876-15.342-53.33-15.342zm24.888 25.644c-3.927 0-7.111-2.665-7.111-5.953 0-3.288 3.184-5.954 7.11-5.954 3.928 0 7.111 2.666 7.111 5.954s-3.183 5.953-7.11 5.953zm-3.556 16.372c0 4.11-9.55 7.442-21.332 7.442-11.781 0-21.332-3.332-21.332-7.442 0-1.06.656-2.064 1.8-2.976 3.295 2.626 10.79 4.465 19.532 4.465 8.743 0 16.237-1.84 19.531-4.465 1.145.912 1.801 1.916 1.801 2.976zm-46.22-16.372c-3.927 0-7.11-2.665-7.11-5.953 0-3.288 3.183-5.954 7.11-5.954 3.927 0 7.111 2.666 7.111 5.954s-3.184 5.953-7.11 5.953z"/></svg>
|
Before Width: | Height: | Size: 1.2 KiB |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M95.648 118.762c0 5.035-3.563 9.121-7.979 9.121H7.98c-4.416 0-7.979-4.086-7.979-9.121C0 100.519 15.408 83.47 31.152 76.75c-9.099-6.43-15.216-17.863-15.216-30.987v-9.128c0-20.16 14.293-36.518 31.893-36.518s31.894 16.358 31.894 36.518v9.122c0 13.137-6.123 24.556-15.216 30.993 15.738 6.726 31.141 23.769 31.141 42.012z"/><path d="M106.032 118.252h15.867c3.376 0 6.101-3.125 6.101-6.972 0-13.957-11.787-26.984-23.819-32.123 6.955-4.919 11.638-13.66 11.638-23.704v-6.985c0-15.416-10.928-27.926-24.39-27.926-1.674 0-3.306.193-4.89.561 1.936 4.713 3.018 9.974 3.018 15.526v9.121c0 13.137-3.056 23.111-11.066 30.993 14.842 4.41 27.312 23.42 27.541 41.509z"/></svg>
|
Before Width: | Height: | Size: 731 B |
|
@ -1 +0,0 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M18.448 57.545l-.244-.744-.198-.968-.132-.53v-2.181l.236-.859.24-.908.317-.953.428-1.06.561-1.103.794-1.104v-.773l.077-.724.123-.984.34-1.106.313-1.194.25-.548.289-.511.371-.569.405-.423v-2.73l.234-1.407.236-1.633.42-1.955.577-2.035.43-1.118.426-1.217.468-1.135.559-1.216.57-1.332.655-1.247.737-1.331.929-1.33.43-.762.457-.624.995-1.406 1.025-1.403 1.163-1.444 1.246-1.405 1.352-1.384 1.41-1.423 1.708-1.536 1.083-.934 1.322-1.008 1.34-.89 1.448-.855 1.392-.76 1.57-.63 1.667-.775 1.657-.532 1.653-.552 1.787-.548 1.785-.417 1.876-.347L59.128.68l1.879-.245 1.876-.252 2.002-.106h5.912l1.97.243 1.981.231 2.019.207 1.874.441 1.979.413 1.857.475 2.035.53 1.862.646 1.782.738 1.904.78 1.736.853 1.689.95 1.655 1.044 1.425.971.662.548.693.401 1.323 1.1 1.115 1.064 1.112 1.1 1.083 1.214.894 1.178 1.064 1.217.74 1.306.752 1.162.798 1.352.661 1.175 1.113 2.489.546 1.286.428 1.192.428 1.294.384 1.217.267 1.047.347 1.231.607 2.198.388 1.924.253 1.861.217 1.497.342 2.28.077.362.274.41.737 1.18.473.8.42.832.534.892.472 1.07.307 1.093.334 1.2.252 1.232.115.605.106.746v.648l-.106.643v.8l-.192.774-.35 1.5-.403.76-.299.852v.213l.142.264.4.623 1.746 2.53 1.377 1.9.66 1.267.889 1.389.774 1.52.893 1.627.894 1.828 1.006 2.069.567 1.268.518 1.239.447 1.307.44 1.175.336 1.235.342 1.16.432 2.261.343 2.31.235 2.05v2.891l-.158 1.025-.226 1.768-.308 1.59-.48 1.44-.18.588-.336.707-.28.493-.375.607-.33.383-.42.494-.375.4-.401.34-.48.207-.432.207-.355.114h-.543l-.346-.114-.66-.32-.302-.212-.317-.223-.347-.304-.35-.342-.579-.63-.684-.89-.539-.917-.538-.734-.526-.855-.741-1.517-.833-1.579-.098-.055h-.138l-.338.247-.196.415-.326.516-.567 1.533-.856 2.182-1.096 2.626-.824 1.308-.864 1.366-1.027 1.536-1.09 1.503-.557.68-.676.743-1.555 1.497.136.135.21.214.777.446 3.235 1.524 1.41.779 1.347.756 1.332.953 1.187.982.574.443.432.511.445.593.367.643.198.533.242.64.105.554.115.647-.115.433v.44l-.105.454-.242.415-.092.325-.22.394-.587.784-.543.627-.42.47-.35.348-.893.638-1.01.556-1.077.532-1.155.511-1.287.495-.693.207-.608.167-1.496.342-1.545.325-1.552.323-1.689.27-1.74.072-1.785.21h-5.539l-1.998-.114-1.86-.168-2.005-.27-1.99-.209-2.095-.286-2.03-.495-1.981-.374-1.968-.552-2.019-.707-1.98-.585-1.044-.342-.927-.323-.586-.223-.582-.12h-1.647l-1.904-.131-.962-.096-1.24-.135-.795.705-1.085.665-1.471.701-1.628.875-.99.475-1.033.376-2.281.914-1.24.305-1.3.343-1.803.344-1.13.086-1.193.1-1.246.135-1.45.053h-5.926l-3.346-.053-3.25-.321-1.644-.23-1.589-.23-1.546-.227-1.547-.305-1.442-.456-1.434-.325-1.294-.51-1.223-.474-1.142-.533-.99-.583-.984-.71-.336-.343-.44-.415-.334-.362-.3-.417-.278-.415-.215-.42-.311-.89-.109-.46-.138-.51v-.473l.138-.533v-.53l.109-.53v-1.069l.052-.564.259-.647.215-.646.39-.779.286-.3.236-.348.615-.738.49-.38.464-.266.428-.338.676-.21.543-.324.676-.341.77-.227.775-.231.897-.192.85-.11 1.008-.13 1.093-.081.284-.092h.063l.137-.115v-.13l-.2-.266-.58-.27-1.45-1.231-.975-.761-1.127-.967-1.136-1.082-1.181-1.382-1.36-1.558-.508-.843-.672-.87-.58-1.007-.522-1.1-.704-1.047-.459-1.194-.547-1.192-.546-1.33-.397-1.273-.378-1.575-.112-.057h-.115l-.059-.113h-.14l-.23.113-.114.057-.158.264-.057.321-.119.286-.206.477-.664 1.157-.345.701-.546.612-.58.736-.641.816-.677.724-.795.701-.734.658-.814.524-.89.546-.855.325-1.008.247-.99.095h-.233l-.228-.095-.18-.384-.29-.188-.38-.912-.237-.493-.255-.707-.21-.734-.113-.724-.313-1.648-.12-.972v-3.185l.12-2.379.196-1.214.23-1.252.21-1.347.374-1.254.42-1.443.431-1.407.578-1.448.545-1.38.754-1.4.699-1.52.855-1.425 1.006-1.538 1.023-1.382 1.069-1.538.891-1.071 1.142-1.227 1.202-1.237.56-.59.678-.662.985-.836 1.012-.853 1.647-1.446 1.242-.889z"/></svg>
|
Before Width: | Height: | Size: 3.6 KiB |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617691523731" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10857" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M920.852 567.665c-27.01 201.787-199.833 357.419-409.013 357.419-151.122 0-283.263-81.233-355.16-202.412l76.102-76.102H54.65v178.131l65.847-65.847c81.895 129.771 226.549 215.973 391.343 215.973 236.69 0 431.84-177.826 459.156-407.163h-50.144zM511.839 99.704c147.298 0 276.563 77.175 349.587 193.291l-69.562 69.562H969.994v-178.13l-67.388 67.388-5.202 5.202C814.593 132.23 672.827 49.96 511.839 49.96c-236.69 0-431.84 177.826-459.156 407.163h50.144c27.01-201.787 199.832-357.419 409.012-357.419z" p-id="10858"></path></svg>
|
Before Width: | Height: | Size: 897 B |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595307154239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7317" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M316 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8zM512 622c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39zM512 482c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39z" p-id="7318"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" p-id="7319"></path><path d="M648 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8z" p-id="7320"></path></svg>
|
Before Width: | Height: | Size: 950 B |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1562375990891" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1725" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M213.333333 533.333333a21.333333 21.333333 0 0 1 0-42.666666l577.706667-1.92a21.333333 21.333333 0 0 1 0 42.666666L213.333333 533.333333z" p-id="1726"></path><path d="M512 810.666667a21.333333 21.333333 0 0 1-15.573333-6.826667 21.333333 21.333333 0 0 1 1.066666-30.08L779.306667 512 497.493333 250.24a21.333333 21.333333 0 1 1 29.013334-31.146667l298.666666 277.333334a21.333333 21.333333 0 0 1 0 31.146666l-298.666666 277.333334A21.333333 21.333333 0 0 1 512 810.666667z" p-id="1727"></path></svg>
|
Before Width: | Height: | Size: 874 B |
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595306944988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1820" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M1464.3 279.7" p-id="1821"></path><path d="M512 960c-60.5 0-119.1-11.9-174.4-35.2-53.4-22.6-101.3-54.9-142.4-96s-73.4-89-96-142.4C75.9 631.1 64 572.5 64 512s11.9-119.1 35.2-174.4c22.6-53.4 54.9-101.3 96-142.4s89-73.4 142.4-96C392.9 75.9 451.5 64 512 64s119.1 11.9 174.4 35.2c53.4 22.6 101.3 54.9 142.4 96s73.4 89 96 142.4C948.1 392.9 960 451.5 960 512c0 19.1-15.5 34.6-34.6 34.6s-34.6-15.5-34.6-34.6c0-51.2-10-100.8-29.8-147.4-19.1-45.1-46.4-85.6-81.2-120.4C745 209.4 704.5 182 659.4 163c-46.7-19.7-96.3-29.8-147.4-29.8-51.2 0-100.8 10-147.4 29.8-45.1 19.1-85.6 46.4-120.4 81.2S182 319.5 163 364.6c-19.7 46.7-29.8 96.3-29.8 147.4 0 51.2 10 100.8 29.8 147.4 19.1 45.1 46.4 85.6 81.2 120.4C279 814.6 319.5 842 364.6 861c46.7 19.7 96.3 29.8 147.4 29.8 64.6 0 128.4-16.5 184.4-47.8 54.4-30.4 100.9-74.1 134.6-126.6 10.3-16.1 31.7-20.8 47.8-10.4 16.1 10.3 20.8 31.7 10.4 47.8-39.8 62-94.8 113.7-159.1 149.6-66.2 37-141.7 56.6-218.1 56.6z" p-id="1822"></path><path d="M924 552c-19.8 0-36-16.2-36-36V228c0-19.8 16.2-36 36-36s36 16.2 36 36v288c0 19.8-16.2 36-36 36zM275.4 575.5c9.5-2.5 19.1 2.9 22.3 12.2 3.5 10.2 9.9 17.7 19.1 22.6 7.1 3.9 15.1 5.8 24 5.8 16.6 0 30.8-6.9 42.5-20.8 11.7-13.8 20-32.7 24.9-75.1-7.7 12.2-17.3 20.8-28.7 25.8-11.4 5-23.7 7.4-36.8 7.4-26.7 0-47.7-8.3-63.3-24.9-15.5-16.6-23.3-37.9-23.3-64.1 0-25.1 7.7-47.1 23-66.2 15.3-19 37.9-28.6 67.8-28.6 40.3 0 68.1 18.1 83.4 54.4 8.5 19.9 12.7 44.9 12.7 74.9 0 33.8-5.1 63.8-15.3 89.9-16.9 43.5-45.5 65.2-85.8 65.2-27 0-47.6-7.1-61.6-21.2-10-10.1-16.4-22-19.3-35.8-2-9.6 4-19.1 13.5-21.6l0.9 0.1z m103-74.4c9.4-7.5 14.1-20.6 14.1-39.3 0-16.8-4.2-29.3-12.7-37.5S360.6 412 347.5 412c-14 0-25.2 4.7-33.4 14.1-8.2 9.4-12.4 22-12.4 37.7 0 14.9 3.6 26.7 10.9 35.5 7.2 8.8 18.8 13.1 34.6 13.1 11.4 0 21.8-3.8 31.2-11.3zM646.6 414.4c12.4 22.8 18.5 54 18.5 93.7 0 37.6-5.6 68.7-16.8 93.3-16.2 35.3-42.8 52.9-79.6 52.9-33.2 0-57.9-14.4-74.2-43.3-13.5-24.1-20.3-56.4-20.3-97 0-31.4 4.1-58.4 12.2-80.9 15.2-42 42.7-63 82.5-63 35.9 0 61.8 14.8 77.7 44.3z m-40.2 173.3c9.4-13.9 14-39.9 14-78 0-27.4-3.4-50-10.1-67.7-6.8-17.7-19.9-26.6-39.4-26.6-17.9 0-31 8.4-39.3 25.2-8.3 16.8-12.4 41.6-12.4 74.3 0 24.6 2.6 44.4 7.9 59.4 8.1 22.8 22 34.3 41.6 34.3 15.7 0 28.3-7 37.7-20.9zM803.3 387.2c11.2 11.3 16.8 25 16.8 41.2 0 16.7-5.8 30.7-17.5 41.8C791 481.4 777.4 487 762 487c-17.1 0-31.2-5.8-42.1-17.4-10.9-11.6-16.4-25.1-16.4-40.6 0-16.5 5.8-30.4 17.3-41.7 11.5-11.3 25.3-17 41.2-17 16.3 0 30.1 5.7 41.3 16.9zM739.5 451c6.2 6.2 13.7 9.3 22.5 9.3 8.4 0 15.8-3.1 22.1-9.3 6.3-6.2 9.4-13.7 9.4-22.6 0-8.5-3.1-15.9-9.3-22.1-6.2-6.2-13.6-9.3-22.2-9.3s-16.1 3.1-22.4 9.3c-6.3 6.2-9.4 13.7-9.4 22.6-0.1 8.4 3 15.8 9.3 22.1z" p-id="1823"></path></svg>
|
Before Width: | Height: | Size: 3.0 KiB |