diff --git a/accountLogin.html b/accountLogin.html
new file mode 100644
index 0000000..5c7ff26
--- /dev/null
+++ b/accountLogin.html
@@ -0,0 +1,522 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <title>插件模板</title>
+  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.css">
+  <!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
+  <!-- <script type="text/javascript" src="plugin.js"></script> -->
+</head>
+<body>
+  <div class="">
+    <div class="h-10 w-full flex justify-center items-center border-b-2">用户名登录</div>
+<!--    角色栏-->
+    <div class="w-full h-16 flex items-center border-b-2">
+      <div class="p-2 m-4">项目经理</div>
+      <div class="p-2 m-4 border-b-2 border-blue-500 text-blue-400">运维</div>
+    </div>
+
+    <div class="w-full p-4 bg-gray-100">
+<!--      日常任务面板-->
+      <div class="content p-3 h-46 bg-white rounded-lg">
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 bg-gray-100"></div>
+      </div>
+    </div>
+<!--    <div class="w-full h-8 bg-blue-500 text-white pl-4 flex items-center">2021年30周</div>-->
+    <div class="task-bar h-96 w-full bg-gray-100 p-4">
+      <div class="flex mb-3">
+<!--        序号-->
+        <div class="flex flex-col items-center">
+          <div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
+          <div class="w-8 flex-1 flex flex-col items-center">
+            <div class="w-0.5 flex-1 bg-gray-300"></div>
+          </div>
+        </div>
+
+        <div class="flex-1">
+<!--          定期任务面板-->
+          <div class="rounded-lg ml-4 bg-white p-3">
+<!--            示例插件1-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
+<!--            示例插件2 id=100-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
+
+            <div>
+              <form action="">
+                <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <input class="text-base" style="outline: none;" id="uname" type="text" placeholder="请输入用户名">
+                  <div id="unameStr" class="text-xs text-red-500"></div>
+                </div>
+	              <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <input class="text-base" style="outline: none;" id="password" type="text" placeholder="请输入密码">
+                  <div id="passWordStr" class="text-xs text-red-500"></div>
+                </div>
+                <div class="flex flex-nowrap flex-row-reverse">
+                  <div class="flex-sub"></div>
+                  <div class="text-xs text-gray-400 mt-2">忘记密码</div>
+                </div>
+              </form>
+
+              <div class="mt-9">
+                <button class="bg-blue-500 py-1 w-full rounded text-white" id="register">立即登录</button>
+              </div>
+
+              <div class="flex justify-between mt-3">
+                <div class="text-sm" id="jumpRigister" style="color: #2885ed"> 新用户注册</div>
+                <div class="text-sm" id="jumpLogin" style="color: #2885ed">手机号登录 </div>
+              </div>
+            </div>
+
+
+            <script>
+              // 跳转到手机号登录
+              var jumpLogin=document.querySelector('#jumpLogin')
+              jumpLogin.onclick=function(){
+                window.location.href='./index.html'
+              }
+
+              // 跳转到新用户注册页面
+              var jumpRigister=document.querySelector('#jumpRigister')
+              jumpRigister.onclick=function(){
+                window.location.href='./rigister.html'
+              }
+                var reguname=/^[a-zA-Z0-9._-]{2,20}$/
+                var regpassword=/^[a-zA-Z0-9._-]{6,20}$/
+                var register=document.querySelector('#register')
+                var uname=document.querySelector('#uname')
+                var password=document.querySelector('#password')
+                var unameStr=document.querySelector('#unameStr')
+                var passWordStr=document.querySelector('#passWordStr')
+
+                register.onclick=function(){
+                  if (!uname.value) {
+                    unameStr.innerHTML='请输入用户名'
+                  }else if (!reguname.test(uname.value)){
+                    unameStr.innerHTML='用户名长度在2到20个字符'
+                  }else {
+                    unameStr.innerHTML=''
+                  }
+
+                  if (!password.value){
+                    passWordStr.innerHTML='请输入密码'
+                  }else if(!regpassword.test(password.value)){
+                    passWordStr.innerHTML='密码长度在6到20个字符'
+                  }else{
+                    passWordStr.innerHTML=''
+                  }
+                }
+
+                /* uname.onblur=function(){
+                  if (!this.value){
+                    unameStr.innerHTML='请输入用户名'
+                  }else if(!reguname.test(this.value)){
+                    unameStr.innerHTML='用户名长度在2到20个字符'
+                  }else{
+                    unameStr.innerHTML=''
+                  }
+                }
+                password.onblur=function(){
+                  if (!this.value){
+                    passWordStr.innerHTML='请输入密码'
+                  }else if(!regpassword.test(this.value)){
+                    passWordStr.innerHTML='密码长度在6到20个字符'
+                  }else{
+                    passWordStr.innerHTML=''
+                  }
+                } */
+
+              var p1432643387798069248 = {
+                token: '',
+                projectId: '',
+                roleId: '',
+                dom: '',
+                lists:  [],
+                currentIndex: '',
+                memberId: '', // 打卡人id
+                checkerId: '', // 审核员id
+                checkerName: '', // 审核员
+                id: '', // 记录id
+
+                init() {
+                  this.dom = document.querySelector("div[data-root=p1432643387798069248]");
+                  var domBox = this.dom.parentNode;
+                  var title = this.dom.querySelector('.title');
+
+                  // 获取父元素携带的参数
+                  var userId = domBox.getAttribute("data-uid");
+                  this.projectId = domBox.getAttribute("data-pid");
+                  this.roleId = domBox.getAttribute("data-rid");
+                  // 初始化的时候 获取token
+                  this.getTokenByUserId(userId);
+                },
+
+                // 获取token
+                getTokenByUserId(userId){
+                  var that = this
+                  fetch(`https://www.tall.wiki/gateway/tall/v1.0/users/userId?userId=${userId}`)
+                  .then(function(response) {
+                    return response.json();
+                  })
+                  .then(function(res) {
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                        that.token = data.token;
+                        // 查询考勤信息
+                        that.getClockQuery()
+                      } else {
+                        console.log('msg: ', msg);
+                      }
+                  });
+                },
+
+              /**
+               * 批量查询打卡信息
+               * @param {string} projectId 项目id
+               * @param {Array} codeList
+               */
+                getClockQuery() {
+                  var that = this
+                  var timer = null;
+                  let d = new Date()
+                  let startTime = new Date(d).getTime()
+                  const params = JSON.stringify({
+                    param: { projectId: that.projectId,roleId: that.roleId, memberIdList: [], startTime, endTime: startTime  }
+                  });
+                  var url = 'https://www.tall.wiki/gateway/defaultwbs/clock/query';
+                  fetch(url, {
+                    method: 'POST',
+                    mode: 'cors',
+                    body: params,
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
+                    })
+                  }).then(function(response) {
+                    return response.json();
+                  }).catch(function(error){
+                    console.error('Error:', error)
+                  }).then(function(res){
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                        if(data && data.length && data[0].recordList && data[0].recordList.length){
+                          that.memberId = data[0].recordList[0].memberId
+                          that.id = data[0].recordList[0].id
+                          // 审核人
+                          if(data[0].recordList[0].lastCheckerId){
+                            that.checkerId = data[0].recordList[0].lastCheckerId
+                          }else if(data[0].recordList[0].checkerId){
+                            that.checkerId = data[0].recordList[0].checkerId
+                          }else{
+                            that.checkerId = ''
+                          }
+
+                          if(data[0].recordList[0].lastCheckerName){
+                            that.checkerName = data[0].recordList[0].lastCheckerName
+                          }else if(data[0].recordList[0].checkerName){
+                            that.checkerName = data[0].recordList[0].checkerName
+                          }else{
+                            that.checkerName = ''
+                          }
+
+                          let morning = that.format(data[0].recordList[0].morning -0)
+                          let night = that.format(data[0].recordList[0].night -0)
+                          let morningStatus = data[0].recordList[0].morningStatus
+                          let nightStatus = data[0].recordList[0].nightStatus
+                          that.setDate(morning,morningStatus,night,nightStatus)
+                        }
+                        that.getQueryChecker()
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  })
+                },
+
+                /**
+               * 查询项目成员列表
+               * @param {string} projectId 项目id
+               * @param {Array} codeList
+               */
+                getQueryChecker() {
+                  var that = this
+                  var timer = null;
+                  let d = new Date()
+                  const params = JSON.stringify({
+                    param: { projectId: that.projectId }
+                  });
+                  var url = 'https://www.tall.wiki/gateway/defaultwbs/deliver/queryChecker';
+                  fetch(url, {
+                    method: 'POST',
+                    mode: 'cors',
+                    body: params,
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
+                    })
+                  }).then(function(response) {
+                    return response.json();
+                  }).catch(function(error){
+                    console.error('Error:', error)
+                  }).then(function(res){
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                      for(var i = 0; i < data.length; i++){
+                        data[i].choose = true
+                        that.lists.push(data[i])
+                      }
+                      // 设置默认检查人
+                      that.checkerName = that.checkerName ? that.checkerName : data[0].name
+                      that.checkerId = that.checkerId ? that.checkerId : data[0].memberId
+                      var startBtn = that.dom.querySelector('.startBtn');
+                      startBtn.innerHTML = that.checkerName;
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  })
+                },
+
+                /**
+                 * 打卡
+                 * @param {string} checkerId 审核员id
+                 * @param {string} clockType 打卡类型 0-早,1-晚
+                 * @param {string} dateTime 打卡日期
+                 * @param {string} id 记录id(没有则不传)
+                 * @param {string} memberId 成员id
+                 */
+                punch(clockType){
+                  var that = this
+                  let { checkerId, id, memberId  } = that
+                  let d = new Date()
+                  let dateTime = new Date(d).getTime()
+                  const params = JSON.stringify({
+                    param: { checkerId, id, memberId, dateTime, clockType }
+                  });
+                  var url = 'https://www.tall.wiki/gateway/defaultwbs/clock/punch';
+                  fetch(url, {
+                    method: 'POST',
+                    mode: 'cors',
+                    body: params,
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
+                    })
+                  }).then(function(response) {
+                    return response.json();
+                  }).catch(function(error){
+                    console.error('Error:', error)
+                  }).then(function(res){
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                      // 查询考勤信息
+                      that.getClockQuery()
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  })
+                },
+
+
+                // 显示选择框
+                show(){
+                  var statusChoose = this.dom.querySelector('.statusChoose');
+                  statusChoose.style.display='block';
+                  var list = ''
+                  for (let i=0;i < this.lists.length; i++) {
+                      list += `<li class="py-3" onclick="p1432643387798069248.chooseItem(${i})">` + this.lists[i].name + '</li>';
+                  }
+                  var ul = this.dom.querySelector('ul');
+                  ul.innerHTML = list
+                },
+
+                // 选择
+                chooseItem(index){
+                  this.currentIndex = index;
+                  var lis = this.dom.querySelectorAll('li');
+                  for (var i = 0; i < lis.length; i++){
+                    var item = lis[i];
+                    if(i === index){
+                      item.classList.add('text-white');
+                      item.style.backgroundColor = '#3b82f6';
+                    }else{
+                      item.classList.remove('text-white');
+                      item.style.backgroundColor = '#fff';
+                    }
+                  }
+                },
+
+                /**
+                 * 确定 选择审核人
+                 * @param { Array } codeAndAnswerList code和答案
+                 * @param { String } projectId 项目ID
+                 * @param { Number } codeAndAnswerList 提交人类型（0平车 1人）
+                 */
+                choose(){
+                  const that = this;
+                  const { dom } = that;
+                  var startBtn = dom.querySelector('.startBtn');
+                  startBtn.innerHTML = that.lists[that.currentIndex].name;
+                  that.checkerId = that.lists[that.currentIndex].memberId
+                  that.hide()
+                },
+
+                // 界面渲染 0未打卡,1已打卡,2驳回,3审核通过
+                setDate(morning,morningStatus,night,nightStatus) {
+                  const { dom } = this;
+                  var morningClockBtn = dom.querySelector('.morningClockBtn');
+                  var morningClockText = dom.querySelector('.morningClockText');
+                  var morningDot = dom.querySelector('.morningDot');
+                  var morningClockAgree = dom.querySelector('.morningClockAgree');
+                  var morningClockReject = dom.querySelector('.morningClockReject');
+                  if(morningStatus === 0){
+                    morningClockBtn.style.display='block';
+                    morningClockText.style.display='none';
+                    morningDot.style.display='none';
+                    morningClockAgree.style.display='none';
+                    morningClockReject.style.display='none';
+                  }
+                  if(morningStatus === 1){
+                    morningClockBtn.style.display='none';
+                    morningClockText.style.display='block';
+                    morningDot.style.display='block';
+                    morningClockAgree.style.display='none';
+                    morningClockReject.style.display='none';
+                    morningClockText.innerHTML = morning;
+                  }
+                  if(morningStatus === 2){
+                    morningClockBtn.style.display='none';
+                    morningClockText.style.display='none';
+                    morningDot.style.display='none';
+                    morningClockAgree.style.display='none';
+                    morningClockReject.style.display='block';
+                    morningClockReject.innerHTML = morning;
+                  }
+                  if(morningStatus === 3){
+                    morningClockBtn.style.display='none';
+                    morningClockText.style.display='none';
+                    morningDot.style.display='none';
+                    morningClockAgree.style.display='block';
+                    morningClockReject.style.display='none';
+                    morningClockAgree.innerHTML = morning;
+                  }
+                  var nightClockBtn = dom.querySelector('.nightClockBtn');
+                  var nightClockText = dom.querySelector('.nightClockText');
+                  var nightDot = dom.querySelector('.nightDot');
+                  var nightClockAgree = dom.querySelector('.nightClockAgree');
+                  var nightClockReject = dom.querySelector('.nightClockReject');
+                  if(nightStatus === 0){
+                    nightClockBtn.style.display='block';
+                    nightClockText.style.display='none';
+                    nightDot.style.display='none';
+                    nightClockAgree.style.display='none';
+                    nightClockReject.style.display='none';
+                  }
+                  if(nightStatus === 1){
+                    nightClockBtn.style.display='none';
+                    nightClockText.style.display='block';
+                    nightDot.style.display='block';
+                    nightClockAgree.style.display='none';
+                    nightClockReject.style.display='none';
+                    nightClockText.innerHTML = night;
+                  }
+                  if(nightStatus === 2){
+                    nightClockBtn.style.display='none';
+                    nightClockText.style.display='none';
+                    nightDot.style.display='none';
+                    nightClockAgree.style.display='none';
+                    nightClockReject.style.display='block';
+                    nightClockReject.innerHTML = night;
+                  }
+                  if(nightStatus === 3){
+                    nightClockBtn.style.display='none';
+                    nightClockText.style.display='none';
+                    nightDot.style.display='none';
+                    nightClockAgree.style.display='block';
+                    nightClockReject.style.display='none';
+                    nightClockAgree.innerHTML = night;
+                  }
+
+                  var startBtnBox = dom.querySelector('.startBtnBox');
+                  var startText = dom.querySelector('.startText');
+                  if(morningStatus && morningStatus !== 0 && nightStatus && nightStatus!== 0){
+                    startBtnBox.style.display='none';
+                    startText.style.display='block';
+                    startText.innerHTML = this.checkerName;
+                  }
+                },
+
+                // 取消
+                hide(){
+                  var statusChoose = this.dom.querySelector('.statusChoose');
+                  statusChoose.style.display='none';
+                },
+
+                // 时间戳转时间格式
+                format(shijianchuo){
+                  //shijianchuo是整数，否则要parseInt转换
+                  var time = new Date(shijianchuo);
+                  // var y = time.getFullYear();
+                  // var m = time.getMonth()+1;
+                  // var d = time.getDate();
+                  var h = time.getHours();
+                  var mm = time.getMinutes();
+                  // var s = time.getSeconds();
+                  return this.add0(h)+':' + this.add0(mm);
+                },
+
+                add0(m){return m<10?'0'+m:m },
+
+                // 跳转详情
+                jumpDetails() {
+                  const pId = this.dom.parentNode.getAttribute('data-pid');
+                  const uId = this.dom.parentNode.getAttribute('data-uid');
+                  const rId = this.dom.parentNode.getAttribute('data-rid');
+                  location.href = `https://www.tall.wiki/checkwork/?pid=${pId}&uid=${uId}&rid=${rId}`;
+                }
+              }
+              p1432643387798069248.init()
+            </script>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex mb-3">
+        <!--        序号-->
+        <div class="flex flex-col items-center">
+          <div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
+          <div class="w-8 flex-1 flex flex-col items-center">
+            <div class="w-0.5 flex-1 bg-gray-300"></div>
+          </div>
+        </div>
+
+        <div class="flex-1">
+          <!--          定期任务面板-->
+          <div class="rounded-lg ml-4 bg-white p-3">
+            <!--            示例插件1-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
+            <!--            示例插件2 id=100-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
+            <script>
+              const p100 = {
+                name: 'hello tall plugin',
+                show() {
+                  alert(this.name)
+                }
+              }
+            </script>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<style>
+.content, .task-bar{
+  overflow-y: scroll;
+}
+.content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
+  display: none;
+}
+</style>
+</html>
diff --git a/index.html b/index.html
index 3662e6e..9b4e7fe 100644
--- a/index.html
+++ b/index.html
@@ -47,56 +47,90 @@
 <!--            示例插件2 id=100-->
             <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
 
-            <div data-tname="考勤" data-pid="1433332016270811136" data-uid="1217647686598135808" data-rid="rid333" data-tid="tid444" data-did="did555" style="height:50px;width:100%">
-              <!-- 考勤插件 -->
-              <div data-root="p1432643387798069248" class="flex flex-row justify-space items-center" style="height:100%;width:100%;">
-                <div class="title"></div>
-                <div class="flex flex-1 flex-row">
-                  <!-- 早打卡 -->
-                  <div class="flex-1">
-                    <button class="morningClockBtn bg-blue-500 text-xs rounded-md py-1 px-3 text-white" onclick="p1432643387798069248.punch(0)">早打卡</button>
-                    <div style="position: relative;float: left;">
-                      <div class="morningClockText" style="display: none;font-weight: 700;"></div>
-                      <span class="morningDot rounded-full bg-red-500" style="position: absolute;top: 0;right: -10px;width: 6px;height: 6px;display: none;"></span>
-                    </div>
-                    <div class="morningClockReject" style="text-decoration:line-through;color: #f00;font-weight: 700;display: none;"></div>
-                    <div class="morningClockAgree" style="color: #13acc4;font-weight: 700;display: none;"></div>
-                  </div>
-                  <!-- 晚打卡 -->
-                  <div class="flex-1">
-                    <button class="nightClockBtn bg-blue-500 text-xs rounded-md py-1 px-3 text-white" onclick="p1432643387798069248.punch(1)">晚打卡</button>
-                    <div style="position: relative;float: left;">
-                      <span class="nightClockText" style="display: none;font-weight: 700;"></span>
-                      <span class="nightDot rounded-full bg-red-500" style="position: absolute;top: 0;right: -10px;width: 6px;height: 6px;display: none;"></span>
-                    </div>
-                    <span class="nightClockReject" style="text-decoration:line-through;color: #f00;font-weight: 700;display: none;"></span>
-                    <span class="nightClockAgree" style="color: #13acc4;font-weight: 700;display: none;"></span>
-                  </div>
+            <div>
+              <form action="">
+                <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <input class="text-base" style="outline: none;" id="phone" type="text" placeholder="请输入手机号">
+                  <div id="phoneStr" class="text-xs text-red-500"></div>
                 </div>
-                <div class="flex flex-nowrap border py-1 px-3 rounded-md startBtnBox" onclick="p1432643387798069248.show()">
-                    <div class="startBtn mr-1">审核人</div>
-                    <img style="width:15px" src="https://www.tall.wiki/staticrec/icon/down.svg" />
+	              <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <div class="flex justify-between">
+                    <input class="text-base" style="outline: none;" id="verificationCodeValue" type="text" placeholder="请输入图形验证码">
+                    <!-- <div>1234</div> -->
+                  </div>
+                  <div id="verificationCodeValueStr" class="text-xs text-red-500"></div>
                 </div>
-                <div class="startText mr-1" style="display: none;">审核人</div>
-
-                <div class="flex flex-nowrap ml-4" onclick="p1432643387798069248.jumpDetails(this)">
-                  <img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
+	              <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                      <div class="flex justify-between">
+                        <input class="text-base w-28" style="outline: none;" id="smsCode" type="text" placeholder="请输入验证码">
+                        <button class="text-xs bg-white border-yz border-blue-400  text-blue-400">获取验证码</button>
+                      </div>
+                      <div id="smsCodeStr" class="text-xs text-red-500"></div>
                 </div>
-                <div class="w-screen h-screen fixed z-10 statusChoose bg-black bg-opacity-50" style="display:none;top: 0;left: 0;">
-                  <div class="flex flex-col absolute w-full bg-white" style="bottom: 0;">
-                    <div class="flex flex-row justify-between px-5 py-4">
-                      <span class="text-gray-400" onclick="p1432643387798069248.hide()">取消</span>
-                      <span class="font-bold">选择审核人</span>
-                      <span class="text-blue-500" onclick="p1432643387798069248.choose()">确定</span>
-                    </div>
-                    <div class="bg-gray-200" style="width:100%;height: 1px"></div>
-                    <ul class="flex flex-col text-center" style="height: 240px;overflow-y: auto;"></ul>
-                  </div>
                 </div>
+
+              </form>
+
+              <div class="mt-9">
+                <button class="bg-blue-500 py-1 w-full rounded text-white" id="register">立即登录</button>
+              </div>
+
+              <div class="flex justify-between mt-3">
+                <div class="text-sm" id="jumpRigister" style="color: #2885ed"> 新用户注册</div>
+                <div class="text-sm" id="jumpAccountLogin" style="color: #2885ed">用户名登录 </div>
               </div>
             </div>
 
+
             <script>
+              // 跳转到用户名登录
+              var jumpAccountLogin=document.querySelector('#jumpAccountLogin')
+              jumpAccountLogin.onclick=function(){
+                window.location.href='./accountLogin.html'
+              }
+              // 跳转到新用户注册页面
+              var jumpRigister=document.querySelector('#jumpRigister')
+              jumpRigister.onclick=function(){
+                window.location.href='./rigister.html'
+              }
+              var regphone=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+              var regverificationCodeValue=/^[0-9]*$/
+              var phone=document.querySelector('#phone')
+              var verificationCodeValue=document.querySelector('#verificationCodeValue')
+              var smsCode=document.querySelector('#smsCode')
+              var phoneStr=document.querySelector('#phoneStr')
+              var verificationCodeValueStr=document.querySelector('#verificationCodeValueStr')
+              var smsCodeStr=document.querySelector('#smsCodeStr')
+              var register=document.querySelector('#register')
+
+              register.onclick=function(){
+                  if (!phone.value) {
+                    phoneStr.innerHTML='请输入手机号'
+                  }else if (!regphone.test(phone.value)){
+                    phoneStr.innerHTML='手机号码不正确'
+                  }else {
+                    phoneStr.innerHTML=''
+                  }
+
+                  if (!verificationCodeValue.value){
+                    verificationCodeValueStr.innerHTML='请输入图形验证码'
+                  }else if(!regverificationCodeValue.test(verificationCodeValue.value)){
+                    verificationCodeValueStr.innerHTML='图形验证码只能为数字'
+                  }else{
+                    verificationCodeValueStr.innerHTML=''
+                  }
+
+                  if (!smsCode.value){
+                    smsCodeStr.innerHTML='请输入验证码'
+                  }else if (!regverificationCodeValue.test(smsCode.value)){
+                    smsCodeStr.innerHTML='验证码只能为数字'
+                  }else {
+                    smsCodeStr.innerHTML=''
+                  }
+                }
+
+
+
               var p1432643387798069248 = {
                 token: '',
                 projectId: '',
@@ -434,7 +468,7 @@
                 add0(m){return m<10?'0'+m:m },
 
                 // 跳转详情
-                jumpDetails(that) {
+                jumpDetails() {
                   const pId = this.dom.parentNode.getAttribute('data-pid');
                   const uId = this.dom.parentNode.getAttribute('data-uid');
                   const rId = this.dom.parentNode.getAttribute('data-rid');
@@ -484,5 +518,12 @@
 .content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
   display: none;
 }
+.code-image {
+  width: 200rpx;
+  height: 70rpx;
+}
+.border-yz{
+  border: 1px solid;
+}
 </style>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 5d62d9f..f3ffd01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,5 @@
 {
   "name": "plugin-templete",
   "version": "1.0.0",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "version": "1.0.0",
-      "license": "ISC"
-    }
-  }
+  "lockfileVersion": 1
 }
diff --git a/rigister.html b/rigister.html
new file mode 100644
index 0000000..771148d
--- /dev/null
+++ b/rigister.html
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <title>插件模板</title>
+  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.css">
+  <!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
+  <!-- <script type="text/javascript" src="plugin.js"></script> -->
+</head>
+<body>
+  <div class="">
+    <div class="h-10 w-full flex justify-center items-center border-b-2">项目名称</div>
+<!--    角色栏-->
+    <div class="w-full h-16 flex items-center border-b-2">
+      <div class="p-2 m-4">项目经理</div>
+      <div class="p-2 m-4 border-b-2 border-blue-500 text-blue-400">运维</div>
+    </div>
+
+    <div class="w-full p-4 bg-gray-100">
+<!--      日常任务面板-->
+      <div class="content p-3 h-46 bg-white rounded-lg">
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 bg-gray-100"></div>
+      </div>
+    </div>
+<!--    <div class="w-full h-8 bg-blue-500 text-white pl-4 flex items-center">2021年30周</div>-->
+    <div class="task-bar h-96 w-full bg-gray-100 p-4">
+      <div class="flex mb-3">
+<!--        序号-->
+        <div class="flex flex-col items-center">
+          <div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
+          <div class="w-8 flex-1 flex flex-col items-center">
+            <div class="w-0.5 flex-1 bg-gray-300"></div>
+          </div>
+        </div>
+
+        <div class="flex-1">
+<!--          定期任务面板-->
+          <div class="rounded-lg ml-4 bg-white p-3">
+<!--            示例插件1-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
+<!--            示例插件2 id=100-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
+
+            <div>
+              <form action="">
+                <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <input class="text-sm" style="outline: none;" id="phone" type="text" placeholder="请输入手机号">
+                  <div id="phoneStr" class="text-xs text-red-500"></div>
+                </div>
+	              <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <input class="text-sm" style="outline: none;" id="verificationCodeValue" type="text" placeholder="请输入图形验证码">
+                  <!-- <image slot="right" mode="aspectFit" class="code-image"></image> -->
+                  <div id="verificationCodeValueStr" class="text-xs text-red-500"></div>
+                </div>
+	              <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <div class="flex justify-between">
+                    <input class="text-base w-28" style="outline: none;" id="smsCode" type="text" placeholder="请输入验证码">
+                    <button class="text-xs bg-white border-yz border-blue-400  text-blue-400">获取验证码</button>
+                  </div>
+                  <div id="smsCodeStr" class="text-xs text-red-500"></div>
+                </div>
+                <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <input class="text-sm" style="outline: none;" id="uname" type="text" placeholder="请设置用户名">
+                  <div id="unameStr" class="text-xs text-red-500"></div>
+
+                </div>
+	              <div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
+                  <input class="text-sm" style="outline: none;" id="password" type="text" placeholder="请设置密码">
+                  <div id="passWordStr" class="text-xs text-red-500"></div>
+                </div>
+
+              </form>
+
+              <div class="mt-9">
+                <button class="bg-blue-500 py-1 w-full rounded text-white" id="register">注册</button>
+              </div>
+
+              <div class="flex-direction mt-3.5">
+                <div class="flex flex-nowrap">
+                  <input type="checkbox">
+                  <div class="text-xs ml-2">
+                    已阅读并同意
+                    <span class="text-xs" id="agreement" style="color: #2885ed">《协议名称》</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex justify-between mt-7">
+                <div></div>
+                <div class="text-sm" id="jumpAccountLogin" style="color: #2885ed">已有账号，去登录</div>
+              </div>
+            </div>
+
+
+            <script>
+              // 跳转到用户名登录
+              var jumpAccountLogin=document.querySelector('#jumpAccountLogin')
+              jumpAccountLogin.onclick=function(){
+                window.location.href='./accountLogin.html'
+              }
+              // 跳转到用户协议
+              var agreement = document.querySelector('#agreement')
+              agreement.onclick=function(){
+                window.location.href='https://www.yuque.com/docs/share/2de362e1-33fb-460a-92ca-5e8ef57f6d59?# 《时物链条用户协议》'
+              }
+
+              var reguname=/^[a-zA-Z0-9._-]{2,20}$/
+              var regpassword=/^[a-zA-Z0-9._-]{6,20}$/
+              var regphone=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+              regverificationCodeValue=/^[0-9]*$/
+              var phone=document.querySelector('#phone')
+              var verificationCodeValue=document.querySelector('#verificationCodeValue')
+              var smsCode=document.querySelector('#smsCode')
+              var phoneStr=document.querySelector('#phoneStr')
+              var verificationCodeValueStr=document.querySelector('#verificationCodeValueStr')
+              var smsCodeStr=document.querySelector('#smsCodeStr')
+              var register=document.querySelector('#register')
+              var uname=document.querySelector('#uname')
+              var password=document.querySelector('#password')
+              var unameStr=document.querySelector('#unameStr')
+              var passWordStr=document.querySelector('#passWordStr')
+
+              register.onclick=function(){
+                  if (!phone.value) {
+                    phoneStr.innerHTML='请输入手机号'
+                  }else if (!regphone.test(phone.value)){
+                    phoneStr.innerHTML='手机号码不正确'
+                  }else {
+                    phoneStr.innerHTML=''
+                  }
+
+                  if (!verificationCodeValue.value){
+                    verificationCodeValueStr.innerHTML='请输入图形验证码'
+                  }else if(!regverificationCodeValue.test(verificationCodeValue.value)){
+                    verificationCodeValueStr.innerHTML='图形验证码只能为数字'
+                  }else{
+                    verificationCodeValueStr.innerHTML=''
+                  }
+
+                  if (!smsCode.value){
+                    smsCodeStr.innerHTML='请输入验证码'
+                  }else if (!regverificationCodeValue.test(smsCode.value)){
+                    smsCodeStr.innerHTML='验证码只能为数字'
+                  }else {
+                    smsCodeStr.innerHTML=''
+                  }
+
+                  if (!uname.value) {
+                    unameStr.innerHTML='请输入用户名'
+                  }else if (!reguname.test(uname.value)){
+                    unameStr.innerHTML='用户名长度在2到20个字符'
+                  }else {
+                    unameStr.innerHTML=''
+                  }
+
+                  if (!password.value){
+                    passWordStr.innerHTML='请输入密码'
+                  }else if(!regpassword.test(password.value)){
+                    passWordStr.innerHTML='密码长度在6到20个字符'
+                  }else{
+                    passWordStr.innerHTML=''
+                  }
+                }
+
+                /* uname.onblur=function(){
+                  if (!this.value){
+                    unameStr.innerHTML='请输入用户名'
+                  }else if(!reguname.test(this.value)){
+                    unameStr.innerHTML='用户名长度在2到20个字符'
+                  }else{
+                    unameStr.innerHTML=''
+                  }
+                }
+                password.onblur=function(){
+                  if (!this.value){
+                    passWordStr.innerHTML='请输入密码'
+                  }else if(!regpassword.test(this.value)){
+                    passWordStr.innerHTML='密码长度在6到20个字符'
+                  }else{
+                    passWordStr.innerHTML=''
+                  }
+                } */
+
+              var p1432643387798069248 = {
+                token: '',
+                projectId: '',
+                roleId: '',
+                dom: '',
+                lists:  [],
+                currentIndex: '',
+                memberId: '', // 打卡人id
+                checkerId: '', // 审核员id
+                checkerName: '', // 审核员
+                id: '', // 记录id
+
+                init() {
+                  this.dom = document.querySelector("div[data-root=p1432643387798069248]");
+                  var domBox = this.dom.parentNode;
+                  var title = this.dom.querySelector('.title');
+
+                  // 获取父元素携带的参数
+                  var userId = domBox.getAttribute("data-uid");
+                  this.projectId = domBox.getAttribute("data-pid");
+                  this.roleId = domBox.getAttribute("data-rid");
+                  // 初始化的时候 获取token
+                  this.getTokenByUserId(userId);
+                },
+
+                // 获取token
+                getTokenByUserId(userId){
+                  var that = this
+                  fetch(`https://www.tall.wiki/gateway/tall/v1.0/users/userId?userId=${userId}`)
+                  .then(function(response) {
+                    return response.json();
+                  })
+                  .then(function(res) {
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                        that.token = data.token;
+                        // 查询考勤信息
+                        that.getClockQuery()
+                      } else {
+                        console.log('msg: ', msg);
+                      }
+                  });
+                },
+
+              /**
+               * 批量查询打卡信息
+               * @param {string} projectId 项目id
+               * @param {Array} codeList
+               */
+                getClockQuery() {
+                  var that = this
+                  var timer = null;
+                  let d = new Date()
+                  let startTime = new Date(d).getTime()
+                  const params = JSON.stringify({
+                    param: { projectId: that.projectId,roleId: that.roleId, memberIdList: [], startTime, endTime: startTime  }
+                  });
+                  var url = 'https://www.tall.wiki/gateway/defaultwbs/clock/query';
+                  fetch(url, {
+                    method: 'POST',
+                    mode: 'cors',
+                    body: params,
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
+                    })
+                  }).then(function(response) {
+                    return response.json();
+                  }).catch(function(error){
+                    console.error('Error:', error)
+                  }).then(function(res){
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                        if(data && data.length && data[0].recordList && data[0].recordList.length){
+                          that.memberId = data[0].recordList[0].memberId
+                          that.id = data[0].recordList[0].id
+                          // 审核人
+                          if(data[0].recordList[0].lastCheckerId){
+                            that.checkerId = data[0].recordList[0].lastCheckerId
+                          }else if(data[0].recordList[0].checkerId){
+                            that.checkerId = data[0].recordList[0].checkerId
+                          }else{
+                            that.checkerId = ''
+                          }
+
+                          if(data[0].recordList[0].lastCheckerName){
+                            that.checkerName = data[0].recordList[0].lastCheckerName
+                          }else if(data[0].recordList[0].checkerName){
+                            that.checkerName = data[0].recordList[0].checkerName
+                          }else{
+                            that.checkerName = ''
+                          }
+
+                          let morning = that.format(data[0].recordList[0].morning -0)
+                          let night = that.format(data[0].recordList[0].night -0)
+                          let morningStatus = data[0].recordList[0].morningStatus
+                          let nightStatus = data[0].recordList[0].nightStatus
+                          that.setDate(morning,morningStatus,night,nightStatus)
+                        }
+                        that.getQueryChecker()
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  })
+                },
+
+                /**
+               * 查询项目成员列表
+               * @param {string} projectId 项目id
+               * @param {Array} codeList
+               */
+                getQueryChecker() {
+                  var that = this
+                  var timer = null;
+                  let d = new Date()
+                  const params = JSON.stringify({
+                    param: { projectId: that.projectId }
+                  });
+                  var url = 'https://www.tall.wiki/gateway/defaultwbs/deliver/queryChecker';
+                  fetch(url, {
+                    method: 'POST',
+                    mode: 'cors',
+                    body: params,
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
+                    })
+                  }).then(function(response) {
+                    return response.json();
+                  }).catch(function(error){
+                    console.error('Error:', error)
+                  }).then(function(res){
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                      for(var i = 0; i < data.length; i++){
+                        data[i].choose = true
+                        that.lists.push(data[i])
+                      }
+                      // 设置默认检查人
+                      that.checkerName = that.checkerName ? that.checkerName : data[0].name
+                      that.checkerId = that.checkerId ? that.checkerId : data[0].memberId
+                      var startBtn = that.dom.querySelector('.startBtn');
+                      startBtn.innerHTML = that.checkerName;
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  })
+                },
+
+                /**
+                 * 打卡
+                 * @param {string} checkerId 审核员id
+                 * @param {string} clockType 打卡类型 0-早,1-晚
+                 * @param {string} dateTime 打卡日期
+                 * @param {string} id 记录id(没有则不传)
+                 * @param {string} memberId 成员id
+                 */
+                punch(clockType){
+                  var that = this
+                  let { checkerId, id, memberId  } = that
+                  let d = new Date()
+                  let dateTime = new Date(d).getTime()
+                  const params = JSON.stringify({
+                    param: { checkerId, id, memberId, dateTime, clockType }
+                  });
+                  var url = 'https://www.tall.wiki/gateway/defaultwbs/clock/punch';
+                  fetch(url, {
+                    method: 'POST',
+                    mode: 'cors',
+                    body: params,
+                    headers: new Headers({
+                      'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
+                    })
+                  }).then(function(response) {
+                    return response.json();
+                  }).catch(function(error){
+                    console.error('Error:', error)
+                  }).then(function(res){
+                    const { success, code, data, msg } = res;
+                    if (success && code === 200) {
+                      // 查询考勤信息
+                      that.getClockQuery()
+                    } else {
+                      console.log('msg: ', msg);
+                    }
+                  })
+                },
+
+
+                // 显示选择框
+                show(){
+                  var statusChoose = this.dom.querySelector('.statusChoose');
+                  statusChoose.style.display='block';
+                  var list = ''
+                  for (let i=0;i < this.lists.length; i++) {
+                      list += `<li class="py-3" onclick="p1432643387798069248.chooseItem(${i})">` + this.lists[i].name + '</li>';
+                  }
+                  var ul = this.dom.querySelector('ul');
+                  ul.innerHTML = list
+                },
+
+                // 选择
+                chooseItem(index){
+                  this.currentIndex = index;
+                  var lis = this.dom.querySelectorAll('li');
+                  for (var i = 0; i < lis.length; i++){
+                    var item = lis[i];
+                    if(i === index){
+                      item.classList.add('text-white');
+                      item.style.backgroundColor = '#3b82f6';
+                    }else{
+                      item.classList.remove('text-white');
+                      item.style.backgroundColor = '#fff';
+                    }
+                  }
+                },
+
+                /**
+                 * 确定 选择审核人
+                 * @param { Array } codeAndAnswerList code和答案
+                 * @param { String } projectId 项目ID
+                 * @param { Number } codeAndAnswerList 提交人类型（0平车 1人）
+                 */
+                choose(){
+                  const that = this;
+                  const { dom } = that;
+                  var startBtn = dom.querySelector('.startBtn');
+                  startBtn.innerHTML = that.lists[that.currentIndex].name;
+                  that.checkerId = that.lists[that.currentIndex].memberId
+                  that.hide()
+                },
+
+                // 界面渲染 0未打卡,1已打卡,2驳回,3审核通过
+                setDate(morning,morningStatus,night,nightStatus) {
+                  const { dom } = this;
+                  var morningClockBtn = dom.querySelector('.morningClockBtn');
+                  var morningClockText = dom.querySelector('.morningClockText');
+                  var morningDot = dom.querySelector('.morningDot');
+                  var morningClockAgree = dom.querySelector('.morningClockAgree');
+                  var morningClockReject = dom.querySelector('.morningClockReject');
+                  if(morningStatus === 0){
+                    morningClockBtn.style.display='block';
+                    morningClockText.style.display='none';
+                    morningDot.style.display='none';
+                    morningClockAgree.style.display='none';
+                    morningClockReject.style.display='none';
+                  }
+                  if(morningStatus === 1){
+                    morningClockBtn.style.display='none';
+                    morningClockText.style.display='block';
+                    morningDot.style.display='block';
+                    morningClockAgree.style.display='none';
+                    morningClockReject.style.display='none';
+                    morningClockText.innerHTML = morning;
+                  }
+                  if(morningStatus === 2){
+                    morningClockBtn.style.display='none';
+                    morningClockText.style.display='none';
+                    morningDot.style.display='none';
+                    morningClockAgree.style.display='none';
+                    morningClockReject.style.display='block';
+                    morningClockReject.innerHTML = morning;
+                  }
+                  if(morningStatus === 3){
+                    morningClockBtn.style.display='none';
+                    morningClockText.style.display='none';
+                    morningDot.style.display='none';
+                    morningClockAgree.style.display='block';
+                    morningClockReject.style.display='none';
+                    morningClockAgree.innerHTML = morning;
+                  }
+                  var nightClockBtn = dom.querySelector('.nightClockBtn');
+                  var nightClockText = dom.querySelector('.nightClockText');
+                  var nightDot = dom.querySelector('.nightDot');
+                  var nightClockAgree = dom.querySelector('.nightClockAgree');
+                  var nightClockReject = dom.querySelector('.nightClockReject');
+                  if(nightStatus === 0){
+                    nightClockBtn.style.display='block';
+                    nightClockText.style.display='none';
+                    nightDot.style.display='none';
+                    nightClockAgree.style.display='none';
+                    nightClockReject.style.display='none';
+                  }
+                  if(nightStatus === 1){
+                    nightClockBtn.style.display='none';
+                    nightClockText.style.display='block';
+                    nightDot.style.display='block';
+                    nightClockAgree.style.display='none';
+                    nightClockReject.style.display='none';
+                    nightClockText.innerHTML = night;
+                  }
+                  if(nightStatus === 2){
+                    nightClockBtn.style.display='none';
+                    nightClockText.style.display='none';
+                    nightDot.style.display='none';
+                    nightClockAgree.style.display='none';
+                    nightClockReject.style.display='block';
+                    nightClockReject.innerHTML = night;
+                  }
+                  if(nightStatus === 3){
+                    nightClockBtn.style.display='none';
+                    nightClockText.style.display='none';
+                    nightDot.style.display='none';
+                    nightClockAgree.style.display='block';
+                    nightClockReject.style.display='none';
+                    nightClockAgree.innerHTML = night;
+                  }
+
+                  var startBtnBox = dom.querySelector('.startBtnBox');
+                  var startText = dom.querySelector('.startText');
+                  if(morningStatus && morningStatus !== 0 && nightStatus && nightStatus!== 0){
+                    startBtnBox.style.display='none';
+                    startText.style.display='block';
+                    startText.innerHTML = this.checkerName;
+                  }
+                },
+
+                // 取消
+                hide(){
+                  var statusChoose = this.dom.querySelector('.statusChoose');
+                  statusChoose.style.display='none';
+                },
+
+                // 时间戳转时间格式
+                format(shijianchuo){
+                  //shijianchuo是整数，否则要parseInt转换
+                  var time = new Date(shijianchuo);
+                  // var y = time.getFullYear();
+                  // var m = time.getMonth()+1;
+                  // var d = time.getDate();
+                  var h = time.getHours();
+                  var mm = time.getMinutes();
+                  // var s = time.getSeconds();
+                  return this.add0(h)+':' + this.add0(mm);
+                },
+
+                add0(m){return m<10?'0'+m:m },
+
+                // 跳转详情
+                jumpDetails() {
+                  const pId = this.dom.parentNode.getAttribute('data-pid');
+                  const uId = this.dom.parentNode.getAttribute('data-uid');
+                  const rId = this.dom.parentNode.getAttribute('data-rid');
+                  location.href = `https://www.tall.wiki/checkwork/?pid=${pId}&uid=${uId}&rid=${rId}`;
+                }
+              }
+              p1432643387798069248.init()
+            </script>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex mb-3">
+        <!--        序号-->
+        <div class="flex flex-col items-center">
+          <div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
+          <div class="w-8 flex-1 flex flex-col items-center">
+            <div class="w-0.5 flex-1 bg-gray-300"></div>
+          </div>
+        </div>
+
+        <div class="flex-1">
+          <!--          定期任务面板-->
+          <div class="rounded-lg ml-4 bg-white p-3">
+            <!--            示例插件1-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
+            <!--            示例插件2 id=100-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
+            <script>
+              const p100 = {
+                name: 'hello tall plugin',
+                show() {
+                  alert(this.name)
+                }
+              }
+            </script>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<style>
+.content, .task-bar{
+  overflow-y: scroll;
+}
+.content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
+  display: none;
+}
+.code-image {
+  width: 200rpx;
+  height: 70rpx;
+}
+.border-yz{
+  border: 1px solid;
+}
+</style>
+</html>
