feat(ollama): 支持 Cloud 官方用量自动刷新

frontend/src/components/common/DataTable.vue

@@ -70,12 +70,13 @@
           <div
             v-for="column in dataColumns"
             :key="column.key"
-            class="flex items-start justify-between gap-4"
+            :data-field="column.key"
+            class="flex min-w-0 items-start justify-between gap-4"
           >
             <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400">
               {{ column.label }}
             </span>
-            <div class="text-right text-sm text-gray-900 dark:text-gray-100">
+            <div class="min-w-0 max-w-full text-right text-sm text-gray-900 dark:text-gray-100">
               <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]" :expanded="actionsExpanded">
                 {{ column.formatter ? column.formatter(row[column.key], row) : row[column.key] }}
               </slot>

frontend/src/components/common/__tests__/DataTable.spec.ts

@@ -309,6 +309,35 @@ describe('DataTable', () => {
     expect(wrapper.emitted('selectionChange')?.at(-1)?.[0]).toEqual([99, 2])
   })
 
+  it('keeps the single usage field shrinkable in a 320px mobile card', () => {
+    stubMobileMatchMedia()
+    const viewport = document.createElement('div')
+    viewport.style.width = '320px'
+    document.body.appendChild(viewport)
+    const wrapper = mount(DataTable, {
+      attachTo: viewport,
+      props: {
+        columns: [{ key: 'usage', label: 'Usage' }],
+        data: [{ id: 1, usage: 'snapshot' }],
+        rowKey: 'id'
+      },
+      slots: {
+        'cell-usage': '<div data-test="usage-cell">snapshot</div>'
+      }
+    })
+
+    expect(viewport.style.width).toBe('320px')
+    expect(wrapper.findAll('[data-field="usage"]')).toHaveLength(1)
+    expect(wrapper.find('[data-field="ollama_cloud_usage"]').exists()).toBe(false)
+    const field = wrapper.get('[data-field="usage"]')
+    expect(field.classes()).toContain('min-w-0')
+    expect(field.get('div').classes()).toEqual(expect.arrayContaining(['min-w-0', 'max-w-full']))
+    expect(wrapper.findAll('[data-test="usage-cell"]')).toHaveLength(1)
+
+    wrapper.unmount()
+    viewport.remove()
+  })
+
   it('offers current-page select all in the mobile card layout', async () => {
     stubMobileMatchMedia()
     const wrapper = mount(DataTable, {