ZhouXY108
/
plusone-admin-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit codes.

main
ZhouXY108 2022-12-29 17:53:22 +08:00
parent d52055a0ae
commit d81542921b
18 changed files with 871 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -11,13 +11,16 @@
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"axios": "^1.2.2",
"pinia": "^2.0.28",
"qs": "^6.11.0",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.1.4",
"@types/node": "^18.11.12",
"@types/qs": "^6.9.7",
"@vicons/fluent": "^0.12.0",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/eslint-config-prettier": "^7.0.0",

107
pnpm-lock.yaml
View File

@ -3,17 +3,20 @@ lockfileVersion: 5.4
specifiers:
'@rushstack/eslint-patch': ^1.1.4
'@types/node': ^18.11.12
'@types/qs': ^6.9.7
'@vicons/fluent': ^0.12.0
'@vitejs/plugin-vue': ^4.0.0
'@vue/eslint-config-prettier': ^7.0.0
'@vue/eslint-config-typescript': ^11.0.0
'@vue/tsconfig': ^0.1.3
axios: ^1.2.2
eslint: ^8.22.0
eslint-plugin-vue: ^9.3.0
naive-ui: ^2.34.3
npm-run-all: ^4.1.5
pinia: ^2.0.28
prettier: ^2.7.1
qs: ^6.11.0
typescript: ~4.7.4
vfonts: ^0.0.3
vite: ^4.0.0
@ -22,13 +25,16 @@ specifiers:
vue-tsc: ^1.0.12
dependencies:
axios: registry.npmmirror.com/axios/1.2.2
pinia: registry.npmmirror.com/pinia/2.0.28_e7lp6ggkpgyi5vqd44m2kxvk6i
qs: registry.npmmirror.com/qs/6.11.0
vue: registry.npmmirror.com/vue/3.2.45
vue-router: registry.npmmirror.com/vue-router/4.1.6_vue@3.2.45
devDependencies:
'@rushstack/eslint-patch': registry.npmmirror.com/@rushstack/eslint-patch/1.2.0
'@types/node': registry.npmmirror.com/@types/node/18.11.18
'@types/qs': registry.npmmirror.com/@types/qs/6.9.7
'@vicons/fluent': registry.npmmirror.com/@vicons/fluent/0.12.0
'@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/4.0.0_vite@4.0.3+vue@3.2.45
'@vue/eslint-config-prettier': registry.npmmirror.com/@vue/eslint-config-prettier/7.0.0_l5rdqc4k22455lce6ocqroldia
@ -463,6 +469,12 @@ packages:
version: 18.11.18
dev: true
registry.npmmirror.com/@types/qs/6.9.7:
resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/qs/-/qs-6.9.7.tgz}
name: '@types/qs'
version: 6.9.7
dev: true
registry.npmmirror.com/@types/semver/7.3.13:
resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/semver/-/semver-7.3.13.tgz}
name: '@types/semver'
@ -916,6 +928,24 @@ packages:
version: 4.2.5
dev: true
registry.npmmirror.com/asynckit/0.4.0:
resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz}
name: asynckit
version: 0.4.0
dev: false
registry.npmmirror.com/axios/1.2.2:
resolution: {integrity: sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/axios/-/axios-1.2.2.tgz}
name: axios
version: 1.2.2
dependencies:
follow-redirects: registry.npmmirror.com/follow-redirects/1.15.2
form-data: registry.npmmirror.com/form-data/4.0.0
proxy-from-env: registry.npmmirror.com/proxy-from-env/1.1.0
transitivePeerDependencies:
- debug
dev: false
registry.npmmirror.com/balanced-match/1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz}
name: balanced-match
@ -961,7 +991,6 @@ packages:
dependencies:
function-bind: registry.npmmirror.com/function-bind/1.1.1
get-intrinsic: registry.npmmirror.com/get-intrinsic/1.1.3
dev: true
registry.npmmirror.com/callsites/3.1.0:
resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz}
@ -1020,6 +1049,15 @@ packages:
version: 1.1.4
dev: true
registry.npmmirror.com/combined-stream/1.0.8:
resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz}
name: combined-stream
version: 1.0.8
engines: {node: '>= 0.8'}
dependencies:
delayed-stream: registry.npmmirror.com/delayed-stream/1.0.0
dev: false
registry.npmmirror.com/concat-map/0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz}
name: concat-map
@ -1132,6 +1170,13 @@ packages:
object-keys: registry.npmmirror.com/object-keys/1.1.1
dev: true
registry.npmmirror.com/delayed-stream/1.0.0:
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz}
name: delayed-stream
version: 1.0.0
engines: {node: '>=0.4.0'}
dev: false
registry.npmmirror.com/dir-glob/3.0.1:
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz}
name: dir-glob
@ -1548,6 +1593,29 @@ packages:
version: 3.2.7
dev: true
registry.npmmirror.com/follow-redirects/1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz}
name: follow-redirects
version: 1.15.2
engines: {node: '>=4.0'}
peerDependencies:
debug: '*'
peerDependenciesMeta:
debug:
optional: true
dev: false
registry.npmmirror.com/form-data/4.0.0:
resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz}
name: form-data
version: 4.0.0
engines: {node: '>= 6'}
dependencies:
asynckit: registry.npmmirror.com/asynckit/0.4.0
combined-stream: registry.npmmirror.com/combined-stream/1.0.8
mime-types: registry.npmmirror.com/mime-types/2.1.35
dev: false
registry.npmmirror.com/fs.realpath/1.0.0:
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz}
name: fs.realpath
@ -1568,7 +1636,6 @@ packages:
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz}
name: function-bind
version: 1.1.1
dev: true
registry.npmmirror.com/function.prototype.name/1.1.5:
resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz}
@ -1596,7 +1663,6 @@ packages:
function-bind: registry.npmmirror.com/function-bind/1.1.1
has: registry.npmmirror.com/has/1.0.3
has-symbols: registry.npmmirror.com/has-symbols/1.0.3
dev: true
registry.npmmirror.com/get-symbol-description/1.0.0:
resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz}
@ -1715,7 +1781,6 @@ packages:
name: has-symbols
version: 1.0.3
engines: {node: '>= 0.4'}
dev: true
registry.npmmirror.com/has-tostringtag/1.0.0:
resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz}
@ -1733,7 +1798,6 @@ packages:
engines: {node: '>= 0.4.0'}
dependencies:
function-bind: registry.npmmirror.com/function-bind/1.1.1
dev: true
registry.npmmirror.com/he/1.2.0:
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/he/-/he-1.2.0.tgz}
@ -2071,6 +2135,22 @@ packages:
picomatch: registry.npmmirror.com/picomatch/2.3.1
dev: true
registry.npmmirror.com/mime-db/1.52.0:
resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz}
name: mime-db
version: 1.52.0
engines: {node: '>= 0.6'}
dev: false
registry.npmmirror.com/mime-types/2.1.35:
resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz}
name: mime-types
version: 2.1.35
engines: {node: '>= 0.6'}
dependencies:
mime-db: registry.npmmirror.com/mime-db/1.52.0
dev: false
registry.npmmirror.com/minimatch/3.1.2:
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz}
name: minimatch
@ -2195,7 +2275,6 @@ packages:
resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.2.tgz}
name: object-inspect
version: 1.12.2
dev: true
registry.npmmirror.com/object-keys/1.1.1:
resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz}
@ -2417,6 +2496,12 @@ packages:
hasBin: true
dev: true
registry.npmmirror.com/proxy-from-env/1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz}
name: proxy-from-env
version: 1.1.0
dev: false
registry.npmmirror.com/punycode/2.1.1:
resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz}
name: punycode
@ -2424,6 +2509,15 @@ packages:
engines: {node: '>=6'}
dev: true
registry.npmmirror.com/qs/6.11.0:
resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz}
name: qs
version: 6.11.0
engines: {node: '>=0.6'}
dependencies:
side-channel: registry.npmmirror.com/side-channel/1.0.4
dev: false
registry.npmmirror.com/queue-microtask/1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz}
name: queue-microtask
@ -2590,7 +2684,6 @@ packages:
call-bind: registry.npmmirror.com/call-bind/1.0.2
get-intrinsic: registry.npmmirror.com/get-intrinsic/1.1.3
object-inspect: registry.npmmirror.com/object-inspect/1.12.2
dev: true
registry.npmmirror.com/slash/3.0.0:
resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz}

10
src/App.vue
View File

@ -11,12 +11,14 @@ import { NConfigProvider, type GlobalThemeOverrides } from 'naive-ui'
const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#42b883',
primaryColor: '#6777ef',
primaryColorHover: 'rgba(103, 119, 239, 0.8)',
primaryColorPressed: '#515dbc',
borderRadius: '4px',
},
// Button: {
// textColor: '#FF0000',
// },
Button: {
fontSizeLarge: '18px',
},
// Select: {
// peers: {
// InternalSelection: {

9
src/views/HomeView/HomeView.vue → src/layouts/MainPage/MainPage.vue
View File

@ -29,23 +29,20 @@
<SiderMenu :collapsed="collapsed" invertedBackgroundColor="#282c34" :inverted="dark" />
</n-layout-sider>
<n-layout-content content-style="padding: 24px;" :native-scrollbar="false">
平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
<router-view />
</n-layout-content>
</n-layout>
</n-layout>
</template>
<script lang="ts">
import { defineComponent, h, ref, computed, type Component } from 'vue'
import { defineComponent, ref, computed } from 'vue'
import Logo from './components/Logo.vue'
import SiderMenu from './components/SiderMenu.vue'
export default defineComponent({
name: 'HomeView',
name: 'MainPage',
components: {
Logo,
SiderMenu,

0
src/views/HomeView/components/Logo.vue → src/layouts/MainPage/components/Logo.vue
View File

0
src/views/HomeView/components/MenuVO.ts → src/layouts/MainPage/components/MenuVO.ts
View File

6
src/views/HomeView/components/SiderMenu.vue → src/layouts/MainPage/components/SiderMenu.vue
View File

@ -56,7 +56,7 @@ const menuOptions: MenuOption[] = [
RouterLink,
{
to: {
name: 'home',
name: '404',
params: {
lang: 'zh-CN',
},
@ -64,7 +64,7 @@ const menuOptions: MenuOption[] = [
},
{ default: () => '回家' }
),
key: '/',
key: '404',
icon: renderIcon('Home20Regular'),
},
{
@ -98,6 +98,6 @@ const menuOptions: MenuOption[] = [
// ActiveKey
const route = useRoute()
const activeKey = computed(() => {
return route.path
return route.name
})
</script>

16
src/main.ts
View File

@ -5,6 +5,10 @@ import App from './App.vue'
import router from './router'
import './assets/main.css'
// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'
import {
// create naive ui
@ -21,10 +25,12 @@ import {
NForm,
NFormItem,
NInput,
NRow,
NCol,
NGrid,
NGridItem,
NMessageProvider,
NCard,
NCheckbox,
NCheckboxGroup,
} from 'naive-ui'
const naive = create({
@ -40,10 +46,12 @@ const naive = create({
NForm,
NFormItem,
NInput,
NRow,
NCol,
NGrid,
NGridItem,
NMessageProvider,
NCard,
NCheckbox,
NCheckboxGroup,
],
})

16
src/router/index.ts
View File

@ -1,18 +1,26 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView/HomeView.vue'
import LoginView from '../views/LoginView/LoginView.vue'
import MainPage from '../layouts/MainPage/MainPage.vue'
import Login from '../views/Login/Login.vue'
import Page404 from '../views/404/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
redirect: '/login',
component: MainPage,
children: [
{
path: '404',
name: '404',
component: Page404,
},
],
},
{
path: '/login',
name: 'login',
component: LoginView,
component: Login,
},
],
})

13
src/type/PrincipalType.ts 100644
View File

@ -0,0 +1,13 @@
export enum PrincipalType {
EMAIL,
MOBILE_PHONE,
USERNAME,
}
export const regexConsts = {
email: /^\w+([-+.]\w+)*@[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})*(\.(?![0-9]+$)[a-zA-Z0-9][-0-9A-Za-z]{0,62})$/,
mobilePhone: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
username: /^[\da-zA-Z_.@\\]{4,36}$/,
password: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w\\!#$%&'*+\-/=?^`{|}~@()[]",\.;':><]{8,32}$/,
}

0
src/utils/request.ts 100644
View File

181
src/views/ChangePassword/components/LoginByOTP.vue 100644
View File

@ -0,0 +1,181 @@
<template>
<div class="login-form-container">
<div class="title">
<span style="color: #6777ef">Plusone&nbsp;</span>
<span style="font-weight: 300">Admin</span>
</div>
<n-form
ref="formRef"
:model="model"
:rules="rules"
:show-feedback="false"
:show-label="false"
size="large"
>
<n-form-item path="principal">
<n-input
placeholder="邮箱地址 / 手机号"
v-model:value="model.principal"
@keydown.enter.prevent
/>
</n-form-item>
<n-grid y-gap="24" :cols="24">
<n-gi :span="15">
<n-form-item path="password">
<n-input
placeholder="验证码"
v-model:value="model.otp"
@input="handlePasswordInput"
@keydown.enter.prevent
/>
</n-form-item>
</n-gi>
<n-gi :span="9">
<div style="display: flex; justify-content: flex-end">
<n-button
class="txt-btn"
@click="handleBtnGetOTPClick"
size="large"
style="width： 100%"
>
获取验证码
</n-button>
</div>
</n-gi>
</n-grid>
<n-grid y-gap="24" :cols="2">
<n-gi>
<n-form-item path="rememberMe">
<n-checkbox v-model:checked="model.rememberMe" size="large">
<span style="color: #808080">保持登录状态</span>
</n-checkbox>
</n-form-item>
</n-gi>
<n-gi>
<div style="display: flex; justify-content: flex-end">
<n-button class="txt-btn" text @click="$emit('toLoginByPassword')">
密码登录
</n-button>
</div>
</n-gi>
</n-grid>
<n-button
type="primary"
size="large"
style="width: 100%; margin-top: 8px"
@click="handleBtnLoginClick"
>
登录
</n-button>
<div style="display: flex; justify-content: flex-end; margin-top: 8px">
<n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
<n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
</div>
</n-form>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
interface LoginByPasswordCommand {
principal: string
otp: string
rememberMe: boolean
}
const formRef = ref<FormInst | null>(null)
const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const model = ref<LoginByPasswordCommand>({
principal: '',
otp: '',
rememberMe: false,
})
const rules: FormRules = {
principal: [
{
required: true,
validator(rule: FormItemRule, value: string) {
if (!value) {
return new Error('需要年龄')
} else if (!/^\d*$/.test(value)) {
return new Error('年龄应该为整数')
} else if (Number(value) < 18) {
return new Error('年龄应该超过十八岁')
}
return true
},
trigger: ['input', 'blur'],
},
],
otp: [
{
required: true,
message: '请输入密码',
},
],
}
function handlePasswordInput() {
if (model.value.rememberMe) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
}
}
function handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
formRef.value?.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
console.log(errors)
message.error('验证失败')
}
})
}
function handleBtnGetOTPClick() {
console.log('handleBtnGetOTPClick')
}
</script>
<style scoped>
.login-form-container {
width: 320px;
background-color: #f3f3f3;
padding: 32px 40px;
border-radius: 6px;
border: solid 1px #e4e4e4;
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
border-top: solid 4px #6777ef;
}
.title {
font-size: 30px;
text-align: center;
margin-bottom: 16px;
}
.n-form-item {
margin-bottom: 8px;
}
.txt-btn {
line-height: 40px;
font-size: 15px;
color: #6777ef;
}
.txt-btn:hover {
color: rgba(103, 119, 239, 0.8);
}
</style>

161
src/views/ChangePassword/components/LoginByPassword.vue 100644
View File

@ -0,0 +1,161 @@
<template>
<div class="login-form-container">
<div class="title">
<span style="color: #6777ef">Plusone&nbsp;</span>
<span style="font-weight: 300">Admin</span>
</div>
<n-form
ref="formRef"
:model="model"
:rules="rules"
:show-feedback="false"
:show-label="false"
size="large"
>
<n-form-item path="principal">
<n-input
placeholder="用户名 / 邮箱地址 / 手机号"
v-model:value="model.principal"
@keydown.enter.prevent
/>
</n-form-item>
<n-form-item path="password">
<n-input
placeholder="密码"
v-model:value="model.password"
type="password"
@input="handlePasswordInput"
@keydown.enter.prevent
/>
</n-form-item>
<n-grid y-gap="24" :cols="2">
<n-gi>
<n-form-item path="rememberMe">
<n-checkbox v-model:checked="model.rememberMe" size="large">
<span style="color: #808080">保持登录状态</span>
</n-checkbox>
</n-form-item>
</n-gi>
<n-gi>
<div style="display: flex; justify-content: flex-end">
<n-button class="txt-btn" text @click="$emit('toLoginByOTP')"> 验证码登录 </n-button>
</div>
</n-gi>
</n-grid>
<n-button
type="primary"
size="large"
style="width: 100%; margin-top: 8px"
@click="handleBtnLoginClick"
>
登录
</n-button>
<div style="display: flex; justify-content: flex-end; margin-top: 8px">
<n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
<n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
</div>
</n-form>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
import type { PrincipalType } from '@/type/PrincipalType'
interface LoginByPasswordCommand {
principal: string
password: string
rememberMe: boolean
principalType?: PrincipalType
}
const formRef = ref<FormInst | null>(null)
const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const model = ref<LoginByPasswordCommand>({
principal: '',
password: '',
rememberMe: false,
})
const rules: FormRules = {
principal: [
{
required: true,
validator(rule: FormItemRule, value: string) {
if (!value) {
return new Error('需要年龄')
} else if (!/^\d*$/.test(value)) {
return new Error('年龄应该为整数')
} else if (Number(value) < 18) {
return new Error('年龄应该超过十八岁')
}
return true
},
trigger: ['input', 'blur'],
},
],
password: [
{
required: true,
message: '请输入密码',
},
],
}
function handlePasswordInput() {
if (model.value.rememberMe) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
}
}
function handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
formRef.value?.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
console.log(errors)
message.error('验证失败')
}
})
}
</script>
<style scoped>
.login-form-container {
width: 320px;
background-color: #f3f3f3;
padding: 32px 40px;
border-radius: 6px;
border: solid 1px #e4e4e4;
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
border-top: solid 4px #6777ef;
}
.title {
font-size: 30px;
text-align: center;
margin-bottom: 16px;
}
.n-form-item {
margin-bottom: 8px;
}
.txt-btn {
line-height: 40px;
font-size: 15px;
color: #6777ef;
}
.txt-btn:hover {
color: rgba(103, 119, 239, 0.8);
}
</style>

28
src/views/ChangePassword/index.vue 100644
View File

@ -0,0 +1,28 @@
<template>
<div class="login-page">
<LoginByPassword v-if="loginByPassword" @toLoginByOTP="loginByPassword = false" />
<LoginByOTP v-else @toLoginByPassword="loginByPassword = true" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import LoginByPassword from './components/LoginByPassword.vue'
import LoginByOTP from './components/LoginByOTP.vue'
const loginByPassword = ref(true)
</script>
<style scoped>
.login-page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: #666666;
}
</style>

28
src/views/Login/Login.vue 100644
View File

@ -0,0 +1,28 @@
<template>
<div class="login-page">
<LoginByPassword v-if="loginByPassword" @toLoginByOTP="loginByPassword = false" />
<LoginByOTP v-else @toLoginByPassword="loginByPassword = true" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import LoginByPassword from './components/LoginByPassword.vue'
import LoginByOTP from './components/LoginByOTP.vue'
const loginByPassword = ref(true)
</script>
<style scoped>
.login-page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: #666666;
}
</style>

181
src/views/Login/components/LoginByOTP.vue 100644
View File

@ -0,0 +1,181 @@
<template>
<div class="login-form-container">
<div class="title">
<span style="color: #6777ef">Plusone&nbsp;</span>
<span style="font-weight: 300">Admin</span>
</div>
<n-form
ref="formRef"
:model="model"
:rules="rules"
:show-feedback="false"
:show-label="false"
size="large"
>
<n-form-item path="principal">
<n-input
placeholder="邮箱地址 / 手机号"
v-model:value="model.principal"
@keydown.enter.prevent
/>
</n-form-item>
<n-grid y-gap="24" :cols="24">
<n-gi :span="15">
<n-form-item path="password">
<n-input
placeholder="验证码"
v-model:value="model.otp"
@input="handlePasswordInput"
@keydown.enter.prevent
/>
</n-form-item>
</n-gi>
<n-gi :span="9">
<div style="display: flex; justify-content: flex-end">
<n-button
class="txt-btn"
@click="handleBtnGetOTPClick"
size="large"
style="width： 100%"
>
获取验证码
</n-button>
</div>
</n-gi>
</n-grid>
<n-grid y-gap="24" :cols="2">
<n-gi>
<n-form-item path="rememberMe">
<n-checkbox v-model:checked="model.rememberMe" size="large">
<span style="color: #808080">保持登录状态</span>
</n-checkbox>
</n-form-item>
</n-gi>
<n-gi>
<div style="display: flex; justify-content: flex-end">
<n-button class="txt-btn" text @click="$emit('toLoginByPassword')">
密码登录
</n-button>
</div>
</n-gi>
</n-grid>
<n-button
type="primary"
size="large"
style="width: 100%; margin-top: 8px"
@click="handleBtnLoginClick"
>
登录
</n-button>
<div style="display: flex; justify-content: flex-end; margin-top: 8px">
<n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
<n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
</div>
</n-form>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
interface LoginByPasswordCommand {
principal: string
otp: string
rememberMe: boolean
}
const formRef = ref<FormInst | null>(null)
const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const model = ref<LoginByPasswordCommand>({
principal: '',
otp: '',
rememberMe: false,
})
const rules: FormRules = {
principal: [
{
required: true,
validator(rule: FormItemRule, value: string) {
if (!value) {
return new Error('需要年龄')
} else if (!/^\d*$/.test(value)) {
return new Error('年龄应该为整数')
} else if (Number(value) < 18) {
return new Error('年龄应该超过十八岁')
}
return true
},
trigger: ['input', 'blur'],
},
],
otp: [
{
required: true,
message: '请输入密码',
},
],
}
function handlePasswordInput() {
if (model.value.rememberMe) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
}
}
function handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
formRef.value?.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
console.log(errors)
message.error('验证失败')
}
})
}
function handleBtnGetOTPClick() {
console.log('handleBtnGetOTPClick')
}
</script>
<style scoped>
.login-form-container {
width: 320px;
background-color: #f3f3f3;
padding: 32px 40px;
border-radius: 6px;
border: solid 1px #e4e4e4;
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
border-top: solid 4px #6777ef;
}
.title {
font-size: 30px;
text-align: center;
margin-bottom: 16px;
}
.n-form-item {
margin-bottom: 8px;
}
.txt-btn {
line-height: 40px;
font-size: 15px;
color: #6777ef;
}
.txt-btn:hover {
color: rgba(103, 119, 239, 0.8);
}
</style>

140
src/views/Login/components/LoginByPassword.vue 100644
View File

@ -0,0 +1,140 @@
<template>
<div class="login-form-container">
<div class="title">
<span style="color: #6777ef">Plusone&nbsp;</span>
<span style="font-weight: 300">Admin</span>
</div>
<n-form ref="formRef" :model="model" :show-feedback="false" :show-label="false" size="large">
<n-form-item path="principal">
<n-input
placeholder="用户名 / 邮箱地址 / 手机号"
v-model:value="model.principal"
@keydown.enter.prevent
/>
</n-form-item>
<n-form-item path="password">
<n-input
placeholder="密码"
v-model:value="model.password"
type="password"
@input="handlePasswordInput"
@keydown.enter.prevent
/>
</n-form-item>
<n-grid y-gap="24" :cols="2">
<n-gi>
<n-form-item path="rememberMe">
<n-checkbox v-model:checked="model.rememberMe" size="large">
<span style="color: #808080">保持登录状态</span>
</n-checkbox>
</n-form-item>
</n-gi>
<n-gi>
<div style="display: flex; justify-content: flex-end">
<n-button class="txt-btn" text @click="$emit('toLoginByOTP')"> 验证码登录 </n-button>
</div>
</n-gi>
</n-grid>
<n-button
type="primary"
size="large"
style="width: 100%; margin-top: 8px"
@click="handleBtnLoginClick"
>
登录
</n-button>
<div style="display: flex; justify-content: flex-end; margin-top: 8px">
<n-button class="txt-btn" text style="margin-left: 16px"> 忘记密码 </n-button>
<n-button class="txt-btn" text style="margin-left: 16px"> 免费注册 </n-button>
</div>
</n-form>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
import { PrincipalType, regexConsts } from '@/type/PrincipalType'
interface LoginByPasswordCommand {
principal: string
password: string
rememberMe: boolean
principalType: PrincipalType | null
}
const formRef = ref<FormInst | null>(null)
const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const model = ref<LoginByPasswordCommand>({
principal: '',
password: '',
rememberMe: false,
principalType: null,
})
function handlePasswordInput() {
if (model.value.rememberMe) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
}
}
function handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
const principal = model.value.principal
const password = model.value.password
if (regexConsts.email.test(principal)) {
model.value.principalType = PrincipalType.EMAIL
} else if (regexConsts.mobilePhone.test(principal)) {
model.value.principalType = PrincipalType.MOBILE_PHONE
} else if (regexConsts.username.test(principal)) {
model.value.principalType = PrincipalType.USERNAME
} else {
message.error('请输入用户名、电子邮箱或手机号')
return
}
if (!regexConsts.password.test(password)) {
message.error('输入的密码不符合要求')
}
}
</script>
<style scoped>
.login-form-container {
width: 320px;
background-color: #f3f3f3;
padding: 32px 40px;
border-radius: 6px;
border: solid 1px #e4e4e4;
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
border-top: solid 4px #6777ef;
}
.title {
font-size: 30px;
text-align: center;
margin-bottom: 16px;
}
.n-form-item {
margin-bottom: 8px;
}
.txt-btn {
line-height: 40px;
font-size: 15px;
color: #6777ef;
}
.txt-btn:hover {
color: rgba(103, 119, 239, 0.8);
}
</style>

184
src/views/LoginView/LoginView.vue
View File

@ -1,184 +0,0 @@
<template>
<div class="login-page">
<div class="login-form-container">
<div class="title">
<span style="color: #42b883">Plusone Admin&nbsp;</span>
<span>登录</span>
</div>
<n-form ref="formRef" :model="model" :rules="rules">
<n-form-item path="principal" :show-label="false">
<n-input
placeholder="用户名 / 邮箱地址 / 手机号"
v-model:value="model.principal"
@keydown.enter.prevent
/>
</n-form-item>
<n-form-item path="password" :show-label="false">
<n-input
placeholder="密码"
v-model:value="model.password"
type="password"
@input="handlePasswordInput"
@keydown.enter.prevent
/>
</n-form-item>
<n-form-item ref="rPasswordFormItemRef" first path="reenteredPassword" :show-label="false">
<n-input
placeholder="重复密码"
v-model:value="model.reenteredPassword"
:disabled="!model.password"
type="password"
@keydown.enter.prevent
/>
</n-form-item>
<n-row :gutter="[0, 24]">
<n-col :span="24">
<div style="display: flex; justify-content: flex-end">
<n-button
:disabled="model.principal === null"
round
type="primary"
@click="handleBtnLoginClick"
>
登录
</n-button>
</div>
</n-col>
</n-row>
</n-form>
</div>
</div>
<pre>{{ JSON.stringify(model, null, 2) }}</pre>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
interface LoginByPasswordCommand {
principal: string
password: string
reenteredPassword: string
}
export default defineComponent({
setup() {
const formRef = ref<FormInst | null>(null)
const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const modelRef = ref<LoginByPasswordCommand>({
principal: '',
password: '',
reenteredPassword: '',
})
function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
return (
!!modelRef.value.password &&
modelRef.value.password.startsWith(value) &&
modelRef.value.password.length >= value.length
)
}
function validatePasswordSame(rule: FormItemRule, value: string): boolean {
return value === modelRef.value.password
}
const rules: FormRules = {
age: [
{
required: true,
validator(rule: FormItemRule, value: string) {
if (!value) {
return new Error('需要年龄')
} else if (!/^\d*$/.test(value)) {
return new Error('年龄应该为整数')
} else if (Number(value) < 18) {
return new Error('年龄应该超过十八岁')
}
return true
},
trigger: ['input', 'blur'],
},
],
password: [
{
required: true,
message: '请输入密码',
},
],
reenteredPassword: [
{
required: true,
message: '请再次输入密码',
trigger: ['input', 'blur'],
},
{
validator: validatePasswordStartWith,
message: '两次密码输入不一致',
trigger: 'input',
},
{
validator: validatePasswordSame,
message: '两次密码输入不一致',
trigger: ['blur', 'password-input'],
},
],
}
return {
formRef,
rPasswordFormItemRef,
model: modelRef,
rules,
handlePasswordInput() {
if (modelRef.value.reenteredPassword) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
}
},
handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
formRef.value?.validate((errors) => {
if (!errors) {
message.success('验证成功')
} else {
console.log(errors)
message.error('验证失败')
}
})
},
}
},
})
</script>
<style scoped>
.login-page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.login-page > .login-form-container {
width: 320px;
background-color: #f3f3f3;
padding: 40px;
border-radius: 4px;
border: solid 1px #efeff5;
}
.title {
font-size: 24px;
font-weight: 500;
}
.title::after {
height: 24px;
display: block;
content: '';
}
</style>