添加字典功能及初始化数据

life-script/src/views/ProfileModal.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
 import { Settings, Settings2 } from 'lucide-react';
 import Modal from '../components/Modal';
-import { GlassButton, GlassInput } from '../components/ui';
+import { GlassButton, GlassInput, GlassSelect } from '../components/ui';
 import useStore from '../store/useStore';
+import * as dictionaryService from '../services/dictionary';
 
 /**
  * ProfileModal 组件
@@ -18,13 +19,19 @@ const ProfileModal = ({ isOpen, onClose }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   
+  // 字典数据状态
+  const [zodiacOptions, setZodiacOptions] = useState([]);
+  const [mbtiOptions, setMbtiOptions] = useState([]);
+  const [genderOptions, setGenderOptions] = useState([]);
+  
   // 编辑表单状态
   const [editForm, setEditForm] = useState({
     nickname: registrationData.nickname,
     profession: registrationData.profession || '',
+    gender: registrationData.gender || '',
     mbti: registrationData.mbti,
     zodiac: registrationData.zodiac,
-    hobbies: registrationData.hobbies?.join(', ') || ''
+    hobbies: registrationData.hobbies?.join('，') || ''
   });
 
   // 同步 registrationData 到 editForm
@@ -32,12 +39,37 @@ const ProfileModal = ({ isOpen, onClose }) => {
     setEditForm({
       nickname: registrationData.nickname,
       profession: registrationData.profession || '',
+      gender: registrationData.gender || '',
       mbti: registrationData.mbti,
       zodiac: registrationData.zodiac,
-      hobbies: registrationData.hobbies?.join(', ') || ''
+      hobbies: registrationData.hobbies?.join('，') || ''
     });
   }, [registrationData]);
 
+  // 加载字典数据
+  useEffect(() => {
+    const loadDictionaries = async () => {
+      try {
+        const [zodiacList, mbtiList, genderList] = await Promise.all([
+          dictionaryService.getZodiacList(),
+          dictionaryService.getMbtiList(),
+          dictionaryService.getGenderList()
+        ]);
+        setZodiacOptions([{ value: '', label: '请选择星座' }, ...dictionaryService.transformToOptions(zodiacList)]);
+        setMbtiOptions([{ value: '', label: '请选择MBTI' }, ...dictionaryService.transformToOptions(mbtiList)]);
+        setGenderOptions([{ value: '', label: '请选择性别' }, ...dictionaryService.transformToOptions(genderList)]);
+      } catch (error) {
+        console.error('加载字典数据失败:', error);
+        setZodiacOptions([{ value: '', label: '请选择星座' }]);
+        setMbtiOptions([{ value: '', label: '请选择MBTI' }]);
+        setGenderOptions([{ value: '', label: '请选择性别' }]);
+      }
+    };
+    if (isOpen) {
+      loadDictionaries();
+    }
+  }, [isOpen]);
+
   /**
    * 处理保存
    */
@@ -47,9 +79,10 @@ const ProfileModal = ({ isOpen, onClose }) => {
       updateRegistration({
         nickname: editForm.nickname,
         profession: editForm.profession,
+        gender: editForm.gender,
         mbti: editForm.mbti,
         zodiac: editForm.zodiac,
-        hobbies: editForm.hobbies.split(',').map(s => s.trim()).filter(s => s)
+        hobbies: editForm.hobbies.split(/[,，]/).map(s => s.trim()).filter(s => s)
       });
       await saveUserProfile();
       setIsEditing(false);
@@ -69,9 +102,10 @@ const ProfileModal = ({ isOpen, onClose }) => {
     setEditForm({
       nickname: registrationData.nickname,
       profession: registrationData.profession || '',
+      gender: registrationData.gender || '',
       mbti: registrationData.mbti,
       zodiac: registrationData.zodiac,
-      hobbies: registrationData.hobbies?.join(', ') || ''
+      hobbies: registrationData.hobbies?.join('，') || ''
     });
     setIsEditing(false);
   };
@@ -165,22 +199,28 @@ const ProfileModal = ({ isOpen, onClose }) => {
           value={editForm.profession}
           onChange={(v) => setEditForm(prev => ({ ...prev, profession: v }))}
         />
-        <GlassInput
+        <GlassSelect
+          label="性别"
+          options={genderOptions}
+          value={editForm.gender}
+          onChange={(v) => setEditForm(prev => ({ ...prev, gender: v }))}
+        />
+        <GlassSelect
           label="MBTI"
-          placeholder="性格色彩"
+          options={mbtiOptions}
           value={editForm.mbti}
           onChange={(v) => setEditForm(prev => ({ ...prev, mbti: v }))}
         />
-        <GlassInput
+        <GlassSelect
           label="星座"
-          placeholder="星辰指引"
+          options={zodiacOptions}
           value={editForm.zodiac}
           onChange={(v) => setEditForm(prev => ({ ...prev, zodiac: v }))}
         />
       </div>
       <GlassInput
         label="兴趣爱好"
-        placeholder="让灵魂起舞的事物"
+        placeholder="让灵魂起舞的事物，用逗号分隔"
         value={editForm.hobbies}
         onChange={(v) => setEditForm(prev => ({ ...prev, hobbies: v }))}
       />