fix: 修复大量抽离组件后带来的布局问题

Author: FreecellRaid

src/components/layout/SidebarLeft.vue

@@ -300,7 +300,7 @@ function handleNavClick(panelName: typeof windowStore.activeLeftPanelName) {
 /* 设置弹出框样式 */
 .settings-popover {
     position: absolute;
-    left: 25px;
+    left: 49px;
     bottom: -1px;
 }
 </style>

src/components/layout/TopMenuBar.vue

@@ -64,7 +64,11 @@
                     v-if="showStoredProjectsPopover"
                     class="topbar-popover stored-projects-popover"
                 >
-                    <StoredProjectsPopover />
+                    <StoredProjectsPopover
+                        :projects="storedProjects"
+                        @refresh="refreshStoredProjects"
+                        @close="closeAllPopovers"
+                    />
                 </div>
             </div>
 
@@ -116,6 +120,7 @@ import { useWindowStore } from '@/stores/windowStore';
 import { useActiveContext } from '@/composables/useActiveContext';
 import { useFileImport } from '@/composables/useImporter';
 import { useProjectManager } from '@/composables/useProjectManager';
+import { vClickOutside } from '@/directives/clickOutside';
 import type { ProjectFile } from '@/types/project';
 import StoredProjectsPopover from '@/components/popovers/StoredProjectsPopover.vue';
 import ExportPopover from '@/components/popovers/ExportPopover.vue';
@@ -132,7 +137,7 @@ const activeContext = useActiveContext();
 const { importAndApply } = useFileImport();
 const projectManager = useProjectManager();
 
-const showExportPopover = ref(true);
+const showExportPopover = ref(false);
 const showStoredProjectsPopover = ref(false);
 const storedProjects = ref<ProjectFile[]>([]);
 function closeAllPopovers() {
@@ -293,15 +298,16 @@ function handleClearAll() {
 
 .topbar-popover {
     position: absolute;
-    top: calc(100% + 8px);
     z-index: 100;
 }
 
 .stored-projects-popover {
-    right: -70px;
+    top: 36px;
+    right: -80px;
 }
 
 .export-popover {
+    top: 30px;
     right: -10px;
 }
 </style>

src/components/popovers/ExportPopover.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="export-popover">
+    <div class="popover">
         <div class="export-item" @click="handleExportText">导出为 TEXT</div>
         <div class="export-item" @click="handleExportHtml">导出为 HTML</div>
         <div class="export-item" @click="handleExportDoc">导出为 DOC</div>
@@ -62,16 +62,13 @@ function handleExportProject() {
 }
 </script>
 <style scoped>
-.export-popover {
+.popover {
     width: 160px;
-    box-sizing: border-box;
-    padding: 6px 0;
-    background: var(--bg-topbar);
     box-shadow: 0 4px 12px var(--box-shadow);
 }
 
 .export-item {
-    padding: 8px 16px;
+    padding: 10px 16px;
     font-size: 13px;
     color: var(--text-primary);
     cursor: pointer;

src/components/popovers/SettingsPopover.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="settings-popover">
+    <div class="popover">
         <div class="popover-header">偏好设置</div>
 
         <div class="settings-section">
@@ -80,13 +80,9 @@ const styleStore = useStyleStore();
 </script>
 
 <style scoped>
-.settings-popover {
+.popover {
     width: 200px;
-    background-color: var(--bg-sidebar);
     padding: 12px;
-    z-index: 100;
-    cursor: default;
-    color: var(--text-primary);
     box-shadow: 5px -3px 12px var(--box-shadow);
 }
 

src/components/popovers/StoredProjectsPopover.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="stored-projects-panel">
+    <div class="popover">
         <div class="stored-projects-toolbar">
             <span>本地工程</span>
             <button
@@ -11,13 +11,14 @@
                 <RefreshCcw class="ui-icon" aria-hidden="true" />
             </button>
         </div>
-        <div v-if="storedProjects.length === 0" class="stored-projects-empty">
+        <div v-if="projects.length === 0" class="stored-projects-empty">
             当前没有已保存的本地工程
         </div>
         <div
-            v-for="project in storedProjects"
+            v-for="project in projects"
             :key="project.projectId"
             class="stored-project-item"
+            @click="handleOpenStoredProject(project.projectId)"
         >
             <div class="stored-project-main">
                 <div class="stored-project-name">
@@ -29,14 +30,6 @@
                 </div>
             </div>
             <div class="stored-project-actions">
-                <button
-                    class="icon-interactive"
-                    type="button"
-                    title="打开工程"
-                    @click="handleOpenStoredProject(project.projectId)"
-                >
-                    <FolderOpen class="ui-icon" aria-hidden="true" />
-                </button>
                 <button
                     class="icon-interactive icon-button-warning"
                     type="button"
@@ -50,22 +43,31 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { RefreshCcw, Trash2 } from '@lucide/vue';
 import { formatDate } from '@/utils/date';
 import type { ProjectFile } from '@/types/project';
 import { useProjectManager } from '@/composables/useProjectManager';
 
+defineProps<{
+    projects: ProjectFile[];
+}>();
+
+const emit = defineEmits<{
+    refresh: [];
+    close: [];
+}>();
+
 const projectManager = useProjectManager();
-const storedProjects = ref<ProjectFile[]>([]);
 
 function refreshStoredProjects() {
-    storedProjects.value = projectManager.getStoredProjects();
+    emit('refresh');
 }
 
 function handleOpenStoredProject(projectId: string) {
     try {
         if (projectManager.openStoredProject(projectId)) {
             refreshStoredProjects();
+            emit('close');
         }
     } catch (error) {
         console.error(error);
@@ -96,21 +98,19 @@ function formatStoredProjectTime(time: string) {
 }
 </script>
 <style scoped>
-.stored-projects-panel {
+.popover {
     width: 280px;
-    box-sizing: border-box;
     max-height: 400px;
     overflow-y: auto;
-    padding: 10px 12px;
-    color: var(--text-primary);
-    background: var(--bg-topbar);
+    padding-top: 10px;
     box-shadow: 0 4px 12px var(--box-shadow);
 }
 
 .stored-projects-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 0px 10px;
     margin-bottom: 4px;
     font-size: 13px;
     color: var(--text-muted);
@@ -124,7 +124,7 @@ function formatStoredProjectTime(time: string) {
 }
 
 .stored-projects-empty {
-    padding: 10px 0;
+    padding: 10px 12px;
     font-size: 12px;
     color: var(--text-muted);
 }
@@ -134,9 +134,12 @@ function formatStoredProjectTime(time: string) {
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-    padding: 8px 0;
+    padding: 10px 12px;
     border-top: none;
 }
+.stored-project-item:hover {
+    background-color: var(--hover-bg);
+}
 
 .stored-project-main {
     min-width: 0;

src/styles/style.css

@@ -435,6 +435,14 @@ body,
     height: 16px;
 }
 
+/* 通用 Popover 样式 */
+.popover {
+    background-color: var(--bg-sidebar);
+    z-index: 100;
+    cursor: default;
+    color: var(--text-primary);
+}
+
 /* 滚动条，不知道为什么无论怎么写就是去不掉这个圆角 */
 * {
     scrollbar-width: thin;