@ditari/bsui 5.0.6 → 5.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/layout/Layout.vue2.cjs +2 -1
- package/dist/cjs/components/layout/Layout.vue2.cjs.map +1 -1
- package/dist/cjs/components/layout/Show.cjs +17 -2
- package/dist/cjs/components/layout/Show.cjs.map +1 -1
- package/dist/cjs/components/layout/components/layout/HeaderLayout.vue2.cjs +3 -2
- package/dist/cjs/components/layout/components/layout/HeaderLayout.vue2.cjs.map +1 -1
- package/dist/cjs/components/layout/components/menu/Menu.cjs +15 -11
- package/dist/cjs/components/layout/components/menu/Menu.cjs.map +1 -1
- package/dist/cjs/components/tab/Search.cjs +15 -6
- package/dist/cjs/components/tab/Search.cjs.map +1 -1
- package/dist/cjs/components/tab/Tab.vue2.cjs +0 -1
- package/dist/cjs/components/tab/Tab.vue2.cjs.map +1 -1
- package/dist/esm/components/layout/Layout.vue2.mjs +2 -1
- package/dist/esm/components/layout/Layout.vue2.mjs.map +1 -1
- package/dist/esm/components/layout/Show.mjs +18 -3
- package/dist/esm/components/layout/Show.mjs.map +1 -1
- package/dist/esm/components/layout/components/layout/HeaderLayout.vue2.mjs +3 -2
- package/dist/esm/components/layout/components/layout/HeaderLayout.vue2.mjs.map +1 -1
- package/dist/esm/components/layout/components/menu/Menu.mjs +16 -12
- package/dist/esm/components/layout/components/menu/Menu.mjs.map +1 -1
- package/dist/esm/components/tab/Search.mjs +15 -6
- package/dist/esm/components/tab/Search.mjs.map +1 -1
- package/dist/esm/components/tab/Tab.vue2.mjs +0 -1
- package/dist/esm/components/tab/Tab.vue2.mjs.map +1 -1
- package/dist/types/components/layout/Layout.vue.d.ts +6 -2
- package/dist/types/components/layout/Layout.vue.d.ts.map +1 -1
- package/dist/types/components/layout/Show.d.ts.map +1 -1
- package/dist/types/components/layout/components/layout/HeaderLayout.vue.d.ts +4 -2
- package/dist/types/components/layout/components/layout/HeaderLayout.vue.d.ts.map +1 -1
- package/dist/types/components/layout/components/menu/Menu.d.ts.map +1 -1
- package/dist/types/components/tab/Search.d.ts.map +1 -1
- package/dist/types/components/tab/Tab.vue.d.ts +2 -2
- package/dist/types/components/tab/Tab.vue.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -26,7 +26,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
26
26
|
},
|
|
27
27
|
setup(__props) {
|
|
28
28
|
const props = __props;
|
|
29
|
-
const { layout } = pinia.storeToRefs(store.useAppStore());
|
|
29
|
+
const { layout, modeConfig, sideTokenStyle } = pinia.storeToRefs(store.useAppStore());
|
|
30
30
|
const route = vueRouter.useRoute();
|
|
31
31
|
const { layoutStyle, siderStyle, rightStyle, rightContentStyle } = useStyle();
|
|
32
32
|
useKeepAlive();
|
|
@@ -74,6 +74,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
74
74
|
left: 0;
|
|
75
75
|
width: ${layout.value.sideWidth}px;
|
|
76
76
|
|
|
77
|
+
${modeConfig.value.mode === "light" ? `background:${sideTokenStyle.value.bgColor}!important;` : ""}
|
|
77
78
|
.ant-layout-sider-children {
|
|
78
79
|
display: flex;
|
|
79
80
|
flex-direction: column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.vue2.cjs","sources":["../../../../src/components/layout/Layout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from \"vue\";\r\nimport { useRoute } from \"vue-router\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport DMenu from \"./components/menu/Menu\";\r\nimport SettingDrawer from \"./components/settings/SettingDrawer\";\r\nimport { useAppStore, useKeepAliveStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nimport HeaderLayout from \"./components/layout/HeaderLayout.vue\";\r\nimport RouterContent from \"./components/layout/RouterContent.vue\";\r\nimport AppTheme from \"./components/layout/ThemeApp.vue\";\r\n\r\nconst props = defineProps({\n watermark: { type: Object, required: false, default: () => ({\r\n content: \"\"\r\n }) }\n});\r\n\r\nconst { layout } = storeToRefs(useAppStore());\r\nconst route = useRoute();\r\n\r\nconst { layoutStyle, siderStyle, rightStyle, rightContentStyle } = useStyle();\r\nuseKeepAlive();\r\nconst { watermarkContent } = useWatermark();\r\n\r\nfunction useKeepAlive() {\r\n // 保存需要被缓存的标签\r\n const { save } = useKeepAliveStore();\r\n\r\n watch(\r\n () => route.path,\r\n () => {\r\n save(route);\r\n },\r\n {\r\n immediate: true\r\n }\r\n );\r\n}\r\n\r\nfunction useWatermark() {\r\n const watermarkContent = ref(\"\");\r\n // 监听 watermark 的变化\r\n watch(\r\n () => props.watermark,\r\n val => {\r\n watermarkContent.value = val.content || \"\";\r\n },\r\n { deep: true, immediate: true }\r\n );\r\n\r\n return {\r\n watermarkContent\r\n };\r\n}\r\n\r\nfunction useStyle() {\r\n const layoutStyle = css`\r\n height: 100%;\r\n `;\r\n\r\n const transitionStyle = css`\r\n transition: margin-left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n `;\r\n\r\n const left = computed(\r\n () =>\r\n `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n );\r\n\r\n const siderStyle = computed(\r\n () => css`\r\n position: fixed !important;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: ${layout.value.sideWidth}px;\r\n\r\n .ant-layout-sider-children {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n `\r\n );\r\n\r\n const rightStyle = computed(\r\n () => css`\r\n margin-left: ${left.value};\r\n ${transitionStyle}\r\n `\r\n );\r\n\r\n const rightContentStyle = computed(\r\n () => css`\r\n padding-top: ${layout.value.headerHeight}px;\r\n `\r\n );\r\n\r\n return {\r\n layoutStyle,\r\n siderStyle,\r\n rightStyle,\r\n rightContentStyle\r\n };\r\n}\r\n</script>\r\n\r\n<template>\r\n <app-theme>\r\n <a-layout :class=\"layoutStyle\">\r\n <a-layout-sider\r\n v-model:collapsed=\"layout.collapsed\"\r\n theme=\"light\"\r\n collapsible\r\n :trigger=\"null\"\r\n :class=\"siderStyle\"\r\n >\r\n <slot name=\"logo\"></slot>\r\n <d-menu />\r\n </a-layout-sider>\r\n <a-layout :class=\"rightStyle\">\r\n <a-watermark\r\n :content=\"watermarkContent\"\r\n style=\"display: flex; height: 100%\"\r\n >\r\n <header-layout>\r\n <slot name=\"headerRight\"></slot>\r\n </header-layout>\r\n <a-layout-content :class=\"rightContentStyle\">\r\n <RouterContent />\r\n </a-layout-content>\r\n </a-watermark>\r\n </a-layout>\r\n </a-layout>\r\n </app-theme>\r\n <SettingDrawer />\r\n <a-back-top></a-back-top>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["storeToRefs","useAppStore","useRoute","useKeepAliveStore","watch","watermarkContent","ref","layoutStyle","css","computed","siderStyle","rightStyle","rightContentStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Layout.vue2.cjs","sources":["../../../../src/components/layout/Layout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from \"vue\";\r\nimport { useRoute } from \"vue-router\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport DMenu from \"./components/menu/Menu\";\r\nimport SettingDrawer from \"./components/settings/SettingDrawer\";\r\nimport { useAppStore, useKeepAliveStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nimport HeaderLayout from \"./components/layout/HeaderLayout.vue\";\r\nimport RouterContent from \"./components/layout/RouterContent.vue\";\r\nimport AppTheme from \"./components/layout/ThemeApp.vue\";\r\n\r\nconst props = defineProps({\n watermark: { type: Object, required: false, default: () => ({\r\n content: \"\"\r\n }) }\n});\r\n\r\nconst { layout, modeConfig, sideTokenStyle } = storeToRefs(useAppStore());\r\nconst route = useRoute();\r\n\r\nconst { layoutStyle, siderStyle, rightStyle, rightContentStyle } = useStyle();\r\nuseKeepAlive();\r\nconst { watermarkContent } = useWatermark();\r\n\r\nfunction useKeepAlive() {\r\n // 保存需要被缓存的标签\r\n const { save } = useKeepAliveStore();\r\n\r\n watch(\r\n () => route.path,\r\n () => {\r\n save(route);\r\n },\r\n {\r\n immediate: true\r\n }\r\n );\r\n}\r\n\r\nfunction useWatermark() {\r\n const watermarkContent = ref(\"\");\r\n // 监听 watermark 的变化\r\n watch(\r\n () => props.watermark,\r\n val => {\r\n watermarkContent.value = val.content || \"\";\r\n },\r\n { deep: true, immediate: true }\r\n );\r\n\r\n return {\r\n watermarkContent\r\n };\r\n}\r\n\r\nfunction useStyle() {\r\n const layoutStyle = css`\r\n height: 100%;\r\n `;\r\n\r\n const transitionStyle = css`\r\n transition: margin-left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n `;\r\n\r\n const left = computed(\r\n () =>\r\n `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n );\r\n\r\n const siderStyle = computed(\r\n () => css`\r\n position: fixed !important;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: ${layout.value.sideWidth}px;\r\n\r\n ${modeConfig.value.mode === \"light\"\r\n ? `background:${sideTokenStyle.value.bgColor}!important;`\r\n : \"\"}\r\n .ant-layout-sider-children {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n `\r\n );\r\n\r\n const rightStyle = computed(\r\n () => css`\r\n margin-left: ${left.value};\r\n ${transitionStyle}\r\n `\r\n );\r\n\r\n const rightContentStyle = computed(\r\n () => css`\r\n padding-top: ${layout.value.headerHeight}px;\r\n `\r\n );\r\n\r\n return {\r\n layoutStyle,\r\n siderStyle,\r\n rightStyle,\r\n rightContentStyle\r\n };\r\n}\r\n</script>\r\n\r\n<template>\r\n <app-theme>\r\n <a-layout :class=\"layoutStyle\">\r\n <a-layout-sider\r\n v-model:collapsed=\"layout.collapsed\"\r\n theme=\"light\"\r\n collapsible\r\n :trigger=\"null\"\r\n :class=\"siderStyle\"\r\n >\r\n <slot name=\"logo\"></slot>\r\n <d-menu />\r\n </a-layout-sider>\r\n <a-layout :class=\"rightStyle\">\r\n <a-watermark\r\n :content=\"watermarkContent\"\r\n style=\"display: flex; height: 100%\"\r\n >\r\n <header-layout>\r\n <slot name=\"headerRight\"></slot>\r\n </header-layout>\r\n <a-layout-content :class=\"rightContentStyle\">\r\n <RouterContent />\r\n </a-layout-content>\r\n </a-watermark>\r\n </a-layout>\r\n </a-layout>\r\n </app-theme>\r\n <SettingDrawer />\r\n <a-back-top></a-back-top>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["storeToRefs","useAppStore","useRoute","useKeepAliveStore","watch","watermarkContent","ref","layoutStyle","css","computed","siderStyle","rightStyle","rightContentStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,EAAE,MAAQ,EAAA,UAAA,EAAY,gBAAmB,GAAAA,iBAAA,CAAYC,mBAAa,CAAA;AACxE,IAAA,MAAM,QAAQC,kBAAS,EAAA;AAEvB,IAAA,MAAM,EAAE,WAAa,EAAA,UAAA,EAAY,UAAY,EAAA,iBAAA,KAAsB,QAAS,EAAA;AAC5E,IAAa,YAAA,EAAA;AACb,IAAM,MAAA,EAAE,gBAAiB,EAAA,GAAI,YAAa,EAAA;AAE1C,IAAA,SAAS,YAAe,GAAA;AAEtB,MAAM,MAAA,EAAE,IAAK,EAAA,GAAIC,uBAAkB,EAAA;AAEnC,MAAAC,SAAA;AAAA,QACE,MAAM,KAAM,CAAA,IAAA;AAAA,QACZ,MAAM;AACJ,UAAA,IAAA,CAAK,KAAK,CAAA;AAAA,SACZ;AAAA,QACA;AAAA,UACE,SAAW,EAAA;AAAA;AACb,OACF;AAAA;AAGF,IAAA,SAAS,YAAe,GAAA;AACtB,MAAMC,MAAAA,iBAAAA,GAAmBC,QAAI,EAAE,CAAA;AAE/B,MAAAF,SAAA;AAAA,QACE,MAAM,KAAM,CAAA,SAAA;AAAA,QACZ,CAAO,GAAA,KAAA;AACL,UAAAC,iBAAAA,CAAiB,KAAQ,GAAA,GAAA,CAAI,OAAW,IAAA,EAAA;AAAA,SAC1C;AAAA,QACA,EAAE,IAAA,EAAM,IAAM,EAAA,SAAA,EAAW,IAAK;AAAA,OAChC;AAEA,MAAO,OAAA;AAAA,QACL,gBAAAA,EAAAA;AAAA,OACF;AAAA;AAGF,IAAA,SAAS,QAAW,GAAA;AAClB,MAAA,MAAME,YAAc,GAAAC,OAAA;AAAA;AAAA,EAAA,CAAA;AAIpB,MAAA,MAAM,eAAkB,GAAAA,OAAA;AAAA;AAAA,EAAA,CAAA;AAIxB,MAAA,MAAM,IAAO,GAAAC,YAAA;AAAA,QACX,MACE,CAAG,EAAA,MAAA,CAAO,KAAM,CAAA,SAAA,GAAY,OAAO,KAAM,CAAA,cAAA,GAAiB,MAAO,CAAA,KAAA,CAAM,SAAS,CAAA,EAAA;AAAA,OACpF;AAEA,MAAA,MAAMC,WAAa,GAAAD,YAAA;AAAA,QACjB,MAAMD,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAKK,EAAA,MAAA,CAAO,MAAM,SAAS,CAAA;;AAAA,MAE7B,EAAA,UAAA,CAAW,MAAM,IAAS,KAAA,OAAA,GACxB,cAAc,cAAe,CAAA,KAAA,CAAM,OAAO,CAAA,WAAA,CAAA,GAC1C,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAMV;AAEA,MAAA,MAAMG,WAAa,GAAAF,YAAA;AAAA,QACjB,MAAMD,OAAA;AAAA,mBAAA,EACW,KAAK,KAAK,CAAA;AAAA,MAAA,EACvB,eAAe;AAAA,IAAA;AAAA,OAErB;AAEA,MAAA,MAAMI,kBAAoB,GAAAH,YAAA;AAAA,QACxB,MAAMD,OAAA;AAAA,mBACW,EAAA,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA,IAAA;AAAA,OAE5C;AAEA,MAAO,OAAA;AAAA,QACL,WAAAD,EAAAA,YAAAA;AAAA,QACA,UAAAG,EAAAA,WAAAA;AAAA,QACA,UAAAC,EAAAA,WAAAA;AAAA,QACA,iBAAAC,EAAAA;AAAA,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -28,7 +28,14 @@ const show = /* @__PURE__ */ vue.defineComponent({
|
|
|
28
28
|
expose
|
|
29
29
|
}) {
|
|
30
30
|
const {
|
|
31
|
-
|
|
31
|
+
useToken
|
|
32
|
+
} = antDesignVue.theme;
|
|
33
|
+
const {
|
|
34
|
+
token
|
|
35
|
+
} = useToken();
|
|
36
|
+
const {
|
|
37
|
+
layout,
|
|
38
|
+
refresh
|
|
32
39
|
} = pinia.storeToRefs(store.useAppStore());
|
|
33
40
|
const {
|
|
34
41
|
deleteTabs
|
|
@@ -44,10 +51,12 @@ const show = /* @__PURE__ */ vue.defineComponent({
|
|
|
44
51
|
z-index: 10;
|
|
45
52
|
padding: 4px 24px;
|
|
46
53
|
transition: all 0.3s;
|
|
54
|
+
background-color: ${token.value.colorBgLayout};
|
|
47
55
|
|
|
48
|
-
${y.value > 0 ? "box-shadow:
|
|
56
|
+
${y.value > 0 ? "box-shadow:0 10px 10px rgba(0, 0, 0, 0.15);" : ""}
|
|
49
57
|
.ant-page-header-back {
|
|
50
58
|
height: 100%;
|
|
59
|
+
margin-right: 0;
|
|
51
60
|
|
|
52
61
|
.ant-page-header-back-button {
|
|
53
62
|
height: 100%;
|
|
@@ -57,6 +66,10 @@ const show = /* @__PURE__ */ vue.defineComponent({
|
|
|
57
66
|
justify-content: center;
|
|
58
67
|
}
|
|
59
68
|
}
|
|
69
|
+
|
|
70
|
+
.ant-page-header-heading-title {
|
|
71
|
+
font-size: 14px;
|
|
72
|
+
}
|
|
60
73
|
`);
|
|
61
74
|
const contentStyle = vue.computed(() => css.css`
|
|
62
75
|
padding: 10px 10px ${slots.footer ? "70px" : "0"};
|
|
@@ -83,6 +96,7 @@ const show = /* @__PURE__ */ vue.defineComponent({
|
|
|
83
96
|
}
|
|
84
97
|
};
|
|
85
98
|
const onClosePage = () => {
|
|
99
|
+
refresh.value = true;
|
|
86
100
|
deleteTabs(route.fullPath);
|
|
87
101
|
router.go(-1);
|
|
88
102
|
};
|
|
@@ -95,6 +109,7 @@ const show = /* @__PURE__ */ vue.defineComponent({
|
|
|
95
109
|
default: () => {
|
|
96
110
|
var _a, _b;
|
|
97
111
|
return [vue.createVNode(antDesignVue.PageHeader, {
|
|
112
|
+
"ghost": ghost.value,
|
|
98
113
|
"class": pageHeaderStyle.value,
|
|
99
114
|
"onBack": () => onBack(),
|
|
100
115
|
"title": pageTitle()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Show.cjs","sources":["../../../../src/components/layout/Show.tsx"],"sourcesContent":["import { computed, defineComponent, ref } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { Flex, PageHeader } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\nimport { useWindowScroll } from \"@vueuse/core\";\r\n\r\nimport { LeftOutlined } from \"@ant-design/icons-vue\";\r\nimport { useAppStore, useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nconst getProps = () => {\r\n return {\r\n close: {\r\n type: Boolean,\r\n default: false\r\n }\r\n };\r\n};\r\nconst show = defineComponent({\r\n name: \"DShowLayout\",\r\n props: getProps(),\r\n setup(props, { slots, expose }) {\r\n const { layout } = storeToRefs(useAppStore());\r\n const { deleteTabs } = useNavTabStore();\r\n const route = useRoute();\r\n const router = useRouter();\r\n\r\n const { y } = useWindowScroll();\r\n\r\n const pageHeaderStyle = computed(\r\n () => css`\r\n position: sticky;\r\n top: ${layout.value.headerHeight}px;\r\n z-index: 10;\r\n padding: 4px 24px;\r\n transition: all 0.3s;\r\n\r\n ${y.value > 0 ? \"box-shadow:
|
|
1
|
+
{"version":3,"file":"Show.cjs","sources":["../../../../src/components/layout/Show.tsx"],"sourcesContent":["import { computed, ComputedRef, defineComponent, ref } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { Flex, PageHeader, theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\nimport { useWindowScroll } from \"@vueuse/core\";\r\n\r\nimport { LeftOutlined } from \"@ant-design/icons-vue\";\r\nimport { useAppStore, useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nconst getProps = () => {\r\n return {\r\n close: {\r\n type: Boolean,\r\n default: false\r\n }\r\n };\r\n};\r\nconst show = defineComponent({\r\n name: \"DShowLayout\",\r\n props: getProps(),\r\n setup(props, { slots, expose }) {\r\n const { useToken } = theme;\r\n const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n const { layout, refresh } = storeToRefs(useAppStore());\r\n const { deleteTabs } = useNavTabStore();\r\n const route = useRoute();\r\n const router = useRouter();\r\n\r\n const { y } = useWindowScroll();\r\n\r\n const pageHeaderStyle = computed(\r\n () => css`\r\n position: sticky;\r\n top: ${layout.value.headerHeight}px;\r\n z-index: 10;\r\n padding: 4px 24px;\r\n transition: all 0.3s;\r\n background-color: ${token.value.colorBgLayout};\r\n\r\n ${y.value > 0 ? \"box-shadow:0 10px 10px rgba(0, 0, 0, 0.15);\" : \"\"}\r\n .ant-page-header-back {\r\n height: 100%;\r\n margin-right: 0;\r\n\r\n .ant-page-header-back-button {\r\n height: 100%;\r\n padding: 0 6px !important;\r\n display: flex !important;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n .ant-page-header-heading-title {\r\n font-size: 14px;\r\n }\r\n `\r\n );\r\n const contentStyle = computed(\r\n () => css`\r\n padding: 10px 10px ${slots.footer ? \"70px\" : \"0\"};\r\n `\r\n );\r\n const footerStyle = computed(\r\n () => css`\r\n position: fixed;\r\n right: 0;\r\n bottom: 0;\r\n left: ${layout.value.collapsed\r\n ? layout.value.collapsedWidth\r\n : layout.value.sideWidth}px;\r\n z-index: 10;\r\n padding: 10px;\r\n background: #fff;\r\n box-shadow: 6px 0 10px rgba(0, 0, 0, 0.15);\r\n transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n `\r\n );\r\n const pageTitle = () => <div>{route.meta.title || \"无标题\"}</div>;\r\n const ghost = ref(false);\r\n\r\n const onBack = () => {\r\n if (props.close) {\r\n // 返回关闭标签\r\n deleteTabs(route.fullPath);\r\n router.go(-1);\r\n } else {\r\n // 不关闭标签\r\n router.go(-1);\r\n }\r\n };\r\n\r\n const onClosePage = () => {\r\n refresh.value = true;\r\n deleteTabs(route.fullPath);\r\n router.go(-1);\r\n };\r\n\r\n expose({\r\n close: onClosePage\r\n });\r\n\r\n return () => (\r\n <Flex vertical={true}>\r\n <PageHeader\r\n ghost={ghost.value}\r\n class={pageHeaderStyle.value}\r\n onBack={() => onBack()}\r\n title={pageTitle()}\r\n >\r\n {{\r\n backIcon: () => (\r\n <div>\r\n <LeftOutlined style={{ fontSize: \"26px\" }} />\r\n </div>\r\n ),\r\n extra: () => slots.extra?.(),\r\n footer: () => slots.footer?.(),\r\n subTitle: () => slots.subTitle?.()\r\n }}\r\n </PageHeader>\r\n <div class={contentStyle.value}>{slots.default?.()}</div>\r\n {slots.showfooter ? (\r\n <div class={footerStyle.value}>{slots.showfooter?.()}</div>\r\n ) : null}\r\n </Flex>\r\n );\r\n }\r\n});\r\n\r\nexport default show;\r\n"],"names":["getProps","close","type","Boolean","default","show","defineComponent","name","props","setup","slots","expose","useToken","theme","token","layout","refresh","storeToRefs","useAppStore","deleteTabs","useNavTabStore","route","useRoute","router","useRouter","y","useWindowScroll","pageHeaderStyle","computed","css","value","headerHeight","colorBgLayout","contentStyle","footer","footerStyle","collapsed","collapsedWidth","sideWidth","pageTitle","_createVNode","meta","title","ghost","ref","onBack","fullPath","go","onClosePage","Flex","PageHeader","backIcon","LeftOutlined","fontSize","extra","_a","subTitle","showfooter"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ var Tab_vue_vue_type_script_setup_true_lang = require('../../../tab/Tab.vue2.cjs
|
|
|
15
15
|
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
16
16
|
__name: "HeaderLayout",
|
|
17
17
|
setup(__props) {
|
|
18
|
-
const { layout } = pinia.storeToRefs(store.useAppStore());
|
|
18
|
+
const { layout, modeConfig, headerTokenStyle } = pinia.storeToRefs(store.useAppStore());
|
|
19
19
|
const { headerStyle, headerTabStyle, collapsedStyle, rightStyle } = useStyle();
|
|
20
20
|
function useStyle() {
|
|
21
21
|
const { useToken } = antDesignVue.theme;
|
|
@@ -28,7 +28,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
28
28
|
position: fixed;
|
|
29
29
|
top: 0;
|
|
30
30
|
right: 0;
|
|
31
|
-
background-color: ${token.value.colorBgContainer};
|
|
31
|
+
background-color: ${modeConfig.value.mode !== "light" ? token.value.colorBgContainer : headerTokenStyle.value.bgColor};
|
|
32
32
|
left: ${left.value};
|
|
33
33
|
height: ${layout.value.headerHeight}px;
|
|
34
34
|
transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);
|
|
@@ -51,6 +51,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
51
51
|
align-items: center;
|
|
52
52
|
justify-content: center;
|
|
53
53
|
cursor: pointer;
|
|
54
|
+
color: ${modeConfig.value.mode === "light" ? headerTokenStyle.value.txtColor : "inherit"};
|
|
54
55
|
`
|
|
55
56
|
);
|
|
56
57
|
const rightStyle2 = vue.computed(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderLayout.vue2.cjs","sources":["../../../../../../src/components/layout/components/layout/HeaderLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { MenuFoldOutlined, MenuUnfoldOutlined } from \"@ant-design/icons-vue\";\r\nimport { useAppStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nimport Tab from \"../../../tab/Tab.vue\";\r\n\r\nconst { layout } = storeToRefs(useAppStore());\r\nconst { headerStyle, headerTabStyle, collapsedStyle, rightStyle } = useStyle();\r\n\r\nfunction useStyle(): {\r\n headerStyle: ComputedRef<string>;\r\n headerTabStyle: ComputedRef<string>;\r\n collapsedStyle: ComputedRef<string>;\r\n rightStyle: ComputedRef<string>;\r\n} {\r\n const { useToken } = theme;\r\n const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n const left = computed(\r\n () =>\r\n `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n );\r\n\r\n const headerStyle = computed(\r\n () => css`\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n background-color: ${token.value.colorBgContainer};\r\n left: ${left.value};\r\n height: ${layout.value.headerHeight}px;\r\n transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n display: flex;\r\n align-items: flex-end;\r\n `\r\n );\r\n\r\n const headerTabStyle = computed(\r\n () => css`\r\n flex: 1;\r\n overflow: hidden;\r\n padding-right: 10px;\r\n `\r\n );\r\n\r\n const collapsedStyle = computed(\r\n () => css`\r\n padding: 0 10px;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n `\r\n );\r\n\r\n const rightStyle = computed(\r\n () => css`\r\n height: 100%;\r\n `\r\n );\r\n\r\n return {\r\n headerStyle,\r\n headerTabStyle,\r\n collapsedStyle,\r\n rightStyle\r\n };\r\n}\r\n</script>\r\n\r\n<template>\r\n <div :class=\"headerStyle\">\r\n <div :class=\"collapsedStyle\" @click=\"layout.collapsed = !layout.collapsed\">\r\n <menu-unfold-outlined v-if=\"layout.collapsed\" class=\"trigger\" />\r\n <menu-fold-outlined v-else />\r\n </div>\r\n <div :class=\"headerTabStyle\">\r\n <Tab />\r\n </div>\r\n <div :class=\"rightStyle\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["storeToRefs","useAppStore","theme","computed","headerStyle","css","headerTabStyle","collapsedStyle","rightStyle"],"mappings":";;;;;;;;;;;;;;;;;AAYA,IAAA,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"HeaderLayout.vue2.cjs","sources":["../../../../../../src/components/layout/components/layout/HeaderLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { MenuFoldOutlined, MenuUnfoldOutlined } from \"@ant-design/icons-vue\";\r\nimport { useAppStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nimport Tab from \"../../../tab/Tab.vue\";\r\n\r\nconst { layout, modeConfig, headerTokenStyle } = storeToRefs(useAppStore());\r\nconst { headerStyle, headerTabStyle, collapsedStyle, rightStyle } = useStyle();\r\n\r\nfunction useStyle(): {\r\n headerStyle: ComputedRef<string>;\r\n headerTabStyle: ComputedRef<string>;\r\n collapsedStyle: ComputedRef<string>;\r\n rightStyle: ComputedRef<string>;\r\n} {\r\n const { useToken } = theme;\r\n const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n const left = computed(\r\n () =>\r\n `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n );\r\n\r\n const headerStyle = computed(\r\n () => css`\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n background-color: ${modeConfig.value.mode !== \"light\"\r\n ? token.value.colorBgContainer\r\n : headerTokenStyle.value.bgColor};\r\n left: ${left.value};\r\n height: ${layout.value.headerHeight}px;\r\n transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n display: flex;\r\n align-items: flex-end;\r\n `\r\n );\r\n\r\n const headerTabStyle = computed(\r\n () => css`\r\n flex: 1;\r\n overflow: hidden;\r\n padding-right: 10px;\r\n `\r\n );\r\n\r\n const collapsedStyle = computed(\r\n () => css`\r\n padding: 0 10px;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n color: ${modeConfig.value.mode === \"light\"\r\n ? headerTokenStyle.value.txtColor\r\n : \"inherit\"};\r\n `\r\n );\r\n\r\n const rightStyle = computed(\r\n () => css`\r\n height: 100%;\r\n `\r\n );\r\n\r\n return {\r\n headerStyle,\r\n headerTabStyle,\r\n collapsedStyle,\r\n rightStyle\r\n };\r\n}\r\n</script>\r\n\r\n<template>\r\n <div :class=\"headerStyle\">\r\n <div :class=\"collapsedStyle\" @click=\"layout.collapsed = !layout.collapsed\">\r\n <menu-unfold-outlined v-if=\"layout.collapsed\" class=\"trigger\" />\r\n <menu-fold-outlined v-else />\r\n </div>\r\n <div :class=\"headerTabStyle\">\r\n <Tab />\r\n </div>\r\n <div :class=\"rightStyle\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["storeToRefs","useAppStore","theme","computed","headerStyle","css","headerTabStyle","collapsedStyle","rightStyle"],"mappings":";;;;;;;;;;;;;;;;;AAYA,IAAA,MAAM,EAAE,MAAQ,EAAA,UAAA,EAAY,kBAAqB,GAAAA,iBAAA,CAAYC,mBAAa,CAAA;AAC1E,IAAA,MAAM,EAAE,WAAa,EAAA,cAAA,EAAgB,cAAgB,EAAA,UAAA,KAAe,QAAS,EAAA;AAE7E,IAAA,SAAS,QAKP,GAAA;AACA,MAAM,MAAA,EAAE,UAAa,GAAAC,kBAAA;AACrB,MAAM,MAAA,EAAE,KAAM,EAAA,GAAyC,QAAS,EAAA;AAEhE,MAAA,MAAM,IAAO,GAAAC,YAAA;AAAA,QACX,MACE,CAAG,EAAA,MAAA,CAAO,KAAM,CAAA,SAAA,GAAY,OAAO,KAAM,CAAA,cAAA,GAAiB,MAAO,CAAA,KAAA,CAAM,SAAS,CAAA,EAAA;AAAA,OACpF;AAEA,MAAA,MAAMC,YAAc,GAAAD,YAAA;AAAA,QAClB,MAAME,OAAA;AAAA;AAAA;AAAA;AAAA,wBAIgB,EAAA,UAAA,CAAW,MAAM,IAAS,KAAA,OAAA,GAC1C,MAAM,KAAM,CAAA,gBAAA,GACZ,gBAAiB,CAAA,KAAA,CAAM,OAAO,CAAA;AAAA,YAAA,EAC1B,KAAK,KAAK,CAAA;AAAA,cACR,EAAA,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKvC;AAEA,MAAA,MAAMC,eAAiB,GAAAH,YAAA;AAAA,QACrB,MAAME,OAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKR;AAEA,MAAA,MAAME,eAAiB,GAAAJ,YAAA;AAAA,QACrB,MAAME,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAOK,WAAW,KAAM,CAAA,IAAA,KAAS,UAC/B,gBAAiB,CAAA,KAAA,CAAM,WACvB,SAAS,CAAA;AAAA,IAAA;AAAA,OAEjB;AAEA,MAAA,MAAMG,WAAa,GAAAL,YAAA;AAAA,QACjB,MAAME,OAAA;AAAA;AAAA,IAAA;AAAA,OAGR;AAEA,MAAO,OAAA;AAAA,QACL,WAAAD,EAAAA,YAAAA;AAAA,QACA,cAAAE,EAAAA,eAAAA;AAAA,QACA,cAAAC,EAAAA,eAAAA;AAAA,QACA,UAAAC,EAAAA;AAAA,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -32,13 +32,19 @@ var __async = (__this, __arguments, generator) => {
|
|
|
32
32
|
var DMenu = /* @__PURE__ */ vue.defineComponent({
|
|
33
33
|
name: "DMenu",
|
|
34
34
|
setup() {
|
|
35
|
+
const {
|
|
36
|
+
layout,
|
|
37
|
+
modeConfig
|
|
38
|
+
} = pinia.storeToRefs(store.useAppStore());
|
|
39
|
+
const {
|
|
40
|
+
menuList
|
|
41
|
+
} = pinia.storeToRefs(store.useNoStore());
|
|
35
42
|
const {
|
|
36
43
|
menuWrapperStyle
|
|
37
44
|
} = useStyle();
|
|
38
45
|
const {
|
|
39
46
|
openKeys,
|
|
40
47
|
selectedKeys,
|
|
41
|
-
data,
|
|
42
48
|
onClick
|
|
43
49
|
} = useMenu();
|
|
44
50
|
function useStyle() {
|
|
@@ -52,9 +58,9 @@ var DMenu = /* @__PURE__ */ vue.defineComponent({
|
|
|
52
58
|
-ms-overflow-style: none; /* 对 IE 和 Edge 生效 */
|
|
53
59
|
scrollbar-width: none; /* 对 Firefox 生效 */
|
|
54
60
|
|
|
61
|
+
${modeConfig.value.mode === "light" ? "background:transparent;" : ""}
|
|
55
62
|
/* Webkit 浏览器 */
|
|
56
|
-
|
|
57
|
-
::-webkit-scrollbar {
|
|
63
|
+
::-webkit-scrollbar {
|
|
58
64
|
display: none;
|
|
59
65
|
}
|
|
60
66
|
}
|
|
@@ -64,20 +70,18 @@ var DMenu = /* @__PURE__ */ vue.defineComponent({
|
|
|
64
70
|
};
|
|
65
71
|
}
|
|
66
72
|
function useMenu() {
|
|
67
|
-
const {
|
|
68
|
-
layout
|
|
69
|
-
} = pinia.storeToRefs(store.useAppStore());
|
|
70
73
|
const {
|
|
71
74
|
openKeys: openKeys2,
|
|
72
75
|
selectedKeys: selectedKeys2,
|
|
73
|
-
data
|
|
76
|
+
data
|
|
74
77
|
} = pinia.storeToRefs(store.useMenuStore());
|
|
75
78
|
const route = vueRouter.useRoute();
|
|
76
79
|
const router = vueRouter.useRouter();
|
|
77
80
|
vue.watch(() => route.fullPath, (path) => __async(this, null, function* () {
|
|
81
|
+
console.log(path);
|
|
78
82
|
const flag = selectedKeys2.value.some((item) => item === path);
|
|
79
83
|
if (!flag) {
|
|
80
|
-
const rs = _findMatchedMenuKey(path,
|
|
84
|
+
const rs = _findMatchedMenuKey(path, data.value);
|
|
81
85
|
if (rs) {
|
|
82
86
|
if (!layout.value.collapsed) {
|
|
83
87
|
if (rs == null ? void 0 : rs.parentKey) {
|
|
@@ -92,7 +96,7 @@ var DMenu = /* @__PURE__ */ vue.defineComponent({
|
|
|
92
96
|
}));
|
|
93
97
|
vue.watch(() => layout.value.collapsed, (val) => {
|
|
94
98
|
const path = selectedKeys2.value[0];
|
|
95
|
-
const rs = _findMatchedMenuKey(path,
|
|
99
|
+
const rs = _findMatchedMenuKey(path, data.value);
|
|
96
100
|
if (val) {
|
|
97
101
|
openKeys2.value = [];
|
|
98
102
|
} else {
|
|
@@ -145,7 +149,7 @@ var DMenu = /* @__PURE__ */ vue.defineComponent({
|
|
|
145
149
|
return {
|
|
146
150
|
openKeys: openKeys2,
|
|
147
151
|
selectedKeys: selectedKeys2,
|
|
148
|
-
data
|
|
152
|
+
data,
|
|
149
153
|
onClick: onClick2
|
|
150
154
|
};
|
|
151
155
|
}
|
|
@@ -156,7 +160,7 @@ var DMenu = /* @__PURE__ */ vue.defineComponent({
|
|
|
156
160
|
"onUpdate:open-keys": ($event) => openKeys.value = $event,
|
|
157
161
|
"selected-keys": selectedKeys.value,
|
|
158
162
|
"onUpdate:selected-keys": ($event) => selectedKeys.value = $event,
|
|
159
|
-
"items":
|
|
163
|
+
"items": menuList.value,
|
|
160
164
|
"mode": "inline",
|
|
161
165
|
"triggerSubMenuAction": "hover",
|
|
162
166
|
"onClick": onClick
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.cjs","sources":["../../../../../../src/components/layout/components/menu/Menu.tsx"],"sourcesContent":["import { computed, defineComponent,
|
|
1
|
+
{"version":3,"file":"Menu.cjs","sources":["../../../../../../src/components/layout/components/menu/Menu.tsx"],"sourcesContent":["import { computed, defineComponent, watch } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { useAppStore, useMenuStore, useNoStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nexport default defineComponent({\r\n name: \"DMenu\",\r\n setup() {\r\n const { layout, modeConfig } = storeToRefs(useAppStore());\r\n const { menuList } = storeToRefs(useNoStore());\r\n const { menuWrapperStyle } = useStyle();\r\n const { openKeys, selectedKeys, onClick } = useMenu();\r\n\r\n function useStyle() {\r\n const menuWrapperStyle = computed(\r\n () => css`\r\n flex: 1;\r\n overflow: hidden;\r\n\r\n .ant-menu {\r\n height: 100%;\r\n overflow: scroll;\r\n -ms-overflow-style: none; /* 对 IE 和 Edge 生效 */\r\n scrollbar-width: none; /* 对 Firefox 生效 */\r\n\r\n ${modeConfig.value.mode === \"light\"\r\n ? \"background:transparent;\"\r\n : \"\"}\r\n /* Webkit 浏览器 */\r\n ::-webkit-scrollbar {\r\n display: none;\r\n }\r\n }\r\n `\r\n );\r\n return {\r\n menuWrapperStyle\r\n };\r\n }\r\n\r\n function useMenu() {\r\n const { openKeys, selectedKeys, data } = storeToRefs(useMenuStore());\r\n const route = useRoute();\r\n const router = useRouter();\r\n\r\n /**\r\n * 在标签切换的时候,路由会变化,需要动态关联左侧菜单的选中状态\r\n */\r\n watch(\r\n () => route.fullPath,\r\n async path => {\r\n console.log(path);\r\n const flag = selectedKeys.value.some((item: string) => item === path);\r\n if (!flag) {\r\n const rs = _findMatchedMenuKey(path, data.value as never);\r\n if (rs) {\r\n if (!layout.value.collapsed) {\r\n if (rs?.parentKey) {\r\n openKeys.value = [rs.parentKey];\r\n } else {\r\n openKeys.value = [rs!.matchedKey];\r\n }\r\n }\r\n selectedKeys.value = [rs!.matchedKey];\r\n }\r\n }\r\n }\r\n );\r\n\r\n watch(\r\n () => layout.value.collapsed,\r\n val => {\r\n const path = selectedKeys.value[0];\r\n const rs = _findMatchedMenuKey(path, data.value as never);\r\n if (val) {\r\n openKeys.value = [];\r\n } else {\r\n if (rs?.parentKey) {\r\n openKeys.value = [rs.parentKey];\r\n } else {\r\n openKeys.value = [rs!.matchedKey];\r\n }\r\n }\r\n }\r\n );\r\n\r\n // 匹配菜单项的函数(支持嵌套 children)\r\n const _findMatchedMenuKey = (\r\n path: string,\r\n menuItems: { key: string; children: [] }[],\r\n parentKey: string = \"\"\r\n ): { matchedKey: string; parentKey: string } | null => {\r\n // 遍历菜单项\r\n for (const item of menuItems) {\r\n // 完全匹配\r\n if (item.key === path) {\r\n return { matchedKey: item.key, parentKey };\r\n }\r\n\r\n // 如果当前菜单项有 children,递归查找\r\n if (item.children && item.children.length > 0) {\r\n const result = _findMatchedMenuKey(path, item.children, item.key);\r\n if (result) {\r\n return result;\r\n }\r\n }\r\n\r\n // 匹配以 basePath 开头的菜单项\r\n const match = path.match(/^\\/[^/]+/); // 匹配以 / 开头,后面不包含 / 的部分\r\n const basePath = match ? match[0] : \"\"; // 提取基础路径,如 /user\r\n if (item.key.startsWith(basePath)) {\r\n return { matchedKey: item.key, parentKey };\r\n }\r\n }\r\n\r\n // 如果没有找到匹配的菜单项,返回 null\r\n return null;\r\n };\r\n\r\n const onClick = ({\r\n key,\r\n keyPath\r\n }: {\r\n item: string;\r\n key: string;\r\n keyPath: string[];\r\n }) => {\r\n openKeys.value = keyPath;\r\n selectedKeys.value = [key];\r\n\r\n // 判断目标路由和当前路由是否相等;\r\n // 不相等的时候再跳转\r\n if (route.path !== key) {\r\n router.push(key).then(r => {\r\n if (r) {\r\n console.warn(r);\r\n }\r\n });\r\n }\r\n };\r\n\r\n return {\r\n openKeys,\r\n selectedKeys,\r\n data,\r\n onClick\r\n };\r\n }\r\n\r\n return () => (\r\n <div class={menuWrapperStyle.value}>\r\n <a-menu\r\n v-model:open-keys={openKeys.value}\r\n v-model:selected-keys={selectedKeys.value}\r\n items={menuList.value}\r\n mode=\"inline\"\r\n triggerSubMenuAction={\"hover\"}\r\n onClick={onClick}\r\n ></a-menu>\r\n </div>\r\n );\r\n }\r\n});\r\n"],"names":["defineComponent","name","setup","layout","modeConfig","storeToRefs","useAppStore","menuList","useNoStore","menuWrapperStyle","useStyle","openKeys","selectedKeys","onClick","useMenu","computed","css","value","mode","data","useMenuStore","route","useRoute","router","useRouter","watch","fullPath","path","console","log","flag","some","item","rs","_findMatchedMenuKey","collapsed","parentKey","matchedKey","val","menuItems","key","children","length","result","match","basePath","startsWith","keyPath","push","then","r","warn","_createVNode","_resolveComponent","$event"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var vue = require('vue');
|
|
6
|
+
var vueRouter = require('vue-router');
|
|
6
7
|
var antDesignVue = require('ant-design-vue');
|
|
7
8
|
var core = require('@vueuse/core');
|
|
8
9
|
var iconsVue = require('@ant-design/icons-vue');
|
|
@@ -14,6 +15,7 @@ var dayjs_min = require('../../_virtual/dayjs.min.cjs');
|
|
|
14
15
|
var Search = /* @__PURE__ */ vue.defineComponent({
|
|
15
16
|
name: "Search",
|
|
16
17
|
setup() {
|
|
18
|
+
const router = vueRouter.useRouter();
|
|
17
19
|
const {
|
|
18
20
|
useToken
|
|
19
21
|
} = antDesignVue.theme;
|
|
@@ -43,9 +45,6 @@ var Search = /* @__PURE__ */ vue.defineComponent({
|
|
|
43
45
|
open.value = false;
|
|
44
46
|
}
|
|
45
47
|
});
|
|
46
|
-
const buttonToken = {
|
|
47
|
-
borderRadius: "12px"
|
|
48
|
-
};
|
|
49
48
|
const onCloseTab = (path) => {
|
|
50
49
|
deleteTabs(path);
|
|
51
50
|
};
|
|
@@ -59,6 +58,7 @@ var Search = /* @__PURE__ */ vue.defineComponent({
|
|
|
59
58
|
flex-direction: column;
|
|
60
59
|
max-height: 400px;
|
|
61
60
|
overflow-y: overlay;
|
|
61
|
+
user-select: none;
|
|
62
62
|
|
|
63
63
|
/* 整个滚动条 */
|
|
64
64
|
|
|
@@ -104,9 +104,10 @@ var Search = /* @__PURE__ */ vue.defineComponent({
|
|
|
104
104
|
align-items: center;
|
|
105
105
|
padding: 4px 10px;
|
|
106
106
|
width: 400px;
|
|
107
|
+
cursor: pointer;
|
|
107
108
|
|
|
108
109
|
&:hover {
|
|
109
|
-
background-color:
|
|
110
|
+
background-color: ${token.value.colorBgLayout};
|
|
110
111
|
|
|
111
112
|
.close-wrapper {
|
|
112
113
|
display: block;
|
|
@@ -160,7 +161,7 @@ var Search = /* @__PURE__ */ vue.defineComponent({
|
|
|
160
161
|
text-align: center;
|
|
161
162
|
|
|
162
163
|
&:hover {
|
|
163
|
-
background-color:
|
|
164
|
+
// background-color: ${token.value.colorBgLayout};
|
|
164
165
|
}
|
|
165
166
|
}
|
|
166
167
|
}
|
|
@@ -180,6 +181,12 @@ var Search = /* @__PURE__ */ vue.defineComponent({
|
|
|
180
181
|
return `${diffInHours} \u5C0F\u65F6\u524D`;
|
|
181
182
|
}
|
|
182
183
|
}
|
|
184
|
+
const onJump = (item) => {
|
|
185
|
+
if (item.fullPath) {
|
|
186
|
+
router.push(item.fullPath);
|
|
187
|
+
}
|
|
188
|
+
open.value = false;
|
|
189
|
+
};
|
|
183
190
|
return () => vue.createVNode("div", null, [vue.createVNode(vue.resolveComponent("a-popover"), {
|
|
184
191
|
"open": open.value,
|
|
185
192
|
"onUpdate:open": ($event) => open.value = $event,
|
|
@@ -212,7 +219,9 @@ var Search = /* @__PURE__ */ vue.defineComponent({
|
|
|
212
219
|
"class": "search-title"
|
|
213
220
|
}, [vue.createTextVNode("\u6253\u5F00\u7684\u6807\u7B7E\u9875")]), vue.createVNode("ul", null, [navTabList.value.map((item) => {
|
|
214
221
|
var _a, _b;
|
|
215
|
-
return vue.createVNode("li",
|
|
222
|
+
return vue.createVNode("li", {
|
|
223
|
+
"onClick": () => onJump(item)
|
|
224
|
+
}, [vue.createVNode("div", {
|
|
216
225
|
"class": "icon"
|
|
217
226
|
}, [vue.createVNode(iconsVue.UnorderedListOutlined, null, null)]), vue.createVNode("div", {
|
|
218
227
|
"class": "content"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.cjs","sources":["../../../../src/components/tab/Search.tsx"],"sourcesContent":["import { computed, ComputedRef, defineComponent, h, ref, watch } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { useMagicKeys, useWindowScroll } from \"@vueuse/core\";\r\n\r\nimport {\r\n CloseOutlined,\r\n DownOutlined,\r\n SearchOutlined,\r\n UnorderedListOutlined\r\n} from \"@ant-design/icons-vue\";\r\nimport { useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\nimport dayjs from \"dayjs\";\r\n\r\nexport default defineComponent({\r\n name: \"Search\",\r\n setup() {\r\n const { useToken } = theme;\r\n const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n const { getList, deleteTabs } = useNavTabStore();\r\n // 用来监听 Ctrl + Shift + S\r\n const keys = useMagicKeys();\r\n const shiftCtrlA = keys[\"Shift+Ctrl+S\"];\r\n const open = ref(false);\r\n const { y } = useWindowScroll();\r\n\r\n const navTabList = computed(() => {\r\n return getList!.sort((a, b) => (b.openTime || 0) - (a.openTime || 0));\r\n });\r\n\r\n watch(shiftCtrlA, v => {\r\n if (v) {\r\n open.value = !open.value;\r\n }\r\n });\r\n watch(\r\n () => y.value,\r\n val => {\r\n if (val > 0) {\r\n open.value = false;\r\n }\r\n }\r\n );\r\n\r\n const buttonToken = {\r\n borderRadius: \"12px\"\r\n };\r\n\r\n const onCloseTab = (path: string) => {\r\n deleteTabs(path);\r\n };\r\n\r\n const searchStyle = computed(\r\n () => css`\r\n padding: 10px;\r\n border-bottom: 1px solid ${token.value.colorBorder};\r\n `\r\n );\r\n\r\n const searchListStyle = computed(\r\n () => css`\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n max-height: 400px;\r\n overflow-y: overlay;\r\n\r\n /* 整个滚动条 */\r\n\r\n ::-webkit-scrollbar {\r\n width: 4px; /* 垂直滚动条的宽度 */\r\n height: 4px; /* 水平滚动条的高度 */\r\n }\r\n\r\n /* 滚动条轨道 */\r\n\r\n ::-webkit-scrollbar-track {\r\n background: transparent; /* 轨道背景色 */\r\n border-radius: 0; /* 轨道圆角 */\r\n }\r\n\r\n /* 滚动条滑块 */\r\n\r\n ::-webkit-scrollbar-thumb {\r\n //background: #888; /* 滑块背景色 */\r\n // border-radius: 6px; /* 滑块圆角 */\r\n border: 3px solid ${token.value.colorPrimaryBorder}; /* 滑块边框 */\r\n }\r\n\r\n /* 滚动条滑块悬停效果 */\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: red; /* 滑块悬停背景色 */\r\n }\r\n\r\n .search-title {\r\n position: sticky;\r\n top: 0;\r\n padding: 10px;\r\n }\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n display: flex;\r\n align-items: center;\r\n padding: 4px 10px;\r\n width: 400px;\r\n\r\n &:hover {\r\n background-color: red;\r\n\r\n .close-wrapper {\r\n display: block;\r\n }\r\n }\r\n\r\n .icon {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 10px;\r\n background-color: ${token.value.colorPrimary};\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .content {\r\n padding-left: 10px;\r\n\r\n .time-ago {\r\n display: flex;\r\n align-items: center;\r\n font-size: 12px;\r\n\r\n .hostname {\r\n max-width: 180px;\r\n overflow: hidden;\r\n }\r\n\r\n .split {\r\n width: 4px;\r\n height: 4px;\r\n display: inline-block;\r\n background-color: ${token.value.colorPrimary};\r\n border-radius: 10px;\r\n margin: 0 6px;\r\n }\r\n }\r\n }\r\n\r\n .close-wrapper {\r\n display: none;\r\n flex: 1;\r\n text-align: right;\r\n\r\n .close-btn {\r\n display: inline-block;\r\n width: 22px;\r\n height: 22px;\r\n border-radius: 50%;\r\n text-align: center;\r\n\r\n &:hover {\r\n background-color: blue;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n `\r\n );\r\n\r\n function timeAgo(providedTime: number) {\r\n const now = dayjs();\r\n const diffInSeconds = now.diff(providedTime, \"second\"); // 计算时间差(秒)\r\n const diffInMinutes = now.diff(providedTime, \"minute\"); // 计算时间差(分钟)\r\n const diffInHours = now.diff(providedTime, \"hour\"); // 计算时间差(小时)\r\n\r\n if (diffInMinutes < 1) {\r\n return `${diffInSeconds} 秒前`;\r\n } else if (diffInHours < 1) {\r\n return `${diffInMinutes} 分钟前`;\r\n } else {\r\n return `${diffInHours} 小时前`;\r\n }\r\n }\r\n\r\n return () => (\r\n <div>\r\n <a-popover\r\n v-model:open={open.value}\r\n placement={\"bottomRight\"}\r\n trigger={\"click\"}\r\n overlayClassName={\"search-popover-wrapper\"}\r\n >\r\n {{\r\n default: () => (\r\n <div>\r\n <a-button\r\n style={{ borderRadius: \"10px\" }}\r\n icon={h(DownOutlined)}\r\n title={\"搜索标签页\"}\r\n />\r\n </div>\r\n ),\r\n content: () => (\r\n <>\r\n <div class={searchStyle.value}>\r\n <a-input placeholder={\"搜索标签页\"} bordered={false}>\r\n {{\r\n prefix: () => <SearchOutlined />,\r\n suffix: () => (\r\n <span style={{ color: \"rgba(0, 0, 0, 0.45)\" }}>\r\n Ctrl+Shift+S\r\n </span>\r\n )\r\n }}\r\n </a-input>\r\n </div>\r\n <div class={searchListStyle.value}>\r\n <span class={\"search-title\"}>打开的标签页</span>\r\n <ul>\r\n {navTabList.value.map(item => (\r\n <li>\r\n <div class={\"icon\"}>\r\n <UnorderedListOutlined />\r\n </div>\r\n <div class={\"content\"}>\r\n <div class={\"title\"}>{item.meta?.title}</div>\r\n <div class={\"time-ago\"}>\r\n <span class={\"hostname\"}>\r\n {window.location.hostname + \"\" + item.path}\r\n </span>\r\n <span class={\"split\"}></span>\r\n <span class={\"time\"}>\r\n {timeAgo(item.openTime ?? 0)}\r\n </span>\r\n </div>\r\n </div>\r\n <div class={\"close-wrapper\"}>\r\n <span\r\n class={\"close-btn\"}\r\n onClick={() => onCloseTab(item.fullPath || \"\")}\r\n >\r\n <CloseOutlined />\r\n </span>\r\n </div>\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n </>\r\n )\r\n }}\r\n </a-popover>\r\n </div>\r\n );\r\n }\r\n});\r\n"],"names":["defineComponent","name","setup","useToken","theme","token","getList","deleteTabs","useNavTabStore","keys","useMagicKeys","shiftCtrlA","open","ref","y","useWindowScroll","navTabList","computed","sort","a","b","openTime","watch","v","value","val","buttonToken","borderRadius","onCloseTab","path","searchStyle","css","colorBorder","searchListStyle","colorPrimaryBorder","colorPrimary","timeAgo","providedTime","now","dayjs","diffInSeconds","diff","diffInMinutes","diffInHours","_createVNode","_resolveComponent","$event","default","h","DownOutlined","content","_Fragment","prefix","SearchOutlined","suffix","color","_createTextVNode","map","item","UnorderedListOutlined","meta","title","window","location","hostname","onClick","fullPath","CloseOutlined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Search.cjs","sources":["../../../../src/components/tab/Search.tsx"],"sourcesContent":["import { computed, ComputedRef, defineComponent, h, ref, watch } from \"vue\";\r\nimport { useRouter } from \"vue-router\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { useMagicKeys, useWindowScroll } from \"@vueuse/core\";\r\n\r\nimport {\r\n CloseOutlined,\r\n DownOutlined,\r\n SearchOutlined,\r\n UnorderedListOutlined\r\n} from \"@ant-design/icons-vue\";\r\nimport { type NavTabsState, useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\nimport dayjs from \"dayjs\";\r\n\r\nexport default defineComponent({\r\n name: \"Search\",\r\n setup() {\r\n const router = useRouter();\r\n\r\n const { useToken } = theme;\r\n const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n const { getList, deleteTabs } = useNavTabStore();\r\n // 用来监听 Ctrl + Shift + S\r\n const keys = useMagicKeys();\r\n const shiftCtrlA = keys[\"Shift+Ctrl+S\"];\r\n const open = ref(false);\r\n const { y } = useWindowScroll();\r\n\r\n const navTabList = computed(() => {\r\n return getList!.sort((a, b) => (b.openTime || 0) - (a.openTime || 0));\r\n });\r\n\r\n watch(shiftCtrlA, v => {\r\n if (v) {\r\n open.value = !open.value;\r\n }\r\n });\r\n watch(\r\n () => y.value,\r\n val => {\r\n if (val > 0) {\r\n open.value = false;\r\n }\r\n }\r\n );\r\n\r\n const onCloseTab = (path: string) => {\r\n deleteTabs(path);\r\n };\r\n\r\n const searchStyle = computed(\r\n () => css`\r\n padding: 10px;\r\n border-bottom: 1px solid ${token.value.colorBorder};\r\n `\r\n );\r\n\r\n const searchListStyle = computed(\r\n () => css`\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n max-height: 400px;\r\n overflow-y: overlay;\r\n user-select: none;\r\n\r\n /* 整个滚动条 */\r\n\r\n ::-webkit-scrollbar {\r\n width: 4px; /* 垂直滚动条的宽度 */\r\n height: 4px; /* 水平滚动条的高度 */\r\n }\r\n\r\n /* 滚动条轨道 */\r\n\r\n ::-webkit-scrollbar-track {\r\n background: transparent; /* 轨道背景色 */\r\n border-radius: 0; /* 轨道圆角 */\r\n }\r\n\r\n /* 滚动条滑块 */\r\n\r\n ::-webkit-scrollbar-thumb {\r\n //background: #888; /* 滑块背景色 */\r\n // border-radius: 6px; /* 滑块圆角 */\r\n border: 3px solid ${token.value.colorPrimaryBorder}; /* 滑块边框 */\r\n }\r\n\r\n /* 滚动条滑块悬停效果 */\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: red; /* 滑块悬停背景色 */\r\n }\r\n\r\n .search-title {\r\n position: sticky;\r\n top: 0;\r\n padding: 10px;\r\n }\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n display: flex;\r\n align-items: center;\r\n padding: 4px 10px;\r\n width: 400px;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background-color: ${token.value.colorBgLayout};\r\n\r\n .close-wrapper {\r\n display: block;\r\n }\r\n }\r\n\r\n .icon {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 10px;\r\n background-color: ${token.value.colorPrimary};\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .content {\r\n padding-left: 10px;\r\n\r\n .time-ago {\r\n display: flex;\r\n align-items: center;\r\n font-size: 12px;\r\n\r\n .hostname {\r\n max-width: 180px;\r\n overflow: hidden;\r\n }\r\n\r\n .split {\r\n width: 4px;\r\n height: 4px;\r\n display: inline-block;\r\n background-color: ${token.value.colorPrimary};\r\n border-radius: 10px;\r\n margin: 0 6px;\r\n }\r\n }\r\n }\r\n\r\n .close-wrapper {\r\n display: none;\r\n flex: 1;\r\n text-align: right;\r\n\r\n .close-btn {\r\n display: inline-block;\r\n width: 22px;\r\n height: 22px;\r\n border-radius: 50%;\r\n text-align: center;\r\n\r\n &:hover {\r\n // background-color: ${token.value.colorBgLayout};\r\n }\r\n }\r\n }\r\n }\r\n }\r\n `\r\n );\r\n\r\n function timeAgo(providedTime: number) {\r\n const now = dayjs();\r\n const diffInSeconds = now.diff(providedTime, \"second\"); // 计算时间差(秒)\r\n const diffInMinutes = now.diff(providedTime, \"minute\"); // 计算时间差(分钟)\r\n const diffInHours = now.diff(providedTime, \"hour\"); // 计算时间差(小时)\r\n\r\n if (diffInMinutes < 1) {\r\n return `${diffInSeconds} 秒前`;\r\n } else if (diffInHours < 1) {\r\n return `${diffInMinutes} 分钟前`;\r\n } else {\r\n return `${diffInHours} 小时前`;\r\n }\r\n }\r\n\r\n const onJump = (item: NavTabsState) => {\r\n if (item.fullPath) {\r\n router.push(item.fullPath);\r\n }\r\n open.value = false;\r\n };\r\n\r\n return () => (\r\n <div>\r\n <a-popover\r\n v-model:open={open.value}\r\n placement={\"bottomRight\"}\r\n trigger={\"click\"}\r\n overlayClassName={\"search-popover-wrapper\"}\r\n >\r\n {{\r\n default: () => (\r\n <div>\r\n <a-button\r\n style={{ borderRadius: \"10px\" }}\r\n icon={h(DownOutlined)}\r\n title={\"搜索标签页\"}\r\n />\r\n </div>\r\n ),\r\n content: () => (\r\n <>\r\n <div class={searchStyle.value}>\r\n <a-input placeholder={\"搜索标签页\"} bordered={false}>\r\n {{\r\n prefix: () => <SearchOutlined />,\r\n suffix: () => (\r\n <span style={{ color: \"rgba(0, 0, 0, 0.45)\" }}>\r\n Ctrl+Shift+S\r\n </span>\r\n )\r\n }}\r\n </a-input>\r\n </div>\r\n <div class={searchListStyle.value}>\r\n <span class={\"search-title\"}>打开的标签页</span>\r\n <ul>\r\n {navTabList.value.map(item => (\r\n <li onClick={() => onJump(item)}>\r\n <div class={\"icon\"}>\r\n <UnorderedListOutlined />\r\n </div>\r\n <div class={\"content\"}>\r\n <div class={\"title\"}>{item.meta?.title}</div>\r\n <div class={\"time-ago\"}>\r\n <span class={\"hostname\"}>\r\n {window.location.hostname + \"\" + item.path}\r\n </span>\r\n <span class={\"split\"}></span>\r\n <span class={\"time\"}>\r\n {timeAgo(item.openTime ?? 0)}\r\n </span>\r\n </div>\r\n </div>\r\n <div class={\"close-wrapper\"}>\r\n <span\r\n class={\"close-btn\"}\r\n onClick={() => onCloseTab(item.fullPath || \"\")}\r\n >\r\n <CloseOutlined />\r\n </span>\r\n </div>\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n </>\r\n )\r\n }}\r\n </a-popover>\r\n </div>\r\n );\r\n }\r\n});\r\n"],"names":["defineComponent","name","setup","router","useRouter","useToken","theme","token","getList","deleteTabs","useNavTabStore","keys","useMagicKeys","shiftCtrlA","open","ref","y","useWindowScroll","navTabList","computed","sort","a","b","openTime","watch","v","value","val","onCloseTab","path","searchStyle","css","colorBorder","searchListStyle","colorPrimaryBorder","colorBgLayout","colorPrimary","timeAgo","providedTime","now","dayjs","diffInSeconds","diff","diffInMinutes","diffInHours","onJump","item","fullPath","push","_createVNode","_resolveComponent","$event","default","borderRadius","h","DownOutlined","content","_Fragment","prefix","SearchOutlined","suffix","color","_createTextVNode","map","onClick","UnorderedListOutlined","meta","title","window","location","hostname","CloseOutlined"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.vue2.cjs","sources":["../../../../src/components/tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef, watch } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport Search from \"./Search\";\r\nimport { CloseOutlined } from \"@ant-design/icons-vue\";\r\nimport { useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nconst { tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();\r\n\r\nconst { activeKey, list, onChange, onClose } = useTab();\r\n\r\nfunction useStyle(): {\r\n tabsNavStyle: ComputedRef<string>;\r\n tabHoverBgStyle: ComputedRef<string>;\r\n closeBtnStyle: ComputedRef<string>;\r\n} {\r\n const { useToken } = theme;\r\n const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n const activeTabColor = computed(() => token.value.colorBgLayout);\r\n const splitColor = computed(() => token.value.colorBorderSecondary);\r\n\r\n const tabsNavStyle = computed(() => {\r\n return css`\r\n --active-tab-color: ${activeTabColor.value};\r\n --splitColor: ${splitColor.value};\r\n
|
|
1
|
+
{"version":3,"file":"Tab.vue2.cjs","sources":["../../../../src/components/tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef, watch } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport Search from \"./Search\";\r\nimport { CloseOutlined } from \"@ant-design/icons-vue\";\r\nimport { useAppStore, useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nconst { tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();\r\n\r\nconst { activeKey, list, onChange, onClose } = useTab();\r\n\r\nfunction useStyle(): {\r\n tabsNavStyle: ComputedRef<string>;\r\n tabHoverBgStyle: ComputedRef<string>;\r\n closeBtnStyle: ComputedRef<string>;\r\n} {\r\n const { useToken } = theme;\r\n const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n const activeTabColor = computed(() => token.value.colorBgLayout);\r\n const splitColor = computed(() => token.value.colorBorderSecondary);\r\n\r\n const tabsNavStyle = computed(() => {\r\n return css`\r\n --active-tab-color: ${activeTabColor.value};\r\n --splitColor: ${splitColor.value};\r\n padding-top: 10px;\r\n display: flex;\r\n `;\r\n });\r\n\r\n const tabHoverBgStyle = computed(() => {\r\n return css`\r\n &:before {\r\n background: ${token.value.colorPrimaryBgHover};\r\n }\r\n `;\r\n });\r\n\r\n const closeBtnStyle = computed(() => {\r\n return css`\r\n &:hover {\r\n background: ${token.value.colorPrimaryBorderHover};\r\n border-radius: 50%;\r\n }\r\n `;\r\n });\r\n\r\n return {\r\n tabsNavStyle,\r\n tabHoverBgStyle,\r\n closeBtnStyle\r\n };\r\n}\r\n\r\nfunction useTab() {\r\n const route = useRoute();\r\n const router = useRouter();\r\n\r\n const store = useNavTabStore();\r\n const { list, activeKey } = storeToRefs(store);\r\n const { save, deleteTabs } = store;\r\n\r\n watch(\r\n () => route.fullPath,\r\n () => {\r\n save(route);\r\n },\r\n {\r\n immediate: true\r\n }\r\n );\r\n\r\n watch(\r\n () => route.fullPath,\r\n val => {\r\n activeKey.value = val;\r\n },\r\n {\r\n immediate: true\r\n }\r\n );\r\n\r\n const onChange = (key: string) => {\r\n if (key !== route.path) {\r\n // 匹配打开的标签路由数据\r\n const rs = list.value.filter(item => item.fullPath === key)[0];\r\n router.push(rs);\r\n }\r\n };\r\n\r\n const onClose = ($event: Event, key: string | undefined) => {\r\n if (!key) return;\r\n //阻止冒泡\r\n $event.stopPropagation();\r\n // 删除标签\r\n deleteTabs(key);\r\n // 重新push已打开的路由\r\n const backRoute = list.value[list.value.length - 1];\r\n if (backRoute.fullPath) {\r\n router.push(backRoute.fullPath);\r\n }\r\n };\r\n\r\n return {\r\n activeKey,\r\n list,\r\n onChange,\r\n onClose\r\n };\r\n}\r\n</script>\r\n<template>\r\n <div class=\"tabs-nav-wrapper\" :class=\"tabsNavStyle\">\r\n <Search />\r\n <div class=\"d-tabs-nav\">\r\n <a-tabs\r\n size=\"small\"\r\n v-model:activeKey=\"activeKey\"\r\n type=\"card\"\r\n hide-add\r\n @change=\"onChange\"\r\n >\r\n <a-tab-pane\r\n :key=\"item.fullPath\"\r\n :closable=\"false\"\r\n v-for=\"item in list\"\r\n :class=\"{ active: activeKey === item.fullPath }\"\r\n >\r\n <template #tab>\r\n <div class=\"tab-hover-bg\" :class=\"tabHoverBgStyle\"></div>\r\n <div class=\"tab-dividers\"></div>\r\n <div class=\"tab-item\">{{ item.meta?.title || \"无标题\" }}</div>\r\n <div class=\"tab-close\">\r\n <div\r\n class=\"close-btn\"\r\n :class=\"closeBtnStyle\"\r\n @click=\"onClose($event, item.fullPath)\"\r\n >\r\n <CloseOutlined />\r\n </div>\r\n </div>\r\n </template>\r\n </a-tab-pane>\r\n </a-tabs>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\"></style>\r\n"],"names":["theme","computed","tabsNavStyle","css","tabHoverBgStyle","closeBtnStyle","useRoute","useRouter","store","useNavTabStore","list","activeKey","storeToRefs","watch","onChange","onClose"],"mappings":"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"}
|
|
@@ -22,7 +22,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
22
22
|
},
|
|
23
23
|
setup(__props) {
|
|
24
24
|
const props = __props;
|
|
25
|
-
const { layout } = storeToRefs(useAppStore());
|
|
25
|
+
const { layout, modeConfig, sideTokenStyle } = storeToRefs(useAppStore());
|
|
26
26
|
const route = useRoute();
|
|
27
27
|
const { layoutStyle, siderStyle, rightStyle, rightContentStyle } = useStyle();
|
|
28
28
|
useKeepAlive();
|
|
@@ -70,6 +70,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
70
70
|
left: 0;
|
|
71
71
|
width: ${layout.value.sideWidth}px;
|
|
72
72
|
|
|
73
|
+
${modeConfig.value.mode === "light" ? `background:${sideTokenStyle.value.bgColor}!important;` : ""}
|
|
73
74
|
.ant-layout-sider-children {
|
|
74
75
|
display: flex;
|
|
75
76
|
flex-direction: column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.vue2.mjs","sources":["../../../../src/components/layout/Layout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from \"vue\";\r\nimport { useRoute } from \"vue-router\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport DMenu from \"./components/menu/Menu\";\r\nimport SettingDrawer from \"./components/settings/SettingDrawer\";\r\nimport { useAppStore, useKeepAliveStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nimport HeaderLayout from \"./components/layout/HeaderLayout.vue\";\r\nimport RouterContent from \"./components/layout/RouterContent.vue\";\r\nimport AppTheme from \"./components/layout/ThemeApp.vue\";\r\n\r\nconst props = defineProps({\n watermark: { type: Object, required: false, default: () => ({\r\n content: \"\"\r\n }) }\n});\r\n\r\nconst { layout } = storeToRefs(useAppStore());\r\nconst route = useRoute();\r\n\r\nconst { layoutStyle, siderStyle, rightStyle, rightContentStyle } = useStyle();\r\nuseKeepAlive();\r\nconst { watermarkContent } = useWatermark();\r\n\r\nfunction useKeepAlive() {\r\n // 保存需要被缓存的标签\r\n const { save } = useKeepAliveStore();\r\n\r\n watch(\r\n () => route.path,\r\n () => {\r\n save(route);\r\n },\r\n {\r\n immediate: true\r\n }\r\n );\r\n}\r\n\r\nfunction useWatermark() {\r\n const watermarkContent = ref(\"\");\r\n // 监听 watermark 的变化\r\n watch(\r\n () => props.watermark,\r\n val => {\r\n watermarkContent.value = val.content || \"\";\r\n },\r\n { deep: true, immediate: true }\r\n );\r\n\r\n return {\r\n watermarkContent\r\n };\r\n}\r\n\r\nfunction useStyle() {\r\n const layoutStyle = css`\r\n height: 100%;\r\n `;\r\n\r\n const transitionStyle = css`\r\n transition: margin-left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n `;\r\n\r\n const left = computed(\r\n () =>\r\n `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n );\r\n\r\n const siderStyle = computed(\r\n () => css`\r\n position: fixed !important;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: ${layout.value.sideWidth}px;\r\n\r\n .ant-layout-sider-children {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n `\r\n );\r\n\r\n const rightStyle = computed(\r\n () => css`\r\n margin-left: ${left.value};\r\n ${transitionStyle}\r\n `\r\n );\r\n\r\n const rightContentStyle = computed(\r\n () => css`\r\n padding-top: ${layout.value.headerHeight}px;\r\n `\r\n );\r\n\r\n return {\r\n layoutStyle,\r\n siderStyle,\r\n rightStyle,\r\n rightContentStyle\r\n };\r\n}\r\n</script>\r\n\r\n<template>\r\n <app-theme>\r\n <a-layout :class=\"layoutStyle\">\r\n <a-layout-sider\r\n v-model:collapsed=\"layout.collapsed\"\r\n theme=\"light\"\r\n collapsible\r\n :trigger=\"null\"\r\n :class=\"siderStyle\"\r\n >\r\n <slot name=\"logo\"></slot>\r\n <d-menu />\r\n </a-layout-sider>\r\n <a-layout :class=\"rightStyle\">\r\n <a-watermark\r\n :content=\"watermarkContent\"\r\n style=\"display: flex; height: 100%\"\r\n >\r\n <header-layout>\r\n <slot name=\"headerRight\"></slot>\r\n </header-layout>\r\n <a-layout-content :class=\"rightContentStyle\">\r\n <RouterContent />\r\n </a-layout-content>\r\n </a-watermark>\r\n </a-layout>\r\n </a-layout>\r\n </app-theme>\r\n <SettingDrawer />\r\n <a-back-top></a-back-top>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["watermarkContent","layoutStyle","siderStyle","rightStyle","rightContentStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Layout.vue2.mjs","sources":["../../../../src/components/layout/Layout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from \"vue\";\r\nimport { useRoute } from \"vue-router\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport DMenu from \"./components/menu/Menu\";\r\nimport SettingDrawer from \"./components/settings/SettingDrawer\";\r\nimport { useAppStore, useKeepAliveStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nimport HeaderLayout from \"./components/layout/HeaderLayout.vue\";\r\nimport RouterContent from \"./components/layout/RouterContent.vue\";\r\nimport AppTheme from \"./components/layout/ThemeApp.vue\";\r\n\r\nconst props = defineProps({\n watermark: { type: Object, required: false, default: () => ({\r\n content: \"\"\r\n }) }\n});\r\n\r\nconst { layout, modeConfig, sideTokenStyle } = storeToRefs(useAppStore());\r\nconst route = useRoute();\r\n\r\nconst { layoutStyle, siderStyle, rightStyle, rightContentStyle } = useStyle();\r\nuseKeepAlive();\r\nconst { watermarkContent } = useWatermark();\r\n\r\nfunction useKeepAlive() {\r\n // 保存需要被缓存的标签\r\n const { save } = useKeepAliveStore();\r\n\r\n watch(\r\n () => route.path,\r\n () => {\r\n save(route);\r\n },\r\n {\r\n immediate: true\r\n }\r\n );\r\n}\r\n\r\nfunction useWatermark() {\r\n const watermarkContent = ref(\"\");\r\n // 监听 watermark 的变化\r\n watch(\r\n () => props.watermark,\r\n val => {\r\n watermarkContent.value = val.content || \"\";\r\n },\r\n { deep: true, immediate: true }\r\n );\r\n\r\n return {\r\n watermarkContent\r\n };\r\n}\r\n\r\nfunction useStyle() {\r\n const layoutStyle = css`\r\n height: 100%;\r\n `;\r\n\r\n const transitionStyle = css`\r\n transition: margin-left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n `;\r\n\r\n const left = computed(\r\n () =>\r\n `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n );\r\n\r\n const siderStyle = computed(\r\n () => css`\r\n position: fixed !important;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: ${layout.value.sideWidth}px;\r\n\r\n ${modeConfig.value.mode === \"light\"\r\n ? `background:${sideTokenStyle.value.bgColor}!important;`\r\n : \"\"}\r\n .ant-layout-sider-children {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n `\r\n );\r\n\r\n const rightStyle = computed(\r\n () => css`\r\n margin-left: ${left.value};\r\n ${transitionStyle}\r\n `\r\n );\r\n\r\n const rightContentStyle = computed(\r\n () => css`\r\n padding-top: ${layout.value.headerHeight}px;\r\n `\r\n );\r\n\r\n return {\r\n layoutStyle,\r\n siderStyle,\r\n rightStyle,\r\n rightContentStyle\r\n };\r\n}\r\n</script>\r\n\r\n<template>\r\n <app-theme>\r\n <a-layout :class=\"layoutStyle\">\r\n <a-layout-sider\r\n v-model:collapsed=\"layout.collapsed\"\r\n theme=\"light\"\r\n collapsible\r\n :trigger=\"null\"\r\n :class=\"siderStyle\"\r\n >\r\n <slot name=\"logo\"></slot>\r\n <d-menu />\r\n </a-layout-sider>\r\n <a-layout :class=\"rightStyle\">\r\n <a-watermark\r\n :content=\"watermarkContent\"\r\n style=\"display: flex; height: 100%\"\r\n >\r\n <header-layout>\r\n <slot name=\"headerRight\"></slot>\r\n </header-layout>\r\n <a-layout-content :class=\"rightContentStyle\">\r\n <RouterContent />\r\n </a-layout-content>\r\n </a-watermark>\r\n </a-layout>\r\n </a-layout>\r\n </app-theme>\r\n <SettingDrawer />\r\n <a-back-top></a-back-top>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["watermarkContent","layoutStyle","siderStyle","rightStyle","rightContentStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,EAAE,MAAQ,EAAA,UAAA,EAAY,gBAAmB,GAAA,WAAA,CAAY,aAAa,CAAA;AACxE,IAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,IAAA,MAAM,EAAE,WAAa,EAAA,UAAA,EAAY,UAAY,EAAA,iBAAA,KAAsB,QAAS,EAAA;AAC5E,IAAa,YAAA,EAAA;AACb,IAAM,MAAA,EAAE,gBAAiB,EAAA,GAAI,YAAa,EAAA;AAE1C,IAAA,SAAS,YAAe,GAAA;AAEtB,MAAM,MAAA,EAAE,IAAK,EAAA,GAAI,iBAAkB,EAAA;AAEnC,MAAA,KAAA;AAAA,QACE,MAAM,KAAM,CAAA,IAAA;AAAA,QACZ,MAAM;AACJ,UAAA,IAAA,CAAK,KAAK,CAAA;AAAA,SACZ;AAAA,QACA;AAAA,UACE,SAAW,EAAA;AAAA;AACb,OACF;AAAA;AAGF,IAAA,SAAS,YAAe,GAAA;AACtB,MAAMA,MAAAA,iBAAAA,GAAmB,IAAI,EAAE,CAAA;AAE/B,MAAA,KAAA;AAAA,QACE,MAAM,KAAM,CAAA,SAAA;AAAA,QACZ,CAAO,GAAA,KAAA;AACL,UAAAA,iBAAAA,CAAiB,KAAQ,GAAA,GAAA,CAAI,OAAW,IAAA,EAAA;AAAA,SAC1C;AAAA,QACA,EAAE,IAAA,EAAM,IAAM,EAAA,SAAA,EAAW,IAAK;AAAA,OAChC;AAEA,MAAO,OAAA;AAAA,QACL,gBAAAA,EAAAA;AAAA,OACF;AAAA;AAGF,IAAA,SAAS,QAAW,GAAA;AAClB,MAAA,MAAMC,YAAc,GAAA,GAAA;AAAA;AAAA,EAAA,CAAA;AAIpB,MAAA,MAAM,eAAkB,GAAA,GAAA;AAAA;AAAA,EAAA,CAAA;AAIxB,MAAA,MAAM,IAAO,GAAA,QAAA;AAAA,QACX,MACE,CAAG,EAAA,MAAA,CAAO,KAAM,CAAA,SAAA,GAAY,OAAO,KAAM,CAAA,cAAA,GAAiB,MAAO,CAAA,KAAA,CAAM,SAAS,CAAA,EAAA;AAAA,OACpF;AAEA,MAAA,MAAMC,WAAa,GAAA,QAAA;AAAA,QACjB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAKK,EAAA,MAAA,CAAO,MAAM,SAAS,CAAA;;AAAA,MAE7B,EAAA,UAAA,CAAW,MAAM,IAAS,KAAA,OAAA,GACxB,cAAc,cAAe,CAAA,KAAA,CAAM,OAAO,CAAA,WAAA,CAAA,GAC1C,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAMV;AAEA,MAAA,MAAMC,WAAa,GAAA,QAAA;AAAA,QACjB,MAAM,GAAA;AAAA,mBAAA,EACW,KAAK,KAAK,CAAA;AAAA,MAAA,EACvB,eAAe;AAAA,IAAA;AAAA,OAErB;AAEA,MAAA,MAAMC,kBAAoB,GAAA,QAAA;AAAA,QACxB,MAAM,GAAA;AAAA,mBACW,EAAA,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA,IAAA;AAAA,OAE5C;AAEA,MAAO,OAAA;AAAA,QACL,WAAAH,EAAAA,YAAAA;AAAA,QACA,UAAAC,EAAAA,WAAAA;AAAA,QACA,UAAAC,EAAAA,WAAAA;AAAA,QACA,iBAAAC,EAAAA;AAAA,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|