mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
chore: 升级 ant-design-vue v4.0.0
This commit is contained in:
pipipi-pikachu
parent
2c22196501
commit
017bed2d81
@ -3,15 +3,6 @@ module.exports = {
|
||||
'@vue/cli-plugin-babel/preset',
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'ant-design-vue',
|
||||
libraryDirectory: 'es',
|
||||
style: true,
|
||||
},
|
||||
'antdv',
|
||||
],
|
||||
[
|
||||
'import',
|
||||
{
|
||||
|
||||
71
package-lock.json
generated
71
package-lock.json
generated
@ -10,7 +10,7 @@
|
||||
"dependencies": {
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"ant-design-vue": "^3.2.20",
|
||||
"ant-design-vue": "^4.0.0",
|
||||
"chartist": "^1.3.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"core-js": "^3.8.3",
|
||||
@ -2249,6 +2249,16 @@
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/hash": {
|
||||
"version": "0.9.1",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
|
||||
"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
|
||||
},
|
||||
"node_modules/@emotion/unitless": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
|
||||
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
|
||||
},
|
||||
"node_modules/@eslint-community/eslint-utils": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
|
||||
@ -4368,17 +4378,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/ant-design-vue": {
|
||||
"version": "3.2.20",
|
||||
"resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.20.tgz",
|
||||
"integrity": "sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.0.0.tgz",
|
||||
"integrity": "sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==",
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^6.0.0",
|
||||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"@babel/runtime": "^7.10.5",
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@ctrl/tinycolor": "^3.5.0",
|
||||
"@emotion/hash": "^0.9.0",
|
||||
"@emotion/unitless": "^0.8.0",
|
||||
"@simonwep/pickr": "~1.8.0",
|
||||
"array-tree-filter": "^2.1.0",
|
||||
"async-validator": "^4.0.0",
|
||||
"csstype": "^3.1.1",
|
||||
"dayjs": "^1.10.5",
|
||||
"dom-align": "^1.12.1",
|
||||
"dom-scroll-into-view": "^2.0.0",
|
||||
@ -4387,6 +4400,8 @@
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"scroll-into-view-if-needed": "^2.2.25",
|
||||
"shallow-equal": "^1.0.0",
|
||||
"stylis": "^4.1.3",
|
||||
"throttle-debounce": "^5.0.0",
|
||||
"vue-types": "^3.0.0",
|
||||
"warning": "^4.0.0"
|
||||
},
|
||||
@ -13118,6 +13133,11 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/stylis": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
|
||||
"integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
|
||||
},
|
||||
"node_modules/sugarss": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/sugarss/-/sugarss-2.0.0.tgz",
|
||||
@ -13479,6 +13499,14 @@
|
||||
"node": ">= 10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/throttle-debounce": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
|
||||
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
|
||||
"engines": {
|
||||
"node": ">=12.22"
|
||||
}
|
||||
},
|
||||
"node_modules/through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
|
||||
@ -16715,6 +16743,16 @@
|
||||
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
|
||||
"dev": true
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.9.1",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
|
||||
"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
|
||||
},
|
||||
"@emotion/unitless": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
|
||||
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
|
||||
},
|
||||
"@eslint-community/eslint-utils": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
|
||||
@ -18458,17 +18496,20 @@
|
||||
}
|
||||
},
|
||||
"ant-design-vue": {
|
||||
"version": "3.2.20",
|
||||
"resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.20.tgz",
|
||||
"integrity": "sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.0.0.tgz",
|
||||
"integrity": "sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==",
|
||||
"requires": {
|
||||
"@ant-design/colors": "^6.0.0",
|
||||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"@babel/runtime": "^7.10.5",
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@ctrl/tinycolor": "^3.5.0",
|
||||
"@emotion/hash": "^0.9.0",
|
||||
"@emotion/unitless": "^0.8.0",
|
||||
"@simonwep/pickr": "~1.8.0",
|
||||
"array-tree-filter": "^2.1.0",
|
||||
"async-validator": "^4.0.0",
|
||||
"csstype": "^3.1.1",
|
||||
"dayjs": "^1.10.5",
|
||||
"dom-align": "^1.12.1",
|
||||
"dom-scroll-into-view": "^2.0.0",
|
||||
@ -18477,6 +18518,8 @@
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"scroll-into-view-if-needed": "^2.2.25",
|
||||
"shallow-equal": "^1.0.0",
|
||||
"stylis": "^4.1.3",
|
||||
"throttle-debounce": "^5.0.0",
|
||||
"vue-types": "^3.0.0",
|
||||
"warning": "^4.0.0"
|
||||
}
|
||||
@ -25542,6 +25585,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylis": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
|
||||
"integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
|
||||
},
|
||||
"sugarss": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/sugarss/-/sugarss-2.0.0.tgz",
|
||||
@ -25831,6 +25879,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"throttle-debounce": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
|
||||
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
|
||||
},
|
||||
"through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
"dependencies": {
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"ant-design-vue": "^3.2.20",
|
||||
"ant-design-vue": "^4.0.0",
|
||||
"chartist": "^1.3.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"core-js": "^3.8.3",
|
||||
@ -67,8 +67,6 @@
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-plugin-vue": "^9.9.0",
|
||||
"husky": "8.0.3",
|
||||
"less": "^3.5.0",
|
||||
"less-loader": "^7.1.0",
|
||||
"sass": "^1.32.13",
|
||||
"sass-loader": "^8.0.2",
|
||||
"stylelint": "^13.8.0",
|
||||
|
||||
20
src/App.vue
20
src/App.vue
@ -1,7 +1,19 @@
|
||||
<template>
|
||||
<Screen v-if="screening" />
|
||||
<Editor v-else-if="_isPC" />
|
||||
<Mobile v-else />
|
||||
<ConfigProvider
|
||||
:theme="{
|
||||
token: {
|
||||
colorPrimary: '#d14424',
|
||||
colorText: '#41464b',
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
lineHeight: 1.5715,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Screen v-if="screening" />
|
||||
<Editor v-else-if="_isPC" />
|
||||
<Mobile v-else />
|
||||
</ConfigProvider>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -16,6 +28,8 @@ import Editor from './views/Editor/index.vue'
|
||||
import Screen from './views/Screen/index.vue'
|
||||
import Mobile from './views/Mobile/index.vue'
|
||||
|
||||
import { ConfigProvider } from 'ant-design-vue'
|
||||
|
||||
const _isPC = isPC()
|
||||
|
||||
const mainStore = useMainStore()
|
||||
|
||||
@ -5,28 +5,19 @@
|
||||
padding-top: 5px !important;
|
||||
}
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
.ant-popover-inner {
|
||||
box-shadow: $boxShadow;
|
||||
border: 1px solid $borderColor;
|
||||
}
|
||||
.ant-popover-inner-content {
|
||||
padding: 12px !important;
|
||||
box-shadow: $boxShadow !important;
|
||||
border: 1px solid $borderColor !important;
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.ant-dropdown-menu {
|
||||
min-width: 150px;
|
||||
box-shadow: $boxShadow;
|
||||
border: 1px solid $borderColor;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.ant-dropdown-menu-item {
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color: $themeColor, $alpha: .2);
|
||||
}
|
||||
box-shadow: $boxShadow !important;
|
||||
border: 1px solid $borderColor !important;
|
||||
margin-top: -4px !important;
|
||||
}
|
||||
|
||||
// button
|
||||
@ -43,10 +34,10 @@
|
||||
|
||||
// slider
|
||||
.ant-slider-track {
|
||||
background-color: $themeColor;
|
||||
background-color: $themeColor !important;
|
||||
}
|
||||
.ant-slider-handle {
|
||||
border-color: $themeColor;
|
||||
border-color: $themeColor !important;
|
||||
}
|
||||
|
||||
// select
|
||||
@ -54,16 +45,14 @@
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
||||
background-color: rgba($color: $themeColor, $alpha: .2);
|
||||
.ant-select-arrow {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
// tooltip
|
||||
.ant-tooltip-inner {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// input
|
||||
.ant-input-number-input {
|
||||
line-height: 30px;
|
||||
.ant-tooltip .ant-tooltip-arrow::before {
|
||||
height: 4px !important;
|
||||
}
|
||||
@ -19,6 +19,11 @@ time, mark, audio, video {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
@ -33,20 +38,20 @@ section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100% !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
@ -72,6 +77,52 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role='button'],
|
||||
input:not([type='range']),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
@ -18,11 +18,11 @@
|
||||
|
||||
p {
|
||||
text-indent: var(--textIndent);
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: var(--paragraphSpace);
|
||||
}
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
@ -44,10 +44,10 @@
|
||||
|
||||
code {
|
||||
background-color: $borderColor;
|
||||
padding: 1px 3px;
|
||||
padding: 2px 6px;
|
||||
margin: 0 1px;
|
||||
border-radius: 2px;
|
||||
font-family: inherit;
|
||||
border-radius: 4px;
|
||||
font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -57,7 +57,7 @@
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-style: italic;
|
||||
border-left: 5px solid #ccc;
|
||||
border-left: 4px solid #ddd;
|
||||
}
|
||||
|
||||
[data-indent='1'] {
|
||||
|
||||
@ -21,7 +21,9 @@ defineProps({
|
||||
font-size: 13px;
|
||||
padding: 0 15px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: $textColor;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
<Ruler :viewportStyles="viewportStyles" v-if="showRuler" />
|
||||
|
||||
<Modal
|
||||
v-model:visible="linkDialogVisible"
|
||||
v-model:open="linkDialogVisible"
|
||||
:footer="null"
|
||||
centered
|
||||
:width="540"
|
||||
|
||||
@ -10,11 +10,11 @@
|
||||
</div>
|
||||
|
||||
<div class="add-element-handler">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字" :align="{ offset: [0, 0] }">
|
||||
<div class="handler-item group-btn">
|
||||
<IconFontSize class="icon" :class="{ 'active': creatingElement?.type === 'text' }" @click="drawText()" />
|
||||
|
||||
<Popover trigger="click" v-model:visible="textTypeSelectVisible">
|
||||
<Popover trigger="click" v-model:open="textTypeSelectVisible">
|
||||
<template #content>
|
||||
<div class="text-type-item" @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</div>
|
||||
<div class="text-type-item" @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</div>
|
||||
@ -24,49 +24,49 @@
|
||||
</div>
|
||||
</Tooltip>
|
||||
<FileInput @change="files => insertImageElement(files)">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片" :align="{ offset: [0, 0] }">
|
||||
<IconPicture class="handler-item" />
|
||||
</Tooltip>
|
||||
</FileInput>
|
||||
<Popover trigger="click" v-model:visible="shapePoolVisible">
|
||||
<Popover trigger="click" v-model:open="shapePoolVisible">
|
||||
<template #content>
|
||||
<ShapePool @select="shape => drawShape(shape)" />
|
||||
</template>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状" :align="{ offset: [0, 0] }">
|
||||
<IconGraphicDesign class="handler-item" :class="{ 'active': creatingElement?.type === 'shape' }" />
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
<Popover trigger="click" v-model:visible="linePoolVisible">
|
||||
<Popover trigger="click" v-model:open="linePoolVisible">
|
||||
<template #content>
|
||||
<LinePool @select="line => drawLine(line)" />
|
||||
</template>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条" :align="{ offset: [0, 0] }">
|
||||
<IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" />
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
<Popover trigger="click" v-model:visible="chartPoolVisible">
|
||||
<Popover trigger="click" v-model:open="chartPoolVisible">
|
||||
<template #content>
|
||||
<ChartPool @select="chart => { createChartElement(chart); chartPoolVisible = false }" />
|
||||
</template>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表" :align="{ offset: [0, 0] }">
|
||||
<IconChartProportion class="handler-item" />
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
<Popover trigger="click" v-model:visible="tableGeneratorVisible">
|
||||
<Popover trigger="click" v-model:open="tableGeneratorVisible">
|
||||
<template #content>
|
||||
<TableGenerator
|
||||
@close="tableGeneratorVisible = false"
|
||||
@insert="({ row, col }) => { createTableElement(row, col); tableGeneratorVisible = false }"
|
||||
/>
|
||||
</template>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入表格">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入表格" :align="{ offset: [0, 0] }">
|
||||
<IconInsertTable class="handler-item" />
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入公式">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入公式" :align="{ offset: [0, 0] }">
|
||||
<IconFormula class="handler-item" @click="latexEditorVisible = true" />
|
||||
</Tooltip>
|
||||
<Popover trigger="click" v-model:visible="mediaInputVisible">
|
||||
<Popover trigger="click" v-model:open="mediaInputVisible">
|
||||
<template #content>
|
||||
<MediaInput
|
||||
@close="mediaInputVisible = false"
|
||||
@ -74,7 +74,7 @@
|
||||
@insertAudio="src => { createAudioElement(src); mediaInputVisible = false }"
|
||||
/>
|
||||
</template>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入音视频">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入音视频" :align="{ offset: [0, 0] }">
|
||||
<IconVideoTwo class="handler-item" />
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
@ -82,7 +82,7 @@
|
||||
|
||||
<div class="right-handler">
|
||||
<IconMinus class="handler-item viewport-size" @click="scaleCanvas('-')" />
|
||||
<Popover trigger="click" v-model:visible="canvasScaleVisible">
|
||||
<Popover trigger="click" v-model:open="canvasScaleVisible">
|
||||
<template #content>
|
||||
<div class="viewport-size-preset">
|
||||
<div
|
||||
@ -102,7 +102,7 @@
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
v-model:visible="latexEditorVisible"
|
||||
v-model:open="latexEditorVisible"
|
||||
:footer="null"
|
||||
centered
|
||||
:width="880"
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
width="320"
|
||||
placement="right"
|
||||
:closable="false"
|
||||
:visible="hotkeyDrawerVisible"
|
||||
:open="hotkeyDrawerVisible"
|
||||
@close="hotkeyDrawerVisible = false"
|
||||
>
|
||||
<HotkeyDoc />
|
||||
|
||||
@ -159,6 +159,7 @@ const expImage = () => {
|
||||
.title {
|
||||
width: 100px;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
|
||||
&::after {
|
||||
content: attr(data-range);
|
||||
|
||||
@ -39,11 +39,12 @@ const { exportJSON } = useExport()
|
||||
.preview {
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: #f9f9f9;
|
||||
color: #0451a5;
|
||||
overflow: auto;
|
||||
}
|
||||
pre {
|
||||
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
|
||||
}
|
||||
.btns {
|
||||
width: 300px;
|
||||
|
||||
@ -139,6 +139,7 @@ const expPDF = () => {
|
||||
|
||||
.title {
|
||||
width: 100px;
|
||||
line-height: 1;
|
||||
}
|
||||
.config-item {
|
||||
flex: 1;
|
||||
|
||||
@ -103,6 +103,7 @@ const selectedSlides = computed(() => {
|
||||
.title {
|
||||
width: 100px;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
|
||||
&::after {
|
||||
content: attr(data-range);
|
||||
|
||||
@ -95,6 +95,7 @@ const selectedSlides = computed(() => {
|
||||
.title {
|
||||
width: 100px;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
|
||||
&::after {
|
||||
content: attr(data-range);
|
||||
|
||||
@ -60,7 +60,7 @@ const currentDialogComponent = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.export-dialog {
|
||||
margin: -24px;
|
||||
margin: -20px -24px;
|
||||
}
|
||||
.tabs {
|
||||
height: 50px;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
>
|
||||
<div class="add-slide">
|
||||
<div class="btn" @click="createSlide()"><IconPlus class="icon" />添加幻灯片</div>
|
||||
<Popover trigger="click" placement="bottomLeft" v-model:visible="presetLayoutPopoverVisible">
|
||||
<Popover trigger="click" placement="bottomLeft" v-model:open="presetLayoutPopoverVisible">
|
||||
<template #content>
|
||||
<LayoutPool @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" />
|
||||
</template>
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<div class="element-animation" v-if="handleElement">
|
||||
<Popover
|
||||
trigger="click"
|
||||
v-model:visible="animationPoolVisible"
|
||||
@visibleChange="visible => handlePopoverVisibleChange(visible)"
|
||||
v-model:open="animationPoolVisible"
|
||||
@openChange="visible => handlePopoverVisibleChange(visible)"
|
||||
>
|
||||
<template #content>
|
||||
<div class="tabs">
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
</Popover>
|
||||
</div>
|
||||
<ButtonGroup class="row">
|
||||
<Popover trigger="click" v-model:visible="presetThemesVisible">
|
||||
<Popover trigger="click" v-model:open="presetThemesVisible">
|
||||
<template #content>
|
||||
<div class="preset-themes">
|
||||
<div class="preset-theme" v-for="(item, index) in presetChartThemes" :key="index">
|
||||
@ -135,7 +135,7 @@
|
||||
<ElementOutline />
|
||||
|
||||
<Modal
|
||||
v-model:visible="chartDataEditorVisible"
|
||||
v-model:open="chartDataEditorVisible"
|
||||
:footer="null"
|
||||
centered
|
||||
:closable="false"
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<ButtonGroup class="row">
|
||||
<Button style="flex: 5;" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
|
||||
<Popover trigger="click" v-model:visible="clipPanelVisible">
|
||||
<Popover trigger="click" v-model:open="clipPanelVisible">
|
||||
<template #content>
|
||||
<div class="clip">
|
||||
<div class="title">按形状：</div>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
v-model:visible="latexEditorVisible"
|
||||
v-model:open="latexEditorVisible"
|
||||
:footer="null"
|
||||
centered
|
||||
:width="880"
|
||||
|
||||
@ -163,7 +163,7 @@
|
||||
><IconFormatBrush /></CheckboxButton>
|
||||
</Tooltip>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="超链接">
|
||||
<Popover placement="bottomRight" trigger="click" v-model:visible="linkPopoverVisible">
|
||||
<Popover placement="bottomRight" trigger="click" v-model:open="linkPopoverVisible">
|
||||
<template #content>
|
||||
<div class="link-popover">
|
||||
<Input v-model:value="link" placeholder="请输入超链接" />
|
||||
@ -210,7 +210,7 @@
|
||||
@click="emitRichTextCommand('bulletList')"
|
||||
><IconList /></Button>
|
||||
</Tooltip>
|
||||
<Popover trigger="click" v-model:visible="bulletListPanelVisible">
|
||||
<Popover trigger="click" v-model:open="bulletListPanelVisible">
|
||||
<template #content>
|
||||
<div class="list-wrap">
|
||||
<ul class="list"
|
||||
@ -235,7 +235,7 @@
|
||||
@click="emitRichTextCommand('orderedList')"
|
||||
><IconOrderedList /></Button>
|
||||
</Tooltip>
|
||||
<Popover trigger="click" v-model:visible="orderedListPanelVisible">
|
||||
<Popover trigger="click" v-model:open="orderedListPanelVisible">
|
||||
<template #content>
|
||||
<div class="list-wrap">
|
||||
<ul class="list"
|
||||
|
||||
@ -37,9 +37,8 @@ defineProps({
|
||||
height: 100%;
|
||||
}
|
||||
.color-btn-icon {
|
||||
width: 30px;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
width: 34px;
|
||||
font-size: 13px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
</style>
|
||||
@ -19,7 +19,7 @@
|
||||
<SelectPanel v-if="showSelectPanel" />
|
||||
|
||||
<Modal
|
||||
:visible="!!dialogForExport"
|
||||
:open="!!dialogForExport"
|
||||
:footer="null"
|
||||
centered
|
||||
:closable="false"
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
>
|
||||
<div class="tools" @mousedown.stop>
|
||||
<div class="tool-content">
|
||||
<Popover trigger="click" :visible="sizePopoverType === 'pen'">
|
||||
<Popover trigger="click" :open="sizePopoverType === 'pen'">
|
||||
<template #content>
|
||||
<div class="size">
|
||||
<div class="label">墨迹粗细：</div>
|
||||
@ -39,7 +39,7 @@
|
||||
<div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" @click="changeModel('pen')"><IconWrite class="icon" /></div>
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
<Popover trigger="click" :visible="sizePopoverType === 'mark'">
|
||||
<Popover trigger="click" :open="sizePopoverType === 'mark'">
|
||||
<template #content>
|
||||
<div class="size">
|
||||
<div class="label">墨迹粗细：</div>
|
||||
@ -50,7 +50,7 @@
|
||||
<div class="btn" :class="{ 'active': writingBoardModel === 'mark' }" @click="changeModel('mark')"><IconHighLight class="icon" /></div>
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
<Popover trigger="click" :visible="sizePopoverType === 'eraser'">
|
||||
<Popover trigger="click" :open="sizePopoverType === 'eraser'">
|
||||
<template #content>
|
||||
<div class="size">
|
||||
<div class="label">橡皮大小：</div>
|
||||
|
||||
@ -12,17 +12,6 @@ module.exports = {
|
||||
@import '~@/assets/styles/mixin.scss';
|
||||
`,
|
||||
},
|
||||
less: {
|
||||
lessOptions: {
|
||||
modifyVars: {
|
||||
'primary-color': '#d14424',
|
||||
'text-color': '#41464b',
|
||||
'font-size-base': '13px',
|
||||
'border-radius-base': '2px',
|
||||
},
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
configureWebpack: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user