From 21cd94cc7d4b1ebb96593d7959d8b806a45fe564 Mon Sep 17 00:00:00 2001
From: JoyD <12854922+zqm114@user.noreply.gitee.com>
Date: Thu, 30 Oct 2025 21:43:50 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=8A=BD=E5=8F=96=E6=B5=AE=E5=8A=A8?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E4=B8=BAPanel.vue=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Robot/Web/src/DockLayout/Panel.vue        | 140 ++++++++++++++++++
 .../Robot/Web/src/views/DockLayoutTest.vue    |  59 ++------
 2 files changed, 156 insertions(+), 43 deletions(-)
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
new file mode 100644
index 0000000..0be7e66
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="panel absolute bg-white shadow rounded border overflow-hidden" 
+       :style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
+    <div class="flex flex-col h-full">
+      <!-- 标题栏 -->
+      <div class="title-bar h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none">
+        <div class="flex items-center">
+          <span class="text-xs">{{ title }}</span>
+        </div>
+        <div class="title-bar-buttons flex items-center gap-0.5">
+          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
+                  @click="onToggleCollapse" 
+                  aria-label="折叠/展开">
+            <!-- 向下小三角，使用内联SVG避免样式作用域问题 -->
+            <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+              <polygon points="5.5,8 2,3.5 9,3.5" fill="#cbd6ff" />
+            </svg>
+          </button>
+          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
+                  @click="onMaximize" 
+                  aria-label="最大化">
+            <!-- 最大化图标：仅外框1px + 两行填充 -->
+            <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+              <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
+              <rect x="3" y="3" width="5" height="1" fill="#b8c6ff" />
+              <!-- 下行采用更宽填充以贴近示例图 -->
+              <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
+            </svg>
+          </button>
+          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" 
+                  @click="onClose" 
+                  aria-label="关闭">
+            <!-- 关闭图标（X），内联SVG确保1px线条 -->
+            <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+              <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
+              <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- 工具栏：位于标题栏下方，右侧扩展钮 -->
+      <div class="toolbar h-6 bg-[#d5e2f6] text-[#2c3e7a] px-2 flex items-center justify-between border-b border-[#c7d2ea]">
+        <div class="toolbar-left flex items-center gap-2">
+          <span class="text-xs">工具栏</span>
+          <button v-if="toolbarExpanded" class="toolbar-button px-2 py-0.5 text-xs bg-white/60 rounded hover:bg-white">示例按钮</button>
+        </div>
+        <button class="toolbar-toggle px-2 py-0.5 text-xs rounded hover:bg-white/40" 
+                @click="onToggleToolbar" 
+                aria-label="展开工具栏">
+          <i class="fa-solid" :class="toolbarExpanded ? 'fa-angles-left' : 'fa-angles-right'"></i>
+        </button>
+      </div>
+
+      <!-- 内容区：可折叠 -->
+      <div class="content-area bg-[#f5f7fb] flex-1" v-show="!collapsed"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  x: {
+    type: Number,
+    default: 0
+  },
+  y: {
+    type: Number,
+    default: 0
+  },
+  width: {
+    type: Number,
+    default: 300
+  },
+  height: {
+    type: Number,
+    default: 180
+  },
+  collapsed: {
+    type: Boolean,
+    default: false
+  },
+  toolbarExpanded: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 定义事件
+const emit = defineEmits(['toggleCollapse', 'maximize', 'close', 'toggleToolbar']);
+
+// 事件处理函数
+const onToggleCollapse = () => {
+  emit('toggleCollapse', props.id);
+};
+
+const onMaximize = () => {
+  emit('maximize', props.id);
+};
+
+const onClose = () => {
+  emit('close', props.id);
+};
+
+const onToggleToolbar = () => {
+  emit('toggleToolbar', props.id);
+};
+</script>
+
+<style scoped>
+/* 面板基础样式 */
+.panel {
+  border: 1px solid #c7d2ea;
+}
+
+/* 图标样式优化 */
+.icon-square-svg {
+  /* 优化SVG渲染，避免1px边框显示过粗的问题 */
+  shape-rendering: crispEdges;
+}
+
+/* 禁用可能存在的旧伪元素样式 */
+:deep(.icon-square::before),
+:deep(.icon-square::after) {
+  content: none !important;
+  display: none !important;
+  border: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
index f794142..6360031 100644
--- a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
+++ b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
@@ -44,57 +44,30 @@
 
     <!-- 预留主区域（暂不放面板） -->
     <div ref="panelHost" class="flex-1 w-full h-[calc(100%-4rem)] relative bg-gray-100">
-      <!-- 浮动面板渲染区 -->
-      <div
+      <!-- 浮动面板渲染区（使用抽取的组件） -->
+      <Panel
         v-for="panel in floatingPanels"
         :key="panel.id"
-        class="absolute bg-white shadow rounded border overflow-hidden"
-        :style="{ top: panel.y + 'px', left: panel.x + 'px', width: panel.width + 'px', height: panel.height + 'px' }"
-      >
-        <div class="flex flex-col h-full">
-          <!-- 标题栏：小三角移到右侧，压缩高度与间距 -->
-          <div class="h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none">
-            <div class="flex items-center">
-              <span class="text-xs">{{ panel.title }}</span>
-            </div>
-            <div class="flex items-center gap-0.5">
-              <button class="p-[2px] rounded hover:opacity-100 opacity-80" @click="toggleCollapse(panel.id)" aria-label="折叠/展开">
-                <span class="icon-triangle-down"></span>
-              </button>
-              <button class="p-[2px] rounded hover:opacity-100 opacity-80" @click="maximizePanel(panel.id)" aria-label="最大化">
-                <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
-                  <!-- 外框与底色（仅1px边框） -->
-                  <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
-                  <!-- 两行填充：上行1px浅蓝，下行标题栏色 -->
-                  <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
-                </svg>
-              </button>
-              <button class="p-[2px] rounded hover:opacity-100 opacity-80" @click="closePanel(panel.id)" aria-label="关闭">
-                <span class="icon-x"></span>
-              </button>
-            </div>
-          </div>
-          <!-- 工具栏：位于标题栏下方，右侧扩展钮 -->
-          <div class="h-6 bg-[#d5e2f6] text-[#2c3e7a] px-2 flex items-center justify-between border-b border-[#c7d2ea]">
-            <div class="flex items-center gap-2">
-              <span class="text-xs">工具栏</span>
-              <button v-if="panel.toolbarExpanded" class="px-2 py-0.5 text-xs bg-white/60 rounded hover:bg-white">示例按钮</button>
-            </div>
-            <button class="px-2 py-0.5 text-xs rounded hover:bg-white/40" @click="toggleToolbarExpand(panel.id)" aria-label="展开工具栏">
-              <i class="fa-solid" :class="panel.toolbarExpanded ? 'fa-angles-left' : 'fa-angles-right'"></i>
-            </button>
-          </div>
-          <!-- 内容区：可折叠 -->
-          <div class="bg-[#f5f7fb] flex-1" v-show="!panel.collapsed"></div>
-        </div>
-      </div>
+        :id="panel.id"
+        :title="panel.title"
+        :x="panel.x"
+        :y="panel.y"
+        :width="panel.width"
+        :height="panel.height"
+        :collapsed="panel.collapsed"
+        :toolbarExpanded="panel.toolbarExpanded"
+        @toggleCollapse="toggleCollapse"
+        @maximize="maximizePanel"
+        @close="closePanel"
+        @toggleToolbar="toggleToolbarExpand"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-
+import Panel from '../DockLayout/Panel.vue';
 // 顶部控制栏按钮的引用
 const layoutFileInput = ref(null);
 const panelHost = ref(null);

From 9d4e008c0e96e2bf2acc2a8eb672533b84c02e72 Mon Sep 17 00:00:00 2001
From: JoyD <12854922+zqm114@user.noreply.gitee.com>
Date: Thu, 30 Oct 2025 22:17:58 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue | 168 ++++++++++++++++++
 .../Robot/Web/src/views/DockLayoutTest.vue    |  38 ++++
 2 files changed, 206 insertions(+)
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
new file mode 100644
index 0000000..eac70c1
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="vs-area select-none">
+    <!-- 顶部标题栏 -->
+    <div class="vs-title-bar">
+      <div class="vs-title-left">
+        <span class="vs-app-icon">◈</span>
+        <span class="vs-title-text">{{ title || 'GlobalHook_Test' }}</span>
+      </div>
+      <div class="vs-title-right">
+        <button class="vs-btn">−</button>
+        <button class="vs-btn">□</button>
+        <button class="vs-btn vs-close">×</button>
+      </div>
+    </div>
+
+    <!-- 面板标题（左/右） -->
+    <div class="vs-pane-headers">
+      <div class="vs-pane-header">
+        <span class="hdr-text">输出</span>
+        <span class="hdr-icon">▼</span>
+        <span class="hdr-close">×</span>
+      </div>
+      <div class="vs-pane-sep"></div>
+      <div class="vs-pane-header">
+        <span class="hdr-text">Git 更改</span>
+        <span class="hdr-icon">▼</span>
+        <span class="hdr-close">×</span>
+      </div>
+    </div>
+
+    <!-- 内容区域（左右分栏） -->
+    <div class="vs-content">
+      <!-- 左侧（输出） -->
+      <div class="vs-left">
+        <div class="left-blank"></div>
+      </div>
+      <div class="vs-divider"></div>
+      <!-- 右侧（Git 更改） -->
+      <div class="vs-right">
+        <div class="sec-text">初始化、备份和共享存储库。</div>
+        <div class="vs-card">
+          <span class="card-icon">🛠️</span>
+          <span class="card-text">创建 Git 存储库...</span>
+        </div>
+        <div class="sec-text">从 GitHub 或 Azure DevOps 等联机存储库获取代码。</div>
+        <div class="vs-card">
+          <span class="card-icon">⬇️</span>
+          <span class="card-text">克隆存储库...</span>
+        </div>
+        <div class="hint-text">检出分支、创建标签、管理子模块...</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, default: 'GlobalHook_Test' },
+  resizable: { type: Boolean, default: true }
+})
+</script>
+
+<style scoped>
+:root { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+
+/* 颜色（贴近 VS 蓝色主题） */
+.vs-area {
+  --vs-blue-top: #4f72b3;
+  --vs-blue-bottom: #3c5a99;
+  --vs-blue-deep: #2c3e7a;
+  --vs-tab-blue: #4869a8;
+  --vs-border: #c7d2ea;
+  --vs-bg: #f5f7fb;
+  --vs-panel: #ffffff;
+  --vs-muted: #6b7aa9;
+  --vs-accent: #f0a000;
+}
+
+/* 容器 */
+.vs-area {
+  display: flex;
+  flex-direction: column;
+  background: var(--vs-bg);
+  border: 1px solid var(--vs-border);
+  min-width: 400px;
+  min-height: 200px;
+}
+
+/* 标题栏 */
+.vs-title-bar {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  color: #ffffff;
+  background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
+  border-bottom: 1px solid var(--vs-blue-deep);
+}
+.vs-title-left { display: flex; align-items: center; gap: 6px; }
+.vs-app-icon { font-size: 12px; opacity: 0.9; }
+.vs-title-text { font-size: 13px; }
+.vs-title-right { display: flex; align-items: center; gap: 6px; }
+.vs-btn {
+  width: 22px; height: 18px; line-height: 18px;
+  color: #ffffff; background: transparent; border: none; padding: 0; cursor: default;
+}
+.vs-btn:hover { background: rgba(255,255,255,0.12); }
+.vs-close:hover { background: #e81123; }
+
+/* 面板标题行（左右） */
+.vs-pane-headers {
+  display: flex; align-items: center;
+  height: 26px; background: var(--vs-tab-blue);
+  border-bottom: 1px solid var(--vs-blue-deep);
+  color: #eaf1ff;
+  padding: 0 6px;
+}
+.vs-pane-header {
+  display: flex; align-items: center; gap: 8px;
+  height: 100%; padding: 0 10px;
+}
+.vs-pane-sep {
+  width: 1px; height: 18px; background: rgba(255,255,255,0.3);
+  margin: 0 8px;
+}
+.hdr-text { font-size: 12px; }
+.hdr-icon { font-size: 10px; opacity: 0.9; }
+.hdr-close { font-size: 12px; opacity: 0.9; }
+.hdr-close:hover { opacity: 1; }
+
+/* 内容区域 */
+.vs-content { display: flex; flex: 1; overflow: hidden; }
+
+/* 左侧输出 */
+.vs-left { flex: 1; background: var(--vs-panel); display: flex; }
+.left-blank { flex: 1; background: #eef1f9; border-right: 1px solid var(--vs-border); }
+
+/* 中间分割线 */
+.vs-divider { width: 1px; background: var(--vs-border); }
+
+/* 右侧 Git 更改 */
+.vs-right { flex: 1; background: var(--vs-panel); padding: 10px; font-size: 12px; color: #000; }
+.sec-text { margin-bottom: 8px; }
+.vs-card {
+  display: inline-flex; align-items: center; gap: 8px;
+  background: #fff; border: 1px solid var(--vs-border);
+  padding: 6px 8px; border-radius: 2px; margin-bottom: 10px;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
+}
+.card-icon { color: var(--vs-accent); }
+.card-text { color: #000; }
+.hint-text { color: #666; }
+
+/* 滚动条（接近 VS） */
+:deep(::-webkit-scrollbar) { width: 12px; height: 12px; }
+:deep(::-webkit-scrollbar-track) { background: var(--vs-bg); border-left: 1px solid var(--vs-border); }
+:deep(::-webkit-scrollbar-thumb) {
+  background: linear-gradient(to bottom, #d0d6ea, #c0c7e0);
+  border: 1px solid #b0b6d6; border-radius: 6px;
+}
+:deep(::-webkit-scrollbar-thumb:hover) { background: linear-gradient(to bottom, #c1c7e2, #b2b8d9); }
+
+:deep(*) { box-sizing: border-box; }
+</style>
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
index 6360031..166ac14 100644
--- a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
+++ b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
@@ -11,6 +11,12 @@
           >
             添加浮动窗口
           </button>
+          <button 
+            @click="addPanelArea()"
+            class="px-3 py-1 bg-green-50 text-green-600 rounded hover:bg-green-100 text-sm"
+          >
+            添加浮动面板区
+          </button>
         </div>
       </div>
       <div class="flex items-center space-x-2">
@@ -44,6 +50,18 @@
 
     <!-- 预留主区域（暂不放面板） -->
     <div ref="panelHost" class="flex-1 w-full h-[calc(100%-4rem)] relative bg-gray-100">
+      <!-- 浮动面板区域渲染 -->
+      <div
+        v-for="area in panelAreas"
+        :key="area.id"
+        class="absolute"
+        :style="{ top: area.y + 'px', left: area.x + 'px', width: area.width + 'px', height: area.height + 'px' }"
+      >
+        <Area :id="area.id" :title="area.title">
+          <!-- 区域内容区域 -->
+        </Area>
+      </div>
+      
       <!-- 浮动面板渲染区（使用抽取的组件） -->
       <Panel
         v-for="panel in floatingPanels"
@@ -68,13 +86,17 @@
 <script setup>
 import { ref } from 'vue';
 import Panel from '../DockLayout/Panel.vue';
+import Area from '../DockLayout/Area.vue';
 // 顶部控制栏按钮的引用
 const layoutFileInput = ref(null);
 const panelHost = ref(null);
 
 // 浮动面板列表
 const floatingPanels = ref([]);
+// 面板区域列表
+const panelAreas = ref([]);
 let nextPanelIdx = 1;
+let nextAreaIdx = 1;
 
 function addPanel(position) {
   console.log('[DockLayoutTest] addPanel clicked:', position);
@@ -99,6 +121,22 @@ function addFloatingPanel() {
   floatingPanels.value.push(panel);
 }
 
+function addPanelArea() {
+  // 添加浮动面板区域
+  const defaultSize = { width: 400, height: 300 };
+  const offset = 24;
+  const idx = nextAreaIdx++;
+  const area = {
+    id: 'area-' + idx,
+    title: '面板区域 ' + idx,
+    x: offset * idx,
+    y: offset * idx,
+    width: defaultSize.width,
+    height: defaultSize.height
+  };
+  panelAreas.value.push(area);
+}
+
 function closePanel(id) {
   floatingPanels.value = floatingPanels.value.filter(p => p.id !== id);
 }

From 2526da2c45827712e30d5906846b8dc3d35ab1a0 Mon Sep 17 00:00:00 2001
From: JoyD <12854922+zqm114@user.noreply.gitee.com>
Date: Thu, 30 Oct 2025 22:36:40 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(docklayout):=20=E9=87=8D=E7=BB=98=20Ar?=
 =?UTF-8?q?ea.vue=20=E6=A0=87=E9=A2=98=E6=A0=8F=E4=B8=8E=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E9=99=A4=E9=9D=A2=E6=9D=BF=E6=A0=8F=E5=B9=B6?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=A9=BA=E7=99=BD=E5=8C=BA=E9=85=8D=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BA=20#f5f7fb?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue | 57 ++++++-------------
 1 file changed, 17 insertions(+), 40 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index eac70c1..8b5814c 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -6,49 +6,26 @@
         <span class="vs-app-icon">◈</span>
         <span class="vs-title-text">{{ title || 'GlobalHook_Test' }}</span>
       </div>
-      <div class="vs-title-right">
-        <button class="vs-btn">−</button>
-        <button class="vs-btn">□</button>
-        <button class="vs-btn vs-close">×</button>
+      <div class="vs-title-right title-bar-buttons flex items-center gap-0.5">
+        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="最大化">
+          <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+            <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1"></rect>
+            <rect x="3" y="3" width="5" height="1" fill="#b8c6ff"></rect>
+            <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c"></rect>
+          </svg>
+        </button>
+        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭">
+          <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+            <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1"></line>
+            <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
+          </svg>
+        </button>
       </div>
     </div>
 
-    <!-- 面板标题（左/右） -->
-    <div class="vs-pane-headers">
-      <div class="vs-pane-header">
-        <span class="hdr-text">输出</span>
-        <span class="hdr-icon">▼</span>
-        <span class="hdr-close">×</span>
-      </div>
-      <div class="vs-pane-sep"></div>
-      <div class="vs-pane-header">
-        <span class="hdr-text">Git 更改</span>
-        <span class="hdr-icon">▼</span>
-        <span class="hdr-close">×</span>
-      </div>
-    </div>
-
-    <!-- 内容区域（左右分栏） -->
+    <!-- 内容区域（空） -->
     <div class="vs-content">
-      <!-- 左侧（输出） -->
-      <div class="vs-left">
-        <div class="left-blank"></div>
-      </div>
-      <div class="vs-divider"></div>
-      <!-- 右侧（Git 更改） -->
-      <div class="vs-right">
-        <div class="sec-text">初始化、备份和共享存储库。</div>
-        <div class="vs-card">
-          <span class="card-icon">🛠️</span>
-          <span class="card-text">创建 Git 存储库...</span>
-        </div>
-        <div class="sec-text">从 GitHub 或 Azure DevOps 等联机存储库获取代码。</div>
-        <div class="vs-card">
-          <span class="card-icon">⬇️</span>
-          <span class="card-text">克隆存储库...</span>
-        </div>
-        <div class="hint-text">检出分支、创建标签、管理子模块...</div>
-      </div>
+      <div class="vs-right"></div>
     </div>
   </div>
 </template>
@@ -143,7 +120,7 @@ const props = defineProps({
 .vs-divider { width: 1px; background: var(--vs-border); }
 
 /* 右侧 Git 更改 */
-.vs-right { flex: 1; background: var(--vs-panel); padding: 10px; font-size: 12px; color: #000; }
+.vs-right { flex: 1; background: #f5f7fb; padding: 0; }
 .sec-text { margin-bottom: 8px; }
 .vs-card {
   display: inline-flex; align-items: center; gap: 8px;