fzdwx · fzdwx · Mar 13, 2023 · Mar 12, 2023 · Mar 13, 2023 · Mar 13, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 /target
 .idea
 .vscode/
-node_modules
+node_modules
+dist
diff --git a/dist/assets/google-06fd4ba3.ico b/dist/assets/google-06fd4ba3.ico
diff --git a/dist/assets/index-60e7dea1.css b/dist/assets/index-60e7dea1.css
diff --git a/dist/assets/index-b9955069.js b/dist/assets/index-b9955069.js
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tauri + Vue + TS</title>
-    <script type="module" crossorigin src="/assets/index-b9955069.js"></script>
-    <link rel="stylesheet" href="/assets/index-60e7dea1.css">
+    <script type="module" crossorigin src="/assets/index-564366c9.js"></script>
+    <link rel="stylesheet" href="/assets/index-468b33f2.css">
   </head>
 
   <body>

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@tabler/icons-vue": "^2.10.0",
     "@tauri-apps/api": "^1.2.0",
     "vue": "^3.2.45"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -2,9 +2,8 @@
   "build": {
     "beforeDevCommand": "pnpm dev",
     "beforeBuildCommand": "pnpm build",
-    "devPath": "http://localhost:1420",
-    "distDir": "../dist",
-    "withGlobalTauri": false
+    "devPath": "http://127.0.0.1:1420/",
+    "distDir": "../dist"
   },
   "package": {
     "productName": "popup-translation",
@@ -43,7 +42,12 @@
         "icons/icon.ico"
       ],
       "identifier": "io.fzdwx.popup-translation",
-      "targets": "all"
+      "targets": "all",
+      "windows": {
+        "certificateThumbprint": null,
+        "digestAlgorithm": "sha256",
+        "timestampUrl": ""
+      }
     },
     "security": {
       "csp": null

diff --git a/src/App.vue b/src/App.vue
@@ -1,13 +1,58 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Translation from "./components/Translation.vue";
+import { reactive, provide,  watchEffect } from 'vue'
+import Translation from "./components/translation.vue";
+import Nav from "./components/Nav.vue";
+import Set from "./components/Set.vue";
+
+import { KeyInfo, Platform } from "./types/type";
+const plat = reactive({
+  current: Platform.YouDao,
+});
+
+const takes = reactive({
+  isTakes: false,
+});
+
+const keyList = reactive<KeyInfo>({
+  google: {
+    platform: "Google Key",
+    key: "",
+  },
+  youdao: {
+    platform: "youdao Key",
+    key: "",
+  }
+})
+const model = reactive({
+  currentModel: 1,
+});
+const showSetPage = reactive({
+  show: false,
+});
+// watchEffect(()=>{
+//   console.log(takes.isTakes);
+// });
+provide("plat", plat);
+provide("model", model);
+
 </script>
 
 <template>
+  <div class="header">
+    <Nav :plat = plat :takes= takes :showSetPage="showSetPage"/>
+  </div>
   <div class="container">
     <Translation />
   </div>
+  <div class="setting" v-if="showSetPage.show">
+    <Set :keyList="keyList" :model="model"/>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.setting {
+  position: absolute;
+  right: 0;
+  top: 50px;
+}
+</style>
diff --git a/src/assets/youdao.png b/src/assets/youdao.png
diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Loding from "./Loading.vue";
+import Loading from "./common/Loading.vue";
 
 const props = defineProps<{
   imgSrc: string;
@@ -18,15 +18,15 @@ const props = defineProps<{
     </div>
     <!-- content  -->
     <div class="text-container target-height">
-      <Loding :load="props.load">
+      <Loading :load="props.load">
         <!-- 
           if load then show loading
           else show text
-         -->
+        -->
         <div class="text">
           {{ props.text }}
         </div>
-      </Loding>
+      </Loading>
     </div>
   </div>
 </template>

diff --git a/src/components/Nav.vue b/src/components/Nav.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {IconSettings, IconBrandGoogle, IconBrandBing, IconBrandNeteaseMusic} from "@tabler/icons-vue";
+import Button from "./common/Button.vue";
+import { Platform } from "../types/type";
+import { ref } from "vue";
+const props = defineProps<{
+  plat: {
+    current: Platform
+  },
+  takes: {
+    isTakes: boolean,
+  },
+  showSetPage: {
+    show: boolean,
+  },
+}>();
+
+const click = (plat: Platform) => {
+  props.plat.current = plat;
+};
+
+const isTakes = () => {
+  props.takes.isTakes = !props.takes.isTakes;
+};
+
+const color = ref("white");
+const show = () => {
+  props.showSetPage.show = !props.showSetPage.show;
+  if (props.showSetPage.show) {
+    color.value = "skyblue";
+  } else {
+    color.value = "white";
+  }
+}
+</script>
+
+<template>
+  <div class="nav">
+    <div class="btns">
+      <Button class="btn" :class="{ active: plat.current === Platform.YouDao }"  @click="click(Platform.YouDao)">
+        <IconBrandNeteaseMusic :size="16" color="red"></IconBrandNeteaseMusic>
+        有道词典
+      </Button>
+      <Button class="btn" :class="{ active: plat.current ===  Platform.Bing }" @click="click(Platform.Bing)">
+        <IconBrandBing :size="16" color="skyblue"></IconBrandBing>
+        bing
+      </Button>
+      <Button class="btn" :class="{ active: plat.current ===  Platform.Google }" @click="click(Platform.Google)">
+        <IconBrandGoogle :size="16" color="skyblue"></IconBrandGoogle>
+        google
+      </Button>
+    </div>
+    <div class="setting">
+      <div class="takes">
+        <input type="checkbox" name="takes" id="takes" @change="isTakes()">
+        <label for="takes">划屏取词</label>
+      </div>
+      <IconSettings :color="color" @click="show"></IconSettings>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  /* background-color: #fff; */
+  border-bottom: 1px solid #ccc;
+}
+.nav .btns {
+  display: flex;
+}
+
+.active {
+  background-color: rgb(91, 77, 77);
+}
+
+.btns .btn {
+  margin: 5px;
+  flex: 1;
+}
+
+.nav .setting {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 25%;
+  cursor: pointer;
+}
+
+.setting .takes {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  margin-right: 8px;
+  font-size: 14px;
+}
+.takes > input {
+  width: 15px;
+  height: 15px;
+}
+</style>
diff --git a/src/components/Set.vue b/src/components/Set.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { KeyInfo } from "../types/type";
+import Input from "./common/Input.vue"; 
+const props = defineProps<{
+  keyList: KeyInfo,
+  model: {
+    currentModel: number,
+  },
+}>();
+
+</script>
+
+<template>
+  <div class="set">
+    <div class="model">
+      选择模式:
+      <select name="" id="" v-model="props.model.currentModel">
+        <option :value="1">模式一</option>
+        <option :value="2">模式二</option>
+      </select>
+    </div>
+    <Input v-for="item in props.keyList" :platform="item.platform" v-model="item.key"></Input>
+  </div>
+</template>
+
+<style scoped>
+.set {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  width: 400px;
+  height: calc(100% - 50px);
+  padding: 8px;
+  background-color: #1d1d1d;
+  box-shadow: 1px 4px 10px rgba(255, 255, 255, 0.6);
+}
+.model {
+  margin: 8px;
+}
+.model > select {
+  width: 100px;
+  height: 30px;
+  margin: 8px;
+  font-size: 16px;
+  background-color: #1d1d1d;
+  color: #fff;
+}
+</style>