feat: init project with pages and index

pages/sys-billing.html

@@ -0,0 +1,125 @@
+<!-- 账单记录 -->
+<style>
+  .sbi-page { display:flex; flex-direction:column; gap:16px; }
+
+  /* 筛选栏 */
+  .sbi-filter { display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:14px 20px; }
+  .sbi-filter-right { margin-left:auto; }
+
+  /* 表格容器 */
+  .sbi-table-wrap { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:0; overflow:hidden; }
+  .sbi-table-wrap .g-table { margin:0; }
+  .sbi-table-wrap .g-table th:first-child,
+  .sbi-table-wrap .g-table td:first-child { padding-left:20px; }
+  .sbi-table-wrap .g-table th:last-child,
+  .sbi-table-wrap .g-table td:last-child { padding-right:20px; }
+  .sbi-mono { font-family:'SF Mono','Cascadia Code','Consolas',monospace; font-size:12px; letter-spacing:0.3px; }
+  .sbi-amount { font-weight:600; color:var(--g-text); }
+
+  /* 分页容器 */
+  .sbi-pagi { display:flex; justify-content:flex-end; padding:0 4px; }
+</style>
+
+<div class="sbi-page">
+  <!-- 筛选栏 -->
+  <div class="sbi-filter">
+    <select class="g-select" style="width:120px;">
+      <option>2026年</option>
+      <option>2025年</option>
+      <option>2024年</option>
+    </select>
+    <select class="g-select" style="width:140px;">
+      <option>全部类型</option>
+      <option>新购</option>
+      <option>续费</option>
+      <option>升级</option>
+      <option>增值包</option>
+    </select>
+    <div class="sbi-filter-right">
+      <button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>导出</button>
+    </div>
+  </div>
+
+  <!-- 表格 -->
+  <div class="sbi-table-wrap">
+    <table class="g-table">
+      <thead>
+        <tr>
+          <th>账单编号</th>
+          <th>日期</th>
+          <th>类型</th>
+          <th>套餐 / 项目</th>
+          <th>金额</th>
+          <th>支付方式</th>
+          <th>状态</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><span class="sbi-mono">BIL20260213001</span></td>
+          <td>2026-02-13</td>
+          <td><span class="g-tag g-tag-green">续费</span></td>
+          <td>专业版（1年）</td>
+          <td><span class="sbi-amount">¥4,980.00</span></td>
+          <td>微信支付</td>
+          <td><span class="g-tag g-tag-green">已支付</span></td>
+          <td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
+        </tr>
+        <tr>
+          <td><span class="sbi-mono">BIL20250801001</span></td>
+          <td>2025-08-01</td>
+          <td><span class="g-tag g-tag-orange">升级</span></td>
+          <td>基础版→专业版（补差价）</td>
+          <td><span class="sbi-amount">¥2,400.00</span></td>
+          <td>支付宝</td>
+          <td><span class="g-tag g-tag-green">已支付</span></td>
+          <td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
+        </tr>
+        <tr>
+          <td><span class="sbi-mono">BIL20250501001</span></td>
+          <td>2025-05-01</td>
+          <td><span class="g-tag g-tag-gray">增值包</span></td>
+          <td>短信包 5000条</td>
+          <td><span class="sbi-amount">¥200.00</span></td>
+          <td>微信支付</td>
+          <td><span class="g-tag g-tag-green">已支付</span></td>
+          <td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
+        </tr>
+        <tr>
+          <td><span class="sbi-mono">BIL20250213001</span></td>
+          <td>2025-02-13</td>
+          <td><span class="g-tag g-tag-blue">新购</span></td>
+          <td>基础版（1年）</td>
+          <td><span class="sbi-amount">¥1,980.00</span></td>
+          <td>微信支付</td>
+          <td><span class="g-tag g-tag-green">已支付</span></td>
+          <td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
+        </tr>
+        <tr>
+          <td><span class="sbi-mono">BIL20250213002</span></td>
+          <td>2025-02-13</td>
+          <td><span class="g-tag g-tag-gray">增值包</span></td>
+          <td>额外存储 5GB</td>
+          <td><span class="sbi-amount">¥300.00</span></td>
+          <td>支付宝</td>
+          <td><span class="g-tag g-tag-green">已支付</span></td>
+          <td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- 分页 -->
+  <div class="sbi-pagi">
+    <div class="g-pagination">
+      <button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
+      <button class="g-page-btn active">1</button>
+      <button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
+    </div>
+  </div>
+</div>
+
+<script>
+if(typeof lucide!=='undefined'){lucide.createIcons();}
+</script>