From 577386bff2267c5d88353b8a99ba39712ae49d29 Mon Sep 17 00:00:00 2001
From: qing <1776177662@qq.com>
Date: Thu, 6 Aug 2026 17:42:38 +0000
Subject: [PATCH] =?UTF-8?q?feat(static):=20=E5=90=8C=E6=AD=A5=E7=BE=8E?=
 =?UTF-8?q?=E5=8C=96=E6=B3=A8=E5=86=8C/=E6=89=BE=E5=9B=9E=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81/=E6=A0=91=E7=8A=B6=E7=AC=94=E8=AE=B0=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 auth.css：表单页共享美化（点阵背景、品牌渐变顶条卡片、eyebrow 标题、
  渐变提交按钮、入场动画），register/forgot 各加一行 link 与 eyebrow
- 新增 dnfs.css：笔记页美化（顶部底纹暖光、卡片逐张入场、编辑卡聚焦光环）；
  顺带修复节点编辑卡裸 <button> 无主题底色的问题
- 动效均遵循 prefers-reduced-motion，颜色全部消费 theme.css 变量
---
 static/public/css/auth.css  | 125 ++++++++++++++++++++++++++++++++++++
 static/public/css/dnfs.css  | 118 ++++++++++++++++++++++++++++++++++
 static/public/dnfs.html     |   1 +
 static/public/forgot.html   |   2 +
 static/public/register.html |   2 +
 5 files changed, 248 insertions(+)
 create mode 100644 static/public/css/auth.css
 create mode 100644 static/public/css/dnfs.css

diff --git a/static/public/css/auth.css b/static/public/css/auth.css
new file mode 100644
index 0000000..151ad62
--- /dev/null
+++ b/static/public/css/auth.css
@@ -0,0 +1,125 @@
+/* auth.css — 注册/重置密码页专属美化（在 theme.css 之后加载，视觉语言与首页 index.css 对齐） */
+
+::selection {
+    background: var(--accent-glow);
+    color: var(--fg);
+}
+
+/* ===== 页面背景：点阵底纹 + 暖色环境光（固定，不随滚动） ===== */
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px);
+    background-size: 26px 26px;
+    -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 18%, transparent 72%);
+    mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 18%, transparent 72%);
+    pointer-events: none;
+}
+body::after {
+    content: "";
+    position: fixed;
+    left: 50%;
+    top: 32%;
+    width: 560px;
+    height: 560px;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    background: radial-gradient(circle, var(--accent-glow), transparent 62%);
+    opacity: 0.35;
+    pointer-events: none;
+}
+
+/* ===== 卡片：顶部品牌渐变条 + 加深阴影 ===== */
+.card {
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(74, 55, 40, 0.1);
+}
+.card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
+}
+@media (prefers-color-scheme: dark) {
+    .card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
+}
+
+/* ===== 品牌 eyebrow + 居中标题（渐变短杠，对齐首页章节标题） ===== */
+.auth-eyebrow {
+    text-align: center;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.26em;
+    text-indent: 0.26em; /* 视觉居中补偿字距 */
+    color: var(--accent);
+    margin-bottom: 0.4rem;
+}
+.card h2 {
+    text-align: center;
+}
+.card h2::after {
+    content: "";
+    display: block;
+    width: 40px;
+    height: 3px;
+    margin: 0.55rem auto 0;
+    border-radius: 2px;
+    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
+    opacity: 0.9;
+}
+
+/* ===== 按钮：主按钮品牌渐变 + 上浮；次按钮描边反馈 ===== */
+.card input[type="submit"] {
+    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
+    color: #fff;
+    box-shadow: 0 2px 10px rgba(232, 133, 58, 0.32);
+    transition: transform 0.18s, box-shadow 0.22s, opacity 0.15s;
+}
+.card input[type="submit"]:not(:disabled):hover {
+    opacity: 1;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 18px rgba(232, 133, 58, 0.4);
+}
+.card input[type="submit"]:not(:disabled):active { transform: scale(0.96); }
+
+.card input[type="button"] {
+    border: 1px solid var(--accent-glow);
+    transition: transform 0.18s, border-color 0.18s, opacity 0.15s;
+}
+.card input[type="button"]:not(:disabled):hover {
+    opacity: 1;
+    transform: translateY(-1px);
+    border-color: var(--accent);
+}
+.card input[type="button"]:not(:disabled):active { transform: scale(0.96); }
+
+.card input[type="reset"] { transition: transform 0.18s, color 0.18s, border-color 0.18s, opacity 0.15s; }
+.card input[type="reset"]:hover {
+    opacity: 1;
+    color: var(--accent);
+    border-color: var(--accent);
+}
+
+/* ===== 图形验证码：hover 描边 + 阴影 ===== */
+.code-box .captcha-img {
+    transition: border-color 0.18s, box-shadow 0.18s;
+}
+.code-box .captcha-img:hover {
+    border-color: var(--accent);
+    box-shadow: var(--shadow-md);
+}
+
+/* ===== 入场动画 ===== */
+@keyframes auth-in {
+    from { opacity: 0; transform: translateY(14px); }
+    to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: no-preference) {
+    .card { animation: auth-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
+}
diff --git a/static/public/css/dnfs.css b/static/public/css/dnfs.css
new file mode 100644
index 0000000..e402198
--- /dev/null
+++ b/static/public/css/dnfs.css
@@ -0,0 +1,118 @@
+/* dnfs.css — 树状笔记页专属美化（在 theme.css / codeblock.css 之后加载，视觉语言与首页 index.css 对齐） */
+
+::selection {
+    background: var(--accent-glow);
+    color: var(--fg);
+}
+
+/* ===== 页面底纹：极淡点阵 + 顶部暖光，增加层次不影响阅读 ===== */
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background-image: radial-gradient(var(--border) 1px, transparent 1px);
+    background-size: 26px 26px;
+    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
+    mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
+    pointer-events: none;
+}
+body::after {
+    content: "";
+    position: fixed;
+    left: 50%;
+    top: -160px;
+    width: 720px;
+    height: 480px;
+    transform: translateX(-50%);
+    z-index: -1;
+    background: radial-gradient(ellipse, var(--accent-glow), transparent 65%);
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+/* ===== 节点卡片入场：逐张上浮（JS 动态插入时播放） ===== */
+@keyframes card-in {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: no-preference) {
+    .recommend-list .card { animation: card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
+    .recommend-list .card:nth-of-type(2) { animation-delay: 0.05s; }
+    .recommend-list .card:nth-of-type(3) { animation-delay: 0.1s; }
+    .recommend-list .card:nth-of-type(4) { animation-delay: 0.15s; }
+    .recommend-list .card:nth-of-type(5) { animation-delay: 0.2s; }
+    .recommend-list .card:nth-of-type(6) { animation-delay: 0.25s; }
+    .recommend-list .card:nth-of-type(7) { animation-delay: 0.3s; }
+    .recommend-list .card:nth-of-type(n+8) { animation-delay: 0.35s; }
+
+    /* 首屏骨架元素入场 */
+    .searchbox, .userpanel, .minimap, .node-form { animation: card-in 0.4s ease both; }
+    .node-form { animation-delay: 0.1s; }
+}
+
+/* ===== 搜索框：hover 升温（focus 高亮由 theme.css 提供） ===== */
+.searchbox:hover {
+    border-color: var(--border);
+    box-shadow: var(--shadow-md);
+}
+
+/* ===== 节点编辑卡：品牌渐变顶条 + 聚焦光环 ===== */
+.node-form {
+    position: relative;
+    overflow: hidden;
+}
+.node-form::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
+    opacity: 0.85;
+}
+.node-form:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-md);
+}
+
+/* ===== 编辑卡按钮：提交渐变 / 重置柔色 / 删除警示 ===== */
+#input-note-submit {
+    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
+    color: #fff;
+    box-shadow: 0 2px 10px rgba(232, 133, 58, 0.3);
+    transition: transform 0.18s, box-shadow 0.22s, opacity 0.15s;
+}
+#input-note-submit:not(:disabled):hover {
+    opacity: 1;
+    transform: translateY(-1px);
+    box-shadow: 0 5px 16px rgba(232, 133, 58, 0.38);
+}
+#input-note-submit:not(:disabled):active { transform: scale(0.96); }
+
+#input-note-clear {
+    background: var(--accent-soft);
+    color: var(--accent-dark);
+    border: 1px solid var(--accent-glow);
+    transition: transform 0.18s, border-color 0.18s, opacity 0.15s;
+}
+#input-note-clear:not(:disabled):hover {
+    opacity: 1;
+    transform: translateY(-1px);
+    border-color: var(--accent);
+}
+#input-note-clear:not(:disabled):active { transform: scale(0.96); }
+
+#delete-note {
+    background: var(--error-bg);
+    color: var(--error);
+    border: 1px solid transparent;
+    transition: transform 0.18s, border-color 0.18s, opacity 0.15s;
+}
+#delete-note:not(:disabled):hover {
+    opacity: 1;
+    transform: translateY(-1px);
+    border-color: var(--error);
+}
+#delete-note:not(:disabled):active { transform: scale(0.96); }
diff --git a/static/public/dnfs.html b/static/public/dnfs.html
index 9becaf2..861e540 100644
--- a/static/public/dnfs.html
+++ b/static/public/dnfs.html
@@ -7,6 +7,7 @@
 		<title>树状笔记</title>
 		<link rel="stylesheet" href="css/theme.css">
 		<link rel="stylesheet" href="css/codeblock.css">
+		<link rel="stylesheet" href="css/dnfs.css">
 	</head>
 	<body>
 		<div class="box">
diff --git a/static/public/forgot.html b/static/public/forgot.html
index c87f688..be6ae51 100644
--- a/static/public/forgot.html
+++ b/static/public/forgot.html
@@ -5,9 +5,11 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 		<title>重置密码</title>
 		<link rel="stylesheet" href="css/theme.css">
+		<link rel="stylesheet" href="css/auth.css">
 	</head>
 	<body>
 		<div class="card">
+			<p class="auth-eyebrow">DNFS 树状笔记</p>
 			<h2>重置密码页面</h2>
 			<form id="form">
 				<div>
diff --git a/static/public/register.html b/static/public/register.html
index 472ad5d..aac3908 100644
--- a/static/public/register.html
+++ b/static/public/register.html
@@ -5,9 +5,11 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 		<title>注册</title>
 		<link rel="stylesheet" href="css/theme.css">
+		<link rel="stylesheet" href="css/auth.css">
 	</head>
 	<body>
 		<div class="card">
+			<p class="auth-eyebrow">DNFS 树状笔记</p>
 			<h2>注册页面</h2>
 			<form id="form">
 				<div>