feat(wrapped-ui): 新增 Win98 主题与桌面化外观

- 主题系统新增 win98(显示名 Windows 98,快捷键扩展到 F1-F4),并区分 retro(pixel/CRT) 与桌面 GUI 主题
- 年度总结页新增 Win98 桌面背景与底部任务栏(背景色/视口高度适配)
- 封面与卡片 slide 形态支持 Win98 窗口外观(title bar/icon/controls)
- 主题切换器补充 Win98 选项并新增 Win98 专属切换器
- 新增 Win98 图标资源(Start + 桌面图标)
This commit is contained in:
2977094657
2026-02-02 00:04:54 +08:00
parent 7ce6abecca
commit 980f15d0a4
19 changed files with 767 additions and 29 deletions

View File

@@ -38,6 +38,25 @@
>[+]</button>
</div>
<!-- Win98 风格 -->
<div v-else-if="theme === 'win98'" class="year-win98">
<div class="win98-year-box">
<button
class="win98-arrow"
:disabled="!canGoPrev"
@click="prevYear"
aria-label="Previous year"
></button>
<span class="win98-year-value">{{ modelValue }}</span>
<button
class="win98-arrow"
:disabled="!canGoNext"
@click="nextYear"
aria-label="Next year"
></button>
</div>
</div>
<!-- Modern 风格下拉菜单默认 -->
<div v-else class="year-modern">
<div class="relative inline-flex items-center">
@@ -240,4 +259,57 @@ onBeforeUnmount(() => {
min-width: 50px;
text-align: center;
}
/* ========== Win98 风格 ========== */
.year-win98 {
font-family: "MS Sans Serif", Tahoma, "Microsoft Sans Serif", "Segoe UI", sans-serif;
font-size: 11px;
}
.win98-year-box {
display: inline-flex;
align-items: center;
background: #c0c0c0;
padding: 2px;
border: 1px solid #808080;
box-shadow:
inset 1px 1px 0 #ffffff,
inset -1px -1px 0 #000000;
}
.win98-year-value {
min-width: 62px;
text-align: center;
color: #000000;
padding: 2px 8px;
background: #ffffff;
border: 1px solid #808080;
box-shadow:
inset 1px 1px 0 #000000,
inset -1px -1px 0 #ffffff;
}
.win98-arrow {
width: 24px;
height: 22px;
background: #c0c0c0;
border: 1px solid #808080;
box-shadow:
inset 1px 1px 0 #ffffff,
inset -1px -1px 0 #000000;
cursor: pointer;
font: inherit;
line-height: 1;
}
.win98-arrow:active:not(:disabled) {
box-shadow:
inset 1px 1px 0 #000000,
inset -1px -1px 0 #ffffff;
}
.win98-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>