@zjpcy/simple-design 1.5.3 → 1.5.5

package/dist/cjs/index.css

@@ -304,7 +304,7 @@
      -moz-user-select: none;
           user-select: none;
   border: none;
-  border-radius: var(--zjpcy-border-radius-lg);
+  border-radius: 4px;
   transition: all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function);
   outline: none;
   position: relative;
@@ -343,18 +343,18 @@
    Primary 主题 - 主色调
    ============================================ */
 .zjpcy-btn--primary {
-  background: linear-gradient(135deg, var(--zjpcy-button-primary-bg) 0%, var(--zjpcy-primary-hover-color) 100%);
+  background: var(--zjpcy-button-primary-bg);
   color: var(--zjpcy-button-text-white);
   box-shadow: var(--zjpcy-shadow-sm);
 }
 
 .zjpcy-btn--primary:hover:not(.zjpcy-btn--disabled) {
-  background: linear-gradient(135deg, var(--zjpcy-primary-hover-color) 0%, #69c0ff 100%);
+  background: var(--zjpcy-primary-hover-color);
   box-shadow: var(--zjpcy-shadow-md);
 }
 
 .zjpcy-btn--primary:active:not(.zjpcy-btn--disabled) {
-  background: linear-gradient(135deg, #096dd9 0%, var(--zjpcy-button-primary-bg) 100%);
+  background: #096dd9;
   box-shadow: var(--zjpcy-shadow-extra-light);
   transform: translateY(0);
 }
@@ -864,8 +864,8 @@
   text-align: center;
   background: rgba(0, 0, 0, 0.55);
   border-radius: var(--zjpcy-border-radius-lg);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 
 .zjpcy-carousel__title {
@@ -1118,8 +1118,8 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: var(--zjpcy-shadow-sm);
   letter-spacing: 0.5px;
@@ -3392,8 +3392,8 @@
   opacity: 0;
   transition: all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function);
   pointer-events: auto;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 
 /* 显示状态 */
@@ -3552,7 +3552,7 @@
     justify-content: center;
     z-index: var(--zjpcy-z-index-modal);
     pointer-events: none;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.25s ease-out;
 }
 
 .zjpcy-modal-overlay--visible {
@@ -3626,17 +3626,17 @@
 
 /* 中心动画 */
 .zjpcy-modal-container--center {
-    animation: centerAnimateIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: centerAnimateIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
 
-/* 中心动画（设置了top） - 从指定top位置的垂直中心开始 */
-.zjpcy-modal-container--center-top {
-    animation: centerTopAnimateIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+/* 从浏览器顶部滑入到指定 top 位置的动画 */
+.zjpcy-modal-container--from-top {
+    animation: fromTopAnimateIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
 
 @keyframes centerAnimateIn {
     from {
-        transform: scale(0.95);
+        transform: scale(0.85);
         opacity: 0;
     }
     to {
@@ -3645,25 +3645,25 @@
     }
 }
 
-@keyframes centerTopAnimateIn {
+@keyframes fromTopAnimateIn {
     from {
-        transform: translate(var(--zjpcy-modal-origin-x, 0), var(--zjpcy-modal-origin-y, 0)) scale(0.95);
+        transform: translateY(-100vh) scale(0.7);
         opacity: 0;
     }
     to {
-        transform: translate(0, 0) scale(1);
+        transform: translateY(0) scale(1);
         opacity: 1;
     }
 }
 
-/* 正常动画（从点击位置缓慢过渡） */
+/* 正常动画（从触发器位置缓慢过渡到中心） */
 .zjpcy-modal-container--normal {
-    animation: normalAnimateIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: normalAnimateIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
 
 @keyframes normalAnimateIn {
     from {
-        transform: translate(var(--zjpcy-modal-origin-x, 0), var(--zjpcy-modal-origin-y, 0)) scale(0.9);
+        transform: translate(var(--zjpcy-modal-origin-x, 0), var(--zjpcy-modal-origin-y, 0)) scale(0.5);
         opacity: 0;
     }
     to {
@@ -3672,14 +3672,14 @@
     }
 }
 
-/* 右上角动画 */
+/* 右上角动画 - 从浏览器右上角滑入 */
 .zjpcy-modal-container--top-right {
-    animation: topRightAnimateIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: topRightAnimateIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
 
 @keyframes topRightAnimateIn {
     from {
-        transform: translate(calc(50vw + 50%), calc(-50vh - 50%)) scale(0.5);
+        transform: translate(var(--zjpcy-modal-offset-x, 50vw), var(--zjpcy-modal-offset-y, -50vh)) scale(0.5);
         opacity: 0;
     }
     to {
@@ -3688,14 +3688,14 @@
     }
 }
 
-/* 右下角动画 */
+/* 右下角动画 - 从浏览器右下角滑入 */
 .zjpcy-modal-container--bottom-right {
-    animation: bottomRightAnimateIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: bottomRightAnimateIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
 
 @keyframes bottomRightAnimateIn {
     from {
-        transform: translate(calc(50vw + 50%), calc(50vh + 50%)) scale(0.5);
+        transform: translate(var(--zjpcy-modal-offset-x, 50vw), var(--zjpcy-modal-offset-y, 50vh)) scale(0.5);
         opacity: 0;
     }
     to {
@@ -3704,14 +3704,14 @@
     }
 }
 
-/* 左下角动画 */
+/* 左下角动画 - 从浏览器左下角滑入 */
 .zjpcy-modal-container--bottom-left {
-    animation: bottomLeftAnimateIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: bottomLeftAnimateIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
 
 @keyframes bottomLeftAnimateIn {
     from {
-        transform: translate(calc(-50vw - 50%), calc(50vh + 50%)) scale(0.5);
+        transform: translate(var(--zjpcy-modal-offset-x, -50vw), var(--zjpcy-modal-offset-y, 50vh)) scale(0.5);
         opacity: 0;
     }
     to {
@@ -3726,12 +3726,12 @@
 
 /* 中心消失 */
 .zjpcy-modal-container--closing-center {
-    animation: centerAnimateOut 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: centerAnimateOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
 }
 
-/* 中心消失（设置了top） */
-.zjpcy-modal-container--closing-center-top {
-    animation: centerTopAnimateOut 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+/* 从 top 位置回到浏览器顶部的消失动画 */
+.zjpcy-modal-container--closing-from-top {
+    animation: fromTopAnimateOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
 }
 
 @keyframes centerAnimateOut {
@@ -3740,25 +3740,25 @@
         opacity: 1;
     }
     to {
-        transform: scale(0.9);
+        transform: scale(0.85);
         opacity: 0;
     }
 }
 
-@keyframes centerTopAnimateOut {
+@keyframes fromTopAnimateOut {
     from {
-        transform: translate(0, 0) scale(1);
+        transform: translateY(0) scale(1);
         opacity: 1;
     }
     to {
-        transform: translate(var(--zjpcy-modal-origin-x, 0), var(--zjpcy-modal-origin-y, 0)) scale(0.85);
+        transform: translateY(-100vh) scale(0.7);
         opacity: 0;
     }
 }
 
-/* 正常消失（回到点击位置缓慢消失） */
+/* 正常消失（回到触发器位置缓慢消失） */
 .zjpcy-modal-container--closing-normal {
-    animation: normalAnimateOut 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: normalAnimateOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
 }
 
 @keyframes normalAnimateOut {
@@ -3767,67 +3767,55 @@
         opacity: 1;
     }
     to {
-        transform: translate(var(--zjpcy-modal-origin-x, 0), var(--zjpcy-modal-origin-y, 0)) scale(0.9);
+        transform: translate(var(--zjpcy-modal-origin-x, 0), var(--zjpcy-modal-origin-y, 0)) scale(0.5);
         opacity: 0;
     }
 }
 
-/* 右上角消失 */
+/* 右上角消失 - 回到浏览器右上角 */
 .zjpcy-modal-container--closing-top-right {
-    animation: topRightAnimateOut 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: topRightAnimateOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
 }
 
 @keyframes topRightAnimateOut {
-    0% {
+    from {
         transform: translate(0, 0) scale(1);
         opacity: 1;
     }
-    50% {
-        transform: translate(25vw, -25vh) scale(0.85);
-        opacity: 0.6;
-    }
-    100% {
-        transform: translate(calc(50vw + 50%), calc(-50vh - 50%)) scale(0.5);
+    to {
+        transform: translate(var(--zjpcy-modal-offset-x, 50vw), var(--zjpcy-modal-offset-y, -50vh)) scale(0.5);
         opacity: 0;
     }
 }
 
-/* 右下角消失 */
+/* 右下角消失 - 回到浏览器右下角 */
 .zjpcy-modal-container--closing-bottom-right {
-    animation: bottomRightAnimateOut 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: bottomRightAnimateOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
 }
 
 @keyframes bottomRightAnimateOut {
-    0% {
+    from {
         transform: translate(0, 0) scale(1);
         opacity: 1;
     }
-    50% {
-        transform: translate(25vw, 25vh) scale(0.85);
-        opacity: 0.6;
-    }
-    100% {
-        transform: translate(calc(50vw + 50%), calc(50vh + 50%)) scale(0.5);
+    to {
+        transform: translate(var(--zjpcy-modal-offset-x, 50vw), var(--zjpcy-modal-offset-y, 50vh)) scale(0.5);
         opacity: 0;
     }
 }
 
-/* 左下角消失 */
+/* 左下角消失 - 回到浏览器左下角 */
 .zjpcy-modal-container--closing-bottom-left {
-    animation: bottomLeftAnimateOut 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+    animation: bottomLeftAnimateOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
 }
 
 @keyframes bottomLeftAnimateOut {
-    0% {
+    from {
         transform: translate(0, 0) scale(1);
         opacity: 1;
     }
-    50% {
-        transform: translate(-25vw, 25vh) scale(0.85);
-        opacity: 0.6;
-    }
-    100% {
-        transform: translate(calc(-50vw - 50%), calc(50vh + 50%)) scale(0.5);
+    to {
+        transform: translate(var(--zjpcy-modal-offset-x, -50vw), var(--zjpcy-modal-offset-y, 50vh)) scale(0.5);
         opacity: 0;
     }
 }
@@ -9812,6 +9800,43 @@ html {
    IDP Layout Component - Modern Design System
    ============================================ */
 
+/* ============================================
+   ANTI-FOUC: 防止 SSR 闪烁的关键样式
+   这些样式在 CSS 文件最前面，确保最先加载
+   ============================================ */
+
+/**
+ * FOUC 问题背景：
+ * 在 Next.js SSR 环境下，styled-components 的样式在客户端水合后才注入，
+ * 导致组件在 SSR 期间显示浏览器默认样式或黑色背景。
+ *
+ * 解决方案：
+ * 使用 CSS 变量作为默认值，styled-components 可以通过内联样式覆盖
+ */
+
+/* 核心防护：确保所有 Layout 元素默认使用亮色背景 */
+/* 注意：不使用 !important，以便 styled-components 可以覆盖 */
+.layout-wrapper,
+.layout-header,
+.layout-sider,
+.layout-content,
+.layout-footer {
+  /* 默认亮色背景，防止黑色闪烁 */
+  background-color: var(--layout-default-bg, #ffffff);
+  color: var(--layout-default-color, rgba(0, 0, 0, 0.85));
+}
+
+/* SSR 安全：确保 HTML 和 body 有默认亮色背景 */
+html, body {
+  background-color: #ffffff;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   CSS 变量定义
+   ============================================ */
+
 :root {
   /* ============================================
      Layout 基础配置
@@ -10281,8 +10306,8 @@ body {
     align-items: center;
     justify-content: center;
     z-index: 10;
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
 }
 
 .zjpcy-drawer-loading-content {
@@ -14636,7 +14661,7 @@ body {
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.45);
-    backdrop-filter: blur(4px);
+    backdrop-filter: blur(2px);
     display: flex;
     align-items: center;
     justify-content: center;