Skip to content

Commit 5e4537e

Browse files
FreecellRaidFreecellRaid
authored
Merge pull request #2 from FreecellRaid/refactor/focus-v2
Refactor/focus v2
2 parents 68813f2 + 5217632 commit 5e4537e

19 files changed

Lines changed: 836 additions & 647 deletions

‎src/components/common/HelpDocument.vue‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,44 @@
22
<div
33
class="help-overlay"
44
data-focus-area="modal"
5-
@click.self="$emit('close')"
5+
@pointerdown.self="uiStore.closeHelpDocument()"
66
>
77
<div class="help-dialog" role="dialog" aria-modal="true">
88
<div class="help-header">
9-
<h2>帮助文档</h2>
9+
<div class="header-title">
10+
<HelpCircle class="ui-icon" />
11+
<h2>帮助文档</h2>
12+
</div>
1013
<button
1114
class="close-button icon-interactive"
1215
type="button"
13-
title="关闭帮助"
14-
@click="$emit('close')"
16+
title="关闭帮助 (Esc)"
17+
@click="uiStore.closeHelpDocument()"
1518
>
16-
关闭
19+
<X class="ui-icon" />
1720
</button>
1821
</div>
1922

2023
<div class="help-content">
21-
<p>这里是帮助文档弹窗的占位页。</p>
22-
<p>后续可以补快捷键列表、导入导出说明、编辑操作说明等内容。</p>
23-
<p>当前支持点击标题、点击图标、或按 `Cmd/Ctrl + K` 打开。</p>
24+
<slot>
25+
<div class="placeholder-text">
26+
此处为帮助文档内容，支持快捷键列表、操作说明等。
27+
</div>
28+
</slot>
29+
</div>
30+
31+
<div class="help-footer">
32+
<div class="shortcut-hint">按 Esc 键关闭</div>
2433
</div>
2534
</div>
2635
</div>
2736
</template>
2837

2938
<script setup lang="ts">
30-
defineEmits<{
31-
(e: 'close'): void;
32-
}>();
39+
import { HelpCircle, X } from '@lucide/vue';
40+
import { useUiStore } from '@/stores/uiStore';
41+
42+
const uiStore = useUiStore();
3343
</script>
3444

3545
<style scoped>
@@ -40,7 +50,6 @@ defineEmits<{
4050
display: flex;
4151
align-items: center;
4252
justify-content: center;
43-
background: rgba(0, 0, 0, 0.4);
4453
}
4554
4655
.help-dialog {
@@ -58,19 +67,19 @@ defineEmits<{
5867
align-items: center;
5968
justify-content: space-between;
6069
gap: 16px;
61-
padding: 16px 18px;
70+
padding: 8px 18px;
6271
border-bottom: 1px solid var(--border-color);
6372
}
6473
6574
.help-header h2 {
6675
margin: 0;
67-
font-size: 18px;
76+
font-size: 16px;
6877
}
6978
7079
.close-button {
7180
padding: 6px 10px;
72-
border: 1px solid var(--border-color);
73-
background: var(--bg-workspace);
81+
border: none;
82+
background-color: var(--bg-topbar);
7483
cursor: pointer;
7584
}
7685
@@ -83,4 +92,11 @@ defineEmits<{
8392
.help-content p {
8493
margin: 0 0 12px;
8594
}
95+
96+
.help-footer {
97+
margin-top: 24px;
98+
padding: 18px;
99+
font-size: 12px;
100+
color: var(--text-muted);
101+
}
86102
</style>

‎src/components/layout/SidebarLeft.vue‎

Lines changed: 23 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,52 @@
11
<template>
22
<div
33
class="sidebar-left-container"
4-
:class="{ 'is-collapsed': !uiStore.leftVisible }"
4+
:class="{ 'is-collapsed': !uiStore.leftSidebarVisible }"
55
>
66
<nav class="activity-bar">
77
<div class="nav-top">
88
<div
99
class="nav-item"
1010
:class="{
1111
active:
12-
uiStore.activeLeftPanel === 'chunks' &&
13-
uiStore.leftVisible,
12+
uiStore.activeLeftPanelName === 'chunkList' &&
13+
uiStore.leftSidebarVisible,
1414
}"
1515
title="文件列表"
16-
@click="
17-
uiStore.setLeftPanel('chunks');
18-
uiStore.setFocusArea('chunkList');
19-
"
16+
@click="uiStore.setLeftPanel('chunkList')"
2017
>
2118
<FolderOpen class="ui-icon" />
2219
</div>
2320
<div
2421
class="nav-item"
2522
:class="{
2623
active:
27-
uiStore.activeLeftPanel === 'characters' &&
28-
uiStore.leftVisible,
24+
uiStore.activeLeftPanelName === 'identity' &&
25+
uiStore.leftSidebarVisible,
2926
}"
30-
title="角色列表"
31-
@click="
32-
uiStore.setLeftPanel('characters');
33-
uiStore.setFocusArea('otherPanel');
34-
"
27+
title="身份管理"
28+
@click="uiStore.setLeftPanel('identity')"
3529
>
3630
<UserRound class="ui-icon" />
3731
</div>
3832
<div
3933
class="nav-item"
4034
:class="{
4135
active:
42-
uiStore.activeLeftPanel === 'rules' &&
43-
uiStore.leftVisible,
36+
uiStore.activeLeftPanelName === 'ruleEditor' &&
37+
uiStore.leftSidebarVisible,
4438
}"
4539
title="染色规则"
46-
@click="
47-
uiStore.setLeftPanel('rules');
48-
uiStore.setFocusArea('otherPanel');
49-
"
40+
@click="uiStore.setLeftPanel('ruleEditor')"
5041
>
5142
<Palette class="ui-icon" />
5243
</div>
5344
<div
5445
class="nav-item"
5546
:class="{
5647
active:
57-
uiStore.activeLeftPanel === 'search' &&
58-
uiStore.leftVisible,
48+
uiStore.activeLeftPanelName === 'search' &&
49+
uiStore.leftSidebarVisible,
5950
}"
6051
title="搜索过滤"
6152
@click="
@@ -69,14 +60,11 @@
6960
class="nav-item"
7061
:class="{
7162
active:
72-
uiStore.activeLeftPanel === 'exportFormats' &&
73-
uiStore.leftVisible,
63+
uiStore.activeLeftPanelName === 'exportFormat' &&
64+
uiStore.leftSidebarVisible,
7465
}"
7566
title="导出模板"
76-
@click="
77-
uiStore.setLeftPanel('exportFormats');
78-
uiStore.setFocusArea('otherPanel');
79-
"
67+
@click="uiStore.setLeftPanel('exportFormat')"
8068
>
8169
<TextInitial class="ui-icon" />
8270
</div>
@@ -181,7 +169,7 @@
181169
</nav>
182170

183171
<aside
184-
v-if="uiStore.leftVisible"
172+
v-if="uiStore.leftSidebarVisible"
185173
class="side-panel"
186174
:style="{ width: uiStore.leftPanelWidth + 'px' }"
187175
:data-focus-area="
@@ -194,31 +182,31 @@
194182
>
195183
<div class="panel-content">
196184
<div
197-
v-if="uiStore.activeLeftPanel === 'chunks'"
185+
v-if="uiStore.activeLeftPanelName === 'chunkList'"
198186
class="panel-slot"
199187
>
200188
<ChunkListPanel />
201189
</div>
202190
<div
203-
v-else-if="uiStore.activeLeftPanel === 'characters'"
191+
v-else-if="uiStore.activeLeftPanelName === 'identity'"
204192
class="panel-slot"
205193
>
206194
<IdentityPanel />
207195
</div>
208196
<div
209-
v-else-if="uiStore.activeLeftPanel === 'rules'"
197+
v-else-if="uiStore.activeLeftPanelName === 'ruleEditor'"
210198
class="panel-slot"
211199
>
212200
<RuleEditorPanel />
213201
</div>
214202
<div
215-
v-else-if="uiStore.activeLeftPanel === 'search'"
203+
v-else-if="uiStore.activeLeftPanelName === 'search'"
216204
class="panel-slot"
217205
>
218206
<SearchPanel />
219207
</div>
220208
<div
221-
v-else-if="uiStore.activeLeftPanel === 'exportFormats'"
209+
v-else-if="uiStore.activeLeftPanelName === 'exportFormat'"
222210
class="panel-slot"
223211
>
224212
<ExportFormatPanel />
@@ -227,7 +215,7 @@
227215
</aside>
228216

229217
<div
230-
v-if="uiStore.leftVisible"
218+
v-if="uiStore.leftSidebarVisible"
231219
class="resize-handle"
232220
@mousedown="startResize"
233221
></div>

‎src/components/layout/StatusBar.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,12 @@ const styleStore = useStyleStore();
8787
const filterTool = useFilter();
8888
8989
const activeChunk = computed(function () {
90-
if (!uiStore.activeChunkId) return null;
91-
return logStore.findChunkById(uiStore.activeChunkId);
90+
if (
91+
!uiStore.currentActiveView.windowId ||
92+
uiStore.currentActiveView.windowId === 'defaultView'
93+
)
94+
return null;
95+
return logStore.findChunkById(uiStore.currentActiveView.windowId);
9296
});
9397
9498
const activeChunkName = computed(function () {

‎src/components/layout/TopMenuBar.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<header class="top-bar">
3-
<button
3+
<div
44
class="project-name project-entry"
55
type="button"
66
title="打开帮助文档"
@@ -181,7 +181,6 @@ const projectManager = useProjectManager();
181181
const showExportPanel = ref(false);
182182
const showStoredProjects = ref(false);
183183
const storedProjects = ref<ProjectFile[]>([]);
184-
185184
function closeAllPanels() {
186185
showExportPanel.value = false;
187186
showStoredProjects.value = false;
@@ -211,7 +210,8 @@ const hasWorkspaceState = computed(() => {
211210
filterTool.hasSelection.value ||
212211
historyStore.undoStack.length > 0 ||
213212
historyStore.redoStack.length > 0 ||
214-
uiStore.activeChunkId !== null
213+
!uiStore.currentActiveView.windowId ||
214+
uiStore.currentActiveView.windowId === 'defaultView'
215215
);
216216
});
217217
@@ -333,7 +333,7 @@ function handleClearAll() {
333333
clipboardStore.clearClipboard();
334334
filterTool.clearAllSelections();
335335
historyStore.clearHistory();
336-
uiStore.setActiveChunk(null);
336+
uiStore.setFocus({ type: 'window', id: 'default' });
337337
}
338338
339339
/** 点击元素外部触发回调 (用于关闭下拉菜单) */

0 commit comments

Comments
 (0)