Merge branch 'front-dev' of http://git.choozmo.com:3000/ai-anchor/video-maker

frontend/src/views/main/Image.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch,computed } from "vue";
+import { ref, reactive } from "vue";
 import { useMainStore } from "@/stores/main";
 import { required } from "@/utils";
 import { useI18n } from "vue-i18n";
@@ -13,20 +13,11 @@ const Form = ref();
 let imgFiles = ref();
 let imgList: any[] = reactive([]);
 
-const plusOne = computed(() => imgFiles.value.files)
-console.log('plusOne',plusOne);
-
-
-watch(imgList, (newVal, oldVal) => {
-  console.log('newVal',newVal);
-  
-});
-
 async function upload() {
   for (let i = 0; i < imgFiles.value.files.length; i++) {
     const item = imgFiles.value.files[i];
-    imgList.push(item)
-    console.log('element',item.name);
+    imgList.push(item);
+    console.log("element", item.name);
   }
 }
 
@@ -58,7 +49,6 @@ const headers = [
     key: "id",
   },
 ];
-
 </script>
 
 <template>
@@ -93,38 +83,37 @@ const headers = [
     </v-card>
 
     <v-card class="ma-3 pa-3 mt-6 img-progress">
-        <v-card-title primary-title>
+      <v-card-title primary-title>
         <h3 class="card-title mb-3">上傳清單</h3>
       </v-card-title>
 
-
       <v-data-table :headers="headers" :items="imgList">
-      <template v-slot:item.progress_state="{ item }">
-        <span v-if="item.raw.progress_state === 'completed'">
-          <v-icon icon="check_circle" color="success" />
-          完成
-        </span>
-        <span v-else-if="item.raw.progress_state === 'waiting'">
-          <v-icon icon="pending" color="warning" />
-          等待中
-        </span>
-        <span v-else-if="item.raw.progress_state === 'processing'">
-          <v-progress-circular
-            indeterminate
-            color="info"
-            style="width: 20px"
-          ></v-progress-circular>
-          處理中
-        </span>
-        <span v-else>
-          <v-icon icon="check_circle" color="success" />
-          完成
-        </span>
-      </template>
-      <template v-slot:item.id="{ item }">
+        <template v-slot:item.progress_state="{ item }">
+          <span v-if="item.raw.progress_state === 'completed'">
+            <v-icon icon="check_circle" color="success" />
+            完成
+          </span>
+          <span v-else-if="item.raw.progress_state === 'waiting'">
+            <v-icon icon="pending" color="warning" />
+            等待中
+          </span>
+          <span v-else-if="item.raw.progress_state === 'processing'">
+            <v-progress-circular
+              indeterminate
+              color="info"
+              style="width: 20px"
+            ></v-progress-circular>
+            處理中
+          </span>
+          <span v-else>
+            <v-icon icon="check_circle" color="success" />
+            完成
+          </span>
+        </template>
+        <template v-slot:item.id="{ item }">
           <v-icon icon="crop_original" />
-      </template>
-    </v-data-table>
+        </template>
+      </v-data-table>
     </v-card>
   </v-container>
 </template>
@@ -168,8 +157,8 @@ const headers = [
 }
 
 .img-progress {
-    .v-data-table-footer {
-        margin-top: 20px;
-    }
+  .v-data-table-footer {
+    margin-top: 20px;
+  }
 }
 </style>

frontend/src/views/main/Upload.vue

@@ -55,37 +55,82 @@ const anchorList = reactive([
   {
     anchor_id: 4,
     language_id: 1,
-    name: "主播-01",
+    name: "半身主播-1",
   },
   {
     anchor_id: 5,
     language_id: 1,
-    name: "主播-02",
+    name: "半身主播-2",
   },
   {
     anchor_id: 6,
     language_id: 1,
-    name: "主播-03",
+    name: "半身主播-3",
   },
   {
     anchor_id: 7,
     language_id: 1,
-    name: "主播-04",
+    name: "半身主播-4",
   },
   {
     anchor_id: 8,
     language_id: 1,
-    name: "主播-05",
+    name: "半身主播-5",
   },
   {
     anchor_id: 9,
     language_id: 1,
-    name: "主播-06",
+    name: "半身主播-6",
   },
   {
     anchor_id: 10,
     language_id: 1,
-    name: "主播-07",
+    name: "半身主播-7",
+  },
+  {
+    anchor_id: 11,
+    language_id: 1,
+    name: "半身主播-8",
+  },
+  {
+    anchor_id: 12,
+    language_id: 1,
+    name: "半身主播-9",
+  },
+  {
+    anchor_id: 13,
+    language_id: 1,
+    name: "半身主播-10",
+  },
+  {
+    anchor_id: 14,
+    language_id: 1,
+    name: "半身主播-11",
+  },
+  {
+    anchor_id: 15,
+    language_id: 1,
+    name: "半身主播-12",
+  },
+  {
+    anchor_id: 16,
+    language_id: 1,
+    name: "半身主播-13",
+  },
+  {
+    anchor_id: 17,
+    language_id: 1,
+    name: "半身主播-14",
+  },
+  {
+    anchor_id: 18,
+    language_id: 1,
+    name: "半身主播-15",
+  },
+  {
+    anchor_id: 19,
+    language_id: 1,
+    name: "半身主播-16",
   },
 ]);
 
@@ -221,7 +266,7 @@ async function Submit() {
             <v-expansion-panel-text class="p-0">
               <v-sheet class="mx-auto">
                 <v-slide-group
-                  v-model="anchor"
+                  v-model="templateId"
                   selected-class="bg-primary"
                   show-arrows
                 >