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

修改VS图标

Browse Source
This commit is contained in:
JoyD
2025-10-31 23:58:26 +08:00
parent 07522ce451
commit b87b984a4d
2 changed files with 61 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,31 @@
<template>
<div class="vs-area select-none">
<div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }">
<!-- 顶部标题栏 -->
<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 class="vs-app-icon" aria-label="AppIcon">
<svg class="vs-icon" viewBox="0 0 17 17" aria-hidden="true">
<path
fill="#68217A"
fill-rule="evenodd"
clip-rule="evenodd"
style="shape-rendering: crispEdges;"
d="M1.5 4 L4.5 2 L12.5 6.2 L12.5 7.8 L4.5 12 L1.5 10 L6.2 7 Z
M4.7 4.8 L6.3 5.7 L4.7 6.6 Z
M10.9 8.2 L9.3 7.3 L10.9 6.4 Z" />
</svg>
</div>
<span class="vs-title-text">{{ title || '面板区' }}</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="最大化">
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="最大化" @click="onToggleMaximize">
<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="关闭">
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭" @click="onClose">
<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>
@@ -25,19 +36,47 @@
<!-- 内容区域（空） -->
<div class="vs-content">
<div class="vs-right"></div>
<div class="vs-right">
<div class="vs-icon-stage">
<div aria-label="AppIcon">
<svg width="560" height="560" viewBox="0 0 415 415" aria-hidden="true">
<path
fill="#68217A"
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 105 L45 85 L145 165 L315 0 L415 45 L415 375 L310 415 L150 255 L45 335 L0 315 Z
M45 145 L105 210 L45 270 Z
M205 210 L315 125 L310 290 Z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue'
import { defineProps, computed, defineEmits } from 'vue'
const props = defineProps({
id: { type: String, required: true },
title: { type: String, default: 'GlobalHook_Test' },
resizable: { type: Boolean, default: true }
title: { type: String, default: '面板区' },
resizable: { type: Boolean, default: true },
// 新增：初始状态（支持中文值）
WindowState: { type: String, default: '正常' }
})
// 根据初始状态计算是否最大化
const isMaximized = computed(() => props.WindowState === '最大化' || props.WindowState === 'maximized')
const emit = defineEmits(['update:WindowState', 'close'])
const onToggleMaximize = () => {
const next = isMaximized.value ? '正常' : '最大化'
emit('update:WindowState', next)
}
const onClose = () => emit('close')
</script>
<style scoped>
@@ -142,4 +181,10 @@ const props = defineProps({
:deep(::-webkit-scrollbar-thumb:hover) { background: linear-gradient(to bottom, #c1c7e2, #b2b8d9); }
:deep(*) { box-sizing: border-box; }
.vs-area.is-maximized { width: 100%; height: 100%; }
.vs-icon-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; overflow: auto; }
.vs-app-icon--x200 { width: 2800px; height: 2800px; }
.vs-app-icon { width: 14px; height: 14px; display: inline-block; background: transparent; opacity: 0.95; }
.vs-icon { width: 100%; height: 100%; shape-rendering: crispEdges; }
.vs-app-icon svg { display: block; }
</style>