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

!78 refactor: 代码生成预览优化 

Merge pull request !78 from puhui999/v-next
pull/80/head
芋道源码 2025-04-22 13:18:51 +00:00 committed by Gitee
parent f202e1c69c ffe235433d
commit 5f957195df
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
12 changed files with 120 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-antd/src/api/infra/demo/demo03/inner/index.ts
View File

@ -10,7 +10,7 @@ export namespace Demo03StudentApi {
name?: string; // 名字
score?: number; // 分数
}
// TODO @puhui999：要不要每个 interface 之间，有个空行
/** 学生班级信息 */
export interface Demo03Grade {
id: number; // 编号
@ -18,6 +18,7 @@ export namespace Demo03StudentApi {
name?: string; // 名字
teacher?: string; // 班主任
}
/** 学生信息 */
export interface Demo03Student {
id: number; // 编号
@ -61,7 +62,7 @@ export function exportDemo03Student(params: any) {
}
// ==================== 子表（学生课程） ====================
// TODO @puhui999：==================== 后面，加个空行，会更清晰一点
/** 获得学生课程列表 */
export function getDemo03CourseListByStudentId(studentId: number) {
return requestClient.get<Demo03StudentApi.Demo03Course[]>(
@ -70,6 +71,7 @@ export function getDemo03CourseListByStudentId(studentId: number) {
}
// ==================== 子表（学生班级） ====================
/** 获得学生班级 */
export function getDemo03GradeByStudentId(studentId: number) {
return requestClient.get<Demo03StudentApi.Demo03Grade>(

6
apps/web-antd/src/views/infra/codegen/data.ts
View File

@ -3,7 +3,6 @@ import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraCodegenApi } from '#/api/infra/codegen';
import type { SystemMenuApi } from '#/api/system/menu';
import type { Recordable } from '@vben/types';
import type { ComputedRef } from 'vue';
import { IconifyIcon } from '@vben/icons';
@ -388,18 +387,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
];
}
const dataSourceConfigList = await getDataSourceConfigList();
/** 列表的字段 */
// TODO @puhui999：getDataSourceConfigName，要不改成 data.ts 加载 list，然后使用。
export function useGridColumns<T = InfraCodegenApi.CodegenTable>(
onActionClick: OnActionClickFn<T>,
getDataSourceConfigName: ComputedRef<(cellValue: number) => string>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'dataSourceConfigId',
title: '数据源',
minWidth: 120,
formatter: ({ cellValue }) => getDataSourceConfigName.value(cellValue),
formatter: ({ cellValue }) => dataSourceConfigList.find((item) => item.id === cellValue)?.name || '',
},
{
field: 'tableName',

9
apps/web-antd/src/views/infra/codegen/edit/index.vue
View File

@ -11,6 +11,7 @@ import { getCodegenTable, updateCodegenTable } from '#/api/infra/codegen';
import { $t } from '#/locales';
import { ref, unref } from 'vue';
import { useTabs } from '@vben/hooks';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
@ -72,7 +73,6 @@ const submitForm = async () => {
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
// TODO @puhui999：保存的时候，修改的 tab 没关闭哈
close();
} catch (error) {
console.error('保存失败', error);
@ -80,9 +80,10 @@ const submitForm = async () => {
hideLoading();
}
};
const tabs = useTabs();
/** 返回列表 */
const close = () => {
tabs.closeCurrentTab();
router.push('/infra/codegen');
};
@ -137,9 +138,7 @@ getDetail();
<div class="mt-4 flex justify-end space-x-2">
<Button v-show="currentStep > 0" @click="prevStep">上一步</Button>
<Button v-show="currentStep < steps.length - 1" @click="nextStep">下一步</Button>
<Button type="primary" :loading="loading" @click="submitForm">
保存
</Button>
<Button type="primary" :loading="loading" @click="submitForm"> 保存 </Button>
</div>
</div>
</Page>

55
apps/web-antd/src/views/infra/codegen/modules/preview-code.vue
View File

@ -1,9 +1,4 @@
<script lang="ts" setup>
// TODO @puhui999：bug 同一个预览，点击多次，第二次不展示；
// TODO @puhui999：体验优化：左边的树，默认展开所有节点；这样体验好点哈
// TODO @puhui999：展示代码时，前两行是空的，可能要看下
// TODO @puhui999：要不预览代码，默认全屏？
// TODO @芋艿：待定，vben2.0 有 CodeEditor，不确定官方后续会不会迁移！！！
import type { InfraCodegenApi } from '#/api/infra/codegen';
@ -47,27 +42,30 @@ const previewFiles = ref<InfraCodegenApi.CodegenPreview[]>([]);
const activeKey = ref<string>('');
/** 代码地图 */
const codeMap = new Map<string, string>();
const setCodeMode = (key: string, lang: string, code: string) => {
const codeMap = ref<Map<string, string>>(new Map<string, string>());
const setCodeMap = (key: string, lang: string, code: string) => {
// 处理可能的缩进问题，特别是对Java文件
const trimmedCode = code.trimStart();
// 如果已有缓存则不重新构建
if (codeMap.value.has(key)) {
return;
}
try {
const highlightedCode = hljs.highlight(trimmedCode, {
language: lang,
}).value;
codeMap.set(key, highlightedCode);
codeMap.value.set(key, highlightedCode);
} catch {
codeMap.set(key, trimmedCode);
codeMap.value.set(key, trimmedCode);
}
};
const removeCodeMapKey = (targetKey: any) => {
// 只有一个代码视图时不允许删除
if (codeMap.size === 1) {
if (codeMap.value.size === 1) {
return;
}
if (codeMap.has(targetKey)) {
codeMap.delete(targetKey);
if (codeMap.value.has(targetKey)) {
codeMap.value.delete(targetKey);
}
};
@ -98,7 +96,7 @@ const handleNodeClick = (_: any[], e: any) => {
if (!file) return;
const lang = file.filePath.split('.').pop() || '';
setCodeMode(activeKey.value, lang, file.code);
setCodeMap(activeKey.value, lang, file.code);
};
/** 处理文件树 */
@ -179,11 +177,11 @@ const handleFiles = (data: InfraCodegenApi.CodegenPreview[]): FileNode[] => {
/** 模态框实例 */
const [Modal, modalApi] = useVbenModal({
footer: false,
class: 'w-3/5',
fullscreen: true,
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// 关闭时清除代码视图缓存
codeMap.clear();
codeMap.value.clear();
return;
}
@ -202,7 +200,7 @@ const [Modal, modalApi] = useVbenModal({
activeKey.value = data[0]?.filePath || '';
const lang = activeKey.value.split('.').pop() || '';
const code = data[0]?.code || '';
setCodeMode(activeKey.value, lang, code);
setCodeMap(activeKey.value, lang, code);
}
} finally {
loading.value = false;
@ -215,18 +213,22 @@ const [Modal, modalApi] = useVbenModal({
<Modal title="代码预览">
<div class="flex h-full" v-loading="loading">
<!-- 文件树 -->
<div class="w-1/3 border-r border-gray-200 pr-4 dark:border-gray-700">
<DirectoryTree v-model:active-key="activeKey" @select="handleNodeClick" :tree-data="fileTree" />
<div class="h-full w-1/3 overflow-auto border-r border-gray-200 pr-4 dark:border-gray-700">
<DirectoryTree
v-if="fileTree.length > 0"
default-expand-all
v-model:active-key="activeKey"
@select="handleNodeClick"
:tree-data="fileTree"
/>
</div>
<!-- 代码预览 -->
<div class="w-2/3 pl-4">
<div class="h-full w-2/3 overflow-auto pl-4">
<Tabs v-model:active-key="activeKey" hide-add type="editable-card" @edit="removeCodeMapKey">
<Tabs.TabPane v-for="key in codeMap.keys()" :key="key" :tab="key.split('/').pop()">
<div class="h-[calc(100%-40px)] overflow-auto">
<pre class="overflow-auto rounded-md bg-gray-50 p-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
<div class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
<!-- eslint-disable-next-line vue/no-v-html -->
<code v-html="codeMap.get(activeKey)" class="code-highlight"></code>
</pre>
</div>
</Tabs.TabPane>
<template #rightExtra>
@ -248,13 +250,6 @@ const [Modal, modalApi] = useVbenModal({
background: transparent;
}
/* 代码块内容无缩进 */
:deep(pre) {
padding: 1rem;
margin: 0;
white-space: pre;
}
/* 关键字 */
:deep(.hljs-keyword) {
@apply text-purple-600 dark:text-purple-400;

11
apps/web-antd/src/views/infra/demo/demo01/data.ts
View File

@ -52,22 +52,16 @@ export function useFormSchema(): VbenFormSchema[] {
valueFormat: 'x',
},
},
// TODO 【富文本】@puhui999：@芋艿：后续要封装下；单独 pr
{
fieldName: 'description',
label: '简介',
rules: 'required',
component: 'Editor',
component: 'RichTextarea',
},
// TODO 【文件上传】@puhui999：@芋艿：后续要封装下；单独 pr
{
fieldName: 'avatar',
label: '头像',
component: 'FileUpload',
componentProps: {
fileType: 'image',
maxCount: 1,
},
component: 'ImageUpload',
},
];
}
@ -91,6 +85,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
placeholder: '请选择性别',
},
},
{

23
apps/web-antd/src/views/infra/demo/demo01/index.vue
View File

@ -25,15 +25,9 @@ function onRefresh() {
gridApi.query();
}
/** 导出表格 */
async function onExport() {
const data = await exportDemo01Contact(await gridApi.formApi.getValues());
downloadByData(data, '示例联系人.xls');
}
/** 创建示例联系人 */
function onCreate() {
formModalApi.setData(null).open();
formModalApi.setData({}).open();
}
/** 编辑示例联系人 */
@ -60,18 +54,23 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
}
}
/** 导出表格 */
async function onExport() {
const data = await exportDemo01Contact(await gridApi.formApi.getValues());
downloadByData(data, '示例联系人.xls');
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<Demo01ContactApi.Demo01Contact>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
// TODO @puhui999：edit 放在 delete 前面哈。好理解一点，修改 => 删除
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}

3
apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
View File

@ -47,6 +47,7 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
@ -55,9 +56,7 @@ const [Modal, modalApi] = useVbenModal({
if (!data) {
return;
}
if (data.id) {
// 编辑 TODO @puhui999：1）这里注释，“编辑”去掉；2）data.id 上面的空行去掉；
modalApi.lock();
try {
data = await getDemo01Contact(data.id);

24
apps/web-antd/src/views/system/notify/my/index.vue
View File

@ -1,14 +1,11 @@
<script lang="ts" setup>
// TODO @puhui999：需要看看，vben 哪里改下哈。一个是 vben 右上角的站内信、一个是点击查看所有消息，应该跳转到这里。
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { DocAlert } from '#/components/doc-alert';
import Detail from './modules/detail.vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { MdiCheckboxMarkedCircleOutline } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
@ -17,10 +14,8 @@ import {
updateAllNotifyMessageRead,
updateNotifyMessageRead,
} from '#/api/system/notify/message';
import { DocAlert } from '#/components/doc-alert';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
@ -68,9 +63,7 @@ async function onMarkRead() {
return;
}
const ids = rows.map(
(row: SystemNotifyMessageApi.SystemNotifyMessage) => row.id,
);
const ids = rows.map((row: SystemNotifyMessageApi.SystemNotifyMessage) => row.id);
message.loading({
content: '正在标记已读...',
duration: 0,
@ -106,10 +99,7 @@ async function onMarkAllRead() {
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemNotifyMessageApi.SystemNotifyMessage>) {
function onActionClick({ code, row }: OnActionClickParams<SystemNotifyMessageApi.SystemNotifyMessage>) {
switch (code) {
case 'detail': {
onDetail(row);
@ -149,9 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
search: true,
},
checkboxConfig: {
checkMethod: (params: {
row: SystemNotifyMessageApi.SystemNotifyMessage;
}) => !params.row.readStatus,
checkMethod: (params: { row: SystemNotifyMessageApi.SystemNotifyMessage }) => !params.row.readStatus,
highlight: true,
},
} as VxeTableGridOptions<SystemNotifyMessageApi.SystemNotifyMessage>,

59
apps/web-antd/src/views/system/notify/template/data.ts
View File

@ -2,13 +2,14 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum } from '#/utils/constants';
import { getSimpleUserList } from '#/api/system/user';
import { CommonStatusEnum, UserTypeEnum } from '#/utils/constants';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
@ -63,10 +64,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: '模板类型',
component: 'Select',
componentProps: {
options: getDictOptions(
DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
'number',
),
options: getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, 'number'),
class: 'w-full',
placeholder: '请选择模板类型',
},
@ -130,10 +128,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '模板类型',
component: 'Select',
componentProps: {
options: getDictOptions(
DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
'number',
),
options: getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, 'number'),
allowClear: true,
placeholder: '请选择模板类型',
},
@ -170,13 +165,47 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
show: () => false,
},
},
{
fieldName: 'userType',
label: '用户类型',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
},
rules: z.number().default(UserTypeEnum.MEMBER),
},
{
fieldName: 'userId',
label: '用户编号',
label: '接收人ID',
component: 'Input',
componentProps: {
placeholder: '请输入用户编号',
},
dependencies: {
show(values) {
return values.userType === UserTypeEnum.MEMBER;
},
triggerFields: ['userType'],
},
rules: 'required',
},
{
fieldName: 'userId',
label: '接收人',
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
class: 'w-full',
labelField: 'nickname',
valueField: 'id',
placeholder: '请选择接收人',
},
dependencies: {
show(values) {
return values.userType === UserTypeEnum.ADMIN;
},
triggerFields: ['userType'],
},
rules: 'required',
},
{
@ -192,9 +221,9 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<
T = SystemNotifyTemplateApi.SystemNotifyTemplate,
>(onActionClick: OnActionClickFn<T>): VxeTableGridOptions['columns'] {
export function useGridColumns<T = SystemNotifyTemplateApi.SystemNotifyTemplate>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',

36
apps/web-antd/src/views/system/notify/template/index.vue
View File

@ -1,28 +1,20 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { DocAlert } from '#/components/doc-alert';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteNotifyTemplate,
exportNotifyTemplate,
getNotifyTemplatePage,
} from '#/api/system/notify/template';
import { DocAlert } from '#/components/doc-alert';
import { deleteNotifyTemplate, exportNotifyTemplate, getNotifyTemplatePage } from '#/api/system/notify/template';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -80,10 +72,7 @@ async function onDelete(row: SystemNotifyTemplateApi.SystemNotifyTemplate) {
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemNotifyTemplateApi.SystemNotifyTemplate>) {
function onActionClick({ code, row }: OnActionClickParams<SystemNotifyTemplateApi.SystemNotifyTemplate>) {
switch (code) {
case 'delete': {
onDelete(row);
@ -138,20 +127,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
<SendModal />
<Grid table-title="站内信模板列表">
<template #toolbar-tools>
<Button
type="primary"
@click="onCreate"
v-access:code="['system:notify-template:create']"
>
<Button type="primary" @click="onCreate" v-access:code="['system:notify-template:create']">
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['站内信模板']) }}
</Button>
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:notify-template:export']"
>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:notify-template:export']">
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

25
apps/web-antd/src/views/system/notify/template/modules/form.vue
View File

@ -1,28 +1,20 @@
<script lang="ts" setup>
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createNotifyTemplate,
getNotifyTemplate,
updateNotifyTemplate,
} from '#/api/system/notify/template';
import { createNotifyTemplate, getNotifyTemplate, updateNotifyTemplate } from '#/api/system/notify/template';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<SystemNotifyTemplateApi.SystemNotifyTemplate>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['站内信模板'])
: $t('ui.actionTitle.create', ['站内信模板']);
return formData.value?.id ? $t('ui.actionTitle.edit', ['站内信模板']) : $t('ui.actionTitle.create', ['站内信模板']);
});
const [Form, formApi] = useVbenForm({
@ -39,12 +31,9 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as SystemNotifyTemplateApi.SystemNotifyTemplate;
const data = (await formApi.getValues()) as SystemNotifyTemplateApi.SystemNotifyTemplate;
try {
await (formData.value?.id
? updateNotifyTemplate(data)
: createNotifyTemplate(data));
await (formData.value?.id ? updateNotifyTemplate(data) : createNotifyTemplate(data));
// 关闭并提示
await modalApi.close();
emit('success');
@ -60,9 +49,9 @@ const [Modal, modalApi] = useVbenModal({
if (!isOpen) {
return;
}
// 加载数据
const data =
modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
const data = modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
if (!data || !data.id) {
return;
}

9
apps/web-antd/src/views/system/notify/template/modules/send-form.vue
View File

@ -1,15 +1,13 @@
<script lang="ts" setup>
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { sendNotify } from '#/api/system/notify/template';
import { $t } from '#/locales';
import { ref } from 'vue';
import { useSendNotifyFormSchema } from '../data';
@ -24,7 +22,6 @@ const [Form, formApi] = useVbenForm({
},
});
// TODO @puhui999：有个用户类型的选项。不同的用户类型，对应的接收人处理不同。
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@ -42,6 +39,7 @@ const [Modal, modalApi] = useVbenModal({
}
const data: SystemNotifyTemplateApi.SystemNotifySendReqVO = {
userId: values.userId,
userType: values.userType,
templateCode: formData.value?.code || '',
templateParams: paramsObj,
};
@ -67,8 +65,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 获取数据
const data =
modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
const data = modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
if (!data || !data.id) {
return;
}