✨ feat: 支持 codePlacement 语法来控制预览器方向

example/docs/demos/Left.tsx

@@ -0,0 +1,10 @@
+/**
+ * inherit: true
+ * defaultShowCode: true
+ * codePlacement: left
+ * compact: true
+ */
+
+import Antd from './Antd';
+
+export default () => <Antd />;

example/docs/demos/Right.tsx

@@ -0,0 +1,10 @@
+/**
+ * inherit: true
+ * defaultShowCode: true
+ * codePlacement: right
+ * compact: true
+ */
+
+import Antd from './Antd';
+
+export default () => <Antd />;

example/docs/demos/Top.tsx

@@ -0,0 +1,10 @@
+/**
+ * inherit: true
+ * defaultShowCode: true
+ * codePlacement: top
+ * compact: true
+ */
+
+import Antd from './Antd';
+
+export default () => <Antd />;

example/docs/guide/demo.zh-CN.md

@@ -12,3 +12,23 @@ demo:
 
 <code src="../demos/Antd.tsx"></code>
 <code src="../demos/AntdInherit.tsx"></code>
+
+## 自定义方向
+
+通过在 demo 元数据中添加 `codePlacement` 属性，可以控制预览器的代码展开方向。
+
+设置 `codePlacement:left` ，可以让代码展示在预览器左侧。
+
+<code src="../demos/Left.tsx"></code>
+
+设置 `codePlacement:top` ，可以让代码展示在预览器上方。
+
+<code src="../demos/Top.tsx"></code>
+
+设置 `codePlacement:right` ，可以让代码展示在预览器右侧。
+
+<code src="../demos/Right.tsx"></code>
+
+:::info
+设置 codePlacement 时，建议搭配设置 `defaultShowCode: true`
+:::

src/builtins/Previewer/index.tsx

@@ -4,71 +4,125 @@ import Previewer from 'dumi/theme-default/builtins/Previewer';
 import { rgba } from 'polished';
 import DemoProvider from '../../components/DemoProvider';
 
-const useStyles = createStyles(
-  ({ css, token, prefixCls }) => css`
-    .dumi-default-previewer {
-      border-color: ${token.colorBorderSecondary};
-
-      &-demo {
-        &[data-iframe]::before {
-          background: ${token.colorFillContent};
-        }
-      }
-      &-meta {
+const useStyles = createStyles(({ css, token, prefixCls }) => {
+  return {
+    container: css`
+      .dumi-default-previewer {
         border-color: ${token.colorBorderSecondary};
-        .${prefixCls}-highlighter {
-          pre {
-            border-radius: 0;
+        display: flex;
+        flex-direction: column;
+
+        &-demo {
+          flex: 1;
+
+          &[data-iframe]::before {
+            background: ${token.colorFillContent};
           }
         }
-      }
 
-      &-actions:not(:last-child) {
-        border-color: ${token.colorBorderSecondary};
-      }
-      &-desc {
-        .markdown {
+        &-meta {
+          border-color: ${token.colorBorderSecondary};
+          flex: 1;
+
+          .${prefixCls}-highlighter {
+            pre {
+              border-radius: 0 !important;
+            }
+          }
+        }
+
+        &-actions:not(:last-child) {
+          border-color: ${token.colorBorderSecondary};
+        }
+
+        &-desc {
+          .markdown {
+            border-color: ${token.colorBorderSecondary};
+          }
+
+          h5 {
+            background: linear-gradient(
+              to top,
+              ${token.colorBgContainer},
+              ${rgba(token.colorBgContainer, 0.95)} 50%,
+              ${rgba(token.colorBgContainer, 0)} 100%
+            );
+
+            a {
+              color: ${token.colorText};
+            }
+          }
+        }
+
+        &-tabs::after {
           border-color: ${token.colorBorderSecondary};
         }
+      }
 
-        h5 {
-          background: linear-gradient(
-            to top,
-            ${token.colorBgContainer},
-            ${rgba(token.colorBgContainer, 0.95)} 50%,
-            ${rgba(token.colorBgContainer, 0)} 100%
-          );
+      .dumi-default-tabs-tab {
+        &-btn {
+          color: ${token.colorTextTertiary};
+        }
 
-          a {
+        &-active {
+          .dumi-default-tabs-tab-btn {
             color: ${token.colorText};
           }
         }
       }
+    `,
+    top: css`
+      .dumi-default-previewer {
+        flex-direction: column-reverse;
 
-      &-tabs::after {
-        border-color: ${token.colorBorderSecondary};
+        &-meta {
+          display: flex;
+          flex-direction: column;
+        }
+
+        &-actions {
+          order: 1;
+        }
+
+        &-desc {
+          order: 2;
+        }
       }
-    }
+    `,
 
-    .dumi-default-tabs-tab {
-      &-btn {
-        color: ${token.colorTextTertiary};
+    left: css`
+      .dumi-default-previewer {
+        flex-direction: row-reverse;
+        &-demo {
+          width: 50%;
+          border-left: 1px solid ${token.colorBorderSecondary};
+        }
+        &-meta {
+          width: 50%;
+        }
       }
+    `,
 
-      &-active {
-        .dumi-default-tabs-tab-btn {
-          color: ${token.colorText};
+    right: css`
+      .dumi-default-previewer {
+        flex-direction: row;
+        &-demo {
+          width: 50%;
+          border-right: 1px solid ${token.colorBorderSecondary};
+        }
+        &-meta {
+          width: 50%;
         }
       }
-    }
-  `,
-);
+    `,
+  };
+});
 
 export default (props: IPreviewerProps) => {
-  const { styles } = useStyles();
+  const { styles, cx } = useStyles();
 
   return (
-    <div className={styles}>
+    <div className={cx(styles.container, styles[props.codePlacement as 'left' | 'right' | 'top'])}>
       <DemoProvider inherit={props.inherit}>
         <Previewer {...props} />
       </DemoProvider>