feat: add visible debug demo (#20018)

* add debug

* 添加隐藏显示逻辑

* fix demo

* add en

* clean up

* clean up

* you see see

* Update site/theme/zh-CN.js

Co-Authored-By: 偏右 <afc163@gmail.com>

* Update site/theme/zh-CN.js

Co-Authored-By: 偏右 <afc163@gmail.com>

* fix css

* remove css

site/theme/en-US.js

@@ -17,6 +17,8 @@ module.exports = {
     'app.component.examples': 'Examples',
     'app.component.examples.expand': 'Expand all code',
     'app.component.examples.collapse': 'Collapse all code',
+    'app.component.examples.visible': 'Expand debug examples',
+    'app.component.examples.hide': 'Collapse debug examples',
     'app.demo.debug': "Debug only, won't display at online",
     'app.demo.copy': 'Copy code',
     'app.demo.copied': 'Copied!',

site/theme/static/demo.less

@@ -22,12 +22,15 @@
 
   &-expand-trigger {
     position: relative;
-    margin-left: 8px;
+    margin-left: 12px;
     color: #3b4357;
-    font-size: 18px;
+    font-size: 20px;
     cursor: pointer;
-    opacity: 0.8;
+    opacity: 0.75;
     transition: all 0.3s;
+    &:hover {
+      opacity: 1;
+    }
   }
 
   &-title {

site/theme/template/Content/ComponentDoc.jsx

@@ -11,10 +11,19 @@ import { ping, getMetaDescription } from '../utils';
 class ComponentDoc extends React.Component {
   state = {
     expandAll: false,
+    visibleAll: false,
     showRiddleButton: false,
   };
 
   componentDidMount() {
+    const { demos = {}, location = {} } = this.props;
+    if (location.hash) {
+      const demoKey = location.hash.split('-demo-')[1];
+      const demoData = demos[demoKey];
+      if (demoData && demoData.meta && demoData.meta.debug) {
+        this.setState({ visibleAll: true });
+      }
+    }
     this.pingTimer = ping(status => {
       if (status !== 'timeout' && status !== 'error') {
         this.setState({
@@ -27,12 +36,17 @@ class ComponentDoc extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
     const { location } = this.props;
     const { location: nextLocation } = nextProps;
-    const { expandAll, showRiddleButton } = this.state;
-    const { expandAll: nextExpandAll, showRiddleButton: nextShowRiddleButton } = nextState;
+    const { expandAll, visibleAll, showRiddleButton } = this.state;
+    const {
+      expandAll: nextExpandAll,
+      visibleAll: nextVisibleAll,
+      showRiddleButton: nextShowRiddleButton,
+    } = nextState;
 
     if (
       nextLocation.pathname === location.pathname &&
       expandAll === nextExpandAll &&
+      visibleAll === nextVisibleAll &&
       showRiddleButton === nextShowRiddleButton
     ) {
       return false;
@@ -51,6 +65,13 @@ class ComponentDoc extends React.Component {
     });
   };
 
+  handleVisibleToggle = () => {
+    const { visibleAll } = this.state;
+    this.setState({
+      visibleAll: !visibleAll,
+    });
+  };
+
   render() {
     const {
       doc,
@@ -61,14 +82,16 @@ class ComponentDoc extends React.Component {
     } = this.props;
     const { content, meta } = doc;
     const demoValues = Object.keys(demos).map(key => demos[key]);
-    const { expandAll, showRiddleButton } = this.state;
-
+    const { expandAll, visibleAll, showRiddleButton } = this.state;
     const isSingleCol = meta.cols === 1;
     const leftChildren = [];
     const rightChildren = [];
-    const showedDemo = demoValues.some(demo => demo.meta.only)
+    let showedDemo = demoValues.some(demo => demo.meta.only)
       ? demoValues.filter(demo => demo.meta.only)
       : demoValues.filter(demo => demo.preview);
+    if (!visibleAll) {
+      showedDemo = showedDemo.filter(item => !item.meta.debug);
+    }
     showedDemo
       .sort((a, b) => a.meta.order - b.meta.order)
       .forEach((demoData, index) => {
@@ -135,19 +158,36 @@ class ComponentDoc extends React.Component {
           )}
           <h2>
             <FormattedMessage id="app.component.examples" />
-            <Tooltip
-              title={
-                <FormattedMessage
-                  id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`}
+            <span style={{ float: 'right' }}>
+              <Tooltip
+                title={
+                  <FormattedMessage
+                    id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`}
+                  />
+                }
+              >
+                <Icon
+                  type="code"
+                  theme={expandAll ? 'filled' : 'outlined'}
+                  className={expandTriggerClass}
+                  onClick={this.handleExpandToggle}
+                />
+              </Tooltip>
+              <Tooltip
+                title={
+                  <FormattedMessage
+                    id={`app.component.examples.${visibleAll ? 'hide' : 'visible'}`}
+                  />
+                }
+              >
+                <Icon
+                  type="bug"
+                  theme={visibleAll ? 'filled' : 'outlined'}
+                  className={expandTriggerClass}
+                  onClick={this.handleVisibleToggle}
                 />
-              }
-            >
-              <Icon
-                type={`${expandAll ? 'appstore' : 'appstore-o'}`}
-                className={expandTriggerClass}
-                onClick={this.handleExpandToggle}
-              />
-            </Tooltip>
+              </Tooltip>
+            </span>
           </h2>
         </section>
         <Row gutter={16}>

site/theme/zh-CN.js

@@ -17,6 +17,8 @@ module.exports = {
     'app.component.examples': '代码演示',
     'app.component.examples.expand': '展开全部代码',
     'app.component.examples.collapse': '收起全部代码',
+    'app.component.examples.visible': '显示调试专用演示',
+    'app.component.examples.hide': '隐藏调试专用演示',
     'app.demo.debug': '此演示仅供调试，线上不会展示',
     'app.demo.copy': '复制代码',
     'app.demo.copied': '复制成功',