项目重构: 整理目录结构, 更新前后端代码, 添加测试和数据库迁移

demo/frontend/src/views/StoryboardVideoCreate.vue

@@ -21,6 +21,8 @@
       </div>
     </header>
 
+<!-- 分镜视频创作逻辑改了3版，有很多逻辑用不上但是我保留了，谁知道什么时候就又用上了 -->
+
     <!-- 用户菜单下拉 -->
     <Teleport to="body">
       <div v-if="showUserMenu" class="user-menu-teleport" :style="menuStyle">
@@ -46,6 +48,14 @@
             <el-icon><Warning /></el-icon>
             <span>错误统计</span>
           </div>
+          <div class="menu-item" @click.stop="goToApiManagement">
+            <el-icon><Document /></el-icon>
+            <span>{{ t('nav.apiManagement') }}</span>
+          </div>
+          <div class="menu-item" @click.stop="goToTaskRecord">
+            <el-icon><Document /></el-icon>
+            <span>{{ t('nav.tasks') }}</span>
+          </div>
         </template>
         <!-- 修改密码（所有登录用户可见） -->
         <div class="menu-item" @click.stop="goToChangePassword" style="cursor: pointer;">
@@ -567,7 +577,7 @@ const isAuthenticated = computed(() => userStore.isAuthenticated)
 // 表单数据
 const inputText = ref('')
 const videoPrompt = ref('') // 视频生成提示词
-const aspectRatio = ref('16:9')
+const aspectRatio = ref('9:16')
 const duration = ref('15')
 const hdMode = ref(false)
 const imageModel = ref('nano-banana2')
@@ -704,6 +714,16 @@ const goToErrorStats = () => {
   router.push('/admin/error-statistics')
 }
 
+const goToApiManagement = () => {
+  showUserMenu.value = false
+  router.push('/api-management')
+}
+
+const goToTaskRecord = () => {
+  showUserMenu.value = false
+  router.push('/generate-task-record')
+}
+
 const goToChangePassword = () => {
   showUserMenu.value = false
   router.push('/change-password')
@@ -2733,6 +2753,9 @@ const checkLastTaskStatus = async () => {
 }
 
 onMounted(async () => {
+  // 强制刷新用户信息，确保获取管理员修改后的最新数据
+  await userStore.fetchCurrentUser()
+  
   // 处理"做同款"传递的路由参数
   if (route.query.prompt || route.query.referenceImage) {
     console.log('[做同款] 接收参数:', route.query)
@@ -4439,12 +4462,11 @@ onBeforeUnmount(() => {
 
 .video-player {
   position: relative;
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-  max-height: 100%;
-  background: #1a1a1a;
-  border-radius: 12px;
+  width: 80%;
+  max-width: 1000px;
+  aspect-ratio: 16/9;
+  background: #000;
+  border-radius: 8px;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -4453,11 +4475,8 @@ onBeforeUnmount(() => {
 
 .result-video {
   width: 100%;
-  height: auto;
-  max-height: 100%;
-  max-width: 100%;
+  height: 100%;
   object-fit: contain;
-  border-radius: 12px;
   display: block;
 }
 
@@ -4742,6 +4761,7 @@ onBeforeUnmount(() => {
   position: relative;
 }
 
+
 .history-placeholder {
   width: 100%;
   height: 100%;
@@ -4804,7 +4824,7 @@ onBeforeUnmount(() => {
 .history-video-thumbnail video {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   cursor: pointer;
   display: block;
 }