@admin-core/design 0.2.0 → 0.2.1

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);
+  }
+}

package/src/css/transition.css

@@ -0,0 +1,256 @@
+/* Vue 过渡动画样式 */
+
+/* ========== 向上滑动过渡 ========== */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-up-move {
+  transition: transform 0.3s;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-15px);
+}
+
+/* ========== 向下滑动过渡 ========== */
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-down-move {
+  transition: transform 0.3s;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+/* ========== 向左滑动过渡 ========== */
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-left-move {
+  transition: transform 0.3s;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-15px);
+}
+
+/* ========== 向右滑动过渡 ========== */
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-right-move {
+  transition: transform 0.3s;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(15px);
+}
+
+/* ========== 淡入淡出过渡 ========== */
+.fade-transition-enter-active,
+.fade-transition-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-transition-enter-from,
+.fade-transition-leave-to {
+  opacity: 0;
+}
+
+/* 简化版淡入淡出 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* ========== 淡入淡出 + 滑动过渡 ========== */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translate(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translate(30px);
+}
+
+/* ========== 淡入淡出 + 向下滑动 ========== */
+.fade-down-enter-active,
+.fade-down-leave-active {
+  transition:
+    opacity 0.25s,
+    transform 0.3s;
+}
+
+.fade-down-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-down-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+/* ========== 淡入淡出 + 缩放过渡 ========== */
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+/* ========== 淡入淡出 + 向上滑动 ========== */
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition:
+    opacity 0.2s,
+    transform 0.25s;
+}
+
+.fade-up-enter-from {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+/* ========== 动画关键帧 ========== */
+
+/* 淡入淡出 + 滑动动画 */
+@keyframes fade-slide {
+  0% {
+    opacity: 0;
+    transform: translate(-30px);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(30px);
+  }
+}
+
+/* 淡入淡出动画 */
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+/* 淡入淡出 + 向上动画 */
+@keyframes fade-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+}
+
+/* 淡入淡出 + 向下动画 */
+@keyframes fade-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+}
+
+/* ========== 慢速动画类 ========== */
+.fade-slow {
+  animation: fade 3s infinite;
+}
+
+.fade-slide-slow {
+  animation: fade-slide 3s infinite;
+}
+
+.fade-up-slow {
+  animation: fade-up 3s infinite;
+}
+
+.fade-down-slow {
+  animation: fade-down 3s infinite;
+}
+
+/* ========== 折叠过渡 ========== */
+.collapse-transition {
+  transition:
+    0.2s height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s padding-bottom ease-in-out;
+}
+
+.collapse-transition-leave-active,
+.collapse-transition-enter-active {
+  transition:
+    0.2s max-height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s margin-top ease-in-out;
+}