feat: allow user tag creation

open-isle-cli/src/components/TagSelect.vue

@@ -1,9 +1,15 @@
 <template>
-  <Dropdown v-model="selected" :fetch-options="fetchTags" multiple placeholder="选择标签" />
+  <Dropdown
+    v-model="selected"
+    :fetch-options="fetchTags"
+    multiple
+    placeholder="选择标签"
+    remote
+  />
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { API_BASE_URL, toast } from '../main'
 import Dropdown from './Dropdown.vue'
 
@@ -11,15 +17,37 @@ export default {
   name: 'TagSelect',
   components: { Dropdown },
   props: {
-    modelValue: { type: Array, default: () => [] }
+    modelValue: { type: Array, default: () => [] },
+    creatable: { type: Boolean, default: false }
   },
   emits: ['update:modelValue'],
   setup(props, { emit }) {
-    const fetchTags = async () => {
+    const tags = ref([])
+
+    const loadTags = async () => {
+      if (tags.value.length) return
       const res = await fetch(`${API_BASE_URL}/api/tags`)
-      if (!res.ok) return []
+      if (!res.ok) return
       const data = await res.json()
-      return [{ id: 0, name: '无标签' }, ...data]
+      tags.value = [{ id: 0, name: '无标签' }, ...data]
+    }
+
+    const fetchTags = async (kw = '') => {
+      await loadTags()
+      let options = tags.value.filter(t =>
+        !kw || t.name.toLowerCase().includes(kw.toLowerCase())
+      )
+      if (
+        props.creatable &&
+        kw &&
+        !tags.value.some(t => t.name.toLowerCase() === kw.toLowerCase())
+      ) {
+        options = [
+          ...options,
+          { id: `__create__:${kw}`, name: `创建"${kw}"` }
+        ]
+      }
+      return options
     }
 
     const selected = computed({
@@ -34,6 +62,17 @@ export default {
             toast.error('最多选择两个标签')
             return
           }
+          v = v.map(id => {
+            if (typeof id === 'string' && id.startsWith('__create__:')) {
+              const name = id.slice(11)
+              const newId = `__new__:${name}`
+              if (!tags.value.find(t => t.id === newId)) {
+                tags.value.push({ id: newId, name })
+              }
+              return newId
+            }
+            return id
+          })
         }
         emit('update:modelValue', v)
       }

open-isle-cli/src/views/NewPostPageView.vue

@@ -8,7 +8,7 @@
       <div class="post-options">
         <div class="post-options-left">
           <CategorySelect v-model="selectedCategory" />
-          <TagSelect v-model="selectedTags" />
+          <TagSelect v-model="selectedTags" creatable />
         </div>
         <div class="post-options-right">
           <div class="post-clear" @click="clearPost">
@@ -120,6 +120,29 @@ export default {
         toast.error('保存失败')
       }
     }
+    const ensureTags = async (token) => {
+      for (let i = 0; i < selectedTags.value.length; i++) {
+        const t = selectedTags.value[i]
+        if (typeof t === 'string' && t.startsWith('__new__:')) {
+          const name = t.slice(8)
+          const res = await fetch(`${API_BASE_URL}/api/tags`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${token}`
+            },
+            body: JSON.stringify({ name, description: '' })
+          })
+          if (res.ok) {
+            const data = await res.json()
+            selectedTags.value[i] = data.id
+            // update local TagSelect options handled by component
+          } else {
+            throw new Error('create tag failed')
+          }
+        }
+      }
+    }
     const submitPost = async () => {
       if (!title.value.trim()) {
         toast.error('标题不能为空')
@@ -139,6 +162,7 @@ export default {
       }
       try {
         const token = getToken()
+        await ensureTags(token)
         const res = await fetch(`${API_BASE_URL}/api/posts`, {
           method: 'POST',
           headers: {