@ticatec/topside-elements 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.2.1
+
+### 新增
+- **ListBox 列表内置首尾项（`contentHeader` / `contentFooter` Snippet）**：在 `.listbox-content` 滚动容器内部的最上部与最下部分别新增 `contentHeader` 与 `contentFooter` 插槽。与外部固定不滚动的 `header` / `footer` 不同，这两个插槽的内容位于滚动视口内，跟随列表项一起滚动，适合呈现“全部/快捷选项”、“底部新增”或说明信息。
+
+## 1.2.0
+
+### 新增
+- **应用布局分割线**：SidebarLayout / HeaderLayout / ClassicLayout / ColumnsLayout / RowsLayout 新增 `divider`（默认 `true`），面板之间显示分割线；与 `*Resize`（能否拖动）相互独立——不可拖动时为固定线，可拖动但 `divider=false` 时线条为 0px、悬停 / 拖动时仅显示把手。SidebarLayout / HeaderLayout / ClassicLayout 新增 `headerDivider`，ClassicLayout 新增 `bottomDivider`（默认 `false`）。
+
+### 行为变化
+- 布局默认会显示面板之间的 1px 分割线（此前只有开启 `*Resize` 时才有）。自己用 border 画过分割线的页面会出现双线，去掉 border 或设 `divider={false}`。
+
+### 修复
+- ClassicLayout：`sidebarResize` 为真但没有 `sidebar` snippet 时不再渲染多余的分割线。
+
 ## 1.1.0
 
 ### 新增

package/dist/app_layout/ClassicLayout.svelte

@@ -13,6 +13,12 @@
         rightBarResize?: boolean;
         rightBarMaxWidth?: string | null;
         rightBarMinWidth?: string | null;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
+        /** 头部与内容之间显示横向分割线，默认 false */
+        headerDivider?: boolean;
+        /** 内容与底部状态栏之间显示横向分割线，默认 false */
+        bottomDivider?: boolean;
         header?: Snippet;
         sidebar?: Snippet;
         children?: Snippet;
@@ -31,6 +37,9 @@
         rightBarResize = false,
         rightBarMaxWidth = null,
         rightBarMinWidth = null,
+        divider = true,
+        headerDivider = false,
+        bottomDivider = false,
         header,
         sidebar,
         children,
@@ -51,17 +60,18 @@
         <div class="header-area" style="height: {headerHeight}">
             {@render header()}
         </div>
+        {#if headerDivider}
+            <Split direction="horizontal"/>
+        {/if}
     {/if}
     <div class="middle-area">
         {#if sidebar}
             <div bind:this={sidebarPanel} class="sidebar" style="width: {sidebarWidth}; {maxWidth} {minWidth}">
-                {#if sidebar}
-                    {@render sidebar()}
-                {/if}
+                {@render sidebar()}
             </div>
-        {/if}
-        {#if sidebarResize}
-            <Split direction="vertical" bindingPanel={sidebarPanel}/>
+            {#if sidebarResize || divider}
+                <Split direction="vertical" bindingPanel={sidebarResize ? sidebarPanel : undefined} width={divider ? undefined : 0}/>
+            {/if}
         {/if}
         <div class="content-area">
             {#if children}
@@ -69,17 +79,18 @@
             {/if}
         </div>
         {#if rightSidebar}
-            {#if rightBarResize}
-                <Split direction="vertical" bindingPanel={rightBarPanel} reverse/>
+            {#if rightBarResize || divider}
+                <Split direction="vertical" bindingPanel={rightBarResize ? rightBarPanel : undefined} width={divider ? undefined : 0} reverse/>
             {/if}
             <div bind:this={rightBarPanel} class="right-sidebar" style="width: {rightBarWidth}; {rightMinWidth} {rightMaxWidth}">
-                {#if rightSidebar}
-                    {@render rightSidebar()}
-                {/if}
+                {@render rightSidebar()}
             </div>
         {/if}
     </div>
     {#if bottom}
+        {#if bottomDivider}
+            <Split direction="horizontal"/>
+        {/if}
         <div class="bottom-area" style="height: {statusHeight}">
             {@render bottom()}
         </div>

package/dist/app_layout/ClassicLayout.svelte.d.ts

@@ -10,6 +10,12 @@ interface Props {
     rightBarResize?: boolean;
     rightBarMaxWidth?: string | null;
     rightBarMinWidth?: string | null;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
+    /** 头部与内容之间显示横向分割线，默认 false */
+    headerDivider?: boolean;
+    /** 内容与底部状态栏之间显示横向分割线，默认 false */
+    bottomDivider?: boolean;
     header?: Snippet;
     sidebar?: Snippet;
     children?: Snippet;

package/dist/app_layout/ColumnsLayout.svelte

@@ -17,6 +17,8 @@
         rightMaxWidth?: string | null;
         leftResize?: boolean;
         rightResize?: boolean;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
         left?: Snippet;
         children?: Snippet;
         right?: Snippet;
@@ -33,6 +35,7 @@
         rightMaxWidth = null,
         leftResize = false,
         rightResize = false,
+        divider = true,
         left,
         children,
         right
@@ -57,8 +60,8 @@
             {@render left()}
         {/if}
     </div>
-    {#if leftResize}
-        <Split bindingPanel={leftPanel}/>
+    {#if leftResize || divider}
+        <Split bindingPanel={leftResize ? leftPanel : undefined} width={divider ? undefined : 0}/>
     {/if}
     <div class="center-panel">
         {#if children}
@@ -66,8 +69,8 @@
         {/if}
     </div>
     {#if right}
-        {#if rightResize}
-            <Split bindingPanel={rightPanel} reverse/>
+        {#if rightResize || divider}
+            <Split bindingPanel={rightResize ? rightPanel : undefined} width={divider ? undefined : 0} reverse/>
         {/if}
         <div bind:this={rightPanel} class="right-panel" style={rightStyle}>
             {@render right()}

package/dist/app_layout/ColumnsLayout.svelte.d.ts

@@ -14,6 +14,8 @@ interface Props {
     rightMaxWidth?: string | null;
     leftResize?: boolean;
     rightResize?: boolean;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
     left?: Snippet;
     children?: Snippet;
     right?: Snippet;

package/dist/app_layout/HeaderLayout.svelte

@@ -8,6 +8,10 @@
         sidebarResize?: boolean;
         sidebarMaxWidth?: string | null;
         sidebarMinWidth?: string | null;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
+        /** 头部与内容之间显示横向分割线，默认 false */
+        headerDivider?: boolean;
         header?: Snippet;
         sidebar?: Snippet;
         children?: Snippet;
@@ -19,6 +23,8 @@
         sidebarResize = false,
         sidebarMaxWidth = null,
         sidebarMinWidth = null,
+        divider = true,
+        headerDivider = false,
         header,
         sidebar,
         children
@@ -34,6 +40,9 @@
         <div class="header-area" style="height: {headerHeight}">
             {@render header()}
         </div>
+        {#if headerDivider}
+            <Split direction="horizontal"/>
+        {/if}
     {/if}
     <div class="content-wrapper">
         {#if sidebar}
@@ -42,8 +51,8 @@
                     {@render sidebar()}
                 {/if}
             </div>
-            {#if sidebarResize}
-                <Split direction="vertical" bindingPanel={sidebarPanel}/>
+            {#if sidebarResize || divider}
+                <Split direction="vertical" bindingPanel={sidebarResize ? sidebarPanel : undefined} width={divider ? undefined : 0}/>
             {/if}
         {/if}
         <div class="main-content">

package/dist/app_layout/HeaderLayout.svelte.d.ts

@@ -5,6 +5,10 @@ interface Props {
     sidebarResize?: boolean;
     sidebarMaxWidth?: string | null;
     sidebarMinWidth?: string | null;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
+    /** 头部与内容之间显示横向分割线，默认 false */
+    headerDivider?: boolean;
     header?: Snippet;
     sidebar?: Snippet;
     children?: Snippet;

package/dist/app_layout/README.md

@@ -38,7 +38,7 @@ npm install @ticatec/topside-elements
 | **ColumnsLayout** | Left + center + right horizontal panels |
 | **RowsLayout** | Top + center + bottom vertical panels |
 
-All layouts accept `*Resize` props and constraints; panels without a corresponding snippet are not rendered.
+All layouts accept `*Resize` (draggable), `divider` (show line) and min/max constraints; panels without a corresponding snippet are not rendered.
 
 ---
 
@@ -51,6 +51,8 @@ Optional resizable sidebar on the left, plus a header area and content area stac
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `sidebarResize` | `boolean` | `false` | Enable sidebar resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
+| `headerDivider` | `boolean` | `false` | Show a horizontal line between header and content |
 | `headerHeight` | `string` | `'48px'` | Height of the header area |
 | `sidebarWidth` | `string` | `'300px'` | Initial width of the sidebar |
 | `sidebarMaxWidth` | `string \| null` | `null` | Maximum sidebar width (only when `sidebarResize`) |
@@ -99,6 +101,8 @@ Header on top, with a sidebar + content area below the header.
 | `headerHeight` | `string` | `'48px'` | Height of the header |
 | `sidebarWidth` | `string` | `'300px'` | Width of the sidebar |
 | `sidebarResize` | `boolean` | `false` | Enable sidebar resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
+| `headerDivider` | `boolean` | `false` | Show a horizontal line between header and content |
 | `sidebarMaxWidth` | `string \| null` | `null` | Maximum sidebar width (only when `sidebarResize`) |
 | `sidebarMinWidth` | `string \| null` | `null` | Minimum sidebar width (only when `sidebarResize`) |
 
@@ -145,6 +149,9 @@ Traditional desktop application layout: header, left sidebar, content area, opti
 | `sidebarMaxWidth` | `string \| null` | `null` | Maximum left sidebar width (only when `sidebarResize`) |
 | `sidebarMinWidth` | `string \| null` | `null` | Minimum left sidebar width (only when `sidebarResize`) |
 | `rightBarResize` | `boolean` | `false` | Enable right sidebar resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
+| `headerDivider` | `boolean` | `false` | Show a horizontal line between header and content |
+| `bottomDivider` | `boolean` | `false` | Show a horizontal line between content and status bar |
 | `rightBarMaxWidth` | `string \| null` | `null` | Maximum right sidebar width (only when `rightBarResize`) |
 | `rightBarMinWidth` | `string \| null` | `null` | Minimum right sidebar width (only when `rightBarResize`) |
 
@@ -207,6 +214,7 @@ Three-column horizontal layout: left + center + right. Center fills remaining sp
 | `rightMaxWidth` | `string \| null` | `null` | Right column max-width |
 | `leftResize` | `boolean` | `false` | Enable left column resizing |
 | `rightResize` | `boolean` | `false` | Enable right column resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
 
 ### Snippets
 
@@ -260,6 +268,7 @@ Three-row vertical layout: top + center + bottom. Center fills remaining space;
 | `bottomMaxHeight` | `string \| null` | `null` | Bottom row max-height |
 | `topResize` | `boolean` | `false` | Enable top row resizing |
 | `bottomResize` | `boolean` | `false` | Enable bottom row resizing |
+| `divider` | `boolean` | `true` | Show a divider line between panels; independent of `*Resize` |
 
 ### Snippets
 
@@ -295,6 +304,19 @@ Three-row vertical layout: top + center + bottom. Center fills remaining space;
 
 ---
 
+## Dividers
+
+Lines between panels are rendered by [Split](../general/split/README.md). `divider` and `*Resize` are independent switches:
+
+| `*Resize` | `divider` | Result |
+|---|---|---|
+| `false` | `true` (default) | Fixed 1px line, not draggable |
+| `true` | `true` | 1px line; a handle appears on hover; draggable |
+| `true` | `false` | No visible line (0px), still draggable near the edge; handle on hover / drag |
+| `false` | `false` | No divider |
+
+SidebarLayout / HeaderLayout / ClassicLayout also have `headerDivider` (line below the header), and ClassicLayout has `bottomDivider` (line above the status bar); both default to off, since headers and status bars usually have their own background or border. Line color comes from `--topside-dividing-line-color`.
+
 ## Resizable Panels
 
 When `*Resize` is enabled, a split handle is rendered between the panel and the center area:

package/dist/app_layout/README_CN.md

@@ -38,7 +38,7 @@ npm install @ticatec/topside-elements
 | **ColumnsLayout** | 左 + 中 + 右 三列水平布局 |
 | **RowsLayout** | 上 + 中 + 下 三行垂直布局 |
 
-所有布局都支持 `*Resize` 属性和 min/max 约束；未提供对应 snippet 的面板不会被渲染。
+所有布局都支持 `*Resize`（能否拖动）、`divider`（是否显示分割线）和 min/max 约束；未提供对应 snippet 的面板不会被渲染。
 
 ---
 
@@ -51,6 +51,8 @@ npm install @ticatec/topside-elements
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|---------|-------------|
 | `sidebarResize` | `boolean` | `false` | 启用侧边栏调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
+| `headerDivider` | `boolean` | `false` | 顶栏与内容之间显示横向分割线 |
 | `headerHeight` | `string` | `"48px"` | 标题区域高度 |
 | `sidebarWidth` | `string` | `"300px"` | 侧边栏初始宽度 |
 | `sidebarMaxWidth` | `string \| null` | `null` | 侧边栏最大宽度（仅当 `sidebarResize` 为真时生效） |
@@ -99,6 +101,8 @@ npm install @ticatec/topside-elements
 | `headerHeight` | `string` | `"48px"` | 标题栏高度 |
 | `sidebarWidth` | `string` | `"300px"` | 侧边栏宽度 |
 | `sidebarResize` | `boolean` | `false` | 启用侧边栏调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
+| `headerDivider` | `boolean` | `false` | 顶栏与内容之间显示横向分割线 |
 | `sidebarMaxWidth` | `string \| null` | `null` | 侧边栏最大宽度（仅当 `sidebarResize` 为真时生效） |
 | `sidebarMinWidth` | `string \| null` | `null` | 侧边栏最小宽度（仅当 `sidebarResize` 为真时生效） |
 
@@ -145,6 +149,9 @@ npm install @ticatec/topside-elements
 | `sidebarMaxWidth` | `string \| null` | `null` | 左侧边栏最大宽度（仅当 `sidebarResize` 为真时生效） |
 | `sidebarMinWidth` | `string \| null` | `null` | 左侧边栏最小宽度（仅当 `sidebarResize` 为真时生效） |
 | `rightBarResize` | `boolean` | `false` | 启用右侧边栏调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
+| `headerDivider` | `boolean` | `false` | 顶栏与内容之间显示横向分割线 |
+| `bottomDivider` | `boolean` | `false` | 内容与状态栏之间显示横向分割线 |
 | `rightBarMaxWidth` | `string \| null` | `null` | 右侧边栏最大宽度（仅当 `rightBarResize` 为真时生效） |
 | `rightBarMinWidth` | `string \| null` | `null` | 右侧边栏最小宽度（仅当 `rightBarResize` 为真时生效） |
 
@@ -207,6 +214,7 @@ npm install @ticatec/topside-elements
 | `rightMaxWidth` | `string \| null` | `null` | 右列最大宽度 |
 | `leftResize` | `boolean` | `false` | 启用左列调整大小 |
 | `rightResize` | `boolean` | `false` | 启用右列调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
 
 ### Snippets
 
@@ -260,6 +268,7 @@ npm install @ticatec/topside-elements
 | `bottomMaxHeight` | `string \| null` | `null` | 底部行最大高度 |
 | `topResize` | `boolean` | `false` | 启用顶部行调整大小 |
 | `bottomResize` | `boolean` | `false` | 启用底部行调整大小 |
+| `divider` | `boolean` | `true` | 面板之间是否显示分割线；与 `*Resize` 独立 |
 
 ### Snippets
 
@@ -295,6 +304,19 @@ npm install @ticatec/topside-elements
 
 ---
 
+## 分割线
+
+面板之间的分割线由 [Split](../general/split/README_CN.md) 渲染，`divider` 与 `*Resize` 是两个独立的开关：
+
+| `*Resize` | `divider` | 效果 |
+|---|---|---|
+| `false` | `true`（默认） | 固定的 1px 分割线，不可拖动 |
+| `true` | `true` | 1px 分割线，悬停时中间出现把手，可拖动 |
+| `true` | `false` | 不显示线（0px），靠近边界仍可拖动，悬停 / 拖动时出现把手 |
+| `false` | `false` | 无分割线 |
+
+SidebarLayout / HeaderLayout / ClassicLayout 另有 `headerDivider`（顶栏下方横线），ClassicLayout 还有 `bottomDivider`（状态栏上方横线），默认都关闭——顶栏和状态栏通常自带底色或边框。线条颜色由 `--topside-dividing-line-color` 控制。
+
 ## 可调整面板
 
 当 `*Resize` 启用时，面板与中央区域之间会渲染一个拖动手柄：

package/dist/app_layout/RowsLayout.svelte

@@ -17,6 +17,8 @@
         bottomMaxHeight?: string | null;
         topResize?: boolean;
         bottomResize?: boolean;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
         top?: Snippet;
         children?: Snippet;
         bottom?: Snippet;
@@ -33,6 +35,7 @@
         bottomMaxHeight = null,
         topResize = false,
         bottomResize = false,
+        divider = true,
         top,
         children,
         bottom
@@ -57,8 +60,8 @@
             {@render top()}
         {/if}
     </div>
-    {#if topResize}
-        <Split bindingPanel={topPanel} direction="horizontal"/>
+    {#if topResize || divider}
+        <Split bindingPanel={topResize ? topPanel : undefined} width={divider ? undefined : 0} direction="horizontal"/>
     {/if}
     <div class="center-panel">
         {#if children}
@@ -66,8 +69,8 @@
         {/if}
     </div>
     {#if bottom}
-        {#if bottomResize}
-            <Split bindingPanel={bottomPanel} reverse direction="horizontal"/>
+        {#if bottomResize || divider}
+            <Split bindingPanel={bottomResize ? bottomPanel : undefined} width={divider ? undefined : 0} reverse direction="horizontal"/>
         {/if}
         <div bind:this={bottomPanel} class="bottom-panel" style={bottomStyle}>
             {@render bottom()}

package/dist/app_layout/RowsLayout.svelte.d.ts

@@ -14,6 +14,8 @@ interface Props {
     bottomMaxHeight?: string | null;
     topResize?: boolean;
     bottomResize?: boolean;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
     top?: Snippet;
     children?: Snippet;
     bottom?: Snippet;

package/dist/app_layout/SidebarLayout.svelte

@@ -8,6 +8,10 @@
         sidebarWidth?: string;
         sidebarMaxWidth?: string | null;
         sidebarMinWidth?: string | null;
+        /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+        divider?: boolean;
+        /** 头部与内容之间显示横向分割线，默认 false */
+        headerDivider?: boolean;
         sidebar?: Snippet;
         header?: Snippet;
         children?: Snippet;
@@ -19,6 +23,8 @@
         sidebarWidth = '300px',
         sidebarMaxWidth = null,
         sidebarMinWidth = null,
+        divider = true,
+        headerDivider = false,
         sidebar,
         header,
         children
@@ -36,8 +42,8 @@
                 {@render sidebar()}
             {/if}
         </div>
-        {#if sidebarResize}
-            <Split direction="vertical" bindingPanel={sidebarPanel}/>
+        {#if sidebarResize || divider}
+            <Split direction="vertical" bindingPanel={sidebarResize ? sidebarPanel : undefined} width={divider ? undefined : 0}/>
         {/if}
     {/if}
     <div class="main-content">
@@ -45,6 +51,9 @@
             <div class="header-area" style="height: {headerHeight}">
                 {@render header()}
             </div>
+            {#if headerDivider}
+                <Split direction="horizontal"/>
+            {/if}
         {/if}
         <div class="content-area">
             {#if children}

package/dist/app_layout/SidebarLayout.svelte.d.ts

@@ -5,6 +5,10 @@ interface Props {
     sidebarWidth?: string;
     sidebarMaxWidth?: string | null;
     sidebarMinWidth?: string | null;
+    /** 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 */
+    divider?: boolean;
+    /** 头部与内容之间显示横向分割线，默认 false */
+    headerDivider?: boolean;
     sidebar?: Snippet;
     header?: Snippet;
     children?: Snippet;

package/dist/data_display/list_box/ListBox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {tick, onDestroy, untrack} from "svelte";
+    import {tick, onDestroy, untrack, type Snippet} from "svelte";
     import SearchBox from "../../form/search_box"
     import type {FilterFn} from "../../types";
     import type {ListLazyLoader} from "../../types";
@@ -29,9 +29,11 @@
         title?: string;
         round?: boolean;
         filterText?: string;
-        header?: any;
-        footer?: any;
-        loadMoreIndicator?: any;
+        header?: Snippet | any;
+        footer?: Snippet | any;
+        contentHeader?: Snippet | any;
+        contentFooter?: Snippet | any;
+        loadMoreIndicator?: Snippet | any;
     }
 
     let {
@@ -54,6 +56,8 @@
         filterText,
         header,
         footer,
+        contentHeader,
+        contentFooter,
         loadMoreIndicator
     }: Props = $props();
 
@@ -293,6 +297,9 @@
     {/if}
     <div class="listbox-content" class:selectable={selectMode==='single'} bind:this={scrollElement} onscroll={handleScroll}
          role="listbox" aria-multiselectable={selectMode === 'multiple' ? true : undefined}>
+        {#if contentHeader}
+            {@render contentHeader()}
+        {/if}
         {#if filteredList && ItemRender}
             {#each filteredList as item}
                 {#if selectMode === "multiple"}
@@ -319,6 +326,9 @@
         {#if hasMore && loadMoreIndicator}
             {@render loadMoreIndicator()}
         {/if}
+        {#if contentFooter}
+            {@render contentFooter()}
+        {/if}
     </div>
     {#if footer}
         <div class="box-footer flex-container">

package/dist/data_display/list_box/ListBox.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type Snippet } from "svelte";
 import type { FilterFn } from "../../types";
 import type { ListLazyLoader } from "../../types";
 type OnSelectChange = (item: any) => void;
@@ -22,9 +23,11 @@ interface Props {
     title?: string;
     round?: boolean;
     filterText?: string;
-    header?: any;
-    footer?: any;
-    loadMoreIndicator?: any;
+    header?: Snippet | any;
+    footer?: Snippet | any;
+    contentHeader?: Snippet | any;
+    contentFooter?: Snippet | any;
+    loadMoreIndicator?: Snippet | any;
 }
 declare const ListBox: import("svelte").Component<Props, {}, "selectedItems">;
 type ListBox = ReturnType<typeof ListBox>;

package/dist/data_display/list_box/README.md

@@ -4,7 +4,7 @@
 
 A list component with optional header / footer snippets, built-in search, lazy loading, and single / multiple selection modes.
 
-> Svelte 5 component. Custom header/footer/load-more content is passed as **Snippets** (`header`, `footer`, `loadMoreIndicator`).
+> Svelte 5 component. Custom header/footer/load-more/content snippets are passed as **Snippets** (`header`, `footer`, `contentHeader`, `contentFooter`, `loadMoreIndicator`).
 
 ## Installation
 
@@ -39,8 +39,10 @@ npm install @ticatec/topside-elements
 | `round` | `boolean` | `false` | Adds a border radius (`--topside-radius`) |
 | `class` | `string` | `undefined` | Extra class on the root |
 | `style` | `string \| null` | `null` | Inline CSS on the root |
-| `header` | `Snippet` | `undefined` | Custom header content (overrides `title`) |
-| `footer` | `Snippet` | `undefined` | Custom footer content |
+| `header` | `Snippet` | `undefined` | Custom header content (overrides `title`, fixed above content) |
+| `footer` | `Snippet` | `undefined` | Custom footer content (fixed below content) |
+| `contentHeader` | `Snippet` | `undefined` | Custom snippet at the top inside `listbox-content` (scrolls with list items) |
+| `contentFooter` | `Snippet` | `undefined` | Custom snippet at the bottom inside `listbox-content` (scrolls with list items) |
 | `loadMoreIndicator` | `Snippet` | `undefined` | Custom "loading more" indicator shown at the bottom while `hasMore` |
 | `onchange` | `(item: any) => void` | `undefined` | Single-mode: fires when the selected item changes (also fires with `null` when filter resets selection) |
 | `onItemDblClick` | `(item: any) => void` | `undefined` | Single-mode only |
@@ -111,6 +113,26 @@ interface LoadResult {
 <button disabled={selected.length === 0} onclick={() => console.log(selected)}>OK</button>
 ```
 
+### Scrolling content header & footer (`contentHeader` & `contentFooter`)
+
+Unlike `header` and `footer` which remain pinned outside the scroll viewport, `contentHeader` and `contentFooter` sit inside `.listbox-content` at the very top and bottom, scrolling alongside the list items:
+
+```svelte
+<ListBox list={users} itemRender={UserItem} selectMode="single" style="height: 300px;">
+  {#snippet contentHeader()}
+    <div style="padding: 8px 12px; background: #eef2ff; border-bottom: 1px solid #e0e7ff; cursor: pointer;">
+      All Users / Quick Actions (scrolls with list)
+    </div>
+  {/snippet}
+
+  {#snippet contentFooter()}
+    <div style="padding: 8px 12px; text-align: center; color: #64748b; border-top: 1px solid #f1f5f9;">
+      Bottom action or footer notice (scrolls with list)
+    </div>
+  {/snippet}
+</ListBox>
+```
+
 ### Lazy-loaded list with custom footer
 
 ```svelte

package/dist/data_display/list_box/README_CN.md

@@ -4,7 +4,7 @@
 
 列表组件，可选 header / footer snippet、内置搜索框、懒加载、单选 / 多选。
 
-> Svelte 5 组件。header / footer / 加载更多 通过 **Snippet** 传入（`header`、`footer`、`loadMoreIndicator`）。
+> Svelte 5 组件。header / footer / contentHeader / contentFooter / 加载更多 通过 **Snippet** 传入（`header`、`footer`、`contentHeader`、`contentFooter`、`loadMoreIndicator`）。
 
 ## 安装
 
@@ -39,8 +39,10 @@ npm install @ticatec/topside-elements
 | `round` | `boolean` | `false` | 加圆角（`--topside-radius`） |
 | `class` | `string` | `undefined` | 根节点附加 class |
 | `style` | `string \| null` | `null` | 根节点内联 CSS |
-| `header` | `Snippet` | `undefined` | 自定义 header（覆盖 `title`） |
-| `footer` | `Snippet` | `undefined` | 自定义 footer |
+| `header` | `Snippet` | `undefined` | 自定义 header（覆盖 `title`，固定在顶部不随列表滚动） |
+| `footer` | `Snippet` | `undefined` | 自定义 footer（固定在底部不随列表滚动） |
+| `contentHeader` | `Snippet` | `undefined` | 位于 `listbox-content` 最上部的自定义组件/片段（跟随列表滚动） |
+| `contentFooter` | `Snippet` | `undefined` | 位于 `listbox-content` 最下部的自定义组件/片段（跟随列表滚动） |
 | `loadMoreIndicator` | `Snippet` | `undefined` | 自定义"加载更多"指示器，`hasMore` 时显示在底部 |
 | `onchange` | `(item: any) => void` | `undefined` | 单选模式：选中变化时触发（过滤重置时也会以 `null` 触发一次） |
 | `onItemDblClick` | `(item: any) => void` | `undefined` | 仅单选模式 |
@@ -111,6 +113,26 @@ interface LoadResult {
 <button disabled={selected.length === 0} onclick={() => console.log(selected)}>OK</button>
 ```
 
+### 随列表滚动的内置首尾项 (`contentHeader` & `contentFooter`)
+
+与 `header` 和 `footer`（固定在滚动容器外部、不随内容滚动）不同，`contentHeader` 与 `contentFooter` 位于 `.listbox-content` 滚动容器内部的最上部与最下部，跟随列表项一起滚动，适合放置“全部选项”、“快捷动作”或底部的“新增选项”等条目：
+
+```svelte
+<ListBox list={users} itemRender={UserItem} selectMode="single" style="height: 300px;">
+  {#snippet contentHeader()}
+    <div style="padding: 8px 12px; background: #eef2ff; border-bottom: 1px solid #e0e7ff; cursor: pointer;">
+      全部选项 / 快捷操作（跟随列表滚动）
+    </div>
+  {/snippet}
+
+  {#snippet contentFooter()}
+    <div style="padding: 8px 12px; text-align: center; color: #64748b; border-top: 1px solid #f1f5f9;">
+      底部操作或说明（跟随列表滚动）
+    </div>
+  {/snippet}
+</ListBox>
+```
+
 ### 懒加载 + 自定义 footer
 
 ```svelte

package/docs/NAMING.md

@@ -342,7 +342,7 @@ interface Action<T = any> {
 **Events (notifications)**: `onchange` `onclick` `ondblclick` `onfocus` `onblur` `oninput` `onclose` `onselect` `ondelete` `onremove` `onrefresh` `onconfirm` `onaction` `ondownload` `onretry` `onkeydown` `onkeyup` `onkeypress` `oncontextmenu` `ontoggle` `onItemClick` `onRowClick` `onIconClick` `onPageSizeChange` `onFileUploaded` `onFileRejected` `onUploadError` `onPreview` `onResizeEnd`; between DataTable's internal panels: `onCellClick` `onWidthChange` `onRowExpand` `onRowSelectChange` `onToggleSelectAll`
 **Hooks (veto)**: `beforeClose` `beforeRemove` `beforeChange` `beforeTransfer`
 **Instance methods**: `focus()` `blur()` `clear()` `open()` `close()` `reset()` `push()` `pop()` `getElement()` `openFileDialog()`
-**Snippets**: `children` `header` `headerExtra` `footer` `left` `right` `top` `bottom` `sidebar` `home` `leadingIcon` `trailingIcon` `popup` `item` `tab` `node` `chevronIcon` `nodeIcon` `from` `to`
+**Snippets**: `children` `header` `headerExtra` `footer` `contentHeader` `contentFooter` `left` `right` `top` `bottom` `sidebar` `home` `leadingIcon` `trailingIcon` `popup` `item` `tab` `node` `chevronIcon` `nodeIcon` `from` `to`
 
 ---
 

package/docs/NAMING_CN.md

@@ -342,7 +342,7 @@ interface Action<T = any> {
 **事件（通知）**：`onchange` `onclick` `ondblclick` `onfocus` `onblur` `oninput` `onclose` `onselect` `ondelete` `onremove` `onrefresh` `onconfirm` `onaction` `ondownload` `onretry` `onkeydown` `onkeyup` `onkeypress` `oncontextmenu` `ontoggle` `onItemClick` `onRowClick` `onIconClick` `onPageSizeChange` `onFileUploaded` `onFileRejected` `onUploadError` `onPreview` `onResizeEnd`；DataTable 内部面板间：`onCellClick` `onWidthChange` `onRowExpand` `onRowSelectChange` `onToggleSelectAll`
 **钩子（否决）**：`beforeClose` `beforeRemove` `beforeChange` `beforeTransfer`
 **实例方法**：`focus()` `blur()` `clear()` `open()` `close()` `reset()` `push()` `pop()` `getElement()` `openFileDialog()`
-**Snippet**：`children` `header` `headerExtra` `footer` `left` `right` `top` `bottom` `sidebar` `home` `leadingIcon` `trailingIcon` `popup` `item` `tab` `node` `chevronIcon` `nodeIcon` `from` `to`
+**Snippet**：`children` `header` `headerExtra` `footer` `contentHeader` `contentFooter` `left` `right` `top` `bottom` `sidebar` `home` `leadingIcon` `trailingIcon` `popup` `item` `tab` `node` `chevronIcon` `nodeIcon` `from` `to`
 
 ---
 

package/docs/components/README.md

@@ -128,8 +128,8 @@
 
 | 组件 | 导入路径 | 示例 | 属性数 |
 | --- | --- | --- | ---: |
-| [ClassicLayout](./classic-layout/README.md) | `@ticatec/topside-elements/app-layout/ClassicLayout` | [示例](./classic-layout/example.svelte) | 15 |
-| [ColumnsLayout](./columns-layout/README.md) | `@ticatec/topside-elements/app-layout/ColumnsLayout` | [示例](./columns-layout/example.svelte) | 13 |
-| [HeaderLayout](./header-layout/README.md) | `@ticatec/topside-elements/app-layout/HeaderLayout` | [示例](./header-layout/example.svelte) | 8 |
-| [RowsLayout](./rows-layout/README.md) | `@ticatec/topside-elements/app-layout/RowsLayout` | [示例](./rows-layout/example.svelte) | 13 |
-| [SidebarLayout](./sidebar-layout/README.md) | `@ticatec/topside-elements/app-layout/SidebarLayout` | [示例](./sidebar-layout/example.svelte) | 8 |
+| [ClassicLayout](./classic-layout/README.md) | `@ticatec/topside-elements/app-layout/ClassicLayout` | [示例](./classic-layout/example.svelte) | 18 |
+| [ColumnsLayout](./columns-layout/README.md) | `@ticatec/topside-elements/app-layout/ColumnsLayout` | [示例](./columns-layout/example.svelte) | 14 |
+| [HeaderLayout](./header-layout/README.md) | `@ticatec/topside-elements/app-layout/HeaderLayout` | [示例](./header-layout/example.svelte) | 10 |
+| [RowsLayout](./rows-layout/README.md) | `@ticatec/topside-elements/app-layout/RowsLayout` | [示例](./rows-layout/example.svelte) | 14 |
+| [SidebarLayout](./sidebar-layout/README.md) | `@ticatec/topside-elements/app-layout/SidebarLayout` | [示例](./sidebar-layout/example.svelte) | 10 |

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

@@ -31,6 +31,9 @@ import ClassicLayout from '@ticatec/topside-elements/app-layout/ClassicLayout';
 | `rightBarResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `rightBarMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
 | `rightBarMinWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `divider` | 否 | `boolean` | 否 | `true` | 否 | 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 |
+| `headerDivider` | 否 | `boolean` | 否 | `false` | 否 | 头部与内容之间显示横向分割线，默认 false |
+| `bottomDivider` | 否 | `boolean` | 否 | `false` | 否 | 内容与底部状态栏之间显示横向分割线，默认 false |
 | `header` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `sidebar` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |

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

@@ -31,6 +31,7 @@ import ColumnsLayout from '@ticatec/topside-elements/app-layout/ColumnsLayout';
 | `rightMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 右栏最大宽度（CSS 长度） |
 | `leftResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `rightResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `divider` | 否 | `boolean` | 否 | `true` | 否 | 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 |
 | `left` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
 | `right` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |

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

@@ -26,6 +26,8 @@ import HeaderLayout from '@ticatec/topside-elements/app-layout/HeaderLayout';
 | `sidebarResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `sidebarMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
 | `sidebarMinWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `divider` | 否 | `boolean` | 否 | `true` | 否 | 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 |
+| `headerDivider` | 否 | `boolean` | 否 | `false` | 否 | 头部与内容之间显示横向分割线，默认 false |
 | `header` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `sidebar` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |

package/docs/components/list-box/README.md

@@ -40,6 +40,8 @@ import ListBox from '@ticatec/topside-elements/ListBox';
 | `filterText` | 是 | `string` | 否 | `undefined` | 否 | 过滤输入框的外部初始值或受控值，用于预设搜索条件。 |
 | `header` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `footer` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `contentHeader` | 否 | `Snippet \| any` | 否 | `undefined` | 否 | 位于 listbox-content 最上部的自定义组件/片段（跟随列表滚动）。 |
+| `contentFooter` | 否 | `Snippet \| any` | 否 | `undefined` | 否 | 位于 listbox-content 最下部的自定义组件/片段（跟随列表滚动）。 |
 | `loadMoreIndicator` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 
 > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
@@ -121,6 +123,22 @@ import ListBox from '@ticatec/topside-elements/ListBox';
 - 默认值：`undefined`
 - 示例写法：`filterText="研发"`
 
+### `contentHeader`
+
+位于 `listbox-content` 滚动容器内部的最上部，在所有列表项之前渲染，**跟随列表一起滚动**（与固定的 `header` 区分）。可用于放置如“全部选项”、“快捷搜索”等类似选择项的内容。
+
+- 类型：`Snippet | any`
+- 默认值：`undefined`
+- 示例写法：`{#snippet contentHeader()}<div>全部选项</div>{/snippet}`
+
+### `contentFooter`
+
+位于 `listbox-content` 滚动容器内部的最下部，在所有列表项（及加载更多指示器）之后渲染，**跟随列表一起滚动**（与固定的 `footer` 区分）。可用于放置如“新增选项”、“列表说明”等类似选择项的内容。
+
+- 类型：`Snippet | any`
+- 默认值：`undefined`
+- 示例写法：`{#snippet contentFooter()}<div>新增选项</div>{/snippet}`
+
 ## 相关类型定义
 
 以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。

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

@@ -31,6 +31,7 @@ import RowsLayout from '@ticatec/topside-elements/app-layout/RowsLayout';
 | `bottomMaxHeight` | 否 | `string \| null` | 否 | `null` | 否 | 下栏最大高度（CSS 长度） |
 | `topResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
 | `bottomResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `divider` | 否 | `boolean` | 否 | `true` | 否 | 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 |
 | `top` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
 | `bottom` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |

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

@@ -26,6 +26,8 @@ import SidebarLayout from '@ticatec/topside-elements/app-layout/SidebarLayout';
 | `sidebarWidth` | 否 | `string` | 否 | `'300px'` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
 | `sidebarMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
 | `sidebarMinWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `divider` | 否 | `boolean` | 否 | `true` | 否 | 面板之间是否显示分割线，默认 true；与 *Resize（能否拖动）相互独立：可拖动但不显示线时，只在悬停 / 拖动时出现把手 |
+| `headerDivider` | 否 | `boolean` | 否 | `false` | 否 | 头部与内容之间显示横向分割线，默认 false |
 | `sidebar` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `header` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
 | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/topside-elements",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",