📝 docs: 优化文档 demo 展示样式

docs/api/theme-provider.md

@@ -7,6 +7,7 @@ group:
   order: 1
 demo:
   cols: 2
+  tocDepth: 4
 ---
 
 ## 简介

docs/demos/ThemeProvider/customToken.tsx

@@ -1,19 +1,23 @@
 /**
  * compact: true
+ * defaultShowCode: true
+ * codePlacement: left
  */
-import { Divider } from 'antd';
-import { ThemeProvider } from 'antd-style';
-import { Container } from './style';
+import { ThemeProvider, useTheme } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
 import App from './_app';
 
-export default () => (
-  <Container align={'center'} split={<Divider type={'vertical'} />} size={24}>
-    <ThemeProvider>
-      <App title={'antd Token'} tokenName={'colorPrimary'} />
-    </ThemeProvider>
-    <ThemeProvider customToken={{ customBrandColor: '#c956df' }}>
-      <App title={'自定义 Token'} tokenName={'customBrandColor'} />
-    </ThemeProvider>
-    <App title={'未包裹 ThemeProvider 时使用自定义 Token 无效'} tokenName={'customBrandColor'} />
-  </Container>
-);
+export default () => {
+  const theme = useTheme();
+  return (
+    <Flexbox padding={24} gap={24} style={{ background: theme.colorBgLayout }}>
+      <ThemeProvider>
+        <App title={'antd Token'} tokenName={'colorPrimary'} />
+      </ThemeProvider>
+      <ThemeProvider customToken={{ customBrandColor: '#c956df' }}>
+        <App title={'自定义 Token'} tokenName={'customBrandColor'} />
+      </ThemeProvider>
+      <App title={'未包裹 ThemeProvider 时使用自定义 Token 无效'} tokenName={'customBrandColor'} />
+    </Flexbox>
+  );
+};

docs/demos/ThemeProvider/default.tsx

@@ -1,5 +1,6 @@
 /**
- * compact: true
+ * defaultShowCode: true
+ * codePlacement: left
  */
 import { Divider } from 'antd';
 import { ThemeProvider } from 'antd-style';

docs/demos/createStyles/AntdToken.tsx

@@ -1,3 +1,6 @@
+/**
+ * inherit: true
+ */
 import { SmileOutlined } from '@ant-design/icons';
 import { Button, Space } from 'antd';
 import { createStyles } from 'antd-style';

docs/demos/createStyles/Command/index.tsx

@@ -1,6 +1,8 @@
 /**
  * iframe: 510
- * description: Demo 示例参考 https://designmaestro.io/
+ * title: 复杂样式场景下建议独立拆分样式文件
+ * description: "Demo 示例参考 https://designmaestro.io/"
+ * defaultShowCode: true
  */
 import { SearchOutlined } from '@ant-design/icons';
 

docs/demos/createStyles/SimpleObject.tsx

@@ -1,3 +1,7 @@
+/**
+ * defaultShowCode: true
+ * codePlacement: top
+ */
 import { createStyles, css } from 'antd-style';
 
 const useStyles = createStyles({

docs/guide/create-styles.md

@@ -4,6 +4,8 @@ order: 1
 group:
   title: 快速上手
   order: 0
+demo:
+  tocDepth: 4
 ---
 
 # 使用 createStyles 类名组织样式
@@ -30,37 +32,6 @@ antd-style 提供的核心 api 就是使用 `createStyles` 方法可以适用类
 
 示例：
 
-```tsx | pure
-import { createStyles, css } from 'antd-style';
-
-const useStyles = createStyles({
-  container: {
-    padding: 24,
-    background: 'lightslategrey',
-  },
-  header: css`
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    color: white;
-  `,
-  text: {
-    color: 'lightblue',
-  },
-});
-
-export default () => {
-  const { styles } = useStyles();
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.header}>用法一</div>
-      <p className={styles.text}>普通对象，无需动态性</p>
-    </div>
-  );
-};
-```
-
 <code src="../demos/createStyles/SimpleObject.tsx"></code>
 
 ### 写法二：结合 antd 的 token 使用

docs/guide/switch-theme.md

@@ -2,6 +2,8 @@
 title: 主题切换
 group: 快速上手
 order: 2
+demo:
+  tocDepth: 4
 ---
 
 # 主题切换