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