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

life-script/src/pages/OnboardingPage.jsx

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ArrowRight, Check } from 'lucide-react';
-import { GlassCard, GlassInput, GlassTextarea, GlassButton } from '../components/ui';
+import { GlassCard, GlassInput, GlassTextarea, GlassButton, GlassSelect } from '../components/ui';
 import { PromptTagGroup } from '../components/PromptTag';
 import useStore from '../store/useStore';
 import { inspirationClusters } from '../utils/constants';
+import * as dictionaryService from '../services/dictionary';
 
 /**
  * OnboardingPage 组件
@@ -24,11 +25,39 @@ const OnboardingPage = () => {
 
   const [formData, setFormData] = useState(registrationData);
   const [isSaving, setIsSaving] = useState(false);
+  
+  // 字典数据状态
+  const [zodiacOptions, setZodiacOptions] = useState([]);
+  const [mbtiOptions, setMbtiOptions] = useState([]);
+  const [genderOptions, setGenderOptions] = useState([]);
 
   useEffect(() => {
     setFormData(registrationData);
   }, [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: '请选择性别' }]);
+      }
+    };
+    loadDictionaries();
+  }, []);
+
   const updateField = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }));
   };
@@ -46,7 +75,12 @@ const OnboardingPage = () => {
   };
 
   const saveStepData = () => {
-    updateRegistration(formData);
+    // 保存时将兴趣爱好字符串转换为数组
+    const dataToSave = { ...formData };
+    if (typeof dataToSave.hobbies === 'string') {
+      dataToSave.hobbies = dataToSave.hobbies.split(/[,，]/).map(s => s.trim()).filter(s => s);
+    }
+    updateRegistration(dataToSave);
   };
 
   const handleNext = async () => {
@@ -82,15 +116,15 @@ const OnboardingPage = () => {
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2">
         <GlassInput label="称呼" placeholder="例如：林中鹿" value={formData.nickname} onChange={(v) => updateField('nickname', v)} />
-        <GlassInput label="性别" placeholder="自由填写" value={formData.gender} onChange={(v) => updateField('gender', v)} />
-        <GlassInput label="MBTI" placeholder="如：INFJ" value={formData.mbti} onChange={(v) => updateField('mbti', v)} />
-        <GlassInput label="星座" placeholder="星辰指引" value={formData.zodiac} onChange={(v) => updateField('zodiac', v)} />
+        <GlassSelect label="性别" options={genderOptions} value={formData.gender} onChange={(v) => updateField('gender', v)} />
+        <GlassSelect label="MBTI" options={mbtiOptions} value={formData.mbti} onChange={(v) => updateField('mbti', v)} />
+        <GlassSelect label="星座" options={zodiacOptions} value={formData.zodiac} onChange={(v) => updateField('zodiac', v)} />
       </div>
       <GlassInput
         label="兴趣爱好"
-        placeholder="用逗号分隔你的热爱"
-        value={Array.isArray(formData.hobbies) ? formData.hobbies.join(',') : formData.hobbies}
-        onChange={(v) => updateField('hobbies', v.split(',').map(s => s.trim()).filter(s => s))}
+        placeholder="用逗号分隔你的热爱，如：阅读，旅行，摄影"
+        value={Array.isArray(formData.hobbies) ? formData.hobbies.join('，') : (formData.hobbies || '')}
+        onChange={(v) => updateField('hobbies', v)}
       />
     </div>
   );