Skip to content

Commit 13cb5f6

Browse files
dxhuiidxhuii
committed
feat: 转换颜色和简繁转换改到本地
1 parent 9b0709c commit 13cb5f6

File tree

12 files changed

+1651
-975
lines changed

12 files changed

+1651
-975
lines changed

‎docs/.vitepress/config.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
33
import { defineConfig } from 'vitepress'
44
import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
55
import { version } from '../../package.json'
6+
import { appDescription, appName } from '../constants'
67
import vite from './vite.config'
78

89
const VUE: DefaultTheme.NavItemWithLink[] = [
@@ -18,12 +19,11 @@ const REACT: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildren)[] = [
1819
{ text: '简体中文', link: 'https://zh-hans-react.cms.im' },
1920
]
2021

21-
const title = '内容管理'
22-
const description = '内容管理，收集优秀的开源文档'
22+
const title = '内容管理系统'
2323

2424
export default defineConfig({
2525
title,
26-
description,
26+
description: appDescription,
2727
markdown: {
2828
theme: {
2929
light: 'vitesse-light',
@@ -84,14 +84,14 @@ export default defineConfig({
8484
head: [
8585
['link', { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }],
8686
['meta', { name: 'author', content: 'Dxh' }],
87-
['meta', { property: 'og:title', content: title }],
87+
['meta', { property: 'og:title', content: appName }],
8888
['meta', { property: 'og:type', content: 'website' }],
8989
['meta', { property: 'og:image', content: '/favicon.svg' }],
90-
['meta', { property: 'og:description', content: description }],
90+
['meta', { property: 'og:description', content: appDescription }],
9191
['meta', { name: 'twitter:card', content: 'summary_large_image' }],
9292
['meta', { name: 'twitter:image', content: '/favicon.svg' }],
93-
['meta', { name: 'twitter:title', content: title }],
94-
['meta', { name: 'twitter:description', content: description }],
93+
['meta', { name: 'twitter:title', content: appName }],
94+
['meta', { name: 'twitter:description', content: appDescription }],
9595
['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, viewport-fit=cover' }],
9696
['script', { 'src': 'https://d.vv.chat/script.js', 'defer': 'true', 'data-website-id': '691ab4f0-9191-40bb-8b3c-da5d2ffb3ab1' }],
9797
],

‎docs/components/rgb2hex.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
const r2h = ref({ r: 255, g: 180, b: 0 })
5+
const hex = ref('#ffb400')
6+
const h = ref('#cc00ff')
7+
const rgb = ref([204, 0, 255])
8+
9+
/**
10+
* rgb转16进制
11+
*/
12+
function rgb2hex() {
13+
const { r, g, b } = r2h.value
14+
const rgb = (r << 16) | (g << 8) | b
15+
hex.value = `#${rgb.toString(16).padStart(6, '0')}`
16+
}
17+
// 16进制转rgb
18+
function hex2rgb() {
19+
rgb.value = h.value.replace('#', '').match(/../g).map(n => Number.parseInt(n, 16))
20+
}
21+
</script>
22+
23+
<template>
24+
<main flex="~ col" items-center justify-center bg-gray-100 p-4 py-8 rounded-md>
25+
<div flex="~">
26+
RGB颜色值转换成十六进制颜色码：<div mr4 inline-block w-10 px4 :style="{ backgroundColor: hex }" />
27+
<input v-model="hex" type="text" w-40 border border-base px2>
28+
</div>
29+
<div flex="~ col" mt4>
30+
<div flex="~ gap4">
31+
<input v-model="r2h.r" type="number" w-20 border-1 border-style-solid border-color-gray-300 bg-white px2>
32+
<input v-model="r2h.g" type="number" w-20 border-1 border-style-solid border-color-gray-300 bg-white px2>
33+
<input v-model="r2h.b" type="number" w-20 border-1 border-style-solid border-color-gray-300 bg-white px2>
34+
<button btn-primary flex items-center justify-center rounded-full @click="rgb2hex">
35+
转换
36+
</button>
37+
</div>
38+
</div>
39+
<div flex="~" mt8>
40+
十六进制颜色码转换成RGB颜色值：<div mr4 inline-block w-10 px4 :style="{ backgroundColor: `rgb(${rgb})` }" />
41+
<input v-model="rgb" type="text" w-30 border-1 border-style-solid border-color-gray-300 bg-white px2>
42+
</div>
43+
<div flex="~ gap4" mt4>
44+
<input v-model="h" type="text" border-1 border-style-solid border-color-gray-300 bg-white px2>
45+
<button btn-primary flex items-center justify-center rounded-full @click="hex2rgb">
46+
转换
47+
</button>
48+
</div>
49+
</main>
50+
</template>

‎docs/components/simple2traditional.vue

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<script setup>
2+
import { toSimplified, toTraditional } from 'chinese-simple2traditional'
3+
import { setupEnhance } from 'chinese-simple2traditional/enhance' // 注入短语库
4+
import { ref } from 'vue'
5+
import { useTextareaAutosize } from '@vueuse/core'
6+
import { isCopy, copy } from '../utils'
7+
8+
const { textarea, input } = useTextareaAutosize()
9+
10+
setupEnhance()
11+
12+
const type = ref('s2t')
13+
const isEnhance = ref(false)
14+
const output = ref('')
15+
const time = ref(0)
16+
17+
function toggleType() {
18+
type.value = type.value === 's2t' ? 't2s' : 's2t'
19+
convert()
20+
}
21+
22+
function toggleEnhance() {
23+
convert()
24+
}
25+
26+
function convert() {
27+
const text = input.value
28+
const begin = performance.now()
29+
const result = type.value === 't2s' ? toTraditional(text, isEnhance.value) : toSimplified(text, isEnhance.value)
30+
31+
output.value = result.replace(/\n/g, '<br>')
32+
33+
time.value = Number.parseFloat((performance.now() - begin).toFixed(2))
34+
}
35+
36+
async function paste() {
37+
const text = await navigator.clipboard.readText()
38+
input.value = text
39+
convert()
40+
}
41+
</script>
42+
43+
<template>
44+
<main flex="~ col" items-center justify-center>
45+
<div text-4xl font-bold>
46+
在线繁体字转换工具
47+
</div>
48+
<header mt-4 flex items-center gap-4 text-base>
49+
<p flex items-center gap4 class="langs" :class="{ reverse: type === 's2t' }">
50+
<span>简体</span>
51+
<button id="toggle" type="button" h12 flex cursor-pointer items-center border-none bg-transparent text-5xl text-gray-900 outline-0 dark:text-gray-200 @click="toggleType">
52+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
53+
<path fill="currentColor" d="M16.5 17.5h-9a5.5 5.5 0 1 1 0-11h9a5.5 5.5 0 1 1 0 11" opacity="0.5" />
54+
<circle cx="7.5" cy="12" r="2.5" fill="currentColor" />
55+
</svg>
56+
</button>
57+
<span>繁体</span>
58+
</p>
59+
<label flex items-center for="enhance"><span mr1>启用短语库增强</span>
60+
<input id="enhance" v-model="isEnhance" type="checkbox" hidden @change="toggleEnhance">
61+
<div v-if="!isEnhance" i-ri:checkbox-blank-line />
62+
<div v-else i-ri:checkbox-line />
63+
</label>
64+
<button type="button" @click="copy(output.replace(/<br>/g, '\n'))">
65+
{{ isCopy ? '已复制' : '复制' }}
66+
</button>
67+
<button type="button" @click="paste">
68+
粘贴
69+
</button>
70+
<button type="button" @click="input = '';output = ''; time = 0">
71+
清空
72+
</button>
73+
</header>
74+
<div class="box border-2 border-[#e6eeff] border-solid" relative w-full flex of-hidden rounded-lg>
75+
<textarea id="input" ref="textarea" v-model="input" resize-none dark:text-black @input="convert" />
76+
<p id="output" dark:text-black v-html="output" />
77+
</div>
78+
<p pb16 pl3 pt4 text-sm>
79+
共 {{ input?.length || 0 }} 字，耗时 {{ time }}ms
80+
</p>
81+
</main>
82+
</template>
83+
84+
<style>
85+
.langs #toggle svg circle {
86+
transition: all 0.3s ease;
87+
}
88+
89+
.langs.reverse #toggle svg circle {
90+
cx: 16.5;
91+
}
92+
93+
.box {
94+
background:
95+
linear-gradient(0deg, #f4f7ff, #f4f7ff), linear-gradient(94.84deg, #fff 3.78%, #fcfdff 9.75%, #e6eeff 102.09%),
96+
linear-gradient(126.58deg, #fff -18.12%, hsla(0, 0%, 100%, 0) 26.77%);
97+
}
98+
99+
.box::before {
100+
content: '';
101+
position: absolute;
102+
top: 20px;
103+
bottom: 20px;
104+
left: 50%;
105+
width: 0px;
106+
border-left: dashed 3px #e6eeff;
107+
}
108+
109+
#input {
110+
display: block;
111+
flex: 1;
112+
height: 100%;
113+
min-height: 300px;
114+
border: none;
115+
background-color: transparent;
116+
padding: 20px;
117+
outline: 0;
118+
font-size: 20px;
119+
line-height: 32px;
120+
}
121+
122+
#output {
123+
flex: 1;
124+
min-height: 300px;
125+
padding: 20px;
126+
font-size: 20px;
127+
line-height: 32px;
128+
word-break: break-all;
129+
}
130+
</style>

‎docs/constants/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const appName = '内容管理系统 Content Management System'
2+
export const appDescription = '内容管理系统 Content Management System，收集各大开源项目的文档，cms的文档等，方便大家学习和使用。'

‎docs/index.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
layout: home
3-
title: "内容管理 - Cms.im"
3+
title: 内容管理系统 Content Management System
44

55
hero:
6-
name: "内容管理"
6+
name: 内容管理系统
77
text: 收集优秀的开源文档
88
tagline: 使用比较多的开源项目
99
actions:
@@ -87,9 +87,9 @@ features:
8787
- icon: <span class="i-carbon:connection-two-way" />
8888
title: Simple to Traditional
8989
details: 在线繁体字转换工具
90-
link: https://www.cang.im/simple2traditional
90+
link: /simple2traditional
9191
- icon: <span class="i-carbon:color-palette" />
9292
title: RGB转十六进制
9393
details: RGB颜色值与十六进制颜色码转换工具
94-
link: https://www.cang.im/rgb2hex
94+
link: /rgb2hex
9595
---

‎docs/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@shikijs/vitepress-twoslash": "catalog:",
1414
"@unocss/reset": "catalog:",
1515
"@vueuse/core": "catalog:",
16+
"chinese-simple2traditional": "catalog:",
1617
"floating-vue": "catalog:",
1718
"pinia": "catalog:",
1819
"unocss": "catalog:",

‎docs/public/favicon.ico

10.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)