@skyroc/scripts 2.5.0

package/templates/admin-shell/layouts/modules/theme-drawer/modules/appearance/ThemeColor.tsx

@@ -0,0 +1,58 @@
+import { useSettingsTheme } from '@shell/theme';
+import { Button, Switch, Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import SettingItem from '../../components/SettingItem';
+
+import CustomPicker from './CustomPicker';
+
+const ThemeColor = () => {
+  const { t } = useTranslation();
+
+  const { isInfoFollowPrimary, recommendColor, setSettings, themeColor, themeColors } = useSettingsTheme();
+
+  function handleRecommendColorChange(value: boolean) {
+    setSettings({ recommendColor: value });
+  }
+
+  return (
+    <div className="flex-col-stretch gap-12px">
+      <Tooltip
+        placement="topLeft"
+        title={
+          <p>
+            <span className="pr-12px">{t('theme.appearance.recommendColorDesc')}</span>
+            <br />
+            <Button
+              className="text-gray"
+              href="https://uicolors.app/create"
+              rel="noopener noreferrer"
+              target="_blank"
+              type="link"
+            >
+              https://uicolors.app/create
+            </Button>
+          </p>
+        }
+      >
+        <div>
+          <SettingItem key="recommend-color" label={t('theme.appearance.recommendColor')}>
+            <Switch checked={recommendColor} onChange={handleRecommendColorChange} />
+          </SettingItem>
+        </div>
+      </Tooltip>
+      {Object.entries(themeColors).map(([key, value], index) => (
+        <CustomPicker
+          index={index}
+          isInfoFollowPrimary={isInfoFollowPrimary}
+          key={key}
+          label={key}
+          theme={themeColor}
+          value={value as string}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ThemeColor;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/appearance/ThemeSchema.tsx

@@ -0,0 +1,42 @@
+// oxlint-disable import/no-unassigned-import
+import { ThemeSchemaSegmented, useSettingsTheme } from '@shell/theme';
+import { Switch as ASwitch } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import AnimatedCollapse from '../../components/AnimatedCollapse';
+import SettingItem from '../../components/SettingItem';
+
+const DarkMode = () => {
+  const { t } = useTranslation();
+
+  const { colourWeakness, darkMode, grayscale, setColourWeakness, setGrayscale, setSettings, sider } =
+    useSettingsTheme();
+
+  const handleSiderInvertedChange = (value: boolean) => {
+    setSettings({ sider: { ...sider, inverted: value } });
+  };
+
+  return (
+    <div className="flex-col-stretch gap-16px">
+      <div className="i-flex-center">
+        <ThemeSchemaSegmented />
+      </div>
+
+      <AnimatedCollapse visible={!darkMode}>
+        <SettingItem label={t('theme.layout.sider.inverted')}>
+          <ASwitch checked={sider.inverted} onChange={handleSiderInvertedChange} />
+        </SettingItem>
+      </AnimatedCollapse>
+
+      <SettingItem label={t('theme.appearance.grayscale')}>
+        <ASwitch checked={grayscale} onChange={setGrayscale} />
+      </SettingItem>
+
+      <SettingItem label={t('theme.appearance.colourWeakness')}>
+        <ASwitch checked={colourWeakness} onChange={setColourWeakness} />
+      </SettingItem>
+    </div>
+  );
+};
+
+export default DarkMode;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/appearance/ThemeToken.tsx

@@ -0,0 +1,44 @@
+import { useSettingsTheme } from '@shell/theme';
+import { InputNumber as AInputNumber } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import SettingItem from '../../components/SettingItem';
+
+const ThemeToken = () => {
+  const { t } = useTranslation();
+
+  const { setSettings, themeRadius, themeTextSize } = useSettingsTheme();
+
+  function handleThemeRadiusChange(value: number | null) {
+    if (value === null) return;
+
+    setSettings({ themeRadius: value });
+  }
+
+  function handleThemeTextSizeChange(value: number | null) {
+    if (value === null) return;
+
+    setSettings({ themeTextSize: value });
+  }
+
+  return (
+    <div className="flex-col-stretch gap-12px">
+      <SettingItem label={t('theme.appearance.themeBase.textSize')}>
+        <AInputNumber className="w-120px" min={0} step={1} value={themeTextSize} onChange={handleThemeTextSizeChange} />
+      </SettingItem>
+
+      <SettingItem label={t('theme.appearance.themeBase.radius')}>
+        <AInputNumber
+          className="w-120px"
+          max={16}
+          min={0}
+          step={1}
+          value={themeRadius}
+          onChange={handleThemeRadiusChange}
+        />
+      </SettingItem>
+    </div>
+  );
+};
+
+export default ThemeToken;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/appearance/index.tsx

@@ -0,0 +1,23 @@
+import { Divider as ADivider } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import ThemeColor from './ThemeColor';
+import ThemeSchema from './ThemeSchema';
+import ThemeToken from './ThemeToken';
+
+const Appearance = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex-col-stretch gap-16px">
+      <ADivider>{t('theme.appearance.themeSchema.title')}</ADivider>
+      <ThemeSchema />
+      <ADivider>{t('theme.appearance.themeBase.title')}</ADivider>
+      <ThemeToken />
+      <ADivider>{t('theme.appearance.themeColor.title')}</ADivider>
+      <ThemeColor />
+    </div>
+  );
+};
+
+export default Appearance;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/general/GlobalSettings.tsx

@@ -0,0 +1,57 @@
+import { useSettingsTheme } from '@shell/theme';
+import { Switch as ASwitch } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import SettingItem from '../../components/SettingItem';
+
+const GlobalSettings = () => {
+  const { t } = useTranslation();
+
+  const { header, setSettings } = useSettingsTheme();
+
+  const updateMultilingual = (patch: Partial<typeof header.multilingual>) => {
+    setSettings({
+      header: {
+        ...header,
+        multilingual: {
+          ...header.multilingual,
+          ...patch
+        }
+      }
+    });
+  };
+
+  const updateGlobalSearch = (patch: Partial<typeof header.globalSearch>) => {
+    setSettings({
+      header: {
+        ...header,
+        globalSearch: {
+          ...header.globalSearch,
+          ...patch
+        }
+      }
+    });
+  };
+
+  const handleMultilingualVisibleChange = (visible: boolean) => {
+    updateMultilingual({ visible });
+  };
+
+  const handleGlobalSearchVisibleChange = (visible: boolean) => {
+    updateGlobalSearch({ visible });
+  };
+
+  return (
+    <>
+      <SettingItem label={t('theme.general.multilingual.visible')}>
+        <ASwitch checked={header.multilingual.visible} onChange={handleMultilingualVisibleChange} />
+      </SettingItem>
+
+      <SettingItem label={t('theme.general.globalSearch.visible')}>
+        <ASwitch checked={header.globalSearch.visible} onChange={handleGlobalSearchVisibleChange} />
+      </SettingItem>
+    </>
+  );
+};
+
+export default GlobalSettings;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/general/ThemeGeneral.tsx

@@ -0,0 +1,20 @@
+import { Divider as ADivider } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import GlobalSettings from './GlobalSettings';
+import WatermarkSettings from './WatermarkSettings';
+
+const ThemeGeneral = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex-col-stretch gap-16px">
+      <ADivider>{t('theme.general.title')}</ADivider>
+      <GlobalSettings />
+      <ADivider>{t('theme.general.watermark.title')}</ADivider>
+      <WatermarkSettings />
+    </div>
+  );
+};
+
+export default ThemeGeneral;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/general/WatermarkSettings.tsx

@@ -0,0 +1,103 @@
+import { useSettingsTheme } from '@shell/theme';
+import { Input as AInput, Select as ASelect, Switch as ASwitch } from 'antd';
+import { AnimatePresence } from 'motion/react';
+import type { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { watermarkTimeFormatOptions } from '../../../../options';
+
+import AnimatedItem from '../../components/AnimatedItem';
+import SettingItem from '../../components/SettingItem';
+
+const WatermarkSettings = () => {
+  const { t } = useTranslation();
+
+  const { setSettings, setWatermarkEnableTime, setWatermarkEnableUserName, watermark } = useSettingsTheme();
+
+  const updateWatermark = (patch: Partial<typeof watermark>) => {
+    setSettings({
+      watermark: {
+        ...watermark,
+        ...patch
+      }
+    });
+  };
+
+  const handleVisibleChange = (visible: boolean) => {
+    updateWatermark({ visible });
+  };
+
+  const handleEnableUserNameChange = (enable: boolean) => {
+    setWatermarkEnableUserName(enable);
+  };
+
+  const handleEnableTimeChange = (enable: boolean) => {
+    setWatermarkEnableTime(enable);
+  };
+
+  const handleTimeFormatChange = (timeFormat: string) => {
+    updateWatermark({ timeFormat });
+  };
+
+  const handleEnableCustomTextChange = (enable: boolean) => {
+    updateWatermark({ enableCustomText: enable });
+  };
+
+  const handleTextChange = (e: ChangeEvent<HTMLInputElement>) => {
+    updateWatermark({ text: e.target.value });
+  };
+
+  return (
+    <div className="flex-col-stretch gap-12px">
+      <SettingItem label={t('theme.general.watermark.visible')}>
+        <ASwitch checked={watermark.visible} onChange={handleVisibleChange} />
+      </SettingItem>
+
+      <AnimatePresence initial={false} mode="popLayout">
+        <AnimatedItem className="flex-col-stretch gap-12px" key="enableCustomText" visible={watermark.visible}>
+          <SettingItem label={t('theme.general.watermark.enableCustomText')}>
+            <ASwitch checked={watermark.enableCustomText} onChange={handleEnableCustomTextChange} />
+          </SettingItem>
+        </AnimatedItem>
+
+        <AnimatedItem key="text" visible={watermark.visible && watermark.enableCustomText}>
+          <SettingItem label={t('theme.general.watermark.text')}>
+            <AInput
+              className="w-120px"
+              placeholder="SoybeanAdmin"
+              size="small"
+              value={watermark.text}
+              onChange={handleTextChange}
+            />
+          </SettingItem>
+        </AnimatedItem>
+
+        <AnimatedItem className="flex-col-stretch gap-12px" key="enableUserName" visible={watermark.visible}>
+          <SettingItem label={t('theme.general.watermark.enableUserName')}>
+            <ASwitch checked={watermark.enableUserName} onChange={handleEnableUserNameChange} />
+          </SettingItem>
+        </AnimatedItem>
+
+        <AnimatedItem key="enableTime" visible={watermark.visible}>
+          <SettingItem label={t('theme.general.watermark.enableTime')}>
+            <ASwitch checked={watermark.enableTime} onChange={handleEnableTimeChange} />
+          </SettingItem>
+        </AnimatedItem>
+
+        <AnimatedItem key="timeFormat" visible={watermark.visible && watermark.enableTime}>
+          <SettingItem label={t('theme.general.watermark.timeFormat')}>
+            <ASelect
+              className="w-210px"
+              options={watermarkTimeFormatOptions}
+              size="small"
+              value={watermark.timeFormat}
+              onChange={handleTimeFormatChange}
+            />
+          </SettingItem>
+        </AnimatedItem>
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default WatermarkSettings;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/layout/ContentSettings.tsx

@@ -0,0 +1,100 @@
+import { useSettingsTheme } from '@shell/theme';
+import { SvgIcon } from '@shell/ui/compose';
+import { Select as ASelect, Switch as ASwitch, Tooltip as ATooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { themePageAnimationModeOptions, themeScrollModeOptions, translateOptions } from '../../../../options';
+
+import AnimatedCollapse from '../../components/AnimatedCollapse';
+import SettingItem from '../../components/SettingItem';
+
+const ContentSettings = () => {
+  const { t } = useTranslation();
+
+  const { fixedHeaderAndTab, layout, page, setSettings } = useSettingsTheme();
+
+  const isWrapperScrollMode = layout.scrollMode === 'wrapper';
+
+  const scrollModeOptions = translateOptions(themeScrollModeOptions);
+
+  const pageAnimationModeOptions = translateOptions(themePageAnimationModeOptions);
+
+  const updateLayout = (patch: Partial<typeof layout>) => {
+    setSettings({
+      layout: {
+        ...layout,
+        ...patch
+      }
+    });
+  };
+
+  const updatePage = (patch: Partial<typeof page>) => {
+    setSettings({
+      page: {
+        ...page,
+        ...patch
+      }
+    });
+  };
+
+  const handleScrollModeChange = (scrollMode: UnionKey.ThemeScrollMode) => {
+    updateLayout({ scrollMode });
+  };
+
+  const handlePageAnimateChange = (animate: boolean) => {
+    updatePage({ animate });
+  };
+
+  const handlePageAnimateModeChange = (animateMode: UnionKey.ThemePageAnimateMode) => {
+    updatePage({ animateMode });
+  };
+
+  const handleFixedHeaderAndTabChange = (value: boolean) => {
+    setSettings({ fixedHeaderAndTab: value });
+  };
+
+  return (
+    <div className="flex-col-stretch gap-12px">
+      <SettingItem
+        label={t('theme.layout.content.scrollMode.title')}
+        suffix={
+          <ATooltip title={t('theme.layout.content.scrollMode.tip')}>
+            <SvgIcon className="text-icon-info" icon="mdi:information-outline" />
+          </ATooltip>
+        }
+      >
+        <ASelect
+          className="w-120px"
+          options={scrollModeOptions}
+          size="small"
+          value={layout.scrollMode}
+          onChange={handleScrollModeChange}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('theme.layout.content.page.animate')}>
+        <ASwitch checked={page.animate} onChange={handlePageAnimateChange} />
+      </SettingItem>
+
+      <AnimatedCollapse visible={page.animate}>
+        <SettingItem label={t('theme.layout.content.page.mode.title')}>
+          <ASelect
+            className="w-120px"
+            options={pageAnimationModeOptions}
+            size="small"
+            value={page.animateMode}
+            onChange={handlePageAnimateModeChange}
+          />
+        </SettingItem>
+      </AnimatedCollapse>
+
+      <AnimatedCollapse visible={isWrapperScrollMode}>
+        <SettingItem label={t('theme.layout.content.fixedHeaderAndTab')}>
+          <ASwitch checked={fixedHeaderAndTab} onChange={handleFixedHeaderAndTabChange} />
+        </SettingItem>
+      </AnimatedCollapse>
+    </div>
+  );
+};
+
+export default ContentSettings;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/layout/FooterSettings.tsx

@@ -0,0 +1,71 @@
+import { useSettingsTheme } from '@shell/theme';
+import { InputNumber as AInputNumber, Switch as ASwitch } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { TOP_HYBRID_LAYOUT_MODES } from '../../../../constant';
+import AnimatedCollapse from '../../components/AnimatedCollapse';
+import SettingItem from '../../components/SettingItem';
+
+const FooterSettings = () => {
+  const { t } = useTranslation();
+
+  const { footer, layout, setSettings } = useSettingsTheme();
+
+  const layoutMode = layout.mode;
+  const isWrapperScrollMode = layout.scrollMode === 'wrapper';
+  const isMixHorizontalMode = TOP_HYBRID_LAYOUT_MODES.includes(layoutMode);
+
+  const updateFooter = (patch: Partial<typeof footer>) => {
+    setSettings({
+      footer: {
+        ...footer,
+        ...patch
+      }
+    });
+  };
+
+  const handleVisibleChange = (visible: boolean) => {
+    updateFooter({ visible });
+  };
+
+  const handleFixedChange = (fixed: boolean) => {
+    updateFooter({ fixed });
+  };
+
+  const handleHeightChange = (height: number | null) => {
+    if (height === null) return;
+    updateFooter({ height });
+  };
+
+  const handleRightChange = (right: boolean) => {
+    updateFooter({ right });
+  };
+
+  return (
+    <div className="flex-col-stretch gap-12px">
+      <SettingItem label={t('theme.layout.footer.visible')}>
+        <ASwitch checked={footer.visible} onChange={handleVisibleChange} />
+      </SettingItem>
+
+      <AnimatedCollapse visible={footer.visible && isWrapperScrollMode}>
+        <SettingItem label={t('theme.layout.footer.fixed')}>
+          <ASwitch checked={footer.fixed} onChange={handleFixedChange} />
+        </SettingItem>
+      </AnimatedCollapse>
+
+      <AnimatedCollapse visible={footer.visible}>
+        <SettingItem label={t('theme.layout.footer.height')}>
+          <AInputNumber className="w-120px" min={0} step={1} value={footer.height} onChange={handleHeightChange} />
+        </SettingItem>
+      </AnimatedCollapse>
+
+      <AnimatedCollapse visible={footer.visible && isMixHorizontalMode}>
+        <SettingItem label={t('theme.layout.footer.right')}>
+          <ASwitch checked={footer.right} onChange={handleRightChange} />
+        </SettingItem>
+      </AnimatedCollapse>
+    </div>
+  );
+};
+
+export default FooterSettings;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/layout/HeaderSettings.tsx

@@ -0,0 +1,63 @@
+import { useSettingsTheme } from '@shell/theme';
+import { InputNumber as AInputNumber, Switch as ASwitch } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import AnimatedCollapse from '../../components/AnimatedCollapse';
+import SettingItem from '../../components/SettingItem';
+
+const HeaderSettings = () => {
+  const { t } = useTranslation();
+
+  const { header, setSettings } = useSettingsTheme();
+
+  const updateHeader = (patch: Partial<typeof header>) => {
+    setSettings({
+      header: {
+        ...header,
+        ...patch
+      }
+    });
+  };
+
+  const updateBreadcrumb = (patch: Partial<typeof header.breadcrumb>) => {
+    updateHeader({
+      breadcrumb: {
+        ...header.breadcrumb,
+        ...patch
+      }
+    });
+  };
+
+  const handleHeightChange = (height: number | null) => {
+    if (height === null) return;
+    updateHeader({ height });
+  };
+
+  const handleBreadcrumbVisibleChange = (visible: boolean) => {
+    updateBreadcrumb({ visible });
+  };
+
+  const handleBreadcrumbShowIconChange = (showIcon: boolean) => {
+    updateBreadcrumb({ showIcon });
+  };
+
+  return (
+    <div className="flex-col-stretch gap-12px">
+      <SettingItem label={t('theme.layout.header.height')}>
+        <AInputNumber className="w-120px" min={0} step={1} value={header.height} onChange={handleHeightChange} />
+      </SettingItem>
+
+      <SettingItem label={t('theme.layout.header.breadcrumb.visible')}>
+        <ASwitch checked={header.breadcrumb.visible} onChange={handleBreadcrumbVisibleChange} />
+      </SettingItem>
+
+      <AnimatedCollapse visible={header.breadcrumb.visible}>
+        <SettingItem label={t('theme.layout.header.breadcrumb.showIcon')}>
+          <ASwitch checked={header.breadcrumb.showIcon} onChange={handleBreadcrumbShowIconChange} />
+        </SettingItem>
+      </AnimatedCollapse>
+    </div>
+  );
+};
+
+export default HeaderSettings;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/layout/LayoutMode.tsx

@@ -0,0 +1,73 @@
+import {
+  LAYOUT_MODE_HORIZONTAL,
+  LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST,
+  LAYOUT_MODE_VERTICAL,
+  LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_VERTICAL_MIX
+} from '../../../../constant';
+import LayoutModeCard from '../../components/LayoutModeCard';
+
+const LAYOUTS_COMPONENTS: Record<UnionKey.ThemeLayoutMode, React.ReactNode> = {
+  [LAYOUT_MODE_HORIZONTAL]: (
+    <>
+      <div className="h-16px rd-4px bg-primary" />
+      <div className="flex flex-1 gap-6px">
+        <div className="flex-1 rd-4px bg-primary-200" />
+      </div>
+    </>
+  ),
+  [LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST]: (
+    <>
+      <div className="h-16px rd-4px bg-primary" />
+      <div className="flex flex-1 gap-6px">
+        <div className="w-18px rd-4px bg-primary-300" />
+        <div className="flex-1 rd-4px bg-primary-200" />
+      </div>
+    </>
+  ),
+  [LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST]: (
+    <>
+      <div className="h-16px rd-4px bg-primary-300" />
+      <div className="flex flex-1 gap-6px">
+        <div className="w-18px rd-4px bg-primary" />
+        <div className="flex-1 rd-4px bg-primary-200" />
+      </div>
+    </>
+  ),
+  [LAYOUT_MODE_VERTICAL]: (
+    <>
+      <div className="h-full w-18px rd-4px bg-primary" />
+      <div className="flex-col flex-1 gap-6px">
+        <div className="h-16px rd-4px bg-primary-200" />
+        <div className="flex-1 rd-4px bg-primary-200" />
+      </div>
+    </>
+  ),
+  [LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST]: (
+    <>
+      <div className="h-full w-8px rd-4px bg-primary" />
+      <div className="h-full w-16px rd-4px bg-primary-300" />
+      <div className="flex-col flex-1 gap-6px">
+        <div className="h-16px rd-4px bg-primary" />
+        <div className="flex-1 rd-4px bg-primary-200" />
+      </div>
+    </>
+  ),
+  [LAYOUT_MODE_VERTICAL_MIX]: (
+    <>
+      <div className="h-full w-8px rd-4px bg-primary" />
+      <div className="h-full w-16px rd-4px bg-primary-300" />
+      <div className="flex-col flex-1 gap-6px">
+        <div className="h-16px rd-4px bg-primary-200" />
+        <div className="flex-1 rd-4px bg-primary-200" />
+      </div>
+    </>
+  )
+};
+
+const LayoutMode = () => {
+  return <LayoutModeCard {...LAYOUTS_COMPONENTS} />;
+};
+
+export default LayoutMode;