feat(player): 完善 H5 投注端与 API 演示数据

- 球赛/串关/优胜冠军、赛事详情、历史投注与个人资料编辑 - 固定顶栏、公告与底栏，仅内容区滚动 - 底部导航与站点 favicon 使用 logo，登录页精简 - API 种子、冠军盘与历史注单增强 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-02 17:18:11 +08:00
parent 7af2e418c3
commit b5dca1bfb1
75 changed files with 7077 additions and 384 deletions
--- a/apps/admin/index.html
+++ b/apps/admin/index.html
@@ -3,7 +3,9 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="icon" type="image/png" href="/logo.png" />
+  <link rel="apple-touch-icon" href="/logo.png" />
+  <link rel="manifest" href="/site.webmanifest" />
  <title>TheBet365 Admin</title>
 </head>
 <body>
--- a/apps/admin/src/assets/images/.gitkeep
+++ b/apps/admin/src/assets/images/.gitkeep
--- a/apps/agent/index.html
+++ b/apps/agent/index.html
@@ -1,5 +1,12 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-<head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/favicon.svg" /><title>TheBet365 Agent</title></head>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/png" href="/logo.png" />
+  <link rel="apple-touch-icon" href="/logo.png" />
+  <link rel="manifest" href="/site.webmanifest" />
+  <title>TheBet365 Agent</title>
+</head>
 <body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
 </html>
--- a/apps/agent/src/assets/images/.gitkeep
+++ b/apps/agent/src/assets/images/.gitkeep
--- a/apps/api/prisma/migrations/20260602065556_init/migration.sql
+++ b/apps/api/prisma/migrations/20260602065556_init/migration.sql
@@ -0,0 +1,703 @@
+-- CreateTable
+CREATE TABLE "users" (
+    "id" BIGSERIAL NOT NULL,
+    "username" VARCHAR(64) NOT NULL,
+    "user_type" VARCHAR(20) NOT NULL,
+    "status" VARCHAR(20) NOT NULL DEFAULT 'ACTIVE',
+    "parent_id" BIGINT,
+    "agent_level" INTEGER,
+    "locale" VARCHAR(10) NOT NULL DEFAULT 'en-US',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "deleted_at" TIMESTAMP(3),
+
+    CONSTRAINT "users_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "user_auth" (
+    "id" BIGSERIAL NOT NULL,
+    "user_id" BIGINT NOT NULL,
+    "password_hash" VARCHAR(255) NOT NULL,
+    "login_fail_count" INTEGER NOT NULL DEFAULT 0,
+    "locked_until" TIMESTAMP(3),
+    "last_login_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "user_auth_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "user_preferences" (
+    "id" BIGSERIAL NOT NULL,
+    "user_id" BIGINT NOT NULL,
+    "locale" VARCHAR(10) NOT NULL DEFAULT 'en-US',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "user_preferences_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "roles" (
+    "id" BIGSERIAL NOT NULL,
+    "code" VARCHAR(64) NOT NULL,
+    "name" VARCHAR(128) NOT NULL,
+    "description" VARCHAR(255),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "roles_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "permissions" (
+    "id" BIGSERIAL NOT NULL,
+    "code" VARCHAR(128) NOT NULL,
+    "name" VARCHAR(128) NOT NULL,
+    "module" VARCHAR(64) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "permissions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "role_permissions" (
+    "role_id" BIGINT NOT NULL,
+    "permission_id" BIGINT NOT NULL,
+
+    CONSTRAINT "role_permissions_pkey" PRIMARY KEY ("role_id","permission_id")
+);
+
+-- CreateTable
+CREATE TABLE "admin_user_roles" (
+    "user_id" BIGINT NOT NULL,
+    "role_id" BIGINT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+-- CreateTable
+CREATE TABLE "agent_profiles" (
+    "id" BIGSERIAL NOT NULL,
+    "user_id" BIGINT NOT NULL,
+    "level" INTEGER NOT NULL,
+    "parent_agent_id" BIGINT,
+    "credit_limit" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "used_credit" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "direct_player_liability" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "child_agent_exposure" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "status" VARCHAR(20) NOT NULL DEFAULT 'ACTIVE',
+    "max_single_deposit" DECIMAL(18,4),
+    "max_daily_deposit" DECIMAL(18,4),
+    "cashback_rate" DECIMAL(8,4) NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "agent_profiles_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "agent_closure" (
+    "ancestor_id" BIGINT NOT NULL,
+    "descendant_id" BIGINT NOT NULL,
+    "depth" INTEGER NOT NULL,
+
+    CONSTRAINT "agent_closure_pkey" PRIMARY KEY ("ancestor_id","descendant_id")
+);
+
+-- CreateTable
+CREATE TABLE "agent_credit_transactions" (
+    "id" BIGSERIAL NOT NULL,
+    "agent_id" BIGINT NOT NULL,
+    "transaction_type" VARCHAR(32) NOT NULL,
+    "amount" DECIMAL(18,4) NOT NULL,
+    "credit_before" DECIMAL(18,4) NOT NULL,
+    "credit_after" DECIMAL(18,4) NOT NULL,
+    "reference_type" VARCHAR(32),
+    "reference_id" VARCHAR(64),
+    "operator_id" BIGINT,
+    "request_id" VARCHAR(128),
+    "remark" VARCHAR(500),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "agent_credit_transactions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "wallets" (
+    "id" BIGSERIAL NOT NULL,
+    "user_id" BIGINT NOT NULL,
+    "available_balance" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "frozen_balance" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "currency" VARCHAR(16) NOT NULL DEFAULT 'USD',
+    "status" VARCHAR(20) NOT NULL DEFAULT 'ACTIVE',
+    "version" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "wallets_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "wallet_transactions" (
+    "id" BIGSERIAL NOT NULL,
+    "transaction_id" VARCHAR(64) NOT NULL,
+    "user_id" BIGINT NOT NULL,
+    "wallet_id" BIGINT NOT NULL,
+    "transaction_type" VARCHAR(32) NOT NULL,
+    "amount" DECIMAL(18,4) NOT NULL,
+    "balance_before" DECIMAL(18,4) NOT NULL,
+    "balance_after" DECIMAL(18,4) NOT NULL,
+    "frozen_before" DECIMAL(18,4) NOT NULL,
+    "frozen_after" DECIMAL(18,4) NOT NULL,
+    "reference_type" VARCHAR(32),
+    "reference_id" VARCHAR(64),
+    "operator_id" BIGINT,
+    "remark" VARCHAR(500),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "wallet_transactions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "leagues" (
+    "id" BIGSERIAL NOT NULL,
+    "sport_type" VARCHAR(20) NOT NULL DEFAULT 'FOOTBALL',
+    "code" VARCHAR(64) NOT NULL,
+    "display_order" INTEGER NOT NULL DEFAULT 0,
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "deleted_at" TIMESTAMP(3),
+
+    CONSTRAINT "leagues_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "teams" (
+    "id" BIGSERIAL NOT NULL,
+    "sport_type" VARCHAR(20) NOT NULL DEFAULT 'FOOTBALL',
+    "code" VARCHAR(64) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "deleted_at" TIMESTAMP(3),
+
+    CONSTRAINT "teams_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "entity_translations" (
+    "id" BIGSERIAL NOT NULL,
+    "entity_type" VARCHAR(32) NOT NULL,
+    "entity_id" BIGINT NOT NULL,
+    "locale" VARCHAR(10) NOT NULL,
+    "field_name" VARCHAR(32) NOT NULL,
+    "value" VARCHAR(500) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "entity_translations_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "matches" (
+    "id" BIGSERIAL NOT NULL,
+    "sport_type" VARCHAR(20) NOT NULL DEFAULT 'FOOTBALL',
+    "league_id" BIGINT NOT NULL,
+    "home_team_id" BIGINT NOT NULL,
+    "away_team_id" BIGINT NOT NULL,
+    "start_time" TIMESTAMP(3) NOT NULL,
+    "status" VARCHAR(32) NOT NULL DEFAULT 'DRAFT',
+    "is_hot" BOOLEAN NOT NULL DEFAULT false,
+    "display_order" INTEGER NOT NULL DEFAULT 0,
+    "publish_time" TIMESTAMP(3),
+    "close_time" TIMESTAMP(3),
+    "is_outright" BOOLEAN NOT NULL DEFAULT false,
+    "created_by" BIGINT,
+    "updated_by" BIGINT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "deleted_at" TIMESTAMP(3),
+
+    CONSTRAINT "matches_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "match_scores" (
+    "id" BIGSERIAL NOT NULL,
+    "match_id" BIGINT NOT NULL,
+    "ht_home_score" INTEGER,
+    "ht_away_score" INTEGER,
+    "ft_home_score" INTEGER,
+    "ft_away_score" INTEGER,
+    "winner_team_id" BIGINT,
+    "recorded_by" BIGINT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "match_scores_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "markets" (
+    "id" BIGSERIAL NOT NULL,
+    "match_id" BIGINT NOT NULL,
+    "market_type" VARCHAR(64) NOT NULL,
+    "period" VARCHAR(16) NOT NULL,
+    "line_value" DECIMAL(8,2),
+    "status" VARCHAR(20) NOT NULL DEFAULT 'OPEN',
+    "allow_single" BOOLEAN NOT NULL DEFAULT true,
+    "allow_parlay" BOOLEAN NOT NULL DEFAULT true,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "markets_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "market_selections" (
+    "id" BIGSERIAL NOT NULL,
+    "market_id" BIGINT NOT NULL,
+    "selection_code" VARCHAR(64) NOT NULL,
+    "selection_name" VARCHAR(255) NOT NULL,
+    "odds" DECIMAL(18,6) NOT NULL,
+    "odds_version" BIGINT NOT NULL DEFAULT 1,
+    "status" VARCHAR(20) NOT NULL DEFAULT 'OPEN',
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "market_selections_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "odds_change_logs" (
+    "id" BIGSERIAL NOT NULL,
+    "selection_id" BIGINT NOT NULL,
+    "old_odds" DECIMAL(18,6) NOT NULL,
+    "new_odds" DECIMAL(18,6) NOT NULL,
+    "odds_version" BIGINT NOT NULL,
+    "changed_by" BIGINT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "odds_change_logs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "bets" (
+    "id" BIGSERIAL NOT NULL,
+    "bet_no" VARCHAR(64) NOT NULL,
+    "user_id" BIGINT NOT NULL,
+    "agent_id" BIGINT,
+    "bet_type" VARCHAR(20) NOT NULL,
+    "stake" DECIMAL(18,4) NOT NULL,
+    "total_odds" DECIMAL(18,6),
+    "potential_return" DECIMAL(18,4),
+    "actual_return" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "status" VARCHAR(32) NOT NULL DEFAULT 'PENDING',
+    "settlement_status" VARCHAR(32),
+    "currency" VARCHAR(16) NOT NULL DEFAULT 'USD',
+    "request_id" VARCHAR(128) NOT NULL,
+    "placed_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "settled_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "bets_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "bet_selections" (
+    "id" BIGSERIAL NOT NULL,
+    "bet_id" BIGINT NOT NULL,
+    "match_id" BIGINT,
+    "market_id" BIGINT NOT NULL,
+    "selection_id" BIGINT NOT NULL,
+    "market_type" VARCHAR(64) NOT NULL,
+    "period" VARCHAR(16),
+    "selection_name_snapshot" VARCHAR(255) NOT NULL,
+    "handicap_line" DECIMAL(8,2),
+    "total_line" DECIMAL(8,2),
+    "odds" DECIMAL(18,6) NOT NULL,
+    "odds_version" BIGINT NOT NULL,
+    "result_status" VARCHAR(32),
+    "effective_odds" DECIMAL(18,6),
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "bet_selections_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "settlement_batches" (
+    "id" BIGSERIAL NOT NULL,
+    "match_id" BIGINT NOT NULL,
+    "batch_no" VARCHAR(64) NOT NULL,
+    "ht_home_score" INTEGER,
+    "ht_away_score" INTEGER,
+    "ft_home_score" INTEGER,
+    "ft_away_score" INTEGER,
+    "status" VARCHAR(20) NOT NULL DEFAULT 'PREVIEW',
+    "total_bets" INTEGER NOT NULL DEFAULT 0,
+    "total_payout" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "total_refund" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "operator_id" BIGINT,
+    "confirmed_at" TIMESTAMP(3),
+    "is_resettle" BOOLEAN NOT NULL DEFAULT false,
+    "reason" VARCHAR(500),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "settlement_batches_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "settlement_items" (
+    "id" BIGSERIAL NOT NULL,
+    "batch_id" BIGINT NOT NULL,
+    "bet_id" BIGINT NOT NULL,
+    "user_id" BIGINT NOT NULL,
+    "result" VARCHAR(32) NOT NULL,
+    "payout" DECIMAL(18,4) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "settlement_items_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "cashback_rules" (
+    "id" BIGSERIAL NOT NULL,
+    "name" VARCHAR(128) NOT NULL,
+    "target_type" VARCHAR(32) NOT NULL,
+    "target_id" BIGINT,
+    "rate" DECIMAL(8,4) NOT NULL,
+    "market_type" VARCHAR(64),
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "cashback_rules_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "cashback_batches" (
+    "id" BIGSERIAL NOT NULL,
+    "batch_no" VARCHAR(64) NOT NULL,
+    "period_start" TIMESTAMP(3) NOT NULL,
+    "period_end" TIMESTAMP(3) NOT NULL,
+    "status" VARCHAR(20) NOT NULL DEFAULT 'PREVIEW',
+    "total_amount" DECIMAL(18,4) NOT NULL DEFAULT 0,
+    "player_count" INTEGER NOT NULL DEFAULT 0,
+    "operator_id" BIGINT,
+    "confirmed_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "cashback_batches_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "cashback_items" (
+    "id" BIGSERIAL NOT NULL,
+    "batch_id" BIGINT NOT NULL,
+    "user_id" BIGINT NOT NULL,
+    "effective_stake" DECIMAL(18,4) NOT NULL,
+    "rate" DECIMAL(8,4) NOT NULL,
+    "amount" DECIMAL(18,4) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "cashback_items_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "contents" (
+    "id" BIGSERIAL NOT NULL,
+    "content_type" VARCHAR(32) NOT NULL,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "status" VARCHAR(20) NOT NULL DEFAULT 'DRAFT',
+    "link_type" VARCHAR(32),
+    "link_target" VARCHAR(500),
+    "start_time" TIMESTAMP(3),
+    "end_time" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "contents_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "content_translations" (
+    "id" BIGSERIAL NOT NULL,
+    "content_id" BIGINT NOT NULL,
+    "locale" VARCHAR(10) NOT NULL,
+    "title" VARCHAR(255),
+    "body" TEXT,
+    "image_url" VARCHAR(500),
+
+    CONSTRAINT "content_translations_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "i18n_messages" (
+    "id" BIGSERIAL NOT NULL,
+    "msg_key" VARCHAR(128) NOT NULL,
+    "locale" VARCHAR(10) NOT NULL,
+    "value" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "i18n_messages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "system_configs" (
+    "id" BIGSERIAL NOT NULL,
+    "config_key" VARCHAR(128) NOT NULL,
+    "config_value" TEXT NOT NULL,
+    "description" VARCHAR(255),
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "system_configs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "audit_logs" (
+    "id" BIGSERIAL NOT NULL,
+    "operator_id" BIGINT,
+    "operator_type" VARCHAR(20) NOT NULL,
+    "action" VARCHAR(128) NOT NULL,
+    "module" VARCHAR(64) NOT NULL,
+    "target_type" VARCHAR(32),
+    "target_id" VARCHAR(64),
+    "before_data" TEXT,
+    "after_data" TEXT,
+    "ip_address" VARCHAR(45),
+    "user_agent" VARCHAR(500),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "audit_logs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "users_username_key" ON "users"("username");
+
+-- CreateIndex
+CREATE INDEX "users_user_type_idx" ON "users"("user_type");
+
+-- CreateIndex
+CREATE INDEX "users_parent_id_idx" ON "users"("parent_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_auth_user_id_key" ON "user_auth"("user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_preferences_user_id_key" ON "user_preferences"("user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "roles_code_key" ON "roles"("code");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "permissions_code_key" ON "permissions"("code");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "admin_user_roles_user_id_key" ON "admin_user_roles"("user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "agent_profiles_user_id_key" ON "agent_profiles"("user_id");
+
+-- CreateIndex
+CREATE INDEX "agent_profiles_parent_agent_id_idx" ON "agent_profiles"("parent_agent_id");
+
+-- CreateIndex
+CREATE INDEX "agent_closure_descendant_id_idx" ON "agent_closure"("descendant_id");
+
+-- CreateIndex
+CREATE INDEX "agent_credit_transactions_agent_id_idx" ON "agent_credit_transactions"("agent_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "agent_credit_transactions_operator_id_request_id_key" ON "agent_credit_transactions"("operator_id", "request_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "wallets_user_id_key" ON "wallets"("user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "wallet_transactions_transaction_id_key" ON "wallet_transactions"("transaction_id");
+
+-- CreateIndex
+CREATE INDEX "wallet_transactions_user_id_idx" ON "wallet_transactions"("user_id");
+
+-- CreateIndex
+CREATE INDEX "wallet_transactions_wallet_id_idx" ON "wallet_transactions"("wallet_id");
+
+-- CreateIndex
+CREATE INDEX "wallet_transactions_created_at_idx" ON "wallet_transactions"("created_at");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "leagues_code_key" ON "leagues"("code");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "teams_code_key" ON "teams"("code");
+
+-- CreateIndex
+CREATE INDEX "entity_translations_entity_type_entity_id_idx" ON "entity_translations"("entity_type", "entity_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "entity_translations_entity_type_entity_id_locale_field_name_key" ON "entity_translations"("entity_type", "entity_id", "locale", "field_name");
+
+-- CreateIndex
+CREATE INDEX "matches_status_idx" ON "matches"("status");
+
+-- CreateIndex
+CREATE INDEX "matches_start_time_idx" ON "matches"("start_time");
+
+-- CreateIndex
+CREATE INDEX "matches_league_id_idx" ON "matches"("league_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "match_scores_match_id_key" ON "match_scores"("match_id");
+
+-- CreateIndex
+CREATE INDEX "markets_match_id_idx" ON "markets"("match_id");
+
+-- CreateIndex
+CREATE INDEX "markets_market_type_idx" ON "markets"("market_type");
+
+-- CreateIndex
+CREATE INDEX "market_selections_market_id_idx" ON "market_selections"("market_id");
+
+-- CreateIndex
+CREATE INDEX "odds_change_logs_selection_id_idx" ON "odds_change_logs"("selection_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "bets_bet_no_key" ON "bets"("bet_no");
+
+-- CreateIndex
+CREATE INDEX "bets_user_id_idx" ON "bets"("user_id");
+
+-- CreateIndex
+CREATE INDEX "bets_agent_id_idx" ON "bets"("agent_id");
+
+-- CreateIndex
+CREATE INDEX "bets_status_idx" ON "bets"("status");
+
+-- CreateIndex
+CREATE INDEX "bets_placed_at_idx" ON "bets"("placed_at");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "bets_user_id_request_id_key" ON "bets"("user_id", "request_id");
+
+-- CreateIndex
+CREATE INDEX "bet_selections_bet_id_idx" ON "bet_selections"("bet_id");
+
+-- CreateIndex
+CREATE INDEX "bet_selections_match_id_idx" ON "bet_selections"("match_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "settlement_batches_batch_no_key" ON "settlement_batches"("batch_no");
+
+-- CreateIndex
+CREATE INDEX "settlement_batches_match_id_idx" ON "settlement_batches"("match_id");
+
+-- CreateIndex
+CREATE INDEX "settlement_items_batch_id_idx" ON "settlement_items"("batch_id");
+
+-- CreateIndex
+CREATE INDEX "settlement_items_bet_id_idx" ON "settlement_items"("bet_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "cashback_batches_batch_no_key" ON "cashback_batches"("batch_no");
+
+-- CreateIndex
+CREATE INDEX "cashback_items_batch_id_idx" ON "cashback_items"("batch_id");
+
+-- CreateIndex
+CREATE INDEX "cashback_items_user_id_idx" ON "cashback_items"("user_id");
+
+-- CreateIndex
+CREATE INDEX "contents_content_type_status_idx" ON "contents"("content_type", "status");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "content_translations_content_id_locale_key" ON "content_translations"("content_id", "locale");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "i18n_messages_msg_key_locale_key" ON "i18n_messages"("msg_key", "locale");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "system_configs_config_key_key" ON "system_configs"("config_key");
+
+-- CreateIndex
+CREATE INDEX "audit_logs_operator_id_idx" ON "audit_logs"("operator_id");
+
+-- CreateIndex
+CREATE INDEX "audit_logs_module_idx" ON "audit_logs"("module");
+
+-- CreateIndex
+CREATE INDEX "audit_logs_created_at_idx" ON "audit_logs"("created_at");
+
+-- AddForeignKey
+ALTER TABLE "users" ADD CONSTRAINT "users_parent_id_fkey" FOREIGN KEY ("parent_id") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "user_auth" ADD CONSTRAINT "user_auth_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "user_preferences" ADD CONSTRAINT "user_preferences_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "role_permissions" ADD CONSTRAINT "role_permissions_role_id_fkey" FOREIGN KEY ("role_id") REFERENCES "roles"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "role_permissions" ADD CONSTRAINT "role_permissions_permission_id_fkey" FOREIGN KEY ("permission_id") REFERENCES "permissions"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "admin_user_roles" ADD CONSTRAINT "admin_user_roles_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "admin_user_roles" ADD CONSTRAINT "admin_user_roles_role_id_fkey" FOREIGN KEY ("role_id") REFERENCES "roles"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "agent_profiles" ADD CONSTRAINT "agent_profiles_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "wallets" ADD CONSTRAINT "wallets_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "wallet_transactions" ADD CONSTRAINT "wallet_transactions_wallet_id_fkey" FOREIGN KEY ("wallet_id") REFERENCES "wallets"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "matches" ADD CONSTRAINT "matches_league_id_fkey" FOREIGN KEY ("league_id") REFERENCES "leagues"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "matches" ADD CONSTRAINT "matches_home_team_id_fkey" FOREIGN KEY ("home_team_id") REFERENCES "teams"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "matches" ADD CONSTRAINT "matches_away_team_id_fkey" FOREIGN KEY ("away_team_id") REFERENCES "teams"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "match_scores" ADD CONSTRAINT "match_scores_match_id_fkey" FOREIGN KEY ("match_id") REFERENCES "matches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "markets" ADD CONSTRAINT "markets_match_id_fkey" FOREIGN KEY ("match_id") REFERENCES "matches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "market_selections" ADD CONSTRAINT "market_selections_market_id_fkey" FOREIGN KEY ("market_id") REFERENCES "markets"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "odds_change_logs" ADD CONSTRAINT "odds_change_logs_selection_id_fkey" FOREIGN KEY ("selection_id") REFERENCES "market_selections"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "bets" ADD CONSTRAINT "bets_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "bet_selections" ADD CONSTRAINT "bet_selections_bet_id_fkey" FOREIGN KEY ("bet_id") REFERENCES "bets"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "settlement_batches" ADD CONSTRAINT "settlement_batches_match_id_fkey" FOREIGN KEY ("match_id") REFERENCES "matches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "settlement_items" ADD CONSTRAINT "settlement_items_batch_id_fkey" FOREIGN KEY ("batch_id") REFERENCES "settlement_batches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "cashback_items" ADD CONSTRAINT "cashback_items_batch_id_fkey" FOREIGN KEY ("batch_id") REFERENCES "cashback_batches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "content_translations" ADD CONSTRAINT "content_translations_content_id_fkey" FOREIGN KEY ("content_id") REFERENCES "contents"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/apps/api/prisma/migrations/migration_lock.toml
+++ b/apps/api/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"
--- a/apps/api/prisma/schema.prisma
+++ b/apps/api/prisma/schema.prisma
@@ -55,6 +55,8 @@ model UserPreference {
  id        BigInt   @id @default(autoincrement())
  userId    BigInt   @unique @map("user_id")
  locale    String   @default("en-US") @db.VarChar(10)
+  phone     String?  @db.VarChar(32)
+  email     String?  @db.VarChar(128)
  createdAt DateTime @default(now()) @map("created_at")
  updatedAt DateTime @updatedAt @map("updated_at")

--- a/apps/api/prisma/seed.ts
+++ b/apps/api/prisma/seed.ts
@@ -3,6 +3,569 @@ import * as bcrypt from 'bcryptjs';

 const prisma = new PrismaClient();

+/** 为演示赛事补齐详情页玩法（与后台 markets 模板一致） */
+async function seedDemoMarkets(matchId: bigint) {
+  const configs: Array<{
+    marketType: string;
+    period: string;
+    lineValue?: number;
+    sortOrder: number;
+    selections: Array<{ code: string; name: string; odds: number }>;
+  }> = [
+    {
+      marketType: 'FT_1X2',
+      period: 'FT',
+      sortOrder: 1,
+      selections: [
+        { code: 'HOME', name: '主胜', odds: 2.5 },
+        { code: 'DRAW', name: '和', odds: 3.2 },
+        { code: 'AWAY', name: '客胜', odds: 2.8 },
+      ],
+    },
+    {
+      marketType: 'FT_HANDICAP',
+      period: 'FT',
+      lineValue: -0.5,
+      sortOrder: 2,
+      selections: [
+        { code: 'HOME', name: '主 -0.5', odds: 1.9 },
+        { code: 'AWAY', name: '客 +0.5', odds: 1.9 },
+      ],
+    },
+    {
+      marketType: 'FT_OVER_UNDER',
+      period: 'FT',
+      lineValue: 2.5,
+      sortOrder: 3,
+      selections: [
+        { code: 'OVER', name: '大 2.5', odds: 1.85 },
+        { code: 'UNDER', name: '小 2.5', odds: 1.95 },
+      ],
+    },
+    {
+      marketType: 'FT_ODD_EVEN',
+      period: 'FT',
+      sortOrder: 4,
+      selections: [
+        { code: 'ODD', name: '单', odds: 1.9 },
+        { code: 'EVEN', name: '双', odds: 1.9 },
+      ],
+    },
+    {
+      marketType: 'HT_1X2',
+      period: 'HT',
+      sortOrder: 5,
+      selections: [
+        { code: 'HOME', name: '半场主', odds: 3.0 },
+        { code: 'DRAW', name: '半场和', odds: 2.0 },
+        { code: 'AWAY', name: '半场客', odds: 3.5 },
+      ],
+    },
+    {
+      marketType: 'HT_HANDICAP',
+      period: 'HT',
+      lineValue: -0.5,
+      sortOrder: 6,
+      selections: [
+        { code: 'HOME', name: '半场主 -0.5', odds: 1.9 },
+        { code: 'AWAY', name: '半场客 +0.5', odds: 1.9 },
+      ],
+    },
+    {
+      marketType: 'HT_OVER_UNDER',
+      period: 'HT',
+      lineValue: 1.5,
+      sortOrder: 7,
+      selections: [
+        { code: 'OVER', name: '半场大 1.5', odds: 2.0 },
+        { code: 'UNDER', name: '半场小 1.5', odds: 1.75 },
+      ],
+    },
+    {
+      marketType: 'FT_CORRECT_SCORE',
+      period: 'FT',
+      sortOrder: 8,
+      selections: [
+        { code: 'SCORE_1_0', name: '1-0', odds: 4.86 },
+        { code: 'SCORE_2_0', name: '2-0', odds: 5.22 },
+        { code: 'SCORE_2_1', name: '2-1', odds: 7.92 },
+        { code: 'SCORE_3_0', name: '3-0', odds: 8.28 },
+        { code: 'SCORE_0_0', name: '0-0', odds: 8.64 },
+        { code: 'SCORE_1_1', name: '1-1', odds: 7.47 },
+        { code: 'SCORE_2_2', name: '2-2', odds: 24.3 },
+        { code: 'SCORE_3_3', name: '3-3', odds: 175.5 },
+        { code: 'SCORE_0_1', name: '0-1', odds: 14.4 },
+        { code: 'SCORE_0_2', name: '0-2', odds: 45.9 },
+        { code: 'SCORE_1_2', name: '1-2', odds: 23.4 },
+        { code: 'SCORE_0_3', name: '0-3', odds: 207 },
+      ],
+    },
+    {
+      marketType: 'HT_CORRECT_SCORE',
+      period: 'HT',
+      sortOrder: 9,
+      selections: [
+        { code: 'SCORE_1_0', name: '1-0', odds: 4.5 },
+        { code: 'SCORE_2_0', name: '2-0', odds: 8.0 },
+        { code: 'SCORE_0_0', name: '0-0', odds: 5.5 },
+        { code: 'SCORE_1_1', name: '1-1', odds: 7.0 },
+        { code: 'SCORE_0_1', name: '0-1', odds: 6.5 },
+        { code: 'SCORE_0_2', name: '0-2', odds: 18.0 },
+      ],
+    },
+    {
+      marketType: 'SH_CORRECT_SCORE',
+      period: 'SH',
+      sortOrder: 10,
+      selections: [
+        { code: 'SCORE_1_0', name: '1-0', odds: 4.5 },
+        { code: 'SCORE_2_0', name: '2-0', odds: 8.0 },
+        { code: 'SCORE_0_0', name: '0-0', odds: 5.5 },
+        { code: 'SCORE_1_1', name: '1-1', odds: 7.0 },
+        { code: 'SCORE_0_1', name: '0-1', odds: 6.5 },
+        { code: 'SCORE_0_2', name: '0-2', odds: 18.0 },
+      ],
+    },
+  ];
+
+  for (const cfg of configs) {
+    const exists = await prisma.market.findFirst({
+      where: { matchId, marketType: cfg.marketType },
+      include: { _count: { select: { selections: true } } },
+    });
+    if (exists) {
+      const needRefresh =
+        cfg.marketType.includes('CORRECT_SCORE') &&
+        exists._count.selections < cfg.selections.length;
+      if (needRefresh) {
+        await prisma.market.delete({ where: { id: exists.id } });
+      } else {
+        continue;
+      }
+    }
+    await prisma.market.create({
+      data: {
+        matchId,
+        marketType: cfg.marketType,
+        period: cfg.period,
+        lineValue: cfg.lineValue,
+        allowSingle: true,
+        allowParlay: true,
+        sortOrder: cfg.sortOrder,
+        status: 'OPEN',
+        selections: {
+          create: cfg.selections.map((s, i) => ({
+            selectionCode: s.code,
+            selectionName: s.name,
+            odds: s.odds,
+            sortOrder: i,
+            status: 'OPEN',
+          })),
+        },
+      },
+    });
+  }
+}
+
+async function upsertLeagueName(leagueId: bigint, names: Record<string, string>) {
+  for (const [locale, value] of Object.entries(names)) {
+    await prisma.entityTranslation.upsert({
+      where: {
+        entityType_entityId_locale_fieldName: {
+          entityType: 'LEAGUE',
+          entityId: leagueId,
+          locale,
+          fieldName: 'name',
+        },
+      },
+      create: { entityType: 'LEAGUE', entityId: leagueId, locale, fieldName: 'name', value },
+      update: { value },
+    });
+  }
+}
+
+async function upsertTeam(
+  code: string,
+  names: Record<string, string>,
+) {
+  const team = await prisma.team.upsert({
+    where: { code },
+    create: { code },
+    update: {},
+  });
+  for (const [locale, value] of Object.entries(names)) {
+    await prisma.entityTranslation.upsert({
+      where: {
+        entityType_entityId_locale_fieldName: {
+          entityType: 'TEAM',
+          entityId: team.id,
+          locale,
+          fieldName: 'name',
+        },
+      },
+      create: { entityType: 'TEAM', entityId: team.id, locale, fieldName: 'name', value },
+      update: { value },
+    });
+  }
+  return team;
+}
+
+async function ensurePublishedMatch(opts: {
+  leagueId: bigint;
+  homeTeamId: bigint;
+  awayTeamId: bigint;
+  startTime: Date;
+  isHot?: boolean;
+  displayOrder?: number;
+}) {
+  let match = await prisma.match.findFirst({
+    where: {
+      leagueId: opts.leagueId,
+      homeTeamId: opts.homeTeamId,
+      awayTeamId: opts.awayTeamId,
+      status: 'PUBLISHED',
+    },
+  });
+  if (!match) {
+    match = await prisma.match.create({
+      data: {
+        leagueId: opts.leagueId,
+        homeTeamId: opts.homeTeamId,
+        awayTeamId: opts.awayTeamId,
+        startTime: opts.startTime,
+        status: 'PUBLISHED',
+        isHot: opts.isHot ?? false,
+        displayOrder: opts.displayOrder ?? 0,
+        publishTime: new Date(),
+      },
+    });
+  } else {
+    match = await prisma.match.update({
+      where: { id: match.id },
+      data: {
+        startTime: opts.startTime,
+        isHot: opts.isHot ?? match.isHot,
+        displayOrder: opts.displayOrder ?? match.displayOrder,
+      },
+    });
+  }
+  await seedDemoMarkets(match.id);
+  return match;
+}
+
+function hoursFromNow(hours: number) {
+  return new Date(Date.now() + hours * 3600 * 1000);
+}
+
+async function seedSportsDemo() {
+  const epl = await prisma.league.upsert({
+    where: { code: 'EPL' },
+    create: { code: 'EPL' },
+    update: {},
+  });
+  await upsertLeagueName(epl.id, { 'zh-CN': '英超', 'en-US': 'Premier League' });
+
+  const wc = await prisma.league.upsert({
+    where: { code: 'WC2026' },
+    create: { code: 'WC2026' },
+    update: {},
+  });
+  await upsertLeagueName(wc.id, {
+    'zh-CN': '2026世界杯(在加拿大,墨西哥和美国)',
+    'en-US': '2026 FIFA World Cup',
+  });
+
+  const teams: Array<[string, Record<string, string>]> = [
+    ['MUN', { 'zh-CN': '曼联', 'en-US': 'Man United' }],
+    ['CHE', { 'zh-CN': '切尔西', 'en-US': 'Chelsea' }],
+    ['MEX', { 'zh-CN': '墨西哥', 'en-US': 'Mexico' }],
+    ['RSA', { 'zh-CN': '南非', 'en-US': 'South Africa' }],
+    ['CZE', { 'zh-CN': '捷克', 'en-US': 'Czech Republic' }],
+    ['KOR', { 'zh-CN': '韩国', 'en-US': 'South Korea' }],
+    ['CAN', { 'zh-CN': '加拿大', 'en-US': 'Canada' }],
+    ['BIH', { 'zh-CN': '波黑', 'en-US': 'Bosnia' }],
+    ['USA', { 'zh-CN': '美国', 'en-US': 'USA' }],
+    ['PAR', { 'zh-CN': '巴拉圭', 'en-US': 'Paraguay' }],
+    ['SUI', { 'zh-CN': '瑞士', 'en-US': 'Switzerland' }],
+    ['BRA', { 'zh-CN': '巴西', 'en-US': 'Brazil' }],
+    ['SCO', { 'zh-CN': '苏格兰', 'en-US': 'Scotland' }],
+    ['TUR', { 'zh-CN': '土耳其', 'en-US': 'Turkey' }],
+    ['ARG', { 'zh-CN': '阿根廷', 'en-US': 'Argentina' }],
+    ['FRA', { 'zh-CN': '法国', 'en-US': 'France' }],
+  ];
+
+  const teamMap = new Map<string, { id: bigint }>();
+  for (const [code, names] of teams) {
+    teamMap.set(code, await upsertTeam(code, names));
+  }
+
+  const get = (code: string) => {
+    const t = teamMap.get(code);
+    if (!t) throw new Error(`Team ${code} missing`);
+    return t;
+  };
+
+  // 英超：明日开赛 → 早盘
+  await ensurePublishedMatch({
+    leagueId: epl.id,
+    homeTeamId: get('MUN').id,
+    awayTeamId: get('CHE').id,
+    startTime: hoursFromNow(26),
+    isHot: true,
+    displayOrder: 1,
+  });
+
+  // 英超：今晚开赛 → 今日
+  await ensurePublishedMatch({
+    leagueId: epl.id,
+    homeTeamId: get('CHE').id,
+    awayTeamId: get('MUN').id,
+    startTime: hoursFromNow(8),
+    isHot: false,
+    displayOrder: 2,
+  });
+
+  const wcFixtures: Array<{
+    home: string;
+    away: string;
+    start: Date;
+    hot?: boolean;
+    order: number;
+  }> = [
+    { home: 'MEX', away: 'RSA', start: new Date('2026-06-12T03:00:00Z'), hot: true, order: 1 },
+    { home: 'CZE', away: 'KOR', start: new Date('2026-06-12T07:00:00Z'), order: 2 },
+    { home: 'CAN', away: 'BIH', start: new Date('2026-06-13T00:00:00Z'), order: 3 },
+    { home: 'USA', away: 'PAR', start: new Date('2026-06-13T03:00:00Z'), hot: true, order: 4 },
+    { home: 'SUI', away: 'BRA', start: new Date('2026-06-14T16:00:00Z'), order: 5 },
+    { home: 'SCO', away: 'TUR', start: new Date('2026-06-14T19:00:00Z'), order: 6 },
+    { home: 'FRA', away: 'ARG', start: new Date('2026-06-15T20:00:00Z'), hot: true, order: 7 },
+  ];
+
+  for (const f of wcFixtures) {
+    await ensurePublishedMatch({
+      leagueId: wc.id,
+      homeTeamId: get(f.home).id,
+      awayTeamId: get(f.away).id,
+      startTime: f.start,
+      isHot: f.hot,
+      displayOrder: f.order,
+    });
+  }
+
+  console.log(`  Sports demo: ${wcFixtures.length + 2} published matches`);
+}
+
+async function seedOutrightDemo() {
+  const wc = await prisma.league.findUnique({ where: { code: 'WC2026' } });
+  if (!wc) return;
+
+  const placeholder = await upsertTeam('OUT', { 'zh-CN': '冠军盘', 'en-US': 'Outright' });
+
+  const outrightOdds: Array<[string, Record<string, string>, number]> = [
+    ['FRA', { 'zh-CN': '法国', 'en-US': 'France' }, 4.95],
+    ['ESP', { 'zh-CN': '西班牙', 'en-US': 'Spain' }, 4.95],
+    ['ENG', { 'zh-CN': '英格兰', 'en-US': 'England' }, 6.3],
+    ['BRA', { 'zh-CN': '巴西', 'en-US': 'Brazil' }, 8.55],
+    ['ARG', { 'zh-CN': '阿根廷', 'en-US': 'Argentina' }, 8.55],
+    ['POR', { 'zh-CN': '葡萄牙', 'en-US': 'Portugal' }, 9.0],
+    ['GER', { 'zh-CN': '德国', 'en-US': 'Germany' }, 15.3],
+    ['NED', { 'zh-CN': '荷兰', 'en-US': 'Netherlands' }, 18.9],
+    ['NOR', { 'zh-CN': '挪威', 'en-US': 'Norway' }, 32.4],
+    ['BEL', { 'zh-CN': '比利时', 'en-US': 'Belgium' }, 35.1],
+    ['COL', { 'zh-CN': '哥伦比亚', 'en-US': 'Colombia' }, 45.9],
+    ['JPN', { 'zh-CN': '日本', 'en-US': 'Japan' }, 45.9],
+    ['URU', { 'zh-CN': '乌拉圭', 'en-US': 'Uruguay' }, 63.9],
+    ['USA', { 'zh-CN': '美国', 'en-US': 'USA' }, 63.9],
+    ['MAR', { 'zh-CN': '摩洛哥', 'en-US': 'Morocco' }, 63.9],
+    ['CRO', { 'zh-CN': '克罗地亚', 'en-US': 'Croatia' }, 81.0],
+    ['MEX', { 'zh-CN': '墨西哥', 'en-US': 'Mexico' }, 85.0],
+    ['SUI', { 'zh-CN': '瑞士', 'en-US': 'Switzerland' }, 90.0],
+    ['TUR', { 'zh-CN': '土耳其', 'en-US': 'Turkey' }, 95.0],
+    ['SEN', { 'zh-CN': '塞内加尔', 'en-US': 'Senegal' }, 100.0],
+  ];
+
+  for (const [code, names] of outrightOdds) {
+    await upsertTeam(code, names);
+  }
+
+  let match = await prisma.match.findFirst({
+    where: { leagueId: wc.id, isOutright: true },
+  });
+  if (!match) {
+    match = await prisma.match.create({
+      data: {
+        leagueId: wc.id,
+        homeTeamId: placeholder.id,
+        awayTeamId: placeholder.id,
+        isOutright: true,
+        startTime: new Date('2027-07-01T00:00:00Z'),
+        status: 'PUBLISHED',
+        publishTime: new Date(),
+        isHot: true,
+        displayOrder: 0,
+      },
+    });
+  }
+
+  const marketExists = await prisma.market.findFirst({
+    where: { matchId: match.id, marketType: 'OUTRIGHT_WINNER' },
+  });
+  if (!marketExists) {
+    await prisma.market.create({
+      data: {
+        matchId: match.id,
+        marketType: 'OUTRIGHT_WINNER',
+        period: 'OUTRIGHT',
+        allowSingle: true,
+        allowParlay: false,
+        sortOrder: 1,
+        status: 'OPEN',
+        selections: {
+          create: outrightOdds.map(([code, names, odds], i) => ({
+            selectionCode: code,
+            selectionName: names['zh-CN'],
+            odds,
+            sortOrder: i,
+            status: 'OPEN',
+          })),
+        },
+      },
+    });
+  }
+
+  console.log('  Outright demo: World Cup winner market');
+}
+
+async function seedPlayerDemo() {
+  const player = await prisma.user.findUnique({
+    where: { username: 'player1' },
+    include: { wallet: true },
+  });
+  if (!player?.wallet) return;
+
+  await prisma.wallet.update({
+    where: { id: player.wallet.id },
+    data: { availableBalance: 88888.88 },
+  });
+
+  await prisma.walletTransaction.upsert({
+    where: { transactionId: 'DEMO-DEP-001' },
+    create: {
+      transactionId: 'DEMO-DEP-001',
+      userId: player.id,
+      walletId: player.wallet.id,
+      transactionType: 'DEPOSIT',
+      amount: 50000,
+      balanceBefore: 1000,
+      balanceAfter: 51000,
+      frozenBefore: 0,
+      frozenAfter: 0,
+      remark: '演示充值',
+    },
+    update: {},
+  });
+
+  await prisma.walletTransaction.upsert({
+    where: { transactionId: 'DEMO-DEP-002' },
+    create: {
+      transactionId: 'DEMO-DEP-002',
+      userId: player.id,
+      walletId: player.wallet.id,
+      transactionType: 'DEPOSIT',
+      amount: 37888.88,
+      balanceBefore: 51000,
+      balanceAfter: 88888.88,
+      frozenBefore: 0,
+      frozenAfter: 0,
+      remark: '演示充值（二笔）',
+    },
+    update: {},
+  });
+
+  const sampleSel = await prisma.marketSelection.findFirst({
+    where: {
+      status: 'OPEN',
+      market: { marketType: 'FT_1X2', match: { status: 'PUBLISHED' } },
+    },
+    include: { market: { include: { match: true } } },
+  });
+
+  if (sampleSel && !(await prisma.bet.findUnique({ where: { betNo: 'DEMO-BET-001' } }))) {
+    const odds = Number(sampleSel.odds);
+    const stake = 200;
+    await prisma.bet.create({
+      data: {
+        betNo: 'DEMO-BET-001',
+        userId: player.id,
+        agentId: player.parentId,
+        betType: 'SINGLE',
+        stake,
+        totalOdds: odds,
+        potentialReturn: stake * odds,
+        status: 'PENDING',
+        requestId: 'seed-demo-bet-001',
+        selections: {
+          create: {
+            matchId: sampleSel.market.matchId,
+            marketId: sampleSel.marketId,
+            selectionId: sampleSel.id,
+            marketType: sampleSel.market.marketType,
+            period: sampleSel.market.period,
+            selectionNameSnapshot: sampleSel.selectionName,
+            odds: sampleSel.odds,
+            oddsVersion: sampleSel.oddsVersion,
+          },
+        },
+      },
+    });
+  }
+
+  const settledSel = await prisma.marketSelection.findFirst({
+    where: {
+      market: { marketType: 'FT_1X2' },
+      selectionCode: 'DRAW',
+    },
+    include: { market: true },
+  });
+
+  if (settledSel && !(await prisma.bet.findUnique({ where: { betNo: 'DEMO-BET-002' } }))) {
+    const odds = Number(settledSel.odds);
+    const stake = 50;
+    await prisma.bet.create({
+      data: {
+        betNo: 'DEMO-BET-002',
+        userId: player.id,
+        agentId: player.parentId,
+        betType: 'SINGLE',
+        stake,
+        totalOdds: odds,
+        potentialReturn: stake * odds,
+        actualReturn: stake * odds,
+        status: 'WON',
+        settlementStatus: 'SETTLED',
+        settledAt: new Date(Date.now() - 86400000),
+        requestId: 'seed-demo-bet-002',
+        selections: {
+          create: {
+            matchId: settledSel.market.matchId,
+            marketId: settledSel.marketId,
+            selectionId: settledSel.id,
+            marketType: settledSel.market.marketType,
+            period: settledSel.market.period,
+            selectionNameSnapshot: settledSel.selectionName,
+            odds: settledSel.odds,
+            oddsVersion: settledSel.oddsVersion,
+            resultStatus: 'WIN',
+            effectiveOdds: settledSel.odds,
+          },
+        },
+      },
+    });
+  }
+
+  console.log('  Player demo: wallet + transactions + sample bets');
+}
+
 async function main() {
  console.log('Seeding database...');

@@ -107,70 +670,79 @@ async function main() {
    }
  }

-  const league = await prisma.league.upsert({
-    where: { code: 'EPL' },
-    create: { code: 'EPL' },
-    update: {},
-  });
-
-  await prisma.entityTranslation.upsert({
-    where: { entityType_entityId_locale_fieldName: { entityType: 'LEAGUE', entityId: league.id, locale: 'zh-CN', fieldName: 'name' } },
-    create: { entityType: 'LEAGUE', entityId: league.id, locale: 'zh-CN', fieldName: 'name', value: '英超' },
-    update: {},
-  });
-
-  for (const [code, name] of [['MUN', '曼联'], ['CHE', '切尔西']] as const) {
-    const team = await prisma.team.upsert({ where: { code }, create: { code }, update: {} });
-    await prisma.entityTranslation.upsert({
-      where: { entityType_entityId_locale_fieldName: { entityType: 'TEAM', entityId: team.id, locale: 'zh-CN', fieldName: 'name' } },
-      create: { entityType: 'TEAM', entityId: team.id, locale: 'zh-CN', fieldName: 'name', value: name },
-      update: { value: name },
-    });
-  }
-
-  const mun = await prisma.team.findUnique({ where: { code: 'MUN' } });
-  const che = await prisma.team.findUnique({ where: { code: 'CHE' } });
-
-  if (mun && che) {
-    const existing = await prisma.match.findFirst({ where: { homeTeamId: mun.id, awayTeamId: che.id } });
-    if (!existing) {
-      const match = await prisma.match.create({
-        data: {
-          leagueId: league.id,
-          homeTeamId: mun.id,
-          awayTeamId: che.id,
-          startTime: new Date(Date.now() + 86400000),
-          status: 'PUBLISHED',
-          isHot: true,
-          publishTime: new Date(),
-        },
-      });
-      await prisma.market.create({
-        data: {
-          matchId: match.id,
-          marketType: 'FT_1X2',
-          period: 'FT',
-          selections: {
-            create: [
-              { selectionCode: 'HOME', selectionName: 'Home', odds: 2.5 },
-              { selectionCode: 'DRAW', selectionName: 'Draw', odds: 3.2 },
-              { selectionCode: 'AWAY', selectionName: 'Away', odds: 2.8 },
-            ],
-          },
-        },
-      });
-    }
-  }
+  await seedSportsDemo();
+  await seedOutrightDemo();
+  await seedPlayerDemo();

  await prisma.content.create({
    data: {
      contentType: 'BANNER',
      status: 'ACTIVE',
      sortOrder: 1,
+      linkType: 'ROUTE',
+      linkTarget: '/football',
      translations: {
        create: [
-          { locale: 'zh-CN', title: '欢迎投注', body: '足球赛事火热进行中' },
-          { locale: 'en-US', title: 'Welcome', body: 'Football matches available' },
+          { locale: 'zh-CN', title: '欢迎投注', body: '足球赛事火热进行中', imageUrl: '/uploads/banners/welcome.svg' },
+          { locale: 'en-US', title: 'Welcome', body: 'Football matches available', imageUrl: '/uploads/banners/welcome.svg' },
+        ],
+      },
+    },
+  }).catch(() => {});
+
+  await prisma.content.create({
+    data: {
+      contentType: 'BANNER',
+      status: 'ACTIVE',
+      sortOrder: 2,
+      translations: {
+        create: [
+          { locale: 'zh-CN', title: '首存礼遇', body: '新会员专属优惠', imageUrl: '/uploads/banners/promo.svg' },
+          { locale: 'en-US', title: 'First Deposit', body: 'New member offer', imageUrl: '/uploads/banners/promo.svg' },
+        ],
+      },
+    },
+  }).catch(() => {});
+
+  await prisma.content.create({
+    data: {
+      contentType: 'BANNER',
+      status: 'ACTIVE',
+      sortOrder: 3,
+      linkType: 'ROUTE',
+      linkTarget: '/football',
+      translations: {
+        create: [
+          { locale: 'zh-CN', title: '热门赛事', body: '五大联赛天天有球', imageUrl: '/uploads/banners/hot-matches.svg' },
+          { locale: 'en-US', title: 'Hot Matches', body: 'Top leagues daily', imageUrl: '/uploads/banners/hot-matches.svg' },
+        ],
+      },
+    },
+  }).catch(() => {});
+
+  await prisma.content.create({
+    data: {
+      contentType: 'TICKER',
+      status: 'ACTIVE',
+      sortOrder: 1,
+      translations: {
+        create: [
+          { locale: 'zh-CN', body: '欢迎来到 TheBet365 · 热门赛事每日更新 · 请理性投注' },
+          { locale: 'en-US', body: 'Welcome to TheBet365 · Daily hot matches · Bet responsibly' },
+        ],
+      },
+    },
+  }).catch(() => {});
+
+  await prisma.content.create({
+    data: {
+      contentType: 'NOTICE',
+      status: 'ACTIVE',
+      sortOrder: 1,
+      translations: {
+        create: [
+          { locale: 'zh-CN', title: '系统维护通知：每周一 04:00-05:00 例行维护，敬请谅解' },
+          { locale: 'en-US', title: 'Maintenance: Every Mon 04:00-05:00 UTC' },
        ],
      },
    },
--- a/apps/api/src/applications/player/player.controller.ts
+++ b/apps/api/src/applications/player/player.controller.ts
@@ -2,6 +2,7 @@ import {
  Controller,
  Get,
  Post,
+  Patch,
  Body,
  Param,
  Query,
@@ -62,6 +63,16 @@ class LocaleDto {
  locale!: string;
 }

+class UpdateProfileDto {
+  @IsOptional()
+  @IsString()
+  phone?: string;
+
+  @IsOptional()
+  @IsString()
+  email?: string;
+}
+
@ApiTags('Player')
@Controller('player')
@UseGuards(JwtAuthGuard, PlayerGuard)
@@ -88,6 +99,12 @@ export class PlayerController {
    return jsonResponse(result);
  }

+  @Patch('profile')
+  async updateProfile(@CurrentUser('id') userId: bigint, @Body() dto: UpdateProfileDto) {
+    const user = await this.users.updateProfile(userId, dto);
+    return jsonResponse(user);
+  }
+
  @Get('home')
  async home(@CurrentUser('locale') locale: string) {
    const [banners, notices, ticker, hotMatches, todayMatches] = await Promise.all([
@@ -115,6 +132,12 @@ export class PlayerController {
    return jsonResponse(items);
  }

+  @Get('outrights')
+  async listOutrights(@CurrentUser('locale') locale: string) {
+    const items = await this.matches.listOutrights(locale);
+    return jsonResponse(items);
+  }
+
  @Get('matches/:id')
  async matchDetail(@Param('id') id: string, @CurrentUser('locale') locale: string) {
    const match = await this.matches.getMatchDetail(BigInt(id), locale);
@@ -149,11 +172,13 @@ export class PlayerController {
  @Get('bets')
  async myBets(
    @CurrentUser('id') userId: bigint,
+    @CurrentUser('locale') locale: string,
    @Query('status') status?: string,
    @Query('page') page?: string,
  ) {
    const result = await this.bets.getUserBets(userId, status, page ? parseInt(page) : 1);
-    return jsonResponse(result);
+    const items = await this.matches.enrichBetsForHistory(result.items, locale);
+    return jsonResponse({ ...result, items });
  }

  @Get('bets/:betNo')
--- a/apps/api/src/domains/catalog/matches.service.ts
+++ b/apps/api/src/domains/catalog/matches.service.ts
@@ -96,9 +96,8 @@ export class MatchesService {
      leagueId: bigint;
      homeTeamId: bigint;
      awayTeamId: bigint;
-      league?: unknown;
-      homeTeam?: unknown;
-      awayTeam?: unknown;
+      homeTeam?: { code: string };
+      awayTeam?: { code: string };
      markets?: unknown[];
    };
    const [leagueName, homeName, awayName] = await Promise.all([
@@ -108,9 +107,13 @@ export class MatchesService {
    ]);
    return {
      ...match,
+      id: m.id.toString(),
+      leagueId: m.leagueId.toString(),
      leagueName,
      homeTeamName: homeName,
      awayTeamName: awayName,
+      homeTeamCode: m.homeTeam?.code ?? '',
+      awayTeamCode: m.awayTeam?.code ?? '',
    };
  }

@@ -118,9 +121,12 @@ export class MatchesService {
    const matches = await this.prisma.match.findMany({
      where: {
        status: 'PUBLISHED',
+        isOutright: false,
        ...(leagueId ? { leagueId } : {}),
      },
      include: {
+        homeTeam: true,
+        awayTeam: true,
        markets: {
          where: { status: 'OPEN' },
          include: { selections: { where: { status: 'OPEN' } } },
@@ -136,8 +142,11 @@ export class MatchesService {
    const match = await this.prisma.match.findUnique({
      where: { id: matchId },
      include: {
+        homeTeam: true,
+        awayTeam: true,
        markets: {
-          include: { selections: true },
+          where: { status: 'OPEN' },
+          include: { selections: { where: { status: 'OPEN' }, orderBy: { sortOrder: 'asc' } } },
          orderBy: { sortOrder: 'asc' },
        },
        score: true,
@@ -147,12 +156,180 @@ export class MatchesService {
    return this.enrichMatch(match, locale);
  }

+  async listOutrights(locale = 'en-US') {
+    const matches = await this.prisma.match.findMany({
+      where: { status: 'PUBLISHED', isOutright: true },
+      include: {
+        markets: {
+          where: { marketType: 'OUTRIGHT_WINNER', status: 'OPEN' },
+          include: {
+            selections: {
+              where: { status: 'OPEN' },
+              orderBy: { sortOrder: 'asc' },
+            },
+          },
+        },
+      },
+      orderBy: [{ displayOrder: 'asc' }, { startTime: 'asc' }],
+    });
+
+    const results = [];
+    for (const match of matches) {
+      const leagueName = await this.getTranslation('LEAGUE', match.leagueId, locale);
+      const market = match.markets[0];
+      if (!market) continue;
+
+      const selections = await Promise.all(
+        market.selections.map(async (sel) => {
+          const teamCode = sel.selectionCode.replace(/^TEAM_/, '');
+          const team = await this.prisma.team.findUnique({ where: { code: teamCode } });
+          const teamName = team
+            ? await this.getTranslation('TEAM', team.id, locale)
+            : sel.selectionName;
+          return {
+            id: sel.id.toString(),
+            teamCode,
+            teamName,
+            odds: sel.odds.toString(),
+            oddsVersion: sel.oddsVersion.toString(),
+          };
+        }),
+      );
+
+      results.push({
+        id: match.id.toString(),
+        leagueId: match.leagueId.toString(),
+        leagueName,
+        title: `*${leagueName} 冠军`,
+        marketId: market.id.toString(),
+        selections,
+      });
+    }
+    return results;
+  }
+
+  private marketLabelKey(marketType: string): string {
+    const keys: Record<string, string> = {
+      FT_1X2: '全场独赢',
+      FT_HANDICAP: '全场让球',
+      FT_OVER_UNDER: '全场大小',
+      FT_ODD_EVEN: '全场单双',
+      HT_1X2: '半场独赢',
+      HT_HANDICAP: '半场让球',
+      HT_OVER_UNDER: '半场大小',
+      OUTRIGHT_WINNER: '冠军',
+      FT_CORRECT_SCORE: '波胆',
+      HT_CORRECT_SCORE: '上半场波胆',
+      SH_CORRECT_SCORE: '下半场波胆',
+    };
+    return keys[marketType] ?? marketType;
+  }
+
+  async enrichBetsForHistory(
+    bets: Array<{
+      betNo: string;
+      betType: string;
+      stake: unknown;
+      totalOdds: unknown;
+      potentialReturn: unknown;
+      actualReturn: unknown;
+      status: string;
+      placedAt: Date;
+      selections: Array<{
+        matchId: bigint | null;
+        marketType: string;
+        selectionNameSnapshot: string;
+        odds: unknown;
+        resultStatus?: string | null;
+      }>;
+    }>,
+    locale: string,
+  ) {
+    const matchIds = [
+      ...new Set(
+        bets.flatMap((b) =>
+          b.selections.map((s) => s.matchId).filter((id): id is bigint => id != null),
+        ),
+      ),
+    ];
+
+    const matches =
+      matchIds.length > 0
+        ? await this.prisma.match.findMany({
+            where: { id: { in: matchIds } },
+            include: { homeTeam: true, awayTeam: true },
+          })
+        : [];
+
+    const matchMeta = new Map<
+      string,
+      { leagueName: string; matchTitle: string; isOutright: boolean }
+    >();
+
+    for (const m of matches) {
+      const [leagueName, homeName, awayName] = await Promise.all([
+        this.getTranslation('LEAGUE', m.leagueId, locale),
+        this.getTranslation('TEAM', m.homeTeamId, locale),
+        this.getTranslation('TEAM', m.awayTeamId, locale),
+      ]);
+      matchMeta.set(m.id.toString(), {
+        leagueName,
+        matchTitle: m.isOutright ? leagueName : `${homeName} vs ${awayName}`,
+        isOutright: m.isOutright,
+      });
+    }
+
+    return bets.map((bet) => {
+      const firstMatchId = bet.selections.find((s) => s.matchId)?.matchId?.toString();
+      const meta = firstMatchId ? matchMeta.get(firstMatchId) : undefined;
+      const isParlay = bet.betType === 'PARLAY' || bet.selections.length > 1;
+
+      const legs = bet.selections.map((sel) => {
+        const mid = sel.matchId?.toString();
+        const m = mid ? matchMeta.get(mid) : undefined;
+        return {
+          marketType: sel.marketType,
+          marketLabel: this.marketLabelKey(sel.marketType),
+          selectionName: sel.selectionNameSnapshot,
+          odds: sel.odds,
+          resultStatus: sel.resultStatus,
+          matchTitle: m?.matchTitle ?? sel.selectionNameSnapshot,
+          leagueName: m?.leagueName ?? '',
+        };
+      });
+
+      return {
+        betNo: bet.betNo,
+        betType: bet.betType,
+        stake: bet.stake,
+        totalOdds: bet.totalOdds,
+        potentialReturn: bet.potentialReturn,
+        actualReturn: bet.actualReturn,
+        status: bet.status,
+        placedAt: bet.placedAt,
+        leagueName: isParlay
+          ? 'Parlay'
+          : meta?.leagueName ?? legs[0]?.leagueName ?? '',
+        legCount: bet.selections.length,
+        matchTitle: isParlay
+          ? ''
+          : meta?.matchTitle ?? legs[0]?.matchTitle ?? bet.betNo,
+        pickLabel: isParlay
+          ? ''
+          : `${legs[0]?.marketLabel ?? ''}: ${legs[0]?.selectionName ?? ''}`,
+        legs,
+        isParlay,
+      };
+    });
+  }
+
  @Cron(CronExpression.EVERY_MINUTE)
  async autoCloseMatches() {
    const now = new Date();
    await this.prisma.match.updateMany({
      where: {
        status: 'PUBLISHED',
+        isOutright: false,
        startTime: { lte: now },
      },
      data: { status: 'CLOSED', closeTime: now },
--- a/apps/api/src/domains/identity/users.service.ts
+++ b/apps/api/src/domains/identity/users.service.ts
@@ -12,6 +12,17 @@ export class UsersService {
    });
  }

+  async updateProfile(userId: bigint, data: { phone?: string; email?: string }) {
+    const phone = data.phone?.trim() || null;
+    const email = data.email?.trim() || null;
+    await this.prisma.userPreference.upsert({
+      where: { userId },
+      create: { userId, phone, email },
+      update: { phone, email },
+    });
+    return this.findById(userId);
+  }
+
  async updateLocale(userId: bigint, locale: string) {
    await this.prisma.user.update({
      where: { id: userId },
--- a/apps/api/src/main.ts
+++ b/apps/api/src/main.ts
@@ -1,10 +1,15 @@
 import { NestFactory } from '@nestjs/core';
 import { ValidationPipe } from '@nestjs/common';
 import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
+import { NestExpressApplication } from '@nestjs/platform-express';
+import { join } from 'path';
 import { AppModule } from './app.module';

 async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
+  const app = await NestFactory.create<NestExpressApplication>(AppModule);
+
+  const uploadDir = process.env.UPLOAD_DIR || join(__dirname, '..', '..', 'uploads');
+  app.useStaticAssets(uploadDir, { prefix: '/uploads/' });

  app.setGlobalPrefix('api');
  app.enableCors({ origin: true, credentials: true });
--- a/apps/api/src/shared/common/decorators.ts
+++ b/apps/api/src/shared/common/decorators.ts
@@ -32,10 +32,18 @@ export function generateBatchNo(prefix: string): string {
  return `${prefix}${ts}`;
 }

+function isDecimalLike(obj: object): obj is { toJSON: () => string } {
+  return (
+    typeof (obj as { toJSON?: unknown }).toJSON === 'function' &&
+    typeof (obj as { toFixed?: unknown }).toFixed === 'function'
+  );
+}
+
 export function serializeBigInt(obj: unknown): unknown {
  if (obj === null || obj === undefined) return obj;
  if (typeof obj === 'bigint') return obj.toString();
  if (obj instanceof Date) return obj.toISOString();
+  if (typeof obj === 'object' && isDecimalLike(obj)) return obj.toJSON();
  if (Array.isArray(obj)) return obj.map(serializeBigInt);
  if (typeof obj === 'object') {
    const result: Record<string, unknown> = {};
--- a/apps/player/index.html
+++ b/apps/player/index.html
@@ -3,7 +3,10 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="icon" type="image/png" href="/logo.png" />
+    <link rel="apple-touch-icon" href="/logo.png" />
+    <link rel="manifest" href="/site.webmanifest" />
    <title>TheBet365</title>
  </head>
  <body>
--- a/apps/player/src/assets/images/banner.png
+++ b/apps/player/src/assets/images/banner.png
--- a/apps/player/src/assets/images/banner.svg
+++ b/apps/player/src/assets/images/banner.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 280" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="750" y2="280" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#1A1A1A"/>
+      <stop offset="0.5" stop-color="#252015"/>
+      <stop offset="1" stop-color="#000000"/>
+    </linearGradient>
+    <linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
+      <stop stop-color="#E8C96A"/>
+      <stop offset="1" stop-color="#D4AF37"/>
+    </linearGradient>
+  </defs>
+  <rect width="750" height="280" fill="url(#bg)"/>
+  <circle cx="620" cy="80" r="120" fill="#D4AF37" opacity="0.06"/>
+  <circle cx="680" cy="200" r="80" fill="#D4AF37" opacity="0.08"/>
+  <text x="40" y="110" font-family="Arial, sans-serif" font-size="42" font-weight="800" fill="url(#gold)">TheBet365</text>
+  <text x="40" y="160" font-family="Arial, sans-serif" font-size="22" fill="#8E8E93">足球赛事火热进行中</text>
+  <rect x="40" y="190" width="140" height="4" fill="#D4AF37" opacity="0.5" rx="2"/>
+</svg>
--- a/apps/player/src/assets/images/empty-matches.svg
+++ b/apps/player/src/assets/images/empty-matches.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none" aria-hidden="true">
+  <circle cx="60" cy="60" r="48" stroke="#D4AF37" stroke-width="4" opacity="0.5"/>
+  <circle cx="60" cy="60" r="22" stroke="#F0D875" stroke-width="4"/>
+  <path d="M60 8 L68 32 L60 44 L52 32 Z" fill="#D4AF37"/>
+  <path d="M60 112 L68 88 L60 76 L52 88 Z" fill="#D4AF37"/>
+  <path d="M8 60 L32 52 L44 60 L32 68 Z" fill="#D4AF37"/>
+  <path d="M112 60 L88 68 L76 60 L88 52 Z" fill="#D4AF37"/>
+</svg>
--- a/apps/player/src/assets/images/h5bg.png
+++ b/apps/player/src/assets/images/h5bg.png
--- a/apps/player/src/assets/images/saishi.png
+++ b/apps/player/src/assets/images/saishi.png
--- a/apps/player/src/components/AnnouncementMarquee.vue
+++ b/apps/player/src/components/AnnouncementMarquee.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{ items: string[]; embedded?: boolean }>(),
+  { embedded: false },
+);
+
+const text = computed(() => {
+  const list = props.items.filter(Boolean);
+  if (!list.length) return '';
+  return list.join('　　◆　　');
+});
+</script>
+
+<template>
+  <div v-if="text" class="marquee-bar" :class="{ embedded }">
+    <span class="marquee-badge">公告</span>
+    <div class="marquee-viewport">
+      <div class="marquee-track">
+        <span class="marquee-text">{{ text }}</span>
+        <span class="marquee-text" aria-hidden="true">{{ text }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.marquee-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: -4px -2px 14px;
+  padding: 10px 12px;
+  background: #141414;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.marquee-bar.embedded {
+  margin: 0;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid var(--border);
+  background: #111;
+}
+
+.marquee-bar.embedded .marquee-badge {
+  padding: 3px 8px;
+  font-size: 10px;
+}
+
+.marquee-bar.embedded .marquee-text {
+  font-size: 12px;
+}
+
+.marquee-badge {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  color: #1A1000;
+  background: var(--gradient-gold);
+  border: 1px solid var(--border-gold-soft);
+  border-radius: 4px;
+}
+
+.marquee-viewport {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+}
+
+.marquee-track {
+  display: flex;
+  width: max-content;
+  animation: marquee-scroll 22s linear infinite;
+}
+
+.marquee-text {
+  flex-shrink: 0;
+  padding-right: 80px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-light);
+  white-space: nowrap;
+}
+
+@keyframes marquee-scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+</style>
--- a/apps/player/src/components/BannerCarousel.vue
+++ b/apps/player/src/components/BannerCarousel.vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import defaultBannerImg from '../assets/images/banner.png';
+
+export interface BannerItem {
+  id?: string;
+  linkType?: string | null;
+  linkTarget?: string | null;
+  translation?: { title?: string; body?: string; imageUrl?: string };
+}
+
+const props = defineProps<{ banners: BannerItem[] }>();
+
+const router = useRouter();
+const active = ref(0);
+const timer = ref<ReturnType<typeof setInterval> | null>(null);
+const touchStartX = ref(0);
+const touchDeltaX = ref(0);
+const FALLBACK_IMG = '/uploads/banners/welcome.svg';
+
+function imageUrl(banner: BannerItem) {
+  return banner.translation?.imageUrl || defaultBannerImg || FALLBACK_IMG;
+}
+
+function onImgError(e: Event) {
+  const img = e.target as HTMLImageElement;
+  if (img.dataset.fallbackApplied) return;
+  img.dataset.fallbackApplied = '1';
+  img.src = defaultBannerImg || FALLBACK_IMG;
+}
+
+function title(banner: BannerItem) {
+  return banner.translation?.title || 'Banner';
+}
+
+function goTo(index: number) {
+  if (!props.banners.length) return;
+  active.value = (index + props.banners.length) % props.banners.length;
+}
+
+function next() {
+  goTo(active.value + 1);
+}
+
+function prev() {
+  goTo(active.value - 1);
+}
+
+function onBannerClick(banner: BannerItem) {
+  if (banner.linkType === 'ROUTE' && banner.linkTarget) {
+    router.push(banner.linkTarget);
+    return;
+  }
+  if (banner.linkType === 'URL' && banner.linkTarget) {
+    window.open(banner.linkTarget, '_blank');
+  }
+}
+
+function startAutoPlay() {
+  stopAutoPlay();
+  if (props.banners.length <= 1) return;
+  timer.value = setInterval(next, 4500);
+}
+
+function stopAutoPlay() {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+}
+
+function onTouchStart(e: TouchEvent) {
+  touchStartX.value = e.touches[0].clientX;
+  touchDeltaX.value = 0;
+  stopAutoPlay();
+}
+
+function onTouchMove(e: TouchEvent) {
+  touchDeltaX.value = e.touches[0].clientX - touchStartX.value;
+}
+
+function onTouchEnd() {
+  if (touchDeltaX.value > 50) prev();
+  else if (touchDeltaX.value < -50) next();
+  touchDeltaX.value = 0;
+  startAutoPlay();
+}
+
+watch(
+  () => props.banners.length,
+  () => {
+    active.value = 0;
+    startAutoPlay();
+  },
+);
+
+onMounted(startAutoPlay);
+onUnmounted(stopAutoPlay);
+</script>
+
+<template>
+  <div
+    v-if="banners.length"
+    class="carousel"
+    @mouseenter="stopAutoPlay"
+    @mouseleave="startAutoPlay"
+    @touchstart.passive="onTouchStart"
+    @touchmove.passive="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <div class="media">
+      <div class="viewport">
+        <div class="track" :style="{ transform: `translateX(-${active * 100}%)` }">
+          <div
+            v-for="(banner, i) in banners"
+            :key="banner.id ?? i"
+            class="slide"
+            @click="onBannerClick(banner)"
+          >
+            <img
+              v-if="imageUrl(banner)"
+              :src="imageUrl(banner)"
+              :alt="title(banner)"
+              class="slide-img"
+              @error="onImgError"
+            />
+            <div v-else class="slide-fallback">{{ title(banner) }}</div>
+          </div>
+        </div>
+      </div>
+
+      <button v-if="banners.length > 1" class="nav prev" type="button" aria-label="上一张" @click.stop="prev">‹</button>
+      <button v-if="banners.length > 1" class="nav next" type="button" aria-label="下一张" @click.stop="next">›</button>
+
+      <div v-if="banners.length > 1" class="dots">
+        <button
+          v-for="(_, i) in banners"
+          :key="i"
+          type="button"
+          class="dot"
+          :class="{ active: i === active }"
+          :aria-label="`第 ${i + 1} 张`"
+          @click.stop="goTo(i)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.carousel {
+  position: relative;
+  margin: 0 -16px 14px;
+  overflow: hidden;
+}
+
+.media {
+  position: relative;
+  overflow: hidden;
+}
+
+.viewport {
+  overflow: hidden;
+  width: 100%;
+}
+
+.track {
+  display: flex;
+  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide {
+  flex: 0 0 100%;
+  min-width: 100%;
+  cursor: pointer;
+}
+
+.slide-img {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  display: block;
+}
+
+.slide-fallback {
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), var(--secondary));
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.media .nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: var(--primary-light);
+  border: 1px solid var(--border);
+  font-size: 22px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.nav.prev { left: 8px; }
+.nav.next { right: 8px; }
+
+.media .dots {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  z-index: 2;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.35);
+  border: 2px solid transparent;
+  padding: 0;
+}
+
+.dot.active {
+  width: 22px;
+  border-radius: 6px;
+  background: var(--gradient-gold);
+  border-color: var(--primary-light);
+  box-shadow: none;
+}
+</style>
--- a/apps/player/src/components/BetHistoryCard.vue
+++ b/apps/player/src/components/BetHistoryCard.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { formatMoney } from '../utils/localeDisplay';
+
+export interface BetHistoryItem {
+  betNo: string;
+  betType: string;
+  stake: unknown;
+  potentialReturn: unknown;
+  actualReturn: unknown;
+  status: string;
+  placedAt: string;
+  leagueName?: string;
+  matchTitle: string;
+  pickLabel: string;
+  isParlay?: boolean;
+  legCount?: number;
+  legs?: Array<{
+    marketLabel: string;
+    selectionName: string;
+    matchTitle: string;
+    odds: unknown;
+  }>;
+}
+
+const props = defineProps<{ bet: BetHistoryItem }>();
+
+const { t, locale } = useI18n();
+
+const statusKey = computed(() => {
+  const s = props.bet.status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'won';
+  if (s === 'LOST' || s === 'LOSE') return 'lost';
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
+  return 'pending';
+});
+
+const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
+
+const placedDate = computed(() =>
+  new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }),
+);
+
+const matchTitle = computed(() => {
+  if (props.bet.isParlay) {
+    const n = props.bet.legCount ?? props.bet.legs?.length ?? 0;
+    return t('history.parlay_title', { n });
+  }
+  return props.bet.matchTitle;
+});
+
+const pickLabel = computed(() => {
+  if (props.bet.isParlay) return '';
+  return props.bet.pickLabel;
+});
+
+const returnLabel = computed(() =>
+  statusKey.value === 'pending' ? t('history.est_return') : t('history.return'),
+);
+
+const returnAmount = computed(() => {
+  if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
+  if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
+  if (statusKey.value === 'lost') return formatMoney(0, locale.value);
+  return formatMoney(props.bet.actualReturn ?? props.bet.potentialReturn, locale.value);
+});
+
+const returnHighlight = computed(() => statusKey.value === 'won');
+</script>
+
+<template>
+  <article class="bet-card">
+    <header class="card-head">
+      <div class="meta">
+        <span class="sport-icon" aria-hidden="true">⚽</span>
+        <span class="league">{{
+          bet.isParlay ? t('history.parlay_league') : bet.leagueName || t('history.league_default')
+        }}</span>
+        <span class="dot">·</span>
+        <span class="date">{{ placedDate }}</span>
+      </div>
+      <span class="status-badge" :class="statusKey">{{ statusLabel }}</span>
+    </header>
+
+    <h3 class="match-title">{{ matchTitle }}</h3>
+    <p v-if="pickLabel" class="pick-line">{{ pickLabel }}</p>
+
+    <div v-if="bet.isParlay && bet.legs?.length" class="parlay-legs">
+      <div v-for="(leg, i) in bet.legs" :key="i" class="leg">
+        <span class="leg-match">{{ leg.matchTitle }}</span>
+        <span class="leg-pick">{{ leg.marketLabel }}: {{ leg.selectionName }}</span>
+      </div>
+    </div>
+
+    <div class="divider" />
+
+    <footer class="card-foot">
+      <div class="money-col">
+        <span class="money-label">{{ t('history.stake') }}</span>
+        <span class="money-value">{{ formatMoney(bet.stake, locale) }}</span>
+      </div>
+      <div class="money-col align-right">
+        <span class="money-label">{{ returnLabel }}</span>
+        <span class="money-value" :class="{ highlight: returnHighlight }">{{ returnAmount }}</span>
+      </div>
+    </footer>
+  </article>
+</template>
+
+<style scoped>
+.bet-card {
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  border-radius: 10px;
+  padding: 14px 14px 12px;
+  margin-bottom: 12px;
+}
+
+.card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.sport-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.league {
+  color: #9a9a9a;
+}
+
+.dot {
+  opacity: 0.5;
+}
+
+.date {
+  color: #7a7a7a;
+}
+
+.status-badge {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+}
+
+.status-badge.won {
+  color: var(--primary-light);
+  background: rgba(46, 125, 50, 0.35);
+  border: 1px solid rgba(212, 175, 55, 0.25);
+}
+
+.status-badge.pending {
+  color: #9a9a9a;
+  background: #1f1f1f;
+  border: 1px solid #333;
+}
+
+.status-badge.lost {
+  color: #ff6b6b;
+  background: rgba(198, 40, 40, 0.2);
+  border: 1px solid rgba(198, 40, 40, 0.35);
+}
+
+.status-badge.push {
+  color: #aaa;
+  background: #1f1f1f;
+  border: 1px solid #333;
+}
+
+.match-title {
+  font-size: 17px;
+  font-weight: 800;
+  color: var(--text);
+  line-height: 1.3;
+  margin-bottom: 6px;
+}
+
+.pick-line {
+  font-size: 13px;
+  color: #9a9a9a;
+  font-weight: 600;
+  line-height: 1.4;
+  margin-bottom: 4px;
+}
+
+.parlay-legs {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.leg {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.35;
+}
+
+.leg-match {
+  font-weight: 700;
+  color: #b0b0b0;
+}
+
+.leg-pick {
+  display: block;
+  margin-top: 2px;
+}
+
+.divider {
+  height: 1px;
+  background: #2a2a2a;
+  margin: 12px 0 10px;
+}
+
+.card-foot {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.money-col {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.money-col.align-right {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.money-label {
+  font-size: 11px;
+  color: #7a7a7a;
+  font-weight: 600;
+}
+
+.money-value {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--text);
+}
+
+.money-value.highlight {
+  color: var(--primary-light);
+}
+</style>
--- a/apps/player/src/components/BetSlipDrawer.vue
+++ b/apps/player/src/components/BetSlipDrawer.vue
@@ -32,7 +32,7 @@ async function placeBet() {
    const requestId = genId();
    if (slip.mode === 'parlay' && slip.items.length >= 2) {
      if (slip.hasSameMatch) {
-        error.value = '同一场比赛不能串关';
+        error.value = t('bet.parlay_same_match');
        return;
      }
      await api.post('/player/bets/parlay', {
@@ -52,7 +52,7 @@ async function placeBet() {
        requestId,
      });
    } else {
-      error.value = '请选择投注项';
+      error.value = t('bet.parlay_need_more');
      return;
    }
    success.value = '下注成功！';
@@ -70,15 +70,15 @@ async function placeBet() {
  <div v-if="show" class="overlay" @click.self="show = false">
    <div class="drawer">
      <div class="drawer-header">
-        <h3>{{ t('bet.bet_slip') }} ({{ slip.count }})</h3>
-        <button @click="show = false">✕</button>
+        <h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
+        <button class="close-btn" @click="show = false">✕</button>
      </div>

      <div v-if="!slip.items.length" class="empty">点击赔率添加投注</div>

      <div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
        <div class="item-name">{{ item.matchName }}</div>
-        <div class="item-sel">{{ item.selectionName }} @ {{ item.odds }}</div>
+        <div class="item-sel">{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span></div>
        <button class="remove" @click="slip.removeItem(item.selectionId)">移除</button>
      </div>

@@ -88,7 +88,7 @@ async function placeBet() {
        <label>{{ t('bet.stake') }}</label>
        <input v-model.number="slip.stake" type="number" min="1" />
        <div v-if="slip.isParlay" class="mode-tag">{{ t('bet.parlay') }} · 赔率 {{ slip.totalOdds.toFixed(2) }}</div>
-        <div class="return">预计返还: {{ slip.potentialReturn.toFixed(2) }}</div>
+        <div class="return">预计返还: <strong>{{ slip.potentialReturn.toFixed(2) }}</strong></div>
      </div>

      <p v-if="error" class="error">{{ error }}</p>
@@ -102,20 +102,49 @@ async function placeBet() {
 </template>

 <style scoped>
-.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; align-items: flex-end; }
-.drawer { background: #1a2332; width: 100%; max-height: 80vh; border-radius: 16px 16px 0 0; padding: 16px; overflow-y: auto; }
-.drawer-header { display: flex; justify-content: space-between; margin-bottom: 16px; }
-.drawer-header button { background: none; color: var(--text-muted); font-size: 20px; }
-.slip-item { padding: 12px; background: var(--bg-hover); border-radius: 6px; margin-bottom: 8px; }
-.item-name { font-size: 13px; font-weight: 600; }
-.item-sel { font-size: 12px; color: var(--text-muted); }
-.remove { background: none; color: var(--danger); font-size: 12px; margin-top: 4px; }
-.stake-area { margin: 16px 0; }
-.stake-area label { font-size: 13px; color: var(--text-muted); display: block; margin-bottom: 4px; }
-.return { font-size: 14px; color: #ffd700; margin-top: 8px; }
-.mode-tag { font-size: 12px; color: var(--primary); margin-top: 4px; }
-.warn { color: #ff9800; font-size: 12px; margin-bottom: 8px; }
-.error { color: var(--danger); font-size: 13px; }
-.success { color: var(--primary); font-size: 13px; }
-.empty { text-align: center; color: var(--text-muted); padding: 24px; }
+.overlay {
+  position: fixed; inset: 0;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 200;
+  display: flex; align-items: flex-end;
+}
+.drawer {
+  background: linear-gradient(180deg, #222 0%, #141414 100%);
+  width: 100%;
+  max-height: 80vh;
+  border-radius: 20px 20px 0 0;
+  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0));
+  overflow-y: auto;
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
+}
+.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.drawer-header h3 { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; }
+.count { color: var(--primary-light); font-size: 20px; font-weight: 800; }
+.close-btn { background: none; color: var(--text-muted); font-size: 22px; padding: 4px; font-weight: 700; }
+.slip-item {
+  padding: 14px;
+  background: #111;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  margin-bottom: 10px;
+}
+.item-name { font-size: 14px; font-weight: 800; }
+.item-sel { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-weight: 500; }
+.odds { color: var(--primary-light); font-weight: 800; }
+.remove { background: none; color: var(--danger); font-size: 13px; margin-top: 8px; font-weight: 700; }
+.stake-area { margin: 18px 0; }
+.stake-area label { font-size: 13px; color: var(--primary-light); display: block; margin-bottom: 8px; font-weight: 700; letter-spacing: 0.04em; }
+.return { font-size: 15px; color: var(--text-muted); margin-top: 12px; font-weight: 600; }
+.return strong {
+  color: var(--primary-light);
+  font-size: 22px;
+  font-weight: 800;
+  text-shadow: none;
+}
+.mode-tag { font-size: 13px; color: var(--primary-light); font-weight: 700; margin-top: 8px; }
+.warn { color: var(--primary-light); font-size: 13px; margin-bottom: 10px; font-weight: 600; }
+.error { color: var(--danger); font-size: 14px; margin-bottom: 8px; font-weight: 600; }
+.success { color: var(--primary-light); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
+.empty { text-align: center; color: var(--text-muted); padding: 32px; font-weight: 600; }
 </style>
--- a/apps/player/src/components/BottomNavIcon.vue
+++ b/apps/player/src/components/BottomNavIcon.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+defineProps<{
+  name: 'home' | 'bet' | 'history' | 'wallet' | 'profile';
+}>();
+</script>
+
+<template>
+  <svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
+    <!-- home -->
+    <template v-if="name === 'home'">
+      <path
+        d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </template>
+
+    <!-- bet / football -->
+    <template v-else-if="name === 'bet'">
+      <circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" stroke-width="1.75" />
+      <path
+        d="M12 3.75 14.2 8.5 19.5 9l-3.8 3.2 1.1 5.3L12 15.5 7.2 17.5l1.1-5.3L4.5 9l5.3-.5L12 3.75Z"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      />
+    </template>
+
+    <!-- bet history -->
+    <template v-else-if="name === 'history'">
+      <path
+        d="M6 4h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 9h8M8 12.5h8M8 16h5"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+      />
+    </template>
+
+    <!-- wallet -->
+    <template v-else-if="name === 'wallet'">
+      <path
+        d="M4 7.5A2 2 0 0 1 6 5.5h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9Z"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16 12.5h4v-2h-4a1.25 1.25 0 1 0 0 2.5Z"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+      <path d="M4 9.5h16" fill="none" stroke="currentColor" stroke-width="1.75" />
+    </template>
+
+    <!-- profile -->
+    <template v-else>
+      <circle cx="12" cy="8.5" r="3.25" fill="none" stroke="currentColor" stroke-width="1.75" />
+      <path
+        d="M5.5 19.5c1.2-3 3.4-4.5 6.5-4.5s5.3 1.5 6.5 4.5"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+      />
+    </template>
+  </svg>
+</template>
+
+<style scoped>
+.nav-icon {
+  width: 22px;
+  height: 22px;
+  display: block;
+  flex-shrink: 0;
+}
+</style>
--- a/apps/player/src/components/CashBalanceChip.vue
+++ b/apps/player/src/components/CashBalanceChip.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+
+const { locale, t } = useI18n();
+const open = ref(false);
+const wallet = ref<{ availableBalance?: unknown; frozenBalance?: unknown; currency?: string } | null>(null);
+
+const available = computed(() => formatMoney(wallet.value?.availableBalance, locale.value));
+const frozen = computed(() => formatMoney(wallet.value?.frozenBalance, locale.value));
+function amountValue(value: unknown): number {
+  if (value == null) return 0;
+  if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
+  if (typeof value === 'string') {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : 0;
+  }
+  if (typeof value === 'object' && typeof (value as { toString?: () => string }).toString === 'function') {
+    const n = Number((value as { toString: () => string }).toString());
+    return Number.isFinite(n) ? n : 0;
+  }
+  return 0;
+}
+
+const total = computed(() =>
+  formatMoney(
+    amountValue(wallet.value?.availableBalance) + amountValue(wallet.value?.frozenBalance),
+    locale.value,
+  ),
+);
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get('/player/profile');
+    wallet.value = data.data?.wallet ?? null;
+  } catch {
+    wallet.value = null;
+  }
+});
+
+function toggle() {
+  open.value = !open.value;
+}
+
+function close() {
+  open.value = false;
+}
+</script>
+
+<template>
+  <div class="cash-chip-wrap">
+    <button type="button" class="cash-chip" @click="toggle">
+      <span class="chip-body">
+        <span class="chip-label">{{ t('wallet.cash_balance') }}</span>
+        <span class="chip-amount">{{ available }}</span>
+      </span>
+      <span class="chevron" :class="{ open }">▾</span>
+    </button>
+
+    <div v-if="open" class="cash-panel">
+      <div class="panel-row">
+        <span>{{ t('wallet.cash_balance') }}</span>
+        <span>{{ total }}</span>
+      </div>
+      <div class="panel-divider" />
+      <div class="panel-row muted">
+        <span>{{ t('wallet.unsettled') }}</span>
+        <span>{{ frozen }}</span>
+      </div>
+      <div class="panel-row highlight">
+        <span>{{ t('wallet.available') }}</span>
+        <span>{{ available }}</span>
+      </div>
+    </div>
+
+    <div v-if="open" class="backdrop" @click="close" />
+  </div>
+</template>
+
+<style scoped>
+.cash-chip-wrap {
+  position: relative;
+  z-index: 120;
+}
+
+.cash-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px 4px 6px;
+  min-width: 0;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #141414;
+}
+
+.chip-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.chip-label {
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+.chip-amount {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  text-shadow: none;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+.chevron {
+  font-size: 10px;
+  color: var(--primary-light);
+  transition: transform 0.2s;
+  margin-left: 0;
+}
+
+.chevron.open {
+  transform: rotate(180deg);
+}
+
+.cash-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: min(260px, 78vw);
+  padding: 12px 14px;
+  z-index: 130;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: #141414;
+  box-shadow: var(--shadow);
+}
+
+.cash-panel::before {
+  display: none;
+}
+
+.panel-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 6px 0;
+}
+
+.panel-row.muted {
+  color: var(--text-muted);
+}
+
+.panel-row.highlight {
+  color: var(--primary-light);
+  font-weight: 800;
+  font-size: 14px;
+}
+
+.panel-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--border-gold-soft), transparent);
+  margin: 4px 0;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 110;
+}
+</style>
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import MatchBetCard from './MatchBetCard.vue';
+import saishiImg from '../assets/images/saishi.png';
+
+defineProps<{
+  leagueId: string;
+  leagueName: string;
+  expanded: boolean;
+  matches: {
+    id: string;
+    homeTeamName: string;
+    awayTeamName: string;
+    homeTeamCode?: string;
+    awayTeamCode?: string;
+    startTime: string;
+  }[];
+}>();
+
+const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
+</script>
+
+<template>
+  <section class="league-block">
+    <button type="button" class="league-row" :aria-expanded="expanded" @click="emit('toggle')">
+      <span class="toggle-icon" :class="{ open: expanded }" aria-hidden="true">
+        <span class="toggle-mark">{{ expanded ? '−' : '+' }}</span>
+      </span>
+      <span class="league-title">*{{ leagueName }}</span>
+      <img :src="saishiImg" alt="" class="league-saishi" />
+    </button>
+
+    <div v-show="expanded" class="match-panel">
+      <div class="match-grid">
+        <MatchBetCard
+          v-for="match in matches"
+          :key="match.id"
+          :match="match"
+          @bet="emit('bet', $event)"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.league-block {
+  margin-bottom: 10px;
+}
+
+.league-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 12px;
+  background: #141414;
+  border: 1px solid #2e2e2e;
+  border-radius: 6px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.league-row:active {
+  opacity: 0.92;
+}
+
+.toggle-icon {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: #141414;
+  border: 1px solid var(--border-gold-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toggle-mark {
+  color: var(--primary-light);
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 1;
+  margin-top: -1px;
+}
+
+.league-title {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.35;
+  min-width: 0;
+}
+
+.league-saishi {
+  flex-shrink: 0;
+  height: 44px;
+  width: auto;
+  max-width: 40px;
+  object-fit: contain;
+  margin-left: 4px;
+  padding-left: 10px;
+  border-left: 1px solid #2a2a2a;
+}
+
+.match-panel {
+  padding: 10px 0 4px;
+}
+
+.match-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+}
+</style>
--- a/apps/player/src/components/LocaleFlag.vue
+++ b/apps/player/src/components/LocaleFlag.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getLocaleDisplay } from '../utils/localeDisplay';
+
+const props = withDefaults(
+  defineProps<{ locale: string; size?: number }>(),
+  { size: 20 },
+);
+
+const countryCode = computed(() => getLocaleDisplay(props.locale).countryCode);
+const src = computed(() => `/flags/${countryCode.value}.svg`);
+</script>
+
+<template>
+  <img
+    :src="src"
+    :width="size"
+    :height="Math.round(size * 0.67)"
+    class="locale-flag"
+    :alt="countryCode"
+  />
+</template>
+
+<style scoped>
+.locale-flag {
+  display: block;
+  flex-shrink: 0;
+  border-radius: 2px;
+  object-fit: cover;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+</style>
--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { teamFlagUrl } from '../utils/teamFlag';
+
+const props = defineProps<{
+  match: {
+    id: string;
+    homeTeamName: string;
+    awayTeamName: string;
+    homeTeamCode?: string;
+    awayTeamCode?: string;
+    startTime: string;
+  };
+}>();
+
+const emit = defineEmits<{ bet: [id: string] }>();
+
+const { t, locale } = useI18n();
+
+const kickoff = computed(() => {
+  const d = new Date(props.match.startTime);
+  return d.toLocaleString(locale.value, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  });
+});
+
+const homeFlag = computed(() => teamFlagUrl(props.match.homeTeamCode, props.match.homeTeamName));
+const awayFlag = computed(() => teamFlagUrl(props.match.awayTeamCode, props.match.awayTeamName));
+</script>
+
+<template>
+  <article class="match-card">
+    <div class="kickoff">{{ kickoff }}</div>
+    <div class="teams-stack">
+      <div class="side">
+        <img v-if="homeFlag" :src="homeFlag" alt="" class="flag" />
+        <span class="name">{{ match.homeTeamName }}</span>
+      </div>
+      <span class="vs">VS</span>
+      <div class="side">
+        <img v-if="awayFlag" :src="awayFlag" alt="" class="flag" />
+        <span class="name">{{ match.awayTeamName }}</span>
+      </div>
+    </div>
+    <button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
+      {{ t('bet.place_bet_short') }}
+    </button>
+  </article>
+</template>
+
+<style scoped>
+.match-card {
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  border-radius: 6px;
+  padding: 6px 4px 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.kickoff {
+  width: 100%;
+  text-align: center;
+  font-size: 9px;
+  line-height: 1.25;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.teams-stack {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.side {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+.flag {
+  width: 22px;
+  height: 15px;
+  object-fit: cover;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+.name {
+  width: 100%;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.2;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 2px;
+}
+
+.vs {
+  font-size: 9px;
+  font-weight: 800;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+.bet-btn {
+  width: 100%;
+  margin-top: 2px;
+  padding: 3px 2px;
+  border-radius: 4px;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+}
+</style>
--- a/apps/player/src/components/RobotVerify.vue
+++ b/apps/player/src/components/RobotVerify.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const input = ref('');
+const code = ref('');
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const honeypot = ref('');
+
+function generateCode() {
+  code.value = String(Math.floor(1000 + Math.random() * 9000));
+}
+
+function drawCaptcha() {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const w = 108;
+  const h = 44;
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  ctx.fillStyle = '#7c3aed';
+  ctx.fillRect(0, 0, w, h);
+
+  for (let i = 0; i < 28; i++) {
+    ctx.fillStyle = `rgba(255,255,255,${0.15 + Math.random() * 0.35})`;
+    ctx.beginPath();
+    ctx.arc(Math.random() * w, Math.random() * h, Math.random() * 2.2, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  for (let i = 0; i < 5; i++) {
+    ctx.strokeStyle = `rgba(255,255,255,${0.2 + Math.random() * 0.3})`;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(Math.random() * w, Math.random() * h);
+    ctx.lineTo(Math.random() * w, Math.random() * h);
+    ctx.stroke();
+  }
+
+  ctx.save();
+  ctx.translate(w / 2, h / 2);
+  ctx.rotate((Math.random() - 0.5) * 0.12);
+  ctx.font = 'italic bold 26px Arial, sans-serif';
+  ctx.fillStyle = '#ffffff';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(code.value, 0, 1);
+  ctx.restore();
+}
+
+function refresh() {
+  generateCode();
+  input.value = '';
+  drawCaptcha();
+}
+
+function validate(): boolean {
+  if (honeypot.value) {
+    refresh();
+    return false;
+  }
+  return input.value.trim() === code.value;
+}
+
+onMounted(refresh);
+
+defineExpose({ validate, refresh });
+</script>
+
+<template>
+  <div class="captcha-row">
+    <input
+      v-model="honeypot"
+      type="text"
+      name="website"
+      tabindex="-1"
+      autocomplete="off"
+      class="hp-field"
+      aria-hidden="true"
+    />
+    <input
+      v-model="input"
+      type="text"
+      inputmode="numeric"
+      maxlength="4"
+      class="captcha-input"
+      :placeholder="t('auth.captcha_placeholder')"
+      autocomplete="off"
+    />
+    <canvas
+      ref="canvasRef"
+      class="captcha-canvas"
+      :title="t('auth.captcha_refresh')"
+      role="button"
+      tabindex="0"
+      @click="refresh"
+      @keydown.enter="refresh"
+    />
+  </div>
+</template>
+
+<style scoped>
+.captcha-row {
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+  height: 44px;
+}
+
+.hp-field {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.captcha-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0 14px;
+  border: none;
+  border-radius: 8px 0 0 8px;
+  background: #ffffff;
+  color: #111;
+  font-size: 15px;
+  font-weight: 500;
+  outline: none;
+}
+
+.captcha-input::placeholder {
+  color: #9ca3af;
+}
+
+.captcha-canvas {
+  flex-shrink: 0;
+  width: 108px;
+  height: 44px;
+  cursor: pointer;
+  display: block;
+  border-radius: 0 8px 8px 0;
+}
+</style>
--- a/apps/player/src/components/UserAvatarMenu.vue
+++ b/apps/player/src/components/UserAvatarMenu.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAuthStore } from '../stores/auth';
+
+const { t } = useI18n();
+const auth = useAuthStore();
+const router = useRouter();
+const open = ref(false);
+
+const initial = computed(() => {
+  const name = auth.user?.username ?? '?';
+  return name.charAt(0).toUpperCase();
+});
+
+function toggle() {
+  open.value = !open.value;
+}
+
+function close() {
+  open.value = false;
+}
+
+function goEdit() {
+  close();
+  router.push('/profile/edit');
+}
+
+function logout() {
+  close();
+  auth.logout();
+  router.push('/login');
+}
+</script>
+
+<template>
+  <div class="avatar-wrap">
+    <button type="button" class="avatar-btn" :aria-expanded="open" @click="toggle">
+      <span class="avatar-letter">{{ initial }}</span>
+    </button>
+
+    <div v-if="open" class="avatar-menu">
+      <div class="menu-user">{{ auth.user?.username }}</div>
+      <button type="button" class="menu-item" @click="goEdit">{{ t('profile.edit') }}</button>
+      <button type="button" class="menu-item danger" @click="logout">{{ t('auth.logout') }}</button>
+    </div>
+
+    <div v-if="open" class="backdrop" @click="close" />
+  </div>
+</template>
+
+<style scoped>
+.avatar-wrap {
+  position: relative;
+  z-index: 130;
+}
+
+.avatar-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid var(--border-gold-soft);
+  background: linear-gradient(145deg, #2a2210, #141008);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.avatar-letter {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.avatar-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 168px;
+  padding: 8px 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: #141414;
+  box-shadow: var(--shadow);
+  z-index: 140;
+}
+
+.menu-user {
+  padding: 8px 14px 10px;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+
+.menu-item {
+  width: 100%;
+  text-align: left;
+  padding: 10px 14px;
+  background: none;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.menu-item:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.menu-item.danger {
+  color: var(--danger);
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+}
+</style>
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { groupCorrectScoreSelections, type CsSelection } from '../../utils/correctScoreLayout';
+
+const props = defineProps<{
+  marketType: string;
+  homeTeamName: string;
+  awayTeamName: string;
+  selections: Array<{
+    id: string;
+    selectionCode: string;
+    selectionName: string;
+    odds: string;
+    oddsVersion: string;
+  }>;
+  stakes: Record<string, number>;
+}>();
+
+const emit = defineEmits<{
+  'update:stakes': [Record<string, number>];
+}>();
+
+const { t } = useI18n();
+
+const columns = computed(() => groupCorrectScoreSelections(props.selections, props.marketType));
+
+function setStake(sel: CsSelection, raw: string) {
+  const n = Math.max(0, Number(raw) || 0);
+  emit('update:stakes', { ...props.stakes, [sel.id]: n });
+}
+
+function formatOdds(odds: string) {
+  const n = parseFloat(odds);
+  return Number.isFinite(n) ? n.toFixed(2) : odds;
+}
+</script>
+
+<template>
+  <div class="cs-panel">
+    <div class="teams-bar">
+      <div class="team-box">{{ homeTeamName }}</div>
+      <div class="team-box">{{ awayTeamName }}</div>
+    </div>
+
+    <div class="cols-head">
+      <span>{{ t('bet.col_home') }}</span>
+      <span>{{ t('bet.col_draw') }}</span>
+      <span>{{ t('bet.col_away') }}</span>
+    </div>
+
+    <div class="cols-grid">
+      <div v-for="colKey in ['home', 'draw', 'away'] as const" :key="colKey" class="col">
+        <div
+          v-for="sel in columns[colKey]"
+          :key="sel.id"
+          class="score-card"
+        >
+          <div class="score-line">{{ sel.scoreDisplay }}</div>
+          <div class="odds-box">{{ formatOdds(sel.odds) }}</div>
+          <input
+            type="number"
+            class="stake-input"
+            min="0"
+            step="1"
+            inputmode="decimal"
+            :value="stakes[sel.id] ?? 0"
+            @input="setStake(sel, ($event.target as HTMLInputElement).value)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cs-panel {
+  padding: 0 10px 14px;
+}
+
+.teams-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.team-box {
+  padding: 10px 8px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--primary-light);
+  background: #0d0d0d;
+  border: 1px solid #333;
+  border-radius: 4px;
+}
+
+.cols-head {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  margin-bottom: 8px;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.cols-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  align-items: start;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.score-card {
+  background: #1c1c1c;
+  border: 1px solid #333;
+  border-radius: 4px;
+  padding: 8px 6px 6px;
+  text-align: center;
+}
+
+.score-line {
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
+.odds-box {
+  display: inline-block;
+  min-width: 52px;
+  padding: 3px 8px;
+  margin-bottom: 6px;
+  border: 1px solid var(--primary);
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.stake-input {
+  width: 100%;
+  padding: 6px 4px;
+  border-radius: 3px;
+  border: none;
+  background: #f2f2f2;
+  color: #111;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: center;
+  -moz-appearance: textfield;
+}
+
+.stake-input::-webkit-outer-spin-button,
+.stake-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
--- a/apps/player/src/components/match-detail/FeaturedMarketRow.vue
+++ b/apps/player/src/components/match-detail/FeaturedMarketRow.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+  label: string;
+  expanded: boolean;
+  hasMarket: boolean;
+  rewardActive?: boolean;
+}>();
+
+const emit = defineEmits<{
+  bet: [];
+  expand: [];
+  collapse: [];
+}>();
+
+const { t } = useI18n();
+
+function onBet() {
+  if (!props.hasMarket) return;
+  emit('bet');
+}
+
+function onExpand() {
+  if (!props.hasMarket) return;
+  emit('expand');
+}
+
+function onCollapse() {
+  emit('collapse');
+}
+</script>
+
+<template>
+  <div class="featured-wrap" :class="{ expanded, disabled: !hasMarket }">
+    <div class="featured-row">
+      <div class="featured-main">
+        <span class="market-name">{{ label }}</span>
+        <span v-if="rewardActive && hasMarket" class="reward-badge">
+          🏆 {{ t('bet.reward_active') }}
+        </span>
+        <span v-else-if="!hasMarket" class="closed-tag">{{ t('bet.market_closed') }}</span>
+      </div>
+      <div class="featured-actions">
+        <button type="button" class="btn-bet btn-gold-outline" :disabled="!hasMarket" @click="onBet">
+          {{ t('bet.place_bet_short') }}
+        </button>
+        <button
+          type="button"
+          class="btn-icon btn-gold-outline"
+          :disabled="!hasMarket"
+          :aria-label="expanded ? t('bet.collapse_market') : t('bet.expand_market')"
+          @click="expanded ? onCollapse() : onExpand()"
+        >
+          {{ expanded ? '−' : '+' }}
+        </button>
+        <button
+          type="button"
+          class="btn-icon btn-gold-outline"
+          :aria-label="t('bet.collapse_market')"
+          @click="onCollapse"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+    <div v-if="expanded && hasMarket" class="panel-slot">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.featured-wrap {
+  margin-bottom: 10px;
+  border-radius: 6px;
+  border: 1px solid #3a3218;
+  background: #121212;
+  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
+}
+
+.featured-wrap.expanded {
+  box-shadow:
+    0 0 0 1px rgba(212, 175, 55, 0.35),
+    0 0 12px rgba(212, 175, 55, 0.15);
+}
+
+.featured-wrap.disabled {
+  opacity: 0.55;
+}
+
+.featured-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 10px;
+}
+
+.featured-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.market-name {
+  display: block;
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--primary-light);
+  margin-bottom: 4px;
+}
+
+.reward-badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  color: #e8c84a;
+  background: rgba(212, 175, 55, 0.12);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.closed-tag {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.featured-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.btn-bet {
+  padding: 8px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.btn-bet:disabled {
+  opacity: 0.45;
+}
+
+.btn-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  font-size: 18px;
+  font-weight: 900;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-icon:disabled {
+  opacity: 0.45;
+}
+</style>
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+defineProps<{
+  selections: {
+    id: string;
+    selectionName: string;
+    odds: string;
+  }[];
+  isSelected: (id: string) => boolean;
+}>();
+
+const emit = defineEmits<{ pick: [id: string] }>();
+</script>
+
+<template>
+  <div class="panel">
+    <button
+      v-for="sel in selections"
+      :key="sel.id"
+      type="button"
+      class="odds-btn"
+      :class="{ selected: isSelected(sel.id) }"
+      @click="emit('pick', sel.id)"
+    >
+      <span class="label">{{ sel.selectionName }}</span>
+      <span class="odds">{{ sel.odds }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0 10px 12px;
+}
+
+.odds-btn {
+  min-width: calc(33.33% - 6px);
+  flex: 1 1 calc(33.33% - 6px);
+  max-width: calc(50% - 4px);
+  padding: 10px 8px;
+  border-radius: 6px;
+  background: #0d0d0d;
+  border: 1px solid #333;
+  text-align: center;
+}
+
+.odds-btn.selected {
+  border-color: var(--primary);
+  background: rgba(212, 175, 55, 0.12);
+}
+
+.label {
+  display: block;
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+
+.odds {
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+</style>
--- a/apps/player/src/components/match-detail/MarketTypeTile.vue
+++ b/apps/player/src/components/match-detail/MarketTypeTile.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+defineProps<{
+  label: string;
+  active: boolean;
+  hasMarket: boolean;
+}>();
+
+const emit = defineEmits<{ expand: []; collapse: [] }>();
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="tile" :class="{ active, disabled: !hasMarket }">
+    <span class="tile-label">{{ label }}</span>
+    <div class="tile-actions">
+      <button
+        type="button"
+        class="btn-icon btn-gold-outline"
+        :disabled="!hasMarket"
+        :aria-label="t('bet.expand_market')"
+        @click="emit('expand')"
+      >
+        +
+      </button>
+      <button
+        type="button"
+        class="btn-icon btn-gold-outline"
+        :aria-label="t('bet.collapse_market')"
+        @click="emit('collapse')"
+      >
+        ×
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tile {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 12px 10px;
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  border-radius: 6px;
+  min-height: 48px;
+}
+
+.tile.active {
+  border-color: var(--primary);
+  box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
+}
+
+.tile.disabled {
+  opacity: 0.5;
+}
+
+.tile-label {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.25;
+  flex: 1;
+  min-width: 0;
+}
+
+.tile-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.btn-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 5px;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 1;
+}
+</style>
--- a/apps/player/src/components/outright/OutrightBetModal.vue
+++ b/apps/player/src/components/outright/OutrightBetModal.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../../api';
+import { formatMoney, parseAmount } from '../../utils/localeDisplay';
+
+export interface OutrightPick {
+  selectionId: string;
+  oddsVersion: string;
+  teamCode: string;
+  teamName: string;
+  odds: string;
+  eventTitle: string;
+}
+
+const props = defineProps<{
+  open: boolean;
+  pick: OutrightPick | null;
+}>();
+
+const emit = defineEmits<{ close: [] }>();
+
+const { t, locale } = useI18n();
+
+const step = ref<'form' | 'success'>('form');
+const stake = ref(1);
+const loading = ref(false);
+const error = ref('');
+const balance = ref(0);
+const successBalance = ref(0);
+const successStake = ref(0);
+
+const balanceText = computed(() => formatMoney(balance.value, locale.value));
+
+watch(
+  () => props.open,
+  async (v) => {
+    if (!v) return;
+    step.value = 'form';
+    stake.value = 1;
+    error.value = '';
+    try {
+      const { data } = await api.get('/player/profile');
+      balance.value = parseAmount(data.data?.wallet?.availableBalance);
+    } catch {
+      balance.value = 0;
+    }
+  },
+);
+
+function close() {
+  emit('close');
+}
+
+function genRequestId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+async function submit() {
+  if (!props.pick || stake.value <= 0) return;
+  loading.value = true;
+  error.value = '';
+  try {
+    await api.post('/player/bets/single', {
+      selectionId: props.pick.selectionId,
+      oddsVersion: props.pick.oddsVersion,
+      stake: stake.value,
+      requestId: genRequestId(),
+    });
+    successStake.value = stake.value;
+    successBalance.value = balance.value - stake.value;
+    balance.value = successBalance.value;
+    step.value = 'success';
+  } catch (e: unknown) {
+    error.value =
+      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
+      t('bet.outright_bet_failed');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function formatOdds(odds: string) {
+  const n = parseFloat(odds);
+  return Number.isFinite(n) ? n.toFixed(2) : odds;
+}
+</script>
+
+<template>
+  <div v-if="open && pick" class="overlay" @click.self="close">
+    <div class="modal">
+      <template v-if="step === 'form'">
+        <h3 class="title">{{ t('bet.outright_enter_stake') }}</h3>
+        <p class="team">{{ pick.teamName }}</p>
+        <span class="odds-badge">{{ formatOdds(pick.odds) }}</span>
+        <p class="balance-line">{{ t('bet.outright_balance') }}：{{ balanceText }}</p>
+        <p class="event-title">{{ pick.eventTitle }}</p>
+        <input
+          v-model.number="stake"
+          type="number"
+          class="stake-input"
+          min="0.01"
+          step="0.01"
+          inputmode="decimal"
+        />
+        <p v-if="error" class="error">{{ error }}</p>
+        <div class="actions">
+          <button type="button" class="btn-confirm" :disabled="loading" @click="submit">
+            {{ t('bet.place_bet_short') }}
+          </button>
+          <button type="button" class="btn-cancel" :disabled="loading" @click="close">
+            {{ t('bet.cancel') }}
+          </button>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="success-icon">✓</div>
+        <h3 class="title success-title">{{ t('bet.outright_success') }}</h3>
+        <p class="team">{{ pick.teamName }}</p>
+        <span class="odds-badge">{{ formatOdds(pick.odds) }}</span>
+        <p class="balance-line">
+          {{ t('bet.outright_stake_amount') }} : {{ successStake.toFixed(2) }}
+        </p>
+        <p class="balance-line">
+          {{ t('bet.outright_balance') }} : {{ formatMoney(successBalance, locale) }}
+        </p>
+        <p class="event-title">{{ pick.eventTitle }}</p>
+        <button type="button" class="btn-share" disabled>Share</button>
+        <button type="button" class="btn-done" @click="close">{{ t('bet.outright_done') }}</button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.modal {
+  width: 100%;
+  max-width: 320px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  padding: 20px 18px 16px;
+  text-align: center;
+  color: #333;
+}
+
+.title {
+  font-size: 15px;
+  font-weight: 800;
+  color: #b8942b;
+  margin-bottom: 10px;
+}
+
+.success-title {
+  margin-top: 8px;
+}
+
+.team {
+  font-size: 22px;
+  font-weight: 900;
+  color: #c9a227;
+  margin-bottom: 8px;
+}
+
+.odds-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  background: #c62828;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+  border-radius: 3px;
+  margin-bottom: 12px;
+}
+
+.balance-line {
+  font-size: 13px;
+  color: #444;
+  margin-bottom: 6px;
+}
+
+.event-title {
+  font-size: 12px;
+  color: #666;
+  margin: 8px 0 14px;
+  line-height: 1.35;
+}
+
+.stake-input {
+  width: 100%;
+  padding: 10px;
+  border: 2px solid #5b9bd5;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 12px;
+  color: #111;
+}
+
+.error {
+  color: #c62828;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.btn-confirm {
+  padding: 10px;
+  border-radius: 4px;
+  background: #2e9e5e;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.btn-cancel {
+  padding: 10px;
+  border-radius: 4px;
+  background: #555;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.success-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 4px;
+  border-radius: 50%;
+  border: 3px solid #2e9e5e;
+  color: #2e9e5e;
+  font-size: 28px;
+  font-weight: 900;
+  line-height: 42px;
+}
+
+.btn-share {
+  width: 100%;
+  margin: 12px 0 8px;
+  padding: 10px;
+  border-radius: 20px;
+  background: #1877f2;
+  color: #fff;
+  font-weight: 700;
+  opacity: 0.5;
+}
+
+.btn-done {
+  width: 100%;
+  padding: 12px;
+  border-radius: 4px;
+  background: #1aa89a;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 800;
+}
+</style>
--- a/apps/player/src/components/outright/OutrightOptionCard.vue
+++ b/apps/player/src/components/outright/OutrightOptionCard.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { teamFlagUrl } from '../../utils/teamFlag';
+
+const props = defineProps<{
+  teamCode: string;
+  teamName: string;
+  odds: string;
+}>();
+
+const emit = defineEmits<{ pick: [] }>();
+
+const flag = computed(() => teamFlagUrl(props.teamCode, props.teamName));
+
+function formatOdds(odds: string) {
+  const n = parseFloat(odds);
+  return Number.isFinite(n) ? n.toFixed(2) : odds;
+}
+</script>
+
+<template>
+  <button type="button" class="option-card" @click="emit('pick')">
+    <img v-if="flag" :src="flag" alt="" class="flag" />
+    <span class="name">{{ teamName }}</span>
+    <span class="odds">[ {{ formatOdds(odds) }} ]</span>
+  </button>
+</template>
+
+<style scoped>
+.option-card {
+  width: 100%;
+  min-width: 0;
+  padding: 8px 4px 6px;
+  border-radius: 6px;
+  background: #1c1c1c;
+  border: 1px solid #333;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+
+.option-card:active {
+  background: #252525;
+  border-color: var(--border-gold-soft);
+}
+
+.flag {
+  width: 28px;
+  height: 19px;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+.name {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.2;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.odds {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+</style>
--- a/apps/player/src/components/outright/OutrightPanel.vue
+++ b/apps/player/src/components/outright/OutrightPanel.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../../api';
+import OutrightOptionCard from './OutrightOptionCard.vue';
+import OutrightBetModal, { type OutrightPick } from './OutrightBetModal.vue';
+import emptyMatchesImg from '../../assets/images/empty-matches.svg';
+import saishiImg from '../../assets/images/saishi.png';
+
+interface OutrightSelection {
+  id: string;
+  teamCode: string;
+  teamName: string;
+  odds: string;
+  oddsVersion: string;
+}
+
+interface OutrightEvent {
+  id: string;
+  leagueId: string;
+  leagueName: string;
+  title: string;
+  selections: OutrightSelection[];
+}
+
+const { t } = useI18n();
+
+const loading = ref(true);
+const events = ref<OutrightEvent[]>([]);
+const expanded = ref<Set<string>>(new Set());
+const modalOpen = ref(false);
+const activePick = ref<OutrightPick | null>(null);
+
+async function load() {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/outrights');
+    events.value = data.data ?? [];
+    if (events.value.length && expanded.value.size === 0) {
+      expanded.value = new Set([events.value[0].id]);
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+function toggle(id: string) {
+  const next = new Set(expanded.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  expanded.value = next;
+}
+
+function openBet(event: OutrightEvent, sel: OutrightSelection) {
+  activePick.value = {
+    selectionId: sel.id,
+    oddsVersion: sel.oddsVersion,
+    teamCode: sel.teamCode,
+    teamName: sel.teamName,
+    odds: sel.odds,
+    eventTitle: event.title,
+  };
+  modalOpen.value = true;
+}
+
+function closeModal() {
+  modalOpen.value = false;
+  activePick.value = null;
+}
+</script>
+
+<template>
+  <div class="outright-panel">
+    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
+
+    <div v-else-if="events.length" class="event-list">
+      <section v-for="event in events" :key="event.id" class="event-block">
+        <button type="button" class="event-head" @click="toggle(event.id)">
+          <span class="toggle-icon">
+            <span class="toggle-mark">{{ expanded.has(event.id) ? '−' : '+' }}</span>
+          </span>
+          <span class="event-title">{{ event.title }}</span>
+          <img :src="saishiImg" alt="" class="event-saishi" />
+        </button>
+
+        <div v-if="expanded.has(event.id)" class="options-grid">
+          <OutrightOptionCard
+            v-for="sel in event.selections"
+            :key="sel.id"
+            :team-code="sel.teamCode"
+            :team-name="sel.teamName"
+            :odds="sel.odds"
+            @pick="openBet(event, sel)"
+          />
+        </div>
+      </section>
+    </div>
+
+    <div v-else class="empty">
+      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+      <p>{{ t('bet.no_outright') }}</p>
+    </div>
+
+    <OutrightBetModal :open="modalOpen" :pick="activePick" @close="closeModal" />
+  </div>
+</template>
+
+<style scoped>
+.outright-panel {
+  padding: 4px 12px 0;
+}
+
+.event-block {
+  margin-bottom: 10px;
+}
+
+.event-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 10px;
+  background: #141414;
+  border: 1px solid #2e2e2e;
+  border-radius: 6px;
+  text-align: left;
+}
+
+.toggle-icon {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: #141414;
+  border: 1px solid var(--border-gold-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toggle-mark {
+  color: var(--primary-light);
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.event-title {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.35;
+}
+
+.event-saishi {
+  flex-shrink: 0;
+  height: 44px;
+  width: auto;
+  max-width: 40px;
+  object-fit: contain;
+  padding-left: 8px;
+  border-left: 1px solid #2a2a2a;
+}
+
+.options-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 6px;
+  padding: 10px 0 4px;
+}
+
+.state,
+.empty {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 48px 20px;
+  font-weight: 600;
+}
+
+.empty-icon {
+  width: 96px;
+  height: 96px;
+  margin-bottom: 14px;
+}
+</style>
--- a/apps/player/src/components/parlay/ParlayPanel.vue
+++ b/apps/player/src/components/parlay/ParlayPanel.vue
@@ -0,0 +1,403 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../../api';
+import { useBetSlipStore } from '../../stores/betSlip';
+import { PARLAY_MARKET_TYPES, SELECTION_SHORT } from '../../utils/parlayColumns';
+
+type TimeFilter = 'all' | 'today';
+
+interface Selection {
+  id: string;
+  selectionCode: string;
+  selectionName: string;
+  odds: string;
+  oddsVersion: string;
+}
+
+interface Market {
+  id: string;
+  marketType: string;
+  selections: Selection[];
+}
+
+interface ParlayMatch {
+  id: string;
+  leagueName: string;
+  homeTeamName: string;
+  awayTeamName: string;
+  startTime: string;
+  markets: Market[];
+}
+
+const { t, locale } = useI18n();
+const slip = useBetSlipStore();
+
+const loading = ref(true);
+const matches = ref<ParlayMatch[]>([]);
+const timeFilter = ref<TimeFilter>('all');
+
+const parlayMarketKeys = PARLAY_MARKET_TYPES.map((c) => c.key);
+
+onMounted(async () => {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/matches');
+    matches.value = (data.data ?? []).filter(
+      (m: ParlayMatch) => m.markets?.length && hasParlayMarkets(m),
+    );
+  } finally {
+    loading.value = false;
+  }
+});
+
+function hasParlayMarkets(m: ParlayMatch) {
+  return parlayMarketKeys.some((key) => {
+    const market = m.markets?.find((mk) => mk.marketType === key);
+    return market && market.selections.length > 0;
+  });
+}
+
+function getMarket(m: ParlayMatch, marketType: string) {
+  return m.markets?.find((mk) => mk.marketType === marketType);
+}
+
+function dayStart(d: Date) {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+
+function isKickoffToday(startTime: string) {
+  const kick = new Date(startTime);
+  const now = new Date();
+  const start = dayStart(now);
+  const end = new Date(start);
+  end.setDate(end.getDate() + 1);
+  return kick >= start && kick < end;
+}
+
+const filteredMatches = computed(() => {
+  if (timeFilter.value === 'all') return matches.value;
+  return matches.value.filter((m) => isKickoffToday(m.startTime));
+});
+
+function formatKickoff(startTime: string) {
+  return new Date(startTime).toLocaleString(locale.value, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}
+
+function formatOdds(odds: string) {
+  const n = parseFloat(odds);
+  return Number.isFinite(n) ? n.toFixed(2) : odds;
+}
+
+function selLabel(sel: Selection) {
+  return SELECTION_SHORT[sel.selectionCode] ?? sel.selectionName.slice(0, 2);
+}
+
+function isPicked(selectionId: string) {
+  return slip.items.some((i) => i.selectionId === selectionId);
+}
+
+function pickSelection(match: ParlayMatch, market: Market, sel: Selection) {
+  slip.addParlayLeg({
+    selectionId: sel.id,
+    oddsVersion: String(sel.oddsVersion),
+    matchId: match.id,
+    matchName: `${match.homeTeamName} vs ${match.awayTeamName}`,
+    selectionName: `${selLabel(sel)} ${formatOdds(sel.odds)}`,
+    odds: parseFloat(sel.odds),
+    marketType: market.marketType,
+  });
+}
+
+function openSlip() {
+  slip.openDrawer();
+}
+</script>
+
+<template>
+  <div class="parlay-panel">
+    <header class="panel-head">
+      <div class="head-title">
+        <span class="layers-icon" aria-hidden="true" />
+        <h2>{{ t('bet.parlay_title') }}</h2>
+      </div>
+      <p class="head-desc">{{ t('bet.parlay_desc') }}</p>
+      <button type="button" class="slip-link btn-gold-outline" @click="openSlip">
+        {{ t('bet.bet_slip') }}
+        <span v-if="slip.count" class="slip-count">({{ slip.count }})</span>
+      </button>
+    </header>
+
+    <div class="toolbar">
+      <select v-model="timeFilter" class="filter-select">
+        <option value="all">{{ t('bet.parlay_filter_all') }}</option>
+        <option value="today">{{ t('bet.tab_today') }}</option>
+      </select>
+      <div class="col-headers">
+        <span v-for="col in PARLAY_MARKET_TYPES" :key="col.key" class="col-head">{{ col.label }}</span>
+      </div>
+    </div>
+
+    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
+
+    <div v-else-if="filteredMatches.length" class="table-wrap">
+      <div v-for="match in filteredMatches" :key="match.id" class="match-row">
+        <div class="match-info">
+          <div class="league">{{ match.leagueName }}</div>
+          <div class="teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
+          <div class="time">{{ formatKickoff(match.startTime) }}</div>
+        </div>
+        <div class="odds-cells">
+          <div
+            v-for="col in PARLAY_MARKET_TYPES"
+            :key="col.key"
+            class="market-cell"
+          >
+            <template v-if="getMarket(match, col.key)?.selections.length">
+              <button
+                v-for="sel in getMarket(match, col.key)!.selections"
+                :key="sel.id"
+                type="button"
+                class="odd-btn"
+                :class="{ picked: isPicked(sel.id) }"
+                @click="pickSelection(match, getMarket(match, col.key)!, sel)"
+              >
+                <span class="odd-label">{{ selLabel(sel) }}</span>
+                <span class="odd-val">{{ formatOdds(sel.odds) }}</span>
+              </button>
+            </template>
+            <span v-else class="market-empty">—</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="empty">
+      <span class="empty-icon" aria-hidden="true">📅</span>
+      <p>{{ t('bet.parlay_empty') }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.parlay-panel {
+  padding: 0 12px 16px;
+}
+
+.panel-head {
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  padding: 14px 12px;
+  margin-bottom: 12px;
+}
+
+.head-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.layers-icon {
+  width: 26px;
+  height: 20px;
+  flex-shrink: 0;
+  background:
+    linear-gradient(#2e9e5e, #2e9e5e) 0 0 / 100% 4px no-repeat,
+    linear-gradient(#2e9e5e, #2e9e5e) 0 8px / 85% 4px no-repeat,
+    linear-gradient(#2e9e5e, #2e9e5e) 0 16px / 70% 4px no-repeat;
+  border-radius: 2px;
+}
+
+.head-title h2 {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--text);
+}
+
+.head-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.45;
+  margin-bottom: 10px;
+}
+
+.slip-link {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.slip-count {
+  margin-left: 4px;
+  color: var(--primary-light);
+}
+
+.toolbar {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  margin-bottom: 8px;
+  overflow-x: auto;
+}
+
+.filter-select {
+  flex-shrink: 0;
+  min-width: 72px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: #141414;
+  border: 1px solid var(--border-gold-soft);
+  color: var(--primary-light);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.col-headers {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(52px, 1fr));
+  gap: 4px;
+  flex: 1;
+  min-width: 360px;
+  align-items: center;
+}
+
+.col-head {
+  font-size: 9px;
+  font-weight: 800;
+  color: var(--text-muted);
+  text-align: center;
+  letter-spacing: 0.02em;
+}
+
+.table-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.match-row {
+  display: flex;
+  gap: 8px;
+  padding: 10px 8px;
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+.match-info {
+  flex-shrink: 0;
+  width: 88px;
+  min-width: 88px;
+}
+
+.league {
+  font-size: 9px;
+  color: var(--text-muted);
+  margin-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.teams {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.25;
+  margin-bottom: 4px;
+}
+
+.time {
+  font-size: 9px;
+  color: var(--text-muted);
+}
+
+.odds-cells {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(52px, 1fr));
+  gap: 4px;
+  flex: 1;
+  min-width: 360px;
+  align-items: stretch;
+}
+
+.market-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-height: 36px;
+}
+
+.odd-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  padding: 4px 2px;
+  border-radius: 4px;
+  background: #0d0d0d;
+  border: 1px solid #333;
+  min-height: 32px;
+  width: 100%;
+}
+
+.odd-btn.picked {
+  border-color: var(--primary);
+  background: rgba(212, 175, 55, 0.15);
+}
+
+.odd-label {
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+.odd-val {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.1;
+}
+
+.market-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #444;
+  font-size: 12px;
+  min-height: 32px;
+}
+
+.state,
+.empty {
+  text-align: center;
+  padding: 48px 16px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.empty-icon {
+  display: block;
+  font-size: 40px;
+  margin-bottom: 12px;
+  opacity: 0.45;
+}
+
+.empty p {
+  font-size: 13px;
+}
+</style>
--- a/apps/player/src/composables/useAnnouncements.ts
+++ b/apps/player/src/composables/useAnnouncements.ts
@@ -0,0 +1,35 @@
+import { ref } from 'vue';
+import api from '../api';
+import { resolveAnnouncements } from '../constants/defaultAnnouncement';
+
+function collectAnnouncementLines(data: {
+  ticker?: Array<{ translation?: { title?: string; body?: string } }>;
+  notices?: Array<{ translation?: { title?: string; body?: string } }>;
+} | null): string[] {
+  const lines: string[] = [];
+  if (!data) return lines;
+  for (const item of data.ticker ?? []) {
+    const text = item.translation?.body || item.translation?.title;
+    if (text) lines.push(text);
+  }
+  for (const item of data.notices ?? []) {
+    const text = item.translation?.title || item.translation?.body;
+    if (text) lines.push(text);
+  }
+  return lines;
+}
+
+export function useAnnouncements() {
+  const items = ref<string[]>(resolveAnnouncements([]));
+
+  async function load() {
+    try {
+      const { data } = await api.get('/player/home');
+      items.value = resolveAnnouncements(collectAnnouncementLines(data.data));
+    } catch {
+      items.value = resolveAnnouncements([]);
+    }
+  }
+
+  return { items, load };
+}
--- a/apps/player/src/constants/defaultAnnouncement.ts
+++ b/apps/player/src/constants/defaultAnnouncement.ts
@@ -0,0 +1,8 @@
+export const DEFAULT_ANNOUNCEMENTS = [
+  '欢迎光临 TheBet365 · 足球赛事火热进行中 · 理性投注，量力而行',
+];
+
+export function resolveAnnouncements(items: string[]): string[] {
+  const list = items.map((s) => s.trim()).filter(Boolean);
+  return list.length ? list : DEFAULT_ANNOUNCEMENTS;
+}
--- a/apps/player/src/constants/defaultBanner.ts
+++ b/apps/player/src/constants/defaultBanner.ts
@@ -0,0 +1,41 @@
+import type { BannerItem } from '../components/BannerCarousel.vue';
+
+/** 默认轮播首图：apps/player/src/assets/images/banner.png */
+import defaultBannerImg from '../assets/images/banner.png';
+
+const FALLBACK_BANNER_URL = '/uploads/banners/welcome.svg';
+
+export const DEFAULT_BANNER: BannerItem = {
+  id: 'default',
+  linkType: 'ROUTE',
+  linkTarget: '/bet',
+  translation: {
+    title: '',
+    imageUrl: defaultBannerImg,
+  },
+};
+
+function pickImageUrl(url?: string | null): string {
+  if (!url) return defaultBannerImg;
+  return url;
+}
+
+export function resolveBanners(banners: BannerItem[] | undefined | null): BannerItem[] {
+  const fromApi = (banners ?? []).map((banner) => ({
+    ...banner,
+    translation: {
+      ...banner.translation,
+      imageUrl: pickImageUrl(banner.translation?.imageUrl),
+    },
+  }));
+
+  const defaultSlide: BannerItem = {
+    ...DEFAULT_BANNER,
+    translation: {
+      ...DEFAULT_BANNER.translation,
+      imageUrl: defaultBannerImg || FALLBACK_BANNER_URL,
+    },
+  };
+
+  return [defaultSlide, ...fromApi];
+}
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -4,13 +4,19 @@ import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth';
 import { useBetSlipStore } from '../stores/betSlip';
 import BetSlipDrawer from '../components/BetSlipDrawer.vue';
-import { ref } from 'vue';
+import CashBalanceChip from '../components/CashBalanceChip.vue';
+import UserAvatarMenu from '../components/UserAvatarMenu.vue';
+import LocaleFlag from '../components/LocaleFlag.vue';
+import AnnouncementMarquee from '../components/AnnouncementMarquee.vue';
+import BottomNavIcon from '../components/BottomNavIcon.vue';
+import { computed, onMounted } from 'vue';
+import { getLocaleDisplay } from '../utils/localeDisplay';
+import { useAnnouncements } from '../composables/useAnnouncements';

 const { t, locale } = useI18n();
 const auth = useAuthStore();
-const slip = useBetSlipStore();
 const route = useRoute();
-const showSlip = ref(false);
+const slip = useBetSlipStore();

 const locales = [
  { code: 'zh-CN', label: '中文' },
@@ -18,6 +24,11 @@ const locales = [
  { code: 'ms-MY', label: 'BM' },
 ];

+const showAnnouncement = computed(() => !route.path.startsWith('/profile'));
+const { items: announcements, load: loadAnnouncements } = useAnnouncements();
+
+onMounted(loadAnnouncements);
+
 function setLocale(code: string) {
  locale.value = code;
  localStorage.setItem('locale', code);
@@ -29,56 +40,164 @@ function setLocale(code: string) {
    <header class="header">
      <img src="/logo.png" alt="TheBet365" class="logo" />
      <div class="header-actions">
-        <select :value="locale" @change="setLocale(($event.target as HTMLSelectElement).value)" class="lang-select">
-          <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.label }}</option>
-        </select>
-        <span class="balance">{{ auth.user?.username }}</span>
+        <div class="lang-select-wrap">
+          <LocaleFlag :locale="locale" :size="18" />
+          <select :value="locale" @change="setLocale(($event.target as HTMLSelectElement).value)" class="lang-select">
+            <option v-for="l in locales" :key="l.code" :value="l.code">
+              {{ getLocaleDisplay(l.code).label }}
+            </option>
+          </select>
+        </div>
+        <CashBalanceChip v-if="auth.user" />
+        <UserAvatarMenu v-if="auth.user" />
      </div>
    </header>

+    <div v-if="showAnnouncement" class="announce-strip">
+      <AnnouncementMarquee :items="announcements" embedded />
+    </div>
+
    <main class="main">
      <RouterView />
    </main>

-    <nav class="bottom-nav">
-      <RouterLink to="/" :class="{ active: route.path === '/' }">{{ t('nav.home') }}</RouterLink>
-      <RouterLink to="/football" :class="{ active: route.path.startsWith('/football') || route.path.startsWith('/match') }">{{ t('nav.football') }}</RouterLink>
-      <button class="slip-btn" @click="showSlip = true">
-        {{ t('bet.bet_slip') }}
-        <span v-if="slip.count" class="badge">{{ slip.count }}</span>
-      </button>
-      <RouterLink to="/bets" :class="{ active: route.path === '/bets' }">{{ t('nav.my_bets') }}</RouterLink>
-      <RouterLink to="/profile" :class="{ active: route.path === '/profile' }">{{ t('nav.profile') }}</RouterLink>
+    <nav class="bottom-nav" aria-label="Main">
+      <RouterLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
+        <BottomNavIcon name="home" />
+        <span class="nav-label">{{ t('nav.home') }}</span>
+      </RouterLink>
+      <RouterLink
+        to="/bet"
+        class="nav-item"
+        :class="{ active: route.path === '/bet' || route.path.startsWith('/match') }"
+      >
+        <BottomNavIcon name="bet" />
+        <span class="nav-label">{{ t('nav.bet') }}</span>
+      </RouterLink>
+      <RouterLink to="/bets" class="nav-item" :class="{ active: route.path === '/bets' }">
+        <BottomNavIcon name="history" />
+        <span class="nav-label">{{ t('nav.bet_history') }}</span>
+      </RouterLink>
+      <RouterLink to="/wallet" class="nav-item" :class="{ active: route.path === '/wallet' }">
+        <BottomNavIcon name="wallet" />
+        <span class="nav-label">{{ t('nav.wallet') }}</span>
+      </RouterLink>
+      <RouterLink to="/profile" class="nav-item" :class="{ active: route.path.startsWith('/profile') }">
+        <BottomNavIcon name="profile" />
+        <span class="nav-label">{{ t('nav.profile') }}</span>
+      </RouterLink>
    </nav>

-    <BetSlipDrawer v-model="showSlip" />
+    <BetSlipDrawer v-model="slip.drawerOpen" />
  </div>
 </template>

 <style scoped>
-.layout { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 60px; }
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100dvh;
+  overflow: hidden;
+  background: var(--bg-body);
+}
 .header {
+  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center;
-  padding: 12px 16px; background: #1a2332; border-bottom: 1px solid var(--border);
+  padding: 8px 12px;
+  background: linear-gradient(180deg, #222 0%, #1A1A1A 100%);
+  border-bottom: 1px solid var(--border);
+  z-index: 110;
+}
+.logo {
+  height: 36px; width: auto; display: block;
+  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.2));
+}
+.header-actions { display: flex; gap: 6px; align-items: center; }
+.lang-select-wrap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 6px 3px 5px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #0d0d0d;
+}
+.lang-select {
+  background: transparent;
+  color: var(--primary-light);
+  border: none;
+  padding: 2px 2px 2px 0;
+  width: auto;
+  font-size: 11px;
+  font-weight: 700;
+  outline: none;
+}
+.announce-strip {
+  flex-shrink: 0;
+  z-index: 105;
+  border-bottom: 1px solid var(--border);
+}
+
+.main {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 12px 16px 16px;
 }
-.logo { height: 48px; width: auto; display: block; }
-.header-actions { display: flex; gap: 12px; align-items: center; }
-.lang-select { background: var(--bg-card); color: #fff; border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; width: auto; }
-.balance { font-size: 13px; color: var(--text-muted); }
-.main { flex: 1; padding: 12px; }
 .bottom-nav {
-  position: fixed; bottom: 0; left: 0; right: 0;
-  display: flex; background: #1a2332; border-top: 1px solid var(--border);
+  display: flex;
+  background: linear-gradient(0deg, #111 0%, #1A1A1A 100%);
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
  z-index: 100;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
-.bottom-nav a, .slip-btn {
-  flex: 1; text-align: center; padding: 10px 4px; font-size: 11px;
-  color: var(--text-muted); background: none; position: relative;
+.nav-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 6px 2px 8px;
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  position: relative;
+  transition: color 0.2s;
+  line-height: 1.2;
+  min-width: 0;
 }
-.bottom-nav a.active, .slip-btn.active { color: var(--primary); }
-.badge {
-  position: absolute; top: 2px; right: 20%;
-  background: var(--danger); color: #fff; font-size: 10px;
-  padding: 1px 5px; border-radius: 10px;
+
+.nav-label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 2px;
+}
+
+.nav-item.active {
+  color: var(--primary-light);
+  font-weight: 800;
+}
+
+.nav-item.active :deep(.nav-icon) {
+  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
+}
+
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 22%;
+  right: 22%;
+  height: 2px;
+  background: var(--primary);
+  border-radius: 0 0 4px 4px;
 }
 </style>
--- a/apps/player/src/main.ts
+++ b/apps/player/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { createI18n } from 'vue-i18n';
 import App from './App.vue';
-import router from './router';
+import router from './router/index.ts';
 import './styles.css';

 const i18n = createI18n({
@@ -11,22 +11,331 @@ const i18n = createI18n({
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': {
-      nav: { home: '首页', football: '足球', my_bets: '我的投注', profile: '我的' },
-      auth: { login: '登录', username: '账号', password: '密码' },
-      wallet: { balance: '余额' },
-      bet: { bet_slip: '投注单', stake: '投注金额', place_bet: '确认下注', parlay: '串关' },
+      nav: { home: '主页', bet: '投注', bet_history: '历史投注', wallet: '账单', profile: '我的' },
+      history: {
+        league_default: '足球',
+        stake: '投注 Stake',
+        return: '回报 Return',
+        est_return: '预计回报 Est. Return',
+        parlay_title: '串关 · {n} 场',
+        parlay_league: '串关 Parlay',
+        empty: '暂无投注记录',
+        status_won: 'WON 赢',
+        status_pending: 'PENDING 待定',
+        status_lost: 'LOST 输',
+        status_push: 'PUSH 走盘',
+      },
+      auth: {
+        login: '登录',
+        logout: '退出登录',
+        username: '账号',
+        password: '密码',
+        captcha_placeholder: 'Captcha',
+        captcha_refresh: '点击换一张',
+        captcha_wrong: '验证码错误',
+      },
+      wallet: {
+        balance: '余额',
+        cash_balance: '现金余额',
+        unsettled: '未结算',
+        available: '可用',
+        no_records: '暂无账单记录',
+      },
+      bet: {
+        bet_slip: '投注单',
+        stake: '投注金额',
+        place_bet: '确认下注',
+        place_bet_short: '下注',
+        parlay: '串关',
+        tab_matches: '球赛',
+        tab_outright: '优胜冠军',
+        tab_parlay: '串关投注',
+        tab_today: '今日',
+        tab_early: '早盘',
+        loading: '加载中…',
+        no_matches: '暂无赛事',
+        outright_coming: '优胜冠军玩法即将上线',
+        outright_enter_stake: '请输入投注金额',
+        outright_balance: '结余',
+        outright_stake_amount: '投注额度',
+        outright_success: '下注成功',
+        outright_done: '完毕',
+        outright_bet_failed: '下注失败',
+        no_outright: '暂无冠军盘口',
+        cancel: '取消',
+        parlay_title: '串关投注',
+        parlay_desc: '选择3-10场比赛来创建串关投注。组合赔率相乘可赢得更多！',
+        parlay_filter_all: '全部',
+        parlay_empty: '暂无可用串关赛事',
+        parlay_same_match: '同一场比赛不能串关',
+        parlay_need_more: '请至少选择 2 项进行串关',
+        back: '返回',
+        refresh: '刷新',
+        download: '下载',
+        reward_active: '奖励生效中!',
+        market_closed: '暂未开盘',
+        expand_market: '展开玩法',
+        collapse_market: '收起玩法',
+        market_cs: '波胆',
+        market_ht_cs: '上半场波胆',
+        market_sh_cs: '下半场波胆',
+        market_ft_handicap: '全场 让球',
+        market_ft_ou: '全场 大小',
+        market_ft_1x2: '全场 独赢盘',
+        market_ft_oe: '全场 单/双',
+        market_ht_handicap: '半场 让球',
+        market_ht_ou: '半场 大小',
+        market_ht_1x2: '半场 独赢盘',
+        col_home: '主场',
+        col_draw: '平',
+        col_away: '客场',
+        cs_stake_required: '请至少在一个比分输入投注金额',
+        cs_place_success: '下注成功',
+        cs_place_failed: '下注失败',
+      },
+      profile: {
+        edit: '修改资料',
+        language: '语言',
+        phone: '手机号',
+        email: '邮箱',
+        phone_placeholder: '请输入手机号',
+        email_placeholder: '请输入邮箱',
+        save: '保存',
+        password_optional_hint: '不修改密码可留空',
+        old_password_placeholder: '留空则不修改',
+        new_password_placeholder: '留空则不修改',
+        confirm_password_placeholder: '留空则不修改',
+        old_password: '当前密码',
+        new_password: '新密码',
+        confirm_password: '确认新密码',
+        back: '返回',
+        saved: '联系方式已保存',
+        save_failed: '保存失败',
+        password_changed: '密码已更新',
+        password_failed: '密码修改失败',
+        password_mismatch: '两次新密码不一致',
+        password_incomplete: '修改密码需填写当前密码、新密码及确认密码',
+      },
    },
    'en-US': {
-      nav: { home: 'Home', football: 'Football', my_bets: 'My Bets', profile: 'Profile' },
-      auth: { login: 'Login', username: 'Username', password: 'Password' },
-      wallet: { balance: 'Balance' },
-      bet: { bet_slip: 'Bet Slip', stake: 'Stake', place_bet: 'Place Bet', parlay: 'Parlay' },
+      nav: { home: 'Home', bet: 'Bet', bet_history: 'History', wallet: 'Wallet', profile: 'Profile' },
+      history: {
+        league_default: 'Football',
+        stake: 'Stake 投注',
+        return: 'Return 回报',
+        est_return: 'Est. Return 预计回报',
+        parlay_title: 'Parlay · {n} legs',
+        parlay_league: 'Parlay 串关',
+        empty: 'No bets yet',
+        status_won: 'WON 赢',
+        status_pending: 'PENDING 待定',
+        status_lost: 'LOST 输',
+        status_push: 'PUSH 走盘',
+      },
+      auth: {
+        login: 'Login',
+        logout: 'Log out',
+        username: 'Username',
+        password: 'Password',
+        captcha_placeholder: 'Captcha',
+        captcha_refresh: 'Click to refresh',
+        captcha_wrong: 'Invalid captcha',
+      },
+      wallet: {
+        balance: 'Balance',
+        cash_balance: 'Cash Balance',
+        unsettled: 'Unsettled',
+        available: 'Available',
+        no_records: 'No records',
+      },
+      bet: {
+        bet_slip: 'Bet Slip',
+        stake: 'Stake',
+        place_bet: 'Place Bet',
+        place_bet_short: 'Bet',
+        parlay: 'Parlay',
+        tab_matches: 'Matches',
+        tab_outright: 'Outright',
+        tab_parlay: 'Parlay',
+        tab_today: 'Today',
+        tab_early: 'Early',
+        loading: 'Loading…',
+        no_matches: 'No matches',
+        outright_coming: 'Outright markets coming soon',
+        outright_enter_stake: 'Enter stake',
+        outright_balance: 'Balance',
+        outright_stake_amount: 'Stake',
+        outright_success: 'Bet placed',
+        outright_done: 'Done',
+        outright_bet_failed: 'Bet failed',
+        no_outright: 'No outright markets',
+        cancel: 'Cancel',
+        parlay_title: 'Parlay',
+        parlay_desc: 'Pick 3-10 matches. Combined odds multiply your potential win!',
+        parlay_filter_all: 'All',
+        parlay_empty: 'No matches available for parlay betting',
+        parlay_same_match: 'Cannot parlay selections from the same match',
+        parlay_need_more: 'Select at least 2 legs for parlay',
+        back: 'Back',
+        refresh: 'Refresh',
+        download: 'Download',
+        reward_active: 'Reward active!',
+        market_closed: 'Not open',
+        expand_market: 'Expand',
+        collapse_market: 'Collapse',
+        market_cs: 'Correct Score',
+        market_ht_cs: '1H Correct Score',
+        market_sh_cs: '2H Correct Score',
+        market_ft_handicap: 'FT Handicap',
+        market_ft_ou: 'FT O/U',
+        market_ft_1x2: 'FT 1X2',
+        market_ft_oe: 'FT Odd/Even',
+        market_ht_handicap: 'HT Handicap',
+        market_ht_ou: 'HT O/U',
+        market_ht_1x2: 'HT 1X2',
+        col_home: 'Home',
+        col_draw: 'Draw',
+        col_away: 'Away',
+        cs_stake_required: 'Enter stake on at least one score',
+        cs_place_success: 'Bet placed',
+        cs_place_failed: 'Bet failed',
+      },
+      profile: {
+        edit: 'Edit Profile',
+        language: 'Language',
+        phone: 'Phone',
+        email: 'Email',
+        phone_placeholder: 'Phone number',
+        email_placeholder: 'Email address',
+        save: 'Save',
+        password_optional_hint: 'Leave password fields blank to keep current password',
+        old_password_placeholder: 'Leave blank to skip',
+        new_password_placeholder: 'Leave blank to skip',
+        confirm_password_placeholder: 'Leave blank to skip',
+        old_password: 'Current password',
+        new_password: 'New password',
+        confirm_password: 'Confirm password',
+        back: 'Back',
+        saved: 'Contact saved',
+        save_failed: 'Save failed',
+        password_changed: 'Password updated',
+        password_failed: 'Password change failed',
+        password_mismatch: 'Passwords do not match',
+        password_incomplete: 'Fill current, new and confirm password to change password',
+      },
    },
    'ms-MY': {
-      nav: { home: 'Laman Utama', football: 'Bola Sepak', my_bets: 'Pertaruhan Saya', profile: 'Profil' },
-      auth: { login: 'Log Masuk', username: 'Nama Pengguna', password: 'Kata Laluan' },
-      wallet: { balance: 'Baki' },
-      bet: { bet_slip: 'Slip Pertaruhan', stake: 'Jumlah', place_bet: 'Letak Pertaruhan', parlay: 'Berganda' },
+      nav: {
+        home: 'Laman Utama',
+        bet: 'Pertaruhan',
+        bet_history: 'Sejarah',
+        wallet: 'Bil',
+        profile: 'Profil',
+      },
+      history: {
+        league_default: 'Bola Sepak',
+        stake: 'Stake 投注',
+        return: 'Return 回报',
+        est_return: 'Est. Return 预计回报',
+        parlay_title: 'Parlay · {n} perlawanan',
+        parlay_league: 'Parlay 串关',
+        empty: 'Tiada rekod pertaruhan',
+        status_won: 'WON 赢',
+        status_pending: 'PENDING 待定',
+        status_lost: 'LOST 输',
+        status_push: 'PUSH 走盘',
+      },
+      auth: {
+        login: 'Log Masuk',
+        logout: 'Log Keluar',
+        username: 'Nama Pengguna',
+        password: 'Kata Laluan',
+        captcha_placeholder: 'Captcha',
+        captcha_refresh: 'Klik untuk muat semula',
+        captcha_wrong: 'Kod pengesahan salah',
+      },
+      wallet: {
+        balance: 'Baki',
+        cash_balance: 'Baki Tunai',
+        unsettled: 'Belum Selesai',
+        available: 'Tersedia',
+        no_records: 'Tiada rekod',
+      },
+      bet: {
+        bet_slip: 'Slip Pertaruhan',
+        stake: 'Jumlah',
+        place_bet: 'Letak Pertaruhan',
+        place_bet_short: 'Pertaruhan',
+        parlay: 'Berganda',
+        tab_matches: 'Perlawanan',
+        tab_outright: 'Juara',
+        tab_parlay: 'Berganda',
+        tab_today: 'Hari Ini',
+        tab_early: 'Awal',
+        loading: 'Memuatkan…',
+        no_matches: 'Tiada perlawanan',
+        outright_coming: 'Pasaran juara akan datang',
+        outright_enter_stake: 'Masukkan jumlah',
+        outright_balance: 'Baki',
+        outright_stake_amount: 'Jumlah pertaruhan',
+        outright_success: 'Pertaruhan berjaya',
+        outright_done: 'Selesai',
+        outright_bet_failed: 'Pertaruhan gagal',
+        no_outright: 'Tiada pasaran juara',
+        cancel: 'Batal',
+        parlay_title: 'Pertaruhan Berganda',
+        parlay_desc: 'Pilih 3-10 perlawanan. Gabungan odds didarab!',
+        parlay_filter_all: 'Semua',
+        parlay_empty: 'No matches available for parlay betting',
+        parlay_same_match: 'Perlawanan sama tidak boleh berganda',
+        parlay_need_more: 'Pilih sekurang-kurangnya 2 pilihan',
+        back: 'Kembali',
+        refresh: 'Muat semula',
+        download: 'Muat turun',
+        reward_active: 'Ganjaran aktif!',
+        market_closed: 'Belum dibuka',
+        expand_market: 'Kembang',
+        collapse_market: 'Tutup',
+        market_cs: 'Skor Tepat',
+        market_ht_cs: 'Skor Tepat PB1',
+        market_sh_cs: 'Skor Tepat PB2',
+        market_ft_handicap: 'Handicap Penuh',
+        market_ft_ou: 'Atas/Bawah Penuh',
+        market_ft_1x2: '1X2 Penuh',
+        market_ft_oe: 'Ganjil/Genap Penuh',
+        market_ht_handicap: 'Handicap Separuh',
+        market_ht_ou: 'Atas/Bawah Separuh',
+        market_ht_1x2: '1X2 Separuh',
+        col_home: 'Home',
+        col_draw: 'Seri',
+        col_away: 'Away',
+        cs_stake_required: 'Masukkan jumlah pada sekurang-kurangnya satu skor',
+        cs_place_success: 'Pertaruhan berjaya',
+        cs_place_failed: 'Pertaruhan gagal',
+      },
+      profile: {
+        edit: 'Edit Profil',
+        language: 'Bahasa',
+        phone: 'Telefon',
+        email: 'E-mel',
+        phone_placeholder: 'Nombor telefon',
+        email_placeholder: 'Alamat e-mel',
+        save: 'Simpan',
+        password_optional_hint: 'Biarkan kosong jika tidak mahu tukar kata laluan',
+        old_password_placeholder: 'Biarkan kosong untuk langkau',
+        new_password_placeholder: 'Biarkan kosong untuk langkau',
+        confirm_password_placeholder: 'Biarkan kosong untuk langkau',
+        old_password: 'Kata laluan semasa',
+        new_password: 'Kata laluan baharu',
+        confirm_password: 'Sahkan kata laluan',
+        back: 'Kembali',
+        saved: 'Hubungan disimpan',
+        save_failed: 'Gagal simpan',
+        password_changed: 'Kata laluan dikemas kini',
+        password_failed: 'Gagal tukar kata laluan',
+        password_mismatch: 'Kata laluan tidak sepadan',
+        password_incomplete: 'Isi kata laluan semasa, baharu dan pengesahan untuk menukar',
+      },
    },
  },
 });
--- a/apps/player/src/router/index.ts
+++ b/apps/player/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import { useAuthStore } from '../stores/auth';
+import { useAuthStore } from '../stores/auth.ts';

 const router = createRouter({
  history: createWebHistory(),
@@ -11,10 +11,13 @@ const router = createRouter({
      meta: { requiresAuth: true },
      children: [
        { path: '', component: () => import('../views/HomeView.vue') },
-        { path: 'football', component: () => import('../views/FootballView.vue') },
+        { path: 'bet', component: () => import('../views/FootballView.vue') },
+        { path: 'football', redirect: '/bet' },
        { path: 'match/:id', component: () => import('../views/MatchDetailView.vue') },
        { path: 'bets', component: () => import('../views/MyBetsView.vue') },
+        { path: 'wallet', component: () => import('../views/WalletView.vue') },
        { path: 'profile', component: () => import('../views/ProfileView.vue') },
+        { path: 'profile/edit', component: () => import('../views/ProfileEditView.vue') },
      ],
    },
  ],
--- a/apps/player/src/stores/betSlip.ts
+++ b/apps/player/src/stores/betSlip.ts
@@ -25,12 +25,26 @@ export const useBetSlipStore = defineStore('betSlip', () => {
    );
    if (existing >= 0) {
      items.value.splice(existing, 1);
+      if (items.value.length < 2) mode.value = 'single';
      return;
    }
    items.value.push(item);
    if (items.value.length >= 2) mode.value = 'parlay';
  }

+  /** 串关：同场只保留一个选项；再次点击已选项则取消 */
+  function addParlayLeg(item: SlipItem) {
+    const samePick = items.value.findIndex((i) => i.selectionId === item.selectionId);
+    if (samePick >= 0) {
+      items.value.splice(samePick, 1);
+      if (items.value.length < 2) mode.value = 'single';
+      return;
+    }
+    items.value = items.value.filter((i) => i.matchId !== item.matchId);
+    items.value.push(item);
+    mode.value = items.value.length >= 2 ? 'parlay' : 'single';
+  }
+
  function removeItem(selectionId: string) {
    items.value = items.value.filter((i) => i.selectionId !== selectionId);
    if (items.value.length < 2) mode.value = 'single';
@@ -58,6 +72,16 @@ export const useBetSlipStore = defineStore('betSlip', () => {
    return new Set(matchIds).size !== matchIds.length;
  });

+  const drawerOpen = ref(false);
+
+  function openDrawer() {
+    drawerOpen.value = true;
+  }
+
+  function closeDrawer() {
+    drawerOpen.value = false;
+  }
+
  return {
    items,
    stake,
@@ -67,8 +91,12 @@ export const useBetSlipStore = defineStore('betSlip', () => {
    totalOdds,
    potentialReturn,
    hasSameMatch,
+    drawerOpen,
    addItem,
+    addParlayLeg,
    removeItem,
    clear,
+    openDrawer,
+    closeDrawer,
  };
 });
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -1,58 +1,299 @@
 * { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --primary: #D4AF37;
+  --primary-dark: #A8841F;
+  --primary-light: #F0D875;
+  --secondary: #1A1A1A;
+  --tertiary: #000000;
+  --neutral: #8E8E93;
+  --bg-body: #000000;
+  --bg-card: #141414;
+  --bg-hover: #222222;
+  --bg-elevated: #2A2A2A;
+  --text: #FFFFFF;
+  --text-muted: #8E8E93;
+  --border: #333333;
+  --border-gold: #D4AF37;
+  --border-gold-soft: rgba(212, 175, 55, 0.28);
+  --border-w: 1px;
+  --border-w-thick: 1px;
+  --danger: #FF453A;
+  --radius: 12px;
+  --radius-sm: 8px;
+  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
+  --shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.12);
+  --glow-gold: 0 0 8px rgba(212, 175, 55, 0.2);
+  --gradient-gold: linear-gradient(
+    180deg,
+    #FFF4C8 0%,
+    #F0D875 18%,
+    #D4AF37 50%,
+    #B8942B 78%,
+    #8B6914 100%
+  );
+  --gradient-gold-border: linear-gradient(
+    180deg,
+    #FFF8DC 0%,
+    #E8C96A 35%,
+    #A8841F 70%,
+    #5C4A12 100%
+  );
+  --gradient-card: linear-gradient(160deg, #1E1A12 0%, #141414 40%, #0A0A0A 100%);
+}
+
+/** 金色描边按钮（避免大面积实心填充） */
+.btn-gold-outline {
+  background: #141414;
+  border: 1px solid var(--border-gold-soft);
+  color: var(--primary-light);
+  font-weight: 800;
+}
+.btn-gold-outline:active:not(:disabled) {
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold);
+}
+
+/** 选中态：浅底 + 金边，非整块金色 */
+.tab-gold-active {
+  background: rgba(212, 175, 55, 0.08) !important;
+  border-color: var(--border-gold) !important;
+  color: var(--primary-light) !important;
+}
+
+/* 登录等关键区域：轻量金边（非厚重 PS 描边） */
+.ps-gold-frame {
+  position: relative;
+  border: 1px solid var(--border-gold-soft) !important;
+  border-radius: var(--radius);
+  background: rgba(14, 14, 14, 0.92) !important;
+  box-shadow: var(--shadow);
+}
+
+.ps-gold-frame::before,
+.ps-gold-frame::after {
+  display: none;
+}
+
+.ps-gold-input {
+  background: #0d0d0d !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: none;
+}
+
+.ps-gold-input:focus {
+  border-color: var(--border-gold-soft) !important;
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12) !important;
+}
+
+/* 主按钮：斜面浮雕 + 渐变描边 + 外发光 */
+.btn-primary {
+  position: relative;
+  isolation: isolate;
+  padding: 17px 24px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: #3D2800;
+  font-weight: 900;
+  font-size: 16px;
+  width: 100%;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  text-shadow:
+    0 1px 0 rgba(255, 252, 235, 0.95),
+    0 -1px 0 rgba(120, 85, 15, 0.35);
+  transition: transform 0.12s ease;
+  z-index: 0;
+}
+
+.btn-primary::before {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: calc(var(--radius-sm) + 3px);
+  background: linear-gradient(
+    180deg,
+    #FFFCE8 0%,
+    #F7E08A 12%,
+    #D4AF37 35%,
+    #8B6914 55%,
+    #5C4A12 72%,
+    #E8C040 90%,
+    #FFF8DC 100%
+  );
+  z-index: -2;
+  box-shadow:
+    0 0 14px rgba(255, 210, 70, 0.55),
+    0 0 28px rgba(212, 175, 55, 0.28),
+    0 6px 14px rgba(0, 0, 0, 0.55);
+}
+
+.btn-primary::after {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-radius: calc(var(--radius-sm) - 1px);
+  background: linear-gradient(
+    180deg,
+    #FFFBE8 0%,
+    #FFE566 6%,
+    #F0D050 22%,
+    #D4AF37 48%,
+    #B8860B 72%,
+    #8B6914 100%
+  );
+  z-index: -1;
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, 0.95),
+    inset 0 4px 10px rgba(255, 240, 180, 0.45),
+    inset 0 -2px 0 rgba(90, 65, 12, 0.85),
+    inset 0 -6px 14px rgba(45, 32, 6, 0.5);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(2px) scale(0.985);
+}
+
+.btn-primary:active:not(:disabled)::after {
+  background: linear-gradient(
+    180deg,
+    #E8C040 0%,
+    #C9962A 40%,
+    #8B6914 100%
+  );
+  box-shadow:
+    inset 0 4px 10px rgba(35, 24, 4, 0.65),
+    inset 0 1px 0 rgba(255, 255, 255, 0.35);
+}
+
+.btn-primary:active:not(:disabled)::before {
+  box-shadow:
+    0 0 10px rgba(255, 200, 50, 0.35),
+    0 2px 6px rgba(0, 0, 0, 0.5);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: saturate(0.4);
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
 body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #0f1419;
-  color: #e8eaed;
-  min-height: 100vh;
-}
-:root {
-  --primary: #00a826;
-  --primary-dark: #008a1f;
-  --bg-card: #1a2332;
-  --bg-hover: #243044;
-  --text-muted: #8b95a5;
-  --border: #2d3a4d;
-  --danger: #ff4444;
+  background:
+    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 55%),
+    var(--bg-body);
+  color: var(--text);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
 }
+
 a { color: inherit; text-decoration: none; }
+
 button {
  cursor: pointer;
  border: none;
  font-family: inherit;
 }
+
 input {
  font-family: inherit;
-  background: var(--bg-card);
+  background: #0D0D0D;
  border: 1px solid var(--border);
-  color: #fff;
-  padding: 10px 12px;
-  border-radius: 6px;
+  color: var(--text);
+  padding: 14px 16px;
+  border-radius: var(--radius-sm);
  width: 100%;
+  font-size: 15px;
+  font-weight: 500;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
-.btn-primary {
-  background: var(--primary);
-  color: #fff;
-  padding: 12px 24px;
-  border-radius: 6px;
-  font-weight: 600;
-  width: 100%;
+
+input:focus {
+  outline: none;
+  border-color: var(--border-gold-soft);
 }
-.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: var(--text);
+  caret-color: var(--text);
+  box-shadow: 0 0 0 1000px #0a0a0a inset;
+  border: 1px solid var(--border);
+  transition: background-color 99999s ease-out 0s;
+}
+
 .odds-btn {
-  background: var(--bg-card);
+  background: #161616;
  border: 1px solid var(--border);
-  color: #fff;
-  padding: 8px 12px;
-  border-radius: 6px;
+  color: var(--text);
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
  text-align: center;
-  min-width: 70px;
+  min-width: 78px;
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
 }
-.odds-btn.selected { background: var(--primary); border-color: var(--primary); }
-.odds-btn .label { font-size: 11px; color: var(--text-muted); }
-.odds-btn .value { font-size: 15px; font-weight: 700; color: #ffd700; }
+
+.odds-btn:active { transform: scale(0.96); }
+
+.odds-btn.selected {
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.12);
+  box-shadow: none;
+}
+
+.odds-btn.selected::before,
+.odds-btn.selected::after {
+  display: none;
+}
+
+.odds-btn.selected .label,
+.odds-btn.selected .value {
+  position: relative;
+  z-index: 1;
+}
+
+.odds-btn .label {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.odds-btn .value {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--primary-light);
+  text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
+  margin-top: 2px;
+}
+
 .card {
  background: var(--bg-card);
-  border-radius: 8px;
-  padding: 12px;
-  margin-bottom: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  margin-bottom: 12px;
+  box-shadow: var(--shadow);
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 800;
+  margin-bottom: 14px;
+  padding: 4px 0 4px 12px;
+  border-left: 3px solid var(--border-gold);
+  color: var(--primary-light);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
--- a/apps/player/src/utils/correctScoreLayout.ts
+++ b/apps/player/src/utils/correctScoreLayout.ts
@@ -0,0 +1,86 @@
+/** 与后台 settlement 模板顺序一致，用于列内排序 */
+export const FT_CORRECT_SCORE_ORDER = [
+  'SCORE_1_0', 'SCORE_2_0', 'SCORE_2_1', 'SCORE_3_0', 'SCORE_3_1', 'SCORE_3_2',
+  'SCORE_4_0', 'SCORE_4_1', 'SCORE_4_2', 'SCORE_4_3', 'OTHER_HOME',
+  'SCORE_0_0', 'SCORE_1_1', 'SCORE_2_2', 'SCORE_3_3', 'SCORE_4_4', 'OTHER_DRAW',
+  'SCORE_0_1', 'SCORE_0_2', 'SCORE_1_2', 'SCORE_0_3', 'SCORE_1_3', 'SCORE_2_3',
+  'SCORE_0_4', 'SCORE_1_4', 'SCORE_2_4', 'SCORE_3_4', 'OTHER_AWAY',
+];
+
+export const HT_CORRECT_SCORE_ORDER = [
+  'SCORE_1_0', 'SCORE_2_0', 'SCORE_2_1', 'SCORE_3_0', 'OTHER_HOME',
+  'SCORE_0_0', 'SCORE_1_1', 'SCORE_2_2', 'OTHER_DRAW',
+  'SCORE_0_1', 'SCORE_0_2', 'SCORE_1_2', 'SCORE_0_3', 'OTHER_AWAY',
+];
+
+export type CsColumn = 'home' | 'draw' | 'away';
+
+export interface CsSelection {
+  id: string;
+  selectionCode: string;
+  selectionName: string;
+  odds: string;
+  oddsVersion: string;
+  scoreDisplay: string;
+}
+
+export function isCorrectScoreMarket(marketType: string) {
+  return marketType.includes('CORRECT_SCORE');
+}
+
+function orderForMarket(marketType: string) {
+  if (marketType === 'FT_CORRECT_SCORE') return FT_CORRECT_SCORE_ORDER;
+  return HT_CORRECT_SCORE_ORDER;
+}
+
+export function parseScoreCode(code: string): { display: string; column: CsColumn } | null {
+  if (code === 'OTHER_HOME') return { display: '其它', column: 'home' };
+  if (code === 'OTHER_DRAW') return { display: '其它', column: 'draw' };
+  if (code === 'OTHER_AWAY') return { display: '其它', column: 'away' };
+  const m = code.match(/^SCORE_(\d+)_(\d+)$/);
+  if (!m) return null;
+  const h = Number(m[1]);
+  const a = Number(m[2]);
+  if (h > a) return { display: `${h}:${a}`, column: 'home' };
+  if (h < a) return { display: `${h}:${a}`, column: 'away' };
+  return { display: `${h}:${a}`, column: 'draw' };
+}
+
+function sortByTemplate(items: CsSelection[], template: string[]) {
+  return [...items].sort((a, b) => {
+    const ia = template.indexOf(a.selectionCode);
+    const ib = template.indexOf(b.selectionCode);
+    return (ia === -1 ? 999 : ia) - (ib === -1 ? 999 : ib);
+  });
+}
+
+export function groupCorrectScoreSelections(
+  selections: Array<{
+    id: string;
+    selectionCode: string;
+    selectionName: string;
+    odds: string;
+    oddsVersion: string;
+  }>,
+  marketType: string,
+) {
+  const template = orderForMarket(marketType);
+  const home: CsSelection[] = [];
+  const draw: CsSelection[] = [];
+  const away: CsSelection[] = [];
+
+  for (const sel of selections) {
+    const parsed = parseScoreCode(sel.selectionCode);
+    if (!parsed) continue;
+    const row: CsSelection = { ...sel, scoreDisplay: parsed.display };
+    if (parsed.column === 'home') home.push(row);
+    else if (parsed.column === 'draw') draw.push(row);
+    else away.push(row);
+  }
+
+  return {
+    home: sortByTemplate(home, template),
+    draw: sortByTemplate(draw, template),
+    away: sortByTemplate(away, template),
+  };
+}
--- a/apps/player/src/utils/localeDisplay.js
+++ b/apps/player/src/utils/localeDisplay.js
@@ -0,0 +1,2 @@
+// 兼容旧缓存：转发到 TypeScript 源文件
+export { getLocaleDisplay, parseAmount, sumAmounts, formatMoney } from './localeDisplay.ts';
--- a/apps/player/src/utils/localeDisplay.ts
+++ b/apps/player/src/utils/localeDisplay.ts
@@ -0,0 +1,55 @@
+export interface LocaleDisplay {
+  countryCode: 'cn' | 'us' | 'my';
+  currency: string;
+  label: string;
+}
+
+const LOCALE_DISPLAY: Record<string, LocaleDisplay> = {
+  'zh-CN': { countryCode: 'cn', currency: 'CNY', label: '中文' },
+  'en-US': { countryCode: 'us', currency: 'USD', label: 'English' },
+  'ms-MY': { countryCode: 'my', currency: 'MYR', label: 'BM' },
+};
+
+export function getLocaleDisplay(locale: string): LocaleDisplay {
+  return LOCALE_DISPLAY[locale] ?? LOCALE_DISPLAY['en-US'];
+}
+
+export function parseAmount(amount: unknown): number {
+  if (amount == null) return 0;
+  if (typeof amount === 'number') return Number.isFinite(amount) ? amount : 0;
+  if (typeof amount === 'string') {
+    const n = Number(amount);
+    return Number.isFinite(n) ? n : 0;
+  }
+  if (typeof amount === 'object') {
+    const value = amount as { toString?: () => string; d?: number[] };
+    if (typeof value.toString === 'function') {
+      const n = Number(value.toString());
+      if (Number.isFinite(n)) return n;
+    }
+    if (Array.isArray(value.d) && value.d.length) {
+      const n = Number(value.d.join(''));
+      return Number.isFinite(n) ? n : 0;
+    }
+  }
+  return 0;
+}
+
+export function sumAmounts(...amounts: unknown[]): number {
+  return amounts.reduce<number>((sum, item) => sum + parseAmount(item), 0);
+}
+
+export function formatMoney(amount: unknown, locale: string): string {
+  const value = parseAmount(amount);
+  const { currency } = getLocaleDisplay(locale);
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(value);
+  } catch {
+    return `${getLocaleDisplay(locale).currency} ${value.toFixed(2)}`;
+  }
+}
--- a/apps/player/src/utils/marketCatalog.ts
+++ b/apps/player/src/utils/marketCatalog.ts
@@ -0,0 +1,33 @@
+/** 详情页展示顺序（与产品设计稿一致） */
+export const FEATURED_MARKET_TYPES = [
+  'FT_CORRECT_SCORE',
+  'HT_CORRECT_SCORE',
+  'SH_CORRECT_SCORE',
+] as const;
+
+export const GRID_MARKET_TYPES = [
+  'FT_HANDICAP',
+  'FT_OVER_UNDER',
+  'FT_1X2',
+  'FT_ODD_EVEN',
+  'HT_HANDICAP',
+  'HT_OVER_UNDER',
+  'HT_1X2',
+] as const;
+
+export type CatalogMarketType =
+  | (typeof FEATURED_MARKET_TYPES)[number]
+  | (typeof GRID_MARKET_TYPES)[number];
+
+export const MARKET_I18N_KEY: Record<string, string> = {
+  FT_CORRECT_SCORE: 'bet.market_cs',
+  HT_CORRECT_SCORE: 'bet.market_ht_cs',
+  SH_CORRECT_SCORE: 'bet.market_sh_cs',
+  FT_HANDICAP: 'bet.market_ft_handicap',
+  FT_OVER_UNDER: 'bet.market_ft_ou',
+  FT_1X2: 'bet.market_ft_1x2',
+  FT_ODD_EVEN: 'bet.market_ft_oe',
+  HT_HANDICAP: 'bet.market_ht_handicap',
+  HT_OVER_UNDER: 'bet.market_ht_ou',
+  HT_1X2: 'bet.market_ht_1x2',
+};
--- a/apps/player/src/utils/parlayColumns.ts
+++ b/apps/player/src/utils/parlayColumns.ts
@@ -0,0 +1,23 @@
+/** 串关列表表头与玩法类型 */
+export const PARLAY_MARKET_TYPES = [
+  { key: 'FT_HANDICAP', label: 'FT.HDP' },
+  { key: 'FT_OVER_UNDER', label: 'FT.O/U' },
+  { key: 'FT_1X2', label: 'FT.1X2' },
+  { key: 'FT_ODD_EVEN', label: 'FT.O/E' },
+  { key: 'HT_HANDICAP', label: '1H.HDP' },
+  { key: 'HT_OVER_UNDER', label: '1H.O/U' },
+  { key: 'HT_1X2', label: '1H.1X2' },
+] as const;
+
+export type ParlayMarketType = (typeof PARLAY_MARKET_TYPES)[number]['key'];
+
+/** 选项简称（串关格内展示） */
+export const SELECTION_SHORT: Record<string, string> = {
+  HOME: '主',
+  AWAY: '客',
+  DRAW: '和',
+  OVER: '大',
+  UNDER: '小',
+  ODD: '单',
+  EVEN: '双',
+};
--- a/apps/player/src/utils/teamFlag.ts
+++ b/apps/player/src/utils/teamFlag.ts
@@ -0,0 +1,94 @@
+/** 球队 code / 名称 → ISO 3166-1 alpha-2，用于 flagcdn 国旗图 */
+const CODE_TO_ISO: Record<string, string> = {
+  MEX: 'mx',
+  USA: 'us',
+  CAN: 'ca',
+  BRA: 'br',
+  ARG: 'ar',
+  ENG: 'gb',
+  MUN: 'gb',
+  CHE: 'gb',
+  LIV: 'gb',
+  MCI: 'gb',
+  CZE: 'cz',
+  KOR: 'kr',
+  BIH: 'ba',
+  PAR: 'py',
+  RSA: 'za',
+  SUI: 'ch',
+  SCO: 'gb-sct',
+  TUR: 'tr',
+  CZE: 'cz',
+  BIH: 'ba',
+  FRA: 'fr',
+  ESP: 'es',
+  ENG: 'gb',
+  GER: 'de',
+  POR: 'pt',
+  NED: 'nl',
+  NOR: 'no',
+  BEL: 'be',
+  COL: 'co',
+  JPN: 'jp',
+  MAR: 'ma',
+  CRO: 'hr',
+  SEN: 'sn',
+};
+
+const NAME_TO_ISO: Record<string, string> = {
+  Mexico: 'mx',
+  'South Africa': 'za',
+  'United States': 'us',
+  USA: 'us',
+  Canada: 'ca',
+  Brazil: 'br',
+  Switzerland: 'ch',
+  Scotland: 'gb-sct',
+  Turkey: 'tr',
+  'South Korea': 'kr',
+  Paraguay: 'py',
+  墨西哥: 'mx',
+  美国: 'us',
+  加拿大: 'ca',
+  曼联: 'gb',
+  切尔西: 'gb',
+  墨西哥: 'mx',
+  南非: 'za',
+  捷克: 'cz',
+  韩国: 'kr',
+  波黑: 'ba',
+  巴拉圭: 'py',
+  瑞士: 'ch',
+  巴西: 'br',
+  苏格兰: 'gb-sct',
+  土耳其: 'tr',
+  法国: 'fr',
+  阿根廷: 'ar',
+  法国: 'fr',
+  西班牙: 'es',
+  英格兰: 'gb',
+  德国: 'de',
+  葡萄牙: 'pt',
+  荷兰: 'nl',
+  挪威: 'no',
+  比利时: 'be',
+  哥伦比亚: 'co',
+  日本: 'jp',
+  摩洛哥: 'ma',
+  克罗地亚: 'hr',
+  塞内加尔: 'sn',
+};
+
+export function teamFlagUrl(code?: string, name?: string): string {
+  const key = (code ?? '').toUpperCase();
+  if (key && CODE_TO_ISO[key]) {
+    return `https://flagcdn.com/w40/${CODE_TO_ISO[key]}.png`;
+  }
+  if (name && NAME_TO_ISO[name]) {
+    return `https://flagcdn.com/w40/${NAME_TO_ISO[name]}.png`;
+  }
+  if (key.length === 2) {
+    return `https://flagcdn.com/w40/${key.toLowerCase()}.png`;
+  }
+  return '';
+}
--- a/apps/player/src/views/FootballView.vue
+++ b/apps/player/src/views/FootballView.vue
@@ -1,66 +1,293 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import api from '../api';
+import { useBetSlipStore } from '../stores/betSlip';
+import LeagueAccordionItem from '../components/LeagueAccordionItem.vue';
+import OutrightPanel from '../components/outright/OutrightPanel.vue';
+import ParlayPanel from '../components/parlay/ParlayPanel.vue';
+import emptyMatchesImg from '../assets/images/empty-matches.svg';

-const router = useRouter();
-const matches = ref<Match[]>([]);
+type MainTab = 'matches' | 'outright' | 'parlay';
+type TimeTab = 'today' | 'early';

 interface Match {
  id: string;
+  leagueId?: string;
  homeTeamName: string;
  awayTeamName: string;
+  homeTeamCode?: string;
+  awayTeamCode?: string;
  startTime: string;
  leagueName: string;
-  markets?: Array<{ marketType: string; selections: Selection[] }>;
 }

-interface Selection {
-  id: string;
-  selectionCode: string;
-  selectionName: string;
-  odds: string;
-  oddsVersion: string;
+interface LeagueGroup {
+  leagueId: string;
+  leagueName: string;
+  matches: Match[];
 }

+const { t } = useI18n();
+const router = useRouter();
+const slip = useBetSlipStore();
+
+const mainTab = ref<MainTab>('matches');
+const timeTab = ref<TimeTab>('early');
+const matches = ref<Match[]>([]);
+const loading = ref(true);
+const expandedLeagues = ref<Set<string>>(new Set());
+
 onMounted(async () => {
-  const { data } = await api.get('/player/matches');
-  matches.value = data.data;
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/matches');
+    matches.value = data.data ?? [];
+  } finally {
+    loading.value = false;
+  }
 });

+function dayStart(d: Date) {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+
+function isKickoffToday(startTime: string) {
+  const kick = new Date(startTime);
+  const now = new Date();
+  const start = dayStart(now);
+  const end = new Date(start);
+  end.setDate(end.getDate() + 1);
+  return kick >= start && kick < end;
+}
+
+const filteredMatches = computed(() => {
+  if (mainTab.value !== 'matches') return [];
+  return matches.value.filter((m) => {
+    const today = isKickoffToday(m.startTime);
+    return timeTab.value === 'today' ? today : !today;
+  });
+});
+
+const leagueGroups = computed<LeagueGroup[]>(() => {
+  const map = new Map<string, LeagueGroup>();
+  for (const m of filteredMatches.value) {
+    const id = m.leagueId ?? m.leagueName;
+    if (!map.has(id)) {
+      map.set(id, { leagueId: id, leagueName: m.leagueName, matches: [] });
+    }
+    map.get(id)!.matches.push(m);
+  }
+  return [...map.values()];
+});
+
+watch(leagueGroups, (groups) => {
+  const ids = new Set(expandedLeagues.value);
+  for (const id of [...ids]) {
+    if (!groups.some((g) => g.leagueId === id)) ids.delete(id);
+  }
+  if (ids.size !== expandedLeagues.value.size) expandedLeagues.value = ids;
+});
+
+function isLeagueExpanded(leagueId: string) {
+  return expandedLeagues.value.has(leagueId);
+}
+
+function toggleLeague(leagueId: string) {
+  const next = new Set(expandedLeagues.value);
+  if (next.has(leagueId)) next.delete(leagueId);
+  else next.add(leagueId);
+  expandedLeagues.value = next;
+}
+
+function selectMainTab(tab: MainTab) {
+  mainTab.value = tab;
+}
+
 function goMatch(id: string) {
  router.push(`/match/${id}`);
 }
 </script>

 <template>
-  <div>
-    <h2 class="title">足球赛事</h2>
-    <div v-for="match in matches" :key="match.id" class="card">
-      <div class="league">{{ match.leagueName }}</div>
-      <div class="teams" @click="goMatch(match.id)">
-        {{ match.homeTeamName }} vs {{ match.awayTeamName }}
-      </div>
-      <div class="time">{{ new Date(match.startTime).toLocaleString() }}</div>
-
-      <div v-if="match.markets?.length" class="odds-row">
-        <template v-for="market in match.markets.filter(m => m.marketType === 'FT_1X2')" :key="market.marketType">
-          <div v-for="sel in market.selections" :key="sel.id" class="odds-btn" @click="goMatch(match.id)">
-            <div class="label">{{ sel.selectionName }}</div>
-            <div class="value">{{ sel.odds }}</div>
-          </div>
-        </template>
-      </div>
+  <div class="bet-page">
+    <div class="main-tabs">
+      <button
+        type="button"
+        class="main-tab"
+        :class="{ active: mainTab === 'matches', 'tab-gold-active': mainTab === 'matches' }"
+        @click="selectMainTab('matches')"
+      >
+        <span class="tab-icon">⚽</span>
+        {{ t('bet.tab_matches') }}
+      </button>
+      <button
+        type="button"
+        class="main-tab"
+        :class="{ active: mainTab === 'outright', 'tab-gold-active': mainTab === 'outright' }"
+        @click="selectMainTab('outright')"
+      >
+        <span class="tab-icon">🏆</span>
+        {{ t('bet.tab_outright') }}
+      </button>
+      <button
+        type="button"
+        class="main-tab parlay-tab"
+        :class="{ active: mainTab === 'parlay', 'tab-gold-active': mainTab === 'parlay' }"
+        @click="selectMainTab('parlay')"
+      >
+        <span class="tab-icon">+</span>
+        {{ t('bet.tab_parlay') }}
+        <span v-if="slip.count" class="tab-badge">{{ slip.count }}</span>
+      </button>
    </div>
-    <div v-if="!matches.length" class="empty">暂无赛事</div>
+
+    <template v-if="mainTab === 'matches'">
+      <div class="time-tabs">
+        <button
+          type="button"
+          class="time-tab"
+          :class="{ active: timeTab === 'today', 'tab-gold-active': timeTab === 'today' }"
+          @click="timeTab = 'today'"
+        >
+          {{ t('bet.tab_today') }}
+        </button>
+        <button
+          type="button"
+          class="time-tab"
+          :class="{ active: timeTab === 'early', 'tab-gold-active': timeTab === 'early' }"
+          @click="timeTab = 'early'"
+        >
+          {{ t('bet.tab_early') }}
+        </button>
+      </div>
+
+      <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
+
+      <div v-else-if="leagueGroups.length" class="league-list">
+        <LeagueAccordionItem
+          v-for="group in leagueGroups"
+          :key="group.leagueId"
+          :league-id="group.leagueId"
+          :league-name="group.leagueName"
+          :matches="group.matches"
+          :expanded="isLeagueExpanded(group.leagueId)"
+          @toggle="toggleLeague(group.leagueId)"
+          @bet="goMatch"
+        />
+      </div>
+
+      <div v-else class="empty">
+        <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+        <p>{{ t('bet.no_matches') }}</p>
+      </div>
+    </template>
+
+    <OutrightPanel v-else-if="mainTab === 'outright'" />
+
+    <ParlayPanel v-else-if="mainTab === 'parlay'" />
  </div>
 </template>

 <style scoped>
-.title { font-size: 18px; margin-bottom: 16px; }
-.league { font-size: 11px; color: var(--primary); margin-bottom: 4px; }
-.teams { font-weight: 600; cursor: pointer; margin-bottom: 4px; }
-.time { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
-.odds-row { display: flex; gap: 8px; }
-.empty { text-align: center; color: var(--text-muted); padding: 40px; }
+.bet-page {
+  margin: 0 -16px;
+  padding-bottom: 8px;
+}
+
+.main-tabs {
+  display: flex;
+  gap: 8px;
+  padding: 0 12px 12px;
+}
+
+.main-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px 8px;
+  border-radius: 10px;
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  position: relative;
+}
+
+.main-tab.active {
+  font-weight: 800;
+}
+
+.tab-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.tab-badge {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  min-width: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: #1a1000;
+  color: var(--primary-light);
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 16px;
+}
+
+.time-tabs {
+  display: flex;
+  gap: 10px;
+  padding: 0 12px 14px;
+}
+
+.time-tab {
+  flex: 1;
+  padding: 10px 16px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--primary-light);
+  background: #141414;
+  border: 1px solid var(--primary);
+}
+
+.time-tab.active {
+  font-weight: 800;
+}
+
+.league-list {
+  padding: 4px 12px 0;
+}
+
+.state,
+.placeholder,
+.empty {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 48px 20px;
+  font-weight: 600;
+}
+
+.empty-icon {
+  width: 96px;
+  height: 96px;
+  margin-bottom: 14px;
+}
+
+.placeholder {
+  padding: 80px 20px;
+}
+
+.parlay-tab.tab-gold-active {
+  flex: 1.15;
+}
 </style>
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -1,10 +1,29 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import api from '../api';
+import emptyMatchesImg from '../assets/images/empty-matches.svg';
+import BannerCarousel from '../components/BannerCarousel.vue';
+import { resolveBanners } from '../constants/defaultBanner';

 const router = useRouter();
-const home = ref<{ banners: unknown[]; hotMatches: Match[]; ticker: unknown[] } | null>(null);
+const home = ref<{
+  banners: Banner[];
+  hotMatches: Match[];
+  ticker: ContentItem[];
+  notices: ContentItem[];
+} | null>(null);
+
+interface ContentItem {
+  translation?: { title?: string; body?: string; imageUrl?: string };
+}
+
+interface Banner {
+  id?: string;
+  linkType?: string | null;
+  linkTarget?: string | null;
+  translation?: { title?: string; body?: string; imageUrl?: string };
+}

 interface Match {
  id: string;
@@ -12,9 +31,10 @@ interface Match {
  awayTeamName: string;
  startTime: string;
  isHot: boolean;
-  markets?: Array<{ marketType: string; selections: Array<{ id: string; selectionName: string; odds: string; oddsVersion: string }> }>;
 }

+const displayBanners = computed(() => resolveBanners(home.value?.banners));
+
 onMounted(async () => {
  const { data } = await api.get('/player/home');
  home.value = data.data;
@@ -27,13 +47,7 @@ function goMatch(id: string) {

 <template>
  <div>
-    <div v-if="home?.banners?.length" class="banner card">
-      {{ (home.banners[0] as { translation?: { title?: string } })?.translation?.title || 'Welcome' }}
-    </div>
-
-    <div v-if="home?.ticker?.length" class="ticker">
-      {{ (home.ticker[0] as { translation?: { body?: string } })?.translation?.body }}
-    </div>
+    <BannerCarousel :banners="displayBanners" />

    <h2 class="section-title">热门赛事</h2>
    <div v-for="match in home?.hotMatches || []" :key="match.id" class="card match-card" @click="goMatch(match.id)">
@@ -41,17 +55,18 @@ function goMatch(id: string) {
      <div class="match-time">{{ new Date(match.startTime).toLocaleString() }}</div>
    </div>

-    <div v-if="!home?.hotMatches?.length" class="empty">暂无赛事</div>
+    <div v-if="home && !home.hotMatches?.length" class="empty">
+      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+      <p>暂无赛事</p>
+    </div>
  </div>
 </template>

 <style scoped>
-.banner { background: linear-gradient(135deg, #1a472a, #0f1419); padding: 24px; font-size: 18px; font-weight: 600; }
-.ticker { background: #243044; padding: 8px 12px; font-size: 12px; margin-bottom: 12px; border-radius: 4px; overflow: hidden; white-space: nowrap; }
-.section-title { font-size: 16px; margin-bottom: 12px; }
-.match-card { cursor: pointer; }
-.match-card:hover { background: var(--bg-hover); }
-.match-teams { font-weight: 600; margin-bottom: 4px; }
-.match-time { font-size: 12px; color: var(--text-muted); }
-.empty { text-align: center; color: var(--text-muted); padding: 40px; }
+.match-card { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
+.match-card:active { border-color: var(--border-gold-soft); }
+.match-teams { font-weight: 800; margin-bottom: 8px; font-size: 16px; }
+.match-time { font-size: 13px; color: var(--text-muted); font-weight: 500; }
+.empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-weight: 600; }
+.empty-icon { width: 96px; height: 96px; margin-bottom: 14px; }
 </style>
--- a/apps/player/src/views/LoginView.vue
+++ b/apps/player/src/views/LoginView.vue
@@ -3,16 +3,24 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth';
+import RobotVerify from '../components/RobotVerify.vue';
+import loginBg from '../assets/images/h5bg.png';

 const { t } = useI18n();
 const auth = useAuthStore();
 const router = useRouter();
+const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
 const username = ref('player1');
 const password = ref('Player@123');
 const error = ref('');
 const loading = ref(false);

 async function submit() {
+  if (!captchaRef.value?.validate()) {
+    error.value = t('auth.captcha_wrong');
+    captchaRef.value?.refresh();
+    return;
+  }
  loading.value = true;
  error.value = '';
  try {
@@ -27,15 +35,15 @@ async function submit() {
 </script>

 <template>
-  <div class="login-page">
-    <img src="/logo.png" alt="TheBet365" class="logo" />
-    <form @submit.prevent="submit" class="login-form">
+  <div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
+    <form @submit.prevent="submit" class="login-form ps-gold-frame">
      <label>{{ t('auth.username') }}</label>
-      <input v-model="username" required />
+      <input v-model="username" class="ps-gold-input" required />
      <label>{{ t('auth.password') }}</label>
-      <input v-model="password" type="password" required />
+      <input v-model="password" class="ps-gold-input" type="password" required />
+      <RobotVerify ref="captchaRef" />
      <p v-if="error" class="error">{{ error }}</p>
-      <button type="submit" class="btn-primary" :disabled="loading">
+      <button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
        {{ t('auth.login') }}
      </button>
    </form>
@@ -44,11 +52,53 @@ async function submit() {

 <style scoped>
 .login-page {
-  min-height: 100vh; display: flex; flex-direction: column;
-  align-items: center; justify-content: center; padding: 24px;
+  height: 100%;
+  min-height: 100dvh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 34vh 20px max(28px, env(safe-area-inset-bottom));
+  background-color: var(--tertiary);
+  background-size: cover;
+  background-position: center top;
+  background-repeat: no-repeat;
+}
+
+.login-form {
+  width: 100%;
+  max-width: 340px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+}
+
+label {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.btn-login {
+  margin-top: 4px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+}
+
+.btn-login:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.error {
+  color: var(--danger);
+  font-size: 13px;
+  font-weight: 600;
 }
-.logo { height: 80px; width: auto; margin-bottom: 32px; }
-.login-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; }
-label { font-size: 13px; color: var(--text-muted); }
-.error { color: var(--danger); font-size: 13px; }
 </style>
--- a/apps/player/src/views/MatchDetailView.vue
+++ b/apps/player/src/views/MatchDetailView.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { useBetSlipStore } from '../stores/betSlip';
+import { teamFlagUrl } from '../utils/teamFlag';
+import {
+  FEATURED_MARKET_TYPES,
+  GRID_MARKET_TYPES,
+  MARKET_I18N_KEY,
+} from '../utils/marketCatalog';
+import FeaturedMarketRow from '../components/match-detail/FeaturedMarketRow.vue';
+import MarketTypeTile from '../components/match-detail/MarketTypeTile.vue';
+import MarketSelectionsPanel from '../components/match-detail/MarketSelectionsPanel.vue';
+import CorrectScorePanel from '../components/match-detail/CorrectScorePanel.vue';
+import { isCorrectScoreMarket } from '../utils/correctScoreLayout';

 const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
 const slip = useBetSlipStore();
-const match = ref<MatchDetail | null>(null);
-
-interface MatchDetail {
-  id: string;
-  homeTeamName: string;
-  awayTeamName: string;
-  startTime: string;
-  markets: Market[];
-}

 interface Market {
  id: string;
@@ -32,20 +37,137 @@ interface Selection {
  oddsVersion: string;
 }

-const marketLabels: Record<string, string> = {
-  FT_1X2: '全场独赢',
-  FT_HANDICAP: '全场让球',
-  FT_OVER_UNDER: '全场大小',
-  FT_ODD_EVEN: '全场单双',
-  HT_1X2: '半场独赢',
-  FT_CORRECT_SCORE: '波胆',
-};
+interface MatchDetail {
+  id: string;
+  homeTeamName: string;
+  awayTeamName: string;
+  homeTeamCode?: string;
+  awayTeamCode?: string;
+  startTime: string;
+  markets: Market[];
+}

-onMounted(async () => {
-  const { data } = await api.get(`/player/matches/${route.params.id}`);
-  match.value = data.data;
+const match = ref<MatchDetail | null>(null);
+const loading = ref(true);
+const expandedKey = ref<string | null>(null);
+const correctScoreStakes = ref<Record<string, number>>({});
+const placingCs = ref(false);
+const csMessage = ref('');
+
+const marketsByType = computed(() => {
+  const map = new Map<string, Market>();
+  for (const m of match.value?.markets ?? []) {
+    map.set(m.marketType, m);
+  }
+  return map;
 });

+const homeFlag = computed(() =>
+  teamFlagUrl(match.value?.homeTeamCode, match.value?.homeTeamName),
+);
+const awayFlag = computed(() =>
+  teamFlagUrl(match.value?.awayTeamCode, match.value?.awayTeamName),
+);
+
+const kickoff = computed(() => {
+  if (!match.value) return '';
+  return new Date(match.value.startTime).toLocaleString(locale.value, {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  });
+});
+
+function marketLabel(marketType: string) {
+  const key = MARKET_I18N_KEY[marketType];
+  return key ? t(key) : marketType;
+}
+
+function expandKey(marketType: string) {
+  return marketType;
+}
+
+function isExpanded(marketType: string) {
+  return expandedKey.value === expandKey(marketType);
+}
+
+function openMarket(marketType: string) {
+  if (!marketsByType.value.has(marketType)) return;
+  expandedKey.value = expandKey(marketType);
+}
+
+function closeMarket() {
+  expandedKey.value = null;
+}
+
+function clearMarketSlip(marketType: string) {
+  if (!match.value) return;
+  const toRemove = slip.items.filter(
+    (i) => i.matchId === match.value!.id && i.marketType === marketType,
+  );
+  for (const item of toRemove) slip.removeItem(item.selectionId);
+  if (isCorrectScoreMarket(marketType)) {
+    const market = marketsByType.value.get(marketType);
+    if (market) {
+      const next = { ...correctScoreStakes.value };
+      for (const s of market.selections) delete next[s.id];
+      correctScoreStakes.value = next;
+    }
+  }
+  if (expandedKey.value === expandKey(marketType)) expandedKey.value = null;
+}
+
+function genRequestId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+async function placeCorrectScoreBets(marketType: string) {
+  const market = marketsByType.value.get(marketType);
+  if (!market || !match.value) return;
+  const entries = market.selections.filter((s) => (correctScoreStakes.value[s.id] ?? 0) > 0);
+  if (!entries.length) {
+    csMessage.value = t('bet.cs_stake_required');
+    return;
+  }
+  placingCs.value = true;
+  csMessage.value = '';
+  try {
+    for (const sel of entries) {
+      await api.post('/player/bets/single', {
+        selectionId: sel.id,
+        oddsVersion: String(sel.oddsVersion),
+        stake: correctScoreStakes.value[sel.id],
+        requestId: genRequestId(),
+      });
+    }
+    csMessage.value = t('bet.cs_place_success');
+    const next = { ...correctScoreStakes.value };
+    for (const sel of entries) delete next[sel.id];
+    correctScoreStakes.value = next;
+  } catch (e: unknown) {
+    csMessage.value =
+      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
+      t('bet.cs_place_failed');
+  } finally {
+    placingCs.value = false;
+  }
+}
+
+async function loadMatch() {
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/player/matches/${route.params.id}`);
+    match.value = data.data;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadMatch);
+
 function isSelected(id: string) {
  return slip.items.some((i) => i.selectionId === id);
 }
@@ -54,7 +176,7 @@ function toggleSelection(sel: Selection, market: Market) {
  if (!match.value) return;
  slip.addItem({
    selectionId: sel.id,
-    oddsVersion: sel.oddsVersion,
+    oddsVersion: String(sel.oddsVersion),
    matchId: match.value.id,
    matchName: `${match.value.homeTeamName} vs ${match.value.awayTeamName}`,
    selectionName: sel.selectionName,
@@ -63,40 +185,226 @@ function toggleSelection(sel: Selection, market: Market) {
  });
 }

-const groupedMarkets = computed(() => {
-  if (!match.value) return [];
-  return match.value.markets;
-});
+function onPickSelection(selId: string, marketType: string) {
+  const market = marketsByType.value.get(marketType);
+  const sel = market?.selections.find((s) => s.id === selId);
+  if (market && sel) toggleSelection(sel, market);
+}
 </script>

 <template>
-  <div v-if="match">
-    <div class="match-header card">
-      <h2>{{ match.homeTeamName }} vs {{ match.awayTeamName }}</h2>
-      <p class="time">{{ new Date(match.startTime).toLocaleString() }}</p>
-    </div>
-
-    <div v-for="market in groupedMarkets" :key="market.id" class="card market-group">
-      <h3>{{ marketLabels[market.marketType] || market.marketType }}</h3>
-      <div class="selections">
-        <button
-          v-for="sel in market.selections"
-          :key="sel.id"
-          class="odds-btn"
-          :class="{ selected: isSelected(sel.id) }"
-          @click="toggleSelection(sel, market)"
-        >
-          <div class="label">{{ sel.selectionName }}</div>
-          <div class="value">{{ sel.odds }}</div>
+  <div class="detail-page">
+    <header class="toolbar">
+      <button type="button" class="btn-back btn-gold-outline" @click="router.back()">{{ t('bet.back') }}</button>
+      <div class="toolbar-right">
+        <button type="button" class="btn-tool btn-gold-outline" :aria-label="t('bet.refresh')" @click="loadMatch">
+          ↻
        </button>
+        <button type="button" class="btn-tool btn-gold-outline" :aria-label="t('bet.download')">↓</button>
+        <span class="fifa-badge">FIFA</span>
      </div>
-    </div>
+    </header>
+
+    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
+
+    <template v-else-if="match">
+      <section class="match-hero">
+        <p class="kickoff">{{ kickoff }}</p>
+        <div class="flags-row">
+          <img v-if="homeFlag" :src="homeFlag" alt="" class="flag-lg" />
+          <span class="vs-pill">vs</span>
+          <img v-if="awayFlag" :src="awayFlag" alt="" class="flag-lg" />
+        </div>
+        <div class="teams-row">
+          <span class="team-name">{{ match.homeTeamName }}</span>
+          <span class="vs-text">VS</span>
+          <span class="team-name">{{ match.awayTeamName }}</span>
+        </div>
+      </section>
+
+      <section class="markets-section">
+        <FeaturedMarketRow
+          v-for="marketType in FEATURED_MARKET_TYPES"
+          :key="marketType"
+          :label="marketLabel(marketType)"
+          :has-market="marketsByType.has(marketType)"
+          :expanded="isExpanded(marketType)"
+          :reward-active="marketsByType.has(marketType)"
+          @bet="isCorrectScoreMarket(marketType) ? placeCorrectScoreBets(marketType) : openMarket(marketType)"
+          @expand="openMarket(marketType)"
+          @collapse="clearMarketSlip(marketType)"
+        >
+          <CorrectScorePanel
+            v-if="marketsByType.get(marketType) && isCorrectScoreMarket(marketType)"
+            :market-type="marketType"
+            :home-team-name="match.homeTeamName"
+            :away-team-name="match.awayTeamName"
+            :selections="marketsByType.get(marketType)!.selections"
+            v-model:stakes="correctScoreStakes"
+          />
+          <MarketSelectionsPanel
+            v-else-if="marketsByType.get(marketType)"
+            :selections="marketsByType.get(marketType)!.selections"
+            :is-selected="isSelected"
+            @pick="onPickSelection($event, marketType)"
+          />
+        </FeaturedMarketRow>
+
+        <p v-if="csMessage" class="cs-toast">{{ csMessage }}</p>
+
+        <div class="market-grid">
+          <template v-for="marketType in GRID_MARKET_TYPES" :key="marketType">
+            <MarketTypeTile
+              :label="marketLabel(marketType)"
+              :has-market="marketsByType.has(marketType)"
+              :active="isExpanded(marketType)"
+              @expand="openMarket(marketType)"
+              @collapse="clearMarketSlip(marketType)"
+            />
+            <MarketSelectionsPanel
+              v-if="isExpanded(marketType) && marketsByType.get(marketType)"
+              class="grid-panel"
+              :selections="marketsByType.get(marketType)!.selections"
+              :is-selected="isSelected"
+              @pick="onPickSelection($event, marketType)"
+            />
+          </template>
+        </div>
+      </section>
+    </template>
  </div>
 </template>

 <style scoped>
-.match-header h2 { font-size: 18px; margin-bottom: 4px; }
-.time { color: var(--text-muted); font-size: 13px; }
-.market-group h3 { font-size: 14px; margin-bottom: 12px; color: var(--text-muted); }
-.selections { display: flex; flex-wrap: wrap; gap: 8px; }
+.detail-page {
+  margin: 0 -16px;
+  padding-bottom: 24px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px 12px;
+  gap: 12px;
+}
+
+.btn-back {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-tool {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.fifa-badge {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  margin-left: 4px;
+}
+
+.match-hero {
+  text-align: center;
+  padding: 8px 16px 20px;
+}
+
+.kickoff {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-light);
+  margin-bottom: 14px;
+}
+
+.flags-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.flag-lg {
+  width: 72px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+.vs-pill {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--text-muted);
+  text-transform: lowercase;
+}
+
+.teams-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.team-name {
+  font-size: 22px;
+  font-weight: 900;
+  color: var(--primary-light);
+  letter-spacing: 0.04em;
+}
+
+.vs-text {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--text-muted);
+}
+
+.markets-section {
+  padding: 0 12px;
+}
+
+.market-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.grid-panel {
+  grid-column: 1 / -1;
+  margin-top: -4px;
+  margin-bottom: 4px;
+  padding: 0 4px 8px;
+  background: #101010;
+  border-radius: 6px;
+  border: 1px solid #2a2a2a;
+}
+
+.state {
+  text-align: center;
+  padding: 48px;
+  color: var(--text-muted);
+}
+
+.cs-toast {
+  text-align: center;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--primary-light);
+  padding: 4px 12px 8px;
+}
 </style>
--- a/apps/player/src/views/MyBetsView.vue
+++ b/apps/player/src/views/MyBetsView.vue
@@ -1,62 +1,59 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import api from '../api';
+import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';

-const bets = ref<{ items: Bet[]; total: number }>({ items: [], total: 0 });
+const { t } = useI18n();

-interface Bet {
-  betNo: string;
-  betType: string;
-  stake: string;
-  totalOdds: string;
-  potentialReturn: string;
-  actualReturn: string;
-  status: string;
-  placedAt: string;
-  selections: Array<{ selectionNameSnapshot: string; odds: string; resultStatus?: string }>;
-}
+const bets = ref<{ items: BetHistoryItem[]; total: number }>({ items: [], total: 0 });
+const loading = ref(true);

 onMounted(load);

 async function load() {
-  const { data } = await api.get('/player/bets');
-  bets.value = data.data;
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/bets');
+    bets.value = data.data ?? { items: [], total: 0 };
+  } finally {
+    loading.value = false;
+  }
 }
 </script>

 <template>
-  <div>
-    <h2>我的投注</h2>
-    <div v-for="bet in bets.items" :key="bet.betNo" class="card bet-card">
-      <div class="bet-header">
-        <span class="bet-no">{{ bet.betNo }}</span>
-        <span :class="['status', bet.status.toLowerCase()]">{{ bet.status }}</span>
-      </div>
-      <div v-for="(sel, i) in bet.selections" :key="i" class="sel">
-        {{ sel.selectionNameSnapshot }} @ {{ sel.odds }}
-        <span v-if="sel.resultStatus"> → {{ sel.resultStatus }}</span>
-      </div>
-      <div class="bet-footer">
-        <span>{{ bet.betType }} · 投注 {{ bet.stake }}</span>
-        <span v-if="bet.status === 'WON'">返还 {{ bet.actualReturn }}</span>
-        <span v-else-if="bet.status === 'PENDING'">预计 {{ bet.potentialReturn }}</span>
-      </div>
-      <div class="time">{{ new Date(bet.placedAt).toLocaleString() }}</div>
-    </div>
-    <div v-if="!bets.items.length" class="empty">暂无投注</div>
+  <div class="history-page">
+    <h2 class="page-title">{{ t('nav.bet_history') }}</h2>
+
+    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
+
+    <template v-else-if="bets.items.length">
+      <BetHistoryCard v-for="bet in bets.items" :key="bet.betNo" :bet="bet" />
+    </template>
+
+    <div v-else class="state">{{ t('history.empty') }}</div>
  </div>
 </template>

 <style scoped>
-h2 { margin-bottom: 16px; }
-.bet-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
-.bet-no { font-size: 12px; color: var(--text-muted); }
-.status { font-size: 12px; font-weight: 600; }
-.status.pending { color: #ff9800; }
-.status.won { color: var(--primary); }
-.status.lost { color: var(--danger); }
-.sel { font-size: 13px; margin-bottom: 4px; }
-.bet-footer { font-size: 13px; margin-top: 8px; display: flex; justify-content: space-between; }
-.time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
-.empty { text-align: center; color: var(--text-muted); padding: 40px; }
+.history-page {
+  padding-bottom: 8px;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--text);
+  margin-bottom: 16px;
+  letter-spacing: 0.02em;
+}
+
+.state {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 56px 20px;
+  font-weight: 600;
+  font-size: 14px;
+}
 </style>
--- a/apps/player/src/views/ProfileEditView.vue
+++ b/apps/player/src/views/ProfileEditView.vue
@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const username = ref('');
+const phone = ref('');
+const email = ref('');
+const oldPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const message = ref('');
+const error = ref('');
+const saving = ref(false);
+
+onMounted(async () => {
+  const { data } = await api.get('/player/profile');
+  const user = data.data;
+  username.value = user?.username ?? '';
+  phone.value = user?.preferences?.phone ?? '';
+  email.value = user?.preferences?.email ?? '';
+});
+
+function wantsPasswordChange() {
+  return !!(oldPassword.value || newPassword.value || confirmPassword.value);
+}
+
+async function saveAll() {
+  error.value = '';
+  message.value = '';
+
+  if (wantsPasswordChange()) {
+    if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
+      error.value = t('profile.password_incomplete');
+      return;
+    }
+    if (newPassword.value !== confirmPassword.value) {
+      error.value = t('profile.password_mismatch');
+      return;
+    }
+  }
+
+  saving.value = true;
+  const parts: string[] = [];
+
+  try {
+    await api.patch('/player/profile', {
+      phone: phone.value.trim() || undefined,
+      email: email.value.trim() || undefined,
+    });
+    parts.push(t('profile.saved'));
+  } catch (e: unknown) {
+    error.value =
+      (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+      t('profile.save_failed');
+    saving.value = false;
+    return;
+  }
+
+  if (wantsPasswordChange()) {
+    try {
+      await api.post('/player/auth/change-password', {
+        oldPassword: oldPassword.value,
+        newPassword: newPassword.value,
+      });
+      oldPassword.value = '';
+      newPassword.value = '';
+      confirmPassword.value = '';
+      parts.push(t('profile.password_changed'));
+    } catch (e: unknown) {
+      error.value =
+        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        t('profile.password_failed');
+      saving.value = false;
+      return;
+    }
+  }
+
+  message.value = parts.join(' · ');
+  saving.value = false;
+}
+
+function back() {
+  router.push('/profile');
+}
+</script>
+
+<template>
+  <div class="edit-page">
+    <header class="page-head">
+      <button type="button" class="back-btn" @click="back">← {{ t('profile.back') }}</button>
+      <h2 class="page-title">{{ t('profile.edit') }}</h2>
+    </header>
+
+    <form class="form-card" @submit.prevent="saveAll">
+      <div class="field">
+        <label>{{ t('auth.username') }}</label>
+        <input :value="username" class="readonly" disabled />
+      </div>
+      <div class="field">
+        <label>{{ t('profile.phone') }}</label>
+        <input v-model="phone" type="tel" class="field-input" :placeholder="t('profile.phone_placeholder')" />
+      </div>
+      <div class="field">
+        <label>{{ t('profile.email') }}</label>
+        <input v-model="email" type="email" class="field-input" :placeholder="t('profile.email_placeholder')" />
+      </div>
+
+      <p class="field-hint">{{ t('profile.password_optional_hint') }}</p>
+      <div class="field">
+        <label>{{ t('profile.old_password') }}</label>
+        <input
+          v-model="oldPassword"
+          type="password"
+          class="field-input"
+          autocomplete="current-password"
+          :placeholder="t('profile.old_password_placeholder')"
+        />
+      </div>
+      <div class="field">
+        <label>{{ t('profile.new_password') }}</label>
+        <input
+          v-model="newPassword"
+          type="password"
+          class="field-input"
+          autocomplete="new-password"
+          :placeholder="t('profile.new_password_placeholder')"
+        />
+      </div>
+      <div class="field">
+        <label>{{ t('profile.confirm_password') }}</label>
+        <input
+          v-model="confirmPassword"
+          type="password"
+          class="field-input"
+          autocomplete="new-password"
+          :placeholder="t('profile.confirm_password_placeholder')"
+        />
+      </div>
+
+      <button type="submit" class="btn-action btn-gold-outline" :disabled="saving">
+        {{ t('profile.save') }}
+      </button>
+    </form>
+
+    <p v-if="message" class="msg ok">{{ message }}</p>
+    <p v-if="error" class="msg err">{{ error }}</p>
+  </div>
+</template>
+
+<style scoped>
+.edit-page {
+  padding: 8px 0 12px;
+}
+
+.page-head {
+  margin-bottom: 10px;
+}
+
+.back-btn {
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+  letter-spacing: 0.04em;
+}
+
+.form-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px;
+}
+
+.field {
+  margin-bottom: 10px;
+}
+
+.field-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin: 4px 0 10px;
+  line-height: 1.4;
+}
+
+label {
+  display: block;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.field-input,
+.readonly {
+  display: block;
+  width: 100%;
+  padding: 9px 11px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: #0a0a0a;
+  color: var(--text);
+  transition: border-color 0.2s;
+}
+
+.field-input:focus {
+  outline: none;
+  border-color: var(--border-gold-soft);
+  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
+}
+
+.field-input:-webkit-autofill,
+.field-input:-webkit-autofill:hover,
+.field-input:-webkit-autofill:focus {
+  -webkit-text-fill-color: var(--text);
+  box-shadow: 0 0 0 1000px #0a0a0a inset;
+  border: 1px solid var(--border);
+}
+
+.field-input::placeholder {
+  color: #555;
+}
+
+.readonly {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.btn-action {
+  width: 100%;
+  margin-top: 4px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+.btn-action:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.msg {
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.msg.ok {
+  color: var(--primary-light);
+}
+
+.msg.err {
+  color: var(--danger);
+}
+</style>
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -1,23 +1,30 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, RouterLink } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useAuthStore } from '../stores/auth';
 import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+import LocaleFlag from '../components/LocaleFlag.vue';
+import { useAuthStore } from '../stores/auth';

 const { t, locale } = useI18n();
-const auth = useAuthStore();
 const router = useRouter();
-const profile = ref<{ wallet?: { availableBalance: string; frozenBalance: string } } | null>(null);
-const transactions = ref<unknown[]>([]);
+const auth = useAuthStore();
+
+const locales = [
+  { code: 'zh-CN', label: '中文' },
+  { code: 'en-US', label: 'EN' },
+  { code: 'ms-MY', label: 'BM' },
+] as const;
+
+const profile = ref<{
+  username?: string;
+  wallet?: { availableBalance: string; frozenBalance: string };
+} | null>(null);

 onMounted(async () => {
-  const [prof, txns] = await Promise.all([
-    api.get('/player/profile'),
-    api.get('/player/wallet/transactions'),
-  ]);
-  profile.value = prof.data.data;
-  transactions.value = txns.data.data.items;
+  const { data } = await api.get('/player/profile');
+  profile.value = data.data;
 });

 async function changeLocale(code: string) {
@@ -33,54 +40,200 @@ function logout() {
 </script>

 <template>
-  <div>
-    <div class="card profile-card">
-      <div class="username">{{ auth.user?.username }}</div>
+  <div class="profile-page">
+    <div class="summary-card">
+      <p class="username">{{ profile?.username }}</p>
      <div class="balance-row">
-        <span>{{ t('wallet.balance') }}</span>
-        <span class="amount">{{ profile?.wallet?.availableBalance ?? '0' }}</span>
+        <span class="balance-label">
+          <LocaleFlag :locale="locale" :size="16" />
+          {{ t('wallet.balance') }}
+        </span>
+        <span class="amount">{{ formatMoney(profile?.wallet?.availableBalance, locale) }}</span>
      </div>
-      <div class="frozen">冻结: {{ profile?.wallet?.frozenBalance ?? '0' }}</div>
+      <p class="frozen">
+        {{ t('wallet.unsettled') }}: {{ formatMoney(profile?.wallet?.frozenBalance, locale) }}
+      </p>
    </div>

-    <div class="card">
-      <h3>语言</h3>
-      <div class="lang-btns">
-        <button @click="changeLocale('zh-CN')" :class="{ active: locale === 'zh-CN' }">中文</button>
-        <button @click="changeLocale('en-US')" :class="{ active: locale === 'en-US' }">English</button>
-        <button @click="changeLocale('ms-MY')" :class="{ active: locale === 'ms-MY' }">BM</button>
-      </div>
-    </div>
+    <section class="settings-group">
+      <RouterLink to="/profile/edit" class="settings-cell">
+        <span class="cell-label">{{ t('profile.edit') }}</span>
+        <span class="cell-chevron" aria-hidden="true">›</span>
+      </RouterLink>

-    <div class="card">
-      <h3>账变记录</h3>
-      <div v-for="tx in transactions as Array<{ transactionType: string; amount: string; createdAt: string }>" :key="(tx as { transactionId?: string }).transactionId" class="tx-row">
-        <span>{{ tx.transactionType }}</span>
-        <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">{{ tx.amount }}</span>
-        <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+      <div class="settings-cell settings-cell--stack">
+        <div class="cell-head">
+          <span class="cell-label">{{ t('profile.language') }}</span>
+        </div>
+        <div class="lang-segment" role="group" :aria-label="t('profile.language')">
+          <button
+            v-for="item in locales"
+            :key="item.code"
+            type="button"
+            class="lang-opt"
+            :class="{ active: locale === item.code }"
+            @click="changeLocale(item.code)"
+          >
+            <LocaleFlag :locale="item.code" :size="14" />
+            <span>{{ item.label }}</span>
+          </button>
+        </div>
      </div>
-    </div>
+    </section>

-    <button class="btn-logout" @click="logout">退出登录</button>
+    <button type="button" class="logout-btn" @click="logout">
+      {{ t('auth.logout') }}
+    </button>
  </div>
 </template>

 <style scoped>
-.profile-card { margin-bottom: 12px; }
-.username { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
-.balance-row { display: flex; justify-content: space-between; font-size: 16px; }
-.amount { color: #ffd700; font-weight: 700; }
-.frozen { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
-h3 { font-size: 14px; margin-bottom: 12px; }
-.lang-btns { display: flex; gap: 8px; }
-.lang-btns button {
-  flex: 1; padding: 8px; background: var(--bg-hover); color: #fff;
-  border-radius: 6px; border: 1px solid var(--border);
+.profile-page {
+  padding: 8px 0 12px;
+}
+
+.summary-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  margin-bottom: 12px;
+}
+
+.username {
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--primary-light);
+  margin-bottom: 10px;
+}
+
+.balance-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.balance-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.amount {
+  color: var(--primary-light);
+  font-weight: 800;
+  font-size: 20px;
+  white-space: nowrap;
+}
+
+.frozen {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.settings-group {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.settings-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 16px;
+  background: none;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom: 1px solid var(--border);
+}
+
+.settings-cell:last-child {
+  border-bottom: none;
+}
+
+.settings-cell:active {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.settings-cell--stack {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 16px 14px;
+  min-height: auto;
+}
+
+.cell-head {
+  display: flex;
+  align-items: center;
+}
+
+.cell-label {
+  color: var(--text);
+}
+
+.cell-chevron {
+  color: var(--text-muted);
+  font-size: 20px;
+  line-height: 1;
+  font-weight: 300;
+}
+
+.lang-segment {
+  display: flex;
+  gap: 6px;
+}
+
+.lang-opt {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 34px;
+  padding: 0 6px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: #0a0a0a;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.lang-opt.active {
+  border-color: var(--border-gold-soft);
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+}
+
+.logout-btn {
+  width: 100%;
+  margin-top: 12px;
+  min-height: 44px;
+  padding: 0 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--danger);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.logout-btn:active {
+  background: rgba(255, 69, 58, 0.08);
 }
-.lang-btns button.active { border-color: var(--primary); color: var(--primary); }
-.tx-row { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
-.pos { color: var(--primary); }
-.neg { color: var(--danger); }
-.tx-time { width: 100%; font-size: 11px; color: var(--text-muted); }
-.btn-logout { width: 100%; margin-top: 16px; padding: 12px; background: var(--bg-card); color: var(--danger); border-radius: 6px; border: 1px solid var(--border); }
 </style>
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+
+const { t, locale } = useI18n();
+const transactions = ref<
+  Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
+>([]);
+
+onMounted(async () => {
+  const { data } = await api.get('/player/wallet/transactions');
+  transactions.value = data.data.items ?? [];
+});
+</script>
+
+<template>
+  <div>
+    <h2 class="section-title">{{ t('nav.wallet') }}</h2>
+    <div v-if="transactions.length" class="card">
+      <div
+        v-for="tx in transactions"
+        :key="tx.transactionId ?? tx.createdAt"
+        class="tx-row"
+      >
+        <span>{{ tx.transactionType }}</span>
+        <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
+          {{ formatMoney(tx.amount, locale) }}
+        </span>
+        <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+      </div>
+    </div>
+    <div v-else class="empty">{{ t('wallet.no_records') }}</div>
+  </div>
+</template>
+
+<style scoped>
+.tx-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+.tx-row:last-child {
+  border-bottom: none;
+}
+.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
+.neg { color: var(--danger); font-weight: 700; }
+.tx-time { width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
+</style>
--- a/apps/player/src/vite-env.d.ts
+++ b/apps/player/src/vite-env.d.ts
@@ -3,3 +3,13 @@ declare module '*.vue' {
  const component: DefineComponent<object, object, unknown>;
  export default component;
 }
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
--- a/apps/player/tsconfig.json
+++ b/apps/player/tsconfig.json
@@ -4,6 +4,8 @@
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
    "jsx": "preserve",
    "paths": { "@/*": ["./src/*"] }
  },
--- a/apps/player/vite.config.ts
+++ b/apps/player/vite.config.ts
@@ -4,11 +4,16 @@ import { resolve } from 'path';

 export default defineConfig({
  plugins: [vue()],
+  resolve: {
+    // 避免删除 src 内过期 .js 后仍优先请求 index.js 导致 404
+    extensions: ['.ts', '.tsx', '.mjs', '.js', '.mts', '.jsx', '.json', '.vue'],
+  },
  publicDir: resolve(__dirname, '../../packages/shared/public'),
  server: {
    port: 5173,
    proxy: {
      '/api': { target: 'http://localhost:3000', changeOrigin: true },
+      '/uploads': { target: 'http://localhost:3000', changeOrigin: true },
    },
  },
 });