768 lines
21 KiB
Vue
768 lines
21 KiB
Vue
<!-- OA 工作流角色（非 sys_role） -->
|
||
<!-- eslint-disable vue/no-v-model-argument -->
|
||
<template>
|
||
<div class="page-container">
|
||
<section class="panel">
|
||
<div class="panel-top">
|
||
<h2 class="title-bar-heading">工作流角色</h2>
|
||
</div>
|
||
|
||
<div class="filter-block">
|
||
<el-form :model="searchForm" class="filter-form" @submit.prevent>
|
||
<div class="filter-grid">
|
||
<el-form-item label="关键词">
|
||
<el-input
|
||
v-model="searchForm.keyword"
|
||
placeholder="角色名称/编码"
|
||
clearable
|
||
@keyup.enter="handleSearch"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="状态">
|
||
<el-select v-model="searchForm.status" placeholder="请选择" clearable>
|
||
<el-option label="启用" value="1" />
|
||
<el-option label="停用" value="0" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="filter-actions-row">
|
||
<div class="filter-actions-end">
|
||
<el-button class="btn-ghost" @click="handleReset">
|
||
<el-icon><RefreshLeft /></el-icon>重置
|
||
</el-button>
|
||
<el-button class="btn-main" type="primary" @click="handleSearch">
|
||
<el-icon><Search /></el-icon>搜索
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
|
||
<div class="list-toolbar">
|
||
<div class="list-toolbar-row">
|
||
<div class="list-toolbar-selected">
|
||
已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
|
||
</div>
|
||
<el-button class="btn-main" type="primary" @click="handleAdd">
|
||
<el-icon><Plus /></el-icon>
|
||
新增角色
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-body list-wrap">
|
||
<el-table
|
||
class="list-table"
|
||
:data="tableData"
|
||
v-loading="loading"
|
||
stripe
|
||
row-key="id"
|
||
@selection-change="(rows: any[]) => (selectedRows = rows)"
|
||
>
|
||
<el-table-column type="selection" min-width="55" align="center" header-align="center" />
|
||
<el-table-column
|
||
type="index"
|
||
label="序号"
|
||
min-width="68"
|
||
align="center"
|
||
header-align="center"
|
||
/>
|
||
<el-table-column
|
||
prop="roleName"
|
||
label="角色名称"
|
||
min-width="140"
|
||
align="left"
|
||
header-align="left"
|
||
/>
|
||
<el-table-column
|
||
prop="roleCode"
|
||
label="编码"
|
||
min-width="120"
|
||
align="center"
|
||
header-align="center"
|
||
/>
|
||
<el-table-column
|
||
prop="roleKind"
|
||
label="类型"
|
||
min-width="100"
|
||
align="center"
|
||
header-align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.roleKind === 'preset' ? 'primary' : 'info'" size="small">
|
||
{{ row.roleKind === 'preset' ? '预置' : '自定义' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="memberCount"
|
||
label="成员数"
|
||
min-width="90"
|
||
align="center"
|
||
header-align="center"
|
||
/>
|
||
<el-table-column
|
||
prop="status"
|
||
label="状态"
|
||
min-width="90"
|
||
align="center"
|
||
header-align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.status === '1' ? 'success' : 'info'" size="small">
|
||
{{ row.status === '1' ? '启用' : '停用' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="createTime"
|
||
label="创建时间"
|
||
min-width="170"
|
||
align="center"
|
||
header-align="center"
|
||
>
|
||
<template #default="{ row }">{{ formatDisplayOrDash(row.createTime) }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="操作"
|
||
min-width="280"
|
||
fixed="right"
|
||
align="center"
|
||
header-align="center"
|
||
>
|
||
<template #default="{ row }">
|
||
<div style="display: flex; justify-content: center; gap: 8px">
|
||
<el-button class="btn-op-item primary" @click="handleMembers(row)">
|
||
<el-icon><User /></el-icon>成员
|
||
</el-button>
|
||
<el-button class="btn-op-item" @click="handleEdit(row)">
|
||
<el-icon><Edit /></el-icon>编辑
|
||
</el-button>
|
||
<el-button
|
||
class="btn-op-item"
|
||
:disabled="row.roleKind === 'preset'"
|
||
@click="handleDelete(row)"
|
||
>
|
||
<el-icon><Delete /></el-icon>删除
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
:title="dialogTitle"
|
||
width="560px"
|
||
class="dialog-form-layout"
|
||
align-center
|
||
append-to-body
|
||
modal-class="protocol-dialog-mask"
|
||
destroy-on-close
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form
|
||
ref="formRef"
|
||
:model="formData"
|
||
:rules="formRules"
|
||
label-position="top"
|
||
class="oa-role-dialog-form"
|
||
scroll-to-error
|
||
:scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
|
||
>
|
||
<div class="form-grid-2">
|
||
<el-form-item label="角色名称" prop="roleName">
|
||
<el-input v-model="formData.roleName" placeholder="如：财务审批" maxlength="100" />
|
||
</el-form-item>
|
||
<el-form-item label="角色编码" prop="roleCode">
|
||
<el-input
|
||
v-model="formData.roleCode"
|
||
placeholder="如：FINANCE"
|
||
maxlength="64"
|
||
:disabled="isEdit"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="status">
|
||
<el-select v-model="formData.status" placeholder="请选择">
|
||
<el-option label="启用" value="1" />
|
||
<el-option label="停用" value="0" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="备注" class="form-col-span-2">
|
||
<el-input v-model="formData.remark" type="textarea" :rows="2" placeholder="可选" />
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button class="btn-ghost" @click="dialogVisible = false">
|
||
<el-icon><Close /></el-icon>
|
||
取消
|
||
</el-button>
|
||
<el-button class="btn-main" type="primary" :loading="submitLoading" @click="handleSubmit">
|
||
<el-icon><Check /></el-icon>
|
||
确定
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
v-model="memberVisible"
|
||
:title="`成员管理 · ${memberRole?.roleName || ''}`"
|
||
width="640px"
|
||
class="dialog-form-layout"
|
||
align-center
|
||
append-to-body
|
||
modal-class="protocol-dialog-mask"
|
||
destroy-on-close
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form label-position="top">
|
||
<el-form-item>
|
||
<template #label>
|
||
绑定用户
|
||
<span class="form-label-tip">可多选，已选成员将展示在下方列表</span>
|
||
</template>
|
||
<div v-loading="memberLoading" class="member-picker">
|
||
<el-select
|
||
v-model="memberPickBuffer"
|
||
filterable
|
||
clearable
|
||
:loading="memberLoading"
|
||
placeholder="搜索姓名 / 工号，点击添加"
|
||
style="width: 100%"
|
||
popper-class="oa-role-member-select-popper"
|
||
@change="onMemberPick"
|
||
>
|
||
<el-option
|
||
v-for="u in userOptions"
|
||
:key="u.id"
|
||
:label="memberOptionLabel(u)"
|
||
:value="u.id"
|
||
:disabled="memberUserIds.includes(u.id)"
|
||
>
|
||
<div class="member-option">
|
||
<span class="member-avatar" :style="{ background: avatarColor(u.id) }">
|
||
{{ avatarInitial(u.nickName) }}
|
||
</span>
|
||
<span class="member-option__meta">
|
||
<span class="member-option__name">{{ u.nickName || '未命名' }}</span>
|
||
<span v-if="memberOptionSub(u)" class="member-option__sub">
|
||
{{ memberOptionSub(u) }}
|
||
</span>
|
||
</span>
|
||
<el-tag
|
||
v-if="memberUserIds.includes(u.id)"
|
||
size="small"
|
||
type="info"
|
||
effect="plain"
|
||
class="member-option__tag"
|
||
>
|
||
已选
|
||
</el-tag>
|
||
</div>
|
||
</el-option>
|
||
</el-select>
|
||
|
||
<div
|
||
class="member-chips"
|
||
:class="{ 'is-empty': !memberUserIds.length }"
|
||
>
|
||
<template v-if="memberUserIds.length">
|
||
<span v-for="id in memberUserIds" :key="id" class="member-chip">
|
||
<span
|
||
class="member-avatar member-avatar--sm"
|
||
:style="{ background: avatarColor(id) }"
|
||
>
|
||
{{ avatarInitial(resolveUser(id)?.nickName) }}
|
||
</span>
|
||
<span class="member-chip__name" :title="chipTitle(id)">
|
||
{{ resolveUser(id)?.nickName || id }}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
class="member-chip__rm"
|
||
:aria-label="`移除 ${resolveUser(id)?.nickName || id}`"
|
||
@click="removeMember(id)"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
</template>
|
||
<template v-else>暂未选择成员，请从上方搜索添加</template>
|
||
</div>
|
||
<p class="member-picked-count">已选 {{ memberUserIds.length }} 人</p>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button class="btn-ghost" @click="memberVisible = false">
|
||
<el-icon><Close /></el-icon>
|
||
取消
|
||
</el-button>
|
||
<el-button
|
||
class="btn-main"
|
||
type="primary"
|
||
:loading="memberSubmitLoading"
|
||
@click="handleMemberSubmit"
|
||
>
|
||
<el-icon><Check /></el-icon>
|
||
确定
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { formatDisplayOrDash } from '@/utils/datetime-display'
|
||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import {
|
||
Plus,
|
||
Close,
|
||
Check,
|
||
Edit,
|
||
Delete,
|
||
User,
|
||
RefreshLeft,
|
||
Search
|
||
} from '@element-plus/icons-vue'
|
||
import { fetchUserList } from '@/api/admin'
|
||
import {
|
||
fetchCreateOaRole,
|
||
fetchDeleteOaRole,
|
||
fetchOaRoleList,
|
||
fetchOaRoleUsers,
|
||
fetchReplaceOaRoleUsers,
|
||
fetchUpdateOaRole
|
||
} from '@/api/oaApproval'
|
||
import { MAX_ADMIN_LIST_PAGE_SIZE } from '@/utils/fetch-paged-list'
|
||
import { watchDebounced } from '@vueuse/core'
|
||
|
||
defineOptions({ name: 'OaApprovalRoles' })
|
||
|
||
const searchForm = reactive({ keyword: '', status: '' })
|
||
const tableData = ref<any[]>([])
|
||
const selectedRows = ref<any[]>([])
|
||
const loading = ref(false)
|
||
|
||
const dialogVisible = ref(false)
|
||
const dialogTitle = ref('新增工作流角色')
|
||
const isEdit = ref(false)
|
||
const editingId = ref<string | null>(null)
|
||
const submitLoading = ref(false)
|
||
const formRef = ref()
|
||
const formData = reactive({
|
||
roleName: '',
|
||
roleCode: '',
|
||
status: '1',
|
||
remark: ''
|
||
})
|
||
const formRules = {
|
||
roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||
roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
|
||
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
||
}
|
||
|
||
type UserOption = { id: string; nickName: string; userNo: string }
|
||
|
||
const AVATAR_COLORS = [
|
||
'#059669',
|
||
'#0ea5e9',
|
||
'#8b5cf6',
|
||
'#d97706',
|
||
'#ef4444',
|
||
'#14b8a6',
|
||
'#6366f1',
|
||
'#ec4899'
|
||
]
|
||
|
||
const memberVisible = ref(false)
|
||
const memberRole = ref<any>(null)
|
||
const memberUserIds = ref<string[]>([])
|
||
const memberPickBuffer = ref('')
|
||
const memberLoading = ref(false)
|
||
const memberSubmitLoading = ref(false)
|
||
const userOptions = ref<UserOption[]>([])
|
||
|
||
function avatarColor(id: string) {
|
||
let hash = 0
|
||
for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) >>> 0
|
||
return AVATAR_COLORS[hash % AVATAR_COLORS.length]
|
||
}
|
||
|
||
function avatarInitial(name?: string) {
|
||
const t = (name || '?').trim()
|
||
return t ? t.slice(0, 1) : '?'
|
||
}
|
||
|
||
function resolveUser(id: string) {
|
||
return userOptions.value.find((u) => u.id === id)
|
||
}
|
||
|
||
function memberOptionLabel(u: UserOption) {
|
||
const name = (u.nickName || '').trim() || '未命名'
|
||
const no = (u.userNo || '').trim()
|
||
if (no && no !== name) return `${name}（${no}）`
|
||
return name
|
||
}
|
||
|
||
function memberOptionSub(u: UserOption) {
|
||
const name = (u.nickName || '').trim()
|
||
const no = (u.userNo || '').trim()
|
||
if (!no || no === name) return ''
|
||
return `账号 ${no}`
|
||
}
|
||
|
||
function chipTitle(id: string) {
|
||
const u = resolveUser(id)
|
||
return u ? memberOptionLabel(u) : id
|
||
}
|
||
|
||
function onMemberPick(id: string) {
|
||
if (!id) return
|
||
if (!memberUserIds.value.includes(id)) {
|
||
memberUserIds.value = [...memberUserIds.value, id]
|
||
}
|
||
nextTick(() => {
|
||
memberPickBuffer.value = ''
|
||
})
|
||
}
|
||
|
||
function removeMember(id: string) {
|
||
memberUserIds.value = memberUserIds.value.filter((x) => x !== id)
|
||
}
|
||
|
||
async function loadData() {
|
||
loading.value = true
|
||
try {
|
||
const res = await fetchOaRoleList({
|
||
keyword: searchForm.keyword || undefined,
|
||
status: searchForm.status || undefined
|
||
})
|
||
tableData.value = res?.list || []
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function handleSearch() {
|
||
loadData()
|
||
}
|
||
|
||
function handleReset() {
|
||
searchForm.keyword = ''
|
||
searchForm.status = ''
|
||
loadData()
|
||
}
|
||
|
||
function resetForm() {
|
||
formData.roleName = ''
|
||
formData.roleCode = ''
|
||
formData.status = '1'
|
||
formData.remark = ''
|
||
editingId.value = null
|
||
}
|
||
|
||
function handleAdd() {
|
||
isEdit.value = false
|
||
dialogTitle.value = '新增工作流角色'
|
||
resetForm()
|
||
dialogVisible.value = true
|
||
formRef.value?.clearValidate?.()
|
||
}
|
||
|
||
function handleEdit(row: any) {
|
||
isEdit.value = true
|
||
dialogTitle.value = '编辑工作流角色'
|
||
editingId.value = row.id
|
||
formData.roleName = row.roleName || ''
|
||
formData.roleCode = row.roleCode || ''
|
||
formData.status = row.status || '1'
|
||
formData.remark = row.remark || ''
|
||
dialogVisible.value = true
|
||
formRef.value?.clearValidate?.()
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
await formRef.value?.validate?.()
|
||
submitLoading.value = true
|
||
try {
|
||
if (isEdit.value && editingId.value) {
|
||
await fetchUpdateOaRole(editingId.value, {
|
||
roleName: formData.roleName.trim(),
|
||
status: formData.status,
|
||
remark: formData.remark?.trim() || undefined
|
||
})
|
||
} else {
|
||
await fetchCreateOaRole({
|
||
roleName: formData.roleName.trim(),
|
||
roleCode: formData.roleCode.trim().toUpperCase(),
|
||
status: formData.status,
|
||
remark: formData.remark?.trim() || undefined
|
||
})
|
||
}
|
||
dialogVisible.value = false
|
||
await loadData()
|
||
} finally {
|
||
submitLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function handleDelete(row: any) {
|
||
if (row.roleKind === 'preset') {
|
||
ElMessage.warning('预置角色不可删除')
|
||
return
|
||
}
|
||
await ElMessageBox.confirm(`确定删除工作流角色「${row.roleName}」吗？`, '提示', {
|
||
type: 'warning'
|
||
})
|
||
await fetchDeleteOaRole(row.id)
|
||
await loadData()
|
||
}
|
||
|
||
async function loadUserOptions() {
|
||
const pageSize = MAX_ADMIN_LIST_PAGE_SIZE
|
||
const raw: any[] = []
|
||
let page = 1
|
||
for (;;) {
|
||
const res = await fetchUserList({ page, pageSize, status: '1' })
|
||
const list = res?.list || []
|
||
raw.push(...list)
|
||
if (list.length < pageSize) break
|
||
if (typeof res?.total === 'number' && raw.length >= res.total) break
|
||
page += 1
|
||
}
|
||
userOptions.value = raw.map((u) => ({
|
||
id: u.id,
|
||
nickName: u.nickName || '',
|
||
userNo: u.userNo || ''
|
||
}))
|
||
}
|
||
|
||
async function handleMembers(row: any) {
|
||
memberRole.value = row
|
||
memberPickBuffer.value = ''
|
||
memberUserIds.value = []
|
||
memberVisible.value = true
|
||
memberLoading.value = true
|
||
try {
|
||
await loadUserOptions()
|
||
const res = await fetchOaRoleUsers(row.id)
|
||
memberUserIds.value = (res?.list || []).map((x: any) => x.userId)
|
||
} finally {
|
||
memberLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function handleMemberSubmit() {
|
||
if (!memberRole.value?.id) return
|
||
memberSubmitLoading.value = true
|
||
try {
|
||
await fetchReplaceOaRoleUsers(memberRole.value.id, memberUserIds.value)
|
||
memberVisible.value = false
|
||
await loadData()
|
||
} finally {
|
||
memberSubmitLoading.value = false
|
||
}
|
||
}
|
||
|
||
watchDebounced(
|
||
searchForm,
|
||
() => {
|
||
loadData()
|
||
},
|
||
{ debounce: 300, deep: true }
|
||
)
|
||
|
||
onMounted(() => {
|
||
loadData()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.oa-role-dialog-form {
|
||
:deep(.el-form-item) {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.member-picker {
|
||
width: 100%;
|
||
}
|
||
|
||
.member-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
min-height: 44px;
|
||
margin-top: 12px;
|
||
padding: 12px;
|
||
background: #f8fafc;
|
||
border: 1px dashed #cbd5e1;
|
||
border-radius: 8px;
|
||
|
||
&.is-empty {
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--mint-text-muted, #94a3b8);
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
.member-chip {
|
||
display: inline-flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
max-width: 100%;
|
||
padding: 4px 8px 4px 4px;
|
||
background: #fff;
|
||
border: 1px solid var(--mint-border, #e2e8f0);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.member-chip__name {
|
||
max-width: 120px;
|
||
overflow: hidden;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.member-chip__rm {
|
||
display: grid;
|
||
flex-shrink: 0;
|
||
place-items: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
padding: 0;
|
||
color: var(--mint-text-muted, #64748b);
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
background: #f1f5f9;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: #dc2626;
|
||
background: #fee2e2;
|
||
}
|
||
}
|
||
|
||
.member-picked-count {
|
||
margin: 8px 0 0;
|
||
color: var(--mint-text-muted, #94a3b8);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.member-avatar {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
|
||
&--sm {
|
||
width: 28px;
|
||
height: 28px;
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- 下拉挂 body，须非 scoped -->
|
||
<style lang="scss">
|
||
.oa-role-member-select-popper {
|
||
.el-select-dropdown__list {
|
||
padding: 8px;
|
||
}
|
||
|
||
.el-select-dropdown__item {
|
||
height: auto !important;
|
||
min-height: 56px;
|
||
margin-bottom: 8px;
|
||
padding: 10px 12px !important;
|
||
line-height: normal !important;
|
||
border-radius: 8px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&.is-disabled {
|
||
opacity: 0.55;
|
||
}
|
||
|
||
&.hover,
|
||
&:hover {
|
||
background: var(--primary-bg, #ecfdf5);
|
||
}
|
||
}
|
||
|
||
.member-option {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
width: 100%;
|
||
min-height: 36px;
|
||
}
|
||
|
||
.member-option__meta {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
justify-content: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
.member-option__name {
|
||
overflow: hidden;
|
||
color: var(--mint-text, #0f172a);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.member-option__sub {
|
||
overflow: hidden;
|
||
color: var(--mint-text-muted, #64748b);
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.member-option__tag {
|
||
flex-shrink: 0;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.member-avatar {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
</style>
|