Skip to content

Commit 6ba90e1

Browse files
ltaooltaoo
committed
feat: add helpe-center pages
1 parent 6199a97 commit 6ba90e1

12 files changed

Lines changed: 438 additions & 55 deletions

File tree

‎frontend/src/components/bottom-navigation-bar1/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function BottomNavigationBar1(props: {
2525
<IconButton
2626
onClick={() => {
2727
if (props.home) {
28-
props.history.destroyAllAndPush("root.home_layout.index");
28+
props.history.destroyAllAndPush("root.home.index");
2929
return;
3030
}
3131
props.back();

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { createSignal, For } from "solid-js";
2+
3+
import { PageKeys, ViewComponentProps } from "@/store/types";
4+
import { useViewModel } from "@/hooks";
5+
import { RouteChildren } from "@/components/route-children";
6+
7+
import { base, Handler } from "@/domains/base";
8+
import { BizError } from "@/domains/error";
9+
import { RouteMenusModel } from "@/domains/route_view";
10+
11+
function HelperCenterLayoutViewModel(props: ViewComponentProps) {
12+
const methods = {
13+
refresh() {
14+
bus.emit(Events.StateChange, { ..._state });
15+
},
16+
};
17+
const ui = {
18+
$menu: RouteMenusModel({
19+
route: "root.helper_center.shortcut" as PageKeys,
20+
menus: [
21+
{
22+
title: "快捷键",
23+
url: "root.helper_center.shortcut",
24+
},
25+
// {
26+
// title: "数据同步",
27+
// url: "root.settings_layout.category",
28+
// },
29+
] as {
30+
title: string;
31+
url: PageKeys;
32+
}[],
33+
$history: props.history,
34+
}),
35+
};
36+
let _state = {
37+
get route() {
38+
return ui.$menu.state.route_name;
39+
},
40+
get menus() {
41+
return ui.$menu.state.menus;
42+
},
43+
};
44+
enum Events {
45+
StateChange,
46+
Error,
47+
}
48+
type TheTypesOfEvents = {
49+
[Events.StateChange]: typeof _state;
50+
[Events.Error]: BizError;
51+
};
52+
const bus = base<TheTypesOfEvents>();
53+
54+
ui.$menu.onStateChange(() => methods.refresh());
55+
56+
return {
57+
methods,
58+
ui,
59+
state: _state,
60+
ready() {},
61+
destroy() {
62+
bus.destroy();
63+
},
64+
onStateChange(handler: Handler<TheTypesOfEvents[Events.StateChange]>) {
65+
return bus.on(Events.StateChange, handler);
66+
},
67+
onError(handler: Handler<TheTypesOfEvents[Events.Error]>) {
68+
return bus.on(Events.Error, handler);
69+
},
70+
};
71+
}
72+
73+
export function HelperCenterLayoutView(props: ViewComponentProps) {
74+
const [state, vm] = useViewModel(HelperCenterLayoutViewModel, [props]);
75+
// const [routeName, setRouteName] = createSignal<PageKeys>("root.home_layout.index");
76+
77+
return (
78+
<div class="flex w-full h-full">
79+
<div class="p-2 w-[120px] h-full border-r border-w-fg-3 bg-w-bg-1">
80+
<div class="space-y-1">
81+
<For each={state().menus}>
82+
{(menu) => {
83+
return (
84+
<div
85+
class=""
86+
classList={{
87+
"px-4 py-2 rounded-md cursor-pointer hover:bg-w-fg-4": true,
88+
"bg-w-fg-4": menu.url === state().route,
89+
}}
90+
onClick={() => {
91+
props.history.push(menu.url);
92+
}}
93+
>
94+
{menu.title}
95+
</div>
96+
);
97+
}}
98+
</For>
99+
</div>
100+
</div>
101+
<div class="relative flex-1 w-0">
102+
<RouteChildren {...props} />
103+
</div>
104+
</div>
105+
);
106+
}

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

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
/**
2+
* @file 帮助中心/快捷键
3+
*/
4+
import { For, Show } from "solid-js";
5+
import { Check } from "lucide-solid";
6+
7+
import { ViewComponentProps } from "@/store/types";
8+
import { useViewModel } from "@/hooks";
9+
import { ScrollView } from "@/components/ui";
10+
11+
import { base, Handler } from "@/domains/base";
12+
import { BizError } from "@/domains/error";
13+
import { RequestCore } from "@/domains/request";
14+
import { fetchSystemInfo } from "@/biz/system/service";
15+
import { ScrollViewCore } from "@/domains/ui";
16+
17+
function HelperCenterShortcutViewModel(props: ViewComponentProps) {
18+
const request = {};
19+
const methods = {
20+
refresh() {
21+
bus.emit(Events.StateChange, { ..._state });
22+
},
23+
};
24+
const ui = {
25+
$view: new ScrollViewCore({}),
26+
};
27+
let _state = {};
28+
enum Events {
29+
StateChange,
30+
Error,
31+
}
32+
type TheTypesOfEvents = {
33+
[Events.StateChange]: typeof _state;
34+
[Events.Error]: BizError;
35+
};
36+
const bus = base<TheTypesOfEvents>();
37+
38+
return {
39+
methods,
40+
ui,
41+
state: _state,
42+
ready() {},
43+
destroy() {
44+
bus.destroy();
45+
},
46+
onStateChange(handler: Handler<TheTypesOfEvents[Events.StateChange]>) {
47+
return bus.on(Events.StateChange, handler);
48+
},
49+
onError(handler: Handler<TheTypesOfEvents[Events.Error]>) {
50+
return bus.on(Events.Error, handler);
51+
},
52+
};
53+
}
54+
55+
export function HelperCenterShortcutView(props: ViewComponentProps) {
56+
const [state, vm] = useViewModel(HelperCenterShortcutViewModel, [props]);
57+
58+
return (
59+
<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>
63+
</header>
64+
65+
<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>
83+
</div>
84+
85+
<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>
123+
</div>
124+
125+
<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>
166+
</div>
167+
</ScrollView>
168+
);
169+
}

0 commit comments

Comments
 (0)