From 0adc256d5326813d15bd4dd7c6c6562864fff002 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Mon, 5 Jul 2021 20:49:32 +0800 Subject: [PATCH] style(components): canonical code --- src/components/BreadCrumb/index.ts | 10 - src/components/Cropper/index.ts | 10 - src/components/Cropper/src/index.ts | 131 -------- src/components/Flop/index.ts | 10 - src/components/FlowChart/index.ts | 22 -- src/components/HamBurger/index.ts | 10 - src/components/ReBreadCrumb/index.ts | 10 + .../src/index.vue} | 2 +- src/components/ReCountTo/index.ts | 10 + .../countTo.tsx => ReCountTo/src/index.tsx} | 0 .../{countTo => ReCountTo}/src/props.ts | 0 src/components/ReCropper/index.ts | 10 + .../Cropper.tsx => ReCropper/src/index.tsx} | 30 +- src/components/ReFlop/index.ts | 10 + src/components/ReFlop/src/Filpper.tsx | 95 ++++++ .../Flipper.vue => ReFlop/src/filpper.css} | 96 ------ src/components/{Flop => ReFlop}/src/index.vue | 12 +- src/components/ReFlowChart/index.ts | 22 ++ .../src/Control.vue | 0 .../src/DataDialog.vue | 0 .../src/NodePanel.vue | 0 .../src/adpterForTurbo.ts | 0 .../src/assets/background/click.png | Bin .../src/assets/background/download.png | Bin .../src/assets/background/end.png | Bin .../src/assets/background/push.png | Bin .../src/assets/background/start.png | Bin .../src/assets/background/time.png | Bin .../src/assets/background/user.png | Bin .../src/assets/iconfont/iconfont.css | 0 .../src/assets/iconfont/iconfont.eot | Bin .../src/assets/iconfont/iconfont.js | 0 .../src/assets/iconfont/iconfont.json | 0 .../src/assets/iconfont/iconfont.svg | 0 .../src/assets/iconfont/iconfont.ttf | Bin .../src/assets/iconfont/iconfont.woff | Bin .../src/assets/iconfont/iconfont.woff2 | Bin .../{FlowChart => ReFlowChart}/src/config.ts | 0 src/components/ReHamBurger/index.ts | 10 + .../src/index.vue} | 0 src/components/{info => ReInfo}/index.vue | 0 src/components/{Map => ReMap}/index.ts | 0 src/components/{Map => ReMap}/src/Amap.vue | 0 .../{Map => ReMap}/src/BaiduMap.vue | 0 src/components/ReSeamlessScroll/index.ts | 10 + .../src/index.vue} | 0 .../src/utils.ts | 0 src/components/ReSelector/index.ts | 10 + .../{selector => ReSelector}/src/index.css | 0 .../src/index.ts => ReSelector/src/index.tsx} | 113 +++---- src/components/ReSplitPane/index.css | 44 +++ .../index.vue => ReSplitPane/index.tsx} | 140 ++------ .../resizer.vue => ReSplitPane/resizer.css} | 31 -- src/components/ReSplitPane/resizer.tsx | 23 ++ src/components/SeamlessScroll/index.ts | 10 - src/components/countTo/index.ts | 10 - src/components/countTo/src/index.ts | 180 ---------- src/components/selector/index.ts | 10 - src/components/selector/src/selector.tsx | 309 ------------------ src/layout/components/Navbar.vue | 4 +- src/views/components/count-to/index.vue | 2 +- src/views/components/cropping/index.vue | 31 +- src/views/components/map/index.vue | 12 +- .../components/seamless-scroll/index.vue | 2 +- src/views/components/selector/index.vue | 19 +- src/views/components/split-pane/index.vue | 4 +- src/views/flow-chart/index.vue | 6 +- src/views/login.vue | 2 +- src/views/register.vue | 2 +- src/views/welcome.vue | 2 +- types/global.d.ts | 2 + 71 files changed, 400 insertions(+), 1078 deletions(-) delete mode 100644 src/components/BreadCrumb/index.ts delete mode 100644 src/components/Cropper/index.ts delete mode 100644 src/components/Cropper/src/index.ts delete mode 100644 src/components/Flop/index.ts delete mode 100644 src/components/FlowChart/index.ts delete mode 100644 src/components/HamBurger/index.ts create mode 100644 src/components/ReBreadCrumb/index.ts rename src/components/{BreadCrumb/src/BreadCrumb.vue => ReBreadCrumb/src/index.vue} (98%) create mode 100644 src/components/ReCountTo/index.ts rename src/components/{countTo/src/countTo.tsx => ReCountTo/src/index.tsx} (100%) rename src/components/{countTo => ReCountTo}/src/props.ts (100%) create mode 100644 src/components/ReCropper/index.ts rename src/components/{Cropper/src/Cropper.tsx => ReCropper/src/index.tsx} (82%) create mode 100644 src/components/ReFlop/index.ts create mode 100644 src/components/ReFlop/src/Filpper.tsx rename src/components/{Flop/src/Flipper.vue => ReFlop/src/filpper.css} (57%) rename src/components/{Flop => ReFlop}/src/index.vue (95%) create mode 100644 src/components/ReFlowChart/index.ts rename src/components/{FlowChart => ReFlowChart}/src/Control.vue (100%) rename src/components/{FlowChart => ReFlowChart}/src/DataDialog.vue (100%) rename src/components/{FlowChart => ReFlowChart}/src/NodePanel.vue (100%) rename src/components/{FlowChart => ReFlowChart}/src/adpterForTurbo.ts (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/background/click.png (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/background/download.png (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/background/end.png (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/background/push.png (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/background/start.png (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/background/time.png (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/background/user.png (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/iconfont/iconfont.css (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/iconfont/iconfont.eot (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/iconfont/iconfont.js (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/iconfont/iconfont.json (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/iconfont/iconfont.svg (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/iconfont/iconfont.ttf (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/iconfont/iconfont.woff (100%) rename src/components/{FlowChart => ReFlowChart}/src/assets/iconfont/iconfont.woff2 (100%) rename src/components/{FlowChart => ReFlowChart}/src/config.ts (100%) create mode 100644 src/components/ReHamBurger/index.ts rename src/components/{HamBurger/src/HamBurger.vue => ReHamBurger/src/index.vue} (100%) rename src/components/{info => ReInfo}/index.vue (100%) rename src/components/{Map => ReMap}/index.ts (100%) rename src/components/{Map => ReMap}/src/Amap.vue (100%) rename src/components/{Map => ReMap}/src/BaiduMap.vue (100%) create mode 100644 src/components/ReSeamlessScroll/index.ts rename src/components/{SeamlessScroll/src/SeamlessScroll.vue => ReSeamlessScroll/src/index.vue} (100%) rename src/components/{SeamlessScroll => ReSeamlessScroll}/src/utils.ts (100%) create mode 100644 src/components/ReSelector/index.ts rename src/components/{selector => ReSelector}/src/index.css (100%) rename src/components/{selector/src/index.ts => ReSelector/src/index.tsx} (82%) create mode 100644 src/components/ReSplitPane/index.css rename src/components/{splitPane/index.vue => ReSplitPane/index.tsx} (56%) rename src/components/{splitPane/resizer.vue => ReSplitPane/resizer.css} (56%) create mode 100644 src/components/ReSplitPane/resizer.tsx delete mode 100644 src/components/SeamlessScroll/index.ts delete mode 100644 src/components/countTo/index.ts delete mode 100644 src/components/countTo/src/index.ts delete mode 100644 src/components/selector/index.ts delete mode 100644 src/components/selector/src/selector.tsx diff --git a/src/components/BreadCrumb/index.ts b/src/components/BreadCrumb/index.ts deleted file mode 100644 index 7a1ae2ec3..000000000 --- a/src/components/BreadCrumb/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from "vue" -import breadCrumb from "./src/BreadCrumb.vue" - -export const BreadCrumb = Object.assign(breadCrumb, { - install(app: App) { - app.component(breadCrumb.name, breadCrumb) - } -}) - -export default BreadCrumb \ No newline at end of file diff --git a/src/components/Cropper/index.ts b/src/components/Cropper/index.ts deleted file mode 100644 index 86253a33c..000000000 --- a/src/components/Cropper/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from "vue" -import cropper from "./src/Cropper" - -export const Cropper = Object.assign(cropper, { - install(app: App) { - app.component(cropper.name, cropper) - } -}) - -export default Cropper \ No newline at end of file diff --git a/src/components/Cropper/src/index.ts b/src/components/Cropper/src/index.ts deleted file mode 100644 index 961c065d1..000000000 --- a/src/components/Cropper/src/index.ts +++ /dev/null @@ -1,131 +0,0 @@ -/** - - - */ diff --git a/src/components/Flop/index.ts b/src/components/Flop/index.ts deleted file mode 100644 index 4c00336c8..000000000 --- a/src/components/Flop/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from "vue" -import flop from "./src/index.vue" - -export const Flop = Object.assign(flop, { - install(app: App) { - app.component(flop.name, flop) - } -}) - -export default Flop \ No newline at end of file diff --git a/src/components/FlowChart/index.ts b/src/components/FlowChart/index.ts deleted file mode 100644 index 43551c3fe..000000000 --- a/src/components/FlowChart/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { App } from "vue" -import control from "./src/Control.vue" -import nodePanel from "./src/NodePanel.vue" -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) - } -}) \ No newline at end of file diff --git a/src/components/HamBurger/index.ts b/src/components/HamBurger/index.ts deleted file mode 100644 index 8fac8808a..000000000 --- a/src/components/HamBurger/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from "vue" -import hamBurger from "./src/HamBurger.vue" - -export const HamBurger = Object.assign(hamBurger, { - install(app: App) { - app.component(hamBurger.name, hamBurger) - } -}) - -export default HamBurger \ No newline at end of file diff --git a/src/components/ReBreadCrumb/index.ts b/src/components/ReBreadCrumb/index.ts new file mode 100644 index 000000000..de28e7d53 --- /dev/null +++ b/src/components/ReBreadCrumb/index.ts @@ -0,0 +1,10 @@ +import { App } from "vue"; +import reBreadCrumb from "./src/index.vue"; + +export const ReBreadCrumb = Object.assign(reBreadCrumb, { + install(app: App) { + app.component(reBreadCrumb.name, reBreadCrumb); + }, +}); + +export default ReBreadCrumb; diff --git a/src/components/BreadCrumb/src/BreadCrumb.vue b/src/components/ReBreadCrumb/src/index.vue similarity index 98% rename from src/components/BreadCrumb/src/BreadCrumb.vue rename to src/components/ReBreadCrumb/src/index.vue index 1da37140e..cf05a4c13 100644 --- a/src/components/BreadCrumb/src/BreadCrumb.vue +++ b/src/components/ReBreadCrumb/src/index.vue @@ -22,7 +22,7 @@ import { ref, defineComponent, watch, Ref } from "vue"; import { useRoute, useRouter, RouteLocationMatched } from "vue-router"; export default defineComponent({ - name: "BreadCrumb", + name: "ReBreadCrumb", setup() { const levelList: Ref = ref([]); const route = useRoute(); diff --git a/src/components/ReCountTo/index.ts b/src/components/ReCountTo/index.ts new file mode 100644 index 000000000..aa96a3f49 --- /dev/null +++ b/src/components/ReCountTo/index.ts @@ -0,0 +1,10 @@ +import { App } from "vue"; +import reCountTo from "./src"; + +export const ReCountTo = Object.assign(reCountTo, { + install(app: App) { + app.component(reCountTo.name, reCountTo); + }, +}); + +export default ReCountTo; diff --git a/src/components/countTo/src/countTo.tsx b/src/components/ReCountTo/src/index.tsx similarity index 100% rename from src/components/countTo/src/countTo.tsx rename to src/components/ReCountTo/src/index.tsx diff --git a/src/components/countTo/src/props.ts b/src/components/ReCountTo/src/props.ts similarity index 100% rename from src/components/countTo/src/props.ts rename to src/components/ReCountTo/src/props.ts diff --git a/src/components/ReCropper/index.ts b/src/components/ReCropper/index.ts new file mode 100644 index 000000000..f9fb66823 --- /dev/null +++ b/src/components/ReCropper/index.ts @@ -0,0 +1,10 @@ +import { App } from "vue"; +import reCropper from "./src"; + +export const ReCropper = Object.assign(reCropper, { + install(app: App) { + app.component(reCropper.name, reCropper); + }, +}); + +export default ReCropper; diff --git a/src/components/Cropper/src/Cropper.tsx b/src/components/ReCropper/src/index.tsx similarity index 82% rename from src/components/Cropper/src/Cropper.tsx rename to src/components/ReCropper/src/index.tsx index 4f0efd816..e6c3370dc 100644 --- a/src/components/Cropper/src/Cropper.tsx +++ b/src/components/ReCropper/src/index.tsx @@ -11,7 +11,6 @@ import { } from "vue"; import { templateRef } from "@vueuse/core"; import { useAttrs } from "/@/utils/useAttrs"; -import { emitter } from "/@/utils/mitt"; import Cropper from "cropperjs"; import "cropperjs/dist/cropper.css"; @@ -40,6 +39,7 @@ const defaultOptions: Cropper.Options = { movable: true, rotatable: true, }; + export default defineComponent({ name: "Cropper", props: { @@ -73,7 +73,7 @@ export default defineComponent({ }, setup(props) { const cropper: any = ref>(null); - const imgElRef = templateRef("imgElRef", null); + const imgElRef = templateRef("imgElRef", null); const isReady = ref(false); @@ -98,7 +98,7 @@ export default defineComponent({ } ); - async function init() { + function init() { const imgEl = unref(imgElRef); if (!imgEl) { return; @@ -115,23 +115,31 @@ export default defineComponent({ onBeforeMount(() => { nextTick(() => { init(); - // tsx语法返回渲染模板，外部组件想调用内部方法或者获取setup里面的实例，暂时想到的办法是通过公共事件 - emitter.emit("cropperInstance", unref(cropper)); }); }); - return () => ( + return { + props, + imgElRef, + cropper, + getWrapperStyle, + getImageStyle, + }; + }, + + render() { + return ( <>
{props.alt}
diff --git a/src/components/ReFlop/index.ts b/src/components/ReFlop/index.ts new file mode 100644 index 000000000..bf7bbb554 --- /dev/null +++ b/src/components/ReFlop/index.ts @@ -0,0 +1,10 @@ +import { App } from "vue"; +import reFlop from "./src/index.vue"; + +export const ReFlop = Object.assign(reFlop, { + install(app: App) { + app.component(reFlop.name, reFlop); + }, +}); + +export default ReFlop; diff --git a/src/components/ReFlop/src/Filpper.tsx b/src/components/ReFlop/src/Filpper.tsx new file mode 100644 index 000000000..2945bbdd0 --- /dev/null +++ b/src/components/ReFlop/src/Filpper.tsx @@ -0,0 +1,95 @@ +import { defineComponent, ref } from "vue"; +import { propTypes } from "/@/utils/propTypes"; +import "./filpper.css"; + +export default defineComponent({ + name: "Filpper", + props: { + // front paper text + // 前牌文字 + frontText: propTypes.number.def(0), + // back paper text + // 后牌文字 + backText: propTypes.number.def(1), + // flipping duration, please be consistent with the CSS animation-duration value. + // 翻牌动画时间，与CSS中设置的animation-duration保持一致 + duration: propTypes.number.def(600), + }, + setup(props) { + const { frontText, backText, duration } = props; + let isFlipping = ref(false); + let flipType = ref("down"); + let frontTextFromData = ref(frontText); + let backTextFromData = ref(backText); + + const textClass = (number: number) => { + return "number" + number; + }; + + const flip = (type: string, front: number, back: number) => { + // 如果处于翻转中，则不执行 + if (isFlipping.value) return false; + frontTextFromData.value = front; + backTextFromData.value = back; + // 根据传递过来的type设置翻转方向 + flipType.value = type; + // 设置翻转状态为true + isFlipping.value = true; + + setTimeout(() => { + // 设置翻转状态为false + isFlipping.value = false; + frontTextFromData.value = back; + }, duration); + }; + + // 下翻牌 + const flipDown = (front: any, back: any): void => { + flip("down", front, back); + }; + + // 上翻牌 + const flipUp = (front: any, back: any): void => { + flip("up", front, back); + }; + + // 设置前牌文字 + function setFront(text: number): void { + frontTextFromData.value = text; + } + + // 设置后牌文字 + const setBack = (text: number): void => { + backTextFromData.value = text; + }; + + return { + flipType, + isFlipping, + frontTextFromData, + backTextFromData, + textClass, + flipDown, + flipUp, + setFront, + setBack, + }; + }, + + render() { + return ( + <> +
+
+
+
+ + ); + }, +}); diff --git a/src/components/Flop/src/Flipper.vue b/src/components/ReFlop/src/filpper.css similarity index 57% rename from src/components/Flop/src/Flipper.vue rename to src/components/ReFlop/src/filpper.css index d122a0f5c..16f13b3ba 100644 --- a/src/components/Flop/src/Flipper.vue +++ b/src/components/ReFlop/src/filpper.css @@ -1,98 +1,3 @@ - - - - - diff --git a/src/components/Flop/src/index.vue b/src/components/ReFlop/src/index.vue similarity index 95% rename from src/components/Flop/src/index.vue rename to src/components/ReFlop/src/index.vue index 88843c40f..527ff1023 100644 --- a/src/components/Flop/src/index.vue +++ b/src/components/ReFlop/src/index.vue @@ -13,11 +13,11 @@ diff --git a/src/components/ReFlowChart/index.ts b/src/components/ReFlowChart/index.ts new file mode 100644 index 000000000..ee2e3683e --- /dev/null +++ b/src/components/ReFlowChart/index.ts @@ -0,0 +1,22 @@ +import { App } from "vue"; +import control from "./src/Control.vue"; +import nodePanel from "./src/NodePanel.vue"; +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); + }, +}); diff --git a/src/components/FlowChart/src/Control.vue b/src/components/ReFlowChart/src/Control.vue similarity index 100% rename from src/components/FlowChart/src/Control.vue rename to src/components/ReFlowChart/src/Control.vue diff --git a/src/components/FlowChart/src/DataDialog.vue b/src/components/ReFlowChart/src/DataDialog.vue similarity index 100% rename from src/components/FlowChart/src/DataDialog.vue rename to src/components/ReFlowChart/src/DataDialog.vue diff --git a/src/components/FlowChart/src/NodePanel.vue b/src/components/ReFlowChart/src/NodePanel.vue similarity index 100% rename from src/components/FlowChart/src/NodePanel.vue rename to src/components/ReFlowChart/src/NodePanel.vue diff --git a/src/components/FlowChart/src/adpterForTurbo.ts b/src/components/ReFlowChart/src/adpterForTurbo.ts similarity index 100% rename from src/components/FlowChart/src/adpterForTurbo.ts rename to src/components/ReFlowChart/src/adpterForTurbo.ts diff --git a/src/components/FlowChart/src/assets/background/click.png b/src/components/ReFlowChart/src/assets/background/click.png similarity index 100% rename from src/components/FlowChart/src/assets/background/click.png rename to src/components/ReFlowChart/src/assets/background/click.png diff --git a/src/components/FlowChart/src/assets/background/download.png b/src/components/ReFlowChart/src/assets/background/download.png similarity index 100% rename from src/components/FlowChart/src/assets/background/download.png rename to src/components/ReFlowChart/src/assets/background/download.png diff --git a/src/components/FlowChart/src/assets/background/end.png b/src/components/ReFlowChart/src/assets/background/end.png similarity index 100% rename from src/components/FlowChart/src/assets/background/end.png rename to src/components/ReFlowChart/src/assets/background/end.png diff --git a/src/components/FlowChart/src/assets/background/push.png b/src/components/ReFlowChart/src/assets/background/push.png similarity index 100% rename from src/components/FlowChart/src/assets/background/push.png rename to src/components/ReFlowChart/src/assets/background/push.png diff --git a/src/components/FlowChart/src/assets/background/start.png b/src/components/ReFlowChart/src/assets/background/start.png similarity index 100% rename from src/components/FlowChart/src/assets/background/start.png rename to src/components/ReFlowChart/src/assets/background/start.png diff --git a/src/components/FlowChart/src/assets/background/time.png b/src/components/ReFlowChart/src/assets/background/time.png similarity index 100% rename from src/components/FlowChart/src/assets/background/time.png rename to src/components/ReFlowChart/src/assets/background/time.png diff --git a/src/components/FlowChart/src/assets/background/user.png b/src/components/ReFlowChart/src/assets/background/user.png similarity index 100% rename from src/components/FlowChart/src/assets/background/user.png rename to src/components/ReFlowChart/src/assets/background/user.png diff --git a/src/components/FlowChart/src/assets/iconfont/iconfont.css b/src/components/ReFlowChart/src/assets/iconfont/iconfont.css similarity index 100% rename from src/components/FlowChart/src/assets/iconfont/iconfont.css rename to src/components/ReFlowChart/src/assets/iconfont/iconfont.css diff --git a/src/components/FlowChart/src/assets/iconfont/iconfont.eot b/src/components/ReFlowChart/src/assets/iconfont/iconfont.eot similarity index 100% rename from src/components/FlowChart/src/assets/iconfont/iconfont.eot rename to src/components/ReFlowChart/src/assets/iconfont/iconfont.eot diff --git a/src/components/FlowChart/src/assets/iconfont/iconfont.js b/src/components/ReFlowChart/src/assets/iconfont/iconfont.js similarity index 100% rename from src/components/FlowChart/src/assets/iconfont/iconfont.js rename to src/components/ReFlowChart/src/assets/iconfont/iconfont.js diff --git a/src/components/FlowChart/src/assets/iconfont/iconfont.json b/src/components/ReFlowChart/src/assets/iconfont/iconfont.json similarity index 100% rename from src/components/FlowChart/src/assets/iconfont/iconfont.json rename to src/components/ReFlowChart/src/assets/iconfont/iconfont.json diff --git a/src/components/FlowChart/src/assets/iconfont/iconfont.svg b/src/components/ReFlowChart/src/assets/iconfont/iconfont.svg similarity index 100% rename from src/components/FlowChart/src/assets/iconfont/iconfont.svg rename to src/components/ReFlowChart/src/assets/iconfont/iconfont.svg diff --git a/src/components/FlowChart/src/assets/iconfont/iconfont.ttf b/src/components/ReFlowChart/src/assets/iconfont/iconfont.ttf similarity index 100% rename from src/components/FlowChart/src/assets/iconfont/iconfont.ttf rename to src/components/ReFlowChart/src/assets/iconfont/iconfont.ttf diff --git a/src/components/FlowChart/src/assets/iconfont/iconfont.woff b/src/components/ReFlowChart/src/assets/iconfont/iconfont.woff similarity index 100% rename from src/components/FlowChart/src/assets/iconfont/iconfont.woff rename to src/components/ReFlowChart/src/assets/iconfont/iconfont.woff diff --git a/src/components/FlowChart/src/assets/iconfont/iconfont.woff2 b/src/components/ReFlowChart/src/assets/iconfont/iconfont.woff2 similarity index 100% rename from src/components/FlowChart/src/assets/iconfont/iconfont.woff2 rename to src/components/ReFlowChart/src/assets/iconfont/iconfont.woff2 diff --git a/src/components/FlowChart/src/config.ts b/src/components/ReFlowChart/src/config.ts similarity index 100% rename from src/components/FlowChart/src/config.ts rename to src/components/ReFlowChart/src/config.ts diff --git a/src/components/ReHamBurger/index.ts b/src/components/ReHamBurger/index.ts new file mode 100644 index 000000000..658354af5 --- /dev/null +++ b/src/components/ReHamBurger/index.ts @@ -0,0 +1,10 @@ +import { App } from "vue"; +import reHamBurger from "./src/index.vue"; + +export const ReHamBurger = Object.assign(reHamBurger, { + install(app: App) { + app.component(reHamBurger.name, reHamBurger); + }, +}); + +export default ReHamBurger; diff --git a/src/components/HamBurger/src/HamBurger.vue b/src/components/ReHamBurger/src/index.vue similarity index 100% rename from src/components/HamBurger/src/HamBurger.vue rename to src/components/ReHamBurger/src/index.vue diff --git a/src/components/info/index.vue b/src/components/ReInfo/index.vue similarity index 100% rename from src/components/info/index.vue rename to src/components/ReInfo/index.vue diff --git a/src/components/Map/index.ts b/src/components/ReMap/index.ts similarity index 100% rename from src/components/Map/index.ts rename to src/components/ReMap/index.ts diff --git a/src/components/Map/src/Amap.vue b/src/components/ReMap/src/Amap.vue similarity index 100% rename from src/components/Map/src/Amap.vue rename to src/components/ReMap/src/Amap.vue diff --git a/src/components/Map/src/BaiduMap.vue b/src/components/ReMap/src/BaiduMap.vue similarity index 100% rename from src/components/Map/src/BaiduMap.vue rename to src/components/ReMap/src/BaiduMap.vue diff --git a/src/components/ReSeamlessScroll/index.ts b/src/components/ReSeamlessScroll/index.ts new file mode 100644 index 000000000..748397f46 --- /dev/null +++ b/src/components/ReSeamlessScroll/index.ts @@ -0,0 +1,10 @@ +import { App } from "vue"; +import reSeamlessScroll from "./src/index.vue"; + +export const ReSeamlessScroll = Object.assign(reSeamlessScroll, { + install(app: App) { + app.component(reSeamlessScroll.name, reSeamlessScroll); + }, +}); + +export default ReSeamlessScroll; diff --git a/src/components/SeamlessScroll/src/SeamlessScroll.vue b/src/components/ReSeamlessScroll/src/index.vue similarity index 100% rename from src/components/SeamlessScroll/src/SeamlessScroll.vue rename to src/components/ReSeamlessScroll/src/index.vue diff --git a/src/components/SeamlessScroll/src/utils.ts b/src/components/ReSeamlessScroll/src/utils.ts similarity index 100% rename from src/components/SeamlessScroll/src/utils.ts rename to src/components/ReSeamlessScroll/src/utils.ts diff --git a/src/components/ReSelector/index.ts b/src/components/ReSelector/index.ts new file mode 100644 index 000000000..ae3a0a4a4 --- /dev/null +++ b/src/components/ReSelector/index.ts @@ -0,0 +1,10 @@ +import { App } from "vue"; +import reSelector from "./src"; + +export const ReSelector = Object.assign(reSelector, { + install(app: App) { + app.component(reSelector.name, reSelector); + }, +}); + +export default ReSelector; diff --git a/src/components/selector/src/index.css b/src/components/ReSelector/src/index.css similarity index 100% rename from src/components/selector/src/index.css rename to src/components/ReSelector/src/index.css diff --git a/src/components/selector/src/index.ts b/src/components/ReSelector/src/index.tsx similarity index 82% rename from src/components/selector/src/index.ts rename to src/components/ReSelector/src/index.tsx index ffb977919..80693dbaf 100644 --- a/src/components/selector/src/index.ts +++ b/src/components/ReSelector/src/index.tsx @@ -1,39 +1,14 @@ -/** - - - - - -*/ \ No newline at end of file diff --git a/src/components/ReSplitPane/index.css b/src/components/ReSplitPane/index.css new file mode 100644 index 000000000..af5abdb65 --- /dev/null +++ b/src/components/ReSplitPane/index.css @@ -0,0 +1,44 @@ +.clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} +.vue-splitter-container { + height: 100%; + position: relative; +} +.vue-splitter-container-mask { + z-index: 9999; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} + +.splitter-pane.vertical.splitter-paneL { + position: absolute; + left: 0px; + height: 100%; + padding-right: 3px; +} +.splitter-pane.vertical.splitter-paneR { + position: absolute; + right: 0px; + height: 100%; + padding-left: 3px; +} +.splitter-pane.horizontal.splitter-paneL { + position: absolute; + top: 0px; + width: 100%; +} +.splitter-pane.horizontal.splitter-paneR { + position: absolute; + bottom: 0px; + width: 100%; + padding-top: 3px; +} diff --git a/src/components/splitPane/index.vue b/src/components/ReSplitPane/index.tsx similarity index 56% rename from src/components/splitPane/index.vue rename to src/components/ReSplitPane/index.tsx index 593a9fe19..cf8c3f4e1 100644 --- a/src/components/splitPane/index.vue +++ b/src/components/ReSplitPane/index.tsx @@ -1,45 +1,6 @@ - - - - - diff --git a/src/components/splitPane/resizer.vue b/src/components/ReSplitPane/resizer.css similarity index 56% rename from src/components/splitPane/resizer.vue rename to src/components/ReSplitPane/resizer.css index 83c99f36e..bacc40c28 100644 --- a/src/components/splitPane/resizer.vue +++ b/src/components/ReSplitPane/resizer.css @@ -1,33 +1,3 @@ - - - - - diff --git a/src/components/ReSplitPane/resizer.tsx b/src/components/ReSplitPane/resizer.tsx new file mode 100644 index 000000000..6e6c413c4 --- /dev/null +++ b/src/components/ReSplitPane/resizer.tsx @@ -0,0 +1,23 @@ +import { computed, unref, defineComponent } from "vue"; +import "./resizer.css"; + +export default defineComponent({ + name: "resizer", + props: { + split: { + type: String, + required: true, + }, + className: { + type: String, + default: "", + }, + }, + setup(props) { + let classes = computed(() => { + return ["splitter-pane-resizer", props.split, props.className].join(" "); + }); + + return () =>
; + }, +}); diff --git a/src/components/SeamlessScroll/index.ts b/src/components/SeamlessScroll/index.ts deleted file mode 100644 index 921ca15e7..000000000 --- a/src/components/SeamlessScroll/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from "vue" -import seamlessScroll from "./src/SeamlessScroll.vue" - -export const SeamlessScroll = Object.assign(seamlessScroll, { - install(app: App) { - app.component(seamlessScroll.name, seamlessScroll) - } -}) - -export default SeamlessScroll \ No newline at end of file diff --git a/src/components/countTo/index.ts b/src/components/countTo/index.ts deleted file mode 100644 index d012bf9b5..000000000 --- a/src/components/countTo/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from "vue"; -import countTo from "./src/countTo"; - -export const CountTo = Object.assign(countTo, { - install(app: App) { - app.component(countTo.name, countTo); - }, -}); - -export default CountTo; diff --git a/src/components/countTo/src/index.ts b/src/components/countTo/src/index.ts deleted file mode 100644 index 9c2f2786c..000000000 --- a/src/components/countTo/src/index.ts +++ /dev/null @@ -1,180 +0,0 @@ -/** - - -*/ \ No newline at end of file diff --git a/src/components/selector/index.ts b/src/components/selector/index.ts deleted file mode 100644 index 646a43829..000000000 --- a/src/components/selector/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from "vue" -import selector from "./src/selector" - -export const Selector = Object.assign(selector, { - install(app: App) { - app.component(selector.name, selector) - } -}) - -export default Selector diff --git a/src/components/selector/src/selector.tsx b/src/components/selector/src/selector.tsx deleted file mode 100644 index 0ed975906..000000000 --- a/src/components/selector/src/selector.tsx +++ /dev/null @@ -1,309 +0,0 @@ -import { - defineComponent, - computed, - nextTick, - onBeforeMount, - getCurrentInstance, - 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" -let selectedDirection = "right" //默认从左往右，索引变大 - -let overList = [] -// 存放第一个选中的元素和最后一个选中元素，只能存放这两个元素 -let selectedList = [] - -export default defineComponent({ - name: "Selector", - props: { - HsKey: { - type: Number || String, - default: 0, - }, - disabled: { - type: Boolean, - default: false, - }, - value: { - type: Number, - default: 0, - }, - max: { - type: Array, - default: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], - }, - // 回显数据的索引，长度必须是2 - echo: { - type: Array, - default: [], - }, - }, - emits: ["selectedVal"], - setup(props, { emit }) { - let vm: any - let currentValue = props.value - - let rateDisabled = computed(() => { - return props.disabled - }) - - let classes = computed(() => { - let result = [] - let i = 0 - let threshold = currentValue - if (currentValue !== Math.floor(currentValue)) { - threshold-- - } - for (; i < threshold; i++) { - result.push(activeClass) - } - for (; i < props.max.length; i++) { - result.push(voidClass) - } - return result - }) - - // 鼠标移入 - const setCurrentValue = (index) => { - if (props.disabled) return - // 当选中一个元素后，开始添加背景色 - if (selectedList.length === 1) { - if (overList.length < 1) overList.push({ index }) - - let firstIndex = overList[0].index - - // 往右走，索引变大 - if (index > firstIndex) { - selectedDirection = "right" - toggleClass( - false, - bothRightSides, - document.querySelector(".hs-select__item" + selectedList[0].index) - ) - - while (index >= firstIndex) { - addClass( - document.querySelector(".hs-select__item" + firstIndex), - inRange - ) - firstIndex++ - } - } else { - selectedDirection = "left" - toggleClass( - true, - bothRightSides, - document.querySelector(".hs-select__item" + selectedList[0].index) - ) - - while (index <= firstIndex) { - addClass( - document.querySelector(".hs-select__item" + firstIndex), - inRange - ) - firstIndex-- - } - } - } - - addClass(document.querySelector("." + voidClass + index), activeClass) - } - - // 鼠标离开 - const resetCurrentValue = (index) => { - if (props.disabled) return - // 移除先检查是否选中 选中则返回false 不移除 - const currentHsDom = document.querySelector("." + voidClass + index) - if (currentHsDom.className.includes(stayClass)) { - return false - } else { - removeClass(currentHsDom, activeClass) - } - - // 当选中一个元素后，开始移除背景色 - if (selectedList.length === 1) { - let firstIndex = overList[0].index - if (index >= firstIndex) { - for (let i = 0; i <= index; i++) { - removeClass( - document.querySelector(".hs-select__item" + i), - inRange - ) - } - } else { - while (index <= firstIndex) { - removeClass( - document.querySelector(".hs-select__item" + index), - inRange - ) - index++ - } - } - } - } - - // 鼠标点击 - const selectValue = (index, item) => { - if (props.disabled) return - let len = selectedList.length - - if (len < 2) { - selectedList.push({ item, index }) - addClass(document.querySelector("." + voidClass + index), stayClass) - - addClass( - document.querySelector(".hs-select__item" + selectedList[0].index), - bothLeftSides - ) - - if (selectedList[1]) { - if (selectedDirection === "right") { - addClass( - document.querySelector( - ".hs-select__item" + selectedList[1].index - ), - bothRightSides - ) - } else { - addClass( - document.querySelector( - ".hs-select__item" + selectedList[1].index - ), - bothLeftSides - ) - } - } - - if (len === 1) { - // 顺时针排序 - if (selectedDirection === "right") { - emit("selectedVal", { - left: selectedList[0].item, - right: selectedList[1].item, - whole: selectedList, - }) - } else { - emit("selectedVal", { - left: selectedList[1].item, - right: selectedList[0].item, - whole: selectedList, - }) - } - } - } else { - nextTick(() => { - selectedList.forEach((v) => { - removeClass( - document.querySelector("." + voidClass + v.index), - activeClass, - stayClass - ) - - removeClass( - document.querySelector(".hs-select__item" + v.index), - bothLeftSides, - bothRightSides - ) - }) - - selectedList = [] - overList = [] - for (let i = 0; i <= props.max.length; i++) { - let currentDom = document.querySelector(".hs-select__item" + i) - if (currentDom) { - removeClass(currentDom, inRange) - } - } - - selectedList.push({ item, index }) - addClass(document.querySelector("." + voidClass + index), stayClass) - - addClass( - document.querySelector(".hs-select__item" + selectedList[0].index), - bothLeftSides - ) - }) - } - } - - // 回显数据 - const echoView = (item) => { - if (item.length === 0) return - - if (item.length > 2 || item.length === 1) { - throw "传入的数组长度必须是2" - } - - item.sort((a, b) => { - return a - b - }) - - addClass( - vm.refs["hsdiv" + props.HsKey + item[0]], - activeClass, - stayClass - ) - - addClass(vm.refs["hstd" + props.HsKey + item[0]], bothLeftSides) - - addClass( - vm.refs["hsdiv" + props.HsKey + item[1]], - activeClass, - stayClass - ) - - addClass(vm.refs["hstd" + props.HsKey + item[1]], bothRightSides) - - while (item[1] >= item[0]) { - addClass(vm.refs["hstd" + props.HsKey + item[0]], inRange) - item[0]++ - } - } - - onBeforeMount(() => { - vm = getCurrentInstance() - nextTick(() => { - echoView(props.echo) - }) - }) - - return () => ( - <> - - - - { - props.max.map((item, key) => { - return - }) - } - - -
setCurrentValue(key)} - onMouseleave={() => resetCurrentValue(key)} - onClick={() => selectValue(key, item)} - style={{ - cursor: unref(rateDisabled) ? 'auto' : 'pointer', textAlign: 'center' - }} - key={key} - > -
- {item} -
-
- - ) - } -}) \ No newline at end of file diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 8b598bf0a..d0924217a 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -42,8 +42,8 @@