266 lines
9.6 KiB
Vue
266 lines
9.6 KiB
Vue
<template>
|
|
<div class="personal-dashboard-page">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-md z-10 flex-shrink-0">
|
|
<div class="container mx-auto px-4 py-3 flex items-center justify-between relative">
|
|
<div class="flex items-center space-x-4">
|
|
<router-link to="/" class="text-text-medium hover:text-tech-blue transition-colors">
|
|
<i data-lucide="home" class="w-6 h-6"></i>
|
|
</router-link>
|
|
<router-link to="/messages" class="text-text-medium hover:text-tech-blue transition-colors">
|
|
<i data-lucide="bell" class="w-6 h-6"></i>
|
|
</router-link>
|
|
</div>
|
|
<h1 class="text-lg font-bold text-text-dark absolute left-1/2 -translate-x-1/2">个人展板</h1>
|
|
<router-link to="/settings" class="text-text-medium hover:text-tech-blue transition-colors">
|
|
<i data-lucide="user" class="w-6 h-6"></i>
|
|
</router-link>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 overflow-y-auto p-4 lg:p-6 pb-24">
|
|
<div id="dashboard-grid" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Basic Info Card -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">基础信息</h2>
|
|
<i data-lucide="user-round" class="text-tech-blue"></i>
|
|
</div>
|
|
<div id="basic-info-container" class="grid grid-cols-2 gap-4 text-sm">
|
|
<div class="flex flex-col">
|
|
<span class="text-text-medium">用户名</span>
|
|
<span class="font-semibold text-text-dark">开心用户</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-text-medium">注册时间</span>
|
|
<span class="font-semibold text-text-dark">2024年1月</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-text-medium">日记数量</span>
|
|
<span class="font-semibold text-text-dark">42篇</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-text-medium">连续记录</span>
|
|
<span class="font-semibold text-text-dark">15天</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mood Chart Card -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">近期心情统计</h2>
|
|
<i data-lucide="activity" class="text-warm-orange"></i>
|
|
</div>
|
|
<div class="relative h-48">
|
|
<canvas id="moodChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interests Card -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">兴趣爱好</h2>
|
|
<button
|
|
@click="addInterest"
|
|
class="text-text-medium hover:text-tech-blue transition-colors"
|
|
title="添加兴趣"
|
|
>
|
|
<i data-lucide="plus" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div id="interests-container" class="flex flex-wrap gap-2 text-sm min-h-[36px]">
|
|
<span class="bg-tech-blue/10 text-tech-blue px-3 py-1 rounded-full">阅读</span>
|
|
<span class="bg-tech-blue/10 text-tech-blue px-3 py-1 rounded-full">音乐</span>
|
|
<span class="bg-tech-blue/10 text-tech-blue px-3 py-1 rounded-full">旅行</span>
|
|
<span class="bg-tech-blue/10 text-tech-blue px-3 py-1 rounded-full">摄影</span>
|
|
</div>
|
|
<div class="mt-4">
|
|
<button
|
|
@click="exploreInterests"
|
|
class="w-full text-sm bg-tech-blue/10 text-tech-blue font-semibold py-2 px-4 rounded-lg hover:bg-tech-blue/20 transition-colors flex items-center justify-center space-x-2"
|
|
>
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
<span>探索可能发展的爱好</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Skills Card -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">生活技能</h2>
|
|
<button
|
|
@click="addSkill"
|
|
class="text-text-medium hover:text-tech-blue transition-colors"
|
|
title="添加技能"
|
|
>
|
|
<i data-lucide="plus" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div id="skills-container" class="flex flex-wrap gap-2 text-sm min-h-[36px]">
|
|
<span class="bg-warm-orange/10 text-warm-orange px-3 py-1 rounded-full">烹饪</span>
|
|
<span class="bg-warm-orange/10 text-warm-orange px-3 py-1 rounded-full">绘画</span>
|
|
<span class="bg-warm-orange/10 text-warm-orange px-3 py-1 rounded-full">编程</span>
|
|
</div>
|
|
<div class="mt-4">
|
|
<button
|
|
@click="exploreSkills"
|
|
class="w-full text-sm bg-tech-blue/10 text-tech-blue font-semibold py-2 px-4 rounded-lg hover:bg-tech-blue/20 transition-colors flex items-center justify-center space-x-2"
|
|
>
|
|
<i data-lucide="flask-conical" class="w-4 h-4"></i>
|
|
<span>探索可能发展的技能</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal Quotes Module -->
|
|
<div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="font-bold text-text-dark text-lg">个人语录</h2>
|
|
<button
|
|
@click="addQuote"
|
|
class="text-text-medium hover:text-tech-blue transition-colors"
|
|
title="添加语录"
|
|
>
|
|
<i data-lucide="plus-square" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div id="quotes-container" class="space-y-4">
|
|
<div class="bg-gray-50 p-4 rounded-lg border-l-4 border-tech-blue">
|
|
<p class="text-text-dark italic">"每一天都是新的开始，每一次尝试都是成长的机会。"</p>
|
|
<p class="text-text-medium text-xs mt-2">2024年1月15日</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-4 rounded-lg border-l-4 border-warm-orange">
|
|
<p class="text-text-dark italic">"困难是成长路上的垫脚石，而不是绊脚石。"</p>
|
|
<p class="text-text-medium text-xs mt-2">2024年1月10日</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic modules will be added here -->
|
|
|
|
</div>
|
|
|
|
<!-- Add custom module button -->
|
|
<div class="mt-6 text-center">
|
|
<button
|
|
@click="addCustomModule"
|
|
class="bg-warm-orange text-white px-6 py-3 rounded-full font-semibold hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-orange-500/30 flex items-center justify-center space-x-2 mx-auto"
|
|
>
|
|
<i data-lucide="layout-template" class="w-5 h-5"></i>
|
|
<span>自由添加模块</span>
|
|
</button>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- App Navigation -->
|
|
<BottomNavigation />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import BottomNavigation from '@/components/layout/BottomNavigation.vue'
|
|
|
|
// 响应式数据
|
|
const interests = ref(['阅读', '音乐', '旅行', '摄影'])
|
|
const skills = ref(['烹饪', '绘画', '编程'])
|
|
const quotes = ref([
|
|
{
|
|
text: '"每一天都是新的开始，每一次尝试都是成长的机会。"',
|
|
date: '2024年1月15日',
|
|
color: 'tech-blue'
|
|
},
|
|
{
|
|
text: '"困难是成长路上的垫脚石，而不是绊脚石。"',
|
|
date: '2024年1月10日',
|
|
color: 'warm-orange'
|
|
}
|
|
])
|
|
|
|
// 添加兴趣
|
|
const addInterest = () => {
|
|
// TODO: 实现添加兴趣逻辑
|
|
console.log('添加兴趣')
|
|
}
|
|
|
|
// 探索兴趣
|
|
const exploreInterests = () => {
|
|
// TODO: 实现探索兴趣逻辑
|
|
console.log('探索兴趣')
|
|
}
|
|
|
|
// 添加技能
|
|
const addSkill = () => {
|
|
// TODO: 实现添加技能逻辑
|
|
console.log('添加技能')
|
|
}
|
|
|
|
// 探索技能
|
|
const exploreSkills = () => {
|
|
// TODO: 实现探索技能逻辑
|
|
console.log('探索技能')
|
|
}
|
|
|
|
// 添加语录
|
|
const addQuote = () => {
|
|
// TODO: 实现添加语录逻辑
|
|
console.log('添加语录')
|
|
}
|
|
|
|
// 添加自定义模块
|
|
const addCustomModule = () => {
|
|
// TODO: 实现添加自定义模块逻辑
|
|
console.log('添加自定义模块')
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
// 初始化Lucide图标
|
|
if (window.lucide) {
|
|
window.lucide.createIcons()
|
|
}
|
|
|
|
// TODO: 初始化心情图表
|
|
// 这里可以集成Chart.js来绘制心情统计图表
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 导入原始样式变量 */
|
|
:root {
|
|
--tech-blue: #4A90E2;
|
|
--warm-orange: #F5A623;
|
|
--white: #FFFFFF;
|
|
--light-gray: #F7F8FA;
|
|
--text-dark: #333333;
|
|
--text-medium: #888888;
|
|
}
|
|
|
|
/* 应用原始样式类 */
|
|
.bg-tech-blue { background-color: var(--tech-blue); }
|
|
.bg-warm-orange { background-color: var(--warm-orange); }
|
|
.bg-light-gray { background-color: var(--light-gray); }
|
|
.text-tech-blue { color: var(--tech-blue); }
|
|
.text-text-dark { color: var(--text-dark); }
|
|
.text-text-medium { color: var(--text-medium); }
|
|
.border-tech-blue { border-color: var(--tech-blue); }
|
|
|
|
.personal-dashboard-page {
|
|
font-family: 'Noto Sans SC', sans-serif;
|
|
background-color: var(--light-gray);
|
|
color: var(--text-dark);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* 全局样式 */
|
|
body {
|
|
font-family: 'Noto Sans SC', sans-serif;
|
|
}
|
|
</style> |