npm - @skyroc/scripts - Versions diffs - 2.5.1 → 2.5.2 - Mend

@skyroc/scripts 2.5.1 → 2.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (265) hide show

package/templates/admin-root/.agents/skills/skyroc-admin-prd-prototype/templates/admin-page.html ADDED Viewed

@@ -0,0 +1,771 @@
+<!doctype html>
+<html lang="zh-CN" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Skyroc Admin - 页面原型骨架</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --primary: #6366f1;
+        --primary-hover: #514fda;
+        --primary-soft: #e5eaff;
+        --page: #f7f7f7;
+        --surface: #ffffff;
+        --surface-raised: #ffffff;
+        --sidebar: #171922;
+        --sidebar-hover: #242733;
+        --text: #353535;
+        --text-secondary: #656565;
+        --text-tertiary: #919191;
+        --border: #f0f0f0;
+        --border-strong: #c6c6c8;
+        --hover: #f5f5f5;
+        --success: #10b981;
+        --warning: #f59e0b;
+        --danger: #f43f5e;
+        --mask: rgb(0 0 0 / 45%);
+        --shadow: 0 16px 44px rgb(26 30 48 / 11%);
+      }
+      :root[data-theme="dark"] {
+        color-scheme: dark;
+        --primary: #7c7fff;
+        --primary-hover: #9496ff;
+        --primary-soft: #292b50;
+        --page: #121212;
+        --surface: #1c1c1c;
+        --surface-raised: #252525;
+        --sidebar: #0d0f14;
+        --sidebar-hover: #1d2029;
+        --text: #e0e0e0;
+        --text-secondary: #b2b5bf;
+        --text-tertiary: #7f8491;
+        --border: #30333b;
+        --border-strong: #4a4d57;
+        --hover: #24272e;
+        --mask: rgb(0 0 0 / 62%);
+        --shadow: 0 18px 50px rgb(0 0 0 / 36%);
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        min-width: 320px;
+        min-height: 100%;
+        margin: 0;
+        background: var(--page);
+        color: var(--text);
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+          "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
+        font-size: 14px;
+      }
+      button,
+      input,
+      select,
+      textarea {
+        font: inherit;
+      }
+      button {
+        color: inherit;
+      }
+      button:focus-visible,
+      input:focus-visible,
+      select:focus-visible,
+      textarea:focus-visible,
+      a:focus-visible {
+        outline: 2px solid var(--primary);
+        outline-offset: 2px;
+      }
+      .app {
+        min-height: 100vh;
+        display: grid;
+        grid-template-columns: 224px minmax(0, 1fr);
+      }
+      .sidebar {
+        position: sticky;
+        top: 0;
+        height: 100vh;
+        padding: 18px 12px;
+        overflow-y: auto;
+        background: var(--sidebar);
+        color: #f4f5f8;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        height: 42px;
+        padding: 0 8px;
+        margin-bottom: 22px;
+        font-size: 17px;
+        font-weight: 650;
+      }
+      .brand-mark {
+        width: 30px;
+        height: 30px;
+        display: grid;
+        place-items: center;
+        border-radius: 9px;
+        background: linear-gradient(145deg, #777aff, #4b4fe0);
+        box-shadow: 0 7px 18px rgb(58 62 211 / 35%);
+        font-size: 13px;
+        font-weight: 800;
+      }
+      .nav-label {
+        padding: 0 10px 8px;
+        color: #9296a5;
+        font-size: 12px;
+      }
+      .nav-item {
+        width: 100%;
+        min-height: 42px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 0 12px;
+        border: 0;
+        border-radius: 8px;
+        background: transparent;
+        color: #c9cbd4;
+        cursor: pointer;
+        text-align: left;
+      }
+      .nav-item:hover {
+        background: var(--sidebar-hover);
+      }
+      .nav-item.active {
+        background: rgb(99 102 241 / 22%);
+        color: #ffffff;
+      }
+      .workspace {
+        min-width: 0;
+      }
+      .topbar {
+        height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 22px;
+        border-bottom: 1px solid var(--border);
+        background: var(--surface);
+      }
+      .topbar-actions,
+      .inline-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .tabs {
+        height: 38px;
+        display: flex;
+        align-items: end;
+        gap: 4px;
+        padding: 0 18px;
+        overflow-x: auto;
+        border-bottom: 1px solid var(--border);
+        background: var(--surface);
+      }
+      .tab {
+        height: 32px;
+        display: flex;
+        align-items: center;
+        padding: 0 12px;
+        border: 1px solid var(--border);
+        border-bottom: 0;
+        border-radius: 7px 7px 0 0;
+        color: var(--text-secondary);
+        white-space: nowrap;
+      }
+      .tab.active {
+        color: var(--primary);
+        background: var(--page);
+      }
+      .page {
+        width: min(100%, 1600px);
+        padding: 22px;
+        margin: 0 auto;
+      }
+      .page-header {
+        display: flex;
+        align-items: start;
+        justify-content: space-between;
+        gap: 20px;
+        margin-bottom: 18px;
+      }
+      h1,
+      h2,
+      p {
+        margin: 0;
+      }
+      h1 {
+        margin-bottom: 5px;
+        font-size: 24px;
+        line-height: 1.35;
+      }
+      h2 {
+        font-size: 16px;
+      }
+      .muted {
+        color: var(--text-secondary);
+      }
+      .card {
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        background: var(--surface);
+        box-shadow: 0 1px 2px rgb(22 24 35 / 3%);
+      }
+      .filters {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
+        gap: 12px;
+        padding: 16px;
+        margin-bottom: 14px;
+      }
+      .field {
+        display: grid;
+        gap: 6px;
+      }
+      .field label {
+        color: var(--text-secondary);
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .control {
+        width: 100%;
+        height: 36px;
+        padding: 0 11px;
+        border: 1px solid var(--border-strong);
+        border-radius: 7px;
+        background: var(--surface);
+        color: var(--text);
+      }
+      .button {
+        min-height: 36px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 7px;
+        padding: 0 13px;
+        border: 1px solid var(--border-strong);
+        border-radius: 7px;
+        background: var(--surface);
+        cursor: pointer;
+        white-space: nowrap;
+      }
+      .button:hover {
+        background: var(--hover);
+      }
+      .button.primary {
+        border-color: var(--primary);
+        background: var(--primary);
+        color: #ffffff;
+      }
+      .button.primary:hover {
+        background: var(--primary-hover);
+      }
+      .button.danger {
+        border-color: var(--danger);
+        color: var(--danger);
+      }
+      .filter-actions {
+        align-self: end;
+      }
+      .table-card {
+        overflow: hidden;
+      }
+      .card-toolbar {
+        min-height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--border);
+      }
+      .table-scroll {
+        overflow-x: auto;
+      }
+      table {
+        width: 100%;
+        min-width: 820px;
+        border-collapse: collapse;
+      }
+      th,
+      td {
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--border);
+        text-align: left;
+        white-space: nowrap;
+      }
+      th {
+        background: color-mix(in srgb, var(--surface) 92%, var(--page));
+        color: var(--text-secondary);
+        font-size: 12px;
+        font-weight: 650;
+      }
+      tbody tr:hover {
+        background: var(--hover);
+      }
+      .tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        min-height: 24px;
+        padding: 0 8px;
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--success) 12%, transparent);
+        color: var(--success);
+        font-size: 12px;
+      }
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+      .pagination {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+        padding: 14px 16px;
+        color: var(--text-secondary);
+      }
+      .mask {
+        position: fixed;
+        inset: 0;
+        z-index: 50;
+        display: none;
+        background: var(--mask);
+      }
+      .mask.open {
+        display: block;
+      }
+      .drawer {
+        width: min(560px, 100%);
+        height: 100%;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        margin-left: auto;
+        background: var(--surface-raised);
+        box-shadow: var(--shadow);
+      }
+      .drawer-header,
+      .drawer-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 16px 20px;
+        border-bottom: 1px solid var(--border);
+      }
+      .drawer-footer {
+        justify-content: flex-end;
+        border-top: 1px solid var(--border);
+        border-bottom: 0;
+      }
+      .drawer-body {
+        padding: 20px;
+        overflow-y: auto;
+      }
+      .drawer-form {
+        display: grid;
+        gap: 16px;
+      }
+      .icon-button {
+        width: 36px;
+        height: 36px;
+        display: grid;
+        place-items: center;
+        border: 1px solid var(--border);
+        border-radius: 7px;
+        background: var(--surface);
+        cursor: pointer;
+      }
+      .toast {
+        position: fixed;
+        right: 22px;
+        bottom: 22px;
+        z-index: 80;
+        display: none;
+        align-items: center;
+        gap: 8px;
+        max-width: min(380px, calc(100vw - 32px));
+        padding: 12px 15px;
+        border: 1px solid var(--border);
+        border-radius: 9px;
+        background: var(--surface-raised);
+        box-shadow: var(--shadow);
+      }
+      .toast.open {
+        display: flex;
+      }
+      @media (max-width: 1100px) {
+        .app {
+          grid-template-columns: 72px minmax(0, 1fr);
+        }
+        .brand-name,
+        .nav-label,
+        .nav-text {
+          display: none;
+        }
+        .brand,
+        .nav-item {
+          justify-content: center;
+        }
+        .filters {
+          grid-template-columns: repeat(2, minmax(160px, 1fr));
+        }
+      }
+      @media (max-width: 680px) {
+        .app {
+          display: block;
+        }
+        .sidebar {
+          display: none;
+        }
+        .topbar {
+          height: 52px;
+          padding: 0 14px;
+        }
+        .tabs {
+          padding: 0 12px;
+        }
+        .page {
+          padding: 14px;
+        }
+        .page-header,
+        .card-toolbar {
+          align-items: stretch;
+          flex-direction: column;
+        }
+        .filters {
+          grid-template-columns: 1fr;
+        }
+        .filter-actions,
+        .inline-actions {
+          width: 100%;
+          flex-wrap: wrap;
+        }
+        .filter-actions .button,
+        .page-header > .button {
+          flex: 1;
+        }
+        .drawer {
+          width: 100%;
+        }
+        .toast {
+          right: 16px;
+          bottom: 16px;
+          left: 16px;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
+          scroll-behavior: auto !important;
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- 这是页面骨架。使用时必须替换演示文案、字段、数据和导航。 -->
+    <div class="app">
+      <aside class="sidebar" aria-label="主导航">
+        <div class="brand">
+          <span class="brand-mark">S</span><span class="brand-name">Skyroc Admin</span>
+        </div>
+        <div class="nav-label">当前模块</div>
+        <button class="nav-item active" type="button" aria-current="page">
+          <span aria-hidden="true">◆</span><span class="nav-text">页面名称</span>
+        </button>
+      </aside>
+      <div class="workspace">
+        <header class="topbar">
+          <strong>系统管理</strong>
+          <div class="topbar-actions">
+            <button class="icon-button" id="themeButton" type="button" aria-label="切换明暗主题">
+              ◐
+            </button>
+            <span class="muted">管理员</span>
+          </div>
+        </header>
+        <nav class="tabs" aria-label="已打开页面">
+          <span class="tab">首页</span>
+          <span class="tab active" aria-current="page">页面名称</span>
+        </nav>
+        <main class="page">
+          <header class="page-header">
+            <div>
+              <h1>页面名称</h1>
+              <p class="muted">一句话说明这个页面帮助用户完成什么任务。</p>
+            </div>
+            <button class="button primary" id="openDrawer" type="button">新增记录</button>
+          </header>
+          <section class="card filters" aria-label="查询条件">
+            <div class="field">
+              <label for="keyword">关键词</label>
+              <input class="control" id="keyword" placeholder="请输入关键词" />
+            </div>
+            <div class="field">
+              <label for="status">状态</label>
+              <select class="control" id="status">
+                <option>全部</option>
+                <option>正常</option>
+                <option>停用</option>
+              </select>
+            </div>
+            <div class="field">
+              <label for="createdAt">创建时间</label>
+              <input class="control" id="createdAt" type="date" />
+            </div>
+            <div class="inline-actions filter-actions">
+              <button class="button primary" id="searchButton" type="button">查询</button>
+              <button class="button" id="resetButton" type="button">重置</button>
+            </div>
+          </section>
+          <section class="card table-card">
+            <header class="card-toolbar">
+              <div>
+                <strong>记录列表</strong> <span class="muted" id="resultSummary">共 2 条</span>
+              </div>
+              <div class="inline-actions">
+                <button class="button danger" type="button">批量删除</button>
+                <button class="button" id="refreshButton" type="button">刷新</button>
+              </div>
+            </header>
+            <div class="table-scroll">
+              <table aria-label="记录列表">
+                <thead>
+                  <tr>
+                    <th><input type="checkbox" aria-label="选择当前页记录" /></th>
+                    <th>名称</th>
+                    <th>状态</th>
+                    <th>更新时间</th>
+                    <th>操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td><input type="checkbox" aria-label="选择示例记录一" /></td>
+                    <td>示例记录一</td>
+                    <td>
+                      <span class="tag"><span class="dot"></span>正常</span>
+                    </td>
+                    <td>2026-08-11 10:30</td>
+                    <td>
+                      <div class="inline-actions">
+                        <button class="button editButton" type="button">编辑</button>
+                        <button class="button" type="button">详情</button>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td><input type="checkbox" aria-label="选择示例记录二" /></td>
+                    <td>示例记录二</td>
+                    <td>
+                      <span class="tag"><span class="dot"></span>正常</span>
+                    </td>
+                    <td>2026-08-10 16:20</td>
+                    <td>
+                      <div class="inline-actions">
+                        <button class="button editButton" type="button">编辑</button>
+                        <button class="button" type="button">详情</button>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <footer class="pagination">
+              <span>共 2 条</span><button class="button" type="button">1</button>
+            </footer>
+          </section>
+        </main>
+      </div>
+    </div>
+    <div class="mask" id="drawerMask">
+      <aside class="drawer" role="dialog" aria-modal="true" aria-labelledby="drawerTitle">
+        <header class="drawer-header">
+          <div>
+            <h2 id="drawerTitle">新增记录</h2>
+            <p class="muted">原型不会提交真实数据</p>
+          </div>
+          <button class="icon-button closeDrawer" type="button" aria-label="关闭">×</button>
+        </header>
+        <div class="drawer-body">
+          <form class="drawer-form" id="recordForm">
+            <div class="field">
+              <label for="recordName">名称</label>
+              <input class="control" id="recordName" required />
+            </div>
+            <div class="field">
+              <label for="recordRemark">备注</label>
+              <textarea class="control" id="recordRemark" rows="4"></textarea>
+            </div>
+          </form>
+        </div>
+        <footer class="drawer-footer">
+          <button class="button closeDrawer" type="button">取消</button>
+          <button class="button primary" type="submit" form="recordForm">保存</button>
+        </footer>
+      </aside>
+    </div>
+    <div class="toast" id="toast" role="status" aria-live="polite">演示操作已完成</div>
+    <script>
+      const root = document.documentElement;
+      const drawerMask = document.querySelector("#drawerMask");
+      const drawerTitle = document.querySelector("#drawerTitle");
+      const recordForm = document.querySelector("#recordForm");
+      const recordName = document.querySelector("#recordName");
+      const toast = document.querySelector("#toast");
+      let toastTimer;
+      function openDrawer(mode) {
+        drawerTitle.textContent = mode === "edit" ? "编辑记录" : "新增记录";
+        recordName.value = mode === "edit" ? "示例记录一" : "";
+        drawerMask.classList.add("open");
+        window.setTimeout(() => recordName.focus(), 0);
+      }
+      function closeDrawer() {
+        drawerMask.classList.remove("open");
+      }
+      function showToast(message) {
+        toast.textContent = message;
+        toast.classList.add("open");
+        window.clearTimeout(toastTimer);
+        toastTimer = window.setTimeout(() => toast.classList.remove("open"), 2200);
+      }
+      document.querySelector("#themeButton").addEventListener("click", () => {
+        root.dataset.theme = root.dataset.theme === "dark" ? "light" : "dark";
+      });
+      document.querySelector("#openDrawer").addEventListener("click", () => openDrawer("create"));
+      document.querySelectorAll(".editButton").forEach((button) => {
+        button.addEventListener("click", () => openDrawer("edit"));
+      });
+      document
+        .querySelectorAll(".closeDrawer")
+        .forEach((button) => button.addEventListener("click", closeDrawer));
+      drawerMask.addEventListener("click", (event) => {
+        if (event.target === drawerMask) closeDrawer();
+      });
+      document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && drawerMask.classList.contains("open")) closeDrawer();
+      });
+      recordForm.addEventListener("submit", (event) => {
+        event.preventDefault();
+        if (!recordForm.reportValidity()) return;
+        closeDrawer();
+        showToast("演示保存成功，未提交真实数据");
+      });
+      document
+        .querySelector("#searchButton")
+        .addEventListener("click", () => showToast("已按当前条件更新演示结果"));
+      document.querySelector("#resetButton").addEventListener("click", () => {
+        document.querySelector("#keyword").value = "";
+        document.querySelector("#status").selectedIndex = 0;
+        document.querySelector("#createdAt").value = "";
+        showToast("已重置查询条件");
+      });
+      document
+        .querySelector("#refreshButton")
+        .addEventListener("click", () => showToast("演示数据已刷新"));
+    </script>
+  </body>
+</html>