From b4bb563782d86a4f8c2498d9efe30af857a31deb Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Fri, 11 Jul 2025 16:36:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=BA=86=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/Controllers/DataController.cs | 130 +++++++--
 server/src/Database.cs                   |  81 +++++-
 src/APIClient.ts                         | 327 +++++++++++++++++++----
 src/components/LoginCard.vue             | 135 +++++++++-
 src/components/Navbar.vue                | 128 +++++++--
 src/utils/AuthManager.ts                 |  93 +++++++
 src/views/LoginView.vue                  |  10 +-
 src/views/VideoStreamView.vue            |  15 +-
 8 files changed, 790 insertions(+), 129 deletions(-)
 create mode 100644 src/utils/AuthManager.ts

diff --git a/server/src/Controllers/DataController.cs b/server/src/Controllers/DataController.cs
index 735744d..89fd1b5 100644
--- a/server/src/Controllers/DataController.cs
+++ b/server/src/Controllers/DataController.cs
@@ -2,6 +2,7 @@ using System.IdentityModel.Tokens.Jwt;
 using System.Security.Claims;
 using System.Text;
 using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Cors;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.IdentityModel.Tokens;
 
@@ -16,20 +17,47 @@ public class DataController : ControllerBase
 {
     private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
 
+    public class GetUserInfoResponse
+    {
+        /// <summary>
+        /// 用户的唯一标识符
+        /// </summary>
+        public Guid ID { get; set; }
+
+        /// <summary>
+        /// 用户的名称
+        /// </summary>
+        public required string Name { get; set; }
+
+        /// <summary>
+        /// 用户的电子邮箱
+        /// </summary>
+        public required string EMail { get; set; }
+
+        /// <summary>
+        /// 用户关联的板卡ID
+        /// </summary>
+        public Guid BoardID { get; set; }
+    }
+
     /// <summary>
-    /// [TODO:description]
+    /// 用户登录，获取 JWT 令牌
     /// </summary>
-    /// <param name="name">[TODO:parameter]</param>
-    /// <param name="password">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    [HttpPost("login")]
+    /// <param name="name">用户名</param>
+    /// <param name="password">用户密码</param>
+    /// <returns>JWT 令牌字符串</returns>
+    [HttpPost("Login")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(string), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
     public IActionResult Login(string name, string password)
     {
         // 验证用户密码
         using var db = new Database.AppDataConnection();
         var ret = db.CheckUserPassword(name, password);
-        if (!ret.IsSuccessful) return StatusCode(StatusCodes.Status500InternalServerError);
-        if (!ret.Value.HasValue) return BadRequest($"TODO");
+        if (!ret.IsSuccessful) return StatusCode(StatusCodes.Status500InternalServerError, "数据库操作失败");
+        if (!ret.Value.HasValue) return BadRequest("用户名或密码错误");
         var user = ret.Value.Value;
 
         // 生成 JWT
@@ -55,32 +83,94 @@ public class DataController : ControllerBase
     }
 
     /// <summary>
-    /// [TODO:description]
+    /// 测试用户认证，需携带有效 JWT
     /// </summary>
-    /// <returns>[TODO:return]</returns>
-    [HttpGet("TestAuth")]
+    /// <returns>认证成功信息</returns>
     [Authorize]
+    [HttpGet("TestAuth")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(string), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
     public IActionResult TestAuth()
     {
-        return Ok("Authenticated!");
+        return Ok("认证成功！");
+    }
+
+    /// <summary>
+    /// 获取当前用户信息
+    /// </summary>
+    /// <returns>用户信息，包括ID、用户名、邮箱和板卡ID</returns>
+    [Authorize]
+    [HttpGet("GetUserInfo")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(GetUserInfoResponse), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
+    public IActionResult GetUserInfo()
+    {
+        // Get User Name
+        var userName = User.Identity?.Name;
+        if (string.IsNullOrEmpty(userName))
+            return Unauthorized("未找到用户名信息");
+
+        // Get User Info
+        using var db = new Database.AppDataConnection();
+        var ret = db.GetUserByName(userName);
+        if (!ret.IsSuccessful)
+            return StatusCode(StatusCodes.Status500InternalServerError, "数据库操作失败");
+
+        if (!ret.Value.HasValue)
+            return BadRequest("用户不存在");
+
+        var user = ret.Value.Value;
+        return Ok(new GetUserInfoResponse
+        {
+            ID = user.ID,
+            Name = user.Name,
+            EMail = user.EMail,
+            BoardID = user.BoardID,
+        });
     }
 
     /// <summary>
     /// 注册新用户
     /// </summary>
-    /// <param name="name">用户名</param>
-    /// <param name="email">[TODO:parameter]</param>
-    /// <param name="password">[TODO:parameter]</param>
-    /// <returns>操作结果</returns>
+    /// <param name="name">用户名（不超过255个字符）</param>
+    /// <param name="email">邮箱地址</param>
+    /// <param name="password">用户密码</param>
+    /// <returns>操作结果，成功返回 true，失败返回错误信息</returns>
     [HttpPost("SignUpUser")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
     public IActionResult SignUpUser(string name, string email, string password)
     {
-        if (name.Length > 255)
-            return BadRequest("Name Couln't over 255 characters");
+        // 验证输入参数
+        if (string.IsNullOrWhiteSpace(name))
+            return BadRequest("用户名不能为空");
 
-        using var db = new Database.AppDataConnection();
-        var ret = db.AddUser(name, email, password);
-        return Ok(ret);
+        if (name.Length > 255)
+            return BadRequest("用户名不能超过255个字符");
+
+        if (string.IsNullOrWhiteSpace(email))
+            return BadRequest("邮箱不能为空");
+
+        if (string.IsNullOrWhiteSpace(password))
+            return BadRequest("密码不能为空");
+
+        try
+        {
+            using var db = new Database.AppDataConnection();
+            var ret = db.AddUser(name, email, password);
+            return Ok(ret);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "注册用户时发生异常");
+            return StatusCode(StatusCodes.Status500InternalServerError, "注册失败，请稍后重试");
+        }
     }
 }
 
diff --git a/server/src/Database.cs b/server/src/Database.cs
index 6d2fd97..b1f95da 100644
--- a/server/src/Database.cs
+++ b/server/src/Database.cs
@@ -122,14 +122,30 @@ public class AppDataConnection : DataConnection
 {
     private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
 
+    static readonly string DATABASE_FILEPATH = $"{Environment.CurrentDirectory}/Database.sqlite";
+
     static readonly LinqToDB.DataOptions options =
-        new LinqToDB.DataOptions()
-            .UseSQLite($"Data Source={Environment.CurrentDirectory}/Database.sqlite");
+        new LinqToDB.DataOptions().UseSQLite($"Data Source={DATABASE_FILEPATH}");
 
     /// <summary>
     /// 初始化应用程序数据连接
     /// </summary>
-    public AppDataConnection() : base(options) { }
+    public AppDataConnection() : base(options)
+    {
+        if (!Path.Exists(DATABASE_FILEPATH))
+        {
+            LinqToDB.DataProvider.SQLite.SQLiteTools.CreateDatabase(DATABASE_FILEPATH);
+            this.CreateAllTables();
+            var user = new User()
+            {
+                Name = "Admin",
+                EMail = "selfconfusion@gmail.com",
+                Password = "12345678",
+                Permission = Database.User.UserPermission.Admin,
+            };
+            this.Insert(user);
+        }
+    }
 
 
     /// <summary>
@@ -173,20 +189,69 @@ public class AppDataConnection : DataConnection
     /// [TODO:description]
     /// </summary>
     /// <param name="name">[TODO:parameter]</param>
-    /// <param name="password">[TODO:parameter]</param>
     /// <returns>[TODO:return]</returns>
-    public Result<Optional<User>> CheckUserPassword(string name, string password)
+    public Result<Optional<User>> GetUserByName(string name)
     {
         var user = this.User.Where((user) => user.Name == name).ToArray();
 
         if (user.Length > 1)
         {
             logger.Error($"TODO");
-            return new(new Exception($""));
+            return new(new Exception($"TODO"));
         }
 
-        if (user[0].Password == password) return new(user[0]);
-        else return new(Optional.Null<User>());
+        if (user.Length == 0)
+        {
+            logger.Info($"TODO");
+            return new(Optional<User>.None);
+        }
+
+        return new(user[0]);
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="email">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public Result<Optional<User>> GetUserByEMail(string email)
+    {
+        var user = this.User.Where((user) => user.EMail == email).ToArray();
+
+        if (user.Length > 1)
+        {
+            logger.Error($"TODO");
+            return new(new Exception($"TODO"));
+        }
+
+        if (user.Length == 0)
+        {
+            logger.Info($"TODO");
+            return new(Optional<User>.None);
+        }
+
+        return new(user[0]);
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="name">[TODO:parameter]</param>
+    /// <param name="password">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public Result<Optional<User>> CheckUserPassword(string name, string password)
+    {
+        var ret = this.GetUserByName(name);
+        if (!ret.IsSuccessful)
+            return new(ret.Error);
+
+        if (!ret.Value.HasValue)
+            return new(Optional<User>.None);
+
+        var user = ret.Value.Value;
+
+        if (user.Password == password) return new(user);
+        else return new(Optional<User>.None);
     }
 
     /// <summary>
diff --git a/src/APIClient.ts b/src/APIClient.ts
index d696954..19ac4a5 100644
--- a/src/APIClient.ts
+++ b/src/APIClient.ts
@@ -377,13 +377,13 @@ export class DataClient {
     }
 
     /**
-     * [TODO:description]
-     * @param name (optional) [TODO:parameter]
-     * @param password (optional) [TODO:parameter]
-     * @return [TODO:return]
+     * 用户登录，获取 JWT 令牌
+     * @param name (optional) 用户名
+     * @param password (optional) 用户密码
+     * @return JWT 令牌字符串
      */
-    login(name: string | undefined, password: string | undefined): Promise<FileResponse | null> {
-        let url_ = this.baseUrl + "/api/Data/login?";
+    login(name: string | undefined, password: string | undefined): Promise<string> {
+        let url_ = this.baseUrl + "/api/Data/Login?";
         if (name === null)
             throw new Error("The parameter 'name' cannot be null.");
         else if (name !== undefined)
@@ -397,7 +397,7 @@ export class DataClient {
         let options_: RequestInit = {
             method: "POST",
             headers: {
-                "Accept": "application/octet-stream"
+                "Accept": "application/json"
             }
         };
 
@@ -406,40 +406,48 @@ export class DataClient {
         });
     }
 
-    protected processLogin(response: Response): Promise<FileResponse | null> {
+    protected processLogin(response: Response): Promise<string> {
         const status = response.status;
         let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
-        if (status === 200 || status === 206) {
-            const contentDisposition = response.headers ? response.headers.get("content-disposition") : undefined;
-            let fileNameMatch = contentDisposition ? /filename\*=(?:(\\?['"])(.*?)\1|(?:[^\s]+'.*?')?([^;\n]*))/g.exec(contentDisposition) : undefined;
-            let fileName = fileNameMatch && fileNameMatch.length > 1 ? fileNameMatch[3] || fileNameMatch[2] : undefined;
-            if (fileName) {
-                fileName = decodeURIComponent(fileName);
-            } else {
-                fileNameMatch = contentDisposition ? /filename="?([^"]*?)"?(;|$)/g.exec(contentDisposition) : undefined;
-                fileName = fileNameMatch && fileNameMatch.length > 1 ? fileNameMatch[1] : undefined;
-            }
-            return response.blob().then(blob => { return { fileName: fileName, data: blob, status: status, headers: _headers }; });
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+    
+            return result200;
+            });
+        } else if (status === 400) {
+            return response.text().then((_responseText) => {
+            let result400: any = null;
+            let resultData400 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result400 = ProblemDetails.fromJS(resultData400);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result400);
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            return throwException("A server side error occurred.", status, _responseText, _headers);
+            });
         } else if (status !== 200 && status !== 204) {
             return response.text().then((_responseText) => {
             return throwException("An unexpected server error occurred.", status, _responseText, _headers);
             });
         }
-        return Promise.resolve<FileResponse | null>(null as any);
+        return Promise.resolve<string>(null as any);
     }
 
     /**
-     * [TODO:description]
-     * @return [TODO:return]
+     * 测试用户认证，需携带有效 JWT
+     * @return 认证成功信息
      */
-    testAuth(): Promise<FileResponse | null> {
+    testAuth(): Promise<string> {
         let url_ = this.baseUrl + "/api/Data/TestAuth";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
             headers: {
-                "Accept": "application/octet-stream"
+                "Accept": "application/json"
             }
         };
 
@@ -448,36 +456,96 @@ export class DataClient {
         });
     }
 
-    protected processTestAuth(response: Response): Promise<FileResponse | null> {
+    protected processTestAuth(response: Response): Promise<string> {
         const status = response.status;
         let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
-        if (status === 200 || status === 206) {
-            const contentDisposition = response.headers ? response.headers.get("content-disposition") : undefined;
-            let fileNameMatch = contentDisposition ? /filename\*=(?:(\\?['"])(.*?)\1|(?:[^\s]+'.*?')?([^;\n]*))/g.exec(contentDisposition) : undefined;
-            let fileName = fileNameMatch && fileNameMatch.length > 1 ? fileNameMatch[3] || fileNameMatch[2] : undefined;
-            if (fileName) {
-                fileName = decodeURIComponent(fileName);
-            } else {
-                fileNameMatch = contentDisposition ? /filename="?([^"]*?)"?(;|$)/g.exec(contentDisposition) : undefined;
-                fileName = fileNameMatch && fileNameMatch.length > 1 ? fileNameMatch[1] : undefined;
-            }
-            return response.blob().then(blob => { return { fileName: fileName, data: blob, status: status, headers: _headers }; });
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+    
+            return result200;
+            });
+        } else if (status === 401) {
+            return response.text().then((_responseText) => {
+            let result401: any = null;
+            let resultData401 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result401 = ProblemDetails.fromJS(resultData401);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result401);
+            });
         } else if (status !== 200 && status !== 204) {
             return response.text().then((_responseText) => {
             return throwException("An unexpected server error occurred.", status, _responseText, _headers);
             });
         }
-        return Promise.resolve<FileResponse | null>(null as any);
+        return Promise.resolve<string>(null as any);
+    }
+
+    /**
+     * 获取当前用户信息
+     * @return 用户信息，包括ID、用户名、邮箱和板卡ID
+     */
+    getUserInfo(): Promise<GetUserInfoResponse> {
+        let url_ = this.baseUrl + "/api/Data/GetUserInfo";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetUserInfo(_response);
+        });
+    }
+
+    protected processGetUserInfo(response: Response): Promise<GetUserInfoResponse> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result200 = GetUserInfoResponse.fromJS(resultData200);
+            return result200;
+            });
+        } else if (status === 400) {
+            return response.text().then((_responseText) => {
+            let result400: any = null;
+            let resultData400 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result400 = ProblemDetails.fromJS(resultData400);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result400);
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            return throwException("A server side error occurred.", status, _responseText, _headers);
+            });
+        } else if (status === 401) {
+            return response.text().then((_responseText) => {
+            let result401: any = null;
+            let resultData401 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result401 = ProblemDetails.fromJS(resultData401);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result401);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<GetUserInfoResponse>(null as any);
     }
 
     /**
      * 注册新用户
-     * @param name (optional) 用户名
-     * @param email (optional) [TODO:parameter]
-     * @param password (optional) [TODO:parameter]
-     * @return 操作结果
+     * @param name (optional) 用户名（不超过255个字符）
+     * @param email (optional) 邮箱地址
+     * @param password (optional) 用户密码
+     * @return 操作结果，成功返回 true，失败返回错误信息
      */
-    signUpUser(name: string | undefined, email: string | undefined, password: string | undefined): Promise<FileResponse | null> {
+    signUpUser(name: string | undefined, email: string | undefined, password: string | undefined): Promise<boolean> {
         let url_ = this.baseUrl + "/api/Data/SignUpUser?";
         if (name === null)
             throw new Error("The parameter 'name' cannot be null.");
@@ -496,7 +564,7 @@ export class DataClient {
         let options_: RequestInit = {
             method: "POST",
             headers: {
-                "Accept": "application/octet-stream"
+                "Accept": "application/json"
             }
         };
 
@@ -505,26 +573,34 @@ export class DataClient {
         });
     }
 
-    protected processSignUpUser(response: Response): Promise<FileResponse | null> {
+    protected processSignUpUser(response: Response): Promise<boolean> {
         const status = response.status;
         let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
-        if (status === 200 || status === 206) {
-            const contentDisposition = response.headers ? response.headers.get("content-disposition") : undefined;
-            let fileNameMatch = contentDisposition ? /filename\*=(?:(\\?['"])(.*?)\1|(?:[^\s]+'.*?')?([^;\n]*))/g.exec(contentDisposition) : undefined;
-            let fileName = fileNameMatch && fileNameMatch.length > 1 ? fileNameMatch[3] || fileNameMatch[2] : undefined;
-            if (fileName) {
-                fileName = decodeURIComponent(fileName);
-            } else {
-                fileNameMatch = contentDisposition ? /filename="?([^"]*?)"?(;|$)/g.exec(contentDisposition) : undefined;
-                fileName = fileNameMatch && fileNameMatch.length > 1 ? fileNameMatch[1] : undefined;
-            }
-            return response.blob().then(blob => { return { fileName: fileName, data: blob, status: status, headers: _headers }; });
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = resultData200 !== undefined ? resultData200 : <any>null;
+    
+            return result200;
+            });
+        } else if (status === 400) {
+            return response.text().then((_responseText) => {
+            let result400: any = null;
+            let resultData400 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+            result400 = ProblemDetails.fromJS(resultData400);
+            return throwException("A server side error occurred.", status, _responseText, _headers, result400);
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            return throwException("A server side error occurred.", status, _responseText, _headers);
+            });
         } else if (status !== 200 && status !== 204) {
             return response.text().then((_responseText) => {
             return throwException("An unexpected server error occurred.", status, _responseText, _headers);
             });
         }
-        return Promise.resolve<FileResponse | null>(null as any);
+        return Promise.resolve<boolean>(null as any);
     }
 }
 
@@ -2286,6 +2362,145 @@ export interface ICameraConfigRequest {
     port: number;
 }
 
+export class ProblemDetails implements IProblemDetails {
+    type?: string | undefined;
+    title?: string | undefined;
+    status?: number | undefined;
+    detail?: string | undefined;
+    instance?: string | undefined;
+    extensions!: { [key: string]: any; };
+
+    [key: string]: any;
+
+    constructor(data?: IProblemDetails) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    (<any>this)[property] = (<any>data)[property];
+            }
+        }
+        if (!data) {
+            this.extensions = {};
+        }
+    }
+
+    init(_data?: any) {
+        if (_data) {
+            for (var property in _data) {
+                if (_data.hasOwnProperty(property))
+                    this[property] = _data[property];
+            }
+            this.type = _data["type"];
+            this.title = _data["title"];
+            this.status = _data["status"];
+            this.detail = _data["detail"];
+            this.instance = _data["instance"];
+            if (_data["extensions"]) {
+                this.extensions = {} as any;
+                for (let key in _data["extensions"]) {
+                    if (_data["extensions"].hasOwnProperty(key))
+                        (<any>this.extensions)![key] = _data["extensions"][key];
+                }
+            }
+        }
+    }
+
+    static fromJS(data: any): ProblemDetails {
+        data = typeof data === 'object' ? data : {};
+        let result = new ProblemDetails();
+        result.init(data);
+        return result;
+    }
+
+    toJSON(data?: any) {
+        data = typeof data === 'object' ? data : {};
+        for (var property in this) {
+            if (this.hasOwnProperty(property))
+                data[property] = this[property];
+        }
+        data["type"] = this.type;
+        data["title"] = this.title;
+        data["status"] = this.status;
+        data["detail"] = this.detail;
+        data["instance"] = this.instance;
+        if (this.extensions) {
+            data["extensions"] = {};
+            for (let key in this.extensions) {
+                if (this.extensions.hasOwnProperty(key))
+                    (<any>data["extensions"])[key] = (<any>this.extensions)[key];
+            }
+        }
+        return data;
+    }
+}
+
+export interface IProblemDetails {
+    type?: string | undefined;
+    title?: string | undefined;
+    status?: number | undefined;
+    detail?: string | undefined;
+    instance?: string | undefined;
+    extensions: { [key: string]: any; };
+
+    [key: string]: any;
+}
+
+export class GetUserInfoResponse implements IGetUserInfoResponse {
+    /** 用户的唯一标识符 */
+    id!: string;
+    /** 用户的名称 */
+    name!: string;
+    /** 用户的电子邮箱 */
+    eMail!: string;
+    /** 用户关联的板卡ID */
+    boardID!: string;
+
+    constructor(data?: IGetUserInfoResponse) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    (<any>this)[property] = (<any>data)[property];
+            }
+        }
+    }
+
+    init(_data?: any) {
+        if (_data) {
+            this.id = _data["id"];
+            this.name = _data["name"];
+            this.eMail = _data["eMail"];
+            this.boardID = _data["boardID"];
+        }
+    }
+
+    static fromJS(data: any): GetUserInfoResponse {
+        data = typeof data === 'object' ? data : {};
+        let result = new GetUserInfoResponse();
+        result.init(data);
+        return result;
+    }
+
+    toJSON(data?: any) {
+        data = typeof data === 'object' ? data : {};
+        data["id"] = this.id;
+        data["name"] = this.name;
+        data["eMail"] = this.eMail;
+        data["boardID"] = this.boardID;
+        return data;
+    }
+}
+
+export interface IGetUserInfoResponse {
+    /** 用户的唯一标识符 */
+    id: string;
+    /** 用户的名称 */
+    name: string;
+    /** 用户的电子邮箱 */
+    eMail: string;
+    /** 用户关联的板卡ID */
+    boardID: string;
+}
+
 export class SystemException extends Exception implements ISystemException {
 
     constructor(data?: ISystemException) {
diff --git a/src/components/LoginCard.vue b/src/components/LoginCard.vue
index 3746e5b..17097da 100644
--- a/src/components/LoginCard.vue
+++ b/src/components/LoginCard.vue
@@ -1,29 +1,144 @@
 <template>
-  <div class="card card-dash h-80 w-100 shadow-xl">
+  <div class="card card-dash h-80 w-100 shadow-xl bg-base-100">
     <div class="card-body">
       <h1 class="card-title place-self-center my-3 text-2xl">User Login</h1>
       <div class="flex flex-col w-full h-full">
         <label class="input w-full my-3">
-          <img class="h-[1em] opacity-50" src="@/assets/user.svg" alt="User img" />
-          <input type="text" class="grow" placeholder="用户名" />
+          <img
+            class="h-[1em] opacity-50"
+            src="@/assets/user.svg"
+            alt="User img"
+          />
+          <input
+            type="text"
+            class="grow"
+            placeholder="用户名"
+            v-model="username"
+            @keyup.enter="handleLogin"
+          />
         </label>
         <label class="input w-full my-3">
-          <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
-          <input type="text" class="grow" placeholder="密码" />
+          <img
+            class="h-[1em] opacity-50"
+            src="@/assets/pwd.svg"
+            alt="User img"
+          />
+          <input
+            type="password"
+            class="grow"
+            placeholder="密码"
+            v-model="password"
+            @keyup.enter="handleLogin"
+          />
         </label>
       </div>
-      <div>
-        <RouterLink class="flex justify-end mx-3" to="/">忘记密码?</RouterLink>
+      <div class="flex justify-end mx-3">
+        <RouterLink to="/">忘记密码?</RouterLink>
       </div>
       <div class="card-actions flex items-end my-3">
-        <button class="btn flex-1">注册</button>
-        <button class="btn btn-primary flex-3">登录</button>
+        <button class="btn flex-1" @click="handleRegister">注册</button>
+        <button
+          class="btn btn-primary flex-3"
+          @click="handleLogin"
+          :disabled="isLoading"
+        >
+          {{ isLoading ? "登录中..." : "登录" }}
+        </button>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { AuthManager } from "@/utils/AuthManager";
+import { useAlertStore } from "@/components/Alert";
+
+const router = useRouter();
+
+// 获取Alert store
+const alertStore = useAlertStore();
+
+// 响应式数据
+const username = ref("");
+const password = ref("");
+const isLoading = ref(false);
+
+// 登录处理函数
+const handleLogin = async () => {
+  // 验证输入
+  if (!username.value.trim()) {
+    alertStore?.show("请输入用户名", "error");
+    return;
+  }
+
+  if (!password.value.trim()) {
+    alertStore?.show("请输入密码", "error");
+    return;
+  }
+
+  isLoading.value = true;
+
+  try {
+    // 调用AuthManager的登录函数
+    await AuthManager.login(username.value.trim(), password.value.trim());
+
+    // 登录成功，显示成功消息并跳转
+    alertStore?.show("登录成功", "success", 1000);
+
+    // 短暂延迟后跳转到project页面
+    setTimeout(async () => {
+      await router.push("/project");
+    }, 1000);
+  } catch (error: any) {
+    console.error("Login error:", error);
+
+    // 处理不同类型的错误
+    let errorMessage = "登录失败，请检查网络连接";
+
+    if (error.status === 400) {
+      errorMessage = "用户名或密码错误";
+    } else if (error.status === 401) {
+      errorMessage = "用户名或密码错误";
+    } else if (error.status === 500) {
+      errorMessage = "服务器错误，请稍后重试";
+    } else if (error.message) {
+      errorMessage = error.message;
+    }
+
+    alertStore?.show(errorMessage, "error");
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 注册处理函数（可以根据需要实现）
+const handleRegister = () => {
+  // 这里可以导航到注册页面或者打开注册模态框
+  console.log("Navigate to register page");
+  // router.push('/register')
+};
+
+// 页面初始化时检查是否已有有效token
+const checkExistingToken = async () => {
+  try {
+    const isValid = await AuthManager.verifyToken();
+    if (isValid) {
+      // 如果token仍然有效，直接跳转到project页面
+      await router.push("/project");
+    }
+  } catch (error) {
+    // token无效或验证失败，继续显示登录页面
+    console.log("Token verification failed, showing login page");
+  }
+};
+
+// 组件挂载时检查已存在的token
+onMounted(() => {
+  checkExistingToken();
+});
+</script>
 
 <style scoped>
 @import "@/assets/main.css";
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index e49cb1b..4ddb5ff 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -7,20 +7,7 @@
           role="button"
           class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h8m-8 6h16"
-            />
-          </svg>
+          <MenuIcon />
         </div>
         <ul
           tabindex="0"
@@ -79,12 +66,58 @@
       </router-link>
     </div>
     <div class="navbar-end">
-      <router-link
-        to="/login"
-        class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
-      >
-        登录
-      </router-link>
+      <!-- 未登录状态 -->
+      <template v-if="!isLoggedIn">
+        <router-link
+          to="/login"
+          class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
+        >
+          登录
+        </router-link>
+      </template>
+
+      <!-- 已登录状态 -->
+      <template v-else>
+        <div class="dropdown dropdown-end mr-3">
+          <div
+            tabindex="0"
+            role="button"
+            class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300 flex items-center gap-2"
+            @click="isUserMenuOpen = !isUserMenuOpen"
+          >
+            <User class="h-5 w-5" />
+            <span class="font-medium">{{ userName }}</span>
+            <ChevronDownIcon
+              class="icon"
+              :class="{ 'rotate-180': isUserMenuOpen }"
+            />
+          </div>
+          <ul
+            tabindex="0"
+            class="menu menu-sm dropdown-content bg-base-200 rounded-lg z-50 mt-3 w-48 p-2 shadow-lg transition-all duration-300 ease-in-out"
+          >
+            <li class="my-1 hover:translate-x-1 transition-all duration-300">
+              <router-link
+                to="/user"
+                class="text-base font-medium flex items-center gap-2"
+              >
+                <User class="icon" />
+                用户中心
+              </router-link>
+            </li>
+            <li class="my-1 hover:translate-x-1 transition-all duration-300">
+              <button
+                @click="handleLogout"
+                class="text-base font-medium flex items-center gap-2 w-full text-left hover:bg-error hover:text-error-content"
+              >
+                <LogOutIcon class="icon" />
+                退出登录
+              </button>
+            </li>
+          </ul>
+        </div>
+      </template>
+
       <div class="ml-2 transition-all duration-500 hover:rotate-12">
         <ThemeControlButton />
       </div>
@@ -93,17 +126,68 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { onBeforeRouteUpdate, useRouter } from "vue-router";
 import ThemeControlButton from "./ThemeControlButton.vue";
 import {
-  SquareActivity,
+  MenuIcon,
   FileText,
   BookOpenText,
-  Video,
   FlaskConical,
   House,
   User,
   PencilRuler,
+  LogOutIcon,
+  ChevronDownIcon,
 } from "lucide-vue-next";
+import { AuthManager } from "@/utils/AuthManager";
+
+const router = useRouter();
+
+// 响应式数据
+const userName = ref<string>("");
+const isUserMenuOpen = ref<boolean>(false);
+const isLoggedIn = ref<boolean>(false); // 改为响应式变量
+
+// 方法
+const loadUserInfo = async () => {
+  try {
+    const authenticated = await AuthManager.isAuthenticated();
+    if (authenticated) {
+      const client = AuthManager.createAuthenticatedClient();
+      const userInfo = await client.getUserInfo();
+      userName.value = userInfo.name;
+      isLoggedIn.value = true;
+    } else {
+      userName.value = "";
+      isLoggedIn.value = false;
+    }
+  } catch (error) {
+    console.error("Failed to load user info:", error);
+    // 如果获取用户信息失败，清除token
+    AuthManager.clearToken();
+    userName.value = "";
+    isLoggedIn.value = false;
+  }
+};
+
+const handleLogout = () => {
+  AuthManager.logout();
+  userName.value = "";
+  isLoggedIn.value = false;
+  router.push("/");
+};
+
+// 生命周期钩子
+onMounted(() => {
+  loadUserInfo();
+  
+  // 监听路由变化
+  router.afterEach(() => {
+    console.log("Route is changing, reloading user info...");
+    loadUserInfo();
+  });
+});
 </script>
 
 <style scoped>
diff --git a/src/utils/AuthManager.ts b/src/utils/AuthManager.ts
new file mode 100644
index 0000000..0663530
--- /dev/null
+++ b/src/utils/AuthManager.ts
@@ -0,0 +1,93 @@
+import { DataClient } from '@/APIClient'
+
+export class AuthManager {
+  // 存储token到localStorage
+  public static setToken(token: string): void {
+    localStorage.setItem('authToken', token)
+  }
+  
+  // 从localStorage获取token
+  public static getToken(): string | null {
+    return localStorage.getItem('authToken')
+  }
+  
+  // 清除token
+  public static clearToken(): void {
+    localStorage.removeItem('authToken')
+  }
+  
+  // 检查是否已认证
+  public static async isAuthenticated(): Promise<boolean> {
+    return await AuthManager.verifyToken()
+  }
+  
+  // 为HTTP请求添加Authorization header
+  public static addAuthHeader(client: any): void {
+    const token = AuthManager.getToken()
+    if (token && client.http) {
+      const originalFetch = client.http.fetch
+      client.http.fetch = (url: RequestInfo, init?: RequestInit) => {
+        if (!init) init = {}
+        if (!init.headers) init.headers = {}
+        
+        // 添加Authorization header
+        if (typeof init.headers === 'object' && init.headers !== null) {
+          (init.headers as any)['Authorization'] = `Bearer ${token}`
+        }
+        
+        return originalFetch(url, init)
+      }
+    }
+  }
+  
+  // 创建已配置认证的API客户端
+  public static createAuthenticatedClient(): DataClient {
+    const client = new DataClient()
+    AuthManager.addAuthHeader(client)
+    return client
+  }
+  
+  // 登录函数
+  public static async login(username: string, password: string): Promise<boolean> {
+    try {
+      const client = new DataClient()
+      const token = await client.login(username, password)
+      
+      if (token) {
+        AuthManager.setToken(token)
+        
+        // 验证token
+        const authClient = AuthManager.createAuthenticatedClient()
+        await authClient.testAuth()
+        
+        return true
+      }
+      return false
+    } catch (error) {
+      AuthManager.clearToken()
+      throw error
+    }
+  }
+  
+  // 登出函数
+  public static logout(): void {
+    AuthManager.clearToken()
+  }
+  
+  // 验证当前token是否有效
+  public static async verifyToken(): Promise<boolean> {
+    try {
+      const token = AuthManager.getToken()
+      if (!token) {
+        return false
+      }
+      
+      const client = AuthManager.createAuthenticatedClient()
+      await client.testAuth()
+      return true
+    } catch (error) {
+      AuthManager.clearToken()
+      return false
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 7ead1ff..409de10 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,11 +1,9 @@
 <template>
-  <main>
-    <div class="flex items-center justify-center min-h-screen">
-      <div class="relative w-full max-w-md">
-        <LoginCard />
-      </div>
+  <div class="flex items-center justify-center min-h-screen bg-base-200">
+    <div class="relative w-full max-w-md">
+      <LoginCard />
     </div>
-  </main>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/VideoStreamView.vue b/src/views/VideoStreamView.vue
index f3f609e..58ac875 100644
--- a/src/views/VideoStreamView.vue
+++ b/src/views/VideoStreamView.vue
@@ -96,7 +96,7 @@
               :dsiabled="configing"
             >
               <RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
-              <RefreshCw v-else class="h-4 w-4 mr-2" />
+              <CogIcon v-else class="h-4 w-4 mr-2" />
               {{ configing ? "配置中..." : "配置摄像头" }}
             </button>
             <button
@@ -295,6 +295,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 import {
+  CogIcon,
   Settings,
   Video,
   Users,
@@ -438,12 +439,12 @@ const takeSnapshot = async () => {
 async function configCamera() {
   configing.value = true;
   try {
-    // addLog("info", "正在配置并初始化摄像头...");
-    // const boardconfig = new CameraConfigRequest({
-    //   address: eqps.boardAddr,
-    //   port: eqps.boardPort,
-    // });
-    // await videoClient.configureCamera(boardconfig);
+    addLog("info", "正在配置并初始化摄像头...");
+    const boardconfig = new CameraConfigRequest({
+      address: eqps.boardAddr,
+      port: eqps.boardPort,
+    });
+    await videoClient.configureCamera(boardconfig);
 
     const status = await videoClient.getCameraConfig();
     if (status.isConfigured) {