add(login):完善登录逻辑
This commit is contained in:
parent
6ca7a8275c
commit
82652efed7
@ -34,7 +34,6 @@ namespace IM_API.Hubs
|
||||
}
|
||||
var userIdStr = Context.User.FindFirstValue(ClaimTypes.NameIdentifier);
|
||||
await _messageService.SendPrivateMessageAsync(int.Parse(userIdStr),dto.ReceiverId,dto);
|
||||
await Clients.Caller.SendAsync("ReceiveMessage",userIdStr,"qfqwfqwfqw");
|
||||
await Clients.Users(dto.ReceiverId.ToString()).SendAsync("ReceiveMessage", userIdStr, dto.Content);
|
||||
return;
|
||||
}
|
||||
|
||||
1
frontend/web/.env
Normal file
1
frontend/web/.env
Normal file
@ -0,0 +1 @@
|
||||
VITE_API_BASE_URL = http://localhost:5202/api
|
||||
280
frontend/web/package-lock.json
generated
280
frontend/web/package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "web",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.13.2",
|
||||
"feather-icons": "^4.29.2",
|
||||
"pinia": "^3.0.3",
|
||||
"vue": "^3.5.22",
|
||||
@ -2626,6 +2627,23 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"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.13.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
|
||||
"integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.4",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -2752,6 +2770,19 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||
@ -2853,6 +2884,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.npmjs.org/commander/-/commander-10.0.1.tgz",
|
||||
@ -3076,6 +3119,29 @@
|
||||
"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/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/eastasianwidth": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
||||
@ -3155,6 +3221,24 @@
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-module-lexer": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
|
||||
@ -3162,6 +3246,33 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/es-object-atoms": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"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.10",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz",
|
||||
@ -3708,6 +3819,26 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"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.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
|
||||
@ -3725,6 +3856,22 @@
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
|
||||
"integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
|
||||
"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/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
@ -3740,6 +3887,15 @@
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||
@ -3750,6 +3906,43 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"has-symbols": "^1.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"math-intrinsics": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
"es-object-atoms": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/get-stream": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
|
||||
@ -3814,6 +4007,18 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
@ -3824,6 +4029,45 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"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.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/hookable": {
|
||||
"version": "5.5.3",
|
||||
"resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
|
||||
@ -4342,6 +4586,15 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.12.2",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
|
||||
@ -4373,6 +4626,27 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"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/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/minimatch": {
|
||||
"version": "9.0.5",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
|
||||
@ -4846,6 +5120,12 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"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.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.13.2",
|
||||
"feather-icons": "^4.29.2",
|
||||
"pinia": "^3.0.3",
|
||||
"vue": "^3.5.22",
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
@ -9,11 +11,14 @@
|
||||
<!---
|
||||
</WindowLayout>
|
||||
-->
|
||||
<Alert></Alert>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import WindowLayout from './components/Window.vue'
|
||||
import Alert from '@/components/messages/Alert.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -4,13 +4,19 @@
|
||||
<div class="field-wrap">
|
||||
<i class="icon" :data-feather="props.iconName" ref="iconElement"></i>
|
||||
|
||||
<input :type="props.type" v-model="inputValue" :placeholder="props.placeholder" />
|
||||
<input :type="props.type" v-model="inputValue" :placeholder="props.placeholder" v-bind="attrs"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 使用 Options API 块设置配置选项
|
||||
export default {
|
||||
// 阻止父组件透传的属性（如 @click, style, data-*）默认应用到根元素 <div> 上
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import { ref, defineProps, onMounted, watch, computed } from 'vue';
|
||||
import { ref, defineProps, onMounted, watch, computed, useAttrs } from 'vue';
|
||||
import feather from 'feather-icons';
|
||||
|
||||
const props = defineProps({
|
||||
@ -36,7 +42,7 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const attrs = useAttrs()
|
||||
const inputValue = computed({
|
||||
get(){
|
||||
return props.modelValue;
|
||||
@ -128,7 +134,6 @@ label {
|
||||
}
|
||||
|
||||
.field-wrap input {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
background: #f1f5f9; /* 浅灰底色 */
|
||||
border: 2px solid transparent;
|
||||
|
||||
@ -2,14 +2,21 @@
|
||||
<div id="btn">
|
||||
<button
|
||||
class="submit-btn"
|
||||
:disabled="props.disabled"
|
||||
v-bind="attrs"
|
||||
:disabled="props.disabled || props.loading" v-bind="attrs"
|
||||
:class="[
|
||||
`variant-${props.variant}`, // 动态绑定样式类
|
||||
{ 'is-loading': props.loading } // 加载状态类
|
||||
`variant-${props.variant}`,
|
||||
{ 'is-loading': props.loading }
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
<span v-if="props.loading" class="spinner-icon"></span>
|
||||
|
||||
<span :class="{ 'is-hidden': props.loading }">
|
||||
<slot></slot>
|
||||
|
||||
</span>
|
||||
<div class="iconBox" v-show="!props.loading"><slot name="icon"></slot></div>
|
||||
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@ -24,7 +31,6 @@ export default {
|
||||
|
||||
<script setup>
|
||||
import { defineProps, useAttrs, onMounted } from 'vue';
|
||||
import feather from 'feather-icons'
|
||||
|
||||
const props = defineProps({
|
||||
// 按钮样式变体：primary, secondary, danger, text
|
||||
@ -127,4 +133,77 @@ const attrs = useAttrs()
|
||||
background: transparent;
|
||||
color: #4338ca;
|
||||
}
|
||||
/* 按钮基础样式 (假设你已有一些基础样式) */
|
||||
.submit-btn {
|
||||
position: relative; /* 确保 spinner-icon 可以相对于按钮定位 */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
1. 加载状态：is-loading
|
||||
======================================= */
|
||||
.submit-btn.is-loading {
|
||||
/* 视觉反馈：半透明、改变颜色或禁用 */
|
||||
opacity: 0.8;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none; /* 确保点击穿透 */
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
2. 旋转图标样式：spinner-icon
|
||||
======================================= */
|
||||
.submit-btn .spinner-icon {
|
||||
display: inline-block;
|
||||
width: 1em; /* 旋转图标的宽度 */
|
||||
height: 1em; /* 旋转图标的高度 */
|
||||
border: 2px solid currentColor; /* 边框颜色继承自按钮文本颜色 */
|
||||
border-top-color: transparent; /* 顶部透明，形成旋转的缺口 */
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite; /* 应用旋转动画 */
|
||||
margin-right: 0.5em; /* 在图标和文本之间添加间距 */
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 在加载状态且有文本时，清除右边距 */
|
||||
.submit-btn.is-loading .spinner-icon {
|
||||
/* 如果按钮内容被隐藏了，这个 margin 应该根据你的布局决定是否清除 */
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
3. 文本隐藏样式
|
||||
======================================= */
|
||||
.is-hidden {
|
||||
/* 隐藏文本，但不移除它，保持布局稳定 */
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* =======================================
|
||||
4. 旋转动画定义
|
||||
======================================= */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
frontend/web/src/components/messages/Alert.vue
Normal file
93
frontend/web/src/components/messages/Alert.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import { useMessage } from './useAlert';
|
||||
|
||||
// 获取全局状态和移除方法
|
||||
const { messages, remove } = useMessage();
|
||||
|
||||
// 图标配置
|
||||
const icons = {
|
||||
success: `<svg class="w-5 h-5" fill="none" stroke="#10B981" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
|
||||
error: `<svg class="w-5 h-5" fill="none" stroke="#EF4444" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
|
||||
warning: `<svg class="w-5 h-5" fill="none" stroke="#F59E0B" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>`,
|
||||
info: `<svg class="w-5 h-5" fill="none" stroke="#3B82F6" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="msg-container">
|
||||
<TransitionGroup name="msg-fade">
|
||||
<div
|
||||
v-for="item in messages"
|
||||
:key="item.id"
|
||||
class="msg-card"
|
||||
@click="remove(item.id)"
|
||||
>
|
||||
<div class="msg-icon" v-html="icons[item.type]"></div>
|
||||
<span class="msg-text">{{ item.content }}</span>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.msg-container {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
pointer-events: none; /* 重要：让鼠标能点击背后的页面 */
|
||||
}
|
||||
|
||||
.msg-card {
|
||||
pointer-events: auto; /* 恢复卡片可点击 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 18px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 50px;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0, 0, 0, 0.08),
|
||||
0 0 0 1px rgba(0,0,0,0.02);
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.msg-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* 深度选择器控制 SVG 大小 */
|
||||
.msg-icon :deep(svg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.msg-text {
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 动画部分 */
|
||||
.msg-fade-enter-active,
|
||||
.msg-fade-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更有弹性的贝塞尔曲线 */
|
||||
}
|
||||
|
||||
.msg-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.9);
|
||||
}
|
||||
|
||||
.msg-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
</style>
|
||||
48
frontend/web/src/components/messages/useAlert.js
Normal file
48
frontend/web/src/components/messages/useAlert.js
Normal file
@ -0,0 +1,48 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 1. 定义全局共享的状态 (单例模式)
|
||||
const messages = ref([]);
|
||||
let idCounter = 0;
|
||||
|
||||
export function useMessage() {
|
||||
|
||||
// 移除弹窗
|
||||
const remove = (id) => {
|
||||
const index = messages.value.findIndex(item => item.id === id);
|
||||
if (index !== -1) {
|
||||
messages.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加弹窗
|
||||
// type: 'success' | 'error' | 'warning' | 'info'
|
||||
const show = (content, type = 'info', duration = 3000) => {
|
||||
const id = idCounter++;
|
||||
const message = { id, content, type };
|
||||
|
||||
messages.value.push(message);
|
||||
|
||||
// 自动销毁
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
remove(id);
|
||||
}, duration);
|
||||
}
|
||||
};
|
||||
|
||||
// 快捷方法
|
||||
const success = (content) => show(content, 'success');
|
||||
const error = (content) => show(content, 'error');
|
||||
const warning = (content) => show(content, 'warning');
|
||||
const info = (content) => show(content, 'info');
|
||||
|
||||
return {
|
||||
messages, // 导出给组件渲染用
|
||||
show,
|
||||
remove,
|
||||
success,
|
||||
error,
|
||||
warning,
|
||||
info
|
||||
};
|
||||
}
|
||||
@ -4,9 +4,14 @@ import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import MyButton from './components/MyButton.vue'
|
||||
import IconInput from './components/IconInput.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.component('MyButton', MyButton)
|
||||
app.component('IconInput', IconInput)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
54
frontend/web/src/services/api.js
Normal file
54
frontend/web/src/services/api.js
Normal file
@ -0,0 +1,54 @@
|
||||
import axios from 'axios'
|
||||
import { useMessage } from '@/components/messages/useAlert';
|
||||
import router from '@/router';
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api', // 从环境变量中读取基础 URL
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
})
|
||||
|
||||
api.interceptors.request.use(
|
||||
config => {
|
||||
const token = localStorage.getItem('authToken');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
err => {
|
||||
return Promise.reject(err);
|
||||
}
|
||||
)
|
||||
|
||||
api.interceptors.response.use(
|
||||
response => {
|
||||
return response.data;
|
||||
},
|
||||
err => {
|
||||
if (err.response) {
|
||||
switch (err.response.status) {
|
||||
case 401:
|
||||
message.error('未登录，请登录后操作。');
|
||||
router.push('/auth/login')
|
||||
break;
|
||||
default:
|
||||
message.error('请求错误，请检查网络。');
|
||||
break;
|
||||
}
|
||||
}
|
||||
return Promise.reject(err);
|
||||
}
|
||||
)
|
||||
|
||||
export const request = {
|
||||
get: (url, config) => api.get(url, config),
|
||||
post: (url, data, config) => api.post(url, data, config),
|
||||
put: (url, data, config) => api.put(url, data, config),
|
||||
delete: (url, config) => api.delete(url, config),
|
||||
instance: api,
|
||||
};
|
||||
11
frontend/web/src/services/auth.js
Normal file
11
frontend/web/src/services/auth.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { request } from "./api";
|
||||
|
||||
export const authService = {
|
||||
/**
|
||||
* 用户登录接口
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
login: (data) => request.post('/auth/login', data),
|
||||
register: (data) => request.post('/auth/register', data)
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<div id="Test">
|
||||
<MyInput icon-name="user"></MyInput>
|
||||
<MyButton >登录...</MyButton>
|
||||
<MyButton @click="handler">登录...</MyButton>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -10,7 +10,12 @@
|
||||
<script setup>
|
||||
import MyInput from '@/components/IconInput.vue';
|
||||
import MyButton from '@/components/MyButton.vue';
|
||||
import { useMessage } from '@/components/messages/useAlert';
|
||||
|
||||
const message = useMessage();
|
||||
const handler = () => {
|
||||
message.success('成功')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<p class="hero-subtitle">下一代企业级即时通讯平台，让沟通无距离。</p>
|
||||
</div>
|
||||
<div class="visual-footer">
|
||||
<span>© 2024 IM System</span>
|
||||
<span>© 2025 IM System</span>
|
||||
<div class="dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
@ -23,35 +23,14 @@
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="input-group">
|
||||
<label>用户名 / 邮箱</label>
|
||||
<div class="field-wrap">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
<input type="text" v-model="form.username" placeholder="name@company.com" />
|
||||
</div>
|
||||
</div>
|
||||
<IconInput class="input" placeholder="请输入用户名" lab="用户名 / 邮箱" type="text" icon-name="user" v-model="form.username"/>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="label-row">
|
||||
<label>密码</label>
|
||||
<a href="#" class="forgot-link">忘记密码?</a>
|
||||
</div>
|
||||
<div class="field-wrap">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||||
</svg>
|
||||
<input type="password" v-model="form.password" placeholder="••••••••" />
|
||||
</div>
|
||||
</div>
|
||||
<IconInput class="input" placeholder="请输入密码" lab="密码" type="password" icon-name="user" v-model="form.password"/>
|
||||
|
||||
<button class="submit-btn" :disabled="loading">
|
||||
{{ loading ? '登录中...' : '登 录' }}
|
||||
<svg v-if="!loading" viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="arrow"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
||||
</button>
|
||||
<MyButton class="loginBtn" :loading="loading">
|
||||
登录
|
||||
<template #icon><i data-feather="arrow-right"></i></template>
|
||||
</MyButton>
|
||||
</form>
|
||||
|
||||
<div class="register-hint">
|
||||
@ -64,7 +43,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { useMessage } from '@/components/messages/useAlert'
|
||||
import { authService } from '@/services/auth'
|
||||
import { useRouter } from 'vue-router'
|
||||
import feather from 'feather-icons'
|
||||
|
||||
const message = useMessage()
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(false)
|
||||
const form = reactive({
|
||||
@ -72,13 +58,37 @@ const form = reactive({
|
||||
password: ''
|
||||
})
|
||||
|
||||
const handleLogin = () => {
|
||||
loading.value = true
|
||||
setTimeout(() => loading.value = false, 1500)
|
||||
const handleLogin = async () => {
|
||||
try{
|
||||
loading.value = true;
|
||||
const res = await authService.login(form);
|
||||
if(res.code === 0){
|
||||
message.success('登陆成功。')
|
||||
loading.value = false;
|
||||
router.push('/index')
|
||||
}else{
|
||||
message.error(res.message)
|
||||
loading.value = false;
|
||||
}
|
||||
}finally{
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
feather.replace()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.loginBtn) {
|
||||
width: 100%;
|
||||
}
|
||||
:deep(.input){
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 撑满 Window 组件的内容区 */
|
||||
.login-layout {
|
||||
display: flex;
|
||||
@ -127,6 +137,7 @@ const handleLogin = () => {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
.visual-footer {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
@ -175,94 +186,6 @@ const handleLogin = () => {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.label-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.forgot-link {
|
||||
font-size: 12px;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 输入框样式：现代填充风格 */
|
||||
.field-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.field-wrap .icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #94a3b8;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.field-wrap input {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
background: #f1f5f9; /* 浅灰底色 */
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 聚焦交互 */
|
||||
.field-wrap input:focus {
|
||||
background: #fff;
|
||||
border-color: #4f46e5; /* 品牌色 */
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
.field-wrap input:focus + .icon,
|
||||
.field-wrap input:focus ~ .icon {
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
}
|
||||
.submit-btn:hover {
|
||||
background: #4338ca;
|
||||
}
|
||||
.submit-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.register-hint {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
@ -289,4 +212,8 @@ label {
|
||||
.visual-footer { display: none; }
|
||||
.side-form { flex: 1; padding: 24px; }
|
||||
}
|
||||
|
||||
.feather-arrow-right{
|
||||
width: 18px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user