完成图片选项

src/background.ts

@@ -22,6 +22,7 @@ async function createWindow() {
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
       nodeIntegration: false, //process.env.ELECTRON_NODE_INTEGRATION as unknown as boolean,
       contextIsolation: true, //!process.env.ELECTRON_NODE_INTEGRATION,
+      enableRemoteModule: true,
       preload: path.join(__dirname, "preload.js"),
       webSecurity: false,
     },

src/preload.ts

@@ -1,10 +1,11 @@
-import { contextBridge, ipcRenderer } from "electron";
+import { contextBridge, ipcRenderer, remote } from "electron";
 
 import env from "./lib/env";
 import config from "./lib/config";
 // import api from "./lib/api";
 
 export const electronInWindow = {
+  dialog: remote.dialog,
   env: env,
   config,
   // api,

src/router/index.ts

@@ -24,10 +24,12 @@ const routes: Array<RouteRecordRaw> = [
       ),
   },
   {
-    path: "/about",
-    name: "About",
+    path: "/image",
+    name: "Image",
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+      import(
+        /* webpackChunkName: "about" */ "../views/features/Image/Image.vue"
+      ),
   },
 ];
 

src/types/index.ts

@@ -21,6 +21,39 @@ export interface Store {
   };
 
   config: {
-    servers: Array<{ name: string; host: string }>;
+    db: DB;
+    imageUrl: ImageURL;
+    watermark: Watermark;
+    logger: Logger;
+    openDevTools: boolean;
+    servers: Server[];
   };
 }
+
+export interface DB {
+  host: string;
+  post: number;
+  user: string;
+  password: string;
+  database: string;
+}
+
+export interface ImageURL {
+  sheet: string;
+  package: string;
+}
+
+export interface Logger {
+  level: string;
+}
+
+export interface Server {
+  name: string;
+  host: string;
+}
+
+export interface Watermark {
+  fontFile: string;
+  fontSize: number;
+  color: string;
+}

src/views/features/Home/Home.vue

@@ -23,7 +23,7 @@
             <a href="sync.html"><span></span>数据同步</a>
           </li>
           <li class="l3">
-            <a href="image.html"><span></span>图片下载</a>
+            <router-link to="/image"><span></span>图片下载</router-link>
           </li>
         </ul>
       </div>

src/views/features/Image/Image.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="wp">
+    <div class="hd">
+      <div class="logo"><img src="img/logo.png" /></div>
+      <span class="y">
+        欢迎您，<span id="user-name"></span> <span class="pipe">|</span
+        ><a href="login.html">退出</a>
+      </span>
+    </div>
+    <div class="cont">
+      <div class="title cl">
+        <span class="y"
+          ><router-link to="/home">返回考试主页</router-link></span
+        >
+        <h2>图片下载</h2>
+      </div>
+      <div class="picture cl">
+        <table cellpadding="0" cellspacing="0" width="100%">
+          <tr>
+            <th>下载内容：</th>
+            <td>
+              <div class="input-radio">
+                <a-radio-group name="radioGroup" v-model:value="type">
+                  <a-radio value="1">考生原图</a-radio>
+                  <a-radio value="2">签到表图片</a-radio>
+                </a-radio-group>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>本地保存地址：</th>
+            <td>
+              <input
+                id="path-text"
+                type="text"
+                style="width: 400px"
+                class="filetext"
+                :value="dir"
+              />
+              <a
+                href="##"
+                id="path-select"
+                class="filebtn"
+                @click="chooseDirectory"
+                >选择</a
+              >
+            </td>
+          </tr>
+          <tr>
+            <th>图片转存规则：</th>
+            <td>
+              <a-input v-model="template" style="width: 600px" />
+            </td>
+          </tr>
+          <tr id="append-select">
+            <th>是否续传：</th>
+            <td>
+              <div class="input-radio">
+                <a-radio-group name="radioGroup" v-model:value="append">
+                  <a-radio :value="true">是</a-radio>
+                  <a-radio :value="false">否</a-radio>
+                </a-radio-group>
+              </div>
+            </td>
+          </tr>
+          <tr id="exception-select">
+            <th>异常处理：</th>
+            <td>
+              <div class="input-radio">
+                <a-radio-group name="radioGroup" v-model:value="failover">
+                  <a-radio :value="true">终止</a-radio>
+                  <a-radio :value="false">跳过</a-radio>
+                </a-radio-group>
+              </div>
+            </td>
+          </tr>
+          <tr id="watermark-select" v-if="type === '1'">
+            <th>添加分数水印：</th>
+            <td>
+              <div class="input-radio">
+                <a-radio-group name="radioGroup" v-model:value="watermark">
+                  <a-radio :value="true">是</a-radio>
+                  <a-radio :value="false">否</a-radio>
+                </a-radio-group>
+              </div>
+            </td>
+          </tr>
+          <tr id="track-mode-select" v-if="type === '1'">
+            <th>水印模式：</th>
+            <td>
+              <div class="input-radio">
+                <a-radio-group name="radioGroup" v-model:value="trackMode">
+                  <a-radio :value="true">普通</a-radio>
+                  <a-radio :value="false">研究生</a-radio>
+                </a-radio-group>
+              </div>
+            </td>
+          </tr>
+          <tr id="examNumber-select" v-if="type === '1'">
+            <th>准考证号：</th>
+            <td>
+              <a-input
+                v-model="examNumber"
+                style="width: 600px"
+                placeholder="多个准考证号用逗号分隔"
+              />
+            </td>
+          </tr>
+          <tr id="subjectCode-select" v-if="type === '1'">
+            <th>科目代码：</th>
+            <td>
+              <a-input
+                v-model="subjectCode"
+                style="width: 600px"
+                placeholder="多个科目代码用逗号分隔"
+              />
+            </td>
+          </tr>
+
+          <tr id="message-tr" v-if="type === '1'">
+            <th></th>
+            <td>
+              <p class="error-tetx" id="message-text">{{ ruleExample }}</p>
+            </td>
+          </tr>
+          <tr>
+            <th></th>
+            <td>
+              <a id="run-button" href="##" class="start-btn" @click="start"
+                ><span>开始图片下载</span></a
+              >
+              <!-- <a-button @click="start">开始图片下载</a-button> -->
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="ft">
+      Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { store } from "@/store";
+import { computed, onMounted, ref } from "vue";
+import router from "@/router";
+
+let type = ref("");
+let template = ref("");
+let dir = ref("");
+let append = ref(false);
+let failover = ref(true);
+let watermark = ref(true);
+let trackMode = ref("");
+let examNumber = ref("");
+let subjectCode = ref("");
+
+let ruleExample = computed(() => {
+  switch (type.value) {
+    case "1":
+      return "转存规则范例: " + store.config.imageUrl.sheet;
+    case "2":
+      return "转存规则范例: " + store.config.imageUrl.package;
+  }
+  return "";
+});
+
+const chooseDirectory = () => {
+  window.electron.dialog
+    .showOpenDialog({
+      title: "请选择保存目录",
+      properties: ["openDirectory"],
+    })
+    .then((result) => {
+      if (result && result.filePaths) {
+        dir.value = result.filePaths[0];
+      }
+    });
+};
+onMounted(async () => {});
+
+const start = () => {
+  store.pageInputs["/image-download"] = {
+    type,
+    template,
+    dir,
+    append,
+    failover,
+    watermark,
+    trackMode,
+    examNumber,
+    subjectCode,
+  };
+  router.push("/image-download");
+};
+</script>