fix: agent finance page styling and cloud data API implementation

- Fix agent finance page: confirmed backend integration is working
- Add agent cloud-variables and cloud-constants API endpoints
- Rewrite agent cloud-data page to use real API calls instead of mock data
- Fix API path: /agent/applications -> /agent/apps
- Remove 'all' value from app filter SelectItem (empty string issue)
- Add cloudData i18n keys for zh and en
- Cloud data is read-only for agents, with CanViewCloudData permission check

backend/internal/router/agent/agent.go

@@ -25,6 +25,8 @@ func SetupAgentRoutes(r *gin.RouterGroup) {
 	r.GET("/profile", handleGetProfile)
 	r.PUT("/profile", handleUpdateProfile)
 	r.GET("/cards/export", handleExportCards)
+	r.GET("/cloud-variables", handleGetCloudVariables)
+	r.GET("/cloud-constants", handleGetCloudConstants)
 }
 
 func handleGetStats(c *gin.Context) {
@@ -764,3 +766,143 @@ func splitIDs(ids string) []string {
 	}
 	return result
 }
+
+func handleGetCloudVariables(c *gin.Context) {
+	userID := c.GetUint("user_id")
+
+	var agent model.User
+	if err := database.DB.First(&agent, userID).Error; err != nil {
+		response.Error(c, 404, "代理不存在")
+		return
+	}
+
+	if !agent.CanViewCloudData {
+		response.Error(c, 403, "无权查看云端数据")
+		return
+	}
+
+	var agentApps []model.AgentApplication
+	database.DB.Where("agent_id = ?", userID).Find(&agentApps)
+	appIDs := make([]uint, 0)
+	for _, app := range agentApps {
+		appIDs = append(appIDs, app.ApplicationID)
+	}
+
+	if len(appIDs) == 0 {
+		response.Success(c, gin.H{
+			"variables": []interface{}{},
+			"total":     0,
+		})
+		return
+	}
+
+	appIDFilter := c.Query("app_id")
+	var variables []model.CloudVariable
+	query := database.DB.Where("app_id IN ?", appIDs)
+	if appIDFilter != "" {
+		if aid, err := strconv.ParseUint(appIDFilter, 10, 32); err == nil {
+			query = database.DB.Where("app_id = ?", uint(aid))
+		}
+	}
+	query.Find(&variables)
+
+	appMap := make(map[uint]string)
+	var apps []model.Application
+	database.DB.Where("id IN ?", appIDs).Find(&apps)
+	for _, app := range apps {
+		appMap[app.ID] = app.Name
+	}
+
+	result := make([]gin.H, 0)
+	for _, v := range variables {
+		appName := ""
+		if v.AppID != nil {
+			appName = appMap[*v.AppID]
+		}
+		result = append(result, gin.H{
+			"id":          v.ID,
+			"name":        v.Key,
+			"app_id":      v.AppID,
+			"app_name":    appName,
+			"scope":       v.Scope,
+			"status":      v.Status,
+			"description": v.Description,
+			"created_at":  v.CreatedAt.Format("2006-01-02T15:04:05Z07:00"),
+		})
+	}
+
+	response.Success(c, gin.H{
+		"variables": result,
+		"total":     len(result),
+	})
+}
+
+func handleGetCloudConstants(c *gin.Context) {
+	userID := c.GetUint("user_id")
+
+	var agent model.User
+	if err := database.DB.First(&agent, userID).Error; err != nil {
+		response.Error(c, 404, "代理不存在")
+		return
+	}
+
+	if !agent.CanViewCloudData {
+		response.Error(c, 403, "无权查看云端数据")
+		return
+	}
+
+	var agentApps []model.AgentApplication
+	database.DB.Where("agent_id = ?", userID).Find(&agentApps)
+	appIDs := make([]uint, 0)
+	for _, app := range agentApps {
+		appIDs = append(appIDs, app.ApplicationID)
+	}
+
+	if len(appIDs) == 0 {
+		response.Success(c, gin.H{
+			"constants": []interface{}{},
+			"total":     0,
+		})
+		return
+	}
+
+	appIDFilter := c.Query("app_id")
+	var constants []model.CloudConstant
+	query := database.DB.Where("app_id IN ?", appIDs)
+	if appIDFilter != "" {
+		if aid, err := strconv.ParseUint(appIDFilter, 10, 32); err == nil {
+			query = database.DB.Where("app_id = ?", uint(aid))
+		}
+	}
+	query.Find(&constants)
+
+	appMap := make(map[uint]string)
+	var apps []model.Application
+	database.DB.Where("id IN ?", appIDs).Find(&apps)
+	for _, app := range apps {
+		appMap[app.ID] = app.Name
+	}
+
+	result := make([]gin.H, 0)
+	for _, c := range constants {
+		appName := ""
+		if c.AppID != nil {
+			appName = appMap[*c.AppID]
+		}
+		result = append(result, gin.H{
+			"id":          c.ID,
+			"name":        c.Key,
+			"app_id":      c.AppID,
+			"app_name":    appName,
+			"value":       c.Value,
+			"status":      c.Status,
+			"description": c.Description,
+			"created_at":  c.CreatedAt.Format("2006-01-02T15:04:05Z07:00"),
+		})
+	}
+
+	response.Success(c, gin.H{
+		"constants": result,
+		"total":     len(result),
+	})
+}

frontend/src/pages/agent/cloud-data/index.vue

@@ -1,28 +1,36 @@
 <script setup lang="ts">
-import { Cloud, Database, Eye, Globe, Variable } from 'lucide-vue-next'
+import { Cloud, Database, Eye, Globe, Loader2, Variable } from 'lucide-vue-next'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
 
 import { BasicPage } from '@/components/global-layout'
 import api from '@/services/api'
 
 const { t } = useI18n()
-const router = useRouter()
 
 interface Application {
   id: number
   name: string
-  app_key: string
+}
+
+interface CloudItem {
+  id: number
+  name: string
+  app_id: number | null
+  app_name: string
+  scope?: string
+  status: string
+  value?: string
+  description?: string
+  created_at: string
 }
 
 const loading = ref(true)
 const activeTab = ref('variables')
 const applications = ref<Application[]>([])
 const appFilter = ref<string>('')
-
-const variables = ref<any[]>([])
-const constants = ref<any[]>([])
+const variables = ref<CloudItem[]>([])
+const constants = ref<CloudItem[]>([])
 
 const filteredVariables = computed(() => {
   if (!appFilter.value) return variables.value
@@ -42,15 +50,17 @@ const stats = computed(() => ({
 
 async function fetchApplications() {
   try {
-    const data = await api.get<{ applications: Application[] }>('/agent/applications')
-    applications.value = data?.applications || []
+    const data = await api.get<{ apps: Application[] }>('/agent/apps')
+    applications.value = data?.apps || []
+  }
+  catch {
+    applications.value = []
   }
-  catch { /* ignore */ }
 }
 
 async function fetchVariables() {
   try {
-    const data = await api.get<{ variables: any[] }>('/agent/cloud-variables')
+    const data = await api.get<{ variables: CloudItem[] }>('/agent/cloud-variables')
     variables.value = data?.variables || []
   }
   catch {
@@ -60,7 +70,7 @@ async function fetchVariables() {
 
 async function fetchConstants() {
   try {
-    const data = await api.get<{ constants: any[] }>('/agent/cloud-constants')
+    const data = await api.get<{ constants: CloudItem[] }>('/agent/cloud-constants')
     constants.value = data?.constants || []
   }
   catch {
@@ -68,7 +78,8 @@ async function fetchConstants() {
   }
 }
 
-function getAppName(appId: number) {
+function getAppName(appId: number | null) {
+  if (!appId) return '-'
   const app = applications.value.find(a => a.id === appId)
   return app?.name || String(appId)
 }
@@ -87,40 +98,52 @@ onMounted(async () => {
 
 <template>
   <BasicPage
-    title="云端数据"
-    description="查看云端变量和常量数据（只读）"
+    :title="t('agent.cloudData.title')"
+    :description="t('agent.cloudData.description')"
     :breadcrumbs="[
-      { title: '控制台', href: '/agent' },
-      { title: '云端数据' },
+      { title: t('nav.dashboard'), href: '/agent' },
+      { title: t('nav.cloudData') },
     ]"
   >
     <div class="space-y-6">
       <div class="grid gap-4 md:grid-cols-3">
         <UiCard>
           <UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <UiCardTitle class="text-sm font-medium">云端变量</UiCardTitle>
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.cloudData.variables') }}
+            </UiCardTitle>
             <Variable class="size-4 text-muted-foreground" />
           </UiCardHeader>
           <UiCardContent>
-            <div class="text-2xl font-bold">{{ stats.variables }}</div>
+            <div class="text-2xl font-bold">
+              {{ stats.variables }}
+            </div>
           </UiCardContent>
         </UiCard>
         <UiCard>
           <UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <UiCardTitle class="text-sm font-medium">云端常量</UiCardTitle>
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.cloudData.constants') }}
+            </UiCardTitle>
             <Database class="size-4 text-muted-foreground" />
           </UiCardHeader>
           <UiCardContent>
-            <div class="text-2xl font-bold">{{ stats.constants }}</div>
+            <div class="text-2xl font-bold">
+              {{ stats.constants }}
+            </div>
           </UiCardContent>
         </UiCard>
         <UiCard>
           <UiCardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <UiCardTitle class="text-sm font-medium">应用数量</UiCardTitle>
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('agent.cloudData.applications') }}
+            </UiCardTitle>
             <Globe class="size-4 text-muted-foreground" />
           </UiCardHeader>
           <UiCardContent>
-            <div class="text-2xl font-bold">{{ stats.applications }}</div>
+            <div class="text-2xl font-bold">
+              {{ stats.applications }}
+            </div>
           </UiCardContent>
         </UiCard>
       </div>
@@ -131,17 +154,18 @@ onMounted(async () => {
             <div>
               <UiCardTitle class="flex items-center gap-2">
                 <Cloud class="size-5" />
-                数据列表
+                {{ t('agent.cloudData.dataList') }}
               </UiCardTitle>
-              <UiCardDescription>只读模式，数据不可编辑</UiCardDescription>
+              <UiCardDescription>
+                {{ t('agent.cloudData.readOnlyHint') }}
+              </UiCardDescription>
             </div>
             <div class="flex items-center gap-3">
               <UiSelect v-model="appFilter">
                 <UiSelectTrigger class="w-[180px]">
-                  <UiSelectValue placeholder="全部应用" />
+                  <UiSelectValue :placeholder="t('agent.cloudData.allApps')" />
                 </UiSelectTrigger>
                 <UiSelectContent>
-                  <UiSelectItem value="all">全部应用</UiSelectItem>
                   <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
                     {{ app.name }}
                   </UiSelectItem>
@@ -153,14 +177,14 @@ onMounted(async () => {
                   :class="activeTab === 'variables' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'"
                   @click="activeTab = 'variables'"
                 >
-                  云端变量
+                  {{ t('agent.cloudData.variables') }}
                 </button>
                 <button
                   class="px-4 py-2 text-sm font-medium transition-colors"
                   :class="activeTab === 'constants' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'"
                   @click="activeTab = 'constants'"
                 >
-                  云端常量
+                  {{ t('agent.cloudData.constants') }}
                 </button>
               </div>
             </div>
@@ -168,39 +192,57 @@ onMounted(async () => {
         </UiCardHeader>
         <UiCardContent>
           <div v-if="loading" class="flex items-center justify-center py-12">
-            <div class="size-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+            <Loader2 class="size-8 animate-spin text-muted-foreground" />
           </div>
 
           <template v-else>
             <div v-if="activeTab === 'variables'">
               <div v-if="filteredVariables.length === 0" class="text-center py-12 text-muted-foreground">
-                暂无云端变量数据
+                {{ t('agent.cloudData.noVariables') }}
               </div>
               <div v-else class="border rounded-lg overflow-hidden">
                 <div class="overflow-x-auto">
                   <table class="w-full text-sm">
                     <thead class="bg-muted/50">
                       <tr>
-                        <th class="text-left p-3 font-medium">名称</th>
-                        <th class="text-left p-3 font-medium">应用</th>
-                        <th class="text-left p-3 font-medium">作用域</th>
-                        <th class="text-left p-3 font-medium">状态</th>
-                        <th class="text-left p-3 font-medium">创建时间</th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.name') }}
+                        </th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.application') }}
+                        </th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.scope') }}
+                        </th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.status') }}
+                        </th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.createdAt') }}
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr v-for="v in filteredVariables" :key="v.id" class="border-t hover:bg-muted/30 transition-colors">
-                        <td class="p-3 font-medium">{{ v.name }}</td>
-                        <td class="p-3 text-muted-foreground">{{ getAppName(v.app_id) }}</td>
-                        <td class="p-3">
-                          <UiBadge variant="outline">{{ v.scope || 'global' }}</UiBadge>
+                        <td class="p-3 font-medium">
+                          {{ v.name }}
+                        </td>
+                        <td class="p-3 text-muted-foreground">
+                          {{ v.app_name || getAppName(v.app_id) }}
                         </td>
                         <td class="p-3">
-                          <UiBadge :variant="v.status === 1 ? 'default' : 'secondary'">
-                            {{ v.status === 1 ? '启用' : '禁用' }}
+                          <UiBadge variant="outline">
+                            {{ v.scope || 'global' }}
                           </UiBadge>
                         </td>
-                        <td class="p-3 text-muted-foreground">{{ formatDate(v.created_at) }}</td>
+                        <td class="p-3">
+                          <UiBadge :variant="v.status === 'active' ? 'default' : 'secondary'">
+                            {{ v.status === 'active' ? t('agent.cloudData.statusActive') : t('agent.cloudData.statusInactive') }}
+                          </UiBadge>
+                        </td>
+                        <td class="p-3 text-muted-foreground">
+                          {{ formatDate(v.created_at) }}
+                        </td>
                       </tr>
                     </tbody>
                   </table>
@@ -210,31 +252,49 @@ onMounted(async () => {
 
             <div v-if="activeTab === 'constants'">
               <div v-if="filteredConstants.length === 0" class="text-center py-12 text-muted-foreground">
-                暂无云端常量数据
+                {{ t('agent.cloudData.noConstants') }}
               </div>
               <div v-else class="border rounded-lg overflow-hidden">
                 <div class="overflow-x-auto">
                   <table class="w-full text-sm">
                     <thead class="bg-muted/50">
                       <tr>
-                        <th class="text-left p-3 font-medium">名称</th>
-                        <th class="text-left p-3 font-medium">应用</th>
-                        <th class="text-left p-3 font-medium">值</th>
-                        <th class="text-left p-3 font-medium">状态</th>
-                        <th class="text-left p-3 font-medium">创建时间</th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.name') }}
+                        </th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.application') }}
+                        </th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.value') }}
+                        </th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.status') }}
+                        </th>
+                        <th class="text-left p-3 font-medium">
+                          {{ t('agent.cloudData.columns.createdAt') }}
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr v-for="c in filteredConstants" :key="c.id" class="border-t hover:bg-muted/30 transition-colors">
-                        <td class="p-3 font-medium">{{ c.name }}</td>
-                        <td class="p-3 text-muted-foreground">{{ getAppName(c.app_id) }}</td>
-                        <td class="p-3 text-muted-foreground max-w-[200px] truncate">{{ c.value }}</td>
+                        <td class="p-3 font-medium">
+                          {{ c.name }}
+                        </td>
+                        <td class="p-3 text-muted-foreground">
+                          {{ c.app_name || getAppName(c.app_id) }}
+                        </td>
+                        <td class="p-3 text-muted-foreground max-w-[200px] truncate">
+                          {{ c.value }}
+                        </td>
                         <td class="p-3">
-                          <UiBadge :variant="c.status === 1 ? 'default' : 'secondary'">
-                            {{ c.status === 1 ? '启用' : '禁用' }}
+                          <UiBadge :variant="c.status === 'active' ? 'default' : 'secondary'">
+                            {{ c.status === 'active' ? t('agent.cloudData.statusActive') : t('agent.cloudData.statusInactive') }}
                           </UiBadge>
                         </td>
-                        <td class="p-3 text-muted-foreground">{{ formatDate(c.created_at) }}</td>
+                        <td class="p-3 text-muted-foreground">
+                          {{ formatDate(c.created_at) }}
+                        </td>
                       </tr>
                     </tbody>
                   </table>
@@ -245,7 +305,7 @@ onMounted(async () => {
 
           <div class="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
             <Eye class="size-4" />
-            <span>只读模式 - 当前数据仅供查看，无法进行编辑操作</span>
+            <span>{{ t('agent.cloudData.readOnlyNote') }}</span>
           </div>
         </UiCardContent>
       </UiCard>

frontend/src/plugins/i18n/en.json

@@ -2886,6 +2886,29 @@
         "totalAmount": "Estimated Cost",
         "generateNow": "Generate Now"
       }
+    },
+    "cloudData": {
+      "title": "Cloud Data",
+      "description": "View cloud variables and constants (read-only)",
+      "variables": "Cloud Variables",
+      "constants": "Cloud Constants",
+      "applications": "Applications",
+      "dataList": "Data List",
+      "readOnlyHint": "Read-only mode, data cannot be edited",
+      "allApps": "All Applications",
+      "noVariables": "No cloud variables found",
+      "noConstants": "No cloud constants found",
+      "statusActive": "Active",
+      "statusInactive": "Inactive",
+      "readOnlyNote": "Read-only - Data is for viewing only, no editing allowed",
+      "columns": {
+        "name": "Name",
+        "application": "Application",
+        "scope": "Scope",
+        "value": "Value",
+        "status": "Status",
+        "createdAt": "Created At"
+      }
     }
   },
   "pricing": {

frontend/src/plugins/i18n/zh.json

@@ -2887,6 +2887,29 @@
         "totalAmount": "预计费用",
         "generateNow": "立即生成"
       }
+    },
+    "cloudData": {
+      "title": "云端数据",
+      "description": "查看云端变量和常量数据（只读）",
+      "variables": "云端变量",
+      "constants": "云端常量",
+      "applications": "应用数量",
+      "dataList": "数据列表",
+      "readOnlyHint": "只读模式，数据不可编辑",
+      "allApps": "全部应用",
+      "noVariables": "暂无云端变量数据",
+      "noConstants": "暂无云端常量数据",
+      "statusActive": "启用",
+      "statusInactive": "禁用",
+      "readOnlyNote": "只读模式 - 当前数据仅供查看，无法进行编辑操作",
+      "columns": {
+        "name": "名称",
+        "application": "应用",
+        "scope": "作用域",
+        "value": "值",
+        "status": "状态",
+        "createdAt": "创建时间"
+      }
     }
   },
   "pricing": {