style(skin): 调整长文章页面样式和专栏标签显示

- 将作者信息底部间距从8px调整为4px
- 新增.long-book__column类样式用于专栏标签显示
- 将专栏标签从内联样式改为独立CSS类
- 修改专栏标签HTML结构，使用div替代span元素
- 更新长文章编辑器占位符提示文字

Author: csfwff

src/main/resources/css/index.css

@@ -619,7 +619,7 @@ settingsLabel=\u8bbe\u7f6e
 addArticleLabel=\u6dfb\u52a0\u65b0\u5e16\u5b50
 updateArticleLabel=\u66f4\u65b0\u5e16\u5b50
 addLongArticleLabel=\u957f\u6587\u7ae0
-addLongArticleEditorPlaceholderLabel=\u5f00\u59cb\u4e66\u5199\u4f60\u7684\u957f\u7ae0\u7bc7\u7a74...
+addLongArticleEditorPlaceholderLabel=\u5f00\u59cb\u4e66\u5199\u4f60\u7684\u957f\u7bc7\u6545\u4e8b...
 longArticleLabel=\u957f\u6587\u7ae0
 longArticleTipLabel=\u9002\u5408\u521b\u4f5c\u5c0f\u8bf4\u3001\u957f\u7bc7\u6545\u4e8b\u7b49
 longArticleTypeLabel=\u957f\u6587\u7ae0

src/main/resources/lang_zh_CN.properties

@@ -4410,7 +4410,7 @@ body.night {
 .long-book__author {
   font-size: 12px;
   color: #6b7280;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   display: flex;
   align-items: center;
   gap: 4px;
@@ -4429,6 +4429,26 @@ body.night {
   color: #6b7280;
 }
 
+.long-book__column {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  max-width: 100%;
+  margin: -2px 0 8px;
+  padding: 0 8px;
+  height: 22px;
+  line-height: 22px;
+  border-radius: 11px;
+  background: #eef4ff;
+  color: #2b5db9;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+
 .long-book__summary {
   font-size: 12px;
   line-height: 1.55;

src/main/resources/scss/index.scss

@@ -318,11 +318,10 @@
                             </#if>
                             <div class="long-book__info">
                                 <div class="long-book__title">${article.articleTitleEmoj}</div>
-                                <div class="long-book__author">${article.articleAuthorName}
-                                    <#if article.columnId?? && article.columnId?has_content && article.columnTitle?? && article.columnTitle?has_content>
-                                    <span style="display:inline-block;margin-left:6px;padding:0 6px;border-radius:10px;background:#eef4ff;color:#2b5db9;line-height:18px;vertical-align:middle;cursor:pointer;" onclick="event.preventDefault();event.stopPropagation();window.location.href='${servePath}/column/${article.columnId}';">专栏 · ${article.columnTitle}</span>
-                                    </#if>
-                                </div>
+                                <div class="long-book__author">${article.articleAuthorName}</div>
+                                <#if article.columnId?? && article.columnId?has_content && article.columnTitle?? && article.columnTitle?has_content>
+                                <div class="long-book__column" title="专栏 · ${article.columnTitle}" onclick="event.preventDefault();event.stopPropagation();window.location.href='${servePath}/column/${article.columnId}';">专栏 · ${article.columnTitle}</div>
+                                </#if>
                                 <#if article.articlePreviewContent?has_content && !coverUrl?has_content>
                                 <div class="long-book__summary">${article.articlePreviewContent}</div>
                                 </#if>
@@ -366,11 +365,10 @@
                             </#if>
                             <div class="long-book__info">
                                 <div class="long-book__title">${article.articleTitleEmoj}</div>
-                                <div class="long-book__author">${article.articleAuthorName}
-                                    <#if article.columnId?? && article.columnId?has_content && article.columnTitle?? && article.columnTitle?has_content>
-                                    <span style="display:inline-block;margin-left:6px;padding:0 6px;border-radius:10px;background:#eef4ff;color:#2b5db9;line-height:18px;vertical-align:middle;cursor:pointer;" onclick="event.preventDefault();event.stopPropagation();window.location.href='${servePath}/column/${article.columnId}';">专栏 · ${article.columnTitle}</span>
-                                    </#if>
-                                </div>
+                                <div class="long-book__author">${article.articleAuthorName}</div>
+                                <#if article.columnId?? && article.columnId?has_content && article.columnTitle?? && article.columnTitle?has_content>
+                                <div class="long-book__column" title="专栏 · ${article.columnTitle}" onclick="event.preventDefault();event.stopPropagation();window.location.href='${servePath}/column/${article.columnId}';">专栏 · ${article.columnTitle}</div>
+                                </#if>
                                 <#if article.articlePreviewContent?has_content && !coverUrl?has_content>
                                 <div class="long-book__summary">${article.articlePreviewContent}</div>
                                 </#if>