refactor: remove duplicated route and UI code

templates/base.html

@@ -4,146 +4,7 @@
   <title>{% block title %}供水管道健康评估系统{% endblock %}</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@700;800&display=swap" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            primary: '#005EB8',
-            primaryDeep: '#0c4188',
-            page: '#f3f5f8',
-            card: '#ffffff',
-            line: '#e2e8f0',
-            textMain: '#0f172a',
-            textSub: '#64748b',
-            blueSoft: '#eaf3ff',
-            outline: '#c7ced8',
-            successSoft: '#e9f8ee',
-            successText: '#16a34a',
-            dangerSoft: '#fff0f0',
-            dangerText: '#dc2626'
-          },
-          fontFamily: {
-            headline: ['Manrope', 'Inter', 'sans-serif'],
-            body: ['Inter', 'sans-serif']
-          },
-          boxShadow: {
-            soft: '0 18px 34px rgba(15, 23, 42, .06)',
-            panel: '0 1px 2px rgba(15, 23, 42, .04)'
-          }
-        }
-      }
-    }
-  </script>
-  <style>
-    body { font-family: 'Inter', sans-serif; }
-    h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', sans-serif; }
-    .material-symbols-outlined {
-      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-      vertical-align: middle;
-    }
-    .ui-btn {
-      box-sizing: border-box;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: .5rem;
-      min-height: 44px;
-      height: 44px;
-      border-radius: .375rem;
-      border: 1px solid transparent;
-      padding: 0 1rem;
-      font-size: .875rem;
-      font-weight: 700;
-      line-height: 1;
-      white-space: nowrap;
-      transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
-    }
-    .ui-btn-sm {
-      min-height: 40px;
-      height: 40px;
-      padding: 0 .75rem;
-    }
-    .ui-btn-primary {
-      background: #005EB8;
-      color: #fff;
-      box-shadow: 0 18px 34px rgba(15, 23, 42, .06);
-    }
-    .ui-btn-primary:hover { background: #0c4188; }
-    .ui-btn-secondary {
-      border-color: #e2e8f0;
-      background: #fff;
-      color: #334155;
-      box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
-    }
-    .ui-btn-secondary:hover {
-      border-color: #005EB8;
-      color: #005EB8;
-    }
-    .ui-btn:disabled,
-    .ui-btn[aria-disabled="true"] {
-      cursor: not-allowed;
-      box-shadow: none;
-      opacity: .7;
-    }
-    .ui-btn-primary:disabled { background: #cbd5e1; }
-    .ui-btn-icon,
-    .ui-btn .material-symbols-outlined {
-      display: inline-flex;
-      width: 20px;
-      height: 20px;
-      flex: 0 0 20px;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-      line-height: 1;
-    }
-    .ui-icon-btn {
-      box-sizing: border-box;
-      display: inline-flex;
-      width: 28px;
-      height: 28px;
-      flex: 0 0 28px;
-      align-items: center;
-      justify-content: center;
-      border-radius: .375rem;
-      line-height: 1;
-      transition: background-color .15s ease, color .15s ease;
-    }
-    .ui-action-row {
-      box-sizing: border-box;
-      display: flex;
-      min-height: 44px;
-      align-items: center;
-      justify-content: space-between;
-      gap: .75rem;
-      border-radius: .375rem;
-      border: 1px solid #e2e8f0;
-      padding: 0 .75rem;
-      font-size: .875rem;
-      font-weight: 700;
-      line-height: 1;
-      transition: border-color .15s ease, color .15s ease;
-    }
-    .ui-action-row:hover {
-      border-color: #005EB8;
-      color: #005EB8;
-    }
-    .spinner {
-      display: inline-flex;
-      width: 20px;
-      height: 20px;
-      flex: 0 0 20px;
-      border-radius: 9999px;
-      border: 2px solid rgba(255,255,255,.35);
-      border-top-color: #fff;
-      animation: spin .75s linear infinite;
-    }
-    @keyframes spin { to { transform: rotate(360deg); } }
-  </style>
+  <link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet" />
   {% block head_extra %}{% endblock %}
 </head>
 <body class="flex min-h-screen flex-col bg-page text-textMain antialiased">
@@ -206,6 +67,9 @@
   <script>
     window.__flashMessages = {{ flashed_messages|tojson }};
   </script>
+  <div class="sr-only" aria-hidden="true">
+    {% for category, message in flashed_messages %}{{ message }}{% endfor %}
+  </div>
   {% endwith %}
 
   <main class="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">