feat：编辑页添加按钮简化为添加，字数限制4字，标签不换行，接入自定义弹窗

mini-program/src/pages/onboarding/index.vue

@@ -143,7 +143,7 @@
             :class="{ active: form.personalityTags.includes(tag) }"
             @click="toggleList(form.personalityTags, tag, 5)"
           >{{ tag }}</text>
-          <text class="tag-choice dashed" @click="addCustomTag('personality')">＋ 添加标签</text>
+          <text class="tag-choice dashed" @click="addCustomTag('personality')">＋ 添加</text>
         </view>
       </view>
 
@@ -164,7 +164,7 @@
             :class="{ active: form.hobbies.includes(tag) }"
             @click="toggleList(form.hobbies, tag, 5)"
           >{{ tag }}</text>
-          <text class="tag-choice dashed" @click="addCustomTag('hobby')">＋ 添加兴趣</text>
+          <text class="tag-choice dashed" @click="addCustomTag('hobby')">＋ 添加</text>
         </view>
       </view>
 
@@ -183,6 +183,17 @@
         <text class="bio-count">{{ (form.future.ideal || '').length }}/200</text>
       </view>
     </scroll-view>
+
+    <TagDialog
+      v-model="dialogInput"
+      v-model:visible="dialogVisible"
+      :mode="dialogMode"
+      :title="dialogTitle"
+      :placeholder="dialogPlaceholder"
+      :content="dialogContent"
+      @confirm="onDialogConfirm"
+      @cancel="onDialogCancel"
+    />
   </view>
 </template>
 
@@ -191,11 +202,19 @@ import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { useAppStore } from '../../stores/app.js'
 import { useMenuButtonSafeArea } from '../../composables/useMenuButtonSafeArea.js'
+import TagDialog from '../../components/TagDialog.vue'
 
 const store = useAppStore()
 const { capsuleTopReservePx } = useMenuButtonSafeArea({ extraTopPx: 2 })
 const isEdit = ref(false)
 const saving = ref(false)
+const dialogVisible = ref(false)
+const dialogMode = ref('input')
+const dialogTitle = ref('')
+const dialogPlaceholder = ref('')
+const dialogContent = ref('')
+const dialogInput = ref('')
+const dialogAction = ref(null)
 const birthday = ref('')
 const avatarLocal = ref('')
 const bioPlaceholder = '热爱阅读和旅行，喜欢用文字和镜头记录生活。\n相信真诚和努力能让世界变得更美好。'
@@ -408,44 +427,69 @@ const goTagManage = (type) => {
 }
 
 /**
- * 新增自定义标签（性格标签 / 兴趣爱好通用）
+ * 打开添加标签弹窗
  * @param {string} type 'personality' 或 'hobby'
  */
 const addCustomTag = (type) => {
+  const isPersonality = type === 'personality'
+  dialogMode.value = 'input'
+  dialogTitle.value = isPersonality ? '添加性格标签' : '添加兴趣爱好'
+  dialogPlaceholder.value = '请输入标签（最多4个字）'
+  dialogInput.value = ''
+  dialogAction.value = { kind: 'add', type }
+  dialogVisible.value = true
+}
+
+/**
+ * 处理添加标签的实际逻辑（字数限制 4 字）
+ */
+const handleAddTag = (type, rawValue) => {
+  const value = String(rawValue || '').trim()
   const isPersonality = type === 'personality'
   const library = isPersonality ? form.personalityTagLibrary : form.hobbyLibrary
   const selected = isPersonality ? form.personalityTags : form.hobbies
-  const title = isPersonality ? '添加性格标签' : '添加兴趣爱好'
 
-  uni.showModal({
-    title,
-    editable: true,
-    placeholderText: '请输入标签（最多8个字符）',
-    success: (res) => {
-      const value = String(res.content || '').trim()
-      if (!res.confirm) return
-      if (!value) {
-        uni.showToast({ title: '请输入标签内容', icon: 'none' })
-        return
-      }
-      if (value.length > 8) {
-        uni.showToast({ title: '标签最多8个字符', icon: 'none' })
-        return
-      }
-      if (library.includes(value)) {
-        uni.showToast({ title: '标签已存在', icon: 'none' })
-        return
-      }
-      // 新标签插入到库数组最前面
-      library.unshift(value)
-      // 若已选未满 5 个，自动加入已选；否则仅提示
-      if (selected.length >= 5) {
-        uni.showToast({ title: '已达上限，仅加入标签库', icon: 'none' })
-        return
-      }
-      selected.push(value)
-    }
-  })
+  if (!value) {
+    uni.showToast({ title: '请输入标签内容', icon: 'none' })
+    return
+  }
+  if (value.length > 4) {
+    uni.showToast({ title: '内容不能超过4个字', icon: 'none' })
+    return
+  }
+  if (library.includes(value)) {
+    uni.showToast({ title: '标签已存在', icon: 'none' })
+    return
+  }
+  // 新标签插入到库数组最前面
+  library.unshift(value)
+  // 若已选未满 5 个，自动加入已选；否则仅提示
+  if (selected.length >= 5) {
+    uni.showToast({ title: '已达上限，仅加入标签库', icon: 'none' })
+    return
+  }
+  selected.push(value)
+}
+
+/**
+ * 弹窗确认回调
+ */
+const onDialogConfirm = (value) => {
+  const action = dialogAction.value
+  if (!action) return
+  if (action.kind === 'add') {
+    handleAddTag(action.type, value)
+  }
+  dialogAction.value = null
+  dialogVisible.value = false
+}
+
+/**
+ * 弹窗取消回调
+ */
+const onDialogCancel = () => {
+  dialogAction.value = null
+  dialogVisible.value = false
 }
 
 const saveProfile = async () => {
@@ -1008,6 +1052,9 @@ onMounted(async () => {
 .tag-choice {
   height: 40rpx;
   font-size: 21rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tag-choice.dashed {