feat: add username

src/.vitepress/components/Message.vue

@@ -21,7 +21,7 @@ const messageType = computed(() => {
   return type_
 })
 
-const extraClasses = computed(() => {
+const extraLiClasses = computed(() => {
   const type_ = messageType.value
   if (type_ === 'left') {
     return {
@@ -34,13 +34,29 @@ const extraClasses = computed(() => {
     }
   }
 })
+
+const extraMessageDivClasses = computed(() => {
+  const type_ = messageType.value
+  if (type_ === 'left') {
+    return {
+      'items-start': true,
+    }
+  } else {
+    return {
+      'items-end': true,
+    }
+  }
+})
 </script>
 
 <template>
-  <li class="flex items-center" :class="extraClasses">
-    <img v-if="avatarUrl" :src="avatarUrl" alt="author image" class="w-10 h-10 rounded-md" />
-    <div class="inline-block bg-slate-200 px-2 py-2 rounded-md mx-2 dark:bg-zinc-700">
-      <slot></slot>
+  <li class="flex items-start space-y-2" :class="extraLiClasses">
+    <img v-if="avatarUrl" :src="avatarUrl" alt="author image" class="w-10 h-10 rounded-md m-0" />
+    <div class="flex flex-col px-3 !mt-0" :class="extraMessageDivClasses">
+      <span class="text-neutral-500 dark:text-neutral-400">{{ name }}</span>
+      <div class="inline-block bg-slate-200 px-2 py-2 rounded-md dark:bg-zinc-700">
+        <slot></slot>
+      </div>
     </div>
   </li>
 </template>

src/posts/shun-story.md

@@ -11,7 +11,7 @@ co_authors:
      github: megemini
 ---
 
-**【开源江湖闲聊录】** 是一项专门为Paddle社区的开发者打造的特色访谈栏目📚。在这里，我们邀请到每一位别具一格且富有热情的开发者，通过文字或语音的方式进行深入采访 🎙️，探索并展现他们背后独一无二的故事，将他们的经历、见解和创意整理成精彩内容，呈现给整个社区。
+**【开源江湖闲聊录】** 是一项专门为 Paddle 社区的开发者打造的特色访谈栏目📚。在这里，我们邀请到每一位别具一格且富有热情的开发者，通过文字或语音的方式进行深入采访 🎙️，探索并展现他们背后独一无二的故事，将他们的经历、见解和创意整理成精彩内容，呈现给整个社区。
 
 ---