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

.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} />;

.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] }]),
+        }))}
+      />
     );
   }
 

.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;

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<`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
 

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 |