starry-sky-ui 0.3.1 → 0.4.1

package/dist/AdUI/index.js

@@ -0,0 +1,602 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { message, Select, Modal, Table, Pagination, Input, Textarea, ContentRenderer, ChatInput, Starfield } from '../index';
+import { adUtils } from '../index';
+import './index.scss';
+const categories = [
+    { id: 'feedback', label: '反馈' },
+    { id: 'data-entry', label: '数据录入' },
+    { id: 'data-display', label: '数据展示' },
+    { id: 'navigation', label: '导航' },
+    { id: 'decoration', label: '装饰' },
+    { id: 'utils', label: '工具函数' },
+];
+const components = [
+    { id: 'message', label: 'Message 消息提示', category: 'feedback', desc: '全局消息提示，支持 info / success / error / warning / loading 五种类型，自动消失。' },
+    { id: 'modal', label: 'Modal 弹窗', category: 'feedback', desc: '模态弹窗，支持标题、底部按钮、确认/取消、loading 态、居中、destroyOnClose 等。' },
+    { id: 'select', label: 'Select 选择器', category: 'data-entry', desc: '下拉选择器，支持受控/非受控、搜索过滤、清除按钮、键盘导航、三种尺寸。' },
+    { id: 'input', label: 'Input 输入框', category: 'data-entry', desc: '输入框组件，支持文本输入、密码、Textarea 多行文本、前缀后缀图标、清除按钮、字符计数等。' },
+    { id: 'table', label: 'Table 表格', category: 'data-display', desc: '功能丰富的表格组件，支持排序、分页、行选择、自定义渲染、固定表头等。' },
+    { id: 'pagination', label: 'Pagination 分页', category: 'navigation', desc: '分页组件，支持受控/非受控、简洁模式、每页条数切换、快速跳转等。' },
+    { id: 'content-renderer', label: 'ContentRenderer 内容渲染', category: 'data-display', desc: '基于 react-markdown 的内容展示组件，支持 GFM 语法和代码语法高亮。' },
+    { id: 'chat-input', label: 'ChatInput 聊天输入框', category: 'data-entry', desc: '仿 DeepSeek 聊天输入框，支持多行输入、回车发送、自动撑高、停止生成。' },
+    { id: 'starfield', label: 'Starfield 星空背景', category: 'decoration', desc: '星空背景组件，在容器内生成随机分布的闪烁星星，支持自定义数量、颜色和闪烁速度。' },
+    { id: 'utils', label: 'Utils 工具函数', category: 'utils', desc: '轻量级通用工具函数集合，涵盖文件处理、图片处理、事件控制三类，无需安装额外依赖。' },
+];
+const anchorMap = {
+    message: [
+        { id: 'message-when', label: '何时使用' },
+        { id: 'message-how', label: '如何使用' },
+        { id: 'message-demo-base', label: '基础用法' },
+        { id: 'message-demo-types', label: '消息类型' },
+        { id: 'message-demo-open', label: '通用方法' },
+        { id: 'message-demo-config', label: '全局配置' },
+    ],
+    modal: [
+        { id: 'modal-when', label: '何时使用' },
+        { id: 'modal-how', label: '如何使用' },
+        { id: 'modal-demo-base', label: '基础弹窗' },
+        { id: 'modal-demo-confirm', label: '确认弹窗' },
+        { id: 'modal-demo-custom', label: '自定义底部' },
+    ],
+    select: [
+        { id: 'select-when', label: '何时使用' },
+        { id: 'select-how', label: '如何使用' },
+        { id: 'select-demo-base', label: '基本用法' },
+        { id: 'select-demo-search', label: '搜索与清除' },
+        { id: 'select-demo-size', label: '三种尺寸' },
+    ],
+    input: [
+        { id: 'input-when', label: '何时使用' },
+        { id: 'input-how', label: '如何使用' },
+        { id: 'input-demo-base', label: '基本用法' },
+        { id: 'input-demo-size', label: '三种尺寸' },
+        { id: 'input-demo-prefix', label: '前缀与后缀' },
+        { id: 'input-demo-clear', label: '清除与计数' },
+        { id: 'input-demo-password', label: '密码框' },
+        { id: 'input-demo-status', label: '状态' },
+        { id: 'input-demo-textarea', label: '多行文本' },
+    ],
+    table: [
+        { id: 'table-when', label: '何时使用' },
+        { id: 'table-how', label: '如何使用' },
+        { id: 'table-demo-base', label: '基本用法' },
+        { id: 'table-demo-sort', label: '排序' },
+        { id: 'table-demo-select', label: '行选择' },
+        { id: 'table-demo-loading', label: '加载 & 空态' },
+    ],
+    pagination: [
+        { id: 'pagination-when', label: '何时使用' },
+        { id: 'pagination-how', label: '如何使用' },
+        { id: 'pagination-demo-base', label: '基本用法' },
+        { id: 'pagination-demo-controlled', label: '受控模式' },
+        { id: 'pagination-demo-more', label: '更多功能' },
+    ],
+    'content-renderer': [
+        { id: 'cr-when', label: '何时使用' },
+        { id: 'cr-how', label: '如何使用' },
+        { id: 'cr-demo-base', label: '基本用法' },
+        { id: 'cr-demo-code', label: '代码高亮' },
+        { id: 'cr-demo-gfm', label: 'GFM 语法' },
+    ],
+    'chat-input': [
+        { id: 'ci-when', label: '何时使用' },
+        { id: 'ci-how', label: '如何使用' },
+        { id: 'ci-demo-base', label: '基本用法' },
+        { id: 'ci-demo-loading', label: '加载状态' },
+    ],
+    starfield: [
+        { id: 'starfield-when', label: '何时使用' },
+        { id: 'starfield-how', label: '如何使用' },
+        { id: 'starfield-demo-basic', label: '基本用法' },
+        { id: 'starfield-demo-custom', label: '自定义参数' },
+    ],
+    utils: [
+        { id: 'utils-when', label: '何时使用' },
+        { id: 'utils-how', label: '如何使用' },
+        { id: 'utils-demo-file', label: '文件工具' },
+        { id: 'utils-demo-image', label: '图片工具' },
+        { id: 'utils-demo-event', label: '事件工具' },
+    ],
+};
+const demoOptions = [
+    { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
+    { label: 'Angular', value: 'angular' },
+    { label: 'Svelte（禁用）', value: 'svelte', disabled: true },
+    { label: 'Solid.js', value: 'solid' },
+    { label: 'Next.js', value: 'next' },
+    { label: 'Nuxt', value: 'nuxt' },
+    { label: 'Remix', value: 'remix' },
+];
+/* ========== 辅助组件 ========== */
+const CodeBlock = ({ code }) => (_jsxs("div", Object.assign({ className: "adui-code-panel" }, { children: [_jsx("pre", { children: _jsx("code", { children: code }) }), _jsx("button", Object.assign({ className: "adui-copy-btn", onClick: () => { navigator.clipboard.writeText(code); message.success('已复制'); }, title: "\u590D\u5236\u4EE3\u7801" }, { children: "\uD83D\uDCCB" }))] })));
+const DemoCard = ({ title, children, code }) => (_jsxs("div", Object.assign({ className: "adui-demo-card" }, { children: [_jsxs("div", Object.assign({ className: "adui-demo-preview" }, { children: [title && _jsx("h4", Object.assign({ className: "adui-demo-title" }, { children: title })), _jsx("div", Object.assign({ className: "adui-demo-stage" }, { children: children }))] })), _jsx(CodeBlock, { code: code })] })));
+const WhenUse = ({ children }) => (_jsx("div", Object.assign({ className: "adui-when-use" }, { children: _jsx("ul", { children: React.Children.map(children, (c, i) => _jsx("li", { children: c }, i)) }) })));
+const HowUse = ({ importCode }) => (_jsx("div", Object.assign({ className: "adui-how-use" }, { children: _jsx(CodeBlock, { code: importCode }) })));
+/* ========== 各组件内容 ========== */
+const MessageContent = () => (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "message-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u5411\u7528\u6237\u5C55\u793A\u975E\u963B\u585E\u7684\u5168\u5C40\u53CD\u9988\u4FE1\u606F\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u9002\u5408\u64CD\u4F5C\u6210\u529F\u3001\u64CD\u4F5C\u5931\u8D25\u3001\u8B66\u544A\u63D0\u793A\u3001\u52A0\u8F7D\u4E2D\u72B6\u6001\u7B49\u8F7B\u91CF\u573A\u666F\u3002" }), _jsx("span", { children: "\u65E0\u9700\u7528\u6237\u4EA4\u4E92\u5373\u53EF\u81EA\u52A8\u6D88\u5931\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "message-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { Message, message } from 'starry-sky-ui';
+
+function App() {
+  return <Message />
+}
+
+message.success('操作成功');` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "message-demo-base" }, { children: "\u57FA\u7840\u7528\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u4E94\u79CD\u6D88\u606F\u7C7B\u578B", code: `message.info('信息提示');
+message.success('操作成功！');
+message.error('操作失败！');
+message.warning('警告提示');
+message.loading('加载中...', 2000);` }, { children: _jsxs("div", Object.assign({ className: "adui-btn-group" }, { children: [_jsx("button", Object.assign({ className: "adui-btn", onClick: () => message.info('这是一条信息提示') }, { children: "info" })), _jsx("button", Object.assign({ className: "adui-btn adui-btn-green", onClick: () => message.success('操作成功！') }, { children: "success" })), _jsx("button", Object.assign({ className: "adui-btn adui-btn-red", onClick: () => message.error('操作失败！') }, { children: "error" })), _jsx("button", Object.assign({ className: "adui-btn adui-btn-orange", onClick: () => message.warning('警告提示') }, { children: "warning" })), _jsx("button", Object.assign({ className: "adui-btn", onClick: () => message.loading('加载中...', 3000) }, { children: "loading" }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "message-demo-types" }, { children: "\u6D88\u606F\u7C7B\u578B" })), _jsx(DemoCard, Object.assign({ title: "\u652F\u6301 then \u94FE\u5F0F\u8C03\u7528", code: `const ins = message.loading('提交中...', 0);
+await saveData();
+message.success('提交成功');` }, { children: _jsx("button", Object.assign({ className: "adui-btn", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    message.loading('异步处理中...', 0);
+                    yield new Promise(r => setTimeout(r, 1500));
+                    message.success('处理完成');
+                }) }, { children: "\u6A21\u62DF\u5F02\u6B65" })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "message-demo-open" }, { children: "\u901A\u7528\u65B9\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "message.open", code: `message.open({
+  type: 'success',
+  content: '通过 open 打开的消息',
+  duration: 5000,
+  onClose: () => console.log('closed'),
+});` }, { children: _jsx("button", Object.assign({ className: "adui-btn adui-btn-green", onClick: () => message.open({ type: 'success', content: '通过 open 方法打开的消息', duration: 5000 }) }, { children: "\u6253\u5F00" })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "message-demo-config" }, { children: "\u5168\u5C40\u914D\u7F6E" })), _jsx(DemoCard, Object.assign({ title: "message.config", code: `message.config({
+  maxCount: 3,    // 最大显示数量
+  duration: 4000, // 默认显示时长
+});
+message.destroy();  // 销毁所有消息` }, { children: _jsxs("div", Object.assign({ className: "adui-btn-group" }, { children: [_jsx("button", Object.assign({ className: "adui-btn", onClick: () => {
+                            message.config({ maxCount: 3 });
+                            for (let i = 0; i < 5; i++)
+                                message.info(`消息 ${i + 1}`);
+                        } }, { children: "maxCount \u6D4B\u8BD5" })), _jsx("button", Object.assign({ className: "adui-btn adui-btn-red", onClick: () => message.destroy() }, { children: "\u5168\u90E8\u9500\u6BC1" }))] })) }))] }));
+const ModalContent = () => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [customOpen, setCustomOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "modal-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u7528\u6237\u5904\u7406\u4E8B\u52A1\u3001\u4F46\u4E0D\u5E0C\u671B\u8DF3\u8F6C\u9875\u9762\u6253\u65AD\u5DE5\u4F5C\u6D41\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u9002\u5408\u786E\u8BA4\u64CD\u4F5C\u3001\u8868\u5355\u586B\u5199\u3001\u8BE6\u7EC6\u5185\u5BB9\u5C55\u793A\u7B49\u573A\u666F\u3002" }), _jsx("span", { children: "\u652F\u6301\u901A\u8FC7\u786E\u5B9A/\u53D6\u6D88\u6309\u94AE\u3001\u906E\u7F69\u70B9\u51FB\u6216 ESC \u952E\u5173\u95ED\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "modal-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { Modal } from 'starry-sky-ui';
+const [open, setOpen] = useState(false);
+<Modal open={open} onClose={() => setOpen(false)} title="标题">
+  <p>内容</p>
+</Modal>` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "modal-demo-base" }, { children: "\u57FA\u7840\u5F39\u7A97" })), _jsxs(DemoCard, Object.assign({ title: "\u57FA\u672C\u7528\u6CD5", code: `const [open, setOpen] = useState(false);
+<Modal open={open} onClose={() => setOpen(false)} title="基本弹窗">
+  <p>弹窗内容</p>
+</Modal>` }, { children: [_jsx("button", Object.assign({ className: "adui-btn", onClick: () => setModalOpen(true) }, { children: "\u6253\u5F00\u5F39\u7A97" })), _jsxs(Modal, Object.assign({ open: modalOpen, onClose: () => setModalOpen(false), title: "\u57FA\u672C\u5F39\u7A97" }, { children: [_jsx("p", { children: "\u8FD9\u662F\u4E00\u4E2A\u57FA\u672C\u7684 Modal \u5F39\u7A97\uFF0C\u5305\u542B\u6807\u9898\u3001\u5185\u5BB9\u533A\u57DF\u548C\u5173\u95ED\u6309\u94AE\u3002" }), _jsx("p", { children: "\u652F\u6301\u70B9\u51FB\u906E\u7F69\u5173\u95ED\u3001ESC \u952E\u5173\u95ED\u3002" })] }))] })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "modal-demo-confirm" }, { children: "\u786E\u8BA4\u5F39\u7A97" })), _jsxs(DemoCard, Object.assign({ title: "\u786E\u8BA4\u4E0E\u5F02\u6B65", code: `<Modal
+  open={open} title="确认删除"
+  onOk={async () => { await deleteItem(); }}
+  confirmLoading okText="确认删除" cancelText="取消" centered>
+  <p>确定要删除吗？</p>
+</Modal>` }, { children: [_jsx("button", Object.assign({ className: "adui-btn adui-btn-red", onClick: () => setConfirmOpen(true) }, { children: "\u5220\u9664\u786E\u8BA4" })), _jsx(Modal, Object.assign({ open: confirmOpen, onClose: () => setConfirmOpen(false), title: "\u786E\u8BA4\u5220\u9664", onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+                            yield new Promise((r) => setTimeout(r, 1500));
+                            setConfirmOpen(false);
+                            message.success('删除成功');
+                        }), onCancel: () => setConfirmOpen(false), confirmLoading: true, okText: "\u786E\u8BA4\u5220\u9664", cancelText: "\u53D6\u6D88", centered: true }, { children: _jsx("p", { children: "\u786E\u5B9A\u8981\u5220\u9664\u6B64\u9879\u5417\uFF1F\u6B64\u64CD\u4F5C\u4E0D\u53EF\u6062\u590D\u3002" }) }))] })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "modal-demo-custom" }, { children: "\u81EA\u5B9A\u4E49\u5E95\u90E8" })), _jsxs(DemoCard, Object.assign({ title: "\u9690\u85CF\u5173\u95ED\u6309\u94AE + \u81EA\u5B9A\u4E49 footer", code: `<Modal
+  open={open} closable={false} maskClosable={false}
+  footer={<button onClick={...}>我知道了</button>}>
+  <p>只能通过自定义按钮关闭</p>
+</Modal>` }, { children: [_jsx("button", Object.assign({ className: "adui-btn", onClick: () => setCustomOpen(true) }, { children: "\u81EA\u5B9A\u4E49\u5F39\u7A97" })), _jsxs(Modal, Object.assign({ open: customOpen, onClose: () => setCustomOpen(false), title: "\u81EA\u5B9A\u4E49\u5E95\u90E8", closable: false, maskClosable: false, footer: _jsx("div", Object.assign({ style: { textAlign: 'center', padding: '10px 0' } }, { children: _jsx("button", Object.assign({ className: "adui-btn adui-btn-green", onClick: () => setCustomOpen(false), style: { width: 120 } }, { children: "\u6211\u77E5\u9053\u4E86" })) })) }, { children: [_jsx("p", { children: "\u8FD9\u4E2A\u5F39\u7A97\u9690\u85CF\u4E86\u53F3\u4E0A\u89D2\u5173\u95ED\u6309\u94AE\uFF0C\u7981\u6B62\u70B9\u51FB\u906E\u7F69\u5173\u95ED\u3002" }), _jsx("p", { children: "\u5E95\u90E8\u4F7F\u7528\u4E86\u81EA\u5B9A\u4E49\u6309\u94AE\uFF0C\u53EA\u80FD\u901A\u8FC7\u70B9\u51FB\"\u6211\u77E5\u9053\u4E86\"\u5173\u95ED\u3002" })] }))] }))] }));
+};
+const SelectContent = () => {
+    const [selectValue, setSelectValue] = useState('');
+    const [selectSearch, setSelectSearch] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "select-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u4ECE\u4E00\u7EC4\u9884\u5B9A\u4E49\u9009\u9879\u4E2D\u9009\u62E9\u4E00\u4E2A\u503C\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u9009\u9879\u6570\u91CF\u8F83\u591A\u65F6\uFF0C\u5EFA\u8BAE\u914D\u5408\u641C\u7D22\u529F\u80FD\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u652F\u6301\u53D7\u63A7\u548C\u975E\u53D7\u63A7\u4E24\u79CD\u6A21\u5F0F\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "select-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { Select } from 'starry-sky-ui';
+import type { SelectOption } from 'starry-sky-ui';
+const options: SelectOption[] = [
+  { label: 'React', value: 'react' },
+  { label: 'Vue', value: 'vue', disabled: true },
+];` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "select-demo-base" }, { children: "\u57FA\u672C\u7528\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u53D7\u63A7\u9009\u62E9", code: `const [value, setValue] = useState('');
+<Select options={options} value={value}
+  onChange={(val) => setValue(String(val))} placeholder="请选择框架" />` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx(Select, { options: demoOptions, value: selectValue, onChange: (val) => setSelectValue(val), placeholder: "\u8BF7\u9009\u62E9\u6846\u67B6", style: { width: 240 } }), _jsxs("span", Object.assign({ className: "adui-demo-badge" }, { children: ["\u9009\u4E2D\u503C\uFF1A", String(selectValue) || '—'] }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "select-demo-search" }, { children: "\u641C\u7D22\u4E0E\u6E05\u9664" })), _jsx(DemoCard, Object.assign({ title: "showSearch + allowClear", code: `<Select options={options}
+  showSearch allowClear placeholder="搜索框架..." />` }, { children: _jsx("div", Object.assign({ className: "adui-demo-row" }, { children: _jsx(Select, { options: demoOptions, value: selectSearch, onChange: (val) => setSelectSearch(val), showSearch: true, allowClear: true, placeholder: "\u641C\u7D22\u6846\u67B6...", style: { width: 260 } }) })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "select-demo-size" }, { children: "\u4E09\u79CD\u5C3A\u5BF8" })), _jsx(DemoCard, Object.assign({ title: "small / middle / large", code: `<Select options={options} size="small" placeholder="Small" />
+<Select options={options} size="middle" placeholder="Middle" />
+<Select options={options} size="large" placeholder="Large" />` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx(Select, { options: demoOptions, size: "small", placeholder: "Small", style: { width: 150 } }), _jsx(Select, { options: demoOptions, size: "middle", placeholder: "Middle", style: { width: 150 } }), _jsx(Select, { options: demoOptions, size: "large", placeholder: "Large", style: { width: 150 } })] })) }))] }));
+};
+/* ========== Input 内容 ========== */
+const InputContent = () => {
+    const [inputVal, setInputVal] = useState('');
+    const [inputVal2, setInputVal2] = useState('可清除的文本');
+    const [pwdVal, setPwdVal] = useState('password123');
+    const [taVal, setTaVal] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u7528\u6237\u8F93\u5165\u6587\u672C\u5185\u5BB9\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u652F\u6301\u5355\u884C\u8F93\u5165\uFF08Input\uFF09\u548C\u591A\u884C\u6587\u672C\uFF08Textarea\uFF09\u4E24\u79CD\u5F62\u6001\u3002" }), _jsx("span", { children: "\u63D0\u4F9B\u524D\u7F00/\u540E\u7F00\u56FE\u6807\u3001\u6E05\u9664\u6309\u94AE\u3001\u5B57\u7B26\u8BA1\u6570\u3001\u5BC6\u7801\u5207\u6362\u3001\u72B6\u6001\u53CD\u9988\u7B49\u4E30\u5BCC\u529F\u80FD\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { Input, Textarea } from 'starry-sky-ui';
+import type { InputProps, TextareaProps } from 'starry-sky-ui';
+
+// 受控使用
+const [value, setValue] = useState('');
+<Input value={value} onChange={(val) => setValue(val)} placeholder="请输入" />
+
+// 多行文本
+<Textarea rows={3} placeholder="请输入内容" />` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-demo-base" }, { children: "\u57FA\u672C\u7528\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u53D7\u63A7\u8F93\u5165\u6846", code: `const [value, setValue] = useState('');
+<Input value={value} onChange={(val) => setValue(val)} placeholder="请输入内容" />` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 280 } }, { children: _jsx(Input, { value: inputVal, onChange: (val) => setInputVal(val), placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }) })), _jsxs("span", Object.assign({ className: "adui-demo-badge" }, { children: ["\u503C\uFF1A", inputVal || '—'] }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-demo-size" }, { children: "\u4E09\u79CD\u5C3A\u5BF8" })), _jsx(DemoCard, Object.assign({ title: "small / middle / large", code: `<Input size="small" placeholder="Small" />
+<Input size="middle" placeholder="Middle" />
+<Input size="large" placeholder="Large" />` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 200 } }, { children: _jsx(Input, { size: "small", placeholder: "Small" }) })), _jsx("div", Object.assign({ style: { width: 200 } }, { children: _jsx(Input, { size: "middle", placeholder: "Middle" }) })), _jsx("div", Object.assign({ style: { width: 200 } }, { children: _jsx(Input, { size: "large", placeholder: "Large" }) }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-demo-prefix" }, { children: "\u524D\u7F00\u4E0E\u540E\u7F00" })), _jsxs(DemoCard, Object.assign({ title: "prefix / suffix", code: `<Input prefix="🔍" placeholder="搜索..." />
+<Input suffix="📅" placeholder="选择日期" />
+<Input prefix="💰" suffix="元" placeholder="金额" />` }, { children: [_jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 240 } }, { children: _jsx(Input, { prefix: "\uD83D\uDD0D", placeholder: "\u641C\u7D22..." }) })), _jsx("div", Object.assign({ style: { width: 240 } }, { children: _jsx(Input, { suffix: "\uD83D\uDCC5", placeholder: "\u9009\u62E9\u65E5\u671F" }) }))] })), _jsx("div", Object.assign({ style: { width: 240, marginTop: 12 } }, { children: _jsx(Input, { prefix: "\uD83D\uDCB0", suffix: "\u5143", placeholder: "\u91D1\u989D" }) }))] })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-demo-clear" }, { children: "\u6E05\u9664\u4E0E\u8BA1\u6570" })), _jsxs(DemoCard, Object.assign({ title: "allowClear + showCount", code: `<Input allowClear placeholder="可清除" />
+<Input maxLength={20} showCount placeholder="输入计数" />
+<Input allowClear maxLength={50} showCount defaultValue="可清除且计数" />` }, { children: [_jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 220 } }, { children: _jsx(Input, { allowClear: true, placeholder: "\u53EF\u6E05\u9664" }) })), _jsx("div", Object.assign({ style: { width: 220 } }, { children: _jsx(Input, { maxLength: 20, showCount: true, placeholder: "\u8F93\u5165\u8BA1\u6570" }) }))] })), _jsx("div", Object.assign({ style: { width: 320, marginTop: 12 } }, { children: _jsx(Input, { allowClear: true, maxLength: 50, showCount: true, value: inputVal2, onChange: (val) => setInputVal2(val) }) }))] })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-demo-password" }, { children: "\u5BC6\u7801\u6846" })), _jsx(DemoCard, Object.assign({ title: "type=\"password\"", code: `<Input type="password" placeholder="请输入密码" />
+<Input type="password" value={pwd} onChange={setPwd} />` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 260 } }, { children: _jsx(Input, { type: "password", placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801" }) })), _jsx("div", Object.assign({ style: { width: 260 } }, { children: _jsx(Input, { type: "password", value: pwdVal, onChange: (val) => setPwdVal(val), placeholder: "\u53D7\u63A7\u5BC6\u7801" }) }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-demo-status" }, { children: "\u72B6\u6001" })), _jsx(DemoCard, Object.assign({ title: "status \u53CD\u9988", code: `<Input status="error" placeholder="错误状态" />
+<Input status="warning" placeholder="警告状态" />
+<Input status="error" placeholder="禁用" disabled />` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 220 } }, { children: _jsx(Input, { status: "error", placeholder: "\u9519\u8BEF\u72B6\u6001" }) })), _jsx("div", Object.assign({ style: { width: 220 } }, { children: _jsx(Input, { status: "warning", placeholder: "\u8B66\u544A\u72B6\u6001" }) })), _jsx("div", Object.assign({ style: { width: 220 } }, { children: _jsx(Input, { status: "error", placeholder: "\u7981\u7528\u9519\u8BEF", disabled: true }) }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "input-demo-textarea" }, { children: "\u591A\u884C\u6587\u672C" })), _jsx(DemoCard, Object.assign({ title: "Textarea \u57FA\u672C\u7528\u6CD5", code: `<Textarea rows={3} placeholder="请输入内容" />
+<Textarea rows={3} maxLength={200} showCount placeholder="带字符计数" />` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 320 } }, { children: _jsx(Textarea, { rows: 3, placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", value: taVal, onChange: (val) => setTaVal(val) }) })), _jsx("div", Object.assign({ style: { width: 320 } }, { children: _jsx(Textarea, { rows: 3, maxLength: 200, showCount: true, placeholder: "\u5E26\u5B57\u7B26\u8BA1\u6570" }) }))] })) })), _jsxs(DemoCard, Object.assign({ title: "Textarea \u5C3A\u5BF8\u4E0E\u81EA\u9002\u5E94", code: `<Textarea size="small" rows={2} placeholder="Small" />
+<Textarea size="large" rows={4} placeholder="Large" />
+<Textarea autoSize rows={1} placeholder="自适应高度（试试输入多行）" />` }, { children: [_jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 260 } }, { children: _jsx(Textarea, { size: "small", rows: 2, placeholder: "Small" }) })), _jsx("div", Object.assign({ style: { width: 260 } }, { children: _jsx(Textarea, { size: "large", rows: 4, placeholder: "Large" }) }))] })), _jsx("div", Object.assign({ style: { width: 400, marginTop: 12 } }, { children: _jsx(Textarea, { autoSize: true, rows: 1, placeholder: "\u81EA\u9002\u5E94\u9AD8\u5EA6\uFF08\u8BD5\u8BD5\u8F93\u5165\u591A\u884C\uFF09" }) }))] }))] }));
+};
+/* ========== Table 内容 ========== */
+const tableData = [
+    { key: '1', name: 'React', version: '18.3.1', type: '前端框架', usage: '81%', author: 'Meta' },
+    { key: '2', name: 'Vue', version: '3.4.0', type: '前端框架', usage: '65%', author: '尤雨溪' },
+    { key: '3', name: 'Angular', version: '17.0.0', type: '前端框架', usage: '42%', author: 'Google' },
+    { key: '4', name: 'Node.js', version: '22.0.0', type: '运行时', usage: '78%', author: 'OpenJS' },
+    { key: '5', name: 'TypeScript', version: '5.4.0', type: '语言', usage: '73%', author: 'Microsoft' },
+    { key: '6', name: 'Webpack', version: '5.90.0', type: '构建工具', usage: '89%', author: 'Webpack' },
+    { key: '7', name: 'Vite', version: '5.2.0', type: '构建工具', usage: '58%', author: 'Evan You' },
+    { key: '8', name: 'Express', version: '4.18.0', type: '后端框架', usage: '70%', author: 'TJ' },
+    { key: '9', name: 'Next.js', version: '14.2.0', type: '全栈框架', usage: '52%', author: 'Vercel' },
+    { key: '10', name: 'Tailwind CSS', version: '3.4.0', type: 'CSS 框架', usage: '45%', author: 'Tailwind Labs' },
+    { key: '11', name: 'Docker', version: '26.0.0', type: '容器', usage: '61%', author: 'Docker Inc' },
+    { key: '12', name: 'Redis', version: '7.4.0', type: '缓存', usage: '55%', author: 'Redis Labs' },
+];
+const sortByName = (a, b) => a.name.localeCompare(b.name);
+const sortByVersion = (a, b) => parseFloat(b.version) - parseFloat(a.version);
+const sortByUsage = (a, b) => parseFloat(b.usage) - parseFloat(a.usage);
+const TableContent = () => {
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const baseColumns = [
+        { title: '名称', dataIndex: 'name', key: 'name', sorter: sortByName, width: 140 },
+        { title: '版本', dataIndex: 'version', key: 'version', sorter: sortByVersion, width: 100 },
+        { title: '分类', dataIndex: 'type', key: 'type', width: 110 },
+        {
+            title: '使用率',
+            dataIndex: 'usage',
+            key: 'usage',
+            sorter: sortByUsage,
+            width: 100,
+            render: (val) => (_jsxs("span", Object.assign({ style: { display: 'flex', alignItems: 'center', gap: 6 } }, { children: [_jsx("span", Object.assign({ style: {
+                            display: 'inline-block',
+                            width: 60,
+                            height: 6,
+                            borderRadius: 3,
+                            background: 'rgba(139,92,246,0.2)',
+                            overflow: 'hidden',
+                        } }, { children: _jsx("span", { style: {
+                                display: 'block',
+                                width: val,
+                                height: '100%',
+                                borderRadius: 3,
+                                background: 'linear-gradient(90deg, #8b5cf6, #3b82f6)',
+                            } }) })), val] }))),
+        },
+        { title: '作者', dataIndex: 'author', key: 'author', width: 120 },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "table-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u4EE5\u8868\u683C\u5F62\u5F0F\u5C55\u793A\u5927\u91CF\u7ED3\u6784\u5316\u6570\u636E\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u9002\u5408\u9700\u8981\u5BF9\u6570\u636E\u8FDB\u884C\u6392\u5E8F\u3001\u7B5B\u9009\u3001\u5206\u9875\u6D4F\u89C8\u7684\u573A\u666F\u3002" }), _jsx("span", { children: "\u652F\u6301\u884C\u9009\u62E9\u64CD\u4F5C\uFF0C\u9002\u5408\u6279\u91CF\u5904\u7406\u6570\u636E\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "table-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { Table } from 'starry-sky-ui';
+import type { ColumnType } from 'starry-sky-ui';
+
+const columns: ColumnType[] = [
+  { title: '名称', dataIndex: 'name', key: 'name', sorter: (a, b) => a.name.localeCompare(b.name) },
+  { title: '版本', dataIndex: 'version', key: 'version' },
+];` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "table-demo-base" }, { children: "\u57FA\u672C\u7528\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u57FA\u7840\u8868\u683C\uFF08\u5E26\u5206\u9875\uFF09", code: `<Table
+  columns={columns}
+  dataSource={data}
+  rowKey="key"
+  pagination={{
+    pageSize: 5,
+    showSizeChanger: true,
+    showTotal: true,
+  }}
+/>` }, { children: _jsx(Table, { columns: baseColumns, dataSource: tableData, rowKey: "key", pagination: { pageSize: 5, showSizeChanger: true, showTotal: true }, size: "middle" }) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "table-demo-sort" }, { children: "\u6392\u5E8F" })), _jsx(DemoCard, Object.assign({ title: "\u70B9\u51FB\u5217\u5934\u6392\u5E8F", code: `{ title: '名称', dataIndex: 'name', sorter: (a, b) => a.name.localeCompare(b.name) }
+{ title: '版本', dataIndex: 'version', sorter: (a, b) => b.version - a.version }
+{ title: '使用率', dataIndex: 'usage', sorter: (a, b) => b.usage - a.usage }` }, { children: _jsx(Table, { columns: baseColumns, dataSource: tableData, rowKey: "key", pagination: { pageSize: 5, showTotal: true }, size: "middle", bordered: true }) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "table-demo-select" }, { children: "\u884C\u9009\u62E9" })), _jsxs(DemoCard, Object.assign({ title: "\u590D\u9009\u6846\u884C\u9009\u62E9", code: `const [selectedKeys, setSelectedKeys] = useState([]);
+
+<Table
+  rowSelection={{
+    selectedRowKeys: selectedKeys,
+    onChange: (keys, rows) => setSelectedKeys(keys),
+  }}
+  columns={columns}
+  dataSource={data}
+  rowKey="key"
+/>` }, { children: [_jsx(Table, { columns: baseColumns, dataSource: tableData, rowKey: "key", pagination: { pageSize: 5, showTotal: true }, size: "middle", rowSelection: {
+                            selectedRowKeys: selectedKeys,
+                            onChange: (keys) => setSelectedKeys(keys),
+                        } }), selectedKeys.length > 0 && (_jsxs("div", Object.assign({ className: "adui-table-selected-info", style: { marginTop: 8, fontSize: 13, color: '#888' } }, { children: ["\u5DF2\u9009\u62E9 ", selectedKeys.length, " \u9879"] })))] })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "table-demo-loading" }, { children: "\u52A0\u8F7D & \u7A7A\u6001" })), _jsx(DemoCard, Object.assign({ title: "\u52A0\u8F7D\u72B6\u6001", code: `<Table columns={columns} dataSource={[]} loading />` }, { children: _jsx(Table, { columns: baseColumns, dataSource: tableData.slice(0, 3), rowKey: "key", loading: true, size: "middle" }) })), _jsx(DemoCard, Object.assign({ title: "\u7A7A\u6570\u636E", code: `<Table columns={columns} dataSource={[]} emptyText="暂无数据" />` }, { children: _jsx(Table, { columns: baseColumns, dataSource: [], rowKey: "key", emptyText: "\u6682\u65E0\u6570\u636E", size: "middle" }) }))] }));
+};
+/* ========== Pagination 内容 ========== */
+const PaginationContent = () => {
+    const [controlledPage, setControlledPage] = useState(3);
+    return (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "pagination-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u5C06\u5927\u91CF\u6570\u636E\u5206\u6279\u6B21\u5C55\u793A\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u9002\u5408\u6570\u636E\u91CF\u8D85\u8FC7\u4E00\u9875\u663E\u793A\u8303\u56F4\u3001\u9700\u8981\u7FFB\u9875\u6D4F\u89C8\u7684\u573A\u666F\u3002" }), _jsx("span", { children: "\u652F\u6301\u53D7\u63A7\u548C\u975E\u53D7\u63A7\u4E24\u79CD\u6A21\u5F0F\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "pagination-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { Pagination } from 'starry-sky-ui';
+
+<Pagination total={100} defaultCurrent={1} defaultPageSize={10} onChange={(page, size) => console.log(page, size)} />` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "pagination-demo-base" }, { children: "\u57FA\u672C\u7528\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u975E\u53D7\u63A7\u5206\u9875", code: `<Pagination total={200} defaultCurrent={1} showTotal showSizeChanger />` }, { children: _jsx(Pagination, { total: 200, defaultCurrent: 1, showTotal: true, showSizeChanger: true, onChange: (p) => console.log(p) }) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "pagination-demo-controlled" }, { children: "\u53D7\u63A7\u6A21\u5F0F" })), _jsxs(DemoCard, Object.assign({ title: "\u53D7\u63A7\u5206\u9875", code: `const [page, setPage] = useState(3);
+const [size, setSize] = useState(10);
+
+<Pagination
+  current={page}
+  pageSize={size}
+  total={500}
+  showTotal
+  showSizeChanger
+  onChange={(p, s) => { setPage(p); setSize(s); }}
+/>` }, { children: [_jsx(Pagination, { current: controlledPage, total: 200, showTotal: true, showSizeChanger: true, onChange: (p) => setControlledPage(p) }), _jsxs("div", Object.assign({ className: "adui-demo-badge", style: { marginTop: 8, display: 'inline-block' } }, { children: ["\u5F53\u524D\u9875: ", controlledPage] }))] })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "pagination-demo-more" }, { children: "\u66F4\u591A\u529F\u80FD" })), _jsx(DemoCard, Object.assign({ title: "\u7B80\u6D01\u6A21\u5F0F", code: `<Pagination total={100} simple />` }, { children: _jsx(Pagination, { total: 100, simple: true }) })), _jsx(DemoCard, Object.assign({ title: "\u5FEB\u901F\u8DF3\u8F6C", code: `<Pagination total={500} showQuickJumper />` }, { children: _jsx(Pagination, { total: 500, showQuickJumper: true, onChange: (p) => console.log(p) }) })), _jsx(DemoCard, Object.assign({ title: "\u5C0F\u5C3A\u5BF8", code: `<Pagination total={200} size="small" showTotal showSizeChanger />` }, { children: _jsx(Pagination, { total: 200, size: "small", showTotal: true, showSizeChanger: true }) })), _jsx(DemoCard, Object.assign({ title: "\u7981\u7528", code: `<Pagination total={200} disabled />` }, { children: _jsx(Pagination, { total: 200, disabled: true, showTotal: true }) }))] }));
+};
+/* ========== ContentRenderer 内容 ========== */
+const crDemoMarkdown = `## 欢迎使用 Markdown 渲染
+
+这是一个 **内容展示组件** 的演示，支持以下语法：
+
+### 基础格式
+
+- **粗体**、*斜体*、~~删除线~~
+- [链接文本](https://example.com)
+- \`行内代码\`
+
+### 引用块
+
+> 这是一段引用文字，
+> 支持多行引用。
+
+### 表格
+
+| 特性 | 状态 | 版本 |
+|------|------|------|
+| GFM 表格 | ✅ | 1.0 |
+| 代码高亮 | ✅ | 1.0 |
+| 复制按钮 | ✅ | 1.1 |
+`;
+const crCodeDemo = `\`\`\`typescript
+// 类型安全的 React Hook
+import { useState, useCallback } from 'react';
+
+interface UseToggleReturn {
+  value: boolean;
+  toggle: () => void;
+  setTrue: () => void;
+  setFalse: () => void;
+}
+
+function useToggle(initial = false): UseToggleReturn {
+  const [value, setValue] = useState(initial);
+  const toggle = useCallback(() => setValue(v => !v), []);
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+
+  return { value, toggle, setTrue, setFalse };
+}
+\`\`\`
+
+\`\`\`css
+/* 响应式卡片布局 */
+.articles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+  padding: 2rem 0;
+}
+
+@media (max-width: 768px) {
+  .articles-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+\`\`\`
+`;
+const crGfmDemo = `## GFM 扩展语法
+
+### 任务列表
+
+- [x] 完成基础渲染
+- [x] 支持代码高亮
+- [ ] 添加复制按钮 (已完成)
+- [ ] 支持数学公式
+
+### 自动链接
+
+访问 https://github.com 自动转为链接。
+
+### 表格中对齐
+
+| 左对齐 | 居中对齐 | 右对齐 |
+|:-------|:--------:|-------:|
+| 内容 A | 内容 B   | 内容 C |
+| 内容 D | 内容 E   | 内容 F |
+`;
+const ContentRendererContent = () => (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "cr-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u6E32\u67D3 Markdown \u683C\u5F0F\u7684\u5185\u5BB9\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u9002\u5408\u5C55\u793A AI \u56DE\u590D\u3001\u535A\u5BA2\u5185\u5BB9\u3001\u6587\u6863\u8BF4\u660E\u7B49\u5BCC\u6587\u672C\u573A\u666F\u3002" }), _jsx("span", { children: "\u652F\u6301\u4EE3\u7801\u8BED\u6CD5\u9AD8\u4EAE\u3001\u8868\u683C\u3001\u5217\u8868\u3001\u5F15\u7528\u5757\u7B49\u4E30\u5BCC\u683C\u5F0F\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "cr-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { ContentRenderer } from 'starry-sky-ui';
+import type { ContentRendererProps } from 'starry-sky-ui';
+
+<ContentRenderer content="# Hello\\n\\nMarkdown **内容**" />` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "cr-demo-base" }, { children: "\u57FA\u672C\u7528\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u6E32\u67D3 Markdown \u5185\u5BB9", code: `<ContentRenderer content={markdownText} />` }, { children: _jsx(ContentRenderer, { content: crDemoMarkdown }) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "cr-demo-code" }, { children: "\u4EE3\u7801\u9AD8\u4EAE" })), _jsx(DemoCard, Object.assign({ title: "TypeScript + CSS \u4EE3\u7801\u5757", code: `<ContentRenderer content={codeExample} />` }, { children: _jsx(ContentRenderer, { content: crCodeDemo }) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "cr-demo-gfm" }, { children: "GFM \u8BED\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u4EFB\u52A1\u5217\u8868 + \u8868\u683C\u5BF9\u9F50", code: `<ContentRenderer content={gfmText} />` }, { children: _jsx(ContentRenderer, { content: crGfmDemo }) }))] }));
+/* ========== ChatInput 内容 ========== */
+const ChatInputContent = () => {
+    const [chatLoading, setChatLoading] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "ci-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u7528\u6237\u8F93\u5165\u6D88\u606F\u8FDB\u884C\u5BF9\u8BDD\u4EA4\u4E92\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u4EFF DeepSeek \u8F93\u5165\u6846\u8BBE\u8BA1\uFF0C\u652F\u6301\u591A\u884C\u8F93\u5165\u3001\u56DE\u8F66\u53D1\u9001\u3002" }), _jsx("span", { children: "\u914D\u5957 ContentRenderer \u7EC4\u4EF6\u53EF\u5B8C\u7F8E\u5C55\u793A AI \u56DE\u590D\u5185\u5BB9\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "ci-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { ChatInput } from 'starry-sky-ui';
+import type { ChatInputProps } from 'starry-sky-ui';
+
+<ChatInput
+  onSend={(msg) => console.log(msg)}
+  loading={false}
+  placeholder="输入消息..."
+/>` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "ci-demo-base" }, { children: "\u57FA\u672C\u7528\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u9ED8\u8BA4\u72B6\u6001", code: `<ChatInput
+  onSend={(msg) => console.log(msg)}
+  placeholder="输入消息..."
+/>` }, { children: _jsx("div", Object.assign({ style: { maxWidth: 500, margin: '0 auto' } }, { children: _jsx(ChatInput, { onSend: (msg) => message.info(`发送: ${msg}`), placeholder: "\u8F93\u5165\u6D88\u606F\uFF0CEnter \u53D1\u9001..." }) })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "ci-demo-loading" }, { children: "\u52A0\u8F7D\u72B6\u6001" })), _jsx(DemoCard, Object.assign({ title: "loading \u505C\u6B62\u751F\u6210", code: `const [loading, setLoading] = useState(false);
+<ChatInput
+  onSend={loading ? undefined : () => setLoading(true)}
+  loading={loading}
+  placeholder={loading ? 'AI 正在回复...' : '输入消息...'}
+/>` }, { children: _jsx("div", Object.assign({ style: { maxWidth: 500, margin: '0 auto' } }, { children: _jsx(ChatInput, { onSend: chatLoading ? () => setChatLoading(false) : () => setChatLoading(true), loading: chatLoading, placeholder: chatLoading ? '点击停止生成' : '点击发送开始模拟加载' }) })) }))] }));
+};
+/* ========== Starfield ========== */
+const StarfieldContent = () => (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "starfield-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u4E3A\u9875\u9762\u6DFB\u52A0\u661F\u7A7A\u80CC\u666F\u88C5\u9970\u6548\u679C\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u9002\u5408\u9996\u9875\u3001\u767B\u5F55\u9875\u3001\u843D\u5730\u9875\u7B49\u9700\u8981\u89C6\u89C9\u6C1B\u56F4\u7684\u573A\u666F\u3002" }), _jsx("span", { children: "\u652F\u6301\u81EA\u5B9A\u4E49\u661F\u661F\u6570\u91CF\u3001\u989C\u8272\u548C\u95EA\u70C1\u901F\u5EA6\uFF0C\u878D\u5165\u4E0D\u540C\u89C6\u89C9\u98CE\u683C\u3002" })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "starfield-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { Starfield } from 'starry-sky-ui';
+
+// 直接使用，默认参数即可呈现星空效果
+<Starfield />` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "starfield-demo-basic" }, { children: "\u57FA\u672C\u7528\u6CD5" })), _jsx(DemoCard, Object.assign({ title: "\u9ED8\u8BA4\u53C2\u6570", code: `<Starfield />` }, { children: _jsxs("div", Object.assign({ style: { position: 'relative', height: 240, borderRadius: 8, overflow: 'hidden', background: '#0a0a1a' } }, { children: [_jsx(Starfield, {}), _jsx("div", Object.assign({ style: { position: 'relative', zIndex: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#fff', fontSize: 18, opacity: 0.7 } }, { children: "\u9ED8\u8BA4 350 \u9897\u661F\u661F" }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "starfield-demo-custom" }, { children: "\u81EA\u5B9A\u4E49\u53C2\u6570" })), _jsx(DemoCard, Object.assign({ title: "\u81EA\u5B9A\u4E49\u989C\u8272\u4E0E\u6570\u91CF", code: `<Starfield
+  starCount={100}
+  starColors={['#ff6b6b', '#ffd93d', '#6bcb77']}
+  time={5}
+/>` }, { children: _jsxs("div", Object.assign({ style: { position: 'relative', height: 240, borderRadius: 8, overflow: 'hidden', background: '#0a0a1a' } }, { children: [_jsx(Starfield, { starCount: 100, starColors: ['#ff6b6b', '#ffd93d', '#6bcb77'], time: 5 }), _jsx("div", Object.assign({ style: { position: 'relative', zIndex: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#fff', fontSize: 18, opacity: 0.7 } }, { children: "100 \u9897\u5F69\u8272\u661F\u661F\uFF0C5s \u6700\u5927\u5EF6\u8FDF" }))] })) }))] }));
+/* ========== Utils 工具函数 ========== */
+const UtilsContent = () => {
+    const [formatResult, setFormatResult] = useState('');
+    // 文件上传相关
+    const fileInputRef = useRef(null);
+    const [imageInfo, setImageInfo] = useState('');
+    const handleImageSelect = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        try {
+            const info = yield adUtils.getImageInfo(file);
+            setImageInfo(`${info.width} × ${info.height}  |  ${file.type}`);
+        }
+        catch (_b) {
+            message.error('读取图片信息失败');
+        }
+    }), []);
+    const handleCompress = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d;
+        const file = (_d = (_c = fileInputRef.current) === null || _c === void 0 ? void 0 : _c.files) === null || _d === void 0 ? void 0 : _d[0];
+        if (!file) {
+            message.warning('请先选择一张图片');
+            return;
+        }
+        try {
+            const blob = yield adUtils.compressImage(file, { quality: 0.5, maxDimension: 600, format: 'image/webp' });
+            message.success(`压缩完成！大小：${adUtils.formatFileSize(blob.size)}`);
+            // 触发下载
+            adUtils.downloadFile(blob, { filename: 'compressed.webp' });
+        }
+        catch (_e) {
+            message.error('压缩失败');
+        }
+    }), []);
+    return (_jsxs(_Fragment, { children: [_jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "utils-when" }, { children: "\u4F55\u65F6\u4F7F\u7528" })), _jsxs(WhenUse, { children: [_jsx("span", { children: "\u9700\u8981\u4F7F\u7528\u6587\u4EF6\u5904\u7406\uFF08\u4E0B\u8F7D\u3001\u683C\u5F0F\u8F6C\u6362\uFF09\u3001\u56FE\u7247\u5904\u7406\uFF08\u538B\u7F29\u3001\u83B7\u53D6\u4FE1\u606F\uFF09\u3001\u4E8B\u4EF6\u63A7\u5236\uFF08\u9632\u6296\u3001\u8282\u6D41\uFF09\u7B49\u8F7B\u91CF\u5DE5\u5177\u65F6\u4F7F\u7528\u3002" }), _jsx("span", { children: "\u65E0\u9700\u5B89\u88C5\u989D\u5916\u4F9D\u8D56\uFF0C\u6240\u6709\u51FD\u6570\u5747\u4E3A\u96F6\u4F9D\u8D56\u7EAF\u51FD\u6570\u3002" }), _jsxs("span", { children: ["\u6240\u6709\u5DE5\u5177\u51FD\u6570\u901A\u8FC7 ", _jsx("code", { children: "adUtils" }), " \u547D\u540D\u7A7A\u95F4\u7EDF\u4E00\u8BBF\u95EE\u3002"] })] }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "utils-how" }, { children: "\u5982\u4F55\u4F7F\u7528" })), _jsx(HowUse, { importCode: `import { adUtils } from 'starry-sky-ui';
+
+// 文件工具
+adUtils.formatFileSize(1536);        // "1.50 KB"
+adUtils.downloadFile(url, { filename: 'doc.xlsx' });
+
+// 图片工具
+const info = await adUtils.getImageInfo(file);
+const blob = await adUtils.compressImage(file, { quality: 0.75 });
+
+// 事件工具
+const handleSearch = adUtils.debounce((val) => fetch(val), 500);
+await adUtils.sleep(1000);` }), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "utils-demo-file" }, { children: "\u6587\u4EF6\u5DE5\u5177" })), _jsx(DemoCard, Object.assign({ title: "formatFileSize \u6587\u4EF6\u5927\u5C0F\u683C\u5F0F\u5316", code: `import { adUtils } from 'starry-sky-ui';
+
+adUtils.formatFileSize(0);        // "0 B"
+adUtils.formatFileSize(1024);     // "1.00 KB"
+adUtils.formatFileSize(1536);     // "1.50 KB"
+adUtils.formatFileSize(1048576);  // "1.00 MB"` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("div", Object.assign({ style: { width: 280 } }, { children: _jsx(Input, { placeholder: "\u8F93\u5165\u5B57\u8282\u6570\uFF0C\u5982 1536", onChange: (val) => {
+                                    const num = parseInt(val);
+                                    setFormatResult(isNaN(num) ? '' : adUtils.formatFileSize(num));
+                                } }) })), _jsx("span", Object.assign({ className: "adui-demo-badge" }, { children: formatResult || '等待输入...' }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "utils-demo-image" }, { children: "\u56FE\u7247\u5DE5\u5177" })), _jsx(DemoCard, Object.assign({ title: "getImageInfo + compressImage", code: `import { adUtils } from 'starry-sky-ui';
+
+// 获取图片信息
+const info = await adUtils.getImageInfo(file);
+// { width: 1920, height: 1080, type: 'image/jpeg' }
+
+// 压缩并下载
+const blob = await adUtils.compressImage(file, {
+  quality: 0.5,
+  maxDimension: 600,
+  format: 'image/webp'
+});
+adUtils.downloadFile(blob, { filename: 'compressed.webp' });` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row", style: { flexDirection: 'column', gap: 12 } }, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: handleImageSelect }), _jsxs("div", Object.assign({ style: { display: 'flex', gap: 8, flexWrap: 'wrap' } }, { children: [_jsx("button", Object.assign({ className: "adui-btn", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }, { children: "\u9009\u62E9\u56FE\u7247" })), _jsx("button", Object.assign({ className: "adui-btn adui-btn-green", onClick: handleCompress }, { children: "\u538B\u7F29\u5E76\u4E0B\u8F7D WebP" }))] })), imageInfo && _jsx("span", Object.assign({ className: "adui-demo-badge" }, { children: imageInfo }))] })) })), _jsx("h3", Object.assign({ className: "adui-anchor-heading", id: "utils-demo-event" }, { children: "\u4E8B\u4EF6\u5DE5\u5177" })), _jsx(DemoCard, Object.assign({ title: "debounce \u9632\u6296 + sleep \u5EF6\u8FDF", code: `import { adUtils } from 'starry-sky-ui';
+
+// 防抖：快速点击只执行最后一次
+const handleSearch = adUtils.debounce((val) => {
+  fetchResults(val);
+}, 500);
+
+// sleep：异步等待
+await adUtils.sleep(1000); // 等待 1 秒` }, { children: _jsxs("div", Object.assign({ className: "adui-demo-row" }, { children: [_jsx("button", Object.assign({ className: "adui-btn", onClick: adUtils.debounce(() => {
+                                message.success('防抖执行！快速点击只触发一次');
+                            }, 800) }, { children: "\u5FEB\u901F\u70B9\u51FB\u6D4B\u8BD5\u9632\u6296" })), _jsx("button", Object.assign({ className: "adui-btn adui-btn-green", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                message.loading('等待 2 秒...', 0);
+                                yield adUtils.sleep(2000);
+                                message.success('sleep 结束！');
+                            }) }, { children: "sleep 2\u79D2" }))] })) }))] }));
+};
+const componentContent = {
+    message: MessageContent,
+    modal: ModalContent,
+    select: SelectContent,
+    input: InputContent,
+    table: TableContent,
+    pagination: PaginationContent,
+    'content-renderer': ContentRendererContent,
+    'chat-input': ChatInputContent,
+    starfield: StarfieldContent,
+    utils: UtilsContent,
+};
+/* ========== 主页面 ========== */
+const AdUI = () => {
+    const [currentComp, setCurrentComp] = useState('message');
+    const [activeAnchor, setActiveAnchor] = useState('message-when');
+    const layoutRef = useRef(null);
+    const currentAnchors = anchorMap[currentComp];
+    const compMeta = components.find((c) => c.id === currentComp);
+    const ContentComp = componentContent[currentComp];
+    // IntersectionObserver 跟踪可见锚点
+    useEffect(() => {
+        // 阻止外层 main-content 滚动，避免双滚动条
+        const main = document.querySelector('.main-content');
+        if (main) {
+            const prev = main.style.overflow;
+            main.style.overflow = 'hidden';
+            // 组件卸载时恢复
+            return () => { main.style.overflow = prev; };
+        }
+    }, []);
+    // 锚点滚动跟踪
+    useEffect(() => {
+        const anchors = anchorMap[currentComp];
+        const els = anchors
+            .map((a) => document.getElementById(a.id))
+            .filter(Boolean);
+        if (!els.length)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    setActiveAnchor(entry.target.id);
+                }
+            }
+        }, {
+            root: layoutRef.current,
+            rootMargin: '-80px 0px -60% 0px',
+            threshold: 0,
+        });
+        els.forEach((el) => observer.observe(el));
+        return () => observer.disconnect();
+    }, [currentComp]);
+    // 切换组件
+    const switchComp = useCallback((id) => {
+        var _a;
+        setCurrentComp(id);
+        // 切换到第一个锚点
+        const firstId = (_a = anchorMap[id][0]) === null || _a === void 0 ? void 0 : _a.id;
+        if (firstId) {
+            setActiveAnchor(firstId);
+            // 等 DOM 渲染完后滚动到顶部
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = layoutRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
+            });
+        }
+    }, []);
+    // 点击右侧锚点
+    const scrollToAnchor = useCallback((anchorId) => {
+        const el = document.getElementById(anchorId);
+        if (el)
+            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        setActiveAnchor(anchorId);
+    }, []);
+    return (_jsxs("div", Object.assign({ className: "adui-layout", ref: layoutRef }, { children: [_jsx("aside", Object.assign({ className: "adui-sider" }, { children: _jsxs("div", Object.assign({ className: "adui-sider-inner" }, { children: [_jsxs("div", Object.assign({ className: "adui-sider-logo" }, { children: [_jsx("span", Object.assign({ className: "adui-sider-logo-icon" }, { children: "A" })), _jsx("span", { children: "AdUI \u7EC4\u4EF6" })] })), categories.map((cat) => (_jsxs("div", Object.assign({ className: "adui-nav-group" }, { children: [_jsx("div", Object.assign({ className: "adui-nav-group-title" }, { children: cat.label })), components
+                                    .filter((c) => c.category === cat.id)
+                                    .map((comp) => (_jsx("div", Object.assign({ className: `adui-nav-item ${currentComp === comp.id ? 'active' : ''}`, onClick: () => switchComp(comp.id) }, { children: comp.label }), comp.id)))] }), cat.id)))] })) })), _jsxs("main", Object.assign({ className: "adui-content" }, { children: [_jsxs("section", Object.assign({ className: "adui-hero" }, { children: [_jsx("h1", Object.assign({ className: "adui-hero-title" }, { children: "AdUI" })), _jsx("p", Object.assign({ className: "adui-hero-desc" }, { children: "\u963F\u5446 UI \u7EC4\u4EF6\u5E93 \u2014 \u8F7B\u91CF\u7EA7 React \u7EC4\u4EF6\uFF0CAPI \u8BBE\u8BA1\u53C2\u8003 Ant Design \u6807\u51C6" })), _jsxs("div", Object.assign({ className: "adui-hero-tags" }, { children: [_jsx("span", Object.assign({ className: "adui-tag" }, { children: "React 18" })), _jsx("span", Object.assign({ className: "adui-tag" }, { children: "TypeScript" })), _jsx("span", Object.assign({ className: "adui-tag" }, { children: "SCSS Modules" }))] }))] })), _jsxs("section", Object.assign({ className: "adui-comp-section", id: `${currentComp}-when` }, { children: [_jsx("h2", Object.assign({ className: "adui-comp-title" }, { children: compMeta.label })), _jsx("p", Object.assign({ className: "adui-comp-desc" }, { children: compMeta.desc })), _jsx(ContentComp, {})] }))] })), _jsx("aside", Object.assign({ className: "adui-anchor" }, { children: _jsxs("div", Object.assign({ className: "adui-anchor-inner" }, { children: [_jsx("div", Object.assign({ className: "adui-anchor-title" }, { children: "\u76EE\u5F55" })), currentAnchors.map((anchor) => (_jsx("div", Object.assign({ className: `adui-anchor-item ${activeAnchor === anchor.id ? 'active' : ''}`, onClick: () => scrollToAnchor(anchor.id) }, { children: anchor.label }), anchor.id)))] })) }))] })));
+};
+export default AdUI;
+//# sourceMappingURL=index.js.map