@xfe-repo/web-components 1.6.1 → 1.7.0

package/skills/references/EffectStaffSelect.md

@@ -0,0 +1,150 @@
+# EffectStaffSelect
+
+> 员工选择器，支持两种模式：传入部门 ID 时预加载该部门员工列表（前端过滤），不传时按关键字远程搜索员工。
+
+## 导入
+
+```tsx
+import { EffectStaffSelect } from '@xfe-repo/web-components'
+```
+
+## 基本用法
+
+最常见用法 — 在 Form.Item 中使用，value/onChange 由 Form 自动注入：
+
+```tsx
+<Form.Item name="staffId" label="员工">
+  <EffectStaffSelect />
+</Form.Item>
+```
+
+### 远程搜索模式（不传 deptId）
+
+```tsx
+import { EffectStaffSelect } from '@xfe-repo/web-components'
+
+function MyForm() {
+  const [staffId, setStaffId] = useState<number>()
+
+  return (
+    <EffectStaffSelect
+      value={staffId}
+      onChange={(value, name) => {
+        setStaffId(value)
+        console.log('员工姓名：', name)
+      }}
+    />
+  )
+}
+```
+
+### 部门员工模式（传入 deptId）
+
+```tsx
+<EffectStaffSelect deptId={10} value={staffId} onChange={(value, name) => setStaffId(value)} />
+```
+
+## 进阶用法
+
+### 部门联动
+
+```tsx
+function DeptStaffPicker() {
+  const [deptId, setDeptId] = useState<number>()
+  const [staffId, setStaffId] = useState<number>()
+
+  return (
+    <div>
+      <DeptSelect onChange={(id) => setDeptId(id)} />
+      <EffectStaffSelect deptId={deptId} value={staffId} onChange={(value) => setStaffId(value)} />
+    </div>
+  )
+}
+```
+
+## Props
+
+```typescript
+type EffectStaffSelectProps = {
+  className?: string
+  onChange?: (value?: number, name?: string) => void
+  deptId?: number
+  value?: number
+  defaultValue?: number
+  disabled?: boolean
+  placeholder?: string
+  style?: React.CSSProperties
+}
+```
+
+| 属性         | 类型                      | 必填 | 默认值             | 说明                                                        |
+| ------------ | ------------------------- | ---- | ------------------ | ----------------------------------------------------------- |
+| value        | `number`                  | 否   | -                  | 受控值（员工 user_id）                                      |
+| defaultValue | `number`                  | 否   | -                  | 默认值                                                      |
+| onChange     | `(value?, name?) => void` | 否   | -                  | 值变化回调，返回员工 ID 和姓名                              |
+| deptId       | `number`                  | 否   | -                  | 部门 ID。传入时：预加载部门员工、前端过滤；不传时：远程搜索 |
+| disabled     | `boolean`                 | 否   | -                  | 禁用状态                                                    |
+| placeholder  | `string`                  | 否   | 动态生成（见说明） | 占位符文本                                                  |
+| className    | `string`                  | 否   | -                  | 自定义样式类名                                              |
+| style        | `React.CSSProperties`     | 否   | -                  | 自定义行内样式                                              |
+
+### placeholder 默认值逻辑
+
+- 有 `deptId`：`"请选择员工姓名"`
+- 无 `deptId`：`"请先输入员工姓名"`
+
+## API 数据源
+
+- **内部接口**：`apiService.businessList`
+- **请求参数**：`{ nameFilter: string, deptId?: number, page: 1, pageSize: 20 }`
+- **搜索策略**：
+  - 有 `deptId`：挂载时预加载部门员工，搜索时使用前端 `optionFilterProp="label"` 过滤
+  - 无 `deptId`：输入时 600ms 防抖后远程搜索
+- **可覆盖**：通过 `<ConfigProvider apiService={{ businessList: customFn }}>` 替换默认实现
+
+## 依赖 Props
+
+| 依赖属性 | 类型     | 来源       | 说明                                 |
+| -------- | -------- | ---------- | ------------------------------------ |
+| deptId   | `number` | 部门选择器 | 切换搜索模式，变更时重新加载员工列表 |
+
+### 联动说明
+
+`deptId` 变更时：
+
+1. 清空已有选项列表
+2. 如果有新的 `deptId`，自动请求该部门员工列表
+3. 保持 `value` 为 `controlValue`（受控模式）
+
+## 常见陷阱
+
+- ❌ 不传 `deptId` 时期望挂载后自动加载数据：
+  ```tsx
+  // 无 deptId 模式下，只有用户输入搜索后才会请求
+  // notFoundContent 显示 "请先输入员工姓名"
+  ```
+- ✅ 如需预加载数据，传入 `deptId`
+
+- ❌ `deptId` 变更后期望已选值自动更新：
+  ```tsx
+  // deptId 变更时 value 会保持为 controlValue
+  // 但选项列表已刷新，之前选中的员工可能不在新列表中
+  ```
+- ✅ 在 `deptId` 变更时手动清空 value：
+
+  ```tsx
+  const handleDeptChange = (nextDeptId: number) => {
+    setDeptId(nextDeptId)
+    setStaffId(undefined) // 清空已选员工
+  }
+  ```
+
+- ❌ 使用 `onSearch` 覆盖搜索行为（组件不暴露此 prop）
+- ✅ 组件内部已处理搜索逻辑，无需额外配置
+
+## 相关组件
+
+| 场景       | 组件                | 说明                                    |
+| ---------- | ------------------- | --------------------------------------- |
+| 多维度搜索 | `EffectLabelSelect` | 支持切换搜索维度的通用选择器            |
+| API 配置   | `ConfigProvider`    | 提供 `apiService.businessList` 接口实现 |

package/skills/references/EffectWarehouseSelect.md

@@ -0,0 +1,183 @@
+# EffectWarehouseSelect
+
+> 仓库选择器，支持按仓库类型筛选（自有仓/门店仓），数据通过 `apiService.storeComboBox` 获取并使用 SWR 缓存。
+
+## 导入
+
+```tsx
+import { EffectWarehouseSelect } from '@xfe-repo/web-components'
+import type { WarehouseOption } from '@xfe-repo/web-components'
+```
+
+## 基本用法
+
+最常见用法 — 在 Form.Item 中使用，value/onChange 由 Form 自动注入：
+
+```tsx
+<Form.Item name="warehouseId" label="仓库">
+  <EffectWarehouseSelect />
+</Form.Item>
+```
+
+### 独立受控模式
+
+```tsx
+import { EffectWarehouseSelect } from '@xfe-repo/web-components'
+
+function MyForm() {
+  const [warehouseId, setWarehouseId] = useState<string>()
+
+  return (
+    <EffectWarehouseSelect
+      value={warehouseId}
+      onChange={(value, name) => {
+        setWarehouseId(value)
+        console.log('仓库名称：', name)
+      }}
+    />
+  )
+}
+```
+
+## 进阶用法
+
+### 按仓库类型筛选
+
+```tsx
+// 仅显示自有仓
+<EffectWarehouseSelect warehouseType="SELF_OWNED" />
+
+// 仅显示门店仓
+<EffectWarehouseSelect warehouseType="STORE" />
+```
+
+### 显示所有商户仓库
+
+默认仅显示当前用户商户的仓库，设置 `currentMerchantOnly={false}` 显示所有：
+
+```tsx
+<EffectWarehouseSelect currentMerchantOnly={false} />
+```
+
+### 仓库 → 库区 → 库位级联
+
+```tsx
+import { EffectWarehouseSelect, EffectReservoirSelect, EffectShelveSelect } from '@xfe-repo/web-components'
+
+function WarehouseLocationPicker() {
+  const [warehouseId, setWarehouseId] = useState<string>()
+  const [reservoirId, setReservoirId] = useState<number>()
+  const [shelveCode, setShelveCode] = useState<string>()
+
+  return (
+    <div>
+      <EffectWarehouseSelect
+        value={warehouseId}
+        onChange={(value) => {
+          setWarehouseId(value)
+          setReservoirId(undefined)
+          setShelveCode(undefined)
+        }}
+      />
+      <EffectReservoirSelect
+        warehouseId={warehouseId ? Number(warehouseId) : undefined}
+        value={reservoirId}
+        onChange={(value) => {
+          setReservoirId(value)
+          setShelveCode(undefined)
+        }}
+      />
+      <EffectShelveSelect
+        warehouseId={warehouseId ? Number(warehouseId) : undefined}
+        reservoirId={reservoirId}
+        value={shelveCode}
+        onChange={(value) => setShelveCode(value)}
+      />
+    </div>
+  )
+}
+```
+
+## Props
+
+```typescript
+interface EffectWarehouseSelectProps {
+  className?: string
+  disabled?: boolean
+  value?: string
+  onChange?: (value?: string, name?: string) => void
+  warehouseType?: string
+  currentMerchantOnly?: boolean
+}
+```
+
+| 属性                | 类型                      | 必填 | 默认值 | 说明                                                   |
+| ------------------- | ------------------------- | ---- | ------ | ------------------------------------------------------ |
+| value               | `string`                  | 否   | -      | 受控值（仓库 ID，注意是 string 类型）                  |
+| onChange            | `(value?, name?) => void` | 否   | -      | 值变化回调，返回仓库 ID（string）和名称                |
+| warehouseType       | `string`                  | 否   | -      | 仓库类型筛选：`'SELF_OWNED'` 自有仓 / `'STORE'` 门店仓 |
+| currentMerchantOnly | `boolean`                 | 否   | `true` | 是否仅显示当前用户商户的仓库                           |
+| disabled            | `boolean`                 | 否   | -      | 禁用状态                                               |
+| className           | `string`                  | 否   | -      | 自定义样式类名                                         |
+
+## 导出类型
+
+```typescript
+// 选项数据结构
+export type WarehouseOption = {
+  label: string // 仓库名称
+  value: number // 仓库 ID
+}
+```
+
+## API 数据源
+
+- **内部 Hook**：`useStoreOptions`（基于 `useSWRImmutable` 缓存）
+- **内部接口**：`apiService.storeComboBox`
+- **请求参数**：`{ type: '', currentMerchantOnly, warehouseType }`
+- **缓存策略**：SWR Immutable 缓存，key 为 `['warehouse/store/combo-box', currentMerchantOnly, warehouseType]`
+- **重试策略**：失败自动重试 3 次，5 秒内去重
+- **可覆盖**：通过 `<ConfigProvider apiService={{ storeComboBox: customFn }}>` 替换默认实现
+
+## 常见陷阱
+
+- ❌ 将 `value` 类型视为 `number`：
+  ```tsx
+  // value 类型是 string，不是 number！
+  const [warehouseId, setWarehouseId] = useState<number>() // ❌
+  ```
+- ✅ 使用 `string` 类型：
+
+  ```tsx
+  const [warehouseId, setWarehouseId] = useState<string>() // ✅
+  ```
+
+- ❌ 传给下游 EffectReservoirSelect 时忘记类型转换：
+  ```tsx
+  // EffectReservoirSelect 的 warehouseId 是 number 类型
+  <EffectReservoirSelect warehouseId={warehouseId} /> // ❌ string 类型不兼容
+  ```
+- ✅ 做类型转换：
+
+  ```tsx
+  <EffectReservoirSelect warehouseId={warehouseId ? Number(warehouseId) : undefined} />
+  ```
+
+- ⚠️ `initialValue` 类型陷阱：后端返回的仓库 ID 可能是 `number` 类型，但组件期望 `string`。需确保类型一致：
+
+  ```tsx
+  <Form.Item name="warehouseId" initialValue={String(data.warehouseId)}>
+    <EffectWarehouseSelect />
+  </Form.Item>
+  ```
+
+- ❌ 期望 `onChange` 清空时返回 `''`
+- ✅ 清空时 `onChange` 返回 `(undefined, undefined)`
+
+## 相关组件
+
+| 场景     | 组件                    | 说明                                     |
+| -------- | ----------------------- | ---------------------------------------- |
+| 级联下游 | `EffectReservoirSelect` | 使用仓库 ID 获取库区列表                 |
+| 级联下游 | `EffectShelveSelect`    | 使用仓库 ID + 库区 ID 获取库位列表       |
+| API 配置 | `ConfigProvider`        | 提供 `apiService.storeComboBox` 接口实现 |

package/skills/references/EffectWithFilePanel.md

@@ -0,0 +1,205 @@
+# EffectWithFilePanel
+
+> 文件上传面板，将 `children` 作为触发元素，点击后弹出抽屉面板进行文件上传。内部集成 `WithPanel` 抽屉和 `EffectFileUpload` 上传组件。
+
+## 导入
+
+```tsx
+import { EffectWithFilePanel } from '@xfe-repo/web-components'
+import type { SimpleFileData } from '@xfe-repo/web-components'
+```
+
+## 基本用法
+
+```tsx
+import { Button } from 'antd'
+import { EffectWithFilePanel } from '@xfe-repo/web-components'
+
+function MyForm() {
+  return (
+    <EffectWithFilePanel
+      onChange={(files) => console.log('文件变更：', files)}
+      onSave={(files) => {
+        console.log('保存文件：', files)
+        // 返回 true/false 或 Promise<boolean> 控制面板是否关闭
+      }}
+    >
+      <Button>上传附件</Button>
+    </EffectWithFilePanel>
+  )
+}
+```
+
+## 进阶用法
+
+### 查看模式（禁用上传）
+
+```tsx
+<EffectWithFilePanel disabled defaultValue={existingFiles}>
+  <Button>查看附件</Button>
+</EffectWithFilePanel>
+// disabled 时：标题显示 "查看附件"，按钮文字显示 "确定"
+```
+
+### 限制文件类型和数量
+
+```tsx
+<EffectWithFilePanel max={5} accept=".pdf,.doc,.docx" onChange={(files) => setFiles(files)} onSave={handleSave}>
+  <Button>上传合同</Button>
+</EffectWithFilePanel>
+```
+
+### 自定义标题和头部内容
+
+```tsx
+<EffectWithFilePanel title="上传报告" header={<Alert message="请上传 PDF 格式的报告文件" type="info" />} onSave={handleSave}>
+  <Button>上传报告</Button>
+</EffectWithFilePanel>
+```
+
+### 远程上传模式
+
+```tsx
+<EffectWithFilePanel
+  remote
+  onSave={async (files) => {
+    await submitFiles(files)
+    return true
+  }}
+>
+  <Button>上传文件</Button>
+</EffectWithFilePanel>
+```
+
+### 文件导入模式
+
+```tsx
+<EffectWithFilePanel
+  accept=".csv,.xlsx"
+  onChange={(file) => {
+    // ⚠️ 建议在此处添加二次确认弹窗
+    Modal.confirm({
+      title: '确认导入？',
+      onOk: () => dispatch(effectImport(file)),
+    })
+  }}
+/>
+```
+
+## Props
+
+```typescript
+type Props = {
+  disabled?: boolean
+  defaultValue?: SimpleFileData[]
+  onChange?: (files: SimpleFileData[]) => void
+  onSave?: (files?: SimpleFileData[]) => Promise<boolean | void> | boolean | void
+  max?: number
+  accept?: string
+  remote?: boolean
+  children: ReactElement
+  header?: ReactElement
+  title?: string
+}
+```
+
+| 属性         | 类型                                                      | 必填   | 默认值             | 说明                                                   |
+| ------------ | --------------------------------------------------------- | ------ | ------------------ | ------------------------------------------------------ |
+| children     | `ReactElement`                                            | **是** | -                  | 触发元素，点击后打开面板                               |
+| defaultValue | `SimpleFileData[]`                                        | 否     | -                  | 已有文件列表                                           |
+| onChange     | `(files) => void`                                         | 否     | -                  | 文件列表变更回调                                       |
+| onSave       | `(files?) => Promise<boolean \| void> \| boolean \| void` | 否     | -                  | 点击保存按钮时的回调，返回 false 阻止关闭              |
+| max          | `number`                                                  | 否     | -                  | 最大文件数量限制                                       |
+| accept       | `string`                                                  | 否     | -                  | 接受的文件类型（如 `'.pdf,.doc'`），设置后显示格式提示 |
+| remote       | `boolean`                                                 | 否     | -                  | 是否启用远程上传模式                                   |
+| disabled     | `boolean`                                                 | 否     | -                  | 禁用上传功能（查看模式）                               |
+| header       | `ReactElement`                                            | 否     | -                  | 面板头部自定义内容，渲染在上传区域上方                 |
+| title        | `string`                                                  | 否     | 动态生成（见说明） | 面板标题                                               |
+
+### title 和按钮文字默认值逻辑
+
+| 状态             | title 默认值 | 按钮文字                     |
+| ---------------- | ------------ | ---------------------------- |
+| `disabled=false` | `"上传附件"` | `"保存"` → 上传中 `"上传中"` |
+| `disabled=true`  | `"查看附件"` | `"确定"`                     |
+
+## 关联类型
+
+```typescript
+// 文件数据结构（来自 EffectFileUpload）
+type SimpleFileData = {
+  id?: number
+  name?: string
+  fileName?: string
+  url: string
+}
+```
+
+## 内部结构
+
+```
+EffectWithFilePanel
+├── WithPanel (抽屉容器)
+│   ├── header (自定义头部)
+│   ├── accept 格式提示
+│   └── EffectFileUpload (文件上传组件)
+```
+
+### 保存流程
+
+1. 用户点击"保存"按钮
+2. 调用 `uploadRef.current.handleUpload()` 触发所有待上传文件的上传
+3. 上传完成后调用 `onSave(uploadRef.current.value)` 传出最新文件列表
+4. `onSave` 返回值控制面板是否关闭
+
+### 关闭面板保护
+
+上传进行中时尝试关闭面板，会弹出确认对话框：
+
+- 标题："文件上传中, 确定关闭么？"
+- 内容："如果关闭，此次上传保存将会失败"
+
+## 常见陷阱
+
+- ❌ 忘记传 `children`：
+  ```tsx
+  // children 是必需的触发元素
+  <EffectWithFilePanel onSave={handleSave} /> // ❌ 报错
+  ```
+- ✅ 始终传入一个 ReactElement 作为触发元素：
+
+  ```tsx
+  <EffectWithFilePanel onSave={handleSave}>
+    <Button>上传</Button>
+  </EffectWithFilePanel>
+  ```
+
+- ❌ 直接使用 `onChange` 获取最终文件列表：
+  ```tsx
+  // onChange 在文件列表变更时就会触发，包括文件尚未上传完成时
+  ```
+- ✅ 使用 `onSave` 获取最终上传完成后的文件列表：
+
+  ```tsx
+  <EffectWithFilePanel
+    onSave={(files) => {
+      // files 是上传完成后的最终文件列表
+      console.log('最终文件：', files)
+    }}
+  >
+    <Button>上传</Button>
+  </EffectWithFilePanel>
+  ```
+
+- ❌ `accept` 仅做 UI 提示，不设防：
+  ```tsx
+  // accept 会传给 EffectFileUpload，但需确认底层是否做了严格校验
+  ```
+- ✅ 在 `onSave` 中做二次校验确保文件类型正确
+
+## 相关组件
+
+| 场景     | 组件               | 说明                 |
+| -------- | ------------------ | -------------------- |
+| 底层上传 | `EffectFileUpload` | 文件上传核心组件     |
+| 抽屉容器 | `WithPanel`        | 可复用的抽屉面板组件 |

package/skills/references/FileUpload.md

@@ -0,0 +1,126 @@
+# FileUpload
+
+> 基础文件上传组件，基于 antd Upload 封装，支持图片预览、文件数量限制、远程扫码上传，**不包含 API 上传逻辑**。
+
+## 导入
+
+```tsx
+import { FileUpload } from '@xfe-repo/web-components'
+import type { ModifyFileData } from '@xfe-repo/web-components'
+```
+
+## 基本用法
+
+```tsx
+import { FileUpload } from '@xfe-repo/web-components'
+import { UploadFile } from 'antd/es/upload/interface'
+
+function MyUpload() {
+  const [files, setFiles] = useState<UploadFile[]>([])
+
+  return <FileUpload value={files} onChange={(newFiles) => setFiles(newFiles)} max={5} />
+}
+```
+
+## 进阶用法
+
+### 删除确认
+
+```tsx
+<FileUpload
+  value={files}
+  onChange={setFiles}
+  deleteConfirm // 删除前弹出确认对话框
+/>
+```
+
+### 限制文件类型
+
+```tsx
+<FileUpload accept="image/png,image/jpeg" value={files} onChange={setFiles} />
+```
+
+### 单文件上传
+
+```tsx
+<FileUpload multiple={false} max={1} value={files} onChange={setFiles} />
+```
+
+### 远程扫码上传
+
+```tsx
+<FileUpload
+  remote // 启用远程上传，显示扫码按钮
+  value={files}
+  onChange={setFiles}
+/>
+```
+
+### 自定义上传按钮
+
+```tsx
+<FileUpload value={files} onChange={setFiles}>
+  <Button icon={<UploadOutlined />}>点击上传</Button>
+</FileUpload>
+```
+
+## Props
+
+```typescript
+type FileUploadProps = {
+  multiple?: boolean
+  classNames?: string
+  disabled?: boolean
+  value?: UploadFile[]
+  defaultValue?: UploadFile[]
+  type?: UploadListType
+  onChange?: (value: UploadFile[], modifyFileData: ModifyFileData) => void
+  children?: ReactNode
+  accept?: string
+  max?: number
+  remote?: boolean
+  deleteConfirm?: boolean
+}
+```
+
+| 属性          | 类型                                                            | 必填 | 默认值           | 说明                                       |
+| ------------- | --------------------------------------------------------------- | ---- | ---------------- | ------------------------------------------ |
+| value         | `UploadFile[]`                                                  | 否   | `[]`             | 受控文件列表                               |
+| defaultValue  | `UploadFile[]`                                                  | 否   | -                | 默认文件列表（非受控）                     |
+| onChange      | `(value: UploadFile[], modifyFileData: ModifyFileData) => void` | 否   | -                | 文件变更回调，第二参数包含 add/remove 信息 |
+| max           | `number`                                                        | 否   | `9`              | 最大文件数量                               |
+| multiple      | `boolean`                                                       | 否   | `true`           | 是否支持多选                               |
+| accept        | `string`                                                        | 否   | -                | 接受的文件类型（MIME 类型）                |
+| disabled      | `boolean`                                                       | 否   | -                | 是否禁用                                   |
+| type          | `UploadListType`                                                | 否   | `'picture-card'` | 上传列表展示类型                           |
+| remote        | `boolean`                                                       | 否   | -                | 是否启用远程扫码上传                       |
+| deleteConfirm | `boolean`                                                       | 否   | -                | 删除前是否弹出确认框                       |
+| classNames    | `string`                                                        | 否   | -                | 自定义 className                           |
+| children      | `ReactNode`                                                     | 否   | -                | 自定义上传按钮                             |
+
+## 导出类型
+
+### ModifyFileData
+
+```typescript
+export type ModifyFileData = {
+  add?: UploadFile[]
+  remove?: UploadFile[]
+}
+```
+
+## 常见陷阱
+
+- ❌ `FileUpload` 不会自动上传文件到服务器，它只管理本地文件列表
+- ✅ 需要自动上传到 OSS 请使用 `EffectFileUpload`
+
+- ❌ 达到 `max` 上限后上传按钮会自动隐藏，而非禁用
+- ✅ 需要删除已有文件后才能继续上传
+
+## 相关组件
+
+| 场景           | 组件               | 说明                            |
+| -------------- | ------------------ | ------------------------------- |
+| 自动上传到 OSS | `EffectFileUpload` | 集成 API 上传能力的文件上传     |
+| 图片展示       | `OSSImage`         | 展示 OSS 图片                   |
+| 二维码         | `QRCode`           | remote 模式内部使用 QRCode 组件 |

package/skills/references/Iconfont.md

@@ -0,0 +1,31 @@
+# Iconfont
+
+> 自定义图标组件，基于 `@ant-design/icons` 的 `createFromIconfontCN` 创建，加载阿里巴巴图标库。
+
+## 导入
+
+```tsx
+import { Iconfont } from '@xfe-repo/web-components'
+```
+
+## 基本用法
+
+```tsx
+import { Iconfont } from '@xfe-repo/web-components'
+
+function MyIcon() {
+  return <Iconfont type="icon-example" style={{ fontSize: 24, color: '#1890ff' }} />
+}
+```
+
+## Props
+
+`Iconfont` 继承 `@ant-design/icons` 的 `IconFontProps`：
+
+| 属性      | 类型            | 必填 | 默认值  | 说明                                       |
+| --------- | --------------- | ---- | ------- | ------------------------------------------ |
+| type      | `string`        | 是   | -       | 图标名称，对应 iconfont 项目中的 icon name |
+| style     | `CSSProperties` | 否   | -       | 行内样式（常用于设置 fontSize 和 color）   |
+| className | `string`        | 否   | -       | 自定义 className                           |
+| rotate    | `number`        | 否   | -       | 旋转角度                                   |
+| spin      | `boolean`       | 否   | `false` | 是否有旋转动画                             |