feat: 默认进入核心指标页面
This commit is contained in:
江林铖
parent
ce41af74ca
commit
c764610e5d
@ -353,7 +353,7 @@
|
||||
"typographyMeta": {
|
||||
"display": {
|
||||
"displayName": "页面主标题",
|
||||
"use": "首页与关键二级页标题"
|
||||
"use": "核心指标与关键业务页标题"
|
||||
},
|
||||
"headline": {
|
||||
"displayName": "数据页标题",
|
||||
@ -437,12 +437,6 @@
|
||||
"description": "只有真实接入业务才使用绿色状态。",
|
||||
"projection": "<span class=\"ds-status-connected\"><i aria-hidden=\"true\"></i>实时读取</span><style>.ds-status-connected{display:inline-flex;align-items:center;gap:7px;border-radius:9999px;background:#ecfdf8;padding:5px 9px;color:#087052;font:600 13px/1.3 ui-sans-serif,system-ui}.ds-status-connected i{width:7px;height:7px;border-radius:50%;background:#31d0aa}</style>"
|
||||
},
|
||||
{
|
||||
"name": "Workspace Row",
|
||||
"type": "custom",
|
||||
"description": "不可点击的大职责域和可点击的小项入口。",
|
||||
"projection": "<section class=\"ds-workspace\"><header><h2>中心仪表盘</h2><p>掌握经营与交付全貌</p></header><nav aria-label=\"中心仪表盘\"><a href=\"#\">核心指标 →</a><a href=\"#\">业务趋势 →</a></nav></section><style>.ds-workspace{border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:24px;color:#101828}.ds-workspace h2{margin:0;font:700 20px/1.4 ui-sans-serif,system-ui}.ds-workspace p{margin:4px 0 16px;color:#b42318;font:600 14px/1.4 ui-sans-serif,system-ui}.ds-workspace nav{display:flex;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.ds-workspace a{flex:1;padding:14px;color:#101828;text-decoration:none;font:600 14px/1.4 ui-sans-serif,system-ui}.ds-workspace a+a{border-left:1px solid #e2e8f0}.ds-workspace a:focus-visible{outline:2px solid #1677ff;outline-offset:-2px}</style>"
|
||||
},
|
||||
{
|
||||
"name": "Sidebar Account Menu",
|
||||
"type": "navigation",
|
||||
@ -464,7 +458,7 @@
|
||||
],
|
||||
"narrative": {
|
||||
"northStar": "深色导航轨数据工作台",
|
||||
"overview": "品牌中心是一套固定导航、快速切换与逐层下钻的内部运营界面。深海军蓝导航轨提供稳定坐标，白色操作顶栏承载全局控制，冷灰画布上以矩形白色工作面板组织真实数据、示例状态与待接入框架。\n\n它保留品牌中心自己的五个职责域、22 个小项入口，以及素材库、自动化工作流与人员架构三项已接入业务，不复制参考图中的外部品牌、店铺数据或水印。首页是工作地图，不是营销门户；子页是数据工作面，不用巨型漂浮英雄卡重复标题。",
|
||||
"overview": "品牌中心是一套固定导航、快速切换与逐层下钻的内部运营界面。深海军蓝导航轨提供稳定坐标，白色操作顶栏承载全局控制，冷灰画布上以矩形白色工作面板组织真实数据、示例状态与待接入框架。\n\n它保留品牌中心自己的五个职责域、22 个小项入口，以及素材库、自动化工作流与人员架构三项已接入业务，不复制参考图中的外部品牌、店铺数据或水印。根路径默认进入核心指标，五域入口由固定侧栏承载；各子页直接呈现数据工作面，不再经过部门总览页。",
|
||||
"keyCharacteristics": [
|
||||
"272px 固定深色导航轨，桌面可折叠为 80px。",
|
||||
"72px 白色顶栏与 `#f2f4f7` 冷灰画布组成稳定后台骨架；账户入口固定在侧栏底部。",
|
||||
@ -476,7 +470,7 @@
|
||||
"rules": [
|
||||
{
|
||||
"name": "The Current Location Rule",
|
||||
"body": "进入二级页面后只保留一个最强的 `#1677ff` 导航选中态；首页不设置独立“部门总览”导航项，职责域色不得与当前项竞争。",
|
||||
"body": "根路径直接进入核心指标，页面只保留一个最强的 `#1677ff` 导航选中态；不设置独立“部门总览”入口，职责域色不得与当前项竞争。",
|
||||
"section": "colors"
|
||||
},
|
||||
{
|
||||
@ -511,7 +505,7 @@
|
||||
}
|
||||
],
|
||||
"dos": [
|
||||
"**Do** 在首页、框架页、指标页、明细页、加载/异常状态和素材库复用同一 Department Shell。",
|
||||
"**Do** 让根路径直接进入核心指标，并在框架页、指标页、明细页、加载/异常状态和素材库复用同一 Department Shell。",
|
||||
"**Do** 保持 5 个职责域、22 个小项、19 个框架入口，以及素材库、自动化工作流和人员架构三项已接入业务的产品真相。",
|
||||
"**Do** 明确区分真实数据、示例值、公式待接入与空数据。",
|
||||
"**Do** 在桌面与 390px 移动宽度验证导航、焦点和横向溢出。",
|
||||
@ -520,6 +514,7 @@
|
||||
],
|
||||
"donts": [
|
||||
"**Don't** 恢复旧版漂浮岛视觉、门户式白色英雄卡或超过 20px 的主表面圆角。",
|
||||
"**Don't** 恢复独立部门总览页或在核心指标页提供“返回部门看板”按钮。",
|
||||
"**Don't** 让职责域标题本身成为导航；只有下方小项链接进入二级页面。",
|
||||
"**Don't** 复制参考图中的京东品牌、店铺指标、水印或虚构业务数据。",
|
||||
"**Don't** 让移动抽屉键盘焦点穿透到底层页面。",
|
||||
|
||||
17
DESIGN.md
17
DESIGN.md
@ -113,7 +113,7 @@ components:
|
||||
|
||||
品牌中心是一套固定导航、快速切换与逐层下钻的内部运营界面。深海军蓝导航轨提供稳定坐标，白色操作顶栏承载全局控制，冷灰画布上以矩形白色工作面板组织真实数据、示例状态与待接入框架。
|
||||
|
||||
它保留品牌中心自己的五个职责域、22 个小项入口，以及素材库、自动化工作流与人员架构三项已接入业务，不复制参考图中的外部品牌、店铺数据或水印。首页是工作地图，不是营销门户；子页是数据工作面，不用巨型漂浮英雄卡重复标题。
|
||||
它保留品牌中心自己的五个职责域、22 个小项入口，以及素材库、自动化工作流与人员架构三项已接入业务，不复制参考图中的外部品牌、店铺数据或水印。根路径默认进入核心指标，五域入口由固定侧栏承载；各子页直接呈现数据工作面，不再经过部门总览页。
|
||||
|
||||
**Key Characteristics:**
|
||||
|
||||
@ -150,7 +150,7 @@ components:
|
||||
|
||||
### Named Rules
|
||||
|
||||
**The Current Location Rule.** 进入二级页面后只保留一个最强的 `#1677ff` 导航选中态；首页不设置独立“部门总览”导航项，职责域色不得与当前项竞争。
|
||||
**The Current Location Rule.** 根路径直接进入核心指标，页面只保留一个最强的 `#1677ff` 导航选中态；不设置独立“部门总览”入口，职责域色不得与当前项竞争。
|
||||
|
||||
**The Truth Color Rule.** 绿色只表示真实已接入，示例值和待接入状态不得伪装成成功。
|
||||
|
||||
@ -166,7 +166,7 @@ components:
|
||||
|
||||
### Hierarchy
|
||||
|
||||
- **Display** (700, 36px, 1.2): 首页与关键二级页标题；移动端降至约 30px。
|
||||
- **Display** (700, 36px, 1.2): 核心指标与关键业务页标题；移动端降至约 30px。
|
||||
- **Headline** (700, 30px, 1.25): 指标与明细页标题。
|
||||
- **Title** (700, 20px, 1.4): 工作板块、数据分区和面板标题。
|
||||
- **Body** (400, 16px, 1.75): 页面说明，建议控制在约 70ch 内。
|
||||
@ -178,7 +178,7 @@ components:
|
||||
|
||||
## Layout
|
||||
|
||||
桌面端采用固定侧栏工作台：导航轨宽 272px，可折叠为 80px；右侧顶栏高 72px；主内容最大宽度 1600px，使用 16/24/32px 响应式内边距。首页标题后直接进入五条纵向职责域，每条职责域下的小项在桌面端同一横排，窄屏改为一至两列。
|
||||
桌面端采用固定侧栏工作台：导航轨宽 272px，可折叠为 80px；右侧顶栏高 72px；主内容最大宽度 1600px，使用 16/24/32px 响应式内边距。访问根路径时直接进入核心指标；其余职责域及小项全部通过固定侧栏访问，不额外渲染部门总览工作地图。
|
||||
|
||||
1024px 以下隐藏固定侧栏，以左侧模态抽屉替代。抽屉宽度为 `min(86vw, 304px)`，打开时锁定页面滚动、底层内容 `inert`、焦点进入并约束在导航内，支持 Escape 关闭并恢复触发器焦点。390px 页面不得产生全局横向溢出。
|
||||
|
||||
@ -235,7 +235,7 @@ components:
|
||||
### Navigation
|
||||
|
||||
- 深色轨默认文字为 `#aebdcd`，hover 使用低透明白色，当前项使用 `#1677ff` + 白字。
|
||||
- 侧栏从五个职责域直接开始，不显示独立“部门总览”入口；首页标题仍由白色顶栏提供页面定位。
|
||||
- 侧栏从五个职责域直接开始，不显示独立“部门总览”入口；根路径与“核心指标”入口指向同一默认工作面。
|
||||
- 账户入口固定在侧栏最下方并向上展开菜单；顶栏只保留页面定位与导航折叠控制。
|
||||
- 子页面标题直接承接首屏内容，不在标题上方增加重复的面包屑面板。
|
||||
- 22 个小项在侧栏使用 16px 语义线性图标；选中项图标随文字切为白色，页面标题区不重复摆放同一导航图标。
|
||||
@ -252,10 +252,6 @@ components:
|
||||
- **Embedding:** `/performance-survey` 与 `/work-review` 直接保留各自真实数据、权限、工具栏和交互；`?workflow=` 记录选择。所有跨应用根路径返回使用 `target="_top"`。
|
||||
- **Permanent Omission:** 二级栏顶部永久不显示“自动化工作流”、接入数量、统计区或解释区。
|
||||
|
||||
### Workspace Row
|
||||
|
||||
首页每个职责域是不可点击的白色分组面板；域标题、摘要和说明置于上方，小项链接置于下方横排。五域色只用于图标软底、摘要与箭头，不改变统一白色数据面板材质。
|
||||
|
||||
### Data Status Placement
|
||||
|
||||
所有子页面从页面标题直接进入核心内容，不渲染独立的“数据接入说明”“数据来源说明”或“计算说明”面板。真实读取、示例值、待接入、读取失败和公式状态由对应卡片或数据模块自身承担；实际业务操作帮助不属于此类，仍应保留在需要的位置。
|
||||
@ -264,7 +260,7 @@ components:
|
||||
|
||||
### Do:
|
||||
|
||||
- **Do** 在首页、框架页、指标页、明细页、加载/异常状态和素材库复用同一 Department Shell。
|
||||
- **Do** 让根路径直接进入核心指标，并在框架页、指标页、明细页、加载/异常状态和素材库复用同一 Department Shell。
|
||||
- **Do** 保持 5 个职责域、22 个小项、19 个框架入口，以及素材库、自动化工作流和人员架构三项已接入业务的产品真相。
|
||||
- **Do** 明确区分真实数据、示例值、公式待接入与空数据。
|
||||
- **Do** 在桌面与 390px 移动宽度验证导航、焦点和横向溢出。
|
||||
@ -274,6 +270,7 @@ components:
|
||||
### Don't:
|
||||
|
||||
- **Don't** 恢复旧版漂浮岛视觉、门户式白色英雄卡或超过 20px 的主表面圆角。
|
||||
- **Don't** 恢复独立部门总览页或在核心指标页提供“返回部门看板”按钮。
|
||||
- **Don't** 让职责域标题本身成为导航；只有下方小项链接进入二级页面。
|
||||
- **Don't** 复制参考图中的京东品牌、店铺指标、水印或虚构业务数据。
|
||||
- **Don't** 让移动抽屉键盘焦点穿透到底层页面。
|
||||
|
||||
@ -12,7 +12,7 @@ web
|
||||
|
||||
## Product Purpose
|
||||
|
||||
“品牌中心部门看板”是品牌中心的一级工作门户，用五个业务域组织部门工作入口：中心仪表盘、业务经营、资产与AI自动化、组织管理、治理与设置。当前先建立信息架构和导航框架，底层业务数据后续接入。
|
||||
“品牌中心部门看板”是品牌中心的内部工作台，默认直接进入“核心指标”，并用五个业务域组织其余部门工作入口：中心仪表盘、业务经营、资产与AI自动化、组织管理、治理与设置。底层业务数据按确认后的口径逐步接入。
|
||||
|
||||
## Operating Context
|
||||
|
||||
@ -20,7 +20,7 @@ web
|
||||
|
||||
## Capabilities and Constraints
|
||||
|
||||
- 一级门户根路径为 `/`。
|
||||
- 根路径 `/` 直接跳转至 `/workspaces/dashboard/core-metrics`，不再展示独立部门总览页。
|
||||
- “由壹点3D素材”作为“资产与AI自动化”下的二级页面保留完整现有能力。
|
||||
- “自动化工作流”作为“资产与AI自动化”下的业务入口，集中链接现有的绩效考核调研与作品过稿看板。
|
||||
- “人员架构”沿用主线已有的 `/organization` 真实组织树、人员明细与原权限设置，不以空框架替代。
|
||||
@ -42,7 +42,7 @@ web
|
||||
## Product Principles
|
||||
|
||||
- 先让入口与职责边界清楚，再接入数据。
|
||||
- 一级门户负责导航与全局理解，二级页面负责完成具体任务。
|
||||
- 核心指标作为默认工作面，固定侧栏负责其它能力导航，具体页面负责完成任务。
|
||||
- 保持线上业务稳定，本地验证充分后再由用户决定是否提交和部署。
|
||||
- 对不可用能力诚实标注状态，不用假数据制造完成感。
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import type { Metadata } from 'next'
|
||||
import BrandCenterDashboard from '@/components/department-dashboard/BrandCenterDashboard'
|
||||
import { redirect } from 'next/navigation'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '品牌中心部门看板',
|
||||
description: '品牌中心部门业务、资产、组织与治理工作入口',
|
||||
title: '核心指标 | 品牌中心部门看板',
|
||||
description: '品牌中心项目进度、交付质量、团队负荷与风险状态',
|
||||
}
|
||||
|
||||
export default function BrandCenterDashboardPage() {
|
||||
return <BrandCenterDashboard />
|
||||
redirect('/workspaces/dashboard/core-metrics')
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ describe('CoreMetricsDashboard', () => {
|
||||
'href',
|
||||
'/workspaces/dashboard/core-metrics/risks',
|
||||
)
|
||||
expect(screen.getByRole('link', { name: /返回部门看板/ })).toHaveAttribute('href', '/')
|
||||
expect(screen.queryByRole('link', { name: /返回部门看板/ })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('数据接口失败时不保留虚构百分比', async () => {
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
import Link from 'next/link'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
CalendarClock,
|
||||
} from 'lucide-react'
|
||||
@ -142,13 +141,6 @@ export default function CoreMetricsDashboard() {
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Link
|
||||
href="/"
|
||||
className="mt-10 inline-flex min-h-11 items-center gap-2 rounded-xl bg-[#247fd3] px-4 text-sm font-bold text-white transition-colors hover:bg-[#176fc1] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#78aee9] focus-visible:ring-offset-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
|
||||
返回部门看板
|
||||
</Link>
|
||||
</main>
|
||||
</DepartmentShell>
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user