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

commit code.

main
ZhouXY108 2022-12-30 01:56:26 +08:00
parent d81542921b
commit 7841e706f6
26 changed files with 378 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env 100644
View File

@ -0,0 +1 @@
VITE_TOKEN_NAME=plusone

1
.env.development 100644
View File

@ -0,0 +1 @@
VITE_BASE_API=http://localhost:8108

1
.env.prod 100644
View File

@ -0,0 +1 @@
VITE_BASE_API=http://api.plusone.zhouxy.xyz:8108

16
.eslintrc.cjs
View File

@ -1,18 +1,18 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier',
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-typescript",
"@vue/eslint-config-prettier",
],
parserOptions: {
ecmaVersion: 'latest',
ecmaVersion: "latest",
},
rules: {
'vue/multi-word-component-names': 'off',
"vue/multi-word-component-names": "off",
},
}
};

6
.prettierrc.json
View File

@ -1,8 +1,8 @@
{
"singleQuote": true,
"semi": false,
"singleQuote": false,
"semi": true,
"useTabs": false,
"tabWidth": 4,
"printWidth": 110,
"endOfLine": "lf"
}
}

7
env.d.ts vendored
View File

@ -1 +1,8 @@
/// <reference types="vite/client" />
declare interface Window {
$message: any;
$notification: any;
$dialog: any;
$loadingBar: any;
}

18
src/App.vue
View File

@ -1,23 +1,21 @@
<template>
<n-config-provider :theme-overrides="themeOverrides">
<n-message-provider>
<router-view />
</n-message-provider>
<router-view />
</n-config-provider>
</template>
<script setup lang="ts">
import { NConfigProvider, type GlobalThemeOverrides } from 'naive-ui'
import { NConfigProvider, type GlobalThemeOverrides } from "naive-ui";
const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#6777ef',
primaryColorHover: 'rgba(103, 119, 239, 0.8)',
primaryColorPressed: '#515dbc',
borderRadius: '4px',
primaryColor: "#6777ef",
primaryColorHover: "rgba(103, 119, 239, 0.8)",
primaryColorPressed: "#515dbc",
borderRadius: "4px",
},
Button: {
fontSizeLarge: '18px',
fontSizeLarge: "18px",
},
// Select: {
// peers: {
@ -26,5 +24,5 @@ const themeOverrides: GlobalThemeOverrides = {
// },
// },
// },
}
};
</script>

10
src/api/account.ts 100644
View File

@ -0,0 +1,10 @@
import type { LoginByPasswordCommand } from "@/type/commands/LoginCommands";
import http from "@/utils/request";
export function loginByPassword(loginByPasswordCommand: LoginByPasswordCommand) {
return http({
url: "/login/byPassword",
method: "post",
data: loginByPasswordCommand,
});
}

22
src/layouts/MainPage/MainPage.vue
View File

@ -3,7 +3,7 @@
<n-layout-header position="absolute" :inverted="dark" :style="invertedStyle" :bordered="!dark">
<Logo :collapsed="false" style="width: 224px" />
<div class="header">
<n-button type="primary" @click="dark = !dark">{{ dark ? '亮色' : '暗色' }}</n-button>
<n-button type="primary" @click="dark = !dark">{{ dark ? "亮色" : "暗色" }}</n-button>
颐和园路
</div>
</n-layout-header>
@ -36,31 +36,31 @@
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { defineComponent, ref, computed } from "vue";
import Logo from './components/Logo.vue'
import SiderMenu from './components/SiderMenu.vue'
import Logo from "./components/Logo.vue";
import SiderMenu from "./components/SiderMenu.vue";
export default defineComponent({
name: 'MainPage',
name: "MainPage",
components: {
Logo,
SiderMenu,
},
setup() {
const collapsed = ref(false)
const dark = ref(true)
const collapsed = ref(false);
const dark = ref(true);
const invertedStyle = computed(() => {
return dark.value ? { '--n-color': '#282c34' } : { '--n-color': '#ffffff' }
})
return dark.value ? { "--n-color": "#282c34" } : { "--n-color": "#ffffff" };
});
return {
activeKey: ref<string | null>(null),
collapsed,
dark,
invertedStyle,
}
};
},
})
});
</script>
<style scoped>

8
src/layouts/MainPage/components/Logo.vue
View File

@ -6,16 +6,16 @@
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { computed } from "vue";
const props = defineProps({
collapsed: Boolean,
inverted: Boolean,
})
});
const style = computed(() => {
return props.inverted ? { color: '#ffffff' } : { color: 'unset' }
})
return props.inverted ? { color: "#ffffff" } : { color: "unset" };
});
</script>
<style scoped>

82
src/layouts/MainPage/components/MenuVO.ts
View File

@ -1,39 +1,39 @@
import type { MenuOption } from 'naive-ui'
import { type RouteRecordRaw, RouterLink } from 'vue-router'
import { NIcon } from 'naive-ui'
import * as iconComponents from '@vicons/fluent'
import { type Component, h } from 'vue'
import type { MenuOption } from "naive-ui";
import { type RouteRecordRaw, RouterLink } from "vue-router";
import { NIcon } from "naive-ui";
import * as iconComponents from "@vicons/fluent";
import { type Component, h } from "vue";
export interface MenuVO {
type: number
typeName: string
id: number
parentId: number
name: string
type: number;
typeName: string;
id: number;
parentId: number;
name: string;
// 若 type 为 MENU_ITEM 且 path 以 http:// 或 https:// 开头则被识别为外链
path: string
title: string
icon: string
hidden: boolean
orderNumber: number
status: number
remarks: string
path: string;
title: string;
icon: string;
hidden: boolean;
orderNumber: number;
status: number;
remarks: string;
// MENU_ITEM
component?: string
cache?: boolean
resource?: string
actions?: ActionVO[]
component?: string;
cache?: boolean;
resource?: string;
actions?: ActionVO[];
// MENU_LIST
children?: MenuVO[]
children?: MenuVO[];
}
interface ActionVO {
id: number
identifier: string
label: string
value: string
id: number;
identifier: string;
label: string;
value: string;
}
export enum MenuType {
@ -48,7 +48,7 @@ export function convertToRoutes(menuVOTree: MenuVO[]): RouteRecordRaw[] {
path: menuVO.path,
name: menuVO.name,
component:
menuVO.component !== undefined ? () => import('@/views' + menuVO.component) : undefined,
menuVO.component !== undefined ? () => import("@/views" + menuVO.component) : undefined,
children: convertToRoutes(menuVO.children ? menuVO.children : []),
meta: {
title: menuVO.title,
@ -58,12 +58,12 @@ export function convertToRoutes(menuVOTree: MenuVO[]): RouteRecordRaw[] {
status: menuVO.status,
remarks: menuVO.remarks,
},
}
};
} else {
return {
path: menuVO.path,
name: menuVO.name,
component: import('@/views' + menuVO.component),
component: import("@/views" + menuVO.component),
meta: {
title: menuVO.title,
icon: menuVO.icon,
@ -72,11 +72,11 @@ export function convertToRoutes(menuVOTree: MenuVO[]): RouteRecordRaw[] {
status: menuVO.status,
remarks: menuVO.remarks,
},
}
};
}
})
});
return routes
return routes;
}
export function convertToMenuOptions(menuVOTree: MenuVO[]): MenuOption[] {
@ -86,28 +86,28 @@ export function convertToMenuOptions(menuVOTree: MenuVO[]): MenuOption[] {
key: menuVO.name,
icon: renderIcon(menuVO.icon),
label:
menuVO.path.startsWith('http://') || menuVO.path.startsWith('https://')
? () => h('a', { href: menuVO.path, target: '_blank' }, menuVO.title)
menuVO.path.startsWith("http://") || menuVO.path.startsWith("https://")
? () => h("a", { href: menuVO.path, target: "_blank" }, menuVO.title)
: () => h(RouterLink, { to: menuVO.path }, menuVO.title),
}
};
} else {
return {
key: menuVO.name,
icon: renderIcon(menuVO.icon),
label: menuVO.title,
children: convertToMenuOptions(menuVO.children ? menuVO.children : []),
}
};
}
})
});
return menuOptions
return menuOptions;
}
const icons: Map<string, Component> = new Map(Object.entries(iconComponents))
const icons: Map<string, Component> = new Map(Object.entries(iconComponents));
export function renderIcon(icon: string) {
const iconComponent = icons.get(icon)
const iconComponent = icons.get(icon);
return () =>
h(NIcon, null, {
default: () => h(iconComponent ? iconComponent : iconComponents.QuestionCircle20Regular),
})
});
}

64
src/layouts/MainPage/components/SiderMenu.vue
View File

@ -11,13 +11,13 @@
</template>
<script setup lang="ts">
import { h, computed, type Component } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { h, computed, type Component } from "vue";
import { RouterLink, useRoute } from "vue-router";
import { NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import { NIcon } from "naive-ui";
import type { MenuOption } from "naive-ui";
import * as iconComponents from '@vicons/fluent'
import * as iconComponents from "@vicons/fluent";
const props = defineProps({
inverted: {
@ -26,27 +26,27 @@ const props = defineProps({
},
invertedBackgroundColor: {
type: String,
default: '#282c34',
default: "#282c34",
},
collapsed: {
type: Boolean,
default: false,
},
})
});
const style = computed(() => {
return props.inverted ? { '--n-color': props.invertedBackgroundColor } : { '--n-color': '#ffffff' }
})
return props.inverted ? { "--n-color": props.invertedBackgroundColor } : { "--n-color": "#ffffff" };
});
// MenuOptions
const icons: Map<string, Component> = new Map(Object.entries(iconComponents))
const icons: Map<string, Component> = new Map(Object.entries(iconComponents));
function renderIcon(icon: string) {
const iconComponent = icons.get(icon)
const iconComponent = icons.get(icon);
return () =>
h(NIcon, null, {
default: () => h(iconComponent ? iconComponent : iconComponents.QuestionCircle20Regular),
})
});
}
const menuOptions: MenuOption[] = [
@ -56,48 +56,48 @@ const menuOptions: MenuOption[] = [
RouterLink,
{
to: {
name: '404',
name: "404",
params: {
lang: 'zh-CN',
lang: "zh-CN",
},
},
},
{ default: () => '回家' }
{ default: () => "回家" }
),
key: '404',
icon: renderIcon('Home20Regular'),
key: "404",
icon: renderIcon("Home20Regular"),
},
{
label: () =>
h(
RouterLink,
{
to: '/login',
to: "/login",
},
{ default: () => '上班' }
{ default: () => "上班" }
),
key: '/login',
icon: renderIcon('Desktop20Regular'),
key: "/login",
icon: renderIcon("Desktop20Regular"),
},
{
label: () =>
h(
'a',
"a",
{
href: 'http://zhouxy.xyz',
target: '_blank',
rel: 'noopenner noreferrer',
href: "http://zhouxy.xyz",
target: "_blank",
rel: "noopenner noreferrer",
},
'ZhouXY'
"ZhouXY"
),
key: 'hear-the-wind-sing',
icon: renderIcon('BookOpen20Filled'),
key: "hear-the-wind-sing",
icon: renderIcon("BookOpen20Filled"),
},
]
];
// ActiveKey
const route = useRoute()
const route = useRoute();
const activeKey = computed(() => {
return route.name
})
return route.name;
});
</script>

44
src/main.ts
View File

@ -1,18 +1,20 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from './App.vue'
import router from './router'
import App from "./App.vue";
import router from "./router";
import './assets/main.css'
import "./assets/main.css";
// 通用字体
import 'vfonts/Lato.css'
import "vfonts/Lato.css";
// 等宽字体
import 'vfonts/FiraCode.css'
import "vfonts/FiraCode.css";
import {
// create naive ui
create,
// createDiscreteApi
createDiscreteApi,
// component
NButton,
NLayout,
@ -27,11 +29,10 @@ import {
NInput,
NGrid,
NGridItem,
NMessageProvider,
NCard,
NCheckbox,
NCheckboxGroup,
} from 'naive-ui'
} from "naive-ui";
const naive = create({
components: [
@ -48,18 +49,29 @@ const naive = create({
NInput,
NGrid,
NGridItem,
NMessageProvider,
NCard,
NCheckbox,
NCheckboxGroup,
],
})
});
const app = createApp(App)
const app = createApp(App);
app.use(createPinia())
app.use(router)
app.use(createPinia());
app.use(router);
app.use(naive)
app.use(naive);
app.mount('#app')
app.mount("#app");
const { message, notification, dialog, loadingBar } = createDiscreteApi([
"message",
"dialog",
"notification",
"loadingBar",
]);
window.$message = message;
window.$notification = notification;
window.$dialog = dialog;
window.$loadingBar = loadingBar;

22
src/router/index.ts
View File

@ -1,28 +1,28 @@
import { createRouter, createWebHistory } from 'vue-router'
import MainPage from '../layouts/MainPage/MainPage.vue'
import Login from '../views/Login/Login.vue'
import Page404 from '../views/404/index.vue'
import { createRouter, createWebHistory } from "vue-router";
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: '/',
path: "/",
component: MainPage,
children: [
{
path: '404',
name: '404',
path: "404",
name: "404",
component: Page404,
},
],
},
{
path: '/login',
name: 'login',
path: "/login",
name: "login",
component: Login,
},
],
})
});
export default router
export default router;

16
src/stores/account.ts
View File

@ -1,12 +1,8 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import { ref, computed } from "vue";
import { defineStore } from "pinia";
export const useAccountStore = defineStore('account', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
export const useAccountStore = defineStore("account", () => {
const token = ref<string | null>("0p978wqsetdgi9opw8e7s");
return { count, doubleCount, increment }
})
return { token };
});

4
src/type/PrincipalType.ts
View File

@ -9,5 +9,5 @@ export const regexConsts = {
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}$/,
}
password: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w\\!#$%&*+\-/=?^`{|}~@()[\]",.;':><]{8,32}$/,
};

14
src/type/commands/LoginCommands.ts 100644
View File

@ -0,0 +1,14 @@
import type { PrincipalType } from "../PrincipalType";
export interface LoginByPasswordCommand {
principal: string;
password: string;
rememberMe: boolean;
principalType: PrincipalType | null;
}
export interface LoginByOTPCommand {
principal: string;
otp: string;
rememberMe: boolean;
}

3
src/utils/auth.ts 100644
View File

@ -0,0 +1,3 @@
export function getToken(): string {
return "g9-wes78dufgbcn9oup7bc";
}

69
src/utils/request.ts
View File

@ -0,0 +1,69 @@
import axios, { AxiosHeaders, type AxiosRequestConfig } from "axios";
import { useAccountStore } from "@/stores/account";
import { getToken } from "@/utils/auth";
const baseURL = import.meta.env.VITE_BASE_API;
const tokenName = import.meta.env.VITE_TOKEN_NAME;
// 创建axios实例
const service = axios.create({
baseURL, // api的base_url
timeout: 5000, // 请求超时时间
});
// request拦截器
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// Do something before request is sent
const accountStore = useAccountStore();
if (accountStore.token) {
const token: string = getToken();
(config.headers as AxiosHeaders).set(tokenName, token, true);
}
return config;
},
(error) => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
}
);
// respone拦截器
service.interceptors.response.use(
(response) => response,
/**
* 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
// const res = response.data;
// if (res.code !== 20000) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000
// });
// // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
// confirmButtonText: '重新登录',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload();// 为了重新实例化vue-router对象 避免bug
// });
// })
// }
// return Promise.reject('error');
// } else {
// return response.data;
// }
(err) => {
const responseData = err.response.data;
console.log("err", responseData); // for debug
return Promise.reject(responseData);
}
);
export default service;

8
src/views/ChangePassword/index.vue → src/views/ChangePassword/ChangePassword.vue
View File

@ -6,11 +6,11 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import LoginByPassword from './components/LoginByPassword.vue'
import LoginByOTP from './components/LoginByOTP.vue'
import { ref } from "vue";
import LoginByPassword from "./components/ChangePasswordByPassword.vue";
import LoginByOTP from "./components/ChangePasswordByOTP.vue";
const loginByPassword = ref(true)
const loginByPassword = ref(true);
</script>
<style scoped>

50
src/views/ChangePassword/components/LoginByOTP.vue → src/views/ChangePassword/components/ChangePasswordByOTP.vue
View File

@ -81,24 +81,22 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
import { ref } from "vue";
import type { FormInst, FormItemInst, FormItemRule, FormRules } from "naive-ui";
interface LoginByPasswordCommand {
principal: string
otp: string
rememberMe: boolean
principal: string;
otp: string;
rememberMe: boolean;
}
const formRef = ref<FormInst | null>(null)
const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const formRef = ref<FormInst | null>(null);
const rPasswordFormItemRef = ref<FormItemInst | null>(null);
const model = ref<LoginByPasswordCommand>({
principal: '',
otp: '',
principal: "",
otp: "",
rememberMe: false,
})
});
const rules: FormRules = {
principal: [
@ -106,45 +104,45 @@ const rules: FormRules = {
required: true,
validator(rule: FormItemRule, value: string) {
if (!value) {
return new Error('需要年龄')
return new Error("需要年龄");
} else if (!/^\d*$/.test(value)) {
return new Error('年龄应该为整数')
return new Error("年龄应该为整数");
} else if (Number(value) < 18) {
return new Error('年龄应该超过十八岁')
return new Error("年龄应该超过十八岁");
}
return true
return true;
},
trigger: ['input', 'blur'],
trigger: ["input", "blur"],
},
],
otp: [
{
required: true,
message: '请输入密码',
message: "请输入密码",
},
],
}
};
function handlePasswordInput() {
if (model.value.rememberMe) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
}
}
function handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
e.preventDefault();
formRef.value?.validate((errors) => {
if (!errors) {
message.success('验证成功')
window.$message.success("验证成功");
} else {
console.log(errors)
message.error('验证失败')
console.log(errors);
window.$message.error("验证失败");
}
})
});
}
function handleBtnGetOTPClick() {
console.log('handleBtnGetOTPClick')
console.log("handleBtnGetOTPClick");
}
</script>

52
src/views/ChangePassword/components/LoginByPassword.vue → src/views/ChangePassword/components/ChangePasswordByPassword.vue
View File

@ -63,26 +63,24 @@
</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'
import { ref } from "vue";
import type { FormInst, FormItemInst, FormItemRule, FormRules } from "naive-ui";
import type { PrincipalType } from "@/type/PrincipalType";
interface LoginByPasswordCommand {
principal: string
password: string
rememberMe: boolean
principalType?: PrincipalType
principal: string;
password: string;
rememberMe: boolean;
principalType?: PrincipalType;
}
const formRef = ref<FormInst | null>(null)
const rPasswordFormItemRef = ref<FormItemInst | null>(null)
const message = useMessage()
const formRef = ref<FormInst | null>(null);
const rPasswordFormItemRef = ref<FormItemInst | null>(null);
const model = ref<LoginByPasswordCommand>({
principal: '',
password: '',
principal: "",
password: "",
rememberMe: false,
})
});
const rules: FormRules = {
principal: [
@ -90,41 +88,41 @@ const rules: FormRules = {
required: true,
validator(rule: FormItemRule, value: string) {
if (!value) {
return new Error('需要年龄')
return new Error("需要年龄");
} else if (!/^\d*$/.test(value)) {
return new Error('年龄应该为整数')
return new Error("年龄应该为整数");
} else if (Number(value) < 18) {
return new Error('年龄应该超过十八岁')
return new Error("年龄应该超过十八岁");
}
return true
return true;
},
trigger: ['input', 'blur'],
trigger: ["input", "blur"],
},
],
password: [
{
required: true,
message: '请输入密码',
message: "请输入密码",
},
],
}
};
function handlePasswordInput() {
if (model.value.rememberMe) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
}
}
function handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
e.preventDefault();
formRef.value?.validate((errors) => {
if (!errors) {
message.success('验证成功')
window.$message.success("验证成功");
} else {
console.log(errors)
message.error('验证失败')
console.log(errors);
window.$message.error("验证失败");
}
})
});
}
</script>

8
src/views/Login/Login.vue
View File

@ -6,11 +6,11 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import LoginByPassword from './components/LoginByPassword.vue'
import LoginByOTP from './components/LoginByOTP.vue'
import { ref } from "vue";
import LoginByPassword from "./components/LoginByPassword.vue";
import LoginByOTP from "./components/LoginByOTP.vue";
const loginByPassword = ref(true)
const loginByPassword = ref(true);
</script>
<style scoped>

55
src/views/Login/components/LoginByOTP.vue
View File

@ -38,7 +38,7 @@
class="txt-btn"
@click="handleBtnGetOTPClick"
size="large"
style="width： 100%"
style="width: 100%"
>
获取验证码
</n-button>
@ -81,24 +81,17 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'
import { ref } from "vue";
import type { FormInst, FormItemInst, FormItemRule, FormRules } from "naive-ui";
import type { LoginByOTPCommand } from "@/type/commands/LoginCommands";
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: '',
const formRef = ref<FormInst | null>(null);
const rPasswordFormItemRef = ref<FormItemInst | null>(null);
const model = ref<LoginByOTPCommand>({
principal: "",
otp: "",
rememberMe: false,
})
});
const rules: FormRules = {
principal: [
@ -106,45 +99,45 @@ const rules: FormRules = {
required: true,
validator(rule: FormItemRule, value: string) {
if (!value) {
return new Error('需要年龄')
return new Error("需要年龄");
} else if (!/^\d*$/.test(value)) {
return new Error('年龄应该为整数')
return new Error("年龄应该为整数");
} else if (Number(value) < 18) {
return new Error('年龄应该超过十八岁')
return new Error("年龄应该超过十八岁");
}
return true
return true;
},
trigger: ['input', 'blur'],
trigger: ["input", "blur"],
},
],
otp: [
{
required: true,
message: '请输入密码',
message: "请输入密码",
},
],
}
};
function handlePasswordInput() {
if (model.value.rememberMe) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
}
}
function handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
e.preventDefault();
formRef.value?.validate((errors) => {
if (!errors) {
message.success('验证成功')
window.$message.success("验证成功");
} else {
console.log(errors)
message.error('验证失败')
console.log(errors);
window.$message.error("验证失败");
}
})
});
}
function handleBtnGetOTPClick() {
console.log('handleBtnGetOTPClick')
console.log("handleBtnGetOTPClick");
}
</script>

60
src/views/Login/components/LoginByPassword.vue
View File

@ -56,54 +56,58 @@
</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'
import { ref } from "vue";
import type { FormInst, FormItemInst } from "naive-ui";
import { PrincipalType, regexConsts } from "@/type/PrincipalType";
import type { LoginByPasswordCommand } from "@/type/commands/LoginCommands";
import { loginByPassword } from "@/api/account";
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 formRef = ref<FormInst | null>(null);
const rPasswordFormItemRef = ref<FormItemInst | null>(null);
const model = ref<LoginByPasswordCommand>({
principal: '',
password: '',
principal: "",
password: "",
rememberMe: false,
principalType: null,
})
});
function handlePasswordInput() {
if (model.value.rememberMe) {
rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
rPasswordFormItemRef.value?.validate({ trigger: "password-input" });
}
}
function handleBtnLoginClick(e: MouseEvent) {
e.preventDefault()
const principal = model.value.principal
const password = model.value.password
e.preventDefault();
const principal = model.value.principal;
const password = model.value.password;
if (regexConsts.email.test(principal)) {
model.value.principalType = PrincipalType.EMAIL
model.value.principalType = PrincipalType.EMAIL;
} else if (regexConsts.mobilePhone.test(principal)) {
model.value.principalType = PrincipalType.MOBILE_PHONE
model.value.principalType = PrincipalType.MOBILE_PHONE;
} else if (regexConsts.username.test(principal)) {
model.value.principalType = PrincipalType.USERNAME
model.value.principalType = PrincipalType.USERNAME;
} else {
message.error('请输入用户名、电子邮箱或手机号')
return
window.$message.error("请输入用户名、电子邮箱或手机号");
return;
}
if (!regexConsts.password.test(password)) {
message.error('输入的密码不符合要求')
window.$message.error("输入的密码不符合要求");
return;
}
loginByPassword(model.value)
.then(({ data }) => {
if (data.status === 2000000) {
window.$message.success("登录成功");
} else {
Promise.reject(data);
}
})
.catch((err) => {
window.$message.error(err.message);
});
}
</script>

10
vite.config.ts
View File

@ -1,17 +1,17 @@
import { fileURLToPath, URL } from 'node:url'
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
server: {
port: 8888,
},
})
});