fix: handle pr

Tencent · Oct 25, 2022 · 2c8c013 · 2c8c013
1 parent 67294de
commit 2c8c013
Show file tree

Hide file tree

Showing 15 changed files with 2,528 additions and 272 deletions.
diff --git a/src/guide/_example/base.css b/src/guide/_example/base.css
diff --git a/src/guide/_example/base.jsx b/src/guide/_example/base.jsx
@@ -1,8 +1,57 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
-import './base.css';
+
+const classStyles = `
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: var(--td-text-color-primary);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button:first-child {
+  margin-right: 10px;
+}
+</style>
+`;
 
 export default function BasicGuide() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const steps = [
     {
       element: '.main-title-base',

diff --git a/src/guide/_example/custom-popup.css b/src/guide/_example/custom-popup.css
diff --git a/src/guide/_example/custom-popup.jsx b/src/guide/_example/custom-popup.jsx
@@ -1,9 +1,58 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
-import './custom-popup.css';
 import MyPopup from './my-popup';
 
+const classStyles = `
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: var(--td-text-color-primary);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button:first-child {
+  margin-right: 10px;
+}
+</style>
+`;
+
 export default function CustomPopupGuide() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const [visible, setVisible] = React.useState(false);
   const [current, setCurrent] = React.useState(-1);
 

diff --git a/src/guide/_example/dialog-body.css b/src/guide/_example/dialog-body.css
diff --git a/src/guide/_example/dialog-body.jsx b/src/guide/_example/dialog-body.jsx
@@ -1,10 +1,39 @@
-import React from 'react';
-import './dialog-body.css';
+import React, { useEffect } from 'react';
+
+const classStyles = `
+<style>
+.dialog-body .img-wrapper {
+  border-radius: var(--td-radius-default);
+  overflow: hidden;
+}
+
+.dialog-body p {
+  margin-top: 24px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 22px;
+}
+
+.dialog-body .img-wrapper img {
+  vertical-align: bottom;
+  width: 100%;
+}
+</style>
+`;
 
 export default function DialogBody() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   return (
     <div className="dialog-body">
-      <img className="dialog-img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
+      <div className="img-wrapper">
+        <img className="img" src="https://tdesign.gtimg.com/demo/demo-image-1.png" alt="demo" />
+      </div>
       <p>此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。</p>
     </div>
   );

diff --git a/src/guide/_example/dialog.css b/src/guide/_example/dialog.css
diff --git a/src/guide/_example/dialog.jsx b/src/guide/_example/dialog.jsx
@@ -1,9 +1,73 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
-import './base.css';
 import DialogBody from './dialog-body';
 
+const classStyles = `
+<style>
+.guide-container {
+  max-width: 600px;
+  padding: 40px;
+}
+
+.title-major {
+  color: var(--td-text-color-primary);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 44px;
+}
+
+.title-sub {
+  margin-top: 8px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.field {
+  margin-top: 50px;
+}
+
+.label {
+  margin-bottom: 8px;
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.action {
+  display: inline-flex;
+  margin-top: 50px;
+}
+
+.action button:first-child {
+  margin-right: 10px;
+}
+
+/* dialog body */
+
+.dialog-img {
+  width: 100%;
+}
+
+p {
+  margin-top: 16px;
+  color: var(--td-text-color-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 22px;
+}
+</style>
+`;
+
 export default function DialogGuide() {
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
   const steps = [
     {
       element: '.main-title-dialog',