react-public-components 1.2.3 → 1.2.4

package/dist/index.css

@@ -2673,39 +2673,48 @@
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
+  padding: 24px;
   background: #ffffff;
-  border: 1px solid #f0f0f0;
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  border: 1px solid #ebeef5;
+  border-radius: 16px;
+  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.02);
   box-sizing: border-box;
   user-select: none;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rpc_qrcode_card:hover {
+  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
 }
 .rpc_qrcode_card_wrap {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
-  padding: 8px;
+  border: 1px solid #f0f2f5;
+  border-radius: 12px;
   background: #ffffff;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+.rpc_qrcode_card_wrap_bordered {
+  border: 1px dashed #d9d9d9;
 }
 .rpc_qrcode_card_canvas {
   display: block;
+  border-radius: 6px;
 }
 .rpc_qrcode_card_logo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  border: 2px solid #ffffff;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  border: 2.5px solid #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
   background: #ffffff;
   object-fit: cover;
+  z-index: 5;
 }
 .rpc_qrcode_card_mask {
   position: absolute;
@@ -2713,19 +2722,28 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255, 255, 255, 0.94);
-  backdrop-filter: blur(3px);
-  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 11px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: 12px;
+  box-sizing: border-box;
+  z-index: 10;
+  animation: rpcQrFadeIn 0.25s ease-out;
+}
+.rpc_qrcode_card_mask_expired {
+  cursor: pointer;
   gap: 8px;
+}
+.rpc_qrcode_card_mask_title {
   font-size: 13px;
-  color: #595959;
-  cursor: pointer;
-  z-index: 10;
-  transition: all 0.2s ease-in-out;
+  font-weight: 500;
+  color: #333333;
+  letter-spacing: 0.2px;
 }
 .rpc_qrcode_card_mask_loading {
   cursor: default;
@@ -2740,41 +2758,113 @@
 .rpc_qrcode_card_refresh_btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 12px;
-  border-radius: 4px;
-  background: #1677ff;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 16px;
+  border-radius: 20px;
+  background:
+    linear-gradient(
+      135deg,
+      #1677ff 0%,
+      #0958d9 100%);
   color: #ffffff;
   border: none;
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
-  margin-top: 4px;
+  box-shadow: 0 3px 10px rgba(22, 119, 255, 0.32);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+}
+.rpc_qrcode_card_refresh_btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 5px 14px rgba(22, 119, 255, 0.42);
+  background:
+    linear-gradient(
+      135deg,
+      #4096ff 0%,
+      #1677ff 100%);
+}
+.rpc_qrcode_card_refresh_btn:hover .rpc_qrcode_card_refresh_icon {
+  transform: rotate(180deg);
+}
+.rpc_qrcode_card_refresh_btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.28);
+}
+.rpc_qrcode_card_refresh_icon {
+  font-size: 13px;
+  transition: transform 0.35s ease;
+}
+.rpc_qrcode_card_spinner_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rpc_qrcode_card_spinner {
+  font-size: 28px;
+  color: #1677ff;
+  animation: rpcQrRotate 1s linear infinite;
 }
 .rpc_qrcode_card_info {
-  margin-top: 14px;
+  margin-top: 16px;
   text-align: center;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 5px;
+  max-width: 220px;
 }
 .rpc_qrcode_card_title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
-  color: #1f1f1f;
+  color: #1a1a1a;
+  line-height: 1.4;
 }
 .rpc_qrcode_card_description {
-  font-size: 12px;
+  font-size: 13px;
   color: #8c8c8c;
+  line-height: 1.4;
 }
 .rpc_qrcode_card_download {
-  margin-top: 10px;
+  margin-top: 14px;
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 6px;
   color: #1677ff;
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
-  text-decoration: underline;
+  background: #f0f7ff;
+  border: 1px solid #d6e4ff;
+  transition: all 0.2s ease;
+  outline: none;
 }
 .rpc_qrcode_card_download:hover {
-  color: #4096ff;
+  color: #0958d9;
+  background: #e6f0ff;
+  border-color: #adc6ff;
+}
+.rpc_qrcode_card_download:active {
+  background: #d6e4ff;
+}
+@keyframes rpcQrRotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rpcQrFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
 /* ActivityLog/index.less */
@@ -2898,44 +2988,113 @@
 .rpc_drag_sort_list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
   box-sizing: border-box;
   user-select: none;
+  -webkit-user-select: none;
+  position: relative;
+}
+.rpc_drag_sort_list_disabled {
+  opacity: 0.6;
+  pointer-events: none;
 }
 .rpc_drag_sort_list_item {
+  position: relative;
   display: flex;
   align-items: center;
-  padding: 10px 14px;
+  padding: 12px 16px;
   background: #ffffff;
   border: 1px solid #e8e8e8;
-  border-radius: 6px;
+  border-radius: 8px;
   cursor: grab;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
   transition:
-    transform 0.2s,
+    border-color 0.2s,
     box-shadow 0.2s,
-    border-color 0.2s;
-  box-sizing: border-box;
+    background-color 0.2s;
 }
 .rpc_drag_sort_list_item:hover {
   border-color: #91caff;
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.08);
+}
+.rpc_drag_sort_list_item:hover .rpc_drag_sort_list_handle {
+  color: #1677ff;
 }
 .rpc_drag_sort_list_item:active {
   cursor: grabbing;
 }
-.rpc_drag_sort_list_item_dragging {
-  opacity: 0.4;
-  border: 1px dashed #1677ff !important;
-  background: #e6f4ff !important;
+.rpc_drag_sort_list_item_placeholder {
+  background: #f0f7ff !important;
+  border: 1.5px dashed #91caff !important;
+  box-shadow: inset 0 2px 6px rgba(22, 119, 255, 0.04) !important;
+  cursor: grabbing !important;
+  padding: 0 !important;
+  overflow: hidden;
+}
+.rpc_drag_sort_list_placeholder_inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(22, 119, 255, 0.04);
 }
-.rpc_drag_sort_list_item_over {
-  border-top: 2px solid #1677ff;
+.rpc_drag_sort_list_placeholder_line {
+  width: 32px;
+  height: 3px;
+  border-radius: 3px;
+  background: #91caff;
+  opacity: 0.8;
 }
 .rpc_drag_sort_list_handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   margin-right: 12px;
   color: #bfbfbf;
-  font-size: 16px;
+  font-size: 15px;
   cursor: grab;
   user-select: none;
+  -webkit-user-select: none;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+.rpc_drag_sort_list_handle:hover {
+  color: #1677ff;
+  background: #f0f7ff;
+}
+.rpc_drag_sort_list_handle:active {
+  cursor: grabbing;
+}
+.rpc_drag_sort_list_content {
+  flex: 1;
+  min-width: 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.rpc_drag_sort_list_floating_ghost {
+  position: fixed !important;
+  z-index: 99999 !important;
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: #ffffff;
+  border: 1.5px solid #1677ff;
+  border-radius: 8px;
+  box-shadow: 0 16px 36px -4px rgba(22, 119, 255, 0.32), 0 6px 16px rgba(0, 0, 0, 0.12);
+  box-sizing: border-box;
+  pointer-events: none;
+  opacity: 0.98;
+  transform: scale(1.02);
+  transform-origin: center center;
+  transition: box-shadow 0.2s;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 /* TiltCard/index.less */
@@ -4292,11 +4451,41 @@
   box-sizing: border-box;
   user-select: text;
   transition: all 0.2s ease;
+  position: relative;
 }
 .rpc_code_snippet_dark {
   background: #141414;
   border: 1px solid #303030;
 }
+.rpc_code_snippet_dark .rpc_code_snippet_actions_bar {
+  background: #1a1a1a;
+  border-bottom: 1px solid #2a2a2a;
+}
+.rpc_code_snippet_dark .rpc_code_snippet_action_btn {
+  color: #8c8c8c;
+}
+.rpc_code_snippet_dark .rpc_code_snippet_action_btn:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.08);
+}
+.rpc_code_snippet_dark .rpc_code_snippet_action_btn.rpc_code_snippet_action_active {
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.15);
+}
+.rpc_code_snippet_dark .rpc_code_snippet_tabs_bar {
+  background: #141414;
+  border-bottom: 1px solid #262626;
+}
+.rpc_code_snippet_dark .rpc_code_snippet_tab_item {
+  color: #8c8c8c;
+}
+.rpc_code_snippet_dark .rpc_code_snippet_tab_item:hover {
+  color: #ffffff;
+}
+.rpc_code_snippet_dark .rpc_code_snippet_tab_item.rpc_code_snippet_tab_active {
+  color: #1677ff;
+  border-bottom-color: #1677ff;
+}
 .rpc_code_snippet_dark .rpc_code_snippet_top_bar {
   background: #1f1f1f;
   border-bottom: 1px solid #303030;
@@ -4317,11 +4506,55 @@
   color: #595959;
   border-right: 1px solid #303030;
 }
+.rpc_code_snippet_dark .rpc_code_snippet_floating_copy {
+  color: #8c8c8c;
+}
+.rpc_code_snippet_dark .rpc_code_snippet_floating_copy:hover {
+  color: #ffffff;
+}
+.rpc_code_snippet_dark .rpc_code_snippet_footer {
+  background: #1a1a1a;
+  border-top: 1px solid #262626;
+  color: #8c8c8c;
+}
+.rpc_code_snippet_dark .rpc_code_snippet_footer:hover {
+  color: #1677ff;
+  background: #222222;
+}
 .rpc_code_snippet_light {
   background: #ffffff;
   border: 1px solid #e8e8e8;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
+.rpc_code_snippet_light .rpc_code_snippet_actions_bar {
+  background: #fafafa;
+  border-bottom: 1px dashed #e8e8e8;
+}
+.rpc_code_snippet_light .rpc_code_snippet_action_btn {
+  color: #8c8c8c;
+}
+.rpc_code_snippet_light .rpc_code_snippet_action_btn:hover {
+  color: #1677ff;
+  background: #f0f0f0;
+}
+.rpc_code_snippet_light .rpc_code_snippet_action_btn.rpc_code_snippet_action_active {
+  color: #1677ff;
+  background: #e6f4ff;
+}
+.rpc_code_snippet_light .rpc_code_snippet_tabs_bar {
+  background: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
+}
+.rpc_code_snippet_light .rpc_code_snippet_tab_item {
+  color: #595959;
+}
+.rpc_code_snippet_light .rpc_code_snippet_tab_item:hover {
+  color: #1677ff;
+}
+.rpc_code_snippet_light .rpc_code_snippet_tab_item.rpc_code_snippet_tab_active {
+  color: #1677ff;
+  border-bottom-color: #1677ff;
+}
 .rpc_code_snippet_light .rpc_code_snippet_top_bar {
   background: #fafafa;
   border-bottom: 1px solid #e8e8e8;
@@ -4342,6 +4575,65 @@
   color: #bfbfbf;
   border-right: 1px solid #f0f0f0;
 }
+.rpc_code_snippet_light .rpc_code_snippet_floating_copy {
+  color: #8c8c8c;
+}
+.rpc_code_snippet_light .rpc_code_snippet_floating_copy:hover {
+  color: #1677ff;
+}
+.rpc_code_snippet_light .rpc_code_snippet_footer {
+  background: #fafafa;
+  border-top: 1px solid #f0f0f0;
+  color: #595959;
+}
+.rpc_code_snippet_light .rpc_code_snippet_footer:hover {
+  color: #1677ff;
+  background: #f5f5f5;
+}
+.rpc_code_snippet_actions_bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 6px 12px;
+  user-select: none;
+}
+.rpc_code_snippet_actions_list {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.rpc_code_snippet_action_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 15px;
+  transition: all 0.15s ease;
+  outline: none;
+}
+.rpc_code_snippet_action_copied {
+  color: #52c41a !important;
+}
+.rpc_code_snippet_tabs_bar {
+  display: flex;
+  padding: 0 16px;
+  gap: 20px;
+  user-select: none;
+}
+.rpc_code_snippet_tab_item {
+  padding: 8px 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s ease;
+}
 .rpc_code_snippet_top_bar {
   display: flex;
   align-items: center;
@@ -4383,6 +4675,7 @@
   transition: all 0.15s;
 }
 .rpc_code_snippet_body {
+  position: relative;
   display: flex;
   overflow-x: auto;
 }
@@ -4405,6 +4698,29 @@
   line-height: 1.5;
   margin: 0;
 }
+.rpc_code_snippet_floating_copy {
+  position: absolute;
+  top: 10px;
+  right: 14px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  transition: all 0.15s ease;
+  background: transparent;
+}
+.rpc_code_snippet_footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s ease;
+}
 
 /* MiniSparkline/index.less */
 .rpc_mini_sparkline {