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

修改Area.vue中的SVG路径定义

Browse Source
This commit is contained in:
zqm
2025-11-07 09:44:17 +08:00
parent ab997b4a88
commit b7d389e46d
1 changed files with 73 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,62 +92,96 @@
<!-- 内容区域 --> <!-- 内容区域 -->
<div class="vs-content"> <div class="vs-content">
<!-- 这里是内容区域，使用slot接收子组件，并监听Panel的maximize事件 --> <!-- 这里是内容区域，使用slot接收子组件，并监听Panel的maximize事件 -->
<slot @maximize="onPanelMaximize"></slot> <slot @maximize="onPanelMaximize"></slot>
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true"> <!-- 1. 定义可复用组件（symbol）：封装所有渐变和路径（只写一次） -->
<svg width="0" height="0" viewBox="0 0 40 40" aria-hidden="true">
<defs> <defs>
<!-- 渐变定义（共用，只写一次） -->
<linearGradient <linearGradient
id="lightGradient" id="lightGradient"
x1="0%" y1="0%" x1="0%" y1="0%" x2="100%" y2="100%">
x2="100%" y2="100%"> <stop offset="0%" stop-color="#DCE3F5" />
<stop offset="0%" stop-color="#DCE3F5" /> <!-- 高光色（比原色亮2个色阶） --> <stop offset="100%" stop-color="#B7BED1" />
<stop offset="100%" stop-color="#B7BED1" /> <!-- 阴影色（比原色暗2个色阶） -->
</linearGradient> </linearGradient>
<linearGradient <linearGradient
id="Area" id="Area"
x1="50%" y1="0%" x1="50%" y1="0%" x2="50%" y2="100%">
x2="50%" y2="100%">
<stop offset="0%" stop-color="#F0E2BC" /> <stop offset="0%" stop-color="#F0E2BC" />
<stop offset="100%" stop-color="#B09556" /> <stop offset="100%" stop-color="#B09556" />
</linearGradient> </linearGradient>
</defs> </defs>
<path
fill="#61697E" <!-- 封装所有图形为 symbol（id 用于后续调用） -->
fill-rule="evenodd" <symbol id="shared-icon" viewBox="0 0 40 40">
clip-rule="evenodd" <path
d="M0 0 L40 0 L40 40 L0 40 Z fill="#61697E"
M1 1 L39 1 L39 39 L1 39 Z" /> fill-rule="evenodd"
<path clip-rule="evenodd"
fill="#A1A9C4" d="M0 0 L40 0 L40 40 L0 40 Z M1 1 L39 1 L39 39 L1 39 Z" />
fill-rule="evenodd" <path
clip-rule="evenodd" fill="#A1A9C4"
d="M1 1 L39 1 L39 39 L1 39 Z fill-rule="evenodd"
M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z" /> clip-rule="evenodd"
<path d="M1 1 L39 1 L39 39 L1 39 Z M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z" />
fill="#7E869C" <path
fill-rule="evenodd" fill="#7E869C"
clip-rule="evenodd" fill-rule="evenodd"
d="M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z clip-rule="evenodd"
M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" /> d="M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
<path <path
fill="url(#lightGradient)" fill="url(#lightGradient)"
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
d="M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" /> d="M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
<path <path
fill="#4C5E83" fill="#4C5E83"
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" /> d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
<path
fill="#4C5E83"
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 30 L20 26 L23 30 Z" />
</symbol>
</svg>
<!-- 2. 第一个 SVG：不旋转，直接调用共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<use xlink:href="#shared-icon" />
<path
fill="url(#Area)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 13 L30 13 L30 19 L10 19 Z" />
</svg>
<!-- 3. 第二个 SVG：旋转90度，调用同一共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<use xlink:href="#shared-icon" transform="rotate(90 20 20)" />
<path
fill="url(#Area)"
fill-rule="evenodd"
clip-rule="evenodd"
d="M21 14 L30 14 L30 30 L21 30 Z" />
</svg>
<!-- 4. 第二个 SVG：旋转180度，调用同一共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<use xlink:href="#shared-icon" transform="rotate(180 20 20)" />
<path <path
fill="url(#Area)" fill="url(#Area)"
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
d="M10 13 L30 13 L30 19 L10 19 Z" /> d="M10 24 L30 24 L30 30 L10 30 Z" />
</svg>
<!-- 5. 第二个 SVG：旋转270度，调用同一共用组件 -->
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
<use xlink:href="#shared-icon" transform="rotate(270 20 20)" />
<path <path
fill="#4C5E83" fill="url(#Area)"
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
d="M16 30 L20 26 L23 30 Z" /> d="M10 14 L19 14 L19 30 L10 30 Z" />
</svg> </svg>
</div> </div>
</div> </div>