refactor(profile): use drawer for display

.env

@@ -13,7 +13,7 @@ __GATEWAY__ = 'disabled'
 # 备份设备
 __SUB_DEVICE__ = 'disabled'
 # 设备接管
-__TAKEOVER__ = 'enabled'
+__TAKEOVER__ = 'disabled'
 # 微信
 __WECHAT__ = 'enabled'
 
@@ -62,3 +62,5 @@ VUE_APP_GAODE_MAP_KEY = '9c499e7000d066c05de9af8556a890f7'
 VUE_APP_GAODE_MAP_JSCODE = 'e7b3c29a5112657edcc688a3c589bd15'
 
 VUE_APP_AD_ORDER_QR = 'https://msr.inspur.com'
+
+VUE_APP_APPLET_PAGE = 'pages/device/device'

.env.development

@@ -1,3 +1,5 @@
+ENV = 'staging'
+
 VUE_APP_BASE_API = '/dev-api'
 
 VUE_APP_MINIO = '/dev-api/oss-api'

.env.rc

@@ -1,6 +1,8 @@
 NODE_ENV = 'production'
 
-ENV = 'staging'
+ENV = 'rc'
+
+LOGGER = 'enabled'
 
 # keycloak
 VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://isoc.artaplay.com:8443/auth'

feature.js

@@ -1,5 +1,5 @@
 const isProd = process.env.NODE_ENV !== 'development'
-const isStaging = process.env.ENV === 'staging'
+const isStaging = process.env.ENV === 'staging' || process.env.ENV === 'rc'
 
 function isEnable (feature) {
   return !isProd || process.env[feature] === 'enabled'
@@ -21,7 +21,7 @@ module.exports = {
   features: {
     __VERSION__: JSON.stringify(`v${require('./package.json').version}.${getTimestamp()}`),
     __DEV__: !isProd,
-    __STAGING__: !isProd || isStaging,
+    __STAGING__: isStaging,
     ...createFeature('__PLACEHOLDER__'),
     ...createFeature('__DEVICE_DASHBARD__'),
     ...createFeature('__GATEWAY__'),

src/views/platform/profile/components/ResetPassword.vue → src/layout/components/Navbar/Profile/components/ResetPassword.vue

@@ -1,19 +1,20 @@
 <template>
-  <div class="c-grid-form sm">
-    <span class="c-grid-form__label u-required">新密码</span>
+  <div class="c-grid-form auto">
+    <span class="c-grid-form__label u-bold u-required">新密码</span>
     <el-input
       v-model.trim="newPassword"
-      class="u-password"
+      class="u-width--sm u-password"
       placeholder="6-20位密码"
       maxlength="20"
     />
-    <span class="c-grid-form__label u-required">确认新密码</span>
+    <span class="c-grid-form__label u-bold u-required">确认新密码</span>
     <el-input
       v-model.trim="confirmNewPassword"
-      class="u-password"
+      class="u-width--sm u-password"
       maxlength="20"
     />
-    <div class="c-grid-form__row has-top-padding u-text-center">
+    <span />
+    <div class="has-top-padding">
       <button
         class="o-button"
         @click="onSave"

src/views/platform/profile/components/UserInfoItem.vue → src/layout/components/Navbar/Profile/components/UserInfoItem.vue

@@ -1,25 +1,25 @@
 <template>
-  <div class="l-flex--col">
+  <div class="l-flex--col u-font-size--sm">
     <div class="l-flex--row c-sibling-item--v c-line">
-      <div class="c-line__left u-color--black u-bold">{{ config.label }}</div>
+      <div class="c-sibling-item c-line__around u-color--black u-text--right u-bold">{{ config.label }}</div>
       <el-input
         v-model="cValue"
-        class="l-flex__fill c-sibling-item"
+        class="l-flex__fill c-sibling-item far"
         :maxlength="config.maxlength"
         :placeholder="placeholder"
         :readonly="!expanded"
       />
-      <div class="c-sibling-item c-line__right">
+      <div class="c-sibling-item c-line__around">
         <button
           v-if="!expanded"
           class="o-button"
           @click="onExpanded"
         >
-          {{ initial ? '更换' : '绑定' }}
+          {{ msg }}
         </button>
         <div
           v-else
-          class="u-pointer u-color--blue"
+          class="u-color--blue u-pointer has-active"
           @click="onUnexpanded"
         >
           收起
@@ -28,8 +28,8 @@
     </div>
     <template v-if="expanded">
       <div class="l-flex--row c-sibling-item--v far c-line">
-        <div class="c-line__left" />
-        <div class="l-flex__fill l-flex--row c-sibling-item">
+        <div class="c-sibling-item c-line__around" />
+        <div class="l-flex__fill l-flex--row c-sibling-item far">
           <el-input
             v-model="code"
             class="l-flex__fill c-sibling-item"
@@ -45,19 +45,17 @@
             {{ codeText }}
           </el-button>
         </div>
-        <div class="c-sibling-item c-line__right" />
+        <div class="c-sibling-item c-line__around" />
       </div>
       <div class="l-flex--row c-sibling-item--v far c-line">
-        <div class="c-line__left" />
-        <div class="l-flex__fill c-sibling-item l-flex--row">
-          <el-button
-            class="o-button l-flex__fill"
-            @click="onBind"
-          >
-            绑定
-          </el-button>
-        </div>
-        <div class="c-sibling-item c-line__right" />
+        <div class="c-sibling-item c-line__around" />
+        <button
+          class="l-flex__fill c-sibling-item far o-button"
+          @click="onBind"
+        >
+          {{ msg }}
+        </button>
+        <div class="c-sibling-item c-line__around" />
       </div>
     </template>
   </div>
@@ -100,12 +98,7 @@ export default {
   props: {
     type: {
       type: String,
-      require: true,
-      default: 'phone'
-    },
-    value: {
-      type: String,
-      default: ''
+      required: true
     },
     initial: {
       type: String,
@@ -114,27 +107,23 @@ export default {
   },
   data () {
     return {
-      config: {},
+      config: config[this.type],
       code: null,
       expanded: false,
       verification: false,
-      countDown: COUNTDOWN
+      countDown: COUNTDOWN,
+      cValue: this.initial
     }
   },
   computed: {
-    cValue: {
-      get () {
-        return this.value
-      },
-      set (v) {
-        this.$emit('input', v)
-      }
+    msg () {
+      return this.initial ? '更换' : '绑定'
     },
     codeText () {
       return this.verification ? `${this.countDown} s` : '发送验证码'
     },
     placeholder () {
-      return this.value || (this.expanded ? `请输入${this.config.tipText}` : '暂未绑定')
+      return this.expanded ? `请输入${this.config.tipText}` : '暂未绑定'
     }
   },
   watch: {
@@ -142,9 +131,6 @@ export default {
       this.reset()
     }
   },
-  created () {
-    this.config = config[this.type]
-  },
   beforeDestroy () {
     clearInterval(this.$timer)
   },
@@ -165,35 +151,41 @@ export default {
       this.countDown = COUNTDOWN
       clearInterval(this.$timer)
     },
-    sendCode () {
-      if (this.verification) {
-        return
-      }
-      if (!this.value) {
+    checkValue () {
+      if (!this.cValue) {
         this.$message({
           type: 'warning',
           message: `${this.config.tipText}不能为空`
         })
-        return
+        return false
       }
-      if (!this.config.valid(this.value)) {
+      if (!this.config.valid(this.cValue)) {
         this.$message({
           type: 'warning',
           message: `${this.config.tipText}格式错误`
         })
-        return
+        return false
       }
-      if (this.value === this.initial) {
+      if (this.cValue === this.initial) {
         this.$message({
           type: 'warning',
-          message: `${this.config.tipText}不能相同`
+          message: `请使用不同的${this.config.tipText}`
         })
+        return false
+      }
+      return true
+    },
+    sendCode () {
+      if (this.verification) {
+        return
+      }
+      if (!this.checkValue()) {
         return
       }
       authcodeSend({
-        [this.config.typeKey]: this.value
-      })
-        .then(({ success, errMessage }) => {
+        [this.config.typeKey]: this.cValue
+      }).then(
+        ({ success, errMessage }) => {
           if (success) {
             this.$message({
               type: 'success',
@@ -212,17 +204,14 @@ export default {
           } else {
             console.log(errMessage)
           }
-        })
-        .catch(err => {
+        },
+        err => {
           console.log(err)
-        })
+        }
+      )
     },
     onBind () {
-      if (!this.value) {
-        this.$message({
-          type: 'warning',
-          message: `${this.config.tipText}不能为空`
-        })
+      if (!this.checkValue()) {
         return
       }
       if (!this.code) {
@@ -232,30 +221,26 @@ export default {
         })
         return
       }
-      if (this.value === this.initial) {
-        this.$message({
-          type: 'warning',
-          message: `${this.config.tipText}不能相同`
-        })
-        return
-      }
       authcodeCheck({
-        [this.config.typeKey]: this.value,
+        [this.config.typeKey]: this.cValue,
         [this.config.codeKey]: this.code
-      }).then(({ success, data }) => {
-        if (success) {
-          if (data[this.config.checkKey]) {
-            this.$emit('update', () => this.reset())
-            return
+      }).then(
+        ({ success, data }) => {
+          if (success) {
+            if (data[this.config.checkKey]) {
+              this.$emit('update', this.cValue)
+              return
+            }
           }
+          this.$message({
+            type: 'error',
+            message: `验证码错误`
+          })
+        },
+        err => {
+          console.log(err)
         }
-        this.$message({
-          type: 'error',
-          message: `验证码错误`
-        })
-      }).catch(err => {
-        console.log(err)
-      })
+      )
     }
   }
 }
@@ -263,17 +248,10 @@ export default {
 
 <style lang="scss" scoped>
 .c-line {
-  width: 460px;
-
-  &__left {
-    flex: 0 0 116px;
-    padding-right: $spacing;
-    font-size: 14px;
-    text-align: right;
-  }
+  width: 400px;
 
-  &__right {
-    flex: 0 0 100px;
+  &__around {
+    flex: 0 0 64px;
   }
 }
 

src/views/platform/profile/index.vue → src/layout/components/Navbar/Profile/index.vue

@@ -1,20 +1,15 @@
 <template>
-  <wrapper
-    class="c-profile"
-    fill
-    margin
-    background
-  >
+  <div class="l-flex--col c-profile">
     <div class="l-flex__none l-flex--col center c-profile__header has-padding">
       <div
-        class="o-avatar u-pointer"
+        class="c-sibling-item--v o-avatar u-pointer"
         @click="onAvatarClick"
       >
         <i
           class="o-avatar__img"
           :style="avatarStyle"
         />
-        <i class="o-avatar__upload el-icon-camera" />
+        <i class="o-avatar__upload o-icon sm el-icon-camera" />
         <input
           ref="upload"
           type="file"
@@ -23,19 +18,23 @@
           @change="onUpload"
         >
       </div>
-      <div class="u-font-size--lg has-top-padding">{{ name }}</div>
-      <div class="u-relative has-top-padding">
+      <div class="c-sibling-item--v u-font-size--md">{{ name }}</div>
+      <div class="c-sibling-item--v u-relative">
         <i class="el-icon-user" />
-        {{ role }}
+        <span class="u-font-size--sm">{{ role }}</span>
       </div>
+      <i
+        class="c-profile__close o-icon el-icon-close u-bold u-pointer"
+        @click="onClose"
+      />
     </div>
     <div
       v-loading="loading"
-      class="l-flex__fill l-flex--col center"
+      class="l-flex__fill l-flex--col"
     >
       <el-tabs
         v-model="active"
-        class="c-tabs has-padding u-align-self--stretch"
+        class="c-tabs has-padding"
         stretch
       >
         <el-tab-pane
@@ -51,67 +50,62 @@
       </el-tabs>
       <warning
         v-if="error"
+        class=" u-align-self--center"
         @click="getUserInfo"
       />
       <div
         v-else
-        class="has-padding l-flex--col"
+        class="l-flex__fill l-flex--col center has-padding u-overflow-y--auto"
       >
         <template v-if="active === 'settings'">
-          <div class="l-flex--row has-bottom-padding">
-            <user-info-item
-              v-if="user"
-              key="phone"
-              v-model="phone"
-              type="phone"
-              :initial="user.attributes.phone[0]"
-              @update="changeAttribute('phone', phone, '更新手机号')"
-            />
-          </div>
-          <div class="l-flex--row has-padding--v">
-            <user-info-item
-              v-if="user"
-              key="email"
-              v-model="email"
-              type="email"
-              :initial="user.email"
-              @update="updateUser({email}, '更新邮箱')"
-            />
-          </div>
+          <user-info-item
+            v-if="user"
+            key="phone"
+            class="c-sibling-item--v"
+            type="phone"
+            :initial="phone"
+            @update="onChangePhone"
+          />
+          <user-info-item
+            v-if="user"
+            key="email"
+            class="c-sibling-item--v"
+            type="email"
+            :initial="email"
+            @update="onChangeEmail"
+          />
           <div
             v-if="__WECHAT__"
-            class="l-flex--row center has-top-padding"
+            class="l-flex--row center c-sibling-item--v farther"
           >
             <div
-              class="o-app u-pointer"
+              class="o-app has-active u-pointer"
               @click="onClickWechat"
             >
-              <i class="o-icon wechat has-bg" />
-              <div
-                v-if="wechat"
-                class="l-flex--row"
-              >
-                <div class="c-sibling-item u-color--info light">已绑定</div>
-                <div class="c-sibling-item u-pointer">解绑</div>
-              </div>
-              <div v-else>
-                绑定微信
+              <i class="c-sibling-item--v o-icon md wechat" />
+              <div class="l-flex--row c-sibling-item--v far">
+                <template v-if="wechat">
+                  <div class="c-sibling-item u-color--info light">已绑定</div>
+                  <div class="c-sibling-item">解绑</div>
+                </template>
+                <div v-else>
+                  绑定微信
+                </div>
               </div>
             </div>
             <div
-              class="o-app u-pointer"
+              class="o-app has-active u-pointer"
               @click="onClickApplet"
             >
-              <i class="o-icon applet has-bg" />
-              <div
-                v-if="applet"
-                class="l-flex--row"
-              >
-                <div class="c-sibling-item u-color--info light">已绑定</div>
-                <div class="c-sibling-item u-pointer">解绑</div>
-              </div>
-              <div v-else>
-                绑定小程序
+              <i class="c-sibling-item--v o-icon md applet" />
+              <div class="l-flex--row c-sibling-item--v far">
+                <template v-if="applet">
+                  <div class="c-sibling-item u-color--info light">已绑定</div>
+                  <div class="c-sibling-item">解绑</div>
+                </template>
+                <div v-else>
+                  绑定小程序
+                </div>
               </div>
             </div>
           </div>
@@ -125,13 +119,14 @@
       :visible.sync="showQr"
       custom-class="c-dialog--transparent"
       :close-on-click-modal="false"
+      append-to-body
     >
       <div class="c-wechat has-padding">
         <div class="l-flex--row center c-sibling-item--v u-relative">
-          <i class="c-sibling-item o-icon medium wechat has-bg" />
+          <i class="c-sibling-item o-icon wechat" />
           <span class="c-sibling-item u-color--black u-bold">请使用微信扫一扫</span>
           <i
-            class="c-wechat__close o-icon medium el-icon-close has-active u-bold u-pointer"
+            class="c-wechat__close el-icon-close o-icon has-active u-bold u-pointer"
             @click="onCloseQr"
           />
         </div>
@@ -148,7 +143,7 @@
         </div>
       </div>
     </el-dialog>
-  </wrapper>
+  </div>
 </template>
 
 <script>
@@ -160,10 +155,6 @@ import {
   getQrcode
 } from '@/api/user'
 import { GATEWAY } from '@/constant'
-import {
-  validPhone,
-  validEmail
-} from '@/utils/validate'
 import UserInfoItem from './components/UserInfoItem'
 import ResetPassword from './components/ResetPassword'
 
@@ -180,15 +171,8 @@ export default {
       active: 'settings',
       user: {
         email: '',
-        attributes: {
-          phone: ['']
-        }
+        attributes: {}
       },
-      avatar: '',
-      phone: '',
-      email: '',
-      wechat: '',
-      applet: '',
       showQr: false,
       qrType: 'wechatOptions',
       wechatOptions: {
@@ -200,7 +184,8 @@ export default {
         loading: false,
         retry: false,
         qr: null
-      }
+      },
+      avatar: null
     }
   },
   computed: {
@@ -214,6 +199,18 @@ export default {
       const avatar = this.avatar
       return avatar ? { backgroundImage: `url("${avatar}")` } : null
     },
+    phone () {
+      return this.getOrCreateAttribute(this.user, 'phone')
+    },
+    email () {
+      return this.user.email
+    },
+    wechat () {
+      return this.getOrCreateAttribute(this.user, 'wechat')
+    },
+    applet () {
+      return this.getOrCreateAttribute(this.user, 'wechat-applet-openid')
+    },
     qrOptions () {
       return this[this.qrType]
     },
@@ -240,6 +237,9 @@ export default {
     clearInterval(this.$checkTimer)
   },
   methods: {
+    onClose () {
+      this.$emit('close')
+    },
     onAvatarClick () {
       this.$refs.upload.click()
     },
@@ -256,6 +256,7 @@ export default {
       const reader = new FileReader()
       reader.onload = () => {
         this.avatar = reader.result
+        // this.changeAttribute('avatar', reader.result, '更新头像')
       }
       reader.readAsDataURL(file)
     },
@@ -275,12 +276,7 @@ export default {
       if (!data.attributes) {
         data.attributes = {}
       }
-      this.avatar = this.getOrCreateAttribute(data, 'avatar', '')
-      this.phone = this.getOrCreateAttribute(data, 'phone', '')
-      this.email = data.email ?? ''
-      this.wechat = this.getOrCreateAttribute(data, 'wechat', '')
       this.user = data
-      this.applet = this.getOrCreateAttribute(data, 'wechat-applet-openid', '')
     },
     getOrCreateAttribute (user, key, defaults = '') {
       if (!user.attributes[key]) {
@@ -294,72 +290,18 @@ export default {
       })
     },
     changeAttribute (key, value, meesage) {
-      if (this.user.attributes[key][0] !== value) {
-        this.updateUser({
-          attributes: {
-            ...this.user.attributes,
-            [key]: [value]
-          }
-        }, meesage).then(
-          () => {
-            this.user.attributes[key][0] = value
-          },
-          () => {
-            this.resetAttribute(key)
-          }
-        )
-      }
-    },
-    resetAttribute (key) {
-      this[key] = this.user.attributes[key][0]
-    },
-    resetProp (key) {
-      this[key] = this.user[key] ?? ''
+      return this.updateUser({
+        attributes: {
+          ...this.user.attributes,
+          [key]: [value]
+        }
+      }, meesage)
     },
-    onPhoneChange () {
-      if (!this.phone) {
-        this.$message({
-          type: 'warning',
-          message: '手机号不能为空'
-        })
-        this.resetAttribute('phone')
-        return
-      }
-      if (!validPhone(this.phone)) {
-        this.$message({
-          type: 'warning',
-          message: '手机号格式错误'
-        })
-        this.resetAttribute('phone')
-        return
-      }
-      this.changeAttribute('phone', this.phone, '更新手机号')
+    onChangePhone (value) {
+      this.changeAttribute('phone', value, '更新手机号')
     },
-    onEmailChange () {
-      if (!this.email) {
-        this.$message({
-          type: 'warning',
-          message: '邮箱不能为空'
-        })
-        this.resetProp('email')
-        return
-      }
-      if (!validEmail(this.email)) {
-        this.$message({
-          type: 'warning',
-          message: '邮箱格式错误'
-        })
-        this.resetProp('email')
-        return
-      }
-      this.updateUser({ email: this.email }, '更新邮箱').then(
-        () => {
-          this.user.email = this.email
-        },
-        () => {
-          this.resetProp('email')
-        }
-      )
+    onChangeEmail (value) {
+      this.updateUser({ email: value }, '更新邮箱')
     },
     onClickWechat () {
       if (this.wechat) {
@@ -367,9 +309,7 @@ export default {
           '解除绑定后将无法再收到消息推送',
           '解绑微信',
           { type: 'warning' }
-        ).then(() => {
-          this.changeAttribute('wechat', this.wechat = '', '解绑公众号')
-        })
+        ).then(() => this.changeAttribute('wechat', '', '解绑公众号'))
       } else {
         this.qrType = 'wechatOptions'
         this.showQr = true
@@ -382,11 +322,7 @@ export default {
           '解除绑定后将无法使用小程序的功能',
           '解绑小程序',
           { type: 'warning' }
-        ).then(
-          () => {
-            this.changeAttribute('wechat-applet-openid', this.applet = '', '解绑小程序')
-          }
-        )
+        ).then(() => this.changeAttribute('wechat-applet-openid', '', '解绑小程序'))
       } else {
         this.qrType = 'appletOptions'
         this.showQr = true
@@ -450,7 +386,7 @@ export default {
       const options = this.appletOptions
       options.loading = true
       options.retry = false
-      getQrcode({ page: 'pages/device/device', sourceUrl: GATEWAY }).then(
+      getQrcode({ page: process.env.VUE_APP_APPLET_PAGE, sourceUrl: GATEWAY }).then(
         ({ data }) => {
           options.checking = true
           options.qr = `data:image/png;base64,${data}`
@@ -473,7 +409,7 @@ export default {
         let bound = false
         let needCheck = false
         if (this.wechatOptions.checking) {
-          const wechat = data.attributes.wechat?.[0]
+          const wechat = data.attributes?.wechat?.[0]
           if (wechat) {
             bound = true
             this.wechatOptions.checking = false
@@ -491,7 +427,7 @@ export default {
           }
         }
         if (this.appletOptions.checking) {
-          const applet = data.attributes['wechat-applet-openid']?.[0]
+          const applet = data.attributes?.['wechat-applet-openid']?.[0]
           if (applet) {
             bound = true
             this.appletOptions.checking = false
@@ -522,13 +458,22 @@ export default {
 
 <style lang="scss" scoped>
 .c-profile {
-  overflow: hidden;
-
   &__header {
+    position: relative;
     color: #fff;
     line-height: 1;
     background-color: $blue;
   }
+
+  &__close {
+    position: absolute;
+    top: $spacing--xs;
+    right: $spacing--sm;
+
+    &:hover {
+      color: $primary;
+    }
+  }
 }
 
 .o-avatar {
@@ -549,14 +494,9 @@ export default {
   }
 
   &__upload {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
     position: absolute;
     right: 0;
     bottom: 0;
-    width: 26px;
-    height: 26px;
     color: $blue;
     border-radius: 50%;
     background-color: #fff;
@@ -565,7 +505,8 @@ export default {
 
 .el-icon-user {
   position: absolute;
-  left: -32px;
+  left: -$spacing--xs;
+  transform: translateX(-100%);
 }
 
 .o-app {
@@ -575,11 +516,7 @@ export default {
   align-items: center;
   width: 128px;
   color: $blue;
-  font-size: 16px;
-
-  .o-icon {
-    margin-bottom: $spacing;
-  }
+  font-size: $font-size--sm;
 }
 
 .o-icon {

src/layout/components/Navbar/index.vue

@@ -42,6 +42,20 @@
       :schema="tenantSchema"
       @confirm="onChoosenTenant"
     />
+    <el-drawer
+      title="个人设置"
+      :visible.sync="drawer"
+      direction="rtl"
+      :size="480"
+      :with-header="false"
+      :destroy-on-close="true"
+      append-to-body
+    >
+      <profile
+        class="l-flex__fill"
+        @close="drawer = false"
+      />
+    </el-drawer>
   </div>
 </template>
 
@@ -50,15 +64,18 @@ import { mapGetters } from 'vuex'
 import { getPlatformTenants } from '@/api/user'
 import Breadcrumb from './Breadcrumb'
 import UploadDashboard from './UploadDashboard'
+import Profile from './Profile'
 
 export default {
   name: 'Navbar',
   components: {
+    Profile,
     Breadcrumb,
     UploadDashboard
   },
   data () {
     return {
+      drawer: false,
       tenantSchema: {
         condition: { name: '' },
         list: getPlatformTenants,
@@ -89,7 +106,8 @@ export default {
     onCommand (command) {
       switch (command) {
         case 'profile':
-          this.$router.push({ name: 'profile' })
+          // this.$router.push({ name: 'profile' })
+          this.drawer = true
           break
         case 'logout':
           this.$store.dispatch('user/logout')

src/router/index.js

@@ -51,13 +51,6 @@ export const asyncRoutes = [
         path: 'home',
         component: () => import('@/views/dashboard/index'),
         meta: { title: '首页', icon: 'home' }
-      },
-      {
-        hidden: true,
-        name: 'profile',
-        path: 'profile',
-        component: () => import('@/views/platform/profile/index'),
-        meta: { title: '个人设置' }
       }
     ]
   },

src/scss/base/_cover.scss

@@ -21,9 +21,14 @@
 }
 
 .el-pagination__jump {
-  margin-left: 10px;
+  margin-left: $spacing--xs;
 }
 
 .el-result {
-  padding: 32px 16px;
+  padding: $padding--2xl $padding--lg;
+}
+
+.el-drawer__body {
+  display: flex;
+  flex-direction: column;
 }

src/scss/bem/_component.scss

@@ -346,6 +346,14 @@
     & + &.far {
       margin-top: $spacing  !important;
     }
+
+    & + &.farther {
+      margin-top: $spacing--lg  !important;
+    }
+
+    & + &.farthest {
+      margin-top: $spacing--2xl  !important;
+    }
   }
 }
 

src/scss/bem/_object.scss

@@ -183,9 +183,22 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: 64px;
-  height: 64px;
-  font-size: 32px;
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+  @extend .has-bg;
+
+  &.lg {
+    width: 64px;
+    height: 64px;
+    font-size: 32px;
+  }
+
+  &.md {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+  }
 
   &.medium {
     width: 32px;

src/scss/bem/_utility.scss

@@ -83,8 +83,14 @@
   font-weight: bold;
 }
 
-.u-text-center {
-  text-align: center;
+.u-text {
+  &--center {
+    text-align: center;
+  }
+
+  &--right {
+    text-align: right;
+  }
 }
 
 .u-align-self {

src/views/broadcast/deploy/index.vue

@@ -67,7 +67,7 @@
         />
         <div
           v-if="templateId && !templateContent"
-          class="c-grid-form__row u-text-center"
+          class="c-grid-form__row u-text--center"
         >
           <i class="el-icon-loading" />
         </div>

src/views/broadcast/template/index.vue

@@ -52,11 +52,11 @@
           >
             <template #append>
               <i
-                class="c-sibling-item o-icon medium el-icon-plus has-active"
+                class="c-sibling-item o-icon el-icon-plus has-active"
                 @click="onAddPlaceholder(key)"
               />
               <i
-                class="c-sibling-item o-icon medium el-icon-delete has-active"
+                class="c-sibling-item o-icon el-icon-delete has-active"
                 @click="onDelPlaceholder(key)"
               />
             </template>

src/views/dashboard/Dashboard.vue

@@ -5,7 +5,7 @@
       @click="onClickMineDevices"
     >
       <div class="l-flex__none u-color--black u-bold">我的设备</div>
-      <div class="l-flex__none c-count__item u-color--black u-bold u-text-center">
+      <div class="l-flex__none c-count__item u-color--black u-bold u-text--center">
         <div>总数</div>
         <i
           v-if="monitor.loading"
@@ -13,7 +13,7 @@
         />
         <div v-else>{{ monitor.total }}</div>
       </div>
-      <div class="l-flex__none c-count__item u-color--success dark u-bold u-text-center">
+      <div class="l-flex__none c-count__item u-color--success dark u-bold u-text--center">
         <div>● 在线</div>
         <i
           v-if="monitor.loading"
@@ -21,7 +21,7 @@
         />
         <div v-else>{{ monitor.online }}</div>
       </div>
-      <div class="l-flex__none c-count__item u-color--error dark u-bold u-text-center">
+      <div class="l-flex__none c-count__item u-color--error dark u-bold u-text--center">
         <div>● 离线</div>
         <i
           v-if="monitor.loading"
@@ -29,7 +29,7 @@
         />
         <div v-else>{{ monitor.offline }}</div>
       </div>
-      <div class="l-flex__none c-count__item u-color--info u-bold u-text-center">
+      <div class="l-flex__none c-count__item u-color--info u-bold u-text--center">
         <div>● 未启用</div>
         <i
           v-if="monitor.loading"
@@ -38,7 +38,7 @@
         <div v-else>{{ monitor.inactive }}</div>
       </div>
       <i
-        class="c-count__refresh el-icon-refresh has-active u-pointer"
+        class="el-icon-refresh o-icon md u-color--blue has-active u-pointer"
         @click.stop="onRefresh"
       />
     </div>
@@ -88,7 +88,7 @@
     </div>
     <div
       v-if="!deviceOptions.loaded"
-      class="c-sibling-item--v far u-text-center"
+      class="c-sibling-item--v far u-text--center"
     >
       <i class="el-icon-loading" />
     </div>
@@ -240,18 +240,13 @@ export default {
 <style lang="scss" scoped>
 .c-count {
   justify-content: space-between;
-  padding: 8px $spacing;
+  padding: $spacing--xs $spacing;
   border-radius: $radius;
   background-color: #fff;
 
   &__item > div:first-child {
     margin-bottom: 10px;
   }
-
-  &__refresh {
-    color: $blue;
-    font-size: 28px;
-  }
 }
 
 .c-cards {

src/views/dashboard/components/Card.vue

@@ -5,12 +5,12 @@
   >
     <div class="l-flex--row center c-sibling-item--v">
       <i
-        class="l-flex__none c-sibling-item o-icon medium has-bg"
+        class="l-flex__none c-sibling-item o-icon"
         :class="type"
       />
       <div class="c-sibling-item far o-card__main u-bold u-relative">
         <auto-text
-          class="u-text-center"
+          class="u-text--center"
           :text="title"
         />
         <i
@@ -23,12 +23,12 @@
     </div>
     <auto-text
       v-if="tip"
-      class="c-sibling-item--v o-card__tip u-bold u-text-center"
+      class="c-sibling-item--v o-card__tip u-bold u-text--center"
       :text="tip"
     />
     <auto-text
       v-if="desc"
-      class="c-sibling-item--v o-card__desc u-text-center"
+      class="c-sibling-item--v o-card__desc u-text--center"
       :text="desc"
     />
   </div>

src/views/dashboard/components/CardTenant.vue

@@ -4,10 +4,10 @@
     @click="go"
   >
     <div class="l-flex--row center c-sibling-item--v">
-      <i class="l-flex__none c-sibling-item o-card__icon o-icon medium el-icon-user u-bold" />
-      <div class="c-sibling-item far o-card__main u-bold u-text-center">总租户</div>
+      <i class="l-flex__none c-sibling-item o-card__icon o-icon el-icon-user u-bold" />
+      <div class="c-sibling-item far o-card__main u-bold u-text--center">总租户</div>
     </div>
-    <div class="c-sibling-item--v o-card__tip u-text-center">
+    <div class="c-sibling-item--v o-card__tip u-text--center">
       <i
         v-if="loading"
         class="el-icon-loading"

src/views/dashboard/components/Device.vue

@@ -40,7 +40,7 @@
         />
         <template v-else-if="current">
           <auto-text
-            class="l-flex__none u-align-self--stretch c-sibling-item--v u-font-size--md u-bold u-text-center"
+            class="l-flex__none u-align-self--stretch c-sibling-item--v u-font-size--md u-bold u-text--center"
             :text="current.name"
           />
           <div class="l-flex__none l-flex--row c-sibling-item--v">
@@ -71,7 +71,7 @@
         {{ lastOnline }}
       </span>
     </div>
-    <div class="l-flex__none l-flex--row c-sibling-item--v o-device__next u-color--info light u-font-size--xs u-text-center">
+    <div class="l-flex__none l-flex--row c-sibling-item--v o-device__next u-color--info light u-font-size--xs u-text--center">
       <auto-text
         v-if="next"
         class="l-flex__fill"
@@ -79,9 +79,9 @@
       />
     </div>
     <div class="l-flex__none l-flex--row c-sibling-item--v near u-color--blue u-font-size--xs u-bold">
-      <i class="l-flex__none c-sibling-item nearer el-icon-location-outline u-font-size" />
+      <i class="l-flex__none c-sibling-item el-icon-location-outline u-font-size" />
       <auto-text
-        class="l-flex__auto"
+        class="l-flex__auto c-sibling-item nearer"
         :text="address"
       />
     </div>

src/views/dashboard/v0/Cards.vue

@@ -13,7 +13,7 @@
         />
         {{ item.label }}
       </div>
-      <div class="c-dashoboard-cards--v0__value u-bold u-ellipsis u-text-center">{{ item.value }}</div>
+      <div class="c-dashoboard-cards--v0__value u-bold u-ellipsis u-text--center">{{ item.value }}</div>
     </div>
   </div>
 </template>

src/views/dashboard/v0/DeviceCalender.vue

@@ -1,6 +1,6 @@
 <template>
   <box title="各大屏当前播放节目">
-    <div class="l-flex__fill l-flex--col c-calendar u-text-center">
+    <div class="l-flex__fill l-flex--col c-calendar u-text--center">
       <div class="l-flex__none l-flex--row c-calendar__header">
         <div class="col__deviceName">设备名称</div>
         <div class="col__programName">节目名称</div>
@@ -20,7 +20,7 @@
             >
               <div class="col__deviceName">
                 <auto-text
-                  class="u-text-center"
+                  class="u-text--center"
                   :text="item.name"
                 />
               </div>

src/views/dashboard/v1/Cards.vue

@@ -16,7 +16,7 @@
         />
         {{ item.label }}
       </div>
-      <div class="c-dashoboard-cards--v1__value u-bold u-ellipsis u-text-center">{{ item.value }}</div>
+      <div class="c-dashoboard-cards--v1__value u-bold u-ellipsis u-text--center">{{ item.value }}</div>
     </div>
   </div>
 </template>

src/views/dashboard/v1/DeviceCalender.vue

@@ -1,6 +1,6 @@
 <template>
   <box title="各大屏当前播放节目">
-    <div class="l-flex__fill l-flex--col c-calendar u-text-center">
+    <div class="l-flex__fill l-flex--col c-calendar u-text--center">
       <div class="l-flex__none l-flex--row c-calendar__header">
         <div class="col__deviceName">设备名称</div>
         <div class="col__programName">节目名称</div>
@@ -21,7 +21,7 @@
             >
               <div class="col__deviceName">
                 <auto-text
-                  class="u-text-center"
+                  class="u-text--center"
                   :text="item.name"
                 />
               </div>

src/views/dashboard/v1/MessageNotice.vue

@@ -30,25 +30,25 @@
               </div>
               <div class="l-flex__fill col__deviceName">
                 <auto-text
-                  class="u-text-center"
+                  class="u-text--center"
                   :text="item.deviceName"
                 />
               </div>
               <div class="l-flex__none col__type">
                 <auto-text
-                  class="u-text-center"
+                  class="u-text--center"
                   :text="item.type"
                 />
               </div>
               <div class="l-flex__none col__handle">
                 <auto-text
-                  class="u-text-center"
+                  class="u-text--center"
                   :text="item.handle"
                 />
               </div>
               <div class="l-flex__none col__status">
                 <auto-text
-                  class="u-text-center"
+                  class="u-text--center"
                   :text="item.status.label"
                 />
               </div>
@@ -75,25 +75,25 @@
                 </div>
                 <div class="l-flex__fill col__deviceName">
                   <auto-text
-                    class="u-text-center"
+                    class="u-text--center"
                     :text="item.deviceName"
                   />
                 </div>
                 <div class="l-flex__none col__type">
                   <auto-text
-                    class="u-text-center"
+                    class="u-text--center"
                     :text="item.type"
                   />
                 </div>
                 <div class="l-flex__none col__handle">
                   <auto-text
-                    class="u-text-center"
+                    class="u-text--center"
                     :text="item.handle"
                   />
                 </div>
                 <div class="l-flex__none col__status">
                   <auto-text
-                    class="u-text-center"
+                    class="u-text--center"
                     :text="item.status.label"
                   />
                 </div>

src/views/dashboard/v1/StatisticCard.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="l-flex--col">
     <div class="block__total l-flex--col">
-      <div class="total__title u-bold u-text-center">{{ title }}总数</div>
+      <div class="total__title u-bold u-text--center">{{ title }}总数</div>
       <div
-        class="total__num u-bold u-text-center"
+        class="total__num u-bold u-text--center"
         :style="{ color: totalColor }"
       >
         {{ total }} <span class="total__unit">{{ unit }}</span>
@@ -15,11 +15,11 @@
         :key="item.name"
         class="block__item"
       >
-        <div class="item__title u-text-center">
+        <div class="item__title u-text--center">
           {{ item.label }}
         </div>
         <div
-          class="item__num u-bold u-text-center"
+          class="item__num u-bold u-text--center"
           :style="{ color: item.color }"
         >
           {{ item.value }} <span class="item__unit">{{ unit }}</span>
@@ -73,7 +73,7 @@ export default {
       height: 24px;
       line-height: 36px;
       color: #ffffff;
-      margin:10px 0 20px ;
+      margin: 10px 0 20px;
     }
     &__num {
       font-size: 72px;

src/views/dashboard/v1/SystemLoad.vue

@@ -27,7 +27,7 @@
               >
                 <div class="l-flex__fill">
                   <auto-text
-                    class="u-text-center"
+                    class="u-text--center"
                     :text="item.ip"
                   />
                 </div>
@@ -62,7 +62,7 @@
                 </div>
                 <div class="l-flex__fill">
                   <auto-text
-                    class="u-text-center"
+                    class="u-text--center"
                     :text="item.status === 1 ? '正常' : '离线'"
                     :style="{
                       color: item.status === 1 ? '#04FF98' : '#F40645',

src/views/device/detail/components/DeviceInvoke/DeviceNetwork/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col center has-border radius has-padding">
     <i
-      class="o-icon has-bg u-pointer"
+      class="o-icon lg u-pointer"
       @click="invoke"
     />
     <div class="has-padding u-color--black u-bold">网络设置</div>

src/views/device/detail/components/DeviceInvoke/DeviceReboot.vue

@@ -4,7 +4,7 @@
     class="l-flex--col center has-border radius has-padding"
   >
     <i
-      class="o-icon has-bg u-pointer"
+      class="o-icon lg u-pointer"
       @click="invoke"
     />
     <div class="has-padding u-color--black u-bold">重启设备</div>

src/views/device/detail/components/DeviceInvoke/MultifunctionCardPowerSwitch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col center has-border radius has-padding">
     <i
-      class="o-icon has-bg u-pointer"
+      class="o-icon lg u-pointer"
       @click="invoke"
     />
     <div class="has-padding u-color--black u-bold">开关电源</div>

src/views/device/detail/components/DeviceInvoke/PLCSwitch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col center has-border radius has-padding">
     <i
-      class="o-icon has-bg u-pointer"
+      class="o-icon lg u-pointer"
       @click="onInvoke"
     />
     <div class="has-padding u-color--black u-bold">开关电源(PLC)</div>

src/views/device/detail/components/DeviceInvoke/ScreenLight.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col center has-border radius has-padding ">
     <i
-      class="o-icon has-bg u-pointer"
+      class="o-icon lg u-pointer"
       @click="invoke"
     />
     <div class="has-padding u-color--black u-bold">{{ type }}</div>

src/views/device/detail/components/DeviceInvoke/ScreenSwitch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col center has-border radius has-padding">
     <i
-      class="o-icon has-bg u-pointer"
+      class="o-icon lg u-pointer"
       @click="invoke"
     />
     <div class="has-padding u-color--black u-bold">开关大屏</div>

src/views/device/detail/components/DeviceInvoke/ScreenVolume.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col center has-border radius has-padding ">
     <i
-      class="o-icon has-bg u-pointer"
+      class="o-icon lg u-pointer"
       @click="invoke"
     />
     <div class="has-padding u-color--black u-bold">{{ type }}</div>

src/views/device/detail/components/DeviceInvoke/index.vue

@@ -29,7 +29,7 @@ export default {
       return h(
         'div',
         {
-          staticClass: 'u-font-size--lg u-color--info u-text-center'
+          staticClass: 'u-font-size--lg u-color--info u-text--center'
         },
         '设备当前未上线'
       )

src/views/device/detail/components/DeviceRuntime/Download.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col c-device-grid-item has-border radius">
     <div class="l-flex--row l-flex__none has-bottom-padding">
-      <i class="l-flex__none c-sibling-item o-icon medium has-bg" />
+      <i class="l-flex__none c-sibling-item o-icon" />
       <span class="l-flex__fill c-sibling-item near u-color--info u-ellipsis">文件下载</span>
       <i
         v-if="count"
@@ -9,7 +9,7 @@
         @click="showDownload"
       />
     </div>
-    <div class="l-flex__fill u-text-center">
+    <div class="l-flex__fill u-text--center">
       <div class="has-bottom-padding">当前已下载文件</div>
       <div class="u-color--black">
         <span class="u-font-size--3xl">{{ downloadCount }}</span> 个
@@ -17,7 +17,7 @@
     </div>
     <div
       v-if="count !== downloadCount"
-      class="l-flex__none u-color--error dark u-bold u-text-center"
+      class="l-flex__none u-color--error dark u-bold u-text--center"
     >
       正在下载文件...
     </div>

src/views/device/detail/components/DeviceRuntime/Running.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col c-device-grid-item has-border radius">
     <div class="l-flex__none l-flex--row">
-      <i class="l-flex__none c-sibling-item o-icon medium has-bg" />
+      <i class="l-flex__none c-sibling-item o-icon" />
       <span class="l-flex__fill c-sibling-item near u-color--info u-ellipsis">状态</span>
       <i
         v-if="asking"
@@ -9,7 +9,7 @@
       />
       <i
         v-else
-        class="l-flex__none o-icon sm has-bg u-pointer"
+        class="l-flex__none o-icon sm u-pointer"
         @click="invoke"
       />
     </div>
@@ -82,9 +82,7 @@ export default {
 
 <style lang="scss" scoped>
 .o-icon {
-  &.medium {
-    background-image: url("~@/assets/icon_condition.png");
-  }
+  background-image: url("~@/assets/icon_condition.png");
 
   &.sm {
     background-image: url("~@/assets/icon_screenshot.png");

src/views/device/detail/components/DeviceRuntime/ScreenShot.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col c-device-grid-item has-border radius">
     <div class="l-flex__none l-flex--row has-bottom-padding">
-      <i class="l-flex__none c-sibling-item o-icon medium has-bg" />
+      <i class="l-flex__none c-sibling-item o-icon" />
       <span class="l-flex__fill c-sibling-item near u-color--info u-ellipsis">截屏</span>
       <i
         v-if="asking"
@@ -9,7 +9,7 @@
       />
       <i
         v-else
-        class="l-flex__none o-icon sm has-bg u-pointer"
+        class="l-flex__none o-icon sm u-pointer"
         @click="invoke"
       />
     </div>
@@ -57,13 +57,10 @@ export default {
 
 <style lang="scss" scoped>
 .o-icon {
-  &.medium {
-    background-image: url("~@/assets/icon_image.png");
-  }
+  background-image: url("~@/assets/icon_image.png");
 
   &.sm {
     background-image: url("~@/assets/icon_screenshot.png");
   }
-
 }
 </style>

src/views/device/detail/components/DeviceRuntime/index.vue

@@ -21,7 +21,7 @@ export default {
       return h(
         'div',
         {
-          staticClass: 'u-font-size--lg u-color--info u-text-center'
+          staticClass: 'u-font-size--lg u-color--info u-text--center'
         },
         '设备当前未上线'
       )

src/views/device/detail/components/DeviceTakeOver/components/AssetCard.vue

@@ -12,7 +12,7 @@
       />
       <i
         v-if="status === -1"
-        class="o-preload-asset__refresh o-icon has-active el-icon-refresh u-pointer"
+        class="o-preload-asset__refresh o-icon lg has-active el-icon-refresh u-pointer"
       />
     </div>
     <div class="l-flex--row o-preload-asset__footer">

src/views/device/detail/components/external/Sensors/Sensor.vue

@@ -2,7 +2,7 @@
   <div class="l-flex--col c-device-grid-item o-sensor has-border radius">
     <div class="l-flex--row l-flex__none">
       <i
-        class="l-flex__none c-sibling-item o-icon medium has-bg"
+        class="l-flex__none c-sibling-item o-icon"
         :class="type"
       />
       <span class="l-flex__fill c-sibling-item near u-color--info u-ellipsis">{{ title }}</span>
@@ -14,7 +14,7 @@
     </div>
     <div class="l-flex__fill l-flex--row center u-font-size--md u-color--black u-bold">
       <div
-        class="u-text-center"
+        class="u-text--center"
         :style="{ color: tipColor }"
       >
         {{ tip }}

src/views/device/detail/dashboard/Box.vue

@@ -5,7 +5,7 @@
   >
     <div class="l-flex__none c-box__top" />
     <div class="l-flex__fill l-flex--col c-box__main has-bg">
-      <div class="l-flex__none c-box__header u-text-center">
+      <div class="l-flex__none c-box__header u-text--center">
         <div class="u-bold">{{ title }}</div>
         <i
           v-if="!empty"

src/views/device/detail/dashboard/DeviceInfo.vue

@@ -6,9 +6,9 @@
         :key="item.id"
         class="l-flex__fill l-flex--row"
       >
-        <div class="l-flex__fill c-device-dashboard-info__label u-text-center">{{ item.label }}</div>
+        <div class="l-flex__fill c-device-dashboard-info__label u-text--center">{{ item.label }}</div>
         <auto-text
-          class="l-flex__fill u-text-center"
+          class="l-flex__fill u-text--center"
           :text="device[item.key]"
         />
       </div>

src/views/device/detail/dashboard/Sensor.vue

@@ -9,12 +9,12 @@
       :class="{ fullscreen }"
     >
       <div
-        class="l-flex__none c-device-dashboard-sensor__tip u-bold u-text-center"
+        class="l-flex__none c-device-dashboard-sensor__tip u-bold u-text--center"
         :style="{ color: tipColor }"
       >
         {{ tip }}
       </div>
-      <div class="l-flex__none c-device-dashboard-sensor__current u-text-center">
+      <div class="l-flex__none c-device-dashboard-sensor__current u-text--center">
         <template v-if="fullscreen">
           {{ sensorTime }} {{ sensorName }}
         </template>
@@ -37,11 +37,11 @@
               :key="index"
               class="l-flex--row c-device-dashboard-sensor__item"
             >
-              <div class="l-flex__fill u-text-center u-ellipsis"> {{ item.time }}</div>
-              <div class="l-flex__fill u-text-center u-ellipsis"> {{ item.name }}</div>
+              <div class="l-flex__fill u-text--center u-ellipsis"> {{ item.time }}</div>
+              <div class="l-flex__fill u-text--center u-ellipsis"> {{ item.name }}</div>
               <div
                 :style="{ color: tipColor }"
-                class="l-flex__fill u-text-center"
+                class="l-flex__fill u-text--center"
               >
                 {{ item.value || '-' }}
               </div>

src/views/device/detail/index.vue

@@ -7,7 +7,7 @@
     <div class="l-flex__none c-detail__header">
       <div class="l-flex--row has-padding">
         <i
-          class="l-flex__none c-sibling-item o-icon medium o-icon--hover el-icon-arrow-left u-bold u-pointer"
+          class="l-flex__none c-sibling-item o-icon o-icon--hover el-icon-arrow-left u-bold u-pointer"
           @click="onBack"
         />
         <template v-if="device">

src/views/platform/tenant/device/settings/components/external/ReceivingCard/index.vue

@@ -24,7 +24,7 @@
               <div class="l-flex__none c-info__title">
                 拓扑结构
                 <i
-                  class="o-icon medium el-icon-view has-active"
+                  class="o-icon el-icon-view has-active"
                   @click="onView"
                 />
               </div>

src/views/platform/tenant/device/settings/index.vue

@@ -8,7 +8,7 @@
       <template v-if="device">
         <div class="l-flex--row has-padding">
           <i
-            class="l-flex__none c-sibling-item o-icon medium o-icon--hover el-icon-arrow-left u-bold u-pointer"
+            class="l-flex__none c-sibling-item o-icon o-icon--hover el-icon-arrow-left u-bold u-pointer"
             @click="onBack"
           />
           <auto-text

src/views/realm/user/Account.vue

@@ -4,7 +4,7 @@
     :schema="schema"
   >
     <template #pagination="{ options, pagination }">
-      <div class="l-flex__none u-text-center">
+      <div class="l-flex__none u-text--center">
         <el-button-group
           v-if="options.params.pageNum > 1 || options.totalCount > options.params.pageSize"
           class="has-top-padding"

src/views/realm/user/Settings.vue

@@ -114,7 +114,7 @@
     </template>
     <div
       v-else
-      class="u-text-center"
+      class="u-text--center"
     >
       <div
         v-if="ignore"

src/views/screen/deploy/ratio/index.vue

@@ -8,7 +8,7 @@
   >
     <div class="l-flex__none l-flex--row c-step__header">
       <div class="l-flex__none c-sibling-item o-button hidden" />
-      <div class="l-flex__fill u-text-center">
+      <div class="l-flex__fill u-text--center">
         请选择需要上播的设备对应的宽高比并配置相关上播内容
       </div>
       <button

src/views/screen/material/program/ast/Designer.vue

@@ -15,21 +15,21 @@
     />
     <div class="l-flex__none l-flex--row c-designer__header">
       <i
-        class="c-sibling-item c-designer__shortcut el-icon-arrow-left o-icon medium o-icon--hover u-pointer"
+        class="c-sibling-item c-designer__shortcut el-icon-arrow-left o-icon o-icon--hover u-pointer"
         @click="onBack"
       />
       <span class="c-sibling-item near u-font-size--md u-bold">{{ program.name }}</span>
       <span class="c-sibling-item near u-font-size--xs">{{ program.resolutionRatio }}</span>
       <div
         v-if="hasAudio"
-        class="c-sibling-item c-designer__shortcut o-icon medium o-icon--hover u-pointer"
+        class="c-sibling-item c-designer__shortcut o-icon o-icon--hover u-pointer"
         @click="toggleMute"
       >
         <volume :muted="muted" />
       </div>
       <div
         v-if="hasNext"
-        class="c-sibling-item c-designer__shortcut o-icon medium o-icon--hover u-pointer"
+        class="c-sibling-item c-designer__shortcut o-icon o-icon--hover u-pointer"
         @click="switchBgm"
       >
         <i class="o-next" />
@@ -129,7 +129,7 @@
               class="c-sibling-item farthest o-widget-cfg"
               draggable
             >
-              <span class="c-sibling-item--v o-icon medium o-widget-cfg__icon">
+              <span class="c-sibling-item--v o-icon o-widget-cfg__icon">
                 <svg-icon :icon-class="cfg.icon" />
               </span>
               <span class="c-sibling-item--v nearer o-widget-cfg__text u-font-size--xs">{{ cfg.label }}</span>
@@ -308,7 +308,7 @@
         <template #header>
           <i
             v-if="!!fileDir"
-            class="o-icon medium o-icon--hover el-icon-arrow-left u-bold u-pointer"
+            class="o-icon o-icon--hover el-icon-arrow-left u-bold u-pointer"
             @click="onDirBack"
           />
         </template>

src/views/screen/material/program/ast/Viewer.vue

@@ -14,14 +14,14 @@
       <span class="c-sibling-item near u-color--info u-font-size--xs">{{ program.resolutionRatio }}</span>
       <div
         v-if="hasAudio"
-        class="c-sibling-item o-icon medium o-icon--hover u-pointer"
+        class="c-sibling-item o-icon o-icon--hover u-pointer"
         @click="toggleMute"
       >
         <volume :muted="muted" />
       </div>
       <div
         v-if="hasNext"
-        class="c-sibling-item o-icon medium o-icon--hover u-pointer"
+        class="c-sibling-item o-icon o-icon--hover u-pointer"
         @click="switchBgm"
       >
         <i class="o-next" />

src/views/screen/review/workflow/detail/index.vue

@@ -8,7 +8,7 @@
   >
     <div class="l-flex__none l-flex--row c-sibling-item--v u-color--black">
       <i
-        class="l-flex__none c-sibling-item o-icon medium o-icon--hover el-icon-arrow-left u-pointer u-bold"
+        class="l-flex__none c-sibling-item o-icon o-icon--hover el-icon-arrow-left u-pointer u-bold"
         @click="onBack"
       />
       <span