Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
xingyu4j
parent
a653e428f3
commit
adecddae67
|
|
@ -1,231 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import type { PlaygroundPreferencesExtension } from '#/preferences';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import {
|
||||
getCustomPreferences,
|
||||
updateCustomPreferences,
|
||||
} from '@vben/preferences';
|
||||
|
||||
import { Alert, Button, Card, Space, Tag } from 'ant-design-vue';
|
||||
|
||||
import { $t } from '#/locales';
|
||||
|
||||
interface DemoTaskItem {
|
||||
id: number;
|
||||
owner: string;
|
||||
priority: 'P0' | 'P1' | 'P2';
|
||||
title: string;
|
||||
}
|
||||
|
||||
type HighlightTone = PlaygroundPreferencesExtension['highlightTone'];
|
||||
|
||||
const playgroundPreferences =
|
||||
getCustomPreferences<PlaygroundPreferencesExtension>();
|
||||
|
||||
const demoTasks: DemoTaskItem[] = [
|
||||
{ id: 1, owner: 'Luna', priority: 'P0', title: '同步租户配置到缓存' },
|
||||
{ id: 2, owner: 'Aiden', priority: 'P1', title: '补充角色权限回归用例' },
|
||||
{ id: 3, owner: 'Mia', priority: 'P0', title: '修复看板接口超时重试' },
|
||||
{ id: 4, owner: 'Noah', priority: 'P2', title: '整理本周运营周报模板' },
|
||||
{ id: 5, owner: 'Ethan', priority: 'P1', title: '验证暗黑主题下图表对比度' },
|
||||
{ id: 6, owner: 'Sophia', priority: 'P1', title: '更新埋点字段映射文档' },
|
||||
{ id: 7, owner: 'Lucas', priority: 'P2', title: '检查消息中心未读状态同步' },
|
||||
{ id: 8, owner: 'Emma', priority: 'P0', title: '补齐导出任务失败告警' },
|
||||
];
|
||||
|
||||
const toneMap = {
|
||||
default: {
|
||||
alertType: 'info',
|
||||
cardClass: 'border-primary/20 bg-primary/5',
|
||||
label: $t('demos.preferencesExtensionDemo.tones.default'),
|
||||
tagColor: 'processing',
|
||||
},
|
||||
success: {
|
||||
alertType: 'success',
|
||||
cardClass: 'border-emerald-500/20 bg-emerald-500/5',
|
||||
label: $t('demos.preferencesExtensionDemo.tones.success'),
|
||||
tagColor: 'success',
|
||||
},
|
||||
warning: {
|
||||
alertType: 'warning',
|
||||
cardClass: 'border-amber-500/20 bg-amber-500/5',
|
||||
label: $t('demos.preferencesExtensionDemo.tones.warning'),
|
||||
tagColor: 'warning',
|
||||
},
|
||||
} as const satisfies Record<
|
||||
HighlightTone,
|
||||
{
|
||||
alertType: 'info' | 'success' | 'warning';
|
||||
cardClass: string;
|
||||
label: string;
|
||||
tagColor: string;
|
||||
}
|
||||
>;
|
||||
|
||||
const visibleTasks = computed(() => {
|
||||
return demoTasks.slice(0, playgroundPreferences.defaultVisibleRows);
|
||||
});
|
||||
|
||||
const toneConfig = computed(() => {
|
||||
return toneMap[playgroundPreferences.highlightTone];
|
||||
});
|
||||
|
||||
const formattedPlaygroundPreferences = computed(() => {
|
||||
return JSON.stringify(playgroundPreferences, null, 2);
|
||||
});
|
||||
|
||||
const preClasses =
|
||||
'mt-4 overflow-auto rounded-lg border border-border bg-muted p-4 text-sm';
|
||||
|
||||
function applyPreset(type: 'compact' | 'focus' | 'review') {
|
||||
const presetMap: Record<
|
||||
typeof type,
|
||||
Partial<PlaygroundPreferencesExtension>
|
||||
> = {
|
||||
compact: {
|
||||
defaultVisibleRows: 3,
|
||||
enableQuickActions: false,
|
||||
highlightTone: 'warning',
|
||||
reportTitle: $t('demos.preferencesExtensionDemo.presetTitles.compact'),
|
||||
},
|
||||
focus: {
|
||||
defaultVisibleRows: 4,
|
||||
enableQuickActions: true,
|
||||
highlightTone: 'default',
|
||||
reportTitle: $t('demos.preferencesExtensionDemo.presetTitles.default'),
|
||||
},
|
||||
review: {
|
||||
defaultVisibleRows: 6,
|
||||
enableQuickActions: true,
|
||||
highlightTone: 'success',
|
||||
reportTitle: $t('demos.preferencesExtensionDemo.presetTitles.review'),
|
||||
},
|
||||
};
|
||||
|
||||
updateCustomPreferences<PlaygroundPreferencesExtension>(presetMap[type]);
|
||||
}
|
||||
|
||||
function getPriorityColor(priority: DemoTaskItem['priority']) {
|
||||
switch (priority) {
|
||||
case 'P0': {
|
||||
return 'error';
|
||||
}
|
||||
case 'P1': {
|
||||
return 'warning';
|
||||
}
|
||||
default: {
|
||||
return 'default';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :title="$t('demos.features.preferencesExtension')">
|
||||
<template #description>
|
||||
<div class="mt-2 text-foreground/80">
|
||||
{{ $t('demos.preferencesExtensionDemo.description') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Card
|
||||
class="mb-5"
|
||||
:title="$t('demos.preferencesExtensionDemo.currentConfig')"
|
||||
>
|
||||
<Alert :type="toneConfig.alertType" show-icon>
|
||||
<template #message>
|
||||
{{
|
||||
$t('demos.preferencesExtensionDemo.currentTitle', {
|
||||
title: playgroundPreferences.reportTitle,
|
||||
})
|
||||
}}
|
||||
</template>
|
||||
<template #description>
|
||||
{{
|
||||
$t('demos.preferencesExtensionDemo.currentDescription', {
|
||||
count: playgroundPreferences.defaultVisibleRows,
|
||||
quickActionText: playgroundPreferences.enableQuickActions
|
||||
? $t('demos.preferencesExtensionDemo.showQuickActions')
|
||||
: $t('demos.preferencesExtensionDemo.hideQuickActions'),
|
||||
tone: toneConfig.label,
|
||||
})
|
||||
}}
|
||||
</template>
|
||||
</Alert>
|
||||
|
||||
<div class="mt-4 rounded-xl border p-4" :class="toneConfig.cardClass">
|
||||
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="text-lg font-semibold">
|
||||
{{ playgroundPreferences.reportTitle }}
|
||||
</div>
|
||||
<div class="text-sm text-foreground/60">
|
||||
{{ $t('demos.preferencesExtensionDemo.boardDescription') }}
|
||||
</div>
|
||||
</div>
|
||||
<Tag :color="toneConfig.tagColor">
|
||||
{{ toneConfig.label }}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<Space
|
||||
v-if="playgroundPreferences.enableQuickActions"
|
||||
wrap
|
||||
class="mb-4"
|
||||
>
|
||||
<Button type="primary">
|
||||
{{ $t('demos.preferencesExtensionDemo.quickActions.create') }}
|
||||
</Button>
|
||||
<Button>
|
||||
{{ $t('demos.preferencesExtensionDemo.quickActions.export') }}
|
||||
</Button>
|
||||
<Button>
|
||||
{{ $t('demos.preferencesExtensionDemo.quickActions.refresh') }}
|
||||
</Button>
|
||||
</Space>
|
||||
<div v-else class="mb-4 text-sm text-foreground/60">
|
||||
{{ $t('demos.preferencesExtensionDemo.quickActionsEnabled') }}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="task in visibleTasks"
|
||||
:key="task.id"
|
||||
class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-background px-4 py-3"
|
||||
>
|
||||
<div>
|
||||
<div class="font-medium">{{ task.title }}</div>
|
||||
<div class="text-sm text-foreground/60">
|
||||
{{ $t('demos.preferencesExtensionDemo.owner') }}：{{
|
||||
task.owner
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<Tag :color="getPriorityColor(task.priority)">
|
||||
{{ task.priority }}
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card :title="$t('demos.preferencesExtensionDemo.presetTitle')">
|
||||
<Space wrap>
|
||||
<Button @click="applyPreset('focus')">
|
||||
{{ $t('demos.preferencesExtensionDemo.presetButtons.default') }}
|
||||
</Button>
|
||||
<Button @click="applyPreset('compact')">
|
||||
{{ $t('demos.preferencesExtensionDemo.presetButtons.compact') }}
|
||||
</Button>
|
||||
<Button type="primary" @click="applyPreset('review')">
|
||||
{{ $t('demos.preferencesExtensionDemo.presetButtons.review') }}
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
<pre :class="preClasses">{{ formattedPlaygroundPreferences }}</pre>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card, message, Space, Tag } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
|
||||
import DocButton from '../doc-button.vue';
|
||||
|
||||
const transformedValues = ref<Record<string, any>>({});
|
||||
const liveValues = ref<Record<string, any>>({});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
handleSubmit,
|
||||
schema: [
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'reportRange',
|
||||
help: '通过 setValue 拆分为 startTime / endTime，并移除原字段',
|
||||
label: '统计时间范围',
|
||||
valueFormat(value, setValue) {
|
||||
setValue('startTime', value?.[0]?.valueOf());
|
||||
setValue('endTime', value?.[1]?.valueOf());
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'DatePicker',
|
||||
fieldName: 'deadline',
|
||||
help: '直接 return 时间戳，保留原字段名',
|
||||
label: '截止时间',
|
||||
valueFormat(value) {
|
||||
return value?.valueOf();
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入关键字',
|
||||
},
|
||||
fieldName: 'keyword',
|
||||
label: '关键字',
|
||||
},
|
||||
],
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2',
|
||||
});
|
||||
|
||||
const liveValuesPreview = computed(() => formatJsonPreview(liveValues.value));
|
||||
|
||||
const transformedValuesPreview = computed(() => {
|
||||
return formatJsonPreview(transformedValues.value);
|
||||
});
|
||||
|
||||
function formatJsonPreview(value: Record<string, any>) {
|
||||
return JSON.stringify(
|
||||
value,
|
||||
(_key, currentValue) => {
|
||||
return dayjs.isDayjs(currentValue)
|
||||
? currentValue.format('YYYY-MM-DD HH:mm:ss')
|
||||
: currentValue;
|
||||
},
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
async function handleInspectValues() {
|
||||
await syncPreviewValues();
|
||||
message.success('已刷新 getValues 输出');
|
||||
}
|
||||
|
||||
function handleSetExampleValue() {
|
||||
formApi.setValues({
|
||||
deadline: dayjs('2026-04-12 18:30:00'),
|
||||
keyword: 'invoice',
|
||||
reportRange: [dayjs('2026-04-01 00:00:00'), dayjs('2026-04-12 23:59:59')],
|
||||
});
|
||||
}
|
||||
|
||||
function handleSubmit(values: Record<string, any>) {
|
||||
transformedValues.value = values;
|
||||
message.success({
|
||||
content: `getValues output: ${JSON.stringify(values)}`,
|
||||
});
|
||||
}
|
||||
|
||||
async function syncPreviewValues(values?: Record<string, any>) {
|
||||
liveValues.value = values ?? formApi.form?.values ?? {};
|
||||
transformedValues.value = await formApi.getValues();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
watch(
|
||||
() => formApi.form?.values,
|
||||
async (values) => {
|
||||
await syncPreviewValues(values);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page
|
||||
content-class="flex flex-col gap-4"
|
||||
description="演示 schema.valueFormat 如何把组件值转换为提交/查询所需的 payload。"
|
||||
title="表单 valueFormat"
|
||||
>
|
||||
<template #description>
|
||||
<div class="text-muted-foreground space-y-2">
|
||||
<p>
|
||||
<code>form.values</code> 保持组件原始值，<code>getValues()</code> /
|
||||
提交时会按 <code>schema.valueFormat</code> 输出转换后的 payload。
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Tag color="processing">return 值：回写当前字段</Tag>
|
||||
<Tag color="success">setValue：拆分写入其他字段</Tag>
|
||||
<Tag color="warning">return undefined：保持原字段删除</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<DocButton path="/components/common-ui/vben-form" />
|
||||
</template>
|
||||
|
||||
<Card title="valueFormat 示例">
|
||||
<template #extra>
|
||||
<Space wrap>
|
||||
<Button @click="handleSetExampleValue">填充示例数据</Button>
|
||||
<Button type="primary" @click="handleInspectValues">
|
||||
查看 getValues 输出
|
||||
</Button>
|
||||
</Space>
|
||||
</template>
|
||||
<Form />
|
||||
</Card>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
<Card title="原始 form.values（组件值）">
|
||||
<pre class="bg-muted overflow-auto rounded-md p-4 text-sm">{{
|
||||
liveValuesPreview
|
||||
}}</pre>
|
||||
</Card>
|
||||
<Card title="getValues / submit 输出（valueFormat 后）">
|
||||
<pre class="bg-muted overflow-auto rounded-md p-4 text-sm">{{
|
||||
transformedValuesPreview
|
||||
}}</pre>
|
||||
</Card>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { VbenTiptap, VbenTiptapPreview } from '@vben/plugins/tiptap';
|
||||
|
||||
import { Card } from 'ant-design-vue';
|
||||
const content = ref(`
|
||||
<h1>Vben Tiptap</h1>
|
||||
<p>这个编辑器已经被封装在 <code>packages/effects/plugins/src/tiptap</code> 中。</p>
|
||||
<p>你可以直接在各个 app 里通过 <code>@vben/plugins/tiptap</code> 引入。</p>
|
||||
<blockquote>默认内置 StarterKit、Underline、TextAlign、Placeholder。</blockquote>
|
||||
`);
|
||||
const previewContent = computed(() => content.value);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="Tiptap 富文本">
|
||||
<template #description>
|
||||
<div class="mt-2 text-foreground/80">
|
||||
统一封装后的富文本编辑器，适合在各个 app 中直接复用。
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Card class="mb-5" title="编辑器">
|
||||
<VbenTiptap v-model="content" />
|
||||
</Card>
|
||||
|
||||
<Card class="mb-5" title="富文本预览">
|
||||
<VbenTiptapPreview :content="previewContent" />
|
||||
</Card>
|
||||
|
||||
<Card title="HTML 输出">
|
||||
<pre class="overflow-auto rounded-xl border border-border bg-muted p-4">
|
||||
{{ previewContent }}
|
||||
</pre>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
Loading…
Reference in New Issue