@peng_kai/kit 0.2.45 → 0.2.47
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/admin/components/filter/src/FilterDrawer.vue +153 -153
- package/admin/components/scroll-nav/index.ts +1 -1
- package/admin/components/text/src/Duration.vue +26 -26
- package/admin/components/text/src/createTagGetter.ts +13 -13
- package/admin/route-guards/index.ts +3 -3
- package/admin/route-guards/pageProgress.ts +27 -27
- package/admin/styles/globalCover.scss +54 -54
- package/antd/directives/formLabelAlign.ts +36 -36
- package/antd/hooks/useAntdModal.ts +7 -5
- package/package.json +95 -95
- package/request/interceptors/popupMessage.ts +1 -1
- package/stylelint.config.cjs +7 -7
- package/vue/components/echarts/src/ECharts.vue +45 -12
- package/vue/components/infinite-query/index.ts +1 -1
- package/vue/components/infinite-query/src/useCreateTrigger.ts +39 -39
- package/vue/hooks/useIsActivated.ts +1 -1
- package/vue/hooks/useSyncModalParams.ts +2 -2
|
@@ -1,153 +1,153 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
import { computed, ref } from 'vue';
|
|
3
|
-
import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
|
|
4
|
-
|
|
5
|
-
defineOptions({
|
|
6
|
-
inheritAttrs: false,
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
const props = withDefaults(defineProps<{
|
|
10
|
-
loading?: boolean
|
|
11
|
-
filterQuery?: any
|
|
12
|
-
filterParams?: any
|
|
13
|
-
filterForm?: any
|
|
14
|
-
}>(), {
|
|
15
|
-
loading: undefined,
|
|
16
|
-
});
|
|
17
|
-
const emits = defineEmits<{
|
|
18
|
-
(e: 'filter'): void
|
|
19
|
-
(e: 'reset', value: number): void
|
|
20
|
-
}>();
|
|
21
|
-
|
|
22
|
-
const filterVisible = ref(false);
|
|
23
|
-
const loading = computed(() => {
|
|
24
|
-
const _loading1 = props.loading;
|
|
25
|
-
const _loading2: boolean = props.filterQuery?.isFetching.value;
|
|
26
|
-
|
|
27
|
-
if (_loading1 === undefined && _loading2 === undefined)
|
|
28
|
-
return false;
|
|
29
|
-
|
|
30
|
-
if (_loading1 !== undefined)
|
|
31
|
-
return _loading1;
|
|
32
|
-
|
|
33
|
-
return _loading2;
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
function filter() {
|
|
37
|
-
props.filterParams?.update?.();
|
|
38
|
-
emits('filter');
|
|
39
|
-
filterVisible.value = false;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function reset() {
|
|
43
|
-
props.filterForm?.$form.resetFields?.();
|
|
44
|
-
props.filterParams?.update?.();
|
|
45
|
-
emits('reset', 1);
|
|
46
|
-
filterVisible.value = false;
|
|
47
|
-
}
|
|
48
|
-
</script>
|
|
49
|
-
|
|
50
|
-
<template>
|
|
51
|
-
<div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
|
|
52
|
-
<!-- .filter-params 为空时显示 .filter-params-tips -->
|
|
53
|
-
|
|
54
|
-
<div class="m--3 p-3" @click="filterVisible = true">
|
|
55
|
-
<div class="filter-params">
|
|
56
|
-
<slot name="params" />
|
|
57
|
-
</div>
|
|
58
|
-
<div class="filter-params-tips">
|
|
59
|
-
条件筛选,点击打开
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<!-- 操作区 -->
|
|
64
|
-
<div v-if="$slots.actions || $slots.moreActions" class="actions">
|
|
65
|
-
<slot name="actions" />
|
|
66
|
-
|
|
67
|
-
<ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
|
|
68
|
-
<AButton type="link" size="small">
|
|
69
|
-
更多
|
|
70
|
-
</AButton>
|
|
71
|
-
<template #overlay>
|
|
72
|
-
<slot name="moreActions" />
|
|
73
|
-
</template>
|
|
74
|
-
</ADropdown>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
|
|
78
|
-
<ADrawer
|
|
79
|
-
v-model:open="filterVisible" class="filter-drawer" placement="bottom"
|
|
80
|
-
height="50vh"
|
|
81
|
-
>
|
|
82
|
-
<template #extra>
|
|
83
|
-
<AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
|
|
84
|
-
重置
|
|
85
|
-
</AButton>
|
|
86
|
-
<AButton class="my--3" type="primary" :loading="loading" @click="filter()">
|
|
87
|
-
筛选
|
|
88
|
-
</AButton>
|
|
89
|
-
</template>
|
|
90
|
-
<template #default>
|
|
91
|
-
<slot />
|
|
92
|
-
</template>
|
|
93
|
-
</ADrawer>
|
|
94
|
-
</template>
|
|
95
|
-
|
|
96
|
-
<style scoped lang="scss">
|
|
97
|
-
.filter-params {
|
|
98
|
-
display: flex;
|
|
99
|
-
flex-wrap: wrap;
|
|
100
|
-
justify-content: flex-start;
|
|
101
|
-
gap: 5px 15px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
// .filter-params 为空时显示 .filter-params-tips
|
|
105
|
-
.filter-params-tips {
|
|
106
|
-
display: none;
|
|
107
|
-
color: theme('colors.gray.DEFAULT');
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.filter-params:empty {
|
|
111
|
-
display: none;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.filter-params:empty + .filter-params-tips {
|
|
115
|
-
display: block;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.actions {
|
|
119
|
-
display: flex;
|
|
120
|
-
align-items: center;
|
|
121
|
-
justify-content: flex-end;
|
|
122
|
-
border-top: 1px solid var(--antd-colorBorderSecondary);
|
|
123
|
-
margin-top: 0.75rem;
|
|
124
|
-
padding-top: 0.75rem;
|
|
125
|
-
}
|
|
126
|
-
</style>
|
|
127
|
-
|
|
128
|
-
<style lang="scss">
|
|
129
|
-
.filter-drawer {
|
|
130
|
-
.ant-drawer-header {
|
|
131
|
-
padding: 16px;
|
|
132
|
-
|
|
133
|
-
.ant-drawer-close {
|
|
134
|
-
--expand: 5px;
|
|
135
|
-
|
|
136
|
-
padding: var(--expand);
|
|
137
|
-
margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.ant-drawer-body {
|
|
142
|
-
padding: 16px;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.ant-form-item {
|
|
146
|
-
margin-bottom: 0;
|
|
147
|
-
|
|
148
|
-
.ant-form-item-label {
|
|
149
|
-
padding-bottom: 0;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
</style>
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { computed, ref } from 'vue';
|
|
3
|
+
import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
|
|
4
|
+
|
|
5
|
+
defineOptions({
|
|
6
|
+
inheritAttrs: false,
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
const props = withDefaults(defineProps<{
|
|
10
|
+
loading?: boolean
|
|
11
|
+
filterQuery?: any
|
|
12
|
+
filterParams?: any
|
|
13
|
+
filterForm?: any
|
|
14
|
+
}>(), {
|
|
15
|
+
loading: undefined,
|
|
16
|
+
});
|
|
17
|
+
const emits = defineEmits<{
|
|
18
|
+
(e: 'filter'): void
|
|
19
|
+
(e: 'reset', value: number): void
|
|
20
|
+
}>();
|
|
21
|
+
|
|
22
|
+
const filterVisible = ref(false);
|
|
23
|
+
const loading = computed(() => {
|
|
24
|
+
const _loading1 = props.loading;
|
|
25
|
+
const _loading2: boolean = props.filterQuery?.isFetching.value;
|
|
26
|
+
|
|
27
|
+
if (_loading1 === undefined && _loading2 === undefined)
|
|
28
|
+
return false;
|
|
29
|
+
|
|
30
|
+
if (_loading1 !== undefined)
|
|
31
|
+
return _loading1;
|
|
32
|
+
|
|
33
|
+
return _loading2;
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
function filter() {
|
|
37
|
+
props.filterParams?.update?.();
|
|
38
|
+
emits('filter');
|
|
39
|
+
filterVisible.value = false;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function reset() {
|
|
43
|
+
props.filterForm?.$form.resetFields?.();
|
|
44
|
+
props.filterParams?.update?.();
|
|
45
|
+
emits('reset', 1);
|
|
46
|
+
filterVisible.value = false;
|
|
47
|
+
}
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<template>
|
|
51
|
+
<div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
|
|
52
|
+
<!-- .filter-params 为空时显示 .filter-params-tips -->
|
|
53
|
+
|
|
54
|
+
<div class="m--3 p-3" @click="filterVisible = true">
|
|
55
|
+
<div class="filter-params">
|
|
56
|
+
<slot name="params" />
|
|
57
|
+
</div>
|
|
58
|
+
<div class="filter-params-tips">
|
|
59
|
+
条件筛选,点击打开
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<!-- 操作区 -->
|
|
64
|
+
<div v-if="$slots.actions || $slots.moreActions" class="actions">
|
|
65
|
+
<slot name="actions" />
|
|
66
|
+
|
|
67
|
+
<ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
|
|
68
|
+
<AButton type="link" size="small">
|
|
69
|
+
更多
|
|
70
|
+
</AButton>
|
|
71
|
+
<template #overlay>
|
|
72
|
+
<slot name="moreActions" />
|
|
73
|
+
</template>
|
|
74
|
+
</ADropdown>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<ADrawer
|
|
79
|
+
v-model:open="filterVisible" class="filter-drawer" placement="bottom"
|
|
80
|
+
height="50vh"
|
|
81
|
+
>
|
|
82
|
+
<template #extra>
|
|
83
|
+
<AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
|
|
84
|
+
重置
|
|
85
|
+
</AButton>
|
|
86
|
+
<AButton class="my--3" type="primary" :loading="loading" @click="filter()">
|
|
87
|
+
筛选
|
|
88
|
+
</AButton>
|
|
89
|
+
</template>
|
|
90
|
+
<template #default>
|
|
91
|
+
<slot />
|
|
92
|
+
</template>
|
|
93
|
+
</ADrawer>
|
|
94
|
+
</template>
|
|
95
|
+
|
|
96
|
+
<style scoped lang="scss">
|
|
97
|
+
.filter-params {
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-wrap: wrap;
|
|
100
|
+
justify-content: flex-start;
|
|
101
|
+
gap: 5px 15px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// .filter-params 为空时显示 .filter-params-tips
|
|
105
|
+
.filter-params-tips {
|
|
106
|
+
display: none;
|
|
107
|
+
color: theme('colors.gray.DEFAULT');
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.filter-params:empty {
|
|
111
|
+
display: none;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.filter-params:empty + .filter-params-tips {
|
|
115
|
+
display: block;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.actions {
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
justify-content: flex-end;
|
|
122
|
+
border-top: 1px solid var(--antd-colorBorderSecondary);
|
|
123
|
+
margin-top: 0.75rem;
|
|
124
|
+
padding-top: 0.75rem;
|
|
125
|
+
}
|
|
126
|
+
</style>
|
|
127
|
+
|
|
128
|
+
<style lang="scss">
|
|
129
|
+
.filter-drawer {
|
|
130
|
+
.ant-drawer-header {
|
|
131
|
+
padding: 16px;
|
|
132
|
+
|
|
133
|
+
.ant-drawer-close {
|
|
134
|
+
--expand: 5px;
|
|
135
|
+
|
|
136
|
+
padding: var(--expand);
|
|
137
|
+
margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.ant-drawer-body {
|
|
142
|
+
padding: 16px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.ant-form-item {
|
|
146
|
+
margin-bottom: 0;
|
|
147
|
+
|
|
148
|
+
.ant-form-item-label {
|
|
149
|
+
padding-bottom: 0;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
</style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as ScrollNav } from './src/ScrollNav.vue';
|
|
1
|
+
export { default as ScrollNav } from './src/ScrollNav.vue';
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { computed } from 'vue';
|
|
3
|
-
|
|
4
|
-
const props = defineProps<{
|
|
5
|
-
seconds: number
|
|
6
|
-
}>();
|
|
7
|
-
|
|
8
|
-
const formattedDuration = computed(() => {
|
|
9
|
-
const days = Math.floor(props.seconds / (3600 * 24));
|
|
10
|
-
const hours = Math.floor((props.seconds % (3600 * 24)) / 3600);
|
|
11
|
-
const minutes = Math.floor((props.seconds % 3600) / 60);
|
|
12
|
-
const seconds = props.seconds % 60;
|
|
13
|
-
let formattedDuration = '';
|
|
14
|
-
|
|
15
|
-
days >= 1 && (formattedDuration += `${Math.floor(days)}天 `);
|
|
16
|
-
hours >= 1 && (formattedDuration += `${Math.floor(hours)}小时 `);
|
|
17
|
-
minutes >= 1 && (formattedDuration += `${Math.floor(minutes)}分钟 `);
|
|
18
|
-
seconds >= 1 && (formattedDuration += `${Math.floor(seconds)}秒`);
|
|
19
|
-
|
|
20
|
-
return formattedDuration;
|
|
21
|
-
});
|
|
22
|
-
</script>
|
|
23
|
-
|
|
24
|
-
<template>
|
|
25
|
-
<span>{{ formattedDuration }}</span>
|
|
26
|
-
</template>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
|
|
4
|
+
const props = defineProps<{
|
|
5
|
+
seconds: number
|
|
6
|
+
}>();
|
|
7
|
+
|
|
8
|
+
const formattedDuration = computed(() => {
|
|
9
|
+
const days = Math.floor(props.seconds / (3600 * 24));
|
|
10
|
+
const hours = Math.floor((props.seconds % (3600 * 24)) / 3600);
|
|
11
|
+
const minutes = Math.floor((props.seconds % 3600) / 60);
|
|
12
|
+
const seconds = props.seconds % 60;
|
|
13
|
+
let formattedDuration = '';
|
|
14
|
+
|
|
15
|
+
days >= 1 && (formattedDuration += `${Math.floor(days)}天 `);
|
|
16
|
+
hours >= 1 && (formattedDuration += `${Math.floor(hours)}小时 `);
|
|
17
|
+
minutes >= 1 && (formattedDuration += `${Math.floor(minutes)}分钟 `);
|
|
18
|
+
seconds >= 1 && (formattedDuration += `${Math.floor(seconds)}秒`);
|
|
19
|
+
|
|
20
|
+
return formattedDuration;
|
|
21
|
+
});
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<template>
|
|
25
|
+
<span>{{ formattedDuration }}</span>
|
|
26
|
+
</template>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { computed, h } from 'vue';
|
|
2
|
-
import { Tag as ATag } from 'ant-design-vue';
|
|
3
|
-
import type { TagProps } from 'ant-design-vue';
|
|
4
|
-
|
|
5
|
-
export function createTagGetter(typeMapFn: () => { [code: number | string]: [ text: string, color: TagProps['color'] ] }) {
|
|
6
|
-
const typeMap = computed(typeMapFn);
|
|
7
|
-
|
|
8
|
-
return (type: number | string) => {
|
|
9
|
-
const [text, color] = typeMap.value[type] ?? [];
|
|
10
|
-
|
|
11
|
-
return text ? h(ATag, { color }, () => text) : h('span', null, '-');
|
|
12
|
-
};
|
|
13
|
-
}
|
|
1
|
+
import { computed, h } from 'vue';
|
|
2
|
+
import { Tag as ATag } from 'ant-design-vue';
|
|
3
|
+
import type { TagProps } from 'ant-design-vue';
|
|
4
|
+
|
|
5
|
+
export function createTagGetter(typeMapFn: () => { [code: number | string]: [ text: string, color: TagProps['color'] ] }) {
|
|
6
|
+
const typeMap = computed(typeMapFn);
|
|
7
|
+
|
|
8
|
+
return (type: number | string) => {
|
|
9
|
+
const [text, color] = typeMap.value[type] ?? [];
|
|
10
|
+
|
|
11
|
+
return text ? h(ATag, { color }, () => text) : h('span', null, '-');
|
|
12
|
+
};
|
|
13
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { setupPageProgress } from './pageProgress';
|
|
2
|
-
export { setupPageTitle } from './pageTitle';
|
|
3
|
-
export { setupCollapseMenu } from './collapseMenu';
|
|
1
|
+
export { setupPageProgress } from './pageProgress';
|
|
2
|
+
export { setupPageTitle } from './pageTitle';
|
|
3
|
+
export { setupCollapseMenu } from './collapseMenu';
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import type { Router } from 'vue-router';
|
|
2
|
-
import { useStyleTag } from '@vueuse/core';
|
|
3
|
-
import NProgress from 'nprogress';
|
|
4
|
-
import 'nprogress/nprogress.css';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* 用于显示页面跳转时,页面顶部进度条
|
|
8
|
-
*/
|
|
9
|
-
export function setupPageProgress(router: Router) {
|
|
10
|
-
NProgress.configure({ showSpinner: false });
|
|
11
|
-
useStyleTag(`
|
|
12
|
-
#nprogress .bar {
|
|
13
|
-
height: 3px;
|
|
14
|
-
background: var(--antd-colorPrimary);
|
|
15
|
-
}
|
|
16
|
-
#nprogress .peg {
|
|
17
|
-
box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
|
|
18
|
-
}
|
|
19
|
-
`);
|
|
20
|
-
|
|
21
|
-
router.beforeEach(() => {
|
|
22
|
-
NProgress.start();
|
|
23
|
-
});
|
|
24
|
-
router.afterEach(() => {
|
|
25
|
-
setTimeout(() => NProgress.done(), 200);
|
|
26
|
-
});
|
|
27
|
-
}
|
|
1
|
+
import type { Router } from 'vue-router';
|
|
2
|
+
import { useStyleTag } from '@vueuse/core';
|
|
3
|
+
import NProgress from 'nprogress';
|
|
4
|
+
import 'nprogress/nprogress.css';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* 用于显示页面跳转时,页面顶部进度条
|
|
8
|
+
*/
|
|
9
|
+
export function setupPageProgress(router: Router) {
|
|
10
|
+
NProgress.configure({ showSpinner: false });
|
|
11
|
+
useStyleTag(`
|
|
12
|
+
#nprogress .bar {
|
|
13
|
+
height: 3px;
|
|
14
|
+
background: var(--antd-colorPrimary);
|
|
15
|
+
}
|
|
16
|
+
#nprogress .peg {
|
|
17
|
+
box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
|
|
18
|
+
}
|
|
19
|
+
`);
|
|
20
|
+
|
|
21
|
+
router.beforeEach(() => {
|
|
22
|
+
NProgress.start();
|
|
23
|
+
});
|
|
24
|
+
router.afterEach(() => {
|
|
25
|
+
setTimeout(() => NProgress.done(), 200);
|
|
26
|
+
});
|
|
27
|
+
}
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
// table 组件头部圆角设为 0
|
|
3
|
-
.ant-table-wrapper {
|
|
4
|
-
.ant-table .ant-table-header,
|
|
5
|
-
table,
|
|
6
|
-
.ant-table-container table > thead > tr:first-child > *:first-child,
|
|
7
|
-
.ant-table-container table > thead > tr:first-child > *:last-child {
|
|
8
|
-
border-radius: 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.ant-pagination {
|
|
12
|
-
margin-bottom: 0;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
// 隐藏在 sticky 模式下的滚动条
|
|
18
|
-
.ant-table-sticky-scroll {
|
|
19
|
-
display: none;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// 卡片
|
|
23
|
-
.ant-card .ant-card-actions > li > span {
|
|
24
|
-
cursor: inherit;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// Tab 溢出出现下列框时
|
|
28
|
-
.ant-tabs-dropdown-menu-title-content {
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
justify-content: space-between;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// 表格
|
|
35
|
-
.ant-table-wrapper {
|
|
36
|
-
.ant-table-row-expand-icon-collapsed::before {
|
|
37
|
-
height: 1.5px;
|
|
38
|
-
}
|
|
39
|
-
.ant-table-row-expand-icon-collapsed::after {
|
|
40
|
-
width: 1.5px;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.ant-drawer {
|
|
45
|
-
&:focus {
|
|
46
|
-
outline: none;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&.ant-drawer-bottom .ant-drawer-content {
|
|
50
|
-
border-top-left-radius: 8px;
|
|
51
|
-
border-top-right-radius: 8px;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
// table 组件头部圆角设为 0
|
|
3
|
+
.ant-table-wrapper {
|
|
4
|
+
.ant-table .ant-table-header,
|
|
5
|
+
table,
|
|
6
|
+
.ant-table-container table > thead > tr:first-child > *:first-child,
|
|
7
|
+
.ant-table-container table > thead > tr:first-child > *:last-child {
|
|
8
|
+
border-radius: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ant-pagination {
|
|
12
|
+
margin-bottom: 0;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
// 隐藏在 sticky 模式下的滚动条
|
|
18
|
+
.ant-table-sticky-scroll {
|
|
19
|
+
display: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// 卡片
|
|
23
|
+
.ant-card .ant-card-actions > li > span {
|
|
24
|
+
cursor: inherit;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Tab 溢出出现下列框时
|
|
28
|
+
.ant-tabs-dropdown-menu-title-content {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: space-between;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// 表格
|
|
35
|
+
.ant-table-wrapper {
|
|
36
|
+
.ant-table-row-expand-icon-collapsed::before {
|
|
37
|
+
height: 1.5px;
|
|
38
|
+
}
|
|
39
|
+
.ant-table-row-expand-icon-collapsed::after {
|
|
40
|
+
width: 1.5px;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.ant-drawer {
|
|
45
|
+
&:focus {
|
|
46
|
+
outline: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.ant-drawer-bottom .ant-drawer-content {
|
|
50
|
+
border-top-left-radius: 8px;
|
|
51
|
+
border-top-right-radius: 8px;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import type { App } from 'vue';
|
|
2
|
-
|
|
3
|
-
export function formLabelAlign(app: App) {
|
|
4
|
-
const directiveName = 'antd-form-label-align';
|
|
5
|
-
const resizeObserverKey = `${directiveName}@resizeObserver`;
|
|
6
|
-
|
|
7
|
-
function init(el: HTMLElement) {
|
|
8
|
-
const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
|
|
9
|
-
const resizeObserver = new ResizeObserver((entries) => {
|
|
10
|
-
const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
|
|
11
|
-
const maxWidth = Math.max(...widths);
|
|
12
|
-
|
|
13
|
-
if (maxWidth <= 0)
|
|
14
|
-
return;
|
|
15
|
-
|
|
16
|
-
el.style.setProperty('--max-label-width', `${maxWidth}px`);
|
|
17
|
-
entries.forEach((e) => {
|
|
18
|
-
const target = e.target as HTMLElement;
|
|
19
|
-
target.style.setProperty('width', 'var(--max-label-width)');
|
|
20
|
-
});
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
Array.from(labels).forEach(label => resizeObserver.observe(label));
|
|
24
|
-
|
|
25
|
-
return resizeObserver;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
app.directive(directiveName, {
|
|
29
|
-
mounted(el: HTMLElement) {
|
|
30
|
-
(el as any)[resizeObserverKey] = init(el);
|
|
31
|
-
},
|
|
32
|
-
updated(el) {
|
|
33
|
-
(el as any)[resizeObserverKey] = init(el);
|
|
34
|
-
},
|
|
35
|
-
});
|
|
36
|
-
}
|
|
1
|
+
import type { App } from 'vue';
|
|
2
|
+
|
|
3
|
+
export function formLabelAlign(app: App) {
|
|
4
|
+
const directiveName = 'antd-form-label-align';
|
|
5
|
+
const resizeObserverKey = `${directiveName}@resizeObserver`;
|
|
6
|
+
|
|
7
|
+
function init(el: HTMLElement) {
|
|
8
|
+
const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
|
|
9
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
10
|
+
const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
|
|
11
|
+
const maxWidth = Math.max(...widths);
|
|
12
|
+
|
|
13
|
+
if (maxWidth <= 0)
|
|
14
|
+
return;
|
|
15
|
+
|
|
16
|
+
el.style.setProperty('--max-label-width', `${maxWidth}px`);
|
|
17
|
+
entries.forEach((e) => {
|
|
18
|
+
const target = e.target as HTMLElement;
|
|
19
|
+
target.style.setProperty('width', 'var(--max-label-width)');
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
Array.from(labels).forEach(label => resizeObserver.observe(label));
|
|
24
|
+
|
|
25
|
+
return resizeObserver;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
app.directive(directiveName, {
|
|
29
|
+
mounted(el: HTMLElement) {
|
|
30
|
+
(el as any)[resizeObserverKey] = init(el);
|
|
31
|
+
},
|
|
32
|
+
updated(el) {
|
|
33
|
+
(el as any)[resizeObserverKey] = init(el);
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
}
|
|
@@ -63,21 +63,23 @@ export function useAntdModal<Comp extends Component>(
|
|
|
63
63
|
|
|
64
64
|
const _onClose = (e?: any) => {
|
|
65
65
|
if (_modalProps.rejectOnClose)
|
|
66
|
-
promiseResolvers
|
|
66
|
+
promiseResolvers?.reject(e ?? new Error('Modal Cancel'));
|
|
67
67
|
else
|
|
68
|
-
promiseResolvers
|
|
68
|
+
promiseResolvers?.resolve(undefined as any);
|
|
69
69
|
};
|
|
70
70
|
|
|
71
71
|
const open = (
|
|
72
72
|
newCompProps?: typeof compProps,
|
|
73
73
|
newAntdModalProps?: Omit<Partial<ModalProps>, 'open'>,
|
|
74
74
|
) => {
|
|
75
|
-
if (_modalProps.open)
|
|
76
|
-
return Promise.reject(new Error('Modal is already open'));
|
|
77
|
-
|
|
78
75
|
Object.assign(_modalProps, newAntdModalProps);
|
|
79
76
|
Object.assign(compProps, newCompProps);
|
|
80
77
|
|
|
78
|
+
if (_modalProps.open) {
|
|
79
|
+
// return Promise.reject(new Error('Modal is already open'));
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
|
|
81
83
|
promiseResolvers = Promise.withResolvers();
|
|
82
84
|
_modalProps.open = true;
|
|
83
85
|
|
package/package.json
CHANGED
|
@@ -1,95 +1,95 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@peng_kai/kit",
|
|
3
|
-
"type": "module",
|
|
4
|
-
"version": "0.2.
|
|
5
|
-
"description": "",
|
|
6
|
-
"author": "",
|
|
7
|
-
"license": "ISC",
|
|
8
|
-
"keywords": [],
|
|
9
|
-
"main": "index.js",
|
|
10
|
-
"scripts": {
|
|
11
|
-
"dev:js": "tsx ./admin/scripts/deploy.ts",
|
|
12
|
-
"lint": "eslint .",
|
|
13
|
-
"lint:fix": "eslint . --fix"
|
|
14
|
-
},
|
|
15
|
-
"peerDependencies": {
|
|
16
|
-
"ant-design-vue": "4.2.3",
|
|
17
|
-
"vue": "3.4.31",
|
|
18
|
-
"vue-router": "4.4.0"
|
|
19
|
-
},
|
|
20
|
-
"dependencies": {
|
|
21
|
-
"@aws-sdk/client-s3": "^3.609.0",
|
|
22
|
-
"@aws-sdk/lib-storage": "^3.609.0",
|
|
23
|
-
"@babel/generator": "^7.24.7",
|
|
24
|
-
"@babel/parser": "^7.24.7",
|
|
25
|
-
"@babel/traverse": "^7.24.7",
|
|
26
|
-
"@babel/types": "^7.24.7",
|
|
27
|
-
"@ckeditor/ckeditor5-vue": "^5.1.0",
|
|
28
|
-
"@fingerprintjs/fingerprintjs": "^4.4.1",
|
|
29
|
-
"@tanstack/vue-query": "^5.49.1",
|
|
30
|
-
"@vueuse/components": "^10.11.0",
|
|
31
|
-
"@vueuse/core": "^10.11.0",
|
|
32
|
-
"@vueuse/router": "^10.11.0",
|
|
33
|
-
"a-calc": "^1.3.12",
|
|
34
|
-
"archiver": "^7.0.1",
|
|
35
|
-
"axios": "^1.7.2",
|
|
36
|
-
"bignumber.js": "^9.1.2",
|
|
37
|
-
"chokidar": "^3.6.0",
|
|
38
|
-
"crypto-es": "^2.1.0",
|
|
39
|
-
"dayjs": "^1.11.11",
|
|
40
|
-
"echarts": "^5.4.3",
|
|
41
|
-
"execa": "^9.3.0",
|
|
42
|
-
"fast-glob": "^3.3.2",
|
|
43
|
-
"localstorage-slim": "^2.7.1",
|
|
44
|
-
"lodash-es": "^4.17.21",
|
|
45
|
-
"nprogress": "^0.2.0",
|
|
46
|
-
"pinia": "^2.1.7",
|
|
47
|
-
"tsx": "^4.16.00",
|
|
48
|
-
"vue": "^3.4.31",
|
|
49
|
-
"vue-i18n": "^9.13.1",
|
|
50
|
-
"vue-router": "^4.4.0"
|
|
51
|
-
},
|
|
52
|
-
"devDependencies": {
|
|
53
|
-
"@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
|
|
54
|
-
"@ckeditor/ckeditor5-alignment": "^41.1.0",
|
|
55
|
-
"@ckeditor/ckeditor5-autoformat": "^41.1.0",
|
|
56
|
-
"@ckeditor/ckeditor5-basic-styles": "^41.1.0",
|
|
57
|
-
"@ckeditor/ckeditor5-block-quote": "^41.1.0",
|
|
58
|
-
"@ckeditor/ckeditor5-build-classic": "^41.1.0",
|
|
59
|
-
"@ckeditor/ckeditor5-code-block": "^41.1.0",
|
|
60
|
-
"@ckeditor/ckeditor5-document-outline": "^41.1.0",
|
|
61
|
-
"@ckeditor/ckeditor5-editor-classic": "^41.1.0",
|
|
62
|
-
"@ckeditor/ckeditor5-essentials": "^41.1.0",
|
|
63
|
-
"@ckeditor/ckeditor5-font": "^41.1.0",
|
|
64
|
-
"@ckeditor/ckeditor5-heading": "^41.1.0",
|
|
65
|
-
"@ckeditor/ckeditor5-highlight": "^41.1.0",
|
|
66
|
-
"@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
|
|
67
|
-
"@ckeditor/ckeditor5-html-embed": "^41.1.0",
|
|
68
|
-
"@ckeditor/ckeditor5-html-support": "^41.1.0",
|
|
69
|
-
"@ckeditor/ckeditor5-image": "^41.1.0",
|
|
70
|
-
"@ckeditor/ckeditor5-import-word": "^41.1.0",
|
|
71
|
-
"@ckeditor/ckeditor5-indent": "^41.1.0",
|
|
72
|
-
"@ckeditor/ckeditor5-link": "^41.1.0",
|
|
73
|
-
"@ckeditor/ckeditor5-list": "^41.1.0",
|
|
74
|
-
"@ckeditor/ckeditor5-media-embed": "^41.1.0",
|
|
75
|
-
"@ckeditor/ckeditor5-paragraph": "^41.1.0",
|
|
76
|
-
"@ckeditor/ckeditor5-remove-format": "^41.1.0",
|
|
77
|
-
"@ckeditor/ckeditor5-show-blocks": "^41.1.0",
|
|
78
|
-
"@ckeditor/ckeditor5-source-editing": "^41.1.0",
|
|
79
|
-
"@ckeditor/ckeditor5-table": "^41.1.0",
|
|
80
|
-
"@ckeditor/ckeditor5-theme-lark": "^41.1.0",
|
|
81
|
-
"@ckeditor/ckeditor5-typing": "^41.1.0",
|
|
82
|
-
"@ckeditor/ckeditor5-upload": "^41.1.0",
|
|
83
|
-
"@ckeditor/ckeditor5-word-count": "^41.1.0",
|
|
84
|
-
"@peng_kai/lint": "^0.1.0",
|
|
85
|
-
"@types/archiver": "^6.0.2",
|
|
86
|
-
"@types/crypto-js": "^4.2.2",
|
|
87
|
-
"@types/lodash-es": "^4.17.12",
|
|
88
|
-
"@types/node": "^18.19.39",
|
|
89
|
-
"@types/nprogress": "^0.2.3",
|
|
90
|
-
"ant-design-vue": "^4.2.3",
|
|
91
|
-
"type-fest": "^4.21.0",
|
|
92
|
-
"typescript": "^5.5.3",
|
|
93
|
-
"vue-component-type-helpers": "^2.0.24"
|
|
94
|
-
}
|
|
95
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@peng_kai/kit",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "0.2.47",
|
|
5
|
+
"description": "",
|
|
6
|
+
"author": "",
|
|
7
|
+
"license": "ISC",
|
|
8
|
+
"keywords": [],
|
|
9
|
+
"main": "index.js",
|
|
10
|
+
"scripts": {
|
|
11
|
+
"dev:js": "tsx ./admin/scripts/deploy.ts",
|
|
12
|
+
"lint": "eslint .",
|
|
13
|
+
"lint:fix": "eslint . --fix"
|
|
14
|
+
},
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"ant-design-vue": "4.2.3",
|
|
17
|
+
"vue": "3.4.31",
|
|
18
|
+
"vue-router": "4.4.0"
|
|
19
|
+
},
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"@aws-sdk/client-s3": "^3.609.0",
|
|
22
|
+
"@aws-sdk/lib-storage": "^3.609.0",
|
|
23
|
+
"@babel/generator": "^7.24.7",
|
|
24
|
+
"@babel/parser": "^7.24.7",
|
|
25
|
+
"@babel/traverse": "^7.24.7",
|
|
26
|
+
"@babel/types": "^7.24.7",
|
|
27
|
+
"@ckeditor/ckeditor5-vue": "^5.1.0",
|
|
28
|
+
"@fingerprintjs/fingerprintjs": "^4.4.1",
|
|
29
|
+
"@tanstack/vue-query": "^5.49.1",
|
|
30
|
+
"@vueuse/components": "^10.11.0",
|
|
31
|
+
"@vueuse/core": "^10.11.0",
|
|
32
|
+
"@vueuse/router": "^10.11.0",
|
|
33
|
+
"a-calc": "^1.3.12",
|
|
34
|
+
"archiver": "^7.0.1",
|
|
35
|
+
"axios": "^1.7.2",
|
|
36
|
+
"bignumber.js": "^9.1.2",
|
|
37
|
+
"chokidar": "^3.6.0",
|
|
38
|
+
"crypto-es": "^2.1.0",
|
|
39
|
+
"dayjs": "^1.11.11",
|
|
40
|
+
"echarts": "^5.4.3",
|
|
41
|
+
"execa": "^9.3.0",
|
|
42
|
+
"fast-glob": "^3.3.2",
|
|
43
|
+
"localstorage-slim": "^2.7.1",
|
|
44
|
+
"lodash-es": "^4.17.21",
|
|
45
|
+
"nprogress": "^0.2.0",
|
|
46
|
+
"pinia": "^2.1.7",
|
|
47
|
+
"tsx": "^4.16.00",
|
|
48
|
+
"vue": "^3.4.31",
|
|
49
|
+
"vue-i18n": "^9.13.1",
|
|
50
|
+
"vue-router": "^4.4.0"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
|
|
54
|
+
"@ckeditor/ckeditor5-alignment": "^41.1.0",
|
|
55
|
+
"@ckeditor/ckeditor5-autoformat": "^41.1.0",
|
|
56
|
+
"@ckeditor/ckeditor5-basic-styles": "^41.1.0",
|
|
57
|
+
"@ckeditor/ckeditor5-block-quote": "^41.1.0",
|
|
58
|
+
"@ckeditor/ckeditor5-build-classic": "^41.1.0",
|
|
59
|
+
"@ckeditor/ckeditor5-code-block": "^41.1.0",
|
|
60
|
+
"@ckeditor/ckeditor5-document-outline": "^41.1.0",
|
|
61
|
+
"@ckeditor/ckeditor5-editor-classic": "^41.1.0",
|
|
62
|
+
"@ckeditor/ckeditor5-essentials": "^41.1.0",
|
|
63
|
+
"@ckeditor/ckeditor5-font": "^41.1.0",
|
|
64
|
+
"@ckeditor/ckeditor5-heading": "^41.1.0",
|
|
65
|
+
"@ckeditor/ckeditor5-highlight": "^41.1.0",
|
|
66
|
+
"@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
|
|
67
|
+
"@ckeditor/ckeditor5-html-embed": "^41.1.0",
|
|
68
|
+
"@ckeditor/ckeditor5-html-support": "^41.1.0",
|
|
69
|
+
"@ckeditor/ckeditor5-image": "^41.1.0",
|
|
70
|
+
"@ckeditor/ckeditor5-import-word": "^41.1.0",
|
|
71
|
+
"@ckeditor/ckeditor5-indent": "^41.1.0",
|
|
72
|
+
"@ckeditor/ckeditor5-link": "^41.1.0",
|
|
73
|
+
"@ckeditor/ckeditor5-list": "^41.1.0",
|
|
74
|
+
"@ckeditor/ckeditor5-media-embed": "^41.1.0",
|
|
75
|
+
"@ckeditor/ckeditor5-paragraph": "^41.1.0",
|
|
76
|
+
"@ckeditor/ckeditor5-remove-format": "^41.1.0",
|
|
77
|
+
"@ckeditor/ckeditor5-show-blocks": "^41.1.0",
|
|
78
|
+
"@ckeditor/ckeditor5-source-editing": "^41.1.0",
|
|
79
|
+
"@ckeditor/ckeditor5-table": "^41.1.0",
|
|
80
|
+
"@ckeditor/ckeditor5-theme-lark": "^41.1.0",
|
|
81
|
+
"@ckeditor/ckeditor5-typing": "^41.1.0",
|
|
82
|
+
"@ckeditor/ckeditor5-upload": "^41.1.0",
|
|
83
|
+
"@ckeditor/ckeditor5-word-count": "^41.1.0",
|
|
84
|
+
"@peng_kai/lint": "^0.1.0",
|
|
85
|
+
"@types/archiver": "^6.0.2",
|
|
86
|
+
"@types/crypto-js": "^4.2.2",
|
|
87
|
+
"@types/lodash-es": "^4.17.12",
|
|
88
|
+
"@types/node": "^18.19.39",
|
|
89
|
+
"@types/nprogress": "^0.2.3",
|
|
90
|
+
"ant-design-vue": "^4.2.3",
|
|
91
|
+
"type-fest": "^4.21.0",
|
|
92
|
+
"typescript": "^5.5.3",
|
|
93
|
+
"vue-component-type-helpers": "^2.0.24"
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -43,7 +43,7 @@ export function popupMessage(popup: (type: 'error' | 'success', message: string)
|
|
|
43
43
|
errorMsg = error.message;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
if (typeof errorMsg === 'string' && errorMsg !== '')
|
|
46
|
+
if (typeof errorMsg === 'string' && (errorMsg !== '' && errorMsg !== 'canceled'))
|
|
47
47
|
popup('error', errorMsg);
|
|
48
48
|
|
|
49
49
|
throw error;
|
package/stylelint.config.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
// root: true,
|
|
3
|
-
extends: ['@peng_kai/lint/vue/stylelint_v2'],
|
|
4
|
-
rules: {
|
|
5
|
-
'custom-property-pattern': '(antd-([a-z][a-zA-Z0-9]+)*)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*)',
|
|
6
|
-
},
|
|
7
|
-
};
|
|
1
|
+
module.exports = {
|
|
2
|
+
// root: true,
|
|
3
|
+
extends: ['@peng_kai/lint/vue/stylelint_v2'],
|
|
4
|
+
rules: {
|
|
5
|
+
'custom-property-pattern': '(antd-([a-z][a-zA-Z0-9]+)*)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*)',
|
|
6
|
+
},
|
|
7
|
+
};
|
|
@@ -1,33 +1,66 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { useEventListener, useResizeObserver } from '@vueuse/core';
|
|
3
3
|
import * as echarts from 'echarts';
|
|
4
|
-
import { ref, shallowRef, toRef, watchEffect } from 'vue';
|
|
4
|
+
import { onBeforeMount, onMounted, ref, shallowRef, toRef, watch, watchEffect } from 'vue';
|
|
5
5
|
import { useIsDark } from '../../../hooks/useIsDark';
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
8
|
<script setup lang="ts">
|
|
9
|
-
const props = defineProps<{
|
|
9
|
+
const props = withDefaults(defineProps<{
|
|
10
10
|
echartOption: any
|
|
11
|
-
|
|
11
|
+
theme?: 'light' | 'dark' | 'auto'
|
|
12
|
+
}>(), {
|
|
13
|
+
theme: 'auto',
|
|
14
|
+
});
|
|
12
15
|
|
|
13
16
|
const $chartEle = ref<HTMLElement>();
|
|
14
|
-
const echartInst = shallowRef<echarts.ECharts>();
|
|
17
|
+
const echartInst = shallowRef<echarts.ECharts | null>(null);
|
|
15
18
|
const isDark = useIsDark();
|
|
16
19
|
|
|
17
|
-
watchEffect(() => {
|
|
18
|
-
|
|
20
|
+
// watchEffect(() => {
|
|
21
|
+
// const _$chartEle = $chartEle.value;
|
|
22
|
+
|
|
23
|
+
// if (!_$chartEle) {
|
|
24
|
+
// echartInst.value = undefined;
|
|
25
|
+
// return;
|
|
26
|
+
// }
|
|
27
|
+
|
|
28
|
+
// // TODO: [ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
|
|
29
|
+
// echartInst.value = echarts.init(_$chartEle, isDark.value ? 'dark' : 'light');
|
|
30
|
+
// echartInst.value.setOption(props.echartOption ?? {});
|
|
31
|
+
// // echartInst.value
|
|
32
|
+
// });
|
|
33
|
+
|
|
34
|
+
function getTheme() {
|
|
35
|
+
if (props.theme === 'auto')
|
|
36
|
+
return isDark.value ? 'dark' : 'light';
|
|
19
37
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
38
|
+
return props.theme;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
watch(toRef(props, 'echartOption'), (option) => {
|
|
42
|
+
echartInst.value?.setOption(option ?? {});
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
watch(isDark, () => {
|
|
46
|
+
if (props.theme === 'auto') {
|
|
47
|
+
echartInst.value?.dispose();
|
|
48
|
+
echartInst.value = null;
|
|
49
|
+
echartInst.value = echarts.init($chartEle.value, getTheme());
|
|
50
|
+
echartInst.value.setOption(props.echartOption ?? {});
|
|
23
51
|
}
|
|
52
|
+
});
|
|
24
53
|
|
|
25
|
-
|
|
26
|
-
echartInst.value
|
|
27
|
-
echartInst.value = echarts.init(_$chartEle, isDark.value ? 'dark' : 'light');
|
|
54
|
+
onMounted(() => {
|
|
55
|
+
echartInst.value = echarts.init($chartEle.value, getTheme());
|
|
28
56
|
echartInst.value.setOption(props.echartOption ?? {});
|
|
29
57
|
});
|
|
30
58
|
|
|
59
|
+
onBeforeMount(() => {
|
|
60
|
+
echartInst.value?.dispose();
|
|
61
|
+
echartInst.value = null;
|
|
62
|
+
});
|
|
63
|
+
|
|
31
64
|
/**
|
|
32
65
|
* 当图表的尺寸变化时,图表响应式变化。
|
|
33
66
|
* 考虑到性能问题,所以当尺寸变化时隐藏图表,避免浏览器反复绘制。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as InfiniteQuery } from './src/InfiniteQuery.vue';
|
|
1
|
+
export { default as InfiniteQuery } from './src/InfiniteQuery.vue';
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import { onUnmounted, watch } from 'vue';
|
|
2
|
-
import type { Ref } from 'vue';
|
|
3
|
-
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
|
|
4
|
-
|
|
5
|
-
export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function, distance: string) {
|
|
6
|
-
const triggerEl = document.createElement('div');
|
|
7
|
-
|
|
8
|
-
Object.assign(triggerEl.style, {
|
|
9
|
-
position: 'relative',
|
|
10
|
-
zIndex: '5',
|
|
11
|
-
marginTop: `-${distance}`,
|
|
12
|
-
marginBottom: distance,
|
|
13
|
-
width: '5px',
|
|
14
|
-
height: '5px',
|
|
15
|
-
// background: 'red',
|
|
16
|
-
} satisfies Partial<CSSStyleDeclaration>);
|
|
17
|
-
|
|
18
|
-
useIntervalFn(() => {
|
|
19
|
-
const { transform } = triggerEl.style;
|
|
20
|
-
|
|
21
|
-
if (transform)
|
|
22
|
-
triggerEl.style.removeProperty('transform');
|
|
23
|
-
else triggerEl.style.setProperty('transform', 'translateX(-200%)');
|
|
24
|
-
}, 500);
|
|
25
|
-
|
|
26
|
-
useIntersectionObserver(triggerEl, ([entry]) => {
|
|
27
|
-
if (entry.isIntersecting)
|
|
28
|
-
callback();
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
watch(containerEle, (ele) => {
|
|
32
|
-
if (ele)
|
|
33
|
-
ele.append(triggerEl);
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
onUnmounted(() => {
|
|
37
|
-
triggerEl.remove();
|
|
38
|
-
});
|
|
39
|
-
}
|
|
1
|
+
import { onUnmounted, watch } from 'vue';
|
|
2
|
+
import type { Ref } from 'vue';
|
|
3
|
+
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
|
|
4
|
+
|
|
5
|
+
export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function, distance: string) {
|
|
6
|
+
const triggerEl = document.createElement('div');
|
|
7
|
+
|
|
8
|
+
Object.assign(triggerEl.style, {
|
|
9
|
+
position: 'relative',
|
|
10
|
+
zIndex: '5',
|
|
11
|
+
marginTop: `-${distance}`,
|
|
12
|
+
marginBottom: distance,
|
|
13
|
+
width: '5px',
|
|
14
|
+
height: '5px',
|
|
15
|
+
// background: 'red',
|
|
16
|
+
} satisfies Partial<CSSStyleDeclaration>);
|
|
17
|
+
|
|
18
|
+
useIntervalFn(() => {
|
|
19
|
+
const { transform } = triggerEl.style;
|
|
20
|
+
|
|
21
|
+
if (transform)
|
|
22
|
+
triggerEl.style.removeProperty('transform');
|
|
23
|
+
else triggerEl.style.setProperty('transform', 'translateX(-200%)');
|
|
24
|
+
}, 500);
|
|
25
|
+
|
|
26
|
+
useIntersectionObserver(triggerEl, ([entry]) => {
|
|
27
|
+
if (entry.isIntersecting)
|
|
28
|
+
callback();
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
watch(containerEle, (ele) => {
|
|
32
|
+
if (ele)
|
|
33
|
+
ele.append(triggerEl);
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
onUnmounted(() => {
|
|
37
|
+
triggerEl.remove();
|
|
38
|
+
});
|
|
39
|
+
}
|
|
@@ -5,7 +5,7 @@ import { computed, nextTick, onActivated, onDeactivated, onMounted, ref } from '
|
|
|
5
5
|
*/
|
|
6
6
|
export function useIsActivated() {
|
|
7
7
|
const isMounted = ref(false);
|
|
8
|
-
const isActivated = ref(
|
|
8
|
+
const isActivated = ref(true);
|
|
9
9
|
|
|
10
10
|
onMounted(() => setTimeout(() => isMounted.value = true));
|
|
11
11
|
onActivated(() => nextTick(() => isActivated.value = true));
|
|
@@ -29,7 +29,7 @@ export function parseModalParams<T = any>(modalName?: string, hash?: string) {
|
|
|
29
29
|
* @param modalParams 弹窗参数
|
|
30
30
|
*/
|
|
31
31
|
export function useSyncModalParamsToHash(modalName: string, modalParams: Record<string, any>) {
|
|
32
|
-
const hashStr = useRouteHash(undefined, { route: useRoute(), router: useRouter() });
|
|
32
|
+
const hashStr = useRouteHash(undefined, { route: useRoute(), router: useRouter(), mode: 'replace' });
|
|
33
33
|
|
|
34
34
|
function syncParamsToHash() {
|
|
35
35
|
const _hashStr = hashStr.value ?? '';
|
|
@@ -55,7 +55,7 @@ export function useSyncModalParamsToHash(modalName: string, modalParams: Record<
|
|
|
55
55
|
if (!hashParams.get(MODAL_NAME_KEY) || hashParams.get(MODAL_NAME_KEY) === modalName) {
|
|
56
56
|
hashParams.delete(MODAL_NAME_KEY);
|
|
57
57
|
Object.keys(modalParams).forEach(k => hashParams.delete(k));
|
|
58
|
-
|
|
58
|
+
location.hash = `#${hashParams.toString()}`;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|