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

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>