fix(一周安排小组件): 面板关横向滚动(修外框 X 轴滚动条、日期条被裁)+ 色系 #5979ea、列表区固定 3 条、信息行全空落「-」、备注无则不渲染
build / build (push) Successful in 43s

- 色系:#2d8cf0 / #1d4ed8 整族换 #5979ea(hover #4864d8),覆盖今日方块、圆点、查看概览、展开、今日星期
- 列表区:268px(≈5 条) → calc(var(--wk-row) * 3) = 171px(正好 3 条 + 滚动),新增 --wk-row: 57px
- 条目等高 57px;信息行(地点 · 负责人 · 出席对象)恒渲染,三者全空落「-」,不再留白
- 备注:无备注整块不渲染;超 2 行才出「展开」且贴第二行末尾;remarkText 加 trim;换周重置 remarkOverflow
- 「查看概览 ›」→「查看概览」(去掉箭头字符)
- 修 X 轴滚动条根因(views/index.vue):widgetOptions 的 scrollPanel 关掉 scrollingX
  原 scrollingX=true 时 vuescroll 给 .__view 内联 width:fit-content,包含块被最长文本撑到 ≈425px
  ⇒ 面板 scrollWidth 561 > clientWidth 391,外框出 #333 横向条、日期条 7 列被裁成 5 列、长条目省略号失效
  同时 .content { min-width: 0 } 兜底(flex 项默认 min-width:auto 会让 nowrap 文本不收缩)
This commit is contained in:
chenxing
2026-10-16 09:50:39 +08:00
parent 651e7e16f3
commit 5d7b8526f4
2 changed files with 61 additions and 19 deletions
+49 -18
View File
@@ -43,9 +43,9 @@
:href="overviewUrl"
target="_blank"
rel="noopener"
>查看概览 ›</a>
>查看概览</a>
</div>
<!-- 列表区固定高度(≈5 条单行):超出滚动;空态(休/节假日/无安排)同高,卡片高度不跳 -->
<!-- 列表区固定高度(= 3 条 × --wk-row):超出滚动;空态(休/节假日/无安排)同高,卡片高度不跳 -->
<div class="wk-list-area">
<ul v-if="currentList.length > 0" class="wk-list">
<li v-for="(item, index) in currentList" :key="index">
@@ -53,14 +53,16 @@
<span class="content" :title="item.contents">{{ item.contents }}</span>
<span class="time">{{ item.times }}</span>
</div>
<div v-if="metaOf(item)" class="meta">{{ metaOf(item) }}</div>
<!-- 信息行恒渲染:地点 / 负责人 / 出席对象全空时落「-」,不留白(条目保持等高) -->
<div class="meta">{{ metaOf(item) || "-" }}</div>
</li>
</ul>
<div v-else class="no-data">{{ currentDayLabel }}</div>
</div>
<!-- 备注:默认 2 行截断,超出才给「展开/收起」;空备注整块不渲染 -->
<div v-if="remarkText" class="wk-remark">
<!-- 备注:无备注整块不渲染(不占位,卡片高度随内容);
默认 2 行截断,溢出才给「展开」(折叠态按钮贴第二行末尾) -->
<div v-if="remarkText" class="wk-remark" :class="{ collapsed: !remarkExpanded }">
<div ref="refRemark" class="rk-txt" :class="{ expanded: remarkExpanded }">{{ remarkText }}</div>
<span v-if="remarkOverflow" class="rk-more" @click="toggleRemark">{{ remarkExpanded ? "收起" : "展开" }}</span>
</div>
@@ -139,7 +141,8 @@ const titleFull = computed<string>(() => {
* 真正无周对象(oapi 降级返回 {})才走大图标空态。
*/
const hasWeek = computed(() => titleStr.value !== "");
const remarkText = computed<string>(() => weekData.value.remark || "");
// trim:备注尾部换行/空格会多出一个空行,让「展开」在只有 2 行内容时也误判溢出
const remarkText = computed<string>(() => String(weekData.value.remark || "").trim());
const canPrev = computed(() => weekOffset.value > minWeek.value);
const canNext = computed(() => weekOffset.value < maxWeek.value);
@@ -185,6 +188,7 @@ async function loadWeek(week: number) {
loading.value = false;
// 换周/换数据后重置备注折叠态并重测溢出
remarkExpanded.value = false;
remarkOverflow.value = false;
nextTick(measureRemark);
reportHeight();
}
@@ -246,7 +250,7 @@ function monthDay(day: any) {
return String((day && day.dateText) || "");
}
/** 次要信息行:地点 / 负责人 / 参与人员,全部为空则不显示 */
/** 次要信息行:地点 / 负责人 / 参与人员;三者全空时落「-」,不留白(条目保持等高) */
function metaOf(item: any) {
if (!item) return "";
const parts: string[] = [];
@@ -275,7 +279,15 @@ function reportHeight() {
</script>
<style lang="scss" scoped>
/* 主色(2026-10-16 指定):今日方块 / 七日条圆点 / 「查看概览」/「展开」/ 今日星期 */
$wk-primary: #5979ea;
$wk-primary-dark: #4864d8;
.wg-weekplan {
/* 一条安排的高度:内容行(15px × 1.5 = 22.5) + 信息行(12.5px × 1.5 = 18.75)
+ 上下 padding 12 + 分隔线 1 ≈ 56.25px ⇒ 取 57px 留余量。
有/无「地点·负责人·参与人」的条目都占这个高度,标题行始终对齐。 */
--wk-row: 57px;
padding: 6px 0 10px;
}
.wk-title {
@@ -337,7 +349,7 @@ function reportHeight() {
width: 4px;
height: 4px;
border-radius: 50%;
background: #2d8cf0;
background: $wk-primary;
visibility: hidden;
}
&.has b::after {
@@ -353,12 +365,12 @@ function reportHeight() {
}
// 今日:蓝底白字方块(置最后,压过 rest / holiday 的日期字色)
&.is-on {
color: #1d4ed8;
color: $wk-primary;
b {
width: 28px;
margin: 2px auto 0;
padding: 1px 0;
background: #2d8cf0;
background: $wk-primary;
color: #fff;
border-radius: 4px;
}
@@ -380,17 +392,17 @@ function reportHeight() {
.wk-overview {
flex: 0 0 auto;
font-size: 13px;
color: #2d8cf0;
color: $wk-primary;
text-decoration: none;
cursor: pointer;
&:hover {
color: #1d6fd0;
color: $wk-primary-dark;
}
}
/* 列表区:固定高度 = 5 条(旧版实测行距 ≈54px × 5 ≈ 268px,与「内容+地点」两行条目 5 条相当);
多条滚动、空态占位同高,避免切到「休/节假日」时卡片高度跳变 */
/* 列表区:固定高度 = 3 条(3 × --wk-row,即 171px);多条滚动、空态占位同高,
避免切到「休/节假日」时卡片高度跳变 */
.wk-list-area {
height: 268px;
height: calc(var(--wk-row) * 3);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
@@ -411,6 +423,10 @@ function reportHeight() {
padding: 0;
li {
margin: 0 15px;
// 条目等高:有/无「地点·负责人·参与人」都占一行高度(无信息落「-」占位,不留白),
// 保证标题行纵向对齐;overflow 兜住固定高度可能带来的亚像素裁切
height: var(--wk-row);
overflow: hidden;
padding: 6px 0;
border-bottom: 1px solid #f2f4f7;
font-size: 15px;
@@ -425,6 +441,9 @@ function reportHeight() {
}
.content {
flex: 1 1 auto;
// ⚠️ 必须显式 min-width:0:flex 项默认 min-width:auto,遇 nowrap 长文本
// 会以 max-content 为下限而不收缩 ⇒ text-overflow 永不触发
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -443,8 +462,9 @@ function reportHeight() {
white-space: nowrap;
}
}
/* 备注:与「安排数据」区分——上方一条分割线 + 浅底块,跟白色列表拉开层次 */
/* 备注:与「安排数据」区分——上方一条分割线 + 浅底块,跟白色列表拉开层次;无备注整块不渲染 */
.wk-remark {
position: relative;
margin: 8px 15px 0;
padding: 8px 10px;
background: #f7f8fa;
@@ -465,15 +485,26 @@ function reportHeight() {
overflow: visible;
}
}
// 折叠态:正文右侧给「展开」留位(第二行以省略号收尾),按钮贴第二行末尾(右端)
&.collapsed .rk-txt {
padding-right: 34px;
}
&.collapsed .rk-more {
position: absolute;
right: 10px;
bottom: 8px;
// 与备注块同底色,压住可能蹭到的正文尾部
background: #f7f8fa;
}
.rk-more {
display: inline-block;
margin-top: 2px;
font-size: 13px;
color: #2d8cf0;
color: $wk-primary;
cursor: pointer;
user-select: none;
&:hover {
color: #1d6fd0;
color: $wk-primary-dark;
}
}
}
+12 -1
View File
@@ -216,9 +216,20 @@ const dragObj = reactive({
parentH: 0,
});
/**
* vuescroll 面板参数。
* ⚠️ scrollingX 必须显式 false:vuescroll 默认 true,此时 native-panel 会给 .__view 内联
* `width: fit-content; min-width: 100%`,`.widget-item` 的包含块就被「最长的 nowrap 文本」
* 撑宽(白卡 357px → 内容 ≈425px)⇒ 列表条目 text-overflow 永不触发(文字顶到卡边被硬裁)、
* 七日条按更宽容器等分(六/日被裁),面板 scrollWidth > clientWidth ⇒ 外框出横向滚动条。
* 关掉后 .__view 走 `width: 100%` 分支。面板内组件均不依赖横向滚动:
* 课表自带 .tt-scroll(纵向)、自定义片段是 iframe width:100%。
*/
const widgetOps = {
vuescroll: {},
scrollPanel: {},
scrollPanel: {
scrollingX: false,
},
rail: {},
bar: {
background: "#333",