Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

playground/src/views/demos/features/preferences-extension/index.vue

@@ -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>

playground/src/views/examples/form/value-format.vue

@@ -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>

playground/src/views/examples/tiptap/index.vue

@@ -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>