style:调整案例样式

Author: SunLxy

website/src/components/CodeLayout/assets/expand.svg

@@ -6,7 +6,13 @@ import Codesandbox from './codesandbox';
 import Stackblitz from './stackblitz';
 import Codepen from './codepen';
 const Code = (props: CodeProps) => {
-  const { code, copyNodes, codePenOptions, codeSandboxOptions, stackBlitzOptions, language } = props;
+  const { code, copyNodes, codePenOptions, codeSandboxOptions, stackBlitzOptions, language, codePadding } = props;
+  const style = React.useMemo(() => {
+    if (typeof codePadding) {
+      return { padding: codePadding };
+    }
+    return {};
+  }, [codePadding]);
   const [show, setShow] = React.useState(false);
   return (
     <React.Fragment>
@@ -17,7 +23,7 @@ const Code = (props: CodeProps) => {
         <Copy copyNodes={copyNodes} />
         <ShowHide show={show} onClick={setShow} />
       </div>
-      <div className={`preview-code preview-code-${show}`}>
+      <div className={`preview-code preview-code-${show}`} style={style}>
         <pre className={`language-${language}`}>{code}</pre>
       </div>
     </React.Fragment>

website/src/components/CodeLayout/assets/unexpand.svg

@@ -5,6 +5,7 @@ import './styles/index.css';
 export * from './interface';
 const Preview = (props: PreviewProps) => {
   const {
+    prefixCls = 'w-code-layout',
     code,
     className = '',
     copyNodes = '',
@@ -13,19 +14,27 @@ const Preview = (props: PreviewProps) => {
     stackBlitzOptions,
     previewBodyClassName,
     language = 'jsx',
+    customButton,
+    bordered = true,
+    noCode = false,
+    codePadding = 0,
     ...rest
   } = props;
   return (
-    <div className={`preview-fieldset ${className}`}>
-      <div {...rest} className={`preview-body ${previewBodyClassName}`} />
-      <Code
-        language={language}
-        codePenOptions={codePenOptions}
-        codeSandboxOptions={codeSandboxOptions}
-        stackBlitzOptions={stackBlitzOptions}
-        code={code}
-        copyNodes={copyNodes}
-      />
+    <div className={`${prefixCls} ${prefixCls}-body-${bordered} ${className}`}>
+      <div {...rest} className={`preview preview-body-${bordered} ${previewBodyClassName}`} />
+      {!noCode && (
+        <Code
+          codePadding={codePadding}
+          customButton={customButton}
+          language={language}
+          codePenOptions={codePenOptions}
+          codeSandboxOptions={codeSandboxOptions}
+          stackBlitzOptions={stackBlitzOptions}
+          code={code}
+          copyNodes={copyNodes}
+        />
+      )}
     </div>
   );
 };

website/src/components/CodeLayout/code/index.tsx

@@ -17,10 +17,19 @@ export interface CodeProps {
   codeSandboxOptions?: CodeSandboxProps;
   /** stackBlitz参数 **/
   stackBlitzOptions?: StackBlitzProps;
+  /* 自定义操作按钮 **/
+  customButton?: React.ReactNode;
+  /** 展示代码块内边距 **/
+  codePadding?: number;
 }
 
 export interface PreviewProps extends CodeProps {
   previewBodyClassName?: string;
   className?: string;
   children?: React.ReactNode;
+  prefixCls?: string;
+  /** 只显示效果 **/
+  noCode?: boolean;
+  /** 是否需要边框 */
+  bordered?: boolean;
 }

website/src/components/CodeLayout/index.tsx

@@ -1,90 +1,67 @@
-.preview-fieldset {
-  margin: 0px;
-  padding: 0px;
+.w-code-layout {
   border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 5px;
   background-color: #fff;
 }
 
-.preview-body {
-  padding: 10px;
+.w-code-layout.w-code-layout-body-false {
+  border: none;
+}
+.w-code-layout .preview {
+  padding: 16px;
+}
+
+.w-code-layout .preview-body-false {
+  padding-left: 0px;
 }
 
-.preview-button {
-  padding: 5px;
+.w-code-layout .preview-button {
   display: flex;
   justify-content: center;
   align-items: center;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-.preview-button .preview-button-ccs {
-  margin-right: 30px;
-}
-.preview-button .preview-button-ccs button {
-  border: none;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  opacity: 0.5;
-  padding-left: 0;
-  padding-right: 0;
-}
-.preview-button .preview-button-ccs button:hover {
-  opacity: 1;
+  padding: 10px 0px;
 }
 
-.preview-button-span {
+.w-code-layout .preview-button .preview-button-span {
   margin-right: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.preview-button-copy {
   opacity: 0.5;
   cursor: pointer;
 }
 
-.preview-button-copy:hover {
-  opacity: 1;
-}
-.preview-button-copy > .copy {
+.w-code-layout .preview-button .preview-button-copy > .copy {
   display: inline-block;
 }
-.preview-button-copy > .check {
+.w-code-layout .preview-button .preview-button-copy > .check {
   display: none;
 }
 
-.preview-button-copy-active > .copy {
+.w-code-layout .preview-button .preview-button-copy-active > .copy {
   display: none;
 }
 
-.preview-button-copy-active > .check {
+.w-code-layout .preview-button .preview-button-copy-active > .check {
   display: inline-block;
 }
-.preview-fieldset .preview-code > pre {
-  margin-bottom: 0px;
-}
-
-.preview-code-false {
-  display: none;
-}
-
-.preview-code-true {
-  display: block;
+.w-code-layout .preview-button .preview-button-span:hover {
+  opacity: 1;
 }
 
-.preview-button .preview-code-exand-unexpand-icon {
-  opacity: 0.5;
+.w-code-layout .preview-button .preview-code-exand-unexpand-icon-true {
   display: inline-block;
-  cursor: pointer;
 }
-.preview-button .preview-code-exand-unexpand-icon:hover {
-  opacity: 1;
+
+.w-code-layout .preview-button .preview-code-exand-unexpand-icon-false {
+  display: none;
 }
 
-.preview-button .preview-code-exand-unexpand-icon .preview-code-exand-unexpand-icon-false {
+.w-code-layout .preview-code.preview-code-false {
   display: none;
 }
-.preview-button .preview-code-exand-unexpand-icon .preview-code-exand-unexpand-icon-true {
-  display: inline-block;
+
+.w-code-layout .preview-code {
+  background-color: #f6f8fa;
 }

website/src/components/CodeLayout/interface.ts

@@ -11,7 +11,7 @@ import { Alert } from "uiw";
 // or
 import Alert from "@uiw/react-alert";
 ```
-`import React from 'react'`
+
 ## Basic Usage
 
 ```jsx mdx:preview