Add update logs and router

lisongxuan · Aug 28, 2024 · e6e6dfe · e6e6dfe
1 parent a5092d5
commit e6e6dfe
Show file tree

Hide file tree

Showing 14 changed files with 357 additions and 60 deletions.
diff --git a/apis/requirements.txt b/apis/requirements.txt
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,8 @@
     "element-plus": "^2.6.2",
     "js-cookie": "^3.0.5",
     "vue": "^3.4.21",
-    "vue-i18n": "^9.14.0"
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@iconify-json/ep": "^1.1.15",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -4,6 +4,7 @@
     <BaseHeader />
     <div class="flex main-container">
       <div class="custom-width py-4">
+
         <div class="flex-row">
 
           <el-select

diff --git a/frontend/src/Home.vue b/frontend/src/Home.vue
@@ -0,0 +1,13 @@
+<!-- src/App.vue -->
+<template>
+    <div id="home">
+
+      <router-view />
+    </div>
+  </template>
+
+  <script>
+  export default {
+    name: 'Home'
+  }
+  </script>
diff --git a/frontend/src/UpdateLog.vue b/frontend/src/UpdateLog.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed, provide, watch } from 'vue'
+import { ElMessage } from "element-plus";
+import { useI18n } from 'vue-i18n';
+import Cookies from 'js-cookie';
+const { t ,locale} = useI18n();
+defineProps<{ msg: string }>();
+
+onMounted(() => {
+  const storedPageLanguage = Cookies.get('pageLanguage');
+  if (storedPageLanguage) {
+    locale.value = JSON.parse(storedPageLanguage);
+  }
+  document.title = t('updateLog.pageTitle');
+});
+</script>
+
+<template>
+  <el-config-provider namespace="ep">
+    <EmptyHeader />
+    <div>
+      <div w="full" py="4">
+        <h1 color="$ep-color-primary">{{$t('updateLog.title')}}</h1>
+      </div>
+      <div v-for="log in $tm('updateLog.content')" :key="log.version" :timestamp="log.date" placement="top">
+            <h3>{{ log.version }}</h3>
+            <h4>{{ log.date }}</h4>
+              <p v-for="detail in log.detail" :key="detail">{{ detail }}</p>
+              <div style="height: 20px;"></div>
+      </div>
+
+    </div>
+  </el-config-provider>
+</template>
+
+<style>
+#app {
+  text-align: center;
+  color: var(--ep-text-color-primary);
+}
+
+.main-container {
+  height: calc(100vh - var(--ep-menu-item-height) - 3px);
+}
+
+.ep-button {
+  margin: 4px;
+}
+
+.ep-button + .ep-button {
+  margin-left: 0;
+  margin: 4px;
+}
+</style>
diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -25,6 +26,12 @@ declare module 'vue' {
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    EmptyHeader: typeof import('./components/layouts/EmptyHeader.vue')['default']
+    MainManu: typeof import('./components/layouts/MainManu.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }
diff --git a/frontend/src/components/layouts/BaseHeader.vue b/frontend/src/components/layouts/BaseHeader.vue
@@ -42,60 +42,7 @@
       >
       <el-menu-item index="exact">{{$t('header.exact')}}</el-menu-item></el-tooltip>
     </el-menu>
-
-    <el-menu
-      class="el-menu-demo"
-      mode="horizontal"
-      :ellipsis="false"
-    >
-      <div class="flex-grow" />
-      <el-sub-menu index="3">
-        <template #title>
-        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>
-      </template>
-        <el-menu-item index="3-1" @click="selectLanguage('zh')">中文</el-menu-item>
-        <el-menu-item index="3-2" @click="selectLanguage('en')">English</el-menu-item>
-    </el-sub-menu>
-      <el-menu-item h="full"  @click="dialogFormVisible = true">
-        <button
-          class="border-none w-full bg-transparent cursor-pointer"
-          style="height: var(--ep-menu-item-height)"
-        > 
-          <i inline-flex i="ep-setting" />
-        </button>
-      </el-menu-item>
-      <el-menu-item h="full" @click="toggleDark()">
-        <button
-          class="border-none w-full bg-transparent cursor-pointer"
-          style="height: var(--ep-menu-item-height)"
-        >
-          <i inline-flex i="dark:ep-moon ep-sunny" />
-        </button>
-      </el-menu-item>
-
-      <el-sub-menu index="2">
-        <template #title>{{$t('header.about')}}</template>
-        <el-menu-item index="2-1"><a href="https://arkady14.me" target="_blank" class="github-link">{{$t('header.author')}}</a></el-menu-item>
-        <el-menu-item index="2-2">
-          <a href="https://github.com/lisongxuan/FFXIV-text-search-engine" target="_blank" class="github-link">
-            {{$t('header.github')}}
-          </a>
-        </el-menu-item>
-        <el-menu-item index="2-3" @click="copyToClipboard('[email protected]')">
-          {{$t('header.contactmail')}}
-        </el-menu-item>
-        <el-menu-item index="2-4" @click="copyToClipboard('719279154')">
-          {{$t('header.contactqq')}}
-        </el-menu-item>
-        <el-tooltip
-        class="box-item"
-        effect="dark"
-        :content="$t('header.temporary')"
-        placement="bottom-start"
-      >
-        <el-menu-item index="2-5" disabled>{{$t('header.updatelog')}}</el-menu-item></el-tooltip>
-      </el-sub-menu>
-    </el-menu>
+<MainManu/>
   </div>
 </template>
 

diff --git a/frontend/src/components/layouts/EmptyHeader.vue b/frontend/src/components/layouts/EmptyHeader.vue
@@ -0,0 +1,77 @@
+// EmptyHeader.vue
+<template>
+  <div class="menus-container"> 
+    <el-menu
+      class="el-menu-demo"
+      mode="horizontal"
+      :ellipsis="false"
+    >
+    <el-menu-item index="0" :to="{ path: '/' }">
+  <img src="/favicon.png" v-if="!isDark" style="width: 100%; height: 100%; margin-right: 8px;">
+  <img src="/favicon-dark.png" v-else style="width: 100%; height: 100%; margin-right: 8px;" >
+  {{  $t('header.title') }}
+</el-menu-item>
+    </el-menu>
+    <MainManu />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, inject, Ref } from 'vue'
+import { ElMessage } from 'element-plus';
+import { toggleDark ,isDark} from '~/composables';
+import Setting from 'path/to/Setting.vue'; // Import the Setting component
+import { useI18n } from 'vue-i18n';
+import Cookies from 'js-cookie';
+const { t ,locale} = useI18n();
+const selected = inject<Ref<string>>('headerSelected', ref('include'))
+const dialogFormVisible = inject<Ref<Boolean>>('dialogFormVisible', ref(false))
+const handleSelect = (key: string, keyPath: string[]) => {
+  selected.value = key
+}
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    // 使用 ElMessage 显示复制成功的提示
+    ElMessage({
+      message: t('header.copysuccess'),
+      type: 'success',
+      duration: 3000, // 持续时间，单位毫秒
+    });
+  }).catch(err => {
+    // 使用 ElMessage 显示复制失败的提示
+    ElMessage.error({
+      message: t('header.copyfail'),
+      duration: 3000, // 持续时间，单位毫秒
+    });
+    console.error(t('header.copyfail'), err);
+  });
+
+}
+const selectLanguage = (lang: string) => {
+  locale.value = lang;
+  Cookies.set('pageLanguage', JSON.stringify(lang), { expires: 7 }); // cookies有效期为7天
+  ElMessage({
+      message: t('header.selectlanguagesuccess'),
+      type: 'success',
+      duration: 6000, // 持续时间，单位毫秒
+    });
+}
+</script>
+
+<style>
+.flex-grow {
+  flex-grow: 1;
+}
+.github-link {
+  color: inherit; /* 继承父元素的字体颜色 */
+  text-decoration: none; /* 去除下划线 */
+  display: flex; /* 使链接内容居中 */
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+}
+.menus-container {
+  display: flex; 
+  justify-content: space-between; 
+}
+
+</style>
diff --git a/frontend/src/components/layouts/MainManu.vue b/frontend/src/components/layouts/MainManu.vue
@@ -0,0 +1,115 @@
+// MainManu.vue
+<template>
+
+    <el-menu
+      class="el-menu-demo"
+      mode="horizontal"
+      :ellipsis="false"
+    >
+      <div class="flex-grow" />
+      <el-sub-menu index="3">
+        <template #title>
+        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>
+      </template>
+        <el-menu-item index="3-1" @click="selectLanguage('zh')">中文</el-menu-item>
+        <el-menu-item index="3-2" @click="selectLanguage('en')">English</el-menu-item>
+    </el-sub-menu>
+      <el-menu-item h="full"  @click="dialogFormVisible = true">
+        <button
+          class="border-none w-full bg-transparent cursor-pointer"
+          style="height: var(--ep-menu-item-height)"
+        > 
+          <i inline-flex i="ep-setting" />
+        </button>
+      </el-menu-item>
+      <el-menu-item h="full" @click="toggleDark()">
+        <button
+          class="border-none w-full bg-transparent cursor-pointer"
+          style="height: var(--ep-menu-item-height)"
+        >
+          <i inline-flex i="dark:ep-moon ep-sunny" />
+        </button>
+      </el-menu-item>
+
+      <el-sub-menu index="2">
+        <template #title>{{$t('header.about')}}</template>
+        <el-menu-item index="2-1"><a href="https://arkady14.me" target="_blank" class="github-link">{{$t('header.author')}}</a></el-menu-item>
+        <el-menu-item index="2-2">
+          <a href="https://github.com/lisongxuan/FFXIV-text-search-engine" target="_blank" class="github-link">
+            {{$t('header.github')}}
+          </a>
+        </el-menu-item>
+        <el-menu-item index="2-3" @click="copyToClipboard('[email protected]')">
+          {{$t('header.contactmail')}}
+        </el-menu-item>
+        <el-menu-item index="2-4" @click="copyToClipboard('719279154')">
+          {{$t('header.contactqq')}}
+        </el-menu-item>
+
+      <el-menu-item index="2-5">
+        <a :href="$router.resolve({ path: '/log' }).href" target="_blank" class="github-link">{{$t('header.updatelog')}}</a>
+      </el-menu-item>
+      </el-sub-menu>
+    </el-menu>
+
+</template>
+
+<script lang="ts" setup>
+import { ref, inject, Ref } from 'vue'
+import { ElMessage } from 'element-plus';
+import { toggleDark ,isDark} from '~/composables';
+import Setting from 'path/to/Setting.vue'; // Import the Setting component
+import { useI18n } from 'vue-i18n';
+import Cookies from 'js-cookie';
+const { t ,locale} = useI18n();
+const selected = inject<Ref<string>>('headerSelected', ref('include'))
+const dialogFormVisible = inject<Ref<Boolean>>('dialogFormVisible', ref(false))
+const handleSelect = (key: string, keyPath: string[]) => {
+  selected.value = key
+}
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    // 使用 ElMessage 显示复制成功的提示
+    ElMessage({
+      message: t('header.copysuccess'),
+      type: 'success',
+      duration: 3000, // 持续时间，单位毫秒
+    });
+  }).catch(err => {
+    // 使用 ElMessage 显示复制失败的提示
+    ElMessage.error({
+      message: t('header.copyfail'),
+      duration: 3000, // 持续时间，单位毫秒
+    });
+    console.error(t('header.copyfail'), err);
+  });
+
+}
+const selectLanguage = (lang: string) => {
+  locale.value = lang;
+  Cookies.set('pageLanguage', JSON.stringify(lang), { expires: 7 }); // cookies有效期为7天
+  ElMessage({
+      message: t('header.selectlanguagesuccess'),
+      type: 'success',
+      duration: 6000, // 持续时间，单位毫秒
+    });
+}
+</script>
+
+<style>
+.flex-grow {
+  flex-grow: 1;
+}
+.github-link {
+  color: inherit; /* 继承父元素的字体颜色 */
+  text-decoration: none; /* 去除下划线 */
+  display: flex; /* 使链接内容居中 */
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+}
+.menus-container {
+  display: flex; 
+  justify-content: space-between; 
+}
+
+</style>
diff --git a/frontend/src/languages/en.js b/frontend/src/languages/en.js
@@ -38,6 +38,31 @@ const en = {
         fr:"French",
         kr:"Korean",
         allLanguages:"All Languages",
+    },
+    updateLog:{
+        title:"Update Log",
+        pageTitle:"Update Log - Final Fantasy XIV Text Searcher",
+        content:[
+            {
+                version:"1.1.0",
+                date:"2024-08-28",
+                detail:[
+                    "1. Added multi-language support",
+                    "2. Added update log",
+                ]
+            },
+            {
+                version:"1.0.0",
+                date:"2024-08-02",
+                detail:[
+                    "1. Basic functions implemented",
+                    "2. Supported partial search, similar search, exact search",
+                    "3. Supported setting default language, data per page",
+                    "4. Supported storing settings with Cookies",
+                    "5. Supported custom search version, supported comparison between versions",
+                ]
+            }
+        ]
     }
 }
 export default en;