Skip to content

Commit 2545e6c

Browse files
ltaooltaoo
committed
feat: update shortcut page
1 parent 09e39c6 commit 2545e6c

3 files changed

Lines changed: 191 additions & 99 deletions

File tree

‎config/config.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ func LoadConfig() (*Config, error) {
7070
}
7171
}
7272

73-
viper.SetDefault("info.version", "0.2.2")
73+
viper.SetDefault("info.version", "0.3.0")
7474
viper.SetDefault("info.productName", "Devboard")
7575
viper.SetDefault("UserConfigDir", data_dir)
7676
viper.SetDefault("UserConfigName", "settings.json")

‎frontend/src/components/shortcut.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* @file 快捷键
3+
*/
4+
import { For } from "solid-js";
5+
import { JSX } from "solid-js/jsx-runtime";
6+
7+
export function ShortcutKey(
8+
props: {
9+
keys: string[];
10+
separator?: string;
11+
size?: "sm" | "md" | "lg";
12+
variant?: "default" | "primary" | "secondary" | "mac";
13+
} & JSX.HTMLAttributes<HTMLDivElement>
14+
) {
15+
const { keys, separator = "+", size = "md", variant = "default" } = props;
16+
17+
const sizeClasses = {
18+
sm: "min-w-[28px] h-6 px-1.5 text-xs",
19+
md: "min-w-[36px] h-8 px-2 text-sm",
20+
lg: "min-w-[44px] h-10 px-3 text-base",
21+
};
22+
23+
const variantClasses = {
24+
default: "text-gray-700 bg-gray-50 border-gray-200",
25+
primary: "text-blue-700 bg-blue-50 border-blue-200",
26+
secondary: "text-purple-700 bg-purple-50 border-purple-200",
27+
mac: "text-gray-800 bg-gradient-to-b from-gray-100 to-gray-200 border-gray-300",
28+
};
29+
30+
return (
31+
<div
32+
classList={{
33+
"inline-flex items-center space-x-1": true,
34+
[props.class ?? ""]: true,
35+
...props.classList,
36+
}}
37+
>
38+
<For each={keys}>
39+
{(key, idx) => {
40+
return (
41+
<>
42+
<kbd
43+
classList={{
44+
"inline-flex items-center justify-center font-semibold border rounded-lg shadow-sm transition-all":
45+
true,
46+
"hover:shadow-md": true,
47+
[sizeClasses[size]]: true,
48+
[variantClasses[variant]]: true,
49+
}}
50+
>
51+
{key}
52+
</kbd>
53+
{idx() < keys.length - 1 && <span class="text-gray-400 text-sm">{separator}</span>}
54+
</>
55+
);
56+
}}
57+
</For>
58+
</div>
59+
);
60+
}

‎frontend/src/pages/helper_center/shortcut.tsx‎

Lines changed: 130 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Check } from "lucide-solid";
77
import { ViewComponentProps } from "@/store/types";
88
import { useViewModel } from "@/hooks";
99
import { ScrollView } from "@/components/ui";
10+
import { ShortcutKey } from "@/components/shortcut";
1011

1112
import { base, Handler } from "@/domains/base";
1213
import { BizError } from "@/domains/error";
@@ -57,112 +58,143 @@ export function HelperCenterShortcutView(props: ViewComponentProps) {
5758

5859
return (
5960
<ScrollView store={vm.ui.$view} class="p-4 space-y-8">
60-
<header class="text-center mb-10">
61-
<h1 class="text-4xl font-bold text-indigo-600 mb-2">快捷键说明</h1>
62-
<p class="text-lg text-gray-500">提高效率的快捷操作指南</p>
61+
<header class="mb-10">
62+
<h1 class="text-4xl font-bold mb-2">快捷键说明</h1>
6363
</header>
64-
6564
<div class="shortcut-section">
66-
<h2 class="text-2xl font-semibold text-indigo-500 border-b border-gray-200 pb-3 mb-6">简要说明</h2>
67-
<ol class="list-decimal pl-5 space-y-3">
68-
<li>
69-
按下 <kbd class="key">⌘</kbd>+<kbd class="key">Shift</kbd>+<kbd class="key">M</kbd> 组合键可快速调出窗口
70-
</li>
71-
<li>
72-
使用 <kbd class="key">↑</kbd>/<kbd class="key">↓</kbd> 或 <kbd class="key">j</kbd>/<kbd class="key">k</kbd>{" "}
73-
键浏览选项
74-
</li>
75-
<li>
76-
输入 <kbd class="key">g</kbd>
77-
<kbd class="key">g</kbd> 可立即返回列表最上方
78-
</li>
79-
<li>
80-
按 <kbd class="key">Esc</kbd> 键可随时隐藏窗口
81-
</li>
82-
</ol>
65+
<h2 class="text-2xl font-semibold border-b border-gray-200 pb-3 mb-6">窗口控制</h2>
66+
<table>
67+
<thead>
68+
<tr>
69+
<td class="p-2 w-[280px]">快捷键</td>
70+
<td class="p-2">说明</td>
71+
</tr>
72+
</thead>
73+
<tbody>
74+
<tr>
75+
<td class="p-2 w-[280px]">
76+
<ShortcutKey keys={["Ctrl", "Shift", "M"]} separator="+" />
77+
</td>
78+
<td class="p-2">
79+
<div>macOS端</div>
80+
<div>唤起主窗口</div>
81+
</td>
82+
</tr>
83+
<tr>
84+
<td class="p-2 w-[280px]">
85+
<ShortcutKey keys={["Ctrl", ","]} separator="+" />
86+
</td>
87+
<td class="p-2">打开设置窗口</td>
88+
</tr>
89+
<tr>
90+
<td class="p-2 w-[280px]">
91+
<ShortcutKey keys={["Ctrl", "Q"]} separator="+" />
92+
</td>
93+
<td class="p-2">退出应用</td>
94+
</tr>
95+
</tbody>
96+
</table>
8397
</div>
8498

8599
<div class="shortcut-section">
86-
<h2 class="text-2xl font-semibold text-indigo-500 border-b border-gray-200 pb-3 mb-6">窗口控制</h2>
87-
88-
<div class="flex items-center py-4 border-b border-gray-100">
89-
<div class="flex mr-5">
90-
<kbd class="key">⌘</kbd>
91-
<span>+</span>
92-
<kbd class="key">Shift</kbd>
93-
<span>+</span>
94-
<kbd class="key">M</kbd>
95-
</div>
96-
<div class="flex-1">唤起/显示窗口</div>
97-
</div>
98-
99-
<div class="flex items-center py-4 border-b border-gray-100">
100-
<div class="flex mr-5">
101-
<kbd class="key">Esc</kbd>
102-
</div>
103-
<div class="flex-1">隐藏窗口</div>
104-
</div>
105-
106-
<div class="flex items-center py-4 border-b border-gray-100">
107-
<div class="flex mr-5">
108-
<kbd class="key">⌘</kbd>
109-
<span>+</span>
110-
<kbd class="key">,</kbd>
111-
</div>
112-
<div class="flex-1">打开设置窗口</div>
113-
</div>
114-
115-
<div class="flex items-center py-4">
116-
<div class="flex mr-5">
117-
<kbd class="key">⌘</kbd>
118-
<span>+</span>
119-
<kbd class="key">Q</kbd>
120-
</div>
121-
<div class="flex-1">退出应用</div>
122-
</div>
100+
<h2 class="text-2xl font-semibold border-b border-gray-200 pb-3 mb-6">内容选择与操作</h2>
101+
<table>
102+
<thead>
103+
<tr>
104+
<td class="p-2 w-[280px]">快捷键</td>
105+
<td class="p-2">说明</td>
106+
</tr>
107+
</thead>
108+
<tbody>
109+
<tr>
110+
<td class="p-2 w-[280px] flex gap-2">
111+
<ShortcutKey keys={["↑"]} />
112+
<ShortcutKey keys={["K"]} />
113+
</td>
114+
<td class="p-2">选择上一条记录</td>
115+
</tr>
116+
<tr>
117+
<td class="p-2 w-[280px] flex gap-2">
118+
<ShortcutKey keys={["↓"]} />
119+
<ShortcutKey keys={["J"]} />
120+
</td>
121+
<td class="p-2">选择下一条记录</td>
122+
</tr>
123+
<tr>
124+
<td class="p-2 w-[280px] flex gap-2">
125+
<ShortcutKey keys={["Ctrl", "U"]} />
126+
</td>
127+
<td class="p-2">快速往上移动</td>
128+
</tr>
129+
<tr>
130+
<td class="p-2 w-[280px] flex gap-2">
131+
<ShortcutKey keys={["Ctrl", "D"]} />
132+
</td>
133+
<td class="p-2">快速往下移动</td>
134+
</tr>
135+
<tr>
136+
<td class="p-2 w-[280px]">
137+
<ShortcutKey keys={["GG"]} />
138+
</td>
139+
<td class="p-2">快速定位到第一条记录</td>
140+
</tr>
141+
<tr>
142+
<td class="p-2 w-[280px]">
143+
<ShortcutKey keys={["Space"]} />
144+
</td>
145+
<td class="p-2">预览选择的记录</td>
146+
</tr>
147+
<tr>
148+
<td class="p-2 w-[280px] flex gap-2">
149+
<ShortcutKey keys={["YY"]} />
150+
<ShortcutKey keys={["Enter"]} />
151+
</td>
152+
<td class="p-2">将记录复制到粘贴板</td>
153+
</tr>
154+
<tr>
155+
<td class="p-2 w-[280px] flex gap-2">
156+
<ShortcutKey keys={["Shift", "Backspace"]} />
157+
</td>
158+
<td class="p-2">删除选择的记录</td>
159+
</tr>
160+
</tbody>
161+
</table>
123162
</div>
124163

125164
<div class="shortcut-section">
126-
<h2 class="text-2xl font-semibold text-indigo-500 border-b border-gray-200 pb-3 mb-6">导航控制</h2>
127-
128-
<div class="flex items-center py-4 border-b border-gray-100">
129-
<div class="flex mr-5">
130-
<kbd class="key">↑</kbd>
131-
</div>
132-
<div class="flex-1">向上移动选择项</div>
133-
</div>
134-
135-
<div class="flex items-center py-4 border-b border-gray-100">
136-
<div class="flex mr-5">
137-
<kbd class="key">k</kbd>
138-
</div>
139-
<div class="flex-1">向上移动选择项</div>
140-
</div>
141-
142-
<div class="flex items-center py-4 border-b border-gray-100">
143-
<div class="flex mr-5">
144-
<kbd class="key">↓</kbd>
145-
</div>
146-
<div class="flex-1">向下移动选择项</div>
147-
</div>
148-
149-
<div class="flex items-center py-4 border-b border-gray-100">
150-
<div class="flex mr-5">
151-
<kbd class="key">j</kbd>
152-
</div>
153-
<div class="flex-1">向下移动选择项</div>
154-
</div>
155-
156-
<div class="flex items-center py-4">
157-
<div class="flex mr-5">
158-
<kbd class="key">g</kbd>
159-
<kbd class="key">g</kbd>
160-
</div>
161-
<div class="flex-1">
162-
快速回到列表顶部
163-
<span class="vim-badge">Vim</span>
164-
</div>
165-
</div>
165+
<h2 class="text-2xl font-semibold border-b border-gray-200 pb-3 mb-6">搜索</h2>
166+
<table>
167+
<thead>
168+
<tr>
169+
<td class="p-2 w-[280px]">快捷键</td>
170+
<td class="p-2">说明</td>
171+
</tr>
172+
</thead>
173+
<tbody>
174+
<tr>
175+
<td class="p-2 w-[280px] flex gap-2">
176+
<ShortcutKey keys={["Ctrl", "F"]} />
177+
<ShortcutKey keys={["O"]} />
178+
</td>
179+
<td class="p-2">聚焦到搜索框</td>
180+
</tr>
181+
<tr>
182+
<td class="p-2 w-[280px]">
183+
<ShortcutKey keys={["Shift", "3"]} />
184+
</td>
185+
<td class="p-2">
186+
<div>搜索框为空时</div>
187+
<div>聚焦到搜索框并展示标签</div>
188+
</td>
189+
</tr>
190+
<tr>
191+
<td class="p-2 w-[280px]">
192+
<ShortcutKey keys={["Esc"]} />
193+
</td>
194+
<td class="p-2">搜索框失焦</td>
195+
</tr>
196+
</tbody>
197+
</table>
166198
</div>
167199
</ScrollView>
168200
);

0 commit comments

Comments
 (0)