重构基本完成

hechenyang2011-1 · Aug 5, 2022 · 21e2d11 · 21e2d11
1 parent 94ef326
commit 21e2d11
Show file tree

Hide file tree

Showing 10 changed files with 289 additions and 361 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,6 +8,7 @@ import Main from "./components/main/Main.vue";
 import Footer from "./components/footer/Footer.vue";
 const ttsStore = useTtsStore();
 ttsStore.genFormConfig();
+ttsStore.setSSMLValue();
 </script>
 
 <template>

diff --git a/src/components/aside/Aside.vue b/src/components/aside/Aside.vue
@@ -25,12 +25,16 @@
 import { ref, getCurrentInstance } from "vue";
 import { useTtsStore } from "@/store/store";
 import { storeToRefs } from "pinia";
-const store = useTtsStore();
-const { page } = storeToRefs(store);
+const Store = require("electron-store");
+const store = new Store();
+const ttsStore = useTtsStore();
+const { page, config } = storeToRefs(ttsStore);
 
 const menuChange = (index: number) => {
   page.value.asideIndex = index.toString();
-  console.log(page.value);
+  index == 2
+    ? (config.value.autoplay = true)
+    : (config.value.autoplay = store.get("autoplay"));
 };
 </script>
 

diff --git a/src/components/configpage/ConfigPage.vue b/src/components/configpage/ConfigPage.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="config-page">
     <div class="config-side">
-      <el-form :model="form" label-position="top">
+      <el-form :model="config" label-position="top">
         <el-form-item label="下载路径">
-          <el-input v-model="form.savePath" size="small" class="input-path">
+          <el-input v-model="config.savePath" size="small" class="input-path">
             <template #append>
-              <el-button type="primary" @click="saveConfig">确认</el-button>
+              <el-button type="primary" @click="savePathConfig">确认</el-button>
             </template>
           </el-input>
         </el-form-item>
         <el-form-item label="自动播放(仅单文本模式)">
           <el-switch
-            v-model="form.autoplay"
+            v-model="config.autoplay"
             active-text="是"
             inactive-text="否"
             inline-prompt
@@ -72,15 +72,16 @@
         <img src="../../assets/zfb.jpg" />
         <img src="../../assets/wx.jpg" />
       </div>
-      <div class="btns"><BiliBtn></BiliBtn> <GithubBtn></GithubBtn></div>
+      <div class="btns"><GiteeBtn></GiteeBtn> <GithubBtn></GithubBtn></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
-import BiliBtn from "./BiliBtn.vue";
+// import BiliBtn from "./BiliBtn.vue";
+import GiteeBtn from "./GiteeBtn.vue";
 import GithubBtn from "./GithubBtn.vue";
 import { useTtsStore } from "@/store/store";
 import { storeToRefs } from "pinia";
@@ -94,7 +95,7 @@ const { config } = storeToRefs(ttsStore);
 
 const handleDelete = (index: any, row: any) => {
   delete config.value.formConfigJson[row.tagName];
-  store.set("FormConfig", config.value.formConfigJson);
+
   ttsStore.genFormConfig();
 
   ElMessage({
@@ -103,26 +104,21 @@ const handleDelete = (index: any, row: any) => {
     duration: 2000,
   });
 };
-// do not use same name with ref
-const form = reactive({
-  autoplay: store.get("autoplay"),
-  savePath: store.get("savePath"),
-});
 
 const openConfigFile = () => {
   shell.openPath(store.path);
 };
 
-const saveConfig = () => {
-  store.set("savePath", form.savePath);
+const savePathConfig = () => {
+  ttsStore.setSavePath();
   ElMessage({
     message: "保存成功，请点击“刷新配置”立即应用。",
     type: "success",
     duration: 2000,
   });
 };
 const switchChange = (value: any) => {
-  store.set("autoplay", form.autoplay);
+  ttsStore.setAutoPlay();
   ElMessage({
     message: "保存成功，请点击“刷新配置”立即应用。。",
     type: "success",

diff --git a/src/components/configpage/GiteeBtn.vue b/src/components/configpage/GiteeBtn.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <button @click="bilibili">
+      <div class="svg-wrapper-1">
+        <div class="svg-wrapper">
+          <img
+            width="33"
+            height="33"
+            src="https://gitee.com/assets/favicon.ico"
+            alt=""
+          />
+        </div>
+      </div>
+      <span style="font-weight: 700">Gitee</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { shell } = require("electron");
+const bilibili = () => {
+  shell.openExternal("https://gitee.com/LGW_space/tts-vue");
+};
+</script>
+
+<style scoped>
+/* From uiverse.io by @adamgiebl */
+button {
+  font-family: inherit;
+  font-size: 20px;
+  background: #fff;
+  color: rgb(199, 29, 35);
+  padding: 0.2em 0.8em;
+  padding-left: 0.9em;
+  display: flex;
+  align-items: center;
+  border: none;
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all 0.2s;
+  border: 3px solid rgb(199, 29, 35);
+}
+
+button span {
+  display: block;
+  margin-left: 0.3em;
+  transition: all 0.3s ease-in-out;
+}
+
+button img {
+  display: block;
+  transform-origin: center center;
+  transition: transform 0.3s ease-in-out;
+}
+
+button:hover .svg-wrapper {
+  animation: fly-1 0.6s ease-in-out infinite alternate;
+}
+
+button:hover img {
+  transform: translateX(1.5em) scale(1.1);
+}
+
+button:hover span {
+  transform: translateX(5em);
+}
+
+button:active {
+  transform: scale(0.95);
+}
+
+@keyframes fly-1 {
+  from {
+    transform: translateY(0.1em);
+  }
+
+  to {
+    transform: translateY(-0.1em);
+  }
+}
+</style>
diff --git a/src/components/footer/Footer.vue b/src/components/footer/Footer.vue
@@ -2,30 +2,20 @@
   <div class="footer">
     <div class="play-bar">
       <div class="paly-bar-options">
-        <!-- <el-button type="primary" circle>
-          <el-icon @click="test"><CaretRight /></el-icon>
-        </el-button> -->
-        <!-- <el-button
-          type="warning"
-          circle
-          style="font-size: 10px; font-weight: 900; width: 32px"
-        >
-          | |
-        </el-button> -->
         <el-button
           type="success"
           circle
           @click="download"
-          :disabled="src == ''"
+          :disabled="currMp3Url == ''"
           :loading="isLoading"
         >
           <el-icon><Download /></el-icon>
         </el-button>
       </div>
       <div class="paly-bar-process">
         <audio
-          :src="src"
-          :autoplay="autoplay"
+          :src="currMp3Url"
+          :autoplay="config.autoplay"
           controls
           style="width: 100%"
         ></audio>
@@ -35,149 +25,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, getCurrentInstance, onBeforeMount, onMounted } from "vue";
-import { ElMessage } from "element-plus";
-import getTTSData from "./play";
 import { useTtsStore } from "@/store/store";
 import { storeToRefs } from "pinia";
 
-const path = require("path");
-const Store = require("electron-store");
-const store = new Store();
-const autoplay = store.get("autoplay");
-const savePath = store.get("savePath");
-
 const ttsStore = useTtsStore();
-const { inputs, formConfig, page, tableData, isLoading, getSSML } =
-  storeToRefs(ttsStore);
-
-const fs = require("fs");
-const src = ref("");
-let currBuffer: any = null;
-async function tts(
-  val: any,
-  voice: string,
-  express: string,
-  role: string,
-  rate: number,
-  pitch: number
-) {
-  const mp3buffer: any = await getTTSData(
-    val,
-    voice,
-    express,
-    role,
-    rate,
-    pitch
-  );
-  if (mp3buffer) {
-    currBuffer = mp3buffer;
-    const svlob = new Blob([mp3buffer]);
-    src.value = URL.createObjectURL(svlob);
-    const msg = autoplay ? "成功，正在试听~" : "成功，请手动播放。";
-    appContext.config.globalProperties.$mitt.emit("endLoanding", {
-      type: false,
-      msg: msg,
-    });
-    isLoading.value = false;
-  }
-}
-
-async function ttsBatch(
-  val: any,
-  voice: string,
-  express: string,
-  role: string,
-  rate: number,
-  pitch: number
-) {
-  const mp3buffer: any = await getTTSData(
-    val,
-    voice,
-    express,
-    role,
-    rate,
-    pitch
-  );
-  // path.join(savePath, val.tableValue.fileName)
-  // await writeMp3(mp3buffer, val.tableValue.filePath.split(".txt")[0] + ".mp3");
-  await writeMp3(
-    mp3buffer,
-    path.join(savePath, val.tableValue.fileName.split(".")[0] + ".mp3")
-  );
-  ttsStore.setDoneStatus(val.tableValue.filePath);
-  // appContext.config.globalProperties.$mitt.emit("doneTrans", val);
-}
-
-function writeMp3(mp3buffer: any, path: string) {
-  fs.writeFileSync(path, mp3buffer);
-  appContext.config.globalProperties.$mitt.emit("endLoanding", {
-    type: false,
-    msg: "成功，正在写入" + path,
-  });
-}
-
-const process = ref(0);
-const { appContext } = getCurrentInstance() as any;
-onMounted(() => {
-  appContext.config.globalProperties.$mitt.on("start", () => {
-    const value = {
-      activeIndex: page.value.tabIndex,
-      inputValue:
-        page.value.tabIndex == "1"
-          ? inputs.value.inputValue
-          : inputs.value.ssmlValue,
-    };
-    tts(
-      value,
-      formConfig.value.voiceSelect,
-      formConfig.value.voiceStyleSelect,
-      formConfig.value.role,
-      (formConfig.value.speed - 1) * 100,
-      (formConfig.value.pitch - 1) * 50
-    );
-  });
-
-  appContext.config.globalProperties.$mitt.on("startBatch", () => {
-    tableData.value.forEach((item: any) => {
-      const inps = {
-        activeIndex: 1, // 值转换普通文本
-        inputValue: "",
-        tableValue: item,
-      };
-      fs.readFile(item.filePath, "utf8", (err: any, datastr: any) => {
-        if (err) console.log(err);
-        inps.inputValue = datastr;
-        ttsBatch(
-          inps,
-          formConfig.value.voiceSelect,
-          formConfig.value.voiceStyleSelect,
-          formConfig.value.role,
-          (formConfig.value.speed - 1) * 100,
-          (formConfig.value.pitch - 1) * 50
-        );
-      });
-    });
-  });
-});
+const { config, currMp3Url, isLoading } = storeToRefs(ttsStore);
 
 const download = () => {
-  const currTime = new Date().getTime().toString();
-  fs.writeFileSync(
-    path.resolve(path.join(savePath, currTime + ".mp3")),
-    currBuffer
-  );
-  ElMessage({
-    message:
-      "下载成功：" + path.resolve(path.join(savePath, currTime + ".mp3")),
-    type: "success",
-    duration: 2000,
-  });
+  ttsStore.writeFileSync();
 };
-
-onBeforeMount(() => {
-  appContext.config.globalProperties.$mitt.off("start");
-});
 </script>
 
 <style scoped>