@yoka-ui/ui 1.0.10-test

package/dist/lib/business/YkPorjectSelect/index.d.ts

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+/** 项目选项项 */
+type OptionItem = {
+    /** 项目名称 */
+    label: string;
+    /** 项目 ID */
+    value: string | number;
+    /** 项目图标 URL */
+    icon: string;
+    /** 是否已关注 */
+    followed?: boolean;
+    /** 关注排序索引 */
+    follow_index?: number;
+    /** 是否最近访问 */
+    recent_visit?: boolean;
+    /** 是否已关服 */
+    closed?: boolean;
+};
+/** 项目选择器 Props */
+type PageTypes = {
+    /** 当前选中的项目 ID */
+    value: string | number;
+    /** 项目选项列表 */
+    options: OptionItem[];
+    /** 选中项目变化时的回调 */
+    onChange: (value: string | number) => void;
+    /** 关注/取消关注时的回调 */
+    followedCallback?: (item: OptionItem, bool: boolean) => void;
+    /** 弹层内自定义插槽，渲染在搜索框下方、关注项目上方 */
+    slot?: React.ReactNode;
+    /** 自定义触发元素，替代默认的「图标+名称+下拉箭头」展示 */
+    customShow?: React.ReactNode;
+};
+/**
+ * 项目选择器
+ *
+ * 支持搜索、关注/取消关注（最多6个）、在营/关服切换。
+ * 弹层展开时自动聚焦搜索框，使用 preventScroll 避免页面滚动。
+ *
+ * @example
+ * ```tsx
+ * <YkPorjectSelect
+ *   value={projectId}
+ *   options={options}
+ *   onChange={setProjectId}
+ *   followedCallback={(item, followed) => api.follow(item.value, followed)}
+ * />
+ * ```
+ */
+declare const YkPorjectSelect: FC<PageTypes>;
+export default YkPorjectSelect;

package/dist/lib/business/YkPorjectSelect/index.js

@@ -0,0 +1,235 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/business/YkPorjectSelect/index.tsx
+var YkPorjectSelect_exports = {};
+__export(YkPorjectSelect_exports, {
+  default: () => YkPorjectSelect_default
+});
+module.exports = __toCommonJS(YkPorjectSelect_exports);
+var import_TextWithToolTip = __toESM(require("../../components/TextWithToolTip"));
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_react_custom_scrollbars = require("react-custom-scrollbars");
+var import_icon_product = __toESM(require("./icon-product.png"));
+var import_index_module = __toESM(require("./index.module.less"));
+var YkPorjectSelect = ({ value, options, onChange, followedCallback, slot, customShow }) => {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [status, setStatus] = (0, import_react.useState)("1");
+  const [searchKey, setSearchKey] = (0, import_react.useState)("");
+  const [pageHeight, setPageHeight] = (0, import_react.useState)(1e3);
+  const [localOptions, setLocalOptions] = (0, import_react.useState)(options);
+  const searchInputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    setLocalOptions(options);
+  }, [options]);
+  (0, import_react.useEffect)(() => {
+    let timer;
+    if (open) {
+      timer = setTimeout(() => {
+        var _a, _b;
+        (_b = (_a = searchInputRef.current) == null ? void 0 : _a.input) == null ? void 0 : _b.focus({ preventScroll: true });
+      }, 0);
+    }
+    return () => {
+      if (timer !== void 0) {
+        clearTimeout(timer);
+      }
+    };
+  }, [open]);
+  const stateCount = (0, import_react.useMemo)(() => {
+    return localOptions.reduce(
+      (acc, item) => {
+        const statusClosed = item.closed ? 2 : 1;
+        if (!acc[statusClosed]) {
+          acc[statusClosed] = 0;
+        }
+        acc[statusClosed] += 1;
+        return acc;
+      },
+      {}
+    );
+  }, [localOptions]);
+  const tabs = [
+    { key: "1", label: `在营(${stateCount["1"] || 0})` },
+    { key: "2", label: `关服(${stateCount["2"] || 0})` }
+  ];
+  const activeItem = (0, import_react.useMemo)(() => {
+    return localOptions.find((item) => item.value === value);
+  }, [localOptions, value]);
+  const followedOptions = (0, import_react.useMemo)(() => {
+    return localOptions.filter((item) => item.followed);
+  }, [localOptions]);
+  const handleTabChange = (tabKey) => {
+    setStatus(tabKey);
+  };
+  const handleStarChange = async (item, val) => {
+    void (followedCallback == null ? void 0 : followedCallback(item, val === 1));
+    setLocalOptions(
+      (prev) => prev.map((p) => {
+        if (p.value === item.value) {
+          return { ...p, followed: val === 1 };
+        }
+        return p;
+      })
+    );
+  };
+  const handleResize = () => {
+    const height = window.innerHeight;
+    setPageHeight(height);
+  };
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const renderItem = (item) => {
+    const isDisabled = !item.followed && followedOptions.length >= 6;
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Flex, { justify: "space-between", align: "center" }, /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.contentItemSpan, onClick: () => onChange(item.value) }, /* @__PURE__ */ import_react.default.createElement("img", { className: import_index_module.default.contentItemSpanIcon, src: (item == null ? void 0 : item.icon) ? item.icon : import_icon_product.default }), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.contentItemSpanDev }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.contentItemSpanProName }, /* @__PURE__ */ import_react.default.createElement(
+      import_TextWithToolTip.default,
+      {
+        text: item.label,
+        width: "100%",
+        maxWidth: 175,
+        arrow: true,
+        color: "#fff",
+        styles: { body: { color: "#333" } }
+      }
+    ), item.recent_visit ? /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.recentVisit }, "最近访问") : null), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.contentItemSpanProId }, "ID: ", item.value))), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tooltip,
+      {
+        title: isDisabled ? "最多关注6个项目" : item.followed ? "取消关注" : "关注",
+        color: "#fff",
+        placement: "right",
+        styles: { body: { color: "#333" } }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "label",
+        {
+          className: (0, import_classnames.default)(import_index_module.default.contentItemStar, isDisabled && import_index_module.default.contentItemStarDisabled),
+          onClick: () => {
+            if (isDisabled) {
+              return;
+            }
+            void handleStarChange(item, item.followed ? 0 : 1);
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_antd.ConfigProvider,
+          {
+            theme: {
+              components: {
+                Rate: {
+                  starBg: "#dcdbdb"
+                }
+              }
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_antd.Rate,
+            {
+              style: {
+                fontSize: 14,
+                color: isDisabled ? "rgba(0, 0, 0, 0.06)" : "#FFB401",
+                opacity: item.followed || followedOptions.length === 0 ? 1 : 0
+              },
+              value: item.followed ? 1 : 0,
+              count: 1
+            }
+          )
+        )
+      )
+    ));
+  };
+  const content = /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.ykPorjectSelectContent }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.ykPorjectSelectHeader }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      ref: searchInputRef,
+      className: import_index_module.default.ykPorjectSelectSearchInput,
+      prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { style: { color: "#999", marginRight: "10px" } }),
+      value: searchKey,
+      onChange: (e) => setSearchKey(e.target.value),
+      allowClear: true,
+      placeholder: "请输入项目ID/名称"
+    }
+  )), slot && /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.ykPorjectSelectSoltContainer }, slot), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.ykPorjectSelectFollowed }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.contentHeader }, "关注项目"), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.ykPorjectSelectFollowedList }, followedOptions.map((item) => /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Tooltip,
+    {
+      key: item.value,
+      title: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 14, color: "#555555" } }, item.label), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 12, color: "#999" } }, "ID: ", item.value)),
+      color: "#fff",
+      placement: "bottomLeft",
+      styles: { body: { color: "#333" } }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { key: item.value, className: import_index_module.default.ykPorjectSelectFollowedItem }, /* @__PURE__ */ import_react.default.createElement("img", { className: import_index_module.default.ykPorjectSelectFollowedItemIcon, src: item.icon, alt: item.label }), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.closeIcon, onClick: () => void handleStarChange(item, 0) }))
+  )))), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Tabs,
+    {
+      className: import_index_module.default.ykPorjectSelectProductPanelTabs,
+      centered: true,
+      onChange: handleTabChange,
+      activeKey: status,
+      items: tabs
+    }
+  ), localOptions.length === 0 ? /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE }) : /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.ykPorjectSelectListSection }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.contentHeader }, "全部项目"), /* @__PURE__ */ import_react.default.createElement(
+    import_react_custom_scrollbars.Scrollbars,
+    {
+      className: import_index_module.default.ykPorjectSelectScrollBarsBox,
+      autoHeight: true,
+      autoHide: true,
+      autoHeightMax: Math.min(450, pageHeight - 310),
+      renderThumbVertical: ({ style, ...props }) => /* @__PURE__ */ import_react.default.createElement("div", { ...props, style: { ...style, background: "#EEEEEE", borderRadius: 3, width: 6 } })
+    },
+    localOptions.sort((a, b) => (b.recent_visit ? 1 : 0) - (a.recent_visit ? 1 : 0)).map((item) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: item.value,
+        className: (0, import_classnames.default)(import_index_module.default.contentItem, item.value === value ? import_index_module.default.contentItemActive : "")
+      },
+      renderItem(item)
+    ))
+  )));
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      className: import_index_module.default.ykPorjectSelect,
+      styles: { body: { borderRadius: 4, padding: 0 } },
+      content,
+      placement: "bottom",
+      trigger: "click",
+      open,
+      onOpenChange: setOpen,
+      getPopupContainer: (triggerNode) => triggerNode.parentNode,
+      autoAdjustOverflow: false
+    },
+    customShow ? customShow : /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.ykPorjectSelectShow }, /* @__PURE__ */ import_react.default.createElement("img", { className: import_index_module.default.ykPorjectSelectShowIcon, src: activeItem == null ? void 0 : activeItem.icon, alt: activeItem == null ? void 0 : activeItem.label }), /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.ykPorjectSelectShowText }, activeItem == null ? void 0 : activeItem.label), /* @__PURE__ */ import_react.default.createElement("i", { className: "iconfont icon-xiala" }))
+  );
+};
+var YkPorjectSelect_default = YkPorjectSelect;
+//# sourceMappingURL=index.js.map

package/dist/lib/business/YkPorjectSelect/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/business/YkPorjectSelect/index.tsx"],
+  "sourcesContent": ["import TextWithTooltip from '@/components/TextWithToolTip';\nimport { SearchOutlined } from '@ant-design/icons';\nimport type { InputRef } from 'antd';\nimport { ConfigProvider, Empty, Flex, Input, Popover, Rate, Tabs, Tooltip } from 'antd';\nimport classNames from 'classnames';\nimport React, { FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars';\nimport iconProductDefault from './icon-product.png';\nimport styles from './index.module.less';\n\n/** 项目选项项 */\ntype OptionItem = {\n  /** 项目名称 */\n  label: string;\n  /** 项目 ID */\n  value: string | number;\n  /** 项目图标 URL */\n  icon: string;\n  /** 是否已关注 */\n  followed?: boolean;\n  /** 关注排序索引 */\n  follow_index?: number;\n  /** 是否最近访问 */\n  recent_visit?: boolean;\n  /** 是否已关服 */\n  closed?: boolean;\n};\n\n/** 项目选择器 Props */\ntype PageTypes = {\n  /** 当前选中的项目 ID */\n  value: string | number;\n  /** 项目选项列表 */\n  options: OptionItem[];\n  /** 选中项目变化时的回调 */\n  onChange: (value: string | number) => void;\n  /** 关注/取消关注时的回调 */\n  followedCallback?: (item: OptionItem, bool: boolean) => void;\n  /** 弹层内自定义插槽，渲染在搜索框下方、关注项目上方 */\n  slot?: React.ReactNode;\n  /** 自定义触发元素，替代默认的「图标+名称+下拉箭头」展示 */\n  customShow?: React.ReactNode;\n};\n\n/**\n * 项目选择器\n *\n * 支持搜索、关注/取消关注（最多6个）、在营/关服切换。\n * 弹层展开时自动聚焦搜索框，使用 preventScroll 避免页面滚动。\n *\n * @example\n * ```tsx\n * <YkPorjectSelect\n *   value={projectId}\n *   options={options}\n *   onChange={setProjectId}\n *   followedCallback={(item, followed) => api.follow(item.value, followed)}\n * />\n * ```\n */\nconst YkPorjectSelect: FC<PageTypes> = ({ value, options, onChange, followedCallback, slot, customShow }) => {\n  const [open, setOpen] = useState(false);\n  const [status, setStatus] = useState<string>('1');\n  const [searchKey, setSearchKey] = useState('');\n  const [pageHeight, setPageHeight] = useState<number>(1000);\n  const [localOptions, setLocalOptions] = useState<OptionItem[]>(options);\n  const searchInputRef = useRef<InputRef>(null);\n\n  useEffect(() => {\n    setLocalOptions(options);\n  }, [options]);\n\n  /** 弹层展开时聚焦搜索框，使用 preventScroll 避免浏览器滚动到顶部；延迟等待 Popover 内容挂载 */\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    if (open) {\n      timer = setTimeout(() => {\n        searchInputRef.current?.input?.focus({ preventScroll: true });\n      }, 0);\n    }\n    return () => {\n      if (timer !== undefined) {\n        clearTimeout(timer);\n      }\n    };\n  }, [open]);\n\n  /** 在营/关服数量统计 */\n  const stateCount = useMemo(() => {\n    return localOptions.reduce(\n      (acc, item) => {\n        const statusClosed = item.closed ? 2 : 1;\n        if (!acc[statusClosed]) {\n          acc[statusClosed] = 0;\n        }\n        acc[statusClosed] += 1;\n        return acc;\n      },\n      {} as { [key: string]: number },\n    );\n  }, [localOptions]);\n\n  /** 在营/关服 Tab 配置 */\n  const tabs = [\n    { key: '1', label: `在营(${stateCount['1'] || 0})` },\n    { key: '2', label: `关服(${stateCount['2'] || 0})` },\n  ];\n\n  /** 当前选中的项目（用于展示图标与名称） */\n  const activeItem = useMemo(() => {\n    return localOptions.find((item) => item.value === value);\n  }, [localOptions, value]);\n\n  /** 已关注的项目列表（顶部展示、用于计算关注数限制） */\n  const followedOptions = useMemo(() => {\n    return localOptions.filter((item) => item.followed);\n  }, [localOptions]);\n\n  // 切换在营/关服\n  const handleTabChange = (tabKey: string) => {\n    setStatus(tabKey);\n  };\n\n  // 点击关注或取消关注\n  const handleStarChange = async (item: OptionItem, val: number) => {\n    void followedCallback?.(item, val === 1);\n    setLocalOptions((prev) =>\n      prev.map((p) => {\n        if (p.value === item.value) {\n          return { ...p, followed: val === 1 };\n        }\n        return p;\n      }),\n    );\n  };\n\n  const handleResize = () => {\n    const height = window.innerHeight;\n    setPageHeight(height);\n  };\n\n  useEffect(() => {\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  /** 渲染单个项目行（名称、ID、关注星标） */\n  const renderItem = (item: OptionItem) => {\n    const isDisabled = !item.followed && followedOptions.length >= 6;\n    return (\n      <Flex justify='space-between' align='center'>\n        <span className={styles.contentItemSpan} onClick={() => onChange(item.value)}>\n          <img className={styles.contentItemSpanIcon} src={item?.icon ? item.icon : iconProductDefault} />\n          <div className={styles.contentItemSpanDev}>\n            <div className={styles.contentItemSpanProName}>\n              <TextWithTooltip\n                text={item.label}\n                width='100%'\n                maxWidth={175}\n                arrow={true}\n                color='#fff'\n                styles={{ body: { color: '#333' } }}\n              ></TextWithTooltip>\n              {item.recent_visit ? <span className={styles.recentVisit}>最近访问</span> : null}\n            </div>\n            <div className={styles.contentItemSpanProId}>ID: {item.value}</div>\n          </div>\n        </span>\n        <Tooltip\n          title={isDisabled ? '最多关注6个项目' : item.followed ? '取消关注' : '关注'}\n          color='#fff'\n          placement='right'\n          styles={{ body: { color: '#333' } }}\n        >\n          <label\n            className={classNames(styles.contentItemStar, isDisabled && styles.contentItemStarDisabled)}\n            onClick={() => {\n              if (isDisabled) {\n                return;\n              }\n              void handleStarChange(item, item.followed ? 0 : 1);\n            }}\n          >\n            <ConfigProvider\n              theme={{\n                components: {\n                  Rate: {\n                    starBg: '#dcdbdb',\n                  },\n                },\n              }}\n            >\n              <Rate\n                style={{\n                  fontSize: 14,\n                  color: isDisabled ? 'rgba(0, 0, 0, 0.06)' : '#FFB401',\n                  opacity: item.followed || followedOptions.length === 0 ? 1 : 0,\n                }}\n                value={item.followed ? 1 : 0}\n                count={1}\n              />\n            </ConfigProvider>\n          </label>\n        </Tooltip>\n      </Flex>\n    );\n  };\n\n  /** 弹层内容：搜索、slot、关注区、Tab、项目列表 */\n  const content = (\n    <div className={styles.ykPorjectSelectContent}>\n      <div className={styles.ykPorjectSelectHeader}>\n        <Input\n          ref={searchInputRef}\n          className={styles.ykPorjectSelectSearchInput}\n          prefix={<SearchOutlined style={{ color: '#999', marginRight: '10px' }} />}\n          value={searchKey}\n          onChange={(e) => setSearchKey(e.target.value)}\n          allowClear\n          placeholder='请输入项目ID/名称'\n        />\n      </div>\n      {slot && <div className={styles.ykPorjectSelectSoltContainer}>{slot}</div>}\n      <div className={styles.ykPorjectSelectFollowed}>\n        <div className={styles.contentHeader}>关注项目</div>\n        <div className={styles.ykPorjectSelectFollowedList}>\n          {followedOptions.map((item) => (\n            <Tooltip\n              key={item.value}\n              title={\n                <>\n                  <div style={{ fontSize: 14, color: '#555555' }}>{item.label}</div>\n                  <div style={{ fontSize: 12, color: '#999' }}>ID: {item.value}</div>\n                </>\n              }\n              color='#fff'\n              placement='bottomLeft'\n              styles={{ body: { color: '#333' } }}\n            >\n              <div key={item.value} className={styles.ykPorjectSelectFollowedItem}>\n                <img className={styles.ykPorjectSelectFollowedItemIcon} src={item.icon} alt={item.label} />\n                <div className={styles.closeIcon} onClick={() => void handleStarChange(item, 0)} />\n              </div>\n            </Tooltip>\n          ))}\n        </div>\n      </div>\n      <Tabs\n        className={styles.ykPorjectSelectProductPanelTabs}\n        centered\n        onChange={handleTabChange}\n        activeKey={status}\n        items={tabs}\n      ></Tabs>\n      {localOptions.length === 0 ? (\n        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />\n      ) : (\n        <div className={styles.ykPorjectSelectListSection}>\n          <div className={styles.contentHeader}>全部项目</div>\n          <Scrollbars\n            className={styles.ykPorjectSelectScrollBarsBox}\n            autoHeight\n            autoHide\n            autoHeightMax={Math.min(450, pageHeight - 310)}\n            renderThumbVertical={({ style, ...props }) => (\n              <div {...props} style={{ ...style, background: '#EEEEEE', borderRadius: 3, width: 6 }} />\n            )}\n          >\n            {localOptions\n              .sort((a, b) => (b.recent_visit ? 1 : 0) - (a.recent_visit ? 1 : 0))\n              .map((item) => (\n                <div\n                  key={item.value}\n                  className={classNames(styles.contentItem, item.value === value ? styles.contentItemActive : '')}\n                >\n                  {renderItem(item)}\n                </div>\n              ))}\n          </Scrollbars>\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <Popover\n      className={styles.ykPorjectSelect}\n      styles={{ body: { borderRadius: 4, padding: 0 } }}\n      content={content}\n      placement='bottom'\n      trigger='click'\n      open={open}\n      onOpenChange={setOpen}\n      getPopupContainer={(triggerNode: HTMLElement) => triggerNode.parentNode as HTMLElement}\n      autoAdjustOverflow={false}\n    >\n      {customShow ? (\n        customShow\n      ) : (\n        <div className={styles.ykPorjectSelectShow}>\n          <img className={styles.ykPorjectSelectShowIcon} src={activeItem?.icon} alt={activeItem?.label} />\n          <span className={styles.ykPorjectSelectShowText}>{activeItem?.label}</span>\n          <i className='iconfont icon-xiala' />\n        </div>\n      )}\n    </Popover>\n  );\n};\n\nexport default YkPorjectSelect;\n"],
+  "mappings": "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",
+  "names": ["React", "styles", "iconProductDefault", "TextWithTooltip", "classNames"]
+}

package/dist/lib/business/YkPorjectSelect/index.module.less

@@ -0,0 +1,334 @@
+.ykPorjectSelect {
+  position: relative;
+}
+
+.ykPorjectSelectShow {
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  width: fit-content;
+  max-width: 100%;
+  height: 35px;
+  padding: 0 15px 0 20px;
+  background-color: #f7f8fa;
+  border-radius: 18px;
+  box-shadow: inset 0px 0px 0px 0px rgba(20, 31, 62, 0.5);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &:hover {
+    background-color: #f2f3f8;
+  }
+
+  .ykPorjectSelectShowIcon {
+    position: relative;
+    width: 25px;
+    height: 25px;
+    background-size: 100% 100%;
+    border-radius: 5px;
+  }
+
+  .ykPorjectSelectShowText {
+    width: 150px;
+    margin-right: 10px;
+    margin-left: 10px;
+    overflow: hidden;
+    color: #252934;
+    font-weight: 400;
+    font-size: 15px;
+    font-family:
+      PingFangSC-Regular,
+      PingFang SC;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.ykPorjectSelectContent {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 350px;
+  padding: 0;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .ykPorjectSelectHeader {
+    flex-shrink: 0;
+    padding: 10px 4px;
+    border-bottom: 1px solid #e7e7e7;
+
+    .ykPorjectSelectSearchInput {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+      border: none;
+      box-shadow: none;
+
+      :global {
+        input {
+          line-height: 30px;
+          caret-color: #1890ff;
+        }
+
+        input::placeholder {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .ykPorjectSelectSoltContainer {
+    border-bottom: 1px solid #e7e7e7;
+  }
+
+  .contentHeader {
+    height: 20px;
+    margin: 10px 0;
+    padding-left: 20px;
+    color: #999;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .ykPorjectSelectFollowed {
+    flex-shrink: 0;
+
+    .ykPorjectSelectFollowedList {
+      position: relative;
+      display: flex;
+      gap: 14px;
+      padding: 0 20px 10px 20px;
+      border-bottom: 1px solid #ecedf1;
+
+      .ykPorjectSelectFollowedItem {
+        position: relative;
+
+        &:hover {
+          .closeIcon {
+            opacity: 1;
+          }
+        }
+
+        .ykPorjectSelectFollowedItemIcon {
+          width: 40px;
+          height: 40px;
+          border-radius: 5px;
+          cursor: pointer;
+        }
+
+        .closeIcon {
+          position: absolute;
+          top: -2px;
+          right: -2px;
+          width: 14px;
+          height: 14px;
+          font-size: 14px;
+          background: url('./product-close.png') no-repeat center center;
+          background-size: 100% 100%;
+          cursor: pointer;
+          opacity: 0;
+          transition: all 0.2s linear;
+        }
+      }
+    }
+  }
+
+  // 列表区：flex 子项需 min-height:0，否则 Scrollbars 会被内容撑满、无法内部滚动
+  .ykPorjectSelectListSection {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    margin-bottom: 5px;
+    overflow: hidden;
+  }
+
+  .ykPorjectSelectProductPanelTabs {
+    flex-shrink: 0;
+    margin-top: 15px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #ecedf1;
+
+    :global {
+      .ant-tabs-nav {
+        margin-bottom: 0;
+
+        &:before {
+          border-bottom: none;
+        }
+
+        .ant-tabs-nav-wrap {
+          .ant-tabs-nav-list {
+            .ant-tabs-tab-active {
+              .ant-tabs-tab-btn {
+                color: #666;
+              }
+            }
+
+            .ant-tabs-tab {
+              padding: 5px 0 6px 0;
+              color: #999;
+              font-weight: 400;
+              font-size: 14px;
+            }
+
+            .ant-tabs-ink-bar {
+              height: 2px;
+              border-radius: 3px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ykPorjectSelectScrollBarsBox {
+    flex: 1;
+    min-height: 0;
+
+    :global(> div:first-of-type) {
+      padding: 0 10px;
+      overscroll-behavior: contain;
+    }
+
+    .contentItem {
+      position: relative;
+      padding: 4px 0 4px 10px;
+      color: #666666;
+      font-weight: 400;
+      font-size: 14px;
+      transition: 0.2s linear all;
+
+      &:hover {
+        background: #f0f9ff;
+
+        :global {
+          .ant-rate {
+            opacity: 1 !important;
+          }
+        }
+
+        .contentItemSpan {
+          color: #333;
+        }
+
+        .contentItemSpanProName {
+          color: #333 !important;
+        }
+      }
+
+      &.contentItemActive {
+        background: #f0f9ff;
+        border-radius: 4px;
+
+        .contentItemSpan {
+          color: #1677ff;
+        }
+
+        .contentItemSpanProName {
+          color: #1677ff !important;
+        }
+
+        .contentItemSpanProId {
+          color: #1677ff !important;
+        }
+      }
+
+      :global {
+        .ant-flex-align-center {
+          border-radius: 6px;
+          cursor: pointer;
+          transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        }
+      }
+
+      .contentItemStar {
+        width: 45px;
+        height: 37px;
+        line-height: 37px;
+        text-align: center;
+        cursor: pointer;
+
+        &.contentItemStarDisabled {
+          cursor: not-allowed !important;
+
+          :global {
+            .ant-rate-star {
+              cursor: not-allowed !important;
+            }
+          }
+        }
+
+        :global {
+          .ant-rate-star {
+            cursor: pointer;
+          }
+
+          .ant-rate-star > div {
+            transform: scale(1) !important;
+          }
+        }
+      }
+
+      .contentItemSpan {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        padding: 2px 0 1px 0;
+        overflow: hidden;
+        color: #666666;
+        font-weight: 400;
+        font-size: 14px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        .contentItemSpanIcon {
+          width: 30px;
+          height: 30px;
+          margin-right: 10px;
+          border-radius: 5px;
+          transform: translateY(-1px);
+        }
+
+        .contentItemSpanDev {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          color: #666666;
+          font-weight: 400;
+          font-size: 14px;
+
+          .contentItemSpanProName {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            color: #555555;
+            line-height: 20px;
+
+            .recentVisit {
+              height: 20px;
+              padding: 2px 4px;
+              color: #0a6bfd;
+              font-size: 10px;
+              line-height: 14px;
+              background: #f6f8ff;
+              border: 1px solid #e2ebfd;
+              border-radius: 2px;
+            }
+          }
+
+          .contentItemSpanProId {
+            color: #999;
+            font-size: 12px;
+            line-height: 14px;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/lib/components/Clock/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * 倒计时时钟组件的 Props
+ */
+type props = {
+    /** 根节点类名，可选，用于样式覆盖 */
+    className?: string;
+    /** 秒数后的文案，默认「秒后更新数据」，展示为「{time} {text}」 */
+    text?: string;
+    /** 是否隐藏文案，默认 false */
+    hideText?: boolean;
+    /** 剩余 1 秒时触发的回调，常用于刷新数据 */
+    cellBack: () => void;
+};
+/**
+ * 倒计时时钟：展示距下一整分钟的剩余秒数，带环形进度条，剩 1 秒时调用 cellBack。
+ */
+declare const Clock: React.FC<props>;
+export default Clock;