fix(page): article meta on two lines, chat icon button

src/components/CommentSection.vue

@@ -155,7 +155,12 @@ onMounted(() => {
 
     <div class="comment-write">
       <p v-if="submitMessage" class="success-text">{{ submitMessage }}</p>
-      <SongButton v-if="!formOpen" type="secondary" size="medium" @click="openForm">✎ 发表评论</SongButton>
+      <SongButton v-if="!formOpen" type="secondary" size="medium" @click="openForm">
+        <svg class="comment-write-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+        <span>发表评论</span>
+      </SongButton>
       <transition name="form-fade">
         <form v-if="formOpen" class="comment-form" @submit.prevent="onSubmit">
           <p v-if="error" class="error-text">{{ error }}</p>
@@ -287,6 +292,10 @@ onMounted(() => {
   gap: 10px;
 }
 
+.comment-write-icon {
+  flex-shrink: 0;
+}
+
 .comment-form {
   width: 100%;
   background: var(--ac-bg-card);

src/views/ArticleDetailView.vue

@@ -87,19 +87,21 @@ watch(slug, load, { immediate: true })
     <h1 class="detail-title">{{ article.title }}</h1>
     <p v-if="article.summary" class="detail-summary">{{ article.summary }}</p>
     <div class="detail-meta">
-      <span>作者：{{ article.authorName }}</span>
-      <ArticleMetaBar
-        mode="detail"
-        :created-at="article.publishedAt || article.createdAt"
-        :view-count="article.viewCount"
-        :content="article.content"
-      />
-      <button class="star-btn" :class="{ starred }" @click="toggleStar">
-        <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
-          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/>
-        </svg>
-        <span class="star-count">{{ starCount }}</span>
-      </button>
+      <span class="detail-author">作者：{{ article.authorName }}</span>
+      <div class="detail-meta-row">
+        <ArticleMetaBar
+          mode="detail"
+          :created-at="article.publishedAt || article.createdAt"
+          :view-count="article.viewCount"
+          :content="article.content"
+        />
+        <button class="star-btn" :class="{ starred }" @click="toggleStar">
+          <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/>
+          </svg>
+          <span class="star-count">{{ starCount }}</span>
+        </button>
+      </div>
     </div>
     <div class="detail-tags">
       <span v-for="tag in article.tagNames" :key="tag" class="tag">{{ tag }}</span>
@@ -133,12 +135,24 @@ watch(slug, load, { immediate: true })
 
 .detail-meta {
   display: flex;
-  gap: 20px;
+  flex-direction: column;
+  gap: 6px;
   color: var(--ac-text-disabled);
   font-size: 13px;
   margin: 12px 0;
 }
 
+.detail-author {
+  color: var(--ac-text-secondary);
+}
+
+.detail-meta-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+}
+
 .detail-tags {
   margin-bottom: 16px;
 }