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"
|
:href="overviewUrl"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
>查看概览 ›</a>
|
>查看概览</a>
|
||||||
</div>
|
</div>
|
||||||
<!-- 列表区固定高度(≈5 条单行):超出滚动;空态(休/节假日/无安排)同高,卡片高度不跳 -->
|
<!-- 列表区固定高度(= 3 条 × --wk-row):超出滚动;空态(休/节假日/无安排)同高,卡片高度不跳 -->
|
||||||
<div class="wk-list-area">
|
<div class="wk-list-area">
|
||||||
<ul v-if="currentList.length > 0" class="wk-list">
|
<ul v-if="currentList.length > 0" class="wk-list">
|
||||||
<li v-for="(item, index) in currentList" :key="index">
|
<li v-for="(item, index) in currentList" :key="index">
|
||||||
@@ -53,14 +53,16 @@
|
|||||||
<span class="content" :title="item.contents">{{ item.contents }}</span>
|
<span class="content" :title="item.contents">{{ item.contents }}</span>
|
||||||
<span class="time">{{ item.times }}</span>
|
<span class="time">{{ item.times }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="metaOf(item)" class="meta">{{ metaOf(item) }}</div>
|
<!-- 信息行恒渲染:地点 / 负责人 / 出席对象全空时落「-」,不留白(条目保持等高) -->
|
||||||
|
<div class="meta">{{ metaOf(item) || "-" }}</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div v-else class="no-data">{{ currentDayLabel }}</div>
|
<div v-else class="no-data">{{ currentDayLabel }}</div>
|
||||||
</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>
|
<div ref="refRemark" class="rk-txt" :class="{ expanded: remarkExpanded }">{{ remarkText }}</div>
|
||||||
<span v-if="remarkOverflow" class="rk-more" @click="toggleRemark">{{ remarkExpanded ? "收起" : "展开" }}</span>
|
<span v-if="remarkOverflow" class="rk-more" @click="toggleRemark">{{ remarkExpanded ? "收起" : "展开" }}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -139,7 +141,8 @@ const titleFull = computed<string>(() => {
|
|||||||
* 真正无周对象(oapi 降级返回 {})才走大图标空态。
|
* 真正无周对象(oapi 降级返回 {})才走大图标空态。
|
||||||
*/
|
*/
|
||||||
const hasWeek = computed(() => titleStr.value !== "");
|
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 canPrev = computed(() => weekOffset.value > minWeek.value);
|
||||||
const canNext = computed(() => weekOffset.value < maxWeek.value);
|
const canNext = computed(() => weekOffset.value < maxWeek.value);
|
||||||
|
|
||||||
@@ -185,6 +188,7 @@ async function loadWeek(week: number) {
|
|||||||
loading.value = false;
|
loading.value = false;
|
||||||
// 换周/换数据后重置备注折叠态并重测溢出
|
// 换周/换数据后重置备注折叠态并重测溢出
|
||||||
remarkExpanded.value = false;
|
remarkExpanded.value = false;
|
||||||
|
remarkOverflow.value = false;
|
||||||
nextTick(measureRemark);
|
nextTick(measureRemark);
|
||||||
reportHeight();
|
reportHeight();
|
||||||
}
|
}
|
||||||
@@ -246,7 +250,7 @@ function monthDay(day: any) {
|
|||||||
return String((day && day.dateText) || "");
|
return String((day && day.dateText) || "");
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 次要信息行:地点 / 负责人 / 参与人员,全部为空则不显示 */
|
/** 次要信息行:地点 / 负责人 / 参与人员;三者全空时落「-」,不留白(条目保持等高) */
|
||||||
function metaOf(item: any) {
|
function metaOf(item: any) {
|
||||||
if (!item) return "";
|
if (!item) return "";
|
||||||
const parts: string[] = [];
|
const parts: string[] = [];
|
||||||
@@ -275,7 +279,15 @@ function reportHeight() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
/* 主色(2026-10-16 指定):今日方块 / 七日条圆点 / 「查看概览」/「展开」/ 今日星期 */
|
||||||
|
$wk-primary: #5979ea;
|
||||||
|
$wk-primary-dark: #4864d8;
|
||||||
|
|
||||||
.wg-weekplan {
|
.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;
|
padding: 6px 0 10px;
|
||||||
}
|
}
|
||||||
.wk-title {
|
.wk-title {
|
||||||
@@ -337,7 +349,7 @@ function reportHeight() {
|
|||||||
width: 4px;
|
width: 4px;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #2d8cf0;
|
background: $wk-primary;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
&.has b::after {
|
&.has b::after {
|
||||||
@@ -353,12 +365,12 @@ function reportHeight() {
|
|||||||
}
|
}
|
||||||
// 今日:蓝底白字方块(置最后,压过 rest / holiday 的日期字色)
|
// 今日:蓝底白字方块(置最后,压过 rest / holiday 的日期字色)
|
||||||
&.is-on {
|
&.is-on {
|
||||||
color: #1d4ed8;
|
color: $wk-primary;
|
||||||
b {
|
b {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
margin: 2px auto 0;
|
margin: 2px auto 0;
|
||||||
padding: 1px 0;
|
padding: 1px 0;
|
||||||
background: #2d8cf0;
|
background: $wk-primary;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
@@ -380,17 +392,17 @@ function reportHeight() {
|
|||||||
.wk-overview {
|
.wk-overview {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #2d8cf0;
|
color: $wk-primary;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #1d6fd0;
|
color: $wk-primary-dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 列表区:固定高度 = 5 条(旧版实测行距 ≈54px × 5 ≈ 268px,与「内容+地点」两行条目 5 条相当);
|
/* 列表区:固定高度 = 3 条(3 × --wk-row,即 171px);多条滚动、空态占位同高,
|
||||||
多条滚动、空态占位同高,避免切到「休/节假日」时卡片高度跳变 */
|
避免切到「休/节假日」时卡片高度跳变 */
|
||||||
.wk-list-area {
|
.wk-list-area {
|
||||||
height: 268px;
|
height: calc(var(--wk-row) * 3);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
@@ -411,6 +423,10 @@ function reportHeight() {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
li {
|
li {
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
|
// 条目等高:有/无「地点·负责人·参与人」都占一行高度(无信息落「-」占位,不留白),
|
||||||
|
// 保证标题行纵向对齐;overflow 兜住固定高度可能带来的亚像素裁切
|
||||||
|
height: var(--wk-row);
|
||||||
|
overflow: hidden;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
border-bottom: 1px solid #f2f4f7;
|
border-bottom: 1px solid #f2f4f7;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@@ -425,6 +441,9 @@ function reportHeight() {
|
|||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
// ⚠️ 必须显式 min-width:0:flex 项默认 min-width:auto,遇 nowrap 长文本
|
||||||
|
// 会以 max-content 为下限而不收缩 ⇒ text-overflow 永不触发
|
||||||
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -443,8 +462,9 @@ function reportHeight() {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 备注:与「安排数据」区分——上方一条分割线 + 浅底块,跟白色列表拉开层次 */
|
/* 备注:与「安排数据」区分——上方一条分割线 + 浅底块,跟白色列表拉开层次;无备注整块不渲染 */
|
||||||
.wk-remark {
|
.wk-remark {
|
||||||
|
position: relative;
|
||||||
margin: 8px 15px 0;
|
margin: 8px 15px 0;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
background: #f7f8fa;
|
background: #f7f8fa;
|
||||||
@@ -465,15 +485,26 @@ function reportHeight() {
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 折叠态:正文右侧给「展开」留位(第二行以省略号收尾),按钮贴第二行末尾(右端)
|
||||||
|
&.collapsed .rk-txt {
|
||||||
|
padding-right: 34px;
|
||||||
|
}
|
||||||
|
&.collapsed .rk-more {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 8px;
|
||||||
|
// 与备注块同底色,压住可能蹭到的正文尾部
|
||||||
|
background: #f7f8fa;
|
||||||
|
}
|
||||||
.rk-more {
|
.rk-more {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #2d8cf0;
|
color: $wk-primary;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #1d6fd0;
|
color: $wk-primary-dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+12
-1
@@ -216,9 +216,20 @@ const dragObj = reactive({
|
|||||||
parentH: 0,
|
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 = {
|
const widgetOps = {
|
||||||
vuescroll: {},
|
vuescroll: {},
|
||||||
scrollPanel: {},
|
scrollPanel: {
|
||||||
|
scrollingX: false,
|
||||||
|
},
|
||||||
rail: {},
|
rail: {},
|
||||||
bar: {
|
bar: {
|
||||||
background: "#333",
|
background: "#333",
|
||||||
|
|||||||
Reference in New Issue
Block a user