310 lines
13 KiB
JavaScript
310 lines
13 KiB
JavaScript
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();
|
|
}
|
|
});
|