add super resolution ui

frontend/src/router/index.ts

@@ -53,6 +53,11 @@ const router = createRouter({
               name: 'make-article',
               component: () => import ('@/views/main/Article.vue'),
             },
+            {
+              path: 'make-image',
+              name: 'make-image',
+              component: () => import ('@/views/main/Image.vue'),
+            },
             {
               path: 'progress',
               name: 'progress',

frontend/src/views/main/Article.vue

@@ -1,59 +1,15 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref } from "vue";
 import { useMainStore } from "@/stores/main";
 import { required } from "@/utils";
 import { useI18n } from "vue-i18n";
-import type { VideoCreate } from "@/interfaces";
-import router from "@/router";
 
+const mainStore = useMainStore();
 const { t } = useI18n();
 const valid = ref(true);
 const dialog = ref(false);
 const title = ref("");
-const zipFiles = ref();
 const Form = ref();
-let anchor = ref(0);
-const anchorList = reactive([
-  {
-    anchor_id: 0,
-    language_id: 1,
-    name: "Angela",
-  },
-  {
-    anchor_id: 1,
-    language_id: 1,
-    name: "Peggy",
-  },
-  {
-    anchor_id: 2,
-    language_id: 1,
-    name: "Jocelyn",
-  },
-  {
-    anchor_id: 3,
-    language_id: 1,
-    name: "Summer",
-  },
-]);
-
-let anchorLang = ref("中文");
-let items = reactive([
-  { lang: "中文", id: 0 },
-  { lang: "英文", id: 1 },
-]);
-
-// 取得圖片路徑
-const getImageUrl = (name: string) => {
-  return new URL(`../../assets/img/anchor/${name}.webp`, import.meta.url).href;
-};
-
-const mainStore = useMainStore();
-
-watch(dialog, (newVal, oldVal) => {
-  if (!newVal) {
-    router.push("/main/progress");
-  }
-});
 
 async function Submit() {
   setTimeout(() => {
@@ -62,15 +18,6 @@ async function Submit() {
   await (Form as any).value.validate();
   if (valid.value) {
     valid.value = false;
-
-    const video_data: VideoCreate = {
-      title: title.value,
-      anchor_id: anchor.value,
-      lang_id: 0,
-    };
-
-    await mainStore.uploadPlot(video_data, zipFiles.value[0]);
-    // (Form as any).value.reset();
   }
 }
 </script>
@@ -117,13 +64,12 @@ async function Submit() {
                   icon="info"
                   color="orange-darken-3"
                 />
-                <p class="mt-3">影片處理需要約 5-10 分鐘，敬請耐心等候</p>
+                <p class="mt-3">文章處理需要約 5-10 分鐘，敬請耐心等候</p>
               </section>
             </v-card-text>
             <v-card-actions>
-              <v-btn color="primary" block @click="dialog = false">{{
-                t("close")
-              }}</v-btn>
+              <v-btn color="primary" block @click="dialog = false">
+              {{ t("close") }}</v-btn>
             </v-card-actions>
           </v-card>
         </v-dialog>
@@ -133,88 +79,4 @@ async function Submit() {
 </template>
 
 <style lang="scss">
-.anchor-list {
-  padding-left: 40px;
-  img {
-    width: 130px;
-    height: 110px;
-    object-fit: cover;
-  }
-  .v-card-item {
-    padding: 0;
-    text-align: center;
-    .v-card-title {
-      font-size: 18px;
-    }
-  }
-  .bg-success {
-    background: linear-gradient(
-      -225deg,
-      rgb(234, 84, 19) 35%,
-      rgb(178, 69, 146) 100%
-    ) !important;
-  }
-  .v-expansion-panel-title {
-    height: 55px;
-    min-height: 0;
-  }
-  .v-expansion-panel-text__wrapper {
-    padding: 0 !important;
-  }
-}
-.step-list {
-  list-style: none;
-  img {
-    width: 100%;
-    max-width: 800px;
-  }
-  li {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-size: 16px;
-    p {
-      line-height: 32px;
-    }
-    h4 {
-      margin: 20px auto;
-      color: #ea5413;
-      font-weight: bold;
-      text-align: center;
-      line-height: 34px;
-      font-size: 20px;
-    }
-  }
-
-  .link-btn {
-    display: inline-block;
-    padding: 12px 20px;
-    margin-top: 25px;
-    border-radius: 100px;
-    text-decoration: none;
-    color: #fff;
-    background: #ea5413;
-    transition: all 0.3s;
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  .point-list {
-    display: flex;
-    flex-direction: column;
-    align-items: baseline;
-    margin-left: 40px;
-  }
-
-  .excerpt::before {
-    content: "";
-    font-weight: bold;
-    display: inline-block;
-    border: 5px solid #ea5413;
-    border-radius: 20px;
-    margin-right: 10px;
-    margin-bottom: 2px;
-  }
-}
 </style>

frontend/src/views/main/Image.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, reactive, watch,computed } from "vue";
+import { useMainStore } from "@/stores/main";
+import { required } from "@/utils";
+import { useI18n } from "vue-i18n";
+
+const mainStore = useMainStore();
+const { t } = useI18n();
+const valid = ref(true);
+const dialog = ref(false);
+const title = ref("");
+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);
+  }
+}
+
+// async function Submit() {
+//   setTimeout(() => {
+//     dialog.value = true;
+//   }, 2000);
+//   await (Form as any).value.validate();
+//   if (valid.value) {
+//     valid.value = false;
+//   }
+// }
+
+const headers = [
+  {
+    title: "檔名",
+    sortable: true,
+    key: "name",
+    align: "left",
+  },
+  {
+    title: t("state"),
+    sortable: true,
+    key: "progress_state",
+    align: "left",
+  },
+  {
+    title: t("preview"),
+    key: "id",
+  },
+];
+
+</script>
+
+<template>
+  <v-container fluid>
+    <v-card class="ma-3 pa-3">
+      <v-card-title primary-title>
+        <h3 class="card-title mb-3">圖片優化</h3>
+      </v-card-title>
+      <v-card-text>
+        <v-form v-model="valid" ref="Form" class="img-form">
+          <img src="@/assets/img/icon/add-image.png" alt="" class="mb-4" />
+          <input
+            @change="upload()"
+            ref="imgFiles"
+            type="file"
+            multiple
+            class="file-input"
+          />
+          <p>請點擊加入圖片並開始優化</p>
+        </v-form>
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <v-btn
+          variant="flat"
+          size="large"
+          color="primary"
+          class="px-5"
+          prepend-icon="file_upload"
+          >上傳圖片</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+
+    <v-card class="ma-3 pa-3 mt-6 img-progress">
+        <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 }">
+          <v-icon icon="crop_original" />
+      </template>
+    </v-data-table>
+    </v-card>
+  </v-container>
+</template>
+
+<style lang="scss">
+.img-form {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  margin-left: -250px;
+  width: 500px;
+  height: 200px;
+  border: 2px dashed #b5b5b5;
+  .file-input {
+    position: absolute;
+    z-index: 100;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    opacity: 0;
+    cursor: pointer;
+  }
+  img {
+    position: absolute;
+    width: 50px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -80%);
+  }
+  p {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 50px;
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: 1px;
+  }
+}
+
+.img-progress {
+    .v-data-table-footer {
+        margin-top: 20px;
+    }
+}
+</style>

frontend/src/views/main/Main.vue

@@ -114,6 +114,9 @@ const routeGuardAdmin = async (
             <v-list-item to="/main/make-article" prepend-icon="article">
               <v-list-item-title>{{ t("article") }}</v-list-item-title>
             </v-list-item>
+            <v-list-item to="/main/make-image" prepend-icon="image">
+              <v-list-item-title>圖片優化</v-list-item-title>
+            </v-list-item>
             <!-- <v-list-item to="/main/profile/view" prepend-icon="person">
               <v-list-item-title>{{ t("userProfile") }}</v-list-item-title>
             </v-list-item> -->

frontend/src/views/main/Progress.vue

@@ -11,7 +11,7 @@ const videos = mainStoreRef.readVideos;
 
 const headers = [
   {
-    title: t("title"),
+    title: t("videoTitle"),
     sortable: true,
     key: "title",
     align: "left",