diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index 0a5a479..17bce9d 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -162,3 +162,16 @@ h4.subtitle { .base-wrap-main .tree-wrapper .tree-container { width: 300px; } + +/* 描边徽标(对齐 UserHome「当前生效」样式):view-ui-plus 预设色 Tag 的 border prop + 渲染仍是实心块(无效 prop),改自定义类挂主题令牌——主态=brand 描边,muted=中性灰描边 */ +.tag-outline { + color: var(--brand) !important; + border: 1px solid var(--brand) !important; + background: #fff !important; +} + +.tag-outline.tag-outline-muted { + color: #999 !important; + border: 1px solid #dcdee2 !important; +} diff --git a/src/views/group-user/index.vue b/src/views/group-user/index.vue index a9ece64..3a411e5 100644 --- a/src/views/group-user/index.vue +++ b/src/views/group-user/index.vue @@ -164,16 +164,16 @@ const columns = [ title: '状态', key: 'disabled', width: 130, align: 'center', render: (h: any, { row }: any) => { // Vue3 渲染函数须 import 真组件:h('Tag') 会建未知原生元素(无样式不渲染) - // border 描边徽标(对齐 UserHome「当前生效」样式),非实心块 - if (row.disabled) return h(Tag, { color: 'default', border: true }, () => '禁用'); + // 描边徽标挂主题令牌(.tag-outline,见 main.scss):预设色 border prop 渲染仍实心,弃用 + if (row.disabled) return h(Tag, { class: 'tag-outline tag-outline-muted' }, () => '禁用'); if (row.groupStatus === 1) { - // 正常 Tag + 转出徽标(view-ui-plus Badge status 模式:圆点 + 文本) + // 正常徽标 + 转出角标(view-ui-plus Badge status 模式:圆点 + 文本) return h('div', { style: 'display:inline-flex;align-items:center;gap:6px' }, [ - h(Tag, { color: 'success', border: true }, () => '正常'), + h(Tag, { class: 'tag-outline' }, () => '正常'), h(Badge, { status: 'warning', text: '转出' }), ]); } - return h(Tag, { color: 'success', border: true }, () => '正常'); + return h(Tag, { class: 'tag-outline' }, () => '正常'); }, }, {