Merge branch 'wang' of ASJ_ADS/ads_web into master

package-lock.json

@@ -68,6 +68,8 @@
 				"prettier": "^2.8.1",
 				"sass": "^1.56.2",
 				"typescript": "^4.9.4",
+				"unplugin-auto-import": "^0.16.6",
+				"unplugin-vue-components": "^0.25.2",
 				"vite": "^4.0.0",
 				"vite-plugin-vue-setup-extend": "^0.4.0",
 				"vue-eslint-parser": "^9.1.0"
@@ -106,6 +108,12 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/@antfu/utils": {
+			"version": "0.7.6",
+			"resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.6.tgz",
+			"integrity": "sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==",
+			"dev": true
+		},
 		"node_modules/@aws-crypto/crc32": {
 			"version": "3.0.0",
 			"license": "Apache-2.0",
@@ -2890,6 +2898,28 @@
 				"url": "https://opencollective.com/popperjs"
 			}
 		},
+		"node_modules/@rollup/pluginutils": {
+			"version": "5.0.5",
+			"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz",
+			"integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==",
+			"dev": true,
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"estree-walker": "^2.0.2",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@smithy/abort-controller": {
 			"version": "2.0.11",
 			"license": "Apache-2.0",
@@ -3522,6 +3552,12 @@
 			"version": "0.0.7",
 			"license": "MIT"
 		},
+		"node_modules/@types/estree": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.2.tgz",
+			"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
+			"dev": true
+		},
 		"node_modules/@types/event-emitter": {
 			"version": "0.3.3",
 			"license": "MIT"
@@ -6402,6 +6438,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/jsonc-parser": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+			"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+			"dev": true
+		},
 		"node_modules/jsoneditor": {
 			"version": "9.10.3",
 			"license": "Apache-2.0",
@@ -6474,6 +6516,15 @@
 			"version": "1.2.4",
 			"license": "MIT"
 		},
+		"node_modules/local-pkg": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
+			"integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
 			"dev": true,
@@ -6653,6 +6704,18 @@
 				"mkdirp": "bin/cmd.js"
 			}
 		},
+		"node_modules/mlly": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.4.2.tgz",
+			"integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
+			"dev": true,
+			"dependencies": {
+				"acorn": "^8.10.0",
+				"pathe": "^1.1.1",
+				"pkg-types": "^1.0.3",
+				"ufo": "^1.3.0"
+			}
+		},
 		"node_modules/mobius1-selectr": {
 			"version": "2.4.13",
 			"license": "MIT"
@@ -7027,6 +7090,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/pathe": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.1.tgz",
+			"integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+			"dev": true
+		},
 		"node_modules/pause-stream": {
 			"version": "0.0.11",
 			"license": [
@@ -7157,6 +7226,17 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/pkg-types": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz",
+			"integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+			"dev": true,
+			"dependencies": {
+				"jsonc-parser": "^3.2.0",
+				"mlly": "^1.2.0",
+				"pathe": "^1.1.0"
+			}
+		},
 		"node_modules/platform": {
 			"version": "1.3.6",
 			"license": "MIT"
@@ -7640,6 +7720,12 @@
 				"compute-scroll-into-view": "^1.0.20"
 			}
 		},
+		"node_modules/scule": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmmirror.com/scule/-/scule-1.0.0.tgz",
+			"integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+			"dev": true
+		},
 		"node_modules/sdk-base": {
 			"version": "2.0.1",
 			"license": "MIT",
@@ -7915,6 +8001,15 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/strip-literal": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-1.3.0.tgz",
+			"integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
+			"dev": true,
+			"dependencies": {
+				"acorn": "^8.10.0"
+			}
+		},
 		"node_modules/strnum": {
 			"version": "1.0.5",
 			"license": "MIT"
@@ -8146,6 +8241,12 @@
 				"node": ">=4.2.0"
 			}
 		},
+		"node_modules/ufo": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.3.1.tgz",
+			"integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
+			"dev": true
+		},
 		"node_modules/unescape": {
 			"version": "1.0.1",
 			"license": "MIT",
@@ -8156,6 +8257,153 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/unimport": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.4.0.tgz",
+			"integrity": "sha512-M/lfFEgufIT156QAr/jWHLUn55kEmxBBiQsMxvRSIbquwmeJEyQYgshHDEvQDWlSJrVOOTAgnJ3FvlsrpGkanA==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.4",
+				"escape-string-regexp": "^5.0.0",
+				"fast-glob": "^3.3.1",
+				"local-pkg": "^0.4.3",
+				"magic-string": "^0.30.3",
+				"mlly": "^1.4.2",
+				"pathe": "^1.1.1",
+				"pkg-types": "^1.0.3",
+				"scule": "^1.0.0",
+				"strip-literal": "^1.3.0",
+				"unplugin": "^1.5.0"
+			}
+		},
+		"node_modules/unimport/node_modules/escape-string-regexp": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+			"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/unplugin": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.5.0.tgz",
+			"integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
+			"dev": true,
+			"dependencies": {
+				"acorn": "^8.10.0",
+				"chokidar": "^3.5.3",
+				"webpack-sources": "^3.2.3",
+				"webpack-virtual-modules": "^0.5.0"
+			}
+		},
+		"node_modules/unplugin-auto-import": {
+			"version": "0.16.6",
+			"resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.16.6.tgz",
+			"integrity": "sha512-M+YIITkx3C/Hg38hp8HmswP5mShUUyJOzpifv7RTlAbeFlO2Tyw0pwrogSSxnipHDPTtI8VHFBpkYkNKzYSuyA==",
+			"dev": true,
+			"dependencies": {
+				"@antfu/utils": "^0.7.5",
+				"@rollup/pluginutils": "^5.0.2",
+				"fast-glob": "^3.3.0",
+				"local-pkg": "^0.4.3",
+				"magic-string": "^0.30.1",
+				"minimatch": "^9.0.2",
+				"unimport": "^3.0.14",
+				"unplugin": "^1.3.2"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"peerDependencies": {
+				"@nuxt/kit": "^3.2.2",
+				"@vueuse/core": "*"
+			},
+			"peerDependenciesMeta": {
+				"@nuxt/kit": {
+					"optional": true
+				},
+				"@vueuse/core": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/unplugin-auto-import/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/unplugin-auto-import/node_modules/minimatch": {
+			"version": "9.0.3",
+			"resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
+			"integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/unplugin-vue-components": {
+			"version": "0.25.2",
+			"resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz",
+			"integrity": "sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==",
+			"dev": true,
+			"dependencies": {
+				"@antfu/utils": "^0.7.5",
+				"@rollup/pluginutils": "^5.0.2",
+				"chokidar": "^3.5.3",
+				"debug": "^4.3.4",
+				"fast-glob": "^3.3.0",
+				"local-pkg": "^0.4.3",
+				"magic-string": "^0.30.1",
+				"minimatch": "^9.0.3",
+				"resolve": "^1.22.2",
+				"unplugin": "^1.4.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"peerDependencies": {
+				"@babel/parser": "^7.15.8",
+				"@nuxt/kit": "^3.2.2",
+				"vue": "2 || 3"
+			},
+			"peerDependenciesMeta": {
+				"@babel/parser": {
+					"optional": true
+				},
+				"@nuxt/kit": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/unplugin-vue-components/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/unplugin-vue-components/node_modules/minimatch": {
+			"version": "9.0.3",
+			"resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
+			"integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.0.13",
 			"funding": [
@@ -8572,6 +8820,21 @@
 				"xe-utils": "^3.5.0"
 			}
 		},
+		"node_modules/webpack-sources": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
+			"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/webpack-virtual-modules": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+			"integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
+			"dev": true
+		},
 		"node_modules/which": {
 			"version": "2.0.2",
 			"license": "ISC",
@@ -8870,6 +9133,12 @@
 				"@jridgewell/trace-mapping": "^0.3.9"
 			}
 		},
+		"@antfu/utils": {
+			"version": "0.7.6",
+			"resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.6.tgz",
+			"integrity": "sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==",
+			"dev": true
+		},
 		"@aws-crypto/crc32": {
 			"version": "3.0.0",
 			"requires": {
@@ -10892,6 +11161,17 @@
 		"@popperjs/core": {
 			"version": "2.11.8"
 		},
+		"@rollup/pluginutils": {
+			"version": "5.0.5",
+			"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz",
+			"integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==",
+			"dev": true,
+			"requires": {
+				"@types/estree": "^1.0.0",
+				"estree-walker": "^2.0.2",
+				"picomatch": "^2.3.1"
+			}
+		},
 		"@smithy/abort-controller": {
 			"version": "2.0.11",
 			"requires": {
@@ -11352,6 +11632,12 @@
 		"@transloadit/prettier-bytes": {
 			"version": "0.0.7"
 		},
+		"@types/estree": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.2.tgz",
+			"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
+			"dev": true
+		},
 		"@types/event-emitter": {
 			"version": "0.3.3"
 		},
@@ -13087,6 +13373,12 @@
 		"json5": {
 			"version": "2.2.3"
 		},
+		"jsonc-parser": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+			"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+			"dev": true
+		},
 		"jsoneditor": {
 			"version": "9.10.3",
 			"requires": {
@@ -13139,6 +13431,12 @@
 		"lines-and-columns": {
 			"version": "1.2.4"
 		},
+		"local-pkg": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
+			"integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+			"dev": true
+		},
 		"locate-path": {
 			"version": "6.0.0",
 			"dev": true,
@@ -13245,6 +13543,18 @@
 				"minimist": "^1.2.6"
 			}
 		},
+		"mlly": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.4.2.tgz",
+			"integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
+			"dev": true,
+			"requires": {
+				"acorn": "^8.10.0",
+				"pathe": "^1.1.1",
+				"pkg-types": "^1.0.3",
+				"ufo": "^1.3.0"
+			}
+		},
 		"mobius1-selectr": {
 			"version": "2.4.13"
 		},
@@ -13465,6 +13775,12 @@
 			"version": "4.0.0",
 			"dev": true
 		},
+		"pathe": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.1.tgz",
+			"integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+			"dev": true
+		},
 		"pause-stream": {
 			"version": "0.0.11",
 			"requires": {
@@ -13511,6 +13827,17 @@
 		"pirates": {
 			"version": "4.0.6"
 		},
+		"pkg-types": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz",
+			"integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+			"dev": true,
+			"requires": {
+				"jsonc-parser": "^3.2.0",
+				"mlly": "^1.2.0",
+				"pathe": "^1.1.0"
+			}
+		},
 		"platform": {
 			"version": "1.3.6"
 		},
@@ -13763,6 +14090,12 @@
 				"compute-scroll-into-view": "^1.0.20"
 			}
 		},
+		"scule": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmmirror.com/scule/-/scule-1.0.0.tgz",
+			"integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+			"dev": true
+		},
 		"sdk-base": {
 			"version": "2.0.1",
 			"requires": {
@@ -13941,6 +14274,15 @@
 			"version": "3.1.1",
 			"dev": true
 		},
+		"strip-literal": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-1.3.0.tgz",
+			"integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
+			"dev": true,
+			"requires": {
+				"acorn": "^8.10.0"
+			}
+		},
 		"strnum": {
 			"version": "1.0.5"
 		},
@@ -14088,12 +14430,131 @@
 			"version": "4.9.5",
 			"devOptional": true
 		},
+		"ufo": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.3.1.tgz",
+			"integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
+			"dev": true
+		},
 		"unescape": {
 			"version": "1.0.1",
 			"requires": {
 				"extend-shallow": "^2.0.1"
 			}
 		},
+		"unimport": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.4.0.tgz",
+			"integrity": "sha512-M/lfFEgufIT156QAr/jWHLUn55kEmxBBiQsMxvRSIbquwmeJEyQYgshHDEvQDWlSJrVOOTAgnJ3FvlsrpGkanA==",
+			"dev": true,
+			"requires": {
+				"@rollup/pluginutils": "^5.0.4",
+				"escape-string-regexp": "^5.0.0",
+				"fast-glob": "^3.3.1",
+				"local-pkg": "^0.4.3",
+				"magic-string": "^0.30.3",
+				"mlly": "^1.4.2",
+				"pathe": "^1.1.1",
+				"pkg-types": "^1.0.3",
+				"scule": "^1.0.0",
+				"strip-literal": "^1.3.0",
+				"unplugin": "^1.5.0"
+			},
+			"dependencies": {
+				"escape-string-regexp": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+					"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+					"dev": true
+				}
+			}
+		},
+		"unplugin": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.5.0.tgz",
+			"integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
+			"dev": true,
+			"requires": {
+				"acorn": "^8.10.0",
+				"chokidar": "^3.5.3",
+				"webpack-sources": "^3.2.3",
+				"webpack-virtual-modules": "^0.5.0"
+			}
+		},
+		"unplugin-auto-import": {
+			"version": "0.16.6",
+			"resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.16.6.tgz",
+			"integrity": "sha512-M+YIITkx3C/Hg38hp8HmswP5mShUUyJOzpifv7RTlAbeFlO2Tyw0pwrogSSxnipHDPTtI8VHFBpkYkNKzYSuyA==",
+			"dev": true,
+			"requires": {
+				"@antfu/utils": "^0.7.5",
+				"@rollup/pluginutils": "^5.0.2",
+				"fast-glob": "^3.3.0",
+				"local-pkg": "^0.4.3",
+				"magic-string": "^0.30.1",
+				"minimatch": "^9.0.2",
+				"unimport": "^3.0.14",
+				"unplugin": "^1.3.2"
+			},
+			"dependencies": {
+				"brace-expansion": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+					"dev": true,
+					"requires": {
+						"balanced-match": "^1.0.0"
+					}
+				},
+				"minimatch": {
+					"version": "9.0.3",
+					"resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
+					"integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+					"dev": true,
+					"requires": {
+						"brace-expansion": "^2.0.1"
+					}
+				}
+			}
+		},
+		"unplugin-vue-components": {
+			"version": "0.25.2",
+			"resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz",
+			"integrity": "sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==",
+			"dev": true,
+			"requires": {
+				"@antfu/utils": "^0.7.5",
+				"@rollup/pluginutils": "^5.0.2",
+				"chokidar": "^3.5.3",
+				"debug": "^4.3.4",
+				"fast-glob": "^3.3.0",
+				"local-pkg": "^0.4.3",
+				"magic-string": "^0.30.1",
+				"minimatch": "^9.0.3",
+				"resolve": "^1.22.2",
+				"unplugin": "^1.4.0"
+			},
+			"dependencies": {
+				"brace-expansion": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+					"dev": true,
+					"requires": {
+						"balanced-match": "^1.0.0"
+					}
+				},
+				"minimatch": {
+					"version": "9.0.3",
+					"resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
+					"integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+					"dev": true,
+					"requires": {
+						"brace-expansion": "^2.0.1"
+					}
+				}
+			}
+		},
 		"update-browserslist-db": {
 			"version": "1.0.13",
 			"requires": {
@@ -14339,6 +14800,18 @@
 				"xe-utils": "^3.5.13"
 			}
 		},
+		"webpack-sources": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
+			"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+			"dev": true
+		},
+		"webpack-virtual-modules": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+			"integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
+			"dev": true
+		},
 		"which": {
 			"version": "2.0.2",
 			"requires": {

package.json

@@ -68,6 +68,8 @@
 		"prettier": "^2.8.1",
 		"sass": "^1.56.2",
 		"typescript": "^4.9.4",
+		"unplugin-auto-import": "^0.16.6",
+		"unplugin-vue-components": "^0.25.2",
 		"vite": "^4.0.0",
 		"vite-plugin-vue-setup-extend": "^0.4.0",
 		"vue-eslint-parser": "^9.1.0"

src/components/cardComponents/ShowCard.vue

@@ -0,0 +1,38 @@
+<template>
+    <div style="height: 350px;">
+        <el-row>
+            <el-col :span="6">
+                <el-card :body-style="{ padding: '0px' }">
+                    <div style="display: flex; align-items: center;">
+                        <div><img class="cardImg" :src="cardImage" alt="Card Image" style="height: 100px; border-radius: 50%;"/></div>
+                        <div>
+                            <div style="color:#909399;">{{ cardTitle }}</div>
+                            <div style="font-weight: bold;font-size: large">{{ cardMiddle }}</div>
+                            <div>
+                                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
+                                <span style="color:orangered;">{{ `${cardBottomRight}%` }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+    cardData: {
+        type: Object,
+        required: true,
+    },
+})
+const { cardImage, cardTitle, cardMiddle, cardBottom, cardBottomRight } = props.cardData
+
+</script>
+
+<style scoped>
+
+</style>

src/components/cardComponents/dynamicCard.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <el-row>
+            <el-col :span="6">
+                <el-card :body-style="{ padding: '0px' }" @click="changeFn">
+                    <div style="display: flex; align-items: center;">
+                        <div>
+                            <div>
+                                <el-select v-model="value" placeholder="Select" size="small">
+                                    <el-option
+                                            v-for="item in options"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                            :disabled="item.disabled"
+                                    />
+                                </el-select>
+                            </div>
+                            <!--<div style="color:#909399;margin-left: 8px">{{ color }}</div>-->
+                            <div style="font-weight: bold;font-size: large;margin-left: 8px">{{ cardMiddle }}</div>
+                            <div style="margin-left: 8px">
+                                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
+                                <span style="color:orangered;">{{ `${ cardBottomRight }%` }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import { ref, toRefs, computed, reactive } from 'vue'
+
+export default {
+    props: ['dynamicCardData', 'selectOptions'],
+    emits: ['change'],
+
+    setup(props, context) {
+        // 父组件传递的卡片数据
+        let cardData = props.dynamicCardData
+        // 父组件传递的下拉框数据
+        let selectOptions = props.selectOptions
+        // el-selection配置
+        const value = ref('')
+        const options = selectOptions
+
+        // todo 抛出点击后切换显示图线的方法
+        let status = true
+
+        function changeFn() {
+            status = !status
+            context.emit('change', status)
+        }
+
+        return {
+            cardData,
+            ...toRefs(cardData),
+            selectOptions,
+            value,
+            options,
+            changeFn
+        }
+    }
+}
+
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/echartsComponents/BarLineChart.vue

@@ -0,0 +1,178 @@
+<template>
+    <div id="barLine" ref="barLine" style="height: 400px;"></div>
+</template>
+
+<script>
+import { onMounted, onBeforeUnmount, ref, } from 'vue'
+import * as echarts from 'echarts'
+
+export default {
+    props: ['barLineData'],
+
+    setup(props, context) {
+        let lineChart = ref()
+
+        onMounted(() => {
+            lineChart = echarts.init(document.getElementById('barLine'))
+            updateChart()
+            window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+            setTimeout(() => {
+                resizeChart()
+            },0)
+        })
+        onBeforeUnmount(() => {
+            window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
+        })
+        // 获取图像数据 lieChartData
+        let chartData = props.barLineData
+
+        function updateChart() {
+            const option = {
+                // title: {
+                //   text: chartData.title,
+                // },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#6a7985'
+                        }
+                    }
+                },
+                // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
+                toolbox: {
+                    feature: {
+                        saveAsImage: { yAxisIndex: 'none' }
+                    }
+                },
+                grid: {
+                    top: 70, right: 60, bottom: 30, left: 55,
+
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: true,
+                        data: chartData.xData,
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        // name: yTitle1,
+                        splitLine: {
+                            show: true // 设置显示分割线
+                        },
+                        axisLabel: {
+                            formatter: '{value} 单位1'
+                        }
+                    },
+                    {
+                        type: 'value',
+                        // name: yTitle2,
+                        splitLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            formatter: '{value} 单位2'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '柱状图',
+                        type: 'bar',
+                        // tooltip: {
+                        //   valueFormatter: function (value) {
+                        //     return value + ' ml';
+                        //   }
+                        // },
+                        barWidth: '30%',
+                        data: chartData.barData,
+                        yAxisIndex: 1,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: 'rgba(111, 209, 206, 0.8)' },
+                                { offset: 1, color: 'rgba(111, 209, 206, 0.1)' },
+                            ]),
+                            //柱状图圆角
+                            borderRadius: [15, 15, 0, 0],
+                        },
+                    },
+                    {
+                        name: '数据1',
+                        type: 'line',
+                        symbolSize: 6,
+                        symbol: 'circle',
+                        smooth: true,
+                        data: chartData.yData1,
+                        yAxisIndex: 0,
+                        lineStyle: { color: '#fe9a8b' },
+                        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: '#fe9a8bb3' },
+                                { offset: 1, color: '#fe9a8b03' },
+                            ]),
+                        },
+                    },
+                    {
+                        name: '数据2',
+                        type: 'line',
+                        symbolSize: 6,
+                        symbol: 'circle',
+                        smooth: true,
+                        data: chartData.yData2,
+                        yAxisIndex: 1,
+                        lineStyle: { color: '#9E87FF' },
+                        itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: '#9E87FFb3' },
+                                { offset: 1, color: '#9E87FF03' },
+                            ]),
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                color: {
+                                    type: 'radial',
+                                    x: 0.5,
+                                    y: 0.5,
+                                    r: 0.5,
+                                    colorStops: [
+                                        { offset: 0, color: '#9E87FF' },
+                                        { offset: 0.4, color: '#9E87FF' },
+                                        { offset: 0.5, color: '#fff' },
+                                        { offset: 0.7, color: '#fff' },
+                                        { offset: 0.8, color: '#fff' },
+                                        { offset: 1, color: '#fff' },
+                                    ],
+                                },
+                                borderColor: '#9E87FF',
+                                borderWidth: 2,
+                            },
+                        },
+                    },
+                ],
+            }
+            lineChart.setOption(option)
+        }
+
+        // 自适应调整窗口
+        function resizeChart() {
+            if (lineChart) {
+                lineChart.resize()
+            }
+        }
+
+        return {}
+    },
+
+}
+
+
+</script>
+
+<style>
+</style>

src/components/echartsComponents/LineChart.vue

@@ -0,0 +1,177 @@
+<template>
+    <div>
+        <el-row :gutter="5">
+            <el-col :span="14">
+                <el-card>
+                    <div id="main" ref="line" style="height: 400px;"></div>
+                </el-card>
+            </el-col>
+            <el-col :span="10">
+                <el-card>
+                    <div class="grid-content ep-bg-purple-light" style="background-color:#9b9da1; height: 400px;">占个位置</div>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import { onMounted, onBeforeUnmount, ref, } from 'vue'
+import * as echarts from 'echarts'
+
+export default {
+    props: ['chartData'],
+
+    setup(props, context) {
+        let lineChart = ref()
+        let line  = ref()
+        onMounted(() => {
+            lineChart = echarts.init(document.getElementById('main'))
+            updateChart()
+            // updateChart()
+            setTimeout(()=>{
+                resizeChart()
+            }, 0)
+
+            window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+        })
+        onBeforeUnmount(() => {
+            window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
+        })
+        // 获取图像数据 lieChartData
+        let lieChartData = props.chartData
+        console.log('lieChartData', lieChartData)
+        function updateChart() {
+            const option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#6a7985'
+                        }
+                    }
+                },
+                // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
+                toolbox: {
+                    feature: {
+                        saveAsImage: { yAxisIndex: 'none' }
+                    }
+                },
+                grid: {
+                    top: 70, right: 60, bottom: 30, left: 55,
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: lieChartData.xData
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        // name: yTitle1,
+                        splitLine: {
+                            show: true // 设置显示分割线
+                        },
+                        axisLabel: {
+                            formatter: '{value} 单位1'
+                        }
+                    },
+                    {
+                        type: 'value',
+                        // name: yTitle2,
+                        splitLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            formatter: '{value} 单位2'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '数据1',
+                        type: 'line',
+                        symbolSize: 6,
+                        symbol: 'circle',
+                        smooth: true,
+                        data: lieChartData.yData1,
+                        yAxisIndex: 0,
+                        lineStyle: { color: '#fe9a8b' },
+                        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: '#fe9a8bb3' },
+                                { offset: 1, color: '#fe9a8b03' },
+                            ]),
+                        },
+                    },
+                    {
+                        name: '数据2',
+                        type: 'line',
+                        symbolSize: 6,
+                        symbol: 'circle',
+                        smooth: true,
+                        data: lieChartData.yData2,
+                        yAxisIndex: 1,
+                        lineStyle: { color: '#9E87FF' },
+                        itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: '#9E87FFb3' },
+                                { offset: 1, color: '#9E87FF03' },
+                            ]),
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                color: {
+                                    type: 'radial',
+                                    x: 0.5,
+                                    y: 0.5,
+                                    r: 0.5,
+                                    colorStops: [
+                                        { offset: 0, color: '#9E87FF' },
+                                        { offset: 0.4, color: '#9E87FF' },
+                                        { offset: 0.5, color: '#fff' },
+                                        { offset: 0.7, color: '#fff' },
+                                        { offset: 0.8, color: '#fff' },
+                                        { offset: 1, color: '#fff' },
+                                    ],
+                                },
+                                borderColor: '#9E87FF',
+                                borderWidth: 2,
+                            },
+                        },
+                    },
+                ],
+            }
+            lineChart.setOption(option)
+        }
+
+        // 自适应调整窗口
+        function resizeChart() {
+            if (lineChart) {
+                lineChart.resize()
+            }
+        }
+
+        return {  }
+    }
+}
+
+// let props = defineProps({
+//     chartData: {
+//         type: Object,
+//         required: true,
+//     },
+// })
+// let { title, xData, yData1, yData2 } = props.chartData  // 将需要传入的数据解构出来方便在option中调用
+
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/searchInput/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="mt-4" style="margin-bottom: 5px">
+            <el-input
+                    v-model="input3"
+                    placeholder="快速查询"
+                    class="input-with-select"
+                    clearable
+            >
+                <template #prepend>
+                    <el-select v-model="select" style="width: 115px">
+                        <el-option label="精准" value="1" />
+                        <el-option label="模糊" value="2" />
+                    </el-select>
+                </template>
+                <template #append>
+                    <el-button :icon="Search" @click="clickFn"/>
+                </template>
+            </el-input>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+
+import { Search } from "@element-plus/icons-vue"
+import {ref} from 'vue'
+
+const input3 = ref('')
+const select = ref('1')
+
+function clickFn() {
+    // console.log('点击搜索')
+    console.log(select)
+}
+
+</script>
+
+<style scoped>
+
+</style>

src/router/route.ts

@@ -45,7 +45,15 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			isIframe: false,
 			icon: 'iconfont icon-gerenzhongxin',
 		},
-	}
+	},
+	{
+		path: '/createcampaigns',
+		name: 'createcampaigns',
+		component: () => import('/@/views/adManage/sb/campaigns/CreateCampaigns/index.vue'),
+		meta: {
+			title: '新建广告活动',
+		},
+	},
 ];
 
 /**

src/views/adManage/sb/campaigns/CreateCampaigns/adFormat/CommoditySet.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="container" style="margin-top: 20px">
+        <p style="font-weight: bold">需要帮助创建图片或品牌旗舰店？</p>
+        <p style="color: dodgerblue">深入了解广告创意服务（链接未完成）</p>
+        <div>
+            <el-radio-group v-model="radio1">
+                <el-radio label="1" size="large" border>
+                    Option A
+                </el-radio>
+                <el-radio label="2" size="large" border>Option B</el-radio>
+            </el-radio-group>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+const radio1 = ref('1')
+
+</script>
+
+<style scoped>
+
+</style>

src/views/adManage/sb/campaigns/CreateCampaigns/index.vue

@@ -0,0 +1,264 @@
+<template>
+    <!--<p>新建广告页面</p>-->
+    <div>
+        <!-- 设置 -->
+        <el-card style="margin: 5px">
+            <div style="font-size: 19px; font-weight: bold"><span style="background-color: rgb(53, 105, 214); margin-right: 5px">|</span>设置</div>
+            <div class="container">
+                <el-form
+                        ref="ruleFormRef"
+                        :model="ruleForm"
+                        :rules="rules"
+                        label-width="120px"
+                        class="demo-ruleForm"
+                        :size="formSize"
+                        status-icon
+                        :label-position="labelPosition"
+                >
+                    <el-form-item class="form-item" label="广告活动名称" prop="name" style="width: 50%;">
+                        <el-input v-model="ruleForm.name"/>
+                    </el-form-item>
+                    <el-form-item class="form-item" label="广告组合" prop="portfolios" style="margin-left: 9px">
+                        <el-select v-model="ruleForm.portfolios" placeholder="请选择" style="margin-left: -9px">
+                            <el-option label="Zone one" value="shanghai"/>
+                            <el-option label="Zone two" value="beijing"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item class="form-item" label="预算" prop="budget">
+                        <el-select-v2
+                                v-model="ruleForm.budget"
+                                placeholder="Activity budget"
+                                :options="options"
+                        />
+                    </el-form-item>
+                    <el-form-item class="form-item" label="活动时间" required>
+                        <el-col :span="11">
+                            <el-form-item prop="date1">
+                                <el-date-picker
+                                        v-model="ruleForm.date1"
+                                        type="date"
+                                        label="Pick a date"
+                                        placeholder="开始时间"
+                                        style="width: 100%"
+                                />
+                            </el-form-item>
+                        </el-col>
+                        <el-col class="text-center" style="margin-bottom: 22px !important;" :span="1">
+                            <span class="text-center">—</span>
+                        </el-col>
+                        <el-col :span="11">
+                            <el-form-item prop="date2">
+                                <el-date-picker
+                                        v-model="ruleForm.date2"
+                                        type="date"
+                                        label="Pick a date"
+                                        placeholder="结束时间"
+                                        style="width: 100%"
+                                />
+                            </el-form-item>
+                        </el-col>
+                    </el-form-item>
+                    <el-form-item class="form-item" label="自动竞价" prop="delivery" @click.prevent style="margin-left: 9px">
+                        <el-switch v-model="ruleForm.delivery" style="margin-left: -9px"/>
+                        <span style="margin-left: 15px; color: #7a7a7a">允许亚马逊自动优化搜索结果首页以外的广告位竞价</span>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="submitForm(ruleFormRef)">
+                            Create
+                        </el-button>
+                        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-card>
+        <!-- 广告组 -->
+        <el-card style="margin: 5px">
+            <div style="font-size: 19px; font-weight: bold">
+                <span style="background-color: rgb(53, 105, 214); margin-right: 5px">|</span>
+                广告组
+            </div>
+            <div>
+                <el-form ref="ruleFormRef"
+                           :model="ruleForm"
+                           :rules="rules"
+                           label-width="120px"
+                           class="demo-ruleForm"
+                           :size="formSize"
+                           status-icon
+                           :label-position="labelPosition">
+                    <el-form-item class="form-item" label="广告组名称" prop="groupName" style="width: 50%;">
+                        <el-input v-model="ruleForm.groupName"/>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-card>
+        <!-- 广告格式 -->
+        <el-card style="margin: 5px">
+            <div style="font-size: 19px; font-weight: bold">
+                <span style="background-color: rgb(53, 105, 214); margin-right: 5px">|</span>
+                广告格式
+            </div>
+            <div>
+                <el-form ref="ruleFormRef"
+                         :model="ruleForm"
+                         :rules="rules"
+                         label-width="120px"
+                         class="demo-ruleForm"
+                         :size="formSize"
+                         status-icon
+                         :label-position="labelPosition">
+                </el-form>
+            </div>
+            <el-tabs>
+                <el-tab-pane label="商品集"><CommoditySet/></el-tab-pane>
+                <el-tab-pane label="品牌旗舰店焦点">品牌旗舰店焦点</el-tab-pane>
+                <el-tab-pane label="视频">视频</el-tab-pane>
+            </el-tabs>
+        </el-card>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref} from 'vue'
+import type {FormInstance, FormRules, FormProps} from 'element-plus'
+import CommoditySet from './adFormat/CommoditySet.vue'
+
+interface RuleForm {
+    name: string
+    portfolios: string
+    budget: string
+    date1: string
+    date2: string
+    delivery: boolean
+    type: string[]
+    resource: string
+    desc: string
+    groupName: string
+}
+
+const formSize = ref('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+    name: '',
+    portfolios: '',
+    budget: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    type: [],
+    resource: '',
+    desc: '',
+    groupName: '',
+})
+
+const rules = reactive<FormRules<RuleForm>>({
+    name: [
+        {required: true, message: 'Please input Activity name', trigger: 'blur'},
+        {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'},
+    ],
+    portfolios: [
+        {
+            required: false,
+            message: 'Please select Activity zone',
+            trigger: 'change',
+        },
+    ],
+    budget: [
+        {
+            required: true,
+            message: 'Please select Activity budget',
+            trigger: 'change',
+        },
+    ],
+    date1: [
+        {
+            type: 'date',
+            required: true,
+            message: 'Please pick a date',
+            trigger: 'change',
+        },
+    ],
+    date2: [
+        {
+            type: 'date',
+            required: false,
+            message: 'Please pick a time',
+            trigger: 'change',
+        },
+    ],
+    type: [
+        {
+            type: 'array',
+            required: true,
+            message: 'Please select at least one activity type',
+            trigger: 'change',
+        },
+    ],
+    resource: [
+        {
+            required: true,
+            message: 'Please select activity resource',
+            trigger: 'change',
+        },
+    ],
+    desc: [
+        {required: true, message: 'Please input activity form', trigger: 'blur'},
+    ],
+    groupName: [
+        {required: true, message: 'Please input Group Name', trigger: 'blur'},
+    ]
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            console.log('submit!')
+            console.log(ruleForm)
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+}
+
+const options = Array.from({length: 10000}).map((_, idx) => ({
+    value: `${idx + 1}`,
+    label: `${idx + 1}`,
+}))
+
+const labelPosition = ref<FormProps['labelPosition']>('left')
+
+</script>
+
+<style scoped>
+    .form-item :deep(.el-form-item__label) {
+        font-weight: bold;
+    }
+    :deep(.el-tabs__nav-scroll) {
+        display: flex;
+        justify-content: space-around;
+    }
+    :deep([id^="tab"]) {
+        padding: 0;
+        margin-right: 230px;
+        border: 1px solid #D3D3D3;
+        border-radius: 5px;
+    }
+    :deep(div#tab-0) {
+        padding: 15px;
+    }
+    :deep(div#tab-1) {
+        padding: 15px;
+    }
+    :deep(div#tab-2) {
+        padding: 15px;
+    }
+    :deep(.el-tabs__nav-wrap::after) {
+        width: 0;
+    }
+</style>

src/views/adManage/sb/campaigns/api.ts

@@ -0,0 +1,42 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import XEUtils from 'xe-utils';
+
+export const apiPrefix = '/api/ad_manage/spCampaigns/';
+export function GetList(query: PageQuery) {
+    return request({
+        url: apiPrefix,
+        method: 'get',
+        params: query,
+    })
+}
+export function GetObj(id: InfoReq) {
+    return request({
+        url: apiPrefix + id,
+        method: 'get',
+    });
+}
+
+export function AddObj(obj: AddReq) {
+    return request({
+        url: apiPrefix,
+        method: 'post',
+        data: obj,
+    });
+}
+
+export function UpdateObj(obj: EditReq) {
+    return request({
+        url: apiPrefix + obj.id + '/',
+        method: 'put',
+        data: obj,
+    });
+}
+
+export function DelObj(id: DelReq) {
+    return request({
+        url: apiPrefix + id + '/',
+        method: 'delete',
+        data: { id },
+    });
+}

src/views/adManage/sb/campaigns/crud.tsx

@@ -0,0 +1,146 @@
+import * as api from './api'
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
+import { inject, nextTick, ref } from 'vue'
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+import {useRouter} from 'vue-router'
+
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
+
+	//权限判定
+	const hasPermissions = inject('$hasPermissions');
+
+	// todo 点击新建广告活动进行路由跳转（还有问题）
+	const router = useRouter()
+	function goCreate() {
+		router.push('/createcampaigns')
+	}
+
+	return {
+		crudOptions: {
+			table: {
+				height: 800
+			},
+			container: {
+        fixedHeight: false
+      },
+			actionbar: {
+				show: true,
+				buttons: {
+					add: {
+						text: 'xxx',
+						show: false
+					},
+					create: {
+						text: '新建广告活动',
+						type: "primary",
+						show: true,
+						click() {
+							goCreate()
+						}
+					}
+				}
+			},
+			search: {
+				show: false
+			},
+			toolbar: {
+        buttons: {
+					search: {
+						show: true
+					},
+					compact: {
+						show: false
+					}
+				}
+			},
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			rowHandle: {
+				fixed: 'right',
+				width: 80,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+            text: null
+						// show: hasPermissions('dictionary:Update'),
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+            text: null
+						// show: hasPermissions('dictionary:Delete'),
+					},
+				},
+			},
+			columns: {
+        name: {
+          title: '广告活动',
+          column: {
+            width: '150px'
+          },
+					search: {
+						show: true,
+						component: {
+							props: {
+								clearable: true
+							}
+						}
+					},
+					form: {
+						rules: [{required: true, message:'必填项'}]
+					}
+        },
+				targetingType: {
+					title: '投放类型',
+					type: 'dict-select',
+					search: {
+						show: true
+					},
+					dict: dict({
+						data: [
+							{ value: 'AUTO', label: '自动' },
+							{ value: 'MANUAL', label: '手动' },
+						]
+					})
+				},
+				state: {
+					title: '状态'
+				},
+				startDate: {
+					title: '开始日期'
+				},
+				endDate: {
+					title: '结束日期'
+				},
+				budget: {
+					title: '预算'
+				},
+				portfolio: {
+					title: '广告组合'
+				},
+        ...BaseColumn
+			}
+		}
+	}
+}

src/views/adManage/sb/campaigns/index.vue

@@ -0,0 +1,53 @@
+<template>
+    <fs-page class="fs-page-custom">
+        <fs-crud ref="crudRef" v-bind="crudBinding">
+            <template #header-middle>
+                <SearchInput/>
+                <el-card style="height: 500px;margin-bottom: 5px;" shadow="hover">
+                    <BarLineChart :barLineData="barLineData"/>
+                    <!--<line-chart :chartData="chartData"/>-->
+                </el-card>
+
+            </template>
+        </fs-crud>
+    </fs-page>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted, defineAsyncComponent, reactive} from 'vue'
+import {useFs, FsPage} from '@fast-crud/fast-crud'
+import {createCrudOptions} from './crud'
+import BarLineChart from '/@/components/echartsComponents/BarLineChart.vue'
+import LineChart from '/@/components/echartsComponents/LineChart.vue'
+import {useLineStore} from '/@/stores/chartData/line'
+import SearchInput from '/@/components/searchInput/index.vue'
+
+
+const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {}})
+
+
+const lineStore = useLineStore()
+let barLineData = lineStore.barLineData
+
+// let barLineData
+//
+// function initData() {
+//     barLineData = reactive({
+//         xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
+//         barData: [12, 13.4, 12.5, 16, 14.5, 15.6, 12.3],
+//         yData1: [5, 6, 7, 8, 9, 10, 11],
+//         yData2: [14, 15, 12, 16, 15, 13, 14.5]
+//     })
+// }
+// initData()
+
+
+
+onMounted(() => {
+    crudExpose.doRefresh()
+})
+</script>
+
+<style scoped>
+
+</style>

src/views/adManage/sb/index.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="ads-container">
+        <div class="public-search">
+            <DateRangePicker timezone="America/Los_Angeles" @change="changeDateRange"></DateRangePicker>
+            <el-select v-model="portfolios" placeholder="广告组合"></el-select>
+        </div>
+        <el-tabs>
+            <el-tab-pane label="广告活动">
+                <campaigns></campaigns>
+            </el-tab-pane>
+            <el-tab-pane label="关键词"></el-tab-pane>
+            <el-tab-pane label="商品投放"></el-tab-pane>
+            <el-tab-pane label="搜索词"></el-tab-pane>
+            <el-tab-pane label="广告位"></el-tab-pane>
+        </el-tabs>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
+import campaigns from './campaigns/index.vue'
+import {ref} from 'vue'
+
+const portfolios = ref([])
+
+function changeDateRange(val: string[]) {
+    console.log(val)
+}
+
+</script>
+
+<style scoped>
+    .public-search {
+        display: flex;
+        gap: 3px;
+        padding-bottom: 3px;
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        width: 100%;
+        background-color: #f8f8f8;
+        box-shadow: 0px 0px 0px rgba(51, 89, 181, 0.16);
+    }
+
+    :deep(.el-tabs__header.is-top) {
+        background-color: #fff;
+        position: sticky;
+        top: 32px;
+        z-index: 1;
+        box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
+    }
+
+    :deep(.el-tabs__nav) {
+        padding-left: 10px;
+    }
+
+</style>

src/views/system/menu/types.ts

@@ -1,63 +1,63 @@
 export interface TreeTypes {
-  id?: number;
-  name?: string;
-  status?: boolean;
-  children?: TreeTypes[];
+    id?: number;
+    name?: string;
+    status?: boolean;
+    children?: TreeTypes[];
 }
 
 export interface APIResponseData {
-  code?: number;
-  data: [];
-  msg?: string;
+    code?: number;
+    data: [];
+    msg?: string;
 }
 
 export interface FormTypes<T> {
-  [key: string]: T;
+    [key: string]: T;
 }
 
 export interface ComponentFileItem {
-  value: string;
-  label: string;
+    value: string;
+    label: string;
 }
 
 export interface MenuTreeItemType {
-  id: number | string;
-  modifier_name: string;
-  creator_name: string;
-  create_datetime: string;
-  update_datetime: string;
-  menuPermission: string[];
-  hasChild: boolean;
-  description: string;
-  modifier: string;
-  dept_belong_id: string;
-  icon: string;
-  name: string;
-  sort: number;
-  is_link: boolean;
-  is_catalog: boolean;
-  web_path: string;
-  component: string;
-  component_name: string;
-  status: boolean;
-  cache: boolean;
-  visible: boolean;
-  creator: string;
-  parent: number | string;
+    id: number | string;
+    modifier_name: string;
+    creator_name: string;
+    create_datetime: string;
+    update_datetime: string;
+    menuPermission: string[];
+    hasChild: boolean;
+    description: string;
+    modifier: string;
+    dept_belong_id: string;
+    icon: string;
+    name: string;
+    sort: number;
+    is_link: boolean;
+    is_catalog: boolean;
+    web_path: string;
+    component: string;
+    component_name: string;
+    status: boolean;
+    cache: boolean;
+    visible: boolean;
+    creator: string;
+    parent: number | string;
 }
 
 export interface MenuFormDataType {
-  id?: number | string;
-  parent: number | string;
-  name: string;
-  component: string;
-  web_path: string;
-  icon: string;
-  cache: boolean;
-  status: boolean;
-  visible: boolean;
-  component_name: string;
-  description: string;
-  is_catalog: boolean;
-  is_link: boolean;
-}
+    id?: number | string;
+    parent: number | string;
+    name: string;
+    component: string;
+    web_path: string;
+    icon: string;
+    cache: boolean;
+    status: boolean;
+    visible: boolean;
+    component_name: string;
+    description: string;
+    is_catalog: boolean;
+    is_link: boolean;
+}

vite.config.ts

@@ -1,67 +1,69 @@
 import vue from '@vitejs/plugin-vue';
-import { resolve } from 'path';
-import { defineConfig, loadEnv, ConfigEnv } from 'vite';
+import {resolve} from 'path';
+import {defineConfig, loadEnv, ConfigEnv} from 'vite';
 import vueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
 const pathResolve = (dir: string) => {
-	return resolve(__dirname, '.', dir);
+    return resolve(__dirname, '.', dir);
 };
 
 const alias: Record<string, string> = {
-	'/@': pathResolve('./src/'),
-	'@views': pathResolve('./src/views'),
-	'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
+    '/@': pathResolve('./src/'),
+    '@views': pathResolve('./src/views'),
+    'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
 };
 
 const viteConfig = defineConfig((mode: ConfigEnv) => {
-	const env = loadEnv(mode.mode, process.cwd());
-	return {
-		plugins: [vue(), vueJsx(), vueSetupExtend()],
-		root: process.cwd(),
-		resolve: { alias },
-		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
-		optimizeDeps: {
-			include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en', 'element-plus/es/locale/lang/zh-tw'],
-		},
-		server: {
-			host: '0.0.0.0',
-			port: env.VITE_PORT as unknown as number,
-			open: true,
-			hmr: true,
-			proxy: {
-				'/gitee': {
-					target: 'https://gitee.com',
-					ws: true,
-					changeOrigin: true,
-					rewrite: (path) => path.replace(/^\/gitee/, ''),
-				},
-			},
-		},
-		build: {
-			outDir: 'dist',
-			chunkSizeWarningLimit: 1500,
-			rollupOptions: {
-				output: {
-					entryFileNames: `assets/[name].[hash].js`,
-					chunkFileNames: `assets/[name].[hash].js`,
-					assetFileNames: `assets/[name].[hash].[ext]`,
-					compact: true,
-					manualChunks: {
-						vue: ['vue', 'vue-router', 'pinia'],
-						echarts: ['echarts'],
-					},
-				},
-			},
-		},
-		css: { preprocessorOptions: { css: { charset: false } } },
-		define: {
-			__VUE_I18N_LEGACY_API__: JSON.stringify(false),
-			__VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
-			__INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
-			__VERSION__: JSON.stringify(process.env.npm_package_version),
-		},
-	};
+    const env = loadEnv(mode.mode, process.cwd());
+    return {
+        plugins: [
+            vue(), vueJsx(), vueSetupExtend(),
+        ],
+        root: process.cwd(),
+        resolve: {alias},
+        base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
+        optimizeDeps: {
+            include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en', 'element-plus/es/locale/lang/zh-tw'],
+        },
+        server: {
+            host: '0.0.0.0',
+            port: env.VITE_PORT as unknown as number,
+            open: true,
+            hmr: true,
+            proxy: {
+                '/gitee': {
+                    target: 'https://gitee.com',
+                    ws: true,
+                    changeOrigin: true,
+                    rewrite: (path) => path.replace(/^\/gitee/, ''),
+                },
+            },
+        },
+        build: {
+            outDir: 'dist',
+            chunkSizeWarningLimit: 1500,
+            rollupOptions: {
+                output: {
+                    entryFileNames: `assets/[name].[hash].js`,
+                    chunkFileNames: `assets/[name].[hash].js`,
+                    assetFileNames: `assets/[name].[hash].[ext]`,
+                    compact: true,
+                    manualChunks: {
+                        vue: ['vue', 'vue-router', 'pinia'],
+                        echarts: ['echarts'],
+                    },
+                },
+            },
+        },
+        css: {preprocessorOptions: {css: {charset: false}}},
+        define: {
+            __VUE_I18N_LEGACY_API__: JSON.stringify(false),
+            __VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
+            __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
+            __VERSION__: JSON.stringify(process.env.npm_package_version),
+        },
+    };
 });
 
 export default viteConfig;