@admin-core/design 0.1.0 → 0.2.1

package/src/css/base.css

@@ -0,0 +1,145 @@
+/**
+ * 基础样式
+ * 全局重置和基础元素样式
+ */
+@layer base {
+  /* 全局盒模型和边框重置 */
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+    border-color: hsl(var(--border));
+  }
+
+  /* HTML 根元素样式 */
+  html {
+    color: hsl(var(--foreground));
+    background-color: hsl(var(--background));
+    font-family: var(--font-family);
+    font-size: var(--font-size-base, 16px);
+    line-height: 1.15;
+    font-variation-settings: normal;
+    text-size-adjust: 100%;
+    font-synthesis-weight: none;
+    scroll-behavior: smooth;
+    text-rendering: optimizelegibility;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* 应用容器、body 和 html 全高度 */
+  #app,
+  body,
+  html {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Body 样式 */
+  body {
+    min-height: 100vh;
+  }
+
+  /* 链接样式重置 */
+  a,
+  a:active,
+  a:hover,
+  a:link,
+  a:visited {
+    text-decoration: none;
+  }
+
+  /* 视图过渡动画配置 */
+  ::view-transition-new(root),
+  ::view-transition-old(root) {
+    animation: none;
+    mix-blend-mode: normal;
+  }
+
+  /* 旧视图层级 */
+  ::view-transition-old(root) {
+    z-index: 1;
+  }
+
+  /* 新视图层级 */
+  ::view-transition-new(root) {
+    z-index: 2147483646;
+  }
+
+  /* 暗色模式下的视图过渡层级反转 */
+  html.dark::view-transition-old(root) {
+    z-index: 2147483646;
+  }
+
+  html.dark::view-transition-new(root) {
+    z-index: 1;
+  }
+
+  /* 输入框占位符样式 */
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1;
+    color: hsl(var(--input-placeholder));
+  }
+
+  /* Select 下拉框样式 */
+  select {
+    background-color: hsl(var(--input-background)) !important;
+    color: hsl(var(--foreground)) !important;
+    color-scheme: light dark;
+  }
+
+  /* 深色模式下的 select */
+  html.dark select {
+    color-scheme: dark;
+    background-color: hsl(var(--background)) !important;
+  }
+
+  /* Select 选项样式 - 尽力而为，浏览器支持有限 */
+  select option {
+    background-color: hsl(var(--background)) !important;
+    color: hsl(var(--foreground)) !important;
+  }
+
+  html.dark select option {
+    background-color: hsl(var(--background)) !important;
+    color: hsl(var(--foreground)) !important;
+  }
+
+  /* 移除数字输入框的增减按钮 */
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+
+  /* 自定义滚动条样式（仅非 macOS 系统） */
+  html:not([data-platform='macOs']) {
+    /* 滚动条尺寸 */
+    ::-webkit-scrollbar {
+      height: 10px;
+      width: 10px;
+    }
+
+    /* 滚动条滑块 */
+    ::-webkit-scrollbar-thumb {
+      background-color: hsl(var(--border));
+      border-radius: 0.125rem;
+      border: none;
+    }
+
+    /* 滚动条轨道 */
+    ::-webkit-scrollbar-track {
+      border-radius: 0.125rem;
+      border: none;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    /* 隐藏滚动条按钮 */
+    ::-webkit-scrollbar-button {
+      display: none;
+    }
+  }
+}

package/src/css/components.css

@@ -0,0 +1,96 @@
+/**
+ * 组件样式
+ * 可复用的组件类
+ */
+@layer components {
+  /* 水平居中布局 */
+  .flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 垂直居中布局 */
+  .flex-col-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 卡片容器样式 */
+  .card-box {
+    background-color: hsl(var(--card));
+    color: hsl(var(--card-foreground));
+    border: 1px solid hsl(var(--border));
+    border-radius: 0.75rem;
+  }
+
+  /* 轮廓框样式 */
+  .outline-box {
+    position: relative;
+    cursor: pointer;
+    border-radius: 0.375rem;
+    padding: 0.25rem;
+    outline: 1px solid hsl(var(--border));
+  }
+
+  /* 轮廓框悬停效果 */
+  .outline-box::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 20;
+    height: 0;
+    width: 1px;
+    border-radius: 0.125rem;
+    opacity: 0;
+    outline: 2px solid transparent;
+    transition: all 0.3s;
+  }
+
+  /* 激活状态的轮廓框 */
+  .outline-box.outline-box-active {
+    outline: 2px solid hsl(var(--primary));
+  }
+
+  .outline-box.outline-box-active::after {
+    display: none;
+  }
+
+  /* 非激活状态的悬停效果 */
+  .outline-box:not(.outline-box-active):hover::after {
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    padding: 0.25rem;
+    opacity: 1;
+    outline-color: hsl(var(--primary));
+  }
+
+  /* 链接样式 */
+  .admin-link {
+    color: hsl(var(--primary));
+    cursor: pointer;
+  }
+
+  .admin-link:hover {
+    opacity: 0.8;
+  }
+
+  .admin-link:active {
+    opacity: 0.6;
+  }
+}
+
+/* 反色模式 */
+html.invert-mode {
+  filter: invert(1);
+}
+
+/* 灰度模式 */
+html.grayscale-mode {
+  filter: grayscale(1);
+}

package/src/css/index.css

@@ -0,0 +1,21 @@
+/**
+ * @admin-core/design 样式系统入口
+ * 
+ * 包含：
+ * 1. Tailwind CSS v4 基础
+ * 2. 设计令牌（浅色/暗色主题）
+ * 3. 基础样式、组件样式、工具类
+ */
+
+/* Tailwind CSS v4 导入 */
+@import "tailwindcss";
+
+/* 导入设计令牌 */
+@import "../tokens/light.css";
+@import "../tokens/dark.css";
+
+/* 导入样式模块 */
+@import "./utilities.css";
+@import "./base.css";
+@import "./components.css";
+

package/src/css/integrations/ant-design-vue.css

@@ -0,0 +1,64 @@
+/**
+ * Ant Design Vue 主题集成
+ * 将 Admin Core 主题颜色映射到 Ant Design Vue
+ * 
+ * 使用方法：
+ * import '@admin-core/design/css/integrations/ant-design-vue.css'
+ */
+
+:root {
+  /* 主色 */
+  --ant-primary-color: hsl(var(--primary));
+  --ant-primary-color-hover: hsl(var(--primary) / 0.8);
+  --ant-primary-color-active: hsl(var(--primary) / 0.9);
+  --ant-primary-color-outline: hsl(var(--primary) / 0.2);
+  
+  /* 成功色 */
+  --ant-success-color: hsl(var(--success));
+  --ant-success-color-hover: hsl(var(--success) / 0.8);
+  --ant-success-color-active: hsl(var(--success) / 0.9);
+  --ant-success-color-outline: hsl(var(--success) / 0.2);
+  
+  /* 警告色 */
+  --ant-warning-color: hsl(var(--warning));
+  --ant-warning-color-hover: hsl(var(--warning) / 0.8);
+  --ant-warning-color-active: hsl(var(--warning) / 0.9);
+  --ant-warning-color-outline: hsl(var(--warning) / 0.2);
+  
+  /* 错误色 */
+  --ant-error-color: hsl(var(--destructive));
+  --ant-error-color-hover: hsl(var(--destructive) / 0.8);
+  --ant-error-color-active: hsl(var(--destructive) / 0.9);
+  --ant-error-color-outline: hsl(var(--destructive) / 0.2);
+  
+  /* 信息色 */
+  --ant-info-color: hsl(var(--info));
+  --ant-info-color-hover: hsl(var(--info) / 0.8);
+  --ant-info-color-active: hsl(var(--info) / 0.9);
+  
+  /* 文本颜色 */
+  --ant-text-color: hsl(var(--foreground));
+  --ant-text-color-secondary: hsl(var(--muted-foreground));
+  --ant-text-color-disabled: hsl(var(--muted-foreground) / 0.4);
+  
+  /* 边框颜色 */
+  --ant-border-color-base: hsl(var(--border));
+  --ant-border-color-split: hsl(var(--border) / 0.5);
+  
+  /* 背景颜色 */
+  --ant-background-color-base: hsl(var(--background));
+  --ant-background-color-light: hsl(var(--background-deep));
+  --ant-component-background: hsl(var(--card));
+  
+  /* 阴影 */
+  --ant-box-shadow-base: 0 2px 8px hsl(var(--foreground) / 0.1);
+}
+
+/* 暗色模式 */
+.dark {
+  --ant-background-color-base: hsl(var(--background));
+  --ant-background-color-light: hsl(var(--background-deep));
+  --ant-component-background: hsl(var(--card));
+  --ant-text-color: hsl(var(--foreground));
+  --ant-border-color-base: hsl(var(--border));
+}

package/src/css/integrations/arco-design.css

@@ -0,0 +1,62 @@
+/**
+ * Arco Design 主题集成
+ * 将 Admin Core 主题颜色映射到 Arco Design
+ * 
+ * 使用方法：
+ * import '@admin-core/design/css/integrations/arco-design.css'
+ */
+
+:root {
+  /* 主色 */
+  --color-primary-light-1: hsl(var(--primary) / 0.1);
+  --color-primary-light-2: hsl(var(--primary) / 0.2);
+  --color-primary-light-3: hsl(var(--primary) / 0.3);
+  --color-primary-light-4: hsl(var(--primary) / 0.5);
+  --color-primary: hsl(var(--primary));
+  --color-primary-6: hsl(var(--primary));
+  --color-primary-7: hsl(var(--primary) / 0.9);
+  
+  /* 成功色 */
+  --color-success-light-1: hsl(var(--success) / 0.1);
+  --color-success-light-2: hsl(var(--success) / 0.2);
+  --color-success: hsl(var(--success));
+  
+  /* 警告色 */
+  --color-warning-light-1: hsl(var(--warning) / 0.1);
+  --color-warning-light-2: hsl(var(--warning) / 0.2);
+  --color-warning: hsl(var(--warning));
+  
+  /* 危险色 */
+  --color-danger-light-1: hsl(var(--destructive) / 0.1);
+  --color-danger-light-2: hsl(var(--destructive) / 0.2);
+  --color-danger: hsl(var(--destructive));
+  
+  /* 文本颜色 */
+  --color-text-1: hsl(var(--foreground));
+  --color-text-2: hsl(var(--foreground) / 0.9);
+  --color-text-3: hsl(var(--muted-foreground));
+  --color-text-4: hsl(var(--muted-foreground) / 0.6);
+  
+  /* 边框颜色 */
+  --color-border: hsl(var(--border));
+  --color-border-1: hsl(var(--border) / 0.3);
+  --color-border-2: hsl(var(--border) / 0.5);
+  --color-border-3: hsl(var(--border) / 0.7);
+  --color-border-4: hsl(var(--border));
+  
+  /* 背景颜色 */
+  --color-bg-1: hsl(var(--background));
+  --color-bg-2: hsl(var(--background-deep));
+  --color-bg-3: hsl(var(--card));
+  --color-bg-4: hsl(var(--muted));
+  --color-bg-5: hsl(var(--muted) / 0.5);
+}
+
+/* 暗色模式 */
+.dark {
+  --color-bg-1: hsl(var(--background));
+  --color-bg-2: hsl(var(--background-deep));
+  --color-bg-3: hsl(var(--card));
+  --color-text-1: hsl(var(--foreground));
+  --color-border: hsl(var(--border));
+}

package/src/css/integrations/element-plus.css

@@ -0,0 +1,157 @@
+/**
+ * Element Plus 主题集成
+ * 将 Admin Core 主题颜色映射到 Element Plus
+ * 
+ * 使用方法：
+ * import '@admin-core/design/css/integrations/element-plus.css'
+ */
+
+/* 主色 */
+:root {
+  --el-color-primary: hsl(var(--primary));
+  --el-color-primary-light-3: hsl(var(--primary) / 0.7);
+  --el-color-primary-light-5: hsl(var(--primary) / 0.5);
+  --el-color-primary-light-7: hsl(var(--primary) / 0.3);
+  --el-color-primary-light-8: hsl(var(--primary) / 0.2);
+  --el-color-primary-light-9: hsl(var(--primary) / 0.1);
+  --el-color-primary-dark-2: hsl(var(--primary));
+  
+  /* 成功色 */
+  --el-color-success: hsl(var(--success));
+  --el-color-success-light-3: hsl(var(--success) / 0.7);
+  --el-color-success-light-5: hsl(var(--success) / 0.5);
+  --el-color-success-light-7: hsl(var(--success) / 0.3);
+  --el-color-success-light-8: hsl(var(--success) / 0.2);
+  --el-color-success-light-9: hsl(var(--success) / 0.1);
+  --el-color-success-dark-2: hsl(var(--success));
+  
+  /* 警告色 */
+  --el-color-warning: hsl(var(--warning));
+  --el-color-warning-light-3: hsl(var(--warning) / 0.7);
+  --el-color-warning-light-5: hsl(var(--warning) / 0.5);
+  --el-color-warning-light-7: hsl(var(--warning) / 0.3);
+  --el-color-warning-light-8: hsl(var(--warning) / 0.2);
+  --el-color-warning-light-9: hsl(var(--warning) / 0.1);
+  --el-color-warning-dark-2: hsl(var(--warning));
+  
+  /* 危险色 */
+  --el-color-danger: hsl(var(--destructive));
+  --el-color-danger-light-3: hsl(var(--destructive) / 0.7);
+  --el-color-danger-light-5: hsl(var(--destructive) / 0.5);
+  --el-color-danger-light-7: hsl(var(--destructive) / 0.3);
+  --el-color-danger-light-8: hsl(var(--destructive) / 0.2);
+  --el-color-danger-light-9: hsl(var(--destructive) / 0.1);
+  --el-color-danger-dark-2: hsl(var(--destructive));
+  
+  /* 信息色 */
+  --el-color-info: hsl(var(--muted-foreground));
+  --el-color-info-light-3: hsl(var(--muted-foreground) / 0.7);
+  --el-color-info-light-5: hsl(var(--muted-foreground) / 0.5);
+  --el-color-info-light-7: hsl(var(--muted-foreground) / 0.3);
+  --el-color-info-light-8: hsl(var(--muted-foreground) / 0.2);
+  --el-color-info-light-9: hsl(var(--muted-foreground) / 0.1);
+  
+  /* 文本颜色 */
+  --el-text-color-primary: hsl(var(--foreground));
+  --el-text-color-regular: hsl(var(--foreground) / 0.9);
+  --el-text-color-secondary: hsl(var(--muted-foreground));
+  --el-text-color-placeholder: hsl(var(--muted-foreground) / 0.6);
+  --el-text-color-disabled: hsl(var(--muted-foreground) / 0.4);
+  
+  /* 边框颜色 */
+  --el-border-color: hsl(var(--border));
+  --el-border-color-light: hsl(var(--border) / 0.7);
+  --el-border-color-lighter: hsl(var(--border) / 0.5);
+  --el-border-color-extra-light: hsl(var(--border) / 0.3);
+  --el-border-color-dark: hsl(var(--border));
+  --el-border-color-darker: hsl(var(--border));
+  
+  /* 背景颜色 */
+  --el-bg-color: hsl(var(--background));
+  --el-bg-color-page: hsl(var(--background-deep));
+  --el-bg-color-overlay: hsl(var(--card));
+  
+  /* 填充颜色 */
+  --el-fill-color: hsl(var(--muted));
+  --el-fill-color-light: hsl(var(--muted) / 0.7);
+  --el-fill-color-lighter: hsl(var(--muted) / 0.5);
+  --el-fill-color-extra-light: hsl(var(--muted) / 0.3);
+  --el-fill-color-dark: hsl(var(--muted));
+  --el-fill-color-darker: hsl(var(--muted));
+  --el-fill-color-blank: hsl(var(--background));
+  
+  /* 遮罩颜色 */
+  --el-overlay-color: hsl(var(--foreground) / 0.5);
+  --el-overlay-color-light: hsl(var(--foreground) / 0.3);
+  --el-overlay-color-lighter: hsl(var(--foreground) / 0.2);
+  
+  /* 阴影 */
+  --el-box-shadow: 0 2px 8px hsl(var(--foreground) / 0.1);
+  --el-box-shadow-light: 0 1px 4px hsl(var(--foreground) / 0.08);
+  --el-box-shadow-lighter: 0 1px 2px hsl(var(--foreground) / 0.05);
+  --el-box-shadow-dark: 0 4px 16px hsl(var(--foreground) / 0.15);
+}
+
+/* 暗色模式 */
+.dark {
+  --el-bg-color: hsl(var(--background));
+  --el-bg-color-page: hsl(var(--background-deep));
+  --el-bg-color-overlay: hsl(var(--card));
+  --el-text-color-primary: hsl(var(--foreground));
+  --el-text-color-regular: hsl(var(--foreground) / 0.9);
+  --el-border-color: hsl(var(--border));
+  --el-fill-color: hsl(var(--muted));
+  --el-fill-color-blank: hsl(var(--background));
+}
+
+/* Element Plus 组件微调 */
+.el-button {
+  transition: all 0.3s ease;
+}
+
+.el-input__wrapper {
+  background-color: hsl(var(--background));
+  box-shadow: 0 0 0 1px hsl(var(--border)) inset;
+  transition: all 0.3s ease;
+}
+
+.el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px hsl(var(--ring)) inset;
+}
+
+.el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 2px hsl(var(--ring)) inset;
+}
+
+.el-select__wrapper {
+  background-color: hsl(var(--background));
+  box-shadow: 0 0 0 1px hsl(var(--border)) inset;
+  transition: all 0.3s ease;
+}
+
+.el-select__wrapper:hover {
+  box-shadow: 0 0 0 1px hsl(var(--ring)) inset;
+}
+
+.el-select__wrapper.is-focused {
+  box-shadow: 0 0 0 2px hsl(var(--ring)) inset;
+}
+
+.el-card {
+  background-color: hsl(var(--card));
+  border-color: hsl(var(--border));
+  color: hsl(var(--card-foreground));
+  transition: all 0.3s ease;
+}
+
+.el-alert {
+  transition: all 0.3s ease;
+}
+
+.el-tag {
+  transition: all 0.3s ease;
+}
+
+.el-progress__text {
+  color: hsl(var(--foreground));
+}

package/src/css/integrations/index.css

@@ -0,0 +1,17 @@
+/**
+ * 第三方组件库集成
+ * 
+ * 根据你使用的组件库，选择对应的集成文件：
+ * 
+ * Element Plus:
+ * @import '@admin-core/design/css/integrations/element-plus.css';
+ * 
+ * Ant Design Vue:
+ * @import '@admin-core/design/css/integrations/ant-design-vue.css';
+ * 
+ * Naive UI:
+ * @import '@admin-core/design/css/integrations/naive-ui.css';
+ * 
+ * Arco Design:
+ * @import '@admin-core/design/css/integrations/arco-design.css';
+ */

package/src/css/integrations/naive-ui.css

@@ -0,0 +1,60 @@
+/**
+ * Naive UI 主题集成
+ * 将 Admin Core 主题颜色映射到 Naive UI
+ * 
+ * 使用方法：
+ * import '@admin-core/design/css/integrations/naive-ui.css'
+ * 
+ * 注意：Naive UI 原生支持 CSS 变量，这个文件提供额外的样式优化
+ */
+
+:root {
+  /* 主色 */
+  --n-color-primary: hsl(var(--primary));
+  --n-color-primary-hover: hsl(var(--primary) / 0.8);
+  --n-color-primary-pressed: hsl(var(--primary) / 0.9);
+  --n-color-primary-suppl: hsl(var(--primary));
+  
+  /* 成功色 */
+  --n-color-success: hsl(var(--success));
+  --n-color-success-hover: hsl(var(--success) / 0.8);
+  --n-color-success-pressed: hsl(var(--success) / 0.9);
+  
+  /* 警告色 */
+  --n-color-warning: hsl(var(--warning));
+  --n-color-warning-hover: hsl(var(--warning) / 0.8);
+  --n-color-warning-pressed: hsl(var(--warning) / 0.9);
+  
+  /* 错误色 */
+  --n-color-error: hsl(var(--destructive));
+  --n-color-error-hover: hsl(var(--destructive) / 0.8);
+  --n-color-error-pressed: hsl(var(--destructive) / 0.9);
+  
+  /* 信息色 */
+  --n-color-info: hsl(var(--info));
+  --n-color-info-hover: hsl(var(--info) / 0.8);
+  --n-color-info-pressed: hsl(var(--info) / 0.9);
+  
+  /* 文本颜色 */
+  --n-text-color-base: hsl(var(--foreground));
+  --n-text-color-1: hsl(var(--foreground));
+  --n-text-color-2: hsl(var(--foreground) / 0.9);
+  --n-text-color-3: hsl(var(--muted-foreground));
+  
+  /* 边框颜色 */
+  --n-border-color: hsl(var(--border));
+  
+  /* 背景颜色 */
+  --n-body-color: hsl(var(--background));
+  --n-card-color: hsl(var(--card));
+  --n-modal-color: hsl(var(--card));
+  --n-popover-color: hsl(var(--card));
+}
+
+/* 暗色模式 */
+.dark {
+  --n-body-color: hsl(var(--background));
+  --n-card-color: hsl(var(--card));
+  --n-text-color-base: hsl(var(--foreground));
+  --n-border-color: hsl(var(--border));
+}

package/src/css/nprogress.css

@@ -0,0 +1,74 @@
+/* NProgress 进度条样式 */
+
+/* 使点击事件穿透 */
+#nprogress {
+  pointer-events: none;
+}
+
+/* 进度条主体 */
+#nprogress .bar {
+  background-color: var(--color-primary);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1031;
+  height: 2px;
+  width: 100%;
+}
+
+/* 进度条尾部光晕效果 */
+#nprogress .peg {
+  position: absolute;
+  right: 0;
+  display: block;
+  height: 100%;
+  width: 100px;
+  box-shadow:
+    0 0 10px var(--color-primary),
+    0 0 5px var(--color-primary);
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+/* 加载旋转图标容器 */
+#nprogress .spinner {
+  position: fixed;
+  right: 1rem;
+  top: 1rem;
+  z-index: 1031;
+  display: block;
+}
+
+/* 旋转图标样式 */
+#nprogress .spinner-icon {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  border-top-color: var(--color-primary);
+  border-left-color: var(--color-primary);
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+/* 自定义父容器 */
+.nprogress-custom-parent {
+  position: relative;
+  overflow: hidden;
+}
+
+/* 自定义父容器内的进度条和旋转图标定位 */
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+/* 旋转动画关键帧 */
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}