From 50cef5195be8742f86ca8a18b6bd8fa3b4ecc37e Mon Sep 17 00:00:00 2001 From: overtrue Date: Mon, 27 Oct 2025 22:04:05 +0800 Subject: [PATCH] refactor: tailwindcss --- CLAUDE.md | 2 +- README.md | 6 +- app.vue | 35 +- assets/css/tailwind.css | 192 +- components.d.ts | 76 - components.json | 4 +- components/access-keys/change-password.vue | 23 +- components/access-keys/edit-item.vue | 23 +- components/access-keys/new-item.vue | 25 +- components/app/AppButton.vue | 85 - components/app/AppCard.vue | 2 +- components/app/AppInput.vue | 54 - components/app/AppSidebar.vue | 97 +- components/app/AppTabs.vue | 2 +- components/app/AppUploadZone.vue | 2 +- .../app/data-table/AppDataTablePagination.vue | 19 +- components/app/data-table/index.ts | 2 - components/app/data-table/useDataTable.ts | 23 +- components/app/index.ts | 2 - components/auth/heros/ripple.vue | 8 +- components/auth/heros/static.vue | 4 +- components/auth/heros/wordmap.vue | 4 +- components/buckets/info.vue | 69 +- components/buckets/new-form.vue | 25 +- components/copy-input.vue | 17 +- components/events-target/new.vue | 23 +- components/events/new-form.vue | 6 +- components/lifecycle/new-form.vue | 62 +- components/object/delete/task/item.vue | 10 +- components/object/info.vue | 95 +- components/object/list.vue | 122 +- components/object/new-form.vue | 15 +- components/object/preview-modal.vue | 14 +- components/object/task-stats.vue | 14 +- components/object/upload/picker.vue | 42 +- components/object/upload/task/item.vue | 20 +- components/object/versions.vue | 37 +- components/object/view.vue | 45 +- components/page/content.vue | 2 +- components/policies/form-item.vue | 15 +- components/replication/new-form.vue | 66 +- components/tiers/change-key.vue | 15 +- components/tiers/new-form.vue | 31 +- .../ui/aurora-background/AuroraBackground.vue | 10 +- components/ui/auto-form/AutoFormField.vue | 38 +- .../ui/auto-form/AutoFormFieldArray.vue | 2 +- components/ui/auto-form/utils.ts | 10 +- components/ui/breadcrumb/BreadcrumbList.vue | 2 +- .../ui/button-group/ButtonGroupSeparator.vue | 2 +- .../ui/calendar/CalendarCellTrigger.vue | 8 +- components/ui/chart-donut/DonutChart.vue | 57 +- components/ui/chart/ChartLegend.vue | 8 +- components/ui/chart/ChartSingleTooltip.vue | 10 +- components/ui/combobox/ComboboxGroup.vue | 2 +- components/ui/combobox/ComboboxItem.vue | 2 +- components/ui/command/CommandDialog.vue | 2 +- components/ui/command/CommandGroup.vue | 2 +- components/ui/command/CommandItem.vue | 2 +- .../context-menu/ContextMenuCheckboxItem.vue | 2 +- .../ui/context-menu/ContextMenuItem.vue | 2 +- .../ui/context-menu/ContextMenuRadioItem.vue | 2 +- components/ui/drawer/Drawer.vue | 6 +- .../DropdownMenuCheckboxItem.vue | 2 +- .../ui/dropdown-menu/DropdownMenuItem.vue | 2 +- .../dropdown-menu/DropdownMenuRadioItem.vue | 2 +- components/ui/field/FieldDescription.vue | 2 +- components/ui/field/FieldGroup.vue | 2 +- components/ui/field/FieldLabel.vue | 4 +- components/ui/field/index.ts | 8 +- components/ui/flip-words/FlipWords.vue | 7 +- components/ui/github-globe/GithubGlobe.vue | 85 +- components/ui/item/index.ts | 2 +- components/ui/kbd/Kbd.vue | 2 +- components/ui/menubar/MenubarCheckboxItem.vue | 2 +- components/ui/menubar/MenubarItem.vue | 2 +- components/ui/menubar/MenubarRadioItem.vue | 2 +- .../NavigationMenuIndicator.vue | 2 +- .../NavigationMenuViewport.vue | 2 +- components/ui/navigation-menu/index.ts | 2 +- .../ui/number-field/NumberFieldContent.vue | 2 +- components/ui/radiant-text/RadiantText.vue | 4 +- .../RangeCalendarCellTrigger.vue | 12 +- components/ui/resizable/ResizableHandle.vue | 2 +- components/ui/select/SelectContent.vue | 2 +- components/ui/select/SelectItem.vue | 2 +- components/ui/select/SelectTrigger.vue | 2 +- components/ui/sidebar/Sidebar.vue | 16 +- components/ui/sidebar/SidebarInset.vue | 2 +- components/ui/sidebar/SidebarMenuSkeleton.vue | 2 +- components/ui/sidebar/SidebarProvider.vue | 2 +- components/ui/sidebar/SidebarRail.vue | 2 +- components/ui/sidebar/index.ts | 4 +- components/ui/stepper/StepperIndicator.vue | 2 +- components/ui/stepper/StepperItem.vue | 2 +- components/ui/stepper/StepperSeparator.vue | 2 +- components/ui/world-map/WorldMap.vue | 4 +- components/user-dropdown.vue | 34 +- components/users/group-edit.vue | 2 +- components/users/group/new.vue | 16 +- components/users/group/policies.vue | 20 +- .../users/group/set-policies-mutiple.vue | 18 +- components/users/tabs/group.vue | 2 +- components/users/tabs/user.vue | 2 +- components/users/user-edit.vue | 2 +- components/users/user/account.vue | 33 +- components/users/user/acedit.vue | 23 +- components/users/user/groups.vue | 20 +- components/users/user/new.vue | 18 +- components/users/user/notice.vue | 10 +- components/users/user/policies.vue | 20 +- composables/useObject.ts | 65 +- config/theme.ts | 21 - docs/shadcn-migration-plan.md | 25 +- docs/shadcn-migration-todo.md | 8 +- layouts/default.vue | 19 +- lib/aws4fetch.ts | 16 +- lib/delete-task-manager.ts | 2 +- lib/ui/message.ts | 4 +- lib/ui/notification.ts | 4 +- lib/upload-task-manager.ts | 2 +- nuxt.config.ts | 30 +- package-lock.json | 21675 ---------------- package.json | 15 +- pages/access-keys/index.vue | 74 +- pages/auth/login.vue | 126 +- pages/browser/[bucket]/[[key]].vue | 7 +- pages/browser/index.vue | 90 +- pages/config.vue | 21 +- pages/events-target/index.vue | 33 +- pages/events/index.vue | 5 +- pages/import-export/index.vue | 24 +- pages/kms-test.vue | 99 +- pages/license/components/license-article.vue | 2 +- pages/license/index.vue | 16 +- pages/lifecycle/index.vue | 101 +- pages/performance/index.vue | 24 +- pages/policies/index.vue | 39 +- pages/replication/index.vue | 74 +- pages/settings.vue | 19 +- pages/sse/index.vue | 1285 +- pages/tiers/index.vue | 167 +- pnpm-lock.yaml | 4245 ++- tailwind.config.ts | 78 - tests/utils/bucket-policy.test.ts | 36 +- .../utils/config-helpers.performance.test.ts | 12 +- utils/bucket-policy.ts | 73 +- utils/error-handler.ts | 2 +- utils/functions.ts | 7 +- 148 files changed, 3885 insertions(+), 26678 deletions(-) delete mode 100644 components.d.ts delete mode 100644 components/app/AppButton.vue delete mode 100644 components/app/AppInput.vue delete mode 100644 config/theme.ts delete mode 100644 package-lock.json delete mode 100644 tailwind.config.ts diff --git a/CLAUDE.md b/CLAUDE.md index 2ad9fe9..fcdac18 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -24,7 +24,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co - **Frontend**: Vue 3 with Composition API and ` diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index a2be5be..de8ecee 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -1,87 +1,108 @@ @import 'tailwindcss'; +@import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - --radius: 0.5rem; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; - } - - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - } -} - :root { - --sidebar: hsl(0 0% 98%); - --sidebar-foreground: hsl(240 5.3% 26.1%); - --sidebar-primary: hsl(240 5.9% 10%); - --sidebar-primary-foreground: hsl(0 0% 98%); - --sidebar-accent: hsl(240 4.8% 95.9%); - --sidebar-accent-foreground: hsl(240 5.9% 10%); - --sidebar-border: hsl(220 13% 91%); - --sidebar-ring: hsl(217.2 91.2% 59.8%); + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); } .dark { - --sidebar: hsl(240 5.9% 10%); - --sidebar-foreground: hsl(240 4.8% 95.9%); - --sidebar-primary: hsl(224.3 76.3% 48%); - --sidebar-primary-foreground: hsl(0 0% 100%); - --sidebar-accent: hsl(240 3.7% 15.9%); - --sidebar-accent-foreground: hsl(240 4.8% 95.9%); - --sidebar-border: hsl(240 3.7% 15.9%); - --sidebar-ring: hsl(217.2 91.2% 59.8%); + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.145 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.145 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.985 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.396 0.141 25.723); + --destructive-foreground: oklch(0.637 0.237 25.331); + --border: oklch(0.269 0 0); + --input: oklch(0.269 0 0); + --ring: oklch(0.439 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(0.269 0 0); + --sidebar-ring: oklch(0.439 0 0); } @theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); @@ -90,6 +111,7 @@ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); + --animate-accordion-down: accordion-down 0.2s ease-out; --animate-accordion-up: accordion-up 0.2s ease-out; @@ -120,3 +142,27 @@ @apply bg-background text-foreground; } } + +@layer base { + :root { + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + + .dark { + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} diff --git a/components.d.ts b/components.d.ts deleted file mode 100644 index 04201fa..0000000 --- a/components.d.ts +++ /dev/null @@ -1,76 +0,0 @@ -/* eslint-disable */ -// @ts-nocheck -// Generated by unplugin-vue-components -// Read more: https://github.com/vuejs/core/pull/3399 -export {} - -/* prettier-ignore */ -declare module 'vue' { - export interface GlobalComponents { - NAlert: typeof import('naive-ui')['NAlert'] - NAvatar: typeof import('naive-ui')['NAvatar'] - NBadge: typeof import('naive-ui')['NBadge'] - NButton: typeof import('naive-ui')['NButton'] - NButtonGroup: typeof import('naive-ui')['NButtonGroup'] - NCard: typeof import('naive-ui')['NCard'] - NCarousel: typeof import('naive-ui')['NCarousel'] - NCarouselItem: typeof import('naive-ui')['NCarouselItem'] - NCheckbox: typeof import('naive-ui')['NCheckbox'] - NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup'] - NCollapse: typeof import('naive-ui')['NCollapse'] - NCollapseItem: typeof import('naive-ui')['NCollapseItem'] - NConfigProvider: typeof import('naive-ui')['NConfigProvider'] - NDataTable: typeof import('naive-ui')['NDataTable'] - NDatePicker: typeof import('naive-ui')['NDatePicker'] - NDescriptions: typeof import('naive-ui')['NDescriptions'] - NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem'] - NDialogProvider: typeof import('naive-ui')['NDialogProvider'] - NDrawer: typeof import('naive-ui')['NDrawer'] - NDrawerContent: typeof import('naive-ui')['NDrawerContent'] - NDropdown: typeof import('naive-ui')['NDropdown'] - NDynamicInput: typeof import('naive-ui')['NDynamicInput'] - NEmpty: typeof import('naive-ui')['NEmpty'] - NFlex: typeof import('naive-ui')['NFlex'] - NForm: typeof import('naive-ui')['NForm'] - NFormItem: typeof import('naive-ui')['NFormItem'] - NFormItemGi: typeof import('naive-ui')['NFormItemGi'] - NFormItemGridItem: typeof import('naive-ui')['NFormItemGridItem'] - NGi: typeof import('naive-ui')['NGi'] - NGrid: typeof import('naive-ui')['NGrid'] - NInput: typeof import('naive-ui')['NInput'] - NInputGroup: typeof import('naive-ui')['NInputGroup'] - NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'] - NInputNumber: typeof import('naive-ui')['NInputNumber'] - NLayout: typeof import('naive-ui')['NLayout'] - NLayoutSider: typeof import('naive-ui')['NLayoutSider'] - NList: typeof import('naive-ui')['NList'] - NListItem: typeof import('naive-ui')['NListItem'] - NMenu: typeof import('naive-ui')['NMenu'] - NMessageProvider: typeof import('naive-ui')['NMessageProvider'] - NModal: typeof import('naive-ui')['NModal'] - NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] - NP: typeof import('naive-ui')['NP'] - NPageHeader: typeof import('naive-ui')['NPageHeader'] - NPopconfirm: typeof import('naive-ui')['NPopconfirm'] - NProgress: typeof import('naive-ui')['NProgress'] - NRadio: typeof import('naive-ui')['NRadio'] - NRadioGroup: typeof import('naive-ui')['NRadioGroup'] - NScrollbar: typeof import('naive-ui')['NScrollbar'] - NSelect: typeof import('naive-ui')['NSelect'] - NSpace: typeof import('naive-ui')['NSpace'] - NSpin: typeof import('naive-ui')['NSpin'] - NStatistic: typeof import('naive-ui')['NStatistic'] - NSwitch: typeof import('naive-ui')['NSwitch'] - NTabPane: typeof import('naive-ui')['NTabPane'] - NTabs: typeof import('naive-ui')['NTabs'] - NTag: typeof import('naive-ui')['NTag'] - NText: typeof import('naive-ui')['NText'] - NThing: typeof import('naive-ui')['NThing'] - NTooltip: typeof import('naive-ui')['NTooltip'] - NUpload: typeof import('naive-ui')['NUpload'] - NUploadDragger: typeof import('naive-ui')['NUploadDragger'] - NVirtualList: typeof import('naive-ui')['NVirtualList'] - RouterLink: typeof import('vue-router')['RouterLink'] - RouterView: typeof import('vue-router')['RouterView'] - } -} diff --git a/components.json b/components.json index f75e4d0..77dd417 100644 --- a/components.json +++ b/components.json @@ -1,9 +1,9 @@ { "$schema": "https://shadcn-vue.com/schema.json", - "style": "default", + "style": "new-york", "typescript": true, "tailwind": { - "config": "tailwind.config.ts", + "config": "", "css": "assets/css/tailwind.css", "baseColor": "neutral", "cssVariables": true, diff --git a/components/access-keys/change-password.vue b/components/access-keys/change-password.vue index b734854..2e28bbf 100644 --- a/components/access-keys/change-password.vue +++ b/components/access-keys/change-password.vue @@ -1,5 +1,9 @@ - - diff --git a/components/app/AppCard.vue b/components/app/AppCard.vue index 85db845..571baa0 100644 --- a/components/app/AppCard.vue +++ b/components/app/AppCard.vue @@ -31,7 +31,7 @@ const props = withDefaults( + \ No newline at end of file diff --git a/components/object/list.vue b/components/object/list.vue index 98864bc..fb70403 100644 --- a/components/object/list.vue +++ b/components/object/list.vue @@ -1,8 +1,8 @@ + \ No newline at end of file diff --git a/components/object/new-form.vue b/components/object/new-form.vue index 3feb117..4d96943 100644 --- a/components/object/new-form.vue +++ b/components/object/new-form.vue @@ -5,27 +5,30 @@ {{ t('Overwrite Warning') }} -
- {{ t('Close') }} - + +
+ \ No newline at end of file diff --git a/components/object/preview-modal.vue b/components/object/preview-modal.vue index d4cf730..26c72dc 100644 --- a/components/object/preview-modal.vue +++ b/components/object/preview-modal.vue @@ -2,19 +2,19 @@
- +
-
+