twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-07 17:07:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update @logicflow

Browse Source
This commit is contained in:
xiaoxian521 2021-04-20 19:06:27 +08:00
parent 055296ab53
commit dc7a50de6f
6 changed files with 822 additions and 748 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
package-lock.json generated
View File

@ -390,16 +390,20 @@
} }
}, },
"@logicflow/core": { "@logicflow/core": {
"version": "0.3.1", "version": "0.3.2",
"resolved": "https://registry.npmjs.org/@logicflow/core/-/core-0.3.1.tgz", "resolved": "https://registry.npmjs.org/@logicflow/core/-/core-0.3.2.tgz",
"integrity": "sha512-PZwwaRGURwOWFf4JVDc6GGfDRZtawvVGY6/3Z4cjulNiEFzxtQnz4RH0Zqzd6qFRxpEctqKnZ+eckLPWX4YFug==" "integrity": "sha512-lKe/N+w1u32wUnTdT1gzW+skPSOo6UDrXsT7Ar3d0iN6XK5i5KVAkEjGUGhvTtd7GgdAvTXpNVLQFSX/9B3EtQ==",
"requires": {
"mousetrap": "^1.6.5",
"preact": "^10.4.8"
}
}, },
"@logicflow/extension": { "@logicflow/extension": {
"version": "0.3.1", "version": "0.3.2",
"resolved": "https://registry.npmjs.org/@logicflow/extension/-/extension-0.3.1.tgz", "resolved": "https://registry.npmjs.org/@logicflow/extension/-/extension-0.3.2.tgz",
"integrity": "sha512-WSPVqwmTvI52e2Go6EQeUEoHs+l6o2h4u47iVuwC39A/cIFcc2skefQ9fTzGJHeWIXjPf7Nl/W5ylrmeVsIJ4Q==", "integrity": "sha512-4CPIzSy7LN4rD+hgdc/6nn6ZcrERIrgH8+LWWKPE3MF+xd2LedsZAMeLPYkJ7x+wie7fOKyKDfW/XL50imMzaQ==",
"requires": { "requires": {
"@logicflow/core": "^0.3.1", "@logicflow/core": "^0.3.2",
"ids": "^1.0.0" "ids": "^1.0.0"
} }
}, },
@ -1432,6 +1436,11 @@
"commander": "*" "commander": "*"
} }
}, },
"mousetrap": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
},
"ms": { "ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1607433912031&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz", "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1607433912031&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
@ -1621,6 +1630,11 @@
"integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=", "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
"dev": true "dev": true
}, },
"preact": {
"version": "10.5.13",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.5.13.tgz",
"integrity": "sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ=="
},
"process": { "process": {
"version": "0.11.10", "version": "0.11.10",
"resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz", "resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",

4
package.json
View File

@ -8,8 +8,8 @@
}, },
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1", "@amap/amap-jsapi-loader": "^1.0.1",
"@logicflow/core": "^0.3.1", "@logicflow/core": "^0.3.2",
"@logicflow/extension": "^0.3.1", "@logicflow/extension": "^0.3.2",
"@vueuse/core": "^4.8.2", "@vueuse/core": "^4.8.2",
"await-to-js": "^2.1.1", "await-to-js": "^2.1.1",
"axios": "^0.21.1", "axios": "^0.21.1",

222
public/html/button.html
View File

@ -1,11 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang="zh">
<head>
<meta charset="UTF-8" />
</head>
<head> <body>
<meta charset="UTF-8">
</head>
<body>
<div class="btns"> <div class="btns">
<div class="btn java">JAVA攻城狮</div> <div class="btn java">JAVA攻城狮</div>
<div class="btn golang">Golang工程师!</div> <div class="btn golang">Golang工程师!</div>
@ -31,18 +30,15 @@
<div class="btn php php-4">php攻城狮</div> <div class="btn php php-4">php攻城狮</div>
<div class="btn php php-5">php攻城狮</div> <div class="btn php php-5">php攻城狮</div>
<div class="btn kotlin kotlin-3">kotlin攻城狮</div> <div class="btn kotlin kotlin-3">kotlin攻城狮</div>
<div class="btn kotlin kotlin-1">kotlin攻城狮</div> <div class="btn kotlin kotlin-1">kotlin攻城狮</div>
<div class="btn kotlin kotlin-4">kotlin攻城狮</div> <div class="btn kotlin kotlin-4">kotlin攻城狮</div>
<div class="btn kotlin kotlin-2">kotlin攻城狮</div> <div class="btn kotlin kotlin-2">kotlin攻城狮</div>
<div class="btn kotlin kotlin-5">kotlin攻城狮</div> <div class="btn kotlin kotlin-5">kotlin攻城狮</div>
<div class="btn c">C语言攻城狮</div> <div class="btn c">C语言攻城狮</div>
</div> </div>
</body> </body>
<style> <style>
.text-info { .text-info {
position: absolute; position: absolute;
top: calc(50vh - 245px); top: calc(50vh - 245px);
@ -53,13 +49,12 @@
margin-left: -5px; margin-left: -5px;
} }
.btn { .btn {
vertical-align: top; vertical-align: top;
margin: 20px; margin: 15px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
width: 160px; width: 122px;
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
border-radius: 4px; border-radius: 4px;
@ -67,36 +62,35 @@
cursor: pointer; cursor: pointer;
} }
.java { .java {
color: #EB9E05; color: #eb9e05;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
width: 158px; width: 120px;
border: 1px solid #EB9E05; border: 1px solid #eb9e05;
opacity: 1; opacity: 1;
transition: all .6s; transition: all 0.6s;
} }
.java:hover { .java:hover {
background: #EB9E05; background: #eb9e05;
color: #fff; color: #fff;
} }
.java:active { .java:active {
opacity: .7; opacity: 0.7;
} }
.c { .c {
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
background: #55acee; background: #55acee;
transition: all .5s; transition: all 0.5s;
box-shadow: 0px 5px 0px 0px #3486d5; box-shadow: 0px 5px 0px 0px #3486d5;
} }
.c:hover { .c:hover {
background-color: #6FC6FF; background-color: #6fc6ff;
} }
.c:active { .c:active {
@ -119,9 +113,9 @@
vertical-align: top; vertical-align: top;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
width: 158px; width: 120px;
color: #2194E0; color: #2194e0;
border: 1px solid #2194E0; border: 1px solid #2194e0;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
position: relative; position: relative;
opacity: 1; opacity: 1;
@ -142,7 +136,7 @@
} }
.golang:hover { .golang:hover {
background-color: #2194E0; background-color: #2194e0;
color: #fff; color: #fff;
} }
@ -152,16 +146,16 @@
} }
.golang:active { .golang:active {
opacity: .8; opacity: 0.8;
} }
.js { .js {
width: 160px; width: 160px;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
background: #0D6; background: #0d6;
width: 158px; width: 120px;
border: 1px solid #0D6; border: 1px solid #0d6;
overflow: hidden; overflow: hidden;
transition: all 0.5s; transition: all 0.5s;
opacity: 1; opacity: 1;
@ -170,13 +164,13 @@
.js:hover, .js:hover,
.js:active { .js:active {
text-decoration: none; text-decoration: none;
color: #0C5; color: #0c5;
border-color: #0C5; border-color: #0c5;
background: #FFF; background: #fff;
} }
.js:active { .js:active {
opacity: .8; opacity: 0.8;
} }
.js span { .js span {
@ -187,7 +181,7 @@
} }
.js span:after { .js span:after {
content: ' '; content: " ";
position: absolute; position: absolute;
top: 0; top: 0;
right: -18px; right: -18px;
@ -196,7 +190,7 @@
height: 10px; height: 10px;
margin-top: -10px; margin-top: -10px;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
border: 2px solid #FFF; border: 2px solid #fff;
border-top: none; border-top: none;
border-right: none; border-right: none;
transition: opacity 0.5s, top 0.5s, right 0.5s; transition: opacity 0.5s, top 0.5s, right 0.5s;
@ -212,20 +206,20 @@
.js:active span:after { .js:active span:after {
transition: opacity 0.5s, top 0.5s, right 0.5s; transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1; opacity: 1;
border-color: #0C5; border-color: #0c5;
right: 0; right: 0;
top: calc(50% + 2.5px); top: calc(50% + 2.5px);
transform: rotate(-140deg); transform: rotate(-140deg);
} }
.nodd-ruby { .nodd-ruby {
background: #C147E6; background: #c147e6;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
z-index: 0; z-index: 0;
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
transition: all .3s transition: all 0.3s;
} }
input[type="checkbox"].toggle { input[type="checkbox"].toggle {
@ -254,13 +248,13 @@
.anim:before { .anim:before {
position: relative; position: relative;
content: ''; content: "";
display: block; display: block;
margin-top: 100%; margin-top: 100%;
} }
.anim:after { .anim:after {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -269,19 +263,19 @@
border-radius: 50%; border-radius: 50%;
} }
.node .toggle:checked+.anim { .node .toggle:checked + .anim {
animation: .75s anim-in; animation: 0.75s anim-in;
} }
.node .toggle:checked+.anim:after { .node .toggle:checked + .anim:after {
animation: anim-in-pseudo 0.75s; animation: anim-in-pseudo 0.75s;
} }
.node .toggle:not(:checked)+.anim { .node .toggle:not(:checked) + .anim {
animation: anim-out 0.75s; animation: anim-out 0.75s;
} }
.node .toggle:not(:checked)+.anim:after { .node .toggle:not(:checked) + .anim:after {
animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s;
} }
@ -290,18 +284,18 @@
} }
.node:hover { .node:hover {
opacity: .8; opacity: 0.8;
} }
.ruby:active { .ruby:active {
opacity: .8; opacity: 0.8;
} }
.ruby:hover>.anim { .ruby:hover > .anim {
animation: anim-out 0.75s; animation: anim-out 0.75s;
} }
.ruby:hover>.anim:after { .ruby:hover > .anim:after {
animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s;
} }
@ -475,23 +469,48 @@
} }
.python-1 { .python-1 {
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%); background-image: linear-gradient(
to right,
#f6d365 0%,
#fda085 51%,
#f6d365 100%
);
} }
.python-2 { .python-2 {
background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%); background-image: linear-gradient(
to right,
#fbc2eb 0%,
#a6c1ee 51%,
#fbc2eb 100%
);
} }
.python-3 { .python-3 {
background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%); background-image: linear-gradient(
to right,
#84fab0 0%,
#8fd3f4 51%,
#84fab0 100%
);
} }
.python-4 { .python-4 {
background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%); background-image: linear-gradient(
to right,
#a1c4fd 0%,
#c2e9fb 51%,
#a1c4fd 100%
);
} }
.python-5 { .python-5 {
background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%); background-image: linear-gradient(
to right,
#ffecd2 0%,
#fcb69f 51%,
#ffecd2 100%
);
} }
.php, .php,
@ -503,9 +522,9 @@
} }
.php { .php {
border: 1px solid #C147E6; border: 1px solid #c147e6;
color: #C147E6; color: #c147e6;
width: 158px; width: 120px;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
position: relative; position: relative;
@ -519,8 +538,8 @@
.php::before, .php::before,
.php::after { .php::after {
background: #C147E6; background: #c147e6;
content: ''; content: "";
position: absolute; position: absolute;
z-index: -2; z-index: -2;
border-radius: 3px; border-radius: 3px;
@ -606,7 +625,7 @@
.kotlin { .kotlin {
background: none; background: none;
border: 1px solid; border: 1px solid;
width: 158px; width: 120px;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
letter-spacing: inherit; letter-spacing: inherit;
@ -620,7 +639,10 @@
.kotlin-1:hover { .kotlin-1:hover {
animation: halftone 1s forwards; animation: halftone 1s forwards;
background: radial-gradient(circle, #9c89f7 0.2em, transparent 0.25em) 0 0/1.25em 1.25em, radial-gradient(circle, #9c89f7 0.2em, transparent 0.25em) 6.25em 6.25em/1.25em 1.25em; background: radial-gradient(circle, #9c89f7 0.2em, transparent 0.25em) 0 0/1.25em
1.25em,
radial-gradient(circle, #9c89f7 0.2em, transparent 0.25em) 6.25em 6.25em/1.25em
1.25em;
color: #e4f789; color: #e4f789;
} }
@ -636,7 +658,13 @@
.kotlin-2:hover { .kotlin-2:hover {
animation: stripes-move 0.75s infinite linear; animation: stripes-move 0.75s infinite linear;
background: repeating-linear-gradient(45deg, #82f6d8 0, #82f6d8 0.25em, transparent 0.25em, transparent 0.5em); background: repeating-linear-gradient(
45deg,
#82f6d8 0,
#82f6d8 0.25em,
transparent 0.25em,
transparent 0.5em
);
color: #f682a0; color: #f682a0;
} }
@ -652,7 +680,9 @@
.kotlin-3:hover { .kotlin-3:hover {
animation: sawtooth 0.35s infinite linear; animation: sawtooth 0.35s infinite linear;
background: linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em, linear-gradient(-45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em; background: linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em
1em,
linear-gradient(-45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em;
color: #8769f1; color: #8769f1;
} }
@ -668,7 +698,28 @@
.kotlin-4:hover { .kotlin-4:hover {
animation: zigzag 1s linear infinite; animation: zigzag 1s linear infinite;
background: linear-gradient(135deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(225deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(315deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0, linear-gradient(45deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0; background: linear-gradient(
135deg,
rgba(238, 161, 99, 0.25) 0.25em,
transparent 0.25em
) -0.5em 0,
linear-gradient(
225deg,
rgba(238, 161, 99, 0.25) 0.25em,
transparent 0.25em
) -0.5em 0,
linear-gradient(
315deg,
rgba(238, 161, 99, 0.25) 0.25em,
transparent 0.25em
)
0 0,
linear-gradient(
45deg,
rgba(238, 161, 99, 0.25) 0.25em,
transparent 0.25em
)
0 0;
background-size: 0.75em 0.75em; background-size: 0.75em 0.75em;
color: #63b0ee; color: #63b0ee;
} }
@ -685,7 +736,14 @@
.kotlin-5:hover { .kotlin-5:hover {
animation: pulse 1s ease-in infinite; animation: pulse 1s ease-in infinite;
background: radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, transparent 50%) 0 0/1em 1em, radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, transparent 50%) 0.5em 0.5em/2em 2em; background: radial-gradient(
circle,
rgba(249, 135, 155, 0.25) 43%,
transparent 50%
)
0 0/1em 1em,
radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, transparent 50%)
0.5em 0.5em/2em 2em;
color: #0bdcb7; color: #0bdcb7;
} }
@ -707,17 +765,17 @@
.vb { .vb {
position: relative; position: relative;
width: 158px; width: 120px;
color: #FA5555; color: #fa5555;
height: 40px; height: 40px;
line-height: 42px; line-height: 42px;
border: 2px solid #FA5555; border: 2px solid #fa5555;
border-radius: 14px; border-radius: 14px;
text-transform: uppercase; text-transform: uppercase;
} }
.dot { .dot {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
width: 32px; width: 32px;
@ -728,16 +786,15 @@
} }
.dot:after { .dot:after {
content: ''; content: "";
position: absolute; position: absolute;
top: -6px; top: -6px;
height: 5px; height: 5px;
width: 5px; width: 5px;
background: #FA5555; background: #fa5555;
border-radius: 50%; border-radius: 50%;
border: 4px solid #FA5555; border: 4px solid #fa5555;
box-shadow: 0 0 .7em #FFF, box-shadow: 0 0 0.7em #fff, 0 0 2em #fa5555;
0 0 2em #FA5555;
} }
.vb:hover .dot, .vb:hover .dot,
@ -746,18 +803,18 @@
display: block; display: block;
} }
/*calc(160px - 36px) 按钮宽度 - dot宽度 - 边框宽度*/ /*calc(122px - 36px) 按钮宽度 - dot宽度 - 边框宽度*/
@keyframes atom { @keyframes atom {
0% { 0% {
transform: translateX(0) rotate(0); transform: translateX(0) rotate(0);
} }
30% { 30% {
transform: translateX(calc(160px - 36px)) rotate(0); transform: translateX(calc(122px - 36px)) rotate(0);
} }
50% { 50% {
transform: translateX(calc(160px - 36px)) rotate(180deg); transform: translateX(calc(122px - 36px)) rotate(180deg);
} }
80% { 80% {
@ -776,16 +833,15 @@
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
left: calc(50vw - 87px); left: calc(50vw - 87px);
width: 160px; width: 122px;
line-height: 44px; line-height: 44px;
color: #fff; color: #fff;
background: #2194E0; background: #2194e0;
opacity: 1; opacity: 1;
} }
.btn-down:active { .btn-down:active {
opacity: .8; opacity: 0.8;
} }
</style> </style>
</html> </html>

6
src/components/FlowChart/src/Control.vue
View File

@ -25,7 +25,7 @@
</template> </template>
<script lang='ts'> <script lang='ts'>
import { defineComponent, ref, unref, onMounted } from "vue"; import { defineComponent, ref, unref, onMounted, onUnmounted } from "vue";
import { templateRef } from "@vueuse/core"; import { templateRef } from "@vueuse/core";
export default defineComponent({ export default defineComponent({
@ -116,6 +116,10 @@ export default defineComponent({
}); });
}); });
// onUnmounted(() => {
// console.log(props.lf);
// });
return { return {
focusIndex, focusIndex,
titleLists, titleLists,

2
src/layout/index.vue
View File

@ -10,7 +10,7 @@
<div class="main-container"> <div class="main-container">
<div :class="{ 'fixed-header': fixedHeader }"> <div :class="{ 'fixed-header': fixedHeader }">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<navbar v-if="!containerHiddenSideBar" /> <navbar v-show="!containerHiddenSideBar" />
<!-- tabs标签页 --> <!-- tabs标签页 -->
<tag> <tag>
<i <i

4
src/views/components/count-to/index.vue
View File

@ -7,7 +7,7 @@
prefix="$" prefix="$"
:duration="1000" :duration="1000"
:color="'#409EFF'" :color="'#409EFF'"
:fontSize="'60px'" :fontSize="'2.3em'"
:startVal="1" :startVal="1"
:endVal="1000" :endVal="1000"
/> />
@ -19,7 +19,7 @@
prefix="$" prefix="$"
:duration="2000" :duration="2000"
:color="'green'" :color="'green'"
:fontSize="'60px'" :fontSize="'2.3em'"
:startVal="1" :startVal="1"
:endVal="2000" :endVal="2000"
/> />