feat: init project with pages and index

2026-02-15 22:50:30 +08:00
commit f407288701
79 changed files with 25642 additions and 0 deletions
--- a/pages/cpl-expiry.html
+++ b/pages/cpl-expiry.html
@@ -0,0 +1,136 @@
+<!-- 到期提醒页 -->
+<style>
+  .cle-status-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;}
+  .cle-status-card{border-radius:var(--g-radius);padding:20px;display:flex;align-items:center;gap:14px;box-shadow:var(--g-shadow-sm);transition:var(--g-transition);}
+  .cle-status-card:hover{box-shadow:var(--g-shadow-md);}
+  .cle-status-card.red{background:#fff1f0;border-left:4px solid var(--g-danger);}
+  .cle-status-card.orange{background:#fff7e6;border-left:4px solid var(--g-warning);}
+  .cle-status-card.green{background:#f6ffed;border-left:4px solid var(--g-success);}
+  .cle-sc-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);}
+  .cle-sc-icon svg{width:22px;height:22px;}
+  .cle-status-card.red .cle-sc-icon svg{color:var(--g-danger);}
+  .cle-status-card.orange .cle-sc-icon svg{color:var(--g-warning);}
+  .cle-status-card.green .cle-sc-icon svg{color:var(--g-success);}
+  .cle-sc-num{font-size:26px;font-weight:700;color:var(--g-text);}
+  .cle-sc-label{font-size:13px;color:var(--g-text-secondary);margin-top:2px;}
+  .cle-section-hd{font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;}
+  .cle-timeline{position:relative;padding-left:20px;}
+  .cle-timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:#e5e7eb;}
+  .cle-tl-item{position:relative;padding:0 0 24px 20px;}
+  .cle-tl-dot{position:absolute;left:-16px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px currentColor;}
+  .cle-tl-item.red .cle-tl-dot{color:var(--g-danger);background:var(--g-danger);}
+  .cle-tl-item.orange .cle-tl-dot{color:var(--g-warning);background:var(--g-warning);}
+  .cle-tl-date{font-size:12px;color:var(--g-text-muted);margin-bottom:6px;}
+  .cle-tl-card{background:#fff;border-radius:var(--g-radius);padding:14px 18px;box-shadow:var(--g-shadow-sm);display:flex;align-items:center;gap:12px;flex-wrap:wrap;transition:var(--g-transition);}
+  .cle-tl-card:hover{box-shadow:var(--g-shadow-md);}
+  .cle-tl-item.red .cle-tl-card{border-left:3px solid var(--g-danger);}
+  .cle-tl-item.orange .cle-tl-card{border-left:3px solid var(--g-warning);}
+  .cle-tl-name{font-size:14px;font-weight:600;color:var(--g-text);}
+  .cle-tl-remain{font-size:13px;font-weight:600;margin-left:auto;}
+  .cle-tl-remain.red{color:var(--g-danger);}
+  .cle-tl-remain.orange{color:var(--g-warning);}
+  .cle-setting-row{display:flex;align-items:center;gap:16px;margin-bottom:14px;font-size:13px;color:var(--g-text);}
+  .cle-setting-row label{min-width:100px;font-weight:500;color:var(--g-text-secondary);}
+  .cle-notify-list{display:flex;flex-direction:column;gap:12px;}
+  .cle-notify-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f3f4f6;}
+  .cle-notify-item:last-child{border-bottom:none;}
+  .cle-notify-label{font-size:13px;color:var(--g-text);}
+  @media(max-width:700px){.cle-status-cards{grid-template-columns:1fr;}}
+</style>
+
+<!-- 状态卡片 -->
+<div class="cle-status-cards">
+  <div class="cle-status-card red">
+    <div class="cle-sc-icon"><i data-lucide="alert-circle"></i></div>
+    <div><div class="cle-sc-num">1</div><div class="cle-sc-label">已过期</div></div>
+  </div>
+  <div class="cle-status-card orange">
+    <div class="cle-sc-icon"><i data-lucide="clock"></i></div>
+    <div><div class="cle-sc-num">3</div><div class="cle-sc-label">30天内到期</div></div>
+  </div>
+  <div class="cle-status-card green">
+    <div class="cle-sc-icon"><i data-lucide="check-circle"></i></div>
+    <div><div class="cle-sc-num">8</div><div class="cle-sc-label">状态正常</div></div>
+  </div>
+</div>
+
+<!-- 即将到期列表 -->
+<div class="g-card" style="margin-bottom:20px;">
+  <div class="cle-section-hd">即将到期项目</div>
+  <div class="cle-timeline">
+    <div class="cle-tl-item red">
+      <div class="cle-tl-dot"></div>
+      <div class="cle-tl-date">到期日：2026-02-10</div>
+      <div class="cle-tl-card">
+        <span class="cle-tl-name">健康证 - 李娜</span>
+        <span class="g-tag g-tag-red">健康证</span>
+        <span class="cle-tl-remain red">已过期 3 天</span>
+        <button class="g-btn g-btn-danger g-btn-sm">去处理</button>
+      </div>
+    </div>
+    <div class="cle-tl-item orange">
+      <div class="cle-tl-dot"></div>
+      <div class="cle-tl-date">到期日：2026-03-15</div>
+      <div class="cle-tl-card">
+        <span class="cle-tl-name">食品经营许可证</span>
+        <span class="g-tag g-tag-orange">证照</span>
+        <span class="cle-tl-remain orange">剩余 30 天</span>
+        <button class="g-btn g-btn-sm">去处理</button>
+      </div>
+    </div>
+    <div class="cle-tl-item orange">
+      <div class="cle-tl-dot"></div>
+      <div class="cle-tl-date">到期日：2026-03-30</div>
+      <div class="cle-tl-card">
+        <span class="cle-tl-name">消防安全检查合格证</span>
+        <span class="g-tag g-tag-orange">证照</span>
+        <span class="cle-tl-remain orange">剩余 45 天</span>
+        <button class="g-btn g-btn-sm">去处理</button>
+      </div>
+    </div>
+    <div class="cle-tl-item orange">
+      <div class="cle-tl-dot"></div>
+      <div class="cle-tl-date">到期日：2026-02-28</div>
+      <div class="cle-tl-card">
+        <span class="cle-tl-name">花生油 批次BN20260110</span>
+        <span class="g-tag g-tag-blue">食材</span>
+        <span class="cle-tl-remain orange">剩余 15 天</span>
+        <button class="g-btn g-btn-sm">去处理</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 提醒设置 -->
+<div class="g-card">
+  <div class="cle-section-hd">提醒设置</div>
+  <div class="cle-setting-row">
+    <label>提前提醒天数</label>
+    <select class="g-select" style="width:140px;">
+      <option>7 天</option>
+      <option>15 天</option>
+      <option selected>30 天</option>
+      <option>60 天</option>
+    </select>
+  </div>
+  <div class="g-divider" style="margin:12px 0;"></div>
+  <div class="cle-notify-list">
+    <div class="cle-notify-item">
+      <span class="cle-notify-label">站内通知</span>
+      <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-thumb"></div></div>
+    </div>
+    <div class="cle-notify-item">
+      <span class="cle-notify-label">微信推送</span>
+      <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-thumb"></div></div>
+    </div>
+    <div class="cle-notify-item">
+      <span class="cle-notify-label">短信通知</span>
+      <div class="g-toggle" onclick="toggleSwitch(this)"><div class="g-toggle-thumb"></div></div>
+    </div>
+  </div>
+</div>
+
+<script>
+function toggleSwitch(el){el.classList.toggle('on');}
+if(typeof lucide!=='undefined'){lucide.createIcons();}
+</script>