style(一周安排小组件): 选中态上下让出间距、时间列移到信息行最右端、标题改 14px

① 选中态不再「挤」：星期数 <span> 加 padding-bottom:3px（数字位置不动，把今日方块与圆点整体让下去）+ 圆点 bottom -8→-11px（今日格 -5.5→-8.5px，七格仍同线） ⇒ 星期数↔方块 4.1→6.6px、方块↔圆点 1.5→4.5px，七日条 63→66px ⚠️ 用 padding-bottom 而非 margin-bottom：后者会与 b 的 margin-top 折叠（max(正)+min(负)），今日格 −1px 与其余格 2px 走不同结果 ⇒ 今日数字偏低 1.75px ② 时间列移到信息行最右端：列表 DOM 由 .line[标题+时间] 改为 content(独占一行) + .meta[.meta-txt + .time]；.meta 用 flex space-between、 .time flex:0 0 auto；无时间不留位。标题可用宽度 232→314px（带时间那条） ③ 标题字号 15→14px（信息行 12.5px 不变） ④ 结构化骨架同步：星期条占位改 24px 外框（21 行盒 + 3 下留白）+ 内层 ::before 画 10px 条； ⚠️ 内层定位用父级 padding-top，不用子元素 margin-top（会塌出父级多 5.5px） harness 真组件复测：四态 367.58/367.59/367.58/367.58（差 0.01px）；今日墨迹中心 87 vs 其余 87.25（0.25px）；七格圆点中心全 107.5；.time 父级=meta、content 14px/block。
2026-10-16 15:27:26 +08:00
parent 04c12e2076
commit 5a080f502d
1 changed files with 55 additions and 31 deletions
@@ -59,12 +59,14 @@
            <div class="wk-list-area">
                <ul v-if="currentList.length > 0" class="wk-list">
                    <li v-for="(item, index) in currentList" :key="index">
-                        <div class="line">
-                            <span class="content" :title="item.contents">{{ item.contents }}</span>
-                            <span class="time" :class="{ 'is-cjk': isCjk(item.times) }">{{ item.times }}</span>
+                        <!-- 标题独占一行（右侧不再被时间占宽，长标题多显示约 8 字） -->
+                        <span class="content" :title="item.contents">{{ item.contents }}</span>
+                        <!-- 信息行恒渲染：地点 / 负责人 / 出席对象全空时落「-」，不留白（条目保持等高）；
+                             时间移到本行最右端；无时间不留位 -->
+                        <div class="meta">
+                            <span class="meta-txt">{{ metaOf(item) || "-" }}</span>
+                            <span v-if="item.times" class="time" :class="{ 'is-cjk': isCjk(item.times) }">{{ item.times }}</span>
                        </div>
-                        <!-- 信息行恒渲染：地点 / 负责人 / 出席对象全空时落「-」，不留白（条目保持等高） -->
-                        <div class="meta">{{ metaOf(item) || "-" }}</div>
                    </li>
                </ul>
                <div v-else class="no-data">{{ currentDayLabel }}</div>
@@ -372,6 +374,15 @@ $wk-primary-dark: #4864d8;
        // 底部留出圆点位置：整周无安排时也占位，日期条高度恒定
        padding: 4px 0 11px;
        cursor: pointer;
+        // 星期数：块级行盒 + 下留 3px —— 把今日方块与圆点整体让下去，数字本身位置不动
+        // （方块 28px 上下居中于数字，不加留白时上沿贴「星期数」4.1px、下沿贴圆点 1.5px）
+        // ⚠️ 必须用 padding-bottom 而非 margin-bottom：后者会与 b 的 margin-top 折叠
+        //（max(正) + min(负)），今日格的 −1px 与其余格的 2px 会走出不同结果 ⇒ 今日数字偏低 1.75px
+        > span {
+            display: block;
+            line-height: 21px;
+            padding-bottom: 3px;
+        }
        b {
            display: block;
            font-size: 15px;
@@ -381,12 +392,12 @@ $wk-primary-dark: #4864d8;
            // 圆点改锚数字块（不再锚格子）：格子被今日格 28px 方块拉高时圆点不再跟着沉
            position: relative;
        }
-        // 圆点绝对定位在数字块下方 6px（bottom:-8px ⇒ 点中心 = b 底边 + 6，与线上旧位一致）
+        // 圆点绝对定位在数字块下方 6px（bottom:-11px ⇒ 点中心 = b 底边 + 9，与留白一起把圆点让到方块下方）
        b::after {
            content: "";
            position: absolute;
            left: 50%;
-            bottom: -8px;
+            bottom: -11px;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
@@ -417,9 +428,9 @@ $wk-primary-dark: #4864d8;
                color: #fff;
                border-radius: 4px;
            }
-            // 方块比数字行盒高 5.5px，圆点随之低 2.5px ⇒ 上收 2.5px，七格圆点同线（格顶 + 55.5）
+            // 方块比数字行盒高 5.5px，圆点随之低 2.5px ⇒ 上收 2.5px，七格圆点同线
            b::after {
-                bottom: -5.5px;
+                bottom: -8.5px;
            }
        }
    }
@@ -473,17 +484,31 @@ $wk-primary-dark: #4864d8;
        overflow: hidden;
        padding: 6px 0;
        border-bottom: 1px solid #f2f4f7;
-        font-size: 15px;
        color: #344449;
        &:last-child {
            border-bottom: 0;
        }
-        .line {
-            display: flex;
-            align-items: center;
-        }
    }
+    // 标题独占一行（时间已移到信息行）：14px，右侧不再被时间占宽
    .content {
+        display: block;
+        font-size: 14px;
+        color: #344449;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    // 信息行：地点 / 负责人 / 参与人 在左，时间贴最右端；无时间时信息文本照常占满
+    .meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        margin-top: 2px;
+        font-size: 12.5px;
+        color: #98a2b0;
+    }
+    .meta-txt {
        flex: 1 1 auto;
        // ⚠️ 必须显式 min-width:0：flex 项默认 min-width:auto，遇 nowrap 长文本
        // 会以 max-content 为下限而不收缩 ⇒ text-overflow 永不触发
@@ -495,21 +520,11 @@ $wk-primary-dark: #4864d8;
    .time {
        flex: 0 0 auto;
        color: #6e7c87;
-        margin-left: 10px;
-        // 汉字型时间（全天/放假）降一档：同字号下汉字字面高 ≈1.29 × 数字（15px 实测 18px vs 14px），
-        // 15px 时观感比「14:00-15:00」明显偏大
+        // 汉字型时间（全天/放假）降一档：同字号下汉字字面高 ≈1.29 × 数字（15px 实测 18px vs 14px）
        &.is-cjk {
            font-size: 13px;
        }
    }
-    .meta {
-        margin-top: 2px;
-        font-size: 12.5px;
-        color: #98a2b0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
 }
 /* ---------- 加载态：结构化骨架（与内容逐段同构同高，换周不塌不跳） ----------
   标题 40 + 七日条 63 + 列表 171 + 备注区 66.59 + 根部 padding 16 ≈ 364.6px，
@@ -549,13 +564,22 @@ $wk-primary-dark: #4864d8;
            text-align: center;
            font-size: 14px;
            padding: 4px 0 11px;
-            // 星期条：inline-block 10px 高，行盒由 14px 字体的 21px strut 决定（与真实星期同行高）
+            // 星期条：外框 24px 与真实星期数同高（21px 行盒 + 3px 下留白），条本身 10px 居上
+            // ⚠️ 内层条的定位必须用父级 padding-top，不能用子元素 margin-top：
+            // 父级无 padding/border 时子元素上边距会「塌」到父级外面，凭空多出 5.5px 高度
            .w {
-                display: inline-block;
+                display: block;
                width: 14px;
-                height: 10px;
-                border-radius: 3px;
-                background: var(--wk-skel);
+                height: 24px;
+                margin: 0 auto;
+                padding-top: 5.5px;
+                &::before {
+                    content: "";
+                    display: block;
+                    height: 10px;
+                    border-radius: 3px;
+                    background: var(--wk-skel);
+                }
            }
            b {
                display: block;
@@ -595,7 +619,7 @@ $wk-primary-dark: #4864d8;
                border-bottom: 0;
            }
            .l {
-                height: 22.5px;
+                height: 21px;
                display: flex;
                align-items: center;
                gap: 10px;