在这个寻常的一天，阳光透过窗帘的缝隙，洒在我的办公桌上，给这略显拥挤的空间带来一丝温暖。我坐在电脑前，心中原本满是对全能色彩转换器的期待与热情，那是一个我梦想中的在线工具，能够一键转换任何色彩，为设计师和爱好者们带来极大的便利。然而，今天的工作却像是不期而至的风暴，突然席卷了我的计划。
一桩接一桩的工作任务如同潮水般涌来，让我不得不暂时放下手中的“摸鱼”项目，投入到那些繁琐却不得不做的日常事务中。尽管如此，每当键盘敲击声暂停的间隙，我的思绪还是会不由自主地飘向那个未完成的色彩转换器，想象着它最终呈现的模样，以及它可能为用户带来的惊喜。
但就在这忙碌与期待交织的午后，一个意外的消息如同一缕清风，吹散了我心头的阴霾——工资到账了。那一刻，无论是作为打工人的疲惫，还是对公司现状的隐隐担忧，似乎都被这份实实在在的收入所冲淡。我意识到，无论生活给予多少挑战，这份辛勤劳动换来的报酬，总能成为我们继续前行的动力。
然而，喜悦之余，我也无法忽视公司正在经历的变化。从最初的一整栋楼，到如今只剩下一层的四分之一的空间，每一次场地的缩减都像是在无声地诉说着公司的落寞。我亲眼见证了这一切，心中难免有些五味杂陈。有时，我会忍不住猜测，到了九月，公司的场地是否真的会缩减至零？但转念一想，这样的担忧似乎也无济于事，不如珍惜当下，做好自己的工作。
终于，随着最后一项工作任务的完成，我长舒一口气，仿佛卸下了千斤重担。下班后，我迫不及待地回到家中，再次打开了电脑，继续我未完成的全能色彩转换器。这一刻，所有的烦恼似乎都离我远去，只剩下对编程的热爱和对未来的憧憬。我沉浸在代码的世界里，每一个字符都像是跳跃的音符，编织出一首关于梦想与坚持的乐章。
夜深人静时，我终于完成了这个色彩转换器的初步版本。虽然还有很多地方需要完善，但看着它在我的手中逐渐成形，一种难以言喻的成就感油然而生。我轻轻地关上电脑，躺在床上，心中充满了对未来的期待。或许到了九月，我真的会如自己所猜想的那样，拿着赔偿在家躺平，但无论如何，我都不会忘记这份对技术的热爱和对梦想的追求。因为我知道，只要心中有光，无论身处何方，都能照亮前行的道路。
<template>
<tool-info :tool="tool" :readme="VueComponent">
<template #body>
<el-card shadow="never">
<el-form label-width="auto">
<div v-for="color in colorList">
<el-row v-if="color.isScale(scales.picker)" justify="center">
<el-col :xs="24" :sm="16" :md="16">
<el-form-item :label="color.name">
<el-color-picker v-model="color.value" @change="(value: string) => update(value)"/>
</el-form-item>
</el-col>
</el-row>
<el-row v-else justify="center">
<el-col :xs="24" :sm="16" :md="16">
<el-form-item :label="color.name">
<el-input v-model="color.value" @change="(value:string) => update(value)"/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-card>
</template>
</tool-info>
</template>
<script setup lang="ts">
import { tool } from './index';
import ToolInfo from '@/components/ToolInfo.vue';
import {VueComponent} from './README.md';
import { ref} from 'vue';
import {colors,scales} from './color-type';
import {color} from './color-type';
const colorList = ref<color[]>(colors);
function update(value : string) {
colorList.value.forEach((c) => {
const col = c as color;
col.color = value;
})
colorList.value
}
</script>
import { Colord,colord,extend} from 'colord';
import cmykPlugin from 'colord/plugins/cmyk';
import hwbPlugin from 'colord/plugins/hwb';
import namesPlugin from 'colord/plugins/names';
import lchPlugin from 'colord/plugins/lch';
import { toRaw } from 'vue';
extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
export class color {
/**
* 单位类型
*/
private _scale: scale;
private _vulue?: string;
/**
* 颜色对象
*/
private _color: Colord;
constructor(scale: scale, input: string) {
this._scale = scale;
this._color = colord(input);
this._vulue = this.scale.format(this._color);
}
/**
* 类型
*
* @returns 类型
*/
get scale(): scale {
return this._scale;
}
set scale(scale: scale) {
this.scale = scale;
}
/**
* 标题
*
* @returns 标题
*/
get name(): string|undefined {
return this.scale?.name;
}
/**
* 获取当前值
*
* @returns 当前值
*/
get color(): Colord {
return this._color;
}
set color(value: string) {
const col = colord(value);
if(col.isValid()){
this._color = col;
this.value = this.scale?.format(this.color);
}
}
get value(): string|undefined{
return this._vulue;
}
set value(value: string) {
this._vulue = value;
}
/**
* 判断颜色是否相等
*
* @param temperature 颜色
* @returns 是否相等
*/
equalsValue(color: color): boolean {
return color.value === this.value;
}
/**
* 判断两个类型是否相等
*
* @param color 颜色
* @returns 是否相等
*/
equalsScale(color: color): boolean {
return color.scale === this.scale;
}
isScale(scale: scale): boolean {
const inputScale = toRaw(scale);
const tempScale = toRaw(this._scale);
return inputScale === tempScale;
}
}
export interface scale {
/**
* 名称
*/
name: string;
/**
* 格式化
* @param value 颜色
* @returns 格式化后的颜色
*/
format: (value: Colord) => string;
}
const scales: { [key: string]: scale } = {
picker:{name:'取色器',format: (v: Colord) => v.toHex(),},
hex:{name:'十六进制',format: (v: Colord) => v.toHex(),},
rgb:{name:'rgb', format: (v: Colord) => v.toRgbString(),},
hsl:{name:'hsl', format: (v: Colord) => v.toHslString()},
hwb:{name:'hwb',format: (v: Colord) => v.toHwbString()},
lch:{name:'lch',format: (v: Colord) => v.toLchString(),},
cmyk:{name:'cmyk',format: (v: Colord) => v.toCmykString(),},
name:{name:'名称',format:(v: Colord) => v.toName({ closest: true }) ?? 'Unknown',}
};
const colors: color[] = Object.entries(scales).map(([_, scale]) => new color(scale,"#000000"));
export {colors,scales};
