feat: ClockLab —— 可调速桌面时钟（数字/表盘，支持倍率、暂停、倒转、快进）
一个用于演练/演示的桌面时钟工具：两个窗口 —— 控制窗口（普通）与时钟窗口（无边框、 可拖动、可拖边缘改大小，由控制窗口开与关）。 功能 - 两个窗口各自的「始终置顶」开关 - 显示样式：纯数字 / 圆形表盘，切换立即生效 - 实时设定时间（含「填入当前显示时间」） - 倍率：支持正数、负数（倒转）、0（暂停）、小数 - 暂停 / 继续（继续时回到暂停前的倍率，按钮文案会显示是几倍） - 快进五档：+5 秒 / +1 分钟 / +5 分钟 / +10 分钟 / +30 分钟 实现要点 - 走时是「基准时间 + 基准时刻 + 倍率」的锚点式模型（不累加、零漂移）； 倍率、暂停、倒转、快进因此是同一套机制的四个用法，互不打架 - 跳转动画做在「呈现时间」这一层：数字滚动与表盘指针扫动共用同一个中间值， 所以永远同步，也不会跨 12 点倒着转一圈 - 无边框窗口的拖动（CSS app-region + 控件 no-drag）与拖边缘改大小 （自己算几何 + IPC setBounds，因为 frame:false 下系统边缘命中不可靠） 测试 152 例：走时模型 / 改大小几何 / 呈现时间 / 两个渲染进程（DOM 桩）
This commit is contained in:
AskaEth committed
1 parent
892b9190aa
commit
9c7081b21d
27 files changed
+5467
-2
No files matched your search
@@ -0,0 +1,214 @@
|
||||
:root {
|
||||
--bg: #05070c;
|
||||
--fg: #f2f6ff;
|
||||
--accent: #4fd1c5;
|
||||
--muted: #7d8aa5;
|
||||
--handle: 10px;
|
||||
--corner: 18px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
/* 拖动区：无边框窗口靠它实现「按住任意空白处移动窗口」 */
|
||||
.stage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: radial-gradient(120% 140% at 50% 0%, #131a29 0%, var(--bg) 70%);
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.digital-time {
|
||||
font-family: Consolas, 'Cascadia Mono', 'DejaVu Sans Mono', monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--fg);
|
||||
text-shadow: 0 0 28px rgba(79, 209, 197, 0.35);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.digital-date {
|
||||
margin-top: 0.7em;
|
||||
/* 用 vmin 跟着窗口缩放，投到大屏时日期才不会小得看不见 */
|
||||
font-size: clamp(13px, 5.5vmin, 64px);
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.analog-view {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dial {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.dial-face {
|
||||
fill: #0b1020;
|
||||
stroke: #26314a;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.tick {
|
||||
stroke: #46577a;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.tick-major {
|
||||
stroke: #8fa4cc;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.numeral {
|
||||
fill: #8fa4cc;
|
||||
font-family: Consolas, 'DejaVu Sans Mono', monospace;
|
||||
font-size: 18px;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: central;
|
||||
}
|
||||
|
||||
.hand {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.hand-hour {
|
||||
stroke: #e6ecff;
|
||||
stroke-width: 7;
|
||||
}
|
||||
|
||||
.hand-minute {
|
||||
stroke: #c3cfe8;
|
||||
stroke-width: 4.5;
|
||||
}
|
||||
|
||||
.hand-second {
|
||||
stroke: var(--accent);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.hand-cap {
|
||||
fill: var(--accent);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 12px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.06em;
|
||||
color: #0b1020;
|
||||
background: var(--accent);
|
||||
opacity: 0.92;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.badge[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 1;
|
||||
font-size: 18px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: #9fb0cc;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
/* 关键：按钮必须退出拖动区，否则在无边框窗口里点不动 */
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.stage:hover .close-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #fff;
|
||||
background: #e0555a;
|
||||
}
|
||||
|
||||
/* 自定义改大小的边缘热区：放在 stage 之外，天然不属于拖动区，鼠标事件能正常到达 */
|
||||
.rz {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.rz-n,
|
||||
.rz-s {
|
||||
left: var(--corner);
|
||||
right: var(--corner);
|
||||
height: var(--handle);
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.rz-w,
|
||||
.rz-e {
|
||||
top: var(--corner);
|
||||
bottom: var(--corner);
|
||||
width: var(--handle);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.rz-n { top: 0; }
|
||||
.rz-s { bottom: 0; }
|
||||
.rz-w { left: 0; }
|
||||
.rz-e { right: 0; }
|
||||
|
||||
.rz-nw,
|
||||
.rz-ne,
|
||||
.rz-sw,
|
||||
.rz-se {
|
||||
width: var(--corner);
|
||||
height: var(--corner);
|
||||
}
|
||||
|
||||
.rz-nw { top: 0; left: 0; cursor: nwse-resize; }
|
||||
.rz-se { bottom: 0; right: 0; cursor: nwse-resize; }
|
||||
.rz-ne { top: 0; right: 0; cursor: nesw-resize; }
|
||||
.rz-sw { bottom: 0; left: 0; cursor: nesw-resize; }
|
||||
Reference in new issue
Block a user