@skyroc/scripts 2.5.0

package/templates/admin-shell/layouts/modules/admin-tab/components/TabContextMenu.tsx

@@ -0,0 +1,107 @@
+import { SvgIcon } from '@shell/ui/compose';
+import { Dropdown as ADropdown, type MenuProps } from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAdminTab } from '../../../state/tabs/use-admin-tab';
+
+interface TabContextMenuProps {
+  /** 右键菜单触发区域。 */
+  children: React.ReactNode;
+  /** 当前场景禁用的菜单项。 */
+  disabledKeys?: App.Global.DropdownKey[];
+  /** 当前操作的标签页。 */
+  tab: App.Global.Tab;
+}
+
+export const TabContextMenu = (props: TabContextMenuProps) => {
+  const { children, disabledKeys = [], tab } = props;
+
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(false);
+
+  const { clearLeftTabs, clearRightTabs, clearTabs, fixTab, homeTab, removeTab, unfixTab } = useAdminTab();
+
+  const { id: tabId } = tab;
+
+  const isHomeTab = tabId === homeTab?.id;
+
+  const isFixed = tab.fixedIndex !== undefined && tab.fixedIndex !== null;
+
+  const items: MenuProps['items'] = [
+    {
+      key: 'closeCurrent',
+      label: t('dropdown.closeCurrent'),
+      icon: <SvgIcon className="text-icon" icon="ant-design:close-outlined" />,
+      disabled: disabledKeys.includes('closeCurrent'),
+      onClick: () => {
+        removeTab(tabId);
+      }
+    },
+    {
+      key: 'closeOther',
+      label: t('dropdown.closeOther'),
+      icon: <SvgIcon className="text-icon" icon="ant-design:column-width-outlined" />,
+      onClick: () => {
+        clearTabs([tabId]);
+      }
+    },
+    {
+      key: 'closeLeft',
+      label: t('dropdown.closeLeft'),
+      icon: <SvgIcon className="text-icon" icon="mdi:format-horizontal-align-left" />,
+      disabled: disabledKeys.includes('closeLeft'),
+      onClick: () => {
+        clearLeftTabs(tabId);
+      }
+    },
+    {
+      key: 'closeRight',
+      label: t('dropdown.closeRight'),
+      icon: <SvgIcon className="text-icon" icon="mdi:format-horizontal-align-right" />,
+      disabled: disabledKeys.includes('closeRight'),
+      onClick: () => {
+        clearRightTabs(tabId);
+      }
+    },
+    {
+      key: 'closeAll',
+      label: t('dropdown.closeAll'),
+      icon: <SvgIcon className="text-icon" icon="ant-design:line-outlined" />,
+      onClick: () => {
+        clearTabs();
+      }
+    },
+    {
+      type: 'divider'
+    },
+    isFixed
+      ? {
+          key: 'unfixTab',
+          label: t('dropdown.unpin'),
+          icon: <SvgIcon className="text-icon" icon="mdi:pin-off-outline" />,
+          onClick: () => {
+            unfixTab(tabId);
+          }
+        }
+      : {
+          key: 'fixTab',
+          label: t('dropdown.pin'),
+          icon: <SvgIcon className="text-icon" icon="mdi:pin-outline" />,
+          onClick: () => {
+            fixTab(tabId);
+          }
+        }
+  ];
+
+  if (isHomeTab) {
+    items.splice(-2);
+  }
+
+  return (
+    <ADropdown menu={{ items }} open={open} trigger={['contextMenu']} onOpenChange={setOpen}>
+      {children}
+    </ADropdown>
+  );
+};

package/templates/admin-shell/layouts/modules/admin-tab/hooks/useTabScroll.ts

@@ -0,0 +1,86 @@
+import type BScroll from '@better-scroll/core';
+import { useEffect, useRef, useState } from 'react';
+
+export function useTabScroll(activeTabId: string) {
+  const bsWrapper = useRef<HTMLDivElement>(null);
+  const tabRef = useRef<HTMLDivElement>(null);
+  const bsScrollRef = useRef<BScroll | null>(null);
+  const [bsWrapperInfo, setBsWrapperInfo] = useState({ width: 0, left: 0 });
+
+  // Update wrapper info when window resizes
+  useEffect(() => {
+    const updateWrapperInfo = () => {
+      if (bsWrapper.current) {
+        const rect = bsWrapper.current.getBoundingClientRect();
+        setBsWrapperInfo({ width: rect.width, left: rect.left });
+      }
+    };
+
+    updateWrapperInfo();
+    window.addEventListener('resize', updateWrapperInfo);
+
+    return () => {
+      window.removeEventListener('resize', updateWrapperInfo);
+    };
+  }, []);
+
+  /** Scroll to active tab */
+  async function scrollToActiveTab() {
+    await new Promise(resolve => {
+      setTimeout(resolve, 0);
+    });
+
+    if (!tabRef.current) return;
+
+    const { children } = tabRef.current;
+
+    for (let i = 0; i < children.length; i += 1) {
+      const child = children[i];
+
+      const tabId = child.id;
+
+      if (tabId === activeTabId) {
+        const { left, width } = child.getBoundingClientRect();
+        const clientX = left + width / 2;
+
+        setTimeout(() => {
+          scrollByClientX(clientX);
+        }, 50);
+
+        break;
+      }
+    }
+  }
+
+  /**
+   * Scroll by client X
+   *
+   * @param clientX
+   */
+  function scrollByClientX(clientX: number) {
+    const currentX = clientX - bsWrapperInfo.left;
+    const deltaX = currentX - bsWrapperInfo.width / 2;
+
+    if (bsScrollRef.current) {
+      const { maxScrollX, scrollBy, x: leftX } = bsScrollRef.current;
+
+      const rightX = maxScrollX - leftX;
+      const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX);
+
+      scrollBy(update, 0, 300);
+    }
+  }
+
+  // Watch active tab id and scroll to it
+  useEffect(() => {
+    scrollToActiveTab();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeTabId]);
+
+  return {
+    bsWrapper,
+    tabRef,
+    bsScrollRef,
+    scrollToActiveTab
+  };
+}

package/templates/admin-shell/layouts/modules/shared/logo.ts

@@ -0,0 +1,42 @@
+import { createElement } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+import type { AdminLayoutLogoComponent } from '../../context';
+import AdminLogo from '../AdminLogo';
+
+interface LayoutLogoProps {
+  /** 品牌图标，由默认 Logo 组件渲染。 */
+  logo?: ReactNode;
+  /** 自定义完整 Logo 插槽。 */
+  logoComponent?: AdminLayoutLogoComponent;
+  /** 是否展示默认 Logo 标题。 */
+  showTitle?: boolean;
+  /** 当前布局位置传入的 Logo 样式。 */
+  style?: CSSProperties;
+  /** 默认 Logo 标题内容。 */
+  title?: ReactNode;
+  /** 默认 Logo 点击跳转路径。 */
+  to?: Router.RoutePath;
+}
+
+export function renderLogoComponent(logoComponent: AdminLayoutLogoComponent, style: CSSProperties): ReactNode {
+  if (typeof logoComponent === 'function') {
+    return logoComponent(style);
+  }
+
+  return logoComponent;
+}
+
+const LayoutLogo = (props: LayoutLogoProps) => {
+  const { logo, logoComponent, showTitle = true, style = {}, title, to } = props;
+
+  if (logoComponent) {
+    return renderLogoComponent(logoComponent, style);
+  }
+
+  if (!logo && !title) return null;
+
+  return createElement(AdminLogo, { logo, showTitle, style, title, to });
+};
+
+export default LayoutLogo;

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

@@ -0,0 +1,68 @@
+import { ScrollArea } from '@skyroc/web-ui';
+import { ButtonIcon } from '@shell/ui/antd';
+import { Drawer as ADrawer, Segmented as ASegmented } from 'antd';
+import { AnimatePresence, motion } from 'motion/react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { themeTabsOptions, translateOptions } from '../../options';
+import { useAdminState } from '../../state/use-admin-state';
+
+import Appearance from './modules/appearance';
+import ConfigOperation from './modules/ConfigOperation';
+import ThemeGeneral from './modules/general/ThemeGeneral';
+import ThemeLayout from './modules/layout/ThemeLayout';
+import ThemePreset from './modules/preset/ThemePreset';
+
+const ThemeDrawer = () => {
+  const { closeThemeDrawer, themeDrawerVisible } = useAdminState();
+
+  const { t } = useTranslation();
+
+  const options = translateOptions(themeTabsOptions);
+
+  const [activeTab, setActiveTab] = useState<string>(options[0].value);
+
+  return (
+    <ADrawer
+      closeIcon={false}
+      footer={<ConfigOperation />}
+      open={themeDrawerVisible}
+      styles={{ body: { padding: 0 } }}
+      title={t('theme.themeDrawerTitle')}
+      extra={<ButtonIcon icon="ant-design:close-outlined" onClick={closeThemeDrawer} />}
+      onClose={closeThemeDrawer}
+    >
+      <ScrollArea className="h-full">
+        <div className="min-h-400px overflow-x-hidden px-24px pb-24px pt-8px">
+          <ASegmented<string>
+            classNames={{ root: 'w-full mb-16px', item: 'flex-1 py-2px font-500' }}
+            options={options}
+            value={activeTab}
+            onChange={setActiveTab}
+          />
+
+          <AnimatePresence initial={false} mode="wait">
+            <motion.div
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -10 }}
+              initial={{ opacity: 0, x: 10 }}
+              key={activeTab}
+              transition={{
+                duration: 0.2,
+                ease: [0.22, 1, 0.36, 1]
+              }}
+            >
+              {activeTab === options[0].value && <Appearance />}
+              {activeTab === options[1].value && <ThemeLayout />}
+              {activeTab === options[2].value && <ThemeGeneral />}
+              {activeTab === options[3].value && <ThemePreset />}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </ScrollArea>
+    </ADrawer>
+  );
+};
+
+export default ThemeDrawer;

package/templates/admin-shell/layouts/modules/theme-drawer/components/AnimatedCollapse.tsx

@@ -0,0 +1,36 @@
+import type { Easing } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<{
+  /** Extra class name for the animated wrapper. */
+  className?: string;
+  /** Duration of the animation in seconds */
+  duration?: number;
+  /** Easing function */
+  ease?: string | number[];
+  /** Whether the content is visible */
+  visible: boolean;
+}>;
+
+const AnimatedCollapse = (props: Props) => {
+  const { children, className, duration = 0.2, ease = 'easeInOut', visible } = props;
+
+  return (
+    <AnimatePresence initial={false}>
+      {visible && (
+        <motion.div
+          animate={{ opacity: 1, height: 'auto' }}
+          className={className}
+          exit={{ opacity: 0, height: 0 }}
+          initial={{ opacity: 0, height: 0 }}
+          transition={{ duration, ease: ease as Easing }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default AnimatedCollapse;

package/templates/admin-shell/layouts/modules/theme-drawer/components/AnimatedItem.tsx

@@ -0,0 +1,35 @@
+import { motion } from 'motion/react';
+import type { PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<{
+  /** Extra class name for the animated wrapper. */
+  className?: string;
+  /** Duration of the animation in seconds */
+  duration?: number;
+  /** Scale value for animation (0-1) */
+  scale?: number;
+  /** Whether the content is visible */
+  visible: boolean;
+}>;
+
+const AnimatedItem = (props: Props) => {
+  const { children, className, duration = 0.15, scale = 0.85, visible } = props;
+
+  if (!visible) {
+    return null;
+  }
+  return (
+    <motion.div
+      layout
+      animate={{ opacity: 1, scale: 1 }}
+      className={className}
+      exit={{ opacity: 0, scale }}
+      initial={{ opacity: 0, scale }}
+      transition={{ duration, ease: 'easeOut' }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default AnimatedItem;

package/templates/admin-shell/layouts/modules/theme-drawer/components/LayoutModeCard.tsx

@@ -0,0 +1,110 @@
+import { useSettingsTheme } from '@shell/theme';
+import type { TooltipProps } from 'antd';
+import { Tooltip } from 'antd';
+import { clsx } from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+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,
+  VERTICAL_LAYOUT_MODES
+} from '../../../constant';
+import { themeLayoutModeRecord } from '../../../options';
+import { useAdminState } from '../../../state/use-admin-state';
+
+type LayoutConfig = Record<
+  UnionKey.ThemeLayoutMode,
+  {
+    mainClass: string;
+    menuClass: string;
+    placement: TooltipProps['placement'];
+  }
+>;
+
+type Props = Record<UnionKey.ThemeLayoutMode, React.ReactNode>;
+
+const LAYOUT_CONFIG: LayoutConfig = {
+  [LAYOUT_MODE_VERTICAL]: {
+    placement: 'bottom',
+    menuClass: 'w-1/3 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  [LAYOUT_MODE_VERTICAL_MIX]: {
+    placement: 'bottom',
+    menuClass: 'w-1/4 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  [LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST]: {
+    placement: 'bottom',
+    menuClass: 'w-1/4 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  [LAYOUT_MODE_HORIZONTAL]: {
+    placement: 'bottom',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-full h-3/4'
+  },
+  [LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST]: {
+    placement: 'bottom',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  [LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST]: {
+    placement: 'bottom',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-2/3 h-3/4'
+  }
+};
+
+const LayoutModeCard = (props: Props) => {
+  const { ...rest } = props;
+
+  const { t } = useTranslation();
+
+  const { isMobile } = useAdminState();
+
+  const {
+    layout: { mode },
+    setThemeLayout
+  } = useSettingsTheme();
+
+  function handleChangeMode(modeType: UnionKey.ThemeLayoutMode) {
+    if (isMobile) return;
+
+    setThemeLayout(modeType);
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-x-12px gap-y-12px md:grid-cols-3">
+      {Object.entries(LAYOUT_CONFIG).map(([key, item]) => {
+        const layoutMode = key as UnionKey.ThemeLayoutMode;
+        const isVerticalLayout = VERTICAL_LAYOUT_MODES.includes(layoutMode);
+
+        return (
+          <div className="flex-col-center cursor-pointer" key={key} onClick={() => handleChangeMode(layoutMode)}>
+            <Tooltip placement={item.placement} title={t(`theme.layout.layoutMode.${key}_detail`)}>
+              <div
+                className={clsx(
+                  'h-64px w-96px gap-6px rd-4px p-6px shadow ring-2 ring-transparent transition-all hover:ring-primary',
+                  mode === layoutMode && '!ring-primary'
+                )}
+              >
+                <div className={clsx('h-full w-full gap-1', isVerticalLayout ? 'flex' : 'flex-col')}>
+                  {rest[layoutMode]}
+                </div>
+              </div>
+            </Tooltip>
+
+            <p className="mt-8px text-12px">{t(themeLayoutModeRecord[layoutMode])}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default LayoutModeCard;

package/templates/admin-shell/layouts/modules/theme-drawer/components/SettingItem.tsx

@@ -0,0 +1,31 @@
+import { clsx } from 'clsx';
+import type { PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<{
+  /** Extra class name for the setting row. */
+  className?: string;
+  /** Label */
+  label: React.ReactNode;
+  /** Whether the row should be rendered. */
+  show?: boolean;
+  /** Extra content rendered beside the label. */
+  suffix?: React.ReactNode;
+}>;
+
+const SettingItem = (props: Props) => {
+  const { children, className, label, show = true, suffix } = props;
+
+  if (!show) return null;
+
+  return (
+    <div className={clsx('w-full flex-y-center justify-between', className)}>
+      <div className="flex-y-center">
+        <span className="pr-8px text-base-text">{label}</span>
+        {suffix}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default SettingItem;

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

@@ -0,0 +1,53 @@
+import { useCopy } from '@skyroc/hooks/web';
+import { showErrorMessage, showSuccessMessage, useSettingsTheme } from '@shell/theme';
+import { Button as AButton } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+const ConfigOperation = () => {
+  const { t } = useTranslation();
+
+  const { reset, setThemeScheme, settingsJson } = useSettingsTheme();
+
+  const { copy } = useCopy();
+
+  function formatConfigText() {
+    const reg = /"\w+":/g;
+
+    return settingsJson.replace(reg, (match: string) => match.replace(/"/g, ''));
+  }
+
+  async function handleCopy() {
+    const text = formatConfigText();
+
+    const success = await copy(text);
+
+    if (success) {
+      showSuccessMessage(t('theme.configOperation.copySuccessMsg'));
+    } else {
+      showErrorMessage(t('theme.configOperation.copyFailedMsg'));
+    }
+  }
+
+  function handleReset() {
+    setThemeScheme('light');
+
+    reset();
+
+    setTimeout(() => {
+      showSuccessMessage(t('theme.configOperation.resetSuccessMsg'));
+    }, 50);
+  }
+
+  return (
+    <div className="flex justify-between">
+      <AButton danger onClick={handleReset}>
+        {t('theme.configOperation.resetConfig')}
+      </AButton>
+      <AButton type="primary" onClick={handleCopy}>
+        {t('theme.configOperation.copyConfig')}
+      </AButton>
+    </div>
+  );
+};
+
+export default ConfigOperation;

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

@@ -0,0 +1,105 @@
+import { useSettingsTheme } from '@shell/theme';
+import {
+  Checkbox as ACheckbox,
+  type CheckboxProps,
+  ColorPicker as AColorPicker,
+  type ColorPickerProps,
+  Flex as AFlex,
+  Space as ASpace,
+  Tooltip as ATooltip
+} from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SettingItem from '../../components/SettingItem';
+
+const swatches: { color: string; name: string }[] = [
+  { color: '#3b82f6', name: '海洋蓝' },
+  { color: '#6366f1', name: '紫罗兰' },
+  { color: '#8b5cf6', name: '梦幻紫' },
+  { color: '#a855f7', name: '迷人紫' },
+  { color: '#0ea5e9', name: '清澈海洋' },
+  { color: '#06b6d4', name: '天空蓝' },
+  { color: '#f43f5e', name: '樱桃红' },
+  { color: '#ef4444', name: '火焰红' },
+  { color: '#ec4899', name: '玫瑰粉' },
+  { color: '#d946ef', name: '紫色魅影' },
+  { color: '#f97316', name: '橙色阳光' },
+  { color: '#f59e0b', name: '金色晨曦' },
+  { color: '#eab308', name: '柠檬黄' },
+  { color: '#84cc16', name: '草地绿' },
+  { color: '#22c55e', name: '清新绿' },
+  { color: '#10b981', name: '热带绿' }
+];
+
+interface Props {
+  index: number;
+  isInfoFollowPrimary: boolean;
+  label: string;
+  theme: string;
+  value: string;
+}
+
+const CustomPicker = (props: Props) => {
+  const { isInfoFollowPrimary, label, theme, value } = props;
+
+  const { t } = useTranslation();
+
+  const { setSettings, updateThemeColors } = useSettingsTheme();
+
+  function handleUpdateColor(color: string, name: Theme.ThemeColorKey) {
+    updateThemeColors(name, color);
+  }
+
+  const [selectTheme, setSelectTheme] = useState<string>(theme);
+
+  const onChange: CheckboxProps['onChange'] = e => {
+    setSettings({ isInfoFollowPrimary: e.target.checked });
+  };
+
+  const customPanelRender: ColorPickerProps['panelRender'] = (_, { components: { Picker } }) => (
+    <ASpace className="w-250px" orientation="vertical">
+      <>
+        <Picker />
+        <AFlex wrap gap="small">
+          {swatches.map(item => (
+            <ATooltip key={item.name} title={item.name}>
+              <span
+                onClick={() => {
+                  handleUpdateColor(item.color, selectTheme as Theme.ThemeColorKey);
+                }}
+              >
+                <AColorPicker defaultValue={item.color} open={false} size="small" />
+              </span>
+            </ATooltip>
+          ))}
+        </AFlex>
+      </>
+    </ASpace>
+  );
+
+  return (
+    <SettingItem
+      label={t(`theme.appearance.themeColor.${label}`)}
+      suffix={
+        label === 'info' && (
+          <ACheckbox checked={isInfoFollowPrimary} onChange={onChange}>
+            {t('theme.appearance.themeColor.followPrimary')}
+          </ACheckbox>
+        )
+      }
+    >
+      <AColorPicker
+        disabled={label === 'info' && isInfoFollowPrimary}
+        panelRender={customPanelRender}
+        value={value}
+        onChangeComplete={hex => handleUpdateColor(hex.toHexString(), label as Theme.ThemeColorKey)}
+        onOpenChange={() => {
+          setSelectTheme(label);
+        }}
+      />
+    </SettingItem>
+  );
+};
+
+export default CustomPicker;