feat: 增强情绪博物馆项目功能 - 新增用户评论和帖子功能，优化前端架构和WebSocket通信 - 更新文档和部署配置

2025-07-29 07:38:47 +08:00
parent cc886cd4d5
commit 2f3d39fb00
142 changed files with 45645 additions and 0 deletions
@@ -0,0 +1,124 @@
+<template>
+  <div class="auth-layout min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+    <!-- 背景装饰 -->
+    <div class="absolute inset-0 overflow-hidden">
+      <div class="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full opacity-20 animate-pulse-slow"></div>
+      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-tr from-pink-400 to-yellow-500 rounded-full opacity-20 animate-bounce-gentle"></div>
+    </div>
+    
+    <!-- 主要内容 -->
+    <div class="relative w-full max-w-md">
+      <!-- Logo和标题 -->
+      <div class="text-center mb-8">
+        <div class="flex justify-center mb-4">
+          <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
+            <el-icon size="32" class="text-white">
+              <Sunny />
+            </el-icon>
+          </div>
+        </div>
+        <h1 class="text-3xl font-bold text-gray-900 mb-2">情绪博物馆</h1>
+        <p class="text-gray-600">记录情绪，分享心情的温暖空间</p>
+      </div>
+      
+      <!-- 认证表单容器 -->
+      <div class="bg-white rounded-2xl shadow-xl p-8 backdrop-blur-sm bg-opacity-95">
+        <router-view />
+      </div>
+      
+      <!-- 底部链接 -->
+      <div class="text-center mt-6 space-y-2">
+        <div class="flex justify-center space-x-4 text-sm text-gray-600">
+          <a href="#" class="hover:text-blue-600 transition-colors">帮助中心</a>
+          <span>·</span>
+          <a href="#" class="hover:text-blue-600 transition-colors">隐私政策</a>
+          <span>·</span>
+          <a href="#" class="hover:text-blue-600 transition-colors">服务条款</a>
+        </div>
+        <p class="text-xs text-gray-500">
+          © 2024 情绪博物馆. All rights reserved.
+        </p>
+      </div>
+    </div>
+    
+    <!-- 主题切换按钮 -->
+    <div class="absolute top-4 right-4">
+      <el-button circle @click="toggleTheme" class="bg-white bg-opacity-80 backdrop-blur-sm">
+        <el-icon>
+          <Sunny v-if="!isDarkTheme" />
+          <Moon v-else />
+        </el-icon>
+      </el-button>
+    </div>
+    
+    <!-- 语言切换按钮 -->
+    <div class="absolute top-4 left-4">
+      <el-dropdown @command="handleLanguageChange">
+        <el-button circle class="bg-white bg-opacity-80 backdrop-blur-sm">
+          <el-icon><Globe /></el-icon>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="zh-CN">中文</el-dropdown-item>
+            <el-dropdown-item command="en-US">English</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Sunny, Moon, Globe } from '@element-plus/icons-vue'
+import { useAppStore } from '@/stores/app'
+
+const appStore = useAppStore()
+
+// 计算属性
+const isDarkTheme = computed(() => appStore.isDarkTheme)
+
+// 方法
+const toggleTheme = () => {
+  appStore.toggleTheme()
+}
+
+const handleLanguageChange = (language: string) => {
+  appStore.setLanguage(language)
+}
+</script>
+
+<style scoped>
+.auth-layout {
+  background-image: 
+    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
+}
+
+@keyframes pulse-slow {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes bounce-gentle {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 4s ease-in-out infinite;
+}
+
+.animate-bounce-gentle {
+  animation: bounce-gentle 6s ease-in-out infinite;
+}
+</style>