style(storybook): unify page hierarchy and compact layouts

src/chart/radial-chart.stories.tsx

@@ -7,7 +7,7 @@ import {
   RadialStackedExample,
   RadialTextExample,
 } from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
 
 // Sample data only. One example per official shadcn/ui radial chart (radial-simple, -label, -grid, -text, -shape, -stacked).
 const meta = {
@@ -23,26 +23,26 @@ export const Radial: Story = {
     <StoryPage>
       <StoryPageHeader title="Radial Chart" />
       {/* Same grid as the other Chart pages: two per row from 1024px, one below; source order is the mobile order. */}
-      <div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
-        <StorySection title="Radial Chart">
+      <StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
+        <StorySection title="Basic">
           <RadialSimpleExample />
         </StorySection>
-        <StorySection title="Radial Chart + Label">
+        <StorySection title="Label">
           <RadialLabelExample />
         </StorySection>
-        <StorySection title="Radial Chart - Grid">
+        <StorySection title="Grid">
           <RadialGridExample />
         </StorySection>
-        <StorySection title="Radial Chart + Text">
+        <StorySection title="Text">
           <RadialTextExample />
         </StorySection>
-        <StorySection title="Radial Chart - Shape">
+        <StorySection title="Shape">
           <RadialShapeExample />
         </StorySection>
-        <StorySection title="Radial Chart + Stacked">
+        <StorySection title="Stacked">
           <RadialStackedExample />
         </StorySection>
-      </div>
+      </StorySectionGrid>
     </StoryPage>
   ),
 }