85 lines
3.4 KiB
Vue
85 lines
3.4 KiB
Vue
<template>
|
|
<div class="editor-toolbar">
|
|
<a-space :size="4">
|
|
<!-- 标题 -->
|
|
<a-dropdown :trigger="['click']">
|
|
<a-button type="text" size="small" title="标题">
|
|
<template #icon><span style="font-weight: bold; font-size: 14px;">H</span></template>
|
|
</a-button>
|
|
<template #overlay>
|
|
<a-menu @click="({ key }) => triggerAction('heading', key)">
|
|
<a-menu-item :key="1"><span style="font-size: 1.6em; font-weight: bold;">H1 标题</span></a-menu-item>
|
|
<a-menu-item :key="2"><span style="font-size: 1.4em; font-weight: bold;">H2 标题</span></a-menu-item>
|
|
<a-menu-item :key="3"><span style="font-size: 1.2em; font-weight: bold;">H3 标题</span></a-menu-item>
|
|
<a-menu-item :key="4"><span style="font-size: 1.1em; font-weight: bold;">H4 标题</span></a-menu-item>
|
|
<a-menu-item :key="5"><span style="font-size: 1em; font-weight: bold;">H5 标题</span></a-menu-item>
|
|
<a-menu-item :key="6"><span style="font-size: 0.9em; font-weight: bold; color: var(--text-color-secondary);">H6 标题</span></a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
|
|
<a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />
|
|
|
|
<!-- 文本样式 -->
|
|
<a-button type="text" size="small" @click="triggerAction('bold')" title="加粗 (Ctrl+B)">
|
|
<template #icon><BoldOutlined /></template>
|
|
</a-button>
|
|
<a-button type="text" size="small" @click="triggerAction('italic')" title="斜体 (Ctrl+I)">
|
|
<template #icon><ItalicOutlined /></template>
|
|
</a-button>
|
|
<a-button type="text" size="small" @click="triggerAction('strike')" title="删除线">
|
|
<template #icon><StrikethroughOutlined /></template>
|
|
</a-button>
|
|
|
|
<a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />
|
|
|
|
<!-- 引用与代码 -->
|
|
<a-button type="text" size="small" @click="triggerAction('quote')" title="引用">
|
|
<template #icon><MessageOutlined /></template>
|
|
</a-button>
|
|
<a-button type="text" size="small" @click="triggerAction('inlineCode')" title="行内代码">
|
|
<template #icon><CodeOutlined /></template>
|
|
</a-button>
|
|
<a-button type="text" size="small" @click="triggerAction('link')" title="链接">
|
|
<template #icon><LinkOutlined /></template>
|
|
</a-button>
|
|
|
|
<a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />
|
|
|
|
<!-- 列表 -->
|
|
<a-button type="text" size="small" @click="triggerAction('unorderedList')" title="无序列表">
|
|
<template #icon><UnorderedListOutlined /></template>
|
|
</a-button>
|
|
<a-button type="text" size="small" @click="triggerAction('orderedList')" title="有序列表">
|
|
<template #icon><OrderedListOutlined /></template>
|
|
</a-button>
|
|
</a-space>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
BoldOutlined,
|
|
ItalicOutlined,
|
|
StrikethroughOutlined,
|
|
CodeOutlined,
|
|
MessageOutlined,
|
|
UnorderedListOutlined,
|
|
OrderedListOutlined,
|
|
LinkOutlined
|
|
} from '@ant-design/icons-vue';
|
|
import { useEditor } from '../composables/useEditor';
|
|
|
|
const { triggerAction } = useEditor();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.editor-toolbar {
|
|
padding: 8px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background-color: var(--card-background);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
</style> |