From 37297f36749177bed5e77fcf95a252a567af757d Mon Sep 17 00:00:00 2001 From: hxr <1490493387@qq.com> Date: Fri, 10 Nov 2023 08:13:14 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E7=99=BB=E5=BD=95=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ip.svg | 1 + src/layout/main.vue | 7 +++- src/views/dashboard/index.vue | 24 +++++------ src/views/login/index.vue | 76 ++++++++++++++++------------------- 4 files changed, 54 insertions(+), 54 deletions(-) create mode 100644 src/assets/icons/ip.svg diff --git a/src/assets/icons/ip.svg b/src/assets/icons/ip.svg new file mode 100644 index 0000000..7422976 --- /dev/null +++ b/src/assets/icons/ip.svg @@ -0,0 +1 @@ + diff --git a/src/layout/main.vue b/src/layout/main.vue index 21b4918..92a3a06 100644 --- a/src/layout/main.vue +++ b/src/layout/main.vue @@ -24,6 +24,7 @@ const fixedHeader = computed(() => settingsStore.fixedHeader); const showTagsView = computed(() => settingsStore.tagsView); const showSettings = computed(() => settingsStore.showSettings); const layout = computed(() => settingsStore.layout); +const device = computed(() => appStore.device); watchEffect(() => { if (width.value < WIDTH) { @@ -43,7 +44,7 @@ watchEffect(() => { @@ -146,15 +149,12 @@ import { getCaptchaApi } from "@/api/auth"; import { LoginData } from "@/api/auth/types"; import defaultSettings from "@/settings"; -const appStore = useAppStore(); +/** + * 明亮/暗黑主题切换 + */ const settingsStore = useSettingsStore(); -const userStore = useUserStore(); -const route = useRoute(); - const isDark = ref(settingsStore.theme === "dark"); - -const handleThemeChange = (isDark?: string | number | boolean) => { - console.log("登录页面主题切换", isDark); +const handleThemeChange = (isDark: any) => { useToggle(isDark); settingsStore.changeSetting({ key: "theme", @@ -163,26 +163,24 @@ const handleThemeChange = (isDark?: string | number | boolean) => { }; /** - * 按钮loading + * 根据屏幕宽度切换设备模式 */ -const loading = ref(false); -/** - * 是否大写锁定 - */ -const isCapslock = ref(false); -/** - * 密码是否可见 - */ -const passwordVisible = ref(false); -/** - * 验证码图片Base64字符串 - */ -const captchaBase64 = ref(); +const appStore = useAppStore(); +const WIDTH = 992; // 响应式布局容器固定宽度 大屏（>=1200px） 中屏（>=992px） 小屏（>=768px） +const { width } = useWindowSize(); +watchEffect(() => { + if (width.value < WIDTH) { + appStore.toggleDevice("mobile"); + } else { + appStore.toggleDevice("desktop"); + } +}); -/** - * 登录表单引用 - */ -const loginFormRef = ref(ElForm); +const loading = ref(false); // 按钮loading +const isCapslock = ref(false); // 是否大写锁定 +const passwordVisible = ref(false); // 密码是否可见 +const captchaBase64 = ref(); // 验证码图片Base64字符串 +const loginFormRef = ref(ElForm); // 登录表单ref const loginData = ref({ username: "admin", @@ -190,7 +188,6 @@ const loginData = ref({ }); const { t } = useI18n(); - const loginRules = computed(() => { const prefix = appStore.language === "en" ? "Please enter " : "请输入"; return { @@ -205,7 +202,13 @@ const loginRules = computed(() => { { required: true, trigger: "blur", - validator: passwordValidator, + validator: (rule: any, value: any, callback: any) => { + if (value.length < 6) { + callback(new Error("The password can not be less than 6 digits")); + } else { + callback(); + } + }, message: `${prefix}${t("login.password")}`, }, ], @@ -219,17 +222,6 @@ const loginRules = computed(() => { }; }); -/** - * 密码校验器 - */ -function passwordValidator(rule: any, value: any, callback: any) { - if (value.length < 6) { - callback(new Error("The password can not be less than 6 digits")); - } else { - callback(); - } -} - /** * 检查输入大小写状态 */ @@ -252,6 +244,8 @@ function getCaptcha() { /** * 登录 */ +const route = useRoute(); +const userStore = useUserStore(); function handleLogin() { loginFormRef.value.validate((valid: boolean) => { if (valid) { @@ -355,7 +349,7 @@ onMounted(() => { } input:-webkit-autofill { - transition: background-color 5000s ease-in-out 0s; /* 通过延时渲染背景色变相去除背景颜色 */ + transition: background-color 1000s ease-in-out 0s; /* 通过延时渲染背景色变相去除背景颜色 */ } } }