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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<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"> -->
|
||||||
<!-- <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"> -->
|
||||||
<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">
|
<link rel="stylesheet" href="/css/woff/fontFamily.css">
|
||||||
<title>Lane Crawford</title>
|
<title>FiDA</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" />
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
212
package-lock.json
generated
212
package-lock.json
generated
@@ -9,11 +9,13 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@vue-flow/core": "^1.48.2",
|
||||||
"axios": "^1.3.6",
|
"axios": "^1.3.6",
|
||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"element-plus": "^2.13.2",
|
"element-plus": "^2.13.2",
|
||||||
"gsap": "^3.13.0",
|
"gsap": "^3.13.0",
|
||||||
"markdown-it": "^14.1.0",
|
"markdown-it": "^14.1.0",
|
||||||
|
"normalize.css": "^8.0.1",
|
||||||
"pinia": "^2.0.32",
|
"pinia": "^2.0.32",
|
||||||
"pinia-persistedstate-plugin": "^0.1.0",
|
"pinia-persistedstate-plugin": "^0.1.0",
|
||||||
"pinia-plugin-persistedstate": "^3.1.0",
|
"pinia-plugin-persistedstate": "^3.1.0",
|
||||||
@@ -1068,6 +1070,22 @@
|
|||||||
"typescript": "*"
|
"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": {
|
"node_modules/@vue-macros/common": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.1.tgz",
|
||||||
@@ -2278,6 +2296,111 @@
|
|||||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/data-view-buffer": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
|
"resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
|
||||||
@@ -5329,6 +5452,12 @@
|
|||||||
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
|
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
|
||||||
"license": "BSD-3-Clause"
|
"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": {
|
"node_modules/npm-run-all": {
|
||||||
"version": "4.1.5",
|
"version": "4.1.5",
|
||||||
"resolved": "https://registry.npmmirror.com/npm-run-all/-/npm-run-all-4.1.5.tgz",
|
"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"
|
"@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": {
|
"@vue-macros/common": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.1.tgz",
|
"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",
|
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
|
||||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
|
"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": {
|
"data-view-buffer": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
|
"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",
|
"resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
|
||||||
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
|
"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": {
|
"npm-run-all": {
|
||||||
"version": "4.1.5",
|
"version": "4.1.5",
|
||||||
"resolved": "https://registry.npmmirror.com/npm-run-all/-/npm-run-all-4.1.5.tgz",
|
"resolved": "https://registry.npmmirror.com/npm-run-all/-/npm-run-all-4.1.5.tgz",
|
||||||
|
|||||||
@@ -13,11 +13,13 @@
|
|||||||
"postinstall": "husky install"
|
"postinstall": "husky install"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@vue-flow/core": "^1.48.2",
|
||||||
"axios": "^1.3.6",
|
"axios": "^1.3.6",
|
||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"element-plus": "^2.13.2",
|
"element-plus": "^2.13.2",
|
||||||
"gsap": "^3.13.0",
|
"gsap": "^3.13.0",
|
||||||
"markdown-it": "^14.1.0",
|
"markdown-it": "^14.1.0",
|
||||||
|
"normalize.css": "^8.0.1",
|
||||||
"pinia": "^2.0.32",
|
"pinia": "^2.0.32",
|
||||||
"pinia-persistedstate-plugin": "^0.1.0",
|
"pinia-persistedstate-plugin": "^0.1.0",
|
||||||
"pinia-plugin-persistedstate": "^3.1.0",
|
"pinia-plugin-persistedstate": "^3.1.0",
|
||||||
|
|||||||
@@ -13,6 +13,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,3 @@
|
|||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
#app {
|
#app {
|
||||||
|
|||||||
@@ -1,9 +1,3 @@
|
|||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
#app {
|
#app {
|
||||||
@@ -12,7 +6,6 @@ body,
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes loading {
|
@keyframes loading {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
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 {
|
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 App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import store from './stores/index'
|
import store from './stores/index'
|
||||||
|
import 'normalize.css'
|
||||||
import './assets/css/style.css'
|
import './assets/css/style.css'
|
||||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||||
import "virtual:svg-icons-register";
|
import "virtual:svg-icons-register";
|
||||||
|
|||||||
@@ -39,6 +39,17 @@ const router = createRouter({
|
|||||||
name: 'test',
|
name: 'test',
|
||||||
component: () => import('../views/home/test.vue'),
|
component: () => import('../views/home/test.vue'),
|
||||||
meta: { topNavStyle: '2' }
|
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