feat(admin): add initial admin dashboard structure
This commit introduces the foundational structure for the new admin dashboard. - Utilizes @nuxt/ui to build the dashboard layout, including a collapsible sidebar and navigation. - Adds initial pages for the dashboard, news, events, and hall of fame management. - Implements a composable `useDashboardSidebarLinks` for managing sidebar navigation. - Refactors the default layout by integrating the header and footer directly. - Swaps the primary and secondary theme colors across the application.
This commit is contained in:
52
app/components/admin/contents/news/AddModal.vue
Normal file
52
app/components/admin/contents/news/AddModal.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<UModal v-model:open="open" title="撰写新闻" description="在数据库中添加一篇新闻">
|
||||
<UButton label="撰写新闻" icon="mdi:newspaper-plus" />
|
||||
|
||||
<template #body>
|
||||
<UForm :schema="newsSchema" :state="newsState" @submit="onSubmit">
|
||||
<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" />
|
||||
</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>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormSubmitEvent } from '@nuxt/ui';
|
||||
import * as z from 'zod'
|
||||
|
||||
const open = ref(false);
|
||||
|
||||
const newsSchema = z.object({
|
||||
title: z.string().min(2, '标题太短了容易产生歧义,请写长一些').max(15, '标题太长了影响阅读体验,请简短一些'),
|
||||
content: z.string()
|
||||
})
|
||||
|
||||
type NewsSchema = z.output<typeof newsSchema>
|
||||
|
||||
const newsState = reactive<Partial<NewsSchema>>({
|
||||
title: undefined,
|
||||
content: undefined
|
||||
})
|
||||
|
||||
const toast = useToast();
|
||||
const onSubmit = async (event: FormSubmitEvent<NewsSchema>) => {
|
||||
toast.add({
|
||||
title: "成功",
|
||||
description: `${event.data.title} 新闻稿已经撰写完毕`,
|
||||
color: 'success'
|
||||
})
|
||||
open.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user