From 90d65617460f94853e2471c2a1039bca82d7b459 Mon Sep 17 00:00:00 2001
From: zou <zou@direv.local>
Date: Tue, 18 Aug 2026 15:04:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(F006):=20=E7=94=A8=E6=88=B7=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=8C=89=E4=BC=81=E4=B8=9A=E5=88=97=E8=A1=A8UI?=
 =?UTF-8?q?=E6=A0=87=E5=87=86=E5=8D=87=E7=BA=A7=20-=20=E6=B8=90=E5=8F=98?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E5=8D=95=E5=85=83/=E4=B8=A4=E8=A1=8C?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=88=97(=E5=A7=93=E5=90=8D=E5=B7=A5?=
 =?UTF-8?q?=E5=8F=B7/=E9=83=A8=E9=97=A8=E8=A7=92=E8=89=B2)/=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E5=9C=86=E7=82=B9=E8=83=B6=E5=9B=8A(=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80st=E5=8F=98=E9=87=8F=E6=9A=97=E8=89=B2=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94)/=E7=94=A8=E6=88=B7=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E7=AD=9B=E9=80=89/=E8=B6=85=E7=AE=A1?=
 =?UTF-8?q?=E5=BE=BD=E7=AB=A0/=E6=89=B9=E9=87=8F=E5=88=A0=E9=99=A4/?=
 =?UTF-8?q?=E6=B8=85=E7=90=86=E8=80=81=E5=BC=8F=E6=AD=BB=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/sys/UserListView.vue | 348 +++++++++++++++++--------------
 1 file changed, 186 insertions(+), 162 deletions(-)

diff --git a/src/modules/sys/UserListView.vue b/src/modules/sys/UserListView.vue
index 8e4a5f5..9407748 100644
--- a/src/modules/sys/UserListView.vue
+++ b/src/modules/sys/UserListView.vue
@@ -1,30 +1,25 @@
 <script setup lang="ts">
 /**
- * F006 用户管理 - 套老 vue user.vue 结构 + v1.8 设计规范
+ * F006 用户管理 - 2026-08-18 按企业列表 UI 标准升级
  *
  * 后端端点 (SysUserController):
- *   GET    /sys/user/page         分页列表
- *   GET    /sys/user/{id}          详情
- *   POST   /sys/user               新增
- *   PUT    /sys/user               修改
+ *   GET    /sys/user/page         分页列表 (支持 username/userType 过滤)
  *   PUT    /sys/user/updateStatus  启用/停用
- *   PUT    /sys/user/password      修改密码(自己)
  *   PUT    /sys/user/resetPassword 重置密码(管理员)
- *   DELETE /sys/user               删除
+ *   DELETE /sys/user               删除 (支持批量)
  *
  * 字段(来自 SysUserDTO):
- *   id / username / password(WRITE_ONLY) / realName / headUrl
- *   gender(0=男/1=女/2=保密) / email / mobile / deptId
- *   superAdmin(0=否/1=是) / status(0=停用/1=正常) / remark
- *   identifier / employeeId(工号) / userType(1=试用/2=正式/3=外包/99=AI公司)
- *   joinDate / invitationUrl / invitationCode / xcxQrCode / operationId
- *   createDate / deptName / roleNames / roleIdList / postIdList
+ *   id / username / realName / headUrl / gender / email / mobile / deptId
+ *   superAdmin(0=否/1=是) / status(0=停用/1=正常) / employeeId(工号)
+ *   userType(1=试用/2=正式/3=外包/99=AI公司) / createDate / deptName / roleNames
  *
- * 设计规范:§16 列表页 + §17.7 紧凑弹窗 + §17.8 主题色弹窗 + §17.9 列优化
+ * UI 标准对齐企业列表: 头像渐变单元 / 两行信息列 / 圆点状态胶囊(全局 --st-* 变量暗色自适应) /
+ *  搜索栏补用户类型下拉 / selection 批量删除 / 清理老式死样式
  */
 import { onMounted, ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { httpGet, httpPost, httpPut, httpDelete } from '@/utils/request'
+import { User, Phone, Clock } from '@element-plus/icons-vue'
+import { httpGet, httpPut, httpDelete } from '@/utils/request'
 import DataTable from '@/components/DataTable/DataTable.vue'
 import PageHeader from '@/components/PageHeader/PageHeader.vue'
 import SearchBar from '@/components/SearchBar/SearchBar.vue'
@@ -35,42 +30,38 @@ interface SysUser {
   username: string
   realName: string
   headUrl?: string | null
-  gender?: number | null
   email?: string | null
   mobile?: string | null
-  deptId?: string | null
   deptName?: string | null
   superAdmin?: number
   status: 0 | 1
-  remark?: string | null
-  identifier?: string | null
   employeeId?: string | null
   userType?: number
-  joinDate?: string | number | null
   createDate: string | number
   roleNames?: string | null
-  roleIdList?: number[] | null
-  postIdList?: number[] | null
   raw: any
 }
 
-const STATUS_MAP: Record<number, { label: string; type: string }> = {
-  1: { label: '正常', type: 'success' },
-  0: { label: '停用', type: 'danger' }
+const STATUS_META: Record<number, { label: string; color: string; bg: string }> = {
+  1: { label: '正常', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  0: { label: '停用', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
 }
 
-const USER_TYPE_MAP: Record<number, { label: string; type: string }> = {
-  1: { label: '试用期', type: 'info' },
-  2: { label: '正式', type: 'success' },
-  3: { label: '外包', type: 'warning' },
-  99: { label: 'AI 公司', type: 'info' }
+const USER_TYPE_MAP: Record<number, { label: string; color: string; bg: string }> = {
+  1: { label: '试用期', color: 'var(--st-lv4-fg)', bg: 'var(--st-lv4-bg)' },
+  2: { label: '正式', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  3: { label: '外包', color: 'var(--st-warn-fg)', bg: 'var(--st-warn-bg)' },
+  99: { label: 'AI 公司', color: 'var(--st-lv2-fg)', bg: 'var(--st-lv2-bg)' }
 }
 
-const GENDER_MAP: Record<number, string> = {
-  0: '男',
-  1: '女',
-  2: '保密'
-}
+// 头像品牌渐变色组 (无 headUrl 时交替使用, 与企业列表同源风格)
+const AVATAR_GRADIENTS = [
+  'linear-gradient(135deg, #0b5394, #6fb1e8)',
+  'linear-gradient(135deg, #2563eb, #93c5fd)',
+  'linear-gradient(135deg, #0e7490, #67e8f9)',
+  'linear-gradient(135deg, #7c3aed, #c4b5fd)',
+  'linear-gradient(135deg, #be123c, #fda4af)'
+]
 
 const list = ref<SysUser[]>([])
 const total = ref(0)
@@ -78,6 +69,8 @@ const loading = ref(false)
 const page = ref(1)
 const limit = ref(10)
 const loadError = ref<string | null>(null)
+const selectedIds = ref<string[]>([])
+const selectedCount = ref(0)
 
 const filters = reactive({
   username: '',
@@ -88,6 +81,14 @@ const resetPwdVisible = ref(false)
 const resetPwdTarget = ref<SysUser | null>(null)
 const newPassword = ref('')
 
+function avatarStyle(row: SysUser, index: number) {
+  return { background: AVATAR_GRADIENTS[index % AVATAR_GRADIENTS.length] }
+}
+function initial(row: SysUser): string {
+  const name = row.realName && row.realName !== '--' ? row.realName : row.username
+  return (name || '用').trim().charAt(0)
+}
+
 function fmtDate(ts?: string | number | null) {
   if (!ts) return '--'
   const n = typeof ts === 'string' ? Date.parse(ts) : ts
@@ -113,22 +114,14 @@ async function load() {
       username: it.username || '--',
       realName: it.realName || '--',
       headUrl: it.headUrl,
-      gender: it.gender,
-      email: it.email,
       mobile: it.mobile,
-      deptId: it.deptId ? String(it.deptId) : null,
       deptName: it.deptName || '--',
       superAdmin: it.superAdmin ?? 0,
       status: (it.status ?? 0) as 0 | 1,
-      remark: it.remark,
-      identifier: it.identifier,
       employeeId: it.employeeId || '--',
       userType: it.userType,
-      joinDate: it.joinDate,
       createDate: it.createDate,
       roleNames: it.roleNames,
-      roleIdList: it.roleIdList,
-      postIdList: it.postIdList,
       raw: it
     }))
     total.value = data.total || 0
@@ -151,6 +144,7 @@ function onReset() {
 }
 function onPageChange(p: number) { page.value = p; load() }
 function onLimitChange(l: number) { limit.value = l; page.value = 1; load() }
+function onSelectionChange(rows: any[]) { selectedIds.value = rows.map((r: any) => r.id); selectedCount.value = rows.length }
 
 async function toggleStatus(row: SysUser) {
   const newStatus = row.status === 1 ? 0 : 1
@@ -165,10 +159,7 @@ async function toggleStatus(row: SysUser) {
     return
   }
   try {
-    await httpPut('/sys/user/updateStatus', {
-      id: Number(row.id),
-      status: newStatus
-    })
+    await httpPut('/sys/user/updateStatus', { id: Number(row.id), status: newStatus })
     ElMessage.success(`${action}成功`)
     load()
   } catch (e: any) {
@@ -184,14 +175,8 @@ function resetPwdHandle(row: SysUser) {
 
 async function resetPwdConfirm() {
   if (!resetPwdTarget.value) return
-  if (!newPassword.value.trim()) {
-    ElMessage.warning('请输入新密码')
-    return
-  }
-  if (newPassword.value.length < 6) {
-    ElMessage.warning('密码至少 6 位')
-    return
-  }
+  if (!newPassword.value.trim()) { ElMessage.warning('请输入新密码'); return }
+  if (newPassword.value.length < 6) { ElMessage.warning('密码至少 6 位'); return }
   try {
     await httpPut('/sys/user/resetPassword', {
       id: Number(resetPwdTarget.value.id),
@@ -208,28 +193,35 @@ async function resetPwdConfirm() {
 
 async function deleteHandle(row: SysUser) {
   try {
-    await ElMessageBox.confirm(
-      `确认删除用户 ${row.username} 吗?删除后无法恢复。`,
-      '删除确认',
-      { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' }
-    )
-  } catch {
-    return
-  }
+    await ElMessageBox.confirm(`确认删除用户 ${row.username} 吗?删除后无法恢复。`, '删除确认',
+      { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' })
+  } catch { return }
   try {
     await httpDelete(`/sys/user/${row.id}`)
     ElMessage.success('删除成功')
     load()
-  } catch (e: any) {
-    ElMessage.error(e?.msg || e?.message || '删除失败')
+  } catch (e: any) { ElMessage.error(e?.msg || e?.message || '删除失败') }
+}
+
+async function batchDelete() {
+  if (!selectedIds.value.length) { ElMessage.warning('请先选择用户'); return }
+  try {
+    await ElMessageBox.confirm(`确认删除已选 ${selectedIds.value.length} 个用户?删除后无法恢复。`, '批量删除确认',
+      { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' })
+  } catch { return }
+  let ok = 0
+  for (const id of selectedIds.value) {
+    try { await httpDelete(`/sys/user/${id}`); ok++ } catch {/* 单条失败跳过 */}
   }
+  ElMessage.success(`已删除 ${ok} 个用户`)
+  load()
 }
 
 onMounted(() => { load() })
 </script>
 
 <template>
-  <div class="rr-sys-user">
+  <div class="rr-page">
     <PageHeader title="后台用户" :sub="`共 ${total} 个用户`">
       <el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
     </PageHeader>
@@ -237,68 +229,116 @@ onMounted(() => { load() })
     <SearchBar
       v-model:filters="filters"
       :fields='[
-        { key: "username", label: "用户名", type: "text", placeholder: "用户名" }
+        { key: "username", label: "用户名", type: "text", placeholder: "用户名" },
+        { key: "userType", label: "用户类型", type: "select", placeholder: "全部类型",
+          options: [
+            { value: 1, label: "试用期" },
+            { value: 2, label: "正式" },
+            { value: 3, label: "外包" },
+            { value: 99, label: "AI 公司" }
+          ] }
       ]'
       @search="onSearch"
       @reset="onReset"
     />
 
     <div class="rr-list-card">
+      <!-- 批量操作栏 -->
+      <div class="batch-bar" :class="{ 'has-selection': selectedCount > 0 }">
+        <span v-if="selectedCount > 0" class="batch-count">
+          已选 <strong>{{ selectedCount }}</strong> 个用户
+        </span>
+        <span v-else class="batch-hint">勾选用户后可批量删除</span>
+        <span class="batch-actions">
+          <el-button size="small" type="danger" plain :disabled="!selectedCount" @click="batchDelete">批量删除</el-button>
+        </span>
+      </div>
+
       <DataTable
         :columns="[
-          { prop: 'username', label: '用户名', width: 200, slot: 'username' },
-          { prop: 'realName', label: '姓名', width: 140 },
-          { prop: 'employeeId', label: '工号', width: 120 },
-          { prop: 'mobile', label: '手机号', width: 130 },
-          { prop: 'userType', label: '类型', width: 100, slot: 'userType' },
-          { prop: 'status', label: '状态', width: 80, slot: 'status' },
-          { prop: 'createDate', label: '创建时间', width: 170, slot: 'createDate' },
-          { label: '操作', width: 140, slot: 'action' }
+          { type: 'selection', width: 48, label: '' },
+          { label: '用户', minWidth: 220, slot: 'user' },
+          { prop: 'mobile', label: '手机号', width: 130, slot: 'mobile' },
+          { label: '部门 / 角色', minWidth: 180, slot: 'deptRole' },
+          { prop: 'userType', label: '类型', width: 100, slot: 'userType', align: 'center' },
+          { prop: 'status', label: '状态', width: 90, slot: 'status', align: 'center' },
+          { label: '创建时间', width: 165, slot: 'createDate' },
+          { label: '操作', width: 170, slot: 'action', fixed: 'right', align: 'center' }
         ]"
-        :data="list"        :borderless="true"
+        :data="list"
+        :borderless="true"
         :loading="loading"
         :total="total"
         :page="page"
         :limit="limit"
-        :show-pagination="true"        :page-sizes="[10, 20, 50, 100]"
+        :show-pagination="true"
+        :page-sizes="[10, 20, 50, 100]"
         :error="loadError"
         empty-text="暂无用户"
         row-key="id"
         @page-change="onPageChange"
         @limit-change="onLimitChange"
+        @selection-change="onSelectionChange"
       >
-        <template #username="{ row }">
-          <code class="rr-username-code">{{ row.username }}</code>
+        <!-- 用户单元: 头像 + 用户名 + 姓名/工号 -->
+        <template #user="{ row, index }">
+          <div class="user-cell">
+            <span class="user-avatar" :style="avatarStyle(row, index)">
+              <el-image v-if="row.headUrl" :src="row.headUrl" fit="cover" class="user-avatar-img" />
+              <template v-else>{{ initial(row) }}</template>
+            </span>
+            <span class="user-text">
+              <span class="user-name">
+                {{ row.username }}
+                <el-tag v-if="row.superAdmin === 1" size="small" type="warning" effect="light" class="super-tag">超管</el-tag>
+              </span>
+              <span class="user-sub">{{ row.realName }}{{ row.employeeId && row.employeeId !== '--' ? ` · ${row.employeeId}` : '' }}</span>
+            </span>
+          </div>
         </template>
 
+        <!-- 手机号 -->
+        <template #mobile="{ row }">
+          <span class="phone-cell"><el-icon><Phone /></el-icon>{{ row.mobile || '--' }}</span>
+        </template>
+
+        <!-- 部门/角色 -->
+        <template #deptRole="{ row }">
+          <div class="two-line">
+            <span class="line-main">{{ row.deptName }}</span>
+            <span class="line-sub">{{ row.roleNames || '未分配角色' }}</span>
+          </div>
+        </template>
+
+        <!-- 类型 -->
         <template #userType="{ row }">
-          <el-tag
-            v-if="row.userType != null && USER_TYPE_MAP[row.userType]"
-            :type="USER_TYPE_MAP[row.userType].type as any"
-            size="small"
-            effect="light"
-          >{{ USER_TYPE_MAP[row.userType].label }}</el-tag>
+          <span v-if="row.userType != null && USER_TYPE_MAP[row.userType]" class="chip"
+            :style="{ color: USER_TYPE_MAP[row.userType].color, background: USER_TYPE_MAP[row.userType].bg }">
+            {{ USER_TYPE_MAP[row.userType].label }}
+          </span>
           <span v-else class="rr-muted">--</span>
         </template>
 
+        <!-- 状态: 圆点胶囊 -->
         <template #status="{ row }">
-          <el-tag
-            :type="STATUS_MAP[row.status].type as any"
-            size="small"
-            effect="light"
-          >{{ STATUS_MAP[row.status].label }}</el-tag>
+          <span class="status-tag"
+            :style="{ color: STATUS_META[row.status].color, background: STATUS_META[row.status].bg }">
+            <span class="status-dot"></span>{{ STATUS_META[row.status].label }}
+          </span>
         </template>
 
+        <!-- 创建时间 -->
         <template #createDate="{ row }">
-          <span class="rr-time">{{ fmtDate(row.createDate) }}</span>
+          <span class="date-cell"><el-icon><Clock /></el-icon>{{ fmtDate(row.createDate) }}</span>
         </template>
 
+        <!-- 操作 -->
         <template #action="{ row }">
           <TableActions
             :row="row"
             :actions="[
               { label: (r: any) => r.status === 1 ? '停用' : '启用', type: (r: any) => r.status === 1 ? 'warning' : 'success', onClick: toggleStatus },
-              { label: '重置密码', type: 'primary', onClick: resetPwdHandle },
+              { label: '重置密码', type: 'info', onClick: resetPwdHandle },
               { label: '删除', type: 'danger', onClick: deleteHandle }
             ]"
           />
@@ -311,11 +351,10 @@ onMounted(() => { load() })
       v-model="resetPwdVisible"
       title="重置密码"
       width="480"
-      :style="{ borderRadius: '12px', overflow: 'hidden' }"
       align-center
       destroy-on-close
     >
-      <p v-if="resetPwdTarget" style="margin-bottom: 16px;">
+      <p v-if="resetPwdTarget" style="margin: 0 0 16px; color: var(--ink-2)">
         用户: <code class="rr-username-code">{{ resetPwdTarget.username }}</code>
         ({{ resetPwdTarget.realName }})
       </p>
@@ -330,9 +369,8 @@ onMounted(() => { load() })
           />
         </el-form-item>
       </el-form>
-      <el-alert type="warning" :closable="false" style="margin-top: 8px;">
-        <p>重置后请通过安全渠道告知用户</p>
-        <p>用户下次登录需使用新密码</p>
+      <el-alert type="warning" :closable="false" style="margin-top: 8px">
+        <p style="margin: 0">重置后请通过安全渠道告知用户，下次登录需使用新密码</p>
       </el-alert>
       <template #footer>
         <el-button @click="resetPwdVisible = false">取消</el-button>
@@ -342,78 +380,64 @@ onMounted(() => { load() })
   </div>
 </template>
 
-<style scoped>
-.rr-sys-user {
-  padding: 16px;
+<style scoped lang="scss">
+.rr-page { padding: 16px; }
+
+/* ===== 批量操作栏 (对齐企业列表) ===== */
+.batch-bar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px; border-bottom: 1px solid var(--border);
+  transition: background .2s;
+}
+.batch-bar.has-selection { background: var(--primary-soft, #e0ecff); }
+.batch-count { font-size: 13px; color: var(--ink-2); }
+.batch-count strong { color: var(--primary); font-size: 15px; }
+.batch-hint { font-size: 12px; color: var(--ink-3); }
+.batch-actions { margin-left: auto; }
+
+/* ===== 用户单元 ===== */
+.user-cell { display: flex; align-items: center; gap: 10px; }
+.user-avatar {
+  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0;
+}
+.user-avatar-img { width: 100%; height: 100%; border-radius: 10px; }
+.user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.user-name {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 14px; font-weight: 600; color: var(--ink);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.super-tag { margin-left: 2px; }
+.user-sub {
+  font-size: 12px; color: var(--ink-3);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 
-.rr-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 14px;
-}
+/* ===== 单元格通用 ===== */
+.two-line { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.line-main { font-size: 13px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.line-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.phone-cell { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); font-family: 'SF Mono', Menlo, Consolas, monospace; }
+.date-cell { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); font-family: 'SF Mono', Menlo, Consolas, monospace; }
 
-.rr-page-titles {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+/* ===== 类型/状态胶囊 (对齐企业列表, 使用全局 --st-* 变量暗色自适应) ===== */
+.chip {
+  display: inline-flex; align-items: center; width: fit-content;
+  font-size: 12px; font-weight: 500; padding: 2px 12px; border-radius: 20px; white-space: nowrap;
 }
-
-.rr-page-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.rr-page-sub {
-  margin: 0;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.rr-page-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.rr-filters-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 14px;
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-radius: 8px;
-}
-
-.rr-username-input { width: 240px; }
-.rr-type-select { width: 140px; }
-
-.rr-list-card {
-  background: var(--el-bg-color);
-  border-radius: 12px;
-  padding: 4px;
+.status-tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 12px; font-weight: 500; padding: 3px 12px; border-radius: 20px; white-space: nowrap;
 }
+.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
 
 .rr-username-code {
   font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-  padding: 2px 6px;
-  background: var(--el-fill-color-light);
-  border-radius: 4px;
-  color: var(--el-color-primary);
-}
-
-.rr-time {
-  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-  color: var(--el-text-color-regular);
-}
-
-.rr-muted {
-  color: var(--el-text-color-placeholder);
-  font-size: 12px;
+  font-size: 12px; padding: 2px 6px;
+  background: var(--fill-color-light, var(--surface-2));
+  border-radius: 4px; color: var(--el-color-primary);
 }
+.rr-muted { color: var(--ink-3); font-size: 12px; }
 </style>
\ No newline at end of file