@skyroc/scripts 2.5.0

package/templates/admin-shell/layouts/materials/libs/admin-layout/shared.ts

@@ -0,0 +1,67 @@
+import type { AdminLayoutProps, LayoutCssVars, LayoutCssVarsProps } from '../../types';
+
+/** The id of the scroll element of the layout */
+export const LAYOUT_SCROLL_EL_ID = '__SCROLL_EL_ID__';
+
+/** The max z-index of the layout */
+export const LAYOUT_MAX_Z_INDEX = 100;
+
+/**
+ * Create layout css vars by css vars props
+ *
+ * @param props Css vars props
+ */
+function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
+  const cssVars: LayoutCssVars = {
+    '--soy-footer-height': `${props.footerHeight}px`,
+    '--soy-footer-z-index': props.footerZIndex,
+    '--soy-header-height': `${props.headerHeight}px`,
+    '--soy-header-z-index': props.headerZIndex,
+    '--soy-mobile-sider-z-index': props.mobileSiderZIndex,
+    '--soy-sider-collapsed-width': `${props.siderCollapsedWidth}px`,
+    '--soy-sider-width': `${props.siderWidth}px`,
+    '--soy-sider-z-index': props.siderZIndex,
+    '--soy-tab-height': `${props.tabHeight}px`,
+    '--soy-tab-z-index': props.tabZIndex
+  };
+
+  return cssVars;
+}
+
+/**
+ * Create layout css vars
+ *
+ * @param props
+ */
+export function createLayoutCssVars(
+  props: Required<
+    Pick<
+      AdminLayoutProps,
+      'footerHeight' | 'headerHeight' | 'maxZIndex' | 'mode' | 'siderCollapsedWidth' | 'siderWidth' | 'tabHeight'
+    >
+  > &
+    Partial<Pick<AdminLayoutProps, 'isMobile'>>
+) {
+  const { footerHeight, headerHeight, isMobile, maxZIndex, mode, siderCollapsedWidth, siderWidth, tabHeight } = props;
+
+  const headerZIndex = maxZIndex - 3;
+  const tabZIndex = maxZIndex - 5;
+  const siderZIndex = mode === 'vertical' || isMobile ? maxZIndex - 1 : maxZIndex - 4;
+  const mobileSiderZIndex = isMobile ? maxZIndex - 2 : 0;
+  const footerZIndex = maxZIndex - 5;
+
+  const cssProps: LayoutCssVarsProps = {
+    footerHeight,
+    footerZIndex,
+    headerHeight,
+    headerZIndex,
+    mobileSiderZIndex,
+    siderCollapsedWidth,
+    siderWidth,
+    siderZIndex,
+    tabHeight,
+    tabZIndex
+  };
+
+  return createLayoutCssVarsByCssVarsProps(cssProps);
+}

package/templates/admin-shell/layouts/materials/libs/page-tab/ButtonTab.tsx

@@ -0,0 +1,44 @@
+import classNames from 'clsx';
+
+import type { ButtonTabProps } from '../../types';
+
+import { useTap } from './hook';
+import styles from './index.module.css';
+
+const ButtonTab = ({
+  active,
+  children,
+  className,
+  darkMode,
+  onClick,
+  prefix,
+  style,
+  suffix,
+  ...rest
+}: ButtonTabProps) => {
+  const tap = useTap(onClick);
+
+  return (
+    <div
+      {...rest}
+      {...tap}
+      style={{ ...style }}
+      className={classNames(
+        ':soy: relative inline-flex cursor-pointer items-center justify-center gap-12px whitespace-nowrap border-(1px solid) rounded-4px px-12px py-4px',
+        [
+          styles['button-tab'],
+          { [styles['button-tab_dark']]: darkMode },
+          { [styles['button-tab_active']]: active },
+          { [styles['button-tab_active_dark']]: active && darkMode },
+          className
+        ]
+      )}
+      onClick={onClick}
+    >
+      {prefix}
+      {children}
+      {suffix}
+    </div>
+  );
+};
+export default ButtonTab;

package/templates/admin-shell/layouts/materials/libs/page-tab/ChromeTab.tsx

@@ -0,0 +1,54 @@
+import classNames from 'clsx';
+
+import type { ButtonTabProps } from '../../types';
+
+import ChromeTabBg from './ChromeTabBg';
+import { useTap } from './hook';
+import styles from './index.module.css';
+
+const ChromeTab = ({
+  active,
+  children,
+  className,
+  darkMode,
+  onClick,
+  prefix,
+  style,
+  suffix,
+  ...rest
+}: ButtonTabProps) => {
+  const tap = useTap(onClick);
+
+  return (
+    <div
+      {...rest}
+      {...tap}
+      style={{ ...style }}
+      className={classNames(
+        ':soy: relative inline-flex cursor-pointer items-center justify-center gap-16px whitespace-nowrap px-24px py-6px -mr-18px',
+        [
+          styles['chrome-tab'],
+          { [styles['chrome-tab_dark']]: darkMode },
+          { [styles['chrome-tab_active']]: active },
+          { [styles['chrome-tab_active_dark']]: active && darkMode },
+          className
+        ]
+      )}
+      onClick={onClick}
+    >
+      <div
+        className={classNames(':soy: pointer-events-none absolute left-0 top-0 h-full w-full -z-1', [
+          styles['chrome-tab__bg']
+        ])}
+      >
+        <ChromeTabBg />
+      </div>
+      {prefix}
+      {children}
+      {suffix}
+      <div className={classNames(':soy: absolute right-7px h-16px w-1px bg-#1f2225', [styles['chrome-tab-divider']])} />
+    </div>
+  );
+};
+
+export default ChromeTab;

package/templates/admin-shell/layouts/materials/libs/page-tab/ChromeTabBg.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+
+// eslint-disable-next-line react/display-name
+const ChromeTabBg = memo(() => {
+  return (
+    <svg className="size-full">
+      <defs>
+        <symbol id="geometry-left" viewBox="0 0 214 36">
+          <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
+        </symbol>
+        <symbol id="geometry-right" viewBox="0 0 214 36">
+          <use xlinkHref="#geometry-left" />
+        </symbol>
+        <clipPath>
+          <rect height="100%" width="100%" x="0" />
+        </clipPath>
+      </defs>
+      <svg height="100%" width="51%">
+        <use fill="currentColor" height="36" width="214" xlinkHref="#geometry-left" />
+      </svg>
+      <g transform="scale(-1, 1)">
+        <svg height="100%" width="51%" x="-100%" y="0">
+          <use fill="currentColor" height="36" width="214" xlinkHref="#geometry-right" />
+        </svg>
+      </g>
+    </svg>
+  );
+});
+
+export default ChromeTabBg;

package/templates/admin-shell/layouts/materials/libs/page-tab/SliderTab.tsx

@@ -0,0 +1,44 @@
+import classNames from 'clsx';
+
+import type { ButtonTabProps } from '../../types';
+
+import { useTap } from './hook';
+import styles from './index.module.css';
+
+const SliderTab = ({
+  active,
+  children,
+  className,
+  darkMode,
+  onClick,
+  prefix,
+  style,
+  suffix,
+  ...rest
+}: ButtonTabProps) => {
+  const tap = useTap(onClick);
+
+  return (
+    <div
+      {...rest}
+      {...tap}
+      style={{ ...style }}
+      className={classNames(
+        ':soy: relative inline-flex cursor-pointer items-center justify-center gap-6px whitespace-nowrap px-12px py-4px',
+        [
+          styles['slider-tab'],
+          { [styles['slider-tab_dark']]: darkMode },
+          { [styles['slider-tab_active']]: active },
+          { [styles['slider-tab_active_dark']]: active && darkMode },
+          className
+        ]
+      )}
+      onClick={onClick}
+    >
+      {prefix}
+      {children}
+      {suffix}
+    </div>
+  );
+};
+export default SliderTab;

package/templates/admin-shell/layouts/materials/libs/page-tab/SvgClose.tsx

@@ -0,0 +1,51 @@
+import classNames from 'clsx';
+import type { FC, TouchEvent } from 'react';
+import React, { useState } from 'react';
+
+// eslint-disable-next-line react/prop-types
+const SvgClose: FC<React.ComponentProps<'div'>> = ({ className, onClick, ...props }) => {
+  const [touchStart, setTouchStart] = useState(false);
+
+  // 处理触摸开始事件
+  const handleTouchStart = () => {
+    setTouchStart(true);
+  };
+
+  // 处理触摸结束事件
+  const handleTouchEnd = (event: TouchEvent) => {
+    if (touchStart) {
+      if (onClick) onClick(event as any);
+    }
+
+    // 重置触摸状态
+    setTouchStart(false);
+  };
+
+  const handleTouchMove = () => {
+    // 触摸移动，认为不是点击事件
+    setTouchStart(false);
+  };
+
+  return (
+    <div
+      className={classNames(
+        ':soy: relative h-16px w-16px inline-flex items-center justify-center rd-50% text-14px',
+        className
+      )}
+      onTouchEnd={handleTouchEnd}
+      onTouchMove={handleTouchMove}
+      onTouchStart={handleTouchStart}
+      {...props}
+      onClick={onClick}
+    >
+      <svg height="1em" viewBox="0 0 1024 1024" width="1em">
+        <path
+          d="m563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8L295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512L196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1l216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default SvgClose;

package/templates/admin-shell/layouts/materials/libs/page-tab/hook.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+type OnClick = () => void;
+
+export function useTap(onClick: OnClick) {
+  const [touchStart, setTouchStart] = useState(false);
+
+  // 处理触摸开始事件
+  const handleTouchStart = () => {
+    setTouchStart(true);
+  };
+
+  // 处理触摸结束事件
+  const handleTouchEnd = () => {
+    // 判断触摸开始的状态，确保这是一个点击事件，而不是滑动等其他触摸事件
+    if (touchStart) {
+      onClick();
+    }
+
+    // 重置触摸状态
+    setTouchStart(false);
+  };
+
+  const handleTouchMove = () => {
+    // 触摸移动，认为不是点击事件
+    setTouchStart(false);
+  };
+
+  return {
+    onTouchEnd: handleTouchEnd,
+    onTouchMove: handleTouchMove,
+    onTouchStart: handleTouchStart
+  };
+}

package/templates/admin-shell/layouts/materials/libs/page-tab/index.module.css

@@ -0,0 +1,120 @@
+/* @type */
+
+.button-tab {
+  border-color: #e5e7eb;
+}
+
+.button-tab_dark {
+  border-color: #ffffff3d;
+}
+
+.button-tab:hover {
+  color: var(--soy-primary-color);
+  border-color: var(--soy-primary-color-opacity3);
+}
+
+.button-tab_active {
+  color: var(--soy-primary-color);
+  border-color: var(--soy-primary-color-opacity3);
+  background-color: var(--soy-primary-color-opacity1);
+}
+
+.button-tab_active_dark {
+  background-color: var(--soy-primary-color-opacity2);
+}
+
+.button-tab .svg-close:hover {
+  font-size: 12px;
+  color: #ffffff;
+  background-color: var(--soy-primary-color);
+}
+
+.button-tab_dark .svg-close:hover {
+  color: #000000;
+}
+
+.chrome-tab:hover {
+  z-index: 9;
+}
+
+.chrome-tab_active {
+  z-index: 10;
+  color: var(--soy-primary-color);
+}
+
+.chrome-tab__bg {
+  color: transparent;
+}
+
+.chrome-tab_active .chrome-tab__bg {
+  color: var(--soy-primary-color1);
+}
+
+.chrome-tab_active_dark .chrome-tab__bg {
+  color: var(--soy-primary-color2);
+}
+
+.chrome-tab:hover .chrome-tab__bg {
+  color: #dee1e6;
+}
+
+.chrome-tab_active:hover .chrome-tab__bg {
+  color: var(--soy-primary-color1);
+}
+
+.chrome-tab_dark:hover .chrome-tab__bg {
+  color: #333333;
+}
+
+.chrome-tab_active_dark:hover .chrome-tab__bg {
+  color: var(--soy-primary-color2);
+}
+
+.chrome-tab .svg-close:hover {
+  font-size: 12px;
+  color: #ffffff;
+  background-color: #9ca3af;
+}
+
+.chrome-tab_active .svg-close:hover {
+  background-color: var(--soy-primary-color);
+}
+
+.chrome-tab_dark .svg-close:hover {
+  color: #000000;
+}
+
+.chrome-tab_active .chrome-tab-divider {
+  opacity: 0;
+}
+
+.chrome-tab:hover .chrome-tab-divider {
+  opacity: 0;
+}
+
+.chrome-tab_dark .chrome-tab-divider {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+.slider-tab {
+  background-color: transparent;
+  height: 100%;
+  border-bottom: 2px solid transparent;
+}
+
+.slider-tab_dark {
+  background-color: transparent;
+}
+
+.slider-tab:hover {
+  color: var(--soy-primary-color);
+}
+
+.slider-tab_active {
+  color: var(--soy-primary-color);
+  background-color: var(--soy-primary-color-opacity1);
+  border-bottom-color: var(--soy-primary-color);
+}
+
+.slider-tab_active_dark {
+  background-color: var(--soy-primary-color-opacity2);
+}

package/templates/admin-shell/layouts/materials/libs/page-tab/index.module.css.d.ts

@@ -0,0 +1,18 @@
+declare const styles: {
+  readonly 'button-tab': string;
+  readonly 'button-tab_active': string;
+  readonly 'button-tab_active_dark': string;
+  readonly 'button-tab_dark': string;
+  readonly 'chrome-tab': string;
+  readonly 'chrome-tab__bg': string;
+  readonly 'chrome-tab_active': string;
+  readonly 'chrome-tab_active_dark': string;
+  readonly 'chrome-tab_dark': string;
+  readonly 'chrome-tab-divider': string;
+  readonly 'slider-tab': string;
+  readonly 'slider-tab_active': string;
+  readonly 'slider-tab_active_dark': string;
+  readonly 'slider-tab_dark': string;
+  readonly 'svg-close': string;
+};
+export default styles;

package/templates/admin-shell/layouts/materials/libs/page-tab/index.tsx

@@ -0,0 +1,76 @@
+import classNames from 'clsx';
+import React, { memo } from 'react';
+import type { FC } from 'react';
+
+import type { ButtonTabProps } from '../../types';
+
+import ButtonTab from './ButtonTab';
+import ChromeTab from './ChromeTab';
+import { ACTIVE_COLOR, createTabCssVars } from './shared';
+import SliderTab from './SliderTab';
+import SvgClose from './SvgClose';
+import styles from './index.module.css';
+
+type PageTabProps = Omit<ButtonTabProps, 'onMouseUp'>;
+
+const PageTab: FC<PageTabProps> = ({
+  active,
+  activeColor = ACTIVE_COLOR,
+  buttonClass,
+  children,
+  chromeClass,
+  className,
+  closable = true,
+  darkMode,
+  handleClose,
+  mode = 'chrome',
+  prefix,
+  sliderClass,
+  style,
+  suffix,
+  ...rest
+}) => {
+  const cssVars = createTabCssVars(activeColor) as React.CSSProperties;
+
+  const getActiveTabComponent = {
+    button: {
+      class: buttonClass,
+      component: ButtonTab
+    },
+    chrome: {
+      class: chromeClass,
+      component: ChromeTab
+    },
+    slider: {
+      class: sliderClass,
+      component: SliderTab
+    }
+  };
+
+  const ActiveTabComponent = getActiveTabComponent[mode].component;
+
+  const activeClass = getActiveTabComponent[mode].class;
+
+  function closeTab(event: React.MouseEvent | TouchEvent) {
+    event.stopPropagation();
+    if (handleClose) handleClose();
+  }
+
+  const suffixComponent = suffix || (closable && <SvgClose className={styles['svg-close']} onClick={closeTab} />);
+
+  return (
+    <ActiveTabComponent
+      active={active}
+      className={classNames(activeClass, className)}
+      darkMode={darkMode}
+      prefix={prefix}
+      style={{ ...cssVars, ...style }}
+      suffix={suffixComponent}
+      {...rest}
+    >
+      {children}
+    </ActiveTabComponent>
+  );
+};
+
+export default memo(PageTab);

package/templates/admin-shell/layouts/materials/libs/page-tab/shared.ts

@@ -0,0 +1,32 @@
+import { addColorAlpha, transformColorWithOpacity } from '@skyroc/color';
+
+import type { PageTabCssVars, PageTabCssVarsProps } from '../../types';
+
+/** The active color of the tab */
+export const ACTIVE_COLOR = '#1890ff';
+
+function createCssVars(props: PageTabCssVarsProps) {
+  const cssVars: PageTabCssVars = {
+    '--soy-primary-color': props.primaryColor,
+    '--soy-primary-color-opacity1': props.primaryColorOpacity1,
+    '--soy-primary-color-opacity2': props.primaryColorOpacity2,
+    '--soy-primary-color-opacity3': props.primaryColorOpacity3,
+    '--soy-primary-color1': props.primaryColor1,
+    '--soy-primary-color2': props.primaryColor2
+  };
+
+  return cssVars;
+}
+
+export function createTabCssVars(primaryColor: string) {
+  const cssProps: PageTabCssVarsProps = {
+    primaryColor,
+    primaryColor1: transformColorWithOpacity(primaryColor, 0.1, '#ffffff'),
+    primaryColor2: transformColorWithOpacity(primaryColor, 0.3, '#000000'),
+    primaryColorOpacity1: addColorAlpha(primaryColor, 0.1),
+    primaryColorOpacity2: addColorAlpha(primaryColor, 0.15),
+    primaryColorOpacity3: addColorAlpha(primaryColor, 0.3)
+  };
+
+  return createCssVars(cssProps);
+}