This commit is contained in:
2025-11-12 20:04:38 +08:00
parent 58fce7ec2a
commit a5add3dd73
15 changed files with 328 additions and 91 deletions
@@ -1,46 +1,45 @@
<script setup>
import { useUserStore } from "@/stores/user";
import { RouterLink} from 'vue-router'
import { RouterLink } from "vue-router";
import { useI18n } from 'vue-i18n'
import { useI18n } from "vue-i18n";
import { myfuncs } from '@/myfunc.js'
import { onMounted, ref } from 'vue'
import { myfuncs } from "@/myfunc.js";
import { onMounted, ref } from "vue";
// 使用 vue-i18n 的 Composition API
const { t, locale } = useI18n()
const theTeme = ref('light')
const lang_sele = ref(null)
const isLogin = false
const { t, locale } = useI18n();
const userStore = useUserStore();
const theTeme = ref("light");
const lang_sele = ref(null);
function set_them(temp) {
theTeme.value = temp
myfuncs.setTheme(temp, true)
theTeme.value = temp;
myfuncs.setTheme(temp, true);
}
function changeLanguage(lang) {
// 切换语言
const selectElement = lang.target
const selectedLang = selectElement.value
locale.value = selectedLang
myfuncs.save('userLanguage', selectedLang)
const selectElement = lang.target;
const selectedLang = selectElement.value;
locale.value = selectedLang;
myfuncs.save("userLanguage", selectedLang);
//console.log("selectedLang:",selectedLang);
}
onMounted(() => {
const savedTheme = myfuncs.getThemefromStorge()
theTeme.value = savedTheme
myfuncs.setTheme(savedTheme, false)
const userLang = myfuncs.load('userLanguage')
const savedTheme = myfuncs.getThemefromStorge();
theTeme.value = savedTheme;
myfuncs.setTheme(savedTheme, false);
const userLang = myfuncs.load("userLanguage");
if (userLang) {
locale.value = userLang
locale.value = userLang;
if (lang_sele.value) {
;(lang_sele.value).value = userLang
lang_sele.value.value = userLang;
}
}
})
});
</script>
<template>
@@ -60,7 +59,9 @@ onMounted(() => {
</button>
<!-- END NAVBAR TOGGLER -->
<!-- BEGIN NAVBAR LOGO -->
<div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<div
class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3"
>
<router-link to="/" aria-label="Tabler">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -137,8 +138,8 @@ onMounted(() => {
</a>
</div>
<!-- 这里判断是否已经登陆 是则显示用户信息 否则显示登陆按钮 -->
<div v-if="!isLogin" class="nav-item">
<router-link to="login" class="btn btn-outline-primary" >
<div v-if="!userStore.isLoggedIn" class="nav-item">
<router-link to="login" class="btn btn-outline-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
@@ -157,18 +158,21 @@ onMounted(() => {
<path d="M19 22v-6"></path>
<path d="M22 19l-3 -3l-3 3"></path>
</svg>
{{ t('message.login_or_register') }}
{{ t("message.login_or_register") }}
</router-link>
</div>
<div v-if="isLogin" class="nav-item dropdown">
<div v-if="userStore.isLoggedIn" class="nav-item dropdown">
<a
href="#"
class="nav-link d-flex lh-1 p-0 px-2"
data-bs-toggle="dropdown"
aria-label="Open user menu"
>
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)">
<span
class="avatar avatar-sm"
style="background-image: url(./static/avatars/000m.jpg)"
>
</span>
<div class="d-none d-xl-block ps-2">
<div>Paweł Kuna</div>
@@ -213,15 +217,23 @@ onMounted(() => {
>
<path d="M5 12l-2 0l9 -9l9 9l-2 0" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg
<path
d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"
/></svg
></span>
<span class="nav-link-title"> {{ t('appname.home') }} </span>
<span class="nav-link-title">
{{ t("appname.home") }}
</span>
</router-link>
</li>
</ul>
<div class="ms-auto">
<select class="form-select" @change="changeLanguage" ref="lang_sele">
<select
class="form-select"
@change="changeLanguage"
ref="lang_sele"
>
<option value="en">English</option>
<option value="zh-CN">中文</option>
</select>
+4 -1
View File
@@ -37,7 +37,10 @@
"network_err":"Network error",
"username_dup":"Duplicate username",
"registration_successful":"Registration successful!",
"server_error":"Server Error"
"server_error":"Server Error",
"user_not_found":"User not found",
"username_or_password_incorrect":"Username or password incorrect.",
"login_successful":"Login successful"
},
"button": {
"submit": "Submit",
+4 -1
View File
@@ -37,7 +37,10 @@
"network_err":"网络错误",
"username_dup":"用户名重复",
"registration_successful":"注册成功!",
"server_error":"服务端错误"
"server_error":"服务端错误",
"user_not_found":"找不到用户",
"username_or_password_incorrect":"用户或密码错误",
"login_successful":"登录成功"
},
"button": {
"submit": "提交",
+2 -2
View File
@@ -23,7 +23,7 @@ export const my_network_func = {
//把cookie插入json
var data = {};
data["data"] = json;
var cookie = myfuncs.load_json("cookie");
var cookie = myfuncs.loadJson("cookie");
if (cookie) {
data["cookie"] = cookie.Value;
}
@@ -46,7 +46,7 @@ export const my_network_func = {
if (response.data.cookie.Value == "") {
myfuncs.dele("cookie");
} else {
myfuncs.save_json("cookie", response.data.cookie);
myfuncs.saveJson("cookie", response.data.cookie);
}
}
}
+27 -2
View File
@@ -8,6 +8,31 @@ export const myfuncs = {
console.log("myfuncs test ok");
},
//临时保存的数据,浏览器专属
saveT(key,data){
sessionStorage.setItem(key, data)
},
loadT(key){
return sessionStorage.getItem(key)
},
deleT(key){
sessionStorage.removeItem(key)
},
saveJsonT(key,data){
this.saveT(key,JSON.stringify(data))
},
loadJsonT(key){
const js_data=this.loadT(key)
if(js_data){
return JSON.parse(js_data)
}else{
return null
}
},
save(key,data){
localStorage.setItem(key, data)
},
@@ -18,11 +43,11 @@ export const myfuncs = {
localStorage.removeItem(key)
},
save_json(key,data){
saveJson(key,data){
this.save(key,JSON.stringify(data))
},
load_json(key){
loadJson(key){
const js_data=this.load(key)
if(js_data){
return JSON.parse(js_data)
+4
View File
@@ -15,6 +15,9 @@ export const useUserStore = defineStore("user", () => {
const login = () => {
isLoggedIn.value = true;
};
const loginUpdata = () => {
isLoggedIn.value = true;
};
return {
userInfo,
@@ -22,5 +25,6 @@ export const useUserStore = defineStore("user", () => {
isLoggedIn,
logout,
login,
loginUpdata,
};
});
+71 -1
View File
@@ -1,9 +1,16 @@
<script setup>
import { onMounted, watch, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
import { my_network_func } from "@/my_network_func";
import { myfuncs } from "@/myfunc.js";
import MyOffcanvas from "@/components/MyOffcanvas.vue";
import { useI18n } from "vue-i18n";
// 使用 vue-i18n 的 Composition API
const { t, locale } = useI18n();
const router = useRouter();
const userStore = useUserStore();
const mos = ref();
@@ -11,6 +18,7 @@ const username = ref();
const password = ref();
const isRemember = ref();
const isShowPassword = ref(false);
function togglePasswordVisibility() {
isShowPassword.value = !isShowPassword.value;
@@ -42,7 +50,69 @@ function login() {
return;
}
console.log("登录信息:", { user, pass, remember });
//console.log("登录信息:", { user, pass, remember });
my_network_func.postJson(
"/users/login",
{
username: user,
userpass: pass,
remember: remember,
},
(r) => {
console.log(r)
switch (r.statusCode) {
case 200:
switch (r.data.err_code) {
case -41:
username.value?.classList.add("is-invalid");
mos.value?.showAlert(
"warning",
t("message.user_not_found"),
5000
);
break;
case -42:
username.value?.classList.add("is-invalid");
password.value?.classList.add("is-invalid");
mos.value?.showAlert(
"warning",
t("message.username_or_password_incorrect"),
5000
);
break;
case 0:
//登录成功,载入cookie
//临时保存cookie
myfuncs.saveJsonT("userCookie",r.data.return.cookie)
if(remember){
//长期保存cookie
myfuncs.saveJson("userCookie",r.data.return.cookie)
}
//userStore.isLoggedIn=true
//更新用户信息
mos.value?.showAlert(
"success",
t("message.login_successful"),
1000,
() => {
router.back()
}
);
break;
default:
mos.value?.showAlert("danger", t("message.server_error"), 5000);
break;
}
break;
default:
mos.value?.showAlert("danger", t("message.network_err"), 5000);
break;
}
}
);
}
function functionupdataTitle() {
@@ -75,7 +75,7 @@ function createAccount() {
userpass: userpassword.value?.value,
},
(r) => {
console.log(r);
//console.log(r);
switch (r.statusCode) {
case 200:
switch (r.data.err_code) {