fix(workbench): 首页待办上限改为 3 条并修正趋势图尺寸

- TODO_LIMIT 由 5 调整为 3,同步更新接口文档默认值
- 趋势图 viewBox 与画布尺寸对齐原型 560×190
- 趋势卡改为弹性布局,图表贴底避免留白
This commit is contained in:
yelan
2026-09-30 18:05:27 +08:00
parent 7d06c29943
commit 5ed6779ec6
3 changed files with 37 additions and 12 deletions
+2 -2
View File
@@ -13,7 +13,7 @@
## 2. 已接入的请求 ## 2. 已接入的请求
```http ```http
GET /api/v1/workbench/overview?campusId={UUID}&period={7|14|30}&todoLimit=5&rankingLimit=10 GET /api/v1/workbench/overview?campusId={UUID}&period={7|14|30}&todoLimit=3&rankingLimit=10
X-Token: {登录令牌} X-Token: {登录令牌}
``` ```
@@ -21,7 +21,7 @@ X-Token: {登录令牌}
| ------------ | ---- | ------------------------- | ----------------------------------------------------------------- | | ------------ | ---- | ------------------------- | ----------------------------------------------------------------- |
| campusId | 是 | 当前工作台院区对应的 UUID | 必须在当前用户数据范围内 | | campusId | 是 | 当前工作台院区对应的 UUID | 必须在当前用户数据范围内 |
| period | 是 | 7、14 或 30 | 同时决定趋势和文档排名统计周期 | | period | 是 | 7、14 或 30 | 同时决定趋势和文档排名统计周期 |
| todoLimit | 否 | 5 | 待办返回数量,范围 1–20;与原型首页展示上限一致(`.slice(0, 5)`) | | todoLimit | 否 | 3 | 待办返回数量,范围 1–20;原型首页展示上限是 5(`.slice(0, 5)`),仓库按布局收成 3 条 |
| rankingLimit | 否 | 10 | 排名返回数量,范围 1–20 | | rankingLimit | 否 | 10 | 排名返回数量,范围 1–20 |
请求通过 utils/request.ts 的单例发送,实际浏览器路径为 /api/v1/workbench/overview,由 Vite 开发代理转发到后端。 请求通过 utils/request.ts 的单例发送,实际浏览器路径为 /api/v1/workbench/overview,由 Vite 开发代理转发到后端。
+5 -3
View File
@@ -353,10 +353,12 @@ function createRanking(
/** /**
* 首页「我的待办」最多几条。 * 首页「我的待办」最多几条。
* *
* 照抄原型 `renderDash()` 的 `tasks.slice(0, 5)`(最多 5 条)。 * 原型 `renderDash()` 是 `tasks.slice(0, 5)`(最多 5 条)。
* 仓库多一步:把这个上限同时作为 `todoLimit` 传给后端,避免取回一批再丢掉。 * 仓库收成 **3 条**(2026-09-30 定):趋势卡与待办卡同行,待办越多行高越高,
* 图是按宽度定高的、贴底后会在标题与图之间留大片空白 —— 3 条时两张卡高度基本齐平。
* 该上限同时作为 `todoLimit` 传给后端,避免取回一批再丢掉。
*/ */
const TODO_LIMIT = 5 const TODO_LIMIT = 3
const RANKING_LIMIT = 10 const RANKING_LIMIT = 10
let campusIds: Map<string, string> | null = null let campusIds: Map<string, string> | null = null
let campusIdsRequest: Promise<Map<string, string>> | null = null let campusIdsRequest: Promise<Map<string, string>> | null = null
@@ -12,12 +12,16 @@ const emit = defineEmits<{
}>() }>()
/* /*
* 几何照抄原型 svgLine():四边留白 34、横向等分虚线(图上共 4 条)、 * 几何照抄原型 svgLine():`viewBox 560×190` + 四边留白 34、
* **没有 Y 轴刻度数字**(数值直接标在点上)。 * 横向等分虚线(图上共 4 条)、**没有 Y 轴刻度数字**(数值直接标在点上)。
* viewBox 620×210 与原型 560×190 同为 2.95:1,缩放比例一致,所以只换 padding、不动 viewBox。 *
* 尺寸必须和原型一致:SVG 只给 `width:100%`、**不给高度**,
* 高度由 viewBox 比例算出来(560:190)。写死高度会让默认的 `xMidYMid meet`
* 把图形等比缩到中间 —— 实测 833px 宽的卡片里图形只占 620px,左右各空 16.9%
* (原型只空 6.1%),整块图又矮又窄。
*/ */
const chartWidth = 620 const chartWidth = 560
const chartHeight = 210 const chartHeight = 190
const chartPadding = 34 const chartPadding = 34
const plotWidth = chartWidth - chartPadding * 2 const plotWidth = chartWidth - chartPadding * 2
@@ -79,7 +83,7 @@ const hasData = computed(() => props.points.some((point) => point.value > 0))
</div> </div>
<div v-if="hasData" class="trend-chart-wrap"> <div v-if="hasData" class="trend-chart-wrap">
<svg class="trend-chart" viewBox="0 0 620 210" role="img" aria-label="近一周签署客户趋势图"> <svg class="trend-chart" viewBox="0 0 560 190" role="img" aria-label="近一周签署客户趋势图">
<defs> <defs>
<linearGradient id="home-trend-area" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="home-trend-area" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#1487a5" stop-opacity="0.28" /> <stop offset="0" stop-color="#1487a5" stop-opacity="0.28" />
@@ -125,13 +129,26 @@ const hasData = computed(() => props.points.some((point) => point.value > 0))
<style scoped> <style scoped>
.home-panel { .home-panel {
display: flex;
min-width: 0; min-width: 0;
flex-direction: column;
padding: 16px 18px; padding: 16px 18px;
background: var(--card); background: var(--card);
border-radius: var(--r); border-radius: var(--r);
box-shadow: var(--sh); box-shadow: var(--sh);
} }
/*
* 趋势卡与「我的待办」同行,行高由更高的待办卡决定(卡片默认 stretch)。
* 图的高度是宽度按 560:190 算出来的,比卡片矮 → 默认会在下方留一条空白。
* 按使用要求**默认把图压到卡片底部**(`margin-top: auto` 吃掉剩余空间),
* 标题仍在顶部;留白集中在标题与图之间。
*/
.trend-panel .trend-chart-wrap,
.trend-panel .trend-empty {
margin-top: auto;
}
.panel-heading { .panel-heading {
display: flex; display: flex;
gap: 10px; gap: 10px;
@@ -157,10 +174,16 @@ const hasData = computed(() => props.points.some((point) => point.value > 0))
min-height: 190px; min-height: 190px;
} }
/*
* 只给宽度、**不给高度**(原型就是 `style="width:100%"`):
* 高度由 viewBox 的 560:190 比例算出来,图才会铺满卡片宽度。
* 写死 height 会触发默认的 preserveAspectRatio="xMidYMid meet"——
* 图形按高度等比缩放后居中,两侧各留一大片空白。
*/
.trend-chart { .trend-chart {
display: block; display: block;
width: 100%; width: 100%;
height: 210px; height: auto;
overflow: visible; overflow: visible;
} }