@zixili/design-system 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +181 -0
  3. package/dist/bedi.cjs +52 -0
  4. package/dist/bedi.css +1 -0
  5. package/dist/bedi.js +3444 -0
  6. package/dist/components/CodeBlock/index.d.ts +8 -0
  7. package/dist/components/CodeEditor.d.ts +9 -0
  8. package/dist/components/ComponentDemo.d.ts +20 -0
  9. package/dist/components/Header.d.ts +2 -0
  10. package/dist/components/PropsTable/index.d.ts +13 -0
  11. package/dist/components/SearchModal/index.d.ts +13 -0
  12. package/dist/components/basic/Button.d.ts +13 -0
  13. package/dist/components/basic/ButtonDoc.d.ts +2 -0
  14. package/dist/components/basic/Icon.d.ts +12 -0
  15. package/dist/components/basic/Link.d.ts +15 -0
  16. package/dist/components/basic/index.d.ts +7 -0
  17. package/dist/components/display/Avatar.d.ts +14 -0
  18. package/dist/components/display/Badge.d.ts +15 -0
  19. package/dist/components/display/Card.d.ts +13 -0
  20. package/dist/components/display/Empty.d.ts +8 -0
  21. package/dist/components/display/Progress.d.ts +9 -0
  22. package/dist/components/display/Rate.d.ts +13 -0
  23. package/dist/components/display/Skeleton.d.ts +23 -0
  24. package/dist/components/display/Table.d.ts +29 -0
  25. package/dist/components/display/Tag.d.ts +10 -0
  26. package/dist/components/display/Tooltip.d.ts +14 -0
  27. package/dist/components/display/index.d.ts +20 -0
  28. package/dist/components/feedback/Alert.d.ts +12 -0
  29. package/dist/components/feedback/Modal.d.ts +17 -0
  30. package/dist/components/feedback/index.d.ts +4 -0
  31. package/dist/components/index.d.ts +6 -0
  32. package/dist/components/input/Checkbox.d.ts +7 -0
  33. package/dist/components/input/DatePicker.d.ts +12 -0
  34. package/dist/components/input/Input.d.ts +11 -0
  35. package/dist/components/input/Radio.d.ts +6 -0
  36. package/dist/components/input/Select.d.ts +12 -0
  37. package/dist/components/input/Slider.d.ts +17 -0
  38. package/dist/components/input/Switch.d.ts +7 -0
  39. package/dist/components/input/Upload.d.ts +33 -0
  40. package/dist/components/input/index.d.ts +16 -0
  41. package/dist/components/layout/Divider.d.ts +13 -0
  42. package/dist/components/layout/Grid.d.ts +35 -0
  43. package/dist/components/layout/Layout.d.ts +38 -0
  44. package/dist/components/layout/Space.d.ts +13 -0
  45. package/dist/components/layout/index.d.ts +8 -0
  46. package/dist/components/navigation/Affix.d.ts +13 -0
  47. package/dist/components/navigation/Anchor.d.ts +25 -0
  48. package/dist/components/navigation/BackTop.d.ts +12 -0
  49. package/dist/components/navigation/Breadcrumb.d.ts +14 -0
  50. package/dist/components/navigation/Dropdown.d.ts +21 -0
  51. package/dist/components/navigation/Menu.d.ts +40 -0
  52. package/dist/components/navigation/Pagination.d.ts +13 -0
  53. package/dist/components/navigation/Steps.d.ts +17 -0
  54. package/dist/components/navigation/StickyTool.d.ts +21 -0
  55. package/dist/components/navigation/Tabs.d.ts +16 -0
  56. package/dist/components/navigation/index.d.ts +20 -0
  57. package/dist/context/LanguageContext.d.ts +14 -0
  58. package/dist/context/ThemeContext.d.ts +12 -0
  59. package/dist/data/componentList.d.ts +6 -0
  60. package/dist/i18n/translations.d.ts +856 -0
  61. package/dist/index.d.ts +3 -0
  62. package/package.json +63 -0
  63. package/src/index.css +1 -0
  64. package/src/tokens/base.css +58 -0
  65. package/src/tokens/dark.css +27 -0
  66. package/src/tokens/index.css +4 -0
  67. package/src/tokens/utilities.css +57 -0
  68. package/src/tokens/variables.css +145 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 ZiXi
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,181 @@
1
+ # BEDI 设计系统网站
2
+
3
+ 一个完整的企业级设计系统网站,基于BEDI (Beautiful, Efficient, Dynamic, Intuitive) 设计规范构建。
4
+
5
+ ## 功能特性
6
+
7
+ ✅ **首页展示区** - BEDI品牌介绍、核心特性和精美视觉效果
8
+ ✅ **设计规范模块** - 完整的BEDI设计系统规范
9
+ - **色彩系统**: 6个色系(蓝、绿、橙、红、紫、中性)共60+种颜色
10
+ - **字体层级**: 11个层级,从10px到72px
11
+ - **间距标准**: 基于8px的13级间距系统
12
+ - **圆角规范**: 8个层级的圆角定义
13
+ - **阴影层级**: 5个层级的阴影效果
14
+ - **渐变色**: 6种预设渐变色方案
15
+ ✅ **基础组件库** - 按钮、输入框、卡片、标签页、开关、徽标等交互组件
16
+ ✅ **中英文双语切换** - 支持中英文界面切换
17
+ ✅ **深浅色主题** - 支持亮色/暗色主题切换
18
+ ✅ **响应式设计** - 完美适配各种屏幕尺寸
19
+ ✅ **流畅动画** - 基于Framer Motion的精美过渡动效
20
+
21
+ ## 技术栈
22
+
23
+ - **React 18** - UI框架
24
+ - **TypeScript** - 类型安全
25
+ - **Vite** - 构建工具
26
+ - **React Router** - 路由管理
27
+ - **Framer Motion** - 动画库
28
+ - **CSS Variables** - 主题系统
29
+
30
+ ## 安装和运行
31
+
32
+ ### 前置要求
33
+
34
+ 确保已安装以下软件:
35
+ - Node.js (>= 16.x)
36
+ - npm 或 yarn 或 pnpm
37
+
38
+ ### 安装依赖
39
+
40
+ ```bash
41
+ npm install
42
+ # 或
43
+ yarn install
44
+ # 或
45
+ pnpm install
46
+ ```
47
+
48
+ ### 启动开发服务器
49
+
50
+ ```bash
51
+ npm run dev
52
+ # 或
53
+ yarn dev
54
+ # 或
55
+ pnpm dev
56
+ ```
57
+
58
+ 项目将在 `http://localhost:3000` 启动。
59
+
60
+ ### 构建生产版本
61
+
62
+ ```bash
63
+ npm run build
64
+ # 或
65
+ yarn build
66
+ # 或
67
+ pnpm build
68
+ ```
69
+
70
+ ### 预览生产构建
71
+
72
+ ```bash
73
+ npm run preview
74
+ # 或
75
+ yarn preview
76
+ # 或
77
+ pnpm preview
78
+ ```
79
+
80
+ ## 项目结构
81
+
82
+ ```
83
+ ├── src/
84
+ │ ├── components/ # 通用组件
85
+ │ │ ├── Header.tsx # 顶部导航
86
+ │ │ └── Header.css
87
+ │ ├── pages/ # 页面组件
88
+ │ │ ├── Home.tsx # 首页
89
+ │ │ ├── Design.tsx # 设计规范
90
+ │ │ └── Components.tsx # 组件库
91
+ │ ├── context/ # React Context
92
+ │ │ ├── ThemeContext.tsx # 主题管理
93
+ │ │ └── LanguageContext.tsx # 语言管理
94
+ │ ├── i18n/ # 国际化
95
+ │ │ └── translations.ts
96
+ │ ├── App.tsx # 应用入口
97
+ │ ├── main.tsx # 渲染入口
98
+ │ └── index.css # 全局样式
99
+ ├── index.html
100
+ ├── package.json
101
+ ├── tsconfig.json
102
+ └── vite.config.ts
103
+ ```
104
+
105
+ ## 核心功能说明
106
+
107
+ ### 1. 首页 (/)
108
+ - Hero区域:展示BEDI品牌、产品描述和行动按钮
109
+ - 特性展示:6个核心特性的卡片展示,包含详细说明
110
+ - CTA区域:引导用户开始使用
111
+ - 精美的渐变背景和网格动画效果
112
+
113
+ ### 2. 设计规范 (/design)
114
+
115
+ #### 色彩系统
116
+ - **蓝色系 (Blue)**: 品牌主色,10个层级从#E3F0FF到#003184
117
+ - **绿色系 (Green)**: 成功色,10个层级从#E3F9E9到#0A3717
118
+ - **橙色系 (Orange)**: 警告色,10个层级从#FFF3E3到#5B3B00
119
+ - **红色系 (Red)**: 错误色,10个层级从#FFE3E3到#5B0000
120
+ - **紫色系 (Purple)**: 辅助色,10个层级从#F3E3FF到#3B005B
121
+ - **中性色系 (Neutral)**: 11个层级从纯白到纯黑
122
+ - **渐变色**: 6种预设渐变(蓝、绿、橙、红、紫、彩虹)
123
+
124
+ #### 字体层级(11级)
125
+ - Display / 72px - 超大标题
126
+ - Headline / 56px - 页面主标题
127
+ - Title 1-3 / 48-28px - 各级标题
128
+ - Subtitle 1-2 / 24-20px - 副标题
129
+ - Body 1-2 / 16-14px - 正文
130
+ - Caption / 12px - 辅助文字
131
+ - Overline / 10px - 标签文字
132
+
133
+ #### 间距标准(13级)
134
+ 基于8px基准:0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px, 80px
135
+
136
+ #### 圆角规范(8级)
137
+ None/0px, XS/2px, SM/4px, MD/6px, LG/8px, XL/12px, XXL/16px, Full/999px
138
+
139
+ #### 阴影层级(5级)
140
+ 从最小阴影(悬浮提示)到特大阴影(模态框)
141
+
142
+ ### 3. 组件库 (/components)
143
+ - **按钮 Button**:主要、次要、文字按钮及禁用状态
144
+ - **输入框 Input**:普通和禁用状态
145
+ - **卡片 Card**:包含头部、内容、底部的完整卡片
146
+ - **标签页 Tabs**:多标签切换组件
147
+ - **开关 Switch**:开关切换组件
148
+ - **徽标 Badge**:多种颜色状态的徽标
149
+
150
+ ### 4. 主题切换
151
+ - 点击导航栏的主题图标切换
152
+ - 支持亮色和暗色两种模式
153
+ - 使用CSS Variables实现,切换流畅
154
+ - 主题状态持久化到localStorage
155
+
156
+ ### 5. 语言切换
157
+ - 点击导航栏的语言按钮切换
158
+ - 支持中文和英文
159
+ - 所有文本内容完全国际化
160
+ - 语言偏好持久化到localStorage
161
+
162
+ ## 设计特点
163
+
164
+ - **BEDI设计理念**:Beautiful(美观)、Efficient(高效)、Dynamic(动态)、Intuitive(直观)
165
+ - **现代化UI**:采用简洁、专业的设计风格,渐变色和动效增强视觉体验
166
+ - **完整规范**:60+种颜色、11级字体、13级间距、8级圆角、5级阴影
167
+ - **一致性**:统一的设计语言和交互规范
168
+ - **可访问性**:良好的对比度和交互反馈,支持WCAG 2.1标准
169
+ - **动效设计**:精心设计的过渡和悬停效果
170
+ - **响应式**:移动端友好的自适应布局
171
+
172
+ ## 浏览器支持
173
+
174
+ - Chrome (最新版)
175
+ - Firefox (最新版)
176
+ - Safari (最新版)
177
+ - Edge (最新版)
178
+
179
+ ## License
180
+
181
+ MIT
package/dist/bedi.cjs ADDED
@@ -0,0 +1,52 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),L=require("framer-motion");function D({variant:i="secondary",size:s="medium",icon:t,loading:o=!1,block:a=!1,disabled:l=!1,shape:c="square",iconOnly:p=!1,children:d,className:n="",...m}){const u=["bedi-button",`bedi-button-${i}`,`bedi-button-${s}`,`bedi-button-${c}`,a&&"bedi-button-block",o&&"bedi-button-loading",l&&"bedi-button-disabled",p&&"bedi-button-icon-only",(p||!d&&t)&&"bedi-button-icon-only",n].filter(Boolean).join(" "),h=l||o;return e.jsxs("button",{className:u,disabled:h,...m,children:[o&&e.jsx("span",{className:"bedi-button-loading-icon",children:e.jsx("svg",{className:"bedi-button-loading-svg",viewBox:"0 0 16 16",fill:"none",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeDasharray:"10 30",className:"bedi-button-loading-circle"})})}),!o&&t&&e.jsx("span",{className:"bedi-button-icon",children:t}),d&&e.jsx("span",{className:"bedi-button-label",children:d})]})}const V=({size:i="medium",direction:s="horizontal",align:t="start",wrap:o=!1,className:a="",style:l={},children:c})=>{const p=["bedi-space",`bedi-space-${s}`,`bedi-space-align-${t}`,o?"bedi-space-wrap":"",a].filter(Boolean).join(" "),d=b.useMemo(()=>{const n={};if(typeof i=="number")n.gap=`${i}px`;else{const m={small:"8px",medium:"16px",large:"24px"};n.gap=m[i]}return{...n,...l}},[i,l]);return e.jsx("div",{className:p,style:d,children:b.Children.map(c,n=>n==null?null:e.jsx("div",{className:"bedi-space-item",children:n}))})};function G({title:i,extra:s,children:t,hoverable:o=!1,bordered:a=!0,className:l="",style:c,actions:p}){return e.jsxs("div",{className:`bedi-card ${o?"hoverable":""} ${a?"bordered":""} ${l}`,style:c,children:[(i||s)&&e.jsxs("div",{className:"bedi-card-header",children:[i&&e.jsx("div",{className:"bedi-card-title",children:i}),s&&e.jsx("div",{className:"bedi-card-extra",children:s})]}),e.jsx("div",{className:"bedi-card-body",children:t}),p&&p.length>0&&e.jsx("div",{className:"bedi-card-actions",children:p.map((d,n)=>e.jsx("div",{className:"bedi-card-action",children:d},n))})]})}function ee(){const[i,s]=b.useState(null),[t,o]=b.useState({block:!1,disabled:!1,loading:!1,shape:"square",size:"medium",type:"primary",variant:"primary"}),a=n=>{s(i===n?null:n)},l=(n,m)=>{o(u=>({...u,[n]:m}))},c=()=>{o({block:!1,disabled:!1,loading:!1,shape:"square",size:"medium",type:"primary",variant:"primary"})},p=()=>`<Button
2
+ variant="${t.variant}"
3
+ size="${t.size}"
4
+ shape="${t.shape}"
5
+ ${t.block?"block":""}
6
+ ${t.disabled?"disabled":""}
7
+ ${t.loading?"loading":""}
8
+ >
9
+ 示例按钮
10
+ </Button>`,d={basic:`<Button variant="primary">填充按钮</Button>
11
+ <Button variant="outline">描边按钮</Button>
12
+ <Button variant="ghost">虚框按钮</Button>
13
+ <Button variant="text">文字按钮</Button>`,icons:`<Button variant="primary" icon="📤">发送</Button>
14
+ <Button variant="secondary" icon="👤">用户</Button>
15
+ <Button variant="outline" icon="📧">邮件</Button>
16
+ <Button variant="text" icon="🔍">搜索</Button>
17
+
18
+ {/* 纯图标按钮 */}
19
+ <Button variant="primary" shape="circle" icon="🔍" />
20
+ <Button variant="secondary" shape="circle" icon="⚙️" />
21
+ <Button variant="outline" shape="circle" icon="📝" />`,ghost:`<Button variant="ghost">幽灵按钮</Button>
22
+ <Button variant="ghost" icon="🔍">搜索</Button>
23
+ <Button variant="ghost" disabled>禁用状态</Button>`,block:`<Button variant="primary" block>Block按钮</Button>
24
+ <Button variant="outline" block>Block描边按钮</Button>
25
+ <Button variant="text" block>Block文字按钮</Button>`,themes:`<Button variant="primary">主要按钮</Button>
26
+ <Button variant="success">成功按钮</Button>
27
+ <Button variant="warning">警告按钮</Button>
28
+ <Button variant="danger">危险按钮</Button>
29
+ <Button variant="info">信息按钮</Button>`,sizes:`<Button variant="primary" size="small">小号按钮</Button>
30
+ <Button variant="primary" size="medium">中号按钮</Button>
31
+ <Button variant="primary" size="large">大号按钮</Button>
32
+ <Button variant="primary" size="extra-large">特大号按钮</Button>`,custom:`<Button variant="primary">
33
+ <span style={{ marginRight: '8px' }}>🚀</span>
34
+ 快速开始
35
+ </Button>
36
+
37
+ <Button variant="secondary">
38
+ <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
39
+ <span style={{ fontSize: '18px' }}>💎</span>
40
+ <span>高级功能</span>
41
+ <span style={{ fontSize: '12px', opacity: 0.7 }}>PRO</span>
42
+ </div>
43
+ </Button>
44
+
45
+ <Button variant="outline">
46
+ <span>
47
+ <span style={{ display: 'block', fontSize: '12px', opacity: 0.7 }}>上传文件</span>
48
+ <span style={{ display: 'block', fontSize: '10px' }}>支持拖拽</span>
49
+ </span>
50
+ </Button>`};return e.jsx("div",{className:"design",children:e.jsx("div",{className:"design-layout",children:e.jsx("div",{className:"bedi-design-content",children:e.jsxs(L.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5},children:[e.jsxs("div",{className:"bedi-header",children:[e.jsxs("div",{className:"bedi-breadcrumb",children:[e.jsx("span",{children:"组件"}),e.jsx("span",{className:"separator",children:"/"}),e.jsx("span",{className:"current",children:"Button 按钮"})]}),e.jsx("h1",{className:"bedi-title",children:"Button 按钮"}),e.jsx("p",{className:"bedi-description",children:"按钮用于开始一个即时操作。当用户点击按钮时,会触发相应的业务逻辑。"}),e.jsxs("div",{className:"bedi-meta",children:[e.jsxs("div",{className:"bedi-meta-item",children:[e.jsx("span",{className:"bedi-meta-label",children:"类型:"}),e.jsx("span",{className:"bedi-meta-value",children:"组件"})]}),e.jsxs("div",{className:"bedi-meta-item",children:[e.jsx("span",{className:"bedi-meta-label",children:"状态:"}),e.jsx("span",{className:"bedi-meta-value stable",children:"Stable"})]})]})]}),e.jsxs("section",{className:"bedi-section",children:[e.jsx("h2",{className:"bedi-section-title",children:"何时使用"}),e.jsxs("div",{className:"bedi-usage-grid",children:[e.jsxs(G,{className:"bedi-usage-card",children:[e.jsx("h3",{children:"✅ 推荐使用"}),e.jsxs("ul",{children:[e.jsx("li",{children:"标记了一个(或封装一组)操作命令,响应用户点击行为"}),e.jsx("li",{children:"点击后触发相应的业务逻辑"}),e.jsx("li",{children:'用于页面中最重要的操作,如"提交"、"确认"、"创建"等'})]})]}),e.jsxs(G,{className:"bedi-usage-card",children:[e.jsx("h3",{children:"❌ 不推荐使用"}),e.jsxs("ul",{children:[e.jsx("li",{children:"用于页面跳转,请使用链接组件"}),e.jsx("li",{children:"用于多选操作,请使用复选框组件"}),e.jsx("li",{children:"用于选择操作,请使用单选框组件"})]})]})]})]}),e.jsxs("section",{className:"bedi-section",children:[e.jsx("h2",{className:"bedi-section-title",children:"示例"}),e.jsxs("div",{className:"bedi-demo-section",children:[e.jsx("h3",{className:"bedi-demo-title",children:"动态配置"}),e.jsx("p",{className:"bedi-demo-description",children:"通过右侧属性面板实时调整按钮样式,左侧预览区域会即时更新显示效果。"}),e.jsxs("div",{className:"bedi-dynamic-config-container",children:[e.jsxs("div",{className:"bedi-preview-panel",children:[e.jsxs("div",{className:"bedi-preview-header",children:[e.jsx("h4",{children:"预览"}),e.jsx(D,{variant:"outline",size:"small",onClick:c,children:"重置"})]}),e.jsx("div",{className:"bedi-preview-content",children:e.jsx(V,{children:e.jsx(D,{variant:t.variant,size:t.size,shape:t.shape,block:t.block,disabled:t.disabled,loading:t.loading,children:"示例按钮"})})}),e.jsx("div",{className:"bedi-preview-actions",children:e.jsx(D,{variant:"outline",size:"small",icon:"📋",onClick:()=>a("dynamic"),children:i==="dynamic"?"隐藏代码":"显示代码"})}),i==="dynamic"&&e.jsx(L.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"bedi-code-block",children:e.jsx("pre",{children:e.jsx("code",{children:p()})})})]}),e.jsxs("div",{className:"bedi-config-panel",children:[e.jsx("div",{className:"bedi-config-header",children:e.jsx("h4",{children:"属性配置"})}),e.jsxs("div",{className:"bedi-config-content",children:[e.jsxs("div",{className:"bedi-config-group",children:[e.jsx("label",{children:"variant"}),e.jsxs("select",{value:t.variant,onChange:n=>l("variant",n.target.value),children:[e.jsx("option",{value:"primary",children:"primary"}),e.jsx("option",{value:"secondary",children:"secondary"}),e.jsx("option",{value:"outline",children:"outline"}),e.jsx("option",{value:"text",children:"text"}),e.jsx("option",{value:"danger",children:"danger"}),e.jsx("option",{value:"ghost",children:"ghost"}),e.jsx("option",{value:"success",children:"success"}),e.jsx("option",{value:"warning",children:"warning"}),e.jsx("option",{value:"info",children:"info"})]})]}),e.jsxs("div",{className:"bedi-config-group",children:[e.jsx("label",{children:"size"}),e.jsxs("select",{value:t.size,onChange:n=>l("size",n.target.value),children:[e.jsx("option",{value:"small",children:"small"}),e.jsx("option",{value:"medium",children:"medium"}),e.jsx("option",{value:"large",children:"large"}),e.jsx("option",{value:"extra-large",children:"extra-large"})]})]}),e.jsxs("div",{className:"bedi-config-group",children:[e.jsx("label",{children:"shape"}),e.jsxs("select",{value:t.shape,onChange:n=>l("shape",n.target.value),children:[e.jsx("option",{value:"square",children:"square"}),e.jsx("option",{value:"round",children:"round"}),e.jsx("option",{value:"circle",children:"circle"})]})]}),e.jsxs("div",{className:"bedi-config-group",children:[e.jsx("label",{children:"block"}),e.jsx("input",{type:"checkbox",checked:t.block,onChange:n=>l("block",n.target.checked)})]}),e.jsxs("div",{className:"bedi-config-group",children:[e.jsx("label",{children:"disabled"}),e.jsx("input",{type:"checkbox",checked:t.disabled,onChange:n=>l("disabled",n.target.checked)})]}),e.jsxs("div",{className:"bedi-config-group",children:[e.jsx("label",{children:"loading"}),e.jsx("input",{type:"checkbox",checked:t.loading,onChange:n=>l("loading",n.target.checked)})]})]})]})]})]}),e.jsxs("div",{className:"bedi-demo-section",children:[e.jsx("h3",{className:"bedi-demo-title",children:"基础按钮"}),e.jsxs("div",{className:"bedi-style-description",children:[e.jsx("h4",{children:"样式解读"}),e.jsx("p",{children:"基础按钮包含四种主要样式:填充按钮、描边按钮、虚框按钮和文字按钮。"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"填充按钮"}),":具有背景色,用于主要操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"描边按钮"}),":仅有边框,用于次要操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"虚框按钮"}),":虚线边框,用于可选操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"文字按钮"}),":无边框背景,仅文字显示"]})]})]}),e.jsxs("div",{className:"bedi-usage-description",children:[e.jsx("h4",{children:"使用说明"}),e.jsx("p",{children:"在同一个操作区域中,主要按钮(填充按钮)最多出现一次,其他按钮可多次使用。"})]}),e.jsx("div",{className:"bedi-demo-container",children:e.jsxs(V,{children:[e.jsx(D,{variant:"primary",children:"填充按钮"}),e.jsx(D,{variant:"outline",children:"描边按钮"}),e.jsx(D,{variant:"ghost",children:"虚框按钮"}),e.jsx(D,{variant:"text",children:"文字按钮"})]})}),e.jsx("div",{className:"bedi-demo-actions",children:e.jsx(D,{variant:"outline",size:"small",icon:"📋",onClick:()=>a("basic"),children:i==="basic"?"隐藏代码":"显示代码"})}),i==="basic"&&e.jsx(L.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"bedi-code-block",children:e.jsx("pre",{children:e.jsx("code",{children:d.basic})})})]}),e.jsxs("div",{className:"bedi-demo-section",children:[e.jsx("h3",{className:"bedi-demo-title",children:"图标按钮"}),e.jsxs("div",{className:"bedi-style-description",children:[e.jsx("h4",{children:"样式解读"}),e.jsx("p",{children:"图标按钮可以增强用户识别度,提供更直观的操作提示。"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"左图标"}),":图标在文字左侧,常见于发送、保存等操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"右图标"}),":图标在文字右侧,常见于展开、下一步等操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"纯图标"}),":仅显示图标,节省空间,常用于工具栏"]})]})]}),e.jsxs("div",{className:"bedi-usage-description",children:[e.jsx("h4",{children:"使用说明"}),e.jsx("p",{children:"图标应简洁明了,符合用户认知习惯。纯图标按钮建议配合tooltip使用。"})]}),e.jsx("div",{className:"bedi-demo-container",children:e.jsxs(V,{wrap:!0,children:[e.jsx(D,{variant:"primary",icon:"📤",children:"发送"}),e.jsx(D,{variant:"secondary",icon:"👤",children:"用户"}),e.jsx(D,{variant:"outline",icon:"📧",children:"邮件"}),e.jsx(D,{variant:"text",icon:"🔍",children:"搜索"}),e.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center",padding:"8px",background:"var(--color-bg-2)",borderRadius:"8px"},children:[e.jsx("span",{style:{fontSize:"12px",color:"var(--color-text-3)"},children:"纯图标:"}),e.jsx(D,{variant:"primary",shape:"circle",icon:"🔍"}),e.jsx(D,{variant:"secondary",shape:"circle",icon:"⚙️"}),e.jsx(D,{variant:"outline",shape:"circle",icon:"📝"})]})]})}),e.jsx("div",{className:"bedi-demo-actions",children:e.jsx(D,{variant:"outline",size:"small",icon:"📋",onClick:()=>a("icons"),children:i==="icons"?"隐藏代码":"显示代码"})}),i==="icons"&&e.jsx(L.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"bedi-code-block",children:e.jsx("pre",{children:e.jsx("code",{children:d.icons})})})]}),e.jsxs("div",{className:"bedi-demo-section",children:[e.jsx("h3",{className:"bedi-demo-title",children:"幽灵按钮"}),e.jsxs("div",{className:"bedi-style-description",children:[e.jsx("h4",{children:"样式解读"}),e.jsx("p",{children:"幽灵按钮在深色背景或复杂背景中表现更佳,具有更好的视觉层次。"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"背景透明"}),":按钮背景透明,融入背景"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"边框可见"}),":保持边框清晰可见"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"悬停效果"}),":悬停时轻微显示背景"]})]})]}),e.jsxs("div",{className:"bedi-usage-description",children:[e.jsx("h4",{children:"使用说明"}),e.jsx("p",{children:"适用于深色背景、图片背景或需要弱化按钮视觉强度的场景。"})]}),e.jsx("div",{className:"bedi-demo-container",style:{background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",padding:"20px"},children:e.jsxs(V,{children:[e.jsx(D,{variant:"ghost",children:"幽灵按钮"}),e.jsx(D,{variant:"ghost",icon:"🔍",children:"搜索"}),e.jsx(D,{variant:"ghost",disabled:!0,children:"禁用状态"})]})}),e.jsx("div",{className:"bedi-demo-actions",children:e.jsx(D,{variant:"outline",size:"small",icon:"📋",onClick:()=>a("ghost"),children:i==="ghost"?"隐藏代码":"显示代码"})}),i==="ghost"&&e.jsx(L.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"bedi-code-block",children:e.jsx("pre",{children:e.jsx("code",{children:d.ghost})})})]}),e.jsxs("div",{className:"bedi-demo-section",children:[e.jsx("h3",{className:"bedi-demo-title",children:"Block按钮"}),e.jsxs("div",{className:"bedi-style-description",children:[e.jsx("h4",{children:"样式解读"}),e.jsx("p",{children:"Block按钮会占满父容器的宽度,提供更强的视觉冲击力。"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"宽度100%"}),":占满父容器宽度"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"居中对齐"}),":文字内容居中显示"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"适合移动端"}),":在移动设备上更易点击"]})]})]}),e.jsxs("div",{className:"bedi-usage-description",children:[e.jsx("h4",{children:"使用说明"}),e.jsx("p",{children:"常用于表单提交、弹窗底部操作、页面主要操作入口等场景。"})]}),e.jsx("div",{className:"bedi-demo-container",children:e.jsxs("div",{style:{width:"100%",maxWidth:"400px"},children:[e.jsx(D,{variant:"primary",block:!0,children:"Block按钮"}),e.jsx("div",{style:{height:"8px"}}),e.jsx(D,{variant:"outline",block:!0,children:"Block描边按钮"}),e.jsx("div",{style:{height:"8px"}}),e.jsx(D,{variant:"text",block:!0,children:"Block文字按钮"})]})}),e.jsx("div",{className:"bedi-demo-actions",children:e.jsx(D,{variant:"outline",size:"small",icon:"📋",onClick:()=>a("block"),children:i==="block"?"隐藏代码":"显示代码"})}),i==="block"&&e.jsx(L.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"bedi-code-block",children:e.jsx("pre",{children:e.jsx("code",{children:d.block})})})]}),e.jsxs("div",{className:"bedi-demo-section",children:[e.jsx("h3",{className:"bedi-demo-title",children:"不同颜色主题按钮"}),e.jsxs("div",{className:"bedi-style-description",children:[e.jsx("h4",{children:"样式解读"}),e.jsx("p",{children:"不同颜色主题用于传达不同的语义和情感。"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"主要色"}),":用于主要操作,视觉重点"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"成功色"}),":用于成功、完成等积极操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"警告色"}),":用于警告、注意等操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"危险色"}),":用于删除、取消等危险操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"信息色"}),":用于信息提示、帮助等操作"]})]})]}),e.jsxs("div",{className:"bedi-usage-description",children:[e.jsx("h4",{children:"使用说明"}),e.jsx("p",{children:"颜色选择应符合用户认知习惯,保持界面的一致性和可预测性。"})]}),e.jsx("div",{className:"bedi-demo-container",children:e.jsxs(V,{wrap:!0,children:[e.jsx(D,{variant:"primary",children:"主要按钮"}),e.jsx(D,{variant:"success",children:"成功按钮"}),e.jsx(D,{variant:"warning",children:"警告按钮"}),e.jsx(D,{variant:"danger",children:"危险按钮"}),e.jsx(D,{variant:"info",children:"信息按钮"})]})}),e.jsx("div",{className:"bedi-demo-actions",children:e.jsx(D,{variant:"outline",size:"small",icon:"📋",onClick:()=>a("themes"),children:i==="themes"?"隐藏代码":"显示代码"})}),i==="themes"&&e.jsx(L.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"bedi-code-block",children:e.jsx("pre",{children:e.jsx("code",{children:d.themes})})})]}),e.jsxs("div",{className:"bedi-demo-section",children:[e.jsx("h3",{className:"bedi-demo-title",children:"不同尺寸按钮"}),e.jsxs("div",{className:"bedi-style-description",children:[e.jsx("h4",{children:"样式解读"}),e.jsx("p",{children:"不同尺寸的按钮适用于不同的场景和设备。"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"小号"}),":高度24px,用于紧凑布局"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"中号"}),":高度32px,默认尺寸,通用场景"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"大号"}),":高度40px,用于重要操作"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"特大号"}),":高度48px,用于移动端或主要入口"]})]})]}),e.jsxs("div",{className:"bedi-usage-description",children:[e.jsx("h4",{children:"使用说明"}),e.jsx("p",{children:"尺寸选择应考虑使用场景、设备类型和视觉层次。移动端建议使用大号或特大号。"})]}),e.jsx("div",{className:"bedi-demo-container",children:e.jsxs(V,{children:[e.jsx(D,{variant:"primary",size:"small",children:"小号按钮"}),e.jsx(D,{variant:"primary",size:"medium",children:"中号按钮"}),e.jsx(D,{variant:"primary",size:"large",children:"大号按钮"}),e.jsx(D,{variant:"primary",size:"extra-large",children:"特大号按钮"})]})}),e.jsx("div",{className:"bedi-demo-actions",children:e.jsx(D,{variant:"outline",size:"small",icon:"📋",onClick:()=>a("sizes"),children:i==="sizes"?"隐藏代码":"显示代码"})}),i==="sizes"&&e.jsx(L.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"bedi-code-block",children:e.jsx("pre",{children:e.jsx("code",{children:d.sizes})})})]}),e.jsxs("div",{className:"bedi-demo-section",children:[e.jsx("h3",{className:"bedi-demo-title",children:"自定义渲染元素"}),e.jsxs("div",{className:"bedi-style-description",children:[e.jsx("h4",{children:"样式解读"}),e.jsx("p",{children:"按钮支持自定义渲染元素,可以实现更复杂的交互效果。"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"自定义图标"}),":支持emoji、svg、图片等"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"组合元素"}),":支持多个元素组合"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"条件渲染"}),":根据状态显示不同内容"]})]})]}),e.jsxs("div",{className:"bedi-usage-description",children:[e.jsx("h4",{children:"使用说明"}),e.jsx("p",{children:"自定义渲染应保持按钮的基本特性,确保可访问性和用户体验。"})]}),e.jsx("div",{className:"bedi-demo-container",children:e.jsxs(V,{wrap:!0,children:[e.jsxs(D,{variant:"primary",children:[e.jsx("span",{style:{marginRight:"8px"},children:"🚀"}),"快速开始"]}),e.jsx(D,{variant:"secondary",children:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx("span",{style:{fontSize:"18px"},children:"💎"}),e.jsx("span",{children:"高级功能"}),e.jsx("span",{style:{fontSize:"12px",opacity:.7},children:"PRO"})]})}),e.jsx(D,{variant:"outline",children:e.jsxs("span",{children:[e.jsx("span",{style:{display:"block",fontSize:"12px",opacity:.7},children:"上传文件"}),e.jsx("span",{style:{display:"block",fontSize:"10px"},children:"支持拖拽"})]})})]})}),e.jsx("div",{className:"bedi-demo-actions",children:e.jsx(D,{variant:"outline",size:"small",icon:"📋",onClick:()=>a("custom"),children:i==="custom"?"隐藏代码":"显示代码"})}),i==="custom"&&e.jsx(L.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"bedi-code-block",children:e.jsx("pre",{children:e.jsx("code",{children:d.custom})})})]})]}),e.jsxs("section",{className:"bedi-section",children:[e.jsx("h2",{className:"bedi-section-title",children:"API"}),e.jsxs("div",{className:"bedi-api-table",children:[e.jsx("h3",{children:"Button Props"}),e.jsxs("table",{className:"bedi-table",children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"参数"}),e.jsx("th",{children:"说明"}),e.jsx("th",{children:"类型"}),e.jsx("th",{children:"默认值"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"variant"})}),e.jsx("td",{children:"按钮类型"}),e.jsx("td",{children:e.jsx("code",{children:"'primary' | 'secondary' | 'outline' | 'text' | 'danger' | 'ghost' | 'success' | 'warning' | 'info'"})}),e.jsx("td",{children:e.jsx("code",{children:"'secondary'"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"size"})}),e.jsx("td",{children:"按钮尺寸"}),e.jsx("td",{children:e.jsx("code",{children:"'small' | 'medium' | 'large' | 'extra-large'"})}),e.jsx("td",{children:e.jsx("code",{children:"'medium'"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"shape"})}),e.jsx("td",{children:"按钮形状"}),e.jsx("td",{children:e.jsx("code",{children:"'square' | 'round' | 'circle'"})}),e.jsx("td",{children:e.jsx("code",{children:"'square'"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"icon"})}),e.jsx("td",{children:"按钮图标"}),e.jsx("td",{children:e.jsx("code",{children:"ReactNode"})}),e.jsx("td",{children:"-"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"loading"})}),e.jsx("td",{children:"是否加载中"}),e.jsx("td",{children:e.jsx("code",{children:"boolean"})}),e.jsx("td",{children:e.jsx("code",{children:"false"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"disabled"})}),e.jsx("td",{children:"是否禁用"}),e.jsx("td",{children:e.jsx("code",{children:"boolean"})}),e.jsx("td",{children:e.jsx("code",{children:"false"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"block"})}),e.jsx("td",{children:"是否块级按钮"}),e.jsx("td",{children:e.jsx("code",{children:"boolean"})}),e.jsx("td",{children:e.jsx("code",{children:"false"})})]})]})]})]})]})]})})})})}const ie=({name:i="default",size:s=16,color:t="currentColor",className:o="",style:a={},onClick:l})=>{const c={width:s,height:s,color:t,...a};return e.jsx("span",{className:`bedi-icon bedi-icon-${i} ${o}`,style:c,onClick:l,role:"img","aria-label":`icon-${i}`,children:i})},te=({href:i,children:s,target:t="_self",rel:o,disabled:a=!1,underline:l=!0,className:c="",style:p={},onClick:d})=>{const u={className:["bedi-link",l?"bedi-link-underline":"bedi-link-no-underline",a?"bedi-link-disabled":"",c].filter(Boolean).join(" "),style:p,onClick:h=>{if(a){h.preventDefault();return}d==null||d(h)}};return i&&!a?e.jsx("a",{href:i,target:t,rel:o,...u,children:s}):e.jsx("span",{...u,children:s})},se=({type:i="horizontal",orientation:s="center",dashed:t=!1,plain:o=!1,className:a="",style:l={},children:c})=>{const p=["bedi-divider",`bedi-divider-${i}`,c?`bedi-divider-with-text bedi-divider-with-text-${s}`:"",t?"bedi-divider-dashed":"",o?"bedi-divider-plain":"",a].filter(Boolean).join(" ");return i==="vertical"?e.jsx("div",{className:p,style:l}):e.jsx("div",{className:p,style:l,children:c&&e.jsx("span",{className:"bedi-divider-inner-text",children:c})})},ne=({gutter:i=0,align:s,justify:t,wrap:o=!0,className:a="",style:l={},children:c})=>{const p=["bedi-row",s?`bedi-row-align-${s}`:"",t?`bedi-row-justify-${t}`:"",o?"":"bedi-row-no-wrap",a].filter(Boolean).join(" "),d=b.useMemo(()=>{const n={};return typeof i=="number"?(n.marginLeft=-i/2,n.marginRight=-i/2):Array.isArray(i)&&(n.marginLeft=-i[0]/2,n.marginRight=-i[0]/2,n.marginTop=-i[1]/2,n.marginBottom=-i[1]/2),{...n,...l}},[i,l]);return e.jsx("div",{className:p,style:d,children:b.Children.map(c,n=>b.isValidElement(n)&&n.type===Y?b.cloneElement(n,{gutter:i}):n)})},Y=({span:i=24,offset:s,order:t,push:o,pull:a,xs:l,sm:c,md:p,lg:d,xl:n,xxl:m,className:u="",style:h={},children:w,gutter:B})=>{const x=["bedi-col",`bedi-col-${i}`,s&&`bedi-col-offset-${s}`,t&&`bedi-col-order-${t}`,o&&`bedi-col-push-${o}`,a&&`bedi-col-pull-${a}`,typeof l=="number"?`bedi-col-xs-${l}`:"",typeof c=="number"?`bedi-col-sm-${c}`:"",typeof p=="number"?`bedi-col-md-${p}`:"",typeof d=="number"?`bedi-col-lg-${d}`:"",typeof n=="number"?`bedi-col-xl-${n}`:"",typeof m=="number"?`bedi-col-xxl-${m}`:"",u].filter(Boolean).join(" "),k=b.useMemo(()=>{const r={};return typeof B=="number"?(r.paddingLeft=B/2,r.paddingRight=B/2):Array.isArray(B)&&(r.paddingLeft=B[0]/2,r.paddingRight=B[0]/2,r.paddingTop=B[1]/2,r.paddingBottom=B[1]/2),{...r,...h}},[B,h]);return e.jsx("div",{className:x,style:k,children:w})},ae={Row:ne,Col:Y},re=({className:i="",style:s={},children:t})=>e.jsx("div",{className:`bedi-layout ${i}`,style:s,children:t}),oe=({className:i="",style:s={},children:t})=>e.jsx("header",{className:`bedi-layout-header ${i}`,style:s,children:t}),le=({className:i="",style:s={},children:t})=>e.jsx("main",{className:`bedi-layout-content ${i}`,style:s,children:t}),ce=({className:i="",style:s={},children:t})=>e.jsx("footer",{className:`bedi-layout-footer ${i}`,style:s,children:t}),de=({className:i="",style:s={},width:t=200,collapsedWidth:o=80,collapsible:a=!1,collapsed:l=!1,onCollapse:c,children:p})=>{const d={width:l?o:t,...s},n=["bedi-layout-sider",l?"bedi-layout-sider-collapsed":"",a?"bedi-layout-sider-collapsible":"",i].filter(Boolean).join(" ");return e.jsx("aside",{className:n,style:d,children:p})},ue=({offsetTop:i=0,offsetBottom:s,target:t=()=>window,className:o="",style:a={},children:l,onChange:c})=>{const[p,d]=b.useState(!1),[n,m]=b.useState({}),u=b.useRef(null),h=b.useRef(null);return b.useEffect(()=>{const w=()=>{var f,g;const x=t();x instanceof Window?x.pageYOffset:x.scrollTop;const k=(f=u.current)==null?void 0:f.getBoundingClientRect(),r=(g=h.current)==null?void 0:g.getBoundingClientRect();if(!k||!r)return;let j=!1,y={};s!==void 0?(j=(x instanceof Window?x.innerHeight:x.clientHeight)-r.bottom<=s,j&&(y={position:"fixed",bottom:s,left:r.left,width:r.width,zIndex:1e3})):(j=r.top<=i,j&&(y={position:"fixed",top:i,left:r.left,width:r.width,zIndex:1e3})),j!==p&&(d(j),c==null||c(j)),m(y)},B=t();return B.addEventListener("scroll",w),w(),()=>{B.removeEventListener("scroll",w)}},[i,s,t,p,c]),e.jsx("div",{ref:h,style:{position:"relative"},children:e.jsx("div",{ref:u,className:`bedi-affix ${p?"bedi-affix-fixed":""} ${o}`,style:p?{...a,...n}:a,children:l})})},q=({href:i,title:s,target:t,className:o="",style:a={}})=>e.jsx("div",{className:`bedi-anchor-link ${o}`,style:a,children:e.jsx("a",{href:i,target:t,className:"bedi-anchor-link-title",children:s})}),U=({affix:i=!0,offsetTop:s=0,bounds:t=5,className:o="",style:a={},children:l,getCurrentAnchor:c,onClick:p})=>{const[d,n]=b.useState(""),[m,u]=b.useState([]),h=b.useRef(null);b.useEffect(()=>{(()=>{const k=[];b.Children.forEach(l,r=>{b.isValidElement(r)&&r.type===q&&k.push({href:r.props.href,title:r.props.title})}),u(k)})()},[l]),b.useEffect(()=>{const x=()=>{const r=(document.documentElement||document.body).scrollTop;for(let j=m.length-1;j>=0;j--){const y=m[j],f=document.querySelector(y.href);if(f&&f.getBoundingClientRect().top+r<=r+s+t){d!==y.href&&(n(y.href),c==null||c(y.href));break}}};return window.addEventListener("scroll",x),x(),()=>{window.removeEventListener("scroll",x)}},[m,d,s,t,c]);const w=(x,k)=>{x.preventDefault();const r=document.querySelector(k.href);if(r){const j=document.documentElement||document.body,y=r.getBoundingClientRect().top+j.scrollTop-s;window.scrollTo({top:y,behavior:"smooth"}),n(k.href),c==null||c(k.href)}p==null||p(x,k)},B=e.jsx("div",{ref:h,className:`bedi-anchor ${o}`,style:a,children:b.Children.map(l,x=>{if(b.isValidElement(x)&&x.type===q){const k=d===x.props.href;return b.cloneElement(x,{className:`${x.props.className||""} ${k?"bedi-anchor-link-active":""}`,onClick:r=>w(r,{href:x.props.href,title:x.props.title})})}return x})});return i?e.jsx("div",{style:{position:"fixed",top:s,right:0},children:B}):B};U.Link=q;const pe=({visibilityHeight:i=400,onClick:s,target:t=()=>window,className:o="",style:a={},children:l})=>{const[c,p]=b.useState(!1);b.useEffect(()=>{const m=()=>{const h=t(),w=h instanceof Window?h.pageYOffset:h.scrollTop;p(w>=i)},u=t();return u.addEventListener("scroll",m),m(),()=>{u.removeEventListener("scroll",m)}},[i,t]);const d=()=>{const m=t();m instanceof Window?window.scrollTo({top:0,behavior:"smooth"}):m.scrollTo({top:0,behavior:"smooth"}),s==null||s()};if(!c)return null;const n=e.jsx("div",{className:"bedi-back-top-content",children:e.jsx("div",{className:"bedi-back-top-icon",children:"↑"})});return e.jsx("div",{className:`bedi-back-top ${o}`,style:a,onClick:d,children:l||n})},he=({items:i,separator:s="/",className:t=""})=>{const o=a=>a===i.length-1?null:e.jsx("span",{className:"bedi-breadcrumb-separator",children:s});return e.jsx("nav",{className:`bedi-breadcrumb ${t}`,children:i.map((a,l)=>e.jsxs("span",{className:"bedi-breadcrumb-item",children:[a.href?e.jsx("a",{href:a.href,className:"bedi-breadcrumb-link",children:a.title}):e.jsx("span",{className:"bedi-breadcrumb-text",children:a.title}),o(l)]},a.key))})},me=({children:i,items:s,placement:t="bottom-left",trigger:o="click",disabled:a=!1,className:l=""})=>{const[c,p]=b.useState(!1),[d,n]=b.useState({top:0,left:0}),m=b.useRef(null),u=b.useRef(null),h=b.useRef(),w=()=>{if(!m.current||!u.current)return;const S=m.current.getBoundingClientRect(),E=u.current.getBoundingClientRect(),I=window.pageXOffset,C=window.pageYOffset,O=window.innerWidth,F=window.innerHeight,z=8;let N=0,M=0;if(t.startsWith("bottom")){const v=S.bottom+C+4;if(v+E.height>C+F-z){const T=S.top+C-E.height-4;T>=C+z?N=T:N=Math.max(C+z,C+F-E.height-z)}else N=v}else{const v=S.top+C-E.height-4;if(v<C+z){const T=S.bottom+C+4;T+E.height<=C+F-z?N=T:N=Math.max(C+z,C+z)}else N=v}if(t.endsWith("left")){const v=S.left+I;if(v+E.width>I+O-z){const T=S.right+I-E.width;T>=I+z?M=T:M=Math.max(I+z,I+O-E.width-z)}else M=v}else{const v=S.right+I-E.width;if(v<I+z){const T=S.left+I;T+E.width<=I+O-z?M=T:M=Math.max(I+z,I+z)}else M=v}n({top:N,left:M})},B=()=>{a||p(!0)},x=()=>{p(!1)},k=()=>{o==="click"&&(c?x():B())},r=S=>{o==="context"&&(S.preventDefault(),B())},j=(S,E)=>{var I;E.stopPropagation(),S.disabled||((I=S.onClick)==null||I.call(S),x())},y=()=>{o==="hover"&&(h.current&&clearTimeout(h.current),B())},f=()=>{o==="hover"&&(h.current=setTimeout(()=>{x()},100))},g=()=>{o==="hover"&&h.current&&clearTimeout(h.current)},$=()=>{o==="hover"&&x()};return b.useEffect(()=>{if(c){const S=setTimeout(()=>{w()},0),E=()=>w(),I=O=>{m.current&&!m.current.contains(O.target)&&u.current&&!u.current.contains(O.target)&&x()},C=O=>{O.key==="Escape"&&x()};return window.addEventListener("resize",E),document.addEventListener("mousedown",I),document.addEventListener("keydown",C),()=>{clearTimeout(S),window.removeEventListener("resize",E),document.removeEventListener("mousedown",I),document.removeEventListener("keydown",C)}}},[c]),b.useEffect(()=>()=>{h.current&&clearTimeout(h.current)},[]),e.jsxs("div",{ref:m,className:`bedi-dropdown-trigger ${a?"bedi-dropdown-disabled":""} ${l}`,onMouseEnter:y,onMouseLeave:f,onClick:k,onContextMenu:r,children:[i,e.jsx(L.AnimatePresence,{children:c&&e.jsx(L.motion.div,{ref:u,className:"bedi-dropdown-menu",initial:{opacity:0,scale:.95,y:-10},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.95,y:-10},transition:{duration:.15,ease:"easeOut"},style:{top:d.top,left:d.left},onMouseEnter:g,onMouseLeave:$,children:s.map((S,E)=>e.jsxs("div",{className:`bedi-dropdown-item ${S.disabled?"bedi-dropdown-item-disabled":""} ${S.danger?"bedi-dropdown-item-danger":""} ${S.divided?"bedi-dropdown-item-divided":""}`,onClick:I=>j(S,I),style:{animationDelay:`${E*30}ms`},children:[S.icon&&e.jsx("span",{className:"bedi-dropdown-item-icon",children:S.icon}),e.jsx("span",{className:"bedi-dropdown-item-label",children:S.label})]},S.key))})})]})},K=({eventKey:i,children:s,disabled:t=!1,icon:o,className:a="",style:l={},onClick:c})=>{const p=()=>{!t&&i&&(c==null||c(i))};return e.jsxs("div",{className:`bedi-menu-item ${t?"bedi-menu-item-disabled":""} ${a}`,style:l,onClick:p,children:[o&&e.jsx("span",{className:"bedi-menu-item-icon",children:o}),e.jsx("span",{className:"bedi-menu-item-content",children:s})]})},X=({eventKey:i,title:s,children:t,disabled:o=!1,icon:a,className:l="",style:c={},isOpen:p,onClick:d})=>{const[n,m]=b.useState(!1),u=p!==void 0?p:n,h=()=>{o||(i&&d?d(i):m(!n))};return e.jsxs("div",{className:`bedi-submenu ${u?"bedi-submenu-open":""} ${o?"bedi-submenu-disabled":""} ${l}`,style:c,children:[e.jsxs("div",{className:"bedi-submenu-title",onClick:h,children:[a&&e.jsx("span",{className:"bedi-submenu-icon",children:a}),e.jsx("span",{className:"bedi-submenu-title-content",children:s}),e.jsx("span",{className:"bedi-submenu-arrow",children:u?"▼":"▶"})]}),u&&e.jsx("div",{className:"bedi-submenu-children",children:t})]})},be=({mode:i="vertical",theme:s="light",defaultSelectedKeys:t=[],selectedKeys:o,defaultOpenKeys:a=[],openKeys:l,className:c="",style:p={},children:d,onSelect:n,onOpenChange:m})=>{const[u,h]=b.useState(o||t),[w,B]=b.useState(l||a),x=o||u,k=l||w,r=f=>{const g=[f];h(g),n==null||n(g)},j=f=>{const g=k.includes(f)?k.filter($=>$!==f):[...k,f];B(g),m==null||m(g)},y=["bedi-menu",`bedi-menu-${i}`,`bedi-menu-${s}`,c].filter(Boolean).join(" ");return e.jsx("div",{className:y,style:p,children:b.Children.map(d,f=>{if(b.isValidElement(f)){const g=f.props.eventKey||f.key;if(f.type===K)return b.cloneElement(f,{eventKey:g,onClick:r,className:`${f.props.className||""} ${g&&x.includes(g)?"bedi-menu-item-selected":""}`});if(f.type===X)return b.cloneElement(f,{eventKey:g,isOpen:g?k.includes(g):!1,onClick:j})}return f})})};function fe({current:i,total:s,pageSize:t=10,showSizeChanger:o=!1,showQuickJumper:a=!1,showTotal:l=!1,onChange:c,onShowSizeChange:p,size:d="medium"}){const[n,m]=b.useState(""),u=Math.ceil(s/t),h=r=>{r<1||r>u||c==null||c(r,t)},w=r=>{p==null||p(i,r)},B=()=>{const r=parseInt(n);isNaN(r)||(h(r),m(""))},x=()=>{const r=[];if(u>7)if(i<=4){for(let y=1;y<=5;y++)r.push(y);r.push("..."),r.push(u)}else if(i>=u-3){r.push(1),r.push("...");for(let y=u-4;y<=u;y++)r.push(y)}else{r.push(1),r.push("...");for(let y=i-1;y<=i+1;y++)r.push(y);r.push("..."),r.push(u)}else for(let y=1;y<=u;y++)r.push(y);return r},k=[10,20,50,100];return e.jsxs("div",{className:`bedi-pagination ${d}`,children:[l&&e.jsxs("div",{className:"bedi-pagination-total",children:["共 ",s," 条记录"]}),e.jsxs("div",{className:"bedi-pagination-pages",children:[e.jsx("button",{className:"bedi-pagination-btn",disabled:i===1,onClick:()=>h(i-1),children:"‹"}),x().map((r,j)=>e.jsx("div",{children:r==="..."?e.jsx("span",{className:"bedi-pagination-ellipsis",children:"..."}):e.jsx("button",{className:`bedi-pagination-page ${i===r?"active":""}`,onClick:()=>h(r),children:r})},j)),e.jsx("button",{className:"bedi-pagination-btn",disabled:i===u,onClick:()=>h(i+1),children:"›"})]}),a&&e.jsxs("div",{className:"bedi-pagination-jumper",children:["跳至",e.jsx("input",{type:"text",value:n,onChange:r=>m(r.target.value),onKeyPress:r=>r.key==="Enter"&&B(),className:"bedi-pagination-input"}),"页"]}),o&&e.jsx("div",{className:"bedi-pagination-sizer",children:e.jsx("select",{value:t,onChange:r=>w(Number(r.target.value)),className:"bedi-pagination-select",children:k.map(r=>e.jsxs("option",{value:r,children:[r," 条/页"]},r))})})]})}function xe({current:i,direction:s="horizontal",size:t="default",status:o="process",items:a,onChange:l}){const[c,p]=b.useState(null),d=u=>{var h;return(h=a[u])!=null&&h.status?a[u].status:u<i?"finish":u===i?o:"wait"},n=u=>{l&&u!==i&&l(u)},m=u=>{var B;const h=d(u),w=(B=a[u])==null?void 0:B.icon;if(w)return e.jsx("div",{className:`bedi-step-icon bedi-step-icon-custom ${h}`,children:w});switch(h){case"finish":return e.jsx("div",{className:`bedi-step-icon ${h}`,children:"✓"});case"error":return e.jsx("div",{className:`bedi-step-icon ${h}`,children:"✕"});case"process":return e.jsx("div",{className:`bedi-step-icon ${h}`,children:e.jsx("div",{className:"bedi-step-icon-spinner"})});default:return e.jsx("div",{className:`bedi-step-icon ${h}`,children:u+1})}};return e.jsx("div",{className:`bedi-steps bedi-steps-${s} bedi-steps-${t}`,children:a.map((u,h)=>{const w=d(h),B=h===i,x=l!==void 0;return e.jsxs(L.motion.div,{className:`bedi-step-item ${w} ${B?"active":""} ${x?"clickable":""}`,initial:{opacity:0,x:s==="horizontal"?-20:0},animate:{opacity:1,x:0},transition:{duration:.3,delay:h*.1},onClick:()=>n(h),onMouseEnter:()=>p(h),onMouseLeave:()=>p(null),children:[e.jsx("div",{className:"bedi-step-tail",children:h<a.length-1&&e.jsx("div",{className:`bedi-step-tail-line ${d(h+1)==="finish"?"finish":""}`})}),e.jsx("div",{className:"bedi-step-head",children:e.jsx("div",{className:"bedi-step-head-inner",children:m(h)})}),e.jsxs("div",{className:"bedi-step-main",children:[e.jsx("div",{className:"bedi-step-title",children:u.title}),u.description&&e.jsx("div",{className:"bedi-step-description",children:u.description})]})]},h)})})}const H=({key:i,icon:s,title:t,onClick:o,className:a="",style:l={}})=>e.jsx("div",{className:`bedi-sticky-tool-item ${a}`,style:l,onClick:o,title:t,children:s}),J=({position:i="right",offset:s=100,direction:t="vertical",className:o="",style:a={},children:l})=>{const c=["bedi-sticky-tool",`bedi-sticky-tool-${i}`,`bedi-sticky-tool-${t}`,o].filter(Boolean).join(" "),p={[i]:s,...a};return e.jsx("div",{className:c,style:p,children:b.Children.map(l,d=>b.isValidElement(d)&&d.type===H?d:null)})};J.Item=H;function ge({items:i,defaultActiveKey:s,onChange:t,className:o=""}){var d;const[a,l]=b.useState(s||((d=i[0])==null?void 0:d.key)),c=(n,m)=>{m||(l(n),t==null||t(n))},p=i.find(n=>n.key===a);return e.jsxs("div",{className:`bedi-tabs ${o}`,children:[e.jsxs("div",{className:"bedi-tabs-nav",children:[i.map(n=>e.jsx("button",{className:`bedi-tab-button ${a===n.key?"active":""} ${n.disabled?"disabled":""}`,onClick:()=>c(n.key,n.disabled),disabled:n.disabled,children:n.label},n.key)),e.jsx(L.motion.div,{className:"bedi-tab-indicator",layoutId:"tab-indicator",style:{left:`${i.findIndex(n=>n.key===a)*(100/i.length)}%`,width:`${100/i.length}%`}})]}),e.jsx("div",{className:"bedi-tabs-content",children:e.jsx(L.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:.3},children:p==null?void 0:p.children},a)})]})}function ve({label:i,className:s="",...t}){return e.jsxs("label",{className:`bedi-checkbox ${s}`,children:[e.jsx("input",{type:"checkbox",className:"bedi-checkbox-input",...t}),e.jsx("span",{className:"bedi-checkbox-box",children:e.jsx("svg",{className:"bedi-checkbox-icon",viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2 6L5 9L10 3",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),i&&e.jsx("span",{className:"bedi-checkbox-label",children:i})]})}function je({value:i="",onChange:s,placeholder:t="请选择日期",disabled:o=!1,size:a="medium",format:l="YYYY-MM-DD",label:c,error:p}){const[d,n]=b.useState(!1),[m,u]=b.useState(i),[h,w]=b.useState(new Date),B=f=>{u(f),s==null||s(f),n(!1)},x=f=>new Date(f.getFullYear(),f.getMonth()+1,0).getDate(),k=f=>new Date(f.getFullYear(),f.getMonth(),1).getDay(),r=()=>{const f=x(h),g=k(h),$=[];for(let S=0;S<g;S++)$.push(null);for(let S=1;S<=f;S++)$.push(S);return $},j=f=>{const g=h.getFullYear(),$=String(h.getMonth()+1).padStart(2,"0"),S=String(f).padStart(2,"0");return`${g}-${$}-${S}`},y=f=>{w(g=>{const $=new Date(g);return f==="prev"?$.setMonth(g.getMonth()-1):$.setMonth(g.getMonth()+1),$})};return e.jsxs("div",{className:`bedi-datepicker-container ${a}`,children:[c&&e.jsx("label",{className:"bedi-datepicker-label",children:c}),e.jsxs("div",{className:"bedi-datepicker-input-wrapper",children:[e.jsx("input",{type:"text",value:m,placeholder:t,disabled:o,className:`bedi-datepicker-input ${p?"error":""}`,onClick:()=>!o&&n(!d),readOnly:!0}),e.jsx("span",{className:"bedi-datepicker-icon",children:"📅"})]}),p&&e.jsx("span",{className:"bedi-datepicker-error",children:p}),d&&!o&&e.jsxs(L.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},className:"bedi-datepicker-calendar",children:[e.jsxs("div",{className:"bedi-datepicker-header",children:[e.jsx("button",{className:"bedi-datepicker-nav-btn",onClick:()=>y("prev"),children:"‹"}),e.jsx("div",{className:"bedi-datepicker-month-year",children:h.toLocaleDateString("zh-CN",{year:"numeric",month:"long"})}),e.jsx("button",{className:"bedi-datepicker-nav-btn",onClick:()=>y("next"),children:"›"})]}),e.jsx("div",{className:"bedi-datepicker-weekdays",children:["日","一","二","三","四","五","六"].map(f=>e.jsx("div",{className:"bedi-datepicker-weekday",children:f},f))}),e.jsx("div",{className:"bedi-datepicker-days",children:r().map((f,g)=>e.jsx("div",{className:"bedi-datepicker-day-cell",children:f&&e.jsx("button",{className:`bedi-datepicker-day ${m===j(f)?"selected":""}`,onClick:()=>B(j(f)),children:f})},g))})]})]})}function ye({label:i,error:s,prefix:t,suffix:o,addonBefore:a,addonAfter:l,className:c="",...p}){return e.jsxs("div",{className:"bedi-input-wrapper",children:[i&&e.jsx("label",{className:"bedi-input-label",children:i}),e.jsxs("div",{className:`bedi-input-container ${s?"bedi-input-error":""}`,children:[a&&e.jsx("span",{className:"bedi-input-addon",children:a}),t&&e.jsx("span",{className:"bedi-input-prefix",children:t}),e.jsx("input",{className:`bedi-input ${c}`,...p}),o&&e.jsx("span",{className:"bedi-input-suffix",children:o}),l&&e.jsx("span",{className:"bedi-input-addon",children:l})]}),s&&e.jsx("span",{className:"bedi-input-error-text",children:s})]})}function we({label:i,className:s="",...t}){return e.jsxs("label",{className:`bedi-radio ${s}`,children:[e.jsx("input",{type:"radio",className:"bedi-radio-input",...t}),e.jsx("span",{className:"bedi-radio-circle",children:e.jsx("span",{className:"bedi-radio-dot"})}),i&&e.jsx("span",{className:"bedi-radio-label",children:i})]})}function ke({label:i,error:s,options:t,className:o="",...a}){return e.jsxs("div",{className:"bedi-select-wrapper",children:[i&&e.jsx("label",{className:"bedi-select-label",children:i}),e.jsxs("div",{className:`bedi-select-container ${s?"bedi-select-error":""}`,children:[e.jsx("select",{className:`bedi-select ${o}`,...a,children:t.map(l=>e.jsx("option",{value:l.value,disabled:l.disabled,children:l.label},l.value))}),e.jsx("span",{className:"bedi-select-arrow",children:e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2 4L6 8L10 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),s&&e.jsx("span",{className:"bedi-select-error-text",children:s})]})}function Ne({value:i,defaultValue:s=0,min:t=0,max:o=100,step:a=1,disabled:l=!1,marks:c,included:p=!0,vertical:d=!1,reverse:n=!1,tooltip:m=!0,onChange:u,onChangeComplete:h}){const[w,B]=b.useState(s),[x,k]=b.useState(!1),[r,j]=b.useState(!1),y=b.useRef(null),f=b.useRef(null),g=i!==void 0?i:w,$=(v,T)=>{if(!f.current)return g;const P=f.current.getBoundingClientRect();let A;d?A=n?v-P.left:P.right-v:A=n?P.right-v:v-P.left;const W=Math.max(0,Math.min(1,A/P.width)),R=t+W*(o-t),Z=Math.round(R/a)*a;return Math.max(t,Math.min(o,Z))},S=v=>{l||(v.preventDefault(),k(!0),j(!0),C(v.clientX,v.clientY))},E=v=>{!x||l||C(v.clientX,v.clientY)},I=v=>{if(!x||l)return;k(!1),j(!1);const T=$(v.clientX,v.clientY);h==null||h(T)},C=(v,T)=>{const P=$(v);P!==g&&(i===void 0&&B(P),u==null||u(P))},O=()=>(g-t)/(o-t)*100,F=()=>{const v=O();return d?{[n?"left":"right"]:`${100-v}%`,[n?"right":"left"]:`${v}%`}:{[n?"right":"left"]:0,[n?"left":"right"]:`${100-v}%`}},z=()=>{const v=O();return d?{[n?"left":"right"]:`${v}%`}:{[n?"right":"left"]:`${v}%`}},N=()=>{if(!m)return null;const v=typeof m=="function"?m(g):g;return e.jsx("div",{className:`bedi-slider-tooltip ${r?"visible":""}`,children:v})},M=()=>{if(!c)return null;const v=Object.entries(c),T=v.length>5;return e.jsx("div",{className:"bedi-slider-marks","data-dense":T,children:v.map(([P,A])=>{const W=(Number(P)-t)/(o-t)*100,R=T&&v.length>8;return e.jsxs("div",{className:"bedi-slider-mark","data-overlap":R,style:{[d?n?"left":"right":n?"right":"left"]:`${W}%`},children:[e.jsx("div",{className:"bedi-slider-mark-dot"}),!R&&e.jsx("div",{className:"bedi-slider-mark-text",children:A})]},P)})})};return b.useEffect(()=>{if(x)return document.addEventListener("mousemove",E),document.addEventListener("mouseup",I),()=>{document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",I)}},[x]),e.jsxs("div",{ref:y,className:`bedi-slider ${d?"vertical":"horizontal"} ${l?"disabled":""}`,onMouseDown:S,children:[e.jsxs("div",{className:"bedi-slider-rail",ref:f,children:[p&&e.jsx("div",{className:"bedi-slider-track",style:F()}),e.jsx("div",{className:`bedi-slider-handle ${x?"dragging":""}`,style:z(),onMouseEnter:()=>j(!0),onMouseLeave:()=>j(!1),children:N()})]}),M()]})}function Be({label:i,size:s="medium",className:t="",...o}){return e.jsxs("label",{className:`bedi-switch bedi-switch-${s} ${t}`,children:[e.jsx("input",{type:"checkbox",className:"bedi-switch-input",...o}),e.jsx("span",{className:"bedi-switch-slider"}),i&&e.jsx("span",{className:"bedi-switch-label",children:i})]})}function Se({accept:i,multiple:s=!1,disabled:t=!1,drag:o=!1,listType:a="text",maxCount:l,maxSize:c,showUploadList:p=!0,customRequest:d,beforeUpload:n,onChange:m,onPreview:u,onRemove:h}){const[w,B]=b.useState([]),[x,k]=b.useState(!1),r=b.useRef(null),j=N=>{if(N===0)return"0 B";const M=1024,v=["B","KB","MB","GB"],T=Math.floor(Math.log(N)/Math.log(M));return parseFloat((N/Math.pow(M,T)).toFixed(2))+" "+v[T]},y=(N,M)=>{let v=0;const T=setInterval(()=>{v+=Math.random()*30,v>=100?(v=100,clearInterval(T),M.onSuccess(URL.createObjectURL(N))):M.onProgress(v)},200)},f=N=>{const M=Array.from(N);if(l&&w.length+M.length>l){alert(`最多只能上传 ${l} 个文件`);return}M.forEach(async v=>{if(c&&v.size>c){alert(`文件 ${v.name} 超过大小限制 ${j(c)}`);return}if(n&&await n(v)===!1)return;const T={id:Math.random().toString(36).substr(2,9),name:v.name,size:v.size,status:"uploading",progress:0};B(A=>{const W=[...A,T];return m==null||m(W),W});const P={file:v,onProgress:A=>{B(W=>W.map(R=>R.id===T.id?{...R,progress:A}:R))},onSuccess:A=>{B(W=>W.map(R=>R.id===T.id?{...R,status:"done",progress:100,url:A}:R)),m==null||m(w)},onError:A=>{B(W=>W.map(R=>R.id===T.id?{...R,status:"error",error:A}:R)),m==null||m(w)}};d?d(P):y(v,P)})},g=N=>{N.target.files&&f(N.target.files),N.target.value=""},$=N=>{N.preventDefault(),t||k(!0)},S=N=>{N.preventDefault(),k(!1)},E=N=>{N.preventDefault(),k(!1),!t&&N.dataTransfer.files&&f(N.dataTransfer.files)},I=()=>{var N;t||(N=r.current)==null||N.click()},C=N=>{const M=w.filter(v=>v.id!==N.id);B(M),m==null||m(M),h==null||h(N)},O=N=>{u==null||u(N)},F=()=>o?e.jsxs("div",{className:`bedi-upload-dragger ${x?"drag-over":""} ${t?"disabled":""}`,onDragOver:$,onDragLeave:S,onDrop:E,onClick:I,children:[e.jsx("div",{className:"bedi-upload-drag-icon",children:e.jsx("div",{className:"bedi-upload-icon",children:"📁"})}),e.jsx("p",{className:"bedi-upload-text",children:"点击或拖拽文件到此区域上传"}),e.jsxs("p",{className:"bedi-upload-hint",children:[i&&`支持格式: ${i}`,c&&`,单个文件不超过 ${j(c)}`]})]}):e.jsxs("button",{className:`bedi-upload-btn ${t?"disabled":""}`,onClick:I,disabled:t,children:[e.jsx("span",{className:"bedi-upload-icon",children:"📤"}),e.jsx("span",{children:"选择文件"})]}),z=()=>p?e.jsx("div",{className:"bedi-upload-list",children:w.map(N=>e.jsxs(L.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},className:`bedi-upload-list-item ${N.status}`,children:[e.jsxs("div",{className:"bedi-upload-list-item-info",children:[e.jsx("div",{className:"bedi-upload-list-item-name",children:N.name}),e.jsx("div",{className:"bedi-upload-list-item-size",children:j(N.size)}),N.status==="uploading"&&e.jsx("div",{className:"bedi-upload-progress",children:e.jsx("div",{className:"bedi-upload-progress-bar",style:{width:`${N.progress||0}%`}})}),N.status==="error"&&e.jsx("div",{className:"bedi-upload-error",children:N.error||"上传失败"})]}),e.jsxs("div",{className:"bedi-upload-list-item-actions",children:[N.status==="done"&&a==="picture"&&e.jsx("button",{className:"bedi-upload-action-btn",onClick:()=>O(N),children:"👁️"}),e.jsx("button",{className:"bedi-upload-action-btn",onClick:()=>C(N),children:"❌"})]})]},N.id))}):null;return e.jsxs("div",{className:`bedi-upload bedi-upload-${a}`,children:[e.jsx("input",{ref:r,type:"file",accept:i,multiple:s,disabled:t,onChange:g,style:{display:"none"}}),F(),z()]})}const De=({src:i,alt:s="",size:t="default",shape:o="circle",icon:a,children:l,className:c="",style:p})=>{const d=()=>typeof t=="number"?"":`bedi-avatar-size-${t}`,n=()=>typeof t=="number"?{width:t,height:t,fontSize:t*.4}:{},m=()=>i?e.jsx("img",{src:i,alt:s,className:"bedi-avatar-image",onError:u=>{u.currentTarget.style.display="none"}}):a?e.jsx("div",{className:"bedi-avatar-icon",children:a}):l?e.jsx("div",{className:"bedi-avatar-text",children:l}):e.jsx("div",{className:"bedi-avatar-icon",children:"👤"});return e.jsx("div",{className:`bedi-avatar ${d()} bedi-avatar-shape-${o} ${c}`,style:{...n(),...p},children:m()})},$e=({children:i,count:s=0,dot:t=!1,color:o,showZero:a=!1,max:l=99,status:c,text:p,className:d=""})=>{const n=()=>typeof s=="string"?s:s>l?`${l}+`:s.toString(),m=()=>t?!0:!(s===0&&!a),u=()=>c?e.jsxs("span",{className:`bedi-badge-status bedi-badge-status-${c}`,children:[e.jsx("span",{className:"bedi-badge-status-dot"}),p&&e.jsx("span",{className:"bedi-badge-status-text",children:p})]}):m()?e.jsx("span",{className:`bedi-badge ${t?"bedi-badge-dot":"bedi-badge-count"} ${d}`,style:o?{backgroundColor:o}:{},children:!t&&n()}):null;return i?e.jsxs("span",{className:"bedi-badge-wrapper",children:[i,u()]}):u()};function Ie({image:i,imageStyle:s,description:t="暂无数据",children:o}){const a=()=>i?e.jsx("div",{className:"bedi-empty-image",style:s,children:i}):e.jsx("div",{className:"bedi-empty-image",style:s,children:e.jsx("div",{className:"bedi-empty-image-default",children:e.jsxs("div",{className:"bedi-empty-image-box",children:[e.jsx("div",{className:"bedi-empty-image-lid"}),e.jsx("div",{className:"bedi-empty-image-body"})]})})}),l=()=>t?e.jsx("div",{className:"bedi-empty-description",children:t}):null,c=()=>o?e.jsx("div",{className:"bedi-empty-footer",children:o}):null;return e.jsx(L.motion.div,{className:"bedi-empty",initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},transition:{duration:.3},children:e.jsxs("div",{className:"bedi-empty-content",children:[a(),l(),c()]})})}function Te({percent:i,showInfo:s=!0,status:t="normal",strokeWidth:o=8,className:a=""}){const l=Math.min(100,Math.max(0,i)),c=()=>t==="success"?"var(--color-green-6)":t==="error"?"var(--color-red-6)":"var(--color-primary)";return e.jsxs("div",{className:`bedi-progress ${a}`,children:[e.jsx("div",{className:"bedi-progress-outer",children:e.jsx("div",{className:"bedi-progress-inner",style:{height:`${o}px`},children:e.jsx("div",{className:"bedi-progress-bg",style:{width:`${l}%`,background:c()}})})}),s&&e.jsxs("span",{className:"bedi-progress-text",style:{color:c()},children:[l,"%"]})]})}function Ee({value:i,defaultValue:s=0,count:t=5,allowHalf:o=!1,allowClear:a=!1,disabled:l=!1,size:c="medium",character:p="★",onChange:d}){const[n,m]=b.useState(s),u=i!==void 0?i:n,h=b.useRef(null),w=b.useCallback(k=>{if(!h.current)return 0;const r=h.current.getBoundingClientRect(),j=r.width/t,y=k-r.left,f=Math.floor(y/j);let g=f+1;return o&&y-f*j<j/2&&(g=f+.5),Math.max(0,Math.min(t,g))},[o,t]),B=b.useCallback(k=>{if(l)return;const r=w(k.clientX);a&&r===u?(i===void 0&&m(0),d==null||d(0)):(i===void 0&&m(r),d==null||d(r))},[l,a,u,i,d,w]),x=b.useCallback(k=>{const r=k+1;return o?u>=r?"full":u>=r-.5?"half":"empty":u>=r?"full":"empty"},[o,u]);return e.jsx("div",{ref:h,className:`bedi-rate ${c} ${l?"disabled":""}`,onClick:B,children:Array.from({length:t},(k,r)=>e.jsx("div",{className:"bedi-rate-star-wrapper",children:e.jsx("div",{className:`bedi-rate-star ${x(r)}`,children:e.jsx("span",{className:"bedi-rate-star",children:p})})},r))})}function Ce({loading:i=!0,active:s=!0,children:t,avatar:o=!1,paragraph:a=!0,title:l=!0,round:c=!1}){const[p,d]=b.useState([]);b.useEffect(()=>{if(i){const u=[];if(l){const h=typeof l=="object"?l.width:"38%";u.push({key:"title",width:typeof h=="number"?`${h}px`:h})}if(a){const h=typeof a=="object"?a:{rows:3},w=h.rows||3,B=Array.isArray(h.width)?h.width:[h.width];for(let x=0;x<w;x++){const k=B[x]||(x===w-1?"61%":"100%");u.push({key:`paragraph-${x}`,width:typeof k=="number"?`${k}px`:k})}}d(u)}else d([])},[i,l,a]);const n=()=>{if(!o)return null;const u=typeof o=="object"?o:{},{size:h="default",shape:w="circle"}=u;return e.jsx("div",{className:`bedi-skeleton-avatar bedi-skeleton-avatar-${h} bedi-skeleton-avatar-${w}`,children:s&&e.jsx("div",{className:"bedi-skeleton-avatar-shimmer"})})},m=()=>e.jsxs("div",{className:`bedi-skeleton ${c?"bedi-skeleton-round":""}`,children:[o&&e.jsxs("div",{className:"bedi-skeleton-header",children:[n(),e.jsx("div",{className:"bedi-skeleton-content",children:p.map(u=>e.jsx("div",{className:"bedi-skeleton-item",style:{width:u.width},children:s&&e.jsx("div",{className:"bedi-skeleton-shimmer"})},u.key))})]}),!o&&e.jsx("div",{className:"bedi-skeleton-content",children:p.map(u=>e.jsx("div",{className:"bedi-skeleton-item",style:{width:u.width},children:s&&e.jsx("div",{className:"bedi-skeleton-shimmer"})},u.key))})]});return i?m():e.jsx(e.Fragment,{children:t})}function Me({columns:i,dataSource:s,rowKey:t="id",loading:o=!1,size:a="medium",bordered:l=!1,striped:c=!1,hoverable:p=!1,pagination:d,onChange:n}){const[m,u]=b.useState(""),[h,w]=b.useState("asc"),B=(r,j)=>typeof t=="function"?t(r):r[t]||j,x=r=>{if(!r.sorter)return;const j=m===r.dataIndex&&h==="asc"?"desc":"asc";u(r.dataIndex),w(j),[...s].sort((y,f)=>{const g=y[r.dataIndex],$=f[r.dataIndex];return typeof g=="number"&&typeof $=="number"?j==="asc"?g-$:$-g:j==="asc"?String(g).localeCompare(String($)):String($).localeCompare(String(g))}),n==null||n(d,{},{field:r.dataIndex,order:j})},k=(r,j,y)=>{const f=j[r.dataIndex];return r.render?r.render(f,j,y):f};return o?e.jsxs("div",{className:"bedi-table-loading",children:[e.jsx("div",{className:"bedi-table-spinner"}),e.jsx("div",{children:"加载中..."})]}):e.jsxs("div",{className:`bedi-table-container ${a} ${l?"bordered":""} ${c?"striped":""} ${p?"hoverable":""}`,children:[e.jsx("div",{className:"bedi-table-wrapper",children:e.jsxs("table",{className:"bedi-table",children:[e.jsx("thead",{children:e.jsx("tr",{children:i.map((r,j)=>e.jsx("th",{style:{width:r.width},className:r.fixed?`fixed-${r.fixed}`:"",children:e.jsxs("div",{className:"bedi-table-header-cell",children:[e.jsx("span",{children:r.title}),r.sorter&&e.jsxs("button",{className:`bedi-table-sorter ${m===r.dataIndex?`sorted-${h}`:""}`,onClick:()=>x(r),children:[e.jsx("span",{className:"bedi-sorter-up",children:"▲"}),e.jsx("span",{className:"bedi-sorter-down",children:"▼"})]})]})},r.key||j))})}),e.jsx("tbody",{children:s.map((r,j)=>e.jsx(L.motion.tr,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2,delay:j*.05},children:i.map((y,f)=>e.jsx("td",{className:y.fixed?`fixed-${y.fixed}`:"",children:k(y,r,j)},y.key||f))},B(r,j)))})]})}),d&&e.jsx("div",{className:"bedi-table-pagination",children:e.jsxs("div",{className:"bedi-pagination-info",children:["第 ",d.current," 页,共 ",Math.ceil(d.total/d.pageSize)," 页"]})})]})}function Le({children:i,color:s="default",closable:t=!1,onClose:o,className:a=""}){return e.jsxs("span",{className:`bedi-tag bedi-tag-${s} ${a}`,children:[i,t&&e.jsx("button",{className:"bedi-tag-close",onClick:o,children:e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M3 3L9 9M9 3L3 9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})}const ze=({children:i,title:s,placement:t="top",trigger:o="hover",visible:a,onVisibleChange:l,className:c="",style:p})=>{const[d,n]=b.useState(!1),[m,u]=b.useState({top:0,left:0}),h=b.useRef(null),w=b.useRef(null),B=a!==void 0,x=B?a:d,k=()=>{if(!h.current||!w.current)return;const g=h.current.getBoundingClientRect(),$=w.current.getBoundingClientRect(),S=window.pageXOffset,E=window.pageYOffset;let I=0,C=0;switch(t){case"top":I=g.top+E-$.height-8,C=g.left+S+(g.width-$.width)/2;break;case"bottom":I=g.bottom+E+8,C=g.left+S+(g.width-$.width)/2;break;case"left":I=g.top+E+(g.height-$.height)/2,C=g.left+S-$.width-8;break;case"right":I=g.top+E+(g.height-$.height)/2,C=g.right+S+8;break}u({top:I,left:C})},r=()=>{B||n(!0),l==null||l(!0)},j=()=>{B||n(!1),l==null||l(!1)},y=()=>{o==="click"&&(x?j():r())};b.useEffect(()=>{if(x){k();const g=()=>k();return window.addEventListener("resize",g),window.addEventListener("scroll",k),()=>{window.removeEventListener("resize",g),window.removeEventListener("scroll",k)}}},[x,t]);const f={ref:h,className:"bedi-tooltip-trigger",onMouseEnter:o==="hover"?r:void 0,onMouseLeave:o==="hover"?j:void 0,onClick:o==="click"?y:void 0};return e.jsxs(e.Fragment,{children:[e.jsx("div",{...f,children:i}),x&&e.jsx("div",{ref:w,className:`bedi-tooltip bedi-tooltip-${t} ${c}`,style:{top:m.top,left:m.left,...p},children:e.jsxs("div",{className:"bedi-tooltip-content",children:[e.jsx("div",{className:"bedi-tooltip-arrow"}),e.jsx("div",{className:"bedi-tooltip-inner",children:s})]})})]})};function Re({type:i="info",title:s,children:t,closable:o=!1,onClose:a,showIcon:l=!0,className:c=""}){const p={info:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[e.jsx("circle",{cx:"10",cy:"10",r:"8",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M10 6V10M10 14H10.01",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),success:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[e.jsx("circle",{cx:"10",cy:"10",r:"8",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M6 10L9 13L14 7",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),warning:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[e.jsx("path",{d:"M10 2L2 17H18L10 2Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),e.jsx("path",{d:"M10 8V11M10 14H10.01",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),error:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[e.jsx("circle",{cx:"10",cy:"10",r:"8",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M7 7L13 13M13 7L7 13",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})};return e.jsxs("div",{className:`bedi-alert bedi-alert-${i} ${c}`,children:[l&&e.jsx("span",{className:"bedi-alert-icon",children:p[i]}),e.jsxs("div",{className:"bedi-alert-content",children:[s&&e.jsx("div",{className:"bedi-alert-title",children:s}),t&&e.jsx("div",{className:"bedi-alert-message",children:t})]}),o&&e.jsx("button",{className:"bedi-alert-close",onClick:a,children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:e.jsx("path",{d:"M3 3L11 11M11 3L3 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})}const Pe=({open:i,onClose:s,title:t,footer:o,width:a=520,centered:l=!1,maskClosable:c=!0,closable:p=!0,children:d,className:n="",style:m})=>{b.useEffect(()=>(i?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[i]);const u=w=>{w.target===w.currentTarget&&c&&s()},h=()=>{p&&s()};return e.jsx(L.AnimatePresence,{children:i&&e.jsx(L.motion.div,{className:"bedi-modal-mask",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},onClick:u,children:e.jsxs(L.motion.div,{className:`bedi-modal-content ${l?"bedi-modal-centered":""} ${n}`,initial:{scale:.8,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.8,opacity:0},transition:{duration:.2},style:{width:a,...m},onClick:w=>w.stopPropagation(),children:[t&&e.jsxs("div",{className:"bedi-modal-header",children:[e.jsx("div",{className:"bedi-modal-title",children:t}),p&&e.jsx("button",{className:"bedi-modal-close",onClick:h,children:"×"})]}),e.jsx("div",{className:"bedi-modal-body",children:d}),o&&e.jsx("div",{className:"bedi-modal-footer",children:o})]})})})},Q=b.createContext(void 0);function Ae({children:i}){const[s,t]=b.useState(()=>{const a=localStorage.getItem("theme");return a||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")});b.useEffect(()=>{document.documentElement.setAttribute("data-theme",s),localStorage.setItem("theme",s)},[s]);const o=()=>{t(a=>a==="light"?"dark":"light")};return e.jsx(Q.Provider,{value:{theme:s,toggleTheme:o},children:i})}function Oe(){const i=b.useContext(Q);if(!i)throw new Error("useTheme must be used within ThemeProvider");return i}const We={zh:{nav:{home:"首页",gettingStarted:"快速上手",design:"设计",components:"基本组件"},home:{hero:{title:"BEDI Design System",subtitle:"笃定感 · 前沿性 场景化 · 适配性 想象力 · 创造性 情感化 · 包容性",description:`BEDI Design System 是北电数智设计语言,核心理念是"建设数字中国",通过在算力和云服务上的不断突破,催化行业新生态的形成,让行业进化成为可能,释放数字改变世界的力量,为经济繁荣和人民生活提升开辟新的可能性。我们的愿景是"创新驱动的算力、云及数字化服务一流高科技企业,打造国企改革新典范。"
51
+
52
+ 基于核心定位与业务特性,AI 产品设计语言需紧扣"国有科技属性、产业赋能本质、高效协同能力、科技向善期盼"四大核心,用户体验设计必须体现长期投资的保障和国家级的安全可靠。这要求用户体验设计必须是:<strong>"严谨可靠、数据驱动又充满人文关怀的工业级美学"</strong>`,newDescription:"这是一个新的段落,用于描述BEDI Design System的其他特性和优势。通过这个新的段落,我们可以更全面地了解BEDI Design System的功能和特点。",getStarted:"开始使用",viewDocs:"查看设计文档"},features:{title:"核心特性",subtitle:"笃定感 · 前沿性 场景化 · 适配性 想象力 · 创造性 情感化 · 包容性",comprehensive:{title:'前沿活力 创新笃定 - <span class="highlight-blue">国有科技</span>',description:"视觉上传递国有企业的稳重感、可信赖的专业度,还要 表达科技行业的创新与活力 和前沿性。"},components:{title:'场景贴合 价值共生 - <span class="highlight-blue">产业赋能</span>',description:"产品设计上体现在各个行业 场景适配度。以优质的产品 助力产业升级、释放价值, 用深度的融合性推动 AI 与实 体经济中的场景。"},accessible:{title:'流畅聚焦 高效闭环 - <span class="highlight-blue">高效协同</span>',description:'交互设计上注意标准化和易用性,体现算力、算法、数 据与应用的全链路顺畅协作, "打通模型落地最后一 公里"提升业务效率。'},customizable:{title:'温暖普惠 人文关怀 - <span class="highlight-blue">科技向善</span>',description:'整体体验打破技术冰冷感,用情感化设计将人文关怀融入体验"让"善意"成为新竞争力" 设计应包容更多人群,减少不必要的操作和专业术语。'},responsive:{title:"响应式设计",description:"采用移动优先策略,完美适配各种屏幕尺寸和设备,提供一致的用户体验"},performance:{title:"性能优化",description:"精心优化的组件代码,Tree-shaking支持,确保应用快速加载和流畅运行"}},cta:{title:"开始使用BEDI Design System",description:"加入数千名设计师和开发者,使用 BEDI Design System 打造卓越的产品体验"}},design:{title:"设计规范",subtitle:"统一的设计语言,构建卓越的产品体验",nav:{values:"Values 价值观",color:"Color 色彩",fonts:"Fonts 字体",motion:"Motion 动效",icon:"Icon 图标",layout:"Layout 布局",darkMode:"Dark Mode 深色模式"},values:{title:"Values 价值观",description:"BEDI 设计系统的核心价值理念,指导我们的设计决策和产品方向。",sectionTitle:"BEDI 价值观体系",sectionDescription:'BEDI Design System 是北电数智设计语言,核心理念是"建设数字中国",通过在算力和云服务上的不断突破,催化行业新生态的形成,让行业进化成为可能,释放数字改变世界的力量,为经济繁荣和人民生活提升开辟新的可能性。我们的愿景是"创新驱动的算力、云及数字化服务一流高科技企业,打造国企改革新典范。"<br><br>基于核心定位与业务特性,AI 产品设计语言需紧扣"国有科技属性、产业赋能本质、高效协同能力、科技向善期盼"四大核心,用户体验设计必须体现长期投资的保障和国家级的安全可靠。这要求用户体验设计必须是:<strong>"严谨可靠、数据驱动又充满人文关怀的工业级美学"</strong>',principle1:{title:'前沿活力 创新笃定 - <span class="highlight-blue">国有科技</span>',desc:"视觉上传递国有企业的稳重感、可信赖的专业度,还要 表达科技行业的创新与活力 和前沿性。"},principle2:{title:'场景贴合 价值共生 - <span class="highlight-blue">产业赋能</span>',desc:"产品设计上体现在各个行业 场景适配度。以优质的产品 助力产业升级、释放价值, 用深度的融合性推动 AI 与实 体经济中的场景。"},principle3:{title:'流畅聚焦 高效闭环 - <span class="highlight-blue">高效协同</span>',desc:'交互设计上注意标准化和易用性,体现算力、算法、数 据与应用的全链路顺畅协作, "打通模型落地最后一 公里"提升业务效率。'},principle4:{title:'温暖普惠 人文关怀 - <span class="highlight-blue">科技向善</span>',desc:'整体体验打破技术冰冷感,用情感化设计将人文关怀融入体验"让"善意"成为新竞争力" 设计应包容更多人群,减少不必要的操作和专业术语。'}},colors:{title:"Color 色彩",subtitle:"色彩在产品中起到传递信息、创建层级、表达情感、构建一致性的目的。",overview:{title:"概述",description:"BDesign 的色彩体系搭建遵循了 BDesign 美观、高效、动态、直观的价值观,充分考虑色彩的应用需求,符合无障碍标准,提供了一套定义完整、开箱即用的官方色板。"},officialPalette:{title:"BDesign 官方色板",description:"BDesign 官方色板是一套广泛适用于中后台业务场景的默认配色。包含了主题色、功能色、中性色、扩展色4部分。"},themeColor:{title:"主题色",description:"主题色是产品中最核心、最高频使用的颜色,它常用于强调信息、引导操作,并在很大程度上决定了产品整体的基调和风格。BDesign 以北电蓝作为默认主题色,蕴含了国有科技、产业赋能、高效协同、科技向善的理念,其笃定、中性的气质,在中后台设计中具有广泛的普适性。",beidianBlue:{name:"北电蓝",cmyk:"C92 M51 Y0 K0",rgb:"R0 G117 B255",pantone:"Pantone 285C",hex:"#0075ff"}},functionalColor:{title:"功能色",description:["功能色是指用于特定场景、表达特殊语义的颜色,例如成功、失败、告警、链接等状态。我们定义了4种功能色,在遵循色彩通用含义选取色相的基础上,从视觉一致性的角度选取了与品牌色更具一致关系的色调。","在 BDesign 色彩系统中,每个功能色扩展10级色阶,足够覆盖界面设计中各需求场景。色阶的制定采用了 HCT 色彩空间,结合不同色相下饱和度及亮度差值拟合出优化曲线,保证色彩变化均匀,多色之间亮度均等。"]},extendedColors:{title:"扩展色",description:"扩展色是一系列由功能色扩展而成的颜色。在有更多颜色需求的场景中(如数据可视化场景、插画场景)。同样采用了 HCT 及插值拟合曲线的方法,除了功能色蓝、红、黄、绿之外,BDesign 色彩体系扩展至 8 种主要颜色,另外有紫色,天蓝色、黄色、粉红色扩展色。每个扩展色均为 10 级色阶,保证色彩变化均匀,多色之间亮度均等。"},applicationGuide:{title:"应用指南",uiGuide:{title:"UI 应用指南",description:"在 BDesign 中,主题蓝是主要的交互颜色,并且因为组件实际情况的复杂性,我们使用 Design Token 规范了颜色运用规则。为了方便进行管理和阅读,我们定义了全局语义 Token 和组件 Token,这样只需要理解了全局语义 Token 的含义,就能快速理解组件 Token 的用途。"},dataVizGuide:{title:"数据可视化应用指南",description:"数据可视化场景中,颜色的使用需要更加谨慎。我们推荐使用对比度较高的颜色组合,确保数据的可读性。同时,避免使用过多的颜色,以免造成视觉混乱。"}},extendedColorNames:{cyan:"青色",purple:"紫色",yellow:"黄色",pink:"粉色"},primary:"品牌色 Brand Color",success:"成功色 Success",warning:"警告色 Warning",error:"错误色 Error",neutral:"中性色 Neutral",neutralSection:{title:"中性色",description:"中性色包含一系列灰黑色。同时考虑到深色模式下需要通过中性色来区界面分层级关系,所以在 CIELab 中根据亮度将中性色扩展至14个。并且常用文字与其中色彩对比度均大于 4.5,满足 WCAG2.0 标准。"},brandNeutralSection:{title:"带有品牌色倾向的中性色",description:"此外在页面模板等应用场景中,需要在各层级的灰黑色中加入颜色倾向,以突显品牌氛围。过程中使用了 RGB 混色模型,经过多次的尝试最终确定了品牌色的混合比例为 8%-12%,运用规则同普通中性色一致。",brandRatio:"12%",neutralRatio:"100%",formula:"Average(r,g,b) = 0.12*(r1,g1,b1) + 0.88*(r2,g2,b2)"}},typography:{title:"Fonts 字体",subtitle:"字体是界面信息传达的基础。清晰的字体层级能够帮助用户快速理解内容结构,提升阅读效率。",overview:{title:"概述",description:["网页文字将与网页中的界面系统相结合,从而形成一个可供用户操作的产品系统,用户除了阅读,还需要完成一系列与界面系统产生的交互行为。因此,在网页设计中,文字系统是影响产品可用性的重要因素。","BDesign 秉承包容、多元、进化和连接的价值观,这将指引文字系统制定「好用」、「好记」和「美观」的字体设计原则,希望字体是有规律和韵律、实现像素对齐、可以拉开清晰明确的层次关系、 具有和谐美观的大小对比效果。"]},officialSystem:{title:"字体",description:["font-family 是用于某个元素的字体族名称或/及类族名称的一个优先表。如果浏览器不支持第一个字体,则会尝试优先表中的下一个。不同主流的操作系统及浏览器的默认字体不尽相同。从西文到中文,分别对各平台做一个基础的降级,这是针对系统字体规范 font-family 的基本思路。","这里需要注意的是,不声明字体时,浏览器渲染的是「默认字体」,不一定是「系统字体」例如:Windows7 浏览器默认渲染的是中易宋体(SImsun),而非系统字体微软雅黑(Microsoft YaHei)。"]},hierarchy:{title:"字阶",description:["字阶定义一级字阶和二级字阶,一级字阶常用于基础组件的设计中,二级字阶用于标题及特殊场景的应用。","第一字阶,每个字号的增长的步数差距为 2px。桌面端中,Body 字号我们设置为 14px,Base 取 12px,桌面端的最小字号是 12px。","第二字阶,为了减少字阶区间里的步数,在这个范围中的文字,多为模块超大标题,展示型文案,以数字数据展示为主。通过+4,+8,+12,+16 的步数增长规律,满足这个范围的字阶中,文字层级跨度大的展示诉求,也减少没有必要的小步数字号。"]},application:{title:"行高",description:["关于文字的行高,css 属性当中的 line-height,在国际无障碍网页使用标准中给出了明确的指引 line-height=font size*1.5。","在验证过程中发现,固定 1.5 倍的行高比例,在当字号越大的时候,行高就会越大,在大号文字的展示上信息的连贯明显得出现割裂,尤其在多种字号及元素混排的场景中。","行高是为了让上一行的文字和下一行的文字之间有呼吸的空间,基于呼吸空间一致,让不同字号之间的间距都保持相同,通过逻辑得到这样一个公式:「 行高 = 字号 + n 」,8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致,总体文字间隙稳定呼吸,行高空间较一致得出计算公式:「line-height = font size+8」"]},completeHierarchy:{title:"字重",description:["字重是重要排版的变量,可以增强层次结构和重要内容区分。","面对复杂的中后台场景,在 Windows 系统下 font-weight 如果使用小于 600 默认显示为常规体,而在macOS 系统中可以使用400、500、600区分,综合考虑复杂场景显示效果,BDesign 共提供两种字重配置效果。","font-weight: 400 和 font-weight: 600。字重 400 等于 Windows 和 macOS 系统下的 Regular 显示效果,字重 600 等于 Windows 系统下的 Bold 显示效果和 macOS 系统下的 Semibold 显示效果。"]},hero:"特大标题",displayTitle:"大标题",heading:"标题",body:"正文",caption:"辅助文字"},spacing:{title:"Spacing 间距",description:"合理的间距能够让界面更加清晰、有序。BEDI采用8px基准的间距系统,确保设计的一致性和规律性。通过统一的间距规范,设计师和开发者可以快速构建符合视觉规律的界面。"},radius:{title:"Border Radius 圆角",description:"圆角赋予界面更加友好、柔和的视觉感受。BEDI提供了8个层级的圆角规范,从直角到完全圆角,适配不同组件和场景的需求。"},shadows:{title:"Shadow 阴影",description:"阴影通过模拟真实世界的光影效果,帮助用户理解界面的层级关系。BEDI定义了5个层级的阴影,从微妙的悬浮效果到明显的浮层效果,让界面更具空间感和层次感。"},motion:{title:"Motion 动效",subtitle:"动效设计能够增强界面的交互感和反馈,提升用户体验。合理的动效使用可以让界面更加生动、自然。",overview:{title:"概述",description:"BEDI 动效系统遵循美观、高效、动态、直观的价值观,提供完整的动效规范,确保交互体验的流畅性和一致性。"},principles:{title:"BEDI 动效原则",description:"动效设计遵循自然、高效、一致的原则,为用户提供流畅的交互体验。",natural:{title:"自然流畅",description:"模拟真实世界的物理规律,让动效更加自然和可信。"},duration:{title:"时长控制",description:"根据操作重要性调整动效时长,快速操作保持简洁,重要操作可以适当延长。"},easing:{title:"缓动函数",description:"使用合适的缓动曲线,让动效的开始和结束更加平滑。"}},types:{title:"动效类型",description:"不同类型的动效适用于不同的交互场景,确保用户体验的一致性。",enter:{title:"进入动效",description:"元素进入界面时的动画效果,如淡入、滑入等。"},exit:{title:"退出动效",description:"元素离开界面时的动画效果,如淡出、滑出等。"},loading:{title:"加载动效",description:"数据加载过程中的动画效果,缓解用户等待焦虑。"}},specifications:{title:"动效规范",description:"标准化的动效参数,确保整个产品的动效体验保持一致。"}},icon:{title:"Icon 图标",subtitle:"图标是界面中重要的视觉元素,能够快速传达信息。统一的图标风格能够提升产品的专业性和一致性。",overview:{title:"概述",description:"BEDI 图标系统遵循美观、高效、动态、直观的价值观,提供完整的图标规范,确保视觉传达的准确性和一致性。"},system:{title:"BEDI 图标系统",description:"BEDI 图标系统是一套完整的图标规范,包含图标的设计原则、使用规范和分类体系。"},specifications:{title:"图标规范",description:"标准化的图标设计规范,确保图标在整个产品中保持一致的视觉风格。",size:{title:"尺寸规范",description:"图标采用标准化的尺寸体系,确保在不同场景下的清晰度和一致性。"},style:{title:"风格规范",description:"图标采用统一的设计风格,包括线条粗细、圆角处理等细节。"},color:{title:"颜色规范",description:"图标使用标准化的颜色体系,确保与整体设计风格的一致性。"}},categories:{title:"图标分类",description:"根据功能和使用场景对图标进行分类,便于查找和使用。",navigation:{title:"导航图标",description:"用于页面导航和功能切换的图标。"},action:{title:"操作图标",description:"用于触发具体操作和行为的图标。"},status:{title:"状态图标",description:"用于表示不同状态和提示信息的图标。"}},principles:{title:"使用原则",description:"图标使用遵循清晰、一致、可访问的原则,确保用户能够准确理解图标含义。",clarity:{title:"清晰易懂",description:"图标设计简洁明了,用户能够快速理解其含义。"},consistency:{title:"风格一致",description:"所有图标保持统一的设计风格和视觉语言。"},accessibility:{title:"可访问性",description:"图标设计考虑可访问性需求,提供文字说明等辅助信息。"}}},layout:{title:"Layout 布局",subtitle:"合理的布局设计能够帮助用户快速理解信息结构,提升阅读效率和操作体验。",overview:{title:"概述",description:"BEDI 布局系统遵循美观、高效、动态、直观的价值观,提供完整的布局规范,确保信息架构的清晰性和一致性。"},spacing:{title:"间距规范",description:"为了页面布局的一致性,在不同区域中放置内容元素时,应当保持间距的规律性。我们推荐了一组具有韵律的间距值,在遵循 8 倍数原则的基础上,增加了 4、12 两档小间距,以灵活满足不同的应用场景。"}},darkMode:{title:"Dark Mode 深色模式",subtitle:"深色模式能够减少视觉疲劳,在低光环境下提供更舒适的阅读体验。",overview:{title:"概述",description:"BEDI 深色模式系统遵循美观、高效、动态、直观的价值观,提供完整的深色主题规范,确保在不同光线环境下的视觉舒适性。"},system:{title:"BEDI 深色模式系统",description:"BEDI 深色模式系统是一套完整的深色主题规范,包含色彩适配、对比度控制和切换机制。"},colors:{title:"色彩适配",description:"深色模式下的色彩重新设计,确保良好的对比度和视觉层次。"},principles:{title:"切换原则",description:"深色模式切换遵循对比度、层次感、一致性的原则。",contrast:{title:"对比度控制",description:"确保文字与背景有足够的对比度,满足无障碍设计要求。"},hierarchy:{title:"层次感保持",description:"在深色模式下保持清晰的信息层次和视觉重点。"},consistency:{title:"一致性保证",description:"确保深色模式与浅色模式在功能和交互上保持一致。"}},implementation:{title:"实现方式",description:"提供标准化的深色模式实现方案,包括CSS变量、主题切换等技术实现。"},usage:{title:"使用场景",description:"深色模式适用于不同的使用场景,提升用户体验。",productivity:{title:"提升效率",description:"长时间工作时减少视觉疲劳,提升工作效率。"},accessibility:{title:"无障碍支持",description:"为视觉敏感用户提供更舒适的界面选择。"},environment:{title:"环境适应",description:"在低光环境下提供更好的视觉体验。"}}}},components:{title:"基本组件",overview:"概览",categories:{overview:"概览",basic:"基础组件",layout:"布局组件",navigation:"导航组件",input:"输入组件",display:"数据展示组件",feedback:"消息提醒组件"},labels:{overview:"概览 Overview",button:"按钮 Button",icon:"图标 Icon",link:"链接 Link",divider:"分割线 Divider",grid:"栅格 Grid",layout:"布局 Layout",space:"间距 Space",affix:"固钉 Affix",anchor:"锚点 Anchor",backtop:"回到顶部 BackTop",breadcrumb:"面包屑 Breadcrumb",dropdown:"下拉菜单 Dropdown",menu:"导航菜单 Menu",pagination:"分页 Pagination",steps:"步骤条 Steps",stickytool:"侧边栏 StickyTool",tabs:"选项卡 Tabs",autocomplete:"自动填充 AutoComplete",cascader:"级联组件 Cascader",checkbox:"多选框 Checkbox",colorpicker:"颜色选择器 ColorPicker",datepicker:"日期选择器 DatePicker",form:"表单 Form",input:"输入框 Input",inputadornment:"输入装饰器 InputAdornment",inputnumber:"数字输入框 InputNumber",taginput:"标签输入框 TagInput",radio:"单选框 Radio",rangeinput:"范围输入框 RangeInput",select:"选择器 Select",selectinput:"筛选器输入框 SelectInput",slider:"滑块 Slider",switch:"开关 Switch",textarea:"多行文本框 Textarea",transfer:"穿梭框 Transfer",timepicker:"时间选择器 TimePicker",treeselect:"树选择 TreeSelect",upload:"上传 Upload",avatar:"头像 Avatar",badge:"徽标 Badge",calendar:"日历 Calendar",card:"卡片 Card",collapse:"折叠面板 Collapse",comment:"评论 Comment",descriptions:"描述 Descriptions",empty:"空状态 Empty",image:"图片 Image",imageviewer:"图片预览 ImageViewer",list:"列表 List",loading:"加载 Loading",progress:"进度条 Progress",qrcode:"二维码 QRCode",rate:"评分 Rate",skeleton:"骨架屏 Skeleton",statistic:"统计数值 Statistic",swiper:"轮播框 Swiper",table:"表格 Table",tag:"标签 Tag",timeline:"时间轴 Timeline",tooltip:"文字提示 Tooltip",tree:"树 Tree",watermark:"水印 Watermark",alert:"警告提醒 Alert",dialog:"对话框 Dialog",drawer:"抽屉 Drawer",guide:"引导 Guide",message:"全局提示 Message",notification:"消息通知 Notification",popconfirm:"气泡确认框 Popconfirm",popup:"弹出层 Popup"},placeholder:"该组件正在重构中..."}},en:{nav:{home:"Home",gettingStarted:"Getting Started",design:"Design",components:"Basic Components"},home:{hero:{title:"BEDI Design System",subtitle:"State-owned Tech Properties · Industry Empowerment · Efficient Collaboration · Tech for Good",description:`BEDI Design System is the design language of North Digital Intelligence, with the core concept of "Building Digital China". Through continuous breakthroughs in computing power and cloud services, it catalyzes the formation of new industry ecosystems, enables industry evolution, unleashes the power of digital transformation, and opens new possibilities for economic prosperity and people's lives. Our vision is to become "a first-class high-tech enterprise driven by innovative computing power, cloud, and digital services, creating a new model for state-owned enterprise reform."<br><br>Based on core positioning and business characteristics, AI product design language must closely adhere to the four core principles of "state-owned tech properties, industry empowerment essence, efficient collaboration capability, and tech for good aspirations". User experience design must reflect long-term investment assurance and national-level security and reliability. This requires user experience design to be: <strong>"rigorous and reliable, data-driven yet full of humanistic care industrial-grade aesthetics"</strong>`,getStarted:"Get Started",viewDocs:"View Docs"},features:{title:"Core Features",subtitle:"State-owned Tech Properties · Industry Empowerment · Efficient Collaboration · Tech for Good",comprehensive:{title:'Cutting-edge Vitality, Innovative Certainty - <span class="highlight-blue">State-owned Technology</span>',description:"Visually conveys the stability and trustworthy professionalism of state-owned enterprises, while also expressing the innovation and vitality of the tech industry."},components:{title:'Scenario-aligned, Value Symbiosis - <span class="highlight-blue">Industry Empowerment</span>',description:"Product design reflects adaptability across various industry scenarios. High-quality products help upgrade industries and release value, promoting deep integration of AI and real economy scenarios."},accessible:{title:'Smooth Focus, Efficient Closed Loop - <span class="highlight-blue">Efficient Collaboration</span>',description:'Interaction design emphasizes standardization and usability, reflecting smooth collaboration across computing power, algorithms, data, and applications, "opening the last mile for model deployment" to improve business efficiency.'},customizable:{title:'Warm Inclusive, Humanistic Care - <span class="highlight-blue">Tech for Good</span>',description:'Overall experience breaks the coldness of technology, integrating humanistic care through emotional design. "Let goodwill become new competitiveness" - design should be inclusive to more people, reducing unnecessary operations and professional jargon.'}},cta:{title:"Start Using BEDI Design System",description:"Join thousands of designers and developers using BEDI Design System to create excellent product experiences"}},design:{title:"Design Guidelines",subtitle:"Unified design language for building excellent product experiences",nav:{values:"Values",color:"Color",fonts:"Fonts",motion:"Motion",icon:"Icon",layout:"Layout",darkMode:"Dark Mode"},values:{title:"Values",description:"Core value principles of BEDI Design System that guide our design decisions and product direction.",sectionTitle:"BEDI Values System",sectionDescription:`BEDI Design System is the design language of North Digital Intelligence, with the core concept of "Building Digital China". Through continuous breakthroughs in computing power and cloud services, it catalyzes the formation of new industry ecosystems, enables industry evolution, unleashes the power of digital transformation, and opens new possibilities for economic prosperity and people's lives. Our vision is to become "a first-class high-tech enterprise driven by innovative computing power, cloud, and digital services, creating a new model for state-owned enterprise reform."<br><br>Based on core positioning and business characteristics, AI product design language must closely adhere to the four core principles of "state-owned tech properties, industry empowerment essence, efficient collaboration capability, and tech for good aspirations". User experience design must reflect long-term investment assurance and national-level security and reliability. This requires user experience design to be: <strong>"rigorous and reliable, data-driven yet full of humanistic care industrial-grade aesthetics"</strong>`,principle1:{title:'Cutting-edge Vitality, Innovative Certainty - <span class="highlight-blue">State-owned Technology</span>',desc:"Visually conveys the stability and trustworthy professionalism of state-owned enterprises, while also expressing the innovation and vitality of the tech industry."},principle2:{title:'Scenario-aligned, Value Symbiosis - <span class="highlight-blue">Industry Empowerment</span>',desc:"Product design reflects adaptability across various industry scenarios. High-quality products help upgrade industries and release value, promoting deep integration of AI and real economy scenarios."},principle3:{title:'Smooth Focus, Efficient Closed Loop - <span class="highlight-blue">Efficient Collaboration</span>',desc:'Interaction design emphasizes standardization and usability, reflecting smooth collaboration across computing power, algorithms, data, and applications, "opening the last mile for model deployment" to improve business efficiency.'},principle4:{title:'Warm Inclusive, Humanistic Care - <span class="highlight-blue">Tech for Good</span>',desc:'Overall experience breaks the coldness of technology, integrating humanistic care through emotional design. "Let goodwill become new competitiveness" - design should be inclusive to more people, reducing unnecessary operations and professional jargon.'}},colors:{title:"Color",subtitle:"Color in products serves to convey information, create hierarchy, express emotions, and build consistency.",overview:{title:"Overview",description:"The BDesign color system upholds the values of inclusiveness, diversity, evolution, and connection, following accessibility design standards to provide a complete and usable official color palette."},officialPalette:{title:"BDesign Official Color Palette",description:"The official color palette is a set of default color schemes widely applicable to mid-to-back office business scenarios, including theme colors, functional colors, neutral colors, and extended colors."},themeColor:{title:"Theme Color",description:'The theme color is the core and most frequently used color in the product, used to emphasize information, guide operations, and largely determine the overall tone and style of the product. BDesign defaults to "Beidian Blue" as the theme color, embodying the concepts of indigenous technology, industrial empowerment, efficient collaboration, and technological advancement, with a resolute and neutral temperament widely applicable in mid-to-back office design.',beidianBlue:{name:"Beidian Blue",cmyk:"C92 M51 Y0 K0",rgb:"R0 G117 B255",pantone:"Pantone 285C",hex:"#0075ff"}},functionalColor:{title:"Functional Color",description:["Functional colors are colors used for specific scenarios and to express special semantic meanings, such as success, failure, warnings, and links. The BDesign color system defines 4 types of functional colors, selected based on universal color meanings and visual consistency with the brand color.","In the BDesign color system, each functional color extends to 10 levels, covering various interface design needs. The color levels are formulated using the HCT color space, combining different hues with saturation and brightness differences to fit an optimized curve, ensuring uniform color changes and consistent brightness across multiple colors."]},extendedColors:{title:"Extended Colors",description:"Extended colors are a series of colors extended from functional colors. For scenarios with more color requirements (such as data visualization scenarios, illustration scenarios). The same HCT and interpolation fitting curve methods are used. In addition to the functional colors blue, red, yellow, and green, the BDesign color system extends to 8 main colors, including purple, sky blue, yellow, and pink extended colors. Each extended color has 10 color levels, ensuring uniform color changes and equal brightness across multiple colors."},applicationGuide:{title:"Application Guidelines",uiGuide:{title:"UI Application Guidelines",description:"In BDesign, theme blue is the main interaction color, and due to the complexity of actual component situations, we use Design Token to standardize color usage rules. For easier management and reading, we define global semantic tokens and component tokens, so that once you understand the meaning of global semantic tokens, you can quickly understand the purpose of component tokens."},dataVizGuide:{title:"Data Visualization Application Guidelines",description:"In data visualization scenarios, color usage needs to be more cautious. We recommend using color combinations with higher contrast to ensure data readability. At the same time, avoid using too many colors to prevent visual confusion."}},extendedColorNames:{cyan:"Cyan",purple:"Purple",yellow:"Yellow",pink:"Pink"},primary:"Brand Color",success:"Success Color",warning:"Warning Color",error:"Error Color",neutral:"Neutral Color",neutralSection:{title:"Neutral",description:"Neutral colors include a range of grayscale tones. To support clear visual hierarchy in dark mode, the neutral palette is extended to 14 steps by lightness in CIELab. Common text and neutral colors maintain a contrast ratio greater than 4.5, meeting WCAG 2.0 requirements."},brandNeutralSection:{title:"Brand-leaning neutrals",description:"In scenarios like page templates, add a subtle color bias to neutrals across levels to better express brand tone. We used an RGB mixing model and iterated multiple times, settling on an 8%–12% brand-color ratio. The usage rules are consistent with standard neutrals.",brandRatio:"12%",neutralRatio:"100%",formula:"Average(r,g,b) = 0.12*(r1,g1,b1) + 0.88*(r2,g2,b2)"}},typography:{title:"Typography",subtitle:"Typography is the foundation of interface information delivery. A clear typographic hierarchy helps users quickly understand content structure and improve reading efficiency.",overview:{title:"Overview",description:["Typography combines with interface systems to create operable product systems. Users not only read but also complete various interactions with the interface. Therefore, typography systems are crucial factors affecting product usability in web design.","BDesign adheres to the values of inclusiveness, diversity, evolution, and connection, guiding typography systems to establish principles of being useful, memorable, and beautiful. We hope typography is rhythmic, pixel-aligned, creates clear hierarchical relationships, and has harmonious size contrast effects."]},officialSystem:{title:"Font System",description:["font-family is a priority list of font family names or/and class names for an element. If the browser does not support the first font, it will try the next one in the priority list. Different mainstream operating systems and browsers have different default fonts. From Western to Chinese, basic fallbacks are made for each platform, which is the basic approach for system font specification font-family.","There are two main strategies for font selection: system fonts and custom fonts. System fonts have the advantages of being fast, not requiring additional loading, and being familiar to users. Custom fonts can better express brand personality and provide a more consistent visual experience."]},hierarchy:{title:"Type Scale",description:["Type scale defines primary and secondary type scales. Primary type scale is often used in basic component design, while secondary type scale is used for titles and special scenarios.","The BEDI type scale is based on an 8px grid system, ensuring consistent visual rhythm and spacing across all text sizes."]},application:{title:"Line Height",description:['Line height provides breathing space between lines of text. Based on consistent breathing space, different font sizes maintain the same spacing. The formula is derived as: "Line height = font size + n", where 8 as a variable satisfies consistency with 1.5x line height for common 14px & 16px font sizes, resulting in overall stable text spacing and consistent line height space: "line-height = font size + 8"']},completeHierarchy:{title:"Font Weight",description:["Font weight is an important typography variable that can enhance hierarchical structure and distinguish important content.","font-weight: 400 and font-weight: 600. Font weight 400 equals Regular display in Windows and macOS systems, while font weight 600 equals Bold display in Windows and Semibold display in macOS."]},hero:"Hero",displayTitle:"Display Title",heading:"Heading",body:"Body",caption:"Caption"},spacing:{title:"Spacing",description:"Reasonable spacing makes interfaces clearer and more orderly. BEDI uses an 8px-based spacing system to ensure design consistency and regularity. Through unified spacing specifications, designers and developers can quickly build interfaces that conform to visual rules."},radius:{title:"Border Radius",description:"Border radius gives interfaces a friendlier and softer visual feel. BEDI provides 8 levels of border radius specifications, from sharp corners to fully rounded, adapting to different components and scenario needs."},shadows:{title:"Shadow",description:"Shadows help users understand interface hierarchy by simulating real-world light and shadow effects. BEDI defines 5 levels of shadows, from subtle floating effects to obvious overlay effects, making interfaces more spatial and layered."},motion:{title:"Motion",subtitle:"Motion design enhances interface interactivity and feedback, improving user experience. Proper use of motion can make interfaces more vivid and natural.",description:"Motion design enhances interface interactivity and feedback, improving user experience. Proper use of motion can make interfaces more vivid and natural.",overview:{title:"Overview",description:"BEDI motion system follows beautiful, efficient, dynamic, and intuitive values, providing complete motion specifications to ensure smooth and consistent interaction experiences."},principles:{title:"BEDI Motion Principles",description:"Motion design follows natural, efficient, and consistent principles to provide users with smooth interaction experiences.",natural:{title:"Natural and Smooth",description:"Motion should follow natural laws, simulating real-world physics for better user understanding."},duration:{title:"Appropriate Duration",description:"Motion duration should be concise, avoiding unnecessary waiting time."},easing:{title:"Smooth Easing",description:"Use appropriate easing functions to make motion more natural and comfortable."}},types:{title:"Motion Types",description:"Different types of motion for different interaction scenarios.",enter:{title:"Enter Motion",description:"Elements enter the screen with smooth motion."},exit:{title:"Exit Motion",description:"Elements exit the screen with smooth motion."},loading:{title:"Loading Motion",description:"Loading animations indicate system processing status."}},specifications:{title:"Motion Specifications",description:"Standardized motion parameters for consistent experience."}},icon:{title:"Icon",subtitle:"Icons are important visual elements in interfaces that can quickly convey information. Unified icon styles enhance product professionalism and consistency.",overview:{title:"Overview",description:"BEDI icon system follows beautiful, efficient, dynamic, and intuitive values, providing complete icon specifications to ensure accurate and consistent visual communication."},principles:{title:"Icon Principles",description:"Icon design follows clarity, consistency, and accessibility principles.",clarity:{title:"Clarity",description:"Icons should be clear and easy to understand."},consistency:{title:"Consistency",description:"Icons maintain consistent style across the system."},accessibility:{title:"Accessibility",description:"Icons should be accessible to all users."}}},layout:{title:"Layout",subtitle:"Reasonable layout design helps users quickly understand information structure and improves reading efficiency and operational experience.",overview:{title:"Overview",description:"BEDI layout system follows beautiful, efficient, dynamic, and intuitive values, providing complete layout specifications to ensure clear and consistent information architecture."},spacing:{title:"Spacing Specifications",description:"To maintain layout consistency, spacing should follow regular patterns when placing content elements in different areas. We recommend a set of rhythmic spacing values."}},darkMode:{title:"Dark Mode",subtitle:"Dark mode reduces visual fatigue and provides a more comfortable reading experience in low-light environments.",overview:{title:"Overview",description:"Dark mode is an important feature of modern interfaces, providing better user experience in different lighting conditions."},system:{title:"BEDI Dark Mode System",description:"BEDI dark mode system follows beautiful, efficient, dynamic, and intuitive values, providing complete dark mode specifications."},colors:{title:"Color Adaptation",description:"Colors in dark mode need special adaptation to ensure good readability and visual comfort."},principles:{title:"Switching Principles",description:"Dark mode design follows contrast, hierarchy, and consistency principles.",contrast:{title:"Contrast",description:"Ensure sufficient contrast between text and background."},hierarchy:{title:"Hierarchy",description:"Maintain clear visual hierarchy in dark mode."},consistency:{title:"Consistency",description:"Keep consistent design language across light and dark modes."}},implementation:{title:"Implementation",description:"Technical implementation methods for dark mode."},usage:{title:"Usage Scenarios",description:"Different scenarios where dark mode is beneficial.",productivity:{title:"Productivity",description:"Better focus and reduced eye strain during long work sessions."},accessibility:{title:"Accessibility",description:"Better visual experience for visually sensitive users."},environment:{title:"Environment Adaptation",description:"More comfortable viewing experience in low-light environments."}}},framework:{title:"Framework Setup",description:"Learn how to build a complete design system framework, including component libraries, design specifications, and documentation systems."},tasks:{title:"High-Frequency Tasks",description:"Learn how to design high-frequency user functions, optimize key paths, and improve task completion efficiency."}},components:{title:"Basic Components",overview:"Overview",categories:{overview:"Overview",basic:"Basic Components",layout:"Layout Components",navigation:"Navigation Components",input:"Input Components",display:"Data Display Components",feedback:"Message Components"},labels:{overview:"Overview",button:"Button",icon:"Icon",link:"Link",divider:"Divider",grid:"Grid",layout:"Layout",space:"Space",affix:"Affix",anchor:"Anchor",backtop:"BackTop",breadcrumb:"Breadcrumb",dropdown:"Dropdown",menu:"Menu",pagination:"Pagination",steps:"Steps",stickytool:"StickyTool",tabs:"Tabs",autocomplete:"AutoComplete",cascader:"Cascader",checkbox:"Checkbox",colorpicker:"ColorPicker",datepicker:"DatePicker",form:"Form",input:"Input",inputadornment:"InputAdornment",inputnumber:"InputNumber",taginput:"TagInput",radio:"Radio",rangeinput:"RangeInput",select:"Select",selectinput:"SelectInput",slider:"Slider",switch:"Switch",textarea:"Textarea",transfer:"Transfer",timepicker:"TimePicker",treeselect:"TreeSelect",upload:"Upload",avatar:"Avatar",badge:"Badge",calendar:"Calendar",card:"Card",collapse:"Collapse",comment:"Comment",descriptions:"Descriptions",empty:"Empty",image:"Image",imageviewer:"ImageViewer",list:"List",loading:"Loading",progress:"Progress",qrcode:"QRCode",rate:"Rate",skeleton:"Skeleton",statistic:"Statistic",swiper:"Swiper",table:"Table",tag:"Tag",timeline:"Timeline",tooltip:"Tooltip",tree:"Tree",watermark:"Watermark",alert:"Alert",dialog:"Dialog",drawer:"Drawer",guide:"Guide",message:"Message",notification:"Notification",popconfirm:"Popconfirm",popup:"Popup"},placeholder:"This component is being refactored..."}}},_=b.createContext(void 0);function Ve({children:i,translations:s}){const[t,o]=b.useState(()=>localStorage.getItem("language")||"zh"),a=()=>{const p=t==="zh"?"en":"zh";o(p),localStorage.setItem("language",p)},l=s||We,c=p=>{const d=p.split(".");let n=l[t];for(const m of d)n=n==null?void 0:n[m];return n||p};return e.jsx(_.Provider,{value:{language:t,toggleLanguage:a,t:c},children:i})}function Fe(){const i=b.useContext(_);if(!i)throw new Error("useLanguage must be used within LanguageProvider");return i}exports.Affix=ue;exports.Alert=Re;exports.Anchor=U;exports.AnchorLink=q;exports.Avatar=De;exports.BackTop=pe;exports.Badge=$e;exports.Breadcrumb=he;exports.Button=D;exports.ButtonDoc=ee;exports.Card=G;exports.Checkbox=ve;exports.Content=le;exports.DatePicker=je;exports.Divider=se;exports.Dropdown=me;exports.Empty=Ie;exports.Footer=ce;exports.Grid=ae;exports.Header=oe;exports.Icon=ie;exports.Input=ye;exports.LanguageProvider=Ve;exports.Layout=re;exports.Link=te;exports.Menu=be;exports.MenuItem=K;exports.Modal=Pe;exports.Pagination=fe;exports.Progress=Te;exports.Radio=we;exports.Rate=Ee;exports.Select=ke;exports.Sider=de;exports.Skeleton=Ce;exports.Slider=Ne;exports.Space=V;exports.Steps=xe;exports.StickyTool=J;exports.StickyToolItem=H;exports.SubMenu=X;exports.Switch=Be;exports.Table=Me;exports.Tabs=ge;exports.Tag=Le;exports.ThemeProvider=Ae;exports.Tooltip=ze;exports.Upload=Se;exports.useLanguage=Fe;exports.useTheme=Oe;