@skyroc/scripts 2.5.0

package/templates/admin-shell/styles/reset.css

@@ -0,0 +1,378 @@
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'; /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  /* background-color: transparent;  */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}

package/templates/admin-shell/theme/antd/AntdProvider.tsx

@@ -0,0 +1,106 @@
+import { App, ConfigProvider, Watermark } from 'antd';
+import type { Locale } from 'antd/lib/locale';
+import { useSetAtom } from 'jotai';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { themeUserNameAtom, useTheme } from '../hooks';
+import { getAntdTheme } from './shared';
+import { initAntdUI } from './ui';
+
+interface AntdProviderProps {
+  /** 传送门内容 */
+  children: ReactNode;
+
+  /** Antd 国际化 locale 对象 */
+  locale?: Locale;
+
+  /** 用户名（用于水印显示，自动写入全局 atom） */
+  userName?: string;
+}
+
+/** ContextHolder — 利用 App.useApp() 获取 message/modal/notification 实例， 自动完成 UI 实例初始化，无需消费者手动调用 init 函数。 */
+function ContextHolder() {
+  const { message, modal, notification } = App.useApp();
+
+  initAntdUI(message, modal, notification);
+  return null;
+}
+
+/**
+ * Antd 统一 Provider
+ *
+ * 整合 ConfigProvider + App + Watermark + ContextHolder， 内部自动通过 useTheme 获取主题状态。
+ *
+ * UserName 通过 themeUserNameAtom 全局共享， 所有 useTheme 调用者都能获取到完整的 watermarkContent。
+ */
+const AntdProvider = (props: AntdProviderProps) => {
+  const { children, locale, userName } = props;
+
+  // 将 userName 写入全局 atom，供所有 useTheme 调用者读取
+  const setUserName = useSetAtom(themeUserNameAtom);
+
+  useEffect(() => {
+    setUserName(userName);
+  }, [userName, setUserName]);
+
+  const { darkMode, settings, themeColors, watermark, watermarkContent } = useTheme();
+
+  const antdTheme = getAntdTheme(themeColors, darkMode, settings);
+
+  return (
+    <ConfigProvider
+      button={{
+        classNames: {
+          icon: 'align-1px  text-icon'
+        }
+      }}
+      card={{
+        styles: {
+          body: { flex: 1, overflow: 'hidden', padding: '12px 16px ' }
+        }
+      }}
+      locale={locale}
+      segmented={{
+        classNames: {
+          item: 'flex-1',
+          root: 'w-full [&_.ant-segmented-item-selected]:font-600'
+        }
+      }}
+      modal={{
+        centered: true,
+        mask: { enabled: true, blur: true },
+        classNames: {
+          body: 'text-secondary',
+          footer: 'mt-0 py-13px px-22px',
+          header: 'px-22px',
+          container:
+            '[&_.ant-modal-confirm-btns]:(mt-0 py-13px border-t-1px border-border-secondary mt-22px px-22px) [&_.ant-modal-confirm-body]:px-22px pt-22px px-0 pb-0'
+        }
+      }}
+      drawer={{
+        closable: {
+          placement: 'end'
+        }
+      }}
+      form={{
+        classNames: {
+          label: 'font-600 text-13px'
+        }
+      }}
+      theme={antdTheme}
+    >
+      <App style={{ height: '100%' }}>
+        <ContextHolder />
+        <Watermark
+          className="shadow-initial h-full bg-opacity-100 text-opacity-100"
+          content={watermarkContent}
+          {...watermark.settings}
+        >
+          {children}
+        </Watermark>
+      </App>
+    </ConfigProvider>
+  );
+};
+
+export default AntdProvider;

package/templates/admin-shell/theme/antd/index.ts

@@ -0,0 +1,23 @@
+export { default as AntdProvider } from './AntdProvider';
+export { getAntdTheme } from './shared';
+export {
+  destroyMessage,
+  destroyNotification,
+  showConfirmModal,
+  showErrorMessage,
+  showErrorModal,
+  showErrorNotification,
+  showInfoMessage,
+  showInfoModal,
+  showInfoNotification,
+  showLoadingMessage,
+  showMessage,
+  showModal,
+  showNotification,
+  showSuccessMessage,
+  showSuccessModal,
+  showSuccessNotification,
+  showWarningMessage,
+  showWarningModal,
+  showWarningNotification
+} from './ui';

package/templates/admin-shell/theme/antd/shared.ts

@@ -0,0 +1,80 @@
+import { defaultPresetColors, derivative, derivativeDark } from '../antd-algorithm';
+import { transformColorWithOpacity } from '@skyroc/color';
+import type { ConfigProviderProps } from 'antd';
+
+// 注册自定义 token，antd cssVar 会据此生成 --color-inverted
+declare module 'antd/es/theme/interface' {
+  interface AliasToken {
+    colorInverted: string;
+  }
+}
+
+/**
+ * Get antd theme
+ *
+ * @param colors Theme colors
+ * @param darkMode Is dark mode
+ * @param settings Theme settings
+ */
+export function getAntdTheme(colors: Theme.ThemeColor, darkMode: boolean, settings: Theme.ThemeSetting) {
+  const { themeRadius, themeTextSize, tokens } = settings;
+
+  const { error, info, primary, success, warning } = colors;
+
+  const bgColor = transformColorWithOpacity(primary, darkMode ? 0.3 : 0.1, darkMode ? '#000000' : '#fff');
+  const containerBgColor = darkMode ? '#1C1C1E' : tokens.light?.colors.container;
+
+  const borderColor = darkMode ? '#2E3138' : '#C6C6C8';
+
+  // inverted 是自定义 token，只在亮色下生效
+  const invertedColor = tokens.light.colors.inverted;
+
+  const theme: ConfigProviderProps['theme'] = {
+    algorithm: [darkMode ? derivativeDark : derivative],
+    cssVar: {
+      key: 'root',
+      prefix: ''
+    },
+    hashed: false,
+    components: {
+      Button: {
+        controlHeightSM: 28
+      },
+      Collapse: {
+        contentPadding: '16px 16px 24px 16px',
+        headerBg: containerBgColor
+      },
+      Segmented: {
+        trackPadding: 3,
+        itemSelectedColor: primary
+      },
+      Menu: {
+        darkItemBg: 'transparent',
+        darkSubMenuItemBg: 'transparent',
+        itemMarginInline: 8,
+        itemSelectedBg: bgColor,
+        subMenuItemBg: 'transparent'
+      },
+      Modal: {
+        borderRadiusLG: 13
+      }
+    },
+    token: {
+      colorBgContainer: containerBgColor,
+      colorInverted: invertedColor,
+      colorError: error,
+      colorInfo: info,
+      fontSize: themeTextSize,
+      colorBorder: borderColor,
+      controlHeight: 36,
+      colorPrimary: primary,
+      borderRadius: themeRadius,
+      colorSuccess: success,
+      colorWarning: warning,
+      // 使用预设的颜色
+      ...defaultPresetColors
+    }
+  };
+
+  return theme;
+}