feat(projects): add full screen watermarke

soybeanjs · Aug 30, 2024 · 103b643 · 103b643
1 parent e41a925
commit 103b643
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 36 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,7 @@ import { useUpdateEffect } from 'ahooks';
 import { localStg } from '@/utils/storage';
 import { getLocale } from '@/store/slice/app';
 import { getAntdTheme, setupThemeVarsToHtml, toggleCssDarkMode } from '@/store/slice/theme/shared.ts';
-import { getDarkMode, themeColors } from '@/store/slice/theme/index.ts';
+import { getDarkMode, themeColors, getThemeSettings } from '@/store/slice/theme';
 import MenuProvider from '@/components/stateful/MenuProvider.tsx';
 import { router } from '@/router';
 import { antdLocales } from './locales/antd';
@@ -15,7 +15,7 @@ const watermarkProps: WatermarkProps = {
     fontSize: 16,
   },
   width: 240,
-  height:128,
+  height: 128,
   offset: [12, 60],
   rotate: -15,
   zIndex: 9999
@@ -26,6 +26,7 @@ const App = () => {
   const colors = useAppSelector(themeColors);
   const darkMode = useAppSelector(getDarkMode);
   const antdTheme = getAntdTheme(colors, darkMode);
+  const themeSettings = useAppSelector(getThemeSettings);
 
   useEffect(() => {
     setupThemeVarsToHtml(colors);
@@ -45,7 +46,7 @@ const App = () => {
       button={{ classNames: { icon: 'align-1px  text-icon' } }}
     >
       <AppProvider>
-        <AWatermark  className='h-full'  {...watermarkProps} >
+        <AWatermark content={themeSettings.watermark.visible ? themeSettings.watermark?.text || 'Soybean' : ''} className='h-full'  {...watermarkProps} >
           <MenuProvider>
             {router.CustomRouterProvider(<GlobalLoading />)}
           </MenuProvider>

diff --git a/src/layouts/modules/theme-drawer/modules/PageFun.tsx b/src/layouts/modules/theme-drawer/modules/PageFun.tsx
@@ -8,6 +8,7 @@ import {
   setFooter,
   setHeader,
   setLayoutScrollMode,
+  setWatermark,
   setPage,
   setSider,
   setTab
@@ -285,6 +286,29 @@ const PageFun = memo(() => {
             onChange={value => dispatch(setFooter({ right: value }))}
           />
         </SettingTransitionItem>
+
+        <SettingItem
+          label={t('theme.watermark.visible')}
+        >
+          <Switch
+            defaultValue={themeSetting.watermark?.visible}
+            onChange={value => dispatch(setWatermark({ visible: value }))}
+          />
+        </SettingItem>
+
+        <SettingTransitionItem
+          show={Boolean(themeSetting.watermark.visible)}
+          label={t('theme.watermark.text')}
+          transitionKey="8-1"
+        >
+          <AInput
+            allowClear
+            className="w-120px"
+            defaultValue={themeSetting.watermark.text}
+            onChange={value => dispatch(setWatermark({ text: value.target.value || '' }))}
+          />
+        </SettingTransitionItem>
+
       </div>
     </>
   );

diff --git a/src/layouts/modules/theme-drawer/modules/ThemeColor.tsx b/src/layouts/modules/theme-drawer/modules/ThemeColor.tsx
@@ -98,17 +98,16 @@ const ThemeColor = memo(() => {
           }
           placement="topLeft"
         >
-          <>
-            <SettingItem
-              key="recommend-color"
-              label={t('theme.recommendColor')}
-            >
-              <Switch
-                defaultChecked={themeSettings.recommendColor}
-                onChange={handleRecommendColorChange}
-              />
-            </SettingItem>
-          </>
+
+          <SettingItem
+            key="recommend-color"
+            label={t('theme.recommendColor')}
+          >
+            <Switch
+              defaultChecked={themeSettings.recommendColor}
+              onChange={handleRecommendColorChange}
+            />
+          </SettingItem>
         </Tooltip>
         {Object.entries(colors).map(([key, value]) => (
           <SettingItem

diff --git a/src/locales/langs/en-us/theme.ts b/src/locales/langs/en-us/theme.ts
@@ -82,7 +82,11 @@ const theme: App.I18n.Schema['translation']['theme'] = {
     copySuccessMsg: 'Copy Success, Please replace the variable "themeSettings" in "src/theme/settings.ts"',
     resetConfig: 'Reset Config',
     resetSuccessMsg: 'Reset Success'
-  }
+  },
+  watermark: {
+    visible: 'Watermark Full Screen Visible',
+    text: 'Watermark Text'
+  },
 };
 
 export default theme;
diff --git a/src/locales/langs/zh-cn/theme.ts b/src/locales/langs/zh-cn/theme.ts
@@ -77,6 +77,10 @@ const theme: App.I18n.Schema['translation']['theme'] = {
   },
   themeDrawerTitle: '主题配置',
   pageFunTitle: '页面功能',
+  watermark: {
+    visible: '显示全屏水印',
+    text: '水印文本'
+  },
   configOperation: {
     copyConfig: '复制配置',
     copySuccessMsg: '复制成功，请替换 src/theme/settings.ts 中的变量 themeSettings',

diff --git a/src/plugins/loading.ts b/src/plugins/loading.ts
@@ -3,7 +3,6 @@ import { getRgb } from '@sa/color';
 import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import systemLogo from '@/assets/svg-icon/logo.svg?raw';
-import { setupThemeVarsToHtml } from '@/store/slice/theme/shared.ts';
 
 export function setupLoading() {
   const themeColor = localStg.get('themeColor') || '#646cff';

diff --git a/src/store/slice/theme/index.ts b/src/store/slice/theme/index.ts
@@ -96,15 +96,6 @@ export const themeSlice = createSlice({
       state.settings.fixedHeaderAndTab = payload;
     },
     setHeader(state, { payload }: PayloadAction<DeepPartial<App.Theme.ThemeSetting['header']>>) {
-      // const key = getKeys(payload);
-      // console.log(key);
-      // state.settings.header[key[0]][key[1]] = payload[key[0]][key[1]];
-      // console.log(state);
-
-      // console.log(Object.assign(state.settings.header, payload));
-      // console.log(state.settings.header);
-      // console.log(payload);
-
       Object.assign(state.settings.header, payload);
     },
     setTab(state, { payload }: PayloadAction<Partial<App.Theme.ThemeSetting['tab']>>) {
@@ -116,6 +107,9 @@ export const themeSlice = createSlice({
     setFooter(state, { payload }: PayloadAction<Partial<App.Theme.ThemeSetting['footer']>>) {
       Object.assign(state.settings.footer, payload);
     },
+    setWatermark(state, { payload }: PayloadAction<Partial<App.Theme.ThemeSetting['watermark']>>){
+      Object.assign(state.settings.watermark, payload);
+    },
     setIsOnlyExpandCurrentParentMenu(state, { payload }: PayloadAction<boolean>) {
       state.settings.isOnlyExpandCurrentParentMenu = payload;
     }
@@ -140,6 +134,7 @@ export const {
   setFixedHeaderAndTab,
   setHeader,
   setTab,
+  setWatermark,
   setSider,
   setFooter,
   setIsOnlyExpandCurrentParentMenu

diff --git a/src/styles/css/global.css b/src/styles/css/global.css
@@ -31,5 +31,3 @@ html.grayscale {
 .dark::view-transition-new(root) {
   z-index: 9999;
 }
-
-
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
@@ -99,13 +99,13 @@ declare namespace App {
         /** Whether float the footer to the right when the layout is 'horizontal-mix' */
         right: boolean;
       };
-         /** Watermark */
-         watermark?: {
-          /** Whether to show the watermark */
-          visible: boolean;
-          /** Watermark text */
-          text: string;
-        };
+      /** Watermark */
+      watermark: {
+        /** Whether to show the watermark */
+        visible: boolean;
+        /** Watermark text */
+        text: string;
+      };
     }
 
     interface OtherColor {
@@ -380,6 +380,10 @@ declare namespace App {
             resetConfig: string;
             resetSuccessMsg: string;
           };
+          watermark: {
+            visible: string;
+            text: string;
+          };
         };
         route: Record<I18nRouteKey, string>;
         page: {
@@ -657,8 +661,8 @@ declare namespace App {
 
     type GetI18nKey<T extends Record<string, unknown>, K extends keyof T = keyof T> = K extends string
       ? T[K] extends Record<string, unknown>
-        ? `${K}.${GetI18nKey<T[K]>}`
-        : K
+      ? `${K}.${GetI18nKey<T[K]>}`
+      : K
       : never;
 
     type I18nKey = GetI18nKey<Schema['translation']>;

diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
@@ -9,6 +9,7 @@ declare global {
   const ACard: typeof import('antd')['Card']
   const ACol: typeof import('antd')['Col']
   const AConfigProvider: typeof import('antd')['ConfigProvider']
+  const AInput: typeof import('antd')['Input']
   const ARow: typeof import('antd')['Row']
   const ASpace: typeof import('antd')['Space']
   const AStatistic: typeof import('antd')['Statistic']
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,5 +31,3 @@ html.grayscale {
		.dark::view-transition-new(root) {
		z-index: 9999;
		}