mirror of
https://github.com/CorentinTh/it-tools.git
synced 2026-05-13 13:56:43 +00:00
fix(text-to-styled-letters): Fix compilation errors and digital-related logic errors
This commit is contained in:
parent
734ae099a7
commit
32fa2c5357
3 changed files with 93 additions and 92 deletions
|
|
@ -1,4 +1,65 @@
|
|||
export const styledLetters = {
|
||||
interface StyledLetterMap { [key: string]: string[] }
|
||||
|
||||
export type StyleType =
|
||||
| 'bold'
|
||||
| 'italic'
|
||||
| 'boldItalic'
|
||||
| 'script'
|
||||
| 'boldScript'
|
||||
| 'fraktur'
|
||||
| 'doubleStruck'
|
||||
| 'sansSerif'
|
||||
| 'sansSerifBold'
|
||||
| 'sansSerifItalic'
|
||||
| 'sansSerifBoldItalic'
|
||||
| 'monospace';
|
||||
|
||||
export const STYLE_INDEX: Record<StyleType, number> = {
|
||||
bold: 0,
|
||||
italic: 1,
|
||||
boldItalic: 2,
|
||||
script: 3,
|
||||
boldScript: 4,
|
||||
fraktur: 5,
|
||||
doubleStruck: 6,
|
||||
sansSerif: 7,
|
||||
sansSerifBold: 8,
|
||||
sansSerifItalic: 9,
|
||||
sansSerifBoldItalic: 10,
|
||||
monospace: 11,
|
||||
};
|
||||
|
||||
export const DIGIT_STYLE_MAP: Record<StyleType, number | null> = {
|
||||
bold: 0,
|
||||
italic: null,
|
||||
boldItalic: 0,
|
||||
script: null,
|
||||
boldScript: null,
|
||||
fraktur: null,
|
||||
doubleStruck: 1,
|
||||
sansSerifBold: 3,
|
||||
sansSerifBoldItalic: 3,
|
||||
sansSerif: 2,
|
||||
sansSerifItalic: 2,
|
||||
monospace: 4,
|
||||
};
|
||||
|
||||
export const GREEK_STYLE_MAP: Record<StyleType, number | null> = {
|
||||
bold: 0,
|
||||
italic: 1,
|
||||
boldItalic: 2,
|
||||
script: null,
|
||||
boldScript: null,
|
||||
fraktur: null,
|
||||
doubleStruck: null,
|
||||
sansSerifBold: 3,
|
||||
sansSerifBoldItalic: 4,
|
||||
sansSerif: null,
|
||||
sansSerifItalic: 1,
|
||||
monospace: null,
|
||||
};
|
||||
|
||||
export const styledLetters: StyledLetterMap = {
|
||||
A: ['𝐀', '𝐴', '𝑨', '𝒜', '𝓐', '𝕬', '𝔸', '𝖠', '𝗔', '𝘈', '𝘼', '𝙰'],
|
||||
B: ['𝐁', '𝐵', '𝑩', 'ℬ', '𝓑', '𝕭', '𝔹', '𝖡', '𝗕', '𝘉', '𝘽', '𝙱'],
|
||||
C: ['𝐂', '𝐶', '𝑪', '𝒞', '𝓒', '𝕮', 'ℂ', '𝖢', '𝗖', '𝘊', '𝘾', '𝙲'],
|
||||
|
|
@ -54,7 +115,7 @@ export const styledLetters = {
|
|||
z: ['𝐳', '𝑧', '𝒛', '𝓏', '𝔃', '𝖟', '𝕫', '𝗓', '𝘇', '𝘻', '𝙯', '𝚣'],
|
||||
};
|
||||
|
||||
export const styledDigits = {
|
||||
export const styledDigits: StyledLetterMap = {
|
||||
0: ['𝟎', '𝟘', '𝟢', '𝟬', '𝟶'],
|
||||
1: ['𝟏', '𝟙', '𝟣', '𝟭', '𝟷'],
|
||||
2: ['𝟐', '𝟚', '𝟤', '𝟮', '𝟸'],
|
||||
|
|
@ -67,7 +128,7 @@ export const styledDigits = {
|
|||
9: ['𝟗', '𝟡', '𝟫', '𝟵', '𝟿'],
|
||||
};
|
||||
|
||||
export const styledGreek = {
|
||||
export const styledGreek: StyledLetterMap = {
|
||||
'Α': ['𝚨', '𝛢', '𝜜', '𝝖', '𝞐'], // Alpha
|
||||
'Β': ['𝚩', '𝛣', '𝜝', '𝝗', '𝞑'], // Beta
|
||||
'Γ': ['𝚪', '𝛤', '𝜞', '𝝘', '𝞒'], // Gamma
|
||||
|
|
|
|||
|
|
@ -1,56 +1,9 @@
|
|||
import { styledDigits, styledGreek, styledLetters } from './text-to-styled-letters.constants';
|
||||
import type { StyleType } from './text-to-styled-letters.constants';
|
||||
import { DIGIT_STYLE_MAP, GREEK_STYLE_MAP, STYLE_INDEX, styledDigits, styledGreek, styledLetters } from './text-to-styled-letters.constants';
|
||||
|
||||
export { textToStyledLetters };
|
||||
export type { StyleType };
|
||||
|
||||
// 样式类型定义
|
||||
type StyleType =
|
||||
| 'bold' // 粗体
|
||||
| 'italic' // 斜体
|
||||
| 'boldItalic' // 粗斜体
|
||||
| 'script' // 手写体
|
||||
| 'boldScript' // 粗手写体
|
||||
| 'fraktur' // 哥特体/Fraktur
|
||||
| 'doubleStruck' // 双线体/黑板粗体
|
||||
| 'sansSerif' // 无衬线
|
||||
| 'sansSerifBold' // 无衬线粗体
|
||||
| 'sansSerifItalic'// 无衬线斜体
|
||||
| 'sansSerifBoldItalic' // 无衬线粗斜体
|
||||
| 'monospace'; // 等宽
|
||||
|
||||
// 样式索引映射
|
||||
const STYLE_INDEX: Record<StyleType, number> = {
|
||||
bold: 0,
|
||||
italic: 1,
|
||||
boldItalic: 2,
|
||||
script: 3,
|
||||
boldScript: 4,
|
||||
fraktur: 5,
|
||||
doubleStruck: 6,
|
||||
sansSerif: 7,
|
||||
sansSerifBold: 8,
|
||||
sansSerifItalic: 9,
|
||||
sansSerifBoldItalic: 10,
|
||||
monospace: 11,
|
||||
};
|
||||
|
||||
// 希腊字母只有5种样式,需要特殊处理
|
||||
const GREEK_STYLE_MAP: Record<StyleType, number | null> = {
|
||||
bold: 0,
|
||||
italic: 1,
|
||||
boldItalic: 2,
|
||||
script: null, // 希腊字母无此样式
|
||||
boldScript: null, // 希腊字母无此样式
|
||||
fraktur: null, // 希腊字母无此样式
|
||||
doubleStruck: null, // 希腊字母无此样式
|
||||
sansSerifBold: 3, // 映射到 sans-serif bold
|
||||
sansSerifBoldItalic: 4, // 映射到 sans-serif bold italic
|
||||
// 以下映射到最接近的可用样式
|
||||
sansSerif: 3, // 无 sans-serif regular,用 bold 代替
|
||||
sansSerifItalic: 4, // 无 sans-serif italic,用 bold italic 代替
|
||||
monospace: null, // 希腊字母无等宽
|
||||
};
|
||||
|
||||
function textToStyledLetters({
|
||||
text,
|
||||
style,
|
||||
|
|
@ -59,43 +12,30 @@ function textToStyledLetters({
|
|||
style: StyleType
|
||||
}): string {
|
||||
const latinIndex = STYLE_INDEX[style];
|
||||
const digitIndex = DIGIT_STYLE_MAP[style];
|
||||
const greekIndex = GREEK_STYLE_MAP[style];
|
||||
|
||||
const converters = [
|
||||
{ map: styledLetters, index: latinIndex },
|
||||
{ map: styledDigits, index: digitIndex },
|
||||
{ map: styledGreek, index: greekIndex },
|
||||
];
|
||||
|
||||
let result = '';
|
||||
|
||||
for (const char of text) {
|
||||
let converted = false;
|
||||
let styled: string | undefined;
|
||||
|
||||
// 尝试匹配拉丁字母(大写或小写)
|
||||
if (styledLetters[char]) {
|
||||
const styled = styledLetters[char][latinIndex];
|
||||
if (styled) {
|
||||
result += styled;
|
||||
converted = true;
|
||||
}
|
||||
}
|
||||
// 尝试匹配数字
|
||||
else if (styledDigits[char]) {
|
||||
// 数字只有7种样式(索引0-6),超出范围需要处理
|
||||
const digitIndex = latinIndex <= 6 ? latinIndex : null;
|
||||
if (digitIndex !== null && styledDigits[char][digitIndex]) {
|
||||
result += styledDigits[char][digitIndex];
|
||||
converted = true;
|
||||
}
|
||||
}
|
||||
// 尝试匹配希腊字母
|
||||
else if (styledGreek[char] && greekIndex !== null) {
|
||||
const styled = styledGreek[char][greekIndex];
|
||||
if (styled) {
|
||||
result += styled;
|
||||
converted = true;
|
||||
for (const { map, index } of converters) {
|
||||
if (index !== null) {
|
||||
styled = map[char]?.[index];
|
||||
if (styled) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 无法转换,照抄原字符
|
||||
if (!converted) {
|
||||
result += char;
|
||||
}
|
||||
result += styled || char;
|
||||
}
|
||||
|
||||
return result;
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@ const input = ref('');
|
|||
const selectedStyle = ref<StyleType>('bold');
|
||||
|
||||
const styleOptions: { label: string; value: StyleType }[] = [
|
||||
{ label: 'Bold', value: 'bold' },
|
||||
{ label: 'Italic', value: 'italic' },
|
||||
{ label: 'Bold Italic', value: 'boldItalic' },
|
||||
{ label: 'Script', value: 'script' },
|
||||
{ label: 'Bold Script', value: 'boldScript' },
|
||||
{ label: 'Fraktur', value: 'fraktur' },
|
||||
{ label: 'Double-Struck', value: 'doubleStruck' },
|
||||
{ label: 'Sans-Serif', value: 'sansSerif' },
|
||||
{ label: 'Sans-Serif Bold', value: 'sansSerifBold' },
|
||||
{ label: 'Sans-Serif Italic', value: 'sansSerifItalic' },
|
||||
{ label: 'Sans-Serif Bold Italic', value: 'sansSerifBoldItalic' },
|
||||
{ label: 'Monospace', value: 'monospace' },
|
||||
{ label: '𝐛𝐨𝐥𝐝', value: 'bold' },
|
||||
{ label: '𝑖𝑡𝑎𝑙𝑖𝑐', value: 'italic' },
|
||||
{ label: '𝒃𝒐𝒍𝒅 𝒊𝒕𝒂𝒍𝒊𝒄', value: 'boldItalic' },
|
||||
{ label: '𝒮𝒸𝓇𝒾𝓅𝓉', value: 'script' },
|
||||
{ label: '𝓑𝓸𝓵𝓭 𝓢𝓬𝓻𝓲𝓹𝓽', value: 'boldScript' },
|
||||
{ label: '𝔉𝔯𝔞𝔨𝔱𝔲𝔯', value: 'fraktur' },
|
||||
{ label: '𝔻𝕠𝕦𝕓𝕝𝕖-𝕊𝕥𝕣𝕦𝕔𝕜', value: 'doubleStruck' },
|
||||
{ label: '𝖲𝖺𝗇𝗌-𝖲𝖾𝗋𝗂𝖿', value: 'sansSerif' },
|
||||
{ label: '𝗦𝗮𝗻𝘀-𝗦𝗲𝗿𝗶𝗳 𝗕𝗼𝗹𝗱', value: 'sansSerifBold' },
|
||||
{ label: '𝘚𝘢𝘯𝘴-𝘚𝘦𝘳𝘪𝘧 𝘐𝘵𝘢𝘭𝘪𝘤', value: 'sansSerifItalic' },
|
||||
{ label: '𝙎𝙖𝙣𝙨-𝙎𝙚𝙧𝙞𝙛 𝘽𝙤𝙡𝙙 𝙄𝙩𝙖𝙡𝙞𝙘', value: 'sansSerifBoldItalic' },
|
||||
{ label: '𝙼𝚘𝚗𝚘𝚜𝚙𝚊𝚌𝚎', value: 'monospace' },
|
||||
];
|
||||
|
||||
const styledText = computed(() =>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue