@antv/dumi-theme-antv 0.8.0-beta.8 → 0.8.1

package/README.md

@@ -2,18 +2,24 @@
 
 [![NPM version](https://img.shields.io/npm/v/@antv/dumi-theme-antv.svg?style=flat)](https://npmjs.org/package/@antv/dumi-theme-antv) [![NPM downloads](http://img.shields.io/npm/dm/@antv/dumi-theme-antv.svg?style=flat)](https://npmjs.org/package/@antv/dumi-theme-antv)
 
-A theme package for the [dumi](https://next.d.umijs.org) framework.
+A theme package for the [dumi](https://next.d.umijs.org) framework, serving AntV official websites including G2, G6, X6, F2, S2, L7, and more.
 
-## Usage
+[dumi](https://next.d.umijs.org) 框架的主题包，服务于 AntV 官网，包括 G2、G6、X6、F2、S2、L7 等等。
+
+## Usage / 用法
 
 Install this theme into `devDependencies`:
 
+安装此主题到 `devDependencies`：
+
 ```bash
 $ npm i @antv/dumi-theme-antv -D
 ```
 
 Configure it in dumi config file `.dumirc.ts`:
 
+在 dumi 配置文件 `.dumirc.ts` 中配置：
+
 ```ts
 import { defineConfig } from 'dumi';
 
@@ -26,35 +32,68 @@ export defineConfig({
 
 That's all, now you can execute `dumi dev` and enjoy this theme.
 
-## Options
+这就行了，现在你可以执行 `dumi dev` 并享受这个主题了。
+
+## Options / 选项
 
 TODO
 
+`themeConfig.docsearchOptions.sort` creates a sorting rule for search results. This can be defined using an array of strings.
+
 `themeConfig.docsearchOptions.sort` 用于配置搜索结果的排序规则。可以通过字符串数组来定义排序逻辑。
 
+- Each string can be a path segment used to match the link of search results.
+- If a string starts with `!`, it means results NOT containing that path segment should be ranked before those that do.
+
 - 每个字符串可以是一个路径片段，用于匹配搜索结果的链接。
 - 如果字符串以 `!` 开头，则表示不包含该路径片段的结果应排在包含该路径片段的结果之前。
 
-## Development
+## Development / 开发
 
 ```bash
 $ npm install
 ```
 
-After the dependencies are installed, a symlink from `example/.dumi/theme` to `../../src` will be created automatically, the symlink makes dumi load our theme package as a local theme, so we can start the example directly, HMR is also available:
+If you want to test locally, it is recommended to `npm link` directly to the corresponding AntV official website project for testing, so that HMR (Hot Module Replacement) works. Testing directly using this project (e.g. in `example`) does not support HMR.
 
-```bash
-# switch to example directory
-$ cd example
+如果想本地测试，建议直接通过 `npm link` 到对应的 AntV 官网项目中测试，这样才有热更新 (HMR)。直接使用本项目测试（如 `example` 目录）是没有热更新的。
+
+dumi theme development documentation: https://next.d.umijs.org/theme
+
+dumi 主题开发文档：https://next.d.umijs.org/theme
+
+## Release / 发布
+
+This project uses GitHub Actions for automated releasing and [Trusted Publishing](https://docs.npmjs.com/trusted-publishers).
 
-# downloads the dependencies
-npm install
+本项目使用 GitHub Actions 进行自动化发布，并采用了 [可信发布 (Trusted Publishing)](https://docs.npmjs.com/trusted-publishers)。
 
-# start dev server to preview
-npm run dev
+To publish a new version, simply push a git tag:
+
+发布新版本只需推送一个 git tag：
+
+```bash
+# for stable release / 正式发布
+git tag v0.8.0
+git push origin v0.8.0
+
+# for pre-release (auto-tagged as beta/alpha/etc on npm based on the suffix)
+# 预发布（根据后缀自动在 npm 标记为 beta/alpha 等）
+git tag v0.8.0-beta.1
+git push origin v0.8.0-beta.1
 ```
 
-dumi theme development documentation: https://next.d.umijs.org/theme
+The CI will automatically:
+1. Parse the version from the tag.
+2. Build the project.
+3. Publish to npm (with provenance).
+4. Create a GitHub Release.
+
+CI 将会自动：
+1. 从 tag 中解析版本号。
+2. 构建项目。
+3. 发布到 npm（带有 provenance）。
+4. 创建 GitHub Release。
 
 ## LICENSE
 

package/dist/components/AI/HomeDialog/ModeSelector/ModeSelectorDropdown.js

@@ -0,0 +1,42 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Dropdown, Space } from 'antd';
+import { useIntl } from 'dumi';
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { AIChatStore } from "../../../../model/AIChat";
+import { AIModeMeta } from "../../constant";
+export function ModeSelectorDropdown() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var snap = useSnapshot(AIChatStore);
+  var items = Object.entries(AIModeMeta).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return {
+      key: key,
+      label: formatMessage({
+        id: value.shortName
+      }),
+      icon: value.icon,
+      // @ts-ignore
+      onClick: function onClick() {
+        return AIChatStore.mode = key;
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    menu: {
+      items: items
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(Space, null, AIModeMeta[snap.mode].icon, formatMessage({
+    id: AIModeMeta[snap.mode].shortName
+  })))));
+}

package/dist/components/AI/HomeDialog/PromptTextarea/ChooseLib/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dropdown } from "antd";
-import { useProducts } from "../../../../../hooks/useProducts";
-import { useLocale, useIntl, FormattedMessage } from "dumi";
+import { useAntVConfig, useProducts } from "../../../../../hooks/useProducts";
+import { useLocale, FormattedMessage } from "dumi";
 import styles from "./index.module.less";
 export function ChooseLib(props) {
   var _data$find;
@@ -15,11 +15,20 @@ export function ChooseLib(props) {
   var _useProducts = useProducts(),
     _useProducts$data = _useProducts.data,
     data = _useProducts$data === void 0 ? [] : _useProducts$data;
+  var _useAntVConfig = useAntVConfig(),
+    _useAntVConfig$data = _useAntVConfig.data,
+    _useAntVConfig$data2 = _useAntVConfig$data === void 0 ? {
+      library: []
+    } : _useAntVConfig$data,
+    _useAntVConfig$data2$ = _useAntVConfig$data2.library,
+    library = _useAntVConfig$data2$ === void 0 ? [] : _useAntVConfig$data2$;
   var onSelect = function onSelect(key) {
     onChange === null || onChange === void 0 || onChange(key);
   };
   var items = data.filter(function (item) {
-    return item.lang === lang && ["G2", "F2", "S2", "G6", "X6", "AVA"].includes(item.title);
+    return item.lang === lang && library.map(function (l) {
+      return l.toUpperCase();
+    }).includes(item.title);
   }).map(function (item) {
     return {
       key: item.title,
@@ -35,7 +44,6 @@ export function ChooseLib(props) {
       }
     };
   });
-  var intl = useIntl();
   return /*#__PURE__*/React.createElement(Dropdown, {
     menu: {
       items: items

package/dist/components/AI/HomeDialog/PromptTextarea/SendButton.js

@@ -11,7 +11,7 @@ function SendButton(props) {
     disabled = props.disabled,
     tip = props.tip;
   return /*#__PURE__*/React.createElement(Tooltip, {
-    title: disabled ? tip : null
+    title: tip
   }, /*#__PURE__*/React.createElement("img", {
     className: classnames(styles.actionBtn, _defineProperty({}, styles.disabled, disabled)),
     onClick: function onClick() {

package/dist/components/AI/HomeDialog/PromptTextarea/index.js

@@ -12,7 +12,7 @@ import { DatasourceCard } from "./DatasourceCard";
 import { useEventListener } from 'ahooks';
 import classnames from 'classnames';
 import _ from 'lodash';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from "./index.module.less";
 import { SendButton } from "./SendButton";
 import { ChooseLib } from "./ChooseLib";
@@ -21,6 +21,8 @@ import { ic } from "../../../../slots/hooks";
 import { useTypewriter } from "../../../../hooks/useTypewriter";
 import { authStore, showLoginModal } from "../../../../model/auth";
 import { useSnapshot } from "valtio";
+import { AIChatStore } from "../../../../model/AIChat";
+import { ModeSelectorDropdown } from "../ModeSelector/ModeSelectorDropdown";
 var PLACEHOLDER = {
   implement: 'ai.placeholder.implement',
   solve: 'ai.placeholder.solve'
@@ -33,15 +35,25 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
     onConfirm = props.onConfirm,
     onCancel = props.onCancel,
     loading = props.loading,
-    mode = props.mode,
-    lib = props.lib,
-    onLibChange = props.onLibChange,
     _props$showAction = props.showAction,
-    showAction = _props$showAction === void 0 ? true : _props$showAction;
+    showAction = _props$showAction === void 0 ? true : _props$showAction,
+    _props$showModeSelect = props.showModeSelector,
+    showModeSelector = _props$showModeSelect === void 0 ? false : _props$showModeSelect,
+    _props$skipLoginCheck = props.skipLoginCheck,
+    skipLoginCheck = _props$skipLoginCheck === void 0 ? false : _props$skipLoginCheck,
+    sendButtonTip = props.sendButtonTip;
+  var snap = useSnapshot(AIChatStore);
   var authSnap = useSnapshot(authStore);
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-
+  var textareaRef = useRef(null);
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
+  useEffect(function () {
+    if (!themeConfig.isAntVSite && !snap.lib) {
+      AIChatStore.lib = themeConfig.title;
+    }
+  }, [themeConfig.isAntVSite, themeConfig.title]);
   // 将fileMeta状态移到组件内部管理
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -54,8 +66,6 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
     focus = _useState4[0],
     setFocus = _useState4[1];
   var isCompact = size === 'compact';
-  var _useSiteData = useSiteData(),
-    themeConfig = _useSiteData.themeConfig;
   var typedPlaceholder = useTypewriter({
     texts: [formatMessage({
       id: 'ai.placeholder.whatis'
@@ -92,14 +102,23 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
   }
   var datasourceNode = renderDatasourceCard();
   var promptTextValid = Boolean(value);
+  var pureSend = function pureSend() {
+    if (promptTextValid) {
+      onConfirm === null || onConfirm === void 0 || onConfirm();
+    }
+  };
   var send = function send() {
-    if (!authSnap.isAuthenticated) {
-      showLoginModal();
+    // 如果跳过登录检查，直接发送
+    if (skipLoginCheck) {
+      pureSend();
       return;
     }
-    if (promptTextValid) {
-      onConfirm === null || onConfirm === void 0 || onConfirm();
+    // 否则检查登录状态
+    if (!authSnap.isAuthenticated) {
+      showLoginModal(pureSend);
+      return;
     }
+    pureSend();
   };
   useEventListener('keydown', function (event) {
     if (event.key === 'Enter') {
@@ -109,6 +128,8 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
         send(); // 触发自定义事件
       }
     }
+  }, {
+    target: textareaRef
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.container, _defineProperty(_defineProperty(_defineProperty({}, styles.active, focus), styles.compact, isCompact), styles.withDatasource, Boolean(datasourceNode))),
@@ -124,10 +145,11 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
     },
     id: "prompt-textarea",
     className: classnames(styles.promptTextarea),
+    ref: textareaRef,
     placeholder:
     // (!isCompact && !themeConfig.isAntVSite && ic(themeConfig.metas.description)) ||
     !isCompact && !themeConfig.isAntVSite ? typedPlaceholder : formatMessage({
-      id: _.get(PLACEHOLDER, mode, 'ai.placeholder.implement')
+      id: _.get(PLACEHOLDER, snap.mode, 'ai.placeholder.implement')
     }),
     value: value,
     onChange: function onChange(evt) {
@@ -138,10 +160,12 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.dataActions
   }, showAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ChooseLib, {
-    value: lib,
-    onChange: onLibChange,
-    size: size
-  }))), /*#__PURE__*/React.createElement("div", {
+    size: size,
+    value: snap.lib,
+    onChange: function onChange(s) {
+      return AIChatStore.lib = s;
+    }
+  })), showModeSelector && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModeSelectorDropdown, null))), /*#__PURE__*/React.createElement("div", {
     className: styles.actions
   }, loading ? /*#__PURE__*/React.createElement("img", {
     className: styles.actionBtn,
@@ -152,6 +176,6 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
     disabled: !promptTextValid,
     tip: !promptTextValid ? formatMessage({
       id: 'ai.msgbox.send.tip'
-    }) : undefined
+    }) : sendButtonTip
   }))));
 });

package/dist/components/AI/HomeDialog/RecommendCase/Card.js

@@ -1,25 +1,28 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import { Popover } from 'antd';
 import React from 'react';
 import styles from "./card.module.less";
 import { BarChartOutlined, QuestionCircleOutlined } from "@ant-design/icons";
 import { AIMode, AIModeMeta, COLORS } from "../../constant";
-import { FormattedMessage } from 'dumi';
+import { FormattedMessage, useLocale } from 'dumi';
 export var Card = function Card(_ref) {
   var _AIModeMeta$tag;
   var item = _ref.item,
-    index = _ref.index;
-  var query = item.query,
-    description = item.description,
+    index = _ref.index,
+    onClick = _ref.onClick;
+  var _item$query = item.query,
+    query = _item$query === void 0 ? {} : _item$query,
+    _item$description = item.description,
+    description = _item$description === void 0 ? {} : _item$description,
     _item$imageUrls = item.imageUrls,
     imageUrls = _item$imageUrls === void 0 ? [] : _item$imageUrls,
-    link = item.link,
     tag = item.tag;
   var style = COLORS[index];
+  var locale = useLocale();
+  var lang = locale.id === 'zh' ? 'zh' : 'en';
   var handleClick = function handleClick(e) {
     e.stopPropagation();
-    var urlObj = new URL(location.href);
-    urlObj.hash = "";
-    window.open(urlObj.toString(), '_blank');
+    onClick === null || onClick === void 0 || onClick();
   };
   var popoverContent = /*#__PURE__*/React.createElement("div", {
     className: styles.popoverContent
@@ -31,7 +34,7 @@ export var Card = function Card(_ref) {
     id: "ai.recommend.card.caseName"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverValue
-  }, query)), /*#__PURE__*/React.createElement("div", {
+  }, _typeof(query) === 'object' ? query[lang] : query)), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverItem
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.popoverLabel
@@ -39,7 +42,7 @@ export var Card = function Card(_ref) {
     id: "ai.recommend.card.description"
   })), /*#__PURE__*/React.createElement("div", {
     className: styles.popoverValue
-  }, description)));
+  }, _typeof(description) === 'object' ? description[lang] : description)));
   return /*#__PURE__*/React.createElement(Popover, {
     content: popoverContent,
     placement: "top",
@@ -63,7 +66,7 @@ export var Card = function Card(_ref) {
     id: ((_AIModeMeta$tag = AIModeMeta[tag]) === null || _AIModeMeta$tag === void 0 ? void 0 : _AIModeMeta$tag.name) || tag
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles.title
-  }, query), /*#__PURE__*/React.createElement("div", {
+  }, _typeof(query) === 'object' ? query[lang] : query), /*#__PURE__*/React.createElement("div", {
     className: styles.imageContainer
   }, imageUrls.slice(0, 2).map(function (item, idx) {
     return /*#__PURE__*/React.createElement("img", {

package/dist/components/AI/HomeDialog/RecommendCase/card.module.less

@@ -100,7 +100,7 @@
   }
 
   .popoverContent {
-    max-width: 372px;
+    max-width: 800px;
 
     .popoverItem {
       display: flex;
@@ -112,7 +112,7 @@
         color: #1d2129e6;
         line-height: 22px;
         font-weight: 500;
-        min-width: 56px;
+        min-width: 80px;
       }
 
       .popoverValue {

package/dist/components/AI/HomeDialog/RecommendCase/index.js

@@ -9,45 +9,87 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Spin } from 'antd';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Card } from "./Card";
 import styles from "./index.module.less";
 import { ReloadOutlined } from "@ant-design/icons";
 import RecommendJson from "./recommend.json";
 import classnames from "classnames";
-import { FormattedMessage } from 'dumi';
+import { FormattedMessage, useSiteData } from 'dumi';
+import { sample, sampleSize } from "lodash-es";
+import { AIChatStore } from "../../../../model/AIChat";
+import { useAntVConfig } from "../../../../hooks/useProducts";
+import { getBaseSiteDataUrl } from "../../../../utils/env";
 export var RecommendCase = function RecommendCase(props) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
     setLoading = _useState2[1];
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     list = _useState4[0],
     setList = _useState4[1];
-  var fetchList = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var data;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          try {
+  var _useAntVConfig = useAntVConfig(),
+    _useAntVConfig$data = _useAntVConfig.data,
+    _useAntVConfig$data2 = _useAntVConfig$data === void 0 ? {
+      library: []
+    } : _useAntVConfig$data,
+    _useAntVConfig$data2$ = _useAntVConfig$data2.library,
+    library = _useAntVConfig$data2$ === void 0 ? [] : _useAntVConfig$data2$;
+  var fetchList = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _themeConfig$ai, data, url;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
             setLoading(true);
+            data = [];
+            url = themeConfig.isAntVSite && library.length ? "".concat(getBaseSiteDataUrl(), "/").concat(sample(library).toLowerCase(), "/recommend.json") : (themeConfig === null || themeConfig === void 0 || (_themeConfig$ai = themeConfig.ai) === null || _themeConfig$ai === void 0 ? void 0 : _themeConfig$ai.recommend) || "".concat(getBaseSiteDataUrl(), "/").concat(themeConfig.title, "/recommend.json");
+            if (!url) {
+              _context.next = 10;
+              break;
+            }
+            _context.next = 7;
+            return fetch(url).then(function (res) {
+              return res.json();
+            });
+          case 7:
+            data = _context.sent;
+            _context.next = 11;
+            break;
+          case 10:
             data = RecommendJson;
-            setList(data.slice(0, 4));
-          } catch (err) {
-            console.log(err);
-          } finally {
+          case 11:
+            setList(sampleSize(data, 4));
+            _context.next = 18;
+            break;
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](0);
+            setList(RecommendJson);
+            console.log(_context.t0);
+          case 18:
+            _context.prev = 18;
             setLoading(false);
-          }
-        case 1:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), [list]);
+            return _context.finish(18);
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 14, 18, 21]]);
+    }));
+    return function fetchList() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   useEffect(function () {
-    fetchList();
-  }, []);
+    if (library.length) {
+      fetchList();
+    }
+  }, [themeConfig.isAntVSite, library.length]);
   if (!list.length) {
     return null;
   }
@@ -59,14 +101,14 @@ export var RecommendCase = function RecommendCase(props) {
     className: styles.quickStart
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "ai.recommend.title"
-  })), /*#__PURE__*/React.createElement("span", {
+  })), (list === null || list === void 0 ? void 0 : list.length) > 4 ? /*#__PURE__*/React.createElement("span", {
     className: styles.refresh,
     onClick: function onClick() {
       return fetchList();
     }
   }, /*#__PURE__*/React.createElement(ReloadOutlined, null), /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "ai.recommend.refresh"
-  }))), /*#__PURE__*/React.createElement(Spin, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(Spin, {
     spinning: loading,
     wrapperClassName: classnames(styles.listContainer, props.className)
   }, /*#__PURE__*/React.createElement("div", {
@@ -75,7 +117,14 @@ export var RecommendCase = function RecommendCase(props) {
     return /*#__PURE__*/React.createElement(Card, {
       key: item.caseId,
       item: item,
-      index: index
+      index: index,
+      onClick: function onClick() {
+        var _props$onClick;
+        (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, item);
+        if (item.tag) {
+          AIChatStore.mode = item.tag;
+        }
+      }
     });
   }))));
 };

package/dist/components/AI/HomeDialog/RecommendCase/index.module.less

@@ -1,7 +1,9 @@
 .container {
+  position: relative;
   margin-top: 32px;
   margin-left: auto;
   margin-right: auto;
+  z-index: 10;
 }
 
 .title {

package/dist/components/AI/HomeDialog/RecommendCase/recommend.json

@@ -2,41 +2,65 @@
   {
     "caseId": "1",
     "tag": "implement",
-    "query": "一个城市过去五年来的年度降雨量分别是：2016年800毫米，2017年900毫米，2018年700毫米，2019年1000毫米，2020年1100毫米。使用折线图描绘这些数据。",
-    "description": "自然语言描述需求，生成可视化代码",
+    "query": {
+      "zh": "你有一份公司多产品线销售数据：data = [ {month: '1月', productA: 12000, productB: 8500, productC: 15200}, {month: '2月', productA: 13500, productB: 9200, productC: 14800}, {month: '3月', productA: 15200, productB: 10800, productC: 16500}, {month: '4月', productA: 14800, productB: 11500, productC: 17200}, {month: '5月', productA: 16500, productB: 12200, productC: 18800}, {month: '6月', productA: 18200, productB: 13800, productC: 19500}, {month: '7月', productA: 19800, productB: 14500, productC: 20200}, {month: '8月', productA: 21500, productB: 15200, productC: 21800}, {month: '9月', productA: 20200, productB: 16800, productC: 22500}, {month: '10月', productA: 22800, productB: 17500, productC: 23200}, {month: '11月', productA: 24500, productB: 18200, productC: 24800}, {month: '12月', productA: 26200, productB: 19800, productC: 25500} ]， 请绘制一个多折线图展示三条产品线的销售趋势变化，通过不同线型和颜色清晰区分各产品表现。 同时在最高点进行数据标注。",
+      "en": "You have multi-product line sales data for a company: data = [ {month: 'January', productA: 12000, productB: 8500, productC: 15200}, {month: 'February', productA: 13500, productB: 9200, productC: 14800}, {month: 'March', productA: 15200, productB: 10800, productC: 16500}, {month: 'April', productA: 14800, productB: 11500, productC: 17200}, {month: 'May', productA: 16500, productB: 12200, productC: 18800}, {month: 'June', productA: 18200, productB: 13800, productC: 19500}, {month: 'July', productA: 19800, productB: 14500, productC: 20200}, {month: 'August', productA: 21500, productB: 15200, productC: 21800}, {month: 'September', productA: 20200, productB: 16800, productC: 22500}, {month: 'October', productA: 22800, productB: 17500, productC: 23200}, {month: 'November', productA: 24500, productB: 18200, productC: 24800}, {month: 'December', productA: 26200, productB: 19800, productC: 25500} ]. Please draw a multi-line chart to show the sales trend changes of the three product lines, clearly distinguishing each product's performance through different line styles and colors. Also add data annotations at the highest points."
+    },
+    "description": {
+      "zh": "自然语言描述需求，生成可视化代码",
+      "en": "Natural language description of requirements, generate visualization code"
+    },
     "imageUrls": [
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original",
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original"
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*zUKtR4U75fcAAAAAROAAAAgAemJ7AQ/original",
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*zUKtR4U75fcAAAAAROAAAAgAemJ7AQ/original"
     ]
   },
   {
     "caseId": "2",
     "tag": "implement",
-    "query": "使用文件中的数据，生成柱状图",
-    "description": "多种数据源引入，专业图表生成，有数据就能生成图表。",
+    "query": {
+      "zh": "一家咖啡店的饮品销售比例为：咖啡 60%，茶 25%，果汁 15%。请用环图可视化这些饮品销售数据，并将色板调整为橙色系。",
+      "en": "A coffee shop's beverage sales ratio is: Coffee 60%, Tea 25%, Juice 15%. Please visualize these beverage sales data with a donut chart and adjust the color palette to orange tones."
+    },
+    "description": {
+      "zh": "自然语言描述需求，生成可视化代码",
+      "en": "Natural language description of requirements, generate visualization code"
+    },
     "imageUrls": [
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original",
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original"
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oMezTK-Yf2EAAAAAQmAAAAgAemJ7AQ/original",
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oMezTK-Yf2EAAAAAQmAAAAgAemJ7AQ/original"
     ]
   },
   {
     "caseId": "3",
-    "tag": "implement",
-    "query": "基于设计稿生成图表代码，还原视觉细节",
-    "description": "基于设计稿生成图表代码，还原视觉细节",
+    "tag": "solve",
+    "query": {
+      "zh": "为什么配置了 state 没有生效？",
+      "en": "Why is the configured state not taking effect?"
+    },
+    "description": {
+      "zh": "精准定位并提供针对渲染异常、性能瓶颈及数据不匹配等问题的解决方案。",
+      "en": "Precisely locate and provide solutions for rendering anomalies, performance bottlenecks, and data mismatches."
+    },
     "imageUrls": [
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original",
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original"
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*15mgQ4lA5CUAAAAASzAAAAgAemJ7AQ/original",
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*15mgQ4lA5CUAAAAASzAAAAgAemJ7AQ/original"
     ]
   },
   {
     "caseId": "4",
     "tag": "solve",
-    "query": "怎么配置堆叠面积图的描边为不同的颜色",
-    "description": "精准定位并提供针对渲染异常、性能瓶颈及数据不匹配等问题的解决方案。",
+    "query": {
+      "zh": "数据标签互相遮挡了怎么办？",
+      "en": "What to do when data labels overlap each other?"
+    },
+    "description": {
+      "zh": "精准定位并提供针对渲染异常、性能瓶颈及数据不匹配等问题的解决方案。",
+      "en": "Precisely locate and provide solutions for rendering anomalies, performance bottlenecks, and data mismatches."
+    },
     "imageUrls": [
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original",
-      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*K5iUTrYme5QAAAAAQpAAAAgAemJ7AQ/original"
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*thpQQIB3LG4AAAAASMAAAAgAemJ7AQ/original",
+      "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*thpQQIB3LG4AAAAASMAAAAgAemJ7AQ/original"
     ]
   }
 ]