mirror of
https://github.com/lukaszraczylo/traefik-llmgateway.git
synced 2026-10-13 04:58:50 +00:00
lukaszraczylo
60d66ca147
Component-first admin-panel rework (operator directive), replacing hand-rolled patterns with the actual shadcn-vue library components rather than working around them. - Providers (OverviewView) and Groups (UsageView) now render as a real shadcn-vue Accordion: trigger is the summary line, content holds the detail (base URL, last refresh/error, model chips for providers; full stat grid + member users for groups) — the earlier hand-rolled second-<TableRow> toggle is retired. lib/provider-expand.ts's tested two-set expand-state module is unchanged; only the template now adapts it to Accordion's type="multiple" v-model via a writable computed instead of driving a plain v-if. - Usage view: expanding a group shows its member users' own usage rows — a client-side join on AdminUsageEntryView.groupName, which admin.go already sets per user (verified via admin_test.go's existing TestAdminUsage_MathAgainstSeededCounters; no backend change needed). - New DataTable.vue: the shadcn-vue DataTable pattern (@tanstack/vue-table, pinned to ^8.21.3 — the version whose API matches the documented pattern; npm's default "latest" resolves to v9, a breaking rewrite with a different API) factored into one reusable, generic component so every real table (users usage, aliases, a group's nested member list) gets clickable sortable headers with asc/desc indicators for free. usage-columns.ts holds the shared ColumnDef set; UsageTable.vue now delegates to DataTable. Groups themselves cannot be a literal <table> (Accordion wraps content in a <div>, illegal inside <tbody>), so their own sortability is driven by the same columns headlessly, surfaced as a small header-button toolbar above the Accordion. - Aliases table: alias id gets the ModelChip copy treatment (the alias name is the routable string); target stays plain text. - App.vue: dropped the max-w-6xl container — the panel now uses the full viewport width with responsive gutters (px-4 sm:px-6 lg:px-8). Table.vue already wraps every table in its own overflow-x-auto container, so a wide table still scrolls itself, never the page. shadcn-vue add accordion re-added @lucide/vue and required swapping its Chevron icons for FontAwesome (webui/README.md's own documented trap); components.json's iconLibrary/font keys stayed absent (verified main.css byte-identical after the add). Browser-verified against the real integration stack (real /admin over the Yaegi plugin, strict CSP incl. style-src 'self'): provider/group accordion expand, search auto-expand through the new Accordion adapter, sort toggles on aliases/users/groups-toolbar/nested-member tables, alias copy-to-clipboard, full-width at 1920px. Zero console errors (one unrelated MetaMask extension log).
39 lines
980 B
JSON
39 lines
980 B
JSON
{
|
|
"name": "webui",
|
|
"private": true,
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vue-tsc -b && vite build",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"@fortawesome/fontawesome-svg-core": "^7.3.1",
|
|
"@fortawesome/free-solid-svg-icons": "^7.3.1",
|
|
"@fortawesome/vue-fontawesome": "^3.3.3",
|
|
"@tanstack/vue-table": "^8.21.3",
|
|
"@vueuse/core": "^14.4.0",
|
|
"chart.js": "^4.5.1",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"pinia": "^4.0.3",
|
|
"reka-ui": "^2.10.3",
|
|
"shadcn-vue": "^2.8.2",
|
|
"tailwind-merge": "^3.6.0",
|
|
"tw-animate-css": "^1.4.0",
|
|
"vue": "^3.5.40",
|
|
"vue-chartjs": "^5.3.4"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/vite": "^4.3.3",
|
|
"@types/node": "^24.13.3",
|
|
"@vitejs/plugin-vue": "^6.0.8",
|
|
"@vue/tsconfig": "^0.9.1",
|
|
"tailwindcss": "^4.3.3",
|
|
"typescript": "~6.0.2",
|
|
"vite": "^8.2.0",
|
|
"vue-tsc": "^3.3.8"
|
|
}
|
|
}
|