@ticatec/topside-elements 1.0.0

package/docs/components/button/README.md

@@ -0,0 +1,110 @@
+# Button
+
+通用组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+标准操作按钮，支持视觉变体、图标和原生提交类型。
+
+## 适用场景
+
+- 保存、确认、创建等主要操作
+- 表单提交或普通页面命令
+
+## 导入
+
+```ts
+import Button from '@ticatec/topside-elements/Button';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `type` | 否 | `ButtonType` | 否 | `'default'` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `htmlType` | 否 | `'button' \| 'submit' \| 'reset'` | 否 | `'button'` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `label` | 否 | `string` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `variant` | 是 | `'plain' \| 'round' \| ''` | 否 | `''` | 否 | 视觉样式变体，可选值：`plain`、`round`、`""`(默认)；具体含义见组件说明。 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。 |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `size` | 否 | `Size` | 否 | `'medium'` | 否 | 尺寸档位 |
+| `onclick` | 是 | `(event: MouseEvent) => void` | 否 | `undefined` | 否 | 用户点击组件时调用，参数通常为 MouseEvent。 |
+| `autofocus` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `icon` | 否 | `string \| null` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+| `data-*` | 否 | `any` | 否 | `透传` | 否 | 匹配此前缀的属性会透传给内部元素。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `variant`
+
+视觉样式变体，可选值：`plain`、`round`、`""`(默认)；具体含义见组件说明。
+
+- 类型：`'plain' | 'round' | ''`
+- 默认值：`''`
+- 示例写法：`variant="plain"`
+
+### `disabled`
+
+禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `onclick`
+
+用户点击组件时调用，参数通常为 MouseEvent。
+
+- 类型：`(event: MouseEvent) => void`
+- 默认值：`undefined`
+- 示例写法：`onclick={async (...args: any[]) => { console.log('onclick', ...args); return true; }}`
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `ButtonType`
+
+```ts
+export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+```
+
+### `Size`
+
+```ts
+export type Size = 'small' | 'medium' | 'large';
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Button from '@ticatec/topside-elements/Button';
+</script>
+
+<Button
+  onclick={async (...args: any[]) => { console.log('onclick', ...args); return true; }}
+  label="示例标签"
+  variant="plain"
+  disabled={false}
+  size="small"
+/>
+```
+
+## 源码
+
+- `src/lib/general/button/Button.svelte`

package/docs/components/button/example.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Button from '@ticatec/topside-elements/Button';
+</script>
+
+<Button
+  onclick={async (...args: any[]) => { console.log('onclick', ...args); return true; }}
+  label="示例标签"
+  variant="plain"
+  disabled={false}
+  size="small"
+/>

package/docs/components/card/README.md

@@ -0,0 +1,127 @@
+# Card
+
+数据展示组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+用于承载一组相关信息和操作的卡片容器。
+
+## 适用场景
+
+- 商品、用户和统计摘要展示
+- 仪表盘中的独立内容模块
+
+## 导入
+
+```ts
+import Card from '@ticatec/topside-elements/Card';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `style` | 否 | `string` | 否 | `""` | 否 | 附加到组件根元素的内联样式。 |
+| `title` | 否 | `string` | 否 | `""` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `actions` | 否 | `Array<CardAction>` | 否 | `[]` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `variant` | 是 | `'plain' \| '3d'` | 否 | `'plain'` | 否 | 视觉样式变体，可选值：`plain`、`3d`；具体含义见组件说明。 |
+| `data` | 否 | `any` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `header` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `actions$align` | 否 | `CardActionsAlign` | 否 | `'distribute'` | 否 | 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */ /** 动作栏对齐方式 |
+| `actionsGap` | 否 | `string` | 否 | `undefined` | 否 | 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' |
+| `content$style` | 否 | `string` | 否 | `''` | 否 | 内容区内联样式 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `variant`
+
+视觉样式变体，可选值：`plain`、`3d`；具体含义见组件说明。
+
+- 类型：`'plain' | '3d'`
+- 默认值：`'plain'`
+- 示例写法：`variant="plain"`
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `CardAction`
+
+```ts
+export default interface CardAction {
+
+    /**
+     * 显示文字（图标动作可省略，用 tooltip 说明）
+     */
+    label?: string;
+
+    /**
+     * 使用icon字体
+     */
+    icon?: string;
+
+    /**
+     * 直接嵌入图标
+     */
+    img?: string;
+
+    /**
+     * 鼠标停留的提示
+     */
+    tooltip?: string;
+
+    /**
+     *
+     */
+    disabled?: boolean;
+
+    /**
+     *
+     */
+    handler: ActionHandler;
+}
+```
+
+### `CardActionsAlign`
+
+```ts
+export type CardActionsAlign = 'distribute' | 'center' | 'left' | 'right';
+```
+
+### `ActionHandler`
+
+```ts
+export type ActionHandler<T = any> = (data: T) => void | Promise<void>;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Card from '@ticatec/topside-elements/Card';
+</script>
+
+<Card
+  title="示例标题"
+  variant="plain"
+>
+  <div>在这里放置子内容</div>
+</Card>
+```
+
+## 源码
+
+- `src/lib/data_display/card/Card.svelte`

package/docs/components/card/example.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Card from '@ticatec/topside-elements/Card';
+</script>
+
+<Card
+  title="示例标题"
+  variant="plain"
+>
+  <div>在这里放置子内容</div>
+</Card>

package/docs/components/cascade-options-select/README.md

@@ -0,0 +1,168 @@
+# CascadeOptionsSelect
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+按层级逐级选择选项的级联选择器。
+
+## 适用场景
+
+- 省市区、组织部门和产品分类
+- 后一级选项依赖前一级选择的数据
+
+## 导入
+
+```ts
+import CascadeOptionsSelect from '@ticatec/topside-elements/CascadeOptionsSelect';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称，用于切换组件外观主题 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息，鼠标悬浮在字段上时显示 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息，用于在字段下方展示校验错误提示 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 是否禁用该字段，禁用后字段不可编辑且不响应交互 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 是否只读，只读状态下字段不可编辑但可聚焦和复制 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 是否启用紧凑模式，紧凑模式下字段内部间距更小 |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
+| `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本，字段值为空时在输入区域内展示 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式，会应用到字段根容器上 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
+| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
+| `clearable` | 否 | `boolean` | 否 | `undefined` | 否 | 是否允许清空（显示清空按钮），默认 true |
+| `onkeydown` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onkeyup` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onkeypress` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `value` | 是 | `any` | 是 | `$bindable()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `nodes` | 是 | `Array<any>` | 否 | `$bindable([])` | 是 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `keyField` | 否 | `string` | 否 | `"code"` | 否 | 数据项中作为唯一值或选中值的字段名。 |
+| `textField` | 否 | `string` | 否 | `"text"` | 否 | 数据项中用于界面显示的文本字段名。 |
+| `abbrField` | 否 | `string` | 否 | `"abbr"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `childrenField` | 否 | `string` | 否 | `"children"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `emptyText` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `checkLeaf` | 否 | `IsLeaf \| null` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `menu$height` | 否 | `number` | 否 | `150` | 否 | 高度配置，数值单位为像素。 |
+| `box$style` | 否 | `string` | 否 | `""` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `loadChildren` | 否 | `LoadChildren` | 否 | `undefined` | 否 | 按需加载叶节点的子级选项；返回空数组表示确实是叶子 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `disabled`
+
+是否禁用该字段，禁用后字段不可编辑且不响应交互
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+是否只读，只读状态下字段不可编辑但可聚焦和复制
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `variant`
+
+编辑器外观样式变体
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `placeholder`
+
+占位提示文本，字段值为空时在输入区域内展示
+
+- 类型：`string`
+- 默认值：`undefined`
+- 示例写法：`placeholder="请输入或选择"`
+
+### `onchange`
+
+字段值发生变化时触发的回调
+
+- 类型：`(value?: any) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`any`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:value`
+
+### `nodes`
+
+可选配置，具体取值范围和数据结构见类型列。
+
+- 类型：`Array<any>`
+- 默认值：`$bindable([])`
+- 推荐写法：`bind:nodes`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+### `IsLeaf`
+
+```ts
+export type IsLeaf = (item: any) => boolean;
+```
+
+### `LoadChildren`
+
+```ts
+export type LoadChildren = (item: IHierarchyData<any>) => Promise<Array<any>>;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import CascadeOptionsSelect from '@ticatec/topside-elements/CascadeOptionsSelect';
+  let value = $state<any>();
+  let nodes = $state<any>([]);
+</script>
+
+<CascadeOptionsSelect
+  bind:value
+  bind:nodes
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  keyField="code"
+  textField="text"
+  disabled={false}
+/>
+<p>当前状态：{JSON.stringify({value, nodes})}</p>
+```
+
+## 源码
+
+- `src/lib/form/cascade_options_select/CascadeOptionSelect.svelte`

package/docs/components/cascade-options-select/example.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import CascadeOptionsSelect from '@ticatec/topside-elements/CascadeOptionsSelect';
+  let value = $state<any>();
+  let nodes = $state<any>([]);
+</script>
+
+<CascadeOptionsSelect
+  bind:value
+  bind:nodes
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  keyField="code"
+  textField="text"
+  disabled={false}
+/>
+<p>当前状态：{JSON.stringify({value, nodes})}</p>

package/docs/components/checkbox/README.md

@@ -0,0 +1,103 @@
+# Checkbox
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+表示独立布尔状态的复选框。
+
+## 适用场景
+
+- 同意条款、启用功能和批量选择
+- 多个互不排斥的开关型选项
+
+## 导入
+
+```ts
+import Checkbox from '@ticatec/topside-elements/Checkbox';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `label` | 否 | `string \| null` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 只读状态。保留内容展示，但阻止用户修改。 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `value` | 是 | `boolean` | 否 | `$bindable()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `indeterminate` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的内联样式。 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 启用紧凑尺寸，减少组件高度和内边距。 |
+| `onchange` | 是 | `(value: boolean) => void` | 否 | `undefined` | 否 | 用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 组件获得焦点时调用。 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 组件失去焦点时调用。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `readonly`
+
+只读状态。保留内容展示，但阻止用户修改。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `disabled`
+
+禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`boolean`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:value`
+
+### `onchange`
+
+用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。
+
+- 类型：`(value: boolean) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Checkbox from '@ticatec/topside-elements/Checkbox';
+  let value = $state<any>(true);
+</script>
+
+<Checkbox
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  label="示例标签"
+  readonly={false}
+  disabled={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/checkbox/CheckBox.svelte`

package/docs/components/checkbox/example.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Checkbox from '@ticatec/topside-elements/Checkbox';
+  let value = $state<any>(true);
+</script>
+
+<Checkbox
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  label="示例标签"
+  readonly={false}
+  disabled={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

package/docs/components/classic-layout/README.md

@@ -0,0 +1,76 @@
+# ClassicLayout
+
+应用布局组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+包含顶栏、侧栏、内容区和状态区的经典应用布局。
+
+## 适用场景
+
+- 企业后台和管理控制台
+- 需要稳定多区域框架的桌面应用
+
+## 导入
+
+```ts
+import ClassicLayout from '@ticatec/topside-elements/app-layout/ClassicLayout';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `headerHeight` | 否 | `string` | 否 | `"48px"` | 否 | 高度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `sidebarWidth` | 否 | `string` | 否 | `'300px'` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `statusHeight` | 否 | `string` | 否 | `"22px"` | 否 | 高度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `rightBarWidth` | 否 | `string` | 否 | `'240px'` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `sidebarResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `sidebarMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `sidebarMinWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `rightBarResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `rightBarMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `rightBarMinWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `header` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `sidebar` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+| `rightSidebar` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `bottom` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import ClassicLayout from '@ticatec/topside-elements/app-layout/ClassicLayout';
+</script>
+
+<ClassicLayout
+  headerHeight="48px"
+  sidebarWidth="240px"
+  statusHeight="48px"
+  rightBarWidth="240px"
+  sidebarMaxWidth="240px"
+  sidebarMinWidth="240px"
+  rightBarMaxWidth="240px"
+  rightBarMinWidth="240px"
+>
+  <div>在这里放置子内容</div>
+</ClassicLayout>
+```
+
+## 源码
+
+- `src/lib/app_layout/ClassicLayout.svelte`

package/docs/components/classic-layout/example.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import ClassicLayout from '@ticatec/topside-elements/app-layout/ClassicLayout';
+</script>
+
+<ClassicLayout
+  headerHeight="48px"
+  sidebarWidth="240px"
+  statusHeight="48px"
+  rightBarWidth="240px"
+  sidebarMaxWidth="240px"
+  sidebarMinWidth="240px"
+  rightBarMaxWidth="240px"
+  rightBarMinWidth="240px"
+>
+  <div>在这里放置子内容</div>
+</ClassicLayout>