AlanScipio
2 years ago
parent
78e61d89ba
commit
c3de97c825
@ -1,11 +1,8 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 若依管理系统
|
VITE_APP_TITLE = 若依管理系统DEV
|
||||||
|
|
||||||
# 开发环境配置
|
# 开发环境配置
|
||||||
ENV = 'development'
|
VITE_APP_ENV = 'development'
|
||||||
|
|
||||||
# 若依管理系统/开发环境
|
# 若依管理系统/开发环境
|
||||||
VUE_APP_BASE_API = '/dev-api'
|
VITE_APP_BASE_API = '/dev-api'
|
||||||
|
|
||||||
# 路由懒加载
|
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 若依管理系统
|
VITE_APP_TITLE = 若依管理系统PROD
|
||||||
|
|
||||||
# 生产环境配置
|
# 生产环境配置
|
||||||
ENV = 'production'
|
VITE_APP_ENV = 'production'
|
||||||
|
|
||||||
# 若依管理系统/生产环境
|
# 若依管理系统/生产环境
|
||||||
VUE_APP_BASE_API = '/prod-api'
|
VITE_APP_BASE_API = '/prod-api'
|
||||||
|
|
||||||
|
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||||
|
VITE_BUILD_COMPRESS = gzip
|
||||||
@ -1,10 +1,11 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 若依管理系统
|
VITE_APP_TITLE = 若依管理系统STAGING
|
||||||
|
|
||||||
NODE_ENV = production
|
# 生产环境配置
|
||||||
|
VITE_APP_ENV = 'staging'
|
||||||
|
|
||||||
# 测试环境配置
|
# 若依管理系统/生产环境
|
||||||
ENV = 'staging'
|
VITE_APP_BASE_API = '/stage-api'
|
||||||
|
|
||||||
# 若依管理系统/测试环境
|
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||||
VUE_APP_BASE_API = '/stage-api'
|
VITE_BUILD_COMPRESS = gzip
|
||||||
@ -1,10 +0,0 @@
|
|||||||
# 忽略build目录下类型为js的文件的语法检查
|
|
||||||
build/*.js
|
|
||||||
# 忽略src/assets目录下文件的语法检查
|
|
||||||
src/assets
|
|
||||||
# 忽略public目录下文件的语法检查
|
|
||||||
public
|
|
||||||
# 忽略当前目录下为js的文件的语法检查
|
|
||||||
*.js
|
|
||||||
# 忽略当前目录下为vue的文件的语法检查
|
|
||||||
*.vue
|
|
||||||
@ -1,199 +0,0 @@
|
|||||||
// ESlint 检查配置
|
|
||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
parserOptions: {
|
|
||||||
parser: 'babel-eslint',
|
|
||||||
sourceType: 'module'
|
|
||||||
},
|
|
||||||
env: {
|
|
||||||
browser: true,
|
|
||||||
node: true,
|
|
||||||
es6: true,
|
|
||||||
},
|
|
||||||
extends: ['plugin:vue/recommended', 'eslint:recommended'],
|
|
||||||
|
|
||||||
// add your custom rules here
|
|
||||||
//it is base on https://github.com/vuejs/eslint-config-vue
|
|
||||||
rules: {
|
|
||||||
"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,
|
|
||||||
'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': [2, 2, {
|
|
||||||
'SwitchCase': 1
|
|
||||||
}],
|
|
||||||
'jsx-quotes': [2, 'prefer-single'],
|
|
||||||
'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': 2,
|
|
||||||
'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-unused-vars': [2, {
|
|
||||||
'vars': 'all',
|
|
||||||
'args': 'none'
|
|
||||||
}],
|
|
||||||
'no-useless-call': 2,
|
|
||||||
'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-before-function-paren': [2, 'never'],
|
|
||||||
'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': process.env.NODE_ENV === 'production' ? 2 : 0,
|
|
||||||
'object-curly-spacing': [2, 'always', {
|
|
||||||
objectsInObjects: false
|
|
||||||
}],
|
|
||||||
'array-bracket-spacing': [2, 'never']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2018 RuoYi
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||||
|
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||||
|
subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||||
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||||
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||||
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||||
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
@ -1,13 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
|
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
],
|
|
||||||
'env': {
|
|
||||||
'development': {
|
|
||||||
// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
|
|
||||||
// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
|
|
||||||
'plugins': ['dynamic-import-node']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,12 +1,12 @@
|
|||||||
@echo off
|
@echo off
|
||||||
echo.
|
echo.
|
||||||
echo [信息] 使用 Vue CLI 命令运行 Web 工程。
|
echo [信息] 使用 Vite 命令运行 Web 工程。
|
||||||
echo.
|
echo.
|
||||||
|
|
||||||
%~d0
|
%~d0
|
||||||
cd %~dp0
|
cd %~dp0
|
||||||
|
|
||||||
cd ..
|
cd ..
|
||||||
npm run dev
|
yarn dev
|
||||||
|
|
||||||
pause
|
pause
|
||||||
@ -1,35 +0,0 @@
|
|||||||
const { run } = require('runjs')
|
|
||||||
const chalk = require('chalk')
|
|
||||||
const config = require('../vue.config.js')
|
|
||||||
const rawArgv = process.argv.slice(2)
|
|
||||||
const args = rawArgv.join(' ')
|
|
||||||
|
|
||||||
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
|
|
||||||
const report = rawArgv.includes('--report')
|
|
||||||
|
|
||||||
run(`vue-cli-service build ${args}`)
|
|
||||||
|
|
||||||
const port = 9526
|
|
||||||
const publicPath = config.publicPath
|
|
||||||
|
|
||||||
var connect = require('connect')
|
|
||||||
var serveStatic = require('serve-static')
|
|
||||||
const app = connect()
|
|
||||||
|
|
||||||
app.use(
|
|
||||||
publicPath,
|
|
||||||
serveStatic('./dist', {
|
|
||||||
index: ['index.html', '/']
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
app.listen(port, function () {
|
|
||||||
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
|
|
||||||
if (report) {
|
|
||||||
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
run(`vue-cli-service build ${args}`)
|
|
||||||
}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
User-agent: *
|
|
||||||
Disallow: /
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import SvgIcon from '@/components/SvgIcon'// svg component
|
|
||||||
|
|
||||||
// register globally
|
|
||||||
Vue.component('svg-icon', SvgIcon)
|
|
||||||
|
|
||||||
const req = require.context('./svg', false, /\.svg$/)
|
|
||||||
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
|
||||||
requireAll(req)
|
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -1,22 +0,0 @@
|
|||||||
# replace default config
|
|
||||||
|
|
||||||
# multipass: true
|
|
||||||
# full: true
|
|
||||||
|
|
||||||
plugins:
|
|
||||||
|
|
||||||
# - name
|
|
||||||
#
|
|
||||||
# or:
|
|
||||||
# - name: false
|
|
||||||
# - name: true
|
|
||||||
#
|
|
||||||
# or:
|
|
||||||
# - name:
|
|
||||||
# param1: 1
|
|
||||||
# param2: 2
|
|
||||||
|
|
||||||
- removeAttrs:
|
|
||||||
attrs:
|
|
||||||
- 'fill'
|
|
||||||
- 'fill-rule'
|
|
||||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.5 KiB |
@ -1,31 +0,0 @@
|
|||||||
/**
|
|
||||||
* I think element-ui's default theme color is too light for long-term use.
|
|
||||||
* So I modified the default color and you can modify it to your liking.
|
|
||||||
**/
|
|
||||||
|
|
||||||
/* theme color */
|
|
||||||
$--color-primary: #1890ff;
|
|
||||||
$--color-success: #13ce66;
|
|
||||||
$--color-warning: #ffba00;
|
|
||||||
$--color-danger: #ff4949;
|
|
||||||
// $--color-info: #1E1E1E;
|
|
||||||
|
|
||||||
$--button-font-weight: 400;
|
|
||||||
|
|
||||||
// $--color-text-regular: #1f2d3d;
|
|
||||||
|
|
||||||
$--border-color-light: #dfe4ed;
|
|
||||||
$--border-color-lighter: #e6ebf5;
|
|
||||||
|
|
||||||
$--table-border:1px solid#dfe6ec;
|
|
||||||
|
|
||||||
/* icon font path, required */
|
|
||||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
|
||||||
|
|
||||||
@import "~element-ui/packages/theme-chalk/src/index";
|
|
||||||
|
|
||||||
// the :export directive is the magic sauce for webpack
|
|
||||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
|
||||||
:export {
|
|
||||||
theme: $--color-primary;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,49 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import store from '@/store'
|
|
||||||
import DataDict from '@/utils/dict'
|
|
||||||
import { getDicts as getDicts } from '@/api/system/dict/data'
|
|
||||||
|
|
||||||
function searchDictByKey(dict, key) {
|
|
||||||
if (key == null && key == "") {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
for (let i = 0; i < dict.length; i++) {
|
|
||||||
if (dict[i].key == key) {
|
|
||||||
return dict[i].value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function install() {
|
|
||||||
Vue.use(DataDict, {
|
|
||||||
metas: {
|
|
||||||
'*': {
|
|
||||||
labelField: 'dictLabel',
|
|
||||||
valueField: 'dictValue',
|
|
||||||
request(dictMeta) {
|
|
||||||
const storeDict = searchDictByKey(store.getters.dict, dictMeta.type)
|
|
||||||
if (storeDict) {
|
|
||||||
return new Promise(resolve => { resolve(storeDict) })
|
|
||||||
} else {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
getDicts(dictMeta.type).then(res => {
|
|
||||||
store.dispatch('dict/setDict', { key: dictMeta.type, value: res.data })
|
|
||||||
resolve(res.data)
|
|
||||||
}).catch(error => {
|
|
||||||
reject(error)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
install,
|
|
||||||
}
|
|
||||||
@ -1,11 +1,8 @@
|
|||||||
|
let icons = []
|
||||||
const req = require.context('../../assets/icons/svg', false, /\.svg$/)
|
const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
|
||||||
const requireAll = requireContext => requireContext.keys()
|
for (const path in modules) {
|
||||||
|
const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
|
||||||
const re = /\.\/(.*)\.svg/
|
icons.push(p);
|
||||||
|
}
|
||||||
const icons = requireAll(req).map(i => {
|
|
||||||
return i.match(re)[1]
|
|
||||||
})
|
|
||||||
|
|
||||||
export default icons
|
export default icons
|
||||||
@ -1,142 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
|
|
||||||
<div class="pan-info">
|
|
||||||
<div class="pan-info-roles-container">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- eslint-disable-next-line -->
|
|
||||||
<div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'PanThumb',
|
|
||||||
props: {
|
|
||||||
image: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
zIndex: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '150px'
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '150px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.pan-item {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
cursor: default;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-info-roles-container {
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-thumb {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
transform-origin: 95% 40%;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .pan-thumb:after {
|
|
||||||
content: '';
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 40%;
|
|
||||||
left: 95%;
|
|
||||||
margin: -4px 0 0 -4px;
|
|
||||||
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
|
||||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
|
||||||
} */
|
|
||||||
|
|
||||||
.pan-info {
|
|
||||||
position: absolute;
|
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-info h3 {
|
|
||||||
color: #fff;
|
|
||||||
text-transform: uppercase;
|
|
||||||
position: relative;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
font-size: 18px;
|
|
||||||
margin: 0 60px;
|
|
||||||
padding: 22px 0 0 0;
|
|
||||||
height: 85px;
|
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
|
||||||
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-info p {
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 5px;
|
|
||||||
font-style: italic;
|
|
||||||
margin: 0 30px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-info p a {
|
|
||||||
display: block;
|
|
||||||
color: #333;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
color: #fff;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 9px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
padding-top: 24px;
|
|
||||||
margin: 7px auto 0;
|
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
|
||||||
opacity: 0;
|
|
||||||
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
|
||||||
transform: translateX(60px) rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-info p a:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-item:hover .pan-thumb {
|
|
||||||
transform: rotate(-110deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pan-item:hover .pan-info p a {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0px) rotate(0deg);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="rightPanel" class="rightPanel-container">
|
|
||||||
<div class="rightPanel-background" />
|
|
||||||
<div class="rightPanel">
|
|
||||||
<div class="rightPanel-items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'RightPanel',
|
|
||||||
props: {
|
|
||||||
clickNotClose: {
|
|
||||||
default: false,
|
|
||||||
type: Boolean
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
show: {
|
|
||||||
get() {
|
|
||||||
return this.$store.state.settings.showSettings
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
|
||||||
key: 'showSettings',
|
|
||||||
value: val
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
show(value) {
|
|
||||||
if (value && !this.clickNotClose) {
|
|
||||||
this.addEventClick()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.addEventClick()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
const elx = this.$refs.rightPanel
|
|
||||||
elx.remove()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addEventClick() {
|
|
||||||
window.addEventListener('click', this.closeSidebar)
|
|
||||||
},
|
|
||||||
closeSidebar(evt) {
|
|
||||||
const parent = evt.target.closest('.el-drawer__body')
|
|
||||||
if (!parent) {
|
|
||||||
this.show = false
|
|
||||||
window.removeEventListener('click', this.closeSidebar)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.rightPanel-background {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
|
|
||||||
background: rgba(0, 0, 0, .2);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightPanel {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 260px;
|
|
||||||
height: 100vh;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
|
||||||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
|
||||||
transform: translate(100%);
|
|
||||||
background: #fff;
|
|
||||||
z-index: 40000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.handle-button {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
position: absolute;
|
|
||||||
left: -48px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
border-radius: 6px 0 0 6px !important;
|
|
||||||
z-index: 0;
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 48px;
|
|
||||||
i {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,56 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dropdown trigger="click" @command="handleSetSize">
|
<div>
|
||||||
<div>
|
<el-dropdown trigger="click" @command="handleSetSize">
|
||||||
<svg-icon class-name="size-icon" icon-class="size" />
|
<div class="size-icon--style">
|
||||||
</div>
|
<svg-icon class-name="size-icon" icon-class="size" />
|
||||||
<el-dropdown-menu slot="dropdown">
|
</div>
|
||||||
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
|
<template #dropdown>
|
||||||
{{ item.label }}
|
<el-dropdown-menu>
|
||||||
</el-dropdown-item>
|
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
|
||||||
</el-dropdown-menu>
|
{{ item.label }}
|
||||||
</el-dropdown>
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
import useAppStore from "@/store/modules/app";
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sizeOptions: [
|
|
||||||
{ label: 'Default', value: 'default' },
|
|
||||||
{ label: 'Medium', value: 'medium' },
|
|
||||||
{ label: 'Small', value: 'small' },
|
|
||||||
{ label: 'Mini', value: 'mini' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
size() {
|
|
||||||
return this.$store.getters.size
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleSetSize(size) {
|
|
||||||
this.$ELEMENT.size = size
|
|
||||||
this.$store.dispatch('app/setSize', size)
|
|
||||||
this.refreshView()
|
|
||||||
this.$message({
|
|
||||||
message: 'Switch Size Success',
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
refreshView() {
|
|
||||||
// In order to make the cached page re-rendered
|
|
||||||
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
|
|
||||||
|
|
||||||
const { fullPath } = this.$route
|
const appStore = useAppStore();
|
||||||
|
const size = computed(() => appStore.size);
|
||||||
this.$nextTick(() => {
|
const route = useRoute();
|
||||||
this.$router.replace({
|
const router = useRouter();
|
||||||
path: '/redirect' + fullPath
|
const { proxy } = getCurrentInstance();
|
||||||
})
|
const sizeOptions = ref([
|
||||||
})
|
{ label: "较大", value: "large" },
|
||||||
}
|
{ label: "默认", value: "default" },
|
||||||
}
|
{ label: "稍小", value: "small" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
function handleSetSize(size) {
|
||||||
|
proxy.$modal.loading("正在设置布局大小，请稍候...");
|
||||||
|
appStore.setSize(size);
|
||||||
|
setTimeout("window.location.reload()", 1000);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
.size-icon--style {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 50px;
|
||||||
|
padding-right: 7px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import * as components from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install: (app) => {
|
||||||
|
for (const key in components) {
|
||||||
|
const componentConfig = components[key];
|
||||||
|
app.component(componentConfig.name, componentConfig);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,173 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-color-picker
|
|
||||||
v-model="theme"
|
|
||||||
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
|
|
||||||
class="theme-picker"
|
|
||||||
popper-class="theme-picker-dropdown"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const version = require('element-ui/package.json').version // element-ui version from node_modules
|
|
||||||
const ORIGINAL_THEME = '#409EFF' // default color
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chalk: '', // content of theme-chalk css
|
|
||||||
theme: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
defaultTheme() {
|
|
||||||
return this.$store.state.settings.theme
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
defaultTheme: {
|
|
||||||
handler: function(val, oldVal) {
|
|
||||||
this.theme = val
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
},
|
|
||||||
async theme(val) {
|
|
||||||
await this.setTheme(val)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if(this.defaultTheme !== ORIGINAL_THEME) {
|
|
||||||
this.setTheme(this.defaultTheme)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async setTheme(val) {
|
|
||||||
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
|
|
||||||
if (typeof val !== 'string') return
|
|
||||||
const themeCluster = this.getThemeCluster(val.replace('#', ''))
|
|
||||||
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
|
|
||||||
|
|
||||||
const getHandler = (variable, id) => {
|
|
||||||
return () => {
|
|
||||||
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
|
|
||||||
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
|
|
||||||
|
|
||||||
let styleTag = document.getElementById(id)
|
|
||||||
if (!styleTag) {
|
|
||||||
styleTag = document.createElement('style')
|
|
||||||
styleTag.setAttribute('id', id)
|
|
||||||
document.head.appendChild(styleTag)
|
|
||||||
}
|
|
||||||
styleTag.innerText = newStyle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.chalk) {
|
|
||||||
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
|
|
||||||
await this.getCSSString(url, 'chalk')
|
|
||||||
}
|
|
||||||
|
|
||||||
const chalkHandler = getHandler('chalk', 'chalk-style')
|
|
||||||
|
|
||||||
chalkHandler()
|
|
||||||
|
|
||||||
const styles = [].slice.call(document.querySelectorAll('style'))
|
|
||||||
.filter(style => {
|
|
||||||
const text = style.innerText
|
|
||||||
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
|
|
||||||
})
|
|
||||||
styles.forEach(style => {
|
|
||||||
const { innerText } = style
|
|
||||||
if (typeof innerText !== 'string') return
|
|
||||||
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
|
|
||||||
})
|
|
||||||
|
|
||||||
this.$emit('change', val)
|
|
||||||
},
|
|
||||||
|
|
||||||
updateStyle(style, oldCluster, newCluster) {
|
|
||||||
let newStyle = style
|
|
||||||
oldCluster.forEach((color, index) => {
|
|
||||||
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
|
|
||||||
})
|
|
||||||
return newStyle
|
|
||||||
},
|
|
||||||
|
|
||||||
getCSSString(url, variable) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
const xhr = new XMLHttpRequest()
|
|
||||||
xhr.onreadystatechange = () => {
|
|
||||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
||||||
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
|
|
||||||
resolve()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
xhr.open('GET', url)
|
|
||||||
xhr.send()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
getThemeCluster(theme) {
|
|
||||||
const tintColor = (color, tint) => {
|
|
||||||
let red = parseInt(color.slice(0, 2), 16)
|
|
||||||
let green = parseInt(color.slice(2, 4), 16)
|
|
||||||
let blue = parseInt(color.slice(4, 6), 16)
|
|
||||||
|
|
||||||
if (tint === 0) { // when primary color is in its rgb space
|
|
||||||
return [red, green, blue].join(',')
|
|
||||||
} else {
|
|
||||||
red += Math.round(tint * (255 - red))
|
|
||||||
green += Math.round(tint * (255 - green))
|
|
||||||
blue += Math.round(tint * (255 - blue))
|
|
||||||
|
|
||||||
red = red.toString(16)
|
|
||||||
green = green.toString(16)
|
|
||||||
blue = blue.toString(16)
|
|
||||||
|
|
||||||
return `#${red}${green}${blue}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const shadeColor = (color, shade) => {
|
|
||||||
let red = parseInt(color.slice(0, 2), 16)
|
|
||||||
let green = parseInt(color.slice(2, 4), 16)
|
|
||||||
let blue = parseInt(color.slice(4, 6), 16)
|
|
||||||
|
|
||||||
red = Math.round((1 - shade) * red)
|
|
||||||
green = Math.round((1 - shade) * green)
|
|
||||||
blue = Math.round((1 - shade) * blue)
|
|
||||||
|
|
||||||
red = red.toString(16)
|
|
||||||
green = green.toString(16)
|
|
||||||
blue = blue.toString(16)
|
|
||||||
|
|
||||||
return `#${red}${green}${blue}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const clusters = [theme]
|
|
||||||
for (let i = 0; i <= 9; i++) {
|
|
||||||
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
|
|
||||||
}
|
|
||||||
clusters.push(shadeColor(theme, 0.1))
|
|
||||||
return clusters
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.theme-message,
|
|
||||||
.theme-picker-dropdown {
|
|
||||||
z-index: 99999 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-picker .el-color-picker__trigger {
|
|
||||||
height: 26px !important;
|
|
||||||
width: 26px !important;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-picker-dropdown .el-color-dropdown__link-btn {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<div class="el-tree-select">
|
||||||
|
<el-select
|
||||||
|
style="width: 100%"
|
||||||
|
v-model="valueId"
|
||||||
|
ref="treeSelect"
|
||||||
|
:filterable="true"
|
||||||
|
:clearable="true"
|
||||||
|
@clear="clearHandle"
|
||||||
|
:filter-method="selectFilterData"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
>
|
||||||
|
<el-option :value="valueId" :label="valueTitle">
|
||||||
|
<el-tree
|
||||||
|
id="tree-option"
|
||||||
|
ref="selectTree"
|
||||||
|
:accordion="accordion"
|
||||||
|
:data="options"
|
||||||
|
:props="objMap"
|
||||||
|
:node-key="objMap.value"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:default-expanded-keys="defaultExpandedKey"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
></el-tree>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
/* 配置项 */
|
||||||
|
objMap: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
value: 'id', // ID字段名
|
||||||
|
label: 'label', // 显示名称
|
||||||
|
children: 'children' // 子级字段名
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 自动收起 */
|
||||||
|
accordion: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**当前双向数据绑定的值 */
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/**当前的数据 */
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
/**输入框内部的文字 */
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:value']);
|
||||||
|
|
||||||
|
const valueId = computed({
|
||||||
|
get: () => props.value,
|
||||||
|
set: (val) => {
|
||||||
|
emit('update:value', val)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const valueTitle = ref('');
|
||||||
|
const defaultExpandedKey = ref([]);
|
||||||
|
|
||||||
|
function initHandle() {
|
||||||
|
nextTick(() => {
|
||||||
|
const selectedValue = valueId.value;
|
||||||
|
if(selectedValue !== null && typeof (selectedValue) !== 'undefined') {
|
||||||
|
const node = proxy.$refs.selectTree.getNode(selectedValue)
|
||||||
|
if (node) {
|
||||||
|
valueTitle.value = node.data[props.objMap.label]
|
||||||
|
proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
|
||||||
|
defaultExpandedKey.value = [selectedValue] // 设置默认展开
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
clearHandle()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function handleNodeClick(node) {
|
||||||
|
valueTitle.value = node[props.objMap.label]
|
||||||
|
valueId.value = node[props.objMap.value];
|
||||||
|
defaultExpandedKey.value = [];
|
||||||
|
proxy.$refs.treeSelect.blur()
|
||||||
|
selectFilterData('')
|
||||||
|
}
|
||||||
|
function selectFilterData(val) {
|
||||||
|
proxy.$refs.selectTree.filter(val)
|
||||||
|
}
|
||||||
|
function filterNode(value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
return data[props.objMap['label']].indexOf(value) !== -1
|
||||||
|
}
|
||||||
|
function clearHandle() {
|
||||||
|
valueTitle.value = ''
|
||||||
|
valueId.value = ''
|
||||||
|
defaultExpandedKey.value = [];
|
||||||
|
clearSelected()
|
||||||
|
}
|
||||||
|
function clearSelected() {
|
||||||
|
const allNode = document.querySelectorAll('#tree-option .el-tree-node')
|
||||||
|
allNode.forEach((element) => element.classList.remove('is-current'))
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initHandle()
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(valueId, () => {
|
||||||
|
initHandle();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
@import "@/assets/styles/variables.module.scss";
|
||||||
|
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
|
||||||
|
padding: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select-dropdown__item.selected {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li .el-tree .el-tree-node__content {
|
||||||
|
height: auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tree-node__content:hover),
|
||||||
|
:deep(.el-tree-node__content:active),
|
||||||
|
:deep(.is-current > div:first-child),
|
||||||
|
:deep(.el-tree-node__content:focus) {
|
||||||
|
background-color: mix(#fff, $--color-primary, 90%);
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,36 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-loading="loading" :style="'height:' + height">
|
<div v-loading="loading" :style="'height:' + height">
|
||||||
<iframe
|
<iframe
|
||||||
:src="src"
|
:src="url"
|
||||||
frameborder="no"
|
frameborder="no"
|
||||||
style="width: 100%; height: 100%"
|
style="width: 100%; height: 100%"
|
||||||
scrolling="auto"
|
scrolling="auto" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
export default {
|
<script setup>
|
||||||
props: {
|
const props = defineProps({
|
||||||
src: {
|
src: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
height: document.documentElement.clientHeight - 94.5 + "px;",
|
|
||||||
loading: true,
|
|
||||||
url: this.src
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.loading = false;
|
|
||||||
}, 300);
|
|
||||||
const that = this;
|
|
||||||
window.onresize = function temp() {
|
|
||||||
that.height = document.documentElement.clientHeight - 94.5 + "px;";
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
})
|
||||||
|
|
||||||
|
const height = ref(document.documentElement.clientHeight - 94.5 + "px;")
|
||||||
|
const loading = ref(true)
|
||||||
|
const url = computed(() => props.src)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 300);
|
||||||
|
window.onresize = function temp() {
|
||||||
|
height.value = document.documentElement.clientHeight - 94.5 + "px;";
|
||||||
|
};
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -0,0 +1,66 @@
|
|||||||
|
/**
|
||||||
|
* v-copyText 复制文本内容
|
||||||
|
* Copyright (c) 2022 ruoyi
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
beforeMount(el, { value, arg }) {
|
||||||
|
if (arg === "callback") {
|
||||||
|
el.$copyCallback = value;
|
||||||
|
} else {
|
||||||
|
el.$copyValue = value;
|
||||||
|
const handler = () => {
|
||||||
|
copyTextToClipboard(el.$copyValue);
|
||||||
|
if (el.$copyCallback) {
|
||||||
|
el.$copyCallback(el.$copyValue);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
el.addEventListener("click", handler);
|
||||||
|
el.$destroyCopy = () => el.removeEventListener("click", handler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyTextToClipboard(input, { target = document.body } = {}) {
|
||||||
|
const element = document.createElement('textarea');
|
||||||
|
const previouslyFocusedElement = document.activeElement;
|
||||||
|
|
||||||
|
element.value = input;
|
||||||
|
|
||||||
|
// Prevent keyboard from showing on mobile
|
||||||
|
element.setAttribute('readonly', '');
|
||||||
|
|
||||||
|
element.style.contain = 'strict';
|
||||||
|
element.style.position = 'absolute';
|
||||||
|
element.style.left = '-9999px';
|
||||||
|
element.style.fontSize = '12pt'; // Prevent zooming on iOS
|
||||||
|
|
||||||
|
const selection = document.getSelection();
|
||||||
|
const originalRange = selection.rangeCount > 0 && selection.getRangeAt(0);
|
||||||
|
|
||||||
|
target.append(element);
|
||||||
|
element.select();
|
||||||
|
|
||||||
|
// Explicit selection workaround for iOS
|
||||||
|
element.selectionStart = 0;
|
||||||
|
element.selectionEnd = input.length;
|
||||||
|
|
||||||
|
let isSuccess = false;
|
||||||
|
try {
|
||||||
|
isSuccess = document.execCommand('copy');
|
||||||
|
} catch { }
|
||||||
|
|
||||||
|
element.remove();
|
||||||
|
|
||||||
|
if (originalRange) {
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(originalRange);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the focus back on the previously focused element, if any
|
||||||
|
if (previouslyFocusedElement) {
|
||||||
|
previouslyFocusedElement.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
return isSuccess;
|
||||||
|
}
|
||||||
@ -1,64 +0,0 @@
|
|||||||
/**
|
|
||||||
* v-dialogDrag 弹窗拖拽
|
|
||||||
* Copyright (c) 2019 ruoyi
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
bind(el, binding, vnode, oldVnode) {
|
|
||||||
const value = binding.value
|
|
||||||
if (value == false) return
|
|
||||||
// 获取拖拽内容头部
|
|
||||||
const dialogHeaderEl = el.querySelector('.el-dialog__header');
|
|
||||||
const dragDom = el.querySelector('.el-dialog');
|
|
||||||
dialogHeaderEl.style.cursor = 'move';
|
|
||||||
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
|
||||||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
|
||||||
dragDom.style.position = 'absolute';
|
|
||||||
dragDom.style.marginTop = 0;
|
|
||||||
let width = dragDom.style.width;
|
|
||||||
if (width.includes('%')) {
|
|
||||||
width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
|
|
||||||
} else {
|
|
||||||
width = +width.replace(/\px/g, '');
|
|
||||||
}
|
|
||||||
dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
|
|
||||||
// 鼠标按下事件
|
|
||||||
dialogHeaderEl.onmousedown = (e) => {
|
|
||||||
// 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
|
|
||||||
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
|
||||||
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
|
||||||
|
|
||||||
// 获取到的值带px 正则匹配替换
|
|
||||||
let styL, styT;
|
|
||||||
|
|
||||||
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
|
||||||
if (sty.left.includes('%')) {
|
|
||||||
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
|
||||||
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
|
||||||
} else {
|
|
||||||
styL = +sty.left.replace(/\px/g, '');
|
|
||||||
styT = +sty.top.replace(/\px/g, '');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 鼠标拖拽事件
|
|
||||||
document.onmousemove = function (e) {
|
|
||||||
// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
|
|
||||||
const l = e.clientX - disX;
|
|
||||||
const t = e.clientY - disY;
|
|
||||||
|
|
||||||
let finallyL = l + styL
|
|
||||||
let finallyT = t + styT
|
|
||||||
|
|
||||||
// 移动当前元素
|
|
||||||
dragDom.style.left = `${finallyL}px`;
|
|
||||||
dragDom.style.top = `${finallyT}px`;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
document.onmouseup = function (e) {
|
|
||||||
document.onmousemove = null;
|
|
||||||
document.onmouseup = null;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
/**
|
|
||||||
* v-clipboard 文字复制剪贴
|
|
||||||
* Copyright (c) 2021 ruoyi
|
|
||||||
*/
|
|
||||||
|
|
||||||
import Clipboard from 'clipboard'
|
|
||||||
export default {
|
|
||||||
bind(el, binding, vnode) {
|
|
||||||
switch (binding.arg) {
|
|
||||||
case 'success':
|
|
||||||
el._vClipBoard_success = binding.value;
|
|
||||||
break;
|
|
||||||
case 'error':
|
|
||||||
el._vClipBoard_error = binding.value;
|
|
||||||
break;
|
|
||||||
default: {
|
|
||||||
const clipboard = new Clipboard(el, {
|
|
||||||
text: () => binding.value,
|
|
||||||
action: () => binding.arg === 'cut' ? 'cut' : 'copy'
|
|
||||||
});
|
|
||||||
clipboard.on('success', e => {
|
|
||||||
const callback = el._vClipBoard_success;
|
|
||||||
callback && callback(e);
|
|
||||||
});
|
|
||||||
clipboard.on('error', e => {
|
|
||||||
const callback = el._vClipBoard_error;
|
|
||||||
callback && callback(e);
|
|
||||||
});
|
|
||||||
el._vClipBoard = clipboard;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
update(el, binding) {
|
|
||||||
if (binding.arg === 'success') {
|
|
||||||
el._vClipBoard_success = binding.value;
|
|
||||||
} else if (binding.arg === 'error') {
|
|
||||||
el._vClipBoard_error = binding.value;
|
|
||||||
} else {
|
|
||||||
el._vClipBoard.text = function () { return binding.value; };
|
|
||||||
el._vClipBoard.action = () => binding.arg === 'cut' ? 'cut' : 'copy';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
unbind(el, binding) {
|
|
||||||
if (!el._vClipboard) return
|
|
||||||
if (binding.arg === 'success') {
|
|
||||||
delete el._vClipBoard_success;
|
|
||||||
} else if (binding.arg === 'error') {
|
|
||||||
delete el._vClipBoard_error;
|
|
||||||
} else {
|
|
||||||
el._vClipBoard.destroy();
|
|
||||||
delete el._vClipBoard;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,33 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition-group name="fade-transform" mode="out-in">
|
<inner-link
|
||||||
<inner-link
|
v-for="(item, index) in tagsViewStore.iframeViews"
|
||||||
v-for="(item, index) in iframeViews"
|
:key="item.path"
|
||||||
:key="item.path"
|
:iframeId="'iframe' + index"
|
||||||
:iframeId="'iframe' + index"
|
v-show="route.path === item.path"
|
||||||
v-show="$route.path === item.path"
|
:src="iframeUrl(item.meta.link, item.query)"
|
||||||
:src="iframeUrl(item.meta.link, item.query)"
|
></inner-link>
|
||||||
></inner-link>
|
|
||||||
</transition-group>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import InnerLink from "../InnerLink/index";
|
import InnerLink from "../InnerLink/index";
|
||||||
|
import useTagsViewStore from "@/store/modules/tagsView";
|
||||||
|
|
||||||
export default {
|
const route = useRoute();
|
||||||
components: { InnerLink },
|
const tagsViewStore = useTagsViewStore();
|
||||||
computed: {
|
|
||||||
iframeViews() {
|
function iframeUrl(url, query) {
|
||||||
return this.$store.state.tagsView.iframeViews;
|
if (Object.keys(query).length > 0) {
|
||||||
}
|
let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&");
|
||||||
},
|
return url + "?" + params;
|
||||||
methods: {
|
|
||||||
iframeUrl(url, query) {
|
|
||||||
if (Object.keys(query).length > 0) {
|
|
||||||
let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&");
|
|
||||||
return url + "?" + params;
|
|
||||||
}
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
return url;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,260 +1,205 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
|
<el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
|
||||||
<div class="drawer-container">
|
<div class="setting-drawer-title">
|
||||||
<div>
|
<h3 class="drawer-title">主题风格设置</h3>
|
||||||
<div class="setting-drawer-content">
|
</div>
|
||||||
<div class="setting-drawer-title">
|
<div class="setting-drawer-block-checbox">
|
||||||
<h3 class="drawer-title">主题风格设置</h3>
|
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
|
||||||
</div>
|
<img src="@/assets/images/dark.svg" alt="dark" />
|
||||||
<div class="setting-drawer-block-checbox">
|
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
|
||||||
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
|
<i aria-label="图标: check" class="anticon anticon-check">
|
||||||
<img src="@/assets/images/dark.svg" alt="dark">
|
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
|
||||||
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
|
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
|
||||||
<i aria-label="图标: check" class="anticon anticon-check">
|
</svg>
|
||||||
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
|
</i>
|
||||||
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
|
|
||||||
<img src="@/assets/images/light.svg" alt="light">
|
|
||||||
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
|
|
||||||
<i aria-label="图标: check" class="anticon anticon-check">
|
|
||||||
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
|
|
||||||
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="drawer-item">
|
|
||||||
<span>主题颜色</span>
|
|
||||||
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<el-divider/>
|
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
|
||||||
|
<img src="@/assets/images/light.svg" alt="light" />
|
||||||
<h3 class="drawer-title">系统布局配置</h3>
|
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
|
||||||
|
<i aria-label="图标: check" class="anticon anticon-check">
|
||||||
<div class="drawer-item">
|
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
|
||||||
<span>开启 TopNav</span>
|
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
|
||||||
<el-switch v-model="topNav" class="drawer-switch" />
|
</svg>
|
||||||
|
</i>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="drawer-item">
|
||||||
|
<span>主题颜色</span>
|
||||||
|
<span class="comp-style">
|
||||||
|
<el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange"/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
|
||||||
<div class="drawer-item">
|
<h3 class="drawer-title">系统布局配置</h3>
|
||||||
<span>开启 Tags-Views</span>
|
|
||||||
<el-switch v-model="tagsView" class="drawer-switch" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="drawer-item">
|
<div class="drawer-item">
|
||||||
<span>固定 Header</span>
|
<span>开启 TopNav</span>
|
||||||
<el-switch v-model="fixedHeader" class="drawer-switch" />
|
<span class="comp-style">
|
||||||
</div>
|
<el-switch v-model="settingsStore.topNav" @change="topNavChange" class="drawer-switch" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="drawer-item">
|
<div class="drawer-item">
|
||||||
<span>显示 Logo</span>
|
<span>开启 Tags-Views</span>
|
||||||
<el-switch v-model="sidebarLogo" class="drawer-switch" />
|
<span class="comp-style">
|
||||||
</div>
|
<el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="drawer-item">
|
<div class="drawer-item">
|
||||||
<span>动态标题</span>
|
<span>固定 Header</span>
|
||||||
<el-switch v-model="dynamicTitle" class="drawer-switch" />
|
<span class="comp-style">
|
||||||
</div>
|
<el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-divider/>
|
<div class="drawer-item">
|
||||||
|
<span>显示 Logo</span>
|
||||||
|
<span class="comp-style">
|
||||||
|
<el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
|
<div class="drawer-item">
|
||||||
<el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
|
<span>动态标题</span>
|
||||||
</div>
|
<span class="comp-style">
|
||||||
|
<el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" />
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<el-divider />
|
||||||
|
|
||||||
|
<el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
|
||||||
|
<el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
</template>
|
||||||
import ThemePicker from '@/components/ThemePicker'
|
|
||||||
|
|
||||||
export default {
|
<script setup>
|
||||||
components: { ThemePicker },
|
import variables from '@/assets/styles/variables.module.scss'
|
||||||
data() {
|
import axios from 'axios'
|
||||||
return {
|
import { ElLoading, ElMessage } from 'element-plus'
|
||||||
theme: this.$store.state.settings.theme,
|
import { useDynamicTitle } from '@/utils/dynamicTitle'
|
||||||
sideTheme: this.$store.state.settings.sideTheme
|
import useAppStore from '@/store/modules/app'
|
||||||
};
|
import useSettingsStore from '@/store/modules/settings'
|
||||||
},
|
import usePermissionStore from '@/store/modules/permission'
|
||||||
computed: {
|
import { handleThemeStyle } from '@/utils/theme'
|
||||||
visible: {
|
|
||||||
get() {
|
const { proxy } = getCurrentInstance();
|
||||||
return this.$store.state.settings.showSettings
|
const appStore = useAppStore()
|
||||||
}
|
const settingsStore = useSettingsStore()
|
||||||
},
|
const permissionStore = usePermissionStore()
|
||||||
fixedHeader: {
|
const showSettings = ref(false);
|
||||||
get() {
|
const theme = ref(settingsStore.theme);
|
||||||
return this.$store.state.settings.fixedHeader
|
const sideTheme = ref(settingsStore.sideTheme);
|
||||||
},
|
const storeSettings = computed(() => settingsStore);
|
||||||
set(val) {
|
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
|
||||||
key: 'fixedHeader',
|
/** 是否需要topnav */
|
||||||
value: val
|
function topNavChange(val) {
|
||||||
})
|
if (!val) {
|
||||||
}
|
appStore.toggleSideBarHide(false);
|
||||||
},
|
permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
|
||||||
topNav: {
|
|
||||||
get() {
|
|
||||||
return this.$store.state.settings.topNav
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
|
||||||
key: 'topNav',
|
|
||||||
value: val
|
|
||||||
})
|
|
||||||
if (!val) {
|
|
||||||
this.$store.dispatch('app/toggleSideBarHide', false);
|
|
||||||
this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tagsView: {
|
|
||||||
get() {
|
|
||||||
return this.$store.state.settings.tagsView
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
|
||||||
key: 'tagsView',
|
|
||||||
value: val
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sidebarLogo: {
|
|
||||||
get() {
|
|
||||||
return this.$store.state.settings.sidebarLogo
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
|
||||||
key: 'sidebarLogo',
|
|
||||||
value: val
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dynamicTitle: {
|
|
||||||
get() {
|
|
||||||
return this.$store.state.settings.dynamicTitle
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
|
||||||
key: 'dynamicTitle',
|
|
||||||
value: val
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
themeChange(val) {
|
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
|
||||||
key: 'theme',
|
|
||||||
value: val
|
|
||||||
})
|
|
||||||
this.theme = val;
|
|
||||||
},
|
|
||||||
handleTheme(val) {
|
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
|
||||||
key: 'sideTheme',
|
|
||||||
value: val
|
|
||||||
})
|
|
||||||
this.sideTheme = val;
|
|
||||||
},
|
|
||||||
saveSetting() {
|
|
||||||
this.$modal.loading("正在保存到本地，请稍候...");
|
|
||||||
this.$cache.local.set(
|
|
||||||
"layout-setting",
|
|
||||||
`{
|
|
||||||
"topNav":${this.topNav},
|
|
||||||
"tagsView":${this.tagsView},
|
|
||||||
"fixedHeader":${this.fixedHeader},
|
|
||||||
"sidebarLogo":${this.sidebarLogo},
|
|
||||||
"dynamicTitle":${this.dynamicTitle},
|
|
||||||
"sideTheme":"${this.sideTheme}",
|
|
||||||
"theme":"${this.theme}"
|
|
||||||
}`
|
|
||||||
);
|
|
||||||
setTimeout(this.$modal.closeLoading(), 1000)
|
|
||||||
},
|
|
||||||
resetSetting() {
|
|
||||||
this.$modal.loading("正在清除设置缓存并刷新，请稍候...");
|
|
||||||
this.$cache.local.remove("layout-setting")
|
|
||||||
setTimeout("window.location.reload()", 1000)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.setting-drawer-content {
|
|
||||||
.setting-drawer-title {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
color: rgba(0, 0, 0, .85);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 22px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-drawer-block-checbox {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.setting-drawer-block-checbox-item {
|
|
||||||
position: relative;
|
|
||||||
margin-right: 16px;
|
|
||||||
border-radius: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
img {
|
function themeChange(val) {
|
||||||
width: 48px;
|
settingsStore.theme = val;
|
||||||
height: 48px;
|
handleThemeStyle(val);
|
||||||
}
|
}
|
||||||
|
function handleTheme(val) {
|
||||||
|
settingsStore.sideTheme = val;
|
||||||
|
sideTheme.value = val;
|
||||||
|
}
|
||||||
|
function saveSetting() {
|
||||||
|
proxy.$modal.loading("正在保存到本地，请稍候...");
|
||||||
|
let layoutSetting = {
|
||||||
|
"topNav": storeSettings.value.topNav,
|
||||||
|
"tagsView": storeSettings.value.tagsView,
|
||||||
|
"fixedHeader": storeSettings.value.fixedHeader,
|
||||||
|
"sidebarLogo": storeSettings.value.sidebarLogo,
|
||||||
|
"dynamicTitle": storeSettings.value.dynamicTitle,
|
||||||
|
"sideTheme": storeSettings.value.sideTheme,
|
||||||
|
"theme": storeSettings.value.theme
|
||||||
|
};
|
||||||
|
localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
|
||||||
|
setTimeout(proxy.$modal.closeLoading(), 1000)
|
||||||
|
}
|
||||||
|
function resetSetting() {
|
||||||
|
proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");
|
||||||
|
localStorage.removeItem("layout-setting")
|
||||||
|
setTimeout("window.location.reload()", 1000)
|
||||||
|
}
|
||||||
|
function openSetting() {
|
||||||
|
showSettings.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
.setting-drawer-block-checbox-selectIcon {
|
defineExpose({
|
||||||
position: absolute;
|
openSetting,
|
||||||
top: 0;
|
})
|
||||||
right: 0;
|
</script>
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding-top: 15px;
|
|
||||||
padding-left: 24px;
|
|
||||||
color: #1890ff;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-container {
|
<style lang='scss' scoped>
|
||||||
padding: 20px;
|
.setting-drawer-title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
line-height: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
.drawer-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5;
|
}
|
||||||
word-wrap: break-word;
|
}
|
||||||
|
.setting-drawer-block-checbox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.setting-drawer-block-checbox-item {
|
||||||
|
position: relative;
|
||||||
|
margin-right: 16px;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
.drawer-title {
|
.custom-img {
|
||||||
margin-bottom: 12px;
|
width: 48px;
|
||||||
color: rgba(0, 0, 0, .85);
|
height: 38px;
|
||||||
font-size: 14px;
|
border-radius: 5px;
|
||||||
line-height: 22px;
|
box-shadow: 1px 1px 2px #898484;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-item {
|
.setting-drawer-block-checbox-selectIcon {
|
||||||
color: rgba(0, 0, 0, .65);
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-left: 24px;
|
||||||
|
color: #1890ff;
|
||||||
|
font-weight: 700;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 12px 0;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.drawer-switch {
|
.drawer-item {
|
||||||
float: right
|
color: rgba(0, 0, 0, 0.65);
|
||||||
}
|
padding: 12px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.comp-style {
|
||||||
|
float: right;
|
||||||
|
margin: -3px 8px 0px 0px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,25 +0,0 @@
|
|||||||
export default {
|
|
||||||
computed: {
|
|
||||||
device() {
|
|
||||||
return this.$store.state.app.device
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// In order to fix the click on menu on the ios device will trigger the mouseleave bug
|
|
||||||
this.fixBugIniOS()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
fixBugIniOS() {
|
|
||||||
const $subMenu = this.$refs.subMenu
|
|
||||||
if ($subMenu) {
|
|
||||||
const handleMouseleave = $subMenu.handleMouseleave
|
|
||||||
$subMenu.handleMouseleave = (e) => {
|
|
||||||
if (this.device === 'mobile') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
handleMouseleave(e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'MenuItem',
|
|
||||||
functional: true,
|
|
||||||
props: {
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render(h, context) {
|
|
||||||
const { icon, title } = context.props
|
|
||||||
const vnodes = []
|
|
||||||
|
|
||||||
if (icon) {
|
|
||||||
vnodes.push(<svg-icon icon-class={icon}/>)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (title) {
|
|
||||||
if (title.length > 5) {
|
|
||||||
vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
|
|
||||||
} else {
|
|
||||||
vnodes.push(<span slot='title'>{(title)}</span>)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return vnodes
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,43 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<component :is="type" v-bind="linkProps(to)">
|
<component :is="type" v-bind="linkProps()">
|
||||||
<slot />
|
<slot />
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import { isExternal } from '@/utils/validate'
|
import { isExternal } from '@/utils/validate'
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
props: {
|
to: {
|
||||||
to: {
|
type: [String, Object],
|
||||||
type: [String, Object],
|
required: true
|
||||||
required: true
|
}
|
||||||
}
|
})
|
||||||
},
|
|
||||||
computed: {
|
const isExt = computed(() => {
|
||||||
isExternal() {
|
return isExternal(props.to)
|
||||||
return isExternal(this.to)
|
})
|
||||||
},
|
|
||||||
type() {
|
const type = computed(() => {
|
||||||
if (this.isExternal) {
|
if (isExt.value) {
|
||||||
return 'a'
|
return 'a'
|
||||||
}
|
}
|
||||||
return 'router-link'
|
return 'router-link'
|
||||||
}
|
})
|
||||||
},
|
|
||||||
methods: {
|
function linkProps() {
|
||||||
linkProps(to) {
|
if (isExt.value) {
|
||||||
if (this.isExternal) {
|
return {
|
||||||
return {
|
href: props.to,
|
||||||
href: to,
|
target: '_blank',
|
||||||
target: '_blank',
|
rel: 'noopener'
|
||||||
rel: 'noopener'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
to: to
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return {
|
||||||
|
to: props.to
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,57 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
<div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
:collapse="isCollapse"
|
:collapse="isCollapse"
|
||||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
:background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||||
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||||
:unique-opened="true"
|
:unique-opened="true"
|
||||||
:active-text-color="settings.theme"
|
:active-text-color="theme"
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
mode="vertical"
|
mode="vertical"
|
||||||
>
|
>
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
v-for="(route, index) in sidebarRouters"
|
v-for="(route, index) in sidebarRouters"
|
||||||
:key="route.path + index"
|
:key="route.path + index"
|
||||||
:item="route"
|
:item="route"
|
||||||
:base-path="route.path"
|
:base-path="route.path"
|
||||||
/>
|
/>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import { mapGetters, mapState } from "vuex";
|
import Logo from './Logo'
|
||||||
import Logo from "./Logo";
|
import SidebarItem from './SidebarItem'
|
||||||
import SidebarItem from "./SidebarItem";
|
import variables from '@/assets/styles/variables.module.scss'
|
||||||
import variables from "@/assets/styles/variables.scss";
|
import useAppStore from '@/store/modules/app'
|
||||||
|
import useSettingsStore from '@/store/modules/settings'
|
||||||
|
import usePermissionStore from '@/store/modules/permission'
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const appStore = useAppStore()
|
||||||
|
const settingsStore = useSettingsStore()
|
||||||
|
const permissionStore = usePermissionStore()
|
||||||
|
|
||||||
|
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
|
||||||
|
const showLogo = computed(() => settingsStore.sidebarLogo);
|
||||||
|
const sideTheme = computed(() => settingsStore.sideTheme);
|
||||||
|
const theme = computed(() => settingsStore.theme);
|
||||||
|
const isCollapse = computed(() => !appStore.sidebar.opened);
|
||||||
|
|
||||||
|
const activeMenu = computed(() => {
|
||||||
|
const { meta, path } = route;
|
||||||
|
// if set path, the sidebar will highlight the path you set
|
||||||
|
if (meta.activeMenu) {
|
||||||
|
return meta.activeMenu;
|
||||||
|
}
|
||||||
|
return path;
|
||||||
|
})
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { SidebarItem, Logo },
|
|
||||||
computed: {
|
|
||||||
...mapState(["settings"]),
|
|
||||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
|
||||||
activeMenu() {
|
|
||||||
const route = this.$route;
|
|
||||||
const { meta, path } = route;
|
|
||||||
// if set path, the sidebar will highlight the path you set
|
|
||||||
if (meta.activeMenu) {
|
|
||||||
return meta.activeMenu;
|
|
||||||
}
|
|
||||||
return path;
|
|
||||||
},
|
|
||||||
showLogo() {
|
|
||||||
return this.$store.state.settings.sidebarLogo;
|
|
||||||
},
|
|
||||||
variables() {
|
|
||||||
return variables;
|
|
||||||
},
|
|
||||||
isCollapse() {
|
|
||||||
return !this.sidebar.opened;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,94 +1,105 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
|
<el-scrollbar
|
||||||
|
ref="scrollContainer"
|
||||||
|
:vertical="false"
|
||||||
|
class="scroll-container"
|
||||||
|
@wheel.prevent="handleScroll"
|
||||||
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
const tagAndTagSpacing = 4 // tagAndTagSpacing
|
import useTagsViewStore from '@/store/modules/tagsView'
|
||||||
|
|
||||||
export default {
|
const tagAndTagSpacing = ref(4);
|
||||||
name: 'ScrollPane',
|
const { proxy } = getCurrentInstance();
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
left: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
scrollWrapper() {
|
|
||||||
return this.$refs.scrollContainer.$refs.wrap
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleScroll(e) {
|
|
||||||
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
|
||||||
const $scrollWrapper = this.scrollWrapper
|
|
||||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
|
||||||
},
|
|
||||||
emitScroll() {
|
|
||||||
this.$emit('scroll')
|
|
||||||
},
|
|
||||||
moveToTarget(currentTag) {
|
|
||||||
const $container = this.$refs.scrollContainer.$el
|
|
||||||
const $containerWidth = $container.offsetWidth
|
|
||||||
const $scrollWrapper = this.scrollWrapper
|
|
||||||
const tagList = this.$parent.$refs.tag
|
|
||||||
|
|
||||||
let firstTag = null
|
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef);
|
||||||
let lastTag = null
|
|
||||||
|
|
||||||
// find first tag and last tag
|
onMounted(() => {
|
||||||
if (tagList.length > 0) {
|
scrollWrapper.value.addEventListener('scroll', emitScroll, true)
|
||||||
firstTag = tagList[0]
|
})
|
||||||
lastTag = tagList[tagList.length - 1]
|
onBeforeUnmount(() => {
|
||||||
}
|
scrollWrapper.value.removeEventListener('scroll', emitScroll)
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleScroll(e) {
|
||||||
|
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||||||
|
const $scrollWrapper = scrollWrapper.value;
|
||||||
|
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||||
|
}
|
||||||
|
const emits = defineEmits()
|
||||||
|
const emitScroll = () => {
|
||||||
|
emits('scroll')
|
||||||
|
}
|
||||||
|
|
||||||
if (firstTag === currentTag) {
|
const tagsViewStore = useTagsViewStore()
|
||||||
$scrollWrapper.scrollLeft = 0
|
const visitedViews = computed(() => tagsViewStore.visitedViews);
|
||||||
} else if (lastTag === currentTag) {
|
|
||||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
|
||||||
} else {
|
|
||||||
// find preTag and nextTag
|
|
||||||
const currentIndex = tagList.findIndex(item => item === currentTag)
|
|
||||||
const prevTag = tagList[currentIndex - 1]
|
|
||||||
const nextTag = tagList[currentIndex + 1]
|
|
||||||
|
|
||||||
// the tag's offsetLeft after of nextTag
|
function moveToTarget(currentTag) {
|
||||||
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
|
const $container = proxy.$refs.scrollContainer.$el
|
||||||
|
const $containerWidth = $container.offsetWidth
|
||||||
|
const $scrollWrapper = scrollWrapper.value;
|
||||||
|
|
||||||
// the tag's offsetLeft before of prevTag
|
let firstTag = null
|
||||||
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
|
let lastTag = null
|
||||||
|
|
||||||
|
// find first tag and last tag
|
||||||
|
if (visitedViews.value.length > 0) {
|
||||||
|
firstTag = visitedViews.value[0]
|
||||||
|
lastTag = visitedViews.value[visitedViews.value.length - 1]
|
||||||
|
}
|
||||||
|
|
||||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
if (firstTag === currentTag) {
|
||||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
|
$scrollWrapper.scrollLeft = 0
|
||||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
} else if (lastTag === currentTag) {
|
||||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
|
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
||||||
|
} else {
|
||||||
|
const tagListDom = document.getElementsByClassName('tags-view-item');
|
||||||
|
const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
|
||||||
|
let prevTag = null
|
||||||
|
let nextTag = null
|
||||||
|
for (const k in tagListDom) {
|
||||||
|
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
|
||||||
|
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
|
||||||
|
prevTag = tagListDom[k];
|
||||||
|
}
|
||||||
|
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
|
||||||
|
nextTag = tagListDom[k];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// the tag's offsetLeft after of nextTag
|
||||||
|
const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
|
||||||
|
|
||||||
|
// the tag's offsetLeft before of prevTag
|
||||||
|
const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
|
||||||
|
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||||
|
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
|
||||||
|
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||||
|
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
moveToTarget,
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang='scss' scoped>
|
||||||
.scroll-container {
|
.scroll-container {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
::v-deep {
|
:deep(.el-scrollbar__bar) {
|
||||||
.el-scrollbar__bar {
|
bottom: 0px;
|
||||||
bottom: 0px;
|
}
|
||||||
}
|
:deep(.el-scrollbar__wrap) {
|
||||||
.el-scrollbar__wrap {
|
height: 39px;
|
||||||
height: 49px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,5 +1,4 @@
|
|||||||
export { default as AppMain } from './AppMain'
|
export { default as AppMain } from './AppMain'
|
||||||
export { default as Navbar } from './Navbar'
|
export { default as Navbar } from './Navbar'
|
||||||
export { default as Settings } from './Settings'
|
export { default as Settings } from './Settings'
|
||||||
export { default as Sidebar } from './Sidebar/index.vue'
|
|
||||||
export { default as TagsView } from './TagsView/index.vue'
|
export { default as TagsView } from './TagsView/index.vue'
|
||||||
|
|||||||
@ -1,111 +1,111 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||||
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
|
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||||
<div :class="{'fixed-header':fixedHeader}">
|
<div :class="{ 'fixed-header': fixedHeader }">
|
||||||
<navbar/>
|
<navbar @setLayout="setLayout" />
|
||||||
<tags-view v-if="needTagsView"/>
|
<tags-view v-if="needTagsView" />
|
||||||
</div>
|
</div>
|
||||||
<app-main/>
|
<app-main />
|
||||||
<right-panel>
|
<settings ref="settingRef" />
|
||||||
<settings/>
|
|
||||||
</right-panel>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import RightPanel from '@/components/RightPanel'
|
import { useWindowSize } from '@vueuse/core'
|
||||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
import Sidebar from './components/Sidebar/index.vue'
|
||||||
import ResizeMixin from './mixin/ResizeHandler'
|
import { AppMain, Navbar, Settings, TagsView } from './components'
|
||||||
import { mapState } from 'vuex'
|
import defaultSettings from '@/settings'
|
||||||
import variables from '@/assets/styles/variables.scss'
|
|
||||||
|
import useAppStore from '@/store/modules/app'
|
||||||
export default {
|
import useSettingsStore from '@/store/modules/settings'
|
||||||
name: 'Layout',
|
|
||||||
components: {
|
const settingsStore = useSettingsStore()
|
||||||
AppMain,
|
const theme = computed(() => settingsStore.theme);
|
||||||
Navbar,
|
const sideTheme = computed(() => settingsStore.sideTheme);
|
||||||
RightPanel,
|
const sidebar = computed(() => useAppStore().sidebar);
|
||||||
Settings,
|
const device = computed(() => useAppStore().device);
|
||||||
Sidebar,
|
const needTagsView = computed(() => settingsStore.tagsView);
|
||||||
TagsView
|
const fixedHeader = computed(() => settingsStore.fixedHeader);
|
||||||
},
|
|
||||||
mixins: [ResizeMixin],
|
const classObj = computed(() => ({
|
||||||
computed: {
|
hideSidebar: !sidebar.value.opened,
|
||||||
...mapState({
|
openSidebar: sidebar.value.opened,
|
||||||
theme: state => state.settings.theme,
|
withoutAnimation: sidebar.value.withoutAnimation,
|
||||||
sideTheme: state => state.settings.sideTheme,
|
mobile: device.value === 'mobile'
|
||||||
sidebar: state => state.app.sidebar,
|
}))
|
||||||
device: state => state.app.device,
|
|
||||||
needTagsView: state => state.settings.tagsView,
|
const { width, height } = useWindowSize();
|
||||||
fixedHeader: state => state.settings.fixedHeader
|
const WIDTH = 992; // refer to Bootstrap's responsive design
|
||||||
}),
|
|
||||||
classObj() {
|
watchEffect(() => {
|
||||||
return {
|
if (device.value === 'mobile' && sidebar.value.opened) {
|
||||||
hideSidebar: !this.sidebar.opened,
|
useAppStore().closeSideBar({ withoutAnimation: false })
|
||||||
openSidebar: this.sidebar.opened,
|
}
|
||||||
withoutAnimation: this.sidebar.withoutAnimation,
|
if (width.value - 1 < WIDTH) {
|
||||||
mobile: this.device === 'mobile'
|
useAppStore().toggleDevice('mobile')
|
||||||
}
|
useAppStore().closeSideBar({ withoutAnimation: true })
|
||||||
},
|
} else {
|
||||||
variables() {
|
useAppStore().toggleDevice('desktop')
|
||||||
return variables;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClickOutside() {
|
|
||||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleClickOutside() {
|
||||||
|
useAppStore().closeSideBar({ withoutAnimation: false })
|
||||||
|
}
|
||||||
|
|
||||||
|
const settingRef = ref(null);
|
||||||
|
function setLayout() {
|
||||||
|
settingRef.value.openSetting();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/assets/styles/mixin.scss";
|
@import "@/assets/styles/mixin.scss";
|
||||||
@import "~@/assets/styles/variables.scss";
|
@import "@/assets/styles/variables.module.scss";
|
||||||
|
|
||||||
.app-wrapper {
|
|
||||||
@include clearfix;
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&.mobile.openSidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-bg {
|
.app-wrapper {
|
||||||
background: #000;
|
@include clearfix;
|
||||||
opacity: 0.3;
|
position: relative;
|
||||||
width: 100%;
|
height: 100%;
|
||||||
top: 0;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-header {
|
&.mobile.openSidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
|
||||||
z-index: 9;
|
|
||||||
width: calc(100% - #{$base-sidebar-width});
|
|
||||||
transition: width 0.28s;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hideSidebar .fixed-header {
|
.drawer-bg {
|
||||||
width: calc(100% - 54px);
|
background: #000;
|
||||||
}
|
opacity: 0.3;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebarHide .fixed-header {
|
.fixed-header {
|
||||||
width: 100%;
|
position: fixed;
|
||||||
}
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 9;
|
||||||
|
width: calc(100% - #{$base-sidebar-width});
|
||||||
|
transition: width 0.28s;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile .fixed-header {
|
.hideSidebar .fixed-header {
|
||||||
width: 100%;
|
width: calc(100% - 54px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebarHide .fixed-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile .fixed-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import store from '@/store'
|
|
||||||
|
|
||||||
const { body } = document
|
|
||||||
const WIDTH = 992 // refer to Bootstrap's responsive design
|
|
||||||
|
|
||||||
export default {
|
|
||||||
watch: {
|
|
||||||
$route(route) {
|
|
||||||
if (this.device === 'mobile' && this.sidebar.opened) {
|
|
||||||
store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeMount() {
|
|
||||||
window.addEventListener('resize', this.$_resizeHandler)
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
window.removeEventListener('resize', this.$_resizeHandler)
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const isMobile = this.$_isMobile()
|
|
||||||
if (isMobile) {
|
|
||||||
store.dispatch('app/toggleDevice', 'mobile')
|
|
||||||
store.dispatch('app/closeSideBar', { withoutAnimation: true })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// use $_ for mixins properties
|
|
||||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
|
||||||
$_isMobile() {
|
|
||||||
const rect = body.getBoundingClientRect()
|
|
||||||
return rect.width - 1 < WIDTH
|
|
||||||
},
|
|
||||||
$_resizeHandler() {
|
|
||||||
if (!document.hidden) {
|
|
||||||
const isMobile = this.$_isMobile()
|
|
||||||
store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
|
|
||||||
|
|
||||||
if (isMobile) {
|
|
||||||
store.dispatch('app/closeSideBar', { withoutAnimation: true })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
const getters = {
|
|
||||||
sidebar: state => state.app.sidebar,
|
|
||||||
size: state => state.app.size,
|
|
||||||
device: state => state.app.device,
|
|
||||||
dict: state => state.dict.dict,
|
|
||||||
visitedViews: state => state.tagsView.visitedViews,
|
|
||||||
cachedViews: state => state.tagsView.cachedViews,
|
|
||||||
token: state => state.user.token,
|
|
||||||
avatar: state => state.user.avatar,
|
|
||||||
name: state => state.user.name,
|
|
||||||
introduction: state => state.user.introduction,
|
|
||||||
roles: state => state.user.roles,
|
|
||||||
permissions: state => state.user.permissions,
|
|
||||||
permission_routes: state => state.permission.routes,
|
|
||||||
topbarRouters:state => state.permission.topbarRouters,
|
|
||||||
defaultRoutes:state => state.permission.defaultRoutes,
|
|
||||||
sidebarRouters:state => state.permission.sidebarRouters,
|
|
||||||
}
|
|
||||||
export default getters
|
|
||||||
@ -1,25 +1,3 @@
|
|||||||
import Vue from 'vue'
|
const store = createPinia()
|
||||||
import Vuex from 'vuex'
|
|
||||||
import app from './modules/app'
|
|
||||||
import dict from './modules/dict'
|
|
||||||
import user from './modules/user'
|
|
||||||
import tagsView from './modules/tagsView'
|
|
||||||
import permission from './modules/permission'
|
|
||||||
import settings from './modules/settings'
|
|
||||||
import getters from './getters'
|
|
||||||
|
|
||||||
Vue.use(Vuex)
|
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
|
||||||
modules: {
|
|
||||||
app,
|
|
||||||
dict,
|
|
||||||
user,
|
|
||||||
tagsView,
|
|
||||||
permission,
|
|
||||||
settings
|
|
||||||
},
|
|
||||||
getters
|
|
||||||
})
|
|
||||||
|
|
||||||
export default store
|
export default store
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue