update gen seo

frontend/src/stores/main.ts

@@ -59,6 +59,8 @@ export const useMainStore = defineStore("MainStoreId", {
       try {
         const response = await api.logInGetToken(username, password);
         const token: string = response.data.access_token;
+        localStorage.setItem('email', username);
+
         if (token) {
           saveLocalToken(token);
           this.setToken(token);

frontend/src/views/Login.vue

@@ -15,6 +15,7 @@ const callback: CallbackTypes.CredentialCallback = (response: any) => {
   console.log("Handle the response", response);
   const userData: any = decodeCredential(response.credential);
   console.log("Handle the userData", userData);
+  localStorage.setItem("email", userData.email);
   mainStore.googleLogin(userData.email);
 };
 

frontend/src/views/main/KnowledgeGraph.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, computed } from "vue";
 import axios from "axios";
 
 let kwVal = ref(""); // 關鍵字
@@ -9,11 +9,21 @@ let haveStage = ref(false); // 是否有層級
 let searchState = ref(false); // 點擊查詢
 let searchLoading = ref(false); // 載入狀態
 let showStageBtn = ref(false); // 新增層級按鈕
+let regionsVal = ref(null); // 地區
+let languageVal = ref(null); // 語言
+let searchError = ref(false); // 查詢狀態
 
 // 取得最大層數
 async function getStage() {
+  if (!regionsVal.value || !languageVal.value) {
+    searchError.value = true;
+    return;
+  } else {
+    searchError.value = false;
+  }
+
   searchLoading.value = true;
-  let url = `https://cmm.ai:8083/get_stage3?kw=${kwVal.value}`;
+  let url = `https://cmm.ai:8083/get_stage3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}`;
 
   try {
     let response = await axios.get(url);
@@ -42,81 +52,51 @@ async function getStage() {
   }
 }
 
-let insertError = ref(false);
-let regionsVal = ref(null); // 地區
-let languageVal = ref(null); // 語言
+// let insertError = ref(false);
+// let insertRegionsVal = ref(null); // 新增地區
+// let insertLanguageVal = ref(null); // 新增語言
 
 // 新增關鍵字
 async function insertKw() {
   if (!regionsVal.value || !languageVal.value) {
-    insertError.value = true;
+    alert("請選擇要新增的地區及語言");
     return;
   }
 
-  let url = `https://cmm.ai:8083/insert_kw3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}`;
+  let email = localStorage.getItem("email");
+
+  let url = `https://cmm.ai:8083/insert_kw3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&email=${email}`;
 
   try {
     let response = await axios.put(url);
     console.log("新增關鍵字", response);
 
     if (response.status === 200) {
-      alert("關鍵字已加入排程中，請稍等");
+      alert("關鍵字已加入排程");
 
       // 清空地區及語言
-      regionsVal.value = null;
-      languageVal.value = null;
+      // insertRegionsVal.value = null;
+      // insertLanguageVal.value = null;
+
       // 關閉查詢結果
-      searchState.value = false;
+      // searchState.value = false;
     }
-  } catch (error) {
-    console.error("error", error);
-  }
-}
 
-let insertDialog = ref(false);
-let insertState = ref(false); // 點新增層級
-
-// function insert() {
-//   checkState.value = true;
-// }
-
-// 將所有流程包進來
-async function processData() {
-  console.log("processData", kwVal.value, stageVal.value);
-
-  const url = `https://cmm.ai:8084/check_kw_in_data3?kw=${kwVal.value}&stage=${stageVal.value}`;
-
-  try {
-    let response = await axios.get(url);
-    const message = response.data.message;
-
-    console.log("response", response);
-
-    if (message === "已查詢到關鍵字, 立即為您產圖.") {
-      var confirmNextStep = confirm(
-        "已查詢到關鍵字，立即為您產圖。" +
-          "\n是否要執行下一步操作？（點確定後將另開分頁）"
-      );
-
-      if (confirmNextStep) {
-        getHtml();
-      } else {
-        alert("取消操作");
-      }
-    }
+    getKwStateList();
   } catch (error) {
-    console.error("操作失敗", error);
-    alert("操作失敗，請重新操作。");
+    console.error("error", error);
   }
 }
 
+// let insertDialog = ref(false);
+// let insertState = ref(false); // 新增層級
 let graphContent = ref(""); // html code
 
 // 取得 html
 async function getHtml() {
   console.log("getHtml");
 
-  let url = `https://cmm.ai:8084/get_html3?kw=${kwVal.value}&stage=${stageVal.value}`;
+  let url = `https://cmm.ai:8083/get_html3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&stage=${stageVal.value}`;
 
   try {
     let response = await axios.get(url);
@@ -138,16 +118,6 @@ async function getHtml() {
   }
 }
 
-// 插入資料
-function insertData(kw) {
-  let url = `https://cmm.ai:8084/insert_data3?kw=${kwVal.value}`;
-
-  axios.put(url).then(function (response) {
-    const message = response.data.message; // 假設 API 返回一個帶有消息的 JSON
-    alert(message);
-  });
-}
-
 // 地區
 const regionsList = reactive([
   { region: "台灣", code: "tw" },
@@ -202,6 +172,94 @@ const languageList = [
   { language: "斯洛文尼亞語", code: "sl" },
   { language: "克羅埃西亞語", code: "hr" },
 ];
+
+let stateList = reactive([]);
+
+// 取得關鍵字狀態
+async function getKwStateList() {
+  let email = localStorage.getItem("email");
+
+  let url = `https://cmm.ai:8083/get_user_kw_state3?email=${email}`;
+
+  try {
+    let response = await axios.get(url);
+    console.log("response", response.data.message);
+
+    let list = response.data.message;
+
+    if (list.length) {
+      stateList.length = 0;
+      list.map((item) => {
+        stateList.push(item);
+      });
+      console.log("stateList", stateList);
+    }
+  } catch (error) {
+    console.error("error", error);
+  }
+}
+
+getKwStateList();
+
+const headers = [
+  {
+    title: "關鍵字",
+    sortable: true,
+    key: "kw",
+    align: "left",
+  },
+  {
+    title: "狀態",
+    sortable: true,
+    key: "state",
+    align: "left",
+  },
+];
+
+// 計算下拉選單層級數
+const filteredStage = computed(() => {
+  return Array.from({ length: maxStage.value }, (_, i) => (i + 1).toString());
+});
+
+// 插入資料
+// function insertData(kw) {
+//   let url = `https://cmm.ai:8084/insert_data3?kw=${kwVal.value}`;
+
+//   axios.put(url).then(function (response) {
+//     const message = response.data.message; // 假設 API 返回一個帶有消息的 JSON
+//     alert(message);
+//   });
+// }
+
+// // 將所有流程包進來
+// async function processData() {
+//   console.log("processData", kwVal.value, stageVal.value);
+
+//   const url = `https://cmm.ai:8084/check_kw_in_data3?kw=${kwVal.value}&stage=${stageVal.value}`;
+
+//   try {
+//     let response = await axios.get(url);
+//     const message = response.data.message;
+
+//     console.log("response", response);
+
+//     if (message === "已查詢到關鍵字, 立即為您產圖.") {
+//       var confirmNextStep = confirm(
+//         "已查詢到關鍵字，立即為您產圖。" +
+//           "\n是否要執行下一步操作？（點確定後將另開分頁）"
+//       );
+
+//       if (confirmNextStep) {
+//         getHtml();
+//       } else {
+//         alert("取消操作");
+//       }
+//     }
+//   } catch (error) {
+//     console.error("操作失敗", error);
+//     alert("操作失敗，請重新操作。");
+//   }
+// }
 </script>
 
 <template>
@@ -211,7 +269,7 @@ const languageList = [
         <h3 class="card-title mb-3">GEN SEO</h3>
       </v-card-title>
       <v-card-text class="card-content">
-        <div class="d-flex align-center">
+        <div class="d-flex flex-column">
           <v-text-field
             v-model="kwVal"
             label="關鍵字"
@@ -222,27 +280,58 @@ const languageList = [
             class="mr-5 search-field"
           ></v-text-field>
 
-          <!-- <v-select
-            v-model="stageVal"
-            label="層級"
-            density="compact"
-            :items="['1', '2', '3', '4', '5']"
-            variant="solo"
-            hide-details
-            class="my-7 my-md-0 mx-md-5"
-          ></v-select> -->
-
-          <button @click="getStage()" class="search-btn">
-            <v-progress-circular
-              v-if="searchLoading"
-              :width="3"
-              :size="20"
-              color="white"
-              class="pb-1"
-              indeterminate
-            ></v-progress-circular>
-            <p v-else>查詢</p>
-          </button>
+          <div class="d-flex align-center mt-5">
+            <v-select
+              v-model="regionsVal"
+              label="地區"
+              density="compact"
+              :items="regionsList"
+              item-title="region"
+              item-value="code"
+              variant="solo"
+              hide-details
+              :rules="[(value) => !!value || '尚未選擇地區']"
+            ></v-select>
+
+            <v-select
+              v-model="languageVal"
+              label="語言"
+              density="compact"
+              :items="languageList"
+              item-title="language"
+              item-value="code"
+              variant="solo"
+              hide-details
+              class="mx-5"
+              :rules="[(value) => !!value || '尚未選擇語言']"
+            ></v-select>
+
+            <!-- <v-select
+              v-model="stageVal"
+              label="層級"
+              density="compact"
+              :items="['1', '2', '3', '4', '5']"
+              variant="solo"
+              hide-details
+              class="my-7 my-md-0 mx-md-5"
+            ></v-select> -->
+
+            <button @click="getStage()" class="search-btn">
+              <v-progress-circular
+                v-if="searchLoading"
+                :width="3"
+                :size="20"
+                color="white"
+                class="pb-1"
+                indeterminate
+              ></v-progress-circular>
+              <p v-else>查詢</p>
+            </button>
+          </div>
+
+          <p v-if="searchError" class="text-error mt-3 ml-3">
+            請選擇查詢地區及語言
+          </p>
         </div>
       </v-card-text>
     </v-card>
@@ -255,7 +344,18 @@ const languageList = [
         <div v-if="haveStage" class="d-flex flex-column">
           <span class="d-flex align-center">
             <p class="pt-1 mr-5">目前最大層級：{{ maxStage }}</p>
+
             <v-btn
+              v-if="showStageBtn"
+              @click="insertKw()"
+              variant="outlined"
+              color="primary"
+              size="small"
+            >
+              新增層級
+            </v-btn>
+
+            <!-- <v-btn
               v-if="showStageBtn"
               @click="
                 insertDialog = true;
@@ -272,7 +372,7 @@ const languageList = [
               <v-card width="400" title="新增層級">
                 <v-card-text class="d-flex mt-5">
                   <v-select
-                    v-model="regionsVal"
+                    v-model="insertRegionsVal"
                     label="地區"
                     density="compact"
                     :items="regionsList"
@@ -284,7 +384,7 @@ const languageList = [
                   ></v-select>
 
                   <v-select
-                    v-model="languageVal"
+                    v-model="insertLanguageVal"
                     label="語言"
                     density="compact"
                     :items="languageList"
@@ -309,7 +409,8 @@ const languageList = [
                   </v-btn>
                 </v-card-actions>
               </v-card>
-            </v-dialog>
+            </v-dialog> -->
+
             <!-- <button @click="getStage()" class="insert-btn">新增層級</button> -->
           </span>
 
@@ -318,7 +419,7 @@ const languageList = [
               v-model="stageVal"
               label="請選擇層級"
               density="compact"
-              :items="['1', '2', '3', '4', '5']"
+              :items="filteredStage"
               variant="solo"
               hide-details
             ></v-select>
@@ -328,11 +429,22 @@ const languageList = [
         </div>
 
         <div v-else>
-          <p>未查詢到關鍵字，請選擇要搜尋的地區及語言：</p>
+          <p>未查詢到符合的關鍵字</p>
+
+          <v-btn
+            @click="insertKw()"
+            variant="outlined"
+            color="primary"
+            class="mt-3"
+          >
+            新增關鍵字
+          </v-btn>
+
+          <!-- <p>未查詢到關鍵字，請選擇要搜尋的地區及語言：</p>
 
           <span class="d-flex mt-5">
             <v-select
-              v-model="regionsVal"
+              v-model="insertRegionsVal"
               label="地區"
               density="compact"
               :items="regionsList"
@@ -344,7 +456,7 @@ const languageList = [
             ></v-select>
 
             <v-select
-              v-model="languageVal"
+              v-model="insertLanguageVal"
               label="語言"
               density="compact"
               :items="languageList"
@@ -359,10 +471,41 @@ const languageList = [
             <p v-if="insertError" class="text-error">請選擇地區及語言</p>
 
             <button @click="insertKw()" class="search-btn">送出</button>
-          </span>
+          </span> -->
         </div>
       </v-card-text>
     </v-card>
+
+    <!-- 關鍵字狀態清單 -->
+    <v-data-table
+      v-if="stateList.length"
+      class="pa-5"
+      :headers="headers"
+      :items="stateList"
+    >
+      <template v-slot:item.state="{ item }">
+        <span v-if="item.raw.state === '已完成'">
+          <v-icon icon="check_circle" color="success" />
+          已完成
+        </span>
+        <span v-else-if="item.raw.state === '等待中'">
+          <v-icon icon="pending" color="warning" />
+          等待中
+        </span>
+        <span v-else-if="item.raw.state === '運行中'">
+          <v-progress-circular
+            indeterminate
+            color="info"
+            style="width: 20px"
+          ></v-progress-circular>
+          運行中
+        </span>
+        <!-- <span v-else>
+          <v-icon icon="warning" color="error" />
+          失敗
+        </span> -->
+      </template>
+    </v-data-table>
   </v-container>
 </template>
 
@@ -372,6 +515,10 @@ const languageList = [
     max-width: 10rem;
   }
 
+  .v-data-table-footer {
+    margin-top: 1rem;
+  }
+
   .search-field {
     max-width: 21rem;
   }