LoveChengke
219f6ae83a
## 灵动岛修复与动画优化（用户反馈） - **收回不再出现"方框"闪烁**：卡片改为**固定逻辑尺寸 + 顶部居中锚定**， 窗口只负责露出/裁切透明区域。此前卡片随窗口拉伸，形变过程中会看到被拉扁的圆角方块， 胶囊里的铃铛/文字还会被垂直居中而"从上跳到下"；两条问题同源，现已消除。 冒烟用 15 次采样断言卡片尺寸恒为固定值（`396x308` / `260x38`），一旦出现中间值即失败。 - **点击屏幕任意位置收回**：展开态临时 `setFocusable(true)` 并取焦，点到别处即失焦 → 自动回缩为胶囊； 收起后立即释放可聚焦性。断言覆盖 `focusable=true → 失焦后 mode=pill、focusable=false`。 - 动画继续打磨：危险/叫人形态改为**内部光晕**（卡片四周再留 4px 透明边，彻底避免窗口边界裁切出硬边）、 尖角与圆角统一、形态尺寸各异（胶囊 268×44 / 详情 404×316 / 紧急 424×344 / 叫人 440×360）。 ## 灵动岛"标为已读"真正同步通知中心 - 新增链路：灵动岛 `mark-read` → 主进程 `setMarkReadHandler` → 主窗口渲染进程 → `notificationApi.markRead` + 刷新 store（未读红点即时减少）。 - 真机链路断言：点击"标为已读"后 `read=false → true`、未读数 `1 → 0`（此前只从灵动岛队列移除）。 ## 作业发布也上岛 - `homework:new` → 灵动岛 `kind=homework`：胶囊显示"新作业"（青蓝描边 + 书本图标）， 展开显示作业说明与"截止时间：…"。 ## 新增"叫人"功能 - 服务端：新模块 `modules/calls`（`POST /api/calls`）——校验班级可写 + 学生属于该班， 落库一条 HIGH 级通知（进通知中心、可用已读状态），广播 `notification:new` 到班级房间， 并定向 `call:new` 给被叫学生。 - 共享层：`CALL_QUICK_PHRASES`（8 条快捷短语）、`buildCallTitle()`（"请 XXX 同学找 XXX 老师"，老师名已含"老师"不重复）、 `ServerToClientEvents['call:new']`、`CreateCallRequest`。 - Web 管理端：学生管理列表新增 **叫人** 按钮 → 弹窗显示对象、快捷短语（点选/取消）、自定义消息（优先），发送即通知。 - 客户端：`call:new` → 灵动岛 `kind=call`，**上课时段也立即展开**（老师正在等这名学生）， 琥珀金卡片 +"叫人"徽标 +"收到"按钮，90 秒后自动收起。 ## 客户端界面改为 ClassIsland 同款 Fluent 风格 - 主题令牌：Mica 浅底 `#f3f3f3`、亚克力卡片 `rgba(255,255,255,.7)` + `backdrop-filter`、 强调色 `#0F6CBD`、半透明描边、卡片 8px / 控件 4px 圆角、极轻阴影。 - Element Plus 变量整体对齐（`--el-color-primary`、圆角、表头/行分隔、滚动条等）。 - 侧边导航改为 Fluent NavigationView 观感：白色半透明底、选中项强调色淡底 + 左侧 3px 强调条； 品牌标改为强调色渐变圆角方块。附客户端五个页面实拍（`docs/screenshots/client/`）。 ## 验证 - `pnpm verify:e2e` **68/68**（新增 6 项叫人：201 + 标题模板、自定义消息优先、上课时段允许、学生 403、通知中心可见、清理） - `pnpm verify:desktop` **33/33**（新增：卡片固定尺寸、点击任意处收回、标为已读同步、作业上岛、叫人上课中立即展开、真实通知链路） - `pnpm verify:web` **16/16**（新增叫人入口：弹窗、8 条快捷短语、自定义输入、短语可选中） - `pnpm lint` / `format:check` / `typecheck` 全部通过；服务端安装包已重打并安装验证
337 lines
7.7 KiB
CSS
337 lines
7.7 KiB
CSS
/* ============================================================================
|
||
* 班级小助手客户端主题 —— ClassIsland 同款 Fluent 风格
|
||
*
|
||
* 参考 ClassIsland（Windows 课件表应用）的观感：
|
||
* - WinUI / Fluent 设计语言：浅色 Mica 底 + 半透明"亚克力"卡片 + 1px 细腻描边
|
||
* - 强调色 #0F6CBD（悬停 #115EA3），选中项用强调色淡底 + 左侧强调条
|
||
* - 圆角：卡片 8px、控件 4~6px、胶囊 999px
|
||
* - 字体：Segoe UI Variable / 微软雅黑 UI，字号偏小、行距偏松
|
||
* - 阴影极轻（0 2px 4px rgba(0,0,0,.04)），层次主要靠描边与底色区分
|
||
* ========================================================================== */
|
||
|
||
:root {
|
||
/* Fluent 强调色 */
|
||
--ch-accent: #0f6cbd;
|
||
--ch-accent-hover: #115ea3;
|
||
--ch-accent-soft: rgba(15, 108, 189, 0.08);
|
||
--ch-accent-soft-strong: rgba(15, 108, 189, 0.14);
|
||
|
||
/* 层次底色（Mica / Layer） */
|
||
--ch-bg: #f3f3f3;
|
||
--ch-layer: rgba(255, 255, 255, 0.7);
|
||
--ch-layer-solid: #ffffff;
|
||
--ch-layer-alt: rgba(249, 249, 249, 0.5);
|
||
--ch-card-subtle: rgba(255, 255, 255, 0.5);
|
||
|
||
/* 描边（Fluent 用半透明黑，避免生硬的灰线） */
|
||
--ch-border: rgba(0, 0, 0, 0.06);
|
||
--ch-border-strong: rgba(0, 0, 0, 0.1);
|
||
--ch-divider: rgba(0, 0, 0, 0.05);
|
||
|
||
/* 文本 */
|
||
--ch-text: #1b1b1b;
|
||
--ch-text-secondary: #5c5c5c;
|
||
--ch-text-tertiary: #8a8a8a;
|
||
|
||
/* 圆角与阴影 */
|
||
--ch-radius-card: 8px;
|
||
--ch-radius-control: 4px;
|
||
--ch-shadow-flyout: 0 8px 16px rgba(0, 0, 0, 0.08);
|
||
--ch-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.04);
|
||
|
||
/* 兼容旧变量名 */
|
||
--ch-sidebar: #ffffff;
|
||
|
||
/* Element Plus 变量对齐 Fluent */
|
||
--el-color-primary: #0f6cbd;
|
||
--el-color-primary-light-3: #4d94d1;
|
||
--el-color-primary-light-5: #7fb1de;
|
||
--el-color-primary-light-7: #b3d0ec;
|
||
--el-color-primary-light-8: #d0e2f4;
|
||
--el-color-primary-light-9: #e7f0f9;
|
||
--el-color-primary-dark-2: #115ea3;
|
||
--el-border-radius-base: 4px;
|
||
--el-border-radius-small: 3px;
|
||
--el-text-color-primary: #1b1b1b;
|
||
--el-text-color-regular: #3a3a3a;
|
||
--el-text-color-secondary: #5c5c5c;
|
||
--el-border-color: rgba(0, 0, 0, 0.1);
|
||
--el-border-color-light: rgba(0, 0, 0, 0.06);
|
||
--el-border-color-lighter: rgba(0, 0, 0, 0.05);
|
||
--el-fill-color-blank: transparent;
|
||
--el-font-size-base: 13px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#app {
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family:
|
||
'Segoe UI Variable Text', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC',
|
||
'Helvetica Neue', Arial, sans-serif;
|
||
font-size: 13px;
|
||
background: var(--ch-bg);
|
||
color: var(--ch-text);
|
||
/* 桌面端禁用整页选中，更接近原生应用体验 */
|
||
user-select: none;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
input,
|
||
textarea {
|
||
user-select: text;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 页面骨架 */
|
||
|
||
.page {
|
||
padding: 16px 20px 24px;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.page-subtitle {
|
||
margin: 4px 0 0;
|
||
font-size: 12.5px;
|
||
color: var(--ch-text-secondary);
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.mt-12 {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.mt-16 {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.text-muted {
|
||
color: var(--ch-text-tertiary);
|
||
}
|
||
|
||
.offline-banner {
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 卡片 / 分组 */
|
||
|
||
/* 亚克力卡片：半透明底 + 极细描边 + 极轻阴影（ClassIsland 的内容卡片观感） */
|
||
.el-card {
|
||
border-radius: var(--ch-radius-card) !important;
|
||
border: 1px solid var(--ch-border) !important;
|
||
background: var(--ch-layer) !important;
|
||
backdrop-filter: blur(20px) saturate(1.1);
|
||
box-shadow: var(--ch-shadow-card) !important;
|
||
transition:
|
||
border-color 0.15s ease,
|
||
box-shadow 0.15s ease;
|
||
}
|
||
|
||
.el-card:hover {
|
||
border-color: var(--ch-border-strong) !important;
|
||
}
|
||
|
||
.el-card__header {
|
||
padding: 12px 16px !important;
|
||
border-bottom: 1px solid var(--ch-divider) !important;
|
||
font-weight: 600;
|
||
font-size: 13.5px;
|
||
}
|
||
|
||
.el-card__body {
|
||
padding: 14px 16px !important;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 控件 */
|
||
|
||
.el-button {
|
||
border-radius: var(--ch-radius-control) !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.el-button--default {
|
||
background: rgba(255, 255, 255, 0.7) !important;
|
||
border-color: var(--ch-border-strong) !important;
|
||
}
|
||
|
||
.el-button--default:hover {
|
||
background: rgba(0, 0, 0, 0.04) !important;
|
||
}
|
||
|
||
.el-button--primary {
|
||
box-shadow: 0 1px 2px rgba(15, 108, 189, 0.2);
|
||
}
|
||
|
||
.el-input__wrapper,
|
||
.el-textarea__inner,
|
||
.el-select__wrapper {
|
||
border-radius: var(--ch-radius-control) !important;
|
||
background: rgba(255, 255, 255, 0.7) !important;
|
||
box-shadow: 0 0 0 1px var(--ch-border-strong) inset !important;
|
||
}
|
||
|
||
.el-input__wrapper.is-focus,
|
||
.el-select__wrapper.is-focused {
|
||
box-shadow: 0 0 0 1px var(--ch-accent) inset !important;
|
||
}
|
||
|
||
.el-tag {
|
||
border-radius: var(--ch-radius-control) !important;
|
||
}
|
||
|
||
.el-dialog,
|
||
.el-drawer {
|
||
border-radius: var(--ch-radius-card) !important;
|
||
background: var(--ch-layer-solid) !important;
|
||
}
|
||
|
||
.el-message-box {
|
||
border-radius: var(--ch-radius-card) !important;
|
||
}
|
||
|
||
.el-popper,
|
||
.el-dropdown__popper {
|
||
border-radius: var(--ch-radius-card) !important;
|
||
box-shadow: var(--ch-shadow-flyout) !important;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 表格 */
|
||
|
||
.el-table {
|
||
--el-table-border-color: var(--ch-divider);
|
||
--el-table-header-bg-color: transparent;
|
||
--el-table-row-hover-bg-color: rgba(0, 0, 0, 0.03);
|
||
background: transparent !important;
|
||
}
|
||
|
||
.el-table th.el-table__cell {
|
||
background: transparent !important;
|
||
font-weight: 600;
|
||
color: var(--ch-text-secondary);
|
||
}
|
||
|
||
.el-table td.el-table__cell,
|
||
.el-table th.el-table__cell {
|
||
border-bottom: 1px solid var(--ch-divider) !important;
|
||
}
|
||
|
||
.el-table__inner-wrapper::before {
|
||
display: none;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 侧边导航（Fluent NavigationView 观感） */
|
||
|
||
.ch-nav {
|
||
background: rgba(255, 255, 255, 0.65);
|
||
backdrop-filter: blur(24px) saturate(1.2);
|
||
border-right: 1px solid var(--ch-border);
|
||
}
|
||
|
||
.ch-nav .el-menu-item {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin: 2px 8px;
|
||
border-radius: var(--ch-radius-control);
|
||
color: var(--ch-text);
|
||
font-weight: 500;
|
||
position: relative;
|
||
}
|
||
|
||
.ch-nav .el-menu-item:hover {
|
||
background: rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
/* 选中项：强调色淡底 + 左侧强调条（WinUI 经典样式） */
|
||
.ch-nav .el-menu-item.is-active {
|
||
background: var(--ch-accent-soft);
|
||
color: var(--ch-text);
|
||
}
|
||
|
||
.ch-nav .el-menu-item.is-active::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 3px;
|
||
height: 16px;
|
||
border-radius: 2px;
|
||
background: var(--ch-accent);
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 课表时间轴 */
|
||
|
||
.timetable-cell {
|
||
min-height: 30px;
|
||
}
|
||
|
||
.timetable-course {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.timetable-meta {
|
||
font-size: 12px;
|
||
color: var(--ch-text-tertiary);
|
||
}
|
||
|
||
.unread-dot {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #d13438;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 滚动条 */
|
||
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.18);
|
||
border: 3px solid transparent;
|
||
background-clip: content-box;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
background-clip: content-box;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|