Skip to content

Commit 2b86f63

Browse files
boxsnakeboxsnake
authored
Merge pull request #6 from kongying-tavern/feat/font-button
Reformat UI design
2 parents 392d5c6 + 7ab2293 commit 2b86f63

File tree

18 files changed

+172
-127
lines changed

18 files changed

+172
-127
lines changed

‎src/shared/configSettings.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ export type ConfigInputMethod =
1010
export interface Config {
1111
inputMethod: ConfigInputMethod;
1212
keyTransform: boolean;
13+
font: string;
1314
}

‎src/stores/counter.ts‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/views/pageTypewriter/PageTypewriter.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
<script setup lang="ts">
2-
import FontPicker from "./components/FontPicker.vue";
32
import TextPreview from "./components/TextPreview.vue";
43
import ConfigBar from "./components/ConfigBar.vue";
54
import InputArea from "./components/InputArea.vue";
65
</script>
76

87
<template>
98
<main class="flex flex-row fixed top-0 bottom-0 left-0 right-0">
10-
<div class="flex-1 p-3">
11-
<FontPicker></FontPicker>
12-
</div>
13-
<div class="flex flex-col flex-3 p-3 pl-0 space-y-3">
9+
<div class="flex flex-col flex-3 p-3 space-y-3">
1410
<TextPreview class="flex-auto"></TextPreview>
1511
<InputArea class="flex-none"></InputArea>
1612
<ConfigBar class="flex-none"></ConfigBar>

‎src/views/pageTypewriter/components/ConfigBar.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
import ButtonClean from "./ConfigBar/ButtonClean.vue";
33
import ButtonInputMethod from "./ConfigBar/ButtonInputMethod.vue";
44
import ButtonKeyTransform from "./ConfigBar/ButtonKeyTransform.vue";
5+
import ButtonFont from "./ConfigBar/ButtonFont.vue";
56
</script>
67

78
<template>
89
<div class="flex flex-row space-x-1">
910
<ButtonClean></ButtonClean>
1011
<ButtonInputMethod></ButtonInputMethod>
1112
<ButtonKeyTransform></ButtonKeyTransform>
13+
<ButtonFont></ButtonFont>
1214
</div>
1315
</template>

‎src/views/pageTypewriter/components/ConfigBar/ButtonClean.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script setup lang="ts">
22
import { useTextInput } from "../../hooks";
33
import ButtonBase from "./ButtonBase.vue";
4-
import SvgTrash from "./assets/trash.svg";
4+
import ImgTrash from "./assets/trash.svg";
55
66
const { clear } = useTextInput();
77
</script>
88

99
<template>
10-
<ButtonBase :icon-src="SvgTrash" @click="clear()"></ButtonBase>
10+
<ButtonBase :icon-src="ImgTrash" @click="clear()"></ButtonBase>
1111
</template>

‎src/views/pageTypewriter/components/ConfigBar/ButtonFont.vue‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<script setup lang="ts">
2+
import { ref, computed } from "vue";
3+
import type { ComputedRef } from "vue";
4+
import { useConfig } from "../../hooks";
5+
import ButtonBase from "./ButtonBase.vue";
6+
import ButtonDropdown from "./ButtonDropdown.vue";
7+
import ImgFontFamily from "./assets/font-family.svg";
8+
import ImgLogoGenshin from "./assets/logo-genshin.svg";
9+
import ImgLogoStarrail from "./assets/logo-starrail.svg";
10+
import ImgLogoZzz from "./assets/logo-zzz.svg";
11+
12+
interface FontNode {
13+
tag: string;
14+
label: string;
15+
abbr?: string;
16+
}
17+
18+
type FontGroupDisplayWidget = "icon" | "label";
19+
20+
interface FontGroupNode {
21+
id: string;
22+
label: string;
23+
icon?: string;
24+
displayWidgets: FontGroupDisplayWidget[];
25+
children: FontNode[];
26+
}
27+
28+
const fontOptions: FontGroupNode[] = [
29+
{
30+
id: "genshin",
31+
label: "原神",
32+
icon: ImgLogoGenshin,
33+
displayWidgets: ["icon"],
34+
children: [
35+
{ tag: "font-teyvat-regular", label: "提瓦特文字", abbr: "提瓦特文" },
36+
{ tag: "font-khaenriah-regular", label: "坎瑞亚文字", abbr: "坎瑞亚文" },
37+
{
38+
tag: "font-khaenriah-chasm",
39+
label: "坎瑞亚文字 - 层岩巨渊变体",
40+
abbr: "坎瑞亚文（层岩变体）",
41+
},
42+
{ tag: "font-inazuma-regular", label: "稻妻文字", abbr: "稻妻文" },
43+
{ tag: "font-sumeru-regular", label: "须弥文字", abbr: "须弥文" },
44+
{ tag: "font-deshret-regular", label: "赤冠文字", abbr: "赤冠文" },
45+
],
46+
},
47+
{
48+
id: "starrail",
49+
label: "崩坏·星穹铁道",
50+
icon: ImgLogoStarrail,
51+
displayWidgets: ["icon", "label"],
52+
children: [
53+
{ tag: "font-starrail-regular", label: "常规" },
54+
{ tag: "font-starrail-thin", label: "细体" },
55+
{ tag: "font-starrail-bold", label: "粗体" },
56+
],
57+
},
58+
{
59+
id: "zzz",
60+
label: "绝区零",
61+
icon: ImgLogoZzz,
62+
displayWidgets: ["icon"],
63+
children: [
64+
{ tag: "font-zzz-a", label: "变体一" },
65+
{ tag: "font-zzz-b", label: "变体二" },
66+
],
67+
},
68+
];
69+
70+
const { config } = useConfig();
71+
72+
const fontGroupKey = ref("genshin");
73+
74+
const fontGroupList: ComputedRef<FontNode[]> = computed(() => {
75+
let found = fontOptions.find((v) => v.id === fontGroupKey.value);
76+
return found?.children || [];
77+
});
78+
79+
const changeFontGroup = (groupKey: string) => {
80+
fontGroupKey.value = groupKey;
81+
};
82+
83+
const changeFont = (fontTag: string) => {
84+
config.value.font = fontTag;
85+
};
86+
</script>
87+
88+
<template>
89+
<ButtonDropdown @command="changeFont">
90+
<ButtonBase :icon-src="ImgFontFamily"></ButtonBase>
91+
<template #dropdown>
92+
<div class="flex flex-col">
93+
<div class="flex-none">
94+
<el-dropdown-menu>
95+
<el-dropdown-item
96+
v-for="font in fontGroupList"
97+
:key="font.tag"
98+
:command="font.tag"
99+
>
100+
{{ font.abbr || font.label }}
101+
</el-dropdown-item>
102+
</el-dropdown-menu>
103+
</div>
104+
<div class="group-area flex flex-row flex-none">
105+
<div
106+
v-for="fonts in fontOptions"
107+
:key="fonts.id"
108+
class="group-button cursor-pointer"
109+
:class="{ active: fontGroupKey === fonts.id }"
110+
@click="changeFontGroup(fonts.id)"
111+
>
112+
<img
113+
v-if="fonts.icon && fonts.displayWidgets.indexOf('icon') !== -1"
114+
class="label cursor-pointer"
115+
:src="fonts.icon"
116+
/>
117+
<label
118+
v-else-if="fonts.displayWidgets.indexOf('label') !== -1"
119+
class="label cursor-pointer"
120+
>
121+
{{ fonts.label }}
122+
</label>
123+
</div>
124+
</div>
125+
</div>
126+
</template>
127+
</ButtonDropdown>
128+
</template>
129+
130+
<style scoped lang="scss">
131+
.group-area {
132+
flex-wrap: wrap;
133+
background-color: #eee;
134+
135+
.group-button {
136+
padding: 0.5rem 0.7rem;
137+
.label {
138+
line-height: 2.2rem;
139+
height: 2.2rem;
140+
font-size: 1rem;
141+
}
142+
&.active {
143+
background-color: #dadada;
144+
}
145+
}
146+
}
147+
</style>

‎src/views/pageTypewriter/components/ConfigBar/ButtonInputMethod.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import ButtonDropdown from "./ButtonDropdown.vue";
77
import type { ConfigInputMethod } from "@/shared";
88
import { ConfigInputMethodEnum } from "@/shared";
99
import { useConfig } from "../../hooks";
10-
import SvgIBeam from "./assets/i-beam.svg";
11-
import SvgKeyboard from "./assets/keyboard.svg";
10+
import ImgIBeam from "./assets/i-beam.svg";
11+
import ImgKeyboard from "./assets/keyboard.svg";
1212
1313
interface inputMethodOption {
1414
icon: string;
@@ -18,12 +18,12 @@ interface inputMethodOption {
1818
1919
const inputMethodOptions: inputMethodOption[] = [
2020
{
21-
icon: SvgIBeam,
21+
icon: ImgIBeam,
2222
label: "文本输入",
2323
command: ConfigInputMethodEnum.TEXT,
2424
},
2525
{
26-
icon: SvgKeyboard,
26+
icon: ImgKeyboard,
2727
label: "键盘输入",
2828
command: ConfigInputMethodEnum.KEYBOARD,
2929
},
@@ -34,8 +34,8 @@ const { config } = useConfig();
3434
const iconPath: ComputedRef<string> = computed(() => {
3535
const fullPath =
3636
{
37-
[ConfigInputMethodEnum.TEXT]: SvgIBeam,
38-
[ConfigInputMethodEnum.KEYBOARD]: SvgKeyboard,
37+
[ConfigInputMethodEnum.TEXT]: ImgIBeam,
38+
[ConfigInputMethodEnum.KEYBOARD]: ImgKeyboard,
3939
}[config.value.inputMethod] || "";
4040
return fullPath as string;
4141
});

‎src/views/pageTypewriter/components/ConfigBar/ButtonKeyTransform.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useConfig } from "../../hooks";
33
import ButtonBase from "./ButtonBase.vue";
4-
import SvgTransformChar from "./assets/transform-char.svg";
4+
import ImgTransformChar from "./assets/transform-char.svg";
55
66
const { config } = useConfig();
77
@@ -12,7 +12,7 @@ const toggle = () => {
1212

1313
<template>
1414
<ButtonBase
15-
:icon-src="SvgTransformChar"
15+
:icon-src="ImgTransformChar"
1616
:active="config.keyTransform"
1717
@click="toggle()"
1818
>

‎src/views/pageTypewriter/components/ConfigBar/assets/font-family.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/views/pageTypewriter/components/ConfigBar/assets/logo-genshin.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)