feat(projects): the topic configuration replication function was added

Author: Ohh-889

src/layouts/modules/global-content/content.tsx

@@ -0,0 +1,16 @@
+import KeepAlive from 'keepalive-for-react';
+
+const Content = ({ cacheKey, reloadFlag }: { cacheKey: string; reloadFlag: boolean }) => {
+  const currentOutlet = useOutlet();
+  return (
+    <KeepAlive
+      activeName={cacheKey}
+      max={10}
+      strategy={'LRU'}
+    >
+      {reloadFlag && currentOutlet}
+    </KeepAlive>
+  );
+};
+
+export default Content;

src/layouts/modules/theme-drawer/index.tsx

@@ -5,6 +5,7 @@ import DarkMode from './modules/DarkMode';
 import ThemeColor from './modules/ThemeColor';
 import LayoutMode from './modules/LayoutMode';
 import PageFun from './modules/PageFun';
+import ConfigOperation from './modules/ConfigOperation';
 
 const ThemeDrawer = memo(() => {
   const { t } = useTranslation();
@@ -29,6 +30,7 @@ const ThemeDrawer = memo(() => {
           onClick={close}
         />
       }
+      footer={<ConfigOperation />}
     >
       <SimpleScrollbar>
         <div className="px-24px pb-24px pt-8px">

src/layouts/modules/theme-drawer/modules/ConfigOperation.tsx

@@ -0,0 +1,58 @@
+import Clipboard from 'clipboard';
+import { resetTheme, settingsJson } from '@/store/slice/theme';
+
+const ConfigOperation = () => {
+  const { t } = useTranslation();
+
+  const domRef = useRef<HTMLDivElement | null>(null);
+
+  const themeSettingsJson = useAppSelector(settingsJson);
+
+  const dispatch = useAppDispatch();
+
+  function getClipboardText() {
+    const reg = /"\w+":/g;
+
+    return themeSettingsJson.replace(reg, match => match.replace(/"/g, ''));
+  }
+
+  function initClipboard() {
+    if (!domRef.current) return;
+
+    const clipboard = new Clipboard(domRef.current, {
+      text: () => getClipboardText()
+    });
+
+    clipboard.on('success', () => {
+      window.$message?.success(t('theme.configOperation.copySuccessMsg'));
+    });
+  }
+
+  function handleReset() {
+    dispatch(resetTheme());
+
+    setTimeout(() => {
+      window.$message?.success(t('theme.configOperation.resetSuccessMsg'));
+    }, 50);
+  }
+
+  useMount(() => {
+    initClipboard();
+  });
+
+  return (
+    <div className="flex justify-between">
+      <AButton
+        danger
+        onClick={handleReset}
+      >
+        {t('theme.configOperation.resetConfig')}
+      </AButton>
+      <div ref={domRef}>
+        <AButton type="primary">{t('theme.configOperation.copyConfig')}</AButton>
+      </div>
+    </div>
+  );
+};
+
+export default ConfigOperation;

src/store/slice/theme/index.ts

@@ -124,6 +124,9 @@ export const themeSlice = createSlice({
     },
     changeReverseHorizontalMix(state, { payload }: PayloadAction<boolean>) {
       state.settings.layout.reverseHorizontalMix = payload;
+    },
+    resetTheme() {
+      return initialState;
     }
   },
   selectors: {
@@ -148,6 +151,7 @@ export const {
   setFixedHeaderAndTab,
   setHeader,
   setTab,
+  resetTheme,
   setWatermark,
   setSider,
   setFooter,
@@ -166,6 +170,10 @@ export const themeColors = createSelector([getThemeSettings], ({ themeColor, oth
   return colors;
 });
 
+export const settingsJson = createSelector([getThemeSettings], settings => {
+  return JSON.stringify(settings);
+});
+
 export const toggleThemeScheme = (): AppThunk<boolean> => (dispatch, getState) => {
   const themeSettings = getThemeSettings(getState());
   const index = themeSchemes.findIndex(item => item === themeSettings.themeScheme);