feat: 新增系统管理/系统配置（仅前端配置页面，Mock 部分接口）

continew-admin-ui/src/api/system/config.ts

+import axios from 'axios';
+import qs from 'query-string';
+
+const BASE_URL = '/api/system/option';
+
+export interface BasicConfigRecord {
+  site_title?: string;
+  site_copyright?: string;
+  site_logo: { url?: string };
+  site_favicon: { url?: string };
+}
+
+export interface DataRecord {
+  name: string;
+  code: string;
+  value: string;
+  description?: string;
+}
+
+export interface ListParam {
+  code?: Array<string>;
+}
+
+export function list(params: ListParam) {
+  return axios.get<DataRecord[]>(`${BASE_URL}`, {
+    params,
+    paramsSerializer: (obj) => {
+      return qs.stringify(obj);
+    },
+  });
+}

continew-admin-ui/src/locale/en-US.ts

@@ -6,6 +6,7 @@ import localeMenu from '@/views/system/menu/locale/en-US';
 import localeDept from '@/views/system/dept/locale/en-US';
 import localeAnnouncement from '@/views/system/announcement/locale/en-US';
 import localeDict from '@/views/system/dict/locale/en-US';
+import localeConfig from '@/views/system/config/locale/en-US';
 
 import localeGenerator from '@/views/tool/generator/locale/en-US';
 
@@ -62,6 +63,7 @@ export default {
   ...localeDept,
   ...localeAnnouncement,
   ...localeDict,
+  ...localeConfig,
 
   ...localeGenerator,
 

continew-admin-ui/src/locale/zh-CN.ts

@@ -6,6 +6,7 @@ import localeMenu from '@/views/system/menu/locale/zh-CN';
 import localeDept from '@/views/system/dept/locale/zh-CN';
 import localeAnnouncement from '@/views/system/announcement/locale/zh-CN';
 import localeDict from '@/views/system/dict/locale/zh-CN';
+import localeConfig from '@/views/system/config/locale/zh-CN';
 
 import localeGenerator from '@/views/tool/generator/locale/zh-CN';
 
@@ -62,6 +63,7 @@ export default {
   ...localeDept,
   ...localeAnnouncement,
   ...localeDict,
+  ...localeConfig,
 
   ...localeGenerator,
 

continew-admin-ui/src/mock/index.ts

@@ -18,6 +18,7 @@ import '@/views/demo/visualization/data-analysis/mock';
 import '@/views/demo/visualization/multi-dimension-data-analysis/mock';
 
 import '@/views/system/user/center/mock';
+import '@/views/system/config/mock';
 
 Mock.setup({
   timeout: '15-150',

continew-admin-ui/src/router/routes/modules/system.ts

@@ -66,6 +66,15 @@ const System: AppRouteRecordRaw = {
         requiresAuth: true,
       },
     },
+    {
+      name: 'Config',
+      path: '/system/config',
+      component: () => import('@/views/system/config/index.vue'),
+      meta: {
+        locale: 'menu.system.config',
+        requiresAuth: true,
+      },
+    },
   ],
 };
 

continew-admin-ui/src/views/system/config/components/basic-setting.vue

+<template>
+  <a-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    :label-col-props="{ span: 2 }"
+    :wrapper-col-props="{ span: 10 }"
+    size="large"
+    :disabled="!isEdit"
+  >
+    <a-list class="list-layout" :bordered="false">
+      <a-list-item class="list-item">
+        <a-form-item class="image-item" hide-label field="favicon">
+          {{ siteFavicon?.name }}
+          <template #extra>
+            {{ siteFavicon?.description }}
+            <br />
+            <a-upload
+              :file-list="faviconFile ? [faviconFile] : []"
+              :show-file-list="false"
+              :custom-request="handleUploadFavicon"
+              @change="handleChangeFavicon"
+            >
+              <template #upload-button>
+                <div
+                  :class="`arco-upload-list-item${
+                    faviconFile && faviconFile.status === 'error'
+                      ? ' arco-upload-list-item-error'
+                      : ''
+                  }`"
+                >
+                  <div
+                    v-if="faviconFile && faviconFile.url"
+                    class="arco-upload-list-picture custom-upload-avatar favicon"
+                  >
+                    <img :src="faviconFile.url" />
+                    <div
+                      v-if="isEdit"
+                      class="arco-upload-list-picture-mask favicon"
+                    >
+                      <IconEdit />
+                    </div>
+                  </div>
+                  <div v-else class="arco-upload-picture-card favicon">
+                    <div class="arco-upload-picture-card-text">
+                      <icon-upload />
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-upload>
+          </template>
+        </a-form-item>
+      </a-list-item>
+      <a-list-item class="list-item">
+        <a-form-item class="image-item" hide-label field="site_logo">
+          {{ siteLogo?.name }}
+          <template #extra>
+            {{ siteLogo?.description }}
+            <br />
+            <a-upload
+              :file-list="logoFile ? [logoFile] : []"
+              :show-file-list="false"
+              :custom-request="handleUploadLogo"
+              @change="handleChangeLogo"
+            >
+              <template #upload-button>
+                <div
+                  :class="`arco-upload-list-item${
+                    logoFile && logoFile.status === 'error'
+                      ? ' arco-upload-list-item-error'
+                      : ''
+                  }`"
+                >
+                  <div
+                    v-if="logoFile && logoFile.url"
+                    class="arco-upload-list-picture custom-upload-avatar logo"
+                  >
+                    <img :src="logoFile.url" />
+                    <div
+                      v-if="isEdit"
+                      class="arco-upload-list-picture-mask logo"
+                    >
+                      <IconEdit />
+                    </div>
+                  </div>
+                  <div v-else class="arco-upload-picture-card logo">
+                    <div class="arco-upload-picture-card-text">
+                      <icon-upload />
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-upload>
+          </template>
+        </a-form-item>
+      </a-list-item>
+      <a-list-item class="list-item" style="border: none">
+        <a-form-item
+          class="input-item"
+          :label="siteTitle?.name"
+          field="site_title"
+        >
+          <a-input v-model="form.site_title" placeholder="请输入网站标题" />
+        </a-form-item>
+        <a-form-item
+          class="input-item"
+          :label="siteCopyright?.name"
+          field="site_copyright"
+        >
+          <a-input v-model="form.site_copyright" placeholder="请输入版权信息" />
+        </a-form-item>
+        <div style="margin: 0 0 0 3px">
+          <a-space>
+            <a-button
+              v-if="!isEdit"
+              v-permission="['system:config:update']"
+              type="primary"
+              @click="toEdit"
+            >
+              <template #icon><icon-edit /></template>修改
+            </a-button>
+            <a-button
+              v-if="!isEdit"
+              v-permission="['system:config:delete']"
+              @click="toRestore"
+            >
+              <template #icon><icon-redo /></template>恢复默认值
+            </a-button>
+            <a-button
+              v-if="isEdit"
+              v-permission="['system:config:update']"
+              type="primary"
+              @click="handleSave"
+            >
+              <template #icon><icon-save /></template>保存
+            </a-button>
+            <a-button
+              v-if="isEdit"
+              v-permission="['system:config:update']"
+              @click="handleReset"
+            >
+              <template #icon><icon-refresh /></template>重置
+            </a-button>
+            <a-button
+              v-if="isEdit"
+              v-permission="['system:config:update']"
+              @click="handleCancel"
+            >
+              <template #icon><icon-redo /></template>取消
+            </a-button>
+          </a-space>
+        </div>
+      </a-list-item>
+    </a-list>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+  import { getCurrentInstance, ref, reactive, toRefs } from 'vue';
+  import { FileItem, RequestOption } from '@arco-design/web-vue';
+  import {
+    BasicConfigRecord,
+    DataRecord,
+    ListParam,
+    list,
+  } from '@/api/system/config';
+
+  const { proxy } = getCurrentInstance() as any;
+  const dataList = ref<DataRecord[]>([]);
+  const isEdit = ref(false);
+  const logoFile = ref<FileItem>({ uid: '-1' });
+  const faviconFile = ref<FileItem>({ uid: '-2' });
+  const siteTitle = ref<DataRecord>();
+  const siteCopyright = ref<DataRecord>();
+  const siteLogo = ref<DataRecord>();
+  const siteFavicon = ref<DataRecord>();
+
+  const data = reactive({
+    queryParams: {
+      code: ['site_title', 'site_copyright', 'site_logo', 'site_favicon'],
+    },
+    form: {} as BasicConfigRecord,
+    rules: {
+      site_title: [{ required: true, message: '请输入系统标题' }],
+      site_copyright: [{ required: true, message: '请输入版权信息' }],
+    },
+  });
+  const { queryParams, form, rules } = toRefs(data);
+
+  /**
+   * 重置表单
+   */
+  const reset = () => {
+    proxy.$refs.formRef?.resetFields();
+  };
+
+  /**
+   * 查询配置
+   */
+  const getConfig = async (params: ListParam = { ...queryParams.value }) => {
+    const res = await list(params);
+    dataList.value = res.data;
+    siteTitle.value = dataList.value.find(
+      (option) => option.code === 'site_title'
+    );
+    siteCopyright.value = dataList.value.find(
+      (option) => option.code === 'site_copyright'
+    );
+    siteLogo.value = dataList.value.find(
+      (option) => option.code === 'site_logo'
+    );
+    siteFavicon.value = dataList.value.find(
+      (option) => option.code === 'site_favicon'
+    );
+    form.value.site_title = siteTitle.value?.value;
+    form.value.site_copyright = siteCopyright.value?.value;
+    logoFile.value.url = siteLogo.value?.value;
+    faviconFile.value.url = siteFavicon.value?.value;
+  };
+  getConfig();
+
+  /**
+   * 保存
+   */
+  const handleSave = async () => {
+    isEdit.value = false;
+  };
+
+  /**
+   * 上传 Logo
+   *
+   * @param options /
+   */
+  const handleUploadLogo = (options: RequestOption) => {
+    console.log(options);
+    const controller = new AbortController();
+    return {
+      abort() {
+        controller.abort();
+      },
+    };
+  };
+
+  /**
+   * 上传 Favicon
+   *
+   * @param options /
+   */
+  const handleUploadFavicon = (options: RequestOption) => {
+    console.log(options);
+    const controller = new AbortController();
+    return {
+      abort() {
+        controller.abort();
+      },
+    };
+  };
+
+  /**
+   * 选择 Logo
+   *
+   * @param _ /
+   * @param currentFile
+   */
+  const handleChangeLogo = (_: any, currentFile: any) => {
+    logoFile.value = {
+      ...currentFile,
+      // url: URL.createObjectURL(currentFile.file),
+    };
+  };
+
+  /**
+   * 选择 Favicon
+   *
+   * @param _ /
+   * @param currentFile
+   */
+  const handleChangeFavicon = (_: any, currentFile: any) => {
+    faviconFile.value = {
+      ...currentFile,
+      // url: URL.createObjectURL(currentFile.file),
+    };
+  };
+
+  /**
+   * 恢复默认值
+   */
+  const handleRestore = () => {
+    console.log('恢复默认值');
+  };
+
+  /**
+   * 点击恢复默认值
+   */
+  const toRestore = () => {
+    proxy.$modal.warning({
+      title: '警告',
+      titleAlign: 'start',
+      content: '确定要恢复基础配置为默认值吗？',
+      hideCancel: false,
+      onOk: () => {
+        handleRestore();
+      },
+    });
+  };
+
+  /**
+   * 开始编辑
+   */
+  const toEdit = () => {
+    isEdit.value = true;
+  };
+
+  /**
+   * 重置
+   */
+  const handleReset = () => {
+    reset();
+  };
+
+  /**
+   * 取消
+   */
+  const handleCancel = () => {
+    isEdit.value = false;
+    handleReset();
+  };
+</script>
+
+<style scoped lang="less">
+  .logo {
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    line-height: 48px;
+  }
+
+  .favicon {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    line-height: 16px;
+  }
+
+  .arco-form .image-item {
+    margin-left: 2px;
+    margin-bottom: 0;
+  }
+
+  .arco-form .input-item {
+    margin-left: -18px;
+  }
+
+  .list-layout .list-item {
+    padding: 20px 0;
+    border-bottom: 1px solid var(--color-fill-3);
+  }
+</style>

continew-admin-ui/src/views/system/config/index.vue

+<template>
+  <div class="app-container">
+    <Breadcrumb :items="['menu.system', 'menu.system.config']" />
+    <a-card class="general-card" :title="$t('menu.system.config')">
+      <a-tabs default-active-key="1" type="rounded">
+        <a-tab-pane key="1" title="基础配置（正在开发）">
+          <BasicSetting />
+        </a-tab-pane>
+        <a-tab-pane key="2" title="高级配置（暂未开放）" disabled></a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import BasicSetting from './components/basic-setting.vue';
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Config',
+  };
+</script>
+
+<style scoped lang="less">
+  :deep(.arco-tabs-content) {
+    padding-top: 5px;
+  }
+</style>

continew-admin-ui/src/views/system/config/locale/en-US.ts

+export default {
+  'menu.system.config': 'System config',
+};

continew-admin-ui/src/views/system/config/locale/zh-CN.ts

+export default {
+  'menu.system.config': '系统配置',
+};

continew-admin-ui/src/views/system/config/mock.ts

+import Mock from 'mockjs';
+import setupMock, { successResponseWrap } from '@/utils/setup-mock';
+
+setupMock({
+  setup() {
+    Mock.mock(new RegExp('/api/system/option'), () => {
+      return successResponseWrap([
+        {
+          name: '系统标题',
+          code: 'site_title',
+          value: 'ContiNew Admin',
+          description: '用于显示登录页面的系统标题。',
+        },
+        {
+          name: '版权信息',
+          code: 'site_copyright',
+          value:
+            'Copyright © 2022-2023 Charles7c ⋅ ContiNew Admin ⋅ 津ICP备2022005864号-2',
+          description: '用于显示登录页面的底部版权信息。',
+        },
+        {
+          name: '系统LOGO（16*16）',
+          code: 'site_favicon',
+          value: 'https://cnadmin.charles7c.top/favicon.ico',
+          description: '用于显示浏览器地址栏的系统LOGO。',
+        },
+        {
+          name: '系统LOGO（48*48）',
+          code: 'site_logo',
+          value: 'https://cnadmin.charles7c.top/logo.svg',
+          description: '用于显示登录页面的系统LOGO。',
+        },
+      ]);
+    });
+  },
+});

continew-admin-webapi/src/main/resources/db/changelog/v1.2.0/continew-admin_data.sql

@@ -9,7 +9,10 @@ VALUES
 (1061, '字典新增', 1060, 3, NULL, NULL, NULL, NULL, b'0', b'0', b'0', 'system:dict:add', 1, 1, 1, NOW(), NULL, NULL),
 (1062, '字典修改', 1060, 3, NULL, NULL, NULL, NULL, b'0', b'0', b'0', 'system:dict:update', 2, 1, 1, NOW(), NULL, NULL),
 (1063, '字典删除', 1060, 3, NULL, NULL, NULL, NULL, b'0', b'0', b'0', 'system:dict:delete', 3, 1, 1, NOW(), NULL, NULL),
-(1064, '字典导出', 1060, 3, NULL, NULL, NULL, NULL, b'0', b'0', b'0', 'system:dict:export', 4, 1, 1, NOW(), NULL, NULL);
+(1064, '字典导出', 1060, 3, NULL, NULL, NULL, NULL, b'0', b'0', b'0', 'system:dict:export', 4, 1, 1, NOW(), NULL, NULL),
+(1070, '系统配置', 1000, 2, '/system/config', 'Config', 'system/config/index', 'desktop', b'0', b'0', b'0', 'system:config:list', 7, 1, 1, NOW(), NULL, NULL),
+(1071, '修改配置', 1070, 3, NULL, NULL, NULL, NULL, b'0', b'0', b'0', 'system:config:update', 1, 1, 1, NOW(), NULL, NULL),
+(1072, '恢复默认', 1070, 3, NULL, NULL, NULL, NULL, b'0', b'0', b'0', 'system:config:delete', 2, 1, 1, NOW(), NULL, NULL);
 
 -- 初始化默认字典
 INSERT IGNORE INTO `sys_dict`