ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docklayout): 重绘 Area.vue 标题栏与按钮，移除面板栏并统一空白区配色为 #f5f7fb

Browse Source
This commit is contained in:
JoyD
2025-10-30 22:36:40 +08:00
parent 9d4e008c0e
commit 2526da2c45
1 changed files with 17 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
View File

@@ -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;