feat: 站点个性化设置

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

@@ -13,8 +13,6 @@ export async function SettingsSave(setting: any) {
   await request({
     url: apiPrefix + "/save",
     method: "post",
-    data: {
-      setting: JSON.stringify(setting)
-    }
+    data: setting
   });
 }

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

@@ -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>