From f66d388ff73a71f1d7d5ddcdbba93353365d6462 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Thu, 29 Aug 2024 14:28:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E6=A0=B7=E5=BC=8F=E5=92=8C=20CSS=20=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 1b0cee8..ec351c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,11 @@
     :inline-theme-disabled="configProviderProps.inlineThemeDisabled"
     :locale="configProviderProps.locale"
     :style="{
+      '--box-shadow-1': themeVars.boxShadow1,
+      '--box-shadow-2': themeVars.boxShadow2,
+      '--box-shadow-3': themeVars.boxShadow3,
+      '--color-action': themeVars.actionColor,
+      '--color-border': themeVars.borderColor,
       '--color-error': themeCommon.errorColor,
       '--color-info': themeCommon.infoColor,
       '--color-primary': themeCommon.primaryColor,
@@ -30,6 +35,7 @@
 <script setup>
 import {
   NConfigProvider, NGlobalStyle,
+  useThemeVars,
 } from 'naive-ui';
 
 import {
@@ -43,6 +49,9 @@ const themeOverrides = configProviderProps.themeOverrides;
 
 /** 主题变量配置 - common */
 const themeCommon = themeOverrides.common;
+
+/** 默认主题变量 */
+const themeVars = useThemeVars();
 </script>
 
 <style lang="less">
@@ -78,6 +87,17 @@ const themeCommon = themeOverrides.common;
   }
 }
 
+// 预设样式
+.shadow-1 {
+  box-shadow: var(--box-shadow-1);
+}
+.shadow-2 {
+  box-shadow: var(--box-shadow-2);
+}
+.shadow-3 {
+  box-shadow: var(--box-shadow-3);
+}
+
 html, body, #app, .n-config-provider {
   width: 100%;
   height: 100%;
@@ -88,10 +108,15 @@ html, body {
   -webkit-tap-highlight-color: transparent;
 }
 html {
+  box-sizing: border-box;
   background-color: #FFF;
   color: var(--color-black);
   font-size: 16px;
   line-height: 1;
+
+  * {
+    box-sizing: inherit;
+  }
 }
 
 .n-config-provider {
@@ -105,11 +130,42 @@ html {
 
 .app-aside-wrapper {
   width: 64px;
-  border-right: 1px solid var(--color-gray);
+  border-right: 1px solid var(--color-border);
 }
 
 .app-view {
   flex-grow: 1;
   width: 0;
+  background-color: var(--color-action);
+
+  &.flex-col {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .app-view-header {
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    height: 64px;
+    background-color: #FFF;
+    border-bottom: 1px solid var(--color-border);
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .app-view-content {
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    background-color: #FFF;
+
+    &.with-margin {
+      margin: 20px;
+      width: calc(100% - 40px);
+      height: calc(100% - 40px);
+      border: 1px solid var(--color-border);
+    }
+  }
 }
 </style>