A:完成软件详细信息展示
This commit is contained in:
jimmy committed
1 parent
54c44fc7cd
commit
77f46fcab2
6 files changed
+413
-226
No files matched your search
Generated
-13
@@ -1,13 +0,0 @@
|
||||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Rider 忽略的文件
|
||||
/projectSettingsUpdater.xml
|
||||
/contentModel.xml
|
||||
/.idea.NetVizor.iml
|
||||
/modules.xml
|
||||
# 基于编辑器的 HTTP 客户端请求
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
-8
@@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="UserContentModel">
|
||||
<attachedFolders />
|
||||
<explicitIncludes />
|
||||
<explicitExcludes />
|
||||
</component>
|
||||
</project>
|
||||
Generated
-6
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
Generated
+167
-13
@@ -9,10 +9,16 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@vicons/ionicons5": "^0.13.0",
|
||||
"axios": "^1.10.0",
|
||||
"gsap": "^3.13.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide": "^0.525.0",
|
||||
"lucide-vue-next": "^0.525.0",
|
||||
"pako": "^2.1.0",
|
||||
"pinia": "^3.0.1",
|
||||
"unplugin-auto-import": "^19.3.0",
|
||||
"unplugin-vue-components": "^28.7.0",
|
||||
"vicons": "^0.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
@@ -3229,6 +3235,23 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
|
||||
"integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@@ -3380,7 +3403,6 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
@@ -3520,6 +3542,18 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "10.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-10.0.1.tgz",
|
||||
@@ -3825,6 +3859,15 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
|
||||
@@ -3854,7 +3897,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
@@ -3964,7 +4006,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -3974,7 +4015,6 @@
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -3991,7 +4031,6 @@
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
@@ -4000,6 +4039,21 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-set-tostringtag": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
|
||||
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.6",
|
||||
"has-tostringtag": "^1.0.2",
|
||||
"hasown": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.25.3",
|
||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.3.tgz",
|
||||
@@ -4657,6 +4711,26 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/foreground-child": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz",
|
||||
@@ -4674,6 +4748,43 @@
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
|
||||
"integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data/node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data/node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@@ -4727,7 +4838,6 @@
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@@ -4747,7 +4857,6 @@
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
@@ -4772,7 +4881,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
@@ -4847,7 +4955,6 @@
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -4890,7 +4997,6 @@
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -4899,11 +5005,25 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-tostringtag": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-symbols": "^1.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
@@ -5530,7 +5650,6 @@
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
@@ -5564,6 +5683,21 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide": {
|
||||
"version": "0.525.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide/-/lucide-0.525.0.tgz",
|
||||
"integrity": "sha512-sfehWlaE/7NVkcEQ4T9JD3eID8RNMIGJBBUq9wF3UFiJIrcMKRbU3g1KGfDk4svcW7yw8BtDLXaXo02scDtUYQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/lucide-vue-next": {
|
||||
"version": "0.525.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.525.0.tgz",
|
||||
"integrity": "sha512-Xf8+x8B2DrnGDV/rxylS+KBp2FIe6ljwDn2JsGTZZvXIfhmm/q+nv8RuGO1OyoMjOVkkz7CqtUqJfwtFPRbB2w==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"vue": ">=3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.17",
|
||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz",
|
||||
@@ -5577,7 +5711,6 @@
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -6101,6 +6234,12 @@
|
||||
"dev": true,
|
||||
"license": "BlueOak-1.0.0"
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
|
||||
"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
|
||||
"license": "(MIT AND Zlib)"
|
||||
},
|
||||
"node_modules/parent-module": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
|
||||
@@ -6437,6 +6576,12 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
|
||||
@@ -7818,6 +7963,15 @@
|
||||
"vue": "^3.0.11"
|
||||
}
|
||||
},
|
||||
"node_modules/vicons": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vicons/-/vicons-0.0.1.tgz",
|
||||
"integrity": "sha512-suYeiVqw/q+ijWBlsGP5vhTUphRqLzCLZKqBHK4iuzlOmP1omKWDWQd+da7rDZU7dyPD5TTV9MXTLCxQt3d7zQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/vite/-/vite-6.3.4.tgz",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ref, Ref, watch } from 'vue'
|
||||
import { ref, Ref, watch, computed } from 'vue'
|
||||
import { defineStore, storeToRefs } from 'pinia'
|
||||
import { useWebSocketStore } from '@/stores/websocketStore'
|
||||
import { WebSocketResponse } from '@/types/websocket'
|
||||
@@ -8,12 +8,15 @@ export const useApplicationStore = defineStore('applicationInfoSub', () => {
|
||||
const appInfos: Ref<ApplicationType[]> = ref([])
|
||||
// 状态
|
||||
const selectedApp = ref<ApplicationType | null>(null)
|
||||
const inspectingAppDetails = ref<ApplicationType | null>(null)
|
||||
|
||||
// 计算属性
|
||||
const activeApps = computed(() => {
|
||||
return appInfos.value.filter((app) => !app.ExitCode)
|
||||
})
|
||||
|
||||
const isInspecting = computed(() => !!inspectingAppDetails.value)
|
||||
|
||||
const inactiveApps = computed(() => {
|
||||
return appInfos.value.filter((app) => !!app.ExitCode)
|
||||
})
|
||||
@@ -41,6 +44,10 @@ export const useApplicationStore = defineStore('applicationInfoSub', () => {
|
||||
}
|
||||
}
|
||||
|
||||
const setInspectingAppDetails = (app: ApplicationType | null) => {
|
||||
inspectingAppDetails.value = app
|
||||
}
|
||||
|
||||
const setSelectedApp = (app: ApplicationType | null) => {
|
||||
selectedApp.value = app
|
||||
}
|
||||
@@ -118,11 +125,15 @@ export const useApplicationStore = defineStore('applicationInfoSub', () => {
|
||||
const { isOpen } = storeToRefs(webSocketStore)
|
||||
watch(
|
||||
isOpen,
|
||||
(oldValue, newValue) => {
|
||||
if (oldValue || newValue) {
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
webSocketStore.registerHandler('ApplicationInfo', (data: WebSocketResponse) => {
|
||||
appInfos.value = JSON.parse(data.data)
|
||||
})
|
||||
webSocketStore.registerHandler('AppDetailInfo', (data: WebSocketResponse) => {
|
||||
console.log('AppDetailInfo', data)
|
||||
inspectingAppDetails.value = JSON.parse(data.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
@@ -133,6 +144,7 @@ export const useApplicationStore = defineStore('applicationInfoSub', () => {
|
||||
subscribe, // 状态
|
||||
appInfos,
|
||||
selectedApp,
|
||||
inspectingAppDetails,
|
||||
|
||||
// 计算属性
|
||||
activeApps,
|
||||
@@ -140,10 +152,12 @@ export const useApplicationStore = defineStore('applicationInfoSub', () => {
|
||||
selectedAppIndex,
|
||||
totalMemoryUsage,
|
||||
totalProcessCount,
|
||||
isInspecting,
|
||||
|
||||
// 操作
|
||||
setAppInfos,
|
||||
setSelectedApp,
|
||||
setInspectingAppDetails,
|
||||
selectNextApp,
|
||||
selectPreviousApp,
|
||||
updateApp,
|
||||
|
||||
@@ -4,58 +4,77 @@
|
||||
<div class="inspector-header">
|
||||
<h3 class="inspector-title">
|
||||
<span class="title-icon">🔍</span>
|
||||
连接详情
|
||||
应用详情
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedConnection" class="inspector-body">
|
||||
<!-- 基本信息 -->
|
||||
<div v-if="isInspecting && inspectingAppDetails" class="inspector-body">
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">基本信息</h4>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">进程</span>
|
||||
<span class="detail-value">{{ selectedConnection.process }}</span>
|
||||
<div class="app-header">
|
||||
<div class="app-icon">
|
||||
<img
|
||||
v-if="inspectingAppDetails.iconBase64"
|
||||
:src="'data:image/png;base64,' + inspectingAppDetails.iconBase64"
|
||||
:alt="inspectingAppDetails.productName"
|
||||
/>
|
||||
<div v-else class="app-icon-placeholder">?</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">PID</span>
|
||||
<span class="detail-value">{{ selectedConnection.pid || '12345' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">协议</span>
|
||||
<span class="detail-value">{{ selectedConnection.protocol || 'TCP' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">状态</span>
|
||||
<span class="detail-value" :class="`status-${selectedConnection.status}`">
|
||||
{{ getStatusText(selectedConnection.status) }}
|
||||
</span>
|
||||
<div class="app-title-group">
|
||||
<h4 class="app-title">{{ inspectingAppDetails.productName || '未知应用' }}</h4>
|
||||
<p class="app-subtitle">{{ inspectingAppDetails.fileDescription }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网络信息 -->
|
||||
<!-- 进程信息 -->
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">网络信息</h4>
|
||||
<div class="network-info">
|
||||
<div class="network-item">
|
||||
<div class="network-label">本地地址</div>
|
||||
<div class="network-value">{{ selectedConnection.localAddress }}:{{ selectedConnection.localPort || '54321' }}</div>
|
||||
<h4 class="detail-section-title">进程信息</h4>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">进程名称</span>
|
||||
<span class="detail-value">{{ inspectingAppDetails.processName }}</span>
|
||||
</div>
|
||||
<div class="network-item">
|
||||
<div class="network-label">远程地址</div>
|
||||
<div class="network-value">{{ selectedConnection.remoteIp || '142.250.191.14' }}:{{ selectedConnection.remotePort || '443' }}</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">进程数</span>
|
||||
<span class="detail-value">{{ inspectingAppDetails.processIds.length }}</span>
|
||||
</div>
|
||||
<div class="network-item">
|
||||
<div class="network-label">域名</div>
|
||||
<div class="network-value">{{ selectedConnection.remoteAddress }}</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">内存占用</span>
|
||||
<span class="detail-value">{{ formatMemory(inspectingAppDetails.useMemory) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">线程数</span>
|
||||
<span class="detail-value">{{ inspectingAppDetails.threadCount }}</span>
|
||||
</div>
|
||||
<div class="detail-item full-width">
|
||||
<span class="detail-label">文件路径</span>
|
||||
<span class="detail-value code">{{ inspectingAppDetails.mainModulePath }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文件详情 -->
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">文件详情</h4>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">公司</span>
|
||||
<span class="detail-value">{{ inspectingAppDetails.companyName }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">版本</span>
|
||||
<span class="detail-value">{{ inspectingAppDetails.version }}</span>
|
||||
</div>
|
||||
<div class="detail-item full-width">
|
||||
<span class="detail-label">版权</span>
|
||||
<span class="detail-value">{{ inspectingAppDetails.legalCopyright }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流量统计 -->
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">流量统计</h4>
|
||||
<h4 class="detail-section-title">流量概览 (模拟)</h4>
|
||||
<div class="traffic-stats">
|
||||
<div class="traffic-item">
|
||||
<span class="traffic-label">上传</span>
|
||||
@@ -65,107 +84,129 @@
|
||||
<span class="traffic-label">下载</span>
|
||||
<span class="traffic-value download">{{ trafficData.download }}</span>
|
||||
</div>
|
||||
<div class="traffic-item">
|
||||
<span class="traffic-label">总计</span>
|
||||
<span class="traffic-value total">{{ trafficData.total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TrafficChart :data="chartData" />
|
||||
</div>
|
||||
|
||||
<!-- 安全信息 -->
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">安全信息</h4>
|
||||
<div class="security-info">
|
||||
<div class="security-item safe">
|
||||
<div class="security-icon">✅</div>
|
||||
<div class="security-text">
|
||||
<div class="security-title">连接安全</div>
|
||||
<div class="security-desc">HTTPS 加密连接</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="security-item safe">
|
||||
<div class="security-icon">🛡️</div>
|
||||
<div class="security-text">
|
||||
<div class="security-title">证书有效</div>
|
||||
<div class="security-desc">由 Google Trust Services 签发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<!-- 加载或空状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<div class="empty-icon">📊</div>
|
||||
<div class="empty-text">选择一个连接以查看详情</div>
|
||||
<div v-if="selectedApp" class="empty-icon">⏳</div>
|
||||
<div v-else class="empty-icon">📊</div>
|
||||
<div class="empty-text">
|
||||
{{ selectedApp ? '正在加载应用详情...' : '从左侧选择一个应用以查看详情' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import TrafficChart from './components/TrafficChart.vue'
|
||||
// 假设我们有一个连接状态的store，将来可以添加
|
||||
// import { useConnectionStore } from '@/stores/connection'
|
||||
import { useApplicationStore } from '@/stores/application'
|
||||
import { useWebSocketStore } from '@/stores/websocketStore'
|
||||
import { httpClient } from '@/utils/http'
|
||||
import { SubscriptionInfo } from '@/types/response'
|
||||
import { convertFileSize } from '@/utils/fileUtil'
|
||||
import { FILE_SIZE_UNIT_ENUM } from '@/constants/enums'
|
||||
|
||||
// Props - 只保留布局相关的
|
||||
const props = defineProps<{
|
||||
// Props
|
||||
defineProps<{
|
||||
width: number
|
||||
}>()
|
||||
|
||||
// 从store获取选中的连接 - 将来可以从pinia获取
|
||||
// const connectionStore = useConnectionStore()
|
||||
// const { selectedConnection } = storeToRefs(connectionStore)
|
||||
// Store
|
||||
const applicationStore = useApplicationStore()
|
||||
const webSocketStore = useWebSocketStore()
|
||||
const { selectedApp, inspectingAppDetails, isInspecting } = storeToRefs(applicationStore)
|
||||
const { isOpen } = storeToRefs(webSocketStore)
|
||||
|
||||
// 临时使用ref，将来替换为store
|
||||
const selectedConnection = ref<any>(null)
|
||||
|
||||
// 状态文本映射
|
||||
const getStatusText = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
established: '已建立',
|
||||
listening: '监听中',
|
||||
close_wait: '等待关闭',
|
||||
time_wait: '时间等待',
|
||||
closed: '已关闭'
|
||||
// 订阅应用详情
|
||||
const subscribeToAppDetails = (appPath: string) => {
|
||||
if (!isOpen.value) return
|
||||
console.log(`Subscribing to app details for: ${appPath}`)
|
||||
const subInfo = {
|
||||
subscriptionType: 'AppDetailInfoSubscribe',
|
||||
interval: 1000,
|
||||
applicationPath: appPath,
|
||||
}
|
||||
return statusMap[status] || status
|
||||
httpClient.post('/subscribe-appinfo', JSON.stringify(subInfo)).catch((err) => {
|
||||
console.error('Failed to subscribe to app details:', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 流量数据
|
||||
const trafficData = computed(() => {
|
||||
if (!selectedConnection.value) {
|
||||
return { upload: '0 B', download: '0 B', total: '0 B' }
|
||||
// 取消订阅应用详情
|
||||
const unsubscribeFromAppDetails = () => {
|
||||
if (!isOpen.value) return
|
||||
console.log('Unsubscribing from app details')
|
||||
const subInfo: SubscriptionInfo = {
|
||||
subscriptionType: 'AppDetailInfoSubscribe',
|
||||
interval: 0,
|
||||
}
|
||||
httpClient.post('/unsubscribe', JSON.stringify(subInfo)).catch((err) => {
|
||||
console.error('Failed to unsubscribe from app details:', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 模拟数据 - 将来可以从store或API获取真实数据
|
||||
// 监听选中的应用变化
|
||||
watch(
|
||||
selectedApp,
|
||||
(newApp, oldApp) => {
|
||||
// 清空旧的详情
|
||||
applicationStore.setInspectingAppDetails(null)
|
||||
|
||||
if (newApp) {
|
||||
// 订阅新的应用详情
|
||||
if (newApp.mainModulePath) {
|
||||
subscribeToAppDetails(newApp.mainModulePath)
|
||||
}
|
||||
} else if (oldApp) {
|
||||
// 如果没有新应用选中（例如列表清空），取消订阅
|
||||
unsubscribeFromAppDetails()
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
// 组件挂载时，如果已有选中的应用，则触发一次订阅
|
||||
if (selectedApp.value && selectedApp.value.mainModulePath) {
|
||||
subscribeToAppDetails(selectedApp.value.mainModulePath)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// 组件卸载时取消订阅
|
||||
unsubscribeFromAppDetails()
|
||||
// 清空详情
|
||||
applicationStore.setInspectingAppDetails(null)
|
||||
})
|
||||
|
||||
// 格式化内存显示
|
||||
const formatMemory = (memoryInBytes: number): string => {
|
||||
if (!memoryInBytes) return '0 B'
|
||||
const result = convertFileSize(memoryInBytes, FILE_SIZE_UNIT_ENUM.B)
|
||||
return result.size + result.unit
|
||||
}
|
||||
|
||||
// 模拟流量数据
|
||||
const trafficData = computed(() => {
|
||||
if (!isInspecting.value) {
|
||||
return { upload: '0 B', download: '0 B' }
|
||||
}
|
||||
// 将来可以从API获取真实数据
|
||||
return {
|
||||
upload: '1.2 MB',
|
||||
download: '5.8 MB',
|
||||
total: '7.0 MB'
|
||||
}
|
||||
})
|
||||
|
||||
// 图表数据
|
||||
// 模拟图表数据
|
||||
const chartData = computed(() => {
|
||||
// 生成模拟的流量图表数据 - 将来可以从store获取真实数据
|
||||
return Array.from({ length: 20 }, () => Math.random() * 100)
|
||||
})
|
||||
|
||||
// 提供一个方法让外部组件设置选中的连接（过渡期使用）
|
||||
// 将来可以移除，直接通过store管理
|
||||
const setSelectedConnection = (connection: any) => {
|
||||
selectedConnection.value = connection
|
||||
}
|
||||
|
||||
// 暴露方法给父组件（如果需要的话）
|
||||
defineExpose({
|
||||
setSelectedConnection
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -217,7 +258,7 @@ defineExpose({
|
||||
|
||||
/* 详情区块 */
|
||||
.detail-section {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.detail-section:last-child {
|
||||
@@ -233,6 +274,61 @@ defineExpose({
|
||||
border-bottom: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
/* 应用头部 */
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
background: var(--bg-tertiary);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.app-icon-placeholder {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.app-title-group {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin: 4px 0 0 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 基本信息网格 */
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
@@ -244,6 +340,11 @@ defineExpose({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detail-item.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
@@ -258,40 +359,19 @@ defineExpose({
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.detail-value.status-established {
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
/* 网络信息 */
|
||||
.network-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.network-item {
|
||||
padding: 12px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.network-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.network-value {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
.detail-value.code {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-weight: 500;
|
||||
background: var(--bg-card);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* 流量统计 */
|
||||
@@ -331,54 +411,6 @@ defineExpose({
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.traffic-value.total {
|
||||
color: var(--accent-purple);
|
||||
}
|
||||
|
||||
/* 安全信息 */
|
||||
.security-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.security-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-tertiary);
|
||||
}
|
||||
|
||||
.security-item.safe {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
font-size: 16px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.security-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
@@ -388,17 +420,31 @@ defineExpose({
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
animation: pulse 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
|
||||
Reference in new issue
Block a user