peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
peanut_hzm
2025-12-22 21:56:10 +08:00
parent 180fe20347
commit 7d53a059d7
31 changed files with 1894 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
life-script/src/App.jsx
+4 -1
View File
@@ -124,8 +124,11 @@ const AnimatedRoutes = () => {
* App 主组件
*/
function App() {
// 生产环境使用 /course-of-life 作为基础路径
const basename = import.meta.env.PROD ? '/course-of-life' : '';
return (
<BrowserRouter>
<BrowserRouter basename={basename}>
{/* 动态背景 */}
<Background />
life-script/src/pages/OnboardingPage.jsx
+42 -8
View File
@@ -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>
);
life-script/src/services/dictionary.js
+63
View File
@@ -0,0 +1,63 @@
import api from './api';
/**
* 字典服务
* 处理字典数据的获取
*/
/**
* 根据字典类型获取启用的字典列表
* @param {string} dictType - 字典类型
* @returns {Promise<Array>} 字典列表
*/
export const getEnabledDictionariesByType = async (dictType) => {
const response = await api.get('/dictionary/enabledByType', {
params: { dictType }
});
return response.data || [];
};
/**
* 获取星座字典
* @returns {Promise<Array>} 星座列表
*/
export const getZodiacList = async () => {
return getEnabledDictionariesByType('constellation');
};
/**
* 获取MBTI字典
* @returns {Promise<Array>} MBTI列表
*/
export const getMbtiList = async () => {
return getEnabledDictionariesByType('mbti');
};
/**
* 获取性别字典
* @returns {Promise<Array>} 性别列表
*/
export const getGenderList = async () => {
return getEnabledDictionariesByType('gender');
};
/**
* 将字典数据转换为下拉选项格式
* @param {Array} dictList - 字典列表
* @returns {Array<{value: string, label: string}>} 选项列表
*/
export const transformToOptions = (dictList) => {
if (!Array.isArray(dictList)) return [];
return dictList.map(item => ({
value: item.dictValue || item.dictCode || '',
label: item.dictName || item.dictValue || ''
}));
};
export default {
getEnabledDictionariesByType,
getZodiacList,
getMbtiList,
getGenderList,
transformToOptions
};
life-script/src/services/userProfile.js
+4
View File
@@ -72,6 +72,7 @@ const transformToBackendFormat = (frontendData) => {
nickname,
gender,
zodiac,
profession,
mbti,
hobbies,
childhood,
@@ -85,6 +86,7 @@ const transformToBackendFormat = (frontendData) => {
nickname,
gender,
zodiac,
profession,
mbti,
// 兴趣爱好转为 JSON 字符串
hobbies: Array.isArray(hobbies) ? JSON.stringify(hobbies) : hobbies,
@@ -118,6 +120,7 @@ export const transformToFrontendFormat = (backendData) => {
nickname,
gender,
zodiac,
profession,
mbti,
hobbies,
childhoodDate,
@@ -136,6 +139,7 @@ export const transformToFrontendFormat = (backendData) => {
nickname: nickname || '',
gender: gender || '',
zodiac: zodiac || '',
profession: profession || '',
mbti: mbti || '',
// 兴趣爱好从 JSON 字符串解析
hobbies: hobbies ? (typeof hobbies === 'string' ? JSON.parse(hobbies) : hobbies) : [],
life-script/src/views/ProfileModal.jsx
+50 -10
View File
@@ -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 }))}
/>