Skip to content

Commit bdec7f0

Browse files
FreecellRaidFreecellRaid
committed
doc: 新增使用说明
1 parent 17b58b0 commit bdec7f0

1 file changed

Lines changed: 263 additions & 20 deletions

File tree

‎src/components/common/HelpDocument.vue‎

Lines changed: 263 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,145 @@
2121
</div>
2222

2323
<div class="help-content">
24-
<slot>
25-
<div class="placeholder-text">
26-
此处为帮助文档内容，支持快捷键列表、操作说明等。
24+
<section class="help-section">
25+
<div class="section-title">
26+
<MessageSquare class="ui-icon" />
27+
<h3>消息操作</h3>
2728
</div>
28-
</slot>
29+
<ul class="tip-list">
30+
<li>
31+
<strong>悬停消息</strong>
32+
- 显示操作按钮
33+
</li>
34+
<li>
35+
<strong>拖拽消息</strong>
36+
- 移动消息
37+
</li>
38+
<li>
39+
<strong>Ctrl/Cmd + 点击</strong>
40+
- 多选消息
41+
</li>
42+
<li>
43+
<strong>Shift + 点击</strong>
44+
- 范围选择
45+
</li>
46+
</ul>
47+
</section>
48+
49+
<section class="help-section">
50+
<div class="section-title">
51+
<FolderOpen class="ui-icon" />
52+
<h3>场景管理</h3>
53+
</div>
54+
<ul class="tip-list">
55+
<li>
56+
<strong>双击名称</strong>
57+
- 重命名
58+
</li>
59+
<li>
60+
<strong>拖拽场景</strong>
61+
- 移动场景
62+
</li>
63+
<li>
64+
<strong>向下合并</strong>
65+
- 合并相邻场景
66+
</li>
67+
</ul>
68+
</section>
69+
<section class="help-section">
70+
<div class="section-title">
71+
<UserRound class="ui-icon" />
72+
<h3>身份管理</h3>
73+
</div>
74+
<ul class="tip-list">
75+
<li>
76+
<strong>切换模式</strong>
77+
- 点击标题旁图标可在角色/账号模式间切换
78+
</li>
79+
<li>
80+
<strong>双击名称</strong>
81+
- 重命名身份，会同步更新所有关联消息
82+
</li>
83+
<li>
84+
<strong>下拉选择</strong>
85+
- 修改身份角色
86+
</li>
87+
<li>
88+
<strong>点击色块</strong>
89+
- 修改该身份的染色
90+
</li>
91+
</ul>
92+
</section>
93+
<section class="help-section">
94+
<div class="section-title">
95+
<Palette class="ui-icon" />
96+
<h3>染色规则</h3>
97+
</div>
98+
<ul class="tip-list">
99+
<li>
100+
<strong>优先级</strong>
101+
- 数字越大越优先，高优先级覆盖低优先级
102+
</li>
103+
<li>
104+
<strong>筛选条件</strong>
105+
- 文本字段支持逗号分隔多个关键词
106+
</li>
107+
<li>
108+
<strong>选区绑定</strong>
109+
- 可将当前选中的消息直接绑定到规则
110+
</li>
111+
</ul>
112+
</section>
113+
114+
<section class="help-section">
115+
<div class="section-title">
116+
<TextInitial class="ui-icon" />
117+
<h3>导出模板占位符</h3>
118+
</div>
119+
<ul class="tip-list">
120+
<li>
121+
<strong v-pre>{{ name }}</strong>
122+
- 角色名
123+
</li>
124+
<li>
125+
<strong v-pre>{{ account }}</strong>
126+
- 账号
127+
</li>
128+
<li>
129+
<strong v-pre>{{ content }}</strong>
130+
- 消息内容
131+
</li>
132+
<li>
133+
<strong v-pre>{{ time }}</strong>
134+
- 时间
135+
</li>
136+
<li>
137+
<strong>\t</strong>
138+
- 制表符
139+
</li>
140+
<li>
141+
<strong>\n</strong>
142+
- 换行符
143+
</li>
144+
</ul>
145+
</section>
146+
147+
<section class="help-section">
148+
<div class="section-title">
149+
<Keyboard class="ui-icon" />
150+
<h3>快捷键</h3>
151+
</div>
152+
<div class="shortcut-grid">
153+
<div
154+
v-for="shortcut in shortcuts"
155+
:key="shortcut.key"
156+
class="shortcut-row"
157+
>
158+
<kbd>{{ shortcut.key }}</kbd>
159+
<span>{{ shortcut.desc }}</span>
160+
</div>
161+
</div>
162+
</section>
29163
</div>
30164

31165
<div class="help-footer">
@@ -36,10 +170,33 @@
36170
</template>
37171

38172
<script setup lang="ts">
39-
import { HelpCircle, X } from '@lucide/vue';
173+
import {
174+
HelpCircle,
175+
X,
176+
Keyboard,
177+
MessageSquare,
178+
FolderOpen,
179+
Palette,
180+
TextInitial,
181+
UserRound,
182+
} from '@lucide/vue';
40183
import { useWindowStore } from '@/stores/windowStore';
41184
42185
const windowStore = useWindowStore();
186+
187+
const shortcuts = [
188+
{ key: 'Ctrl/Cmd + A', desc: '全选' },
189+
{ key: 'Esc', desc: '取消选择' },
190+
{ key: 'Ctrl/Cmd + C', desc: '复制' },
191+
{ key: 'Ctrl/Cmd + V', desc: '粘贴' },
192+
{ key: 'Ctrl/Cmd + Z', desc: '撤销' },
193+
{ key: 'Ctrl/Cmd + Shift + Z', desc: '重做' },
194+
{ key: 'Ctrl/Cmd + S', desc: '保存' },
195+
{ key: 'Ctrl/Cmd + P', desc: '导出预览' },
196+
{ key: 'Ctrl/Cmd + B', desc: '切换左侧边栏' },
197+
{ key: 'Ctrl/Cmd + I', desc: '切换右侧边栏' },
198+
{ key: 'Ctrl/Cmd + K', desc: '打开帮助文档' },
199+
];
43200
</script>
44201

45202
<style scoped>
@@ -50,53 +207,139 @@ const windowStore = useWindowStore();
50207
display: flex;
51208
align-items: center;
52209
justify-content: center;
210+
background: rgba(0, 0, 0, 0.3);
53211
}
54212
55213
.help-dialog {
56-
width: min(720px, calc(100vw - 32px));
57-
max-height: min(80vh, 760px);
58-
overflow: auto;
214+
width: min(560px, calc(100vw - 32px));
215+
max-height: min(80vh, 520px);
216+
display: flex;
217+
flex-direction: column;
59218
background: var(--bg-topbar);
60219
color: var(--text-primary);
61220
border: 1px solid var(--border-color);
62-
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
221+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
63222
}
64223
65224
.help-header {
66225
display: flex;
67226
align-items: center;
68227
justify-content: space-between;
69-
gap: 16px;
70-
padding: 8px 18px;
228+
padding: 8px 12px;
71229
border-bottom: 1px solid var(--border-color);
72230
}
73231
232+
.help-header .header-title {
233+
margin-top: 0;
234+
}
235+
74236
.help-header h2 {
75237
margin: 0;
76-
font-size: 16px;
238+
font-size: 14px;
239+
font-weight: 600;
77240
}
78241
79242
.close-button {
80-
padding: 6px 10px;
243+
background: none;
81244
border: none;
82-
background-color: var(--bg-topbar);
245+
padding: 4px;
246+
border-radius: 4px;
83247
cursor: pointer;
248+
display: flex;
249+
align-items: center;
250+
justify-content: center;
251+
}
252+
253+
.close-button:hover {
254+
background: var(--hover-bg);
255+
}
256+
257+
.close-button .ui-icon {
258+
width: 16px;
259+
height: 16px;
84260
}
85261
86262
.help-content {
87-
padding: 18px;
88-
font-size: 14px;
263+
flex: 1;
264+
overflow-y: auto;
265+
padding: 16px 20px;
266+
font-size: 13px;
89267
line-height: 1.6;
90268
}
91269
92-
.help-content p {
93-
margin: 0 0 12px;
270+
.help-section {
271+
margin-bottom: 20px;
272+
}
273+
274+
.help-section:last-child {
275+
margin-bottom: 0;
276+
}
277+
278+
.section-title {
279+
display: flex;
280+
align-items: center;
281+
gap: 8px;
282+
margin-bottom: 10px;
283+
}
284+
285+
.section-title h3 {
286+
margin: 0;
287+
font-size: 13px;
288+
font-weight: 600;
289+
color: var(--text-primary);
290+
}
291+
292+
.section-title .ui-icon {
293+
width: 14px;
294+
height: 14px;
295+
color: var(--icon-color);
296+
}
297+
298+
.shortcut-grid {
299+
display: grid;
300+
grid-template-columns: auto 1fr;
301+
gap: 8px 16px;
302+
}
303+
304+
.shortcut-row {
305+
display: contents;
306+
}
307+
308+
kbd {
309+
display: inline-block;
310+
padding: 2px 6px;
311+
font-family: 'Fira Code', monospace;
312+
font-size: 11px;
313+
color: var(--text-primary);
314+
background: var(--bg-sidebar);
315+
border: 1px solid var(--border-color);
316+
border-radius: 3px;
317+
white-space: nowrap;
318+
}
319+
320+
.tip-list {
321+
margin: 0;
322+
padding-left: 20px;
323+
color: var(--text-primary);
324+
}
325+
326+
.tip-list li {
327+
margin-bottom: 6px;
328+
}
329+
330+
.tip-list strong {
331+
color: var(--active-accent);
332+
font-weight: 600;
94333
}
95334
96335
.help-footer {
97-
margin-top: 24px;
98-
padding: 18px;
336+
padding: 8px 20px;
99337
font-size: 12px;
100338
color: var(--text-muted);
339+
text-align: right;
340+
}
341+
342+
.shortcut-hint {
343+
font-size: 11px;
101344
}
102345
</style>

0 commit comments

Comments
 (0)