feat(shared,web-admin,desktop-client,build): beUI 动效层与两端深色主题，全项目图标改用设计导出的新图标
动效层：把 beUI 的动效语言移植到两端，令牌放在 packages/shared/src/motion.ts（纯常量，后端也引用得到）。弹簧用数值积分生成 CSS linear()，纯 CSS 即可驱动，不必每组件一个 rAF 循环；两端各一份 composables/motion.ts 负责 DOM 部分，在 app.mount() 之前注入 :root。含 reduced-motion 全局降级与 hover 能力探测；灵动岛只移植单调曲线。
深色主题：Web 管理端补齐，机制与桌面客户端一致；语义色令牌只覆盖颜色，不动圆角与动效令牌。默认跟随系统，用户手动点过之后以用户为准。
图标：build/classhelper.{png,ico} 成为全项目唯一图形源，pnpm icons 从它派生各端图标与界面内品牌标。版本号统一到 1.1.2。
This commit is contained in:
LoveChengke committed
1 parent
82c85b59c1
commit
ce9bed73f4
59 files changed
+2974
-336
No files matched your search
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@classhelper/web-admin",
|
||||
"version": "1.1.1",
|
||||
"version": "1.1.2",
|
||||
"private": true,
|
||||
"description": "班级小助手 Web 管理端（Vue 3 + Vite + Element Plus）",
|
||||
"type": "module",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.7 KiB |
@@ -1,15 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#4facfe"/>
|
||||
<stop offset="55%" stop-color="#409eff"/>
|
||||
<stop offset="100%" stop-color="#1f6feb"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="64" height="64" rx="14" ry="14" fill="url(#g)"/>
|
||||
<text x="50%" y="52%" text-anchor="middle" dominant-baseline="central"
|
||||
font-family="'Microsoft YaHei','PingFang SC',sans-serif" font-weight="700"
|
||||
font-size="33" fill="#ffffff">班</text>
|
||||
<rect x="16" y="47" width="32" height="3"
|
||||
rx="1" fill="#ffffff" opacity="0.9"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
|
||||
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAQAElEQVR4Aez9d6BtV1nvD3/HXPuU5Jz0kISQkBA6SAdBOqKAKCj1IoJiA7wgKCLqVawoiKIg6EW5CNJFFFSwAIKIF+kBlBJCJySQ3k5yyt5rvJ/PM+dce5+TgOX63/ubjGc8vYwyx5xrrZ3DkP/v+v/rGfhv3wDnn3/+7ouvvvr6F1/Rv+mSPRu/culVy9dftnd5MbhfctWyX3r1sl8GXC7sXfYrtsI+eGAPcOUhcG2yK/HVTt1V+5f9GkCMWbcHvfSMr0J3bfbKKyb2s14/ZYL+4q3gGC6nFjFjXY1PWrkg7bgF52ArOC8X7Vn2C69c9guu2OgXXbHsF+9Zfv7CPRu/f+EV6w+96Ip+yyuu6Cf03tf+u3frf8sGoLAFRd6Cgn9h++7j/jDLHX/Xhv7RtPaLPXlE7zkmLWlAuCYEdXBrGKsDrRTy5Qch3grD0DIgoKUubALQIg6ja0C4tCmYaeVliIBWOnlgAGhIpwZDK4axFLZTNtc8kFB+QGEsUNTFwQDSoGLVSRhLkDensMCZFvSnZ9n+Z0/78976mXvT33DRnuVvf/Xy/l2XXNKP1ue/A6z3/ynOZXvXv/Oiq/qZact3Uvwv97RHM4CbMx8DOAOzYpLC0oAJ1QnYRSwEnViY7aUbCmM0HAdpiNIzS4MgLy59os+QZAUtRVNfyq8lrfeUHlpZuMoPfsbKYbMwNkL5rRCUDUEzEHTx4GLpcImyGRCNOZOo2wrhKh6jwsQRD3SQ21DfY9nbU1v6q/e0/udfvbTfF9n/cyPdfz5G733x1Yv3fdP5V2y8aP/G8Iah5VbcjScQyTneHBwCiqcfmzTjWenxqwlRXjRE65lkbWXHoJNWLQ0DyAjVQdDSWIWWFq8GFlZ0kxJ6zC8l0dKKtJOadU5Km3QlozOvNUKmILMFMQ3AJilk14J2hHDBFl/dxBjDPEKJ6JRhnrJLIi+Eaws+cvsi39rb8u3nXrp8lxvhgt6PwOS/1Mz/n3K88KqrrnfRlctfGbZv++vF0J601rKT2lNAx/qMNFFhI2PxcyJlA4yymZZHFCd4BhddfQGden3C1QjawLaSFdPDbR15F0swlnHSW8nTMEky2iQr+6AIp64hpGG1Gf2jJPM1wDlGrEuEacoWbhBgaFFuVzFgaLIHQTH42IxZICPgQJMqM2njiwXmPosh91y25ev2Xdb/+II9/fZl/J/sjPkfdjn77L5j//6drx6G9rNrQ053cLOzg94aTL4AgwY4Cu2lhYNs0bemVGKaWlhaFBcuVUsDl8VIFFcdPKd6kaxjOosu6OBmQF06sWB+N4e0emsTyqh8oQikHgQTQsklELGuOUYwaG3S9R4p2VFf5rW5lQkDCrF24RIXDzFjxNUQZZZZn4+84tGKFy3HsxYPv3Jf//Nz/guPBUoh0r/TOPLXfPk44sT+xR3bci+KIm8OKgxZvCxKWgidvLiKhxeDEPkM3pwsF1XbURf0qcu7wjuVNYk4XANC7Yw19JTtzIsFbRZtGa8xbi+7sVMayAaIe+bLzTCD+czbUAo92JkbhpbRuaXiI3dhzduSkgVi1CXS1ouIzZm61JVM4QylyWrDFNuie7Rvra10iKFH/vBtOX1tWL79/Ms2nnLRRf3I/DvXrB5m4hvhcy/NdzIZL9m2yInlQGbqCCjFz84ISo4QsvTiBULx1kUOsoLJd2Z5lJe4eOIEx0YnX2zToSFJwdYCtGnhYp24EXmJhqNJ99F6nHxlmnUrEhDAl/9IlnWjn2WFJxs9UKUWD1k1kjQJDGmx1llfcnI1nBo26kFjQyBfgESsr3sN89R8IJeeAZc0uooPlgZFfjm0F1y92Hguj4STdfv3oHJ9I6MvX7zv1ovF8g07FjkpZgHmhJDlKl7JYCoomJaSc3eMGIkTgQFUFVwBkB2Ei0m00S9e2DDHNfeQ8c7UQJl2M63OSZPXTZ0xKGHy7ZkOhoQ6ttpIz2B8IT0p/6SwfFAoQxVzeWKMygYCwlUJAz8D58dUbEsqdWsJLV7ig3hqc0Fn3WyonbLKDUNbxQpGuGVtGB5/4MDGr+Y/cGl/rWYc+4uvXL7+oGGx7cwda62+gNDYhEKsAE+LBlWbaVXS2gmldPAQrfHk1QDa5iARSRas7Iujw3Ylg9C2ALk1SGNViztjVbNcWjvmJsIiXNPilFx2IixRQKSpKEWUsBepacXuo0peitLiRmB0skmU0I8orbUcNFbkWx9fmS/kmM5cYGNXOFwSwAKgIRibdAEdeRrXD5932cavnHtuP3y0uPbeNb1WzXkX7b/x9mF4Ns+WlQ2BU8WQZNz5SfFYNGVJCkMPaSk60wVDS5j8EY9r1nLw5Vy31sp31jDXcWLbFoGyAjoa+gA9uEa7itOzSqI/XLoGWBRSAJQMB/2UC7CU2rE0hN5oe1hE7+SG19ikhDIcRau+5HDGA0UbZc6jOCogRMrCJZ55VGWirGBI8ZkvDLQtQCa2bsg0HFprz2y7lj/75d4PU3ZtQMhrin/5l/uw3LbtpeyyW27VdhhyOiMRXwMQDGi8y1qWafABGl3R+IcgDVwATYs6AXGUVwKYou0w6mjKRl4ovdKgYVGStNaAbF4tLNjIUk0RNUGtyIgEuYoEQ6uFn2VlL4OiA0WyicVCpyNtxZLWXjNBYWEGXacDTNmC1QmsExHGJq1KbmVXTDSdp6XolX5ykA+XMayjxE3T9sztV2w8ANW1tuFQKUf/zh/5ieUL+Xx/V4MK2oibhNHFMoAJSwddmMGaVhMBcWrwMNKzPWzkBWlhK20YalEc4/rxpyaX/NopE8NGA/WZLu0k/bZvfOuTS7Rx7UY5sgbYcDCeOYuVmXTal7wSxW2tSZS1sSt+dvFTQAnoDFFutXPgisELDBcoymvgFudlg3ifujr5/L5kA5twKQdVa/S1YBLQlI2vBECzBtAokwCUrff2nK/t7TeEvUareFul5166cb/F0H5oh7cxCpOAKqjBVoBQWr31SCNKGeaQaxqMdjVz8GVvdoXyq0DZDFFGGS/oxgR5ry8n+14y1PqKJtDOxYaNNsxyZt7NqLzqgCAU/dSoZcVPREe2WVBCytSlHEJU6Wf7IJlo1HIpH2WozNvSVI3ADnNMVy9bfuIzyQ9P8HOf79mnD1ZaC+UGMU9bxVWPTJ0INsqltQvE0NpNlvs2Xn1578ep3wplMws+dUE/orfhsdvXsjNcBgJFXLXQSRNTsWPJADPL6s4qTcNnAFKQLVefjGvSkDeAsJt31sSDom7EWEwOyubFnHXKPOInk4QcPUjB4YJKB9vMX7bqFRS0Lcc+AgKVa4P+Ok19Jwam+NZUwGUFOeQyFGvtXqQWPd2mkxHK/3Nuz19emnyBu/9Te5NXXdjyVxf1yQCEDS3mhSssLQQFTaQqHUY5qGSuUdJuf/Vly0dwqirOfA0zIT525/rtdq7lXiWczKQlxdoUIKCloidMwFhoa0OU19BaLzpcFgOqpl5CGydPUKbN5gYKvj1e6rpKGLGQiS97aC3dFMZ0hpUjjnL51YIrJI62ggaKhIqLbs5nXbBzKsmCWV4MnfahM7f5VnoZ9KuGjXYuhvncMkxR2Pk5lwX/m0u445dGSfx0oN/F64m2QubLuA1GDEjCVYMN721ZQCjXT6xyGNo2viN4xNeuzHXkZxhmQtwy/BgFloGOBVgUphukwbQIsIVjpkyXCmFiRdQj+rpmujsZPa02kws4L0jXs7oWF2yEEqhhfTdpLBKC9UCxEjR8mhzgQZu6jF0gh1EHN2CMHWoAktT40K/kDeGWRqoV18lQdkqwo0XR1MVrq/1Ms+b558uTD1/R3Avx8cYaZDvB7n10i7SxDoVsueZY2sziuWxlgnLs7so9elfpGRxj0Rfu23cziEetjGGoocaAo9wIfUSlKHIUlB+rqG3Ro7gsqkPI8VOkcTMZiopHU7SdoP8ErQx6ChsHvQsY8FZYBose+3hhGp/5SAPBZkhdNTnYyfRoBYWwQ5btlI/dlV450KOjj6xY6HTCHFgTQb5LlHLLxoMnTVThGgntnv2lnv0roeKeHzopufVuaOS0mFeITMZLXpZpj3RkUEkXHEqHR/syT2cd1lBVW22AA3vXfm7B+TE7qpUORRtXWnzojsycNRkp7MOlPahk5ScD5wRospSHkXYSCoqhQz4vxIiZUgMKoxrBSHhaGEowjxDtEMy+8vMkqff4n0FeXdfHkOIoJQUxbIoE6UNByz7Z19GBwYqHrtaJBUgbR5+Zful5yVfWWzxdw+Xb/xnbW37q1MaJ0MbILYVXcy8vZLwqJvERpdPR6uTQCXEZlQ0Ui3+3y/bkWyGr1Qa4fG+/KcEfoKPSMp4YaQNNbIpGSBtpIhSd8boGjaNFsKa49qgn1+o55wKuQFsNtkCXNjQBKF4q+rfWGOwICrsd/qIC9IXt8BVdO+jZo6su1sJyJTBK5YVwGUYgq4dDmSGOPObRvhNIXnlBT9QJma7SY3fu/uTFbIA1PnE5porNnfG4E5OjmVeTlAw//QXF4q2QlsiHyzjZws9yilMc+QPpz8K0mvFy2VUbN1wb2up3/RBArcYzzThSvITKLVDm3kZbZN5h8wC2iFO2xKClNbgJOljZbDvThu3ZtJOsuBgiLVYMW60mtyg6YmYF8KumB4CutRGrMpf2rSHrCX1SfRtv7pa6RIIMZiJLKjyaNxBHv8o2iu2rNmSscX3Of/0FySU+9FUCLvYt+eL23vyWt47REujdAC1jSS0ZW7w6seSlxY3VrDEgUAUbQV9BG1RZ3+g3ufTK/u3Swzt7Xzts5+IeHEG7NShDEquUd+dIG0i6NSqQQDiTJmtlzE0hg25ZPNIGMzcdquqUNlsv/YB5AIXhaWXrXahMKJndCnrZGM68SyZt2VMvVOIO3ydeDKtpPFGWCDaWyQZvY0sUG9Line truncated
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 702 B After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 264 KiB After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -316,7 +316,7 @@ function parityLabel(item: ClassPlanEntryDto): string {
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-top: 10px;
|
||||
color: #606266;
|
||||
color: var(--ch-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.mb-8 {
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { useCountUp } from '@/composables/motion';
|
||||
|
||||
/**
|
||||
* 统计卡片。抽成组件而不是写在 DashboardView 的 v-for 里，是因为数字滚动要用到
|
||||
* `useCountUp()` —— 它必须在 setup 阶段调用（内部有 `watch` 与 `onUnmounted`），
|
||||
* 而 v-for 里没法给每一项单独跑一遍 setup。
|
||||
*
|
||||
* 外观类名走全局样式（`styles/index.css` 的 `.stat-card` / `.stat-value`…），
|
||||
* 与仪表盘原先的写法完全一致，这里只负责"数字滚起来"。
|
||||
*/
|
||||
const props = defineProps<{
|
||||
label: string;
|
||||
value: number;
|
||||
hint: string;
|
||||
}>();
|
||||
|
||||
/**
|
||||
* 数字滚动（beUI 的 number 原语）。0 → 实际值的那一跳就是它存在的意义：
|
||||
* 数据是异步来的，直接跳到终值会让人错过"这一栏有内容"这件事。
|
||||
*/
|
||||
const displayed = useCountUp(() => props.value);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">{{ label }}</div>
|
||||
<div class="stat-value">{{ Math.round(displayed) }}</div>
|
||||
<div class="stat-hint">{{ hint }}</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -388,7 +388,7 @@ async function submit(): Promise<void> {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.file-name {
|
||||
color: #606266;
|
||||
color: var(--ch-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.hidden-input {
|
||||
@@ -399,7 +399,7 @@ async function submit(): Promise<void> {
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin: 12px 0 4px;
|
||||
color: #606266;
|
||||
color: var(--ch-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.required-hint {
|
||||
@@ -409,7 +409,7 @@ async function submit(): Promise<void> {
|
||||
}
|
||||
.mode-hint {
|
||||
width: 100%;
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.result-stats {
|
||||
|
||||
@@ -293,7 +293,7 @@ function fillSample(): void {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 10px;
|
||||
color: #606266;
|
||||
color: var(--ch-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.mb-8 {
|
||||
|
||||
@@ -73,7 +73,13 @@ function handleConfirm(): void {
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="urgent-fade">
|
||||
<!--
|
||||
`:duration` 是必需的：这块遮罩是 `position: fixed; inset: 0`，铺满整屏、吃掉所有点击。
|
||||
靠 `animationend` 判断退场结束的话，窗口被遮挡时 Chromium 会冻结 CSS 动画、
|
||||
事件永不触发 ⇒ **遮罩永远不卸载，整个管理端再也点不动**。
|
||||
给的数值取「卡片弹簧的落定时间」与「遮罩淡出的时长」里较大的那个，保证不会被提前截断。
|
||||
-->
|
||||
<Transition name="urgent-fade" :duration="{ enter: 480, leave: 160 }">
|
||||
<div v-if="visible" class="urgent-mask" role="alertdialog" aria-modal="true">
|
||||
<div class="urgent-card">
|
||||
<div class="urgent-icon">
|
||||
@@ -116,7 +122,14 @@ function handleConfirm(): void {
|
||||
:show-text="false"
|
||||
color="#f56c6c"
|
||||
/>
|
||||
<span class="ring-text">{{ remaining }}</span>
|
||||
<!--
|
||||
倒计时数字按秒滚动（beUI 的 number 原语）。这里刻意**不用** `mode="out-in"`：
|
||||
出与进同时进行、共用一个绝对定位的中心，才读得出"数字往下滚"；
|
||||
串行执行会变成"先空一拍、再出现"，那是闪一下而不是滚动。
|
||||
-->
|
||||
<Transition name="ring-roll">
|
||||
<span class="ring-text" :key="remaining">{{ remaining }}</span>
|
||||
</Transition>
|
||||
</div>
|
||||
<span class="progress-hint">
|
||||
{{
|
||||
@@ -149,7 +162,7 @@ function handleConfirm(): void {
|
||||
max-width: calc(100vw - 48px);
|
||||
padding: 28px 30px 22px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
background: var(--ch-surface);
|
||||
border-top: 4px solid #f56c6c;
|
||||
box-shadow: 0 24px 60px rgba(120, 20, 20, 0.35);
|
||||
text-align: center;
|
||||
@@ -164,7 +177,7 @@ function handleConfirm(): void {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #f56c6c;
|
||||
background: #fef0f0;
|
||||
background: rgba(245, 108, 108, 0.1);
|
||||
animation: urgent-pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -183,14 +196,14 @@ function handleConfirm(): void {
|
||||
.urgent-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 22px;
|
||||
color: #303133;
|
||||
color: var(--ch-text);
|
||||
}
|
||||
|
||||
.urgent-subtitle {
|
||||
margin: 0 0 18px;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: #606266;
|
||||
color: var(--ch-text-secondary);
|
||||
}
|
||||
|
||||
.urgent-subtitle strong {
|
||||
@@ -210,17 +223,17 @@ function handleConfirm(): void {
|
||||
}
|
||||
|
||||
.urgent-period {
|
||||
background: #fef0f0;
|
||||
background: rgba(245, 108, 108, 0.1);
|
||||
}
|
||||
|
||||
.urgent-preview {
|
||||
background: #f5f7fa;
|
||||
background: var(--ch-surface-alt);
|
||||
}
|
||||
|
||||
.period-label,
|
||||
.preview-label {
|
||||
flex: 0 0 64px;
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
}
|
||||
|
||||
.period-value {
|
||||
@@ -229,7 +242,7 @@ function handleConfirm(): void {
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
color: #303133;
|
||||
color: var(--ch-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -266,17 +279,31 @@ function handleConfirm(): void {
|
||||
|
||||
.progress-hint {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
}
|
||||
|
||||
/*
|
||||
* 进出的曲线统一走共享令牌（`packages/shared/src/motion.ts`）——
|
||||
* 原先这里是手写的 `cubic-bezier(0.34, 1.56, 0.64, 1)`，与全站其它浮层不是一套手感。
|
||||
* PANEL 弹簧同样是"落位时轻微过冲"，但它和弹窗、抽屉用的是同一条曲线，
|
||||
* 连续操作时不会觉得这个警告框是"另一个世界的弹窗"。
|
||||
*/
|
||||
.urgent-fade-enter-active,
|
||||
.urgent-fade-leave-active {
|
||||
transition: opacity 0.22s ease;
|
||||
transition: opacity var(--ch-dur-base) var(--ch-ease-out);
|
||||
}
|
||||
|
||||
.urgent-fade-enter-active .urgent-card,
|
||||
.urgent-fade-enter-active .urgent-card {
|
||||
transition:
|
||||
transform var(--ch-spring-panel-dur) var(--ch-spring-panel),
|
||||
opacity var(--ch-dur-base) var(--ch-ease-out);
|
||||
}
|
||||
|
||||
/* 退出比入场快：用户已经决定关掉它了，再让他等一段"有分量"的动画只会显得卡 */
|
||||
.urgent-fade-leave-active .urgent-card {
|
||||
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition:
|
||||
transform var(--ch-dur-fast) var(--ch-ease-out),
|
||||
opacity var(--ch-dur-fast) var(--ch-ease-out);
|
||||
}
|
||||
|
||||
.urgent-fade-enter-from,
|
||||
@@ -284,8 +311,42 @@ function handleConfirm(): void {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.urgent-fade-enter-from .urgent-card,
|
||||
.urgent-fade-enter-from .urgent-card {
|
||||
transform: scale(0.94) translateY(10px);
|
||||
}
|
||||
|
||||
.urgent-fade-leave-to .urgent-card {
|
||||
transform: scale(0.92) translateY(10px);
|
||||
transform: scale(0.97) translateY(-6px);
|
||||
}
|
||||
|
||||
/* 倒计时数字的滚动：旧的向上淡出、新的从下方升上来，两者同时进行 */
|
||||
@keyframes ring-roll-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(0.4em);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring-roll-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-0.4em);
|
||||
}
|
||||
}
|
||||
|
||||
.ring-roll-enter-active {
|
||||
animation: ring-roll-in var(--ch-dur-fast) var(--ch-ease-out) both;
|
||||
}
|
||||
|
||||
.ring-roll-leave-active {
|
||||
animation: ring-roll-out var(--ch-dur-instant) var(--ch-ease-out) both;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* 动效组合式函数 —— beUI 那套动效语言在本端的落地层。
|
||||
*
|
||||
* 令牌的**数值**在 `@classhelper/shared` 的 `motion.ts`（单一来源，后端也引用得到）；
|
||||
* 这里只放需要 DOM / Vue 的部分。桌面客户端有一份对应的副本
|
||||
* （`packages/desktop-client/src/renderer/composables/motion.ts`）——
|
||||
* 与 `ScoreBarChart.vue` 一样，两端各一份是仓库既有做法，为一个百来行的文件
|
||||
* 新建 workspace 包不划算。
|
||||
*/
|
||||
import { computed, onUnmounted, ref, watch, type CSSProperties, type Ref } from 'vue';
|
||||
import {
|
||||
EASE_OUT,
|
||||
HOVER_CAPABLE_QUERY,
|
||||
MOTION_DURATION,
|
||||
REDUCED_MOTION_QUERY,
|
||||
cubicBezierCss,
|
||||
motionCssVars,
|
||||
} from '@classhelper/shared';
|
||||
|
||||
/**
|
||||
* 把动效令牌写进 `:root` 的自定义属性。
|
||||
*
|
||||
* **必须在 `app.mount()` 之前调用**：那样 CSS 里可以放心写 `var(--ch-spring-panel)`，
|
||||
* 首帧之前就已就位，既没有 FOUC，也不需要到处写兜底值。
|
||||
*
|
||||
* 弹簧用 CSS `linear()` 表达（见 shared 里 `springLinearEasing` 的说明）；
|
||||
* Chrome 113 以下不支持，此时回落到 `EASE_OUT` 的 cubic-bezier —— 手感略钝但不会失效。
|
||||
*/
|
||||
export function applyMotionTokens(): void {
|
||||
if (typeof document === 'undefined') return;
|
||||
const linear =
|
||||
typeof CSS !== 'undefined' &&
|
||||
typeof CSS.supports === 'function' &&
|
||||
CSS.supports('transition-timing-function', 'linear(0, 1)');
|
||||
|
||||
for (const [name, value] of Object.entries(motionCssVars({ linear }))) {
|
||||
document.documentElement.style.setProperty(name, value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听 `prefers-reduced-motion`。
|
||||
*
|
||||
* 三元表达式而非直接返回 `matchMedia(...)` 的结果：这条偏好可能在运行中被改动
|
||||
* （系统设置里一开关就生效），必须跟着变；JS 驱动的动画（数字滚动、位置测量）
|
||||
* 拿不到 CSS 那层自动降级，得自己看这个值。
|
||||
*/
|
||||
export function useReducedMotion(): Ref<boolean> {
|
||||
const matches = ref(false);
|
||||
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return matches;
|
||||
|
||||
const query = window.matchMedia(REDUCED_MOTION_QUERY);
|
||||
matches.value = query.matches;
|
||||
|
||||
const update = (): void => {
|
||||
matches.value = query.matches;
|
||||
};
|
||||
// Safari 14 以下只有已废弃的 addListener
|
||||
if (typeof query.addEventListener === 'function') {
|
||||
query.addEventListener('change', update);
|
||||
onUnmounted(() => query.removeEventListener('change', update));
|
||||
} else if (typeof query.addListener === 'function') {
|
||||
query.addListener(update);
|
||||
onUnmounted(() => query.removeListener(update));
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否有真正的悬停能力（鼠标 / 触控板）。
|
||||
*
|
||||
* 触摸设备在点按时会触发**幽灵 hover** 并一直粘着，直到点别处才消失 ——
|
||||
* 教室里的希沃触摸屏正属于这种，所有 hover-only 效果（抬升、磁吸、光标跟随）
|
||||
* 都必须先过这一关，否则触摸屏上会出现"点一下，卡片就永远浮着"。
|
||||
*/
|
||||
export function useHoverCapable(): Ref<boolean> {
|
||||
const capable = ref(false);
|
||||
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return capable;
|
||||
|
||||
const query = window.matchMedia(HOVER_CAPABLE_QUERY);
|
||||
capable.value = query.matches;
|
||||
|
||||
const update = (): void => {
|
||||
capable.value = query.matches;
|
||||
};
|
||||
if (typeof query.addEventListener === 'function') {
|
||||
query.addEventListener('change', update);
|
||||
onUnmounted(() => query.removeEventListener('change', update));
|
||||
} else if (typeof query.addListener === 'function') {
|
||||
query.addListener(update);
|
||||
onUnmounted(() => query.removeListener(update));
|
||||
}
|
||||
return capable;
|
||||
}
|
||||
|
||||
/** 缓动函数：给定进度 t∈[0,1]，返回缓动后的进度。即 EASE_OUT 那条贝塞尔的求值。 */
|
||||
function easeOutProgress(t: number): number {
|
||||
const [x1, y1, x2, y2] = EASE_OUT;
|
||||
// 牛顿迭代反解 x(u) = t，再用同一个 u 求 y —— 三次贝塞尔求值的标准做法
|
||||
let u = t;
|
||||
for (let i = 0; i < 6; i += 1) {
|
||||
const x = 3 * (1 - u) ** 2 * u * x1 + 3 * (1 - u) * u ** 2 * x2 + u ** 3;
|
||||
const dx = 3 * (1 - u) ** 2 * x1 + 6 * (1 - u) * u * (x2 - x1) + 3 * u ** 2 * (1 - x2);
|
||||
if (Math.abs(dx) < 1e-6) break;
|
||||
u = Math.min(1, Math.max(0, u - (x - t) / dx));
|
||||
}
|
||||
return 3 * (1 - u) ** 2 * u * y1 + 3 * (1 - u) * u ** 2 * y2 + u ** 3;
|
||||
}
|
||||
|
||||
export interface CountUpOptions {
|
||||
/** 时长（毫秒）。默认 `MOTION_DURATION.slow`。 */
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数字滚动：目标值变化时从当前显示值滚过去，而不是直接跳。
|
||||
*
|
||||
* 用于仪表盘的统计卡片。`reduced-motion` 下**直接落位**（不启动 rAF）。
|
||||
*
|
||||
* 刻意**不**给"首次变化"开豁免：统计页的数据是异步加载的，挂载那一刻目标值还是 0，
|
||||
* 真正想看到滚动的恰恰是"0 → 实际值"这第一跳；而如果数据在挂载时就已就位
|
||||
* （缓存命中），`displayed` 初始化即等于目标值、根本不会触发 watch，本来就不会滚。
|
||||
*/
|
||||
export function useCountUp(source: () => number, options: CountUpOptions = {}): Ref<number> {
|
||||
const reduce = useReducedMotion();
|
||||
const duration = options.duration ?? MOTION_DURATION.slow;
|
||||
const displayed = ref(source());
|
||||
let frame = 0;
|
||||
|
||||
function stop(): void {
|
||||
if (frame) {
|
||||
cancelAnimationFrame(frame);
|
||||
frame = 0;
|
||||
}
|
||||
}
|
||||
|
||||
watch(source, (target) => {
|
||||
stop();
|
||||
if (reduce.value || duration <= 0) {
|
||||
displayed.value = target;
|
||||
return;
|
||||
}
|
||||
const from = displayed.value;
|
||||
const delta = target - from;
|
||||
if (delta === 0) return;
|
||||
|
||||
const start = performance.now();
|
||||
const tick = (now: number): void => {
|
||||
const progress = Math.min(1, (now - start) / duration);
|
||||
displayed.value = from + delta * easeOutProgress(progress);
|
||||
if (progress < 1) frame = requestAnimationFrame(tick);
|
||||
else {
|
||||
displayed.value = target;
|
||||
frame = 0;
|
||||
}
|
||||
};
|
||||
frame = requestAnimationFrame(tick);
|
||||
});
|
||||
|
||||
onUnmounted(stop);
|
||||
return displayed;
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表错峰入场：返回一个"给第 index 项算内联样式"的函数，
|
||||
* 配合 CSS 类 `.ch-reveal`（见 `styles/index.css`）使用。
|
||||
*
|
||||
* 延迟**封顶**（默认第 8 项之后不再累加）：一屏几十行时，最后一行不该等一秒才出现。
|
||||
*/
|
||||
export function useStaggerIn(step = 35, maxIndex = 8): (index: number) => CSSProperties {
|
||||
const reduce = useReducedMotion();
|
||||
return (index: number): CSSProperties =>
|
||||
reduce.value ? {} : ({ '--ch-reveal-delay': `${Math.min(index, maxIndex) * step}ms` } as CSSProperties);
|
||||
}
|
||||
|
||||
/** 把 reduced-motion 折成一个布尔，供模板里判断"要不要挂动画类"。 */
|
||||
export function useMotionEnabled(): Ref<boolean> {
|
||||
const reduce = useReducedMotion();
|
||||
return computed(() => !reduce.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 整页换肤的揭示动画（beUI 的 `theme-toggle`）：新旧两帧各存一张快照，
|
||||
* 让新帧从一个**从点击位置扩散的圆**里长出来 —— 这是"整个界面换了张皮"这件事
|
||||
* 唯一能让人**看见**的表达方式，比整页硬切一下好懂得多。
|
||||
*
|
||||
* 返回的函数直接挂 `@click`：`@click="reveal($event, () => ui.setTheme(next))"`。
|
||||
*
|
||||
* 三条守卫缺一不可：
|
||||
* ① 不认识 View Transition API 的浏览器直接走同步切换；
|
||||
* ② 系统开了「减少动态效果」时不放全屏动画；
|
||||
* ③ **文档不可见时不放**（最小化、被遮挡、无头浏览器）—— 那种情况下浏览器不产生帧，
|
||||
* 而 View Transition 的更新回调要等到下一个渲染时机才执行，**主题会一直不切**。
|
||||
*/
|
||||
export function useThemeReveal(): (event: MouseEvent, apply: () => void) => void {
|
||||
const reduce = useReducedMotion();
|
||||
|
||||
return (event, apply) => {
|
||||
const doc = document as Document & {
|
||||
startViewTransition?: (callback: () => void) => { ready: Promise<void> };
|
||||
};
|
||||
if (
|
||||
typeof doc.startViewTransition !== 'function' ||
|
||||
reduce.value ||
|
||||
document.visibilityState !== 'visible'
|
||||
) {
|
||||
apply();
|
||||
return;
|
||||
}
|
||||
|
||||
const { clientX: x, clientY: y } = event;
|
||||
void doc
|
||||
.startViewTransition(apply)
|
||||
.ready.then(() => {
|
||||
// 半径取到最远的那个角，圆才能把整屏吃完
|
||||
const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
|
||||
document.documentElement.animate(
|
||||
{ clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`] },
|
||||
{
|
||||
// 比常规过渡长一点 —— 它是一次**整屏**的变化，太快会读成"闪了一下"而不是"换了一层皮"
|
||||
duration: MOTION_DURATION.slow * 1.5,
|
||||
// 缓动取自共享令牌，别在这里手写曲线字面量（那是漂移的起点）
|
||||
easing: cubicBezierCss(EASE_OUT),
|
||||
pseudoElement: '::view-transition-new(root)',
|
||||
},
|
||||
);
|
||||
})
|
||||
.catch(() => undefined);
|
||||
};
|
||||
}
|
||||
@@ -10,12 +10,14 @@ import {
|
||||
Guide,
|
||||
Lock,
|
||||
Menu,
|
||||
Moon,
|
||||
Notebook,
|
||||
Odometer,
|
||||
Plus,
|
||||
Refresh,
|
||||
School,
|
||||
Search,
|
||||
Sunny,
|
||||
SwitchButton,
|
||||
Trophy,
|
||||
Upload,
|
||||
@@ -50,12 +52,14 @@ const APP_ICONS = {
|
||||
Guide,
|
||||
Lock,
|
||||
Menu,
|
||||
Moon,
|
||||
Notebook,
|
||||
Odometer,
|
||||
Plus,
|
||||
Refresh,
|
||||
School,
|
||||
Search,
|
||||
Sunny,
|
||||
SwitchButton,
|
||||
Trophy,
|
||||
Upload,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
|
||||
import { STORAGE_KEYS } from '@classhelper/shared';
|
||||
@@ -7,15 +7,31 @@ import { authApi } from '@/api';
|
||||
import UpdateCheckDialog from '@/components/UpdateCheckDialog.vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { useRealtimeStore } from '@/stores/realtime';
|
||||
import { useUiStore } from '@/stores/ui';
|
||||
import { useResponsive } from '@/composables/useResponsive';
|
||||
import { useThemeReveal } from '@/composables/motion';
|
||||
import { APP_TITLE } from '@/config';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const realtime = useRealtimeStore();
|
||||
const ui = useUiStore();
|
||||
const { isMobile } = useResponsive();
|
||||
|
||||
/**
|
||||
* 顶栏的主题切换。整页"从点击位置扩散的圆"由 `useThemeReveal()` 提供
|
||||
* （与桌面客户端共用同一份实现，见 composables/motion.ts）。
|
||||
*
|
||||
* 入口只放在**登录后的主布局**里：登录页是刻意固定的深色渐变底（AGENTS.md §5 第 46 条），
|
||||
* 它不随主题走，在那里放一个切换按钮只会让人以为按钮坏了。
|
||||
*/
|
||||
const revealThemeChange = useThemeReveal();
|
||||
|
||||
function handleThemeToggle(event: MouseEvent): void {
|
||||
revealThemeChange(event, () => ui.toggleTheme());
|
||||
}
|
||||
|
||||
/**
|
||||
* 菜单项与可见角色（与后端 `@classhelper/shared/permissions` 矩阵保持一致）：
|
||||
* - 班级管理 / 学生管理 / 教师管理：仅管理员（班主任与科任老师都没有班级增删改与人员分配权限）
|
||||
@@ -50,6 +66,110 @@ const activeMenu = computed(() => route.path);
|
||||
/** 顶栏显示的当前页面标题（小屏下替代侧边栏的"我在哪"提示，1Panel 同款做法） */
|
||||
const currentTitle = computed(() => menuItems.find((item) => item.path === route.path)?.title ?? APP_TITLE);
|
||||
|
||||
/* -------------------------------------------------------------- 导航指示器 */
|
||||
|
||||
/**
|
||||
* 侧栏激活项的**滑动指示器**（beUI 的 `shared-layout-bg` / tabs 的 layoutId 手法）。
|
||||
*
|
||||
* 做法是**一个**绝对定位的药丸跟着激活项平移，而不是让每个菜单项各自画一块底色。
|
||||
* 后者在切换时是"旧的瞬间消失、新的瞬间出现"，看不出两者之间的关系；
|
||||
* 前者的滑动把「我从这一项去了那一项」这个关系画了出来 —— 这是整个动效层里
|
||||
* 唯一一处"传达信息"而非"装饰"的动画。
|
||||
*
|
||||
* 位置靠**量 DOM**而不是写死数值：菜单项的位置由 Element Plus 的 padding 与行高决定，
|
||||
* 写死会在组件库升级、字号变化或菜单文案变长时错位。
|
||||
* 用 ResizeObserver 而不是 window.resize：侧栏宽度/菜单重排都可能由非窗口因素触发。
|
||||
*/
|
||||
/**
|
||||
* `el-aside` 是**组件**而不是原生标签：模板 ref 拿到的是组件实例，
|
||||
* 直接 `.querySelector()` 会 `TypeError: not a function`（实测踩过，而且被
|
||||
* `app.config.errorHandler` 吞成了控制台里一行中文异常，界面看着毫无异样）。
|
||||
* 组件实例的 `$el` 才是它真正渲染出来的那个 `<aside>` 元素。
|
||||
*/
|
||||
type AsideRef = { $el?: HTMLElement } | HTMLElement | null;
|
||||
const asideRef = ref<AsideRef>(null);
|
||||
|
||||
function asideElement(): HTMLElement | null {
|
||||
const value = asideRef.value;
|
||||
if (!value) return null;
|
||||
return value instanceof HTMLElement ? value : (value.$el ?? null);
|
||||
}
|
||||
|
||||
const indicator = ref({ x: 0, y: 0, width: 0, height: 0, visible: false });
|
||||
|
||||
function syncIndicator(): void {
|
||||
const aside = asideElement();
|
||||
const active = aside?.querySelector<HTMLElement>('.el-menu-item.is-active');
|
||||
if (!aside || !active) {
|
||||
indicator.value = { ...indicator.value, visible: false };
|
||||
return;
|
||||
}
|
||||
const asideRect = aside.getBoundingClientRect();
|
||||
const rect = active.getBoundingClientRect();
|
||||
indicator.value = {
|
||||
x: rect.left - asideRect.left,
|
||||
y: rect.top - asideRect.top,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
visible: rect.width > 0 && rect.height > 0,
|
||||
};
|
||||
}
|
||||
|
||||
const indicatorStyle = computed(() => ({
|
||||
width: `${indicator.value.width}px`,
|
||||
height: `${indicator.value.height}px`,
|
||||
transform: `translate(${indicator.value.x}px, ${indicator.value.y}px)`,
|
||||
opacity: indicator.value.visible ? '1' : '0',
|
||||
}));
|
||||
|
||||
let asideObserver: ResizeObserver | null = null;
|
||||
let indicatorFrame = 0;
|
||||
|
||||
/**
|
||||
* 把测量推迟到下一帧再跑。
|
||||
*
|
||||
* 侧栏折叠时 `.aside` 的宽度有一整段过渡，`ResizeObserver` 会逐帧回调；若在回调里**同步**
|
||||
* 读 `getBoundingClientRect()` 再写样式，就是在每一帧中间强行插入一次同步布局
|
||||
* （Chromium 还会因此报 "ResizeObserver loop completed with undelivered notifications"）。
|
||||
* 放进 rAF 就变成"本帧布局完成后统一量一次"，代价是跟随慢一帧，肉眼无感。
|
||||
*/
|
||||
function scheduleIndicatorSync(): void {
|
||||
if (indicatorFrame) return;
|
||||
indicatorFrame = requestAnimationFrame(() => {
|
||||
indicatorFrame = 0;
|
||||
syncIndicator();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 首次测量放在 onMounted（而不是 nextTick）：子组件先于父组件挂载完成，
|
||||
* 此刻 `.el-menu-item.is-active` 已在文档里，量完再让浏览器首帧绘制 ——
|
||||
* 于是指示器**第一次出现就是正确位置**，不会从左上角滑过去。
|
||||
*/
|
||||
onMounted(() => {
|
||||
syncIndicator();
|
||||
const aside = asideElement();
|
||||
if (aside && typeof ResizeObserver !== 'undefined') {
|
||||
asideObserver = new ResizeObserver(scheduleIndicatorSync);
|
||||
asideObserver.observe(aside);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (indicatorFrame) cancelAnimationFrame(indicatorFrame);
|
||||
indicatorFrame = 0;
|
||||
asideObserver?.disconnect();
|
||||
asideObserver = null;
|
||||
});
|
||||
|
||||
// 路由变化后菜单的 active 类由 Element Plus 更新，等一拍再量
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
void nextTick(syncIndicator);
|
||||
},
|
||||
);
|
||||
|
||||
/** 小屏：侧边栏收进抽屉，由顶栏汉堡按钮唤出 */
|
||||
const drawerVisible = ref(false);
|
||||
|
||||
@@ -232,11 +352,20 @@ const tourSteps = computed(() => [
|
||||
<template>
|
||||
<el-container class="layout">
|
||||
<!-- 桌面/平板：常驻深色侧边栏 -->
|
||||
<el-aside v-if="!isMobile" width="210px" class="layout-aside ch-sidebar" data-tour="side-nav">
|
||||
<el-aside
|
||||
v-if="!isMobile"
|
||||
ref="asideRef"
|
||||
width="210px"
|
||||
class="layout-aside ch-sidebar"
|
||||
data-tour="side-nav"
|
||||
>
|
||||
<div class="brand">
|
||||
<el-icon :size="22"><School /></el-icon>
|
||||
<img class="brand-logo" src="/logo.png" alt="" width="24" height="24" />
|
||||
<span class="brand-text">班级小助手</span>
|
||||
</div>
|
||||
<!-- 激活项的滑动指示器：单个药丸在菜单项之间平移，位置由 syncIndicator() 量出来。
|
||||
pointer-events:none 是必需的 —— 它盖在菜单项上，否则会把点击吃掉。 -->
|
||||
<div class="nav-indicator" :style="indicatorStyle" aria-hidden="true" />
|
||||
<el-menu :default-active="activeMenu" class="layout-menu" @select="handleMenuSelect">
|
||||
<el-menu-item v-for="item in visibleMenuItems" :key="item.path" :index="item.path">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
@@ -280,6 +409,28 @@ const tourSteps = computed(() => [
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<!--
|
||||
主题切换。与桌面客户端同一套（圆形揭示由 useThemeReveal 提供）。
|
||||
注意 `.header-right` 必须是 flex 容器：Element Plus 给 `.el-button` 的是
|
||||
`vertical-align: middle`、给 `.el-dropdown` 的是 `vertical-align: top`，
|
||||
放在普通 block 里两个 inline-level 子元素会按各自的规则落位、错开几像素
|
||||
（AGENTS.md §5 第 58 条，客户端当初就是这么翻的车）。
|
||||
-->
|
||||
<el-tooltip :content="ui.theme === 'dark' ? '切换到浅色模式' : '切换到深色模式'" placement="bottom">
|
||||
<el-button
|
||||
class="theme-toggle"
|
||||
text
|
||||
circle
|
||||
data-test="theme-toggle"
|
||||
:aria-label="ui.theme === 'dark' ? '切换到浅色模式' : '切换到深色模式'"
|
||||
@click="handleThemeToggle"
|
||||
>
|
||||
<el-icon>
|
||||
<Sunny v-if="ui.theme === 'dark'" />
|
||||
<Moon v-else />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-dropdown trigger="click">
|
||||
<span class="user-chip" data-tour="user-chip">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
@@ -315,6 +466,18 @@ const tourSteps = computed(() => [
|
||||
</el-header>
|
||||
|
||||
<el-main class="layout-main">
|
||||
<!--
|
||||
这里**刻意不用** `<transition>` 包 router-view。
|
||||
页面切换的动效由 `.page > *` 的错峰入场承担（styles/index.css）——
|
||||
那是随组件挂载同步触发的，不推迟任何东西。
|
||||
|
||||
包一层过渡（尤其 `mode="out-in"`）会把"旧组件卸载、新组件挂载"推迟到退场动画结束
|
||||
（90ms 起）。代价有两个，都不值得：
|
||||
① 点菜单后有一小段时间页面上还是**上一页**，用户和自动化看到的都是旧内容；
|
||||
② 退场判定依赖 `animationend`，窗口被遮挡时 Chromium 冻结 CSS 动画、
|
||||
事件永不触发，新页面就永远不挂载 —— 整个应用卡死在第一页。
|
||||
真要加回来，必须先确认这两条都有人兜住。
|
||||
-->
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
@@ -331,7 +494,7 @@ const tourSteps = computed(() => [
|
||||
>
|
||||
<div class="ch-sidebar ch-sidebar-drawer">
|
||||
<div class="brand">
|
||||
<el-icon :size="22"><School /></el-icon>
|
||||
<img class="brand-logo" src="/logo.png" alt="" width="24" height="24" />
|
||||
<span class="brand-text">班级小助手</span>
|
||||
</div>
|
||||
<el-menu :default-active="activeMenu" class="layout-menu" @select="handleMenuSelect">
|
||||
@@ -394,6 +557,8 @@ const tourSteps = computed(() => [
|
||||
.layout-aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 导航指示器（.nav-indicator）的定位父级 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@@ -411,6 +576,16 @@ const tourSteps = computed(() => [
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 品牌标：与应用图标同一份图（`public/logo.png`，由 `pnpm icons` 从 `build/classhelper.png` 生成）。
|
||||
* 图本身自带圆角与透明边角，所以这里**不要**再加 border-radius / 背景 —— 会叠出第二层圆角。
|
||||
* `flex: none` 是必需的：`.brand` 是 flex 容器，不加的话侧栏收窄时这张图会被压扁。
|
||||
*/
|
||||
.brand-logo {
|
||||
flex: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layout-menu {
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
@@ -420,22 +595,54 @@ const tourSteps = computed(() => [
|
||||
--el-menu-active-color: #ffffff;
|
||||
}
|
||||
|
||||
.layout-menu :deep(.el-menu-item.is-active) {
|
||||
background: #409eff;
|
||||
border-radius: var(--ch-radius-sm);
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 激活项的底色改由导航指示器承担（见 .nav-indicator）。
|
||||
*
|
||||
* 这里顺手修掉一个既有小毛病：原先激活项自带 `margin: 0 8px`，把普通项的 `2px 8px`
|
||||
* 覆盖掉了，于是**每次切换菜单，激活项上下各少 2px、它下面的所有项都跟着跳 4px**。
|
||||
* 现在激活项不再单独改外边距，切换时整列菜单纹丝不动。
|
||||
*/
|
||||
.layout-menu :deep(.el-menu-item) {
|
||||
margin: 2px 8px;
|
||||
border-radius: var(--ch-radius-sm);
|
||||
/* 压在指示器之上，文字才不会被盖住 */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.layout-menu :deep(.el-menu-item.is-active) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/*
|
||||
* 导航指示器：一个跟着激活项平移的药丸。宽高与位移由 syncIndicator() 量出来后内联下发，
|
||||
* 这里只负责外观与过渡。
|
||||
*
|
||||
* 缓动用 LAYOUT 弹簧（397ms）—— 它是"共享布局滑动"的专用参数：比 SWAP（263ms）更有分量，
|
||||
* 因为这一跳可能跨越好几个菜单项，太快会显得"闪"而不是"滑"。
|
||||
*/
|
||||
.nav-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
border-radius: var(--ch-radius-sm);
|
||||
background: #409eff;
|
||||
/* 必须穿透：它盖在菜单项上，否则点击会被它吃掉 */
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
transition:
|
||||
transform var(--ch-spring-layout-dur) var(--ch-spring-layout),
|
||||
width var(--ch-spring-layout-dur) var(--ch-spring-layout),
|
||||
height var(--ch-spring-layout-dur) var(--ch-spring-layout),
|
||||
opacity var(--ch-dur-fast) var(--ch-ease-out);
|
||||
}
|
||||
|
||||
.layout-header {
|
||||
/* 顶栏跟随圆角设计：底部圆角 + 轻投影，与内容区一体化 */
|
||||
border-radius: 0 0 var(--ch-radius-lg) var(--ch-radius-lg);
|
||||
box-shadow: var(--ch-shadow-sm);
|
||||
background: #fff;
|
||||
background: var(--ch-surface);
|
||||
border-bottom: 1px solid var(--ch-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -453,14 +660,14 @@ const tourSteps = computed(() => [
|
||||
margin-right: 2px;
|
||||
border: none;
|
||||
border-radius: var(--ch-radius-sm);
|
||||
background: #f2f3f5;
|
||||
color: #303133;
|
||||
background: var(--ch-surface-sunken);
|
||||
color: var(--ch-text);
|
||||
cursor: pointer;
|
||||
transition: background 0.18s ease;
|
||||
}
|
||||
|
||||
.nav-toggle:hover {
|
||||
background: #e6e8eb;
|
||||
background: var(--ch-surface-hover);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@@ -484,9 +691,19 @@ const tourSteps = computed(() => [
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 主题按钮与用户名牌之间留一点气口（两者原本紧贴） */
|
||||
gap: 4px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
color: var(--ch-text-muted);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
color: var(--ch-text);
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -3,18 +3,23 @@ import { createPinia } from 'pinia';
|
||||
import ElementPlus from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
import 'element-plus/dist/index.css';
|
||||
// 深色主题：html.dark 下的 --el-* 变量（品牌侧的语义色覆盖在 styles/index.css 的 html.dark 块）
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css';
|
||||
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { registerAppIcons } from './icons';
|
||||
import { applyMotionTokens } from './composables/motion';
|
||||
import { useUiStore } from './stores/ui';
|
||||
import '@/styles/index.css';
|
||||
|
||||
const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
|
||||
// 按需注册图标（见 icons.ts：只注册用到的那些，而不是全量 293 个）
|
||||
registerAppIcons(app);
|
||||
|
||||
app.use(createPinia());
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.use(ElementPlus, { locale: zhCn });
|
||||
|
||||
@@ -31,6 +36,19 @@ app.config.errorHandler = (error, _instance, info) => {
|
||||
console.error(`[web-admin] 未处理的异常（${info}）`, error);
|
||||
};
|
||||
|
||||
/**
|
||||
* 动效令牌（beUI 那套缓动与弹簧，见 packages/shared/src/motion.ts）写进 :root。
|
||||
* 必须在 mount 之前：CSS 里引用的 `var(--ch-spring-*)` 要在首帧之前就已就位，
|
||||
* 否则第一帧会按"变量不存在"渲染一遍（表现为入场动画闪一下）。
|
||||
*/
|
||||
applyMotionTokens();
|
||||
|
||||
/**
|
||||
* 主题也要在 mount **之前**落好：深色用户首帧才不会看到"先白后黑"闪一下。
|
||||
* 顺序放在动效令牌之后没有讲究，两者互不相干 —— 但都要早于 mount。
|
||||
*/
|
||||
useUiStore(pinia).init();
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import { ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
/**
|
||||
* 界面偏好（当前只有主题）。
|
||||
*
|
||||
* 机制与桌面客户端（`desktop-client/src/renderer/stores/ui.ts`）保持一套：
|
||||
* 深色主题 = 在 `<html>` 上挂 `.dark` 类，由 `styles/index.css` 的 `html.dark` 块
|
||||
* 覆盖语义色令牌，Element Plus 的 `dark/css-vars.css`（main.ts 引入）提供 `--el-*` 的深色默认。
|
||||
*
|
||||
* **没有选过时跟随系统**，且系统切换时会实时跟上；一旦用户手动点过切换按钮，
|
||||
* 就以用户的选择为准，不再被系统改回去（这是主题开关的通行语义：
|
||||
* 系统的偏好是默认值，不是命令）。
|
||||
*/
|
||||
|
||||
export type AdminTheme = 'light' | 'dark';
|
||||
|
||||
const THEME_KEY = 'classhelper.admin.theme';
|
||||
const DARK_QUERY = '(prefers-color-scheme: dark)';
|
||||
|
||||
function systemPrefersDark(): boolean {
|
||||
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
|
||||
return window.matchMedia(DARK_QUERY).matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* 把主题落到 DOM 上。三件事一件都不能少：
|
||||
* 1. `html.dark` —— 主题令牌的开关；
|
||||
* 2. `color-scheme` —— 让**原生控件**（滚动条、`<input type=date>` 的弹层、自动填充底色）
|
||||
* 也跟着变。只改 CSS 变量的话，滚动条和日期选择器在深色下仍是刺眼的浅色；
|
||||
* 3. PWA 的 `theme-color` —— 手机端地址栏 / 状态栏的配色，装成应用后尤其明显。
|
||||
*/
|
||||
function applyTheme(theme: AdminTheme): void {
|
||||
if (typeof document === 'undefined') return;
|
||||
const root = document.documentElement;
|
||||
root.classList.toggle('dark', theme === 'dark');
|
||||
root.style.colorScheme = theme;
|
||||
document
|
||||
.querySelector('meta[name="theme-color"]')
|
||||
?.setAttribute('content', theme === 'dark' ? '#14161a' : '#409eff');
|
||||
}
|
||||
|
||||
function readStored(): AdminTheme | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(THEME_KEY);
|
||||
return raw === 'dark' || raw === 'light' ? raw : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export const useUiStore = defineStore('ui', () => {
|
||||
const theme = ref<AdminTheme>('light');
|
||||
|
||||
/** 用户是否显式选过。没选过时系统偏好说了算，且会实时跟随 */
|
||||
let explicit = false;
|
||||
|
||||
/**
|
||||
* 在 `app.mount()` **之前**调用：主题类要在首帧之前挂好，
|
||||
* 否则深色用户会看到"先白后黑"闪一下（与客户端同一条要求）。
|
||||
*/
|
||||
function init(): void {
|
||||
const stored = readStored();
|
||||
explicit = stored !== null;
|
||||
theme.value = stored ?? (systemPrefersDark() ? 'dark' : 'light');
|
||||
applyTheme(theme.value);
|
||||
|
||||
if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
|
||||
const query = window.matchMedia(DARK_QUERY);
|
||||
const onChange = (): void => {
|
||||
if (explicit) return;
|
||||
theme.value = query.matches ? 'dark' : 'light';
|
||||
applyTheme(theme.value);
|
||||
};
|
||||
if (typeof query.addEventListener === 'function') query.addEventListener('change', onChange);
|
||||
else if (typeof query.addListener === 'function') query.addListener(onChange);
|
||||
}
|
||||
}
|
||||
|
||||
function setTheme(next: AdminTheme): void {
|
||||
explicit = true;
|
||||
theme.value = next;
|
||||
applyTheme(next);
|
||||
try {
|
||||
localStorage.setItem(THEME_KEY, next);
|
||||
} catch {
|
||||
// 隐私模式下写不进去：本次会话内仍然生效
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme(): void {
|
||||
setTheme(theme.value === 'dark' ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
return { theme, init, setTheme, toggleTheme };
|
||||
});
|
||||
@@ -14,6 +14,25 @@
|
||||
--ch-header-height: 56px;
|
||||
--ch-aside-width: 210px;
|
||||
|
||||
/*
|
||||
* 语义色 —— 组件里**一律引用这些，不要写死颜色**（深色主题靠 html.dark 覆盖这里）。
|
||||
* 侧栏是刻意固定的深色区（见文件末尾 .ch-sidebar），它自己那套白字不参与主题切换。
|
||||
*
|
||||
* ⚠️ 改这些**只改值**。别对这个文件跑"把 #303133 全量替换成 var(--ch-text)"这类批量替换 ——
|
||||
* 它会把下面几行**定义本身**也换掉（`--ch-text: #303133` → `--ch-text: var(--ch-text)`），
|
||||
* 自定义属性一旦自引用就整条失效，`--ch-text` 会解析成空串，全站文字颜色静默回落成继承色。
|
||||
* 实测踩过：批量替换之后 `getPropertyValue('--ch-text')` 返回空，页面看着"还行"，
|
||||
* 但深色主题下文字全变成不合规的继承色。
|
||||
*/
|
||||
--ch-surface: #ffffff; /* 卡片 / 弹窗 / 顶栏底 */
|
||||
--ch-surface-alt: #f7f9fc; /* 表头 / 次级底 */
|
||||
--ch-surface-sunken: #f2f3f5; /* 内嵌块（代码段、只读预览） */
|
||||
--ch-surface-hover: #e6e8eb; /* 悬停态底（比 sunken 再深一档） */
|
||||
--ch-text: #303133;
|
||||
--ch-text-secondary: #606266;
|
||||
--ch-text-muted: #909399;
|
||||
--ch-text-placeholder: #c0c4cc;
|
||||
|
||||
/* Element Plus 圆角令牌对齐（组件库内部都引用这些变量，改这里即可全局生效） */
|
||||
--el-border-radius-base: var(--ch-radius-sm);
|
||||
--el-border-radius-small: 8px;
|
||||
@@ -21,6 +40,35 @@
|
||||
--el-box-shadow-light: var(--ch-shadow-sm);
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------------------- 深色主题
|
||||
*
|
||||
* 与客户端同一套机制：`<html>` 挂 `.dark` 类（见 stores/ui.ts），
|
||||
* Element Plus 的 `dark/css-vars.css`（main.ts 引入）提供 --el-* 的深色默认，
|
||||
* 这里再覆盖品牌侧的中性色与圆角令牌。
|
||||
*
|
||||
* 只覆盖**语义色**，不动圆角/间距/动效令牌 —— 两套主题的几何必须完全一致，
|
||||
* 否则切换主题会看到布局跳一下。
|
||||
*
|
||||
* 刻意**不随主题**的区域（见 AGENTS.md §5 第 46 条）：登录页的深色渐变底、
|
||||
* 侧栏（本来就是深色）、以及深色底上的白色文字。
|
||||
*/
|
||||
html.dark {
|
||||
--ch-bg: #14161a;
|
||||
--ch-surface: #1c1f26;
|
||||
--ch-surface-alt: #23262e;
|
||||
--ch-surface-sunken: #191c22;
|
||||
--ch-surface-hover: #2a2e37;
|
||||
--ch-border: #2e323c;
|
||||
--ch-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.32);
|
||||
--ch-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
|
||||
--ch-text: #e5e7eb;
|
||||
--ch-text-secondary: #b6bcc8;
|
||||
--ch-text-muted: #8b93a3;
|
||||
--ch-text-placeholder: #6b7280;
|
||||
--el-box-shadow-light: var(--ch-shadow-sm);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- 圆角设计：
|
||||
|
||||
统一"大圆角 + 轻阴影 + 无硬边框"的观感：
|
||||
@@ -200,7 +248,7 @@
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background: #f7f9fc;
|
||||
background: var(--ch-surface-alt);
|
||||
}
|
||||
|
||||
.el-table__inner-wrapper::before {
|
||||
@@ -251,7 +299,7 @@ body,
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
background: var(--ch-bg);
|
||||
color: #303133;
|
||||
color: var(--ch-text);
|
||||
/* 小屏上禁止整页横向滚动（内容用卡片内滚动承载） */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -276,7 +324,7 @@ body {
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
font-size: 13px;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
@@ -295,23 +343,29 @@ body {
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
background: var(--ch-surface);
|
||||
border-radius: var(--ch-radius-lg);
|
||||
padding: 18px;
|
||||
border: none;
|
||||
box-shadow: var(--ch-shadow-sm);
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
transform var(--ch-spring-swap-dur) var(--ch-spring-swap),
|
||||
box-shadow var(--ch-dur-base) var(--ch-ease-out);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--ch-shadow-md);
|
||||
/*
|
||||
* 抬升效果关在 `@media (hover: hover)` 里：老师会用平板（以及教室的希沃触摸屏）打开
|
||||
* 管理端，触摸点按会产生"幽灵 hover"并一直粘着，不加这层的话点过的卡片就永远浮着。
|
||||
*/
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--ch-shadow-md);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -322,13 +376,13 @@ body {
|
||||
}
|
||||
|
||||
.stat-hint {
|
||||
color: #c0c4cc;
|
||||
color: var(--ch-text-placeholder);
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
@@ -349,7 +403,7 @@ body {
|
||||
|
||||
.timetable-meta {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
}
|
||||
|
||||
.unread-dot {
|
||||
@@ -509,3 +563,377 @@ body {
|
||||
width: calc(100vw - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
* 动效层 —— beUI 的动效语言
|
||||
*
|
||||
* 令牌（缓动曲线、六组弹簧、时长）在 `packages/shared/src/motion.ts`，
|
||||
* 由 `main.ts` 在 mount 之前写进 `:root`；这里只负责**用**它们。
|
||||
* 两端的动效词汇表完全一致（桌面客户端有一份对应的 styles/index.css 段落）。
|
||||
*
|
||||
* 分三层，越往下越"重"：
|
||||
* ① 变量调音 —— 改写 Element Plus 自己的过渡变量，一次性改掉全站所有组件库过渡；
|
||||
* ② 弹簧覆盖 —— 弹窗 / 抽屉 / 浮层这几个"看得见"的地方换成真正的物理曲线；
|
||||
* ③ 自有动效 —— 页面过渡、列表错峰入场、按钮按压，这些组件库不管的部分。
|
||||
* ========================================================================== */
|
||||
|
||||
/* ------------------------------------------------- ① 变量调音（覆盖组件库）
|
||||
*
|
||||
* Element Plus 的每一个过渡都引用这几个变量（`--el-transition-all` / `-fade` /
|
||||
* `-md-fade` 都是由它们拼出来的），所以调这里等于一次性调完全站 ——
|
||||
* 比逐个覆盖 `.dialog-fade-*` 之类的类名安全得多（那些类名随组件库版本会变）。
|
||||
*
|
||||
* 时长从 300/200ms 收到 200/140ms：原值在密集操作的管理端偏拖沓。
|
||||
* 缓动换成 beUI 的 EASE_OUT —— 原值是 `cubic-bezier(.23, 1, .32, 1)`，
|
||||
* 同为"快出慢收"但尾巴更短，收得干脆。
|
||||
*/
|
||||
:root {
|
||||
--el-transition-duration: 200ms;
|
||||
--el-transition-duration-fast: 140ms;
|
||||
--el-transition-function-ease-in-out-bezier: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--el-transition-function-fast-bezier: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ ② 弹簧覆盖 */
|
||||
|
||||
/*
|
||||
* 弹窗（el-dialog）。Element Plus 把入场做在 `.el-overlay-dialog`（承载 .el-dialog 的
|
||||
* 居中容器）上的两条 keyframes 动画里，遮罩淡入则在 `.dialog-fade-enter-active` 自己身上。
|
||||
* 两条都要换，否则遮罩先到位、弹窗还在动，看起来是"背景已经变暗了但框还没出来"。
|
||||
*
|
||||
* 弹簧 PARAM 的观感说明：总时长 463ms 看着偏长，但它 95% 的行程在 262ms 就走完了，
|
||||
* 剩下的是极慢的收尾 —— 观感上就是"200ms 到位、再轻轻落定一下"，不是"等了半秒"。
|
||||
*/
|
||||
@keyframes ch-panel-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-14px) scale(0.97);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ch-panel-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px) scale(0.985);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 位移与缩放挂在 `.el-dialog` **自己**身上，不挂在 `.el-overlay-dialog`（居中容器）上。
|
||||
*
|
||||
* 挂外层容器有个隐蔽的坑：Element Plus 的「打开完成」回调（@opened）按**根元素**
|
||||
* （`.el-overlay`，只有 200ms 的淡入）的动画结束触发，而外层容器上的弹簧要跑 463ms ——
|
||||
* 于是任何在 @opened 里量容器尺寸做自适应的弹窗，都会量到"还带着 scale(0.97) 的缩小版"。
|
||||
* 客户端作业看板正是这么算 scale 的，实测因此超出屏幕 7px（冒烟断言逮到）。
|
||||
* 挂到 `.el-dialog` 上还有个好处：全屏弹窗能靠 `is-fullscreen` 精确豁免（见下）。
|
||||
*/
|
||||
.dialog-fade-enter-active .el-overlay-dialog,
|
||||
.dialog-fade-leave-active .el-overlay-dialog {
|
||||
/* 抵消 Element Plus 自带的那两条（它们同样带 translateY，会与下面这两条叠起来） */
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.dialog-fade-enter-active .el-dialog {
|
||||
animation: ch-panel-in var(--ch-spring-panel-dur) var(--ch-spring-panel) both;
|
||||
}
|
||||
|
||||
.dialog-fade-leave-active .el-dialog {
|
||||
animation: ch-panel-out var(--ch-dur-fast) var(--ch-ease-out) both;
|
||||
}
|
||||
|
||||
/*
|
||||
* 全屏弹窗（`is-fullscreen`，如客户端的作业看板）**不做位移缩放**。
|
||||
* 它本来就是铺满整屏的表面，"从略小处落下来"既看不出效果，又会让内部的自适应布局
|
||||
* 在 @opened 那一刻量到被 scale 过的容器 —— 测小了会被最小缩放兜住，结果反而超出屏幕。
|
||||
* 只留淡入。
|
||||
*/
|
||||
.dialog-fade-enter-active .el-dialog.is-fullscreen {
|
||||
animation: ch-fade-in var(--ch-dur-base) var(--ch-ease-out) both;
|
||||
}
|
||||
|
||||
.dialog-fade-leave-active .el-dialog.is-fullscreen {
|
||||
animation: ch-fade-out var(--ch-dur-fast) var(--ch-ease-out) both;
|
||||
}
|
||||
|
||||
/*
|
||||
* 确认框（ElMessageBox）。这条沿用了"动画挂在遮罩层上"的做法：
|
||||
* 它内部没有任何按容器尺寸做自适应的内容，不存在上面那个 @opened 测量的坑，
|
||||
* 而且 Element Plus 本来就是这么写的（`.el-overlay-message-box` 自带一条 animation）。
|
||||
*/
|
||||
.el-overlay-message-box {
|
||||
animation: ch-panel-in var(--ch-spring-panel-dur) var(--ch-spring-panel) both;
|
||||
}
|
||||
|
||||
.dialog-fade-enter-active {
|
||||
animation: ch-fade-in var(--ch-dur-base) var(--ch-ease-out) both;
|
||||
}
|
||||
|
||||
.dialog-fade-leave-active {
|
||||
animation: ch-fade-out var(--ch-dur-fast) var(--ch-ease-out) both;
|
||||
}
|
||||
|
||||
@keyframes ch-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ch-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 抽屉（el-drawer）。和弹窗不同，抽屉的位移由 `.el-drawer` **自身**的
|
||||
* `transition: all var(--el-transition-duration)` 承载（`.el-drawer-fade-*` 那组类
|
||||
* 只管遮罩与 overflow）。所以弹簧要挂在 `.el-drawer` 上，且显式列出属性 ——
|
||||
* 跟它的 `all` 不同，我们不想让背景色的变化也走弹簧曲线。
|
||||
*/
|
||||
.el-drawer {
|
||||
transition:
|
||||
transform var(--ch-spring-panel-dur) var(--ch-spring-panel),
|
||||
opacity var(--ch-dur-base) var(--ch-ease-out);
|
||||
}
|
||||
|
||||
/*
|
||||
* 浮层（下拉菜单 / 选择器 / 气泡提示）。Element Plus 用 `el-zoom-in-*` 系列，
|
||||
* 从触发点那一侧展开（`transform-origin` 已经由组件库按 placement 设好）。
|
||||
* 这里换成 SWAP 弹簧：它比 PANEL 短（263ms vs 463ms），因为这类浮层是**高频**出现的，
|
||||
* 每次点下拉都等半秒会烦。原生的 `scaleY(0)` 起手太"扁"，改成轻微缩放 + 位移。
|
||||
*/
|
||||
.el-zoom-in-top-enter-active,
|
||||
.el-zoom-in-top-leave-active,
|
||||
.el-zoom-in-bottom-enter-active,
|
||||
.el-zoom-in-bottom-leave-active,
|
||||
.el-zoom-in-center-enter-active,
|
||||
.el-zoom-in-center-leave-active,
|
||||
.el-zoom-in-left-enter-active,
|
||||
.el-zoom-in-left-leave-active {
|
||||
transition:
|
||||
transform var(--ch-spring-swap-dur) var(--ch-spring-swap),
|
||||
opacity var(--ch-dur-fast) var(--ch-ease-out);
|
||||
}
|
||||
|
||||
.el-zoom-in-top-enter-from,
|
||||
.el-zoom-in-bottom-enter-from,
|
||||
.el-zoom-in-center-enter-from,
|
||||
.el-zoom-in-left-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.el-zoom-in-top-leave-active,
|
||||
.el-zoom-in-bottom-leave-active,
|
||||
.el-zoom-in-center-leave-active,
|
||||
.el-zoom-in-left-leave-active {
|
||||
opacity: 0;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/*
|
||||
* 消息条与通知。Element Plus 给的是 `opacity .3s, transform .4s` ——
|
||||
* 0.4s 的位移在"连续弹三条提示"时明显拖沓。换成 240ms 的弹簧位移 + 140ms 淡出。
|
||||
*/
|
||||
.el-message {
|
||||
transition:
|
||||
opacity var(--ch-dur-fast) var(--ch-ease-out),
|
||||
transform var(--ch-spring-swap-dur) var(--ch-spring-swap),
|
||||
top var(--ch-spring-swap-dur) var(--ch-spring-swap),
|
||||
bottom var(--ch-spring-swap-dur) var(--ch-spring-swap);
|
||||
}
|
||||
|
||||
.el-notification {
|
||||
transition:
|
||||
opacity var(--ch-dur-fast) var(--ch-ease-out),
|
||||
transform var(--ch-spring-swap-dur) var(--ch-spring-swap),
|
||||
left var(--ch-spring-swap-dur) var(--ch-spring-swap),
|
||||
right var(--ch-spring-swap-dur) var(--ch-spring-swap),
|
||||
top var(--ch-spring-swap-dur) var(--ch-spring-swap),
|
||||
bottom var(--ch-spring-swap-dur) var(--ch-spring-swap);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ ③ 自有动效 */
|
||||
|
||||
/*
|
||||
* 按钮按压。Element Plus 的按钮只有颜色过渡，没有"按下去"的物理反馈。
|
||||
*
|
||||
* 上行/下行用**不同的缓动**，这是这里唯一需要技巧的地方：
|
||||
* - 按下（`:active` 生效时）：140ms 直落，要"跟手"，慢了就是延迟；
|
||||
* - 抬起（`:active` 撤销后回到基础规则）：走 PRESS 弹簧，轻轻弹回原位。
|
||||
* CSS 的规则是"进入某状态用该状态的 transition、离开用目标状态的 transition"，
|
||||
* 所以把弹簧写在基础规则、把快落写在 `:active` 里，正好得到想要的一对。
|
||||
*/
|
||||
.el-button {
|
||||
transition:
|
||||
transform var(--ch-spring-press-dur) var(--ch-spring-press),
|
||||
color var(--el-transition-duration-fast) var(--ch-ease-out),
|
||||
border-color var(--el-transition-duration-fast) var(--ch-ease-out),
|
||||
background-color var(--el-transition-duration-fast) var(--ch-ease-out),
|
||||
box-shadow var(--el-transition-duration-fast) var(--ch-ease-out);
|
||||
}
|
||||
|
||||
.el-button:not(.is-disabled):active {
|
||||
transform: scale(var(--ch-press-scale));
|
||||
transition-duration: var(--ch-dur-instant);
|
||||
transition-timing-function: var(--ch-ease-out);
|
||||
}
|
||||
|
||||
/*
|
||||
* 列表错峰入场。配合 `composables/motion.ts` 的 `useStaggerIn()` 使用 ——
|
||||
* 那个函数按索引下发 `--ch-reveal-delay`，延迟在 CSS 里生效。
|
||||
* `both` 是必需的：否则带延迟的元素会在延迟期间先按终态渲染一下（闪一帧）。
|
||||
*/
|
||||
@keyframes ch-reveal-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ch-reveal {
|
||||
animation: ch-reveal-in var(--ch-dur-slow) var(--ch-ease-out) both;
|
||||
animation-delay: var(--ch-reveal-delay, 0ms);
|
||||
}
|
||||
|
||||
/*
|
||||
* 页面切换**没有**容器级的过渡 —— 这里曾经有一对 `.ch-page-enter-active` /
|
||||
* `-leave-active`（配 `<transition mode="out-in">`），已经去掉，原因写在
|
||||
* AdminLayout.vue 的 router-view 注释里（延期换页 + 窗口被遮挡时卡死）。
|
||||
* 页面切换的动效全部由下面的 `.page > *` 错峰入场承担。
|
||||
*/
|
||||
|
||||
/*
|
||||
* 页面内容的错峰入场。
|
||||
*
|
||||
* 挂在 `.page > *` 上而不是逐个视图去写类名：所有视图的根容器都叫 `.page`
|
||||
* （这条约定由 `.page-header` / `.page-title` / `.toolbar` 等共享类名一起维持），
|
||||
* 于是一条规则覆盖全部 12 个页面，新增视图自动享有，也不会有人忘记加。
|
||||
*
|
||||
* 延迟按**块**递进（30ms 一档、封顶 180ms）：一屏通常是"页头 + 两三块内容",
|
||||
* 这个节奏读起来是依次浮现；给更多块继续累加就变成排队了，所以第 7 块起不再递增。
|
||||
*/
|
||||
@keyframes ch-page-block-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page > * {
|
||||
animation: ch-page-block-in var(--ch-dur-slow) var(--ch-ease-out) both;
|
||||
}
|
||||
|
||||
.page > *:nth-child(2) {
|
||||
animation-delay: 30ms;
|
||||
}
|
||||
|
||||
.page > *:nth-child(3) {
|
||||
animation-delay: 60ms;
|
||||
}
|
||||
|
||||
.page > *:nth-child(4) {
|
||||
animation-delay: 90ms;
|
||||
}
|
||||
|
||||
.page > *:nth-child(5) {
|
||||
animation-delay: 120ms;
|
||||
}
|
||||
|
||||
.page > *:nth-child(6) {
|
||||
animation-delay: 150ms;
|
||||
}
|
||||
|
||||
.page > *:nth-child(n + 7) {
|
||||
animation-delay: 180ms;
|
||||
}
|
||||
|
||||
/*
|
||||
* 三处例外，都是"再动一遍就成了两层动画"或"动了会破坏别人的测量"：
|
||||
* ① `v-loading` 的遮罩是插在 `.page` 里的直接子元素，让它跟着淡入会闪；
|
||||
* ② 仪表盘的统计网格内部每张卡片自带 `.ch-reveal`（错峰由卡片承担，
|
||||
* 才能看到七张卡依次浮现），网格本身再动一遍就叠了；
|
||||
* ③ **弹窗遮罩**（`.el-overlay`）。Element Plus 的 `el-dialog` 默认 `append-to-body=false`，
|
||||
* 声明在视图里的弹窗，其遮罩是 `.page` 的直接子元素；而它是 `position: fixed; inset: 0`
|
||||
* 的全屏层，下移 6px 会把刚好贴边的自适应内容顶出屏幕。全屏层本来也不该参与
|
||||
* "内容块依次浮现" —— 它一出现就该盖住整屏。
|
||||
*/
|
||||
.page > .el-loading-mask,
|
||||
.page > .el-overlay,
|
||||
.page > .stat-grid {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------- 降低动态效果偏好
|
||||
*
|
||||
* 系统开了「减少动态效果」时，把全站的动画压到 1ms —— 不是删掉，
|
||||
* 而是让它在同一帧内完成（`transition: none` 会让依赖 transitionend 的逻辑失灵）。
|
||||
*/
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 1ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* 例外：加载指示旋的是"状态"不是"装饰"。把它一起停掉会让界面看起来像卡死了
|
||||
* （用户会去重复点击），所以这里改为**放慢**而不是停。
|
||||
*/
|
||||
.el-icon.is-loading,
|
||||
.el-loading-spinner .circular,
|
||||
.el-loading-spinner svg,
|
||||
.is-loading {
|
||||
animation-duration: 1.6s !important;
|
||||
animation-iteration-count: infinite !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------- 整页换肤（View Transition）
|
||||
*
|
||||
* `useThemeReveal()`（composables/motion.ts，与桌面客户端共用同一份实现）用
|
||||
* View Transition API 做"从点击位置扩散的圆"。浏览器默认会给新旧两帧做一次交叉淡入 ——
|
||||
* 这里把它关掉，改由 JS 用 WAAPI 驱动 `::view-transition-new(root)` 的 clip-path。
|
||||
* 不关掉的话两套动画会叠在一起，观感是"圆在扩散的同时整页又在闪"。
|
||||
*
|
||||
* 层级：老帧在下（z-index 1）、新帧在上（z-index 2），新帧的圆从无到有地盖住老帧。
|
||||
* 不支持这个 API 的浏览器不会渲染这些伪元素，规则自然失效（JS 侧也有守卫）。
|
||||
*/
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -9,6 +9,8 @@ import {
|
||||
type DashboardSummary,
|
||||
} from '@classhelper/shared';
|
||||
import { dashboardApi, notificationApi } from '@/api';
|
||||
import StatCard from '@/components/StatCard.vue';
|
||||
import { useStaggerIn } from '@/composables/motion';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { useRealtimeStore } from '@/stores/realtime';
|
||||
import { SOCKET_EVENTS, type NotificationDto } from '@classhelper/shared';
|
||||
@@ -38,6 +40,12 @@ const statCards = computed(() => {
|
||||
];
|
||||
});
|
||||
|
||||
/**
|
||||
* 统计卡片的错峰入场（beUI 的 stagger reveal）：按索引下发 `--ch-reveal-delay`，
|
||||
* 让七张卡片依次浮现而不是"啪"地一起出现。延迟在 `.ch-reveal` 里生效。
|
||||
*/
|
||||
const revealStyle = useStaggerIn();
|
||||
|
||||
async function load(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
@@ -93,11 +101,13 @@ function openNotification(item: NotificationDto): void {
|
||||
</div>
|
||||
|
||||
<div class="stat-grid">
|
||||
<div v-for="card in statCards" :key="card.label" class="stat-card">
|
||||
<div class="stat-label">{{ card.label }}</div>
|
||||
<div class="stat-value">{{ card.value }}</div>
|
||||
<div class="stat-hint">{{ card.hint }}</div>
|
||||
</div>
|
||||
<StatCard
|
||||
v-for="(card, index) in statCards"
|
||||
:key="card.label"
|
||||
v-bind="card"
|
||||
class="ch-reveal"
|
||||
:style="revealStyle(index)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="12" class="mt-16">
|
||||
|
||||
@@ -623,14 +623,14 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.7;
|
||||
background: #fafafa;
|
||||
background: var(--ch-surface-sunken);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
@@ -659,7 +659,7 @@ onUnmounted(() => {
|
||||
.submission-list {
|
||||
max-height: 46vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #eef0f5;
|
||||
border: 1px solid var(--ch-border);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ async function submit(): Promise<void> {
|
||||
<div class="login-page">
|
||||
<div class="login-card">
|
||||
<div class="login-brand">
|
||||
<el-icon :size="30" color="#409eff"><School /></el-icon>
|
||||
<img class="login-logo" src="/logo.png" alt="" width="44" height="44" />
|
||||
<div>
|
||||
<h1 class="login-title">班级小助手</h1>
|
||||
<p class="login-subtitle">Web 管理端 · 教师 / 管理员登录</p>
|
||||
@@ -81,6 +81,13 @@ async function submit(): Promise<void> {
|
||||
border-radius: 14px;
|
||||
padding: 30px 28px 22px;
|
||||
box-shadow: 0 18px 40px rgba(15, 30, 50, 0.28);
|
||||
/*
|
||||
* 入场用 PANEL 弹簧（beUI 的 center-morph-modal 观感：从略小、略高处落下来）。
|
||||
* 登录页是整个应用里最"一次性"、最值得给一点分量的一屏 ——
|
||||
* 它不像弹窗那样会被反复开关，慢一点不会变成等待。
|
||||
* keyframes 定义在 styles/index.css 的动效层里（全局，scoped 样式也能引用）。
|
||||
*/
|
||||
animation: ch-panel-in var(--ch-spring-panel-dur) var(--ch-spring-panel) both;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -105,6 +112,12 @@ async function submit(): Promise<void> {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
/* 品牌标：与应用图标同一份图（`public/logo.png`）。图自带圆角与透明边角，不要再加 border-radius。 */
|
||||
.login-logo {
|
||||
flex: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
@@ -113,7 +126,7 @@ async function submit(): Promise<void> {
|
||||
.login-subtitle {
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
color: var(--ch-text-muted);
|
||||
}
|
||||
|
||||
.login-button {
|
||||
|
||||
@@ -352,7 +352,7 @@ async function submitCall(): Promise<void> {
|
||||
|
||||
.call-label {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
color: var(--ch-text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user