feat(design): Riso 风格页面设计与静态原型（首页/列表/详情/管理台/登录）

2026-08-26 16:01:19 +08:00
commit c47bb15d8c
8 changed files with 3047 additions and 0 deletions
@@ -0,0 +1,151 @@
+/* Awesome Index · 原型交互（演示数据，正式版接入后端） */
+(function () {
+  "use strict";
+
+  /* Toast */
+  var toastEl = document.querySelector(".toast");
+  var toastTimer = null;
+  function toast(msg) {
+    if (!toastEl) return;
+    toastEl.textContent = msg;
+    toastEl.classList.add("show");
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(function () {
+      toastEl.classList.remove("show");
+    }, 2200);
+  }
+  window.awToast = toast;
+
+  /* 复制按钮 */
+  document.querySelectorAll("[data-copy]").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      var text = btn.getAttribute("data-copy");
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(
+          function () { toast("已复制"); },
+          function () { toast("复制失败，请手动选择文本"); }
+        );
+      } else {
+        toast("当前环境不支持自动复制");
+      }
+    });
+  });
+
+  /* 首屏：查询回显为 MCP 调用 */
+  var searchInput = document.getElementById("q");
+  var echo = document.getElementById("query-echo");
+  if (searchInput && echo) {
+    var paint = function () {
+      var q = searchInput.value.trim();
+      echo.textContent = q
+        ? '→ mcp: search_entries({ "q": "' + q + '", "limit": 20 })'
+        : "→ mcp: search_entries({ \"q\": \"…\" })";
+    };
+    searchInput.addEventListener("input", paint);
+    paint();
+  }
+
+  /* 随机游览 */
+  var randomBtn = document.getElementById("random-btn");
+  if (randomBtn) {
+    randomBtn.addEventListener("click", function () {
+      location.href = "detail.html";
+    });
+  }
+
+  /* 首页搜索提交 → 列表页（原型） */
+  var searchForm = document.getElementById("search-form");
+  if (searchForm) {
+    searchForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+      location.href = "list.html";
+    });
+  }
+
+  /* 移动端导航 */
+  var navToggle = document.querySelector(".nav-toggle");
+  if (navToggle) {
+    navToggle.addEventListener("click", function () {
+      var bar = document.querySelector(".topbar");
+      var open = bar.classList.toggle("menu-open");
+      navToggle.setAttribute("aria-expanded", open ? "true" : "false");
+    });
+  }
+
+  /* 列表页：过滤栏抽屉 */
+  var railToggle = document.getElementById("rail-toggle");
+  if (railToggle) {
+    railToggle.addEventListener("click", function () {
+      var rail = document.getElementById("filter-rail");
+      rail.classList.toggle("open");
+    });
+  }
+
+  /* 标签树折叠 */
+  document.querySelectorAll(".tree-row[data-tree]").forEach(function (row) {
+    row.addEventListener("click", function () {
+      var target = document.getElementById(row.getAttribute("data-tree"));
+      if (!target) return;
+      var open = target.classList.toggle("open");
+      row.setAttribute("aria-expanded", open ? "true" : "false");
+    });
+  });
+
+  /* 详情页：人读 / 机读切换 */
+  document.querySelectorAll(".view-tabs button").forEach(function (tab) {
+    tab.addEventListener("click", function () {
+      document.querySelectorAll(".view-tabs button").forEach(function (t) {
+        t.setAttribute("aria-selected", "false");
+      });
+      tab.setAttribute("aria-selected", "true");
+      var view = tab.getAttribute("data-view");
+      document.querySelectorAll("[data-view-panel]").forEach(function (p) {
+        p.hidden = p.getAttribute("data-view-panel") !== view;
+      });
+    });
+  });
+
+  /* 管理台分区切换 */
+  document.querySelectorAll(".admin-nav button[data-section]").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      document.querySelectorAll(".admin-nav button").forEach(function (b) {
+        b.setAttribute("aria-current", "false");
+      });
+      btn.setAttribute("aria-current", "true");
+      var id = btn.getAttribute("data-section");
+      document.querySelectorAll(".admin-main > section").forEach(function (s) {
+        s.classList.toggle("active", s.id === id);
+      });
+    });
+  });
+
+  /* 登录（原型：任意输入均可进入） */
+  var loginForm = document.getElementById("login-form");
+  if (loginForm) {
+    loginForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+      if (!loginForm.reportValidity()) return;
+      toast("登录成功，正在进入管理台…");
+      setTimeout(function () {
+        location.href = "admin.html";
+      }, 600);
+    });
+  }
+
+  /* 演示表单：只弹提示，不真正提交 */
+  document.querySelectorAll("[data-demo-submit]").forEach(function (form) {
+    form.addEventListener("submit", function (e) {
+      e.preventDefault();
+      toast(form.getAttribute("data-demo-submit") || "已提交");
+      form.reset();
+    });
+  });
+
+  /* 危险操作演示拦截 */
+  document.querySelectorAll("[data-demo-danger]").forEach(function (el) {
+    el.addEventListener("click", function (e) {
+      e.preventDefault();
+      toast(el.getAttribute("data-demo-danger") || "原型演示：该操作未执行");
+    });
+  });
+})();