小程序初始化

2026-02-27 11:32:50 +08:00
parent 93574dbb45
commit 97e1ea2706
252 changed files with 32427 additions and 12363 deletions
@@ -0,0 +1,74 @@
+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>
+        `;
+    }
+};