功能:优化用户地址账户名称展示
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<!--
|
||||
功能:展示标准资源列表,并将新建、详情和编辑入口导航到独立页面。
|
||||
版本:v2.1.0
|
||||
版本:v2.2.0
|
||||
-->
|
||||
<template>
|
||||
<a-card :title="listTitle" :bordered="false">
|
||||
@@ -42,10 +42,10 @@
|
||||
v-for="field in displayFields"
|
||||
:key="field.key"
|
||||
:title="field.listLabel ?? field.label"
|
||||
:width="columnWidth(field)"
|
||||
:width="resourceListColumnWidth(definition.name, field)"
|
||||
:align="isProtectedListAvatarField(definition.name, field.key) ? 'center' : 'left'"
|
||||
:ellipsis="!isProtectedListAvatarField(definition.name, field.key)"
|
||||
:tooltip="!isProtectedListAvatarField(definition.name, field.key)"
|
||||
:ellipsis="!isProtectedListAvatarField(definition.name, field.key) && !field.listRelationNameOnly"
|
||||
:tooltip="!isProtectedListAvatarField(definition.name, field.key) && !field.listRelationNameOnly"
|
||||
>
|
||||
<template #cell="{ record }">
|
||||
<ProtectedAvatarThumbnail
|
||||
@@ -56,6 +56,11 @@
|
||||
:refresh-key="avatarRefreshKey"
|
||||
:loader="avatarLoader"
|
||||
/>
|
||||
<RelationNameText
|
||||
v-else-if="field.listRelationNameOnly && identityFieldValue(field, record)"
|
||||
:name="relationListName(field, record, relations.options)"
|
||||
:identity="identityFieldValue(field, record)"
|
||||
/>
|
||||
<IdentityText
|
||||
v-else-if="field.type === 'identity' && !field.displayRelationLabel && identityFieldValue(field, record)"
|
||||
:value="identityFieldValue(field, record)"
|
||||
@@ -168,6 +173,12 @@ import type { ResourceField, ResourceUiDefinition } from '@/api/resources';
|
||||
import { useUserStore } from '@/store';
|
||||
import { useResourceRelations } from '../resource/use-resource-relations';
|
||||
import ProtectedAvatarThumbnail from './ProtectedAvatarThumbnail.vue';
|
||||
import RelationNameText from './RelationNameText.vue';
|
||||
import {
|
||||
identityFieldValue,
|
||||
relationListName,
|
||||
resourceListColumnWidth,
|
||||
} from './resource-list-field-display';
|
||||
import {
|
||||
createProtectedListAvatarLoader,
|
||||
isProtectedListAvatarField,
|
||||
@@ -446,23 +457,6 @@ async function changePage(next: number) {
|
||||
await load();
|
||||
}
|
||||
|
||||
function identityFieldValue(field: ResourceField, row: ResourceRow) {
|
||||
return String(row[field.key] ?? row[`${field.key}_masked`] ?? '');
|
||||
}
|
||||
|
||||
function columnWidth(field: ResourceField) {
|
||||
if (isProtectedListAvatarField(props.definition.name, field.key)) return 72;
|
||||
if (field.type === 'datetime' || field.type === 'date') return 180;
|
||||
if (field.type === 'money' || field.type === 'number') return 140;
|
||||
if (field.type === 'boolean') return 110;
|
||||
if (field.type === 'identity' || field.type === 'identity-list') return 240;
|
||||
if (field.type === 'textarea') return 280;
|
||||
if (field.key.includes('phone')) return 150;
|
||||
if (/(name|title|address|content|remark|reason|terms)$/.test(field.key))
|
||||
return 220;
|
||||
return 180;
|
||||
}
|
||||
|
||||
/** 使用资源静态选项或运行时平台角色名称显示列表字段。 */
|
||||
function displayListField(field: ResourceField, row: ResourceRow) {
|
||||
return displayResourceField(field, row, relations.options, fieldOptions);
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<!-- 功能描述:列表以关系名称为主展示,并提供完整唯一标识的悬停查看与复制。版本:v1.0.0。 -->
|
||||
<template>
|
||||
<div class="relation-name-text">
|
||||
<a-tooltip :content="`用户唯一标识:${identity}`">
|
||||
<span class="relation-name">{{ displayName }}</span>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="复制用户唯一标识">
|
||||
<button
|
||||
class="copy-button"
|
||||
type="button"
|
||||
:aria-label="`复制用户唯一标识 ${identity}`"
|
||||
@click.stop="copyIdentity"
|
||||
>
|
||||
<icon-copy />
|
||||
</button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { IconCopy } from '@arco-design/web-vue/es/icon';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps<{ name: string; identity: string }>();
|
||||
const displayName = computed(() => props.name || props.identity);
|
||||
|
||||
/** 复制完整用户唯一标识,并给出明确操作反馈。 */
|
||||
async function copyIdentity() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(props.identity);
|
||||
Message.success('用户唯一标识已复制');
|
||||
} catch {
|
||||
Message.error('复制失败,请从悬浮提示中复制');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.relation-name-text {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.relation-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-1);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
color: rgb(var(--primary-6));
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copy-button:hover,
|
||||
.copy-button:focus-visible {
|
||||
background: var(--color-fill-2);
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* 功能描述:集中处理标准资源列表字段的关系名称、唯一标识和列宽展示。
|
||||
* 版本:v1.0.0
|
||||
*/
|
||||
import { optionLabel } from '@/api/resource-display';
|
||||
import type { ResourceRow } from '@/api/resource-page-rules';
|
||||
import type { ResourceField } from '@/api/resources';
|
||||
import { isProtectedListAvatarField } from './protected-list-avatar-loader';
|
||||
|
||||
/** 读取关系列表字段的完整唯一标识。 */
|
||||
export function identityFieldValue(field: ResourceField, row: ResourceRow) {
|
||||
return String(row[field.key] ?? row[`${field.key}_masked`] ?? '');
|
||||
}
|
||||
|
||||
/** 获取列表关系的可读名称,关系未加载时降级为完整唯一标识。 */
|
||||
export function relationListName(
|
||||
field: ResourceField,
|
||||
row: ResourceRow,
|
||||
relationOptions: Record<string, ResourceRow[]>,
|
||||
) {
|
||||
const identity = identityFieldValue(field, row);
|
||||
const match = (relationOptions[field.relation ?? ''] ?? []).find(
|
||||
(option) => String(option.identity) === identity,
|
||||
);
|
||||
return match ? optionLabel(match) : identity;
|
||||
}
|
||||
|
||||
/** 按字段类型返回标准列表列宽。 */
|
||||
export function resourceListColumnWidth(
|
||||
definitionName: string,
|
||||
field: ResourceField,
|
||||
) {
|
||||
if (isProtectedListAvatarField(definitionName, field.key)) return 72;
|
||||
if (field.type === 'datetime' || field.type === 'date') return 180;
|
||||
if (field.type === 'money' || field.type === 'number') return 140;
|
||||
if (field.type === 'boolean') return 110;
|
||||
if (field.type === 'identity' || field.type === 'identity-list') return 240;
|
||||
if (field.type === 'textarea') return 280;
|
||||
if (field.key.includes('phone')) return 150;
|
||||
if (/(name|title|address|content|remark|reason|terms)$/.test(field.key)) {
|
||||
return 220;
|
||||
}
|
||||
return 180;
|
||||
}
|
||||
Reference in New Issue
Block a user