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,7 +87,8 @@ 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>
+      <span class="detail-author">作者：{{ article.authorName }}</span>
+      <div class="detail-meta-row">
         <ArticleMetaBar
           mode="detail"
           :created-at="article.publishedAt || article.createdAt"
@@ -101,6 +102,7 @@ watch(slug, load, { immediate: true })
           <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>
     </div>
@@ -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;
 }