diff --git a/frontend/src/pages/admin/agents/[id].vue b/frontend/src/pages/admin/agents/[id].vue
index 90f101a..71adba1 100644
--- a/frontend/src/pages/admin/agents/[id].vue
+++ b/frontend/src/pages/admin/agents/[id].vue
@@ -2,355 +2,312 @@
 import { Icon } from '@iconify/vue'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import type { Agent } from './data/schema'
-
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
-import DataTable from './components/data-table.vue'
 import api from '@/services/api'
 
-const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
 
+interface Agent {
+  id: number
+  username: string
+  email: string
+  status: string
+}
+
+const agentId = computed(() => route.params.id as string)
 const loading = ref(true)
+const saving = ref(false)
 const agents = ref<Agent[]>([])
-const tableRef = ref<InstanceType<typeof DataTable> | null>(null)
-const searchFilter = ref('')
-const statusFilter = ref<string>('')
-const viewMode = ref<'tree' | 'list'>('tree')
 
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<Agent | null>(null)
-const batchDeleteDialogOpen = ref(false)
-const batchDeleteIds = ref<number[]>([])
-
-const filteredAgents = computed(() => {
-  let result = agents.value
-  
-  if (statusFilter.value) {
-    const filterByStatus = (items: Agent[]): Agent[] => {
-      return items.reduce((acc: Agent[], item) => {
-        const matches = item.status === statusFilter.value
-        const filteredChildren = item.children ? filterByStatus(item.children) : []
-        
-        if (matches || filteredChildren.length > 0) {
-          acc.push({
-            ...item,
-            children: filteredChildren.length > 0 ? filteredChildren : item.children,
-          })
-        }
-        return acc
-      }, [])
-    }
-    result = filterByStatus(result)
-  }
-  
-  if (searchFilter.value) {
-    const search = searchFilter.value.toLowerCase()
-    const filterTree = (items: Agent[]): Agent[] => {
-      return items.reduce((acc: Agent[], item) => {
-        const matchesSearch = 
-          item.username?.toLowerCase().includes(search) ||
-          item.email?.toLowerCase().includes(search) ||
-          item.parent_agent_name?.toLowerCase().includes(search)
-        
-        const filteredChildren = item.children ? filterTree(item.children) : []
-        
-        if (matchesSearch || filteredChildren.length > 0) {
-          acc.push({
-            ...item,
-            children: filteredChildren.length > 0 ? filteredChildren : item.children,
-          })
-        }
-        
-        return acc
-      }, [])
-    }
-    result = filterTree(result)
-  }
-  
-  return result
+const form = ref({
+  username: '',
+  email: '',
+  password: '',
+  parent_agent_id: '',
+  can_create_agent: false,
+  balance: 0,
 })
 
-const totalAgents = computed(() => {
-  const countNodes = (items: Agent[]): number => {
-    return items.reduce((acc, item) => {
-      return acc + 1 + (item.children ? countNodes(item.children) : 0)
-    }, 0)
-  }
-  return countNodes(agents.value)
-})
-
-const activeCount = computed(() => {
-  const countByStatus = (items: Agent[], status: string): number => {
-    return items.reduce((acc, item) => {
-      const self = item.status === status ? 1 : 0
-      const children = item.children ? countByStatus(item.children, status) : 0
-      return acc + self + children
-    }, 0)
-  }
-  return countByStatus(agents.value, 'active')
-})
-
-const inactiveCount = computed(() => {
-  const countByStatus = (items: Agent[], status: string): number => {
-    return items.reduce((acc, item) => {
-      const self = item.status === status ? 1 : 0
-      const children = item.children ? countByStatus(item.children, status) : 0
-      return acc + self + children
-    }, 0)
-  }
-  return countByStatus(agents.value, 'inactive')
-})
-
-const bannedCount = computed(() => {
-  const countByStatus = (items: Agent[], status: string): number => {
-    return items.reduce((acc, item) => {
-      const self = item.status === status ? 1 : 0
-      const children = item.children ? countByStatus(item.children, status) : 0
-      return acc + self + children
-    }, 0)
-  }
-  return countByStatus(agents.value, 'banned')
-})
-
-const statusOptions = computed(() => [
-  { label: t('admin.agents.status.active'), value: 'active' },
-  { label: t('admin.agents.status.inactive'), value: 'inactive' },
-  { label: t('admin.agents.status.banned'), value: 'banned' },
-])
-
-async function fetchAgents() {
+async function fetchAgent() {
   loading.value = true
   try {
-    const endpoint = viewMode.value === 'tree' ? '/dev/agents/tree' : '/dev/agents'
-    const data = await api.get<{ tree?: Agent[], agents?: Agent[], total: number }>(endpoint)
-    if (viewMode.value === 'tree') {
-      agents.value = data?.tree || []
-    } else {
-      agents.value = data?.agents || []
+    const data = await api.get<any>(`/dev/agents/${agentId.value}`)
+    const agent = data?.agent || data
+    if (agent) {
+      form.value.username = agent.username || ''
+      form.value.email = agent.email || ''
+      form.value.parent_agent_id = agent.parent_agent_id ? String(agent.parent_agent_id) : 'none'
+      form.value.can_create_agent = agent.can_create_agent || false
+      form.value.balance = agent.balance || 0
     }
-  } catch (error) {
-    console.error('获取代理列表失败:', error)
-    agents.value = []
-  } finally {
+  }
+  catch (error) {
+    console.error('获取代理信息失败:', error)
+    toast.error(t('admin.agents.editFailed'))
+  }
+  finally {
     loading.value = false
   }
 }
 
-function goToCreate() {
-  router.push('/admin/agents/create')
-}
-
-function toggleViewMode() {
-  viewMode.value = viewMode.value === 'tree' ? 'list' : 'tree'
-  fetchAgents()
-}
-
-function handleEdit(agent: Agent) {
-  router.push(`/admin/agents/${agent.id}/edit`)
-}
-
-async function handleToggleStatus(agent: Agent) {
+async function fetchAgents() {
   try {
-    const newStatus = agent.status === 'banned' ? 'active' : 'banned'
-    await api.put(`/dev/agents/${agent.id}/status`, { status: newStatus })
-    toast.success(t('admin.agents.statusUpdateSuccess'))
-    fetchAgents()
-  } catch (error: any) {
-    console.error('切换代理状态失败:', error)
-    toast.error(error.message || t('admin.agents.statusUpdateFailed'))
+    const data = await api.get<{ agents?: Agent[], total: number }>('/dev/agents')
+    agents.value = data?.agents || []
+  }
+  catch (error) {
+    console.error('获取代理列表失败:', error)
   }
 }
 
-function confirmDelete(agent: Agent) {
-  deleteTarget.value = agent
-  deleteDialogOpen.value = true
-}
-
-async function handleDelete() {
-  if (!deleteTarget.value) return
-  
-  try {
-    await api.delete(`/dev/agents/${deleteTarget.value.id}`)
-    toast.success(t('admin.agents.deleteSuccess'))
-    fetchAgents()
-  } catch (error: any) {
-    console.error('删除代理失败:', error)
-    toast.error(error.message || t('admin.agents.deleteFailed'))
-  } finally {
-    deleteTarget.value = null
+const selectedParentAgent = computed(() => {
+  if (form.value.parent_agent_id && form.value.parent_agent_id !== 'none') {
+    return agents.value.find(a => String(a.id) === form.value.parent_agent_id)
   }
-}
+  return null
+})
 
-function confirmBatchDelete(ids: number[]) {
-  batchDeleteIds.value = ids
-  batchDeleteDialogOpen.value = true
-}
-
-async function handleBatchDelete() {
-  try {
-    await api.delete('/dev/agents/batch', { agent_ids: batchDeleteIds.value } as any)
-    toast.success(t('admin.agents.batchDeleteSuccess'))
-    fetchAgents()
-  } catch (error: any) {
-    console.error('批量删除失败:', error)
-    toast.error(error.message || t('admin.agents.batchDeleteFailed'))
-  } finally {
-    batchDeleteIds.value = []
+async function handleSave() {
+  if (!form.value.username) {
+    toast.error(t('admin.agents.create.usernameRequired'))
+    return
   }
-}
 
-async function batchToggleStatus(ids: number[], status: string) {
+  saving.value = true
   try {
-    await api.post('/dev/agents/batch/status', { agent_ids: ids, status })
-    toast.success(t('admin.agents.batchUpdateSuccess'))
-    fetchAgents()
-  } catch (error: any) {
-    console.error('批量更新状态失败:', error)
-    toast.error(error.message || t('admin.agents.batchUpdateFailed'))
+    const payload: any = {
+      username: form.value.username,
+      can_create_agent: form.value.can_create_agent,
+      balance: form.value.balance,
+    }
+
+    if (form.value.email) {
+      payload.email = form.value.email
+    }
+
+    if (form.value.password) {
+      payload.password = form.value.password
+    }
+
+    if (form.value.parent_agent_id && form.value.parent_agent_id !== 'none') {
+      payload.parent_agent_id = Number.parseInt(form.value.parent_agent_id)
+    }
+
+    await api.put(`/dev/agents/${agentId.value}`, payload)
+    toast.success(t('admin.agents.editSuccess'))
+    router.push('/admin/agents')
+  }
+  catch (error: any) {
+    console.error('更新代理失败:', error)
+    toast.error(error.message || t('admin.agents.editFailed'))
+  }
+  finally {
+    saving.value = false
   }
 }
 
 onMounted(() => {
   fetchAgents()
+  fetchAgent()
 })
 </script>
 
 <template>
   <BasicPage
-    :title="t('admin.agents.title')"
-    :description="t('admin.agents.description')"
+    :title="t('admin.agents.edit')"
+    :description="t('admin.agents.create.description')"
+    :breadcrumbs="[
+      { title: t('admin.agents.title'), href: '/admin/agents' },
+      { title: t('admin.agents.edit') },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton @click="goToCreate">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        {{ t('admin.agents.addAgent') }}
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.agents.totalAgents') }}
-            </UiCardTitle>
-            <Icon icon="lucide:users" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ totalAgents }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.agents.status.active') }}
-            </UiCardTitle>
-            <Icon icon="lucide:check-circle" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ activeCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.agents.status.inactive') }}
-            </UiCardTitle>
-            <Icon icon="lucide:clock" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ inactiveCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.agents.status.banned') }}
-            </UiCardTitle>
-            <Icon icon="lucide:ban" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ bannedCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            ref="tableRef"
-            :loading="loading"
-            :data="filteredAgents"
-            :search-filter="searchFilter"
-            :view-mode="viewMode"
-            :on-toggle-status="handleToggleStatus"
-            :on-edit="handleEdit"
-            :on-delete="confirmDelete"
-            @refresh="fetchAgents"
-            @toggle-view="toggleViewMode"
-            @update:search-filter="searchFilter = $event"
-            @batch-unban="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.filter((r: any) => r.original.status === 'banned').map((r: any) => r.original.id) || [], 'active')"
-            @batch-ban="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.filter((r: any) => r.original.status !== 'banned').map((r: any) => r.original.id) || [], 'banned')"
-            @batch-delete="confirmBatchDelete(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="statusFilter"
-                :title="t('admin.agents.columns.status')"
-                :options="statusOptions"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      :confirm-button-text="t('common.delete')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleDelete"
-    >
-      <template #title>
-        {{ t('admin.agents.deleteAgent') }}
-      </template>
-      <template #description>
-        {{ t('admin.agents.deleteAgentConfirm', { username: deleteTarget?.username }) }}
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:user-plus" class="size-5" />
+                {{ t('admin.agents.create.basicInfo') }}
+              </UiCardTitle>
+              <UiCardDescription>{{ t('admin.agents.create.basicInfoDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel for="username">
+                  {{ t('admin.agents.form.username') }}
+                </UiLabel>
+                <UiInput
+                  id="username"
+                  v-model="form.username"
+                  :placeholder="t('admin.agents.form.usernamePlaceholder')"
+                />
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDeleteDialogOpen"
-      destructive
-      :confirm-button-text="t('common.delete')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleBatchDelete"
-    >
-      <template #title>
-        {{ t('admin.agents.batchDeleteAgents') }}
-      </template>
-      <template #description>
-        {{ t('admin.agents.batchDeleteConfirm', { count: batchDeleteIds.length }) }}
-      </template>
-    </ConfirmDialog>
+              <div class="space-y-2">
+                <UiLabel for="email">
+                  {{ t('admin.agents.form.email') }}
+                </UiLabel>
+                <UiInput
+                  id="email"
+                  v-model="form.email"
+                  type="email"
+                  :placeholder="t('admin.agents.form.emailPlaceholder')"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="password">
+                  {{ t('admin.agents.form.password') }}
+                </UiLabel>
+                <UiInput
+                  id="password"
+                  v-model="form.password"
+                  type="password"
+                  :placeholder="t('admin.agents.form.passwordPlaceholder')"
+                />
+                <p class="text-xs text-muted-foreground">
+                  留空则不修改密码
+                </p>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:settings-2" class="size-5" />
+                {{ t('admin.agents.create.agentConfig') }}
+              </UiCardTitle>
+              <UiCardDescription>{{ t('admin.agents.create.agentConfigDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel for="parent_agent">
+                  {{ t('admin.agents.form.parentAgent') }}
+                </UiLabel>
+                <UiSelect v-model="form.parent_agent_id">
+                  <UiSelectTrigger>
+                    <UiSelectValue :placeholder="t('admin.agents.form.selectParentAgent')" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem value="none">
+                      {{ t('admin.agents.form.noParent') }}
+                    </UiSelectItem>
+                    <UiSelectItem
+                      v-for="agent in agents"
+                      :key="agent.id"
+                      :value="String(agent.id)"
+                    >
+                      {{ agent.username }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="balance">
+                  {{ t('admin.agents.form.balance') }}
+                </UiLabel>
+                <div class="flex items-center gap-4">
+                  <UiNumberField
+                    v-model="form.balance"
+                    :min="0"
+                    :step="0.01"
+                    class="flex-1 max-w-[200px]"
+                  >
+                    <UiNumberFieldContent>
+                      <UiNumberFieldDecrement />
+                      <UiNumberFieldInput />
+                      <UiNumberFieldIncrement />
+                    </UiNumberFieldContent>
+                  </UiNumberField>
+                  <span class="text-sm text-muted-foreground">¥</span>
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between">
+                <div class="space-y-0.5">
+                  <UiLabel>{{ t('admin.agents.form.canCreateAgent') }}</UiLabel>
+                  <p class="text-xs text-muted-foreground">
+                    {{ t('admin.agents.create.canCreateAgentHint') }}
+                  </p>
+                </div>
+                <UiSwitch v-model="form.can_create_agent" />
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:receipt" class="size-5" />
+                {{ t('admin.agents.create.preview') }}
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.agents.form.username') }}</span>
+                  <span>{{ form.username || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.agents.form.email') }}</span>
+                  <span>{{ form.email || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.agents.form.canCreateAgent') }}</span>
+                  <span>{{ form.can_create_agent ? t('common.yes') : t('common.no') }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.agents.form.parentAgent') }}</span>
+                  <span>{{ selectedParentAgent?.username || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.agents.form.balance') }}</span>
+                  <span>¥{{ form.balance.toFixed(2) }}</span>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="saving || !form.username"
+                  @click="handleSave"
+                >
+                  <Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  {{ t('admin.agents.create.saveBtn') || '保存修改' }}
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  {{ t('admin.agents.create.cancel') }}
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/announcements/[id].vue b/frontend/src/pages/admin/announcements/[id].vue
index d9a2cc7..73d4700 100644
--- a/frontend/src/pages/admin/announcements/[id].vue
+++ b/frontend/src/pages/admin/announcements/[id].vue
@@ -1,19 +1,11 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import type { Announcement } from '@/pages/admin/announcements/data/schema'
-
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
-import DataTable from '@/pages/admin/announcements/components/data-table.vue'
-import api, { BASE_URL } from '@/services/api'
-
-const { t } = useI18n()
+import api from '@/services/api'
 
 interface Application {
   id: number
@@ -23,70 +15,57 @@ interface Application {
 const route = useRoute()
 const router = useRouter()
 
+const announcementId = computed(() => route.params.id as string)
 const loading = ref(true)
-const announcements = ref<Announcement[]>([])
+const saving = ref(false)
 const applications = ref<Application[]>([])
-const tableRef = ref()
 
-const appFilter = ref<string>('')
-const typeFilter = ref<string>('')
-const statusFilter = ref<string>('')
-const searchFilter = ref<string>('')
-
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<Announcement | null>(null)
-const batchDeleteDialogOpen = ref(false)
-const batchDeleteIds = ref<number[]>([])
-
-const applicationOptions = computed(() => {
-  return applications.value.map(app => ({
-    label: app.name,
-    value: String(app.id),
-  }))
+const formData = ref({
+  application_id: '',
+  title: '',
+  content: '',
+  type: 'info' as 'info' | 'warning' | 'error' | 'success',
+  status: 'active' as 'active' | 'inactive',
+  is_top: false,
 })
 
-const typeOptions = computed(() => [
-  { label: t('admin.announcements.types.info'), value: 'info' },
-  { label: t('admin.announcements.types.warning'), value: 'warning' },
-  { label: t('admin.announcements.types.error'), value: 'error' },
-  { label: t('admin.announcements.types.success'), value: 'success' },
-])
+const typeOptions = [
+  { value: 'info', label: '信息', color: 'bg-blue-500', desc: '普通通知信息' },
+  { value: 'warning', label: '警告', color: 'bg-yellow-500', desc: '需要注意的内容' },
+  { value: 'error', label: '错误', color: 'bg-red-500', desc: '错误或故障通知' },
+  { value: 'success', label: '成功', color: 'bg-green-500', desc: '成功状态通知' },
+]
 
-const statusOptions = computed(() => [
-  { label: t('admin.announcements.statuses.active'), value: 'active' },
-  { label: t('admin.announcements.statuses.inactive'), value: 'inactive' },
-])
-
-const filteredAnnouncements = computed(() => {
-  let result = announcements.value
-
-  if (appFilter.value) {
-    result = result.filter(a => String(a.application_id) === appFilter.value)
-  }
-
-  if (typeFilter.value) {
-    result = result.filter(a => a.type === typeFilter.value)
-  }
-
-  if (statusFilter.value) {
-    result = result.filter(a => a.status === statusFilter.value)
-  }
-
-  if (searchFilter.value) {
-    const search = searchFilter.value.toLowerCase()
-    result = result.filter(a =>
-      a.title?.toLowerCase().includes(search)
-      || a.content?.toLowerCase().includes(search)
-      || a.application_name?.toLowerCase().includes(search),
-    )
-  }
-
-  return result
+const selectedApplication = computed(() => {
+  return applications.value.find(app => String(app.id) === formData.value.application_id)
 })
 
-const activeCount = computed(() => filteredAnnouncements.value.filter(a => a.status === 'active').length)
-const inactiveCount = computed(() => filteredAnnouncements.value.filter(a => a.status === 'inactive').length)
-const topCount = computed(() => filteredAnnouncements.value.filter(a => a.is_top).length)
+const selectedType = computed(() => {
+  return typeOptions.find(t => t.value === formData.value.type)
+})
+
+async function fetchAnnouncement() {
+  loading.value = true
+  try {
+    const data = await api.get<any>(`/dev/announcements/${announcementId.value}`)
+    const ann = data?.announcement || data
+    if (ann) {
+      formData.value.application_id = String(ann.application_id || '')
+      formData.value.title = ann.title || ''
+      formData.value.content = ann.content || ''
+      formData.value.type = ann.type || 'info'
+      formData.value.status = ann.status || 'active'
+      formData.value.is_top = ann.is_top || false
+    }
+  }
+  catch (error) {
+    console.error('获取公告信息失败:', error)
+    toast.error('获取公告信息失败')
+  }
+  finally {
+    loading.value = false
+  }
+}
 
 async function fetchApplications() {
   try {
@@ -98,257 +77,237 @@ async function fetchApplications() {
   }
 }
 
-async function fetchAnnouncements() {
-  loading.value = true
-  try {
-    const data = await api.get<{ announcements: Announcement[], total: number }>('/dev/announcements')
-    announcements.value = data?.announcements || []
-  }
-  catch (error) {
-    console.error('加载公告失败:', error)
-    announcements.value = []
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-function goToCreate() {
-  router.push('/admin/announcements/create')
-}
-
-function goToEdit(announcement: Announcement) {
-  router.push(`/admin/announcements/${announcement.id}`)
-}
-
-async function toggleTop(announcement: Announcement) {
-  try {
-    await api.put(`/dev/applications/${announcement.application_id}/announcements/${announcement.id}/top`)
-    toast.success(announcement.is_top ? t('admin.announcements.unpinned') : t('admin.announcements.pinned'))
-    fetchAnnouncements()
-  }
-  catch (error: any) {
-    console.error('切换置顶失败:', error)
-    toast.error(error.message || t('common.error'))
-  }
-}
-
-function confirmDelete(announcement: Announcement) {
-  deleteTarget.value = announcement
-  deleteDialogOpen.value = true
-}
-
-async function handleDelete() {
-  if (!deleteTarget.value)
+async function handleSubmit() {
+  if (!formData.value.application_id) {
+    toast.error('请选择应用')
     return
-
-  try {
-    await api.delete(`/dev/applications/${deleteTarget.value.application_id}/announcements/${deleteTarget.value.id}`)
-    toast.success(t('admin.announcements.deleteSuccess'))
-    fetchAnnouncements()
   }
-  catch (error: any) {
-    console.error('删除公告失败:', error)
-    toast.error(error.message || t('common.error'))
-  }
-  finally {
-    deleteTarget.value = null
-  }
-}
-
-function handleExport() {
-  const token = localStorage.getItem('token')
-  const params = new URLSearchParams()
-  if (appFilter.value)
-    params.append('application_id', appFilter.value)
-  if (typeFilter.value)
-    params.append('type', typeFilter.value)
-  if (statusFilter.value)
-    params.append('status', statusFilter.value)
-
-  const queryString = params.toString()
-  const url = `${BASE_URL}/dev/announcements/export?${queryString}&token=${token}`
-  window.open(url, '_blank')
-}
-
-function handleBatchExport(ids: number[]) {
-  if (!ids.length)
+  if (!formData.value.title) {
+    toast.error('请输入公告标题')
     return
-  const token = localStorage.getItem('token')
-  const params = new URLSearchParams()
-  params.append('ids', ids.join(','))
-  const url = `${BASE_URL}/dev/announcements/export?${params.toString()}&token=${token}`
-  window.open(url, '_blank')
-}
+  }
+  if (!formData.value.content) {
+    toast.error('请输入公告内容')
+    return
+  }
 
-function confirmBatchDelete(ids: number[]) {
-  batchDeleteIds.value = ids
-  batchDeleteDialogOpen.value = true
-}
-
-async function handleBatchDelete() {
+  saving.value = true
   try {
-    await api.delete('/dev/announcements/batch', { ids: batchDeleteIds.value } as any)
-    toast.success(t('admin.announcements.batchDeleteSuccess'))
-    fetchAnnouncements()
+    await api.put(`/dev/announcements/${announcementId.value}`, {
+      title: formData.value.title,
+      content: formData.value.content,
+      type: formData.value.type,
+      status: formData.value.status,
+      is_top: formData.value.is_top,
+    })
+    toast.success('公告更新成功')
+    router.push('/admin/announcements')
   }
   catch (error: any) {
-    console.error('批量删除失败:', error)
-    toast.error(error.message || t('common.error'))
+    console.error('更新公告失败:', error)
+    toast.error(error.message || '更新失败')
   }
   finally {
-    batchDeleteIds.value = []
+    saving.value = false
   }
 }
 
 onMounted(() => {
   fetchApplications()
-  fetchAnnouncements()
-  const appParam = route.query.app as string
-  if (appParam) {
-    appFilter.value = appParam
-  }
+  fetchAnnouncement()
 })
 </script>
 
 <template>
   <BasicPage
-    :title="t('admin.announcements.title')"
-    :description="t('admin.announcements.description')"
+    title="编辑公告"
+    description="修改公告内容和配置"
+    :breadcrumbs="[
+      { title: '公告管理', href: '/admin/announcements' },
+      { title: '编辑公告' },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton @click="goToCreate">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        {{ t('admin.announcements.create') }}
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.announcements.totalAnnouncements') }}
-            </UiCardTitle>
-            <Icon icon="lucide:megaphone" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ filteredAnnouncements.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.announcements.activeCount') }}
-            </UiCardTitle>
-            <Icon icon="lucide:check-circle" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ activeCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.announcements.inactiveCount') }}
-            </UiCardTitle>
-            <Icon icon="lucide:x-circle" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ inactiveCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.announcements.topCount') }}
-            </UiCardTitle>
-            <Icon icon="lucide:pin" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ topCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            ref="tableRef"
-            :loading
-            :data="filteredAnnouncements"
-            :on-toggle-top="toggleTop"
-            :on-edit="goToEdit"
-            :on-delete="confirmDelete"
-            :search-filter="searchFilter"
-            @refresh="fetchAnnouncements"
-            @update:search-filter="searchFilter = $event"
-            @export="handleExport"
-            @batch-delete="confirmBatchDelete(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-            @batch-export="handleBatchExport(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="appFilter"
-                :title="t('admin.announcements.application')"
-                :options="applicationOptions"
-              />
-              <SingleFilter
-                v-model="typeFilter"
-                :title="t('admin.announcements.type')"
-                :options="typeOptions"
-              />
-              <SingleFilter
-                v-model="statusFilter"
-                :title="t('admin.announcements.status')"
-                :options="statusOptions"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      :confirm-button-text="t('common.delete')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleDelete"
-    >
-      <template #title>
-        {{ t('admin.announcements.deleteAnnouncement') }}
-      </template>
-      <template #description>
-        {{ t('admin.announcements.deleteConfirm', { title: deleteTarget?.title }) }}
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:megaphone" class="size-5" />
+                公告配置
+              </UiCardTitle>
+              <UiCardDescription>修改公告的基本信息和内容</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel>选择应用</UiLabel>
+                <UiSelect v-model="formData.application_id" :disabled="saving">
+                  <UiSelectTrigger>
+                    <UiSelectValue placeholder="选择应用" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem
+                      v-for="app in applications"
+                      :key="app.id"
+                      :value="String(app.id)"
+                    >
+                      {{ app.name }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDeleteDialogOpen"
-      destructive
-      :confirm-button-text="t('common.delete')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleBatchDelete"
-    >
-      <template #title>
-        {{ t('admin.announcements.batchDelete') }}
-      </template>
-      <template #description>
-        {{ t('admin.announcements.batchDeleteConfirm', { count: batchDeleteIds.length }) }}
-      </template>
-    </ConfirmDialog>
+              <div class="space-y-2">
+                <UiLabel for="title">
+                  公告标题
+                </UiLabel>
+                <UiInput
+                  id="title"
+                  v-model="formData.title"
+                  placeholder="输入公告标题"
+                  :disabled="saving"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="content">
+                  公告内容
+                </UiLabel>
+                <textarea
+                  id="content"
+                  v-model="formData.content"
+                  class="flex min-h-[180px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  placeholder="输入公告详细内容..."
+                  :disabled="saving"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel>公告类型</UiLabel>
+                <UiSelect v-model="formData.type" :disabled="saving">
+                  <UiSelectTrigger>
+                    <UiSelectValue placeholder="选择类型" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem v-for="type in typeOptions" :key="type.value" :value="type.value">
+                      <div class="flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full" :class="type.color" />
+                        {{ type.label }}
+                      </div>
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
+
+              <div class="flex items-center justify-between rounded-lg border p-4">
+                <div class="space-y-0.5">
+                  <UiLabel class="text-base">
+                    发布状态
+                  </UiLabel>
+                  <p class="text-sm text-muted-foreground">
+                    启用后公告将对用户可见
+                  </p>
+                </div>
+                <UiSwitch
+                  :checked="formData.status === 'active'"
+                  :disabled="saving"
+                  @update:checked="formData.status = $event ? 'active' : 'inactive'"
+                />
+              </div>
+
+              <div class="flex items-center justify-between rounded-lg border p-4">
+                <div class="space-y-0.5">
+                  <UiLabel class="text-base">
+                    置顶公告
+                  </UiLabel>
+                  <p class="text-sm text-muted-foreground">
+                    置顶的公告将在应用内优先显示
+                  </p>
+                </div>
+                <UiSwitch v-model:checked="formData.is_top" :disabled="saving" />
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:eye" class="size-5" />
+                预览
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">所属应用</span>
+                  <span>{{ selectedApplication?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">公告标题</span>
+                  <span class="truncate max-w-[120px]">{{ formData.title || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">公告类型</span>
+                  <div class="flex items-center gap-1.5">
+                    <span class="w-2 h-2 rounded-full" :class="selectedType?.color" />
+                    <span>{{ selectedType?.label || '-' }}</span>
+                  </div>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">发布状态</span>
+                  <span>{{ formData.status === 'active' ? '启用' : '禁用' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">是否置顶</span>
+                  <span>{{ formData.is_top ? '是' : '否' }}</span>
+                </div>
+              </div>
+
+              <div class="border-t pt-4 mt-4">
+                <p class="text-sm text-muted-foreground mb-2">
+                  内容预览
+                </p>
+                <div class="rounded-lg bg-muted/50 p-3 min-h-[80px]">
+                  <p class="text-sm whitespace-pre-wrap">
+                    {{ formData.content || '暂无内容' }}
+                  </p>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="saving || !formData.application_id || !formData.title || !formData.content"
+                  @click="handleSubmit"
+                >
+                  <Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  保存修改
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  取消
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/card-types/[id].vue b/frontend/src/pages/admin/card-types/[id].vue
index 010d249..a3d9cc8 100644
--- a/frontend/src/pages/admin/card-types/[id].vue
+++ b/frontend/src/pages/admin/card-types/[id].vue
@@ -1,90 +1,58 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import type { CardType } from '@/pages/admin/card-types/data/schema'
-
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
-import DataTable from '@/pages/admin/card-types/components/data-table.vue'
-
-const { t } = useI18n()
+import api from '@/services/api'
 
 const router = useRouter()
-const API_BASE = 'http://localhost:8080/api/v1'
+const route = useRoute()
+const { t } = useI18n()
 
 interface Application {
   id: string
   name: string
+  billing_type: string
 }
 
+const cardTypeId = computed(() => route.params.id as string)
 const loading = ref(true)
-const cardTypes = ref<CardType[]>([])
+const saving = ref(false)
 const applications = ref<Application[]>([])
-const tableRef = ref()
 
-const appFilter = ref<string>('')
-const statusFilter = ref<string>('')
-
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<CardType | null>(null)
-const batchDeleteDialogOpen = ref(false)
-const batchDeleteIds = ref<(string | number)[]>([])
-
-const applicationOptions = computed(() => {
-  return applications.value.map(app => ({
-    label: app.name,
-    value: String(app.id),
-  }))
+const form = ref({
+  name: '',
+  description: '',
+  application_id: '',
+  price: 0,
+  recharge_type: 'balance' as 'balance' | 'subscription',
+  value: 1,
+  value_unit: 'day' as 'day' | 'month' | 'year',
+  is_permanent: false,
 })
 
-const statusOptions = computed(() => [
-  { label: t('admin.cardTypes.statusOptions.active'), value: 'active' },
-  { label: t('admin.cardTypes.statusOptions.inactive'), value: 'inactive' },
-])
-
-const filteredCardTypes = computed(() => {
-  let result = cardTypes.value
-
-  if (appFilter.value) {
-    result = result.filter(type => String(type.application_id) === appFilter.value)
-  }
-
-  if (statusFilter.value) {
-    result = result.filter(type => type.status === statusFilter.value)
-  }
-
-  return result
-})
-
-const activeTypesCount = computed(() => filteredCardTypes.value.filter(type => type.status === 'active').length)
-const totalGeneratedCount = computed(() => filteredCardTypes.value.reduce((sum, type) => sum + (type.generatedCount || 0), 0))
-const totalValue = computed(() => filteredCardTypes.value.reduce((sum, type) => sum + (type.price * (type.generatedCount || 0)), 0))
-
-async function fetchCardTypes() {
+async function fetchCardType() {
   loading.value = true
   try {
-    const token = localStorage.getItem('token')
-    const response = await fetch(`${API_BASE}/dev/card-types`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-    const data = await response.json()
-    if (data.code === 200) {
-      cardTypes.value = Array.isArray(data.data?.card_types) ? data.data.card_types : []
-    }
-    else {
-      cardTypes.value = []
+    const data = await api.get<any>(`/dev/card-types/${cardTypeId.value}`)
+    const ct = data?.card_type || data
+    if (ct) {
+      form.value.name = ct.name || ''
+      form.value.description = ct.description || ''
+      form.value.application_id = String(ct.application_id || '')
+      form.value.price = ct.price || 0
+      form.value.recharge_type = ct.recharge_type || 'balance'
+      form.value.is_permanent = ct.value === -1
+      form.value.value = ct.value === -1 ? 1 : ct.value
+      form.value.value_unit = ct.value_unit || 'day'
     }
   }
   catch (error) {
     console.error('获取卡密类型失败:', error)
-    cardTypes.value = []
+    toast.error(t('admin.cardTypes.editFailed'))
   }
   finally {
     loading.value = false
@@ -93,317 +61,345 @@ async function fetchCardTypes() {
 
 async function fetchApplications() {
   try {
-    const token = localStorage.getItem('token')
-    const response = await fetch(`${API_BASE}/dev/applications`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-    const data = await response.json()
-    if (data.code === 200) {
-      applications.value = Array.isArray(data.data?.applications) ? data.data.applications : []
-    }
-    else {
-      applications.value = []
-    }
+    const data = await api.get<{ applications: Application[] }>('/dev/applications')
+    applications.value = Array.isArray(data?.applications) ? data.applications : []
   }
   catch (error) {
     console.error('获取应用列表失败:', error)
-    applications.value = []
   }
 }
 
-function goToCreate() {
-  router.push('/admin/card-types/create')
-}
+const selectedApplication = computed(() => {
+  if (form.value.application_id) {
+    return applications.value.find(app => String(app.id) === form.value.application_id)
+  }
+  return null
+})
 
-function goToEdit(type: CardType) {
-  router.push(`/admin/card-types/${type.id}`)
-}
-
-async function toggleStatus(type: CardType) {
-  try {
-    const token = localStorage.getItem('token')
-    const newStatus = type.status === 'active' ? 'inactive' : 'active'
-    const response = await fetch(`${API_BASE}/dev/card-types/${type.id}`, {
-      method: 'PUT',
-      headers: {
-        'Authorization': `Bearer ${token}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ status: newStatus }),
-    })
-
-    const data = await response.json()
-    if (data.code === 200) {
-      toast.success(t('admin.cardTypes.statusUpdateSuccess'))
-      fetchCardTypes()
+watch(selectedApplication, (app) => {
+  if (app) {
+    if (app.billing_type === 'subscription') {
+      form.value.recharge_type = 'subscription'
     }
-    else {
-      toast.error(data.message || t('admin.cardTypes.statusUpdateFailed'))
+    else if (app.billing_type === 'time' || app.billing_type === 'count') {
+      form.value.recharge_type = 'balance'
     }
   }
-  catch (error) {
-    console.error('切换卡密类型状态失败:', error)
-    toast.error(t('admin.cardTypes.statusUpdateFailed'))
+})
+
+const displayValue = computed(() => {
+  if (form.value.is_permanent) {
+    return t('admin.cardTypes.units.permanent')
   }
-}
+  if (form.value.recharge_type === 'subscription') {
+    const unitMap: Record<string, string> = {
+      minute: t('admin.cardTypes.units.minute'),
+      hour: t('admin.cardTypes.units.hour'),
+      day: t('admin.cardTypes.units.day'),
+      month: t('admin.cardTypes.units.month'),
+      year: t('admin.cardTypes.units.year'),
+    }
+    return `${form.value.value} ${unitMap[form.value.value_unit]}`
+  }
+  return `${form.value.value}`
+})
 
-function confirmDeleteType(type: CardType) {
-  deleteTarget.value = type
-  deleteDialogOpen.value = true
-}
-
-async function handleDeleteType() {
-  if (!deleteTarget.value)
+async function handleSave() {
+  if (!form.value.name) {
+    toast.error(t('admin.cardTypes.create.nameRequired'))
     return
+  }
 
+  if (!form.value.application_id) {
+    toast.error(t('admin.cardTypes.create.applicationRequired'))
+    return
+  }
+
+  if (!form.value.is_permanent && form.value.value <= 0) {
+    toast.error(t('admin.cardTypes.create.valueRequired'))
+    return
+  }
+
+  saving.value = true
   try {
-    const token = localStorage.getItem('token')
-    const response = await fetch(`${API_BASE}/dev/card-types/${deleteTarget.value.id}`, {
-      method: 'DELETE',
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
+    await api.put(`/dev/card-types/${cardTypeId.value}`, {
+      application_id: Number(form.value.application_id),
+      name: form.value.name,
+      description: form.value.description,
+      recharge_type: form.value.recharge_type,
+      value: form.value.is_permanent ? -1 : form.value.value,
+      value_unit: form.value.recharge_type === 'subscription' ? form.value.value_unit : '',
+      price: form.value.price,
     })
-
-    const data = await response.json()
-    if (data.code === 200) {
-      toast.success(t('admin.cardTypes.deleteSuccess'))
-      fetchCardTypes()
-    }
-    else {
-      toast.error(data.message || t('admin.cardTypes.deleteFailed'))
-    }
+    toast.success(t('admin.cardTypes.editSuccess'))
+    router.push('/admin/card-types')
   }
-  catch (error) {
-    console.error('删除卡密类型失败:', error)
-    toast.error(t('admin.cardTypes.deleteFailed'))
+  catch (error: any) {
+    console.error('更新卡密类型失败:', error)
+    toast.error(error.message || t('admin.cardTypes.editFailed'))
   }
   finally {
-    deleteTarget.value = null
-  }
-}
-
-function confirmBatchDelete(ids: (string | number)[]) {
-  batchDeleteIds.value = ids
-  batchDeleteDialogOpen.value = true
-}
-
-async function handleBatchDelete() {
-  try {
-    const token = localStorage.getItem('token')
-    let successCount = 0
-    let failCount = 0
-
-    for (const id of batchDeleteIds.value) {
-      const response = await fetch(`${API_BASE}/dev/card-types/${id}`, {
-        method: 'DELETE',
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      })
-      const data = await response.json()
-      if (data.code === 200) {
-        successCount++
-      }
-      else {
-        failCount++
-      }
-    }
-
-    if (successCount > 0) {
-      toast.success(t('admin.cardTypes.deleteSuccess'))
-      fetchCardTypes()
-    }
-    if (failCount > 0) {
-      toast.error(t('admin.cardTypes.deleteFailed'))
-    }
-  }
-  catch (error) {
-    console.error('批量删除失败:', error)
-    toast.error(t('admin.cardTypes.deleteFailed'))
-  }
-  finally {
-    batchDeleteIds.value = []
-  }
-}
-
-async function batchToggleStatus(ids: (string | number)[], status: string) {
-  try {
-    const token = localStorage.getItem('token')
-    let successCount = 0
-    let failCount = 0
-
-    for (const id of ids) {
-      const response = await fetch(`${API_BASE}/dev/card-types/${id}`, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ status }),
-      })
-      const data = await response.json()
-      if (data.code === 200) {
-        successCount++
-      }
-      else {
-        failCount++
-      }
-    }
-
-    if (successCount > 0) {
-      toast.success(t('admin.cardTypes.batchUpdateSuccess'))
-      fetchCardTypes()
-    }
-    if (failCount > 0) {
-      toast.error(t('admin.cardTypes.batchUpdateFailed'))
-    }
-  }
-  catch (error) {
-    console.error('批量更新状态失败:', error)
-    toast.error(t('admin.cardTypes.batchUpdateFailed'))
+    saving.value = false
   }
 }
 
 onMounted(() => {
-  fetchCardTypes()
   fetchApplications()
+  fetchCardType()
 })
 </script>
 
 <template>
   <BasicPage
-    :title="t('admin.cardTypes.title')"
-    :description="t('admin.cardTypes.description')"
+    :title="t('admin.cardTypes.edit')"
+    :description="t('admin.cardTypes.create.description')"
+    :breadcrumbs="[
+      { title: t('admin.cardTypes.title'), href: '/admin/card-types' },
+      { title: t('admin.cardTypes.edit') },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton @click="goToCreate">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        {{ t('admin.cardTypes.createCardType') }}
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cardTypes.totalTypes') }}
-            </UiCardTitle>
-            <Icon icon="lucide:layers" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ filteredCardTypes.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cardTypes.activeTypes') }}
-            </UiCardTitle>
-            <Icon icon="lucide:check-circle" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ activeTypesCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cardTypes.generatedCards') }}
-            </UiCardTitle>
-            <Icon icon="lucide:hash" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ totalGeneratedCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cardTypes.totalValue') }}
-            </UiCardTitle>
-            <Icon icon="lucide:dollar-sign" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              ¥{{ totalValue }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            ref="tableRef"
-            :loading
-            :data="filteredCardTypes"
-            :on-edit="goToEdit"
-            :on-toggle-status="toggleStatus"
-            :on-delete="confirmDeleteType"
-            @refresh="fetchCardTypes"
-            @batch-enable="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.filter((r: any) => r.original.status === 'inactive').map((r: any) => r.original.id) || [], 'active')"
-            @batch-disable="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.filter((r: any) => r.original.status === 'active').map((r: any) => r.original.id) || [], 'inactive')"
-            @batch-delete="confirmBatchDelete(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="appFilter"
-                :title="t('admin.cardTypes.columns.application')"
-                :options="applicationOptions"
-              />
-              <SingleFilter
-                v-model="statusFilter"
-                :title="t('admin.cardTypes.columns.status')"
-                :options="statusOptions"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      :confirm-button-text="t('admin.cardTypes.delete')"
-      :cancel-button-text="t('admin.cards.create.cancelBtn')"
-      @confirm="handleDeleteType"
-    >
-      <template #title>
-        {{ t('admin.cardTypes.delete') }}
-      </template>
-      <template #description>
-        {{ t('admin.cardTypes.deleteConfirm', { name: deleteTarget?.name }) }}
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:info" class="size-5" />
+                {{ t('admin.cardTypes.create.basicInfo') }}
+              </UiCardTitle>
+              <UiCardDescription>{{ t('admin.cardTypes.create.basicInfoDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel for="name">
+                  {{ t('admin.cardTypes.create.name') }} *
+                </UiLabel>
+                <UiInput id="name" v-model="form.name" :placeholder="t('admin.cardTypes.create.namePlaceholder')" />
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDeleteDialogOpen"
-      destructive
-      :confirm-button-text="t('admin.cardTypes.delete')"
-      :cancel-button-text="t('admin.cards.create.cancelBtn')"
-      @confirm="handleBatchDelete"
-    >
-      <template #title>
-        {{ t('admin.cardTypes.batchDelete') }}
-      </template>
-      <template #description>
-        {{ t('admin.cardTypes.batchDeleteConfirm', { count: batchDeleteIds.length }) }}
-      </template>
-    </ConfirmDialog>
+              <div class="space-y-2">
+                <UiLabel for="description">
+                  {{ t('admin.cardTypes.create.description') }}
+                </UiLabel>
+                <UiTextarea id="description" v-model="form.description" :placeholder="t('admin.cardTypes.create.descriptionPlaceholder')" rows="3" />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="application">
+                  {{ t('admin.cardTypes.create.application') }} *
+                </UiLabel>
+                <UiSelect v-model="form.application_id">
+                  <UiSelectTrigger>
+                    <UiSelectValue :placeholder="t('admin.cardTypes.create.selectApplication')" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
+                      {{ app.name }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:credit-card" class="size-5" />
+                {{ t('admin.cardTypes.create.rechargeConfig') || '充值配置' }}
+              </UiCardTitle>
+              <UiCardDescription>{{ t('admin.cardTypes.create.rechargeConfigDesc') || '设置卡密的充值类型和金额' }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel>{{ t('admin.cardTypes.create.rechargeType') || '充值类型' }}</UiLabel>
+                <UiRadioGroup v-model="form.recharge_type" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div
+                    class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
+                    :class="form.recharge_type === 'balance' ? 'border-primary bg-primary/5' : 'hover:bg-accent'"
+                    @click="form.recharge_type = 'balance'"
+                  >
+                    <UiRadioGroupItem value="balance" class="mt-0.5" />
+                    <div>
+                      <p class="font-medium">
+                        {{ t('admin.cardTypes.create.balanceRecharge') || '余额充值' }}
+                      </p>
+                      <p class="text-sm text-muted-foreground">
+                        {{ t('admin.cardTypes.create.balanceRechargeDesc') || '充值账户余额，适用于计时/计次模式' }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div
+                    class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
+                    :class="form.recharge_type === 'subscription' ? 'border-primary bg-primary/5' : 'hover:bg-accent'"
+                    @click="form.recharge_type = 'subscription'"
+                  >
+                    <UiRadioGroupItem value="subscription" class="mt-0.5" />
+                    <div>
+                      <p class="font-medium">
+                        {{ t('admin.cardTypes.create.subscriptionRecharge') || '订阅充值' }}
+                      </p>
+                      <p class="text-sm text-muted-foreground">
+                        {{ t('admin.cardTypes.create.subscriptionRechargeDesc') || '充值会员时长，适用于订阅模式' }}
+                      </p>
+                    </div>
+                  </div>
+                </UiRadioGroup>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="price">
+                  {{ t('admin.cardTypes.create.price') }}
+                </UiLabel>
+                <div class="flex items-center gap-2">
+                  <UiNumberField v-model="form.price" :min="0" :step="0.01" class="max-w-[200px]">
+                    <UiNumberFieldContent>
+                      <UiNumberFieldDecrement />
+                      <UiNumberFieldInput />
+                      <UiNumberFieldIncrement />
+                    </UiNumberFieldContent>
+                  </UiNumberField>
+                  <span class="text-sm text-muted-foreground">{{ t('admin.cardTypes.create.priceUnit') }}</span>
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between pt-4 border-t">
+                <div>
+                  <p class="font-medium">
+                    {{ t('admin.cardTypes.create.permanent') || '永久会员' }}
+                  </p>
+                  <p class="text-sm text-muted-foreground">
+                    {{ t('admin.cardTypes.create.permanentDesc') || '开启后，使用此卡密的用户将成为永久会员' }}
+                  </p>
+                </div>
+                <UiSwitch v-model="form.is_permanent" />
+              </div>
+
+              <div v-if="!form.is_permanent" class="space-y-4 pt-4 border-t">
+                <div v-if="form.recharge_type === 'balance'" class="space-y-2">
+                  <UiLabel>{{ t('admin.cardTypes.create.rechargeAmount') || '充值金额' }}</UiLabel>
+                  <UiNumberField v-model="form.value" :min="0.01" :step="0.01" class="max-w-[200px]">
+                    <UiNumberFieldContent>
+                      <UiNumberFieldDecrement />
+                      <UiNumberFieldInput />
+                      <UiNumberFieldIncrement />
+                    </UiNumberFieldContent>
+                  </UiNumberField>
+                  <p class="text-xs text-muted-foreground">
+                    {{ t('admin.cardTypes.create.rechargeAmountDesc') || '用户充值后获得的余额数量' }}
+                  </p>
+                </div>
+
+                <div v-if="form.recharge_type === 'subscription'" class="space-y-4">
+                  <div class="grid grid-cols-2 gap-4">
+                    <div class="space-y-2">
+                      <UiLabel>{{ t('admin.cardTypes.create.rechargeDuration') || '充值时长' }}</UiLabel>
+                      <UiNumberField v-model="form.value" :min="1" :step="1">
+                        <UiNumberFieldContent>
+                          <UiNumberFieldDecrement />
+                          <UiNumberFieldInput />
+                          <UiNumberFieldIncrement />
+                        </UiNumberFieldContent>
+                      </UiNumberField>
+                    </div>
+
+                    <div class="space-y-2">
+                      <UiLabel>{{ t('admin.cardTypes.create.durationUnit') || '时长单位' }}</UiLabel>
+                      <UiSelect v-model="form.value_unit">
+                        <UiSelectTrigger>
+                          <UiSelectValue />
+                        </UiSelectTrigger>
+                        <UiSelectContent>
+                          <UiSelectItem value="minute">
+                            {{ t('admin.cardTypes.units.minute') }}
+                          </UiSelectItem>
+                          <UiSelectItem value="hour">
+                            {{ t('admin.cardTypes.units.hour') }}
+                          </UiSelectItem>
+                          <UiSelectItem value="day">
+                            {{ t('admin.cardTypes.units.day') }}
+                          </UiSelectItem>
+                          <UiSelectItem value="month">
+                            {{ t('admin.cardTypes.units.month') }}
+                          </UiSelectItem>
+                          <UiSelectItem value="year">
+                            {{ t('admin.cardTypes.units.year') }}
+                          </UiSelectItem>
+                        </UiSelectContent>
+                      </UiSelect>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:eye" class="size-5" />
+                {{ t('admin.cardTypes.create.preview') }}
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cardTypes.create.previewName') }}</span>
+                  <span>{{ form.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cardTypes.create.previewApplication') }}</span>
+                  <span>{{ selectedApplication?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cardTypes.create.rechargeType') || '充值类型' }}</span>
+                  <span>{{ form.recharge_type === 'balance' ? (t('admin.cardTypes.create.balanceRecharge') || '余额充值') : (t('admin.cardTypes.create.subscriptionRecharge') || '订阅充值') }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cardTypes.create.previewPrice') }}</span>
+                  <span>¥{{ form.price.toFixed(2) }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cardTypes.create.previewValue') }}</span>
+                  <span>{{ displayValue }}</span>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="saving || !form.name || !form.application_id"
+                  @click="handleSave"
+                >
+                  <Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  {{ t('admin.cardTypes.create.saveBtn') || '保存修改' }}
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  {{ t('admin.cardTypes.create.cancel') }}
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/cloud-constants/[id].vue b/frontend/src/pages/admin/cloud-constants/[id].vue
index 7b45556..e12c6ce 100644
--- a/frontend/src/pages/admin/cloud-constants/[id].vue
+++ b/frontend/src/pages/admin/cloud-constants/[id].vue
@@ -2,336 +2,378 @@
 import { Icon } from '@iconify/vue'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import DateRangeFilter from '@/components/data-table/date-range-filter.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
 import api from '@/services/api'
 
-import type { CloudConstant } from './data/schema'
-
-import DataTable from './components/data-table.vue'
-
-const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
 
 interface Application {
   id: number
   name: string
-  app_key: string
 }
 
+const constantId = computed(() => route.params.id as string)
 const loading = ref(true)
-const constants = ref<CloudConstant[]>([])
+const saving = ref(false)
 const applications = ref<Application[]>([])
+const fileInput = ref<HTMLInputElement | null>(null)
+const selectedFile = ref<File | null>(null)
+const uploading = ref(false)
 
-const appFilter = ref<string>('')
-const startDate = ref<string>('')
-const endDate = ref<string>('')
-
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<CloudConstant | null>(null)
-const batchDialogOpen = ref(false)
-const batchAction = ref<'enable' | 'disable' | 'delete' | null>(null)
-const selectedRows = ref<CloudConstant[]>([])
-
-const filteredConstants = computed(() => {
-  let result = [...constants.value]
-
-  if (appFilter.value) {
-    result = result.filter(c => String(c.app_id) === appFilter.value)
-  }
-
-  if (startDate.value) {
-    const fromDateTime = startDate.value.includes('T')
-      ? startDate.value.replace('T', ' ')
-      : `${startDate.value} 00:00`
-    result = result.filter(c => c.created_at >= fromDateTime)
-  }
-
-  if (endDate.value) {
-    const toDateTime = endDate.value.includes('T')
-      ? endDate.value.replace('T', ' ')
-      : `${endDate.value} 23:59`
-    result = result.filter(c => c.created_at <= toDateTime)
-  }
-
-  return result
+const form = ref({
+  app_id: '',
+  key: '',
+  value: '',
+  var_type: 'string',
+  description: '',
+  status: 'active',
 })
 
-const linkedCount = computed(() => constants.value.filter(c => c.app_id).length)
-const unlinkedCount = computed(() => constants.value.filter(c => !c.app_id).length)
-
-const applicationOptions = computed(() => {
-  return applications.value.map(app => ({
-    label: app.name,
-    value: String(app.id),
-  }))
-})
-
-async function fetchApplications() {
-  try {
-    const data = await api.get<{ applications: Application[] }>('/dev/applications')
-    applications.value = data?.applications || []
-  }
-  catch (error) {
-    console.error('获取应用列表失败:', error)
-  }
-}
-
-async function fetchConstants() {
+async function fetchConstant() {
   loading.value = true
   try {
-    const data = await api.get<{ constants: CloudConstant[] }>('/dev/cloud-constants')
-    const consts = data?.constants || []
-    constants.value = consts.map((c: any) => ({
-      ...c,
-      application_name: applications.value.find(app => app.id === c.app_id)?.name || '',
-    }))
+    const data = await api.get<any>(`/dev/cloud-constants/${constantId.value}`)
+    const ct = data?.cloud_constant || data
+    if (ct) {
+      form.value.app_id = String(ct.app_id || '')
+      form.value.key = ct.key || ''
+      form.value.value = ct.value || ''
+      form.value.var_type = ct.var_type || 'string'
+      form.value.description = ct.description || ''
+      form.value.status = ct.status || 'active'
+    }
   }
   catch (error) {
     console.error('获取云端常量失败:', error)
-    constants.value = []
+    toast.error(t('admin.cloudConstants.editFailed'))
   }
   finally {
     loading.value = false
   }
 }
 
-function openCreatePage() {
-  router.push('/admin/cloud-constants/create')
+async function fetchApplications() {
+  try {
+    const data = await api.get<{ applications: Application[] }>('/dev/applications')
+    applications.value = Array.isArray(data?.applications) ? data.applications : []
+  }
+  catch (error) {
+    console.error('获取应用列表失败:', error)
+  }
 }
 
-function openEditPage(constant: CloudConstant) {
-  router.push(`/admin/cloud-constants/${constant.id}`)
+const selectedApplication = computed(() => {
+  if (form.value.app_id) {
+    return applications.value.find(app => String(app.id) === form.value.app_id)
+  }
+  return null
+})
+
+function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    selectedFile.value = target.files[0]
+  }
 }
 
-function confirmDelete(constant: CloudConstant) {
-  deleteTarget.value = constant
-  deleteDialogOpen.value = true
+function clearFile() {
+  selectedFile.value = null
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
 }
 
-async function handleDelete() {
-  if (!deleteTarget.value)
+async function handleSave() {
+  if (!form.value.key) {
+    toast.error(t('admin.cloudConstants.create.keyRequired'))
     return
+  }
+  if (!form.value.app_id) {
+    toast.error(t('admin.cloudConstants.create.appRequired'))
+    return
+  }
 
-  try {
-    await api.delete(`/dev/cloud-constants/${deleteTarget.value.id}`)
-    toast.success(t('admin.cloudConstants.deleteSuccess'))
-    fetchConstants()
+  if (form.value.var_type === 'binary') {
+    if (!selectedFile.value) {
+      toast.error('请选择要上传的文件')
+      return
+    }
+    await uploadFile()
+    return
   }
-  catch (error: any) {
-    console.error('删除云端常量失败:', error)
-    toast.error(error.message || t('admin.cloudConstants.deleteFailed'))
-  }
-  finally {
-    deleteTarget.value = null
-  }
-}
 
-async function handleToggleStatus(constant: CloudConstant) {
-  const newStatus = constant.status === 'active' ? 'inactive' : 'active'
+  if (!form.value.value) {
+    toast.error(t('admin.cloudConstants.create.valueRequired'))
+    return
+  }
+
+  saving.value = true
   try {
-    await api.put(`/dev/cloud-constants/${constant.id}`, {
-      key: constant.key,
-      value: constant.value,
-      var_type: constant.var_type,
-      description: constant.description,
-      status: newStatus,
+    await api.put(`/dev/cloud-constants/${constantId.value}`, {
+      app_id: Number(form.value.app_id),
+      key: form.value.key,
+      value: form.value.value,
+      var_type: form.value.var_type,
+      description: form.value.description,
+      status: form.value.status,
     })
-    toast.success(newStatus === 'active' ? t('admin.cloudConstants.enableSuccess') : t('admin.cloudConstants.disableSuccess'))
-    fetchConstants()
+    toast.success(t('admin.cloudConstants.editSuccess'))
+    router.push('/admin/cloud-constants')
   }
   catch (error: any) {
-    console.error('更新状态失败:', error)
-    toast.error(error.message || t('admin.cloudConstants.updateFailed'))
-  }
-}
-
-function handleDownload(constant: CloudConstant) {
-  if (constant.var_type !== 'binary')
-    return
-  const token = localStorage.getItem('token')
-  const url = `/api/v1/dev/cloud-constants/${constant.id}/download?token=${token}`
-  window.open(url, '_blank')
-}
-
-function openBatchDialog(action: 'enable' | 'disable' | 'delete', rows: CloudConstant[]) {
-  batchAction.value = action
-  selectedRows.value = rows
-  batchDialogOpen.value = true
-}
-
-async function handleBatchAction() {
-  if (!batchAction.value || selectedRows.value.length === 0)
-    return
-
-  const ids = selectedRows.value.map(c => c.id)
-  try {
-    if (batchAction.value === 'delete') {
-      await Promise.all(ids.map(id => api.delete(`/dev/cloud-constants/${id}`)))
-      toast.success(t('admin.cloudConstants.batchDeleteSuccess'))
-    }
-    else {
-      const status = batchAction.value === 'enable' ? 'active' : 'inactive'
-      await Promise.all(selectedRows.value.map(c => api.put(`/dev/cloud-constants/${c.id}`, {
-        key: c.key,
-        value: c.value,
-        var_type: c.var_type,
-        description: c.description,
-        status,
-      })))
-      toast.success(batchAction.value === 'enable' ? t('admin.cloudConstants.batchEnableSuccess') : t('admin.cloudConstants.batchDisableSuccess'))
-    }
-    fetchConstants()
-  }
-  catch (error: any) {
-    console.error('批量操作失败:', error)
-    toast.error(error.message || t('admin.cloudConstants.batchFailed'))
+    console.error('更新云端常量失败:', error)
+    toast.error(error.message || t('admin.cloudConstants.editFailed'))
   }
   finally {
-    batchAction.value = null
-    selectedRows.value = []
+    saving.value = false
   }
 }
 
-onMounted(async () => {
-  await fetchApplications()
-  fetchConstants()
+async function uploadFile() {
+  if (!selectedFile.value || !form.value.app_id || !form.value.key)
+    return
+
+  uploading.value = true
+  try {
+    const formData = new FormData()
+    formData.append('file', selectedFile.value)
+    formData.append('app_id', form.value.app_id)
+    formData.append('key', form.value.key)
+    formData.append('description', form.value.description)
+    formData.append('status', form.value.status)
+
+    await api.postFormData(`/dev/cloud-constants/${constantId.value}/upload`, formData)
+    toast.success(t('admin.cloudConstants.editSuccess'))
+    router.push('/admin/cloud-constants')
+  }
+  catch (error: any) {
+    console.error('上传文件失败:', error)
+    toast.error(error.message || '上传文件失败')
+  }
+  finally {
+    uploading.value = false
+  }
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0)
+    return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+}
+
+onMounted(() => {
+  fetchApplications()
+  fetchConstant()
 })
 </script>
 
 <template>
   <BasicPage
-    :title="t('admin.cloudConstants.title')"
-    :description="t('admin.cloudConstants.description')"
+    :title="t('admin.cloudConstants.edit')"
+    :description="t('admin.cloudConstants.createDescription')"
+    :breadcrumbs="[
+      { title: t('admin.cloudConstants.title'), href: '/admin/cloud-constants' },
+      { title: t('admin.cloudConstants.edit') },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton size="sm" @click="openCreatePage">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        {{ t('admin.cloudConstants.addConstant') }}
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudConstants.totalConstants') }}
-            </UiCardTitle>
-            <Icon icon="lucide:database" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ filteredConstants.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudConstants.linkedApps') }}
-            </UiCardTitle>
-            <Icon icon="lucide:link" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ linkedCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudConstants.unlinked') }}
-            </UiCardTitle>
-            <Icon icon="lucide:unlink" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ unlinkedCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudConstants.appCount') }}
-            </UiCardTitle>
-            <Icon icon="lucide:layout-grid" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ applications.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            :loading
-            :data="filteredConstants"
-            :on-edit="openEditPage"
-            :on-delete="confirmDelete"
-            :on-toggle-status="handleToggleStatus"
-            :on-download="handleDownload"
-            @refresh="fetchConstants"
-            @batch-action="openBatchDialog"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="appFilter"
-                :title="t('admin.cloudConstants.application')"
-                :options="applicationOptions"
-              />
-              <DateRangeFilter
-                v-model:start-model-value="startDate"
-                v-model:end-model-value="endDate"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      :confirm-button-text="t('admin.cloudConstants.delete')"
-      :cancel-button-text="t('common.reset')"
-      @confirm="handleDelete"
-    >
-      <template #title>
-        {{ t('admin.cloudConstants.deleteConstant') }}
-      </template>
-      <template #description>
-        {{ t('admin.cloudConstants.deleteConfirm', { key: deleteTarget?.key }) }}
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:settings-2" class="size-5" />
+                {{ t('admin.cloudConstants.create.config') }}
+              </UiCardTitle>
+              <UiCardDescription>{{ t('admin.cloudConstants.create.configDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel for="application">
+                  {{ t('admin.cloudConstants.create.application') }}
+                </UiLabel>
+                <UiSelect v-model="form.app_id">
+                  <UiSelectTrigger>
+                    <UiSelectValue :placeholder="t('admin.cloudConstants.create.selectApp')" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
+                      {{ app.name }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDialogOpen"
-      :destructive="batchAction === 'delete'"
-      :confirm-button-text="batchAction === 'delete' ? t('admin.cloudConstants.delete') : t('common.confirm')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleBatchAction"
-    >
-      <template #title>
-        {{ batchAction === 'delete' ? t('admin.cloudConstants.batchDelete') : batchAction === 'enable' ? t('admin.cloudConstants.batchEnable') : t('admin.cloudConstants.batchDisable') }}
-      </template>
-      <template #description>
-        {{ batchAction === 'delete' ? t('admin.cloudConstants.batchDeleteConfirm', { count: selectedRows.length }) : batchAction === 'enable' ? t('admin.cloudConstants.batchEnableConfirm', { count: selectedRows.length }) : t('admin.cloudConstants.batchDisableConfirm', { count: selectedRows.length }) }}
-      </template>
-    </ConfirmDialog>
+              <div class="space-y-2">
+                <UiLabel for="varType">
+                  {{ t('admin.cloudConstants.create.type') }}
+                </UiLabel>
+                <UiSelect id="varType" v-model="form.var_type">
+                  <UiSelectTrigger>
+                    <UiSelectValue :placeholder="t('admin.cloudConstants.create.selectType')" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem value="integer">
+                      {{ t('admin.cloudConstants.types.integer') }}
+                    </UiSelectItem>
+                    <UiSelectItem value="decimal">
+                      {{ t('admin.cloudConstants.types.decimal') }}
+                    </UiSelectItem>
+                    <UiSelectItem value="string">
+                      {{ t('admin.cloudConstants.types.string') }}
+                    </UiSelectItem>
+                    <UiSelectItem value="binary">
+                      二进制
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="key">
+                  {{ t('admin.cloudConstants.create.key') }}
+                </UiLabel>
+                <UiInput id="key" v-model="form.key" :placeholder="t('admin.cloudConstants.create.keyPlaceholder')" />
+              </div>
+
+              <div v-if="form.var_type === 'binary'" class="space-y-2">
+                <UiLabel>选择文件</UiLabel>
+                <div v-if="!selectedFile" class="border-2 border-dashed rounded-lg p-6 text-center">
+                  <input
+                    ref="fileInput"
+                    type="file"
+                    class="hidden"
+                    @change="handleFileSelect"
+                  >
+                  <Icon icon="lucide:upload" class="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+                  <p class="text-sm text-muted-foreground mb-2">
+                    拖拽文件到此处或点击选择
+                  </p>
+                  <UiButton variant="outline" @click="fileInput?.click()">
+                    选择文件
+                  </UiButton>
+                </div>
+                <div v-else class="border rounded-lg p-4">
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                      <Icon icon="lucide:file" class="h-8 w-8 text-muted-foreground" />
+                      <div>
+                        <p class="font-medium">
+                          {{ selectedFile.name }}
+                        </p>
+                        <p class="text-sm text-muted-foreground">
+                          {{ formatFileSize(selectedFile.size) }}
+                        </p>
+                      </div>
+                    </div>
+                    <UiButton variant="ghost" size="icon" @click="clearFile">
+                      <Icon icon="lucide:x" class="h-4 w-4" />
+                    </UiButton>
+                  </div>
+                </div>
+              </div>
+
+              <div v-else class="space-y-2">
+                <UiLabel for="value">
+                  {{ t('admin.cloudConstants.create.value') }}
+                </UiLabel>
+                <UiTextarea id="value" v-model="form.value" :placeholder="t('admin.cloudConstants.create.valuePlaceholder')" rows="3" />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="description">
+                  {{ t('admin.cloudConstants.create.description') }}
+                </UiLabel>
+                <UiInput id="description" v-model="form.description" :placeholder="t('admin.cloudConstants.create.descriptionPlaceholder')" />
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:eye" class="size-5" />
+                {{ t('admin.cloudConstants.create.preview') }}
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudConstants.create.application') }}</span>
+                  <span>{{ selectedApplication?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudConstants.create.type') }}</span>
+                  <span>{{ t(`admin.cloudConstants.types.${form.var_type}`) }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudConstants.create.key') }}</span>
+                  <span>{{ form.key || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm items-center">
+                  <span class="text-muted-foreground">{{ t('admin.cloudConstants.create.status') }}</span>
+                  <UiSwitch
+                    :checked="form.status === 'active'"
+                    @update:checked="form.status = $event ? 'active' : 'inactive'"
+                  />
+                </div>
+                <div class="border-t pt-3 mt-3">
+                  <div class="text-sm">
+                    <div class="text-muted-foreground mb-2">
+                      {{ t('admin.cloudConstants.create.value') }}
+                    </div>
+                    <div v-if="form.var_type === 'binary'" class="bg-muted p-2 rounded text-xs">
+                      {{ selectedFile ? `${selectedFile.name} (${formatFileSize(selectedFile.size)})` : '未选择文件' }}
+                    </div>
+                    <div v-else class="bg-muted p-2 rounded max-h-[100px] overflow-y-auto text-xs">
+                      {{ form.value || '-' }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="(saving || uploading) || !form.app_id || !form.key || (form.var_type !== 'binary' && !form.value) || (form.var_type === 'binary' && !selectedFile)"
+                  @click="handleSave"
+                >
+                  <Icon v-if="saving || uploading" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  {{ uploading ? '上传中...' : t('admin.cloudConstants.create.submit') }}
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  {{ t('admin.cloudConstants.create.cancel') }}
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/cloud-variables/[id].vue b/frontend/src/pages/admin/cloud-variables/[id].vue
index f39438f..45affe2 100644
--- a/frontend/src/pages/admin/cloud-variables/[id].vue
+++ b/frontend/src/pages/admin/cloud-variables/[id].vue
@@ -2,360 +2,520 @@
 import { Icon } from '@iconify/vue'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import DateRangeFilter from '@/components/data-table/date-range-filter.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
 import api from '@/services/api'
 
-import type { CloudVariable } from './data/schema'
-
-import DataTable from './components/data-table.vue'
-
-const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
 
 interface Application {
   id: number
   name: string
-  app_key: string
 }
 
+const variableId = computed(() => route.params.id as string)
 const loading = ref(true)
-const variables = ref<CloudVariable[]>([])
+const saving = ref(false)
 const applications = ref<Application[]>([])
+const fileInput = ref<HTMLInputElement | null>(null)
+const selectedFile = ref<File | null>(null)
+const uploading = ref(false)
 
-const appFilter = ref<string>('')
-const scopeFilter = ref<string>('')
-const startDate = ref<string>('')
-const endDate = ref<string>('')
-
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<CloudVariable | null>(null)
-const batchDialogOpen = ref(false)
-const batchAction = ref<'enable' | 'disable' | 'delete' | null>(null)
-const selectedRows = ref<CloudVariable[]>([])
-
-const filteredVariables = computed(() => {
-  let result = [...variables.value]
-
-  if (appFilter.value) {
-    result = result.filter(v => String(v.app_id) === appFilter.value)
-  }
-
-  if (scopeFilter.value) {
-    result = result.filter(v => v.scope === scopeFilter.value)
-  }
-
-  if (startDate.value) {
-    const fromDateTime = startDate.value.includes('T')
-      ? startDate.value.replace('T', ' ')
-      : `${startDate.value} 00:00`
-    result = result.filter(v => v.created_at >= fromDateTime)
-  }
-
-  if (endDate.value) {
-    const toDateTime = endDate.value.includes('T')
-      ? endDate.value.replace('T', ' ')
-      : `${endDate.value} 23:59`
-    result = result.filter(v => v.created_at <= toDateTime)
-  }
-
-  return result
+const form = ref({
+  app_id: '',
+  key: '',
+  default_value: '',
+  var_type: 'string',
+  max_records: 0,
+  scope: 'app',
+  write_permission: 'admin',
+  description: '',
+  status: 'active',
 })
 
-const appScopeCount = computed(() => variables.value.filter(v => v.scope === 'app').length)
-const userScopeCount = computed(() => variables.value.filter(v => v.scope === 'user').length)
-
-const applicationOptions = computed(() => {
-  return applications.value.map(app => ({
-    label: app.name,
-    value: String(app.id),
-  }))
-})
-
-const scopeOptions = computed(() => [
-  { label: t('admin.cloudVariables.appScope'), value: 'app' },
-  { label: t('admin.cloudVariables.userScope'), value: 'user' },
-])
-
-async function fetchApplications() {
-  try {
-    const data = await api.get<{ applications: Application[] }>('/dev/applications')
-    applications.value = data?.applications || []
-  }
-  catch (error) {
-    console.error('获取应用列表失败:', error)
-  }
-}
-
-async function fetchVariables() {
+async function fetchVariable() {
   loading.value = true
   try {
-    const data = await api.get<{ variables: CloudVariable[] }>('/dev/cloud-variables')
-    const vars = data?.variables || []
-    variables.value = vars.map((v: any) => ({
-      ...v,
-      application_name: applications.value.find(app => app.id === v.app_id)?.name || '',
-    }))
+    const data = await api.get<any>(`/dev/cloud-variables/${variableId.value}`)
+    const v = data?.cloud_variable || data
+    if (v) {
+      form.value.app_id = String(v.app_id || '')
+      form.value.key = v.key || ''
+      form.value.default_value = v.default_value || ''
+      form.value.var_type = v.var_type || 'string'
+      form.value.max_records = v.max_records || 0
+      form.value.scope = v.scope || 'app'
+      form.value.write_permission = v.write_permission || 'admin'
+      form.value.description = v.description || ''
+      form.value.status = v.status || 'active'
+    }
   }
   catch (error) {
     console.error('获取云端变量失败:', error)
-    variables.value = []
+    toast.error(t('admin.cloudVariables.editFailed'))
   }
   finally {
     loading.value = false
   }
 }
 
-function openCreatePage() {
-  router.push('/admin/cloud-variables/create')
+async function fetchApplications() {
+  try {
+    const data = await api.get<{ applications: Application[] }>('/dev/applications')
+    applications.value = Array.isArray(data?.applications) ? data.applications : []
+  }
+  catch (error) {
+    console.error('获取应用列表失败:', error)
+  }
 }
 
-function openEditPage(variable: CloudVariable) {
-  router.push(`/admin/cloud-variables/${variable.id}`)
+const selectedApplication = computed(() => {
+  if (form.value.app_id) {
+    return applications.value.find(app => String(app.id) === form.value.app_id)
+  }
+  return null
+})
+
+function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    selectedFile.value = target.files[0]
+  }
 }
 
-function confirmDelete(variable: CloudVariable) {
-  deleteTarget.value = variable
-  deleteDialogOpen.value = true
+function clearFile() {
+  selectedFile.value = null
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
 }
 
-async function handleDelete() {
-  if (!deleteTarget.value)
+async function handleSave() {
+  if (!form.value.key) {
+    toast.error(t('admin.cloudVariables.create.keyRequired'))
     return
+  }
+  if (!form.value.app_id) {
+    toast.error(t('admin.cloudVariables.create.appRequired'))
+    return
+  }
 
-  try {
-    await api.delete(`/dev/cloud-variables/${deleteTarget.value.id}`)
-    toast.success(t('admin.cloudVariables.deleteSuccess'))
-    fetchVariables()
+  if (form.value.var_type === 'binary') {
+    if (!selectedFile.value) {
+      toast.error('请选择要上传的文件')
+      return
+    }
+    await uploadFile()
+    return
   }
-  catch (error: any) {
-    console.error('删除云端变量失败:', error)
-    toast.error(error.message || t('admin.cloudVariables.deleteFailed'))
-  }
-  finally {
-    deleteTarget.value = null
-  }
-}
 
-async function handleToggleStatus(variable: CloudVariable) {
-  const newStatus = variable.status === 'active' ? 'inactive' : 'active'
+  saving.value = true
   try {
-    await api.put(`/dev/cloud-variables/${variable.id}`, {
-      key: variable.key,
-      default_value: variable.default_value,
-      var_type: variable.var_type,
-      scope: variable.scope,
-      write_permission: variable.write_permission,
-      description: variable.description,
-      status: newStatus,
+    await api.put(`/dev/cloud-variables/${variableId.value}`, {
+      app_id: Number(form.value.app_id),
+      key: form.value.key,
+      default_value: form.value.default_value,
+      var_type: form.value.var_type,
+      max_records: form.value.max_records,
+      scope: form.value.scope,
+      write_permission: form.value.write_permission,
+      description: form.value.description,
+      status: form.value.status,
     })
-    toast.success(newStatus === 'active' ? t('admin.cloudVariables.enableSuccess') : t('admin.cloudVariables.disableSuccess'))
-    fetchVariables()
+    toast.success(t('admin.cloudVariables.editSuccess'))
+    router.push('/admin/cloud-variables')
   }
   catch (error: any) {
-    console.error('更新状态失败:', error)
-    toast.error(error.message || t('admin.cloudVariables.updateFailed'))
-  }
-}
-
-function handleDownload(variable: CloudVariable) {
-  if (variable.var_type !== 'binary')
-    return
-  const token = localStorage.getItem('token')
-  const url = `/api/v1/dev/cloud-variables/${variable.id}/download?token=${token}`
-  window.open(url, '_blank')
-}
-
-function handleViewRecords(variable: CloudVariable) {
-  router.push(`/admin/cloud-variables/${variable.id}/records?app_id=${variable.app_id}`)
-}
-
-function openBatchDialog(action: 'enable' | 'disable' | 'delete', rows: CloudVariable[]) {
-  batchAction.value = action
-  selectedRows.value = rows
-  batchDialogOpen.value = true
-}
-
-async function handleBatchAction() {
-  if (!batchAction.value || selectedRows.value.length === 0)
-    return
-
-  const ids = selectedRows.value.map(v => v.id)
-  try {
-    if (batchAction.value === 'delete') {
-      await Promise.all(ids.map(id => api.delete(`/dev/cloud-variables/${id}`)))
-      toast.success(t('admin.cloudVariables.batchDeleteSuccess'))
-    }
-    else {
-      const status = batchAction.value === 'enable' ? 'active' : 'inactive'
-      await Promise.all(selectedRows.value.map(v => api.put(`/dev/cloud-variables/${v.id}`, {
-        key: v.key,
-        default_value: v.default_value,
-        var_type: v.var_type,
-        scope: v.scope,
-        write_permission: v.write_permission,
-        description: v.description,
-        status,
-      })))
-      toast.success(batchAction.value === 'enable' ? t('admin.cloudVariables.batchEnableSuccess') : t('admin.cloudVariables.batchDisableSuccess'))
-    }
-    fetchVariables()
-  }
-  catch (error: any) {
-    console.error('批量操作失败:', error)
-    toast.error(error.message || t('admin.cloudVariables.batchFailed'))
+    console.error('更新云端变量失败:', error)
+    toast.error(error.message || t('admin.cloudVariables.editFailed'))
   }
   finally {
-    batchAction.value = null
-    selectedRows.value = []
+    saving.value = false
   }
 }
 
-onMounted(async () => {
-  await fetchApplications()
-  fetchVariables()
+async function uploadFile() {
+  if (!selectedFile.value || !form.value.app_id || !form.value.key)
+    return
+
+  uploading.value = true
+  try {
+    const formData = new FormData()
+    formData.append('file', selectedFile.value)
+    formData.append('app_id', form.value.app_id)
+    formData.append('key', form.value.key)
+    formData.append('description', form.value.description)
+    formData.append('status', form.value.status)
+    formData.append('scope', form.value.scope)
+    formData.append('write_permission', form.value.write_permission)
+
+    await api.postFormData(`/dev/cloud-variables/${variableId.value}/upload`, formData)
+    toast.success(t('admin.cloudVariables.editSuccess'))
+    router.push('/admin/cloud-variables')
+  }
+  catch (error: any) {
+    console.error('上传文件失败:', error)
+    toast.error(error.message || '上传文件失败')
+  }
+  finally {
+    uploading.value = false
+  }
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0)
+    return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+}
+
+onMounted(() => {
+  fetchApplications()
+  fetchVariable()
 })
 </script>
 
 <template>
   <BasicPage
-    :title="t('admin.cloudVariables.title')"
-    :description="t('admin.cloudVariables.description')"
+    :title="t('admin.cloudVariables.edit')"
+    :description="t('admin.cloudVariables.createDescription')"
+    :breadcrumbs="[
+      { title: t('admin.cloudVariables.title'), href: '/admin/cloud-variables' },
+      { title: t('admin.cloudVariables.edit') },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton size="sm" @click="openCreatePage">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        {{ t('admin.cloudVariables.addVariable') }}
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudVariables.totalVariables') }}
-            </UiCardTitle>
-            <Icon icon="lucide:variable" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ filteredVariables.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudVariables.appScopeVariables') }}
-            </UiCardTitle>
-            <Icon icon="lucide:globe" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ appScopeCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudVariables.userScopeVariables') }}
-            </UiCardTitle>
-            <Icon icon="lucide:user" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ userScopeCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudVariables.appCount') }}
-            </UiCardTitle>
-            <Icon icon="lucide:layout-grid" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ applications.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            :loading
-            :data="filteredVariables"
-            :on-edit="openEditPage"
-            :on-delete="confirmDelete"
-            :on-toggle-status="handleToggleStatus"
-            :on-download="handleDownload"
-            :on-view-records="handleViewRecords"
-            @refresh="fetchVariables"
-            @batch-action="openBatchDialog"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="appFilter"
-                :title="t('admin.cloudVariables.application')"
-                :options="applicationOptions"
-              />
-              <SingleFilter
-                v-model="scopeFilter"
-                :title="t('admin.cloudVariables.scope')"
-                :options="scopeOptions"
-              />
-              <DateRangeFilter
-                v-model:start-model-value="startDate"
-                v-model:end-model-value="endDate"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      :confirm-button-text="t('admin.cloudVariables.delete')"
-      :cancel-button-text="t('common.reset')"
-      @confirm="handleDelete"
-    >
-      <template #title>
-        {{ t('admin.cloudVariables.deleteVariable') }}
-      </template>
-      <template #description>
-        {{ t('admin.cloudVariables.deleteConfirm', { key: deleteTarget?.key }) }}
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:settings-2" class="size-5" />
+                {{ t('admin.cloudVariables.create.config') }}
+              </UiCardTitle>
+              <UiCardDescription>{{ t('admin.cloudVariables.create.configDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel for="application">
+                  {{ t('admin.cloudVariables.create.application') }}
+                </UiLabel>
+                <UiSelect v-model="form.app_id">
+                  <UiSelectTrigger>
+                    <UiSelectValue :placeholder="t('admin.cloudVariables.create.selectApp')" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
+                      {{ app.name }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDialogOpen"
-      :destructive="batchAction === 'delete'"
-      :confirm-button-text="batchAction === 'delete' ? t('admin.cloudVariables.delete') : t('common.confirm')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleBatchAction"
-    >
-      <template #title>
-        {{ batchAction === 'delete' ? t('admin.cloudVariables.batchDelete') : batchAction === 'enable' ? t('admin.cloudVariables.batchEnable') : t('admin.cloudVariables.batchDisable') }}
-      </template>
-      <template #description>
-        {{ batchAction === 'delete' ? t('admin.cloudVariables.batchDeleteConfirm', { count: selectedRows.length }) : batchAction === 'enable' ? t('admin.cloudVariables.batchEnableConfirm', { count: selectedRows.length }) : t('admin.cloudVariables.batchDisableConfirm', { count: selectedRows.length }) }}
-      </template>
-    </ConfirmDialog>
+              <div class="space-y-2">
+                <UiLabel for="varType">
+                  {{ t('admin.cloudVariables.create.type') }}
+                </UiLabel>
+                <UiSelect id="varType" v-model="form.var_type">
+                  <UiSelectTrigger>
+                    <UiSelectValue :placeholder="t('admin.cloudVariables.create.selectType')" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem value="integer">
+                      {{ t('admin.cloudVariables.types.integer') }}
+                    </UiSelectItem>
+                    <UiSelectItem value="decimal">
+                      {{ t('admin.cloudVariables.types.decimal') }}
+                    </UiSelectItem>
+                    <UiSelectItem value="string">
+                      {{ t('admin.cloudVariables.types.string') }}
+                    </UiSelectItem>
+                    <UiSelectItem value="binary">
+                      二进制
+                    </UiSelectItem>
+                    <UiSelectItem value="stream">
+                      记录
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
+
+              <div v-if="form.var_type === 'stream'" class="space-y-2">
+                <UiLabel for="maxRecords">
+                  最大记录数
+                </UiLabel>
+                <UiInput
+                  id="maxRecords"
+                  v-model.number="form.max_records"
+                  type="number"
+                  min="0"
+                  placeholder="0 = 不限制"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="key">
+                  {{ t('admin.cloudVariables.create.key') }}
+                </UiLabel>
+                <UiInput id="key" v-model="form.key" :placeholder="t('admin.cloudVariables.create.keyPlaceholder')" />
+              </div>
+
+              <div v-if="form.var_type === 'binary'" class="space-y-2">
+                <UiLabel>选择文件</UiLabel>
+                <div v-if="!selectedFile" class="border-2 border-dashed rounded-lg p-6 text-center">
+                  <input
+                    ref="fileInput"
+                    type="file"
+                    class="hidden"
+                    @change="handleFileSelect"
+                  >
+                  <Icon icon="lucide:upload" class="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+                  <p class="text-sm text-muted-foreground mb-2">
+                    拖拽文件到此处或点击选择
+                  </p>
+                  <UiButton variant="outline" @click="fileInput?.click()">
+                    选择文件
+                  </UiButton>
+                </div>
+                <div v-else class="border rounded-lg p-4">
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                      <Icon icon="lucide:file" class="h-8 w-8 text-muted-foreground" />
+                      <div>
+                        <p class="font-medium">
+                          {{ selectedFile.name }}
+                        </p>
+                        <p class="text-sm text-muted-foreground">
+                          {{ formatFileSize(selectedFile.size) }}
+                        </p>
+                      </div>
+                    </div>
+                    <UiButton variant="ghost" size="icon" @click="clearFile">
+                      <Icon icon="lucide:x" class="h-4 w-4" />
+                    </UiButton>
+                  </div>
+                </div>
+              </div>
+
+              <div v-else class="space-y-2">
+                <UiLabel for="defaultValue">
+                  {{ t('admin.cloudVariables.create.defaultValue') }}
+                </UiLabel>
+                <UiTextarea id="defaultValue" v-model="form.default_value" :placeholder="t('admin.cloudVariables.create.defaultValuePlaceholder')" rows="3" />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="description">
+                  {{ t('admin.cloudVariables.create.description') }}
+                </UiLabel>
+                <UiInput id="description" v-model="form.description" :placeholder="t('admin.cloudVariables.create.descriptionPlaceholder')" />
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle>{{ t('admin.cloudVariables.create.scopeTitle') }}</UiCardTitle>
+              <UiCardDescription>{{ t('admin.cloudVariables.create.scopeDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent>
+              <UiRadioGroup v-model="form.scope" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div
+                  class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
+                  :class="form.scope === 'app' ? 'border-primary bg-primary/5' : 'hover:bg-accent'"
+                  @click="form.scope = 'app'"
+                >
+                  <UiRadioGroupItem value="app" class="mt-0.5" />
+                  <div>
+                    <div class="flex items-center gap-2">
+                      <Icon icon="lucide:globe" class="size-4 text-primary" />
+                      <p class="font-medium">
+                        {{ t('admin.cloudVariables.create.appScope') }}
+                      </p>
+                    </div>
+                    <p class="text-sm text-muted-foreground mt-1">
+                      {{ t('admin.cloudVariables.create.appScopeDesc') }}
+                    </p>
+                  </div>
+                </div>
+
+                <div
+                  class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
+                  :class="form.scope === 'user' ? 'border-primary bg-primary/5' : 'hover:bg-accent'"
+                  @click="form.scope = 'user'"
+                >
+                  <UiRadioGroupItem value="user" class="mt-0.5" />
+                  <div>
+                    <div class="flex items-center gap-2">
+                      <Icon icon="lucide:user" class="size-4 text-primary" />
+                      <p class="font-medium">
+                        {{ t('admin.cloudVariables.create.userScope') }}
+                      </p>
+                    </div>
+                    <p class="text-sm text-muted-foreground mt-1">
+                      {{ t('admin.cloudVariables.create.userScopeDesc') }}
+                    </p>
+                  </div>
+                </div>
+              </UiRadioGroup>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle>{{ t('admin.cloudVariables.create.permissionTitle') }}</UiCardTitle>
+              <UiCardDescription>{{ t('admin.cloudVariables.create.permissionDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent>
+              <UiRadioGroup v-model="form.write_permission" class="grid grid-cols-1 gap-4">
+                <div
+                  class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
+                  :class="form.write_permission === 'admin' ? 'border-primary bg-primary/5' : 'hover:bg-accent'"
+                  @click="form.write_permission = 'admin'"
+                >
+                  <UiRadioGroupItem value="admin" class="mt-0.5" />
+                  <div>
+                    <div class="flex items-center gap-2">
+                      <Icon icon="lucide:lock" class="size-4 text-primary" />
+                      <p class="font-medium">
+                        {{ t('admin.cloudVariables.create.developerOnly') }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
+                  :class="form.write_permission === 'user' ? 'border-primary bg-primary/5' : 'hover:bg-accent'"
+                  @click="form.write_permission = 'user'"
+                >
+                  <UiRadioGroupItem value="user" class="mt-0.5" />
+                  <div>
+                    <div class="flex items-center gap-2">
+                      <Icon icon="lucide:unlock" class="size-4 text-primary" />
+                      <p class="font-medium">
+                        {{ t('admin.cloudVariables.create.userWritable') }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  v-if="form.var_type === 'stream'"
+                  class="flex items-start gap-3 p-4 rounded-lg border cursor-pointer transition-colors"
+                  :class="form.write_permission === 'app_user' ? 'border-primary bg-primary/5' : 'hover:bg-accent'"
+                  @click="form.write_permission = 'app_user'"
+                >
+                  <UiRadioGroupItem value="app_user" class="mt-0.5" />
+                  <div>
+                    <div class="flex items-center gap-2">
+                      <Icon icon="lucide:users" class="size-4 text-primary" />
+                      <p class="font-medium">
+                        应用用户可写
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </UiRadioGroup>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:eye" class="size-5" />
+                {{ t('admin.cloudVariables.create.preview') }}
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudVariables.create.application') }}</span>
+                  <span>{{ selectedApplication?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudVariables.create.type') }}</span>
+                  <span>{{ t(`admin.cloudVariables.types.${form.var_type}`) }}</span>
+                </div>
+                <div v-if="form.var_type === 'stream'" class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">最大记录数</span>
+                  <span>{{ form.max_records || '不限制' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudVariables.create.key') }}</span>
+                  <span>{{ form.key || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudVariables.create.scope') }}</span>
+                  <UiBadge variant="outline">
+                    {{ form.scope === 'app' ? t('admin.cloudVariables.appScope') : t('admin.cloudVariables.userScope') }}
+                  </UiBadge>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudVariables.create.writePermission') }}</span>
+                  <UiBadge variant="secondary">
+                    {{ form.write_permission === 'admin' ? t('admin.cloudVariables.create.developerOnly') : form.write_permission === 'app_user' ? '应用用户可写' : t('admin.cloudVariables.create.userWritable') }}
+                  </UiBadge>
+                </div>
+                <div class="flex justify-between text-sm items-center">
+                  <span class="text-muted-foreground">{{ t('admin.cloudVariables.create.status') }}</span>
+                  <UiSwitch
+                    :checked="form.status === 'active'"
+                    @update:checked="form.status = $event ? 'active' : 'inactive'"
+                  />
+                </div>
+                <div class="border-t pt-3 mt-3">
+                  <div class="text-sm">
+                    <div class="text-muted-foreground mb-2">
+                      {{ t('admin.cloudVariables.create.defaultValue') }}
+                    </div>
+                    <div class="bg-muted p-2 rounded max-h-[100px] overflow-y-auto text-xs">
+                      {{ form.default_value || '-' }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="(saving || uploading) || !form.app_id || !form.key || (form.var_type === 'binary' && !selectedFile)"
+                  @click="handleSave"
+                >
+                  <Icon v-if="saving || uploading" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  {{ uploading ? '上传中...' : t('admin.cloudVariables.create.submit') }}
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  {{ t('admin.cloudVariables.create.cancel') }}
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/dynamic-code/[id].vue b/frontend/src/pages/admin/dynamic-code/[id].vue
index 59f8b26..68aa0ac 100644
--- a/frontend/src/pages/admin/dynamic-code/[id].vue
+++ b/frontend/src/pages/admin/dynamic-code/[id].vue
@@ -2,18 +2,14 @@
 import { Icon } from '@iconify/vue'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import type { DynamicCode } from '@/pages/admin/dynamic-code/data/schema'
-
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import DateRangeFilter from '@/components/data-table/date-range-filter.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
-import DataTable from '@/pages/admin/dynamic-code/components/data-table.vue'
 import api from '@/services/api'
 
+const router = useRouter()
+const route = useRoute()
 const { t } = useI18n()
 
 interface Application {
@@ -21,87 +17,54 @@ interface Application {
   name: string
 }
 
-const router = useRouter()
-
+const codeId = computed(() => route.params.id as string)
 const loading = ref(true)
-const codes = ref<DynamicCode[]>([])
-const tableRef = ref()
+const saving = ref(false)
 const applications = ref<Application[]>([])
 
-const appFilter = ref<string>('')
-const statusFilter = ref<string>('')
-const createdStartDate = ref<string>('')
-const createdEndDate = ref<string>('')
-const updatedStartDate = ref<string>('')
-const updatedEndDate = ref<string>('')
-
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<DynamicCode | null>(null)
-const batchDeleteDialogOpen = ref(false)
-const batchDeleteIds = ref<(string | number)[]>([])
-
-const filteredCodes = computed(() => {
-  let result = codes.value
-
-  if (appFilter.value) {
-    result = result.filter(code => String(code.application_id) === appFilter.value)
-  }
-
-  if (statusFilter.value) {
-    if (statusFilter.value === 'enabled') {
-      result = result.filter(code => code.enabled === true)
-    }
-    else if (statusFilter.value === 'disabled') {
-      result = result.filter(code => code.enabled === false)
-    }
-  }
-
-  if (createdStartDate.value) {
-    const fromDateTime = createdStartDate.value.includes('T')
-      ? createdStartDate.value.replace('T', ' ')
-      : `${createdStartDate.value} 00:00`
-    result = result.filter(code => code.created_at >= fromDateTime)
-  }
-
-  if (createdEndDate.value) {
-    const toDateTime = createdEndDate.value.includes('T')
-      ? createdEndDate.value.replace('T', ' ')
-      : `${createdEndDate.value} 23:59`
-    result = result.filter(code => code.created_at <= toDateTime)
-  }
-
-  if (updatedStartDate.value) {
-    const fromDateTime = updatedStartDate.value.includes('T')
-      ? updatedStartDate.value.replace('T', ' ')
-      : `${updatedStartDate.value} 00:00`
-    result = result.filter(code => code.updated_at >= fromDateTime)
-  }
-
-  if (updatedEndDate.value) {
-    const toDateTime = updatedEndDate.value.includes('T')
-      ? updatedEndDate.value.replace('T', ' ')
-      : `${updatedEndDate.value} 23:59`
-    result = result.filter(code => code.updated_at <= toDateTime)
-  }
-
-  return result
+const form = ref({
+  name: '',
+  application_id: '',
+  description: '',
+  code: '',
+  enabled: true,
 })
 
-const enabledCount = computed(() => filteredCodes.value.filter(code => code.enabled === true).length)
-const disabledCount = computed(() => filteredCodes.value.filter(code => code.enabled === false).length)
-const linkedAppsCount = computed(() => new Set(filteredCodes.value.map(code => code.application_id)).size)
-
-const applicationOptions = computed(() => {
+const filteredApplications = computed(() => {
   return applications.value.map(app => ({
     label: app.name,
     value: String(app.id),
   }))
 })
 
-const statusOptions = computed(() => [
-  { label: t('admin.cloudFunction.enabled'), value: 'enabled' },
-  { label: t('admin.cloudFunction.disabled'), value: 'disabled' },
-])
+const selectedApplication = computed(() => {
+  if (form.value.application_id) {
+    return applications.value.find(app => String(app.id) === form.value.application_id)
+  }
+  return null
+})
+
+async function fetchCode() {
+  loading.value = true
+  try {
+    const data = await api.get<any>(`/dev/dynamic-codes/${codeId.value}`)
+    const code = data?.dynamic_code || data
+    if (code) {
+      form.value.name = code.name || ''
+      form.value.application_id = String(code.application_id || '')
+      form.value.description = code.description || ''
+      form.value.code = code.code || ''
+      form.value.enabled = code.enabled !== false
+    }
+  }
+  catch (error) {
+    console.error('获取云端函数失败:', error)
+    toast.error(t('admin.cloudFunction.editFailed'))
+  }
+  finally {
+    loading.value = false
+  }
+}
 
 async function fetchApplications() {
   try {
@@ -113,244 +76,207 @@ async function fetchApplications() {
   }
 }
 
-async function fetchCodes() {
-  loading.value = true
-  try {
-    const data = await api.get<DynamicCode[]>('/dev/dynamic-codes')
-    codes.value = Array.isArray(data) ? data : []
-  }
-  catch (error) {
-    console.error('获取云端函数列表失败:', error)
-    codes.value = []
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-function goToCreate() {
-  router.push('/admin/cloud-function/create')
-}
-
-async function toggleStatus(code: DynamicCode) {
-  try {
-    const newStatus = !code.enabled
-    await api.put(`/dev/dynamic-codes/${code.id}/status`, { enabled: newStatus })
-    toast.success(t('admin.cloudFunction.statusUpdateSuccess'))
-    fetchCodes()
-  }
-  catch (error: any) {
-    console.error('切换云端函数状态失败:', error)
-    toast.error(error.message || t('admin.cloudFunction.statusUpdateFailed'))
-  }
-}
-
-function editCode(code: DynamicCode) {
-  router.push(`/admin/cloud-function/${code.id}`)
-}
-
-function confirmDeleteCode(code: DynamicCode) {
-  deleteTarget.value = code
-  deleteDialogOpen.value = true
-}
-
-async function handleDeleteCode() {
-  if (!deleteTarget.value)
+async function handleSubmit() {
+  if (!form.value.name.trim()) {
+    toast.error(t('admin.cloudFunction.create.nameRequired'))
     return
+  }
+  if (!form.value.application_id) {
+    toast.error(t('admin.cloudFunction.create.selectAppRequired'))
+    return
+  }
+  if (!form.value.code.trim()) {
+    toast.error(t('admin.cloudFunction.create.codeRequired'))
+    return
+  }
 
+  saving.value = true
   try {
-    await api.delete(`/dev/dynamic-codes/${deleteTarget.value.id}`)
-    toast.success(t('admin.cloudFunction.deleteSuccess'))
-    fetchCodes()
+    await api.put(`/dev/dynamic-codes/${codeId.value}`, {
+      name: form.value.name,
+      application_id: Number.parseInt(form.value.application_id),
+      description: form.value.description,
+      code: form.value.code,
+      enabled: form.value.enabled,
+    })
+    toast.success(t('admin.cloudFunction.editSuccess'))
+    router.push('/admin/cloud-function')
   }
   catch (error: any) {
-    console.error('删除云端函数失败:', error)
-    toast.error(error.message || t('admin.cloudFunction.deleteFailed'))
+    console.error('更新云端函数失败:', error)
+    toast.error(error.message || t('admin.cloudFunction.editFailed'))
   }
   finally {
-    deleteTarget.value = null
-  }
-}
-
-function confirmBatchDelete(ids: (string | number)[]) {
-  batchDeleteIds.value = ids
-  batchDeleteDialogOpen.value = true
-}
-
-async function handleBatchDelete() {
-  try {
-    await api.delete('/dev/dynamic-codes/batch', { ids: batchDeleteIds.value } as any)
-    toast.success(t('admin.cloudFunction.deleteSuccess'))
-    fetchCodes()
-  }
-  catch (error: any) {
-    console.error('批量删除失败:', error)
-    toast.error(error.message || t('admin.cloudFunction.deleteFailed'))
-  }
-  finally {
-    batchDeleteIds.value = []
-  }
-}
-
-async function batchToggleStatus(ids: (string | number)[], enabled: boolean) {
-  try {
-    await api.put('/dev/dynamic-codes/batch/status', { ids, enabled })
-    toast.success(t('admin.cloudFunction.batchUpdateSuccess'))
-    fetchCodes()
-  }
-  catch (error: any) {
-    console.error('批量更新状态失败:', error)
-    toast.error(error.message || t('admin.cloudFunction.batchUpdateFailed'))
+    saving.value = false
   }
 }
 
 onMounted(() => {
   fetchApplications()
-  fetchCodes()
+  fetchCode()
 })
 </script>
 
 <template>
   <BasicPage
-    :title="t('admin.cloudFunction.title')"
-    :description="t('admin.cloudFunction.description')"
+    :title="t('admin.cloudFunction.edit')"
+    :description="t('admin.cloudFunction.create.description')"
+    :breadcrumbs="[
+      { title: t('admin.cloudFunction.title'), href: '/admin/cloud-function' },
+      { title: t('admin.cloudFunction.edit') },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton size="sm" @click="goToCreate">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        {{ t('admin.cloudFunction.createBtn') }}
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudFunction.totalCodes') }}
-            </UiCardTitle>
-            <Icon icon="lucide:code" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ filteredCodes.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudFunction.enabled') }}
-            </UiCardTitle>
-            <Icon icon="lucide:check-circle" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ enabledCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudFunction.disabled') }}
-            </UiCardTitle>
-            <Icon icon="lucide:ban" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ disabledCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.cloudFunction.linkedApps') }}
-            </UiCardTitle>
-            <Icon icon="lucide:link" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ linkedAppsCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            ref="tableRef"
-            :loading
-            :data="filteredCodes"
-            :on-toggle-status="toggleStatus"
-            :on-edit="editCode"
-            :on-delete="confirmDeleteCode"
-            @refresh="fetchCodes"
-            @batch-enable="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [], true)"
-            @batch-disable="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [], false)"
-            @batch-delete="confirmBatchDelete(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="appFilter"
-                :title="t('admin.cloudFunction.application')"
-                :options="applicationOptions"
-              />
-              <SingleFilter
-                v-model="statusFilter"
-                :title="t('admin.cloudFunction.status')"
-                :options="statusOptions"
-              />
-              <DateRangeFilter
-                v-model:start-model-value="createdStartDate"
-                v-model:end-model-value="createdEndDate"
-                :title="t('admin.cloudFunction.columns.createdAt')"
-              />
-              <DateRangeFilter
-                v-model:start-model-value="updatedStartDate"
-                v-model:end-model-value="updatedEndDate"
-                :title="t('admin.cloudFunction.columns.updatedAt')"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      :confirm-button-text="t('admin.cloudFunction.delete')"
-      :cancel-button-text="t('admin.cloudFunction.create.cancelBtn')"
-      @confirm="handleDeleteCode"
-    >
-      <template #title>
-        {{ t('admin.cloudFunction.deleteCode') }}
-      </template>
-      <template #description>
-        {{ t('admin.cloudFunction.deleteCodeConfirm', { codeName: deleteTarget?.name }) }}
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:settings-2" class="size-5" />
+                {{ t('admin.cloudFunction.create.config') }}
+              </UiCardTitle>
+              <UiCardDescription>{{ t('admin.cloudFunction.create.configDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel for="application">
+                  {{ t('admin.cloudFunction.create.application') }}
+                </UiLabel>
+                <UiSelect v-model="form.application_id">
+                  <UiSelectTrigger>
+                    <UiSelectValue :placeholder="t('admin.cloudFunction.create.selectAppPlaceholder')" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem
+                      v-for="app in filteredApplications"
+                      :key="app.value"
+                      :value="app.value"
+                    >
+                      {{ app.label }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDeleteDialogOpen"
-      destructive
-      :confirm-button-text="t('admin.cloudFunction.delete')"
-      :cancel-button-text="t('admin.cloudFunction.create.cancelBtn')"
-      @confirm="handleBatchDelete"
-    >
-      <template #title>
-        {{ t('admin.cloudFunction.batchDelete') }}
-      </template>
-      <template #description>
-        {{ t('admin.cloudFunction.batchDeleteConfirm', { count: batchDeleteIds.length }) }}
-      </template>
-    </ConfirmDialog>
+              <div class="space-y-2">
+                <UiLabel for="name">
+                  {{ t('admin.cloudFunction.create.name') }}
+                </UiLabel>
+                <UiInput
+                  id="name"
+                  v-model="form.name"
+                  :placeholder="t('admin.cloudFunction.create.namePlaceholder')"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="description">
+                  {{ t('admin.cloudFunction.create.description') }}
+                </UiLabel>
+                <UiTextarea
+                  id="description"
+                  v-model="form.description"
+                  :placeholder="t('admin.cloudFunction.create.descriptionPlaceholder')"
+                  rows="3"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="code">
+                  {{ t('admin.cloudFunction.create.code') }}
+                </UiLabel>
+                <UiTextarea
+                  id="code"
+                  v-model="form.code"
+                  :placeholder="t('admin.cloudFunction.create.codePlaceholder')"
+                  rows="12"
+                  class="font-mono text-sm"
+                />
+                <p class="text-xs text-muted-foreground">
+                  {{ t('admin.cloudFunction.create.codeHelp') }}
+                </p>
+              </div>
+
+              <div class="flex items-center justify-between">
+                <div>
+                  <p class="font-medium">
+                    {{ t('admin.cloudFunction.create.enabled') }}
+                  </p>
+                </div>
+                <UiSwitch v-model="form.enabled" />
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:eye" class="size-5" />
+                {{ t('admin.cloudFunction.create.preview') }}
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudFunction.create.name') }}</span>
+                  <span>{{ form.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudFunction.create.application') }}</span>
+                  <span>{{ selectedApplication?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.cloudFunction.create.description') }}</span>
+                  <span class="text-right max-w-[150px] truncate">{{ form.description || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm items-center">
+                  <span class="text-muted-foreground">{{ t('admin.cloudFunction.create.status') }}</span>
+                  <UiSwitch v-model="form.enabled" />
+                </div>
+                <div class="border-t pt-3 mt-3">
+                  <div class="text-sm">
+                    <div class="text-muted-foreground mb-2">
+                      {{ t('admin.cloudFunction.create.code') }}
+                    </div>
+                    <div class="font-mono text-xs bg-muted p-2 rounded max-h-[150px] overflow-auto" style="white-space: pre-wrap;">{{ form.code || '-' }}</div>
+                  </div>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="saving || !form.name || !form.application_id || !form.code"
+                  @click="handleSubmit"
+                >
+                  <Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  {{ t('admin.cloudFunction.create.saveBtn') || '保存修改' }}
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.push('/admin/cloud-function')"
+                >
+                  {{ t('admin.cloudFunction.create.cancelBtn') }}
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/risk-control/[id].vue b/frontend/src/pages/admin/risk-control/[id].vue
index c6d24b7..458c3af 100644
--- a/frontend/src/pages/admin/risk-control/[id].vue
+++ b/frontend/src/pages/admin/risk-control/[id].vue
@@ -1,289 +1,445 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import type { RiskRule } from '@/pages/admin/risk-control/data/schema'
-
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
+import CountrySelect from '@/components/country-select.vue'
 import { BasicPage } from '@/components/global-layout'
-import DataTable from '@/pages/admin/risk-control/components/data-table.vue'
 import api from '@/services/api'
 
+interface Application {
+  id: number
+  name: string
+  app_key: string
+}
+
 const router = useRouter()
+const route = useRoute()
 
+const ruleId = computed(() => route.params.id as string)
 const loading = ref(true)
-const rules = ref<RiskRule[]>([])
-const tableRef = ref()
+const saving = ref(false)
+const applications = ref<Application[]>([])
+const loadingApps = ref(true)
 
-const typeFilter = ref<string>('')
-const statusFilter = ref<string>('')
-
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<RiskRule | null>(null)
-const batchDeleteDialogOpen = ref(false)
-const batchDeleteIds = ref<(string | number)[]>([])
-
-const typeOptions = computed(() => [
-  { label: 'IP封禁', value: 'ip' },
-  { label: '设备封禁', value: 'device' },
-  { label: '用户封禁', value: 'user' },
-  { label: '地区封禁', value: 'region' },
-])
-
-const statusOptions = computed(() => [
-  { label: '生效中', value: 'active' },
-  { label: '已失效', value: 'inactive' },
-])
-
-const filteredRules = computed(() => {
-  let result = rules.value
-
-  if (typeFilter.value) {
-    result = result.filter(rule => rule.type === typeFilter.value)
-  }
-
-  if (statusFilter.value) {
-    result = result.filter(rule => rule.status === statusFilter.value)
-  }
-
-  return result
+const form = ref({
+  type: 'device' as 'ip' | 'device' | 'user' | 'region',
+  value: '',
+  reason: '',
+  expires_at: undefined as string | undefined,
+  application_id: null as number | null,
+  is_global: true,
 })
 
-const activeCount = computed(() => filteredRules.value.filter(rule => rule.status === 'active').length)
-const inactiveCount = computed(() => filteredRules.value.filter(rule => rule.status === 'inactive').length)
-const ipCount = computed(() => filteredRules.value.filter(rule => rule.type === 'ip').length)
-const deviceCount = computed(() => filteredRules.value.filter(rule => rule.type === 'device').length)
+const typeOptions: { value: 'ip' | 'device' | 'user' | 'region', label: string, icon: string, description: string, placeholder: string, scopeType: 'global' | 'app' | 'both' }[] = [
+  { value: 'ip', label: 'IP封禁', icon: 'lucide:globe', description: '封禁特定IP地址或IP段', placeholder: '输入IP地址，如 192.168.1.1 或 192.168.1.0/24', scopeType: 'both' },
+  { value: 'device', label: '设备封禁', icon: 'lucide:smartphone', description: '封禁特定设备指纹', placeholder: '输入设备指纹', scopeType: 'both' },
+  { value: 'user', label: '用户封禁', icon: 'lucide:user-x', description: '封禁特定用户账号（需指定应用）', placeholder: '输入用户ID或用户名', scopeType: 'app' },
+  { value: 'region', label: '地区封禁', icon: 'lucide:map-pin', description: '封禁特定地区访问', placeholder: '', scopeType: 'both' },
+]
 
-async function fetchRules() {
+const currentTypeInfo = computed(() => {
+  return typeOptions.find(t => t.value === form.value.type) || typeOptions[0]
+})
+
+const needApplication = computed(() => {
+  return currentTypeInfo.value.scopeType === 'app' || (!form.value.is_global && currentTypeInfo.value.scopeType === 'both')
+})
+
+const canSelectScope = computed(() => {
+  return currentTypeInfo.value.scopeType === 'both'
+})
+
+watch(() => form.value.type, (newType) => {
+  const typeInfo = typeOptions.find(t => t.value === newType)
+  if (typeInfo) {
+    if (typeInfo.scopeType === 'global') {
+      form.value.is_global = true
+    }
+    else if (typeInfo.scopeType === 'app') {
+      form.value.is_global = false
+    }
+  }
+}, { immediate: true })
+
+async function fetchRule() {
   loading.value = true
   try {
-    const data = await api.get<RiskRule[]>('/dev/risk-control/rules')
-    rules.value = Array.isArray(data) ? data : []
+    const data = await api.get<any>(`/dev/risk-control/rules/${ruleId.value}`)
+    const rule = data?.rule || data
+    if (rule) {
+      form.value.type = rule.type || 'device'
+      form.value.value = rule.value || ''
+      form.value.reason = rule.reason || ''
+      form.value.expires_at = rule.expires_at || undefined
+      form.value.application_id = rule.application_id || null
+      form.value.is_global = rule.is_global !== false
+    }
   }
   catch (error) {
     console.error('获取风控规则失败:', error)
-    rules.value = []
+    toast.error('获取风控规则失败')
   }
   finally {
     loading.value = false
   }
 }
 
-function goToCreate() {
-  router.push('/admin/risk-control/create')
-}
-
-function openEditPage(rule: RiskRule) {
-  router.push(`/admin/risk-control/${rule.id}`)
-}
-
-async function toggleStatus(rule: RiskRule) {
+async function fetchApplications() {
+  loadingApps.value = true
   try {
-    const newStatus = rule.status === 'active' ? 'inactive' : 'active'
-    await api.put(`/dev/risk-control/rules/${rule.id}/status`, { status: newStatus })
-    toast.success('状态更新成功')
-    fetchRules()
+    const data = await api.get<{ applications: Application[] }>('/dev/applications')
+    applications.value = data?.applications || []
   }
-  catch (error: any) {
-    console.error('切换状态失败:', error)
-    toast.error(error.message || '状态更新失败')
+  catch (error) {
+    console.error('获取应用列表失败:', error)
+  }
+  finally {
+    loadingApps.value = false
   }
 }
 
-function confirmDelete(rule: RiskRule) {
-  deleteTarget.value = rule
-  deleteDialogOpen.value = true
+const countries: Record<string, { name: string, flag: string }> = {
+  CN: { name: '中国', flag: '🇨🇳' },
+  US: { name: '美国', flag: '🇺🇸' },
+  JP: { name: '日本', flag: '🇯🇵' },
+  KR: { name: '韩国', flag: '🇰🇷' },
+  GB: { name: '英国', flag: '🇬🇧' },
+  DE: { name: '德国', flag: '🇩🇪' },
+  FR: { name: '法国', flag: '🇫🇷' },
+  IT: { name: '意大利', flag: '🇮🇹' },
+  ES: { name: '西班牙', flag: '🇪🇸' },
+  RU: { name: '俄罗斯', flag: '🇷🇺' },
+  CA: { name: '加拿大', flag: '🇨🇦' },
+  AU: { name: '澳大利亚', flag: '🇦🇺' },
+  BR: { name: '巴西', flag: '🇧🇷' },
+  IN: { name: '印度', flag: '🇮🇳' },
+  MX: { name: '墨西哥', flag: '🇲🇽' },
+  NL: { name: '荷兰', flag: '🇳🇱' },
+  SG: { name: '新加坡', flag: '🇸🇬' },
+  HK: { name: '中国香港', flag: '🇭🇰' },
+  TW: { name: '中国台湾', flag: '🇹🇼' },
+  TH: { name: '泰国', flag: '🇹🇭' },
+  VN: { name: '越南', flag: '🇻🇳' },
+  MY: { name: '马来西亚', flag: '🇲🇾' },
+  ID: { name: '印度尼西亚', flag: '🇮🇩' },
+  PH: { name: '菲律宾', flag: '🇵🇭' },
+  AE: { name: '阿联酋', flag: '🇦🇪' },
+  SA: { name: '沙特阿拉伯', flag: '🇸🇦' },
+  TR: { name: '土耳其', flag: '🇹🇷' },
+  PL: { name: '波兰', flag: '🇵🇱' },
+  SE: { name: '瑞典', flag: '🇸🇪' },
+  CH: { name: '瑞士', flag: '🇨🇭' },
+  AT: { name: '奥地利', flag: '🇦🇹' },
+  BE: { name: '比利时', flag: '🇧🇪' },
+  DK: { name: '丹麦', flag: '🇩🇰' },
+  FI: { name: '芬兰', flag: '🇫🇮' },
+  NO: { name: '挪威', flag: '🇳🇴' },
+  IE: { name: '爱尔兰', flag: '🇮🇪' },
+  PT: { name: '葡萄牙', flag: '🇵🇹' },
+  CZ: { name: '捷克', flag: '🇨🇿' },
+  RO: { name: '罗马尼亚', flag: '🇷🇴' },
+  HU: { name: '匈牙利', flag: '🇭🇺' },
+  IL: { name: '以色列', flag: '🇮🇱' },
+  ZA: { name: '南非', flag: '🇿🇦' },
+  EG: { name: '埃及', flag: '🇪🇬' },
+  NG: { name: '尼日利亚', flag: '🇳🇬' },
+  AR: { name: '阿根廷', flag: '🇦🇷' },
+  CL: { name: '智利', flag: '🇨🇱' },
+  CO: { name: '哥伦比亚', flag: '🇨🇴' },
+  PE: { name: '秘鲁', flag: '🇵🇪' },
+  NZ: { name: '新西兰', flag: '🇳🇿' },
 }
 
-async function handleDelete() {
-  if (!deleteTarget.value)
+function getCountryDisplay(code: string) {
+  const country = countries[code]
+  return country ? `${country.flag} ${country.name} (${code})` : code
+}
+
+async function handleSave() {
+  if (!form.value.value.trim()) {
+    toast.error('请输入封禁值')
     return
+  }
 
+  if (needApplication.value && !form.value.application_id) {
+    toast.error('请选择应用')
+    return
+  }
+
+  saving.value = true
   try {
-    await api.delete(`/dev/risk-control/rules/${deleteTarget.value.id}`)
-    toast.success('删除成功')
-    fetchRules()
+    const payload: any = {
+      type: form.value.type,
+      value: form.value.value,
+      reason: form.value.reason,
+      application_id: needApplication.value ? form.value.application_id : null,
+      is_global: form.value.is_global,
+    }
+
+    if (form.value.expires_at) {
+      payload.expires_at = form.value.expires_at
+    }
+
+    await api.put(`/dev/risk-control/rules/${ruleId.value}`, payload)
+    toast.success('更新成功')
+    router.push('/admin/risk-control')
   }
   catch (error: any) {
-    console.error('删除风控规则失败:', error)
-    toast.error(error.message || '删除失败')
+    console.error('更新风控规则失败:', error)
+    toast.error(error.message || '更新失败')
   }
   finally {
-    deleteTarget.value = null
-  }
-}
-
-function confirmBatchDelete(ids: (string | number)[]) {
-  batchDeleteIds.value = ids
-  batchDeleteDialogOpen.value = true
-}
-
-async function handleBatchDelete() {
-  try {
-    await api.delete('/dev/risk-control/rules/batch', { ids: batchDeleteIds.value } as any)
-    toast.success('批量删除成功')
-    fetchRules()
-  }
-  catch (error: any) {
-    console.error('批量删除失败:', error)
-    toast.error(error.message || '批量删除失败')
-  }
-  finally {
-    batchDeleteIds.value = []
-  }
-}
-
-async function batchToggleStatus(ids: (string | number)[], status: string) {
-  try {
-    await api.put('/dev/risk-control/rules/batch/status', { ids, status })
-    toast.success('批量更新状态成功')
-    fetchRules()
-  }
-  catch (error: any) {
-    console.error('批量更新状态失败:', error)
-    toast.error(error.message || '批量更新状态失败')
+    saving.value = false
   }
 }
 
 onMounted(() => {
-  fetchRules()
+  fetchApplications()
+  fetchRule()
 })
 </script>
 
 <template>
   <BasicPage
-    title="风控管理"
-    description="管理封禁的IP、设备、用户等，保护应用安全"
+    title="编辑规则"
+    description="修改风控规则配置"
+    :breadcrumbs="[
+      { title: '风控管理', href: '/admin/risk-control' },
+      { title: '编辑规则' },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton @click="goToCreate">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        添加规则
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              生效中
-            </UiCardTitle>
-            <Icon icon="lucide:shield-check" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ activeCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              已失效
-            </UiCardTitle>
-            <Icon icon="lucide:shield-off" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ inactiveCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              IP封禁
-            </UiCardTitle>
-            <Icon icon="lucide:globe" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ ipCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              设备封禁
-            </UiCardTitle>
-            <Icon icon="lucide:smartphone" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ deviceCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            ref="tableRef"
-            :loading
-            :data="filteredRules"
-            :on-toggle-status="toggleStatus"
-            :on-edit="openEditPage"
-            :on-delete="confirmDelete"
-            @refresh="fetchRules"
-            @batch-disable="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.filter((r: any) => r.original.status === 'active').map((r: any) => r.original.id) || [], 'inactive')"
-            @batch-enable="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.filter((r: any) => r.original.status === 'inactive').map((r: any) => r.original.id) || [], 'active')"
-            @batch-delete="confirmBatchDelete(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="typeFilter"
-                title="规则类型"
-                :options="typeOptions"
-              />
-              <SingleFilter
-                v-model="statusFilter"
-                title="状态"
-                :options="statusOptions"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      confirm-button-text="删除"
-      cancel-button-text="取消"
-      @confirm="handleDelete"
-    >
-      <template #title>
-        删除风控规则
-      </template>
-      <template #description>
-        确定要删除该风控规则吗？此操作不可撤销。
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:shield-plus" class="size-5" />
+                规则配置
+              </UiCardTitle>
+              <UiCardDescription>配置风控规则的类型和封禁目标</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-3">
+                <UiLabel>规则类型</UiLabel>
+                <div class="grid gap-3 sm:grid-cols-2">
+                  <button
+                    v-for="option in typeOptions"
+                    :key="option.value"
+                    type="button"
+                    class="flex items-start gap-3 p-4 rounded-lg border text-left transition-all duration-200"
+                    :class="form.type === option.value ? 'border-primary bg-primary/5 ring-1 ring-primary' : 'border-border hover:border-primary/50 hover:bg-muted/50'"
+                    @click="form.type = option.value"
+                  >
+                    <Icon
+                      :icon="option.icon"
+                      class="size-5 mt-0.5 transition-colors duration-200"
+                      :class="form.type === option.value ? 'text-primary' : 'text-muted-foreground'"
+                    />
+                    <div>
+                      <div
+                        class="font-medium transition-colors duration-200"
+                        :class="form.type === option.value ? 'text-primary' : ''"
+                      >
+                        {{ option.label }}
+                      </div>
+                      <div class="text-sm text-muted-foreground">
+                        {{ option.description }}
+                      </div>
+                    </div>
+                  </button>
+                </div>
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDeleteDialogOpen"
-      destructive
-      confirm-button-text="删除"
-      cancel-button-text="取消"
-      @confirm="handleBatchDelete"
-    >
-      <template #title>
-        批量删除风控规则
-      </template>
-      <template #description>
-        确定要删除选中的 {{ batchDeleteIds.length }} 条规则吗？此操作不可撤销。
-      </template>
-    </ConfirmDialog>
+              <div v-if="canSelectScope" class="space-y-3">
+                <UiLabel>生效范围</UiLabel>
+                <div class="grid gap-3 sm:grid-cols-2">
+                  <button
+                    type="button"
+                    class="flex items-start gap-3 p-4 rounded-lg border text-left transition-all duration-200"
+                    :class="form.is_global ? 'border-primary bg-primary/5 ring-1 ring-primary' : 'border-border hover:border-primary/50 hover:bg-muted/50'"
+                    @click="form.is_global = true"
+                  >
+                    <Icon
+                      icon="lucide:globe-2"
+                      class="size-5 mt-0.5 transition-colors duration-200"
+                      :class="form.is_global ? 'text-primary' : 'text-muted-foreground'"
+                    />
+                    <div>
+                      <div
+                        class="font-medium transition-colors duration-200"
+                        :class="form.is_global ? 'text-primary' : ''"
+                      >
+                        全局封禁
+                      </div>
+                      <div class="text-sm text-muted-foreground">
+                        对所有应用生效
+                      </div>
+                    </div>
+                  </button>
+                  <button
+                    type="button"
+                    class="flex items-start gap-3 p-4 rounded-lg border text-left transition-all duration-200"
+                    :class="!form.is_global ? 'border-primary bg-primary/5 ring-1 ring-primary' : 'border-border hover:border-primary/50 hover:bg-muted/50'"
+                    @click="form.is_global = false"
+                  >
+                    <Icon
+                      icon="lucide:app-window"
+                      class="size-5 mt-0.5 transition-colors duration-200"
+                      :class="!form.is_global ? 'text-primary' : 'text-muted-foreground'"
+                    />
+                    <div>
+                      <div
+                        class="font-medium transition-colors duration-200"
+                        :class="!form.is_global ? 'text-primary' : ''"
+                      >
+                        应用级封禁
+                      </div>
+                      <div class="text-sm text-muted-foreground">
+                        仅对指定应用生效
+                      </div>
+                    </div>
+                  </button>
+                </div>
+              </div>
+
+              <div v-if="needApplication" class="space-y-2">
+                <UiLabel for="application">
+                  目标应用
+                </UiLabel>
+                <UiSelect v-model="form.application_id" :disabled="loadingApps">
+                  <UiSelectTrigger>
+                    <UiSelectValue placeholder="选择要封禁的应用" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem v-for="app in applications" :key="app.id" :value="app.id">
+                      {{ app.name }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+                <p class="text-xs text-muted-foreground">
+                  {{ currentTypeInfo.scopeType === 'app' ? '用户封禁必须指定应用' : '选择要应用此封禁规则的应用' }}
+                </p>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="value">
+                  封禁值
+                </UiLabel>
+                <CountrySelect
+                  v-if="form.type === 'region'"
+                  v-model="form.value"
+                />
+                <UiInput
+                  v-else
+                  id="value"
+                  :key="form.type"
+                  v-model="form.value"
+                  :placeholder="currentTypeInfo.placeholder"
+                />
+                <p class="text-xs text-muted-foreground">
+                  {{ form.type === 'region' ? '选择要封禁的国家或地区' : '根据规则类型输入对应的封禁目标' }}
+                </p>
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="reason">
+                  封禁原因
+                </UiLabel>
+                <UiInput id="reason" v-model="form.reason" placeholder="输入封禁原因（可选）" />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="expires">
+                  过期时间
+                </UiLabel>
+                <UiDatePickerDateTimePicker v-model="form.expires_at" placeholder="选择过期时间" />
+                <p class="text-xs text-muted-foreground">
+                  留空表示永久封禁
+                </p>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:info" class="size-5" />
+                规则预览
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">生效范围</span>
+                  <span class="flex items-center gap-1">
+                    <Icon :icon="form.is_global ? 'lucide:globe-2' : 'lucide:app-window'" class="size-4" />
+                    {{ form.is_global ? '全局封禁' : '应用级封禁' }}
+                  </span>
+                </div>
+                <div v-if="needApplication" class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">目标应用</span>
+                  <span>{{ applications.find(a => a.id === form.application_id)?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">规则类型</span>
+                  <span class="flex items-center gap-1">
+                    <Icon :icon="currentTypeInfo.icon" class="size-4" />
+                    {{ currentTypeInfo.label }}
+                  </span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">封禁值</span>
+                  <span class="font-mono">
+                    {{ form.type === 'region' && form.value ? getCountryDisplay(form.value) : (form.value || '-') }}
+                  </span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">封禁原因</span>
+                  <span>{{ form.reason || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">过期时间</span>
+                  <span>{{ form.expires_at || '永久' }}</span>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="saving || !form.value.trim()"
+                  @click="handleSave"
+                >
+                  <Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  保存修改
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  取消
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/users/[id].vue b/frontend/src/pages/admin/users/[id].vue
index f64b151..08fc607 100644
--- a/frontend/src/pages/admin/users/[id].vue
+++ b/frontend/src/pages/admin/users/[id].vue
@@ -1,385 +1,236 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { computed, onActivated, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import type { User } from '@/pages/admin/users/data/schema'
-
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import DateRangeFilter from '@/components/data-table/date-range-filter.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
-import DataTable from '@/pages/admin/users/components/data-table.vue'
 import api from '@/services/api'
 
-const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
 
 interface Application {
-  id: number
+  id: string
   name: string
 }
 
+const userId = computed(() => route.params.id as string)
 const loading = ref(true)
-const users = ref<User[]>([])
-const tableRef = ref()
+const saving = ref(false)
 const applications = ref<Application[]>([])
 
-const appFilter = ref<string>('')
-const statusFilter = ref<string>('')
-const accountStatusFilter = ref<string>('')
-const lastLoginStartDate = ref<string>('')
-const lastLoginEndDate = ref<string>('')
-const createdStartDate = ref<string>('')
-const createdEndDate = ref<string>('')
-
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<User | null>(null)
-const batchDeleteDialogOpen = ref(false)
-const batchDeleteIds = ref<(string | number)[]>([])
-
-const filteredUsers = computed(() => {
-  let result = users.value
-
-  if (appFilter.value) {
-    result = result.filter(user => String(user.application_id) === appFilter.value)
-  }
-
-  if (statusFilter.value) {
-    result = result.filter(user => user.online_status === statusFilter.value)
-  }
-
-  if (accountStatusFilter.value) {
-    result = result.filter(user => user.status === accountStatusFilter.value)
-  }
-
-  if (lastLoginStartDate.value) {
-    const fromDateTime = lastLoginStartDate.value.includes('T')
-      ? lastLoginStartDate.value.replace('T', ' ')
-      : `${lastLoginStartDate.value} 00:00`
-    result = result.filter((user) => {
-      if (!user.last_login_at)
-        return false
-      return user.last_login_at >= fromDateTime
-    })
-  }
-
-  if (lastLoginEndDate.value) {
-    const toDateTime = lastLoginEndDate.value.includes('T')
-      ? lastLoginEndDate.value.replace('T', ' ')
-      : `${lastLoginEndDate.value} 23:59`
-    result = result.filter((user) => {
-      if (!user.last_login_at)
-        return false
-      return user.last_login_at <= toDateTime
-    })
-  }
-
-  if (createdStartDate.value) {
-    const fromDateTime = createdStartDate.value.includes('T')
-      ? createdStartDate.value.replace('T', ' ')
-      : `${createdStartDate.value} 00:00`
-    result = result.filter(user => user.created_at >= fromDateTime)
-  }
-
-  if (createdEndDate.value) {
-    const toDateTime = createdEndDate.value.includes('T')
-      ? createdEndDate.value.replace('T', ' ')
-      : `${createdEndDate.value} 23:59`
-    result = result.filter(user => user.created_at <= toDateTime)
-  }
-
-  return result
+const form = ref({
+  username: '',
+  email: '',
+  password: '',
+  application_id: '',
 })
 
-const onlineCount = computed(() => filteredUsers.value.filter(user => user.online_status === 'online').length)
-const offlineCount = computed(() => filteredUsers.value.filter(user => user.online_status === 'offline').length)
-const bannedCount = computed(() => filteredUsers.value.filter(user => user.status === 'banned').length)
-
-const applicationOptions = computed(() => {
-  return applications.value.map(app => ({
-    label: app.name,
-    value: String(app.id),
-  }))
-})
-
-const statusOptions = computed(() => [
-  { label: t('admin.users.online'), value: 'online' },
-  { label: t('admin.users.offline'), value: 'offline' },
-])
-
-const accountStatusOptions = computed(() => [
-  { label: t('admin.users.accountStatus.active'), value: 'active' },
-  { label: t('admin.users.accountStatus.banned'), value: 'banned' },
-])
-
-async function fetchApplications() {
-  try {
-    const data = await api.get<{ applications: Application[] }>('/dev/applications')
-    applications.value = data?.applications || []
-  }
-  catch (error) {
-    console.error('获取应用列表失败:', error)
-  }
-}
-
-async function fetchUsers() {
+async function fetchUser() {
   loading.value = true
   try {
-    const data = await api.get<{ users: User[] }>('/dev/app-users')
-    users.value = Array.isArray(data?.users) ? data.users : []
+    const data = await api.get<any>(`/dev/app-users/${userId.value}`)
+    const user = data?.user || data
+    if (user) {
+      form.value.username = user.username || ''
+      form.value.email = user.email || ''
+      form.value.application_id = String(user.application_id || '')
+    }
   }
   catch (error) {
-    console.error('获取用户列表失败:', error)
-    users.value = []
+    console.error('获取用户信息失败:', error)
+    toast.error(t('admin.users.editFailed'))
   }
   finally {
     loading.value = false
   }
 }
 
-function goToCreate() {
-  router.push('/admin/users/create')
-}
-
-function goToEdit(user: User) {
-  router.push(`/admin/users/${user.id}`)
-}
-
-function goToUserDevices(user: User) {
-  router.push(`/admin/devices?user_id=${user.id}`)
-}
-
-async function toggleUserStatus(user: User) {
-  const newStatus = user.status === 'banned' ? 'active' : 'banned'
+async function fetchApplications() {
   try {
-    await api.post('/dev/app-users/batch/status', {
-      user_ids: [Number(user.id)],
-      status: newStatus,
-    })
-    toast.success(t('admin.users.statusUpdateSuccess'))
-    fetchUsers()
+    const data = await api.get<{ applications: Application[] }>('/dev/applications')
+    applications.value = Array.isArray(data?.applications) ? data.applications : []
   }
-  catch (error: any) {
-    console.error('切换用户状态失败:', error)
-    toast.error(error.message || t('admin.users.statusUpdateFailed'))
+  catch (error) {
+    console.error('获取应用列表失败:', error)
   }
 }
 
-function confirmDeleteUser(user: User) {
-  deleteTarget.value = user
-  deleteDialogOpen.value = true
-}
+const selectedApplication = computed(() => {
+  if (form.value.application_id) {
+    return applications.value.find(app => String(app.id) === form.value.application_id)
+  }
+  return null
+})
 
-async function handleDeleteUser() {
-  if (!deleteTarget.value)
+async function handleSave() {
+  if (!form.value.username) {
+    toast.error(t('admin.users.create.usernameRequired'))
     return
+  }
+  if (!form.value.email) {
+    toast.error(t('admin.users.create.emailRequired'))
+    return
+  }
+  if (!form.value.application_id) {
+    toast.error(t('admin.users.create.applicationRequired'))
+    return
+  }
 
+  saving.value = true
   try {
-    await api.delete(`/dev/app-users/${deleteTarget.value.id}`)
-    toast.success(t('admin.users.deleteSuccess'))
-    fetchUsers()
+    const payload: any = {
+      username: form.value.username,
+      email: form.value.email,
+      application_id: Number(form.value.application_id),
+    }
+
+    if (form.value.password) {
+      payload.password = form.value.password
+    }
+
+    await api.put(`/dev/app-users/${userId.value}`, payload)
+    toast.success(t('admin.users.editSuccess'))
+    router.push('/admin/users')
   }
   catch (error: any) {
-    console.error('删除用户失败:', error)
-    toast.error(error.message || t('admin.users.deleteFailed'))
+    console.error('更新用户失败:', error)
+    toast.error(error.message || t('admin.users.editFailed'))
   }
   finally {
-    deleteTarget.value = null
-  }
-}
-
-function confirmBatchDelete(ids: (string | number)[]) {
-  batchDeleteIds.value = ids
-  batchDeleteDialogOpen.value = true
-}
-
-async function handleBatchDelete() {
-  try {
-    await api.delete('/dev/app-users/batch', { user_ids: batchDeleteIds.value.map(id => Number(id)) } as any)
-    toast.success(t('admin.users.deleteSuccess'))
-    fetchUsers()
-  }
-  catch (error: any) {
-    console.error('批量删除失败:', error)
-    toast.error(error.message || t('admin.users.deleteFailed'))
-  }
-  finally {
-    batchDeleteIds.value = []
-  }
-}
-
-async function batchToggleStatus(ids: (string | number)[], status: string) {
-  try {
-    await api.post('/dev/app-users/batch/status', { user_ids: ids.map(id => Number(id)), status })
-    toast.success(t('admin.users.batchUpdateSuccess'))
-    fetchUsers()
-  }
-  catch (error: any) {
-    console.error('批量更新状态失败:', error)
-    toast.error(error.message || t('admin.users.batchUpdateFailed'))
+    saving.value = false
   }
 }
 
 onMounted(() => {
   fetchApplications()
-  fetchUsers()
-})
-
-onActivated(() => {
-  fetchUsers()
+  fetchUser()
 })
 </script>
 
 <template>
   <BasicPage
-    :title="t('admin.users.title')"
-    :description="t('admin.users.description')"
+    :title="t('admin.users.edit')"
+    :description="t('admin.users.create.basicInfoDesc')"
+    :breadcrumbs="[
+      { title: t('admin.users.title'), href: '/admin/users' },
+      { title: t('admin.users.edit') },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton @click="goToCreate">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        {{ t('admin.users.addUser') }}
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.users.totalUsers') }}
-            </UiCardTitle>
-            <Icon icon="lucide:users" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ filteredUsers.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.users.online') }}
-            </UiCardTitle>
-            <Icon icon="lucide:check-circle" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ onlineCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.users.offline') }}
-            </UiCardTitle>
-            <Icon icon="lucide:clock" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ offlineCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.users.banned') }}
-            </UiCardTitle>
-            <Icon icon="lucide:ban" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ bannedCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            ref="tableRef"
-            :loading
-            :data="filteredUsers"
-            :on-edit="goToEdit"
-            :on-toggle-status="toggleUserStatus"
-            :on-delete="confirmDeleteUser"
-            :on-manage-devices="goToUserDevices"
-            @refresh="fetchUsers"
-            @batch-unban="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.filter((r: any) => r.original.status === 'banned').map((r: any) => r.original.id) || [], 'active')"
-            @batch-ban="batchToggleStatus(tableRef?.table?.getSelectedRowModel().rows.filter((r: any) => r.original.status !== 'banned').map((r: any) => r.original.id) || [], 'banned')"
-            @batch-delete="confirmBatchDelete(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="appFilter"
-                :title="t('admin.users.application')"
-                :options="applicationOptions"
-              />
-              <SingleFilter
-                v-model="statusFilter"
-                :title="t('admin.users.onlineStatus')"
-                :options="statusOptions"
-              />
-              <SingleFilter
-                v-model="accountStatusFilter"
-                :title="t('admin.users.accountStatus.title')"
-                :options="accountStatusOptions"
-              />
-              <DateRangeFilter
-                v-model:start-model-value="lastLoginStartDate"
-                v-model:end-model-value="lastLoginEndDate"
-                :title="t('admin.users.lastLoginTime')"
-              />
-              <DateRangeFilter
-                v-model:start-model-value="createdStartDate"
-                v-model:end-model-value="createdEndDate"
-                :title="t('admin.users.registerTime')"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      :confirm-button-text="t('admin.users.delete')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleDeleteUser"
-    >
-      <template #title>
-        {{ t('admin.users.deleteUser') }}
-      </template>
-      <template #description>
-        {{ t('admin.users.deleteConfirm', { username: deleteTarget?.username }) }}
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:user-plus" class="size-5" />
+                {{ t('admin.users.create.basicInfo') }}
+              </UiCardTitle>
+              <UiCardDescription>{{ t('admin.users.create.basicInfoDesc') }}</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel for="application">
+                  {{ t('admin.users.create.application') }}
+                </UiLabel>
+                <UiSelect v-model="form.application_id">
+                  <UiSelectTrigger>
+                    <UiSelectValue :placeholder="t('admin.users.create.selectApplication')" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
+                      {{ app.name }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDeleteDialogOpen"
-      destructive
-      :confirm-button-text="t('admin.users.delete')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleBatchDelete"
-    >
-      <template #title>
-        {{ t('admin.users.batchDeleteUsers') }}
-      </template>
-      <template #description>
-        {{ t('admin.users.batchDeleteConfirm', { count: batchDeleteIds.length }) }}
-      </template>
-    </ConfirmDialog>
+              <div class="space-y-2">
+                <UiLabel for="username">
+                  {{ t('admin.users.create.username') }}
+                </UiLabel>
+                <UiInput id="username" v-model="form.username" :placeholder="t('admin.users.create.usernamePlaceholder')" />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="email">
+                  {{ t('admin.users.create.email') }}
+                </UiLabel>
+                <UiInput id="email" v-model="form.email" type="email" :placeholder="t('admin.users.create.emailPlaceholder')" />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="password">
+                  {{ t('admin.users.create.password') }}
+                </UiLabel>
+                <UiInput id="password" v-model="form.password" type="password" :placeholder="t('admin.users.create.passwordPlaceholder')" />
+                <p class="text-xs text-muted-foreground">
+                  留空则不修改密码
+                </p>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:eye" class="size-5" />
+                {{ t('admin.users.create.preview') }}
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.users.create.app') }}</span>
+                  <span>{{ selectedApplication?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.users.create.usernameLabel') }}</span>
+                  <span>{{ form.username || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">{{ t('admin.users.create.emailLabel') }}</span>
+                  <span>{{ form.email || '-' }}</span>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="saving || !form.username || !form.email || !form.application_id"
+                  @click="handleSave"
+                >
+                  <Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  {{ t('admin.users.create.saveBtn') || '保存修改' }}
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  {{ t('admin.users.create.cancel') }}
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>
diff --git a/frontend/src/pages/admin/versions/[id].vue b/frontend/src/pages/admin/versions/[id].vue
index 1f3140e..1ccc56a 100644
--- a/frontend/src/pages/admin/versions/[id].vue
+++ b/frontend/src/pages/admin/versions/[id].vue
@@ -1,100 +1,104 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
-import type { Version } from '@/pages/admin/versions/data/schema'
-
-import ConfirmDialog from '@/components/confirm-dialog.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
-import DataTable from '@/pages/admin/versions/components/data-table.vue'
-import api, { BASE_URL } from '@/services/api'
-
-const { t } = useI18n()
+import api from '@/services/api'
 
 interface Application {
   id: number
   name: string
 }
 
+interface VersionFileInfo {
+  file_path: string
+  file_name: string
+  file_size: number
+  file_hash: string
+  file_type: string
+}
+
+interface UploadResponse {
+  file_path: string
+  file_size: number
+  file_hash: string
+  files: VersionFileInfo[]
+}
+
 const route = useRoute()
 const router = useRouter()
 
+const versionId = computed(() => route.params.id as string)
 const loading = ref(true)
-const versions = ref<Version[]>([])
+const saving = ref(false)
+const uploading = ref(false)
 const applications = ref<Application[]>([])
-const tableRef = ref()
 
-const appFilter = ref<string>('')
-const strategyFilter = ref<string>('')
-const methodFilter = ref<string>('')
-const searchFilter = ref<string>('')
-
-const deleteDialogOpen = ref(false)
-const deleteTarget = ref<Version | null>(null)
-const batchDeleteDialogOpen = ref(false)
-const batchDeleteIds = ref<number[]>([])
-
-const applicationOptions = computed(() => {
-  return applications.value.map(app => ({
-    label: app.name,
-    value: String(app.id),
-  }))
+const formData = ref({
+  application_id: '',
+  version: '',
+  description: '',
+  update_strategy: 'optional' as 'optional' | 'forced',
+  update_method: 'manual' as 'manual' | 'auto',
+  min_version: '',
+  changelog: '',
+  entry_file: '',
+  file: null as File | null,
 })
 
-const strategyOptions = computed(() => [
-  { label: t('admin.versions.strategies.optional'), value: 'optional' },
-  { label: t('admin.versions.strategies.forced'), value: 'forced' },
-])
+const uploadedData = ref<UploadResponse | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
 
-const methodOptions = computed(() => [
-  { label: t('admin.versions.methods.manual'), value: 'manual' },
-  { label: t('admin.versions.methods.auto'), value: 'auto' },
-])
-
-const filteredVersions = computed(() => {
-  let result = versions.value
-
-  if (appFilter.value) {
-    result = result.filter(v => String(v.application_id) === appFilter.value)
-  }
-
-  if (strategyFilter.value) {
-    result = result.filter(v => v.update_strategy === strategyFilter.value)
-  }
-
-  if (methodFilter.value) {
-    result = result.filter(v => v.update_method === methodFilter.value)
-  }
-
-  if (searchFilter.value) {
-    const search = searchFilter.value.toLowerCase()
-    result = result.filter(v =>
-      v.version?.toLowerCase().includes(search)
-      || v.description?.toLowerCase().includes(search)
-      || v.application_name?.toLowerCase().includes(search),
-    )
-  }
-
-  return result
+const selectedApplication = computed(() => {
+  return applications.value.find(app => String(app.id) === formData.value.application_id)
 })
 
-const totalSize = computed(() => {
-  return filteredVersions.value.reduce((sum, v) => sum + (v.file_size || 0), 0)
+const executableFiles = computed(() => {
+  if (!uploadedData.value)
+    return []
+  return uploadedData.value.files.filter(f => f.file_type === 'executable')
 })
 
-const forcedCount = computed(() => filteredVersions.value.filter(v => v.update_strategy === 'forced').length)
+const fileSize = computed(() => {
+  if (formData.value.file) {
+    return formatFileSize(formData.value.file.size)
+  }
+  return null
+})
 
-function formatFileSize(bytes: number): string {
-  if (bytes === 0)
-    return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+function formatFileSize(size: number): string {
+  if (size < 1024)
+    return `${size} B`
+  if (size < 1024 * 1024)
+    return `${(size / 1024).toFixed(2)} KB`
+  return `${(size / (1024 * 1024)).toFixed(2)} MB`
+}
+
+async function fetchVersion() {
+  loading.value = true
+  try {
+    const data = await api.get<any>(`/dev/versions/${versionId.value}`)
+    const ver = data?.version || data
+    if (ver) {
+      formData.value.application_id = String(ver.application_id || '')
+      formData.value.version = ver.version || ''
+      formData.value.description = ver.description || ''
+      formData.value.update_strategy = ver.update_strategy || 'optional'
+      formData.value.update_method = ver.update_method || 'manual'
+      formData.value.min_version = ver.min_version || ''
+      formData.value.changelog = ver.changelog || ''
+      formData.value.entry_file = ver.entry_file || ''
+    }
+  }
+  catch (error) {
+    console.error('获取版本信息失败:', error)
+    toast.error('获取版本信息失败')
+  }
+  finally {
+    loading.value = false
+  }
 }
 
 async function fetchApplications() {
@@ -107,253 +111,428 @@ async function fetchApplications() {
   }
 }
 
-async function fetchVersions() {
-  loading.value = true
-  try {
-    const data = await api.get<{ versions: Version[], total: number }>('/dev/versions')
-    versions.value = data?.versions || []
-  }
-  catch (error) {
-    console.error('加载版本列表失败:', error)
-    versions.value = []
-  }
-  finally {
-    loading.value = false
+function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files.length > 0) {
+    const file = target.files[0]
+    if (!file.name.toLowerCase().endsWith('.zip')) {
+      toast.error('只支持ZIP格式文件')
+      return
+    }
+    formData.value.file = file
+    uploadedData.value = null
   }
 }
 
-function goToCreate() {
-  router.push('/admin/versions/create')
+function removeFile() {
+  formData.value.file = null
+  uploadedData.value = null
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
 }
 
-function goToEdit(version: Version) {
-  router.push(`/admin/versions/${version.id}`)
-}
-
-function downloadVersion(version: Version) {
-  if (!version.file_path)
-    return
-  const token = localStorage.getItem('token')
-  const downloadUrl = `${version.file_path}?token=${token}`
-  window.open(downloadUrl, '_blank')
-}
-
-function confirmDelete(version: Version) {
-  deleteTarget.value = version
-  deleteDialogOpen.value = true
-}
-
-async function handleDelete() {
-  if (!deleteTarget.value)
+async function uploadZipFile() {
+  if (!formData.value.file) {
+    toast.error('请先选择ZIP文件')
     return
+  }
 
+  uploading.value = true
   try {
-    await api.delete(`/dev/applications/${deleteTarget.value.application_id}/versions/${deleteTarget.value.id}`)
-    toast.success(t('admin.versions.deleteSuccess'))
-    fetchVersions()
+    const formDataObj = new FormData()
+    formDataObj.append('file', formData.value.file)
+
+    const response = await api.postFormData<UploadResponse>('/dev/versions/upload-zip', formDataObj)
+    uploadedData.value = response
+    toast.success('文件上传成功')
   }
   catch (error: any) {
-    console.error('删除版本失败:', error)
-    toast.error(error.message || t('common.error'))
+    console.error('上传文件失败:', error)
+    toast.error(error.message || '上传失败')
   }
   finally {
-    deleteTarget.value = null
+    uploading.value = false
   }
 }
 
-function handleExport() {
-  const token = localStorage.getItem('token')
-  const params = new URLSearchParams()
-  if (appFilter.value)
-    params.append('application_id', appFilter.value)
-  if (strategyFilter.value)
-    params.append('update_strategy', strategyFilter.value)
-  if (methodFilter.value)
-    params.append('update_method', methodFilter.value)
-
-  const queryString = params.toString()
-  const url = `${BASE_URL}/dev/versions/export?${queryString}&token=${token}`
-  window.open(url, '_blank')
-}
-
-function handleBatchExport(ids: number[]) {
-  if (!ids.length)
+async function handleSubmit() {
+  if (!formData.value.application_id) {
+    toast.error('请选择应用')
     return
-  const token = localStorage.getItem('token')
-  const params = new URLSearchParams()
-  params.append('ids', ids.join(','))
-  const url = `${BASE_URL}/dev/versions/export?${params.toString()}&token=${token}`
-  window.open(url, '_blank')
-}
+  }
+  if (!formData.value.version) {
+    toast.error('请输入版本号')
+    return
+  }
 
-function confirmBatchDelete(ids: number[]) {
-  batchDeleteIds.value = ids
-  batchDeleteDialogOpen.value = true
-}
-
-async function handleBatchDelete() {
+  saving.value = true
   try {
-    await api.delete('/dev/versions/batch', { ids: batchDeleteIds.value } as any)
-    toast.success(t('admin.versions.batchDeleteSuccess'))
-    fetchVersions()
+    const payload: any = {
+      application_id: Number(formData.value.application_id),
+      version: formData.value.version,
+      description: formData.value.description,
+      update_strategy: formData.value.update_strategy,
+      update_method: formData.value.update_method,
+      min_version: formData.value.min_version,
+      changelog: formData.value.changelog,
+      entry_file: formData.value.entry_file,
+    }
+
+    if (uploadedData.value) {
+      payload.file_path = uploadedData.value.file_path
+      payload.file_size = uploadedData.value.file_size
+      payload.file_hash = uploadedData.value.file_hash
+    }
+
+    await api.put(`/dev/versions/${versionId.value}`, payload)
+    toast.success('版本更新成功')
+    router.push('/admin/versions')
   }
   catch (error: any) {
-    console.error('批量删除失败:', error)
-    toast.error(error.message || t('common.error'))
+    console.error('更新版本失败:', error)
+    toast.error(error.message || '更新失败')
   }
   finally {
-    batchDeleteIds.value = []
+    saving.value = false
   }
 }
 
 onMounted(() => {
   fetchApplications()
-  fetchVersions()
-  const appParam = route.query.app as string
-  if (appParam) {
-    appFilter.value = appParam
-  }
+  fetchVersion()
 })
 </script>
 
 <template>
   <BasicPage
-    :title="t('admin.versions.title')"
-    :description="t('admin.versions.description')"
+    title="编辑版本"
+    description="修改版本信息和更新策略"
+    :breadcrumbs="[
+      { title: '版本管理', href: '/admin/versions' },
+      { title: '编辑版本' },
+    ]"
     sticky
   >
-    <template #actions>
-      <UiButton @click="goToCreate">
-        <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
-        {{ t('admin.versions.create') }}
-      </UiButton>
-    </template>
-
-    <div class="space-y-6">
-      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.versions.totalVersions') }}
-            </UiCardTitle>
-            <Icon icon="lucide:git-branch" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ filteredVersions.length }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.versions.forcedCount') }}
-            </UiCardTitle>
-            <Icon icon="lucide:alert-triangle" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ forcedCount }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.versions.totalSize') }}
-            </UiCardTitle>
-            <Icon icon="lucide:hard-drive" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ formatFileSize(totalSize) }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-
-        <UiCard>
-          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
-            <UiCardTitle class="text-sm font-medium">
-              {{ t('admin.versions.appCount') }}
-            </UiCardTitle>
-            <Icon icon="lucide:package" class="size-4 text-muted-foreground" />
-          </UiCardHeader>
-          <UiCardContent>
-            <div class="text-2xl font-bold">
-              {{ new Set(filteredVersions.map(v => v.application_id)).size }}
-            </div>
-          </UiCardContent>
-        </UiCard>
-      </div>
-
-      <UiCard>
-        <UiCardContent class="p-6">
-          <DataTable
-            ref="tableRef"
-            :loading
-            :data="filteredVersions"
-            :on-download="downloadVersion"
-            :on-edit="goToEdit"
-            :on-delete="confirmDelete"
-            :search-filter="searchFilter"
-            @refresh="fetchVersions"
-            @update:search-filter="searchFilter = $event"
-            @export="handleExport"
-            @batch-delete="confirmBatchDelete(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-            @batch-export="handleBatchExport(tableRef?.table?.getSelectedRowModel().rows.map((r: any) => r.original.id) || [])"
-          >
-            <template #filters>
-              <SingleFilter
-                v-model="appFilter"
-                :title="t('admin.versions.application')"
-                :options="applicationOptions"
-              />
-              <SingleFilter
-                v-model="strategyFilter"
-                :title="t('admin.versions.strategy')"
-                :options="strategyOptions"
-              />
-              <SingleFilter
-                v-model="methodFilter"
-                :title="t('admin.versions.method')"
-                :options="methodOptions"
-              />
-            </template>
-          </DataTable>
-        </UiCardContent>
-      </UiCard>
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
     </div>
 
-    <ConfirmDialog
-      v-model:open="deleteDialogOpen"
-      destructive
-      :confirm-button-text="t('common.delete')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleDelete"
-    >
-      <template #title>
-        {{ t('admin.versions.deleteVersion') }}
-      </template>
-      <template #description>
-        {{ t('admin.versions.deleteConfirm', { version: deleteTarget?.version }) }}
-      </template>
-    </ConfirmDialog>
+    <div v-else class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-3">
+        <div class="lg:col-span-2 space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:git-branch" class="size-5" />
+                版本配置
+              </UiCardTitle>
+              <UiCardDescription>修改版本的基本信息和上传更新文件</UiCardDescription>
+            </UiCardHeader>
+            <UiCardContent class="space-y-6">
+              <div class="space-y-2">
+                <UiLabel>选择应用</UiLabel>
+                <UiSelect v-model="formData.application_id" :disabled="saving">
+                  <UiSelectTrigger>
+                    <UiSelectValue placeholder="选择应用" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem
+                      v-for="app in applications"
+                      :key="app.id"
+                      :value="String(app.id)"
+                    >
+                      {{ app.name }}
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
 
-    <ConfirmDialog
-      v-model:open="batchDeleteDialogOpen"
-      destructive
-      :confirm-button-text="t('common.delete')"
-      :cancel-button-text="t('common.cancel')"
-      @confirm="handleBatchDelete"
-    >
-      <template #title>
-        {{ t('admin.versions.batchDelete') }}
-      </template>
-      <template #description>
-        {{ t('admin.versions.batchDeleteConfirm', { count: batchDeleteIds.length }) }}
-      </template>
-    </ConfirmDialog>
+              <div class="space-y-2">
+                <UiLabel for="version">
+                  版本号
+                </UiLabel>
+                <UiInput
+                  id="version"
+                  v-model="formData.version"
+                  placeholder="例如: 1.0.0"
+                  :disabled="saving"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="min_version">
+                  最低版本
+                </UiLabel>
+                <UiInput
+                  id="min_version"
+                  v-model="formData.min_version"
+                  placeholder="例如: 0.9.0"
+                  :disabled="saving"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="description">
+                  版本描述
+                </UiLabel>
+                <UiInput
+                  id="description"
+                  v-model="formData.description"
+                  placeholder="简短描述此版本的更新内容"
+                  :disabled="saving"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel>更新文件 (ZIP格式，可选)</UiLabel>
+                <div class="border-2 border-dashed rounded-lg p-4">
+                  <input
+                    ref="fileInputRef"
+                    type="file"
+                    accept=".zip"
+                    class="hidden"
+                    @change="handleFileSelect"
+                  >
+                  <div v-if="!formData.file" class="text-center">
+                    <Icon icon="lucide:upload-cloud" class="size-10 mx-auto text-muted-foreground mb-2" />
+                    <p class="text-sm text-muted-foreground mb-2">
+                      拖拽ZIP文件到此处或点击上传
+                    </p>
+                    <UiButton variant="outline" size="sm" :disabled="saving || uploading" @click="fileInputRef?.click()">
+                      <Icon icon="lucide:file-plus" class="h-4 w-4 mr-2" />
+                      选择文件
+                    </UiButton>
+                  </div>
+                  <div v-else class="space-y-3">
+                    <div class="flex items-center justify-between">
+                      <div class="flex items-center gap-3">
+                        <Icon icon="lucide:file-archive" class="size-8 text-primary" />
+                        <div>
+                          <p class="text-sm font-medium">
+                            {{ formData.file.name }}
+                          </p>
+                          <p class="text-xs text-muted-foreground">
+                            {{ fileSize }}
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-2">
+                        <UiButton
+                          v-if="!uploadedData"
+                          size="sm"
+                          :disabled="uploading"
+                          @click="uploadZipFile"
+                        >
+                          <Icon v-if="uploading" icon="lucide:loader-2" class="h-4 w-4 mr-2 animate-spin" />
+                          <Icon v-else icon="lucide:upload" class="h-4 w-4 mr-2" />
+                          上传解析
+                        </UiButton>
+                        <UiButton variant="ghost" size="icon" :disabled="saving" @click="removeFile">
+                          <Icon icon="lucide:x" class="size-4" />
+                        </UiButton>
+                      </div>
+                    </div>
+                    <div v-if="uploadedData" class="rounded-lg bg-muted/50 p-3">
+                      <div class="flex items-center gap-2 text-sm text-green-600 mb-2">
+                        <Icon icon="lucide:check-circle" class="size-4" />
+                        <span>文件已上传并解析</span>
+                      </div>
+                      <div class="text-xs text-muted-foreground space-y-1">
+                        <p>文件哈希: {{ uploadedData.file_hash.substring(0, 16) }}...</p>
+                        <p>包含 {{ uploadedData.files.length }} 个文件</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="uploadedData && uploadedData.files.length > 0" class="space-y-2">
+                <UiLabel>文件列表</UiLabel>
+                <div class="border rounded-lg max-h-[300px] overflow-auto">
+                  <table class="w-full text-sm">
+                    <thead class="bg-muted/50 sticky top-0">
+                      <tr>
+                        <th class="text-left p-2 font-medium">
+                          文件名
+                        </th>
+                        <th class="text-left p-2 font-medium">
+                          路径
+                        </th>
+                        <th class="text-right p-2 font-medium">
+                          大小
+                        </th>
+                        <th class="text-left p-2 font-medium">
+                          类型
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        v-for="(file, index) in uploadedData.files"
+                        :key="index"
+                        class="border-t"
+                      >
+                        <td class="p-2 truncate max-w-[150px]">
+                          {{ file.file_name }}
+                        </td>
+                        <td class="p-2 truncate max-w-[200px] text-muted-foreground">
+                          {{ file.file_path }}
+                        </td>
+                        <td class="p-2 text-right text-muted-foreground">
+                          {{ formatFileSize(file.file_size) }}
+                        </td>
+                        <td class="p-2">
+                          <span class="px-2 py-0.5 rounded text-xs bg-muted">
+                            {{ file.file_type }}
+                          </span>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              <div v-if="executableFiles.length > 0" class="space-y-2">
+                <UiLabel>入口文件</UiLabel>
+                <UiSelect v-model="formData.entry_file" :disabled="saving">
+                  <UiSelectTrigger>
+                    <UiSelectValue placeholder="选择入口文件（可选）" />
+                  </UiSelectTrigger>
+                  <UiSelectContent>
+                    <UiSelectItem
+                      v-for="file in executableFiles"
+                      :key="file.file_path"
+                      :value="file.file_path"
+                    >
+                      {{ file.file_name }} ({{ formatFileSize(file.file_size) }})
+                    </UiSelectItem>
+                  </UiSelectContent>
+                </UiSelect>
+              </div>
+
+              <div class="flex items-center justify-between rounded-lg border p-4">
+                <div class="space-y-0.5">
+                  <UiLabel class="text-base">
+                    强制更新
+                  </UiLabel>
+                  <p class="text-sm text-muted-foreground">
+                    启用后用户必须更新到此版本才能继续使用
+                  </p>
+                </div>
+                <UiSwitch
+                  :checked="formData.update_strategy === 'forced'"
+                  :disabled="saving"
+                  @update:checked="formData.update_strategy = $event ? 'forced' : 'optional'"
+                />
+              </div>
+
+              <div class="flex items-center justify-between rounded-lg border p-4">
+                <div class="space-y-0.5">
+                  <UiLabel class="text-base">
+                    自动更新
+                  </UiLabel>
+                  <p class="text-sm text-muted-foreground">
+                    启用后应用将自动下载并安装更新
+                  </p>
+                </div>
+                <UiSwitch
+                  :checked="formData.update_method === 'auto'"
+                  :disabled="saving"
+                  @update:checked="formData.update_method = $event ? 'auto' : 'manual'"
+                />
+              </div>
+
+              <div class="space-y-2">
+                <UiLabel for="changelog">
+                  更新日志
+                </UiLabel>
+                <textarea
+                  id="changelog"
+                  v-model="formData.changelog"
+                  class="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  placeholder="详细描述此版本的更新内容..."
+                  :disabled="saving"
+                />
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+
+        <div class="space-y-6">
+          <UiCard>
+            <UiCardHeader>
+              <UiCardTitle class="flex items-center gap-2">
+                <Icon icon="lucide:eye" class="size-5" />
+                预览
+              </UiCardTitle>
+            </UiCardHeader>
+            <UiCardContent class="space-y-4">
+              <div class="space-y-3">
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">所属应用</span>
+                  <span>{{ selectedApplication?.name || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">版本号</span>
+                  <span>{{ formData.version || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">最低版本</span>
+                  <span>{{ formData.min_version || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">版本描述</span>
+                  <span class="truncate max-w-[120px]">{{ formData.description || '-' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">强制更新</span>
+                  <span>{{ formData.update_strategy === 'forced' ? '是' : '否' }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-muted-foreground">自动更新</span>
+                  <span>{{ formData.update_method === 'auto' ? '是' : '否' }}</span>
+                </div>
+              </div>
+
+              <div class="border-t pt-4 mt-4">
+                <p class="text-sm text-muted-foreground mb-2">
+                  更新日志预览
+                </p>
+                <div class="rounded-lg bg-muted/50 p-3 min-h-[80px]">
+                  <p class="text-sm whitespace-pre-wrap">
+                    {{ formData.changelog || '暂无更新日志' }}
+                  </p>
+                </div>
+              </div>
+            </UiCardContent>
+          </UiCard>
+
+          <UiCard>
+            <UiCardContent class="pt-6">
+              <div class="flex flex-col gap-3">
+                <UiButton
+                  class="w-full"
+                  size="lg"
+                  :disabled="saving || !formData.application_id || !formData.version"
+                  @click="handleSubmit"
+                >
+                  <Icon v-if="saving" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+                  <Icon v-else icon="lucide:check" class="mr-2 h-4 w-4" />
+                  保存修改
+                </UiButton>
+                <UiButton
+                  variant="outline"
+                  class="w-full"
+                  @click="router.back()"
+                >
+                  取消
+                </UiButton>
+              </div>
+            </UiCardContent>
+          </UiCard>
+        </div>
+      </div>
+    </div>
   </BasicPage>
 </template>