@titaui/pc 1.7.49 → 1.7.53

package/src/components/nav-top/components/user-message/components/todos/index.scss

@@ -0,0 +1,118 @@
+.titaui-user-message-msg-todos {
+  &__loading {
+    width: 80px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+  &__items {
+    width: 372px;
+  }
+  &__item {
+    display: flex;
+    position: relative;
+    box-sizing: border-box;
+    height: 82px;
+    border-radius: 12px;
+    margin: 0 8px 4px 8px;
+    cursor: pointer;
+    &--scroll {
+      margin-right: 0;
+    }
+    &:first-of-type {
+      margin-top: 8px;
+    }
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+    &-photo {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      margin-top: 14px;
+      margin-left: 8px;
+    }
+    &-right {
+      flex: 1;
+      position: relative;
+      box-sizing: border-box;
+      width: 300px;
+      height: 82px;
+      margin-left: 12px;
+      padding-top: 8px;
+      &-header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: 22px;
+        &-name {
+          margin-right: 8px;
+          font-size: 14px;
+          font-weight: 600;
+          color: #3f4755;
+          line-height: 22px;
+          &-tooltip {
+            z-index: 2001;
+          }
+        }
+        &-status {
+          flex: 1;
+          color: #89919f;
+        }
+      }
+
+      &-content {
+        position: relative;
+        height: 22px;
+        margin-top: 2px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3f4755;
+        line-height: 22px;
+        overflow: hidden;
+        white-space: nowrap;
+        cursor: pointer;
+        &-tooltip {
+          z-index: 2001;
+        }
+      }
+      &-time {
+        margin-top: 2px;
+        height: 18px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #89919f;
+        line-height: 18px;
+      }
+    }
+  }
+  &__item:hover {
+    background: #f7f8fa;
+  }
+  &__footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    box-sizing: border-box;
+    padding-right: 24px;
+    display: flex;
+    align-items: center;
+    width: 372px;
+    height: 48px;
+    background: #ffffff;
+    border-radius: 0px 0px 24px 24px;
+    &-all {
+      margin-left: auto;
+      font-size: 12px;
+      font-weight: 400;
+      color: #2879ff;
+      line-height: 18px;
+      &:hover {
+        color: #2879ff;
+      }
+    }
+  }
+}

package/src/components/nav-top/components/user-message/components/todos/index.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import List from "rc-virtual-list";
+import ConditionRender from "../../../../../condition-render";
+import Empty from "../empty";
+import TodoItem from "./todo-item";
+import { getTodos } from "../../../../request.apis";
+import Loading from "../../images/loading.gif";
+import { apiServer, userId } from "../../constant";
+import "./index.scss";
+
+
+const preCls = "titaui-user-message-msg-todos";
+
+const Todos = (props) => {
+  const { onItemClick } = props;
+
+  const [todos, setTodos] = useState<any[]>([]);
+  const [todosData, setTodosData] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [pageNum, setPageNum] = useState(2);
+  const [isRequest, setIsRequest] = useState(false);
+
+
+  const onScrollBottom = (e) => {
+    const { offsetHeight, scrollTop, scrollHeight } = e.target;
+    if (offsetHeight + scrollTop >= scrollHeight - 20) {
+      if (!isRequest) {
+        setIsRequest(true);
+        if (pageNum <= Math.ceil(todosData / 10)) {
+          getTodos(pageNum).then((res) => {
+            if (res.Code === 1) {
+              setTodos([...todos, ...res.Data.todos]);
+            }
+            setIsRequest(false);
+            setPageNum(pageNum + 1);
+          });
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      getTodos(1).then((res) => {
+        if (res.Code === 1) {
+          if (res.Data.total || (res.Data.todos && res.Data.todos.length)) {
+            setTodos(res.Data.todos);
+            setTodosData(res.Data.total);
+          }
+        }
+        setIsLoading(false);
+      });
+    }, 300)
+  }, []);
+  
+  
+  return (
+    <div>
+      <ConditionRender condition={isLoading}>
+        <img src={Loading} className={classNames(`${preCls}__loading`)} />
+      </ConditionRender>
+      <ConditionRender condition={todos.length !== 0}>
+        <ul className={classNames(`${preCls}__items`)}>
+          <List
+            data={todos}
+            height={314}
+            itemKey="objId"
+            onScroll={(e) => onScrollBottom(e)}
+          >{item => <TodoItem
+              item={item}
+              onItemClick={onItemClick}
+              todos={todos}
+          />}</List>
+        </ul>
+        <div className={classNames(`${preCls}__footer`)}>
+          <a
+            target="_blank"
+            href={`${apiServer}/u/${userId}/Home#more/messages?messageType=1&isRead=1&autoApply=true&messageSubNav=1`}
+            className={classNames(`${preCls}__footer-all`)}
+          >
+            查看全部
+          </a>
+        </div>
+      </ConditionRender>
+      <ConditionRender condition={isLoading === false && todos.length === 0}>
+        <Empty tabPath={`${apiServer}/u/${userId}/Home#more/messages?messageType=1&isRead=2&autoApply=true&messageSubNav=1`}/>
+      </ConditionRender>
+    </div>
+  );
+};
+
+export default Todos;

package/src/components/nav-top/components/user-message/components/todos/todo-item.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import Avatar from '../../../../../../components/avatar';
+import TooltipText from '../../../../../tooltip/tooltip-text';
+import { htmlToText, deleteText } from '../../utils';
+import { openPage } from '../../../../../../utils/tools';
+
+const preCls = 'titaui-user-message-msg-todos';
+
+const TodoItem: FC<any> = (props) => {
+  const { item, onItemClick, todos } = props;
+
+  const handleTodosClick = (item) => {    
+    onItemClick && onItemClick(false);
+    if (item.objType === 7) {
+      window.Talent.app.vent.trigger('global-pull-screen', item.objId, 'task');
+    } else {
+      openPage(item.objUrl)
+    }
+  };
+
+  return (
+    <li
+      className={classNames(`${preCls}__item`, {
+        [`${preCls}__item--scroll`]: todos.length >= 4,
+      })}
+    >
+      <div className={classNames(`${preCls}__item-photo`)}>
+        <Avatar
+          userId={item.User.userId}
+          name={item.User.name}
+          color={item.User.avatar.Color}
+          src={item.User.avatar.Big}
+          size={{ width: 32, textNum: 1, fontSize: 12 }}
+        />
+      </div>
+      <div className={classNames(`${preCls}__item-right`)}>
+        <a
+          onClick={() => handleTodosClick(item)}
+        >
+          <div className={classNames(`${preCls}__item-right-header`)}>
+            <span className={classNames(`${preCls}__item-right-header-name`)}>
+              <TooltipText
+                overlayClassName={`${preCls}__item-right-header-name-tooltip`}
+                text={item.User.name}
+                maxWidth={100}
+                mouseEnterDelay={0.8}
+              />
+            </span>
+            <span className={classNames(`${preCls}__item-right-header-status`)}>
+              {item.subTitle}
+            </span>
+          </div>
+          <div className={classNames(`${preCls}__item-right-content`)}>
+            <TooltipText
+              overlayClassName={`${preCls}__item-right-content-tooltip`}
+              text={deleteText(htmlToText(item.content))}
+              isPercent
+              mouseEnterDelay={0.8}
+            />
+          </div>
+          <div className={classNames(`${preCls}__item-right-time`)}>
+            {item.createDate}
+          </div>
+        </a>
+      </div>
+    </li>
+  );
+};
+export default TodoItem;

package/src/components/nav-top/components/user-message/constant.ts

@@ -0,0 +1,33 @@
+import { getUserInfo, getBSGlobal } from "../../../../utils/bs-global";
+
+export const popupAlign = {
+  offset: [5, 5],
+  overflow: { adjustX: true, adjustY: true },
+  targetOffset: [0, 0],
+};
+
+export const userId = getUserInfo().Id;
+
+export const apiServer = getBSGlobal("apiPath");
+
+export const informType = {
+  "project": 35, //进入项目
+  "details": 69, //查看详情
+  "daily1":0,//日报月报周报
+  "todayJob": 81, //进入今日工作
+  "Okr": 83,
+  "okrRemind": 4, //okr提醒
+  "plan":11,//计划
+  "remindLeader": 74,//提醒上级邀请
+};
+
+export enum EObjType {
+  Project = 4, // 项目
+  Task = 7, // 任务
+  O = 62, // 目标
+  Kr = 65, // 关键成果
+  Assess = 23, // 考核
+  MileStone = 27, // 里程碑
+  KanBan = 66, // 看板
+  Remind = 8,//提醒
+}

package/src/components/nav-top/components/user-message/images/app-tixing.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>app-tixing</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.964706 0 0 0 0 0.741176 0 0 0 0 0.086275 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="整体框架" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="消息-提醒" transform="translate(-598.000000, -123.000000)">
+            <g id="编组-4备份" transform="translate(578.000000, 42.000000)">
+                <g id="编组-3" transform="translate(0.000000, 68.000000)">
+                    <g id="app-tixing" transform="translate(20.000000, 13.000000)">
+                        <circle id="椭圆形" fill-opacity="0.2" fill="#F6BD16" cx="16" cy="16" r="16"></circle>
+                        <g id="app-tixing" transform="translate(6.000000, 6.000000)" filter="url(#filter-1)">
+                            <g>
+                                <path d="M10,4.25 C11.6566811,4.25 13.1567183,4.92179403 14.2429288,6.00740452 C15.3286277,7.09310336 16,8.59310921 16,10.25 C16,11.9066719 15.3285393,13.4067183 14.2430591,14.4927986 C13.1567183,15.5785393 11.6566719,16.25 10,16.25 C8.34310921,16.25 6.84310336,15.5786277 5.75753473,14.4930591 C4.67179403,13.4067183 4,11.9066811 4,10.25 C4,8.5931 4.67170568,7.09310336 5.75740452,6.00740452 C6.84310336,4.92170568 8.3431,4.25 10,4.25 Z" id="员" stroke="#141C28" stroke-width="1.33333333"></path>
+                                <path d="M5.53655495,3.23702961 C4.43502016,3.23702961 3.33348537,4.01646392 3.33348537,5.24911447 M16.6812187,5.26823842 C16.6812187,4.24307204 15.5921387,3.25 14.5030587,3.23702961" id="形状" stroke="#141C28" stroke-width="1.33333333" stroke-linecap="round" stroke-linejoin="round"></path>
+                                <rect id="矩形" fill="#141C28" x="9.33333333" y="6.91666667" width="1.33333333" height="4.66666667" rx="0.666666667"></rect>
+                                <rect id="矩形" fill="#141C28" transform="translate(5.858608, 16.058058) rotate(-315.000000) translate(-5.858608, -16.058058) " x="5.19194174" y="14.3497249" width="1.33333333" height="3.41666667" rx="0.666666667"></rect>
+                                <rect id="矩形" fill="#141C28" transform="translate(14.111929, 16.028595) scale(-1, 1) rotate(-315.000000) translate(-14.111929, -16.028595) " x="13.4452621" y="14.3619288" width="1.33333333" height="3.33333333" rx="0.666666667"></rect>
+                                <rect id="矩形" fill="#141C28" transform="translate(11.238034, 11.666667) rotate(-330.000000) translate(-11.238034, -11.666667) " x="9.23803387" y="11" width="4" height="1.33333333" rx="0.666666667"></rect>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/nav-top/components/user-message/images/bell.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="整体框架" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="消息-提醒" transform="translate(-973.000000, -17.000000)">
+            <g id="bell" transform="translate(973.000000, 17.000000)" filter="url(#filter-1)">
+                <g>
+                    <path d="M10.0134137,3.33333333 C10.2596762,3.33333333 10.4882019,3.40947271 10.67644,3.53984587 C10.8704247,3.67419907 11.0219839,3.86564749 11.1062357,4.09010883 C12.500322,4.8105417 13.3405282,5.43573057 13.9317732,6.25272971 C14.5075396,7.04834 14.846747,8.02624604 14.846747,9.08333333 L14.846747,9.08333333 L14.846747,12.891045 L15.8081933,14.4046034 L11.9979898,14.9171476 C11.9263157,15.4924975 11.6099219,15.9913803 11.156905,16.3078121 C10.8328747,16.534147 10.4385967,16.6666667 10.0134137,16.6666667 C9.58823067,16.6666667 9.19395274,16.534147 8.8699224,16.3078121 C8.41690551,15.9913803 8.10051172,15.4924975 8.02883757,14.9171476 L8.02883757,14.9171476 L4.5,14.9166667 L5.18008038,12.891045 L5.18008038,9.08333333 C5.18008038,8.02620525 5.51931376,7.04826289 6.09518007,6.25271046 C6.68643877,5.43589363 7.52666233,4.8109336 8.50479979,4.48990505 C9.00530961,3.86567916 9.15667087,3.67423861 9.35047606,3.53990042 C9.53865336,3.40946327 9.76716819,3.33333333 10.0134137,3.33333333 Z" stroke="#141C28" stroke-width="1.33333333"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/nav-top/components/user-message/images/empty-img.svg

@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="160px" height="106px" viewBox="0 0 160 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="57.8739431%" id="linearGradient-1">
+            <stop stop-color="#F0F2F5" offset="0%"></stop>
+            <stop stop-color="#F0F2F5" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#E9ECF0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#E9ECF0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="71.4436849%" y1="74.1965974%" x2="0%" y2="25.8034026%" id="linearGradient-4">
+            <stop stop-color="#F0F2F5" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#F0F2F5" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="71.4436849%" y1="74.5%" x2="0%" y2="25.5%" id="linearGradient-5">
+            <stop stop-color="#F0F2F5" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#F0F2F5" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="71.4436849%" y1="79.5313803%" x2="0%" y2="20.4686197%" id="linearGradient-6">
+            <stop stop-color="#F0F2F5" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#F0F2F5" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.913217905%" x2="50%" y2="100%" id="linearGradient-7">
+            <stop stop-color="#C4D8FC" offset="0%"></stop>
+            <stop stop-color="#E0EAF6" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-11.1%" y="-33.3%" width="122.2%" height="166.7%" filterUnits="objectBoundingBox" id="filter-8">
+            <feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-9">
+            <stop stop-color="#E9ECF0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="85.7774864%" y1="63.0435802%" x2="14.4844044%" y2="76.8526297%" id="linearGradient-10">
+            <stop stop-color="#F6BD16" offset="0%"></stop>
+            <stop stop-color="#FFE18B" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-11" cx="13.4029414" cy="13.3298068" r="9.75058836"></circle>
+        <linearGradient x1="53.7995468%" y1="83.4710744%" x2="0.325960726%" y2="49.7817949%" id="linearGradient-13">
+            <stop stop-color="#F6BD16" offset="0%"></stop>
+            <stop stop-color="#FFE18B" offset="100%"></stop>
+        </linearGradient>
+        <path d="M25.1670592,-24.7058824 C36.2738305,-24.7058824 45.2776477,-15.7020652 45.2776477,-4.59529386 L45.2776477,8.61872203 L45.2776477,8.61872203 L48.4131123,13.5547329 C49.4959007,15.2593144 48.9918378,17.5189241 47.2872563,18.6017125 C46.701122,18.9740381 46.0210861,19.1717653 45.3266945,19.1717653 L5.00742384,19.1717653 C2.98801087,19.1717653 1.35095321,17.5347076 1.35095321,15.5152946 C1.35095321,14.820903 1.54868039,14.1408671 1.921006,13.5547329 L5.05647067,8.61872203 L5.05647067,8.61872203 L5.05647067,-4.59529386 C5.05647067,-15.7020652 14.0602878,-24.7058824 25.1670592,-24.7058824 Z" id="path-14"></path>
+        <filter x="-4.7%" y="-8.0%" width="109.3%" height="125.1%" filterUnits="objectBoundingBox" id="filter-15">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.964705882   0 0 0 0 0.741176471   0 0 0 0 0.0862745098  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="26.5859117%" y1="5.68434189e-12%" x2="65.2945559%" y2="50%" id="linearGradient-16">
+            <stop stop-color="#AFCAFF" offset="0%"></stop>
+            <stop stop-color="#2879FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-17">
+            <stop stop-color="#9FBFFF" offset="0%"></stop>
+            <stop stop-color="#5897FF" offset="100%"></stop>
+        </linearGradient>
+        <path d="M34.2258827,10.7058824 C45.332654,10.7058824 54.3364712,19.7096995 54.3364712,30.8164708 L54.3364712,44.0304867 L54.3364712,44.0304867 L57.4719359,48.9664976 C58.5547242,50.6710791 58.0506613,52.9306888 56.3460798,54.0134772 C55.7599455,54.3858028 55.0799096,54.58353 54.385518,54.58353 L14.0662474,54.58353 C12.0468344,54.58353 10.4097767,52.9464723 10.4097767,50.9270593 C10.4097767,50.2326677 10.6075039,49.5526318 10.9798295,48.9664976 L14.1152942,44.0304867 L14.1152942,44.0304867 L14.1152942,30.8164708 C14.1152942,19.7096995 23.1191114,10.7058824 34.2258827,10.7058824 Z" id="path-18"></path>
+        <filter x="-5.6%" y="-13.7%" width="111.2%" height="127.3%" filterUnits="objectBoundingBox" id="filter-20">
+            <feGaussianBlur stdDeviation="3" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="3" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
+            <feGaussianBlur stdDeviation="3" in="SourceAlpha" result="shadowBlurInner2"></feGaussianBlur>
+            <feOffset dx="-6" dy="-2" in="shadowBlurInner2" result="shadowOffsetInner2"></feOffset>
+            <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.156862745   0 0 0 0 0.474509804   0 0 0 0 1  0 0 0 0.4 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
+                <feMergeNode in="shadowMatrixInner2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-42.9%" y="-37.7%" width="185.9%" height="175.4%" filterUnits="objectBoundingBox" id="filter-21">
+            <feGaussianBlur stdDeviation="4.94117647" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+    </defs>
+    <g id="整体框架" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="消息-为空状态" transform="translate(-708.000000, -220.000000)">
+            <g id="编组-4备份-7" transform="translate(578.000000, 42.000000)">
+                <g id="图" transform="translate(130.000000, 178.000000)">
+                    <ellipse id="椭圆形" fill="url(#linearGradient-1)" cx="80" cy="77" rx="80" ry="29"></ellipse>
+                    <g id="编组-17" transform="translate(130.000000, 50.000000)">
+                        <rect id="矩形" fill="#E9ECF0" x="2.53846154" y="8.125" width="1" height="4.875"></rect>
+                        <path d="M2.76923077,0 C0.923076923,1.70238095 0,3.25 0,4.64285714 C0,6.73214286 1.15384615,8.58928571 2.76923077,8.58928571 C4.38461538,8.58928571 6,7.42857143 6,4.64285714 C6,2.78571429 4.92307692,1.23809524 2.76923077,0 Z" id="路径-2" fill="url(#linearGradient-2)"></path>
+                    </g>
+                    <g id="编组-17备份" transform="translate(145.000000, 61.000000)">
+                        <rect id="矩形" fill="#E9ECF0" x="1.94444444" y="5.53846154" width="1" height="3.46153846"></rect>
+                        <path d="M2.30769231,0 C0.769230769,1.18918919 0,2.27027027 0,3.24324324 C0,4.7027027 0.961538462,6 2.30769231,6 C3.65384615,6 5,5.18918919 5,3.24324324 C5,1.94594595 4.1025641,0.864864865 2.30769231,0 Z" id="路径-2" fill="url(#linearGradient-3)"></path>
+                    </g>
+                    <path d="M138.92,33 C141.927734,33 144.465559,34.8464371 145.261086,37.371578 C148.482098,37.6563393 151,40.1444098 151,43.1714286 C151,46.3904597 148.152531,49 144.64,49 C141.868597,49 139.511213,47.3754873 138.6398,45.1088416 C138.486125,45.103038 138.333681,45.0923146 138.182773,45.0769217 C137.155985,46.3472915 135.50354,47.1714286 133.64,47.1714286 C130.525114,47.1714286 128,44.868893 128,42.0285714 C128,39.4708067 130.047704,37.3491516 132.729803,36.9523372 C133.661133,34.6447595 136.081275,33 138.92,33 Z" id="形状结合" fill="url(#linearGradient-4)"></path>
+                    <path d="M104.255814,0 C109.309293,0 113.570207,3.26132826 114.884235,7.71349319 L115.132106,7.70364844 L115.132106,7.70364844 L115.418605,7.7 C121.262548,7.7 126,12.2443098 126,17.85 C126,23.4556902 121.262548,28 115.418605,28 C110.788675,28 106.853265,25.1476373 105.417997,21.17492 C105.036191,21.2136513 104.648394,21.2333333 104.255814,21.2333333 C103.81026,21.2333333 103.370867,21.2079812 102.939112,21.1586961 C101.220893,23.3296532 98.4916148,24.7333333 95.4186047,24.7333333 C90.2168529,24.7333333 86,20.711358 86,15.75 C86,11.2776683 89.4265363,7.56866151 93.9122423,6.88094071 C95.4850798,2.86076716 99.5228366,0 104.255814,0 Z" id="形状结合备份" fill="url(#linearGradient-5)"></path>
+                    <path d="M18.6086957,33 C22.6512863,33 26.0580426,35.7016918 27.0957202,39.3849712 C30.9892322,40.1383948 33.9275362,43.5365268 33.9275362,47.6145833 C33.9275362,52.2457211 30.1381782,56 25.4637681,56 C21.8024302,56 18.684086,53.6966892 17.5044012,50.4728132 C16.1263843,52.2317884 13.9655414,53.3645833 11.5362319,53.3645833 C7.37408594,53.3645833 4,50.0393649 4,45.9375 C4,42.2210085 6.76987219,39.1420856 10.386134,38.5963558 C11.6589502,35.3224932 14.8605273,33 18.6086957,33 Z" id="形状结合备份-2" fill="url(#linearGradient-6)"></path>
+                    <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="91.5" cy="66.5" rx="13.5" ry="4.5"></ellipse>
+                    <g id="编组-17备份-2" transform="translate(22.000000, 53.000000)">
+                        <rect id="矩形" fill="#E9ECF0" x="2.84375" y="9.97101449" width="1.09375" height="6.02898551"></rect>
+                        <path d="M3.23076923,0 C1.07692308,2.11411411 0,4.03603604 0,5.76576577 C0,8.36036036 1.34615385,10.6666667 3.23076923,10.6666667 C5.11538462,10.6666667 7,9.22522523 7,5.76576577 C7,3.45945946 5.74358974,1.53753754 3.23076923,0 Z" id="路径-2" fill="url(#linearGradient-9)"></path>
+                    </g>
+                    <g id="编组-4" transform="translate(50.000000, 2.000000)">
+                        <g id="蒙版" transform="translate(11.735294, 36.141571)">
+                            <mask id="mask-12" fill="white">
+                                <use xlink:href="#path-11"></use>
+                            </mask>
+                            <use fill="url(#linearGradient-10)" transform="translate(13.402941, 13.329807) rotate(-330.000000) translate(-13.402941, -13.329807) " xlink:href="#path-11"></use>
+                            <g mask="url(#mask-12)" transform="translate(25.167059, -2.767059) rotate(-315.000000) translate(-25.167059, 2.767059) ">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
+                                <use fill="url(#linearGradient-13)" fill-rule="evenodd" style="mix-blend-mode: multiply;" xlink:href="#path-14"></use>
+                            </g>
+                        </g>
+                        <ellipse id="椭圆形" fill="url(#linearGradient-16)" transform="translate(44.944118, 15.754118) rotate(-330.000000) translate(-44.944118, -15.754118) " cx="44.9441182" cy="15.7541178" rx="5.76470588" ry="6.7035295"></ellipse>
+                        <g id="路径-3" transform="translate(0.205882, 0.729806)">
+                            <mask id="mask-19" fill="white">
+                                <use xlink:href="#path-18"></use>
+                            </mask>
+                            <g id="蒙版" transform="translate(34.225883, 32.644706) rotate(-330.000000) translate(-34.225883, -32.644706) ">
+                                <use fill="url(#linearGradient-17)" fill-rule="evenodd" xlink:href="#path-18"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-18"></use>
+                            </g>
+                            <path d="M52.0709443,13.8466642 C39.1805108,15.4479713 30.1343137,20.4997455 24.9323532,29.0019867 C19.7303926,37.5042279 17.2739185,44.0642184 17.5629307,48.6819583 L25.7839721,53.1492155 C23.9573397,47.0141813 25.2195903,40.0348994 29.5707241,32.21137 C33.9218579,24.3878406 41.4219313,18.266272 52.0709443,13.8466642 Z" fill-opacity="0.9" fill="#FFFFFF" filter="url(#filter-21)" mask="url(#mask-19)"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/nav-top/components/user-message/index.scss

@@ -0,0 +1,131 @@
+.titaui-user-message {
+  &__msg {
+    position: relative;
+    box-sizing: border-box;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    &:hover {
+      cursor: pointer;
+      background: #5c8eff;
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    &-img {
+      transform-origin: 50% 0%;
+      animation: bell-shake 1s infinite ease;
+    }
+    &-total {
+      position: absolute;
+      background: #f05e5e;
+      box-shadow: 0px 2px 4px 0px rgba(240, 94, 94, 0.6),
+        inset 0px 0px 2px 1px rgba(255, 255, 255, 0.4);
+      border-radius: 8px;
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 16px;
+      padding: 0 4px;
+      top: -4px;
+      left: 12px;
+    }
+  }
+  &__popup-right-top {
+    &-enter {
+      opacity: 0;
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupInRT;
+        animation-play-state: running;
+      }
+    }
+    &-appear {
+      opacity: 0;
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupInRT;
+        animation-play-state: running;
+      }
+    }
+    &-leave {
+      animation-duration: 0.1s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupOutRT;
+        animation-play-state: running;
+      }
+    }
+  }
+}
+
+@keyframes titaPopupInRT {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scale(0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes titaPopupOutRT {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scale(1, 1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes bell-shake {
+  5%,
+  25%,
+  45% {
+    transform: rotate(8deg);
+  }
+
+  0%,
+  10%,
+  30%,
+  50% {
+    transform: rotate(-8deg);
+  }
+
+  15%,
+  35%,
+  55% {
+    transform: rotate(4deg);
+  }
+
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+
+  65%,
+  100% {
+    transform: rotate(0deg);
+  }
+}