docs: update theme editor (#39363)

* docs: update theme editor

* chore: code clean

* chore: code clean

* chore: fix lint

.dumi/pages/theme-editor/index.tsx

@@ -1,21 +1,140 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
-import { ThemeEditor } from 'antd-token-previewer';
+import { enUS, ThemeEditor, zhCN } from 'antd-token-previewer';
-import { ConfigProvider } from 'antd';
+import { Button, ConfigProvider, message, Modal, Typography } from 'antd';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
+import { Helmet } from 'dumi';
+import { css } from '@emotion/react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { CopyOutlined } from '@ant-design/icons';
+import useLocale from '../../hooks/useLocale';
+
+const locales = {
+  cn: {
+    title: '主题编辑器',
+    save: '保存',
+    reset: '重置',
+    export: '导出',
+    exportDesc: '将下面的 JSON 对象复制到 ConfigProvider 的 theme 属性中即可。',
+    saveSuccessfully: '保存成功',
+  },
+  en: {
+    title: 'Theme Editor',
+    save: 'Save',
+    reset: 'Reset',
+    export: 'Export',
+    exportDesc: 'Copy the following JSON object to the theme prop of ConfigProvider.',
+    saveSuccessfully: 'Saved successfully',
+  },
+};
+
+const useStyle = () => ({
+  header: css({
+    display: 'flex',
+    height: 56,
+    alignItems: 'center',
+    padding: '0 24px',
+    justifyContent: 'space-between',
+    borderBottom: '1px solid #F0F0F0',
+  }),
+});
+
+const ANT_DESIGN_V5_THEME_EDITOR_THEME = 'ant-design-v5-theme-editor-theme';
 
 const CustomTheme = () => {
-  const [theme, setTheme] = useState<ThemeConfig>({});
+  const [messageApi, contextHolder] = message.useMessage();
+  const [modalApi, modalContextHolder] = Modal.useModal();
+  const [locale, lang] = useLocale(locales);
+
+  const [theme, setTheme] = React.useState<ThemeConfig>({});
+
+  useEffect(() => {
+    const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
+    if (storedConfig) {
+      setTheme(() => JSON.parse(storedConfig));
+    }
+  }, []);
+
+  const styles = useStyle();
+
+  const handleSave = () => {
+    localStorage.setItem(ANT_DESIGN_V5_THEME_EDITOR_THEME, JSON.stringify(theme));
+    messageApi.success(locale.saveSuccessfully);
+  };
+
+  const onCopy = (text: string, result: boolean) => {
+    if (result) {
+      messageApi.success('Copy theme config successfully!');
+    } else {
+      messageApi.error('Copy failed, please try again.');
+    }
+  };
+
+  const handleOutput = () => {
+    modalApi.info({
+      title: locale.export,
+      width: 600,
+      content: (
+        <div>
+          <div style={{ color: 'rgba(0,0,0,0.65)' }}>{locale.exportDesc}</div>
+          <pre
+            style={{
+              padding: 12,
+              background: '#f5f5f5',
+              borderRadius: 4,
+              marginTop: 12,
+              position: 'relative',
+            }}
+          >
+            <CopyToClipboard text={JSON.stringify(theme, null, 2)} onCopy={onCopy}>
+              <Button
+                type="text"
+                icon={<CopyOutlined />}
+                style={{ position: 'absolute', right: 8, top: 8 }}
+              />
+            </CopyToClipboard>
+            {JSON.stringify(theme, null, 2)}
+          </pre>
+        </div>
+      ),
+    });
+  };
+
+  const handleReset = () => {
+    setTheme({});
+  };
 
   return (
     <div>
+      <Helmet>
+        <title>{`${locale.title} - Ant Design`}</title>
+        <meta property="og:title" content={`${locale.title} - Ant Design`} />
+      </Helmet>
+      {contextHolder}
+      {modalContextHolder}
       <ConfigProvider theme={{ inherit: false }}>
+        <div css={styles.header}>
+          <Typography.Title level={5} style={{ margin: 0 }}>
+            {locale.title}
+          </Typography.Title>
+          <div>
+            <Button onClick={handleOutput} style={{ marginRight: 8 }}>
+              {locale.export}
+            </Button>
+            <Button onClick={handleReset} style={{ marginRight: 8 }}>
+              {locale.reset}
+            </Button>
+            <Button type="primary" onClick={handleSave}>
+              {locale.save}
+            </Button>
+          </div>
+        </div>
         <ThemeEditor
           theme={{ name: 'Custom Theme', key: 'test', config: theme }}
-          simple
+          style={{ height: 'calc(100vh - 64px - 56px)' }}
-          style={{ height: 'calc(100vh - 64px)' }}
           onThemeChange={(newTheme) => {
             setTheme(newTheme.config);
           }}
+          locale={lang === 'cn' ? zhCN : enUS}
         />
       </ConfigProvider>
     </div>

components/theme/interface/seeds.ts

@@ -41,6 +41,7 @@ export interface SeedToken extends PresetColorType {
 
   /**
    * @nameZH 信息色
+   * @nameEN Info Color
    * @desc 用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。
    * @descEN Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.
    */
@@ -73,6 +74,7 @@ export interface SeedToken extends PresetColorType {
 
   /**
    * @nameZH 默认字号
+   * @nameEN Default Font Size
    * @desc 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。
    * @default 14
    */
@@ -232,7 +234,8 @@ export interface SeedToken extends PresetColorType {
   //  ----------   Style   ---------- //
 
   /**
-   * @nameZH 线框化
+   * @nameZH 线框风格
+   * @nameEN Wireframe Style
    * @desc 用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项
    * @default false
    */

scripts/generate-token-meta.js

@@ -11,19 +11,19 @@ const getTokenList = (list, source) =>
       desc:
         item.comment?.blockTags
           ?.find((tag) => tag.tag === '@desc')
-          ?.content.reduce((result, str) => result.concat(str.text), '') || '-',
+          ?.content.reduce((result, str) => result.concat(str.text), '') || '',
       descEn:
         item.comment?.blockTags
           ?.find((tag) => tag.tag === '@descEN')
-          ?.content.reduce((result, str) => result.concat(str.text), '') || '-',
+          ?.content.reduce((result, str) => result.concat(str.text), '') || '',
       name:
         item.comment?.blockTags
           ?.find((tag) => tag.tag === '@nameZH')
-          ?.content.reduce((result, str) => result.concat(str.text), '') || '-',
+          ?.content.reduce((result, str) => result.concat(str.text), '') || '',
       nameEn:
         item.comment?.blockTags
           ?.find((tag) => tag.tag === '@nameEN')
-          ?.content.reduce((result, str) => result.concat(str.text), '') || '-',
+          ?.content.reduce((result, str) => result.concat(str.text), '') || '',
     }));
 
 function main() {