优化调整

2025-07-26 00:37:18 +08:00
parent 08bbd4df0f
commit 0dfabc35d7
90 changed files with 3594 additions and 2294 deletions
@@ -0,0 +1,309 @@
+const userData = {
+    basicInfo: {
+        "MBTI": "INFP",
+        "星座": "双鱼座",
+    },
+    moods: {
+        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        data: [5, 7, 6, 8, 9, 7, 6],
+        events: ['感觉效率很高', '和开开聊了很久', '看了一部好电影', '工作有点累', '完成了一个小目标', '周末去徒步了', '为新的一周做准备']
+    },
+    interests: ["阅读", "电影", "编程", "徒步"],
+    skills: ["Python", "JavaScript", "写作", "烹饪"],
+    quotes: [
+        { text: "愿你走出半生，归来仍是少年。", source: "与开开的对话" },
+        { text: "重要的东西用眼睛是看不见的。", source: "小王子" },
+    ]
+};
+
+function renderBasicInfo() {
+    const container = document.getElementById('basic-info-container');
+    if (!container) return;
+    container.innerHTML = '';
+    for (const [key, value] of Object.entries(userData.basicInfo)) {
+        const infoItem = document.createElement('div');
+        infoItem.innerHTML = `
+            <p class="text-text-medium">${key}</p>
+            <p class="font-semibold text-text-dark">${value}</p>
+        `;
+        container.appendChild(infoItem);
+    }
+}
+
+function renderQuotes() {
+    const container = document.getElementById('quotes-container');
+    if (!container) return;
+    container.innerHTML = '';
+    userData.quotes.forEach(quote => {
+        const quoteCard = document.createElement('div');
+        quoteCard.className = 'bg-light-gray p-4 rounded-lg';
+        quoteCard.innerHTML = `
+            <p class="text-text-dark">“${quote.text}”</p>
+            <p class="text-right text-text-medium text-sm mt-2">- ${quote.source}</p>
+        `;
+        container.appendChild(quoteCard);
+    });
+}
+
+function renderTagList(containerId, dataArray, onAdd, onDelete) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    container.innerHTML = '';
+    dataArray.forEach((item, index) => {
+        const tag = document.createElement('div');
+        tag.className = 'flex items-center bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-1.5 rounded-full animate-fade-in-up';
+        tag.innerHTML = `
+            <span>${item}</span>
+            <button class="ml-1.5 text-blue-600 hover:text-blue-800" data-index="${index}">
+                <i data-lucide="x" class="w-3.5 h-3.5"></i>
+            </button>
+        `;
+        tag.querySelector('button').addEventListener('click', () => onDelete(index));
+        container.appendChild(tag);
+    });
+    if (typeof lucide !== 'undefined') {
+        lucide.createIcons();
+    }
+}
+
+function renderMoodChart() {
+    const ctx = document.getElementById('moodChart');
+    if (!ctx) return;
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: userData.moods.labels,
+            datasets: [{
+                label: '心情指数',
+                data: userData.moods.data,
+                borderColor: 'rgba(245, 166, 35, 0.8)',
+                backgroundColor: 'rgba(245, 166, 35, 0.2)',
+                fill: true,
+                tension: 0.4,
+                pointBackgroundColor: '#fff',
+                pointBorderColor: 'rgba(245, 166, 35, 1)',
+                pointHoverBackgroundColor: 'rgba(245, 166, 35, 1)',
+                pointHoverBorderColor: '#fff',
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            onClick: (event, elements) => {
+                if (elements.length > 0) {
+                    const elementIndex = elements[0].index;
+                    const day = userData.moods.labels[elementIndex];
+                    const moodScore = userData.moods.data[elementIndex];
+                    const eventText = userData.moods.events[elementIndex] || '暂无记录';
+                    alert(`日期: ${day}\n心情指数: ${moodScore}\n相关事件/记录: ${eventText}`);
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    max: 10,
+                    grid: {
+                        drawBorder: false,
+                    },
+                    ticks: {
+                       stepSize: 2
+                    }
+                },
+                x: {
+                    grid: {
+                        display: false
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return ` 心情指数: ${context.formattedValue} (点击查看详情)`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+function showExploreModal(type) {
+    const modalOverlay = document.createElement('div');
+    modalOverlay.className = 'fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 animate-fade-in-up';
+    
+    const title = type === 'interest' ? '探索新爱好' : '探索新技能';
+    const question = type === 'interest' ? '最近对什么新事物感到好奇？' : '有什么想要学习或掌握的新本领吗？';
+    const placeholder = type === 'interest' ? '例如：天体物理、陶艺、古典音乐...' : '例如：视频剪辑、理财规划、一种新语言...';
+
+    modalOverlay.innerHTML = `
+        <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md transform animate-fade-in-up" style="animation-delay: 0.1s;">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-bold text-text-dark">${title}</h3>
+                <button id="close-explore-modal" class="text-text-medium hover:text-tech-blue"><i data-lucide="x" class="w-5 h-5"></i></button>
+            </div>
+            <div>
+                <p class="text-sm text-text-medium mb-1 flex items-center"><i data-lucide="sparkles" class="w-4 h-4 mr-2 text-warm-orange"></i>AI 引导提问</p>
+                <p class="bg-light-gray p-3 rounded-lg text-text-dark mb-4">${question}</p>
+                <textarea id="explore-input" rows="3" class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-tech-blue focus:border-transparent outline-none transition" placeholder="${placeholder}"></textarea>
+                <button id="submit-explore" class="w-full mt-4 bg-tech-blue text-white px-5 py-2.5 rounded-lg font-semibold hover:bg-blue-600 transition-all">获取智能推荐</button>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(modalOverlay);
+    lucide.createIcons();
+
+    const closeModal = () => modalOverlay.remove();
+    
+    modalOverlay.querySelector('#close-explore-modal').addEventListener('click', closeModal);
+    modalOverlay.addEventListener('click', (e) => {
+        if (e.target === modalOverlay) closeModal();
+    });
+
+    modalOverlay.querySelector('#submit-explore').addEventListener('click', () => {
+        const input = modalOverlay.querySelector('#explore-input').value;
+        if (input.trim()) {
+            alert(`AI正在根据 "${input}" 为您生成推荐... (此为演示功能)`);
+            closeModal();
+        } else {
+            alert('请输入一些内容，AI才能更好地帮助你哦！');
+        }
+    });
+}
+
+function showAddModuleModal() {
+    const modalOverlay = document.createElement('div');
+    modalOverlay.className = 'fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 animate-fade-in-up';
+
+    modalOverlay.innerHTML = `
+        <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md transform animate-fade-in-up" style="animation-delay: 0.1s;">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-bold text-text-dark">自由添加模块</h3>
+                <button id="close-add-module-modal" class="text-text-medium hover:text-tech-blue"><i data-lucide="x" class="w-5 h-5"></i></button>
+            </div>
+            <div>
+                <p class="text-sm text-text-medium mb-3">请选择一个分类，或随意填写你想记录的内容：</p>
+                <div id="module-categories" class="flex flex-wrap gap-2 mb-4">
+                    <button class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full hover:bg-blue-200 transition">工作行业</button>
+                    <button class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full hover:bg-blue-200 transition">学习背景</button>
+                    <button class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full hover:bg-blue-200 transition">我的梦想</button>
+                </div>
+                <div class="flex items-center gap-2">
+                    <input id="custom-module-input" type="text" class="flex-grow border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-warm-orange focus:border-transparent outline-none transition" placeholder="或输入自定义模块名称">
+                    <button id="submit-custom-module" class="bg-warm-orange text-white px-4 py-2 rounded-lg font-semibold hover:bg-orange-600 transition-all">添加</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(modalOverlay);
+    lucide.createIcons();
+    
+    const closeModal = () => modalOverlay.remove();
+    
+    modalOverlay.querySelector('#close-add-module-modal').addEventListener('click', closeModal);
+    modalOverlay.addEventListener('click', (e) => {
+        if (e.target === modalOverlay) closeModal();
+    });
+    
+    const addModule = (title) => {
+         if (title && title.trim() !== '') {
+            createCustomModule(title.trim());
+            closeModal();
+        } else {
+            alert('模块名称不能为空！');
+        }
+    };
+
+    modalOverlay.querySelector('#module-categories').addEventListener('click', (e) => {
+        if (e.target.tagName === 'BUTTON') {
+            addModule(e.target.textContent);
+        }
+    });
+
+    modalOverlay.querySelector('#submit-custom-module').addEventListener('click', () => {
+        const input = modalOverlay.querySelector('#custom-module-input').value;
+        addModule(input);
+    });
+}
+
+
+function setupEventListeners() {
+    document.getElementById('add-interest-btn')?.addEventListener('click', () => {
+        const newInterest = prompt("请输入新的兴趣爱好：");
+        if (newInterest && newInterest.trim() !== '') {
+            userData.interests.push(newInterest.trim());
+            renderTagList('interests-container', userData.interests, null, deleteInterest);
+        }
+    });
+
+    document.getElementById('add-skill-btn')?.addEventListener('click', () => {
+        const newSkill = prompt("请输入新的生活技能：");
+        if (newSkill && newSkill.trim() !== '') {
+            userData.skills.push(newSkill.trim());
+            renderTagList('skills-container', userData.skills, null, deleteSkill);
+        }
+    });
+    
+    document.getElementById('explore-interests-btn')?.addEventListener('click', () => {
+        showExploreModal('interest');
+    });
+    
+    document.getElementById('explore-skills-btn')?.addEventListener('click', () => {
+        showExploreModal('skill');
+    });
+
+    document.getElementById('add-custom-module-btn')?.addEventListener('click', () => {
+        showAddModuleModal();
+    });
+}
+
+function deleteInterest(index) {
+    userData.interests.splice(index, 1);
+    renderTagList('interests-container', userData.interests, null, deleteInterest);
+}
+
+function deleteSkill(index) {
+    userData.skills.splice(index, 1);
+    renderTagList('skills-container', userData.skills, null, deleteSkill);
+}
+
+function createCustomModule(title) {
+    const grid = document.getElementById('dashboard-grid');
+    if(!grid) return;
+    
+    const moduleEl = document.createElement('div');
+    moduleEl.className = 'bg-white p-6 rounded-xl shadow-sm lg:col-span-2 animate-fade-in-up';
+    moduleEl.innerHTML = `
+        <div class="flex justify-between items-center mb-4">
+            <h2 class="font-bold text-text-dark text-lg">${title}</h2>
+            <div class="flex items-center space-x-2">
+                <button class="text-text-medium hover:text-tech-blue" title="编辑"><i data-lucide="edit-3" class="w-5 h-5"></i></button>
+            </div>
+        </div>
+        <div>
+            <p class="text-sm text-text-medium italic">AI正在根据您的信息自动生成摘要... 您也可以点击右上角编辑按钮手动填写。</p>
+        </div>
+    `;
+    grid.appendChild(moduleEl);
+    if (typeof lucide !== 'undefined') {
+        lucide.createIcons();
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    renderBasicInfo();
+    renderQuotes();
+    renderTagList('interests-container', userData.interests, null, deleteInterest);
+    renderTagList('skills-container', userData.skills, null, deleteSkill);
+    renderMoodChart();
+    setupEventListeners();
+
+    if (typeof lucide !== 'undefined') {
+        lucide.createIcons();
+    }
+});