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

<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">
      <h2>{{ t("certd.siteHide") }}</h2>
      <a-form-item :label="t('certd.enableSiteHide')" :name="['hidden', 'enabled']" :required="true">
        <div class="flex">
          <a-switch v-model:checked="formState.hidden.enabled" />
        </div>

        <div class="helper">
          {{ t("certd.siteHideDescription") }}
          <a href="https://certd.docmirror.cn/guide/feature/safe/hidden" class="flex items-center" target="_blank">
            <span>{{ t("certd.helpDoc") }}</span>
            <fs-icon class="ml-1" icon="mingcute:question-line"></fs-icon
          ></a>
        </div>
      </a-form-item>
      <a-form-item v-if="formState.hidden.enabled" :label="t('certd.randomAddress')" :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">{{ t("certd.siteHideUrlHelper") }}</div>
      </a-form-item>
      <a-form-item v-if="formState.hidden.enabled" :label="t('certd.fullUnlockUrl')" :name="['hidden', 'openPath']" :required="true">
        <div class="flex"><fs-copyable v-model="openUrl" class="flex-inline"></fs-copyable></div>
        <div class="helper red">{{ t("certd.saveThisUrl") }}</div>
      </a-form-item>
      <a-form-item v-if="formState.hidden.enabled" :label="t('certd.unlockPassword')" :name="['hidden', 'openPassword']" :required="false">
        <a-input-password v-model:value="formState.hidden.openPassword" :allow-clear="true" />
        <div class="helper">{{ t("certd.unlockPasswordHelper") }}</div>
      </a-form-item>
      <a-form-item v-if="formState.hidden.enabled" :label="t('certd.autoHideTime')" :name="['hidden', 'autoHiddenTimes']" :required="true">
        <a-input-number v-model:value="formState.hidden.autoHiddenTimes" :allow-clear="true" />
        <div class="helper">{{ t("certd.autoHideTimeHelper") }}</div>
      </a-form-item>
      <a-form-item v-if="formState.hidden.enabled" :label="t('certd.hideOpenApi')" :name="['hidden', 'hiddenOpenApi']" :required="true">
        <a-switch v-model:checked="formState.hidden.hiddenOpenApi" />
        <div class="helper">{{ t("certd.hideOpenApiHelper") }}</div>
      </a-form-item>
      <a-form-item v-if="formState.hidden.enabled" :label="t('certd.hideSiteImmediately')">
        <loading-button class="ml-1" type="primary" html-type="button" :click="doHiddenImmediate">{{ t("certd.hideImmediately") }}</loading-button>
      </a-form-item>
      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
        <loading-button type="primary" html-type="button" :click="onClick">{{ t("certd.save") }}</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";
import { useSettingStore } from "/@/store/settings";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
defineOptions({
  name: "SettingSafe",
});
const settingsStore = useSettingStore();
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: t("certd.saveSuccess"),
  });
};

async function doHiddenImmediate() {
  Modal.confirm({
    title: t("certd.confirmHideSiteTitle"),
    content: t("certd.confirmHideSiteContent"),
    async onOk() {
      await api.HiddenImmediate();
      notification.success({
        message: t("certd.siteHiddenSuccess"),
      });
    },
  });
}
</script>
<style lang="less">
.sys-settings-base {
}
</style>