style: 标签管理相关页面样式深色主题适配，修改页头和弹窗头部的样式

data-room-ui/packages/DataSetLabelManagement/src/LabelConfigAddOrUpdate.vue

@@ -163,11 +163,18 @@
       slot="footer"
       class="dialog-footer"
     >
-      <el-button @click="cancel">取消</el-button>
+      <el-button
+        class="bs-el-button-default"
+        @click="cancel"
+      >
+        取消
+      </el-button>
       <el-button
         type="primary"
         @click="submitForm('ruleForm')"
-      >确定</el-button>
+      >
+        确定
+      </el-button>
     </span>
   </el-dialog>
 </template>

data-room-ui/packages/DataSetLabelManagement/src/LabelConfigDetails.vue

@@ -3,131 +3,192 @@
     v-if="dialogFormVisible"
     class="inner-container"
   >
-    <el-page-header
-      style="padding-top: 8px"
-      @back="goBack"
-    />
-
-    <el-divider content-position="left">
-      属性信息
-    </el-divider>
+    <el-scrollbar class="data-set-scrollbar">
+      <!-- <el-page-header
+        class="bs-el-page-header"
+        @back="goBack"
+      /> -->
+      <el-page-header class="bs-el-page-header">
+        <template slot="content">
+          <div class="page-header">
+            <div class="page-header-left">
+              标签详情
+            </div>
+            <div class="page-header-right">
+              <el-button
+                class="back bs-el-button-default"
+                @click="goBack"
+              >
+                返回
+              </el-button>
+            </div>
+          </div>
+        </template>
+      </el-page-header>
+      <el-divider
+        class="bs-el-divider"
+        content-position="left"
+      >
+        属性信息
+      </el-divider>
 
-    <el-row :gutter="5">
-      <el-col
-        :span="8"
-        class="attrInfo"
+      <el-row
+        style="width: 100%;"
+        :gutter="5"
       >
-        <el-tooltip
-          v-if="dataForm.labelName.length > 20"
-          :content="dataForm.labelName"
-          class="item"
-          effect="dark"
-          placement="bottom-start"
+        <el-col
+          :span="8"
+          class="attrInfo"
         >
-          <span>标签名称： {{ ellipsis(dataForm.labelName, 20) }}</span>
-        </el-tooltip>
-        <span v-else>标签名称： {{ ellipsis(dataForm.labelName, 20) }}</span>
-      </el-col>
-      <el-col
-        :span="8"
-        class="attrInfo"
-      >
-        <el-tooltip
-          v-if="dataForm.labelType.length > 20"
-          :content="dataForm.labelType"
-          class="item"
-          effect="dark"
-          placement="bottom-start"
+          <el-tooltip
+            v-if="dataForm.labelName.length > 20"
+            :content="dataForm.labelName"
+            class="item"
+            effect="dark"
+            placement="bottom-start"
+          >
+            <span class="text-style">标签名称： {{ ellipsis(dataForm.labelName, 20) }}</span>
+          </el-tooltip>
+          <span
+            v-else
+            class="text-style"
+          >
+            标签名称： {{ ellipsis(dataForm.labelName, 20) }}
+          </span>
+        </el-col>
+        <el-col
+          :span="8"
+          class="attrInfo"
         >
-          <span>标签类型： {{ ellipsis(dataForm.labelType, 20) }}</span>
-        </el-tooltip>
-        <span v-else>标签类型： {{ ellipsis(dataForm.labelType, 20) }}</span>
-      </el-col>
-      <el-col
-        :span="8"
-        class="attrInfo"
-      >
-        <el-tooltip
-          v-if="dataForm.labelDesc.length > 20"
-          :content="dataForm.labelDesc"
-          class="item"
-          effect="dark"
-          placement="bottom-start"
+          <el-tooltip
+            v-if="dataForm.labelType.length > 20"
+            :content="dataForm.labelType"
+            class="item"
+            effect="dark"
+            placement="bottom-start"
+          >
+            <span class="text-style">标签类型： {{ ellipsis(dataForm.labelType, 20) }}</span>
+          </el-tooltip>
+          <span
+            v-else
+            class="text-style"
+          >
+            标签类型： {{ ellipsis(dataForm.labelType, 20) }}
+          </span>
+        </el-col>
+        <el-col
+          :span="8"
+          class="attrInfo"
         >
-          <span>标签说明： {{ ellipsis(dataForm.labelDesc, 20) }}</span>
-        </el-tooltip>
-        <span v-else>标签说明： {{ ellipsis(dataForm.labelDesc, 20) }}</span>
-      </el-col>
-      <el-col
-        :span="8"
-        class="attrInfo"
-      >
-        <el-tooltip
-          v-if="dataForm.createBy && dataForm.createBy.length > 20"
-          :content="dataForm.createBy"
-          class="item"
-          effect="dark"
-          placement="bottom-start"
+          <el-tooltip
+            v-if="dataForm.labelDesc.length > 20"
+            :content="dataForm.labelDesc"
+            class="item"
+            effect="dark"
+            placement="bottom-start"
+          >
+            <span class="text-style">标签说明： {{ ellipsis(dataForm.labelDesc, 20) }}</span>
+          </el-tooltip>
+          <span
+            v-else
+            class="text-style"
+          >
+            标签说明： {{ ellipsis(dataForm.labelDesc, 20) }}
+          </span>
+        </el-col>
+        <el-col
+          :span="8"
+          class="attrInfo"
         >
-          <span>创建人： {{ ellipsis(dataForm.createBy, 20) }}</span>
-        </el-tooltip>
-        <span v-else>创建人： {{ ellipsis(dataForm.createBy, 20) }}</span>
-      </el-col>
-      <el-col
-        :span="16"
-        class="attrInfo"
-      >
-        <el-tooltip
-          v-if="dataForm.createDate.length > 20"
-          :content="dataForm.createDate"
-          class="item"
-          effect="dark"
-          placement="bottom-start"
+          <el-tooltip
+            v-if="dataForm.createBy && dataForm.createBy.length > 20"
+            :content="dataForm.createBy"
+            class="item"
+            effect="dark"
+            placement="bottom-start"
+          >
+            <span class="text-style">创建人： {{ ellipsis(dataForm.createBy, 20) }}</span>
+          </el-tooltip>
+          <span
+            v-else
+            class="text-style"
+          >
+            创建人： {{ ellipsis(dataForm.createBy, 20) }}
+          </span>
+        </el-col>
+        <el-col
+          :span="16"
+          class="attrInfo"
         >
-          <span>创建时间： {{ ellipsis(dataForm.createDate, 20) }}</span>
-        </el-tooltip>
-        <span v-else>创建时间： {{ ellipsis(dataForm.createDate, 20) }}</span>
-      </el-col>
-      <el-col
-        :span="8"
-        class="attrInfo"
-      >
-        <el-tooltip
-          v-if="dataForm.updateBy && dataForm.updateBy.length > 20"
-          :content="dataForm.updateBy"
-          class="item"
-          effect="dark"
-          placement="bottom-start"
+          <el-tooltip
+            v-if="dataForm.createDate.length > 20"
+            :content="dataForm.createDate"
+            class="item"
+            effect="dark"
+            placement="bottom-start"
+          >
+            <span class="text-style">创建时间： {{ ellipsis(dataForm.createDate, 20) }}</span>
+          </el-tooltip>
+          <span
+            v-else
+            class="text-style"
+          >
+            创建时间： {{ ellipsis(dataForm.createDate, 20) }}
+          </span>
+        </el-col>
+        <el-col
+          :span="8"
+          class="attrInfo"
         >
-          <span>修改人： {{ ellipsis(dataForm.updateBy, 20) }}</span>
-        </el-tooltip>
-        <span v-else>修改人： {{ ellipsis(dataForm.updateBy, 20) }}</span>
-      </el-col>
-      <el-col
-        :span="8"
-        class="attrInfo"
-      >
-        <el-tooltip
-          v-if="dataForm.updateDate.length > 20"
-          :content="dataForm.updateDate"
-          class="item"
-          effect="dark"
-          placement="bottom-start"
+          <el-tooltip
+            v-if="dataForm.updateBy && dataForm.updateBy.length > 20"
+            :content="dataForm.updateBy"
+            class="item"
+            effect="dark"
+            placement="bottom-start"
+          >
+            <span class="text-style">
+              修改人： {{ ellipsis(dataForm.updateBy, 20) }}
+            </span>
+          </el-tooltip>
+          <span
+            v-else
+            class="text-style"
+          >
+            修改人： {{ ellipsis(dataForm.updateBy, 20) }}
+          </span>
+        </el-col>
+        <el-col
+          :span="8"
+          class="attrInfo"
         >
-          <span>修改时间： {{ ellipsis(dataForm.updateDate, 20) }}</span>
-        </el-tooltip>
-        <span v-else>修改时间： {{ ellipsis(dataForm.updateDate, 20) }}</span>
-      </el-col>
-    </el-row>
+          <el-tooltip
+            v-if="dataForm.updateDate.length > 20"
+            :content="dataForm.updateDate"
+            class="item"
+            effect="dark"
+            placement="bottom-start"
+          >
+            <span class="text-style">修改时间： {{ ellipsis(dataForm.updateDate, 20) }}</span>
+          </el-tooltip>
+          <span
+            v-else
+            class="text-style"
+          >
+            修改时间： {{ ellipsis(dataForm.updateDate, 20) }}
+          </span>
+        </el-col>
+      </el-row>
 
-    <el-divider content-position="left">
-      关联数据集信息
-    </el-divider>
+      <el-divider
+        class="bs-el-divider"
+        content-position="left"
+      >
+        关联数据集信息
+      </el-divider>
 
-    <div
-      id="container"
-      style="width:90%"
-    />
+      <div id="container" />
+    </el-scrollbar>
   </div>
 </template>
 
@@ -289,6 +350,14 @@ export default {
 </script>
 
 <style scoped>
+
+@import '../../assets/style/bsTheme.scss';
+.data-set-scrollbar {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: none;
+}
 .inner-container{
   overflow-x: hidden;
 }
@@ -299,4 +368,18 @@ export default {
 .attrInfo {
   padding-left: 20px !important;
 }
+
+.text-style{
+  color: var(--bs-el-title);
+}
+
+.page-header {
+  display: flex;
+  position: relative;
+
+  .page-header-right {
+    position: absolute;
+    right: 16px;
+  }
+}
 </style>

data-room-ui/packages/DataSetLabelManagement/src/LabelTypeEdit.vue

@@ -3,31 +3,53 @@
     :append-to-body="true"
     :before-close="handleClose"
     :visible.sync="dialogFormVisible"
-    class="dialogClass"
+    class="bs-dialog-wrap bs-el-dialog"
     title="标签类型修改"
     width="500px"
   >
     <div style="margin: 20px;">
-      <el-form ref="ruleForm" :model="dataForm" :rules="rules" label-position="left" label-width="90px">
-        <el-form-item label="标签类型" prop="labelType">
-          <el-input v-model="dataForm.labelType"/>
+      <el-form
+        ref="ruleForm"
+        :model="dataForm"
+        :rules="rules"
+        label-position="left"
+        label-width="90px"
+        class="bs-el-form"
+      >
+        <el-form-item
+          label="标签类型"
+          prop="labelType"
+        >
+          <el-input
+            v-model="dataForm.labelType"
+            class="bs-el-input"
+          />
         </el-form-item>
       </el-form>
     </div>
 
-    <span slot="footer" class="dialog-footer">
-        <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
-      </span>
+    <span
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button
+        class="bs-el-button-default"
+        @click="cancel"
+      >取消</el-button>
+      <el-button
+        type="primary"
+        @click="submitForm('ruleForm')"
+      >确定</el-button>
+    </span>
   </el-dialog>
 </template>
 
 <script>
-import {updateLabelType} from 'packages/js/utils/LabelConfigService'
+import { updateLabelType } from 'packages/js/utils/LabelConfigService'
 
 export default {
-  name: "labelTypeEdit",
-  data() {
+  name: 'LabelTypeEdit',
+  data () {
     return {
       dialogFormVisible: false,
       dataForm: {
@@ -36,50 +58,49 @@ export default {
       },
       rules: {
         labelType: [
-          {required: true, message: '标签类型不能为空', trigger: 'blur'},
+          { required: true, message: '标签类型不能为空', trigger: 'blur' }
         ]
       }
     }
   },
   methods: {
-    init(labelType) {
-      this.dataForm.labelType = labelType;
-      this.dataForm.oldLabelType = labelType;
+    init (labelType) {
+      this.dataForm.labelType = labelType
+      this.dataForm.oldLabelType = labelType
     },
-    handleClose() {
+    handleClose () {
       this.$parent.labelTypeEditVisible = false
     },
-    cancel() {
-      this.dialogFormVisible = false;
+    cancel () {
+      this.dialogFormVisible = false
       this.$nextTick(() => {
-        this.handleClose();
+        this.handleClose()
       })
     },
-    submitForm(formName) {
+    submitForm (formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           updateLabelType(this.dataForm).then(() => {
-
             if (this.$parent.queryForm.labelType !== '') {
-              this.$parent.queryForm.labelType = this.dataForm.labelType;
+              this.$parent.queryForm.labelType = this.dataForm.labelType
             }
             this.$parent.reSearch()
-            this.$parent.getLabelType();
+            this.$parent.getLabelType()
 
-            this.cancel();
-            this.$message.success("保存成功")
-          });
+            this.cancel()
+            this.$message.success('保存成功')
+          })
         } else {
-          return false;
+          return false
         }
-      });
-    },
+      })
+    }
   }
 }
 </script>
 
 <style>
-.dialogClass .el-dialog__body {
+/* .dialogClass .el-dialog__body {
   min-height: auto;
-}
+} */
 </style>

data-room-ui/packages/assets/style/bsTheme.scss

@@ -317,10 +317,10 @@
 
     &:after {
       content: "" !important;
-      height: 14px !important;
+      height: 16px !important;
       position: absolute !important;
       left: 0 !important;
-      top: 50% !important;
+      top: calc(50% - 4px) !important;
       transform: translateY(-50%) !important;
       border-left: 4px solid var(--bs-el-color-primary) !important;
     }
@@ -509,7 +509,6 @@
 
   &::-webkit-scrollbar-track {
     border-radius: 6px !important;
-    // background-color: transparent;
   }
 
   &:hover {
@@ -641,5 +640,5 @@
     .el-divider__text.is-left{
       background-color: var(--bs-background-1) !important;
       color: var(--bs-el-text) !important;
-    }  // background-color: var(--bs-background-2);
+    }  
 }

data-room-ui/packages/assets/style/common/index.scss

@@ -305,8 +305,18 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
       .el-dialog__title {
         display: inline-block;
         font-size: 16px;
-        border-left: 4px solid var(--bs-el-color-primary);
-        padding-left: 16px;
+        position: relative;
+        padding-left: 20px;
       }
+      
+      .el-dialog__title::before {
+          content: "" !important;
+          height: 16px !important;
+          position: absolute !important;
+          left: 0 !important;
+          top: 50% !important;
+          transform: translateY(-50%) !important;
+          border-left: 4px solid var(--bs-el-color-primary) !important;
+        }
     }
 

data-room-ui/packages/assets/style/settingWrap.scss

@@ -140,7 +140,6 @@
   }
   &::-webkit-scrollbar-track {
     border-radius: 6px !important;
-    // background-color: transparent;
   }
   &:hover {
     &::-webkit-scrollbar-thumb {