From f3f71c5356799f88f8a807c4f41116464b163af2 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 26 Dec 2024 11:50:04 +0800
Subject: [PATCH 1/6] feat(settings): Add package: `@abp/settings`

---
 .../vben5/packages/@abp/settings/package.json | 36 +++++++++
 .../@abp/settings/src/api/definitions.ts      | 75 +++++++++++++++++++
 .../packages/@abp/settings/src/api/index.ts   |  1 +
 .../vben5/packages/@abp/settings/src/index.ts |  2 +
 .../@abp/settings/src/types/definitions.ts    | 48 ++++++++++++
 .../packages/@abp/settings/src/types/index.ts |  1 +
 .../packages/@abp/settings/tsconfig.json      |  6 ++
 7 files changed, 169 insertions(+)
 create mode 100644 apps/vben5/packages/@abp/settings/package.json
 create mode 100644 apps/vben5/packages/@abp/settings/src/api/definitions.ts
 create mode 100644 apps/vben5/packages/@abp/settings/src/api/index.ts
 create mode 100644 apps/vben5/packages/@abp/settings/src/index.ts
 create mode 100644 apps/vben5/packages/@abp/settings/src/types/definitions.ts
 create mode 100644 apps/vben5/packages/@abp/settings/src/types/index.ts
 create mode 100644 apps/vben5/packages/@abp/settings/tsconfig.json

diff --git a/apps/vben5/packages/@abp/settings/package.json b/apps/vben5/packages/@abp/settings/package.json
new file mode 100644
index 000000000..69db60502
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@abp/settings",
+  "version": "8.3.2",
+  "homepage": "https://github.com/colinin/abp-next-admin",
+  "bugs": "https://github.com/colinin/abp-next-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/colinin/abp-next-admin.git",
+    "directory": "packages/@abp/settings"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@abp/core": "workspace:*",
+    "@abp/request": "workspace:*",
+    "@abp/ui": "workspace:*",
+    "@ant-design/icons-vue": "catalog:",
+    "@vben/access": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "ant-design-vue": "catalog:",
+    "vue": "catalog:*"
+  }
+}
diff --git a/apps/vben5/packages/@abp/settings/src/api/definitions.ts b/apps/vben5/packages/@abp/settings/src/api/definitions.ts
new file mode 100644
index 000000000..b2eb6c6e8
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/api/definitions.ts
@@ -0,0 +1,75 @@
+import type { ListResultDto } from '@abp/core';
+
+import type {
+  SettingDefinitionCreateDto,
+  SettingDefinitionDto,
+  SettingDefinitionGetListInput,
+  SettingDefinitionUpdateDto,
+} from '../types/definitions';
+
+import { requestClient } from '@abp/request';
+
+/**
+ * 删除设置定义
+ * @param name 设置名称
+ */
+export function deleteApi(name: string): Promise<void> {
+  return requestClient.delete(`/api/permission-management/definitions/${name}`);
+}
+
+/**
+ * 查询设置定义
+ * @param name 设置名称
+ * @returns 设置定义数据传输对象
+ */
+export function getApi(name: string): Promise<SettingDefinitionDto> {
+  return requestClient.get<SettingDefinitionDto>(
+    `/api/permission-management/definitions/${name}`,
+  );
+}
+
+/**
+ * 查询设置定义列表
+ * @param input 设置过滤条件
+ * @returns 设置定义数据传输对象列表
+ */
+export function getListApi(
+  input?: SettingDefinitionGetListInput,
+): Promise<ListResultDto<SettingDefinitionDto>> {
+  return requestClient.get<ListResultDto<SettingDefinitionDto>>(
+    `/api/permission-management/definitions`,
+    {
+      params: input,
+    },
+  );
+}
+
+/**
+ * 创建设置定义
+ * @param input 设置定义参数
+ * @returns 设置定义数据传输对象
+ */
+export function createApi(
+  input: SettingDefinitionCreateDto,
+): Promise<SettingDefinitionDto> {
+  return requestClient.post<SettingDefinitionDto>(
+    '/api/permission-management/definitions',
+    input,
+  );
+}
+
+/**
+ * 更新设置定义
+ * @param name 设置名称
+ * @param input 设置定义参数
+ * @returns 设置定义数据传输对象
+ */
+export function updateApi(
+  name: string,
+  input: SettingDefinitionUpdateDto,
+): Promise<SettingDefinitionDto> {
+  return requestClient.put<SettingDefinitionDto>(
+    `/api/permission-management/definitions/${name}`,
+    input,
+  );
+}
diff --git a/apps/vben5/packages/@abp/settings/src/api/index.ts b/apps/vben5/packages/@abp/settings/src/api/index.ts
new file mode 100644
index 000000000..25ba3e6a1
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/api/index.ts
@@ -0,0 +1 @@
+export * as settingDefintiionsApi from './definitions';
diff --git a/apps/vben5/packages/@abp/settings/src/index.ts b/apps/vben5/packages/@abp/settings/src/index.ts
new file mode 100644
index 000000000..4d4b4e299
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/index.ts
@@ -0,0 +1,2 @@
+export * from './api';
+export * from './types';
diff --git a/apps/vben5/packages/@abp/settings/src/types/definitions.ts b/apps/vben5/packages/@abp/settings/src/types/definitions.ts
new file mode 100644
index 000000000..92c793247
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/types/definitions.ts
@@ -0,0 +1,48 @@
+import type {
+  ExtensibleObject,
+  IHasConcurrencyStamp,
+  IHasExtraProperties,
+} from '@abp/core';
+
+interface SettingDefinitionDto extends ExtensibleObject {
+  defaultValue?: string;
+  description?: string;
+  displayName: string;
+  isEncrypted: boolean;
+  isInherited: boolean;
+  isStatic: boolean;
+  isVisibleToClients: boolean;
+  name: string;
+  providers: string[];
+}
+
+interface SettingDefinitionGetListInput {
+  filter?: string;
+  providerName?: string;
+}
+
+interface SettingDefinitionCreateOrUpdateDto
+  extends IHasConcurrencyStamp,
+    IHasExtraProperties {
+  defaultValue?: string;
+  description?: string;
+  displayName: string;
+  isEncrypted: boolean;
+  isInherited: boolean;
+  isVisibleToClients: boolean;
+  providers: string[];
+}
+
+interface SettingDefinitionCreateDto
+  extends SettingDefinitionCreateOrUpdateDto {
+  name: string;
+}
+
+type SettingDefinitionUpdateDto = SettingDefinitionCreateOrUpdateDto;
+
+export type {
+  SettingDefinitionCreateDto,
+  SettingDefinitionDto,
+  SettingDefinitionGetListInput,
+  SettingDefinitionUpdateDto,
+};
diff --git a/apps/vben5/packages/@abp/settings/src/types/index.ts b/apps/vben5/packages/@abp/settings/src/types/index.ts
new file mode 100644
index 000000000..9b9d6c8af
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/types/index.ts
@@ -0,0 +1 @@
+export * from './definitions';
diff --git a/apps/vben5/packages/@abp/settings/tsconfig.json b/apps/vben5/packages/@abp/settings/tsconfig.json
new file mode 100644
index 000000000..ce1a891fb
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

From 1610295346c2409b0172b5d1a9ae00d2de49baf5 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 26 Dec 2024 11:58:24 +0800
Subject: [PATCH 2/6] feat(settings): Add settings router.

---
 apps/vben5/apps/app-antd/package.json         |  1 +
 .../app-antd/src/locales/langs/en-US/abp.json |  5 +++++
 .../app-antd/src/locales/langs/zh-CN/abp.json |  5 +++++
 .../app-antd/src/router/routes/modules/abp.ts | 20 +++++++++++++++++++
 .../src/views/settings/definitions/index.vue  | 15 ++++++++++++++
 .../definitions/SettingDefinitionModal.vue    |  7 +++++++
 .../definitions/SettingDefinitionTable.vue    |  7 +++++++
 .../@abp/settings/src/components/index.ts     |  1 +
 .../@abp/settings/src/constants/index.ts      |  1 +
 .../settings/src/constants/permissions.ts     | 10 ++++++++++
 .../vben5/packages/@abp/settings/src/index.ts |  1 +
 11 files changed, 73 insertions(+)
 create mode 100644 apps/vben5/apps/app-antd/src/views/settings/definitions/index.vue
 create mode 100644 apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
 create mode 100644 apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
 create mode 100644 apps/vben5/packages/@abp/settings/src/components/index.ts
 create mode 100644 apps/vben5/packages/@abp/settings/src/constants/index.ts
 create mode 100644 apps/vben5/packages/@abp/settings/src/constants/permissions.ts

diff --git a/apps/vben5/apps/app-antd/package.json b/apps/vben5/apps/app-antd/package.json
index 6bec70b7c..f7f4accbe 100644
--- a/apps/vben5/apps/app-antd/package.json
+++ b/apps/vben5/apps/app-antd/package.json
@@ -33,6 +33,7 @@
     "@abp/openiddict": "workspace:*",
     "@abp/permission": "workspace:*",
     "@abp/request": "workspace:*",
+    "@abp/settings": "workspace:*",
     "@abp/ui": "workspace:*",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",
diff --git a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
index bdea2d667..25ec69283 100644
--- a/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json
@@ -15,6 +15,11 @@
       "title": "Permissions",
       "groups": "Groups",
       "definitions": "Definitions"
+    },
+    "settings": {
+      "title": "Settings",
+      "definitions": "Definitions",
+      "system": "System Settings"
     }
   },
   "openiddict": {
diff --git a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
index 103d0ab79..bd4920650 100644
--- a/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
+++ b/apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json
@@ -15,6 +15,11 @@
       "title": "权限管理",
       "groups": "权限分组",
       "definitions": "权限定义"
+    },
+    "settings": {
+      "title": "设置管理",
+      "definitions": "设置定义",
+      "system": "系统设置"
     }
   },
   "openiddict": {
diff --git a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
index 7d71a20c2..b3180f421 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
@@ -110,6 +110,26 @@ const routes: RouteRecordRaw[] = [
               },
             ],
           },
+          {
+            meta: {
+              title: $t('abp.manage.settings.title'),
+              icon: 'ic:outline-settings',
+            },
+            name: 'SettingManagement',
+            path: '/manage/settings',
+            children: [
+              {
+                meta: {
+                  title: $t('abp.manage.settings.definitions'),
+                  icon: 'codicon:settings',
+                },
+                name: 'SettingDefinitions',
+                path: '/manage/settings/definitions',
+                component: () =>
+                  import('#/views/settings/definitions/index.vue'),
+              },
+            ],
+          },
           {
             meta: {
               title: $t('abp.manage.identity.auditLogs'),
diff --git a/apps/vben5/apps/app-antd/src/views/settings/definitions/index.vue b/apps/vben5/apps/app-antd/src/views/settings/definitions/index.vue
new file mode 100644
index 000000000..545f397d3
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/views/settings/definitions/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { SettingDefinitionTable } from '@abp/settings';
+
+defineOptions({
+  name: 'SettingDefinitions',
+});
+</script>
+
+<template>
+  <Page>
+    <SettingDefinitionTable />
+  </Page>
+</template>
diff --git a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
new file mode 100644
index 000000000..1017376d1
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
new file mode 100644
index 000000000..1017376d1
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/components/index.ts b/apps/vben5/packages/@abp/settings/src/components/index.ts
new file mode 100644
index 000000000..21440f85b
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/components/index.ts
@@ -0,0 +1 @@
+export { default as SettingDefinitionTable } from './definitions/SettingDefinitionTable.vue';
diff --git a/apps/vben5/packages/@abp/settings/src/constants/index.ts b/apps/vben5/packages/@abp/settings/src/constants/index.ts
new file mode 100644
index 000000000..c85954d3e
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/constants/index.ts
@@ -0,0 +1 @@
+export * from './permissions';
diff --git a/apps/vben5/packages/@abp/settings/src/constants/permissions.ts b/apps/vben5/packages/@abp/settings/src/constants/permissions.ts
new file mode 100644
index 000000000..0ab2b3558
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/constants/permissions.ts
@@ -0,0 +1,10 @@
+/** 设置定义权限 */
+export const SettingDefinitionsPermissions = {
+  /** 新增 */
+  Create: 'SettingManagement.Definition.Create',
+  Default: 'SettingManagement.Definition',
+  /** 还原或删除 */
+  DeleteOrRestore: 'SettingManagement.Definition.DeleteOrRestore',
+  /** 更新 */
+  Update: 'SettingManagement.Definition.Update',
+};
diff --git a/apps/vben5/packages/@abp/settings/src/index.ts b/apps/vben5/packages/@abp/settings/src/index.ts
index 4d4b4e299..314dad0cd 100644
--- a/apps/vben5/packages/@abp/settings/src/index.ts
+++ b/apps/vben5/packages/@abp/settings/src/index.ts
@@ -1,2 +1,3 @@
 export * from './api';
+export * from './components';
 export * from './types';

From 3f9b5827be302ef7390c7d74872c670f6a25bb99 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 26 Dec 2024 13:26:30 +0800
Subject: [PATCH 3/6] feat(settings): Improve custom Settings.

---
 .../@abp/settings/src/api/definitions.ts      |  12 +-
 .../definitions/SettingDefinitionModal.vue    | 233 +++++++++++++++++-
 .../definitions/SettingDefinitionTable.vue    | 216 +++++++++++++++-
 3 files changed, 452 insertions(+), 9 deletions(-)

diff --git a/apps/vben5/packages/@abp/settings/src/api/definitions.ts b/apps/vben5/packages/@abp/settings/src/api/definitions.ts
index b2eb6c6e8..65c5d0fcd 100644
--- a/apps/vben5/packages/@abp/settings/src/api/definitions.ts
+++ b/apps/vben5/packages/@abp/settings/src/api/definitions.ts
@@ -14,7 +14,9 @@ import { requestClient } from '@abp/request';
  * @param name 设置名称
  */
 export function deleteApi(name: string): Promise<void> {
-  return requestClient.delete(`/api/permission-management/definitions/${name}`);
+  return requestClient.delete(
+    `/api/setting-management/settings/definitions/${name}`,
+  );
 }
 
 /**
@@ -24,7 +26,7 @@ export function deleteApi(name: string): Promise<void> {
  */
 export function getApi(name: string): Promise<SettingDefinitionDto> {
   return requestClient.get<SettingDefinitionDto>(
-    `/api/permission-management/definitions/${name}`,
+    `/api/setting-management/settings/definitions/${name}`,
   );
 }
 
@@ -37,7 +39,7 @@ export function getListApi(
   input?: SettingDefinitionGetListInput,
 ): Promise<ListResultDto<SettingDefinitionDto>> {
   return requestClient.get<ListResultDto<SettingDefinitionDto>>(
-    `/api/permission-management/definitions`,
+    `/api/setting-management/settings/definitions`,
     {
       params: input,
     },
@@ -53,7 +55,7 @@ export function createApi(
   input: SettingDefinitionCreateDto,
 ): Promise<SettingDefinitionDto> {
   return requestClient.post<SettingDefinitionDto>(
-    '/api/permission-management/definitions',
+    '/api/setting-management/settings/definitions',
     input,
   );
 }
@@ -69,7 +71,7 @@ export function updateApi(
   input: SettingDefinitionUpdateDto,
 ): Promise<SettingDefinitionDto> {
   return requestClient.put<SettingDefinitionDto>(
-    `/api/permission-management/definitions/${name}`,
+    `/api/setting-management/settings/definitions/${name}`,
     input,
   );
 }
diff --git a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
index 1017376d1..475674827 100644
--- a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
@@ -1,7 +1,236 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { PropertyInfo } from '@abp/ui';
+import type { FormInstance } from 'ant-design-vue';
+
+import type { SettingDefinitionDto } from '../../types/definitions';
+
+import {
+  defineEmits,
+  defineOptions,
+  reactive,
+  ref,
+  toValue,
+  useTemplateRef,
+} from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { LocalizableInput, PropertyTable } from '@abp/ui';
+import {
+  Checkbox,
+  Form,
+  Input,
+  message,
+  Select,
+  Tabs,
+  Textarea,
+} from 'ant-design-vue';
+
+import { createApi, getApi, updateApi } from '../../api/definitions';
+
+defineOptions({
+  name: 'SettingDefinitionModal',
+});
+const emits = defineEmits<{
+  (event: 'change', data: SettingDefinitionDto): void;
+}>();
+
+const FormItem = Form.Item;
+const TabPane = Tabs.TabPane;
+
+type TabKeys = 'basic' | 'props';
+
+const defaultModel = {} as SettingDefinitionDto;
+
+const isEditModel = ref(false);
+const activeTab = ref<TabKeys>('basic');
+const form = useTemplateRef<FormInstance>('form');
+const formModel = ref<SettingDefinitionDto>({ ...defaultModel });
+const providerOptions = reactive([
+  { label: $t('AbpSettingManagement.Providers:Default'), value: 'D' },
+  { label: $t('AbpSettingManagement.Providers:Configuration'), value: 'C' },
+  { label: $t('AbpSettingManagement.Providers:Global'), value: 'G' },
+  { label: $t('AbpSettingManagement.Providers:Tenant'), value: 'T' },
+  { label: $t('AbpSettingManagement.Providers:User'), value: 'U' },
+]);
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await form.value?.validate();
+    const api = isEditModel.value
+      ? updateApi(formModel.value.name, toValue(formModel))
+      : createApi(toValue(formModel));
+    modalApi.setState({ confirmLoading: true, loading: true });
+    api
+      .then((res) => {
+        message.success($t('AbpUi.SavedSuccessfully'));
+        emits('change', res);
+        modalApi.close();
+      })
+      .finally(() => {
+        modalApi.setState({ confirmLoading: false, loading: false });
+      });
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (isOpen) {
+      isEditModel.value = false;
+      activeTab.value = 'basic';
+      formModel.value = { ...defaultModel };
+      modalApi.setState({
+        showConfirmButton: true,
+        title: $t('AbpSettingManagement.Definition:AddNew'),
+      });
+      try {
+        modalApi.setState({ loading: true });
+        const { name } = modalApi.getData<SettingDefinitionDto>();
+        name && (await onGet(name));
+      } finally {
+        modalApi.setState({ loading: false });
+      }
+    }
+  },
+  title: $t('AbpSettingManagement.Definition:AddNew'),
+});
+async function onGet(name: string) {
+  isEditModel.value = true;
+  const dto = await getApi(name);
+  formModel.value = dto;
+  modalApi.setState({
+    showConfirmButton: !dto.isStatic,
+    title: `${$t('AbpSettingManagement.Settings')} - ${dto.name}`,
+  });
+}
+function onPropChange(prop: PropertyInfo) {
+  formModel.value.extraProperties ??= {};
+  formModel.value.extraProperties[prop.key] = prop.value;
+}
+function onPropDelete(prop: PropertyInfo) {
+  formModel.value.extraProperties ??= {};
+  delete formModel.value.extraProperties[prop.key];
+}
+</script>
 
 <template>
-  <div></div>
+  <Modal>
+    <Form
+      ref="form"
+      :label-col="{ span: 6 }"
+      :model="formModel"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Tabs v-model:active-key="activeTab">
+        <!-- 基本信息 -->
+        <TabPane key="basic" :tab="$t('AbpSettingManagement.BasicInfo')">
+          <FormItem
+            :label="$t('AbpSettingManagement.DisplayName:Name')"
+            name="name"
+            required
+          >
+            <Input
+              v-model:value="formModel.name"
+              :disabled="formModel.isStatic"
+              autocomplete="off"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpSettingManagement.DisplayName:DefaultValue')"
+            name="defaultValue"
+          >
+            <Textarea
+              v-model:value="formModel.defaultValue"
+              :allow-clear="true"
+              :auto-size="{ minRows: 3 }"
+              :disabled="formModel.isStatic"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpSettingManagement.DisplayName:DisplayName')"
+            name="displayName"
+            required
+          >
+            <LocalizableInput
+              v-model:value="formModel.displayName"
+              :disabled="formModel.isStatic"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpSettingManagement.DisplayName:Description')"
+            name="description"
+          >
+            <LocalizableInput
+              v-model:value="formModel.description"
+              :disabled="formModel.isStatic"
+            />
+          </FormItem>
+          <FormItem
+            :extra="$t('AbpSettingManagement.Description:Providers')"
+            :label="$t('AbpSettingManagement.DisplayName:Providers')"
+            name="providers"
+          >
+            <Select
+              v-model:value="formModel.providers"
+              :allow-clear="true"
+              :disabled="formModel.isStatic"
+              :options="providerOptions"
+              mode="multiple"
+            />
+          </FormItem>
+          <FormItem
+            :extra="$t('AbpSettingManagement.Description:IsInherited')"
+            :label="$t('AbpSettingManagement.DisplayName:IsInherited')"
+            name="isInherited"
+          >
+            <Checkbox
+              v-model:checked="formModel.isInherited"
+              :disabled="formModel.isStatic"
+            >
+              {{ $t('AbpSettingManagement.DisplayName:IsInherited') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            :extra="$t('AbpSettingManagement.Description:IsEncrypted')"
+            :label="$t('AbpSettingManagement.DisplayName:IsEncrypted')"
+            name="isEncrypted"
+          >
+            <Checkbox
+              v-model:checked="formModel.isEncrypted"
+              :disabled="formModel.isStatic"
+            >
+              {{ $t('AbpSettingManagement.DisplayName:IsEncrypted') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            :extra="$t('AbpSettingManagement.Description:IsVisibleToClients')"
+            :label="$t('AbpSettingManagement.DisplayName:IsVisibleToClients')"
+            name="isVisibleToClients"
+          >
+            <Checkbox
+              v-model:checked="formModel.isVisibleToClients"
+              :disabled="formModel.isStatic"
+            >
+              {{ $t('AbpSettingManagement.DisplayName:IsVisibleToClients') }}
+            </Checkbox>
+          </FormItem>
+        </TabPane>
+        <!-- 属性 -->
+        <TabPane key="props" :tab="$t('AbpPermissionManagement.Properties')">
+          <PropertyTable
+            :data="formModel.extraProperties"
+            :disabled="formModel.isStatic"
+            @change="onPropChange"
+            @delete="onPropDelete"
+          />
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Modal>
 </template>
 
 <style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
index 1017376d1..8cfe20b3d 100644
--- a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
@@ -1,7 +1,219 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
+
+import type { SettingDefinitionDto } from '../../types/definitions';
+
+import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { deleteApi, getListApi } from '../../api/definitions';
+import { SettingDefinitionsPermissions } from '../../constants/permissions';
+
+defineOptions({
+  name: 'SettingDefinitionTable',
+});
+
+const permissionGroups = ref<SettingDefinitionDto[]>([]);
+const pageState = reactive({
+  current: 1,
+  size: 10,
+  total: 0,
+});
+
+const { Lr } = useLocalization();
+const { deserialize } = useLocalizationSerializer();
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  handleReset: onReset,
+  async handleSubmit(params) {
+    pageState.current = 1;
+    await onGet(params);
+  },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'filter',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<SettingDefinitionDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('AbpSettingManagement.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'displayName',
+      minWidth: 150,
+      title: $t('AbpSettingManagement.DisplayName:DisplayName'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 180,
+    },
+  ],
+  exportConfig: {},
+  keepSource: true,
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: false,
+    zoom: true,
+  },
+};
+
+const gridEvents: VxeGridListeners<SettingDefinitionDto> = {
+  pageChange(params) {
+    pageState.current = params.currentPage;
+    pageState.size = params.pageSize;
+    onPageChange();
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+const [SettingDefinitionModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./SettingDefinitionModal.vue'),
+  ),
+});
+
+async function onGet(input?: Record<string, string>) {
+  try {
+    gridApi.setLoading(true);
+    const { items } = await getListApi(input);
+    pageState.total = items.length;
+    permissionGroups.value = items.map((item) => {
+      const localizableString = deserialize(item.displayName);
+      return {
+        ...item,
+        displayName: Lr(localizableString.resourceName, localizableString.name),
+      };
+    });
+    onPageChange();
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+async function onReset() {
+  await gridApi.formApi.resetForm();
+  const input = await gridApi.formApi.getValues();
+  await onGet(input);
+}
+
+function onPageChange() {
+  const items = permissionGroups.value.slice(
+    (pageState.current - 1) * pageState.size,
+    pageState.current * pageState.size,
+  );
+  gridApi.setGridOptions({
+    data: items,
+    pagerConfig: {
+      currentPage: pageState.current,
+      pageSize: pageState.size,
+      total: pageState.total,
+    },
+  });
+}
+
+function onCreate() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+function onUpdate(row: SettingDefinitionDto) {
+  modalApi.setData(row);
+  modalApi.open();
+}
+
+function onDelete(row: SettingDefinitionDto) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`,
+    onOk: async () => {
+      await deleteApi(row.name);
+      message.success($t('AbpUi.SuccessfullyDeleted'));
+      onGet();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
+onMounted(onGet);
+</script>
 
 <template>
-  <div></div>
+  <Grid :table-title="$t('AbpSettingManagement.Settings')">
+    <template #toolbar-tools>
+      <Button
+        :icon="h(PlusOutlined)"
+        type="primary"
+        v-access:code="[SettingDefinitionsPermissions.Create]"
+        @click="onCreate"
+      >
+        {{ $t('AbpSettingManagement.Definition:AddNew') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <div :class="row.isStatic ? 'w-full' : 'basis-1/2'">
+          <Button
+            :icon="h(EditOutlined)"
+            block
+            type="link"
+            v-access:code="[SettingDefinitionsPermissions.Update]"
+            @click="onUpdate(row)"
+          >
+            {{ $t('AbpUi.Edit') }}
+          </Button>
+        </div>
+        <div v-if="!row.isStatic" class="basis-1/2">
+          <Button
+            :icon="h(DeleteOutlined)"
+            block
+            danger
+            type="link"
+            v-access:code="[SettingDefinitionsPermissions.DeleteOrRestore]"
+            @click="onDelete(row)"
+          >
+            {{ $t('AbpUi.Delete') }}
+          </Button>
+        </div>
+      </div>
+    </template>
+  </Grid>
+  <SettingDefinitionModal @change="() => onGet()" />
 </template>
 
 <style scoped></style>

From c5fbc78207a81028df69fef6d86faa1993d957b7 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 26 Dec 2024 13:38:47 +0800
Subject: [PATCH 4/6] feat(settings): Add settings api.

---
 .../packages/@abp/settings/src/api/index.ts   |  3 +-
 .../@abp/settings/src/api/settings.ts         | 71 +++++++++++++++++++
 .../packages/@abp/settings/src/types/index.ts |  1 +
 .../@abp/settings/src/types/settings.ts       | 56 +++++++++++++++
 4 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 apps/vben5/packages/@abp/settings/src/api/settings.ts
 create mode 100644 apps/vben5/packages/@abp/settings/src/types/settings.ts

diff --git a/apps/vben5/packages/@abp/settings/src/api/index.ts b/apps/vben5/packages/@abp/settings/src/api/index.ts
index 25ba3e6a1..523f55130 100644
--- a/apps/vben5/packages/@abp/settings/src/api/index.ts
+++ b/apps/vben5/packages/@abp/settings/src/api/index.ts
@@ -1 +1,2 @@
-export * as settingDefintiionsApi from './definitions';
+export * as settingDefinitionsApi from './definitions';
+export * as settingsApi from './settings';
diff --git a/apps/vben5/packages/@abp/settings/src/api/settings.ts b/apps/vben5/packages/@abp/settings/src/api/settings.ts
new file mode 100644
index 000000000..948bba7af
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/api/settings.ts
@@ -0,0 +1,71 @@
+import type { ListResultDto } from '@abp/core';
+
+import type { SettingGroup, SettingsUpdateInput } from '../types/settings';
+
+import { requestClient } from '@abp/request';
+
+/**
+ * 获取全局设置
+ * @returns 设置数据传输对象列表
+ */
+export function getGlobalSettingsApi(): Promise<ListResultDto<SettingGroup>> {
+  return requestClient.get<ListResultDto<SettingGroup>>(
+    `/api/setting-management/settings/by-global`,
+  );
+}
+
+/**
+ * 设置全局设置
+ * @returns 设置数据传输对象列表
+ */
+export function setGlobalSettingsApi(
+  input: SettingsUpdateInput,
+): Promise<void> {
+  return requestClient.put(
+    `/api/setting-management/settings/change-global`,
+    input,
+  );
+}
+
+/**
+ * 获取租户设置
+ * @returns 设置数据传输对象列表
+ */
+export function getTenantSettingsApi(): Promise<ListResultDto<SettingGroup>> {
+  return requestClient.get<ListResultDto<SettingGroup>>(
+    `/api/setting-management/settings/by-current-tenant`,
+  );
+}
+
+/**
+ * 设置租户设置
+ * @returns 设置数据传输对象列表
+ */
+export function setTenantSettingsApi(
+  input: SettingsUpdateInput,
+): Promise<void> {
+  return requestClient.put(
+    `/api/setting-management/settings/change-current-tenant`,
+    input,
+  );
+}
+/**
+ * 获取用户设置
+ * @returns 设置数据传输对象列表
+ */
+export function getUserSettingsApi(): Promise<ListResultDto<SettingGroup>> {
+  return requestClient.get<ListResultDto<SettingGroup>>(
+    `/api/setting-management/settings/by-current-user`,
+  );
+}
+
+/**
+ * 设置用户设置
+ * @returns 设置数据传输对象列表
+ */
+export function setUserSettingsApi(input: SettingsUpdateInput): Promise<void> {
+  return requestClient.put(
+    `/api/setting-management/settings/change-current-user`,
+    input,
+  );
+}
diff --git a/apps/vben5/packages/@abp/settings/src/types/index.ts b/apps/vben5/packages/@abp/settings/src/types/index.ts
index 9b9d6c8af..f7366dc9f 100644
--- a/apps/vben5/packages/@abp/settings/src/types/index.ts
+++ b/apps/vben5/packages/@abp/settings/src/types/index.ts
@@ -1 +1,2 @@
 export * from './definitions';
+export * from './settings';
diff --git a/apps/vben5/packages/@abp/settings/src/types/settings.ts b/apps/vben5/packages/@abp/settings/src/types/settings.ts
new file mode 100644
index 000000000..15414f7b9
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/types/settings.ts
@@ -0,0 +1,56 @@
+interface SettingBase {
+  /** 名称 */
+  name: string;
+  /** 当前设置值 */
+  value: any;
+}
+
+/** 配置变更对象 */
+type SettingUpdateInput = SettingBase;
+
+/** 配置变更集合对象 */
+interface SettingsUpdateInput {
+  /** 配置集合 */
+  settings: SettingUpdateInput[];
+}
+
+export enum ValueType {
+  Array = 4,
+  Boolean = 2,
+  Date = 3,
+  Number = 1,
+  Object = 10,
+  Option = 5,
+  String = 0,
+}
+
+interface Option {
+  name: string;
+  value: string;
+}
+
+interface SettingDetail {
+  defaultValue: string;
+  description?: string;
+  displayName: string;
+  isEncrypted: boolean;
+  name: string;
+  options: Option[];
+  slot?: string;
+  value?: string;
+  valueType: ValueType;
+}
+
+interface Setting {
+  description?: string;
+  details: SettingDetail[];
+  displayName: string;
+}
+
+interface SettingGroup {
+  description: string;
+  displayName: string;
+  settings: Setting[];
+}
+
+export type { SettingGroup, SettingsUpdateInput };

From 10ec977c306005633cb4ac41f7286136433762e7 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 26 Dec 2024 13:48:01 +0800
Subject: [PATCH 5/6] feat(settings): Add system settings router.

---
 .../app-antd/src/router/routes/modules/abp.ts     |  9 +++++++++
 .../app-antd/src/views/settings/system/index.vue  | 15 +++++++++++++++
 .../@abp/settings/src/components/index.ts         |  2 ++
 .../src/components/settings/SettingForm.vue       |  7 +++++++
 .../src/components/settings/SystemSetting.vue     | 10 ++++++++++
 .../src/components/settings/UserSetting.vue       |  7 +++++++
 6 files changed, 50 insertions(+)
 create mode 100644 apps/vben5/apps/app-antd/src/views/settings/system/index.vue
 create mode 100644 apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue
 create mode 100644 apps/vben5/packages/@abp/settings/src/components/settings/SystemSetting.vue
 create mode 100644 apps/vben5/packages/@abp/settings/src/components/settings/UserSetting.vue

diff --git a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
index b3180f421..7fcd60a98 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
@@ -128,6 +128,15 @@ const routes: RouteRecordRaw[] = [
                 component: () =>
                   import('#/views/settings/definitions/index.vue'),
               },
+              {
+                meta: {
+                  title: $t('abp.manage.settings.system'),
+                  icon: 'tabler:settings-cog',
+                },
+                name: 'SystemSettings',
+                path: '/manage/settings/system',
+                component: () => import('#/views/settings/system/index.vue'),
+              },
             ],
           },
           {
diff --git a/apps/vben5/apps/app-antd/src/views/settings/system/index.vue b/apps/vben5/apps/app-antd/src/views/settings/system/index.vue
new file mode 100644
index 000000000..f602c52ef
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/views/settings/system/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { SystemSetting } from '@abp/settings';
+
+defineOptions({
+  name: 'SystemSettings',
+});
+</script>
+
+<template>
+  <Page>
+    <SystemSetting />
+  </Page>
+</template>
diff --git a/apps/vben5/packages/@abp/settings/src/components/index.ts b/apps/vben5/packages/@abp/settings/src/components/index.ts
index 21440f85b..aaa211b75 100644
--- a/apps/vben5/packages/@abp/settings/src/components/index.ts
+++ b/apps/vben5/packages/@abp/settings/src/components/index.ts
@@ -1 +1,3 @@
 export { default as SettingDefinitionTable } from './definitions/SettingDefinitionTable.vue';
+export { default as SystemSetting } from './settings/SystemSetting.vue';
+export { default as UserSetting } from './settings/UserSetting.vue';
diff --git a/apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue b/apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue
new file mode 100644
index 000000000..1017376d1
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/components/settings/SystemSetting.vue b/apps/vben5/packages/@abp/settings/src/components/settings/SystemSetting.vue
new file mode 100644
index 000000000..f5a7cc7ad
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/components/settings/SystemSetting.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+</script>
+
+<template>
+  <Page :title="$t('AbpSettingManagement.Settings')" />
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/components/settings/UserSetting.vue b/apps/vben5/packages/@abp/settings/src/components/settings/UserSetting.vue
new file mode 100644
index 000000000..1017376d1
--- /dev/null
+++ b/apps/vben5/packages/@abp/settings/src/components/settings/UserSetting.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

From c0b55406bb6dc8a210390809d19b063e509464f7 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 26 Dec 2024 15:05:40 +0800
Subject: [PATCH 6/6] feat(settings): Improve setting manager.

---
 .../vben5/packages/@abp/settings/package.json |   1 +
 .../@abp/settings/src/api/settings.ts         |  13 ++
 .../src/components/settings/SettingForm.vue   | 211 +++++++++++++++++-
 .../src/components/settings/SystemSetting.vue |  85 ++++++-
 .../src/components/settings/UserSetting.vue   |  22 +-
 .../@abp/settings/src/types/settings.ts       |   4 +-
 6 files changed, 328 insertions(+), 8 deletions(-)

diff --git a/apps/vben5/packages/@abp/settings/package.json b/apps/vben5/packages/@abp/settings/package.json
index 69db60502..4d76e0d29 100644
--- a/apps/vben5/packages/@abp/settings/package.json
+++ b/apps/vben5/packages/@abp/settings/package.json
@@ -31,6 +31,7 @@
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
     "ant-design-vue": "catalog:",
+    "dayjs": "catalog:",
     "vue": "catalog:*"
   }
 }
diff --git a/apps/vben5/packages/@abp/settings/src/api/settings.ts b/apps/vben5/packages/@abp/settings/src/api/settings.ts
index 948bba7af..81d4356ba 100644
--- a/apps/vben5/packages/@abp/settings/src/api/settings.ts
+++ b/apps/vben5/packages/@abp/settings/src/api/settings.ts
@@ -69,3 +69,16 @@ export function setUserSettingsApi(input: SettingsUpdateInput): Promise<void> {
     input,
   );
 }
+
+/**
+ * 发送测试邮件
+ * @param emailAddress 邮件接收方地址
+ */
+export const sendTestEmailApi = (emailAddress: string) => {
+  return requestClient.post(
+    `/api/setting-management/settings/send-test-email`,
+    {
+      emailAddress,
+    },
+  );
+};
diff --git a/apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue b/apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue
index 1017376d1..1100322f7 100644
--- a/apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue
+++ b/apps/vben5/packages/@abp/settings/src/components/settings/SettingForm.vue
@@ -1,7 +1,214 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type {
+  SettingDetail,
+  SettingGroup,
+  SettingsUpdateInput,
+} from '../../types';
+
+import { computed, onMounted, ref, toValue } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { formatToDate } from '@abp/core';
+import {
+  Button,
+  Card,
+  Checkbox,
+  Collapse,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  InputPassword,
+  message,
+  Select,
+  Tabs,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { ValueType } from '../../types';
+
+defineOptions({
+  name: 'SettingForm',
+});
+const props = defineProps<{
+  getApi: () => Promise<SettingGroup[]>;
+  submitApi: (input: SettingsUpdateInput) => Promise<void>;
+}>();
+const emits = defineEmits<{
+  (event: 'change', data: SettingsUpdateInput): void;
+}>();
+const FormItem = Form.Item;
+const TabPane = Tabs.TabPane;
+const CollapsePanel = Collapse.Panel;
+const SelectOption = Select.Option;
+
+const defaultModel: SettingsUpdateInput = {
+  settings: [],
+};
+
+const activeTab = ref(0);
+const submiting = ref(false);
+const settingGroups = ref<SettingGroup[]>([]);
+const settingsUpdateInput = ref<SettingsUpdateInput>({ ...defaultModel });
+
+const getExpandedCollapseKeys = computed(() => {
+  return (group: SettingGroup) => {
+    const keys = group.settings.map((group) => {
+      return group.displayName;
+    });
+    return keys;
+  };
+});
+
+async function onGet() {
+  settingGroups.value = await props.getApi();
+}
+
+async function onSubmit() {
+  try {
+    submiting.value = true;
+    const input = toValue(settingsUpdateInput);
+    await props.submitApi(input);
+    emits('change', input);
+    message.success($t('AbpSettingManagement.SuccessfullySaved'));
+  } finally {
+    submiting.value = false;
+  }
+}
+
+function onCheckChange(setting: SettingDetail) {
+  setting.value = setting.value === 'true' ? 'false' : 'true';
+  onValueChange(setting);
+}
+
+function onDateChange(e: any, setting: SettingDetail) {
+  setting.value = dayjs.isDayjs(e) ? formatToDate(e) : '';
+  onValueChange(setting);
+}
+
+function onValueChange(setting: SettingDetail) {
+  const index = settingsUpdateInput.value.settings.findIndex(
+    (s) => s.name === setting.name,
+  );
+  if (index === -1) {
+    settingsUpdateInput.value.settings.push({
+      name: setting.name,
+      value: String(setting.value),
+    });
+  } else {
+    settingsUpdateInput.value.settings[index]!.value = String(setting.value);
+  }
+}
+
+onMounted(onGet);
+</script>
 
 <template>
-  <div></div>
+  <Card :title="$t('AbpSettingManagement.Settings')">
+    <template #extra>
+      <Button
+        v-if="settingsUpdateInput.settings.length > 0"
+        :loading="submiting"
+        class="w-[100px]"
+        post-icon="ant-design:setting-outlined"
+        type="primary"
+        @click="onSubmit"
+      >
+        {{ $t('AbpUi.Submit') }}
+      </Button>
+    </template>
+    <Form :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
+      <Tabs v-model="activeTab">
+        <TabPane
+          v-for="(group, index) in settingGroups"
+          :key="index"
+          :tab="group.displayName"
+        >
+          <Collapse :default-active-key="getExpandedCollapseKeys(group)">
+            <CollapsePanel
+              v-for="setting in group.settings"
+              :key="setting.displayName"
+              :header="setting.displayName"
+            >
+              <template v-for="detail in setting.details" :key="detail.name">
+                <slot
+                  v-if="detail.slot"
+                  :change="
+                    detail.valueType === ValueType.Boolean
+                      ? onCheckChange(detail)
+                      : onValueChange(detail)
+                  "
+                  :detail="detail"
+                  :name="detail.slot"
+                ></slot>
+                <FormItem
+                  v-else
+                  :extra="detail.description"
+                  :label="detail.displayName"
+                >
+                  <template v-if="detail.valueType === ValueType.String">
+                    <InputPassword
+                      v-if="detail.isEncrypted"
+                      v-model:value="detail.value"
+                      :placeholder="detail.description"
+                      @change="onValueChange(detail)"
+                    />
+                    <Input
+                      v-else
+                      v-model:value="detail.value"
+                      :placeholder="detail.description"
+                      type="text"
+                      @change="onValueChange(detail)"
+                    />
+                  </template>
+                  <InputNumber
+                    v-else-if="
+                      detail.valueType === ValueType.Number &&
+                      !detail.isEncrypted
+                    "
+                    v-model:value="detail.value"
+                    :placeholder="detail.description"
+                    class="w-full"
+                    @change="onValueChange(detail)"
+                  />
+                  <DatePicker
+                    v-else-if="detail.valueType === ValueType.Date"
+                    :placeholder="detail.description"
+                    :value="
+                      detail.value ? dayjs(detail.value, 'YYYY-MM-DD') : ''
+                    "
+                    style="width: 100%"
+                    @change="onDateChange($event, detail)"
+                  />
+                  <Select
+                    v-if="detail.valueType === ValueType.Option"
+                    v-model:value="detail.value"
+                    @change="onValueChange(detail)"
+                  >
+                    <SelectOption
+                      v-for="option in detail.options"
+                      :key="option.value"
+                      :disabled="option.value === detail.value"
+                    >
+                      {{ option.name }}
+                    </SelectOption>
+                  </Select>
+                  <Checkbox
+                    v-if="detail.valueType === ValueType.Boolean"
+                    :checked="detail.value === 'true'"
+                    @change="onCheckChange(detail)"
+                  >
+                    {{ detail.displayName }}
+                  </Checkbox>
+                </FormItem>
+              </template>
+            </CollapsePanel>
+          </Collapse>
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Card>
 </template>
 
 <style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/components/settings/SystemSetting.vue b/apps/vben5/packages/@abp/settings/src/components/settings/SystemSetting.vue
index f5a7cc7ad..4c8621385 100644
--- a/apps/vben5/packages/@abp/settings/src/components/settings/SystemSetting.vue
+++ b/apps/vben5/packages/@abp/settings/src/components/settings/SystemSetting.vue
@@ -1,10 +1,91 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { SettingsUpdateInput } from '../../types';
+
+import { ref } from 'vue';
+
 import { $t } from '@vben/locales';
+
+import { isEmail, useAbpStore } from '@abp/core';
+import { Button, Form, InputSearch, message, Modal } from 'ant-design-vue';
+
+import {
+  getGlobalSettingsApi,
+  getTenantSettingsApi,
+  sendTestEmailApi,
+  setGlobalSettingsApi,
+  setTenantSettingsApi,
+} from '../../api/settings';
+import SettingForm from './SettingForm.vue';
+
+defineOptions({
+  name: 'SystemSettingForm',
+});
+
+const FormItem = Form.Item;
+
+const abpStore = useAbpStore();
+
+const sending = ref(false);
+
+async function onGet() {
+  const api = abpStore.application?.currentTenant.isAvailable
+    ? getTenantSettingsApi
+    : getGlobalSettingsApi;
+  const { items } = await api();
+  return items;
+}
+
+async function onSubmit(input: SettingsUpdateInput) {
+  const api = abpStore.application?.currentTenant.isAvailable
+    ? setTenantSettingsApi
+    : setGlobalSettingsApi;
+  await api(input);
+}
+
+async function onSendMail(email: string) {
+  if (!isEmail(email)) {
+    Modal.warn({
+      centered: true,
+      content: $t('AbpValidation.The {0} field is not a valid e-mail address', [
+        $t('AbpSettingManagement.TargetEmailAddress'),
+      ]),
+      title: $t('AbpValidation.ThisFieldIsNotValid'),
+    });
+    return;
+  }
+  try {
+    sending.value = true;
+    await sendTestEmailApi(email);
+    message.success($t('AbpSettingManagement.SuccessfullySent'));
+  } finally {
+    sending.value = false;
+  }
+}
 </script>
 
 <template>
-  <Page :title="$t('AbpSettingManagement.Settings')" />
+  <SettingForm :get-api="onGet" :submit-api="onSubmit">
+    <template #send-test-email="{ detail }">
+      <FormItem
+        :extra="detail.description"
+        :label="detail.displayName"
+        name="testEmail"
+      >
+        <InputSearch
+          v-model:value="detail.value"
+          :loading="sending"
+          :placeholder="$t('AbpSettingManagement.TargetEmailAddress')"
+          @search="onSendMail"
+        >
+          <template #enterButton>
+            <Button :loading="sending" type="primary">
+              {{ $t('AbpSettingManagement.Send') }}
+            </Button>
+          </template>
+        </InputSearch>
+      </FormItem>
+    </template>
+  </SettingForm>
 </template>
 
 <style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/components/settings/UserSetting.vue b/apps/vben5/packages/@abp/settings/src/components/settings/UserSetting.vue
index 1017376d1..2bb156214 100644
--- a/apps/vben5/packages/@abp/settings/src/components/settings/UserSetting.vue
+++ b/apps/vben5/packages/@abp/settings/src/components/settings/UserSetting.vue
@@ -1,7 +1,25 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { SettingsUpdateInput } from '../../types';
+
+import { getUserSettingsApi, setUserSettingsApi } from '../../api/settings';
+import SettingForm from './SettingForm.vue';
+
+defineOptions({
+  name: 'UserSettingForm',
+});
+
+async function onGet() {
+  const { items } = await getUserSettingsApi();
+  return items;
+}
+
+async function onSubmit(input: SettingsUpdateInput) {
+  await setUserSettingsApi(input);
+}
+</script>
 
 <template>
-  <div></div>
+  <SettingForm :get-api="onGet" :submit-api="onSubmit" />
 </template>
 
 <style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/types/settings.ts b/apps/vben5/packages/@abp/settings/src/types/settings.ts
index 15414f7b9..b29cb6a0b 100644
--- a/apps/vben5/packages/@abp/settings/src/types/settings.ts
+++ b/apps/vben5/packages/@abp/settings/src/types/settings.ts
@@ -2,7 +2,7 @@ interface SettingBase {
   /** 名称 */
   name: string;
   /** 当前设置值 */
-  value: any;
+  value: string;
 }
 
 /** 配置变更对象 */
@@ -53,4 +53,4 @@ interface SettingGroup {
   settings: Setting[];
 }
 
-export type { SettingGroup, SettingsUpdateInput };
+export type { Setting, SettingDetail, SettingGroup, SettingsUpdateInput };