@363045841yyt/klinechart 0.7.3-alpha.1 → 0.7.3-alpha.3
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/package.json +75 -75
- package/src/components/IndicatorSelector.vue +42 -42
- package/src/components/KLineChart.vue +127 -127
- package/src/components/LeftToolbar.vue +44 -44
- package/LICENSE +0 -21
package/package.json
CHANGED
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@363045841yyt/klinechart",
|
|
3
|
-
"version": "0.7.3-alpha.
|
|
4
|
-
"description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
|
|
5
|
-
"license": "MIT",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"engines": {
|
|
8
|
-
"node": "^20.19.0 || >=22.12.0"
|
|
9
|
-
},
|
|
10
|
-
"sideEffects": false,
|
|
11
|
-
"main": "./dist/index.js",
|
|
12
|
-
"module": "./dist/index.js",
|
|
13
|
-
"types": "./dist/index.d.ts",
|
|
14
|
-
"exports": {
|
|
15
|
-
".": {
|
|
16
|
-
"import": {
|
|
17
|
-
"types": "./dist/index.d.ts",
|
|
18
|
-
"default": "./dist/index.js"
|
|
19
|
-
},
|
|
20
|
-
"require": {
|
|
21
|
-
"types": "./dist/index.d.cts",
|
|
22
|
-
"default": "./dist/index.cjs"
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
"./style.css": "./dist/klinechart.css"
|
|
26
|
-
},
|
|
27
|
-
"files": [
|
|
28
|
-
"dist",
|
|
29
|
-
"src"
|
|
30
|
-
],
|
|
31
|
-
"publishConfig": {
|
|
32
|
-
"access": "public"
|
|
33
|
-
},
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"vue": "^
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@363045841yyt/klinechart",
|
|
3
|
+
"version": "0.7.3-alpha.3",
|
|
4
|
+
"description": "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"engines": {
|
|
8
|
+
"node": "^20.19.0 || >=22.12.0"
|
|
9
|
+
},
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"main": "./dist/index.js",
|
|
12
|
+
"module": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"import": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"default": "./dist/index.js"
|
|
19
|
+
},
|
|
20
|
+
"require": {
|
|
21
|
+
"types": "./dist/index.d.cts",
|
|
22
|
+
"default": "./dist/index.cjs"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"./style.css": "./dist/klinechart.css"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"src"
|
|
30
|
+
],
|
|
31
|
+
"publishConfig": {
|
|
32
|
+
"access": "public"
|
|
33
|
+
},
|
|
34
|
+
"scripts": {
|
|
35
|
+
"dev": "vite --config preview/vite.config.ts",
|
|
36
|
+
"build": "vite build && node -e \"require('fs').copyFileSync('dist/index.d.ts','dist/index.d.cts')\"",
|
|
37
|
+
"postbuild": "node -e \"require('fs').copyFileSync('dist/index.d.ts','dist/index.d.cts')\"",
|
|
38
|
+
"test": "vitest run",
|
|
39
|
+
"test:watch": "vitest",
|
|
40
|
+
"size": "size-limit",
|
|
41
|
+
"lint:publish": "publint --strict .",
|
|
42
|
+
"lint:types": "attw --pack ."
|
|
43
|
+
},
|
|
44
|
+
"size-limit": [
|
|
45
|
+
{
|
|
46
|
+
"name": "vue (entry, pre-build src measurement)",
|
|
47
|
+
"path": "src/index.ts",
|
|
48
|
+
"limit": "8 KB",
|
|
49
|
+
"gzip": true,
|
|
50
|
+
"ignore": [
|
|
51
|
+
"vue",
|
|
52
|
+
"@363045841yyt/klinechart-core"
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
],
|
|
56
|
+
"peerDependencies": {
|
|
57
|
+
"@363045841yyt/klinechart-core": "workspace:^",
|
|
58
|
+
"vue": "^3.4.0"
|
|
59
|
+
},
|
|
60
|
+
"devDependencies": {
|
|
61
|
+
"@arethetypeswrong/cli": "^0.18.3",
|
|
62
|
+
"@size-limit/preset-small-lib": "^12.1.0",
|
|
63
|
+
"@vitejs/plugin-vue": "^6.0.0",
|
|
64
|
+
"@vue/test-utils": "^2.4.10",
|
|
65
|
+
"jsdom": "^29.1.1",
|
|
66
|
+
"publint": "^0.3.0",
|
|
67
|
+
"size-limit": "^12.1.0",
|
|
68
|
+
"typescript": "~6.0.3",
|
|
69
|
+
"unplugin-icons": "^23.0.1",
|
|
70
|
+
"vite": "^8.0.14",
|
|
71
|
+
"vite-plugin-babel": "^1.3.2",
|
|
72
|
+
"vite-plugin-dts": "^5.0.1",
|
|
73
|
+
"vitest": "^4.1.5",
|
|
74
|
+
"vue": "^3.5.0"
|
|
75
|
+
}
|
|
76
76
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="indicator-selector">
|
|
3
3
|
<div class="indicator-scroll-container">
|
|
4
4
|
<div class="indicator-list">
|
|
5
|
-
<!--
|
|
5
|
+
<!-- 已激活的指标 -->
|
|
6
6
|
<template v-for="indicator in activeIndicatorsList" :key="indicator.id">
|
|
7
7
|
<div
|
|
8
8
|
v-if="indicator.id === firstActiveSubIndicatorId"
|
|
@@ -38,14 +38,14 @@
|
|
|
38
38
|
({{ getParamDisplay(indicator) }})
|
|
39
39
|
</span>
|
|
40
40
|
</span>
|
|
41
|
-
<!--
|
|
41
|
+
<!-- 悬浮操作层 -->
|
|
42
42
|
<Transition name="fade">
|
|
43
43
|
<div v-if="hoveredIndicator === indicator.id" class="hover-overlay">
|
|
44
44
|
<button
|
|
45
45
|
v-if="indicator.params?.length"
|
|
46
46
|
class="action-btn settings-btn"
|
|
47
47
|
@click.stop="showParams(indicator.id)"
|
|
48
|
-
title="
|
|
48
|
+
title="编辑参数"
|
|
49
49
|
>
|
|
50
50
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
|
|
51
51
|
<path
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
<button
|
|
58
58
|
class="action-btn remove-btn"
|
|
59
59
|
@click.stop="removeIndicator(indicator.id)"
|
|
60
|
-
title="
|
|
60
|
+
title="移除指标"
|
|
61
61
|
>
|
|
62
62
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
|
|
63
63
|
<path
|
|
@@ -72,9 +72,9 @@
|
|
|
72
72
|
</div>
|
|
73
73
|
</template>
|
|
74
74
|
|
|
75
|
-
<!--
|
|
75
|
+
<!-- 添加按钮 -->
|
|
76
76
|
<div class="indicator-item">
|
|
77
|
-
<button ref="addBtnRef" class="add-btn" @click="toggleAddMenu" title="
|
|
77
|
+
<button ref="addBtnRef" class="add-btn" @click="toggleAddMenu" title="添加指标">
|
|
78
78
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
|
|
79
79
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
|
|
80
80
|
</svg>
|
|
@@ -83,24 +83,24 @@
|
|
|
83
83
|
</div>
|
|
84
84
|
</div>
|
|
85
85
|
|
|
86
|
-
<!--
|
|
86
|
+
<!-- 添加指标弹窗 -->
|
|
87
87
|
<Teleport :to="teleportTarget">
|
|
88
88
|
<Transition name="overlay">
|
|
89
89
|
<div v-if="showAddMenu" class="selector-overlay" @click="closeAddMenu">
|
|
90
90
|
<Transition name="modal">
|
|
91
91
|
<div v-if="showAddMenu" class="selector-modal" @click.stop>
|
|
92
|
-
<!--
|
|
92
|
+
<!-- 弹窗头部 -->
|
|
93
93
|
<div class="modal-header">
|
|
94
94
|
<div class="header-title">
|
|
95
|
-
<span class="title-text"
|
|
96
|
-
<span class="title-sub">{{ totalIndicatorsCount }}
|
|
95
|
+
<span class="title-text">添加指标</span>
|
|
96
|
+
<span class="title-sub">{{ totalIndicatorsCount }} 个可用指标</span>
|
|
97
97
|
</div>
|
|
98
98
|
<div class="header-actions">
|
|
99
99
|
<button
|
|
100
100
|
class="view-toggle-btn"
|
|
101
101
|
:class="{ active: isCompactView }"
|
|
102
102
|
@click="isCompactView = !isCompactView"
|
|
103
|
-
title="
|
|
103
|
+
title="简洁模式"
|
|
104
104
|
>
|
|
105
105
|
<svg
|
|
106
106
|
v-if="!isCompactView"
|
|
@@ -127,12 +127,12 @@
|
|
|
127
127
|
</div>
|
|
128
128
|
</div>
|
|
129
129
|
|
|
130
|
-
<!--
|
|
130
|
+
<!-- 弹窗主体 -->
|
|
131
131
|
<div class="modal-body">
|
|
132
|
-
<!--
|
|
132
|
+
<!-- 主图指标区域 -->
|
|
133
133
|
<div class="indicator-section">
|
|
134
134
|
<div class="section-header">
|
|
135
|
-
<span class="section-title"
|
|
135
|
+
<span class="section-title">主图指标</span>
|
|
136
136
|
<span class="section-count">{{ mainIndicators.length }}</span>
|
|
137
137
|
</div>
|
|
138
138
|
<div class="indicator-grid" :class="{ compact: isCompactView }">
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
v-if="indicator.params?.length"
|
|
160
160
|
class="card-settings-btn"
|
|
161
161
|
@click.stop="showParams(indicator.id)"
|
|
162
|
-
title="
|
|
162
|
+
title="编辑参数"
|
|
163
163
|
>
|
|
164
164
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
|
|
165
165
|
<path
|
|
@@ -175,13 +175,13 @@
|
|
|
175
175
|
</div>
|
|
176
176
|
</div>
|
|
177
177
|
|
|
178
|
-
<!--
|
|
178
|
+
<!-- 分隔线 -->
|
|
179
179
|
<div class="section-divider"></div>
|
|
180
180
|
|
|
181
|
-
<!--
|
|
181
|
+
<!-- 副图指标区域 -->
|
|
182
182
|
<div class="indicator-section">
|
|
183
183
|
<div class="section-header">
|
|
184
|
-
<span class="section-title"
|
|
184
|
+
<span class="section-title">副图指标</span>
|
|
185
185
|
<span class="section-count">{{ subIndicators.length }}</span>
|
|
186
186
|
</div>
|
|
187
187
|
<div class="indicator-grid" :class="{ compact: isCompactView }">
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
v-if="indicator.params?.length"
|
|
209
209
|
class="card-settings-btn"
|
|
210
210
|
@click.stop="showParams(indicator.id)"
|
|
211
|
-
title="
|
|
211
|
+
title="编辑参数"
|
|
212
212
|
>
|
|
213
213
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
|
|
214
214
|
<path
|
|
@@ -225,10 +225,10 @@
|
|
|
225
225
|
</div>
|
|
226
226
|
</div>
|
|
227
227
|
|
|
228
|
-
<!--
|
|
228
|
+
<!-- 弹窗底部 -->
|
|
229
229
|
<div class="modal-footer">
|
|
230
230
|
<div class="footer-info">
|
|
231
|
-
<span class="info-text"
|
|
231
|
+
<span class="info-text">已激活 {{ activeCount }} 个指标</span>
|
|
232
232
|
</div>
|
|
233
233
|
<button class="btn btn-confirm" @click="closeAddMenu">??</button>
|
|
234
234
|
</div>
|
|
@@ -238,7 +238,7 @@
|
|
|
238
238
|
</Transition>
|
|
239
239
|
</Teleport>
|
|
240
240
|
|
|
241
|
-
<!--
|
|
241
|
+
<!-- 参数编辑弹窗 -->
|
|
242
242
|
<IndicatorParams
|
|
243
243
|
v-if="currentIndicator"
|
|
244
244
|
:visible="paramsVisible"
|
|
@@ -571,7 +571,7 @@ onUnmounted(() => {
|
|
|
571
571
|
opacity: 0.85;
|
|
572
572
|
}
|
|
573
573
|
|
|
574
|
-
/*
|
|
574
|
+
/* 悬浮操作层 */
|
|
575
575
|
.hover-overlay {
|
|
576
576
|
position: absolute;
|
|
577
577
|
top: 0;
|
|
@@ -622,7 +622,7 @@ onUnmounted(() => {
|
|
|
622
622
|
background: #e0e0e0;
|
|
623
623
|
}
|
|
624
624
|
|
|
625
|
-
/*
|
|
625
|
+
/* 添加按钮 */
|
|
626
626
|
.add-btn {
|
|
627
627
|
flex-shrink: 0;
|
|
628
628
|
width: 32px;
|
|
@@ -645,11 +645,11 @@ onUnmounted(() => {
|
|
|
645
645
|
background: rgba(26, 26, 26, 0.04);
|
|
646
646
|
}
|
|
647
647
|
|
|
648
|
-
/*
|
|
649
|
-
|
|
650
|
-
|
|
648
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
649
|
+
弹窗样式 - 与其他弹窗保持一致
|
|
650
|
+
───────────────────────────────────────────────────────────────── */
|
|
651
651
|
|
|
652
|
-
/*
|
|
652
|
+
/* 遮罩层 */
|
|
653
653
|
.selector-overlay {
|
|
654
654
|
position: fixed;
|
|
655
655
|
inset: 0;
|
|
@@ -661,7 +661,7 @@ onUnmounted(() => {
|
|
|
661
661
|
z-index: 1000;
|
|
662
662
|
}
|
|
663
663
|
|
|
664
|
-
/*
|
|
664
|
+
/* 弹窗容器 */
|
|
665
665
|
.selector-modal {
|
|
666
666
|
background: #ffffff;
|
|
667
667
|
border: 1px solid #e0e0e0;
|
|
@@ -675,7 +675,7 @@ onUnmounted(() => {
|
|
|
675
675
|
flex-direction: column;
|
|
676
676
|
}
|
|
677
677
|
|
|
678
|
-
/*
|
|
678
|
+
/* 弹窗头部 */
|
|
679
679
|
.modal-header {
|
|
680
680
|
display: flex;
|
|
681
681
|
justify-content: space-between;
|
|
@@ -763,7 +763,7 @@ onUnmounted(() => {
|
|
|
763
763
|
color: #fff;
|
|
764
764
|
}
|
|
765
765
|
|
|
766
|
-
/*
|
|
766
|
+
/* 弹窗主体 */
|
|
767
767
|
.modal-body {
|
|
768
768
|
padding: 20px;
|
|
769
769
|
overflow-y: auto;
|
|
@@ -773,7 +773,7 @@ onUnmounted(() => {
|
|
|
773
773
|
gap: 20px;
|
|
774
774
|
}
|
|
775
775
|
|
|
776
|
-
/*
|
|
776
|
+
/* 指标区域 */
|
|
777
777
|
.indicator-section {
|
|
778
778
|
display: flex;
|
|
779
779
|
flex-direction: column;
|
|
@@ -800,14 +800,14 @@ onUnmounted(() => {
|
|
|
800
800
|
border-radius: 10px;
|
|
801
801
|
}
|
|
802
802
|
|
|
803
|
-
/*
|
|
803
|
+
/* 自适应列数网格 */
|
|
804
804
|
.indicator-grid {
|
|
805
805
|
display: grid;
|
|
806
806
|
grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
|
|
807
807
|
gap: 10px;
|
|
808
808
|
}
|
|
809
809
|
|
|
810
|
-
/*
|
|
810
|
+
/* 紧凑模式 - 标签形式 */
|
|
811
811
|
.indicator-grid.compact {
|
|
812
812
|
display: flex;
|
|
813
813
|
flex-wrap: wrap;
|
|
@@ -851,7 +851,7 @@ onUnmounted(() => {
|
|
|
851
851
|
font-weight: 500;
|
|
852
852
|
}
|
|
853
853
|
|
|
854
|
-
/*
|
|
854
|
+
/* 指标卡片 */
|
|
855
855
|
.indicator-card {
|
|
856
856
|
display: flex;
|
|
857
857
|
flex-direction: column;
|
|
@@ -928,14 +928,14 @@ onUnmounted(() => {
|
|
|
928
928
|
margin-top: 2px;
|
|
929
929
|
}
|
|
930
930
|
|
|
931
|
-
/*
|
|
931
|
+
/* 区域分隔线 */
|
|
932
932
|
.section-divider {
|
|
933
933
|
height: 1px;
|
|
934
934
|
background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
|
|
935
935
|
margin: 4px 0;
|
|
936
936
|
}
|
|
937
937
|
|
|
938
|
-
/*
|
|
938
|
+
/* 弹窗底部 */
|
|
939
939
|
.modal-footer {
|
|
940
940
|
display: flex;
|
|
941
941
|
align-items: center;
|
|
@@ -955,7 +955,7 @@ onUnmounted(() => {
|
|
|
955
955
|
color: #999;
|
|
956
956
|
}
|
|
957
957
|
|
|
958
|
-
/*
|
|
958
|
+
/* 按钮样式 */
|
|
959
959
|
.btn {
|
|
960
960
|
display: flex;
|
|
961
961
|
align-items: center;
|
|
@@ -983,7 +983,7 @@ onUnmounted(() => {
|
|
|
983
983
|
transform: translateY(-1px);
|
|
984
984
|
}
|
|
985
985
|
|
|
986
|
-
/*
|
|
986
|
+
/* 过渡动画 */
|
|
987
987
|
.fade-enter-active,
|
|
988
988
|
.fade-leave-active {
|
|
989
989
|
transition: opacity 0.2s ease;
|
|
@@ -994,7 +994,7 @@ onUnmounted(() => {
|
|
|
994
994
|
opacity: 0;
|
|
995
995
|
}
|
|
996
996
|
|
|
997
|
-
/*
|
|
997
|
+
/* 遮罩层动画 */
|
|
998
998
|
.overlay-enter-active,
|
|
999
999
|
.overlay-leave-active {
|
|
1000
1000
|
transition: opacity 0.2s ease;
|
|
@@ -1005,7 +1005,7 @@ onUnmounted(() => {
|
|
|
1005
1005
|
opacity: 0;
|
|
1006
1006
|
}
|
|
1007
1007
|
|
|
1008
|
-
/*
|
|
1008
|
+
/* 弹窗动画 */
|
|
1009
1009
|
.modal-enter-active {
|
|
1010
1010
|
transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
1011
1011
|
}
|
|
@@ -1024,7 +1024,7 @@ onUnmounted(() => {
|
|
|
1024
1024
|
transform: scale(0.94) translateY(8px);
|
|
1025
1025
|
}
|
|
1026
1026
|
|
|
1027
|
-
/*
|
|
1027
|
+
/* 响应式适配 */
|
|
1028
1028
|
@media (max-width: 640px) {
|
|
1029
1029
|
.selector-modal {
|
|
1030
1030
|
width: 95vw;
|