feat(admin): integrate markdown editor for news creation

This commit replaces the basic textarea in the 'Add News' modal with a full-featured Markdown editor.

- Adds the `md-editor-v3` dependency.
- Implements the editor within a `ClientOnly` component for client-side rendering.
- Creates a Nuxt plugin to register the `MdEditor` component globally.
- Adjusts the modal to be fullscreen to provide a better user experience for content creation.
This commit is contained in:
xiaomai
2025-10-08 10:13:18 +08:00
parent 3254926c43
commit cc7b2a7398
4 changed files with 663 additions and 11 deletions

View File

@@ -1,29 +1,36 @@
<template>
<UModal v-model:open="open" title="撰写新闻" description="在数据库中添加一篇新闻">
<UModal v-model:open="open" title="撰写新闻" description="在数据库中添加一篇新闻" fullscreen :ui="{
body: 'overflow-y-auto p-6', // 防止溢出 + 内边距
footer: 'justify-end'
}">
<UButton label="撰写新闻" icon="mdi:newspaper-plus" />
<template #body>
<UForm :schema="newsSchema" :state="newsState" @submit="onSubmit">
<UForm ref="form" :schema="newsSchema" :state="newsState" @submit="onSubmit" class="space-y-4">
<UFormField label="新闻标题" name="title">
<UInput v-model="newsState.title" placeholder="请输入新闻标题" class="w-full" />
</UFormField>
<UFormField label="新闻内容" name="contents">
<UTextarea v-model="newsState.content" class="w-full" />
<ClientOnly>
<MdEditor v-model="newsState.content" />
</ClientOnly>
</UFormField>
这里应该是要有一个 Markdown 编辑界面
<div class="flex justify-end gap-2">
<UButton label="Cancel" color="neutral" variant="subtle" @click="open = false" />
<UButton label="Create" color="primary" variant="solid" type="submit" />
</div>
</UForm>
</template>
<template #footer>
<UButton label="Cancel" color="neutral" variant="subtle" @click="open = false" />
<UButton label="Create" color="primary" variant="solid" @click="form.submit()" />
</template>
</UModal>
</template>
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui';
import { MdEditor } from 'md-editor-v3';
import * as z from 'zod'
const form = ref();
const open = ref(false);
const newsSchema = z.object({