fix: parse JSON string data in cloud variable records

- Add parseRecordData function to handle data that may be JSON string
- Update dynamicKeys computation to use parsed data
- Update column cell rendering to use parsed data
- Fixes issue where record fields were not displayed as separate columns

frontend/src/pages/admin/cloud-variables/[id]/records.vue

@@ -29,7 +29,7 @@ interface Variable {
 
 interface VariableRecord {
   id: number
-  data: Record<string, any>
+  data: Record<string, any> | string
   user_id?: number
   user?: {
     id: number
@@ -38,6 +38,19 @@ interface VariableRecord {
   created_at: string
 }
 
+function parseRecordData(record: VariableRecord): Record<string, any> {
+  if (!record.data) return {}
+  if (typeof record.data === 'string') {
+    try {
+      return JSON.parse(record.data)
+    }
+    catch {
+      return {}
+    }
+  }
+  return record.data
+}
+
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
@@ -59,8 +72,9 @@ const batchDeleteDialogOpen = ref(false)
 const dynamicKeys = computed(() => {
   const keys = new Set<string>()
   records.value.forEach((record) => {
-    if (record.data && typeof record.data === 'object') {
+    const data = parseRecordData(record)
-      Object.keys(record.data).forEach(key => keys.add(key))
+    if (data && typeof data === 'object') {
+      Object.keys(data).forEach(key => keys.add(key))
     }
   })
   return Array.from(keys).sort()
@@ -95,9 +109,13 @@ const columns = computed<ColumnDef<VariableRecord>[]>(() => {
     cols.push({
       id: `data_${key}`,
       header: () => key,
-      accessorFn: row => row.data?.[key],
+      accessorFn: (row) => {
+        const data = parseRecordData(row)
+        return data?.[key]
+      },
       cell: ({ row }) => {
-        const value = row.original.data?.[key]
+        const data = parseRecordData(row.original)
+        const value = data?.[key]
         if (value === null || value === undefined) {
           return h('span', { class: 'text-muted-foreground' }, '-')
         }
@@ -118,8 +136,8 @@ const columns = computed<ColumnDef<VariableRecord>[]>(() => {
       id: 'data',
       header: () => t('admin.cloudVariables.records.data'),
       cell: ({ row }) => {
-        const data = row.original.data
+        const data = parseRecordData(row.original)
-        if (!data) {
+        if (!data || Object.keys(data).length === 0) {
           return h('span', { class: 'text-muted-foreground' }, '-')
         }
         return h('pre', { class: 'text-xs bg-muted px-2 py-1 rounded max-w-md overflow-auto max-h-20' }, JSON.stringify(data, null, 2))