pref: 安全特性支持，站点隐藏功能

packages/ui/certd-client/src/views/sys/settings/api.ts

@@ -103,3 +103,4 @@ export async function GetSmsTypeDefine(type: string) {
     },
   });
 }
+

packages/ui/certd-client/src/views/sys/settings/index.vue

@@ -5,8 +5,8 @@
     <!--    </template>-->
     <div class="sys-settings-body md:p-5">
       <a-tabs :active-key="activeKey" type="card" class="sys-settings-tabs" @update:active-key="onChange">
-        <a-tab-pane key="" tab="基本设置">
-          <SettingBase v-if="activeKey === ''" />
+        <a-tab-pane key="base" tab="基本设置">
+          <SettingBase v-if="activeKey === 'base'" />
         </a-tab-pane>
         <a-tab-pane key="register" tab="注册设置">
           <SettingRegister v-if="activeKey === 'register'" />
@@ -14,6 +14,9 @@
         <a-tab-pane v-if="settingsStore.isComm" key="payment" tab="支付设置">
           <SettingPayment v-if="activeKey === 'payment'" />
         </a-tab-pane>
+        <a-tab-pane key="save" tab="安全设置">
+          <SettingSafe v-if="activeKey === 'save'" />
+        </a-tab-pane>
       </a-tabs>
     </div>
   </fs-page>
@@ -23,6 +26,7 @@
 import SettingBase from "/@/views/sys/settings/tabs/base.vue";
 import SettingRegister from "/@/views/sys/settings/tabs/register.vue";
 import SettingPayment from "/@/views/sys/settings/tabs/payment.vue";
+import SettingSafe from "/@/views/sys/settings/tabs/safe.vue";
 import { useRoute, useRouter } from "vue-router";
 import { ref } from "vue";
 import { useSettingStore } from "/@/store/settings";
@@ -30,11 +34,11 @@ defineOptions({
   name: "SysSettings",
 });
 const settingsStore = useSettingStore();
-const activeKey = ref("");
+const activeKey = ref("base");
 const route = useRoute();
 const router = useRouter();
 if (route.query.tab) {
-  activeKey.value = (route.query.tab as string) || "";
+  activeKey.value = (route.query.tab as string) || "base";
 }
 
 function onChange(value: string) {
@@ -52,7 +56,7 @@ function onChange(value: string) {
 <style lang="less">
 .page-sys-settings {
   .sys-settings-form {
-    width: 500px;
+    width: 600px;
     max-width: 100%;
     padding: 20px;
   }

packages/ui/certd-client/src/views/sys/settings/tabs/safe.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="sys-settings-form sys-settings-safe">
+    <a-form ref="formRef" :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
+      <div>站点隐藏</div>
+      <a-form-item label="启用站点隐藏" :name="['hidden', 'enabled']" :required="true">
+        <a-switch v-model:checked="formState.hidden.enabled" />
+        <div class="helper">可以在平时关闭站点的可访问性，需要时再打开，增强站点安全性</div>
+      </a-form-item>
+      <a-form-item v-if="formState.hidden.enabled" label="随机地址" :name="['hidden', 'openPath']" :required="true">
+        <a-input-search v-model:value="formState.hidden.openPath" :allow-clear="true" @search="changeOpenPath">
+          <template #enterButton>
+            <fs-icon icon="ion:refresh"></fs-icon>
+          </template>
+        </a-input-search>
+        <div class="helper">站点被隐藏后，需要访问此URL解锁，才能正常访问</div>
+      </a-form-item>
+      <a-form-item v-if="formState.hidden.enabled" label="完整解除隐藏地址" :name="['hidden', 'openPath']" :required="true">
+        <div class="flex"><fs-copyable v-model="openUrl" class="flex-inline"></fs-copyable></div>
+        <div class="helper red">请保存好此地址</div>
+      </a-form-item>
+      <a-form-item v-if="formState.hidden.enabled" label="解除密码" :name="['hidden', 'openPassword']" :required="false">
+        <a-input-password v-model:value="formState.hidden.openPassword" :allow-clear="true" />
+        <div class="helper">解除隐藏时需要输入密码，第一次需要设置密码，填写则重置密码</div>
+      </a-form-item>
+      <a-form-item v-if="formState.hidden.enabled" label="自动隐藏时间" :name="['hidden', 'autoHiddenTimes']" :required="true">
+        <a-input-number v-model:value="formState.hidden.autoHiddenTimes" :allow-clear="true" />
+        <div class="helper">多少分钟内无请求自动隐藏</div>
+      </a-form-item>
+      <a-form-item v-if="formState.hidden.enabled" label="隐藏开放接口" :name="['hidden', 'hiddenOpenApi']" :required="true">
+        <a-switch v-model:checked="formState.hidden.hiddenOpenApi" />
+        <div class="helper">是否隐藏开放接口，是否放开/api/v1开头的接口</div>
+      </a-form-item>
+      <a-form-item v-if="formState.hidden.enabled" label="立即隐藏站点">
+        <loading-button class="ml-1" type="primary" html-type="button" :click="doHiddenImmediate">立即隐藏</loading-button>
+      </a-form-item>
+      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
+        <loading-button type="primary" html-type="button" :click="onClick">保存</loading-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { computed, reactive, ref } from "vue";
+import { merge } from "lodash-es";
+import { Modal, notification } from "ant-design-vue";
+import { request } from "/@/api/service";
+import { util, utils } from "/@/utils";
+defineOptions({
+  name: "SettingSafe",
+});
+
+const api = {
+  async SettingGet() {
+    return await request({
+      url: "/sys/settings/safe/get",
+      method: "post",
+    });
+  },
+  async SettingSave(data: any) {
+    return await request({
+      url: "/sys/settings/safe/save",
+      method: "post",
+      data,
+    });
+  },
+  async HiddenImmediate() {
+    return await request({
+      url: "/sys/settings/safe/hidden",
+      method: "post",
+    });
+  },
+};
+
+const defaultState = {
+  hidden: {
+    enabled: false,
+    autoHiddenTimes: 5,
+    hiddenOpenApi: false,
+  },
+};
+const formRef = ref<any>(defaultState);
+type SiteHidden = {
+  enabled: boolean;
+  openPath?: string;
+  autoHiddenTimes?: number;
+  openPassword?: string;
+  hiddenOpenApi?: boolean;
+};
+
+const formState = reactive<
+  Partial<{
+    hidden: SiteHidden;
+  }>
+>({
+  hidden: { enabled: false },
+});
+
+function changeOpenPath() {
+  formState.hidden.openPath = util.randomString(16);
+}
+
+async function loadSettings() {
+  const data: any = await api.SettingGet();
+  merge(formState, defaultState, formState, data);
+  if (!formState.hidden.openPath) {
+    changeOpenPath();
+  }
+}
+
+loadSettings();
+
+const openUrl = computed(() => {
+  const url = new URL(window.location.href);
+  url.pathname = `/api/unhidden/${formState.hidden?.openPath || ""}`;
+  //@ts-ignore
+  url.query = undefined;
+  url.hash = "";
+  return url.href;
+});
+
+const onClick = async () => {
+  const form = await formRef.value.validateFields();
+  //密码md5
+  // if (form.hidden?.openPassword) {
+  //   form.hidden.openPassword = util.hash.md5(form.hidden.openPassword);
+  // }
+  await api.SettingSave(form);
+  await loadSettings();
+  notification.success({
+    message: "保存成功",
+  });
+};
+
+async function doHiddenImmediate() {
+  Modal.confirm({
+    title: "确定要立即隐藏站点吗？",
+    content: "隐藏后，将无法访问站点，请谨慎操作",
+    async onOk() {
+      await api.HiddenImmediate();
+      notification.success({
+        message: "站点已隐藏",
+      });
+    },
+  });
+}
+</script>
+<style lang="less">
+.sys-settings-base {
+}
+</style>