Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front
This commit is contained in:
李志鹏
21
index.html
21
index.html
@@ -1,24 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
|
||||
<link rel="stylesheet" href="/css/woff/fontFamily.css">
|
||||
<title>Lane Crawford</title>
|
||||
<!-- Open Graph / WhatsApp share metadata -->
|
||||
<meta property="og:title" content="Lane Crawford" />
|
||||
<meta property="og:description" content="create and share looks from the Lane Crawford creation gallery." />
|
||||
<meta property="og:image" content="" />
|
||||
<meta property="og:url" content="https://www.lc.aida.com.hk" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Lane Crawford" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
|
||||
<link rel="stylesheet" href="/css/woff/fontFamily.css">
|
||||
<title>FiDA</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
212
package-lock.json
generated
212
package-lock.json
generated
@@ -9,11 +9,13 @@
|
||||
"version": "0.0.0",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@vue-flow/core": "^1.48.2",
|
||||
"axios": "^1.3.6",
|
||||
"crypto-js": "^4.2.0",
|
||||
"element-plus": "^2.13.2",
|
||||
"gsap": "^3.13.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pinia": "^2.0.32",
|
||||
"pinia-persistedstate-plugin": "^0.1.0",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
@@ -1068,6 +1070,22 @@
|
||||
"typescript": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue-flow/core": {
|
||||
"version": "1.48.2",
|
||||
"resolved": "https://registry.npmmirror.com/@vue-flow/core/-/core-1.48.2.tgz",
|
||||
"integrity": "sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"d3-drag": "^3.0.0",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-zoom": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue-macros/common": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.1.tgz",
|
||||
@@ -2278,6 +2296,111 @@
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-dispatch": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
|
||||
"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-drag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
|
||||
"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-selection": "3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-ease": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-selection": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
|
||||
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-transition": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
|
||||
"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3",
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-ease": "1 - 3",
|
||||
"d3-interpolate": "1 - 3",
|
||||
"d3-timer": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"d3-selection": "2 - 3"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-zoom": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
|
||||
"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-drag": "2 - 3",
|
||||
"d3-interpolate": "1 - 3",
|
||||
"d3-selection": "2 - 3",
|
||||
"d3-transition": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/data-view-buffer": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
|
||||
@@ -5329,6 +5452,12 @@
|
||||
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/normalize.css": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
|
||||
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/npm-run-all": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmmirror.com/npm-run-all/-/npm-run-all-4.1.5.tgz",
|
||||
@@ -9291,6 +9420,18 @@
|
||||
"@volar/vue-language-core": "1.4.4"
|
||||
}
|
||||
},
|
||||
"@vue-flow/core": {
|
||||
"version": "1.48.2",
|
||||
"resolved": "https://registry.npmmirror.com/@vue-flow/core/-/core-1.48.2.tgz",
|
||||
"integrity": "sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==",
|
||||
"requires": {
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"d3-drag": "^3.0.0",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-zoom": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"@vue-macros/common": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.1.tgz",
|
||||
@@ -10166,6 +10307,72 @@
|
||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
|
||||
},
|
||||
"d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
|
||||
},
|
||||
"d3-dispatch": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
|
||||
"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
|
||||
},
|
||||
"d3-drag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
|
||||
"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
|
||||
"requires": {
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-selection": "3"
|
||||
}
|
||||
},
|
||||
"d3-ease": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
|
||||
},
|
||||
"d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"requires": {
|
||||
"d3-color": "1 - 3"
|
||||
}
|
||||
},
|
||||
"d3-selection": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
|
||||
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
|
||||
},
|
||||
"d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
|
||||
},
|
||||
"d3-transition": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
|
||||
"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
|
||||
"requires": {
|
||||
"d3-color": "1 - 3",
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-ease": "1 - 3",
|
||||
"d3-interpolate": "1 - 3",
|
||||
"d3-timer": "1 - 3"
|
||||
}
|
||||
},
|
||||
"d3-zoom": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
|
||||
"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
|
||||
"requires": {
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-drag": "2 - 3",
|
||||
"d3-interpolate": "1 - 3",
|
||||
"d3-selection": "2 - 3",
|
||||
"d3-transition": "2 - 3"
|
||||
}
|
||||
},
|
||||
"data-view-buffer": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
|
||||
@@ -12459,6 +12666,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
|
||||
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
|
||||
},
|
||||
"normalize.css": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
|
||||
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
|
||||
},
|
||||
"npm-run-all": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmmirror.com/npm-run-all/-/npm-run-all-4.1.5.tgz",
|
||||
|
||||
@@ -13,11 +13,13 @@
|
||||
"postinstall": "husky install"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue-flow/core": "^1.48.2",
|
||||
"axios": "^1.3.6",
|
||||
"crypto-js": "^4.2.0",
|
||||
"element-plus": "^2.13.2",
|
||||
"gsap": "^3.13.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pinia": "^2.0.32",
|
||||
"pinia-persistedstate-plugin": "^0.1.0",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
#app {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
@@ -12,7 +6,6 @@ body,
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
||||
3
src/assets/icons/attach.svg
Normal file
3
src/assets/icons/attach.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9451 8.83443C16.017 8.89189 16.0742 8.97812 16.103 9.06431C16.1461 9.1505 16.1605 9.23661 16.1605 9.33716C16.1605 9.43772 16.1461 9.52382 16.103 9.61001C16.0742 9.6962 16.017 9.78244 15.9451 9.8399L8.59016 17.2091C7.64208 18.1572 6.36364 18.6743 5.0277 18.6743C3.69177 18.6743 2.41334 18.1428 1.47962 17.2091C0.531542 16.261 0 14.9826 0 13.6466C0 12.3107 0.531542 11.0323 1.47962 10.0985L10.3858 1.04861C11.0609 0.373458 11.9659 0 12.9284 0C13.8765 0 14.7958 0.373458 15.471 1.04861C16.1318 1.72376 16.5196 2.64314 16.5196 3.59122C16.5196 4.5393 16.1461 5.45868 15.471 6.13383L6.55046 15.1694C6.14825 15.5716 5.6023 15.8014 5.0277 15.8014C4.45311 15.8014 3.90716 15.5716 3.50494 15.1694C3.10273 14.7672 2.87297 14.2212 2.87297 13.6466C2.87297 13.072 3.10273 12.5261 3.50494 12.1239L10.9746 4.52497C11.0464 4.45314 11.1185 4.39569 11.2047 4.3526C11.3052 4.32387 11.3913 4.29508 11.4919 4.29508C11.5781 4.29508 11.6786 4.3095 11.7647 4.3526C11.8653 4.38133 11.9374 4.43875 12.0092 4.49621C12.081 4.56803 12.1239 4.65429 12.167 4.74048C12.2101 4.82666 12.2245 4.92713 12.2245 5.01332C12.2245 5.11388 12.1957 5.21436 12.167 5.30055C12.1239 5.38674 12.0666 5.45861 12.0092 5.53044L4.52479 13.1295C4.45297 13.2013 4.41007 13.2876 4.36698 13.3738C4.32388 13.46 4.30946 13.5461 4.30946 13.6466C4.30946 13.7328 4.32388 13.8333 4.36698 13.9195C4.39571 14.0057 4.45297 14.0775 4.52479 14.1494C4.58225 14.2212 4.66867 14.2786 4.75485 14.3073C4.84104 14.3504 4.92715 14.3649 5.0277 14.3649C5.12826 14.3649 5.21436 14.3504 5.30055 14.3073C5.38674 14.2786 5.47315 14.2212 5.53061 14.1494L14.4511 5.11398C14.8534 4.71176 15.0831 4.16581 15.0831 3.59122C15.0831 3.01662 14.8534 2.47067 14.4511 2.06846C14.0489 1.66624 13.503 1.43649 12.9284 1.43649C12.3538 1.43649 11.8078 1.66624 11.4056 2.06846L2.48509 11.104C2.1547 11.4344 1.89608 11.8367 1.70933 12.2677C1.53696 12.6986 1.43649 13.1726 1.43649 13.6466C1.43649 14.1207 1.53696 14.5803 1.70933 15.0112C1.89608 15.4565 2.1547 15.8445 2.48509 16.1892C2.81549 16.5196 3.21779 16.7782 3.64873 16.965C4.09404 17.1374 4.55366 17.2378 5.0277 17.2378C5.50174 17.2378 5.96136 17.1517 6.40667 16.965C6.83762 16.7782 7.23992 16.5196 7.57031 16.1892L14.9393 8.82005C15.0686 8.69076 15.2555 8.61892 15.4422 8.61892C15.629 8.61892 15.8159 8.69078 15.9451 8.83443Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
3
src/assets/icons/close.svg
Normal file
3
src/assets/icons/close.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.292893 0.292894C0.683418 -0.097631 1.31658 -0.0976307 1.70711 0.292894L6.65685 5.24264L11.6066 0.292894C11.9971 -0.0976317 12.6303 -0.0976307 13.0208 0.292894C13.4113 0.683418 13.4113 1.31658 13.0208 1.70711L8.07107 6.65685L13.0208 11.6066C13.4113 11.9971 13.4113 12.6303 13.0208 13.0208C12.6303 13.4113 11.9971 13.4113 11.6066 13.0208L6.65685 8.07107L1.70711 13.0208C1.31658 13.4113 0.683418 13.4113 0.292893 13.0208C-0.0976311 12.6303 -0.0976311 11.9971 0.292893 11.6066L5.24264 6.65685L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292894Z" fill="#0D0D0D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 697 B |
@@ -1,5 +1,40 @@
|
||||
export default {
|
||||
Login: {
|
||||
|
||||
},
|
||||
Login: {},
|
||||
Input: {
|
||||
placeholder: 'Please input',
|
||||
selectPlaceholder: 'Please select',
|
||||
typePlaceholder: 'Type',
|
||||
areaPlaceholder: 'Region',
|
||||
stylePlaceholder: 'Style',
|
||||
types: {
|
||||
sofa: 'Sofa',
|
||||
desk: 'Desk',
|
||||
chair: 'Chair'
|
||||
},
|
||||
styles: {
|
||||
Coastal: 'Coastal',
|
||||
Verdant: 'Verdant',
|
||||
Traditional: 'Traditional',
|
||||
CenturyChrome: 'Century\nChrome',
|
||||
ModernRevival: 'Modern\nRevival',
|
||||
Tuscan2000s: "Tuscan\n2000's",
|
||||
Bauhaus: 'Bauhaus',
|
||||
Constructivism: 'Constructivism',
|
||||
NordicNoir:'Nordic\nNoir',
|
||||
},
|
||||
chooseStyle: 'Choose Style',
|
||||
confirm: 'Confirm'
|
||||
},
|
||||
area: {
|
||||
unitedStates: 'United States',
|
||||
singapore: 'Singapore',
|
||||
australia: 'Australia',
|
||||
southKorea: 'South Korea',
|
||||
china: 'China',
|
||||
italy: 'Italy',
|
||||
france: 'France',
|
||||
japan: 'Japan',
|
||||
canada: 'Canada',
|
||||
germany: 'Germany'
|
||||
}
|
||||
}
|
||||
|
||||
35
src/lang/zh-cn.ts
Normal file
35
src/lang/zh-cn.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
export default {
|
||||
Login: {
|
||||
|
||||
},
|
||||
Input: {
|
||||
placeholder: '请输入',
|
||||
selectPlaceholder: '请选择',
|
||||
type: '类型',
|
||||
area: '地区',
|
||||
style: '风格',
|
||||
types: {
|
||||
sofa: '沙发',
|
||||
desk: '书桌',
|
||||
chair: '椅子'
|
||||
},
|
||||
styles: {
|
||||
modern: '现代',
|
||||
classic: '古典'
|
||||
},
|
||||
chooseStyle: '选择风格',
|
||||
confirm: '确认'
|
||||
},
|
||||
area: {
|
||||
unitedStates: '美国',
|
||||
singapore: '新加坡',
|
||||
australia: '澳大利亚',
|
||||
southKorea: '韩国',
|
||||
china: '中国',
|
||||
italy: '意大利',
|
||||
france: '法国',
|
||||
japan: '日本',
|
||||
canada: '加拿大',
|
||||
germany: '德国'
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './stores/index'
|
||||
import 'normalize.css'
|
||||
import './assets/css/style.css'
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||
import "virtual:svg-icons-register";
|
||||
|
||||
@@ -39,6 +39,17 @@ const router = createRouter({
|
||||
name: 'test',
|
||||
component: () => import('../views/home/test.vue'),
|
||||
meta: { topNavStyle: '2' }
|
||||
},
|
||||
{
|
||||
path: '/home/versionTree',
|
||||
name: 'versionTree',
|
||||
component: () => import('../views/home/versionTree.vue'),
|
||||
meta: { topNavStyle: '2' }
|
||||
},
|
||||
{
|
||||
path: 'mainInput',
|
||||
name: 'mainInput',
|
||||
component: () => import('../views/home/mainInput.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
42
src/utils/area.ts
Normal file
42
src/utils/area.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
export const areaList = [
|
||||
{
|
||||
label: 'area.unitedStates',
|
||||
value: 'United States'
|
||||
},
|
||||
{
|
||||
label: 'area.singapore',
|
||||
value: 'Singapore'
|
||||
},
|
||||
{
|
||||
label: 'area.australia',
|
||||
value: 'Australia'
|
||||
},
|
||||
{
|
||||
label: 'area.southKorea',
|
||||
value: 'South Korea'
|
||||
},
|
||||
{
|
||||
label: 'area.china',
|
||||
value: 'China'
|
||||
},
|
||||
{
|
||||
label: 'area.italy',
|
||||
value: 'Italy'
|
||||
},
|
||||
{
|
||||
label: 'area.france',
|
||||
value: 'France'
|
||||
},
|
||||
{
|
||||
label: 'area.japan',
|
||||
value: 'Japan'
|
||||
},
|
||||
{
|
||||
label: 'area.canada',
|
||||
value: 'Canada'
|
||||
},
|
||||
{
|
||||
label: 'area.germany',
|
||||
value: 'Germany'
|
||||
}
|
||||
]
|
||||
35
src/views/home/VersionTree.vue
Normal file
35
src/views/home/VersionTree.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
|
||||
import VersionTreeIndex from './versionTree/index.vue'
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const versionTreeData = ref({
|
||||
drawer:false,
|
||||
list:computed(()=>{
|
||||
return []
|
||||
})
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="homeNavBox">
|
||||
<el-button type="primary" @click="versionTreeData.drawer = true">open Version Tree</el-button>
|
||||
<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.homeNavBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
303
src/views/home/components/Input.vue
Normal file
303
src/views/home/components/Input.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div class="assist-input-wrapper flex flex-col">
|
||||
<textarea
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="inputValue"
|
||||
:placeholder="$t('Input.placeholder')"
|
||||
/>
|
||||
<div class="operate flex align-center">
|
||||
<div class="attach flex flex-center">
|
||||
<img src="@/assets/icons/attach.svg" alt="" />
|
||||
</div>
|
||||
<el-select v-model="typeValue" :placeholder="$t('Input.typePlaceholder')">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
class="input-option"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="areaValue" :placeholder="$t('Input.areaPlaceholder')">
|
||||
<el-option
|
||||
v-for="item in areaOptions"
|
||||
class="input-option"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="fida-style-select-wrapper">
|
||||
<el-select
|
||||
v-model="styleValue"
|
||||
:placeholder="$t('Input.stylePlaceholder')"
|
||||
@focus="openStylePopup"
|
||||
/>
|
||||
|
||||
<el-popover
|
||||
v-model:visible="stylePopupVisible"
|
||||
placement="bottom-start"
|
||||
:width="342"
|
||||
:show-arrow="false"
|
||||
trigger="click"
|
||||
popper-class="fida-style-select-popover"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="fida-style-select-trigger"></div>
|
||||
</template>
|
||||
<div class="fida-style-popover-content">
|
||||
<div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
|
||||
<div class="fida-style-popover-grid">
|
||||
<div
|
||||
v-for="item in styleOptions"
|
||||
:key="item.value"
|
||||
class="fida-style-popover-item"
|
||||
:class="{ 'is-selected': tempSelectedValue === item.value }"
|
||||
@click="selectStyle(item.value)"
|
||||
>
|
||||
<span class="fida-option-label">{{ $t(item.label) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fida-style-popover-footer">
|
||||
<button class="fida-confirm-btn" @click="confirmStyle">
|
||||
{{ $t('Input.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { areaList } from '@/utils/area'
|
||||
|
||||
const styleKeys: string[] = [
|
||||
'Coastal',
|
||||
'Verdant',
|
||||
'Traditional',
|
||||
'CenturyChrome',
|
||||
'ModernRevival',
|
||||
'Tuscan2000s',
|
||||
'Bauhaus',
|
||||
'Constructivism',
|
||||
'NordicNoir'
|
||||
]
|
||||
|
||||
const inputValue = ref<string>('')
|
||||
|
||||
const typeValue = ref<string>('')
|
||||
const areaValue = ref<string>('')
|
||||
const styleValue = ref<string>('')
|
||||
const tempSelectedValue = ref<string>('')
|
||||
const stylePopupVisible = ref(false)
|
||||
|
||||
const openStylePopup = () => {
|
||||
// 打开弹窗时初始化临时选中值为当前选中值
|
||||
tempSelectedValue.value = styleValue.value
|
||||
stylePopupVisible.value = true
|
||||
}
|
||||
|
||||
const selectStyle = (value: string) => {
|
||||
tempSelectedValue.value = value
|
||||
}
|
||||
|
||||
const confirmStyle = () => {
|
||||
// 点击确认后才真正赋值
|
||||
styleValue.value = tempSelectedValue.value
|
||||
stylePopupVisible.value = false
|
||||
}
|
||||
const typeOptions = ref<any[]>([
|
||||
{
|
||||
label: 'Input.types.sofa',
|
||||
value: 'Sofa'
|
||||
},
|
||||
{
|
||||
label: 'Input.types.desk',
|
||||
value: 'Desk'
|
||||
},
|
||||
{
|
||||
label: 'Input.types.chair',
|
||||
value: 'Chair'
|
||||
}
|
||||
])
|
||||
const areaOptions = ref<any[]>(areaList)
|
||||
const styleOptions = ref<any[]>(
|
||||
styleKeys.map((key) => ({
|
||||
label: `Input.styles.${key}`,
|
||||
value: key
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.assist-input-wrapper {
|
||||
height: 23.5rem;
|
||||
width: 106.3rem;
|
||||
border-radius: 2.8rem;
|
||||
background-color: #fff;
|
||||
border: 0.1rem solid #00000005;
|
||||
box-shadow: 0px 5px 14px 0px #0000001a;
|
||||
margin: 0 auto;
|
||||
padding: 3.4rem 1.7rem 1.7rem 2rem;
|
||||
.input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0 1.4rem;
|
||||
font-size: 2rem;
|
||||
font-family: 'InterRegular';
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
resize: none;
|
||||
}
|
||||
.operate {
|
||||
column-gap: 2rem;
|
||||
.attach {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.el-select {
|
||||
width: 13.9rem;
|
||||
height: 4rem;
|
||||
:deep(.el-select__wrapper) {
|
||||
border-radius: 0.8rem;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
border: 0.1rem solid rgba(0, 0, 0, 0.1);
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
.el-select__placeholder {
|
||||
color: #000;
|
||||
}
|
||||
.el-select__icon {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fida-style-select-wrapper {
|
||||
position: relative;
|
||||
width: 13.9rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.fida-style-select-trigger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-option {
|
||||
// padding: 0 1rem;
|
||||
margin: 0 0.6rem;
|
||||
padding: 0 0.8rem 0 1rem;
|
||||
color: #0d0d0d;
|
||||
font-weight: 510;
|
||||
font-size: 1.3rem;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
&.el-select-dropdown__item.is-hovering {
|
||||
background-color: rgba(13, 13, 13, 0.02);
|
||||
// border-radius: 0.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
/* 弹窗样式 - 使用 fida- 前缀避免样式污染 */
|
||||
.fida-style-select-popover {
|
||||
width: 34.2rem !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 0.6rem !important;
|
||||
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
|
||||
background-color: #fff !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fida-style-popover-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fida-style-popover-header {
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
padding: 1.8rem 2rem 1.5rem;
|
||||
border-bottom: 0.1rem solid #f0f0f0;
|
||||
}
|
||||
|
||||
.fida-style-popover-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.fida-style-popover-item {
|
||||
height: 9rem;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 0.2rem solid transparent;
|
||||
}
|
||||
|
||||
.fida-style-popover-item:hover {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.fida-style-popover-item.is-selected {
|
||||
background-color: #e3f2fd;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
.fida-style-popover-item .fida-option-label {
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.fida-style-popover-footer {
|
||||
padding: 1.5rem 2rem 1.8rem;
|
||||
border-top: 0.1rem solid #f0f0f0;
|
||||
}
|
||||
|
||||
.fida-confirm-btn {
|
||||
width: 100%;
|
||||
height: 4.4rem;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.8rem;
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.fida-confirm-btn:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.fida-confirm-btn:active {
|
||||
background-color: #000;
|
||||
}
|
||||
</style>
|
||||
32
src/views/home/mainInput.vue
Normal file
32
src/views/home/mainInput.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="main-input-container flex-1">
|
||||
<div class="slogan">
|
||||
<p>Creating Things with <span class="fiDA">FiDA</span> that</p>
|
||||
<p>Bloom Your Creativity</p>
|
||||
</div>
|
||||
<Input />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import Input from './components/Input.vue'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main-input-container {
|
||||
padding-top: 20.2rem;
|
||||
.slogan{
|
||||
color: #000;
|
||||
font-size: 6rem;
|
||||
font-family: 'GeneralMedium';
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 5.6rem;
|
||||
.fiDA{
|
||||
font-family: 'GeneralBold';
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
src/views/home/versionTree/index.vue
Normal file
110
src/views/home/versionTree/index.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import Tree from './tree/index.vue'
|
||||
const props = defineProps({
|
||||
versionTreeData:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {
|
||||
drawer:false,
|
||||
list:[],
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const treeState = ref(false)//
|
||||
|
||||
const openTree = ()=>{
|
||||
treeState.value = !treeState.value
|
||||
|
||||
}
|
||||
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="versionTree">
|
||||
<el-drawer
|
||||
v-model="versionTreeData.drawer"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
:size="treeState?'109rem':'49rem'"
|
||||
body-class="versionTreeBody"
|
||||
:with-header="false">
|
||||
<div class="versionTreeTitle">
|
||||
<span>Version Tree: Retro Sofa Sketch</span>
|
||||
<div class="closeBtn" @click="versionTreeData.drawer = false">
|
||||
<div class="closeIcon">
|
||||
<SvgIcon name="close" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<el-button class="expandBtn" @click="openTree" style="width: 5rem;">+</el-button>
|
||||
<el-button class="expandBtn" @click="openTree" style="width: 5rem;">-</el-button>
|
||||
</div>
|
||||
<div class="versionTreeBox">
|
||||
<div class="tree">
|
||||
<Tree :treeState="treeState"></Tree>
|
||||
</div>
|
||||
<div class="detail">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.versionTree{
|
||||
--border-radius: 1rem;
|
||||
:deep(.versionTreeBody){
|
||||
--el-drawer-padding-primary: 0rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.versionTreeTitle{
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 .8rem 0 1.2rem;
|
||||
border-bottom: 1px solid #C9C9C9;
|
||||
> span{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .closeBtn{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.versionTreeBox{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
> .tree{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 1.8rem 0 1.8rem 2.1rem;
|
||||
}
|
||||
> .detail{
|
||||
width: 35rem;
|
||||
margin: 1.4rem 3rem 0 3.4rem;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
71
src/views/home/versionTree/tree/index.vue
Normal file
71
src/views/home/versionTree/tree/index.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
|
||||
import view1Item from './view1Item.vue'
|
||||
import view2 from './view2/index.vue'
|
||||
|
||||
const props = defineProps({
|
||||
treeState:{
|
||||
default:false,
|
||||
},
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const treeStateTime = ref(true)
|
||||
|
||||
watch(()=>props.treeState,(newVal,oldVal)=>{
|
||||
treeStateTime.value = false
|
||||
setTimeout(()=>{
|
||||
treeStateTime.value = true
|
||||
},250)
|
||||
})
|
||||
|
||||
const view1List = ref([
|
||||
{
|
||||
name:'P1',
|
||||
},{
|
||||
name:'V1',
|
||||
},{
|
||||
name:'V1-1',
|
||||
}
|
||||
])
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="tree" v-show="treeStateTime">
|
||||
<div v-if="!treeState" class="box view1">
|
||||
<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
|
||||
</div>
|
||||
<div v-else class="box view2">
|
||||
<view2 :list="view1List"></view2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.tree{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
&.view1{
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
&.view2{
|
||||
border: 1px solid #D9D9D9;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: var(--border-radius, 1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
70
src/views/home/versionTree/tree/view1Item.vue
Normal file
70
src/views/home/versionTree/tree/view1Item.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="btn">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.btn{
|
||||
font-size: 1.2rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #000;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
margin-bottom: 4rem;
|
||||
position: relative;
|
||||
&::after{
|
||||
content: '';
|
||||
cursor: auto;
|
||||
position: absolute;
|
||||
top: calc(100% + 2px);
|
||||
height: 4rem;
|
||||
left: 50%;
|
||||
width: 1.8px;
|
||||
transform: translateX(-50%);
|
||||
background:
|
||||
repeating-linear-gradient(0deg, #333 0, #333 5px, transparent 5px, transparent 10px),
|
||||
linear-gradient(white, white);
|
||||
background-clip: padding-box, border-box;
|
||||
background-origin: border-box;
|
||||
}
|
||||
&.active{
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
.btn:nth-child(1){
|
||||
background-color: #7A7A7A;
|
||||
color: #FFF;
|
||||
border: 2px solid #7A7A7A;
|
||||
}
|
||||
.btn:last-child{
|
||||
margin-bottom: 0;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/views/home/versionTree/tree/view2/index.vue
Normal file
63
src/views/home/versionTree/tree/view2/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import type { Node, Edge } from '@vue-flow/core'
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import SpecialEdge from './speciaiEdge.vue'
|
||||
import SpecialNode from './speciaiNode.vue'
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const nodes = ref<Node[]>([
|
||||
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 } },
|
||||
{ id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
|
||||
{ id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
|
||||
{ id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
|
||||
])
|
||||
|
||||
const edges = ref<Edge[]>([
|
||||
{ id: 'e1-2', source: '1', target: '2', type: 'custom' },
|
||||
{ id: 'e1-3', source: '1', target: '3', animated: true },
|
||||
{ id: 'e1-4', source: '1', target: '4', },
|
||||
])
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="view2">
|
||||
<VueFlow :nodes="nodes" :edges="edges">
|
||||
<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
|
||||
<template #node-custom="nodeProps">
|
||||
<SpecialNode v-bind="nodeProps" />
|
||||
</template>
|
||||
|
||||
<!-- <template #edge-custom="edgeProps">
|
||||
<SpecialEdge v-bind="edgeProps" />
|
||||
</template> -->
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "@vue-flow/core/dist/style.css";
|
||||
@import "@vue-flow/core/dist/theme-default.css";
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.view2{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
45
src/views/home/versionTree/tree/view2/speciaiEdge.vue
Normal file
45
src/views/home/versionTree/tree/view2/speciaiEdge.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import type { EdgeProps } from '@vue-flow/core'
|
||||
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
|
||||
|
||||
const props = defineProps<EdgeProps>()
|
||||
|
||||
const { removeEdges } = useVueFlow()
|
||||
|
||||
const path = computed(() => getBezierPath(props))
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseEdge :path="path[0]" />
|
||||
|
||||
<EdgeLabelRenderer>
|
||||
<div
|
||||
:style="{
|
||||
pointerEvents: 'all',
|
||||
position: 'absolute',
|
||||
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
|
||||
}"
|
||||
class="nodrag nopan"
|
||||
>
|
||||
<button class="edgebutton" @click="removeEdges(id)">×</button>
|
||||
</div>
|
||||
</EdgeLabelRenderer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.edgebutton {
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edgebutton:hover {
|
||||
box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
|
||||
}
|
||||
</style>
|
||||
55
src/views/home/versionTree/tree/view2/speciaiNode.vue
Normal file
55
src/views/home/versionTree/tree/view2/speciaiNode.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const counter = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="custom-node">
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
<button class="increment nodrag" @click="counter++">Increment</button>
|
||||
|
||||
<div v-if="counter > 0" class="counter">
|
||||
<div class="count" v-for="count of counter" :key="`count-${count}`">{{ count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.custom-node {
|
||||
min-width: 100px;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.increment {
|
||||
border-radius: 4px;
|
||||
background: #42b983;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.increment:hover {
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.counter {
|
||||
margin-top: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 6px;
|
||||
color: #ff0072;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user