Fix front-end code specifications (#1726)

* Fix api url * Fixed DAG zoom in and zoom out nodes separated from arrows * Fix front-end code specifications * Fix front-end code specifications * Fix front-end code specifications
5 years ago · b8fa7dac9d
64 changed files with 250 additions and 269 deletions
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
@ -177,8 +177,6 @@ Dag.prototype.backfill = function (arg) {
      // Number of tree node levels
      let countTree = getLeafCountTree(datas[0])
      function getMaxFloor(treeData) {
-        let floor = 0
-        let v = this
        let max = 0
        function each (data, floor) {
          data.forEach(e => {
@ -224,9 +222,8 @@ Dag.prototype.backfill = function (arg) {
          return []
        }
        function toLine(data){
-          return data.reduce((arr, {id, name, targetarr, x, y, children = []}) =>
-          arr.concat([{id, name, targetarr, x, y}], toLine(children)), [])
-          return result;
+          return data.reduce((arrData, {id, name, targetarr, x, y, children = []}) =>
+          arrData.concat([{id, name, targetarr, x, y}], toLine(children)), [])
        }
        let listarr = toLine(datas);
        let listarrs = toLine(datas)
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
@ -317,6 +317,7 @@ svg path:hover {
 .jtk-demo-canvas {
  position: relative;
  height: 100%;
+  display: flex;
 }

 .jtk-bootstrap {
@ -359,10 +360,6 @@ svg path:hover {
  list-style-type: disc !important;
 }

-.jtk-demo-canvas {
-  display: flex;
-}
-
 .canvas-wide {
  padding-top: 10px;
  margin-left: 0;
@ -459,6 +456,12 @@ svg path:hover {
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
+  background-color: white;
+  opacity: 0.8;
+  padding: 0.3em;
+  border-radius: 0.5em;
+  border: 1px solid #346789;
+  cursor: pointer;
 }

 .aLabel.jtk-hover,
@ -485,14 +488,6 @@ svg path:hover {
  }
 }

-.aLabel {
-  background-color: white;
-  opacity: 0.8;
-  padding: 0.3em;
-  border-radius: 0.5em;
-  border: 1px solid #346789;
-  cursor: pointer;
-}

 .jtk-ep {
  .ep {
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@ -58,7 +58,7 @@
          </x-button>
          <span class="name">{{name}}</span>
          &nbsp;
-          <span v-if="name"  class="copy-name" @click="_copyName" :data-clipboard-text="name"><i class="ans-icon-copy" data-container="body"  data-toggle="tooltip" :title="$t('Copy name')" ></i></span>
+          <span v-if="name"  class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="ans-icon-copy" data-container="body"  data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
        </div>
        <div class="save-btn">
          <div class="operation" style="vertical-align: middle;">
@ -68,7 +68,7 @@
               :id="item.code"
               :key="$index"
               @click="_ckOperation(item,$event)">
-              <i :class="item.icon" data-toggle="tooltip" :title="item.description" ></i>
+              <em :class="item.icon" data-toggle="tooltip" :title="item.description" ></em>
            </a>
          </div>
          <x-button type="text" icon="ans-icon-triangle-solid-right" @click="dagAutomaticLayout"></x-button>
@ -257,8 +257,8 @@
                  let state = dom.find('.state-p')
                  dom.attr('data-state-id', v1.stateId)
                  dom.attr('data-dependent-result', v1.dependentResult || '')
-                  state.append(`<b class="${v1.icoUnicode} ${v1.isSpin ? 'as as-spin' : ''}" style="color:${v1.color}" data-toggle="tooltip" data-html="true" data-container="body"></b>`)
-                  state.find('b').attr('title', titleTpl(v2, v1.desc))
+                  state.append(`<strong class="${v1.icoUnicode} ${v1.isSpin ? 'as as-spin' : ''}" style="color:${v1.color}" data-toggle="tooltip" data-html="true" data-container="body"></strong>`)
+                  state.find('strong').attr('title', titleTpl(v2, v1.desc))
                }
              })
            })
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
@ -32,8 +32,8 @@
              :value="selectedModel === null ? '0' : selectedModel.value"
              style="width: 100%;"
              @on-click-icon.stop="_ckIcon">
-        <i slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></i>
-        <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></i>
+        <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></em>
+        <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></em>
      </x-input>
    <x-option
            v-for="city in list"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
@ -115,8 +115,6 @@
        color: #0097e0;
      }
    }
-    &:hover {
-    }
    .list-t {
      width: 50%;
      float: left;
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@ -21,10 +21,10 @@
      <span class="go-subtask">
        <!-- Component can't pop up box to do component processing -->
        <m-log :item="backfillItem">
-          <template slot="history"><a href="javascript:" @click="_seeHistory" ><i class="ansicon ans-icon-timer"></i><em>{{$t('View history')}}</em></a></template>
-          <template slot="log"><a href="javascript:"><i class="ansicon ans-icon-log"></i><em>{{$t('View log')}}</em></a></template>
+          <template slot="history"><a href="javascript:" @click="_seeHistory" ><em class="ansicon ans-icon-timer"></em><em>{{$t('View history')}}</em></a></template>
+          <template slot="log"><a href="javascript:"><em class="ansicon ans-icon-log"></em><em>{{$t('View log')}}</em></a></template>
        </m-log>
-        <a href="javascript:" @click="_goSubProcess" v-if="_isGoSubProcess"><i class="ansicon ans-icon-node"></i><em>{{$t('Enter this child node')}}</em></a>
+        <a href="javascript:" @click="_goSubProcess" v-if="_isGoSubProcess"><em class="ansicon ans-icon-node"></em><em>{{$t('Enter this child node')}}</em></a>
      </span>
    </div>
    <div class="content-box" v-if="isContentBox">
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
@ -29,16 +29,16 @@
            <span>{{$t('View log')}}</span>
            <div class="full-screen">
              <a href="javascript:" @click="_downloadLog" data-container="body" data-toggle="tooltip" :title="$t('Download Log')">
-                <i class="ans-icon-download" style="font-size: 20px"></i>
+                <em class="ans-icon-download" style="font-size: 20px"></em>
              </a>
              <a href="javascript:" class="refresh-log" :class="loading ? 'active' :''" @click="!loading && _refreshLog()" data-container="body" data-toggle="tooltip" :title="$t('Refresh Log')">
-                <i class="ans-icon-refresh"></i>
+                <em class="ans-icon-refresh"></em>
              </a>
              <a href="javascript:" @click="_screenOpen" v-show="!isScreen" data-container="body" data-toggle="tooltip" :title="$t('Enter full screen')">
-                <i class="ans-icon-max"></i>
+                <em class="ans-icon-max"></em>
              </a>
              <a href="javascript:" @click="_screenClose" v-show="isScreen" data-container="body" data-toggle="tooltip" :title="$t('Cancel full screen')">
-                <i class="ans-icon-min"></i>
+                <em class="ans-icon-min"></em>
              </a>
            </div>
          </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
@ -39,17 +39,17 @@
      </x-select>
      <template v-if="isInstance">
        <span class="instance-state">
-          <i class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></i>
-          <i class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></i>
-          <i class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></i>
+          <em class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
+          <em class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
+          <em class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
        </span>
      </template>
      <span class="operation">
        <a href="javascript:" class="delete" @click="!isDetails && _remove($index)">
-          <i class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></i>
+          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
        </a>
        <a href="javascript:" class="add" @click="!isDetails && _add()" v-if="$index === (dependItemList.length - 1)">
-          <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></i>
+          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
        </a>
      </span>
    </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
@ -52,18 +52,18 @@
      </x-input>
      <span class="lt-add">
        <a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
-          <i class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></i>
+          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
        </a>
      </span>
      <span class="add" v-if="$index === (httpParamsList.length - 1)">
        <a href="javascript:" @click="!isDetails && _addUdp()" >
-          <i class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+          <em class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
        </a>
      </span>
    </div>
    <span class="add-dp" v-if="!httpParamsList.length">
      <a href="javascript:" @click="!isDetails && _addUdp()" >
-        <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
      </a>
    </span>
  </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
@ -66,18 +66,18 @@
      </x-input>
      <span class="lt-add">
        <a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
-          <i class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></i>
+          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
        </a>
      </span>
      <span class="add" v-if="$index === (localParamsList.length - 1)">
        <a href="javascript:" @click="!isDetails && _addUdp()" >
-          <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
        </a>
      </span>
    </div>
    <span class="add-dp" v-if="!localParamsList.length">
      <a href="javascript:" @click="!isDetails && _addUdp()" >
-        <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
      </a>
    </span>
  </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
@ -28,7 +28,7 @@
      </div>
    </m-list-box>
    <a class="ans-modal-box-close">
-      <i class="ans-icon-min" @click="closeModal"></i>
+      <em class="ans-icon-min" @click="closeModal"></em>
    </a>
  </div>
 </template>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
@ -32,18 +32,18 @@
      </x-input>
      <span class="lt-add">
        <a href="javascript:" style="color:red;" @click="!isDetails && _removeStatement($index)" >
-          <i class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></i>
+          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
        </a>
      </span>
      <span class="add" v-if="$index === (localStatementList.length - 1)">
        <a href="javascript:" @click="!isDetails && _addStatement()" >
-          <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
        </a>
      </span>
    </div>
    <span class="add" v-if="!localStatementList.length">
      <a href="javascript:" @click="!isDetails && _addStatement()" >
-        <i class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
+        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
      </a>
    </span>
  </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
@ -23,8 +23,8 @@
          <a href="javascript:"
             @click="!isDetails && _addDep()"
             class="add-dep">
-            <i v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></i>
-            <i v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></i>
+            <em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+            <em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
          </a>
        </div>
        <div class="dep-box">
@ -40,13 +40,13 @@
                  @click="!isDetails && _setRelation($index)">
              {{el.relation === 'AND' ? $t('and') : $t('or')}}
            </span>
-            <i class="ans-icon-trash dep-delete"
+            <em class="ans-icon-trash dep-delete"
               data-toggle="tooltip"
               data-container="body"
               :class="_isDetails"
               @click="!isDetails && _deleteDep($index)"
               :title="$t('delete')" >
-            </i>
+            </em>
            <m-depend-item-list
              :dependTaskList='dependTaskList'
              v-model="el.dependItemList"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
@ -26,7 +26,7 @@
            style="opacity: 0">
          </textarea>
          <a class="ans-modal-box-max">
-            <i class="ans-icon-max" @click="setEditorVal"></i>
+            <em class="ans-icon-max" @click="setEditorVal"></em>
          </a>
        </div>
      </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
@ -45,7 +45,7 @@
    </m-list-box>
    <template v-if="sqlType==0">
      <m-list-box>
-        <div slot="text"><b class='requiredIcon'>*</b>{{$t('Title')}}</div>
+        <div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Title')}}</div>
        <div slot="content">
          <x-input
            type="input"
@ -56,7 +56,7 @@
        </div>
      </m-list-box>
      <m-list-box>
-        <div slot="text"><b class='requiredIcon'>*</b>{{$t('Recipient')}}</div>
+        <div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Recipient')}}</div>
        <div slot="content">
          <m-email ref="refEmail" v-model="receivers" :disabled="isDetails" :repeat-data="receiversCc"></m-email>
        </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
@ -67,7 +67,6 @@ Affirm.paramVerification = (name) => {
      if (!dagStore.name) {
        store.commit('dag/setName', `${uuid('dag_')}${uuid() + uuid()}`)
      }
-      flag = false
    } else {
      flag = true
    }
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/downChart.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/downChart.js
@ -54,12 +54,12 @@ DownChart.prototype.download = function ({ dagThis }) {
    const copyDom = $('#canvas')
    // gain
    const scale = 1
-    // svg handle
-    const nodesToRecover = []
-    const nodesToRemove = []
    // divReport is the id of the dom that needs to be intercepted into a picture
    const svgElem = copyDom.find('svg')
    svgElem.each((index, node) => {
+      // svg handle
+      const nodesToRecover = []
+      const nodesToRemove = []
      let parentNode = node.parentNode
      let svg = node.outerHTML.trim()
      let canvas = document.createElement('canvas')
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@ -266,10 +266,10 @@ JSP.prototype.tasksContextmenu = function (event) {
    let isTwo = store.state.dag.isDetails

    let html = [
-      `<a href="javascript:" id="startRunning" class="${isOne ? '' : 'disbled'}"><i class="ans-icon-play"></i><span>${i18n.$t('Start')}</span></a>`,
-      `<a href="javascript:" id="editNodes" class="${isTwo ? 'disbled' : ''}"><i class="ans-icon-edit"></i><span>${i18n.$t('Edit')}</span></a>`,
-      `<a href="javascript:" id="copyNodes" class="${isTwo ? 'disbled' : ''}"><i class="ans-icon-copy"></i><span>${i18n.$t('Copy')}</span></a>`,
-      `<a href="javascript:" id="removeNodes" class="${isTwo ? 'disbled' : ''}"><i class="ans-icon-trash"></i><span>${i18n.$t('Delete')}</span></a>`
+      `<a href="javascript:" id="startRunning" class="${isOne ? '' : 'disbled'}"><em class="ans-icon-play"></em><span>${i18n.$t('Start')}</span></a>`,
+      `<a href="javascript:" id="editNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-edit"></em><span>${i18n.$t('Edit')}</span></a>`,
+      `<a href="javascript:" id="copyNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-copy"></em><span>${i18n.$t('Copy')}</span></a>`,
+      `<a href="javascript:" id="removeNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-trash"></em><span>${i18n.$t('Delete')}</span></a>`
    ]

    let operationHtml = () => {
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
@ -37,7 +37,7 @@ const saveTargetarr = (valId, domId) => {
 }

 const rtBantpl = () => {
-  return `<i class="ans-icon-forbidden" data-toggle="tooltip" data-html="true" data-container="body" data-placement="left" title="${i18n.$t('Prohibition execution')}"></i>`
+  return `<em class="ans-icon-forbidden" data-toggle="tooltip" data-html="true" data-container="body" data-placement="left" title="${i18n.$t('Prohibition execution')}"></em>`
 }

 /**
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
@ -18,7 +18,7 @@
  <div class="starting-params-dag-index">
    <template v-if="isView && isActive">
       <div class="box">
-         <p class="box-hd"><i class="fa ans-icon-arrow-circle-right"></i><b>{{$t('Startup parameter')}}</b></p>
+         <p class="box-hd"><em class="fa ans-icon-arrow-circle-right"></em><strong>{{$t('Startup parameter')}}</strong></p>
         <ul class="box-bd">
           <li><span class="tab">{{$t('Startup type')}}：</span><span class="content">{{_rtRunningType(startupParam.commandType)}}</span></li>
           <li><span class="tab">{{$t('Complement range')}}：</span><span class="content" v-if="startupParam.commandParam && startupParam.commandParam.complementStartDate">{{startupParam.commandParam.complementStartDate}}-{{startupParam.commandParam.complementEndDate}}</span><span class="content" v-else>-</span></li>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
@ -18,7 +18,7 @@
  <div class="variable-model">
    <template v-if="list">
      <div class="list">
-        <div class="name"><i class="fa ans-icon-code"></i><b style="padding-top: 3px;display: inline-block">{{$t('Global parameters')}}</b></div>
+        <div class="name"><em class="fa ans-icon-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Global parameters')}}</strong></div>
        <div class="var-cont">
          <template v-for="(item,$index) in list.globalParams">
            <x-button
@ -28,13 +28,13 @@
                    :key="$index"
                    :data-clipboard-text="item.prop + ' = ' +item.value"
                    :class="'gbudp-' + $index">
-              <b style="color: #2A455B;">{{item.prop}}</b> = {{item.value}}
+              <strong style="color: #2A455B;">{{item.prop}}</strong> = {{item.value}}
            </x-button>
          </template>
        </div>
      </div>
      <div class="list" style="height: 30px;">
-        <div class="name"><i class="fa ans-icon-code"></i><b style="padding-top: 3px;display: inline-block">{{$t('Local parameters')}}</b></div>
+        <div class="name"><em class="fa ans-icon-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Local parameters')}}</strong></div>
        <div class="var-cont">
          &nbsp;
        </div>
@ -47,11 +47,11 @@
              <span v-for="(e,k,i) in el" :key="i">
                <template v-if="item.taskType === 'SQL' || item.taskType === 'PROCEDURE'">
                  <template v-if="(k !== 'direct' && k !== 'type')">
-                    <b style="color: #2A455B;">{{k}}</b> = {{e}}
+                    <strong style="color: #2A455B;">{{k}}</strong> = {{e}}
                  </template>
                </template>
                <template v-else>
-                  <b style="color: #2A455B;">{{k}}</b> = {{e}}
+                  <strong style="color: #2A455B;">{{k}}</strong> = {{e}}
                </template>
              </span>
            </x-button>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
@ -22,7 +22,7 @@
    <div class="content-p">
      <div class="create-datasource-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Datasource')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Datasource')}}</template>
          <template slot="content">
            <x-radio-group v-model="type" size="small">
              <x-radio :label="'MYSQL'">MYSQL</x-radio>
@ -37,7 +37,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Datasource Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Datasource Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -59,7 +59,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('IP')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('IP')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -70,7 +70,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Port')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Port')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -81,7 +81,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f :class="{hidden:showPrincipal}">
-          <template slot="name"><b>*</b>Principal</template>
+          <template slot="name"><strong>*</strong>Principal</template>
          <template slot="content">
            <x-input
              type="input"
@ -92,7 +92,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('User Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('User Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -114,7 +114,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b :class="{hidden:showdDatabase}">*</b>{{$t('Database Name')}}</template>
+          <template slot="name"><strong :class="{hidden:showdDatabase}">*</strong>{{$t('Database Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
@ -19,28 +19,28 @@
    <div class="table-box">
      <table class="fixed">
        <tr>
-          <th>
+          <th scope="col">
            <span>{{$t('#')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Datasource Name')}}</span>
          </th>
-          <th width="120">
+          <th scope="col" width="120">
            <span>{{$t('Datasource Type')}}</span>
          </th>
-          <th width="100">
+          <th scope="col" width="100">
            <span>{{$t('Datasource Parameter')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Description')}}</span>
          </th>
-          <th width="150">
+          <th scope="col" width="150">
            <span>{{$t('Create Time')}}</span>
          </th>
-          <th width="150">
+          <th scope="col" width="150">
            <span>{{$t('Update Time')}}</span>
          </th>
-          <th width="80">
+          <th scope="col" width="80">
            <span>{{$t('Operation')}}</span>
          </th>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
@ -97,8 +97,8 @@
          </td>
          <td>
            <span class="state">
-              <i class="ans-icon-success-solid success" v-if="item.state"></i>
-              <i class="ans-icon-fail-solid error" v-else></i>
+              <em class="ans-icon-success-solid success" v-if="item.state"></em>
+              <em class="ans-icon-fail-solid error" v-else></em>
            </span>
          </td>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
@ -30,8 +30,8 @@
            </div>
            <div class="value-p">
              <span class="state">
-                <i class="ans-icon-success-solid success" v-if="item.state"></i>
-                <i class="ans-icon-fail-solid error" v-else></i>
+                <em class="ans-icon-success-solid success" v-if="item.state"></em>
+                <em class="ans-icon-fail-solid error" v-else></em>
              </span>
            </div>
            <div class="text-1">{{$t('Health status')}}</div>
@ -43,7 +43,7 @@
              <span>{{$t('Max connections')}} - {{item.date | formatDate}}</span>
            </div>
            <div class="value-p">
-              <b :style="{color:color[0]}">{{item.maxConnections}}</b>
+              <strong :style="{color:color[0]}">{{item.maxConnections}}</strong>
            </div>
            <div class="text-1">{{$t('Max connections')}}</div>
          </div>
@ -54,7 +54,7 @@
              <span>{{$t('Threads connections')}}</span>
            </div>
            <div class="value-p">
-              <b :style="{color:color[8]}">{{item.threadsConnections}}</b>
+              <strong :style="{color:color[8]}">{{item.threadsConnections}}</strong>
            </div>
            <div class="text-1">{{$t('Threads connections')}}</div>
          </div>
@ -65,7 +65,7 @@
                <span>{{$t('Max used connections')}}</span>
              </div>
              <div class="value-p">
-                <b :style="{color:color[2]}">{{item.maxUsedConnections}}</b>
+                <strong :style="{color:color[2]}">{{item.maxUsedConnections}}</strong>
              </div>
              <div class="text-1">
                {{$t('Max used connections')}}
@ -78,7 +78,7 @@
              <span>{{$t('Threads running connections')}}</span>
            </div>
            <div class="value-p">
-              <b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b>
+              <strong :style="{color:color[4]}">{{item.threadsRunningConnections}}</strong>
            </div>
            <div class="text-1">{{$t('Threads running connections')}}</div>
          </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
@ -48,7 +48,7 @@
            <div class="col-md-4">
              <div class="text-num-model">
                <div class="value-p">
-                  <b :style="{color:color[$index]}">{{item.resInfo.loadAverage > 0? item.resInfo.loadAverage.toFixed(2):0}}</b>
+                  <strong :style="{color:color[$index]}">{{item.resInfo.loadAverage > 0? item.resInfo.loadAverage.toFixed(2):0}}</strong>
                </div>
                <div class="text-1">
                  loadAverage
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/statistics.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/statistics.vue
@ -25,7 +25,7 @@
                <span>{{$t('command number of waiting for running')}}</span>
              </div>
              <div class="value-p">
-                <b :style="{color:color[0]}"> {{commandCountData.normalCount}}</b>
+                <strong :style="{color:color[0]}"> {{commandCountData.normalCount}}</strong>
              </div>
            </div>
          </div>
@ -35,7 +35,7 @@
              <span >{{$t('failure command number')}}</span>
            </div>
            <div class="value-p">
-              <b :style="{color:color[1]}"> {{commandCountData.errorCount}}</b>
+              <strong :style="{color:color[1]}"> {{commandCountData.errorCount}}</strong>
            </div>
          </div>
        </div>
@ -45,7 +45,7 @@
              <span >{{$t('tasks number of waiting running')}}</span>
            </div>
            <div class="value-p">
-              <b :style="{color:color[0]}"> {{queueCount.taskQueue}}</b>
+              <strong :style="{color:color[0]}"> {{queueCount.taskQueue}}</strong>
            </div>
          </div>
        </div>
@ -55,7 +55,7 @@
              <span >{{$t('task number of ready to kill')}}</span>
            </div>
            <div class="value-p">
-              <b :style="{color:color[1]}">{{queueCount.taskKill}}</b>
+              <strong :style="{color:color[1]}">{{queueCount.taskKill}}</strong>
            </div>
          </div>
        </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
@ -48,7 +48,7 @@
            <div class="col-md-4">
              <div class="text-num-model">
                <div class="value-p">
-                  <b :style="{color:color[$index]}">{{item.resInfo.loadAverage > 0? item.resInfo.loadAverage.toFixed(2):0}}</b>
+                  <strong :style="{color:color[$index]}">{{item.resInfo.loadAverage > 0? item.resInfo.loadAverage.toFixed(2):0}}</strong>
                </div>
                <div class="text-1">
                  loadAverage
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue
@ -30,12 +30,12 @@
                :value="[searchParams.startDate,searchParams.endDate]"
                :panelNum="2">
          <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
-            <i slot="suffix"
+            <em slot="suffix"
               @click.stop="_dateEmpty()"
               class="ans-icon-fail-solid"
               v-show="value"
               style="font-size: 13px;cursor: pointer;margin-top: 1px;">
-            </i>
+            </em>
          </x-input>
        </x-datepicker>
      </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
@ -30,12 +30,12 @@
                placement="bottom-end"
                :panelNum="2">
          <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
-            <i slot="suffix"
+            <em slot="suffix"
               @click.stop="_dateEmpty()"
               class="ans-icon-fail-solid"
               v-show="value"
               style="font-size: 13px;cursor: pointer;margin-top: 1px;">
-            </i>
+            </em>
          </x-input>
        </x-datepicker>
      </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
@ -19,7 +19,7 @@
    <div class="clearfix input-element" :class="disabled ? 'disabled' : ''">
      <span class="tag-wrapper" v-for="(item,$index) in activeList" :key="$index" :class="activeIndex === $index ? 'active' : ''">
        <span class="tag-text">{{item}}</span>
-        <i class="remove-tag ans-icon-close" @click.stop="_del($index)" v-if="!disabled"></i>
+        <em class="remove-tag ans-icon-close" @click.stop="_del($index)" v-if="!disabled"></em>
      </span>
      <x-poptip
              placement="bottom-start"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@ -19,31 +19,31 @@
    <div class="table-box">
      <table class="fixed">
        <tr>
-          <th width="50">
+          <th scope="col" width="50">
            <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
          </th>
-          <th width="40">
+          <th scope="col" width="40">
            <span>{{$t('#')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Process Name')}}</span>
          </th>
-          <th width="50">
+          <th scope="col" width="50">
            <span>{{$t('State')}}</span>
          </th>
-          <th width="130">
+          <th scope="col" width="130">
            <span>{{$t('Create Time')}}</span>
          </th>
-          <th width="130">
+          <th scope="col" width="130">
            <span>{{$t('Update Time')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Description')}}</span>
          </th>
-          <th width="90">
+          <th scope="col" width="90">
            <span>{{$t('Timing state')}}</span>
          </th>
-          <th width="240">
+          <th scope="col" width="240">
            <span>{{$t('Operation')}}</span>
          </th>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
@ -89,8 +89,8 @@
                v-model="warningGroupId"
                :disabled="!notifyGroupList.length">
          <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = ''">
-            <i slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></i>
-            <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId"></i>
+            <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></em>
+            <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId"></em>
          </x-input>
          <x-option
                  v-for="city in notifyGroupList"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
@ -122,8 +122,8 @@
                :disabled="!notifyGroupList.length"
                v-model="warningGroupId">
          <x-input slot="trigger" readonly slot-scope="{ selectedModel }" :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = {}">
-            <i slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></i>
-            <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId.id"></i>
+            <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></em>
+            <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId.id"></em>
          </x-input>
          <x-option
                  v-for="city in notifyGroupList"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
@ -43,7 +43,7 @@
              <span>Node Type</span>
            </a>
            <a href="javascript:" v-for="(k,v) in tasksType" :key="v">
-              <i class="ans-icon-circle-solid" :style="{color:k.color}"></i>
+              <em class="ans-icon-circle-solid" :style="{color:k.color}"></em>
              <span>{{v}}</span>
            </a>
          </div>
@ -52,7 +52,7 @@
              <span>{{$t('Task Status')}}</span>
            </a>
            <a href="javascript:" v-for="(item) in tasksState" :key="item.id">
-              <i class="ans-icon-rect-solid" :style="{color:item.color}"></i>
+              <em class="ans-icon-rect-solid" :style="{color:item.color}"></em>
              <span>{{item.desc}}</span>
            </a>
          </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
@ -24,7 +24,7 @@
              <span>{{$t('Task Status')}}</span>
            </a>
            <a href="javascript:" v-for="(item) in tasksState" :key="item.id">
-              <i class="ans-icon-rect-solid" :style="{color:item.color}"></i>
+              <em class="ans-icon-rect-solid" :style="{color:item.color}"></em>
              <span>{{item.desc}}</span>
            </a>
          </div>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
@ -19,43 +19,43 @@
    <div class="table-box">
      <table class="fixed">
        <tr>
-          <th width="50">
+          <th scope="col" width="50">
            <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
          </th>
-          <th width="40">
+          <th scope="col" width="40">
            <span>{{$t('#')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Process Name')}}</span>
          </th>
-          <th width="70">
+          <th scope="col" width="70">
            <span>{{$t('Run Type')}}</span>
          </th>
-          <th width="130">
+          <th scope="col" width="130">
            <span>{{$t('Scheduling Time')}}</span>
          </th>
-          <th width="130">
+          <th scope="col" width="130">
            <span>{{$t('Start Time')}}</span>
          </th>
-          <th width="130">
+          <th scope="col" width="130">
            <span>{{$t('End Time')}}</span>
          </th>
-          <th width="60">
+          <th scope="col" width="60">
            <span>{{$t('Duration')}}s</span>
          </th>
-          <th width="60">
+          <th scope="col" width="60">
            <span>{{$t('Run Times')}}</span>
          </th>
-          <th width="100">
+          <th scope="col" width="100">
            <span>{{$t('host')}}</span>
          </th>
-          <th width="60">
+          <th scope="col" width="60">
            <span>{{$t('fault-tolerant sign')}}</span>
          </th>
-          <th width="30">
+          <th scope="col" width="30">
            <span>{{$t('State')}}</span>
          </th>
-          <th width="210">
+          <th scope="col" width="210">
            <span>{{$t('Operation')}}</span>
          </th>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
@ -19,7 +19,7 @@
    <template slot="content">
      <div class="projects-create-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Project Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Project Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
@ -19,31 +19,31 @@
    <div class="table-box">
      <table class="fixed">
        <tr>
-          <th>
+          <th scope="col">
            <span>{{$t('#')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Project Name')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Owned Users')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Process Define Count')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Process Instance Running Count')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Description')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Create Time')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Update Time')}}</span>
          </th>
-          <th width="80">
+          <th scope="col" width="80">
            <span>{{$t('Operation')}}</span>
          </th>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
@ -19,40 +19,40 @@
    <div class="table-box">
      <table class="fixed">
        <tr>
-          <th>
+          <th scope="col">
            <span>{{$t('#')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Name')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Process Instance')}}</span>
          </th>
-          <th width="90">
+          <th scope="col" width="90">
            <span>{{$t('Node Type')}}</span>
          </th>
-          <th width="40">
+          <th scope="col" width="40">
            <span>{{$t('State')}}</span>
          </th>
-          <th width="140">
+          <th scope="col" width="140">
            <span>{{$t('Submit Time')}}</span>
          </th>
-          <th width="140">
+          <th scope="col" width="140">
            <span>{{$t('Start Time')}}</span>
          </th>
-          <th width="140">
+          <th scope="col" width="140">
            <span>{{$t('End Time')}}</span>
          </th>
-          <th width="110">
+          <th scope="col" width="110">
            <span>{{$t('host')}}</span>
          </th>
-          <th width="74">
+          <th scope="col" width="74">
            <span>{{$t('Duration')}}(s)</span>
          </th>
-          <th width="84">
+          <th scope="col" width="84">
            <span>{{$t('Retry Count')}}</span>
          </th>
-          <th width="50">
+          <th scope="col" width="50">
            <span>{{$t('Operation')}}</span>
          </th>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
@ -19,7 +19,7 @@
    <template slot="content">
      <div class="resource-create-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('File Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -31,7 +31,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('File Format')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('File Format')}}</template>
          <template slot="content">
            <x-select v-model="suffix" style="width: 100px;" @on-change="_onChange">
              <x-option
@ -56,7 +56,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('File Content')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('File Content')}}</template>
          <template slot="content">
            <textarea id="code-create-mirror" name="code-create-mirror"></textarea>
          </template>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/details/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/details/index.vue
@ -21,7 +21,7 @@
        <h2>
          <span>{{name}}</span>
          <div class="down">
-            <i class="ans-icon-download" data-container="body" data-toggle="tooltip" :title="$t('Download Details')" @click="_downloadFile"></i>
+            <em class="ans-icon-download" data-container="body" data-toggle="tooltip" :title="$t('Download Details')" @click="_downloadFile"></em>
            <em>{{size}}</em>
          </div>
        </h2>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
@ -19,25 +19,25 @@
    <div class="table-box">
      <table class="fixed">
        <tr>
-          <th>
+          <th scope="col">
            <span>{{$t('#')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Name')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('File Name')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Description')}}</span>
          </th>
-          <th width="100">
+          <th scope="col" width="100">
            <span>{{$t('Size')}}</span>
          </th>
-          <th width="140">
+          <th scope="col" width="140">
            <span>{{$t('Update Time')}}</span>
          </th>
-          <th width="140">
+          <th scope="col" width="140">
            <span>{{$t('Operation')}}</span>
          </th>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
@ -19,7 +19,7 @@
    <template slot="content">
      <div class="resource-rename-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/createUdf.vue
@ -19,7 +19,7 @@
    <template slot="content">
      <div class="udf-create-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('type')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('type')}}</template>
          <template slot="content">
            <x-radio-group v-model="type">
              <x-radio :label="'HIVE'">HIVE UDF</x-radio>
@ -28,7 +28,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('UDF Function Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('UDF Function Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -39,7 +39,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Package Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Package Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -70,7 +70,7 @@
          </template>
        </m-list-box-f> -->
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('UDF Resources')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('UDF Resources')}}</template>
          <template slot="content">
            <x-select
                    filterable
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
@ -19,34 +19,34 @@ v-ps<template>
    <div class="table-box">
      <table class="fixed">
        <tr>
-          <th>
+          <th scope="col">
            <span>{{$t('#')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('UDF Function Name')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Class Name')}}</span>
          </th>
-          <!-- <th>
+          <!-- <th scope="col">
            <span>{{$t('Parameter')}}</span>
          </th> -->
-          <th width="80">
+          <th scope="col" width="80">
            <span>{{$t('type')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Description')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Jar Package')}}</span>
          </th>
-          <!-- <th>
+          <!-- <th scope="col">
            <span>{{$t('Library Name')}}</span>
          </th> -->
-          <th width="140">
+          <th scope="col" width="140">
            <span>{{$t('Update Time')}}</span>
          </th>
-          <th width="80">
+          <th scope="col" width="80">
            <span>{{$t('Operation')}}</span>
          </th>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
@ -19,28 +19,28 @@
    <div class="table-box">
      <table class="fixed">
        <tr>
-          <th>
+          <th scope="col">
            <span>{{$t('#')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('UDF Resource Name')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('File Name')}}</span>
          </th>
-          <th width="80">
+          <th scope="col" width="80">
            <span>{{$t('File Size')}}</span>
          </th>
-          <th>
+          <th scope="col">
            <span>{{$t('Description')}}</span>
          </th>
-          <th width="140">
+          <th scope="col" width="140">
            <span>{{$t('Create Time')}}</span>
          </th>
-          <th width="140">
+          <th scope="col" width="140">
            <span>{{$t('Update Time')}}</span>
          </th>
-          <th width="110">
+          <th scope="col" width="110">
            <span>{{$t('Operation')}}</span>
          </th>
        </tr>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue
@ -19,7 +19,7 @@
    <template slot="content">
      <div class="resource-rename-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue
@ -23,7 +23,7 @@
    <template slot="content">
      <div class="create-tenement-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -34,7 +34,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Queue value')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Queue value')}}</template>
          <template slot="content">
            <x-input
                    type="input"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue
@ -23,7 +23,7 @@
    <template slot="content">
      <div class="create-tenement-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Tenant Code')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Tenant Code')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -34,7 +34,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Tenant Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Tenant Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -45,7 +45,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Queue')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Queue')}}</template>
          <template slot="content">
            <x-select v-model="queueId">
              <x-option
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue
@ -23,7 +23,7 @@
    <template slot="content">
      <div class="create-user-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('User Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('User Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -34,7 +34,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f v-if="router.history.current.name !== 'account'">
-          <template slot="name"><b>*</b>{{$t('Password')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Password')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -44,7 +44,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f v-if="isADMIN">
-          <template slot="name"><b>*</b>{{$t('Tenant')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Tenant')}}</template>
          <template slot="content">
            <x-select v-model="tenantId">
              <x-option
@ -61,8 +61,8 @@
          <template slot="content">
            <x-select v-model="queueName">
              <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a queue')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="queueName = ''">
-                <i slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="queueName ==''"></i>
-                <i slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="queueName!=''"></i>
+                <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="queueName ==''"></em>
+                <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="queueName!=''"></em>
              </x-input>
              <x-option
                      v-for="city in queueList"
@ -74,7 +74,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Email')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Email')}}</template>
          <template slot="content">
            <x-input
                    type="input"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue
@ -23,7 +23,7 @@
    <template slot="content">
      <div class="create-warning-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Group Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Group Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -33,7 +33,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Group Type')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Group Type')}}</template>
          <template slot="content">
            <x-select v-model="groupType">
              <x-option
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/createWorker.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/createWorker.vue
@ -23,7 +23,7 @@
    <template slot="content">
      <div class="create-worker-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Group Name')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Group Name')}}</template>
          <template slot="content">
            <x-input
                    type="input"
@ -33,7 +33,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f>
-          <template slot="name"><b>*</b>IP</template>
+          <template slot="name"><strong>*</strong>IP</template>
          <template slot="content">
            <x-input
                    :autosize="{ minRows: 4, maxRows: 6 }"
--- a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue
@ -23,7 +23,7 @@
    <template slot="content">
      <div class="create-token-model">
        <m-list-box-f>
-          <template slot="name"><b>*</b>{{$t('Failure time')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Failure time')}}</template>
          <template slot="content">
            <x-datepicker
                    :disabled-date="disabledDate"
@ -35,7 +35,7 @@
          </template>
        </m-list-box-f>
        <m-list-box-f v-if="auth">
-          <template slot="name"><b>*</b>{{$t('User')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('User')}}</template>
          <template slot="content">
            <x-select v-model="userId" @on-change="_onChange">
              <x-option
--- a/dolphinscheduler-ui/src/js/module/components/crontab/source/app.vue
+++ b/dolphinscheduler-ui/src/js/module/components/crontab/source/app.vue
@ -24,12 +24,12 @@

    <div class="v-crontab-model">
      <div class="clearfix v-crontab-tab">
-        <a href="javascript:" :class="tabVal === 'second' ?' active' :''" @click="onTab('second')"><i class="ans-icon-calendar"></i><span>{{$t('秒')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'minute' ?' active' :''" @click="onTab('minute')"><i class="ans-icon-calendar"></i><span>{{$t('分')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'hour' ?' active' :''" @click="onTab('hour')"><i class="ans-icon-calendar"></i><span>{{$t('时')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'day' ?' active' :''" @click="onTab('day')"><i class="ans-icon-calendar"></i><span>{{$t('天')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'month' ?' active' :''" @click="onTab('month')"><i class="ans-icon-calendar"></i><span>{{$t('月')}}</span></a>
-        <a href="javascript:" :class="tabVal === 'year' ?' active' :''" @click="onTab('year')"><i class="ans-icon-calendar"></i><span>{{$t('年')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'second' ?' active' :''" @click="onTab('second')"><em class="ans-icon-calendar"></em><span>{{$t('秒')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'minute' ?' active' :''" @click="onTab('minute')"><em class="ans-icon-calendar"></em><span>{{$t('分')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'hour' ?' active' :''" @click="onTab('hour')"><em class="ans-icon-calendar"></em><span>{{$t('时')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'day' ?' active' :''" @click="onTab('day')"><em class="ans-icon-calendar"></em><span>{{$t('天')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'month' ?' active' :''" @click="onTab('month')"><em class="ans-icon-calendar"></em><span>{{$t('月')}}</span></a>
+        <a href="javascript:" :class="tabVal === 'year' ?' active' :''" @click="onTab('year')"><em class="ans-icon-calendar"></em><span>{{$t('年')}}</span></a>
      </div>
      <div class="v-crontab-content">
        <template v-if="tabVal === 'second'">
--- a/dolphinscheduler-ui/src/js/module/components/fileUpdate/definitionUpdate.vue
+++ b/dolphinscheduler-ui/src/js/module/components/fileUpdate/definitionUpdate.vue
@ -29,22 +29,22 @@
             @dragleave.prevent="dragOver = false"
             id="file-update-model">
          <div class="tooltip-info">
-            <i class="fa ans-icon-notice-solid"></i>
+            <em class="fa ans-icon-notice-solid"></em>
            <span>{{$t('Drag the file into the current upload window')}}</span>
          </div>
          <!--<div class="hide-archive" v-if="progress !== 0" @click="_ckArchive">
-            <i class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></i>
+            <em class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></em>
          </div>-->
          <div class="update-popup" v-if="dragOver">
            <div class="icon-box">
-              <i class="ans ans-icon-upload"></i>
+              <em class="ans ans-icon-upload"></em>
            </div>
            <p class="p1">
              <span>{{$t('Drag area upload')}}</span>
            </p>
          </div>
          <m-list-box-f>
-            <template slot="name"><b>*</b>{{$t('Upload Files')}}</template>
+            <template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template>
            <template slot="content">
              <div class="file-update-box">
                <template v-if="progress === 0">
--- a/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue
+++ b/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue
@ -29,22 +29,22 @@
             @dragleave.prevent="dragOver = false"
             id="file-update-model">
          <div class="tooltip-info">
-            <i class="ans ans-icon-warn-solid"></i>
+            <em class="ans ans-icon-warn-solid"></em>
            <span>{{$t('Drag the file into the current upload window')}}</span>
          </div>
          <!--<div class="hide-archive" v-if="progress !== 0" @click="_ckArchive">
-            <i class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></i>
+            <em class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></em>
          </div>-->
          <div class="update-popup" v-if="dragOver">
            <div class="icon-box">
-              <i class="ans ans-icon-upload"></i>
+              <em class="ans ans-icon-upload"></em>
            </div>
            <p class="p1">
              <span>{{$t('Drag area upload')}}</span>
            </p>
          </div>
          <m-list-box-f>
-            <template slot="name"><b>*</b>{{$t('File Name')}}</template>
+            <template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
            <template slot="content">
              <x-input
                      type="input"
@ -68,7 +68,7 @@
            </template>
          </m-list-box-f>
          <m-list-box-f>
-            <template slot="name"><b>*</b>{{$t('Upload Files')}}</template>
+            <template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template>
            <template slot="content">
              <div class="file-update-box">
                <template v-if="progress === 0">
--- a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
+++ b/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
@ -23,42 +23,42 @@
      <div class="clearfix list">
        <div class="nav-links">
          <router-link :to="{ path: '/home'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-home-empty"></i>{{$t('Home')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-home-empty"></em>{{$t('Home')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div class="clearfix list">
        <div class="nav-links">
          <router-link :to="{ path: '/projects'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-setting"></i>{{$t('Project Manage')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-setting"></em>{{$t('Project Manage')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div class="clearfix list">
        <div class="nav-links">
          <router-link :to="{ path: '/resource'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-folder-empty"></i>{{$t('Resources manage')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-folder-empty"></em>{{$t('Resources manage')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div class="clearfix list">
        <div class="nav-links">
          <router-link :to="{ path: '/datasource'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-database"></i>{{$t('Datasource manage')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-database"></em>{{$t('Datasource manage')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div class="clearfix list">
        <div class="nav-links">
          <router-link :to="{ path: '/monitor'}" tag="a" active-class="active">
-            <span><i class="ansiconfont ans-icon-monitor"></i>{{$t('Monitor')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-monitor"></em>{{$t('Monitor')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div class="clearfix list" >
        <div class="nav-links">
          <router-link :to="{ path: '/security'}" tag="a" active-class="active" v-ps="['ADMIN_USER']">
-            <span><i class="ansiconfont ans-icon-shield"></i>{{$t('Security')}}</span><b></b>
+            <span><em class="ansiconfont ans-icon-shield"></em>{{$t('Security')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
@ -76,7 +76,7 @@
        </div>
        <div class="login-model" slot="reference">
          <span>{{activeLocale.name}}</span>
-          <i class="ans-icon-arrow-down"></i>
+          <em class="ans-icon-arrow-down"></em>
        </div>
      </x-poptip>
      </span>
@ -87,24 +87,24 @@
              placement="bottom-end">
        <div class="lrns-list">
          <a href="javascript:" @click="_goAccount">
-            <i class="ans-icon-user-empty"></i>
+            <em class="ans-icon-user-empty"></em>
            <span>{{$t('User Information')}}</span>
          </a>
          <a href="javascript:" @click="_signOut">
-            <i class="ans-icon-off"></i>
+            <em class="ans-icon-off"></em>
            <span>{{$t('Logout')}}</span>
          </a>
        </div>
        <div class="login-model" slot="reference">
-          <i class="ans-icon-user-solid"></i>
+          <em class="ans-icon-user-solid"></em>
          <span>{{userInfo.userName}}</span>
-          <i class="ans-icon-arrow-down"></i>
+          <em class="ans-icon-arrow-down"></em>
        </div>
      </x-poptip>
    </div>
    <div class="file-update-model" @click="_toggleArchive" v-if="isUpdate">
      <div class="icon-cloud">
-        <i class="ans ans-icon-upload"></i>
+        <em class="ans ans-icon-upload"></em>
      </div>
      <div class="progress-box">
        <m-progress-bar :value="progress" text-placement="bottom"></m-progress-bar>
@ -112,35 +112,35 @@
    </div>
    <div class="adaptive-m-nav">
      <div class="m-nav-box ">
-        <a href="javascript:" @click="mIsNav = !mIsNav"><i class="ans-icon-database"></i></a>
+        <a href="javascript:" @click="mIsNav = !mIsNav"><em class="ans-icon-database"></em></a>
      </div>
      <div class="m-title-box">
        <div class="logo-m"></div>
      </div>
      <div class="m-user-box">
-        <a href="javascript:" @click="_goAccount"><i class="ans-icon-user-empty"></i></a>
+        <a href="javascript:" @click="_goAccount"><em class="ans-icon-user-empty"></em></a>
      </div>
      <transition name="slide-fade">
        <div class="m-nav-list" v-if="mIsNav">
          <ul @click="mIsNav = false">
            <router-link :to="{ path: '/home'}" tag="li" active-class="active">
-              <i class="ans-icon-home-empty"></i>
+              <em class="ans-icon-home-empty"></em>
              <span>{{$t('Home')}}</span>
            </router-link>
            <router-link :to="{ path: '/projects'}" tag="li" active-class="active">
-              <i class="ans-icon-setting"></i>
+              <em class="ans-icon-setting"></em>
              <span>{{$t('Project manage')}}</span>
            </router-link>
            <router-link :to="{ path: '/resource'}" tag="li" active-class="active">
-              <i class="ans-icon-folder-empty"></i>
+              <em class="ans-icon-folder-empty"></em>
              <span>{{$t('Resources manage')}}</span>
            </router-link>
            <router-link :to="{ path: '/datasource'}" tag="li" active-class="active">
-              <i class="ans-icon-database"></i>
+              <em class="ans-icon-database"></em>
              <span>{{$t('Datasource manage')}}</span>
            </router-link>
            <router-link :to="{ path: '/security'}" tag="li" active-class="active" v-ps="['ADMIN_USER']">
-              <i class="ans-icon-shield"></i>
+              <em class="ans-icon-shield"></em>
              <span>{{$t('Security')}}</span>
            </router-link>
          </ul>
--- a/dolphinscheduler-ui/src/js/module/components/priority/priority.vue
+++ b/dolphinscheduler-ui/src/js/module/components/priority/priority.vue
@ -21,7 +21,7 @@
        <div class="input-element" :class="isDetails?'disabled' : ''">
          <span v-html="_rtUnicode(selectedModel ? selectedModel.label : 'MEDIUM')"></span>
          <span class="label-p">{{selectedModel ? selectedModel.label : 'MEDIUM'}}</span>
-          <i class="ans-icon-arrow-down" ></i>
+          <em class="ans-icon-arrow-down" ></em>
        </div>
      </div>
      <x-option
@ -31,7 +31,7 @@
              :label="item.code">
        <li class="ans-option ans-option-listp">
          <span class="default-option-class">
-            <i :class="item.unicode" :style="{color:item.color}"></i>
+            <em :class="item.unicode" :style="{color:item.color}"></em>
            {{item.code}}
          </span>
        </li>
@ -90,7 +90,7 @@
    methods: {
      _rtUnicode (value) {
        let o = _.find(this.priorityList, ['code', value])
-        return `<i class="${o.unicode}" style="color:${o.color}"></i>`
+        return `<em class="${o.unicode}" style="color:${o.color}"></em>`
      },
      _onChange (o) {
        this.value = o.value
--- a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
+++ b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
@ -26,9 +26,9 @@
          <router-link :to="{ name: item.path}">
            <div class="name" @click="_toggleSubMenu(item)">
              <a href="javascript:">
-                <i class="fa icon" :class="item.icon"></i>
+                <em class="fa icon" :class="item.icon"></em>
                <span>{{item.name}}</span>
-                <i class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></i>
+                <em class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></em>
              </a>
            </div>
          </router-link>
@ -36,9 +36,9 @@
        <template v-if="!item.path">
          <div class="name" @click="_toggleSubMenu(item)">
            <a href="javascript:">
-              <i class="fa icon" :class="item.icon"></i>
+              <em class="fa icon" :class="item.icon"></em>
              <span>{{item.name}}</span>
-              <i class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></i>
+              <em class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></em>
            </a>
          </div>
        </template>
--- a/dolphinscheduler-ui/src/js/module/components/tooltipsJSON/tooltipsJSON.vue
+++ b/dolphinscheduler-ui/src/js/module/components/tooltipsJSON/tooltipsJSON.vue
@ -20,9 +20,9 @@
            trigger="click"
            placement="bottom-start">
      <pre :id="'result-' + id" class="result"></pre>
-      <i class="iconfont" slot="reference">
+      <em class="iconfont" slot="reference">
        <slot name="reference"></slot>
-      </i>
+      </em>
    </x-poptip>
  </div>
 </template>
--- a/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
+++ b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
@ -37,7 +37,7 @@
                     placeholder="Please enter keyword"
                     type="text"
                     style="width:202px;">
-              <i slot="suffix" class="ans-icon-search"></i>
+              <em slot="suffix" class="ans-icon-search"></em>
            </x-input>
          </div>-->
          <div class="scrollbar tf-content">
@ -63,7 +63,7 @@
                     placeholder="Please enter keyword"
                     type="text"
                     style="width:202px;">
-              <i slot="suffix" class="ans-icon-search"></i>
+              <em slot="suffix" class="ans-icon-search"></em>
            </x-input>
          </div>-->
          <div class="scrollbar tf-content">
--- a/dolphinscheduler-ui/src/js/module/components/transfer/transfer.vue
+++ b/dolphinscheduler-ui/src/js/module/components/transfer/transfer.vue
@ -31,7 +31,7 @@
                     placeholder="Please enter keyword"
                     type="text"
                     style="width:202px;">
-              <i slot="suffix" class="ans-icon-search"></i>
+              <em slot="suffix" class="ans-icon-search"></em>
            </x-input>
          </div>-->
          <div class="scrollbar tf-content">
@ -57,7 +57,7 @@
                     placeholder="Please enter keyword"
                     type="text"
                     style="width:202px;">
-              <i slot="suffix" class="ans-icon-search"></i>
+              <em slot="suffix" class="ans-icon-search"></em>
            </x-input>
          </div>-->
          <div class="scrollbar tf-content">
--- a/dolphinscheduler-ui/src/sass/common/index.scss
+++ b/dolphinscheduler-ui/src/sass/common/index.scss
@ -22,8 +22,6 @@
@import "table";

 .ans-input {
-  &.ans-input--default {
-  }
  textarea,input {
    font-weight: 400;
  }
@ -43,6 +41,7 @@ a:focus {
 }

 a:hover{
+  color:#0097e0;
  text-decoration: none !important;
 }

@ -60,7 +59,6 @@ a:hover{

 body{
  background: #EDEEED;
-  font-family: "PingFangSC-Light,Helvetica Neue,Helvetica,Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif";
  .home-main {
    min-height: calc(100vh - 100px);
    background: #fff;
@ -119,6 +117,13 @@ body{
      }
    }
  }
+  font-family:13px/1.5 PingFangSC-Light,Helvetica Neue,Helvetica,Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif;
+	-webkit-backface-visibility:hidden;
+	-webkit-tap-highlight-color:transparent;
+	-webkit-text-size-adjust:none;
+	-webkit-touch-callout:none;
+	-webkit-font-smoothing:antialiased;
+	-moz-osx-font-smoothing:grayscale
 }

 // icon disabled state
@ -225,15 +230,6 @@ ol,ul {
 img {
 	border:0
 }
-body {
-	font:13px/1.5 PingFangSC-Light,Helvetica Neue,Helvetica,Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif;
-	-webkit-backface-visibility:hidden;
-	-webkit-tap-highlight-color:transparent;
-	-webkit-text-size-adjust:none;
-	-webkit-touch-callout:none;
-	-webkit-font-smoothing:antialiased;
-	-moz-osx-font-smoothing:grayscale
-}
 input::-ms-clear,input::-ms-reveal {
 	display:none
 }
@ -247,10 +243,6 @@ a,body {
 	-webkit-box-sizing:border-box;
 	box-sizing:border-box
 }
-a:hover {
-	color:#0097e0;
-	text-decoration:none
-}
 [hidden],[v-cloak] {
 	display:none
 }