数据记录第一版

v1.2.0
于肖磊 2025-01-05 15:57:09 +08:00
parent 7f6e6cd51a
commit 8963fe274f
27 changed files with 334 additions and 601 deletions

474
package-lock.json generated
View File

@ -15,7 +15,7 @@
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.4.0",
"dompurify": "^3.1.6",
"element-plus": "^2.3.7",
"element-plus": "2.8.1",
"pinia": "^2.1.3",
"qrcode": "^1.5.4",
"swiper": "^11.1.5",
@ -41,7 +41,7 @@
"fast-glob": "3.2.11",
"npm-run-all": "^4.1.5",
"prettier": "^3.0.0",
"sass": "^1.63.6",
"sass": "1.63.6",
"typescript": "~5.0.4",
"unplugin-auto-import": "^0.16.6",
"unplugin-icons": "^0.16.3",
@ -763,280 +763,6 @@
"node": ">= 8"
}
},
"node_modules/@parcel/watcher": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.4.1.tgz",
"integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"detect-libc": "^1.0.3",
"is-glob": "^4.0.3",
"micromatch": "^4.0.5",
"node-addon-api": "^7.0.0"
},
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
},
"optionalDependencies": {
"@parcel/watcher-android-arm64": "2.4.1",
"@parcel/watcher-darwin-arm64": "2.4.1",
"@parcel/watcher-darwin-x64": "2.4.1",
"@parcel/watcher-freebsd-x64": "2.4.1",
"@parcel/watcher-linux-arm-glibc": "2.4.1",
"@parcel/watcher-linux-arm64-glibc": "2.4.1",
"@parcel/watcher-linux-arm64-musl": "2.4.1",
"@parcel/watcher-linux-x64-glibc": "2.4.1",
"@parcel/watcher-linux-x64-musl": "2.4.1",
"@parcel/watcher-win32-arm64": "2.4.1",
"@parcel/watcher-win32-ia32": "2.4.1",
"@parcel/watcher-win32-x64": "2.4.1"
}
},
"node_modules/@parcel/watcher-android-arm64": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
"integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-arm64": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
"integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-x64": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
"integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-freebsd-x64": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
"integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-glibc": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
"integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
"cpu": [
"arm"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-glibc": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
"integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-musl": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
"integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-glibc": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
"integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-musl": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
"integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-arm64": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
"integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-ia32": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
"integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
"cpu": [
"ia32"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-x64": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
"integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@polka/url": {
"version": "1.0.0-next.28",
"resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.28.tgz",
@ -1449,30 +1175,6 @@
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@unocss/cli/node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"license": "MIT",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/@unocss/cli/node_modules/fast-glob": {
"version": "3.3.2",
"resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
@ -1501,18 +1203,6 @@
"node": ">= 6"
}
},
"node_modules/@unocss/cli/node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"license": "MIT",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/@unocss/config": {
"version": "0.53.6",
"resolved": "https://registry.npmmirror.com/@unocss/config/-/config-0.53.6.tgz",
@ -1812,30 +1502,6 @@
"vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0"
}
},
"node_modules/@unocss/vite/node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"license": "MIT",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/@unocss/vite/node_modules/fast-glob": {
"version": "3.3.2",
"resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
@ -1864,18 +1530,6 @@
"node": ">= 6"
}
},
"node_modules/@unocss/vite/node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"license": "MIT",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/@uppy/companion-client": {
"version": "2.2.2",
"resolved": "https://registry.npmmirror.com/@uppy/companion-client/-/companion-client-2.2.2.tgz",
@ -2873,19 +2527,37 @@
}
},
"node_modules/chokidar": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.1.tgz",
"integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
"devOptional": true,
"license": "MIT",
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dependencies": {
"readdirp": "^4.0.1"
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 14.16.0"
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/chokidar/node_modules/glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dependencies": {
"is-glob": "^4.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/class-utils": {
@ -3460,19 +3132,6 @@
"integrity": "sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==",
"license": "MIT"
},
"node_modules/detect-libc": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
"devOptional": true,
"license": "Apache-2.0",
"bin": {
"detect-libc": "bin/detect-libc.js"
},
"engines": {
"node": ">=0.10"
}
},
"node_modules/dijkstrajs": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
@ -3589,10 +3248,9 @@
"license": "MIT"
},
"node_modules/element-plus": {
"version": "2.8.6",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.6.tgz",
"integrity": "sha512-fk5jB8V3efM02/4roZ5SWOLArgaYXbxEydZLlXSr+KPAwjNyHBlk2+HO5em8YKo5+RLBoHnn6BaThj6IE4nXoQ==",
"license": "MIT",
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.8.1.tgz",
"integrity": "sha512-p11/6w/O0+hGvPhiN3jrcgh+XG+eg5jZlLdQVYvcPHZYhhCh3J3YeZWW1JO/REPES1vevkboT6VAi+9wHA8Dsg==",
"dependencies": {
"@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.3.1",
@ -6314,13 +5972,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/node-addon-api": {
"version": "7.1.1",
"resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
"devOptional": true,
"license": "MIT"
},
"node_modules/node-fetch-native": {
"version": "1.6.4",
"resolved": "https://registry.npmmirror.com/node-fetch-native/-/node-fetch-native-1.6.4.tgz",
@ -7347,17 +6998,14 @@
}
},
"node_modules/readdirp": {
"version": "4.0.2",
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.0.2.tgz",
"integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">= 14.16.0"
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dependencies": {
"picomatch": "^2.2.1"
},
"funding": {
"type": "individual",
"url": "https://paulmillr.com/funding/"
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/regenerator-runtime": {
@ -7665,14 +7313,12 @@
}
},
"node_modules/sass": {
"version": "1.80.3",
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.80.3.tgz",
"integrity": "sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==",
"version": "1.63.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
"integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"@parcel/watcher": "^2.4.1",
"chokidar": "^4.0.0",
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
@ -10044,31 +9690,6 @@
"balanced-match": "^1.0.0"
}
},
"node_modules/unplugin-vue-components/node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dev": true,
"license": "MIT",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/unplugin-vue-components/node_modules/fast-glob": {
"version": "3.3.2",
"resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
@ -10128,19 +9749,6 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/unplugin-vue-components/node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"license": "MIT",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/unset-value": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/unset-value/-/unset-value-1.0.0.tgz",

View File

@ -19,7 +19,7 @@
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.4.0",
"dompurify": "^3.1.6",
"element-plus": "^2.3.7",
"element-plus": "2.8.1",
"pinia": "^2.1.3",
"qrcode": "^1.5.4",
"swiper": "^11.1.5",
@ -45,7 +45,7 @@
"fast-glob": "3.2.11",
"npm-run-all": "^4.1.5",
"prettier": "^3.0.0",
"sass": "^1.63.6",
"sass": "1.63.6",
"typescript": "~5.0.4",
"unplugin-auto-import": "^0.16.6",
"unplugin-icons": "^0.16.3",

View File

@ -1,5 +1,5 @@
<template>
<el-radio-group v-model="modelValue" is-button>
<el-radio-group v-model="modelValue" is-button @change="operation_end">
<el-tooltip v-for="item in radio_list" :key="item.value" :content="item.name" placement="top" effect="dark">
<el-radio-button :value="item.value"><icon :name="item.icon"></icon></el-radio-button>
</el-tooltip>
@ -15,4 +15,9 @@ const radio_list = [
{ name: '平铺', value: '3', icon: 'tile' },
{ name: '铺满', value: '4', icon: 'spread-over' },
];
//
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
};
</script>

View File

@ -1,6 +1,6 @@
<template>
<div class="flex-row align-c gap-12">
<el-color-picker v-model="color" :predefine="predefine_colors" />
<el-color-picker v-model="color" :predefine="predefine_colors" @change="blur" />
<icon name="reset" color="primary" size="16" :class="['c-pointer', { disable: color == defaultColor }]" @click="reset_event"></icon>
</div>
</template>
@ -27,6 +27,12 @@ const reset_event = () => {
color.value = '';
}
}
blur();
};
const emit = defineEmits(['operation_end']);
const blur = () => {
emit('operation_end');
};
</script>
<style lang="scss" scoped>

View File

@ -2,7 +2,7 @@
<template>
<div class="input-number" :class="iconName ? 'has-icon' : ''">
<icon v-if="iconName" :name="iconName" size="14" color="3" class="input-icon"></icon>
<el-input-number v-model="internal_value" :min="min" :max="max" type="number" placeholder="0" controls-position="right" @keyup.enter="preventDefault"></el-input-number>
<el-input-number v-model="internal_value" :min="min" :max="max" type="number" placeholder="0" controls-position="right" @keyup.enter="preventDefault" @blur="blur"></el-input-number>
</div>
</template>
@ -26,6 +26,10 @@ const internal_value = defineModel({ type: Number, default: 0 });
const preventDefault = (e: DragEvent) => {
e.preventDefault();
}
const emit = defineEmits(['operation_end']);
const blur = () => {
emit('operation_end');
};
</script>
<style lang="scss" scoped>
.input-number {

View File

@ -1,7 +1,7 @@
<template>
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.margin" :max="200" type="retract" @update:model-value="margin_event"></slider>
<slider v-model="form.margin" :max="200" type="retract" @update:model-value="margin_event" @operation_end="operation_end"></slider>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>
@ -10,16 +10,16 @@
</div>
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
<div class="flex-width-half pr-10">
<input-number v-model="form.margin_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
<input-number v-model="form.margin_top" :max="200" icon-name="enter-t" @update:model-value="pt_event" @operation_end="operation_end"></input-number>
</div>
<div class="flex-width-half pl-10">
<input-number v-model="form.margin_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event"></input-number>
<input-number v-model="form.margin_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event" @operation_end="operation_end"></input-number>
</div>
<div class="flex-width-half pr-10">
<input-number v-model="form.margin_left" :max="200" icon-name="enter-l" @update:model-value="pl_event"></input-number>
<input-number v-model="form.margin_left" :max="200" icon-name="enter-l" @update:model-value="pl_event" @operation_end="operation_end"></input-number>
</div>
<div class="flex-width-half pl-10">
<input-number v-model="form.margin_right" :max="200" icon-name="enter-r" @update:model-value="pr_event"></input-number>
<input-number v-model="form.margin_right" :max="200" icon-name="enter-r" @update:model-value="pr_event" @operation_end="operation_end"></input-number>
</div>
</div>
</div>
@ -39,8 +39,11 @@ const state = reactive({
// 使toRefs
const { form } = toRefs(state);
const emit = defineEmits(['update:value']);
const emit = defineEmits(['update:value', 'operation_end']);
//
const operation_end = () => {
emit('operation_end');
};
const margin_event = (val: number | undefined) => {
form.value.margin = Number(val);
form.value.margin_top = Number(val);

View File

@ -1,7 +1,7 @@
<template>
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.padding" :max="200" type="retract" @update:model-value="padding_event"></slider>
<slider v-model="form.padding" :max="200" type="retract" @update:model-value="padding_event" @operation_end="operation_end"></slider>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>
@ -11,17 +11,17 @@
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
<template v-if="isUpDown">
<div class="flex-width-half pr-10">
<input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
<input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event" @operation_end="operation_end"></input-number>
</div>
<div class="flex-width-half pl-10">
<input-number v-model="form.padding_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event"></input-number>
<input-number v-model="form.padding_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event" @operation_end="operation_end"></input-number>
</div>
</template>
<div class="flex-width-half pr-10">
<input-number v-model="form.padding_left" :max="200" icon-name="enter-l" @update:model-value="pl_event"></input-number>
<input-number v-model="form.padding_left" :max="200" icon-name="enter-l" @update:model-value="pl_event" @operation_end="operation_end"></input-number>
</div>
<div class="flex-width-half pl-10">
<input-number v-model="form.padding_right" :max="200" icon-name="enter-r" @update:model-value="pr_event"></input-number>
<input-number v-model="form.padding_right" :max="200" icon-name="enter-r" @update:model-value="pr_event" @operation_end="operation_end"></input-number>
</div>
</div>
</div>
@ -45,8 +45,11 @@ const state = reactive({
// 使toRefs
const { form } = toRefs(state);
const emit = defineEmits(['update:value']);
const emit = defineEmits(['update:value', 'operation_end']);
//
const operation_end = () => {
emit('operation_end');
};
const padding_event = (val: number | undefined) => {
form.value.padding = Number(val);
form.value.padding_top = Number(val);

View File

@ -2,7 +2,7 @@
<template>
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.radius" type="retract" @update:model-value="radius_event"></slider>
<slider v-model="form.radius" type="retract" @update:model-value="radius_event" @operation_end="operation_end"></slider>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>
@ -11,16 +11,16 @@
</div>
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
<div class="flex-width-half pr-10">
<input-number v-model="form.radius_top_left" icon-name="radius-l-t" @update:model-value="rtl_event"></input-number>
<input-number v-model="form.radius_top_left" icon-name="radius-l-t" @update:model-value="rtl_event" @operation_end="operation_end"></input-number>
</div>
<div class="flex-width-half pl-10">
<input-number v-model="form.radius_top_right" icon-name="radius-r-t" @update:model-value="rtr_event"></input-number>
<input-number v-model="form.radius_top_right" icon-name="radius-r-t" @update:model-value="rtr_event" @operation_end="operation_end"></input-number>
</div>
<div class="flex-width-half pr-10">
<input-number v-model="form.radius_bottom_left" icon-name="radius-l-b" @update:model-value="rbl_event"></input-number>
<input-number v-model="form.radius_bottom_left" icon-name="radius-l-b" @update:model-value="rbl_event" @operation_end="operation_end"></input-number>
</div>
<div class="flex-width-half pl-10">
<input-number v-model="form.radius_bottom_right" icon-name="radius-r-b" @update:model-value="rbr_event"></input-number>
<input-number v-model="form.radius_bottom_right" icon-name="radius-r-b" @update:model-value="rbr_event" @operation_end="operation_end"></input-number>
</div>
</div>
</div>
@ -58,7 +58,11 @@ const state = reactive({
// 使toRefs
const { form } = toRefs(state);
const emit = defineEmits(['update:value']);
const emit = defineEmits(['update:value', 'operation_end']);
//
const operation_end = () => {
emit('operation_end');
};
const radius_event = (val: number | undefined) => {
form.value.radius = Number(val);
form.value.radius_top_left = Number(val);

View File

@ -1,7 +1,7 @@
<template>
<div class="slider w">
<el-slider v-model="modelValue" :min="min" :max="max" :step="step" :show-stops="max <= 10" />
<input-number v-model="modelValue" :class="type == 'notRetract'? 'slider-input' : 'slider-retract-input'" :min="min" :max="max"></input-number>
<el-slider v-model="modelValue" :min="min" :max="max" :step="step" :show-stops="max <= 10" @change="operation_end" />
<input-number v-model="modelValue" :class="type == 'notRetract'? 'slider-input' : 'slider-retract-input'" :min="min" :max="max" @operation_end="operation_end"></input-number>
</div>
</template>
@ -25,6 +25,11 @@ const props = defineProps({
},
});
const modelValue = defineModel({ type: Number, default: 0 });
const emit = defineEmits(['operation_end']);
//
const operation_end = () => {
emit('operation_end');
};
</script>
<style lang="scss" scoped>
.slider {

View File

@ -9,7 +9,7 @@
<mult-color-picker :value="color_list" :type="direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="background_img_style"></bg-btn-style>
<bg-btn-style v-model="background_img_style" @operation_end="operation_end"></bg-btn-style>
</div>
<template v-if="componentType == 'carousel'">
<el-radio-group v-model="background_type">
@ -17,11 +17,11 @@
<el-radio value="carousel">轮播图片</el-radio>
</el-radio-group>
<template v-if="background_type == 'custom'">
<upload v-model="background_img" :limit="1"></upload>
<upload v-model="background_img" :limit="1" @update:model-value="operation_end"></upload>
</template>
</template>
<template v-else>
<upload v-model="background_img" :limit="1"></upload>
<upload v-model="background_img" :limit="1" @update:model-value="operation_end"></upload>
</template>
</div>
</template>
@ -56,8 +56,13 @@ const background_type = defineModel('type', {
type: String,
default: 'custom',
});
const emit = defineEmits(['mult_color_picker_event']);
const emit = defineEmits(['mult_color_picker_event', 'operation_end']);
const mult_color_picker_event = (arry: color_list[], type: number) => {
emit('mult_color_picker_event', arry, type);
operation_end();
};
const operation_end = () => {
emit('operation_end');
};
</script>

View File

@ -1,20 +1,20 @@
<template>
<el-form-item label="边框">
<el-switch v-model="border_show" active-value="1" inactive-value="0" />
<el-switch v-model="border_show" active-value="1" inactive-value="0" @change="operation_end" />
</el-form-item>
<template v-if="border_show == '1'">
<el-form-item v-if="typeList.includes('color')" label="边框颜色">
<color-picker v-model="border_color" :default-color="defaultColor"></color-picker>
<color-picker v-model="border_color" :default-color="defaultColor" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item v-if="typeList.includes('style')" label="边框样式">
<el-radio-group v-model="border_style">
<el-radio-group v-model="border_style" @change="operation_end">
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="typeList.includes('size')" label="边框粗细">
<padding :value="border_size" :max="100"></padding>
<padding :value="border_size" :max="100" @operation_end="operation_end"></padding>
</el-form-item>
</template>
</template>
@ -51,6 +51,12 @@ const border_size = defineModel('size', {
padding_right: 0,
},
});
const emit = defineEmits(['operation_end']);
//
const operation_end = () => {
emit('operation_end');
};
</script>
<style lang="scss" scoped>

View File

@ -1,11 +1,11 @@
<template>
<div class="mb-12">指示器设置</div>
<el-form-item label="是否显示">
<el-switch v-model="form.is_show" active-value="1" inactive-value="0"/>
<el-switch v-model="form.is_show" active-value="1" inactive-value="0" @change="operation_end"/>
</el-form-item>
<template v-if="form.is_show == '1'">
<el-form-item label="位置">
<el-radio-group v-model="form.indicator_new_location">
<el-radio-group v-model="form.indicator_new_location" @change="operation_end">
<el-radio value="top"></el-radio>
<el-radio value="bottom"></el-radio>
<el-radio value="left"></el-radio>
@ -13,14 +13,14 @@
</el-radio-group>
</el-form-item>
<el-form-item label="对齐方式">
<el-radio-group v-model="form.indicator_location">
<el-radio-group v-model="form.indicator_location" @change="operation_end">
<el-radio value="flex-start">{{ ['left', 'right'].includes(form.indicator_new_location) ? '上' : '左' }}对齐</el-radio>
<el-radio value="center">居中</el-radio>
<el-radio value="flex-end">{{ ['left', 'right'].includes(form.indicator_new_location) ? '下' : '右' }}对齐</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="样式">
<el-radio-group v-model="form.indicator_style" is-button>
<el-radio-group v-model="form.indicator_style" is-button @change="operation_end">
<el-tooltip content="点" placement="top" effect="dark">
<el-radio-button value="dot"><icon name="iconfont icon-ellipsis"></icon></el-radio-button>
</el-tooltip>
@ -39,13 +39,13 @@
</div>
</el-form-item>
<el-form-item label="大小">
<slider v-model="form.indicator_size" :max="100"></slider>
<slider v-model="form.indicator_size" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item v-if="isIndicatorBottom" label="边距">
<slider v-model="form.indicator_bottom" :min="0" :max="100"></slider>
<slider v-model="form.indicator_bottom" :min="0" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item v-if="form.indicator_style != 'num'" label="圆角">
<radius :value="form.indicator_radius"></radius>
<radius :value="form.indicator_radius" @operation_end="operation_end"></radius>
</el-form-item>
</template>
</template>
@ -86,5 +86,12 @@ const color_picker_change = (color: string, type: string) => {
} else {
form.value.color = color;
}
operation_end();
};
const emit = defineEmits(['operation_end']);
//
const operation_end = () => {
emit('operation_end');
};
</script>

View File

@ -5,30 +5,30 @@
<el-form :model="form" label-width="70">
<div class="mb-12">通用</div>
<el-form-item label="底部背景">
<background-common v-if="isMultBackground" v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
<background-common v-if="isMultBackground" v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" @operation_end="operation_end" />
<div v-else>
<color-picker v-model="form.color_list[0].color"></color-picker>
<color-picker v-model="form.color_list[0].color" @operation_end="operation_end"></color-picker>
</div>
</el-form-item>
<el-form-item v-if="isFloatingUp" label="组件上浮">
<slider v-model="form.floating_up" :min="0" :max="500"></slider>
<slider v-model="form.floating_up" :min="0" :max="500" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item v-if="isFloatingUp" label="组件层级">
<slider v-model="form.module_z_index" :min="0" :max="10"></slider>
<slider v-model="form.module_z_index" :min="0" :max="10" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form" :is-up-down="isUpDown"></padding>
<padding :value="form" :is-up-down="isUpDown" @operation_end="operation_end"></padding>
</el-form-item>
<el-form-item v-if="isMargin" label="外边距">
<margin :value="form"></margin>
<margin :value="form" @operation_end="operation_end"></margin>
</el-form-item>
<el-form-item v-if="isRadius" label="圆角">
<radius :value="form"></radius>
<radius :value="form" @operation_end="operation_end"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-if="isShowBorder" v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<border-config v-if="isShowBorder" v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size" @operation_end="operation_end"></border-config>
<!-- 阴影配置 -->
<shadow-config v-if="isShadow" v-model="form"></shadow-config>
<shadow-config v-if="isShadow" v-model="form" @operation_end="operation_end"></shadow-config>
</el-form>
</div>
</card-container>
@ -110,12 +110,16 @@ const props = defineProps({
});
// value
let form = ref(props.value);
const emit = defineEmits(['update:value']);
const emit = defineEmits(['update:value', 'operation_end']);
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
//
const operation_end = () => {
emit('operation_end');
};
</script>
<style lang="scss" scoped>
.common-styles {

View File

@ -2,7 +2,7 @@
<card-container>
<div class="mb-12">条件设置</div>
<el-form-item label="条件字段">
<el-select v-model="form.condition.field" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1">
<el-select v-model="form.condition.field" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="operation_end">
<el-option v-for="item in options" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -13,12 +13,12 @@
</el-form-item>
<template v-if="['greater-than', 'less-than', 'equal'].includes(form.condition.type)">
<el-form-item label="条件内容">
<input-number v-model="form.condition.value" class="w h"></input-number>
<input-number v-model="form.condition.value" class="w h" @operation_end="operation_end"></input-number>
</el-form-item>
</template>
<template v-else-if="['contains', 'does-not-contain'].includes(form.condition.type)">
<el-form-item label="条件内容">
<el-input v-model="form.condition.value" placeholder="请输入内容" />
<el-input v-model="form.condition.value" placeholder="请输入内容" @blur="operation_end" />
</el-form-item>
</template>
</card-container>
@ -43,6 +43,12 @@ const judge_change = (val: string) => {
} else {
form.value.condition.value = '';
}
operation_end();
};
//
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
};
const judge_list = [

View File

@ -2,14 +2,19 @@
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="data_location.x" :max="390"></slider>
<slider v-model="data_location.x" :max="390" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="data_location.y" :max="1000"></slider>
<slider v-model="data_location.y" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
</card-container>
</template>
<script lang="ts" setup>
const data_location = defineModel({ type: Object, default: () => ({ x: 0, y: 0 }) });
const emit = defineEmits(['operation_end']);
//
const operation_end = () => {
emit('operation_end');
};
</script>

View File

@ -1,13 +1,18 @@
<template>
<card-container>
<div class="mb-20">显示设置</div>
<el-form-item label="数据来源">
<!-- <el-radio-group v-model="form.data_source_type" @change="operation_end">
<el-radio v-for="(item, index) in default_type_data?.data_source" :key="index" :value="item">{{ item }}</el-radio>
</el-radio-group> -->
</el-form-item>
<el-form-item label="铺满方式">
<el-radio-group v-model="form.data_source_direction">
<el-radio-group v-model="form.data_source_direction" @change="operation_end">
<el-radio v-for="(item, index) in default_type_data?.show_type" :key="index" :value="item">{{ item == 'vertical' ? '' : item == 'vertical-scroll' ? '' : '' }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="每屏显示">
<el-radio-group v-model="form.data_source_carousel_col">
<el-radio-group v-model="form.data_source_carousel_col" @change="operation_end">
<el-radio v-for="(item, index) in default_type_data?.show_number" :key="index" :value="item">{{ item }}{{ form.data_source_direction == 'vertical-scroll' ? '' : '' }}</el-radio>
</el-radio-group>
</el-form-item>
@ -30,10 +35,14 @@ const default_type_data = {
show_type: ['vertical', 'vertical-scroll', 'horizontal-scroll'],
show_number: [1, 2, 3, 4],
};
const emit = defineEmits(['custom_edit']);
const emit = defineEmits(['custom_edit', 'operation_end']);
const custom_edit = () => {
emit('custom_edit');
};
//
const operation_end = () => {
emit('operation_end');
};
</script>
<style lang="scss" scoped>
.card-background {

View File

@ -1,26 +1,26 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location"></custom-location>
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="390"></slider>
<slider v-model="form.com_width" :max="390" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="容器高度">
<slider v-model="form.com_height" :max="1000"></slider>
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options"></condition-config>
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<custom-tabs-content :value="form" @custom_edit="custom_edit"></custom-tabs-content>
<custom-tabs-content :value="form" @custom_edit="custom_edit" @operation_end="operation_end"></custom-tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<model-custom-styles :value="form.data_style" :content="form" :is-floating-up="false"></model-custom-styles>
<model-custom-styles :value="form.data_style" :content="form" :is-floating-up="false" @operation_end="operation_end"></model-custom-styles>
</el-tab-pane>
</el-tabs>
</el-form>
@ -48,7 +48,7 @@ const state = reactive({
const { diy_data } = toRefs(state);
const form = ref(diy_data.value.com_data);
//#region
const emit = defineEmits(['custom_edit']);
const emit = defineEmits(['custom_edit', 'operation_end']);
const custom_edit = () => {
const { custom_list, com_width, custom_height } = form.value;
//
@ -56,6 +56,10 @@ const custom_edit = () => {
emit('custom_edit', diy_data.value.id, custom_list, width, custom_height);
};
//# endregion
//
const operation_end = () => {
emit('operation_end');
};
//#region
//
watch(

View File

@ -1,7 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location"></custom-location>
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">文本设置</div>
@ -22,13 +22,13 @@
</el-select>
</el-form-item>
<el-form-item label="图标颜色">
<color-picker v-model="form.icon_color" default-color="#FF3F3F"></color-picker>
<color-picker v-model="form.icon_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item label="图标大小">
<slider v-model="form.icon_size" :max="100"></slider>
<slider v-model="form.icon_size" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="图标位置">
<el-radio-group v-model="form.icon_location" is-button>
<el-radio-group v-model="form.icon_location" is-button @change="operation_end">
<el-tooltip content="左对齐" placement="top" effect="dark">
<el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
</el-tooltip>
@ -41,10 +41,10 @@
</el-radio-group>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.icon_padding" @update:value="padding_change"></padding>
<padding :value="form.icon_padding" @update:value="padding_change" @operation_end="operation_end"></padding>
</el-form-item>
<el-form-item label="旋转角度">
<slider v-model="form.icon_rotate" :max="1000"></slider>
<slider v-model="form.icon_rotate" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
@ -54,39 +54,39 @@
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="1000"></slider>
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="容器高度">
<slider v-model="form.com_height" :max="1000"></slider>
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="背景颜色">
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.bg_radius"></radius>
<radius :value="form.bg_radius" @operation_end="operation_end"></radius>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options"></condition-config>
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" @change="operation_end"/>
</el-form-item>
<template v-if="form.border_show == '1'">
<el-form-item label="边框颜色">
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
<color-picker v-model="form.border_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item label="边框样式">
<el-radio-group v-model="form.border_style">
<el-radio-group v-model="form.border_style" @change="operation_end">
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.border_size" :max="100"></slider>
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
</template>
</card-container>
@ -126,6 +126,7 @@ const icon_change = (key: string) => {
} else {
form.value.data_source_field = get_data_fields([], 'icon', '');
}
operation_end();
};
const link_change = (key: string) => {
if (key == '2') {
@ -134,10 +135,17 @@ const link_change = (key: string) => {
} else {
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
operation_end();
};
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
operation_end();
};
//
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
};
//#region
//

View File

@ -1,7 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location"></custom-location>
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">图片设置</div>
@ -22,45 +22,45 @@
</el-select>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
<radius :value="form.img_radius" @operation_end="operation_end"></radius>
</el-form-item>
<el-form-item label="图片宽度">
<slider v-model="form.img_width" :max="1000"></slider>
<slider v-model="form.img_width" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.img_height" :max="1000"></slider>
<slider v-model="form.img_height" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="旋转角度">
<slider v-model="form.img_rotate" :max="1000"></slider>
<slider v-model="form.img_rotate" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item> -->
</card-container>
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options"></condition-config>
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<card-container class="h">
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" @change="operation_end" />
</el-form-item>
<template v-if="form.border_show == '1'">
<el-form-item label="边框颜色">
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
<color-picker v-model="form.border_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item label="边框样式">
<el-radio-group v-model="form.border_style">
<el-radio-group v-model="form.border_style" @change="operation_end">
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="边框圆角">
<radius :value="form.border_radius"></radius>
<radius :value="form.border_radius" @operation_end="operation_end"></radius>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.border_size" :max="100"></slider>
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
</template>
</card-container>
@ -96,6 +96,7 @@ const img_src_change = (key: string) => {
} else {
form.value.data_source_field = get_data_fields([], 'images', '');
}
operation_end();
}
//
const img_link_change = (key: string) => {
@ -105,7 +106,13 @@ const img_link_change = (key: string) => {
} else {
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
operation_end();
}
//
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
};
//#region
//
watch(

View File

@ -1,18 +1,18 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location"></custom-location>
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container class="">
<div class="mb-12">线条设置</div>
<el-form-item label="竖线横线">
<el-radio-group v-model="form.line_settings">
<el-radio-group v-model="form.line_settings" @change="operation_end">
<el-radio value="horizontal">横线</el-radio>
<el-radio value="vertical">竖线</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="线条样式">
<el-radio-group v-model="form.line_style">
<el-radio-group v-model="form.line_style" @change="operation_end">
<el-radio value="dashed">
<icon name="line-point" class="re top-2" size="32"></icon>
</el-radio>
@ -25,20 +25,20 @@
</el-radio-group>
</el-form-item>
<el-form-item :label="form.line_settings === 'horizontal' ? '线条宽度' : '线条高度'">
<slider v-model="form.line_width" :max="1000"></slider>
<slider v-model="form.line_width" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="线条粗细">
<slider v-model="form.line_size" :min="1" :max="100"></slider>
<slider v-model="form.line_size" :min="1" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="线条颜色">
<color-picker v-model="form.line_color"></color-picker>
<color-picker v-model="form.line_color" @operation_end="operation_end"></color-picker>
</el-form-item>
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item> -->
</card-container>
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options"></condition-config>
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
</el-form>
</div>
</template>
@ -64,6 +64,12 @@ const { diy_data } = toRefs(state);
const form = ref(diy_data.value.com_data);
const center_height = defineModel("height", { type: Number, default: 0 })
//
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
};
//#region
//
watch(diy_data, (val) => {

View File

@ -1,12 +1,12 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location"></custom-location>
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="链接">
<url-value v-model="form.link"></url-value>
<url-value v-model="form.link" @update:model-value="img_link_change('1')"></url-value>
</el-form-item>
<el-form-item label="数据链接">
<el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
@ -14,38 +14,38 @@
</el-select>
</el-form-item>
<el-form-item label="背景颜色">
<background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
<background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" @operation_end="operation_end"/>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.bg_radius"></radius>
<radius :value="form.bg_radius" @operation_end="operation_end"></radius>
</el-form-item>
<el-form-item label="旋转角度">
<slider v-model="form.panel_rotate" :max="1000"></slider>
<slider v-model="form.panel_rotate" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item> -->
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="1000"></slider>
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="容器高度">
<slider v-model="form.com_height" :max="1000"></slider>
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options"></condition-config>
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" />
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" @change="operation_end"/>
</el-form-item>
<template v-if="form.border_show == '1'">
<el-form-item label="边框颜色">
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
<color-picker v-model="form.border_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item label="边框样式">
<el-radio-group v-model="form.border_style">
<el-radio-group v-model="form.border_style" @change="operation_end">
<el-radio value="dashed">
<div class="border-style-item" style="border: 1px dashed #979797"></div>
</el-radio>
@ -58,7 +58,7 @@
</el-radio-group>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.border_size" :max="100"></slider>
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
</template>
</card-container>
@ -101,7 +101,12 @@ const img_link_change = (key: string) => {
} else {
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
operation_end();
}
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
};
// #region
//
watch(

View File

@ -1,21 +1,21 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location"></custom-location>
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">文本设置</div>
<el-form-item label="文本标题">
<el-input v-model="form.text_captions" placeholder="请输入文本内容" type="input" clearable></el-input>
<el-input v-model="form.text_captions" placeholder="请输入文本内容" type="input" clearable @blur="operation_end"></el-input>
</el-form-item>
<el-form-item label="文本内容">
<div class="flex-row gap-5 align-s w">
<el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
<el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @blur="operation_end" @input="text_change('1')"></el-input>
<el-button @click="copy_field"></el-button>
</div>
</el-form-item>
<el-form-item label="数据字段">
<el-select v-model="form.data_source_field.id" value-key="id" multiple collapse-tags clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')">
<el-select v-model="form.data_source_field.id" value-key="id" multiple collapse-tags clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')" @blur="operation_end">
<el-option v-for="item in options.filter((item) => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -28,16 +28,16 @@
</el-select>
</el-form-item>
<el-form-item label="富文本">
<el-switch v-model="form.is_rich_text" active-value="1" inactive-value="0" />
<el-switch v-model="form.is_rich_text" active-value="1" inactive-value="0" @change="operation_end" />
</el-form-item>
<el-form-item v-if="form.is_rich_text == '1'" label="上下滚动">
<el-switch v-model="form.is_up_down" active-value="1" inactive-value="0" />
<el-switch v-model="form.is_up_down" active-value="1" inactive-value="0" @change="operation_end" />
</el-form-item>
<el-form-item label="文字颜色">
<color-picker v-model="form.text_color" default-color="#FF3F3F"></color-picker>
<color-picker v-model="form.text_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item label="文字大小">
<el-radio-group v-model="form.text_weight">
<el-radio-group v-model="form.text_weight" @change="operation_end">
<el-radio value="500">加粗</el-radio>
<el-radio value="normal">正常</el-radio>
<el-radio value="italic">倾斜</el-radio>
@ -46,18 +46,18 @@
<slider v-model="form.text_size" :max="100" @update:model-value="text_size_change"></slider>
</el-form-item>
<el-form-item label="行间距" label-width="50" class="mb-0 w">
<slider v-model="form.line_text_size" :max="200"></slider>
<slider v-model="form.line_text_size" :max="200" @operation_end="operation_end"></slider>
</el-form-item>
</el-form-item>
<el-form-item label="字符选项">
<el-radio-group v-model="form.text_option">
<el-radio-group v-model="form.text_option" @change="operation_end">
<el-radio value="none"><span style="text-decoration: none">Aa</span></el-radio>
<el-radio value="underline"><span style="text-decoration: underline">Aa</span></el-radio>
<el-radio value="line-through"><span style="text-decoration: line-through">Aa</span></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="文字位置">
<el-radio-group v-model="form.text_location" is-button>
<el-radio-group v-model="form.text_location" is-button @change="operation_end">
<el-tooltip content="左对齐" placement="top" effect="dark">
<el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
</el-tooltip>
@ -70,49 +70,49 @@
</el-radio-group>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.text_padding" @update:value="padding_change"></padding>
<padding :value="form.text_padding" @operation_end="operation_end"></padding>
</el-form-item>
<el-form-item label="旋转角度">
<slider v-model="form.text_rotate" :max="1000"></slider>
<slider v-model="form.text_rotate" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="1000"></slider>
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="容器高度">
<slider v-model="form.com_height" :max="1000"></slider>
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="背景颜色">
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.bg_radius"></radius>
<radius :value="form.bg_radius" @operation_end="operation_end"></radius>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<condition-config :value="form" :options="options"></condition-config>
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" @change="operation_end"/>
</el-form-item>
<template v-if="form.border_show == '1'">
<el-form-item label="边框颜色">
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
<color-picker v-model="form.border_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item label="边框样式">
<el-radio-group v-model="form.border_style">
<el-radio-group v-model="form.border_style" @change="operation_end">
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.border_size" :max="100"></slider>
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
</template>
</card-container>
@ -141,10 +141,6 @@ const state = reactive({
const { diy_data } = toRefs(state);
const form = ref(diy_data.value.com_data);
const center_height = defineModel('height', { type: Number, default: 0 });
const padding_change = (padding: any) => {
form.value.text_padding = Object.assign(form.value.text_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
};
//
onBeforeMount(() => {
if (typeof form.value.line_text_size != 'number') {
@ -179,20 +175,28 @@ const text_link_change = (key: string) => {
} else {
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
operation_end();
};
//
const text_size_change = (size: number) => {
form.value.line_text_size = size;
operation_end();
};
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
operation_end();
};
//
const copy_field_visiable = ref(false);
const copy_field = () => {
copy_field_visiable.value = true;
};
//
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
};
// #region
//
watch(

View File

@ -2,19 +2,19 @@
<el-form-item label="阴影设置">
<div class="flex-col gap-10 w">
<el-form-item label="颜色" label-width="45">
<color-picker v-model="form.box_shadow_color"></color-picker>
<color-picker v-model="form.box_shadow_color" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item label="X轴" label-width="45">
<slider v-model="form.box_shadow_x" :min="-20" :max="20"></slider>
<slider v-model="form.box_shadow_x" :min="-20" :max="20" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="Y轴" label-width="45">
<slider v-model="form.box_shadow_y" :min="-20" :max="20"></slider>
<slider v-model="form.box_shadow_y" :min="-20" :max="20" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="模糊" label-width="45">
<slider v-model="form.box_shadow_blur"></slider>
<slider v-model="form.box_shadow_blur" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="扩展" label-width="45">
<slider v-model="form.box_shadow_spread"></slider>
<slider v-model="form.box_shadow_spread" @operation_end="operation_end"></slider>
</el-form-item>
</div>
</el-form-item>
@ -22,4 +22,10 @@
<script setup lang="ts">
const form = defineModel({ type: Object, default: {}, required: true})
//
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
};
</script>

View File

@ -631,7 +631,7 @@ const del_icon_event = () => {
icon_value.value = '';
};
//#endregion ----------------------------------------------------------end
const emit = defineEmits(['update:icon']);
const emit = defineEmits(['update:icon', 'operation_end']);
//
const confirm_event = () => {
dialog_visible.value = false;
@ -661,6 +661,11 @@ const confirm_event = () => {
search_filter.value = '';
is_replace.value = false;
replace_index.value = -1;
operation_end();
};
//
const operation_end = () => {
emit('operation_end');
};
//
const is_replace = ref(false);

View File

@ -6,22 +6,22 @@
<!-- 右侧配置区域 -->
<div class="settings">
<template v-if="diy_data.key === 'img'">
<model-image-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-image-style>
<model-image-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-image-style>
</template>
<template v-else-if="diy_data.key == 'text'">
<model-text-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-text-style>
<model-text-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-text-style>
</template>
<template v-else-if="diy_data.key == 'auxiliary-line'">
<model-lines-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-lines-style>
<model-lines-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-lines-style>
</template>
<template v-else-if="diy_data.key == 'icon'">
<model-icon-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-icon-style>
<model-icon-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-icon-style>
</template>
<template v-else-if="diy_data.key == 'panel'">
<model-panel-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-panel-style>
<model-panel-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-panel-style>
</template>
<template v-else-if="diy_data.key == 'custom-group' && configType == 'custom'">
<model-custom-group-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @custom_edit="custom_edit"></model-custom-group-style>
<model-custom-group-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @custom_edit="custom_edit" @operation_end="operation_end"></model-custom-group-style>
</template>
<template v-else>
<div class="w h flex align-c bg-f">
@ -126,6 +126,9 @@ const custom_edit = (id: string, list: diy, width: number, height: number) => {
}
emits('custom_edit', 'custom-group', id, father_list, list, width, height);
};
const operation_end = () => {
console.log('操作结束');
}
</script>
<style lang="scss" scoped>

View File

@ -425,7 +425,7 @@ const data_list_index_update = () => {
}
};
//
let data_source_content_list = computed(() => {
const data_source_content_list = computed(() => {
if (form.value.is_custom_data == '1') {
if (Number(form.value.data_source_content.data_type) === 0) {
return form.value.data_source_content.data_list;

View File

@ -5,14 +5,14 @@
<card-container>
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" @change="operation_end"/>
</el-form-item>
<template v-if="form.is_roll == '1'">
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
<slider v-model="form.interval_time" :min="1" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio-group v-model="form.rolling_fashion" @change="operation_end">
<el-radio value="translation">平移</el-radio>
<el-radio value="cut-screen">切屏</el-radio>
</el-radio-group>
@ -21,62 +21,62 @@
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<carousel-indicator :value="form"></carousel-indicator>
<carousel-indicator :value="form" @operation_end="operation_end"></carousel-indicator>
</card-container>
<div class="bg-f5 divider-line" />
</template>
<card-container>
<div class="mb-12">数据样式</div>
<el-form-item label="背景">
<background-common v-model:color_list="form.data_style.color_list" v-model:direction="form.data_style.direction" v-model:img_style="form.data_style.background_img_style" v-model:img="form.data_style.background_img" @mult_color_picker_event="mult_color_picker_event" />
<background-common v-model:color_list="form.data_style.color_list" v-model:direction="form.data_style.direction" v-model:img_style="form.data_style.background_img_style" v-model:img="form.data_style.background_img" @mult_color_picker_event="mult_color_picker_event" @operation_end="operation_end" />
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.data_style"></margin>
<margin :value="form.data_style" @operation_end="operation_end"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.data_style"></padding>
<padding :value="form.data_style" @operation_end="operation_end"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.data_style"></radius>
<radius :value="form.data_style" @operation_end="operation_end"></radius>
</el-form-item>
<el-form-item label="数据间距">
<div class="flex-col w h gap-10">
<el-form-item v-if="['vertical', 'horizontal'].includes(data.data_source_direction)" label="横向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.column_gap" :max="100"></slider>
<slider v-model="form.column_gap" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item v-if="['vertical', 'vertical-scroll'].includes(data.data_source_direction)" label="纵向" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.row_gap" :max="100"></slider>
<slider v-model="form.row_gap" :max="100" @operation_end="operation_end"></slider>
</el-form-item>
</div>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.data_style.border_is_show" v-model:color="form.data_style.border_color" v-model:style="form.data_style.border_style" v-model:size="form.data_style.border_size"></border-config>
<border-config v-model:show="form.data_style.border_is_show" v-model:color="form.data_style.border_color" v-model:style="form.data_style.border_style" v-model:size="form.data_style.border_size" @operation_end="operation_end"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.data_style"></shadow-config>
<shadow-config v-model="form.data_style" @operation_end="operation_end"></shadow-config>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">内容样式</div>
<el-form-item label="背景">
<background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" />
<background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" @operation_end="operation_end" />
</el-form-item>
<el-form-item label="外间距">
<margin :value="form.data_content_style"></margin>
<margin :value="form.data_content_style" @operation_end="operation_end"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.data_content_style"></padding>
<padding :value="form.data_content_style" @operation_end="operation_end"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.data_content_style"></radius>
<radius :value="form.data_content_style" @operation_end="operation_end"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size"></border-config>
<border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size" @operation_end="operation_end"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.data_content_style"></shadow-config>
<shadow-config v-model="form.data_content_style" @operation_end="operation_end"></shadow-config>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />
<common-styles :value="form.common_style" :is-floating-up="isFloatingUp" />
<common-styles :value="form.common_style" :is-floating-up="isFloatingUp" @operation_end="operation_end"/>
</div>
</template>
<script setup lang="ts">
@ -110,6 +110,11 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.data_style.color_list = arry;
form.value.data_style.direction = type.toString();
}
const emit = defineEmits(['operation_end']);
//
const operation_end = () => {
emit('operation_end');
};
</script>
<style lang="scss" scoped>
.topic {