75 lines
4.0 KiB
JavaScript
75 lines
4.0 KiB
JavaScript
export const UI = {
|
|
inspirationClusters: {
|
|
childhood: ['秋千', '晚霞', '糖果', '奔跑', '蝉鸣', '雨后泥土', '旧书包', '风筝'],
|
|
joy: ['海浪', '拥抱', '掌声', '晨曦', '破土而出', '默契', '星空', '释放'],
|
|
low: ['落叶', '雨伞', '长廊', '深呼吸', '自愈', '沉潜', '坚韧', '等待', '破茧']
|
|
},
|
|
|
|
renderInspiration(type, targetId) {
|
|
const words = this.inspirationClusters[type];
|
|
return words.map(word => `
|
|
<span class="prompt-tag px-3 py-1 bg-white/5 border border-white/5 rounded-full text-[10px] text-white/40 cursor-pointer hover:bg-orange-200/10 hover:text-orange-200 transition-all"
|
|
onclick="document.getElementById('${targetId}').value += '${word}'">${word}</span>
|
|
`).join('');
|
|
},
|
|
|
|
renderInput(label, id, type = 'text', placeholder = '', value = '') {
|
|
return `
|
|
<div class="flex flex-col gap-2 mb-4 w-full">
|
|
<label class="text-[10px] text-white/30 uppercase tracking-widest font-bold">${label}</label>
|
|
<input type="${type}" id="${id}" value="${value}" placeholder="${placeholder}"
|
|
class="glass-input w-full focus:ring-2 focus:ring-orange-200/50">
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
renderTextArea(label, id, placeholder = '', value = '') {
|
|
return `
|
|
<div class="flex flex-col gap-2 mb-4 w-full">
|
|
<label class="text-[10px] text-white/30 uppercase tracking-widest font-bold">${label}</label>
|
|
<textarea id="${id}" rows="4" placeholder="${placeholder}"
|
|
class="glass-input w-full resize-none focus:ring-2 focus:ring-orange-200/50">${value}</textarea>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
renderSelect(label, id, options, selectedValue = '') {
|
|
return `
|
|
<div class="flex flex-col gap-2 mb-4 w-full">
|
|
<label class="text-[10px] text-white/30 uppercase tracking-widest font-bold">${label}</label>
|
|
<select id="${id}" class="glass-input w-full appearance-none">
|
|
${options.map(opt => `<option value="${opt.value}" ${opt.value === selectedValue ? 'selected' : ''}>${opt.label}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
renderAccountSettings(data) {
|
|
return `
|
|
<div class="space-y-6 animate-fade-in">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-12 h-12 rounded-full bg-orange-200/10 flex items-center justify-center">
|
|
<i data-lucide="settings-2" class="text-orange-200 w-5 h-5"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl font-serif">个人设定</h4>
|
|
<p class="text-xs text-white/40">在这里调整你的人生航向基础信息</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
|
|
${this.renderInput('昵称', 'edit-nickname', 'text', '你想被如何称呼？', data.nickname)}
|
|
${this.renderInput('职业', 'edit-profession', 'text', '你当下的社会锚点', data.profession || '')}
|
|
${this.renderInput('MBTI', 'edit-mbti', 'text', '性格色彩', data.mbti)}
|
|
${this.renderInput('星座', 'edit-zodiac', 'text', '星辰指引', data.zodiac)}
|
|
</div>
|
|
${this.renderInput('兴趣爱好', 'edit-hobbies', 'text', '让灵魂起舞的事物', data.hobbies.join(', '))}
|
|
|
|
<div class="flex gap-4 mt-8 pt-6 border-t border-white/5">
|
|
<button id="save-profile-btn" class="flex-1 glass-btn py-3 bg-orange-200/10 text-orange-100 font-bold tracking-widest">保存修改</button>
|
|
<button id="cancel-edit-btn" class="px-6 glass-btn py-3 text-white/40">返回</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
};
|