@cmstops/pro-compo 0.1.20 → 0.1.21
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/index.css +55 -0
- package/dist/index.min.css +1 -1
- package/es/contentModal/component.js +0 -1
- package/es/contentModal/components/ViewAllColumn/index.js +1 -0
- package/es/editMetaInfo/component.d.ts +0 -0
- package/es/editMetaInfo/component.js +87 -0
- package/es/editMetaInfo/components/metaInfoForm.d.ts +0 -0
- package/es/editMetaInfo/components/metaInfoForm.js +621 -0
- package/es/editMetaInfo/index.d.ts +2 -0
- package/es/editMetaInfo/index.js +7 -0
- package/es/editMetaInfo/script/api.d.ts +6 -0
- package/es/editMetaInfo/script/api.js +17 -0
- package/es/editMetaInfo/script/restaurants.d.ts +4 -0
- package/es/editMetaInfo/script/restaurants.js +127 -0
- package/es/editMetaInfo/style/css.js +1 -0
- package/es/editMetaInfo/style/index.css +20 -0
- package/es/editMetaInfo/style/index.d.ts +1 -0
- package/es/editMetaInfo/style/index.js +1 -0
- package/es/editMetaInfo/style/index.less +30 -0
- package/es/hooks/dialogVisible.d.ts +8 -0
- package/es/hooks/dialogVisible.js +19 -0
- package/es/index.css +55 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/es/index.less +1 -0
- package/es/selectThumb/component.js +3 -1
- package/es/selectThumb/components/colorPalette.js +32 -26
- package/es/selectThumb/components/colorPicker.d.ts +0 -0
- package/es/selectThumb/components/colorPicker.js +54 -0
- package/es/selectThumb/style/colorPalette.less +31 -0
- package/es/selectThumb/style/index.css +35 -0
- package/es/selectThumb/style/index.less +7 -0
- package/es/utils/index.d.ts +1 -0
- package/es/utils/index.js +16 -1
- package/lib/contentModal/component.js +0 -1
- package/lib/contentModal/components/ViewAllColumn/index.js +1 -0
- package/lib/editMetaInfo/component.js +88 -0
- package/lib/editMetaInfo/components/metaInfoForm.js +622 -0
- package/lib/editMetaInfo/index.js +8 -0
- package/lib/editMetaInfo/script/api.js +20 -0
- package/lib/editMetaInfo/script/restaurants.js +128 -0
- package/lib/editMetaInfo/style/css.js +2 -0
- package/lib/editMetaInfo/style/index.css +20 -0
- package/lib/editMetaInfo/style/index.js +2 -0
- package/lib/editMetaInfo/style/index.less +30 -0
- package/lib/hooks/dialogVisible.js +20 -0
- package/lib/index.css +55 -0
- package/lib/index.js +2 -0
- package/lib/index.less +1 -0
- package/lib/selectThumb/component.js +3 -1
- package/lib/selectThumb/components/colorPalette.js +32 -26
- package/lib/selectThumb/components/colorPicker.js +55 -0
- package/lib/selectThumb/style/colorPalette.less +31 -0
- package/lib/selectThumb/style/index.css +35 -0
- package/lib/selectThumb/style/index.less +7 -0
- package/lib/utils/index.js +16 -0
- package/package.json +1 -1
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
var restaurants = [
|
|
2
|
+
{ value: "\u4EBA\u6C11\u89C6\u9891\u5BA2\u6237\u7AEF" },
|
|
3
|
+
{ value: "\u4E2D\u56FD\u9752\u5E74\u62A5\u5BA2\u6237\u7AEF" },
|
|
4
|
+
{ value: "\u592E\u89C6\u65B0\u95FB\u5BA2\u6237\u7AEF" },
|
|
5
|
+
{ value: "\u592E\u89C6\u7F51" },
|
|
6
|
+
{ value: "\u65B0\u534E\u793E" },
|
|
7
|
+
{ value: "\u65B0\u534E\u7F51" },
|
|
8
|
+
{ value: "\u4EBA\u6C11\u7F51" },
|
|
9
|
+
{ value: "\u68A8\u89C6\u9891" },
|
|
10
|
+
{ value: "\u5317\u9752\u7F51" },
|
|
11
|
+
{ value: "21\u4E16\u7EAA\u7ECF\u6D4E\u62A5\u9053" },
|
|
12
|
+
{ value: "\u4E0A\u89C2\u65B0\u95FB" },
|
|
13
|
+
{ value: "\u4E1C\u5317\u65B0\u95FB\u7F51" },
|
|
14
|
+
{ value: "\u4E1C\u5317\u7F51" },
|
|
15
|
+
{ value: "\u4E1C\u5357\u7F51" },
|
|
16
|
+
{ value: "\u4E1C\u65B9\u7F51" },
|
|
17
|
+
{ value: "\u4E2D\u534E\u5973\u6027\u7F51" },
|
|
18
|
+
{ value: "\u4E2D\u56FD\u53F0\u6E7E\u7F51" },
|
|
19
|
+
{ value: "\u4E2D\u56FD\u5409\u6797\u7F51" },
|
|
20
|
+
{ value: "\u4E2D\u56FD\u5546\u52A1\u65B0\u95FB\u7F51" },
|
|
21
|
+
{ value: "\u4E2D\u56FD\u5C71\u4E1C\u7F51" },
|
|
22
|
+
{ value: "\u4E2D\u56FD\u6444\u5F71\u62A5" },
|
|
23
|
+
{ value: "\u4E2D\u56FD\u6559\u80B2\u5728\u7EBF" },
|
|
24
|
+
{ value: "\u4E2D\u56FD\u6559\u80B2\u65B0\u95FB\u7F51" },
|
|
25
|
+
{ value: "\u4E2D\u56FD\u65E5\u62A5\u7F51" },
|
|
26
|
+
{ value: "\u4E2D\u56FD\u6C5F\u82CF\u7F51" },
|
|
27
|
+
{ value: "\u4E2D\u56FD\u6C5F\u897F\u7F51" },
|
|
28
|
+
{ value: "\u4E2D\u56FD\u7518\u8083\u7F51" },
|
|
29
|
+
{ value: "\u4E2D\u56FD\u7ECF\u8425\u7F51" },
|
|
30
|
+
{ value: "\u4E2D\u56FD\u7F51" },
|
|
31
|
+
{ value: "\u4E2D\u56FD\u822A\u5929\u79D1\u6280\u96C6\u56E2\u6709\u9650\u516C\u53F8\u7F51\u7AD9" },
|
|
32
|
+
{ value: "\u4E2D\u56FD\u897F\u85CF\u7F51" },
|
|
33
|
+
{ value: "\u4E2D\u56FD\u8B66\u5BDF\u7F51" },
|
|
34
|
+
{ value: "\u4E2D\u56FD\u8D28\u91CF\u65B0\u95FB\u7F51" },
|
|
35
|
+
{ value: "\u4E2D\u592E\u53A8\u623F" },
|
|
36
|
+
{ value: "\u4E2D\u5DE5\u7F51" },
|
|
37
|
+
{ value: "\u4E2D\u65B0\u7ECF\u7EAC" },
|
|
38
|
+
{ value: "\u4E2D\u65B0\u7F51" },
|
|
39
|
+
{ value: "\u4E2D\u7ECF\u7F51" },
|
|
40
|
+
{ value: "\u4E91\u5357\u7F51" },
|
|
41
|
+
{ value: "\u4EA4\u6C47\u70B9" },
|
|
42
|
+
{ value: "\u5149\u660E\u7F51" },
|
|
43
|
+
{ value: "\u5317\u4EAC\u5546\u62A5" },
|
|
44
|
+
{ value: "\u5317\u4EAC\u65F6\u95F4" },
|
|
45
|
+
{ value: "\u5317\u4EAC\u6668\u62A5\u7F51" },
|
|
46
|
+
{ value: "\u5317\u56FD\u7F51" },
|
|
47
|
+
{ value: "\u5317\u65B9\u7F51" },
|
|
48
|
+
{ value: "\u5343\u9F99\u65B0\u95FB\u7F51" },
|
|
49
|
+
{ value: "\u534E\u58F0\u5728\u7EBF" },
|
|
50
|
+
{ value: "\u534E\u9F99\u7F51" },
|
|
51
|
+
{ value: "\u5357\u4EAC\u6668\u62A5\u7F51" },
|
|
52
|
+
{ value: "\u5357\u65B9\u65E5\u62A5" },
|
|
53
|
+
{ value: "\u5357\u6D77\u7F51" },
|
|
54
|
+
{ value: "\u53F0\u6D77\u7F51" },
|
|
55
|
+
{ value: "\u56DB\u5DDD\u65B0\u95FB\u7F51" },
|
|
56
|
+
{ value: "\u56FD\u9645\u5728\u7EBF" },
|
|
57
|
+
{ value: "\u591A\u5F69\u8D35\u5DDE\u7F51" },
|
|
58
|
+
{ value: "\u5927\u4F17\u7F51" },
|
|
59
|
+
{ value: "\u5927\u516C\u7F51" },
|
|
60
|
+
{ value: "\u5927\u6CB3\u7F51" },
|
|
61
|
+
{ value: "\u5B81\u590F\u65B0\u95FB\u7F51" },
|
|
62
|
+
{ value: "\u5BA2\u5BB6\u65B0\u95FB\u7F51" },
|
|
63
|
+
{ value: "\u5C01\u9762\u65B0\u95FB\u7F51" },
|
|
64
|
+
{ value: "\u5E02\u573A\u77AD\u671B" },
|
|
65
|
+
{ value: "\u5E02\u573A\u89C2\u5BDF\u7F51" },
|
|
66
|
+
{ value: "\u5E7F\u897F\u65B0\u95FB\u7F51" },
|
|
67
|
+
{ value: "\u626C\u5B50\u665A\u62A5\u7F51" },
|
|
68
|
+
{ value: "\u6536\u85CF\u5FEB\u62A5" },
|
|
69
|
+
{ value: "\u6587\u6C47\u62A5" },
|
|
70
|
+
{ value: "\u65B0\u534E\u62A5\u4E1A\u7F51" },
|
|
71
|
+
{ value: "\u65B0\u534E\u65E5\u62A5\u8D22\u7ECF\u7F51" },
|
|
72
|
+
{ value: "\u65B0\u6C11\u665A\u62A5/\u65B0\u6C11\u7F51" },
|
|
73
|
+
{ value: "\u65B0\u6D6A\u4E50\u5C45" },
|
|
74
|
+
{ value: "\u65B0\u7586\u5929\u5C71\u7F51" },
|
|
75
|
+
{ value: "\u664B\u6C5F\u7ECF\u6D4E\u62A5" },
|
|
76
|
+
{ value: "\u6B63\u4E49\u7F51" },
|
|
77
|
+
{ value: "\u6BCF\u5468\u6587\u6458" },
|
|
78
|
+
{ value: "\u6C5F\u5357\u65F6\u62A5\u7F51" },
|
|
79
|
+
{ value: "\u6C5F\u82CF\u7ECF\u6D4E\u7F51" },
|
|
80
|
+
{ value: "\u6C5F\u82CF\u8206\u60C5\u89C2\u5BDF" },
|
|
81
|
+
{ value: "\u6CB3\u5317\u5171\u4EA7\u515A\u5458\u7F51" },
|
|
82
|
+
{ value: "\u6CB3\u5317\u65B0\u95FB\u7F51" },
|
|
83
|
+
{ value: "\u6CB3\u5317\u7ECF\u6D4E\u7F51" },
|
|
84
|
+
{ value: "\u6CB3\u9752\u7F51" },
|
|
85
|
+
{ value: "\u6CD5\u5236\u7F51" },
|
|
86
|
+
{ value: "\u6D59\u6C5F\u5728\u7EBF" },
|
|
87
|
+
{ value: "\u6D77\u4E1D\u5546\u62A5" },
|
|
88
|
+
{ value: "\u6D77\u5916\u7F51" },
|
|
89
|
+
{ value: "\u6D77\u5CE1\u5BFC\u62A5" },
|
|
90
|
+
{ value: "\u6D77\u5CE1\u6559\u80B2\u62A5" },
|
|
91
|
+
{ value: "\u6D77\u5CE1\u6CD5\u6CBB\u5728\u7EBF" },
|
|
92
|
+
{ value: "\u6D77\u5CE1\u6D88\u8D39\u62A5" },
|
|
93
|
+
{ value: "\u6D77\u5CE1\u7F51" },
|
|
94
|
+
{ value: "\u6D77\u5CE1\u90FD\u5E02\u62A5" },
|
|
95
|
+
{ value: "\u6DF1\u5733\u65B0\u95FB\u7F51" },
|
|
96
|
+
{ value: "\u6DF1\u5733\u65E5\u62A5" },
|
|
97
|
+
{ value: "\u6F8E\u6E43\u65B0\u95FB" },
|
|
98
|
+
{ value: "\u73AF\u7403\u7F51" },
|
|
99
|
+
{ value: "\u7709\u5C71\u7F51" },
|
|
100
|
+
{ value: "\u77F3\u5BB6\u5E84\u65B0\u95FB\u7F51" },
|
|
101
|
+
{ value: "\u77F3\u72EE\u65E5\u62A5" },
|
|
102
|
+
{ value: "\u798F\u5EFA\u65E5\u62A5" },
|
|
103
|
+
{ value: "\u798F\u5EFA\u6CD5\u6CBB\u62A5" },
|
|
104
|
+
{ value: "\u79D1\u6280\u65E5\u62A5" },
|
|
105
|
+
{ value: "\u79D1\u666E\u4E2D\u56FD" },
|
|
106
|
+
{ value: "\u79E6\u7687\u5C9B\u65B0\u95FB\u7F51" },
|
|
107
|
+
{ value: "\u7B2C\u4E00\u751F\u6D3B\u7F51\uFF08\u77E5\u97F3\uFF09" },
|
|
108
|
+
{ value: "\u7EA2\u7F51" },
|
|
109
|
+
{ value: "\u7ECF\u6D4E\u89C2\u5BDF\u62A5" },
|
|
110
|
+
{ value: "\u897F\u90E8\u7F51" },
|
|
111
|
+
{ value: "\u89C2\u5BDF\u8005\u7F51" },
|
|
112
|
+
{ value: "\u8D22\u7ECF\u7F51" },
|
|
113
|
+
{ value: "\u90D1\u5DDE\u665A\u62A5" },
|
|
114
|
+
{ value: "\u91CD\u5E86\u534E\u9F99\u7F51" },
|
|
115
|
+
{ value: "\u91D1\u7F8A\u7F51" },
|
|
116
|
+
{ value: "\u91D1\u878D\u754C" },
|
|
117
|
+
{ value: "\u957F\u57CE\u7F51" },
|
|
118
|
+
{ value: "\u957F\u6C5F\u4E91" },
|
|
119
|
+
{ value: "\u957F\u6C5F\u7F51" },
|
|
120
|
+
{ value: "\u95FD\u5357\u7F51" },
|
|
121
|
+
{ value: "\u9655\u897F\u5934\u6761" },
|
|
122
|
+
{ value: "\u9C81\u7F51" },
|
|
123
|
+
{ value: "\u9EC4\u6CB3\u65B0\u95FB\u7F51" },
|
|
124
|
+
{ value: "\u9F50\u9C81\u665A\u62A5" },
|
|
125
|
+
{ value: "\u9F50\u9C81\u7F51" }
|
|
126
|
+
];
|
|
127
|
+
export { restaurants as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./index.css";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.edit-meta-info-dialog-body {
|
|
2
|
+
padding: 0;
|
|
3
|
+
}
|
|
4
|
+
.edit-meta-info-dialog-body .style-form-item {
|
|
5
|
+
position: relative;
|
|
6
|
+
top: -10px;
|
|
7
|
+
}
|
|
8
|
+
.edit-meta-info-dialog-body .style-form-item .title {
|
|
9
|
+
max-width: 100%;
|
|
10
|
+
color: var(--color-text-2);
|
|
11
|
+
font-size: 14px;
|
|
12
|
+
font-weight: 400;
|
|
13
|
+
white-space: normal;
|
|
14
|
+
}
|
|
15
|
+
.edit-meta-info-dialog-body .select-thumb-wrap {
|
|
16
|
+
margin-left: 20.8%;
|
|
17
|
+
}
|
|
18
|
+
.edit-meta-info-dialog-body .input-w {
|
|
19
|
+
width: 450px;
|
|
20
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './index.less';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./index.less";
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.edit-meta-info-dialog-body {
|
|
2
|
+
padding: 0;
|
|
3
|
+
.style-form-item {
|
|
4
|
+
position: relative;
|
|
5
|
+
top: -10px;
|
|
6
|
+
.title {
|
|
7
|
+
max-width: 100%;
|
|
8
|
+
color: var(--color-text-2);
|
|
9
|
+
font-size: 14px;
|
|
10
|
+
font-weight: 400;
|
|
11
|
+
white-space: normal;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
.select-thumb-wrap {
|
|
15
|
+
margin-left: 20.8%;
|
|
16
|
+
}
|
|
17
|
+
.horizontal {
|
|
18
|
+
// display: flex;
|
|
19
|
+
// align-items: center;
|
|
20
|
+
// flex-direction: row !important;
|
|
21
|
+
// .arco-form-item-label-col {
|
|
22
|
+
// margin-bottom: 0;
|
|
23
|
+
// padding-right: 16px;
|
|
24
|
+
// text-align: right;
|
|
25
|
+
// }
|
|
26
|
+
}
|
|
27
|
+
.input-w {
|
|
28
|
+
width: 450px;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { computed } from "vue";
|
|
2
|
+
function useDialogVisible(props, emit) {
|
|
3
|
+
const setVisible = (bool) => {
|
|
4
|
+
emit("update:visible", bool);
|
|
5
|
+
};
|
|
6
|
+
const visible = computed({
|
|
7
|
+
get() {
|
|
8
|
+
return props.visible;
|
|
9
|
+
},
|
|
10
|
+
set(value) {
|
|
11
|
+
setVisible(value);
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
return {
|
|
15
|
+
visible,
|
|
16
|
+
setVisible
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
export { useDialogVisible as default };
|
package/es/index.css
CHANGED
|
@@ -2712,6 +2712,35 @@
|
|
|
2712
2712
|
.select-thumb-container .thumb-card-container .img-v:hover .mask {
|
|
2713
2713
|
display: flex;
|
|
2714
2714
|
}
|
|
2715
|
+
.select-thumb-container .color-radio-group {
|
|
2716
|
+
overflow: hidden;
|
|
2717
|
+
}
|
|
2718
|
+
.select-thumb-container .color-radio-group .arco-radio-button {
|
|
2719
|
+
width: 32px;
|
|
2720
|
+
height: 32px;
|
|
2721
|
+
padding: 0;
|
|
2722
|
+
font-size: 0 !important;
|
|
2723
|
+
overflow: hidden !important;
|
|
2724
|
+
background: transparent !important;
|
|
2725
|
+
border-width: 0 !important;
|
|
2726
|
+
box-shadow: none !important;
|
|
2727
|
+
position: relative;
|
|
2728
|
+
}
|
|
2729
|
+
.select-thumb-container .color-radio-group .arco-radio-button.arco-radio-checked::after {
|
|
2730
|
+
box-sizing: content-box;
|
|
2731
|
+
content: '';
|
|
2732
|
+
border: 2px solid #fff;
|
|
2733
|
+
border-left: 0;
|
|
2734
|
+
border-top: 0;
|
|
2735
|
+
height: 11px;
|
|
2736
|
+
left: 12px;
|
|
2737
|
+
position: absolute;
|
|
2738
|
+
top: 7px;
|
|
2739
|
+
transform: rotate(45deg) scaleY(1);
|
|
2740
|
+
width: 5px;
|
|
2741
|
+
transition: transform 0.15s ease-in 0.05s;
|
|
2742
|
+
transform-origin: center;
|
|
2743
|
+
}
|
|
2715
2744
|
.select-thumb-container .title {
|
|
2716
2745
|
font-size: 14px;
|
|
2717
2746
|
color: #4e5969;
|
|
@@ -2735,3 +2764,29 @@
|
|
|
2735
2764
|
color: red;
|
|
2736
2765
|
margin-right: 2px !important;
|
|
2737
2766
|
}
|
|
2767
|
+
.select-thumb-container .color-picker-input {
|
|
2768
|
+
width: 32px;
|
|
2769
|
+
height: 32px;
|
|
2770
|
+
border: none;
|
|
2771
|
+
padding: 0px 2px;
|
|
2772
|
+
}
|
|
2773
|
+
.edit-meta-info-dialog-body {
|
|
2774
|
+
padding: 0;
|
|
2775
|
+
}
|
|
2776
|
+
.edit-meta-info-dialog-body .style-form-item {
|
|
2777
|
+
position: relative;
|
|
2778
|
+
top: -10px;
|
|
2779
|
+
}
|
|
2780
|
+
.edit-meta-info-dialog-body .style-form-item .title {
|
|
2781
|
+
max-width: 100%;
|
|
2782
|
+
color: var(--color-text-2);
|
|
2783
|
+
font-size: 14px;
|
|
2784
|
+
font-weight: 400;
|
|
2785
|
+
white-space: normal;
|
|
2786
|
+
}
|
|
2787
|
+
.edit-meta-info-dialog-body .select-thumb-wrap {
|
|
2788
|
+
margin-left: 20.8%;
|
|
2789
|
+
}
|
|
2790
|
+
.edit-meta-info-dialog-body .input-w {
|
|
2791
|
+
width: 450px;
|
|
2792
|
+
}
|
package/es/index.d.ts
CHANGED
|
@@ -16,3 +16,4 @@ export { default as mediaFilter } from './mediaFilter';
|
|
|
16
16
|
export { default as selectAvatarList } from './selectAvatarList';
|
|
17
17
|
export { default as userDirector } from './userDirector';
|
|
18
18
|
export { default as selectThumb } from './selectThumb';
|
|
19
|
+
export { default as editMetaInfo } from './editMetaInfo';
|
package/es/index.js
CHANGED
|
@@ -16,3 +16,4 @@ export { default as mediaFilter } from "./mediaFilter/index.js";
|
|
|
16
16
|
export { default as selectAvatarList } from "./selectAvatarList/index.js";
|
|
17
17
|
export { default as userDirector } from "./userDirector/index.js";
|
|
18
18
|
export { default as selectThumb } from "./selectThumb/index.js";
|
|
19
|
+
export { default as editMetaInfo } from "./editMetaInfo/index.js";
|
package/es/index.less
CHANGED
|
@@ -35,7 +35,7 @@ const _hoisted_15 = /* @__PURE__ */ createElementVNode("span", { class: "star" }
|
|
|
35
35
|
const _hoisted_16 = { key: 2 };
|
|
36
36
|
const _hoisted_17 = /* @__PURE__ */ createElementVNode("span", { class: "tip" }, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)", -1);
|
|
37
37
|
const _hoisted_18 = { class: "title" };
|
|
38
|
-
const _hoisted_19 = /* @__PURE__ */ createElementVNode("span", null, "\
|
|
38
|
+
const _hoisted_19 = /* @__PURE__ */ createElementVNode("span", null, "\u5934\u56FE\u80CC\u666F\u989C\u8272", -1);
|
|
39
39
|
const _hoisted_20 = [
|
|
40
40
|
_hoisted_19
|
|
41
41
|
];
|
|
@@ -229,6 +229,8 @@ const _sfc_main = defineComponent({
|
|
|
229
229
|
};
|
|
230
230
|
const cropConfirm = (data) => {
|
|
231
231
|
dialogMediaSelectionShow.value = false;
|
|
232
|
+
if (!styleData.value)
|
|
233
|
+
return;
|
|
232
234
|
if (thumbBannerModel.value === "banner") {
|
|
233
235
|
styleData.value.banner_url = data[0].url;
|
|
234
236
|
styleData.value.banner_colorList = JSON.parse(
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode } from "vue";
|
|
2
2
|
import { RadioGroup, Radio } from "@arco-design/web-vue";
|
|
3
|
+
import _sfc_main$1 from "./colorPicker.js";
|
|
3
4
|
const _hoisted_1 = {
|
|
4
5
|
key: 0,
|
|
5
6
|
class: "color-palette-container"
|
|
@@ -15,44 +16,44 @@ const _sfc_main = defineComponent({
|
|
|
15
16
|
const props = __props;
|
|
16
17
|
const color = ref("rgb(101,121,109)");
|
|
17
18
|
const colorList = ref([]);
|
|
19
|
+
const colorChange = (_color) => {
|
|
20
|
+
if (_color) {
|
|
21
|
+
color.value = _color.replace(/\s+/g, "");
|
|
22
|
+
const styleData = JSON.parse(JSON.stringify(props.styleData));
|
|
23
|
+
styleData[`${props.model}_theme_color`] = color.value;
|
|
24
|
+
emit("change", styleData);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
const colorRgb = (_color) => {
|
|
28
|
+
if (_color.includes("rgb")) {
|
|
29
|
+
return _color;
|
|
30
|
+
}
|
|
31
|
+
const red = parseInt(_color.slice(1, 3), 16);
|
|
32
|
+
const green = parseInt(_color.slice(3, 5), 16);
|
|
33
|
+
const blue = parseInt(_color.slice(5, 7), 16);
|
|
34
|
+
return `rgb(${red},${green},${blue})`;
|
|
35
|
+
};
|
|
18
36
|
watch(
|
|
19
37
|
() => props.styleData,
|
|
20
38
|
() => {
|
|
21
39
|
if (props.styleData) {
|
|
22
40
|
const _color = props.styleData[`${props.model}_theme_color`] || "";
|
|
23
41
|
color.value = colorRgb(_color);
|
|
24
|
-
const
|
|
25
|
-
if (
|
|
26
|
-
|
|
42
|
+
const _colorList = props.styleData[`${props.model}_colorList`];
|
|
43
|
+
if (_colorList == null ? void 0 : _colorList.length) {
|
|
44
|
+
colorList.value = _colorList.map((color2) => `rgb(${color2})`);
|
|
27
45
|
} else if (color.value) {
|
|
28
|
-
|
|
46
|
+
colorList.value = [color.value];
|
|
29
47
|
}
|
|
30
48
|
}
|
|
31
|
-
}
|
|
49
|
+
},
|
|
50
|
+
{ immediate: true }
|
|
32
51
|
);
|
|
33
|
-
const colorChange = (color2) => {
|
|
34
|
-
if (color2) {
|
|
35
|
-
color2.value = color2.replace(/\s+/g, "");
|
|
36
|
-
const styleData = JSON.parse(JSON.stringify(props.styleData));
|
|
37
|
-
styleData[`${props.model}_theme_color`] = color2.value;
|
|
38
|
-
emit("change", styleData);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
const colorRgb = (_color) => {
|
|
42
|
-
if (_color.includes("rgb")) {
|
|
43
|
-
return _color;
|
|
44
|
-
}
|
|
45
|
-
const colorChange2 = [];
|
|
46
|
-
for (let i = 1; i < 7; i += 2) {
|
|
47
|
-
colorChange2.push(parseInt(`0x${_color.slice(i, i + 2)}`, 10) || 0);
|
|
48
|
-
}
|
|
49
|
-
return `rgb(${colorChange2.join(",")})`;
|
|
50
|
-
};
|
|
51
52
|
return (_ctx, _cache) => {
|
|
52
53
|
return colorList.value && colorList.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
53
54
|
createVNode(unref(RadioGroup), {
|
|
54
55
|
modelValue: color.value,
|
|
55
|
-
"onUpdate:modelValue": _cache[
|
|
56
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => color.value = $event),
|
|
56
57
|
class: "color-radio-group",
|
|
57
58
|
type: "button",
|
|
58
59
|
onChange: colorChange
|
|
@@ -61,10 +62,15 @@ const _sfc_main = defineComponent({
|
|
|
61
62
|
(openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (colr, index) => {
|
|
62
63
|
return openBlock(), createBlock(unref(Radio), {
|
|
63
64
|
key: index,
|
|
64
|
-
style: normalizeStyle({ background: `${colr}` }),
|
|
65
|
+
style: normalizeStyle({ background: `${colr} !important` }),
|
|
65
66
|
value: colr
|
|
66
67
|
}, null, 8, ["style", "value"]);
|
|
67
|
-
}), 128))
|
|
68
|
+
}), 128)),
|
|
69
|
+
createVNode(_sfc_main$1, {
|
|
70
|
+
modelValue: color.value,
|
|
71
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => color.value = $event),
|
|
72
|
+
onChange: colorChange
|
|
73
|
+
}, null, 8, ["modelValue"])
|
|
68
74
|
]),
|
|
69
75
|
_: 1
|
|
70
76
|
}, 8, ["modelValue"])
|
|
File without changes
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { defineComponent, ref, watch, openBlock, createElementBlock } from "vue";
|
|
2
|
+
const _hoisted_1 = ["value"];
|
|
3
|
+
const _sfc_main = defineComponent({
|
|
4
|
+
__name: "colorPicker",
|
|
5
|
+
props: {
|
|
6
|
+
modelValue: String
|
|
7
|
+
},
|
|
8
|
+
emits: ["update:modelValue", "change"],
|
|
9
|
+
setup(__props, { emit }) {
|
|
10
|
+
const props = __props;
|
|
11
|
+
const color = ref(props.modelValue || "#ffffff");
|
|
12
|
+
watch(
|
|
13
|
+
() => props.modelValue,
|
|
14
|
+
() => {
|
|
15
|
+
if (props.modelValue) {
|
|
16
|
+
color.value = rgbToHex(props.modelValue);
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{ immediate: true }
|
|
20
|
+
);
|
|
21
|
+
watch(color, (newColor) => {
|
|
22
|
+
emit("update:modelValue", newColor);
|
|
23
|
+
emit("change", newColor);
|
|
24
|
+
});
|
|
25
|
+
const updateColor = (event) => {
|
|
26
|
+
const hexColor = event.target.value;
|
|
27
|
+
const rgbColor = hexToRgb(hexColor);
|
|
28
|
+
color.value = rgbColor;
|
|
29
|
+
};
|
|
30
|
+
function hexToRgb(hex) {
|
|
31
|
+
const red = parseInt(hex.slice(1, 3), 16);
|
|
32
|
+
const green = parseInt(hex.slice(3, 5), 16);
|
|
33
|
+
const blue = parseInt(hex.slice(5, 7), 16);
|
|
34
|
+
return `rgb(${red}, ${green}, ${blue})`;
|
|
35
|
+
}
|
|
36
|
+
function rgbToHex(rgb) {
|
|
37
|
+
if (rgb.includes("NaN"))
|
|
38
|
+
return "";
|
|
39
|
+
if (rgb.includes("#"))
|
|
40
|
+
return rgb;
|
|
41
|
+
const [red, green, blue] = rgb.match(/\d+/g).map(Number);
|
|
42
|
+
return `#${((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1).toUpperCase()}`;
|
|
43
|
+
}
|
|
44
|
+
return (_ctx, _cache) => {
|
|
45
|
+
return openBlock(), createElementBlock("input", {
|
|
46
|
+
class: "color-picker-input",
|
|
47
|
+
type: "color",
|
|
48
|
+
value: color.value,
|
|
49
|
+
onInput: updateColor
|
|
50
|
+
}, null, 40, _hoisted_1);
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
export { _sfc_main as default };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.color-radio-group {
|
|
2
|
+
overflow: hidden;
|
|
3
|
+
.arco-radio-button {
|
|
4
|
+
width: @radio-button-size;
|
|
5
|
+
height: @radio-button-size;
|
|
6
|
+
padding: 0;
|
|
7
|
+
font-size: 0 !important;
|
|
8
|
+
overflow: hidden !important;
|
|
9
|
+
background: transparent !important;
|
|
10
|
+
border-width: 0 !important;
|
|
11
|
+
box-shadow: none !important;
|
|
12
|
+
position: relative;
|
|
13
|
+
&.arco-radio-checked {
|
|
14
|
+
&::after {
|
|
15
|
+
box-sizing: content-box;
|
|
16
|
+
content: '';
|
|
17
|
+
border: 2px solid #fff;
|
|
18
|
+
border-left: 0;
|
|
19
|
+
border-top: 0;
|
|
20
|
+
height: 11px;
|
|
21
|
+
left: 12px;
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 7px;
|
|
24
|
+
transform: rotate(45deg) scaleY(1);
|
|
25
|
+
width: 5px;
|
|
26
|
+
transition: transform 0.15s ease-in 0.05s;
|
|
27
|
+
transform-origin: center;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -80,6 +80,35 @@
|
|
|
80
80
|
.select-thumb-container .thumb-card-container .img-v:hover .mask {
|
|
81
81
|
display: flex;
|
|
82
82
|
}
|
|
83
|
+
.select-thumb-container .color-radio-group {
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
}
|
|
86
|
+
.select-thumb-container .color-radio-group .arco-radio-button {
|
|
87
|
+
width: 32px;
|
|
88
|
+
height: 32px;
|
|
89
|
+
padding: 0;
|
|
90
|
+
font-size: 0 !important;
|
|
91
|
+
overflow: hidden !important;
|
|
92
|
+
background: transparent !important;
|
|
93
|
+
border-width: 0 !important;
|
|
94
|
+
box-shadow: none !important;
|
|
95
|
+
position: relative;
|
|
96
|
+
}
|
|
97
|
+
.select-thumb-container .color-radio-group .arco-radio-button.arco-radio-checked::after {
|
|
98
|
+
box-sizing: content-box;
|
|
99
|
+
content: '';
|
|
100
|
+
border: 2px solid #fff;
|
|
101
|
+
border-left: 0;
|
|
102
|
+
border-top: 0;
|
|
103
|
+
height: 11px;
|
|
104
|
+
left: 12px;
|
|
105
|
+
position: absolute;
|
|
106
|
+
top: 7px;
|
|
107
|
+
transform: rotate(45deg) scaleY(1);
|
|
108
|
+
width: 5px;
|
|
109
|
+
transition: transform 0.15s ease-in 0.05s;
|
|
110
|
+
transform-origin: center;
|
|
111
|
+
}
|
|
83
112
|
.select-thumb-container .title {
|
|
84
113
|
font-size: 14px;
|
|
85
114
|
color: #4e5969;
|
|
@@ -103,3 +132,9 @@
|
|
|
103
132
|
color: red;
|
|
104
133
|
margin-right: 2px !important;
|
|
105
134
|
}
|
|
135
|
+
.select-thumb-container .color-picker-input {
|
|
136
|
+
width: 32px;
|
|
137
|
+
height: 32px;
|
|
138
|
+
border: none;
|
|
139
|
+
padding: 0px 2px;
|
|
140
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
.select-thumb-container {
|
|
2
|
+
@radio-button-size: 32px;
|
|
2
3
|
@import './card.less';
|
|
3
4
|
@import './colorPalette.less';
|
|
4
5
|
.title {
|
|
@@ -24,4 +25,10 @@
|
|
|
24
25
|
color: red;
|
|
25
26
|
margin-right: 2px !important;
|
|
26
27
|
}
|
|
28
|
+
.color-picker-input {
|
|
29
|
+
width: @radio-button-size;
|
|
30
|
+
height: @radio-button-size;
|
|
31
|
+
border: none;
|
|
32
|
+
padding: 0px 2px;
|
|
33
|
+
}
|
|
27
34
|
}
|
package/es/utils/index.d.ts
CHANGED
|
@@ -10,3 +10,4 @@ export declare const to: <T, U = Error>(promise: Promise<T>, errorExt?: any) =>
|
|
|
10
10
|
export declare function replaceSuffix(str: string, insert: string): string;
|
|
11
11
|
export declare const noCoverText: (item: any) => any;
|
|
12
12
|
export declare const timeFormat: (value: any) => string;
|
|
13
|
+
export declare const validateForm: (formRef: any) => Promise<unknown>;
|
package/es/utils/index.js
CHANGED
|
@@ -45,4 +45,19 @@ const timeFormat = (value) => {
|
|
|
45
45
|
const date = new Date(value);
|
|
46
46
|
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}:${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}`;
|
|
47
47
|
};
|
|
48
|
-
|
|
48
|
+
const validateForm = (formRef) => {
|
|
49
|
+
return new Promise((resolve, reject) => {
|
|
50
|
+
try {
|
|
51
|
+
formRef.value.validate((valid) => {
|
|
52
|
+
if (valid) {
|
|
53
|
+
resolve(false);
|
|
54
|
+
} else {
|
|
55
|
+
resolve(true);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
} catch (error) {
|
|
59
|
+
resolve(false);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
export { dateYYYYDDMMHHmm, generateUUID, noCoverText, replaceSuffix, timeFormat, to, validateForm };
|
|
@@ -54,7 +54,6 @@ const _sfc_main = vue.defineComponent({
|
|
|
54
54
|
};
|
|
55
55
|
const { userInfo, getUserInfoHandle } = user["default"](BASE_API);
|
|
56
56
|
const HandleOpen = () => {
|
|
57
|
-
console.log(props.outsideSelectData);
|
|
58
57
|
selectedData.value = props.defaultSelectedData || [];
|
|
59
58
|
};
|
|
60
59
|
const HandleClose = () => {
|