feat: add global config setting page

Author: fecommunity

client/pages/_app.tsx

@@ -62,13 +62,15 @@ class MyApp extends App<IGlobalContext, unknown> {
       PageProvider.getAllPublisedPages(),
     ]);
     const i18n = safeJsonParse(setting.i18n);
+    const globalSetting = safeJsonParse(setting.globalSetting)?.[ctx?.locale];
     return {
       pageProps,
       setting,
       tags,
       categories,
       pages: pages[0] || [],
       i18n,
+      globalSetting,
       locales: Object.keys(i18n),
     };
   };
@@ -133,7 +135,7 @@ class MyApp extends App<IGlobalContext, unknown> {
   }
 
   render() {
-    const { Component, pageProps, i18n, locales, router, ...contextValue } = this.props;
+    const { Component, pageProps, i18n, globalSetting, locales, router, ...contextValue } = this.props;
     const locale = this.state.locale || router.locale;
     const { needLayoutFooter = true, hasBg = false } = pageProps;
     const message = i18n[locale] || {};
@@ -148,6 +150,7 @@ class MyApp extends App<IGlobalContext, unknown> {
           i18n,
           locale,
           locales,
+          globalSetting,
           theme: this.state.theme,
           collapsed: this.state.collapsed,
           changeLocale: this.changeLocale,

client/pages/admin/setting/index.tsx

@@ -8,6 +8,7 @@ import { OSSSetting } from '@/components/Setting/OSSSetting';
 import { SEOSetting } from '@/components/Setting/SEOSetting';
 import { SMTPSetting } from '@/components/Setting/SMTPSetting';
 import { SystemSetting } from '@/components/Setting/SystemSetting';
+import { GlobalSetting } from '@/components/Setting/GlobalSetting';
 import { useSetting } from '@/hooks/useSetting';
 import { AdminLayout } from '@/layout/AdminLayout';
 
@@ -44,6 +45,10 @@ const Setting: NextPage<IProps> = ({ type: defaultType }) => {
       label: 'OSS设置',
       content: <OSSSetting setting={setting} />,
     },
+    {
+      label: '全局设置',
+      content: <GlobalSetting setting={setting} />,
+    },
     {
       label: 'SMTP服务',
       content: <SMTPSetting setting={setting} />,

client/src/components/Setting/GlobalSetting/index.tsx

@@ -0,0 +1,118 @@
+import { WarningOutlined } from '@ant-design/icons';
+import { Alert, Button, Input, message, Modal, Tabs } from 'antd';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { JsonEditor } from '@/components/JsonEditor';
+import { SettingProvider } from '@/providers/setting';
+import { safeJsonParse } from '@/utils/json';
+
+export const GlobalSetting = ({ setting }) => {
+  const [v, forceUpdate] = useState(0);
+  const [globalSetting, setGlobalSetting] = useState({});
+  const locales = useMemo(
+    () => (globalSetting && typeof globalSetting === 'object' ? Object.keys(globalSetting) : []),
+    [v, globalSetting]
+  );
+
+  useEffect(() => {
+    try {
+      if (setting.globalSetting) {
+        const json = JSON.parse(setting.globalSetting);
+        Object.keys(json).forEach((key) => {
+          json[key] = safeJsonParse(json[key]);
+        });
+        setGlobalSetting(json);
+      }
+    } catch (e) {
+      setGlobalSetting({});
+    }
+  }, [setting.globalSetting]);
+
+  const onEdit = useCallback((key, action) => {
+    const add = () => {
+      let locale = '';
+      const onChange = function (e) {
+        locale = e.target.value;
+      };
+      Modal.confirm({
+        title: '请输入语言名称（英文）',
+        icon: <Input onChange={onChange} />,
+        onOk() {
+          setGlobalSetting((json) => {
+            json[locale] = {};
+            return json;
+          });
+          forceUpdate((v) => v + 1);
+        },
+        okText: '确认',
+        cancelText: '取消',
+        transitionName: '',
+        maskTransitionName: '',
+      });
+    };
+    const remove = () => {
+      Modal.confirm({
+        title: '确认删除',
+        icon: <WarningOutlined />,
+        onOk() {
+          setGlobalSetting((json) => {
+            delete json[key];
+            return json;
+          });
+          forceUpdate((v) => v + 1);
+        },
+        okText: '确认',
+        cancelText: '取消',
+        transitionName: '',
+        maskTransitionName: '',
+      });
+    };
+
+    if (action === 'add') {
+      add();
+    } else {
+      remove();
+    }
+  }, []);
+
+  const onChange = useCallback((locale) => {
+    return (value) => {
+      if (!value) return;
+      setGlobalSetting((json) => {
+        json[locale] = value;
+        return json;
+      });
+    };
+  }, []);
+
+  const save = useCallback(() => {
+    const data = {
+      globalSetting: JSON.stringify(globalSetting),
+    };
+    SettingProvider.updateSetting(data).then(() => {
+      message.success('保存成功');
+    });
+  }, [globalSetting]);
+
+  return (
+    <div>
+      <Alert
+        message="说明"
+        description={'此处可配置系统的全局JSON配置，包含中英文的国际化配置。'}
+        type="info"
+        showIcon={true}
+        style={{ marginBottom: '1rem' }}
+      />
+      <Tabs type="editable-card" onEdit={onEdit}>
+        {locales.map((locale) => (
+          <Tabs.TabPane tab={locale} key={locale}>
+            <JsonEditor key={locale} value={globalSetting[locale]} onChange={onChange(locale)} />
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+      <Button type="primary" onClick={save}>
+        保存
+      </Button>
+    </div>
+  );
+};

client/src/context/global.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 export interface IGlobalContext {
   setting?: ISetting;
   i18n?: Record<string, unknown>;
+  globalSetting?: IGlobalConfig;
   locale?: string;
   locales?: Array<string>;
   pages?: IPage[];

client/src/layout/AdminLayout/menus.tsx

@@ -131,6 +131,10 @@ export const menus: {
         title: '国际化设置',
         path: '/admin/setting?type=国际化设置',
       },
+      {
+        title: '全局设置',
+        path: '/admin/setting?type=全局设置',
+      },
       {
         title: '数据统计',
         path: '/admin/setting?type=数据统计',

client/types/index.d.ts

@@ -21,6 +21,23 @@ interface IFile {
   createAt: string;
 }
 
+interface IGlobalConfig {
+  navConfig: NavSetting;
+}
+
+interface CategoryItem {
+  label: string;
+  key: string;
+  url?: string;
+}
+
+interface NavSetting {
+  categories: CategoryItem[];
+  subCategories: {
+    [k: string]: CategoryItem[]
+  }
+}
+
 interface IArticle {
   id: string;
   title: string;
@@ -170,4 +187,5 @@ interface ISetting {
   smtpUser?: string; //  SMTP 用户
   smtpPass?: string; //  SMTP 授权码
   smtpFromUser?: string; // SMTP 发件人
+  globalSetting?: string; // 全局配置
 }

server/src/modules/setting/setting.constant.ts

@@ -17,4 +17,5 @@ export const UNPROTECTED_KEYS = [
   'seoDesc',
   'baiduAnalyticsId',
   'googleAnalyticsId',
+  'globalSetting'
 ];

server/src/modules/setting/setting.entity.ts

@@ -11,6 +11,10 @@ export class Setting {
   @Column({ type: 'text', default: null })
   i18n: string; // 国际化
 
+  @ApiProperty()
+  @Column({ type: 'text', default: null })
+  globalSetting: string; // 导航设置
+
   @ApiProperty()
   @Column({ type: 'text', default: null })
   systemUrl: string; // 系统地址