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

packages/ui/certd-client/src/components/tutorial/tutorial-steps.vue

@@ -54,23 +54,23 @@ const steps = ref<Step[]>([
         descriptions: ["本教程演示如何自动申请证书并部署到Nginx上", "仅需3步，全自动申请部署证书"],
         body: () => {
           return <SimpleSteps></SimpleSteps>;
-        }
+        },
       },
       {
         image: "/static/doc/images/1-add.png",
         title: "创建证书流水线",
-        descriptions: ["点击添加证书流水线，填写证书申请信息"]
+        descriptions: ["点击添加证书流水线，填写证书申请信息"],
       },
       {
         image: "/static/doc/images/3-add-success.png",
         title: "流水线创建成功",
-        descriptions: ["点击手动触发即可申请证书"]
+        descriptions: ["点击手动触发即可申请证书"],
       },
       {
         title: "接下来演示如何自动部署证书",
-        descriptions: ["如果您只需要申请证书，那么到这一步就可以了"]
-      }
-    ]
+        descriptions: ["如果您只需要申请证书，那么到这一步就可以了"],
+      },
+    ],
   },
   {
     title: "添加部署证书任务",
@@ -79,29 +79,29 @@ const steps = ref<Step[]>([
       {
         image: "/static/doc/images/5-1-add-host.png",
         title: "添加证书部署任务",
-        descriptions: ["这里演示自动部署证书到nginx", "本系统提供海量部署插件，满足您的各种部署需求"]
+        descriptions: ["这里演示自动部署证书到nginx", "本系统提供海量部署插件，满足您的各种部署需求"],
       },
       {
         image: "/static/doc/images/5-2-add-host.png",
         title: "填写任务参数",
-        descriptions: ["填写主机上证书文件的路径", "选择主机ssh登录授权"]
+        descriptions: ["填写主机上证书文件的路径", "选择主机ssh登录授权"],
       },
       {
         image: "/static/doc/images/5-3-add-host.png",
         title: "让新证书生效",
-        descriptions: ["执行重启脚本", "让证书生效"]
+        descriptions: ["执行重启脚本", "让证书生效"],
       },
       {
         image: "/static/doc/images/5-4-add-host.png",
         title: "部署任务添加成功",
-        descriptions: ["现在可以运行"]
+        descriptions: ["现在可以运行"],
       },
       {
         image: "/static/doc/images/5-5-plugin-list.png",
         title: "本系统提供茫茫多的部署插件",
-        descriptions: ["您可以根据自身需求将证书部署到各种应用和平台"]
-      }
-    ]
+        descriptions: ["您可以根据自身需求将证书部署到各种应用和平台"],
+      },
+    ],
   },
   {
     title: "运行与测试",
@@ -110,44 +110,44 @@ const steps = ref<Step[]>([
       {
         image: "/static/doc/images/9-start.png",
         title: "运行测试一下",
-        descriptions: ["点击手动触发按钮，即可测试运行"]
+        descriptions: ["点击手动触发按钮，即可测试运行"],
       },
       {
         image: "/static/doc/images/10-1-log.png",
         title: "查看日志",
-        descriptions: ["点击任务可以查看状态和日志"]
+        descriptions: ["点击任务可以查看状态和日志"],
       },
       {
         image: "/static/doc/images/11-1-error.png",
         title: "执行失败如何排查",
-        descriptions: ["查看错误日志"]
+        descriptions: ["查看错误日志"],
       },
       {
         image: "/static/doc/images/11-2-error.png",
         title: "执行失败如何排查",
-        descriptions: ["查看错误日志", "这里报的是nginx容器不存在，修改命令，改成正确的nginx容器名称即可"]
+        descriptions: ["查看错误日志", "这里报的是nginx容器不存在，修改命令，改成正确的nginx容器名称即可"],
       },
       {
         image: "/static/doc/images/12-1-log-success.png",
         title: "执行成功",
-        descriptions: ["修改正确后，重新点击手动触发，重新运行一次，执行成功"]
+        descriptions: ["修改正确后，重新点击手动触发，重新运行一次，执行成功"],
       },
       {
         image: "/static/doc/images/12-2-skip-log.png",
         title: "成功后自动跳过",
-        descriptions: ["可以看到成功过的将会自动跳过，不会重复执行，只有当参数变更或者证书更新了，才会重新运行"]
+        descriptions: ["可以看到成功过的将会自动跳过，不会重复执行，只有当参数变更或者证书更新了，才会重新运行"],
       },
       {
         image: "/static/doc/images/13-1-result.png",
         title: "查看证书部署成功",
-        descriptions: ["访问nginx上的网站，可以看到证书已经部署成功"]
+        descriptions: ["访问nginx上的网站，可以看到证书已经部署成功"],
       },
       {
         image: "/static/doc/images/13-3-download.png",
         title: "还可以下载证书，手动部署",
-        descriptions: ["如果还没有好用的部署插件，没办法自动部署，你还可以下载证书，手动部署"]
-      }
-    ]
+        descriptions: ["如果还没有好用的部署插件，没办法自动部署，你还可以下载证书，手动部署"],
+      },
+    ],
   },
   {
     title: "设置定时执行和邮件通知",
@@ -156,22 +156,19 @@ const steps = ref<Step[]>([
       {
         image: "/static/doc/images/14-timer.png",
         title: "设置定时执行",
-        descriptions: [
-          "流水线测试成功，接下来配置定时触发，以后每天定时执行就不用管了",
-          "推荐配置每天运行一次，在到期前35天才会重新申请新证书并部署，没到期前会自动跳过，不会重复申请。"
-        ]
+        descriptions: ["流水线测试成功，接下来配置定时触发，以后每天定时执行就不用管了", "推荐配置每天运行一次，在到期前35天才会重新申请新证书并部署，没到期前会自动跳过，不会重复申请。"],
       },
       {
         image: "/static/doc/images/15-1-email.png",
         title: "设置邮件通知",
-        descriptions: ["建议选择监听'错误时'和'错误转成功'两种即可，在意外失败时可以尽快去排查问题，（基础版需要配置邮件服务器）"]
+        descriptions: ["建议选择监听'错误时'和'错误转成功'两种即可，在意外失败时可以尽快去排查问题，（基础版需要配置邮件服务器）"],
       },
       {
         title: "教程结束",
-        descriptions: ["感谢观看，希望对你有所帮助"]
-      }
-    ]
-  }
+        descriptions: ["感谢观看，希望对你有所帮助"],
+      },
+    ],
+  },
 ]);
 
 const current = ref(0);

packages/ui/certd-client/src/utils/index.ts

@@ -16,6 +16,6 @@ export const util = {
   router: routerUtils,
   tree: treeUtils,
   hash: hashUtils,
-  amount: amountUtils
+  amount: amountUtils,
 };
 export const utils = util;

packages/ui/certd-client/src/utils/util.amount.ts

@@ -5,5 +5,5 @@ export const amountUtils = {
 
   toYuan(amount: number): number {
     return parseFloat((amount / 100).toFixed(2));
-  }
+  },
 };

packages/ui/certd-client/src/utils/util.common.ts

@@ -47,4 +47,13 @@ export default {
     }
     return desc.replace(/\[(.*)\]\((.*)\)/g, '<a href="$2" target="_blank">$1</a>');
   },
+
+  randomString(length: number) {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+    for (let i = 0; i < length; i++) {
+      result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+  },
 };

packages/ui/certd-client/src/utils/util.hash.ts

@@ -1,5 +1,5 @@
 export const hashUtils = {
   md5(data: string) {
     throw new Error("Not implemented");
-  }
+  },
 };

packages/ui/certd-client/src/utils/util.site.ts

@@ -7,5 +7,5 @@ export const site = {
   title: function (titleText: string, baseTitle?: string) {
     const processTitle = baseTitle || env.TITLE || "Certd";
     window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ""}`;
-  }
+  },
 };

packages/ui/certd-client/src/utils/util.storage.ts

@@ -46,7 +46,7 @@ export class WebStorage {
     const stringData = JSON.stringify({
       value,
       time: Date.now(),
-      expire: expire != null ? new Date().getTime() + expire * 1000 : null
+      expire: expire != null ? new Date().getTime() + expire * 1000 : null,
     });
     this.storage.setItem(this.getKey(key), stringData);
   }

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

@@ -4,7 +4,7 @@ export async function GetList(query: any) {
   return await request({
     url: apiPrefix + "/page",
     method: "post",
-    data: query
+    data: query,
   });
 }
 
@@ -12,7 +12,7 @@ export async function AddObj(obj: any) {
   return await request({
     url: apiPrefix + "/add",
     method: "post",
-    data: obj
+    data: obj,
   });
 }
 
@@ -20,7 +20,7 @@ export async function UpdateObj(obj: any) {
   return await request({
     url: apiPrefix + "/update",
     method: "post",
-    data: obj
+    data: obj,
   });
 }
 
@@ -28,7 +28,7 @@ export async function DelObj(id: any) {
   return await request({
     url: apiPrefix + "/delete",
     method: "post",
-    params: { id }
+    params: { id },
   });
 }
 
@@ -36,6 +36,14 @@ export async function GetObj(id: any) {
   return await request({
     url: apiPrefix + "/info",
     method: "post",
-    params: { id }
+    params: { id },
+  });
+}
+
+export async function Unlock(id: any) {
+  return await request({
+    url: apiPrefix + "/unlockBlock",
+    method: "post",
+    data: { id },
   });
 }

packages/ui/certd-client/src/views/sys/authority/user/crud.tsx

@@ -1,6 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { useUserStore } from "/@/store/user";
+import { Modal, notification } from "ant-design-vue";
 
 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -26,16 +27,36 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
         pageRequest,
         addRequest,
         editRequest,
-        delRequest
+        delRequest,
       },
       rowHandle: {
-        fixed: "right"
+        fixed: "right",
+        buttons: {
+          unlock: {
+            title: "解除登录锁定",
+            text: null,
+            type: "link",
+            icon: "ion:lock-open-outline",
+            click: async ({ row }) => {
+              Modal.confirm({
+                title: "提示",
+                content: "确定要解除该用户的登录锁定吗？",
+                onOk: async () => {
+                  await api.Unlock(row.id);
+                  notification.success({
+                    message: "解除成功",
+                  });
+                },
+              });
+            },
+          },
+        },
       },
       table: {
         scroll: {
           //使用固定列时需要设置此值，并且大于等于列宽度之和的值
-          x: 1400
-        }
+          x: 1400,
+        },
       },
       columns: {
         id: {
@@ -44,8 +65,8 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           form: { show: false }, // 表单配置
           column: {
             width: 100,
-            sorter: true
-          }
+            sorter: true,
+          },
         },
         createTime: {
           title: "创建时间",
@@ -53,8 +74,8 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           form: { show: false }, // 表单配置
           column: {
             width: 180,
-            sorter: true
-          }
+            sorter: true,
+          },
         },
         // updateTime: {
         //   title: "修改时间",
@@ -72,64 +93,64 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           form: {
             rules: [
               { required: true, message: "请输入用户名" },
-              { max: 50, message: "最大50个字符" }
-            ]
+              { max: 50, message: "最大50个字符" },
+            ],
           },
           editForm: { component: { disabled: false } },
           column: {
             sorter: true,
-            width: 200
-          }
+            width: 200,
+          },
         },
         password: {
           title: "密码",
           type: "text",
           key: "password",
           column: {
-            show: false
+            show: false,
           },
           form: {
             rules: [{ max: 50, message: "最大50个字符" }],
             component: {
-              showPassword: true
+              showPassword: true,
             },
-            helper: "填写则修改密码"
-          }
+            helper: "填写则修改密码",
+          },
         },
         nickName: {
           title: "昵称",
           type: "text",
           search: { show: true }, // 开启查询
           form: {
-            rules: [{ max: 50, message: "最大50个字符" }]
+            rules: [{ max: 50, message: "最大50个字符" }],
           },
           column: {
-            sorter: true
-          }
+            sorter: true,
+          },
         },
         email: {
           title: "邮箱",
           type: "text",
           search: { show: true }, // 开启查询
           form: {
-            rules: [{ max: 50, message: "最大50个字符" }]
+            rules: [{ max: 50, message: "最大50个字符" }],
           },
           column: {
             sorter: true,
-            width: 160
-          }
+            width: 160,
+          },
         },
         mobile: {
           title: "手机号",
           type: "text",
           search: { show: true }, // 开启查询
           form: {
-            rules: [{ max: 50, message: "最大50个字符" }]
+            rules: [{ max: 50, message: "最大50个字符" }],
           },
           column: {
             sorter: true,
-            width: 130
-          }
+            width: 130,
+          },
         },
         avatar: {
           title: "头像",
@@ -140,12 +161,12 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
               //设置高度，修复操作列错位的问题
               style: {
                 height: "30px",
-                width: "auto"
+                width: "auto",
               },
               buildUrl(key: string) {
                 return `/api/basic/file/download?&key=` + key;
-              }
-            }
+              },
+            },
           },
           form: {
             component: {
@@ -154,7 +175,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
               cropper: {
                 aspectRatio: 1,
                 autoCropArea: 1,
-                viewMode: 0
+                viewMode: 0,
               },
               onReady: null,
               uploader: {
@@ -162,17 +183,17 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
                 action: "/basic/file/upload",
                 name: "file",
                 headers: {
-                  Authorization: "Bearer " + userStore.getToken
+                  Authorization: "Bearer " + userStore.getToken,
                 },
                 successHandle(res: any) {
                   return res;
-                }
+                },
               },
               buildUrl(key: string) {
                 return `/api/basic/file/download?&key=` + key;
-              }
-            }
-          }
+              },
+            },
+          },
         },
         status: {
           title: "状态",
@@ -180,24 +201,24 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           dict: dict({
             data: [
               { label: "启用", value: 1, color: "green" },
-              { label: "禁用", value: 0, color: "red" }
-            ]
+              { label: "禁用", value: 0, color: "red" },
+            ],
           }),
           column: {
             align: "center",
             sorter: true,
-            width: 100
-          }
+            width: 100,
+          },
         },
         remark: {
           title: "备注",
           type: "text",
           column: {
-            sorter: true
+            sorter: true,
           },
           form: {
-            rules: [{ max: 100, message: "最大100个字符" }]
-          }
+            rules: [{ max: 100, message: "最大100个字符" }],
+          },
         },
         roles: {
           title: "角色",
@@ -205,17 +226,17 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           dict: dict({
             url: "/sys/authority/role/list",
             value: "id",
-            label: "name"
+            label: "name",
           }), // 数据字典
           form: {
-            component: { mode: "multiple" }
+            component: { mode: "multiple" },
           },
           column: {
             width: 250,
-            sortable: true
-          }
-        }
-      }
-    }
+            sortable: true,
+          },
+        },
+      },
+    },
   };
 }

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>