Initial commit: AIGC项目完整代码

2025-10-21 16:50:33 +08:00
commit 47c8e02ab0
137 changed files with 30676 additions and 0 deletions
--- a/demo/frontend/src/App.vue
+++ b/demo/frontend/src/App.vue
@@ -0,0 +1,438 @@
+<template>
+  <div id="app" :data-route="route.name">
+    <!-- 导航栏 - 根据路由条件显示 -->
+    <NavBar v-if="shouldShowNavBar" />
+    
+    <!-- 主要内容区域 -->
+    <main :class="{ 'with-navbar': shouldShowNavBar }">
+      <router-view />
+    </main>
+    
+    <!-- 页脚 - 根据路由条件显示 -->
+    <Footer v-if="shouldShowFooter" />
+  </div>
+</template>
+
+<script setup>
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import NavBar from '@/components/NavBar.vue'
+import Footer from '@/components/Footer.vue'
+
+const route = useRoute()
+
+// 计算是否显示导航栏和页脚
+const shouldShowNavBar = computed(() => {
+  // 登录和注册页面不显示导航栏
+  return !['login', 'register'].includes(route.name)
+})
+
+const shouldShowFooter = computed(() => {
+  // 登录和注册页面不显示页脚
+  return !['login', 'register'].includes(route.name)
+})
+
+// 监听路由变化，动态设置页面样式
+watch(route, (newRoute) => {
+  console.log('路由变化:', newRoute.name)
+}, { immediate: true })
+
+console.log('App.vue 加载成功')
+</script>
+
+<style>
+/* 全局样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: #f5f5f5;
+}
+
+#app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+main {
+  flex: 1;
+  padding: 0;
+  position: relative;
+}
+
+main.with-navbar {
+  padding-top: 0; /* NavBar 是 fixed 定位，不需要 padding-top */
+}
+
+/* 确保登录页面全屏显示 */
+#app .login-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+}
+
+/* ========== 页面特殊样式 ========== */
+
+/* 欢迎页面 - 彩虹渐变背景 */
+#app[data-route="Welcome"] {
+  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
+  background-size: 400% 400%;
+  animation: rainbowShift 8s ease-in-out infinite;
+}
+
+@keyframes rainbowShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+/* 首页 - 科技感蓝色渐变 */
+#app[data-route="Home"] {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+}
+
+#app[data-route="Home"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    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%);
+  animation: homeGlow 6s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes homeGlow {
+  0% { opacity: 0.3; }
+  100% { opacity: 0.7; }
+}
+
+/* 个人主页 - 深色科技风 */
+#app[data-route="Profile"] {
+  background: #0a0a0a;
+  color: white;
+}
+
+#app[data-route="Profile"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 10% 20%, rgba(64, 158, 255, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 90% 80%, rgba(103, 194, 58, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgba(230, 162, 60, 0.05) 0%, transparent 50%);
+  animation: profileGlow 6s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes profileGlow {
+  0% { opacity: 0.3; }
+  100% { opacity: 0.6; }
+}
+
+/* 订单管理 - 商务紫色渐变 */
+#app[data-route="Orders"] {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+#app[data-route="Orders"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
+  animation: ordersPulse 5s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes ordersPulse {
+  0% { opacity: 0.3; transform: scale(1); }
+  100% { opacity: 0.6; transform: scale(1.02); }
+}
+
+/* 支付记录 - 金色渐变 */
+#app[data-route="Payments"] {
+  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+}
+
+#app[data-route="Payments"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 75% 75%, rgba(255, 165, 0, 0.1) 0%, transparent 50%);
+  animation: paymentShine 4s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes paymentShine {
+  0% { opacity: 0.4; }
+  100% { opacity: 0.8; }
+}
+
+/* 我的作品 - 创意绿色渐变 */
+#app[data-route="MyWorks"] {
+  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+}
+
+#app[data-route="MyWorks"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 40% 60%, rgba(168, 237, 234, 0.3) 0%, transparent 50%),
+    radial-gradient(circle at 60% 40%, rgba(254, 214, 227, 0.3) 0%, transparent 50%);
+  animation: worksFloat 7s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes worksFloat {
+  0% { transform: translateY(0px) rotate(0deg); }
+  100% { transform: translateY(-15px) rotate(2deg); }
+}
+
+/* 文生视频 - 蓝色科技风 */
+#app[data-route="TextToVideo"] {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+#app[data-route="TextToVideo"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.3) 0%, transparent 50%);
+  animation: textVideoFlow 6s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes textVideoFlow {
+  0% { opacity: 0.3; }
+  100% { opacity: 0.7; }
+}
+
+/* 图生视频 - 紫色梦幻风 */
+#app[data-route="ImageToVideo"] {
+  background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%);
+}
+
+#app[data-route="ImageToVideo"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 30% 30%, rgba(168, 192, 255, 0.3) 0%, transparent 50%),
+    radial-gradient(circle at 70% 70%, rgba(63, 43, 150, 0.3) 0%, transparent 50%);
+  animation: imageVideoDream 8s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes imageVideoDream {
+  0% { opacity: 0.2; transform: scale(1); }
+  100% { opacity: 0.6; transform: scale(1.05); }
+}
+
+/* 分镜视频 - 橙色活力风 */
+#app[data-route="StoryboardVideo"] {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+}
+
+#app[data-route="StoryboardVideo"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 25% 75%, rgba(255, 154, 158, 0.3) 0%, transparent 50%),
+    radial-gradient(circle at 75% 25%, rgba(254, 207, 239, 0.3) 0%, transparent 50%);
+  animation: storyboardBounce 5s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes storyboardBounce {
+  0% { opacity: 0.3; transform: translateY(0px); }
+  100% { opacity: 0.7; transform: translateY(-10px); }
+}
+
+/* 会员订阅 - 奢华金色 */
+#app[data-route="Subscription"] {
+  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+}
+
+#app[data-route="Subscription"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 20% 80%, rgba(252, 182, 159, 0.3) 0%, transparent 50%);
+  animation: subscriptionLuxury 6s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes subscriptionLuxury {
+  0% { opacity: 0.4; }
+  100% { opacity: 0.8; }
+}
+
+/* 管理员页面 - 深色专业风 */
+#app[data-route="AdminDashboard"],
+#app[data-route="AdminOrders"],
+#app[data-route="AdminUsers"] {
+  background: #1a1a1a;
+  color: white;
+}
+
+#app[data-route="AdminDashboard"]::before,
+#app[data-route="AdminOrders"]::before,
+#app[data-route="AdminUsers"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 10% 10%, rgba(0, 150, 255, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 90% 90%, rgba(255, 0, 150, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgba(0, 255, 150, 0.05) 0%, transparent 50%);
+  animation: adminTech 8s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes adminTech {
+  0% { opacity: 0.2; }
+  100% { opacity: 0.5; }
+}
+
+/* 注册页面 - 清新绿色渐变 */
+#app[data-route="Register"] {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+#app[data-route="Register"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
+  animation: registerFloat 4s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes registerFloat {
+  0% { transform: translateY(0px) rotate(0deg); }
+  100% { transform: translateY(-10px) rotate(1deg); }
+}
+
+/* 内容层级确保在所有背景效果之上 */
+#app main > * {
+  position: relative;
+  z-index: 2;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  main {
+    padding: 0;
+  }
+  
+  body {
+    font-size: 14px;
+  }
+  
+  /* 移动端减少动画效果 */
+  #app[data-route]::before {
+    animation-duration: 10s;
+  }
+}
+
+/* Element Plus 样式覆盖 */
+.el-button {
+  font-family: inherit;
+}
+
+.el-input {
+  font-family: inherit;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>