feat: storybook update

Author: wkylin

.storybook/main.ts

@@ -36,6 +36,59 @@ const config: StorybookConfig = {
 
     // add Less and Less Module support for project styles
     config.module = config.module || { rules: [] }
+
+    const excludeProjectStyleFromDefaultRules = (rules: any[]) => {
+      const visit = (rule: any) => {
+        if (!rule) return
+        if (Array.isArray(rule.oneOf)) rule.oneOf.forEach(visit)
+        if (Array.isArray(rule.rules)) rule.rules.forEach(visit)
+
+        const test = rule.test
+        const testStr = typeof test?.toString === 'function' ? test.toString() : ''
+
+        // Storybook may have implicit style loaders. Exclude project-handled patterns
+        // to prevent double-processing (which can break CSS Modules output).
+        if (testStr.includes('\\.css')) {
+          const moduleCss = /\.module\.css$/
+          if (!rule.exclude) {
+            rule.exclude = moduleCss
+          } else if (Array.isArray(rule.exclude)) {
+            rule.exclude = [...rule.exclude, moduleCss]
+          } else {
+            rule.exclude = [rule.exclude, moduleCss]
+          }
+        }
+
+        if (testStr.includes('\\.less')) {
+          const allLess = /\.less$/
+          if (!rule.exclude) {
+            rule.exclude = allLess
+          } else if (Array.isArray(rule.exclude)) {
+            rule.exclude = [...rule.exclude, allLess]
+          } else {
+            rule.exclude = [rule.exclude, allLess]
+          }
+        }
+      }
+
+      rules.forEach(visit)
+    }
+
+    const cssModuleRule = {
+      test: /\.module\.css$/,
+      use: [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            modules: { localIdentName: '[local]__[hash:base64:5]' },
+            importLoaders: 1,
+          },
+        },
+        'postcss-loader',
+      ],
+    }
+
     const lessModuleRule = {
       test: /\.module\.less$/,
       use: [
@@ -56,7 +109,8 @@ const config: StorybookConfig = {
     }
 
     const lessRule = {
-      test: /(?<!\.module)\.less$/,
+      test: /\.less$/,
+      exclude: /\.module\.less$/,
       use: [
         'style-loader',
         'css-loader',
@@ -68,8 +122,14 @@ const config: StorybookConfig = {
       ],
     }
 
+    // Prevent Storybook's default style rules from also processing project-handled patterns.
+    // IMPORTANT: only apply these excludes to the existing/default rules, not the custom rules
+    // we prepend below.
+    const baseRules = config.module.rules || []
+    excludeProjectStyleFromDefaultRules(baseRules)
+
     // prepend to ensure project rules take precedence
-    config.module.rules = [lessModuleRule, lessRule, ...(config.module.rules || [])]
+    config.module.rules = [cssModuleRule, lessModuleRule, lessRule, ...baseRules]
 
     return config
   },

.storybook/preview.tsx

@@ -1,13 +1,20 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import type { Preview } from '@storybook/react-webpack5'
 import { MemoryRouter } from 'react-router-dom'
+import { I18nextProvider } from 'react-i18next'
+
+import i18n from '../src/i18n/i18n'
 
 const preview: Preview = {
   decorators: [
     (Story) => (
-      <MemoryRouter initialEntries={['/']}>
-        <Story />
-      </MemoryRouter>
+      <I18nextProvider i18n={i18n}>
+        <Suspense fallback={<div style={{ padding: 12 }}>Loading…</div>}>
+          <MemoryRouter initialEntries={['/']}>
+            <Story />
+          </MemoryRouter>
+        </Suspense>
+      </I18nextProvider>
     ),
   ],
   parameters: {

src/components/OneTimePasscode/OneTimePasscode.mdx

@@ -0,0 +1,51 @@
+---
+title: OneTimePasscode
+---
+
+# OneTimePasscode
+
+用于输入一次性验证码（OTP / PIN）的轻量输入组件，支持：
+
+- 受控/非受控
+- IME 合成输入
+- 粘贴一串字符自动分配
+- 三种视觉变体（`modern` / `compact` / `classic`）
+
+组件样式使用 CSS Modules（`index.module.less`）。
+
+## 基本使用
+
+### 受控用法
+
+```tsx
+import React, { useState } from 'react'
+import OneTimePasscode from '@stateless/OneTimePasscode'
+
+export default function Example() {
+  const [code, setCode] = useState('')
+  return <OneTimePasscode length={6} value={code} onChange={setCode} autoFocus variant="modern" />
+}
+```
+
+### 非受控用法
+
+```tsx
+import OneTimePasscode from '@stateless/OneTimePasscode'
+
+export default function Example() {
+  return <OneTimePasscode length={4} onChange={(v) => console.log('value', v)} />
+}
+```
+
+## 常用属性
+
+- `length`: 验证码长度（默认 6）
+- `value` / `onChange`: 传入 `value` 即为受控
+- `variant`: `modern | compact | classic`
+- `validateChar`: 自定义字符校验（例如只允许数字）
+
+示例：只允许数字
+
+```tsx
+<OneTimePasscode length={6} validateChar={(ch) => ch === '' || /\d/.test(ch)} />
+```

src/components/OneTimePasscode/OneTimePasscode.stories.tsx

@@ -0,0 +1,76 @@
+// @ts-ignore: storybook types resolution can be environment-specific in CI/TS config
+import type { Meta, StoryObj } from '@storybook/react-webpack5'
+import React, { useState } from 'react'
+
+import OneTimePasscode from '@stateless/OneTimePasscode'
+
+const Shell = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ padding: 24, minWidth: 320 }}>{children}</div>
+)
+
+const meta = {
+  title: 'ProReactAdmin/OneTimePasscode',
+  component: OneTimePasscode,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    length: 6,
+    variant: 'modern',
+    autoFocus: false,
+    disabled: false,
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['modern', 'compact', 'classic'],
+    },
+  },
+} satisfies Meta<typeof OneTimePasscode>
+
+export default meta
+
+type Story = StoryObj<typeof OneTimePasscode>
+
+export const Modern: Story = {
+  render: (args) => (
+    <Shell>
+      <OneTimePasscode {...args} variant="modern" />
+    </Shell>
+  ),
+}
+
+export const Compact: Story = {
+  render: (args) => (
+    <Shell>
+      <OneTimePasscode {...args} variant="compact" />
+    </Shell>
+  ),
+}
+
+export const Classic: Story = {
+  render: (args) => (
+    <Shell>
+      <OneTimePasscode {...args} variant="classic" />
+    </Shell>
+  ),
+}
+
+export const Controlled: Story = {
+  render: (args) => {
+    const [val, setVal] = useState('')
+    return (
+      <Shell>
+        <OneTimePasscode {...args} value={val} onChange={(v) => setVal(v)} />
+      </Shell>
+    )
+  },
+}
+
+export const Uncontrolled: Story = {
+  render: (args) => (
+    <Shell>
+      <OneTimePasscode {...args} />
+    </Shell>
+  ),
+}

src/components/SmartVideoPlayer/SmartVideoPlayer.mdx

@@ -0,0 +1,38 @@
+---
+title: SmartVideoPlayer
+---
+
+# SmartVideoPlayer
+
+统一的播放器封装（HTML5 / YouTube / Embed），内置设置面板、字幕/倍速、HLS（原生优先 + hls.js 动态加载）等能力。
+
+- “界面语言”只影响 SmartVideoPlayer 自身（不影响全站 i18n）
+- 语言通过 `localStorage: svpUiLanguage` 持久化（刷新后仍生效）
+
+## 基本使用
+
+### HTML5（MP4）
+
+```tsx
+import SmartVideoPlayer from '@stateless/SmartVideoPlayer'
+
+export default function Example() {
+  return (
+    <SmartVideoPlayer
+      provider="html5"
+      title="HTML5 MP4"
+      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
+    />
+  )
+}
+```
+
+### YouTube
+
+```tsx
+import SmartVideoPlayer from '@stateless/SmartVideoPlayer'
+
+export default function Example() {
+  return <SmartVideoPlayer provider="youtube" title="YouTube" youtubeId="dQw4w9WgXcQ" />
+}
+```

src/components/SmartVideoPlayer/SmartVideoPlayer.stories.tsx

@@ -0,0 +1,90 @@
+// @ts-ignore: storybook types resolution can be environment-specific in CI/TS config
+import type { Meta, StoryObj } from '@storybook/react-webpack5'
+import React from 'react'
+import type { ComponentType } from 'react'
+
+import SmartVideoPlayer from '@stateless/SmartVideoPlayer'
+
+// SmartVideoPlayer is implemented in JS via forwardRef/memo, so TS only infers RefAttributes.
+// Cast to a generic component type for Storybook args/controls.
+const SmartVideoPlayerAny = SmartVideoPlayer as unknown as ComponentType<any>
+
+const meta = {
+  title: 'ProReactAdmin/SmartVideoPlayer',
+  component: SmartVideoPlayerAny,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Demo',
+    provider: 'html5',
+    src: '',
+    youtubeId: 'dQw4w9WgXcQ',
+    embedUrl: '',
+    externalUrl: '',
+    sourceUrl: '',
+  },
+  argTypes: {
+    provider: {
+      control: { type: 'select' },
+      options: ['html5', 'youtube', 'embed'],
+    },
+  },
+  render: (args) => {
+    const { provider } = args
+
+    // Keep a fixed demo shell similar to the video page.
+    return (
+      <div style={{ padding: 16, maxWidth: 980, margin: '0 auto' }}>
+        <SmartVideoPlayer
+          {...args}
+          provider={provider}
+          // Avoid passing invalid props for a provider.
+          src={provider === 'html5' ? args.src : undefined}
+          youtubeId={provider === 'youtube' ? args.youtubeId : undefined}
+          embedUrl={provider === 'embed' ? args.embedUrl : undefined}
+        />
+      </div>
+    )
+  },
+} satisfies Meta<typeof SmartVideoPlayerAny>
+
+export default meta
+
+type Story = StoryObj<typeof SmartVideoPlayerAny>
+
+export const Html5Mp4: Story = {
+  args: {
+    provider: 'html5',
+    src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+    title: 'HTML5 MP4',
+    sourceUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+  },
+}
+
+export const Html5Hls: Story = {
+  args: {
+    provider: 'html5',
+    // Public demo stream.
+    src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    title: 'HTML5 HLS',
+    sourceUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+  },
+}
+
+export const YouTube: Story = {
+  args: {
+    provider: 'youtube',
+    youtubeId: 'dQw4w9WgXcQ',
+    title: 'YouTube',
+  },
+}
+
+export const Embed: Story = {
+  args: {
+    provider: 'embed',
+    // A simple embed example.
+    embedUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    title: 'Embed',
+  },
+}