Resizable

拖拽分栏 · 复合 PanelGroup/Panel/Handle + 横竖向 + min/max + 键盘微调(零依赖·role=separator)

资源管理器

src/
app/
page.tsx
layout.tsx
components/
nav.tsx
card.tsx
lib/
utils.ts
package.json
tsconfig.json

components/card.tsx

 1export function Card({ title, children }) {
 2  return (
 3    <section className="rounded-lg border p-4">
 4      <h3 className="font-semibold">{title}</h3>
 5      <div className="mt-2 text-sm">{children}</div>
 6    </section>
 7  );
 8}

实时预览

月度概览

本月新增订单 1,284 笔，环比增长 12%。

全状态

资源管理器

src/
app/
page.tsx
layout.tsx
components/
nav.tsx
card.tsx
lib/
utils.ts
package.json
tsconfig.json

components/card.tsx

 1export function Card({ title, children }) {
 2  return (
 3    <section className="rounded-lg border p-4">
 4      <h3 className="font-semibold">{title}</h3>
 5      <div className="mt-2 text-sm">{children}</div>
 6    </section>
 7  );
 8}

实时预览

月度概览

本月新增订单 1,284 笔，环比增长 12%。

编辑器三栏（拖动手柄调整：文件树 / 编辑器 / 预览）

会话

客户 · 王女士：发货了吗？
客服 · 小琏：已安排今日发出 📦
客户 · 王女士：好的，谢谢！

[12:01:08] INFO 会话已接入 agent#7

[12:01:24] INFO 推送物流单号 SF1024…

[12:01:31] WARN 客户满意度问卷未填

[12:01:40] INFO 会话标记为已解决

上下分栏（vertical：会话 / 日志，拖动横向手柄）

资源管理器

src/
app/
page.tsx
layout.tsx
components/
nav.tsx
card.tsx
lib/
utils.ts
package.json
tsconfig.json

components/card.tsx

 1export function Card({ title, children }) {
 2  return (
 3    <section className="rounded-lg border p-4">
 4      <h3 className="font-semibold">{title}</h3>
 5      <div className="mt-2 text-sm">{children}</div>
 6    </section>
 7  );
 8}

两栏 + 最小宽约束（侧栏 min=20%，键盘 ←/→ 也可微调）

Playground

方向

资源管理器

src/
app/
page.tsx
layout.tsx
components/
nav.tsx
card.tsx
lib/
utils.ts
package.json
tsconfig.json

components/card.tsx

 1export function Card({ title, children }) {
 2  return (
 3    <section className="rounded-lg border p-4">
 4      <h3 className="font-semibold">{title}</h3>
 5      <div className="mt-2 text-sm">{children}</div>
 6    </section>
 7  );
 8}

<ResizablePanelGroup direction="horizontal" defaultSizes={[40, 60]}>
  <ResizablePanel min={20}><FileTree /></ResizablePanel>
  <ResizableHandle />
  <ResizablePanel><Editor /></ResizablePanel>
</ResizablePanelGroup>

1export function Card({ title, children }) {

2 return (

3 <section className="rounded-lg border p-4">

4 <h3 className="font-semibold">{title}</h3>

5 <div className="mt-2 text-sm">{children}</div>

6 </section>

7 );

全状态

资源管理器

src/
app/
page.tsx
layout.tsx
components/
nav.tsx
card.tsx
lib/
utils.ts
package.json
tsconfig.json

components/card.tsx

 1export function Card({ title, children }) {
 2  return (
 3    <section className="rounded-lg border p-4">
 4      <h3 className="font-semibold">{title}</h3>
 5      <div className="mt-2 text-sm">{children}</div>
 6    </section>
 7  );
 8}

实时预览

月度概览

本月新增订单 1,284 笔，环比增长 12%。

编辑器三栏（拖动手柄调整：文件树 / 编辑器 / 预览）

会话

客户 · 王女士：发货了吗？
客服 · 小琏：已安排今日发出 📦
客户 · 王女士：好的，谢谢！

[12:01:08] INFO 会话已接入 agent#7

[12:01:24] INFO 推送物流单号 SF1024…

[12:01:31] WARN 客户满意度问卷未填

[12:01:40] INFO 会话标记为已解决

上下分栏（vertical：会话 / 日志，拖动横向手柄）

资源管理器

src/
app/
page.tsx
layout.tsx
components/
nav.tsx
card.tsx
lib/
utils.ts
package.json
tsconfig.json

components/card.tsx

 1export function Card({ title, children }) {
 2  return (
 3    <section className="rounded-lg border p-4">
 4      <h3 className="font-semibold">{title}</h3>
 5      <div className="mt-2 text-sm">{children}</div>
 6    </section>
 7  );
 8}

两栏 + 最小宽约束（侧栏 min=20%，键盘 ←/→ 也可微调）

Playground

方向

资源管理器

src/
app/
page.tsx
layout.tsx
components/
nav.tsx
card.tsx
lib/
utils.ts
package.json
tsconfig.json

components/card.tsx

 1export function Card({ title, children }) {
 2  return (
 3    <section className="rounded-lg border p-4">
 4      <h3 className="font-semibold">{title}</h3>
 5      <div className="mt-2 text-sm">{children}</div>
 6    </section>
 7  );
 8}

<ResizablePanelGroup direction="horizontal" defaultSizes={[40, 60]}>
  <ResizablePanel min={20}><FileTree /></ResizablePanel>
  <ResizableHandle />
  <ResizablePanel><Editor /></ResizablePanel>
</ResizablePanelGroup>