laobinghu
ce208df092
核心功能: - 项目初始化 (Nuxt 4 + Nuxt UI + Pinia + ofetch) - TypeScript 类型定义 (User, Article, Comment, API 响应) - 认证系统 (登录/登出、Cookie 支持、权限中间件) - 文章列表页 (筛选、分页、响应式布局) - 文章详情页 (Markdown 渲染、评论系统) - 文章编辑器 (左右分栏、实时预览、Markdown 工具栏) 管理后台: - 侧边栏布局、权限检查 - 数据分析 (数据统计卡片、热门文章、评论审核统计) - 文章管理 (表格、筛选、删除) - 评论管理 (审核通过/拒绝、删除) - 用户管理 (角色管理、删除) 全局组件: - 导航栏 (暗色模式切换、移动端菜单) - 页脚 - 403/404 错误页 配置文件: - .env.example 环境变量模板 - nuxt.config.ts 完整配置 - 自定义 CSS 样式
32 lines
2.0 KiB
Vue
32 lines
2.0 KiB
Vue
<template>
|
|
<UCard class="mb-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-bars-3" @click="insertSyntax('# ', '')" title="标题 H1" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-bars-3" class="font-bold" @click="insertSyntax('## ', '')" title="标题 H2" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-bold" @click="insertSyntax('**', '**')" title="粗体" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-italic" @click="insertSyntax('*', '*')" title="斜体" />
|
|
<UDivider orientation="vertical" class="h-8" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-link" @click="insertSyntax('[', '](url)')" title="链接" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-photo" @click="insertSyntax('')" title="图片" />
|
|
<UDivider orientation="vertical" class="h-8" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-list-bullet" @click="insertSyntax('- ', '')" title="无序列表" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-numbered-list" @click="insertSyntax('1. ', '')" title="有序列表" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-code-bracket" @click="insertSyntax('```\n', '\n```')" title="代码块" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-command-line" @click="insertSyntax('`', '`')" title="行内代码" />
|
|
<UDivider orientation="vertical" class="h-8" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-minus" @click="insertSyntax('\n---\n', '')" title="分割线" />
|
|
<UButton variant="ghost" size="sm" icon="i-heroicons-table-cells" @click="insertSyntax('\n| 列1 | 列2 |\n|-----|-----|\n| 值1 | 值2 |\n', '')" title="表格" />
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const emit = defineEmits<{
|
|
insert: [before: string, after: string]
|
|
}>()
|
|
|
|
const insertSyntax = (before: string, after: string) => {
|
|
emit('insert', before, after)
|
|
}
|
|
</script>
|