@antv/dumi-theme-antv 0.8.0-beta.9 → 0.8.2

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/AntVBanner/index.module.less

@@ -32,4 +32,24 @@
     margin: 0;
     font-size: 16px;
   }
+
+  @media only screen and (max-width: 767.99px) {
+    .sage {
+      width: 80px;
+    }
+
+    h1 {
+      font-size: 22px;
+      line-height: 28px;
+    }
+
+    .desc {
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .slogan {
+      font-size: 13px;
+    }
+  }
 }

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, { useRef, 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,16 +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),
@@ -55,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'
@@ -99,6 +108,12 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
     }
   };
   var send = function send() {
+    // 如果跳过登录检查，直接发送
+    if (skipLoginCheck) {
+      pureSend();
+      return;
+    }
+    // 否则检查登录状态
     if (!authSnap.isAuthenticated) {
       showLoginModal(pureSend);
       return;
@@ -134,7 +149,7 @@ export var PromptTextarea = /*#__PURE__*/React.memo(function PromptTextareaInner
     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) {
@@ -145,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,
@@ -159,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/PromptTextarea/index.module.less

@@ -99,6 +99,23 @@
       font-size: 14px;
     }
   }
+
+  @media only screen and (max-width: 767.99px) {
+    width: 100%;
+    height: auto;
+    min-height: 120px;
+
+    &.withDatasource {
+      height: auto;
+      min-height: 160px;
+    }
+
+    .header {
+      > div {
+        max-width: 100%;
+      }
+    }
+  }
 }
 
 .datasourceBtn {

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

@@ -1,20 +1,25 @@
+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,
     onClick = _ref.onClick;
-  var query = item.query,
-    description = item.description,
+  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,
     tag = item.tag;
   var style = COLORS[index];
+  var locale = useLocale();
+  var lang = locale.id === 'zh' ? 'zh' : 'en';
   var handleClick = function handleClick(e) {
     e.stopPropagation();
     onClick === null || onClick === void 0 || onClick();
@@ -29,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
@@ -37,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",
@@ -61,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,14 +9,17 @@ 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, useSiteData } from 'dumi';
-import { sampleSize } from "lodash-es";
+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),
@@ -28,49 +31,65 @@ export var RecommendCase = function RecommendCase(props) {
     _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:
-          _context.prev = 0;
-          setLoading(true);
-          data = [];
-          if (!(themeConfig !== null && themeConfig !== void 0 && themeConfig.recommend)) {
-            _context.next = 9;
+  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;
-          }
-          _context.next = 6;
-          return fetch(themeConfig.recommend).then(function (res) {
-            return res.json();
-          });
-        case 6:
-          data = _context.sent;
-          _context.next = 10;
-          break;
-        case 9:
-          data = RecommendJson;
-        case 10:
-          setList(sampleSize(data, 4));
-          _context.next = 16;
-          break;
-        case 13:
-          _context.prev = 13;
-          _context.t0 = _context["catch"](0);
-          console.log(_context.t0);
-        case 16:
-          _context.prev = 16;
-          setLoading(false);
-          return _context.finish(16);
-        case 19:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[0, 13, 16, 19]]);
-  })), [list]);
+          case 10:
+            data = RecommendJson;
+          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);
+            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;
   }
@@ -82,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", {
@@ -102,6 +121,9 @@ export var RecommendCase = function RecommendCase(props) {
       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,4 +1,5 @@
 .container {
+  position: relative;
   margin-top: 32px;
   margin-left: auto;
   margin-right: auto;
@@ -42,3 +43,18 @@
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
 }
+
+@media only screen and (max-width: 767.99px) {
+  .title {
+    width: 100%;
+
+    .quickStart {
+      font-size: 16px;
+    }
+  }
+
+  .list {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+}