style(storybook): refine disclosure story layout

src/components/resizable.stories.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // The representative Story shows real, draggable layouts; the same specimens also exist as Stories tagged `verification` (hidden
@@ -99,8 +99,21 @@ const meta = { title: "Components/Disclosure/Resizable", component: ResizablePan
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
-  <StateBoard min={580} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
+// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title, divider and
+// specimen start line up and unused columns stay empty. The frames keep their own size (max 560px wide).
+function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
+  return (
+    <div className={`grid grid-cols-1 items-start gap-6 ${cols === 3 ? "min-[1000px]:grid-cols-3" : "min-[1000px]:grid-cols-2"}`}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[state]} />
+      ))}
+    </div>
+  )
+}
+
+const board = (cols: 2 | 3, ...ids: string[]) => (
+  <StateGrid cols={cols} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
 )
 
 // Representative Story: the common Story page; the sections group the same specimens.
@@ -112,9 +125,8 @@ export const All: Story = {
       <StoryPageHeader
         title="Resizable"
       />
-      <StorySection title="Overview">{board("horizontal")}</StorySection>
-      <StorySection title="Variants">{board("vertical", "handle")}</StorySection>
-      <StorySection title="Usage">{board("minmax", "collapsible")}</StorySection>
+      <StorySection title="Variants">{board(3, "horizontal", "handle", "vertical")}</StorySection>
+      <StorySection title="Usage">{board(3, "minmax", "collapsible")}</StorySection>
     </StoryPage>
   ),
 }