my_org
/
PPTist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

使用icon-park替换iconfont

This commit is contained in:
pipipi-pikachu 2021-01-16 10:49:20 +08:00
parent 4638be5de3
commit ae4d82e701
18 changed files with 860 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
babel.config.js
View File

@ -10,6 +10,16 @@ module.exports = {
libraryDirectory: 'es',
style: true,
},
'antdv',
],
[
'import',
{
libraryName: '@icon-park/vue-next',
libraryDirectory: 'es/icons',
camel2DashComponentName: false,
},
'iconPark',
],
],
}

1152
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -9,8 +9,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@icon-park/vue-next": "^1.2.1",
"animate.css": "^4.1.1",
"ant-design-vue": "^2.0.0-rc.3",
"chartist": "^0.11.4",
"clipboard": "^2.0.6",
"core-js": "^3.6.5",
"crypto-js": "^4.0.0",
@ -34,6 +36,7 @@
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@types/chartist": "^0.11.0",
"@types/clipboard": "^2.0.1",
"@types/crypto-js": "^4.0.1",
"@types/jest": "^24.0.19",

2
public/index.html
View File

@ -14,7 +14,5 @@
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="//at.alicdn.com/t/font_2317509_gtjm587ludg.js"></script>
</body>
</html>

28
src/components/IconFont.vue
View File

@ -1,28 +0,0 @@
<template>
<svg class="icon-font" aria-hidden="true">
<use :xlink:href="`#${type}`"></use>
</svg>
</template>
<script lang="ts">
export default {
name: 'icon-font',
props: {
type: {
type: String,
required: true,
},
},
}
</script>
<style lang="scss" scoped>
.icon-font {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
outline: 0;
}
</style>

4
src/components/WritingBoard.vue
View File

@ -16,7 +16,7 @@
color: color,
}"
v-if="mouseInCanvas && model === 'pen'"
><IconFont class="icon" :style="{ fontSize: '36px' }" type="icon-pen" /></div>
><IconWrite class="icon" size="36" /></div>
<div
class="eraser"
@ -27,7 +27,7 @@
height: rubberSize + 'px',
}"
v-if="mouseInCanvas && model === 'eraser'"
><IconFont class="icon" :style="{ fontSize: rubberSize * 0.6 + 'px' }" type="icon-eraser" /></div>
><IconClearFormat class="icon" :size="rubberSize * 0.6" /></div>
</div>
</template>

5
src/main.ts
View File

@ -2,6 +2,7 @@ import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import '@icon-park/vue-next/styles/index.css'
import 'prosemirror-view/style/prosemirror.css'
import '@/assets/styles/prosemirror.scss'
import '@/assets/styles/global.scss'
@ -10,8 +11,8 @@ import 'animate.css'
import Contextmenu from './plugins/contextmenu'
import ClickOutside from './plugins/clickOutside'
import IconPark from './plugins/iconPark'
import IconFont from '@/components/IconFont.vue'
import FileInput from '@/components/FileInput.vue'
import SvgWrapper from '@/components/SvgWrapper.vue'
import CheckboxButton from '@/components/CheckboxButton.vue'
@ -53,8 +54,8 @@ app.component('Modal', Modal)
app.directive('contextmenu', Contextmenu)
app.directive('click-outside', ClickOutside)
app.use(IconPark)
app.component('IconFont', IconFont)
app.component('FileInput', FileInput)
app.component('SvgWrapper', SvgWrapper)
app.component('CheckboxButton', CheckboxButton)

225
src/plugins/iconPark.ts Normal file
View File

@ -0,0 +1,225 @@
import { App } from 'vue'
import {
Home,
PlayOne,
Lock,
Unlock,
Search,
Delete,
Slide,
SettingOne,
Clear,
Format,
Picture,
FullScreen,
OffScreen,
LinkOne,
List,
OrderedList,
Drag,
Formula,
Helpcenter,
SplitCells,
MergeCells,
FlipVertically,
FlipHorizontally,
FontSize,
Code,
TextBold,
TextItalic,
TextUnderline,
Strikethrough,
Edit,
Quote,
EnterTheKeyboard,
Copy,
Clipboard,
Find,
BackgroundColor,
Group,
Ungroup,
FullSelection,
ClearFormat,
Back,
Next,
Fullwidth,
GridFour,
AlignTop,
AlignLeft,
AlignRight,
AlignBottom,
AlignVertically,
AlignHorizontally,
BringToFront,
SendToBack,
AlignTextLeft,
AlignTextRight,
AlignTextCenter,
RowHeight,
More,
Write,
InsertTable,
CuttingOne,
AddThree,
AddText,
Fill,
Tailoring,
Newlybuild,
Effects,
ColorFilter,
Up,
Down,
Left,
Right,
Plus,
Minus,
Check,
Close,
Connection,
BringToFrontOne,
SentToBack,
Github,
ChartRing,
ChartLine,
ChartHistogramOne,
ChartHistogram,
ChartProportion,
ChartScatter,
PentagonOne,
PageTemplate,
Text,
Rotate,
LeftC,
RightC,
Platte,
UpOne,
DownOne,
} from '@icon-park/vue-next'
export default {
install(app: App) {
// 插入元素
app.component('IconFontSize', FontSize)
app.component('IconPicture', Picture)
app.component('IconPentagonOne', PentagonOne)
app.component('IconConnection', Connection)
app.component('IconInsertTable', InsertTable)
app.component('IconFormula', Formula)
// 剪贴板
app.component('IconCopy', Copy)
app.component('IconClipboard', Clipboard)
app.component('IconCuttingOne', CuttingOne)
// 锁定与解锁
app.component('IconLock', Lock)
app.component('IconUnlock', Unlock)
// 全屏
app.component('IconFullScreen', FullScreen)
app.component('IconOffScreen', OffScreen)
// 撤销重做
app.component('IconBack', Back)
app.component('IconNext', Next)
// 对齐
app.component('IconAlignTop', AlignTop)
app.component('IconAlignLeft', AlignLeft)
app.component('IconAlignRight', AlignRight)
app.component('IconAlignBottom', AlignBottom)
app.component('IconAlignVertically', AlignVertically)
app.component('IconAlignHorizontally', AlignHorizontally)
// 层级
app.component('IconBringToFront', BringToFront)
app.component('IconSentToBack', SentToBack)
app.component('IconBringToFrontOne', BringToFrontOne)
app.component('IconSendToBack', SendToBack)
// 组合
app.component('IconGroup', Group)
app.component('IconUngroup', Ungroup)
// 通用元素编辑
app.component('IconFill', Fill)
app.component('IconBackgroundColor', BackgroundColor)
app.component('IconPlatte', Platte)
// 表格编辑
app.component('IconSplitCells', SplitCells)
app.component('IconMergeCells', MergeCells)
// 图片编辑
app.component('IconTailoring', Tailoring)
app.component('IconColorFilter', ColorFilter)
app.component('IconFlipVertically', FlipVertically)
app.component('IconFlipHorizontally', FlipHorizontally)
// 文字编辑
app.component('IconText', Text)
app.component('IconAddText', AddText)
app.component('IconAlignTextLeft', AlignTextLeft)
app.component('IconAlignTextRight', AlignTextRight)
app.component('IconAlignTextCenter', AlignTextCenter)
app.component('IconRowHeight', RowHeight)
app.component('IconFullwidth', Fullwidth)
app.component('IconCode', Code)
app.component('IconTextBold', TextBold)
app.component('IconTextItalic', TextItalic)
app.component('IconTextUnderline', TextUnderline)
app.component('IconStrikethrough', Strikethrough)
app.component('IconEdit', Edit)
app.component('IconQuote', Quote)
app.component('IconList', List)
app.component('IconOrderedList', OrderedList)
app.component('IconUpOne', UpOne)
app.component('IconDownOne', DownOne)
app.component('IconFormat', Format)
// 箭头与符号
app.component('IconUp', Up)
app.component('IconDown', Down)
app.component('IconLeft', Left)
app.component('IconRight', Right)
app.component('IconLeftC', LeftC)
app.component('IconRightC', RightC)
app.component('IconPlus', Plus)
app.component('IconMinus', Minus)
app.component('IconCheck', Check)
app.component('IconClose', Close)
// 图表
app.component('IconChartRing', ChartRing)
app.component('IconChartLine', ChartLine)
app.component('IconChartHistogramOne', ChartHistogramOne)
app.component('IconChartHistogram', ChartHistogram)
app.component('IconChartProportion', ChartProportion)
app.component('IconChartScatter', ChartScatter)
// 其他
app.component('IconHome', Home)
app.component('IconPlayOne', PlayOne)
app.component('IconSearch', Search)
app.component('IconDelete', Delete)
app.component('IconSlide', Slide)
app.component('IconSettingOne', SettingOne)
app.component('IconClear', Clear)
app.component('IconLinkOne', LinkOne)
app.component('IconDrag', Drag)
app.component('IconHelpcenter', Helpcenter)
app.component('IconEnterTheKeyboard', EnterTheKeyboard)
app.component('IconFind', Find)
app.component('IconFullSelection', FullSelection)
app.component('IconClearFormat', ClearFormat)
app.component('IconGridFour', GridFour)
app.component('IconPageTemplate', PageTemplate)
app.component('IconGithub', Github)
app.component('IconMore', More)
app.component('IconWrite', Write)
app.component('IconAddThree', AddThree)
app.component('IconNewlybuild', Newlybuild)
app.component('IconEffects', Effects)
app.component('IconRotate', Rotate)
}
}

23
src/views/Editor/CanvasTool/index.vue
View File

@ -2,20 +2,20 @@
<div class="canvas-tool">
<div class="left-handler">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="撤销">
<IconFont type="icon-undo" class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
<IconBack class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="重做">
<IconFont type="icon-redo" class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
<IconNext class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
</Tooltip>
</div>
<div class="add-element-handler">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字">
<IconFont type="icon-text" class="handler-item" @click="drawText()" />
<IconFontSize class="handler-item" @click="drawText()" />
</Tooltip>
<FileInput @change="files => insertImageElement(files)">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片">
<IconFont type="icon-image" class="handler-item" />
<IconPicture class="handler-item" />
</Tooltip>
</FileInput>
<Popover trigger="click" v-model:visible="shapePoolVisible">
@ -23,7 +23,7 @@
<ShapePool @select="shape => drawShape(shape)" />
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状">
<IconFont type="icon-shape" class="handler-item" />
<IconPentagonOne class="handler-item" />
</Tooltip>
</Popover>
<Popover trigger="click" v-model:visible="linePoolVisible">
@ -31,21 +31,24 @@
<LinePool @select="line => drawLine(line)" />
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条">
<IconFont type="icon-line" class="handler-item" />
<IconConnection class="handler-item" />
</Tooltip>
</Popover>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入表格">
<IconFont type="icon-table" class="handler-item" />
<IconInsertTable class="handler-item" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表">
<IconFont type="icon-piechart" class="handler-item" />
<IconChartProportion class="handler-item" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入公式">
<IconFormula class="handler-item" />
</Tooltip>
</div>
<div class="right-handler">
<IconFont type="icon-minus" class="handler-item viewport-size" @click="scaleCanvas('-')" />
<IconMinus class="handler-item viewport-size" @click="scaleCanvas('-')" />
<span class="text">{{canvasScalePercentage}}</span>
<IconFont type="icon-plus" class="handler-item viewport-size" @click="scaleCanvas('+')" />
<IconPlus class="handler-item viewport-size" @click="scaleCanvas('+')" />
</div>
</div>
</template>

2
src/views/Editor/EditorHeader/index.vue
View File

@ -10,7 +10,7 @@
<div class="right">
<div class="menu-item icon">
<IconFont type="icon-github-fill" />
<IconGithub />
</div>
</div>
</div>

4
src/views/Editor/Toolbar/ElementAnimationPanel.vue
View File

@ -45,10 +45,10 @@
<div class="text">【{{element.elType}}】{{element.animationType}}</div>
<div class="handler">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="预览">
<IconFont type="icon-play-circle" class="handler-btn" @click="runAnimation(element.elId, element.type)" />
<IconPlayOne class="handler-btn" @click="runAnimation(element.elId, element.type)" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
<IconFont type="icon-delete" class="handler-btn" @click="deleteAnimation(element.elId)" />
<IconDelete class="handler-btn" @click="deleteAnimation(element.elId)" />
</Tooltip>
</div>
</div>

35
src/views/Editor/Toolbar/ElementPositionPanel.vue
View File

@ -2,38 +2,38 @@
<div class="element-positopn-panel">
<ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置顶层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconFont type="icon-layer-top" /></Button>
<Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconSendToBack /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置底层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconFont type="icon-layer-bottom" /></Button>
<Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconBringToFrontOne /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上移一层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconFont type="icon-layer-up" /></Button>
<Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconBringToFront /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下移一层">
<Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconFont type="icon-layer-down" /></Button>
<Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconSentToBack /></Button>
</Tooltip>
</ButtonGroup>
<ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
<Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconFont type="icon-align-left" /></Button>
<Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconAlignLeft /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="水平居中">
<Button style="flex: 1;" @click="alignElementToCanvas('horizontal')"><IconFont type="icon-align-vertical-center" /></Button>
<Button style="flex: 1;" @click="alignElementToCanvas('horizontal')"><IconAlignVertically /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
<Button style="flex: 1;" @click="alignElementToCanvas('right')"><IconFont type="icon-align-right" /></Button>
<Button style="flex: 1;" @click="alignElementToCanvas('right')"><IconAlignRight /></Button>
</Tooltip>
</ButtonGroup>
<ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上对齐">
<Button style="flex: 1;" @click="alignElementToCanvas('top')"><IconFont type="icon-align-top" /></Button>
<Button style="flex: 1;" @click="alignElementToCanvas('top')"><IconAlignTop /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="垂直居中">
<Button style="flex: 1;" @click="alignElementToCanvas('vertical')"><IconFont type="icon-align-horizontal-center" /></Button>
<Button style="flex: 1;" @click="alignElementToCanvas('vertical')"><IconAlignHorizontally /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下对齐">
<Button style="flex: 1;" @click="alignElementToCanvas('bottom')"><IconFont type="icon-align-bottom" /></Button>
<Button style="flex: 1;" @click="alignElementToCanvas('bottom')"><IconAlignBottom /></Button>
</Tooltip>
</ButtonGroup>
@ -75,10 +75,10 @@
/>
<template v-if="['image', 'shape'].includes(handleElement.type)">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
<IconFont type="icon-lock" style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
<IconLock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="宽高比锁定" v-else>
<IconFont type="icon-unlock" style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
<IconUnlock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
</Tooltip>
</template>
<div style="flex: 1;" v-else></div>
@ -106,10 +106,17 @@
<div class="row">
<div style="flex: 3;">旋转：</div>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="逆时针旋转">
<IconFont type="icon-rotate-left" class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
<IconRotate class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="顺时针旋转">
<IconFont type="icon-rotate-right" class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
<IconRotate
class="icon-btn"
@click="updateRotate45('+')"
:style="{
flex: 2,
transform: 'rotateY(180deg)',
}"
/>
</Tooltip>
<div style="flex: 1;"></div>
<InputNumber

2
src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
View File

@ -35,7 +35,7 @@
</template>
</div>
</template>
<Button class="no-padding" style="flex: 1;"><IconFont type="icon-down" /></Button>
<Button class="no-padding" style="flex: 1;"><IconDown /></Button>
</Popover>
</ButtonGroup>

40
src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
View File

@ -6,6 +6,7 @@
:value="richTextAttrs.fontname"
@change="value => emitRichTextCommand('fontname', value)"
>
<template #suffixIcon><IconFontSize /></template>
<SelectOption v-for="font in availableFonts" :key="font.en" :value="font.en">
<span :style="{ fontFamily: font.en }">{{font.zh}}</span>
</SelectOption>
@ -15,6 +16,7 @@
:value="richTextAttrs.fontsize"
@change="value => emitRichTextCommand('fontsize', value)"
>
<template #suffixIcon><IconAddText /></template>
<SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
{{fontsize}}
</SelectOption>
@ -31,7 +33,7 @@
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
<Button class="text-color-btn" style="flex: 1;">
<IconFont type="icon-font-colors" />
<IconText />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
</Button>
</Tooltip>
@ -45,7 +47,7 @@
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
<Button class="text-color-btn" style="flex: 1;">
<IconFont type="icon-highlight" />
<IconBackgroundColor />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
</Button>
</Tooltip>
@ -59,7 +61,7 @@
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文本框填充">
<Button class="text-color-btn" style="flex: 1;">
<IconFont type="icon-bg-colors" />
<IconFill />
<div class="text-color-block" :style="{ backgroundColor: fill }"></div>
</Button>
</Tooltip>
@ -72,28 +74,28 @@
style="flex: 1;"
:checked="richTextAttrs.bold"
@click="emitRichTextCommand('bold')"
><IconFont type="icon-bold" /></CheckboxButton>
><IconTextBold /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.em"
@click="emitRichTextCommand('em')"
><IconFont type="icon-italic" /></CheckboxButton>
><IconTextItalic /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下划线">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.underline"
@click="emitRichTextCommand('underline')"
><IconFont type="icon-underline" /></CheckboxButton>
><IconTextUnderline /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.strikethrough"
@click="emitRichTextCommand('strikethrough')"
><IconFont type="icon-strikethrough" /></CheckboxButton>
><IconStrikethrough /></CheckboxButton>
</Tooltip>
</CheckboxButtonGroup>
@ -103,34 +105,34 @@
style="flex: 1;"
:checked="richTextAttrs.superscript"
@click="emitRichTextCommand('superscript')"
><IconFont type="icon-superscript" /></CheckboxButton>
><IconUpOne /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下标">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.subscript"
@click="emitRichTextCommand('subscript')"
><IconFont type="icon-subscript" /></CheckboxButton>
><IconDownOne /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="行内代码">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.code"
@click="emitRichTextCommand('code')"
><IconFont type="icon-code" /></CheckboxButton>
><IconCode /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="引用">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.blockquote"
@click="emitRichTextCommand('blockquote')"
><IconFont type="icon-blockquote" /></CheckboxButton>
><IconQuote /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="清除格式">
<CheckboxButton
style="flex: 1;"
@click="emitRichTextCommand('clear')"
><IconFont type="icon-clear" /></CheckboxButton>
><IconFormat /></CheckboxButton>
</Tooltip>
</CheckboxButtonGroup>
@ -143,13 +145,13 @@
@change="e => emitRichTextCommand('align', e.target.value)"
>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
<RadioButton value="left" style="flex: 1;"><IconFont type="icon-text-align-left" /></RadioButton>
<RadioButton value="left" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
<RadioButton value="center" style="flex: 1;"><IconFont type="icon-text-align-center" /></RadioButton>
<RadioButton value="center" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
<RadioButton value="right" style="flex: 1;"><IconFont type="icon-text-align-right" /></RadioButton>
<RadioButton value="right" style="flex: 1;"><IconAlignTextRight /></RadioButton>
</Tooltip>
</RadioGroup>
@ -159,14 +161,14 @@
style="flex: 1;"
:checked="richTextAttrs.bulletList"
@click="emitRichTextCommand('bulletList')"
><IconFont type="icon-unorderedlist" /></CheckboxButton>
><IconList /></CheckboxButton>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="编号">
<CheckboxButton
style="flex: 1;"
:checked="richTextAttrs.orderedList"
@click="emitRichTextCommand('orderedList')"
><IconFont type="icon-orderedlist" /></CheckboxButton>
><IconOrderedList /></CheckboxButton>
</Tooltip>
</CheckboxButtonGroup>
@ -175,14 +177,14 @@
<div class="row">
<div style="flex: 2;">行间距：</div>
<Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value)">
<template #suffixIcon><IconFont type="icon-column-height" /></template>
<template #suffixIcon><IconRowHeight /></template>
<SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption>
</Select>
</div>
<div class="row">
<div style="flex: 2;">字间距：</div>
<Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value)">
<template #suffixIcon><IconFont type="icon-column-width" /></template>
<template #suffixIcon><IconFullwidth /></template>
<SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
</Select>
</div>

16
src/views/Editor/Toolbar/MultiPositionPanel.vue
View File

@ -2,32 +2,32 @@
<div class="multi-position-panel">
<ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
<Button style="flex: 1;" @click="alignActiveElement('left')"><IconFont type="icon-align-left" /></Button>
<Button style="flex: 1;" @click="alignActiveElement('left')"><IconAlignLeft /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="水平居中">
<Button style="flex: 1;" @click="alignActiveElement('horizontal')"><IconFont type="icon-align-vertical-center" /></Button>
<Button style="flex: 1;" @click="alignActiveElement('horizontal')"><IconAlignVertically /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
<Button style="flex: 1;" @click="alignActiveElement('right')"><IconFont type="icon-align-right" /></Button>
<Button style="flex: 1;" @click="alignActiveElement('right')"><IconAlignRight /></Button>
</Tooltip>
</ButtonGroup>
<ButtonGroup class="row">
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上对齐">
<Button style="flex: 1;" @click="alignActiveElement('top')"><IconFont type="icon-align-top" /></Button>
<Button style="flex: 1;" @click="alignActiveElement('top')"><IconAlignTop /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="垂直居中">
<Button style="flex: 1;" @click="alignActiveElement('vertical')"><IconFont type="icon-align-horizontal-center" /></Button>
<Button style="flex: 1;" @click="alignActiveElement('vertical')"><IconAlignHorizontally /></Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下对齐">
<Button style="flex: 1;" @click="alignActiveElement('bottom')"><IconFont type="icon-align-bottom" /></Button>
<Button style="flex: 1;" @click="alignActiveElement('bottom')"><IconAlignBottom /></Button>
</Tooltip>
</ButtonGroup>
<Divider />
<ButtonGroup class="row">
<Button :disabled="!canCombine" @click="combineElements()" style="flex: 1;"><IconFont type="icon-group" />组合</Button>
<Button :disabled="canCombine" @click="uncombineElements()" style="flex: 1;"><IconFont type="icon-ungroup" />取消组合</Button>
<Button :disabled="!canCombine" @click="combineElements()" style="flex: 1;"><IconGroup style="margin-right: 3px;" />组合</Button>
<Button :disabled="canCombine" @click="uncombineElements()" style="flex: 1;"><IconUngroup style="margin-right: 3px;" />取消组合</Button>
</ButtonGroup>
</div>
</template>

2
src/views/Editor/Toolbar/SlideStylePanel.vue
View File

@ -36,7 +36,7 @@
<FileInput @change="files => uploadBackgroundImage(files)">
<div class="background-image">
<div class="content" :style="{ backgroundImage: `url(${background.value})` }">
<IconFont type="icon-plus" />
<IconPlus />
</div>
</div>
</FileInput>

4
src/views/Editor/Toolbar/common/ColorButton.vue
View File

@ -1,7 +1,7 @@
<template>
<Button class="color-btn">
<div class="color-block" :style="{ backgroundColor: color }"></div>
<IconFont type="icon-down" class="color-btn-icon" />
<IconPlatte class="color-btn-icon" />
</Button>
</template>
@ -29,7 +29,7 @@ export default {
margin-left: 8px;
flex: 1;
}
svg.color-btn-icon {
.color-btn-icon {
width: 30px;
font-size: 12px;
margin-top: 2px;

8
src/views/Screen/index.vue
View File

@ -45,14 +45,14 @@
</Modal>
<div class="tools">
<IconFont class="tool-btn" type="icon-left-circle" @click="execPrev()" />
<IconFont class="tool-btn" type="icon-right-circle" @click="execNext()" />
<IconFont class="tool-btn" type="icon-appstore" @click="slideThumbnailModelVisible = true" />
<IconLeftC class="tool-btn" @click="execPrev()" />
<IconRightC class="tool-btn" @click="execNext()" />
<IconSearch class="tool-btn" @click="slideThumbnailModelVisible = true" />
<Popover trigger="click" v-model:visible="writingBoardToolVisible">
<template #content>
<WritingBoardTool @close="writingBoardToolVisible = false" />
</template>
<IconFont class="tool-btn" type="icon-edit" />
<IconWrite class="tool-btn" />
</Popover>
</div>
</div>