Compare commits

..
Author SHA1 Message Date
b2bcd47e62 HEL-342: 管理总览 KPI 绑定真实 dashboard 接口
去掉写死的演示金额与账期进度,改由 /api/admin/dashboard 的 totals 与 period_progress 填充;无数据走空态。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
2026-09-01 19:32:59 +08:00
b905cba52c HEL-342: 全站切换霜曜日间与黑金夜间主题
按定稿把运行时 token 换成霜曜/黑金双主题,登录与壳层接入官方 Logo 与主题记忆,不改业务接口与金额计算。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
2026-09-01 17:44:35 +08:00
总工andmultica-agent 2d0ae4d7d1 HEL-271: 反代证书挂载收紧为单文件并按属主 uid 运行(server.key 保持 0600)
Co-authored-by: multica-agent <github@multica.ai>
2026-08-30 22:51:20 +08:00
总工andmultica-agent 9cfd515b8f HEL-271: compose 多环境隔离参数化 + 正式 HTTPS 反代(nginx/tls profile)与证书工具
Co-authored-by: multica-agent <github@multica.ai>
2026-08-30 22:49:35 +08:00
总工andmultica-agent 267ebd37f5 HEL-270: 修复闭期补录未提交即回滚丢失(补回归测试)
Co-authored-by: multica-agent <github@multica.ai>
2026-08-30 22:29:52 +08:00
总工andmultica-agent e857a0e46d HEL-270: compose 支持 APP_UID/APP_GID 匹配数据目录属主(修 WAL readonly)
Co-authored-by: multica-agent <github@multica.ai>
2026-08-30 22:08:09 +08:00
总工andmultica-agent c1c41760f5 HEL-270: 验收物料——非root加固、备份/巡检脚本、运维手册、修复 reminders 布局冒烟测试
Co-authored-by: multica-agent <github@multica.ai>
2026-08-30 22:03:58 +08:00
32 changed files with 1715 additions and 366 deletions
+6
View File
@@ -28,3 +28,9 @@ package-lock.json
# local vendor for agent test env (not shipped) # local vendor for agent test env (not shipped)
.vendor/ .vendor/
vendor_wheels/ vendor_wheels/
# 正式环境部署产物(证书私钥、备份)
deploy/tls/certs/
backups/
ALERT.log
backup.log
+3 -2
View File
@@ -1,6 +1,8 @@
# Design Tokens # Design Tokens
This file maps the shipped dark visual system to its implementation source in `web/styles.css`. `DESIGN.md` is the portable design contract; the `:root` custom properties in `web/styles.css` are the runtime source of truth. **HEL-342 定稿:** 运行时视觉来源是 `web/design-system.css` 的霜曜日间 + 黑金夜间变量(`.v-fusion` / `[data-theme="night"]`),依据 `jinniu-fusion-design`。禁止退回旧青绿 token 或叠第二套覆盖层。主题偏好只存 `localStorage.jinniu-theme``day` | `night`),不跟随系统、不恢复业务数据。
下文是历史暗色合同存档,不再作为施工依据。
## Architecture ## Architecture
@@ -8,7 +10,6 @@ This file maps the shipped dark visual system to its implementation source in `w
- Keep shared primitives in `:root`; keep component behavior in its existing semantic rule group. - Keep shared primitives in `:root`; keep component behavior in its existing semantic rule group.
- Business-component rules must not use `!important`. - Business-component rules must not use `!important`.
- Only accessibility utilities (`.sr-only`, `[hidden]`) and `prefers-reduced-motion` enforcement may force priority. - Only accessibility utilities (`.sr-only`, `[hidden]`) and `prefers-reduced-motion` enforcement may force priority.
- Do not restore warm-paper, white-card, cobalt-action, cream, or light-theme aliases. New code must consume the dark semantic tokens directly.
- Keep administrator and cashier portals as independent route-level surfaces even when they share tokens and component primitives. - Keep administrator and cashier portals as independent route-level surfaces even when they share tokens and component primitives.
## Typography ## Typography
+17
View File
@@ -1,6 +1,10 @@
# 测试环境变量示例。复制为 deploy/.env 后填写。 # 测试环境变量示例。复制为 deploy/.env 后填写。
# 正式环境口令不得提交进仓库。 # 正式环境口令不得提交进仓库。
# 容器运行 uid/gid:必须与 data/ 目录属主一致(宿主机 `id <用户>` 查看)
APP_UID=10001
APP_GID=10001
APP_HOST=0.0.0.0 APP_HOST=0.0.0.0
APP_PORT=4173 APP_PORT=4173
APP_DB_PATH=/app/data/app.db APP_DB_PATH=/app/data/app.db
@@ -12,3 +16,16 @@ APP_BOOTSTRAP_ADMIN_PASSWORD=change-me-in-local-env
# 内网测试可暂时关闭登录失败锁定;正式环境不得开启 # 内网测试可暂时关闭登录失败锁定;正式环境不得开启
# APP_LOGIN_RATE_LIMIT_DISABLED=1 # APP_LOGIN_RATE_LIMIT_DISABLED=1
# ---- 同宿主机第二套环境(正式)必须设置的隔离参数 ----
# compose 项目名(默认 deploy;正式环境改为 caiwuzongzhang-prod
# COMPOSE_PROJECT_NAME=caiwuzongzhang-prod
# 应用容器名与宿主机端口映射(正式默认只绑本机回环,由反代对外)
# APP_CONTAINER_NAME=caiwuzongzhang-prod-app
# APP_PORT_MAP=127.0.0.1:4174:4173
# ---- 正式 HTTPS 反代(COMPOSE_PROFILES=tls 启用 proxy 服务)----
# COMPOSE_PROFILES=tls
# PROXY_CONTAINER_NAME=caiwuzongzhang-proxy
# PROXY_PORT_MAP=8443:8443
# 首次启用前先执行 ./tls/gen-cert.sh 生成证书
+22 -13
View File
@@ -1,23 +1,32 @@
FROM python:3.12-slim FROM python:3.12-slim-bookworm
ENV PYTHONDONTWRITEBYTECODE=1 \
PYTHONUNBUFFERED=1 \
PYTHONPATH=/app/src \
APP_HOST=0.0.0.0 \
APP_PORT=4173 \
APP_DB_PATH=/app/data/app.db \
APP_STORAGE_DIR=/app/data/files
WORKDIR /app WORKDIR /app
COPY requirements.txt . RUN groupadd --system --gid 10001 app \
RUN pip install --no-cache-dir -r requirements.txt && useradd --system --uid 10001 --gid app --home-dir /app --shell /usr/sbin/nologin app \
&& mkdir -p /app/data \
&& chown -R app:app /app
COPY server.py ./ COPY --chown=app:app requirements.txt ./
COPY src ./src RUN python -m pip install --no-cache-dir --requirement requirements.txt
COPY web ./web
ENV PYTHONPATH=/app/src COPY --chown=app:app server.py ./
ENV APP_HOST=0.0.0.0 COPY --chown=app:app src ./src
ENV APP_PORT=4173 COPY --chown=app:app web ./web
ENV APP_DB_PATH=/app/data/app.db
ENV APP_STORAGE_DIR=/app/data/files USER app
EXPOSE 4173 EXPOSE 4173
HEALTHCHECK --interval=30s --timeout=5s --start-period=20s --retries=3 \ HEALTHCHECK --interval=15s --timeout=3s --start-period=10s --retries=5 \
CMD python -c "import urllib.request; urllib.request.urlopen('http://127.0.0.1:4173/', timeout=4)" CMD ["python", "-c", "import urllib.request; urllib.request.urlopen('http://127.0.0.1:4173/', timeout=2)"]
CMD ["python", "server.py"] CMD ["python", "server.py"]
+126
View File
@@ -0,0 +1,126 @@
# 部署与运维手册(与 `release/prod` 基线一致)
最后核对:2026-08-30,总工 HEL-270 上线前总验收。本手册是测试与正式环境唯一的部署/回滚/备份/巡检操作依据,取代散落在宿主机 `DEPLOYMENT.txt` 里的历史记录(旧记录仅作存档)。
## 1. 物料与目录
| 物料 | 说明 |
|---|---|
| `deploy/Dockerfile` | python:3.12-slim-bookworm,非 rootuid 10001 `app`),只读根文件系统 |
| `deploy/compose.yaml` | cap_drop ALL、no-new-privileges、pids 128、mem 512m、cpu 1.0、healthcheck |
| `deploy/.env.example` | 配置模板;`deploy/.env` 已 gitignore,口令永不入库 |
| `deploy/deploy.sh` | `TAG=<tag> ./deploy.sh`,默认镜像 tag=当前提交 sha |
| `deploy/rollback.sh` | `./rollback.sh <tag>`,只换应用不动数据 |
| `deploy/backup.sh` | 在线热备 + 保留策略(30 天日备 + 12 个月月备) |
| `deploy/monitor.sh` | 每 5 分钟健康 + 磁盘 ≥80% 告警,写 `ALERT.log` |
数据目录:`deploy/../data/``app.db` + `files/`)。银行原始文件按 SHA-256 内容哈希不可变保存,任何操作不得改写。
## 2. 正式配置铁律
- **不得出现 `admin/admin123`**`APP_BOOTSTRAP_ADMIN_PASSWORD` 正式环境不设值,首启由控制台读取随机生成的一次性初始口令,首登立即改密;管理员用户名避开 `admin`
- **登录失败限流默认开启**(5 次/10 分钟锁账号+IP)。`APP_LOGIN_RATE_LIMIT_DISABLED=1` 仅限本地调试,正式 .env 不得携带。
- 密钥/口令/证书私钥不进仓库、不进评论、不进任务元数据。
- **HTTPS**:正式暴露一律经反向代理(推荐同机 Caddy 容器,内网自签或内部 CA 证书,反代到容器 4173);不占用 NAS 系统 nginx 的 80/443。公司电脑分发根证书即可。
- **日志**:容器 stdout 走 docker json-file,限幅 `max-size=10m, max-file=3`daemon 或 compose `logging` 配置);审计日志在库内(append-only 触发器保护)。
## 3. 部署步骤(测试与正式一致)
```bash
git fetch && git checkout release/prod && git pull
cd deploy
cp .env.example .env # 首次;按上面铁律填写
# .env 必设 APP_UID/APP_GID = data/ 目录属主的 uid/gid(宿主机 `id <用户>`),
# 否则 SQLite WAL 写库报 readonly
TAG=$(git rev-parse --short HEAD) ./deploy.sh
curl -fsS http://127.0.0.1:4173/ >/dev/null && echo healthy
```
部署前手工备份(四件套 + 镜像 tag 存档):
```bash
STAMP=$(date +%Y%m%d-%H%M%S)
tar -C .. -czf ../backups/source-$STAMP.tar.gz --exclude='../data' --exclude='../.git' .
cp .env ../backups/env-$STAMP
docker exec caiwuzongzhang-app python -c "import sqlite3; s=sqlite3.connect('/app/data/app.db'); d=sqlite3.connect('/tmp/b.db'); s.backup(d); d.close(); s.close()"
docker cp caiwuzongzhang-app:/tmp/b.db ../backups/app.db.$STAMP
```
## 3.1 正式环境部署(同宿主机隔离,2026-08-30 首次上线采用)
测试与正式同宿主机并行,靠 compose 项目名/容器名/端口三隔离:
| 项 | 测试环境 | 正式环境 |
|---|---|---|
| 目录 | `/home/leefer/caiwuzongzhang-test` | `/home/leefer/caiwuzongzhang-prod` |
| compose 项目 | `deploy`(默认) | `COMPOSE_PROJECT_NAME=caiwuzongzhang-prod` |
| 应用容器 | `caiwuzongzhang-app` | `caiwuzongzhang-prod-app` |
| 端口 | `4173`(对外) | `127.0.0.1:4174`(仅本机,反代上游) |
| HTTPS | 无 | nginx 反代 `8443``COMPOSE_PROFILES=tls` |
| 访问 | http://192.168.200.36:4173/ | https://192.168.200.36:8443/ |
首次部署顺序:
```bash
git clone <repo> /home/leefer/caiwuzongzhang-prod && cd /home/leefer/caiwuzongzhang-prod
git checkout release/prod
mkdir -p data/files backups && chown -R 10001:10001 data # 容器内 app uid
cd deploy
cp .env.example .env # 按下述差异填写
./tls/gen-cert.sh # 生成内部 CA + 服务器证书(SAN 含对外 IP)
TAG=<发布镜像tag> docker compose up -d # 不带 --build,直接用已验收镜像
docker logs <应用容器> 2>&1 | grep "shown once" # 首启一次性初始口令,只出现一次
```
正式 `.env` 与测试的差异(铁律):
- `COMPOSE_PROJECT_NAME=caiwuzongzhang-prod``APP_CONTAINER_NAME=caiwuzongzhang-prod-app``APP_PORT_MAP=127.0.0.1:4174:4173`
- `COMPOSE_PROFILES=tls``PROXY_CONTAINER_NAME=caiwuzongzhang-proxy``PROXY_PORT_MAP=8443:8443`
- `APP_UID=10001` / `APP_GID=10001`data/ 已 chown 10001
- 管理员用户名自定(如 `jinniu-admin`);**不设** `APP_BOOTSTRAP_ADMIN_PASSWORD`(首启控制台取随机一次性口令,首登立即改密)
- **不设** `APP_LOGIN_RATE_LIMIT_DISABLED`(限流默认开启)
证书与信任分发:
- `tls/certs/ca.crt` 发给各公司电脑安装到「受信任的根证书颁发机构」(安装指引见交接文档);`ca.key`/`server.key` 永不离开宿主机。
- 服务器证书有效期 5 年,到期前用 `./tls/gen-cert.sh` 重签并 `docker compose restart proxy`
## 4. 回滚(应用层,5 分钟内)
```bash
cd deploy && ./rollback.sh <上一个镜像tag>
```
数据层恢复见下节。两套动作互不干扰:应用回滚不改数据;数据恢复不换镜像。
## 5. 备份与恢复演练
- 备份:cron `15 2 * * *` 运行 `deploy/backup.sh`;月结后再手动跑一次。
- 恢复步骤(已演练,隔离环境验证):
1. `mkdir -p /tmp/restore/data && cp backups/daily/app.db.<stamp> /tmp/restore/data/app.db`
2. `tar -C /tmp/restore/data -xzf backups/daily/files.<stamp>.tar.gz`(解出 `files/`
3. 用一份独立 `deploy-restore` 目录(`.env` 指向 `/tmp/restore`、端口错开)`docker compose up -d --build`
4. 核对:`PRAGMA integrity_check`、各表行数、金额合计、`source_files` 哈希清单与生产一致后才可顶替。
- 演练频率:上线前 1 次(HEL-270 已做),之后每季度 1 次,结果记入本文件末尾。
## 6. 巡检与告警
cron `*/5 * * * *` 运行 `deploy/monitor.sh`;连续失败或磁盘 ≥80% 时查看 `deploy/ALERT.log` 并按需扩容/清理。容器重启策略 `unless-stopped`
宿主机 crontableefer2026-08-30 起,正式环境):
```cron
15 2 * * * cd /home/leefer/caiwuzongzhang-prod/deploy && CONTAINER=caiwuzongzhang-prod-app ./backup.sh >> backup.log 2>&1
*/5 * * * * cd /home/leefer/caiwuzongzhang-prod/deploy && CONTAINER=caiwuzongzhang-prod-app HEALTH_URL=http://127.0.0.1:4174/ ./monitor.sh >/dev/null 2>&1
01 3 1 * * rsync -a /home/leefer/caiwuzongzhang-prod/backups/monthly/ /vol1/caiwuzongzhang-backups/monthly/
```
(第三行为月度异盘副本:`/vol1` 是与系统盘不同的物理卷;如后续提供真正的异机目标,改为该目标。)
## 7. 升级数据库
应用启动时自动执行迁移(`MIGRATIONS`,当前版本 10)。迁移只前不改写历史;回退 schema 用对应 down 迁移,先备份后操作。
## 8. 演练记录
- 2026-08-30 HEL-270:备份恢复演练 + 版本回滚演练各 1 次,隔离环境完成,原始证据未改动。详见 HEL-270 验收评论。
+53
View File
@@ -0,0 +1,53 @@
#!/usr/bin/env bash
# 在线热备:不停服备份 SQLite(backup API 保证一致性)+ files/ 原始文件目录。
# 用法:./backup.sh [备份根目录](默认 ../backups
# 保留策略:日备保留 30 天,每月 1 号的首份备份额外保留 12 个月(monthly/)。
# 建议宿主机 cron15 2 * * * /path/to/deploy/backup.sh >> /path/to/deploy/backup.log 2>&1
# 官方环境建议至少将 monthly/ 同步一份到异机/异盘。
set -euo pipefail
ROOT="$(cd "$(dirname "$0")" && pwd)"
DEST="${1:-$ROOT/../backups}"
CONTAINER="${CONTAINER:-caiwuzongzhang-app}"
STAMP="$(date +%Y%m%d-%H%M%S)"
DAY_DIR="$DEST/daily"
MONTH_DIR="$DEST/monthly"
mkdir -p "$DAY_DIR" "$MONTH_DIR"
# 1) SQLite 在线热备(容器内 python sqlite3 backup API,主库可继续写入)
# 备份文件写进数据卷 /app/data(宿主机 deploy/../data 可直接读取),避免
# read_only 容器 + tmpfs 下 docker cp 取不到文件的问题。
docker exec -i "$CONTAINER" python - <<'PY'
import os, sqlite3
src = sqlite3.connect(os.environ.get("APP_DB_PATH", "/app/data/app.db"))
dst = sqlite3.connect("/app/data/.backup-tmp.db")
src.backup(dst)
dst.close(); src.close()
print("hot-backup ok")
PY
mv "$ROOT/../data/.backup-tmp.db" "$DAY_DIR/app.db.$STAMP"
# 2) 原始文件目录打包(银行原始证据,只读复制,绝不改动)
tar -C "$ROOT/.." -czf "$DAY_DIR/files.$STAMP.tar.gz" data/files
# 3) 完整性自检:PRAGMA integrity_check + 关键计数
docker run --rm -v "$DAY_DIR/app.db.$STAMP:/check/app.db:ro" python:3.12-slim-bookworm \
python -c "
import sqlite3
c = sqlite3.connect('/check/app.db')
print('integrity:', c.execute('PRAGMA integrity_check').fetchone()[0])
for t in ('source_rows', 'transfer_match_decisions', 'period_close_runs', 'audit_log'):
try:
print(t, c.execute(f'SELECT COUNT(*) FROM {t}').fetchone()[0])
except sqlite3.OperationalError:
print(t, 'n/a')
"
# 4) 保留策略:日备 >30 天删除;每月 1 号留档 monthly/
find "$DAY_DIR" -name 'app.db.*' -mtime +30 -delete
find "$DAY_DIR" -name 'files.*.tar.gz' -mtime +30 -delete
if [ "$(date +%d)" = "01" ]; then
cp "$DAY_DIR/app.db.$STAMP" "$MONTH_DIR/app.db.$STAMP"
cp "$DAY_DIR/files.$STAMP.tar.gz" "$MONTH_DIR/files.$STAMP.tar.gz"
find "$MONTH_DIR" -mtime +365 -delete
fi
echo "backup complete: $DAY_DIR/app.db.$STAMP"
+73 -18
View File
@@ -1,36 +1,91 @@
# 测试环境部署编排正式口令不得写入本文件。 # 测试/正式环境部署编排正式口令不得写入本文件
# 使用:复制 .env.example 为 .env 填写,再执行 ./deploy.sh # 使用:复制 .env.example 为 .env 填写;TAG 指定镜像标签(默认取当前提交 sha)。
# 例:TAG=v1.0.0-rc1 docker compose -f compose.yaml up -d --build
#
# 同宿主机多套环境(测试 + 正式)必须各自设置:
# COMPOSE_PROJECT_NAME / APP_CONTAINER_NAME / APP_PORT_MAP 互不相同。
# 正式环境启用 HTTPS 反代:.env 中设 COMPOSE_PROFILES=tls(先跑 tls/gen-cert.sh)。
name: ${COMPOSE_PROJECT_NAME:-deploy}
services: services:
caiwuzongzhang: app:
container_name: ${APP_CONTAINER_NAME:-caiwuzongzhang-app}
image: caiwuzongzhang:${TAG:-latest}
build: build:
context: .. context: ..
dockerfile: deploy/Dockerfile dockerfile: deploy/Dockerfile
image: caiwuzongzhang:test
container_name: caiwuzongzhang-test
ports:
- "4173:4173"
env_file: env_file:
- .env - .env
environment: # 绑定挂载 data/ 时,容器运行 uid 必须与数据目录属主一致(.env 里设
APP_HOST: "0.0.0.0" # APP_UID/APP_GID,正式与测试环境各自填写,默认镜像内 app=10001)
APP_PORT: "4173" user: "${APP_UID:-10001}:${APP_GID:-10001}"
APP_DB_PATH: /app/data/app.db ports:
APP_STORAGE_DIR: /app/data/files - "${APP_PORT_MAP:-4173:4173}"
volumes: volumes:
- ../data:/app/data - ../data:/app/data
init: true
restart: unless-stopped
read_only: true read_only: true
tmpfs: tmpfs:
- /tmp - /tmp:size=64m,mode=1777
cap_drop:
- ALL
security_opt: security_opt:
- no-new-privileges:true - no-new-privileges:true
cap_drop:
- ALL
pids_limit: 128
mem_limit: 512m mem_limit: 512m
restart: unless-stopped cpus: 1.0
logging:
driver: json-file
options:
max-size: "10m"
max-file: "3"
healthcheck: healthcheck:
test: ["CMD", "python", "-c", "import urllib.request; urllib.request.urlopen('http://127.0.0.1:4173/', timeout=4)"] test: ["CMD", "python", "-c", "import urllib.request; urllib.request.urlopen('http://127.0.0.1:4173/', timeout=2)"]
interval: 15s
timeout: 3s
retries: 5
start_period: 10s
# 可选 HTTPS 反向代理(正式环境用):COMPOSE_PROFILES=tls 启用。
# 证书由 tls/gen-cert.sh 生成的内部 CA 签发(内网自受管信任),公司电脑
# 安装 tls/certs/ca.crt 一次即可无告警访问。
proxy:
container_name: ${PROXY_CONTAINER_NAME:-caiwuzongzhang-proxy}
image: nginx:1.27-alpine
profiles: ["tls"]
ports:
- "${PROXY_PORT_MAP:-8443:8443}"
volumes:
- ./tls/nginx.conf:/etc/nginx/conf.d/default.conf:ro
- ./tls/certs/server.crt:/etc/nginx/tls/server.crt:ro
- ./tls/certs/server.key:/etc/nginx/tls/server.key:ro
# 与证书文件属主一致的 uid/gid(默认 101=镜像 nginx 用户;宿主机生成证书时
# 设为属主 uid/gid,保持 server.key 0600 不放宽)
user: "${PROXY_UID:-101}:${PROXY_GID:-101}"
depends_on:
- app
restart: unless-stopped
read_only: true
tmpfs:
- /var/cache/nginx:size=16m
- /var/run:size=1m
security_opt:
- no-new-privileges:true
cap_drop:
- ALL
pids_limit: 64
mem_limit: 64m
cpus: 0.5
logging:
driver: json-file
options:
max-size: "10m"
max-file: "3"
healthcheck:
test: ["CMD", "wget", "-q", "--no-check-certificate", "-O", "/dev/null", "https://127.0.0.1:8443/"]
interval: 30s interval: 30s
timeout: 5s timeout: 5s
retries: 3 retries: 3
start_period: 20s start_period: 10s
+13 -8
View File
@@ -1,12 +1,17 @@
#!/usr/bin/env bash #!/usr/bin/env bash
# 测试环境部署。施工员不执行上线;由总工在测试机运行。 # 部署(测试或正式环境通用)。施工员不执行上线;由总工运行。
# 用法:TAG=<镜像标签,默认当前 git 提交 sha> ./deploy.sh
set -euo pipefail set -euo pipefail
ROOT="$(cd "$(dirname "$0")" && pwd)" ROOT="$(cd "$(dirname "$0")" && pwd)"
cd "$ROOT" cd "$ROOT/.."
if [[ ! -f .env ]]; then if [[ ! -f deploy/.env ]]; then
echo "缺少 deploy/.env。请复制 .env.example 后填写测试口令。" >&2 echo "缺少 deploy/.env。请复制 deploy/.env.example 后填写(正式口令不得入库)。" >&2
exit 1 exit 1
fi fi
mkdir -p "$ROOT/../data/files" if [[ -z "${TAG:-}" ]]; then
docker compose -f compose.yaml up -d --build TAG="$(git rev-parse --short HEAD 2>/dev/null || echo latest)"
echo "已启动测试环境:http://127.0.0.1:4173/" fi
mkdir -p data/files
cd "$ROOT"
TAG="$TAG" docker compose -f compose.yaml up -d --build
echo "已启动:http://127.0.0.1:${APP_PORT:-4173}/ 镜像 caiwuzongzhang:$TAG"
+32
View File
@@ -0,0 +1,32 @@
#!/usr/bin/env bash
# 巡检:健康端点 + 磁盘水位告警。失败/越线写 ALERT.log(供总管日检)。
# 建议 cron*/5 * * * * /path/to/deploy/monitor.sh >/dev/null 2>&1
set -euo pipefail
ROOT="$(cd "$(dirname "$0")" && pwd)"
URL="${HEALTH_URL:-http://127.0.0.1:4173/}"
DATA_DIR="${DATA_DIR:-$ROOT/../data}"
ALERT="$ROOT/ALERT.log"
DISK_THRESHOLD="${DISK_THRESHOLD:-80}"
now() { date "+%Y-%m-%d %H:%M:%S"; }
# 1) 健康检查:HTTP 200 才算通过
if ! curl -fsS -m 8 -o /dev/null "$URL"; then
echo "[$(now)] HEALTH FAIL: $URL 无响应" >> "$ALERT"
exit 1
fi
# 2) 磁盘水位:数据所在分区使用率超阈值告警
pct="$(df -P "$DATA_DIR" | awk 'NR==2 {gsub("%",""); print $5}')"
if [ "${pct:-0}" -ge "$DISK_THRESHOLD" ]; then
echo "[$(now)] DISK ALERT: $DATA_DIR 使用率 ${pct}% >= ${DISK_THRESHOLD}%" >> "$ALERT"
exit 2
fi
# 3) 容器状态:非 running/restarting 告警
state="$(docker inspect -f '{{.State.Status}}' "${CONTAINER:-caiwuzongzhang-app}" 2>/dev/null || echo missing)"
if [ "$state" != "running" ]; then
echo "[$(now)] CONTAINER ALERT: ${CONTAINER:-caiwuzongzhang-app} state=$state" >> "$ALERT"
exit 3
fi
echo "[$(now)] ok"
+13 -9
View File
@@ -1,15 +1,19 @@
#!/usr/bin/env bash #!/usr/bin/env bash
# 测试环境回滚:停掉当前容器,按 TAG 或上一个镜像再拉起 # 回滚:回到指定镜像标签(或最近一次可用镜像)
# 用法:./rollback.sh [image-tag] # 用法:./rollback.sh <tag> 例:./rollback.sh f5e0915
# 数据库与 files/ 原始证据不受影响;如需回退数据,见 deploy/README.md「数据恢复」。
set -euo pipefail set -euo pipefail
ROOT="$(cd "$(dirname "$0")" && pwd)" ROOT="$(cd "$(dirname "$0")" && pwd)"
cd "$ROOT" cd "$ROOT"
TAG="${1:-}" TAG="${1:-}"
docker compose -f compose.yaml down if [[ -z "$TAG" ]]; then
if [[ -n "$TAG" ]]; then echo "用法:./rollback.sh <镜像tag>(可用 tag 见 docker images caiwuzongzhang" >&2
export COMPOSE_IMAGE="caiwuzongzhang:${TAG}" exit 1
docker compose -f compose.yaml up -d
echo "已回滚到镜像 caiwuzongzhang:${TAG}"
else
echo "已停止测试容器。指定镜像标签可重新拉起:./rollback.sh <tag>"
fi fi
if ! docker image inspect "caiwuzongzhang:$TAG" >/dev/null 2>&1; then
echo "镜像 caiwuzongzhang:$TAG 不存在。" >&2
exit 1
fi
TAG="$TAG" docker compose -f compose.yaml down
TAG="$TAG" docker compose -f compose.yaml up -d
echo "已回滚到 caiwuzongzhang:$TAG"
+45
View File
@@ -0,0 +1,45 @@
#!/usr/bin/env bash
# 生成内网专用 CA 与服务器证书(自受管内部信任,不涉及公网域名)。
# 用法:在正式环境 deploy/ 目录执行 ./tls/gen-cert.sh
# 可用环境变量覆盖:
# CERT_IP 对外访问 IP(默认 192.168.200.36
# CERT_DNS 额外 DNS 名称(空格分隔,默认 caiwuzongzhang.jinniu.internal
# 输出:tls/certs/{ca.crt,ca.key,server.crt,server.key}key 永不入库、不分发)
# 分发:仅把 ca.crt 发给公司电脑安装(受信任的根证书颁发机构)。
set -euo pipefail
ROOT="$(cd "$(dirname "$0")" && pwd)"
CERTS="$ROOT/certs"
mkdir -p "$CERTS"
cd "$CERTS"
CERT_IP="${CERT_IP:-192.168.200.36}"
CERT_DNS="${CERT_DNS:-caiwuzongzhang.jinniu.internal}"
SAN="IP:${CERT_IP}"
for d in $CERT_DNS; do SAN="$SAN,DNS:$d"; done
if [[ ! -f ca.key ]]; then
# 内部根 CA:10 年,仅本系统使用
openssl req -x509 -newkey ec -pkeyopt ec_paramgen_curve:P-256 \
-keyout ca.key -out ca.crt -days 3650 -nodes -subj "/CN=Jinniu Ledger Internal CA" \
-addext "basicConstraints=critical,CA:TRUE" \
-addext "keyUsage=critical,keyCertSign,cRLSign"
chmod 600 ca.key
echo "ca 已生成"
fi
openssl req -newkey ec -pkeyopt ec_paramgen_curve:P-256 \
-keyout server.key -out server.csr -nodes \
-subj "/CN=${CERT_DNS%% *}" >/dev/null 2>&1
cat > server.ext <<EXT
subjectAltName=${SAN}
basicConstraints=CA:FALSE
keyUsage=digitalSignature,keyEncipherment
extendedKeyUsage=serverAuth
EXT
openssl x509 -req -in server.csr -CA ca.crt -CAkey ca.key -CAcreateserial \
-out server.crt -days 1825 -sha256 -extfile server.ext >/dev/null 2>&1
chmod 600 server.key
rm -f server.csr server.ext ca.srl
echo "server 证书已生成(SAN: ${SAN}),有效期 5 年"
echo "分发文件:${CERTS}/ca.crt(其余文件不得离开本机)"
+31
View File
@@ -0,0 +1,31 @@
# 正式环境 HTTPS 反代(nginx)。证书挂载自 deploy/tls/certs/gen-cert.sh 生成)。
# 上游为同 compose 网络内的 app:4173;对外仅暴露本代理的 8443。
server {
listen 8443 ssl;
listen [::]:8443 ssl;
http2 on;
server_name _;
ssl_certificate /etc/nginx/tls/server.crt;
ssl_certificate_key /etc/nginx/tls/server.key;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:2m;
ssl_session_timeout 1h;
# 银行流水 Excel 上传上限
client_max_body_size 25m;
proxy_http_version 1.1;
proxy_read_timeout 120s;
proxy_send_timeout 120s;
location / {
proxy_pass http://app:4173;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
}
}
+3 -3
View File
@@ -4,7 +4,7 @@
## 正在做 ## 正在做
- 无。HEL-269 施工交付后交总工审核测试环境部署。 - HEL-270 上线前总验收(总工):代码审核测试环境部署、备份恢复与回滚演练、边界自动化证据
## 已做完 ## 已做完
@@ -20,10 +20,10 @@
- 站内提醒与状态流转。 - 站内提醒与状态流转。
- 前端移除演示流水/往来造数和 `localStorage` 业务状态。 - 前端移除演示流水/往来造数和 `localStorage` 业务状态。
- 登录页视觉融合改版;月结/重开/审计按 HEL-268 视觉规范落地。 - 登录页视觉融合改版;月结/重开/审计按 HEL-268 视觉规范落地。
- 测试环境部署编排收编到 `deploy/`(不在施工员职责内执行上线)。 - 测试环境部署编排收编到 `deploy/`,含非 root 加固、备份/巡检脚本与运维手册(不在施工员职责内执行上线)。
## 还没安排 ## 还没安排
- 测试环境之外的运行保障,包括 HTTPS、备份、监控和正式部署方案。覆盖正式环境必须老板明确同意。 - 正式部署(P4):HTTPS 反代落地、异机备份副本、正式账号交接。覆盖正式环境必须老板明确同意。
每完成或新增一项任务,必须在同一次提交里把它从本清单的相应栏目移走或补上,并同步更新 `最新进度.md` 每完成或新增一项任务,必须在同一次提交里把它从本清单的相应栏目移走或补上,并同步更新 `最新进度.md`
+4 -3
View File
@@ -14,12 +14,13 @@
- 已实现月结:结账日到达后生成待结账任务,管理员确认后锁账并生成带 SHA-256 的月报;重开须审批,窗口到期自动恢复锁定;闭期补录进入 `period_late_arrivals`,不改已结快照;写保护拒绝锁定月的普通修改。 - 已实现月结:结账日到达后生成待结账任务,管理员确认后锁账并生成带 SHA-256 的月报;重开须审批,窗口到期自动恢复锁定;闭期补录进入 `period_late_arrivals`,不改已结快照;写保护拒绝锁定月的普通修改。
- 流水列表/导出、往来查询、公司端手工记录已改为服务器真实数据;空列表显示「暂无数据」。页面不再使用 `FLOW_DEMO` / `localStorage` 业务状态。 - 流水列表/导出、往来查询、公司端手工记录已改为服务器真实数据;空列表显示「暂无数据」。页面不再使用 `FLOW_DEMO` / `localStorage` 业务状态。
- 已有登录页、总账端和公司端页面。管理端「结账与期初」承接月结,「审核中心」增加重开审批,「结账与期初」之后增加「审计记录」。 - 已有登录页、总账端和公司端页面。管理端「结账与期初」承接月结,「审核中心」增加重开审批,「结账与期初」之后增加「审计记录」。
- `deploy/` 收编测试环境 Dockerfile、compose、`.env.example` 与部署/回滚脚本(4173、只读根文件系统、drop ALL、512m、healthcheck)。正式口令不进仓库。 - `deploy/` 收编测试环境 Dockerfile、compose、`.env.example` 与部署/回滚脚本(4173、非 root、只读根文件系统、drop ALL、pids/mem/cpu 限制、healthcheck)。正式口令不进仓库。
- 备份(在线热备 + 30 天日备/12 个月月备保留策略)、巡检(健康 + 磁盘 ≥80% 告警)脚本与《部署与运维手册》`deploy/README.md` 已入库;HTTPS 走反向代理方案已在手册写明。
## 仍未完成或不能当成已完成 ## 仍未完成或不能当成已完成
- 生产部署所需的 HTTPS、反向代理、备份、监控和正式运行保障尚未完成;本项目当前只允许测试环境部署。覆盖正式环境必须老板明确同意。 - 正式环境尚未部署(P4):HTTPS 反代、异机备份副本、正式账号交接在上线时落地。覆盖正式环境必须老板明确同意。
- 发布基线思路是从 `f5e0915` 拉长期分支 `release/prod`,由总工审核后处理,施工员不部署 - 发布基线`release/prod` 长期分支已建立,`main` 待发布时快进
## 最近验证 ## 最近验证
+126
View File
@@ -0,0 +1,126 @@
"""HEL-342: static visual shots + computed-style probe (no business data writes)."""
from __future__ import annotations
import json
from functools import partial
from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
from pathlib import Path
from threading import Thread
ROOT = Path(__file__).resolve().parents[1]
WEB = ROOT / "web"
OUT = ROOT.parent / "hel342-shots"
PROBES = [
(".sidebar", ["width", "backgroundColor", "backdropFilter"]),
(".brand-logo-day", ["width", "height"]),
(".btn-primary", ["backgroundColor", "height", "borderRadius", "color"]),
(".stat-card.gold .stat-value, .stat-card .stat-value", ["color", "fontSize", "fontVariantNumeric"]),
(".page-head h1", ["fontSize", "fontWeight"]),
(".ds-table th", ["fontSize", "color"]),
]
def main() -> None:
from playwright.sync_api import sync_playwright
OUT.mkdir(parents=True, exist_ok=True)
handler = partial(SimpleHTTPRequestHandler, directory=str(WEB))
httpd = ThreadingHTTPServer(("127.0.0.1", 0), handler)
Thread(target=httpd.serve_forever, daemon=True).start()
base = f"http://127.0.0.1:{httpd.server_address[1]}"
report = []
pages = [
("index", "index.html", None, None),
("login-admin", "login-admin.html", None, None),
("login-company", "login-company.html", None, None),
("admin-dashboard", "admin.html", "dashboard", None),
("admin-flows", "admin.html", "flows", None),
("admin-settings", "admin.html", "settings", None),
("admin-audit", "admin.html", "audit", None),
("admin-reminders", "admin.html", "reminders", None),
("admin-period-audit", "admin.html", "period-audit", None),
("admin-companies", "admin.html", "companies", None),
("admin-pair", "admin.html", "pair", None),
("company-workspace", "company.html", "workspace", None),
("company-transfers", "company.html", "transfers", None),
("company-reconcile", "company.html", "reconcile", None),
("company-upload", "company.html", "upload", None),
]
with sync_playwright() as p:
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
for theme in ("day", "night"):
for width, height, tag in ((1440, 900, "1440"), (820, 900, "820"), (390, 844, "390")):
if tag != "1440" and theme == "night" and width != 390:
continue
page = browser.new_page(viewport={"width": width, "height": height})
page.add_init_script(
f"() => {{ try {{ localStorage.setItem('jinniu-theme', '{theme}'); }} catch (e) {{}} }}"
)
for name, html, view, _ in pages:
if tag != "1440" and name not in ("login-admin", "admin-flows", "company-transfers", "admin-dashboard"):
continue
page.route("**/app.js**", lambda route: route.abort())
page.goto(f"{base}/{html}", wait_until="domcontentloaded")
page.evaluate(
"""(args) => {
document.documentElement.classList.add('v-fusion');
document.documentElement.setAttribute('data-theme', args.theme);
if (args.view) {
document.querySelectorAll('.app-view').forEach((el) => {
el.classList.toggle('is-active', el.dataset.page === args.view);
});
}
}""",
{"theme": theme, "view": view},
)
page.wait_for_timeout(80)
shot = OUT / f"{name}-{theme}-{tag}.png"
page.screenshot(path=str(shot), full_page=False)
if tag == "1440" and name in ("login-admin", "admin-dashboard", "admin-flows"):
probe = page.evaluate(
"""(sels) => sels.map(([sel, props]) => {
const el = document.querySelector(sel);
if (!el) return { sel, missing: true };
const cs = getComputedStyle(el);
const out = { sel };
props.forEach((p) => { out[p] = cs[p]; });
const box = el.getBoundingClientRect();
out.box = { w: Math.round(box.width), h: Math.round(box.height) };
return out;
})""",
PROBES,
)
overflow = page.evaluate(
"() => document.documentElement.scrollWidth > document.documentElement.clientWidth + 1"
)
report.append({"page": name, "theme": theme, "overflow": overflow, "probe": probe})
page.close()
# 390 drawer
page = browser.new_page(viewport={"width": 390, "height": 844})
page.add_init_script("() => { try { localStorage.setItem('jinniu-theme', 'day'); } catch (e) {} }")
page.route("**/app.js**", lambda route: route.abort())
page.goto(f"{base}/company.html", wait_until="domcontentloaded")
page.evaluate(
"""() => {
document.documentElement.classList.add('v-fusion');
document.querySelectorAll('.app-view').forEach((el) => {
el.classList.toggle('is-active', el.dataset.page === 'transfers');
});
const d = document.getElementById('transferEvidenceDrawer');
if (d) d.classList.add('is-open');
}"""
)
page.screenshot(path=str(OUT / "company-transfers-drawer-day-390.png"), full_page=False)
page.close()
browser.close()
httpd.shutdown()
(OUT / "probe.json").write_text(json.dumps(report, ensure_ascii=False, indent=2), encoding="utf-8")
print(f"wrote {OUT} ({len(list(OUT.glob('*.png')))} png)")
if __name__ == "__main__":
main()
+112 -1
View File
@@ -8,6 +8,7 @@ as null so the UI shows an em dash rather than a guessed label.
from __future__ import annotations from __future__ import annotations
from calendar import monthrange
from datetime import datetime, timedelta, timezone from datetime import datetime, timedelta, timezone
from decimal import Decimal, ROUND_HALF_UP from decimal import Decimal, ROUND_HALF_UP
import sqlite3 import sqlite3
@@ -22,6 +23,12 @@ def today_shanghai() -> str:
return datetime.now(timezone(timedelta(hours=8))).date().isoformat() return datetime.now(timezone(timedelta(hours=8))).date().isoformat()
def _month_bounds(year_month: str) -> tuple[str, str]:
year, month = (int(part) for part in year_month.split("-"))
last = monthrange(year, month)[1]
return f"{year_month}-01", f"{year_month}-{last:02d}"
def _q2(value: Decimal) -> str: def _q2(value: Decimal) -> str:
return str(value.quantize(TWOPLACES, rounding=ROUND_HALF_UP)) return str(value.quantize(TWOPLACES, rounding=ROUND_HALF_UP))
@@ -209,6 +216,108 @@ def company_summaries(
return items, totals return items, totals
def period_progress(
connection: sqlite3.Connection, *, year_month: str
) -> dict[str, object]:
"""Per-company coverage of the cutoff month: done / in progress / unsubmitted.
Only companies with at least one active bank account are counted — the same
rule as monthly-close submission checks. Covered = confirmed source rows in
the month, or an approved no-business attestation that spans the month.
"""
start, end = _month_bounds(year_month)
enabled_rows = connection.execute(
"SELECT DISTINCT company_id FROM bank_accounts WHERE status = 'active'"
).fetchall()
enabled_ids = {int(row["company_id"]) for row in enabled_rows}
empty = {
"year_month": year_month,
"enabled_count": 0,
"done": 0,
"in_progress": 0,
"unsubmitted": 0,
"percent": 0,
}
if not enabled_ids:
return empty
submitted = {
int(row["company_id"])
for row in connection.execute(
"""
SELECT DISTINCT b.company_id AS company_id
FROM source_rows r
JOIN sheet_batches s ON s.id = r.sheet_batch_id
JOIN import_batches b ON b.id = s.import_batch_id
JOIN sheet_reviews rv ON rv.sheet_batch_id = s.id AND rv.review_status = 'confirmed'
WHERE date(r.transaction_at) >= date(?) AND date(r.transaction_at) <= date(?)
""",
(start, end),
).fetchall()
}
attested = {
int(row["company_id"])
for row in connection.execute(
"""
SELECT DISTINCT a.company_id AS company_id
FROM no_business_attestations a
WHERE a.status = 'approved'
AND date(a.gap_start) <= date(?)
AND date(a.gap_end) >= date(?)
""",
(end, start),
).fetchall()
}
covered = (submitted | attested) & enabled_ids
pending: set[int] = set()
for row in connection.execute(
"""
SELECT DISTINCT p.company_id AS company_id
FROM current_transfer_decisions c
JOIN transfer_match_decisions d ON d.id = c.decision_id
JOIN canonical_transfer_events e ON e.id = c.event_id
JOIN transfer_decision_participants p ON p.decision_id = d.id
WHERE e.lifecycle = 'active'
AND d.classification IN ('unresolved', 'needs_review')
AND date(d.effective_at) >= date(?) AND date(d.effective_at) <= date(?)
""",
(start, end),
):
pending.add(int(row["company_id"]))
for row in connection.execute(
"""
SELECT DISTINCT m.company_id AS company_id
FROM manual_records m
JOIN current_manual_record_decisions c ON c.record_id = m.id
JOIN manual_record_decisions d ON d.id = c.decision_id
WHERE d.state = 'pending'
AND date(m.occurred_at) >= date(?) AND date(m.occurred_at) <= date(?)
""",
(start, end),
):
pending.add(int(row["company_id"]))
for row in connection.execute(
"SELECT DISTINCT company_id FROM bank_accounts WHERE status = 'pending'"
):
pending.add(int(row["company_id"]))
pending_enabled = pending & enabled_ids
done = covered - pending_enabled
in_progress = pending_enabled
unsubmitted = enabled_ids - covered - pending_enabled
enabled_count = len(enabled_ids)
percent = round(100 * len(done) / enabled_count) if enabled_count else 0
return {
"year_month": year_month,
"enabled_count": enabled_count,
"done": len(done),
"in_progress": len(in_progress),
"unsubmitted": len(unsubmitted),
"percent": percent,
}
def company_peer_groups( def company_peer_groups(
connection: sqlite3.Connection, connection: sqlite3.Connection,
company_id: int, company_id: int,
@@ -378,13 +487,15 @@ def build_dashboard(
companies, totals = company_summaries( companies, totals = company_summaries(
connection, from_date=from_date, cutoff=cutoff_date connection, from_date=from_date, cutoff=cutoff_date
) )
period_label = f"{period.year}-{period.month:02d}"
return { return {
"from_date": from_date, "from_date": from_date,
"cutoff": cutoff_date, "cutoff": cutoff_date,
"period_month": period_month, "period_month": period_month,
"period_label": f"{period.year}-{period.month:02d}", "period_label": period_label,
"audit": audit_counts(connection), "audit": audit_counts(connection),
"totals": totals, "totals": totals,
"period_progress": period_progress(connection, year_month=period_label),
"companies": companies, "companies": companies,
"weekly_flow": weekly_flow(connection, cutoff=cutoff_date), "weekly_flow": weekly_flow(connection, cutoff=cutoff_date),
"opening_status": "unavailable", "opening_status": "unavailable",
+34 -30
View File
@@ -237,37 +237,41 @@ def record_late_arrivals(
return 0 return 0
now = utc_now() now = utc_now()
inserted = 0 inserted = 0
for row_id, year_month in items: # One transaction so the rows and their audit trail commit or roll back
existing = connection.execute( # together; without it the caller's connection.close() silently rolled
"SELECT id FROM period_late_arrivals WHERE source_row_id = ?", # the late-arrival records back while the API still reported them.
(row_id,), with connection:
).fetchone() for row_id, year_month in items:
if existing is not None: existing = connection.execute(
continue "SELECT id FROM period_late_arrivals WHERE source_row_id = ?",
connection.execute( (row_id,),
""" ).fetchone()
INSERT INTO period_late_arrivals ( if existing is not None:
year_month, source_row_id, status, created_at, actor_user_id, actor_username continue
) VALUES (?, ?, 'open', ?, ?, ?) connection.execute(
""", """
( INSERT INTO period_late_arrivals (
year_month, source_row_id, status, created_at, actor_user_id, actor_username
) VALUES (?, ?, 'open', ?, ?, ?)
""",
(
year_month,
row_id,
now,
actor["id"] if actor is not None else None,
_actor_name(actor),
),
)
inserted += 1
_append_audit(
connection,
actor,
"late_arrival",
year_month, year_month,
row_id, object_label=f"源行 {row_id}",
now, reason="闭期后到达的流水,未改写已结账快照",
actor["id"] if actor is not None else None, after={"source_row_id": row_id},
_actor_name(actor), )
),
)
inserted += 1
_append_audit(
connection,
actor,
"late_arrival",
year_month,
object_label=f"源行 {row_id}",
reason="闭期后到达的流水,未改写已结账快照",
after={"source_row_id": row_id},
)
return inserted return inserted
+1 -1
View File
@@ -50,7 +50,7 @@ class ConfirmStatusSourceContractTests(unittest.TestCase):
self.assertIn('id="workspacePendingStatus"', html) self.assertIn('id="workspacePendingStatus"', html)
self.assertIn('id="workspaceFlowSub"', html) self.assertIn('id="workspaceFlowSub"', html)
self.assertIn('data-view-link="reconcile"', html) self.assertIn('data-view-link="reconcile"', html)
self.assertIn("app.js?v=15", html) self.assertIn("app.js?v=17", html)
# 静态初值仍为进行中(黄),由 JS 在 pending=0 时切 done # 静态初值仍为进行中(黄),由 JS 在 pending=0 时切 done
self.assertRegex(html, r'class="flow-step doing"[^>]*data-view-link="reconcile"') self.assertRegex(html, r'class="flow-step doing"[^>]*data-view-link="reconcile"')
+2 -2
View File
@@ -31,8 +31,8 @@ class TransfersPageSourceContractTests(unittest.TestCase):
self.assertIn('id="transferEvidenceDrawer"', html) self.assertIn('id="transferEvidenceDrawer"', html)
self.assertIn("期间净变动", html) self.assertIn("期间净变动", html)
self.assertNotIn("本公司往来合计", html) self.assertNotIn("本公司往来合计", html)
self.assertIn("design-system.css?v=7", html) self.assertIn("design-system.css?v=12", html)
self.assertIn("app.js?v=15", html) self.assertIn("app.js?v=17", html)
# 侧栏顺序:流水管理 → 转账往来 → 往来确认 # 侧栏顺序:流水管理 → 转账往来 → 往来确认
flows = html.index('data-view="flows"') flows = html.index('data-view="flows"')
transfers = html.index('data-view="transfers"') transfers = html.index('data-view="transfers"')
+73
View File
@@ -33,6 +33,42 @@ class DashboardUnitTests(unittest.TestCase):
self.assertEqual(0, payload["audit"]["total"]) self.assertEqual(0, payload["audit"]["total"])
self.assertEqual([], payload["companies"]) self.assertEqual([], payload["companies"])
self.assertEqual(7, len(payload["weekly_flow"]["labels"])) self.assertEqual(7, len(payload["weekly_flow"]["labels"]))
self.assertEqual(0, payload["totals"]["company_count"])
self.assertEqual(0, payload["totals"]["detail_count"])
self.assertEqual("0.00", payload["totals"]["debit_wan"])
self.assertEqual("0.00", payload["totals"]["credit_wan"])
progress = payload["period_progress"]
self.assertEqual("2026-08", progress["year_month"])
self.assertEqual(0, progress["enabled_count"])
self.assertEqual(0, progress["done"])
self.assertEqual(0, progress["in_progress"])
self.assertEqual(0, progress["unsubmitted"])
self.assertEqual(0, progress["percent"])
def test_period_progress_unsubmitted_when_account_active_no_flows(self) -> None:
now = master_data.utc_now()
cursor = self.connection.execute(
"INSERT INTO companies (name, credit_code, cashier_name, status, created_at, updated_at) "
"VALUES ('甲公司', NULL, NULL, 'active', ?, ?)",
(now, now),
)
company_id = int(cursor.lastrowid)
self.connection.execute(
"""
INSERT INTO bank_accounts (
company_id, account_number, bank_name, account_type, status,
created_at, updated_at
) VALUES (?, '6222020000000099', '工行', '一般户', 'active', ?, ?)
""",
(company_id, now, now),
)
self.connection.commit()
progress = dashboard.period_progress(self.connection, year_month="2026-08")
self.assertEqual(1, progress["enabled_count"])
self.assertEqual(0, progress["done"])
self.assertEqual(0, progress["in_progress"])
self.assertEqual(1, progress["unsubmitted"])
self.assertEqual(0, progress["percent"])
def test_pending_account_counts_as_medium(self) -> None: def test_pending_account_counts_as_medium(self) -> None:
now = master_data.utc_now() now = master_data.utc_now()
@@ -267,6 +303,9 @@ class DashboardApiTests(unittest.TestCase):
self.assertEqual(200, status) self.assertEqual(200, status)
self.assertEqual("ok", data["status"]) self.assertEqual("ok", data["status"])
self.assertIn("audit", data) self.assertIn("audit", data)
self.assertIn("totals", data)
self.assertIn("period_progress", data)
self.assertIn("debit_wan", data["totals"])
self.assertEqual(1, len(data["companies"])) self.assertEqual(1, len(data["companies"]))
self.assertEqual("甲公司", data["companies"][0]["name"]) self.assertEqual("甲公司", data["companies"][0]["name"])
@@ -494,5 +533,39 @@ class DashboardApiTests(unittest.TestCase):
self.assertEqual([], detail["groups"]) self.assertEqual([], detail["groups"])
class DashboardPageContractTests(unittest.TestCase):
"""HEL-343 阻断项:管理总览 KPI 不得写死演示金额。"""
def test_admin_html_kpi_placeholders_not_demo_amounts(self) -> None:
html = (Path(__file__).resolve().parents[1] / "web" / "admin.html").read_text(
encoding="utf-8"
)
self.assertIn('id="dashPageSub"', html)
self.assertIn('id="dashDebitValue"', html)
self.assertIn('id="dashCreditValue"', html)
self.assertIn('id="dashPeriodPercent"', html)
self.assertIn('id="dashPeriodBar"', html)
self.assertIn('id="dashPeriodFoot"', html)
self.assertNotIn("42,040.30", html)
self.assertNotIn("39,040.30", html)
self.assertNotIn("8.11 亿", html)
self.assertNotIn("392 笔", html)
self.assertNotIn("3 家已完成 · 2 家在途 · 1 家未提交", html)
self.assertNotRegex(html, r'id="flowStart"[^>]*value="2026-07-01"')
self.assertIn('id="pending-check-all"', html)
self.assertIn("pending-check-all", html)
def test_app_js_binds_dashboard_totals(self) -> None:
js = (Path(__file__).resolve().parents[1] / "web" / "app.js").read_text(
encoding="utf-8"
)
self.assertIn("function applyDashKpis(", js)
self.assertIn("applyDashKpis(data)", js)
self.assertIn("dashDebitValue", js)
self.assertIn("dashCreditValue", js)
self.assertIn("period_progress", js)
self.assertIn("master.disabled = boxes.length === 0", js)
if __name__ == "__main__": if __name__ == "__main__":
unittest.main() unittest.main()
+27
View File
@@ -110,6 +110,33 @@ class PeriodCloseTests(LedgerBase):
again = period_close.close_payload(self.connection, self.MONTH) again = period_close.close_payload(self.connection, self.MONTH)
self.assertEqual(digest, again["snapshot_hash"]) self.assertEqual(digest, again["snapshot_hash"])
def test_late_arrivals_survive_connection_close(self) -> None:
"""Regression: the reconcile handler closes its connection right after
recording locked rows; uncommitted inserts used to vanish silently."""
from bank_importer.db import connect as db_connect
self._cover_month()
self._close()
late_id = self.add_row(
self.company_a, own_account="6222000000000001",
expense="12.00", at="2026-07-28T11:00:00",
)
writable, locked = period_close.split_writable_row_ids(self.connection, [late_id])
self.assertEqual(1, period_close.record_late_arrivals(self.connection, locked, self.admin))
self.connection.close()
fresh = db_connect(self.db_path)
try:
rows = fresh.execute(
"SELECT source_row_id FROM period_late_arrivals"
).fetchall()
audits = fresh.execute(
"SELECT action FROM period_audit_events WHERE action = 'late_arrival'"
).fetchall()
finally:
fresh.close()
self.assertEqual([late_id], [r["source_row_id"] for r in rows])
self.assertEqual(1, len(audits))
def test_snapshot_row_cannot_be_updated(self) -> None: def test_snapshot_row_cannot_be_updated(self) -> None:
self._cover_month() self._cover_month()
self._close() self._close()
+5 -8
View File
@@ -37,8 +37,8 @@ class RemindersPageSourceContractTests(unittest.TestCase):
self.assertIn('id="reminder-tbody"', html) self.assertIn('id="reminder-tbody"', html)
self.assertIn('id="reminder-tabs"', html) self.assertIn('id="reminder-tabs"', html)
self.assertIn('id="reminder-detail-drawer"', html) self.assertIn('id="reminder-detail-drawer"', html)
self.assertIn("design-system.css?v=10", html) self.assertIn("design-system.css?v=12", html)
self.assertIn("app.js?v=15", html) self.assertIn("app.js?v=17", html)
pending = html.index('id="pending-reminders-card"') pending = html.index('id="pending-reminders-card"')
history = html.index('id="reminder-history-card"') history = html.index('id="reminder-history-card"')
send = html.index('id="send-reminder-card"') send = html.index('id="send-reminder-card"')
@@ -112,12 +112,9 @@ class RemindersPageLayoutSmokeTests(unittest.TestCase):
cls.httpd.server_close() cls.httpd.server_close()
def _open_reminders(self, page, width: int) -> None: def _open_reminders(self, page, width: int) -> None:
html = (WEB / "admin.html").read_text(encoding="utf-8") page.route("**/app.js**", lambda route: route.abort())
page.set_viewport_size({"width": width, "height": 900}) page.set_viewport_size({"width": width, "height": 900})
page.set_content( page.goto(f"{self.base}/admin.html")
html.replace('src="app.js?v=15"', 'src=""'),
base_url=self.base,
)
page.evaluate( page.evaluate(
"""() => { """() => {
document.querySelectorAll('.app-view').forEach((el) => { document.querySelectorAll('.app-view').forEach((el) => {
@@ -138,7 +135,7 @@ class RemindersPageLayoutSmokeTests(unittest.TestCase):
def test_send_flow_columns_and_no_page_overflow(self) -> None: def test_send_flow_columns_and_no_page_overflow(self) -> None:
html = (WEB / "admin.html").read_text(encoding="utf-8") html = (WEB / "admin.html").read_text(encoding="utf-8")
self.assertIn("app.js?v=15", html) self.assertIn("app.js?v=17", html)
with sync_playwright() as p: with sync_playwright() as p:
browser = p.chromium.launch() browser = p.chromium.launch()
page = browser.new_page() page = browser.new_page()
+49 -29
View File
@@ -5,16 +5,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="金牛集团管理端" /> <meta name="description" content="金牛集团管理端" />
<title>管理端 · 金牛集团</title> <title>管理端 · 金牛集团</title>
<link rel="stylesheet" href="design-system.css?v=10" /> <script>
(function () {
try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
document.documentElement.classList.add("v-fusion");
})();
</script>
<link rel="stylesheet" href="design-system.css?v=12" />
</head> </head>
<body data-portal="admin"> <body class="is-app" data-portal="admin">
<a class="skip-link" href="#main-content">跳到主要内容</a> <a class="skip-link" href="#main-content">跳到主要内容</a>
<div class="shell"> <div class="shell">
<aside class="sidebar" id="sidebar" aria-label="管理导航"> <aside class="sidebar" id="sidebar" aria-label="管理导航">
<div class="side-brand"> <div class="side-brand">
<div class="brand-name">金牛实业 · 资金往来</div> <img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="38" height="38" alt="金牛实业" />
<div class="brand-sub">HENAN JINNIU INDUSTRIAL GROUP</div> <img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="38" height="38" alt="" />
<span class="side-role">管理端</span> <div class="brand-text">
<div class="brand-name">金牛实业 · 资金往来</div>
<div class="brand-sub">HENAN JINNIU INDUSTRIAL GROUP</div>
<span class="side-role">管理端</span>
</div>
</div> </div>
<nav class="side-nav"> <nav class="side-nav">
<div class="nav-group">日常</div> <div class="nav-group">日常</div>
@@ -28,14 +38,22 @@
<a data-view="period-audit" href="#period-audit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 8v5l3 1.5"/><circle cx="12" cy="12" r="8.5"/></svg><span class="nav-label">审计记录</span></a> <a data-view="period-audit" href="#period-audit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 8v5l3 1.5"/><circle cx="12" cy="12" r="8.5"/></svg><span class="nav-label">审计记录</span></a>
<a data-view="reminders" href="#reminders"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="nav-label">提醒管理</span></a> <a data-view="reminders" href="#reminders"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="nav-label">提醒管理</span></a>
</nav> </nav>
<div class="side-foot"> <div class="side-foot sidebar-account">
<div class="user-row"> <div class="theme-seg" role="group" aria-label="主题">
<span class="avatar"></span> <button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
<div> <button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
<div class="user-name">系统管理员</div> </div>
<div class="user-meta">管理员</div> <div class="account-box">
<div class="user-row">
<span class="avatar"></span>
<div>
<div class="user-name">系统管理员</div>
</div>
<button class="logout icon-btn" type="button" aria-label="退出登录" title="退出登录">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10 6H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><path d="M15 16l4-4-4-4"/><path d="M10 12h9"/></svg>
</button>
</div> </div>
<button class="logout" type="button">退出</button> <div class="user-meta">管理员 · 集团全量数据</div>
</div> </div>
</div> </div>
</aside> </aside>
@@ -44,8 +62,8 @@
<div class="topbar"> <div class="topbar">
<span class="crumb">管理端 / <b id="currentViewName">管理总览</b></span> <span class="crumb">管理端 / <b id="currentViewName">管理总览</b></span>
<div class="topbar-right"> <div class="topbar-right">
<span class="tag">账期 2026-07</span> <span class="tag" id="topbarPeriod">账期 —</span>
<span class="tag">统计截止 2026-08-20</span> <span class="tag" id="topbarCutoff">统计截止 —</span>
<button class="btn btn-sm" data-view-link="settings">结账检查</button> <button class="btn btn-sm" data-view-link="settings">结账检查</button>
</div> </div>
</div> </div>
@@ -55,20 +73,20 @@
<div class="page-head"> <div class="page-head">
<div> <div>
<h1>管理总览</h1> <h1>管理总览</h1>
<p class="page-sub">2026-01-01 至 2026-08-20,集团 6 家成员公司相互往来累计发生 8.11 亿元、392 笔明细。页面上任意数字与公司均可逐级穿透,直至银行原始流水。</p> <p class="page-sub" id="dashPageSub">正在读取集团往来汇总…</p>
</div> </div>
</div> </div>
<div class="grid grid-4"> <div class="grid grid-4">
<div class="card stat-card"> <div class="card stat-card gold">
<div class="stat-label">往来借方总额 · 年初至今</div> <div class="stat-label">往来借方总额 · 年初至今</div>
<div class="stat-value">42,040.30<span class="unit">万元</span></div> <div class="stat-value" id="dashDebitValue"><span class="unit">万元</span></div>
<div class="stat-foot">6 家公司合计 · 明细 392 笔</div> <div class="stat-foot" id="dashDebitFoot">加载中…</div>
</div> </div>
<div class="card stat-card"> <div class="card stat-card gold">
<div class="stat-label">往来贷方总额 · 年初至今</div> <div class="stat-label">往来贷方总额 · 年初至今</div>
<div class="stat-value">39,040.30<span class="unit">万元</span></div> <div class="stat-value" id="dashCreditValue"><span class="unit">万元</span></div>
<div class="stat-foot">6 家公司合计 · 与借方同源互证</div> <div class="stat-foot" id="dashCreditFoot">加载中…</div>
</div> </div>
<div class="card stat-card warn" data-view-link="audit" style="cursor: pointer;"> <div class="card stat-card warn" data-view-link="audit" style="cursor: pointer;">
<div class="stat-label">待审核事项 · 审核中心</div> <div class="stat-label">待审核事项 · 审核中心</div>
@@ -76,10 +94,10 @@
<div class="stat-foot" id="dashAuditFoot">高 0 项 · 中 0 项 · 其余 0 项低风险</div> <div class="stat-foot" id="dashAuditFoot">高 0 项 · 中 0 项 · 其余 0 项低风险</div>
</div> </div>
<div class="card stat-card"> <div class="card stat-card">
<div class="stat-label">7 月账期确认进度</div> <div class="stat-label" id="dashPeriodLabel">账期确认进度</div>
<div class="stat-value">50<span class="unit">%</span></div> <div class="stat-value" id="dashPeriodPercent"><span class="unit">%</span></div>
<div class="progress" style="margin-top: 10px;"><span style="width: 50%;"></span></div> <div class="progress" style="margin-top: 10px;"><span id="dashPeriodBar" style="width: 0%;"></span></div>
<div class="stat-foot" style="margin-top: 8px;">3 家已完成 · 2 家在途 · 1 家未提交</div> <div class="stat-foot" id="dashPeriodFoot" style="margin-top: 8px;">加载中…</div>
</div> </div>
</div> </div>
@@ -200,7 +218,7 @@
</div> </div>
<dl class="kv"> <dl class="kv">
<dt>当前账期</dt><dd>2026-07 · 进行中</dd> <dt>当前账期</dt><dd>2026-07 · 进行中</dd>
<dt>结账日</dt><dd style="color: color-mix(in oklch, var(--warn) 78%, black); font-weight: 650;">2026-08-29(顺延)· 距今 9 天</dd> <dt>结账日</dt><dd style="color: var(--warn); font-weight: 650;">2026-08-29(顺延)· 距今 9 天</dd>
<dt>上一账期</dt><dd>2026-06 · 已于 07-03 结账</dd> <dt>上一账期</dt><dd>2026-06 · 已于 07-03 结账</dd>
</dl> </dl>
<button class="btn" data-view-link="settings" style="width: 100%; margin-top: 14px;">进入结账检查</button> <button class="btn" data-view-link="settings" style="width: 100%; margin-top: 14px;">进入结账检查</button>
@@ -410,11 +428,11 @@
</div> </div>
<div class="field"> <div class="field">
<label for="flowStart">日期起</label> <label for="flowStart">日期起</label>
<input class="input" id="flowStart" type="date" value="2026-07-01" /> <input class="input" id="flowStart" type="date" />
</div> </div>
<div class="field"> <div class="field">
<label for="flowEnd">日期止</label> <label for="flowEnd">日期止</label>
<input class="input" id="flowEnd" type="date" value="2026-07-31" /> <input class="input" id="flowEnd" type="date" />
</div> </div>
<div class="field" style="min-width: 200px;"> <div class="field" style="min-width: 200px;">
<label for="flowKeyword">关键词</label> <label for="flowKeyword">关键词</label>
@@ -748,6 +766,7 @@
<div class="card-head"> <div class="card-head">
<span class="card-title">待提醒清单<span class="sub">系统按流水提交、断档、待确认自动发现,点发送即送达对应公司</span></span> <span class="card-title">待提醒清单<span class="sub">系统按流水提交、断档、待确认自动发现,点发送即送达对应公司</span></span>
<div class="row" style="gap: 10px; align-items: center;"> <div class="row" style="gap: 10px; align-items: center;">
<label class="row" style="gap:6px;flex:none;"><input type="checkbox" class="ds-check" id="pending-check-all" data-check-all aria-label="全选待提醒" disabled /></label>
<span class="meta" id="pending-summary"></span> <span class="meta" id="pending-summary"></span>
<button type="button" class="btn btn-primary btn-sm" id="pending-send-all" disabled>全部一键发送</button> <button type="button" class="btn btn-primary btn-sm" id="pending-send-all" disabled>全部一键发送</button>
</div> </div>
@@ -1208,6 +1227,7 @@
</div> </div>
</div> </div>
<div class="toast-region" id="toastRegion" aria-live="polite"></div> <div class="toast-region" id="toastRegion" aria-live="polite"></div>
<script src="app.js?v=15"></script> <script src="theme.js?v=1"></script>
<script src="app.js?v=17"></script>
</body> </body>
</html> </html>
+133 -48
View File
@@ -39,49 +39,20 @@ const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
function animateView(view, { initial = false } = {}) { function animateView(view, { initial = false } = {}) {
if (!view || motionQuery.matches || typeof view.animate !== "function") return; if (!view || motionQuery.matches || typeof view.animate !== "function") return;
if (!initial) { if (!initial) return;
view.getAnimations().forEach((animation) => animation.cancel()); const rows = [...view.querySelectorAll(".ds-table tbody tr")].slice(0, 8);
view.animate( rows.forEach((row, index) => {
[{ opacity: 0.84, transform: "translateY(5px)" }, { opacity: 1, transform: "translateY(0)" }], row.getAnimations().forEach((animation) => animation.cancel());
{ duration: 180, easing: "cubic-bezier(.22,1,.36,1)" }, row.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 300, delay: index * 45, easing: "cubic-bezier(0.23, 1, 0.32, 1)", fill: "both" },
); );
return;
}
const selectors = [
".page-head",
".stat-card",
".card",
".notice",
".list-row",
".filters",
];
const elements = [...new Set(selectors.flatMap((selector) => [...view.querySelectorAll(selector)]))];
elements.forEach((element, index) => {
element.getAnimations().forEach((animation) => animation.cancel());
const keyframes = [
{ opacity: 0, transform: `translateY(${initial ? 16 : 10}px)` },
{ opacity: 1, transform: "translateY(0)" },
];
element.animate(keyframes, {
duration: 440,
delay: Math.min(index * 38, 260),
easing: "cubic-bezier(.22,1,.36,1)",
fill: "both",
});
}); });
} }
function initMotion() { function initMotion() {
if (motionQuery.matches) return; if (motionQuery.matches) return;
animateView($(".app-view.is-active"), { initial: true }); animateView($(".app-view.is-active"), { initial: true });
$$(".side-nav a", $("#sidebar") || document).forEach((item, index) => {
item.animate(
[{ opacity: 0, transform: "translateX(-8px)" }, { opacity: 1, transform: "translateX(0)" }],
{ duration: 360, delay: 90 + index * 28, easing: "cubic-bezier(.22,1,.36,1)", fill: "both" },
);
});
} }
function recordStatus(status) { function recordStatus(status) {
@@ -139,11 +110,23 @@ function showToast(title, detail = "", kind = "info") {
} }
toast.append(dot, body); toast.append(dot, body);
region.append(toast); region.append(toast);
window.setTimeout(() => { let remaining = 2600;
let started = Date.now();
let timer = window.setTimeout(dismiss, remaining);
function dismiss() {
toast.style.opacity = "0"; toast.style.opacity = "0";
toast.style.transition = "opacity 0.2s ease"; toast.style.transition = "opacity 400ms cubic-bezier(0.32, 0.72, 0, 1), transform 400ms cubic-bezier(0.32, 0.72, 0, 1)";
window.setTimeout(() => toast.remove(), 200); toast.style.transform = "translateX(12px)";
}, 4200); window.setTimeout(() => toast.remove(), 400);
}
toast.addEventListener("mouseenter", () => {
window.clearTimeout(timer);
remaining -= Date.now() - started;
});
toast.addEventListener("mouseleave", () => {
started = Date.now();
timer = window.setTimeout(dismiss, Math.max(remaining, 0));
});
} }
function toastIfLocked(result) { function toastIfLocked(result) {
@@ -188,7 +171,9 @@ function showView(view) {
closeNavigation({ restoreFocus: navigationWasOpen }); closeNavigation({ restoreFocus: navigationWasOpen });
const activeView = $(`.app-view[data-page="${view}"]`); const activeView = $(`.app-view[data-page="${view}"]`);
requestAnimationFrame(() => animateView(activeView)); requestAnimationFrame(() => animateView(activeView));
window.scrollTo({ top: 0, behavior: motionQuery.matches ? "auto" : "smooth" }); const shell = $(".main");
if (shell) shell.scrollTop = 0;
else window.scrollTo({ top: 0, behavior: motionQuery.matches ? "auto" : "smooth" });
if (portal === "company" && view === "transfers") { if (portal === "company" && view === "transfers") {
if (state.transfersKeepDetail && state.transfersDetail?.company_id) { if (state.transfersKeepDetail && state.transfersDetail?.company_id) {
showTransfersDetailLayer(); showTransfersDetailLayer();
@@ -422,15 +407,19 @@ async function initAuthGuard() {
function applyCompanyIdentity(me) { function applyCompanyIdentity(me) {
if (!me) return; if (!me) return;
const row = $(".side-foot .user-row"); const foot = $(".side-foot") || $(".side-foot .user-row");
if (row) { if (foot) {
const name = me.username || (portal === "company" ? (me.company_name || "公司用户") : "系统管理员"); const name = me.username || (portal === "company" ? (me.company_name || "公司用户") : "系统管理员");
const avatar = $(".avatar", row); const avatar = $(".avatar", foot);
if (avatar) avatar.textContent = name.slice(0, 1); if (avatar) avatar.textContent = name.slice(0, 1);
const nameEl = $(".user-name", row); const nameEl = $(".user-name", foot);
if (nameEl) nameEl.textContent = name; if (nameEl) nameEl.textContent = name;
const metaEl = $(".user-meta", row); const metaEl = $(".user-meta", foot);
if (metaEl) metaEl.textContent = portal === "company" ? (me.company_name || "公司业务端") : "管理员"; if (metaEl) {
metaEl.textContent = portal === "company"
? `${me.company_name || "公司业务端"} · 仅本公司数据`
: "管理员 · 集团全量数据";
}
} }
// The company portal always shows the session-bound company in page copy. // The company portal always shows the session-bound company in page copy.
if (portal === "company" && me.company_name) { if (portal === "company" && me.company_name) {
@@ -1478,6 +1467,63 @@ function updateDashAuditCard(audit) {
applyAuditCounts(audit, { fromApi: true }); applyAuditCounts(audit, { fromApi: true });
} }
function formatDashWan(value) {
const num = Number(value);
if (!Number.isFinite(num)) return "0.00";
return Math.abs(num).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function applyDashKpis(data) {
const totals = data?.totals || {};
const from = data?.from_date || "—";
const cutoff = data?.cutoff || "—";
const periodLabel = data?.period_label || "";
const companyCount = Number(totals.company_count) || 0;
const detailCount = Number(totals.detail_count) || 0;
const debit = formatDashWan(totals.debit_wan);
const credit = formatDashWan(totals.credit_wan);
const pageSub = $("#dashPageSub");
if (pageSub) {
if (!companyCount && !detailCount) {
pageSub.textContent = `${from}${cutoff},暂无成员公司往来数据。导入并归集银行流水后,金额将显示在此。页面上任意数字与公司均可逐级穿透,直至银行原始流水。`;
} else {
pageSub.textContent = `${from}${cutoff},集团 ${companyCount} 家成员公司相互往来累计发生 ${debit} 万元、${detailCount} 笔明细。页面上任意数字与公司均可逐级穿透,直至银行原始流水。`;
}
}
const debitVal = $("#dashDebitValue");
if (debitVal) debitVal.innerHTML = `${debit}<span class="unit">万元</span>`;
const debitFoot = $("#dashDebitFoot");
if (debitFoot) debitFoot.textContent = `${companyCount} 家公司合计 · 明细 ${detailCount}`;
const creditVal = $("#dashCreditValue");
if (creditVal) creditVal.innerHTML = `${credit}<span class="unit">万元</span>`;
const creditFoot = $("#dashCreditFoot");
if (creditFoot) creditFoot.textContent = `${companyCount} 家公司合计 · 与借方同源互证`;
const progress = data?.period_progress || {};
const ym = progress.year_month || periodLabel;
const monthNum = ym ? Number(String(ym).slice(5, 7)) : 0;
const labelEl = $("#dashPeriodLabel");
if (labelEl) labelEl.textContent = monthNum ? `${monthNum} 月账期确认进度` : "账期确认进度";
const percent = Number(progress.percent) || 0;
const pctEl = $("#dashPeriodPercent");
if (pctEl) pctEl.innerHTML = `${percent}<span class="unit">%</span>`;
const bar = $("#dashPeriodBar");
if (bar) bar.style.width = `${Math.max(0, Math.min(100, percent))}%`;
const periodFoot = $("#dashPeriodFoot");
if (periodFoot) {
const enabled = Number(progress.enabled_count) || 0;
periodFoot.textContent = enabled
? `${progress.done || 0} 家已完成 · ${progress.in_progress || 0} 家在途 · ${progress.unsubmitted || 0} 家未提交`
: "尚无已启用银行账户";
}
const tbPeriod = $("#topbarPeriod");
if (tbPeriod) tbPeriod.textContent = periodLabel ? `账期 ${periodLabel}` : "账期 —";
const tbCutoff = $("#topbarCutoff");
if (tbCutoff) tbCutoff.textContent = cutoff && cutoff !== "—" ? `统计截止 ${cutoff}` : "统计截止 —";
}
function renderDashCompanyRows(companies, selectedId) { function renderDashCompanyRows(companies, selectedId) {
const list = $("#dashCompanyRows"); const list = $("#dashCompanyRows");
if (!list) return; if (!list) return;
@@ -1692,11 +1738,15 @@ async function loadAdminDashboard() {
const response = await fetch(`/api/admin/dashboard?from=${encodeURIComponent(from)}`).catch(() => null); const response = await fetch(`/api/admin/dashboard?from=${encodeURIComponent(from)}`).catch(() => null);
if (!response?.ok) { if (!response?.ok) {
$("#dashCompanyRows").innerHTML = '<div class="dash-company-empty muted">总览加载失败</div>'; $("#dashCompanyRows").innerHTML = '<div class="dash-company-empty muted">总览加载失败</div>';
const pageSub = $("#dashPageSub");
if (pageSub) pageSub.textContent = "总览加载失败,请刷新后重试。";
return; return;
} }
const data = await response.json().catch(() => null); const data = await response.json().catch(() => null);
if (!data || data.status !== "ok") { if (!data || data.status !== "ok") {
$("#dashCompanyRows").innerHTML = '<div class="dash-company-empty muted">总览加载失败</div>'; $("#dashCompanyRows").innerHTML = '<div class="dash-company-empty muted">总览加载失败</div>';
const pageSub = $("#dashPageSub");
if (pageSub) pageSub.textContent = "总览加载失败,请刷新后重试。";
return; return;
} }
state.dashCompanies = data.companies || []; state.dashCompanies = data.companies || [];
@@ -1704,6 +1754,7 @@ async function loadAdminDashboard() {
state.dashCutoff = data.cutoff; state.dashCutoff = data.cutoff;
state.dashPeriodMonth = data.period_month; state.dashPeriodMonth = data.period_month;
updateDashAuditCard(data.audit); updateDashAuditCard(data.audit);
applyDashKpis(data);
const listSub = $("#dashListSub"); const listSub = $("#dashListSub");
if (listSub) { if (listSub) {
listSub.textContent = `${data.from_date}${data.cutoff} · 单位:万元 · 左侧选择公司,右侧查看其往来明细`; listSub.textContent = `${data.from_date}${data.cutoff} · 单位:万元 · 左侧选择公司,右侧查看其往来明细`;
@@ -1814,6 +1865,7 @@ async function loadAdminRemindersPending() {
if (empty) empty.style.display = ""; if (empty) empty.style.display = "";
if (summary) summary.textContent = "0 家公司 · 0 项"; if (summary) summary.textContent = "0 家公司 · 0 项";
if (sendAll) { sendAll.disabled = true; sendAll.textContent = "全部一键发送"; } if (sendAll) { sendAll.disabled = true; sendAll.textContent = "全部一键发送"; }
syncPendingCheckAll();
return; return;
} }
if (empty) empty.style.display = "none"; if (empty) empty.style.display = "none";
@@ -1831,7 +1883,7 @@ async function loadAdminRemindersPending() {
row.dataset.companyId = String(item.company_id); row.dataset.companyId = String(item.company_id);
const sentHint = item.send_count > 0 ? ` · 已提醒 ${item.send_count}` : ""; const sentHint = item.send_count > 0 ? ` · 已提醒 ${item.send_count}` : "";
row.innerHTML = row.innerHTML =
'<label class="row" style="gap:6px;flex:none;"><input type="checkbox" class="pending-check" style="width:auto;" /></label>' + '<label class="row" style="gap:6px;flex:none;"><input type="checkbox" class="pending-check ds-check" /></label>' +
`<span class="pill ${reminderTypePill(item.rule_key)}">${item.rule_label}</span>` + `<span class="pill ${reminderTypePill(item.rule_key)}">${item.rule_label}</span>` +
`<div class="lr-main"><div class="lr-title">${item.title}</div>` + `<div class="lr-main"><div class="lr-title">${item.title}</div>` +
`<div class="lr-sub"><span class="meta">${item.reason}${sentHint}</span></div></div>` + `<div class="lr-sub"><span class="meta">${item.reason}${sentHint}</span></div></div>` +
@@ -1839,6 +1891,21 @@ async function loadAdminRemindersPending() {
`<div class="lr-side"><button type="button" class="btn btn-sm btn-primary pending-send-one">发送提醒</button></div>`; `<div class="lr-side"><button type="button" class="btn btn-sm btn-primary pending-send-one">发送提醒</button></div>`;
list.append(row); list.append(row);
}); });
syncPendingCheckAll();
}
function syncPendingCheckAll() {
const master = $("#pending-check-all");
if (!master) return;
const boxes = $$(".pending-check");
const checked = boxes.filter((el) => el.checked).length;
master.disabled = boxes.length === 0;
master.checked = boxes.length > 0 && checked === boxes.length;
master.indeterminate = checked > 0 && checked < boxes.length;
if (boxes.length === 0) {
master.checked = false;
master.indeterminate = false;
}
} }
async function loadAdminRemindersHistory(sourceFilter) { async function loadAdminRemindersHistory(sourceFilter) {
@@ -1932,6 +1999,15 @@ function initAdminReminders() {
loadAdminRemindersPending(); loadAdminRemindersPending();
loadAdminRemindersHistory("all"); loadAdminRemindersHistory("all");
$("#pending-check-all")?.addEventListener("change", (event) => {
const on = event.target.checked;
event.target.indeterminate = false;
$$(".pending-check").forEach((box) => { box.checked = on; });
});
document.addEventListener("change", (event) => {
if (event.target.classList?.contains("pending-check")) syncPendingCheckAll();
});
$("#reminder-scan-btn")?.addEventListener("click", async () => { $("#reminder-scan-btn")?.addEventListener("click", async () => {
const response = await fetch("/api/admin/reminders/scan", { method: "POST" }).catch(() => null); const response = await fetch("/api/admin/reminders/scan", { method: "POST" }).catch(() => null);
if (response?.status === 401) { window.location.href = "index.html"; return; } if (response?.status === 401) { window.location.href = "index.html"; return; }
@@ -4174,6 +4250,15 @@ function renderWorkspaceTransfersCard(summary) {
? `${formatWanHtml(pending.amount_total)}<span class="unit"> · ${pCount} 笔</span>` ? `${formatWanHtml(pending.amount_total)}<span class="unit"> · ${pCount} 笔</span>`
: `0.00<span class="unit">万元 · 0 笔</span>`; : `0.00<span class="unit">万元 · 0 笔</span>`;
} }
const confirmedSplit = $("#wsTfConfirmedSplit");
const pendingSplit = $("#wsTfPendingSplit");
if (confirmedSplit) confirmedSplit.innerHTML = formatWanHtml(confirmed.net_change, { signed: true });
if (pendingSplit) {
const pCount = Number(pending.count) || 0;
pendingSplit.innerHTML = pCount
? `${formatWanHtml(pending.amount_total)}<span class="unit"> · ${pCount} 笔</span>`
: `0.00<span class="unit">万元 · 0 笔</span>`;
}
} }
async function loadTransfersSummary({ asOf } = {}) { async function loadTransfersSummary({ asOf } = {}) {
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

+52 -17
View File
@@ -5,16 +5,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="金牛集团公司业务端" /> <meta name="description" content="金牛集团公司业务端" />
<title>公司业务端 · 金牛集团</title> <title>公司业务端 · 金牛集团</title>
<link rel="stylesheet" href="design-system.css?v=7" /> <script>
(function () {
try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
document.documentElement.classList.add("v-fusion");
})();
</script>
<link rel="stylesheet" href="design-system.css?v=12" />
</head> </head>
<body data-portal="company"> <body class="is-app" data-portal="company">
<a class="skip-link" href="#main-content">跳到主要内容</a> <a class="skip-link" href="#main-content">跳到主要内容</a>
<div class="shell"> <div class="shell">
<aside class="sidebar" id="sidebar" aria-label="公司业务导航"> <aside class="sidebar" id="sidebar" aria-label="公司业务导航">
<div class="side-brand"> <div class="side-brand">
<div class="brand-name">金牛实业 · 资金往来</div> <img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="38" height="38" alt="金牛实业" />
<div class="brand-sub">HENAN JINNIU INDUSTRIAL GROUP</div> <img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="38" height="38" alt="" />
<span class="side-role company">公司业务端</span> <div class="brand-text">
<div class="brand-name">金牛实业 · 资金往来</div>
<div class="brand-sub">HENAN JINNIU INDUSTRIAL GROUP</div>
<span class="side-role company">公司业务端</span>
</div>
</div> </div>
<nav class="side-nav"> <nav class="side-nav">
<div class="nav-group">业务</div> <div class="nav-group">业务</div>
@@ -28,14 +38,22 @@
<a data-view="accounts" href="#accounts"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg><span class="nav-label">银行账户</span></a> <a data-view="accounts" href="#accounts"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg><span class="nav-label">银行账户</span></a>
<a data-view="notifications" href="#notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="nav-label">通知</span><span class="nav-badge" id="notice-nav-badge" style="display: none;">0</span></a> <a data-view="notifications" href="#notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="nav-label">通知</span><span class="nav-badge" id="notice-nav-badge" style="display: none;">0</span></a>
</nav> </nav>
<div class="side-foot"> <div class="side-foot sidebar-account">
<div class="user-row"> <div class="theme-seg" role="group" aria-label="主题">
<span class="avatar"></span> <button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
<div> <button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
<div class="user-name">牛女士</div> </div>
<div class="user-meta">金牛煤业 · 煤业出纳</div> <div class="account-box">
<div class="user-row">
<span class="avatar"></span>
<div>
<div class="user-name">牛女士</div>
</div>
<button class="logout icon-btn" type="button" aria-label="退出登录" title="退出登录">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10 6H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><path d="M15 16l4-4-4-4"/><path d="M10 12h9"/></svg>
</button>
</div> </div>
<button class="logout" type="button">退出</button> <div class="user-meta">金牛煤业 · 仅本公司数据</div>
</div> </div>
</div> </div>
</aside> </aside>
@@ -44,8 +62,8 @@
<div class="topbar"> <div class="topbar">
<span class="crumb">公司业务端 / <b id="currentViewName">工作台</b></span> <span class="crumb">公司业务端 / <b id="currentViewName">工作台</b></span>
<div class="topbar-right"> <div class="topbar-right">
<span class="tag">账期 2026-07</span> <span class="tag" id="topbarPeriod">账期 —</span>
<span class="tag">统计截止 2026-08-20</span> <span class="tag" id="topbarCutoff">统计截止 —</span>
</div> </div>
</div> </div>
@@ -175,6 +193,22 @@
<div class="ms-value" id="wsTfPending" style="color: var(--warn);"></div> <div class="ms-value" id="wsTfPending" style="color: var(--warn);"></div>
</div> </div>
</div> </div>
<div class="xfer-split" id="workspaceConfirmSplit" style="margin-top: 12px;">
<div class="xfer-split-pane confirmed">
<div class="xfer-split-head">
<span class="pill pill-success">已确认</span>
</div>
<div class="xfer-split-value num" id="wsTfConfirmedSplit"></div>
<div class="xfer-split-note">计入上方合计与期间净变动</div>
</div>
<div class="xfer-split-pane pending">
<div class="xfer-split-head">
<span class="pill pill-warn">待确认</span>
</div>
<div class="xfer-split-value num" id="wsTfPendingSplit"></div>
<div class="xfer-split-note">单列展示,不计入已确认合计</div>
</div>
</div>
<button class="btn btn-ghost" data-view-link="transfers" style="width: 100%; margin-top: 12px;">查看转账往来明细 →</button> <button class="btn btn-ghost" data-view-link="transfers" style="width: 100%; margin-top: 12px;">查看转账往来明细 →</button>
</div> </div>
@@ -381,11 +415,11 @@
</div> </div>
<div class="field"> <div class="field">
<label for="flowStart">日期起</label> <label for="flowStart">日期起</label>
<input class="input num-input" id="flowStart" type="date" value="2026-07-01" /> <input class="input num-input" id="flowStart" type="date" />
</div> </div>
<div class="field"> <div class="field">
<label for="flowEnd">日期止</label> <label for="flowEnd">日期止</label>
<input class="input num-input" id="flowEnd" type="date" value="2026-08-20" /> <input class="input num-input" id="flowEnd" type="date" />
</div> </div>
<div class="field" style="min-width: 200px;"> <div class="field" style="min-width: 200px;">
<label for="flowKeyword">关键词</label> <label for="flowKeyword">关键词</label>
@@ -1009,6 +1043,7 @@
</aside> </aside>
<div class="toast-region" id="toastRegion" aria-live="polite"></div> <div class="toast-region" id="toastRegion" aria-live="polite"></div>
<script src="app.js?v=15"></script> <script src="theme.js?v=1"></script>
<script src="app.js?v=17"></script>
</body> </body>
</html> </html>
+543 -159
View File
@@ -1,47 +1,161 @@
/* ─── 金牛实业资金往来管理系统 · 共享样式 ───────────────────────────── /* ─── 金牛实业资金往来管理系统 · 霜曜融合设计 ─────────────────────────
方向:tech-utility(数据密集型工具)。六枚基础 token 绑定设计方向, 日间默认写在 :root / .v-fusion;夜间只覆写变量。
状态色仅在此 :root 块内以 oklch 派生,组件一律引用变量。 */ --fg/--muted/--border/--success/--warn/--danger/--info 为既有组件别名。 */
:root { :root,
--bg: oklch(98% 0.005 250); .v-fusion {
--surface: oklch(100% 0 0); --bg: #f5f5f7;
--fg: oklch(22% 0.02 240); --text: #1d1d1f;
--muted: oklch(50% 0.018 240); --text-2: #6e6e73;
--border: oklch(90% 0.008 240); --text-3: #8e8e93;
--accent: oklch(58% 0.16 145); --hairline: rgba(0, 0, 0, 0.08);
--surface: #ffffff;
--surface-2: #ffffff;
--material: rgba(255, 255, 255, 0.62);
--material-drawer: rgba(255, 255, 255, 0.86);
--fill: rgba(118, 118, 128, 0.10);
--fill-strong: rgba(118, 118, 128, 0.16);
--hover: rgba(0, 0, 0, 0.045);
--row-hover: rgba(0, 0, 0, 0.025);
--scrim: rgba(0, 0, 0, 0.24);
--accent: #c62f22;
--accent-solid: #c62f22;
--accent-soft: rgba(198, 47, 34, 0.08);
--gold: #8a6d1a;
--gold-bright: #b8933d;
--gold-soft: rgba(138, 109, 26, 0.09);
--gold-line: rgba(138, 109, 26, 0.28);
--gold-fade: rgba(138, 109, 26, 0.03);
--green: #248a3d;
--green-bg: rgba(52, 199, 89, 0.12);
--orange: #b25000;
--orange-bg: rgba(255, 159, 10, 0.14);
--red: #d70015;
--red-bg: rgba(255, 59, 48, 0.10);
--red-solid: #d70015;
--gray-bg: rgba(120, 120, 128, 0.12);
--focus-ring: #0a84ff;
--focus-glow: rgba(10, 132, 255, 0.18);
--red-line: rgba(215, 0, 21, 0.45);
--red-glow: rgba(255, 59, 48, 0.14);
--switch-off: rgba(120, 120, 128, 0.24);
--switch-on: #34c759;
--material-toast: rgba(30, 30, 32, 0.92);
--grip: rgba(0, 0, 0, 0.18);
--pushback-filter: brightness(0.98);
--shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.03);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
--shadow-drawer: -24px 0 64px rgba(0, 0, 0, 0.14);
--shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.18);
--shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.22);
--z-nav: 100;
--z-drawer: 200;
--z-modal: 300;
--z-toast: 400;
--z-tooltip: 500;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--glow-red: rgba(198, 47, 34, 0.05);
--glow-gold: rgba(138, 109, 26, 0.05);
--lp-brand: linear-gradient(158deg, #c13423, #a02415 52%, #7e170b);
--lp-brand-glow: radial-gradient(120% 80% at 18% 12%, rgba(255, 255, 255, 0.22), transparent 58%);
--lp-tick: var(--gold-bright);
/* 状态色 — 仅此处定义 */ --fg: var(--text);
--success: oklch(55% 0.14 150); --muted: var(--text-2);
--warn: oklch(62% 0.14 70); --border: var(--hairline);
--danger: oklch(55% 0.18 25); --success: var(--green);
--info: oklch(52% 0.12 240); --success-soft: var(--green-bg);
--warn: var(--orange);
--warn-soft: var(--orange-bg);
--danger: var(--red);
--danger-soft: var(--red-bg);
--info: var(--gold);
--info-soft: var(--gold-soft);
--fg-soft: var(--hover);
--accent-soft: color-mix(in oklch, var(--accent) 12%, transparent); --font-body: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
--success-soft: color-mix(in oklch, var(--success) 12%, transparent); --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, monospace;
--warn-soft: color-mix(in oklch, var(--warn) 14%, transparent); --radius: 9px;
--danger-soft: color-mix(in oklch, var(--danger) 11%, transparent); --radius-lg: 14px;
--info-soft: color-mix(in oklch, var(--info) 10%, transparent); --r-pill: 999px;
--fg-soft: color-mix(in oklch, var(--fg) 5%, transparent);
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
--radius: 8px;
--radius-lg: 12px;
--side-w: 232px; --side-w: 232px;
} }
html[data-theme="night"],
.v-fusion[data-theme="night"] {
--bg: #100f0d;
--text: #f2f0eb;
--text-2: #a9a49b;
--text-3: #8e8a82;
--hairline: rgba(255, 255, 255, 0.10);
--surface: #1b1916;
--surface-2: #2a2721;
--material: rgba(26, 24, 21, 0.62);
--material-drawer: rgba(31, 29, 25, 0.84);
--fill: rgba(255, 255, 255, 0.08);
--fill-strong: rgba(255, 255, 255, 0.13);
--hover: rgba(255, 255, 255, 0.05);
--row-hover: rgba(255, 255, 255, 0.04);
--scrim: rgba(0, 0, 0, 0.52);
--accent: #e05341;
--accent-solid: #cf4529;
--accent-soft: rgba(224, 83, 65, 0.16);
--gold: #d9b45c;
--gold-bright: #f0cd7a;
--gold-soft: rgba(217, 180, 92, 0.13);
--gold-line: rgba(217, 180, 92, 0.34);
--gold-fade: rgba(217, 180, 92, 0.04);
--green: #45cd6e;
--green-bg: rgba(69, 205, 110, 0.15);
--orange: #ffb340;
--orange-bg: rgba(255, 179, 64, 0.15);
--red: #ff6b5e;
--red-bg: rgba(255, 107, 94, 0.14);
--red-solid: #d63c2f;
--gray-bg: rgba(150, 150, 158, 0.16);
--focus-ring: #409cff;
--focus-glow: rgba(64, 156, 255, 0.30);
--red-line: rgba(255, 107, 94, 0.50);
--red-glow: rgba(255, 107, 94, 0.20);
--switch-off: rgba(120, 120, 128, 0.34);
--switch-on: #30d158;
--material-toast: rgba(54, 52, 47, 0.94);
--grip: rgba(255, 255, 255, 0.22);
--pushback-filter: brightness(0.92);
--shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.06);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-drawer: -24px 0 64px rgba(0, 0, 0, 0.55);
--shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.60);
--shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.50);
--glow-red: rgba(224, 83, 65, 0.07);
--glow-gold: rgba(217, 180, 92, 0.06);
--lp-brand: linear-gradient(158deg, #201b14, #161310 52%, #0f0d0a);
--lp-brand-glow: radial-gradient(120% 80% at 18% 12%, rgba(217, 180, 92, 0.18), transparent 58%);
--lp-tick: var(--gold);
}
/* ─── reset ─────────────────────────────────────────────────────── */ /* ─── reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; }
html.v-fusion { height: 100%; }
body { body {
margin: 0; margin: 0;
background: var(--bg); background-color: var(--bg);
background-image:
radial-gradient(1200px 620px at 100% 0%, var(--glow-red), transparent 58%),
radial-gradient(1000px 520px at 0% 100%, var(--glow-gold), transparent 58%);
background-attachment: fixed;
color: var(--fg); color: var(--fg);
font-family: var(--font-body); font-family: var(--font-body);
font-size: 14px; font-size: 14px;
line-height: 1.55; line-height: 1.55;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
body.is-app {
height: 100%;
overflow: hidden;
}
img, svg { display: block; } img, svg { display: block; }
a { color: inherit; text-decoration: none; } a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; } button { font: inherit; cursor: pointer; }
@@ -49,27 +163,55 @@ h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
p { margin: 0; } p { margin: 0; }
:focus-visible { :focus-visible {
outline: 2px solid var(--accent); outline: 2px solid var(--focus-ring);
outline-offset: 2px; outline-offset: 2px;
border-radius: 4px; }
html[data-theme-anim],
html[data-theme-anim] body,
html[data-theme-anim] body * {
transition: color 200ms ease, background-color 200ms ease, background 200ms ease,
border-color 200ms ease, box-shadow 200ms ease, filter 200ms ease, opacity 200ms ease !important;
} }
/* ─── 应用外壳 ──────────────────────────────────────────────────── */ /* ─── 应用外壳 ──────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; } .shell {
display: grid;
grid-template-columns: var(--side-w) minmax(0, 1fr);
height: 100vh;
overflow: hidden;
}
.sidebar { .sidebar {
background: var(--surface); background: var(--material);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: sticky;
top: 0;
height: 100vh; height: 100vh;
overflow: hidden;
z-index: var(--z-nav);
} }
.side-brand { .side-brand {
padding: 18px 20px 16px; display: flex;
align-items: center;
gap: 10px;
padding: 18px 16px 16px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
flex: none;
} }
.brand-logo {
width: 38px;
height: 38px;
border-radius: 9px;
object-fit: contain;
flex: none;
}
.brand-logo-night { display: none; }
html[data-theme="night"] .brand-logo-day { display: none; }
html[data-theme="night"] .brand-logo-night { display: block; }
.brand-text { min-width: 0; }
.side-brand .brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } .side-brand .brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.side-brand .brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; } .side-brand .brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; }
.side-role { .side-role {
@@ -83,7 +225,7 @@ p { margin: 0; }
} }
.side-role.company { background: var(--info-soft); color: var(--info); } .side-role.company { background: var(--info-soft); color: var(--info); }
.side-nav { flex: 1; overflow-y: auto; padding: 12px 10px; } .side-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px; }
.side-nav .nav-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); padding: 14px 10px 6px; } .side-nav .nav-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); padding: 14px 10px 6px; }
.side-nav a { .side-nav a {
display: flex; align-items: center; gap: 10px; display: flex; align-items: center; gap: 10px;
@@ -96,7 +238,7 @@ p { margin: 0; }
.side-nav a svg { width: 16px; height: 16px; flex: none; } .side-nav a svg { width: 16px; height: 16px; flex: none; }
.side-nav a:hover { color: var(--fg); background: var(--fg-soft); } .side-nav a:hover { color: var(--fg); background: var(--fg-soft); }
.side-nav a.active { .side-nav a.active {
color: var(--fg); color: var(--accent);
background: var(--accent-soft); background: var(--accent-soft);
font-weight: 600; font-weight: 600;
} }
@@ -111,74 +253,130 @@ p { margin: 0; }
color: var(--danger); color: var(--danger);
font-weight: 600; font-weight: 600;
} }
.side-foot { border-top: 1px solid var(--border); padding: 12px 16px; } .side-foot { border-top: 1px solid var(--border); padding: 12px 12px 16px; flex: none; }
.side-foot .user-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .theme-seg {
.side-foot .user-row > div { min-width: 0; } display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
padding: 3px;
margin-bottom: 10px;
border-radius: 9px;
background: var(--fill);
box-shadow: var(--shadow-seg);
}
.theme-seg button {
height: 26px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--text-2);
font-size: 12px;
font-weight: 600;
}
.theme-seg button.is-active {
background: var(--surface);
color: var(--text);
}
.account-box {
background: var(--fill);
border-radius: 10px;
padding: 10px;
}
.side-foot .user-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.side-foot .user-row > div { min-width: 0; flex: 1; }
.side-foot .avatar { .side-foot .avatar {
width: 30px; height: 30px; border-radius: 50%; width: 28px; height: 28px; border-radius: 8px;
background: var(--fg); color: var(--surface); background: var(--gold-soft); color: var(--gold);
display: grid; place-items: center; display: grid; place-items: center;
font-size: 12px; font-weight: 600; font-size: 12px; font-weight: 700;
flex: none; flex: none;
} }
.side-foot .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; } .side-foot .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .user-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-foot .user-meta { font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.side-foot .logout { margin-left: auto; color: var(--muted); font-size: 12px; padding: 4px 6px; border-radius: 6px; background: none; border: 0; flex: none; white-space: nowrap; } .side-foot .logout,
.side-foot .logout:hover { color: var(--danger); background: var(--danger-soft); } .icon-btn.logout {
margin-left: auto;
width: 28px; height: 28px;
padding: 0;
border-radius: 7px;
border: 1px solid var(--hairline);
background: var(--surface);
color: var(--text-2);
display: inline-grid; place-items: center;
flex: none;
}
.side-foot .logout svg,
.icon-btn.logout svg { width: 15px; height: 15px; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.side-foot .logout:hover,
.icon-btn.logout:hover { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.side-foot .logout:active,
.icon-btn.logout:active { transform: scale(0.94); }
.main { min-width: 0; display: flex; flex-direction: column; } .main {
min-width: 0;
min-height: 0;
height: 100vh;
overflow-y: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
align-items: stretch;
}
.topbar { .topbar {
position: sticky; top: 0; z-index: 20; position: sticky; top: 0; z-index: 20;
background: color-mix(in oklch, var(--bg) 88%, transparent); background: var(--material);
backdrop-filter: blur(10px); backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: 12px 28px; padding: 12px 28px;
display: flex; align-items: center; gap: 16px; display: flex; align-items: center; gap: 16px;
flex-wrap: wrap; flex-wrap: wrap;
flex: none;
} }
.topbar .crumb { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .topbar .crumb { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.topbar .crumb b { color: var(--fg); font-weight: 600; } .topbar .crumb b { color: var(--fg); font-weight: 600; }
.topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.content { padding: 24px 28px 64px; max-width: 1440px; width: 100%; margin-inline: auto; } .content { padding: 34px 40px 96px; max-width: 1440px; width: 100%; margin-inline: auto; }
/* ─── 页头 ──────────────────────────────────────────────────────── */ /* ─── 页头 ──────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; } .page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.022em; }
.page-head .page-sub { color: var(--muted); font-size: 13px; margin-top: 5px; max-width: 72ch; } .page-head .page-sub { color: var(--muted); font-size: 13px; margin-top: 5px; max-width: 72ch; }
.page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; } .page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ─── 按钮 ──────────────────────────────────────────────────────── */ /* ─── 按钮 ──────────────────────────────────────────────────────── */
.btn { .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 8px 14px; padding: 0 15px;
min-height: 34px; height: 32px;
border-radius: var(--radius); min-height: 32px;
border-radius: 9px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--surface); background: var(--fill);
color: var(--fg); color: var(--fg);
font-size: 13px; font-weight: 550; font-size: 13px; font-weight: 600;
transition: background 0.12s ease, border-color 0.12s ease; transition: background 0.12s ease, border-color 0.12s ease, transform 160ms var(--ease-out);
} }
.btn:hover { border-color: color-mix(in oklch, var(--fg) 40%, var(--border)); background: var(--fg-soft); } .btn:hover { border-color: var(--gold-line); background: var(--hover); }
.btn:active { transform: translateY(1px); } .btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--surface); } .btn-primary { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); border-color: color-mix(in oklch, var(--accent) 88%, black); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--fg); background: var(--fg-soft); } .btn-ghost:hover { color: var(--fg); background: var(--hover); }
.btn-danger { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 35%, var(--border)); } .btn-danger { color: var(--danger); border-color: var(--red-line); background: transparent; }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); } .btn-danger:hover { background: var(--red-bg); border-color: var(--red); }
.btn-sm { padding: 4px 10px; min-height: 26px; font-size: 12px; border-radius: 6px; } .btn-sm { padding: 0 10px; height: 26px; min-height: 26px; font-size: 12px; border-radius: 7px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary[disabled] { opacity: 1; background: var(--fg-soft); border-color: var(--border); color: var(--muted); } .btn-primary[disabled] { opacity: 1; background: var(--fill-strong); border-color: var(--border); color: var(--muted); }
/* ─── 卡片 ──────────────────────────────────────────────────────── */ /* ─── 卡片 ──────────────────────────────────────────────────────── */
.card { .card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--hairline);
border-radius: var(--radius-lg); border-radius: 14px;
padding: 18px 20px; padding: 18px 20px;
box-shadow: var(--shadow-card);
} }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title { font-size: 14px; font-weight: 650; letter-spacing: -0.005em; } .card-title { font-size: 14px; font-weight: 650; letter-spacing: -0.005em; }
@@ -186,11 +384,11 @@ p { margin: 0; }
/* ─── 指标卡 ────────────────────────────────────────────────────── */ /* ─── 指标卡 ────────────────────────────────────────────────────── */
.stat-card { padding: 16px 18px; } .stat-card { padding: 16px 18px; }
.stat-card .stat-label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .stat-card .stat-label { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.stat-card .stat-value { .stat-card .stat-value {
font-family: var(--font-mono); font-family: var(--font-mono);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 26px; font-weight: 650; font-size: 26px; font-weight: 700;
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin-top: 6px; margin-top: 6px;
} }
@@ -198,6 +396,19 @@ p { margin: 0; }
.stat-card .stat-foot { font-size: 12px; color: var(--muted); margin-top: 6px; } .stat-card .stat-foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
.stat-card.alert .stat-value { color: var(--danger); } .stat-card.alert .stat-value { color: var(--danger); }
.stat-card.warn .stat-value { color: var(--warn); } .stat-card.warn .stat-value { color: var(--warn); }
.stat-card.gold {
background: linear-gradient(180deg, var(--gold-soft), var(--gold-fade));
border-color: var(--gold-line);
position: relative;
}
.stat-card.gold::before {
content: "";
position: absolute; left: 16px; right: 16px; top: 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--gold), transparent);
}
.stat-card.gold .stat-value { color: var(--gold); font-size: 29px; }
.stat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .stat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stat-dot.danger { background: var(--danger); } .stat-dot.danger { background: var(--danger); }
.stat-dot.warn { background: var(--warn); } .stat-dot.warn { background: var(--warn); }
@@ -448,7 +659,7 @@ p { margin: 0; }
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.mt-0 { margin-top: 0; } .mt-0 { margin-top: 0; }
@media (max-width: 1100px) { @media (max-width: 1279px) {
.grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3, .grid-2-1, .grid-1-2, .grid-3-2, .grid-480-1 { grid-template-columns: minmax(0, 1fr); } .grid-3, .grid-2-1, .grid-1-2, .grid-3-2, .grid-480-1 { grid-template-columns: minmax(0, 1fr); }
.dash-master-split { .dash-master-split {
@@ -474,11 +685,10 @@ p { margin: 0; }
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
} }
@media (max-width: 860px) { @media (max-width: 767px) {
.shell { grid-template-columns: 1fr; }
.sidebar { position: static; height: auto; }
.grid-2 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; }
.content { padding: 16px 16px 48px; } .content { padding: 20px 16px 64px; }
.page-head h1 { font-size: 24px; }
.dash-master-head-actions { .dash-master-head-actions {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
@@ -505,15 +715,17 @@ p { margin: 0; }
/* ─── 数据表 ────────────────────────────────────────────────────── */ /* ─── 数据表 ────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ds-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; } .ds-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.ds-table th, .ds-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .ds-table th, .ds-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ds-table th { .ds-table th {
color: var(--muted); font-weight: 550; color: var(--text-3); font-weight: 600;
font-family: var(--font-mono); font-size: 11px; font-size: 11.5px;
letter-spacing: 0.05em; letter-spacing: 0.03em;
background: var(--bg); background: var(--surface);
position: sticky; top: 0; position: sticky; top: 0;
} }
.ds-table tbody tr:hover { background: var(--fg-soft); } @media (hover: hover) {
.ds-table tbody tr:hover { background: var(--row-hover); }
}
.ds-table tbody tr:last-child td { border-bottom: 0; } .ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } .ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.ds-table td.wrap, .ds-table th.wrap { white-space: normal; min-width: 180px; } .ds-table td.wrap, .ds-table th.wrap { white-space: normal; min-width: 180px; }
@@ -527,7 +739,8 @@ p { margin: 0; }
/* ─── 徽章 / 状态 ───────────────────────────────────────────────── */ /* ─── 徽章 / 状态 ───────────────────────────────────────────────── */
.pill { .pill {
display: inline-flex; align-items: center; gap: 5px; display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; height: 22px;
padding: 0 9px;
border-radius: 999px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; font-size: 11.5px; font-weight: 600;
white-space: nowrap; white-space: nowrap;
@@ -564,17 +777,18 @@ p { margin: 0; }
.field > label { font-size: 12px; color: var(--muted); font-weight: 550; } .field > label { font-size: 12px; color: var(--muted); font-weight: 550; }
.input, .select, .textarea, .field .input, .field .select, .field .textarea { .input, .select, .textarea, .field .input, .field .select, .field .textarea {
padding: 7px 11px; padding: 7px 11px;
border: 1px solid var(--border); border: 1px solid var(--hairline);
border-radius: var(--radius); border-radius: 9px;
background: var(--surface); background: var(--fill);
color: var(--fg); color: var(--fg);
font: inherit; font: inherit;
font-size: 13px; font-size: 13.5px;
min-height: 34px; min-height: 34px;
} }
.input:focus, .select:focus, .textarea:focus, .field .input:focus, .field .select:focus, .field .textarea:focus { .input:focus, .select:focus, .textarea:focus, .field .input:focus, .field .select:focus, .field .textarea:focus {
outline: 2px solid var(--accent-soft); outline: none;
border-color: var(--accent); border-color: var(--focus-ring);
box-shadow: 0 0 0 3px var(--focus-glow);
} }
.input.num-input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .input.num-input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.textarea { min-height: 84px; resize: vertical; line-height: 1.55; } .textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
@@ -639,21 +853,23 @@ p { margin: 0; }
/* ─── 弹窗 ──────────────────────────────────────────────────────── */ /* ─── 弹窗 ──────────────────────────────────────────────────────── */
.modal-backdrop { .modal-backdrop {
position: fixed; inset: 0; z-index: 50; position: fixed; inset: 0; z-index: var(--z-modal);
background: color-mix(in oklch, var(--fg) 45%, transparent); background: var(--scrim);
display: none; display: none;
align-items: center; justify-content: center; align-items: center; justify-content: center;
padding: 24px; padding: 24px;
} }
.modal-backdrop.open { display: flex; } .modal-backdrop.open { display: flex; }
.modal { .modal {
background: var(--surface); background: var(--material-drawer);
border-radius: var(--radius-lg); backdrop-filter: blur(28px);
border: 1px solid var(--border); -webkit-backdrop-filter: blur(28px);
width: 100%; max-width: 560px; border-radius: 16px;
border: 1px solid var(--gold-line);
width: 100%; max-width: min(520px, 94vw);
max-height: 86vh; overflow-y: auto; max-height: 86vh; overflow-y: auto;
padding: 22px 24px; padding: 22px 24px;
box-shadow: 0 18px 50px color-mix(in oklch, var(--fg) 25%, transparent); box-shadow: var(--shadow-modal);
} }
.modal.wide { max-width: 760px; } .modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
@@ -684,33 +900,55 @@ p { margin: 0; }
font-size: 13px; font-size: 13px;
background: var(--surface); background: var(--surface);
} }
.notice.warn { background: var(--warn-soft); border-color: color-mix(in oklch, var(--warn) 30%, transparent); } .notice.warn { background: var(--warn-soft); border-color: var(--orange-bg); }
.notice.danger { background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 30%, transparent); } .notice.danger { background: var(--danger-soft); border-color: var(--red-line); }
.notice.info { background: var(--info-soft); border-color: color-mix(in oklch, var(--info) 25%, transparent); } .notice.info { background: var(--info-soft); border-color: var(--gold-line); }
.notice .n-title { font-weight: 650; } .notice .n-title { font-weight: 650; }
.notice .n-body { color: color-mix(in oklch, var(--fg) 80%, var(--muted)); margin-top: 2px; font-size: 12.5px; } .notice .n-body { color: var(--text-2); margin-top: 2px; font-size: 12.5px; }
/* ─── 登录页 ────────────────────────────────────────────────────── */ /* ─── 登录页 ────────────────────────────────────────────────────── */
.login-wrap { .login-wrap {
min-height: 100vh; min-height: 100vh;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: minmax(440px, 46%) minmax(0, 1fr);
position: relative;
}
.login-theme {
position: absolute;
top: 18px;
right: 18px;
z-index: 2;
width: 148px;
} }
.login-aside { .login-aside {
background: var(--fg); background: var(--lp-brand);
color: var(--surface); color: #fff;
padding: 48px 56px; padding: 48px 56px;
display: flex; flex-direction: column; display: flex; flex-direction: column;
position: relative;
overflow: hidden;
min-height: 100vh;
} }
.login-aside .brand-mark { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.65; } .login-aside::before {
content: "";
position: absolute; inset: 0;
background: var(--lp-brand-glow);
pointer-events: none;
}
html[data-theme="night"] .login-aside {
box-shadow: inset -1px 0 0 var(--gold-line);
}
.login-aside > * { position: relative; z-index: 1; }
.login-aside .brand-logo { width: 52px; height: 52px; margin-bottom: 18px; }
.login-aside .brand-mark { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.72; }
.login-aside h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; line-height: 1.25; } .login-aside h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; line-height: 1.25; }
.login-aside .aside-sub { opacity: 0.72; font-size: 14px; margin-top: 14px; max-width: 40ch; } .login-aside .aside-sub { opacity: 0.82; font-size: 14px; margin-top: 14px; max-width: 40ch; }
.login-aside .aside-list { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .login-aside .aside-list { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 32px; }
.login-aside .aside-item { display: flex; gap: 10px; font-size: 13px; opacity: 0.85; align-items: baseline; } .login-aside .aside-item { display: flex; gap: 10px; font-size: 13px; opacity: 0.92; align-items: baseline; }
.login-aside .aside-item .tick { font-family: var(--font-mono); color: var(--accent); } .login-aside .aside-item .tick { font-family: var(--font-mono); color: var(--lp-tick); font-weight: 700; }
.login-panel { display: grid; place-items: center; padding: 48px 32px; } .login-panel { display: grid; place-items: center; padding: 72px 32px 48px; }
.login-card { width: 100%; max-width: 400px; } .login-card { width: 100%; max-width: 400px; }
.login-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .login-card h2 { font-size: 24px; font-weight: 750; letter-spacing: -0.01em; }
.login-card .login-sub { color: var(--muted); font-size: 13px; margin: 6px 0 24px; } .login-card .login-sub { color: var(--muted); font-size: 13px; margin: 6px 0 24px; }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; } .role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.role-switch button { .role-switch button {
@@ -726,24 +964,33 @@ p { margin: 0; }
.role-switch button.active { border-color: var(--accent); background: var(--accent-soft); } .role-switch button.active { border-color: var(--accent); background: var(--accent-soft); }
.role-switch button.active .r-name { color: var(--accent); } .role-switch button.active .r-name { color: var(--accent); }
.login-card .field { margin-bottom: 14px; } .login-card .field { margin-bottom: 14px; }
.login-card .btn-primary { height: 40px; min-height: 40px; width: 100%; }
.login-notice {
margin-top: 16px;
padding: 10px 12px;
border-radius: 9px;
background: var(--gold-soft);
border: 1px solid var(--gold-line);
color: var(--gold);
font-size: 12.5px;
}
.login-foot { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; } .login-foot { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }
.login-foot a { color: var(--accent); font-weight: 550; } .login-foot a { color: var(--accent); font-weight: 550; }
.login-foot a:hover { text-decoration: underline; } .login-foot a:hover { text-decoration: underline; }
/* 端标识:登录页顶部大字区分管理端 / 公司端 */
.login-role-title { .login-role-title {
font-size: 34px; font-size: 22px;
font-weight: 800; font-weight: 750;
letter-spacing: 0.02em; letter-spacing: 0.01em;
line-height: 1.15; line-height: 1.15;
margin-bottom: 6px; margin-bottom: 6px;
color: var(--text);
} }
.login-role-title.admin { color: var(--accent); } .login-role-title.admin { color: var(--accent); }
.login-role-title.company { color: var(--info); } .login-role-title.company { color: var(--accent); }
.login-role-caption { color: var(--muted); font-size: 13px; margin-bottom: 22px; } .login-role-caption { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
/* 管理端青绿 / 公司端品蓝侧栏色块 */ .login-aside.company { background: var(--lp-brand); }
.login-aside.company { background: var(--info); } .login-aside.company .aside-item .tick { color: var(--lp-tick); opacity: 1; }
.login-aside.company .aside-item .tick { color: var(--surface); opacity: 0.85; }
.login-back { .login-back {
display: inline-flex; align-items: center; gap: 6px; display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 20px; margin-bottom: 20px;
@@ -755,10 +1002,17 @@ p { margin: 0; }
font-size: 12.5px; font-weight: 600; font-size: 12.5px; font-weight: 600;
} }
.login-back:hover { border-color: var(--accent); color: var(--accent); } .login-back:hover { border-color: var(--accent); color: var(--accent); }
.login-back.company:hover { border-color: var(--info); color: var(--info); } .login-back.company:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) { @media (max-width: 1279px) {
.login-wrap { grid-template-columns: minmax(380px, 42%) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
.login-wrap { grid-template-columns: 1fr; } .login-wrap { grid-template-columns: 1fr; }
.login-aside { display: none; } .login-aside {
min-height: 0;
padding: 28px 24px 20px;
}
.login-aside .aside-list { padding-top: 16px; }
} }
/* ─── 空状态 ────────────────────────────────────────────────────── */ /* ─── 空状态 ────────────────────────────────────────────────────── */
@@ -857,7 +1111,7 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
/* ─── 入口页(index) ────────────────────────────────────────────── */ /* ─── 入口页(index) ────────────────────────────────────────────── */
.portal-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; } .portal-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; }
.portal-inner { width: 100%; max-width: 880px; } .portal-inner { width: 100%; max-width: 880px; position: relative; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; } .portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.portal-card { .portal-card {
display: block; display: block;
@@ -867,7 +1121,7 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
padding: 24px; padding: 24px;
transition: border-color 0.12s ease, transform 0.12s ease; transition: border-color 0.12s ease, transform 0.12s ease;
} }
.portal-card:hover { border-color: var(--accent); transform: translateY(-2px); } .portal-card:hover { border-color: var(--gold-line); }
.portal-card .pc-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); } .portal-card .pc-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); }
.portal-card h3 { font-size: 17px; font-weight: 700; margin-top: 8px; } .portal-card h3 { font-size: 17px; font-weight: 700; margin-top: 8px; }
.portal-card p { color: var(--muted); font-size: 13px; margin-top: 6px; } .portal-card p { color: var(--muted); font-size: 13px; margin-top: 6px; }
@@ -902,28 +1156,72 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
.icon-button:hover { color: var(--fg); border-color: color-mix(in oklch, var(--fg) 40%, var(--border)); background: var(--fg-soft); } .icon-button:hover { color: var(--fg); border-color: color-mix(in oklch, var(--fg) 40%, var(--border)); background: var(--fg-soft); }
.icon-button svg { width: 18px; height: 18px; } .icon-button svg { width: 18px; height: 18px; }
.menu-button { display: none; } .menu-button { display: none; }
@media (max-width: 860px) { @media (max-width: 1023px) {
.menu-button { display: inline-grid; } .shell { grid-template-columns: 64px minmax(0, 1fr); }
.shell { grid-template-columns: 1fr; } .sidebar { width: 64px; }
.sidebar { .side-brand { padding: 14px 13px; justify-content: center; }
position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; .brand-text, .nav-label, .nav-group, .side-foot .user-name, .side-foot .user-meta, .side-foot .avatar { display: none; }
width: var(--side-w); height: 100dvh; .side-nav a { justify-content: center; padding: 10px 0; }
transform: translateX(-100%); .side-nav a .nav-badge { display: none; }
transition: transform 0.2s ease; .theme-seg { grid-template-columns: 1fr; }
.side-foot .user-row { justify-content: center; }
.side-foot .logout { margin-left: 0; }
.content { padding: 24px 20px 72px; }
}
@media (max-width: 767px) {
.shell {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
} }
.sidebar.is-open { transform: none; box-shadow: 0 0 48px color-mix(in oklch, var(--fg) 22%, transparent); } .sidebar {
width: 100%;
height: auto;
max-height: none;
flex-direction: row;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
border-right: 0;
border-bottom: 1px solid var(--border);
}
.side-brand { border-bottom: 0; padding: 10px 12px; }
.brand-text { display: none; }
.side-nav {
display: flex;
flex-direction: row;
overflow-x: auto;
padding: 8px 4px;
flex: 1;
}
.side-nav .nav-group { display: none; }
.side-nav a { flex: none; padding: 8px 10px; }
.nav-label { display: inline; font-size: 12.5px; }
.side-foot {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
border-top: 0;
padding: 8px 12px;
}
.theme-seg { margin-bottom: 0; width: 92px; grid-template-columns: 1fr 1fr; }
.account-box { padding: 4px; background: transparent; }
.side-foot .user-name, .side-foot .user-meta, .side-foot .avatar { display: none; }
.main { min-height: 0; height: 100%; overflow-y: auto; }
} }
/* ─── Toast 轻量提示 ───────────────────────────────────────────── */ /* ─── Toast 轻量提示 ───────────────────────────────────────────── */
.toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: grid; gap: 8px; } .toast-region { position: fixed; right: 16px; top: 16px; z-index: var(--z-toast); display: grid; gap: 8px; }
.toast { .toast {
display: flex; align-items: flex-start; gap: 9px; display: flex; align-items: center; gap: 9px;
min-width: 260px; max-width: 380px; min-width: 260px; max-width: 380px;
padding: 11px 14px; height: 40px;
border: 1px solid var(--border); padding: 0 16px;
border-radius: var(--radius-lg); border: 0;
background: var(--surface); border-radius: 999px;
box-shadow: 0 12px 34px color-mix(in oklch, var(--fg) 18%, transparent); background: var(--material-toast);
color: #fff;
box-shadow: var(--shadow-toast);
font-size: 13px; font-size: 13px;
} }
.toast .t-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--muted); } .toast .t-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--muted); }
@@ -945,18 +1243,26 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
/* ─── 侧滑详情抽屉(用 modal/card token 重画) ─────────────────── */ /* ─── 侧滑详情抽屉(用 modal/card token 重画) ─────────────────── */
.drawer { .drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
width: min(400px, calc(100vw - 24px)); width: min(480px, 94vw);
display: flex; flex-direction: column; display: flex; flex-direction: column;
background: var(--surface); background: var(--material-drawer);
border-left: 1px solid var(--border); backdrop-filter: blur(28px);
box-shadow: -18px 0 50px color-mix(in oklch, var(--fg) 22%, transparent); -webkit-backdrop-filter: blur(28px);
border-left: 1px solid var(--gold-line);
box-shadow: var(--shadow-drawer);
transform: translateX(100%); transform: translateX(100%);
visibility: hidden; visibility: hidden;
transition: transform 0.22s ease, visibility 0.22s; transition: transform 420ms var(--ease-drawer), visibility 420ms;
} }
.drawer.is-open { transform: none; visibility: visible; } .drawer.is-open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); } .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); position: relative; }
.drawer-head::before {
content: "";
position: absolute; top: 8px; left: 50%;
width: 36px; height: 4px; margin-left: -18px;
border-radius: 999px; background: var(--grip);
}
.drawer-head .d-title { font-size: 16px; font-weight: 700; margin-top: 6px; } .drawer-head .d-title { font-size: 16px; font-weight: 700; margin-top: 6px; }
.drawer-head .d-desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; } .drawer-head .d-desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; } .drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
@@ -999,24 +1305,24 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
color: var(--info); color: var(--info);
} }
[data-page="transfers"] .btn-primary { [data-page="transfers"] .btn-primary {
background: var(--info); background: var(--accent-solid);
border-color: var(--info); border-color: var(--accent-solid);
color: var(--surface); color: #fff;
} }
[data-page="transfers"] .btn-primary:hover { [data-page="transfers"] .btn-primary:hover {
background: color-mix(in oklch, var(--info) 88%, black); background: var(--accent);
border-color: color-mix(in oklch, var(--info) 88%, black); border-color: var(--accent);
} }
[data-page="transfers"] .loading-inline::before { [data-page="transfers"] .loading-inline::before {
border-top-color: var(--info); border-top-color: var(--accent);
} }
[data-page="transfers"] .stat-card .stat-value.amt-in { color: var(--success); } [data-page="transfers"] .stat-card .stat-value.amt-in { color: var(--success); }
[data-page="transfers"] .stat-card .stat-value.amt-out { color: var(--danger); } [data-page="transfers"] .stat-card .stat-value.amt-out { color: var(--danger); }
[data-page="transfers"] .ds-table tbody tr.is-pending { [data-page="transfers"] .ds-table tbody tr.is-pending {
background: color-mix(in oklch, var(--warn) 8%, transparent); background: var(--orange-bg);
} }
[data-page="transfers"] .ds-table tbody tr.is-pending:hover { [data-page="transfers"] .ds-table tbody tr.is-pending:hover {
background: color-mix(in oklch, var(--warn) 14%, transparent); background: var(--warn-soft);
} }
.xfer-split { .xfer-split {
@@ -1032,11 +1338,11 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
padding: 16px 18px; padding: 16px 18px;
} }
.xfer-split-pane.confirmed { .xfer-split-pane.confirmed {
background: color-mix(in oklch, var(--success) 6%, var(--surface)); background: var(--green-bg);
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
} }
.xfer-split-pane.pending { .xfer-split-pane.pending {
background: color-mix(in oklch, var(--warn) 8%, var(--surface)); background: var(--orange-bg);
} }
.xfer-split-head { .xfer-split-head {
display: flex; display: flex;
@@ -1051,7 +1357,7 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
.xfer-split-pane.confirmed .xfer-split-value { color: var(--success); } .xfer-split-pane.confirmed .xfer-split-value { color: var(--success); }
.xfer-split-pane.pending .xfer-split-value { color: color-mix(in oklch, var(--warn) 80%, black); } .xfer-split-pane.pending .xfer-split-value { color: var(--warn); }
.xfer-split-note { .xfer-split-note {
margin-top: 6px; margin-top: 6px;
font-size: 12px; font-size: 12px;
@@ -1084,6 +1390,83 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
.xfer-split-pane.confirmed { border-right: 0; border-bottom: 1px solid var(--border); } .xfer-split-pane.confirmed { border-right: 0; border-bottom: 1px solid var(--border); }
} }
/* ─── 霜曜融合补遗:证据金、空态、降级、三态勾选 ───────────────── */
.amt-gold, .kv dd.amt-gold, .drawer-body .kv dd.amt-gold { color: var(--gold); font-weight: 750; font-size: 22px; }
.evidence-flag {
display: inline-flex; align-items: center; gap: 6px;
color: var(--gold); font-size: 11.5px; font-weight: 600;
}
.empty-action {
border: 1px dashed var(--hairline);
border-radius: 14px;
padding: 32px 20px;
text-align: center;
}
.restricted-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px; }
.ds-check {
appearance: none;
width: 15px; height: 15px;
border: 1px solid var(--hairline);
border-radius: 4px;
background: var(--surface);
vertical-align: middle;
flex: none;
}
.ds-check:checked {
background: var(--accent);
border-color: var(--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M2.2 6.2l2.4 2.4 5.2-5.2'/%3E%3C/svg%3E");
background-size: 10px 10px;
background-repeat: no-repeat;
background-position: center;
}
.ds-check:indeterminate {
background: var(--accent);
border-color: var(--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect fill='white' x='1.5' y='5' width='9' height='2' rx='1'/%3E%3C/svg%3E");
background-size: 10px 10px;
background-repeat: no-repeat;
background-position: center;
}
.batch-bar { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.login-page { min-height: 100vh; overflow: auto; }
.toast .t-detail { color: rgba(255,255,255,.72); }
.toast .t-dot { margin-top: 0; }
@media (max-width: 480px) {
.grid-4, .grid-5, .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.drawer, .modal-backdrop, .toast { transition-duration: 150ms !important; }
.skeleton::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
.sidebar, .topbar { background: var(--surface); backdrop-filter: none; }
.drawer, .modal { background: var(--surface); backdrop-filter: none; }
.toast { background: var(--material-toast); }
}
@media (prefers-contrast: more) {
:root, .v-fusion {
--hairline: rgba(0, 0, 0, 0.28);
--gold: #6b5310;
--gold-line: rgba(107, 83, 16, 0.55);
}
html[data-theme="night"], .v-fusion[data-theme="night"] {
--hairline: rgba(255, 255, 255, 0.28);
--gold: #f0cd7a;
--gold-line: rgba(240, 205, 122, 0.6);
}
}
/* ─── 提醒管理:三步发送流(HEL-230) ─────────────────────────── */ /* ─── 提醒管理:三步发送流(HEL-230) ─────────────────────────── */
.send-flow { .send-flow {
display: grid; display: grid;
@@ -1291,3 +1674,4 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
[data-page="period-audit"] .table-wrap { display: none; } [data-page="period-audit"] .table-wrap { display: none; }
.audit-event-cards { display: grid; gap: 10px; } .audit-event-cards { display: grid; gap: 10px; }
} }
+22 -7
View File
@@ -4,30 +4,45 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>金牛实业资金往来管理系统 · 入口</title> <title>金牛实业资金往来管理系统 · 入口</title>
<link rel="stylesheet" href="design-system.css?v=5" /> <script>
(function () {
try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
document.documentElement.classList.add("v-fusion");
})();
</script>
<link rel="stylesheet" href="design-system.css?v=12" />
</head> </head>
<body> <body class="login-page">
<div class="portal-wrap"> <div class="portal-wrap">
<div class="portal-inner"> <div class="portal-inner">
<p class="meta" style="letter-spacing: 0.1em;">JINNIU GROUP · INTERCOMPANY TREASURY</p> <div class="login-theme">
<div class="theme-seg" role="group" aria-label="主题">
<button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
<button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
</div>
</div>
<img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="44" height="44" alt="金牛实业" />
<img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="44" height="44" alt="" />
<p class="meta" style="letter-spacing: 0.1em; margin-top: 14px;">JINNIU GROUP · INTERCOMPANY TREASURY</p>
<h1 style="font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin-top: 10px;">河南金牛实业集团有限公司 · 资金往来管理系统</h1> <h1 style="font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin-top: 10px;">河南金牛实业集团有限公司 · 资金往来管理系统</h1>
<p class="muted" style="margin-top: 10px; max-width: 64ch;">集团内部公司间资金往来记账平台。银行流水导入后自动轧算往来余额,支持从集团汇总逐级穿透至银行原始流水。本系统包含管理端与公司业务端两套界面。</p> <p class="muted" style="margin-top: 10px; max-width: 64ch;">集团内部公司间资金往来记账平台。银行流水导入后自动轧算往来余额,支持从集团汇总逐级穿透至银行原始流水。本系统包含管理端与公司业务端两套界面。</p>
<div class="portal-grid"> <div class="portal-grid">
<a class="portal-card" href="login-admin.html"> <a class="portal-card" href="login-admin.html">
<span class="pc-role">管理端 · 7 个页面</span> <span class="pc-role">管理端 · 8 个页面</span>
<h3>管理总览 / 往来查询 / 审核中心 / 流水管理 / 公司与账号 / 结账与期初 / 提醒管理</h3> <h3>管理总览 / 往来查询 / 审核中心 / 流水管理 / 公司与账号 / 结账与期初 / 审计记录 / 提醒管理</h3>
<p>面向管理员:全局监控各公司流水提交与往来余额,集中处理审核事项,执行月度结账。</p> <p>面向管理员:全局监控各公司流水提交与往来余额,集中处理审核事项,执行月度结账。</p>
<span class="pc-go">去管理端登录 →</span> <span class="pc-go">去管理端登录 →</span>
</a> </a>
<a class="portal-card" href="login-company.html"> <a class="portal-card" href="login-company.html">
<span class="pc-role">公司业务端 · 7 个页面</span> <span class="pc-role">公司业务端 · 8 个页面</span>
<h3>工作台 / 流水导入 / 手工记录 / 流水管理 / 往来确认 / 银行账户 / 通知</h3> <h3>工作台 / 流水导入 / 手工记录 / 流水管理 / 转账往来 / 往来确认 / 银行账户 / 通知</h3>
<p>面向成员公司出纳:上传银行流水、登记手工往来、确认单边匹配与科目,跟踪本月完成进度。</p> <p>面向成员公司出纳:上传银行流水、登记手工往来、确认单边匹配与科目,跟踪本月完成进度。</p>
<span class="pc-go">去公司端登录 →</span> <span class="pc-go">去公司端登录 →</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<script src="theme.js?v=1"></script>
</body> </body>
</html> </html>
+20 -4
View File
@@ -4,11 +4,19 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>登录 · 金牛实业资金往来管理系统</title> <title>登录 · 金牛实业资金往来管理系统</title>
<link rel="stylesheet" href="design-system.css?v=5" /> <script>
(function () {
try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
document.documentElement.classList.add("v-fusion");
})();
</script>
<link rel="stylesheet" href="design-system.css?v=12" />
</head> </head>
<body data-role="admin"> <body class="login-page" data-role="admin">
<div class="login-wrap"> <div class="login-wrap">
<aside class="login-aside"> <aside class="login-aside">
<img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="52" height="52" alt="金牛实业" />
<img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="52" height="52" alt="" />
<span class="brand-mark">JINNIU GROUP · TREASURY</span> <span class="brand-mark">JINNIU GROUP · TREASURY</span>
<h1>河南金牛实业集团有限公司<br />资金往来管理系统</h1> <h1>河南金牛实业集团有限公司<br />资金往来管理系统</h1>
<p class="aside-sub">集团内部各公司之间资金往来的统一记账平台。导入银行流水后自动轧算公司间往来余额,从集团汇总可层层下钻至银行原始流水。</p> <p class="aside-sub">集团内部各公司之间资金往来的统一记账平台。导入银行流水后自动轧算公司间往来余额,从集团汇总可层层下钻至银行原始流水。</p>
@@ -21,6 +29,12 @@
</aside> </aside>
<main class="login-panel"> <main class="login-panel">
<div class="login-theme">
<div class="theme-seg" role="group" aria-label="主题">
<button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
<button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
</div>
</div>
<div class="login-card"> <div class="login-card">
<a class="login-back" href="index.html">← 返回入口页</a> <a class="login-back" href="index.html">← 返回入口页</a>
<div class="login-role-title admin">管理端</div> <div class="login-role-title admin">管理端</div>
@@ -42,9 +56,10 @@
<div class="field"> <div class="field">
<span class="hint error" id="login-err" role="alert" hidden></span> <span class="hint error" id="login-err" role="alert" hidden></span>
</div> </div>
<button class="btn btn-primary" type="submit" style="width: 100%; margin-top: 6px;">登 录</button> <button class="btn btn-primary" type="submit">登 录</button>
</form> </form>
<div class="login-notice">首次登录请修改初始密码。新密码须 8 位以上,且包含字母与数字。</div>
<p class="login-foot">忘记密码请联系管理员重置 · <a href="index.html">返回入口页</a></p> <p class="login-foot">忘记密码请联系管理员重置 · <a href="index.html">返回入口页</a></p>
</div> </div>
</main> </main>
@@ -75,6 +90,7 @@
</div> </div>
</div> </div>
<script src="login.js?v=5"></script> <script src="theme.js?v=1"></script>
<script src="login.js?v=6"></script>
</body> </body>
</html> </html>
+20 -4
View File
@@ -4,11 +4,19 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>登录 · 金牛实业资金往来管理系统</title> <title>登录 · 金牛实业资金往来管理系统</title>
<link rel="stylesheet" href="design-system.css?v=5" /> <script>
(function () {
try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
document.documentElement.classList.add("v-fusion");
})();
</script>
<link rel="stylesheet" href="design-system.css?v=12" />
</head> </head>
<body data-role="company"> <body class="login-page" data-role="company">
<div class="login-wrap"> <div class="login-wrap">
<aside class="login-aside company"> <aside class="login-aside company">
<img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="52" height="52" alt="金牛实业" />
<img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="52" height="52" alt="" />
<span class="brand-mark">JINNIU GROUP · TREASURY</span> <span class="brand-mark">JINNIU GROUP · TREASURY</span>
<h1>河南金牛实业集团有限公司<br />资金往来管理系统</h1> <h1>河南金牛实业集团有限公司<br />资金往来管理系统</h1>
<p class="aside-sub">集团内部各公司之间资金往来的统一记账平台。导入银行流水后自动轧算公司间往来余额,从集团汇总可层层下钻至银行原始流水。</p> <p class="aside-sub">集团内部各公司之间资金往来的统一记账平台。导入银行流水后自动轧算公司间往来余额,从集团汇总可层层下钻至银行原始流水。</p>
@@ -21,6 +29,12 @@
</aside> </aside>
<main class="login-panel"> <main class="login-panel">
<div class="login-theme">
<div class="theme-seg" role="group" aria-label="主题">
<button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
<button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
</div>
</div>
<div class="login-card"> <div class="login-card">
<a class="login-back company" href="index.html">← 返回入口页</a> <a class="login-back company" href="index.html">← 返回入口页</a>
<div class="login-role-title company">公司端</div> <div class="login-role-title company">公司端</div>
@@ -42,9 +56,10 @@
<div class="field"> <div class="field">
<span class="hint error" id="login-err" role="alert" hidden></span> <span class="hint error" id="login-err" role="alert" hidden></span>
</div> </div>
<button class="btn btn-primary" type="submit" style="width: 100%; margin-top: 6px;">登 录</button> <button class="btn btn-primary" type="submit">登 录</button>
</form> </form>
<div class="login-notice">首次登录请修改初始密码。新密码须 8 位以上,且包含字母与数字。</div>
<p class="login-foot">忘记密码请联系管理员重置 · <a href="index.html">返回入口页</a></p> <p class="login-foot">忘记密码请联系管理员重置 · <a href="index.html">返回入口页</a></p>
</div> </div>
</main> </main>
@@ -75,6 +90,7 @@
</div> </div>
</div> </div>
<script src="login.js?v=5"></script> <script src="theme.js?v=1"></script>
<script src="login.js?v=6"></script>
</body> </body>
</html> </html>
+55
View File
@@ -0,0 +1,55 @@
/* 霜曜 / 黑金主题:仅记忆主题偏好,不写任何业务数据。 */
(function (global) {
var KEY = "jinniu-theme";
function read() {
try {
return localStorage.getItem(KEY) === "night" ? "night" : "day";
} catch (err) {
return "day";
}
}
function syncButtons(theme) {
document.querySelectorAll("[data-theme-set]").forEach(function (btn) {
var on = btn.getAttribute("data-theme-set") === theme;
btn.classList.toggle("is-active", on);
btn.setAttribute("aria-pressed", on ? "true" : "false");
});
}
function apply(theme, animate) {
var next = theme === "night" ? "night" : "day";
var root = document.documentElement;
root.classList.add("v-fusion");
if (animate) {
root.setAttribute("data-theme-anim", "");
window.setTimeout(function () {
root.removeAttribute("data-theme-anim");
}, 220);
}
root.setAttribute("data-theme", next);
if (document.body) document.body.setAttribute("data-theme", next);
syncButtons(next);
}
function set(theme) {
var next = theme === "night" ? "night" : "day";
try {
localStorage.setItem(KEY, next);
} catch (err) {
/* 无本地存储时仍切换当次会话 */
}
apply(next, true);
}
apply(read(), false);
document.addEventListener("click", function (event) {
var btn = event.target.closest("[data-theme-set]");
if (!btn) return;
event.preventDefault();
set(btn.getAttribute("data-theme-set"));
});
global.JinniuTheme = { apply: apply, set: set, read: read };
})(window);