面板

2026-04-20 14:16:09 +08:00
parent ee9cc6f429
commit 564042a8cc
14 changed files with 1401 additions and 86 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>sub-provider admin</title>
+  <style>
+    :root {
+      --bg: #f3efe6;
+      --panel: #fffdf8;
+      --ink: #1f2a2e;
+      --muted: #66757f;
+      --line: #d7ccbb;
+      --accent: #b8542a;
+      --accent-soft: #f0d7c5;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "Segoe UI", "PingFang SC", sans-serif;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at top left, #f7d9c5, transparent 28%),
+        radial-gradient(circle at bottom right, #dce8da, transparent 22%),
+        var(--bg);
+    }
+    a { color: inherit; }
+    .shell {
+      max-width: 1320px;
+      margin: 0 auto;
+      padding: 24px;
+      display: grid;
+      grid-template-columns: 240px minmax(0, 1fr);
+      gap: 24px;
+    }
+    .nav, .panel {
+      background: rgba(255, 253, 248, 0.92);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--line);
+      border-radius: 24px;
+      box-shadow: 0 20px 40px rgba(31, 42, 46, 0.08);
+    }
+    .nav { padding: 18px; align-self: start; position: sticky; top: 18px; }
+    .brand { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
+    .nav a {
+      display: block;
+      text-decoration: none;
+      padding: 10px 12px;
+      border-radius: 12px;
+      margin-bottom: 8px;
+    }
+      .nav a.active {
+      background: var(--accent);
+      color: #fff;
+    }
+    .nav form { margin-top: 18px; }
+    .panel { padding: 24px; }
+    h1, h2 { margin-top: 0; }
+    .muted { color: var(--muted); }
+    .stack { display: grid; gap: 20px; }
+    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+    .card {
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      padding: 18px;
+      background: var(--panel);
+    }
+    label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
+    input, select, textarea {
+      width: 100%;
+      padding: 10px 12px;
+      border-radius: 12px;
+      border: 1px solid var(--line);
+      background: #fff;
+      color: var(--ink);
+    }
+    textarea { min-height: 140px; resize: vertical; }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
+    th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
+    .actions { display: flex; gap: 10px; flex-wrap: wrap; }
+    button, .button {
+      border: 0;
+      border-radius: 999px;
+      padding: 10px 16px;
+      font-weight: 600;
+      cursor: pointer;
+      background: var(--accent);
+      color: #fff;
+      text-decoration: none;
+      display: inline-block;
+    }
+    .button.secondary, button.secondary {
+      background: var(--accent-soft);
+      color: var(--ink);
+    }
+    .flash {
+      padding: 12px 14px;
+      border-radius: 14px;
+      border: 1px solid var(--line);
+      margin-bottom: 18px;
+    }
+    .flash.success { background: #e8f3e6; border-color: #b7d3b1; }
+    .flash.error { background: #f7dfdb; border-color: #ddb0a7; }
+    .inline { display: inline-flex; align-items: center; gap: 8px; }
+    .wide { width: 100%; min-height: 65vh; font-family: Consolas, monospace; }
+    @media (max-width: 920px) {
+      .shell { grid-template-columns: 1fr; }
+      .nav { position: static; }
+      .grid-2 { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <nav class="nav">
+      <div class="brand">sub-provider</div>
+      {% if authenticated %}
+      <a href="/admin/sources" class="{% if active == 'sources' %}active{% endif %}">Sources</a>
+      <a href="/admin/profiles" class="{% if active == 'profiles' %}active{% endif %}">Profiles</a>
+      {% if auth_enabled %}
+      <form method="post" action="/admin/logout">
+        <button type="submit" class="secondary" style="width:100%;">Logout</button>
+      </form>
+      {% endif %}
+      {% endif %}
+    </nav>
+    <main class="panel">
+      {% if flash %}
+      <div class="flash {{ flash.level }}">{{ flash.message }}</div>
+      {% endif %}
+      {% block content %}{% endblock %}
+    </main>
+  </div>
+</body>
+</html>