style(web): 改暖色木色调,跟 Android 端对齐

Web 端原本是冷色蓝调(#2080f0 + #fafbfc),
Android 端已经是暖色木色(#8B6B45 + #F5E9D0),两端不一致。

统一到暖色木色调(跟 logo "D" 木质方块的视觉延伸):

style.css 重写:
- CSS 变量: --color-primary #8B6B45, --color-bg #F5E9D0 等
- 字体栈: serif 用于标题(Georgia / Songti), sans-serif 用于正文
- 卡片: 圆角 12px, 边框 + 浅阴影, hover 浮起 1px
- 滚动条: 木色风格
- 按钮 / 分页 / TopBar 主题色统一

Feed.vue:
- 中文标题字体 18px -> 20px, 字重 600 -> 700
- 原标题字号 13, 颜色淡木色
- 插图圆角 4px -> 8px, 高度自适应 max 280px
- 评论钩子: 淡木色背景 + 木色左边框 3px(与 Android 一致)
- 标签全部用 round

ArticleDetail.vue:
- 中文主标题大字号, 衬线粗体
- 原标题灰色辅助
- 操作按钮全部 round
- 卡片标题统一用 serif

Login.vue:
- 登录卡 圆角 16px, 木色渐变背景
- 标题用 serif, 按钮 round

未提交 Android 端改动 — 在 D:/selftools/diary-news-android/ 独立目录,
会重新 build APK 后单独交付。

frontend/src/views/Feed.vue

@@ -115,9 +115,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <NSpace vertical>
+  <NSpace vertical :size="16">
     <NSpace align="center" justify="space-between">
-      <NSpace>
+      <NSpace :size="10">
         <NSelect
           v-model:value="sourceFilter"
           multiple
@@ -127,11 +127,11 @@ onMounted(async () => {
           style="min-width: 240px"
           @update:value="resetToFirstPage"
         />
-        <NInput v-model:value="q" placeholder="关键词搜索" clearable style="width: 200px"
+        <NInput v-model:value="q" placeholder="关键词搜索" clearable style="width: 220px"
                 @keyup.enter="resetToFirstPage" @clear="resetToFirstPage" />
-        <NButton @click="resetToFirstPage">刷新</NButton>
+        <NButton type="primary" @click="resetToFirstPage">刷新</NButton>
       </NSpace>
-      <NText depth="3">{{ itemsLabel }}</NText>
+      <NText :depth="3" style="font-size: 13px">{{ itemsLabel }}</NText>
     </NSpace>
 
     <NSpin :show="loading && items.length === 0">
@@ -145,11 +145,16 @@ onMounted(async () => {
           hoverable
           @click="open(a)"
         >
-          <NSpace vertical :size="6">
-            <NSpace align="center" :size="8">
-              <NTag size="small" type="info">{{ a.source.name }}</NTag>
-              <NTag v-if="a.lang_src" size="small">{{ a.lang_src }}</NTag>
-              <NTag v-if="a.translation_status !== 'ok'" size="small" type="warning">
+          <NSpace vertical :size="10">
+            <!-- 顶行:源 / 语言 / 分类 tag / 时间 -->
+            <NSpace align="center" :size="6" :wrap="false" style="overflow: hidden">
+              <NTag size="small" type="primary" :bordered="false" round>
+                {{ a.source.name }}
+              </NTag>
+              <NTag v-if="a.lang_src" size="small" round :bordered="false">
+                {{ a.lang_src.toUpperCase() }}
+              </NTag>
+              <NTag v-if="a.translation_status !== 'ok'" size="small" type="warning" :bordered="false" round>
                 {{ a.translation_status }}
               </NTag>
               <NTag
@@ -157,77 +162,88 @@ onMounted(async () => {
                 :key="c"
                 size="small"
                 type="success"
+                :bordered="false"
+                round
               >
                 {{ c }}
               </NTag>
-              <NText depth="3" style="font-size: 12px">{{ fmtTime(a.published_at || a.fetched_at) }}</NText>
+              <NText :depth="3" style="font-size: 12px; margin-left: auto">
+                {{ fmtTime(a.published_at || a.fetched_at) }}
+              </NText>
             </NSpace>
 
-            <!-- 原标题(灰色,辅助) -->
-            <div style="font-size: 13px; color: #999; line-height: 1.4;">
-              {{ a.title }}
-            </div>
-            <!-- 中文标题(主标题) -->
-            <div v-if="a.title_zh" style="font-size: 18px; font-weight: 600; color: #333; line-height: 1.4;">
+            <!-- 中文标题(主) -->
+            <div
+              v-if="a.title_zh"
+              style="
+                font-family: var(--font-serif);
+                font-size: 20px;
+                font-weight: 700;
+                color: var(--color-letter);
+                line-height: 1.4;
+              "
+            >
               {{ a.title_zh }}
             </div>
 
+            <!-- 原标题(灰色,辅助) -->
+            <div
+              v-if="a.title"
+              style="font-size: 13px; color: var(--color-text-faint); line-height: 1.4;"
+            >
+              {{ a.title }}
+            </div>
+
             <!-- AI 插图(若有) -->
             <img
               v-if="a.image_ai_url || a.image_url"
               :src="a.image_ai_url || a.image_url || ''"
               style="
                 display: block;
-                max-width: 100%;
+                width: 100%;
                 max-height: 280px;
                 object-fit: cover;
-                border-radius: 4px;
+                border-radius: 8px;
                 margin: 4px 0;
+                background: var(--color-surface-variant);
               "
               referrerpolicy="no-referrer"
               loading="lazy"
             />
 
-            <!-- 翻译后正文摘要(列表钩子,详情页有完整版) -->
+            <!-- 翻译后正文摘要 -->
             <div
               v-if="a.body_zh_text || a.summary_zh"
               style="
-                margin-top: 6px;
-                color: #444;
+                margin-top: 4px;
+                color: var(--color-letter);
                 font-size: 14px;
-                line-height: 1.7;
+                line-height: 1.75;
               "
             >
               {{ bodyExcerpt(a.body_zh_text || a.summary_zh, 220) }}
             </div>
 
-            <!-- 评论预览 -->
+            <!-- 评论钩子(淡木色背景 + 木色左边框,与 Android 对齐) -->
             <div
               v-if="a.commentary"
-              style="
-                margin-top: 8px;
-                padding: 8px 10px;
-                background: #f6f8ff;
-                border-left: 3px solid #2080f0;
-                border-radius: 4px;
-                color: #444;
-                font-size: 13px;
-                line-height: 1.6;
-              "
+              class="commentary-box"
             >
-              <NSpace align="center" :size="6" style="margin-bottom: 4px">
-                <NText depth="2" style="font-size: 12px; font-weight: 600">💬 评论</NText>
-                <NTag size="tiny" :type="commentaryStatusType(a.commentary_status)">
+              <NSpace align="center" :size="6" style="margin-bottom: 6px">
+                <span class="commentary-label">💬 评论</span>
+                <NTag size="tiny" :type="commentaryStatusType(a.commentary_status)" round :bordered="false">
                   {{ a.commentary_status || 'n/a' }}
                 </NTag>
               </NSpace>
-              <span>{{ previewCommentary(a.commentary, 140) }}</span>
+              <div class="commentary-text">
+                {{ previewCommentary(a.commentary, 140) }}
+              </div>
             </div>
           </NSpace>
         </NCard>
 
-        <!-- 页码分页(替代无限滚动) -->
-        <NSpace v-if="total > 0" justify="center" style="margin: 24px 0 16px">
+        <!-- 页码分页 -->
+        <NSpace v-if="total > 0" justify="center" style="margin: 32px 0 24px">
           <NPagination
             v-model:page="page"
             :page-count="totalPages"
@@ -236,8 +252,34 @@ onMounted(async () => {
             @update:page="onPageChange"
           />
         </NSpace>
-        <NText v-else depth="3" style="display:block; text-align:center; padding: 16px">— 暂无数据 —</NText>
+        <NText v-else :depth="3" style="display:block; text-align:center; padding: 16px">— 暂无数据 —</NText>
       </div>
     </NSpin>
   </NSpace>
 </template>
+
+<style scoped>
+/* 评论钩子(项目级统一样式,与 Android ArticleCard.kt 的 CommentaryBox 对齐) */
+.commentary-box {
+  margin-top: 10px;
+  padding: 12px 14px;
+  background: var(--color-primary-soft);
+  border-left: 3px solid var(--color-primary);
+  border-radius: 6px;
+  color: var(--color-letter);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.commentary-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.commentary-text {
+  color: var(--color-letter);
+  font-size: 13px;
+  line-height: 1.7;
+}
+</style>