Merge pull request #3 from NepetaLemon/refactor/backend-wire-bootstrap

refactor(backend): 引入 Wire 重构服务启动与依赖组装

backend/Makefile

@@ -0,0 +1,6 @@
+.PHONY: wire
+
+wire:
+	@echo "生成 Wire 代码..."
+	@cd cmd/server && go generate
+	@echo "Wire 代码生成完成"

backend/cmd/server/main.go

@@ -1,8 +1,11 @@
 package main
 
+//go:generate go run github.com/google/wire/cmd/wire
+
 import (
 	"context"
 	_ "embed"
+	"errors"
 	"flag"
 	"log"
 	"net/http"
@@ -110,78 +113,25 @@ func runSetupServer() {
 }
 
 func runMainServer() {
-	// 加载配置
-	cfg, err := config.Load()
-	if err != nil {
-		log.Fatalf("Failed to load config: %v", err)
-	}
-
-	// 初始化时区（类似 PHP 的 date_default_timezone_set）
-	if err := timezone.Init(cfg.Timezone); err != nil {
-		log.Fatalf("Failed to initialize timezone: %v", err)
-	}
-
-	// 初始化数据库
-	db, err := initDB(cfg)
-	if err != nil {
-		log.Fatalf("Failed to connect to database: %v", err)
-	}
-
-	// 初始化Redis
-	rdb := initRedis(cfg)
-
-	// 初始化Repository
-	repos := repository.NewRepositories(db)
-
-	// 初始化Service
-	services := service.NewServices(repos, rdb, cfg)
-
-	// 初始化Handler
 	buildInfo := handler.BuildInfo{
 		Version:   Version,
 		BuildType: BuildType,
 	}
-	handlers := handler.NewHandlers(services, repos, rdb, buildInfo)
 
-	// 设置Gin模式
+	app, err := initializeApplication(buildInfo)
-	if cfg.Server.Mode == "release" {
+	if err != nil {
-		gin.SetMode(gin.ReleaseMode)
+		log.Fatalf("Failed to initialize application: %v", err)
-	}
-
-	// 创建路由
-	r := gin.New()
-	r.Use(gin.Recovery())
-	r.Use(middleware.Logger())
-	r.Use(middleware.CORS())
-
-	// 注册路由
-	registerRoutes(r, handlers, services, repos)
-
-	// Serve embedded frontend if available
-	if web.HasEmbeddedFrontend() {
-		r.Use(web.ServeEmbeddedFrontend())
 	}
+	defer app.Cleanup()
 
 	// 启动服务器
-	srv := &http.Server{
-		Addr:    cfg.Server.Address(),
-		Handler: r,
-		// ReadHeaderTimeout: 读取请求头的超时时间，防止慢速请求头攻击
-		ReadHeaderTimeout: time.Duration(cfg.Server.ReadHeaderTimeout) * time.Second,
-		// IdleTimeout: 空闲连接超时时间，释放不活跃的连接资源
-		IdleTimeout: time.Duration(cfg.Server.IdleTimeout) * time.Second,
-		// 注意：不设置 WriteTimeout，因为流式响应可能持续十几分钟
-		// 不设置 ReadTimeout，因为大请求体可能需要较长时间读取
-	}
-
-	// 优雅关闭
 	go func() {
-		if err := srv.ListenAndServe(); err != nil && err != http.ErrServerClosed {
+		if err := app.Server.ListenAndServe(); err != nil && !errors.Is(err, http.ErrServerClosed) {
 			log.Fatalf("Failed to start server: %v", err)
 		}
 	}()
 
-	log.Printf("Server started on %s", cfg.Server.Address())
+	log.Printf("Server started on %s", app.Server.Addr)
 
 	// 等待中断信号
 	quit := make(chan os.Signal, 1)
@@ -193,7 +143,7 @@ func runMainServer() {
 	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
 	defer cancel()
 
-	if err := srv.Shutdown(ctx); err != nil {
+	if err := app.Server.Shutdown(ctx); err != nil {
 		log.Fatalf("Server forced to shutdown: %v", err)
 	}
 
@@ -201,6 +151,11 @@ func runMainServer() {
 }
 
 func initDB(cfg *config.Config) (*gorm.DB, error) {
+	// 初始化时区（在数据库连接之前，确保时区设置正确）
+	if err := timezone.Init(cfg.Timezone); err != nil {
+		return nil, err
+	}
+
 	gormConfig := &gorm.Config{}
 	if cfg.Server.Mode == "debug" {
 		gormConfig.Logger = logger.Default.LogMode(logger.Info)
@@ -479,3 +434,34 @@ func registerRoutes(r *gin.Engine, h *handler.Handlers, s *service.Services, rep
 		gateway.GET("/usage", h.Gateway.Usage)
 	}
 }
+
+// setupRouter 配置路由器中间件和路由
+func setupRouter(r *gin.Engine, cfg *config.Config, handlers *handler.Handlers, services *service.Services, repos *repository.Repositories) *gin.Engine {
+	// 应用中间件
+	r.Use(middleware.Logger())
+	r.Use(middleware.CORS())
+
+	// 注册路由
+	registerRoutes(r, handlers, services, repos)
+
+	// Serve embedded frontend if available
+	if web.HasEmbeddedFrontend() {
+		r.Use(web.ServeEmbeddedFrontend())
+	}
+
+	return r
+}
+
+// createHTTPServer 创建HTTP服务器
+func createHTTPServer(cfg *config.Config, router *gin.Engine) *http.Server {
+	return &http.Server{
+		Addr:    cfg.Server.Address(),
+		Handler: router,
+		// ReadHeaderTimeout: 读取请求头的超时时间，防止慢速请求头攻击
+		ReadHeaderTimeout: time.Duration(cfg.Server.ReadHeaderTimeout) * time.Second,
+		// IdleTimeout: 空闲连接超时时间，释放不活跃的连接资源
+		IdleTimeout: time.Duration(cfg.Server.IdleTimeout) * time.Second,
+		// 注意：不设置 WriteTimeout，因为流式响应可能持续十几分钟
+		// 不设置 ReadTimeout，因为大请求体可能需要较长时间读取
+	}
+}

backend/cmd/server/wire.go

@@ -0,0 +1,103 @@
+//go:build wireinject
+// +build wireinject
+
+package main
+
+import (
+	"sub2api/internal/config"
+	"sub2api/internal/handler"
+	"sub2api/internal/repository"
+	"sub2api/internal/service"
+
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+	"github.com/google/wire"
+	"github.com/redis/go-redis/v9"
+	"gorm.io/gorm"
+)
+
+type Application struct {
+	Server  *http.Server
+	Cleanup func()
+}
+
+func initializeApplication(buildInfo handler.BuildInfo) (*Application, error) {
+	wire.Build(
+		// Config provider
+		provideConfig,
+
+		// Database provider
+		provideDB,
+
+		// Redis provider
+		provideRedis,
+
+		// Repository provider
+		provideRepositories,
+
+		// Service provider
+		provideServices,
+
+		// Handler provider
+		provideHandlers,
+
+		// Router provider
+		provideRouter,
+
+		// HTTP Server provider
+		provideHTTPServer,
+
+		// Cleanup provider
+		provideCleanup,
+
+		// Application provider
+		wire.Struct(new(Application), "Server", "Cleanup"),
+	)
+	return nil, nil
+}
+
+func provideConfig() (*config.Config, error) {
+	return config.Load()
+}
+
+func provideDB(cfg *config.Config) (*gorm.DB, error) {
+	return initDB(cfg)
+}
+
+func provideRedis(cfg *config.Config) *redis.Client {
+	return initRedis(cfg)
+}
+
+func provideRepositories(db *gorm.DB) *repository.Repositories {
+	return repository.NewRepositories(db)
+}
+
+func provideServices(repos *repository.Repositories, rdb *redis.Client, cfg *config.Config) *service.Services {
+	return service.NewServices(repos, rdb, cfg)
+}
+
+func provideHandlers(services *service.Services, repos *repository.Repositories, rdb *redis.Client, buildInfo handler.BuildInfo) *handler.Handlers {
+	return handler.NewHandlers(services, repos, rdb, buildInfo)
+}
+
+func provideRouter(cfg *config.Config, handlers *handler.Handlers, services *service.Services, repos *repository.Repositories) *gin.Engine {
+	if cfg.Server.Mode == "release" {
+		gin.SetMode(gin.ReleaseMode)
+	}
+
+	r := gin.New()
+	r.Use(gin.Recovery())
+
+	return setupRouter(r, cfg, handlers, services, repos)
+}
+
+func provideHTTPServer(cfg *config.Config, router *gin.Engine) *http.Server {
+	return createHTTPServer(cfg, router)
+}
+
+func provideCleanup() func() {
+	return func() {
+		//	@todo
+	}
+}

backend/cmd/server/wire_gen.go

@@ -0,0 +1,99 @@
+// Code generated by Wire. DO NOT EDIT.
+
+//go:generate go run -mod=mod github.com/google/wire/cmd/wire
+//go:build !wireinject
+// +build !wireinject
+
+package main
+
+import (
+	"github.com/gin-gonic/gin"
+	"github.com/redis/go-redis/v9"
+	"gorm.io/gorm"
+	"net/http"
+	"sub2api/internal/config"
+	"sub2api/internal/handler"
+	"sub2api/internal/repository"
+	"sub2api/internal/service"
+)
+
+import (
+	_ "embed"
+)
+
+// Injectors from wire.go:
+
+func initializeApplication(buildInfo handler.BuildInfo) (*Application, error) {
+	config, err := provideConfig()
+	if err != nil {
+		return nil, err
+	}
+	db, err := provideDB(config)
+	if err != nil {
+		return nil, err
+	}
+	repositories := provideRepositories(db)
+	client := provideRedis(config)
+	services := provideServices(repositories, client, config)
+	handlers := provideHandlers(services, repositories, client, buildInfo)
+	engine := provideRouter(config, handlers, services, repositories)
+	server := provideHTTPServer(config, engine)
+	v := provideCleanup()
+	application := &Application{
+		Server:  server,
+		Cleanup: v,
+	}
+	return application, nil
+}
+
+// wire.go:
+
+type Application struct {
+	Server  *http.Server
+	Cleanup func()
+}
+
+func provideConfig() (*config.Config, error) {
+	return config.Load()
+}
+
+func provideDB(cfg *config.Config) (*gorm.DB, error) {
+	return initDB(cfg)
+}
+
+func provideRedis(cfg *config.Config) *redis.Client {
+	return initRedis(cfg)
+}
+
+func provideRepositories(db *gorm.DB) *repository.Repositories {
+	return repository.NewRepositories(db)
+}
+
+func provideServices(repos *repository.Repositories, rdb *redis.Client, cfg *config.Config) *service.Services {
+	return service.NewServices(repos, rdb, cfg)
+}
+
+func provideHandlers(services *service.Services, repos *repository.Repositories, rdb *redis.Client, buildInfo handler.BuildInfo) *handler.Handlers {
+	return handler.NewHandlers(services, repos, rdb, buildInfo)
+}
+
+func provideRouter(cfg *config.Config, handlers *handler.Handlers, services *service.Services, repos *repository.Repositories) *gin.Engine {
+	if cfg.Server.Mode == "release" {
+		gin.SetMode(gin.ReleaseMode)
+	}
+
+	r := gin.New()
+	r.Use(gin.Recovery())
+
+	return setupRouter(r, cfg, handlers, services, repos)
+}
+
+func provideHTTPServer(cfg *config.Config, router *gin.Engine) *http.Server {
+	return createHTTPServer(cfg, router)
+}
+
+func provideCleanup() func() {
+	return func() {
+
+	}
+}

backend/go.mod

@@ -13,6 +13,7 @@ require (
 	github.com/redis/go-redis/v9 v9.3.0
 	github.com/spf13/viper v1.18.2
 	golang.org/x/crypto v0.44.0
+	golang.org/x/net v0.47.0
 	golang.org/x/term v0.37.0
 	gopkg.in/yaml.v3 v3.0.1
 	gorm.io/driver/postgres v1.5.4
@@ -33,6 +34,8 @@ require (
 	github.com/go-playground/validator/v10 v10.14.0 // indirect
 	github.com/goccy/go-json v0.10.2 // indirect
 	github.com/google/go-querystring v1.1.0 // indirect
+	github.com/google/subcommands v1.2.0 // indirect
+	github.com/google/wire v0.7.0 // indirect
 	github.com/hashicorp/hcl v1.0.0 // indirect
 	github.com/icholy/digest v1.1.0 // indirect
 	github.com/jackc/pgpassfile v1.0.0 // indirect
@@ -50,6 +53,7 @@ require (
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/pelletier/go-toml/v2 v2.1.0 // indirect
+	github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 // indirect
 	github.com/quic-go/qpack v0.5.1 // indirect
 	github.com/quic-go/quic-go v0.56.0 // indirect
 	github.com/refraction-networking/utls v1.8.1 // indirect
@@ -66,9 +70,11 @@ require (
 	go.uber.org/multierr v1.9.0 // indirect
 	golang.org/x/arch v0.3.0 // indirect
 	golang.org/x/exp v0.0.0-20230905200255-921286631fa9 // indirect
-	golang.org/x/net v0.47.0 // indirect
+	golang.org/x/mod v0.29.0 // indirect
+	golang.org/x/sync v0.18.0 // indirect
 	golang.org/x/sys v0.38.0 // indirect
 	golang.org/x/text v0.31.0 // indirect
+	golang.org/x/tools v0.38.0 // indirect
 	google.golang.org/protobuf v1.31.0 // indirect
 	gopkg.in/ini.v1 v1.67.0 // indirect
 )

backend/go.sum

@@ -48,8 +48,12 @@ github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX
 github.com/google/go-querystring v1.1.0 h1:AnCroh3fv4ZBgVIf1Iwtovgjaw/GiKJo8M8yD/fhyJ8=
 github.com/google/go-querystring v1.1.0/go.mod h1:Kcdr2DB4koayq7X8pmAG4sNG59So17icRSOU623lUBU=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/google/subcommands v1.2.0 h1:vWQspBTo2nEqTUFita5/KeEWlUL8kQObDFbub/EN9oE=
+github.com/google/subcommands v1.2.0/go.mod h1:ZjhPrFU+Olkh9WazFPsl27BQ4UPiG37m3yTrtFlrHVk=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/wire v0.7.0 h1:JxUKI6+CVBgCO2WToKy/nQk0sS+amI9z9EjVmdaocj4=
+github.com/google/wire v0.7.0/go.mod h1:n6YbUQD9cPKTnHXEBN2DXlOp/mVADhVErcMFb0v3J18=
 github.com/hashicorp/hcl v1.0.0 h1:0Anlzjpi4vEasTeNFn2mLJgTSwt0+6sfsiTG8qcWGx4=
 github.com/hashicorp/hcl v1.0.0/go.mod h1:E5yfLk+7swimpb2L/Alb/PJmXilQ/rhwaUYs4T20WEQ=
 github.com/icholy/digest v1.1.0 h1:HfGg9Irj7i+IX1o1QAmPfIBNu/Q5A5Tu3n/MED9k9H4=
@@ -154,8 +158,12 @@ golang.org/x/crypto v0.44.0 h1:A97SsFvM3AIwEEmTBiaxPPTYpDC47w720rdiiUvgoAU=
 golang.org/x/crypto v0.44.0/go.mod h1:013i+Nw79BMiQiMsOPcVCB5ZIJbYkerPrGnOa00tvmc=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9 h1:GoHiUyI/Tp2nVkLI2mCxVkOjsbSXD66ic0XW0js0R9g=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9/go.mod h1:S2oDrQGGwySpoQPVqRShND87VCbxmc6bL1Yd2oYrm6k=
+golang.org/x/mod v0.29.0 h1:HV8lRxZC4l2cr3Zq1LvtOsi/ThTgWnUk/y64QSs8GwA=
+golang.org/x/mod v0.29.0/go.mod h1:NyhrlYXJ2H4eJiRy/WDBO6HMqZQ6q9nk4JzS3NuCK+w=
 golang.org/x/net v0.47.0 h1:Mx+4dIFzqraBXUugkia1OOvlD6LemFo1ALMHjrXDOhY=
 golang.org/x/net v0.47.0/go.mod h1:/jNxtkgq5yWUGYkaZGqo27cfGZ1c5Nen03aYrrKpVRU=
+golang.org/x/sync v0.18.0 h1:kr88TuHDroi+UVf+0hZnirlk8o8T+4MrK6mr60WkH/I=
+golang.org/x/sync v0.18.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
 golang.org/x/sys v0.0.0-20220704084225-05e143d24a9e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.38.0 h1:3yZWxaJjBmCWXqhN1qh02AkOnCQ1poK6oF+a7xWL6Gc=
@@ -166,6 +174,8 @@ golang.org/x/text v0.31.0 h1:aC8ghyu4JhP8VojJ2lEHBnochRno1sgL6nEi9WGFGMM=
 golang.org/x/text v0.31.0/go.mod h1:tKRAlv61yKIjGGHX/4tP1LTbc13YSec1pxVEWXzfoeM=
 golang.org/x/time v0.12.0 h1:ScB/8o8olJvc+CQPWrK3fPZNfh7qgwCrY0zJmoEQLSE=
 golang.org/x/time v0.12.0/go.mod h1:CDIdPxbZBQxdj6cxyCIdrNogrJKMJ7pr37NYpMcMDSg=
+golang.org/x/tools v0.38.0 h1:Hx2Xv8hISq8Lm16jvBZ2VQf+RLmbd7wVUsALibYI/IQ=
+golang.org/x/tools v0.38.0/go.mod h1:yEsQ/d/YK8cjh0L6rZlY8tgtlKiBNTL14pGDJPJpYQs=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
 google.golang.org/protobuf v1.31.0 h1:g0LDEJHgrBl9N9r17Ru3sqWhkIx2NB67okBHPwC7hs8=

backend/internal/service/update_service.go

@@ -125,6 +125,7 @@ func (s *UpdateService) CheckUpdate(ctx context.Context, force bool) (*UpdateInf
 }
 
 // PerformUpdate downloads and applies the update
+// Uses atomic file replacement pattern for safe in-place updates
 func (s *UpdateService) PerformUpdate(ctx context.Context) error {
 	info, err := s.CheckUpdate(ctx, true)
 	if err != nil {
@@ -173,8 +174,11 @@ func (s *UpdateService) PerformUpdate(ctx context.Context) error {
 		return fmt.Errorf("failed to resolve symlinks: %w", err)
 	}
 
-	// Create temp directory for extraction
+	exeDir := filepath.Dir(exePath)
-	tempDir, err := os.MkdirTemp("", "sub2api-update-*")
+
+	// Create temp directory in the SAME directory as executable
+	// This ensures os.Rename is atomic (same filesystem)
+	tempDir, err := os.MkdirTemp(exeDir, ".sub2api-update-*")
 	if err != nil {
 		return fmt.Errorf("failed to create temp dir: %w", err)
 	}
@@ -199,23 +203,36 @@ func (s *UpdateService) PerformUpdate(ctx context.Context) error {
 		return fmt.Errorf("extraction failed: %w", err)
 	}
 
-	// Backup current binary
+	// Set executable permission before replacement
-	backupFile := exePath + ".backup"
+	if err := os.Chmod(newBinaryPath, 0755); err != nil {
-	if err := os.Rename(exePath, backupFile); err != nil {
-		return fmt.Errorf("backup failed: %w", err)
-	}
-
-	// Replace with new binary
-	if err := copyFile(newBinaryPath, exePath); err != nil {
-		os.Rename(backupFile, exePath)
-		return fmt.Errorf("replace failed: %w", err)
-	}
-
-	// Make executable
-	if err := os.Chmod(exePath, 0755); err != nil {
 		return fmt.Errorf("chmod failed: %w", err)
 	}
 
+	// Atomic replacement using rename pattern:
+	// 1. Rename current -> backup (atomic on Unix)
+	// 2. Rename new -> current (atomic on Unix, same filesystem)
+	// If step 2 fails, restore backup
+	backupPath := exePath + ".backup"
+
+	// Remove old backup if exists
+	os.Remove(backupPath)
+
+	// Step 1: Move current binary to backup
+	if err := os.Rename(exePath, backupPath); err != nil {
+		return fmt.Errorf("backup failed: %w", err)
+	}
+
+	// Step 2: Move new binary to target location (atomic, same filesystem)
+	if err := os.Rename(newBinaryPath, exePath); err != nil {
+		// Restore backup on failure
+		if restoreErr := os.Rename(backupPath, exePath); restoreErr != nil {
+			return fmt.Errorf("replace failed and restore failed: %w (restore error: %v)", err, restoreErr)
+		}
+		return fmt.Errorf("replace failed (restored backup): %w", err)
+	}
+
+	// Success - backup file is kept for rollback capability
+	// It will be cleaned up on next successful update
 	return nil
 }
 
@@ -515,23 +532,6 @@ func (s *UpdateService) extractBinary(archivePath, destPath string) error {
 	return err
 }
 
-func copyFile(src, dst string) error {
-	in, err := os.Open(src)
-	if err != nil {
-		return err
-	}
-	defer in.Close()
-
-	out, err := os.Create(dst)
-	if err != nil {
-		return err
-	}
-	defer out.Close()
-
-	_, err = io.Copy(out, in)
-	return err
-}
-
 func (s *UpdateService) getFromCache(ctx context.Context) (*UpdateInfo, error) {
 	data, err := s.rdb.Get(ctx, updateCacheKey).Result()
 	if err != nil {

backend/tools.go

@@ -0,0 +1,8 @@
+//go:build tools
+// +build tools
+
+package tools
+
+import (
+	_ "github.com/google/wire/cmd/wire"
+)

frontend/src/api/admin/system.ts

@@ -40,9 +40,42 @@ export async function checkUpdates(force = false): Promise<VersionInfo> {
   return data;
 }
 
+export interface UpdateResult {
+  message: string;
+  need_restart: boolean;
+}
+
+/**
+ * Perform system update
+ * Downloads and applies the latest version
+ */
+export async function performUpdate(): Promise<UpdateResult> {
+  const { data } = await apiClient.post<UpdateResult>('/admin/system/update');
+  return data;
+}
+
+/**
+ * Rollback to previous version
+ */
+export async function rollback(): Promise<UpdateResult> {
+  const { data } = await apiClient.post<UpdateResult>('/admin/system/rollback');
+  return data;
+}
+
+/**
+ * Restart the service
+ */
+export async function restartService(): Promise<{ message: string }> {
+  const { data } = await apiClient.post<{ message: string }>('/admin/system/restart');
+  return data;
+}
+
 export const systemAPI = {
   getVersion,
   checkUpdates,
+  performUpdate,
+  rollback,
+  restartService,
 };
 
 export default systemAPI;

frontend/src/components/common/VersionBadge.vue

@@ -12,7 +12,8 @@
         ]"
         :title="hasUpdate ? 'New version available' : 'Up to date'"
       >
-        <span class="font-medium">v{{ currentVersion }}</span>
+        <span v-if="currentVersion" class="font-medium">v{{ currentVersion }}</span>
+        <span v-else class="font-medium w-12 h-3 bg-gray-200 dark:bg-dark-600 rounded animate-pulse"></span>
         <!-- Update indicator -->
         <span v-if="hasUpdate" class="relative flex h-2 w-2">
           <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
@@ -56,7 +57,8 @@
               <!-- Version display - centered and prominent -->
               <div class="text-center mb-4">
                 <div class="inline-flex items-center gap-2">
-                  <span class="text-2xl font-bold text-gray-900 dark:text-white">v{{ currentVersion }}</span>
+                  <span v-if="currentVersion" class="text-2xl font-bold text-gray-900 dark:text-white">v{{ currentVersion }}</span>
+                  <span v-else class="text-2xl font-bold text-gray-400 dark:text-dark-500">--</span>
                   <!-- Show check mark when up to date -->
                   <span v-if="!hasUpdate" class="flex items-center justify-center w-5 h-5 rounded-full bg-green-100 dark:bg-green-900/30">
                     <svg class="w-3 h-3 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
@@ -69,8 +71,63 @@
                 </p>
               </div>
 
-              <!-- Update available for source build - show git pull hint -->
+              <!-- Priority 1: Update error (must check before hasUpdate) -->
-              <div v-if="hasUpdate && !isReleaseBuild" class="space-y-2">
+              <div v-if="updateError" class="space-y-2">
+                <div class="flex items-center gap-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50">
+                  <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center">
+                    <svg class="w-4 h-4 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-red-700 dark:text-red-300">{{ t('version.updateFailed') }}</p>
+                    <p class="text-xs text-red-600/70 dark:text-red-400/70 truncate">{{ updateError }}</p>
+                  </div>
+                </div>
+
+                <!-- Retry button -->
+                <button
+                  @click="handleUpdate"
+                  :disabled="updating"
+                  class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-500 hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  {{ t('version.retry') }}
+                </button>
+              </div>
+
+              <!-- Priority 2: Update success - need restart -->
+              <div v-else-if="updateSuccess && needRestart" class="space-y-2">
+                <div class="flex items-center gap-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800/50">
+                  <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center">
+                    <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-green-700 dark:text-green-300">{{ t('version.updateComplete') }}</p>
+                    <p class="text-xs text-green-600/70 dark:text-green-400/70">{{ t('version.restartRequired') }}</p>
+                  </div>
+                </div>
+
+                <!-- Restart button -->
+                <button
+                  @click="handleRestart"
+                  :disabled="restarting"
+                  class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-green-500 hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  <svg v-if="restarting" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  <svg v-else class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                  </svg>
+                  {{ restarting ? t('version.restarting') : t('version.restartNow') }}
+                </button>
+              </div>
+
+              <!-- Priority 3: Update available for source build - show git pull hint -->
+              <div v-else-if="hasUpdate && !isReleaseBuild" class="space-y-2">
                 <a
                   v-if="releaseInfo?.html_url && releaseInfo.html_url !== '#'"
                   :href="releaseInfo.html_url"
@@ -100,29 +157,53 @@
                 </div>
               </div>
 
-              <!-- Update available for release build - show download link -->
+              <!-- Priority 4: Update available for release build - show update button -->
-              <a
+              <div v-else-if="hasUpdate && isReleaseBuild" class="space-y-2">
-                v-else-if="hasUpdate && isReleaseBuild && releaseInfo?.html_url && releaseInfo.html_url !== '#'"
+                <!-- Update info card -->
-                :href="releaseInfo.html_url"
+                <div class="flex items-center gap-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50">
-                target="_blank"
+                  <div class="flex-shrink-0 w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center">
-                rel="noopener noreferrer"
+                    <svg class="w-4 h-4 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                class="flex items-center gap-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50 hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors group"
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-              >
+                    </svg>
-                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center">
+                  </div>
-                  <svg class="w-4 h-4 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-amber-700 dark:text-amber-300">{{ t('version.updateAvailable') }}</p>
+                    <p class="text-xs text-amber-600/70 dark:text-amber-400/70">v{{ latestVersion }}</p>
+                  </div>
+                </div>
+
+                <!-- Update button -->
+                <button
+                  @click="handleUpdate"
+                  :disabled="updating"
+                  class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-primary-500 hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  <svg v-if="updating" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  <svg v-else class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                   </svg>
-                </div>
+                  {{ updating ? t('version.updating') : t('version.updateNow') }}
-                <div class="flex-1 min-w-0">
+                </button>
-                  <p class="text-sm font-medium text-amber-700 dark:text-amber-300">{{ t('version.updateAvailable') }}</p>
-                  <p class="text-xs text-amber-600/70 dark:text-amber-400/70">v{{ latestVersion }}</p>
-                </div>
-                <svg class="w-4 h-4 text-amber-500 dark:text-amber-400 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
-                </svg>
-              </a>
 
-              <!-- GitHub link when up to date -->
+                <!-- View release link -->
+                <a
+                  v-if="releaseInfo?.html_url && releaseInfo.html_url !== '#'"
+                  :href="releaseInfo.html_url"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center justify-center gap-1 text-xs text-gray-500 dark:text-dark-400 hover:text-gray-700 dark:hover:text-dark-200 transition-colors"
+                >
+                  {{ t('version.viewChangelog') }}
+                  <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                  </svg>
+                </a>
+              </div>
+
+              <!-- Priority 5: Up to date - show GitHub link -->
               <a
                 v-else-if="releaseInfo?.html_url && releaseInfo.html_url !== '#'"
                 :href="releaseInfo.html_url"
@@ -154,8 +235,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAuthStore } from '@/stores';
+import { useAuthStore, useAppStore } from '@/stores';
-import { checkUpdates, type VersionInfo, type ReleaseInfo } from '@/api/admin/system';
+import { performUpdate, restartService } from '@/api/admin/system';
 
 const { t } = useI18n();
 
@@ -164,18 +245,27 @@ const props = defineProps<{
 }>();
 
 const authStore = useAuthStore();
+const appStore = useAppStore();
 
 const isAdmin = computed(() => authStore.isAdmin);
 
-const loading = ref(false);
 const dropdownOpen = ref(false);
 const dropdownRef = ref<HTMLElement | null>(null);
 
-const currentVersion = ref('0.1.0');
+// Use store's cached version state
-const latestVersion = ref('0.1.0');
+const loading = computed(() => appStore.versionLoading);
-const hasUpdate = ref(false);
+const currentVersion = computed(() => appStore.currentVersion || props.version || '');
-const releaseInfo = ref<ReleaseInfo | null>(null);
+const latestVersion = computed(() => appStore.latestVersion);
-const buildType = ref('source'); // "source" or "release"
+const hasUpdate = computed(() => appStore.hasUpdate);
+const releaseInfo = computed(() => appStore.releaseInfo);
+const buildType = computed(() => appStore.buildType);
+
+// Update process states (local to this component)
+const updating = ref(false);
+const restarting = ref(false);
+const needRestart = ref(false);
+const updateError = ref('');
+const updateSuccess = ref(false);
 
 // Only show update check for release builds (binary/docker deployment)
 const isReleaseBuild = computed(() => buildType.value === 'release');
@@ -191,22 +281,54 @@ function closeDropdown() {
 async function refreshVersion(force = true) {
   if (!isAdmin.value) return;
 
-  loading.value = true;
+  // Reset update states when refreshing
+  updateError.value = '';
+  updateSuccess.value = false;
+  needRestart.value = false;
+
+  await appStore.fetchVersion(force);
+}
+
+async function handleUpdate() {
+  if (updating.value) return;
+
+  updating.value = true;
+  updateError.value = '';
+  updateSuccess.value = false;
+
   try {
-    const data: VersionInfo = await checkUpdates(force);
+    const result = await performUpdate();
-    currentVersion.value = data.current_version;
+    updateSuccess.value = true;
-    latestVersion.value = data.latest_version;
+    needRestart.value = result.need_restart;
-    buildType.value = data.build_type || 'source';
+    // Clear version cache to reflect update completed
-    // Show update indicator for all build types
+    appStore.clearVersionCache();
-    hasUpdate.value = data.has_update;
+  } catch (error: unknown) {
-    releaseInfo.value = data.release_info || null;
+    const err = error as { response?: { data?: { message?: string } }; message?: string };
-  } catch (error) {
+    updateError.value = err.response?.data?.message || err.message || t('version.updateFailed');
-    console.error('Failed to check updates:', error);
   } finally {
-    loading.value = false;
+    updating.value = false;
   }
 }
 
+async function handleRestart() {
+  if (restarting.value) return;
+
+  restarting.value = true;
+
+  try {
+    await restartService();
+    // Service will restart, page will reload automatically or show disconnected
+  } catch (error) {
+    // Expected - connection will be lost during restart
+    console.log('Service restarting...');
+  }
+
+  // Show restarting state for a while, then reload
+  setTimeout(() => {
+    window.location.reload();
+  }, 3000);
+}
+
 function handleClickOutside(event: MouseEvent) {
   const target = event.target as Node;
   const button = (event.target as Element).closest('button');
@@ -217,9 +339,8 @@ function handleClickOutside(event: MouseEvent) {
 
 onMounted(() => {
   if (isAdmin.value) {
-    refreshVersion(false);
+    // Use cached version if available, otherwise fetch
-  } else if (props.version) {
+    appStore.fetchVersion(false);
-    currentVersion.value = props.version;
   }
   document.addEventListener('click', handleClickOutside);
 });

frontend/src/i18n/locales/en.ts

@@ -1023,9 +1023,18 @@ export default {
     noReleaseNotes: 'No release notes',
     viewUpdate: 'View Update',
     viewRelease: 'View Release',
+    viewChangelog: 'View Changelog',
     refresh: 'Refresh',
     sourceMode: 'Source Build',
-    sourceModeHint: 'Update detection is disabled for source builds. Use git pull to update.',
+    sourceModeHint: 'Source build, use git pull to update',
+    updateNow: 'Update Now',
+    updating: 'Updating...',
+    updateComplete: 'Update Complete',
+    updateFailed: 'Update Failed',
+    restartRequired: 'Please restart the service to apply the update',
+    restartNow: 'Restart Now',
+    restarting: 'Restarting...',
+    retry: 'Retry',
   },
 
   // User Subscriptions Page

frontend/src/i18n/locales/zh.ts

@@ -1202,9 +1202,18 @@ export default {
     noReleaseNotes: '暂无更新日志',
     viewUpdate: '查看更新',
     viewRelease: '查看发布',
+    viewChangelog: '查看更新日志',
     refresh: '刷新',
     sourceMode: '源码构建',
-    sourceModeHint: '源码构建模式不支持更新检测，请使用 git pull 更新代码。',
+    sourceModeHint: '源码构建请使用 git pull 更新',
+    updateNow: '立即更新',
+    updating: '正在更新...',
+    updateComplete: '更新完成',
+    updateFailed: '更新失败',
+    restartRequired: '请重启服务以应用更新',
+    restartNow: '立即重启',
+    restarting: '正在重启...',
+    retry: '重试',
   },
 
   // User Subscriptions Page

frontend/src/router/index.ts

@@ -305,9 +305,10 @@ router.beforeEach((to, _from, next) => {
 
   // If route doesn't require auth, allow access
   if (!requiresAuth) {
-    // If already authenticated and trying to access login/register, redirect to dashboard
+    // If already authenticated and trying to access login/register, redirect to appropriate dashboard
     if (authStore.isAuthenticated && (to.path === '/login' || to.path === '/register')) {
-      next('/dashboard');
+      // Admin users go to admin dashboard, regular users go to user dashboard
+      next(authStore.isAdmin ? '/admin/dashboard' : '/dashboard');
       return;
     }
     next();

frontend/src/stores/app.ts

@@ -6,14 +6,24 @@
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import type { Toast, ToastType } from '@/types';
+import { checkUpdates as checkUpdatesAPI, type VersionInfo, type ReleaseInfo } from '@/api/admin/system';
 
 export const useAppStore = defineStore('app', () => {
   // ==================== State ====================
-  
+
   const sidebarCollapsed = ref<boolean>(false);
   const loading = ref<boolean>(false);
   const toasts = ref<Toast[]>([]);
 
+  // Version cache state
+  const versionLoaded = ref<boolean>(false);
+  const versionLoading = ref<boolean>(false);
+  const currentVersion = ref<string>('');
+  const latestVersion = ref<string>('');
+  const hasUpdate = ref<boolean>(false);
+  const buildType = ref<string>('source');
+  const releaseInfo = ref<ReleaseInfo | null>(null);
+
   // Auto-incrementing ID for toasts
   let toastIdCounter = 0;
 
@@ -192,6 +202,56 @@ export const useAppStore = defineStore('app', () => {
     toasts.value = [];
   }
 
+  // ==================== Version Management ====================
+
+  /**
+   * Fetch version info (uses cache unless force=true)
+   * @param force - Force refresh from API
+   */
+  async function fetchVersion(force = false): Promise<VersionInfo | null> {
+    // Return cached data if available and not forcing refresh
+    if (versionLoaded.value && !force) {
+      return {
+        current_version: currentVersion.value,
+        latest_version: latestVersion.value,
+        has_update: hasUpdate.value,
+        build_type: buildType.value,
+        release_info: releaseInfo.value || undefined,
+        cached: true,
+      };
+    }
+
+    // Prevent duplicate requests
+    if (versionLoading.value) {
+      return null;
+    }
+
+    versionLoading.value = true;
+    try {
+      const data = await checkUpdatesAPI(force);
+      currentVersion.value = data.current_version;
+      latestVersion.value = data.latest_version;
+      hasUpdate.value = data.has_update;
+      buildType.value = data.build_type || 'source';
+      releaseInfo.value = data.release_info || null;
+      versionLoaded.value = true;
+      return data;
+    } catch (error) {
+      console.error('Failed to fetch version:', error);
+      return null;
+    } finally {
+      versionLoading.value = false;
+    }
+  }
+
+  /**
+   * Clear version cache (e.g., after update)
+   */
+  function clearVersionCache(): void {
+    versionLoaded.value = false;
+    hasUpdate.value = false;
+  }
+
   // ==================== Return Store API ====================
 
   return {
@@ -199,10 +259,19 @@ export const useAppStore = defineStore('app', () => {
     sidebarCollapsed,
     loading,
     toasts,
-    
+
+    // Version state
+    versionLoaded,
+    versionLoading,
+    currentVersion,
+    latestVersion,
+    hasUpdate,
+    buildType,
+    releaseInfo,
+
     // Computed
     hasActiveToasts,
-    
+
     // Actions
     toggleSidebar,
     setSidebarCollapsed,
@@ -217,5 +286,9 @@ export const useAppStore = defineStore('app', () => {
     withLoading,
     withLoadingAndError,
     reset,
+
+    // Version actions
+    fetchVersion,
+    clearVersionCache,
   };
 });

frontend/src/views/admin/DashboardView.vue

@@ -406,7 +406,7 @@ const lineOptions = computed(() => ({
 
 // Model chart data
 const modelChartData = computed(() => {
-  if (!modelStats.value.length) return null
+  if (!modelStats.value?.length) return null
 
   const colors = [
     '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
@@ -425,7 +425,7 @@ const modelChartData = computed(() => {
 
 // Trend chart data
 const trendChartData = computed(() => {
-  if (!trendData.value.length) return null
+  if (!trendData.value?.length) return null
 
   return {
     labels: trendData.value.map(d => d.date),
@@ -460,7 +460,7 @@ const trendChartData = computed(() => {
 
 // User trend chart data
 const userTrendChartData = computed(() => {
-  if (!userTrend.value.length) return null
+  if (!userTrend.value?.length) return null
 
   // Group by user
   const userGroups = new Map<string, { name: string; data: Map<string, number> }>()

frontend/src/views/user/DashboardView.vue

@@ -531,7 +531,7 @@ const lineOptions = computed(() => ({
 
 // Model chart data
 const modelChartData = computed(() => {
-  if (!modelStats.value.length) return null
+  if (!modelStats.value?.length) return null
 
   const colors = [
     '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
@@ -550,7 +550,7 @@ const modelChartData = computed(() => {
 
 // Trend chart data
 const trendChartData = computed(() => {
-  if (!trendData.value.length) return null
+  if (!trendData.value?.length) return null
 
   return {
     labels: trendData.value.map(d => d.date),
@@ -688,8 +688,9 @@ const loadChartData = async () => {
       usageAPI.getDashboardModels({ start_date: startDate.value, end_date: endDate.value }),
     ])
 
-    trendData.value = trendResponse.trend
+    // Ensure we always have arrays, even if API returns null
-    modelStats.value = modelResponse.models
+    trendData.value = trendResponse.trend || []
+    modelStats.value = modelResponse.models || []
   } catch (error) {
     console.error('Error loading chart data:', error)
   }