3 |
17 |
18 |
19 |
55 |
--------------------------------------------------------------------------------
/src/icons/svg/upload-svgrepo-com.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/icons/svg/dashboard.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/icons/svg/download-svgrepo-com.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/icons/svg/headscale3-dots.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/dashboard/components/SystemInfoGroup.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
9 |
10 |
11 |
13 |
14 |
15 |
16 |
3 |
4 | {{ info.version }}
5 |
6 | {{ info.branch }}
7 |
8 | {{ info.build_time }}
9 | {{ info.go_version }}
10 | {{ info.os }}
11 | {{ info.arch }}
12 |
13 |
14 |
15 |
16 |
32 |
33 |
36 |
--------------------------------------------------------------------------------
/src/icons/svg/power-up-svgrepo-com.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
--------------------------------------------------------------------------------
/src/layout/components/AppMain.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
3 |
5 |
6 |
7 |
50 |
51 |
61 |
--------------------------------------------------------------------------------
/src/icons/svg/shopping.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/directive/el-table/adaptive.js:
--------------------------------------------------------------------------------
1 | import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
2 |
3 | /**
4 | * How to use
5 | *
3 |
13 |
14 |
15 |
16 |
32 |
33 |
45 |
--------------------------------------------------------------------------------
/plop-templates/view/prompt.js:
--------------------------------------------------------------------------------
1 | const { notEmpty } = require('../utils.js')
2 |
3 | module.exports = {
4 | description: 'generate a view',
5 | prompts: [{
6 | type: 'input',
7 | name: 'name',
8 | message: 'view name please',
9 | validate: notEmpty('name')
10 | },
11 | {
12 | type: 'checkbox',
13 | name: 'blocks',
14 | message: 'Blocks:',
15 | choices: [{
16 | name: '',
17 | value: 'template',
18 | checked: true
19 | },
20 | {
21 | name: '
47 |
48 |
63 |
--------------------------------------------------------------------------------
/plop-templates/store/prompt.js:
--------------------------------------------------------------------------------
1 | const { notEmpty } = require('../utils.js')
2 |
3 | module.exports = {
4 | description: 'generate store',
5 | prompts: [{
6 | type: 'input',
7 | name: 'name',
8 | message: 'store name please',
9 | validate: notEmpty('name')
10 | },
11 | {
12 | type: 'checkbox',
13 | name: 'blocks',
14 | message: 'Blocks:',
15 | choices: [{
16 | name: 'state',
17 | value: 'state',
18 | checked: true
19 | },
20 | {
21 | name: 'mutations',
22 | value: 'mutations',
23 | checked: true
24 | },
25 | {
26 | name: 'actions',
27 | value: 'actions',
28 | checked: true
29 | }
30 | ],
31 | validate(value) {
32 | if (!value.includes('state') || !value.includes('mutations')) {
33 | return 'store require at least state and mutations'
34 | }
35 | return true
36 | }
37 | }
38 | ],
39 | actions(data) {
40 | const name = '{{name}}'
41 | const { blocks } = data
42 | const options = ['state', 'mutations']
43 | const joinFlag = `,
44 | `
45 | if (blocks.length === 3) {
46 | options.push('actions')
47 | }
48 |
49 | const actions = [{
50 | type: 'add',
51 | path: `src/store/modules/${name}.js`,
52 | templateFile: 'plop-templates/store/index.hbs',
53 | data: {
54 | options: options.join(joinFlag),
55 | state: blocks.includes('state'),
56 | mutations: blocks.includes('mutations'),
57 | actions: blocks.includes('actions')
58 | }
59 | }]
60 | return actions
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/styles/mixin.scss:
--------------------------------------------------------------------------------
1 | @mixin clearfix {
2 | &:after {
3 | content: "";
4 | display: table;
5 | clear: both;
6 | }
7 | }
8 |
9 | @mixin scrollBar {
10 | &::-webkit-scrollbar-track-piece {
11 | background: #d3dce6;
12 | }
13 |
14 | &::-webkit-scrollbar {
15 | width: 6px;
16 | }
17 |
18 | &::-webkit-scrollbar-thumb {
19 | background: #99a9bf;
20 | border-radius: 20px;
21 | }
22 | }
23 |
24 | @mixin relative {
25 | position: relative;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | @mixin pct($pct) {
31 | width: #{$pct};
32 | position: relative;
33 | margin: 0 auto;
34 | }
35 |
36 | @mixin triangle($width, $height, $color, $direction) {
37 | $width: $width/2;
38 | $color-border-style: $height solid $color;
39 | $transparent-border-style: $width solid transparent;
40 | height: 0;
41 | width: 0;
42 |
43 | @if $direction==up {
44 | border-bottom: $color-border-style;
45 | border-left: $transparent-border-style;
46 | border-right: $transparent-border-style;
47 | }
48 |
49 | @else if $direction==right {
50 | border-left: $color-border-style;
51 | border-top: $transparent-border-style;
52 | border-bottom: $transparent-border-style;
53 | }
54 |
55 | @else if $direction==down {
56 | border-top: $color-border-style;
57 | border-left: $transparent-border-style;
58 | border-right: $transparent-border-style;
59 | }
60 |
61 | @else if $direction==left {
62 | border-right: $color-border-style;
63 | border-top: $transparent-border-style;
64 | border-bottom: $transparent-border-style;
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/SizeSelect/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
3 |
5 |
15 |
17 |
19 |
20 |
21 |
22 |
23 |
57 |
--------------------------------------------------------------------------------
/src/views/dashboard/components/mixins/resize.js:
--------------------------------------------------------------------------------
1 | import { debounce } from '@/utils'
2 |
3 | export default {
4 | data() {
5 | return {
6 | $_sidebarElm: null,
7 | $_resizeHandler: null
8 | }
9 | },
10 | mounted() {
11 | this.$_resizeHandler = debounce(() => {
12 | if (this.chart) {
13 | this.chart.resize()
14 | }
15 | }, 100)
16 | this.$_initResizeEvent()
17 | this.$_initSidebarResizeEvent()
18 | },
19 | beforeDestroy() {
20 | this.$_destroyResizeEvent()
21 | this.$_destroySidebarResizeEvent()
22 | },
23 | // to fixed bug when cached by keep-alive
24 | // https://github.com/PanJiaChen/vue-element-admin/issues/2116
25 | activated() {
26 | this.$_initResizeEvent()
27 | this.$_initSidebarResizeEvent()
28 | },
29 | deactivated() {
30 | this.$_destroyResizeEvent()
31 | this.$_destroySidebarResizeEvent()
32 | },
33 | methods: {
34 | // use $_ for mixins properties
35 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
36 | $_initResizeEvent() {
37 | window.addEventListener('resize', this.$_resizeHandler)
38 | },
39 | $_destroyResizeEvent() {
40 | window.removeEventListener('resize', this.$_resizeHandler)
41 | },
42 | $_sidebarResizeHandler(e) {
43 | if (e.propertyName === 'width') {
44 | this.$_resizeHandler()
45 | }
46 | },
47 | $_initSidebarResizeEvent() {
48 | this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
49 | this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
50 | },
51 | $_destroySidebarResizeEvent() {
52 | this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Tinymce/dynamicLoadScript.js:
--------------------------------------------------------------------------------
1 | let callbacks = []
2 |
3 | function loadedTinymce() {
4 | // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
5 | // check is successfully downloaded script
6 | return window.tinymce
7 | }
8 |
9 | const dynamicLoadScript = (src, callback) => {
10 | const existingScript = document.getElementById(src)
11 | const cb = callback || function() {}
12 |
13 | if (!existingScript) {
14 | const script = document.createElement('script')
15 | script.src = src // src url for the third-party library being loaded.
16 | script.id = src
17 | document.body.appendChild(script)
18 | callbacks.push(cb)
19 | const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
20 | onEnd(script)
21 | }
22 |
23 | if (existingScript && cb) {
24 | if (loadedTinymce()) {
25 | cb(null, existingScript)
26 | } else {
27 | callbacks.push(cb)
28 | }
29 | }
30 |
31 | function stdOnEnd(script) {
32 | script.onload = function() {
33 | // this.onload = null here is necessary
34 | // because even IE9 works not like others
35 | this.onerror = this.onload = null
36 | for (const cb of callbacks) {
37 | cb(null, script)
38 | }
39 | callbacks = null
40 | }
41 | script.onerror = function() {
42 | this.onerror = this.onload = null
43 | cb(new Error('Failed to load ' + src), script)
44 | }
45 | }
46 |
47 | function ieOnEnd(script) {
48 | script.onreadystatechange = function() {
49 | if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
50 | this.onreadystatechange = null
51 | for (const cb of callbacks) {
52 | cb(null, script) // there is no way to catch loading errors in IE8
53 | }
54 | callbacks = null
55 | }
56 | }
57 | }
58 |
59 | export default dynamicLoadScript
60 |
--------------------------------------------------------------------------------
/src/filters/index.js:
--------------------------------------------------------------------------------
1 | // import parseTime, formatTime and set to filter
2 | export { parseTime, formatTime } from '@/utils'
3 |
4 | /**
5 | * Show plural label if time is plural number
6 | * @param {number} time
7 | * @param {string} label
8 | * @return {string}
9 | */
10 | function pluralize(time, label) {
11 | if (time === 1) {
12 | return time + label
13 | }
14 | return time + label + 's'
15 | }
16 |
17 | /**
18 | * @param {number} time
19 | */
20 | export function timeAgo(time) {
21 | const between = Date.now() / 1000 - Number(time)
22 | if (between < 3600) {
23 | return pluralize(~~(between / 60), ' minute')
24 | } else if (between < 86400) {
25 | return pluralize(~~(between / 3600), ' hour')
26 | } else {
27 | return pluralize(~~(between / 86400), ' day')
28 | }
29 | }
30 |
31 | /**
32 | * Number formatting
33 | * like 10000 => 10k
34 | * @param {number} num
35 | * @param {number} digits
36 | */
37 | export function numberFormatter(num, digits) {
38 | const si = [
39 | { value: 1E18, symbol: 'E' },
40 | { value: 1E15, symbol: 'P' },
41 | { value: 1E12, symbol: 'T' },
42 | { value: 1E9, symbol: 'G' },
43 | { value: 1E6, symbol: 'M' },
44 | { value: 1E3, symbol: 'k' }
45 | ]
46 | for (let i = 0; i < si.length; i++) {
47 | if (num >= si[i].value) {
48 | return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
49 | }
50 | }
51 | return num.toString()
52 | }
53 |
54 | /**
55 | * 10000 => "10,000"
56 | * @param {number} num
57 | */
58 | export function toThousandFilter(num) {
59 | return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
60 | }
61 |
62 | /**
63 | * Upper case first char
64 | * @param {String} string
65 | */
66 | export function uppercaseFirst(string) {
67 | return string.charAt(0).toUpperCase() + string.slice(1)
68 | }
69 |
--------------------------------------------------------------------------------
/src/styles/btn.scss:
--------------------------------------------------------------------------------
1 | @import './variables.scss';
2 |
3 | @mixin colorBtn($color) {
4 | background: $color;
5 |
6 | &:hover {
7 | color: $color;
8 |
9 | &:before,
10 | &:after {
11 | background: $color;
12 | }
13 | }
14 | }
15 |
16 | .blue-btn {
17 | @include colorBtn($blue)
18 | }
19 |
20 | .light-blue-btn {
21 | @include colorBtn($light-blue)
22 | }
23 |
24 | .red-btn {
25 | @include colorBtn($red)
26 | }
27 |
28 | .pink-btn {
29 | @include colorBtn($pink)
30 | }
31 |
32 | .green-btn {
33 | @include colorBtn($green)
34 | }
35 |
36 | .tiffany-btn {
37 | @include colorBtn($tiffany)
38 | }
39 |
40 | .yellow-btn {
41 | @include colorBtn($yellow)
42 | }
43 |
44 | .pan-btn {
45 | font-size: 14px;
46 | color: #fff;
47 | padding: 14px 36px;
48 | border-radius: 8px;
49 | border: none;
50 | outline: none;
51 | transition: 600ms ease all;
52 | position: relative;
53 | display: inline-block;
54 |
55 | &:hover {
56 | background: #fff;
57 |
58 | &:before,
59 | &:after {
60 | width: 100%;
61 | transition: 600ms ease all;
62 | }
63 | }
64 |
65 | &:before,
66 | &:after {
67 | content: '';
68 | position: absolute;
69 | top: 0;
70 | right: 0;
71 | height: 2px;
72 | width: 0;
73 | transition: 400ms ease all;
74 | }
75 |
76 | &::after {
77 | right: inherit;
78 | top: inherit;
79 | left: 0;
80 | bottom: 0;
81 | }
82 | }
83 |
84 | .custom-button {
85 | display: inline-block;
86 | line-height: 1;
87 | white-space: nowrap;
88 | cursor: pointer;
89 | background: #fff;
90 | color: #fff;
91 | -webkit-appearance: none;
92 | text-align: center;
93 | box-sizing: border-box;
94 | outline: 0;
95 | margin: 0;
96 | padding: 10px 15px;
97 | font-size: 14px;
98 | border-radius: 4px;
99 | }
100 |
--------------------------------------------------------------------------------
/src/utils/scroll-to.js:
--------------------------------------------------------------------------------
1 | Math.easeInOutQuad = function(t, b, c, d) {
2 | t /= d / 2
3 | if (t < 1) {
4 | return c / 2 * t * t + b
5 | }
6 | t--
7 | return -c / 2 * (t * (t - 2) - 1) + b
8 | }
9 |
10 | // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
11 | var requestAnimFrame = (function() {
12 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
13 | })()
14 |
15 | /**
16 | * Because it's so fucking difficult to detect the scrolling element, just move them all
17 | * @param {number} amount
18 | */
19 | function move(amount) {
20 | document.documentElement.scrollTop = amount
21 | document.body.parentNode.scrollTop = amount
22 | document.body.scrollTop = amount
23 | }
24 |
25 | function position() {
26 | return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
27 | }
28 |
29 | /**
30 | * @param {number} to
31 | * @param {number} duration
32 | * @param {Function} callback
33 | */
34 | export function scrollTo(to, duration, callback) {
35 | const start = position()
36 | const change = to - start
37 | const increment = 20
38 | let currentTime = 0
39 | duration = (typeof (duration) === 'undefined') ? 500 : duration
40 | var animateScroll = function() {
41 | // increment the time
42 | currentTime += increment
43 | // find the value with the quadratic in-out easing function
44 | var val = Math.easeInOutQuad(currentTime, start, change, duration)
45 | // move the document.body
46 | move(val)
47 | // do the animation unless its over
48 | if (currentTime < duration) {
49 | requestAnimFrame(animateScroll)
50 | } else {
51 | if (callback && typeof (callback) === 'function') {
52 | // the animation is done so lets callback
53 | callback()
54 | }
55 | }
56 | }
57 | animateScroll()
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/GithubCorner/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
24 |
25 |
26 |
55 |
--------------------------------------------------------------------------------
/src/views/message/system/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 | 我的消息
5 |
6 |
5 |
6 |
7 |
8 |
15 |
16 |
17 |
45 |
46 |
73 |
--------------------------------------------------------------------------------
/src/layout/components/Sidebar/Logo.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
14 |
10 |
13 |
3 |
4 |
5 | ![]()
6 |
8 |
9 | ![]()
10 |
12 |
13 |
14 |
15 |
16 |
33 |
34 |
83 |
--------------------------------------------------------------------------------
/src/icons/svg/qq.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/icons/svg/network-backup-svgrepo-com.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/icons/svg/arrow-circle-down-svgrepo-com.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | {{ title }}
7 |{{ title }}
11 |headscale-panel-ui
2 | 3 | This project is developed based on the go-web-mini project, using a management system scaffold built with Go + Vue. It follows a front-end and back-end separation approach, only including the necessary parts for project development. It incorporates role-based access control (RBAC), is well-structured with reasonable packages, and is concise and easy to expand. The backend in Go includes the use of gin, gorm, jwt, and casbin, while the frontend in Vue is based on vue-element-admin
4 |
5 | About Me
6 | -------------------------
7 | This is my first official open source project, and I have little experience with it,
8 | so if you have good advice or techniques, I look forward to talking to you, and you can start by submitting an issue.
9 | If there is an architecture that doesn't fit or changes are significant, I will refactor in due course.
10 |
11 | ## Installation method
12 | 1. Download this project
13 | 2. Run `npm install`
14 | 3. Edit the `.env.production` with your backend host and port
15 | 4. Build `npm run build:prod`
16 |
17 | > Note: If you encounter the following problem, please execute the command `export NODE_OPTIONS=--openssl-legacy-provider` before executing step 4.
18 | 
19 |
20 | ## Deployment
21 | Copy files in `dist` to your web server
22 |
23 | Front-end supports separate front- and back-end deployments
24 | If you need to deploy the front-end and back-end on the same machine you can use nginx as the web server, see [here](./docs/nginx.md) for configuration
25 |
26 | Project Screenshots
27 | -------------------
28 |
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 |
37 | Backend Project
38 | --------------------
39 | [https://github.com/QianheYu/headscale-panel.git](https://github.com/QianheYu/headscale-panel.git)
40 |
41 | ## MIT License
42 |
43 | Copyright (c) 2023 QianheYu
44 |
45 |
--------------------------------------------------------------------------------
/src/components/YamlEditor/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
65 |
66 |
87 |
--------------------------------------------------------------------------------
/src/utils/validate.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by PanJiaChen on 16/11/18.
3 | */
4 |
5 | /**
6 | * @param {string} path
7 | * @returns {Boolean}
8 | */
9 | export function isExternal(path) {
10 | return /^(https?:|mailto:|tel:)/.test(path)
11 | }
12 |
13 | /**
14 | * @param {string} str
15 | * @returns {Boolean}
16 | */
17 | export function validUsername(str) {
18 | return str.length >= 2
19 | }
20 |
21 | /**
22 | * @param {string} url
23 | * @returns {Boolean}
24 | */
25 | export function validURL(url) {
26 | const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
27 | return reg.test(url)
28 | }
29 |
30 | /**
31 | * @param {string} str
32 | * @returns {Boolean}
33 | */
34 | export function validLowerCase(str) {
35 | const reg = /^[a-z]+$/
36 | return reg.test(str)
37 | }
38 |
39 | /**
40 | * @param {string} str
41 | * @returns {Boolean}
42 | */
43 | export function validUpperCase(str) {
44 | const reg = /^[A-Z]+$/
45 | return reg.test(str)
46 | }
47 |
48 | /**
49 | * @param {string} str
50 | * @returns {Boolean}
51 | */
52 | export function validAlphabets(str) {
53 | const reg = /^[A-Za-z]+$/
54 | return reg.test(str)
55 | }
56 |
57 | /**
58 | * @param {string} email
59 | * @returns {Boolean}
60 | */
61 | export function validEmail(email) {
62 | const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
63 | return reg.test(email)
64 | }
65 |
66 | /**
67 | * @param {string} str
68 | * @returns {Boolean}
69 | */
70 | export function isString(str) {
71 | if (typeof str === 'string' || str instanceof String) {
72 | return true
73 | }
74 | return false
75 | }
76 |
77 | /**
78 | * @param {Array} arg
79 | * @returns {Boolean}
80 | */
81 | export function isArray(arg) {
82 | if (typeof Array.isArray === 'undefined') {
83 | return Object.prototype.toString.call(arg) === '[object Array]'
84 | }
85 | return Array.isArray(arg)
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/Echarts/PieChart.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
85 |
--------------------------------------------------------------------------------
/src/components/JsonEditor/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
62 |
63 |
84 |
--------------------------------------------------------------------------------
/src/components/Sticky/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
13 |
14 |
92 |
--------------------------------------------------------------------------------
/src/views/console/setting/components/Card.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
10 |
11 | sticky
9 |
4 | {{ label }}
5 |
6 |
3 |
15 |
16 |
17 |
92 |
93 |
102 |
--------------------------------------------------------------------------------
/src/components/ErrorLog/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
9 |
10 |
15 |
16 |
17 |
24 |
31 |
39 |
40 |
41 | {{ scope.row.err.stack }}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
70 |
71 |
79 |
--------------------------------------------------------------------------------
/src/directive/waves/waves.js:
--------------------------------------------------------------------------------
1 | import './waves.css'
2 |
3 | const context = '@@wavesContext'
4 |
5 | function handleClick(el, binding) {
6 | function handle(e) {
7 | const customOpts = Object.assign({}, binding.value)
8 | const opts = Object.assign({
9 | ele: el, // 波纹作用元素
10 | type: 'hit', // hit 点击位置扩散 center中心点扩展
11 | color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
12 | },
13 | customOpts
14 | )
15 | const target = opts.ele
16 | if (target) {
17 | target.style.position = 'relative'
18 | target.style.overflow = 'hidden'
19 | const rect = target.getBoundingClientRect()
20 | let ripple = target.querySelector('.waves-ripple')
21 | if (!ripple) {
22 | ripple = document.createElement('span')
23 | ripple.className = 'waves-ripple'
24 | ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
25 | target.appendChild(ripple)
26 | } else {
27 | ripple.className = 'waves-ripple'
28 | }
29 | switch (opts.type) {
30 | case 'center':
31 | ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
32 | ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
33 | break
34 | default:
35 | ripple.style.top =
36 | (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
37 | document.body.scrollTop) + 'px'
38 | ripple.style.left =
39 | (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
40 | document.body.scrollLeft) + 'px'
41 | }
42 | ripple.style.backgroundColor = opts.color
43 | ripple.className = 'waves-ripple z-active'
44 | return false
45 | }
46 | }
47 |
48 | if (!el[context]) {
49 | el[context] = {
50 | removeHandle: handle
51 | }
52 | } else {
53 | el[context].removeHandle = handle
54 | }
55 |
56 | return handle
57 | }
58 |
59 | export default {
60 | bind(el, binding) {
61 | el.addEventListener('click', handleClick(el, binding), false)
62 | },
63 | update(el, binding) {
64 | el.removeEventListener('click', el[context].removeHandle, false)
65 | el.addEventListener('click', handleClick(el, binding), false)
66 | },
67 | unbind(el) {
68 | el.removeEventListener('click', el[context].removeHandle, false)
69 | el[context] = null
70 | delete el[context]
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/views/console/setting/components/mixins/dataFormat.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars
2 |
3 | import { today } from '@/utils/date'
4 |
5 | export class PreAuthKey {
6 | constructor(id = '', key = '', reusable = false, ephemeral = false, used = false, expire = '', create_at = '', acl_tags = []) {
7 | this.id = id
8 | this.key = key
9 | this.reusable = reusable
10 | this.ephemeral = ephemeral
11 | this.used = used
12 | this.expire = expire
13 | this.create_at = create_at
14 | this.acl_tags = acl_tags
15 | }
16 | id = '';
17 | key = '';
18 | reusable = true;
19 | ephemeral = true;
20 | used = true;
21 | expire = '';
22 | create_at = '';
23 | acl_tags = [];
24 | toJson() {
25 | return {
26 | id: this.id,
27 | key: this.key,
28 | reusable: this.reusable,
29 | ephemeral: this.ephemeral,
30 | used: this.used,
31 | expire: this.expire,
32 | create_at: this.create_at,
33 | acl_tags: this.acl_tags
34 | }
35 | }
36 | static fromJson(json = {}) {
37 | return new PreAuthKey(
38 | json.id,
39 | json.key,
40 | json.reusable,
41 | json.ephemeral,
42 | json.used,
43 | json.expire,
44 | json.create_at,
45 | json.acl_tags
46 | )
47 | }
48 | }
49 | export class NewPreAuthKey {
50 | reusable = false;
51 | ephemeral = false;
52 | expire = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59).toISOString();
53 | acl_tags = [];
54 | // expire = '';
55 | toJson() {
56 | return {
57 | expire: this.expire,
58 | reusable: this.reusable,
59 | ephemeral: this.ephemeral,
60 | acl_tags: this.acl_tags
61 | }
62 | }
63 | rule() {
64 | var validate = (rule, value, callback) => {
65 | // value format example "2023-04-07T16:00:00.000Z"
66 | console.debug('validate date')
67 | if (value.length <= 0) {
68 | return callback(new Error('日期不可为空'))
69 | }
70 | const reg = /^[0-9]{4}-[0|1][0-9]-[0-3][0-9]T[0-2][0-9]:[0-5][0-9]:[0-5][0-9].[0-9]{3}Z$/
71 | if (!reg.test(value)) {
72 | return callback(new Error('日期格式错误'))
73 | }
74 | const date = Date.parse(value)
75 | if (date < Date.now()) {
76 | return callback(new Error('日期不可在当前日期之前'))
77 | }
78 | return callback
79 | }
80 | return {
81 | expire: [
82 | { require: true, validate: validate, trigger: 'blur' }
83 | ]
84 | }
85 | }
86 | }
87 |
88 |
--------------------------------------------------------------------------------
/src/components/Breadcrumb/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 | Error Log
12 | Clear All
13 |
14 |
18 |
19 |
20 | {{ row.err.message }}
21 |
22 |
23 | 24 |
25 |
26 |
27 | {{ row.vm.$vnode.tag }} error in {{ row.info }}
28 |
29 |
30 | 31 |
32 |
33 |
34 | {{ row.url }}
35 |
36 |
37 |
38 |
3 |
4 | {{ $t('page401.back') }}
5 |
6 |
7 |
8 |
22 |
23 | ![]()
24 |
25 |
26 |
27 | ![]()
28 |
29 |
30 |
31 |
32 |
55 |
56 |
95 |
--------------------------------------------------------------------------------
/public/webmini.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/svg/menu1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Share/DropdownMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
39 |
40 |
104 |
--------------------------------------------------------------------------------
/src/directive/el-drag-dialog/drag.js:
--------------------------------------------------------------------------------
1 | export default {
2 | bind(el, binding, vnode) {
3 | const dialogHeaderEl = el.querySelector('.el-dialog__header')
4 | const dragDom = el.querySelector('.el-dialog')
5 | dialogHeaderEl.style.cssText += ';cursor:move;'
6 | dragDom.style.cssText += ';top:0px;'
7 |
8 | // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
9 | const getStyle = (function() {
10 | if (window.document.currentStyle) {
11 | return (dom, attr) => dom.currentStyle[attr]
12 | } else {
13 | return (dom, attr) => getComputedStyle(dom, false)[attr]
14 | }
15 | })()
16 |
17 | dialogHeaderEl.onmousedown = (e) => {
18 | // 鼠标按下，计算当前元素距离可视区的距离
19 | const disX = e.clientX - dialogHeaderEl.offsetLeft
20 | const disY = e.clientY - dialogHeaderEl.offsetTop
21 |
22 | const dragDomWidth = dragDom.offsetWidth
23 | const dragDomHeight = dragDom.offsetHeight
24 |
25 | const screenWidth = document.body.clientWidth
26 | const screenHeight = document.body.clientHeight
27 |
28 | const minDragDomLeft = dragDom.offsetLeft
29 | const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
30 |
31 | const minDragDomTop = dragDom.offsetTop
32 | const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
33 |
34 | // 获取到的值带px 正则匹配替换
35 | let styL = getStyle(dragDom, 'left')
36 | let styT = getStyle(dragDom, 'top')
37 |
38 | if (styL.includes('%')) {
39 | styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
40 | styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
41 | } else {
42 | styL = +styL.replace(/\px/g, '')
43 | styT = +styT.replace(/\px/g, '')
44 | }
45 |
46 | document.onmousemove = function(e) {
47 | // 通过事件委托，计算移动的距离
48 | let left = e.clientX - disX
49 | let top = e.clientY - disY
50 |
51 | // 边界处理
52 | if (-(left) > minDragDomLeft) {
53 | left = -minDragDomLeft
54 | } else if (left > maxDragDomLeft) {
55 | left = maxDragDomLeft
56 | }
57 |
58 | if (-(top) > minDragDomTop) {
59 | top = -minDragDomTop
60 | } else if (top > maxDragDomTop) {
61 | top = maxDragDomTop
62 | }
63 |
64 | // 移动当前元素
65 | dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
66 |
67 | // emit onDrag event
68 | vnode.child.$emit('dragDialog')
69 | }
70 |
71 | document.onmouseup = function(e) {
72 | document.onmousemove = null
73 | document.onmouseup = null
74 | }
75 | }
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/views/console/setting/components/CardTab.vue:
--------------------------------------------------------------------------------
1 |
2 | 9 | Oops! 10 |
11 |{{ $t('page401.noPermission') }}
12 |{{ $t('page401.contactLeader') }}
13 |-
14 |
- {{ $t('page401.orYouCanGoTo') }} 15 |
-
16 |
17 | {{ $t('page401.homePage') }} 18 | 19 |
20 |
3 |
28 |
29 |
30 |
83 |
84 |
109 |
--------------------------------------------------------------------------------
/src/views/console/acl/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
27 | Page style setting
5 | 6 |
7 | Theme Color
8 |
10 |
11 |
12 | Open Tags-View
13 |
15 |
16 |
17 | Fixed Header
18 |
20 |
21 |
22 | Sidebar Logo
23 |
25 |
26 |
4 | {{ this.$t('console.acl.title') }}
5 |
6 |
7 |