config验证

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>

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>
 

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>

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>

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>

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,
+  };
+}

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;