♻️ refactor(UI): 统一组件样式并重构相关 CSS

Author: iblogc

templates/index.html.j2

@@ -268,6 +268,41 @@
             gap: 2rem;
         }
 
+        /* Unified UI Components */
+        .ui-title {
+            font-family: 'Plus Jakarta Sans', sans-serif;
+            font-weight: 600;
+            word-break: break-all;
+            color: var(--fg);
+        }
+
+        .ui-meta {
+            font-family: 'Space Mono', monospace;
+            font-size: 0.75rem;
+            color: var(--fg-dim);
+        }
+
+        .ui-meta b { color: var(--fg); font-weight: 700; }
+        .ui-meta .accent { color: var(--accent); }
+
+        .ui-stars {
+            color: var(--accent);
+            font-weight: 700;
+        }
+
+        .ui-tag {
+            font-family: 'Space Mono', monospace;
+            font-size: 0.7rem;
+            padding: 0.2rem 0.6rem;
+            border: 1px solid var(--border);
+            text-transform: uppercase;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: var(--surface);
+            transition: var(--transition);
+        }
+
         .repo-card {
             background: var(--surface);
             border: 1px solid var(--border);
@@ -287,18 +322,13 @@
 
         @media (max-width: 600px) {
             .repo-card { padding: 1.5rem; }
-            .card-title { font-size: 1.8rem; }
+            .card-title { font-size: 1.5rem; }
         }
 
         .card-lang {
-            font-family: 'Space Mono', monospace;
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            color: var(--accent);
             margin-bottom: 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
+            color: var(--accent);
+            border-color: var(--accent-soft);
         }
 
         .card-lang::before {
@@ -310,12 +340,9 @@
         }
 
         .card-title {
-            font-family: 'Plus Jakarta Sans', sans-serif;
             font-size: 1.4rem;
-            font-weight: 600;
             margin-bottom: 1rem;
             line-height: 1.3;
-            word-break: break-all;
         }
 
         .card-desc {
@@ -334,14 +361,10 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            font-family: 'Space Mono', monospace;
-            font-size: 0.75rem;
             border-top: 1px solid var(--border);
             padding-top: 1.5rem;
         }
 
-        .card-stars { color: var(--fg); font-weight: 700; }
-
         /* Modal */
         .modal {
             position: fixed;
@@ -389,11 +412,16 @@
         .modal-close:hover { color: var(--accent); }
 
         .modal-title {
-            font-family: 'Plus Jakarta Sans', sans-serif;
             font-size: 2.5rem;
-            font-weight: 600;
             line-height: 1.2;
-            margin-bottom: 2rem;
+            margin-bottom: 1rem;
+        }
+
+        .modal-meta-group {
+            display: flex;
+            gap: 2rem;
+            align-items: center;
+            margin-bottom: 1.5rem;
         }
 
         .modal-section { margin-bottom: 3rem; }
@@ -421,14 +449,11 @@
         .topic-list {
             display: flex;
             flex-wrap: wrap;
-            gap: 0.5rem;
+            gap: 0.6rem;
         }
 
         .topic-tag {
-            font-family: 'Space Mono', monospace;
             font-size: 0.75rem;
-            padding: 0.3rem 0.6rem;
-            border: 1px solid var(--border);
         }
 
         .modal-actions {
@@ -669,11 +694,11 @@
 
             <div class="modal-section modal-header-info">
                 <div>
-                    <div id="m-lang" class="card-lang" style="margin-bottom: 1rem;"></div>
-                    <h2 id="m-name" class="modal-title" style="margin-bottom: 0.5rem;"></h2>
-                    <div style="display: flex; gap: 2rem; align-items: center; margin-bottom: 1.5rem; font-family: 'Space Mono', monospace; font-size: 0.9rem;">
-                        <div id="m-stars" style="color: var(--accent); font-weight: 700; font-size: 1.2rem;"></div>
-                        <div id="m-updated" style="color: var(--fg-dim);"></div>
+                    <div id="m-lang" class="ui-tag card-lang" style="margin-bottom: 1rem;"></div>
+                    <h2 id="m-name" class="ui-title modal-title"></h2>
+                    <div class="modal-meta-group ui-meta">
+                        <div id="m-stars" class="ui-stars" style="font-size: 1rem;"></div>
+                        <div id="m-updated"></div>
                     </div>
                     <div id="m-topics" class="topic-list"></div>
                 </div>
@@ -760,11 +785,11 @@
             const summary = item.summary[currentLang] || item.summary.zh || texts.no_sum;
             
             card.innerHTML = `
-                <div class="card-lang">${item.language || 'DATA'}</div>
-                <h2 class="card-title">${item.full_name}</h2>
+                <div class="card-lang ui-tag">${item.language || 'DATA'}</div>
+                <h2 class="card-title ui-title">${item.full_name}</h2>
                 <p class="card-desc">${summary}</p>
-                <div class="card-footer">
-                    <span class="card-stars">☆ ${item.stars}</span>
+                <div class="card-footer ui-meta">
+                    <span class="ui-stars">☆ ${item.stars}</span>
                     <span>${texts.updated}: ${item.updated_at}</span>
                 </div>
             `;
@@ -841,7 +866,7 @@
             topicsContainer.innerHTML = '';
             (item.topics || []).forEach(t => {
                 const span = document.createElement('span');
-                span.className = 'topic-tag';
+                span.className = 'ui-tag topic-tag';
                 span.textContent = t.toUpperCase();
                 topicsContainer.appendChild(span);
             });
@@ -855,8 +880,9 @@
             
             tags.forEach(t => {
                 const span = document.createElement('span');
-                span.className = 'topic-tag';
+                span.className = 'ui-tag topic-tag';
                 span.style.borderColor = 'var(--accent)';
+                span.style.color = 'var(--accent)';
                 span.textContent = `#${t.toUpperCase()}`;
                 tagsContainer.appendChild(span);
             });