docs: 为全部代码补充中文注释并加入 AGENTS 注释规范

assets/styles.css

@@ -1,3 +1,6 @@
+/* WOV 静态前端全局样式：定义色彩变量、布局与通用组件样式。 */
+
+/* 设计令牌：集中管理配色，后续换肤只需修改变量。 */
 :root {
   --bg: #f5f7fa;
   --surface: #ffffff;
@@ -10,10 +13,12 @@
   --radius: 8px;
 }
 
+/* 全局盒模型与基础排版重置。 */
 * {
   box-sizing: border-box;
 }
 
+/* 页面主体：浅灰背景与默认文字颜色。 */
 body {
   margin: 0;
   font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
@@ -21,6 +26,7 @@ body {
   background: var(--bg);
 }
 
+/* 顶部导航栏：品牌标题与页面导航。 */
 .topbar {
   display: flex;
   align-items: center;
@@ -30,6 +36,7 @@ body {
   border-bottom: 1px solid var(--border);
 }
 
+/* 品牌标题样式。 */
 .brand {
   font-size: 20px;
   font-weight: 700;
@@ -37,11 +44,13 @@ body {
   text-decoration: none;
 }
 
+/* 导航链接横向排列。 */
 nav {
   display: flex;
   gap: 18px;
 }
 
+/* 导航链接默认使用弱化色，悬停时高亮。 */
 nav a {
   color: var(--muted);
   text-decoration: none;
@@ -52,12 +61,14 @@ nav a:hover {
   color: var(--primary);
 }
 
+/* 内容容器：限制最大宽度并居中。 */
 .container {
   max-width: 1080px;
   margin: 0 auto;
   padding: 28px 20px 60px;
 }
 
+/* 一级标题与二级标题的字号控制。 */
 h1 {
   margin: 0 0 8px;
   font-size: 28px;
@@ -68,10 +79,12 @@ h2 {
   font-size: 18px;
 }
 
+/* 弱化文字：用于说明、时间等次要信息。 */
 .muted {
   color: var(--muted);
 }
 
+/* 应用中心卡片网格：自适应列数的最小宽度布局。 */
 .app-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -79,6 +92,7 @@ h2 {
   margin-top: 24px;
 }
 
+/* 卡片与面板共用白底、边框和圆角外观。 */
 .card,
 .panel {
   background: var(--surface);
@@ -87,14 +101,17 @@ h2 {
   padding: 20px;
 }
 
+/* 面板之间保持纵向间距。 */
 .panel {
   margin-top: 22px;
 }
 
+/* 禁用态样式：降低透明度表达不可用。 */
 .disabled {
   opacity: 0.6;
 }
 
+/* 表单标签：块级显示并加粗。 */
 label {
   display: block;
   margin: 10px 0 6px;
@@ -103,6 +120,7 @@ label {
   color: var(--muted);
 }
 
+/* 输入控件统一样式，宽度撑满容器。 */
 input,
 select,
 textarea {
@@ -114,11 +132,13 @@ textarea {
   background: #fff;
 }
 
+/* 文本域使用等宽字体并允许纵向拉伸。 */
 textarea {
   font-family: Consolas, monospace;
   resize: vertical;
 }
 
+/* 按钮基础样式。 */
 button {
   margin-top: 12px;
   padding: 9px 16px;
@@ -131,21 +151,25 @@ button {
   cursor: pointer;
 }
 
+/* 按钮悬停强调边框与文字颜色。 */
 button:hover {
   border-color: var(--primary);
   color: var(--primary);
 }
 
+/* 主按钮：填充品牌色。 */
 button.primary {
   background: var(--primary);
   border-color: var(--primary);
   color: #fff;
 }
 
+/* 幽灵按钮：透明背景，用于次要操作。 */
 button.ghost {
   background: transparent;
 }
 
+/* 操作区与表单网格：弹性换行排列。 */
 .actions,
 .form-grid {
   display: flex;
@@ -153,25 +177,30 @@ button.ghost {
   flex-wrap: wrap;
 }
 
+/* 表单网格：默认两列，宽字段占整行。 */
 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
 }
 
+/* 宽字段跨满整行。 */
 .form-grid .wide {
   grid-column: 1 / -1;
 }
 
+/* 表格容器：窄屏时允许横向滚动。 */
 .table-wrap {
   overflow-x: auto;
 }
 
+/* 表格基础样式。 */
 table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
 }
 
+/* 表头与单元格的间距、对齐与分隔线。 */
 th,
 td {
   padding: 10px;
@@ -180,12 +209,14 @@ td {
   white-space: nowrap;
 }
 
+/* 表头使用弱化色与小字号。 */
 th {
   color: var(--muted);
   font-size: 12px;
   text-transform: uppercase;
 }
 
+/* 结果块：深色等宽字体，适合展示 JSON 或日志。 */
 .result {
   margin: 16px 0 0;
   padding: 14px;
@@ -199,6 +230,7 @@ th {
   overflow-wrap: anywhere;
 }
 
+/* 下载区：横向排列的下载链接。 */
 .downloads {
   display: flex;
   gap: 12px;
@@ -206,6 +238,7 @@ th {
   margin-top: 14px;
 }
 
+/* 下载链接：描边按钮式链接。 */
 .download-link {
   display: inline-block;
   padding: 8px 14px;
@@ -216,10 +249,12 @@ th {
   text-decoration: none;
 }
 
+/* 下载链接悬停时轻微填充背景。 */
 .download-link:hover {
   background: #e8f1f9;
 }
 
+/* 状态徽章基础样式。 */
 .badge {
   display: inline-block;
   padding: 3px 8px;
@@ -228,21 +263,25 @@ th {
   font-weight: 700;
 }
 
+/* 成功徽章：绿色背景。 */
 .badge.ok {
   background: #e2f4ea;
   color: var(--ok);
 }
 
+/* 警告徽章：黄色背景。 */
 .badge.warn {
   background: #fff2d9;
   color: #8a5a00;
 }
 
+/* 错误徽章：红色背景。 */
 .badge.error {
   background: #fde8e6;
   color: var(--danger);
 }
 
+/* 危险操作按钮文字颜色。 */
 .danger {
   color: var(--danger);
 }