feat(web): apply milkdown editor

Author: KUN1007

apps/web/app/pages/edit/create.vue

@@ -470,10 +470,9 @@ const handleSubmit = async () => {
 
         <section class="space-y-2">
           <h3 class="font-semibold">简介（简体中文）</h3>
-          <KunTextarea
-            v-model="submitForm.intro_zh_cn"
-            :rows="5"
-            placeholder="支持 Markdown，可选"
+          <KunMilkdownDualEditorProvider
+            :value-markdown="submitForm.intro_zh_cn"
+            @set-markdown="(val) => (submitForm.intro_zh_cn = val)"
           />
         </section>
 

apps/web/app/pages/edit/draft.vue

@@ -219,10 +219,9 @@ const handleSubmit = async () => {
 
         <section class="space-y-2">
           <h3 class="font-semibold">简介（简体中文）</h3>
-          <KunTextarea
-            v-model="form.intro_zh_cn"
-            :rows="5"
-            placeholder="支持 Markdown"
+          <KunMilkdownDualEditorProvider
+            :value-markdown="form.intro_zh_cn"
+            @set-markdown="(val) => (form.intro_zh_cn = val)"
           />
         </section>
 

apps/web/app/pages/edit/rewrite.vue

@@ -57,6 +57,80 @@ const LANG_TABS: { value: LangKey; textValue: string }[] = [
 ]
 const activeLang = ref<LangKey>('zh-cn')
 
+// One name input + one milkdown editor serve all 4 languages: the editor is
+// reused, and switching activeLang drives its `:language` prop, which makes
+// the editor replaceAll() its content with the new language's intro. We expose
+// the active language's name/intro as proxies so the single controls read and
+// write the right form field.
+const activeName = computed<string>({
+  get() {
+    switch (activeLang.value) {
+      case 'zh-tw':
+        return form.name_zh_tw
+      case 'ja-jp':
+        return form.name_ja_jp
+      case 'en-us':
+        return form.name_en_us
+      default:
+        return form.name_zh_cn
+    }
+  },
+  set(v) {
+    switch (activeLang.value) {
+      case 'zh-tw':
+        form.name_zh_tw = v
+        break
+      case 'ja-jp':
+        form.name_ja_jp = v
+        break
+      case 'en-us':
+        form.name_en_us = v
+        break
+      default:
+        form.name_zh_cn = v
+    }
+  }
+})
+const activeIntro = computed(() => {
+  switch (activeLang.value) {
+    case 'zh-tw':
+      return form.intro_zh_tw
+    case 'ja-jp':
+      return form.intro_ja_jp
+    case 'en-us':
+      return form.intro_en_us
+    default:
+      return form.intro_zh_cn
+  }
+})
+const setActiveIntro = (val: string) => {
+  switch (activeLang.value) {
+    case 'zh-tw':
+      form.intro_zh_tw = val
+      break
+    case 'ja-jp':
+      form.intro_ja_jp = val
+      break
+    case 'en-us':
+      form.intro_en_us = val
+      break
+    default:
+      form.intro_zh_cn = val
+  }
+}
+const namePlaceholder = computed(() => {
+  switch (activeLang.value) {
+    case 'zh-tw':
+      return '繁體中文名稱'
+    case 'ja-jp':
+      return '日本語タイトル'
+    case 'en-us':
+      return 'English title'
+    default:
+      return '例如：你和她和她的恋爱'
+  }
+})
+
 interface FormState {
   name_en_us: string
   name_ja_jp: string
@@ -400,53 +474,18 @@ const handleSubmit = async () => {
             color="primary"
             size="sm"
           />
-          <div v-for="lang in LANG_TABS" :key="lang.value">
-            <div v-show="activeLang === lang.value" class="space-y-3">
-              <label class="block">
-                <span class="text-default-700 text-sm">标题</span>
-                <KunInput
-                  v-if="lang.value === 'zh-cn'"
-                  v-model="form.name_zh_cn"
-                  placeholder="例如：你和她和她的恋爱"
-                />
-                <KunInput
-                  v-else-if="lang.value === 'zh-tw'"
-                  v-model="form.name_zh_tw"
-                  placeholder="繁體中文名稱"
-                />
-                <KunInput
-                  v-else-if="lang.value === 'ja-jp'"
-                  v-model="form.name_ja_jp"
-                  placeholder="日本語タイトル"
-                />
-                <KunInput
-                  v-else
-                  v-model="form.name_en_us"
-                  placeholder="English title"
-                />
-              </label>
-              <label class="block">
-                <span class="text-default-700 text-sm">简介 (Markdown)</span>
-                <KunTextarea
-                  v-if="lang.value === 'zh-cn'"
-                  v-model="form.intro_zh_cn"
-                  :rows="10"
-                  placeholder="支持 Markdown 语法"
-                />
-                <KunTextarea
-                  v-else-if="lang.value === 'zh-tw'"
-                  v-model="form.intro_zh_tw"
-                  :rows="10"
-                />
-                <KunTextarea
-                  v-else-if="lang.value === 'ja-jp'"
-                  v-model="form.intro_ja_jp"
-                  :rows="10"
-                />
-                <KunTextarea v-else v-model="form.intro_en_us" :rows="10" />
-              </label>
-            </div>
-          </div>
+          <label class="block space-y-1">
+            <span class="text-default-700 text-sm">标题</span>
+            <KunInput v-model="activeName" :placeholder="namePlaceholder" />
+          </label>
+          <label class="block space-y-1">
+            <span class="text-default-700 text-sm">简介 (Markdown)</span>
+            <KunMilkdownDualEditorProvider
+              :value-markdown="activeIntro"
+              :language="activeLang"
+              @set-markdown="setActiveIntro"
+            />
+          </label>
         </div>
 
         <!-- ─── 基本信息：rating + language + aliases + is_minor ────── -->

apps/web/app/pages/patch/[id]/comment.vue

@@ -34,6 +34,9 @@ const comments = computed(() => data.value?.items ?? [])
 
 const content = ref('')
 const submitting = ref(false)
+// KunMilkdownDualEditorProvider is uncontrolled (valueMarkdown is the initial
+// value only), so bump this key to remount it empty after a successful post.
+const composerKey = ref(0)
 
 const submit = async () => {
   if (!userStore.user.id) {
@@ -52,6 +55,7 @@ const submit = async () => {
     )
     if (res.code === 0) {
       content.value = ''
+      composerKey.value++
       useKunMessage('评论发布成功', 'success')
       await refresh()
     } else {
@@ -97,10 +101,10 @@ const toggleLike = async (c: PatchPageComment) => {
     >
       <KunAvatar :user="userStore.user" size="sm" :is-navigation="false" />
       <div class="min-w-0 flex-1 space-y-3">
-        <KunTextarea
-          v-model="content"
-          placeholder="写下你的评论..."
-          :rows="3"
+        <KunMilkdownDualEditorProvider
+          :key="composerKey"
+          :value-markdown="content"
+          @set-markdown="(val) => (content = val)"
         />
         <div class="flex justify-end">
           <KunButton