feat(me/profile): bio markdown editor in modal with truncated preview

Made-with: Cursor

app/pages/me/profile/index.vue

@@ -43,6 +43,33 @@ const message = ref('')
 const avatarFileInput = ref<HTMLInputElement | null>(null)
 const headerIconFileInput = ref<HTMLInputElement | null>(null)
 
+const BIO_PREVIEW_MAX_CHARS = 200
+const bioModalOpen = ref(false)
+const bioDraft = ref('')
+
+function truncateBioSource(md: string): string {
+  const s = md.trim()
+  if (!s) {
+    return ''
+  }
+  if (s.length <= BIO_PREVIEW_MAX_CHARS) {
+    return s
+  }
+  return `${s.slice(0, BIO_PREVIEW_MAX_CHARS)}…`
+}
+
+const bioPreviewTruncated = computed(() => truncateBioSource(state.bioMarkdown))
+
+function openBioModal() {
+  bioDraft.value = state.bioMarkdown
+  bioModalOpen.value = true
+}
+
+function applyBioFromModal(close: () => void) {
+  state.bioMarkdown = bioDraft.value
+  close()
+}
+
 function openAvatarPicker() {
   avatarFileInput.value?.click()
 }
@@ -279,8 +306,21 @@ async function save() {
           ]"
         />
       </UFormField>
-      <UFormField label="生平 / 简介（Markdown）" name="bioMarkdown">
+      <UFormField
-        <UTextarea v-model="state.bioMarkdown" autoresize :rows="6" class="w-full" />
+        label="生平 / 简介（Markdown）"
+        name="bioMarkdown"
+        description="在弹窗中使用 Markdown 编辑器修改；下方仅展示原文前若干字的截断预览。"
+      >
+        <div class="space-y-2 rounded-lg border border-default bg-elevated/30 p-3">
+          <p
+            class="max-h-32 overflow-y-auto whitespace-pre-wrap break-words font-mono text-sm text-muted"
+          >
+            {{ bioPreviewTruncated || '（未填写）' }}
+          </p>
+          <UButton type="button" variant="outline" size="sm" icon="i-lucide-square-pen" @click="openBioModal">
+            在编辑器中打开
+          </UButton>
+        </div>
       </UFormField>
       <UFormField label="简介可见性" name="bioVisibility">
         <USelect
@@ -300,5 +340,26 @@ async function save() {
       </UButton>
     </UForm>
     <UAlert v-if="message" :title="message" />
+
+    <UModal
+      v-model:open="bioModalOpen"
+      title="编辑生平 / 简介"
+      description="支持 Markdown；图片可粘贴或上传至站内。"
+      class="w-[calc(100vw-2rem)] sm:max-w-4xl"
+    >
+      <template #body>
+        <PostBodyMarkdownEditor v-model="bioDraft" />
+      </template>
+      <template #footer="{ close }">
+        <div class="flex justify-end gap-2">
+          <UButton type="button" variant="outline" color="neutral" @click="close">
+            取消
+          </UButton>
+          <UButton type="button" @click="applyBioFromModal(close)">
+            完成
+          </UButton>
+        </div>
+      </template>
+    </UModal>
   </UContainer>
 </template>