feat: 站点个性化设置

2026-05-16 05:07:32 +08:00 · 2024-10-05 01:46:25 +08:00
parent ce9a9862f1
commit 11a9fe9014
57 changed files with 710 additions and 763 deletions
@@ -102,7 +102,7 @@ export default function (certPluginGroup: PluginGroup, formWrapperRef: any): Cre
            order: 101,
            helper: {
              render: () => {
-                if (userStore.isPlus) {
+                if (settingStore.isPlus) {
                  return "";
                }
                return (
@@ -211,7 +211,7 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
          },
          copy: {
            click: async (context) => {
-              userStore.checkPlus();
+              settingStore.checkPlus();
              const { ui } = useUi();
              // @ts-ignore
              let row = context[ui.tableColumn.row];
@@ -16,7 +16,7 @@
      }"
    />

-    <a-alert v-if="!userStore.isPlus" class="m-1" type="info">
+    <a-alert v-if="!settingStore.isPlus" class="m-1" type="info">
      <template #message> 还没有配置邮件服务器？<router-link :to="{ path: '/certd/settings/email' }">现在就去</router-link> </template>
    </a-alert>
  </div>
@@ -24,6 +24,7 @@
 <script lang="ts" setup>
 import { Ref, ref, watch } from "vue";
 import { useUserStore } from "/@/store/modules/user";
+import { useSettingStore } from "/@/store/modules/settings";

 const props = defineProps({
  options: {
@@ -32,7 +33,7 @@ const props = defineProps({
  }
 });

-const userStore = useUserStore();
+const settingStore = useSettingStore();

 const optionsFormState: Ref<any> = ref({});

@@ -114,6 +114,7 @@ import { PluginGroups } from "/@/views/certd/pipeline/pipeline/type";
 import { useUserStore } from "/@/store/modules/user";
 import { compute, useCompute } from "@fast-crud/fast-crud";
 import { useReference } from "/@/use/use-refrence";
+import { useSettingStore } from "/@/store/modules/settings";

 export default {
  name: "PiStepForm",
@@ -132,7 +133,7 @@ export default {
     * @returns
     */
    function useStepForm() {
-      const useStore = useUserStore();
+      const settingStore = useSettingStore();
      const getPluginGroups: any = inject("getPluginGroups");
      const pluginGroups: PluginGroups = getPluginGroups();
      const mode: Ref = ref("add");
@@ -152,7 +153,7 @@ export default {
      });

      const stepTypeSelected = (item: any) => {
-        if (item.needPlus && !useStore.isPlus) {
+        if (item.needPlus && !settingStore.isPlus) {
          message.warn("此插件需要开通专业版才能使用");
          throw new Error("此插件需要开通专业版才能使用");
        }
@@ -45,7 +45,7 @@
                  <a-button type="primary" @click="stepAdd(currentTask)">添加步骤</a-button>
                </template>
              </a-descriptions>
-              <v-draggable v-model="currentTask.steps" class="step-list" handle=".handle" item-key="id" :disabled="!userStore.isPlus">
+              <v-draggable v-model="currentTask.steps" class="step-list" handle=".handle" item-key="id" :disabled="!settingStore.isPlus">
                <template #item="{ element, index }">
                  <div class="step-row">
                    <div class="text">
@@ -99,6 +99,7 @@ export default {
  emits: ["update"],
  setup(props: any, ctx: any) {
    const userStore = useUserStore();
+    const settingStore = useSettingStore();
    function useStep() {
      const stepFormRef: Ref<any> = ref(null);
      const currentStepIndex = ref(0);
@@ -254,6 +255,7 @@ export default {
    }
    return {
      userStore,
+      settingStore,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      ...useTaskForm(),
@@ -20,7 +20,7 @@
      <div class="layout-left">
        <div class="pipeline-container">
          <div class="pipeline">
-            <v-draggable v-model="pipeline.stages" class="stages" item-key="id" handle=".stage-move-handle" :disabled="!userStore.isPlus">
+            <v-draggable v-model="pipeline.stages" class="stages" item-key="id" handle=".stage-move-handle" :disabled="!settingStore.isPlus">
              <template #header>
                <div class="stage first-stage">
                  <div class="title stage-move-handle">
@@ -73,7 +73,7 @@
                      <fs-icon v-if="editMode" title="拖动排序" icon="ion:move-outline"></fs-icon>
                    </div>
                  </div>
-                  <v-draggable v-model="stage.tasks" item-key="id" class="tasks" group="task" handle=".task-move-handle" :disabled="!userStore.isPlus">
+                  <v-draggable v-model="stage.tasks" item-key="id" class="tasks" group="task" handle=".task-move-handle" :disabled="!settingStore.isPlus">
                    <template #item="{ element: task, index: taskIndex }">
                      <div
                        class="task-container"
@@ -93,7 +93,7 @@
                            <a-popover title="步骤" :trigger="editMode ? 'none' : 'hover'">
                              <!--                          :open="true"-->
                              <template #content>
-                                <div v-for="(item, index) of task.steps" class="flex-o w-100">
+                                <div v-for="(item, index) of task.steps" :key="item.id" class="flex-o w-100">
                                  <span class="ellipsis flex-1 step-title" :class="{ disabled: item.disabled, deleted: item.disabled }">
                                    {{ index + 1 }}. {{ item.title }}
                                  </span>
@@ -266,7 +266,6 @@ import { PipelineDetail, PipelineOptions, PluginGroups, RunHistory } from "./typ
 import type { Runnable } from "@certd/pipeline";
 import PiHistoryTimelineItem from "/@/views/certd/pipeline/pipeline/component/history-timeline-item.vue";
 import { FsIcon } from "@fast-crud/fast-crud";
-import { useUserStore } from "/@/store/modules/user";
 export default defineComponent({
  name: "PipelineEdit",
  // eslint-disable-next-line vue/no-unused-components
@@ -301,8 +300,6 @@ export default defineComponent({
      router.back();
    }

-    const userStore = useUserStore();
-
    const loadCurrentHistoryDetail = async () => {
      console.log("load history logs");
      const detail: RunHistory = await props.options?.getHistoryDetail({ historyId: currentHistory.value.id });
@@ -678,13 +675,13 @@ export default defineComponent({

    const useTaskRet = useTask();
    const useStageRet = useStage(useTaskRet);
-
+    const settingStore = useSettingStore();
    return {
      pipeline,
      currentHistory,
      histories,
      goBack,
-      userStore,
+      settingStore,
      ...useTaskRet,
      ...useStageRet,
      ...useTrigger(),
@@ -54,7 +54,7 @@
        <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="使用官方邮件服务器">
            <div class="flex-o">
-              <a-switch v-model:checked="formState.usePlus" :disabled="!userStore.isPlus" @change="onUsePlusChanged" />
+              <a-switch v-model:checked="formState.usePlus" :disabled="!settingStore.isPlus" @change="onUsePlusChanged" />
              <vip-button class="ml-5" mode="button"></vip-button>
            </div>
            <div class="helper">使用官方邮箱服务器直接发邮件，免除繁琐的配置</div>
@@ -83,7 +83,7 @@ import * as emailApi from "./api.email";

 import { SettingKeys } from "./api";
 import { notification } from "ant-design-vue";
-import { useUserStore } from "/@/store/modules/user";
+import { useSettingStore } from "/@/store/modules/settings";

 interface FormState {
  host: string;
@@ -154,7 +154,7 @@ async function onTestSend() {
  }
 }

-const userStore = useUserStore();
+const settingStore = useSettingStore();
 </script>

 <style lang="less">
@@ -2,11 +2,11 @@
  <div class="d2-page-cover">
    <div class="d2-page-cover__title" @click="$open('https://github.com/certd/certd')">
      <div class="title-line">
-        <span>Certd v{{ version }}</span>
+        <span>{{ siteInfo.title }} v{{ version }}</span>
      </div>
    </div>
-    <p class="d2-page-cover__sub-title">让你的证书永不过期</p>
-    <div class="warnning">
+    <p class="d2-page-cover__sub-title">{{ siteInfo.slogan }}</p>
+    <div v-if="siteInfo.warningOff !== false" class="warning">
      <a-alert type="warning" show-icon>
        <template #description>
          <div class="flex">
@@ -27,17 +27,14 @@
    </div>
  </div>
 </template>
-<script>
-import { defineComponent, ref } from "vue";
-export default defineComponent({
-  name: "PageContent",
-  setup() {
-    const version = ref(import.meta.env.VITE_APP_VERSION);
+<script lang="ts" setup>
+import { computed, ref, Ref } from "vue";
+import { SiteInfo, useSettingStore } from "/@/store/modules/settings";

-    return {
-      version
-    };
-  }
+const version = ref(import.meta.env.VITE_APP_VERSION);
+const settingStore = useSettingStore();
+const siteInfo: Ref<SiteInfo> = computed(() => {
+  return settingStore.siteInfo;
 });
 </script>
 <style lang="less" scoped>
@@ -1,31 +0,0 @@
-export default {
-  crud: `  columns: {
-    date:{
-      title: '姓名', //字段名称
-      type: 'text', //字段类型，添加、修改、查询将自动生成相应表单组件
-    },
-    province: {
-      title: '城市',
-      type: 'dict-select', //选择框
-      form: { //表单组件自定义配置，此处配置选择框为多选
-        component: { //支持任何v-model组件
-           filterable: true, multiple: true, clearable: true
-        }
-      },
-      dict: dict({
-        data: [ //本地数据字典
-          { value: 'sz', label: '深圳' },
-          { value: 'gz', label: '广州' },
-          { value: 'wh', label: '武汉' },
-          { value: 'sh', label: '上海' }
-        ]
-      })
-    },
-    status: {
-      title: '状态',
-      type: 'dict-select', //选择框，默认单选
-      dict: dict({ url: '/dicts/OpenStatusEnum' })//远程数据字典
-    },
-  }
-  `
-};
@@ -1,178 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="210mm"
-   height="210mm"
-   viewBox="0 0 210 210"
-   version="1.1"
-   id="svg8"
-   inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
-   sodipodi:docname="logo.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.45420139"
-     inkscape:cx="628.76623"
-     inkscape:cy="688.02672"
-     inkscape:document-units="mm"
-     inkscape:current-layer="svg8"
-     inkscape:document-rotation="0"
-     showgrid="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:snap-bbox="true"
-     inkscape:snap-nodes="false"
-     inkscape:snap-bbox-edge-midpoints="false"
-     inkscape:bbox-nodes="true"
-     inkscape:bbox-paths="false"
-     inkscape:snap-global="true"
-     showguides="true"
-     inkscape:guide-bbox="true">
-    <sodipodi:guide
-       position="-128.15534,201.26213"
-       orientation="1,0"
-       id="guide1012" />
-    <sodipodi:guide
-       position="333.7864,165.14563"
-       orientation="1,0"
-       id="guide1014" />
-    <sodipodi:guide
-       position="242.91262,73.689318"
-       orientation="1,0"
-       id="guide1016" />
-    <sodipodi:guide
-       position="105.83717,102.82499"
-       orientation="1,0"
-       id="guide1022" />
-    <sodipodi:guide
-       position="138.0814,102.82499"
-       orientation="0,-1"
-       id="guide1024" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="图层 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     style="display:inline">
-    <path
-       style="fill:#002255;stroke:none;stroke-width:0.625348"
-       d="M 35.587501,69.766667 V 59.766664 h 70.000109 69.99991 v 10.000003 9.999997 H 105.58761 35.587501 Z"
-       id="path12" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2"
-       width="32.244232"
-       height="20"
-       x="71.506088"
-       y="106.64581" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-8"
-       width="32.244232"
-       height="20"
-       x="107.42467"
-       y="106.64581" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-5-8"
-       width="32.244232"
-       height="20"
-       x="143.34325"
-       y="106.64581" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-4"
-       width="32.244232"
-       height="20"
-       x="71.506088"
-       y="129.82079" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-8-3"
-       width="32.244232"
-       height="20"
-       x="107.42467"
-       y="129.82079" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-5-8-2"
-       width="32.244232"
-       height="20"
-       x="143.34325"
-       y="129.82079" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-7"
-       width="32.244232"
-       height="20"
-       x="35.587502"
-       y="106.64581" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-4-0"
-       width="32.244232"
-       height="20"
-       x="35.587502"
-       y="129.82079" />
-    <rect
-       style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-9"
-       width="32.244232"
-       height="20"
-       x="71.506088"
-       y="82.941666" />
-    <rect
-       style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-8-37"
-       width="32.244232"
-       height="20"
-       x="107.42467"
-       y="82.941666" />
-    <rect
-       style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-5-8-4"
-       width="32.244232"
-       height="20"
-       x="143.34325"
-       y="82.941666" />
-    <rect
-       style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-7-1"
-       width="32.244232"
-       height="20"
-       x="35.587502"
-       y="82.941666" />
-  </g>
-  <polygon
-     points="75.3,174.4 103.1,103.6 79.8,103.6 112.6,41.3 156.4,41.3 129.9,90.5 148.1,90.5 "
-     fill="#f6cc00"
-     id="polygon276"
-     transform="matrix(1.0930933,0,0,0.99853202,-17.517362,-0.52287941)" />
-</svg>
@@ -1,136 +0,0 @@
-<template>
-  <div class="d2-page-cover">
-    <div class="d2-page-cover__title">
-      <div class="title-line">
-        <img width="50" :src="envRef.LOGO" />
-        {{ envRef.TITLE }} v{{ version }}
-      </div>
-    </div>
-    <p class="d2-page-cover__sub-title">{{ envRef.SLOGAN }}</p>
-    <div class="exampleBox">
-      <div class="left">
-        <fs-highlight :code="helperRef.crud" lang="javascript" />
-      </div>
-      <div class="icon">
-        <fs-icon :icon="ui.icons.arrowRight" />
-      </div>
-      <div class="right">
-        <img style="border: 1px solid #eee" src="./image/crud.png" />
-      </div>
-    </div>
-    <div class="footer_box">
-      <div class="left"></div>
-      <div class="right">
-        <div>如果觉得好用，请不要吝啬你的star哟！</div>
-        <a href="https://gitee.com/fast-crud/fast-crud" target="_blank"><img src="https://gitee.com/fast-crud/fast-crud/badge/star.svg?theme=dark" alt="star" /></a>
-        <a href="https://github.com/fast-crud/fast-crud" target="_blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/fast-crud/fast-crud?logo=github" /></a>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import { useUi } from "@fast-crud/fast-crud";
-import helper from "./helper";
-import { env } from "../../../../utils/util.env";
-export default defineComponent({
-  name: "PageCover",
-  setup() {
-    const version = ref(import.meta.env.VITE_APP_VERSION);
-    const helperRef = ref(helper);
-    const { ui } = useUi();
-    const envRef = ref(env);
-    return {
-      ui,
-      version,
-      helperRef,
-      envRef
-    };
-  }
-});
-</script>
-<style lang="less" scoped>
-.d2-page-cover {
-  .logo {
-    width: 40px;
-    height: 40px;
-  }
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  .d2-page-cover__logo {
-    img {
-      width: 200px;
-    }
-  }
-  .d2-page-cover__title {
-    margin: 20px;
-    font-weight: bold;
-    display: -webkit-flex; /* Safari */
-    display: flex;
-    justify-content: flex-end;
-    .title-line {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      justify-content: center;
-      cursor: pointer;
-      font-size: 20px;
-    }
-  }
-  .d2-page-cover__sub-title {
-    margin: 0px;
-    margin-bottom: 10px;
-  }
-  .d2-page-cover__build-time {
-    margin: 0px;
-    margin-bottom: 0px;
-    margin-top: 10px;
-    font-size: 12px;
-  }
-
-  .exampleBox {
-    display: flex;
-    align-items: center;
-    height: 390px;
-    width: 96%;
-    padding: 5px;
-    margin: auto;
-    justify-content: center;
-    .left {
-      height: 100%;
-      overflow-y: hidden;
-      border: 1px solid #aaa;
-    }
-    .icon {
-      padding: 10px;
-      font-size: 20px;
-    }
-    .right {
-      height: 100%;
-      img {
-        height: 100%;
-      }
-    }
-    .d2-highlight {
-      font-size: 8px;
-    }
-  }
-
-  .footer_box {
-    padding: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .right {
-      display: flex;
-      justify-items: center;
-      align-items: center;
-      & > * {
-        display: flex;
-      }
-    }
-  }
-}
-</style>
@@ -64,13 +64,9 @@
                </a-input>
              </a-col>
              <a-col class="gutter-row" :span="8">
-                <a-button
-                  class="getCaptcha"
-                  tabindex="-1"
-                  :disabled="smsSendBtnDisabled"
-                  @click="sendSmsCode"
-                  v-text="smsTime <= 0 ? '发送' : smsTime + ' s'"
-                ></a-button>
+                <a-button class="getCaptcha" tabindex="-1" :disabled="smsSendBtnDisabled" @click="sendSmsCode">
+                  {{ smsTime <= 0 ? "发送" : smsTime + " s" }}
+                </a-button>
              </a-col>
            </a-row>
          </a-form-item>
@@ -47,8 +47,8 @@ onMounted(() => {
    const subjectInfo: SubjectInfo = {
      subjectId: settingStore.installInfo.siteId,
      installTime: settingStore.installInfo.installTime,
-      vipType: userStore.plusInfo.vipType || "free",
-      expiresTime: userStore.plusInfo.expireTime
+      vipType: settingStore.plusInfo.vipType || "free",
+      expiresTime: settingStore.plusInfo.expireTime
    };
    return subjectInfo;
  });
@@ -74,7 +74,7 @@ onMounted(() => {
    await userStore.reInit();
    notification.success({
      message: "更新成功",
-      description: "专业版已激活"
+      description: "专业版/商业版已激活"
    });
  });
 });
@@ -20,14 +20,14 @@
          <a-switch v-model:checked="formState.managerOtherUserPipeline" />
        </a-form-item>
        <a-form-item label="ICP备案号" name="icpNo">
-          <a-switch v-model:checked="formState.icpNo" />
+          <a-input v-model:value="formState.icpNo" />
        </a-form-item>
        <!--        <a-form-item label="启动后触发流水线" name="triggerOnStartup">-->
        <!--          <a-switch v-model:checked="formState.triggerOnStartup" />-->
        <!--          <div class="helper">启动后自动触发一次所有已启用的流水线</div>-->
        <!--        </a-form-item>-->
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-          <a-button type="primary" html-type="submit">保存</a-button>
+          <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>

@@ -41,7 +41,7 @@
 </template>

 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import * as api from "./api";
 import { PublicSettingsSave, SettingKeys } from "./api";
 import { notification } from "ant-design-vue";
@@ -59,18 +59,27 @@ const formState = reactive<Partial<FormState>>({

 async function loadSysPublicSettings() {
  const data: any = await api.SettingsGet(SettingKeys.SysPublic);
+  if (data == null) {
+    return;
+  }
  const setting = JSON.parse(data.setting);
  Object.assign(formState, setting);
 }

+const saveLoading = ref(false);
 loadSysPublicSettings();
 const settingsStore = useSettingStore();
 const onFinish = async (form: any) => {
-  await api.PublicSettingsSave(form);
-  await settingsStore.loadSysSettings();
-  notification.success({
-    message: "保存成功"
-  });
+  try {
+    saveLoading.value = true;
+    await api.PublicSettingsSave(form);
+    await settingsStore.loadSysSettings();
+    notification.success({
+      message: "保存成功"
+    });
+  } finally {
+    saveLoading.value = false;
+  }
 };

 const onFinishFailed = (errorInfo: any) => {
@@ -13,8 +13,6 @@ export async function SettingsSave(setting: any) {
  await request({
    url: apiPrefix + "/save",
    method: "post",
-    data: {
-      setting: JSON.stringify(setting)
-    }
+    data: setting
  });
 }
@@ -13,17 +13,42 @@
        @finish="onFinish"
        @finish-failed="onFinishFailed"
      >
-        <a-form-item label="标题" name="title">
-          <a-input v-model:checked="formState.title" />
+        <a-form-item label="站点名称" name="title">
+          <a-input v-model:value="formState.title" />
        </a-form-item>
-        <a-form-item label="副标题" name="slogan">
+        <a-form-item label="副标题/口号" name="slogan">
          <a-input v-model:value="formState.slogan" />
        </a-form-item>
        <a-form-item label="Logo" name="logo">
-          <fs-cropper-upload v-model:value="formState.logo" />
+          <fs-cropper-uploader
+            v-model:model-value="formState.logo"
+            :cropper="cropperOptions"
+            value-type="key"
+            :uploader="uploaderConfig"
+            :build-url="buildUrl"
+          />
+        </a-form-item>
+        <a-form-item label="登录页Logo" name="loginLogo">
+          <fs-cropper-uploader
+            v-model:model-value="formState.loginLogo"
+            :cropper="loginLogoCropperOptions"
+            value-type="key"
+            :uploader="uploaderConfig"
+            :build-url="buildUrl"
+          />
+        </a-form-item>
+        <a-form-item label="关闭首页告警" name="warningOff">
+          <a-switch v-model:checked="formState.warningOff" />
+        </a-form-item>
+        <a-form-item label="你的主体名称" name="licenseTo">
+          <a-input v-model:value="formState.licenseTo" />
+          <div class="helper">将会显示在底部</div>
+        </a-form-item>
+        <a-form-item label="你的主体URL" name="licenseToUrl">
+          <a-input v-model:value="formState.licenseToUrl" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-          <a-button type="primary" html-type="submit">保存</a-button>
+          <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>

@@ -37,16 +62,20 @@
 </template>

 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import * as api from "./api";
 import { notification } from "ant-design-vue";
 import { useSettingStore } from "/src/store/modules/settings";
+import { useUserStore } from "/@/store/modules/user";

 interface FormState {
  title: string;
  slogan: string;
  logo: string;
-  icpNo: string;
+  loginLogo: string;
+  warningOff: boolean;
+  licenseTo: string;
+  licenseToUrl: string;
 }

 const formState = reactive<Partial<FormState>>({});
@@ -56,19 +85,56 @@ async function loadSysSiteSettings() {
  if (data == null) {
    return;
  }
-  const setting = JSON.parse(data.setting);
-  Object.assign(formState, setting);
+  Object.assign(formState, data);
 }
-
+const saveLoading = ref(false);
 loadSysSiteSettings();
 const settingsStore = useSettingStore();
 const onFinish = async (form: any) => {
-  await api.SettingsSave(form);
-  await settingsStore.loadSysSettings();
-  notification.success({
-    message: "保存成功"
-  });
+  saveLoading.value = true;
+  try {
+    await api.SettingsSave(form);
+    await loadSysSiteSettings();
+    await settingsStore.loadSysSettings();
+    notification.success({
+      message: "保存成功"
+    });
+  } finally {
+    saveLoading.value = false;
+  }
 };
+
+const userStore = useUserStore();
+const uploaderConfig = ref({
+  type: "form",
+  action: "/basic/file/upload",
+  name: "file",
+  headers: {
+    Authorization: "Bearer " + userStore.getToken
+  },
+  successHandle(res: any) {
+    return res;
+  }
+});
+
+function buildUrl(key: string) {
+  return `/api/basic/file/download?&key=` + key;
+}
+
+function onFinishFailed(err) {
+  console.log(err);
+}
+
+const cropperOptions = ref({
+  aspectRatio: 1,
+  autoCropArea: 1,
+  viewMode: 0
+});
+const loginLogoCropperOptions = ref({
+  aspectRatio: 3,
+  autoCropArea: 1,
+  viewMode: 0
+});
 </script>

 <style lang="less">
@@ -78,4 +144,8 @@ const onFinish = async (form: any) => {
    margin: 20px;
  }
 }
+.fs-cropper-dialog__preview img {
+  border-radius: 0 !important;
+  margin-top: 0 !important;
+}
 </style>
@@ -1,21 +0,0 @@
-<template>
-  <fs-page>
-    <template #header>
-      <div class="title">input输入框</div>
-    </template>
-    <component :is="ui.card.name">
-      <fs-ui-render :render-fn="inputDemo1Render"></fs-ui-render>
-    </component>
-  </fs-page>
-</template>
-
-<script lang="ts" setup>
-import { useUi } from "@fast-crud/fast-crud";
-import { ref } from "vue";
-
-const { ui } = useUi();
-const textRef = ref();
-function inputDemo1Render() {
-  return ui.input.render({ vModel: { ref: textRef, key: "value" } });
-}
-</script>