@titaui/pc 1.7.13 → 1.7.17

package/src/components/dynamic/dynamic.tsx

@@ -0,0 +1,355 @@
+import React, { FC, useState, useEffect, useRef, useCallback } from "react";
+import classNames from "classnames";
+import DynamicList from "./dynamic-list";
+import { SearchKeyContext } from "./context";
+import DynamicSearchInput from "./components/dynamic-search-input";
+import { getDynamicFeedList, getMenu } from "./request-api";
+import DynamicQuickOperation from "./quick-operation";
+import DynamicTop from "./dynamic-topping";
+import DynamicLikeRanking from "./dynamic-like-ranking";
+import DynamicLiking from "./dynamic-liking";
+import DynamicLoading from "./img/dynamic-loading.gif";
+import DynamicAdvertise from "./advertise";
+import ConditionRender from "../condition-render";
+import { formatMenu } from "./util";
+import Toast from "../toast";
+import FirstLevelTabs from "./components/first-level-tabs";
+import OnlineBroadcast from "./online-broadcast";
+import DynamicMyTeam from "./my-team";
+import "./dynamic.scss";
+import "./new-ui.scss";
+
+// @ts-ignore
+const prefix = BSGlobal.tenantInfo.isNewIndex
+  ? "titaui-new-ui-dynamic"
+  : "titaui-dynamic";
+let requestId = 0;
+
+const Dynamic: FC = () => {
+  const [dynamicData, setDynamicData] = useState<any>([]);
+  const [activeFirstLevelTabKey, setActiveFirstLevelTabKey] = useState<
+    number
+  >();
+  const [activeSecondLevelTabKey, setActiveSecondLevelTabKey] = useState<
+    number
+  >();
+  const [searchKeyWord, setSearchKeyWord] = useState("");
+  const [searchKeyType, setSearchKeyType] = useState("");
+  const [tabsInfo, setTabsInfo] = useState([]);
+  const [searchUser, setSearchUser] = useState<any>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [isChangeConditionLoading, setIsChangeConditionLoading] = useState(
+    false
+  );
+  const [rightContentHeight, setRightContentHeight] = useState(-1);
+  const [secondTabs, setSecondTabs] = useState<any>([]);
+  const [noMoreData, setNoMoreData] = useState(false);
+  const [notFixedTop, setNotFixedTop] = useState(false);
+  const contentRef = useRef<any>(document.createElement('div'));
+  const currentPage = useRef(1);
+  const loginUser = window.BSGlobal.loginUserInfo;
+
+  useEffect(() => {
+    document.title = "动态";
+  }, []);
+
+  const handleChangeTabActive = (key) => {
+    setActiveFirstLevelTabKey(key);
+    // @ts-ignore
+    const secondTabsArr = tabsInfo.find((item) => item.CodeId === key)
+      .ChildMenus;
+    setSecondTabs(secondTabsArr);
+    setActiveSecondLevelTabKey(secondTabsArr[0].CodeId);
+  };
+
+  const handleSubTabsChange = (key) => {
+    setActiveSecondLevelTabKey(key);
+  };
+
+  const handleDeleteFeed = (feedId) => {
+    setDynamicData([
+      ...dynamicData.filter((item: any) => item.feedId !== feedId),
+    ]);
+  };
+
+  const setTabsToPublish = () => {
+    setActiveFirstLevelTabKey(1004);
+    setActiveSecondLevelTabKey(1018);
+    // @ts-ignore
+    const secondTabsArr = tabsInfo.find((item) => item.CodeId === 1004)
+      .ChildMenus;
+    setSecondTabs(secondTabsArr);
+    resetValue();
+    setIsChangeConditionLoading(true);
+    getDynamicData(true);
+  };
+
+  const getDynamicData = (needResetValue) => {
+    requestId++;
+    const reqId = requestId;
+    setIsLoadingMore(true);
+    getDynamicFeedList({
+      PageSize: 20,
+      PageNum: currentPage.current,
+      KeyWord:
+        searchKeyType === "person" && searchUser
+          ? `UserId:${searchUser.userId}`
+          : searchKeyWord,
+      ChannelIds: activeFirstLevelTabKey + "." + activeSecondLevelTabKey,
+      Domain: "",
+      TitaHost: "",
+      RequestSource: 0,
+    }).then((resp) => {
+      setIsLoadingMore(false);
+      setIsChangeConditionLoading(false);
+      if (requestId !== reqId) return;
+      if (resp.Code === 1) {
+        if (!resp.Data.isEnd) {
+          currentPage.current = currentPage.current + 1;
+        }
+        setNoMoreData(resp.Data.isEnd);
+        if (needResetValue) {
+          setDynamicData(resp.Data.feeds);
+        } else {
+          setDynamicData(
+            JSON.parse(JSON.stringify([...dynamicData, ...resp.Data.feeds]))
+          );
+        }
+      } else {
+        Toast.Error(resp.Message, { canClose: false });
+      }
+    });
+  };
+
+  const handleContentScroll = () => {
+    const contentDom = contentRef.current;
+    if (contentDom) {
+      if (contentDom.scrollTop > 0) {
+        setNotFixedTop(true);
+      } else {
+        setNotFixedTop(false);
+      }
+      // 为了解决列表数据过少右侧内容过多滚动的问题
+      if (dynamicData.length === 0) {
+        // 防止出现重复设置高度导致一直能往下滚动的问题
+        if (rightContentHeight > 0) return;
+        // 48是二级菜单高度，10是二级菜单到列表的间距
+        setRightContentHeight(contentDom.scrollHeight - 48 - 10);
+      } else {
+        setRightContentHeight(-1);
+      }
+      // 滚动到距离底部40px之后加载新的数据
+      if (
+        contentDom.scrollHeight - contentDom.scrollTop <=
+        contentDom.offsetHeight
+      ) {
+        // 滚动加载防止重复请求
+        if (noMoreData || isLoadingMore) {
+          return;
+        }
+        getDynamicData(false);
+      }
+    }
+  };
+
+  const handleScrollToTop = useCallback(() => {
+    if (contentRef.current && contentRef.current.scrollTo) {
+      contentRef.current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth",
+      });
+    } else {
+      contentRef.current.scrollTop = 0;
+    }
+  }, []);
+
+  const resetValue = () => {
+    if (contentRef.current && contentRef.current.scrollTo) {
+      contentRef.current.scrollTo(0, 0);
+    } else {
+      contentRef.current.scrollTop = 0;
+    }
+    
+    currentPage.current = 1;
+    setIsLoadingMore(false);
+    setNoMoreData(false);
+    setNotFixedTop(false);
+  };
+
+  useEffect(() => {
+    getMenu().then((resp) => {
+      if (resp.Code === 1) {
+        const data: any = formatMenu(resp.Data);
+        setTabsInfo(data);
+        const localFirstLevelTabKey = sessionStorage.getItem(
+          `tita-dynamic-first-level-tab__${loginUser.Id}`
+        );
+        const localSecondLevelTabKey = sessionStorage.getItem(
+          `tita-dynamic-second-level-tab__${loginUser.Id}`
+        );
+        const nowFirstLevelLocalMenu = data.find(
+          (item) => item.CodeId === Number(localFirstLevelTabKey)
+        );
+        if (localFirstLevelTabKey && nowFirstLevelLocalMenu) {
+          setActiveFirstLevelTabKey(Number(localFirstLevelTabKey));
+          const secondTabsArr = nowFirstLevelLocalMenu.ChildMenus;
+          setSecondTabs(secondTabsArr);
+        } else {
+          setActiveFirstLevelTabKey(data[0].CodeId);
+        }
+        const nowSecondLevelTabExist =
+          localSecondLevelTabKey &&
+          nowFirstLevelLocalMenu &&
+          nowFirstLevelLocalMenu.ChildMenus.find(
+            (item) => item.CodeId === Number(localSecondLevelTabKey)
+          );
+        if (
+          localSecondLevelTabKey &&
+          nowFirstLevelLocalMenu &&
+          nowSecondLevelTabExist
+        ) {
+          setActiveSecondLevelTabKey(Number(localSecondLevelTabKey));
+        } else {
+          setSecondTabs(data[0].ChildMenus);
+          setActiveSecondLevelTabKey(data[0].ChildMenus[0].CodeId);
+        }
+      }
+      setIsLoading(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (searchKeyWord || searchKeyType || searchUser) {
+      // 搜索跳到全部动态
+      if (searchKeyWord) {
+        setActiveFirstLevelTabKey(1006);
+        // @ts-ignore
+        const secondTabsArr = tabsInfo.find((item) => item.CodeId === 1006)
+          .ChildMenus;
+        setSecondTabs(secondTabsArr);
+        setActiveSecondLevelTabKey(secondTabsArr[0].CodeId);
+      }
+      setIsChangeConditionLoading(true);
+      resetValue();
+      getDynamicData(true);
+    }
+  }, [searchKeyWord, searchKeyType, searchUser]);
+
+  useEffect(() => {
+    if (!activeSecondLevelTabKey || !activeFirstLevelTabKey) return;
+    sessionStorage.setItem(
+      `tita-dynamic-first-level-tab__${loginUser.Id}`,
+      `${activeFirstLevelTabKey}`
+    );
+    sessionStorage.setItem(
+      `tita-dynamic-second-level-tab__${loginUser.Id}`,
+      `${activeSecondLevelTabKey}`
+    );
+    resetValue();
+    setIsChangeConditionLoading(true);
+    getDynamicData(true);
+  }, [activeFirstLevelTabKey, activeSecondLevelTabKey]);
+
+  // @ts-ignore
+  window.setTabsToPublish = setTabsToPublish;
+
+  return (
+    <SearchKeyContext.Provider
+      value={{
+        searchKeyWord: searchKeyType === "dynamic" ? searchKeyWord : "",
+      }}
+    >
+      <div className={prefix}>
+        <ConditionRender condition={isLoading}>
+          <div className={prefix + "__loading"}>
+            <img className={prefix + "__loading-img"} src={DynamicLoading} />
+          </div>
+        </ConditionRender>
+        <div
+          className={classNames(`${prefix}__header`, {
+            [`${prefix}__header--content-scroll`]: notFixedTop,
+          })}
+        >
+          <div className={classNames(`${prefix}__header-tabs`)}>
+            <FirstLevelTabs
+              tabsInfo={tabsInfo}
+              activeTab={activeFirstLevelTabKey}
+              onTabsChange={handleChangeTabActive}
+            />
+          </div>
+          <div className={prefix + "__header-search"}>
+            <DynamicSearchInput
+              setSearchUser={setSearchUser}
+              setSearchKey={setSearchKeyWord}
+              setSearchKeyType={setSearchKeyType}
+            />
+          </div>
+        </div>
+        <div
+          className={prefix + "__content"}
+          onScroll={handleContentScroll}
+          ref={contentRef}
+        >
+          <div className={prefix + "__content-left"}>
+            <div className={prefix + "__content-left-tabs"}>
+              <ConditionRender condition={secondTabs.length > 0}>
+                {secondTabs.map((item) => {
+                  return (
+                    <span
+                      key={item.CodeId + item.MenuName}
+                      className={classNames(prefix + "__content-left-tab", {
+                        [prefix + "__content-left-tab--active"]:
+                          item.CodeId === activeSecondLevelTabKey,
+                      })}
+                      onClick={() => {
+                        handleSubTabsChange(item.CodeId);
+                      }}
+                    >
+                      {item.MenuName}
+                    </span>
+                  );
+                })}
+              </ConditionRender>
+            </div>
+            <ConditionRender condition={isChangeConditionLoading}>
+              <div className={prefix + "__empty-loading-block"}></div>
+            </ConditionRender>
+            <ConditionRender condition={!isChangeConditionLoading}>
+              <DynamicList
+                height={rightContentHeight}
+                onDeleteFeed={handleDeleteFeed}
+                data={dynamicData}
+              />
+            </ConditionRender>
+            <ConditionRender
+              condition={isLoadingMore || isChangeConditionLoading}
+            >
+              <div className={prefix + "__content-left-loading"}></div>
+            </ConditionRender>
+            <ConditionRender condition={dynamicData.length > 0 && noMoreData}>
+              <div className={prefix + "__no-more-data"}>没有更多了</div>
+            </ConditionRender>
+          </div>
+          <div className={classNames(prefix + "__content-right")}>
+            <DynamicQuickOperation />
+            <DynamicAdvertise />
+            <DynamicTop />
+            <DynamicLikeRanking />
+            <DynamicLiking />
+            <DynamicMyTeam />
+            <OnlineBroadcast />
+          </div>
+        </div>
+        <ConditionRender condition={notFixedTop}>
+          <div className={`${prefix}__go-to-top`} onClick={handleScrollToTop}>
+            <span className={`${prefix}__go-to-top-img`}></span>
+          </div>
+        </ConditionRender>
+      </div>
+    </SearchKeyContext.Provider>
+  );
+};
+
+export default Dynamic;

package/src/components/dynamic/export-module/index.tsx

@@ -0,0 +1,13 @@
+import _DynamicQuickOperation from "../quick-operation";
+import _Dynamic from '../dynamic';
+import _DynamicItem from '../dynamic-item';
+import _DynamicTopping from '../dynamic-topping';
+import _DynamicLiking from '../dynamic-liking';
+import _DynamicLikeRanking from '../dynamic-like-ranking';
+
+export default _Dynamic;
+export const DynamicQuickOperation = _DynamicQuickOperation;
+export const DynamicItem = _DynamicItem;
+export const DynamicTopping = _DynamicTopping;
+export const DynamicLiking = _DynamicLiking;
+export const DynamicLikeRanking = _DynamicLikeRanking;

package/src/components/dynamic/img/dynamic-P1.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P1</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -184.000000)" fill="#F05E5E" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="标签" transform="translate(0.000000, 9.000000)">
+                        <path d="M3.80174927,13.7142857 L3.80174927,9.70017637 L6.10667124,9.70017637 C7.13565426,9.6813639 7.91768136,9.34273956 8.45275253,8.68430335 C8.97410393,8.05878895 9.23477963,7.36507937 9.23477963,6.6031746 C9.23477963,6.03880071 9.13188132,5.54967666 8.92608472,5.13580247 C8.72943463,4.70781893 8.47333219,4.37860082 8.1577774,4.14814815 C7.78277025,3.84244562 7.41233636,3.64021164 7.04647573,3.54144621 C6.6806151,3.46619636 6.3010347,3.42857143 5.90773452,3.42857143 L2.28571429,3.42857143 L2.28571429,13.7142857 L3.80174927,13.7142857 Z M6.04493226,8.22574956 L3.80174927,8.22574956 L3.80174927,4.90299824 L5.99005316,4.90299824 C6.40164637,4.893592 6.76293374,4.99000588 7.07391528,5.19223986 C7.27971188,5.31452087 7.43977591,5.48148148 7.55410736,5.69312169 C7.66386555,5.92827748 7.71874464,6.21751911 7.71874464,6.56084656 C7.71874464,6.97472075 7.58383353,7.35097002 7.31401132,7.68959436 C7.03046933,8.03762493 6.60744298,8.21634333 6.04493226,8.22574956 Z M13.7142857,13.7142857 L13.7142857,3.42857143 L12.2805694,3.42857143 L10.8605728,4.49382716 L10.8605728,6.05996473 L12.2805694,4.98765432 L12.2805694,13.7142857 L13.7142857,13.7142857 Z" id="P1"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/dynamic/img/dynamic-P2.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -215.000000)" fill="#F6BD16" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="标签" transform="translate(0.000000, 40.000000)">
+                        <path d="M2.69158333,13.1428571 L2.69158333,9.16151603 L5.04620775,9.16151603 C6.09737937,9.14285714 6.8962698,8.80699708 7.44287904,8.15393586 C7.97547266,7.5335277 8.24176947,6.84548105 8.24176947,6.08979592 C8.24176947,5.53002915 8.13665231,5.04489796 7.92641799,4.63440233 C7.72552741,4.20991254 7.46390247,3.88338192 7.14154318,3.6548105 C6.75844952,3.3516035 6.38002774,3.15102041 6.00627783,3.05306122 C5.63252792,2.97842566 5.24476239,2.94110787 4.84298124,2.94110787 L1.14285714,2.94110787 L1.14285714,13.1428571 L2.69158333,13.1428571 Z M4.98313746,7.69912536 L2.69158333,7.69912536 L2.69158333,4.40349854 L4.92707497,4.40349854 C5.34754362,4.3941691 5.71662165,4.48979592 6.03430907,4.69037901 C6.2445434,4.81166181 6.40805898,4.97725948 6.52485583,5.18717201 C6.6369808,5.42040816 6.69304329,5.70728863 6.69304329,6.04781341 C6.69304329,6.45830904 6.55522301,6.83148688 6.27958245,7.16734694 C5.98992627,7.51253644 5.55777794,7.68979592 4.98313746,7.69912536 Z M14.8571429,13.1428571 L14.8571429,11.6804665 L10.9537922,11.6804665 L14.2404555,7.56618076 C14.6515804,7.04373178 14.8571429,6.44664723 14.8571429,5.77492711 C14.8477991,4.93527697 14.5651507,4.2425656 14.0091978,3.696793 C13.4625885,3.14635569 12.7501277,2.8664723 11.8718155,2.85714286 C11.0869407,2.8664723 10.4258705,3.14169096 9.88860501,3.68279883 C9.35601139,4.23790087 9.07102708,4.93994169 9.03365209,5.78892128 L10.4912767,5.78892128 C10.5426673,5.32244898 10.7061829,4.96093294 10.9818235,4.70437318 C11.2481203,4.44781341 11.5821593,4.31953353 11.9839404,4.31953353 C12.4371122,4.32886297 12.7875027,4.47580175 13.0351121,4.76034985 C13.2733776,5.04489796 13.3925104,5.37842566 13.3925104,5.76093294 C13.3925104,5.90553936 13.3738229,6.05947522 13.3364479,6.22274052 C13.2803854,6.39533528 13.1752683,6.5819242 13.0210964,6.78250729 L9.03365209,11.7644315 L9.03365209,13.1428571 L14.8571429,13.1428571 Z" id="P2"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/dynamic/img/dynamic-P3.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P3</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -247.000000)" fill="#2879FF" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="标签" transform="translate(0.000000, 72.000000)">
+                        <path d="M2.70274245,13.059572 L2.70274245,9.11046848 L5.07433277,9.11046848 C6.13307845,9.09196067 6.93772517,8.75882013 7.48827292,8.11104685 C8.02470407,7.49566223 8.29291964,6.81318681 8.29291964,6.06362059 C8.29291964,5.50838635 8.18704507,5.02718334 7.97529593,4.62001157 C7.77295787,4.19895894 7.50944783,3.8750723 7.18476583,3.64835165 C6.79891184,3.34759977 6.4177634,3.14864083 6.04132049,3.05147484 C5.66487758,2.97744361 5.27431806,2.94042799 4.86964194,2.94042799 L1.14285714,2.94042799 L1.14285714,13.059572 L2.70274245,13.059572 Z M5.01080803,7.65991903 L2.70274245,7.65991903 L2.70274245,4.39097744 L4.95434159,4.39097744 C5.37783986,4.38172354 5.74957724,4.47657606 6.06955371,4.67553499 C6.28130285,4.79583574 6.44599662,4.96009254 6.56363503,5.16830538 C6.6765679,5.39965298 6.73303434,5.68421053 6.73303434,6.02197802 C6.73303434,6.4291498 6.59422101,6.79930596 6.31659437,7.1324465 C6.02485111,7.47484095 5.589589,7.65066512 5.01080803,7.65991903 Z M11.7303139,13.1428571 C12.6384825,13.1336032 13.3819572,12.8490457 13.9607382,12.2891845 C14.5489302,11.7432042 14.8477318,10.9959514 14.8571429,10.0474263 C14.8571429,9.62174667 14.7653849,9.2145749 14.581869,8.82591093 C14.388942,8.43724696 14.0760238,8.10410642 13.6431145,7.8264893 C14.0666127,7.54424523 14.3607088,7.22267206 14.5254025,6.86176981 C14.6665686,6.50086755 14.7371517,6.12608444 14.7371517,5.73742047 C14.7277406,4.96934644 14.459525,4.30306536 13.932505,3.73857721 C13.3819572,3.16020821 12.6384825,2.86639676 11.7020807,2.85714286 C10.9633115,2.86639676 10.3280641,3.12550607 9.7963385,3.63447079 C9.25520182,4.14806246 8.94698919,4.77964141 8.87170061,5.52920763 L10.3468863,5.52920763 C10.440997,5.11278195 10.6245129,4.80508965 10.897434,4.60613071 C11.1562385,4.40717178 11.4432762,4.30769231 11.7585472,4.30769231 C12.196162,4.31694621 12.5537828,4.4534413 12.8314095,4.71717756 C13.1090361,4.99016773 13.252555,5.3395026 13.261966,5.76518219 C13.261966,6.18623482 13.1231527,6.52862927 12.8455261,6.79236553 C12.5678994,7.0653557 12.1773399,7.20185078 11.6738475,7.20185078 L11.1656496,7.20185078 L11.1656496,8.48582996 L11.7867804,8.48582996 C12.2432174,8.48582996 12.6196603,8.62232504 12.9161091,8.89531521 C13.2172634,9.17755928 13.3725461,9.57547715 13.3819572,10.0890688 C13.3725461,10.5934066 13.2172634,10.9820706 12.9161091,11.2550607 C12.6196603,11.5465587 12.2549813,11.6923077 11.8220719,11.6923077 C11.4173958,11.6923077 11.0927138,11.5835743 10.8480259,11.3661076 C10.6080435,11.1578947 10.4221748,10.8849046 10.2904198,10.5471371 L8.81523417,10.5471371 C8.97522241,11.3892423 9.32578487,12.0323887 9.86692155,12.4765761 C10.4080582,12.9207634 11.029189,13.1428571 11.7303139,13.1428571 Z" id="P3"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/dynamic/img/dynamic-P4.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P4</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -279.000000)" fill="#5AD8A6" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="编组-39" transform="translate(0.000000, 104.000000)">
+                        <path d="M2.64476851,13.1428571 L2.64476851,9.1287478 L4.92821747,9.1287478 C5.94761433,9.10993533 6.72235594,8.77131099 7.2524423,8.11287478 C7.76893671,7.48736038 8.02718392,6.79365079 8.02718392,6.03174603 C8.02718392,5.46737213 7.92524423,4.97824809 7.72136486,4.5643739 C7.52654679,4.13639036 7.27283024,3.80717225 6.96021521,3.57671958 C6.58870168,3.27101705 6.22171882,3.06878307 5.8592666,2.97001764 C5.49681438,2.89476778 5.12077021,2.85714286 4.73113408,2.85714286 L1.14285714,2.85714286 L1.14285714,13.1428571 L2.64476851,13.1428571 Z M4.86705366,7.65432099 L2.64476851,7.65432099 L2.64476851,4.33156966 L4.81268583,4.33156966 C5.22044457,4.32216343 5.57836613,4.41857731 5.88645052,4.62081129 C6.09032989,4.7430923 6.24890273,4.91005291 6.36216905,5.12169312 C6.47090471,5.35684891 6.52527255,5.64609053 6.52527255,5.98941799 C6.52527255,6.40329218 6.39161829,6.77954145 6.12430978,7.11816578 C5.84340932,7.46619636 5.42432394,7.64491476 4.86705366,7.65432099 Z M14.0688093,13.1428571 L14.0688093,11.6119929 L14.8571429,11.6119929 L14.8571429,10.2222222 L14.0688093,10.2222222 L14.0688093,7.26631393 L12.6484497,7.26631393 L12.6484497,10.2222222 L10.0591817,10.2222222 L13.4095993,2.85714286 L11.8261362,2.85714286 L8.51649441,10.2222222 L8.51649441,11.6119929 L12.6484497,11.6119929 L12.6484497,13.1428571 L14.0688093,13.1428571 Z" id="P4"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/dynamic/img/dynamic-P5.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>P5</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-1895.000000, -311.000000)" fill="#A4ACB9" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(1871.000000, 156.000000)">
+                <g id="form-/-text-copy-6" transform="translate(24.000000, 19.000000)">
+                    <g id="编组-26" transform="translate(0.000000, 136.000000)">
+                        <path d="M2.68370978,13.0588921 L2.68370978,9.07755102 L5.02636357,9.07755102 C6.07219115,9.05889213 6.86702012,8.72303207 7.41085046,8.06997085 C7.94073644,7.44956268 8.20567942,6.76151603 8.20567942,6.0058309 C8.20567942,5.44606414 8.10109667,4.96093294 7.89193115,4.55043732 C7.69206188,4.12594752 7.43176701,3.79941691 7.11104655,3.57084548 C6.7299005,3.26763848 6.35340257,3.06705539 5.98155276,2.96909621 C5.60970296,2.89446064 5.22390878,2.85714286 4.82417024,2.85714286 L1.14285714,2.85714286 L1.14285714,13.0588921 L2.68370978,13.0588921 Z M4.96361392,7.61516035 L2.68370978,7.61516035 L2.68370978,4.31953353 L4.90783644,4.31953353 C5.32616748,4.31020408 5.69336916,4.4058309 6.0094415,4.60641399 C6.21860702,4.72769679 6.38129131,4.89329446 6.49749437,5.103207 C6.60904931,5.33644315 6.66482678,5.62332362 6.66482678,5.9638484 C6.66482678,6.37434402 6.52770717,6.74752187 6.25346794,7.08338192 C5.96528433,7.42857143 5.53533299,7.6058309 4.96361392,7.61516035 Z M12.0334084,13.1428571 C12.5447019,13.1335277 12.9862735,13.0145773 13.3581233,12.7860058 C13.7392694,12.5667638 14.029777,12.3241983 14.2296463,12.058309 C14.4574043,11.7877551 14.6200886,11.477551 14.7176992,11.1276968 C14.8106616,10.7731778 14.8571429,10.264723 14.8571429,9.60233236 C14.8571429,9.17317784 14.8431985,8.81166181 14.8153098,8.51778426 C14.787421,8.22857143 14.7409398,7.98367347 14.6758661,7.78309038 C14.5503668,7.41457726 14.3458494,7.09037901 14.0623139,6.81049563 C13.8717409,6.60058309 13.6230663,6.42332362 13.3162902,6.2787172 C12.9909216,6.14810496 12.6330162,6.07813411 12.2425739,6.06880466 C11.6336698,6.06880466 11.0921636,6.25539359 10.6180551,6.62857143 L10.6180551,4.31953353 L14.6619217,4.31953353 L14.6619217,2.85714286 L9.24453482,2.85714286 L9.24453482,8.37084548 L10.6180551,8.37084548 C10.7900356,8.05830904 10.9852567,7.83906706 11.2037185,7.71311953 C11.4221803,7.59183673 11.6638826,7.53119534 11.9288256,7.53119534 C12.2263055,7.53119534 12.47498,7.57317784 12.6748493,7.65714286 C12.8747186,7.75976676 13.0257826,7.89737609 13.1280413,8.06997085 C13.3186143,8.43381924 13.4092527,8.90728863 13.3999564,9.49037901 C13.3999564,9.72827988 13.3953083,9.97317784 13.3860121,10.2250729 C13.3674196,10.4816327 13.3162902,10.7195335 13.232624,10.9387755 C13.1536059,11.1580175 13.0141622,11.335277 12.814293,11.4705539 C12.6051275,11.6104956 12.3262401,11.6804665 11.9776309,11.6804665 C11.1642095,11.671137 10.6784806,11.2746356 10.5204445,10.4909621 L9.06325804,10.4909621 C9.20270172,11.4285714 9.56293122,12.1072886 10.1439465,12.5271137 C10.7156656,12.9376093 11.3454862,13.1428571 12.0334084,13.1428571 Z" id="P5"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/dynamic/img/dynamic-delay.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<filter x="-81.2%" y="-81.2%" width="262.5%" height="262.5%" filterUnits="objectBoundingBox" id="a">
+			<feMorphology radius=".5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1" />
+			<feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1" />
+			<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+			<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
+			<feColorMatrix values="0 0 0 0 0.941176471 0 0 0 0 0.368627451 0 0 0 0 0.368627451 0 0 0 1 0" in="shadowBlurOuter1" />
+		</filter>
+		<circle id="b" cx="9" cy="9" r="4" />
+	</defs>
+	<g fill="none" fill-rule="evenodd">
+		<circle fill-opacity=".05" fill="#F05E5E" cx="9" cy="9" r="9" />
+		<use fill="#000" filter="url(#a)" xlink:href="#b" />
+		<use stroke="#FFF" fill="#F05E5E" xlink:href="#b" />
+	</g>
+</svg>

package/src/components/dynamic/img/dynamic-desire.svg

@@ -0,0 +1,61 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<filter x="4.7%" y="-2%" width="90.6%" height="104%" filterUnits="objectBoundingBox" id="c">
+			<feOffset dy=".8" in="SourceAlpha" result="shadowOffsetInner1" />
+			<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" />
+			<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.759565549 0 0 0 0 0.759565549 0 0 0 1 0" in="shadowInnerInner1" />
+		</filter>
+		<filter x="6.7%" y="0%" width="86.6%" height="100%" filterUnits="objectBoundingBox" id="f">
+			<feOffset in="SourceAlpha" result="shadowOffsetInner1" />
+			<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" />
+			<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.952941176 0 0 0 0 0.701960784 0 0 0 1 0" in="shadowInnerInner1" />
+		</filter>
+		<filter x="6.7%" y="0%" width="86.6%" height="100%" filterUnits="objectBoundingBox" id="i">
+			<feOffset in="SourceAlpha" result="shadowOffsetInner1" />
+			<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" />
+			<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.952941176 0 0 0 0 0.701960784 0 0 0 1 0" in="shadowInnerInner1" />
+		</filter>
+		<filter x="-2.9%" y="-1.9%" width="109.6%" height="107.7%" filterUnits="objectBoundingBox" id="j">
+			<feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1" />
+			<feColorMatrix values="0 0 0 0 0.964645607 0 0 0 0 0.491917792 0 0 0 0 0.52828147 0 0 0 1 0" in="shadowOffsetOuter1" />
+		</filter>
+		<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
+			<stop stop-color="#FF9C9C" offset="0%" />
+			<stop stop-color="#F36E6E" offset="100%" />
+		</linearGradient>
+		<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d">
+			<stop stop-color="#ED6868" offset="0%" />
+			<stop stop-color="#FFA8B0" offset="100%" />
+		</linearGradient>
+		<linearGradient x1="50%" y1=".126%" x2="50%" y2="99.779%" id="g">
+			<stop stop-color="#F68585" offset=".032%" />
+			<stop stop-color="#FFB8B8" offset="100%" />
+		</linearGradient>
+		<path id="b" d="M10 0l8.66 5v10L10 20l-8.66-5V5z" />
+		<path id="e" d="M10 1.333l7.506 4.334v8.666L10 18.667l-7.506-4.334V5.667z" />
+		<path id="h" d="M10 2l6.928 4v8L10 18l-6.928-4V6z" />
+		<text id="k" font-family="PingFangSC-Medium, PingFang SC" font-size="9" font-weight="400" fill="#FFE8E8">
+			<tspan x="5.5" y="13">
+				愿
+			</tspan>
+		</text>
+	</defs>
+	<g fill="none" fill-rule="evenodd">
+		<g transform="translate(-1)">
+			<use fill="url(#a)" xlink:href="#b" />
+			<use fill="#000" filter="url(#c)" xlink:href="#b" />
+		</g>
+		<g transform="translate(-1)">
+			<use fill="url(#d)" xlink:href="#e" />
+			<use fill="#000" filter="url(#f)" xlink:href="#e" />
+		</g>
+		<g transform="translate(-1)">
+			<use fill="url(#g)" xlink:href="#h" />
+			<use fill="#000" filter="url(#i)" xlink:href="#h" />
+		</g>
+		<g fill="#FFE8E8" transform="translate(-1)">
+			<use filter="url(#j)" xlink:href="#k" />
+			<use xlink:href="#k" />
+		</g>
+	</g>
+</svg>

package/src/components/dynamic/img/dynamic-end.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<filter x="-81.2%" y="-81.2%" width="262.5%" height="262.5%" filterUnits="objectBoundingBox" id="a">
+			<feMorphology radius=".5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1" />
+			<feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1" />
+			<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+			<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
+			<feColorMatrix values="0 0 0 0 0.749019608 0 0 0 0 0.780392157 0 0 0 0 0.835294118 0 0 0 1 0" in="shadowBlurOuter1" />
+		</filter>
+		<circle id="b" cx="9" cy="9" r="4" />
+	</defs>
+	<g fill="none" fill-rule="evenodd">
+		<circle fill-opacity=".05" fill="#A4ACB9" cx="9" cy="9" r="9" />
+		<use fill="#000" filter="url(#a)" xlink:href="#b" />
+		<use stroke="#FFF" fill="#BFC7D5" xlink:href="#b" />
+	</g>
+</svg>

package/src/components/dynamic/img/dynamic-left-quoto.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>左侧</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="目标" transform="translate(-270.000000, -600.000000)" fill="#E9F1FF" fill-rule="nonzero">
+            <g id="新建目标-负责目标" transform="translate(202.000000, 471.000000)">
+                <g id="编组-23" transform="translate(68.000000, 126.000000)">
+                    <path d="M6.76133333,9.50266666 C6.76133333,5.67 9.95566666,3.40833333 12,3 L12,5.26166667 C10.882,5.60733334 9.54033333,7.36633334 9.47666667,9.28266667 L12,9.28266667 L12,11.6666667 C12,13.5076667 10.5076667,15 8.66666667,15 L6.76133333,15 L6.76133333,9.50266666 Z M0,9.50266666 C0,5.67 3.19433333,3.40833333 5.23866667,3 L5.23866667,5.26166667 C4.12066666,5.60733334 2.779,7.36633334 2.71533333,9.28266667 L5.20666666,9.28266667 L5.20666666,11.6666667 C5.20666666,13.5076667 3.71433333,15 1.87333334,15 L0,15 L0,9.50266666 Z" id="左侧"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/dynamic/img/dynamic-normal.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<filter x="-81.2%" y="-81.2%" width="262.5%" height="262.5%" filterUnits="objectBoundingBox" id="a">
+			<feMorphology radius=".5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1" />
+			<feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1" />
+			<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+			<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
+			<feColorMatrix values="0 0 0 0 0.156862745 0 0 0 0 0.474509804 0 0 0 0 1 0 0 0 1 0" in="shadowBlurOuter1" />
+		</filter>
+		<circle id="b" cx="9" cy="9" r="4" />
+	</defs>
+	<g fill="none" fill-rule="evenodd">
+		<circle fill-opacity=".05" fill="#2879FF" cx="9" cy="9" r="9" />
+		<use fill="#000" filter="url(#a)" xlink:href="#b" />
+		<use stroke="#FFF" fill="#2879FF" xlink:href="#b" />
+	</g>
+</svg>