Merge branch 'main' into test-dev

backend/internal/service/gateway_service.go

@@ -313,7 +313,10 @@ func (s *GatewayService) SelectAccountForModelWithExclusions(ctx context.Context
 	// 2. 获取可调度账号列表（排除限流和过载的账号，仅限 Anthropic 平台）
 	var accounts []Account
 	var err error
-	if groupID != nil {
+	if s.cfg.RunMode == config.RunModeSimple {
+		// 简易模式：忽略 groupID，查询所有可用账号
+		accounts, err = s.accountRepo.ListSchedulableByPlatform(ctx, PlatformAnthropic)
+	} else if groupID != nil {
 		accounts, err = s.accountRepo.ListSchedulableByGroupIDAndPlatform(ctx, *groupID, PlatformAnthropic)
 	} else {
 		accounts, err = s.accountRepo.ListSchedulableByPlatform(ctx, PlatformAnthropic)
@@ -1065,6 +1068,12 @@ func (s *GatewayService) RecordUsage(ctx context.Context, input *RecordUsageInpu
 		log.Printf("Create usage log failed: %v", err)
 	}
 
+	if s.cfg != nil && s.cfg.RunMode == config.RunModeSimple {
+		log.Printf("[SIMPLE MODE] Usage recorded (not billed): user=%d, tokens=%d", usageLog.UserID, usageLog.TotalTokens())
+		s.deferredService.ScheduleLastUsedUpdate(account.ID)
+		return nil
+	}
+
 	// 根据计费类型执行扣费
 	if isSubscriptionBilling {
 		// 订阅模式：更新订阅用量（使用 TotalCost 原始费用，不考虑倍率）

backend/internal/service/openai_gateway_service.go

@@ -10,6 +10,7 @@ import (
 	"errors"
 	"fmt"
 	"io"
+	"log"
 	"net/http"
 	"regexp"
 	"strconv"
@@ -155,7 +156,10 @@ func (s *OpenAIGatewayService) SelectAccountForModelWithExclusions(ctx context.C
 	// 2. Get schedulable OpenAI accounts
 	var accounts []Account
 	var err error
-	if groupID != nil {
+	// 简易模式：忽略分组限制，查询所有可用账号
+	if s.cfg.RunMode == config.RunModeSimple {
+		accounts, err = s.accountRepo.ListSchedulableByPlatform(ctx, PlatformOpenAI)
+	} else if groupID != nil {
 		accounts, err = s.accountRepo.ListSchedulableByGroupIDAndPlatform(ctx, *groupID, PlatformOpenAI)
 	} else {
 		accounts, err = s.accountRepo.ListSchedulableByPlatform(ctx, PlatformOpenAI)
@@ -754,6 +758,12 @@ func (s *OpenAIGatewayService) RecordUsage(ctx context.Context, input *OpenAIRec
 
 	_ = s.usageLogRepo.Create(ctx, usageLog)
 
+	if s.cfg != nil && s.cfg.RunMode == config.RunModeSimple {
+		log.Printf("[SIMPLE MODE] Usage recorded (not billed): user=%d, tokens=%d", usageLog.UserID, usageLog.TotalTokens())
+		s.deferredService.ScheduleLastUsedUpdate(account.ID)
+		return nil
+	}
+
 	// Deduct based on billing type
 	if isSubscriptionBilling {
 		if cost.TotalCost > 0 {

backend/internal/service/user_service.go

@@ -164,6 +164,14 @@ func (s *UserService) UpdateBalance(ctx context.Context, userID int64, amount fl
 	return nil
 }
 
+// UpdateConcurrency 更新用户并发数（管理员功能）
+func (s *UserService) UpdateConcurrency(ctx context.Context, userID int64, concurrency int) error {
+	if err := s.userRepo.UpdateConcurrency(ctx, userID, concurrency); err != nil {
+		return fmt.Errorf("update concurrency: %w", err)
+	}
+	return nil
+}
+
 // UpdateStatus 更新用户状态（管理员功能）
 func (s *UserService) UpdateStatus(ctx context.Context, userID int64, status string) error {
 	user, err := s.userRepo.GetByID(ctx, userID)

deploy/.env.example

@@ -20,6 +20,10 @@ SERVER_PORT=8080
 # Server mode: release or debug
 SERVER_MODE=release
 
+# 运行模式: standard (默认) 或 simple (内部自用)
+# standard: 完整 SaaS 功能，包含计费/余额校验；simple: 隐藏 SaaS 功能并跳过计费/余额校验
+RUN_MODE=standard
+
 # Timezone
 TZ=Asia/Shanghai
 

deploy/config.example.yaml

@@ -13,6 +13,14 @@ server:
   # Mode: "debug" for development, "release" for production
   mode: "release"
 
+# =============================================================================
+# Run Mode Configuration
+# =============================================================================
+# Run mode: "standard" (default) or "simple" (for internal use)
+# - standard: Full SaaS features with billing/balance checks
+# - simple: Hides SaaS features and skips billing/balance checks
+run_mode: "standard"
+
 # =============================================================================
 # Database Configuration (PostgreSQL)
 # =============================================================================

deploy/docker-compose.yml

@@ -36,6 +36,7 @@ services:
       - SERVER_HOST=0.0.0.0
       - SERVER_PORT=8080
       - SERVER_MODE=${SERVER_MODE:-release}
+      - RUN_MODE=${RUN_MODE:-standard}
 
       # =======================================================================
       # Database Configuration (PostgreSQL)

frontend/src/App.vue

@@ -2,12 +2,14 @@
 import { RouterView, useRouter, useRoute } from 'vue-router'
 import { onMounted, watch } from 'vue'
 import Toast from '@/components/common/Toast.vue'
-import { useAppStore } from '@/stores'
+import { useAppStore, useAuthStore, useSubscriptionStore } from '@/stores'
 import { getSetupStatus } from '@/api/setup'
 
 const router = useRouter()
 const route = useRoute()
 const appStore = useAppStore()
+const authStore = useAuthStore()
+const subscriptionStore = useSubscriptionStore()
 
 /**
  * Update favicon dynamically
@@ -46,6 +48,24 @@ watch(
   { immediate: true }
 )
 
+// Watch for authentication state and manage subscription data
+watch(
+  () => authStore.isAuthenticated,
+  (isAuthenticated) => {
+    if (isAuthenticated) {
+      // User logged in: preload subscriptions and start polling
+      subscriptionStore.fetchActiveSubscriptions().catch((error) => {
+        console.error('Failed to preload subscriptions:', error)
+      })
+      subscriptionStore.startPolling()
+    } else {
+      // User logged out: clear data and stop polling
+      subscriptionStore.clear()
+    }
+  },
+  { immediate: true }
+)
+
 onMounted(async () => {
   // Check if setup is needed
   try {

frontend/src/api/admin/accounts.ts

@@ -30,6 +30,9 @@ export async function list(
     type?: string
     status?: string
     search?: string
+  },
+  options?: {
+    signal?: AbortSignal
   }
 ): Promise<PaginatedResponse<Account>> {
   const { data } = await apiClient.get<PaginatedResponse<Account>>('/admin/accounts', {
@@ -37,7 +40,8 @@ export async function list(
       page,
       page_size: pageSize,
       ...filters
-    }
+    },
+    signal: options?.signal
   })
   return data
 }

frontend/src/api/admin/groups.ts

@@ -26,6 +26,9 @@ export async function list(
     platform?: GroupPlatform
     status?: 'active' | 'inactive'
     is_exclusive?: boolean
+  },
+  options?: {
+    signal?: AbortSignal
   }
 ): Promise<PaginatedResponse<Group>> {
   const { data } = await apiClient.get<PaginatedResponse<Group>>('/admin/groups', {
@@ -33,7 +36,8 @@ export async function list(
       page,
       page_size: pageSize,
       ...filters
-    }
+    },
+    signal: options?.signal
   })
   return data
 }

frontend/src/api/admin/proxies.ts

@@ -20,6 +20,9 @@ export async function list(
     protocol?: string
     status?: 'active' | 'inactive'
     search?: string
+  },
+  options?: {
+    signal?: AbortSignal
   }
 ): Promise<PaginatedResponse<Proxy>> {
   const { data } = await apiClient.get<PaginatedResponse<Proxy>>('/admin/proxies', {
@@ -27,7 +30,8 @@ export async function list(
       page,
       page_size: pageSize,
       ...filters
-    }
+    },
+    signal: options?.signal
   })
   return data
 }

frontend/src/api/admin/redeem.ts

@@ -25,6 +25,9 @@ export async function list(
     type?: RedeemCodeType
     status?: 'active' | 'used' | 'expired' | 'unused'
     search?: string
+  },
+  options?: {
+    signal?: AbortSignal
   }
 ): Promise<PaginatedResponse<RedeemCode>> {
   const { data } = await apiClient.get<PaginatedResponse<RedeemCode>>('/admin/redeem-codes', {
@@ -32,7 +35,8 @@ export async function list(
       page,
       page_size: pageSize,
       ...filters
-    }
+    },
+    signal: options?.signal
   })
   return data
 }

frontend/src/api/admin/subscriptions.ts

@@ -27,6 +27,9 @@ export async function list(
     status?: 'active' | 'expired' | 'revoked'
     user_id?: number
     group_id?: number
+  },
+  options?: {
+    signal?: AbortSignal
   }
 ): Promise<PaginatedResponse<UserSubscription>> {
   const { data } = await apiClient.get<PaginatedResponse<UserSubscription>>(
@@ -36,7 +39,8 @@ export async function list(
         page,
         page_size: pageSize,
         ...filters
-      }
+      },
+      signal: options?.signal
     }
   )
   return data

frontend/src/api/admin/usage.ts

@@ -41,9 +41,13 @@ export interface AdminUsageQueryParams extends UsageQueryParams {
  * @param params - Query parameters for filtering and pagination
  * @returns Paginated list of usage logs
  */
-export async function list(params: AdminUsageQueryParams): Promise<PaginatedResponse<UsageLog>> {
+export async function list(
+  params: AdminUsageQueryParams,
+  options?: { signal?: AbortSignal }
+): Promise<PaginatedResponse<UsageLog>> {
   const { data } = await apiClient.get<PaginatedResponse<UsageLog>>('/admin/usage', {
-    params
+    params,
+    signal: options?.signal
   })
   return data
 }

frontend/src/api/admin/users.ts

@@ -11,6 +11,7 @@ import type { User, UpdateUserRequest, PaginatedResponse } from '@/types'
  * @param page - Page number (default: 1)
  * @param pageSize - Items per page (default: 20)
  * @param filters - Optional filters (status, role, search)
+ * @param options - Optional request options (signal)
  * @returns Paginated list of users
  */
 export async function list(
@@ -20,6 +21,9 @@ export async function list(
     status?: 'active' | 'disabled'
     role?: 'admin' | 'user'
     search?: string
+  },
+  options?: {
+    signal?: AbortSignal
   }
 ): Promise<PaginatedResponse<User>> {
   const { data } = await apiClient.get<PaginatedResponse<User>>('/admin/users', {
@@ -27,7 +31,8 @@ export async function list(
       page,
       page_size: pageSize,
       ...filters
-    }
+    },
+    signal: options?.signal
   })
   return data
 }

frontend/src/api/auth.ts

@@ -8,7 +8,7 @@ import type {
   LoginRequest,
   RegisterRequest,
   AuthResponse,
-  User,
+  CurrentUserResponse,
   SendVerifyCodeRequest,
   SendVerifyCodeResponse,
   PublicSettings
@@ -70,9 +70,8 @@ export async function register(userData: RegisterRequest): Promise<AuthResponse>
  * Get current authenticated user
  * @returns User profile data
  */
-export async function getCurrentUser(): Promise<User> {
-  const { data } = await apiClient.get<User>('/auth/me')
-  return data
+export async function getCurrentUser() {
+  return apiClient.get<CurrentUserResponse>('/auth/me')
 }
 
 /**

frontend/src/api/keys.ts

@@ -10,14 +10,19 @@ import type { ApiKey, CreateApiKeyRequest, UpdateApiKeyRequest, PaginatedRespons
  * List all API keys for current user
  * @param page - Page number (default: 1)
  * @param pageSize - Items per page (default: 10)
+ * @param options - Optional request options
  * @returns Paginated list of API keys
  */
 export async function list(
   page: number = 1,
-  pageSize: number = 10
+  pageSize: number = 10,
+  options?: {
+    signal?: AbortSignal
+  }
 ): Promise<PaginatedResponse<ApiKey>> {
   const { data } = await apiClient.get<PaginatedResponse<ApiKey>>('/keys', {
-    params: { page, page_size: pageSize }
+    params: { page, page_size: pageSize },
+    signal: options?.signal
   })
   return data
 }

frontend/src/api/usage.ts

@@ -90,8 +90,12 @@ export async function list(
  * @param params - Query parameters for filtering and pagination
  * @returns Paginated list of usage logs
  */
-export async function query(params: UsageQueryParams): Promise<PaginatedResponse<UsageLog>> {
+export async function query(
+  params: UsageQueryParams,
+  config: { signal?: AbortSignal } = {}
+): Promise<PaginatedResponse<UsageLog>> {
   const { data } = await apiClient.get<PaginatedResponse<UsageLog>>('/usage', {
+    ...config,
     params
   })
   return data
@@ -232,15 +236,22 @@ export interface BatchApiKeysUsageResponse {
 /**
  * Get batch usage stats for user's own API keys
  * @param apiKeyIds - Array of API key IDs
+ * @param options - Optional request options
  * @returns Usage stats map keyed by API key ID
  */
 export async function getDashboardApiKeysUsage(
-  apiKeyIds: number[]
+  apiKeyIds: number[],
+  options?: {
+    signal?: AbortSignal
+  }
 ): Promise<BatchApiKeysUsageResponse> {
   const { data } = await apiClient.post<BatchApiKeysUsageResponse>(
     '/usage/dashboard/api-keys-usage',
     {
       api_key_ids: apiKeyIds
+    },
+    {
+      signal: options?.signal
     }
   )
   return data

frontend/src/components/account/AccountStatsModal.vue

 <template>
-  <Modal :show="show" :title="t('admin.accounts.usageStatistics')" size="2xl" @close="handleClose">
+  <BaseDialog
+    :show="show"
+    :title="t('admin.accounts.usageStatistics')"
+    width="extra-wide"
+    @close="handleClose"
+  >
     <div class="space-y-6">
       <!-- Account Info Header -->
       <div
@@ -521,7 +526,7 @@
         </button>
       </div>
     </template>
-  </Modal>
+  </BaseDialog>
 </template>
 
 <script setup lang="ts">
@@ -539,7 +544,7 @@ import {
   Filler
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
 import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'
 import { adminAPI } from '@/api/admin'

frontend/src/components/account/AccountTestModal.vue

 <template>
-  <Modal
+  <BaseDialog
     :show="show"
     :title="t('admin.accounts.testAccountConnection')"
-    size="md"
+    width="normal"
     @close="handleClose"
   >
     <div class="space-y-4">
@@ -273,13 +273,13 @@
         </button>
       </div>
     </template>
-  </Modal>
+  </BaseDialog>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import { useClipboard } from '@/composables/useClipboard'
 import { adminAPI } from '@/api/admin'
 import type { Account, ClaudeModel } from '@/types'

frontend/src/components/account/BulkEditAccountModal.vue

 <template>
-  <Modal :show="show" :title="t('admin.accounts.bulkEdit.title')" size="lg" @close="handleClose">
-    <form class="space-y-5" @submit.prevent="handleSubmit">
+  <BaseDialog
+    :show="show"
+    :title="t('admin.accounts.bulkEdit.title')"
+    width="wide"
+    @close="handleClose"
+  >
+    <form id="bulk-edit-account-form" class="space-y-5" @submit.prevent="handleSubmit">
       <!-- Info -->
       <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
         <p class="text-sm text-blue-700 dark:text-blue-400">
@@ -19,20 +24,30 @@
       <!-- Base URL (API Key only) -->
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('admin.accounts.baseUrl') }}</label>
+          <label
+            id="bulk-edit-base-url-label"
+            class="input-label mb-0"
+            for="bulk-edit-base-url-enabled"
+          >
+            {{ t('admin.accounts.baseUrl') }}
+          </label>
           <input
             v-model="enableBaseUrl"
+            id="bulk-edit-base-url-enabled"
             type="checkbox"
+            aria-controls="bulk-edit-base-url"
             class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
           />
         </div>
         <input
           v-model="baseUrl"
+          id="bulk-edit-base-url"
           type="text"
           :disabled="!enableBaseUrl"
           class="input"
           :class="!enableBaseUrl && 'cursor-not-allowed opacity-50'"
           :placeholder="t('admin.accounts.bulkEdit.baseUrlPlaceholder')"
+          aria-labelledby="bulk-edit-base-url-label"
         />
         <p class="input-hint">
           {{ t('admin.accounts.bulkEdit.baseUrlNotice') }}
@@ -42,15 +57,28 @@
       <!-- Model restriction -->
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('admin.accounts.modelRestriction') }}</label>
+          <label
+            id="bulk-edit-model-restriction-label"
+            class="input-label mb-0"
+            for="bulk-edit-model-restriction-enabled"
+          >
+            {{ t('admin.accounts.modelRestriction') }}
+          </label>
           <input
             v-model="enableModelRestriction"
+            id="bulk-edit-model-restriction-enabled"
             type="checkbox"
+            aria-controls="bulk-edit-model-restriction-body"
             class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
           />
         </div>
 
-        <div :class="!enableModelRestriction && 'pointer-events-none opacity-50'">
+        <div
+          id="bulk-edit-model-restriction-body"
+          :class="!enableModelRestriction && 'pointer-events-none opacity-50'"
+          role="group"
+          aria-labelledby="bulk-edit-model-restriction-label"
+        >
           <!-- Mode Toggle -->
           <div class="mb-4 flex gap-2">
             <button
@@ -267,19 +295,27 @@
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="mb-3 flex items-center justify-between">
           <div>
-            <label class="input-label mb-0">{{ t('admin.accounts.customErrorCodes') }}</label>
+            <label
+              id="bulk-edit-custom-error-codes-label"
+              class="input-label mb-0"
+              for="bulk-edit-custom-error-codes-enabled"
+            >
+              {{ t('admin.accounts.customErrorCodes') }}
+            </label>
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {{ t('admin.accounts.customErrorCodesHint') }}
             </p>
           </div>
           <input
             v-model="enableCustomErrorCodes"
+            id="bulk-edit-custom-error-codes-enabled"
             type="checkbox"
+            aria-controls="bulk-edit-custom-error-codes-body"
             class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
           />
         </div>
 
-        <div v-if="enableCustomErrorCodes" class="space-y-3">
+        <div v-if="enableCustomErrorCodes" id="bulk-edit-custom-error-codes-body" class="space-y-3">
           <div class="rounded-lg bg-amber-50 p-3 dark:bg-amber-900/20">
             <p class="text-xs text-amber-700 dark:text-amber-400">
               <svg
@@ -321,11 +357,13 @@
           <div class="flex items-center gap-2">
             <input
               v-model="customErrorCodeInput"
+              id="bulk-edit-custom-error-code-input"
               type="number"
               min="100"
               max="599"
               class="input flex-1"
               :placeholder="t('admin.accounts.enterErrorCode')"
+              aria-labelledby="bulk-edit-custom-error-codes-label"
               @keyup.enter="addCustomErrorCode"
             />
             <button type="button" class="btn btn-secondary px-3" @click="addCustomErrorCode">
@@ -374,20 +412,26 @@
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="flex items-center justify-between">
           <div class="flex-1 pr-4">
-            <label class="input-label mb-0">{{
-              t('admin.accounts.interceptWarmupRequests')
-            }}</label>
+            <label
+              id="bulk-edit-intercept-warmup-label"
+              class="input-label mb-0"
+              for="bulk-edit-intercept-warmup-enabled"
+            >
+              {{ t('admin.accounts.interceptWarmupRequests') }}
+            </label>
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {{ t('admin.accounts.interceptWarmupRequestsDesc') }}
             </p>
           </div>
           <input
             v-model="enableInterceptWarmup"
+            id="bulk-edit-intercept-warmup-enabled"
             type="checkbox"
+            aria-controls="bulk-edit-intercept-warmup-body"
             class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
           />
         </div>
-        <div v-if="enableInterceptWarmup" class="mt-3">
+        <div v-if="enableInterceptWarmup" id="bulk-edit-intercept-warmup-body" class="mt-3">
           <button
             type="button"
             :class="[
@@ -409,15 +453,27 @@
       <!-- Proxy -->
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('admin.accounts.proxy') }}</label>
+          <label
+            id="bulk-edit-proxy-label"
+            class="input-label mb-0"
+            for="bulk-edit-proxy-enabled"
+          >
+            {{ t('admin.accounts.proxy') }}
+          </label>
           <input
             v-model="enableProxy"
+            id="bulk-edit-proxy-enabled"
             type="checkbox"
+            aria-controls="bulk-edit-proxy-body"
             class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
           />
         </div>
-        <div :class="!enableProxy && 'pointer-events-none opacity-50'">
-          <ProxySelector v-model="proxyId" :proxies="proxies" />
+        <div id="bulk-edit-proxy-body" :class="!enableProxy && 'pointer-events-none opacity-50'">
+          <ProxySelector
+            v-model="proxyId"
+            :proxies="proxies"
+            aria-labelledby="bulk-edit-proxy-label"
+          />
         </div>
       </div>
 
@@ -425,38 +481,58 @@
       <div class="grid grid-cols-2 gap-4 border-t border-gray-200 pt-4 dark:border-dark-600">
         <div>
           <div class="mb-3 flex items-center justify-between">
-            <label class="input-label mb-0">{{ t('admin.accounts.concurrency') }}</label>
+            <label
+              id="bulk-edit-concurrency-label"
+              class="input-label mb-0"
+              for="bulk-edit-concurrency-enabled"
+            >
+              {{ t('admin.accounts.concurrency') }}
+            </label>
             <input
               v-model="enableConcurrency"
+              id="bulk-edit-concurrency-enabled"
               type="checkbox"
+              aria-controls="bulk-edit-concurrency"
               class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
             />
           </div>
           <input
             v-model.number="concurrency"
+            id="bulk-edit-concurrency"
             type="number"
             min="1"
             :disabled="!enableConcurrency"
             class="input"
             :class="!enableConcurrency && 'cursor-not-allowed opacity-50'"
+            aria-labelledby="bulk-edit-concurrency-label"
           />
         </div>
         <div>
           <div class="mb-3 flex items-center justify-between">
-            <label class="input-label mb-0">{{ t('admin.accounts.priority') }}</label>
+            <label
+              id="bulk-edit-priority-label"
+              class="input-label mb-0"
+              for="bulk-edit-priority-enabled"
+            >
+              {{ t('admin.accounts.priority') }}
+            </label>
             <input
               v-model="enablePriority"
+              id="bulk-edit-priority-enabled"
               type="checkbox"
+              aria-controls="bulk-edit-priority"
               class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
             />
           </div>
           <input
             v-model.number="priority"
+            id="bulk-edit-priority"
             type="number"
             min="1"
             :disabled="!enablePriority"
             class="input"
             :class="!enablePriority && 'cursor-not-allowed opacity-50'"
+            aria-labelledby="bulk-edit-priority-label"
           />
         </div>
       </div>
@@ -464,39 +540,69 @@
       <!-- Status -->
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('common.status') }}</label>
+          <label
+            id="bulk-edit-status-label"
+            class="input-label mb-0"
+            for="bulk-edit-status-enabled"
+          >
+            {{ t('common.status') }}
+          </label>
           <input
             v-model="enableStatus"
+            id="bulk-edit-status-enabled"
             type="checkbox"
+            aria-controls="bulk-edit-status"
             class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
           />
         </div>
-        <div :class="!enableStatus && 'pointer-events-none opacity-50'">
-          <Select v-model="status" :options="statusOptions" />
+        <div id="bulk-edit-status" :class="!enableStatus && 'pointer-events-none opacity-50'">
+          <Select
+            v-model="status"
+            :options="statusOptions"
+            aria-labelledby="bulk-edit-status-label"
+          />
         </div>
       </div>
 
       <!-- Groups -->
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('nav.groups') }}</label>
+          <label
+            id="bulk-edit-groups-label"
+            class="input-label mb-0"
+            for="bulk-edit-groups-enabled"
+          >
+            {{ t('nav.groups') }}
+          </label>
           <input
             v-model="enableGroups"
+            id="bulk-edit-groups-enabled"
             type="checkbox"
+            aria-controls="bulk-edit-groups"
             class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
           />
         </div>
-        <div :class="!enableGroups && 'pointer-events-none opacity-50'">
-          <GroupSelector v-model="groupIds" :groups="groups" />
+        <div id="bulk-edit-groups" :class="!enableGroups && 'pointer-events-none opacity-50'">
+          <GroupSelector
+            v-model="groupIds"
+            :groups="groups"
+            aria-labelledby="bulk-edit-groups-label"
+          />
         </div>
       </div>
+    </form>
 
-      <!-- Action buttons -->
-      <div class="flex justify-end gap-3 pt-4">
+    <template #footer>
+      <div class="flex justify-end gap-3">
         <button type="button" class="btn btn-secondary" @click="handleClose">
           {{ t('common.cancel') }}
         </button>
-        <button type="submit" :disabled="submitting" class="btn btn-primary">
+        <button
+          type="submit"
+          form="bulk-edit-account-form"
+          :disabled="submitting"
+          class="btn btn-primary"
+        >
           <svg
             v-if="submitting"
             class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -522,8 +628,8 @@
           }}
         </button>
       </div>
-    </form>
-  </Modal>
+    </template>
+  </BaseDialog>
 </template>
 
 <script setup lang="ts">
@@ -532,7 +638,7 @@ import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
 import type { Proxy, Group } from '@/types'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import Select from '@/components/common/Select.vue'
 import ProxySelector from '@/components/common/ProxySelector.vue'
 import GroupSelector from '@/components/common/GroupSelector.vue'