style: format code for all

This commit is contained in:
LZHD 2021-07-06 01:01:42 +08:00 committed by 踏学吾痕
parent e1200f2dbe
commit 77a1a47110
114 changed files with 7068 additions and 1068 deletions

View File

@ -4,13 +4,42 @@ module.exports = {
node: true node: true
}, },
extends: [ extends: [
'plugin:vue/vue3-essential', "plugin:vue/vue3-essential",
'eslint:recommended', "eslint:recommended",
'@vue/typescript/recommended', "@vue/typescript/recommended",
'@vue/prettier', "@vue/prettier",
'@vue/prettier/@typescript-eslint' "@vue/prettier/@typescript-eslint"
], ],
parser: "vue-eslint-parser",
parserOptions: { parserOptions: {
ecmaVersion: 2020 parser: "@typescript-eslint/parser",
ecmaVersion: 2020,
sourceType: "module",
jsxPragma: "React",
ecmaFeatures: {
jsx: true
}
},
rules: {
"@typescript-eslint/no-explicit-any": "off", // any
"@typescript-eslint/explicit-module-boundary-types": "off", // setup()
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_"
}
],
"no-unused-vars": [
"error",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_"
}
]
} }
}; };

View File

@ -1,7 +1,7 @@
module.exports = { module.exports = {
bracketSpacing: true, bracketSpacing: true,
jsxBracketSameLine: true, jsxBracketSameLine: true,
singleQuote: true, singleQuote: false,
arrowParens: 'avoid', arrowParens: 'avoid',
trailingComma: 'all' trailingComma: 'none'
}; };

5676
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,3 +1,3 @@
<template> <template>
<router-view /> <router-view />
</template> </template>

View File

@ -1,12 +1,11 @@
import { http } from "../utils/http";
import { http } from "../utils/http"
// 地图数据 // 地图数据
export const mapJson = (data?: object): any => { export const mapJson = (data?: object): any => {
return http.request("get", "/getMapInfo", data) return http.request("get", "/getMapInfo", data);
} };
// echarts数据 // echarts数据
export const echartsJson = (data?: object): any => { export const echartsJson = (data?: object): any => {
return http.request("get", "/getEchartsInfo", data) return http.request("get", "/getEchartsInfo", data);
} };

View File

@ -1,16 +1,16 @@
import { http } from "../utils/http" import { http } from "../utils/http";
// 获取验证码 // 获取验证码
export const getVerify = (): any => { export const getVerify = (): any => {
return http.request("get", "/captcha") return http.request("get", "/captcha");
} };
// 登录 // 登录
export const getLogin = (data: object): any => { export const getLogin = (data: object): any => {
return http.request("post", "/login", data) return http.request("post", "/login", data);
} };
// 注册 // 注册
export const getRegist = (data: object): any => { export const getRegist = (data: object): any => {
return http.request("post", "/register", data) return http.request("post", "/register", data);
} };

View File

@ -1 +1,63 @@
!function(e){var t,c,l,n,o,i,a='<svg><symbol id="team-iconshanchu" viewBox="0 0 1024 1024"><path d="M200.0896 166.675692l657.250462 657.218954-33.429662 33.429662-657.250462-657.250462z" ></path><path d="M166.675692 823.9104l657.218954-657.250462 33.429662 33.429662-657.250462 657.250462z" ></path></symbol><symbol id="team-iconshow-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z" ></path></symbol><symbol id="team-iconhidden-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 716.8v204.8H307.2v-204.8H102.4v-102.4h307.2z m0-409.6v102.4H102.4V307.2h204.8V102.4h102.4z m512 409.6h-204.8v204.8h-102.4v-307.2h307.2z m0-307.2h-307.2V102.4h102.4v204.8h204.8z" ></path></symbol><symbol id="team-iconexit-fullscreen" viewBox="0 0 1024 1024"><path d="M366.2 181.8c-1-8-10.8-11.4-16.5-5.7l-53.1 53.1L134.2 67c-3.8-3.8-10-3.8-13.7 0L69 118.3c-3.8 3.8-3.8 10 0 13.7l162.4 162.4-53.3 53.3c-5.7 5.7-2.3 15.5 5.7 16.5l194.6 23c6.2 0.7 11.5-4.5 10.8-10.8l-23-194.6z m12.3 453.3l-194.7 23c-8 1-11.4 10.8-5.7 16.5l53.3 53.3L69 890.1c-3.8 3.8-3.8 10 0 13.7l51.5 51.4c3.8 3.8 10 3.8 13.7 0l162.4-162.3 53.1 53.1c5.7 5.7 15.5 2.3 16.5-5.7l23-194.4c0.7-6.3-4.5-11.5-10.7-10.8z m269.4-248l194.7-23c8-1 11.4-10.8 5.7-16.5L795 294.4l162.4-162.3c3.8-3.8 3.8-10 0-13.7L905.9 67c-3.8-3.8-10-3.8-13.7 0L729.7 229.2l-53.1-53.1c-5.7-5.7-15.6-2.3-16.5 5.7l-23 194.5c-0.6 6.3 4.6 11.5 10.8 10.8zM795 727.8l53.3-53.3c5.7-5.7 2.3-15.5-5.7-16.5L648 635c-6.2-0.7-11.5 4.5-10.8 10.8l23 194.6c1 8 10.8 11.4 16.5 5.7l53.1-53.1 162.4 162.3c3.8 3.8 10 3.8 13.7 0l51.5-51.4c3.8-3.8 3.8-10 0-13.7L795 727.8z m0 0" fill="#515151" ></path></symbol><symbol id="team-iconfullscreen" viewBox="0 0 1024 1024"><path d="M229.8 163l55.7-55.7c6-6 2.4-16.2-6-17.2l-203.2-24c-6.5-0.8-12 4.7-11.3 11.3l24 203.2c1 8.4 11.3 11.9 17.2 6l55.4-55.4 169.6 169.4c3.9 3.9 10.4 3.9 14.3 0l53.8-53.6c3.9-3.9 3.9-10.4 0-14.3L229.8 163z m447.3 237.6c3.9 3.9 10.4 3.9 14.3 0L861 231.1l55.4 55.4c6 6 16.2 2.4 17.2-6l24-203c0.8-6.5-4.7-12-11.3-11.3l-203.2 24c-8.4 1-11.9 11.3-6 17.2l55.7 55.7-169.5 169.4c-3.9 3.9-3.9 10.4 0 14.3l53.8 53.8z m256.6 343.9c-1-8.4-11.3-11.9-17.2-6L861 794 691.4 624.5c-3.9-3.9-10.4-3.9-14.3 0l-53.8 53.6c-3.9 3.9-3.9 10.4 0 14.3L792.9 862l-55.7 55.7c-6 6-2.4 16.2 6 17.2l203.2 24c6.5 0.8 12-4.7 11.3-11.3l-24-203.1z m-588.1-120c-3.9-3.9-10.4-3.9-14.3 0L161.7 794l-55.4-55.4c-6-6-16.2-2.4-17.2 6l-24 203c-0.8 6.5 4.7 12.1 11.3 11.3l203.2-24c8.4-1 11.9-11.3 6-17.2l-55.7-55.5 169.6-169.4c3.9-3.9 3.9-10.4 0-14.3l-53.9-54z m0 0" fill="#515151" ></path></symbol></svg>',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss");if(d&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function m(){o||(o=!0,l())}t=function(){var e,t,c,l;(l=document.createElement("div")).innerHTML=a,a=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",e=c,(t=document.body).firstChild?(l=e,(c=t.firstChild).parentNode.insertBefore(l,c)):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),t()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(l=t,n=e.document,o=!1,(i=function(){try{n.documentElement.doScroll("left")}catch(e){return void setTimeout(i,50)}m()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,m())})}(window); !(function (e) {
var t,
c,
l,
n,
o,
i,
a =
'<svg><symbol id="team-iconshanchu" viewBox="0 0 1024 1024"><path d="M200.0896 166.675692l657.250462 657.218954-33.429662 33.429662-657.250462-657.250462z" ></path><path d="M166.675692 823.9104l657.218954-657.250462 33.429662 33.429662-657.250462 657.250462z" ></path></symbol><symbol id="team-iconshow-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z" ></path></symbol><symbol id="team-iconhidden-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 716.8v204.8H307.2v-204.8H102.4v-102.4h307.2z m0-409.6v102.4H102.4V307.2h204.8V102.4h102.4z m512 409.6h-204.8v204.8h-102.4v-307.2h307.2z m0-307.2h-307.2V102.4h102.4v204.8h204.8z" ></path></symbol><symbol id="team-iconexit-fullscreen" viewBox="0 0 1024 1024"><path d="M366.2 181.8c-1-8-10.8-11.4-16.5-5.7l-53.1 53.1L134.2 67c-3.8-3.8-10-3.8-13.7 0L69 118.3c-3.8 3.8-3.8 10 0 13.7l162.4 162.4-53.3 53.3c-5.7 5.7-2.3 15.5 5.7 16.5l194.6 23c6.2 0.7 11.5-4.5 10.8-10.8l-23-194.6z m12.3 453.3l-194.7 23c-8 1-11.4 10.8-5.7 16.5l53.3 53.3L69 890.1c-3.8 3.8-3.8 10 0 13.7l51.5 51.4c3.8 3.8 10 3.8 13.7 0l162.4-162.3 53.1 53.1c5.7 5.7 15.5 2.3 16.5-5.7l23-194.4c0.7-6.3-4.5-11.5-10.7-10.8z m269.4-248l194.7-23c8-1 11.4-10.8 5.7-16.5L795 294.4l162.4-162.3c3.8-3.8 3.8-10 0-13.7L905.9 67c-3.8-3.8-10-3.8-13.7 0L729.7 229.2l-53.1-53.1c-5.7-5.7-15.6-2.3-16.5 5.7l-23 194.5c-0.6 6.3 4.6 11.5 10.8 10.8zM795 727.8l53.3-53.3c5.7-5.7 2.3-15.5-5.7-16.5L648 635c-6.2-0.7-11.5 4.5-10.8 10.8l23 194.6c1 8 10.8 11.4 16.5 5.7l53.1-53.1 162.4 162.3c3.8 3.8 10 3.8 13.7 0l51.5-51.4c3.8-3.8 3.8-10 0-13.7L795 727.8z m0 0" fill="#515151" ></path></symbol><symbol id="team-iconfullscreen" viewBox="0 0 1024 1024"><path d="M229.8 163l55.7-55.7c6-6 2.4-16.2-6-17.2l-203.2-24c-6.5-0.8-12 4.7-11.3 11.3l24 203.2c1 8.4 11.3 11.9 17.2 6l55.4-55.4 169.6 169.4c3.9 3.9 10.4 3.9 14.3 0l53.8-53.6c3.9-3.9 3.9-10.4 0-14.3L229.8 163z m447.3 237.6c3.9 3.9 10.4 3.9 14.3 0L861 231.1l55.4 55.4c6 6 16.2 2.4 17.2-6l24-203c0.8-6.5-4.7-12-11.3-11.3l-203.2 24c-8.4 1-11.9 11.3-6 17.2l55.7 55.7-169.5 169.4c-3.9 3.9-3.9 10.4 0 14.3l53.8 53.8z m256.6 343.9c-1-8.4-11.3-11.9-17.2-6L861 794 691.4 624.5c-3.9-3.9-10.4-3.9-14.3 0l-53.8 53.6c-3.9 3.9-3.9 10.4 0 14.3L792.9 862l-55.7 55.7c-6 6-2.4 16.2 6 17.2l203.2 24c6.5 0.8 12-4.7 11.3-11.3l-24-203.1z m-588.1-120c-3.9-3.9-10.4-3.9-14.3 0L161.7 794l-55.4-55.4c-6-6-16.2-2.4-17.2 6l-24 203c-0.8 6.5 4.7 12.1 11.3 11.3l203.2-24c8.4-1 11.9-11.3 6-17.2l-55.7-55.5 169.6-169.4c3.9-3.9 3.9-10.4 0-14.3l-53.9-54z m0 0" fill="#515151" ></path></symbol></svg>',
d = (d = document.getElementsByTagName("script"))[
d.length - 1
].getAttribute("data-injectcss");
if (d && !e.__iconfont__svg__cssinject__) {
e.__iconfont__svg__cssinject__ = !0;
try {
document.write(
"<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
);
} catch (e) {
console && console.log(e);
}
}
function m() {
o || ((o = !0), l());
}
(t = function () {
var e, t, c, l;
((l = document.createElement("div")).innerHTML = a),
(a = null),
(c = l.getElementsByTagName("svg")[0]) &&
(c.setAttribute("aria-hidden", "true"),
(c.style.position = "absolute"),
(c.style.width = 0),
(c.style.height = 0),
(c.style.overflow = "hidden"),
(e = c),
(t = document.body).firstChild
? ((l = e), (c = t.firstChild).parentNode.insertBefore(l, c))
: t.appendChild(e));
}),
document.addEventListener
? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
? setTimeout(t, 0)
: ((c = function () {
document.removeEventListener("DOMContentLoaded", c, !1), t();
}),
document.addEventListener("DOMContentLoaded", c, !1))
: document.attachEvent &&
((l = t),
(n = e.document),
(o = !1),
(i = function () {
try {
n.documentElement.doScroll("left");
} catch (e) {
return void setTimeout(i, 50);
}
m();
})(),
(n.onreadystatechange = function () {
"complete" == n.readyState && ((n.onreadystatechange = null), m());
}));
})(window);

View File

@ -4,7 +4,7 @@ import reBreadCrumb from "./src/index.vue";
export const ReBreadCrumb = Object.assign(reBreadCrumb, { export const ReBreadCrumb = Object.assign(reBreadCrumb, {
install(app: App) { install(app: App) {
app.component(reBreadCrumb.name, reBreadCrumb); app.component(reBreadCrumb.name, reBreadCrumb);
}, }
}); });
export default ReBreadCrumb; export default ReBreadCrumb;

View File

@ -5,11 +5,10 @@
<span <span
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
class="no-redirect" class="no-redirect"
>{{ $t(item.meta.title) }}</span> >{{ $t(item.meta.title) }}</span
>
<a v-else @click.prevent="handleLink(item)"> <a v-else @click.prevent="handleLink(item)">
{{ {{ $t(item.meta.title) }}
$t(item.meta.title)
}}
</a> </a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
@ -17,7 +16,6 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { pathToRegexp } from "path-to-regexp";
import { ref, defineComponent, watch, Ref } from "vue"; import { ref, defineComponent, watch, Ref } from "vue";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router"; import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
@ -28,7 +26,7 @@ export default defineComponent({
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const isDashboard = (route: RouteLocationMatched): Boolean | string => { const isDashboard = (route: RouteLocationMatched): boolean | string => {
const name = route && (route.name as string); const name = route && (route.name as string);
if (!name) { if (!name) {
return false; return false;
@ -41,10 +39,10 @@ export default defineComponent({
const first = matched[0]; const first = matched[0];
if (!isDashboard(first)) { if (!isDashboard(first)) {
matched = [ matched = [
({ {
path: "/welcome", path: "/welcome",
meta: { title: "message.hshome" } meta: { title: "message.hshome" }
} as unknown) as RouteLocationMatched } as unknown as RouteLocationMatched
].concat(matched); ].concat(matched);
} }
levelList.value = matched.filter( levelList.value = matched.filter(
@ -73,7 +71,7 @@ export default defineComponent({
}); });
</script> </script>
<style lang="scss" scoped > <style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb { .app-breadcrumb.el-breadcrumb {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;

View File

@ -4,7 +4,7 @@ import reCountTo from "./src";
export const ReCountTo = Object.assign(reCountTo, { export const ReCountTo = Object.assign(reCountTo, {
install(app: App) { install(app: App) {
app.component(reCountTo.name, reCountTo); app.component(reCountTo.name, reCountTo);
}, }
}); });
export default ReCountTo; export default ReCountTo;

View File

@ -4,7 +4,7 @@ import {
computed, computed,
watch, watch,
onMounted, onMounted,
unref, unref
} from "vue"; } from "vue";
import { countToProps } from "./props"; import { countToProps } from "./props";
import { isNumber } from "/@/utils/is"; import { isNumber } from "/@/utils/is";
@ -37,7 +37,7 @@ export default defineComponent({
remaining: null, remaining: null,
rAF: null, rAF: null,
color: null, color: null,
fontSize: "16px", fontSize: "16px"
}); });
const getCountDown = computed(() => { const getCountDown = computed(() => {
@ -61,6 +61,7 @@ export default defineComponent({
state.rAF = requestAnimationFrame(count); state.rAF = requestAnimationFrame(count);
} }
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
function pauseResume() { function pauseResume() {
if (state.paused) { if (state.paused) {
resume(); resume();
@ -82,6 +83,7 @@ export default defineComponent({
requestAnimationFrame(count); requestAnimationFrame(count);
} }
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
function reset() { function reset() {
state.startTime = null; state.startTime = null;
cancelAnimationFrame(state.rAF); cancelAnimationFrame(state.rAF);
@ -166,12 +168,11 @@ export default defineComponent({
<span <span
style={{ style={{
color: props.color, color: props.color,
fontSize: props.fontSize, fontSize: props.fontSize
}} }}>
>
{state.displayValue} {state.displayValue}
</span> </span>
</> </>
); );
}, }
}); });

View File

@ -11,7 +11,7 @@ export const countToProps = {
default: 0, default: 0,
validator(value: number) { validator(value: number) {
return value >= 0; return value >= 0;
}, }
}, },
color: propTypes.string.def(), color: propTypes.string.def(),
fontSize: propTypes.string.def(), fontSize: propTypes.string.def(),
@ -26,6 +26,6 @@ export const countToProps = {
>, >,
default(t: number, b: number, c: number, d: number) { default(t: number, b: number, c: number, d: number) {
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b; return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
}, }
}, }
}; };

View File

@ -4,7 +4,7 @@ import reCropper from "./src";
export const ReCropper = Object.assign(reCropper, { export const ReCropper = Object.assign(reCropper, {
install(app: App) { install(app: App) {
app.component(reCropper.name, reCropper); app.component(reCropper.name, reCropper);
}, }
}); });
export default ReCropper; export default ReCropper;

View File

@ -7,7 +7,7 @@ import {
ref, ref,
unref, unref,
computed, computed,
PropType, PropType
} from "vue"; } from "vue";
import { templateRef } from "@vueuse/core"; import { templateRef } from "@vueuse/core";
import { useAttrs } from "/@/utils/useAttrs"; import { useAttrs } from "/@/utils/useAttrs";
@ -37,7 +37,7 @@ const defaultOptions: Cropper.Options = {
modal: true, modal: true,
guides: true, guides: true,
movable: true, movable: true,
rotatable: true, rotatable: true
}; };
export default defineComponent({ export default defineComponent({
@ -45,31 +45,35 @@ export default defineComponent({
props: { props: {
src: { src: {
type: String, type: String,
required: true, required: true
}, },
alt: { alt: {
type: String, type: String
}, },
width: { width: {
type: [String, Number], type: [String, Number],
default: "", default: ""
}, },
height: { height: {
type: [String, Number], type: [String, Number],
default: "360px", default: "360px"
}, },
crossorigin: { crossorigin: {
type: String || Object, type: String || Object,
default: undefined, default: undefined
}, },
imageStyle: { imageStyle: {
type: Object as PropType<CSSProperties>, type: Object as PropType<CSSProperties>,
default: {}, default() {
return {};
}
}, },
options: { options: {
type: Object as PropType<Options>, type: Object as PropType<Options>,
default: {}, default() {
}, return {};
}
}
}, },
setup(props) { setup(props) {
const cropper: any = ref<Nullable<Cropper>>(null); const cropper: any = ref<Nullable<Cropper>>(null);
@ -77,26 +81,22 @@ export default defineComponent({
const isReady = ref(false); const isReady = ref(false);
const getImageStyle = computed( const getImageStyle = computed((): CSSProperties => {
(): CSSProperties => { return {
return { height: props.height,
height: props.height, width: props.width,
width: props.width, maxWidth: "100%",
maxWidth: "100%", ...props.imageStyle
...props.imageStyle, };
}; });
}
);
const getWrapperStyle = computed( const getWrapperStyle = computed((): CSSProperties => {
(): CSSProperties => { const { height, width } = props;
const { height, width } = props; return {
return { width: `${width}`.replace(/px/, "") + "px",
width: `${width}`.replace(/px/, "") + "px", height: `${height}`.replace(/px/, "") + "px"
height: `${height}`.replace(/px/, "") + "px", };
}; });
}
);
function init() { function init() {
const imgEl = unref(imgElRef); const imgEl = unref(imgElRef);
@ -108,7 +108,7 @@ export default defineComponent({
ready: () => { ready: () => {
isReady.value = true; isReady.value = true;
}, },
...props.options, ...props.options
}); });
} }
@ -123,7 +123,7 @@ export default defineComponent({
imgElRef, imgElRef,
cropper, cropper,
getWrapperStyle, getWrapperStyle,
getImageStyle, getImageStyle
}; };
}, },
@ -132,8 +132,7 @@ export default defineComponent({
<> <>
<div <div
class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })} class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })}
style={this.getWrapperStyle} style={this.getWrapperStyle}>
>
<img <img
ref="imgElRef" ref="imgElRef"
src={this.props.src} src={this.props.src}
@ -144,5 +143,5 @@ export default defineComponent({
</div> </div>
</> </>
); );
}, }
}); });

View File

@ -4,7 +4,7 @@ import reFlop from "./src/index.vue";
export const ReFlop = Object.assign(reFlop, { export const ReFlop = Object.assign(reFlop, {
install(app: App) { install(app: App) {
app.component(reFlop.name, reFlop); app.component(reFlop.name, reFlop);
}, }
}); });
export default ReFlop; export default ReFlop;

View File

@ -13,14 +13,15 @@ export default defineComponent({
backText: propTypes.number.def(1), backText: propTypes.number.def(1),
// flipping duration, please be consistent with the CSS animation-duration value. // flipping duration, please be consistent with the CSS animation-duration value.
// 翻牌动画时间与CSS中设置的animation-duration保持一致 // 翻牌动画时间与CSS中设置的animation-duration保持一致
duration: propTypes.number.def(600), duration: propTypes.number.def(600)
}, },
setup(props) { setup(props) {
// eslint-disable-next-line vue/no-setup-props-destructure
const { frontText, backText, duration } = props; const { frontText, backText, duration } = props;
let isFlipping = ref(false); const isFlipping = ref(false);
let flipType = ref("down"); const flipType = ref("down");
let frontTextFromData = ref(frontText); const frontTextFromData = ref(frontText);
let backTextFromData = ref(backText); const backTextFromData = ref(backText);
const textClass = (number: number) => { const textClass = (number: number) => {
return "number" + number; return "number" + number;
@ -72,24 +73,19 @@ export default defineComponent({
flipDown, flipDown,
flipUp, flipUp,
setFront, setFront,
setBack, setBack
}; };
}, },
render() { render() {
const main = `m-flipper ${this.flipType} ${this.isFlipping ? "go" : ""}`;
const front = `digital front ${this.textClass(this.frontTextFromData)}`;
const back = `digital back ${this.textClass(this.backTextFromData)}`;
return ( return (
<> <div class={main}>
<div <div class={front} />
class={`m-flipper ${this.flipType} ${this.isFlipping ? "go" : ""}`} <div class={back} />
> </div>
<div
class={`digital front ${this.textClass(this.frontTextFromData)}`}
></div>
<div
class={`digital back ${this.textClass(this.backTextFromData)}`}
></div>
</div>
</>
); );
}, }
}); });

View File

@ -11,8 +11,14 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { ref, onBeforeMount, getCurrentInstance, nextTick } from "vue"; import {
ref,
onBeforeMount,
getCurrentInstance,
nextTick,
onUnmounted
} from "vue";
import flippers from "./Filpper"; import flippers from "./Filpper";
export default { export default {
name: "Flop", name: "Flop",
@ -110,6 +116,13 @@ export default {
}); });
}); });
onUnmounted(() => {
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
}
});
return { return {
timer, timer,
flipObjs, flipObjs,

View File

@ -6,17 +6,17 @@ import dataDialog from "./src/DataDialog.vue";
export const Control = Object.assign(control, { export const Control = Object.assign(control, {
install(app: App) { install(app: App) {
app.component(control.name, control); app.component(control.name, control);
}, }
}); });
export const NodePanel = Object.assign(nodePanel, { export const NodePanel = Object.assign(nodePanel, {
install(app: App) { install(app: App) {
app.component(nodePanel.name, nodePanel); app.component(nodePanel.name, nodePanel);
}, }
}); });
export const DataDialog = Object.assign(dataDialog, { export const DataDialog = Object.assign(dataDialog, {
install(app: App) { install(app: App) {
app.component(dataDialog.name, dataDialog); app.component(dataDialog.name, dataDialog);
}, }
}); });

View File

@ -3,18 +3,20 @@
<!-- 功能按钮 --> <!-- 功能按钮 -->
<ul> <ul>
<li <li
v-for="(item,key) in titleLists" v-for="(item, key) in titleLists"
:key="key" :key="key"
:title="item.text" :title="item.text"
:style="{background: focusIndex === key ? '#ccc' : ''}" :style="{ background: focusIndex === key ? '#ccc' : '' }"
@mouseenter.prevent="onEnter(key)" @mouseenter.prevent="onEnter(key)"
@mouseleave.prevent="focusIndex = -1" @mouseleave.prevent="focusIndex = -1"
> >
<button <button
:ref="'controlButton' + key" :ref="'controlButton' + key"
:disabled="item.disabled" :disabled="item.disabled"
:style="{cursor: item.disabled === false ? 'pointer' : 'not-allowed'}" :style="{
@click="onControl(item,key)" cursor: item.disabled === false ? 'pointer' : 'not-allowed'
}"
@click="onControl(item, key)"
> >
<span :class="'iconfont ' + item.icon"></span> <span :class="'iconfont ' + item.icon"></span>
<p>{{ item.text }}</p> <p>{{ item.text }}</p>
@ -24,14 +26,14 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { defineComponent, ref, unref, onMounted, onUnmounted } from "vue"; import { defineComponent, ref, unref, onMounted } from "vue";
import { templateRef } from "@vueuse/core"; import { templateRef } from "@vueuse/core";
export default defineComponent({ export default defineComponent({
name: "Control", name: "Control",
props: { props: {
lf: <ElRef>Object, lf: null,
catTurboData: Boolean catTurboData: Boolean
}, },
emits: ["catData"], emits: ["catData"],
@ -107,12 +109,10 @@ export default defineComponent({
onMounted(() => { onMounted(() => {
props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => { props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
unref(titleLists)[3].disabled = unref( unref(titleLists)[3].disabled = unref(controlButton3).disabled =
controlButton3 !undoAble;
).disabled = !undoAble; unref(titleLists)[4].disabled = unref(controlButton4).disabled =
unref(titleLists)[4].disabled = unref( !redoAble;
controlButton4
).disabled = !redoAble;
}); });
}); });
@ -126,14 +126,13 @@ export default defineComponent({
}); });
</script> </script>
<style scoped> <style scoped>
@import "./assets/iconfont/iconfont.css"; @import "./assets/iconfont/iconfont.css";
.control-container { .control-container {
position: absolute; position: absolute;
right: 20px; right: 20px;
background: hsla(0, 0%, 100%, 0.8); background: hsla(0, 0%, 100%, 0.8);
box-shadow: 0 1px 4px rgb(0 0 0 / 30%); box-shadow: 0 1px 4px rgb(0 0 0);
} }
.iconfont { .iconfont {
font-size: 25px; font-size: 25px;
@ -157,4 +156,4 @@ export default defineComponent({
background-color: transparent; background-color: transparent;
outline: none; outline: none;
} }
</style> </style>

View File

@ -1,8 +1,13 @@
<template> <template>
<vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="graphData"></vue-json-pretty> <vue-json-pretty
:path="'res'"
:deep="3"
:showLength="true"
:data="graphData"
></vue-json-pretty>
</template> </template>
<script lang='ts'> <script lang="ts">
import VueJsonPretty from "vue-json-pretty"; import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css"; import "vue-json-pretty/lib/styles.css";
import { defineComponent } from "vue"; import { defineComponent } from "vue";
@ -15,4 +20,4 @@ export default defineComponent({
VueJsonPretty VueJsonPretty
} }
}); });
</script> </script>

View File

@ -8,14 +8,17 @@
@mousedown="nodeDragNode(item)" @mousedown="nodeDragNode(item)"
> >
<div class="node-item-icon" :class="item.class"> <div class="node-item-icon" :class="item.class">
<div v-if="item.type === 'user' || item.type === 'time'" class="shape"></div> <div
v-if="item.type === 'user' || item.type === 'time'"
class="shape"
></div>
</div> </div>
<span class="node-label">{{item.text}}</span> <span class="node-label">{{ item.text }}</span>
</div> </div>
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { defineComponent, ref, unref } from "vue"; import { defineComponent, ref, unref } from "vue";
export default defineComponent({ export default defineComponent({
name: "NodePanel", name: "NodePanel",
@ -52,7 +55,6 @@ export default defineComponent({
}); });
</script> </script>
<style scoped> <style scoped>
.node-panel { .node-panel {
position: absolute; position: absolute;

View File

@ -1,34 +1,33 @@
const TurboType = { const TurboType = {
SEQUENCE_FLOW: 1, SEQUENCE_FLOW: 1,
START_EVENT: 2, START_EVENT: 2,
END_EVENT: 3, END_EVENT: 3,
USER_TASK: 4, USER_TASK: 4,
SERVICE_TASK: 5, SERVICE_TASK: 5,
EXCLUSIVE_GATEWAY: 6, EXCLUSIVE_GATEWAY: 6
} };
function getTurboType(type) { function getTurboType(type) {
switch (type) { switch (type) {
case 'bpmn:sequenceFlow': case "bpmn:sequenceFlow":
return TurboType.SEQUENCE_FLOW return TurboType.SEQUENCE_FLOW;
case 'bpmn:startEvent': case "bpmn:startEvent":
return TurboType.START_EVENT return TurboType.START_EVENT;
case 'bpmn:endEvent': case "bpmn:endEvent":
return TurboType.END_EVENT return TurboType.END_EVENT;
case 'bpmn:userTask': case "bpmn:userTask":
return TurboType.USER_TASK return TurboType.USER_TASK;
case 'bpmn:serviceTask': case "bpmn:serviceTask":
return TurboType.SERVICE_TASK return TurboType.SERVICE_TASK;
case 'bpmn:exclusiveGateway': case "bpmn:exclusiveGateway":
return TurboType.EXCLUSIVE_GATEWAY return TurboType.EXCLUSIVE_GATEWAY;
default: default:
return type return type;
} }
} }
function convertNodeToTurboElement(node) { function convertNodeToTurboElement(node) {
const { id, type, x, y, text = '', properties } = node const { id, type, x, y, text = "", properties } = node;
return { return {
incoming: [], incoming: [],
outgoing: [], outgoing: [],
@ -36,14 +35,14 @@ function convertNodeToTurboElement(node) {
type: getTurboType(node.type), type: getTurboType(node.type),
properties: { properties: {
...properties, ...properties,
name: text && text.value || '', name: (text && text.value) || "",
x: x, x: x,
y: y, y: y,
text, text,
logicFlowType: type, logicFlowType: type
}, },
key: id, key: id
} };
} }
function convertEdgeToTurboElement(edge) { function convertEdgeToTurboElement(edge) {
@ -55,8 +54,9 @@ function convertEdgeToTurboElement(edge) {
startPoint, startPoint,
endPoint, endPoint,
pointsList, pointsList,
text = '', text = "",
properties } = edge properties
} = edge;
return { return {
incoming: [sourceNodeId], incoming: [sourceNodeId],
outgoing: [targetNodeId], outgoing: [targetNodeId],
@ -64,48 +64,41 @@ function convertEdgeToTurboElement(edge) {
dockers: [], dockers: [],
properties: { properties: {
...properties, ...properties,
name: text && text.value || '', name: (text && text.value) || "",
text, text,
startPoint, startPoint,
endPoint, endPoint,
pointsList, pointsList,
logicFlowType: type, logicFlowType: type
}, },
key: id, key: id
} };
} }
export function toTurboData(data) { export function toTurboData(data) {
const nodeMap = new Map() const nodeMap = new Map();
const turboData = { const turboData = {
flowElementList: [], flowElementList: []
} };
data.nodes.forEach((node) => { data.nodes.forEach(node => {
const flowElement = convertNodeToTurboElement(node) const flowElement = convertNodeToTurboElement(node);
turboData.flowElementList.push(flowElement) turboData.flowElementList.push(flowElement);
nodeMap.set(node.id, flowElement) nodeMap.set(node.id, flowElement);
}) });
data.edges.forEach((edge) => { data.edges.forEach(edge => {
const flowElement = convertEdgeToTurboElement(edge) const flowElement = convertEdgeToTurboElement(edge);
const sourceElement = nodeMap.get(edge.sourceNodeId) const sourceElement = nodeMap.get(edge.sourceNodeId);
sourceElement.outgoing.push(flowElement.key) sourceElement.outgoing.push(flowElement.key);
const targetElement = nodeMap.get(edge.targetNodeId) const targetElement = nodeMap.get(edge.targetNodeId);
targetElement.incoming.push(flowElement.key) targetElement.incoming.push(flowElement.key);
turboData.flowElementList.push(flowElement) turboData.flowElementList.push(flowElement);
}) });
return turboData return turboData;
} }
function convertFlowElementToEdge(element) { function convertFlowElementToEdge(element) {
const { incoming, outgoing, properties, key } = element const { incoming, outgoing, properties, key } = element;
const { const { text, startPoint, endPoint, pointsList, logicFlowType } = properties;
text,
startPoint,
endPoint,
pointsList,
logicFlowType
} = properties
const edge = { const edge = {
id: key, id: key,
type: logicFlowType, type: logicFlowType,
@ -116,19 +109,25 @@ function convertFlowElementToEdge(element) {
endPoint, endPoint,
pointsList, pointsList,
properties: {} properties: {}
} };
const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType'] const excludeProperties = [
"startPoint",
"endPoint",
"pointsList",
"text",
"logicFlowType"
];
Object.keys(element.properties).forEach(property => { Object.keys(element.properties).forEach(property => {
if (excludeProperties.indexOf(property) === -1) { if (excludeProperties.indexOf(property) === -1) {
edge.properties[property] = element.properties[property] edge.properties[property] = element.properties[property];
} }
}) });
return edge return edge;
} }
function convertFlowElementToNode(element) { function convertFlowElementToNode(element) {
const { properties, key } = element const { properties, key } = element;
const { x, y, text, logicFlowType } = properties const { x, y, text, logicFlowType } = properties;
const node = { const node = {
id: key, id: key,
type: logicFlowType, type: logicFlowType,
@ -136,31 +135,32 @@ function convertFlowElementToNode(element) {
y, y,
text, text,
properties: {} properties: {}
} };
const excludeProperties = ['x', 'y', 'text', 'logicFlowType'] const excludeProperties = ["x", "y", "text", "logicFlowType"];
Object.keys(element.properties).forEach(property => { Object.keys(element.properties).forEach(property => {
if (excludeProperties.indexOf(property) === -1) { if (excludeProperties.indexOf(property) === -1) {
node.properties[property] = element.properties[property] node.properties[property] = element.properties[property];
} }
}) });
return node return node;
} }
export function toLogicflowData(data) { export function toLogicflowData(data) {
const lfData = { const lfData = {
nodes: [], nodes: [],
edges: [], edges: []
} };
const list = data.flowElementList const list = data.flowElementList;
list && list.length > 0 && list.forEach(element => { list &&
if (element.type === TurboType.SEQUENCE_FLOW) { list.length > 0 &&
const edge = convertFlowElementToEdge(element) list.forEach(element => {
lfData.edges.push(edge) if (element.type === TurboType.SEQUENCE_FLOW) {
} else { const edge = convertFlowElementToEdge(element);
const node = convertFlowElementToNode(element) lfData.edges.push(edge);
lfData.nodes.push(node) } else {
} const node = convertFlowElementToNode(element);
}) lfData.nodes.push(node);
return lfData }
} });
return lfData;
}

File diff suppressed because one or more lines are too long

View File

@ -1,55 +1,55 @@
export const nodeList = [ export const nodeList = [
{ {
text: '开始', text: "开始",
type: 'start', type: "start",
class: 'node-start' class: "node-start"
}, },
{ {
text: '矩形', text: "矩形",
type: 'rect', type: "rect",
class: 'node-rect' class: "node-rect"
}, },
{ {
type: 'user', type: "user",
text: '用户', text: "用户",
class: 'node-user' class: "node-user"
}, },
{ {
type: 'push', type: "push",
text: '推送', text: "推送",
class: 'node-push' class: "node-push"
}, },
{ {
type: 'download', type: "download",
text: '位置', text: "位置",
class: 'node-download' class: "node-download"
}, },
{ {
type: 'end', type: "end",
text: '结束', text: "结束",
class: 'node-end' class: "node-end"
}, }
] ];
export const BpmnNode = [ export const BpmnNode = [
{ {
type: 'bpmn:startEvent', type: "bpmn:startEvent",
text: '开始', text: "开始",
class: 'bpmn-start' class: "bpmn-start"
}, },
{ {
type: 'bpmn:endEvent', type: "bpmn:endEvent",
text: '结束', text: "结束",
class: 'bpmn-end' class: "bpmn-end"
}, },
{ {
type: 'bpmn:exclusiveGateway', type: "bpmn:exclusiveGateway",
text: '网关', text: "网关",
class: 'bpmn-exclusiveGateway' class: "bpmn-exclusiveGateway"
}, },
{ {
type: 'bpmn:userTask', type: "bpmn:userTask",
text: '用户', text: "用户",
class: 'bpmn-user' class: "bpmn-user"
}, }
] ];

View File

@ -4,7 +4,7 @@ import reHamBurger from "./src/index.vue";
export const ReHamBurger = Object.assign(reHamBurger, { export const ReHamBurger = Object.assign(reHamBurger, {
install(app: App) { install(app: App) {
app.component(reHamBurger.name, reHamBurger); app.component(reHamBurger.name, reHamBurger);
}, }
}); });
export default ReHamBurger; export default ReHamBurger;

View File

@ -16,23 +16,23 @@
</template> </template>
<script> <script>
import { defineComponent } from "vue" import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
name: "HamBurger", name: "HamBurger",
props: { props: {
isActive: { isActive: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}, },
emits: ["toggleClick"], emits: ["toggleClick"],
setup(props, ctx) { setup(props, ctx) {
const toggleClick = () => { const toggleClick = () => {
ctx.emit("toggleClick") ctx.emit("toggleClick");
} };
return { toggleClick } return { toggleClick };
}, }
}); });
</script> </script>

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="info"> <div class="info">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="rule-form"> <el-form :model="model" :rules="rules" ref="ruleForm" class="rule-form">
<el-form-item prop="userName"> <el-form-item prop="userName">
<el-input <el-input
clearable clearable
v-model="ruleForm.userName" v-model="model.userName"
placeholder="请输入用户名" placeholder="请输入用户名"
prefix-icon="el-icon-user" prefix-icon="el-icon-user"
></el-input> ></el-input>
@ -14,7 +14,7 @@
clearable clearable
type="password" type="password"
show-password show-password
v-model="ruleForm.passWord" v-model="model.passWord"
placeholder="请输入密码" placeholder="请输入密码"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
></el-input> ></el-input>
@ -23,22 +23,31 @@
<el-input <el-input
maxlength="2" maxlength="2"
onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
v-model.number="ruleForm.verify" v-model.number="model.verify"
placeholder="请输入验证码" placeholder="请输入验证码"
></el-input> ></el-input>
<span class="verify" title="刷新" v-html="ruleForm.svg" @click.prevent="refreshVerify"></span> <span
class="verify"
title="刷新"
v-html="model.svg"
@click.prevent="refreshVerify"
></span>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.prevent="onBehavior">{{ tipsFalse }}</el-button> <el-button type="primary" @click.prevent="onBehavior">{{
tipsFalse
}}</el-button>
<el-button @click="resetForm">重置</el-button> <el-button @click="resetForm">重置</el-button>
<span class="tips" @click="changPage">{{ tips }}</span> <span class="tips" @click="changPage">{{ tips }}</span>
</el-form-item> </el-form-item>
<span title="测试用户 直接登录" class="secret" @click="noSecret">免密登录</span> <span title="测试用户 直接登录" class="secret" @click="noSecret"
>免密登录</span
>
</el-form> </el-form>
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { import {
ref, ref,
defineComponent, defineComponent,
@ -46,7 +55,8 @@ import {
onBeforeMount, onBeforeMount,
getCurrentInstance, getCurrentInstance,
watch, watch,
nextTick nextTick,
toRef
} from "vue"; } from "vue";
import { storageSession } from "/@/utils/storage"; import { storageSession } from "/@/utils/storage";
@ -59,7 +69,7 @@ export interface ContextProps {
dynamicText?: string; dynamicText?: string;
} }
import { useRouter, useRoute, Router } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { initRouter } from "/@/router"; import { initRouter } from "/@/router";
@ -75,6 +85,7 @@ export default defineComponent({
setup(props, ctx) { setup(props, ctx) {
let vm: any; let vm: any;
const model = toRef(props, "ruleForm");
let tips = ref("注册"); let tips = ref("注册");
let tipsFalse = ref("登录"); let tipsFalse = ref("登录");
@ -83,7 +94,7 @@ export default defineComponent({
watch( watch(
route, route,
async ({ path }, prevRoute: unknown): Promise<void> => { async ({ path }): Promise<void> => {
await nextTick(); await nextTick();
path.includes("register") path.includes("register")
? (tips.value = "登录") && (tipsFalse.value = "注册") ? (tips.value = "登录") && (tipsFalse.value = "注册")
@ -106,7 +117,7 @@ export default defineComponent({
// //
const onBehavior = (evt: Object): void => { const onBehavior = (evt: Object): void => {
vm.refs.ruleForm.validate((valid: Boolean) => { vm.refs.ruleForm.validate((valid: boolean) => {
if (valid) { if (valid) {
ctx.emit("onBehavior", evt); ctx.emit("onBehavior", evt);
} else { } else {
@ -135,7 +146,7 @@ export default defineComponent({
username: "admin", username: "admin",
accessToken: "eyJhbGciOiJIUzUxMiJ9.test" accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
}); });
initRouter("admin").then((router: Router) => {}); initRouter("admin").then(() => {});
router.push("/"); router.push("/");
}; };
@ -144,6 +155,7 @@ export default defineComponent({
}); });
return { return {
model,
rules, rules,
tips, tips,
tipsFalse, tipsFalse,

View File

@ -1,20 +1,20 @@
import { App } from "vue" import { App } from "vue";
import amap from "./src/Amap.vue" import amap from "./src/Amap.vue";
import baiduMap from "./src/BaiduMap.vue" import baiduMap from "./src/BaiduMap.vue";
export const Amap = Object.assign(amap, { export const Amap = Object.assign(amap, {
install(app: App) { install(app: App) {
app.component(amap.name, amap) app.component(amap.name, amap);
} }
}) });
export const BaiduMap = Object.assign(baiduMap, { export const BaiduMap = Object.assign(baiduMap, {
install(app: App) { install(app: App) {
app.component(baiduMap.name, baiduMap) app.component(baiduMap.name, baiduMap);
} }
}) });
export default { export default {
Amap, Amap,
BaiduMap BaiduMap
} };

View File

@ -1,20 +1,14 @@
<template> <template>
<div> <div></div>
</div>
</template> </template>
<script lang='ts'> <script lang="ts">
export default { export default {
name: "BaiduMap", name: "BaiduMap",
setup(){ setup() {
return{ return {};
}
} };
},
}
</script> </script>
<style scoped> <style scoped></style>
</style>

View File

@ -4,7 +4,7 @@ import reSeamlessScroll from "./src/index.vue";
export const ReSeamlessScroll = Object.assign(reSeamlessScroll, { export const ReSeamlessScroll = Object.assign(reSeamlessScroll, {
install(app: App) { install(app: App) {
app.component(reSeamlessScroll.name, reSeamlessScroll); app.component(reSeamlessScroll.name, reSeamlessScroll);
}, }
}); });
export default ReSeamlessScroll; export default ReSeamlessScroll;

View File

@ -1,13 +1,23 @@
<template> <template>
<div :ref="'wrap' + classOption['key']"> <div :ref="'wrap' + classOption['key']">
<div :style="leftSwitch" v-if="navigation" :class="leftSwitchClass" @click="leftSwitchClick"> <div
:style="leftSwitch"
v-if="navigation"
:class="leftSwitchClass"
@click="leftSwitchClick"
>
<slot name="left-switch"></slot> <slot name="left-switch"></slot>
</div> </div>
<div :style="rightSwitch" v-if="navigation" :class="rightSwitchClass" @click="rightSwitchClick"> <div
:style="rightSwitch"
v-if="navigation"
:class="rightSwitchClass"
@click="rightSwitchClick"
>
<slot name="right-switch"></slot> <slot name="right-switch"></slot>
</div> </div>
<div <div
:ref="'realBox'+ classOption['key']" :ref="'realBox' + classOption['key']"
:style="pos" :style="pos"
@mouseenter="enter" @mouseenter="enter"
@mouseleave="leave" @mouseleave="leave"
@ -16,7 +26,7 @@
@touchend="touchEnd" @touchend="touchEnd"
@mousewheel="wheel" @mousewheel="wheel"
> >
<div :ref="'slotList'+ classOption['key']" :style="float"> <div :ref="'slotList' + classOption['key']" :style="float">
<slot></slot> <slot></slot>
</div> </div>
<div v-html="copyHtml" :style="float"></div> <div v-html="copyHtml" :style="float"></div>
@ -24,15 +34,8 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { import { defineComponent, computed, ref, unref, nextTick } from "vue";
defineComponent,
computed,
ref,
unref,
watchEffect,
nextTick
} from "vue";
import { import {
tryOnMounted, tryOnMounted,
tryOnUnmounted, tryOnUnmounted,
@ -85,7 +88,8 @@ export default defineComponent({
let isHover = false; let isHover = false;
let ease = "ease-in"; let ease = "ease-in";
let { data, classOption } = props; // eslint-disable-next-line vue/no-setup-props-destructure
let { classOption } = props;
if (classOption["key"] === undefined) { if (classOption["key"] === undefined) {
classOption["key"] = 0; classOption["key"] = 0;
@ -165,8 +169,9 @@ export default defineComponent({
let rightSwitch = computed(() => { let rightSwitch = computed(() => {
return { return {
position: "absolute", position: "absolute",
margin: `${unref(height) / 2}px 0 0 ${unref(width) + margin: `${unref(height) / 2}px 0 0 ${
unref(options).switchOffset}px`, unref(width) + unref(options).switchOffset
}px`,
transform: "translateY(-50%)" transform: "translateY(-50%)"
}; };
}); });
@ -372,7 +377,7 @@ export default defineComponent({
if (isHover) return; if (isHover) return;
//move touchMove //move touchMove
// scrollCancle(); // scrollCancle();
reqFrame = requestAnimationFrame(function() { reqFrame = requestAnimationFrame(function () {
// //
const h = unref(realBoxHeight) / 2; const h = unref(realBoxHeight) / 2;
// //
@ -408,7 +413,7 @@ export default defineComponent({
xPos.value += step.value; xPos.value += step.value;
} }
if (singleWaitTime) clearTimeout(singleWaitTime); if (singleWaitTime) clearTimeout(singleWaitTime);
if (!!unref(realSingleStopHeight)) { if (unref(realSingleStopHeight)) {
// //
if ( if (
Math.abs(unref(yPos)) % unref(realSingleStopHeight) < Math.abs(unref(yPos)) % unref(realSingleStopHeight) <
@ -421,7 +426,7 @@ export default defineComponent({
} else { } else {
scrollMove(); scrollMove();
} }
} else if (!!unref(realSingleStopWidth)) { } else if (unref(realSingleStopWidth)) {
if ( if (
Math.abs(unref(xPos)) % unref(realSingleStopWidth) < Math.abs(unref(xPos)) % unref(realSingleStopWidth) <
unref(step) unref(step)
@ -577,4 +582,4 @@ export default defineComponent({
}; };
} }
}); });
</script> </script>

View File

@ -3,16 +3,18 @@
*/ */
export const animationFrame = () => { export const animationFrame = () => {
window.cancelAnimationFrame = (function () { window.cancelAnimationFrame = (function () {
return window.cancelAnimationFrame || return (
window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame || window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame || window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame || window.oCancelAnimationFrame ||
window.msCancelAnimationFrame || window.msCancelAnimationFrame ||
function (id) { function (id) {
return window.clearTimeout(id) return window.clearTimeout(id);
} }
})() );
window.requestAnimationFrame = function () { })();
window.requestAnimationFrame = (function () {
return ( return (
window.requestAnimationFrame || window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
@ -20,25 +22,26 @@ export const animationFrame = () => {
window.oRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) { function (callback) {
return window.setTimeout(callback, 1000 / 60) return window.setTimeout(callback, 1000 / 60);
} }
) );
}() })();
} };
/** /**
* @desc * @desc
* @param {arr1,arr2}
* @return {Boolean} * @return {Boolean}
* @param arr1
* @param arr2
*/ */
export const arrayEqual = (arr1: Array<any>, arr2: Array<any>) => { export const arrayEqual = (arr1: Array<any>, arr2: Array<any>) => {
if (arr1 === arr2) return true if (arr1 === arr2) return true;
if (arr1.length !== arr2.length) return false if (arr1.length !== arr2.length) return false;
for (let i = 0; i < arr1.length; ++i) { for (let i = 0; i < arr1.length; ++i) {
if (arr1[i] !== arr2[i]) return false if (arr1[i] !== arr2[i]) return false;
} }
return true return true;
} };
/** /**
* @desc * @desc
@ -47,62 +50,68 @@ export function copyObj() {
if (!Array.isArray) { if (!Array.isArray) {
// @ts-expect-error // @ts-expect-error
Array.isArray = function (arg) { Array.isArray = function (arg) {
return Object.prototype.toString.call(arg) === '[object Array]' return Object.prototype.toString.call(arg) === "[object Array]";
} };
} }
let name, options, src, copy, copyIsArray, clone, let name,
options,
src,
copy,
copyIsArray,
clone,
i = 1, i = 1,
// eslint-disable-next-line prefer-rest-params
target = arguments[0] || {}, // 使用||运算符排除隐式强制类型转换为false的数据类型 target = arguments[0] || {}, // 使用||运算符排除隐式强制类型转换为false的数据类型
deep = false, deep = false,
len = arguments.length // eslint-disable-next-line prefer-const
if (typeof target === 'boolean') { len = arguments.length;
deep = target if (typeof target === "boolean") {
target = arguments[1] || {} deep = target;
i++ // eslint-disable-next-line prefer-rest-params
target = arguments[1] || {};
i++;
} }
if (typeof target !== 'object' && typeof target !== 'function') { if (typeof target !== "object" && typeof target !== "function") {
target = {} target = {};
} }
// 如果arguments.length === 1 或typeof arguments[0] === 'boolean',且存在arguments[1]则直接返回target对象 // 如果arguments.length === 1 或typeof arguments[0] === 'boolean',且存在arguments[1]则直接返回target对象
if (i === len) { if (i === len) {
return target return target;
} }
for (; i < len; i++) { for (; i < len; i++) {
//所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环接着循环下一个源对象 //所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环接着循环下一个源对象
// eslint-disable-next-line prefer-rest-params
if ((options = arguments[i]) != null) { if ((options = arguments[i]) != null) {
// 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过不执行for in循环// src用于判断target对象是否存在name属性 // 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过不执行for in循环// src用于判断target对象是否存在name属性
for (name in options) { for (name in options) {
// src用于判断target对象是否存在name属性 // src用于判断target对象是否存在name属性
src = target[name] src = target[name];
// 需要复制的属性当前源对象的name属性 // 需要复制的属性当前源对象的name属性
copy = options[name] copy = options[name];
// 判断copy是否是数组 // 判断copy是否是数组
copyIsArray = Array.isArray(copy) copyIsArray = Array.isArray(copy);
// 如果是深复制且copy是一个对象或数组则需要递归直到copy成为一个基本数据类型为止 // 如果是深复制且copy是一个对象或数组则需要递归直到copy成为一个基本数据类型为止
if (deep && copy && (typeof copy === 'object' || copyIsArray)) { if (deep && copy && (typeof copy === "object" || copyIsArray)) {
if (copyIsArray) { if (copyIsArray) {
copyIsArray = false copyIsArray = false;
// 如果目标对象存在name属性且是一个数组 // 如果目标对象存在name属性且是一个数组
// 则使用目标对象的name属性否则重新创建一个数组用于复制 // 则使用目标对象的name属性否则重新创建一个数组用于复制
clone = src && Array.isArray(src) ? src : [] clone = src && Array.isArray(src) ? src : [];
} else { } else {
// 如果目标对象存在name属性且是一个对象则使用目标对象的name属性否则重新创建一个对象用于复制 // 如果目标对象存在name属性且是一个对象则使用目标对象的name属性否则重新创建一个对象用于复制
clone = src && typeof src === 'object' ? src : {} clone = src && typeof src === "object" ? src : {};
} }
// 深复制所以递归调用copyObject函数 // 深复制所以递归调用copyObject函数
// 返回值为target对象即clone对象 // 返回值为target对象即clone对象
// copy是一个源对象 // copy是一个源对象
// @ts-expect-error // @ts-expect-error
target[name] = copyObj(deep, clone, copy) target[name] = copyObj(deep, clone, copy);
} else if (copy !== undefined) { } else if (copy !== undefined) {
// 浅复制直接复制到target对象上 // 浅复制直接复制到target对象上
target[name] = copy target[name] = copy;
} }
} }
} }
} }
return target return target;
} }

View File

@ -4,7 +4,7 @@ import reSelector from "./src";
export const ReSelector = Object.assign(reSelector, { export const ReSelector = Object.assign(reSelector, {
install(app: App) { install(app: App) {
app.component(reSelector.name, reSelector); app.component(reSelector.name, reSelector);
}, }
}); });
export default ReSelector; export default ReSelector;

View File

@ -4,17 +4,17 @@ import {
nextTick, nextTick,
onBeforeMount, onBeforeMount,
getCurrentInstance, getCurrentInstance,
unref, unref
} from "vue"; } from "vue";
import { addClass, removeClass, toggleClass } from "/@/utils/operate"; import { addClass, removeClass, toggleClass } from "/@/utils/operate";
import "./index.css"; import "./index.css";
let stayClass = "stay"; //鼠标点击 const stayClass = "stay"; //鼠标点击
let activeClass = "hs-on"; //鼠标移动上去 const activeClass = "hs-on"; //鼠标移动上去
let voidClass = "hs-off"; //鼠标移开 const voidClass = "hs-off"; //鼠标移开
let inRange = "hs-range"; //当前选中的两个元素之间的背景 const inRange = "hs-range"; //当前选中的两个元素之间的背景
let bothLeftSides = "both-left-sides"; const bothLeftSides = "both-left-sides";
let bothRightSides = "both-right-sides"; const bothRightSides = "both-right-sides";
let selectedDirection = "right"; //默认从左往右,索引变大 let selectedDirection = "right"; //默认从左往右,索引变大
let overList = []; let overList = [];
@ -26,37 +26,42 @@ export default defineComponent({
props: { props: {
HsKey: { HsKey: {
type: Number || String, type: Number || String,
default: 0, default: 0
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
value: { value: {
type: Number, type: Number,
default: 0, default: 0
}, },
max: { max: {
type: Array, type: Array,
default: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], default() {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
}
}, },
// 回显数据的索引长度必须是2 // 回显数据的索引长度必须是2
echo: { echo: {
type: Array, type: Array,
default: [], default() {
}, return [];
}
}
}, },
emits: ["selectedVal"], emits: ["selectedVal"],
setup(props, { emit }) { setup(props, { emit }) {
let vm: any; let vm: any;
let currentValue = props.value; // eslint-disable-next-line vue/no-setup-props-destructure
const currentValue = props.value;
let rateDisabled = computed(() => { const rateDisabled = computed(() => {
return props.disabled; return props.disabled;
}); });
let classes = computed(() => { const classes = computed(() => {
let result = []; const result = [];
let i = 0; let i = 0;
let threshold = currentValue; let threshold = currentValue;
if (currentValue !== Math.floor(currentValue)) { if (currentValue !== Math.floor(currentValue)) {
@ -72,7 +77,7 @@ export default defineComponent({
}); });
// 鼠标移入 // 鼠标移入
const setCurrentValue = (index) => { const setCurrentValue = index => {
if (props.disabled) return; if (props.disabled) return;
// 当选中一个元素后,开始添加背景色 // 当选中一个元素后,开始添加背景色
if (selectedList.length === 1) { if (selectedList.length === 1) {
@ -118,7 +123,7 @@ export default defineComponent({
}; };
// 鼠标离开 // 鼠标离开
const resetCurrentValue = (index) => { const resetCurrentValue = index => {
if (props.disabled) return; if (props.disabled) return;
// 移除先检查是否选中 选中则返回false 不移除 // 移除先检查是否选中 选中则返回false 不移除
const currentHsDom = document.querySelector("." + voidClass + index); const currentHsDom = document.querySelector("." + voidClass + index);
@ -130,7 +135,7 @@ export default defineComponent({
// 当选中一个元素后,开始移除背景色 // 当选中一个元素后,开始移除背景色
if (selectedList.length === 1) { if (selectedList.length === 1) {
let firstIndex = overList[0].index; const firstIndex = overList[0].index;
if (index >= firstIndex) { if (index >= firstIndex) {
for (let i = 0; i <= index; i++) { for (let i = 0; i <= index; i++) {
removeClass( removeClass(
@ -153,7 +158,7 @@ export default defineComponent({
// 鼠标点击 // 鼠标点击
const selectValue = (index, item) => { const selectValue = (index, item) => {
if (props.disabled) return; if (props.disabled) return;
let len = selectedList.length; const len = selectedList.length;
if (len < 2) { if (len < 2) {
selectedList.push({ item, index }); selectedList.push({ item, index });
@ -188,19 +193,19 @@ export default defineComponent({
emit("selectedVal", { emit("selectedVal", {
left: selectedList[0].item, left: selectedList[0].item,
right: selectedList[1].item, right: selectedList[1].item,
whole: selectedList, whole: selectedList
}); });
} else { } else {
emit("selectedVal", { emit("selectedVal", {
left: selectedList[1].item, left: selectedList[1].item,
right: selectedList[0].item, right: selectedList[0].item,
whole: selectedList, whole: selectedList
}); });
} }
} }
} else { } else {
nextTick(() => { nextTick(() => {
selectedList.forEach((v) => { selectedList.forEach(v => {
removeClass( removeClass(
document.querySelector("." + voidClass + v.index), document.querySelector("." + voidClass + v.index),
activeClass, activeClass,
@ -217,7 +222,7 @@ export default defineComponent({
selectedList = []; selectedList = [];
overList = []; overList = [];
for (let i = 0; i <= props.max.length; i++) { for (let i = 0; i <= props.max.length; i++) {
let currentDom = document.querySelector(".hs-select__item" + i); const currentDom = document.querySelector(".hs-select__item" + i);
if (currentDom) { if (currentDom) {
removeClass(currentDom, inRange); removeClass(currentDom, inRange);
} }
@ -235,7 +240,7 @@ export default defineComponent({
}; };
// 回显数据 // 回显数据
const echoView = (item) => { const echoView = item => {
if (item.length === 0) return; if (item.length === 0) return;
if (item.length > 2 || item.length === 1) { if (item.length > 2 || item.length === 1) {
@ -291,14 +296,12 @@ export default defineComponent({
onClick={() => selectValue(key, item)} onClick={() => selectValue(key, item)}
style={{ style={{
cursor: unref(rateDisabled) ? "auto" : "pointer", cursor: unref(rateDisabled) ? "auto" : "pointer",
textAlign: "center", textAlign: "center"
}} }}
key={key} key={key}>
>
<div <div
ref={`hsdiv${props.HsKey}${key}`} ref={`hsdiv${props.HsKey}${key}`}
class={`hs-item ${[unref(classes)[key] + key]}`} class={`hs-item ${[unref(classes)[key] + key]}`}>
>
<span>{item}</span> <span>{item}</span>
</div> </div>
</td> </td>
@ -309,5 +312,5 @@ export default defineComponent({
</table> </table>
</> </>
); );
}, }
}); });

View File

@ -14,25 +14,25 @@ export default defineComponent({
props: { props: {
splitSet: { splitSet: {
type: Object as PropType<ContextProps>, type: Object as PropType<ContextProps>,
require: true, require: true
}, }
}, },
emits: ["resize"], emits: ["resize"],
setup(props, ctx) { setup(props, ctx) {
let active = ref(false); const active = ref(false);
let hasMoved = ref(false); const hasMoved = ref(false);
let percent = ref(props.splitSet?.defaultPercent); const percent = ref(props.splitSet?.defaultPercent);
let type = props.splitSet?.split === "vertical" ? "width" : "height"; const type = props.splitSet?.split === "vertical" ? "width" : "height";
let resizeType = props.splitSet?.split === "vertical" ? "left" : "top"; const resizeType = props.splitSet?.split === "vertical" ? "left" : "top";
let leftClass = ref([ const leftClass = ref([
"splitter-pane splitter-paneL", "splitter-pane splitter-paneL",
props.splitSet?.split, props.splitSet?.split
]); ]);
let rightClass = ref([ const rightClass = ref([
"splitter-pane splitter-paneR", "splitter-pane splitter-paneR",
props.splitSet?.split, props.splitSet?.split
]); ]);
const userSelect = computed(() => { const userSelect = computed(() => {
@ -111,29 +111,25 @@ export default defineComponent({
class="vue-splitter-container clearfix" class="vue-splitter-container clearfix"
style={(unref(cursor), unref(userSelect))} style={(unref(cursor), unref(userSelect))}
onMouseup={() => onMouseUp()} onMouseup={() => onMouseUp()}
onMousemove={() => onMouseMove(event)} onMousemove={() => onMouseMove(event)}>
>
<div <div
class={unref(leftClass)} class={unref(leftClass)}
style={{ [unref(type)]: unref(percent) + "%" }} style={{ [unref(type)]: unref(percent) + "%" }}>
>
{ctx.slots.paneL()} {ctx.slots.paneL()}
</div> </div>
<resizer <resizer
style={`${unref([resizeType])}:${unref(percent)}%`} style={`${unref([resizeType])}:${unref(percent)}%`}
split={props.splitSet?.split} split={props.splitSet?.split}
onMousedown={() => onMouseDown()} onMousedown={() => onMouseDown()}
onClick={() => onClick()} onClick={() => onClick()}></resizer>
></resizer>
<div <div
class={unref(rightClass)} class={unref(rightClass)}
style={{ [unref(type)]: 100 - unref(percent) + "%" }} style={{ [unref(type)]: 100 - unref(percent) + "%" }}>
>
{ctx.slots.paneR()} {ctx.slots.paneR()}
</div> </div>
<div v-show={unref(active)} class="vue-splitter-container-mask"></div> <div v-show={unref(active)} class="vue-splitter-container-mask"></div>
</div> </div>
</> </>
); );
}, }
}); });

View File

@ -6,18 +6,18 @@ export default defineComponent({
props: { props: {
split: { split: {
type: String, type: String,
required: true, required: true
}, },
className: { className: {
type: String, type: String,
default: "", default: ""
}, }
}, },
setup(props) { setup(props) {
let classes = computed(() => { const classes = computed(() => {
return ["splitter-pane-resizer", props.split, props.className].join(" "); return ["splitter-pane-resizer", props.split, props.className].join(" ");
}); });
return () => <div class={unref(classes)}></div>; return () => <div class={unref(classes)}></div>;
}, }
}); });

View File

@ -1,25 +1,25 @@
let config: object = {} let config: object = {};
const setConfig = (cfg?: any) => { const setConfig = (cfg?: any) => {
config = Object.assign(config, cfg) config = Object.assign(config, cfg);
} };
const getConfig = (key?: string) => { const getConfig = (key?: string) => {
if (typeof key === "string") { if (typeof key === "string") {
const arr = key.split(".") const arr = key.split(".");
if (arr && arr.length) { if (arr && arr.length) {
let data = config let data = config;
arr.forEach(v => { arr.forEach(v => {
if (data && typeof data[v] !== "undefined") { if (data && typeof data[v] !== "undefined") {
data = data[v] data = data[v];
} else { } else {
data = null data = null;
} }
}) });
return data return data;
} }
} }
return config return config;
} };
export { getConfig, setConfig } export { getConfig, setConfig };

View File

@ -13,5 +13,5 @@ export const auth: Directive = {
} else { } else {
throw new Error("need roles! Like v-auth=\"['admin','test']\""); throw new Error("need roles! Like v-auth=\"['admin','test']\"");
} }
}, }
}; };

View File

@ -20,7 +20,11 @@
> >
<img :src="langs ? ch : en" /> <img :src="langs ? ch : en" />
</div> </div>
<i class="el-icon-setting hsset" :title="$t('message.hssystemSet')" @click="onPanel"></i> <i
class="el-icon-setting hsset"
:title="$t('message.hssystemSet')"
@click="onPanel"
></i>
<!-- 退出登陆 --> <!-- 退出登陆 -->
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
@ -29,10 +33,9 @@
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item <el-dropdown-item icon="el-icon-switch-button" @click="logout">{{
icon="el-icon-switch-button" $t("message.hsLoginOut")
@click="logout" }}</el-dropdown-item>
>{{ $t("message.hsLoginOut") }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -47,7 +50,6 @@ import Hamburger from "/@/components/ReHamBurger";
import screenfull from "../components/screenfull/index.vue"; import screenfull from "../components/screenfull/index.vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
import { mapGetters } from "pinia";
import { storageSession } from "/@/utils/storage"; import { storageSession } from "/@/utils/storage";
import ch from "/@/assets/ch.png"; import ch from "/@/assets/ch.png";
import en from "/@/assets/en.png"; import en from "/@/assets/en.png";
@ -92,7 +94,7 @@ export default defineComponent({
watch( watch(
() => langs.value, () => langs.value,
val => { () => {
//@ts-ignore //@ts-ignore
document.title = t(unref(route.meta.title)); // title document.title = t(unref(route.meta.title)); // title
} }

View File

@ -1,5 +1,5 @@
export { default as Navbar } from './Navbar.vue' export { default as Navbar } from "./Navbar.vue";
export { default as Sidebar } from './sidebar/index.vue' export { default as Sidebar } from "./sidebar/index.vue";
export { default as AppMain } from './AppMain.vue' export { default as AppMain } from "./AppMain.vue";
export { default as setting } from './setting/index.vue' export { default as setting } from "./setting/index.vue";
export { default as tag } from './tag/index.vue' export { default as tag } from "./tag/index.vue";

View File

@ -7,16 +7,15 @@
<h3>项目配置</h3> <h3>项目配置</h3>
<i class="el-icon-close" @click="show = !show"></i> <i class="el-icon-close" @click="show = !show"></i>
</div> </div>
<div style="border-bottom:1px solid #DCDFE6"></div> <div style="border-bottom: 1px solid #dcdfe6"></div>
<slot /> <slot />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { addClass, removeClass } from "../../../utils/operate"; import { ref } from "vue";
import { ref, watch, getCurrentInstance, onMounted, onBeforeMount } from "vue";
import { useEventListener, onClickOutside } from "@vueuse/core"; import { useEventListener, onClickOutside } from "@vueuse/core";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
@ -27,10 +26,11 @@ export default {
const target = ref(null); const target = ref(null);
onClickOutside(target, event => { onClickOutside(target, () => {
show.value = false; show.value = false;
}); });
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const addEventClick = (): void => { const addEventClick = (): void => {
useEventListener("click", closeSidebar); useEventListener("click", closeSidebar);
}; };

View File

@ -1,7 +1,11 @@
<template> <template>
<div class="screen-full" @click="toggle"> <div class="screen-full" @click="toggle">
<i <i
:title="isFullscreen ? $t('message.hsexitfullscreen') : $t('message.hsfullscreen')" :title="
isFullscreen
? $t('message.hsexitfullscreen')
: $t('message.hsfullscreen')
"
:class=" :class="
isFullscreen isFullscreen
? 'iconfont team-iconexit-fullscreen' ? 'iconfont team-iconexit-fullscreen'
@ -12,20 +16,18 @@
</template> </template>
<script> <script>
import { useFullscreen } from '@vueuse/core' import { useFullscreen } from "@vueuse/core";
import { import { defineComponent } from "vue";
defineComponent,
} from "vue"
export default defineComponent({ export default defineComponent({
name: "screenfull", name: "screenfull",
setup() { setup() {
const { isFullscreen, toggle } = useFullscreen() const { isFullscreen, toggle } = useFullscreen();
return { return {
isFullscreen, isFullscreen,
toggle, toggle
} };
}, }
}); });
</script> </script>
@ -41,4 +43,4 @@ export default defineComponent({
background: #f0f0f0; background: #f0f0f0;
} }
} }
</style> </style>

View File

@ -2,15 +2,33 @@
<panel> <panel>
<el-divider>主题风格</el-divider> <el-divider>主题风格</el-divider>
<ul class="theme-stley"> <ul class="theme-stley">
<el-tooltip class="item" effect="dark" content="暗色主题" placement="bottom"> <el-tooltip
<li :class="dataTheme === 'dark' ? 'is-select' : ''" ref="firstTheme" @click="onDark"> class="item"
effect="dark"
content="暗色主题"
placement="bottom"
>
<li
:class="dataTheme === 'dark' ? 'is-select' : ''"
ref="firstTheme"
@click="onDark"
>
<div></div> <div></div>
<div></div> <div></div>
</li> </li>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="亮色主题" placement="bottom"> <el-tooltip
<li :class="dataTheme === 'light' ? 'is-select' : ''" ref="secondTheme" @click="onLight"> class="item"
effect="dark"
content="亮色主题"
placement="bottom"
>
<li
:class="dataTheme === 'light' ? 'is-select' : ''"
ref="secondTheme"
@click="onLight"
>
<div></div> <div></div>
<div></div> <div></div>
</li> </li>
@ -21,15 +39,30 @@
<ul class="setting"> <ul class="setting">
<li> <li>
<span>灰色模式</span> <span>灰色模式</span>
<vxe-switch v-model="greyVal" open-label="开" close-label="关" @change="greyChange"></vxe-switch> <vxe-switch
v-model="greyVal"
open-label="开"
close-label="关"
@change="greyChange"
></vxe-switch>
</li> </li>
<li> <li>
<span>色弱模式</span> <span>色弱模式</span>
<vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch> <vxe-switch
v-model="weekVal"
open-label="开"
close-label="关"
@change="weekChange"
></vxe-switch>
</li> </li>
<li> <li>
<span>隐藏标签页</span> <span>隐藏标签页</span>
<vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch> <vxe-switch
v-model="tagsVal"
open-label="开"
close-label="关"
@change="tagsChange"
></vxe-switch>
</li> </li>
<li> <li>
<span>侧边栏Logo</span> <span>侧边栏Logo</span>
@ -55,7 +88,7 @@
<el-divider /> <el-divider />
<vxe-button <vxe-button
status="danger" status="danger"
style="width: 90%;margin: 24px 15px;" style="width: 90%; margin: 24px 15px"
content="清空缓存并返回登录页" content="清空缓存并返回登录页"
icon="fa fa-sign-out" icon="fa fa-sign-out"
@click="onReset" @click="onReset"
@ -63,11 +96,10 @@
</panel> </panel>
</template> </template>
<script lang='ts'> <script lang="ts">
import panel from "../panel/index.vue"; import panel from "../panel/index.vue";
import { onMounted, reactive, toRefs, ref, unref } from "vue"; import { reactive, toRefs, ref, unref } from "vue";
import { storageLocal, storageSession } from "/@/utils/storage"; import { storageLocal, storageSession } from "/@/utils/storage";
import { toggleClass } from "/@/utils/operate";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { templateRef } from "@vueuse/core"; import { templateRef } from "@vueuse/core";
@ -158,7 +190,7 @@ export default {
const secondTheme = templateRef<HTMLElement | null>("secondTheme", null); const secondTheme = templateRef<HTMLElement | null>("secondTheme", null);
const dataTheme = ref(storageLocal.getItem("data-theme") || "dark"); const dataTheme = ref(storageLocal.getItem("data-theme") || "dark");
if (dataTheme) { if (dataTheme.value) {
storageLocal.setItem("data-theme", unref(dataTheme)); storageLocal.setItem("data-theme", unref(dataTheme));
window.document.body.setAttribute("data-theme", unref(dataTheme)); window.document.body.setAttribute("data-theme", unref(dataTheme));
} }

View File

@ -5,48 +5,47 @@
</template> </template>
<script> <script>
import { computed, defineComponent, unref } from "vue" import { computed, defineComponent, unref } from "vue";
import { isUrl } from "/@/utils/is.ts" import { isUrl } from "/@/utils/is.ts";
export default defineComponent({ export default defineComponent({
name: "Link", name: "Link",
props: { props: {
to: { to: {
type: String, type: String,
required: true, required: true
}, }
}, },
setup(props) { setup(props) {
const isExternal = computed(() => { const isExternal = computed(() => {
return isUrl(props.to) return isUrl(props.to);
}) });
const type = computed(() => { const type = computed(() => {
if (unref(isExternal)) { if (unref(isExternal)) {
return 'a' return "a";
} }
return 'router-link' return "router-link";
}) });
function linkProps(to) { function linkProps(to) {
if (unref(isExternal)) { if (unref(isExternal)) {
return { return {
href: to, href: to,
target: '_blank', target: "_blank",
rel: 'noopener' rel: "noopener"
} };
} }
return { return {
to: to to: to
} };
} }
return { return {
isExternal, isExternal,
type, type,
linkProps, linkProps
} };
}, }
}); });
</script> </script>

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}"> <div class="sidebar-logo-container" :class="{ collapse: collapse }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link <router-link
v-if="collapse" v-if="collapse"
@ -11,7 +11,13 @@
<i class="fa fa-optin-monster"></i> <i class="fa fa-optin-monster"></i>
<h1 class="sidebar-title">{{ settings.title }}</h1> <h1 class="sidebar-title">{{ settings.title }}</h1>
</router-link> </router-link>
<router-link v-else key="expand" :title="settings.title" class="sidebar-logo-link" to="/"> <router-link
v-else
key="expand"
:title="settings.title"
class="sidebar-logo-link"
to="/"
>
<i class="fa fa-optin-monster"></i> <i class="fa fa-optin-monster"></i>
<h1 class="sidebar-title">{{ settings.title }}</h1> <h1 class="sidebar-title">{{ settings.title }}</h1>
</router-link> </router-link>

View File

@ -20,7 +20,12 @@
</app-link> </app-link>
</template> </template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> <el-submenu
v-else
ref="subMenu"
:index="resolvePath(item.path)"
popper-append-to-body
>
<template #title> <template #title>
<i :class="item.meta.icon"></i> <i :class="item.meta.icon"></i>
<span>{{ $t(item.meta.title) }}</span> <span>{{ $t(item.meta.title) }}</span>

View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="{'has-logo': showLogo}"> <div :class="{ 'has-logo': showLogo }">
<Logo v-if="showLogo === '1'" :collapse="isCollapse" /> <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
@ -22,18 +22,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { computed, defineComponent, ref, onBeforeMount } from "vue";
computed,
defineComponent,
ref,
unref,
nextTick,
onBeforeMount
} from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
import SidebarItem from "./SidebarItem.vue"; import SidebarItem from "./SidebarItem.vue";
import { algorithm } from "../../../utils/algorithm"; import { algorithm } from "/@/utils/algorithm";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import Logo from "./Logo.vue"; import Logo from "./Logo.vue";
import { storageLocal } from "/@/utils/storage"; import { storageLocal } from "/@/utils/storage";
@ -69,7 +62,7 @@ export default defineComponent({
} }
// //
function findCurrentRoute(routes) { function findCurrentRoute(routes) {
return routes.map((item, key) => { return routes.map(item => {
if (item.path === indexPath) { if (item.path === indexPath) {
// //
emitter.emit("changLayoutRoute", { emitter.emit("changLayoutRoute", {
@ -80,7 +73,6 @@ export default defineComponent({
if (item.children) findCurrentRoute(item.children); if (item.children) findCurrentRoute(item.children);
} }
}); });
return;
} }
findCurrentRoute(algorithm.increaseIndexes(router)); findCurrentRoute(algorithm.increaseIndexes(router));
}; };

View File

@ -5,20 +5,27 @@
v-for="(item, index) in dynamicTagList" v-for="(item, index) in dynamicTagList"
:key="index" :key="index"
:ref="'dynamic' + index" :ref="'dynamic' + index"
:class="['scroll-item is-closable', $route.path === item.path ? 'is-active' : '', $route.path === item.path && showModel ==='card' ? 'card-active' : '' ]" :class="[
@contextmenu.prevent.native="openMenu(item, $event)" 'scroll-item is-closable',
$route.path === item.path ? 'is-active' : '',
$route.path === item.path && showModel === 'card' ? 'card-active' : ''
]"
@contextmenu.prevent="openMenu(item, $event)"
@mouseenter.prevent="onMouseenter(item, index)" @mouseenter.prevent="onMouseenter(item, index)"
@mouseleave.prevent="onMouseleave(item, index)" @mouseleave.prevent="onMouseleave(item, index)"
> >
<router-link :to="item.path">{{ $t(item.meta.title) }}</router-link> <router-link :to="item.path">{{ $t(item.meta.title) }}</router-link>
<span <span
v-if="$route.path === item.path && index !== 0 || index === activeIndex && index !== 0" v-if="
($route.path === item.path && index !== 0) ||
(index === activeIndex && index !== 0)
"
class="el-icon-close" class="el-icon-close"
@click="deleteMenu(item)" @click="deleteMenu(item)"
></span> ></span>
<div <div
:ref="'schedule' + index" :ref="'schedule' + index"
v-if="showModel !=='card'" v-if="showModel !== 'card'"
:class="[$route.path === item.path ? 'schedule-active' : '']" :class="[$route.path === item.path ? 'schedule-active' : '']"
></div> ></div>
</div> </div>
@ -26,15 +33,19 @@
<!-- 右键菜单按钮 --> <!-- 右键菜单按钮 -->
<ul <ul
v-show="visible" v-show="visible"
:style="{ left: buttonLeft + 'px',top: buttonTop + 'px'}" :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
class="contextmenu" class="contextmenu"
> >
<div v-for="(item,key) in tagsViews" :key="key" style="display:flex; align-items: center;"> <div
<li v-if="item.show" @click="selectTag(item,key)"> v-for="(item, key) in tagsViews"
:key="key"
style="display: flex; align-items: center"
>
<li v-if="item.show" @click="selectTag(item, key)">
<span> <span>
<i :class="item.icon"></i> <i :class="item.icon"></i>
</span> </span>
{{item.text}} {{ item.text }}
</li> </li>
</div> </div>
</ul> </ul>
@ -53,13 +64,14 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item <el-dropdown-item
v-for="(item,key) in tagsViews" v-for="(item, key) in tagsViews"
:key="key" :key="key"
:icon="item.icon" :icon="item.icon"
:divided="item.divided" :divided="item.divided"
:disabled="item.disabled" :disabled="item.disabled"
@click="onClickDrop(key, item)" @click="onClickDrop(key, item)"
>{{item.text}}</el-dropdown-item> >{{ item.text }}</el-dropdown-item
>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -71,10 +83,9 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { import {
ref, ref,
watchEffect,
watch, watch,
onBeforeMount, onBeforeMount,
unref, unref,
@ -106,6 +117,7 @@ export default {
!this.$storage.routesInStorage || !this.$storage.routesInStorage ||
this.$storage.routesInStorage.length === 0 this.$storage.routesInStorage.length === 0
) { ) {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.$storage.routesInStorage = routerArrays; this.$storage.routesInStorage = routerArrays;
} }
return this.$storage.routesInStorage; return this.$storage.routesInStorage;
@ -152,7 +164,7 @@ export default {
// //
const showModel = ref(storageLocal.getItem("showModel") || "smart"); const showModel = ref(storageLocal.getItem("showModel") || "smart");
if (!showModel) { if (!showModel.value) {
storageLocal.setItem("showModel", "card"); storageLocal.setItem("showModel", "card");
} }
@ -192,7 +204,7 @@ export default {
// //
function onFresh() { function onFresh() {
toggleClass(true, refreshButton, document.querySelector(".rotate")); toggleClass(true, refreshButton, document.querySelector(".rotate"));
const { path, fullPath } = unref(route); const { fullPath } = unref(route);
router.replace({ router.replace({
path: "/redirect" + fullPath path: "/redirect" + fullPath
}); });

View File

@ -14,7 +14,11 @@
<!-- tabs标签页 --> <!-- tabs标签页 -->
<tag> <tag>
<i <i
:class="containerHiddenSideBar? 'iconfont team-iconhidden-main-container': 'iconfont team-iconshow-main-container'" :class="
containerHiddenSideBar
? 'iconfont team-iconhidden-main-container'
: 'iconfont team-iconshow-main-container'
"
@click="onFullScreen" @click="onFullScreen"
></i> ></i>
</tag> </tag>
@ -35,26 +39,21 @@ import {
reactive, reactive,
computed, computed,
toRefs, toRefs,
watch,
nextTick,
watchEffect, watchEffect,
onMounted, onMounted,
onBeforeMount, onBeforeMount
onBeforeUnmount
} from "vue"; } from "vue";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
import { useSettingStoreHook } from "/@/store/modules/settings"; import { useSettingStoreHook } from "/@/store/modules/settings";
import { useEventListener, useFullscreen } from "@vueuse/core"; import { useEventListener } from "@vueuse/core";
import { toggleClass, removeClass } from "/@/utils/operate"; import { toggleClass } from "/@/utils/operate";
let hiddenMainContainer = "hidden-main-container"; let hiddenMainContainer = "hidden-main-container";
import options from "/@/settings"; import options from "/@/settings";
import { useRouter, useRoute } from "vue-router";
import { storageLocal } from "/@/utils/storage";
interface setInter { interface setInter {
sidebar: any; sidebar: any;
device: String; device: string;
fixedHeader: Boolean; fixedHeader: boolean;
classes: any; classes: any;
} }
@ -71,8 +70,8 @@ export default {
const pureApp = useAppStoreHook(); const pureApp = useAppStoreHook();
const pureSetting = useSettingStoreHook(); const pureSetting = useSettingStoreHook();
const router = useRouter(); // const router = useRouter();
const route = useRoute(); // const route = useRoute();
const WIDTH = ref(992); const WIDTH = ref(992);
@ -101,7 +100,7 @@ export default {
}) })
}); });
const handleClickOutside = (params: Boolean) => { const handleClickOutside = (params: boolean) => {
pureApp.closeSideBar({ withoutAnimation: params }); pureApp.closeSideBar({ withoutAnimation: params });
}; };

View File

@ -36,16 +36,16 @@ app.use(Storage, {
title: "message.hshome", title: "message.hshome",
icon: "el-icon-s-home", icon: "el-icon-s-home",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, }
}, }
], ]
}, }
}); });
// 自定义指令 // 自定义指令
import * as directives from "/@/directives"; import * as directives from "/@/directives";
Object.keys(directives).forEach((key) => { Object.keys(directives).forEach(key => {
app.directive(key, (directives as { [key: string]: Directive })[key]); app.directive(key, (directives as { [key: string]: Directive })[key]);
}); });
@ -57,7 +57,7 @@ export const getServerConfig = async (): Promise<any> => {
url: url:
process.env.NODE_ENV === "production" process.env.NODE_ENV === "production"
? "/manages/serverConfig.json" ? "/manages/serverConfig.json"
: "/serverConfig.json", : "/serverConfig.json"
}) })
.then(({ data: config }) => { .then(({ data: config }) => {
let $config = app.config.globalProperties.$config; let $config = app.config.globalProperties.$config;
@ -80,11 +80,7 @@ export const getServerConfig = async (): Promise<any> => {
getServerConfig().then(async () => { getServerConfig().then(async () => {
setupStore(app); setupStore(app);
app app.use(router).use(useElementPlus).use(useTable).use(usI18n);
.use(router)
.use(useElementPlus)
.use(useTable)
.use(usI18n);
await router.isReady(); await router.isReady();

View File

@ -8,7 +8,7 @@ import {
GridComponent, GridComponent,
ToolboxComponent, ToolboxComponent,
DataZoomComponent, DataZoomComponent,
VisualMapComponent, VisualMapComponent
} from "echarts/components"; } from "echarts/components";
import { SVGRenderer } from "echarts/renderers"; import { SVGRenderer } from "echarts/renderers";
@ -23,7 +23,7 @@ use([
SVGRenderer, SVGRenderer,
ToolboxComponent, ToolboxComponent,
DataZoomComponent, DataZoomComponent,
VisualMapComponent, VisualMapComponent
]); ]);
// 自定义主题 // 自定义主题

View File

@ -1,4 +1,4 @@
import {App, Component} from "vue"; import { App, Component } from "vue";
import { import {
ElAffix, ElAffix,
ElSkeleton, ElSkeleton,
@ -30,7 +30,7 @@ import {
ElPagination, ElPagination,
ElAlert, ElAlert,
ElRadioButton, ElRadioButton,
ElRadioGroup, ElRadioGroup
} from "element-plus"; } from "element-plus";
import "element-plus/packages/theme-chalk/src/base.scss"; import "element-plus/packages/theme-chalk/src/base.scss";
@ -64,7 +64,7 @@ const components = [
ElPagination, ElPagination,
ElAlert, ElAlert,
ElRadioButton, ElRadioButton,
ElRadioGroup, ElRadioGroup
]; ];
const plugins = [ElLoading]; const plugins = [ElLoading];
@ -77,7 +77,7 @@ export function useElementPlus(app: App) {
components.forEach((component: Component) => { components.forEach((component: Component) => {
app.component(component.name, component); app.component(component.name, component);
}); });
plugins.forEach((plugin) => { plugins.forEach(plugin => {
app.use(plugin); app.use(plugin);
}); });
} }

View File

@ -41,8 +41,8 @@ export const menusConfig = {
permission: "权限管理", permission: "权限管理",
permissionPage: "页面权限", permissionPage: "页面权限",
permissionButton: "按钮权限", permissionButton: "按钮权限",
externalLink: "外链", externalLink: "外链"
}, }
}, },
en: { en: {
message: { message: {
@ -77,9 +77,9 @@ export const menusConfig = {
permission: "Permission Manage", permission: "Permission Manage",
permissionPage: "Page Permission", permissionPage: "Page Permission",
permissionButton: "Button Permission", permissionButton: "Button Permission",
externalLink: "External Link", externalLink: "External Link"
}, }
}, }
}; };
// 按钮配置 // 按钮配置
@ -99,8 +99,8 @@ export const buttonConfig = {
hsexpendAll: "全部展开", hsexpendAll: "全部展开",
hscollapseAll: "全部折叠", hscollapseAll: "全部折叠",
hssystemSet: "系统设置", hssystemSet: "系统设置",
hsdelete: "删除", hsdelete: "删除"
}, }
}, },
en: { en: {
message: { message: {
@ -117,9 +117,9 @@ export const buttonConfig = {
hsexpendAll: "Expand All", hsexpendAll: "Expand All",
hscollapseAll: "Collapse All", hscollapseAll: "Collapse All",
hssystemSet: "System Set", hssystemSet: "System Set",
hsdelete: "Delete", hsdelete: "Delete"
}, }
}, }
}; };
// 配置 // 配置
@ -136,13 +136,13 @@ const localesList = [menusConfig, buttonConfig];
export const localesConfigs = { export const localesConfigs = {
zh: { zh: {
message: Object.assign({}, ...localesList.map((v) => v.zh.message)), message: Object.assign({}, ...localesList.map(v => v.zh.message)),
...zhVxeTable, ...zhVxeTable,
...zhLocale, ...zhLocale
}, },
en: { en: {
message: Object.assign({}, ...localesList.map((v) => v.en.message)), message: Object.assign({}, ...localesList.map(v => v.en.message)),
...enVxeTable, ...enVxeTable,
...enLocale, ...enLocale
}, }
}; };

View File

@ -6,7 +6,7 @@ import { localesConfigs } from "./config";
export const i18n = createI18n({ export const i18n = createI18n({
locale: "zh", // set locale locale: "zh", // set locale
fallbackLocale: "en", // set fallback locale fallbackLocale: "en", // set fallback locale
messages: localesConfigs, messages: localesConfigs
}); });
export function usI18n(app: App) { export function usI18n(app: App) {

View File

@ -44,7 +44,7 @@ import {
Pulldown, Pulldown,
// 表格 // 表格
Table, Table
} from "vxe-table"; } from "vxe-table";
// 全局默认参数 // 全局默认参数
@ -56,10 +56,10 @@ VXETable.setup({
// 自动监听父元素的变化去重新计算表格 // 自动监听父元素的变化去重新计算表格
autoResize: true, autoResize: true,
// 鼠标移到行是否要高亮显示 // 鼠标移到行是否要高亮显示
highlightHoverRow: true, highlightHoverRow: true
}, },
input: { input: {
clearable: true, clearable: true
}, },
// 对组件内置的提示语进行国际化翻译 // 对组件内置的提示语进行国际化翻译
i18n: (key, args) => i18n.global.t(key, args), i18n: (key, args) => i18n.global.t(key, args),
@ -73,7 +73,7 @@ VXETable.setup({
return i18n.global.t(key, args); return i18n.global.t(key, args);
} }
return key; return key;
}, }
}); });
export function useTable(app: App) { export function useTable(app: App) {

View File

@ -10,7 +10,7 @@ import externalLink from "./modules/externalLink";
import remainingRouter from "./modules/remaining"; //静态路由 import remainingRouter from "./modules/remaining"; //静态路由
import { storageSession } from "../utils/storage"; import { storageSession } from "../utils/storage";
import { i18n } from "/@/plugins/i18n/index"; import { i18n } from "/@/plugins/i18n";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
import { getAsyncRoutes } from "/@/api/routes"; import { getAsyncRoutes } from "/@/api/routes";
@ -26,11 +26,11 @@ const constantRoutes: Array<any> = [
componentsRouter, componentsRouter,
nestedRouter, nestedRouter,
externalLink, externalLink,
errorRouter, errorRouter
]; ];
// 按照路由中meta下的rank等级升序来排序路由 // 按照路由中meta下的rank等级升序来排序路由
export const ascending = (arr) => { export const ascending = arr => {
return arr.sort((a: any, b: any) => { return arr.sort((a: any, b: any) => {
return a?.meta?.rank - b?.meta?.rank; return a?.meta?.rank - b?.meta?.rank;
}); });
@ -61,7 +61,7 @@ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
routes: ascending(constantRoutes).concat(...remainingRouter), routes: ascending(constantRoutes).concat(...remainingRouter),
scrollBehavior(to, from, savedPosition) { scrollBehavior(to, from, savedPosition) {
return new Promise((resolve, reject) => { return new Promise(resolve => {
if (savedPosition) { if (savedPosition) {
return savedPosition; return savedPosition;
} else { } else {
@ -72,11 +72,11 @@ const router = createRouter({
} }
} }
}); });
}, }
}); });
export const initRouter = (name, next?, to?) => { export const initRouter = (name, next?, to?) => {
return new Promise((resolve, reject) => { return new Promise(resolve => {
getAsyncRoutes({ name }).then(({ info }) => { getAsyncRoutes({ name }).then(({ info }) => {
if (info.length === 0) { if (info.length === 0) {
usePermissionStoreHook().changeSetting(info); usePermissionStoreHook().changeSetting(info);
@ -84,9 +84,8 @@ export const initRouter = (name, next?, to?) => {
addAsyncRoutes(info).map((v: any) => { addAsyncRoutes(info).map((v: any) => {
// 防止重复添加路由 // 防止重复添加路由
if ( if (
router.options.routes.findIndex( router.options.routes.findIndex(value => value.path === v.path) !==
(value) => value.path === v.path -1
) !== -1
) { ) {
return; return;
} else { } else {
@ -103,7 +102,7 @@ export const initRouter = (name, next?, to?) => {
} }
router.addRoute({ router.addRoute({
path: "/:pathMatch(.*)", path: "/:pathMatch(.*)",
redirect: "/error/404", redirect: "/error/404"
}); });
}); });
}); });
@ -111,7 +110,7 @@ export const initRouter = (name, next?, to?) => {
// reset router // reset router
export function resetRouter() { export function resetRouter() {
router.getRoutes().forEach((route) => { router.getRoutes().forEach(route => {
const { name } = route; const { name } = route;
if (name) { if (name) {
router.hasRoute(name) && router.removeRoute(name); router.hasRoute(name) && router.removeRoute(name);
@ -124,7 +123,7 @@ import NProgress from "../utils/progress";
// const whiteList = ["/login", "/register"]; // const whiteList = ["/login", "/register"];
router.beforeEach((to, _from, next) => { router.beforeEach((to, _from, next) => {
let name = storageSession.getItem("info"); const name = storageSession.getItem("info");
NProgress.start(); NProgress.start();
const { t } = i18n.global; const { t } = i18n.global;
// @ts-ignore // @ts-ignore

View File

@ -10,7 +10,7 @@ const componentsRouter = {
title: "message.hscomponents", title: "message.hscomponents",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true,
rank: 4, rank: 4
}, },
children: [ children: [
{ {
@ -20,8 +20,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hsvideo", title: "message.hsvideo",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/components/map", path: "/components/map",
@ -30,8 +30,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hsmap", title: "message.hsmap",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/components/draggable", path: "/components/draggable",
@ -40,8 +40,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hsdraggable", title: "message.hsdraggable",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
@ -51,8 +51,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hssplitPane", title: "message.hssplitPane",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/components/button", path: "/components/button",
@ -61,8 +61,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hsbutton", title: "message.hsbutton",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/components/cropping", path: "/components/cropping",
@ -71,8 +71,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hscropping", title: "message.hscropping",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/components/countTo", path: "/components/countTo",
@ -81,8 +81,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hscountTo", title: "message.hscountTo",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/components/selector", path: "/components/selector",
@ -91,8 +91,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hsselector", title: "message.hsselector",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/components/seamlessScroll", path: "/components/seamlessScroll",
@ -101,8 +101,8 @@ const componentsRouter = {
meta: { meta: {
title: "message.hsseamless", title: "message.hsseamless",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/components/contextmenu", path: "/components/contextmenu",
@ -111,10 +111,10 @@ const componentsRouter = {
meta: { meta: {
title: "message.hscontextmenu", title: "message.hscontextmenu",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, }
], ]
}; };
export default componentsRouter; export default componentsRouter;

View File

@ -10,7 +10,7 @@ const editorRouter = {
title: "message.hseditor", title: "message.hseditor",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true,
rank: 2, rank: 2
}, },
children: [ children: [
{ {
@ -20,10 +20,10 @@ const editorRouter = {
meta: { meta: {
title: "message.hseditor", title: "message.hseditor",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, }
], ]
}; };
export default editorRouter; export default editorRouter;

View File

@ -10,7 +10,7 @@ const errorRouter = {
title: "message.hserror", title: "message.hserror",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true,
rank: 7, rank: 7
}, },
children: [ children: [
{ {
@ -20,8 +20,8 @@ const errorRouter = {
meta: { meta: {
title: "message.hsfourZeroOne", title: "message.hsfourZeroOne",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, },
{ {
path: "/error/404", path: "/error/404",
@ -30,10 +30,10 @@ const errorRouter = {
meta: { meta: {
title: "message.hsfourZeroFour", title: "message.hsfourZeroFour",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, }
], ]
}; };
export default errorRouter; export default errorRouter;

View File

@ -9,7 +9,7 @@ const externalLink = {
title: "message.externalLink", title: "message.externalLink",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true,
rank: 190, rank: 190
}, },
children: [ children: [
{ {
@ -19,10 +19,10 @@ const externalLink = {
title: "message.externalLink", title: "message.externalLink",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true,
rank: 191, rank: 191
}, }
}, }
], ]
}; };
export default externalLink; export default externalLink;

View File

@ -10,7 +10,7 @@ const flowChartRouter = {
title: "message.hsflowChart", title: "message.hsflowChart",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true,
rank: 1, rank: 1
}, },
children: [ children: [
{ {
@ -20,10 +20,10 @@ const flowChartRouter = {
meta: { meta: {
title: "message.hsflowChart", title: "message.hsflowChart",
showLink: true, showLink: true,
savedPosition: true, savedPosition: true
}, }
}, }
], ]
}; };
export default flowChartRouter; export default flowChartRouter;

View File

@ -9,7 +9,7 @@ const homeRouter = {
icon: "el-icon-s-home", icon: "el-icon-s-home",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false,
rank: 0, rank: 0
}, },
children: [ children: [
{ {
@ -19,10 +19,10 @@ const homeRouter = {
meta: { meta: {
title: "message.hshome", title: "message.hshome",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, }
}, }
], ]
}; };
export default homeRouter; export default homeRouter;

View File

@ -10,7 +10,7 @@ const nestedRouter = {
icon: "el-icon-s-data", icon: "el-icon-s-data",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false,
rank: 5, rank: 5
}, },
children: [ children: [
{ {
@ -20,7 +20,7 @@ const nestedRouter = {
meta: { meta: {
title: "message.hsmenu1", title: "message.hsmenu1",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, },
redirect: "/nested/menu1/menu1-1", redirect: "/nested/menu1/menu1-1",
children: [ children: [
@ -31,8 +31,8 @@ const nestedRouter = {
meta: { meta: {
title: "message.hsmenu1-1", title: "message.hsmenu1-1",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, }
}, },
{ {
path: "/nested/menu1/menu1-2", path: "/nested/menu1/menu1-2",
@ -42,7 +42,7 @@ const nestedRouter = {
meta: { meta: {
title: "message.hsmenu1-2", title: "message.hsmenu1-2",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, },
children: [ children: [
{ {
@ -53,8 +53,8 @@ const nestedRouter = {
meta: { meta: {
title: "message.hsmenu1-2-1", title: "message.hsmenu1-2-1",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, }
}, },
{ {
path: "/nested/menu1/menu1-2/menu1-2-2", path: "/nested/menu1/menu1-2/menu1-2-2",
@ -64,10 +64,10 @@ const nestedRouter = {
meta: { meta: {
title: "message.hsmenu1-2-2", title: "message.hsmenu1-2-2",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, }
}, }
], ]
}, },
{ {
path: "/nested/menu1/menu1-3", path: "/nested/menu1/menu1-3",
@ -76,10 +76,10 @@ const nestedRouter = {
meta: { meta: {
title: "message.hsmenu1-3", title: "message.hsmenu1-3",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, }
}, }
], ]
}, },
{ {
path: "/nested/menu2", path: "/nested/menu2",
@ -88,10 +88,10 @@ const nestedRouter = {
meta: { meta: {
title: "message.hsmenu2", title: "message.hsmenu2",
showLink: true, showLink: true,
savedPosition: false, savedPosition: false
}, }
}, }
], ]
}; };
export default nestedRouter; export default nestedRouter;

View File

@ -8,8 +8,8 @@ const remainingRouter = [
meta: { meta: {
title: "message.hslogin", title: "message.hslogin",
showLink: false, showLink: false,
rank: 101, rank: 101
}, }
}, },
{ {
path: "/register", path: "/register",
@ -18,8 +18,8 @@ const remainingRouter = [
meta: { meta: {
title: "message.hsregister", title: "message.hsregister",
showLink: false, showLink: false,
rank: 102, rank: 102
}, }
}, },
// { // {
// // 找不到路由重定向到404页面 // // 找不到路由重定向到404页面
@ -44,16 +44,16 @@ const remainingRouter = [
title: "message.hshome", title: "message.hshome",
showLink: false, showLink: false,
savedPosition: false, savedPosition: false,
rank: 104, rank: 104
}, },
children: [ children: [
{ {
path: "/redirect/:path(.*)", path: "/redirect/:path(.*)",
name: "redirect", name: "redirect",
component: () => import("/@/views/redirect.vue"), component: () => import("/@/views/redirect.vue")
}, }
], ]
}, }
]; ];
export default remainingRouter; export default remainingRouter;

View File

@ -3,5 +3,5 @@ export default {
fixedHeader: false, fixedHeader: false,
hiddenSideBar: false, hiddenSideBar: false
}; };

View File

@ -4,10 +4,10 @@ import { store } from "/@/store";
interface AppState { interface AppState {
sidebar: { sidebar: {
opened: Boolean; opened: boolean;
withoutAnimation: Boolean; withoutAnimation: boolean;
}; };
device: String; device: string;
} }
export const useAppStore = defineStore({ export const useAppStore = defineStore({
@ -17,9 +17,9 @@ export const useAppStore = defineStore({
opened: storageLocal.getItem("sidebarStatus") opened: storageLocal.getItem("sidebarStatus")
? !!+storageLocal.getItem("sidebarStatus") ? !!+storageLocal.getItem("sidebarStatus")
: true, : true,
withoutAnimation: false, withoutAnimation: false
}, },
device: "desktop", device: "desktop"
}), }),
getters: { getters: {
getSidebarStatus() { getSidebarStatus() {
@ -27,7 +27,7 @@ export const useAppStore = defineStore({
}, },
getDevice() { getDevice() {
return this.device; return this.device;
}, }
}, },
actions: { actions: {
TOGGLE_SIDEBAR() { TOGGLE_SIDEBAR() {
@ -39,12 +39,12 @@ export const useAppStore = defineStore({
storageLocal.setItem("sidebarStatus", 0); storageLocal.setItem("sidebarStatus", 0);
} }
}, },
CLOSE_SIDEBAR(withoutAnimation: Boolean) { CLOSE_SIDEBAR(withoutAnimation: boolean) {
storageLocal.setItem("sidebarStatus", 0); storageLocal.setItem("sidebarStatus", 0);
this.sidebar.opened = false; this.sidebar.opened = false;
this.sidebar.withoutAnimation = withoutAnimation; this.sidebar.withoutAnimation = withoutAnimation;
}, },
TOGGLE_DEVICE(device: String) { TOGGLE_DEVICE(device: string) {
this.device = device; this.device = device;
}, },
async toggleSideBar() { async toggleSideBar() {
@ -55,8 +55,8 @@ export const useAppStore = defineStore({
}, },
toggleDevice(device) { toggleDevice(device) {
this.TOGGLE_DEVICE(device); this.TOGGLE_DEVICE(device);
}, }
}, }
}); });
export function useAppStoreHook() { export function useAppStoreHook() {

View File

@ -8,13 +8,13 @@ export const usePermissionStore = defineStore({
state: () => ({ state: () => ({
constantRoutes: constantRoutesArr, //静态路由 constantRoutes: constantRoutesArr, //静态路由
wholeRoutes: [], wholeRoutes: [],
buttonAuth: [], buttonAuth: []
}), }),
actions: { actions: {
asyncActionRoutes(routes) { asyncActionRoutes(routes) {
if (this.wholeRoutes.length > 0) return; if (this.wholeRoutes.length > 0) return;
this.wholeRoutes = ascending(this.constantRoutes.concat(routes)).filter( this.wholeRoutes = ascending(this.constantRoutes.concat(routes)).filter(
(v) => v.meta.showLink v => v.meta.showLink
); );
const getButtonAuth = (arrRoutes: Array<string>) => { const getButtonAuth = (arrRoutes: Array<string>) => {
@ -33,8 +33,8 @@ export const usePermissionStore = defineStore({
}, },
async changeSetting(routes) { async changeSetting(routes) {
await this.asyncActionRoutes(routes); await this.asyncActionRoutes(routes);
}, }
}, }
}); });
export function usePermissionStoreHook() { export function usePermissionStoreHook() {

View File

@ -3,15 +3,15 @@ import { defineStore } from "pinia";
import { store } from "/@/store"; import { store } from "/@/store";
interface SettingState { interface SettingState {
title: String; title: string;
fixedHeader: Boolean; fixedHeader: boolean;
} }
export const useSettingStore = defineStore({ export const useSettingStore = defineStore({
id: "pure-setting", id: "pure-setting",
state: (): SettingState => ({ state: (): SettingState => ({
title: defaultSettings.title, title: defaultSettings.title,
fixedHeader: defaultSettings.fixedHeader, fixedHeader: defaultSettings.fixedHeader
}), }),
getters: { getters: {
getTitle() { getTitle() {
@ -19,18 +19,19 @@ export const useSettingStore = defineStore({
}, },
getFixedHeader() { getFixedHeader() {
return this.fixedHeader; return this.fixedHeader;
}, }
}, },
actions: { actions: {
CHANGE_SETTING({ key, value }) { CHANGE_SETTING({ key, value }) {
// eslint-disable-next-line no-prototype-builtins
if (this.hasOwnProperty(key)) { if (this.hasOwnProperty(key)) {
this[key] = value; this[key] = value;
} }
}, },
changeSetting(data) { changeSetting(data) {
this.CHANGE_SETTING(data); this.CHANGE_SETTING(data);
}, }
}, }
}); });
export function useSettingStoreHook() { export function useSettingStoreHook() {

View File

@ -8,14 +8,14 @@ class algorithmProxy implements ProxyAlgorithm {
// 数组每一项添加索引字段 // 数组每一项添加索引字段
public increaseIndexes<T>(val: Array<T>): Array<T> { public increaseIndexes<T>(val: Array<T>): Array<T> {
return Object.keys(val) return Object.keys(val)
.map((v) => { .map(v => {
return { return {
// @ts-ignore // @ts-ignore
...val[v], ...val[v],
key: v, key: v
}; };
}) })
.filter((v) => v.meta && v.meta.showLink); .filter(v => v.meta && v.meta.showLink);
} }
} }

View File

@ -1,6 +1,6 @@
// 延迟函数 // 延迟函数
export const delay = (timeout: number) => export const delay = (timeout: number) =>
new Promise((resolve) => setTimeout(resolve, timeout)); new Promise(resolve => setTimeout(resolve, timeout));
// 防抖函数 // 防抖函数
export const debounce = (fn: () => Fn, timeout: number) => { export const debounce = (fn: () => Fn, timeout: number) => {

View File

@ -4,22 +4,16 @@ interface deviceInter {
// 检测设备类型(手机返回true,反之) // 检测设备类型(手机返回true,反之)
export const deviceDetection = () => { export const deviceDetection = () => {
let sUserAgent: deviceInter = navigator.userAgent.toLowerCase(); const sUserAgent: deviceInter = navigator.userAgent.toLowerCase();
let bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; // const bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; const bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
let bIsMidp = sUserAgent.match(/midp/i) == "midp"; const bIsMidp = sUserAgent.match(/midp/i) == "midp";
let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; const bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; const bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
let bIsAndroid = sUserAgent.match(/android/i) == "android"; const bIsAndroid = sUserAgent.match(/android/i) == "android";
let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; const bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; const bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
return bIsIphoneOs || return (
bIsMidp || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM
bIsUc7 || );
bIsUc ||
bIsAndroid ||
bIsCE ||
bIsWM
? true
: false;
}; };

View File

@ -9,8 +9,8 @@ export const defaultConfig: AxiosRequestConfig = {
headers: { headers: {
Accept: "application/json, text/plain, */*", Accept: "application/json, text/plain, */*",
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest", "X-Requested-With": "XMLHttpRequest"
}, }
}; };
export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig { export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {
@ -22,7 +22,7 @@ export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {
if (headers && typeof headers === "object") { if (headers && typeof headers === "object") {
defaultConfig.headers = { defaultConfig.headers = {
...defaultConfig.headers, ...defaultConfig.headers,
...headers, ...headers
}; };
} }
return { ...excludeProps(config!, "headers"), ...defaultConfig }; return { ...excludeProps(config!, "headers"), ...defaultConfig };

View File

@ -1,16 +1,14 @@
import Axios, { import Axios, {
AxiosRequestConfig, AxiosRequestConfig,
CancelTokenStatic, CancelTokenStatic,
AxiosInstance, AxiosInstance
Canceler } from "axios";
} from "axios"
import NProgress from "../progress" import NProgress from "../progress";
import { genConfig } from "./config" import { genConfig } from "./config";
import { transformConfigByMethod } from "./utils" import { transformConfigByMethod } from "./utils";
import { import {
cancelTokenType, cancelTokenType,
@ -18,12 +16,12 @@ import {
EnclosureHttpRequestConfig, EnclosureHttpRequestConfig,
EnclosureHttpResoponse, EnclosureHttpResoponse,
EnclosureHttpError EnclosureHttpError
} from "./types.d" } from "./types.d";
class EnclosureHttp { class EnclosureHttp {
constructor() { constructor() {
this.httpInterceptorsRequest() this.httpInterceptorsRequest();
this.httpInterceptorsResponse() this.httpInterceptorsResponse();
} }
// 初始化配置对象 // 初始化配置对象
private static initConfig: EnclosureHttpRequestConfig = {}; private static initConfig: EnclosureHttpRequestConfig = {};
@ -32,7 +30,7 @@ class EnclosureHttp {
private static axiosInstance: AxiosInstance = Axios.create(genConfig()); private static axiosInstance: AxiosInstance = Axios.create(genConfig());
// 保存 EnclosureHttp实例 // 保存 EnclosureHttp实例
private static EnclosureHttpInstance: EnclosureHttp private static EnclosureHttpInstance: EnclosureHttp;
// axios取消对象 // axios取消对象
private CancelToken: CancelTokenStatic = Axios.CancelToken; private CancelToken: CancelTokenStatic = Axios.CancelToken;
@ -43,17 +41,19 @@ class EnclosureHttp {
// 记录当前这一次cancelToken的key // 记录当前这一次cancelToken的key
private currentCancelTokenKey = ""; private currentCancelTokenKey = "";
private beforeRequestCallback: EnclosureHttpRequestConfig["beforeRequestCallback"] = undefined; private beforeRequestCallback: EnclosureHttpRequestConfig["beforeRequestCallback"] =
undefined;
private beforeResponseCallback: EnclosureHttpRequestConfig["beforeResponseCallback"] = undefined; private beforeResponseCallback: EnclosureHttpRequestConfig["beforeResponseCallback"] =
undefined;
public get cancelTokenList(): Array<cancelTokenType> { public get cancelTokenList(): Array<cancelTokenType> {
return this.sourceTokenList return this.sourceTokenList;
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
public set cancelTokenList(value) { public set cancelTokenList(value) {
throw new Error("cancelTokenList不允许赋值") throw new Error("cancelTokenList不允许赋值");
} }
/** /**
@ -68,8 +68,8 @@ class EnclosureHttp {
* @returns string * @returns string
*/ */
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
private genUniqueKey(config: EnclosureHttpRequestConfig): string { private static genUniqueKey(config: EnclosureHttpRequestConfig): string {
return `${config.url}--${JSON.stringify(config.data)}` return `${config.url}--${JSON.stringify(config.data)}`;
} }
/** /**
@ -77,21 +77,21 @@ class EnclosureHttp {
* @returns void 0 * @returns void 0
*/ */
private cancelRepeatRequest(): void { private cancelRepeatRequest(): void {
const temp: { [key: string]: boolean } = {} const temp: { [key: string]: boolean } = {};
this.sourceTokenList = this.sourceTokenList.reduce<Array<cancelTokenType>>( this.sourceTokenList = this.sourceTokenList.reduce<Array<cancelTokenType>>(
(res: Array<cancelTokenType>, cancelToken: cancelTokenType) => { (res: Array<cancelTokenType>, cancelToken: cancelTokenType) => {
const { cancelKey, cancelExecutor } = cancelToken const { cancelKey, cancelExecutor } = cancelToken;
if (!temp[cancelKey]) { if (!temp[cancelKey]) {
temp[cancelKey] = true temp[cancelKey] = true;
res.push(cancelToken) res.push(cancelToken);
} else { } else {
cancelExecutor() cancelExecutor();
} }
return res return res;
}, },
[] []
) );
} }
/** /**
@ -102,9 +102,9 @@ class EnclosureHttp {
this.sourceTokenList = this.sourceTokenList =
this.sourceTokenList.length < 1 this.sourceTokenList.length < 1
? this.sourceTokenList.filter( ? this.sourceTokenList.filter(
cancelToken => cancelToken.cancelKey !== cancelKey cancelToken => cancelToken.cancelKey !== cancelKey
) )
: [] : [];
} }
/** /**
@ -115,30 +115,32 @@ class EnclosureHttp {
private httpInterceptorsRequest(): void { private httpInterceptorsRequest(): void {
EnclosureHttp.axiosInstance.interceptors.request.use( EnclosureHttp.axiosInstance.interceptors.request.use(
(config: EnclosureHttpRequestConfig) => { (config: EnclosureHttpRequestConfig) => {
const $config = config const $config = config;
NProgress.start() // 每次切换页面时,调用进度条 NProgress.start(); // 每次切换页面时,调用进度条
const cancelKey = this.genUniqueKey($config) const cancelKey = EnclosureHttp.genUniqueKey($config);
$config.cancelToken = new this.CancelToken((cancelExecutor: (cancel: any) => void) => { $config.cancelToken = new this.CancelToken(
this.sourceTokenList.push({ cancelKey, cancelExecutor }) (cancelExecutor: (cancel: any) => void) => {
}) this.sourceTokenList.push({ cancelKey, cancelExecutor });
this.cancelRepeatRequest() }
this.currentCancelTokenKey = cancelKey );
this.cancelRepeatRequest();
this.currentCancelTokenKey = cancelKey;
// 优先判断post/get等方法是否传入回掉否则执行初始化设置等回掉 // 优先判断post/get等方法是否传入回掉否则执行初始化设置等回掉
if (typeof this.beforeRequestCallback === "function") { if (typeof this.beforeRequestCallback === "function") {
this.beforeRequestCallback($config) this.beforeRequestCallback($config);
this.beforeRequestCallback = undefined this.beforeRequestCallback = undefined;
return $config return $config;
} }
if (EnclosureHttp.initConfig.beforeRequestCallback) { if (EnclosureHttp.initConfig.beforeRequestCallback) {
EnclosureHttp.initConfig.beforeRequestCallback($config) EnclosureHttp.initConfig.beforeRequestCallback($config);
return $config return $config;
} }
return $config return $config;
}, },
error => { error => {
return Promise.reject(error) return Promise.reject(error);
} }
) );
} }
/** /**
@ -146,7 +148,7 @@ class EnclosureHttp {
* @returns void 0 * @returns void 0
*/ */
public clearCancelTokenList(): void { public clearCancelTokenList(): void {
this.sourceTokenList.length = 0 this.sourceTokenList.length = 0;
} }
/** /**
@ -154,74 +156,75 @@ class EnclosureHttp {
* @returns void 0 * @returns void 0
*/ */
private httpInterceptorsResponse(): void { private httpInterceptorsResponse(): void {
const instance = EnclosureHttp.axiosInstance const instance = EnclosureHttp.axiosInstance;
instance.interceptors.response.use( instance.interceptors.response.use(
(response: EnclosureHttpResoponse) => { (response: EnclosureHttpResoponse) => {
// 请求每次成功一次就删除当前canceltoken标记 // 请求每次成功一次就删除当前canceltoken标记
const cancelKey = this.genUniqueKey(response.config) const cancelKey = EnclosureHttp.genUniqueKey(response.config);
this.deleteCancelTokenByCancelKey(cancelKey) this.deleteCancelTokenByCancelKey(cancelKey);
// 优先判断post/get等方法是否传入回掉否则执行初始化设置等回掉 // 优先判断post/get等方法是否传入回掉否则执行初始化设置等回掉
if (typeof this.beforeResponseCallback === "function") { if (typeof this.beforeResponseCallback === "function") {
this.beforeResponseCallback(response) this.beforeResponseCallback(response);
this.beforeResponseCallback = undefined this.beforeResponseCallback = undefined;
return response.data return response.data;
} }
if (EnclosureHttp.initConfig.beforeResponseCallback) { if (EnclosureHttp.initConfig.beforeResponseCallback) {
EnclosureHttp.initConfig.beforeResponseCallback(response) EnclosureHttp.initConfig.beforeResponseCallback(response);
return response.data return response.data;
} }
NProgress.done() NProgress.done();
return response.data return response.data;
}, },
(error: EnclosureHttpError) => { (error: EnclosureHttpError) => {
const $error = error const $error = error;
// 判断当前的请求中是否在 取消token数组理存在如果存在则移除单次请求流程 // 判断当前的请求中是否在 取消token数组理存在如果存在则移除单次请求流程
if (this.currentCancelTokenKey) { if (this.currentCancelTokenKey) {
const haskey = this.sourceTokenList.filter( const haskey = this.sourceTokenList.filter(
cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey
).length ).length;
if (haskey) { if (haskey) {
this.sourceTokenList = this.sourceTokenList.filter( this.sourceTokenList = this.sourceTokenList.filter(
cancelToken => cancelToken =>
cancelToken.cancelKey !== this.currentCancelTokenKey cancelToken.cancelKey !== this.currentCancelTokenKey
) );
this.currentCancelTokenKey = "" this.currentCancelTokenKey = "";
} }
} }
$error.isCancelRequest = Axios.isCancel($error) $error.isCancelRequest = Axios.isCancel($error);
// 所有的响应异常 区分来源为取消请求/非取消请求 // 所有的响应异常 区分来源为取消请求/非取消请求
return Promise.reject($error) return Promise.reject($error);
} }
) );
} }
public request<T>( public request<T>(
method: RequestMethods, method: RequestMethods,
url: string, url: string,
param?: AxiosRequestConfig, param?: AxiosRequestConfig,
axiosConfig?: EnclosureHttpRequestConfig, axiosConfig?: EnclosureHttpRequestConfig
): Promise<T> { ): Promise<T> {
const config = transformConfigByMethod(param, { const config = transformConfigByMethod(param, {
method, method,
url, url,
...axiosConfig ...axiosConfig
} as EnclosureHttpRequestConfig) } as EnclosureHttpRequestConfig);
// 单独处理自定义请求/响应回掉 // 单独处理自定义请求/响应回掉
if (axiosConfig?.beforeRequestCallback) { if (axiosConfig?.beforeRequestCallback) {
this.beforeRequestCallback = axiosConfig.beforeRequestCallback this.beforeRequestCallback = axiosConfig.beforeRequestCallback;
} }
if (axiosConfig?.beforeResponseCallback) { if (axiosConfig?.beforeResponseCallback) {
this.beforeResponseCallback = axiosConfig.beforeResponseCallback this.beforeResponseCallback = axiosConfig.beforeResponseCallback;
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
EnclosureHttp.axiosInstance.request(config) EnclosureHttp.axiosInstance
.request(config)
.then((response: EnclosureHttpResoponse) => { .then((response: EnclosureHttpResoponse) => {
resolve(response) resolve(response);
}) })
.catch((error: any) => { .catch((error: any) => {
reject(error) reject(error);
}) });
}) });
} }
public post<T>( public post<T>(
@ -229,7 +232,7 @@ class EnclosureHttp {
params?: T, params?: T,
config?: EnclosureHttpRequestConfig config?: EnclosureHttpRequestConfig
): Promise<T> { ): Promise<T> {
return this.request<T>("post", url, params, config) return this.request<T>("post", url, params, config);
} }
public get<T>( public get<T>(
@ -237,8 +240,8 @@ class EnclosureHttp {
params?: T, params?: T,
config?: EnclosureHttpRequestConfig config?: EnclosureHttpRequestConfig
): Promise<T> { ): Promise<T> {
return this.request<T>("get", url, params, config) return this.request<T>("get", url, params, config);
} }
} }
export default EnclosureHttp export default EnclosureHttp;

View File

@ -1,3 +1,2 @@
import EnclosureHttp from "./core" import EnclosureHttp from "./core";
export const http = new EnclosureHttp() export const http = new EnclosureHttp();

View File

@ -1,4 +1,4 @@
import { EnclosureHttpRequestConfig } from "./types.d" import { EnclosureHttpRequestConfig } from "./types.d";
export function excludeProps<T extends { [key: string]: any }>( export function excludeProps<T extends { [key: string]: any }>(
origin: T, origin: T,
@ -7,23 +7,23 @@ export function excludeProps<T extends { [key: string]: any }>(
return Object.keys(origin) return Object.keys(origin)
.filter(key => !prop.includes(key)) .filter(key => !prop.includes(key))
.reduce((res, key) => { .reduce((res, key) => {
res[key] = origin[key] res[key] = origin[key];
return res return res;
}, {} as { [key: string]: T }) }, {} as { [key: string]: T });
} }
export function transformConfigByMethod( export function transformConfigByMethod(
params: any, params: any,
config: EnclosureHttpRequestConfig config: EnclosureHttpRequestConfig
): EnclosureHttpRequestConfig { ): EnclosureHttpRequestConfig {
const { method } = config const { method } = config;
const props = ["delete", "get", "head", "options"].includes( const props = ["delete", "get", "head", "options"].includes(
method!.toLocaleLowerCase() method!.toLocaleLowerCase()
) )
? "params" ? "params"
: "data" : "data";
return { return {
...config, ...config,
[props]: params [props]: params
} };
} }

View File

@ -1,94 +1,101 @@
const toString = Object.prototype.toString /* eslint-disable */
const toString = Object.prototype.toString;
export function is(val: unknown, type: string) { export function is(val: unknown, type: string) {
return toString.call(val) === `[object ${type}]` return toString.call(val) === `[object ${type}]`;
} }
export function isDef<T = unknown>(val?: T): val is T { export function isDef<T = unknown>(val?: T): val is T {
return typeof val !== 'undefined' return typeof val !== "undefined";
} }
export function isUnDef<T = unknown>(val?: T): val is T { export function isUnDef<T = unknown>(val?: T): val is T {
return !isDef(val) return !isDef(val);
} }
export function isObject(val: any): val is Record<any, any> { export function isObject(val: any): val is Record<any, any> {
return val !== null && is(val, 'Object') return val !== null && is(val, "Object");
} }
export function isEmpty<T = unknown>(val: T): val is T { export function isEmpty<T = unknown>(val: T): val is T {
if (isArray(val) || isString(val)) { if (isArray(val) || isString(val)) {
return val.length === 0 return val.length === 0;
} }
if (val instanceof Map || val instanceof Set) { if (val instanceof Map || val instanceof Set) {
return val.size === 0 return val.size === 0;
} }
if (isObject(val)) { if (isObject(val)) {
return Object.keys(val).length === 0 return Object.keys(val).length === 0;
} }
return false return false;
} }
export function isDate(val: unknown): val is Date { export function isDate(val: unknown): val is Date {
return is(val, 'Date') return is(val, "Date");
} }
export function isNull(val: unknown): val is null { export function isNull(val: unknown): val is null {
return val === null return val === null;
} }
export function isNullAndUnDef(val: unknown): val is null | undefined { export function isNullAndUnDef(val: unknown): val is null | undefined {
return isUnDef(val) && isNull(val) return isUnDef(val) && isNull(val);
} }
export function isNullOrUnDef(val: unknown): val is null | undefined { export function isNullOrUnDef(val: unknown): val is null | undefined {
return isUnDef(val) || isNull(val) return isUnDef(val) || isNull(val);
} }
export function isNumber(val: unknown): val is number { export function isNumber(val: unknown): val is number {
return is(val, 'Number') return is(val, "Number");
} }
export function isPromise<T = any>(val: unknown): val is Promise<T> { export function isPromise<T = any>(val: unknown): val is Promise<T> {
return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch) return (
is(val, "Promise") &&
isObject(val) &&
isFunction(val.then) &&
isFunction(val.catch)
);
} }
export function isString(val: unknown): val is string { export function isString(val: unknown): val is string {
return is(val, 'String') return is(val, "String");
} }
export function isFunction(val: unknown): val is Function { export function isFunction(val: unknown): val is Function {
return typeof val === 'function' return typeof val === "function";
} }
export function isBoolean(val: unknown): val is boolean { export function isBoolean(val: unknown): val is boolean {
return is(val, 'Boolean') return is(val, "Boolean");
} }
export function isRegExp(val: unknown): val is RegExp { export function isRegExp(val: unknown): val is RegExp {
return is(val, 'RegExp') return is(val, "RegExp");
} }
export function isArray(val: any): val is Array<any> { export function isArray(val: any): val is Array<any> {
return val && Array.isArray(val) return val && Array.isArray(val);
} }
export function isWindow(val: any): val is Window { export function isWindow(val: any): val is Window {
return typeof window !== 'undefined' && is(val, 'Window') return typeof window !== "undefined" && is(val, "Window");
} }
export function isElement(val: unknown): val is Element { export function isElement(val: unknown): val is Element {
return isObject(val) && !!val.tagName return isObject(val) && !!val.tagName;
} }
export const isServer = typeof window === 'undefined' export const isServer = typeof window === "undefined";
export const isClient = !isServer export const isClient = !isServer;
export function isUrl(path: string): boolean { export function isUrl(path: string): boolean {
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/ const reg =
return reg.test(path) /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
return reg.test(path);
} }

View File

@ -1,54 +1,54 @@
interface ProxyLoader { interface ProxyLoader {
loadCss(src: string): any loadCss(src: string): any;
loadScript(src: string): Promise<any> loadScript(src: string): Promise<any>;
loadScriptConcurrent(src: Array<string>): Promise<any> loadScriptConcurrent(src: Array<string>): Promise<any>;
} }
class loaderProxy implements ProxyLoader { class loaderProxy implements ProxyLoader {
constructor() {}
constructor() { } protected scriptLoaderCache: Array<string> = [];
protected scriptLoaderCache: Array<string> = []
public loadCss = (src: string): any => { public loadCss = (src: string): any => {
let element:HTMLLinkElement = document.createElement("link") const element: HTMLLinkElement = document.createElement("link");
element.rel = "stylesheet" element.rel = "stylesheet";
element.href = src element.href = src;
document.body.appendChild(element) document.body.appendChild(element);
} };
public loadScript = async (src: string): Promise<any> => { public loadScript = async (src: string): Promise<any> => {
if (this.scriptLoaderCache.includes(src)) { if (this.scriptLoaderCache.includes(src)) {
return src return src;
} else { } else {
let element: HTMLScriptElement = document.createElement("script") const element: HTMLScriptElement = document.createElement("script");
element.src = src element.src = src;
document.body.appendChild(element) document.body.appendChild(element);
element.onload = () => { element.onload = () => {
return this.scriptLoaderCache.push(src) return this.scriptLoaderCache.push(src);
} };
} }
} };
public loadScriptConcurrent = async (srcList: Array<string>): Promise<any> => { public loadScriptConcurrent = async (
srcList: Array<string>
): Promise<any> => {
if (Array.isArray(srcList)) { if (Array.isArray(srcList)) {
const len: number = srcList.length const len: number = srcList.length;
if (len > 0) { if (len > 0) {
let count: number = 0 let count = 0;
srcList.map(src => { srcList.map(src => {
if (src) { if (src) {
this.loadScript(src).then(() => { this.loadScript(src).then(() => {
count++ count++;
if (count === len) { if (count === len) {
return return;
} }
}) });
} }
}) });
} }
} }
} };
} }
export const loader = new loaderProxy() export const loader = new loaderProxy();

View File

@ -1,12 +1,12 @@
import { ElMessage } from "element-plus" import { ElMessage } from "element-plus";
// 消息 // 消息
const Message = (message: string): any => { const Message = (message: string): any => {
return ElMessage({ return ElMessage({
showClose: true, showClose: true,
message message
}) });
} };
// 成功 // 成功
const successMessage = (message: string): any => { const successMessage = (message: string): any => {
@ -14,8 +14,8 @@ const successMessage = (message: string): any => {
showClose: true, showClose: true,
message, message,
type: "success" type: "success"
}) });
} };
// 警告 // 警告
const warnMessage = (message: string): any => { const warnMessage = (message: string): any => {
@ -23,8 +23,8 @@ const warnMessage = (message: string): any => {
showClose: true, showClose: true,
message, message,
type: "warning" type: "warning"
}) });
} };
// 失败 // 失败
const errorMessage = (message: string): any => { const errorMessage = (message: string): any => {
@ -32,12 +32,7 @@ const errorMessage = (message: string): any => {
showClose: true, showClose: true,
message, message,
type: "error" type: "error"
}) });
} };
export { export { Message, successMessage, warnMessage, errorMessage };
Message,
successMessage,
warnMessage,
errorMessage
}

View File

@ -1,4 +1,4 @@
import type { Emitter } from 'mitt'; import type { Emitter } from "mitt";
import mitt from 'mitt'; import mitt from "mitt";
export const emitter: Emitter = mitt(); export const emitter: Emitter = mitt();

View File

@ -1,12 +1,12 @@
import NProgress from "nprogress" import NProgress from "nprogress";
import "nprogress/nprogress.css" import "nprogress/nprogress.css";
NProgress.configure({ NProgress.configure({
easing: 'ease', // 动画方式 easing: "ease", // 动画方式
speed: 500, // 递增进度条的速度 speed: 500, // 递增进度条的速度
showSpinner: true, // 是否显示加载ico showSpinner: true, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔 trickleSpeed: 200, // 自动递增间隔
minimum: 0.3 // 初始化时的最小百分比 minimum: 0.3 // 初始化时的最小百分比
}) });
export default NProgress export default NProgress;

View File

@ -1,12 +1,12 @@
import { CSSProperties, VNodeChild } from 'vue' import { CSSProperties, VNodeChild } from "vue";
import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types' import { createTypes, VueTypeValidableDef, VueTypesInterface } from "vue-types";
export type VueNode = VNodeChild | JSX.Element export type VueNode = VNodeChild | JSX.Element;
type PropTypes = VueTypesInterface & { type PropTypes = VueTypesInterface & {
readonly style: VueTypeValidableDef<CSSProperties> readonly style: VueTypeValidableDef<CSSProperties>;
readonly VNodeChild: VueTypeValidableDef<VueNode> readonly VNodeChild: VueTypeValidableDef<VueNode>;
} };
const propTypes = createTypes({ const propTypes = createTypes({
func: undefined, func: undefined,
@ -14,20 +14,20 @@ const propTypes = createTypes({
string: undefined, string: undefined,
number: undefined, number: undefined,
object: undefined, object: undefined,
integer: undefined, integer: undefined
}) as PropTypes }) as PropTypes;
propTypes.extend([ propTypes.extend([
{ {
name: 'style', name: "style",
getter: true, getter: true,
type: [String, Object], type: [String, Object],
default: undefined, default: undefined
}, },
{ {
name: 'VNodeChild', name: "VNodeChild",
getter: true, getter: true,
type: undefined, type: undefined
} }
]) ]);
export { propTypes } export { propTypes };

View File

@ -1,32 +1,35 @@
import ResizeObserver from 'resize-observer-polyfill' import ResizeObserver from "resize-observer-polyfill";
const isServer = typeof window === 'undefined' const isServer = typeof window === "undefined";
const resizeHandler = (entries: any[]): void => { const resizeHandler = (entries: any[]): void => {
for (const entry of entries) { for (const entry of entries) {
const listeners = entry.target.__resizeListeners__ || [] const listeners = entry.target.__resizeListeners__ || [];
if (listeners.length) { if (listeners.length) {
listeners.forEach((fn: () => any) => { listeners.forEach((fn: () => any) => {
fn() fn();
}) });
} }
} }
} };
export const addResizeListener = (element: any, fn: () => any): any => { export const addResizeListener = (element: any, fn: () => any): any => {
if (isServer) return if (isServer) return;
if (!element.__resizeListeners__) { if (!element.__resizeListeners__) {
element.__resizeListeners__ = [] element.__resizeListeners__ = [];
element.__ro__ = new ResizeObserver(resizeHandler) element.__ro__ = new ResizeObserver(resizeHandler);
element.__ro__.observe(element) element.__ro__.observe(element);
} }
element.__resizeListeners__.push(fn) element.__resizeListeners__.push(fn);
} };
export const removeResizeListener = (element: any, fn: () => any): any => { export const removeResizeListener = (element: any, fn: () => any): any => {
if (!element || !element.__resizeListeners__) return if (!element || !element.__resizeListeners__) return;
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1) element.__resizeListeners__.splice(
element.__resizeListeners__.indexOf(fn),
1
);
if (!element.__resizeListeners__.length) { if (!element.__resizeListeners__.length) {
element.__ro__.disconnect() element.__ro__.disconnect();
} }
} };

View File

@ -1,39 +1,42 @@
import { getCurrentInstance, reactive, shallowRef, watchEffect } from 'vue' import { getCurrentInstance, reactive, shallowRef, watchEffect } from "vue";
import type { Ref } from 'vue' import type { Ref } from "vue";
interface Params { interface Params {
excludeListeners?: boolean excludeListeners?: boolean;
excludeKeys?: string[] excludeKeys?: string[];
} }
const DEFAULT_EXCLUDE_KEYS = ['class', 'style'] const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
const LISTENER_PREFIX = /^on[A-Z]/ const LISTENER_PREFIX = /^on[A-Z]/;
export function entries<T>(obj: Recordable<T>): [string, T][] { export function entries<T>(obj: Recordable<T>): [string, T][] {
return Object.keys(obj).map((key: string) => [key, obj[key]]) return Object.keys(obj).map((key: string) => [key, obj[key]]);
} }
export function useAttrs(params: Params = {}): Ref<Recordable> | {} { export function useAttrs(params: Params = {}): Ref<Recordable> | {} {
const instance = getCurrentInstance() const instance = getCurrentInstance();
if (!instance) return {} if (!instance) return {};
const { excludeListeners = false, excludeKeys = [] } = params const { excludeListeners = false, excludeKeys = [] } = params;
const attrs = shallowRef({}) const attrs = shallowRef({});
const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS) const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS);
// Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
instance.attrs = reactive(instance.attrs) instance.attrs = reactive(instance.attrs);
watchEffect(() => { watchEffect(() => {
const res = entries(instance.attrs).reduce((acm, [key, val]) => { const res = entries(instance.attrs).reduce((acm, [key, val]) => {
if (!allExcludeKeys.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))) { if (
acm[key] = val !allExcludeKeys.includes(key) &&
!(excludeListeners && LISTENER_PREFIX.test(key))
) {
acm[key] = val;
} }
return acm return acm;
}, {} as Recordable) }, {} as Recordable);
attrs.value = res attrs.value = res;
}) });
return attrs return attrs;
} }

View File

@ -1,28 +1,28 @@
const hexList: string[] = [] const hexList: string[] = [];
for (let i = 0; i <= 15; i++) { for (let i = 0; i <= 15; i++) {
hexList[i] = i.toString(16) hexList[i] = i.toString(16);
} }
export function buildUUID(): string { export function buildUUID(): string {
let uuid = '' let uuid = "";
for (let i = 1; i <= 36; i++) { for (let i = 1; i <= 36; i++) {
if (i === 9 || i === 14 || i === 19 || i === 24) { if (i === 9 || i === 14 || i === 19 || i === 24) {
uuid += '-' uuid += "-";
} else if (i === 15) { } else if (i === 15) {
uuid += 4 uuid += 4;
} else if (i === 20) { } else if (i === 20) {
uuid += hexList[(Math.random() * 4) | 8] uuid += hexList[(Math.random() * 4) | 8];
} else { } else {
uuid += hexList[(Math.random() * 16) | 0] uuid += hexList[(Math.random() * 16) | 0];
} }
} }
return uuid.replace(/-/g, '') return uuid.replace(/-/g, "");
} }
let unique = 0 let unique = 0;
export function buildShortUUID(prefix = ''): string { export function buildShortUUID(prefix = ""): string {
const time = Date.now() const time = Date.now();
const random = Math.floor(Math.random() * 1000000000) const random = Math.floor(Math.random() * 1000000000);
unique++ unique++;
return prefix + '_' + random + unique + String(time) return prefix + "_" + random + unique + String(time);
} }

View File

@ -1,20 +1,20 @@
<template> <template>
<iframe <iframe :src="url" frameborder="0" class="iframe"></iframe>
:src="url"
frameborder="0"
class="iframe"
></iframe>
</template> </template>
<script lang='ts'> <script lang="ts">
import { ref } from 'vue'; import { ref } from "vue";
export default { export default {
setup() { setup() {
const url = ref(process.env.NODE_ENV === 'production' ? '/manages/html/button.html' : '/html/button.html'); const url = ref(
process.env.NODE_ENV === "production"
? "/manages/html/button.html"
: "/html/button.html"
);
return { return {
url url
}; };
}, }
}; };
</script> </script>

View File

@ -36,7 +36,6 @@ import { defineComponent } from "vue";
import { import {
directive, directive,
version,
Contextmenu, Contextmenu,
ContextmenuItem, ContextmenuItem,
ContextmenuDivider, ContextmenuDivider,
@ -72,4 +71,4 @@ export default defineComponent({
border-radius: 8px; border-radius: 8px;
background-color: rgba(90, 167, 164, 0.2); background-color: rgba(90, 167, 164, 0.2);
} }
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div style="margin:10px"> <div style="margin: 10px">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10"> <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
<!-- 基本使用 --> <!-- 基本使用 -->

View File

@ -7,22 +7,38 @@
<v-contextmenu ref="contextmenu"> <v-contextmenu ref="contextmenu">
<v-contextmenu-group title="操作"> <v-contextmenu-group title="操作">
<v-contextmenu-item :hide-on-click="false" @click="extra.push('item')">添加菜单</v-contextmenu-item> <v-contextmenu-item :hide-on-click="false" @click="extra.push('item')"
<v-contextmenu-item :hide-on-click="false" @click="extra.push('group')">添加菜单组</v-contextmenu-item> >添加菜单</v-contextmenu-item
<v-contextmenu-item :hide-on-click="false" @click="extra.push('submenu')">添加子菜单</v-contextmenu-item> >
<v-contextmenu-item :hide-on-click="false" @click="extra.pop()">删除</v-contextmenu-item> <v-contextmenu-item :hide-on-click="false" @click="extra.push('group')"
>添加菜单组</v-contextmenu-item
>
<v-contextmenu-item
:hide-on-click="false"
@click="extra.push('submenu')"
>添加子菜单</v-contextmenu-item
>
<v-contextmenu-item :hide-on-click="false" @click="extra.pop()"
>删除</v-contextmenu-item
>
</v-contextmenu-group> </v-contextmenu-group>
<template v-for="(item, index) of extra"> <template v-for="(item, index) of extra" :key="index">
<v-contextmenu-divider /> <v-contextmenu-divider />
<v-contextmenu-group v-if="item === 'group'" :title="`菜单组 ${index + 1}`"> <v-contextmenu-group
v-if="item === 'group'"
:title="`菜单组 ${index + 1}`"
>
<v-contextmenu-item>菜单1</v-contextmenu-item> <v-contextmenu-item>菜单1</v-contextmenu-item>
<v-contextmenu-item>菜单2</v-contextmenu-item> <v-contextmenu-item>菜单2</v-contextmenu-item>
<v-contextmenu-item>菜单3</v-contextmenu-item> <v-contextmenu-item>菜单3</v-contextmenu-item>
</v-contextmenu-group> </v-contextmenu-group>
<v-contextmenu-submenu v-else-if="item === 'submenu'" :title="`子菜单 ${index + 1}`"> <v-contextmenu-submenu
v-else-if="item === 'submenu'"
:title="`子菜单 ${index + 1}`"
>
<v-contextmenu-item>菜单1</v-contextmenu-item> <v-contextmenu-item>菜单1</v-contextmenu-item>
<v-contextmenu-item>菜单2</v-contextmenu-item> <v-contextmenu-item>菜单2</v-contextmenu-item>
<v-contextmenu-item>菜单3</v-contextmenu-item> <v-contextmenu-item>菜单3</v-contextmenu-item>
@ -39,7 +55,6 @@ import { defineComponent } from "vue";
import { import {
directive, directive,
version,
Contextmenu, Contextmenu,
ContextmenuItem, ContextmenuItem,
ContextmenuDivider, ContextmenuDivider,
@ -91,4 +106,4 @@ export default defineComponent({
border-radius: 8px; border-radius: 8px;
background-color: rgba(90, 167, 164, 0.2); background-color: rgba(90, 167, 164, 0.2);
} }
</style> </style>

View File

@ -31,7 +31,6 @@ import { defineComponent } from "vue";
import { import {
directive, directive,
version,
Contextmenu, Contextmenu,
ContextmenuItem, ContextmenuItem,
ContextmenuDivider, ContextmenuDivider,
@ -69,4 +68,4 @@ export default ExampleSFC;
border-radius: 8px; border-radius: 8px;
background-color: rgba(90, 167, 164, 0.2); background-color: rgba(90, 167, 164, 0.2);
} }
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div style="margin:10px"> <div style="margin: 10px">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card shadow="always"> <el-card shadow="always">
@ -29,7 +29,7 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import CountTo from "/@/components/ReCountTo"; import CountTo from "/@/components/ReCountTo";
export default { export default {
components: { components: {

View File

@ -18,7 +18,9 @@
forceFallback="true" forceFallback="true"
> >
<template #item="{ element }"> <template #item="{ element }">
<div :class="'item'+' '+ 'item-' + element.num">{{ element.num }}</div> <div :class="'item' + ' ' + 'item-' + element.num">
{{ element.num }}
</div>
</template> </template>
</draggable> </draggable>
</el-card> </el-card>
@ -41,7 +43,7 @@
animation="300" animation="300"
> >
<template #item="{ element, index }"> <template #item="{ element, index }">
<div class="item-single">{{element.name}} {{ index }}</div> <div class="item-single">{{ element.name }} {{ index }}</div>
</template> </template>
</draggable> </draggable>
</el-card> </el-card>
@ -56,7 +58,11 @@
</template> </template>
<!-- 拖拽实现元素位置切换 --> <!-- 拖拽实现元素位置切换 -->
<div class="cut-container"> <div class="cut-container">
<div class="item-cut" v-for="(item,index) in cutLists" :key="index"> <div
class="item-cut"
v-for="(item, index) in cutLists"
:key="index"
>
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
</div> </div>
</div> </div>
@ -66,7 +72,7 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import draggable from "vuedraggable/src/vuedraggable"; import draggable from "vuedraggable/src/vuedraggable";
import { reactive, toRefs, onMounted } from "vue"; import { reactive, toRefs, onMounted } from "vue";
export default { export default {
@ -105,6 +111,7 @@ export default {
onMounted(() => { onMounted(() => {
// 使sortable // 使sortable
// @ts-ignore // @ts-ignore
// eslint-disable-next-line no-undef
new Sortable(document.querySelector(".cut-container"), { new Sortable(document.querySelector(".cut-container"), {
swap: true, swap: true,
forceFallback: true, forceFallback: true,

View File

@ -4,7 +4,7 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { Amap } from "/@/components/ReMap"; import { Amap } from "/@/components/ReMap";
export default { export default {
components: { components: {

View File

@ -5,20 +5,51 @@
<div class="card-header"> <div class="card-header">
<span>无缝滚动示例</span> <span>无缝滚动示例</span>
<el-button class="button" type="text" @click="changeDirection('top')"> <el-button class="button" type="text" @click="changeDirection('top')">
<span :style="{color: classOption.direction === 'top' ? 'red' : ''}">向上滚动</span> <span
:style="{ color: classOption.direction === 'top' ? 'red' : '' }"
>向上滚动</span
>
</el-button> </el-button>
<el-button class="button" type="text" @click="changeDirection('bottom')"> <el-button
<span :style="{color: classOption.direction === 'bottom' ? 'red' : ''}">向下滚动</span> class="button"
type="text"
@click="changeDirection('bottom')"
>
<span
:style="{
color: classOption.direction === 'bottom' ? 'red' : ''
}"
>向下滚动</span
>
</el-button> </el-button>
<el-button class="button" type="text" @click="changeDirection('left')"> <el-button
<span :style="{color: classOption.direction === 'left' ? 'red' : ''}">向左滚动</span> class="button"
type="text"
@click="changeDirection('left')"
>
<span
:style="{ color: classOption.direction === 'left' ? 'red' : '' }"
>向左滚动</span
>
</el-button> </el-button>
<el-button class="button" type="text" @click="changeDirection('right')"> <el-button
<span :style="{color: classOption.direction === 'right' ? 'red' : ''}">向右滚动</span> class="button"
type="text"
@click="changeDirection('right')"
>
<span
:style="{ color: classOption.direction === 'right' ? 'red' : '' }"
>向右滚动</span
>
</el-button> </el-button>
</div> </div>
</template> </template>
<SeamlessScroll ref="scroll" :data="listData" :class-option="classOption" class="warp"> <SeamlessScroll
ref="scroll"
:data="listData"
:class-option="classOption"
class="warp"
>
<ul class="item"> <ul class="item">
<li v-for="(item, index) in listData" :key="index"> <li v-for="(item, index) in listData" :key="index">
<span class="title" v-text="item.title"></span> <span class="title" v-text="item.title"></span>
@ -29,7 +60,7 @@
</el-space> </el-space>
</template> </template>
<script lang='ts'> <script lang="ts">
import { ref, unref } from "vue"; import { ref, unref } from "vue";
import { templateRef } from "@vueuse/core"; import { templateRef } from "@vueuse/core";
@ -39,6 +70,7 @@ export default {
SeamlessScroll SeamlessScroll
}, },
setup() { setup() {
// eslint-disable-next-line no-undef
const scroll = templateRef<ElRef | null>("scroll", null); const scroll = templateRef<ElRef | null>("scroll", null);
let listData = ref([ let listData = ref([

View File

@ -1,9 +1,14 @@
<template> <template>
<div> <div>
<el-card class="box-card" style="margin:10px" v-for="(item,key) in dataLists" :key="key"> <el-card
class="box-card"
style="margin: 10px"
v-for="(item, key) in dataLists"
:key="key"
>
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>{{item.title}}</span> <span>{{ item.title }}</span>
</div> </div>
</template> </template>
<Selector <Selector
@ -17,7 +22,7 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import Selector from "/@/components/ReSelector"; import Selector from "/@/components/ReSelector";
@ -38,7 +43,7 @@ export default {
} }
]); ]);
const selectedVal = ({ left, right, whole }) => { const selectedVal = ({ left, right }) => {
selectRange.value = `${left}-${right}`; selectRange.value = `${left}-${right}`;
}; };

View File

@ -2,32 +2,31 @@
<div id="mse"></div> <div id="mse"></div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { onMounted } from "vue"; import { onMounted } from "vue";
import Player from "xgplayer/dist/simple_player"; import Player from "xgplayer/dist/simple_player";
import volume from 'xgplayer/dist/controls/volume'; import volume from "xgplayer/dist/controls/volume";
import playbackRate from 'xgplayer/dist/controls/playbackRate'; import playbackRate from "xgplayer/dist/controls/playbackRate";
import screenShot from 'xgplayer/dist/controls/screenShot'; import screenShot from "xgplayer/dist/controls/screenShot";
import { deviceDetection } from "/@/utils/deviceDetection" import { deviceDetection } from "/@/utils/deviceDetection";
export default { export default {
setup() { setup() {
onMounted(() => { onMounted(() => {
let player = new Player({ new Player({
id: "mse", id: "mse",
autoplay: false, autoplay: false,
screenShot: true, screenShot: true,
url: url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
"https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
poster: poster:
"https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg", "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
fluid: deviceDetection() ? true : false, fluid: deviceDetection(),
controlPlugins: [volume, playbackRate, screenShot], controlPlugins: [volume, playbackRate, screenShot],
playbackRate: [0.5, 0.75, 1, 1.5, 2], // playbackRate: [0.5, 0.75, 1, 1.5, 2] //
}); });
}); });
return {}; return {};
}, }
}; };
</script> </script>

View File

@ -6,39 +6,39 @@
</template> </template>
<script> <script>
import { onMounted, onBeforeUnmount, ref, reactive } from 'vue' import { onMounted, onBeforeUnmount, ref, reactive } from "vue";
import WangEditor from 'wangeditor' import WangEditor from "wangeditor";
export default { export default {
name: 'editor', name: "editor",
setup() { setup() {
const editor = ref() const editor = ref();
const content = reactive({ const content = reactive({
html: '', html: "",
text: '', text: ""
}) });
let instance let instance;
onMounted(() => { onMounted(() => {
instance = new WangEditor(editor.value) instance = new WangEditor(editor.value);
Object.assign(instance.config, { Object.assign(instance.config, {
onchange() { onchange() {
content.html = instance.txt.html() content.html = instance.txt.html();
}, }
}) });
instance.create() instance.create();
}) });
onBeforeUnmount(() => { onBeforeUnmount(() => {
instance.destroy() instance.destroy();
instance = null instance = null;
}) });
return { return {
editor, editor,
content, content
} };
}, }
}; };
</script> </script>
@ -50,4 +50,4 @@ export default {
z-index: 999 !important; z-index: 999 !important;
position: static; position: static;
} }
</style> </style>

View File

@ -18,17 +18,17 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import imgs from '/@/assets/401.gif' import imgs from "/@/assets/401.gif";
import { ref } from "vue" import { ref } from "vue";
export default { export default {
name: "401", name: "401",
setup() { setup() {
const img = ref(`${imgs}?${new Date()}`) const img = ref(`${imgs}?${new Date()}`);
return { return {
img img
}; };
}, }
}; };
</script> </script>

View File

@ -34,9 +34,9 @@ export default {
return { return {
message, message,
four, four,
four_cloud, four_cloud
}; };
}, }
}; };
</script> </script>

View File

@ -1,7 +1,13 @@
<template> <template>
<div class="logic-flow-view"> <div class="logic-flow-view">
<!-- 辅助工具栏 --> <!-- 辅助工具栏 -->
<Control class="demo-control" v-if="lf" :lf="lf" :catTurboData="false" @catData="catData"></Control> <Control
class="demo-control"
v-if="lf"
:lf="lf"
:catTurboData="false"
@catData="catData"
></Control>
<!-- 节点面板 --> <!-- 节点面板 -->
<NodePanel :lf="lf" :nodeList="nodeList"></NodePanel> <NodePanel :lf="lf" :nodeList="nodeList"></NodePanel>
<!-- 画布 --> <!-- 画布 -->
@ -13,23 +19,21 @@
</div> </div>
</template> </template>
<script lang='ts'> <script lang="ts">
import { ref, unref, onMounted, nextTick } from "vue"; import { ref, unref, onMounted } from "vue";
import LogicFlow from "@logicflow/core"; import LogicFlow from "@logicflow/core";
import { Snapshot, BpmnElement, Menu } from "@logicflow/extension"; import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css"; import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css"; import "@logicflow/extension/lib/style/index.css";
import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart"; import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart";
import { import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
toTurboData,
toLogicflowData
} from "/@/components/ReFlowChart/src/adpterForTurbo";
import { BpmnNode } from "/@/components/ReFlowChart/src/config"; import { BpmnNode } from "/@/components/ReFlowChart/src/config";
import demoData from "./dataTurbo.json"; import demoData from "./dataTurbo.json";
export default { export default {
components: { NodePanel, Control, DataDialog }, components: { NodePanel, Control, DataDialog },
setup() { setup() {
// eslint-disable-next-line no-undef
let lf = ref<ElRef>(null); let lf = ref<ElRef>(null);
let graphData = ref(null); let graphData = ref(null);
let dataVisible = ref(false); let dataVisible = ref(false);
@ -124,4 +128,3 @@ export default {
z-index: 3; z-index: 3;
} }
</style> </style>

View File

@ -1,6 +1,10 @@
<template> <template>
<div class="login"> <div class="login">
<info :ruleForm="contextInfo" @on-behavior="onLogin" @refreshVerify="refreshVerify" /> <info
:ruleForm="contextInfo"
@on-behavior="onLogin"
@refreshVerify="refreshVerify"
/>
</div> </div>
</template> </template>

Some files were not shown because too many files have changed in this diff Show More