yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reactor：【system 系统管理】notifymessage、operatelog、socialuser

pull/211/head
YunaiV 2025-09-10 09:53:55 +08:00
parent 6bf1392edf
commit b3a4a91a25
14 changed files with 433 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web-antd/src/views/system/notify/message/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -165,7 +166,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'userType',
label: '用户类型',
content: (data) => {
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.USER_TYPE,
value: data?.userType,
@ -195,7 +196,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'templateParams',
label: '模版参数',
content: (data) => {
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
try {
return JSON.stringify(data?.templateParams);
} catch {
@ -206,7 +207,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'templateType',
label: '模版类型',
content: (data) => {
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
value: data?.templateType,
@ -216,7 +217,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'readStatus',
label: '是否已读',
content: (data) => {
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: data?.readStatus,
@ -226,12 +227,16 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'readTime',
label: '阅读时间',
content: (data) => formatDateTime(data?.readTime || '') as string,
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return formatDateTime(data?.readTime || '') as string;
},
},
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime || '') as string,
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return formatDateTime(data?.createTime || '') as string;
},
},
];
}

23
apps/web-antd/src/views/system/notify/my/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -102,30 +103,36 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'createTime',
label: '发送时间',
content: (data) => formatDateTime(data?.createTime) as string,
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return formatDateTime(data?.createTime || '') as string;
},
},
{
field: 'templateType',
label: '消息类型',
content: (data) =>
h(DictTag, {
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
value: data?.templateType,
}),
});
},
},
{
field: 'readStatus',
label: '是否已读',
content: (data) =>
h(DictTag, {
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: data?.readStatus,
}),
});
},
},
{
field: 'readTime',
label: '阅读时间',
content: (data) => formatDateTime(data?.readTime) as string,
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return formatDateTime(data?.readTime || '') as string;
},
},
{
field: 'templateContent',

13
apps/web-antd/src/views/system/notify/my/modules/detail.vue
View File

@ -1,13 +1,17 @@
<script lang="ts" setup>
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { useDescription } from '#/components/description';
import { useDetailSchema } from '../data';
const [Description, descApi] = useDescription({
const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
const [Descriptions] = useDescription({
componentProps: {
bordered: true,
column: 1,
@ -19,6 +23,7 @@ const [Description, descApi] = useDescription({
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
@ -28,7 +33,7 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
try {
descApi.setState({ data });
formData.value = data;
} finally {
modalApi.unlock();
}
@ -38,11 +43,11 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
title="消息详情"
title="站内信详情"
class="w-1/3"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Description />
<Descriptions :data="formData" />
</Modal>
</template>

18
apps/web-antd/src/views/system/operatelog/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import type { DescriptionItemSchema } from '#/components/description';
import { formatDateTime } from '@vben/utils';
@ -135,7 +136,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'traceId',
label: '链路追踪',
content: (data) => data?.traceId || '',
hidden: (data: SystemOperateLogApi.OperateLog) => !data?.traceId,
},
{
field: 'userId',
@ -168,20 +169,23 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'extra',
label: '操作拓展参数',
hidden: (data: SystemOperateLogApi.OperateLog) => !data?.extra,
},
{
field: 'requestUrl',
label: '请求 URL',
content: (data) => {
const method = data?.requestMethod || '';
const url = data?.requestUrl || '';
return `${method} ${url}`.trim();
content: (data: SystemOperateLogApi.OperateLog) => {
if (data?.requestMethod && data?.requestUrl) {
return `${data.requestMethod} ${data.requestUrl}`;
}
return '';
},
},
{
field: 'createTime',
label: '操作时间',
content: (data) => formatDateTime(data?.createTime || '') as string,
content: (data: SystemOperateLogApi.OperateLog) => {
return formatDateTime(data?.createTime || '') as string;
},
},
{
field: 'bizId',

64
apps/web-antd/src/views/system/social/user/data.ts
View File

@ -1,11 +1,17 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSocialUserApi } from '#/api/system/social/user';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { getRangePickerDefaultProps } from '#/utils';
import { DictTag } from '#/components/dict-tag';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -99,3 +105,61 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'type',
label: '社交平台',
content: (data: SystemSocialUserApi.SocialUser) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
value: data?.type,
});
},
},
{
field: 'nickname',
label: '用户昵称',
},
{
field: 'avatar',
label: '用户头像',
content: (data: SystemSocialUserApi.SocialUser) => {
if (data?.avatar) {
// TODO @芋艿：使用 antd 的 Image 组件
return h('img', {
src: data.avatar,
style: 'width: 30px; height: 30px; cursor: pointer;',
onClick: () => {
// 可以添加图片预览功能
window.open(data.avatar, '_blank');
},
});
}
return '无';
},
},
{
field: 'token',
label: '社交 token',
},
{
field: 'rawTokenInfo',
label: '原始 Token 数据',
},
{
field: 'rawUserInfo',
label: '原始 User 数据',
},
{
field: 'code',
label: '最后一次的认证 code',
},
{
field: 'state',
label: '最后一次的认证 state',
},
];
}

53
apps/web-antd/src/views/system/social/user/modules/detail.vue
View File

@ -1,19 +1,29 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { SystemSocialUserApi } from '#/api/system/social/user';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { Descriptions, DescriptionsItem, Image } from 'ant-design-vue';
import { getSocialUser } from '#/api/system/social/user';
import { DictTag } from '#/components/dict-tag';
import { useDescription } from '#/components/description';
import { $t } from '#/locales';
import { useDetailSchema } from '../data';
const formData = ref<SystemSocialUserApi.SocialUser>();
const [Descriptions] = useDescription({
componentProps: {
bordered: true,
column: 1,
size: 'middle',
class: 'mx-4',
labelStyle: { width: '185px' },
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
title: $t('ui.actionTitle.detail'),
async onOpenChange(isOpen: boolean) {
@ -43,37 +53,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions
bordered
:column="1"
size="middle"
class="mx-4"
:label-style="{ width: '185px' }"
>
<DescriptionsItem label="社交平台">
<DictTag :type="DICT_TYPE.SYSTEM_SOCIAL_TYPE" :value="formData?.type" />
</DescriptionsItem>
<DescriptionsItem label="用户昵称">
{{ formData?.nickname }}
</DescriptionsItem>
<DescriptionsItem label="用户头像">
<Image :src="formData?.avatar" :width="30" :height="30" />
</DescriptionsItem>
<DescriptionsItem label="社交 token">
{{ formData?.token }}
</DescriptionsItem>
<DescriptionsItem label="原始 Token 数据">
{{ formData?.rawTokenInfo }}
</DescriptionsItem>
<DescriptionsItem label="原始 User 数据">
{{ formData?.rawUserInfo }}
</DescriptionsItem>
<DescriptionsItem label="最后一次的认证 code">
{{ formData?.code }}
</DescriptionsItem>
<DescriptionsItem label="最后一次的认证 state">
{{ formData?.state }}
</DescriptionsItem>
</Descriptions>
<Descriptions :data="formData" />
</Modal>
</template>

91
apps/web-ele/src/views/system/notify/message/data.ts
View File

@ -1,9 +1,15 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
@ -149,3 +155,88 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '编号',
},
{
field: 'userType',
label: '用户类型',
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.USER_TYPE,
value: data?.userType,
});
},
},
{
field: 'userId',
label: '用户编号',
},
{
field: 'templateId',
label: '模版编号',
},
{
field: 'templateCode',
label: '模板编码',
},
{
field: 'templateNickname',
label: '发送人名称',
},
{
field: 'templateContent',
label: '模版内容',
},
{
field: 'templateParams',
label: '模版参数',
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
try {
return JSON.stringify(data?.templateParams);
} catch {
return '';
}
},
},
{
field: 'templateType',
label: '模版类型',
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
value: data?.templateType,
});
},
},
{
field: 'readStatus',
label: '是否已读',
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: data?.readStatus,
});
},
},
{
field: 'readTime',
label: '阅读时间',
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return formatDateTime(data?.readTime || '') as string;
},
},
{
field: 'createTime',
label: '创建时间',
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return formatDateTime(data?.createTime || '') as string;
},
},
];
}

63
apps/web-ele/src/views/system/notify/message/modules/detail.vue
View File

@ -1,18 +1,28 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { useDetailSchema } from '../data';
const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
const [Descriptions] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 140,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -41,47 +51,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions border :column="1" size="default" class="mx-4">
<ElDescriptionsItem label="编号">{{ formData?.id }}</ElDescriptionsItem>
<ElDescriptionsItem label="用户类型">
<DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
</ElDescriptionsItem>
<ElDescriptionsItem label="用户编号">
{{ formData?.userId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="模版编号">
{{ formData?.templateId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="模板编码">
{{ formData?.templateCode }}
</ElDescriptionsItem>
<ElDescriptionsItem label="发送人名称">
{{ formData?.templateNickname }}
</ElDescriptionsItem>
<ElDescriptionsItem label="模版内容">
{{ formData?.templateContent }}
</ElDescriptionsItem>
<ElDescriptionsItem label="模版参数">
{{ formData?.templateParams }}
</ElDescriptionsItem>
<ElDescriptionsItem label="模版类型">
<DictTag
:type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
:value="formData?.templateType"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="是否已读">
<DictTag
:type="DICT_TYPE.INFRA_BOOLEAN_STRING"
:value="formData?.readStatus"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="阅读时间">
{{ formatDateTime(formData?.readTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="创建时间">
{{ formatDateTime(formData?.createTime || '') }}
</ElDescriptionsItem>
</ElDescriptions>
<Descriptions :data="formData" />
</Modal>
</template>

23
apps/web-ele/src/views/system/notify/my/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -102,30 +103,36 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'createTime',
label: '发送时间',
content: (data) => formatDateTime(data?.createTime) as string,
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return formatDateTime(data?.createTime || '') as string;
},
},
{
field: 'templateType',
label: '消息类型',
content: (data) =>
h(DictTag, {
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
value: data?.templateType,
}),
});
},
},
{
field: 'readStatus',
label: '是否已读',
content: (data) =>
h(DictTag, {
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: data?.readStatus,
}),
});
},
},
{
field: 'readTime',
label: '阅读时间',
content: (data) => formatDateTime(data?.readTime) as string,
content: (data: SystemNotifyMessageApi.NotifyMessage) => {
return formatDateTime(data?.readTime || '') as string;
},
},
{
field: 'templateContent',

47
apps/web-ele/src/views/system/notify/my/modules/detail.vue
View File

@ -1,18 +1,28 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { useDetailSchema } from '../data';
const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
const [Descriptions] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 140,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -41,31 +51,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions border :column="1" size="default" class="mx-4">
<ElDescriptionsItem label="发送人">
{{ formData?.templateNickname }}
</ElDescriptionsItem>
<ElDescriptionsItem label="发送时间">
{{ formatDateTime(formData?.createTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="消息类型">
<DictTag
:type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
:value="formData?.templateType"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="是否已读">
<DictTag
:type="DICT_TYPE.INFRA_BOOLEAN_STRING"
:value="formData?.readStatus"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="阅读时间">
{{ formatDateTime(formData?.readTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="消息内容">
{{ formData?.templateContent }}
</ElDescriptionsItem>
</ElDescriptions>
<Descriptions :data="formData" />
</Modal>
</template>

72
apps/web-ele/src/views/system/operatelog/data.ts
View File

@ -1,5 +1,9 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import type { DescriptionItemSchema } from '#/components/description';
import { formatDateTime } from '@vben/utils';
import { getSimpleUserList } from '#/api/system/user';
import { getRangePickerDefaultProps } from '#/utils';
@ -121,3 +125,71 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '日志编号',
},
{
field: 'traceId',
label: '链路追踪',
hidden: (data: SystemOperateLogApi.OperateLog) => !data?.traceId,
},
{
field: 'userId',
label: '操作人编号',
},
{
field: 'userName',
label: '操作人名字',
},
{
field: 'userIp',
label: '操作人 IP',
},
{
field: 'userAgent',
label: '操作人 UA',
},
{
field: 'type',
label: '操作模块',
},
{
field: 'subType',
label: '操作名',
},
{
field: 'action',
label: '操作内容',
},
{
field: 'extra',
label: '操作拓展参数',
hidden: (data: SystemOperateLogApi.OperateLog) => !data?.extra,
},
{
label: '请求 URL',
content: (data: SystemOperateLogApi.OperateLog) => {
if (data?.requestMethod && data?.requestUrl) {
return `${data.requestMethod} ${data.requestUrl}`;
}
return '';
},
},
{
field: 'createTime',
label: '操作时间',
content: (data: SystemOperateLogApi.OperateLog) => {
return formatDateTime(data?.createTime || '') as string;
},
},
{
field: 'bizId',
label: '业务编号',
},
];
}

67
apps/web-ele/src/views/system/operatelog/modules/detail.vue
View File

@ -1,15 +1,28 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useDescription } from '#/components/description';
import { useDetailSchema } from '../data';
const formData = ref<SystemOperateLogApi.OperateLog>();
const [Descriptions] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 110,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -38,52 +51,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions
border
:column="1"
size="default"
class="mx-4"
:label-style="{ width: '110px' }"
>
<ElDescriptionsItem label="日志编号">
{{ formData?.id }}
</ElDescriptionsItem>
<ElDescriptionsItem label="链路追踪" v-if="formData?.traceId">
{{ formData?.traceId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作人编号">
{{ formData?.userId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作人名字">
{{ formData?.userName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作人 IP">
{{ formData?.userIp }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作人 UA">
{{ formData?.userAgent }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作模块">
{{ formData?.type }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作名">
{{ formData?.subType }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作内容">
{{ formData?.action }}
</ElDescriptionsItem>
<ElDescriptionsItem v-if="formData?.extra" label="操作拓展参数">
{{ formData?.extra }}
</ElDescriptionsItem>
<ElDescriptionsItem label="请求 URL">
{{ formData?.requestMethod }} {{ formData?.requestUrl }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作时间">
{{ formatDateTime(formData?.createTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="业务编号">
{{ formData?.bizId }}
</ElDescriptionsItem>
</ElDescriptions>
<Descriptions :data="formData" />
</Modal>
</template>

63
apps/web-ele/src/views/system/social/user/data.ts
View File

@ -1,11 +1,17 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSocialUserApi } from '#/api/system/social/user';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { getRangePickerDefaultProps } from '#/utils';
import { DictTag } from '#/components/dict-tag';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -99,3 +105,60 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'type',
label: '社交平台',
content: (data: SystemSocialUserApi.SocialUser) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
value: data?.type,
});
},
},
{
field: 'nickname',
label: '用户昵称',
},
{
field: 'avatar',
label: '用户头像',
content: (data: SystemSocialUserApi.SocialUser) => {
if (data?.avatar) {
return h('img', {
src: data.avatar,
style: 'width: 30px; height: 30px; cursor: pointer;',
onClick: () => {
// 可以添加图片预览功能
window.open(data.avatar, '_blank');
},
});
}
return '无';
},
},
{
field: 'token',
label: '社交 token',
},
{
field: 'rawTokenInfo',
label: '原始 Token 数据',
},
{
field: 'rawUserInfo',
label: '原始 User 数据',
},
{
field: 'code',
label: '最后一次的认证 code',
},
{
field: 'state',
label: '最后一次的认证 state',
},
];
}

58
apps/web-ele/src/views/system/social/user/modules/detail.vue
View File

@ -1,19 +1,30 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { SystemSocialUserApi } from '#/api/system/social/user';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { ElDescriptions, ElDescriptionsItem, ElImage } from 'element-plus';
import { getSocialUser } from '#/api/system/social/user';
import { DictTag } from '#/components/dict-tag';
import { useDescription } from '#/components/description';
import { $t } from '#/locales';
import { useDetailSchema } from '../data';
const formData = ref<SystemSocialUserApi.SocialUser>();
const [Descriptions] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 185,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
title: $t('ui.actionTitle.detail'),
async onOpenChange(isOpen: boolean) {
@ -43,41 +54,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions
:column="1"
size="default"
border
class="mx-4"
:label-width="185"
>
<ElDescriptionsItem label="社交平台">
<DictTag :type="DICT_TYPE.SYSTEM_SOCIAL_TYPE" :value="formData?.type" />
</ElDescriptionsItem>
<ElDescriptionsItem label="用户昵称">
{{ formData?.nickname }}
</ElDescriptionsItem>
<ElDescriptionsItem label="用户头像">
<ElImage
:src="formData?.avatar"
:preview-src-list="formData?.avatar ? [formData.avatar] : []"
style="width: 30px; height: 30px"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="社交 token">
{{ formData?.token }}
</ElDescriptionsItem>
<ElDescriptionsItem label="原始 Token 数据">
{{ formData?.rawTokenInfo }}
</ElDescriptionsItem>
<ElDescriptionsItem label="原始 User 数据">
{{ formData?.rawUserInfo }}
</ElDescriptionsItem>
<ElDescriptionsItem label="最后一次的认证 code">
{{ formData?.code }}
</ElDescriptionsItem>
<ElDescriptionsItem label="最后一次的认证 state">
{{ formData?.state }}
</ElDescriptionsItem>
</ElDescriptions>
<Descriptions :data="formData" />
</Modal>
</template>