From dc89aa035f589f449b583200062e6d30855134e3 Mon Sep 17 00:00:00 2001
From: Rewrite0 <y747556795@gmail.com>
Date: Wed, 26 Apr 2023 17:53:50 +0800
Subject: [PATCH] =?UTF-8?q?config=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/YLayout.vue                         |  6 +-
 .../config/components/DownloaderItem.vue      |  2 +-
 src/pages/config/components/ProgramItem.vue   |  8 +-
 src/pages/config/components/ProxyItem.vue     | 12 ++-
 src/pages/config/index.vue                    | 48 ++++++++++--
 src/pages/config/useConfigCheck.ts            | 76 +++++++++++++++++++
 src/store/config.ts                           | 19 ++++-
 7 files changed, 149 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/config/useConfigCheck.ts

diff --git a/src/pages/YLayout.vue b/src/pages/YLayout.vue
index 40479643..8a556560 100644
--- a/src/pages/YLayout.vue
+++ b/src/pages/YLayout.vue
@@ -16,7 +16,11 @@ import YMenu from './YMenu.vue';
 
         <el-main>
           <el-scrollbar>
-            <RouterView />
+            <RouterView v-slot="{ Component }">
+              <KeepAlive>
+                <component :is="Component" />
+              </KeepAlive>
+            </RouterView>
           </el-scrollbar>
         </el-main>
       </el-container>
diff --git a/src/pages/config/components/DownloaderItem.vue b/src/pages/config/components/DownloaderItem.vue
index ae926f34..46bfbbe8 100644
--- a/src/pages/config/components/DownloaderItem.vue
+++ b/src/pages/config/components/DownloaderItem.vue
@@ -16,7 +16,7 @@ const downloader = computed(() => form.downloader);
       </el-select>
     </ConfigFormCol>
 
-    <ConfigFormCol label="host">
+    <ConfigFormCol label="host" prop="downloader.host">
       <el-input v-model="downloader.host"></el-input>
     </ConfigFormCol>
 
diff --git a/src/pages/config/components/ProgramItem.vue b/src/pages/config/components/ProgramItem.vue
index fac8cb5d..26761621 100644
--- a/src/pages/config/components/ProgramItem.vue
+++ b/src/pages/config/components/ProgramItem.vue
@@ -7,15 +7,15 @@ const program = computed(() => form.program);
 <template>
   <ConfigFormRow title="主程序">
     <ConfigFormCol label="RSS 检查间隔">
-      <el-input v-model="program.sleep_time" type="number" />
+      <el-input v-model.number="program.sleep_time" type="number" />
     </ConfigFormCol>
 
     <ConfigFormCol label="重命名间隔">
-      <el-input v-model="program.rename_times" type="number" />
+      <el-input v-model.number="program.rename_times" type="number" />
     </ConfigFormCol>
 
-    <ConfigFormCol label="webui端口">
-      <el-input v-model="program.webui_port" type="number" />
+    <ConfigFormCol label="webui端口" prop="program.webui_port">
+      <el-input v-model.number="program.webui_port" type="number" />
     </ConfigFormCol>
   </ConfigFormRow>
 </template>
diff --git a/src/pages/config/components/ProxyItem.vue b/src/pages/config/components/ProxyItem.vue
index 019add1e..907825a1 100644
--- a/src/pages/config/components/ProxyItem.vue
+++ b/src/pages/config/components/ProxyItem.vue
@@ -28,12 +28,12 @@ const proxy = computed(() => form.proxy);
       </el-select>
     </ConfigFormCol>
 
-    <ConfigFormCol label="host">
+    <ConfigFormCol label="ip" prop="proxy.host">
       <el-input v-model="proxy.host"></el-input>
     </ConfigFormCol>
 
-    <ConfigFormCol label="port">
-      <el-input v-model="proxy.port" type="number"></el-input>
+    <ConfigFormCol label="port" prop="proxy.port">
+      <el-input v-model.number="proxy.port" type="number"></el-input>
     </ConfigFormCol>
 
     <ConfigFormCol label="username">
@@ -41,7 +41,11 @@ const proxy = computed(() => form.proxy);
     </ConfigFormCol>
 
     <ConfigFormCol label="password">
-      <el-input v-model="proxy.password"></el-input>
+      <el-input
+        v-model="proxy.password"
+        type="password"
+        show-password
+      ></el-input>
     </ConfigFormCol>
   </ConfigFormRow>
 </template>
diff --git a/src/pages/config/index.vue b/src/pages/config/index.vue
index 03ab7f30..f1aa2ca7 100644
--- a/src/pages/config/index.vue
+++ b/src/pages/config/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import ProgramItem from './components/ProgramItem.vue';
 import DownloaderItem from './components/DownloaderItem.vue';
 import RssParserItem from './components/RssParserItem.vue';
@@ -8,23 +10,48 @@ import ProxyItem from './components/ProxyItem.vue';
 import NotificationItem from './components/NotificationItem.vue';
 
 import { form } from './form-data';
+import { useConfigCheck } from './useConfigCheck';
 
 const store = configStore();
+const { validtePort, validteHost, validteFormProxy } = useConfigCheck();
+const ruleFormRef = ref<FormInstance>();
 
-watch(form, (v) => {
-  console.log('🚀 ~ file: index.vue:54 ~ v:', v);
+const rules = reactive<FormRules>({
+  'program.webui_port': [{ validator: validtePort, trigger: 'blur' }],
+  'downloader.host': [{ validator: validteHost, trigger: 'blur' }],
+
+  'proxy.host': [{ validator: validteFormProxy.ip, trigger: 'blur' }],
+  'proxy.port': [{ validator: validteFormProxy.port, trigger: 'blur' }],
 });
 
-onBeforeMount(async () => {
-  await store.get();
+function submit(formEl: FormInstance | undefined) {
+  if (!formEl) return false;
+  formEl.validate((valid) => {
+    if (valid) {
+      store.set(form);
+    } else {
+      ElMessage({
+        message: '配置验证失败! 请检查你的配置',
+        type: 'error',
+      });
+      return false;
+    }
+  });
+}
 
+function formSync() {
   if (store.config) {
     Object.keys(store.config).forEach((key) => {
       if (store.config) {
-        form[key] = store.config[key];
+        form[key] = JSON.parse(JSON.stringify(store.config[key]));
       }
     });
   }
+}
+
+onActivated(async () => {
+  await store.get();
+  formSync();
 });
 </script>
 
@@ -32,7 +59,12 @@ onBeforeMount(async () => {
   <section class="settings" pb30>
     <el-row :gutter="20">
       <el-col :xs="24" :sm="24">
-        <el-form :model="form" label-position="right">
+        <el-form
+          ref="ruleFormRef"
+          :model="form"
+          :rules="rules"
+          label-position="right"
+        >
           <el-collapse>
             <ProgramItem />
             <DownloaderItem />
@@ -47,8 +79,8 @@ onBeforeMount(async () => {
     </el-row>
 
     <div flex="~ items-center justify-center" mt20>
-      <el-button type="primary">保存</el-button>
-      <el-button>还原</el-button>
+      <el-button type="primary" @click="submit(ruleFormRef)">保存</el-button>
+      <el-button @click="formSync">还原</el-button>
     </div>
   </section>
 </template>
diff --git a/src/pages/config/useConfigCheck.ts b/src/pages/config/useConfigCheck.ts
new file mode 100644
index 00000000..cdc18d2f
--- /dev/null
+++ b/src/pages/config/useConfigCheck.ts
@@ -0,0 +1,76 @@
+import { form } from './form-data';
+
+export function useConfigCheck() {
+  const checkIp = (ip: string) => {
+    const check =
+      /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/;
+
+    return check.test(ip);
+  };
+
+  /** 有效端口检测 */
+  const checkPort = (port: number) => {
+    if (port >= 0 && port <= 65535) return true;
+    else return false;
+  };
+
+  /** host 格式检测 */
+  const checkHost = (host: string): [boolean, string] => {
+    if (host === '') return [false, '请输入host'];
+    if (!/:/.test(host)) {
+      return [false, "缺少 ':'"];
+    } else {
+      const [ip, port] = host.split(':');
+
+      if (!checkIp(ip)) {
+        return [false, '请输入有效ip!'];
+      }
+
+      if (!checkPort(Number(port))) {
+        return [false, '请输入有效端口!'];
+      }
+    }
+
+    return [true, ''];
+  };
+
+  /** 端口验证 */
+  function validtePort(rule: any, value: any, callback: any) {
+    if (value === '') return callback(new Error('请输入端口号'));
+
+    if (!checkPort(value)) {
+      callback(new Error('无效端口 (端口范围 0 - 65535)'));
+    } else {
+      callback();
+    }
+  }
+
+  /** host 验证 */
+  function validteHost(rule: any, value: any, callback: any) {
+    const [c, m] = checkHost(value);
+    if (!c) return callback(new Error(m));
+    callback();
+  }
+
+  /** proxy 启用时检测 ip 和 端口 */
+  const validteFormProxy = {
+    ip(rule: any, value: any, callback: any) {
+      if (form.proxy.enable) {
+        if (!checkIp(value)) return callback(new Error('请输入有效ip!'));
+      }
+      callback();
+    },
+    port(rule: any, value: any, callback: any) {
+      if (form.proxy.enable) {
+        if (!checkPort(value)) return callback(new Error('请输入有效端口!'));
+      }
+      callback();
+    },
+  };
+
+  return {
+    validtePort,
+    validteHost,
+    validteFormProxy,
+  };
+}
diff --git a/src/store/config.ts b/src/store/config.ts
index f12fc396..f18fefe7 100644
--- a/src/store/config.ts
+++ b/src/store/config.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { ElMessage } from 'element-plus';
 import { getConfig, setConfig } from '@/api/config';
 import type { Config } from '#/config';
 
@@ -9,13 +10,23 @@ export const configStore = defineStore('config', () => {
     config.value = await getConfig();
   };
 
-  get();
-
-  const set = (newConfig: Omit<Config, 'data_version'>) => {
+  const set = async (newConfig: Omit<Config, 'data_version'>) => {
     let finalConfig: Config;
     if (config.value !== undefined) {
       finalConfig = Object.assign(config.value, newConfig);
-      return setConfig(finalConfig);
+      const { message } = await setConfig(finalConfig);
+
+      if (message === 'Success') {
+        ElMessage({
+          message: '保存成功!',
+          type: 'success',
+        });
+      } else {
+        ElMessage({
+          message: '保存失败, 请重试!',
+          type: 'error',
+        });
+      }
     }
 
     return false;