quick-start-feature-box 1.0.0

package/dist/index.css

@@ -0,0 +1,425 @@
+/* src/FeatureBox/index.less */
+.FeatureBox {
+  flex: 1 1 auto;
+  .FeatureItem {
+    width: 100%;
+    margin-bottom: 30px;
+    border-radius: 12px;
+    border-radius: 8px;
+    border: 1px solid #ebebeb;
+    background-color: #FFFFFF;
+    box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.05);
+    .header {
+      color: #333333;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 28px;
+      .headerLeft {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        .iconBox {
+          width: 20px;
+          height: 20px;
+        }
+        .title {
+          font-size: 15px;
+          font-weight: 500;
+          :global {
+            .iconfont {
+              font-size: 13px;
+              color: #7f7f7f;
+              cursor: pointer;
+              margin-left: 16px;
+              &:hover {
+                color: var(--color-primary);
+              }
+            }
+          }
+        }
+        .summary {
+          margin-top: 12px;
+        }
+      }
+      .btn {
+        font-size: 14px;
+        border-radius: 5px;
+        padding: 5px 18px;
+        color: #333333;
+        border: 1px solid #d9d9d9;
+        transition: all 0.3s ease;
+      }
+      &:hover {
+        text-decoration: none;
+        .btn {
+          color: var(--color-primary);
+          border-color: var(--color-primary);
+        }
+      }
+    }
+    .wrapper {
+      border-top: 1px solid #ebebeb;
+      padding: 20px 28px;
+      .contentBox {
+        padding: 14px 20px;
+        border-radius: 10px;
+        display: flex;
+        align-items: flex-start;
+        background-color: #fafafa;
+        border-radius: 10px;
+        gap: 8px;
+        margin-bottom: 28px;
+        :global {
+          .iconfont {
+            color: #f59a23;
+            font-size: 18px;
+          }
+        }
+        .contentRight {
+          .title {
+            font-weight: 500;
+          }
+          .content {
+            line-height: 1.8em;
+            margin-top: 8px;
+            :global {
+              li::before {
+                content: "\2022";
+                font-size: 1em;
+                font-weight: 300;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+      .remark {
+        color: #7f7f7f;
+      }
+    }
+  }
+}
+:global {
+  .pgant-tooltip-inner {
+    min-height: unset;
+  }
+  .pgant-image-preview-img {
+    max-width: 80vw;
+    max-height: 80vh;
+  }
+}
+
+/* src/StepAndQuote/index.less */
+.StepAndQuote {
+  display: block;
+  position: relative;
+  color: #333333;
+  .tail {
+    position: absolute;
+    top: 24px;
+    left: 12px;
+    height: 100%;
+    border-left: 1px solid #e1e1e1;
+  }
+  .circle {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    left: 0px;
+    z-index: 1;
+    background-color: #FFFFFF;
+    border: 1px solid #e1e1e1;
+    border-radius: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+  }
+  .content {
+    margin-left: 60px;
+    position: relative;
+    word-break: break-all;
+  }
+  &.Step {
+    padding-bottom: 32px;
+    .title {
+      font-size: 15px;
+      font-weight: 650;
+      margin-bottom: 5px;
+      cursor: pointer;
+      display: inline-block;
+      :global {
+        .iconfont {
+          font-weight: normal;
+          opacity: 0;
+          width: 13px;
+          height: 13px;
+          color: #7f7f7f;
+          cursor: pointer;
+          padding: 0 8px;
+          font-size: 13px;
+          transition: opacity 0.3s ease-in-out;
+        }
+      }
+      &:hover {
+        :global {
+          .iconfont {
+            opacity: 100;
+            color: var(--color-primary);
+          }
+        }
+      }
+    }
+  }
+  &.Quote {
+    padding-bottom: 56px;
+    position: relative;
+    .line {
+      width: 100%;
+      height: 1px;
+      margin-top: 56px;
+      background-color: #e1e1e1;
+    }
+    .circle {
+      top: 18px;
+    }
+    .tail {
+      display: none;
+    }
+    .content {
+      margin-left: 0;
+    }
+    .title {
+      cursor: pointer;
+      padding: 12px;
+      border-radius: 5px;
+      margin-left: 60px;
+      border: 1px solid #e1e1e1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: all 0.3s ease-in-out;
+      .QuoteBoxLeft {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        .QuoteIcon {
+          width: 40px;
+          height: auto;
+        }
+        .QuoteText {
+          font-size: 15px;
+          font-weight: 650;
+        }
+      }
+      .QuoteBoxRight {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      &:hover {
+        box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+  &:last-child {
+    .tail {
+      display: none;
+    }
+  }
+}
+
+/* src/Tab/index.less */
+.Tab {
+  display: flex;
+  gap: 16px;
+  padding: 10px 0 24px 0;
+  border-bottom: 1px solid #ebebeb;
+  .tabItem {
+    padding: 16px 28px;
+    border: 1px solid #e1e1e1;
+    border-radius: 5px;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    .tabIcon {
+      width: 28px;
+      height: 28px;
+      color: #959595;
+      fill: currentColor;
+      transition: all 0.3s ease-in-out;
+    }
+    &:hover {
+      color: var(--color-primary, #fb9332);
+      .tabIcon {
+        color: var(--color-primary, #fb9332);
+      }
+    }
+    &.active {
+      color: var(--color-primary, #fb9332);
+      border-color: var(--color-primary, #fb9332);
+      .tabIcon {
+        color: var(--color-primary, #fb9332);
+      }
+    }
+    &.noFirstTabsItem {
+      padding: 10px 22px;
+    }
+    &.hasIcon {
+      padding: 10px 28px;
+    }
+  }
+  &.noFirstTab {
+    padding: 24px 0 24px 0;
+  }
+  &.isInternalChanged {
+    margin-bottom: 24px;
+  }
+}
+.Tab + .Tab {
+  margin-top: -24px;
+}
+
+/* src/Article/index.less */
+.Article {
+  a {
+    text-decoration: underline;
+    text-decoration-color: var(--color-primary, #FB9332);
+  }
+  img {
+    border: 1px solid #eeeeee;
+  }
+  b {
+    color: #333333;
+  }
+  :first-child {
+    margin-top: 0 !important;
+  }
+  :global {
+    .title {
+      font-size: 14px;
+      margin-top: 16px;
+      margin-bottom: 8px;
+      font-weight: 650;
+    }
+    .desc {
+      color: #999999;
+      margin-top: var(--desc-margin-top, 16px);
+      margin-bottom: 8px;
+    }
+    .title + .desc {
+      --desc-margin-top: -6px;
+    }
+    .img-container {
+      position: relative;
+      cursor: pointer;
+      img {
+        width: 100%;
+      }
+      .iconfont {
+        display: none;
+        transition: all 0.3s ease;
+        opacity: 0;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        background-color: rgba(128, 128, 128, 0.92);
+        color: #ffffff;
+        border-radius: 4px;
+        padding: 2px 4px;
+        font-size: 16px;
+      }
+      &:hover {
+        .iconfont {
+          display: block;
+          opacity: 1;
+        }
+      }
+    }
+    .img-container + .img-container {
+      margin-top: 10px;
+    }
+    li::before {
+      content: "\2022";
+      font-size: 1em;
+      font-weight: 300;
+      margin-right: 8px;
+    }
+  }
+}
+
+/* src/Dictionary/index.less */
+.Dictionary {
+  display: flex;
+  margin-top: 10px;
+  gap: 20px;
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 12px 20px 8px;
+    border: 1px solid #e1e1e1;
+    border-radius: 5px;
+    cursor: pointer;
+    text-decoration: none;
+    .dicIcon {
+      width: 16px;
+      height: 16px;
+    }
+    .title {
+      color: #333333;
+    }
+    &:hover {
+      border-color: var(--color-primary, #fb9332);
+    }
+  }
+}
+
+/* src/HelpModal/index.less */
+.HelpModal {
+  top: 0;
+  bottom: 0;
+  padding: 40px;
+  height: 100vh;
+  :global {
+    .pgant-modal-content {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      .pgant-modal-body {
+        padding: 0;
+        height: 100%;
+      }
+    }
+  }
+  .HelpModalSkeleton {
+    padding: 40px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  .HelpModalIframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
+
+/* src/Extra/index.less */
+.Extra {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  gap: 12px;
+  .ExtraButton {
+    border-radius: 3px;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,71 @@
+/**
+ * 国际化类型定义
+ */
+type I18N = {
+    /**
+     * - 示例国际化方法
+     */
+    abc_name: (values: any) => any;
+};
+/**
+ * FeatureBox组件props类型定义
+ */
+type FeatureBoxProps = {
+    /**
+     * - 国际化对象
+     */
+    i18n: I18N;
+    /**
+     * - 功能数据
+     */
+    data: any;
+    /**
+     * - 内容数据
+     */
+    content: any;
+    /**
+     * - 模块名称
+     */
+    module: string;
+    /**
+     * - 功能名称
+     */
+    feature: string;
+    /**
+     * - 设置功能方法
+     */
+    setFeature: Function;
+    /**
+     * - 链接列表
+     */
+    linkList: any[];
+    /**
+     * - 引用列表
+     */
+    quoteList: any[];
+};
+/**
+ * 国际化类型定义
+ * @typedef {Object} I18N
+ * @property {(values: any) => import('react').ReactNode} abc_name - 示例国际化方法
+ */
+/**
+ * FeatureBox组件props类型定义
+ * @typedef {Object} FeatureBoxProps
+ * @property {I18N} i18n - 国际化对象
+ * @property {any} data - 功能数据
+ * @property {any} content - 内容数据
+ * @property {string} module - 模块名称
+ * @property {string} feature - 功能名称
+ * @property {Function} setFeature - 设置功能方法
+ * @property {Array} linkList - 链接列表
+ * @property {Array} quoteList - 引用列表
+ */
+/**
+ * FeatureBox组件
+ * @param {FeatureBoxProps} props - 组件props
+ * @returns {JSX.Element} - 返回React元素
+ */
+declare function FeatureBox(props: FeatureBoxProps): JSX.Element;
+
+export { FeatureBox };

package/dist/index.js

@@ -0,0 +1,523 @@
+// src/FeatureBox/index.js
+import React8, { useEffect, useMemo as useMemo4, useState as useState5 } from "react";
+
+// src/FeatureBox/index.less
+var FeatureBox_default = {};
+
+// src/FeatureBox/index.js
+import { Tooltip as Tooltip2, message as message2, Image } from "antd";
+
+// src/FeatureContentBox/index.js
+import React7, { useMemo as useMemo3, useState as useState4, useContext } from "react";
+
+// src/StepAndQuote/index.js
+import React6, { useMemo as useMemo2 } from "react";
+
+// src/StepAndQuote/index.less
+var StepAndQuote_default = {};
+
+// src/Tab/index.js
+import React from "react";
+
+// src/Tab/index.less
+var Tab_default = {};
+
+// src/Tab/index.js
+import classNames from "classnames";
+function isPrefixArray(prefixArray, mainArray) {
+  return prefixArray.every((element, index) => element === mainArray[index]);
+}
+var Tab = (props) => {
+  const {
+    data,
+    idx,
+    stepChildrenLength,
+    tabNum,
+    currentLinkList,
+    setCurrentLinkList
+  } = props;
+  const getActive = (linkList, index) => {
+    if (linkList.length <= currentLinkList.length) {
+      return isPrefixArray(linkList, currentLinkList);
+    }
+    return index == 0;
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: classNames(Tab_default.Tab, {
+    [Tab_default.noFirstTab]: tabNum != 1,
+    [Tab_default.isInternalChanged]: idx < stepChildrenLength - 1
+  }) }, (data?.children ?? []).map((item, index) => {
+    if (item.type !== "tabItem") {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: item.id,
+        className: classNames(Tab_default.tabItem, {
+          [Tab_default.active]: getActive(item.linkList, index),
+          [Tab_default.noFirstTabsItem]: tabNum != 1,
+          [Tab_default.hasIcon]: item.icon
+        }),
+        onClick: () => {
+          setCurrentLinkList(item.linkList);
+        }
+      },
+      item.icon && /* @__PURE__ */ React.createElement("div", { className: Tab_default.tabIcon, dangerouslySetInnerHTML: { __html: item.icon } }),
+      item.text
+    );
+  }));
+};
+var Tab_default2 = Tab;
+
+// src/Article/index.js
+import React2, { useMemo } from "react";
+
+// src/Article/index.less
+var Article_default = {};
+
+// src/Article/index.js
+var Article = (props) => {
+  const {
+    data
+  } = props;
+  const modifiedText = useMemo(() => {
+    return data?.text?.replace(/<img([^>]+)>/g, (match) => {
+      return `<div class="img-container">${match}<i class="iconfont img-preview">&#x11bc7;</i></div>`;
+    }) ?? "";
+  }, [data]);
+  return /* @__PURE__ */ React2.createElement("div", { className: Article_default.Article, dangerouslySetInnerHTML: { __html: modifiedText } });
+};
+var Article_default2 = Article;
+
+// src/Dictionary/index.js
+import React4, { useState as useState2 } from "react";
+
+// src/Dictionary/index.less
+var Dictionary_default = {};
+
+// src/HelpModal/index.js
+import React3, { useState } from "react";
+
+// src/HelpModal/index.less
+var HelpModal_default = {};
+
+// src/HelpModal/index.js
+import { Modal } from "antd";
+var HelpModal = (props) => {
+  const {
+    visible,
+    setVisible,
+    link
+  } = props;
+  const [loading, setLoading] = useState(true);
+  return /* @__PURE__ */ React3.createElement(
+    Modal,
+    {
+      className: HelpModal_default.HelpModal,
+      open: visible,
+      width: "90vw",
+      onCancel: () => setVisible(false),
+      destroyOnClose: true,
+      footer: null
+    },
+    /* @__PURE__ */ React3.createElement(
+      "iframe",
+      {
+        className: HelpModal_default.HelpModalIframe,
+        style: { display: loading ? "none" : "block" },
+        src: link,
+        onLoad: () => setLoading(false)
+      }
+    )
+  );
+};
+var HelpModal_default2 = HelpModal;
+
+// src/Dictionary/index.js
+var Dictionary = (props) => {
+  const {
+    data
+  } = props;
+  const [visible, setVisible] = useState2(false);
+  const [link, setLink] = useState2("");
+  const handleClick = (item) => {
+    setLink(item.link);
+    setVisible(true);
+  };
+  return /* @__PURE__ */ React4.createElement("div", { className: Dictionary_default.Dictionary }, (data?.children ?? []).map((item) => {
+    return item.type === "modal" ? /* @__PURE__ */ React4.createElement("div", { key: item.id, className: Dictionary_default.item, onClick: () => handleClick(item) }, item.icon && /* @__PURE__ */ React4.createElement("div", { className: Dictionary_default.dicIcon, dangerouslySetInnerHTML: { __html: item.icon } }), /* @__PURE__ */ React4.createElement("div", { className: Dictionary_default.title }, item.text)) : /* @__PURE__ */ React4.createElement("a", { className: Dictionary_default.item, href: item.link }, item.icon && /* @__PURE__ */ React4.createElement("div", { className: Dictionary_default.dicIcon, dangerouslySetInnerHTML: { __html: item.icon } }), /* @__PURE__ */ React4.createElement("div", { className: Dictionary_default.title }, item.text));
+  }), /* @__PURE__ */ React4.createElement(HelpModal_default2, { visible, setVisible, link }));
+};
+var Dictionary_default2 = Dictionary;
+
+// src/Extra/index.js
+import React5, { useState as useState3 } from "react";
+
+// src/Extra/index.less
+var Extra_default = {};
+
+// src/Extra/index.js
+import { Button } from "antd";
+var Extra = (props) => {
+  const {
+    data
+  } = props;
+  const [visible, setVisible] = useState3(false);
+  const [currentLink, setCurrentLink] = useState3([]);
+  const handleClick = (item) => {
+    setCurrentLink(item.link);
+    setVisible(true);
+  };
+  return /* @__PURE__ */ React5.createElement("div", { className: Extra_default.Extra }, (data?.children ?? []).map((item, index) => {
+    return item.type === "link" ? /* @__PURE__ */ React5.createElement(Button, { className: Extra_default.ExtraButton, key: index, type: "primary", href: item.link }, item.text) : /* @__PURE__ */ React5.createElement(Button, { className: Extra_default.ExtraButton, key: index, onClick: () => handleClick(item) }, item.text);
+  }), /* @__PURE__ */ React5.createElement(
+    HelpModal_default2,
+    {
+      visible,
+      setVisible,
+      link: currentLink
+    }
+  ));
+};
+var Extra_default2 = Extra;
+
+// src/StepAndQuote/index.js
+import classNames2 from "classnames";
+import { Tooltip, message } from "antd";
+var STEP_CHILD_COMPONENTS = {
+  tab: Tab_default2,
+  article: Article_default2,
+  dictionary: Dictionary_default2,
+  extra: Extra_default2,
+  default: ({ data }) => /* @__PURE__ */ React6.createElement("div", { style: { color: "red", fontSize: 20, textAlign: "center" } }, "uniqueName: ", data.uniqueName, "\uFF0Ctype: ", data.type, "\u4E0D\u7B26\u5408\u89C4\u5219")
+};
+var Step = (props) => {
+  const {
+    data,
+    module,
+    feature,
+    currentLinkList,
+    currentQuoteList,
+    index,
+    ...rest
+  } = props;
+  const copyLink = () => {
+    const linkListStr = (currentLinkList || []).join("-");
+    const linkListPath = linkListStr != "" ? `&linkList=${linkListStr}` : "";
+    const currentQuoteListStr = (currentQuoteList || []).join("-");
+    const currentQuoteListPath = currentQuoteListStr != "" ? `&quoteList=${currentQuoteListStr}` : "";
+    const copyText = `${window.location.origin}/quickstart/detail?module=${module}&feature=${feature}${linkListPath}${currentQuoteListPath}#step-${index + 1}`;
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(copyText);
+      message.success(i18n.rebate_copy_share_success);
+    } else {
+      fallbackCopyTextToClipboard(copyText);
+    }
+  };
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Tooltip, { title: i18n.rebate_copy_share }, /* @__PURE__ */ React6.createElement("span", { className: StepAndQuote_default.title, onClick: copyLink }, data.text, /* @__PURE__ */ React6.createElement("i", { className: "iconfont" }, "\uE63E"))), (data?.children ?? []).map((item, idx) => {
+    const Comp = STEP_CHILD_COMPONENTS[item?.type] || STEP_CHILD_COMPONENTS.default;
+    const tabNum = (data?.children ?? []).slice(0, idx + 1).filter((child) => child?.type === "tab").length;
+    return /* @__PURE__ */ React6.createElement(
+      Comp,
+      {
+        key: idx,
+        idx,
+        stepChildrenLength: data?.children?.length ?? 0,
+        data: item,
+        tabNum,
+        currentLinkList,
+        ...rest
+      }
+    );
+  }));
+};
+var Quote = (props) => {
+  const {
+    data,
+    currentQuoteList,
+    setCurrentQuoteList
+  } = props;
+  const handleClick = (quoteID) => {
+    if (currentQuoteList.includes(quoteID)) {
+      setCurrentQuoteList(currentQuoteList.filter((id) => id !== quoteID));
+    } else {
+      setCurrentQuoteList([...currentQuoteList, quoteID]);
+    }
+  };
+  const isOpen = useMemo2(() => currentQuoteList.includes(data.id), [currentQuoteList, data.id]);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.title, onClick: () => handleClick(data.id) }, /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.QuoteBoxLeft }, (() => {
+    if (!data.icon) {
+      return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
+    }
+    if (data.icon.startsWith("<svg")) {
+      return /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.QuoteIcon, dangerouslySetInnerHTML: { __html: data.icon } });
+    } else {
+      return /* @__PURE__ */ React6.createElement("img", { className: StepAndQuote_default.QuoteIcon, src: data.icon, alt: "quote" });
+    }
+  })(), /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.QuoteText }, data.text)), /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.QuoteBoxRight }, /* @__PURE__ */ React6.createElement("div", null, isOpen ? i18n.order_close_product : i18n.common_view_short), /* @__PURE__ */ React6.createElement("i", { className: "iconfont", style: { color: "#888888", ...isOpen ? { transform: "rotate(180deg)" } : {} } }, "\uE611"))), isOpen && /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.line }));
+};
+var StepAndQuote = (props) => {
+  const {
+    data,
+    index,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ React6.createElement("div", { id: `step-${index + 1}`, className: classNames2(StepAndQuote_default.StepAndQuote, data.type === "step" ? StepAndQuote_default.Step : StepAndQuote_default.Quote) }, /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.tail }), /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.circle }, index + 1), /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.content }, data.type === "step" ? /* @__PURE__ */ React6.createElement(Step, { data, index, ...rest }) : /* @__PURE__ */ React6.createElement(Quote, { data, ...rest })));
+};
+var StepAndQuote_default2 = StepAndQuote;
+
+// src/FeatureContentBox/index.js
+function processContentData(node, data, link = []) {
+  if (!Array.isArray(node)) return;
+  return node.map((item) => {
+    const tempLink = [...link];
+    item = {
+      ...item,
+      ...data[item.u]
+    };
+    if (["tab", "tabItem"].includes(item.type)) {
+      tempLink.push(item.id);
+    }
+    if (item.c) {
+      item.children = processContentData(item.c, data, tempLink);
+    }
+    return {
+      ...item,
+      linkList: tempLink
+    };
+  });
+}
+function dealStepWithTab(stepNode, childrenNode, newChildren, linkList, quoteList, result) {
+  const isExternalChanged = childrenNode.some((item) => item.type === "step" || item.type === "quote");
+  if (isExternalChanged) {
+    childrenNode.forEach((item) => {
+      if (item.type != "step" && item.type != "quote") {
+        newChildren.push(item);
+      }
+    });
+    result.push({
+      ...stepNode,
+      children: newChildren
+    });
+    getRealRenderData(childrenNode, linkList, quoteList, result);
+  } else {
+    const hasTab = childrenNode.some((item) => item.type === "tab");
+    if (hasTab) {
+      childrenNode.some((item) => {
+        newChildren.push(item);
+        if (item.type != "tab") {
+          return false;
+        }
+        const tabItemID = linkList.findIndex((id) => id == item.id) > -1 ? linkList[linkList.findIndex((id) => id == item.id) + 1] : item.children?.[0]?.id ?? -1;
+        const tabItem = item.children.find((child) => child.id == tabItemID);
+        dealStepWithTab(stepNode, tabItem?.children || [], newChildren, linkList, quoteList, result);
+        return true;
+      });
+    } else {
+      result.push({
+        ...stepNode,
+        children: [...newChildren, ...childrenNode]
+      });
+    }
+  }
+}
+function getRealRenderData(node, linkList, quoteList, result = []) {
+  if (!Array.isArray(node)) return;
+  (node || []).forEach((item) => {
+    if (item.type === "step") {
+      const { children } = item;
+      dealStepWithTab(item, children, [], linkList, quoteList, result);
+    } else if (item.type === "quote") {
+      result.push(item);
+      if (quoteList.includes(item.id)) {
+        getRealRenderData(item.children, linkList, quoteList, result);
+      }
+    }
+  });
+  return result;
+}
+var FeatureContentBox = (props) => {
+  const {
+    structure,
+    linkList,
+    quoteList,
+    content,
+    ...rest
+  } = props;
+  const [currentLinkList, setCurrentLinkList] = useState4(linkList);
+  const [currentQuoteList, setCurrentQuoteList] = useState4(quoteList);
+  const completeData = useMemo3(() => {
+    return processContentData(structure, content);
+  }, [structure]);
+  const realRenderData = useMemo3(() => {
+    return getRealRenderData(completeData, currentLinkList, currentQuoteList);
+  }, [completeData, currentLinkList, currentQuoteList]);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, realRenderData.map((item, index) => {
+    return /* @__PURE__ */ React7.createElement(
+      StepAndQuote_default2,
+      {
+        key: item.id,
+        data: item,
+        index,
+        currentLinkList,
+        setCurrentLinkList,
+        currentQuoteList,
+        setCurrentQuoteList,
+        ...rest
+      }
+    );
+  }));
+};
+var FeatureContentBox_default = React7.memo(FeatureContentBox, (prevProps, nextProps) => {
+  return prevProps.structure === nextProps.structure;
+});
+
+// src/FeatureBox/index.js
+import { Link, useLocation } from "react-router-dom";
+function fallbackCopyTextToClipboard(text) {
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  document.body.appendChild(textarea);
+  textarea.select();
+  try {
+    document.execCommand("copy");
+    message2.success(i18n.rebate_copy_share_success);
+  } catch (err) {
+    message2.error(i18n.rebate_copy_share_failed);
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+var FeatureItem = (props) => {
+  const {
+    feature,
+    data,
+    content,
+    linkList,
+    quoteList,
+    module
+  } = props;
+  const active = useMemo4(() => {
+    return feature === data.alias;
+  }, [feature, data]);
+  const location = useLocation();
+  const [imgSrc, setImgSrc] = useState5("");
+  const [imgVisible, setImgVisible] = useState5(false);
+  useEffect(() => {
+    const hash = location.hash;
+    setTimeout(() => {
+      let offsetPosition = 0;
+      if (hash) {
+        const element = document.querySelector(hash);
+        const topOffset = 50;
+        const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+        offsetPosition = elementPosition - topOffset;
+      }
+      window.scrollTo({
+        top: offsetPosition
+      });
+    }, 0);
+  }, [location]);
+  const copyLink = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const copyText = `${window.location.origin}/quickstart/detail?module=${module}&feature=${data.alias}#${data.alias}`;
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(copyText);
+      message2.success(i18n.rebate_copy_share_success);
+    } else {
+      fallbackCopyTextToClipboard(copyText);
+    }
+  };
+  const imgClick = (e) => {
+    let target = e.target;
+    let imgElement = null;
+    if (target.tagName === "IMG") {
+      imgElement = target;
+    } else if (target.className === "iconfont img-preview") {
+      imgElement = target.parentElement.querySelector("img");
+    }
+    if (imgElement) {
+      setImgSrc(imgElement.src);
+      setImgVisible(true);
+    }
+  };
+  return /* @__PURE__ */ React8.createElement("div", { id: data.alias, className: FeatureBox_default.FeatureItem }, /* @__PURE__ */ React8.createElement(
+    Link,
+    {
+      className: FeatureBox_default.header,
+      to: {
+        pathname: "/quickstart/detail",
+        search: new URLSearchParams({ module, ...data.alias == feature ? {} : { feature: data.alias } }).toString(),
+        ...data.alias == feature ? {} : { hash: data.alias }
+      }
+    },
+    /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.headerLeft }, data.icon && /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.iconBox, dangerouslySetInnerHTML: { __html: data.icon } }), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.title }, data.name, /* @__PURE__ */ React8.createElement(Tooltip2, { title: i18n.rebate_copy_share }, /* @__PURE__ */ React8.createElement("i", { className: "iconfont", onClick: copyLink }, "\uE63E"))), !active && /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.summary }, data.summary))),
+    /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        className: FeatureBox_default.btn
+      },
+      active ? i18n.order_close_product : i18n.read
+    )
+  ), active && /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.wrapper, onClick: imgClick }, data.content && /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.contentBox }, /* @__PURE__ */ React8.createElement("i", { className: "iconfont" }, "\uE649"), /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.contentRight }, /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.title }, i18n.function_purpose), /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.content, dangerouslySetInnerHTML: { __html: data.content } }))), data.remark && /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.remark }, data.remark), /* @__PURE__ */ React8.createElement(
+    Image,
+    {
+      style: { display: "none" },
+      src: imgSrc,
+      preview: {
+        visible: imgVisible,
+        src: imgSrc,
+        onVisibleChange: (value) => {
+          setImgVisible(value);
+        }
+      }
+    }
+  ), /* @__PURE__ */ React8.createElement(
+    FeatureContentBox_default,
+    {
+      structure: data.contentRelative,
+      content,
+      module,
+      feature,
+      linkList: active ? linkList : [],
+      quoteList: active ? quoteList : []
+    }
+  )));
+};
+var FeatureBox = (props) => {
+  const {
+    data,
+    content,
+    module,
+    feature,
+    setFeature,
+    linkList,
+    quoteList,
+    i18n: i18n2
+  } = props;
+  const featureData = useMemo4(() => {
+    let tempModule = module;
+    if (!tempModule) {
+      tempModule = data?.[0]?.alias ?? "platform_post";
+    }
+    return data.find((item) => item.alias === tempModule);
+  }, [data, module]);
+  return featureData && /* @__PURE__ */ React8.createElement("div", { className: FeatureBox_default.FeatureBox, style: { marginBottom: feature ? 0 : 200 } }, i18n2["abc_name"](123), (featureData.features || []).map((item) => /* @__PURE__ */ React8.createElement(
+    FeatureItem,
+    {
+      key: `${module}-${item.alias}`,
+      feature,
+      data: item,
+      content,
+      setFeature,
+      linkList,
+      quoteList,
+      module
+    }
+  )));
+};
+var FeatureBox_default2 = FeatureBox;
+export {
+  FeatureBox_default2 as FeatureBox
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "quick-start-feature-box",
+  "version": "1.0.0",
+  "keywords": ["react", "components"],
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "module": "dist/index.js",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "classnames": "^2.3.1 || ^2.5.1",
+    "react": "^18.0.0 || ^18.2.0",
+    "react-dom": "^18.0.0 || ^18.2.0",
+    "react-router": "^6.3.0 || ^6.23.0",
+    "react-router-dom": "^6.3.0 || ^6.23.0"
+  },
+  "devDependencies": {
+    "less": "^4.2.2",
+    "less-loader": "^12.2.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.0.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  }
+}