perf: adjust some styles

.env

@@ -35,6 +35,8 @@ VUE_APP_THUMBNAIL = '/api/imageproxy'
 VUE_APP_THUMBNAIL_ORIGIN = ''
 
 # keycloak
+# 默认需要realm-manager下的view-user，用于查看用户信息
+# 管理员需要realm-manager下的view-realm，用于查看租户、角色、凭证等信息
 VUE_APP_KEYCLOAK_OPTIONS_URL = '/auth'
 VUE_APP_KEYCLOAK_OPTIONS_REALM = 'smsb'
 VUE_APP_KEYCLOAK_OPTIONS_CLIENTID = 'frontend-api'

mock/proxy.js

@@ -9,7 +9,7 @@ const base_url = process.env.VUE_APP_BASE_API
 const minioKey = process.env.VUE_APP_MINIO.replace(base_url, '')
 const thumbnailKey = process.env.VUE_APP_THUMBNAIL.replace(base_url, '')
 
-const isHttps = !/^[0-9.:]+$/.test(gate)
+const isHttps = url => !/^[0-9.:]+$/.test(url)
 
 module.exports = {
   register (router) {
@@ -24,7 +24,7 @@ module.exports = {
 
 function createProxy (to, replace) {
   return proxy(to, {
-    https: isHttps,
+    https: isHttps(to),
     parseReqBody: false,
     proxyReqPathResolver (req) {
       const url = replace ? `${replace}${req.url}` : req.url
@@ -36,7 +36,7 @@ function createProxy (to, replace) {
 
 function createThumbnailProxy (to) {
   return proxy(to, {
-    https: isHttps,
+    https: isHttps(to),
     parseReqBody: false,
     proxyReqPathResolver (req) {
       const url = `${thumbnailKey}${req.url.replace(new RegExp(`http.*${minioKey}`), `http${isHttps ? 's' : ''}://${gate}${minioKey}`)}`

src/components/dialog/TaskDialog/index.vue

@@ -66,7 +66,7 @@
             <el-time-picker
               v-model="item.start"
               class="u-width--xs"
-              placeholder="开启时间"
+              :placeholder="startPlaceholder"
               value-format="HH:mm:00"
               format="HH:mm"
               clearable
@@ -78,7 +78,7 @@
             <el-time-picker
               v-model="item.end"
               class="c-sibling-item u-width--xs"
-              placeholder="关闭时间"
+              :placeholder="endPlaceholder"
               value-format="HH:mm:00"
               format="HH:mm"
               clearable
@@ -138,6 +138,14 @@ export default {
     multi: {
       type: Boolean,
       default: true
+    },
+    startPlaceholder: {
+      type: String,
+      default: '开启时间'
+    },
+    endPlaceholder: {
+      type: String,
+      default: '关闭时间'
     }
   },
   data () {

src/components/service/DraggableItem/index.vue

@@ -9,7 +9,7 @@
       />
     </div>
     <div
-      v-if="item.disabled"
+      v-if="simple || item.disabled"
       class="l-flex__none c-sibling-item near u-color--info u-font-size--xs"
     >
       {{ duration }}
@@ -42,6 +42,10 @@ export default {
     item: {
       type: Object,
       required: true
+    },
+    simple: {
+      type: [Boolean, String],
+      default: false
     }
   },
   computed: {

src/components/table/Table/Column.vue

@@ -205,12 +205,18 @@ export default {
             const allowed = allow ? allow(data.row) : true
             return h('div', {
               staticClass: allowed ? 'c-table__btn' : 'c-table__btn disabled',
-              on: allowed && on && {
-                click ($event) {
-                  $event.stopPropagation()
-                  on(data.row, data.$index)
+              on: allowed && on
+                ? {
+                  click ($event) {
+                    $event.stopPropagation()
+                    on(data.row, data.$index)
+                  }
+                }
+                : {
+                  click ($event) {
+                    $event.stopPropagation()
+                  }
                 }
-              }
             }, label
               ? typeof label === 'string'
                 ? label

src/components/table/Table/index.vue

@@ -3,7 +3,7 @@
     :key="tableKey"
     v-loading="options.loading"
     class="l-flex__auto l-flex--col c-table"
-    :class="{ 'prevent-copy': preventCopy }"
+    :class="{ 'need-click': needClick }"
   >
     <div
       v-if="hasHeader"
@@ -47,7 +47,9 @@
             @change="onChange"
           />
           <template v-if="filter.type === 'switch'">
-            <span class="c-sibling-item">{{ filter.placeholder }}</span>
+            <span class="c-sibling-item">
+              {{ filter.placeholder }}
+            </span>
             <el-switch
               v-model="options.params[filter.key]"
               class="c-sibling-item"
@@ -64,7 +66,9 @@
               :false-label="0"
               @change="onChange"
             >
-              <span class="has-active">{{ filter.label }}</span>
+              <span class="has-active">
+                {{ filter.label }}
+              </span>
             </el-checkbox>
           </template>
           <template v-if="filter.type === 'datepicker'">
@@ -163,8 +167,8 @@ export default {
     pageSize () {
       return this.schema.pageSize || 10
     },
-    preventCopy () {
-      return !!this.tableListeners['row-dblclick']
+    needClick () {
+      return !!this.tableListeners['row-dblclick'] || !!this.tableListeners['row-click']
     },
     cols () {
       return this.schema.cols.filter(Boolean)

src/scss/bem/_component.scss

@@ -40,7 +40,7 @@
   .el-dialog__footer {
     flex: none;
     position: relative;
-    padding: $padding--md $padding--lg;
+    padding: $padding--sm $padding--lg;
   }
 
   .el-dialog__header {
@@ -73,7 +73,7 @@
   }
 
   .el-dialog__close {
-    padding: $padding--md $padding--lg;
+    padding: $padding--sm $padding--lg;
     color: $black;
     font-size: $font-size--lg;
     font-weight: bold;
@@ -235,21 +235,15 @@
     gap: inherit;
   }
 
-  &.prevent-copy {
+  &.need-click {
     .el-table__body-wrapper {
       .el-table__row {
-        user-select: none;
         cursor: pointer;
 
         &.disabled {
           color: $gray;
-          pointer-events: none;
           cursor: not-allowed;
         }
-
-        .copy {
-          user-select: text;
-        }
       }
     }
   }
@@ -456,10 +450,10 @@
 .c-info {
   color: $black;
   font-size: $font-size--sm;
-  line-height: 1;
+  line-height: normal;
 
   &__block {
-    padding: $padding--lg $padding--xl;
+    padding: $padding--md $padding--lg;
     background-color: #f5f7f9;
 
     & + & {
@@ -470,7 +464,7 @@
   &__title {
     display: inline-flex;
     align-items: center;
-    width: 120px;
+    width: $width--xs;
     color: $info--dark;
   }
 

src/scss/bem/_ishas.scss

@@ -1,38 +1,38 @@
 .has-padding {
-  padding: $spacing  !important;
+  padding: $padding--lg  !important;
 
   &--h {
-    padding: 0 $spacing  !important;
+    padding: 0 $padding--lg  !important;
   }
 
   &--v {
-    padding: $spacing 0 !important;
+    padding: $padding--lg 0 !important;
   }
 }
 
 .has-top-padding {
-  padding-top: $spacing  !important;
+  padding-top: $padding--lg  !important;
 
   &--sm {
-    padding-top: $spacing--sm  !important;
+    padding-top: $padding--md  !important;
   }
 }
 
 .has-bottom-padding {
-  padding-bottom: $spacing  !important;
+  padding-bottom: $padding--lg  !important;
 
   &--sm {
-    padding-bottom: $spacing--sm  !important;
+    padding-bottom: $padding--md  !important;
   }
 }
 
 .has-left-padding {
-  padding-left: $spacing  !important;
+  padding-left: $padding--lg  !important;
 }
 
 .has-tl-padding {
-  padding-top: $spacing  !important;
-  padding-left: $spacing  !important;
+  padding-top: $padding--lg  !important;
+  padding-left: $padding--lg  !important;
 }
 
 .has-bg {
@@ -49,6 +49,10 @@
   }
 }
 
+.has-top-border {
+  border-top: 1px solid $border;
+}
+
 .has-bottom-border {
   border-bottom: 1px solid $border;
 }

src/scss/bem/_utility.scss

@@ -71,6 +71,10 @@
 
 .u-color--warning {
   color: $warning;
+
+  &.bright {
+    color: $warning--bright;
+  }
 }
 
 .u-color--white {
@@ -119,6 +123,10 @@
   &--start {
     align-self: flex-start;
   }
+
+  &--end {
+    align-self: flex-end;
+  }
 }
 
 .u-size--contain {
@@ -186,11 +194,19 @@
 
 .u-height {
   height: $height--sm  !important;
+
+  &--sm {
+    height: $height--xs  !important;
+  }
 }
 
 .u-width {
   width: $width  !important;
 
+  &--auto {
+    width: auto !important;
+  }
+
   &--3xs {
     width: $width--3xs  !important;
   }

src/scss/helpers/_variables.scss

@@ -14,6 +14,7 @@ $success--dark: #04a681;
 
 $warning: #e6a23c;
 $warning--light: #ebb563;
+$warning--bright: #fada12;
 
 $error: #f56c6c;
 $error--dark: #e51414;
@@ -58,6 +59,7 @@ $font-size--xl: 24px;
 $font-size--2xl: 28px;
 $font-size--3xl: 32px;
 
+$height--xs: 24px;
 $height--sm: 32px;
 $height: 40px;
 $height--md: 48px;