diff --git a/package-lock.json b/package-lock.json
index 257edcac..b12ce9af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 6cc9be02..ff16effd 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/base/bg-btn-style/index.vue b/src/components/base/bg-btn-style/index.vue
index 4455ef0f..5b7b214c 100644
--- a/src/components/base/bg-btn-style/index.vue
+++ b/src/components/base/bg-btn-style/index.vue
@@ -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>
diff --git a/src/components/base/color-picker/index.vue b/src/components/base/color-picker/index.vue
index d64a8e4a..de1ab86f 100644
--- a/src/components/base/color-picker/index.vue
+++ b/src/components/base/color-picker/index.vue
@@ -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>
diff --git a/src/components/base/input-number/index.vue b/src/components/base/input-number/index.vue
index d997f6e8..20e2a397 100644
--- a/src/components/base/input-number/index.vue
+++ b/src/components/base/input-number/index.vue
@@ -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 {
diff --git a/src/components/base/margin/index.vue b/src/components/base/margin/index.vue
index 8d440a1c..57c2b7ff 100644
--- a/src/components/base/margin/index.vue
+++ b/src/components/base/margin/index.vue
@@ -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);
diff --git a/src/components/base/padding/index.vue b/src/components/base/padding/index.vue
index 6ca932cf..0eb5aba2 100644
--- a/src/components/base/padding/index.vue
+++ b/src/components/base/padding/index.vue
@@ -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);
diff --git a/src/components/base/radius/index.vue b/src/components/base/radius/index.vue
index 960d094b..1c4dacc1 100644
--- a/src/components/base/radius/index.vue
+++ b/src/components/base/radius/index.vue
@@ -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);
diff --git a/src/components/base/slider/index.vue b/src/components/base/slider/index.vue
index 28fa4c65..99784f44 100644
--- a/src/components/base/slider/index.vue
+++ b/src/components/base/slider/index.vue
@@ -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 {
diff --git a/src/components/common/background-common/index.vue b/src/components/common/background-common/index.vue
index 71e1f20e..37f9f57c 100644
--- a/src/components/common/background-common/index.vue
+++ b/src/components/common/background-common/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/common/border-config/index.vue b/src/components/common/border-config/index.vue
index 25e7192d..a32d7816 100644
--- a/src/components/common/border-config/index.vue
+++ b/src/components/common/border-config/index.vue
@@ -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>
diff --git a/src/components/common/carousel-indicator/index.vue b/src/components/common/carousel-indicator/index.vue
index 5c489d5b..d2cb69f5 100644
--- a/src/components/common/carousel-indicator/index.vue
+++ b/src/components/common/carousel-indicator/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 2abe1a74..bb5c0768 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -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 {
diff --git a/src/components/common/custom-module/condition-config/index.vue b/src/components/common/custom-module/condition-config/index.vue
index 84462296..6570a3ac 100644
--- a/src/components/common/custom-module/condition-config/index.vue
+++ b/src/components/common/custom-module/condition-config/index.vue
@@ -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 = [
diff --git a/src/components/common/custom-module/custom-location/index.vue b/src/components/common/custom-module/custom-location/index.vue
index 1dd9658e..79e15e48 100644
--- a/src/components/common/custom-module/custom-location/index.vue
+++ b/src/components/common/custom-module/custom-location/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/common/custom-module/model-custom-group/custom-tabs-config/custom-tabs-content.vue b/src/components/common/custom-module/model-custom-group/custom-tabs-config/custom-tabs-content.vue
index 8a37abaa..0ab14b64 100644
--- a/src/components/common/custom-module/model-custom-group/custom-tabs-config/custom-tabs-content.vue
+++ b/src/components/common/custom-module/model-custom-group/custom-tabs-config/custom-tabs-content.vue
@@ -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 {
diff --git a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
index 44149472..699f5d96 100644
--- a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
+++ b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
@@ -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(
diff --git a/src/components/common/custom-module/model-icon/model-icon-style.vue b/src/components/common/custom-module/model-icon/model-icon-style.vue
index 3748a1c6..6dd9897b 100644
--- a/src/components/common/custom-module/model-icon/model-icon-style.vue
+++ b/src/components/common/custom-module/model-icon/model-icon-style.vue
@@ -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 位置计算
 // 监听数据变化
diff --git a/src/components/common/custom-module/model-image/model-image-style.vue b/src/components/common/custom-module/model-image/model-image-style.vue
index 7d0f56a4..5e2539dc 100644
--- a/src/components/common/custom-module/model-image/model-image-style.vue
+++ b/src/components/common/custom-module/model-image/model-image-style.vue
@@ -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(
diff --git a/src/components/common/custom-module/model-lines/model-lines-style.vue b/src/components/common/custom-module/model-lines/model-lines-style.vue
index bc817d75..29ee6b3a 100644
--- a/src/components/common/custom-module/model-lines/model-lines-style.vue
+++ b/src/components/common/custom-module/model-lines/model-lines-style.vue
@@ -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) => {
diff --git a/src/components/common/custom-module/model-panel/model-panel-style.vue b/src/components/common/custom-module/model-panel/model-panel-style.vue
index d1f614fb..87e8b758 100644
--- a/src/components/common/custom-module/model-panel/model-panel-style.vue
+++ b/src/components/common/custom-module/model-panel/model-panel-style.vue
@@ -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(
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index d1b01283..547b3584 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -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(
diff --git a/src/components/common/shadow-config/index.vue b/src/components/common/shadow-config/index.vue
index eee83f23..d7675831 100644
--- a/src/components/common/shadow-config/index.vue
+++ b/src/components/common/shadow-config/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/common/upload/index.vue b/src/components/common/upload/index.vue
index 4d676268..5053d317 100644
--- a/src/components/common/upload/index.vue
+++ b/src/components/common/upload/index.vue
@@ -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);
diff --git a/src/components/model-custom/components/custom-config/index.vue b/src/components/model-custom/components/custom-config/index.vue
index ced10b4e..5ddbf64c 100644
--- a/src/components/model-custom/components/custom-config/index.vue
+++ b/src/components/model-custom/components/custom-config/index.vue
@@ -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>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 33170341..52bf90af 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -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;
diff --git a/src/components/model-custom/model-custom-styles.vue b/src/components/model-custom/model-custom-styles.vue
index c349d203..e6c986bc 100644
--- a/src/components/model-custom/model-custom-styles.vue
+++ b/src/components/model-custom/model-custom-styles.vue
@@ -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 {