Skip to content

Commit ce10949

Browse files
authored
KDS-222, re-check all color (#174)
1 parent e3eea05 commit ce10949

File tree

18 files changed

+1291
-77
lines changed

18 files changed

+1291
-77
lines changed
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import fs from 'fs';
2+
3+
import { formatLessVarToJs } from './utils.js';
4+
5+
const palette = formatLessVarToJs('../../../packages/theme-chalk/src/common/basic/palette.less');
6+
const color = formatLessVarToJs('../../../packages/theme-chalk/src/common/basic/color.less');
7+
8+
fs.writeFileSync('./paletteLess.json', JSON.stringify([...color, ...palette]));
Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<template>
2+
<div>
3+
<el-input placeholder="请输入" v-model="value" @input="handleChange" />
4+
<div class="colors-list">
5+
<div
6+
v-for="palette in filteredPalette"
7+
:key="palette[0]"
8+
class="colors-item"
9+
@click="copyTkl(palette[0])"
10+
>
11+
<div class="colors-item-bg" :style="{ background: palette[1] }"></div>
12+
<div class="colors-item-text">{{ palette[1] }}</div>
13+
<div class="colors-item-name">{{ palette[0] }}</div>
14+
<input class="colors-item-copy" :value="palette[0]" :id="palette[0]" readonly />
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import { Input } from 'kyligence-ui';
22+
import paletteLess from './paletteLess.json';
23+
24+
export default {
25+
name: 'Colors',
26+
components: {
27+
ElInput: Input
28+
},
29+
data() {
30+
return {
31+
value: ''
32+
};
33+
},
34+
computed: {
35+
filteredPalette() {
36+
const arr = this.processArray(paletteLess);
37+
return arr.filter(([name, color]) => {
38+
let lowerValue = this.value.toLowerCase().replace(/\s/g, '').replace(/\//g, '-');
39+
if (lowerValue.startsWith('function-')) {
40+
const splitValue = lowerValue.split('-');
41+
let end = 1;
42+
if (splitValue[1] === splitValue[2]) {
43+
end = 2;
44+
}
45+
splitValue.splice(0, end);
46+
lowerValue = splitValue.join('-');
47+
}
48+
return name.includes(lowerValue) || color.includes(lowerValue);
49+
});
50+
}
51+
},
52+
methods: {
53+
handleChange(value) {
54+
this.value = value;
55+
},
56+
processArray(arr) {
57+
const colors = new Set(); // 用于存储已出现的颜色值
58+
const result = [];
59+
for (let i = 0; i < arr.length; i++) {
60+
const item = arr[i];
61+
if (colors.has(item[1])) { // 如果颜色已经出现过
62+
if (item[0].startsWith('@color-')) {
63+
result.push(item);
64+
}
65+
} else {
66+
colors.add(item[1]);
67+
result.push(item); // 添加到结果数组
68+
}
69+
}
70+
return result;
71+
},
72+
copyTkl(name) {
73+
const input = document.getElementById(name);
74+
input.select();
75+
document.execCommand('copy');
76+
this.$message.success(`复制成功:${name}`);
77+
}
78+
}
79+
};
80+
</script>
81+
82+
<style>
83+
.colors-list {
84+
display: flex;
85+
flex-wrap: wrap;
86+
margin-top: 8px;
87+
}
88+
.colors-item {
89+
position: relative;
90+
flex-shrink: 0;
91+
width: 18%;
92+
height: 100px;
93+
margin: 3px 2.5% 3px 0;
94+
padding: 10px;
95+
overflow: hidden;
96+
text-align: center;
97+
list-style: none;
98+
background-color: inherit;
99+
border-radius: 4px;
100+
cursor: pointer;
101+
background-color: rgba(240, 240, 240, 0.5);
102+
color: #666;
103+
box-sizing: border-box;
104+
105+
height: 100px;
106+
display: flex;
107+
flex-direction: column;
108+
justify-content: space-around;
109+
align-items: center;
110+
}
111+
.colors-item:nth-child(5n) {
112+
margin-right: 0;
113+
}
114+
.colors-item:hover {
115+
color: #fff;
116+
background-color: #0875da;
117+
}
118+
119+
.colors-item-bg {
120+
width: 80%;
121+
height: 24px;
122+
}
123+
.colors-item-name {
124+
font-size: 12px;
125+
overflow: hidden;
126+
white-space: nowrap;
127+
text-overflow: ellipsis;
128+
}
129+
.colors-item-text {
130+
font-size: 12px;
131+
overflow: hidden;
132+
white-space: nowrap;
133+
text-overflow: ellipsis;
134+
}
135+
.colors-item-copy {
136+
opacity: 0;
137+
position: absolute;
138+
left: 0;
139+
top: 0;
140+
z-index: -1;
141+
}
142+
143+
</style>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "color",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"type": "module",
7+
"scripts": {
8+
"build": "node generate"
9+
}
10+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[["@color-fill-primary","#1268fb"],["@color-fill-primary-hover","#0454dc"],["@color-fill-primary-active","#0343b0"],["@color-fill-secondary","#ecf0f8"],["@color-fill-secondary-hover","#e6ebf4"],["@color-fill-secondary-active","#ced7e4"],["@color-fill-nav","#19284b"],["@color-fill-nav-hover","#344e8c"],["@color-fill-nav-active","#253c70"],["@color-border-primary","#1268fb"],["@color-border-primary-hover","#0454dc"],["@color-border-primary-active","#0343b0"],["@color-border-secondary","#e6ebf4"],["@color-border-secondary-hover","#ced7e4"],["@color-border-secondary-active","#a5b2c5"],["@color-container-primary","#ffffff"],["@color-container-secondary","#f8f9fb"],["@color-container-hover","#ecf0f8"],["@color-container-active","#e6ebf4"],["@color-divider-primary","#ecf0f8"],["@color-divider-secondary","#e6ebf4"],["@color-overlay-primary","fade(@palette-gray-900,64%)"],["@color-overlay-secondary","fade(@palette-gray-900,80%)"],["@color-overlay-reverse","fade(@palette-white,80%)"],["@color-text-primary","#2f374c"],["@color-text-secondary","#546174"],["@color-text-tertiary","#8b99ae"],["@color-text-placeholder","#a5b2c5"],["@color-text-reverse","#ffffff"],["@color-success","#66c942"],["@color-success-hover","#49a82b"],["@color-success-active","#32671e"],["@color-success-bg","#eff9eb"],["@color-success-tag-bg","#d9f1d0"],["@color-success-background","#eff9eb"],["@color-danger","#e03b3b"],["@color-danger-hover","#ca1616"],["@color-danger-active","#7f2727"],["@color-danger-bg","#fce9e9"],["@color-danger-tag-bg","#ffd6d6"],["@color-danger-background","#fce9e9"],["@color-error","#e03b3b"],["@color-error-hover","#ca1616"],["@color-error-active","#7f2727"],["@color-error-bg","#fce9e9"],["@color-error-tag-bg","#ffd6d6"],["@color-error-background","#fce9e9"],["@color-failure","#e03b3b"],["@color-failure-hover","#ca1616"],["@color-failure-active","#7f2727"],["@color-failure-bg","#fce9e9"],["@color-failure-tag-bg","#ffd6d6"],["@color-failure-background","#fce9e9"],["@color-warning","#f29d41"],["@color-warning-hover","#ec8600"],["@color-warning-active","#844001"],["@color-warning-bg","#fff2e5"],["@color-warning-tag-bg","#ffdfc2"],["@color-warning-background","#fff2e5"],["@color-info-primary","#1268fb"],["@color-info-primary-hover","#0343b0"],["@color-info-primary-active","#023284"],["@color-info-primary-bg","#f1f6fe"],["@color-info-primary-tag-bg","#d5e4fe"],["@color-info-primary-background","#f1f6fe"],["@color-info-secondary","#a5b2c5"],["@color-info-secondary-hover","#546174"],["@color-info-secondary-active","#3b4759"],["@color-info-secondary-bg","#f8f9fb"],["@color-info-secondary-tag-bg","#ecf0f8"],["@color-info-secondary-background","#f8f9fb"],["@color-utility-bg1","#F8F8F8"],["@color-utility-content1","#FF4499"],["@color-utility-content2","#C344FF"],["@color-utility-text","#000000"],["@color-white","#ffffff"],["@color-black","#000000"],["@palette-white","#ffffff"],["@palette-black","#000000"],["@palette-green-100","#eff9eb"],["@palette-green-200","#d9f1d0"],["@palette-green-300","#bae8aa"],["@palette-green-400","#85d468"],["@palette-green-500","#66c942"],["@palette-green-600","#4dba2f"],["@palette-green-700","#49a82b"],["@palette-green-800","#32671e"],["@palette-green-900","#1e3f12"],["@palette-orange-100","#fff2e5"],["@palette-orange-200","#ffdfc2"],["@palette-orange-300","#fecb9a"],["@palette-orange-400","#feb978"],["@palette-orange-500","#f29d41"],["@palette-orange-600","#fe9412"],["@palette-orange-700","#ec8600"],["@palette-orange-800","#844001"],["@palette-orange-900","#522800"],["@palette-coral-100","#fbeeee"],["@palette-coral-200","#f7d4d4"],["@palette-coral-300","#f5a9a9"],["@palette-coral-400","#ff7070"],["@palette-coral-500","#f55353"],["@palette-coral-600","#d64747"],["@palette-coral-700","#b23d3d"],["@palette-coral-800","#802b2b"],["@palette-coral-900","#471f1f"],["@palette-red-100","#fce9e9"],["@palette-red-200","#ffd6d6"],["@palette-red-300","#f1a7a7"],["@palette-red-400","#e66262"],["@palette-red-500","#e03b3b"],["@palette-red-600","#dc1818"],["@palette-red-700","#ca1616"],["@palette-red-800","#7f2727"],["@palette-red-900","#460b0b"],["@palette-pink-100","#fceef3"],["@palette-pink-200","#f9dce6"],["@palette-pink-300","#f0a8c1"],["@palette-pink-400","#e3618e"],["@palette-pink-500","#dc3a72"],["@palette-pink-600","#bd2257"],["@palette-pink-700","#8e1941"],["@palette-pink-800","#5e112c"],["@palette-pink-900","#460c21"],["@palette-purple-100","#f5eefc"],["@palette-purple-200","#ebdcf9"],["@palette-purple-300","#cca8f0"],["@palette-purple-400","#a261e3"],["@palette-purple-500","#8b3adc"],["@palette-purple-600","#6f22bd"],["@palette-purple-700","#53198e"],["@palette-purple-800","#38115e"],["@palette-purple-900","#2a0c46"],["@palette-blue-100","#f1f6fe"],["@palette-blue-200","#d5e4fe"],["@palette-blue-300","#b0ccfb"],["@palette-blue-400","#3b82fc"],["@palette-blue-500","#1268fb"],["@palette-blue-600","#0454dc"],["@palette-blue-700","#0343b0"],["@palette-blue-800","#023284"],["@palette-blue-900","#012158"],["@palette-navy-100","#f2f4ff"],["@palette-navy-200","#e3e9ff"],["@palette-navy-300","#bdc9ff"],["@palette-navy-400","#6c89cc"],["@palette-navy-500","#4763a1"],["@palette-navy-600","#344e8c"],["@palette-navy-700","#253c70"],["@palette-navy-800","#19284b"],["@palette-navy-900","#121d36"],["@palette-gray-100","#f8f9fb"],["@palette-gray-200","#ecf0f8"],["@palette-gray-300","#e6ebf4"],["@palette-gray-400","#ced7e4"],["@palette-gray-500","#a5b2c5"],["@palette-gray-600","#8b99ae"],["@palette-gray-700","#546174"],["@palette-gray-800","#3b4759"],["@palette-gray-900","#2f374c"]]
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import fs from 'fs';
2+
import path from 'path';
3+
4+
export const formatLessVarToJs = (lessPath) => {
5+
let less = fs.readFileSync(lessPath, 'utf8');
6+
less = less.replace(/\s/g, '');
7+
less = less.split(';').filter((item) => item);
8+
let presetBox = {};
9+
const result = [];
10+
for (const item of less) {
11+
if (item.includes('@import')) {
12+
const reg = /"(.*?)"/;
13+
const suffix = item.match(reg)[1];
14+
const importPath = path.resolve(lessPath, '../', suffix);
15+
const importItem = formatLessVarToJs(importPath);
16+
presetBox = Object.fromEntries(importItem);
17+
} else {
18+
// eslint-disable-next-line prefer-const
19+
let [key, value] = item.split(':');
20+
if (value.startsWith('@')) {
21+
value = presetBox[value];
22+
}
23+
presetBox[key] = value;
24+
result.push([key, value]);
25+
}
26+
}
27+
return result;
28+
};

examples/docs/zh-CN/palette.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# 色板转换
2+
3+
- 色板转换
4+
5+
6+
<template>
7+
<Colors />
8+
</template>
9+
<script>
10+
import Colors from '../../components/palette/index.vue'
11+
export default {
12+
components: {
13+
Colors,
14+
},
15+
}
16+
17+
</script>

examples/nav.config.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,15 @@
3232
{
3333
"name": "组件",
3434
"groups": [
35+
{
36+
"groupName": "Tools",
37+
"list": [
38+
{
39+
"path": "/palette",
40+
"title": "色板"
41+
}
42+
]
43+
},
3544
{
3645
"groupName": "Basic",
3746
"list": [

0 commit comments

Comments
 (0)