feat(component): add ArticleMetaBar with reading-time estimate and meta icons on article pages

1 month ago · 7522a9f809
4 changed files with 107 additions and 22 deletions
--- a/src/components/ArticleCard.vue
+++ b/src/components/ArticleCard.vue
@ -1,16 +1,11 @@
 <script setup lang="ts">
 import type { ArticleListItem } from '@/generated/api'
+import ArticleMetaBar from '@/components/ArticleMetaBar.vue'

 const props = defineProps<{
  article: ArticleListItem
 }>()

-function formatDate(iso: string): string {
-  const d = new Date(iso)
-  if (isNaN(d.getTime())) return iso
-  return d.toLocaleString('zh-CN', { hour12: false })
-}
-
 function coverSrc(): string | undefined {
  const url = props.article.coverImage
  if (!url) return undefined
@ -27,7 +22,11 @@ function coverSrc(): string | undefined {
      <p v-if="article.summary" class="article-summary">{{ article.summary }}</p>
      <div class="article-meta">
        <span class="meta-author">{{ article.authorName }}</span>
-        <span class="meta-date">{{ formatDate(article.publishedAt || article.createdAt) }}</span>
+        <ArticleMetaBar
+          mode="card"
+          :created-at="article.publishedAt || article.createdAt"
+          :content="article.summary"
+        />
      </div>
      <div class="article-tags">
        <span v-for="tag in article.tagNames" :key="tag" class="tag">{{ tag }}</span>
@ -63,6 +62,8 @@ function coverSrc(): string | undefined {

 .article-title {
  margin: 0 0 8px;
+  font-family: 'Noto Serif SC', 'SimSun', 'STSong', serif;
+  font-weight: 600;
  font-size: 18px;
  color: var(--ac-text);
 }
@ -81,7 +82,7 @@ function coverSrc(): string | undefined {
 }

 .meta-author {
-  color: var(--ac-primary);
+  color: var(--ac-primary-ink);
 }

 .article-tags {
@ -93,7 +94,7 @@ function coverSrc(): string | undefined {
  margin-right: 8px;
  padding: 2px 10px;
  background: var(--ac-primary-bg);
-  color: var(--ac-primary-strong);
+  color: var(--ac-primary-ink);
  border-radius: var(--song-radius-m);
  font-size: 12px;
 }
--- a/src/components/ArticleMetaBar.vue
+++ b/src/components/ArticleMetaBar.vue
@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { estimateReadingTime, formatDay } from '@/utils/readingTime'
+
+const props = withDefaults(
+  defineProps<{
+    createdAt?: string
+    viewCount?: number
+    content?: string
+    mode?: 'card' | 'detail'
+  }>(),
+  { createdAt: '', viewCount: 0, content: '', mode: 'card' }
+)
+
+const day = computed(() => (props.createdAt ? formatDay(props.createdAt) : ''))
+const duration = computed(() => estimateReadingTime(props.content ?? ''))
+const showView = computed(() => props.mode === 'detail')
+</script>
+
+<template>
+  <span class="meta-bar" :class="`meta-bar--${mode}`">
+    <span v-if="day" class="meta-item">
+      <svg class="meta-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <rect x="2" y="3" width="12" height="11" rx="1.5" />
+        <line x1="2" y1="7" x2="14" y2="7" />
+        <line x1="5.5" y1="1.5" x2="5.5" y2="4.5" />
+        <line x1="10.5" y1="1.5" x2="10.5" y2="4.5" />
+      </svg>
+      <span>{{ day }}</span>
+    </span>
+    <span v-if="showView" class="meta-item">
+      <svg class="meta-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M1.5 8C3 5.1 5.3 3.5 8 3.5S13 5.1 14.5 8C13 10.9 10.7 12.5 8 12.5S3 10.9 1.5 8Z" />
+        <circle cx="8" cy="8" r="2.1" />
+      </svg>
+      <span class="tnum">{{ viewCount }}</span>
+    </span>
+    <span v-if="duration" class="meta-item">
+      <svg class="meta-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="8" cy="8" r="6" />
+        <path d="M8 5V8L10 9.2" />
+      </svg>
+      <span>{{ duration }}</span>
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.meta-bar {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 14px;
+  color: var(--ac-text-disabled);
+  font-size: 13px;
+}
+
+.meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.meta-icon {
+  width: 14px;
+  height: 14px;
+  opacity: 0.85;
+}
+
+.meta-bar--card .meta-icon {
+  width: 13px;
+  height: 13px;
+}
+</style>
--- a/src/utils/readingTime.ts
+++ b/src/utils/readingTime.ts
@ -0,0 +1,12 @@
+export function estimateReadingTime(content: string = ''): string {
+  const noWhitespace = content.replace(/\s/g, '').length
+  const minutes = Math.ceil(noWhitespace / 400)
+  return `${minutes} 分钟`
+}
+
+export function formatDay(iso: string): string {
+  const d = new Date(iso)
+  if (isNaN(d.getTime())) return iso
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}
--- a/src/views/ArticleDetailView.vue
+++ b/src/views/ArticleDetailView.vue
@ -6,6 +6,7 @@ import { renderMarkdown } from '@/utils/markdown'
 import { setPageMeta } from '@/utils/seo'
 import { useApi } from '@/composables/useApi'
 import CommentSection from '@/components/CommentSection.vue'
+import ArticleMetaBar from '@/components/ArticleMetaBar.vue'
 import type { ArticleDetail, ResponseArticleDetail } from '@/generated/api'

 const route = useRoute()
@ -22,13 +23,6 @@ const renderedContent = computed(() => {
  return renderMarkdown(article.value.content)
 })

-function formatDate(iso?: string): string {
-  if (!iso) return ''
-  const d = new Date(iso)
-  if (isNaN(d.getTime())) return iso
-  return d.toLocaleString('zh-CN', { hour12: false })
-}
-
 function applyMeta(data: ArticleDetail) {
  setPageMeta({
    title: data.title,
@ -59,8 +53,12 @@ watch(slug, load, { immediate: true })
    <p v-if="article.summary" class="detail-summary">{{ article.summary }}</p>
    <div class="detail-meta">
      <span>作者：{{ article.authorName }}</span>
-      <span>发布于：{{ formatDate(article.publishedAt || article.createdAt) }}</span>
-      <span>浏览：{{ article.viewCount }}</span>
+      <ArticleMetaBar
+        mode="detail"
+        :created-at="article.publishedAt || article.createdAt"
+        :view-count="article.viewCount"
+        :content="article.content"
+      />
    </div>
    <div class="detail-tags">
      <span v-for="tag in article.tagNames" :key="tag" class="tag">{{ tag }}</span>
@ -79,11 +77,11 @@ watch(slug, load, { immediate: true })
 }

 .detail-title {
-  font-family: var(--song-font-display);
-  font-weight: 400;
+  font-family: 'Noto Serif SC', 'SimSun', 'STSong', serif;
+  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
-  font-size: 26px;
+  font-size: 28px;
 }

 .detail-summary {
@ -108,7 +106,7 @@ watch(slug, load, { immediate: true })
  margin-right: 8px;
  padding: 2px 10px;
  background: var(--ac-primary-bg);
-  color: var(--ac-primary-strong);
+  color: var(--ac-primary-ink);
  border-radius: var(--song-radius-m);
  font-size: 12px;
 }