KDS-222, re-check all color (#174)

Author: xuejunnan

examples/components/palette/generate.js

@@ -0,0 +1,8 @@
+import fs from 'fs';
+
+import { formatLessVarToJs } from './utils.js';
+
+const palette = formatLessVarToJs('../../../packages/theme-chalk/src/common/basic/palette.less');
+const color = formatLessVarToJs('../../../packages/theme-chalk/src/common/basic/color.less');
+
+fs.writeFileSync('./paletteLess.json', JSON.stringify([...color, ...palette]));

examples/components/palette/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <el-input placeholder="请输入" v-model="value" @input="handleChange" />
+    <div class="colors-list">
+      <div
+        v-for="palette in filteredPalette"
+        :key="palette[0]"
+        class="colors-item"
+        @click="copyTkl(palette[0])"
+      >
+        <div class="colors-item-bg" :style="{ background: palette[1] }"></div>
+        <div class="colors-item-text">{{ palette[1] }}</div>
+        <div class="colors-item-name">{{ palette[0] }}</div>
+        <input class="colors-item-copy" :value="palette[0]" :id="palette[0]" readonly />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Input } from 'kyligence-ui';
+import paletteLess from './paletteLess.json';
+
+export default {
+  name: 'Colors',
+  components: {
+    ElInput: Input
+  },
+  data() {
+    return {
+      value: ''
+    };
+  },
+  computed: {
+    filteredPalette() {
+      const arr = this.processArray(paletteLess);
+      return arr.filter(([name, color]) => {
+        let lowerValue = this.value.toLowerCase().replace(/\s/g, '').replace(/\//g, '-');
+        if (lowerValue.startsWith('function-')) {
+          const splitValue = lowerValue.split('-');
+          let end = 1;
+          if (splitValue[1] === splitValue[2]) {
+            end = 2;
+          }
+          splitValue.splice(0, end);
+          lowerValue = splitValue.join('-');
+        }
+        return name.includes(lowerValue) || color.includes(lowerValue);
+      });
+    }
+  },
+  methods: {
+    handleChange(value) {
+      this.value = value;
+    },
+    processArray(arr) {
+      const colors = new Set(); // 用于存储已出现的颜色值
+      const result = [];
+      for (let i = 0; i < arr.length; i++) {
+        const item = arr[i];
+        if (colors.has(item[1])) { // 如果颜色已经出现过
+          if (item[0].startsWith('@color-')) {
+            result.push(item);
+          }
+        } else {
+          colors.add(item[1]);
+          result.push(item); // 添加到结果数组
+        }
+      }
+      return result;
+    },
+    copyTkl(name) {
+      const input = document.getElementById(name);
+      input.select();
+      document.execCommand('copy');
+      this.$message.success(`复制成功：${name}`);
+    }
+  }
+};
+</script>
+
+<style>
+.colors-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+.colors-item {
+  position: relative;
+  flex-shrink: 0;
+  width: 18%;
+  height: 100px;
+  margin: 3px 2.5% 3px 0;
+  padding: 10px;
+  overflow: hidden;
+  text-align: center;
+  list-style: none;
+  background-color: inherit;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: rgba(240, 240, 240, 0.5);
+  color: #666;
+  box-sizing: border-box;
+
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+.colors-item:nth-child(5n) {
+  margin-right: 0;
+}
+.colors-item:hover {
+  color: #fff;
+  background-color: #0875da;
+}
+
+.colors-item-bg {
+  width: 80%;
+  height: 24px;
+}
+.colors-item-name {
+  font-size: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.colors-item-text {
+  font-size: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.colors-item-copy {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+
+</style>

examples/components/palette/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "color",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "node generate"
+  }
+}

examples/components/palette/paletteLess.json

@@ -0,0 +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"]]

examples/components/palette/utils.js

@@ -0,0 +1,28 @@
+import fs from 'fs';
+import path from 'path';
+
+export const formatLessVarToJs = (lessPath) => {
+  let less = fs.readFileSync(lessPath, 'utf8');
+  less = less.replace(/\s/g, '');
+  less = less.split(';').filter((item) => item);
+  let presetBox = {};
+  const result = [];
+  for (const item of less) {
+    if (item.includes('@import')) {
+      const reg = /"(.*?)"/;
+      const suffix = item.match(reg)[1];
+      const importPath = path.resolve(lessPath, '../', suffix);
+      const importItem = formatLessVarToJs(importPath);
+      presetBox = Object.fromEntries(importItem);
+    } else {
+      // eslint-disable-next-line prefer-const
+      let [key, value] = item.split(':');
+      if (value.startsWith('@')) {
+        value = presetBox[value];
+      }
+      presetBox[key] = value;
+      result.push([key, value]);
+    }
+  }
+  return result;
+};

examples/docs/zh-CN/palette.md

@@ -0,0 +1,17 @@
+# 色板转换
+
+- 色板转换
+
+
+<template>
+   <Colors />
+</template>
+<script>
+import Colors from '../../components/palette/index.vue'
+export default {
+  components: {
+    Colors,
+  },
+}
+
+</script>

examples/nav.config.json

@@ -32,6 +32,15 @@
     {
       "name": "组件",
       "groups": [
+        {
+          "groupName": "Tools",
+          "list": [
+            {
+              "path": "/palette",
+              "title": "色板"
+            }
+          ]
+        },
         {
           "groupName": "Basic",
           "list": [