danny
/
vue-webtopo-svgeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 引入pinia 顶部布局实现

Browse Source
Re-1.0
咬轮猫 3 years ago
parent a49b836fa8
commit 5ff6f6184a
22 changed files with 266 additions and 6 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -11,6 +11,7 @@
}, },
"dependencies": { "dependencies": {
"element-plus": "^2.2.9", "element-plus": "^2.2.9",
"pinia": "^2.0.16",
"vue": "^3.2.25", "vue": "^3.2.25",
"vue-router": "4" "vue-router": "4"
}, },

24
pnpm-lock.yaml
Unescape Escape View File

@ -14,6 +14,7 @@ specifiers:
eslint-plugin-vue: ^9.2.0 eslint-plugin-vue: ^9.2.0
husky: ^8.0.1 husky: ^8.0.1
less: ^4.1.3 less: ^4.1.3
pinia: ^2.0.16
prettier: ^2.7.1 prettier: ^2.7.1
typescript: ^4.5.4 typescript: ^4.5.4
vite: ^2.9.9 vite: ^2.9.9
@ -28,6 +29,7 @@ specifiers:
dependencies: dependencies:
element-plus: 2.2.9_vue@3.2.37 element-plus: 2.2.9_vue@3.2.37
pinia: 2.0.17_typescript@4.7.4+vue@3.2.37
vue: 3.2.37 vue: 3.2.37
vue-router: 4.1.1_vue@3.2.37 vue-router: 4.1.1_vue@3.2.37
@ -634,6 +636,10 @@ packages:
resolution: {integrity: sha512-pF1G4wky+hkifDiZSWn8xfuLOJI1ZXtuambpBEYaf7Xaf6zC/pM29rvAGpd3qaGXnr4BAXU1Pxz/VfvBGwexGA==} resolution: {integrity: sha512-pF1G4wky+hkifDiZSWn8xfuLOJI1ZXtuambpBEYaf7Xaf6zC/pM29rvAGpd3qaGXnr4BAXU1Pxz/VfvBGwexGA==}
dev: false dev: false
/@vue/devtools-api/6.2.1:
resolution: {integrity: sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==}
dev: false
/@vue/reactivity-transform/3.2.37: /@vue/reactivity-transform/3.2.37:
resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==} resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
dependencies: dependencies:
@ -2949,6 +2955,24 @@ packages:
dev: true dev: true
optional: true optional: true
/pinia/2.0.17_typescript@4.7.4+vue@3.2.37:
resolution: {integrity: sha512-AtwLwEWQgIjofjgeFT+nxbnK5lT2QwQjaHNEDqpsi2AiCwf/NY78uWTeHUyEhiiJy8+sBmw0ujgQMoQbWiZDfA==}
peerDependencies:
'@vue/composition-api': ^1.4.0
typescript: '>=4.4.4'
vue: ^2.6.14 || ^3.2.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
typescript:
optional: true
dependencies:
'@vue/devtools-api': 6.2.1
typescript: 4.7.4
vue: 3.2.37
vue-demi: 0.13.4_vue@3.2.37
dev: false
/posix-character-classes/0.1.1: /posix-character-classes/0.1.1:
resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==} resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}

9
src/assets/icons/delete.svg
Unescape Escape View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 10H44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 674 B

4
src/assets/icons/export-json.svg
Unescape Escape View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
<path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zm18.6-251.7L765 393.7c-5.3-4.2-13-.4-13 6.3v76H438c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z" fill="currentColor"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 576 B

13
src/assets/icons/group.svg
Unescape Escape View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 4H4V12H12V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M44 36H36V44H44V36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M12 36H4V44H12V36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M44 4H36V12H44V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M8 36V12" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M40 36V12" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 8H36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 40H36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 16H25.6V22.4H32V32H22.4V25.6H16V16Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
src/assets/icons/import-json.svg
Unescape Escape View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
<path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zM902 476H588v-76c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-76h314c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" fill="currentColor"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 575 B

7
src/assets/icons/lock.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="22" width="36" height="22" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M14 22V14C14 8.47715 18.4772 4 24 4C29.5228 4 34 8.47715 34 14V22" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

9
src/assets/icons/menu-fold.svg
Unescape Escape View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 10.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 19.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 28.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 37.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 19L16 24L8 29V19Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 671 B

9
src/assets/icons/menu-unfold.svg
Unescape Escape View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 10.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 19.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 28.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 37.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 19L8 24L16 29V19Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 672 B

6
src/assets/icons/preview.svg
Unescape Escape View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 528 B

8
src/assets/icons/redo.svg
Unescape Escape View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<path d="M36.728 36.728A17.943 17.943 0 0 1 24 42c-9.941 0-18-8.059-18-18S14.059 6 24 6c4.97 0 9.47 2.015 12.728 5.272C38.386 12.93 42 17 42 17"></path>
<path d="M42 8v9h-9"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 438 B

11
src/assets/icons/tree-list.svg
Unescape Escape View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M38 20H18V28H38V20Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M32 6H18V14H32V6Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M44 34H18V42H44V34Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M17 10H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 24H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 38H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 44V4" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 863 B

6
src/assets/icons/undo.svg
Unescape Escape View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M11.2721 36.7279C14.5294 39.9853 19.0294 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C19.0294 6 14.5294 8.01472 11.2721 11.2721C9.61407 12.9301 6 17 6 17" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 9V17H14" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

16
src/assets/icons/ungroup.svg
Unescape Escape View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M11.2727 4H4V11.2727H11.2727V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M43.9998 36.7271H36.7271V43.9998H43.9998V36.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M11.2727 24H4V31.2727H11.2727V24Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M23.9998 36.7271H16.7271V43.9998H23.9998V36.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M31.2727 4H24V11.2727H31.2727V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M43.9998 16.7271H36.7271V23.9998H43.9998V16.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M11.2729 7.63623H24.0002" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 40.3638H36.7273" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.2729 27.6366H27.6366V11.2729" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M28.8275 20.3633H36.7269M20.3633 36.7269V27.6282V36.7269Z" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.63672 11.2725V23.9997" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M40.3633 24V36.7273" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

7
src/assets/icons/unlock.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="22.0476" width="34" height="22" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M14 22V14.0047C13.9948 8.87022 17.9227 4.56718 23.0859 4.05117C28.249 3.53516 32.9673 6.97408 34 12.0059" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 575 B

98
src/components/webtopo-svgedit/components/top-panel/index.vue
Unescape Escape View File

@ -1 +1,97 @@
<template><div>顶部</div></template> <template>
<div class="flex justify-between" style="width: 100%">
<div class="flex items-center justify-between" style="width: 220px">
<div class="flex items-center"> </div>
<el-icon
size="22"
style="cursor: pointer"
@click="svgEditLayoutStore.left_nav = !svgEditLayoutStore.left_nav"
>
<svg-analysis v-if="svgEditLayoutStore.left_nav" name="menu-fold"></svg-analysis>
<svg-analysis v-else name="menu-unfold"></svg-analysis>
</el-icon>
</div>
<div class="flex justify-between" style="width: calc(100% - 440px)">
<div class="flex items-center">
<el-icon title="撤销" :size="20" :class="'icon-normal'" class="ml-20px">
<svg-analysis name="undo"></svg-analysis>
</el-icon>
<el-icon title="重做" class="ml-5px" :class="'icon-disable'" :size="20">
<svg-analysis name="redo"></svg-analysis>
</el-icon>
<el-divider direction="vertical"></el-divider>
<el-icon title="清空" class="icon-normal" :size="20">
<svg-analysis name="delete"></svg-analysis>
</el-icon>
<el-divider direction="vertical"></el-divider>
<el-icon title="组件树" class="icon-normal" :size="20">
<svg-analysis name="tree-list"></svg-analysis>
</el-icon>
<el-divider direction="vertical"></el-divider>
<el-icon title="导入json" class="icon-normal" :size="20">
<svg-analysis name="import-json"></svg-analysis>
</el-icon>
<el-icon title="导出json" :size="20" class="icon-normal ml-5px">
<svg-analysis name="export-json"></svg-analysis>
</el-icon>
<el-divider direction="vertical"></el-divider>
<el-icon title="组合" class="icon-normal" :size="20">
<svg-analysis name="group"></svg-analysis>
</el-icon>
<el-divider direction="vertical"></el-divider>
<el-icon title="取消组合" class="icon-normal" :size="20">
<svg-analysis name="ungroup"></svg-analysis>
</el-icon>
<el-divider direction="vertical"></el-divider>
<el-icon title="锁定" class="icon-normal" :size="20">
<svg-analysis name="lock"></svg-analysis>
</el-icon>
</div>
<div class="flex items-center mr-20px">
<el-icon title="预览" class="icon-normal" :size="20">
<svg-analysis name="preview"></svg-analysis>
</el-icon>
</div>
</div>
<div class="flex items-center" style="width: 220px">
<el-icon
size="22"
style="cursor: pointer"
@click="svgEditLayoutStore.right_nav = !svgEditLayoutStore.right_nav"
>
<svg-analysis v-if="svgEditLayoutStore.right_nav" name="menu-unfold"></svg-analysis>
<svg-analysis v-else name="menu-fold"></svg-analysis>
</el-icon>
</div>
</div>
</template>
<script setup lang="ts">
import { ElIcon, ElDivider } from 'element-plus';
import SvgAnalysis from '../../../../components/svg-analysis/index.vue';
import { useSvgEditLayoutStore } from '../../../../store/svgedit-layout';
const svgEditLayoutStore = useSvgEditLayoutStore();
</script>
<style scoped lang="less">
.logoimg {
height: 40px;
width: 160px;
}
.logo-title {
font-size: 15px;
font-weight: 600;
}
.icon-normal {
cursor: pointer;
&:hover {
color: rgb(80, 76, 76);
}
}
.icon-disable {
cursor: not-allowed;
color: #ccc;
}
</style>

6
src/components/webtopo-svgedit/index.vue
Unescape Escape View File

@ -5,7 +5,7 @@
<top-panel></top-panel> <top-panel></top-panel>
</el-header> </el-header>
<el-container class="middle"> <el-container class="middle">
<el-aside class="side-nav" :class="'show-nav'"> <el-aside class="side-nav" :class="svgEditLayoutStore.left_nav ? 'show-nav' : 'hide-nav'">
<el-scrollbar class="elscrooll-pc"> <el-scrollbar class="elscrooll-pc">
<left-panel class="content-left"></left-panel> <left-panel class="content-left"></left-panel>
</el-scrollbar> </el-scrollbar>
@ -17,7 +17,7 @@
</div> </div>
</el-scrollbar> </el-scrollbar>
</el-main> </el-main>
<el-aside class="side-nav" :class="'show-nav'"> <el-aside class="side-nav" :class="svgEditLayoutStore.right_nav ? 'show-nav' : 'hide-nav'">
<el-scrollbar class="elscrooll-pc"> <el-scrollbar class="elscrooll-pc">
<right-panel></right-panel> <right-panel></right-panel>
</el-scrollbar> </el-scrollbar>
@ -37,6 +37,8 @@
import CenterPanel from './components/center-panel/index.vue'; import CenterPanel from './components/center-panel/index.vue';
import RightPanel from './components/right-panel/index.vue'; import RightPanel from './components/right-panel/index.vue';
import BottomPanel from './components/bottom-panel/index.vue'; import BottomPanel from './components/bottom-panel/index.vue';
import { useSvgEditLayoutStore } from '../../store/svgedit-layout';
const svgEditLayoutStore = useSvgEditLayoutStore();
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@headerHeight: 60px; @headerHeight: 60px;

3
src/main.ts
Unescape Escape View File

@ -3,6 +3,9 @@ import App from './App.vue';
import router from './router/index'; import router from './router/index';
import 'virtual:windi.css'; import 'virtual:windi.css';
import 'virtual:svg-icons-register'; import 'virtual:svg-icons-register';
import { createPinia } from 'pinia';
const pinia = createPinia();
const app = createApp(App); const app = createApp(App);
app.use(pinia);
app.use(router); app.use(router);
app.mount('#app'); app.mount('#app');

15
src/store/svgedit-layout/index.ts
Unescape Escape View File

@ -0,0 +1,15 @@
import { defineStore } from 'pinia';
import { ISvgEditLayoutStore } from './types';
/**
* 编辑器布局状态
*/
export const useSvgEditLayoutStore = defineStore('svgedit-layout-store', {
state: (): ISvgEditLayoutStore => {
return {
left_nav: true,
right_nav: true
};
},
getters: {},
actions: {}
});

4
src/store/svgedit-layout/types.ts
Unescape Escape View File

@ -0,0 +1,4 @@
export interface ISvgEditLayoutStore {
left_nav: boolean;
right_nav: boolean;
}

3
tsconfig.json
Unescape Escape View File

@ -11,7 +11,8 @@
"isolatedModules": true, "isolatedModules": true,
"esModuleInterop": true, "esModuleInterop": true,
"lib": ["esnext", "dom"], "lib": ["esnext", "dom"],
"skipLibCheck": true "skipLibCheck": true,
"types": ["vite-plugin-svg-icons/client"]
}, },
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }] "references": [{ "path": "./tsconfig.node.json" }]

9
vite.config.ts
Unescape Escape View File

@ -15,9 +15,14 @@ export default defineConfig({
WindiCSS(), WindiCSS(),
createSvgIconsPlugin({ createSvgIconsPlugin({
// 指定需要缓存的图标文件夹 // 指定需要缓存的图标文件夹
iconDirs: [resolve(process.cwd(), 'src/assets/svgs')], iconDirs: [
resolve(process.cwd(), 'src/assets/svgs'),
resolve(process.cwd(), 'src/assets/icons')
],
// 指定symbolId格式 // 指定symbolId格式
symbolId: 'svg-[name]' symbolId: 'svg-[name]',
// 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
svgoOptions: false
}) })
] ]
}); });

Write Preview
Loading…
Cancel
Save