@sl-material/sl-import 1.1.0 → 1.1.1

package/sl-import.es.js

@@ -208,7 +208,7 @@ function getImportDialogStyles() {
     .icon-xiazai:before { content: "\\e629"; }
     .icon-tishi:before { content: "\\e62a"; }
 
-    .import-dialog-vanilla-wrapper {
+    .sl-import-dialog-vanilla-wrapper {
       position: fixed;
       top: 0;
       left: 0;
@@ -217,7 +217,7 @@ function getImportDialogStyles() {
       z-index: 1000;
     }
 
-    .import-dialog-vanilla-overlay {
+    .sl-import-dialog-vanilla-overlay {
       position: fixed;
       top: 0;
       left: 0;
@@ -231,7 +231,7 @@ function getImportDialogStyles() {
       overflow: auto;
     }
 
-    .import-dialog-vanilla-modal {
+    .sl-import-dialog-vanilla-modal {
       padding: 20px 16px;
       position: relative;
       background-color: var(--sl-color-white);
@@ -244,7 +244,7 @@ function getImportDialogStyles() {
       pointer-events: auto;
     }
 
-    .import-dialog-vanilla-header {
+    .sl-import-dialog-vanilla-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -256,13 +256,13 @@ function getImportDialogStyles() {
       padding: 0px;
     }
 
-    .import-dialog-vanilla-title {
+    .sl-import-dialog-vanilla-title {
       font-size: 16px;
       font-weight: 500;
       color: var(--sl-text-color);
     }
 
-    .import-dialog-vanilla-close {
+    .sl-import-dialog-vanilla-close {
       font-size: 20px;
       color: var(--sl-text-color-thridary);
       cursor: pointer;
@@ -274,14 +274,14 @@ function getImportDialogStyles() {
 
 
 
-    .import-dialog-vanilla-tabs {
+    .sl-import-dialog-vanilla-tabs {
       display: flex;
       margin-bottom: 8px;
       gap: 4px;
       border-bottom: 1px solid var(--sl-border-color);
     }
 
-    .import-dialog-vanilla-tab {
+    .sl-import-dialog-vanilla-tab {
       padding: 0 16px;
       height: 32px;
       display: flex;
@@ -296,24 +296,24 @@ function getImportDialogStyles() {
       transition: all 0.3s;
     }
 
-    .import-dialog-vanilla-tab:hover {
+    .sl-import-dialog-vanilla-tab:hover {
       color: var(--sl-color-primary);
     }
 
-    .import-dialog-vanilla-tab.active {
+    .sl-import-dialog-vanilla-tab.active {
       background: var(--sl-color-primary);
       border-color: var(--sl-color-primary);
       color: var(--sl-color-white);
     }
 
-    .import-dialog-vanilla-section {
+    .sl-import-dialog-vanilla-section {
       background: var(--slm-card-bg-color4);
       border-radius: 8px;
       padding: 8px 12px;
       margin-bottom: 8px;
     }
 
-    .import-dialog-vanilla-section-title {
+    .sl-import-dialog-vanilla-section-title {
       font-size: 14px;
       font-weight: 500;
       color: var(--sl-text-color);
@@ -322,7 +322,7 @@ function getImportDialogStyles() {
       align-items: center;
     }
 
-    .import-dialog-vanilla-tips-icon {
+    .sl-import-dialog-vanilla-tips-icon {
       width: 18px;
       height: 18px;
       background: #ECECEC;
@@ -331,28 +331,28 @@ function getImportDialogStyles() {
       align-items: center;
       justify-content: center;
     }
-    .import-dialog-vanilla-tips-icon>i {
+    .sl-import-dialog-vanilla-tips-icon>i {
       font-size: 12px;
       font-weight:600;
     }
 
-    .import-dialog-vanilla-tips-title {
+    .sl-import-dialog-vanilla-tips-title {
       font-size: 16px;
       margin-left:12px;
     }
 
-    .import-dialog-vanilla-tips-content {
+    .sl-import-dialog-vanilla-tips-content {
       padding-left: 30px;
     }
 
-    .import-dialog-vanilla-tip-item {
+    .sl-import-dialog-vanilla-tip-item {
       font-size: 14px;
       color: var(--sl-text-color-secondary);
       margin: 4px 0;
       line-height: 1.4;
     }
 
-    .import-dialog-vanilla-btn {
+    .sl-import-dialog-vanilla-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -368,17 +368,17 @@ function getImportDialogStyles() {
       transition: all 0.3s;
     }
 
-    .import-dialog-vanilla-btn:hover {
+    .sl-import-dialog-vanilla-btn:hover {
       border-color: var(--sl-color-primary);
       color: var(--sl-color-primary);
     }
 
-    .import-dialog-vanilla-btn:disabled {
+    .sl-import-dialog-vanilla-btn:disabled {
       opacity: 0.6;
       cursor: not-allowed;
     }
 
-    .import-dialog-vanilla-btn-primary {
+    .sl-import-dialog-vanilla-btn-primary {
       background: var(--sl-color-primary);
       border-color: var(--sl-color-primary);
       color: var(--sl-color-white);
@@ -388,7 +388,7 @@ function getImportDialogStyles() {
      font-weight:500;
     }
 
-    .import-dialog-vanilla-btn-primary:hover {
+    .sl-import-dialog-vanilla-btn-primary:hover {
       background: var(--slm-primary-color-hover);
       border-color: var(--slm-primary-color-hover);
       color: var(--sl-color-white);
@@ -396,35 +396,35 @@ function getImportDialogStyles() {
     }
 
     
-    .import-dialog-vanilla-icon {
+    .sl-import-dialog-vanilla-icon {
       font-size: 14px;
     }
 
-    .import-dialog-vanilla-setting-content {
+    .sl-import-dialog-vanilla-setting-content {
       display: flex;
       flex-direction: column;
       gap: 12px;
     }
 
-    .import-dialog-vanilla-setting-item {
+    .sl-import-dialog-vanilla-setting-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
 
-    .import-dialog-vanilla-setting-label {
+    .sl-import-dialog-vanilla-setting-label {
       min-width: 100px;
       color: var(--sl-text-color-primary);
       font-size: 14px;
     }
 
-    .import-dialog-vanilla-setting-label.required::before {
+    .sl-import-dialog-vanilla-setting-label.required::before {
       content: "*";
       color: var(--sl-color-error);
       margin-right: 4px;
     }
 
-    .import-dialog-vanilla-select {
+    .sl-import-dialog-vanilla-select {
       width: 200px;
       height: 28px;
       padding: 0 8px;
@@ -436,20 +436,20 @@ function getImportDialogStyles() {
       cursor: pointer;
     }
 
-    .import-dialog-vanilla-select:focus {
+    .sl-import-dialog-vanilla-select:focus {
       border-color: var(--sl-color-primary);
       box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
     }
 
     /* Custom Select Component Styles */
-    .import-dialog-vanilla-custom-select {
+    .sl-import-dialog-vanilla-custom-select {
       position: relative;
       width: 200px;
       height: 28px;
       font-size: 14px;
     }
 
-    .import-dialog-vanilla-select-trigger {
+    .sl-import-dialog-vanilla-select-trigger {
       width: 100%;
       height: 100%;
       padding: 0 8px;
@@ -463,22 +463,22 @@ function getImportDialogStyles() {
       transition: all 0.3s;
     }
 
-    .import-dialog-vanilla-select-trigger:hover {
+    .sl-import-dialog-vanilla-select-trigger:hover {
       border-color: var(--sl-color-primary);
     }
 
-    .import-dialog-vanilla-select-trigger.active {
+    .sl-import-dialog-vanilla-select-trigger.active {
       border-color: var(--sl-color-primary);
       box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
     }
 
-    .import-dialog-vanilla-select-trigger.disabled {
+    .sl-import-dialog-vanilla-select-trigger.disabled {
       background: #f5f5f5;
       cursor: not-allowed;
       opacity: 0.6;
     }
 
-    .import-dialog-vanilla-select-value {
+    .sl-import-dialog-vanilla-select-value {
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -486,11 +486,11 @@ function getImportDialogStyles() {
       color: var(--sl-text-color-primary);
     }
 
-    .import-dialog-vanilla-select-placeholder {
+    .sl-import-dialog-vanilla-select-placeholder {
       color: var(--sl-text-color-placeholder);
     }
 
-    .import-dialog-vanilla-select-arrow {
+    .sl-import-dialog-vanilla-select-arrow {
       width: 0;
       height: 0;
       border-left: 4px solid transparent;
@@ -500,11 +500,11 @@ function getImportDialogStyles() {
       margin-left: 8px;
     }
 
-    .import-dialog-vanilla-select-trigger.active .import-dialog-vanilla-select-arrow {
+    .sl-import-dialog-vanilla-select-trigger.active .sl-import-dialog-vanilla-select-arrow {
       transform: rotate(180deg);
     }
 
-    .import-dialog-vanilla-select-dropdown {
+    .sl-import-dialog-vanilla-select-dropdown {
       position: absolute;
       top: 100%;
       left: 0;
@@ -523,13 +523,13 @@ function getImportDialogStyles() {
       padding: 4px 0;
     }
 
-    .import-dialog-vanilla-select-dropdown.show {
+    .sl-import-dialog-vanilla-select-dropdown.show {
       opacity: 1;
       transform: translateY(0);
       pointer-events: auto;
     }
 
-    .import-dialog-vanilla-select-option {
+    .sl-import-dialog-vanilla-select-option {
       padding: 0px 8px;
       cursor: pointer;
       transition: background-color 0.3s;
@@ -541,23 +541,23 @@ function getImportDialogStyles() {
       line-height: 34px;
     }
 
-    .import-dialog-vanilla-select-option:hover {
+    .sl-import-dialog-vanilla-select-option:hover {
       background: var(--sl-fill-color-light);
     }
 
-    .import-dialog-vanilla-select-option.selected {
+    .sl-import-dialog-vanilla-select-option.selected {
       background: var(--sl-color-primary-light-9);
       color: var(--sl-color-primary);
       font-weight: 500;
     }
 
-    .import-dialog-vanilla-radio-group {
+    .sl-import-dialog-vanilla-radio-group {
       display: flex;
       gap: 20px;
       flex-wrap: wrap;
     }
 
-    .import-dialog-vanilla-radio {
+    .sl-import-dialog-vanilla-radio {
       display: flex;
       align-items: center;
       gap: 8px;
@@ -566,7 +566,7 @@ function getImportDialogStyles() {
       color: var(--sl-text-color-secondary);
     }
 
-    .import-dialog-vanilla-radio input[type="radio"] {
+    .sl-import-dialog-vanilla-radio input[type="radio"] {
       appearance: none;
       width: 16px;
       height: 16px;
@@ -577,15 +577,15 @@ function getImportDialogStyles() {
       cursor: pointer;
       margin: 0;
     }
-  .import-dialog-vanilla-radio input[type="radio"]:hover {
+  .sl-import-dialog-vanilla-radio input[type="radio"]:hover {
       border-color: var(--sl-color-primary);
     }
-    .import-dialog-vanilla-radio input[type="radio"]:checked {
+    .sl-import-dialog-vanilla-radio input[type="radio"]:checked {
       border-color: var(--sl-color-primary);
       border-width: 5px;
     }
 
-    .import-dialog-vanilla-radio input[type="radio"]:checked::before {
+    .sl-import-dialog-vanilla-radio input[type="radio"]:checked::before {
       content: '';
       width: 6px;
       height: 6px;
@@ -596,18 +596,18 @@ function getImportDialogStyles() {
       transform: translate(-50%, -50%);
     }
 
-    .import-dialog-vanilla-radio span {
+    .sl-import-dialog-vanilla-radio span {
       color: var(--sl-text-color-primary);
       font-size: 14px;
     }
 
-    .import-dialog-vanilla-date-range {
+    .sl-import-dialog-vanilla-date-range {
       display: flex;
       align-items: center;
       gap: 8px;
     }
 
-    .import-dialog-vanilla-date-input {
+    .sl-import-dialog-vanilla-date-input {
       width: 150px;
       height: 28px;
       padding: 0 8px;
@@ -617,22 +617,22 @@ function getImportDialogStyles() {
       outline: none;
     }
 
-    .import-dialog-vanilla-date-input:focus {
+    .sl-import-dialog-vanilla-date-input:focus {
       border-color: var(--sl-color-primary);
       box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
     }
 
-    .import-dialog-vanilla-date-separator {
+    .sl-import-dialog-vanilla-date-separator {
       color: #999;
     }
 
     /* 上传区域包装器 - 文件列表和上传区域横向排列 */
-    .import-dialog-vanilla-upload-wrapper {
+    .sl-import-dialog-vanilla-upload-wrapper {
       display: flex;
       flex-direction: column;
     }
 
-    .import-dialog-vanilla-upload-area {
+    .sl-import-dialog-vanilla-upload-area {
       min-height: 176px;
       cursor: pointer;
       transition: all 0.3s;
@@ -642,21 +642,21 @@ function getImportDialogStyles() {
       position: relative;
     }
 
-    .import-dialog-vanilla-upload-area:hover {
+    .sl-import-dialog-vanilla-upload-area:hover {
       border-color: var(--sl-color-primary);
     }
 
-    .import-dialog-vanilla-upload-area.dragover {
+    .sl-import-dialog-vanilla-upload-area.dragover {
       border-color: var(--sl-color-primary);
       background: rgba(24, 144, 255, 0.05);
     }
 
-    .import-dialog-vanilla-upload-area.disabled {
+    .sl-import-dialog-vanilla-upload-area.disabled {
       cursor: not-allowed;
       opacity: 0.6;
     }
 
-    .import-dialog-vanilla-file-input {
+    .sl-import-dialog-vanilla-file-input {
       position: absolute;
       width: 0;
       height: 0;
@@ -664,12 +664,12 @@ function getImportDialogStyles() {
       pointer-events: none;
     }
 
-    .import-dialog-vanilla-upload-content {
+    .sl-import-dialog-vanilla-upload-content {
       text-align: center;
       padding: 20px;
     }
 
-    .import-dialog-vanilla-upload-icon {
+    .sl-import-dialog-vanilla-upload-icon {
       // font-size: 48px;
       width:88px;
       height:74px;
@@ -677,32 +677,32 @@ function getImportDialogStyles() {
       margin-bottom: 16px;
     }
 
-    .import-dialog-vanilla-upload-text {
+    .sl-import-dialog-vanilla-upload-text {
       color: var(--sl-text-color-secondary);
       font-size: 14px;
       margin-bottom: 8px;
     }
 
-    .import-dialog-vanilla-upload-link {
+    .sl-import-dialog-vanilla-upload-link {
       color: var(--sl-color-primary);
       cursor: pointer;
     }
 
-    .import-dialog-vanilla-upload-link:hover {
+    .sl-import-dialog-vanilla-upload-link:hover {
       text-decoration: underline;
     }
 
-    .import-dialog-vanilla-upload-hint {
+    .sl-import-dialog-vanilla-upload-hint {
       color: var(--sl-text-color-secondary);
       font-size: 12px;
       margin: 0;
     }
 
-    .import-dialog-vanilla-file-info {
+    .sl-import-dialog-vanilla-file-info {
       display: flex;
     }
 
-    .import-dialog-vanilla-file-name {
+    .sl-import-dialog-vanilla-file-name {
       flex: 1;
       font-size: 14px;
       color: var(--sl-text-color-primary);
@@ -711,23 +711,23 @@ function getImportDialogStyles() {
       white-space: nowrap;
     }
 
-    .import-dialog-vanilla-file-remove {
+    .sl-import-dialog-vanilla-file-remove {
       font-size: 18px;
       color: #999;
       cursor: pointer;
       line-height: 1;
     }
 
-    .import-dialog-vanilla-file-remove:hover {
+    .sl-import-dialog-vanilla-file-remove:hover {
       color: #ff4d4f;
     }
 
-    .import-dialog-vanilla-upload-progress {
+    .sl-import-dialog-vanilla-upload-progress {
       margin-top: 12px;
       padding: 8px 0;
     }
 
-    .import-dialog-vanilla-progress-bar {
+    .sl-import-dialog-vanilla-progress-bar {
       height: 8px;
       background: #f0f0f0;
       border-radius: 4px;
@@ -735,59 +735,59 @@ function getImportDialogStyles() {
       margin-bottom: 8px;
     }
 
-    .import-dialog-vanilla-progress-inner {
+    .sl-import-dialog-vanilla-progress-inner {
       height: 100%;
       border-radius: 4px;
       transition: width 0.3s;
     }
 
-    .import-dialog-vanilla-progress-inner.active {
+    .sl-import-dialog-vanilla-progress-inner.active {
       background: var(--sl-color-primary);
     }
 
-    .import-dialog-vanilla-progress-inner.success {
+    .sl-import-dialog-vanilla-progress-inner.success {
       background: #52c41a;
     }
 
-    .import-dialog-vanilla-progress-inner.error {
+    .sl-import-dialog-vanilla-progress-inner.error {
       background: #ff4d4f;
     }
 
-    .import-dialog-vanilla-progress-text {
+    .sl-import-dialog-vanilla-progress-text {
       font-size: 12px;
       color: var(--sl-text-color-secondary);
     }
 
-    .import-dialog-vanilla-upload-message {
+    .sl-import-dialog-vanilla-upload-message {
       font-size: 14px;
       padding: 6px 12px;
       border-radius: 4px;
       margin-top: 8px;
     }
 
-    .import-dialog-vanilla-upload-message.info {
+    .sl-import-dialog-vanilla-upload-message.info {
       color: var(--sl-color-primary);
       background: rgba(24, 144, 255, 0.1);
     }
 
-    .import-dialog-vanilla-upload-message.success {
+    .sl-import-dialog-vanilla-upload-message.success {
       color: #52c41a;
       background: rgba(82, 196, 26, 0.1);
     }
 
-    .import-dialog-vanilla-upload-message.error {
+    .sl-import-dialog-vanilla-upload-message.error {
       color: #ff4d4f;
       background: rgba(255, 77, 79, 0.1);
     }
 
-    .import-dialog-vanilla-footer {
+    .sl-import-dialog-vanilla-footer {
       display: flex;
       justify-content: flex-end;
       gap: 12px;
       padding-top: 8px;
     }
 
-    .import-dialog-vanilla-toast {
+    .sl-import-dialog-vanilla-toast {
       position: fixed;
       top: 16px;
       left: 50%;
@@ -797,30 +797,30 @@ function getImportDialogStyles() {
       font-size: 14px;
       z-index: 1100;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      animation: import-dialog-toast-in 0.3s ease;
+      animation: sl-import-dialog-toast-in 0.3s ease;
       display: flex;
       align-items: center;
       padding: 8px 15px;
       box-sizing: content-box;
     }
 
-    .import-dialog-vanilla-toast-content {
+    .sl-import-dialog-vanilla-toast-content {
       display: flex;
       align-items: center;
       flex: 1;
       gap:8px;
     }
 
-    .import-dialog-vanilla-toast-icon {
+    .sl-import-dialog-vanilla-toast-icon {
       font-size: 16px;
       flex-shrink: 0;
     }
 
-    .import-dialog-vanilla-toast-message {
+    .sl-import-dialog-vanilla-toast-message {
       flex: 1;
     }
 
-    .import-dialog-vanilla-toast-close {
+    .sl-import-dialog-vanilla-toast-close {
       background: none;
       border: none;
       padding: 11px 15px;
@@ -833,43 +833,43 @@ function getImportDialogStyles() {
       flex-shrink: 0;
     }
 
-    .import-dialog-vanilla-toast-close:hover {
+    .sl-import-dialog-vanilla-toast-close:hover {
       opacity: 1;
     }
 
-    .import-dialog-vanilla-toast-close i {
+    .sl-import-dialog-vanilla-toast-close i {
       font-size: 14px;
     }
 
-    .import-dialog-vanilla-toast.info {
+    .sl-import-dialog-vanilla-toast.info {
       background-color: var(--sl-color-primary-light-9);
       color: var(--sl-color-primary);
       border: 1px solid var(--sl-color-primary-light-8);
     }
 
-    .import-dialog-vanilla-toast.success {
+    .sl-import-dialog-vanilla-toast.success {
       background-color: var(--sl-color-success-light-9);
       color: var(--sl-color-success);
       border: 1px solid var(--sl-color-success-light-8);
     }
 
-    .import-dialog-vanilla-toast.warning {
+    .sl-import-dialog-vanilla-toast.warning {
       background-color: var(--sl-color-warning-light-9);
       color: var(--sl-color-warning);
       border: 1px solid var(--sl-color-warning-light-8);
     }
 
-    .import-dialog-vanilla-toast.error {
+    .sl-import-dialog-vanilla-toast.error {
       background-color: var(--sl-color-error-light-9);
       color: var(--sl-color-error);
       border: 1px solid var(--sl-color-error-light-8);
     }
 
-    .import-dialog-vanilla-toast.fade-out {
-      animation: import-dialog-toast-out 0.3s ease forwards;
+    .sl-import-dialog-vanilla-toast.fade-out {
+      animation: sl-import-dialog-toast-out 0.3s ease forwards;
     }
 
-    @keyframes import-dialog-toast-in {
+    @keyframes sl-import-dialog-toast-in {
       from {
         opacity: 0;
         transform: translateX(-50%) translateY(-20px);
@@ -880,7 +880,7 @@ function getImportDialogStyles() {
       }
     }
 
-    @keyframes import-dialog-toast-out {
+    @keyframes sl-import-dialog-toast-out {
       from {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
@@ -892,7 +892,7 @@ function getImportDialogStyles() {
     }
 
     /* DateRangePicker */
-    .sl-date-range-picker {
+    .sl-import-date-range-picker {
       position: relative;
       display: inline-flex;
       align-items: center;
@@ -906,16 +906,16 @@ function getImportDialogStyles() {
       transition: border-color 0.3s;
     }
 
-    .sl-date-range-picker:hover {
+    .sl-import-date-range-picker:hover {
       border-color: var(--sl-color-primary);
     }
 
-    .sl-date-range-picker:focus-within {
+    .sl-import-date-range-picker:focus-within {
       border-color: var(--sl-color-primary);
       box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
     }
 
-    .sl-date-range-input {
+    .sl-import-date-range-input {
       border: none;
       outline: none;
       background: transparent;
@@ -928,17 +928,17 @@ function getImportDialogStyles() {
       height: 100%;
     }
 
-    .sl-date-range-input::placeholder {
+    .sl-import-date-range-input::placeholder {
       color: var(--sl-text-color-placeholder);
     }
 
-    .sl-date-range-separator {
+    .sl-import-date-range-separator {
       color: var(--sl-text-color);
       font-size: 13px;
       flex-shrink: 0;
     }
 
-    .sl-date-range-icon {
+    .sl-import-date-range-icon {
       display: flex;
       align-items: center;
       color: var(--sl-text-color-placeholder);
@@ -946,7 +946,7 @@ function getImportDialogStyles() {
     }
 
     /* 日期范围选择器日历样式覆盖 */
-    .sl-date-range-calendar {
+    .sl-import-date-range-calendar {
       border: 1px solid var(--sl-border-color-light);
       box-shadow: var(--sl-box-shadow-light);
       border-radius: 8px;
@@ -956,13 +956,13 @@ function getImportDialogStyles() {
     }
 
     /* 隐藏 flatpickr 自带的箭头 */
-    .sl-date-range-calendar::before,
-    .sl-date-range-calendar::after {
+    .sl-import-date-range-calendar::before,
+    .sl-import-date-range-calendar::after {
       display: none !important;
     }
 
     /* 自定义箭头元素 — 基础样式 */
-    .sl-calendar-arrow {
+    .sl-import-calendar-arrow {
       position: absolute;
       transform: translateX(-50%);
       width: 0;
@@ -973,11 +973,11 @@ function getImportDialogStyles() {
     }
 
     /* 箭头朝上（日历在输入框下方） */
-    .sl-calendar-arrow-top {
+    .sl-import-calendar-arrow-top {
       top: -8px;
       border-bottom: 8px solid #e4e7ed;
     }
-    .sl-calendar-arrow-top::after {
+    .sl-import-calendar-arrow-top::after {
       content: "";
       position: absolute;
       top: 1px;
@@ -988,11 +988,11 @@ function getImportDialogStyles() {
     }
 
     /* 箭头朝下（日历在输入框上方） */
-    .sl-calendar-arrow-bottom {
+    .sl-import-calendar-arrow-bottom {
       bottom: -8px;
       border-top: 8px solid #e4e7ed;
     }
-    .sl-calendar-arrow-bottom::after {
+    .sl-import-calendar-arrow-bottom::after {
       content: "";
       position: absolute;
       bottom: 1px;
@@ -1003,17 +1003,17 @@ function getImportDialogStyles() {
     }
 
     /* 日历整体固定宽度 */
-    .sl-date-range-calendar {
+    .sl-import-date-range-calendar {
       width: 646px !important;
     }
 
-    .sl-date-range-calendar.has-shortcuts {
+    .sl-import-date-range-calendar.has-shortcuts {
       display: flex !important;
       flex-direction: row !important;
       width: 756px !important; /* 646 + 110 快捷方式面板 */
     }
 
-    .sl-date-range-calendar-content {
+    .sl-import-date-range-calendar-content {
       width: 646px;
       flex-shrink: 0;
       padding: 12px;
@@ -1022,7 +1022,7 @@ function getImportDialogStyles() {
     }
 
     /* 两个月份之间的连续分割线 */
-    .sl-date-range-calendar-content::after {
+    .sl-import-date-range-calendar-content::after {
       content: '';
       position: absolute;
       top: 12px;
@@ -1034,20 +1034,20 @@ function getImportDialogStyles() {
       pointer-events: none;
     }
 
-    .sl-date-range-calendar-content .flatpickr-months,
-    .sl-date-range-calendar-content .flatpickr-innerContainer {
+    .sl-import-date-range-calendar-content .flatpickr-months,
+    .sl-import-date-range-calendar-content .flatpickr-innerContainer {
       width: 100%;
     }
 
     /* 覆盖 flatpickr 固定宽度，让两个月份并排 */
-    .sl-date-range-calendar .flatpickr-innerContainer {
+    .sl-import-date-range-calendar .flatpickr-innerContainer {
       overflow: visible !important;
       width: 622px !important; /* 311px * 2 */
       position: relative;
     }
 
     /* 没有快捷方式时的分割线（直接在 innerContainer 上） */
-    .sl-date-range-calendar:not(.has-shortcuts) .flatpickr-innerContainer::after {
+    .sl-import-date-range-calendar:not(.has-shortcuts) .flatpickr-innerContainer::after {
       content: '';
       position: absolute;
       top: 0;
@@ -1060,7 +1060,7 @@ function getImportDialogStyles() {
     }
 
     /* 没有快捷方式时月份头部的分割线 */
-    .sl-date-range-calendar:not(.has-shortcuts) .flatpickr-months::after {
+    .sl-import-date-range-calendar:not(.has-shortcuts) .flatpickr-months::after {
       content: '';
       position: absolute;
       top: 0;
@@ -1072,16 +1072,16 @@ function getImportDialogStyles() {
       pointer-events: none;
     }
 
-    .sl-date-range-calendar .flatpickr-rContainer {
+    .sl-import-date-range-calendar .flatpickr-rContainer {
       width: 622px !important; /* 311px * 2 */
     }
 
-    .sl-date-range-calendar .flatpickr-days .dayContainer + .dayContainer {
+    .sl-import-date-range-calendar .flatpickr-days .dayContainer + .dayContainer {
       box-shadow: none !important;
     }
 
     /* 快捷方式面板 */
-    .sl-date-range-shortcuts {
+    .sl-import-date-range-shortcuts {
       display: flex;
       flex-direction: column;
       padding: 12px 0;
@@ -1090,7 +1090,7 @@ function getImportDialogStyles() {
       flex-shrink: 0;
     }
 
-    .sl-date-range-shortcut-item {
+    .sl-import-date-range-shortcut-item {
       padding: 0px 12px;
       font-size: 14px;
       color: var(--sl-text-color-regular);
@@ -1101,24 +1101,24 @@ function getImportDialogStyles() {
       text-align: start;
     }
 
-    .sl-date-range-shortcut-item:hover {
+    .sl-import-date-range-shortcut-item:hover {
       color: var(--sl-color-primary);
     }
 
-    .sl-date-range-shortcut-item.active {
+    .sl-import-date-range-shortcut-item.active {
       color: var(--sl-color-primary);
       font-weight: 500;
     }
 
     /* 月份头部区域 */
-    .sl-date-range-calendar .flatpickr-months {
+    .sl-import-date-range-calendar .flatpickr-months {
       padding: 0 4px !important;
       align-items: center;
       width: 622px !important; /* 311px * 2 */
       position: relative !important;
     }
 
-    .sl-date-range-calendar .flatpickr-months .flatpickr-month {
+    .sl-import-date-range-calendar .flatpickr-months .flatpickr-month {
       height: 30px;
       display: flex;
       align-items: center;
@@ -1127,10 +1127,10 @@ function getImportDialogStyles() {
     }
 
     /* 箭头样式 */
-    .sl-date-range-calendar .flatpickr-prev-year,
-    .sl-date-range-calendar .flatpickr-next-year,
-    .sl-date-range-calendar .flatpickr-prev-month,
-    .sl-date-range-calendar .flatpickr-next-month {
+    .sl-import-date-range-calendar .flatpickr-prev-year,
+    .sl-import-date-range-calendar .flatpickr-next-year,
+    .sl-import-date-range-calendar .flatpickr-prev-month,
+    .sl-import-date-range-calendar .flatpickr-next-month {
       position: absolute !important;
       top: 0;
       height: 34px;
@@ -1138,31 +1138,31 @@ function getImportDialogStyles() {
       z-index: 3;
     }
 
-    .sl-date-range-calendar .flatpickr-prev-year,
-    .sl-date-range-calendar .flatpickr-prev-month {
+    .sl-import-date-range-calendar .flatpickr-prev-year,
+    .sl-import-date-range-calendar .flatpickr-prev-month {
       left: 0;
     }
 
-    .sl-date-range-calendar .flatpickr-next-year,
-    .sl-date-range-calendar .flatpickr-next-month {
+    .sl-import-date-range-calendar .flatpickr-next-year,
+    .sl-import-date-range-calendar .flatpickr-next-month {
       right: 0;
     }
 
-    .sl-date-range-calendar .flatpickr-current-month {
+    .sl-import-date-range-calendar .flatpickr-current-month {
       font-size: 14px;
       font-weight: 500;
       padding-top: 8px;
     }
 
-    .sl-date-range-calendar .flatpickr-current-month .cur-month {
+    .sl-import-date-range-calendar .flatpickr-current-month .cur-month {
       font-weight: 500;
       font-size: 16px;
       color:var(--sl-text-color)
     }
 
     /* 年份和月份导航箭头 */
-    .sl-date-range-calendar .flatpickr-prev-year,
-    .sl-date-range-calendar .flatpickr-next-year {
+    .sl-import-date-range-calendar .flatpickr-prev-year,
+    .sl-import-date-range-calendar .flatpickr-next-year {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -1179,13 +1179,13 @@ function getImportDialogStyles() {
       z-index: 1;
     }
 
-    .sl-date-range-calendar .flatpickr-prev-year:hover,
-    .sl-date-range-calendar .flatpickr-next-year:hover {
+    .sl-import-date-range-calendar .flatpickr-prev-year:hover,
+    .sl-import-date-range-calendar .flatpickr-next-year:hover {
       color: var(--sl-color-primary);
     }
 
-    .sl-date-range-calendar .flatpickr-prev-month,
-    .sl-date-range-calendar .flatpickr-next-month {
+    .sl-import-date-range-calendar .flatpickr-prev-month,
+    .sl-import-date-range-calendar .flatpickr-next-month {
       padding: 0 !important;
       width: 28px;
       height: 28px;
@@ -1200,22 +1200,22 @@ function getImportDialogStyles() {
       overflow: visible !important;
     }
 
-    .sl-date-range-calendar .flatpickr-prev-month {
+    .sl-import-date-range-calendar .flatpickr-prev-month {
       left: 12px !important;
     }
 
-    .sl-date-range-calendar .flatpickr-next-month {
+    .sl-import-date-range-calendar .flatpickr-next-month {
       right: 12px !important;
     }
 
-    .sl-date-range-calendar .flatpickr-prev-month:hover,
-    .sl-date-range-calendar .flatpickr-next-month:hover {
+    .sl-import-date-range-calendar .flatpickr-prev-month:hover,
+    .sl-import-date-range-calendar .flatpickr-next-month:hover {
       color: var(--sl-color-primary);
     }
 
     /* 隐藏 flatpickr 原始 SVG 箭头（已替换为 iconfont） */
-    .sl-date-range-calendar .flatpickr-prev-month svg,
-    .sl-date-range-calendar .flatpickr-next-month svg {
+    .sl-import-date-range-calendar .flatpickr-prev-month svg,
+    .sl-import-date-range-calendar .flatpickr-next-month svg {
       display: none !important;
     }
     .flatpickr-prev-month .iconfont,
@@ -1227,32 +1227,32 @@ function getImportDialogStyles() {
     }
 
     /* 星期标题 */
-    .sl-date-range-calendar .flatpickr-weekdays {
+    .sl-import-date-range-calendar .flatpickr-weekdays {
       padding: 0 4px;
       height: 36px;
       width: 622px !important; /* 311px * 2 */
     }
 
-    .sl-date-range-calendar .flatpickr-weekdaycontainer {
+    .sl-import-date-range-calendar .flatpickr-weekdaycontainer {
       width: 311px !important;
       min-width: 311px !important;
       flex: none !important;
     }
 
-    .sl-date-range-calendar span.flatpickr-weekday {
+    .sl-import-date-range-calendar span.flatpickr-weekday {
       font-size: var(--sl-font-size-base);
       color: var(--sl-text-color);
       font-weight:400;
     }
 
     /* 日期单元格 */
-    .sl-date-range-calendar .flatpickr-days {
+    .sl-import-date-range-calendar .flatpickr-days {
       padding: 0 4px;
       width: 622px !important; /* 311px * 2 */
       overflow: visible !important;
     }
 
-    .sl-date-range-calendar .dayContainer {
+    .sl-import-date-range-calendar .dayContainer {
       padding: 0 4px;
       width: 311px !important; /* (646 - 24px padding - 1px border) / 2 */
       min-width: 311px !important;
@@ -1265,7 +1265,7 @@ function getImportDialogStyles() {
     }
 
     /* 外层包裹：占满一格宽度，提供 inRange 选中区间的背景色 */
-    .sl-day-cell {
+    .sl-import-day-cell {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -1276,7 +1276,7 @@ function getImportDialogStyles() {
     }
 
     /* 内层 span：日期数字，选中时显示为圆形高亮 */
-    .sl-day-cell .flatpickr-day {
+    .sl-import-day-cell .flatpickr-day {
       font-size: 14px;
       color: var(--sl-text-color);
       width: 24px;
@@ -1291,7 +1291,7 @@ function getImportDialogStyles() {
       background:transparent;
     }
 
-    .sl-day-cell .flatpickr-day:hover {
+    .sl-import-day-cell .flatpickr-day:hover {
       background: transparent !important;
       border-color: transparent !important;
       border: none !important;
@@ -1299,9 +1299,9 @@ function getImportDialogStyles() {
     }
 
     /* 未确认范围时，去掉 flatpickr 默认给 startRange/endRange/inRange 加的背景和边框 */
-    .sl-date-range-calendar:not(.sl-range-confirmed) .sl-day-cell .flatpickr-day.startRange,
-    .sl-date-range-calendar:not(.sl-range-confirmed) .sl-day-cell .flatpickr-day.endRange,
-    .sl-date-range-calendar:not(.sl-range-confirmed) .sl-day-cell .flatpickr-day.inRange {
+    .sl-import-date-range-calendar:not(.sl-import-range-confirmed) .sl-import-day-cell .flatpickr-day.startRange,
+    .sl-import-date-range-calendar:not(.sl-import-range-confirmed) .sl-import-day-cell .flatpickr-day.endRange,
+    .sl-import-date-range-calendar:not(.sl-import-range-confirmed) .sl-import-day-cell .flatpickr-day.inRange {
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
@@ -1309,64 +1309,64 @@ function getImportDialogStyles() {
     }
 
     /* 未确认范围时，鼠标悬停在单元格上才显示主题色 */
-    .sl-date-range-calendar:not(.sl-range-confirmed) .sl-day-cell:hover .flatpickr-day {
+    .sl-import-date-range-calendar:not(.sl-import-range-confirmed) .sl-import-day-cell:hover .flatpickr-day {
       color: var(--sl-color-primary) !important;
     }
 
     /* 未确认范围时，仅第一个选中的日期保留蓝色圆 */
-    .sl-date-range-calendar:not(.sl-range-confirmed) .sl-day-cell .flatpickr-day.selected {
+    .sl-import-date-range-calendar:not(.sl-import-range-confirmed) .sl-import-day-cell .flatpickr-day.selected {
       background: var(--sl-color-primary) !important;
       color: var(--sl-color-white) !important;
       border-radius: 50% !important;
     }
 
     /* 今天：蓝色文字 */
-    .sl-day-cell .flatpickr-day.today {
+    .sl-import-day-cell .flatpickr-day.today {
       border: none;
       color: var(--sl-color-primary);
       font-weight: 600;
     }
 
-    .sl-day-cell .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
+    .sl-import-day-cell .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
       color: var(--sl-color-primary);
       font-weight: 600;
     }
     /* 悬停时的 inRange（未确认范围）：仅改变字体颜色，不显示灰色背景带 */
-    .sl-day-cell:has(.flatpickr-day.inRange) .flatpickr-day {
+    .sl-import-day-cell:has(.flatpickr-day.inRange) .flatpickr-day {
       box-shadow: none ;
     }
 
     /* 已确认范围：显示灰色背景带 */
-    .sl-range-confirmed .sl-day-cell:has(.flatpickr-day.inRange) {
+    .sl-import-range-confirmed .sl-import-day-cell:has(.flatpickr-day.inRange) {
       background: var(--sl-border-color-light);
     }
 
-    .sl-range-confirmed .sl-day-cell:has(.flatpickr-day.inRange) .flatpickr-day:hover {
+    .sl-import-range-confirmed .sl-import-day-cell:has(.flatpickr-day.inRange) .flatpickr-day:hover {
       color: var(--sl-color-primary) !important;
     }
 
     /* 开始日期：仅在范围确认后显示灰色背景带 */
-    .sl-range-confirmed .sl-day-cell:has(.flatpickr-day.startRange) {
+    .sl-import-range-confirmed .sl-import-day-cell:has(.flatpickr-day.startRange) {
       background: var(--sl-border-color-light);
       border-top-left-radius: 50%;
       border-bottom-left-radius: 50%;
     }
 
-    .sl-range-confirmed .sl-day-cell:has(.flatpickr-day.startRange.endRange) {
+    .sl-import-range-confirmed .sl-import-day-cell:has(.flatpickr-day.startRange.endRange) {
       background: transparent;
     }
 
     /* 结束日期：仅在范围确认后显示灰色背景带 */
-    .sl-range-confirmed .sl-day-cell:has(.flatpickr-day.endRange) {
+    .sl-import-range-confirmed .sl-import-day-cell:has(.flatpickr-day.endRange) {
       background: var(--sl-border-color-light);
       border-top-right-radius: 50%;
       border-bottom-right-radius: 50%;
     }
 
     /* 选中的开始和结束日期：蓝色实心圆 */
-    .sl-day-cell .flatpickr-day.selected,
-    .sl-day-cell .flatpickr-day.startRange,
-    .sl-day-cell .flatpickr-day.endRange {
+    .sl-import-day-cell .flatpickr-day.selected,
+    .sl-import-day-cell .flatpickr-day.startRange,
+    .sl-import-day-cell .flatpickr-day.endRange {
       background: var(--sl-color-primary) !important;
       border-color: var(--sl-color-primary) !important;
       color: var(--sl-color-white) !important;
@@ -1374,20 +1374,20 @@ function getImportDialogStyles() {
       box-shadow: none !important;
     }
     /* 禁用日期 */
-    .sl-day-cell .flatpickr-day.flatpickr-disabled {
+    .sl-import-day-cell .flatpickr-day.flatpickr-disabled {
       color: var(--sl-text-color-disabled);
       cursor: not-allowed;
       opacity: 1;
     }
 
-    .sl-day-cell .flatpickr-day.flatpickr-disabled:hover {
+    .sl-import-day-cell .flatpickr-day.flatpickr-disabled:hover {
       background: transparent !important;
       border-color: transparent !important;
       cursor: not-allowed;
     }
 
-    .sl-day-cell .flatpickr-day.prevMonthDay,
-    .sl-day-cell .flatpickr-day.nextMonthDay {
+    .sl-import-day-cell .flatpickr-day.prevMonthDay,
+    .sl-import-day-cell .flatpickr-day.nextMonthDay {
       color: #c0c4cc;
     }
     .flatpickr-day.nextMonthDay.inRange,.flatpickr-day.preMonthDay.inRange{
@@ -1396,7 +1396,7 @@ function getImportDialogStyles() {
     }
 
     /* ============ 多文件上传列表样式 - 横向滚动 ============ */
-    .import-dialog-vanilla-file-list {
+    .sl-import-dialog-vanilla-file-list {
       display: flex;
       flex-direction: row;
       gap: 12px;
@@ -1406,24 +1406,24 @@ function getImportDialogStyles() {
       scrollbar-width: thin;
     }
 
-    .import-dialog-vanilla-file-list::-webkit-scrollbar {
+    .sl-import-dialog-vanilla-file-list::-webkit-scrollbar {
       height: 6px;
     }
 
-    .import-dialog-vanilla-file-list::-webkit-scrollbar-track {
+    .sl-import-dialog-vanilla-file-list::-webkit-scrollbar-track {
       background: transparent;
     }
 
-    .import-dialog-vanilla-file-list::-webkit-scrollbar-thumb {
+    .sl-import-dialog-vanilla-file-list::-webkit-scrollbar-thumb {
       background: #d9d9d9;
       border-radius: 3px;
     }
 
-    .import-dialog-vanilla-file-list::-webkit-scrollbar-thumb:hover {
+    .sl-import-dialog-vanilla-file-list::-webkit-scrollbar-thumb:hover {
       background: #bfbfbf;
     }
 
-    .import-dialog-vanilla-file-item {
+    .sl-import-dialog-vanilla-file-item {
       position: relative;
       display: flex;
       flex-direction: row;
@@ -1439,27 +1439,27 @@ function getImportDialogStyles() {
       cursor: default;
       transition: all 0.2s;
     }
-    .import-dialog-vanilla-file-item.width-100{
+    .sl-import-dialog-vanilla-file-item.width-100{
       width:100%;
     }
 
-    .import-dialog-vanilla-file-item.status-error {
+    .sl-import-dialog-vanilla-file-item.status-error {
       background: var(--sl-color-danger-light-9);
       border:1px solid var(--sl-color-error);
     }
-    .import-dialog-vanilla-file-icon {
+    .sl-import-dialog-vanilla-file-icon {
       width: 18px;
       height: 18px;
       display: flex;
       align-items: center;
     }
 
-    .import-dialog-vanilla-file-icon svg {
+    .sl-import-dialog-vanilla-file-icon svg {
       width: 32px;
       height: 32px;
     }
 
-    .import-dialog-vanilla-file-info {
+    .sl-import-dialog-vanilla-file-info {
       flex: 1;
       min-width: 0;
       display: flex;
@@ -1467,7 +1467,7 @@ function getImportDialogStyles() {
       gap: 2px;
     }
 
-    .import-dialog-vanilla-file-name {
+    .sl-import-dialog-vanilla-file-name {
       font-size: 13px;
       color: var(--sl-text-color);
       white-space: nowrap;
@@ -1477,7 +1477,7 @@ function getImportDialogStyles() {
       width:144px;
     }
 
-    .import-dialog-vanilla-file-meta {
+    .sl-import-dialog-vanilla-file-meta {
       display: flex;
       align-items: center;
       gap: 4px;
@@ -1486,13 +1486,13 @@ function getImportDialogStyles() {
     }
 
 
-    .import-dialog-vanilla-file-error-text {
+    .sl-import-dialog-vanilla-file-error-text {
       font-size: 12px;
       color: var(--sl-color-error);
     }
 
     /* 上传中状态的 loading 图标 */
-    .import-dialog-vanilla-file-loading-icon {
+    .sl-import-dialog-vanilla-file-loading-icon {
       position: absolute;
       top: 8px;
       left: 8px;
@@ -1503,7 +1503,7 @@ function getImportDialogStyles() {
       justify-content: center;
     }
 
-    .loading-spinner {
+    .sl-loading-spinner {
       width: 24px;
       height: 24px;
       border-radius: 50%;
@@ -1515,7 +1515,7 @@ function getImportDialogStyles() {
       position: relative;
     }
 
-    .loading-spinner::before {
+    .sl-loading-spinner::before {
       content: '';
       width: 18px;
       height: 18px;
@@ -1530,12 +1530,12 @@ function getImportDialogStyles() {
     }
 
     /* 上传中状态的文件信息向右偏移 */
-    .import-dialog-vanilla-file-item.status-uploading .import-dialog-vanilla-file-info {
+    .sl-import-dialog-vanilla-file-item.status-uploading .sl-import-dialog-vanilla-file-info {
       margin-left: 32px;
     }
 
     /* 删除按钮 - 默认隐藏，hover时显示 */
-    .import-dialog-vanilla-file-remove-btn {
+    .sl-import-dialog-vanilla-file-remove-btn {
       position: absolute;
       top: 2px;
       right: 2px;
@@ -1551,17 +1551,17 @@ function getImportDialogStyles() {
       z-index: 1;
     }
 
-    .import-dialog-vanilla-file-item:hover .import-dialog-vanilla-file-remove-btn {
+    .sl-import-dialog-vanilla-file-item:hover .sl-import-dialog-vanilla-file-remove-btn {
       opacity: 1;
     }
 
-    .import-dialog-vanilla-file-remove-btn svg {
+    .sl-import-dialog-vanilla-file-remove-btn svg {
       width: 14px;
       height: 14px;
     }
 
     /* 全局遮罩 Loading */
-    .import-dialog-vanilla-loading-overlay {
+    .sl-import-dialog-vanilla-loading-overlay {
       position: absolute;
       top: 0;
       left: 0;
@@ -1574,7 +1574,7 @@ function getImportDialogStyles() {
       z-index: 1000;
     }
 
-    .import-dialog-vanilla-loading-spinner {
+    .sl-import-dialog-vanilla-loading-spinner {
       width: 32px;
       height: 32px;
       border-radius: 50%;
@@ -1586,7 +1586,7 @@ function getImportDialogStyles() {
       position: relative;
     }
 
-    .import-dialog-vanilla-loading-spinner::before {
+    .sl-import-dialog-vanilla-loading-spinner::before {
       content: '';
       width: 24px;
       height: 24px;
@@ -1714,28 +1714,28 @@ class DateRangePicker {
   }
   render() {
     this.container.innerHTML = "";
-    this.container.className = "sl-date-range-picker";
+    this.container.className = "sl-import-date-range-picker";
     this.startInput = document.createElement("input");
     this.startInput.type = "text";
-    this.startInput.className = "sl-date-range-input";
+    this.startInput.className = "sl-import-date-range-input";
     this.startInput.placeholder = this.placeholder[0];
     this.startInput.readOnly = true;
     if (this.selectedDates[0]) {
       this.startInput.value = this.formatDate(this.selectedDates[0]);
     }
     const separator = document.createElement("span");
-    separator.className = "sl-date-range-separator";
+    separator.className = "sl-import-date-range-separator";
     separator.textContent = "To";
     this.endInput = document.createElement("input");
     this.endInput.type = "text";
-    this.endInput.className = "sl-date-range-input";
+    this.endInput.className = "sl-import-date-range-input";
     this.endInput.placeholder = this.placeholder[1];
     this.endInput.readOnly = true;
     if (this.selectedDates[1]) {
       this.endInput.value = this.formatDate(this.selectedDates[1]);
     }
     const iconBtn = document.createElement("span");
-    iconBtn.className = "sl-date-range-icon";
+    iconBtn.className = "sl-import-date-range-icon";
     iconBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M5 1v2M11 1v2M1.5 6h13M3 2.5h10a1.5 1.5 0 011.5 1.5v10a1.5 1.5 0 01-1.5 1.5H3a1.5 1.5 0 01-1.5-1.5V4A1.5 1.5 0 013 2.5z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`;
@@ -1751,10 +1751,10 @@ class DateRangePicker {
   }
   buildShortcutsPanel() {
     const panel = document.createElement("div");
-    panel.className = "sl-date-range-shortcuts";
+    panel.className = "sl-import-date-range-shortcuts";
     this.shortcuts.forEach((shortcut, index) => {
       const item = document.createElement("div");
-      item.className = "sl-date-range-shortcut-item";
+      item.className = "sl-import-date-range-shortcut-item";
       if (index === this.activeShortcutIndex) {
         item.classList.add("active");
       }
@@ -1779,7 +1779,9 @@ class DateRangePicker {
     this.endInput.value = this.formatDate(end);
     (_a = this.fpInstance) == null ? void 0 : _a.setDate([start, end], false);
     (_b = this.onChange) == null ? void 0 : _b.call(this, [start, end]);
-    (_c = this.fpInstance) == null ? void 0 : _c.calendarContainer.classList.add("sl-range-confirmed");
+    (_c = this.fpInstance) == null ? void 0 : _c.calendarContainer.classList.add(
+      "sl-import-range-confirmed"
+    );
     if (this.fpInstance) {
       this.updateMonthHeaders(this.fpInstance);
       this.unwrapDayCells(this.fpInstance);
@@ -1793,10 +1795,10 @@ class DateRangePicker {
   updateShortcutActiveState() {
     var _a;
     const panel = (_a = this.fpInstance) == null ? void 0 : _a.calendarContainer.querySelector(
-      ".sl-date-range-shortcuts"
+      ".sl-import-date-range-shortcuts"
     );
     if (!panel) return;
-    const items = panel.querySelectorAll(".sl-date-range-shortcut-item");
+    const items = panel.querySelectorAll(".sl-import-date-range-shortcut-item");
     items.forEach((item, i) => {
       if (i === this.activeShortcutIndex) {
         item.classList.add("active");
@@ -1826,13 +1828,19 @@ class DateRangePicker {
       position: "below",
       disable: disableConfig,
       onReady: (_selectedDates, _dateStr, instance) => {
-        instance.calendarContainer.classList.add("sl-date-range-calendar");
+        instance.calendarContainer.classList.add(
+          "sl-import-date-range-calendar"
+        );
         if (_selectedDates.length === 2) {
-          instance.calendarContainer.classList.add("sl-range-confirmed");
+          instance.calendarContainer.classList.add("sl-import-range-confirmed");
         }
         instance.calendarContainer.addEventListener("mouseleave", () => {
-          if (!instance.calendarContainer.classList.contains("sl-range-confirmed") && instance.selectedDates.length === 1) {
-            instance.calendarContainer.querySelectorAll(".flatpickr-day.inRange, .flatpickr-day.endRange").forEach((el) => {
+          if (!instance.calendarContainer.classList.contains(
+            "sl-import-range-confirmed"
+          ) && instance.selectedDates.length === 1) {
+            instance.calendarContainer.querySelectorAll(
+              ".flatpickr-day.inRange, .flatpickr-day.endRange"
+            ).forEach((el) => {
               el.classList.remove("inRange", "endRange");
             });
           }
@@ -1843,7 +1851,7 @@ class DateRangePicker {
         if (this.shortcuts.length > 0) {
           instance.calendarContainer.classList.add("has-shortcuts");
           const calendarContent = document.createElement("div");
-          calendarContent.className = "sl-date-range-calendar-content";
+          calendarContent.className = "sl-import-date-range-calendar-content";
           while (instance.calendarContainer.firstChild) {
             calendarContent.appendChild(instance.calendarContainer.firstChild);
           }
@@ -1892,12 +1900,14 @@ class DateRangePicker {
           this.startInput.value = this.formatDate(dates[0]);
           this.endInput.value = this.formatDate(dates[1]);
           (_a = this.onChange) == null ? void 0 : _a.call(this, this.selectedDates);
-          instance.calendarContainer.classList.add("sl-range-confirmed");
+          instance.calendarContainer.classList.add("sl-import-range-confirmed");
         } else if (dates.length === 1) {
           this.selectedDates = [dates[0], null];
           this.startInput.value = this.formatDate(dates[0]);
           this.endInput.value = "";
-          instance.calendarContainer.classList.remove("sl-range-confirmed");
+          instance.calendarContainer.classList.remove(
+            "sl-import-range-confirmed"
+          );
         }
         requestAnimationFrame(() => {
           this.updateMonthHeaders(instance);
@@ -2017,7 +2027,7 @@ class DateRangePicker {
     });
   }
   /**
-   * 将每个 .flatpickr-day span 包裹在 div.sl-day-cell 中，实现双层渲染：
+   * 将每个 .flatpickr-day span 包裹在 div.sl-import-day-cell 中，实现双层渲染：
    * - 外层 div：占满整格宽度的背景带（用于 inRange）
    * - 内层 span：圆形高亮（用于 startRange/endRange）
    * 类似 Element Plus 的 table>tr>td>div>span 结构。
@@ -2026,31 +2036,33 @@ class DateRangePicker {
     const containers = instance.calendarContainer.querySelectorAll(".dayContainer");
     containers.forEach((container) => {
       const days = container.querySelectorAll(
-        ".flatpickr-day:not(.sl-day-wrapped)"
+        ".flatpickr-day:not(.sl-import-day-wrapped)"
       );
       days.forEach((day) => {
         var _a;
-        if (day.parentElement && day.parentElement.classList.contains("sl-day-cell")) {
+        if (day.parentElement && day.parentElement.classList.contains("sl-import-day-cell")) {
           return;
         }
         const wrapper = document.createElement("div");
-        wrapper.className = "sl-day-cell";
-        day.classList.add("sl-day-wrapped");
+        wrapper.className = "sl-import-day-cell";
+        day.classList.add("sl-import-day-wrapped");
         (_a = day.parentNode) == null ? void 0 : _a.insertBefore(wrapper, day);
         wrapper.appendChild(day);
       });
     });
   }
   /**
-   * 移除所有 sl-day-cell 包裹，恢复 flatpickr 的扁平结构。
+   * 移除所有 sl-import-day-cell 包裹，恢复 flatpickr 的扁平结构。
    */
   unwrapDayCells(instance) {
-    const wrappers = instance.calendarContainer.querySelectorAll(".sl-day-cell");
+    const wrappers = instance.calendarContainer.querySelectorAll(
+      ".sl-import-day-cell"
+    );
     wrappers.forEach((wrapper) => {
       var _a;
       const child = wrapper.firstElementChild;
       if (child) {
-        child.classList.remove("sl-day-wrapped");
+        child.classList.remove("sl-import-day-wrapped");
         (_a = wrapper.parentNode) == null ? void 0 : _a.insertBefore(child, wrapper);
       }
       wrapper.remove();
@@ -2079,18 +2091,18 @@ class DateRangePicker {
       cal.style.top = `${inputRect.bottom + window.scrollY + gap + arrowSize}px`;
     }
     cal.style.left = `${clampedLeft}px`;
-    let arrow = cal.querySelector(".sl-calendar-arrow");
+    let arrow = cal.querySelector(".sl-import-calendar-arrow");
     if (!arrow) {
       arrow = document.createElement("div");
-      arrow.className = "sl-calendar-arrow";
+      arrow.className = "sl-import-calendar-arrow";
       cal.appendChild(arrow);
     }
     const arrowLeft = inputCenter - clampedLeft;
     arrow.style.left = `${arrowLeft}px`;
     if (placeAbove) {
-      arrow.className = "sl-calendar-arrow sl-calendar-arrow-bottom";
+      arrow.className = "sl-import-calendar-arrow sl-import-calendar-arrow-bottom";
     } else {
-      arrow.className = "sl-calendar-arrow sl-calendar-arrow-top";
+      arrow.className = "sl-import-calendar-arrow sl-import-calendar-arrow-top";
     }
   }
   formatDate(date) {
@@ -2749,13 +2761,13 @@ class ImportDialogRenderer {
     const config = this.context.currentConfig;
     const hasTabs = config.tabs && config.tabs.length > 0;
     return `
-      <div class="import-dialog-vanilla-overlay">
-        <div class="import-dialog-vanilla-modal" style="width: ${this.context.width}">
-          <div class="import-dialog-vanilla-header">
-            <span class="import-dialog-vanilla-title">${this.context.dialogTitle}</span>
-            <span id="import-dialog-close-btn" class="import-dialog-vanilla-close">&times;</span>
+      <div class="sl-import-dialog-vanilla-overlay">
+        <div class="sl-import-dialog-vanilla-modal" style="width: ${this.context.width}">
+          <div class="sl-import-dialog-vanilla-header">
+            <span class="sl-import-dialog-vanilla-title">${this.context.dialogTitle}</span>
+            <span id="sl-import-dialog-close-btn" class="sl-import-dialog-vanilla-close">&times;</span>
           </div>
-          <div class="import-dialog-vanilla-content">
+          <div class="sl-import-dialog-vanilla-content">
             ${hasTabs ? this.renderTabs() : ""}
             ${this.renderDownloadSection()}
             ${this.showSettingSection ? this.renderSettingSection() : ""}
@@ -2770,10 +2782,10 @@ class ImportDialogRenderer {
   renderTabs() {
     const tabs = this.context.currentConfig.tabs;
     return `
-      <div class="import-dialog-vanilla-tabs">
+      <div class="sl-import-dialog-vanilla-tabs">
         ${tabs.map(
       (tab, index) => `
-          <div class="import-dialog-vanilla-tab ${this.context.activeTabIndex === index ? "active" : ""}" 
+          <div class="sl-import-dialog-vanilla-tab ${this.context.activeTabIndex === index ? "active" : ""}" 
                data-tab-index="${index}">
             ${tab.label}
           </div>
@@ -2787,9 +2799,9 @@ class ImportDialogRenderer {
     const hasDownloadCallback = !!this.context.modalOptions.onDownloadTemplate;
     if (hasDownloadCallback) {
       return `
-        <div class="import-dialog-vanilla-section">
-          <div class="import-dialog-vanilla-section-title">${t("downloadTemplateTitle")}</div>
-          <button id="import-dialog-download-btn" class="import-dialog-vanilla-btn download-template-btn import-dialog-vanilla-btn-primary">
+        <div class="sl-import-dialog-vanilla-section">
+          <div class="sl-import-dialog-vanilla-section-title">${t("downloadTemplateTitle")}</div>
+          <button id="sl-import-dialog-download-btn" class="sl-import-dialog-vanilla-btn download-template-btn sl-import-dialog-vanilla-btn-primary">
             <i class="iconfont icon-xiazai"></i>
             ${t("downloadTemplateText")}
           </button>
@@ -2797,9 +2809,9 @@ class ImportDialogRenderer {
       `;
     } else if (hasTemplateUrl) {
       return `
-        <div class="import-dialog-vanilla-section">
-          <div class="import-dialog-vanilla-section-title">${t("downloadTemplateTitle")}</div>
-          <a id="import-dialog-download-btn" class="import-dialog-vanilla-btn download-template-btn import-dialog-vanilla-btn-primary" href="${this.context.currentConfig.templateUrl}">
+        <div class="sl-import-dialog-vanilla-section">
+          <div class="sl-import-dialog-vanilla-section-title">${t("downloadTemplateTitle")}</div>
+          <a id="sl-import-dialog-download-btn" class="sl-import-dialog-vanilla-btn download-template-btn sl-import-dialog-vanilla-btn-primary" href="${this.context.currentConfig.templateUrl}">
             <i class="iconfont icon-xiazai"></i>
             ${t("downloadTemplateText")}
           </a>
@@ -2825,9 +2837,9 @@ class ImportDialogRenderer {
       content += this.renderDateRangeSelect();
     }
     return `
-      <div class="import-dialog-vanilla-section">
-        <div class="import-dialog-vanilla-section-title">${t("importSettingsTitle")}</div>
-        <div class="import-dialog-vanilla-setting-content">
+      <div class="sl-import-dialog-vanilla-section">
+        <div class="sl-import-dialog-vanilla-section-title">${t("importSettingsTitle")}</div>
+        <div class="sl-import-dialog-vanilla-setting-content">
           ${content}
         </div>
       </div>
@@ -2840,17 +2852,17 @@ class ImportDialogRenderer {
     );
     const displayValue = selectedBrand ? selectedBrand.label : this.context.brandLoading ? t("loadingText") : placeholder;
     return `
-      <div class="import-dialog-vanilla-setting-item">
-        <span class="import-dialog-vanilla-setting-label required">${t("selectBrand")}</span>
-        <div class="import-dialog-vanilla-custom-select" data-field="brandId">
-          <div class="import-dialog-vanilla-select-trigger ${this.context.brandLoading ? "disabled" : ""}">
-            <span class="import-dialog-vanilla-select-value ${!selectedBrand && !this.context.brandLoading ? "import-dialog-vanilla-select-placeholder" : ""}">${displayValue}</span>
-            <span class="import-dialog-vanilla-select-arrow"></span>
+      <div class="sl-import-dialog-vanilla-setting-item">
+        <span class="sl-import-dialog-vanilla-setting-label required">${t("selectBrand")}</span>
+        <div class="sl-import-dialog-vanilla-custom-select" data-field="brandId">
+          <div class="sl-import-dialog-vanilla-select-trigger ${this.context.brandLoading ? "disabled" : ""}">
+            <span class="sl-import-dialog-vanilla-select-value ${!selectedBrand && !this.context.brandLoading ? "sl-import-dialog-vanilla-select-placeholder" : ""}">${displayValue}</span>
+            <span class="sl-import-dialog-vanilla-select-arrow"></span>
           </div>
-          <div class="import-dialog-vanilla-select-dropdown">
+          <div class="sl-import-dialog-vanilla-select-dropdown">
             ${this.context.brandList.map(
       (item) => `
-              <div class="import-dialog-vanilla-select-option ${this.context.formData.brandId === item.value ? "selected" : ""}" 
+              <div class="sl-import-dialog-vanilla-select-option ${this.context.formData.brandId === item.value ? "selected" : ""}" 
                    data-value="${item.value}">
                 ${item.label}
               </div>
@@ -2864,12 +2876,12 @@ class ImportDialogRenderer {
   renderImageRatioSelect() {
     const options = this.imageRatioOptions;
     return `
-      <div class="import-dialog-vanilla-setting-item">
-        <span class="import-dialog-vanilla-setting-label required">${t("selectImageRatio")}</span>
-        <div class="import-dialog-vanilla-radio-group">
+      <div class="sl-import-dialog-vanilla-setting-item">
+        <span class="sl-import-dialog-vanilla-setting-label required">${t("selectImageRatio")}</span>
+        <div class="sl-import-dialog-vanilla-radio-group">
           ${options.map(
       (ratio) => `
-            <label class="import-dialog-vanilla-radio">
+            <label class="sl-import-dialog-vanilla-radio">
               <input type="radio" name="imageRatio" value="${ratio.value}" 
                      ${this.context.formData.imageRatio === ratio.value ? "checked" : ""} data-field="imageRatio">
               <span>${ratio.label}</span>
@@ -2886,17 +2898,17 @@ class ImportDialogRenderer {
     );
     const displayValue = selectedMonth ? `${selectedMonth}${t("month")}` : t("selectMonth");
     return `
-      <div class="import-dialog-vanilla-setting-item">
-        <span class="import-dialog-vanilla-setting-label required">${t("selectMonth")}</span>
-        <div class="import-dialog-vanilla-custom-select" data-field="month">
-          <div class="import-dialog-vanilla-select-trigger">
-            <span class="import-dialog-vanilla-select-value ${!selectedMonth ? "import-dialog-vanilla-select-placeholder" : ""}">${displayValue}</span>
-            <span class="import-dialog-vanilla-select-arrow"></span>
+      <div class="sl-import-dialog-vanilla-setting-item">
+        <span class="sl-import-dialog-vanilla-setting-label required">${t("selectMonth")}</span>
+        <div class="sl-import-dialog-vanilla-custom-select" data-field="month">
+          <div class="sl-import-dialog-vanilla-select-trigger">
+            <span class="sl-import-dialog-vanilla-select-value ${!selectedMonth ? "sl-import-dialog-vanilla-select-placeholder" : ""}">${displayValue}</span>
+            <span class="sl-import-dialog-vanilla-select-arrow"></span>
           </div>
-          <div class="import-dialog-vanilla-select-dropdown">
+          <div class="sl-import-dialog-vanilla-select-dropdown">
             ${this.monthOptions.map(
       (m) => `
-              <div class="import-dialog-vanilla-select-option ${this.context.formData.month === m ? "selected" : ""}" 
+              <div class="sl-import-dialog-vanilla-select-option ${this.context.formData.month === m ? "selected" : ""}" 
                    data-value="${m}">
                 ${m}${t("month")}
               </div>
@@ -2909,9 +2921,9 @@ class ImportDialogRenderer {
   }
   renderDateRangeSelect() {
     return `
-      <div class="import-dialog-vanilla-setting-item">
-        <span class="import-dialog-vanilla-setting-label required">${t("selectDate")}</span>
-        <div class="import-dialog-vanilla-date-range-container" data-field="dateRange"></div>
+      <div class="sl-import-dialog-vanilla-setting-item">
+        <span class="sl-import-dialog-vanilla-setting-label required">${t("selectDate")}</span>
+        <div class="sl-import-dialog-vanilla-date-range-container" data-field="dateRange"></div>
       </div>
     `;
   }
@@ -2923,21 +2935,21 @@ class ImportDialogRenderer {
     );
     const reachedLimit = this.context.multiple && this.context.maxFiles != null && this.context.uploadFileList.length >= this.context.maxFiles;
     return `
-      <div class="import-dialog-vanilla-section">
-        <div class="import-dialog-vanilla-section-title">${this.uploadSectionIndex}.${config.uploadTitle}</div>
-        <div class="import-dialog-vanilla-upload-wrapper">
+      <div class="sl-import-dialog-vanilla-section">
+        <div class="sl-import-dialog-vanilla-section-title">${this.uploadSectionIndex}.${config.uploadTitle}</div>
+        <div class="sl-import-dialog-vanilla-upload-wrapper">
           ${hasFiles ? this.renderFileList() : ""}
           ${!reachedLimit ? `
-          <div id="import-dialog-upload-area" class="import-dialog-vanilla-upload-area ${isAllUploading ? "disabled" : ""}">
-            <input type="file" class="import-dialog-vanilla-file-input" accept="${config.acceptTypes}" ${this.context.multiple ? "multiple" : ""} ${isAllUploading ? "disabled" : ""}>
-            <div class="import-dialog-vanilla-upload-content">
-              <img class="import-dialog-vanilla-upload-icon" src="${uploadImage}" alt="">
-              <p class="import-dialog-vanilla-upload-text">
+          <div id="sl-import-dialog-upload-area" class="sl-import-dialog-vanilla-upload-area ${isAllUploading ? "disabled" : ""}">
+            <input type="file" class="sl-import-dialog-vanilla-file-input" accept="${config.acceptTypes}" ${this.context.multiple ? "multiple" : ""} ${isAllUploading ? "disabled" : ""}>
+            <div class="sl-import-dialog-vanilla-upload-content">
+              <img class="sl-import-dialog-vanilla-upload-icon" src="${uploadImage}" alt="">
+              <p class="sl-import-dialog-vanilla-upload-text">
                 ${t("dragFileHere")}
                 ${t("or")}
-                <a class="import-dialog-vanilla-upload-link">${config.uploadLinkText}</a>
+                <a class="sl-import-dialog-vanilla-upload-link">${config.uploadLinkText}</a>
               </p>
-              <p class="import-dialog-vanilla-upload-hint">${config.uploadHint}</p>
+              <p class="sl-import-dialog-vanilla-upload-hint">${config.uploadHint}</p>
             </div>
           </div>
           ` : ""}
@@ -2948,7 +2960,7 @@ class ImportDialogRenderer {
   renderFileList() {
     if (this.context.uploadFileList.length === 0) return "";
     return `
-      <div class="import-dialog-vanilla-file-list">
+      <div class="sl-import-dialog-vanilla-file-list">
         ${this.context.uploadFileList.map((fileItem, index) => this.renderFileItem(fileItem, index)).join("")}
       </div>
     `;
@@ -2964,7 +2976,7 @@ class ImportDialogRenderer {
     const iconColor = isError ? "#FF1212" : "#FFD741";
     let metaContent = "";
     if (isError) {
-      metaContent = `<span class="import-dialog-vanilla-file-error-text">${t("uploadFailed")}</span>`;
+      metaContent = `<span class="sl-import-dialog-vanilla-file-error-text">${t("uploadFailed")}</span>`;
     } else if (isUploading) {
       metaContent = `<span>${t("uploading")}...</span><span>·</span><span>${fileSize}</span>`;
     } else {
@@ -2972,19 +2984,19 @@ class ImportDialogRenderer {
     }
     if (isUploading) {
       return `
-        <div class="import-dialog-vanilla-file-item ${statusClass} ${widthClass}" data-file-id="${fileItem.id}">
-          <div class="import-dialog-vanilla-file-loading-icon">
-            <div class="loading-spinner"></div>
+        <div class="sl-import-dialog-vanilla-file-item ${statusClass} ${widthClass}" data-file-id="${fileItem.id}">
+          <div class="sl-import-dialog-vanilla-file-loading-icon">
+            <div class="sl-loading-spinner"></div>
           </div>
-          <div class="import-dialog-vanilla-file-remove-btn" data-file-index="${index}" title="删除">
+          <div class="sl-import-dialog-vanilla-file-remove-btn" data-file-index="${index}" title="删除">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <circle cx="8" cy="8" r="8" fill="rgba(0,0,0)"/>
               <path d="M5 5L11 11M11 5L5 11" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
             </svg>
           </div>
-          <div class="import-dialog-vanilla-file-info">
-            <div class="import-dialog-vanilla-file-name" title="${fileItem.name}">${fileItem.name}</div>
-            <div class="import-dialog-vanilla-file-meta">
+          <div class="sl-import-dialog-vanilla-file-info">
+            <div class="sl-import-dialog-vanilla-file-name" title="${fileItem.name}">${fileItem.name}</div>
+            <div class="sl-import-dialog-vanilla-file-meta">
               ${metaContent}
             </div>
           </div>
@@ -2992,21 +3004,21 @@ class ImportDialogRenderer {
       `;
     }
     return `
-      <div class="import-dialog-vanilla-file-item ${statusClass} ${widthClass}" data-file-id="${fileItem.id}">
-        <div class="import-dialog-vanilla-file-icon">
+      <div class="sl-import-dialog-vanilla-file-item ${statusClass} ${widthClass}" data-file-id="${fileItem.id}">
+        <div class="sl-import-dialog-vanilla-file-icon">
           <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M4 6C4 4.89543 4.89543 4 6 4H14L18 8H26C27.1046 8 28 8.89543 28 10V26C28 27.1046 27.1046 28 26 28H6C4.89543 28 4 27.1046 4 26V6Z" fill="${iconColor}"/>
           </svg>
         </div>
-        <div class="import-dialog-vanilla-file-remove-btn" data-file-index="${index}" title="删除">
+        <div class="sl-import-dialog-vanilla-file-remove-btn" data-file-index="${index}" title="删除">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <circle cx="8" cy="8" r="8" fill="rgba(0,0,0)"/>
             <path d="M5 5L11 11M11 5L5 11" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
           </svg>
         </div>
-        <div class="import-dialog-vanilla-file-info">
-          <div class="import-dialog-vanilla-file-name" title="${fileItem.name}">${fileItem.name}</div>
-          <div class="import-dialog-vanilla-file-meta">
+        <div class="sl-import-dialog-vanilla-file-info">
+          <div class="sl-import-dialog-vanilla-file-name" title="${fileItem.name}">${fileItem.name}</div>
+          <div class="sl-import-dialog-vanilla-file-meta">
             ${metaContent}
           </div>
         </div>
@@ -3024,15 +3036,15 @@ class ImportDialogRenderer {
     if (!this.context.isUploading && !this.context.uploadMessage) return "";
     const progressStatus = this.context.uploadMessageType === "error" ? "error" : this.context.uploadProgress === 100 ? "success" : "active";
     return `
-      <div class="import-dialog-vanilla-upload-progress">
+      <div class="sl-import-dialog-vanilla-upload-progress">
         ${this.context.isUploading || this.context.uploadProgress > 0 ? `
-          <div class="import-dialog-vanilla-progress-bar">
-            <div class="import-dialog-vanilla-progress-inner ${progressStatus}" style="width: ${this.context.uploadProgress}%"></div>
+          <div class="sl-import-dialog-vanilla-progress-bar">
+            <div class="sl-import-dialog-vanilla-progress-inner ${progressStatus}" style="width: ${this.context.uploadProgress}%"></div>
           </div>
-          <span class="import-dialog-vanilla-progress-text">${this.context.uploadProgress}%</span>
+          <span class="sl-import-dialog-vanilla-progress-text">${this.context.uploadProgress}%</span>
         ` : ""}
         ${this.context.uploadMessage ? `
-          <div class="import-dialog-vanilla-upload-message ${this.context.uploadMessageType}">
+          <div class="sl-import-dialog-vanilla-upload-message ${this.context.uploadMessageType}">
             ${this.context.uploadMessage}
           </div>
         ` : ""}
@@ -3041,28 +3053,28 @@ class ImportDialogRenderer {
   }
   renderTipsSection() {
     return `
-      <div class="import-dialog-vanilla-section">
-        <div class="import-dialog-vanilla-section-title">
-          <span class="import-dialog-vanilla-tips-icon"><i class="iconfont icon-icon_tips"></i></span>
-          <span class="import-dialog-vanilla-tips-title">${t("tipsTitle")}</span>
+      <div class="sl-import-dialog-vanilla-section">
+        <div class="sl-import-dialog-vanilla-section-title">
+          <span class="sl-import-dialog-vanilla-tips-icon"><i class="iconfont icon-icon_tips"></i></span>
+          <span class="sl-import-dialog-vanilla-tips-title">${t("tipsTitle")}</span>
         </div>
-        <div class="import-dialog-vanilla-tips-content">
-          ${this.tipsList.map((tip) => `<p class="import-dialog-vanilla-tip-item">${tip}</p>`).join("")}
+        <div class="sl-import-dialog-vanilla-tips-content">
+          ${this.tipsList.map((tip) => `<p class="sl-import-dialog-vanilla-tip-item">${tip}</p>`).join("")}
         </div>
       </div>
     `;
   }
   renderFooter() {
     return `
-      <div class="import-dialog-vanilla-footer">
-        <button id="import-dialog-cancel-btn" class="import-dialog-vanilla-btn">${t("cancel")}</button>
-        <button id="import-dialog-confirm-btn" class="import-dialog-vanilla-btn import-dialog-vanilla-btn-primary">
+      <div class="sl-import-dialog-vanilla-footer">
+        <button id="sl-import-dialog-cancel-btn" class="sl-import-dialog-vanilla-btn">${t("cancel")}</button>
+        <button id="sl-import-dialog-confirm-btn" class="sl-import-dialog-vanilla-btn sl-import-dialog-vanilla-btn-primary">
           ${t("confirm")}
         </button>
       </div>
       ${this.context.confirmLoading ? `
-      <div class="import-dialog-vanilla-loading-overlay">
-        <div class="import-dialog-vanilla-loading-spinner"></div>
+      <div class="sl-import-dialog-vanilla-loading-overlay">
+        <div class="sl-import-dialog-vanilla-loading-spinner"></div>
       </div>
       ` : ""}
     `;
@@ -3756,14 +3768,14 @@ const activeToasts = /* @__PURE__ */ new Set();
 function showToast(options) {
   const { message, type, duration = 3e3, closable = true } = options;
   const toast2 = document.createElement("div");
-  toast2.className = `import-dialog-vanilla-toast ${type}`;
+  toast2.className = `sl-import-dialog-vanilla-toast ${type}`;
   const iconClass = ICON_MAP[type] || ICON_MAP.info;
   toast2.innerHTML = `
-    <div class="import-dialog-vanilla-toast-content">
-      <i class="iconfont ${iconClass} import-dialog-vanilla-toast-icon"></i>
-      <span class="import-dialog-vanilla-toast-message">${message}</span>
+    <div class="sl-import-dialog-vanilla-toast-content">
+      <i class="iconfont ${iconClass} sl-import-dialog-vanilla-toast-icon"></i>
+      <span class="sl-import-dialog-vanilla-toast-message">${message}</span>
     </div>
-    ${closable ? `<button class="import-dialog-vanilla-toast-close" data-action="close-toast">
+    ${closable ? `<button class="sl-import-dialog-vanilla-toast-close" data-action="close-toast">
         <i class="iconfont icon-guanbi"></i>
       </button>` : ""}
   `;
@@ -3868,7 +3880,7 @@ const _ImportDialog = class _ImportDialog2 {
     __publicField(this, "handleDocumentClick", (e) => {
       const target = e.target;
       const clickedInsideSelect = Array.from(
-        document.querySelectorAll(".import-dialog-vanilla-custom-select")
+        document.querySelectorAll(".sl-import-dialog-vanilla-custom-select")
       ).some((select) => select.contains(target));
       if (!clickedInsideSelect) {
         this.closeAllSelects();
@@ -3879,9 +3891,9 @@ const _ImportDialog = class _ImportDialog2 {
     this.initUploader();
   }
   injectStyles() {
-    if (document.getElementById("import-dialog-vanilla-styles")) return;
+    if (document.getElementById("sl-import-dialog-vanilla-styles")) return;
     this.styleElement = document.createElement("style");
-    this.styleElement.id = "import-dialog-vanilla-styles";
+    this.styleElement.id = "sl-import-dialog-vanilla-styles";
     this.styleElement.textContent = getImportDialogStyles();
     document.head.appendChild(this.styleElement);
   }
@@ -3970,7 +3982,7 @@ const _ImportDialog = class _ImportDialog2 {
     }
     this.renderer = new ImportDialogRenderer(this.getRenderContext());
     this.modalElement = document.createElement("div");
-    this.modalElement.className = "import-dialog-vanilla-wrapper";
+    this.modalElement.className = "sl-import-dialog-vanilla-wrapper";
     this.modalElement.innerHTML = this.renderer.render();
     (_a = this.container) == null ? void 0 : _a.appendChild(this.modalElement);
     this.bindEvents();
@@ -4040,19 +4052,19 @@ const _ImportDialog = class _ImportDialog2 {
   bindEvents() {
     if (!this.modalElement) return;
     const overlay = this.modalElement.querySelector(
-      ".import-dialog-vanilla-overlay"
+      ".sl-import-dialog-vanilla-overlay"
     );
     overlay == null ? void 0 : overlay.addEventListener("click", (e) => e.stopPropagation());
     const modal = this.modalElement.querySelector(
-      ".import-dialog-vanilla-modal"
+      ".sl-import-dialog-vanilla-modal"
     );
     modal == null ? void 0 : modal.addEventListener("click", (e) => e.stopPropagation());
     const closeBtn = this.modalElement.querySelector(
-      "#import-dialog-close-btn"
+      "#sl-import-dialog-close-btn"
     );
     closeBtn == null ? void 0 : closeBtn.addEventListener("click", () => this.handleCancel());
     const tabs = this.modalElement.querySelectorAll(
-      ".import-dialog-vanilla-tab"
+      ".sl-import-dialog-vanilla-tab"
     );
     tabs.forEach((tab) => {
       tab.addEventListener("click", (e) => {
@@ -4063,10 +4075,10 @@ const _ImportDialog = class _ImportDialog2 {
       });
     });
     const uploadArea = this.modalElement.querySelector(
-      ".import-dialog-vanilla-upload-area"
+      ".sl-import-dialog-vanilla-upload-area"
     );
     const fileInput = this.modalElement.querySelector(
-      ".import-dialog-vanilla-file-input"
+      ".sl-import-dialog-vanilla-file-input"
     );
     uploadArea == null ? void 0 : uploadArea.addEventListener("click", () => {
       if (!this.uploader.isUploading) {
@@ -4107,7 +4119,7 @@ const _ImportDialog = class _ImportDialog2 {
       }
     });
     const removeBtns = this.modalElement.querySelectorAll(
-      ".import-dialog-vanilla-file-remove-btn"
+      ".sl-import-dialog-vanilla-file-remove-btn"
     );
     removeBtns.forEach((btn) => {
       btn.addEventListener("click", (e) => {
@@ -4122,15 +4134,15 @@ const _ImportDialog = class _ImportDialog2 {
     });
     this.bindFormEvents();
     const confirmBtn = this.modalElement.querySelector(
-      "#import-dialog-confirm-btn"
+      "#sl-import-dialog-confirm-btn"
     );
     confirmBtn == null ? void 0 : confirmBtn.addEventListener("click", () => this.handleConfirm());
     const cancelBtn = this.modalElement.querySelector(
-      "#import-dialog-cancel-btn"
+      "#sl-import-dialog-cancel-btn"
     );
     cancelBtn == null ? void 0 : cancelBtn.addEventListener("click", () => this.handleCancel());
     const downloadBtn = this.modalElement.querySelector(
-      "#import-dialog-download-btn"
+      "#sl-import-dialog-download-btn"
     );
     downloadBtn == null ? void 0 : downloadBtn.addEventListener("click", (e) => {
       e.preventDefault();
@@ -4152,17 +4164,17 @@ const _ImportDialog = class _ImportDialog2 {
   bindCustomSelectEvents() {
     if (!this.modalElement) return;
     const customSelects = this.modalElement.querySelectorAll(
-      ".import-dialog-vanilla-custom-select"
+      ".sl-import-dialog-vanilla-custom-select"
     );
     customSelects.forEach((customSelect) => {
       const trigger = customSelect.querySelector(
-        ".import-dialog-vanilla-select-trigger"
+        ".sl-import-dialog-vanilla-select-trigger"
       );
       const dropdown = customSelect.querySelector(
-        ".import-dialog-vanilla-select-dropdown"
+        ".sl-import-dialog-vanilla-select-dropdown"
       );
       const options = customSelect.querySelectorAll(
-        ".import-dialog-vanilla-select-option"
+        ".sl-import-dialog-vanilla-select-option"
       );
       const fieldName = customSelect.getAttribute("data-field");
       trigger == null ? void 0 : trigger.addEventListener("click", (e) => {
@@ -4179,12 +4191,12 @@ const _ImportDialog = class _ImportDialog2 {
           const value = option.getAttribute("data-value");
           const label = option.textContent || "";
           const valueElement = trigger.querySelector(
-            ".import-dialog-vanilla-select-value"
+            ".sl-import-dialog-vanilla-select-value"
           );
           if (valueElement) {
             valueElement.textContent = label;
             valueElement.classList.remove(
-              "import-dialog-vanilla-select-placeholder"
+              "sl-import-dialog-vanilla-select-placeholder"
             );
           }
           options.forEach((opt) => opt.classList.remove("selected"));
@@ -4205,15 +4217,15 @@ const _ImportDialog = class _ImportDialog2 {
   closeAllSelects(except) {
     if (!this.modalElement) return;
     const customSelects = this.modalElement.querySelectorAll(
-      ".import-dialog-vanilla-custom-select"
+      ".sl-import-dialog-vanilla-custom-select"
     );
     customSelects.forEach((customSelect) => {
       if (except && customSelect === except) return;
       const trigger = customSelect.querySelector(
-        ".import-dialog-vanilla-select-trigger"
+        ".sl-import-dialog-vanilla-select-trigger"
       );
       const dropdown = customSelect.querySelector(
-        ".import-dialog-vanilla-select-dropdown"
+        ".sl-import-dialog-vanilla-select-dropdown"
       );
       trigger == null ? void 0 : trigger.classList.remove("active");
       dropdown == null ? void 0 : dropdown.classList.remove("show");