feat

62c3f146 · liujiangnan · 2a2fc7b2 · 62c3f146 · 62c3f146 · 62c3f146
Commit 62c3f146 authored Jan 12, 2026 by liujiangnan
Expand all Show whitespace changes
Inline Side-by-side

Showing with 681 additions and 46 deletions

index.css form/index.css +4 -4

index.html form/index.html +97 -1

index.js form/index.js +560 -10

defaultData.json play/defaultData.json +20 -31

No files found.
--- a/form/index.css
+++ b/form/index.css
@@ -3,7 +3,7 @@
  margin: 0 auto;
  padding: 30px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  background: #fff;
  min-height: 100vh;
 }

@@ -16,7 +16,7 @@
  padding: 40px 20px;
  border: 3px dashed #d9d9d9;
  border-radius: 12px;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
@@ -76,7 +76,7 @@
 .video-section {
  text-align: center;
  margin-bottom: 30px;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
@@ -114,7 +114,7 @@
 #timeline {
  width: 100%;
  height: 40px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
+  background: #fff;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  padding: 5px 0;

--- a/form/index.html
+++ b/form/index.html
@@ -18,7 +18,7 @@
  <!-- 使用 module 模式引入依赖 -->
  <script type="module" src="./index.js"></script>
 </head>
-<body> 
+<body style="background-color: #fff;"> 
  <div id="app">
    <div class="ai-video-editor" 
         :element-loading-text="loadingText"
@@ -94,6 +94,14 @@
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>字幕生成结果</span>
+              <el-button 
+                v-if="subtitlesResult && subtitlesResult.subtitleJsonUrl && subtitlesResult.translatedJsonUrl"
+                size="mini" 
+                type="primary" 
+                style="float:right; margin-right:8px;" 
+                @click="openSubtitleEditor">
+                编辑
+              </el-button>
              <el-tag size="mini" type="success" style="float:right;">已完成</el-tag>
            </div>
            <div>
@@ -140,6 +148,94 @@
          </el-card>
        </div>
      </div>
+      
+      <!-- 全屏字幕编辑器 -->
+      <el-dialog
+        title="字幕编辑器"
+        :visible.sync="subtitleEditorVisible"
+        fullscreen
+        :close-on-click-modal="false"
+        :destroy-on-close="true"
+        @open="onSubtitleEditorOpen">
+        <div v-loading="subtitleEditorLoading">
+          <div style="margin-bottom:12px;">
+            <el-button type="primary" size="mini" @click="applyEditorChanges">保存修改</el-button>
+            <el-button type="danger" size="mini" @click="overwriteAndRegenerateLyrics">覆盖上传并重新生成歌词</el-button>
+          </div>
+          <div v-if="subtitleEditor && subtitleEditor.mergedList">
+            <el-timeline>
+              <el-timeline-item
+                v-for="item in subtitleEditor.mergedList"
+                :key="`tl-${item.index}`"
+                :timestamp="item.start"
+                placement="top"
+              >
+                <el-card shadow="never" body-style="padding:12px;">
+                  <div style="display:flex; align-items:center; gap:8px; color:#909399; font-size:12px; margin-bottom:4px;">
+                    <span>#{{ item.index }}</span>
+                    <span>{{ item.start }} - {{ item.end }}</span>
+                  </div>
+                  <div style="display:flex; align-items:center; gap:8px; font-size:16px; margin-bottom:4px;">
+                    <span style="display:block; line-height:1.05; margin:0; padding:0;">
+                      {{ buildSentenceFromWords(item.sWordsRef) }}
+                    </span>
+                  </div>
+                  <div style="display:flex; align-items:center; gap:8px; font-size:16px; margin-bottom:4px;">
+                    <span style="display:block; line-height:1.05; margin:0; padding:0; margin-top:-2px; color:#909399;">
+                      {{ buildSentenceFromTranslatedItems(item.tItemsRef) }}
+                    </span>
+                  </div>
+                  <div style="display:flex; gap:12px; margin-top:8px; flex-wrap:wrap;">
+                    <div style="flex:1; min-width:300px;">
+                      <div style="font-weight:500; margin-bottom:4px;">原文分词</div>
+                      <el-table :data="item.sWordsRef || []" size="mini" border>
+                        <el-table-column label="start" width="90">
+                          <template slot-scope="s">
+                            {{ formatTimeNumeric(s.row.start) }}
+                          </template>
+                        </el-table-column>
+                        <el-table-column label="end" width="90">
+                          <template slot-scope="s">
+                            {{ formatTimeNumeric(s.row.end) }}
+                          </template>
+                        </el-table-column>
+                        <el-table-column label="word">
+                          <template slot-scope="s">
+                            <el-input v-model="s.row.word" size="mini"></el-input>
+                          </template>
+                        </el-table-column>
+                      </el-table>
+                    </div>
+                    <div style="flex:1; min-width:300px;">
+                      <div style="font-weight:500; margin-bottom:4px;">翻译</div>
+                      <el-table :data="item.tItemsRef || []" size="mini" border>
+                        <el-table-column label="start" width="90">
+                          <template slot-scope="t">
+                            {{ formatTimeNumeric(t.row.start) }}
+                          </template>
+                        </el-table-column>
+                        <el-table-column label="end" width="90">
+                          <template slot-scope="t">
+                            {{ formatTimeNumeric(t.row.end) }}
+                          </template>
+                        </el-table-column>
+                        <el-table-column label="text">
+                          <template slot-scope="t">
+                            <el-input v-model="t.row.text" size="mini"></el-input>
+                          </template>
+                        </el-table-column>
+                      </el-table>
+                    </div>
+                  </div>
+                </el-card>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+          <div v-else>
+            <el-empty description="暂无数据"></el-empty>
+          </div>
+        </div>
+      </el-dialog>
    </div>
  </div>
 </body>

--- a/form/index.js
+++ b/form/index.js
--- a/play/defaultData.json
+++ b/play/defaultData.json
 {
-    "videoUrl": "https://staging-teach.cdn.ireadabc.com/bcb8b751b98371ea71956a1d1a447956.mp4",
-    "markers": [
-        {
-            "id": 1756951682854,
-            "time": 4.639372,
-            "text": "标记点 1",
-            "stem": "",
-            "description": "",
-            "title": "",
-            "questionType": "",
-            "options": null,
-            "matchingGroups": null,
-            "splitScreen": "one",
-            "gameData": {
-                "id": 1783460,
-                "cover": "http://staging-teach.cdn.ireadabc.com/89d6c301-94e2-4145-a795-7bc9ab409799.png",
-                "name": null,
-                "template_name": "shoot_bubble",
-                "last_version": 12,
-                "play_url": "play/index.html",
-                "form_url": "form/index.html?type=form",
-                "config": {
-                    "countdown": null,
-                    "correctJumpTo": null,
-                    "wrongJumpTo": null,
-                    "isRegionMarker": false
-                }
-            }
-        }
-    ],
+    "videoUrl": "https://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2.mp4",
    "playbackRate": 1,
-    "isOpenCamera": true
+    "subtitlesResult": {
+        "assUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2.ass",
+        "srtUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2.srt",
+        "vttUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2.vtt",
+        "audioUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_audio.wav",
+        "videoUrl": "https://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2.mp4",
+        "chineseAssUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_cn.ass",
+        "chineseSrtUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_cn.srt",
+        "chineseVttUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_cn.vtt",
+        "outputVideoUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_with_bilingual_subtitles.mp4",
+        "bilingualAssUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_bilingual.ass",
+        "subtitleJsonUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_subtitle.json",
+        "translatedJsonUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_translated.json"
+    },
+    "vocalResult": {
+        "noAudioUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_no_audio.mp4",
+        "onlyVocalUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_only_vocal.mp4",
+        "removeVocalUrl": "http://teach.cdn.ireadabc.com/b3be955c80a0b969a9e3166ad9f36ae2_remove_vocal.mp4"
+    }
 }
\ No newline at end of file