@skyroc/scripts 2.5.0

package/templates/admin-shell/layouts/modules/admin-menu/modules/Horizontal.tsx

@@ -0,0 +1,22 @@
+import { GLOBAL_HEADER_MENU_SELECTOR } from '../../../constant';
+
+import HorizontalMenu from '../components/HorizontalMenu';
+import MenuPortal from '../components/MenuPortal';
+import { HorizontalMenuMode } from '../enum';
+
+interface Props {
+  /** 水平菜单显示模式 */
+  readonly mode?: HorizontalMenuMode;
+}
+
+const Horizontal = (props: Props) => {
+  const { mode = HorizontalMenuMode.All } = props;
+
+  return (
+    <MenuPortal container={GLOBAL_HEADER_MENU_SELECTOR}>
+      <HorizontalMenu mode={mode} />
+    </MenuPortal>
+  );
+};
+
+export default Horizontal;

package/templates/admin-shell/layouts/modules/admin-menu/modules/TopHybridHeaderFirst.tsx

@@ -0,0 +1,15 @@
+import { LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST, LAYOUT_MODE_VERTICAL } from '../../../constant';
+import { HorizontalMenuMode } from '../enum';
+
+import Horizontal from './Horizontal';
+import Vertical from './Vertical';
+
+const ReversedHorizontalMix = () => {
+  return [
+    <Vertical key={LAYOUT_MODE_VERTICAL} />,
+
+    <Horizontal key={`${LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST}-horizontal`} mode={HorizontalMenuMode.FirstLevel} />
+  ];
+};
+
+export default ReversedHorizontalMix;

package/templates/admin-shell/layouts/modules/admin-menu/modules/TopHybridSidebarFirst.tsx

@@ -0,0 +1,18 @@
+import { GLOBAL_SIDER_MENU_SELECTOR, LAYOUT_MODE_HORIZONTAL } from '../../../constant';
+
+import FirstLevelMenu from '../components/FirstLevelMenu';
+import { HorizontalMenuMode } from '../enum';
+import MenuPortal from '../components/MenuPortal';
+
+import Horizontal from './Horizontal';
+
+const HorizontalMix = () => {
+  return [
+    <Horizontal key={LAYOUT_MODE_HORIZONTAL} mode={HorizontalMenuMode.Child} />,
+    <MenuPortal container={GLOBAL_SIDER_MENU_SELECTOR} key="first-level-menu">
+      <FirstLevelMenu key="first-level-menu" />
+    </MenuPortal>
+  ];
+};
+
+export default HorizontalMix;

package/templates/admin-shell/layouts/modules/admin-menu/modules/Vertical.tsx

@@ -0,0 +1,14 @@
+import { GLOBAL_SIDER_MENU_SELECTOR } from '../../../constant';
+
+import MenuPortal from '../components/MenuPortal';
+import VerticalMenu from '../components/VerticalMenu';
+
+const Vertical = () => {
+  return (
+    <MenuPortal container={GLOBAL_SIDER_MENU_SELECTOR}>
+      <VerticalMenu />
+    </MenuPortal>
+  );
+};
+
+export default Vertical;

package/templates/admin-shell/layouts/modules/admin-menu/modules/VerticalHybridHeaderFirst.tsx

@@ -0,0 +1,18 @@
+import { LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST, LAYOUT_MODE_VERTICAL_MIX } from '../../../constant';
+import { FirstLevelMenuMode, HorizontalMenuMode } from '../enum';
+
+import Horizontal from './Horizontal';
+import VerticalMixMenu from './VerticalMix';
+
+const VerticalHybridHeaderFirst = () => {
+  return [
+    <Horizontal key={`${LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST}-horizontal`} mode={HorizontalMenuMode.FirstLevel} />,
+
+    <VerticalMixMenu
+      key={`${LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST}-${LAYOUT_MODE_VERTICAL_MIX}`}
+      mode={FirstLevelMenuMode.SecondLevel}
+    />
+  ];
+};
+
+export default VerticalHybridHeaderFirst;

package/templates/admin-shell/layouts/modules/admin-menu/modules/VerticalMix.tsx

@@ -0,0 +1,132 @@
+import { useSettingsTheme } from '@shell/theme';
+import { PinToggler } from '@shell/ui/antd';
+import { DarkModeContainer } from '@shell/ui/compose';
+import classNames from 'clsx';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { GLOBAL_SIDER_MENU_SELECTOR } from '../../../constant';
+import { useAdminLayoutContext } from '../../../context';
+import { useAdminMenus } from '../../../state/menus/use-admin-menus';
+import { useAdminState } from '../../../state/use-admin-state';
+import LayoutLogo from '../../shared/logo';
+import FirstLevelMenu from '../components/FirstLevelMenu';
+import MenuPortal from '../components/MenuPortal';
+import VerticalMenu from '../components/VerticalMenu';
+import { FirstLevelMenuMode } from '../enum';
+
+interface VerticalMixProps {
+  /** 混合菜单层级模式。 */
+  mode?: FirstLevelMenuMode;
+}
+
+const VerticalMix = memo((props: VerticalMixProps) => {
+  const { mode = FirstLevelMenuMode.All } = props;
+
+  const { t } = useTranslation();
+
+  const {
+    activeFirstLevelMenuKey,
+    activeSecondLevelMenuKey,
+    changeActiveFirstLevelMenuKey,
+    childLevelMenus,
+    drawerVisible,
+    menus,
+    secondLevelMenus,
+    setDrawerVisible
+  } = useAdminMenus();
+
+  const { darkMode, header, sider } = useSettingsTheme();
+
+  const { mixSiderFixed, siderCollapse, toggleMixSiderFixed } = useAdminState();
+
+  const { logo, logoComponent, logoTitle, logoTo } = useAdminLayoutContext();
+
+  const siderInverted = !darkMode && sider.inverted;
+
+  const isFirst = mode === FirstLevelMenuMode.All;
+
+  const titleSource = isFirst ? menus : secondLevelMenus;
+
+  const titleKey = isFirst ? activeFirstLevelMenuKey : activeSecondLevelMenuKey;
+
+  const activeMenuLabel = titleSource.find(item => item.key === titleKey)?.label;
+
+  const hasMenus = isFirst
+    ? secondLevelMenus && secondLevelMenus.length > 0
+    : childLevelMenus && childLevelMenus.length > 0;
+
+  const showDrawer = hasMenus && (drawerVisible || mixSiderFixed);
+
+  const logoStyle = {
+    width: `${siderCollapse ? sider.mixCollapsedWidth : sider.mixWidth}px`
+  };
+
+  const hasLogo = Boolean(logo || logoComponent || logoTitle);
+
+  function handleSelectMixMenu() {
+    setDrawerVisible(true);
+  }
+
+  function handleResetActiveMenu() {
+    setDrawerVisible(false);
+
+    if (isFirst) {
+      changeActiveFirstLevelMenuKey();
+    }
+  }
+
+
+  return (
+    <div className="h-full flex" onMouseLeave={handleResetActiveMenu}>
+      <FirstLevelMenu inverted={siderInverted} mode={mode} onSelect={handleSelectMixMenu}>
+        {hasLogo ? (
+          <div className="flex-center px-12px" style={{ height: `${header.height}px` }}>
+            <LayoutLogo
+              logo={logo}
+              logoComponent={logoComponent}
+              showTitle={false}
+              style={logoStyle}
+              title={logoTitle}
+              to={logoTo}
+            />
+          </div>
+        ) : null}
+      </FirstLevelMenu>
+      <div
+        className="relative h-full transition-width-300"
+        style={{ width: mixSiderFixed && hasMenus ? `${sider.mixChildMenuWidth}px` : '0px' }}
+      >
+        <DarkModeContainer
+          className="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
+          inverted={siderInverted}
+          style={{ width: showDrawer ? `${sider.mixChildMenuWidth}px` : '0px' }}
+        >
+          <header className="flex-y-center justify-between px-12px" style={{ height: `${header.height}px` }}>
+            <h2 className="ellipsis-text text-16px text-primary font-bold">{activeMenuLabel}</h2>
+            <PinToggler
+              className={classNames({ 'text-white:88 !hover:text-white': siderInverted })}
+              pin={mixSiderFixed}
+              pinnedTooltip={t('icon.unpin')}
+              unpinnedTooltip={t('icon.pin')}
+              onClick={toggleMixSiderFixed}
+            />
+          </header>
+          <VerticalMenu />
+        </DarkModeContainer>
+      </div>
+    </div>
+  );
+});
+
+const VerticalMixMenu = (props: VerticalMixProps) => {
+  const { mode } = props;
+
+  return (
+    <MenuPortal container={GLOBAL_SIDER_MENU_SELECTOR}>
+      <VerticalMix mode={mode} />
+    </MenuPortal>
+  );
+};
+
+export default VerticalMixMenu;

package/templates/admin-shell/layouts/modules/admin-search/AdminSearch.tsx

@@ -0,0 +1,36 @@
+import { ButtonIcon } from '@shell/ui/antd';
+import { useSettingsTheme } from '@shell/theme';
+import { SvgIcon } from '@shell/ui/compose';
+import { useBoolean } from 'ahooks';
+import { Suspense, lazy, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const SearchModal = lazy(() => import('./components/SearchModal'));
+
+const GlobalSearch = memo(() => {
+  const { t } = useTranslation();
+
+  const [show, { setFalse, toggle }] = useBoolean();
+
+  const {
+    header: {
+      globalSearch: { visible }
+    }
+  } = useSettingsTheme();
+
+  if (!visible) return null;
+
+  return (
+    <>
+      <ButtonIcon className="px-12px" hoverAnimation="scale" tooltipContent={t('common.search')} onClick={toggle}>
+        <SvgIcon icon="uil:search" />
+      </ButtonIcon>
+
+      <Suspense>
+        <SearchModal show={show} onClose={setFalse} />
+      </Suspense>
+    </>
+  );
+});
+
+export default GlobalSearch;

package/templates/admin-shell/layouts/modules/admin-search/components/SearchFooter.tsx

@@ -0,0 +1,38 @@
+import { SvgIcon } from '@shell/ui/compose';
+import { Divider as ADivider } from 'antd';
+import { clsx } from 'clsx';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const operateIconClass = 'mr-6px p-2px text-20px';
+
+const operateIconStyle = {
+  boxShadow: 'inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px #1e235a66'
+};
+
+const SearchFooter = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ADivider className="my-2px" />
+      <div className="h-44px flex-center gap-14px">
+        <span className="flex-y-center">
+          <SvgIcon className={clsx(operateIconClass)} icon="mdi:keyboard-return" style={operateIconStyle} />
+          <span>{t('common.confirm')}</span>
+        </span>
+        <span className="flex-y-center">
+          <SvgIcon className={clsx(operateIconClass)} icon="mdi:arrow-up-thin" style={operateIconStyle} />
+          <SvgIcon className={clsx(operateIconClass)} icon="mdi:arrow-down-thin" style={operateIconStyle} />
+          <span>{t('common.switch')}</span>
+        </span>
+        <span className="flex-y-center">
+          <SvgIcon className={clsx(operateIconClass)} icon="mdi:keyboard-esc" style={operateIconStyle} />
+          <span>{t('common.close')}</span>
+        </span>
+      </div>
+    </>
+  );
+};
+
+export default memo(SearchFooter);

package/templates/admin-shell/layouts/modules/admin-search/components/SearchModal.tsx

@@ -0,0 +1,171 @@
+import { SvgIcon } from '@shell/ui/compose';
+import { useDebounceFn, useKeyPress } from 'ahooks';
+import { Button as AButton, Empty as AEmpty, Input as AInput, type InputRef, Modal as AModal, Space as ASpace } from 'antd';
+import { clsx } from 'clsx';
+import { useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAdminMenus } from '../../../state/menus/use-admin-menus';
+import { useAdminState } from '../../../state/use-admin-state';
+
+import SearchFooter from './SearchFooter';
+import SearchResult from './SearchResult';
+
+interface Props {
+  /** 关闭搜索弹窗 */
+  onClose: () => void;
+  /** 是否显示搜索弹窗 */
+  show: boolean;
+}
+
+/**
+ * Transform menu to searchMenus
+ *
+ * @param menus - Menus
+ * @param treeMap
+ */
+function transformMenuToSearchMenus(menus: Menu.CommonMenu[], treeMap: Menu.CommonMenu[] = []) {
+  if (menus && menus.length === 0) return [];
+  return menus.reduce((acc, cur) => {
+    acc.push(cur);
+
+    if (cur.children && cur.children.length > 0) {
+      transformMenuToSearchMenus(cur.children, treeMap);
+    }
+    return acc;
+  }, treeMap);
+}
+
+const SearchModal = (props: Props) => {
+  const { onClose, show } = props;
+
+  const [resultOptions, setResultOptions] = useState<Menu.CommonMenu[]>([]);
+
+  const [activeRoute, setActiveRoute] = useState<string>('');
+
+  const { isMobile } = useAdminState();
+
+  const { t } = useTranslation();
+
+  const keyword = useRef<InputRef>(null);
+
+  const { menus, routerPushByKey } = useAdminMenus();
+
+  const searchMenus = useMemo(() => transformMenuToSearchMenus(menus), [menus]);
+
+  function getSearchText(menu: Menu.CommonMenu) {
+    const i18nTitle = menu.i18nKey ? t(menu.i18nKey) : '';
+    return `${menu.title ?? ''} ${i18nTitle}`.toLocaleLowerCase();
+  }
+
+  function handleClose() {
+    // handle with setTimeout to prevent user from seeing some operations
+    setTimeout(() => {
+      onClose();
+      setResultOptions([]);
+    }, 200);
+  }
+
+  function search() {
+    const trimKeyword = keyword.current?.input?.value?.toLocaleLowerCase().trim();
+    const result = trimKeyword
+      ? searchMenus.filter(menu => menu.type !== 'divider' && getSearchText(menu).includes(trimKeyword))
+      : [];
+
+    const activeName = result[0]?.key || '';
+
+    setResultOptions(result);
+
+    setActiveRoute(activeName as unknown as string);
+  }
+
+  const handleSearch = useDebounceFn(search, { wait: 300 });
+
+  /** Key up */
+  function handleUp() {
+    handleKeyPress(-1); // 方向 -1 表示向上
+  }
+
+  /** Key down */
+  function handleDown() {
+    handleKeyPress(1); // 方向 1 表示向下
+  }
+
+  function getActivePathIndex() {
+    return resultOptions.findIndex(item => item.key === activeRoute);
+  }
+
+  function handleKeyPress(direction: 1 | -1) {
+    const { length } = resultOptions;
+    if (length === 0) return;
+
+    const index = getActivePathIndex();
+    if (index === -1) return;
+
+    const activeIndex = (index + direction + length) % length; // 确保 index 在范围内循环
+
+    const activeKey = resultOptions[activeIndex].key;
+
+    setActiveRoute(activeKey);
+  }
+
+  /** Key enter */
+  function handleEnter() {
+    if (resultOptions.length === 0 || activeRoute === '') return;
+    handleClose();
+    routerPushByKey(activeRoute);
+  }
+
+  useKeyPress('Escape', handleClose);
+  useKeyPress('Enter', handleEnter);
+  useKeyPress('uparrow', handleUp);
+  useKeyPress('downarrow', handleDown);
+
+  return (
+    <AModal
+      destroyOnHidden
+      className={clsx({ 'top-0px rounded-0': isMobile })}
+      closable={false}
+      footer={isMobile ? null : <SearchFooter />}
+      height={isMobile ? '100%' : 400}
+      open={show}
+      style={isMobile ? { margin: 0, maxWidth: '100%', padding: 0 } : undefined}
+      styles={{ body: { height: isMobile ? '100vh' : '100%', paddingBottom: 0 } }}
+      width={isMobile ? '100%' : 630}
+      onCancel={handleClose}
+    >
+      <ASpace.Compact className="w-full">
+        <AInput
+          allowClear
+          placeholder={t('common.keywordSearch')}
+          prefix={<SvgIcon className="text-15px text-#c2c2c2" icon="uil:search" />}
+          ref={keyword}
+          onInput={handleSearch.run}
+        />
+        {isMobile && (
+          <AButton ghost type="primary" onClick={handleClose}>
+            {t('common.cancel')}
+          </AButton>
+        )}
+      </ASpace.Compact>
+
+      <div className="mt-20px">
+        {resultOptions.length === 0 ? (
+          <AEmpty />
+        ) : (
+          resultOptions.map(item => (
+            <SearchResult
+              active={item.key === activeRoute}
+              enter={handleEnter}
+              key={item.key}
+              menu={item}
+              setActiveRouteName={setActiveRoute}
+            />
+          ))
+        )}
+      </div>
+    </AModal>
+  );
+};
+
+export default SearchModal;

package/templates/admin-shell/layouts/modules/admin-search/components/SearchResult.tsx

@@ -0,0 +1,43 @@
+import { SvgIcon } from '@shell/ui/compose';
+import { clsx } from 'clsx';
+import { memo } from 'react';
+
+interface Props {
+  /** 当前结果是否处于键盘或鼠标选中状态 */
+  active: boolean;
+  /** 确认进入当前选中菜单 */
+  enter: () => void;
+  /** 当前搜索命中的菜单 */
+  menu: Menu.CommonMenu;
+  /** 设置当前激活的菜单路径 */
+  setActiveRouteName: (name: string) => void;
+}
+
+const SearchResult = memo((props: Props) => {
+  const { active, enter, menu, setActiveRouteName } = props;
+
+  function handleMouseEnter() {
+    setActiveRouteName(menu.key);
+  }
+
+  return (
+    <div
+      className={clsx(
+        'mt-8px h-56px flex-y-center cursor-pointer justify-between rounded-4px bg-#e5e7eb px-14px dark:bg-dark',
+        { 'bg-primary': active },
+        { 'text-#fff': active }
+      )}
+      onClick={enter}
+      onMouseEnter={handleMouseEnter}
+    >
+      <span className="ml-5px flex-1">
+        {menu.icon}
+        {menu.label}
+      </span>
+
+      <SvgIcon icon="ant-design:enter-outlined" />
+    </div>
+  );
+});
+
+export default SearchResult;

package/templates/admin-shell/layouts/modules/admin-tab/AdminTab.tsx

@@ -0,0 +1,125 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { PageTab } from '../../materials';
+import { FullScreen, ReloadButton } from '@shell/ui/antd';
+import { BetterScroll, DarkModeContainer, SvgIcon } from '@shell/ui/compose';
+import { useSettingsTheme } from '@shell/theme';
+import { useUpdateEffect } from 'ahooks';
+import { clsx } from 'clsx';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { isPC } from '@skyroc/utils/web';
+
+import { useAdminTab } from '../../state/tabs/use-admin-tab';
+import { useAdminState } from '../../state/use-admin-state';
+
+import { TabContextMenu } from './components/TabContextMenu';
+import { useTabScroll } from './hooks/useTabScroll';
+
+function removeFocus() {
+  (document.activeElement as HTMLElement)?.blur();
+}
+
+const AdminTab = () => {
+  const { t } = useTranslation();
+
+  const { fullContent, reloadFlag: isReload, reloadPage, toggleFullContent } = useAdminState();
+
+  const { activeTabId, addTab, initTabStore, isTabRetain, removeTab, route, switchRouteByTab, tabs } = useAdminTab();
+
+  const { darkMode, tab: tabSettings, themeColor } = useSettingsTheme();
+
+  const { bsScrollRef, bsWrapper, tabRef } = useTabScroll(activeTabId);
+
+  const isPCFlag = isPC();
+
+  function handleReloadPage() {
+    reloadPage();
+  }
+
+  function getContextMenuDisabledKeys(tabId: string, index: number) {
+    const disabledKeys: App.Global.DropdownKey[] = [];
+    const isRetain = isTabRetain(tabId);
+
+    if (isRetain) {
+      const homeDisable: App.Global.DropdownKey[] = ['closeCurrent', 'closeLeft'];
+      disabledKeys.push(...homeDisable);
+    }
+
+    if (index === 0) disabledKeys.push('closeLeft');
+    if (index === tabs.length - 1) disabledKeys.push('closeRight');
+
+    return disabledKeys;
+  }
+
+  function handleCloseTab(tab: App.Global.Tab) {
+    removeTab(tab.id);
+  }
+
+  function switchTab(tab: App.Global.Tab) {
+    switchRouteByTab(tab);
+  }
+
+  const tabWrapperClass =
+    tabSettings.mode === 'chrome' || tabSettings.mode === 'slider' ? 'items-end' : 'items-center gap-12px';
+
+  useEffect(() => {
+    initTabStore();
+  }, []);
+
+  // Watch route and add tab
+  useUpdateEffect(() => {
+    addTab(route.fullPath, route.originPath);
+  }, [route.fullPath]);
+
+  return (
+    <DarkModeContainer className="size-full flex-y-center px-16px shadow-tab">
+      <div className="h-full flex-1-hidden" ref={bsWrapper}>
+        <BetterScroll
+          options={{ click: !isPCFlag, scrollX: true, scrollY: false }}
+          ref={bsScrollRef}
+          onClick={removeFocus}
+        >
+          <div className={clsx('h-full flex pr-18px', tabWrapperClass)} ref={tabRef}>
+            {tabs.map((tab, index) => (
+              <TabContextMenu disabledKeys={getContextMenuDisabledKeys(tab.id, index)} key={tab.id} tab={tab}>
+                <div className={tabSettings.mode === 'slider' ? 'h-full' : undefined} id={tab.id}>
+                  <PageTab
+                    active={tab.id === activeTabId}
+                    activeColor={themeColor}
+                    closable={!isTabRetain(tab.id)}
+                    darkMode={darkMode}
+                    datatype={tab.id}
+                    handleClose={() => handleCloseTab(tab)}
+                    mode={tabSettings.mode}
+                    prefix={
+                      <SvgIcon
+                        className="inline-block align-text-bottom text-16px"
+                        icon={tab.icon}
+                        localIcon={tab.localIcon}
+                      />
+                    }
+                    onClick={() => switchTab(tab)}
+                  >
+                    <div className="max-w-240px ellipsis-text">{tab.i18nKey ? t(tab.i18nKey) : tab.label}</div>
+                  </PageTab>
+                </div>
+              </TabContextMenu>
+            ))}
+          </div>
+        </BetterScroll>
+      </div>
+
+      <ReloadButton isReload={isReload} tooltipContent={t('icon.reload')} onClick={handleReloadPage} />
+
+      <FullScreen
+        enterTooltip={t('icon.fullscreen')}
+        exitTooltip={t('icon.fullscreenExit')}
+        full={fullContent}
+        toggleFullscreen={toggleFullContent}
+      />
+    </DarkModeContainer>
+  );
+};
+
+export default AdminTab;