mirror of
https://github.com/hansjone/dsh-im-ops.git
synced 2026-10-08 23:13:17 +08:00
Compact access-grant member/admin rows for denser editing (4.9.1-ops.12).
Use flex-wrap rows so phone, command, and delete stay tight and soft-wrap only when the panel is too narrow. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
87e44bd36e
commit
ec96b4d6eb
6 changed files with 109 additions and 60 deletions
|
|
@ -79,11 +79,11 @@ function nicknameForPhone(contacts, phone) {
|
|||
return typeof hit?.pushName === 'string' ? hit.pushName.trim() : '';
|
||||
}
|
||||
|
||||
function NicknameHint({ contacts, phone }) {
|
||||
function NicknameHint({ contacts, phone, shortEmpty = false }) {
|
||||
const nickname = nicknameForPhone(contacts, phone);
|
||||
return h('span', {
|
||||
className: nickname ? 'dim-accessNickname' : 'dim-accessNickname dim-accessNicknameEmpty',
|
||||
}, nickname || '暂无昵称（私聊/@ 后会自动补齐）');
|
||||
}, nickname || (shortEmpty ? '暂无昵称' : '暂无昵称（私聊/@ 后会自动补齐）'));
|
||||
}
|
||||
|
||||
function groupDisplayName(groupJid, groups) {
|
||||
|
|
@ -204,10 +204,13 @@ function MemberRows({
|
|||
...(nested ? {} : { disabled }),
|
||||
},
|
||||
nested ? h('h4', { className: 'dim-accessSubblockTitle' }, title) : h('legend', null, title),
|
||||
h('ul', { className: 'dim-accessUserList' }, members.map((member, index) =>
|
||||
h('li', { key: `member-${index}`, className: 'dim-accessUserRow' },
|
||||
h('label', { className: 'dim-accessField dim-accessUserId' },
|
||||
h('span', null, '电话'),
|
||||
h('ul', { className: 'dim-accessCompactList' }, members.map((member, index) =>
|
||||
h('li', {
|
||||
key: `member-${index}`,
|
||||
className: 'dim-accessCompactRow',
|
||||
'data-kind': 'member',
|
||||
},
|
||||
h('div', { className: 'dim-accessCompactIdentity' },
|
||||
h(PhoneTypeahead, {
|
||||
value: member.phone,
|
||||
contacts,
|
||||
|
|
@ -217,28 +220,32 @@ function MemberRows({
|
|||
i === index ? { ...entry, phone } : entry
|
||||
))),
|
||||
}),
|
||||
h(NicknameHint, { contacts, phone: member.phone })),
|
||||
h('label', { className: 'dim-accessField dim-accessUserCommand' },
|
||||
h('span', null, '命令权限'),
|
||||
h('select', {
|
||||
value: member.canExecuteCommands ? 'allow' : 'deny',
|
||||
onChange: (event) => onChange(members.map((entry, i) => (
|
||||
i === index
|
||||
? { ...entry, canExecuteCommands: event.target.value === 'allow' }
|
||||
: entry
|
||||
))),
|
||||
},
|
||||
h('option', { value: 'allow' }, '可以执行命令'),
|
||||
h('option', { value: 'deny' }, '不可以执行命令'))),
|
||||
h(NicknameHint, { contacts, phone: member.phone, shortEmpty: true })),
|
||||
h('select', {
|
||||
className: 'dim-accessCompactSelect',
|
||||
title: '命令权限',
|
||||
'aria-label': '命令权限',
|
||||
value: member.canExecuteCommands ? 'allow' : 'deny',
|
||||
disabled,
|
||||
onChange: (event) => onChange(members.map((entry, i) => (
|
||||
i === index
|
||||
? { ...entry, canExecuteCommands: event.target.value === 'allow' }
|
||||
: entry
|
||||
))),
|
||||
},
|
||||
h('option', { value: 'allow' }, '可执行命令'),
|
||||
h('option', { value: 'deny' }, '不可执行命令')),
|
||||
h('button', {
|
||||
type: 'button',
|
||||
className: 'dim-deliveryButton',
|
||||
className: 'dim-deliveryButton dim-accessCompactDelete',
|
||||
'data-kind': 'danger',
|
||||
disabled,
|
||||
onClick: () => onChange(members.filter((_, i) => i !== index)),
|
||||
}, '删除')))),
|
||||
h('button', {
|
||||
type: 'button',
|
||||
className: 'dim-deliveryButton',
|
||||
disabled,
|
||||
onClick: () => onChange([...members, { phone: '', canExecuteCommands: true }]),
|
||||
}, '新增用户'));
|
||||
}
|
||||
|
|
@ -259,11 +266,15 @@ function AdminPhones({
|
|||
},
|
||||
nested ? h('h4', { className: 'dim-accessSubblockTitle' }, title) : h('legend', null, title),
|
||||
help ? h('p', { className: 'dim-accessHint' }, help) : null,
|
||||
h('ul', { className: 'dim-accessUserList' }, phones.map((phone, index) => {
|
||||
h('ul', { className: 'dim-accessCompactList' }, phones.map((phone, index) => {
|
||||
const locked = lockedPhone && phone === lockedPhone;
|
||||
return h('li', { key: `admin-${index}`, className: 'dim-accessUserRow' },
|
||||
h('label', { className: 'dim-accessField dim-accessUserId' },
|
||||
h('span', null, locked ? '绑定账号（全局管理员）' : '电话'),
|
||||
return h('li', {
|
||||
key: `admin-${index}`,
|
||||
className: 'dim-accessCompactRow',
|
||||
'data-kind': 'admin',
|
||||
...(locked ? { 'data-locked': 'true' } : {}),
|
||||
},
|
||||
h('div', { className: 'dim-accessCompactIdentity' },
|
||||
h(PhoneTypeahead, {
|
||||
value: phone,
|
||||
contacts,
|
||||
|
|
@ -271,17 +282,21 @@ function AdminPhones({
|
|||
placeholder: '8613800000000',
|
||||
onChange: (next) => onChange(phones.map((entry, i) => (i === index ? next : entry))),
|
||||
}),
|
||||
locked ? null : h(NicknameHint, { contacts, phone })),
|
||||
locked
|
||||
? h('span', { className: 'dim-accessNickname' }, '绑定账号（全局管理员）')
|
||||
: h(NicknameHint, { contacts, phone, shortEmpty: true })),
|
||||
locked ? null : h('button', {
|
||||
type: 'button',
|
||||
className: 'dim-deliveryButton',
|
||||
className: 'dim-deliveryButton dim-accessCompactDelete',
|
||||
'data-kind': 'danger',
|
||||
disabled,
|
||||
onClick: () => onChange(phones.filter((_, i) => i !== index)),
|
||||
}, '删除'));
|
||||
})),
|
||||
h('button', {
|
||||
type: 'button',
|
||||
className: 'dim-deliveryButton',
|
||||
disabled,
|
||||
onClick: () => onChange([...phones, '']),
|
||||
}, '新增管理员'));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,6 +106,9 @@ const EN = Object.freeze({
|
|||
'命令权限': 'Command permission',
|
||||
'可以执行命令': 'Can run commands',
|
||||
'不可以执行命令': 'Cannot run commands',
|
||||
'可执行命令': 'Can run commands',
|
||||
'不可执行命令': 'Cannot run commands',
|
||||
'暂无昵称': 'No nickname',
|
||||
'白名单用户': 'Allowlisted users',
|
||||
'查看白名单说明': 'View allowlist details',
|
||||
'命令权限例外': 'Command permission exceptions',
|
||||
|
|
|
|||
|
|
@ -459,6 +459,15 @@ const CSS = String.raw`
|
|||
.dim-accessUsersEmpty { margin-top: 10px; padding: 15px 12px; border: 1px dashed var(--dsw-alias-border-l2, #dfe1e5); border-radius: 8px; color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 12px; line-height: 18px; text-align: center; }
|
||||
.dim-accessUserList { display: grid; gap: 9px; margin: 10px 0 0; padding: 0; list-style: none; }
|
||||
.dim-accessUserRow { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(145px, 180px) max-content; align-items: end; gap: 10px; padding: 11px; border: 1px solid var(--dsw-alias-border-l1, #eef0f3); border-radius: 9px; background: var(--dsw-alias-bg-module-platform, #f7f8fa); }
|
||||
.dim-accessCompactList { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; border: 1px solid var(--dsw-alias-border-l1, #eef0f3); border-radius: 8px; overflow: visible; background: var(--dsw-alias-bg-layer-1, #fff); }
|
||||
.dim-accessCompactRow { position: relative; z-index: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--dsw-alias-border-l1, #eef0f3); border-radius: 0; background: transparent; }
|
||||
.dim-accessCompactRow:last-child { border-bottom: 0; }
|
||||
.dim-accessCompactRow:focus-within { z-index: 5; background: color-mix(in srgb, var(--dsw-alias-bg-module-platform, #f7f8fa) 70%, transparent); }
|
||||
.dim-accessCompactIdentity { min-width: 0; flex: 1 1 160px; display: grid; gap: 2px; }
|
||||
.dim-accessCompactIdentity .dim-accessTypeahead > input { height: 32px; font-size: 12px; }
|
||||
.dim-accessCompactSelect { flex: 0 1 132px; width: auto; min-width: 108px; max-width: 160px; height: 32px; padding: 0 6px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 7px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-layer-1, #fff); font: inherit; font-size: 12px; }
|
||||
.dim-accessCompactSelect:focus { outline: 2px solid color-mix(in srgb, var(--dsw-alias-state-business-primary, #3370ff) 28%, transparent); border-color: var(--dsw-alias-state-business-primary, #3370ff); }
|
||||
.dim-accessCompactDelete { flex: 0 0 auto; min-height: 32px; padding-inline: 10px; }
|
||||
.dim-accessDeleteUser { margin-bottom: 1px; }
|
||||
.dim-accessUnsupported { padding: 18px 14px; border: 1px dashed var(--dsw-alias-border-l2, #dfe1e5); border-radius: 9px; color: var(--dsw-alias-label-secondary, #646a73); background: var(--dsw-alias-bg-module-platform, #f7f8fa); text-align: center; }
|
||||
.dim-accessUnsupported strong { color: var(--dsw-alias-label-primary, #1f2329); font-size: 13px; line-height: 20px; }
|
||||
|
|
@ -484,7 +493,7 @@ const CSS = String.raw`
|
|||
.dim-accessGroupHeading h3 { margin: 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 14px; line-height: 21px; font-weight: 650; }
|
||||
.dim-accessGroupJid { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
|
||||
.dim-accessGroupTitleRow { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 10px; align-items: end; }
|
||||
.dim-accessNickname { display: block; margin-top: 4px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 18px; font-weight: 560; }
|
||||
.dim-accessNickname { display: block; margin-top: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 11px; line-height: 15px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dim-accessNicknameEmpty { color: var(--dsw-alias-label-tertiary, #8f959e); font-weight: 400; }
|
||||
.dim-accessUserRow { position: relative; z-index: 0; overflow: visible; }
|
||||
.dim-panel .dim-botCard .dim-cardFooter { margin-top: 0; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue