From c3a6df298b709cd9314ec36ae6f520ddce5b78b6 Mon Sep 17 00:00:00 2001
From: overtrue <anzhengchao@gmail.com>
Date: Thu, 19 Dec 2024 22:18:01 +0800
Subject: [PATCH] style: primary color

---
 app.vue                    |  8 +++-----
 assets/css/overrides.css   |  0
 components/page/header.vue |  2 +-
 components/sidebar.vue     | 12 +++++++-----
 config/theme.ts            | 21 +++++++++++++++++++++
 layouts/default.vue        | 23 ++++++++++-------------
 nuxt.config.ts             |  2 +-
 tailwind.config.ts         | 15 ++++++++++++++-
 8 files changed, 57 insertions(+), 26 deletions(-)
 create mode 100644 assets/css/overrides.css
 create mode 100644 config/theme.ts

diff --git a/app.vue b/app.vue
index bfe8d44..4f81209 100644
--- a/app.vue
+++ b/app.vue
@@ -1,9 +1,6 @@
 <template>
   <div :class="theme.name === darkTheme.name ? 'dark' : ''">
-    <n-config-provider
-      :theme="theme"
-      :locale="locale"
-      :date-locale="dateLocale">
+    <n-config-provider :theme="theme" :locale="locale" :theme-overrides="themeOverrides" :date-locale="dateLocale">
       <n-dialog-provider>
         <n-notification-provider>
           <n-message-provider>
@@ -19,12 +16,13 @@
 <script lang="ts" setup>
 import {
   darkTheme,
+  dateZhCN, zhCN,
   type GlobalTheme,
   type NDateLocale,
   type NLocale
 } from 'naive-ui'
-import { dateZhCN, zhCN } from 'naive-ui'
 import { ref } from 'vue'
+import { themeOverrides } from '~/config/theme'
 
 const theme = ref<GlobalTheme | null>(darkTheme)
 const locale = ref<NLocale | null>(zhCN)
diff --git a/assets/css/overrides.css b/assets/css/overrides.css
new file mode 100644
index 0000000..e69de29
diff --git a/components/page/header.vue b/components/page/header.vue
index 328886d..792f4cc 100644
--- a/components/page/header.vue
+++ b/components/page/header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 px-6 min-h-16 border-b dark:border-neutral-800 flex justify-between bg-gray-100 dark:bg-neutral-900">
+  <div class="p-4 sticky top-0 z-10 px-6 h-16 border-b dark:border-neutral-800 flex justify-between bg-gray-100 dark:bg-neutral-900">
     <slot name="title"></slot>
     <slot name="actions"></slot>
   </div>
diff --git a/components/sidebar.vue b/components/sidebar.vue
index fb5de57..5c660a4 100644
--- a/components/sidebar.vue
+++ b/components/sidebar.vue
@@ -34,9 +34,9 @@ const options = computed(() => {
 
 </script>
 <template>
-  <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240" :native-scrollbar="false" :collapsed="isCollapsed">
-    <div class="flex flex-col min-h-screen gap-4">
-      <div class="border-b dark:border-neutral-800 flex flex-wrap max-h-16 items-center p-4" :class="isCollapsed ? 'justify-center' : 'justify-between'">
+  <n-layout-sider bordered class="min-h-full" collapse-mode="width" :collapsed-width="64" :width="240" :native-scrollbar="false" :collapsed="isCollapsed">
+    <div class="flex flex-col h-screen overflow-hidden gap-4 relative">
+      <div class="border-b dark:border-neutral-800 flex flex-wrap h-16 items-center p-4" :class="isCollapsed ? 'justify-center' : 'justify-between'">
         <div>
           <n-avatar v-if="isCollapsed" class="text-center text-2xl leading-none">{{ appConfig.name.substring(0, 1) }}</n-avatar>
           <h2 v-else class="text-center text-2xl">
@@ -49,13 +49,15 @@ const options = computed(() => {
         </div>
       </div>
 
-      <n-menu :indent="26" :root-indent="12" :collapsed-width="64" :collapsed-icon-size="22" :options="options" default-expand-all class="flex-1" />
+      <div class="overflow-y-auto flex-1">
+        <n-menu :indent="26" :root-indent="12" :collapsed-width="64" :collapsed-icon-size="22" :options="options" default-expand-all class="flex-1" />
+      </div>
 
       <div v-if="isCollapsed" class="w-full flex items-center justify-center py-4">
         <Icon name="ri:menu-unfold-fill" class="cursor-pointer text-xl" @click="toggleSidebar" />
       </div>
 
-      <div class="p-4">
+      <div class="p-4 sticky bottom-0 left-0 right-0">
         <UserDropdown :isCollapsed="isCollapsed" />
       </div>
     </div>
diff --git a/config/theme.ts b/config/theme.ts
new file mode 100644
index 0000000..d1899d3
--- /dev/null
+++ b/config/theme.ts
@@ -0,0 +1,21 @@
+import type { GlobalThemeOverrides } from "naive-ui";
+
+export const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#0396D0',
+    primaryColorHover: '#0396D0',
+  },
+  // Button: {
+  //   textColorHover: '#0396D0',
+  //   borderHover: '#0396D0',
+  //   borderActive: '#0396D0',
+  // },
+  // Select: {
+  //   peers: {
+  //     InternalSelection: {
+  //       textColor: '#FF0000'
+  //     }
+  //   }
+  // }
+  // ...
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 4bece60..680f9bb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,17 +1,14 @@
 <template>
-  <!-- 全局化配置设置内部组件的主题、语言。 -->
-  <n-config-provider class="wh-full" inline-theme-disabled>
-    <n-space vertical>
-      <n-layout class="h-full">
-        <n-layout has-sider>
-          <Sidebar />
-          <div class="min-h-screen flex flex-col flex-1">
-            <div class="flex-1">
-              <slot />
-            </div>
+  <n-space vertical>
+    <n-layout class="h-full">
+      <n-layout has-sider class="h-full">
+        <sidebar />
+        <div class="h-screen overflow-y-auto flex flex-col flex-1">
+          <div class="flex-1">
+            <slot />
           </div>
-        </n-layout>
+        </div>
       </n-layout>
-    </n-space>
-  </n-config-provider>
+    </n-layout>
+  </n-space>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d4dd006..857db16 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -6,7 +6,7 @@ const isDev = process.env.NODE_ENV === 'development'
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   ssr: false,
-  css: ['~/assets/css/tailwind.css'],
+  css: ['~/assets/css/tailwind.css', '~/assets/css/overrides.css'],
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },
   modules: [
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cab38c0..0aa7dcc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,7 +10,20 @@ export default {
   ],
   darkMode: 'class', // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: 'rgba(var(--n-primary-color))',
+        'primary-1': 'rgba(var(--n-primary-color-1))',
+        'primary-2': 'rgba(var(--n-primary-color-2))',
+        'primary-3': 'rgba(var(--n-primary-color-3))',
+        // ...
+        'primary-10': 'rgba(var(--n-primary-color-10))',
+        'primary-hover': 'rgba(var(--n-primary-color-hover))',
+        'primary-pressed': 'rgba(var(--n-primary-color-pressed))',
+        'primary-focus': 'rgba(var(--n-primary-color-focus))',
+        'primary-disabled': 'rgba(var(--n-primary-color-disabled))'
+      }
+    },
   },
   plugins: [],
 }