mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
style: format code for all
This commit is contained in:
LZHD
踏学吾痕
parent
e1200f2dbe
commit
77a1a47110
41
.eslintrc.js
41
.eslintrc.js
@ -4,13 +4,42 @@ module.exports = {
|
||||
node: true
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/typescript/recommended',
|
||||
'@vue/prettier',
|
||||
'@vue/prettier/@typescript-eslint'
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/typescript/recommended",
|
||||
"@vue/prettier",
|
||||
"@vue/prettier/@typescript-eslint"
|
||||
],
|
||||
parser: "vue-eslint-parser",
|
||||
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: "^_"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
module.exports = {
|
||||
bracketSpacing: true,
|
||||
jsxBracketSameLine: true,
|
||||
singleQuote: true,
|
||||
singleQuote: false,
|
||||
arrowParens: 'avoid',
|
||||
trailingComma: 'all'
|
||||
trailingComma: 'none'
|
||||
};
|
||||
|
||||
5676
package-lock.json
generated
5676
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
|
||||
import { http } from "../utils/http"
|
||||
import { http } from "../utils/http";
|
||||
|
||||
// 地图数据
|
||||
export const mapJson = (data?: object): any => {
|
||||
return http.request("get", "/getMapInfo", data)
|
||||
}
|
||||
return http.request("get", "/getMapInfo", data);
|
||||
};
|
||||
|
||||
// echarts数据
|
||||
export const echartsJson = (data?: object): any => {
|
||||
return http.request("get", "/getEchartsInfo", data)
|
||||
}
|
||||
return http.request("get", "/getEchartsInfo", data);
|
||||
};
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import { http } from "../utils/http"
|
||||
import { http } from "../utils/http";
|
||||
|
||||
// 获取验证码
|
||||
export const getVerify = (): any => {
|
||||
return http.request("get", "/captcha")
|
||||
}
|
||||
return http.request("get", "/captcha");
|
||||
};
|
||||
|
||||
// 登录
|
||||
export const getLogin = (data: object): any => {
|
||||
return http.request("post", "/login", data)
|
||||
}
|
||||
return http.request("post", "/login", data);
|
||||
};
|
||||
|
||||
// 注册
|
||||
export const getRegist = (data: object): any => {
|
||||
return http.request("post", "/register", data)
|
||||
}
|
||||
return http.request("post", "/register", data);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -4,7 +4,7 @@ import reBreadCrumb from "./src/index.vue";
|
||||
export const ReBreadCrumb = Object.assign(reBreadCrumb, {
|
||||
install(app: App) {
|
||||
app.component(reBreadCrumb.name, reBreadCrumb);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default ReBreadCrumb;
|
||||
|
||||
@ -5,11 +5,10 @@
|
||||
<span
|
||||
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
|
||||
class="no-redirect"
|
||||
>{{ $t(item.meta.title) }}</span>
|
||||
>{{ $t(item.meta.title) }}</span
|
||||
>
|
||||
<a v-else @click.prevent="handleLink(item)">
|
||||
{{
|
||||
$t(item.meta.title)
|
||||
}}
|
||||
{{ $t(item.meta.title) }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
@ -17,7 +16,6 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { pathToRegexp } from "path-to-regexp";
|
||||
import { ref, defineComponent, watch, Ref } from "vue";
|
||||
import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
|
||||
|
||||
@ -28,7 +26,7 @@ export default defineComponent({
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const isDashboard = (route: RouteLocationMatched): Boolean | string => {
|
||||
const isDashboard = (route: RouteLocationMatched): boolean | string => {
|
||||
const name = route && (route.name as string);
|
||||
if (!name) {
|
||||
return false;
|
||||
@ -41,10 +39,10 @@ export default defineComponent({
|
||||
const first = matched[0];
|
||||
if (!isDashboard(first)) {
|
||||
matched = [
|
||||
({
|
||||
{
|
||||
path: "/welcome",
|
||||
meta: { title: "message.hshome" }
|
||||
} as unknown) as RouteLocationMatched
|
||||
} as unknown as RouteLocationMatched
|
||||
].concat(matched);
|
||||
}
|
||||
levelList.value = matched.filter(
|
||||
@ -73,7 +71,7 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped >
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
|
||||
@ -4,7 +4,7 @@ import reCountTo from "./src";
|
||||
export const ReCountTo = Object.assign(reCountTo, {
|
||||
install(app: App) {
|
||||
app.component(reCountTo.name, reCountTo);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default ReCountTo;
|
||||
|
||||
@ -4,7 +4,7 @@ import {
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
unref,
|
||||
unref
|
||||
} from "vue";
|
||||
import { countToProps } from "./props";
|
||||
import { isNumber } from "/@/utils/is";
|
||||
@ -37,7 +37,7 @@ export default defineComponent({
|
||||
remaining: null,
|
||||
rAF: null,
|
||||
color: null,
|
||||
fontSize: "16px",
|
||||
fontSize: "16px"
|
||||
});
|
||||
|
||||
const getCountDown = computed(() => {
|
||||
@ -61,6 +61,7 @@ export default defineComponent({
|
||||
state.rAF = requestAnimationFrame(count);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
function pauseResume() {
|
||||
if (state.paused) {
|
||||
resume();
|
||||
@ -82,6 +83,7 @@ export default defineComponent({
|
||||
requestAnimationFrame(count);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
function reset() {
|
||||
state.startTime = null;
|
||||
cancelAnimationFrame(state.rAF);
|
||||
@ -166,12 +168,11 @@ export default defineComponent({
|
||||
<span
|
||||
style={{
|
||||
color: props.color,
|
||||
fontSize: props.fontSize,
|
||||
}}
|
||||
>
|
||||
fontSize: props.fontSize
|
||||
}}>
|
||||
{state.displayValue}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -11,7 +11,7 @@ export const countToProps = {
|
||||
default: 0,
|
||||
validator(value: number) {
|
||||
return value >= 0;
|
||||
},
|
||||
}
|
||||
},
|
||||
color: propTypes.string.def(),
|
||||
fontSize: propTypes.string.def(),
|
||||
@ -26,6 +26,6 @@ export const countToProps = {
|
||||
>,
|
||||
default(t: number, b: number, c: number, d: number) {
|
||||
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ import reCropper from "./src";
|
||||
export const ReCropper = Object.assign(reCropper, {
|
||||
install(app: App) {
|
||||
app.component(reCropper.name, reCropper);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default ReCropper;
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
ref,
|
||||
unref,
|
||||
computed,
|
||||
PropType,
|
||||
PropType
|
||||
} from "vue";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import { useAttrs } from "/@/utils/useAttrs";
|
||||
@ -37,7 +37,7 @@ const defaultOptions: Cropper.Options = {
|
||||
modal: true,
|
||||
guides: true,
|
||||
movable: true,
|
||||
rotatable: true,
|
||||
rotatable: true
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
@ -45,31 +45,35 @@ export default defineComponent({
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
alt: {
|
||||
type: String,
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
default: ""
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: "360px",
|
||||
default: "360px"
|
||||
},
|
||||
crossorigin: {
|
||||
type: String || Object,
|
||||
default: undefined,
|
||||
default: undefined
|
||||
},
|
||||
imageStyle: {
|
||||
type: Object as PropType<CSSProperties>,
|
||||
default: {},
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
options: {
|
||||
type: Object as PropType<Options>,
|
||||
default: {},
|
||||
},
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const cropper: any = ref<Nullable<Cropper>>(null);
|
||||
@ -77,26 +81,22 @@ export default defineComponent({
|
||||
|
||||
const isReady = ref(false);
|
||||
|
||||
const getImageStyle = computed(
|
||||
(): CSSProperties => {
|
||||
return {
|
||||
height: props.height,
|
||||
width: props.width,
|
||||
maxWidth: "100%",
|
||||
...props.imageStyle,
|
||||
};
|
||||
}
|
||||
);
|
||||
const getImageStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
height: props.height,
|
||||
width: props.width,
|
||||
maxWidth: "100%",
|
||||
...props.imageStyle
|
||||
};
|
||||
});
|
||||
|
||||
const getWrapperStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const { height, width } = props;
|
||||
return {
|
||||
width: `${width}`.replace(/px/, "") + "px",
|
||||
height: `${height}`.replace(/px/, "") + "px",
|
||||
};
|
||||
}
|
||||
);
|
||||
const getWrapperStyle = computed((): CSSProperties => {
|
||||
const { height, width } = props;
|
||||
return {
|
||||
width: `${width}`.replace(/px/, "") + "px",
|
||||
height: `${height}`.replace(/px/, "") + "px"
|
||||
};
|
||||
});
|
||||
|
||||
function init() {
|
||||
const imgEl = unref(imgElRef);
|
||||
@ -108,7 +108,7 @@ export default defineComponent({
|
||||
ready: () => {
|
||||
isReady.value = true;
|
||||
},
|
||||
...props.options,
|
||||
...props.options
|
||||
});
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@ export default defineComponent({
|
||||
imgElRef,
|
||||
cropper,
|
||||
getWrapperStyle,
|
||||
getImageStyle,
|
||||
getImageStyle
|
||||
};
|
||||
},
|
||||
|
||||
@ -132,8 +132,7 @@ export default defineComponent({
|
||||
<>
|
||||
<div
|
||||
class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })}
|
||||
style={this.getWrapperStyle}
|
||||
>
|
||||
style={this.getWrapperStyle}>
|
||||
<img
|
||||
ref="imgElRef"
|
||||
src={this.props.src}
|
||||
@ -144,5 +143,5 @@ export default defineComponent({
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -4,7 +4,7 @@ import reFlop from "./src/index.vue";
|
||||
export const ReFlop = Object.assign(reFlop, {
|
||||
install(app: App) {
|
||||
app.component(reFlop.name, reFlop);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default ReFlop;
|
||||
|
||||
@ -13,14 +13,15 @@ export default defineComponent({
|
||||
backText: propTypes.number.def(1),
|
||||
// flipping duration, please be consistent with the CSS animation-duration value.
|
||||
// 翻牌动画时间，与CSS中设置的animation-duration保持一致
|
||||
duration: propTypes.number.def(600),
|
||||
duration: propTypes.number.def(600)
|
||||
},
|
||||
setup(props) {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const { frontText, backText, duration } = props;
|
||||
let isFlipping = ref(false);
|
||||
let flipType = ref("down");
|
||||
let frontTextFromData = ref(frontText);
|
||||
let backTextFromData = ref(backText);
|
||||
const isFlipping = ref(false);
|
||||
const flipType = ref("down");
|
||||
const frontTextFromData = ref(frontText);
|
||||
const backTextFromData = ref(backText);
|
||||
|
||||
const textClass = (number: number) => {
|
||||
return "number" + number;
|
||||
@ -72,24 +73,19 @@ export default defineComponent({
|
||||
flipDown,
|
||||
flipUp,
|
||||
setFront,
|
||||
setBack,
|
||||
setBack
|
||||
};
|
||||
},
|
||||
|
||||
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 (
|
||||
<>
|
||||
<div
|
||||
class={`m-flipper ${this.flipType} ${this.isFlipping ? "go" : ""}`}
|
||||
>
|
||||
<div
|
||||
class={`digital front ${this.textClass(this.frontTextFromData)}`}
|
||||
></div>
|
||||
<div
|
||||
class={`digital back ${this.textClass(this.backTextFromData)}`}
|
||||
></div>
|
||||
</div>
|
||||
</>
|
||||
<div class={main}>
|
||||
<div class={front} />
|
||||
<div class={back} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -11,8 +11,14 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { ref, onBeforeMount, getCurrentInstance, nextTick } from "vue";
|
||||
<script lang="ts">
|
||||
import {
|
||||
ref,
|
||||
onBeforeMount,
|
||||
getCurrentInstance,
|
||||
nextTick,
|
||||
onUnmounted
|
||||
} from "vue";
|
||||
import flippers from "./Filpper";
|
||||
export default {
|
||||
name: "Flop",
|
||||
@ -110,6 +116,13 @@ export default {
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
timer,
|
||||
flipObjs,
|
||||
|
||||
@ -6,17 +6,17 @@ import dataDialog from "./src/DataDialog.vue";
|
||||
export const Control = Object.assign(control, {
|
||||
install(app: App) {
|
||||
app.component(control.name, control);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export const NodePanel = Object.assign(nodePanel, {
|
||||
install(app: App) {
|
||||
app.component(nodePanel.name, nodePanel);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export const DataDialog = Object.assign(dataDialog, {
|
||||
install(app: App) {
|
||||
app.component(dataDialog.name, dataDialog);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -3,18 +3,20 @@
|
||||
<!-- 功能按钮 -->
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item,key) in titleLists"
|
||||
v-for="(item, key) in titleLists"
|
||||
:key="key"
|
||||
:title="item.text"
|
||||
:style="{background: focusIndex === key ? '#ccc' : ''}"
|
||||
:style="{ background: focusIndex === key ? '#ccc' : '' }"
|
||||
@mouseenter.prevent="onEnter(key)"
|
||||
@mouseleave.prevent="focusIndex = -1"
|
||||
>
|
||||
<button
|
||||
:ref="'controlButton' + key"
|
||||
:disabled="item.disabled"
|
||||
:style="{cursor: item.disabled === false ? 'pointer' : 'not-allowed'}"
|
||||
@click="onControl(item,key)"
|
||||
:style="{
|
||||
cursor: item.disabled === false ? 'pointer' : 'not-allowed'
|
||||
}"
|
||||
@click="onControl(item, key)"
|
||||
>
|
||||
<span :class="'iconfont ' + item.icon"></span>
|
||||
<p>{{ item.text }}</p>
|
||||
@ -24,14 +26,14 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { defineComponent, ref, unref, onMounted, onUnmounted } from "vue";
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, unref, onMounted } from "vue";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Control",
|
||||
props: {
|
||||
lf: <ElRef>Object,
|
||||
lf: null,
|
||||
catTurboData: Boolean
|
||||
},
|
||||
emits: ["catData"],
|
||||
@ -107,12 +109,10 @@ export default defineComponent({
|
||||
|
||||
onMounted(() => {
|
||||
props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
|
||||
unref(titleLists)[3].disabled = unref(
|
||||
controlButton3
|
||||
).disabled = !undoAble;
|
||||
unref(titleLists)[4].disabled = unref(
|
||||
controlButton4
|
||||
).disabled = !redoAble;
|
||||
unref(titleLists)[3].disabled = unref(controlButton3).disabled =
|
||||
!undoAble;
|
||||
unref(titleLists)[4].disabled = unref(controlButton4).disabled =
|
||||
!redoAble;
|
||||
});
|
||||
});
|
||||
|
||||
@ -126,14 +126,13 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
@import "./assets/iconfont/iconfont.css";
|
||||
.control-container {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
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 {
|
||||
font-size: 25px;
|
||||
@ -157,4 +156,4 @@ export default defineComponent({
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
<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>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import VueJsonPretty from "vue-json-pretty";
|
||||
import "vue-json-pretty/lib/styles.css";
|
||||
import { defineComponent } from "vue";
|
||||
@ -15,4 +20,4 @@ export default defineComponent({
|
||||
VueJsonPretty
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -8,14 +8,17 @@
|
||||
@mousedown="nodeDragNode(item)"
|
||||
>
|
||||
<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>
|
||||
<span class="node-label">{{item.text}}</span>
|
||||
<span class="node-label">{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, unref } from "vue";
|
||||
export default defineComponent({
|
||||
name: "NodePanel",
|
||||
@ -52,7 +55,6 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.node-panel {
|
||||
position: absolute;
|
||||
|
||||
@ -1,34 +1,33 @@
|
||||
|
||||
const TurboType = {
|
||||
SEQUENCE_FLOW: 1,
|
||||
START_EVENT: 2,
|
||||
END_EVENT: 3,
|
||||
USER_TASK: 4,
|
||||
SERVICE_TASK: 5,
|
||||
EXCLUSIVE_GATEWAY: 6,
|
||||
}
|
||||
EXCLUSIVE_GATEWAY: 6
|
||||
};
|
||||
|
||||
function getTurboType(type) {
|
||||
switch (type) {
|
||||
case 'bpmn:sequenceFlow':
|
||||
return TurboType.SEQUENCE_FLOW
|
||||
case 'bpmn:startEvent':
|
||||
return TurboType.START_EVENT
|
||||
case 'bpmn:endEvent':
|
||||
return TurboType.END_EVENT
|
||||
case 'bpmn:userTask':
|
||||
return TurboType.USER_TASK
|
||||
case 'bpmn:serviceTask':
|
||||
return TurboType.SERVICE_TASK
|
||||
case 'bpmn:exclusiveGateway':
|
||||
return TurboType.EXCLUSIVE_GATEWAY
|
||||
case "bpmn:sequenceFlow":
|
||||
return TurboType.SEQUENCE_FLOW;
|
||||
case "bpmn:startEvent":
|
||||
return TurboType.START_EVENT;
|
||||
case "bpmn:endEvent":
|
||||
return TurboType.END_EVENT;
|
||||
case "bpmn:userTask":
|
||||
return TurboType.USER_TASK;
|
||||
case "bpmn:serviceTask":
|
||||
return TurboType.SERVICE_TASK;
|
||||
case "bpmn:exclusiveGateway":
|
||||
return TurboType.EXCLUSIVE_GATEWAY;
|
||||
default:
|
||||
return type
|
||||
return type;
|
||||
}
|
||||
}
|
||||
|
||||
function convertNodeToTurboElement(node) {
|
||||
const { id, type, x, y, text = '', properties } = node
|
||||
const { id, type, x, y, text = "", properties } = node;
|
||||
return {
|
||||
incoming: [],
|
||||
outgoing: [],
|
||||
@ -36,14 +35,14 @@ function convertNodeToTurboElement(node) {
|
||||
type: getTurboType(node.type),
|
||||
properties: {
|
||||
...properties,
|
||||
name: text && text.value || '',
|
||||
name: (text && text.value) || "",
|
||||
x: x,
|
||||
y: y,
|
||||
text,
|
||||
logicFlowType: type,
|
||||
logicFlowType: type
|
||||
},
|
||||
key: id,
|
||||
}
|
||||
key: id
|
||||
};
|
||||
}
|
||||
|
||||
function convertEdgeToTurboElement(edge) {
|
||||
@ -55,8 +54,9 @@ function convertEdgeToTurboElement(edge) {
|
||||
startPoint,
|
||||
endPoint,
|
||||
pointsList,
|
||||
text = '',
|
||||
properties } = edge
|
||||
text = "",
|
||||
properties
|
||||
} = edge;
|
||||
return {
|
||||
incoming: [sourceNodeId],
|
||||
outgoing: [targetNodeId],
|
||||
@ -64,48 +64,41 @@ function convertEdgeToTurboElement(edge) {
|
||||
dockers: [],
|
||||
properties: {
|
||||
...properties,
|
||||
name: text && text.value || '',
|
||||
name: (text && text.value) || "",
|
||||
text,
|
||||
startPoint,
|
||||
endPoint,
|
||||
pointsList,
|
||||
logicFlowType: type,
|
||||
logicFlowType: type
|
||||
},
|
||||
key: id,
|
||||
}
|
||||
key: id
|
||||
};
|
||||
}
|
||||
|
||||
export function toTurboData(data) {
|
||||
const nodeMap = new Map()
|
||||
const nodeMap = new Map();
|
||||
const turboData = {
|
||||
flowElementList: [],
|
||||
}
|
||||
data.nodes.forEach((node) => {
|
||||
const flowElement = convertNodeToTurboElement(node)
|
||||
turboData.flowElementList.push(flowElement)
|
||||
nodeMap.set(node.id, flowElement)
|
||||
})
|
||||
data.edges.forEach((edge) => {
|
||||
const flowElement = convertEdgeToTurboElement(edge)
|
||||
const sourceElement = nodeMap.get(edge.sourceNodeId)
|
||||
sourceElement.outgoing.push(flowElement.key)
|
||||
const targetElement = nodeMap.get(edge.targetNodeId)
|
||||
targetElement.incoming.push(flowElement.key)
|
||||
turboData.flowElementList.push(flowElement)
|
||||
})
|
||||
return turboData
|
||||
flowElementList: []
|
||||
};
|
||||
data.nodes.forEach(node => {
|
||||
const flowElement = convertNodeToTurboElement(node);
|
||||
turboData.flowElementList.push(flowElement);
|
||||
nodeMap.set(node.id, flowElement);
|
||||
});
|
||||
data.edges.forEach(edge => {
|
||||
const flowElement = convertEdgeToTurboElement(edge);
|
||||
const sourceElement = nodeMap.get(edge.sourceNodeId);
|
||||
sourceElement.outgoing.push(flowElement.key);
|
||||
const targetElement = nodeMap.get(edge.targetNodeId);
|
||||
targetElement.incoming.push(flowElement.key);
|
||||
turboData.flowElementList.push(flowElement);
|
||||
});
|
||||
return turboData;
|
||||
}
|
||||
|
||||
|
||||
function convertFlowElementToEdge(element) {
|
||||
const { incoming, outgoing, properties, key } = element
|
||||
const {
|
||||
text,
|
||||
startPoint,
|
||||
endPoint,
|
||||
pointsList,
|
||||
logicFlowType
|
||||
} = properties
|
||||
const { incoming, outgoing, properties, key } = element;
|
||||
const { text, startPoint, endPoint, pointsList, logicFlowType } = properties;
|
||||
const edge = {
|
||||
id: key,
|
||||
type: logicFlowType,
|
||||
@ -116,19 +109,25 @@ function convertFlowElementToEdge(element) {
|
||||
endPoint,
|
||||
pointsList,
|
||||
properties: {}
|
||||
}
|
||||
const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType']
|
||||
};
|
||||
const excludeProperties = [
|
||||
"startPoint",
|
||||
"endPoint",
|
||||
"pointsList",
|
||||
"text",
|
||||
"logicFlowType"
|
||||
];
|
||||
Object.keys(element.properties).forEach(property => {
|
||||
if (excludeProperties.indexOf(property) === -1) {
|
||||
edge.properties[property] = element.properties[property]
|
||||
edge.properties[property] = element.properties[property];
|
||||
}
|
||||
})
|
||||
return edge
|
||||
});
|
||||
return edge;
|
||||
}
|
||||
|
||||
function convertFlowElementToNode(element) {
|
||||
const { properties, key } = element
|
||||
const { x, y, text, logicFlowType } = properties
|
||||
const { properties, key } = element;
|
||||
const { x, y, text, logicFlowType } = properties;
|
||||
const node = {
|
||||
id: key,
|
||||
type: logicFlowType,
|
||||
@ -136,31 +135,32 @@ function convertFlowElementToNode(element) {
|
||||
y,
|
||||
text,
|
||||
properties: {}
|
||||
}
|
||||
const excludeProperties = ['x', 'y', 'text', 'logicFlowType']
|
||||
};
|
||||
const excludeProperties = ["x", "y", "text", "logicFlowType"];
|
||||
Object.keys(element.properties).forEach(property => {
|
||||
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) {
|
||||
const lfData = {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
}
|
||||
const list = data.flowElementList
|
||||
list && list.length > 0 && list.forEach(element => {
|
||||
if (element.type === TurboType.SEQUENCE_FLOW) {
|
||||
const edge = convertFlowElementToEdge(element)
|
||||
lfData.edges.push(edge)
|
||||
} else {
|
||||
const node = convertFlowElementToNode(element)
|
||||
lfData.nodes.push(node)
|
||||
}
|
||||
})
|
||||
return lfData
|
||||
}
|
||||
edges: []
|
||||
};
|
||||
const list = data.flowElementList;
|
||||
list &&
|
||||
list.length > 0 &&
|
||||
list.forEach(element => {
|
||||
if (element.type === TurboType.SEQUENCE_FLOW) {
|
||||
const edge = convertFlowElementToEdge(element);
|
||||
lfData.edges.push(edge);
|
||||
} else {
|
||||
const node = convertFlowElementToNode(element);
|
||||
lfData.nodes.push(node);
|
||||
}
|
||||
});
|
||||
return lfData;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,55 +1,55 @@
|
||||
export const nodeList = [
|
||||
{
|
||||
text: '开始',
|
||||
type: 'start',
|
||||
class: 'node-start'
|
||||
text: "开始",
|
||||
type: "start",
|
||||
class: "node-start"
|
||||
},
|
||||
{
|
||||
text: '矩形',
|
||||
type: 'rect',
|
||||
class: 'node-rect'
|
||||
text: "矩形",
|
||||
type: "rect",
|
||||
class: "node-rect"
|
||||
},
|
||||
{
|
||||
type: 'user',
|
||||
text: '用户',
|
||||
class: 'node-user'
|
||||
type: "user",
|
||||
text: "用户",
|
||||
class: "node-user"
|
||||
},
|
||||
{
|
||||
type: 'push',
|
||||
text: '推送',
|
||||
class: 'node-push'
|
||||
type: "push",
|
||||
text: "推送",
|
||||
class: "node-push"
|
||||
},
|
||||
{
|
||||
type: 'download',
|
||||
text: '位置',
|
||||
class: 'node-download'
|
||||
type: "download",
|
||||
text: "位置",
|
||||
class: "node-download"
|
||||
},
|
||||
{
|
||||
type: 'end',
|
||||
text: '结束',
|
||||
class: 'node-end'
|
||||
},
|
||||
]
|
||||
type: "end",
|
||||
text: "结束",
|
||||
class: "node-end"
|
||||
}
|
||||
];
|
||||
|
||||
export const BpmnNode = [
|
||||
{
|
||||
type: 'bpmn:startEvent',
|
||||
text: '开始',
|
||||
class: 'bpmn-start'
|
||||
type: "bpmn:startEvent",
|
||||
text: "开始",
|
||||
class: "bpmn-start"
|
||||
},
|
||||
{
|
||||
type: 'bpmn:endEvent',
|
||||
text: '结束',
|
||||
class: 'bpmn-end'
|
||||
type: "bpmn:endEvent",
|
||||
text: "结束",
|
||||
class: "bpmn-end"
|
||||
},
|
||||
{
|
||||
type: 'bpmn:exclusiveGateway',
|
||||
text: '网关',
|
||||
class: 'bpmn-exclusiveGateway'
|
||||
type: "bpmn:exclusiveGateway",
|
||||
text: "网关",
|
||||
class: "bpmn-exclusiveGateway"
|
||||
},
|
||||
{
|
||||
type: 'bpmn:userTask',
|
||||
text: '用户',
|
||||
class: 'bpmn-user'
|
||||
},
|
||||
]
|
||||
type: "bpmn:userTask",
|
||||
text: "用户",
|
||||
class: "bpmn-user"
|
||||
}
|
||||
];
|
||||
|
||||
@ -4,7 +4,7 @@ import reHamBurger from "./src/index.vue";
|
||||
export const ReHamBurger = Object.assign(reHamBurger, {
|
||||
install(app: App) {
|
||||
app.component(reHamBurger.name, reHamBurger);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default ReHamBurger;
|
||||
|
||||
@ -16,23 +16,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue"
|
||||
import { defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
name: "HamBurger",
|
||||
props: {
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ["toggleClick"],
|
||||
setup(props, ctx) {
|
||||
const toggleClick = () => {
|
||||
ctx.emit("toggleClick")
|
||||
}
|
||||
ctx.emit("toggleClick");
|
||||
};
|
||||
|
||||
return { toggleClick }
|
||||
},
|
||||
return { toggleClick };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<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-input
|
||||
clearable
|
||||
v-model="ruleForm.userName"
|
||||
v-model="model.userName"
|
||||
placeholder="请输入用户名"
|
||||
prefix-icon="el-icon-user"
|
||||
></el-input>
|
||||
@ -14,7 +14,7 @@
|
||||
clearable
|
||||
type="password"
|
||||
show-password
|
||||
v-model="ruleForm.passWord"
|
||||
v-model="model.passWord"
|
||||
placeholder="请输入密码"
|
||||
prefix-icon="el-icon-lock"
|
||||
></el-input>
|
||||
@ -23,22 +23,31 @@
|
||||
<el-input
|
||||
maxlength="2"
|
||||
onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
|
||||
v-model.number="ruleForm.verify"
|
||||
v-model.number="model.verify"
|
||||
placeholder="请输入验证码"
|
||||
></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-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>
|
||||
<span class="tips" @click="changPage">{{ tips }}</span>
|
||||
</el-form-item>
|
||||
<span title="测试用户 直接登录" class="secret" @click="noSecret">免密登录</span>
|
||||
<span title="测试用户 直接登录" class="secret" @click="noSecret"
|
||||
>免密登录</span
|
||||
>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import {
|
||||
ref,
|
||||
defineComponent,
|
||||
@ -46,7 +55,8 @@ import {
|
||||
onBeforeMount,
|
||||
getCurrentInstance,
|
||||
watch,
|
||||
nextTick
|
||||
nextTick,
|
||||
toRef
|
||||
} from "vue";
|
||||
import { storageSession } from "/@/utils/storage";
|
||||
|
||||
@ -59,7 +69,7 @@ export interface ContextProps {
|
||||
dynamicText?: string;
|
||||
}
|
||||
|
||||
import { useRouter, useRoute, Router } from "vue-router";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
import { initRouter } from "/@/router";
|
||||
|
||||
@ -75,6 +85,7 @@ export default defineComponent({
|
||||
setup(props, ctx) {
|
||||
let vm: any;
|
||||
|
||||
const model = toRef(props, "ruleForm");
|
||||
let tips = ref("注册");
|
||||
let tipsFalse = ref("登录");
|
||||
|
||||
@ -83,7 +94,7 @@ export default defineComponent({
|
||||
|
||||
watch(
|
||||
route,
|
||||
async ({ path }, prevRoute: unknown): Promise<void> => {
|
||||
async ({ path }): Promise<void> => {
|
||||
await nextTick();
|
||||
path.includes("register")
|
||||
? (tips.value = "登录") && (tipsFalse.value = "注册")
|
||||
@ -106,7 +117,7 @@ export default defineComponent({
|
||||
|
||||
// 点击登录或注册
|
||||
const onBehavior = (evt: Object): void => {
|
||||
vm.refs.ruleForm.validate((valid: Boolean) => {
|
||||
vm.refs.ruleForm.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
ctx.emit("onBehavior", evt);
|
||||
} else {
|
||||
@ -135,7 +146,7 @@ export default defineComponent({
|
||||
username: "admin",
|
||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
|
||||
});
|
||||
initRouter("admin").then((router: Router) => {});
|
||||
initRouter("admin").then(() => {});
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
@ -144,6 +155,7 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
return {
|
||||
model,
|
||||
rules,
|
||||
tips,
|
||||
tipsFalse,
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
import { App } from "vue"
|
||||
import amap from "./src/Amap.vue"
|
||||
import baiduMap from "./src/BaiduMap.vue"
|
||||
import { App } from "vue";
|
||||
import amap from "./src/Amap.vue";
|
||||
import baiduMap from "./src/BaiduMap.vue";
|
||||
|
||||
export const Amap = Object.assign(amap, {
|
||||
install(app: App) {
|
||||
app.component(amap.name, amap)
|
||||
app.component(amap.name, amap);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
export const BaiduMap = Object.assign(baiduMap, {
|
||||
install(app: App) {
|
||||
app.component(baiduMap.name, baiduMap)
|
||||
app.component(baiduMap.name, baiduMap);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
export default {
|
||||
Amap,
|
||||
BaiduMap
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,20 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "BaiduMap",
|
||||
setup(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
setup() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -4,7 +4,7 @@ import reSeamlessScroll from "./src/index.vue";
|
||||
export const ReSeamlessScroll = Object.assign(reSeamlessScroll, {
|
||||
install(app: App) {
|
||||
app.component(reSeamlessScroll.name, reSeamlessScroll);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default ReSeamlessScroll;
|
||||
|
||||
@ -1,13 +1,23 @@
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<div
|
||||
:ref="'realBox'+ classOption['key']"
|
||||
:ref="'realBox' + classOption['key']"
|
||||
:style="pos"
|
||||
@mouseenter="enter"
|
||||
@mouseleave="leave"
|
||||
@ -16,7 +26,7 @@
|
||||
@touchend="touchEnd"
|
||||
@mousewheel="wheel"
|
||||
>
|
||||
<div :ref="'slotList'+ classOption['key']" :style="float">
|
||||
<div :ref="'slotList' + classOption['key']" :style="float">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-html="copyHtml" :style="float"></div>
|
||||
@ -24,15 +34,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import {
|
||||
defineComponent,
|
||||
computed,
|
||||
ref,
|
||||
unref,
|
||||
watchEffect,
|
||||
nextTick
|
||||
} from "vue";
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref, unref, nextTick } from "vue";
|
||||
import {
|
||||
tryOnMounted,
|
||||
tryOnUnmounted,
|
||||
@ -85,7 +88,8 @@ export default defineComponent({
|
||||
let isHover = false;
|
||||
let ease = "ease-in";
|
||||
|
||||
let { data, classOption } = props;
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
let { classOption } = props;
|
||||
|
||||
if (classOption["key"] === undefined) {
|
||||
classOption["key"] = 0;
|
||||
@ -165,8 +169,9 @@ export default defineComponent({
|
||||
let rightSwitch = computed(() => {
|
||||
return {
|
||||
position: "absolute",
|
||||
margin: `${unref(height) / 2}px 0 0 ${unref(width) +
|
||||
unref(options).switchOffset}px`,
|
||||
margin: `${unref(height) / 2}px 0 0 ${
|
||||
unref(width) + unref(options).switchOffset
|
||||
}px`,
|
||||
transform: "translateY(-50%)"
|
||||
};
|
||||
});
|
||||
@ -372,7 +377,7 @@ export default defineComponent({
|
||||
if (isHover) return;
|
||||
//进入move立即先清除动画 防止频繁touchMove导致多动画同时进行
|
||||
// scrollCancle();
|
||||
reqFrame = requestAnimationFrame(function() {
|
||||
reqFrame = requestAnimationFrame(function () {
|
||||
//实际高度
|
||||
const h = unref(realBoxHeight) / 2;
|
||||
//宽度
|
||||
@ -408,7 +413,7 @@ export default defineComponent({
|
||||
xPos.value += step.value;
|
||||
}
|
||||
if (singleWaitTime) clearTimeout(singleWaitTime);
|
||||
if (!!unref(realSingleStopHeight)) {
|
||||
if (unref(realSingleStopHeight)) {
|
||||
//是否启动了单行暂停配置
|
||||
if (
|
||||
Math.abs(unref(yPos)) % unref(realSingleStopHeight) <
|
||||
@ -421,7 +426,7 @@ export default defineComponent({
|
||||
} else {
|
||||
scrollMove();
|
||||
}
|
||||
} else if (!!unref(realSingleStopWidth)) {
|
||||
} else if (unref(realSingleStopWidth)) {
|
||||
if (
|
||||
Math.abs(unref(xPos)) % unref(realSingleStopWidth) <
|
||||
unref(step)
|
||||
@ -577,4 +582,4 @@ export default defineComponent({
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -3,16 +3,18 @@
|
||||
*/
|
||||
export const animationFrame = () => {
|
||||
window.cancelAnimationFrame = (function () {
|
||||
return window.cancelAnimationFrame ||
|
||||
return (
|
||||
window.cancelAnimationFrame ||
|
||||
window.webkitCancelAnimationFrame ||
|
||||
window.mozCancelAnimationFrame ||
|
||||
window.oCancelAnimationFrame ||
|
||||
window.msCancelAnimationFrame ||
|
||||
function (id) {
|
||||
return window.clearTimeout(id)
|
||||
return window.clearTimeout(id);
|
||||
}
|
||||
})()
|
||||
window.requestAnimationFrame = function () {
|
||||
);
|
||||
})();
|
||||
window.requestAnimationFrame = (function () {
|
||||
return (
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
@ -20,25 +22,26 @@ export const animationFrame = () => {
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function (callback) {
|
||||
return window.setTimeout(callback, 1000 / 60)
|
||||
return window.setTimeout(callback, 1000 / 60);
|
||||
}
|
||||
)
|
||||
}()
|
||||
}
|
||||
);
|
||||
})();
|
||||
};
|
||||
|
||||
/**
|
||||
* @desc 判断数组是否相等
|
||||
* @param {arr1,arr2}
|
||||
* @return {Boolean}
|
||||
* @param arr1
|
||||
* @param arr2
|
||||
*/
|
||||
export const arrayEqual = (arr1: Array<any>, arr2: Array<any>) => {
|
||||
if (arr1 === arr2) return true
|
||||
if (arr1.length !== arr2.length) return false
|
||||
if (arr1 === arr2) return true;
|
||||
if (arr1.length !== arr2.length) return false;
|
||||
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 深浅合并拷贝
|
||||
@ -47,62 +50,68 @@ export function copyObj() {
|
||||
if (!Array.isArray) {
|
||||
// @ts-expect-error
|
||||
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,
|
||||
// eslint-disable-next-line prefer-rest-params
|
||||
target = arguments[0] || {}, // 使用||运算符，排除隐式强制类型转换为false的数据类型
|
||||
deep = false,
|
||||
len = arguments.length
|
||||
if (typeof target === 'boolean') {
|
||||
deep = target
|
||||
target = arguments[1] || {}
|
||||
i++
|
||||
// eslint-disable-next-line prefer-const
|
||||
len = arguments.length;
|
||||
if (typeof target === "boolean") {
|
||||
deep = target;
|
||||
// eslint-disable-next-line prefer-rest-params
|
||||
target = arguments[1] || {};
|
||||
i++;
|
||||
}
|
||||
if (typeof target !== 'object' && typeof target !== 'function') {
|
||||
target = {}
|
||||
if (typeof target !== "object" && typeof target !== "function") {
|
||||
target = {};
|
||||
}
|
||||
// 如果arguments.length === 1 或typeof arguments[0] === 'boolean',且存在arguments[1]，则直接返回target对象
|
||||
if (i === len) {
|
||||
return target
|
||||
return target;
|
||||
}
|
||||
for (; i < len; i++) {
|
||||
//所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环，接着循环下一个源对象
|
||||
// eslint-disable-next-line prefer-rest-params
|
||||
if ((options = arguments[i]) != null) {
|
||||
// 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过，不执行for in循环// src用于判断target对象是否存在name属性
|
||||
for (name in options) {
|
||||
// src用于判断target对象是否存在name属性
|
||||
src = target[name]
|
||||
src = target[name];
|
||||
// 需要复制的属性当前源对象的name属性
|
||||
copy = options[name]
|
||||
copy = options[name];
|
||||
// 判断copy是否是数组
|
||||
copyIsArray = Array.isArray(copy)
|
||||
copyIsArray = Array.isArray(copy);
|
||||
// 如果是深复制且copy是一个对象或数组则需要递归直到copy成为一个基本数据类型为止
|
||||
if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
|
||||
if (deep && copy && (typeof copy === "object" || copyIsArray)) {
|
||||
if (copyIsArray) {
|
||||
copyIsArray = false
|
||||
copyIsArray = false;
|
||||
// 如果目标对象存在name属性且是一个数组
|
||||
// 则使用目标对象的name属性，否则重新创建一个数组，用于复制
|
||||
clone = src && Array.isArray(src) ? src : []
|
||||
clone = src && Array.isArray(src) ? src : [];
|
||||
} else {
|
||||
// 如果目标对象存在name属性且是一个对象则使用目标对象的name属性，否则重新创建一个对象，用于复制
|
||||
clone = src && typeof src === 'object' ? src : {}
|
||||
clone = src && typeof src === "object" ? src : {};
|
||||
}
|
||||
// 深复制，所以递归调用copyObject函数
|
||||
// 返回值为target对象，即clone对象
|
||||
// copy是一个源对象
|
||||
// @ts-expect-error
|
||||
target[name] = copyObj(deep, clone, copy)
|
||||
target[name] = copyObj(deep, clone, copy);
|
||||
} else if (copy !== undefined) {
|
||||
// 浅复制，直接复制到target对象上
|
||||
target[name] = copy
|
||||
target[name] = copy;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return target
|
||||
return target;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import reSelector from "./src";
|
||||
export const ReSelector = Object.assign(reSelector, {
|
||||
install(app: App) {
|
||||
app.component(reSelector.name, reSelector);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default ReSelector;
|
||||
|
||||
@ -4,17 +4,17 @@ import {
|
||||
nextTick,
|
||||
onBeforeMount,
|
||||
getCurrentInstance,
|
||||
unref,
|
||||
unref
|
||||
} from "vue";
|
||||
import { addClass, removeClass, toggleClass } from "/@/utils/operate";
|
||||
import "./index.css";
|
||||
|
||||
let stayClass = "stay"; //鼠标点击
|
||||
let activeClass = "hs-on"; //鼠标移动上去
|
||||
let voidClass = "hs-off"; //鼠标移开
|
||||
let inRange = "hs-range"; //当前选中的两个元素之间的背景
|
||||
let bothLeftSides = "both-left-sides";
|
||||
let bothRightSides = "both-right-sides";
|
||||
const stayClass = "stay"; //鼠标点击
|
||||
const activeClass = "hs-on"; //鼠标移动上去
|
||||
const voidClass = "hs-off"; //鼠标移开
|
||||
const inRange = "hs-range"; //当前选中的两个元素之间的背景
|
||||
const bothLeftSides = "both-left-sides";
|
||||
const bothRightSides = "both-right-sides";
|
||||
let selectedDirection = "right"; //默认从左往右，索引变大
|
||||
|
||||
let overList = [];
|
||||
@ -26,37 +26,42 @@ export default defineComponent({
|
||||
props: {
|
||||
HsKey: {
|
||||
type: Number || String,
|
||||
default: 0,
|
||||
default: 0
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 0
|
||||
},
|
||||
max: {
|
||||
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
|
||||
echo: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
emits: ["selectedVal"],
|
||||
setup(props, { emit }) {
|
||||
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;
|
||||
});
|
||||
|
||||
let classes = computed(() => {
|
||||
let result = [];
|
||||
const classes = computed(() => {
|
||||
const result = [];
|
||||
let i = 0;
|
||||
let threshold = currentValue;
|
||||
if (currentValue !== Math.floor(currentValue)) {
|
||||
@ -72,7 +77,7 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
// 鼠标移入
|
||||
const setCurrentValue = (index) => {
|
||||
const setCurrentValue = index => {
|
||||
if (props.disabled) return;
|
||||
// 当选中一个元素后，开始添加背景色
|
||||
if (selectedList.length === 1) {
|
||||
@ -118,7 +123,7 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
// 鼠标离开
|
||||
const resetCurrentValue = (index) => {
|
||||
const resetCurrentValue = index => {
|
||||
if (props.disabled) return;
|
||||
// 移除先检查是否选中 选中则返回false 不移除
|
||||
const currentHsDom = document.querySelector("." + voidClass + index);
|
||||
@ -130,7 +135,7 @@ export default defineComponent({
|
||||
|
||||
// 当选中一个元素后，开始移除背景色
|
||||
if (selectedList.length === 1) {
|
||||
let firstIndex = overList[0].index;
|
||||
const firstIndex = overList[0].index;
|
||||
if (index >= firstIndex) {
|
||||
for (let i = 0; i <= index; i++) {
|
||||
removeClass(
|
||||
@ -153,7 +158,7 @@ export default defineComponent({
|
||||
// 鼠标点击
|
||||
const selectValue = (index, item) => {
|
||||
if (props.disabled) return;
|
||||
let len = selectedList.length;
|
||||
const len = selectedList.length;
|
||||
|
||||
if (len < 2) {
|
||||
selectedList.push({ item, index });
|
||||
@ -188,19 +193,19 @@ export default defineComponent({
|
||||
emit("selectedVal", {
|
||||
left: selectedList[0].item,
|
||||
right: selectedList[1].item,
|
||||
whole: selectedList,
|
||||
whole: selectedList
|
||||
});
|
||||
} else {
|
||||
emit("selectedVal", {
|
||||
left: selectedList[1].item,
|
||||
right: selectedList[0].item,
|
||||
whole: selectedList,
|
||||
whole: selectedList
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
nextTick(() => {
|
||||
selectedList.forEach((v) => {
|
||||
selectedList.forEach(v => {
|
||||
removeClass(
|
||||
document.querySelector("." + voidClass + v.index),
|
||||
activeClass,
|
||||
@ -217,7 +222,7 @@ export default defineComponent({
|
||||
selectedList = [];
|
||||
overList = [];
|
||||
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) {
|
||||
removeClass(currentDom, inRange);
|
||||
}
|
||||
@ -235,7 +240,7 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
// 回显数据
|
||||
const echoView = (item) => {
|
||||
const echoView = item => {
|
||||
if (item.length === 0) return;
|
||||
|
||||
if (item.length > 2 || item.length === 1) {
|
||||
@ -291,14 +296,12 @@ export default defineComponent({
|
||||
onClick={() => selectValue(key, item)}
|
||||
style={{
|
||||
cursor: unref(rateDisabled) ? "auto" : "pointer",
|
||||
textAlign: "center",
|
||||
textAlign: "center"
|
||||
}}
|
||||
key={key}
|
||||
>
|
||||
key={key}>
|
||||
<div
|
||||
ref={`hsdiv${props.HsKey}${key}`}
|
||||
class={`hs-item ${[unref(classes)[key] + key]}`}
|
||||
>
|
||||
class={`hs-item ${[unref(classes)[key] + key]}`}>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</td>
|
||||
@ -309,5 +312,5 @@ export default defineComponent({
|
||||
</table>
|
||||
</>
|
||||
);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -14,25 +14,25 @@ export default defineComponent({
|
||||
props: {
|
||||
splitSet: {
|
||||
type: Object as PropType<ContextProps>,
|
||||
require: true,
|
||||
},
|
||||
require: true
|
||||
}
|
||||
},
|
||||
emits: ["resize"],
|
||||
setup(props, ctx) {
|
||||
let active = ref(false);
|
||||
let hasMoved = ref(false);
|
||||
let percent = ref(props.splitSet?.defaultPercent);
|
||||
let type = props.splitSet?.split === "vertical" ? "width" : "height";
|
||||
let resizeType = props.splitSet?.split === "vertical" ? "left" : "top";
|
||||
const active = ref(false);
|
||||
const hasMoved = ref(false);
|
||||
const percent = ref(props.splitSet?.defaultPercent);
|
||||
const type = props.splitSet?.split === "vertical" ? "width" : "height";
|
||||
const resizeType = props.splitSet?.split === "vertical" ? "left" : "top";
|
||||
|
||||
let leftClass = ref([
|
||||
const leftClass = ref([
|
||||
"splitter-pane splitter-paneL",
|
||||
props.splitSet?.split,
|
||||
props.splitSet?.split
|
||||
]);
|
||||
|
||||
let rightClass = ref([
|
||||
const rightClass = ref([
|
||||
"splitter-pane splitter-paneR",
|
||||
props.splitSet?.split,
|
||||
props.splitSet?.split
|
||||
]);
|
||||
|
||||
const userSelect = computed(() => {
|
||||
@ -111,29 +111,25 @@ export default defineComponent({
|
||||
class="vue-splitter-container clearfix"
|
||||
style={(unref(cursor), unref(userSelect))}
|
||||
onMouseup={() => onMouseUp()}
|
||||
onMousemove={() => onMouseMove(event)}
|
||||
>
|
||||
onMousemove={() => onMouseMove(event)}>
|
||||
<div
|
||||
class={unref(leftClass)}
|
||||
style={{ [unref(type)]: unref(percent) + "%" }}
|
||||
>
|
||||
style={{ [unref(type)]: unref(percent) + "%" }}>
|
||||
{ctx.slots.paneL()}
|
||||
</div>
|
||||
<resizer
|
||||
style={`${unref([resizeType])}:${unref(percent)}%`}
|
||||
split={props.splitSet?.split}
|
||||
onMousedown={() => onMouseDown()}
|
||||
onClick={() => onClick()}
|
||||
></resizer>
|
||||
onClick={() => onClick()}></resizer>
|
||||
<div
|
||||
class={unref(rightClass)}
|
||||
style={{ [unref(type)]: 100 - unref(percent) + "%" }}
|
||||
>
|
||||
style={{ [unref(type)]: 100 - unref(percent) + "%" }}>
|
||||
{ctx.slots.paneR()}
|
||||
</div>
|
||||
<div v-show={unref(active)} class="vue-splitter-container-mask"></div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -6,18 +6,18 @@ export default defineComponent({
|
||||
props: {
|
||||
split: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
let classes = computed(() => {
|
||||
const classes = computed(() => {
|
||||
return ["splitter-pane-resizer", props.split, props.className].join(" ");
|
||||
});
|
||||
|
||||
return () => <div class={unref(classes)}></div>;
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
let config: object = {}
|
||||
let config: object = {};
|
||||
|
||||
const setConfig = (cfg?: any) => {
|
||||
config = Object.assign(config, cfg)
|
||||
}
|
||||
config = Object.assign(config, cfg);
|
||||
};
|
||||
|
||||
const getConfig = (key?: string) => {
|
||||
if (typeof key === "string") {
|
||||
const arr = key.split(".")
|
||||
const arr = key.split(".");
|
||||
if (arr && arr.length) {
|
||||
let data = config
|
||||
let data = config;
|
||||
arr.forEach(v => {
|
||||
if (data && typeof data[v] !== "undefined") {
|
||||
data = data[v]
|
||||
data = data[v];
|
||||
} else {
|
||||
data = null
|
||||
data = null;
|
||||
}
|
||||
})
|
||||
return data
|
||||
});
|
||||
return data;
|
||||
}
|
||||
}
|
||||
return config
|
||||
}
|
||||
return config;
|
||||
};
|
||||
|
||||
export { getConfig, setConfig }
|
||||
export { getConfig, setConfig };
|
||||
|
||||
@ -13,5 +13,5 @@ export const auth: Directive = {
|
||||
} else {
|
||||
throw new Error("need roles! Like v-auth=\"['admin','test']\"");
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
@ -20,7 +20,11 @@
|
||||
>
|
||||
<img :src="langs ? ch : en" />
|
||||
</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">
|
||||
<span class="el-dropdown-link">
|
||||
@ -29,10 +33,9 @@
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
icon="el-icon-switch-button"
|
||||
@click="logout"
|
||||
>{{ $t("message.hsLoginOut") }}</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-switch-button" @click="logout">{{
|
||||
$t("message.hsLoginOut")
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
@ -47,7 +50,6 @@ import Hamburger from "/@/components/ReHamBurger";
|
||||
import screenfull from "../components/screenfull/index.vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useAppStoreHook } from "/@/store/modules/app";
|
||||
import { mapGetters } from "pinia";
|
||||
import { storageSession } from "/@/utils/storage";
|
||||
import ch from "/@/assets/ch.png";
|
||||
import en from "/@/assets/en.png";
|
||||
@ -92,7 +94,7 @@ export default defineComponent({
|
||||
|
||||
watch(
|
||||
() => langs.value,
|
||||
val => {
|
||||
() => {
|
||||
//@ts-ignore
|
||||
document.title = t(unref(route.meta.title)); // 动态title
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export { default as Navbar } from './Navbar.vue'
|
||||
export { default as Sidebar } from './sidebar/index.vue'
|
||||
export { default as AppMain } from './AppMain.vue'
|
||||
export { default as setting } from './setting/index.vue'
|
||||
export { default as tag } from './tag/index.vue'
|
||||
export { default as Navbar } from "./Navbar.vue";
|
||||
export { default as Sidebar } from "./sidebar/index.vue";
|
||||
export { default as AppMain } from "./AppMain.vue";
|
||||
export { default as setting } from "./setting/index.vue";
|
||||
export { default as tag } from "./tag/index.vue";
|
||||
|
||||
@ -7,16 +7,15 @@
|
||||
<h3>项目配置</h3>
|
||||
<i class="el-icon-close" @click="show = !show"></i>
|
||||
</div>
|
||||
<div style="border-bottom:1px solid #DCDFE6"></div>
|
||||
<div style="border-bottom: 1px solid #dcdfe6"></div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { addClass, removeClass } from "../../../utils/operate";
|
||||
import { ref, watch, getCurrentInstance, onMounted, onBeforeMount } from "vue";
|
||||
<script lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useEventListener, onClickOutside } from "@vueuse/core";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
|
||||
@ -27,10 +26,11 @@ export default {
|
||||
|
||||
const target = ref(null);
|
||||
|
||||
onClickOutside(target, event => {
|
||||
onClickOutside(target, () => {
|
||||
show.value = false;
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const addEventClick = (): void => {
|
||||
useEventListener("click", closeSidebar);
|
||||
};
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="screen-full" @click="toggle">
|
||||
<i
|
||||
:title="isFullscreen ? $t('message.hsexitfullscreen') : $t('message.hsfullscreen')"
|
||||
:title="
|
||||
isFullscreen
|
||||
? $t('message.hsexitfullscreen')
|
||||
: $t('message.hsfullscreen')
|
||||
"
|
||||
:class="
|
||||
isFullscreen
|
||||
? 'iconfont team-iconexit-fullscreen'
|
||||
@ -12,20 +16,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import {
|
||||
defineComponent,
|
||||
} from "vue"
|
||||
import { useFullscreen } from "@vueuse/core";
|
||||
import { defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
name: "screenfull",
|
||||
setup() {
|
||||
const { isFullscreen, toggle } = useFullscreen()
|
||||
const { isFullscreen, toggle } = useFullscreen();
|
||||
|
||||
return {
|
||||
isFullscreen,
|
||||
toggle,
|
||||
}
|
||||
},
|
||||
toggle
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -41,4 +43,4 @@ export default defineComponent({
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -2,15 +2,33 @@
|
||||
<panel>
|
||||
<el-divider>主题风格</el-divider>
|
||||
<ul class="theme-stley">
|
||||
<el-tooltip class="item" effect="dark" content="暗色主题" placement="bottom">
|
||||
<li :class="dataTheme === 'dark' ? 'is-select' : ''" ref="firstTheme" @click="onDark">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="暗色主题"
|
||||
placement="bottom"
|
||||
>
|
||||
<li
|
||||
:class="dataTheme === 'dark' ? 'is-select' : ''"
|
||||
ref="firstTheme"
|
||||
@click="onDark"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</li>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip class="item" effect="dark" content="亮色主题" placement="bottom">
|
||||
<li :class="dataTheme === 'light' ? 'is-select' : ''" ref="secondTheme" @click="onLight">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="亮色主题"
|
||||
placement="bottom"
|
||||
>
|
||||
<li
|
||||
:class="dataTheme === 'light' ? 'is-select' : ''"
|
||||
ref="secondTheme"
|
||||
@click="onLight"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</li>
|
||||
@ -21,15 +39,30 @@
|
||||
<ul class="setting">
|
||||
<li>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span>侧边栏Logo</span>
|
||||
@ -55,7 +88,7 @@
|
||||
<el-divider />
|
||||
<vxe-button
|
||||
status="danger"
|
||||
style="width: 90%;margin: 24px 15px;"
|
||||
style="width: 90%; margin: 24px 15px"
|
||||
content="清空缓存并返回登录页"
|
||||
icon="fa fa-sign-out"
|
||||
@click="onReset"
|
||||
@ -63,11 +96,10 @@
|
||||
</panel>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
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 { toggleClass } from "/@/utils/operate";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import { useRouter } from "vue-router";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
@ -158,7 +190,7 @@ export default {
|
||||
const secondTheme = templateRef<HTMLElement | null>("secondTheme", null);
|
||||
|
||||
const dataTheme = ref(storageLocal.getItem("data-theme") || "dark");
|
||||
if (dataTheme) {
|
||||
if (dataTheme.value) {
|
||||
storageLocal.setItem("data-theme", unref(dataTheme));
|
||||
window.document.body.setAttribute("data-theme", unref(dataTheme));
|
||||
}
|
||||
|
||||
@ -5,48 +5,47 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, defineComponent, unref } from "vue"
|
||||
import { isUrl } from "/@/utils/is.ts"
|
||||
import { computed, defineComponent, unref } from "vue";
|
||||
import { isUrl } from "/@/utils/is.ts";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Link",
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
|
||||
const isExternal = computed(() => {
|
||||
return isUrl(props.to)
|
||||
})
|
||||
return isUrl(props.to);
|
||||
});
|
||||
|
||||
const type = computed(() => {
|
||||
if (unref(isExternal)) {
|
||||
return 'a'
|
||||
return "a";
|
||||
}
|
||||
return 'router-link'
|
||||
})
|
||||
return "router-link";
|
||||
});
|
||||
|
||||
function linkProps(to) {
|
||||
if (unref(isExternal)) {
|
||||
return {
|
||||
href: to,
|
||||
target: '_blank',
|
||||
rel: 'noopener'
|
||||
}
|
||||
target: "_blank",
|
||||
rel: "noopener"
|
||||
};
|
||||
}
|
||||
return {
|
||||
to: to
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
isExternal,
|
||||
type,
|
||||
linkProps,
|
||||
}
|
||||
},
|
||||
linkProps
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
||||
<div class="sidebar-logo-container" :class="{ collapse: collapse }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link
|
||||
v-if="collapse"
|
||||
@ -11,7 +11,13 @@
|
||||
<i class="fa fa-optin-monster"></i>
|
||||
<h1 class="sidebar-title">{{ settings.title }}</h1>
|
||||
</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>
|
||||
<h1 class="sidebar-title">{{ settings.title }}</h1>
|
||||
</router-link>
|
||||
|
||||
@ -20,7 +20,12 @@
|
||||
</app-link>
|
||||
</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>
|
||||
<i :class="item.meta.icon"></i>
|
||||
<span>{{ $t(item.meta.title) }}</span>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="{'has-logo': showLogo}">
|
||||
<div :class="{ 'has-logo': showLogo }">
|
||||
<Logo v-if="showLogo === '1'" :collapse="isCollapse" />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
@ -22,18 +22,11 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
ref,
|
||||
unref,
|
||||
nextTick,
|
||||
onBeforeMount
|
||||
} from "vue";
|
||||
import { computed, defineComponent, ref, onBeforeMount } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useAppStoreHook } from "/@/store/modules/app";
|
||||
import SidebarItem from "./SidebarItem.vue";
|
||||
import { algorithm } from "../../../utils/algorithm";
|
||||
import { algorithm } from "/@/utils/algorithm";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import Logo from "./Logo.vue";
|
||||
import { storageLocal } from "/@/utils/storage";
|
||||
@ -69,7 +62,7 @@ export default defineComponent({
|
||||
}
|
||||
// 找到当前路由的信息
|
||||
function findCurrentRoute(routes) {
|
||||
return routes.map((item, key) => {
|
||||
return routes.map(item => {
|
||||
if (item.path === indexPath) {
|
||||
// 切换左侧菜单 通知标签页
|
||||
emitter.emit("changLayoutRoute", {
|
||||
@ -80,7 +73,6 @@ export default defineComponent({
|
||||
if (item.children) findCurrentRoute(item.children);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
findCurrentRoute(algorithm.increaseIndexes(router));
|
||||
};
|
||||
|
||||
@ -5,20 +5,27 @@
|
||||
v-for="(item, index) in dynamicTagList"
|
||||
:key="index"
|
||||
:ref="'dynamic' + index"
|
||||
:class="['scroll-item is-closable', $route.path === item.path ? 'is-active' : '', $route.path === item.path && showModel ==='card' ? 'card-active' : '' ]"
|
||||
@contextmenu.prevent.native="openMenu(item, $event)"
|
||||
:class="[
|
||||
'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)"
|
||||
@mouseleave.prevent="onMouseleave(item, index)"
|
||||
>
|
||||
<router-link :to="item.path">{{ $t(item.meta.title) }}</router-link>
|
||||
<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"
|
||||
@click="deleteMenu(item)"
|
||||
></span>
|
||||
<div
|
||||
:ref="'schedule' + index"
|
||||
v-if="showModel !=='card'"
|
||||
v-if="showModel !== 'card'"
|
||||
:class="[$route.path === item.path ? 'schedule-active' : '']"
|
||||
></div>
|
||||
</div>
|
||||
@ -26,15 +33,19 @@
|
||||
<!-- 右键菜单按钮 -->
|
||||
<ul
|
||||
v-show="visible"
|
||||
:style="{ left: buttonLeft + 'px',top: buttonTop + 'px'}"
|
||||
:style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
|
||||
class="contextmenu"
|
||||
>
|
||||
<div v-for="(item,key) in tagsViews" :key="key" style="display:flex; align-items: center;">
|
||||
<li v-if="item.show" @click="selectTag(item,key)">
|
||||
<div
|
||||
v-for="(item, key) in tagsViews"
|
||||
:key="key"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<li v-if="item.show" @click="selectTag(item, key)">
|
||||
<span>
|
||||
<i :class="item.icon"></i>
|
||||
</span>
|
||||
{{item.text}}
|
||||
{{ item.text }}
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@ -53,13 +64,14 @@
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item,key) in tagsViews"
|
||||
v-for="(item, key) in tagsViews"
|
||||
:key="key"
|
||||
:icon="item.icon"
|
||||
:divided="item.divided"
|
||||
:disabled="item.disabled"
|
||||
@click="onClickDrop(key, item)"
|
||||
>{{item.text}}</el-dropdown-item>
|
||||
>{{ item.text }}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
@ -71,10 +83,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import {
|
||||
ref,
|
||||
watchEffect,
|
||||
watch,
|
||||
onBeforeMount,
|
||||
unref,
|
||||
@ -106,6 +117,7 @@ export default {
|
||||
!this.$storage.routesInStorage ||
|
||||
this.$storage.routesInStorage.length === 0
|
||||
) {
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
this.$storage.routesInStorage = routerArrays;
|
||||
}
|
||||
return this.$storage.routesInStorage;
|
||||
@ -152,7 +164,7 @@ export default {
|
||||
|
||||
// 显示模式，默认灵动模式显示
|
||||
const showModel = ref(storageLocal.getItem("showModel") || "smart");
|
||||
if (!showModel) {
|
||||
if (!showModel.value) {
|
||||
storageLocal.setItem("showModel", "card");
|
||||
}
|
||||
|
||||
@ -192,7 +204,7 @@ export default {
|
||||
// 重新加载
|
||||
function onFresh() {
|
||||
toggleClass(true, refreshButton, document.querySelector(".rotate"));
|
||||
const { path, fullPath } = unref(route);
|
||||
const { fullPath } = unref(route);
|
||||
router.replace({
|
||||
path: "/redirect" + fullPath
|
||||
});
|
||||
|
||||
@ -14,7 +14,11 @@
|
||||
<!-- tabs标签页 -->
|
||||
<tag>
|
||||
<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"
|
||||
></i>
|
||||
</tag>
|
||||
@ -35,26 +39,21 @@ import {
|
||||
reactive,
|
||||
computed,
|
||||
toRefs,
|
||||
watch,
|
||||
nextTick,
|
||||
watchEffect,
|
||||
onMounted,
|
||||
onBeforeMount,
|
||||
onBeforeUnmount
|
||||
onBeforeMount
|
||||
} from "vue";
|
||||
import { useAppStoreHook } from "/@/store/modules/app";
|
||||
import { useSettingStoreHook } from "/@/store/modules/settings";
|
||||
import { useEventListener, useFullscreen } from "@vueuse/core";
|
||||
import { toggleClass, removeClass } from "/@/utils/operate";
|
||||
import { useEventListener } from "@vueuse/core";
|
||||
import { toggleClass } from "/@/utils/operate";
|
||||
let hiddenMainContainer = "hidden-main-container";
|
||||
import options from "/@/settings";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { storageLocal } from "/@/utils/storage";
|
||||
|
||||
interface setInter {
|
||||
sidebar: any;
|
||||
device: String;
|
||||
fixedHeader: Boolean;
|
||||
device: string;
|
||||
fixedHeader: boolean;
|
||||
classes: any;
|
||||
}
|
||||
|
||||
@ -71,8 +70,8 @@ export default {
|
||||
const pureApp = useAppStoreHook();
|
||||
const pureSetting = useSettingStoreHook();
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
// const router = useRouter();
|
||||
// const route = useRoute();
|
||||
|
||||
const WIDTH = ref(992);
|
||||
|
||||
@ -101,7 +100,7 @@ export default {
|
||||
})
|
||||
});
|
||||
|
||||
const handleClickOutside = (params: Boolean) => {
|
||||
const handleClickOutside = (params: boolean) => {
|
||||
pureApp.closeSideBar({ withoutAnimation: params });
|
||||
};
|
||||
|
||||
|
||||
20
src/main.ts
20
src/main.ts
@ -36,16 +36,16 @@ app.use(Storage, {
|
||||
title: "message.hshome",
|
||||
icon: "el-icon-s-home",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
savedPosition: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// 自定义指令
|
||||
import * as directives from "/@/directives";
|
||||
Object.keys(directives).forEach((key) => {
|
||||
Object.keys(directives).forEach(key => {
|
||||
app.directive(key, (directives as { [key: string]: Directive })[key]);
|
||||
});
|
||||
|
||||
@ -57,7 +57,7 @@ export const getServerConfig = async (): Promise<any> => {
|
||||
url:
|
||||
process.env.NODE_ENV === "production"
|
||||
? "/manages/serverConfig.json"
|
||||
: "/serverConfig.json",
|
||||
: "/serverConfig.json"
|
||||
})
|
||||
.then(({ data: config }) => {
|
||||
let $config = app.config.globalProperties.$config;
|
||||
@ -80,11 +80,7 @@ export const getServerConfig = async (): Promise<any> => {
|
||||
getServerConfig().then(async () => {
|
||||
setupStore(app);
|
||||
|
||||
app
|
||||
.use(router)
|
||||
.use(useElementPlus)
|
||||
.use(useTable)
|
||||
.use(usI18n);
|
||||
app.use(router).use(useElementPlus).use(useTable).use(usI18n);
|
||||
|
||||
await router.isReady();
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
GridComponent,
|
||||
ToolboxComponent,
|
||||
DataZoomComponent,
|
||||
VisualMapComponent,
|
||||
VisualMapComponent
|
||||
} from "echarts/components";
|
||||
|
||||
import { SVGRenderer } from "echarts/renderers";
|
||||
@ -23,7 +23,7 @@ use([
|
||||
SVGRenderer,
|
||||
ToolboxComponent,
|
||||
DataZoomComponent,
|
||||
VisualMapComponent,
|
||||
VisualMapComponent
|
||||
]);
|
||||
|
||||
// 自定义主题
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {App, Component} from "vue";
|
||||
import { App, Component } from "vue";
|
||||
import {
|
||||
ElAffix,
|
||||
ElSkeleton,
|
||||
@ -30,7 +30,7 @@ import {
|
||||
ElPagination,
|
||||
ElAlert,
|
||||
ElRadioButton,
|
||||
ElRadioGroup,
|
||||
ElRadioGroup
|
||||
} from "element-plus";
|
||||
import "element-plus/packages/theme-chalk/src/base.scss";
|
||||
|
||||
@ -64,7 +64,7 @@ const components = [
|
||||
ElPagination,
|
||||
ElAlert,
|
||||
ElRadioButton,
|
||||
ElRadioGroup,
|
||||
ElRadioGroup
|
||||
];
|
||||
|
||||
const plugins = [ElLoading];
|
||||
@ -77,7 +77,7 @@ export function useElementPlus(app: App) {
|
||||
components.forEach((component: Component) => {
|
||||
app.component(component.name, component);
|
||||
});
|
||||
plugins.forEach((plugin) => {
|
||||
plugins.forEach(plugin => {
|
||||
app.use(plugin);
|
||||
});
|
||||
}
|
||||
|
||||
@ -41,8 +41,8 @@ export const menusConfig = {
|
||||
permission: "权限管理",
|
||||
permissionPage: "页面权限",
|
||||
permissionButton: "按钮权限",
|
||||
externalLink: "外链",
|
||||
},
|
||||
externalLink: "外链"
|
||||
}
|
||||
},
|
||||
en: {
|
||||
message: {
|
||||
@ -77,9 +77,9 @@ export const menusConfig = {
|
||||
permission: "Permission Manage",
|
||||
permissionPage: "Page Permission",
|
||||
permissionButton: "Button Permission",
|
||||
externalLink: "External Link",
|
||||
},
|
||||
},
|
||||
externalLink: "External Link"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 按钮配置
|
||||
@ -99,8 +99,8 @@ export const buttonConfig = {
|
||||
hsexpendAll: "全部展开",
|
||||
hscollapseAll: "全部折叠",
|
||||
hssystemSet: "系统设置",
|
||||
hsdelete: "删除",
|
||||
},
|
||||
hsdelete: "删除"
|
||||
}
|
||||
},
|
||||
en: {
|
||||
message: {
|
||||
@ -117,9 +117,9 @@ export const buttonConfig = {
|
||||
hsexpendAll: "Expand All",
|
||||
hscollapseAll: "Collapse All",
|
||||
hssystemSet: "System Set",
|
||||
hsdelete: "Delete",
|
||||
},
|
||||
},
|
||||
hsdelete: "Delete"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 配置
|
||||
@ -136,13 +136,13 @@ const localesList = [menusConfig, buttonConfig];
|
||||
|
||||
export const localesConfigs = {
|
||||
zh: {
|
||||
message: Object.assign({}, ...localesList.map((v) => v.zh.message)),
|
||||
message: Object.assign({}, ...localesList.map(v => v.zh.message)),
|
||||
...zhVxeTable,
|
||||
...zhLocale,
|
||||
...zhLocale
|
||||
},
|
||||
en: {
|
||||
message: Object.assign({}, ...localesList.map((v) => v.en.message)),
|
||||
message: Object.assign({}, ...localesList.map(v => v.en.message)),
|
||||
...enVxeTable,
|
||||
...enLocale,
|
||||
},
|
||||
...enLocale
|
||||
}
|
||||
};
|
||||
|
||||
@ -6,7 +6,7 @@ import { localesConfigs } from "./config";
|
||||
export const i18n = createI18n({
|
||||
locale: "zh", // set locale
|
||||
fallbackLocale: "en", // set fallback locale
|
||||
messages: localesConfigs,
|
||||
messages: localesConfigs
|
||||
});
|
||||
|
||||
export function usI18n(app: App) {
|
||||
|
||||
@ -44,7 +44,7 @@ import {
|
||||
Pulldown,
|
||||
|
||||
// 表格
|
||||
Table,
|
||||
Table
|
||||
} from "vxe-table";
|
||||
|
||||
// 全局默认参数
|
||||
@ -56,10 +56,10 @@ VXETable.setup({
|
||||
// 自动监听父元素的变化去重新计算表格
|
||||
autoResize: true,
|
||||
// 鼠标移到行是否要高亮显示
|
||||
highlightHoverRow: true,
|
||||
highlightHoverRow: true
|
||||
},
|
||||
input: {
|
||||
clearable: true,
|
||||
clearable: true
|
||||
},
|
||||
// 对组件内置的提示语进行国际化翻译
|
||||
i18n: (key, args) => i18n.global.t(key, args),
|
||||
@ -73,7 +73,7 @@ VXETable.setup({
|
||||
return i18n.global.t(key, args);
|
||||
}
|
||||
return key;
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export function useTable(app: App) {
|
||||
|
||||
@ -10,7 +10,7 @@ import externalLink from "./modules/externalLink";
|
||||
import remainingRouter from "./modules/remaining"; //静态路由
|
||||
|
||||
import { storageSession } from "../utils/storage";
|
||||
import { i18n } from "/@/plugins/i18n/index";
|
||||
import { i18n } from "/@/plugins/i18n";
|
||||
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
||||
|
||||
import { getAsyncRoutes } from "/@/api/routes";
|
||||
@ -26,11 +26,11 @@ const constantRoutes: Array<any> = [
|
||||
componentsRouter,
|
||||
nestedRouter,
|
||||
externalLink,
|
||||
errorRouter,
|
||||
errorRouter
|
||||
];
|
||||
|
||||
// 按照路由中meta下的rank等级升序来排序路由
|
||||
export const ascending = (arr) => {
|
||||
export const ascending = arr => {
|
||||
return arr.sort((a: any, b: any) => {
|
||||
return a?.meta?.rank - b?.meta?.rank;
|
||||
});
|
||||
@ -61,7 +61,7 @@ const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: ascending(constantRoutes).concat(...remainingRouter),
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return new Promise((resolve, reject) => {
|
||||
return new Promise(resolve => {
|
||||
if (savedPosition) {
|
||||
return savedPosition;
|
||||
} else {
|
||||
@ -72,11 +72,11 @@ const router = createRouter({
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export const initRouter = (name, next?, to?) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
return new Promise(resolve => {
|
||||
getAsyncRoutes({ name }).then(({ info }) => {
|
||||
if (info.length === 0) {
|
||||
usePermissionStoreHook().changeSetting(info);
|
||||
@ -84,9 +84,8 @@ export const initRouter = (name, next?, to?) => {
|
||||
addAsyncRoutes(info).map((v: any) => {
|
||||
// 防止重复添加路由
|
||||
if (
|
||||
router.options.routes.findIndex(
|
||||
(value) => value.path === v.path
|
||||
) !== -1
|
||||
router.options.routes.findIndex(value => value.path === v.path) !==
|
||||
-1
|
||||
) {
|
||||
return;
|
||||
} else {
|
||||
@ -103,7 +102,7 @@ export const initRouter = (name, next?, to?) => {
|
||||
}
|
||||
router.addRoute({
|
||||
path: "/:pathMatch(.*)",
|
||||
redirect: "/error/404",
|
||||
redirect: "/error/404"
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -111,7 +110,7 @@ export const initRouter = (name, next?, to?) => {
|
||||
|
||||
// reset router
|
||||
export function resetRouter() {
|
||||
router.getRoutes().forEach((route) => {
|
||||
router.getRoutes().forEach(route => {
|
||||
const { name } = route;
|
||||
if (name) {
|
||||
router.hasRoute(name) && router.removeRoute(name);
|
||||
@ -124,7 +123,7 @@ import NProgress from "../utils/progress";
|
||||
// const whiteList = ["/login", "/register"];
|
||||
|
||||
router.beforeEach((to, _from, next) => {
|
||||
let name = storageSession.getItem("info");
|
||||
const name = storageSession.getItem("info");
|
||||
NProgress.start();
|
||||
const { t } = i18n.global;
|
||||
// @ts-ignore
|
||||
|
||||
@ -10,7 +10,7 @@ const componentsRouter = {
|
||||
title: "message.hscomponents",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
rank: 4,
|
||||
rank: 4
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -20,8 +20,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hsvideo",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/map",
|
||||
@ -30,8 +30,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hsmap",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/draggable",
|
||||
@ -40,8 +40,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hsdraggable",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
@ -51,8 +51,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hssplitPane",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/button",
|
||||
@ -61,8 +61,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hsbutton",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/cropping",
|
||||
@ -71,8 +71,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hscropping",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/countTo",
|
||||
@ -81,8 +81,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hscountTo",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/selector",
|
||||
@ -91,8 +91,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hsselector",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/seamlessScroll",
|
||||
@ -101,8 +101,8 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hsseamless",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/contextmenu",
|
||||
@ -111,10 +111,10 @@ const componentsRouter = {
|
||||
meta: {
|
||||
title: "message.hscontextmenu",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
savedPosition: true
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default componentsRouter;
|
||||
|
||||
@ -10,7 +10,7 @@ const editorRouter = {
|
||||
title: "message.hseditor",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
rank: 2,
|
||||
rank: 2
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -20,10 +20,10 @@ const editorRouter = {
|
||||
meta: {
|
||||
title: "message.hseditor",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
savedPosition: true
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default editorRouter;
|
||||
|
||||
@ -10,7 +10,7 @@ const errorRouter = {
|
||||
title: "message.hserror",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
rank: 7,
|
||||
rank: 7
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -20,8 +20,8 @@ const errorRouter = {
|
||||
meta: {
|
||||
title: "message.hsfourZeroOne",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
savedPosition: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/error/404",
|
||||
@ -30,10 +30,10 @@ const errorRouter = {
|
||||
meta: {
|
||||
title: "message.hsfourZeroFour",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
savedPosition: true
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default errorRouter;
|
||||
|
||||
@ -9,7 +9,7 @@ const externalLink = {
|
||||
title: "message.externalLink",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
rank: 190,
|
||||
rank: 190
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -19,10 +19,10 @@ const externalLink = {
|
||||
title: "message.externalLink",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
rank: 191,
|
||||
},
|
||||
},
|
||||
],
|
||||
rank: 191
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default externalLink;
|
||||
|
||||
@ -10,7 +10,7 @@ const flowChartRouter = {
|
||||
title: "message.hsflowChart",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
rank: 1,
|
||||
rank: 1
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -20,10 +20,10 @@ const flowChartRouter = {
|
||||
meta: {
|
||||
title: "message.hsflowChart",
|
||||
showLink: true,
|
||||
savedPosition: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
savedPosition: true
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default flowChartRouter;
|
||||
|
||||
@ -9,7 +9,7 @@ const homeRouter = {
|
||||
icon: "el-icon-s-home",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
rank: 0,
|
||||
rank: 0
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -19,10 +19,10 @@ const homeRouter = {
|
||||
meta: {
|
||||
title: "message.hshome",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
savedPosition: false
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default homeRouter;
|
||||
|
||||
@ -10,7 +10,7 @@ const nestedRouter = {
|
||||
icon: "el-icon-s-data",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
rank: 5,
|
||||
rank: 5
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -20,7 +20,7 @@ const nestedRouter = {
|
||||
meta: {
|
||||
title: "message.hsmenu1",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
savedPosition: false
|
||||
},
|
||||
redirect: "/nested/menu1/menu1-1",
|
||||
children: [
|
||||
@ -31,8 +31,8 @@ const nestedRouter = {
|
||||
meta: {
|
||||
title: "message.hsmenu1-1",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
},
|
||||
savedPosition: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/nested/menu1/menu1-2",
|
||||
@ -42,7 +42,7 @@ const nestedRouter = {
|
||||
meta: {
|
||||
title: "message.hsmenu1-2",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
savedPosition: false
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -53,8 +53,8 @@ const nestedRouter = {
|
||||
meta: {
|
||||
title: "message.hsmenu1-2-1",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
},
|
||||
savedPosition: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/nested/menu1/menu1-2/menu1-2-2",
|
||||
@ -64,10 +64,10 @@ const nestedRouter = {
|
||||
meta: {
|
||||
title: "message.hsmenu1-2-2",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
savedPosition: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/nested/menu1/menu1-3",
|
||||
@ -76,10 +76,10 @@ const nestedRouter = {
|
||||
meta: {
|
||||
title: "message.hsmenu1-3",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
savedPosition: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/nested/menu2",
|
||||
@ -88,10 +88,10 @@ const nestedRouter = {
|
||||
meta: {
|
||||
title: "message.hsmenu2",
|
||||
showLink: true,
|
||||
savedPosition: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
savedPosition: false
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default nestedRouter;
|
||||
|
||||
@ -8,8 +8,8 @@ const remainingRouter = [
|
||||
meta: {
|
||||
title: "message.hslogin",
|
||||
showLink: false,
|
||||
rank: 101,
|
||||
},
|
||||
rank: 101
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/register",
|
||||
@ -18,8 +18,8 @@ const remainingRouter = [
|
||||
meta: {
|
||||
title: "message.hsregister",
|
||||
showLink: false,
|
||||
rank: 102,
|
||||
},
|
||||
rank: 102
|
||||
}
|
||||
},
|
||||
// {
|
||||
// // 找不到路由重定向到404页面
|
||||
@ -44,16 +44,16 @@ const remainingRouter = [
|
||||
title: "message.hshome",
|
||||
showLink: false,
|
||||
savedPosition: false,
|
||||
rank: 104,
|
||||
rank: 104
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/redirect/:path(.*)",
|
||||
name: "redirect",
|
||||
component: () => import("/@/views/redirect.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
component: () => import("/@/views/redirect.vue")
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default remainingRouter;
|
||||
|
||||
@ -3,5 +3,5 @@ export default {
|
||||
|
||||
fixedHeader: false,
|
||||
|
||||
hiddenSideBar: false,
|
||||
hiddenSideBar: false
|
||||
};
|
||||
|
||||
@ -4,10 +4,10 @@ import { store } from "/@/store";
|
||||
|
||||
interface AppState {
|
||||
sidebar: {
|
||||
opened: Boolean;
|
||||
withoutAnimation: Boolean;
|
||||
opened: boolean;
|
||||
withoutAnimation: boolean;
|
||||
};
|
||||
device: String;
|
||||
device: string;
|
||||
}
|
||||
|
||||
export const useAppStore = defineStore({
|
||||
@ -17,9 +17,9 @@ export const useAppStore = defineStore({
|
||||
opened: storageLocal.getItem("sidebarStatus")
|
||||
? !!+storageLocal.getItem("sidebarStatus")
|
||||
: true,
|
||||
withoutAnimation: false,
|
||||
withoutAnimation: false
|
||||
},
|
||||
device: "desktop",
|
||||
device: "desktop"
|
||||
}),
|
||||
getters: {
|
||||
getSidebarStatus() {
|
||||
@ -27,7 +27,7 @@ export const useAppStore = defineStore({
|
||||
},
|
||||
getDevice() {
|
||||
return this.device;
|
||||
},
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
TOGGLE_SIDEBAR() {
|
||||
@ -39,12 +39,12 @@ export const useAppStore = defineStore({
|
||||
storageLocal.setItem("sidebarStatus", 0);
|
||||
}
|
||||
},
|
||||
CLOSE_SIDEBAR(withoutAnimation: Boolean) {
|
||||
CLOSE_SIDEBAR(withoutAnimation: boolean) {
|
||||
storageLocal.setItem("sidebarStatus", 0);
|
||||
this.sidebar.opened = false;
|
||||
this.sidebar.withoutAnimation = withoutAnimation;
|
||||
},
|
||||
TOGGLE_DEVICE(device: String) {
|
||||
TOGGLE_DEVICE(device: string) {
|
||||
this.device = device;
|
||||
},
|
||||
async toggleSideBar() {
|
||||
@ -55,8 +55,8 @@ export const useAppStore = defineStore({
|
||||
},
|
||||
toggleDevice(device) {
|
||||
this.TOGGLE_DEVICE(device);
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export function useAppStoreHook() {
|
||||
|
||||
@ -8,13 +8,13 @@ export const usePermissionStore = defineStore({
|
||||
state: () => ({
|
||||
constantRoutes: constantRoutesArr, //静态路由
|
||||
wholeRoutes: [],
|
||||
buttonAuth: [],
|
||||
buttonAuth: []
|
||||
}),
|
||||
actions: {
|
||||
asyncActionRoutes(routes) {
|
||||
if (this.wholeRoutes.length > 0) return;
|
||||
this.wholeRoutes = ascending(this.constantRoutes.concat(routes)).filter(
|
||||
(v) => v.meta.showLink
|
||||
v => v.meta.showLink
|
||||
);
|
||||
|
||||
const getButtonAuth = (arrRoutes: Array<string>) => {
|
||||
@ -33,8 +33,8 @@ export const usePermissionStore = defineStore({
|
||||
},
|
||||
async changeSetting(routes) {
|
||||
await this.asyncActionRoutes(routes);
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export function usePermissionStoreHook() {
|
||||
|
||||
@ -3,15 +3,15 @@ import { defineStore } from "pinia";
|
||||
import { store } from "/@/store";
|
||||
|
||||
interface SettingState {
|
||||
title: String;
|
||||
fixedHeader: Boolean;
|
||||
title: string;
|
||||
fixedHeader: boolean;
|
||||
}
|
||||
|
||||
export const useSettingStore = defineStore({
|
||||
id: "pure-setting",
|
||||
state: (): SettingState => ({
|
||||
title: defaultSettings.title,
|
||||
fixedHeader: defaultSettings.fixedHeader,
|
||||
fixedHeader: defaultSettings.fixedHeader
|
||||
}),
|
||||
getters: {
|
||||
getTitle() {
|
||||
@ -19,18 +19,19 @@ export const useSettingStore = defineStore({
|
||||
},
|
||||
getFixedHeader() {
|
||||
return this.fixedHeader;
|
||||
},
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
CHANGE_SETTING({ key, value }) {
|
||||
// eslint-disable-next-line no-prototype-builtins
|
||||
if (this.hasOwnProperty(key)) {
|
||||
this[key] = value;
|
||||
}
|
||||
},
|
||||
changeSetting(data) {
|
||||
this.CHANGE_SETTING(data);
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export function useSettingStoreHook() {
|
||||
|
||||
@ -8,14 +8,14 @@ class algorithmProxy implements ProxyAlgorithm {
|
||||
// 数组每一项添加索引字段
|
||||
public increaseIndexes<T>(val: Array<T>): Array<T> {
|
||||
return Object.keys(val)
|
||||
.map((v) => {
|
||||
.map(v => {
|
||||
return {
|
||||
// @ts-ignore
|
||||
...val[v],
|
||||
key: v,
|
||||
key: v
|
||||
};
|
||||
})
|
||||
.filter((v) => v.meta && v.meta.showLink);
|
||||
.filter(v => v.meta && v.meta.showLink);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// 延迟函数
|
||||
export const delay = (timeout: number) =>
|
||||
new Promise((resolve) => setTimeout(resolve, timeout));
|
||||
new Promise(resolve => setTimeout(resolve, timeout));
|
||||
|
||||
// 防抖函数
|
||||
export const debounce = (fn: () => Fn, timeout: number) => {
|
||||
|
||||
@ -4,22 +4,16 @@ interface deviceInter {
|
||||
|
||||
// 检测设备类型(手机返回true,反之)
|
||||
export const deviceDetection = () => {
|
||||
let sUserAgent: deviceInter = navigator.userAgent.toLowerCase();
|
||||
let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||
let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||
let bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||||
let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||||
let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||||
let bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||
let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||
let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||
return bIsIphoneOs ||
|
||||
bIsMidp ||
|
||||
bIsUc7 ||
|
||||
bIsUc ||
|
||||
bIsAndroid ||
|
||||
bIsCE ||
|
||||
bIsWM
|
||||
? true
|
||||
: false;
|
||||
const sUserAgent: deviceInter = navigator.userAgent.toLowerCase();
|
||||
// const bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||
const bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||
const bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||||
const bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||||
const bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||||
const bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||
const bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||
const bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||
return (
|
||||
bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM
|
||||
);
|
||||
};
|
||||
|
||||
@ -9,8 +9,8 @@ export const defaultConfig: AxiosRequestConfig = {
|
||||
headers: {
|
||||
Accept: "application/json, text/plain, */*",
|
||||
"Content-Type": "application/json",
|
||||
"X-Requested-With": "XMLHttpRequest",
|
||||
},
|
||||
"X-Requested-With": "XMLHttpRequest"
|
||||
}
|
||||
};
|
||||
|
||||
export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {
|
||||
@ -22,7 +22,7 @@ export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {
|
||||
if (headers && typeof headers === "object") {
|
||||
defaultConfig.headers = {
|
||||
...defaultConfig.headers,
|
||||
...headers,
|
||||
...headers
|
||||
};
|
||||
}
|
||||
return { ...excludeProps(config!, "headers"), ...defaultConfig };
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
|
||||
import Axios, {
|
||||
AxiosRequestConfig,
|
||||
CancelTokenStatic,
|
||||
AxiosInstance,
|
||||
Canceler
|
||||
} from "axios"
|
||||
AxiosInstance
|
||||
} 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 {
|
||||
cancelTokenType,
|
||||
@ -18,12 +16,12 @@ import {
|
||||
EnclosureHttpRequestConfig,
|
||||
EnclosureHttpResoponse,
|
||||
EnclosureHttpError
|
||||
} from "./types.d"
|
||||
} from "./types.d";
|
||||
|
||||
class EnclosureHttp {
|
||||
constructor() {
|
||||
this.httpInterceptorsRequest()
|
||||
this.httpInterceptorsResponse()
|
||||
this.httpInterceptorsRequest();
|
||||
this.httpInterceptorsResponse();
|
||||
}
|
||||
// 初始化配置对象
|
||||
private static initConfig: EnclosureHttpRequestConfig = {};
|
||||
@ -32,7 +30,7 @@ class EnclosureHttp {
|
||||
private static axiosInstance: AxiosInstance = Axios.create(genConfig());
|
||||
|
||||
// 保存 EnclosureHttp实例
|
||||
private static EnclosureHttpInstance: EnclosureHttp
|
||||
private static EnclosureHttpInstance: EnclosureHttp;
|
||||
|
||||
// axios取消对象
|
||||
private CancelToken: CancelTokenStatic = Axios.CancelToken;
|
||||
@ -43,17 +41,19 @@ class EnclosureHttp {
|
||||
// 记录当前这一次cancelToken的key
|
||||
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> {
|
||||
return this.sourceTokenList
|
||||
return this.sourceTokenList;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
public set cancelTokenList(value) {
|
||||
throw new Error("cancelTokenList不允许赋值")
|
||||
throw new Error("cancelTokenList不允许赋值");
|
||||
}
|
||||
|
||||
/**
|
||||
@ -68,8 +68,8 @@ class EnclosureHttp {
|
||||
* @returns string
|
||||
*/
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
private genUniqueKey(config: EnclosureHttpRequestConfig): string {
|
||||
return `${config.url}--${JSON.stringify(config.data)}`
|
||||
private static genUniqueKey(config: EnclosureHttpRequestConfig): string {
|
||||
return `${config.url}--${JSON.stringify(config.data)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -77,21 +77,21 @@ class EnclosureHttp {
|
||||
* @returns void 0
|
||||
*/
|
||||
private cancelRepeatRequest(): void {
|
||||
const temp: { [key: string]: boolean } = {}
|
||||
const temp: { [key: string]: boolean } = {};
|
||||
|
||||
this.sourceTokenList = this.sourceTokenList.reduce<Array<cancelTokenType>>(
|
||||
(res: Array<cancelTokenType>, cancelToken: cancelTokenType) => {
|
||||
const { cancelKey, cancelExecutor } = cancelToken
|
||||
const { cancelKey, cancelExecutor } = cancelToken;
|
||||
if (!temp[cancelKey]) {
|
||||
temp[cancelKey] = true
|
||||
res.push(cancelToken)
|
||||
temp[cancelKey] = true;
|
||||
res.push(cancelToken);
|
||||
} else {
|
||||
cancelExecutor()
|
||||
cancelExecutor();
|
||||
}
|
||||
return res
|
||||
return res;
|
||||
},
|
||||
[]
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -102,9 +102,9 @@ class EnclosureHttp {
|
||||
this.sourceTokenList =
|
||||
this.sourceTokenList.length < 1
|
||||
? this.sourceTokenList.filter(
|
||||
cancelToken => cancelToken.cancelKey !== cancelKey
|
||||
)
|
||||
: []
|
||||
cancelToken => cancelToken.cancelKey !== cancelKey
|
||||
)
|
||||
: [];
|
||||
}
|
||||
|
||||
/**
|
||||
@ -115,30 +115,32 @@ class EnclosureHttp {
|
||||
private httpInterceptorsRequest(): void {
|
||||
EnclosureHttp.axiosInstance.interceptors.request.use(
|
||||
(config: EnclosureHttpRequestConfig) => {
|
||||
const $config = config
|
||||
NProgress.start() // 每次切换页面时，调用进度条
|
||||
const cancelKey = this.genUniqueKey($config)
|
||||
$config.cancelToken = new this.CancelToken((cancelExecutor: (cancel: any) => void) => {
|
||||
this.sourceTokenList.push({ cancelKey, cancelExecutor })
|
||||
})
|
||||
this.cancelRepeatRequest()
|
||||
this.currentCancelTokenKey = cancelKey
|
||||
const $config = config;
|
||||
NProgress.start(); // 每次切换页面时，调用进度条
|
||||
const cancelKey = EnclosureHttp.genUniqueKey($config);
|
||||
$config.cancelToken = new this.CancelToken(
|
||||
(cancelExecutor: (cancel: any) => void) => {
|
||||
this.sourceTokenList.push({ cancelKey, cancelExecutor });
|
||||
}
|
||||
);
|
||||
this.cancelRepeatRequest();
|
||||
this.currentCancelTokenKey = cancelKey;
|
||||
// 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
|
||||
if (typeof this.beforeRequestCallback === "function") {
|
||||
this.beforeRequestCallback($config)
|
||||
this.beforeRequestCallback = undefined
|
||||
return $config
|
||||
this.beforeRequestCallback($config);
|
||||
this.beforeRequestCallback = undefined;
|
||||
return $config;
|
||||
}
|
||||
if (EnclosureHttp.initConfig.beforeRequestCallback) {
|
||||
EnclosureHttp.initConfig.beforeRequestCallback($config)
|
||||
return $config
|
||||
EnclosureHttp.initConfig.beforeRequestCallback($config);
|
||||
return $config;
|
||||
}
|
||||
return $config
|
||||
return $config;
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
return Promise.reject(error);
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -146,7 +148,7 @@ class EnclosureHttp {
|
||||
* @returns void 0
|
||||
*/
|
||||
public clearCancelTokenList(): void {
|
||||
this.sourceTokenList.length = 0
|
||||
this.sourceTokenList.length = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -154,74 +156,75 @@ class EnclosureHttp {
|
||||
* @returns void 0
|
||||
*/
|
||||
private httpInterceptorsResponse(): void {
|
||||
const instance = EnclosureHttp.axiosInstance
|
||||
const instance = EnclosureHttp.axiosInstance;
|
||||
instance.interceptors.response.use(
|
||||
(response: EnclosureHttpResoponse) => {
|
||||
// 请求每次成功一次就删除当前canceltoken标记
|
||||
const cancelKey = this.genUniqueKey(response.config)
|
||||
this.deleteCancelTokenByCancelKey(cancelKey)
|
||||
const cancelKey = EnclosureHttp.genUniqueKey(response.config);
|
||||
this.deleteCancelTokenByCancelKey(cancelKey);
|
||||
// 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
|
||||
if (typeof this.beforeResponseCallback === "function") {
|
||||
this.beforeResponseCallback(response)
|
||||
this.beforeResponseCallback = undefined
|
||||
return response.data
|
||||
this.beforeResponseCallback(response);
|
||||
this.beforeResponseCallback = undefined;
|
||||
return response.data;
|
||||
}
|
||||
if (EnclosureHttp.initConfig.beforeResponseCallback) {
|
||||
EnclosureHttp.initConfig.beforeResponseCallback(response)
|
||||
return response.data
|
||||
EnclosureHttp.initConfig.beforeResponseCallback(response);
|
||||
return response.data;
|
||||
}
|
||||
NProgress.done()
|
||||
return response.data
|
||||
NProgress.done();
|
||||
return response.data;
|
||||
},
|
||||
(error: EnclosureHttpError) => {
|
||||
const $error = error
|
||||
const $error = error;
|
||||
// 判断当前的请求中是否在 取消token数组理存在，如果存在则移除（单次请求流程）
|
||||
if (this.currentCancelTokenKey) {
|
||||
const haskey = this.sourceTokenList.filter(
|
||||
cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey
|
||||
).length
|
||||
).length;
|
||||
if (haskey) {
|
||||
this.sourceTokenList = this.sourceTokenList.filter(
|
||||
cancelToken =>
|
||||
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>(
|
||||
method: RequestMethods,
|
||||
url: string,
|
||||
param?: AxiosRequestConfig,
|
||||
axiosConfig?: EnclosureHttpRequestConfig,
|
||||
axiosConfig?: EnclosureHttpRequestConfig
|
||||
): Promise<T> {
|
||||
const config = transformConfigByMethod(param, {
|
||||
method,
|
||||
url,
|
||||
...axiosConfig
|
||||
} as EnclosureHttpRequestConfig)
|
||||
} as EnclosureHttpRequestConfig);
|
||||
// 单独处理自定义请求/响应回掉
|
||||
if (axiosConfig?.beforeRequestCallback) {
|
||||
this.beforeRequestCallback = axiosConfig.beforeRequestCallback
|
||||
this.beforeRequestCallback = axiosConfig.beforeRequestCallback;
|
||||
}
|
||||
if (axiosConfig?.beforeResponseCallback) {
|
||||
this.beforeResponseCallback = axiosConfig.beforeResponseCallback
|
||||
this.beforeResponseCallback = axiosConfig.beforeResponseCallback;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
EnclosureHttp.axiosInstance.request(config)
|
||||
EnclosureHttp.axiosInstance
|
||||
.request(config)
|
||||
.then((response: EnclosureHttpResoponse) => {
|
||||
resolve(response)
|
||||
resolve(response);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public post<T>(
|
||||
@ -229,7 +232,7 @@ class EnclosureHttp {
|
||||
params?: T,
|
||||
config?: EnclosureHttpRequestConfig
|
||||
): Promise<T> {
|
||||
return this.request<T>("post", url, params, config)
|
||||
return this.request<T>("post", url, params, config);
|
||||
}
|
||||
|
||||
public get<T>(
|
||||
@ -237,8 +240,8 @@ class EnclosureHttp {
|
||||
params?: T,
|
||||
config?: EnclosureHttpRequestConfig
|
||||
): Promise<T> {
|
||||
return this.request<T>("get", url, params, config)
|
||||
return this.request<T>("get", url, params, config);
|
||||
}
|
||||
}
|
||||
|
||||
export default EnclosureHttp
|
||||
export default EnclosureHttp;
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
import EnclosureHttp from "./core"
|
||||
export const http = new EnclosureHttp()
|
||||
|
||||
import EnclosureHttp from "./core";
|
||||
export const http = new EnclosureHttp();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { EnclosureHttpRequestConfig } from "./types.d"
|
||||
import { EnclosureHttpRequestConfig } from "./types.d";
|
||||
|
||||
export function excludeProps<T extends { [key: string]: any }>(
|
||||
origin: T,
|
||||
@ -7,23 +7,23 @@ export function excludeProps<T extends { [key: string]: any }>(
|
||||
return Object.keys(origin)
|
||||
.filter(key => !prop.includes(key))
|
||||
.reduce((res, key) => {
|
||||
res[key] = origin[key]
|
||||
return res
|
||||
}, {} as { [key: string]: T })
|
||||
res[key] = origin[key];
|
||||
return res;
|
||||
}, {} as { [key: string]: T });
|
||||
}
|
||||
|
||||
export function transformConfigByMethod(
|
||||
params: any,
|
||||
config: EnclosureHttpRequestConfig
|
||||
): EnclosureHttpRequestConfig {
|
||||
const { method } = config
|
||||
const { method } = config;
|
||||
const props = ["delete", "get", "head", "options"].includes(
|
||||
method!.toLocaleLowerCase()
|
||||
)
|
||||
? "params"
|
||||
: "data"
|
||||
: "data";
|
||||
return {
|
||||
...config,
|
||||
[props]: params
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,94 +1,101 @@
|
||||
const toString = Object.prototype.toString
|
||||
/* eslint-disable */
|
||||
const toString = Object.prototype.toString;
|
||||
|
||||
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 {
|
||||
return typeof val !== 'undefined'
|
||||
return typeof val !== "undefined";
|
||||
}
|
||||
|
||||
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> {
|
||||
return val !== null && is(val, 'Object')
|
||||
return val !== null && is(val, "Object");
|
||||
}
|
||||
|
||||
export function isEmpty<T = unknown>(val: T): val is T {
|
||||
if (isArray(val) || isString(val)) {
|
||||
return val.length === 0
|
||||
return val.length === 0;
|
||||
}
|
||||
|
||||
if (val instanceof Map || val instanceof Set) {
|
||||
return val.size === 0
|
||||
return val.size === 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
return is(val, 'Date')
|
||||
return is(val, "Date");
|
||||
}
|
||||
|
||||
export function isNull(val: unknown): val is null {
|
||||
return val === null
|
||||
return val === null;
|
||||
}
|
||||
|
||||
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 {
|
||||
return isUnDef(val) || isNull(val)
|
||||
return isUnDef(val) || isNull(val);
|
||||
}
|
||||
|
||||
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> {
|
||||
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 {
|
||||
return is(val, 'String')
|
||||
return is(val, "String");
|
||||
}
|
||||
|
||||
export function isFunction(val: unknown): val is Function {
|
||||
return typeof val === 'function'
|
||||
return typeof val === "function";
|
||||
}
|
||||
|
||||
export function isBoolean(val: unknown): val is boolean {
|
||||
return is(val, 'Boolean')
|
||||
return is(val, "Boolean");
|
||||
}
|
||||
|
||||
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> {
|
||||
return val && Array.isArray(val)
|
||||
return val && Array.isArray(val);
|
||||
}
|
||||
|
||||
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 {
|
||||
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 {
|
||||
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
|
||||
return reg.test(path)
|
||||
const reg =
|
||||
/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
|
||||
return reg.test(path);
|
||||
}
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
interface ProxyLoader {
|
||||
loadCss(src: string): any
|
||||
loadScript(src: string): Promise<any>
|
||||
loadScriptConcurrent(src: Array<string>): Promise<any>
|
||||
loadCss(src: string): any;
|
||||
loadScript(src: string): Promise<any>;
|
||||
loadScriptConcurrent(src: Array<string>): Promise<any>;
|
||||
}
|
||||
|
||||
class loaderProxy implements ProxyLoader {
|
||||
constructor() {}
|
||||
|
||||
constructor() { }
|
||||
|
||||
protected scriptLoaderCache: Array<string> = []
|
||||
protected scriptLoaderCache: Array<string> = [];
|
||||
|
||||
public loadCss = (src: string): any => {
|
||||
let element:HTMLLinkElement = document.createElement("link")
|
||||
element.rel = "stylesheet"
|
||||
element.href = src
|
||||
document.body.appendChild(element)
|
||||
}
|
||||
const element: HTMLLinkElement = document.createElement("link");
|
||||
element.rel = "stylesheet";
|
||||
element.href = src;
|
||||
document.body.appendChild(element);
|
||||
};
|
||||
|
||||
public loadScript = async (src: string): Promise<any> => {
|
||||
if (this.scriptLoaderCache.includes(src)) {
|
||||
return src
|
||||
return src;
|
||||
} else {
|
||||
let element: HTMLScriptElement = document.createElement("script")
|
||||
element.src = src
|
||||
document.body.appendChild(element)
|
||||
const element: HTMLScriptElement = document.createElement("script");
|
||||
element.src = src;
|
||||
document.body.appendChild(element);
|
||||
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)) {
|
||||
const len: number = srcList.length
|
||||
const len: number = srcList.length;
|
||||
if (len > 0) {
|
||||
let count: number = 0
|
||||
let count = 0;
|
||||
srcList.map(src => {
|
||||
if (src) {
|
||||
this.loadScript(src).then(() => {
|
||||
count++
|
||||
count++;
|
||||
if (count === len) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export const loader = new loaderProxy()
|
||||
export const loader = new loaderProxy();
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { ElMessage } from "element-plus"
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
// 消息
|
||||
const Message = (message: string): any => {
|
||||
return ElMessage({
|
||||
showClose: true,
|
||||
message
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 成功
|
||||
const successMessage = (message: string): any => {
|
||||
@ -14,8 +14,8 @@ const successMessage = (message: string): any => {
|
||||
showClose: true,
|
||||
message,
|
||||
type: "success"
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 警告
|
||||
const warnMessage = (message: string): any => {
|
||||
@ -23,8 +23,8 @@ const warnMessage = (message: string): any => {
|
||||
showClose: true,
|
||||
message,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 失败
|
||||
const errorMessage = (message: string): any => {
|
||||
@ -32,12 +32,7 @@ const errorMessage = (message: string): any => {
|
||||
showClose: true,
|
||||
message,
|
||||
type: "error"
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export {
|
||||
Message,
|
||||
successMessage,
|
||||
warnMessage,
|
||||
errorMessage
|
||||
}
|
||||
export { Message, successMessage, warnMessage, errorMessage };
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { Emitter } from 'mitt';
|
||||
import mitt from 'mitt';
|
||||
import type { Emitter } from "mitt";
|
||||
import mitt from "mitt";
|
||||
|
||||
export const emitter: Emitter = mitt();
|
||||
export const emitter: Emitter = mitt();
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import NProgress from "nprogress"
|
||||
import "nprogress/nprogress.css"
|
||||
import NProgress from "nprogress";
|
||||
import "nprogress/nprogress.css";
|
||||
|
||||
NProgress.configure({
|
||||
easing: 'ease', // 动画方式
|
||||
speed: 500, // 递增进度条的速度
|
||||
showSpinner: true, // 是否显示加载ico
|
||||
trickleSpeed: 200, // 自动递增间隔
|
||||
easing: "ease", // 动画方式
|
||||
speed: 500, // 递增进度条的速度
|
||||
showSpinner: true, // 是否显示加载ico
|
||||
trickleSpeed: 200, // 自动递增间隔
|
||||
minimum: 0.3 // 初始化时的最小百分比
|
||||
})
|
||||
});
|
||||
|
||||
export default NProgress
|
||||
export default NProgress;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { CSSProperties, VNodeChild } from 'vue'
|
||||
import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types'
|
||||
import { CSSProperties, VNodeChild } from "vue";
|
||||
import { createTypes, VueTypeValidableDef, VueTypesInterface } from "vue-types";
|
||||
|
||||
export type VueNode = VNodeChild | JSX.Element
|
||||
export type VueNode = VNodeChild | JSX.Element;
|
||||
|
||||
type PropTypes = VueTypesInterface & {
|
||||
readonly style: VueTypeValidableDef<CSSProperties>
|
||||
readonly VNodeChild: VueTypeValidableDef<VueNode>
|
||||
}
|
||||
readonly style: VueTypeValidableDef<CSSProperties>;
|
||||
readonly VNodeChild: VueTypeValidableDef<VueNode>;
|
||||
};
|
||||
|
||||
const propTypes = createTypes({
|
||||
func: undefined,
|
||||
@ -14,20 +14,20 @@ const propTypes = createTypes({
|
||||
string: undefined,
|
||||
number: undefined,
|
||||
object: undefined,
|
||||
integer: undefined,
|
||||
}) as PropTypes
|
||||
integer: undefined
|
||||
}) as PropTypes;
|
||||
|
||||
propTypes.extend([
|
||||
{
|
||||
name: 'style',
|
||||
name: "style",
|
||||
getter: true,
|
||||
type: [String, Object],
|
||||
default: undefined,
|
||||
default: undefined
|
||||
},
|
||||
{
|
||||
name: 'VNodeChild',
|
||||
name: "VNodeChild",
|
||||
getter: true,
|
||||
type: undefined,
|
||||
type: undefined
|
||||
}
|
||||
])
|
||||
export { propTypes }
|
||||
]);
|
||||
export { propTypes };
|
||||
|
||||
@ -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 => {
|
||||
for (const entry of entries) {
|
||||
const listeners = entry.target.__resizeListeners__ || []
|
||||
const listeners = entry.target.__resizeListeners__ || [];
|
||||
if (listeners.length) {
|
||||
listeners.forEach((fn: () => any) => {
|
||||
fn()
|
||||
})
|
||||
fn();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const addResizeListener = (element: any, fn: () => any): any => {
|
||||
if (isServer) return
|
||||
if (isServer) return;
|
||||
if (!element.__resizeListeners__) {
|
||||
element.__resizeListeners__ = []
|
||||
element.__ro__ = new ResizeObserver(resizeHandler)
|
||||
element.__ro__.observe(element)
|
||||
element.__resizeListeners__ = [];
|
||||
element.__ro__ = new ResizeObserver(resizeHandler);
|
||||
element.__ro__.observe(element);
|
||||
}
|
||||
element.__resizeListeners__.push(fn)
|
||||
}
|
||||
element.__resizeListeners__.push(fn);
|
||||
};
|
||||
|
||||
export const removeResizeListener = (element: any, fn: () => any): any => {
|
||||
if (!element || !element.__resizeListeners__) return
|
||||
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1)
|
||||
if (!element || !element.__resizeListeners__) return;
|
||||
element.__resizeListeners__.splice(
|
||||
element.__resizeListeners__.indexOf(fn),
|
||||
1
|
||||
);
|
||||
if (!element.__resizeListeners__.length) {
|
||||
element.__ro__.disconnect()
|
||||
element.__ro__.disconnect();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,39 +1,42 @@
|
||||
import { getCurrentInstance, reactive, shallowRef, watchEffect } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
import { getCurrentInstance, reactive, shallowRef, watchEffect } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
interface Params {
|
||||
excludeListeners?: boolean
|
||||
excludeKeys?: string[]
|
||||
excludeListeners?: boolean;
|
||||
excludeKeys?: string[];
|
||||
}
|
||||
|
||||
const DEFAULT_EXCLUDE_KEYS = ['class', 'style']
|
||||
const LISTENER_PREFIX = /^on[A-Z]/
|
||||
const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
|
||||
const LISTENER_PREFIX = /^on[A-Z]/;
|
||||
|
||||
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> | {} {
|
||||
const instance = getCurrentInstance()
|
||||
if (!instance) return {}
|
||||
const instance = getCurrentInstance();
|
||||
if (!instance) return {};
|
||||
|
||||
const { excludeListeners = false, excludeKeys = [] } = params
|
||||
const attrs = shallowRef({})
|
||||
const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS)
|
||||
const { excludeListeners = false, excludeKeys = [] } = params;
|
||||
const attrs = shallowRef({});
|
||||
const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS);
|
||||
|
||||
// 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(() => {
|
||||
const res = entries(instance.attrs).reduce((acm, [key, val]) => {
|
||||
if (!allExcludeKeys.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))) {
|
||||
acm[key] = val
|
||||
if (
|
||||
!allExcludeKeys.includes(key) &&
|
||||
!(excludeListeners && LISTENER_PREFIX.test(key))
|
||||
) {
|
||||
acm[key] = val;
|
||||
}
|
||||
|
||||
return acm
|
||||
}, {} as Recordable)
|
||||
return acm;
|
||||
}, {} as Recordable);
|
||||
|
||||
attrs.value = res
|
||||
})
|
||||
attrs.value = res;
|
||||
});
|
||||
|
||||
return attrs
|
||||
return attrs;
|
||||
}
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
const hexList: string[] = []
|
||||
const hexList: string[] = [];
|
||||
for (let i = 0; i <= 15; i++) {
|
||||
hexList[i] = i.toString(16)
|
||||
hexList[i] = i.toString(16);
|
||||
}
|
||||
|
||||
export function buildUUID(): string {
|
||||
let uuid = ''
|
||||
let uuid = "";
|
||||
for (let i = 1; i <= 36; i++) {
|
||||
if (i === 9 || i === 14 || i === 19 || i === 24) {
|
||||
uuid += '-'
|
||||
uuid += "-";
|
||||
} else if (i === 15) {
|
||||
uuid += 4
|
||||
uuid += 4;
|
||||
} else if (i === 20) {
|
||||
uuid += hexList[(Math.random() * 4) | 8]
|
||||
uuid += hexList[(Math.random() * 4) | 8];
|
||||
} else {
|
||||
uuid += hexList[(Math.random() * 16) | 0]
|
||||
uuid += hexList[(Math.random() * 16) | 0];
|
||||
}
|
||||
}
|
||||
return uuid.replace(/-/g, '')
|
||||
return uuid.replace(/-/g, "");
|
||||
}
|
||||
|
||||
let unique = 0
|
||||
export function buildShortUUID(prefix = ''): string {
|
||||
const time = Date.now()
|
||||
const random = Math.floor(Math.random() * 1000000000)
|
||||
unique++
|
||||
return prefix + '_' + random + unique + String(time)
|
||||
let unique = 0;
|
||||
export function buildShortUUID(prefix = ""): string {
|
||||
const time = Date.now();
|
||||
const random = Math.floor(Math.random() * 1000000000);
|
||||
unique++;
|
||||
return prefix + "_" + random + unique + String(time);
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<iframe
|
||||
:src="url"
|
||||
frameborder="0"
|
||||
class="iframe"
|
||||
></iframe>
|
||||
<iframe :src="url" frameborder="0" class="iframe"></iframe>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { ref } from 'vue';
|
||||
<script lang="ts">
|
||||
import { ref } from "vue";
|
||||
export default {
|
||||
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 {
|
||||
url
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -36,7 +36,6 @@ import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
version,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
@ -72,4 +71,4 @@ export default defineComponent({
|
||||
border-radius: 8px;
|
||||
background-color: rgba(90, 167, 164, 0.2);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="margin:10px">
|
||||
<div style="margin: 10px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 基本使用 -->
|
||||
|
||||
@ -7,22 +7,38 @@
|
||||
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<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('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-item :hide-on-click="false" @click="extra.push('item')"
|
||||
>添加菜单</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>
|
||||
|
||||
<template v-for="(item, index) of extra">
|
||||
<template v-for="(item, index) of extra" :key="index">
|
||||
<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>菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单3</v-contextmenu-item>
|
||||
</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>菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单3</v-contextmenu-item>
|
||||
@ -39,7 +55,6 @@ import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
version,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
@ -91,4 +106,4 @@ export default defineComponent({
|
||||
border-radius: 8px;
|
||||
background-color: rgba(90, 167, 164, 0.2);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -31,7 +31,6 @@ import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
version,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
@ -69,4 +68,4 @@ export default ExampleSFC;
|
||||
border-radius: 8px;
|
||||
background-color: rgba(90, 167, 164, 0.2);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="margin:10px">
|
||||
<div style="margin: 10px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card shadow="always">
|
||||
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import CountTo from "/@/components/ReCountTo";
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -18,7 +18,9 @@
|
||||
forceFallback="true"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div :class="'item'+' '+ 'item-' + element.num">{{ element.num }}</div>
|
||||
<div :class="'item' + ' ' + 'item-' + element.num">
|
||||
{{ element.num }}
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-card>
|
||||
@ -41,7 +43,7 @@
|
||||
animation="300"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div class="item-single">{{element.name}} {{ index }}</div>
|
||||
<div class="item-single">{{ element.name }} {{ index }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-card>
|
||||
@ -56,7 +58,11 @@
|
||||
</template>
|
||||
<!-- 拖拽实现元素位置切换 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -66,7 +72,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import draggable from "vuedraggable/src/vuedraggable";
|
||||
import { reactive, toRefs, onMounted } from "vue";
|
||||
export default {
|
||||
@ -105,6 +111,7 @@ export default {
|
||||
onMounted(() => {
|
||||
// 使用原生sortable实现元素位置切换
|
||||
// @ts-ignore
|
||||
// eslint-disable-next-line no-undef
|
||||
new Sortable(document.querySelector(".cut-container"), {
|
||||
swap: true,
|
||||
forceFallback: true,
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { Amap } from "/@/components/ReMap";
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -5,20 +5,51 @@
|
||||
<div class="card-header">
|
||||
<span>无缝滚动示例</span>
|
||||
<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 class="button" type="text" @click="changeDirection('bottom')">
|
||||
<span :style="{color: classOption.direction === 'bottom' ? 'red' : ''}">向下滚动</span>
|
||||
<el-button
|
||||
class="button"
|
||||
type="text"
|
||||
@click="changeDirection('bottom')"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
color: classOption.direction === 'bottom' ? 'red' : ''
|
||||
}"
|
||||
>向下滚动</span
|
||||
>
|
||||
</el-button>
|
||||
<el-button class="button" type="text" @click="changeDirection('left')">
|
||||
<span :style="{color: classOption.direction === 'left' ? 'red' : ''}">向左滚动</span>
|
||||
<el-button
|
||||
class="button"
|
||||
type="text"
|
||||
@click="changeDirection('left')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'left' ? 'red' : '' }"
|
||||
>向左滚动</span
|
||||
>
|
||||
</el-button>
|
||||
<el-button class="button" type="text" @click="changeDirection('right')">
|
||||
<span :style="{color: classOption.direction === 'right' ? 'red' : ''}">向右滚动</span>
|
||||
<el-button
|
||||
class="button"
|
||||
type="text"
|
||||
@click="changeDirection('right')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'right' ? 'red' : '' }"
|
||||
>向右滚动</span
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<SeamlessScroll ref="scroll" :data="listData" :class-option="classOption" class="warp">
|
||||
<SeamlessScroll
|
||||
ref="scroll"
|
||||
:data="listData"
|
||||
:class-option="classOption"
|
||||
class="warp"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="(item, index) in listData" :key="index">
|
||||
<span class="title" v-text="item.title"></span>
|
||||
@ -29,7 +60,7 @@
|
||||
</el-space>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { ref, unref } from "vue";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
|
||||
@ -39,6 +70,7 @@ export default {
|
||||
SeamlessScroll
|
||||
},
|
||||
setup() {
|
||||
// eslint-disable-next-line no-undef
|
||||
const scroll = templateRef<ElRef | null>("scroll", null);
|
||||
|
||||
let listData = ref([
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
<template>
|
||||
<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>
|
||||
<div class="card-header">
|
||||
<span>{{item.title}}</span>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<Selector
|
||||
@ -17,7 +22,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Selector from "/@/components/ReSelector";
|
||||
|
||||
@ -38,7 +43,7 @@ export default {
|
||||
}
|
||||
]);
|
||||
|
||||
const selectedVal = ({ left, right, whole }) => {
|
||||
const selectedVal = ({ left, right }) => {
|
||||
selectRange.value = `${left}-${right}`;
|
||||
};
|
||||
|
||||
|
||||
@ -2,32 +2,31 @@
|
||||
<div id="mse"></div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
import Player from "xgplayer/dist/simple_player";
|
||||
import volume from 'xgplayer/dist/controls/volume';
|
||||
import playbackRate from 'xgplayer/dist/controls/playbackRate';
|
||||
import screenShot from 'xgplayer/dist/controls/screenShot';
|
||||
import { deviceDetection } from "/@/utils/deviceDetection"
|
||||
import volume from "xgplayer/dist/controls/volume";
|
||||
import playbackRate from "xgplayer/dist/controls/playbackRate";
|
||||
import screenShot from "xgplayer/dist/controls/screenShot";
|
||||
import { deviceDetection } from "/@/utils/deviceDetection";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
let player = new Player({
|
||||
new Player({
|
||||
id: "mse",
|
||||
autoplay: false,
|
||||
screenShot: true,
|
||||
url:
|
||||
"https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
|
||||
url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
|
||||
poster:
|
||||
"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],
|
||||
playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
|
||||
playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
|
||||
});
|
||||
});
|
||||
return {};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -6,39 +6,39 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, onBeforeUnmount, ref, reactive } from 'vue'
|
||||
import WangEditor from 'wangeditor'
|
||||
import { onMounted, onBeforeUnmount, ref, reactive } from "vue";
|
||||
import WangEditor from "wangeditor";
|
||||
|
||||
export default {
|
||||
name: 'editor',
|
||||
name: "editor",
|
||||
setup() {
|
||||
const editor = ref()
|
||||
const editor = ref();
|
||||
const content = reactive({
|
||||
html: '',
|
||||
text: '',
|
||||
})
|
||||
html: "",
|
||||
text: ""
|
||||
});
|
||||
|
||||
let instance
|
||||
let instance;
|
||||
onMounted(() => {
|
||||
instance = new WangEditor(editor.value)
|
||||
instance = new WangEditor(editor.value);
|
||||
Object.assign(instance.config, {
|
||||
onchange() {
|
||||
content.html = instance.txt.html()
|
||||
},
|
||||
})
|
||||
instance.create()
|
||||
})
|
||||
content.html = instance.txt.html();
|
||||
}
|
||||
});
|
||||
instance.create();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
instance.destroy()
|
||||
instance = null
|
||||
})
|
||||
instance.destroy();
|
||||
instance = null;
|
||||
});
|
||||
|
||||
return {
|
||||
editor,
|
||||
content,
|
||||
}
|
||||
},
|
||||
content
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -50,4 +50,4 @@ export default {
|
||||
z-index: 999 !important;
|
||||
position: static;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -18,17 +18,17 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import imgs from '/@/assets/401.gif'
|
||||
import { ref } from "vue"
|
||||
<script lang="ts">
|
||||
import imgs from "/@/assets/401.gif";
|
||||
import { ref } from "vue";
|
||||
export default {
|
||||
name: "401",
|
||||
setup() {
|
||||
const img = ref(`${imgs}?${new Date()}`)
|
||||
const img = ref(`${imgs}?${new Date()}`);
|
||||
return {
|
||||
img
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -34,9 +34,9 @@ export default {
|
||||
return {
|
||||
message,
|
||||
four,
|
||||
four_cloud,
|
||||
four_cloud
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<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>
|
||||
<!-- 画布 -->
|
||||
@ -13,23 +19,21 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { ref, unref, onMounted, nextTick } from "vue";
|
||||
<script lang="ts">
|
||||
import { ref, unref, onMounted } from "vue";
|
||||
import LogicFlow from "@logicflow/core";
|
||||
import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
|
||||
import "@logicflow/core/dist/style/index.css";
|
||||
import "@logicflow/extension/lib/style/index.css";
|
||||
import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart";
|
||||
|
||||
import {
|
||||
toTurboData,
|
||||
toLogicflowData
|
||||
} from "/@/components/ReFlowChart/src/adpterForTurbo";
|
||||
import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
|
||||
import { BpmnNode } from "/@/components/ReFlowChart/src/config";
|
||||
import demoData from "./dataTurbo.json";
|
||||
export default {
|
||||
components: { NodePanel, Control, DataDialog },
|
||||
setup() {
|
||||
// eslint-disable-next-line no-undef
|
||||
let lf = ref<ElRef>(null);
|
||||
let graphData = ref(null);
|
||||
let dataVisible = ref(false);
|
||||
@ -124,4 +128,3 @@ export default {
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<info :ruleForm="contextInfo" @on-behavior="onLogin" @refreshVerify="refreshVerify" />
|
||||
<info
|
||||
:ruleForm="contextInfo"
|
||||
@on-behavior="onLogin"
|
||||
@refreshVerify="refreshVerify"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user