Archived
接入统一鉴权中心(Keycloak,ADR-012);活动模块 L1/L2 运营态模版(历史活动列表+检索+沙箱);数据域与工作台界面改版;个人中心 /me
This commit is contained in:
shanqin
+101
-15
@@ -476,30 +476,52 @@
|
||||
.proto-root .jc-sup:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51,112,255,.12); }
|
||||
.proto-root .jc-sup:disabled { background: #f3f4f6; color: #5c626b; }
|
||||
|
||||
/* ===== 左侧一体化导航轨：品牌 → 四大模块 → 轨底身份（登出已挪去顶栏,见下）===== */
|
||||
/* ===== 左侧一体化导航轨：品牌 → 五大模块（身份已挪去顶栏右侧,见下）===== */
|
||||
.proto-root .app-nav { padding: 14px 10px 12px; }
|
||||
.proto-root .jc-rail-brand { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--ink-3); margin: -4px 0 6px; }
|
||||
.proto-root .app-nav button { min-height: 58px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
||||
.proto-root .app-nav button:active { transform: scale(.97); }
|
||||
/* 轨底：全局动作（重置/通知/设置）+ 身份，margin-top:auto 吸底 */
|
||||
.proto-root .jc-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
|
||||
/* 覆盖 vendor 对 .app-nav button 的 min-height，避免轨底图标按钮被撑高 */
|
||||
.proto-root .jc-rail-foot .icon-button { width: 34px; height: 34px; min-height: 34px; }
|
||||
.proto-root .jc-nav-user { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 4px; cursor: default; }
|
||||
/* 轨底身份区已撤:头像与姓名挪去顶栏右侧身份菜单(2026-08-25 用户定);
|
||||
.jc-nav-ava 保留 —— 顶栏身份菜单复用这枚渐变头像 */
|
||||
.proto-root .jc-nav-ava { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; line-height: 1; color: #fff; font-size: 13px; font-weight: 800; background: linear-gradient(140deg, #2bc7d4, #0e9fd8); box-shadow: 0 2px 6px rgba(14, 159, 216, .35); }
|
||||
.proto-root .jc-nav-name { font-size: 10px; font-weight: 600; color: var(--ink-3); }
|
||||
|
||||
/* ===== 顶栏：当前模块名 + 身份 + 退出登录 —— 与左轨互不重叠,登出只有这一处入口 ===== */
|
||||
/* ===== 顶栏：44px 通栏,只放右侧身份菜单 —— 与左轨互不重叠,登出只有这一处入口 ===== */
|
||||
.proto-root .app-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
|
||||
.proto-root .app-main-body { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
|
||||
.proto-root .app-main-body > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
|
||||
.proto-root .jc-topbar { flex: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line); }
|
||||
.proto-root .jc-topbar-title { font-size: 14px; font-weight: 700; color: var(--ink); }
|
||||
.proto-root .jc-topbar-user { display: flex; align-items: center; gap: 12px; }
|
||||
.proto-root .jc-topbar-user { display: flex; align-items: center; gap: 12px; margin-left: auto; }
|
||||
.proto-root .jc-topbar-name { font-size: 13px; color: var(--ink-3); }
|
||||
.proto-root .jc-topbar-logout { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
||||
.proto-root .jc-topbar-logout:hover { background: var(--danger-soft); color: var(--danger); border-color: #f3c9c6; }
|
||||
.proto-root .jc-topbar-logout:disabled { opacity: .6; cursor: default; }
|
||||
/* 外壳顶栏专属:任务标题栏(共用 .jc-topbar)那条重构规则带 overflow:hidden,
|
||||
会把右侧身份菜单的下拉裁得只剩顶部一小条 —— 这里放开(2026-08-25 用户报:下拉被遮挡) */
|
||||
.proto-root .jc-topbar.jc-topbar-app { overflow: visible; border-radius: 0; height: 44px; padding: 0 20px; margin-bottom: 0; } /* 圆角/56px 高/大内边距/底部间距都是任务标题栏渗进来的,外壳顶栏不要(2026-08-25 用户定:44px 通栏) */
|
||||
/* 顶缘蓝紫渐变条也是渗进来的(::before),外壳顶栏撤掉(2026-08-25 用户定) */
|
||||
.proto-root .jc-topbar.jc-topbar-app::before { display: none; }
|
||||
/* 但右上角装饰光晕定位 right:-60px,裁切一放开它就探出视口右缘 60px,整页出现横向滚动
|
||||
(2026-08-25 用户报:页面能左右滑)—— 把它收回盒内,光晕照留 */
|
||||
.proto-root .jc-topbar.jc-topbar-app::after { right: 0; }
|
||||
/* 顶栏右侧身份菜单:头像 + 姓名,悬停出下拉(个人中心 / 退出登录)—— 纯 CSS 悬停无 JS;
|
||||
登出入口从独立按钮收进下拉,仍是全站唯一入口(2026-08-25 用户定) */
|
||||
.proto-root .jc-usermenu { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 10px; cursor: default; color: var(--ink-4); transition: background var(--t-fast); }
|
||||
.proto-root .jc-usermenu:hover { background: var(--soft); }
|
||||
.proto-root .jc-usermenu .jc-nav-ava { width: 28px; height: 28px; font-size: 12px; }
|
||||
/* 悬停桥:触发区与菜单之间的间隙由它补住,鼠标下移不断 hover */
|
||||
.proto-root .jc-usermenu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
|
||||
.proto-root .jc-usermenu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 136px; padding: 6px; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast); }
|
||||
.proto-root .jc-usermenu:hover .jc-usermenu-pop, .proto-root .jc-usermenu:focus-within .jc-usermenu-pop { opacity: 1; transform: none; pointer-events: auto; }
|
||||
.proto-root .jc-usermenu-pop button, .proto-root .jc-usermenu-pop a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font-size: 13px; color: var(--ink-2); cursor: pointer; text-align: left; text-decoration: none; box-sizing: border-box; transition: background var(--t-fast), color var(--t-fast); }
|
||||
.proto-root .jc-usermenu-pop button:hover, .proto-root .jc-usermenu-pop a:hover { background: var(--soft); }
|
||||
.proto-root .jc-usermenu-pop button.danger:hover { background: var(--danger-soft); color: var(--danger); }
|
||||
.proto-root .jc-usermenu-pop button:disabled { opacity: .6; cursor: default; }
|
||||
|
||||
/* 「建设中」提示弹窗:未开放模块(审批/消息/纪要/汇报)与个人中心的占位口径 —— 不跳页只弹提示 */
|
||||
.proto-root .jc-wip-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(31, 35, 41, .45); }
|
||||
.proto-root .jc-wip-modal { width: 360px; max-width: 92vw; padding: 24px 20px 18px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(31, 35, 41, .22); text-align: center; animation: rise var(--t-med) both; }
|
||||
.proto-root .jc-wip-ico { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px; display: grid; place-items: center; color: var(--brand); background: var(--brand-wash); }
|
||||
.proto-root .jc-wip-modal h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
|
||||
.proto-root .jc-wip-modal p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
|
||||
.proto-root .jc-wip-ok { height: 34px; padding: 0 22px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
|
||||
.proto-root .jc-wip-ok:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
|
||||
|
||||
/* 工作清单头：渐变图标点缀 + 两级筛选 */
|
||||
.proto-root .jc-wl-head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
|
||||
@@ -515,8 +537,10 @@
|
||||
.proto-root .jc-wl-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--brand), #7f3bf5); box-shadow: 0 3px 8px rgba(51, 112, 255, .28); }
|
||||
.proto-root .jc-flt-wrap { display: flex; flex-direction: column; gap: 6px; padding: 2px 12px 12px; border-bottom: 1px solid var(--line-soft); background: #fbfdff; }
|
||||
.proto-root .jc-flt { display: flex; gap: 6px; }
|
||||
.proto-root .jc-flt button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; border: 1px solid var(--line-soft); background: #fff; border-radius: 8px; padding: 4px 4px; font-size: 11.5px; color: var(--ink-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
||||
.proto-root .jc-flt button:hover:not(.active) { background: var(--soft); }
|
||||
.proto-root .jc-flt button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; border: 1px solid var(--line-soft); background: #fff; border-radius: 8px; padding: 4px 4px; font-size: 11.5px; color: var(--ink-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
|
||||
/* 悬停给主色洗底+描边、按下给 4% 缩放 —— 2026-08-25 用户报:hover 几乎看不出、点了不知道点没点到 */
|
||||
.proto-root .jc-flt button:hover:not(.active) { background: var(--brand-wash); border-color: var(--brand-soft); color: var(--brand-deep); }
|
||||
.proto-root .jc-flt button:active { transform: scale(.96); }
|
||||
.proto-root .jc-flt button strong { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink-4); background: var(--soft); border-radius: 999px; padding: 0 6px; }
|
||||
.proto-root .jc-flt button.active { color: var(--brand-deep); border-color: var(--brand-soft); background: var(--brand-wash); font-weight: 700; }
|
||||
.proto-root .jc-flt button.active strong { background: #fff; color: var(--brand-deep); }
|
||||
@@ -1977,6 +2001,9 @@
|
||||
/* ══ 顶部导航栏（2026-07-26 重构）══
|
||||
工作流 · 任务 · 主题 · 目标 全收在这一条，常驻不滚。下面才是判据/指导书 + 报告页。 */
|
||||
.proto-root .jc-topbar { position: relative; overflow: hidden; flex: 0 0 auto; margin-bottom: 12px; padding: 12px 18px 13px; background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-2); }
|
||||
/* 任务标题栏(带 aria-label)必须是块级:外壳顶栏那条 56px 的 .jc-topbar 规则带 display:flex,
|
||||
同优先级漏进来会把面包屑行与标题行横排挤成一行(2026-08-25 用户报:标题栏变形) */
|
||||
.proto-root .jc-topbar[aria-label] { display: block; height: auto; }
|
||||
/* 设计感：顶缘 AI 渐变棱线 + 右上品牌光晕；两行定高（≈88px），其余信息在「工作流」页签 */
|
||||
.proto-root .jc-topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ai-grad); }
|
||||
.proto-root .jc-topbar::after { content: ""; position: absolute; right: -60px; top: -80px; width: 210px; height: 210px; border-radius: 999px; background: radial-gradient(circle, rgba(51,112,255,.08), transparent 70%); pointer-events: none; }
|
||||
@@ -3363,3 +3390,62 @@
|
||||
display: block; margin-top: 3px; font-style: normal; font-size: 11px;
|
||||
line-height: 1.6; color: var(--ink-3);
|
||||
}
|
||||
|
||||
/* ══ 个人中心(/me 台面,2026-08-25)══
|
||||
与工作台同皮肤:44px 通栏顶栏 + 居中内容列。
|
||||
只加 .jc-me-* 作用域,共享件(.jc-kpi/.jc-nav-ava/EmptyState)本体不动。 */
|
||||
.proto-root .jc-me { min-height: 100vh; display: flex; flex-direction: column; background: var(--soft); }
|
||||
.proto-root .jc-me-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none; transition: color var(--t-fast); }
|
||||
.proto-root .jc-me-back:hover { color: var(--brand-deep); }
|
||||
.proto-root .jc-me-body { width: min(960px, calc(100% - 48px)); margin: 24px auto 48px; display: flex; flex-direction: column; gap: 14px; }
|
||||
|
||||
/* 卡片基座:白卡 1px 描边,与全站面板卡同语气 */
|
||||
.proto-root .jc-me-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--card-shadow, 0 1px 2px rgba(31, 35, 41, .05)); }
|
||||
|
||||
/* 身份卡:大头像 + 姓名岗位 + 登出入口 */
|
||||
.proto-root .jc-me-hero { display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; }
|
||||
.proto-root .jc-me-ava { flex: none; width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 800; background: linear-gradient(140deg, #2bc7d4, #0e9fd8); box-shadow: 0 4px 12px rgba(14, 159, 216, .35); }
|
||||
.proto-root .jc-me-id { flex: 1; min-width: 0; }
|
||||
.proto-root .jc-me-id h1 { margin: 2px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
|
||||
.proto-root .jc-me-pos { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--brand-deep); }
|
||||
.proto-root .jc-me-meta { margin: 0; font-size: 12px; color: var(--ink-4); }
|
||||
.proto-root .jc-me-meta em { font-style: normal; font-weight: 700; }
|
||||
.proto-root .jc-me-meta em.on { color: var(--ok); }
|
||||
.proto-root .jc-me-meta em.off { color: var(--danger); }
|
||||
.proto-root .jc-me-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
|
||||
.proto-root .jc-me-logout { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
||||
.proto-root .jc-me-logout:hover { background: var(--danger-soft); color: var(--danger); border-color: #f3c9c6; }
|
||||
.proto-root .jc-me-logout:disabled { opacity: .6; cursor: default; }
|
||||
|
||||
/* 概览四卡:复用 .jc-kpi,这里只补链接态 */
|
||||
.proto-root .jc-me-kpis { margin-bottom: 0; }
|
||||
.proto-root .jc-me-kpis a.jc-kpi { text-decoration: none; color: inherit; }
|
||||
|
||||
/* 区块卡:节头 + 内容 */
|
||||
.proto-root .jc-me-sec { padding: 16px 20px 14px; }
|
||||
.proto-root .jc-me-sec-h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
|
||||
.proto-root .jc-me-sec-h h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
|
||||
.proto-root .jc-me-sec-sub { font-size: 11.5px; color: var(--ink-4); }
|
||||
|
||||
/* 权限分组:组名一列,客体成串,动作色章 */
|
||||
.proto-root .jc-me-grant { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; padding: 8px 0; }
|
||||
.proto-root .jc-me-grant + .jc-me-grant { border-top: 1px dashed var(--line-soft); }
|
||||
.proto-root .jc-me-grant > em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); }
|
||||
.proto-root .jc-me-grant > div { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.proto-root .jc-me-grant-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--line-soft); border-radius: 8px; font-size: 12px; font-family: var(--mono); color: var(--ink-2); background: var(--soft); }
|
||||
.proto-root .jc-me-act { font-style: normal; font-family: var(--sans); font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
|
||||
.proto-root .jc-me-act.a-read { color: var(--brand-deep); background: var(--brand-wash); }
|
||||
.proto-root .jc-me-act.a-write { color: #b25e15; background: #fdf0e6; }
|
||||
.proto-root .jc-me-act.a-govern { color: #5b21cf; background: #f5f0fe; }
|
||||
/* 可进的端(ADR-012):chip 即入口,点了整页导航过去 */
|
||||
.proto-root .jc-me-end { text-decoration: none; font-family: var(--sans); font-weight: 600; color: var(--brand-deep); background: var(--brand-wash); border-color: transparent; padding-right: 10px; }
|
||||
.proto-root .jc-me-end:hover { filter: brightness(0.96); }
|
||||
|
||||
/* 最近任务:一行一条,标题 + 活动 + 状态章 */
|
||||
.proto-root .jc-me-task { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
|
||||
.proto-root .jc-me-task + .jc-me-task { border-top: 1px dashed var(--line-soft); }
|
||||
.proto-root .jc-me-task-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.proto-root .jc-me-task-a { flex: none; max-width: 40%; font-size: 11.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.proto-root .jc-me-task-st { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
|
||||
.proto-root .jc-me-task-st.run { color: var(--brand-deep); background: var(--brand-wash); }
|
||||
.proto-root .jc-me-task-st.done { color: var(--ink-3); background: var(--soft); }
|
||||
|
||||
Reference in New Issue
Block a user