feat: adopt naive ui and refine shell interactions

2026-05-21 20:53:24 +08:00
parent 6d8acce295
commit 78b1c952e7
13 changed files with 1046 additions and 572 deletions
@@ -1,12 +1,90 @@
 <script setup lang="ts">
+import { NConfigProvider, NDialogProvider, NGlobalStyle, NMessageProvider, NNotificationProvider, type GlobalThemeOverrides } from 'naive-ui'
 import AppHeader from '@/components/layout/AppHeader.vue'
+
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#0f766e',
+    primaryColorHover: '#115e59',
+    primaryColorPressed: '#134e4a',
+    primaryColorSuppl: '#0f766e',
+    infoColor: '#0369a1',
+    successColor: '#0f766e',
+    warningColor: '#d97706',
+    errorColor: '#dc2626',
+    borderRadius: '0px',
+    borderRadiusSmall: '0px',
+    fontFamily: '"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif',
+    fontFamilyMono: '"IBM Plex Mono", "SFMono-Regular", monospace',
+    bodyColor: '#f3f7fb',
+    cardColor: '#ffffff',
+    modalColor: '#ffffff',
+    popoverColor: '#ffffff',
+    tableColor: '#ffffff',
+    textColorBase: '#0f172a',
+    textColor1: '#0f172a',
+    textColor2: '#334155',
+    textColor3: '#64748b',
+    textColorDisabled: '#94a3b8',
+    dividerColor: '#d9e3ee',
+    borderColor: '#d9e3ee',
+    inputColor: '#ffffff',
+  },
+  Button: {
+    borderRadiusTiny: '0px',
+    borderRadiusSmall: '0px',
+    borderRadiusMedium: '0px',
+    borderRadiusLarge: '0px',
+    textColorPrimary: '#0f172a',
+    textColorHoverPrimary: '#0f172a',
+  },
+  Card: {
+    borderRadius: '0px',
+    borderRadiusEmbedded: '0px',
+    paddingMedium: '24px',
+  },
+  Input: {
+    borderRadius: '0px',
+  },
+  Select: {
+    peers: {
+      InternalSelection: {
+        borderRadius: '0px',
+      },
+    },
+  },
+  Tabs: {
+    tabBorderRadius: '0px',
+  },
+  Tag: {
+    borderRadius: '0px',
+  },
+  Alert: {
+    borderRadius: '0px',
+  },
+  Modal: {
+    borderRadius: '0px',
+  },
+}
 </script>

 <template>
-  <div class="min-h-screen bg-gray-50 flex flex-col">
-    <AppHeader />
-    <main class="flex-1">
-      <RouterView />
-    </main>
-  </div>
+  <NConfigProvider :theme-overrides="themeOverrides">
+    <NGlobalStyle />
+    <NDialogProvider>
+      <NNotificationProvider>
+        <NMessageProvider>
+          <div class="min-h-screen flex flex-col bg-[radial-gradient(circle_at_top_left,_rgba(12,148,136,0.12),_transparent_28%),linear-gradient(180deg,#f8fbfd_0%,#eef4f8_100%)]">
+            <AppHeader />
+            <main class="relative flex-1">
+              <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(15,23,42,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(15,23,42,0.03)_1px,transparent_1px)] bg-[size:32px_32px] opacity-35"></div>
+              <div class="relative">
+                <RouterView />
+              </div>
+            </main>
+          </div>
+        </NMessageProvider>
+      </NNotificationProvider>
+    </NDialogProvider>
+  </NConfigProvider>
 </template>