添加标签和完整元数据显示

列表页： - 显示标签（最多5个） - 显示作者、发布时间、平台、时长 - 显示源链接 - 显示类型（视频/文章） - 平台颜色徽章文章页： - 新增元数据卡片 - 显示所有元数据信息 - 显示所有标签 - 源链接可点击跳转
2026-02-15 21:25:06 +08:00
parent a1598ce243
commit cd38932eb0
3 changed files with 341 additions and 53 deletions
@@ -846,3 +846,189 @@ mark {
    background: rgba(56, 189, 248, 0.3);
    color: var(--text-primary);
 }
+
+/* ============ 文档卡片头部 ============ */
+.doc-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.doc-type {
+    font-size: 16px;
+    opacity: 0.8;
+}
+
+/* ============ 标签样式 ============ */
+.doc-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 10px;
+}
+
+.tag {
+    display: inline-block;
+    padding: 3px 10px;
+    background: rgba(56, 189, 248, 0.1);
+    border: 1px solid rgba(56, 189, 248, 0.3);
+    border-radius: 12px;
+    font-size: 11px;
+    color: var(--accent-cyan);
+    font-family: 'JetBrains Mono', monospace;
+    transition: all 0.2s ease;
+}
+
+.tag:hover {
+    background: rgba(56, 189, 248, 0.2);
+    border-color: var(--accent-cyan);
+}
+
+.tag-more {
+    display: inline-block;
+    padding: 3px 8px;
+    background: rgba(168, 85, 247, 0.1);
+    border-radius: 12px;
+    font-size: 11px;
+    color: var(--accent-purple);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+/* ============ 元数据项 ============ */
+.meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 0;
+}
+
+.platform-badge {
+    padding: 2px 8px;
+    background: color-mix(in srgb, var(--platform-color, #666) 15%, transparent);
+    border: 1px solid color-mix(in srgb, var(--platform-color, #666) 40%, transparent);
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--platform-color, #fff);
+}
+
+.source-link {
+    cursor: pointer;
+    color: var(--accent-cyan);
+    transition: color 0.2s;
+}
+
+.source-link:hover {
+    color: var(--accent-purple);
+}
+
+/* ============ 文章页元数据卡片 ============ */
+.meta-card {
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px 24px;
+    margin-bottom: 24px;
+    animation: fade-up 0.5s ease;
+}
+
+.meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    margin-bottom: 16px;
+}
+
+.meta-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.meta-label {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.meta-value {
+    font-size: 14px;
+    color: var(--text-primary);
+}
+
+.meta-source {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 0;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 16px;
+}
+
+.source-url {
+    color: var(--accent-cyan);
+    text-decoration: none;
+    font-size: 13px;
+    font-family: 'JetBrains Mono', monospace;
+    word-break: break-all;
+    transition: color 0.2s;
+}
+
+.source-url:hover {
+    color: var(--accent-purple);
+    text-decoration: underline;
+}
+
+.meta-tags {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.meta-tags .meta-label {
+    padding-top: 3px;
+}
+
+.tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.tags-list .tag {
+    padding: 4px 12px;
+    font-size: 12px;
+}
+
+/* ============ 响应式补充 ============ */
+@media (max-width: 640px) {
+    .meta-row {
+        flex-direction: column;
+        gap: 16px;
+    }
+    
+    .meta-source {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .meta-tags {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .doc-tags {
+        gap: 4px;
+    }
+    
+    .tag {
+        font-size: 10px;
+        padding: 2px 8px;
+    }
+}