feat：编辑资料页标签区 UI 重构，新增管理入口与添加标签弹窗

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

@@ -127,20 +127,23 @@
       </view>
 
       <view class="panel glass-card">
-        <view class="section-head">
-          <view class="section-icon smile-title-icon"></view>
-          <text class="section-title">性格标签</text>
-          <text class="section-hint">（最多选择5个）</text>
+        <view class="section-head with-action">
+          <view class="section-title-wrap">
+            <view class="section-icon smile-title-icon"></view>
+            <text class="section-title">性格标签</text>
+            <text class="section-hint">（最多选择5个）</text>
+          </view>
+          <text class="manage-link" @click="goTagManage('personality')">管理</text>
         </view>
         <view class="tag-grid">
           <text
-            v-for="tag in personalityTags"
+            v-for="tag in displayPersonalityTags"
             :key="tag"
             class="tag-choice"
             :class="{ active: form.personalityTags.includes(tag) }"
             @click="toggleList(form.personalityTags, tag, 5)"
           >{{ tag }}</text>
-          <text class="tag-choice dashed">＋ 添加标签</text>
+          <text class="tag-choice dashed" @click="addCustomTag('personality')">＋ 添加标签</text>
         </view>
       </view>
 
@@ -151,16 +154,17 @@
             <text class="section-title">兴趣爱好</text>
             <text class="section-hint">（最多选择5个）</text>
           </view>
-          <text class="custom" @click="addCustomHobby">＋ 自定义兴趣</text>
+          <text class="manage-link" @click="goTagManage('hobby')">管理</text>
         </view>
         <view class="tag-grid">
           <text
-            v-for="tag in hobbyOptions"
+            v-for="tag in displayHobbyTags"
             :key="tag"
             class="tag-choice"
             :class="{ active: form.hobbies.includes(tag) }"
             @click="toggleList(form.hobbies, tag, 5)"
           >{{ tag }}</text>
+          <text class="tag-choice dashed" @click="addCustomTag('hobby')">＋ 添加兴趣</text>
         </view>
       </view>
 
@@ -292,6 +296,45 @@ const syncFromStore = () => {
   birthday.value = source.birthday || ''
 }
 
+/**
+ * 性格标签有序展示列表：
+ * 1. 新增的自定义标签（不在预设中）按库顺序排在最前
+ * 2. 已选中的其他标签紧随其后
+ * 3. 其余未选中的预设标签排在最后
+ */
+const displayPersonalityTags = computed(() => {
+  const selectedSet = new Set(form.personalityTags)
+  const presetSet = new Set(personalityTags)
+
+  const customTags = form.personalityTagLibrary.filter((tag) => !presetSet.has(tag))
+  const selectedPreset = form.personalityTagLibrary.filter(
+    (tag) => presetSet.has(tag) && selectedSet.has(tag)
+  )
+  const unselectedPreset = form.personalityTagLibrary.filter(
+    (tag) => presetSet.has(tag) && !selectedSet.has(tag)
+  )
+
+  return [...customTags, ...selectedPreset, ...unselectedPreset]
+})
+
+/**
+ * 兴趣爱好有序展示列表（逻辑同上）
+ */
+const displayHobbyTags = computed(() => {
+  const selectedSet = new Set(form.hobbies)
+  const presetSet = new Set(hobbyOptions)
+
+  const customTags = form.hobbyLibrary.filter((tag) => !presetSet.has(tag))
+  const selectedPreset = form.hobbyLibrary.filter(
+    (tag) => presetSet.has(tag) && selectedSet.has(tag)
+  )
+  const unselectedPreset = form.hobbyLibrary.filter(
+    (tag) => presetSet.has(tag) && !selectedSet.has(tag)
+  )
+
+  return [...customTags, ...selectedPreset, ...unselectedPreset]
+})
+
 const onBirthday = (event) => {
   birthday.value = event.detail.value
 }
@@ -321,16 +364,52 @@ const chooseAvatar = () => {
   })
 }
 
-const addCustomHobby = () => {
+/**
+ * 跳转到管理标签页面
+ */
+const goTagManage = (type) => {
+  uni.navigateTo({
+    url: `/pages/onboarding/tag-manage?type=${type}`
+  })
+}
+
+/**
+ * 新增自定义标签（性格标签 / 兴趣爱好通用）
+ * @param {string} type 'personality' 或 'hobby'
+ */
+const addCustomTag = (type) => {
+  const isPersonality = type === 'personality'
+  const library = isPersonality ? form.personalityTagLibrary : form.hobbyLibrary
+  const selected = isPersonality ? form.personalityTags : form.hobbies
+  const title = isPersonality ? '添加性格标签' : '添加兴趣爱好'
+
   uni.showModal({
-    title: '自定义兴趣',
+    title,
     editable: true,
-    placeholderText: '输入兴趣名称',
+    placeholderText: '请输入标签（最多8个字符）',
     success: (res) => {
       const value = String(res.content || '').trim()
-      if (!res.confirm || !value) return
-      if (!hobbyOptions.includes(value)) hobbyOptions.push(value)
-      toggleList(form.hobbies, value, 5)
+      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)
     }
   })
 }
@@ -907,6 +986,11 @@ onMounted(async () => {
   font-size: 23rpx;
 }
 
+.manage-link {
+  color: #c06dff;
+  font-size: 23rpx;
+}
+
 .bio-panel {
   margin-bottom: 0;
 }