first commit

resources/admin/styles/element.scss

@@ -0,0 +1,61 @@
+@forward 'element-plus/theme-chalk/src/common/var' with (
+  // 基础色调
+  $colors:
+    (
+      'primary': (
+        'base': #4f46e5,
+      ),
+      'success': (
+        'base': #059669,
+      ),
+      'warning': (
+        'base': #fbbf24,
+      ),
+      'danger': (
+        'base': #f43f5e,
+      ),
+      'error': (
+        'base': #f43f5e,
+      ),
+      'info': (
+        'base': #909399,
+      )
+    ),
+  $input: ('border-radius': 8px)
+);
+
+@use 'element-plus/theme-chalk/src/index' as *;
+
+.el-table {
+  border-radius: var(--el-table-border-radius);
+
+  .el-table__row {
+    @apply h-14;
+  }
+
+  .el-table__header {
+    @apply h-14 bg-black;
+  }
+}
+
+.el-tabs {
+  border-radius: var(--el-table-border-radius);
+}
+
+.el-card {
+  border-radius: var(--el-card-border-radius) !important;
+}
+
+.el-pagination {
+    button {
+        border-radius: var(--el-page-border-radius) !important;
+    }
+    .el-pager {
+        .number {
+            border-radius: var(--el-page-border-radius) !important;
+        }
+        .more {
+            border-radius: var(--el-page-border-radius) !important;
+        }
+    }
+}

resources/admin/styles/index.scss

@@ -0,0 +1,12 @@
+// tailwindcss
+@import 'tailwind.css';
+
+// element style 必须在 tailwindcss 之后，不然样式会被 tailwindcss 覆盖
+// issue 在这里 https://github.com/tailwindlabs/tailwindcss/discussions/5969
+@import 'element';
+
+// 后台管理定义的 css 变量
+@import 'var';
+
+// theme
+@import 'theme/index';

resources/admin/styles/tailwind.css

@@ -0,0 +1,22 @@
+@tailwind base;
+
+@layer base {
+    .layout-sider {
+        @apply z-0 absolute top-16 left-0 sm:static transition-width duration-300 ease-linear
+    }
+
+    .layout-sider-open {
+        @apply layout-sider w-64
+    }
+
+    .layout-sider-hidden { 
+        @apply layout-sider w-0 lg:w-20 
+    }
+    
+    .layout-sider-mask {
+        @apply block lg:hidden z-40 w-full h-full absolute
+    }
+}
+
+@tailwind components;
+@tailwind utilities;

resources/admin/styles/theme/dark.scss

@@ -0,0 +1,36 @@
+@import 'element-plus/theme-chalk/dark/css-vars.css';
+
+html.dark {
+  background-color: #161d31;
+  // 侧边栏背景色
+  --sider-bg-color: #283046;
+  // header logo 文字颜色
+  --header-logo-text-color: #ffffff;
+  // 侧边栏菜单的文字颜色
+  --sider-menu-text-color: #ffffff;
+  // sub menu bg color
+  --sider-sub-menu-bg-color: #161d31;
+  // 侧边栏子菜单 hover 的颜色
+  --sider-sub-menu-hover-bg-color: #343d55;
+  // 激活文字颜色
+  --sider-ment-active-text-color: var(--el-color-primary);
+  // 激活时背景色
+  --side-active-menu-bg-color: rgba(255, 255, 255, 0.08);
+
+  /* 自定义深色背景颜色 */
+  --el-bg-color: var(--sider-sub-menu-hover-bg-color);
+
+  --el-fill-color-blank: var(--sider-bg-color);
+
+  --el-bg-color-overlay: var(--sider-bg-color);
+
+  --header-bg-color: var(--sider-bg-color);
+
+  // border color
+  --el-border-color-lighter: #3b4253;
+
+  --el-fill-color-light: #161d31;
+
+  // side sub menu margin
+  --sider-sub-menu-bg-margin: 0px 0.05rem;
+}

resources/admin/styles/theme/index.scss

@@ -0,0 +1,3 @@
+@import "light";
+
+@import "dark";

resources/admin/styles/theme/light.scss

@@ -0,0 +1,25 @@
+html {
+  background-color: rgb(241, 245, 249);
+  // 侧边颜色
+  --sider-bg-color: #ffffff;
+  // header logo 背景颜色
+  --header-logo-bg-color: var(--sider-bg-color);
+  // 侧边栏菜单的文字颜色
+  --sider-menu-text-color: #625f6e;
+  // sub menu bg color
+  --sider-sub-menu-bg-color: #ffffff;
+  // 侧边栏子菜单 hover 的颜色
+  --sider-sub-menu-hover-bg-color: #f6f6f6;
+  // 菜单激活时文字的颜色
+  --sider-ment-active-text-color: var(--el-color-primary);
+  // 激活菜单背景
+  --side-active-menu-bg-color: rgba(36, 153, 239, 0.06);
+  // header logo 文字颜色
+  --header-logo-text-color: #625f6e;
+  // header bg color
+  --header-bg-color: #ffffff;
+  // 侧边栏菜单的背景色
+  --sider-menu-bg-color: var(--sider-bg-color);
+
+  --el-table-tr-bg-color: black;
+}

resources/admin/styles/var.scss

@@ -0,0 +1,12 @@
+:root {
+    --el-menu-base-level-padding: 20px;
+    // 后台自定义
+    // el-table
+    --el-table-border-radius: 8px;
+    // el-tabs
+    --el-tabs-border-radius: 8px;
+    // el-card
+    --el-card-border-radius: 8px;
+    // -el-page
+    --el-page-border-radius: 8px;
+}