Skip to content

Commit df8d2da

Browse files
FreecellRaidFreecellRaid
committed
refactor: 将帮助文档文本改为独立的配置文件，避免直接更改html
1 parent 1d3b4cf commit df8d2da

2 files changed

Lines changed: 293 additions & 167 deletions

File tree

‎src/components/common/HelpDocument.vue‎

Lines changed: 78 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -8,182 +8,62 @@
88
<div class="help-header">
99
<div class="header-title">
1010
<HelpCircle class="ui-icon" />
11-
<h2>帮助文档</h2>
11+
<h2>{{ helpDocument.title }}</h2>
1212
</div>
1313
<button
1414
class="close-button icon-interactive"
1515
type="button"
16-
title="关闭帮助 (Esc)"
16+
:title="helpDocument.closeTitle"
1717
@click="handleClose"
1818
>
1919
<X class="ui-icon" />
2020
</button>
2121
</div>
2222

2323
<div class="help-content">
24-
<section class="help-section">
25-
<div class="section-title">
26-
<Upload class="ui-icon" />
27-
<h3>文件导入</h3>
28-
</div>
29-
<ul class="tip-list">
30-
<li>
31-
<strong>拖入工作区</strong>
32-
- 任意时刻将文件拖入中间工作区即可导入
33-
</li>
34-
</ul>
35-
</section>
36-
37-
<section class="help-section">
38-
<div class="section-title">
39-
<MessageSquare class="ui-icon" />
40-
<h3>消息操作</h3>
41-
</div>
42-
<ul class="tip-list">
43-
<li>
44-
<strong>双击消息</strong>
45-
- 进入编辑，enter保存编辑
46-
</li>
47-
<li>
48-
<strong>拖拽消息</strong>
49-
- 移动消息
50-
</li>
51-
<li>
52-
<strong>Ctrl + 点击</strong>
53-
- 多选消息
54-
</li>
55-
<li>
56-
<strong>Shift + 点击</strong>
57-
- 范围选择
58-
</li>
59-
</ul>
60-
</section>
61-
62-
<section class="help-section">
63-
<div class="section-title">
64-
<FolderOpen class="ui-icon" />
65-
<h3>场景管理</h3>
66-
</div>
67-
<ul class="tip-list">
68-
<li>
69-
<strong>双击名称</strong>
70-
- 重命名
71-
</li>
72-
<li>
73-
<strong>拖拽场景</strong>
74-
- 移动场景
75-
</li>
76-
<li>
77-
<strong>向下合并</strong>
78-
- 合并相邻场景
79-
</li>
80-
</ul>
81-
</section>
82-
<section class="help-section">
83-
<div class="section-title">
84-
<UserRound class="ui-icon" />
85-
<h3>身份管理</h3>
86-
</div>
87-
<ul class="tip-list">
88-
<li>
89-
<strong>切换模式</strong>
90-
- 点击标题旁图标可在角色/账号模式间切换
91-
</li>
92-
<li>
93-
<strong>双击名称</strong>
94-
- 重命名身份，会同步更新所有关联消息
95-
</li>
96-
<li>
97-
<strong>下拉选择</strong>
98-
- 修改身份角色
99-
</li>
100-
<li>
101-
<strong>点击色块</strong>
102-
- 修改该身份的染色
103-
</li>
104-
</ul>
105-
</section>
106-
<section class="help-section">
107-
<div class="section-title">
108-
<Palette class="ui-icon" />
109-
<h3>染色规则</h3>
110-
</div>
111-
<ul class="tip-list">
112-
<li>
113-
<strong>优先级</strong>
114-
- 数字越大越优先，高优先级覆盖低优先级
115-
</li>
116-
<li>
117-
<strong>筛选条件</strong>
118-
- 文本字段支持逗号分隔多个关键词
119-
</li>
120-
<li>
121-
<strong>选区绑定</strong>
122-
- 可将当前选中的消息直接绑定到规则
123-
</li>
124-
</ul>
125-
</section>
126-
127-
<section class="help-section">
24+
<section
25+
v-for="section in helpDocument.sections"
26+
:key="section.title"
27+
class="help-section"
28+
>
12829
<div class="section-title">
129-
<TextInitial class="ui-icon" />
130-
<h3>导出模板占位符</h3>
30+
<component
31+
:is="iconComponents[section.icon]"
32+
class="ui-icon"
33+
/>
34+
<h3>{{ section.title }}</h3>
13135
</div>
132-
<ul class="tip-list">
133-
<li>
134-
<strong v-pre>{{ name }}</strong>
135-
- 角色名
136-
</li>
137-
<li>
138-
<strong v-pre>{{ account }}</strong>
139-
- 账号
140-
</li>
141-
<li>
142-
<strong v-pre>{{ content }}</strong>
143-
- 消息内容
144-
</li>
145-
<li>
146-
<strong v-pre>{{ time }}</strong>
147-
- 时间
148-
</li>
149-
<li>
150-
<strong>\t</strong>
151-
- 制表符
152-
</li>
153-
<li>
154-
<strong>\n</strong>
155-
- 换行符
36+
<ul v-if="section.type === 'tips'" class="tip-list">
37+
<li
38+
v-for="item in section.items"
39+
:key="item.term"
40+
>
41+
<strong>{{ item.term }}</strong>
42+
- {{ item.description }}
15643
</li>
15744
</ul>
158-
</section>
159-
160-
<section class="help-section">
161-
<div class="section-title">
162-
<Keyboard class="ui-icon" />
163-
<h3>快捷键</h3>
164-
</div>
165-
<div class="shortcut-grid">
45+
<div v-else class="shortcut-grid">
16646
<div
167-
v-for="shortcut in shortcuts"
47+
v-for="shortcut in section.items"
16848
:key="shortcut.key"
16949
class="shortcut-row"
17050
>
171-
<kbd>{{ shortcut.key }}</kbd>
172-
<span>{{ shortcut.desc }}</span>
51+
<kbd class="shortcut-key">{{ shortcut.key }}</kbd>
52+
<span>{{ shortcut.description }}</span>
17353
</div>
17454
</div>
17555
</section>
17656
</div>
17757

17858
<div class="help-footer">
17959
<a
180-
href="https://github.com/FreecellRaid/Freecell-log-studio"
60+
:href="helpDocument.footer.url"
18161
target="_blank"
18262
rel="noopener noreferrer"
18363
class="github-link"
18464
>
18565
<CodeXml class="ui-icon" />
186-
<span>GitHub 项目主页</span>
66+
<span>{{ helpDocument.footer.label }}</span>
18767
</a>
18868
</div>
18969
</div>
@@ -204,33 +84,64 @@ import {
20484
Upload,
20585
} from '@lucide/vue';
20686
import { useWindowStore } from '@/stores/windowStore';
87+
import helpDocumentJson from '@/data/helpDocument.json';
88+
89+
type HelpIconName =
90+
| 'Upload'
91+
| 'MessageSquare'
92+
| 'FolderOpen'
93+
| 'UserRound'
94+
| 'Palette'
95+
| 'TextInitial'
96+
| 'Keyboard';
97+
98+
type HelpTipSection = {
99+
type: 'tips';
100+
icon: HelpIconName;
101+
title: string;
102+
items: Array<{
103+
term: string;
104+
description: string;
105+
}>;
106+
};
107+
108+
type HelpShortcutSection = {
109+
type: 'shortcuts';
110+
icon: HelpIconName;
111+
title: string;
112+
items: Array<{
113+
key: string;
114+
description: string;
115+
}>;
116+
};
117+
118+
type HelpDocumentContent = {
119+
title: string;
120+
closeTitle: string;
121+
sections: Array<HelpTipSection | HelpShortcutSection>;
122+
footer: {
123+
url: string;
124+
label: string;
125+
};
126+
};
127+
128+
const helpDocument = helpDocumentJson as HelpDocumentContent;
129+
130+
const iconComponents = {
131+
Upload,
132+
MessageSquare,
133+
FolderOpen,
134+
UserRound,
135+
Palette,
136+
TextInitial,
137+
Keyboard,
138+
} satisfies Record<HelpIconName, unknown>;
207139
208140
const windowStore = useWindowStore();
209141
210142
function handleClose() {
211143
windowStore.closeHelpDocument();
212144
}
213-
214-
const shortcuts = [
215-
{ key: 'Ctrl + A', desc: '全选' },
216-
{ key: 'Esc', desc: '取消选择' },
217-
{ key: 'Ctrl + C', desc: '复制' },
218-
{ key: 'Ctrl + V', desc: '粘贴' },
219-
{ key: 'Ctrl + Z', desc: '撤销' },
220-
{ key: 'Ctrl + Y', desc: '重做' },
221-
{ key: 'Ctrl + E', desc: '合并' },
222-
{ key: 'Ctrl + ↑/↓', desc: '选中上/下一条' },
223-
{ key: 'Ctrl + D', desc: '选中相同发言人' },
224-
{ key: 'Ctrl + /', desc: '切换场内外' },
225-
{ key: 'Ctrl + \\', desc: '切换指令' },
226-
{ key: 'Ctrl + backspace', desc: '删除' },
227-
{ key: 'Enter', desc: '跳转到搜索结果' },
228-
{ key: 'Ctrl + S', desc: '保存' },
229-
{ key: 'Ctrl + P', desc: '导出预览' },
230-
{ key: 'Ctrl + B', desc: '切换左侧边栏' },
231-
{ key: 'Ctrl + I', desc: '切换右侧边栏' },
232-
{ key: 'Ctrl + K', desc: '打开帮助文档' },
233-
];
234145
</script>
235146

236147
<style scoped>
@@ -339,7 +250,7 @@ const shortcuts = [
339250
display: contents;
340251
}
341252
342-
.kbd {
253+
.shortcut-key {
343254
display: inline-block;
344255
padding: 2px 6px;
345256
font-family: 'Fira Code', monospace;

0 commit comments

Comments
 (0)