From 0dc781559981090ae298e233bf53c25540582092 Mon Sep 17 00:00:00 2001
From: dongfang <1136005348@qq.com>
Date: Fri, 6 Jan 2023 12:36:43 +0800
Subject: [PATCH] fix: missing css code in demo code preview (#39471)

* fix: missing demo style in windows

* fix: missing css code in demo preview

* fix: change TabPane to tabs items

* fix: change cn why-open url
---
 .../theme/builtins/Previewer/fromDumiProps.tsx |  3 +--
 .dumi/theme/common/CodePreview.tsx             | 18 +++++++++---------
 .dumi/theme/plugin.ts                          |  2 +-
 components/dropdown/index.zh-CN.md             |  4 ++--
 components/tooltip/index.zh-CN.md              |  2 +-
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
index e0eb1151b612..0a5de19a3e85 100644
--- a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
+++ b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
@@ -86,8 +86,7 @@ export default function fromDumiProps<P extends object>(
       location,
       src: demoUrl,
       expand,
-      // FIXME: confirm is there has any case?
-      highlightedStyle: '',
+      highlightedStyle: meta.style ? Prism.highlight(meta.style, Prism.languages.css, 'css') : '',
     } as P;
 
     return <WrappedComponent {...transformedProps} />;
diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx
index 1f399a122163..492b05849788 100644
--- a/.dumi/theme/common/CodePreview.tsx
+++ b/.dumi/theme/common/CodePreview.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Tabs } from 'antd';
 
-const { TabPane } = Tabs;
-
 const LANGS = {
   tsx: 'TypeScript',
   jsx: 'JavaScript',
@@ -23,13 +21,15 @@ const CodePreview: React.FC<CodePreviewProps> = ({ toReactComponent, codes, onCo
     content = toReactComponent(['pre', { lang: langList[0], highlighted: codes[langList[0]] }]);
   } else {
     content = (
-      <Tabs centered onChange={onCodeTypeChange}>
-        {langList.map((lang) => (
-          <TabPane tab={LANGS[lang]} key={lang}>
-            {toReactComponent(['pre', { lang, highlighted: codes[lang] }])}
-          </TabPane>
-        ))}
-      </Tabs>
+      <Tabs
+        centered
+        onChange={onCodeTypeChange}
+        items={langList.map((lang) => ({
+          label: LANGS[lang],
+          key: lang,
+          children: toReactComponent(['pre', { lang, highlighted: codes[lang] }]),
+        }))}
+      />
     );
   }
 
diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts
index baf0b3dc44f8..c095f2625cd5 100644
--- a/.dumi/theme/plugin.ts
+++ b/.dumi/theme/plugin.ts
@@ -26,7 +26,7 @@ class AntdReactTechStack extends ReactTechStack {
         const description = md.match(
           new RegExp(`(?:^|\\n)## ${locale}([^]+?)(\\n## [a-z]|\\n\`\`\`|\\n<style>|$)`),
         )?.[1];
-        const style = md.match(/\n(?:```css|<style>)\n([^]+?)\n(?:```|<\/style>)/)?.[1];
+        const style = md.match(/\r?\n(?:```css|<style>)\r?\n([^]+?)\r?\n(?:```|<\/style>)/)?.[1];
 
         props.description ??= description?.trim();
         props.style ??= style;
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 23d43dfcab5a..6fc1bb5c2e61 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -54,8 +54,8 @@ demo:
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
 | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | - | 4.23.0 |
-| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#why-open)） | (open: boolean) => void | - | 4.23.0 |
+| open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | boolean | - | 4.23.0 |
+| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | (open: boolean) => void | - | 4.23.0 |
 
 ### Dropdown.Button
 
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index c70c8456bc60..fb31f42f86cf 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -53,7 +53,7 @@ demo:
 | overlayInnerStyle | 卡片内容区域的样式对象 | object | - |  |
 | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |  |
 | trigger | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为 | string \| string\[] | `hover` |  |
-| open | 用于手动控制浮层显隐，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | false | 4.23.0 |
+| open | 用于手动控制浮层显隐，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | boolean | false | 4.23.0 |
 | zIndex | 设置 Tooltip 的 `z-index` | number | - |  |
 | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |