From c752bfd3c273fc0ab1a2b397ef7b3b14afea7753 Mon Sep 17 00:00:00 2001
From: kevin <kevin@lmve.net>
Date: Tue, 11 Nov 2025 20:34:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ops_vue_js/src/components/MyOffcanvas.vue | 43 ++++++-----
 frontent/ops_vue_js/src/i18n/en.json          | 71 ++++++++++---------
 frontent/ops_vue_js/src/i18n/zh-CN.json       |  7 +-
 frontent/ops_vue_js/src/main.js               |  4 ++
 frontent/ops_vue_js/src/router/index.js       |  5 ++
 frontent/ops_vue_js/src/stores/user.js        | 26 +++++++
 frontent/ops_vue_js/src/views/HomeView.vue    |  7 +-
 .../ops_vue_js/src/views/forgotPassword.vue   | 20 +++---
 frontent/ops_vue_js/src/views/loginView.vue   |  1 +
 .../ops_vue_js/src/views/registerView.vue     | 59 +++++++++++----
 frontent/ops_vue_js/src/views/test.vue        | 16 +++++
 11 files changed, 179 insertions(+), 80 deletions(-)
 create mode 100644 frontent/ops_vue_js/src/stores/user.js
 create mode 100644 frontent/ops_vue_js/src/views/test.vue

diff --git a/frontent/ops_vue_js/src/components/MyOffcanvas.vue b/frontent/ops_vue_js/src/components/MyOffcanvas.vue
index a8212ae..f78e960 100644
--- a/frontent/ops_vue_js/src/components/MyOffcanvas.vue
+++ b/frontent/ops_vue_js/src/components/MyOffcanvas.vue
@@ -1,25 +1,24 @@
 <script setup>
-import { onMounted, ref } from 'vue'
-import { Offcanvas } from 'bootstrap'
+import { onMounted, ref } from "vue";
+import { Offcanvas } from "bootstrap";
 
-const offcanvasTop = ref(null)
-let ov
-const alertType=ref() // 可选值：'success', 'warning', 'danger', 'info'
-const alertText=ref()
-let autoCloseTimeout
+const offcanvasTop = ref(null);
+let ov;
+const alertType = ref(); // 可选值：'success', 'warning', 'danger', 'info'
+const alertText = ref();
+let autoCloseTimeout;
 onMounted(() => {
   // 确保在组件挂载后初始化
   if (offcanvasTop.value) {
-    ov = new Offcanvas(offcanvasTop.value,{
+    ov = new Offcanvas(offcanvasTop.value, {
       backdrop: false,
-    })
+    });
     //ov.show();
     //console.log('Offcanvas initialized:', ov)
   }
-})
+});
 
-
-function showAlert(type, text,timeout=5000) {
+function showAlert(type, text, timeout = 5000, callback) {
   alertText.value = text;
 
   alertType.value = type;
@@ -27,24 +26,22 @@ function showAlert(type, text,timeout=5000) {
   if (ov) {
     ov.hide();
     ov.show();
-    if(autoCloseTimeout)
-    {
+    if (autoCloseTimeout) {
       clearTimeout(autoCloseTimeout);
     }
-    autoCloseTimeout=setTimeout(() => {
-        //console.log("timeout");
-        ov.hide();
-      }, timeout);
-
-
+    autoCloseTimeout = setTimeout(() => {
+      //console.log("timeout");
+      ov.hide();
+      if (typeof callback === "function") {
+        callback();
+      }
+    }, timeout);
   }
 }
 
 defineExpose({
-  showAlert
+  showAlert,
 });
-
-
 </script>
 
 <style scoped>
diff --git a/frontent/ops_vue_js/src/i18n/en.json b/frontent/ops_vue_js/src/i18n/en.json
index 8e56a52..b466af0 100644
--- a/frontent/ops_vue_js/src/i18n/en.json
+++ b/frontent/ops_vue_js/src/i18n/en.json
@@ -2,47 +2,52 @@
   "appname": {
     "home": "Home",
     "login": "Login",
-    "forgot_password":"Forgot Password",
-    "register":"Register"
+    "forgot_password": "Forgot Password",
+    "register": "Register"
   },
   "message": {
     "hello": "Hello",
     "welcome": "Welcome",
-    "dark_mode":"Enable dark mode",
-    "light_mode":"Enable light mode",
-    "login_or_register":"Login/Register",
-    "login_to_your_account":"Login to your account",
-    "your_email_address":"Your email address",
-    "email_address":"Email address",
-    "user_name":"User name",
-    "your_user_name":"Your user name",
-    "password":"Password",
-    "your_password":"Your password",
-    "i_forgot_password":"I forgot my password",
-    "remember_me_on_this_device":"Remember me on this device",
-    "dont_have_account_yet":"Don't have an account yet?",
-    "register_now":"Register now",
-    "show_password":"Show password",
-    "hidden_Password":"Hidden Password",
-    "please_enter_username_and_password":"Please enter username and password",
-    "forgot_password":"Forgot Password",
-    "enter_your_email_to_reset_password":"Enter your email address and your password will be reset and emailed to you.",
-    "back_to_login":"Back to login",
-    "please_enter_your_email":"Please enter your email",
-    "this_not_email":"This is not an email address.",
-    "create_new_account":"Create new account",
-    "already_have_an_account":"Already have an account?"
+    "dark_mode": "Enable dark mode",
+    "light_mode": "Enable light mode",
+    "login_or_register": "Login/Register",
+    "login_to_your_account": "Login to your account",
+    "your_email_address": "Your email address",
+    "email_address": "Email address",
+    "user_name": "User name",
+    "your_user_name": "Your user name",
+    "password": "Password",
+    "your_password": "Your password",
+    "i_forgot_password": "I forgot my password",
+    "remember_me_on_this_device": "Remember me on this device",
+    "dont_have_account_yet": "Don't have an account yet?",
+    "register_now": "Register now",
+    "show_password": "Show password",
+    "hidden_Password": "Hidden Password",
+    "please_enter_username_and_password": "Please enter username and password",
+    "forgot_password": "Forgot Password",
+    "enter_your_email_to_reset_password": "Enter your email address and your password will be reset and emailed to you.",
+    "enter_your_username_to_reset_password": "Enter your user name and your password will be reset and emailed to you.",
+    "back_to_login": "Back to login",
+    "please_enter_your_email": "Please enter your email",
+    "please_enter_your_username": "Please enter your user name",
+    "this_not_email": "This is not an email address.",
+    "create_new_account": "Create new account",
+    "already_have_an_account": "Already have an account?",
+    "network_err":"Network error",
+    "username_dup":"Duplicate username",
+    "registration_successful":"Registration successful!"
   },
   "button": {
     "submit": "Submit",
     "cancel": "Cancel",
-    "sign_in":"Sign In",
-    "send_me_new_password":"Send me new password"
+    "sign_in": "Sign In",
+    "send_me_new_password": "Send me new password"
   },
-  "footer":{
-    "doc":"Documentation",
-    "license":"License",
-    "source_code":"Source Code",
-    "copy":"Copyright © 2025 Operations. All rights reserved."
+  "footer": {
+    "doc": "Documentation",
+    "license": "License",
+    "source_code": "Source Code",
+    "copy": "Copyright © 2025 Operations. All rights reserved."
   }
 }
diff --git a/frontent/ops_vue_js/src/i18n/zh-CN.json b/frontent/ops_vue_js/src/i18n/zh-CN.json
index d87b0f2..c7232a0 100644
--- a/frontent/ops_vue_js/src/i18n/zh-CN.json
+++ b/frontent/ops_vue_js/src/i18n/zh-CN.json
@@ -27,11 +27,16 @@
     "please_enter_username_and_password": "请输入用户名和密码",
     "forgot_password": "忘记密码",
     "enter_your_email_to_reset_password": "输入您的邮箱地址，您的密码将被重置并通过邮件发送给您。",
+    "enter_your_username_to_reset_password": "输入您的用户名，您的密码将被重置并通过邮件发送给您。",
     "back_to_login": "返回登录",
     "please_enter_your_email": "请输入您的邮箱",
+    "please_enter_your_username": "请输入您的用户名",
     "this_not_email": "这不是一个有效的邮箱地址。",
     "create_new_account":"创建新账户",
-    "already_have_an_account":"已经有账户了？"
+    "already_have_an_account":"已经有账户了？",
+    "network_err":"网络错误",
+    "username_dup":"用户名重复",
+    "registration_successful":"注册成功！"
   },
   "button": {
     "submit": "提交",
diff --git a/frontent/ops_vue_js/src/main.js b/frontent/ops_vue_js/src/main.js
index 4ebbf11..5fa560d 100644
--- a/frontent/ops_vue_js/src/main.js
+++ b/frontent/ops_vue_js/src/main.js
@@ -2,6 +2,7 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
+import { createPinia } from 'pinia' // 1. 导入 createPinia
 import App from './App.vue'
 import router from './router'
 
@@ -22,8 +23,11 @@ const i18n = createI18n({
   }
 })
 
+const pinia = createPinia()
 const app = createApp(App)
 
 app.use(router)
 app.use(i18n)
+app.use(pinia)
+
 app.mount('#app')
diff --git a/frontent/ops_vue_js/src/router/index.js b/frontent/ops_vue_js/src/router/index.js
index adc0bef..e03235a 100644
--- a/frontent/ops_vue_js/src/router/index.js
+++ b/frontent/ops_vue_js/src/router/index.js
@@ -17,6 +17,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import("../views/AboutView.vue"),
     },
+    {
+      path: "/test",
+      name: "test",
+      component: () => import("../views/test.vue"),
+    },
     {
       path: "/login",
       name: "login",
diff --git a/frontent/ops_vue_js/src/stores/user.js b/frontent/ops_vue_js/src/stores/user.js
new file mode 100644
index 0000000..4687491
--- /dev/null
+++ b/frontent/ops_vue_js/src/stores/user.js
@@ -0,0 +1,26 @@
+// stores/user.js
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+// 组合式 API 写法 (推荐)
+export const useUserStore = defineStore("user", () => {
+  // 状态 (State)
+  const userInfo = ref(null);
+  const token = ref("");
+  const isLoggedIn = ref(false);
+
+  const logout = () => {
+    isLoggedIn.value = false;
+  };
+  const login = () => {
+    isLoggedIn.value = true;
+  };
+
+  return {
+    userInfo,
+    token,
+    isLoggedIn,
+    logout,
+    login,
+  };
+});
diff --git a/frontent/ops_vue_js/src/views/HomeView.vue b/frontent/ops_vue_js/src/views/HomeView.vue
index 7fa211d..a62a467 100644
--- a/frontent/ops_vue_js/src/views/HomeView.vue
+++ b/frontent/ops_vue_js/src/views/HomeView.vue
@@ -1,5 +1,9 @@
 <script setup>
 import { my_network_func } from '@/my_network_func';
+import { useUserStore } from '@/stores/user'
+
+const user = useUserStore()
+
 
   function t(){
     console.log("test")
@@ -14,7 +18,8 @@ import { my_network_func } from '@/my_network_func';
 
 <template>
   <main>
-    111
+    1112
     <button @click="t">222</button>
+    {{ user.isLoggedIn }}
   </main>
 </template>
diff --git a/frontent/ops_vue_js/src/views/forgotPassword.vue b/frontent/ops_vue_js/src/views/forgotPassword.vue
index 8bf8978..930af75 100644
--- a/frontent/ops_vue_js/src/views/forgotPassword.vue
+++ b/frontent/ops_vue_js/src/views/forgotPassword.vue
@@ -12,15 +12,15 @@ function resetPassword() {
   // 在这里处理重置密码逻辑
   const emailValue = email.value?.value
   if (emailValue === undefined || emailValue.trim() === '') {
-    mos.value?.showAlert('info', t('message.please_enter_your_email'), 5000)
-    return
-  }
-
-  if (!myfuncs.isValidEmail(emailValue)) {
-    mos.value?.showAlert('warning', t('message.this_not_email'), 5000)
+    mos.value?.showAlert('info', t('message.please_enter_your_username'), 5000)
     return
   }
 
+  // if (!myfuncs.isValidEmail(emailValue)) {
+  //   mos.value?.showAlert('warning', t('message.this_not_email'), 5000)
+  //   return
+  // }
+  mos.value?.showAlert('warning', "功能未开发", 5000)
   console.log('sending password reset to:', emailValue)
 }
 
@@ -52,15 +52,15 @@ watch(locale, () => {
       <div class="card-body">
         <h2 class="card-title text-center mb-4">{{ t('message.forgot_password') }}</h2>
         <p class="text-secondary mb-4">
-          {{ t('message.enter_your_email_to_reset_password') }}
+          {{ t('message.enter_your_username_to_reset_password') }}
         </p>
         <div class="mb-3">
-          <label class="form-label">{{ t('message.email_address') }}</label>
+          <label class="form-label">{{ t('message.user_name') }}</label>
           <input
             ref="email"
-            type="email"
+            type="text"
             class="form-control"
-            :placeholder="t('message.your_email_address')"
+            :placeholder="t('message.your_user_name')"
           />
         </div>
         <div class="form-footer">
diff --git a/frontent/ops_vue_js/src/views/loginView.vue b/frontent/ops_vue_js/src/views/loginView.vue
index d0f5dce..ab92a3a 100644
--- a/frontent/ops_vue_js/src/views/loginView.vue
+++ b/frontent/ops_vue_js/src/views/loginView.vue
@@ -74,6 +74,7 @@ watch(locale, () => {
                   <input
                     ref="username"
                     type="text"
+                    maxlength="64"
                     class="form-control"
                     :placeholder="t('message.your_user_name')"
                     autocomplete="off"
diff --git a/frontent/ops_vue_js/src/views/registerView.vue b/frontent/ops_vue_js/src/views/registerView.vue
index 2f39155..f75b1b2 100644
--- a/frontent/ops_vue_js/src/views/registerView.vue
+++ b/frontent/ops_vue_js/src/views/registerView.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, watch, ref } from "vue";
+import { useRouter } from "vue-router";
 import MyOffcanvas from "@/components/MyOffcanvas.vue";
 import { myfuncs } from "@/myfunc.js";
 import { my_network_func } from "@/my_network_func";
@@ -11,6 +12,7 @@ const isShowPassword = ref(false);
 const username = ref();
 const useremail = ref();
 const userpassword = ref();
+const router = useRouter();
 
 function functionupdataTitle() {
   document.title = "Operations." + t("appname.register");
@@ -28,17 +30,22 @@ function createAccount() {
   useremail.value?.classList.remove("is-invalid");
   userpassword.value?.classList.remove("is-invalid");
 
-  if (!user || !email || !pass) {
-    if (!user) {
-      username.value?.classList.add("is-invalid");
-    }
-    if (!email) {
-      useremail.value?.classList.add("is-invalid");
-    }
-    if (!pass) {
-      userpassword.value?.classList.add("is-invalid");
-    }
+  let isDataErr = false;
 
+  if (!user) {
+    isDataErr = true;
+    username.value?.classList.add("is-invalid");
+  }
+  if (!email) {
+    isDataErr = true;
+    useremail.value?.classList.add("is-invalid");
+  }
+  if (!pass) {
+    isDataErr = true;
+    userpassword.value?.classList.add("is-invalid");
+  }
+
+  if (isDataErr) {
     mos.value?.showAlert(
       "info",
       t("message.please_enter_username_and_password"),
@@ -46,6 +53,9 @@ function createAccount() {
     );
     return;
   }
+
+  //判断长度
+
   if (!myfuncs.isValidEmail(email)) {
     useremail.value?.classList.add("is-invalid");
     mos.value?.showAlert("warning", t("message.this_not_email"), 5000);
@@ -64,8 +74,31 @@ function createAccount() {
       useremail: useremail.value?.value,
       userpass: userpassword.value?.value,
     },
-    (r)=>{
-      console.log(r)
+    (r) => {
+      console.log(r);
+      switch (r.statusCode) {
+        case 200:
+          switch (r.data.err_code) {
+            case -4:
+              username.value?.classList.add("is-invalid");
+              mos.value?.showAlert("warning", t("message.username_dup"), 5000);
+              break;
+            case 0:
+              mos.value?.showAlert(
+                "success",
+                t("message.registration_successful"),
+                1000,
+                () => {
+                  router.push("/login");
+                }
+              );
+              break;
+          }
+          break;
+        default:
+          mos.value?.showAlert("danger", t("message.network_err"), 5000);
+          break;
+      }
     }
   );
 }
@@ -103,6 +136,7 @@ watch(locale, () => {
             <input
               ref="username"
               type="text"
+              maxlength="64"
               class="form-control"
               :placeholder="t('message.your_user_name')"
             />
@@ -112,6 +146,7 @@ watch(locale, () => {
             <input
               ref="useremail"
               type="email"
+              maxlength="250"
               class="form-control"
               :placeholder="t('message.your_email_address')"
             />
diff --git a/frontent/ops_vue_js/src/views/test.vue b/frontent/ops_vue_js/src/views/test.vue
new file mode 100644
index 0000000..2cc4207
--- /dev/null
+++ b/frontent/ops_vue_js/src/views/test.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { useUserStore } from '@/stores/user'
+
+const user = useUserStore()
+
+function t(){
+    user.login();
+}
+
+</script>
+
+<template>
+    test
+    <button @click="t">222</button>
+    {{ user.isLoggedIn }}
+</template>
\ No newline at end of file