feat: 完成情绪博物馆项目重构和功能增强 - 新增日记评论和帖子功能 - 重构前端架构，优化用户体验 - 完善WebSocket通信机制 - 更新项目文档和部署配置

2025-07-27 10:05:59 +08:00
parent 6903ac1c0d
commit cc886cd4d5
126 changed files with 21179 additions and 15734 deletions
@@ -0,0 +1,114 @@
+<template>
+  <div class="emotion-page">
+    <div class="container mx-auto px-4 py-8">
+      <div class="text-center mb-8">
+        <h1 class="text-3xl font-bold text-gray-900 mb-2">情绪管理</h1>
+        <p class="text-gray-600">记录和管理你的情绪变化</p>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- 情绪记录表单 -->
+        <div class="lg:col-span-1">
+          <div class="card">
+            <h2 class="text-xl font-semibold mb-4">记录今日情绪</h2>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">
+                  情绪评分
+                </label>
+                <el-rate v-model="emotionScore" :max="10" show-score />
+              </div>
+              
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">
+                  情绪类型
+                </label>
+                <el-select v-model="emotionType" placeholder="选择情绪类型" class="w-full">
+                  <el-option label="开心" value="happy" />
+                  <el-option label="平静" value="calm" />
+                  <el-option label="兴奋" value="excited" />
+                  <el-option label="焦虑" value="anxious" />
+                  <el-option label="悲伤" value="sad" />
+                  <el-option label="愤怒" value="angry" />
+                </el-select>
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">
+                  情绪描述
+                </label>
+                <el-input
+                  v-model="emotionDescription"
+                  type="textarea"
+                  :rows="4"
+                  placeholder="描述一下你今天的情绪..."
+                />
+              </div>
+
+              <el-button type="primary" class="w-full" @click="saveEmotion">
+                保存记录
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 情绪日历 -->
+        <div class="lg:col-span-2">
+          <div class="card">
+            <h2 class="text-xl font-semibold mb-4">情绪日历</h2>
+            <div class="text-center text-gray-500 py-12">
+              <el-icon class="text-4xl mb-4">
+                <Calendar />
+              </el-icon>
+              <p>情绪日历功能开发中...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 情绪趋势图 -->
+      <div class="mt-8">
+        <div class="card">
+          <h2 class="text-xl font-semibold mb-4">情绪趋势</h2>
+          <div class="text-center text-gray-500 py-12">
+            <el-icon class="text-4xl mb-4">
+              <TrendCharts />
+            </el-icon>
+            <p>情绪趋势图表功能开发中...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Calendar, TrendCharts } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+const emotionScore = ref(5)
+const emotionType = ref('')
+const emotionDescription = ref('')
+
+const saveEmotion = () => {
+  // TODO: 实现保存情绪记录的逻辑
+  ElMessage.success('情绪记录已保存')
+}
+</script>
+
+<style scoped>
+.emotion-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  background-attachment: fixed;
+}
+
+.emotion-page .container {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+</style>