first

src/App.js

@@ -1,25 +1,43 @@
-import logo from './logo.svg';//引入logo图片的另一种方式。此时图片作为一个模块被引入：一切皆模块
+// 创建外壳组件App
+// import logo from './logo.svg';//引入logo图片的另一种方式。此时图片作为一个模块被引入：一切皆模块
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          surfing React
-        </a>
-      </header>
+import React,{Component} from 'react';
+// es6的另外一种引入方式：说明这个被引入文件里面用了多种暴露方式
+import AppHeader from './components/Appheader/Appheader';
+import Appsider from './components/Appsider/Appsider';
+// 类式组件(创建并暴露app组件)
+export default class App extends Component{
+  render(){
+    return(
+      <div className="App">
+          <AppHeader/>
+          <Appsider/>
     </div>
-  );
-}
+    )
+  }
 
-export default App;
+}
+// 函数式组件
+// function App() {
+//   return (
+//     <div className="App">
+//       <header className="App-header">
+//         <img src={logo} className="App-logo" alt="logo" />
+//         <p>
+//           Edit <code>src/App.js</code> and save to reload.
+//         </p>
+//         <a
+//           className="App-link"
+//           href="https://reactjs.org"
+//           target="_blank"
+//           rel="noopener noreferrer"
+//         >
+//           surfing React
+//         </a>
+//       </header>
+//     </div>
+//   );
+// }
+// 暴露app组件
+// export default App;

src/components/Appheader/Appheader.css

@@ -0,0 +1,886 @@
+.App-link{
+    background-color: aquamarine;
+}
+.g-sidebar {
+
+    padding-bottom: 1px;
+
+}
+
+.frame-nav {
+
+    position: fixed;
+
+    top: 0;
+
+    left: 0;
+
+    bottom: 0;
+
+    width: 60px;
+
+    z-index: 1000;
+
+    -webkit-transition: all .1s linear;
+
+    -moz-transition: all .1s linear;
+
+    transition: all .1s linear;
+
+}
+
+.g-sidebar #tree-wrapper {
+
+    background: #2a68c9;
+
+    border-top: 0;
+
+    width: 100%;
+
+    bottom: 0;
+
+    top: 0;
+
+    position: absolute;
+
+    /* z-index: 99; */
+
+}
+
+.left-tree-brick.brick-logo {
+
+    padding: 0;
+
+    margin-top: 0;
+
+    margin-bottom: 20px;
+
+    text-align: center;
+
+}
+
+/* @media (max-width: 1366px) */
+
+.left-tree-brick {
+
+    margin-top: 10px;
+
+}
+
+.left-tree-brick {
+
+    display: block;
+
+    *display: inline;
+
+    *zoom: 1;
+
+    padding: 0;
+
+    margin-top: 15px;
+
+}
+
+.left-tree-brick .tapd-logo {
+
+    display: inline-block;
+
+    padding: 19px 0;
+
+}
+
+.g-sidebar a {
+
+    color: #999;
+
+    text-decoration: none;
+
+    position: relative;
+
+}
+
+.left-tree-brick .font-public-logo {
+
+    color: #d7e6fe;
+
+}
+
+.left-tree-brick .font-public-set, .left-tree-brick .font-public {
+
+    display: inline-block;
+
+    font-size: 22px;
+
+    height: 22px;
+
+    color: #d7e6fe;
+
+}
+
+.font-public {
+
+    vertical-align: middle;
+
+}
+
+.font-public-logo:after, .font-public-logo-after {
+
+    content: "\EA5E";
+
+}
+
+.font-public:after, .font-public-after {
+
+    display: inline-block;
+
+    font-family: "public.iconfont";
+
+    font-style: normal;
+
+    font-weight: normal;
+
+    line-height: 1;
+
+    -webkit-font-smoothing: antialiased;
+
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+.left-tree-brick .font-public-logo {
+
+    color: #d7e6fe;
+
+}
+
+.left-tree-brick .font-public-set, .left-tree-brick .font-public {
+
+    display: inline-block;
+
+    font-size: 22px;
+
+    height: 22px;
+
+    color: #d7e6fe;
+
+}
+
+.left-tree-brick.current {
+
+    background-color: #204e97;
+
+}
+
+.left-tree-brick.current {
+
+    background-color: #204e97;
+
+}
+
+/* @media (max-width: 1366px) */
+.left-tree-brick {
+
+    margin-top: 10px;
+
+}
+
+.left-tree-brick {
+
+    display: block;
+
+    *display: inline;
+
+    *zoom: 1;
+
+    padding: 0;
+
+    margin-top: 15px;
+
+}
+
+.left-tree-brick .brick-wrap {
+
+    display: block;
+
+    margin: 0 auto;
+
+    padding: 7px 0;
+
+    text-align: center;
+
+}
+
+.g-sidebar a {
+
+    color: #999;
+
+    text-decoration: none;
+
+    position: relative;
+
+}
+
+.g-sidebar .current .brick-wrap .font-public {
+
+    color: #fff;
+
+}
+
+.left-tree-brick .font-public-set, .left-tree-brick .font-public {
+
+    display: inline-block;
+
+    font-size: 22px;
+
+    height: 22px
+
+pxcmmminpcptchemremvhvwvminvmax
+
+;
+
+    color: #d7e6fe;
+
+}
+
+.font-public-worktable:after, .font-public-worktable-after {
+
+    content: "\EABB";
+
+}
+
+.font-public:after, .font-public-after {
+
+    display: inline-block;
+
+    font-family: "public.iconfont";
+
+    font-style: normal;
+
+    font-weight: normal;
+
+    line-height: 1;
+
+    -webkit-font-smoothing: antialiased;
+
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+.g-sidebar .current .brick-wrap .font-public {
+
+    color: #fff;
+
+}
+
+.nav-icon-num {
+
+    background-color: #eb5945;
+
+    color: #eb5945;
+
+    display: inline-block;
+
+    text-align: center;
+
+    width: 10px;
+
+    height: 10px;
+
+    border-radius: 5px;
+
+    font-size: 0;
+
+    line-height: normal;
+
+    vertical-align: top;
+
+    position: absolute;
+
+    left: 37px;
+
+    top: 3px;
+
+    overflow: hidden;
+
+    white-space: nowrap;
+
+    text-overflow: ellipsis;
+
+}
+
+.nav-icon-num span {
+
+    display: block;
+
+}
+
+.left-tree-brick.current .font-new-leftnav, .left-tree-brick.current .left-tree-brick-text, .left-tree-brick:hover .font-new-leftnav, .left-tree-brick:hover .left-tree-brick-text {
+
+    color: #fff;
+
+}
+
+.left-tree-brick.my-project-list-btn {
+
+    position: relative;
+
+}
+
+/* @media (max-width: 1366px) */
+.left-tree-brick {
+
+    margin-top: 10px;
+
+}
+
+.left-tree-brick .brick-wrap {
+
+    display: block;
+
+    margin: 0 auto;
+
+    padding: 7px 0;
+
+    text-align: center;
+
+}
+
+.g-sidebar a {
+
+    color: #999;
+
+    text-decoration: none;
+
+    position: relative;
+
+}
+
+.font-public {
+
+    vertical-align: middle;
+
+}
+
+.left-tree-brick .left-tree-brick-text {
+
+    margin-top: 6px;
+
+    font-size: 12px;
+
+    color: #d7e6fe;
+
+}
+
+/* @media (max-width: 1366px) */
+.left-tree-brick {
+
+    margin-top: 10px;
+
+}
+
+.left-tree-brick {
+
+    display: block;
+
+    *display: inline;
+
+    *zoom: 1;
+
+    padding: 0;
+
+    margin-top: 15px;
+
+}
+
+.left-tree-brick .brick-wrap {
+
+    display: block;
+
+    margin: 0 auto;
+
+    padding: 7px 0;
+
+    text-align: center;
+
+}
+
+.g-sidebar a {
+
+    color: #999;
+
+    text-decoration: none;
+
+    position: relative;
+
+}
+
+.left-tree-brick .font-public-set, .left-tree-brick .font-public {
+
+    display: inline-block;
+
+    font-size: 22px;
+
+    height: 22px;
+
+    color: #d7e6fe;
+
+}
+
+.font-public {
+
+    vertical-align: middle;
+
+}
+
+.font-public-bell:after, .font-public-bell-after {
+
+    content: "\EA14";
+
+}
+
+.font-public:after, .font-public-after {
+
+    display: inline-block;
+
+    font-family: "public.iconfont";
+
+    font-style: normal;
+
+    font-weight: normal;
+
+    line-height: 1;
+
+    -webkit-font-smoothing: antialiased;
+
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+.left-tree-brick .font-public-set, .left-tree-brick .font-public {
+
+    display: inline-block;
+
+    font-size: 22px;
+
+    height: 22px;
+
+    color: #d7e6fe;
+
+}
+
+.left-tree-brick .brick-wrap {
+
+    display: block;
+
+    margin: 0 auto;
+
+    padding: 7px 0;
+
+    text-align: center;
+
+}
+
+.left-tree-brick .brick-wrap {
+
+    display: block;
+
+    margin: 0 auto;
+
+    padding: 7px 0;
+
+    text-align: center;
+
+}
+
+.left-tree-brick .font-public-set, .left-tree-brick .font-public {
+
+    display: inline-block;
+
+    font-size: 22px;
+
+    height: 32px;
+
+    color: #d7e6fe;
+z-index: 100;
+}
+
+.font-public {
+
+    vertical-align: middle;
+
+}
+
+.font-public:after, .font-public-after {
+
+    display: inline-block;
+
+    font-family: "public.iconfont";
+
+    font-style: normal;
+
+    font-weight: normal;
+
+    line-height: 1;
+
+    -webkit-font-smoothing: antialiased;
+
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+.left-tree-brick .left-tree-brick-text {
+
+    margin-top: 6px;
+
+    font-size: 12px;
+
+    color: #d7e6fe;
+
+}
+
+.left-tree-brick .left-tree-brick-text {
+
+    margin-top: 6px;
+
+    font-size: 12px;
+
+    color: #d7e6fe;
+
+}
+
+.g-sidebar #tree-wrapper .left-tree-bottom.left-tree-bottom-fixed {
+
+    position: absolute;
+
+    bottom: 0px;
+
+}
+
+.g-sidebar #tree-wrapper .left-tree-bottom #new_nav_avatar_div {
+
+    padding-top: 9px;
+
+    padding-bottom: 32px;
+
+    margin: 0;
+
+    height: 34px;
+
+    width: 60px;
+
+}
+
+.dropdown-open {
+
+    z-index: 100;
+
+}
+
+.btn-dropdown, .dropdown {
+
+    position: relative;
+
+}
+
+.btn-dropdown, .dropdown {
+
+    position: relative;
+
+}
+
+.btn-dropdown, .btn-dropdown .dropdown-toggle, .dropdown {
+
+    display: inline-block;
+
+    *display: inline;
+
+    *zoom: 1;
+
+}
+
+.g-sidebar #tree-wrapper .left-tree-bottom #new_nav_avatar_div .dropdown-toggle {
+
+    text-align: center;
+
+    margin: 0;
+
+}
+
+.g-sidebar a {
+
+    color: #999;
+
+    text-decoration: none;
+
+    position: relative;
+
+}
+
+.dropdown-toggle {
+
+    display: block;
+
+}
+
+.g-sidebar #tree-wrapper .left-tree-bottom #new_nav_avatar_div .dropdown-toggle .avatar-container {
+
+    width: 34px;
+
+    height: 34px;
+
+    margin-right: 0;
+
+}
+
+.avatar-nav {
+
+    font-family: Arial,'微软雅黑','宋体';
+
+}
+
+.avatar-nav, .project-logo {
+
+    font-weight: 700;
+
+    font-style: normal;
+
+    font-size: 16px;
+
+    text-align: center;
+
+    width: 24px;
+
+    height: 24px;
+
+    line-height: 24px;
+
+    *line-height: 26px;
+
+    color: #fff;
+
+    display: inline-block;
+
+    *display: inline;
+
+    *zoom: 1;
+
+    margin-right: 4px;
+
+    border-radius: 3px;
+
+    vertical-align: top;
+
+    font-family: '微软雅黑',Arial,'宋体';
+
+}
+
+.g-sidebar #tree-wrapper .left-tree-bottom #new_nav_avatar_div .avatar-nav .avatar-text-default {
+
+    width: 34px;
+
+    height: 34px;
+
+    font-size: 16px;
+
+    line-height: 32px;
+
+}
+
+.avatar-text-default {
+
+    display: inline-block;
+
+    *display: inline;
+
+    *zoom: 1;
+
+    vertical-align: middle;
+
+    border-radius: 100%;
+
+    box-shadow: 0 0 1px rgba(0,0,0,0.3);
+
+    background-color: #b9cdef;
+
+    color: #fff;
+
+    font-weight: bold;
+
+    font-style: normal;
+
+    text-align: center;
+
+    font-family: Arial,'微软雅黑','宋体';
+
+}
+
+.avatar-img-default .avatar-default-name, .avatar-text-default .avatar-default-name {
+
+    color: #fff;
+
+    display: inline-block;
+
+    width: 100%;
+
+    height: 26px;
+
+    line-height: 26px;
+
+    transform: scale(.8, .8);
+
+    -webkit-transform: scale(.8, .8);
+
+    -ms-transform: scale(.8, .8);
+
+    -o-transform: scale(.8, .8);
+
+    -moz-transform: scale(.8, .8);
+
+    white-space: nowrap;
+
+}
+
+.g-sidebar #tree-wrapper .left-tree-bottom #new_nav_avatar_div .avatar-nav .avatar-text-default {
+
+    width: 34px;
+
+    height: 34px;
+
+    font-size: 16px;
+
+    line-height: 32px;
+
+}
+
+#personal-setting-menu {
+
+    display: none;
+
+    width: 196px;
+
+}
+
+.dropdown-open .dropdown-menu {
+
+    display: block!important;
+
+}
+
+.dropdown-up .dropdown-menu {
+
+    bottom: 100%;
+
+    top: auto;
+
+}
+
+.dropdown-menu {
+
+    display: none;
+
+    position: absolute;
+
+    top: 100%;
+
+    min-width: 100px;
+
+    font-size: 12px;
+
+    color: #8c95a8;
+
+    border: 0;
+
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+
+    background-color: #fff;
+
+    z-index: 799;
+
+}
+
+#personal-setting-menu .menu-triangle {
+
+    height: 0;
+
+    width: 0;
+
+    border-width: 10px;
+
+    border-color: transparent #fff transparent transparent;
+
+    position: absolute;
+
+    border-style: solid;
+
+    cursor: pointer;
+
+}
+
+.dropdown-menu ul {
+
+    position: relative;
+
+    z-index: 1;
+
+    min-width: 114px;
+
+    background-color: #fff;
+
+}
+
+li, p, ul {
+
+    margin: 0;
+
+    padding: 0;
+
+    list-style: none;
+
+}
+
+#personal-setting-menu ul.menu-items li a {
+
+    padding-left: 20px;
+
+    background-color: transparent;
+
+    color: #182b50;
+
+    margin: 0;
+
+    font-size: 12px;
+
+    line-height: 37px;
+
+}
+
+.dropdown-menu a, .rowdone .dropdown-menu a {
+
+    display: block;
+
+    padding: 0 15px;
+
+    color: #182b50;
+
+    line-height: 2.4;
+
+    text-align: left;
+
+    text-decoration: none;
+
+    white-space: nowrap;
+
+}
+.left-tree-bottom  {
+
+    padding-top: 9px;
+
+    padding-bottom: 32px;
+
+    margin: 0;
+
+    height: 34px;
+
+    width: 60px;
+
+}

src/components/Appheader/Appheader.jsx

@@ -0,0 +1,157 @@
+
+import React,{Component} from "react";
+import logo from '../../logo.svg';//引入上层再上层目录
+import './Appheader.css'
+export default class Appheader extends Component{
+    render(){
+        return(
+          <div id="left-tree" className="frame-nav g-sidebar ">
+
+          <div id="tree-wrapper" className="">
+
+                  <div className="left-tree-brick brick-logo">
+
+                      <a href="https://www.tapd.cn/company/participant_projects?from=left_tree2" className="tapd-logo">
+                      <img src={logo} className="font-public-logo font-public"/>
+                      {/* <i className="font-public-logo font-public"></i> */}
+                      
+
+                      </a>
+
+                  </div>
+          
+
+
+          <div id="language_reload" className=" left-tree-brick current">
+
+                <a id="top_nav_worktable" className="brick-wrap english has-tips" href="https://www.tapd.cn/my_worktable/?from=left_tree_cloud_v2">
+                <img src={logo} className="font-public-worktable font-public"/>
+                    {/* <i className="font-public-worktable font-public"></i> */}
+
+                    <span id="todo_workitem_count" className="t-num nav-icon-num">
+
+                      <span className="todo_total">30</span>
+
+                    </span>
+
+                    <div className="left-tree-brick-text">工作台</div>
+
+                </a>
+
+            </div>
+
+
+            <div className=" left-tree-brick my-project-list-btn ">
+
+              <a className="brick-wrap my-project-list-trigger">
+              <img src={logo} className="font-public-project font-public"/>
+
+                {/* <i className="font-public-project font-public"></i> */}
+
+                <div className=" left-tree-brick-text">模块</div>
+
+              </a>
+
+            </div>
+
+            <div id="language_reload" className=" left-tree-brick nav-iconbtn msg ">
+
+                <a id="top_nav_worktable_msg" className="brick-wrap has-tips" href="https://www.tapd.cn/letters/?from=top_nav_worktable_v2" data-todotitle="有{$num}条站内信" data-notodotitle="没有站内信">
+                <img src={logo} className="font-public-bell font-public"/>
+                  {/* <i className="font-public-bell font-public"></i> */}
+
+                  <span id="msg_count" className="t-num">
+
+                    <span className="todo_total"></span>
+
+                  </span>
+
+                  <div className="left-tree-brick-text">消息</div>
+
+                </a>
+
+             </div>
+
+
+
+             <div id="left-tree-bottom" className="left-tree-bottom left-tree-bottom-fixed" style={{width: '3em'}} >
+
+
+                <div id="new_nav_avatar_div" className="left-tree-brick nav-iconbtn dropdown user dropdown-open dropdown-up" data-dropdown="click">
+
+                  <a className="dropdown-toggle" title="feng">
+
+                      <div className="avatar-container j-left-nav-avatar-container avatar-nav">
+
+                        <i style={{fontStyle: 'normal'}}  className="avatar-text-default  " title="feng">
+
+                          <span className="avatar-default-name">
+
+                          feng	</span>
+
+                        </i>
+
+
+                      </div>
+
+                  </a>
+
+
+                    {/* 下拉菜单 */}
+             
+
+                <div id="personal-setting-menu" className="dropdown-menu personal-setting-menu" style={{left: '5em',bottom: '0em'}} >
+
+                <div className="menu-triangle" style={{left: '-20em',bottom: '39em'}}></div>
+
+                <ul className="menu-items">
+
+              
+
+                <li>
+
+                <a href="https://www.tapd.cn/personal_settings/index?tab=menu" target="_blank">
+
+                <i className="font-public font-public-setting"></i>
+
+                个人设置	</a>
+
+                </li>
+
+                <li>
+
+                <a href="https://www.tapd.cn/personal_settings/index?tab=problem_feedback" target="_blank">
+
+                <i className="font-public font-public-feedback"></i>
+
+                问题反馈	</a>
+
+               
+
+                
+
+                </li>
+
+
+                <li className="group">
+
+                <a href="https://www.tapd.cn/users/logout">
+
+                <i className="font-public font-public-logout"></i>
+
+                退出登录	</a>
+
+                </li>
+
+                </ul>
+
+                </div>
+
+                </div>
+
+              </div>
+          </div>
+    </div>
+        )
+    }
+}

src/components/Appsider/Appsider.css

@@ -0,0 +1,1011 @@
+.demo{
+    background-color: rgb(150, 141, 233);
+}
+#page-content{
+    border: none;
+    margin: 0 15px;
+    background: #fff;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    width: auto !important;
+}
+.clearfix{
+    zoom: 1;
+}
+.tui-d0{
+    width: auto;
+}
+
+.worktable-wrap-outer {
+
+    position: relative;
+
+    padding: 14px;
+
+    height: 100% !important;
+
+    background: #f3f4f6;
+
+    box-sizing: border-box;
+
+}
+
+.worktable-wrap-outer .worktable-list {
+
+    position: fixed;
+
+    top: 14px;
+
+    left: 75px;
+
+    bottom: 14px;
+
+    background: #fff;
+
+    width: 250px;
+
+    box-shadow: 0 0 10px rgba(128,145,165,0.2);
+
+    transition: width 300ms ease;
+
+    z-index: 99;
+
+}
+
+.worktable-wrap-outer .worktable-detail {
+
+    position: relative;
+
+    margin-left: 264px;
+
+    height: 100%;
+
+    min-width: 900px;
+
+    transition: margin-left 300ms ease;
+
+}
+
+
+.worktable-wrap-outer .worktable-list .tab-list {
+
+    overflow: hidden;
+
+    padding: 0;
+
+}
+
+ul {
+
+    list-style: none;
+
+}
+
+li, p, ul {
+
+    margin: 0;
+
+    padding: 0;
+
+    list-style: none;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item:first-child {
+
+    padding: 8px 0;
+
+    border-bottom: 1px solid #e8eaee;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item {
+
+    cursor: pointer;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item a {
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: block;
+
+    height: 100%;
+
+    width: 100%;
+
+    padding-left: 20px;
+
+}
+
+a, a:hover {
+
+    text-decoration: none;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item-logo {
+
+    position: absolute;
+
+    display: inline-block;
+
+    font-size: 16px;
+
+    left: 20px;
+
+    top: 10px;
+
+    color: #8c95a8;
+
+    transition: left 300ms ease;
+
+}
+
+.font-public-add-small {
+
+    font-size: 17px;
+
+    color: #182b50;
+
+}
+
+.font-public {
+
+    vertical-align: middle;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item-text {
+
+    opacity: 1;
+
+    margin-left: 30px;
+
+    display: block;
+
+    color: #182b50;
+
+    font-size: 14px;
+
+    height: 38px;
+
+    line-height: 38px;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    transition: font-size 300ms ease,margin-left 300ms ease,opacity 300ms ease;
+
+}
+
+.font-public-add-small:after, .font-public-add-small-after {
+
+    /* content: "\EA07";
+     */
+     width: 27px;
+    content:  url("../../logo.svg");
+}
+
+.font-public:after, .font-public-after {
+
+    display: inline-block;
+
+    font-family: "public.iconfont";
+
+    font-style: normal;
+
+    font-weight: normal;
+
+    line-height: 1;
+
+    -webkit-font-smoothing: antialiased;
+
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item-logo {
+
+    position: absolute;
+
+    display: inline-block;
+
+    font-size: 16px;
+
+    left: 20px;
+
+    top: 10px;
+
+    color: #8c95a8;
+
+    transition: left 300ms ease;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item {
+
+    cursor: pointer;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item a {
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: block;
+
+    height: 100%;
+
+    width: 100%;
+
+    padding-left: 20px;
+
+}
+
+a {
+
+    color: #3582fb;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item-logo {
+
+    position: absolute;
+
+    display: inline-block;
+
+    font-size: 16px;
+
+    /* left: 70px; */
+
+    top: 10px;
+
+    color: #8c95a8;
+
+    transition: left 300ms ease;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item.current-tab {
+
+    cursor: default;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item {
+
+    cursor: pointer;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item.current-tab a {
+
+    background-color: #e1ecfe !important;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item a {
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: block;
+
+    height: 100%;
+
+    width: 100%;
+
+    padding-left: 20px;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item.current-tab .tab-list-item-logo, .worktable-wrap-outer .worktable-list .tab-list-item.current-tab .tab-list-item-text {
+
+    color: #3582fb;
+
+}
+
+
+/* detail样式 */
+
+.worktable-wrap-outer .worktable-detail .worktable-wrap .project-navhebe {
+
+    position: relative;
+
+}
+
+.project-navhebe {
+
+    box-shadow: 0 0 10px rgba(128,145,165,0.2);
+
+    margin-bottom: 10px;
+
+    border-radius: 2px;
+
+    background: #fff;
+    margin-left: 52px;
+    padding-top: 36px;
+    height: 40px;
+ 
+
+}
+
+.tui-b {
+
+    position: relative;
+
+}
+
+.worktable-project {
+
+    position: relative;
+
+    padding: 20px 10px;
+
+    margin-top: 0 !important;
+
+    padding: 0 !important;
+
+}
+
+.worktable-wrap-outer .worktable-detail .worktable-project__status {
+
+    background: #fff;
+
+    width: 110px;
+
+}
+
+.worktable-project .worktable-project__status {
+
+    position: absolute;
+
+    top: 0;
+
+    bottom: 0;
+
+    left: 0;
+
+    width: 180px;
+
+    background: #f3f4f6;
+
+    color: #182b50;
+
+    font-size: 16px;
+
+    border: 1px solid #fff;
+
+    border-radius: 2px 0 0 2px;
+
+}
+
+.worktable-project .worktable-project__status .dropdown-toggle {
+
+    position: absolute;
+
+    top: 50%;
+
+    margin-top: -9px;
+
+    width: 100%;
+
+    padding: 0 20px;
+
+    color: #182b50;
+
+}
+
+.dropdown-toggle {
+
+    display: block;
+
+}
+.worktable-wrap-outer .worktable-detail .worktable-wrap {
+
+    padding: 0;
+
+}
+
+.worktable-wrap {
+
+    position: relative;
+
+    padding: 15px;
+
+    height: 100%;
+
+    background: #f3f4f6;
+
+    box-sizing: border-box;
+
+}
+
+.worktable-wrap-outer .worktable-detail .worktable-table {
+
+    top: 102px;
+
+    left: 52px;
+
+    right: 0px;
+
+    bottom: 0px;
+    height: 400px;
+
+}
+
+.worktable-table {
+
+    position: absolute;
+
+    left: 15px;
+
+    right: 15px;
+
+    top: 117px;
+
+    bottom: 15px;
+
+}
+
+.clearfix {
+
+    zoom: 1;
+
+}
+
+.worktable-content.worktable-content-routine {
+
+    overflow: unset;
+
+}
+
+.worktable-content {
+
+    position: relative;
+
+    width: 100%;
+
+    float: left;
+
+    height: 100%;
+
+    margin-right: 20px;
+
+    box-shadow: 0 0 10px rgba(128,145,165,0.2);
+
+    overflow: auto;
+
+    border-radius: 2px;
+
+    background: #fff;
+
+}
+
+.tfl-table>thead>tr th {
+
+color: #8c95a8;
+
+}
+
+.tfl-tab-new {
+
+    width: 100%;
+
+    background: #fff;
+
+    color: #8091a5;
+
+    font-size: 16px;
+
+    border: 0;
+
+    margin: 0;
+
+    display: inline-block;
+
+    vertical-align: top;
+
+}
+.tfl-tab-new .tab-item {
+
+    float: left;
+
+    padding: 16px 25px;
+
+    padding-bottom: 21px;
+
+}
+
+li, p, ul {
+
+    margin: 0;
+
+    padding: 0;
+
+    list-style: none;
+
+}
+.tfl-tab-new .tab-item {
+
+    float: left;
+
+    padding: 16px 25px;
+
+    padding-bottom: 21px;
+
+}
+.tfl-tab-new .tab-item.current .tab-item-text {
+
+    color: #3582fb;
+
+    border-bottom: 2px solid #3582fb;
+
+}
+
+.tfl-tab-new .tab-item .tab-item-text {
+
+    display: inline;
+
+    border: 0;
+
+    padding: 0;
+
+    padding-bottom: 5px;
+
+    color: #8091a5;
+
+    background-color: #fff;
+
+    text-decoration: none;
+
+}
+
+.tfl-tab-new .tab-item .tab-item-text .tab-item-text-small {
+
+    font-size: 12px;
+
+}
+.worktable-content.worktable-content-routine #content_div {
+
+    overflow: auto;
+
+    position: absolute;
+
+    left: 0;
+
+    right: 0;
+
+    top: 56px;
+
+    bottom: 0;
+
+}
+
+.tfl-tab-new .tab-item {
+
+    float: left;
+
+    padding: 16px 25px;
+
+    padding-bottom: 21px;
+
+}
+
+li, p, ul {
+
+    margin: 0;
+
+    padding: 0;
+
+    list-style: none;
+
+}
+
+.tfl-tab-new .tab-item.current .tab-item-text {
+
+    color: #3582fb;
+
+    border-bottom: 2px solid #3582fb;
+
+}
+
+.tfl-tab-new .tab-item .tab-item-text {
+
+    display: inline;
+
+    border: 0;
+
+    padding: 0;
+
+    padding-bottom: 5px;
+
+    color: #8091a5;
+
+    background-color: #fff;
+
+    text-decoration: none;
+
+}
+
+.tfl-tab-new .tab-item .tab-item-text .tab-item-text-small {
+
+    font-size: 12px;
+
+}
+
+.table-wrap-container {
+
+    width: 100%;
+
+    height: 100%;
+
+    position: relative;
+
+    padding-bottom: 50px;
+    padding-left: 20px;
+
+}
+
+.table-wrap {
+
+    background: #fff;
+
+    box-sizing: border-box;
+
+}
+
+.table-wrap .tfl-table {
+
+    position: initial;
+
+}
+
+.tfl-table {
+
+    width: 100%;
+
+    border: 0;
+
+    white-space: nowrap;
+
+    word-break: break-all;
+
+    position: relative;
+
+}
+
+table {
+
+    border-collapse: collapse;
+
+    border-spacing: 0;
+
+}
+
+thead {
+
+    display: table-header-group;
+
+    vertical-align: middle;
+
+    border-color: inherit;
+
+}
+
+tbody {
+
+    display: table-row-group;
+
+    vertical-align: middle;
+
+    border-color: inherit;
+
+}
+
+
+.tfl-table>thead>tr {
+
+    height: 40px;
+
+    color: #b0bac5;
+
+    background: #fff;
+
+    font-size: 12px;
+
+}
+.tfl-table>thead>tr.gray-head {
+
+    background: #f8f8f8;
+
+}
+
+.tfl-table>thead>tr th {
+
+    color: #8c95a8;
+
+}
+
+.tfl-table thead th {
+
+    position: relative;
+
+}
+
+.tfl-table>thead>tr th {
+
+    padding: 0 8px;
+
+    color: #b0bac5;
+
+    border-bottom: 1px solid transparent;
+
+}
+
+
+
+.first-column-with-more-icon>thead th:first-child, .first-column-with-more-icon>tbody>tr>td:first-child, .first-column-with-more-icon>thead th.first-child, .first-column-with-more-icon>tbody>tr>td.first-child {
+
+    padding-left: 3px !important;
+
+    padding-right: 2px;
+
+}
+
+.first-column-with-more-icon>thead th:nth-of-type(2), .first-column-with-more-icon>tbody>tr>td:nth-of-type(2) {
+
+    padding-left: 0px !important;
+
+}
+
+.tfl-table>tbody>tr {
+
+    height: 40px;
+
+    font-size: 14px;
+
+    background: #fff;
+
+}
+
+
+
+.tfl-table>tbody>tr.modified_item_tr {
+
+    background: #edf3f9;
+
+}
+
+.worktable-content .tfl-table>tbody>tr>td {
+
+    padding: 2px 9px 1px;
+
+}
+
+.worktable-content .tfl-table>tbody>tr>td {
+
+    padding: 2px 9px 1px;
+
+}
+
+.first-column-with-more-icon>thead th:nth-of-type(2), .first-column-with-more-icon>tbody>tr>td:nth-of-type(2) {
+
+    padding-left: 0px !important;
+
+}
+
+
+.tfl-editable td {
+
+    border-bottom: 0 !important;
+
+    max-width: 500px;
+
+}
+
+.tfl-table>tbody>tr>td {
+
+    padding: 4px 9px;
+
+    line-height: 18px;
+
+    border-bottom: 1px solid transparent;
+
+}
+
+.worktable-content .tfl-table>tbody>tr>td .growing-title {
+
+    min-width: 300px;
+
+}
+
+
+
+.growing-title {
+
+    position: relative;
+
+    height: 30px;
+
+    line-height: 30px;
+
+    min-width: 30rem;
+
+    width: 100%;
+
+}
+
+table:not(#bug_list_content) .rowdone .growing-title-inner {
+
+    color: #bac0cb;
+
+}
+
+.growing-title-inner {
+
+    padding-right: 20px;
+
+    box-sizing: border-box;
+
+}
+
+.growing-title-inner {
+
+    position: absolute;
+
+    display: block;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    word-wrap: normal;
+
+    max-width: 100%;
+
+    word-spacing: normal;
+
+    white-space: nowrap;
+
+    min-width: none !important;
+
+}
+
+.tfl-table>tbody>tr.rowdone td .namecol {
+
+    color: #b0bac5;
+
+}
+
+.tfl-table>tbody>tr.rowdone td  .under-working{
+
+    color: #182b50;
+
+}
+
+
+.growing-title-inner a.namecol, .growing-title-inner a.editable-value {
+
+    display: inline;
+
+    max-width: none;
+
+    min-width: none;
+
+}
+
+.tfl-table a {
+
+    color: #182b50 ;
+
+    text-decoration: none;
+
+}
+.tfl-table.g_table .workflow-status-begin, .tfl-table .checkable-capsule-item  .workflow-status-begin, .g_table .workflow-status-begin, .workflow-status-begin {
+
+    border-color: #28AB80 !important;
+
+    color: #28AB80 !important;
+
+}
+
+.tfl-table.g_table .workflow-status-end, .tfl-table .workflow-status-end, .g_table .workflow-status-end, .workflow-status-end {
+
+    border-color: #7C8597;
+
+    color: #7C8597;
+
+}
+
+.tfl-table .checkable-capsule-item-adaptive, .checkable-capsule-item-adaptive {
+
+    width: auto;
+
+    padding-right: 10px;
+
+}
+
+.tfl-table .checkable-capsule-item, .checkable-capsule-item {
+
+    border: 1px solid #7C8597;
+
+    color: #7C8597;
+
+    width: 114px;
+
+    max-height: 66px;
+
+    font-size: 12px;
+
+    line-height: 20px;
+
+    vertical-align: middle;
+
+    border-radius: 10px;
+
+    cursor: pointer;
+
+    overflow: visible;
+
+    padding: 2px 10px;
+
+}
+
+.editable-dropdown-label .editable-value {
+
+    cursor: pointer;
+
+}
+
+.td-editable-dropdown .editable-value {
+
+    position: relative;
+
+    padding-right: 27px;
+
+    min-width: 60px;
+
+}
+
+.editable-td .editable-value {
+
+    min-width: 60px;
+
+}
+
+.editable-value {
+
+    display: inline-block;
+
+    max-width: 100%;
+
+    padding: 0 5px;
+
+    line-height: 30px;
+
+    vertical-align: middle;
+
+    box-sizing: border-box;
+
+    -webkit-border-radius: 3px;
+
+    border-radius: 3px;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+}

src/components/Appsider/Appsider.jsx

@@ -0,0 +1,296 @@
+import React,{Component} from "react";
+import './Appsider.css'
+import WorkmodulePanel from '../WorkModulePanel';
+import WorkmessagePanel from '../WorkmessagePanel';
+// import WorktableDetail from '../WorktableDetail';
+// import WorktableList from '../WorktableList/WorktableList';
+
+export default class Appsider extends Component{
+
+    render(){
+        return (            
+        
+            <div id="page-content" className="tui-d0 clearfix">
+                {/* <WorkmodulePanel/> */}
+                {/* <WorkmessagePanel/> */}
+                {/* style={{display:'none'}} */}
+             <div className="worktable-wrap-outer" >
+                {/* <WorktableList/> */}
+                 <div className="worktable-list">
+                        <ul className="tab-list">
+
+                                    <li id="quick-add" className="tab-list-item " title="" data-workspace-id="">
+
+                                    <a data-temp-title="创建工单项" theme="black" position="right" tipwidth="80" data-title="">
+
+                                    <i className="tab-list-item-logo font-public font-public-add-small"></i>
+
+                                    <span className="tab-list-item-text">✚ 创建工单项</span>
+
+                                    </a>
+
+                                    </li>
+
+
+                                    <li className="tab-list-item ">
+
+                                    <a href="https://www.tapd.cn/my_worktable/index/todo" data-temp-title="我的待办" theme="black" position="right" tipwidth="70" data-title="">
+
+                                    <i className="tab-list-item-logo font font-my-todo"></i>
+
+                                    <span className="tab-list-item-text">我的待办</span>
+
+                                    </a>
+
+                                    </li>
+
+                                    <li className="tab-list-item ">
+
+                                    <a href="https://www.tapd.cn/my_worktable/index/done" data-temp-title="我的已办" theme="black" position="right" tipwidth="70" data-title="">
+
+                                    <i className="tab-list-item-logo font font-checkbox-round"></i>
+
+                                    <span className="tab-list-item-text">我的已办</span>
+
+                                    </a>
+
+                                    </li>
+
+                                    <li className="tab-list-item current-tab">
+
+                                    <a href="https://www.tapd.cn/my_worktable/index/created" data-temp-title="我创建的" theme="black" position="right" tipwidth="70" data-title="">
+
+                                    <i className="tab-list-item-logo font font-i-created"></i>
+
+                                    <span className="tab-list-item-text">我创建的</span>
+
+                                    </a>
+
+                                    </li>
+
+
+                        </ul>
+                 </div>
+                 <div className="worktable-detail">
+                          <div className="worktable-wrap">
+                                
+                                            <div className="project-navhebe normal-worktable-nav-new">
+                                                <div className="tui-b">
+                                                    <div className="worktable-project j-worktable-project">
+                                                        <div className="worktable-project__status j-worktable-project__status dropdown" data-dropdown="hover" out-delay="200">
+
+                                                            <a href="#" className="dropdown-toggle">
+
+                                                                <i className="font-worktable font-worktable-done"></i>	我的已办
+
+                                                            </a>
+
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div className="worktable-table clearfix" style={{top: '102px'}}>
+                                                    <div className="worktable-content worktabel-content-toutine" style={{width:'100%', overflow:'hidden'}}>
+                                                        <ul className="tfl-tab-new" style={{display:'inline-block'}}>
+                                                            <li className="tab-item current">
+                                                                <a className="tab-item-text">
+                                                                    <span>工单需求</span>
+                                                                    <span className="tab-item-text-samll">3</span>
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                        <div id="current_div" className="current_container webkit-scrollbar">
+                                                            <div style={{position:'relative'}}>
+                                                                <div className="table-wrap-container j-table-wrap-container webkit-scrollbar ">
+                                                                    <div className="table-wrap webkit-scrollbar">
+                                                                        <table id="story-worktable-list" className="first-column-with-more-icon has-border-top headFloat normal-list tfl-table list-action-table tfl-editable"
+                                                                            style={{tableLayout:'auto',wordWrap:'keep-all'}}>
+
+                                                                                <thead>
+                                                                                    <tr className="grey-head">
+                                                                                        {/* <th className="list-action" width='15'></th> */}
+                                                                                    
+                                                                                    <th width='100' style={{width:'100px'}}>ID</th>
+                                                                                    <th width='100' style={{width:'100px'}}>标题</th>
+                                                                                    <th width='100' style={{width:'100px'}}>状态</th>
+                                                                                    <th width='100' style={{width:'100px'}}>所属平台</th>
+                                                                                    <th width='100' style={{width:'100px'}}>优先级</th>
+                                                                                    <th width='100' style={{width:'100px'}}>处理人</th>
+                                                                                    <th width='100' style={{width:'100px'}}>创建人</th>
+                                                                                    </tr>
+                                                                                </thead>
+                                                                                <tbody>
+                                                                                    <tr data-path="1163292404001000452::1163292404001000580:" data-mosaic="" className="rowdone preview" preview-id="preview_1163292404001000580" data-item-id="1163292404001000580" workspace_id="63292404" workitem_type_id="1163292404001000035" id="tr_story_status_1163292404001000580" pretty_name="63292404" data-editable-params="{&quot;data[id]&quot;:&quot;1163292404001000580&quot;,&quot;data[type]&quot;:&quot;story&quot;}" editable-url="https://www.tapd.cn/63292404/prong/stories/inline_update">
+
+                                                                                            
+
+                                                                                            <td className=" editable-text-area	">
+
+                                                                                                <a target="_blank" href="https://www.echobizlink.cn/63292404/prong/stories/view/1163292404001000580">1000580</a>
+
+                                                                                            </td>
+
+                                                                                            <td className=" editable-text-area worktable-title j-worktable-title editable-td " data-editable-ellipsis="false">
+
+                                                                                                <div className="growing-title">
+
+                                                                                                    <div className="growing-title-inner">
+
+                                                                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+                                                                                                    <a className="namecol J-worktablePreview preview-title" target="_blank" href="" title="系统业务开发-工单管理">
+
+                                                                                                    系统业务开发-工单管理	</a>
+
+                                                                                    
+
+                                                                                                    </div>
+
+                                                                                                </div>
+
+                                                                                            </td>
+
+                                                                                            <td className="	">
+
+                                                                                                    <a href="#" id="td_story_status_1163292404001000580" entity_id="1163292404001000580" entity_type="story" entity_status="resolved" dialog_type="" className="checkable-capsule-item checkable-capsule-item-adaptive workflow-status-end j-item-status__change	" with_workflow="https://www.tapd.cn/63292404/prong/stories/story_workflow_disposal" workflow-status-change="changeStoryStatuResponse" withflowlocation="worktable_story" title="已实现">
+
+                                                                                                    已实现	
+
+                                                                                                    </a>
+
+                                                                                            </td>
+
+                                                                                            <td className="editable-td td-editable-dropdown      editable-dropdown-label editable-text-area editable-click-area" data-editable="tselect" data-editable-value="1163292404001000028" data-editable-field="iteration_id">
+
+                                                                                                        <a className="editable-value" target="_blank" href="https://www.tapd.cn/63292404/prong/iterations/card_view/1163292404001000028" title="机器人云控平台1.0" data-href="https://www.tapd.cn/63292404/prong/iterations/card_view/{id}" id="td_story_iteration_id_1163292404001000580">
+
+                                                                                                        云控平台1.0	<i className="font font-arrow-down editable-dropdown-arrow"></i></a>
+
+                                                                                            </td>
+
+                                                                                            <td className="priority-label-3 editable-td td-editable-dropdown      editable-dropdown-label editable-click-area" data-editable="tselect" data-editable-value="Middle" data-editable-field="priority" data-color-options="%5B%7B%22value%22%3A4%2C%22label%22%3A%22High%22%2C%22color%22%3A%22%23FF6770%22%7D%2C%7B%22value%22%3A3%2C%22label%22%3A%22Middle%22%2C%22color%22%3A%22%2328AB80%22%7D%2C%7B%22value%22%3A2%2C%22label%22%3A%22Low%22%2C%22color%22%3A%22%237C8597%22%7D%2C%7B%22value%22%3A1%2C%22label%22%3A%22Nice%20To%20Have%22%2C%22color%22%3A%22%237C8597%22%7D%5D">
+
+                                                                                                        <span className="normal editable-value no-dropdown-arrow" title="Middle" id="td_story_priority_1163292404001000580">Middle</span>
+
+                                                                                            </td>
+
+                                                                                            <td className="editable-td      editable-text-area editable-click-area" data-editable="pinyinuserchooser" data-editable-value="枫枫;" data-editable-field="owner" id="td_story_owner_1163292404001000580">
+
+                                                                                                        <span className="normal" id="1163292404001000580_owner" title="枫枫;">
+
+                                                                                                            <span className="limit editable-value" title_username="" id="td_story_owner_1163292404001000580" title="枫枫(枫枫)
+
+                                                                                                            ">枫枫;</span>
+
+                                                                                                        </span>
+
+                                                                                            </td>
+
+                                                                                            <td className="	" id="td_story_creator_1163292404001000580">
+
+                                                                                                    <span className="normal" id="1163292404001000580_creator" title_username="" tapd_title="陈旭">
+
+                                                                                                        <span className="limit editable-value" title_username="" id="td_story_creator_1163292404001000580">陈旭</span>
+
+                                                                                                    </span>
+
+                                                                                            </td>
+
+                                                                                        </tr>
+                                                                                    
+                                                                                    <tr data-path="1163292404001000452::1163292404001000580:" data-mosaic="" className="rowdone preview" preview-id="preview_1163292404001000580" data-item-id="1163292404001000580" workspace_id="63292404" workitem_type_id="1163292404001000035" id="tr_story_status_1163292404001000580" pretty_name="63292404" data-editable-params="{&quot;data[id]&quot;:&quot;1163292404001000580&quot;,&quot;data[type]&quot;:&quot;story&quot;}" editable-url="https://www.tapd.cn/63292404/prong/stories/inline_update">
+
+                                                                                            
+
+                                                                                        <td className=" editable-text-area	">
+
+                                                                                            <a target="_blank" href="https://www.echobizlink.cn/63292404/prong/stories/view/1163292404001000580">1000581</a>
+
+                                                                                        </td>
+
+                                                                                        <td className=" editable-text-area worktable-title j-worktable-title editable-td " data-editable-ellipsis="false">
+
+                                                                                            <div className="growing-title">
+
+                                                                                                <div className="growing-title-inner">
+
+                                                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+                                                                                                <a className="namecol J-worktablePreview preview-title under-working" target="_blank" href="" title="系统业务开发-工单管理">
+
+                                                                                                系统业务开发-网络正常无法连接到本地文件服务器	</a>
+
+
+
+                                                                                                </div>
+
+                                                                                            </div>
+
+                                                                                        </td>
+
+                                                                                        <td className="	">
+
+                                                                                                <a href="#" id="td_story_status_1163292404001000580" entity_id="1163292404001000580" entity_type="story" entity_status="resolved" dialog_type="" className="checkable-capsule-item checkable-capsule-item-adaptive workflow-status-begin j-item-status__change	" with_workflow="https://www.tapd.cn/63292404/prong/stories/story_workflow_disposal" workflow-status-change="changeStoryStatuResponse" withflowlocation="worktable_story" title="已实现">
+
+                                                                                                进行中	
+
+                                                                                                </a>
+
+                                                                                        </td>
+
+                                                                                        <td className="editable-td td-editable-dropdown      editable-dropdown-label editable-text-area editable-click-area" data-editable="tselect" data-editable-value="1163292404001000028" data-editable-field="iteration_id">
+
+                                                                                                    <a className="editable-value" target="_blank" href="https://www.tapd.cn/63292404/prong/iterations/card_view/1163292404001000028" title="机器人云控平台1.0" data-href="https://www.tapd.cn/63292404/prong/iterations/card_view/{id}" id="td_story_iteration_id_1163292404001000580">
+
+                                                                                                    云控平台1.0	<i className="font font-arrow-down editable-dropdown-arrow"></i></a>
+
+                                                                                        </td>
+
+                                                                                        <td className="priority-label-3 editable-td td-editable-dropdown      editable-dropdown-label editable-click-area" data-editable="tselect" data-editable-value="Middle" data-editable-field="priority" data-color-options="%5B%7B%22value%22%3A4%2C%22label%22%3A%22High%22%2C%22color%22%3A%22%23FF6770%22%7D%2C%7B%22value%22%3A3%2C%22label%22%3A%22Middle%22%2C%22color%22%3A%22%2328AB80%22%7D%2C%7B%22value%22%3A2%2C%22label%22%3A%22Low%22%2C%22color%22%3A%22%237C8597%22%7D%2C%7B%22value%22%3A1%2C%22label%22%3A%22Nice%20To%20Have%22%2C%22color%22%3A%22%237C8597%22%7D%5D">
+
+                                                                                                    <span className="normal editable-value no-dropdown-arrow" title="Middle" id="td_story_priority_1163292404001000580">High</span>
+
+                                                                                        </td>
+
+                                                                                        <td className="editable-td      editable-text-area editable-click-area" data-editable="pinyinuserchooser" data-editable-value="枫枫;" data-editable-field="owner" id="td_story_owner_1163292404001000580">
+
+                                                                                                    <span className="normal" id="1163292404001000580_owner" title="枫枫;">
+
+                                                                                                        <span className="limit editable-value" title_username="" id="td_story_owner_1163292404001000580" title="枫枫(枫枫)
+
+                                                                                                        ">枫枫;</span>
+
+                                                                                                    </span>
+
+                                                                                        </td>
+
+                                                                                        <td className="	" id="td_story_creator_1163292404001000580">
+
+                                                                                                <span className="normal" id="1163292404001000580_creator" title_username="" tapd_title="孙思邈">
+
+                                                                                                    <span className="limit editable-value" title_username="" id="td_story_creator_1163292404001000580">孙思邈</span>
+
+                                                                                                </span>
+
+                                                                                        </td>
+
+                                                                                        </tr>
+                                                                                </tbody>
+
+                                                                        </table>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>  
+                                                    </div>  
+                                
+                         </div>
+                    </div>
+             </div>
+         </div>
+        )
+    }
+
+}

src/components/WorkModulePanel/WorkmodulePanel.css

@@ -0,0 +1,267 @@
+.clearfix{
+    zoom: 1;
+}
+.active-modules{
+    height: 100% !important;
+    padding-left: 60px;
+
+}
+
+.module-header{
+    margin: 30px;
+    margin-bottom: 0px;
+}
+.module-list{
+    padding-left: 30px;
+    padding-bottom: 30px;
+}
+.module-group>.header{
+    border-bottom: 1px solid #E1E1E1;
+    padding: 30px;
+}
+.module-group>.header h1 {
+
+    font-weight: normal;
+
+    font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑","STHeiti","MingLiu";
+
+    font-size: 18px;
+
+    color: #666;
+
+    display: inline-block;
+
+    white-space: nowrap;
+
+}
+
+.clearfix::after {
+
+    content: '';
+
+    clear: both;
+
+    display: block;
+
+}
+
+.clearfix:after {
+
+    content: ".";
+
+    display: block;
+
+    height: 0;
+
+    clear: both;
+
+    visibility: hidden;
+
+    overflow: hidden;
+
+    font-size: 0;
+
+}
+.tui-d0 {
+
+    margin: auto;
+
+    text-align: left;
+
+}
+
+.module-header .active {
+
+    border-bottom: 3px solid #4f8ef5;
+
+}
+
+.module-header .opened-modules {
+
+    margin-right: 10px;
+
+}
+
+#closed-modules, #opened-modules {
+
+    cursor: pointer;
+
+}
+
+ul {
+
+    display: block;
+
+    list-style-type: disc;
+
+    margin-block-start: 1em;
+
+    margin-block-end: 1em;
+
+    margin-inline-start: 0px;
+
+    margin-inline-end: 0px;
+
+    padding-inline-start: 0px;
+
+}
+
+.module-item {
+
+    display: inline-block;
+
+    background-color: #ffffff;
+
+    padding: 6px 6px 0 6px;
+
+    margin-right: 15px;
+
+    width: 160px;
+
+    vertical-align: top;
+
+    border: 1px solid #EDEDED;
+
+    border-radius: 4px;
+
+    transition: box-shadow .5s;
+
+    margin-bottom: 15px;
+
+}
+
+.module-item .cover {
+
+    display: block;
+
+    overflow: hidden;
+
+}
+
+a {
+
+    text-decoration: none;
+
+    color: #3582fb;
+
+}
+
+.module-item .cover .module-logo {
+
+    width: 160px;
+
+    height: 160px;
+
+    text-align: center;
+
+    line-height: 160px;
+
+    font-size: 40px;
+
+}
+
+.module-logo-upload {
+
+    font-size: 0!important;
+
+    overflow: hidden;
+
+}
+
+.module-logo {
+
+    font-weight: 700;
+
+    font-style: normal;
+
+    font-size: 16px;
+
+    text-align: center;
+
+    width: 24px;
+
+    height: 24px;
+
+    line-height: 24px;
+
+    *line-height: 26px;
+
+    color: #fff;
+
+    display: inline-block;
+
+    *display: inline;
+
+    *zoom: 1;
+
+    margin-right: 4px;
+
+    border-radius: 3px;
+
+    vertical-align: top;
+
+    font-family: '微软雅黑',Arial,'宋体';
+
+}
+
+.module-logo-upload img {
+
+    vertical-align: middle;
+
+    width: 100%;
+
+    height: 100%;
+
+}
+
+.module-item .meta {
+
+    height: 32px;
+
+    position: relative;
+
+}
+
+.module-item .meta .meta-name {
+
+    float: left;
+
+    width: 140px
+
+}
+
+.module-item .meta .meta-ico-action {
+
+    float: right;
+
+    margin-top: 9px;
+
+}
+
+.module-item .title {
+
+    color: #444;
+
+    white-space: nowrap;
+
+    line-height: 32px;
+
+    display: block;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    font-size: 14px;
+
+}
+
+.ico-logout-small {
+
+    background-position: -703px -478px;
+
+    width: 13px;
+
+    height: 13px;
+
+}

src/components/WorkModulePanel/index.jsx

@@ -0,0 +1,157 @@
+import React, { Component } from 'react'
+import './WorkmodulePanel.css'
+
+export default class WorkmodulePanel extends Component {
+  render() {
+    return (
+      <div className='active-modules'>
+         <div className='module-group clearfix'>
+            <div className='header'>
+                <h1>我的模块</h1>
+            </div>
+         </div>
+         <div className='header module-header'>
+                <span id="opened-modules" className="active opened-modules">本公司的模块 </span>
+                <span id="closed-modules" className="closed-modules">公共模块 </span>
+         </div>
+         <ul className='modules-list opened-module-list'>
+         <li className="module-item">
+
+            <a id="" className="cover" href="https://www.tapd.cn/57286996">
+
+            <i className="module-logo module-logo-upload ">
+
+            <img src="https://file.tapd.cn/img_dist/tcloud/default_homepage_logo-f6986305ca.png"/>	</i>
+
+            </a>
+
+            <div className="meta">
+
+            <div className="meta-name">
+
+            <a className="title" title="IT管理" href="https://www.echobizlink.cn/57286996">
+
+            IT管理	</a>
+
+            </div>
+
+            <div className="meta-ico-action">
+
+            <a title="退出项目" className="logout-module" data-id="57286996" data-todo="0" data-unique-admin="0" data-member-url="https://www.echobizlink.cn/57286996/settings/team" data-worktable-url="https://www.tapd.cn/my_worktable/?from=left_tree_cloud_v2&amp;workspace_id=57286996">
+
+            <i title="退出项目" className="ico-logout-small"></i>
+
+            </a>
+
+            </div>
+
+            </div>
+
+            </li>
+
+            <li className="module-item">
+
+            <a id="" className="cover" href="https://www.tapd.cn/52367100">
+
+            <i className="module-logo module-logo-upload ">
+
+            <img src="https://file.tapd.cn/img_dist/tcloud/default_homepage_logo-f6986305ca.png"/>	</i>
+
+            </a>
+
+            <div className="meta">
+
+            <div className="meta-name">
+
+            <a className="title" title="销售管理" href="https://www.echobizlink.cn/52367100">
+
+            销售管理	</a>
+
+            </div>
+
+            <div className="meta-ico-action">
+
+            <a title="退出项目" className="logout-module" data-id="52367100" data-todo="0" data-unique-admin="0" data-member-url="https://www.echobizlink.cn/52367100/settings/team" data-worktable-url="https://www.tapd.cn/my_worktable/?from=left_tree_cloud_v2&amp;workspace_id=52367100">
+
+            <i title="退出项目" className="ico-logout-small"></i>
+
+            </a>
+
+            </div>
+
+            </div>
+
+            </li>
+
+            <li className="module-item">
+
+            <a id="" className="cover" href="https://www.tapd.cn/51053842">
+
+            <i className="module-logo module-logo-upload ">
+
+            <img src="https://file.tapd.cn/img_dist/tcloud/default_homepage_logo-f6986305ca.png"/>	</i>
+
+            </a>
+
+            <div className="meta">
+
+            <div className="meta-name">
+
+            <a className="title" title="库存管理" href="https://www.echobizlink.cn/51053842">
+
+            库存管理	</a>
+
+            </div>
+
+            <div className="meta-ico-action">
+
+            <a title="退出项目" className="logout-module" data-id="51053842" data-todo="10" data-unique-admin="0" data-member-url="https://www.echobizlik.cn/51053842/settings/team" data-worktable-url="https://www.tapd.cn/my_worktable/?from=left_tree_cloud_v2&amp;workspace_id=51053842">
+
+            <i title="退出项目" className="ico-logout-small"></i>
+
+            </a>
+
+            </div>
+
+            </div>
+
+            </li>
+
+            <li className="module-item">
+
+            <a id="lite-module" className="cover" href="https://www.echobizlink.cn/37030758">
+
+            <i className="module-logo module-logo-upload ">
+
+            <img src="https://file.tapd.cn/img_dist/tcloud/default_homepage_logo-f6986305ca.png"/>	</i>
+
+            </a>
+
+            <div className="meta">
+
+            <div className="meta-name">
+
+            <a className="title" title="售后服务管理" href="https://www.echobizlink.cn/37030758">
+
+            售后服务管理 </a>
+
+            </div>
+
+            <div className="meta-ico-action">
+
+            <a title="退出项目" className="logout-module" data-id="37030758" data-todo="0" data-unique-admin="0" data-member-url="https://www.echobizlink.cn/37030758/settings/team" data-worktable-url="https://www.tapd.cn/my_worktable/?from=left_tree_cloud_v2&amp;workspace_id=37030758">
+
+            <i title="退出项目" className="ico-logout-small"></i>
+
+            </a>
+
+            </div>
+
+            </div>
+
+            </li>
+         </ul>
+      </div>
+    )
+  }
+}

src/components/WorkmessagePanel/WorkmessagePanel.css

@@ -0,0 +1,328 @@
+.message{
+    height: 100% !important;
+    padding-left: 60px;
+
+}
+.title h1 {
+
+    font-size: 16px;
+
+    margin-top: 31px;
+
+    margin-left: 28px;
+
+    font-weight: normal;
+
+}
+
+
+.title i.ico-bell-big-gray {
+
+    vertical-align: -10px;
+
+    margin-right: 6px;
+
+}
+
+.ico-bell-big-gray {
+
+    background-position: -271px -411px;
+
+    width: 30px;
+
+    height: 30px;
+
+}
+
+.letter-list, .next-page, .loading-panel {
+
+    margin: 18px
+
+}
+.letter, .next-page {
+
+    margin-bottom: 1px;
+
+    background-color: #FFF;
+
+    padding: 15px 10px;
+
+    min-height: 50px;
+
+    position: relative;
+
+}
+
+.clearfix {
+
+    zoom: 1;
+
+}
+
+.letter .tag {
+
+    width: 8px;
+
+    visibility: hidden;
+
+    position: absolute;
+
+    top: 0;
+
+    left: 0;
+
+}
+
+.letter div {
+
+    display: inline-block;
+
+    vertical-align: top;
+
+}
+
+
+
+.ico-tip-new {
+
+    background-position: -309px -411px;
+
+    width: 30px;
+
+    height: 30px;
+
+}
+
+.letter .user {
+
+    width: 250px;
+
+    line-height: 50px;
+
+    font-size: 14px;
+
+    position: absolute;
+
+    top: 15px;
+
+    left: 20px;
+
+}
+
+.letter .info {
+
+    color: #8e959b;
+
+    display: inline-block;
+
+    padding-left: 240px;
+
+    padding-right: 150px;
+
+    width: 100%;
+
+    box-sizing: border-box;
+
+}
+
+.letter .date {
+
+    color: #8e959b;
+
+    line-height: 20px;
+
+    position: absolute;
+
+    right: 20px;
+
+    top: 10px;
+
+    text-align: right;
+
+}
+
+.letter .user span {
+
+    display: inline-block;
+
+    width: 150px;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    margin-left: 10px;
+
+    white-space: nowrap;
+
+}
+
+.letter .user span.avatar-default-name {
+
+    margin-left: 0;
+
+}
+
+.letter .info .title {
+
+    margin-top: 3px;
+
+    margin-bottom: 12px;
+
+    font-size: 15px;
+
+    color: black;
+
+}
+
+p {
+
+    display: block;
+
+    margin-block-start: 1em;
+
+    margin-block-end: 1em;
+
+    margin-inline-start: 0px;
+
+    margin-inline-end: 0px;
+
+}
+
+.letter .info i {
+
+    margin-top: 2px;
+
+    margin-right: 12px;
+
+}
+
+.workitem-icon__story {
+
+    background-color: #3582FB;
+
+}
+
+.workitem-icon, .workitem-icon__mini {
+
+    min-width: 10px;
+
+    line-height: 16px;
+
+    vertical-align: middle;
+
+    font-size: 12px;
+
+    font-style: normal;
+
+    display: inline;
+
+    color: #fff;
+
+    border-radius: 3px;
+
+    padding: 3px 4px 1px;
+
+    zoom: .7;
+
+    text-align: center;
+
+    text-transform: Uppercase;
+
+    font-weight: normal;
+
+}
+
+a {
+
+    text-decoration: none;
+
+    color: #3582fb;
+    font-size: 14px;
+
+}
+
+.letter .date .letter-company-name {
+
+    max-width: 130px;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+}
+
+.clearfix:after {
+
+    content: ".";
+
+    display: block;
+
+    height: 0;
+
+    clear: both;
+
+    visibility: hidden;
+
+    overflow: hidden;
+
+    font-size: 0;
+
+
+}
+.avatar-letter-list .avatar-text-default{
+    line-height: 48px;
+    font-size: 24px;
+    height: 50px;
+}
+.avatar-letter-list .avatar-text-default .avatar-default-name {
+
+    color: #fff;
+
+    display: inline-block;
+
+    width: 100%;
+
+    height: 48px;
+
+    line-height: 48px;
+
+    transform: scale(.8, .8);
+
+    -webkit-transform: scale(.8, .8);
+
+    -ms-transform: scale(.8, .8);
+
+    -o-transform: scale(.8, .8);
+
+    -moz-transform: scale(.8, .8);
+
+    white-space: nowrap;
+
+}
+
+.letter .user span {
+
+    display: inline-block;
+
+    width: 150px;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    margin-left: 10px;
+
+    white-space: nowrap;
+
+}
+.workitem-icon__bug {
+
+    background-color: #F85E5E;
+
+}
+.workitem-icon__bug::before{
+    content: 'BUG';
+}

src/components/WorkmessagePanel/index.jsx

@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+import './WorkmessagePanel.css'
+export default class WorkmessagePanel extends Component {
+  render() {
+    return (
+        <div className='message'>
+            <div className='title'>
+                <h1><i className="ico-bell-big-gray"></i>消息中心</h1>
+            </div>
+            <div className='letter-list'>
+                <div className="letter d_1 clearfix">
+
+                    <div className="tag"><i className="ico-tip-new"></i></div>
+
+                    <div className="user">
+
+                        <div className="avatar-container j-left-nav-avatar-container avatar-letter-list">
+
+                            <i style={{fontStyle:'normal'}} className="avatar-text-default  " title="晓明">
+
+                                <span className="avatar-default-name">
+
+                                晓明	</span>
+
+                            </i>
+
+                          
+
+                        </div>
+
+                        <span className="from-nick" title="方晓明(方晓明)">方晓明(方晓明)</span>
+
+                    </div>
+
+                    <div className="info">
+
+                        <p className="title">更新了工单描述，新状态为已更新</p>
+
+                        <p><i className="workitem-icon workitem-icon__story">STORY</i><a href="" target="_blank">NAS本地化存储-若干功能需要优化</a></p>
+
+                    </div>
+
+                    <div className="date">
+
+                        <p className="item">05-18 10:00:20</p>
+
+                                    <p className="item letter-company-name" title="Miton光电">来自：Miton光电</p>
+
+                    </div>  
+
+                </div>
+                
+
+                <div className="letter d_2 clearfix">
+
+                    <div className="tag"><i className="ico-tip-new"></i></div>
+
+                    <div className="user">
+
+                         <div className="avatar-container j-left-nav-avatar-container avatar-letter-list">
+
+                            <i style={{fontStyle:'normal'}} className="avatar-text-default  " title="李红">
+
+                                <span className="avatar-default-name">
+
+                                 李红	</span>
+
+                             </i>
+
+                            
+
+                        </div>
+
+                         <span className="from-nick" title="李红(李红)">李红(李红)</span>
+
+                    </div>
+
+                    <div className="info">
+
+                        <p className="title">给您分配了一个缺陷，状态为重新打开</p>
+
+                        <p><i className="workitem-icon workitem-icon__bug"></i><a href="" target="_blank">【内网局域网】选择部门切换时，没有添加分配功能</a></p>
+
+                    </div>
+
+                    <div className="date">
+
+                        <p className="item">03-31 10:14:01</p>
+
+                         <p className="item letter-company-name" title="宁德时代">来自：宁德时代</p>
+
+                    </div>
+
+                </div>
+
+
+
+            </div>
+        </div>
+    )
+  }
+}

src/components/WorktableDetail/index.jsx

@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export default class WorktableDetail extends Component {
+  render() {
+    return (
+      <div>WorktableDetail</div>
+    )
+  }
+}

src/components/WorktableList/WorktableList.css

@@ -0,0 +1,270 @@
+/* list样式 */
+.worktable-list {
+
+    position: fixed;
+
+    top: 14px;
+
+    left: 75px;
+
+    bottom: 14px;
+
+    background: #fff;
+
+    width: 250px;
+
+    box-shadow: 0 0 10px rgba(128,145,165,0.2);
+
+    transition: width 300ms ease;
+
+    z-index: 99;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list {
+
+    overflow: hidden;
+
+    padding: 0;
+
+}
+
+ul {
+
+    list-style: none;
+
+}
+
+li, p, ul {
+
+    margin: 0;
+
+    padding: 0;
+
+    list-style: none;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item:first-child {
+
+    padding: 8px 0;
+
+    border-bottom: 1px solid #e8eaee;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item {
+
+    cursor: pointer;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item a {
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: block;
+
+    height: 100%;
+
+    width: 100%;
+
+    padding-left: 20px;
+
+}
+
+a, a:hover {
+
+    text-decoration: none;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item-logo {
+
+    position: absolute;
+
+    display: inline-block;
+
+    font-size: 16px;
+
+    left: 20px;
+
+    top: 10px;
+
+    color: #8c95a8;
+
+    transition: left 300ms ease;
+
+}
+
+.font-public-add-small {
+
+    font-size: 17px;
+
+    color: #182b50;
+
+}
+
+.font-public {
+
+    vertical-align: middle;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item-text {
+
+    opacity: 1;
+
+    margin-left: 30px;
+
+    display: block;
+
+    color: #182b50;
+
+    font-size: 14px;
+
+    height: 38px;
+
+    line-height: 38px;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    transition: font-size 300ms ease,margin-left 300ms ease,opacity 300ms ease;
+
+}
+
+.font-public-add-small:after, .font-public-add-small-after {
+
+    /* content: "\EA07";
+     */
+     width: 27px;
+    content:  url("../../logo.svg");
+}
+
+.font-public:after, .font-public-after {
+
+    display: inline-block;
+
+    font-family: "public.iconfont";
+
+    font-style: normal;
+
+    font-weight: normal;
+
+    line-height: 1;
+
+    -webkit-font-smoothing: antialiased;
+
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item-logo {
+
+    position: absolute;
+
+    display: inline-block;
+
+    font-size: 16px;
+
+    left: 20px;
+
+    top: 10px;
+
+    color: #8c95a8;
+
+    transition: left 300ms ease;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item {
+
+    cursor: pointer;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item a {
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: block;
+
+    height: 100%;
+
+    width: 100%;
+
+    padding-left: 20px;
+
+}
+
+a {
+
+    color: #3582fb;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item-logo {
+
+    position: absolute;
+
+    display: inline-block;
+
+    font-size: 16px;
+
+    left: 70px;
+
+    top: 10px;
+
+    color: #8c95a8;
+
+    transition: left 300ms ease;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item.current-tab {
+
+    cursor: default;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item {
+
+    cursor: pointer;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item.current-tab a {
+
+    background-color: #e1ecfe !important;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item a {
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    display: block;
+
+    height: 100%;
+
+    width: 100%;
+
+    padding-left: 20px;
+
+}
+
+.worktable-wrap-outer .worktable-list .tab-list-item.current-tab .tab-list-item-logo, .worktable-wrap-outer .worktable-list .tab-list-item.current-tab .tab-list-item-text {
+
+    color: #3582fb;
+
+}

src/components/WorktableList/WorktableList.jsx

@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+
+export default class WorktableList extends Component {
+  render() {
+    return (
+      <div className="worktable-list">                      
+          <ul className="tab-list">
+
+                  <li id="quick-add" classNameName="tab-list-item " title="" data-workspace-id="">
+
+                  <a data-temp-title="创建工单项" theme="black" position="right" tipwidth="80" data-title="">
+
+                  <i className="tab-list-item-logo font-public font-public-add-small"></i>
+
+                  <span className="tab-list-item-text">创建工单项</span>
+
+                  </a>
+
+                  </li>
+
+
+                  <li className="tab-list-item ">
+
+                  <a href="https://www.tapd.cn/my_worktable/index/todo" data-temp-title="我的待办" theme="black" position="right" tipwidth="70" data-title="">
+
+                  <i className="tab-list-item-logo font font-my-todo"></i>
+
+                  <span className="tab-list-item-text">我的待办</span>
+
+                  </a>
+
+                  </li>
+
+                  <li className="tab-list-item ">
+
+                  <a href="https://www.tapd.cn/my_worktable/index/done" data-temp-title="我的已办" theme="black" position="right" tipwidth="70" data-title="">
+
+                  <i className="tab-list-item-logo font font-checkbox-round"></i>
+
+                  <span className="tab-list-item-text">我的已办</span>
+
+                  </a>
+
+                  </li>
+
+                  <li className="tab-list-item current-tab">
+
+                  <a href="https://www.tapd.cn/my_worktable/index/created" data-temp-title="我创建的" theme="black" position="right" tipwidth="70" data-title="">
+
+                  <i className="tab-list-item-logo font font-i-created"></i>
+
+                  <span className="tab-list-item-text">我创建的</span>
+
+                  </a>
+
+                  </li>
+
+
+            </ul>
+</div>
+    )
+  }
+}