✨ 添加 topic

src/assets/themes/dark.css

@@ -1,8 +1,7 @@
 /**
- * @file assets themes dark.css
+ * @file assets/themes/dark.css
  * @description 主题样式文件-深色主题
- * @author BTMuli <bt-muli@outlook.com>
- * @since Beta v0.3.0
+ * @since Beta v0.3.9
  */
 
 /* dark mode */
@@ -27,6 +26,7 @@ html.dark {
   --box-text-2: var(--tgc-white-2);
   --box-text-3: var(--tgc-blue-1);
   --box-text-4: var(--tgc-white-4);
+  --box-text-5: var(--tgc-red-1);
   --box-text-7: var(--tgc-white-5);
 
   /* button */

src/assets/themes/default.css

@@ -1,7 +1,7 @@
 /**
- * @file assets themes default.css
+ * @file assets/themes/default.css
  * @description 主题样式文件-默认（浅色）主题
- * @since Beta v0.3.3
+ * @since Beta v0.3.9
  */
 
 /* default(light) theme */
@@ -26,6 +26,7 @@ html.default {
   --box-text-2: var(--tgc-dark-2);
   --box-text-3: var(--tgc-blue-2);
   --box-text-4: var(--tgc-blue-3); /* subtitle */
+  --box-text-5: var(--tgc-pink-1); /* tag */
   --box-text-7: var(--tgc-dark-7); /* quote */
 
   /* button */

src/views/t-post.vue

@@ -69,7 +69,10 @@
         <span>{{ postData.collection.collection_title }}</span>
         <span>{{ postData.collection.cur }}/{{ postData.collection.total }}</span>
       </div>
-      <!-- todo topic -->
+      <div v-for="topic in postData.topics" :key="topic.id" class="tp-post-topic">
+        <v-icon size="12">mdi-tag</v-icon>
+        <span>{{ topic.name }}</span>
+      </div>
     </div>
     <div class="tp-post-subtitle">
       <span>创建时间：{{ getDate(postData.post.created_at) }}&emsp;</span>
@@ -247,6 +250,9 @@ async function toAuthor(): Promise<void> {
 
 /* title */
 .tp-post-title {
+  display: flex;
+  align-items: center;
+  justify-content: start;
   color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
@@ -254,13 +260,14 @@ async function toAuthor(): Promise<void> {
 
 .mpt-official {
   display: inline-block;
-  width: 30px;
+  width: 24px;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
   margin-right: 2px;
   background: var(--common-shadow-1);
-  color: var(--box-text-3);
+  color: var(--box-text-5);
+  font-size: 16px;
   text-align: center;
 }
 
@@ -417,4 +424,14 @@ async function toAuthor(): Promise<void> {
   font-family: var(--font-title);
   font-size: 12px;
 }
+
+/* topic */
+.tp-post-topic {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--box-text-5);
+  font-family: var(--font-title);
+  font-size: 12px;
+}
 </style>