chore: update

src/modules/base/roles/components/UserInfo.vue

@@ -6,7 +6,7 @@ defineProps<{ data: RoleMember; role: RoleInfo }>()
 
 <template>
   <el-dialog class="dialogClass" title="用户信息" width="800px">
-    <el-form label-width="100px" label-suffix="：">
+    <el-form label-suffix="：">
       <el-row justify="space-between">
         <el-form-item label="姓名">{{ data.user_name }}</el-form-item>
         <el-form-item label="用户手机">{{ data.mobile }}</el-form-item>

src/modules/base/users/components/UserInfo.vue

@@ -21,109 +21,47 @@ const channelValue = $ref<UserChannel>()
 </script>
 
 <template>
-  <el-dialog v-if="userInfo" class="user-dialog-class" title="用户信息" width="600px" :close-on-click-modal="false">
-    <div class="info">
-      <div class="item">
-        <div class="label">姓名：</div>
-        <div class="value">{{ userInfo.user_name }}</div>
-      </div>
-      <div class="item">
-        <div class="label">用户手机：</div>
-        <div class="value">{{ userInfo.mobile }}</div>
-      </div>
-      <div class="item">
-        <div class="label">用户邮箱：</div>
-        <div class="value">{{ userInfo.email }}</div>
-      </div>
-    </div>
-    <el-card class="box-card">
-      <div class="info block">
-        <div class="item">
-          <div class="label">选择项目：</div>
-          <div class="value">
-            <el-select v-model="projectValue" placeholder="选择项目" size="small" value-key="project_id">
-              <el-option v-for="item in userInfo.projects" :key="item.project_id" :label="item.title" :value="item" />
-            </el-select>
-          </div>
-        </div>
-        <div class="item">
-          <div class="label">角色权限：</div>
-          <div v-for="(item, index) in projectValue?.roles" :key="index" class="value" style="margin-right: 10px">
-            <el-tag>{{ item }}</el-tag>
-          </div>
-        </div>
-        <div class="item mt-20">
-          <div class="label">选择渠道：</div>
-          <div class="value">
-            <el-select v-model="channelValue" placeholder="选择渠道" size="small" value-key="channel_id">
-              <el-option
-                v-for="item in projectValue?.channels"
-                :key="item.channel_id"
-                :label="item.title"
-                :value="item" />
-            </el-select>
-          </div>
-        </div>
-        <div class="item">
-          <div class="label">角色权限：</div>
-          <div v-for="(item, index) in channelValue?.roles" :key="index" class="value" style="margin-right: 10px">
-            <el-tag>{{ item }}</el-tag>
-          </div>
-        </div>
-      </div>
+  <el-dialog title="用户信息" width="800px" :close-on-click-modal="false">
+    <el-form label-suffix="：" v-if="userInfo">
+      <el-row justify="space-between">
+        <el-form-item label="姓名">{{ userInfo.user_name }}</el-form-item>
+        <el-form-item label="用户手机">{{ userInfo.mobile }}</el-form-item>
+        <el-form-item label="用户邮箱">{{ userInfo.email }}</el-form-item>
+      </el-row>
+    </el-form>
+    <el-card shadow="never">
+      <el-form label-suffix="：">
+        <el-form-item label="选择项目">
+          <el-select v-model="projectValue" placeholder="选择项目" value-key="project_id">
+            <el-option v-for="item in userInfo?.projects" :key="item.project_id" :label="item.title" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色权限">
+          <el-tag v-for="(item, index) in projectValue?.roles" :key="index" size="large">{{ item }}</el-tag>
+        </el-form-item>
+        <el-form-item label="选择渠道">
+          <el-select v-model="channelValue" placeholder="选择渠道" value-key="channel_id">
+            <el-option
+              v-for="item in projectValue?.channels"
+              :key="item.channel_id"
+              :label="item.title"
+              :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色权限">
+          <el-tag v-for="(item, index) in channelValue?.roles" :key="index" size="large">{{ item }}</el-tag>
+        </el-form-item>
+      </el-form>
     </el-card>
     <template #footer>
-      <el-button @click="$emit('update:modelValue', false)">关闭</el-button>
+      <el-button auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
     </template>
   </el-dialog>
 </template>
-<style lang="scss">
-.user-dialog-class {
-  .el-dialog__header {
-    border-bottom: 1px solid #ccc;
-    margin-right: 0;
-    padding-bottom: 20px;
-  }
-  .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
-  .info {
-    display: flex;
-    justify-content: space-between;
-    &.block {
-      display: block;
-    }
-    .item {
-      display: flex;
-      &.mt-20 {
-        margin-top: 20px;
-      }
-      .label {
-        display: inline-flex;
-        justify-content: flex-end;
-        align-items: flex-start;
-        flex: 0 0 auto;
-        font-size: 14px;
-        color: #969696;
-        height: 32px;
-        line-height: 32px;
-        box-sizing: border-box;
-        text-align: right;
-      }
-      .value {
-        font-size: 14px;
-        line-height: 32px;
-        .el-tag {
-          margin-top: 5px;
-        }
-        .ml-2 {
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-}
-.box-card {
-  margin-top: 15px;
+
+<style lang="scss" scoped>
+.el-tag {
+  margin-bottom: 10px;
+  margin-right: 10px;
 }
 </style>