feat(models): 对齐 vivid 新改动——模型删除改软删,重导不丢计数/定价

- model_configs 加 deleted_at(gorm 软删),List/Get 自动过滤,
  GetAny/Unscoped 用于复活与孤儿清理路径
- 渠道同步/删渠道/管理端删除模型的孤儿清理全部走软删
- 导入时若命中软删行:UpdateAny + deleted_at=NULL 复活,
  generation_count 与原定价保留(vivid a42f32c 同语义)
- provider 时代残留仍物理删除(DeleteHard),不留软删垃圾
- OrphanModelIDs 跳过已软删行,避免重复清扫
- btn-primary 禁用态改浅灰填充(vivid d636105)

核对过已等价的:vivid 僵尸任务兜底(我们的 ResumeStaleJob+
PurgeStale+MarkRefunded 同语义)、产物 MIME 魔数嗅探、
retention 按创建时间、渠道同步弹窗(开关+别名)均已覆盖。

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

README.en.md

@@ -20,10 +20,43 @@
 
 [Live Demo](https://vividai.run) · [Features](#-features) · [Deploy](#-deployment) · [API](#-vivid-protocol-api)
 
+<br/>
+
+<img src="docs/screenshots/home.png" alt="image2api — landing" width="860" />
+
 </div>
 
 ---
 
+## 🖼️ Screenshots
+
+<div align="center">
+<sub>✨ Vivid-style light UI · channel routing · data-driven ops dashboard</sub>
+</div>
+
+<table>
+  <tr>
+    <td width="33%"><img src="docs/screenshots/playground.png" alt="Studio" /></td>
+    <td width="33%"><img src="docs/screenshots/dashboard.png" alt="Dashboard" /></td>
+    <td width="33%"><img src="docs/screenshots/models.png" alt="Models" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>🎨 Studio</b><br/><sub>image + video · reference uploads · live pricing</sub></td>
+    <td align="center"><b>📊 Dashboard</b><br/><sub>users / volume / channel health / 24h trend</sub></td>
+    <td align="center"><b>🧩 Models</b><br/><sub>channel bindings + weights · standard + reseller pricing</sub></td>
+  </tr>
+  <tr>
+    <td width="33%"><img src="docs/screenshots/channels.png" alt="Channels" /></td>
+    <td width="33%"><img src="docs/screenshots/users.png" alt="Users" /></td>
+    <td width="33%"><img src="docs/screenshots/logs.png" alt="Logs" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>🔌 Channels</b><br/><sub>save-to-sync upstream models · live balance · failover</sub></td>
+    <td align="center"><b>👥 Users</b><br/><sub>roles / concurrency groups / credits · batch ops</sub></td>
+    <td align="center"><b>📜 Logs</b><br/><sub>success / failed / running · prompts and latency kept</sub></td>
+  </tr>
+</table>
+
 ## ✨ Introduction
 
 **image2api** is a homogeneous gateway. Upstream, it connects any number of **vivid-protocol (vividai) instances** as "channels" and routes jobs across them. Downstream, it exposes the same **vivid-protocol API** to callers: `POST /v1/generate` (NDJSON stream) · `POST /v1/uploads` (presigned upload) · `GET /v1/models` · `GET /v1/balance`. No built-in provider code, no account pools — an upstream is just another vividai instance, so gateways can be layered arbitrarily.

README.md

@@ -22,7 +22,7 @@
 
 <br/>
 
-<img src="docs/screenshots/playground.png" alt="image2api — 画图台" width="860" />
+<img src="docs/screenshots/home.png" alt="image2api — 首页" width="860" />
 
 </div>
 
@@ -54,18 +54,28 @@
 ## 🖼️ 界面预览
 
 <div align="center">
-<sub>🎨 现代化画图前端 · 深 / 浅双主题管理后台 · 数据驱动的运营看板</sub>
+<sub>✨ Vivid 风格浅色界面 · 渠道化调度 · 数据驱动的运营看板</sub>
 </div>
 
 <table>
   <tr>
+    <td width="33%"><img src="docs/screenshots/playground.png" alt="画图台" /></td>
     <td width="33%"><img src="docs/screenshots/dashboard.png" alt="概览看板" /></td>
     <td width="33%"><img src="docs/screenshots/models.png" alt="模型管理" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>🎨 画图台</b><br/><sub>生图 / 生视频一站式 · 参考图上传 · 实时计价</sub></td>
+    <td align="center"><b>📊 概览看板</b><br/><sub>用户 / 生成量 / 渠道健康 / 24h 趋势</sub></td>
+    <td align="center"><b>🧩 模型管理</b><br/><sub>渠道绑定与权重 · 普通价 + 代理价 · 配价即上架</sub></td>
+  </tr>
+  <tr>
+    <td width="33%"><img src="docs/screenshots/channels.png" alt="渠道管理" /></td>
+    <td width="33%"><img src="docs/screenshots/users.png" alt="用户管理" /></td>
     <td width="33%"><img src="docs/screenshots/logs.png" alt="调用日志" /></td>
   </tr>
   <tr>
-    <td align="center"><b>📊 概览看板</b><br/><sub>用户 / 生成量 / 渠道健康 / 24h 趋势</sub></td>
+    <td align="center"><b>🔌 渠道管理</b><br/><sub>保存即全量同步上游模型 · 余额实时探测 · 故障转移</sub></td>
-    <td align="center"><b>🧩 模型管理</b><br/><sub>按模型独立配置能力、定价与权重,配价即上架</sub></td>
+    <td align="center"><b>👥 用户管理</b><br/><sub>角色 / 并发组 / 积分 · 批量选中操作</sub></td>
     <td align="center"><b>📜 调用日志</b><br/><sub>成功 / 失败 / 进行中 · 提示词与耗时全留痕</sub></td>
   </tr>
 </table>
@@ -104,7 +114,7 @@
 #### 🖥️ 用户前台(Vue 3)
 - 画图台 · 创作记录画廊 · 生成日志(含失败原因 / 来源标签)
 - 作品画廊**多选批量操作**:全选本页 / 批量删除 / 批量下载(自动打包 zip)
-- **充值 · 订单** · API 文档 · API Key 管理 · 邀请 · 亮 / 暗主题
+- **充值 · 订单** · API 文档 · API Key 管理 · 邀请 · 无限画布
 - **站内公告**:登录后自动弹出 Markdown 公告
 
 #### 🛠️ 管理后台

backend/internal/http/handler/admin_read.go

@@ -7,6 +7,7 @@ import (
 	"time"
 
 	"backend/internal/model"
+	"backend/internal/repo"
 	"backend/internal/service"
 	"github.com/gin-gonic/gin"
 )
@@ -99,7 +100,21 @@ func (h *AdminReadHandler) Logs(c *gin.Context) {
 		userIDs = ids
 	}
 
-	items, total, stats, err := h.admin.Logs(c.Request.Context(), limit, offset, kind, status, nil, since, "", userIDs, strings.TrimSpace(c.Query("q")), "", c.Query("source"), false, false, false)
+	// ?kw= — 单搜索框：命中 提示词/模型/错误，或命中 用户(名称/邮箱/ID) 的记录都保留。
+	var items []model.EventLog
+	var total int64
+	var stats *repo.EventStats
+	var err error
+	if kw := strings.TrimSpace(c.Query("kw")); kw != "" {
+		kwIDs, uerr := h.admin.MatchUserIDs(c.Request.Context(), kw)
+		if uerr != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"detail": "failed to load logs"})
+			return
+		}
+		items, total, stats, err = h.admin.LogsKeyword(c.Request.Context(), limit, offset, kind, status, since, kw, kwIDs, c.Query("source"))
+	} else {
+		items, total, stats, err = h.admin.Logs(c.Request.Context(), limit, offset, kind, status, nil, since, "", userIDs, strings.TrimSpace(c.Query("q")), "", c.Query("source"), false, false, false)
+	}
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"detail": "failed to load logs"})
 		return

backend/internal/model/models.go

@@ -5,6 +5,7 @@ import (
 	"time"
 
 	"gorm.io/datatypes"
+	"gorm.io/gorm"
 )
 
 type User struct {
@@ -160,8 +161,12 @@ type ModelConfig struct {
 	// successful generation. Independent of the event_log (which is subject to
 	// retention / manual clearing), so the admin "次数" is a true running total.
 	GenerationCount int64 `gorm:"not null;default:0"`
-	CreatedAt       time.Time
+	// DeletedAt soft-deletes the row (vivid parity): hidden from every normal
-	UpdatedAt       time.Time
+	// path, but the row + its counters survive so a re-import revives it
+	// without losing generation_count or pricing.
+	DeletedAt gorm.DeletedAt `gorm:"index"`
+	CreatedAt time.Time
+	UpdatedAt time.Time
 }
 
 func (m ModelConfig) EffectiveName() string {

backend/internal/repo/channel_repo.go

@@ -183,6 +183,26 @@ func (r *ChannelRepository) RoutableModelIDs(ctx context.Context) (map[string]st
 	return out, err
 }
 
+// ChannelNamesByModel returns model_id -> bound channel display names in one
+// JOIN query — used by the admin models table to annotate each row with the
+// channel(s) it was synced from.
+func (r *ChannelRepository) ChannelNamesByModel(ctx context.Context) (map[string][]string, error) {
+	var rows []struct {
+		ModelID string `gorm:"column:model_id"`
+		Name    string `gorm:"column:name"`
+	}
+	err := r.db.WithContext(ctx).
+		Table("channel_models").
+		Select("channel_models.model_id, channels.name").
+		Joins("JOIN channels ON channels.id = channel_models.channel_id").
+		Scan(&rows).Error
+	out := make(map[string][]string, len(rows))
+	for _, row := range rows {
+		out[row.ModelID] = append(out[row.ModelID], row.Name)
+	}
+	return out, err
+}
+
 // ChannelIDsByModel lists channel ids bound to a model (any enabled state).
 func (r *ChannelRepository) ChannelIDsByModel(ctx context.Context, modelID string) ([]string, error) {
 	var ids []string
@@ -192,13 +212,14 @@ func (r *ChannelRepository) ChannelIDsByModel(ctx context.Context, modelID strin
 }
 
 // OrphanModelIDs returns local model ids that no channel binds anymore.
+// Soft-deleted rows are skipped — they're already gone from every live path.
 func (r *ChannelRepository) OrphanModelIDs(ctx context.Context) ([]string, error) {
 	var ids []string
 	err := r.db.WithContext(ctx).
 		Table("model_configs").
 		Select("model_configs.id").
 		Joins("LEFT JOIN channel_models ON channel_models.model_id = model_configs.id").
-		Where("channel_models.model_id IS NULL").
+		Where("channel_models.model_id IS NULL AND model_configs.deleted_at IS NULL").
 		Scan(&ids).Error
 	return ids, err
 }

backend/internal/repo/event_repo.go

@@ -15,20 +15,21 @@ type EventRepository struct {
 }
 
 type EventListFilter struct {
-	Limit         int
+	Limit          int
-	Offset        int
+	Offset         int
-	Kind          string
+	Kind           string
-	Status        string   // single status (status = ?)
+	Status         string   // single status (status = ?)
-	Statuses      []string // multiple statuses (status IN (?)) — used by the 画图台 grid
+	Statuses       []string // multiple statuses (status IN (?)) — used by the 画图台 grid
-	Since         *time.Time
+	Since          *time.Time
-	UserID        string
+	UserID         string
-	UserIDs       []string // when set, keep ONLY rows whose user_id is in this list (admin 用户搜索)
+	UserIDs        []string // when set, keep ONLY rows whose user_id is in this list (admin 用户搜索)
-	Query         string   // free-text search over prompt / model / error (server-side, 跨页)
+	Query          string   // free-text search over prompt / model / error (server-side, 跨页)
-	ExcludeSource string   // when set, omit rows with this source (e.g. hide API-key "v1" usage from the customer logs page)
+	KeywordUserIDs []string // with Query set: also match rows whose user_id is in this list (单搜索框: 用户 OR 内容)
-	Source        string   // when set, keep ONLY rows with this source (admin 来源 filter): "v1" (API key) / "user" (前台) / "admin" (测试模型)
+	ExcludeSource  string   // when set, omit rows with this source (e.g. hide API-key "v1" usage from the customer logs page)
-	HasFile       bool     // when true, keep ONLY rows with a non-empty file (the 创作记录 gallery — paginates over real media)
+	Source         string   // when set, keep ONLY rows with this source (admin 来源 filter): "v1" (API key) / "user" (前台) / "admin" (测试模型)
-	ExcludeFiles  []string // when set, omit rows whose file is in this list (e.g. hide homepage showcase media from user galleries)
+	HasFile        bool     // when true, keep ONLY rows with a non-empty file (the 创作记录 gallery — paginates over real media)
-	MediaOnly     bool     // when true, keep only rows that are pending or have a stored file — the 画图台 grid, so deleted works don't eat a slot
+	ExcludeFiles   []string // when set, omit rows whose file is in this list (e.g. hide homepage showcase media from user galleries)
+	MediaOnly      bool     // when true, keep only rows that are pending or have a stored file — the 画图台 grid, so deleted works don't eat a slot
 }
 
 type EventStats struct {
@@ -66,7 +67,11 @@ func (r *EventRepository) List(ctx context.Context, filter EventListFilter) ([]m
 	}
 	if term := strings.TrimSpace(filter.Query); term != "" {
 		like := "%" + term + "%"
-		q = q.Where("(prompt ILIKE ? OR model ILIKE ? OR error ILIKE ?)", like, like, like)
+		if len(filter.KeywordUserIDs) > 0 {
+			q = q.Where("(prompt ILIKE ? OR model ILIKE ? OR error ILIKE ? OR user_id IN ?)", like, like, like, filter.KeywordUserIDs)
+		} else {
+			q = q.Where("(prompt ILIKE ? OR model ILIKE ? OR error ILIKE ?)", like, like, like)
+		}
 	}
 	if filter.ExcludeSource != "" {
 		q = q.Where("(source IS NULL OR source <> ?)", filter.ExcludeSource)

backend/internal/repo/model_repo.go

@@ -44,6 +44,16 @@ func (r *ModelRepository) Get(ctx context.Context, modelID string) (*model.Model
 	return &item, nil
 }
 
+// GetAny includes soft-deleted rows — the import/revive path and orphan
+// cleanup need to see rows normal queries hide.
+func (r *ModelRepository) GetAny(ctx context.Context, modelID string) (*model.ModelConfig, error) {
+	var item model.ModelConfig
+	if err := r.db.WithContext(ctx).Unscoped().First(&item, "(alias <> '' AND alias = ?) OR (alias = '' AND id = ?)", modelID, modelID).Error; err != nil {
+		return nil, err
+	}
+	return &item, nil
+}
+
 func (r *ModelRepository) NameMap(ctx context.Context) (map[string]string, error) {
 	items, err := r.List(ctx)
 	if err != nil {
@@ -72,18 +82,40 @@ func (r *ModelRepository) Create(ctx context.Context, item *model.ModelConfig) e
 }
 
 func (r *ModelRepository) Update(ctx context.Context, modelID string, patch map[string]any) (*model.ModelConfig, error) {
+	return r.update(ctx, modelID, patch, false)
+}
+
+// UpdateAny can reach soft-deleted rows (revive path: patch deleted_at=NULL).
+func (r *ModelRepository) UpdateAny(ctx context.Context, modelID string, patch map[string]any) (*model.ModelConfig, error) {
+	return r.update(ctx, modelID, patch, true)
+}
+
+func (r *ModelRepository) update(ctx context.Context, modelID string, patch map[string]any, anyState bool) (*model.ModelConfig, error) {
 	patch["updated_at"] = time.Now()
-	if err := r.db.WithContext(ctx).Model(&model.ModelConfig{}).Where("id = ?", modelID).Updates(patch).Error; err != nil {
+	q := r.db.WithContext(ctx)
+	if anyState {
+		q = q.Unscoped()
+	}
+	if err := q.Model(&model.ModelConfig{}).Where("id = ?", modelID).Updates(patch).Error; err != nil {
 		return nil, err
 	}
 	var item model.ModelConfig
-	if err := r.db.WithContext(ctx).First(&item, "id = ?", modelID).Error; err != nil {
+	if err := q.First(&item, "id = ?", modelID).Error; err != nil {
 		return nil, err
 	}
 	return &item, nil
 }
 
+// Delete soft-deletes the model (gorm.DeletedAt): the row keeps its counters
+// and pricing so re-importing it later revives the same record.
 func (r *ModelRepository) Delete(ctx context.Context, modelID string) (int64, error) {
 	res := r.db.WithContext(ctx).Delete(&model.ModelConfig{}, "id = ?", modelID)
 	return res.RowsAffected, res.Error
 }
+
+// DeleteHard physically removes the row — only for legacy/provider-era rows
+// that must not linger as soft-deleted junk.
+func (r *ModelRepository) DeleteHard(ctx context.Context, modelID string) (int64, error) {
+	res := r.db.WithContext(ctx).Unscoped().Delete(&model.ModelConfig{}, "id = ?", modelID)
+	return res.RowsAffected, res.Error
+}

backend/internal/service/admin_read.go

@@ -85,15 +85,17 @@ func (s *AdminReadService) ModelsView(ctx context.Context) ([]map[string]any, er
 		return nil, err
 	}
 	routable, _ := s.channels.RoutableModelIDs(ctx)
+	channelNames, _ := s.channels.ChannelNamesByModel(ctx)
 	out := make([]map[string]any, 0, len(items))
 	for _, item := range items {
 		_, bound := routable[item.ID]
 		out = append(out, map[string]any{
-			"id":                    item.ID,
+			"id":       item.ID,
-			"alias":                 item.Alias,
+			"alias":    item.Alias,
-			"type":                  item.Type,
+			"type":     item.Type,
-			"name":                  item.Name,
+			"name":     item.Name,
-			"provider":              item.Provider,
+			"provider": item.Provider,
+			"channels": channelNames[item.ID],
 			// 配价即上架（无启停开关）：全档位有价 + 绑定了启用渠道才算可售。
 			"sellable":              bound && ModelFullyPriced(&item),
 			"ratios":                repo.JSONStrings(item.Ratios),
@@ -122,25 +124,35 @@ func (s *AdminReadService) ModelsView(ctx context.Context) ([]map[string]any, er
 }
 
 func (s *AdminReadService) Logs(ctx context.Context, limit, offset int, kind, status string, statuses []string, since *time.Time, userID string, userIDs []string, query, excludeSource, source string, hasFile, excludeShowcase, mediaOnly bool) ([]model.EventLog, int64, *repo.EventStats, error) {
+	return s.logs(ctx, limit, offset, kind, status, statuses, since, userID, userIDs, nil, query, excludeSource, source, hasFile, excludeShowcase, mediaOnly)
+}
+
+// LogsKeyword 单搜索框：keyword 命中 提示词/模型/错误，或 user_id 在 kwUserIDs 内（名称/邮箱/ID 命中）即保留。
+func (s *AdminReadService) LogsKeyword(ctx context.Context, limit, offset int, kind, status string, since *time.Time, keyword string, kwUserIDs []string, source string) ([]model.EventLog, int64, *repo.EventStats, error) {
+	return s.logs(ctx, limit, offset, kind, status, nil, since, "", nil, kwUserIDs, keyword, "", source, false, false, false)
+}
+
+func (s *AdminReadService) logs(ctx context.Context, limit, offset int, kind, status string, statuses []string, since *time.Time, userID string, userIDs, kwUserIDs []string, query, excludeSource, source string, hasFile, excludeShowcase, mediaOnly bool) ([]model.EventLog, int64, *repo.EventStats, error) {
 	var excludeFiles []string
 	if excludeShowcase {
 		excludeFiles = s.showcaseFileList(ctx)
 	}
 	items, total, err := s.events.List(ctx, repo.EventListFilter{
-		Limit:         limit,
+		Limit:          limit,
-		Offset:        offset,
+		Offset:         offset,
-		Kind:          kind,
+		Kind:           kind,
-		Status:        status,
+		Status:         status,
-		Statuses:      statuses,
+		Statuses:       statuses,
-		Since:         since,
+		Since:          since,
-		UserID:        userID,
+		UserID:         userID,
-		UserIDs:       userIDs,
+		UserIDs:        userIDs,
-		Query:         query,
+		Query:          query,
-		ExcludeSource: excludeSource,
+		KeywordUserIDs: kwUserIDs,
-		Source:        source,
+		ExcludeSource:  excludeSource,
-		HasFile:       hasFile,
+		Source:         source,
-		ExcludeFiles:  excludeFiles,
+		HasFile:        hasFile,
-		MediaOnly:     mediaOnly,
+		ExcludeFiles:   excludeFiles,
+		MediaOnly:      mediaOnly,
 	})
 	if err != nil {
 		return nil, 0, nil, err

backend/internal/service/channel.go

@@ -299,6 +299,13 @@ func normalizeRemoteModel(m upstream.RemoteModel) (ChannelModelSpec, error) {
 	default:
 		return spec, fmt.Errorf("未知类型 %q", spec.Kind)
 	}
+	if spec.Duration != nil {
+		switch spec.Duration.Mode {
+		case "options", "range":
+		default:
+			return spec, errors.New("时长模式仅支持 options / range")
+		}
+	}
 	return spec, nil
 }
 
@@ -374,11 +381,12 @@ func (s *ChannelService) PurgeOrphanModels(ctx context.Context) (int, error) {
 	}
 	n := 0
 	for _, id := range ids {
-		m, gerr := s.models.Get(ctx, id)
+		m, gerr := s.models.GetAny(ctx, id)
 		if gerr != nil || m == nil || m.Provider == "channel" {
 			continue
 		}
-		if _, derr := s.models.Delete(ctx, id); derr == nil {
+		// provider 时代残留行没有复活路径，直接物理删除，不留软删垃圾。
+		if _, derr := s.models.DeleteHard(ctx, id); derr == nil {
 			n++
 		}
 	}
@@ -432,6 +440,9 @@ func (s *ChannelService) ImportModels(ctx context.Context, channelID string, spe
 		if upID == "" {
 			continue
 		}
+		if spec.Duration != nil && spec.Duration.Mode != "options" && spec.Duration.Mode != "range" {
+			return fmt.Errorf("模型 %s：时长模式仅支持 options / range", upID)
+		}
 		alias := strings.TrimSpace(spec.Alias)
 		if alias == upID {
 			return fmt.Errorf("「%s」别名不能与上游模型同名，留空即可", upID)
@@ -444,7 +455,8 @@ func (s *ChannelService) ImportModels(ctx context.Context, channelID string, spe
 			return fmt.Errorf("别名 %s 被多个上游模型复用", localID)
 		}
 		seenAliases[localID] = upID
-		existing, gerr := s.models.Get(ctx, localID)
+		// GetAny: 软删行也纳入——重导同一模型时复活原行，计数/定价不丢。
+		existing, gerr := s.models.GetAny(ctx, localID)
 		if gerr != nil && !errors.Is(gerr, gorm.ErrRecordNotFound) {
 			existing = nil
 		}
@@ -471,7 +483,10 @@ func (s *ChannelService) ImportModels(ctx context.Context, channelID string, spe
 				return fmt.Errorf("model %s: %w", localID, err)
 			}
 		} else {
-			if _, err := s.models.Update(ctx, localID, patch); err != nil {
+			if local.DeletedAt.Valid {
+				patch["deleted_at"] = nil // revive
+			}
+			if _, err := s.models.UpdateAny(ctx, localID, patch); err != nil {
 				return fmt.Errorf("model %s: %w", localID, err)
 			}
 		}
@@ -501,9 +516,6 @@ func modelPatchFromSpec(spec ChannelModelSpec, existing *model.ModelConfig) map[
 	}
 	if d := spec.Duration; d != nil {
 		switch d.Mode {
-		case "fixed":
-			patch["durations"] = jsonArray([]string{fmt.Sprintf("%ds", d.Seconds)})
-			patch["duration_min"], patch["duration_max"] = int64(0), int64(0)
 		case "options":
 			opts := make([]string, 0, len(d.Options))
 			for _, s := range d.Options {

backend/internal/service/v1.go

@@ -342,8 +342,9 @@ type V1ModelItem struct {
 	RefAudioSeconds int64       `json:"refAudioSeconds,omitempty"`
 }
 
-// V1ModelDur exposes a video model's duration capability: fixed=locked seconds,
+// V1ModelDur exposes a video model's duration capability: options=discrete
-// options=discrete list, range=continuous interval.
+// list (single-choice models too — "fixed" is never emitted), range=continuous
+// interval.
 type V1ModelDur struct {
 	Mode    string  `json:"mode"`
 	Seconds int64   `json:"seconds,omitempty"`
@@ -433,20 +434,19 @@ func modelDurationSpec(item *model.ModelConfig) *V1ModelDur {
 		return &V1ModelDur{Mode: "range", Min: int64(item.DurationMin), Max: int64(item.DurationMax)}
 	}
 	opts := repo.JSONStrings(item.Durations)
-	switch len(opts) {
+	if len(opts) == 0 {
-	case 0:
 		return nil
-	case 1:
-		return &V1ModelDur{Mode: "fixed", Seconds: int64(parseDurationSeconds(opts[0]))}
-	default:
-		vals := make([]int64, 0, len(opts))
-		for _, d := range opts {
-			if n := parseDurationSeconds(d); n > 0 {
-				vals = append(vals, int64(n))
-			}
-		}
-		return &V1ModelDur{Mode: "options", Options: vals}
 	}
+	vals := make([]int64, 0, len(opts))
+	for _, d := range opts {
+		if n := parseDurationSeconds(d); n > 0 {
+			vals = append(vals, int64(n))
+		}
+	}
+	if len(vals) == 0 {
+		return nil
+	}
+	return &V1ModelDur{Mode: "options", Options: vals}
 }
 
 // UserBalance — GET /v1/balance. Re-reads the user row so the number is live.

backend/internal/upstream/client.go

@@ -102,7 +102,7 @@ type RemoteModel struct {
 
 // RemoteDuration mirrors the duration spec of a vivid model item.
 type RemoteDuration struct {
-	Mode    string  `json:"mode"` // fixed | options | range
+	Mode    string  `json:"mode"` // options | range
 	Seconds int64   `json:"seconds,omitempty"`
 	Min     int64   `json:"min,omitempty"`
 	Max     int64   `json:"max,omitempty"`

frontend/public/favicon.svg

@@ -1,17 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" fill="none">
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="ring" x1="6" y1="6" x2="42" y2="42" gradientUnits="userSpaceOnUse">
+    <linearGradient id="bg" x1="8" y1="4" x2="40" y2="44" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#e879f9"/><stop offset=".5" stop-color="#8b5cf6"/><stop offset="1" stop-color="#38bdf8"/>
+      <stop stop-color="#3f3f46"/>
+      <stop offset="1" stop-color="#18181b"/>
     </linearGradient>
-    <linearGradient id="v" x1="14" y1="14" x2="34" y2="34" gradientUnits="userSpaceOnUse">
+    <linearGradient id="shine" x1="24" y1="3" x2="24" y2="24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#f0abfc"/><stop offset="1" stop-color="#8b5cf6"/>
+      <stop stop-color="#fff" stop-opacity="0.14"/>
+      <stop offset="0.9" stop-color="#fff" stop-opacity="0"/>
     </linearGradient>
   </defs>
-  <g transform="translate(24 24)">
+  <rect x="2" y="2" width="44" height="44" rx="15" fill="url(#bg)"/>
-    <circle r="18.5" fill="none" stroke="url(#ring)" stroke-width="3.6" stroke-linecap="round"
+  <rect x="2" y="2" width="44" height="22" rx="15" fill="url(#shine)"/>
-            stroke-dasharray="86 30" transform="rotate(-58)"/>
+  <path d="M22 11 Q23.4 22.6 35 24 Q23.4 25.4 22 37 Q20.6 25.4 9 24 Q20.6 22.6 22 11 Z" fill="#fff" stroke="#fff" stroke-width="2.2" stroke-linejoin="round"/>
-    <path d="M-8 -7.5 L0 9 L8 -7.5" fill="none" stroke="url(#v)" stroke-width="5.2"
+  <path d="M35.5 9 Q36.2 13.8 41 14.5 Q36.2 15.2 35.5 20 Q34.8 15.2 30 14.5 Q34.8 13.8 35.5 9 Z" fill="#fff" stroke="#fff" stroke-width="1.4" stroke-linejoin="round" opacity="0.92"/>
-          stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="36" cy="36" r="2.6" fill="#fb923c"/>
-    <circle cx="13" cy="-13" r="3.6" fill="#38bdf8"/>
-  </g>
 </svg>

frontend/src/components/Logo.vue

@@ -1,8 +1,7 @@
 <script setup>
-// Vivid mark: an open spectrum ring (lens/aperture) around a play triangle,
+// Default mark: an ink squircle holding a soft white sparkle (the "idea"),
-// with a shutter dot closing the gap — image + video in one glyph.
+// a small companion star and a warm dot — cute, and on-theme with the
-// Transparent background so it reads on both the dark and light shells.
+// ink-black / warm-paper palette used across the site.
-// Colors follow the aurora palette (violet / pink / cyan).
 // Each instance gets unique gradient ids (useId) so multiple logos on one
 // page don't share/clobber defs.
 import { useId } from 'vue'
@@ -10,29 +9,35 @@ import { useId } from 'vue'
 defineProps({ size: { type: [Number, String], default: 40 } })
 
 const uid = useId()
-const gRing = `vring-${uid}`
+const gBg = `vbg-${uid}`
+const gShine = `vshine-${uid}`
 </script>
 
 <template>
   <svg :width="size" :height="size" viewBox="0 0 48 48" fill="none"
        xmlns="http://www.w3.org/2000/svg" class="shrink-0">
     <defs>
-      <linearGradient :id="gRing" x1="6" y1="6" x2="42" y2="42" gradientUnits="userSpaceOnUse">
+      <linearGradient :id="gBg" x1="8" y1="4" x2="40" y2="44" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#7c5cfc" />
+        <stop stop-color="#3f3f46" />
-        <stop offset="0.5" stop-color="#e879f9" />
+        <stop offset="1" stop-color="#18181b" />
-        <stop offset="1" stop-color="#22d3ee" />
+      </linearGradient>
+      <linearGradient :id="gShine" x1="24" y1="3" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#fff" stop-opacity="0.14" />
+        <stop offset="0.9" stop-color="#fff" stop-opacity="0" />
       </linearGradient>
     </defs>
 
-    <g transform="translate(24 24)">
+    <!-- squircle tile -->
-      <!-- open ring: dash gap leaves room for the shutter dot -->
+    <rect x="2" y="2" width="44" height="44" rx="15" :fill="`url(#${gBg})`" />
-      <circle r="17.5" fill="none" :stroke="`url(#${gRing})`" stroke-width="4.4"
+    <rect x="2" y="2" width="44" height="22" rx="15" :fill="`url(#${gShine})`" />
-              stroke-linecap="round" stroke-dasharray="84 32" transform="rotate(-58)" />
+
-      <!-- play triangle = image + video -->
+    <!-- big sparkle -->
-      <path d="M-3 -6.5 L8.5 0 L-3 6.5 Z" fill="#7c5cfc" stroke="#111" stroke-width="1.4"
+    <path d="M22 11 Q23.4 22.6 35 24 Q23.4 25.4 22 37 Q20.6 25.4 9 24 Q20.6 22.6 22 11 Z"
-            stroke-linejoin="round" />
+          fill="#fff" stroke="#fff" stroke-width="2.2" stroke-linejoin="round" />
-      <!-- shutter dot -->
+    <!-- small companion star -->
-      <circle cx="13" cy="-13" r="4.2" fill="#22d3ee" stroke="#111" stroke-width="1.6" />
+    <path d="M35.5 9 Q36.2 13.8 41 14.5 Q36.2 15.2 35.5 20 Q34.8 15.2 30 14.5 Q34.8 13.8 35.5 9 Z"
-    </g>
+          fill="#fff" stroke="#fff" stroke-width="1.4" stroke-linejoin="round" opacity="0.92" />
+    <!-- warm dot -->
+    <circle cx="36" cy="36" r="2.6" fill="#fb923c" />
   </svg>
 </template>

frontend/src/components/ModelFormModal.vue

@@ -225,7 +225,7 @@ async function save() {
             <SelectMenu v-if="!isEdit" v-model="selectedId" :options="addOptions"
                         placeholder="选择一个支持的模型" />
             <div v-else class="field font-mono !cursor-default opacity-90">{{ entry?.id }}</div>
-            <p v-if="!isEdit && !addOptions.length" class="text-[11px] text-amber-300/80 mt-1.5">
+            <p v-if="!isEdit && !addOptions.length" class="text-[11px] text-amber-600 mt-1.5">
               模型经「渠道管理 → 拉取上游模型」导入。
             </p>
           </div>
@@ -240,8 +240,8 @@ async function save() {
           <div v-if="entry" class="rounded-xl bg-white/[0.03] ring-1 ring-white/[0.06] p-3.5 space-y-2.5">
             <div class="flex items-center gap-2">
               <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1"
-                    :class="isVideo ? 'bg-rose-500/10 text-rose-300 ring-rose-400/30'
+                    :class="isVideo ? 'bg-rose-500/10 text-rose-600 ring-rose-500/25'
-                                    : 'bg-sky-500/10 text-sky-300 ring-sky-400/30'">
+                                    : 'bg-sky-500/10 text-sky-600 ring-sky-500/25'">
                 {{ isVideo ? '生视频' : '生图' }}
               </span>
               <span class="text-[11px] text-white/45 capitalize">{{ entry.provider }}</span>
@@ -306,7 +306,7 @@ async function save() {
                     </div>
                     <div class="relative flex-1">
                       <input v-model="imagePricesAgent[r]" type="number" min="0" step="1" class="field !pr-10" placeholder="跟随普通" />
-                      <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-amber-300/40 text-[10px]">代理</span>
+                      <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-amber-600 text-[10px]">代理</span>
                     </div>
                   </div>
                   <p v-if="!resolutions.length" class="text-xs text-white/35">该模型未声明分辨率档位</p>
@@ -329,7 +329,7 @@ async function save() {
                     </div>
                     <div class="relative flex-1">
                       <input v-model="videoPricesAgent[d]" type="number" min="0" step="1" class="field !pr-10" placeholder="跟随普通" />
-                      <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-amber-300/40 text-[10px]">代理</span>
+                      <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-amber-600 text-[10px]">代理</span>
                     </div>
                   </div>
                 </div>
@@ -347,7 +347,7 @@ async function save() {
             </div>
           </template>
 
-          <p v-if="error" class="text-xs text-rose-300">{{ error }}</p>
+          <p v-if="error" class="text-xs text-rose-600">{{ error }}</p>
 
           <div class="flex justify-end gap-2 pt-1">
             <button @click="emit('close')" class="btn-soft">取消</button>

frontend/src/components/SelectMenu.vue

@@ -14,6 +14,7 @@ const props = defineProps({
   mono: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
   up: { type: Boolean, default: false }, // 面板向上展开(底部居中的输入框用)
+  compact: { type: Boolean, default: false }, // 工具栏用的紧凑尺寸
 })
 const emit = defineEmits(['update:modelValue'])
 
@@ -74,8 +75,8 @@ onUnmounted(() => document.removeEventListener('mousedown', onDocClick))
     <button type="button" @click="toggle" @keydown="onKeydown"
             :aria-expanded="open"
             :disabled="disabled"
-            class="field flex items-center justify-between gap-2 text-left h-10 !py-0 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="field flex items-center justify-between gap-2 text-left !py-0 disabled:opacity-50 disabled:cursor-not-allowed"
-            :class="[mono ? 'font-mono' : '', selected ? '' : 'text-[color:var(--fg-faint)]']">
+            :class="[compact ? 'h-9 !text-[13px] font-semibold min-w-[7.5rem]' : 'h-10', mono ? 'font-mono' : '', selected ? '' : 'text-[color:var(--fg-faint)]']">
       <span class="truncate">{{ label }}</span>
       <Icon name="chevron"
             class="w-4 h-4 shrink-0 text-[color:var(--fg-3)] transition-transform duration-200"
@@ -91,18 +92,18 @@ onUnmounted(() => document.removeEventListener('mousedown', onDocClick))
       leave-from-class="opacity-100 translate-y-0"
       leave-to-class="opacity-0 -translate-y-1">
       <div v-if="open" ref="panel"
-           class="absolute z-30 w-full max-h-64 overflow-auto rounded-xl border border-[color:var(--glass-border)]
+           class="absolute z-30 w-full min-w-[9rem] max-h-64 overflow-auto rounded-xl border border-[rgb(24_24_27/0.08)]
-                  bg-[var(--menu-bg)] backdrop-blur-xl p-1.5 shadow-[var(--glass-shadow-lg)]"
+                  bg-white p-1.5 shadow-[0_2px_6px_rgb(24_24_27/0.05),0_20px_40px_-12px_rgb(24_24_27/0.22)]"
            :class="up ? 'bottom-full mb-2' : 'mt-2'">
         <button v-for="(o, i) in options" :key="o.value" type="button"
                 :data-idx="i" @click="pick(o)" @mouseenter="active = i"
                 class="w-full flex items-center justify-between gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors"
                 :class="[
                   mono ? 'font-mono' : '',
-                  i === active ? 'bg-[var(--m-yellow)] text-[#111]' : 'text-[color:var(--fg-2)]',
+                  i === active ? 'bg-[#f4f4f5] text-[#18181b]' : 'text-[color:var(--fg-2)]',
                 ]">
           <span class="truncate">{{ o.label }}</span>
-          <Icon v-if="o.value === modelValue" name="check" class="w-4 h-4 shrink-0 text-[var(--m-orange)]" />
+          <Icon v-if="o.value === modelValue" name="check" class="w-4 h-4 shrink-0 text-[#18181b]" />
         </button>
         <div v-if="!options.length" class="px-3 py-2 text-xs text-[color:var(--fg-3)]">无选项</div>
       </div>

frontend/src/components/TestModal.vue

@@ -258,7 +258,7 @@ async function recover() {
         <div v-if="maxRefs > 0">
           <label class="lbl">
             {{ refsLabel }}
-            <span v-if="refsRequired" class="text-rose-300">*</span>
+            <span v-if="refsRequired" class="text-rose-600">*</span>
           </label>
           <div class="flex gap-2 flex-wrap items-start">
             <div v-for="(img, i) in refImages" :key="i"
@@ -286,7 +286,7 @@ async function recover() {
         </button>
 
         <p v-if="status" class="text-xs text-white/55">{{ status }}</p>
-        <p v-if="error" class="text-xs text-rose-300 break-all">{{ error }}</p>
+        <p v-if="error" class="text-xs text-rose-600 break-all">{{ error }}</p>
 
         <div v-if="resultUrl" class="rounded-xl ring-1 ring-white/10 bg-white/[0.03] overflow-hidden grid place-items-center min-h-[220px]">
           <video v-if="resultKind === 'video'" :src="resultUrl" controls autoplay

frontend/src/components/canvas/CanvasNodeView.vue

@@ -288,7 +288,7 @@ defineExpose({ startEdit, commitNote })
 
 /* 笔记 = 白色卡片 */
 .cv-node--note {
-  background: #fff;
+  background: var(--surface-solid);
   border-color: rgb(24 24 27 / 0.1);
   cursor: text;
 }
@@ -416,7 +416,7 @@ html.dark .cv-node--note {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #fff;
+  background: var(--surface-solid);
   border: 2px solid #18181b;
   box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
   transition: transform 0.15s ease, box-shadow 0.15s ease;

frontend/src/layouts/AdminLayout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import Icon from '../components/Icon.vue'
 import Logo from '../components/Logo.vue'
@@ -26,8 +26,6 @@ const tabs = [
   { label: '系统配置', to: '/admin/config',   icon: 'config' },
 ]
 
-const currentLabel = computed(() => route.meta?.label || '')
-
 // 二级菜单展开状态：当前路由命中子项时默认展开，也可手动切换。
 const openGroups = ref(new Set())
 function groupActive(t) { return (t.children || []).some((c) => route.path.startsWith(c.to)) }
@@ -46,14 +44,14 @@ watch(() => route.path, () => {
 </script>
 
 <template>
-  <div class="theme-x h-screen flex bg-[var(--app-bg)] text-[color:var(--fg-2)] selection:bg-orange-400/30 overflow-hidden">
+  <div class="theme-x h-screen flex bg-[var(--app-bg)] text-[color:var(--fg-2)] selection:bg-orange-500/30 overflow-hidden">
     <!-- ===== Sidebar ===== -->
-    <aside class="w-60 shrink-0 border-r border-r-[color:var(--ink-soft)] bg-[var(--surface)] backdrop-blur-xl flex flex-col">
+    <aside class="w-60 shrink-0 border-r border-r-[color:var(--ink-soft)] bg-white flex flex-col">
       <router-link to="/" class="h-16 flex items-center gap-2.5 px-5 border-b border-b-[color:var(--ink-soft)] group">
         <img v-if="site.logo" :src="site.logo" :alt="site.title" class="w-8 h-8 rounded-[10px] object-contain ring-1 ring-[color:var(--ink)]" />
         <Logo v-else :size="32" />
         <div class="leading-tight min-w-0">
-          <div class="text-sm font-extrabold truncate tracking-tight text-[color:var(--fg)]">{{ site.title }}</div>
+          <div class="brand-word text-[15px] truncate max-w-full">{{ site.title }}</div>
           <div class="admin-tag text-[11px] font-bold uppercase tracking-widest truncate">Admin</div>
         </div>
       </router-link>
@@ -63,16 +61,16 @@ watch(() => route.path, () => {
           <router-link v-if="!t.children" :to="t.to"
             class="admin-link group"
             active-class="active">
-            <span class="absolute left-1 top-1/2 -translate-y-1/2 w-[6px] h-6 rounded-sm opacity-0 transition-opacity"
+            <span class="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-full opacity-0 transition-opacity"
-                  style="background: var(--m-orange)"></span>
+                  style="background: #18181b"></span>
             <Icon :name="t.icon" class="w-4 h-4 shrink-0 opacity-70 group-hover:opacity-100 transition-opacity" />
             <span class="text-sm">{{ t.label }}</span>
           </router-link>
           <div v-else>
             <button type="button" @click="toggleGroup(t.label)"
                     class="admin-link group w-full text-left" :class="groupActive(t) && 'active'">
-              <span class="absolute left-1 top-1/2 -translate-y-1/2 w-[6px] h-6 rounded-sm opacity-0 transition-opacity"
+              <span class="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-full opacity-0 transition-opacity"
-                    style="background: var(--m-orange)"></span>
+                    style="background: #18181b"></span>
               <Icon :name="t.icon" class="w-4 h-4 shrink-0 opacity-70 group-hover:opacity-100 transition-opacity" />
               <span class="text-sm">{{ t.label }}</span>
               <svg class="w-3 h-3 ml-auto transition-transform" :class="openGroups.has(t.label) && 'rotate-90'"
@@ -100,14 +98,8 @@ watch(() => route.path, () => {
     <!-- ===== Main ===== -->
     <div class="flex-1 min-w-0 flex flex-col relative">
 
-      <header class="relative z-10 h-14 shrink-0 border-b border-b-[color:var(--ink-soft)] bg-[var(--app-bg)]/60 backdrop-blur-xl flex items-center px-8">
+      <main :class="['theme-text flex-1 overflow-y-auto overscroll-y-none relative z-10 [scrollbar-gutter:stable]']">
-        <div class="admin-badge text-[10px] uppercase tracking-[0.25em] font-extrabold mr-3 px-2.5 py-1 rounded-lg text-white select-none">Admin</div>
+        <div class="px-8 py-8 max-w-[1500px] mx-auto">
-        <div class="text-[color:var(--fg-faint)] mr-3">/</div>
-        <h1 class="text-sm font-semibold tracking-tight text-[color:var(--fg)]">{{ currentLabel }}</h1>
-      </header>
-
-      <main :class="['theme-text flex-1 overflow-y-auto overscroll-y-none relative z-10']">
-        <div class="px-8 py-7">
           <router-view v-slot="{ Component }">
             <transition name="fade" mode="out-in">
               <component :is="Component" />
@@ -126,10 +118,6 @@ watch(() => route.path, () => {
   background-clip: text;
   color: transparent;
 }
-.admin-badge {
-  background: linear-gradient(120deg, #18181b, #27272a 60%, #52525b 140%);
-  box-shadow: 0 4px 14px var(--accent-glow);
-}
 .admin-link {
   position: relative;
   display: flex;
@@ -142,14 +130,14 @@ watch(() => route.path, () => {
   font-weight: 600;
   transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
 }
-.admin-link:hover { background: var(--hover); color: var(--fg); border-color: rgb(24 24 27 / 0.3); }
+.admin-link:hover { background: rgb(24 24 27 / 0.05); color: var(--fg); }
 .admin-link.active {
-  color: #fff;
+  color: #18181b;
-  background: linear-gradient(120deg, #18181b, #27272a);
+  background: rgb(24 24 27 / 0.07);
-  border-color: transparent;
+  font-weight: 800;
-  box-shadow: 0 4px 14px var(--accent-glow);
 }
-.admin-link.active > span:first-child { opacity: 0; }
+.admin-link.active > :deep(svg) { opacity: 1; }
+.admin-link.active > span:first-child { opacity: 1 !important; }
 
 .admin-sublink {
   display: flex;
@@ -161,10 +149,10 @@ watch(() => route.path, () => {
   font-weight: 600;
   transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
-.admin-sublink:hover { background: var(--hover); color: var(--fg); border-color: rgb(24 24 27 / 0.3); }
+.admin-sublink:hover { background: rgb(24 24 27 / 0.05); color: var(--fg); }
-.admin-sublink.active { color: var(--m-orange); background: var(--hover); border-color: rgb(24 24 27 / 0.35); font-weight: 700; }
+.admin-sublink.active { color: #18181b; background: rgb(24 24 27 / 0.07); font-weight: 800; }
 
-.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
+.fade-enter-active, .fade-leave-active { transition: opacity 0.12s ease; }
-.fade-enter-from { opacity: 0; transform: translateY(4px); }
+.fade-enter-from { opacity: 0; }
 .fade-leave-to { opacity: 0; }
 </style>

frontend/src/layouts/PublicLayout.vue

@@ -6,7 +6,6 @@ import { site } from '../site'
 import Icon from '../components/Icon.vue'
 import Logo from '../components/Logo.vue'
 import { pointsLabel } from '../credits'
-import { draft } from '../playground'
 import { announcement, openAnnouncement } from '../announcement'
 
 const route = useRoute()
@@ -28,10 +27,10 @@ const nav = computed(() => {
 // Avatar menu — only the surfaces the top nav doesn't already expose
 // (画图/图片 live in the bar, so they're intentionally left out here).
 const userMenu = [
-  { to: '/mylogs', label: '生成日志' },
+  { to: '/mylogs', label: '生成日志', icon: 'log' },
-  { to: '/invite', label: '邀请返利' },
+  { to: '/invite', label: '邀请返利', icon: 'team' },
-  { to: '/orders', label: '订单' },
+  { to: '/orders', label: '订单', icon: 'receipt' },
-  { to: '/settings', label: '设置' },
+  { to: '/settings', label: '设置', icon: 'config' },
 ]
 
 const menuOpen = ref(false)     // avatar dropdown
@@ -47,6 +46,7 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll))
 // credits — the logged-in user's real server-side balance (auth.user.credits)
 const credits = computed(() => Number(auth.user?.credits || 0))
 const creditsLabel = computed(() => pointsLabel(credits.value))
+const avatarChar = computed(() => Array.from(displayName.value)[0]?.toUpperCase() || '?')
 const displayName = computed(() => {
   const n = (auth.user?.name || '').trim()
   if (n) return n
@@ -54,15 +54,8 @@ const displayName = computed(() => {
   return e ? e.split('@')[0] : '我的'
 })
 
-// On the 画图 workbench the label tracks the active mode — it flips with the
-// 生图/生视频 tab, and on state restore reflects a pending job's kind.
-const currentLabel = computed(() => {
-  if (route.path === '/user') return draft.mode === 'video' ? '生视频' : '生图'
-  return route.meta?.label || ''
-})
-
 // The home page paints its own full-bleed hero; other pages keep the padded
-// shell plus a route-label header.
+// shell.
 const isHome = computed(() => route.path === '/')
 
 // CanvasView's root is a <Teleport to="body"> — keep it outside the
@@ -75,7 +68,7 @@ async function onLogout() {
 </script>
 
 <template>
-  <div class="theme-x min-h-screen bg-[var(--app-bg)] text-[color:var(--fg-2)] selection:bg-orange-400/30"
+  <div class="theme-x min-h-screen bg-[var(--app-bg)] text-[color:var(--fg-2)] selection:bg-orange-500/30"
        :class="{ 'home-bg': isHome }">
     <!-- ===== Top bar：悬浮胶囊，滚动展开为通栏 ===== -->
     <header class="top-nav fixed top-0 inset-x-0 z-40" :class="{ scrolled }">
@@ -84,7 +77,7 @@ async function onLogout() {
         <router-link to="/" class="flex items-center gap-2.5 shrink-0 transition-transform hover:scale-[1.03]">
           <img v-if="site.logo" :src="site.logo" :alt="site.title" class="w-8 h-8 object-contain" />
           <Logo v-else :size="30" />
-          <span class="text-[17px] font-bold tracking-tight text-[color:var(--fg)]">{{ site.title }}</span>
+          <span class="brand-word text-[19px]">{{ site.title }}</span>
           <span class="brand-spark" aria-hidden="true">✦</span>
         </router-link>
 
@@ -98,39 +91,46 @@ async function onLogout() {
 
         <div class="flex-1"></div>
 
-        <!-- balance (signed in) -->
-        <router-link v-if="isAuthed()" to="/settings"
-                     class="hidden sm:block text-xs text-[color:var(--fg-2)] hover:text-[color:var(--fg)] tabular-nums transition-colors">
-          余额 <span class="text-[color:var(--fg)] font-semibold">{{ creditsLabel }}</span>
-        </router-link>
-
         <!-- 公告 -->
         <button v-if="isAuthed() && announcement.content.trim()" type="button"
                 @click="openAnnouncement" class="round-btn" title="公告">
           <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l18-7-4 14-6-3-3 4-1-6z"/></svg>
         </button>
 
-        <!-- admin shortcut -->
-        <router-link v-if="isAdmin()" to="/admin/overview" class="round-btn" title="进入管理后台">
-          <Icon name="shield" class="w-4 h-4" />
-        </router-link>
-
         <!-- guest actions -->
         <template v-if="!isAuthed()">
           <button type="button" class="login-pill" @click="openLogin('/user')">登录 / 注册</button>
         </template>
 
-        <!-- signed-in: avatar menu -->
+        <!-- signed-in: avatar menu（余额 / 后台入口都收进来） -->
         <div v-else class="relative">
-          <button type="button" class="name-btn" @click.stop="menuOpen = !menuOpen" title="我的">
+          <button type="button" class="name-btn" :class="{ open: menuOpen }" @click.stop="menuOpen = !menuOpen" title="我的">
+            <span class="avatar">{{ avatarChar }}</span>
             <span class="name-txt">{{ displayName }}</span>
-            <svg class="w-3.5 h-3.5 shrink-0 transition-transform" :class="menuOpen && 'rotate-180'"
+            <svg class="w-3.5 h-3.5 shrink-0 text-[color:var(--fg-3)] transition-transform" :class="menuOpen && 'rotate-180'"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
           </button>
           <div v-if="menuOpen" class="menu" @click.stop>
-            <router-link v-for="m in userMenu" :key="m.to" :to="m.to" class="menu-item">{{ m.label }}</router-link>
+            <div class="menu-head">
+              <span class="avatar avatar--lg">{{ avatarChar }}</span>
+              <div class="min-w-0">
+                <div class="menu-name">{{ displayName }}</div>
+                <div v-if="auth.user?.email" class="menu-mail">{{ auth.user.email }}</div>
+              </div>
+            </div>
+            <router-link to="/settings" class="menu-balance">
+              <span class="mb-label">余额</span>
+              <span class="mb-val">{{ creditsLabel }}</span>
+              <span class="mb-go">充值 →</span>
+            </router-link>
+            <router-link v-for="m in userMenu" :key="m.to" :to="m.to" class="menu-item">
+              <Icon :name="m.icon" :size="15" /> {{ m.label }}
+            </router-link>
+            <router-link v-if="isAdmin()" to="/admin/overview" class="menu-item">
+              <Icon name="shield" :size="15" /> 管理后台
+            </router-link>
             <div class="menu-sep"></div>
-            <button type="button" class="menu-item w-full text-left" @click="onLogout">退出登录</button>
+            <button type="button" class="menu-item menu-item--out w-full text-left" @click="onLogout">退出登录</button>
           </div>
         </div>
 
@@ -149,6 +149,7 @@ async function onLogout() {
         <template v-if="isAuthed()">
           <div class="menu-sep"></div>
           <router-link v-for="m in userMenu" :key="m.to" :to="m.to" active-class="m-on" class="m-link">{{ m.label }}</router-link>
+          <router-link v-if="isAdmin()" to="/admin/overview" class="m-link">管理后台</router-link>
         </template>
         <template v-else>
           <div class="menu-sep"></div>
@@ -164,13 +165,8 @@ async function onLogout() {
     <!-- ===== Main column ===== -->
     <div class="relative">
 
-      <!-- Route label header — the home page brings its own hero instead. -->
-      <header v-if="!isHome" class="relative z-10 mx-auto max-w-[1400px] px-4 md:px-8 pt-[104px] pb-4">
-        <span class="text-[22px] font-bold tracking-tight text-[color:var(--fg)]">{{ currentLabel }}</span>
-      </header>
-
       <main :class="['relative z-10 mx-auto max-w-[1400px] pb-24',
-                     isHome ? 'pt-0 px-0' : 'px-4 md:px-8 pt-2',]">
+                     isHome ? 'pt-0 px-0' : 'px-4 md:px-8 pt-[96px]']">
         <router-view v-slot="{ Component, route: viewRoute }">
           <component :is="Component" v-if="viewRoute.path === '/canvas'" />
           <transition v-else name="fade" mode="out-in">
@@ -240,7 +236,6 @@ html.dark .nav-inner { box-shadow: 0 8px 30px -14px rgb(0 0 0 / 0.5); }
 .top-link:active { transform: scale(0.95); }
 .top-link:hover { color: var(--fg); background: var(--hover); }
 .home-bg .top-link.on { color: #18181b; background: rgba(24, 24, 27, 0.07); }
-.home-bg .brand-spark { display: none; }
 .top-link.on {
   color: var(--m-orange);
   font-weight: 700;
@@ -335,62 +330,111 @@ html.dark .nav-inner { box-shadow: 0 8px 30px -14px rgb(0 0 0 / 0.5); }
 .name-btn {
   display: inline-flex;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.5rem;
-  max-width: 10rem;
+  max-width: 12rem;
-  height: 2.125rem;
+  height: 2.5rem;
-  padding: 0 0.7rem 0 0.85rem;
+  padding: 0 0.7rem 0 0.3rem;
-  border-radius: 0.6rem;
+  border-radius: 999px;
-  border: 1px solid var(--ink-soft);
+  border: 1px solid rgb(24 24 27 / 0.1);
   cursor: pointer;
   font-size: 13px;
   font-weight: 700;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--surface-solid);
-  -webkit-backdrop-filter: blur(10px);
+  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
-  backdrop-filter: blur(10px);
-  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
 }
-.name-btn:hover {
+.name-btn:hover, .name-btn.open {
-  background: var(--hover);
+  border-color: rgb(24 24 27 / 0.28);
-  border-color: rgb(24 24 27 / 0.4);
+  box-shadow: 0 4px 14px rgb(24 24 27 / 0.1);
-  box-shadow: 0 4px 14px rgb(24 24 27 / 0.16);
-  transform: translateY(-1px);
 }
 .name-txt {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.avatar {
+  flex-shrink: 0;
+  width: 1.9rem;
+  height: 1.9rem;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: #18181b;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+}
+.avatar--lg { width: 2.6rem; height: 2.6rem; font-size: 16px; }
 
 .menu {
   position: absolute;
   right: 0;
-  top: 2.75rem;
+  top: 3.1rem;
-  width: 11.5rem;
+  width: 16rem;
-  padding: 0.4rem;
+  padding: 0.5rem;
-  border-radius: 0.85rem;
+  border-radius: 1rem;
-  background: var(--menu-bg);
+  background: var(--surface-solid);
-  -webkit-backdrop-filter: blur(18px);
+  border: 1px solid rgb(24 24 27 / 0.08);
-  backdrop-filter: blur(18px);
+  box-shadow: 0 2px 6px rgb(24 24 27 / 0.05), 0 24px 48px -12px rgb(24 24 27 / 0.22);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow-lg);
   z-index: 50;
 }
+.menu-head {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.5rem 0.5rem 0.65rem;
+}
+.menu-name {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.menu-mail {
+  margin-top: 1px;
+  font-size: 12px;
+  color: var(--fg-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.menu-balance {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin: 0 0 0.35rem;
+  padding: 0.7rem 0.8rem;
+  border-radius: 0.75rem;
+  background: #f4f4f5;
+  text-decoration: none;
+  transition: background 0.15s ease;
+}
+.menu-balance:hover { background: #ececee; }
+.mb-label { font-size: 12px; font-weight: 600; color: var(--fg-3); }
+.mb-val { font-size: 20px; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
+.mb-go { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--fg-2); }
 .menu-item {
-  display: block;
+  display: flex;
-  padding: 0.5rem 0.65rem;
+  align-items: center;
-  border-radius: 0.5rem;
+  gap: 0.6rem;
+  padding: 0.55rem 0.7rem;
+  border-radius: 0.6rem;
   font-size: 13px;
   font-weight: 600;
   color: var(--fg-2);
   background: transparent;
   border: none;
   cursor: pointer;
+  text-decoration: none;
 }
-.menu-item:hover { background: var(--hover); color: var(--fg); }
+.menu-item:hover { background: rgb(24 24 27 / 0.06); color: var(--fg); }
+.menu-item--out { color: #dc2626; }
+.menu-item--out:hover { background: rgb(220 38 38 / 0.08); color: #dc2626; }
 .menu-sep { height: 1px; background: var(--hairline); margin: 0.35rem 0.25rem; }
 
-.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
-.fade-enter-from { opacity: 0; transform: translateY(8px); }
+.fade-enter-from { opacity: 0; }
 .fade-leave-to { opacity: 0; }
 </style>

frontend/src/style.css

@@ -50,6 +50,8 @@ video {
   --accent-glow: rgb(24 24 27 / 0.25);
 }
 
+html { scrollbar-gutter: stable; }
+
 html.dark {
   --app-bg: #08070f;
   --fg: rgb(255 255 255 / 0.93);
@@ -110,7 +112,7 @@ html:not(.dark) .theme-text :is(.text-white, [class*="text-white/9"], [class*="t
 html:not(.dark) .theme-text :is([class*="text-white/7"], [class*="text-white/6"]) { color: rgb(24 21 36 / 0.7); }
 html:not(.dark) .theme-text :is([class*="text-white/5"], [class*="text-white/4"]) { color: rgb(24 21 36 / 0.52); }
 html:not(.dark) .theme-text :is([class*="text-white/3"], [class*="text-white/2"], [class*="text-white/1"]) { color: rgb(24 21 36 / 0.4); }
-html:not(.dark) .theme-text [class*="bg-white/"] { background-color: var(--surface-2); }
+html:not(.dark) .theme-text :is([class^="bg-white/"], [class*=" bg-white/"]) { background-color: var(--surface-2); }
 html:not(.dark) .theme-text [class*="border-white/"] { border-color: var(--hairline); }
 html:not(.dark) .theme-text [class*="ring-white/"] { --tw-ring-color: var(--hairline); }
 /* White placeholders (placeholder:text-white/30 etc.) — the rescue above only
@@ -125,7 +127,7 @@ html:not(.dark) .theme-text :is([class*="bg-slate-900"], [class*="bg-slate-800"]
    matcher also catches the /80 opacity variants. Badges keep their pale tinted
    bg (bg-*-500/10) which reads fine on white. */
 html:not(.dark) .theme-text :is([class*="text-sky-300"], [class*="text-sky-200"]) { color: rgb(24 24 27); }
-html:not(.dark) .theme-text :is([class*="text-orange-300"], [class*="text-orange-200"]) { color: rgb(124 58 237); }
+html:not(.dark) .theme-text :is([class*="text-orange-300"], [class*="text-orange-200"]) { color: rgb(24 24 27); }
 html:not(.dark) .theme-text :is([class*="text-rose-300"], [class*="text-rose-200"]) { color: rgb(225 29 72); }
 html:not(.dark) .theme-text :is([class*="text-emerald-300"], [class*="text-emerald-200"]) { color: rgb(5 150 105); }
 html:not(.dark) .theme-text :is([class*="text-sky-300"], [class*="text-sky-200"]) { color: rgb(2 132 199); }
@@ -137,12 +139,19 @@ html:not(.dark) .theme-text :is([class*="text-teal-300"], [class*="text-teal-200
    Recolor them centrally in light mode — the extra .theme-text class outranks
    the scoped `.x[data-v-*]` rules. Dark mode keeps the scoped look (gated on
    :not(.dark)). */
-html:not(.dark) .theme-text :is(.fp, .pg, .act, .filter-pill, .kind-btn, .preset-btn, .opt, .chip-x, .ro-chip) {
+html:not(.dark) .theme-text :is(.fp, .pg, .filter-pill, .kind-btn, .preset-btn, .opt, .chip-x, .ro-chip) {
   color: var(--fg-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline);
 }
-html:not(.dark) .theme-text :is(.fp, .pg, .act, .filter-pill, .kind-btn, .preset-btn, .opt, .chip-x):hover {
+html:not(.dark) .theme-text :is(.fp, .pg, .filter-pill, .kind-btn, .preset-btn, .opt, .chip-x):hover {
   color: var(--fg); background: var(--hover);
 }
+/* 行内操作图标按钮：白底灰边，悬停浅灰加深描边 */
+html:not(.dark) .theme-text .act {
+  color: var(--fg-3); background: var(--surface-solid); box-shadow: inset 0 0 0 1px var(--hairline);
+}
+html:not(.dark) .theme-text .act:hover {
+  color: var(--fg); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14);
+}
 html:not(.dark) .theme-text :is(.fp-on, .pg-on, .seg-on, .opt-on) {
   background: linear-gradient(120deg, #18181b, #27272a); color: #fff;
   box-shadow: 0 4px 16px var(--accent-glow);
@@ -262,8 +271,8 @@ html:not(.dark) .theme-text .lbl { color: var(--fg); }
 html:not(.dark) .theme-text :is(.hint, .flbl) { color: var(--fg-3); }
 /* Delete icon button: a clean neutral button with a red glyph (not a heavy pink
    box), filling solid red on hover. */
-html:not(.dark) .theme-text .act.danger { color: rgb(225 29 72); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); }
+html:not(.dark) .theme-text .act.danger { color: rgb(225 29 72); background: var(--surface-solid); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.25); }
-html:not(.dark) .theme-text .act.danger:hover { color: #fff; background: rgb(244 63 94); box-shadow: inset 0 0 0 1px rgb(225 29 72); }
+html:not(.dark) .theme-text .act.danger:hover { color: #dc2626; background: rgb(244 63 94 / 0.08); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3); }
 /* Soft "danger" toolbar buttons (删除选中 / 删除异常账号 …): a muted red, not a
    heavy pink fill; solid red on hover. Outranks the per-view scoped pink. */
 html:not(.dark) .theme-text .btn-soft.danger { color: rgb(190 18 60); background: rgb(244 63 94 / 0.08); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.22); }
@@ -326,6 +335,8 @@ button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: poi
    columns, let the card scroll horizontally. overflow-y is left to the card's
    own utility so vertical clipping / rounded corners are preserved. */
 .card:has(> table) { overflow-x: auto; }
+/* 后台卡片统一纯白——90% 半透明白叠在米色页底上会发灰 */
+.theme-text .card { background: var(--surface-solid); }
 
 /* ===== Admin table polish =====
    Every data table lives in a `.card` and views hand-roll their own
@@ -335,325 +346,124 @@ button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: poi
    over-media tables are untouched; specificity outranks the per-view
    Tailwind hover utilities and the light-mode white rescue. */
 .theme-text .card table thead {
-  background: linear-gradient(180deg, rgb(24 24 27 / 0.07), rgb(24 24 27 / 0.025));
+  background: transparent;
+  border-bottom: 1px solid rgb(24 24 27 / 0.07);
 }
-html.dark .theme-text .card table thead {
+/* 表头统一：各页曾分别写 10px/11px、tracking 0.2em/0.04em——收拢到同一规格。 */
-  background: linear-gradient(180deg, rgb(24 24 27 / 0.13), rgb(24 24 27 / 0.05));
+.theme-text .card table thead :is(th, td) {
-}
+  font-size: 13px;
-.theme-text .card table tbody tr { transition: background-color 0.15s ease; }
+  font-weight: 650;
-.theme-text .card table tbody tr:hover { background-color: rgb(24 24 27 / 0.08); }
+  letter-spacing: 0.01em;
-html.dark .theme-text .card table tbody tr:hover { background-color: rgb(24 24 27 / 0.11); }
+  color: var(--fg-3);
-/* Checkbox column + first data column get a hair more air against the
+  padding-top: 16px;
-   card edge so dense tables don't feel cramped. */
+  padding-bottom: 16px;
-.theme-text .card table tbody tr:hover :is(td, th):first-child {
+  line-height: 1.4;
-  box-shadow: inset 2px 0 0 rgb(24 24 27 / 0.55);
+  white-space: nowrap;
 }
+.theme-text .card table tbody tr { transition: background-color 0.12s ease; }
+.theme-text .card table tbody tr:hover { background-color: #f7f7f8; }
+.theme-text .card table tbody tr:last-child { border-bottom: 0; }
+/* 多选表格的选中行高亮（行加 .row-on） */
+.theme-text .card table tbody tr.row-on { background-color: rgb(24 24 27 / 0.035); }
+.theme-text .card table tbody tr.row-on:hover { background-color: #f0f0f2; }
+/* 表体单元格基线：统一 13px 字号 + 次要色，数字/名称列各自覆盖 */
+.theme-text .card table tbody td { color: var(--fg-2); font-size: 13px; }
+.theme-text .card table tbody tr.row-on td:first-child { box-shadow: inset 2px 0 0 #18181b; }
 
-::-webkit-scrollbar { width: 9px; height: 9px; }
+/* ── 空占位：图标块 + 文案，全站表格/卡片共用 ── */
-::-webkit-scrollbar-thumb { background: rgb(24 21 36 / 0.2); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
+.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 4.5rem 1.5rem; color: var(--fg-3); text-align: center; }
-::-webkit-scrollbar-thumb:hover { background: rgb(24 21 36 / 0.38); background-clip: content-box; }
+.empty-ico { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--surface-2); border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--fg-3); }
-::-webkit-scrollbar-track { background: transparent; }
+.empty-text { font-size: 0.875rem; }
-html.dark ::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.18); background-clip: content-box; }
+.empty-sub { font-size: 0.75rem; color: var(--fg-3); margin-top: -0.375rem; }
-html.dark ::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.32); background-clip: content-box; }
-
-/* ===== Ambient background — aurora wash used by the public shell ===== */
-.ambient-bg {
-  background-color: var(--app-bg);
-  }
-html.dark .ambient-bg {
-  background-image:
-    radial-gradient(60rem 40rem at 12% -10%, rgb(24 24 27 / 0.2), transparent 60%),
-    radial-gradient(52rem 36rem at 92% 8%, rgb(24 24 27 / 0.13), transparent 60%),
-    radial-gradient(46rem 32rem at 8% 96%, rgb(24 24 27 / 0.1), transparent 60%);
-}
-
-/* ===== Glass / aurora design kit =====
-   Frosted surfaces, hairline edges, soft layered shadows and violet→cyan
-   gradient accents. Same class names as the previous memphis kit so every
-   view picks the new look up without markup changes. */
-
-/* Gradient headline text — violet → cyan swipe. */
-.anime-grad-text {
-  background: linear-gradient(100deg, #18181b 0%, #3f3f46 45%, #52525b 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  padding: 0 0.05em;
-}
-html.dark .anime-grad-text {
-  background: linear-gradient(100deg, #71717a 0%, #e879f9 45%, #67e8f9 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-
-/* Section eyebrow — tiny uppercase kicker with a leading star. */
-.anime-eyebrow {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-}
-.anime-eyebrow::before { content: '✦'; font-size: 0.85em; }
-
-/* Sticker label — glass chip with a soft glow. */
-.sticker {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.34rem 0.85rem;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--fg);
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(12px);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-}
-
-/* Chunky CTA — violet→cyan gradient with a glow. */
-.bubble-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.7rem 1.4rem;
-  border-radius: 0.8rem;
-  font-size: 14px;
-  font-weight: 800;
-  color: #fff;
-  border: 1px solid rgb(255 255 255 / 0.18);
-  cursor: pointer;
-  background: linear-gradient(120deg, #18181b, #27272a 55%, #52525b);
-  box-shadow: 0 8px 24px var(--accent-glow);
-  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
-}
-.bubble-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--accent-glow); filter: brightness(1.06); }
-.bubble-btn:active { transform: scale(0.97) translateY(1px); box-shadow: 0 4px 12px var(--accent-glow); }
-
-/* Glass card — frosted surface, hairline edge, soft shadow. */
-.anime-card {
-  position: relative;
-  border-radius: 1.1rem;
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(14px);
-  backdrop-filter: blur(14px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
-}
-.anime-card:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--glass-shadow-lg);
-}
-
-/* Selected pill — gradient fill with a glow. */
-.chip-on {
-  color: #fff !important;
-  background: linear-gradient(120deg, #18181b, #27272a) !important;
-  border: 1px solid transparent !important;
-  box-shadow: 0 4px 16px var(--accent-glow) !important;
-}
-
-/* Twinkling star field — drop into any relatively-positioned decorative layer.
-   Uses layered radial-gradients so it's a single element, no extra DOM. */
-.anime-stars {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background-image:
-    radial-gradient(1.5px 1.5px at 12% 22%, rgb(24 24 27 / 0.7), transparent),
-    radial-gradient(1.5px 1.5px at 78% 12%, rgb(24 24 27 / 0.7), transparent),
-    radial-gradient(1px 1px at 42% 62%, rgb(24 24 27 / 0.6), transparent),
-    radial-gradient(1.5px 1.5px at 88% 72%, rgb(24 24 27 / 0.6), transparent),
-    radial-gradient(1px 1px at 24% 84%, rgb(24 24 27 / 0.55), transparent),
-    radial-gradient(1px 1px at 62% 34%, rgb(167 139 250 / 0.55), transparent);
-  animation: twinkle 4.5s ease-in-out infinite;
-}
-@keyframes twinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.4; } }
-@media (prefers-reduced-motion: reduce) { .anime-stars { animation: none; } }
-.ambient-grain::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22><filter id=%22n%22><feTurbulence baseFrequency=%220.9%22 numOctaves=%222%22 seed=%225%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.4%22/></svg>');
-  opacity: 0.035;
-  mix-blend-mode: multiply;
-  z-index: 1;
-}
-
-/* Float a soft mesh "orb" anywhere */
-.mesh-orb {
-  position: absolute;
-  border-radius: 9999px;
-  filter: blur(80px);
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* ===== Glass utilities ===== */
-/* Dot texture layer — kept faint so it reads as grain, not polka dots. */
-.memphis-dots {
-  background-image: radial-gradient(circle, rgb(24 21 36 / 0.07) 1.1px, transparent 1.1px);
-  background-size: 26px 26px;
-}
-html.dark .memphis-dots {
-  background-image: radial-gradient(circle, rgb(255 255 255 / 0.05) 1.1px, transparent 1.1px);
-}
-/* Frosted surface helpers for one-off markup. */
-.ink-card {
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(14px);
-  backdrop-filter: blur(14px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow-lg);
-}
-.ink-card-sm {
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(12px);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-}
-/* Lift on hover — the signature card interaction. */
-.chunky-hover { transition: transform 0.18s ease, box-shadow 0.18s ease; }
-.chunky-hover:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg); }
-/* Squishy press for buttons. */
-.memphis-press { transition: transform 0.15s ease; }
-.memphis-press:active { transform: scale(0.97) translateY(1px); }
-
-/* Empty-state badge — frosted tile with a gradient star. */
-.empty-badge {
-  width: 4.5rem;
-  height: 4.5rem;
-  display: grid;
-  place-items: center;
-  font-size: 1.8rem;
-  font-weight: 900;
-  color: #fff;
-  background: linear-gradient(135deg, #18181b, #52525b);
-  border: 1px solid rgb(255 255 255 / 0.2);
-  border-radius: 1.2rem;
-  box-shadow: 0 12px 32px var(--accent-glow);
-  animation: memphis-float 6s ease-in-out infinite;
-}
-@media (prefers-reduced-motion: reduce) { .empty-badge { animation: none; } }
-
-@keyframes memphis-wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
-@keyframes memphis-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
-@keyframes memphis-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
-.animate-memphis-wiggle { animation: memphis-wiggle 2s ease-in-out infinite; }
-.animate-memphis-float { animation: memphis-float 6s ease-in-out infinite; }
-.animate-memphis-bounce { animation: memphis-bounce 2s ease-in-out infinite; }
-@media (prefers-reduced-motion: reduce) {
-  .animate-memphis-wiggle, .animate-memphis-float, .animate-memphis-bounce { animation: none; }
-}
-
-/* ===== Dark public-shell theme overrides =====
-   Apply by adding `.public-dark` to a wrapper element. Views can keep their
-   existing Tailwind classes (text-slate-*, .card, .field) — these rules
-   remap them to the dark palette. */
-.public-dark { color: rgb(255 255 255 / 0.9); }
-.public-dark .card {
-  background: rgb(255 255 255 / 0.04);
-  border-color: rgb(255 255 255 / 0.1);
-  color: rgb(255 255 255 / 0.92);
-  box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.07);
-}
-.public-dark .field {
-  background: rgb(255 255 255 / 0.04);
-  border-color: rgb(255 255 255 / 0.12);
-  color: rgb(255 255 255 / 0.95);
-  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
-}
-.public-dark .field::placeholder { color: rgb(255 255 255 / 0.3); }
-/* Single focus treatment shared by every <.field> across the admin shell —
-   a violet glow ring, matching the light theme's focus affordance. */
-.public-dark .field:focus,
-.public-dark .field:focus-visible {
-  border-color: rgb(24 24 27 / 0.7);
-  background: rgb(255 255 255 / 0.06);
-  box-shadow: 0 0 0 3px rgb(24 24 27 / 0.25);
-  outline: none;
-}
-.public-dark .btn-soft {
-  background: rgb(255 255 255 / 0.05);
-  border-color: rgb(255 255 255 / 0.12);
-  color: rgb(255 255 255 / 0.85);
-}
-.public-dark .btn-soft:hover { background: rgb(24 24 27 / 0.25); color: white; }
-.public-dark .btn-ghost { color: rgb(255 255 255 / 0.65); border-color: transparent; }
-.public-dark .btn-ghost:hover { background: rgb(24 24 27 / 0.18); color: white; }
-.public-dark .btn-primary {
-  background: linear-gradient(120deg, #18181b, #27272a); color: #fff;
-  box-shadow: 0 6px 18px var(--accent-glow);
-}
-.public-dark .btn-primary:hover { filter: brightness(1.08); }
-.public-dark .pill { background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.85); border-color: rgb(255 255 255 / 0.12); }
-
-/* Remap slate text tokens */
-.public-dark .text-slate-900,
-.public-dark .text-slate-800,
-.public-dark .text-slate-700 { color: rgb(255 255 255 / 0.95); }
-.public-dark .text-slate-600 { color: rgb(255 255 255 / 0.75); }
-.public-dark .text-slate-500 { color: rgb(255 255 255 / 0.55); }
-.public-dark .text-slate-400 { color: rgb(255 255 255 / 0.4); }
-.public-dark .text-slate-300 { color: rgb(255 255 255 / 0.3); }
-
-/* Backgrounds & borders that views used */
-.public-dark .bg-white { background: rgb(255 255 255 / 0.12); color: rgb(255 255 255 / 0.95); }
-.public-dark .bg-slate-50, .public-dark .bg-slate-50\/60 { background: rgb(255 255 255 / 0.025); }
-.public-dark .bg-slate-100 { background: rgb(255 255 255 / 0.06); }
-.public-dark .bg-slate-200 { background: rgb(255 255 255 / 0.1); }
-.public-dark .border-slate-100,
-.public-dark .border-slate-200,
-.public-dark .border-slate-300 { border-color: rgb(255 255 255 / 0.08); }
-.public-dark .ring-slate-200 { --tw-ring-color: rgb(255 255 255 / 0.08); }
-
-/* Tables in dark */
-.public-dark .th { color: rgb(255 255 255 / 0.4); }
-.public-dark .row { border-color: rgb(255 255 255 / 0.06); }
-.public-dark .row:hover { background: rgb(24 24 27 / 0.07); }
-
-/* Inline code blocks (pill highlight) — only for inline <code>, NOT code inside
-   a <pre> block (docs examples), which would get an unwanted full-width tint. */
-.public-dark code { background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.9); }
-.public-dark pre code { background: transparent; padding: 0; }
-
-/* Filter pills + segmented controls that admin pages stamp with bg-slate-900
-   for the "selected" state — that lands invisible on the dark shell. Treat
-   slate-900 as a strong-contrast surface in the dark palette. */
-.public-dark .bg-slate-900 { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); }
-.public-dark .hover\:bg-slate-700:hover { background: rgb(255 255 255 / 0.85); color: rgb(15 23 42); }
-.public-dark .text-slate-700 { color: rgb(255 255 255 / 0.85); }
-.public-dark .text-slate-200 { color: rgb(255 255 255 / 0.7); }
-.public-dark .text-slate-100 { color: rgb(255 255 255 / 0.92); }
-
-/* Divider utilities used by lists (recent activity, table rows). */
-.public-dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
-.public-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
-  border-color: rgb(255 255 255 / 0.05);
-}
-.public-dark .border-slate-100\/80 { border-color: rgb(255 255 255 / 0.06); }
 .public-dark .hover\:bg-slate-50:hover { background: rgb(255 255 255 / 0.04); }
 .public-dark .hover\:bg-slate-100:hover { background: rgb(255 255 255 / 0.06); }
 
+/* ===== 站名 logo 字：站酷快乐体（自托管子集）=====
+   同一字体名拆成两份：英文数字小文件 + 汉字大文件，unicode-range 限定后
+   只有站名里真的含汉字时才会下载汉字那份。 */
+@font-face {
+  font-family: 'ZCOOL KuaiLe';
+  src: url('/fonts/zcool-kuaile-latin.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0020-007E;
+}
+@font-face {
+  font-family: 'ZCOOL KuaiLe';
+  src: url('/fonts/zcool-kuaile.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF, U+2014, U+2018-201D, U+2026;
+}
+.brand-word {
+  font-family: 'ZCOOL KuaiLe', ui-rounded, 'Hiragino Maru Gothic ProN', 'Arial Rounded MT Bold', sans-serif;
+  font-weight: 400;
+  letter-spacing: 0.03em;
+  color: var(--fg);
+  -webkit-text-stroke: 0.55px currentColor;
+  paint-order: stroke fill;
+}
+
+/* ===== 画图页选项胶囊的选中态（比例/画质/时长/张数）：墨黑底白字，一眼能看出选中 ===== */
+.chip-on {
+  background: #18181b !important;
+  color: #fff !important;
+  box-shadow: 0 4px 12px -4px rgb(24 24 27 / 0.45);
+}
+
+/* 生图 / 生视频 切换：容器稍深，选中项白底加描边与阴影 */
+.mode-switch { background: #ececef !important; }
+.mode-switch > .mode-on {
+  background: #fff !important;
+  color: #18181b !important;
+  font-weight: 700;
+  box-shadow: 0 1px 3px rgb(24 24 27 / 0.18), 0 0 0 1px rgb(24 24 27 / 0.08);
+}
+
+/* ===== 后台页头 + 统一工具栏 ===== */
+.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.page-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); }
+.page-sub { margin-top: 3px; font-size: 12.5px; color: var(--fg-3); line-height: 1.5; }
+.page-sub strong { color: var(--fg-2); font-weight: 700; }
+/* 刷新：独立的圆形图标按钮，固定在页头最右 */
+.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.refresh-btn {
+  flex-shrink: 0;
+  width: 42px; height: 42px;
+  display: inline-grid; place-items: center;
+  border-radius: 50%;
+  border: 1px solid rgb(24 24 27 / 0.12);
+  background: #fff;
+  color: var(--fg-2);
+  box-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 6px 16px -8px rgb(24 24 27 / 0.15);
+  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
+}
+.refresh-btn svg { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
+.refresh-btn:hover { color: var(--fg); border-color: rgb(24 24 27 / 0.3); box-shadow: 0 8px 20px -8px rgb(24 24 27 / 0.25); }
+.refresh-btn:hover svg { transform: rotate(180deg); }
+.refresh-btn:active svg { transform: rotate(360deg); transition-duration: .25s; }
+.page-bar { display: flex; justify-content: flex-end; }
+.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
+.toolbar .field { height: 36px; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13px !important; }
+.toolbar input.field:not([type]), .toolbar input.field[type="text"], .toolbar input.field[type="search"] {
+  padding-left: 34px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 11px center;
+  background-size: 16px;
+}
+.toolbar :is(.btn-soft, .btn-primary) { height: 36px; min-width: 88px; padding: 0 16px; font-size: 13px; font-weight: 700; box-shadow: none; }
+.toolbar > .flex-1 { flex: 0 1 300px; min-width: 200px; }
+.toolbar > .w-44 { flex: 0 1 240px; width: auto; }
+.toolbar > .btn-primary { margin-left: auto; }
+
 @layer components {
   /* surfaces — frosted card with a hairline glass edge + soft shadow.
      The inset top line is the light's "sheen" on the glass — barely
      visible on white, reads as a subtle rim-light in dark mode. */
   .card {
     @apply rounded-2xl;
-    background: var(--surface);
+    background: #fff;
-    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgb(24 24 27 / 0.07);
-    backdrop-filter: blur(16px);
+    box-shadow: 0 1px 2px rgb(24 24 27 / 0.03), 0 10px 28px -16px rgb(24 24 27 / 0.12);
-    border: 1px solid var(--glass-border);
-    box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.55);
   }
 
   /* buttons — each variant is self-contained (Tailwind v4 can't @apply a custom class) */
@@ -661,31 +471,28 @@ html.dark .memphis-dots {
     @apply inline-flex items-center justify-center gap-1.5 rounded-lg text-sm font-bold
            disabled:opacity-50 disabled:cursor-not-allowed px-3.5 py-2;
     color: #fff;
-    background: linear-gradient(120deg, #18181b, #27272a 60%, #52525b 140%);
+    background: #18181b;
-    border: 1px solid rgb(255 255 255 / 0.16);
+    border: 1px solid #18181b;
-    box-shadow: 0 6px 18px var(--accent-glow);
+    box-shadow: 0 6px 16px -6px rgb(9 9 11 / 0.45);
-    transition: transform 0.13s ease, box-shadow 0.13s ease, filter 0.13s ease;
+    transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.13s ease;
   }
-  .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); filter: brightness(1.07); }
+  .btn-primary:hover:not(:disabled) { background: #27272a; box-shadow: 0 10px 22px -8px rgb(9 9 11 / 0.5); }
-  .btn-primary:active:not(:disabled) { transform: scale(0.97) translateY(1px); box-shadow: 0 3px 10px var(--accent-glow); }
+  .btn-primary:active:not(:disabled) { transform: scale(0.97); box-shadow: none; }
+  /* 禁用态：浅灰填充（vivid 同款），不再是变淡的黑块 */
+  .btn-primary:disabled { background: var(--surface-2); color: var(--fg-3); border-color: transparent; box-shadow: none; opacity: 1; }
   .btn-soft {
     @apply inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold
            disabled:opacity-50 disabled:cursor-not-allowed px-3 py-1.5;
-    color: var(--fg-2);
+    color: var(--fg);
-    background: var(--surface);
+    background: #fff;
-    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgb(24 24 27 / 0.12);
-    backdrop-filter: blur(10px);
+    transition: transform 0.13s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-    border: 1px solid var(--ink-soft);
-    transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
   }
   .btn-soft:hover:not(:disabled) {
-    color: var(--fg);
+    background: #fafafa;
-    background: var(--hover);
+    border-color: rgb(24 24 27 / 0.3);
-    border-color: rgb(24 24 27 / 0.45);
-    box-shadow: 0 4px 14px rgb(24 24 27 / 0.16);
   }
-  html.dark .btn-soft:hover:not(:disabled) { border-color: rgb(24 24 27 / 0.5); box-shadow: 0 4px 14px rgb(24 24 27 / 0.22); }
+  .btn-soft:active:not(:disabled) { transform: scale(0.97); }
-  .btn-soft:active:not(:disabled) { transform: scale(0.97) translateY(1px); box-shadow: none; }
   .btn-ghost {
     @apply inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-medium
            disabled:opacity-50 disabled:cursor-not-allowed px-3 py-1.5;
@@ -695,8 +502,7 @@ html.dark .memphis-dots {
   }
   .btn-ghost:hover:not(:disabled) {
     color: var(--fg);
-    background: var(--hover);
+    background: rgb(24 24 27 / 0.06);
-    border-color: rgb(24 24 27 / 0.3);
   }
 
   /* text link / quiet action */
@@ -708,13 +514,14 @@ html.dark .memphis-dots {
     @apply w-full rounded-lg px-3 py-2 text-sm
            outline-none placeholder:text-slate-400;
     color: var(--fg);
-    background: var(--surface);
+    background: #fff;
-    border: 1px solid var(--ink-soft);
+    border: 1px solid rgb(24 24 27 / 0.12);
     transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
   }
+  .field:hover { border-color: rgb(24 24 27 / 0.22); }
   .field:focus, .field:focus-visible {
-    border-color: rgb(24 24 27 / 0.65);
+    border-color: #18181b;
-    box-shadow: 0 0 0 3px rgb(24 24 27 / 0.18);
+    box-shadow: 0 0 0 3px rgb(24 24 27 / 0.08);
   }
   html.dark .field:focus, html.dark .field:focus-visible {
     border-color: rgb(24 24 27 / 0.7);
@@ -746,20 +553,20 @@ html.dark .memphis-dots {
 
   /* status pill */
   .pill {
-    @apply inline-flex items-center rounded-md px-2 py-0.5 text-xs font-semibold;
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
-    border: 1px solid var(--ink-soft);
+    border: 1px solid transparent;
   }
 
   /* table primitives */
-  .th { @apply text-left px-4 py-3 text-[11px] font-bold uppercase tracking-wider; color: var(--fg-faint); }
+  .th { @apply text-left px-4 py-3 text-[11px] font-bold uppercase tracking-wider; color: var(--fg-3); }
   .td { @apply px-4 py-3.5 align-middle; }
   .row { @apply border-t transition-colors; border-color: var(--hairline); }
-  .row:hover { background: rgb(24 24 27 / 0.06); }
+  .row:hover { background: #f7f7f8; }
 
   /* avatar chip for identity columns */
   .avatar {
     @apply w-8 h-8 rounded-full grid place-items-center text-xs font-bold shrink-0;
-    border: 1px solid var(--ink);
+    border: 1px solid rgb(24 24 27 / 0.1);
-    background: var(--surface-2);
+    background: #f4f4f5;
   }
 }

frontend/src/views/AboutView.vue

@@ -10,24 +10,31 @@ const powers = [
   { icon: 't2v', title: '文字生视频', desc: '一段描述生成短片，时长分辨率可选。', tint: 'linear-gradient(135deg,#38bdf8,#52525b)' },
   { icon: 'i2v', title: '图生视频', desc: '给张参考图，让静态画面动起来。', tint: 'linear-gradient(135deg,#18181b,#3f3f46)' },
 ]
+
+const contactCards = computed(() => {
+  const c = contact.value || {}
+  const list = []
+  if (c.shop) list.push({ label: '商店', value: '前往商店', href: c.shop })
+  if (c.email) list.push({ label: '邮箱', value: c.email, href: `mailto:${c.email}` })
+  if (c.qq) list.push({ label: 'QQ', value: c.qq, href: c.qq_link || '' })
+  if (c.qq_group) list.push({ label: 'QQ 群', value: c.qq_group, href: c.qq_group_link || '' })
+  return list
+})
 </script>
 
 <template>
-  <div class="space-y-16 pb-8">
+  <div class="space-y-14 pb-8">
     <!-- ===== hero ===== -->
-    <section class="relative overflow-hidden rounded-[1.4rem] anime-card px-6 py-10 md:px-12 md:py-14">
+    <section class="ab-hero">
-      <div class="memphis-dots absolute inset-0 opacity-40 pointer-events-none"></div>
       <div class="relative grid md:grid-cols-[1.1fr_0.9fr] gap-8 items-center">
         <div>
-          <span class="sticker">✦ 关于我们</span>
+          <span class="ab-eyebrow">✦ 关于我们</span>
-          <h1 class="mt-4 text-4xl md:text-5xl font-black tracking-tight text-[color:var(--fg)]">
+          <h1 class="ab-title">把创作交给 <span class="ab-brand">{{ site.title }}</span></h1>
-            把创作交给 <span class="anime-grad-text">{{ site.title }}</span>
+          <p class="ab-lead">
-          </h1>
+            {{ site.title }} 是一个 AI 生图与生视频平台，汇集多家顶级模型，按实际生成量计费。
-          <p class="text-[color:var(--fg-2)] mt-5 text-base md:text-lg leading-relaxed max-w-xl">
-            {{ site.title }} 是一个聚合 GPT、Gemini、Firefly、Flux 等顶级模型的 AI 生图与生视频平台。
             把脑海里的画面写成一句话，剩下的交给我们变成图像与视频。
           </p>
-          <router-link to="/user" class="bubble-btn mt-7">开始创作 →</router-link>
+          <router-link to="/user" class="btn-primary ab-cta">开始创作 <span aria-hidden="true">→</span></router-link>
         </div>
         <!-- floating glass tile cluster standing in for a mascot illustration -->
         <div class="ab-cluster" aria-hidden="true">
@@ -42,9 +49,9 @@ const powers = [
 
     <!-- ===== powers ===== -->
     <section>
-      <div class="anime-eyebrow text-[var(--m-orange)]">能做什么</div>
+      <div class="ab-eyebrow">能做什么</div>
-      <h2 class="mt-3 text-2xl md:text-3xl font-black tracking-tight text-[color:var(--fg)]">四种方式，把想象变成画面</h2>
+      <h2 class="ab-h2">四种方式，把想象变成画面</h2>
-      <div class="mt-7 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+      <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
         <div v-for="p in powers" :key="p.title" class="power-card p-5">
           <div class="power-ico" :style="{ background: p.tint }">
             <svg v-if="p.icon === 't2i'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v14H4z"/><path d="M4 15l4.5-4.5 3 3L15 10l5 5"/><circle cx="9" cy="9" r="1.3"/></svg>
@@ -60,60 +67,45 @@ const powers = [
 
     <!-- ===== contact ===== -->
     <section>
-      <div class="anime-eyebrow text-sky-600">联系我们</div>
+      <div class="ab-eyebrow">联系我们</div>
-      <h2 class="mt-3 text-2xl md:text-3xl font-black tracking-tight text-[color:var(--fg)]">有问题？来找我们玩～</h2>
+      <h2 class="ab-h2">有问题？来找我们玩～</h2>
-      <p class="text-[color:var(--fg-3)] mt-2 mb-6">合作、反馈，或想加入交流群，随时招呼。</p>
+      <p class="ab-sub">合作、反馈，或想加入交流群，随时招呼。</p>
 
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-3xl">
+      <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
-        <a v-if="contact.shop" :href="contact.shop" target="_blank" rel="noopener"
+        <component :is="c.href ? 'a' : 'div'" v-for="c in contactCards" :key="c.label"
-           class="group anime-card flex items-center justify-between gap-3 p-5">
+                   :href="c.href || undefined" :target="c.href ? '_blank' : undefined" rel="noopener"
-          <div>
+                   class="ct-card" :class="c.href && 'ct-link'">
-            <div class="sticker">商店</div>
+          <div class="ct-top">
-            <div class="text-base font-semibold text-[color:var(--fg)] mt-2 group-hover:text-[var(--m-orange)] transition-colors">前往商店</div>
+            <span class="ct-label">{{ c.label }}</span>
+            <span v-if="c.href" class="ct-arrow" aria-hidden="true">↗</span>
           </div>
-          <span class="text-[color:var(--fg-faint)] group-hover:translate-x-1 transition-transform">→</span>
+          <div class="ct-value">{{ c.value }}</div>
-        </a>
+        </component>
-
-        <a v-if="contact.email" :href="`mailto:${contact.email}`"
-           class="group anime-card p-5">
-          <div class="sticker">邮箱</div>
-          <div class="text-base font-semibold text-[color:var(--fg)] mt-2 break-all group-hover:text-sky-600 transition-colors">{{ contact.email }}</div>
-        </a>
-
-        <a v-if="contact.qq && contact.qq_link" :href="contact.qq_link" target="_blank" rel="noopener"
-           class="group anime-card flex items-center justify-between gap-3 p-5">
-          <div>
-            <div class="sticker">QQ</div>
-            <div class="text-base font-semibold text-[color:var(--fg)] mt-2 tabular-nums break-all group-hover:text-sky-600 transition-colors">{{ contact.qq }}</div>
-          </div>
-          <span class="text-[color:var(--fg-faint)] group-hover:translate-x-1 transition-transform">→</span>
-        </a>
-        <div v-else-if="contact.qq" class="anime-card p-5">
-          <div class="sticker">QQ</div>
-          <div class="text-base font-semibold text-[color:var(--fg)] mt-2 tabular-nums break-all">{{ contact.qq }}</div>
-        </div>
-
-        <a v-if="contact.qq_group && contact.qq_group_link" :href="contact.qq_group_link" target="_blank" rel="noopener"
-           class="group anime-card flex items-center justify-between gap-3 p-5">
-          <div>
-            <div class="sticker">QQ 群</div>
-            <div class="text-base font-semibold text-[color:var(--fg)] mt-2 tabular-nums break-all group-hover:text-emerald-600 transition-colors">{{ contact.qq_group }}</div>
-          </div>
-          <span class="text-[color:var(--fg-faint)] group-hover:translate-x-1 transition-transform">→</span>
-        </a>
-        <div v-else-if="contact.qq_group" class="anime-card p-5">
-          <div class="sticker">QQ 群</div>
-          <div class="text-base font-semibold text-[color:var(--fg)] mt-2 tabular-nums break-all">{{ contact.qq_group }}</div>
-        </div>
       </div>
 
-      <p v-if="!contact.shop && !contact.email && !contact.qq && !contact.qq_group"
+      <p v-if="!contactCards.length" class="ab-sub">管理员尚未配置联系方式。</p>
-         class="text-sm text-[color:var(--fg-3)]">管理员尚未配置联系方式。</p>
     </section>
   </div>
 </template>
 
 <style scoped>
+.ab-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 48px 52px; background: var(--surface-solid); border: 1px solid rgb(24 24 27 / .07); box-shadow: 0 1px 2px rgb(24 24 27 / .03), 0 18px 40px -22px rgb(24 24 27 / .16); }
+.ab-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 300px at 92% 0%, rgba(251, 146, 60, .1), transparent 70%); }
+.ab-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--fg-3); }
+.ab-title { margin-top: 14px; font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.15; letter-spacing: -0.04em; color: var(--fg); }
+.ab-brand { background: linear-gradient(100deg, #18181b, #71717a); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.ab-lead { margin-top: 18px; max-width: 34em; font-size: 16px; line-height: 1.8; color: var(--fg-2); }
+.ab-cta { margin-top: 26px; height: 44px; padding: 0 24px !important; font-size: 14px !important; border-radius: 999px !important; }
+.ab-h2 { margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); }
+.ab-sub { margin-top: 6px; font-size: 14px; color: var(--fg-3); }
+.ct-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 108px; padding: 18px 20px; border-radius: 16px; background: var(--surface-solid); border: 1px solid rgb(24 24 27 / .07); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
+.ct-link:hover { transform: translateY(-3px); border-color: rgb(24 24 27 / .3); box-shadow: 0 14px 30px -16px rgb(24 24 27 / .25); }
+.ct-top { display: flex; align-items: center; justify-content: space-between; }
+.ct-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--fg-3); }
+.ct-arrow { font-size: 15px; color: var(--fg-faint); transition: transform .18s ease, color .18s ease; }
+.ct-link:hover .ct-arrow { transform: translate(2px, -2px); color: var(--fg); }
+.ct-value { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
+@media (max-width: 640px) { .ab-hero { padding: 30px 22px; } }
 /* Floating glass tile cluster — a loose collage of rotated frosted squares. */
 .ab-cluster {
   position: relative;
@@ -125,19 +117,17 @@ const powers = [
   place-items: center;
   width: 5.5rem;
   height: 5.5rem;
-  border: 1px solid var(--glass-border);
+  border: 1px solid rgb(24 24 27 / .07);
   border-radius: 1.2rem;
-  background: var(--surface);
+  background: var(--surface-solid);
-  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 14px 30px -14px rgb(24 24 27 / .25);
-  backdrop-filter: blur(14px);
-  box-shadow: var(--glass-shadow-lg);
   color: var(--m-orange);
 }
 .ab-tile svg { width: 2.3rem; height: 2.3rem; }
 .ab-1 { left: 12%; top: 6%; transform: rotate(-9deg); animation: memphis-float 6s ease-in-out infinite; }
-.ab-2 { right: 14%; top: 0; color: var(--m-orange-2); transform: rotate(7deg); animation: memphis-float 7s ease-in-out infinite reverse; }
+.ab-2 { right: 14%; top: 0; color: #18181b; transform: rotate(7deg); animation: memphis-float 7s ease-in-out infinite reverse; }
-.ab-3 { left: 26%; bottom: 4%; color: var(--m-pink); transform: rotate(5deg); animation: memphis-bounce 4.5s ease-in-out infinite; }
+.ab-3 { left: 26%; bottom: 4%; color: #52525b; transform: rotate(5deg); animation: memphis-bounce 4.5s ease-in-out infinite; }
-.ab-4 { right: 8%; bottom: 14%; color: var(--m-mint); transform: rotate(-6deg); animation: memphis-float 5.5s ease-in-out infinite; }
+.ab-4 { right: 8%; bottom: 14%; color: #18181b; transform: rotate(-6deg); animation: memphis-float 5.5s ease-in-out infinite; }
 .ab-star {
   position: absolute;
   left: 50%; top: 44%;
@@ -146,12 +136,10 @@ const powers = [
   animation: memphis-wiggle 3.5s ease-in-out infinite;
 }
 .power-card {
-  border: 1px solid var(--glass-border);
+  border: 1px solid rgb(24 24 27 / .07);
   border-radius: 1.1rem;
-  background: var(--surface);
+  background: #fff;
-  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 1px 2px rgb(24 24 27 / .03), 0 10px 28px -16px rgb(24 24 27 / .12);
-  backdrop-filter: blur(14px);
-  box-shadow: var(--glass-shadow);
   transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 }
 .power-card:hover { transform: translateY(-3px); border-color: rgb(24 24 27 / 0.45); box-shadow: var(--glass-shadow-lg); }

frontend/src/views/AdminOrdersView.vue

@@ -4,6 +4,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { api } from '../api'
 import Icon from '../components/Icon.vue'
+import SelectMenu from '../components/SelectMenu.vue'
 
 const items = ref([])
 const total = ref(0)
@@ -27,6 +28,8 @@ function fmt(unix) {
   return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
 }
 
+const STATUS_OPTS = [{ value: '', label: '全部状态' }, { value: 'pending', label: '待支付' }, { value: 'paid', label: '已支付' }, { value: 'cancelled', label: '已取消' }]
+const SOURCE_OPTS = [{ value: '', label: '全部来源' }, { value: 'epay', label: '在线充值' }, { value: 'admin', label: '后台充值' }, { value: 'cdk', label: '兑换码' }]
 async function load() {
   loading.value = true
   const qs = new URLSearchParams({ limit: String(pageSize), offset: String((page.value - 1) * pageSize) })
@@ -73,28 +76,30 @@ function goPage(n) {
 
 <template>
   <section class="theme-text space-y-4">
-    <div class="card p-4 flex items-center justify-between gap-3 flex-wrap">
+    <div class="page-head">
       <div>
-        <h2 class="text-sm font-semibold">订单管理</h2>
+        <h2 class="page-title">订单管理</h2>
-        <p class="text-xs text-white/45 mt-0.5">{{ total }} 笔充值订单</p>
+        <p class="page-sub">{{ total }} 笔充值订单</p>
       </div>
-      <div class="flex items-center gap-3 flex-wrap">
+      <div class="page-actions">
-        <div class="flex items-center gap-1.5">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
-          <button v-for="s in [['','全部'],['pending','待支付'],['paid','已支付'],['cancelled','已取消']]" :key="s[0]"
-                  @click="setStatus(s[0])" class="fp" :class="status === s[0] && 'fp-on'">{{ s[1] }}</button>
-        </div>
-        <div class="flex items-center gap-1.5">
-          <button v-for="s in [['','全部来源'],['epay','在线充值'],['admin','后台充值'],['cdk','兑换码']]" :key="s[0]"
-                  @click="setSource(s[0])" class="fp" :class="source === s[0] && 'fp-on'">{{ s[1] }}</button>
-        </div>
-        <input v-model="search" @keyup.enter="doSearch" @change="doSearch"
-               class="field !py-1.5 text-xs !w-52" placeholder="搜索 订单号 / 用户名 / 金额…" />
-        <button @click="load" class="btn-soft"><Icon name="refresh" class="w-3.5 h-3.5" /> 刷新</button>
       </div>
     </div>
 
-    <div v-if="loading && !items.length" class="card text-center text-sm text-white/40 py-20">加载中…</div>
+    <div class="card toolbar">
-    <div v-else-if="!total" class="card text-center text-sm text-white/40 py-20">暂无订单</div>
+      <SelectMenu :model-value="status" compact :options="STATUS_OPTS" @update:model-value="setStatus" />
+      <SelectMenu :model-value="source" compact :options="SOURCE_OPTS" @update:model-value="setSource" />
+      <div class="flex-1 min-w-[200px]">
+        <input v-model="search" @keyup.enter="doSearch" @change="doSearch"
+               class="field" placeholder="搜索 订单号 / 用户名 / 金额…" />
+      </div>
+    </div>
+
+    <div v-if="loading && !items.length" class="card empty"><span class="empty-text">加载中…</span></div>
+    <div v-else-if="!total" class="card empty">
+      <span class="empty-ico"><Icon name="receipt" class="w-6 h-6" /></span>
+      <span class="empty-text">暂无订单</span>
+    </div>
 
     <div v-else class="card overflow-x-auto !p-0">
       <table class="w-full text-sm log-table min-w-[820px]">
@@ -116,7 +121,7 @@ function goPage(n) {
             <td class="px-3 py-3.5 align-middle text-xs text-white/55 whitespace-nowrap">{{ fmt(o.created_at) }}</td>
             <td class="px-3 py-3.5 align-middle text-xs text-white/55 whitespace-nowrap">{{ fmt(o.paid_at) }}</td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums text-white/85">{{ o.source && o.source !== 'epay' ? '—' : '¥' + o.amount }}</td>
-            <td class="px-3 py-3.5 align-middle text-right tabular-nums" :class="o.points < 0 ? 'text-rose-300' : 'text-orange-300'">{{ o.points }}</td>
+            <td class="px-3 py-3.5 align-middle text-right tabular-nums" :class="o.points < 0 ? 'text-rose-600' : 'text-orange-600'">{{ o.points }}</td>
             <td class="px-3 py-3.5 align-middle">
               <span class="chip" :class="chipClass(o.status)">{{ STATUS[o.status] }}<span class="opacity-50 ml-1">· {{ METHOD[o.pay_type] || o.pay_type }}</span></span>
             </td>
@@ -139,18 +144,18 @@ function goPage(n) {
 </template>
 
 <style scoped>
-.fp { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; font-size: 0.72rem; border-radius: 0.55rem; color: rgb(255 255 255 / 0.65); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); transition: background 0.15s, color 0.15s; }
+.fp { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; font-size: 0.72rem; border-radius: 0.55rem; color: var(--fg-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.15s, color 0.15s; }
-.fp:hover { background: rgb(255 255 255 / 0.09); color: white; }
+.fp:hover { background: var(--hover); color: var(--fg); }
-.fp-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
+.fp-on { background: var(--surface-solid); color: rgb(15 23 42); box-shadow: none; }
-.fp-emerald { background: rgb(16 185 129 / 0.22); color: rgb(110 231 183); box-shadow: inset 0 0 0 1px rgb(110 231 183 / 0.45); }
+.fp-emerald { background: rgb(16 185 129 / 0.1); color: #059669; box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.22); }
-.fp-amber { background: rgb(245 158 11 / 0.22); color: rgb(252 211 77); box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.45); }
+.fp-amber { background: rgb(245 158 11 / 0.12); color: #b45309; box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.25); }
-.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; font-size: 0.7rem; font-weight: 500; border-radius: 9999px; white-space: nowrap; background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
+.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; font-size: 0.7rem; font-weight: 500; border-radius: 9999px; white-space: nowrap; background: var(--surface-2); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--hairline); }
 .log-table { border-collapse: separate; border-spacing: 0; }
-.log-row td { border-bottom: 1px solid rgb(255 255 255 / 0.04); transition: background-color 0.15s ease, box-shadow 0.15s ease; }
+.log-row td { border-bottom: 1px solid var(--hairline); transition: background-color 0.15s ease, box-shadow 0.15s ease; }
-.log-row:hover td { background: rgb(255 255 255 / 0.025); }
+.log-row:hover td { background: var(--surface-2); }
 .log-row:hover td:first-child { box-shadow: inset 2px 0 0 rgb(253 186 116 / 0.55); }
 .log-row:last-child td { border-bottom: none; }
-.pg { min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center; border-radius: 0.45rem; color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); transition: background 0.15s, color 0.15s; }
+.pg { min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center; border-radius: 0.45rem; color: var(--fg-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.15s, color 0.15s; }
-.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
+.pg:hover:not(.pg-on) { background: var(--hover); color: var(--fg); }
-.pg-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
+.pg-on { background: var(--surface-solid); color: rgb(15 23 42); box-shadow: none; }
 </style>

frontend/src/views/BannedWordHitsView.vue

@@ -51,15 +51,20 @@ function goPage(n) {
 
 <template>
   <section class="theme-text space-y-4">
-    <div class="card p-4 flex items-center justify-between gap-3 flex-wrap">
+    <div class="page-head">
       <div>
-        <h2 class="text-sm font-semibold">违禁词触发列表</h2>
+        <h2 class="page-title">违禁词触发列表</h2>
-        <p class="text-xs text-white/45 mt-0.5">{{ total }} 条触发记录 · 每次拦截记一条(违禁词 / 用户 / 时间 / 提示词)</p>
+        <p class="page-sub">{{ total }} 条触发记录 · 每次拦截记一条(违禁词 / 用户 / 时间 / 提示词)</p>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+      </div>
+    </div>
+
+    <div class="card toolbar">
+      <div class="flex-1 min-w-[200px]">
         <input v-model="search" @keyup.enter="doSearch" @change="doSearch"
-               class="field !py-1.5 text-xs !w-56" placeholder="搜索 违禁词 / 用户名 / 提示词…" />
+               class="field" placeholder="搜索 违禁词 / 用户名 / 提示词…" />
-        <button @click="load" class="btn-soft"><Icon name="refresh" class="w-3.5 h-3.5" /> 刷新</button>
       </div>
     </div>
 
@@ -80,10 +85,13 @@ function goPage(n) {
           </tr>
         </thead>
         <tbody>
-          <tr v-if="loading && !items.length"><td colspan="4" class="text-center text-xs text-white/40 py-10">加载中…</td></tr>
+          <tr v-if="loading && !items.length"><td colspan="4"><div class="empty"><span class="empty-text">加载中…</span></div></td></tr>
-          <tr v-else-if="!items.length"><td colspan="4" class="text-center text-xs text-white/40 py-10">{{ search.trim() ? '没有匹配的记录' : '还没有触发记录' }}</td></tr>
+          <tr v-else-if="!items.length"><td colspan="4"><div class="empty">
+            <span class="empty-ico"><Icon name="ban" class="w-6 h-6" /></span>
+            <span class="empty-text">{{ search.trim() ? '没有匹配的记录' : '还没有触发记录' }}</span>
+          </div></td></tr>
           <tr v-for="h in items" :key="h.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors align-top">
-            <td class="px-5 py-3.5 text-sm font-medium text-rose-300">{{ h.word }}</td>
+            <td class="px-5 py-3.5 text-sm font-medium text-rose-600">{{ h.word }}</td>
             <td class="px-3 py-3.5">
               <div class="text-sm text-white/85 truncate" :title="h.user_name">{{ h.user_name || '—' }}</div>
             </td>
@@ -108,8 +116,8 @@ function goPage(n) {
 </template>
 
 <style scoped>
-.pg { min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center; border-radius: 0.45rem; color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); transition: background 0.15s, color 0.15s; }
+.pg { min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center; border-radius: 0.45rem; color: var(--fg-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.15s, color 0.15s; }
-.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
+.pg:hover:not(.pg-on) { background: var(--hover); color: var(--fg); }
-.pg-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
+.pg-on { background: var(--surface-solid); color: rgb(15 23 42); box-shadow: none; }
 .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 </style>

frontend/src/views/BannedWordsView.vue

@@ -117,18 +117,24 @@ onMounted(load)
 
 <template>
   <section class="theme-text space-y-4">
-    <div class="card p-4 flex items-center justify-between gap-3 flex-wrap">
+    <div class="page-head">
       <div>
-        <h2 class="text-sm font-semibold">违禁词管理</h2>
+        <h2 class="page-title">违禁词管理</h2>
-        <p class="text-xs text-white/45 mt-0.5">提示词包含违禁词的生成请求(画图台 + API)会被<strong class="text-white/70">直接拦截</strong>,并累计触发次数(见用户管理)。匹配不区分大小写。</p>
+        <p class="page-sub">提示词包含违禁词的生成请求(画图台 + API)会被<strong>直接拦截</strong>,并累计触发次数(见用户管理)。匹配不区分大小写。</p>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+      </div>
+    </div>
+
+    <div class="card toolbar">
+      <input v-model="newWord" @keyup.enter="add" class="field w-72" placeholder="输入违禁词后回车添加" />
+      <div class="ml-auto flex items-center gap-2">
         <button v-if="selected.size" @click="delSelected" class="btn-soft danger shrink-0" title="删除选中的违禁词">
           <Icon name="trash" class="w-3.5 h-3.5" /> 删除选中 ({{ selected.size }})
         </button>
-        <input v-model="newWord" @keyup.enter="add" class="field !py-1.5 text-xs w-52" placeholder="输入违禁词后回车" />
-        <button @click="add" class="btn-primary shrink-0">+ 添加</button>
         <button @click="importOpen = true" class="btn-soft shrink-0">批量导入</button>
+        <button @click="add" class="btn-primary shrink-0">+ 添加</button>
       </div>
     </div>
 
@@ -146,14 +152,17 @@ onMounted(load)
           </tr>
         </thead>
         <tbody>
-          <tr v-if="loading && !items.length"><td colspan="5" class="text-center text-xs text-white/40 py-10">加载中…</td></tr>
+          <tr v-if="loading && !items.length"><td colspan="5"><div class="empty"><span class="empty-text">加载中…</span></div></td></tr>
-          <tr v-else-if="!items.length"><td colspan="5" class="text-center text-xs text-white/40 py-10">还没有违禁词</td></tr>
+          <tr v-else-if="!items.length"><td colspan="5"><div class="empty">
-          <tr v-for="w in pagedItems" :key="w.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
+            <span class="empty-ico"><Icon name="ban" class="w-6 h-6" /></span>
+            <span class="empty-text">还没有违禁词</span>
+          </div></td></tr>
+          <tr v-for="w in pagedItems" :key="w.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors" :class="selected.has(w.id) && 'row-on'">
             <td class="px-3 py-3.5 align-middle text-center">
               <input type="checkbox" :checked="selected.has(w.id)" @change="toggleSelect(w.id)" @click.stop class="chk" />
             </td>
             <td class="px-5 py-3.5 align-middle text-sm font-medium text-white/90">{{ w.word }}</td>
-            <td class="px-3 py-3.5 align-middle text-right tabular-nums" :class="w.hits > 0 ? 'text-rose-300' : 'text-white/50'">{{ w.hits }}</td>
+            <td class="px-3 py-3.5 align-middle text-right tabular-nums" :class="w.hits > 0 ? 'text-rose-600' : 'text-white/50'">{{ w.hits }}</td>
             <td class="px-3 py-3.5 align-middle text-xs text-white/50">{{ new Date(w.created_at).toLocaleString() }}</td>
             <td class="px-3 py-3.5 align-middle text-right">
               <button @click="del(w)" class="act danger" title="删除"><Icon name="trash" class="w-3.5 h-3.5" /></button>
@@ -193,14 +202,14 @@ onMounted(load)
 <style scoped>
 .act {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 1.9rem; height: 1.9rem; border-radius: 0.5rem;
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
-  color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.04);
+  color: var(--fg-3); background: var(--surface-solid);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
+  box-shadow: inset 0 0 0 1px var(--hairline);
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.act:hover { background: rgb(255 255 255 / 0.1); color: white; }
+.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
-.act.danger { color: rgb(253 164 175); background: rgb(244 63 94 / 0.12); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3); }
+.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
-.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
+
 .btn-soft.danger {
   color: rgb(253 164 175);
   background: rgb(244 63 94 / 0.12);
@@ -211,9 +220,9 @@ onMounted(load)
   background: rgb(244 63 94 / 0.25);
 }
 .chk { accent-color: rgb(244 63 94); width: 0.9rem; height: 0.9rem; cursor: pointer; }
-.pg { min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center; border-radius: 0.45rem; color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); transition: background 0.15s, color 0.15s; }
+.pg { min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center; border-radius: 0.45rem; color: var(--fg-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.15s, color 0.15s; }
-.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
+.pg:hover:not(.pg-on) { background: var(--hover); color: var(--fg); }
-.pg-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
+.pg-on { background: var(--surface-solid); color: rgb(15 23 42); box-shadow: none; }
 .fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>

frontend/src/views/CanvasView.vue

@@ -1142,7 +1142,7 @@ const saveLabel = computed(() => ({
   box-shadow: 0 4px 14px rgb(229 72 77 / 0.25);
 }
 .cv-btn--accent {
-  background: #fff;
+  background: var(--surface-solid);
   border-color: rgb(24 24 27 / 0.28);
   color: #18181b;
 }
@@ -1193,7 +1193,7 @@ const saveLabel = computed(() => ({
   padding: 6px;
   border-radius: 16px;
   border: 1px solid rgb(24 24 27 / 0.08);
-  background: rgb(255 255 255 / 0.92);
+  background: var(--surface-solid);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   box-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 12px 32px -12px rgb(24 24 27 / 0.2);
@@ -1221,7 +1221,7 @@ const saveLabel = computed(() => ({
   padding: 6px;
   border-radius: 18px;
   border: 1px solid rgb(24 24 27 / 0.08);
-  background: rgb(255 255 255 / 0.92);
+  background: var(--surface-solid);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   box-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 12px 32px -12px rgb(24 24 27 / 0.2);

frontend/src/views/CdksView.vue

@@ -5,6 +5,7 @@ import { ref, computed, onMounted, watch } from 'vue'
 import { api, jsonBody } from '../api'
 import { fmtTs } from '../utils/format'
 import Icon from '../components/Icon.vue'
+import SelectMenu from '../components/SelectMenu.vue'
 
 const items = ref([])
 const stats = ref({ total: 0, active: 0, redeemed: 0, active_amount: 0, redeemed_amount: 0 })
@@ -14,7 +15,9 @@ const loading = ref(false)
 const statusFilter = ref('')   // '' | 'active'(未使用) | 'used'(已使用)
 const typeFilter = ref('')     // '' | 'normal' | 'marketing'
 const search = ref('')
-function setFilter(fn) { fn(); resetAndLoad() }
+const TYPE_OPTS = [{ value: '', label: '全部类型' }, { value: 'normal', label: '普通' }, { value: 'marketing', label: '营销' }]
+const STATUS_OPTS = [{ value: '', label: '所有状态' }, { value: 'active', label: '未使用' }, { value: 'used', label: '已使用' }]
+watch([typeFilter, statusFilter], resetAndLoad)
 function resetAndLoad() {
   if (page.value !== 1) page.value = 1
   else load()
@@ -140,23 +143,27 @@ const pageNumbers = computed(() => {
 
 <template>
   <section class="space-y-4">
+    <div class="page-head">
+      <h2 class="page-title">兑换码管理</h2>
+      <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+    </div>
     <!-- KPI strip — same shape as LogsView / InvitesAdminView -->
     <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-white/45">总数</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">总数</div>
         <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.total }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-emerald-300/80">未使用</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">未使用</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-emerald-300">{{ stats.active }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.active }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-white/35">已使用</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">已使用</div>
         <div class="text-2xl font-semibold mt-1 tabular-nums text-white/60">{{ stats.redeemed }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-rose-300/80">未使用面额</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">未使用面额</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-rose-300">{{ Number(stats.active_amount || 0).toLocaleString('en-US') }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ Number(stats.active_amount || 0).toLocaleString('en-US') }}</div>
       </div>
     </div>
 
@@ -183,7 +190,7 @@ const pageNumbers = computed(() => {
         </div>
         <button @click="generate" class="btn-primary"><Icon name="plus" class="w-3.5 h-3.5" /> 生成</button>
       </div>
-      <p v-if="form.type === 'marketing'" class="text-[11px] text-rose-300/80 mt-2">营销兑换码:同一批次每个用户只能兑换一次。</p>
+      <p v-if="form.type === 'marketing'" class="text-[11px] text-rose-600 mt-2">营销兑换码:同一批次每个用户只能兑换一次。</p>
 
       <!-- last batch -->
       <div v-if="lastBatch.length" class="mt-4 rounded-xl bg-white/[0.04] ring-1 ring-white/10 p-4">
@@ -198,38 +205,28 @@ const pageNumbers = computed(() => {
     </div>
 
     <!-- Toolbar -->
-    <div class="card p-3 flex items-center gap-3 flex-wrap">
+    <div class="card toolbar">
-      <div class="flex items-center gap-1">
+      <SelectMenu v-model="typeFilter" compact :options="TYPE_OPTS" />
-        <button @click="setFilter(() => typeFilter = '')" class="fp" :class="typeFilter === '' && 'fp-on'">全部类型</button>
+      <SelectMenu v-model="statusFilter" compact :options="STATUS_OPTS" />
-        <button @click="setFilter(() => typeFilter = 'normal')" class="fp" :class="typeFilter === 'normal' && 'fp-on'">普通</button>
-        <button @click="setFilter(() => typeFilter = 'marketing')" class="fp" :class="typeFilter === 'marketing' && 'fp-rose'">
-          <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>营销
-        </button>
-      </div>
-      <div class="w-px h-5 bg-white/10"></div>
-      <div class="flex items-center gap-1">
-        <button @click="setFilter(() => statusFilter = '')" class="fp" :class="statusFilter === '' && 'fp-on'">所有状态</button>
-        <button @click="setFilter(() => statusFilter = 'active')" class="fp" :class="statusFilter === 'active' && 'fp-emerald'">
-          <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>未使用
-        </button>
-        <button @click="setFilter(() => statusFilter = 'used')" class="fp" :class="statusFilter === 'used' && 'fp-on'">已使用</button>
-      </div>
       <div class="flex-1 min-w-[160px]">
         <input v-model="search" class="field !py-1.5 text-xs" placeholder="搜索兑换码…" />
       </div>
       <button v-if="selected.size" @click="delSelected" class="btn-soft danger" title="删除选中的兑换码">
         <Icon name="trash" class="w-3.5 h-3.5" /> 删除选中 ({{ selected.size }})
       </button>
-      <button @click="load" class="btn-soft">
-        <Icon name="refresh" class="w-3.5 h-3.5" /> 刷新
-      </button>
     </div>
 
     <!-- table -->
     <div class="card overflow-hidden">
-      <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-16">加载中…</div>
+      <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
-      <div v-else-if="!items.length && !stats.total" class="text-center text-sm text-white/40 py-16">还没有兑换码</div>
+      <div v-else-if="!items.length && !stats.total" class="empty">
-      <div v-else-if="!items.length" class="text-center text-sm text-white/40 py-16">没有匹配的兑换码</div>
+        <span class="empty-ico"><Icon name="key" class="w-6 h-6" /></span>
+        <span class="empty-text">还没有兑换码</span>
+      </div>
+      <div v-else-if="!items.length" class="empty">
+        <span class="empty-ico"><Icon name="key" class="w-6 h-6" /></span>
+        <span class="empty-text">没有匹配的兑换码</span>
+      </div>
       <table v-else class="w-full text-sm">
         <colgroup>
           <col class="w-9" />
@@ -258,7 +255,8 @@ const pageNumbers = computed(() => {
         </thead>
         <tbody>
           <tr v-for="c in pagedItems" :key="c.code"
-              class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
+              class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors"
+              :class="selected.has(c.code) && 'row-on'">
             <td class="px-3 py-3.5 align-middle text-center">
               <input type="checkbox" :checked="selected.has(c.code)" @change="toggleSelect(c.code)" @click.stop
                      class="chk" />
@@ -266,7 +264,7 @@ const pageNumbers = computed(() => {
             <td class="px-5 py-3.5 align-middle font-mono text-xs text-white/90 truncate" :title="c.code">
               <span class="inline-flex items-center gap-2">
                 <span class="truncate">{{ c.code }}</span>
-                <span v-if="c.type === 'marketing'" class="shrink-0 inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-sans font-medium bg-rose-500/15 text-rose-300 ring-1 ring-rose-400/25">营销</span>
+                <span v-if="c.type === 'marketing'" class="shrink-0 inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-sans font-medium bg-rose-500/15 text-rose-600 ring-1 ring-rose-500/25">营销</span>
               </span>
             </td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums text-white/85 whitespace-nowrap">
@@ -275,10 +273,10 @@ const pageNumbers = computed(() => {
             <td class="px-3 py-3.5 align-middle">
               <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1"
                     :class="c.status === 'active'
-                      ? 'bg-emerald-500/10 text-emerald-300 ring-emerald-400/30'
+                      ? 'bg-emerald-500/10 text-emerald-600 ring-emerald-500/25'
                       : 'bg-white/[0.06] text-white/55 ring-white/15'">
                 <span class="w-1.5 h-1.5 rounded-full"
-                      :class="c.status === 'active' ? 'bg-emerald-400' : 'bg-slate-400'"></span>
+                      :class="c.status === 'active' ? 'bg-emerald-500' : 'bg-slate-400'"></span>
                 {{ c.status === 'active' ? '未使用' : '已使用' }}
               </span>
             </td>
@@ -334,42 +332,27 @@ const pageNumbers = computed(() => {
 /* row icon action buttons — mirror 账号管理 for a consistent look */
 .act {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 1.9rem; height: 1.9rem;
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
-  border-radius: 0.5rem;
+  color: var(--fg-3); background: var(--surface-solid);
-  color: rgb(255 255 255 / 0.7);
+  box-shadow: inset 0 0 0 1px var(--hairline);
-  background: rgb(255 255 255 / 0.04);
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
-  transition: background 0.15s, color 0.15s;
 }
-.act:hover { background: rgb(255 255 255 / 0.1); color: white; }
+.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
-.act.danger {
+.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
-  color: rgb(253 164 175);
-  background: rgb(244 63 94 / 0.12);
-  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
-}
-.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
 
 .fp {
   display: inline-flex; align-items: center; gap: 0.35rem;
   padding: 0.35rem 0.7rem; font-size: 0.72rem;
   border-radius: 0.55rem;
-  color: rgb(255 255 255 / 0.65);
+  color: var(--fg-2);
-  background: rgb(255 255 255 / 0.05);
+  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
+  box-shadow: inset 0 0 0 1px var(--hairline);
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.fp:hover { background: rgb(255 255 255 / 0.09); color: white; }
+.fp:hover { background: var(--hover); color: var(--fg); }
-.fp-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
+.fp-on { background: var(--surface-solid); color: rgb(15 23 42); box-shadow: none; }
-.fp-emerald {
+.fp-emerald { background: rgb(16 185 129 / 0.1); color: #059669; box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.22); }
-  background: rgb(16 185 129 / 0.22);
+.fp-rose { background: rgb(239 68 68 / 0.09); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(239 68 68 / 0.2); }
-  color: rgb(110 231 183);
-  box-shadow: inset 0 0 0 1px rgb(110 231 183 / 0.45);
-}
-.fp-rose {
-  background: rgb(244 63 94 / 0.22);
-  color: rgb(254 205 211);
-  box-shadow: inset 0 0 0 1px rgb(254 205 211 / 0.45);
-}
 
 .pg {
   min-width: 1.75rem;
@@ -378,14 +361,14 @@ const pageNumbers = computed(() => {
   font-weight: 500;
   text-align: center;
   border-radius: 0.45rem;
-  color: rgb(255 255 255 / 0.7);
+  color: var(--fg-2);
-  background: rgb(255 255 255 / 0.04);
+  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
+  box-shadow: inset 0 0 0 1px var(--hairline);
   transition: background 0.15s, color 0.15s;
 }
-.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
+.pg:hover:not(.pg-on) { background: var(--hover); color: var(--fg); }
 .pg-on {
-  background: rgb(255 255 255 / 0.92);
+  background: var(--surface-solid);
   color: rgb(15 23 42);
   box-shadow: none;
 }

frontend/src/views/ChannelsView.vue

@@ -126,8 +126,7 @@ function specText(s) {
   const parts = []
   if (s.qualities?.length) parts.push(s.qualities.join('/'))
   if (s.duration) {
-    if (s.duration.mode === 'fixed') parts.push(`固定 ${s.duration.seconds}s`)
+    if (s.duration.mode === 'range') parts.push(`${s.duration.min}-${s.duration.max}s`)
-    else if (s.duration.mode === 'range') parts.push(`${s.duration.min}-${s.duration.max}s`)
     else if (s.duration.mode === 'options') parts.push((s.duration.options || []).map((d) => `${d}s`).join('/'))
   }
   const refs = []
@@ -143,19 +142,21 @@ onMounted(load)
 
 <template>
   <section class="space-y-4">
-    <div class="card p-4 flex items-center justify-between gap-3 flex-wrap">
+    <div class="page-head">
       <div>
-        <div class="text-sm font-medium">渠道</div>
+        <h2 class="page-title">渠道管理</h2>
-        <p class="text-xs text-white/45 mt-0.5">同构 /v1 协议上游实例 · 保存时自动同步上游模型 · 余额实时探测</p>
+        <p class="page-sub">同构 /v1 协议上游实例 · 保存时自动同步上游模型 · 余额实时探测</p>
+      </div>
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
       </div>
-      <button @click="openAdd" class="btn-primary">
-        <Icon name="plus" class="w-4 h-4" /> 添加渠道
-      </button>
     </div>
 
-    <p v-if="err" class="text-xs text-rose-300">{{ err }}</p>
+    <div class="page-bar"><button @click="openAdd" class="btn-primary"><Icon name="plus" class="w-4 h-4" /> 添加渠道</button></div>
-    <p v-if="warn" class="text-xs text-amber-300">{{ warn }}</p>
+
-    <p v-if="okMsg" class="text-xs text-emerald-300">{{ okMsg }}</p>
+    <p v-if="err" class="text-xs text-rose-600">{{ err }}</p>
+    <p v-if="warn" class="text-xs text-amber-600">{{ warn }}</p>
+    <p v-if="okMsg" class="text-xs text-emerald-600">{{ okMsg }}</p>
 
     <div class="card overflow-hidden">
       <div class="overflow-x-auto">
@@ -183,15 +184,15 @@ onMounted(load)
               </td>
               <td class="tabular-nums">{{ c.concurrency || '不限' }}</td>
               <td class="tabular-nums">{{ c.weight || 1 }}</td>
-              <td class="text-right tabular-nums" :class="c.running_count > 0 ? 'text-emerald-300' : ''">{{ c.running_count || 0 }}</td>
+              <td class="text-right tabular-nums" :class="c.running_count > 0 ? 'text-emerald-600' : ''">{{ c.running_count || 0 }}</td>
               <td class="text-right tabular-nums">{{ (c.success_total || 0).toLocaleString() }}</td>
-              <td class="text-right tabular-nums" :class="c.fail_count > 0 ? 'text-rose-300' : ''">{{ (c.fail_count || 0).toLocaleString() }}</td>
+              <td class="text-right tabular-nums" :class="c.fail_count > 0 ? 'text-rose-600' : ''">{{ (c.fail_count || 0).toLocaleString() }}</td>
               <td class="text-right tabular-nums">{{ (c.used_credits || 0).toLocaleString() }}</td>
               <td class="text-right tabular-nums">{{ c.upstream_balance == null ? '-' : c.upstream_balance.toLocaleString() }}</td>
               <td>
                 <button @click="toggle(c)" class="inline-flex items-center gap-1.5 text-xs"
-                        :class="c.enabled ? 'text-emerald-300' : 'text-white/40'">
+                        :class="c.enabled ? 'text-emerald-600' : 'text-white/40'">
-                  <span class="w-1.5 h-1.5 rounded-full" :class="c.enabled ? 'bg-emerald-400' : 'bg-white/25'"></span>
+                  <span class="w-1.5 h-1.5 rounded-full" :class="c.enabled ? 'bg-emerald-500' : 'bg-white/25'"></span>
                   {{ c.enabled ? '启用' : '停用' }}
                 </button>
               </td>
@@ -202,8 +203,12 @@ onMounted(load)
                 <button @click="del(c)" class="op danger" title="删除"><Icon name="trash" class="w-3.5 h-3.5" /></button>
               </td>
             </tr>
-            <tr v-if="loading"><td colspan="11" class="py-10 text-center text-white/40 text-sm">正在加载渠道…</td></tr>
+            <tr v-if="loading"><td colspan="11"><div class="empty"><span class="empty-text">正在加载渠道…</span></div></td></tr>
-            <tr v-else-if="!channels.length"><td colspan="11" class="py-10 text-center text-white/40 text-sm">没有渠道，点右上角「添加渠道」接入上游实例</td></tr>
+            <tr v-else-if="!channels.length"><td colspan="11"><div class="empty">
+              <span class="empty-ico"><Icon name="plug" class="w-6 h-6" /></span>
+              <span class="empty-text">还没有渠道</span>
+              <span class="empty-sub">点上方「添加渠道」接入上游实例</span>
+            </div></td></tr>
           </tbody>
         </table>
       </div>
@@ -222,12 +227,12 @@ onMounted(load)
             <input v-model.trim="form.name" type="text" maxlength="64" class="field" placeholder="例如：主站" />
           </div>
           <div>
-            <label class="lbl">上游地址 <span class="text-rose-300">*</span></label>
+            <label class="lbl">上游地址 <span class="text-rose-600">*</span></label>
             <input v-model.trim="form.base_url" type="text" maxlength="300" class="field" placeholder="https://example.com" />
             <p class="mt-1 text-[11px] text-white/35">同构 /v1 协议实例的站点地址，不带路径</p>
           </div>
           <div>
-            <label class="lbl">API Key <span v-if="!form.id" class="text-rose-300">*</span></label>
+            <label class="lbl">API Key <span v-if="!form.id" class="text-rose-600">*</span></label>
             <input v-model.trim="form.api_key" type="text" class="field" :placeholder="form.id ? '留空保持不变' : 'vk_…'" autocomplete="off" />
             <p class="mt-1 text-[11px] text-white/35">上游站点的用户 API Key（vk_ 前缀），密文存储，不回显</p>
           </div>
@@ -245,13 +250,12 @@ onMounted(load)
           </div>
           <div class="flex items-center gap-3">
             <label class="lbl !mb-0">状态</label>
-            <button type="button" @click="form.enabled = !form.enabled" class="inline-flex items-center gap-1.5 text-xs"
+            <button type="button" @click="form.enabled = !form.enabled" class="sw shrink-0" :class="{ 'sw-on': form.enabled }" role="switch" :aria-checked="form.enabled">
-                    :class="form.enabled ? 'text-emerald-300' : 'text-white/40'">
+              <span class="sw-thumb"></span>
-              <span class="w-1.5 h-1.5 rounded-full" :class="form.enabled ? 'bg-emerald-400' : 'bg-white/25'"></span>
-              {{ form.enabled ? '已启用' : '已停用' }}
             </button>
+            <span class="text-xs" :class="form.enabled ? 'text-emerald-600' : 'text-[var(--fg-3)]'">{{ form.enabled ? '已启用' : '已停用' }}</span>
           </div>
-          <p v-if="formErr" class="text-xs text-rose-300">{{ formErr }}</p>
+          <p v-if="formErr" class="text-xs text-rose-600">{{ formErr }}</p>
         </div>
         <div class="px-5 py-4 border-t border-white/[0.06] flex justify-end gap-2">
           <button @click="form = null" class="btn-ghost">取消</button>
@@ -268,18 +272,18 @@ onMounted(load)
           <button @click="fetchTarget = null" class="text-white/40 hover:text-white transition-colors"><Icon name="close" class="w-5 h-5" /></button>
         </div>
         <div class="p-5">
-          <div v-if="fetching" class="py-10 text-center text-white/40 text-sm">正在从上游拉取模型列表…</div>
+          <div v-if="fetching" class="empty !py-10"><span class="empty-text">正在从上游拉取模型列表…</span></div>
           <template v-else>
             <p class="text-xs text-white/45 mb-3 leading-relaxed">开启的模型会同步到本站模型列表，参数随上游带入；到「模型管理」配价后上架。别名即本站模型标识，留空 = 与上游同名。</p>
-            <p v-if="fetchErr" class="text-xs text-rose-300 mb-3">{{ fetchErr }}</p>
+            <p v-if="fetchErr" class="text-xs text-rose-600 mb-3">{{ fetchErr }}</p>
-            <div v-if="!specs.length" class="py-10 text-center text-white/40 text-sm">上游没有可售模型（模型需在上游已配价）</div>
+            <div v-if="!specs.length" class="empty !py-10"><span class="empty-text">上游没有可售模型（模型需在上游已配价）</span></div>
             <div v-else class="space-y-2 max-h-[400px] overflow-y-auto p-0.5">
               <div v-for="s in specs" :key="s.id" @click="togglePick(s.id)"
                    class="p-3 rounded-xl ring-1 ring-white/10 bg-white/[0.02] hover:bg-white/[0.04] hover:ring-white/20 cursor-pointer transition-all space-y-2"
                    :class="!picked.has(s.id) && 'opacity-45'">
                 <div class="flex items-center gap-2.5 min-w-0">
                   <span class="w-2 h-2 rounded-full shrink-0"
-                        :class="s.kind === 'video' ? 'bg-sky-400' : s.kind === 'text' ? 'bg-amber-400' : 'bg-zinc-500'"></span>
+                        :class="s.kind === 'video' ? 'bg-sky-500' : s.kind === 'text' ? 'bg-amber-500' : 'bg-zinc-500'"></span>
                   <code class="font-mono text-[13px] font-semibold text-white/90 truncate">{{ s.id }}</code>
                   <span class="text-[11px] font-semibold text-white/40 shrink-0">{{ KIND_LABEL[s.kind] || s.kind }}</span>
                   <button type="button" class="ml-auto sw" :class="picked.has(s.id) && 'sw-on'"
@@ -312,20 +316,20 @@ onMounted(load)
 
 <style scoped>
 .tbl { width: 100%; border-collapse: collapse; min-width: 1000px; }
-.tbl thead th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; color: rgb(255 255 255 / 0.45); border-bottom: 1px solid rgb(255 255 255 / 0.06); white-space: nowrap; }
+.tbl thead th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; color: var(--fg-3); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
-.tbl tbody td { padding: 10px 14px; border-bottom: 1px solid rgb(255 255 255 / 0.04); font-size: 12.5px; color: rgb(255 255 255 / 0.7); vertical-align: middle; }
+.tbl tbody td { padding: 10px 14px; border-bottom: 1px solid var(--hairline); font-size: 12.5px; color: var(--fg-2); vertical-align: middle; }
 .tbl tbody tr:last-child td { border-bottom: none; }
-.tbl tbody tr:hover { background: rgb(255 255 255 / 0.02); }
+.tbl tbody tr:hover { background: var(--surface-2); }
 
-.lbl { display: block; font-size: 0.72rem; font-weight: 500; color: rgb(255 255 255 / 0.55); margin-bottom: 0.4rem; }
+.lbl { display: block; font-size: 0.72rem; font-weight: 500; color: var(--fg-3); margin-bottom: 0.4rem; }
 
-.op { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 7px; margin-left: 4px; border-radius: 7px; background: rgb(255 255 255 / 0.05); color: rgb(255 255 255 / 0.6); }
+.op { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; margin-left: 4px; border-radius: 8px; background: var(--surface-solid); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
-.op:hover { background: rgb(255 255 255 / 0.1); color: white; }
+.op:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
-.op.danger:hover { background: rgb(244 63 94 / 0.15); color: rgb(251 113 133); }
+.op.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
 
 /* iOS-style switch for 模型开关 in the sync modal */
-.sw { position: relative; width: 2rem; height: 1.15rem; border-radius: 9999px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); transition: background 0.18s ease; flex-shrink: 0; }
+.sw { position: relative; width: 2rem; height: 1.15rem; border-radius: 9999px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.18s ease; flex-shrink: 0; }
-.sw-thumb { position: absolute; top: 2px; left: 2px; width: calc(1.15rem - 4px); height: calc(1.15rem - 4px); border-radius: 9999px; background: white; box-shadow: 0 1px 2px rgb(15 23 42 / 0.3); transition: transform 0.18s ease; }
+.sw-thumb { position: absolute; top: 2px; left: 2px; width: calc(1.15rem - 4px); height: calc(1.15rem - 4px); border-radius: 9999px; background: var(--surface-solid); box-shadow: 0 1px 2px rgb(15 23 42 / 0.3); transition: transform 0.18s ease; }
-.sw-on { background: rgb(16 185 129 / 0.7); box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.5); }
+.sw-on { background: #18181b; box-shadow: inset 0 0 0 1px #18181b; }
 .sw-on .sw-thumb { transform: translateX(calc(2rem - 1.15rem)); }
 </style>

frontend/src/views/ConcurrencyView.vue

@@ -51,14 +51,18 @@ onMounted(load)
 
 <template>
   <section class="theme-text space-y-4">
-    <div class="card p-4 flex items-center justify-between gap-3 flex-wrap">
+    <div class="page-head">
       <div>
-        <h2 class="text-sm font-semibold">并发分组</h2>
+        <h2 class="page-title">并发分组</h2>
-        <p class="text-xs text-white/45 mt-0.5">每个分组限制成员用户的<strong class="text-white/70">同时生成数</strong>(画图台 + API key 合计)。<strong class="text-white/70">0 = 不限制</strong>。新用户自动进入「默认注册分组」。</p>
+        <p class="page-sub">每个分组限制成员用户的<strong>同时生成数</strong>(画图台 + API key 合计)。<strong>0 = 不限制</strong>。新用户自动进入「默认注册分组」。</p>
+      </div>
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
       </div>
-      <button @click="openNew" class="btn-primary shrink-0">+ 新增分组</button>
     </div>
 
+    <div class="page-bar"><button @click="openNew" class="btn-primary shrink-0"><Icon name="plus" class="w-4 h-4" /> 新增分组</button></div>
+
     <div class="card overflow-hidden">
       <table class="w-full text-sm">
         <thead>
@@ -71,18 +75,21 @@ onMounted(load)
           </tr>
         </thead>
         <tbody>
-          <tr v-if="loading"><td colspan="5" class="text-center text-xs text-white/40 py-10">加载中…</td></tr>
+          <tr v-if="loading"><td colspan="5"><div class="empty"><span class="empty-text">加载中…</span></div></td></tr>
-          <tr v-else-if="!items.length"><td colspan="5" class="text-center text-xs text-white/40 py-10">还没有分组</td></tr>
+          <tr v-else-if="!items.length"><td colspan="5"><div class="empty">
+            <span class="empty-ico"><Icon name="layers" class="w-6 h-6" /></span>
+            <span class="empty-text">还没有分组</span>
+          </div></td></tr>
           <tr v-for="g in items" :key="g.id" class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
             <td class="px-5 py-3.5 align-middle text-sm font-medium text-white/90">{{ g.name }}</td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums">
               <span v-if="g.max_concurrency > 0" class="text-white/85">{{ g.max_concurrency }}</span>
-              <span v-else class="text-emerald-300/90">不限制</span>
+              <span v-else class="text-emerald-600">不限制</span>
             </td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums text-white/70">{{ g.user_count }}</td>
             <td class="px-3 py-3.5 align-middle">
-              <span v-if="g.is_default" class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium bg-rose-500/10 text-rose-300 ring-1 ring-rose-400/30">
+              <span v-if="g.is_default" class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium bg-rose-500/10 text-rose-600 ring-1 ring-rose-500/25">
-                <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span> 默认
+                <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span> 默认
               </span>
               <button v-else @click="setDefault(g)" class="btn-soft text-xs">设为默认</button>
             </td>
@@ -130,14 +137,14 @@ onMounted(load)
 <style scoped>
 .act {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 1.9rem; height: 1.9rem; border-radius: 0.5rem;
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
-  color: rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.04);
+  color: var(--fg-3); background: var(--surface-solid);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
+  box-shadow: inset 0 0 0 1px var(--hairline);
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.act:hover { background: rgb(255 255 255 / 0.1); color: white; }
+.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
-.act.danger { color: rgb(253 164 175); background: rgb(244 63 94 / 0.12); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3); }
+.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
-.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
+
 .fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>

frontend/src/views/ConfigView.vue

@@ -293,11 +293,20 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
 
 <template>
   <section class="space-y-5">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">系统配置</h2>
+        <p class="page-sub">网站、支付、注册、邮件、代理等全站设置</p>
+      </div>
+      <div class="page-actions">
+
+      </div>
+    </div>
     <!-- site -->
     <div class="card p-5">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-sm font-semibold">网站</h2>
-        <span v-if="siteSaved" class="text-xs text-emerald-300">已保存 ✓</span>
+        <span v-if="siteSaved" class="text-xs text-emerald-600">已保存 ✓</span>
       </div>
       <div class="space-y-3">
         <label class="row">
@@ -310,7 +319,7 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
             <div @click="pickLogo" @drop="onLogoDrop" @dragover.prevent="logoDragOver = true" @dragleave="logoDragOver = false"
                  title="点击或拖拽图片替换"
                  class="w-16 h-16 rounded-xl grid place-items-center overflow-hidden shrink-0 cursor-pointer transition-all"
-                 :class="logoDragOver ? 'ring-2 ring-sky-400 bg-sky-50/40' : ''">
+                 :class="logoDragOver ? 'ring-2 ring-sky-500/25 bg-sky-50/40' : ''">
               <img v-if="logoPreview" :src="logoPreview" class="w-full h-full object-cover" />
               <Logo v-else :size="64" class="w-full h-full" />
             </div>
@@ -357,7 +366,7 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
     <div class="card p-5">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-sm font-semibold">注册与登录</h2>
-        <span v-if="regSaved" class="text-xs text-emerald-300">已保存 ✓</span>
+        <span v-if="regSaved" class="text-xs text-emerald-600">已保存 ✓</span>
       </div>
       <div class="space-y-3">
         <label class="row">
@@ -400,7 +409,7 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
     <div class="card p-5">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-sm font-semibold">邮件服务 (SMTP)</h2>
-        <span v-if="smtpSaved" class="text-xs text-emerald-300">已保存 ✓</span>
+        <span v-if="smtpSaved" class="text-xs text-emerald-600">已保存 ✓</span>
       </div>
       <p class="text-xs text-slate-400 mb-4">用于发送注册 / 找回密码的验证码邮件。465 端口自动用 SSL,其余端口可选 STARTTLS。</p>
       <div class="grid sm:grid-cols-2 gap-3">
@@ -431,7 +440,7 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
           </button>
         </div>
         <p v-if="!smtpConfigured" class="text-xs text-slate-400 mt-1.5">请先保存 SMTP 配置后再测试。</p>
-        <p v-else-if="testMsg" class="text-xs mt-1.5" :class="testOk ? 'text-emerald-300' : 'text-rose-300'">{{ testMsg }}</p>
+        <p v-else-if="testMsg" class="text-xs mt-1.5" :class="testOk ? 'text-emerald-600' : 'text-rose-600'">{{ testMsg }}</p>
       </div>
     </div>
 
@@ -439,7 +448,7 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
     <div class="card p-5">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-sm font-semibold">代理 (生图请求)</h2>
-        <span v-if="proxySaved" class="text-xs text-emerald-300">已保存 ✓</span>
+        <span v-if="proxySaved" class="text-xs text-emerald-600">已保存 ✓</span>
       </div>
       <p class="text-xs text-slate-400 mb-4">调用上游生成图片/视频时统一使用的 HTTP 代理,留空 = 直连。格式如 <code class="px-1 bg-slate-100 rounded">http://127.0.0.1:7890</code>。修改即时生效,无需重启。</p>
       <input v-model="proxy.proxy" placeholder="留空 = 直连,如 http://127.0.0.1:7890" class="field" />
@@ -447,14 +456,14 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
         <button @click="saveProxy" :disabled="proxyBusy" class="btn-primary">{{ proxyBusy ? '保存中…' : '保存设置' }}</button>
         <button @click="testProxy" :disabled="proxyTestBusy || !proxy.proxy.trim()" class="btn-ghost">{{ proxyTestBusy ? '测试中…' : '代理测试' }}</button>
       </div>
-      <p v-if="proxyTest.msg" class="text-xs mt-2" :class="proxyTest.ok ? 'text-emerald-300' : 'text-rose-300'">{{ proxyTest.msg }}</p>
+      <p v-if="proxyTest.msg" class="text-xs mt-2" :class="proxyTest.ok ? 'text-emerald-600' : 'text-rose-600'">{{ proxyTest.msg }}</p>
     </div>
 
     <!-- rewards -->
     <div class="card p-5">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-sm font-semibold">积分奖励</h2>
-        <span v-if="credSaved" class="text-xs text-emerald-300">已保存 ✓</span>
+        <span v-if="credSaved" class="text-xs text-emerald-600">已保存 ✓</span>
       </div>
       <div class="space-y-3">
         <label class="row">
@@ -485,7 +494,7 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
     <div class="card p-5">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-sm font-semibold">去AI特征</h2>
-        <span v-if="deaiSaved" class="text-xs text-emerald-300">已保存 ✓</span>
+        <span v-if="deaiSaved" class="text-xs text-emerald-600">已保存 ✓</span>
       </div>
       <p class="text-xs text-slate-400 mb-4">画图台开启「去AI特征」后,按画质档位在模型价格之上额外扣除的积分。仅对图片生成生效。</p>
       <div class="space-y-3">
@@ -571,7 +580,7 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
     <div class="card p-5">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-sm font-semibold">日志</h2>
-        <span v-if="logsSaved" class="text-xs text-emerald-300">已保存 ✓</span>
+        <span v-if="logsSaved" class="text-xs text-emerald-600">已保存 ✓</span>
       </div>
       <div class="space-y-3">
         <label class="row">
@@ -592,7 +601,7 @@ onMounted(() => { loadSite(); loadReg(); loadSmtp(); loadCredits(); loadAnnounce
     <div class="card p-5">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-sm font-semibold">生成文件 (图片 / 视频)</h2>
-        <span v-if="mediaSaved" class="text-xs text-emerald-300">
+        <span v-if="mediaSaved" class="text-xs text-emerald-600">
           已保存 ✓<span v-if="mediaRemoved" class="text-white/45"> · 立即清理 {{ mediaRemoved }} 个文件</span>
         </span>
       </div>
@@ -652,7 +661,7 @@ html.dark .hint b { color: rgb(253 164 175); }   /* rose — visible warning, no
   width: calc(1.3rem - 4px);
   height: calc(1.3rem - 4px);
   border-radius: 9999px;
-  background: white;
+  background: var(--surface-solid);
   box-shadow: 0 1px 2px rgb(15 23 42 / 0.2);
   transition: transform 0.18s ease;
 }

frontend/src/views/DocsView.vue

@@ -209,7 +209,7 @@ async function copy(text) {
             <dt class="text-white/45">你的 Key</dt><dd class="font-mono text-white/70">{{ keyHint }}</dd>
           </div>
         </dl>
-        <p class="text-[11px] text-white/40 mt-4">还没有 Key?去 <router-link to="/settings" class="text-orange-300 underline">设置 → API Key</router-link> 生成。</p>
+        <p class="text-[11px] text-white/40 mt-4">还没有 Key?去 <router-link to="/settings" class="text-orange-600 underline">设置 → API Key</router-link> 生成。</p>
       </div>
 
       <div class="card p-6">
@@ -229,7 +229,7 @@ async function copy(text) {
       <div class="card overflow-hidden">
         <table class="w-full text-sm">
           <thead>
-            <tr class="text-left text-[11px] uppercase tracking-wider text-white/40 border-b border-white/[0.08]">
+            <tr class="text-left text-[11px] uppercase tracking-wider text-[color:var(--fg-3)] border-b border-white/[0.08]">
               <th class="px-4 py-3 font-medium whitespace-nowrap">model</th>
               <th class="px-4 py-3 font-medium whitespace-nowrap">类型</th>
               <th class="px-4 py-3 font-medium whitespace-nowrap" title="视频价 = 分辨率价 + 时长价">定价 <span class="normal-case text-white/30">积分</span></th>
@@ -275,7 +275,10 @@ async function copy(text) {
                 </div>
               </td>
             </tr>
-            <tr v-if="!models.length"><td colspan="4" class="px-4 py-10 text-center text-white/35">暂无可用模型</td></tr>
+            <tr v-if="!models.length"><td colspan="4"><div class="empty">
+              <span class="empty-ico"><Icon name="models" class="w-6 h-6" /></span>
+              <span class="empty-text">暂无可用模型</span>
+            </div></td></tr>
           </tbody>
         </table>
       </div>
@@ -287,7 +290,7 @@ async function copy(text) {
         <h2 class="text-lg font-semibold mb-3">生成参数 <span class="text-xs font-normal text-white/40">POST /v1/generate</span></h2>
         <div class="card overflow-hidden">
           <table class="w-full text-sm">
-            <thead><tr class="text-left text-[11px] uppercase tracking-wider text-white/40 border-b border-white/[0.08]">
+            <thead><tr class="text-left text-[11px] uppercase tracking-wider text-[color:var(--fg-3)] border-b border-white/[0.08]">
               <th class="px-4 py-2.5 font-medium">参数</th><th class="px-4 py-2.5 font-medium">类型</th><th class="px-4 py-2.5 font-medium">必填</th><th class="px-4 py-2.5 font-medium">说明</th>
             </tr></thead>
             <tbody>
@@ -306,7 +309,7 @@ async function copy(text) {
         <h2 class="text-lg font-semibold mb-3">上传参数 <span class="text-xs font-normal text-white/40">POST /v1/uploads</span></h2>
         <div class="card overflow-hidden">
           <table class="w-full text-sm">
-            <thead><tr class="text-left text-[11px] uppercase tracking-wider text-white/40 border-b border-white/[0.08]">
+            <thead><tr class="text-left text-[11px] uppercase tracking-wider text-[color:var(--fg-3)] border-b border-white/[0.08]">
               <th class="px-4 py-2.5 font-medium">参数</th><th class="px-4 py-2.5 font-medium">类型</th><th class="px-4 py-2.5 font-medium">必填</th><th class="px-4 py-2.5 font-medium">说明</th>
             </tr></thead>
             <tbody>

frontend/src/views/HomeView.vue

@@ -145,7 +145,7 @@
             <div class="f-logo">
               <img v-if="site.logo" :src="site.logo" :alt="site.title" class="f-logo-img" />
               <Logo v-else :size="30" />
-              <span class="f-word">{{ site.title }}</span>
+              <span class="f-word brand-word">{{ site.title }}</span>
             </div>
             <p class="f-desc">按需计费的 AI 视觉创作平台——{{ onlineModels.length }} 个模型在线，按真实模型档位计费，只为实际生成的内容付费。</p>
             <div class="f-social">

frontend/src/views/ImagesView.vue

@@ -207,24 +207,32 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
 
 <template>
   <section class="space-y-4">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">作品管理</h2>
+      </div>
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+      </div>
+    </div>
     <!-- KPI strip — same shape as the LogsView so the admin shell stays
          consistent. /images returns all four numbers in one payload. -->
     <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-white/45">总计</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">总计</div>
         <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.total }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-sky-300/80">图像</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">图像</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-sky-300">{{ stats.image }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.image }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-rose-300/80">视频</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">视频</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-rose-300">{{ stats.video }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.video }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-amber-300/80">存储</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">存储</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-amber-300">{{ fmtSize(stats.size_bytes) }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ fmtSize(stats.size_bytes) }}</div>
       </div>
     </div>
 
@@ -247,19 +255,16 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
             <Icon name="trash" class="w-3.5 h-3.5" /> 删除选中 ({{ picked.size }})
           </button>
         </template>
-        <button @click="load" class="btn-soft">
-          <Icon name="refresh" class="w-3.5 h-3.5" /> 刷新
-        </button>
       </div>
     </div>
 
     <!-- grid -->
-    <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
+    <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
-    <div v-else-if="!items.length" class="card flex flex-col items-center gap-3 text-white/40 py-20">
+    <div v-else-if="!items.length" class="card empty">
-      <span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center">
+      <span class="empty-ico">
         <Icon name="files" class="w-6 h-6" />
       </span>
-      <span class="text-sm">还没有生成过任何图片</span>
+      <span class="empty-text">还没有生成过任何图片</span>
     </div>
 
     <div v-else class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
@@ -325,9 +330,9 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
           <div class="text-[10px] text-white/55 flex items-center justify-between gap-2 tabular-nums">
             <span class="truncate" :title="f.model || ''">{{ f.model || '—' }}</span>
             <span class="shrink-0 flex items-center gap-1">
-              <span v-if="f.resolution" class="text-emerald-300/90">{{ f.resolution }}</span>
+              <span v-if="f.resolution" class="text-emerald-600">{{ f.resolution }}</span>
               <span v-if="f.ratio" class="text-white/40">{{ f.ratio }}</span>
-              <span v-if="f.kind === 'video' && f.duration" class="text-rose-300/80">{{ f.duration }}</span>
+              <span v-if="f.kind === 'video' && f.duration" class="text-rose-600">{{ f.duration }}</span>
               <span v-if="f.deai" class="text-[#71717a]">去AI</span>
             </span>
           </div>

frontend/src/views/InviteView.vue

@@ -77,59 +77,63 @@ function toast(m) {
 </script>
 
 <template>
-  <div class="theme-text space-y-10">
+  <div class="theme-text space-y-5">
     <!-- header -->
-    <header>
+    <div class="page-head">
-      <span class="sticker">✦ 奖励</span>
+      <div>
-      <h1 class="mt-3 text-4xl md:text-5xl font-bold tracking-tight">邀请好友</h1>
+        <h2 class="page-title">邀请好友</h2>
-      <p class="text-white/45 mt-2">好友用你的链接注册,并完成首次生图后,你得 {{ INVITE_REWARD }} 积分。</p>
+        <p class="page-sub">好友用你的链接注册，并完成首次生图后，你得 {{ INVITE_REWARD }} 积分。</p>
-    </header>
-
-    <section class="relative rounded-2xl p-7 md:p-8 overflow-hidden ink-card">
-      <div class="memphis-dots absolute inset-0 opacity-30 pointer-events-none"></div>
-      <div class="relative inline-grid w-11 h-11 rounded-xl text-white place-items-center"
-           style="background: linear-gradient(135deg, #18181b, #52525b); box-shadow: 0 8px 20px var(--accent-glow)">
-        <Icon name="accounts" class="w-5 h-5" />
       </div>
+      <div class="page-actions">
+        <button @click="loadRecords" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+      </div>
+    </div>
 
-      <!-- summary -->
+    <!-- invite card -->
-      <div class="relative mt-6 grid grid-cols-2 gap-3">
+    <section class="inv-card">
-        <div class="rounded-xl px-4 py-3 border border-[color:var(--glass-border)] bg-[var(--surface)] shadow-[var(--glass-shadow)]">
+      <div class="inv-main">
-          <div class="text-2xl font-black tabular-nums text-[color:var(--fg)]">{{ inviteCount }}</div>
+        <div class="inv-label">你的专属邀请链接</div>
-          <div class="text-[10px] text-[color:var(--fg-3)] mt-1 uppercase tracking-widest font-bold">已邀请</div>
+        <div class="inv-link">
+          <span class="inv-url">{{ inviteUrl }}</span>
+          <button @click="copyInvite" class="inv-copy"><Icon name="copy" :size="15" /> 复制链接</button>
         </div>
-        <div class="rounded-xl px-4 py-3 border border-[color:var(--glass-border)] bg-[var(--surface)] shadow-[var(--glass-shadow)]">
+        <button @click="copyCode" class="inv-code" title="点击复制邀请码">
-          <div class="text-2xl font-black tabular-nums text-[color:var(--fg)]">{{ inviteEarned.toLocaleString('en-US') }}</div>
+          <span class="inv-code-k">邀请码</span>
-          <div class="text-[10px] text-[color:var(--fg-3)] mt-1 uppercase tracking-widest font-bold">累计积分</div>
+          <span class="inv-code-v">{{ inviteCode || '—' }}</span>
+          <Icon name="copy" :size="14" />
+        </button>
+      </div>
+      <div class="inv-stats">
+        <div class="inv-stat">
+          <div class="inv-num">{{ inviteCount }}</div>
+          <div class="inv-k">已邀请</div>
+        </div>
+        <div class="inv-stat">
+          <div class="inv-num">{{ inviteEarned.toLocaleString('en-US') }}</div>
+          <div class="inv-k">累计积分</div>
         </div>
       </div>
+    </section>
 
-      <!-- code -->
+    <!-- steps -->
-      <div class="relative mt-6">
+    <section class="steps">
-        <label class="block text-xs font-bold text-white/50 mb-2">邀请码</label>
+      <div class="step">
-        <div class="flex gap-2">
+        <span class="step-n">1</span>
-          <button @click="copyCode"
+        <div><div class="step-t">分享链接</div><div class="step-d">把专属链接或邀请码发给好友</div></div>
-                  class="flex-1 rounded-xl border border-[color:var(--ink-soft)] bg-[var(--surface)] px-4 py-3 text-sm font-mono text-left shadow-[var(--glass-shadow)] hover:-translate-y-0.5 hover:border-[rgb(124_92_252/0.45)] transition-all">
+      </div>
-            {{ inviteCode || '—' }}
+      <div class="step">
-          </button>
+        <span class="step-n">2</span>
-          <button @click="copyInvite"
+        <div><div class="step-t">好友注册</div><div class="step-d">好友通过你的链接完成注册</div></div>
-                  class="rounded-xl border border-white/20 text-white px-5 py-3 text-sm font-extrabold hover:-translate-y-0.5 active:translate-y-0.5 transition-all"
+      </div>
-                  style="background: linear-gradient(120deg, #18181b, #52525b); box-shadow: 0 8px 20px var(--accent-glow)">
+      <div class="step">
-            复制链接
+        <span class="step-n">3</span>
-          </button>
+        <div><div class="step-t">首次生图，你得 {{ INVITE_REWARD }} 积分</div><div class="step-d">好友完成第一张生图后自动到账</div></div>
-        </div>
-        <div class="mt-2 text-[11px] text-white/35 break-all font-mono">{{ inviteUrl }}</div>
       </div>
     </section>
 
     <!-- records -->
     <section>
-      <div class="flex items-center justify-between mb-3">
+      <h3 class="rec-title">邀请记录</h3>
-        <h2 class="text-lg font-semibold">邀请记录</h2>
-        <button @click="loadRecords" class="text-xs text-white/50 hover:text-white inline-flex items-center gap-1.5 transition-colors">
-          <Icon name="refresh" class="w-3.5 h-3.5" /> 刷新
-        </button>
-      </div>
 
       <div class="card overflow-hidden">
         <div v-if="loading && !records.length" class="text-center text-sm text-white/40 py-16">加载中…</div>
@@ -161,7 +165,7 @@ function toast(m) {
                 class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
               <td class="px-5 py-3.5 align-middle font-medium text-white/90 truncate">{{ r.name }}</td>
               <td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
-                  :class="r.reward ? 'text-emerald-300' : 'text-white/25'">
+                  :class="r.reward ? 'text-emerald-600' : 'text-white/25'">
                 {{ r.reward ? '+' + r.reward : '—' }}
               </td>
               <td class="px-3 py-3.5 align-middle text-xs text-white/55 tabular-nums whitespace-nowrap">
@@ -173,10 +177,10 @@ function toast(m) {
               <td class="px-5 py-3.5 align-middle text-right">
                 <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1"
                       :class="r.status === 'completed'
-                        ? 'bg-emerald-500/10 text-emerald-300 ring-emerald-400/30'
+                        ? 'bg-emerald-500/10 text-emerald-600 ring-emerald-500/25'
-                        : 'bg-amber-500/10 text-amber-300 ring-amber-400/30'">
+                        : 'bg-amber-500/10 text-amber-600 ring-amber-500/25'">
                   <span class="w-1.5 h-1.5 rounded-full"
-                        :class="r.status === 'completed' ? 'bg-emerald-400' : 'bg-amber-400'"></span>
+                        :class="r.status === 'completed' ? 'bg-emerald-500' : 'bg-amber-500'"></span>
                   {{ r.status === 'completed' ? '已完成' : '待生图' }}
                 </span>
               </td>
@@ -212,6 +216,35 @@ function toast(m) {
 </template>
 
 <style scoped>
+.inv-card {
+  display: flex; align-items: stretch; justify-content: space-between; gap: 28px; flex-wrap: wrap;
+  padding: 28px 30px; border-radius: 22px; position: relative; overflow: hidden;
+  background: radial-gradient(520px 260px at 100% 0%, rgba(251, 146, 60, 0.18), transparent 70%), linear-gradient(135deg, #27272a, #09090b);
+  box-shadow: 0 20px 44px -20px rgba(9, 9, 11, 0.55);
+}
+.inv-main { flex: 1 1 420px; min-width: 0; }
+.inv-label { font-size: 12.5px; font-weight: 700; color: #a1a1aa; letter-spacing: .04em; }
+.inv-link { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
+.inv-url { flex: 1; min-width: 0; font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 13px; color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.inv-copy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: #fff; color: #18181b; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .12s ease, background .15s ease; }
+.inv-copy:hover { background: #f4f4f5; transform: translateY(-1px); }
+.inv-code { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.28); background: transparent; cursor: pointer; color: #a1a1aa; transition: border-color .15s ease, color .15s ease; }
+.inv-code:hover { border-color: rgba(255,255,255,.55); color: #fff; }
+.inv-code-k { font-size: 12px; font-weight: 700; }
+.inv-code-v { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .06em; }
+.inv-stats { display: flex; align-items: center; gap: 34px; padding-left: 8px; }
+.inv-stat + .inv-stat { padding-left: 34px; border-left: 1px solid rgba(255,255,255,.14); }
+.inv-num { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
+.inv-k { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #a1a1aa; }
+
+.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+.step { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface-solid); border: 1px solid rgb(24 24 27 / .07); border-radius: 16px; }
+.step-n { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f4f4f5; color: #18181b; font-size: 14px; font-weight: 800; }
+.step-t { font-size: 14px; font-weight: 800; color: var(--fg); }
+.step-d { margin-top: 2px; font-size: 12px; color: var(--fg-3); }
+.rec-title { margin: 10px 2px 12px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg); }
+@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .inv-stats { padding-left: 0; } }
+
 /* Numbered pagination buttons — dark base (matches the admin pages); the global
    .theme-text rules in style.css recolor these for light mode automatically. */
 .pg {
@@ -226,9 +259,9 @@ function toast(m) {
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
+.pg:hover:not(.pg-on) { background: var(--hover); color: var(--fg); }
 .pg-on {
-  background: rgb(255 255 255 / 0.92);
+  background: var(--surface-solid);
   color: rgb(15 23 42);
   box-shadow: none;
 }

frontend/src/views/InvitesAdminView.vue

@@ -20,36 +20,44 @@ onMounted(load)
 
 <template>
   <section class="space-y-4">
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">邀请日志</h2>
+        <p class="page-sub">全站邀请记录:谁邀请了谁、注册与完成时间、奖励状态</p>
+      </div>
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+      </div>
+    </div>
     <!-- KPI strip — same shape as the LogsView so the admin shell stays
          consistent. /invites already returns the stats payload. -->
     <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-white/45">总邀请</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">总邀请</div>
         <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.total }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-emerald-300/80">已完成</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">已完成</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-emerald-300">{{ stats.completed }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.completed }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-amber-300/80">待生图</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">待生图</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-amber-300">{{ stats.pending }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.pending }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-rose-300/80">已发奖励</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">已发奖励</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-rose-300">{{ Number(stats.reward_paid || 0).toLocaleString('en-US') }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ Number(stats.reward_paid || 0).toLocaleString('en-US') }}</div>
       </div>
     </div>
 
     <div class="card overflow-hidden">
-      <div class="px-5 py-3 border-b border-white/[0.06] flex items-center justify-between">
+      
-        <div class="text-xs text-white/55">全站邀请记录:谁邀请了谁、注册与完成时间、奖励状态。</div>
+      <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
-        <button @click="load" class="btn-soft"><Icon name="refresh" class="w-3.5 h-3.5" /> 刷新</button>
+      <div v-else-if="!items.length" class="empty">
+        <span class="empty-ico"><Icon name="team" class="w-6 h-6" /></span>
+        <span class="empty-text">还没有邀请记录</span>
       </div>
 
-      <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-16">加载中…</div>
-      <div v-else-if="!items.length" class="text-center text-sm text-white/40 py-16">还没有邀请记录</div>
-
       <table v-else class="w-full text-sm">
         <colgroup>
           <col />
@@ -75,7 +83,7 @@ onMounted(load)
             <td class="px-5 py-3.5 align-middle font-medium text-white/90 truncate">{{ r.inviter }}</td>
             <td class="px-3 py-3.5 align-middle text-white/75 truncate">{{ r.invitee }}</td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
-                :class="r.reward ? 'text-emerald-300' : 'text-white/25'">
+                :class="r.reward ? 'text-emerald-600' : 'text-white/25'">
               {{ r.reward ? '+' + r.reward : '—' }}
             </td>
             <td class="px-3 py-3.5 align-middle text-xs text-white/55 tabular-nums whitespace-nowrap">
@@ -87,10 +95,10 @@ onMounted(load)
             <td class="px-5 py-3.5 align-middle text-right">
               <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1"
                     :class="r.status === 'completed'
-                      ? 'bg-emerald-500/10 text-emerald-300 ring-emerald-400/30'
+                      ? 'bg-emerald-500/10 text-emerald-600 ring-emerald-500/25'
-                      : 'bg-amber-500/10 text-amber-300 ring-amber-400/30'">
+                      : 'bg-amber-500/10 text-amber-600 ring-amber-500/25'">
                 <span class="w-1.5 h-1.5 rounded-full"
-                      :class="r.status === 'completed' ? 'bg-emerald-400' : 'bg-amber-400'"></span>
+                      :class="r.status === 'completed' ? 'bg-emerald-500' : 'bg-amber-500'"></span>
                 {{ r.status === 'completed' ? '已完成' : '待生图' }}
               </span>
             </td>

frontend/src/views/LogsView.vue

@@ -5,6 +5,7 @@ import { fmtTs, fmtDate, fmtClock } from '../utils/format'
 import { copyText } from '../utils/clipboard'
 import { generatedUrl, thumbUrl } from '../api'
 import Icon from '../components/Icon.vue'
+import SelectMenu from '../components/SelectMenu.vue'
 import MediaLightbox from '../components/MediaLightbox.vue'
 
 const items = ref([])
@@ -14,7 +15,6 @@ const kindFilter = ref('')     // '' | 'image' | 'video'
 const statusFilter = ref('')   // '' | 'success' | 'failed' | 'pending'
 const sourceFilter = ref('')   // '' | 'v1' | 'user' | 'admin'
 const search = ref('')
-const userSearch = ref('')   // 服务端用户搜索：名称 / 邮箱 / ID，跨页生效
 const page = ref(1)
 const pageSize = ref(15)
 const total = ref(0)
@@ -43,8 +43,7 @@ async function load() {
   if (kindFilter.value) qs.set('kind', kindFilter.value)
   if (statusFilter.value) qs.set('status', statusFilter.value)
   if (sourceFilter.value) qs.set('source', sourceFilter.value)
-  if (userSearch.value.trim()) qs.set('user', userSearch.value.trim())
+  if (search.value.trim()) qs.set('kw', search.value.trim())
-  if (search.value.trim()) qs.set('q', search.value.trim())
   const r = await api('/logs?' + qs.toString())
   items.value = r.data?.data || []
   total.value = Number(r.data?.total ?? items.value.length)
@@ -83,6 +82,9 @@ function goPage(n) {
 }
 
 // Filters reset the cursor so a narrower view always starts on page 1.
+const KIND_OPTS = [{ value: '', label: '全部类型' }, { value: 'image', label: '图像' }, { value: 'video', label: '视频' }]
+const STATUS_OPTS = [{ value: '', label: '所有状态' }, { value: 'success', label: '成功' }, { value: 'failed', label: '失败' }, { value: 'pending', label: '进行中' }]
+const SOURCE_OPTS = [{ value: '', label: '所有来源' }, { value: 'user', label: '画图台' }, { value: 'v1', label: 'API' }, { value: 'admin', label: '测试' }]
 function setKind(v) { kindFilter.value = v; page.value = 1; load() }
 function setStatus(v) { statusFilter.value = v; page.value = 1; load() }
 function setSource(v) { sourceFilter.value = v; page.value = 1; load() }
@@ -132,93 +134,68 @@ onUnmounted(() => {
 // ---- chip helpers ----
 const statusLabel = (s) => ({ success: '成功', failed: '失败', pending: '进行中' }[s] || s)
 const statusPill = (s) => ({
-  success: 'bg-emerald-500/10 text-emerald-300 ring-emerald-400/30',
+  success: 'bg-emerald-500/10 text-emerald-600 ring-emerald-500/25',
-  failed:  'bg-rose-500/10 text-rose-300 ring-rose-400/30',
+  failed:  'bg-rose-500/10 text-rose-600 ring-rose-500/25',
-  pending: 'bg-amber-500/10 text-amber-300 ring-amber-400/30',
+  pending: 'bg-amber-500/10 text-amber-600 ring-amber-500/25',
 }[s] || 'bg-white/[0.06] text-white/65 ring-white/15')
 const statusDot = (s) => ({
-  success: 'bg-emerald-400',
+  success: 'bg-emerald-500',
-  failed:  'bg-rose-400',
+  failed:  'bg-rose-500',
-  pending: 'bg-amber-400',
+  pending: 'bg-amber-500',
 }[s] || 'bg-white/40')
 
 // Source: backend stamps "v1" (API key), "user" (画图台), "admin" (后台测试模型).
 const sourceLabel = (s) => ({ v1: 'API', user: '画图台', admin: '测试' }[s] || '画图台')
 const sourcePill = (s) => ({
-  v1:    'bg-orange-500/15 text-orange-300 ring-orange-400/30',
+  v1:    'bg-orange-500/15 text-orange-600 ring-orange-500/25',
-  admin: 'bg-amber-500/15 text-amber-300 ring-amber-400/30',
+  admin: 'bg-amber-500/15 text-amber-600 ring-amber-500/25',
-  user:  'bg-sky-500/15 text-sky-300 ring-sky-400/30',
+  user:  'bg-sky-500/15 text-sky-600 ring-sky-500/25',
-}[s] || 'bg-sky-500/15 text-sky-300 ring-sky-400/30')
+}[s] || 'bg-sky-500/15 text-sky-600 ring-sky-500/25')
 </script>
 
 <template>
   <section class="space-y-4">
+    <div class="page-head">
+      <h2 class="page-title">日志管理</h2>
+      <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+    </div>
     <!-- KPI strip — dense pills aligned with the dashboard tints -->
     <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-white/45">总计</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">总计</div>
         <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.total }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-emerald-300/80">成功</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">成功</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-emerald-300">{{ stats.success }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.success }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-rose-300/80">失败</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">失败</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-rose-300">{{ stats.failed }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.failed }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-amber-300/80">进行中</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">进行中</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-amber-300">{{ stats.pending }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.pending }}</div>
       </div>
     </div>
 
     <!-- Toolbar -->
-    <div class="card p-3 flex items-center gap-3 flex-wrap">
+    <div class="card toolbar">
-      <div class="flex items-center gap-1">
+      <SelectMenu :model-value="kindFilter" compact :options="KIND_OPTS" @update:model-value="setKind" />
-        <button @click="setKind('')" class="fp" :class="kindFilter === '' && 'fp-on'">全部</button>
+      <SelectMenu :model-value="statusFilter" compact :options="STATUS_OPTS" @update:model-value="setStatus" />
-        <button @click="setKind('image')" class="fp" :class="kindFilter === 'image' && 'fp-on'">图像</button>
+      <SelectMenu :model-value="sourceFilter" compact :options="SOURCE_OPTS" @update:model-value="setSource" />
-        <button @click="setKind('video')" class="fp" :class="kindFilter === 'video' && 'fp-on'">视频</button>
-      </div>
-      <div class="w-px h-5 bg-white/10"></div>
-      <div class="flex items-center gap-1">
-        <button @click="setStatus('')" class="fp" :class="statusFilter === '' && 'fp-on'">所有状态</button>
-        <button @click="setStatus('success')" class="fp" :class="statusFilter === 'success' && 'fp-emerald'">
-          <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>成功
-        </button>
-        <button @click="setStatus('failed')" class="fp" :class="statusFilter === 'failed' && 'fp-rose'">
-          <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>失败
-        </button>
-        <button @click="setStatus('pending')" class="fp" :class="statusFilter === 'pending' && 'fp-amber'">
-          <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>进行中
-        </button>
-      </div>
-      <div class="w-px h-5 bg-white/10"></div>
-      <div class="flex items-center gap-1">
-        <button @click="setSource('')" class="fp" :class="sourceFilter === '' && 'fp-on'">所有来源</button>
-        <button @click="setSource('user')" class="fp" :class="sourceFilter === 'user' && 'fp-on'">画图台</button>
-        <button @click="setSource('v1')" class="fp" :class="sourceFilter === 'v1' && 'fp-on'">API</button>
-        <button @click="setSource('admin')" class="fp" :class="sourceFilter === 'admin' && 'fp-on'">测试</button>
-      </div>
-      <div class="w-44">
-        <input v-model="userSearch" @keyup.enter="doUserSearch" @change="doUserSearch"
-               class="field !py-1.5 text-xs" placeholder="搜索用户 名称/邮箱/ID…" />
-      </div>
       <div class="flex-1 min-w-[200px]">
         <input v-model="search" @keyup.enter="doUserSearch" @change="doUserSearch"
-               class="field !py-1.5 text-xs" placeholder="搜索 模型 / 提示词 / 错误…" />
+               class="field !py-1.5 text-xs" placeholder="搜索 用户 / 模型 / 提示词 / 错误…" />
       </div>
-      <button @click="load" class="btn-soft">
-        <Icon name="refresh" class="w-3.5 h-3.5" /> 刷新
-      </button>
     </div>
 
     <!-- Table -->
     <div class="card overflow-hidden">
-      <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
+      <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
-      <div v-else-if="!filtered.length" class="flex flex-col items-center gap-3 text-white/40 py-20">
+      <div v-else-if="!filtered.length" class="empty">
-        <span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center"><Icon name="files" class="w-6 h-6" /></span>
+        <span class="empty-ico"><Icon name="files" class="w-6 h-6" /></span>
-        <span class="text-sm">{{ (search.trim() || userSearch.trim()) ? '没有匹配的记录' : '还没有日志' }}</span>
+        <span class="empty-text">{{ search.trim() ? '没有匹配的记录' : '还没有日志' }}</span>
       </div>
 
       <!-- Each row is a thumbnail + a stack of model/prompt + a meta line.
@@ -254,7 +231,7 @@ const sourcePill = (s) => ({
             <td class="px-4 py-3.5 align-middle text-center">
               <button v-if="e.status === 'success' && e.file && e.source !== 'v1'"
                       @click="openPreview(e)"
-                      class="block w-12 h-12 mx-auto rounded-lg overflow-hidden ring-1 ring-white/10 hover:ring-rose-400/60 transition-all">
+                      class="block w-12 h-12 mx-auto rounded-lg overflow-hidden ring-1 ring-white/10 hover:ring-rose-500/25 transition-all">
                 <img v-if="e.kind !== 'video' || !thumbFail[e.id]" :src="thumbUrl(e.file)" loading="lazy"
                      class="w-full h-full object-cover"
                      @error="e.kind === 'video' && (thumbFail[e.id] = true)" />
@@ -263,8 +240,8 @@ const sourcePill = (s) => ({
                        @mouseenter="$event.target.play && $event.target.play()"
                        @mouseleave="$event.target.pause && $event.target.pause()" />
               </button>
-              <div v-else-if="e.status === 'pending'" class="w-12 h-12 mx-auto rounded-lg bg-amber-500/10 ring-1 ring-amber-400/30 grid place-items-center">
+              <div v-else-if="e.status === 'pending'" class="w-12 h-12 mx-auto rounded-lg bg-amber-500/10 ring-1 ring-amber-500/25 grid place-items-center">
-                <span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
+                <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
               </div>
               <!-- failed (and any non-success/non-pending) rows: no thumbnail, just a dash.
                    The 状态 column already flags the failure. -->
@@ -291,7 +268,7 @@ const sourcePill = (s) => ({
               <div class="font-mono text-xs text-white/90 break-all" :title="e.model">{{ e.model }}</div>
               <div class="mt-1 flex items-center gap-1.5 min-w-0">
                 <span class="text-[10px] uppercase tracking-wider font-medium truncate min-w-0"
-                      :class="e.kind === 'video' ? 'text-rose-300/80' : 'text-sky-300/80'">
+                      :class="e.kind === 'video' ? 'text-rose-600' : 'text-sky-600'">
                   {{ e.kind === 'video' ? '视频' : '图像' }}
                   <span v-if="e.provider" class="text-white/30 ml-1">· {{ e.provider }}</span>
                 </span>
@@ -306,7 +283,7 @@ const sourcePill = (s) => ({
                    :class="e.prompt ? 'cursor-pointer hover:text-white' : ''"
                    :title="e.prompt ? '点击复制提示词' : ''"
                    @click="e.prompt && copyPrompt(e)">{{ e.prompt || '—' }}</div>
-              <div v-if="e.error" class="mt-1 text-[11px] text-rose-300/85 truncate flex items-center gap-1.5 cursor-pointer hover:text-rose-200 transition-colors"
+              <div v-if="e.error" class="mt-1 text-[11px] text-rose-600 truncate flex items-center gap-1.5 cursor-pointer hover:text-rose-500 transition-colors"
                    :title="e.error + ' — 点击复制'"
                    @click.stop="copyError(e)">
                 {{ e.error }}
@@ -331,7 +308,7 @@ const sourcePill = (s) => ({
               </template>
             </td>
             <td class="px-3 py-3.5 text-right text-xs tabular-nums align-middle whitespace-nowrap">
-              <span v-if="e.cost > 0" class="text-amber-300 font-medium">{{ e.cost }}</span>
+              <span v-if="e.cost > 0" class="text-amber-600 font-medium">{{ e.cost }}</span>
               <span v-else class="text-white/25">0</span>
             </td>
             <td class="px-4 py-3.5 text-right text-xs tabular-nums align-middle whitespace-nowrap text-white/85">
@@ -383,32 +360,20 @@ const sourcePill = (s) => ({
   padding: 0.35rem 0.7rem;
   font-size: 0.72rem;
   border-radius: 0.55rem;
-  color: rgb(255 255 255 / 0.65);
+  color: var(--fg-2);
-  background: rgb(255 255 255 / 0.05);
+  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
+  box-shadow: inset 0 0 0 1px var(--hairline);
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.fp:hover { background: rgb(255 255 255 / 0.09); color: white; }
+.fp:hover { background: var(--hover); color: var(--fg); }
 .fp-on {
-  background: rgb(255 255 255 / 0.92);
+  background: var(--surface-solid);
   color: rgb(15 23 42);
   box-shadow: none;
 }
-.fp-emerald {
+.fp-emerald { background: rgb(16 185 129 / 0.1); color: #059669; box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.22); }
-  background: rgb(16 185 129 / 0.22);
+.fp-rose { background: rgb(239 68 68 / 0.09); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(239 68 68 / 0.2); }
-  color: rgb(110 231 183);
+.fp-amber { background: rgb(245 158 11 / 0.12); color: #b45309; box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.25); }
-  box-shadow: inset 0 0 0 1px rgb(110 231 183 / 0.45);
-}
-.fp-rose {
-  background: rgb(244 63 94 / 0.22);
-  color: rgb(253 164 175);
-  box-shadow: inset 0 0 0 1px rgb(253 164 175 / 0.45);
-}
-.fp-amber {
-  background: rgb(245 158 11 / 0.22);
-  color: rgb(252 211 77);
-  box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.45);
-}
 
 /* --- type / status chip used inside table rows --- */
 .chip {
@@ -441,10 +406,10 @@ const sourcePill = (s) => ({
        focus indicator without being noisy). --- */
 .log-table { border-collapse: separate; border-spacing: 0; }
 .log-row td {
-  border-bottom: 1px solid rgb(255 255 255 / 0.04);
+  border-bottom: 1px solid var(--hairline);
   transition: background-color 0.15s ease, box-shadow 0.15s ease;
 }
-.log-row:hover td { background: rgb(255 255 255 / 0.025); }
+.log-row:hover td { background: var(--surface-2); }
 .log-row:hover td:first-child {
   box-shadow: inset 2px 0 0 rgb(253 186 116 / 0.55);
 }
@@ -458,14 +423,14 @@ const sourcePill = (s) => ({
   font-weight: 500;
   text-align: center;
   border-radius: 0.45rem;
-  color: rgb(255 255 255 / 0.7);
+  color: var(--fg-2);
-  background: rgb(255 255 255 / 0.04);
+  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
+  box-shadow: inset 0 0 0 1px var(--hairline);
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
+.pg:hover:not(.pg-on) { background: var(--hover); color: var(--fg); }
 .pg-on {
-  background: rgb(255 255 255 / 0.92);
+  background: var(--surface-solid);
   color: rgb(15 23 42);
   box-shadow: none;
 }

frontend/src/views/ModelsView.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { api } from '../api'
 import Icon from '../components/Icon.vue'
+import SelectMenu from '../components/SelectMenu.vue'
 import ModelFormModal from '../components/ModelFormModal.vue'
 import TestModal from '../components/TestModal.vue'
 import { points } from '../credits'
@@ -15,6 +16,8 @@ const testing = ref(null) // model being tested, or null
 
 const kindFilter = ref('')      // '' | 'image' | 'video'
 const saleFilter = ref('')      // '' | 'sellable' | 'unsellable'
+const KIND_OPTS = [{ value: '', label: '全部类型' }, { value: 'image', label: '图像' }, { value: 'video', label: '视频' }]
+const SALE_OPTS = [{ value: '', label: '全部状态' }, { value: 'sellable', label: '已上架' }, { value: 'unsellable', label: '未上架' }]
 const search = ref('')
 
 const TYPE_LABEL = { image: '生图', video: '生视频' }
@@ -72,79 +75,65 @@ onMounted(loadModels)
 
 <template>
   <section class="space-y-4">
+    <div class="page-head">
+      <h2 class="page-title">模型管理</h2>
+      <button @click="loadModels" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+    </div>
     <!-- KPI strip — same shape as LogsView / InvitesAdminView -->
     <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-white/45">总数</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">总数</div>
         <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.total }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-sky-300/80">图像</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">图像</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-sky-300">{{ stats.image }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.image }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-rose-300/80">视频</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">视频</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-rose-300">{{ stats.video }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.video }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-emerald-300/80">上架</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">上架</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-emerald-300">{{ stats.sellable }}<span class="text-white/35 text-lg ml-1">/ {{ stats.total }}</span></div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.sellable }}<span class="text-white/35 text-lg ml-1">/ {{ stats.total }}</span></div>
       </div>
     </div>
 
     <!-- Toolbar -->
-    <div class="card p-3 flex items-center gap-3 flex-wrap">
+    <div class="card toolbar">
-      <div class="flex items-center gap-1">
+      <SelectMenu v-model="kindFilter" compact :options="KIND_OPTS" />
-        <button @click="kindFilter = ''" class="fp" :class="kindFilter === '' && 'fp-on'">全部</button>
+      <SelectMenu v-model="saleFilter" compact :options="SALE_OPTS" />
-        <button @click="kindFilter = 'image'" class="fp" :class="kindFilter === 'image' && 'fp-on'">图像</button>
-        <button @click="kindFilter = 'video'" class="fp" :class="kindFilter === 'video' && 'fp-on'">视频</button>
-      </div>
-      <div class="w-px h-5 bg-white/10"></div>
-      <div class="flex items-center gap-1">
-        <button @click="saleFilter = ''" class="fp" :class="saleFilter === '' && 'fp-on'">全部</button>
-        <button @click="saleFilter = 'sellable'" class="fp" :class="saleFilter === 'sellable' && 'fp-emerald'">
-          <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>上架
-        </button>
-        <button @click="saleFilter = 'unsellable'" class="fp" :class="saleFilter === 'unsellable' && 'fp-white'">
-          <span class="w-1.5 h-1.5 rounded-full bg-white/40"></span>未上架
-        </button>
-      </div>
       <div class="flex-1 min-w-[200px]">
         <input v-model="search" class="field !py-1.5 text-xs" placeholder="搜索 模型 ID / 别名…" />
       </div>
-      <button @click="loadModels" class="btn-soft">
-        <Icon name="refresh" class="w-3.5 h-3.5" /> 刷新
-      </button>
     </div>
 
     <!-- Table -->
     <div class="card overflow-hidden">
-      <div v-if="loading && !models.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
+      <div v-if="loading && !models.length" class="empty"><span class="empty-text">加载中…</span></div>
-      <div v-else-if="!filtered.length" class="flex flex-col items-center gap-3 text-white/40 py-20">
+      <div v-else-if="!filtered.length" class="empty">
-        <span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center"><Icon name="models" class="w-6 h-6" /></span>
+        <span class="empty-ico"><Icon name="models" class="w-6 h-6" /></span>
-        <span v-if="models.length" class="text-sm">没有匹配的模型</span>
+        <span v-if="models.length" class="empty-text">没有匹配的模型</span>
-        <router-link v-else to="/admin/channels" class="text-sm text-sky-300 underline underline-offset-2">还没有模型，先到「渠道管理」添加渠道，保存后会自动同步上游模型</router-link>
+        <router-link v-else to="/admin/channels" class="empty-text underline underline-offset-2">还没有模型，先到「渠道管理」添加渠道，保存后会自动同步上游模型</router-link>
       </div>
 
-      <table v-else class="w-full text-sm table-fixed">
+      <table v-else class="w-full text-sm table-fixed min-w-[1080px]">
         <colgroup>
-          <col />                  <!-- model id + provider -->
+          <col class="w-52" />     <!-- model name + provider -->
           <col class="w-20" />     <!-- type -->
           <col />                  <!-- pricing -->
-          <col />                  <!-- capability -->
+          <col />                  <!-- config -->
-          <col class="w-20" />     <!-- weight -->
+          <col class="w-24" />     <!-- success count -->
-          <col class="w-24" />     <!-- generation count -->
           <col class="w-20" />     <!-- sellable badge -->
-          <col class="w-36" />     <!-- actions -->
+          <col class="w-32" />     <!-- actions -->
         </colgroup>
         <thead>
           <tr class="text-[10px] uppercase tracking-[0.2em] text-white/40 border-b border-white/[0.06]">
             <th class="text-left px-5 py-3 font-medium">模型</th>
             <th class="text-left px-3 py-3 font-medium">类型</th>
             <th class="text-left px-3 py-3 font-medium">定价</th>
-            <th class="text-left px-3 py-3 font-medium">能力</th>
+            <th class="text-left px-3 py-3 font-medium">配置</th>
-            <th class="text-right px-3 py-3 font-medium">权重</th>
+            <th class="text-right px-3 py-3 font-medium">成功次数</th>
-            <th class="text-right px-3 py-3 font-medium">生图次数</th>
             <th class="text-left px-3 py-3 font-medium">上架</th>
             <th class="text-right px-5 py-3 font-medium">操作</th>
           </tr>
@@ -152,103 +141,65 @@ onMounted(loadModels)
         <tbody>
           <tr v-for="m in filtered" :key="m.id"
               class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
-            <!-- Model id + provider underneath -->
+            <!-- Model name (mono) + provider / weight subline -->
             <td class="px-5 py-3.5 align-middle min-w-0">
-              <div class="flex items-start gap-2 min-w-0">
+              <div class="font-mono text-[12.5px] text-white/90 truncate" :title="m.id">{{ m.alias || m.name || m.id }}</div>
-                <div class="font-mono text-xs text-white/90 truncate" :title="m.id">{{ m.id }}</div>
+              <div class="mt-1 text-[10.5px] text-white/45 truncate" :title="(m.channels || []).join('、')">
-                <span v-if="m.alias" class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] bg-sky-500/10 text-sky-300 ring-1 ring-sky-400/20 shrink-0">{{ m.alias }}</span>
+                {{ (m.channels || []).length ? m.channels.join('、') : (m.provider === 'channel' ? '渠道导入' : (m.provider || '—')) }} · 权重 {{ m.weight || 0 }}
               </div>
-              <div class="mt-1 text-[10px] text-white/45 truncate">{{ m.provider === 'channel' ? '渠道导入' : (m.provider || '—') }}</div>
             </td>
 
-            <!-- Type chip with the same shape as Logs/Provider 健康 -->
+            <!-- Type tag -->
             <td class="px-3 py-3.5 align-middle">
-              <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1"
+              <span class="kind-tag" :class="m.type === 'video' ? 'kind-video' : 'kind-image'">
-                    :class="m.type === 'video'
-                      ? 'bg-rose-500/10 text-rose-300 ring-rose-400/30'
-                      : 'bg-sky-500/10 text-sky-300 ring-sky-400/30'">
                 {{ TYPE_LABEL[m.type] || m.type }}
               </span>
             </td>
 
-            <!-- Pricing block — image shows 1K/2K/4K + price, video shows
+            <!-- Pricing — compact chips: 档位 + 普通价 + 代理价 -->
-                 duration + price; each as a small price-chip. -->
             <td class="px-3 py-3.5 align-middle">
-              <!-- Each tier shows a pair: 普通价 (emerald) + 代理价 (amber).
+              <div v-if="m.type === 'image'" class="flex flex-wrap gap-1.5">
-                   代理价未设置时回退普通价数值。 -->
+                <span v-for="r in (m.resolutions || [])" :key="r" class="p-chip">
-              <div v-if="m.type === 'image'" class="flex flex-wrap gap-1">
+                  <b>{{ r }}</b><em>{{ points(m.prices?.[r]) }}</em><em class="ag">{{ points(m.prices_agent?.[r] ?? m.prices?.[r]) }}</em>
-                <span v-for="r in (m.resolutions || [])" :key="r" class="price-chip">
-                  <span class="text-white/85">{{ r }}</span>
-                  <span class="text-white/30 mx-1">普通</span>
-                  <span class="text-emerald-300 tabular-nums">{{ points(m.prices?.[r]) }}</span>
-                  <span class="text-amber-300/40 ml-1.5">代理</span>
-                  <span class="text-amber-300 tabular-nums">{{ points(m.prices_agent?.[r] ?? m.prices?.[r]) }}</span>
                 </span>
                 <span v-if="!(m.resolutions || []).length" class="text-white/30 text-xs">—</span>
               </div>
-              <div v-else class="flex flex-wrap gap-1">
+              <div v-else class="flex flex-wrap gap-1.5">
-                <span v-for="r in (m.resolutions || [])" :key="'r'+r" class="price-chip">
+                <span v-for="r in (m.resolutions || [])" :key="'r'+r" class="p-chip">
-                  <span class="text-white/85">{{ r }}</span>
+                  <b>{{ r }}</b><em>{{ points(m.prices?.[r]) }}</em><em class="ag">{{ points(m.prices_agent?.[r] ?? m.prices?.[r]) }}</em>
-                  <span class="text-white/30 mx-1">普通</span>
-                  <span class="text-emerald-300 tabular-nums">{{ points(m.prices?.[r]) }}</span>
-                  <span class="text-amber-300/40 ml-1.5">代理</span>
-                  <span class="text-amber-300 tabular-nums">{{ points(m.prices_agent?.[r] ?? m.prices?.[r]) }}</span>
                 </span>
-                <span v-if="m.duration_prices?.per_second != null" class="price-chip">
+                <span v-if="m.duration_prices?.per_second != null" class="p-chip">
-                  <span class="text-white/85">/s</span>
+                  <b>/s</b><em>{{ points(m.duration_prices.per_second) }}</em><em class="ag">{{ points(m.duration_prices_agent?.per_second ?? m.duration_prices.per_second) }}</em>
-                  <span class="text-white/30 mx-1">普通</span>
-                  <span class="text-sky-300 tabular-nums">{{ points(m.duration_prices.per_second) }}</span>
-                  <span class="text-amber-300/40 ml-1.5">代理</span>
-                  <span class="text-amber-300 tabular-nums">{{ points(m.duration_prices_agent?.per_second ?? m.duration_prices.per_second) }}</span>
                 </span>
-                <span v-else v-for="d in (m.durations || [])" :key="'d'+d" class="price-chip">
+                <span v-else v-for="d in (m.durations || [])" :key="'d'+d" class="p-chip">
-                  <span class="text-white/85">{{ d }}</span>
+                  <b>{{ d }}</b><em>+{{ points(m.duration_prices?.[d]) }}</em><em class="ag">+{{ points(m.duration_prices_agent?.[d] ?? m.duration_prices?.[d]) }}</em>
-                  <span class="text-white/30 mx-1">普通</span>
-                  <span class="text-sky-300 tabular-nums">+{{ points(m.duration_prices?.[d]) }}</span>
-                  <span class="text-amber-300/40 ml-1.5">代理</span>
-                  <span class="text-amber-300 tabular-nums">+{{ points(m.duration_prices_agent?.[d] ?? m.duration_prices?.[d]) }}</span>
                 </span>
                 <span v-if="!(m.resolutions || []).length && !(m.durations || []).length && m.duration_prices?.per_second == null" class="text-white/30 text-xs">—</span>
               </div>
             </td>
 
-            <!-- Capability — duration range, frame/ref modes, media support -->
+            <!-- 配置 — uniform mono tags: duration, resolutions, refs, ratios -->
             <td class="px-3 py-3.5 align-middle">
-              <div class="flex flex-wrap items-center gap-1 text-[11px]">
+              <div class="flex flex-wrap items-center gap-1">
-                <!-- Duration range (4s–15s) -->
+                <span v-if="m.type === 'video' && (m.durations || []).length >= 2" class="cfg-tag">{{ m.durations[0] }}–{{ m.durations[m.durations.length - 1] }}</span>
-                <span v-if="m.type === 'video' && (m.durations || []).length >= 2" class="cap-chip cap-dur">{{ m.durations[0] }}–{{ m.durations[m.durations.length - 1] }}</span>
+                <span v-else-if="m.type === 'video' && (m.durations || []).length === 1" class="cfg-tag">{{ m.durations[0] }}</span>
-                <span v-else-if="m.type === 'video' && (m.durations || []).length === 1" class="cap-chip cap-dur">{{ m.durations[0] }}</span>
+                <span v-if="m.type === 'image'" v-for="r in (m.resolutions || [])" :key="'ir'+r" class="cfg-tag">{{ r }}</span>
-                <!-- Resolutions for image -->
+                <span v-if="m.reference_mode === 'frame' && m.max_reference_images > 0" class="cfg-tag">首尾帧{{ Math.min(m.max_reference_images, 2) }}</span>
-                <span v-if="m.type === 'image'" v-for="r in (m.resolutions || [])" :key="'ir'+r" class="cap-chip cap-slate">{{ r }}</span>
+                <span v-if="m.reference_mode === 'frame' && m.max_reference_images > 2" class="cfg-tag">参考图{{ refImages(m) }}</span>
-                <!-- Resolutions for video -->
+                <span v-else-if="m.reference_mode && m.reference_mode !== 'none' && m.reference_mode !== 'frame' && m.max_reference_images > 0" class="cfg-tag">参考图{{ refImages(m) }}</span>
-                <span v-if="m.type === 'video'" v-for="r in (m.resolutions || [])" :key="'vr'+r" class="cap-chip cap-slate">{{ r }}</span>
+                <span v-else-if="m.type === 'image' && m.image_to_image" class="cfg-tag">参考图</span>
-                <!-- Frame mode (首尾帧 2) -->
-                <span v-if="m.reference_mode === 'frame' && m.max_reference_images > 0" class="cap-chip cap-frame">首尾帧 {{ Math.min(m.max_reference_images, 2) }}</span>
-                <!-- Reference image mode (参考图 9) -->
-                <span v-if="m.reference_mode === 'frame' && m.max_reference_images > 2" class="cap-chip cap-ref">参考图 {{ refImages(m) }}</span>
-                <span v-else-if="m.reference_mode && m.reference_mode !== 'none' && m.reference_mode !== 'frame' && m.max_reference_images > 0" class="cap-chip cap-ref">参考图 {{ refImages(m) }}</span>
-                <span v-else-if="m.type === 'image' && m.image_to_image" class="cap-chip cap-ref">参考图</span>
-                <!-- 视频/音频参考上限,来自 /video-presets -->
                 <template v-if="caps(m)">
-                  <span v-if="caps(m).videos" class="cap-chip cap-media">视频 {{ caps(m).videos }}</span>
+                  <span v-if="caps(m).videos" class="cfg-tag">视频{{ caps(m).videos }}</span>
-                  <span v-if="caps(m).audios" class="cap-chip cap-media">音频 {{ caps(m).audios }}</span>
+                  <span v-if="caps(m).audios" class="cfg-tag">音频{{ caps(m).audios }}</span>
                 </template>
-                <!-- Ratios -->
+                <span v-for="r in (m.ratios || [])" :key="'rt'+r" class="cfg-tag">{{ r }}</span>
-                <span v-for="r in (m.ratios || [])" :key="'rt'+r" class="cap-chip cap-mono">{{ r.replace(':', '×') }}</span>
                 <span v-if="capEmpty(m)" class="text-white/30 text-xs">—</span>
               </div>
             </td>
 
-            <!-- Display weight — higher floats to the top of the dropdown/list -->
+            <!-- Successful generations to date -->
             <td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
-                :class="(m.weight || 0) !== 0 ? 'text-white/85' : 'text-white/30'"
+                :class="m.generation_count > 0 ? 'text-white/85 font-medium' : 'text-white/25'">
-                title="展示权重(越大越靠前)">
-              {{ m.weight || 0 }}
-            </td>
-
-            <!-- Successful generations to date, from event_log via /managed-models -->
-            <td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
-                :class="m.generation_count > 0 ? 'text-white/85' : 'text-white/25'">
               {{ (m.generation_count || 0).toLocaleString('en-US') }}
             </td>
 
@@ -256,7 +207,7 @@ onMounted(loadModels)
             <td class="px-3 py-3.5 align-middle">
               <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1"
                     :class="m.sellable
-                      ? 'bg-emerald-500/10 text-emerald-300 ring-emerald-400/30'
+                      ? 'bg-emerald-500/10 text-emerald-600 ring-emerald-500/25'
                       : 'bg-white/[0.05] text-white/40 ring-white/10'"
                     :title="m.sellable ? '全部档位有价且有启用渠道,对前台可见' : '配齐全部档位价格并绑定启用渠道后自动上架'">
                 {{ m.sellable ? '已上架' : '未上架' }}
@@ -288,116 +239,47 @@ onMounted(loadModels)
 </template>
 
 <style scoped>
-/* --- filter pills (mirrors LogsView so the admin shell stays consistent) */
+/* --- type tag (vivid 同款：图像蓝底 / 视频墨底) */
-.fp {
+.kind-tag {
-  display: inline-flex; align-items: center; gap: 0.35rem;
+  display: inline-flex; padding: 3px 10px; border-radius: 999px;
-  padding: 0.35rem 0.7rem; font-size: 0.72rem;
+  font-size: 12px; font-weight: 700; white-space: nowrap;
-  border-radius: 0.55rem;
-  color: rgb(255 255 255 / 0.65);
-  background: rgb(255 255 255 / 0.05);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
-  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
-}
-.fp:hover { background: rgb(255 255 255 / 0.09); color: white; }
-.fp-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
-.fp-emerald {
-  background: rgb(16 185 129 / 0.22);
-  color: rgb(110 231 183);
-  box-shadow: inset 0 0 0 1px rgb(110 231 183 / 0.45);
-}
-.fp-white {
-  background: rgb(255 255 255 / 0.18);
-  color: white;
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
 }
+.kind-image { background: rgb(14 165 233 / 0.12); color: rgb(2 132 199); }
+.kind-video { background: rgb(24 24 27 / 0.1); color: rgb(24 24 27); }
 
-/* --- price chips: tight pill showing a key (resolution or duration) plus
+/* --- pricing chip: 档位 + 普通价(绿) + 代理价(琥珀) --- */
-       its emerald-tinted price. */
+.p-chip {
-.price-chip {
+  display: inline-flex; align-items: baseline; gap: 6px;
-  display: inline-flex;
+  padding: 3px 9px; border-radius: 8px;
-  align-items: center;
+  background: var(--surface-2);
-  padding: 0.18rem 0.55rem;
+  box-shadow: inset 0 0 0 1px var(--hairline);
-  font-size: 0.7rem;
+  font-size: 12px; white-space: nowrap;
-  border-radius: 9999px;
-  background: rgb(255 255 255 / 0.04);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
-  white-space: nowrap;
 }
+.p-chip b { color: var(--fg); font-weight: 600; }
+.p-chip em { font-style: normal; font-weight: 700; color: rgb(5 150 105); font-variant-numeric: tabular-nums; }
+.p-chip em.ag { color: rgb(180 83 9); font-weight: 600; }
+.p-chip em.ag::before { content: '代理 '; font-size: 10px; font-weight: 500; opacity: 0.75; }
 
-/* --- capability chips: smaller, monochrome variants */
+/* --- config tags: uniform neutral mono chips (时长 / 分辨率 / 参考 / 比例) --- */
-.cap-chip {
+.cfg-tag {
   display: inline-flex; align-items: center;
-  padding: 0.15rem 0.5rem;
+  padding: 2px 8px; border-radius: 6px;
-  font-size: 0.68rem; font-weight: 500;
+  background: var(--surface-2);
-  border-radius: 9999px;
+  box-shadow: inset 0 0 0 1px var(--hairline);
+  font-size: 11px; font-weight: 600; color: var(--fg-2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   white-space: nowrap;
 }
-.cap-dur {
-  background: rgb(14 165 233 / 0.12);
-  color: rgb(147 197 253);
-  box-shadow: inset 0 0 0 1px rgb(129 140 248 / 0.3);
-}
-.cap-frame {
-  background: rgb(251 113 133 / 0.12);
-  color: rgb(244 114 182);
-  box-shadow: inset 0 0 0 1px rgb(244 114 182 / 0.35);
-}
-.cap-ref {
-  background: rgb(16 185 129 / 0.12);
-  color: rgb(110 231 183);
-  box-shadow: inset 0 0 0 1px rgb(52 211 153 / 0.3);
-}
-.cap-media {
-  background: rgb(245 158 11 / 0.12);
-  color: rgb(252 211 77);
-  box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.35);
-}
-.cap-slate {
-  background: rgb(255 255 255 / 0.05);
-  color: rgb(255 255 255 / 0.7);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
-}
-.cap-mono {
-  background: transparent;
-  color: rgb(255 255 255 / 0.5);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
-}
 
-/* --- danger variant for 删除 (kept for any other .btn-soft callers) */
+/* --- compact square icon button for the actions column --- */
-.btn-soft.danger {
-  color: rgb(253 164 175);
-  background: rgb(244 63 94 / 0.12);
-  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
-}
-.btn-soft.danger:hover {
-  color: white;
-  background: rgb(244 63 94 / 0.25);
-}
-
-/* --- compact square icon button for the actions column. Predictable
-       width (1.9rem × 3 + gaps) keeps the row inside its 9rem slot, so
-       the last button never gets clipped. */
 .act {
-  display: inline-flex;
+  display: inline-flex; align-items: center; justify-content: center;
-  align-items: center;
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
-  justify-content: center;
+  color: var(--fg-3); background: var(--surface-solid);
-  width: 1.9rem;
+  box-shadow: inset 0 0 0 1px var(--hairline);
-  height: 1.9rem;
-  border-radius: 0.5rem;
-  color: rgb(255 255 255 / 0.7);
-  background: rgb(255 255 255 / 0.04);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.act:hover { background: rgb(255 255 255 / 0.1); color: white; }
+.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
-.act.danger {
+.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
-  color: rgb(253 164 175);
+
-  background: rgb(244 63 94 / 0.12);
-  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
-}
-.act.danger:hover {
-  color: white;
-  background: rgb(244 63 94 / 0.25);
-}
 </style>

frontend/src/views/OrdersView.vue

@@ -8,6 +8,7 @@ import { api, jsonBody } from '../api'
 import { openPayment } from '../payment'
 import { refreshMe } from '../auth'
 import Icon from '../components/Icon.vue'
+import SelectMenu from '../components/SelectMenu.vue'
 
 const router = useRouter()
 const items = ref([])
@@ -34,6 +35,7 @@ function fmt(unix) {
   return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
 }
 
+const STATUS_OPTS = [{ value: '', label: '全部状态' }, { value: 'pending', label: '待支付' }, { value: 'paid', label: '已支付' }, { value: 'cancelled', label: '已取消' }]
 async function load() {
   loading.value = true
   const qs = new URLSearchParams({ limit: String(pageSize), offset: String((page.value - 1) * pageSize) })
@@ -91,27 +93,24 @@ async function cont(o) {
 
 <template>
   <section class="space-y-5 log-page">
-    <div class="flex items-end justify-between flex-wrap gap-3">
+    <div class="page-head">
       <div>
-        <h1 class="text-2xl font-semibold tracking-tight text-slate-900">订单</h1>
+        <h2 class="page-title">订单</h2>
-        <p class="text-sm text-slate-500 mt-1">{{ total }} 笔充值订单 · 未支付可继续支付</p>
+        <p class="page-sub">{{ total }} 笔充值订单 · 未支付可继续支付</p>
+      </div>
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
       </div>
-      <button @click="router.push('/settings')" class="btn-primary"><Icon name="spark" class="w-4 h-4" /> 去充值</button>
     </div>
 
     <!-- Filter bar -->
-    <div class="card p-3 flex items-center gap-3 flex-wrap">
+    <div class="card toolbar">
-      <div class="flex items-center gap-1.5">
+      <SelectMenu :model-value="status" compact :options="STATUS_OPTS" @update:model-value="setStatus" />
-        <button v-for="s in [['','全部'],['pending','待支付'],['paid','已支付'],['cancelled','已取消']]" :key="s[0]"
-                @click="setStatus(s[0])"
-                class="text-xs rounded-lg px-2.5 py-1.5 transition-colors"
-                :class="status === s[0] ? 'chip-on' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">{{ s[1] }}</button>
-      </div>
       <div class="flex-1 min-w-[180px]">
         <input v-model="search" @keyup.enter="doSearch" @change="doSearch"
-               class="field !py-1.5 text-xs" placeholder="搜索 订单号 / 金额 / 方式…" />
+               class="field" placeholder="搜索 订单号 / 金额 / 方式…" />
       </div>
-      <button @click="load" class="btn-soft"><Icon name="refresh" class="w-3.5 h-3.5" /> 刷新</button>
+      <button @click="router.push('/settings')" class="btn-primary ml-auto"><Icon name="spark" class="w-3.5 h-3.5" /> 去充值</button>
     </div>
 
     <div v-if="loading && !items.length" class="card text-center text-sm text-slate-400 py-24">加载中…</div>

frontend/src/views/OverviewView.vue

@@ -113,15 +113,15 @@ const recentLogs = computed(() => logs.value.slice(0, 12))
 
 // ---- formatters ----
 function statusLabel(s) { return s === 'healthy' ? '健康' : s === 'warning' ? '告警' : '未配置' }
-function statusDot(s) { return s === 'healthy' ? 'bg-emerald-400' : s === 'warning' ? 'bg-amber-400' : 'bg-rose-500' }
+function statusDot(s) { return s === 'healthy' ? 'bg-emerald-500' : s === 'warning' ? 'bg-amber-500' : 'bg-rose-500' }
 function statusPill(s) {
-  if (s === 'healthy') return 'bg-emerald-500/10 text-emerald-300 ring-emerald-400/30'
+  if (s === 'healthy') return 'bg-emerald-500/10 text-emerald-600 ring-emerald-500/25'
-  if (s === 'warning') return 'bg-amber-500/10 text-amber-300 ring-amber-400/30'
+  if (s === 'warning') return 'bg-amber-500/10 text-amber-600 ring-amber-500/25'
-  return 'bg-rose-500/10 text-rose-300 ring-rose-400/30'
+  return 'bg-rose-500/10 text-rose-600 ring-rose-500/25'
 }
 function logDot(status) {
-  if (status === 'success') return 'bg-emerald-400'
+  if (status === 'success') return 'bg-emerald-500'
-  if (status === 'pending') return 'bg-amber-400'
+  if (status === 'pending') return 'bg-amber-500'
   return 'bg-rose-500'
 }
 function fmtMs(ms) {
@@ -144,414 +144,340 @@ onUnmounted(() => clearInterval(timer))
 </script>
 
 <template>
-  <section class="space-y-4">
+  <section class="ov">
-    <!-- ===== Toolbar: overall health + refresh ===== -->
+    <!-- ===== 顶部：健康状态 + 刷新 ===== -->
-    <div class="flex items-center justify-between gap-3">
+    <div class="ov-bar">
-      <span class="inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium ring-1 tabular-nums"
+      <div>
-            :class="statusPill(overallHealth.tone)">
+        <h2 class="ov-title">运营概览</h2>
-        <span class="w-1.5 h-1.5 rounded-full" :class="statusDot(overallHealth.tone)"></span>
+        <p class="ov-sub">数据每 10 秒自动刷新</p>
-        {{ overallHealth.label }}
+      </div>
-      </span>
+      <div class="ov-bar__right">
-      <button @click="refreshAll" class="btn-ghost">刷新</button>
+        <span class="pill" :class="'pill--' + overallHealth.tone">
+          <span class="dot" :class="'dot--' + overallHealth.tone"></span>{{ overallHealth.label }}
+        </span>
+        <button @click="refreshAll" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+      </div>
     </div>
 
-    <!-- ===== KPI strip ===== -->
+    <!-- ===== KPI 带：一张卡四列 ===== -->
-    <div class="grid grid-cols-2 lg:grid-cols-6 gap-3">
+    <div class="panel kpis">
-      <!-- 用户 -->
+      <div class="kpi">
-      <div class="card p-4">
+        <div class="kpi-label">今日生成</div>
-        <div class="flex items-center justify-between">
+        <div class="kpi-num">{{ fmtInt(today.total) }}</div>
-          <span class="text-xs text-white/55">用户</span>
+        <div class="kpi-meta">
-          <span class="w-7 h-7 rounded-lg bg-sky-500/15 text-sky-300 grid place-items-center ring-1 ring-sky-400/20">
+          <span class="ok">{{ today.success }} 成功</span>
-            <Icon name="accounts" class="w-3.5 h-3.5" />
+          <span v-if="today.failed" class="bad">{{ today.failed }} 失败</span>
-          </span>
+          <span v-if="today.pending" class="warn">{{ today.pending }} 进行中</span>
-        </div>
-        <div class="text-2xl font-semibold tabular-nums mt-2">{{ fmtInt(userStats.total) }}</div>
-        <div class="text-[11px] text-white/45 mt-1">{{ userStats.active }} 活跃 · {{ userStats.admins }} 管理员</div>
-        <div class="text-[11px] text-emerald-300/80 mt-0.5">
-          今日新增 <span class="tabular-nums font-medium">{{ fmtInt(userStats.new_24h) }}</span>
-          · 7日 <span class="tabular-nums font-medium">{{ fmtInt(userStats.new_7d) }}</span>
         </div>
+        <div class="kpi-foot">消耗 {{ fmtCredits(today.spent) }} 积分 · {{ fmtInt(todayDau) }} 人活跃</div>
       </div>
-
+      <div class="kpi">
-      <!-- 今日(零点起 · Asia/Shanghai) -->
+        <div class="kpi-label">近 24 小时</div>
-      <div class="card p-4">
+        <div class="kpi-num">
-        <div class="flex items-center justify-between">
+          {{ fmtInt(day.total) }}
-          <span class="text-xs text-white/55">今日生成</span>
+          <span v-if="dayDelta.pct != null" class="delta" :class="'delta--' + dayDelta.dir">
-          <span class="w-7 h-7 rounded-lg bg-rose-500/15 text-rose-300 grid place-items-center ring-1 ring-rose-400/20">
-            <Icon name="spark" class="w-3.5 h-3.5" />
-          </span>
-        </div>
-        <div class="text-2xl font-semibold tabular-nums mt-2">{{ fmtInt(today.total) }}</div>
-        <div class="text-[11px] mt-1 flex flex-wrap gap-x-2">
-          <span class="text-emerald-300 tabular-nums">{{ today.success }} 成功</span>
-          <span v-if="today.failed" class="text-rose-300 tabular-nums">{{ today.failed }} 失败</span>
-          <span v-if="today.pending" class="text-amber-300 tabular-nums">{{ today.pending }} 进行中</span>
-        </div>
-        <div class="text-[11px] text-amber-300 mt-1 tabular-nums">
-          消耗 {{ fmtCredits(today.spent) }} 积分 · {{ fmtInt(todayDau) }} 活跃
-        </div>
-      </div>
-
-      <!-- 24h -->
-      <div class="card p-4">
-        <div class="flex items-center justify-between">
-          <span class="text-xs text-white/55">近 24 小时生成</span>
-          <span class="w-7 h-7 rounded-lg bg-orange-500/15 text-orange-300 grid place-items-center ring-1 ring-orange-400/20">
-            <Icon name="spark" class="w-3.5 h-3.5" />
-          </span>
-        </div>
-        <div class="text-2xl font-semibold tabular-nums mt-2 flex items-baseline gap-2">
-          <span>{{ fmtInt(day.total) }}</span>
-          <span v-if="dayDelta.pct != null"
-                class="text-[11px] font-medium tabular-nums"
-                :class="dayDelta.dir === 'up' ? 'text-emerald-300' : dayDelta.dir === 'down' ? 'text-rose-300' : 'text-white/45'">
             {{ dayDelta.dir === 'up' ? '↑' : dayDelta.dir === 'down' ? '↓' : '·' }}{{ Math.abs(dayDelta.pct) }}%
           </span>
         </div>
-        <div class="text-[11px] mt-1 flex flex-wrap gap-x-2">
+        <div class="kpi-meta">
-          <span class="text-emerald-300 tabular-nums">{{ day.success }} 成功</span>
+          <span class="ok">{{ day.success }} 成功</span>
-          <span v-if="day.failed" class="text-rose-300 tabular-nums">{{ day.failed }} 失败</span>
+          <span v-if="day.failed" class="bad">{{ day.failed }} 失败</span>
-          <span v-if="day.pending" class="text-amber-300 tabular-nums">{{ day.pending }} 进行中</span>
+          <span class="mute">成功率 {{ successRate }}%</span>
-        </div>
-        <div v-if="day.total" class="text-[10px] text-white/40 mt-1 tabular-nums">
-          Web {{ day.web }} · API {{ day.api }} · 图 {{ day.image }} · 视 {{ day.video }}
         </div>
+        <div class="kpi-foot">Web {{ day.web }} · API {{ day.api }} · 图 {{ day.image }} · 视 {{ day.video }}</div>
       </div>
-
+      <div class="kpi">
-      <!-- 累计生成(全部 · 持久计数,不随日志清理变化) -->
+        <div class="kpi-label">累计生成</div>
-      <div class="card p-4">
+        <div class="kpi-num">{{ fmtInt(lifetime.total || 0) }}</div>
-        <div class="flex items-center justify-between">
+        <div class="kpi-meta">
-          <span class="text-xs text-white/55">累计生成</span>
+          <span class="ok">{{ lifetime.success || 0 }} 成功</span>
-          <span class="w-7 h-7 rounded-lg bg-sky-500/15 text-sky-300 grid place-items-center ring-1 ring-sky-400/20">
+          <span v-if="lifetime.failed" class="bad">{{ lifetime.failed }} 失败</span>
-            <Icon name="overview" class="w-3.5 h-3.5" />
-          </span>
-        </div>
-        <div class="text-2xl font-semibold tabular-nums mt-2">{{ fmtInt(lifetime.total || 0) }}</div>
-        <div class="text-[11px] mt-1 flex flex-wrap gap-x-2">
-          <span class="text-emerald-300 tabular-nums">{{ lifetime.success || 0 }} 成功</span>
-          <span v-if="lifetime.failed" class="text-rose-300 tabular-nums">{{ lifetime.failed }} 失败</span>
-        </div>
-        <div class="text-[10px] text-white/40 mt-1 tabular-nums">
-          API {{ lifetime.api || 0 }} · 图 {{ lifetime.image || 0 }} · 视 {{ lifetime.video || 0 }}
         </div>
+        <div class="kpi-foot">API {{ lifetime.api || 0 }} · 图 {{ lifetime.image || 0 }} · 视 {{ lifetime.video || 0 }}</div>
       </div>
-
+      <div class="kpi">
-      <!-- 平均耗时 -->
+        <div class="kpi-label">平均耗时 · 24h</div>
-      <div class="card p-4">
+        <div class="kpi-num">{{ fmtMs(avg24hMs) }}</div>
-        <div class="flex items-center justify-between">
+        <div class="kpi-meta"><span class="mute">产物存储 {{ fmtSize(stats.generated_size_bytes || 0) }}</span></div>
-          <span class="text-xs text-white/55">平均耗时</span>
+        <div class="kpi-foot">{{ fmtInt(stats.generated_count) }} 个文件</div>
-          <span class="w-7 h-7 rounded-lg bg-emerald-500/15 text-emerald-300 grid place-items-center ring-1 ring-emerald-400/20">
-            <Icon name="refresh" class="w-3.5 h-3.5" />
-          </span>
-        </div>
-        <div class="text-2xl font-semibold tabular-nums mt-2">{{ fmtMs(avg24hMs) }}</div>
-        <div class="text-[11px] text-white/45 mt-1">{{ successRate }}% 成功率 · 24h</div>
-      </div>
-
-      <!-- 存储 -->
-      <div class="card p-4">
-        <div class="flex items-center justify-between">
-          <span class="text-xs text-white/55">产物存储</span>
-          <span class="w-7 h-7 rounded-lg bg-amber-500/15 text-amber-300 grid place-items-center ring-1 ring-amber-400/20">
-            <Icon name="files" class="w-3.5 h-3.5" />
-          </span>
-        </div>
-        <div class="text-2xl font-semibold tabular-nums mt-2">{{ fmtSize(stats.generated_size_bytes || 0) }}</div>
-        <div class="text-[11px] text-white/45 mt-1">{{ fmtInt(stats.generated_count) }} 个文件</div>
       </div>
     </div>
 
-    <!-- ===== Secondary stat row ===== -->
+    <!-- ===== 资源条：用户 / 渠道 / 模型 / 积分 ===== -->
-    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+    <div class="strip">
-      <div class="card p-4">
+      <div class="chip">
-        <div class="text-xs text-white/55">系统积分总和</div>
+        <span class="chip-ic"><Icon name="accounts" :size="16" /></span>
-        <div class="text-xl font-semibold tabular-nums mt-2">{{ fmtCredits(userStats.credits_total) }}</div>
+        <div><div class="chip-num">{{ fmtInt(userStats.total) }}</div>
-        <div class="text-[11px] text-white/45 mt-1">
+          <div class="chip-label">用户 · {{ userStats.active }} 活跃 · 今日 +{{ fmtInt(userStats.new_24h) }}</div></div>
-          所有用户余额累加 · <span class="text-amber-300">24h 消耗 {{ fmtCredits(day.spent) }}</span>
-        </div>
       </div>
-      <div class="card p-4">
+      <div class="chip">
-        <div class="text-xs text-white/55">渠道</div>
+        <span class="chip-ic"><Icon name="plug" :size="16" /></span>
-        <div class="text-xl font-semibold tabular-nums mt-2 flex items-baseline gap-1">
+        <div><div class="chip-num">{{ tokens.active }}<small> / {{ tokens.total }}</small></div>
-          <span class="text-emerald-300">{{ tokens.active }}</span>
+          <div class="chip-label">渠道 · 启用 / 已配置</div></div>
-          <span class="text-white/30">/</span>
-          <span>{{ tokens.total }}</span>
-        </div>
-        <div class="text-[11px] text-white/45 mt-1">启用 / 已配置</div>
       </div>
-      <div class="card p-4">
+      <div class="chip">
-        <div class="text-xs text-white/55">模型</div>
+        <span class="chip-ic"><Icon name="models" :size="16" /></span>
-        <div class="text-xl font-semibold tabular-nums mt-2">{{ modelTypes.total }}</div>
+        <div><div class="chip-num">{{ modelTypes.total }}</div>
-        <div class="text-[11px] text-white/45 mt-1">图像 {{ modelTypes.image }} · 视频 {{ modelTypes.video }}</div>
+          <div class="chip-label">模型 · 图像 {{ modelTypes.image }} · 视频 {{ modelTypes.video }}</div></div>
       </div>
-      <div class="card p-4">
+      <div class="chip">
-        <div class="text-xs text-white/55">活跃用户 · 24h</div>
+        <span class="chip-ic"><Icon name="receipt" :size="16" /></span>
-        <div class="text-xl font-semibold tabular-nums mt-2">{{ fmtInt(dau) }}</div>
+        <div><div class="chip-num">{{ fmtCredits(userStats.credits_total) }}</div>
-        <div class="text-[11px] text-white/45 mt-1">近 3 天累计生成 {{ fmtInt(week.total) }}</div>
+          <div class="chip-label">系统积分总和 · 24h 消耗 {{ fmtCredits(day.spent) }}</div></div>
       </div>
     </div>
 
-    <!-- ===== Operations row: CDK / 邀请 / 签到 ===== -->
+    <!-- ===== 趋势（宽）+ 渠道健康 ===== -->
-    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+    <div class="split">
-      <!-- 兑换码 -->
+      <div class="panel">
-      <div class="card p-4">
+        <div class="panel-h">
-        <div class="flex items-center justify-between">
+          <h3>24 小时生成趋势</h3>
-          <span class="text-xs text-white/55">兑换码 CDK</span>
+          <div class="legend">
-          <span class="w-7 h-7 rounded-lg bg-sky-500/15 text-sky-300 grid place-items-center ring-1 ring-sky-400/20">
+            <span><i class="sw sw--ink"></i>图像</span>
-            <Icon name="spark" class="w-3.5 h-3.5" />
+            <span><i class="sw sw--soft"></i>视频</span>
-          </span>
+            <span class="tnum">峰值 {{ hourMax }}/h</span>
-        </div>
-        <div class="text-xl font-semibold tabular-nums mt-2 flex items-baseline gap-1">
-          <span class="text-emerald-300">{{ fmtInt(cdk.active) }}</span>
-          <span class="text-white/30 text-sm">未用 /</span>
-          <span class="text-white/70 text-base">{{ fmtInt(cdk.redeemed) }} 已兑</span>
-        </div>
-        <div class="text-[11px] text-white/45 mt-1">
-          待兑积分 <span class="text-amber-300 tabular-nums">{{ fmtCredits(cdk.active_amount) }}</span>
-          · 已发出 <span class="tabular-nums">{{ fmtCredits(cdk.redeemed_amount) }}</span>
-        </div>
-      </div>
-
-      <!-- 邀请 -->
-      <div class="card p-4">
-        <div class="flex items-center justify-between">
-          <span class="text-xs text-white/55">邀请</span>
-          <span class="w-7 h-7 rounded-lg bg-rose-500/15 text-rose-300 grid place-items-center ring-1 ring-rose-400/20">
-            <Icon name="accounts" class="w-3.5 h-3.5" />
-          </span>
-        </div>
-        <div class="text-xl font-semibold tabular-nums mt-2 flex items-baseline gap-1">
-          <span>{{ fmtInt(invites.total) }}</span>
-          <span class="text-white/40 text-sm">邀请注册</span>
-        </div>
-        <div class="text-[11px] text-white/45 mt-1">
-          <span class="text-emerald-300 tabular-nums">{{ fmtInt(invites.completed) }}</span> 已达成奖励
-          · 已发 <span class="text-amber-300 tabular-nums">{{ fmtCredits(invites.reward_paid) }}</span> 积分
-        </div>
-      </div>
-
-      <!-- 签到 -->
-      <div class="card p-4">
-        <div class="flex items-center justify-between">
-          <span class="text-xs text-white/55">今日签到</span>
-          <span class="w-7 h-7 rounded-lg bg-teal-500/15 text-teal-300 grid place-items-center ring-1 ring-teal-400/20">
-            <Icon name="refresh" class="w-3.5 h-3.5" />
-          </span>
-        </div>
-        <div class="text-xl font-semibold tabular-nums mt-2 flex items-baseline gap-1">
-          <span>{{ fmtInt(checkin.today) }}</span>
-          <span class="text-white/40 text-sm">人</span>
-        </div>
-        <div class="text-[11px] text-white/45 mt-1">
-          发放 <span class="text-amber-300 tabular-nums">{{ fmtCredits(checkin.awarded_today) }}</span> 积分
-        </div>
-      </div>
-    </div>
-
-    <!-- ===== Provider health + 24h trend ===== -->
-    <div class="grid lg:grid-cols-2 gap-3">
-      <div class="card">
-        <div class="px-5 py-3 border-b border-white/[0.06] flex items-center justify-between">
-          <h2 class="text-sm font-semibold">渠道健康</h2>
-          <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1"
-                :class="statusPill(overallHealth.tone)">
-            <span class="w-1.5 h-1.5 rounded-full" :class="statusDot(overallHealth.tone)"></span>
-            {{ overallHealth.label }}
-          </span>
-        </div>
-        <div class="p-3">
-          <div v-if="!providerHealth.length" class="text-center text-xs text-white/40 py-8">未配置渠道</div>
-          <div v-else class="space-y-0.5">
-            <div v-for="p in providerHealth" :key="p.id"
-                 class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-white/[0.04] transition-colors">
-              <div class="flex-1 min-w-0">
-                <div class="text-sm font-medium truncate">{{ p.name }}</div>
-                <div class="text-[11px] text-white/45 mt-0.5 truncate">
-                  {{ p.model_count }} 模型 · 成功 {{ p.success_total || 0 }}
-                  <span v-if="p.upstream_balance != null"> · 余额 {{ p.upstream_balance }}</span>
-                </div>
-              </div>
-              <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1 tabular-nums"
-                    :class="statusPill(p.status)">
-                <span class="w-1.5 h-1.5 rounded-full" :class="statusDot(p.status)"></span>
-                {{ statusLabel(p.status) }}
-              </span>
-            </div>
           </div>
         </div>
-      </div>
+        <div class="trend">
-
+          <div class="trend-bars">
-      <div class="card flex flex-col">
+            <div v-for="(b, i) in hourBuckets" :key="i" class="tb"
-        <div class="px-5 py-3 border-b border-white/[0.06] flex items-baseline justify-between">
-          <h2 class="text-sm font-semibold">24 小时生成趋势</h2>
-          <div class="text-[11px] text-white/45 flex items-center gap-3">
-            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-sm bg-sky-400/80"></span>图像</span>
-            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-sm bg-rose-400/80"></span>视频</span>
-            <span class="tabular-nums">峰值 {{ hourMax }}/h</span>
-          </div>
-        </div>
-        <div class="p-5 flex-1 flex flex-col">
-          <div class="flex items-end gap-[3px] flex-1 min-h-[8rem]">
-            <div v-for="(b, i) in hourBuckets" :key="i"
-                 class="group/bar relative flex-1 flex flex-col justify-end rounded-t overflow-visible"
                  :style="{ height: Math.max(4, ((b.image + b.video) / hourMax) * 100) + '%' }">
-              <!-- hover tooltip -->
+              <div class="tip">{{ 23 - i }}h 前 · 图 {{ b.image }} / 视 {{ b.video }}</div>
-              <div class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 z-10 hidden group-hover/bar:block
+              <div v-if="b.video" class="tb-v" :style="{ flex: b.video }"></div>
-                          whitespace-nowrap rounded-md bg-black/90 ring-1 ring-white/10 px-2 py-1 text-[10px] text-white/90 tabular-nums">
+              <div v-if="b.image" class="tb-i" :style="{ flex: b.image }"></div>
-                {{ 23 - i }}h 前 · 图 {{ b.image }} / 视 {{ b.video }}
+              <div v-if="!b.image && !b.video" class="tb-0"></div>
-              </div>
-              <div v-if="b.video" class="bg-rose-400/80 group-hover/bar:bg-rose-400" :style="{ flex: b.video }"></div>
-              <div v-if="b.image" class="bg-sky-400/80 group-hover/bar:bg-sky-400" :style="{ flex: b.image }"></div>
-              <div v-if="!b.image && !b.video" class="bg-white/[0.06] group-hover/bar:bg-white/15 flex-1 rounded-t"></div>
             </div>
           </div>
-          <div class="flex justify-between text-[10px] text-white/40 mt-2 tabular-nums">
+          <div class="trend-x"><span>-24h</span><span>-18h</span><span>-12h</span><span>-6h</span><span>现在</span></div>
-            <span>-24h</span><span>-18h</span><span>-12h</span><span>-6h</span><span>现在</span>
+        </div>
+      </div>
+
+      <div class="panel">
+        <div class="panel-h"><h3>渠道健康</h3></div>
+        <div class="list">
+          <div v-if="!providerHealth.length" class="empty">未配置渠道</div>
+          <div v-for="p in providerHealth" :key="p.id" class="row">
+            <div class="row-main">
+              <div class="row-name">{{ p.name }}</div>
+              <div class="row-sub">{{ p.model_count }} 模型 · 成功 {{ p.success_total || 0 }}<span v-if="p.upstream_balance != null"> · 余额 {{ p.upstream_balance }}</span></div>
+            </div>
+            <span class="pill" :class="'pill--' + p.status"><span class="dot" :class="'dot--' + p.status"></span>{{ statusLabel(p.status) }}</span>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- ===== Analytics (range-toggled): top models / failures / spenders ===== -->
+    <!-- ===== 运营：CDK / 邀请 / 签到 ===== -->
-    <div class="flex items-center justify-between gap-3 pt-1">
+    <div class="trio">
-      <h2 class="text-sm font-semibold text-white/80">使用分析 · <span class="text-white/45 font-normal">{{ rangeLabel }}</span></h2>
+      <div class="panel ops">
-      <div class="inline-flex rounded-lg bg-white/[0.04] ring-1 ring-white/[0.08] p-0.5 text-xs">
+        <div class="ops-label">兑换码 CDK</div>
-        <button @click="range = 'day'"
+        <div class="ops-num"><span class="ok">{{ fmtInt(cdk.active) }}</span><small>未用</small> <span class="sep">/</span> {{ fmtInt(cdk.redeemed) }}<small>已兑</small></div>
-                class="px-3 py-1 rounded-md transition-colors"
+        <div class="ops-foot">待兑 {{ fmtCredits(cdk.active_amount) }} 积分 · 已发出 {{ fmtCredits(cdk.redeemed_amount) }}</div>
-                :class="range === 'day' ? 'bg-white/10 text-white font-medium' : 'text-white/50 hover:text-white/80'">
+      </div>
-          近 24h
+      <div class="panel ops">
-        </button>
+        <div class="ops-label">邀请</div>
-        <button @click="range = 'week'"
+        <div class="ops-num">{{ fmtInt(invites.total) }}<small>邀请注册</small></div>
-                class="px-3 py-1 rounded-md transition-colors"
+        <div class="ops-foot">{{ fmtInt(invites.completed) }} 已达成奖励 · 已发 {{ fmtCredits(invites.reward_paid) }} 积分</div>
-                :class="range === 'week' ? 'bg-white/10 text-white font-medium' : 'text-white/50 hover:text-white/80'">
+      </div>
-          近 3d
+      <div class="panel ops">
-        </button>
+        <div class="ops-label">今日签到</div>
+        <div class="ops-num">{{ fmtInt(checkin.today) }}<small>人</small></div>
+        <div class="ops-foot">发放 {{ fmtCredits(checkin.awarded_today) }} 积分</div>
       </div>
     </div>
 
-    <div class="grid lg:grid-cols-2 gap-3">
+    <!-- ===== 使用分析 ===== -->
-      <div class="card">
+    <div class="ov-bar ov-bar--sub">
-        <div class="px-5 py-3 border-b border-white/[0.06]">
+      <h2 class="ov-title ov-title--sm">使用分析 <span class="mute">· {{ rangeLabel }}</span></h2>
-          <h2 class="text-sm font-semibold">热门模型</h2>
+      <div class="seg">
-        </div>
+        <button :class="{ on: range === 'day' }" @click="range = 'day'">近 24h</button>
-        <div class="p-5">
+        <button :class="{ on: range === 'week' }" @click="range = 'week'">近 3d</button>
-          <div v-if="!modelUsage.length" class="text-center text-xs text-white/40 py-6">尚无生成记录</div>
+      </div>
-          <div v-else class="space-y-3">
+    </div>
-            <div v-for="m in modelUsage" :key="m.model" class="text-sm">
+
-              <div class="flex items-baseline justify-between gap-3 mb-1">
+    <div class="split split--even">
-                <span class="font-mono text-[12px] text-white/85 truncate">{{ m.model }}</span>
+      <div class="panel">
-                <span class="flex items-baseline gap-2 shrink-0">
+        <div class="panel-h"><h3>热门模型</h3></div>
-                  <span v-if="m.avg_ms" class="text-[10px] text-white/40 tabular-nums">{{ fmtMs(m.avg_ms) }}</span>
+        <div class="list list--pad">
-                  <span class="tabular-nums text-xs font-semibold">{{ m.count }}</span>
+          <div v-if="!modelUsage.length" class="empty">尚无生成记录</div>
-                </span>
+          <div v-for="m in modelUsage" :key="m.model" class="bar-row">
-              </div>
+            <div class="bar-top">
-              <div class="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
+              <span class="mono">{{ m.model }}</span>
-                <div class="h-full rounded-full bg-gradient-to-r from-orange-400 to-rose-500"
+              <span class="bar-right"><em v-if="m.avg_ms">{{ fmtMs(m.avg_ms) }}</em><b>{{ m.count }}</b></span>
-                     :style="{ width: ((m.count / usageMax) * 100) + '%' }"></div>
-              </div>
             </div>
+            <div class="bar"><i :style="{ width: ((m.count / usageMax) * 100) + '%' }"></i></div>
           </div>
         </div>
       </div>
-
+      <div class="panel">
-      <div class="card">
+        <div class="panel-h"><h3>失败原因 Top</h3></div>
-        <div class="px-5 py-3 border-b border-white/[0.06]">
+        <div class="list list--pad">
-          <h2 class="text-sm font-semibold">失败原因 Top</h2>
+          <div v-if="!failures.length" class="empty">{{ rangeLabel }}内没有失败，一切正常</div>
-        </div>
+          <div v-for="f in failures" :key="f.reason" class="fail">
-        <div class="p-5">
+            <span class="dot dot--down"></span>
-          <div v-if="!failures.length" class="text-center text-xs text-white/40 py-6">{{ rangeLabel }}内没有失败 — 一切正常</div>
+            <span class="fail-r">{{ f.reason }}</span>
-          <div v-else class="space-y-2">
+            <b class="bad">×{{ f.count }}</b>
-            <div v-for="f in failures" :key="f.reason"
-                 class="flex items-start gap-3 px-2 py-2 rounded-lg hover:bg-white/[0.04]">
-              <span class="w-1.5 h-1.5 mt-1.5 rounded-full bg-rose-400 shrink-0"></span>
-              <div class="flex-1 min-w-0">
-                <div class="text-xs text-white/85 break-all leading-snug">{{ f.reason }}</div>
-              </div>
-              <span class="tabular-nums text-xs font-semibold text-rose-300 shrink-0">×{{ f.count }}</span>
-            </div>
           </div>
         </div>
       </div>
+      <div class="panel">
+        <div class="panel-h"><h3>用户消耗 Top</h3></div>
+        <div class="list list--pad">
+          <div v-if="!topUsers.length" class="empty">{{ rangeLabel }}内无消耗记录</div>
+          <div v-for="u in topUsers" :key="u.user_id || u.name" class="bar-row">
+            <div class="bar-top">
+              <span>{{ u.name }}</span>
+              <span class="bar-right"><em>{{ u.count }} 次</em><b>{{ fmtCredits(u.spent) }}</b></span>
+            </div>
+            <div class="bar"><i :style="{ width: ((u.spent / topUserMax) * 100) + '%' }"></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="panel-h"><h3>积分消耗概览</h3></div>
+        <div class="mini">
+          <div><div class="mini-l">近 24 小时</div><div class="mini-n">{{ fmtCredits(day.spent) }}</div><div class="mini-s">{{ day.success }} 次成功生成</div></div>
+          <div><div class="mini-l">近 3 天</div><div class="mini-n">{{ fmtCredits(week.spent) }}</div><div class="mini-s">{{ week.success }} 次成功生成</div></div>
+          <div><div class="mini-l">单次均价</div><div class="mini-n">{{ day.success ? fmtCredits(Math.round(day.spent / day.success)) : '—' }}</div><div class="mini-s">24h 平均</div></div>
+          <div><div class="mini-l">消耗用户数</div><div class="mini-n">{{ topUsers.length }}</div><div class="mini-s">{{ rangeLabel }}有消耗</div></div>
+        </div>
+      </div>
     </div>
 
-    <!-- ===== User consumption + spend summary ===== -->
+    <!-- ===== 最近活动 ===== -->
-    <div class="grid lg:grid-cols-2 gap-3">
+    <div class="panel">
-      <div class="card">
+      <div class="panel-h">
-        <div class="px-5 py-3 border-b border-white/[0.06]">
+        <h3>最近活动</h3>
-          <h2 class="text-sm font-semibold">用户消耗 Top · {{ rangeLabel }}</h2>
+        <router-link to="/admin/logs" class="more">查看全部 →</router-link>
-        </div>
-        <div class="p-5">
-          <div v-if="!topUsers.length" class="text-center text-xs text-white/40 py-6">{{ rangeLabel }}内无消耗记录</div>
-          <div v-else class="space-y-3">
-            <div v-for="u in topUsers" :key="u.user_id || u.name" class="text-sm">
-              <div class="flex items-baseline justify-between gap-3 mb-1">
-                <span class="text-[12px] text-white/85 truncate">{{ u.name }}</span>
-                <span class="flex items-baseline gap-2 shrink-0">
-                  <span class="text-[10px] text-white/40 tabular-nums">{{ u.count }} 次</span>
-                  <span class="tabular-nums text-xs font-semibold text-amber-300">{{ fmtCredits(u.spent) }}</span>
-                </span>
-              </div>
-              <div class="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
-                <div class="h-full rounded-full bg-gradient-to-r from-amber-400 to-orange-500"
-                     :style="{ width: ((u.spent / topUserMax) * 100) + '%' }"></div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
-
+      <div class="list">
-      <div class="card">
+        <div v-if="!recentLogs.length" class="empty">尚无活动</div>
-        <div class="px-5 py-3 border-b border-white/[0.06]">
+        <div v-for="e in recentLogs" :key="e.id" class="ov-act">
-          <h2 class="text-sm font-semibold">积分消耗概览</h2>
+          <span class="dot" :class="e.status === 'success' ? 'dot--healthy' : e.status === 'pending' ? 'dot--warning' : 'dot--down'"></span>
-        </div>
+          <span class="ov-act-kind">{{ e.kind === 'video' ? '视频' : '图像' }}</span>
-        <div class="p-5 grid grid-cols-2 gap-4">
+          <span class="mono ov-act-model">{{ e.model }}</span>
-          <div>
+          <span class="ov-act-prompt">{{ e.prompt }}</span>
-            <div class="text-xs text-white/55">近 24 小时</div>
+          <span class="ov-act-ms tnum">{{ fmtMs(e.elapsed_ms) }}</span>
-            <div class="text-2xl font-semibold tabular-nums mt-1 text-amber-300">{{ fmtCredits(day.spent) }}</div>
+          <span class="ov-act-ts tnum">{{ fmtTs(e.ts) }}</span>
-            <div class="text-[11px] text-white/40 mt-1">{{ day.success }} 次成功生成</div>
-          </div>
-          <div>
-            <div class="text-xs text-white/55">近 3 天</div>
-            <div class="text-2xl font-semibold tabular-nums mt-1 text-amber-300">{{ fmtCredits(week.spent) }}</div>
-            <div class="text-[11px] text-white/40 mt-1">{{ week.success }} 次成功生成</div>
-          </div>
-          <div>
-            <div class="text-xs text-white/55">单次均价</div>
-            <div class="text-xl font-semibold tabular-nums mt-1">{{ day.success ? fmtCredits(Math.round(day.spent / day.success)) : '—' }}</div>
-            <div class="text-[11px] text-white/40 mt-1">24h 平均</div>
-          </div>
-          <div>
-            <div class="text-xs text-white/55">消耗用户数</div>
-            <div class="text-xl font-semibold tabular-nums mt-1">{{ topUsers.length }}</div>
-            <div class="text-[11px] text-white/40 mt-1">{{ rangeLabel }}有消耗</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- ===== Recent activity (full width) ===== -->
-    <div class="card">
-      <div class="px-5 py-3 border-b border-white/[0.06] flex items-baseline justify-between">
-        <h2 class="text-sm font-semibold">最近活动</h2>
-        <router-link to="/admin/logs" class="text-[11px] text-white/55 hover:text-white">查看全部 →</router-link>
-      </div>
-      <div class="p-3">
-        <div v-if="!recentLogs.length" class="text-center text-xs text-white/40 py-6">尚无活动</div>
-        <div v-else>
-          <div v-for="e in recentLogs" :key="e.id"
-               class="flex items-center gap-3 px-2 py-2 text-xs rounded-lg hover:bg-white/[0.03]">
-            <span class="w-1.5 h-1.5 rounded-full shrink-0" :class="logDot(e.status)"></span>
-            <span class="text-[10px] uppercase tracking-wider font-medium w-9"
-                  :class="e.kind === 'video' ? 'text-rose-300' : 'text-sky-300'">
-              {{ e.kind === 'video' ? '视频' : '图像' }}
-            </span>
-            <span class="font-mono text-white/85 truncate w-40 shrink-0">{{ e.model }}</span>
-            <span class="text-white/55 truncate flex-1 min-w-0">{{ e.prompt }}</span>
-            <span class="text-white/40 tabular-nums whitespace-nowrap w-12 text-right">{{ fmtMs(e.elapsed_ms) }}</span>
-            <span class="text-white/40 whitespace-nowrap text-right tabular-nums">{{ fmtTs(e.ts) }}</span>
-          </div>
         </div>
       </div>
     </div>
   </section>
 </template>
+
+<style scoped>
+.ov { display: flex; flex-direction: column; gap: 16px; color: var(--fg); }
+.tnum { font-variant-numeric: tabular-nums; }
+.mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12px; }
+.mute { color: var(--fg-3); font-weight: 500; }
+.ok { color: #15803d; } .bad { color: #dc2626; } .warn { color: #b45309; }
+
+.ov-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
+.ov-bar--sub { margin-top: 8px; align-items: center; }
+.ov-bar__right { display: flex; align-items: center; gap: 10px; }
+.ov-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); }
+.ov-title--sm { font-size: 16px; }
+.ov-sub { margin-top: 2px; font-size: 12px; color: var(--fg-3); }
+.ov-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(24 24 27 / 0.12); background: var(--surface-solid); font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
+.ov-btn:hover { border-color: rgb(24 24 27 / 0.3); box-shadow: 0 4px 12px rgb(24 24 27 / 0.08); }
+
+.panel { background: var(--surface-solid); border: 1px solid rgb(24 24 27 / 0.07); border-radius: 18px; box-shadow: 0 1px 2px rgb(24 24 27 / 0.03), 0 10px 28px -16px rgb(24 24 27 / 0.12); }
+.panel-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
+.panel-h h3 { font-size: 14px; font-weight: 800; color: var(--fg); letter-spacing: -0.01em; }
+.more { font-size: 12px; font-weight: 600; color: var(--fg-3); text-decoration: none; }
+.more:hover { color: var(--fg); }
+
+.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f4f4f5; color: var(--fg-2); }
+.pill--healthy { background: rgb(21 128 61 / 0.1); color: #15803d; }
+.pill--warning { background: rgb(180 83 9 / 0.1); color: #b45309; }
+.pill--down { background: rgb(220 38 38 / 0.1); color: #dc2626; }
+.dot { width: 7px; height: 7px; border-radius: 50%; background: #a1a1aa; flex-shrink: 0; }
+.dot--healthy { background: #22c55e; } .dot--warning { background: #f59e0b; } .dot--down { background: #ef4444; }
+
+.kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
+.kpi { padding: 22px 24px; }
+.kpi + .kpi { border-left: 1px solid rgb(24 24 27 / 0.07); }
+.kpi-label { font-size: 12px; font-weight: 700; color: var(--fg-3); letter-spacing: .02em; }
+.kpi-num { margin-top: 10px; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; }
+.kpi-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-weight: 700; }
+.kpi-foot { margin-top: 8px; font-size: 11.5px; color: var(--fg-3); }
+.delta { font-size: 12px; font-weight: 700; }
+.delta--up { color: #15803d; } .delta--down { color: #dc2626; } .delta--flat { color: var(--fg-3); }
+
+.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+.chip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-solid); border: 1px solid rgb(24 24 27 / 0.07); border-radius: 16px; }
+.chip-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #f4f4f5; color: #18181b; flex-shrink: 0; }
+.chip-num { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
+.chip-num small { font-size: 13px; font-weight: 600; color: var(--fg-3); }
+.chip-label { margin-top: 3px; font-size: 11.5px; color: var(--fg-3); }
+
+.split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
+.split--even { grid-template-columns: 1fr 1fr; }
+
+.legend { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--fg-3); }
+.legend span { display: flex; align-items: center; gap: 5px; }
+.sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
+.sw--ink { background: #18181b; } .sw--soft { background: #d4d4d8; }
+.trend { padding: 18px 20px 16px; display: flex; flex-direction: column; height: calc(100% - 44px); min-height: 220px; }
+.trend-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; min-height: 150px; }
+.tb { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px 4px 0 0; overflow: visible; }
+.tb-i { background: #18181b; border-radius: 3px 3px 0 0; } .tb-v { background: #d4d4d8; }
+.tb-0 { flex: 1; background: #f1f1f3; border-radius: 3px 3px 0 0; }
+.tb:hover .tb-i { background: #3f3f46; }
+.tip { display: none; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 5; background: #18181b; color: #fff; font-size: 10.5px; padding: 4px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
+.tb:hover .tip { display: block; }
+.trend-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--fg-3); }
+
+.list { padding: 8px 12px 12px; }
+.list--pad { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
+.empty { padding: 28px 0; text-align: center; font-size: 12.5px; color: var(--fg-3); }
+.row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
+.row:hover { background: #f7f7f8; }
+.row-main { flex: 1; min-width: 0; }
+.row-name { font-size: 13.5px; font-weight: 700; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.row-sub { margin-top: 2px; font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+.ops { padding: 18px 20px; }
+.ops-label { font-size: 12px; font-weight: 700; color: var(--fg-3); }
+.ops-num { margin-top: 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--fg); }
+.ops-num small { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--fg-3); letter-spacing: 0; }
+.ops-num .sep { color: #d4d4d8; font-weight: 400; }
+.ops-foot { margin-top: 6px; font-size: 11.5px; color: var(--fg-3); }
+
+.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #f0f0f2; }
+.seg button { padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; font-size: 12px; font-weight: 700; color: var(--fg-3); cursor: pointer; transition: all .15s; }
+.seg button.on { background: var(--surface-solid); color: var(--fg); box-shadow: 0 1px 3px rgb(24 24 27 / 0.12); }
+
+.bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; color: var(--fg); }
+.bar-top > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bar-right { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
+.bar-right em { font-style: normal; font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
+.bar-right b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
+.bar { height: 6px; border-radius: 999px; background: #f1f1f3; overflow: hidden; }
+.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #18181b, #52525b); }
+
+.fail { display: flex; align-items: flex-start; gap: 10px; }
+.fail .dot { margin-top: 6px; }
+.fail-r { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg); word-break: break-all; }
+
+.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding: 18px 20px 22px; }
+.mini-l { font-size: 12px; font-weight: 700; color: var(--fg-3); }
+.mini-n { margin-top: 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--fg); }
+.mini-s { margin-top: 2px; font-size: 11.5px; color: var(--fg-3); }
+
+.ov-act { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 10px; font-size: 12.5px; }
+.ov-act:hover { background: #f7f7f8; }
+.ov-act-kind { width: 32px; font-size: 11px; font-weight: 700; color: var(--fg-3); }
+.ov-act-model { width: 170px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
+.ov-act-prompt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
+.ov-act-ms { width: 52px; text-align: right; color: var(--fg-3); }
+.ov-act-ts { color: var(--fg-3); white-space: nowrap; }
+
+@media (max-width: 1100px) {
+  .kpis, .strip { grid-template-columns: repeat(2, 1fr); }
+  .kpi:nth-child(3) { border-left: 0; }
+  .kpi:nth-child(n+3) { border-top: 1px solid rgb(24 24 27 / 0.07); }
+  .split, .split--even, .trio { grid-template-columns: 1fr; }
+}
+</style>

frontend/src/views/PlaygroundView.vue

@@ -830,15 +830,15 @@ onUnmounted(() => {
          so several generations can run at once (concurrent). -->
     <div class="card p-5 space-y-5 lg:sticky lg:top-24 self-start">
       <!-- mode switch -->
-      <div class="grid grid-cols-2 gap-2 p-1 bg-slate-100 rounded-xl">
+      <div class="mode-switch grid grid-cols-2 gap-2 p-1 bg-slate-100 rounded-xl">
         <button @click="setMode('image')" type="button"
                 class="rounded-lg py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed"
-                :class="mode === 'image' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'">
+                :class="mode === 'image' ? 'mode-on bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'">
           <Icon name="files" class="w-4 h-4 inline -mt-0.5" /> 生图
         </button>
         <button @click="setMode('video')" type="button"
                 class="rounded-lg py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed"
-                :class="mode === 'video' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'">
+                :class="mode === 'video' ? 'mode-on bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'">
           <Icon name="video" class="w-4 h-4 inline -mt-0.5" /> 生视频
         </button>
       </div>

frontend/src/views/SettingsView.vue

@@ -218,253 +218,185 @@ async function recharge() {
 </script>
 
 <template>
-  <div class="theme-text space-y-12">
+  <div class="space-y-5">
-    <!-- header -->
+    <div class="page-head">
-    <header class="flex items-end justify-between flex-wrap gap-4">
       <div>
-        <div class="text-[10px] uppercase tracking-[0.3em] text-orange-300/70 font-medium">账户</div>
+        <h2 class="page-title">设置</h2>
-        <h1 class="mt-2 text-4xl md:text-5xl font-bold tracking-tight">设置</h1>
+        <p class="page-sub">API Key、密码、积分、签到 — 账户全在这里。</p>
-        <p class="text-white/45 mt-2">API Key、密码、积分、登录状态 — 都在这里。</p>
       </div>
-      <button @click="logout"
+    </div>
-              class="inline-flex items-center gap-2 rounded-full bg-rose-500/15 text-rose-300 hover:bg-rose-500/25 hover:text-rose-200 ring-1 ring-rose-500/30 px-4 py-2 text-sm font-medium transition-all">
-        <Icon name="close" class="w-3.5 h-3.5" /> 退出登录
-      </button>
-    </header>
 
-    <!-- ===== Account info ===== -->
+    <!-- ===== 账户信息 ===== -->
     <section class="card p-6">
-      <div class="flex items-center gap-2 mb-4">
+      <div class="sec-head">
-        <Icon name="accounts" class="w-4 h-4 text-orange-300" />
+        <span class="sec-ico"><Icon name="accounts" :size="16" /></span>
-        <h2 class="text-sm font-semibold">账户信息</h2>
+        <h3>账户信息</h3>
       </div>
-      <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 text-sm">
+      <div class="grid grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-5">
-        <div>
+        <div class="st-item">
-          <div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">用户名</div>
+          <div class="st-label">用户名</div>
-          <div class="text-white/90 font-medium truncate" :title="auth.user?.name || ''">{{ auth.user?.name || '—' }}</div>
+          <div class="st-value truncate" :title="auth.user?.name || ''">{{ auth.user?.name || '—' }}</div>
         </div>
-        <div class="col-span-2 lg:col-span-1">
+        <div class="st-item">
-          <div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">绑定邮箱</div>
+          <div class="st-label">绑定邮箱</div>
-          <div class="text-white/90 font-mono text-xs break-all" :title="auth.user?.email || ''">{{ auth.user?.email || '—' }}</div>
+          <div class="st-value break-all" :title="auth.user?.email || ''">{{ auth.user?.email || '—' }}</div>
         </div>
-        <div>
+        <div class="st-item">
-          <div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">角色</div>
+          <div class="st-label">角色</div>
-          <div class="text-white/90">{{ roleLabel }}</div>
+          <div class="st-value">{{ roleLabel }}</div>
         </div>
-        <div>
+        <div class="st-item">
-          <div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">积分余额</div>
+          <div class="st-label">积分余额</div>
-          <div class="text-amber-300 font-semibold tabular-nums">{{ pointsLabel(balance) }}</div>
+          <div class="st-value st-num text-amber-600">{{ pointsLabel(balance) }}</div>
         </div>
-        <div>
+        <div class="st-item">
-          <div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">累计充值</div>
+          <div class="st-label">累计充值</div>
-          <div class="text-emerald-300 font-semibold tabular-nums">¥{{ rechargeTotal }}</div>
+          <div class="st-value st-num text-emerald-600">¥{{ rechargeTotal }}</div>
         </div>
+        <div class="st-item">
+          <div class="st-label">并发上限</div>
+          <div class="st-value truncate" :title="concurrencyLabel">{{ concurrencyLabel }}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== API Key ===== -->
+    <section class="card p-6">
+      <div class="grid md:grid-cols-[220px_1fr] gap-6 items-start">
         <div>
-          <div class="text-[11px] text-white/40 uppercase tracking-wider mb-1">并发上限</div>
+          <div class="sec-head">
-          <div class="text-white/90 truncate" :title="concurrencyLabel">{{ concurrencyLabel }}</div>
+            <span class="sec-ico"><Icon name="plug" :size="16" /></span>
+            <h3>API Key</h3>
+          </div>
+          <p class="text-[13px] text-[color:var(--fg-3)] leading-relaxed mt-1">
+            调用 <code class="key-code">/v1/*</code> 接口的访问密钥。完整密钥不保存，仅生成时显示一次。
+          </p>
+        </div>
+        <div>
+          <div v-if="hasKey" class="key-box">
+            <code class="flex-1 font-mono text-[13px] text-[color:var(--fg)] break-all">{{ apiKeyRevealed && apiKey ? apiKey : maskedKey }}</code>
+            <button v-if="apiKey" @click="apiKeyRevealed = !apiKeyRevealed" class="btn-soft !h-8">{{ apiKeyRevealed ? '隐藏' : '显示' }}</button>
+            <button @click="copyKey" :title="apiKey ? '复制完整 Key' : '完整 Key 仅生成时显示一次，已无法找回'"
+                    class="btn-soft !h-8" :class="!apiKey && 'opacity-40'">复制</button>
+          </div>
+          <div v-else class="rounded-xl border border-dashed border-[color:var(--hairline)] px-4 py-5 text-center text-xs text-[color:var(--fg-faint)]">
+            还没有 Key — 点下面的「生成」按钮自动生成
+          </div>
+          <p v-if="apiKey" class="text-[11px] text-amber-600 mt-2">⚠ 完整 Key 仅显示这一次，请立刻复制保存。</p>
+          <div class="mt-3 flex gap-2">
+            <button @click="generateKey" class="btn-primary">{{ hasKey ? '重新生成' : '生成 Key' }}</button>
+            <button v-if="hasKey" @click="clearKey" class="btn-danger-soft">清除</button>
+          </div>
+          <p class="text-[11px] text-[color:var(--fg-faint)] mt-3">
+            Key 由系统随机生成，不能手动填写。重新生成会让旧 Key 立刻失效。完整调用示例见
+            <router-link to="/docs" class="underline underline-offset-2">接口文档</router-link>。
+          </p>
         </div>
       </div>
     </section>
 
-    <!-- ===== Two-column grid ===== -->
     <div class="grid lg:grid-cols-2 gap-5">
-
+      <!-- ===== 每日签到 ===== -->
-      <!-- API KEY (full width) -->
+      <section v-if="checkinEnabled" class="card p-6">
-      <section class="lg:col-span-2 card overflow-hidden">
+        <div class="sec-head">
-        <div class="p-7 md:p-8 relative">
+          <span class="sec-ico"><Icon name="refresh" :size="16" /></span>
-          <div class="absolute -top-16 -right-16 w-48 h-48 rounded-full opacity-30 blur-3xl"
+          <h3>每日签到</h3>
-               style="background: radial-gradient(circle,#27272a,transparent 60%)"></div>
+        </div>
-          <div class="relative grid md:grid-cols-[260px_1fr] gap-8 items-start">
+        <p class="text-[13px] text-[color:var(--fg-3)] mt-1">每天签到 +{{ checkinReward }} 积分。</p>
-            <div>
+        <div class="mt-4 flex items-baseline gap-2">
-              <div class="inline-grid w-10 h-10 rounded-xl bg-orange-500/15 ring-1 ring-orange-400/30 grid place-items-center text-orange-300">
+          <span class="text-3xl font-extrabold tabular-nums tracking-tight">{{ streak }}</span>
-                <Icon name="plug" class="w-4 h-4" />
+          <span class="text-xs text-[color:var(--fg-3)]">天连续</span>
-              </div>
+        </div>
-              <h2 class="text-xl font-bold mt-4">API Key</h2>
+        <div class="mt-4 flex items-center gap-1.5">
-              <p class="text-sm text-white/50 mt-2 leading-relaxed">
+          <div v-for="(d, i) in last7" :key="d.ds" class="ck-day"
-                调用 <code class="bg-white/10 text-white/90 px-1 py-0.5 rounded text-xs">/v1/*</code> 接口需要的访问密钥。完整密钥不保存，仅生成时显示一次。
+               :class="d.lit || (d.isToday && checkedToday) ? 'ck-lit' : d.isToday ? 'ck-today' : ''">
-              </p>
+            <Icon v-if="d.lit || (d.isToday && checkedToday)" name="spark" :size="12" />
-            </div>
+            <span v-else class="text-[10px]">{{ d.isToday ? '今' : i + 1 }}</span>
-            <div>
-              <label class="block text-xs text-white/50 mb-2">当前密钥</label>
-
-              <!-- has a key -->
-              <div v-if="hasKey" class="rounded-xl bg-white/[0.05] ring-1 ring-white/10 px-4 py-3 flex items-center gap-3">
-                <code class="flex-1 font-mono text-sm text-white/90 break-all">{{ apiKeyRevealed && apiKey ? apiKey : maskedKey }}</code>
-                <button v-if="apiKey" @click="apiKeyRevealed = !apiKeyRevealed"
-                        class="text-xs rounded-lg px-2.5 py-1.5 ring-1 ring-white/10 hover:bg-white/[0.06] hover:ring-white/20 transition-all whitespace-nowrap">
-                  {{ apiKeyRevealed ? '隐藏' : '显示' }}
-                </button>
-                <button @click="copyKey"
-                        :title="apiKey ? '复制完整 Key' : '完整 Key 仅生成时显示一次，已无法找回'"
-                        class="text-xs rounded-lg px-2.5 py-1.5 ring-1 ring-white/10 transition-all hover:bg-white/[0.06] hover:ring-white/20"
-                        :class="!apiKey && 'opacity-40'">
-                  复制
-                </button>
-              </div>
-
-              <!-- no key -->
-              <div v-else class="rounded-xl border border-dashed border-white/15 px-4 py-5 text-center text-xs text-white/40">
-                还没有 Key — 点下面的「生成」按钮自动生成
-              </div>
-
-              <p v-if="apiKey" class="text-[11px] text-amber-300/80 mt-2">⚠ 完整 Key 仅显示这一次,请立刻复制保存。</p>
-
-              <!-- actions -->
-              <div class="mt-3 flex gap-2">
-                <button @click="generateKey"
-                        class="rounded-xl bg-white text-black hover:bg-white/90 px-5 py-2.5 text-sm font-semibold transition-colors">
-                  {{ hasKey ? '重新生成' : '生成 Key' }}
-                </button>
-                <button v-if="hasKey" @click="clearKey"
-                        class="rounded-xl ring-1 ring-rose-500/30 text-rose-300 hover:bg-rose-500/15 px-4 py-2.5 text-sm transition-colors">
-                  清除
-                </button>
-              </div>
-
-              <p class="text-[11px] text-white/40 mt-3">
-                Key 由系统随机生成,不能手动填写。重新生成会让旧 Key 立刻失效。完整调用示例见
-                <router-link to="/docs" class="text-orange-300 underline">接口文档</router-link>。
-              </p>
-            </div>
           </div>
         </div>
-      </section>
+        <button @click="checkin" :disabled="checkedToday" class="btn-primary w-full mt-5 !py-2.5">
-
+          {{ checkedToday ? '今日已签到 · 明天再来' : `立即签到 +${checkinReward} 积分` }}
-      <!-- CHECK-IN -->
-      <section v-if="checkinEnabled" class="relative card p-7 md:p-8 overflow-hidden">
-        <div class="inline-grid w-10 h-10 rounded-xl bg-sky-500/15 ring-1 ring-sky-400/30 grid place-items-center text-sky-300">
-          <Icon name="refresh" class="w-4 h-4" />
-        </div>
-        <h2 class="text-xl font-bold mt-4">每日签到</h2>
-        <p class="text-sm text-white/50 mt-2">每天签到 +{{ checkinReward }} 积分。</p>
-
-        <!-- streak -->
-        <div class="mt-5 flex items-baseline gap-2">
-          <span class="text-3xl font-bold tabular-nums">{{ streak }}</span>
-          <span class="text-xs text-white/40 uppercase tracking-widest">天连续</span>
-        </div>
-
-        <!-- 7-day dots -->
-        <div class="mt-5 flex items-center gap-1.5">
-          <div v-for="(d, i) in last7" :key="d.ds"
-               class="flex-1 h-12 rounded-xl ring-1 transition-all flex flex-col items-center justify-center"
-               :class="d.lit
-                 ? 'bg-sky-500 ring-sky-400 text-white'
-                 : d.isToday
-                   ? (checkedToday ? 'bg-sky-500 ring-sky-400 text-white' : 'bg-white/[0.05] ring-white/15 text-white/60')
-                   : 'bg-white/[0.02] ring-white/[0.06] text-white/30'">
-            <Icon v-if="d.lit || (d.isToday && checkedToday)" name="spark" class="w-3 h-3" />
-            <span v-else class="text-[10px] uppercase">{{ d.isToday ? '今' : i + 1 }}</span>
-          </div>
-        </div>
-
-        <button @click="checkin" :disabled="checkedToday"
-                class="mt-5 w-full rounded-xl bg-white text-black hover:bg-white/90 disabled:bg-white/10 disabled:text-white/40 disabled:cursor-not-allowed py-3 text-sm font-semibold transition-colors">
-          {{ checkedToday ? `今日已签到 · 明天再来` : `立即签到 +${checkinReward} 积分` }}
         </button>
       </section>
 
-      <!-- RECHARGE (易支付) — hidden unless the admin enabled 充值 -->
+      <!-- ===== 积分充值 ===== -->
-      <section v-if="payCfg.enabled" class="relative card p-7 md:p-8 overflow-hidden">
+      <section v-if="payCfg.enabled" class="card p-6">
-        <div class="inline-grid w-10 h-10 rounded-xl bg-emerald-500/15 ring-1 ring-emerald-400/30 grid place-items-center text-emerald-300">
+        <div class="sec-head">
-          <Icon name="spark" class="w-4 h-4" />
+          <span class="sec-ico"><Icon name="spark" :size="16" /></span>
+          <h3>积分充值</h3>
         </div>
-        <h2 class="text-xl font-bold mt-4">积分充值</h2>
+        <p class="text-[13px] text-[color:var(--fg-3)] mt-1">累计充值 <strong class="text-emerald-600">¥{{ rechargeTotal }}</strong> · {{ payCfg.points_ratio }} 积分 / 元</p>
-        <p class="text-sm text-white/50 mt-2">累计充值 <strong class="text-emerald-300">¥{{ rechargeTotal }}</strong> · {{ payCfg.points_ratio }} 积分 / 元</p>
+        <div class="grid grid-cols-3 sm:grid-cols-5 gap-2 mt-4">
-
-        <div class="grid grid-cols-3 sm:grid-cols-5 gap-2 mt-5">
           <button v-for="a in AMOUNTS" :key="a" @click="picked = a" class="amt" :class="picked === a && 'amt-on'">{{ a }}元</button>
           <button @click="picked = 'custom'" class="amt" :class="picked === 'custom' && 'amt-on'">自定义</button>
         </div>
-        <input v-if="picked === 'custom'" v-model="customAmount" type="number" min="1" step="1" placeholder="输入金额(元)"
+        <input v-if="picked === 'custom'" v-model="customAmount" type="number" min="1" step="1" placeholder="输入金额（元）"
-               class="amt-input mt-3 w-full px-4 py-2.5 text-sm" />
+               class="field mt-3" />
-
+        <div class="flex gap-2 mt-3">
-        <div class="flex gap-2 mt-4">
           <button v-for="m in payCfg.methods" :key="m" @click="payMethod = m" class="amt flex-1" :class="payMethod === m && 'amt-on'">{{ methodName(m) }}</button>
         </div>
-
         <div class="mt-5 flex items-center justify-between gap-3">
-          <span class="text-sm text-white/60">到账 <strong class="text-orange-300 text-base tabular-nums">{{ pointsPreview }}</strong> 积分</span>
+          <span class="text-sm text-[color:var(--fg-2)]">到账 <strong class="text-amber-600 text-base tabular-nums">{{ pointsPreview }}</strong> 积分</span>
-          <button @click="recharge" :disabled="recharging"
+          <button @click="recharge" :disabled="recharging" class="btn-primary">
-                  class="rounded-xl bg-white text-black hover:bg-white/90 disabled:opacity-60 disabled:cursor-not-allowed px-6 py-2.5 text-sm font-semibold transition-colors inline-flex items-center gap-2">
+            <span v-if="recharging" class="w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin"></span>
-            <span v-if="recharging" class="w-3.5 h-3.5 rounded-full border-2 border-black/30 border-t-black animate-spin"></span>
             {{ recharging ? '下单中…' : '立即充值' }}
           </button>
         </div>
       </section>
 
-      <!-- CDK REDEEM — hidden when the admin turns the 兑换码 switch off -->
+      <!-- ===== 兑换码 ===== -->
-      <section v-if="site.cdkRedeemEnabled" class="relative card p-7 md:p-8 overflow-hidden">
+      <section v-if="site.cdkRedeemEnabled" class="card p-6">
-        <div class="inline-grid w-10 h-10 rounded-xl bg-emerald-500/15 ring-1 ring-emerald-400/30 grid place-items-center text-emerald-300">
+        <div class="sec-head">
-          <Icon name="spark" class="w-4 h-4" />
+          <span class="sec-ico"><Icon name="spark" :size="16" /></span>
+          <h3>兑换码充值</h3>
         </div>
-        <h2 class="text-xl font-bold mt-4">兑换码充值</h2>
+        <div class="mt-3 flex items-baseline gap-2">
-        <div class="mt-2 flex items-baseline gap-2">
+          <span class="text-3xl font-extrabold tabular-nums tracking-tight">{{ points(balance).toLocaleString('en-US') }}</span>
-          <span class="text-3xl font-bold tabular-nums">{{ points(balance).toLocaleString('en-US') }}</span>
+          <span class="text-xs text-[color:var(--fg-3)]">积分余额</span>
-          <span class="text-xs text-white/40 uppercase tracking-widest">积分余额</span>
         </div>
-
+        <div class="mt-4 flex gap-2">
-        <div class="mt-5 flex gap-2">
+          <input v-model="cdkCode" @keyup.enter="redeemCdk" placeholder="输入兑换码（CDK）"
-          <input v-model="cdkCode" @keyup.enter="redeemCdk" placeholder="输入兑换码 (CDK)"
+                 class="field flex-1 font-mono uppercase tracking-wider" />
-                 class="flex-1 rounded-xl bg-white/[0.05] ring-1 ring-white/10 focus:ring-white/30 px-4 py-3 text-sm font-mono uppercase tracking-wider outline-none transition-colors placeholder:text-white/30 placeholder:normal-case placeholder:tracking-normal" />
+          <button @click="redeemCdk" :disabled="cdkBusy" class="btn-primary shrink-0">{{ cdkBusy ? '兑换中…' : '兑换' }}</button>
-          <button @click="redeemCdk" :disabled="cdkBusy"
-                  class="rounded-xl bg-white text-black hover:bg-white/90 disabled:opacity-40 px-5 py-3 text-sm font-semibold transition-colors">
-            {{ cdkBusy ? '兑换中…' : '兑换' }}
-          </button>
         </div>
-        <p v-if="cdkError" class="text-xs text-rose-400 mt-2">{{ cdkError }}</p>
+        <p v-if="cdkError" class="text-xs text-rose-600 mt-2">{{ cdkError }}</p>
-        <p class="text-[11px] text-white/35 mt-3">兑换码每个仅可使用一次。还没有兑换码?到商店购买后回此处充值。</p>
+        <p class="text-[11px] text-[color:var(--fg-faint)] mt-3">兑换码每个仅可使用一次。还没有兑换码？到商店购买后回此处充值。</p>
-        <a v-if="site.contact?.shop" :href="site.contact.shop" target="_blank" rel="noopener"
+        <a v-if="site.contact?.shop" :href="site.contact.shop" target="_blank" rel="noopener" class="btn-soft mt-3">
-           class="mt-3 group inline-flex items-center gap-2 rounded-xl bg-emerald-500/15 ring-1 ring-emerald-400/30 text-emerald-300 hover:bg-emerald-500/25 px-4 py-2.5 text-sm font-semibold transition-colors">
+          前往商店购买兑换码 <span aria-hidden="true">→</span>
-          <Icon name="spark" class="w-4 h-4" />
-          前往商店购买兑换码
-          <span class="group-hover:translate-x-0.5 transition-transform">→</span>
         </a>
       </section>
 
-      <!-- PASSWORD -->
+      <!-- ===== 修改密码 ===== -->
-      <section class="card p-7 md:p-8">
+      <section class="card p-6">
-        <div class="inline-grid w-10 h-10 rounded-xl bg-amber-500/15 ring-1 ring-amber-400/30 grid place-items-center text-amber-300">
+        <div class="sec-head">
-          <Icon name="refresh" class="w-4 h-4" />
+          <span class="sec-ico"><Icon name="config" :size="16" /></span>
+          <h3>修改密码</h3>
         </div>
-        <h2 class="text-xl font-bold mt-4">修改密码</h2>
+        <p class="text-[13px] text-[color:var(--fg-3)] mt-1">8-24 位，必须包含大写字母、小写字母、数字和符号。</p>
-        <p class="text-sm text-white/50 mt-2">8-24 位，必须包含大写字母、小写字母、数字和符号。</p>
+        <div class="mt-4 space-y-3">
-
+          <input v-model="pwdForm.current" type="password" placeholder="当前密码" autocomplete="current-password" class="field" />
-        <div class="mt-6 space-y-3">
+          <input v-model="pwdForm.next" type="password" placeholder="新密码（8-24 位，含大小写 / 数字 / 符号）" autocomplete="new-password" class="field" />
-          <input v-model="pwdForm.current" type="password" placeholder="当前密码" autocomplete="current-password"
+          <input v-model="pwdForm.confirm" type="password" placeholder="再次输入新密码" autocomplete="new-password" class="field" />
-                 class="w-full rounded-xl bg-white/[0.05] ring-1 ring-white/10 focus:ring-white/30 px-4 py-3 text-sm outline-none transition-colors placeholder:text-white/30" />
+          <p v-if="pwdError" class="text-xs text-rose-600">{{ pwdError }}</p>
-          <input v-model="pwdForm.next" type="password" placeholder="新密码(8-24位,含大小写/数字/符号)" autocomplete="new-password"
+          <button @click="changePwd" :disabled="pwdSubmitting" class="btn-primary w-full !py-2.5">{{ pwdSubmitting ? '提交中…' : '更新密码' }}</button>
-                 class="w-full rounded-xl bg-white/[0.05] ring-1 ring-white/10 focus:ring-white/30 px-4 py-3 text-sm outline-none transition-colors placeholder:text-white/30" />
-          <input v-model="pwdForm.confirm" type="password" placeholder="再次输入新密码" autocomplete="new-password"
-                 class="w-full rounded-xl bg-white/[0.05] ring-1 ring-white/10 focus:ring-white/30 px-4 py-3 text-sm outline-none transition-colors placeholder:text-white/30" />
-          <p v-if="pwdError" class="text-xs text-rose-400">{{ pwdError }}</p>
-          <button @click="changePwd" :disabled="pwdSubmitting"
-                  class="w-full rounded-xl bg-white text-black hover:bg-white/90 disabled:opacity-40 py-3 text-sm font-semibold transition-colors">
-            {{ pwdSubmitting ? '提交中…' : '更新密码' }}
-          </button>
         </div>
       </section>
-
-      <!-- SIGN OUT (full width) -->
-      <section class="lg:col-span-2 card p-6 md:p-7 flex items-center gap-5 flex-wrap">
-        <div class="inline-grid w-10 h-10 rounded-xl bg-rose-500/15 ring-1 ring-rose-400/30 grid place-items-center text-rose-300">
-          <Icon name="close" class="w-4 h-4" />
-        </div>
-        <div class="flex-1 min-w-0">
-          <div class="text-base font-semibold">退出登录</div>
-          <p class="text-sm text-white/50 mt-1">会清除本地 API Key、余额缓存。下次进来要重新设置。</p>
-        </div>
-        <button @click="logout"
-                class="rounded-xl bg-rose-500/20 text-rose-200 hover:bg-rose-500/30 ring-1 ring-rose-500/30 px-5 py-2.5 text-sm font-semibold transition-colors">
-          退出
-        </button>
-      </section>
     </div>
 
+    <!-- ===== 退出登录 ===== -->
+    <section class="card p-5 flex items-center gap-4 flex-wrap">
+      <span class="sec-ico"><Icon name="close" :size="16" /></span>
+      <div class="flex-1 min-w-0">
+        <div class="text-sm font-bold">退出登录</div>
+        <p class="text-xs text-[color:var(--fg-3)] mt-0.5">会清除本地 API Key 与缓存，下次进入需要重新登录。</p>
+      </div>
+      <button @click="logout" class="btn-danger-soft">退出</button>
+    </section>
+
     <!-- toast -->
     <transition name="fade">
       <div v-if="toastMsg"
-           class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 bg-white text-black text-sm font-medium px-5 py-2.5 rounded-full shadow-2xl">
+           class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 bg-zinc-900 text-white text-sm font-medium px-5 py-2.5 rounded-full shadow-2xl">
         {{ toastMsg }}
       </div>
     </transition>
@@ -475,8 +407,45 @@ async function recharge() {
 .fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
 .fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(8px); }
 
-/* Recharge amount / method buttons — theme-aware (clean in light AND dark).
+.sec-head { display: flex; align-items: center; gap: 8px; }
-   Selected uses the inverted solid-button color, not a harsh orange. */
+.sec-head h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--fg); }
+.sec-ico {
+  width: 34px; height: 34px; flex: none; border-radius: 10px;
+  display: grid; place-items: center;
+  background: var(--surface-2);
+  box-shadow: inset 0 0 0 1px var(--hairline);
+  color: var(--fg-2);
+}
+.st-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--fg-faint); margin-bottom: 9px; }
+.st-value { font-size: 14.5px; font-weight: 600; color: var(--fg); line-height: 1.5; }
+.st-num { font-variant-numeric: tabular-nums; }
+.key-code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
+.key-box {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 8px 8px 14px; border-radius: 12px;
+  background: var(--surface-2);
+  box-shadow: inset 0 0 0 1px var(--hairline);
+}
+.btn-danger-soft {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 36px; padding: 0 16px; border-radius: 10px;
+  font-size: 13px; font-weight: 700;
+  color: rgb(190 18 60); background: rgb(244 63 94 / 0.08);
+  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.22);
+  transition: background .15s ease, color .15s ease;
+}
+.btn-danger-soft:hover { color: #fff; background: rgb(225 29 72); }
+.ck-day {
+  flex: 1; height: 46px; border-radius: 10px;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  font-weight: 600;
+  background: var(--surface-2); color: var(--fg-faint);
+  box-shadow: inset 0 0 0 1px var(--hairline);
+}
+.ck-today { color: var(--fg-2); box-shadow: inset 0 0 0 1.5px rgb(24 24 27 / 0.4); }
+.ck-lit { background: #18181b; color: #fff; box-shadow: none; }
+
+/* Recharge amount / method buttons */
 .amt {
   border-radius: 0.6rem;
   padding: 0.6rem 0;
@@ -488,17 +457,5 @@ async function recharge() {
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
 .amt:hover { color: var(--fg); background: var(--hover); }
-.amt-on {
+.amt-on { background: var(--btn-solid-bg); color: var(--btn-solid-fg); box-shadow: none; }
-  background: var(--btn-solid-bg);
+</style>
-  color: var(--btn-solid-fg);
-  box-shadow: none;
-}
-.amt-input {
-  border-radius: 0.7rem;
-  color: var(--fg);
-  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px var(--hairline);
-  outline: none;
-}
-.amt-input:focus { box-shadow: inset 0 0 0 1px var(--fg-3); }
-</style>

frontend/src/views/ShowcaseView.vue

@@ -179,7 +179,16 @@ onMounted(refresh)
 
 <template>
   <section class="space-y-4">
-    <!-- header / filter / new -->
+    <div class="page-head">
+      <div>
+        <h2 class="page-title">首页内容</h2>
+        <p class="page-sub">首页首屏拼贴(Hero)与作品墙(Work)的展示图</p>
+      </div>
+      <div class="page-actions">
+        <button @click="refresh" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+      </div>
+    </div>
+    <!-- filter / new -->
     <div class="card p-4 flex items-center justify-between gap-3 flex-wrap">
       <div class="flex items-center gap-1.5">
         <button @click="setFilter('all')" class="filter-pill" :class="filter === 'all' && 'on'">全部</button>

frontend/src/views/UserLogsTableView.vue

@@ -10,6 +10,7 @@ import { fmtDate, fmtClock, fmtTs } from '../utils/format'
 import { copyText } from '../utils/clipboard'
 import { points } from '../credits'
 import Icon from '../components/Icon.vue'
+import SelectMenu from '../components/SelectMenu.vue'
 import MediaLightbox from '../components/MediaLightbox.vue'
 
 const router = useRouter()
@@ -44,6 +45,8 @@ async function copyError(e) {
 
 // 来源筛选走服务端:画图台 = source "user",API = source "v1"。
 const SOURCE_PARAM = { web: 'user', api: 'v1' }
+const STATUS_OPTS = [{ value: '', label: '所有状态' }, { value: 'success', label: '成功' }, { value: 'failed', label: '失败' }, { value: 'pending', label: '进行中' }]
+const SOURCE_OPTS = [{ value: '', label: '全部来源' }, { value: 'web', label: '画图台' }, { value: 'api', label: 'API' }]
 
 // 服务端分页 —— 不再只拉前 200 条;按页向后端取,可翻到全部历史。
 async function load() {
@@ -127,14 +130,14 @@ const params = (e) => {
 <template>
   <section class="space-y-5 log-page">
     <!-- Header -->
-    <div class="flex items-end justify-between flex-wrap gap-3">
+    <div class="page-head">
       <div>
-        <h1 class="text-2xl font-semibold tracking-tight text-slate-900">生成日志</h1>
+        <h2 class="page-title">生成日志</h2>
-        <p class="text-sm text-slate-500 mt-1">{{ total }} 条记录 · 含失败原因</p>
+        <p class="page-sub">{{ total }} 条记录 · 含失败原因</p>
+      </div>
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
       </div>
-      <button @click="router.push('/user')" class="btn-primary">
-        <Icon name="spark" class="w-4 h-4" /> 去画图
-      </button>
     </div>
 
     <!-- KPI 统计(本人累计) -->
@@ -158,25 +161,14 @@ const params = (e) => {
     </div>
 
     <!-- Filter bar -->
-    <div class="card p-3 flex items-center gap-3 flex-wrap">
+    <div class="card toolbar">
-      <div class="flex items-center gap-1.5">
+      <SelectMenu :model-value="statusFilter" compact :options="STATUS_OPTS" @update:model-value="setStatus" />
-        <button v-for="s in [['','全部'],['success','成功'],['failed','失败'],['pending','进行中']]" :key="s[0]"
+      <SelectMenu :model-value="sourceFilter" compact :options="SOURCE_OPTS" @update:model-value="setSource" />
-                @click="setStatus(s[0])"
-                class="text-xs rounded-lg px-2.5 py-1.5 transition-colors"
-                :class="statusFilter === s[0] ? 'chip-on' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">{{ s[1] }}</button>
-      </div>
-      <div class="w-px h-5 bg-slate-200"></div>
-      <div class="flex items-center gap-1.5">
-        <button v-for="s in [['','全部来源'],['web','画图台'],['api','API']]" :key="s[0]"
-                @click="setSource(s[0])"
-                class="text-xs rounded-lg px-2.5 py-1.5 transition-colors"
-                :class="sourceFilter === s[0] ? 'chip-on' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">{{ s[1] }}</button>
-      </div>
       <div class="flex-1 min-w-[180px]">
         <input v-model="search" @keyup.enter="doSearch" @change="doSearch"
                class="field !py-1.5 text-xs" placeholder="搜索 提示词 / 模型 / 错误…" />
       </div>
-      <button @click="load" class="btn-soft"><Icon name="refresh" class="w-3.5 h-3.5" /> 刷新</button>
+      <button @click="router.push('/user')" class="btn-primary ml-auto"><Icon name="spark" class="w-3.5 h-3.5" /> 去画图</button>
     </div>
 
     <!-- States -->

frontend/src/views/UserLogsView.vue

@@ -6,6 +6,7 @@ import { fmtTs } from '../utils/format'
 import { copyText } from '../utils/clipboard'
 import { zipSync } from 'fflate'
 import Icon from '../components/Icon.vue'
+import SelectMenu from '../components/SelectMenu.vue'
 import MediaLightbox from '../components/MediaLightbox.vue'
 
 const router = useRouter()
@@ -46,6 +47,7 @@ const filtered = computed(() => items.value)
 function doSearch() { page.value = 1; load() }
 
 const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
+const KIND_OPTS = [{ value: '', label: '全部类型' }, { value: 'image', label: '图像' }, { value: 'video', label: '视频' }]
 function setKind(v) { kindFilter.value = v; page.value = 1; load() }
 function goPage(n) {
   const target = Math.max(1, Math.min(totalPages.value, n))
@@ -231,44 +233,39 @@ onUnmounted(() => {
 <template>
   <section class="space-y-5">
     <!-- Header -->
-    <div class="flex items-end justify-between flex-wrap gap-3">
+    <div class="page-head">
       <div>
-        <h1 class="text-2xl font-semibold tracking-tight text-slate-900">我的创作记录</h1>
+        <h2 class="page-title">我的创作记录</h2>
-        <p class="text-sm text-slate-500 mt-1">
+        <p class="page-sub">{{ total }} 条作品</p>
-          {{ total }} 条作品
+      </div>
-        </p>
+      <div class="page-actions">
+        <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
       </div>
-      <button @click="router.push('/user')" class="btn-primary">
-        <Icon name="spark" class="w-4 h-4" /> 去画图
-      </button>
     </div>
 
     <!-- Filter bar -->
-    <div class="card p-3 flex items-center gap-3 flex-wrap">
+    <div class="card toolbar">
-      <div class="flex items-center gap-1.5">
+      <SelectMenu :model-value="kindFilter" compact :options="KIND_OPTS" @update:model-value="setKind" />
-        <button @click="setKind('')" class="text-xs rounded-lg px-2.5 py-1.5 transition-colors"
-                :class="kindFilter === '' ? 'chip-on' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">全部</button>
-        <button @click="setKind('image')" class="text-xs rounded-lg px-2.5 py-1.5 transition-colors"
-                :class="kindFilter === 'image' ? 'chip-on' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">图像</button>
-        <button @click="setKind('video')" class="text-xs rounded-lg px-2.5 py-1.5 transition-colors"
-                :class="kindFilter === 'video' ? 'chip-on' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">视频</button>
-      </div>
       <div class="flex-1 min-w-[180px]">
         <input v-model="search" @keyup.enter="doSearch" @change="doSearch"
-               class="field !py-1.5 text-xs" placeholder="搜索提示词或模型…" />
+               class="field" placeholder="搜索提示词或模型…" />
       </div>
-      <button @click="togglePickAll" class="text-xs rounded-lg px-2.5 py-1.5 transition-colors inline-flex items-center gap-1"
+      <div class="ml-auto flex items-center gap-2 flex-wrap">
-              :class="pageAllPicked ? 'chip-on' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">
+        <template v-if="picked.size">
-        <Icon name="check" class="w-3.5 h-3.5" /> 全选本页
+          <button @click="deletePicked" class="btn-soft danger">
-      </button>
+            <Icon name="trash" class="w-3.5 h-3.5" /> 删除选中 ({{ picked.size }})
-      <template v-if="picked.size">
+          </button>
-        <button @click="downloadPicked" :disabled="zipping" class="text-xs rounded-lg px-2.5 py-1.5 bg-slate-900 text-white hover:bg-slate-700 inline-flex items-center gap-1 disabled:opacity-50">
+          <button @click="downloadPicked" :disabled="zipping" class="btn-soft disabled:opacity-50">
-          <Icon name="download" class="w-3.5 h-3.5" /> {{ zipping ? '打包中…' : `下载选中 (${picked.size})` }}
+            <Icon name="download" class="w-3.5 h-3.5" /> {{ zipping ? '打包中…' : `下载选中 (${picked.size})` }}
+          </button>
+        </template>
+        <button @click="togglePickAll" class="btn-soft">
+          <Icon name="check" class="w-3.5 h-3.5" /> {{ pageAllPicked ? '取消全选' : '全选本页' }}
         </button>
-        <button @click="deletePicked" class="text-xs rounded-lg px-2.5 py-1.5 bg-rose-600 text-white hover:bg-rose-500 inline-flex items-center gap-1">
+        <button @click="router.push('/user')" class="btn-primary">
-          <Icon name="trash" class="w-3.5 h-3.5" /> 删除选中 ({{ picked.size }})
+          <Icon name="spark" class="w-3.5 h-3.5" /> 去画图
         </button>
-      </template>
+      </div>
     </div>
 
     <!-- Empty -->
@@ -315,7 +312,7 @@ onUnmounted(() => {
           <div>
             <Icon name="close" class="w-6 h-6 mx-auto mb-2 opacity-60" />
             <div>生成失败</div>
-            <div v-if="e.error" class="text-[10px] text-rose-400 line-clamp-2 mt-1">{{ e.error }}</div>
+            <div v-if="e.error" class="text-[10px] text-rose-600 line-clamp-2 mt-1">{{ e.error }}</div>
           </div>
         </div>
 
@@ -358,9 +355,9 @@ onUnmounted(() => {
           <div class="text-[10px] text-white/55 flex items-center justify-between gap-2 tabular-nums">
             <span class="break-all" :title="e.model || ''">{{ e.model || '—' }}</span>
             <span class="shrink-0 flex items-center gap-1">
-              <span v-if="e.resolution" class="text-emerald-300/90">{{ e.resolution }}</span>
+              <span v-if="e.resolution" class="text-emerald-600">{{ e.resolution }}</span>
               <span v-if="e.ratio" class="text-white/40">{{ e.ratio }}</span>
-              <span v-if="e.kind === 'video' && e.duration" class="text-rose-300/80">{{ e.duration }}</span>
+              <span v-if="e.kind === 'video' && e.duration" class="text-rose-600">{{ e.duration }}</span>
               <span v-if="e.deai" class="text-[#71717a]">去AI</span>
             </span>
           </div>

frontend/src/views/UsersView.vue

@@ -38,6 +38,33 @@ const ROLE_OPTIONS = [
 ]
 const roleLabel = (r) => ({ user: '用户', agent: '代理', admin: '管理员' }[r] || '用户')
 
+// 头像淡彩：按用户名哈希出固定的一对浅底深字色
+const AVATAR_TONES = [
+  ['#dbeafe', '#1d4ed8'], ['#dcfce7', '#15803d'], ['#fef3c7', '#b45309'],
+  ['#fce7f3', '#be185d'], ['#ede9fe', '#6d28d9'], ['#cffafe', '#0e7490'],
+  ['#fee2e2', '#b91c1c'], ['#ffedd5', '#c2410c'], ['#ecfccb', '#4d7c0f'],
+]
+const avatarStyle = (u) => {
+  const s = u.name || u.email || '?'
+  let h = 0
+  for (const c of s) h = (h * 31 + c.charCodeAt(0)) >>> 0
+  const [background, color] = AVATAR_TONES[h % AVATAR_TONES.length]
+  return { background, color }
+}
+
+// 窄窗口下表格横向溢出：把鼠标纵向滚轮映射成横向滚动；
+// 滚到左/右尽头就放行，页面正常纵向滚动。
+const onTableWheel = (e) => {
+  const el = e.currentTarget
+  if (el.scrollWidth <= el.clientWidth) return
+  if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return
+  const max = el.scrollWidth - el.clientWidth
+  const next = el.scrollLeft + e.deltaY
+  if ((next <= 0 && el.scrollLeft <= 0) || (next >= max && el.scrollLeft >= max)) return
+  el.scrollLeft = next
+  e.preventDefault()
+}
+
 // Concurrency groups — resolve a user's group id → name/limit for the table,
 // and offer them in the edit form.
 const cgroups = ref([])
@@ -85,7 +112,14 @@ function goPage(n) {
   if (target !== page.value) page.value = target
 }
 watch(page, () => { load() })
-function setFilter(fn) { fn(); resetAndLoad() }
+const ROLE_OPTS = [
+  { value: '', label: '全部角色' }, { value: 'admin', label: '管理员' },
+  { value: 'agent', label: '代理' }, { value: 'user', label: '用户' },
+]
+const STATUS_OPTS = [
+  { value: '', label: '所有状态' }, { value: 'active', label: '正常' }, { value: 'disabled', label: '禁用' },
+]
+watch([roleFilter, statusFilter], resetAndLoad)
 function resetAndLoad() {
   if (page.value !== 1) page.value = 1
   else load()
@@ -210,57 +244,40 @@ async function doRecharge() {
 
 <template>
   <section class="space-y-4">
+    <div class="page-head">
+      <h2 class="page-title">用户管理</h2>
+      <button @click="load" class="refresh-btn" title="刷新" aria-label="刷新"><Icon name="refresh" :size="18" /></button>
+    </div>
     <!-- KPI strip — same shape as LogsView / ModelsView -->
     <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-white/45">用户总数</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">用户总数</div>
         <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.total }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-emerald-300/80">正常</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">正常</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-emerald-300">{{ stats.active }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.active }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-rose-300/80">管理员</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">管理员</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-rose-300">{{ stats.admins }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.admins }}</div>
       </div>
       <div class="card p-4">
-        <div class="text-[11px] uppercase tracking-wider text-amber-300/80">总积分</div>
+        <div class="text-[11px] uppercase tracking-wider text-[color:var(--fg-3)]">总积分</div>
-        <div class="text-2xl font-semibold mt-1 tabular-nums text-amber-300">{{ points(stats.credits_total).toLocaleString('en-US') }}</div>
+        <div class="text-2xl font-semibold mt-1 tabular-nums">{{ points(stats.credits_total).toLocaleString('en-US') }}</div>
       </div>
     </div>
 
     <!-- Toolbar -->
-    <div class="card p-3 flex items-center gap-3 flex-wrap">
+    <div class="card toolbar">
-      <div class="flex items-center gap-1">
+      <SelectMenu v-model="roleFilter" compact :options="ROLE_OPTS" />
-        <button @click="setFilter(() => roleFilter = '')" class="fp" :class="roleFilter === '' && 'fp-on'">全部角色</button>
+      <SelectMenu v-model="statusFilter" compact :options="STATUS_OPTS" />
-        <button @click="setFilter(() => roleFilter = 'admin')" class="fp" :class="roleFilter === 'admin' && 'fp-orange'">
-          <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>管理员
-        </button>
-        <button @click="setFilter(() => roleFilter = 'agent')" class="fp" :class="roleFilter === 'agent' && 'fp-amber'">
-          <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>代理
-        </button>
-        <button @click="setFilter(() => roleFilter = 'user')" class="fp" :class="roleFilter === 'user' && 'fp-on'">用户</button>
-      </div>
-      <div class="w-px h-5 bg-white/10"></div>
-      <div class="flex items-center gap-1">
-        <button @click="setFilter(() => statusFilter = '')" class="fp" :class="statusFilter === '' && 'fp-on'">所有状态</button>
-        <button @click="setFilter(() => statusFilter = 'active')" class="fp" :class="statusFilter === 'active' && 'fp-emerald'">
-          <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>正常
-        </button>
-        <button @click="setFilter(() => statusFilter = 'disabled')" class="fp" :class="statusFilter === 'disabled' && 'fp-rose'">
-          <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>禁用
-        </button>
-      </div>
       <div class="flex-1 min-w-[200px]">
         <input v-model="search" class="field !py-1.5 text-xs" placeholder="搜索 邮箱 / 用户名 / ID…" />
       </div>
       <button v-if="selected.size" @click="delSelected" class="btn-soft danger" title="删除选中的用户">
         <Icon name="trash" class="w-3.5 h-3.5" /> 删除选中 ({{ selected.size }})
       </button>
-      <button @click="load" class="btn-soft">
-        <Icon name="refresh" class="w-3.5 h-3.5" /> 刷新
-      </button>
       <button @click="showAdd = true" class="btn-primary">
         <Icon name="plus" class="w-3.5 h-3.5" /> 新建用户
       </button>
@@ -268,33 +285,30 @@ async function doRecharge() {
 
     <!-- Table -->
     <div class="card overflow-hidden">
-      <div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
+      <div v-if="loading && !items.length" class="empty"><span class="empty-text">加载中…</span></div>
-      <div v-else-if="!filtered.length" class="flex flex-col items-center gap-3 text-white/40 py-20">
+      <div v-else-if="!filtered.length" class="empty">
-        <span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center">
+        <span class="empty-ico">
           <Icon name="accounts" class="w-6 h-6" />
         </span>
-        <span class="text-sm">{{ stats.total ? '没有匹配的用户' : '还没有用户' }}</span>
+        <span class="empty-text">{{ stats.total ? '没有匹配的用户' : '还没有用户' }}</span>
-        <button v-if="!stats.total" @click="showAdd = true" class="btn-soft mt-1">新建第一个</button>
+        <button v-if="!stats.total" @click="showAdd = true" class="btn-soft">新建第一个</button>
       </div>
 
-      <div v-else class="overflow-x-auto">
+      <div v-else class="overflow-x-auto" @wheel="onTableWheel">
-      <table class="w-full text-sm table-fixed min-w-[1360px]">
+      <table class="utable w-full text-sm table-fixed min-w-[1200px]">
         <colgroup>
-          <col class="w-9" />      <!-- select -->
+          <col class="w-10" />     <!-- select -->
-          <col class="w-36" />     <!-- username -->
+          <col />                  <!-- user (avatar+name+email+notes) -->
-          <col />                  <!-- email (flex) -->
-          <col class="w-24" />     <!-- notes -->
-          <col class="w-28" />     <!-- concurrency -->
           <col class="w-20" />     <!-- role -->
-          <col class="w-16" />     <!-- status switch -->
+          <col class="w-14" />     <!-- status switch -->
-          <col class="w-24" />     <!-- credits -->
+          <col class="w-20" />     <!-- credits -->
-          <col class="w-24" />     <!-- recharge total -->
+          <col class="w-20" />     <!-- recharge total -->
-          <col class="w-20" />     <!-- generation count -->
+          <col class="w-28" />     <!-- concurrency -->
-          <col class="w-20" />     <!-- banned word hits -->
+          <col class="w-16" />     <!-- generation count -->
+          <col class="w-16" />     <!-- banned word hits -->
           <col class="w-28" />     <!-- registered -->
-          <col class="w-28" />     <!-- last login -->
+          <col class="w-40" />     <!-- last login + ip -->
-          <col class="w-32" />     <!-- login IP -->
+          <col class="w-36" />     <!-- actions -->
-          <col class="w-32" />     <!-- actions -->
         </colgroup>
         <thead>
           <tr class="text-[10px] uppercase tracking-[0.2em] text-white/40 border-b border-white/[0.06]">
@@ -302,50 +316,46 @@ async function doRecharge() {
               <input type="checkbox" :checked="allSelected" @change="toggleSelectAll"
                      class="chk" title="全选" />
             </th>
-            <th class="text-left px-3 py-3 font-medium">用户名</th>
+            <th class="text-left px-3 py-3 font-medium">用户</th>
-            <th class="text-left px-3 py-3 font-medium">邮箱</th>
-            <th class="text-left px-3 py-3 font-medium">备注</th>
-            <th class="text-left px-3 py-3 font-medium">并发</th>
             <th class="text-left px-3 py-3 font-medium">角色</th>
             <th class="text-left px-3 py-3 font-medium">状态</th>
             <th class="text-right px-3 py-3 font-medium">积分</th>
             <th class="text-right px-3 py-3 font-medium">累计充值</th>
+            <th class="text-left px-3 py-3 font-medium">并发组</th>
             <th class="text-right px-3 py-3 font-medium">生图次数</th>
             <th class="text-right px-3 py-3 font-medium">违禁触发</th>
             <th class="text-left px-3 py-3 font-medium">注册时间</th>
             <th class="text-left px-3 py-3 font-medium">最近登录</th>
-            <th class="text-left px-3 py-3 font-medium">登录 IP</th>
             <th class="text-right px-3 py-3 font-medium">操作</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="u in pagedItems" :key="u.id"
-              class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
+              class="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors"
+              :class="selected.has(u.id) && 'row-on'">
             <td class="px-3 py-3.5 align-middle text-center">
               <input type="checkbox" :checked="selected.has(u.id)" @change="toggleSelect(u.id)" @click.stop
                      class="chk" />
             </td>
-            <td class="px-3 py-3.5 align-middle text-sm font-medium text-white/90 truncate" :title="u.name || '—'">
+            <td class="px-3 py-3.5 align-middle">
-              {{ u.name || '—' }}
+              <div class="flex items-center gap-2.5 min-w-0">
-            </td>
+                <span class="uavatar" :style="avatarStyle(u)">{{ (u.name || u.email || '?').slice(0, 1).toUpperCase() }}</span>
-            <td class="px-3 py-3.5 align-middle text-xs text-white/75 truncate" :title="u.email">
+                <div class="min-w-0">
-              {{ u.email || '—' }}
+                  <div class="text-[13.5px] font-semibold text-white/90 truncate" :title="u.name || '—'">{{ u.name || '—' }}</div>
-            </td>
+                  <div class="text-xs text-white/50 truncate" :title="u.email">{{ u.email || '—' }}</div>
-            <td class="px-3 py-3.5 align-middle text-xs truncate" :class="u.notes ? 'text-white/70' : 'text-white/25'" :title="u.notes || ''">
+                  <div v-if="u.notes" class="text-[11px] text-white/35 truncate" :title="u.notes">{{ u.notes }}</div>
-              {{ u.notes || '—' }}
+                </div>
-            </td>
+              </div>
-            <td class="px-3 py-3.5 align-middle text-xs truncate text-white/70" :title="cgroupLabel(u.concurrency_group_id)">
-              {{ cgroupLabel(u.concurrency_group_id) }}
             </td>
             <td class="px-3 py-3.5 align-middle">
               <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1 whitespace-nowrap"
                     :class="u.role === 'admin'
-                      ? 'bg-rose-500/10 text-rose-300 ring-rose-400/30'
+                      ? 'bg-rose-500/10 text-rose-600 ring-rose-500/25'
                       : u.role === 'agent'
-                        ? 'bg-amber-500/10 text-amber-300 ring-amber-400/30'
+                        ? 'bg-amber-500/10 text-amber-600 ring-amber-500/25'
                         : 'bg-white/[0.06] text-white/70 ring-white/15'">
                 <span class="w-1.5 h-1.5 rounded-full"
-                      :class="u.role === 'admin' ? 'bg-rose-400' : u.role === 'agent' ? 'bg-amber-400' : 'bg-slate-400'"></span>
+                      :class="u.role === 'admin' ? 'bg-rose-500' : u.role === 'agent' ? 'bg-amber-500' : 'bg-slate-400'"></span>
                 {{ roleLabel(u.role) }}
               </span>
             </td>
@@ -361,33 +371,30 @@ async function doRecharge() {
               {{ points(u.credits).toLocaleString('en-US') }}
             </td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
-                :class="u.recharge_total > 0 ? 'text-emerald-300' : 'text-white/25'">
+                :class="u.recharge_total > 0 ? 'text-emerald-600' : 'text-white/25'">
               ¥{{ (u.recharge_total || 0).toLocaleString('en-US') }}
             </td>
+            <td class="px-3 py-3.5 align-middle text-xs truncate text-white/60" :title="cgroupLabel(u.concurrency_group_id)">
+              {{ cgroupLabel(u.concurrency_group_id) }}
+            </td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
                 :class="u.generation_count > 0 ? 'text-white/85' : 'text-white/25'">
               {{ (u.generation_count || 0).toLocaleString('en-US') }}
             </td>
             <td class="px-3 py-3.5 align-middle text-right tabular-nums whitespace-nowrap"
-                :class="u.banned_word_hits > 0 ? 'text-rose-300' : 'text-white/25'">
+                :class="u.banned_word_hits > 0 ? 'text-rose-600' : 'text-white/25'">
               {{ (u.banned_word_hits || 0).toLocaleString('en-US') }}
             </td>
-            <td class="px-3 py-3.5 align-middle text-xs whitespace-nowrap">
+            <td class="px-3 py-3.5 align-middle whitespace-nowrap">
-              <div v-if="u.created_at" class="leading-tight" :title="fmtTs(u.created_at)">
+              <span v-if="u.created_at" class="text-[13px] text-white/65 tabular-nums" :title="fmtTs(u.created_at)">{{ fmtDate(u.created_at) }}</span>
-                <div class="text-white/65 tabular-nums">{{ fmtDate(u.created_at) }}</div>
-                <div class="text-white/35 tabular-nums">{{ fmtClock(u.created_at) }}</div>
-              </div>
               <span v-else class="text-white/25">—</span>
             </td>
-            <td class="px-3 py-3.5 align-middle text-xs whitespace-nowrap">
+            <td class="px-3 py-3.5 align-middle whitespace-nowrap">
-              <div v-if="u.last_login_at" class="leading-tight" :title="fmtTs(u.last_login_at)">
+              <div v-if="u.last_login_at" class="leading-snug" :title="fmtTs(u.last_login_at)">
-                <div class="text-white/65 tabular-nums">{{ fmtDate(u.last_login_at) }}</div>
+                <div class="text-[13px] text-white/65 tabular-nums">{{ fmtDate(u.last_login_at) }} {{ fmtClock(u.last_login_at) }}</div>
-                <div class="text-white/35 tabular-nums">{{ fmtClock(u.last_login_at) }}</div>
+                <div class="text-[11px] text-white/40 font-mono truncate" :title="u.last_login_ip || ''">{{ u.last_login_ip || '—' }}</div>
               </div>
-              <span v-else class="text-white/25">从未登录</span>
+              <span v-else class="text-[13px] text-white/25">从未登录</span>
-            </td>
-            <td class="px-3 py-3.5 align-middle text-xs font-mono text-white/55 truncate" :title="u.last_login_ip || ''">
-              {{ u.last_login_ip || '—' }}
             </td>
             <td class="px-3 py-3.5 align-middle text-right whitespace-nowrap">
               <div class="inline-flex items-center gap-1">
@@ -436,7 +443,7 @@ async function doRecharge() {
         </div>
         <div class="p-5 space-y-3">
           <div>
-            <label class="lbl">邮箱 <span class="text-rose-300">*</span></label>
+            <label class="lbl">邮箱 <span class="text-rose-600">*</span></label>
             <input v-model="addForm.email" class="field" placeholder="user@example.com" />
           </div>
           <div>
@@ -570,7 +577,7 @@ async function doRecharge() {
   display: block;
   font-size: 0.72rem;
   font-weight: 500;
-  color: rgb(255 255 255 / 0.55);
+  color: var(--fg-3);
   margin-bottom: 0.4rem;
 }
 
@@ -579,58 +586,61 @@ async function doRecharge() {
   display: inline-flex; align-items: center; gap: 0.35rem;
   padding: 0.35rem 0.7rem; font-size: 0.72rem;
   border-radius: 0.55rem;
-  color: rgb(255 255 255 / 0.65);
+  color: var(--fg-2);
-  background: rgb(255 255 255 / 0.05);
+  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
+  box-shadow: inset 0 0 0 1px var(--hairline);
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
-.fp:hover { background: rgb(255 255 255 / 0.09); color: white; }
+.fp:hover { background: var(--hover); color: var(--fg); }
-.fp-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
+.fp-on { background: var(--surface-solid); color: rgb(15 23 42); box-shadow: none; }
-.fp-emerald {
+.fp-emerald { background: rgb(16 185 129 / 0.1); color: #059669; box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.22); }
-  background: rgb(16 185 129 / 0.22);
+.fp-rose { background: rgb(239 68 68 / 0.09); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(239 68 68 / 0.2); }
-  color: rgb(110 231 183);
+.fp-orange { background: rgb(249 115 22 / 0.12); color: #c2410c; box-shadow: inset 0 0 0 1px rgb(249 115 22 / 0.25); }
-  box-shadow: inset 0 0 0 1px rgb(110 231 183 / 0.45);
+.fp-amber { background: rgb(245 158 11 / 0.12); color: #b45309; box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.25); }
+
+/* --- user avatar tile in table */
+.uavatar {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 800;
+  flex-shrink: 0;
 }
-.fp-rose {
+
-  background: rgb(244 63 94 / 0.22);
+/* --- 操作列吸底右侧：横向滚动时按钮始终可见 */
-  color: rgb(253 164 175);
+.utable thead th:last-child,
-  box-shadow: inset 0 0 0 1px rgb(253 164 175 / 0.45);
+.utable tbody td:last-child {
-}
+  position: sticky;
-.fp-orange {
+  right: 0;
-  background: rgb(249 115 22 / 0.22);
+  box-shadow: -10px 0 14px -10px rgb(15 23 42 / 0.16);
-  color: rgb(253 186 116);
-  box-shadow: inset 0 0 0 1px rgb(253 186 116 / 0.45);
-}
-.fp-amber {
-  background: rgb(245 158 11 / 0.22);
-  color: rgb(252 211 77);
-  box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.45);
 }
+.utable thead th:last-child { background: var(--surface-solid); border-bottom: 1px solid rgb(24 24 27 / 0.07); }
+.utable tbody td:last-child { background: var(--surface-solid); }
+/* 吸底格是定位元素，会盖住行分隔线——给它补同款底边框 */
+.utable tbody tr:not(:last-child) td:last-child { box-shadow: -10px 0 14px -10px rgb(15 23 42 / 0.16), inset 0 -1px 0 var(--hairline); }
+.utable tbody tr:hover td:last-child { background: #f7f7f8; }
+.utable tbody tr.row-on td:last-child { background: #f1f1f3; }
 
 /* --- icon-only action buttons */
 .act {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 1.9rem; height: 1.9rem;
+  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
-  border-radius: 0.5rem;
+  color: var(--fg-3); background: var(--surface-solid);
-  color: rgb(255 255 255 / 0.7);
+  box-shadow: inset 0 0 0 1px var(--hairline);
-  background: rgb(255 255 255 / 0.04);
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
-  transition: background 0.15s, color 0.15s;
 }
-.act:hover { background: rgb(255 255 255 / 0.1); color: white; }
+.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
-.act.danger {
+.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
-  color: rgb(253 164 175);
-  background: rgb(244 63 94 / 0.12);
-  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
-}
-.act.danger:hover { color: white; background: rgb(244 63 94 / 0.25); }
 
 /* disabled inputs in the edit modal — readable, but visually 'cool' so the
    admin knows they can't change them. */
 .field:disabled {
   opacity: 0.65;
   cursor: not-allowed;
-  background: rgb(255 255 255 / 0.025);
+  background: var(--surface-2);
 }
 
 /* iOS-style switch for the 状态 column — mirrors the one in ModelsView. */
@@ -638,8 +648,8 @@ async function doRecharge() {
   position: relative;
   width: 2.25rem; height: 1.3rem;
   border-radius: 9999px;
-  background: rgb(255 255 255 / 0.12);
+  background: var(--hover);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
+  box-shadow: inset 0 0 0 1px var(--hairline);
   transition: background 0.18s ease;
 }
 .sw-thumb {
@@ -647,14 +657,11 @@ async function doRecharge() {
   top: 2px; left: 2px;
   width: calc(1.3rem - 4px); height: calc(1.3rem - 4px);
   border-radius: 9999px;
-  background: white;
+  background: var(--surface-solid);
   box-shadow: 0 1px 2px rgb(15 23 42 / 0.3);
   transition: transform 0.18s ease;
 }
-.sw-on {
+.sw-on { background: #18181b; box-shadow: inset 0 0 0 1px #18181b; }
-  background: rgb(16 185 129 / 0.7);
-  box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.5);
-}
 .sw-on .sw-thumb { transform: translateX(calc(2.25rem - 1.3rem)); }
 
 /* --- numbered pagination buttons */
@@ -665,13 +672,13 @@ async function doRecharge() {
   font-weight: 500;
   text-align: center;
   border-radius: 0.45rem;
-  color: rgb(255 255 255 / 0.7);
+  color: var(--fg-2);
-  background: rgb(255 255 255 / 0.04);
+  background: var(--surface-2);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
+  box-shadow: inset 0 0 0 1px var(--hairline);
   transition: background 0.15s, color 0.15s;
 }
-.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
+.pg:hover:not(.pg-on) { background: var(--hover); color: var(--fg); }
-.pg-on { background: rgb(255 255 255 / 0.92); color: rgb(15 23 42); box-shadow: none; }
+.pg-on { background: var(--surface-solid); color: rgb(15 23 42); box-shadow: none; }
 
 .fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }