feat: 优化面板布局与Markdown查看器组件

- GitHubMarkdownViewer 添加 showHeader 属性支持隐藏头部

- PipelineSnapshotPanel 使用可调整大小的分割面板

- 分割比例支持 localStorage 持久化

- 小屏幕自动切换为堆叠布局

Author: AstralSolipsism

dashboard/src/components/extension/mod-manager/PluginChangelogPanel.vue

@@ -99,7 +99,7 @@ watch(
 
         <div v-else-if="content" class="changelog-scroll__content">
           <div class="changelog-scroll__container">
-            <GitHubMarkdownViewer :content="content" header-icon="mdi-history" header-label="CHANGELOG.md" />
+            <GitHubMarkdownViewer :content="content" header-icon="mdi-history" header-label="CHANGELOG.md" :show-header="false" />
           </div>
         </div>
 

dashboard/src/components/extension/mod-manager/PluginOverviewPanel.vue

@@ -126,7 +126,12 @@ watch(
 
         <div v-else-if="content" class="readme-scroll__content">
           <div class="readme-scroll__container">
-            <GitHubMarkdownViewer :content="content" header-icon="mdi-book-open-outline" header-label="README.md" />
+            <GitHubMarkdownViewer
+              :content="content"
+              header-icon="mdi-book-open-outline"
+              header-label="README.md"
+              :show-header="false"
+            />
           </div>
         </div>
 

dashboard/src/components/extension/mod-manager/PluginWelcomePanel.vue

@@ -123,7 +123,7 @@ onMounted(() => {
 
       <div v-else-if="content" class="welcome-readme">
         <div class="welcome-readme__container">
-          <GitHubMarkdownViewer :content="content" header-icon="mdi-book-open-outline" header-label="README.md" />
+          <GitHubMarkdownViewer :content="content" header-icon="mdi-book-open-outline" header-label="README.md" :show-header="false" />
 
           <v-alert type="info" variant="tonal" density="comfortable" class="mt-8">
             <div class="text-body-2">

dashboard/src/components/extension/mod-manager/pipeline/PipelineSnapshotPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import { useDisplay } from 'vuetify'
 import { useModuleI18n } from '@/i18n/composables'
 import { usePipelineSnapshot } from '@/composables/usePipelineSnapshot'
 import type { EffectTarget, PipelineSnapshot, PipelineStageId, SnapshotScopeMode, StageParticipant } from './pipelineSnapshotTypes'
@@ -14,6 +15,8 @@ import ConflictListPanel from './ConflictListPanel.vue'
 import TraceImpactDetailPanel from './TraceImpactDetailPanel.vue'
 import PromptPreviewDialog from './PromptPreviewDialog.vue'
 
+import ResizableSplitPane from '../ResizableSplitPane.vue'
+
 type SnapshotPanelMode = 'pipeline' | 'trace'
 type RightTab = 'detail' | 'conflicts'
 
@@ -51,6 +54,9 @@ const props = withDefaults(
 
 const { tm } = useModuleI18n('features/extension')
 
+const display = useDisplay()
+const isSmallScreen = computed(() => display.width.value <= 960)
+
 const scopeMode = ref<SnapshotScopeMode>('global')
 const sessionUmo = ref<string>('')
 
@@ -60,6 +66,27 @@ const selectedParticipantId = ref<string | null>(null)
 
 const showAllStages = ref(false)
 
+const SPLIT_RATIO_KEY = 'psp-split-ratio'
+
+function parseStoredRatio(raw: string | null): number | null {
+  if (!raw) return null
+  const num = Number(raw)
+  if (!Number.isFinite(num)) return null
+  if (num <= 0 || num >= 1) return null
+  return num
+}
+
+const splitRatio = ref(parseStoredRatio(localStorage.getItem(SPLIT_RATIO_KEY)) ?? 0.67)
+
+watch(
+  splitRatio,
+  (val) => {
+    if (!Number.isFinite(val)) return
+    localStorage.setItem(SPLIT_RATIO_KEY, String(val))
+  },
+  { flush: 'post' }
+)
+
 const traceSelectedTarget = ref<'__all__' | EffectTarget>('__all__')
 const traceSelectedImpactKey = ref<string | null>(null)
 
@@ -381,88 +408,179 @@ const scopeItems = computed(() => [
     <v-progress-linear v-if="loading" indeterminate color="primary" />
 
     <div class="psp__content d-flex flex-grow-1" style="min-height: 0">
-      <div class="psp__left">
-        <TraceFishboneView
-          v-if="props.mode === 'trace'"
-          class="psp__fishbone"
-          :groups="traceRootGroupsAll"
-          :active-stage-id="selectedStageId"
-          :active-target="traceActiveTarget"
-          :active-impact-key="traceSelectedImpactKey"
-          @select-stage="handleSelectStage"
-          @select-target="(t) => (traceSelectedTarget = t)"
-          @select-impact="selectImpactKey"
-        />
-        <PipelineFishboneView
-          v-else
-          class="psp__fishbone"
-          :snapshot="displaySnapshot"
-          :selected-stage-id="selectedStageId"
-          :selected-participant-id="selectedParticipantId"
-          :show-all-stages="showAllStages"
-          @select-stage="handleSelectStage"
-          @select-participant="handleSelectParticipant"
-        />
-      </div>
-
-      <div class="psp__right">
-        <div v-if="props.mode === 'pipeline'" class="psp__right-tabs">
-          <v-btn-toggle v-model="rightTab" mandatory density="compact" class="psp__right-toggle w-100">
-            <v-btn value="detail" variant="text" class="psp__right-toggle-btn flex-1">
-              {{ tm('pipeline.rightTabs.detail') }}
-            </v-btn>
-            <v-btn value="conflicts" variant="text" class="psp__right-toggle-btn flex-1">
-              {{ tm('pipeline.rightTabs.conflicts') }}
-            </v-btn>
-          </v-btn-toggle>
-
-          <v-divider />
+      <template v-if="isSmallScreen">
+        <div class="psp__left">
+          <TraceFishboneView
+            v-if="props.mode === 'trace'"
+            class="psp__fishbone"
+            :groups="traceRootGroupsAll"
+            :active-stage-id="selectedStageId"
+            :active-target="traceActiveTarget"
+            :active-impact-key="traceSelectedImpactKey"
+            @select-stage="handleSelectStage"
+            @select-target="(t) => (traceSelectedTarget = t)"
+            @select-impact="selectImpactKey"
+          />
+          <PipelineFishboneView
+            v-else
+            class="psp__fishbone"
+            :snapshot="displaySnapshot"
+            :selected-stage-id="selectedStageId"
+            :selected-participant-id="selectedParticipantId"
+            :show-all-stages="showAllStages"
+            @select-stage="handleSelectStage"
+            @select-participant="handleSelectParticipant"
+          />
         </div>
 
-        <div class="psp__right-body">
-          <v-window
-            v-if="props.mode === 'pipeline'"
-            v-model="rightTab"
-            class="psp__window flex-grow-1"
-            style="min-height: 0"
-          >
-            <v-window-item value="detail" class="h-100">
-              <StageDetailPanel
-                :snapshot="displaySnapshot"
-                :stage-id="selectedStageId"
-                :selected-participant-id="selectedParticipantId"
-                @select-participant="handleSelectParticipant"
-                @select-plugin="handleSelectPlugin"
-                @view-impact-chain="handleViewImpactChain"
-              />
-            </v-window-item>
+        <div class="psp__right">
+          <div v-if="props.mode === 'pipeline'" class="psp__right-tabs">
+            <v-btn-toggle v-model="rightTab" mandatory density="compact" class="psp__right-toggle w-100">
+              <v-btn value="detail" variant="text" class="psp__right-toggle-btn flex-1">
+                {{ tm('pipeline.rightTabs.detail') }}
+              </v-btn>
+              <v-btn value="conflicts" variant="text" class="psp__right-toggle-btn flex-1">
+                {{ tm('pipeline.rightTabs.conflicts') }}
+              </v-btn>
+            </v-btn-toggle>
+
+            <v-divider />
+          </div>
 
-            <v-window-item value="conflicts" class="h-100">
-              <ConflictListPanel
-                :snapshot="displaySnapshot"
-                @select-stage="handleSelectStage"
-                @select-participant="handleSelectParticipant"
+          <div class="psp__right-body">
+            <v-window
+              v-if="props.mode === 'pipeline'"
+              v-model="rightTab"
+              class="psp__window flex-grow-1"
+              style="min-height: 0"
+            >
+              <v-window-item value="detail" class="h-100">
+                <StageDetailPanel
+                  :snapshot="displaySnapshot"
+                  :stage-id="selectedStageId"
+                  :selected-participant-id="selectedParticipantId"
+                  @select-participant="handleSelectParticipant"
+                  @select-plugin="handleSelectPlugin"
+                  @view-impact-chain="handleViewImpactChain"
+                />
+              </v-window-item>
+
+              <v-window-item value="conflicts" class="h-100">
+                <ConflictListPanel
+                  :snapshot="displaySnapshot"
+                  @select-stage="handleSelectStage"
+                  @select-participant="handleSelectParticipant"
+                  @select-plugin="handleSelectPlugin"
+                />
+              </v-window-item>
+            </v-window>
+
+            <div v-else class="h-100 d-flex flex-column" style="min-height: 0">
+              <TraceImpactDetailPanel
+                class="flex-grow-1"
+                :row="traceSelectedRow"
                 @select-plugin="handleSelectPlugin"
+                @navigate-pipeline="handleNavigatePipeline"
               />
-            </v-window-item>
-          </v-window>
-
-          <div v-else class="h-100 d-flex flex-column" style="min-height: 0">
-            <TraceImpactDetailPanel
-              class="flex-grow-1"
-              :row="traceSelectedRow"
-              @select-plugin="handleSelectPlugin"
-              @navigate-pipeline="handleNavigatePipeline"
+            </div>
+
+            <div v-if="error" class="psp__error px-4 py-3">
+              <v-alert type="error" variant="tonal" density="comfortable">
+                {{ error }}
+              </v-alert>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <ResizableSplitPane v-else v-model="splitRatio" direction="horizontal" class="psp__split">
+        <template #first>
+          <div class="psp__left">
+            <TraceFishboneView
+              v-if="props.mode === 'trace'"
+              class="psp__fishbone"
+              :groups="traceRootGroupsAll"
+              :active-stage-id="selectedStageId"
+              :active-target="traceActiveTarget"
+              :active-impact-key="traceSelectedImpactKey"
+              @select-stage="handleSelectStage"
+              @select-target="(t) => (traceSelectedTarget = t)"
+              @select-impact="selectImpactKey"
+            />
+            <PipelineFishboneView
+              v-else
+              class="psp__fishbone"
+              :snapshot="displaySnapshot"
+              :selected-stage-id="selectedStageId"
+              :selected-participant-id="selectedParticipantId"
+              :show-all-stages="showAllStages"
+              @select-stage="handleSelectStage"
+              @select-participant="handleSelectParticipant"
             />
           </div>
+        </template>
 
-          <div v-if="error" class="psp__error px-4 py-3">
-            <v-alert type="error" variant="tonal" density="comfortable">
-              {{ error }}
-            </v-alert>
+        <template #second>
+          <div class="psp__right">
+            <div v-if="props.mode === 'pipeline'" class="psp__right-tabs">
+              <v-btn-toggle v-model="rightTab" mandatory density="compact" class="psp__right-toggle w-100">
+                <v-btn value="detail" variant="text" class="psp__right-toggle-btn flex-1">
+                  {{ tm('pipeline.rightTabs.detail') }}
+                </v-btn>
+                <v-btn value="conflicts" variant="text" class="psp__right-toggle-btn flex-1">
+                  {{ tm('pipeline.rightTabs.conflicts') }}
+                </v-btn>
+              </v-btn-toggle>
+
+              <v-divider />
+            </div>
+
+            <div class="psp__right-body">
+              <v-window
+                v-if="props.mode === 'pipeline'"
+                v-model="rightTab"
+                class="psp__window flex-grow-1"
+                style="min-height: 0"
+              >
+                <v-window-item value="detail" class="h-100">
+                  <StageDetailPanel
+                    :snapshot="displaySnapshot"
+                    :stage-id="selectedStageId"
+                    :selected-participant-id="selectedParticipantId"
+                    @select-participant="handleSelectParticipant"
+                    @select-plugin="handleSelectPlugin"
+                    @view-impact-chain="handleViewImpactChain"
+                  />
+                </v-window-item>
+
+                <v-window-item value="conflicts" class="h-100">
+                  <ConflictListPanel
+                    :snapshot="displaySnapshot"
+                    @select-stage="handleSelectStage"
+                    @select-participant="handleSelectParticipant"
+                    @select-plugin="handleSelectPlugin"
+                  />
+                </v-window-item>
+              </v-window>
+
+              <div v-else class="h-100 d-flex flex-column" style="min-height: 0">
+                <TraceImpactDetailPanel
+                  class="flex-grow-1"
+                  :row="traceSelectedRow"
+                  @select-plugin="handleSelectPlugin"
+                  @navigate-pipeline="handleNavigatePipeline"
+                />
+              </div>
+
+              <div v-if="error" class="psp__error px-4 py-3">
+                <v-alert type="error" variant="tonal" density="comfortable">
+                  {{ error }}
+                </v-alert>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </template>
+      </ResizableSplitPane>
     </div>
 
     <PromptPreviewDialog v-model:show="promptDialog" :preview="displaySnapshot?.llm_prompt_preview ?? null" />
@@ -499,10 +617,13 @@ const scopeItems = computed(() => [
   min-width: 0;
 }
 
+.psp__split {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
 .psp__right {
-  width: clamp(360px, 42vw, 760px);
-  max-width: 60%;
-  min-width: 360px;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -580,11 +701,5 @@ const scopeItems = computed(() => [
     border-right: 0;
     border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);
   }
-
-  .psp__right {
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-  }
 }
 </style>

dashboard/src/components/shared/GitHubMarkdownViewer.vue

@@ -7,18 +7,20 @@ type Props = {
   headerIcon?: string
   headerLabel?: string
   typewriter?: boolean
+  showHeader?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
   headerIcon: 'mdi-book-open-outline',
   headerLabel: 'README.md',
-  typewriter: false
+  typewriter: false,
+  showHeader: true
 })
 </script>
 
 <template>
   <div class="github-style-container">
-    <div class="github-style-header">
+    <div v-if="showHeader" class="github-style-header">
       <v-icon size="16" class="mr-2">{{ headerIcon }}</v-icon>
       <span class="text-caption font-weight-bold">{{ headerLabel }}</span>
     </div>

dashboard/src/components/shared/ReadmeDialog.vue

@@ -197,6 +197,7 @@ const _show = computed({
               :content="content"
               :header-icon="mode === 'changelog' ? 'mdi-history' : 'mdi-book-open-outline'"
               :header-label="mode === 'changelog' ? 'CHANGELOG.md' : 'README.md'"
+              :show-header="false"
             />
           </div>
         </div>