建立面板和区域组件
This commit is contained in:
JoyD
145
AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
Normal file
145
AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<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 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-content">
|
||||
<div class="vs-right"></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: #f5f7fb; padding: 0; }
|
||||
.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>
|
||||
Reference in New Issue
Block a user