@ruixinkeji/prism-ui 1.0.16 → 1.0.17

package/dist/styles/overlay.scss

@@ -1,182 +0,0 @@
-/**
- * Prism UI - 弹出层组件样式
- * 底部弹出选择器等
- */
-
-/* ============================================================
-   底部弹出选择器
-   ============================================================ */
-
-.prism-bottom-sheet {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  display: flex;
-  align-items: flex-end;
-
-  .sheet-content {
-    width: 100%;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-radius: 24rpx 24rpx 0 0;
-    padding-bottom: env(safe-area-inset-bottom);
-
-    .dark-mode & {
-      background: var(--prism-bg-color-card, #242424);
-    }
-  }
-
-  .sheet-title {
-    text-align: center;
-    font-size: 32rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    padding: 32rpx;
-    border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-      border-bottom-color: var(--prism-border-color-light, #2D2D2D);
-    }
-  }
-
-  .sheet-options {
-    padding: 16rpx 0;
-  }
-
-  .sheet-option {
-    display: flex;
-    align-items: center;
-    padding: 28rpx 32rpx;
-    transition: background 0.2s ease;
-
-    &:active {
-      background: var(--prism-bg-color, #F7F8FA);
-
-      .dark-mode & {
-        background: var(--prism-bg-color, #1A1A1A);
-      }
-    }
-
-    &.active {
-      .option-icon,
-      .option-text {
-        color: var(--prism-primary-color, #3478F6);
-      }
-
-      .option-text {
-        font-weight: 500;
-      }
-    }
-  }
-
-  .option-icon {
-    font-size: 36rpx;
-    margin-right: 20rpx;
-    color: var(--prism-text-secondary, #86909C);
-    width: 48rpx;
-    text-align: center;
-
-    &.icon-container {
-      width: 64rpx;
-      height: 64rpx;
-      border-radius: 12rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .fa-solid, .fa {
-        font-size: 28rpx;
-      }
-    }
-  }
-
-  .option-text {
-    flex: 1;
-    font-size: 30rpx;
-    color: var(--prism-text-primary, #1D2129);
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-
-  .option-check {
-    font-size: 32rpx;
-    color: var(--prism-primary-color, #3478F6);
-  }
-
-  .option-arrow {
-    font-size: 28rpx;
-    color: var(--prism-text-placeholder, #C9CDD4);
-  }
-
-  .sheet-cancel {
-    text-align: center;
-    font-size: 32rpx;
-    color: var(--prism-text-secondary, #86909C);
-    padding: 28rpx;
-    border-top: 16rpx solid var(--prism-bg-color, #F7F8FA);
-    cursor: pointer;
-    flex-shrink: 0;
-
-    &:active {
-      opacity: 0.7;
-      background: var(--prism-bg-color, #F7F8FA);
-    }
-
-    .dark-mode & {
-      border-top-color: var(--prism-bg-color, #1A1A1A);
-    }
-  }
-
-  .sheet-actions {
-    display: flex;
-    gap: 24rpx;
-    padding: 24rpx 32rpx;
-    border-top: 1rpx solid var(--prism-border-color-light, #F2F3F5);
-    flex-shrink: 0;
-    background: var(--prism-bg-color-card, #FFFFFF);
-  }
-
-  .sheet-btn {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12rpx;
-    padding: 24rpx;
-    border-radius: 12rpx;
-    font-size: 28rpx;
-    font-weight: 500;
-    transition: all 0.2s ease;
-
-    &:active {
-      opacity: 0.8;
-      transform: scale(0.98);
-    }
-
-    &.add {
-      background: rgba(52, 120, 246, 0.1);
-      color: var(--prism-primary-color, #3478F6);
-    }
-
-    &.cancel {
-      background: var(--prism-bg-color, #F7F8FA);
-      color: var(--prism-text-secondary, #86909C);
-    }
-
-    &.confirm {
-      background: var(--prism-primary-color, #3478F6);
-      color: #FFFFFF;
-    }
-
-    &.delete {
-      background: rgba(245, 63, 63, 0.1);
-      color: #F53F3F;
-    }
-  }
-}

package/dist/styles/utilities.scss

@@ -1,134 +0,0 @@
-/**
- * Prism UI - 工具类样式
- * 语义化组件类（保留 prism- 前缀）
- */
-
-/* ============================================================
-   布局组件
-   ============================================================ */
-
-.prism-container {
-  padding: 30rpx 30rpx 40rpx;
-}
-
-// 底部占位（用于 TabBar 页面）
-.prism-bottom-placeholder {
-  height: calc(120rpx + env(safe-area-inset-bottom));
-}
-
-/* ============================================================
-   文字颜色（语义化）
-   ============================================================ */
-
-.prism-text-primary { color: var(--prism-text-primary); }
-.prism-text-regular { color: var(--prism-text-regular); }
-.prism-text-secondary { color: var(--prism-text-secondary); }
-.prism-text-placeholder { color: var(--prism-text-placeholder); }
-.prism-text-white { color: #FFFFFF; }
-.prism-text-success { color: var(--prism-success-color); }
-.prism-text-warning { color: var(--prism-warning-color); }
-.prism-text-danger { color: var(--prism-danger-color); }
-
-/* ============================================================
-   安全区域
-   ============================================================ */
-
-.prism-safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
-.prism-safe-area-top { padding-top: env(safe-area-inset-top); }
-
-/* ============================================================
-   链接文字
-   ============================================================ */
-
-.prism-link {
-  color: var(--prism-primary-color);
-  font-weight: 500;
-}
-
-/* ============================================================
-   快捷功能网格
-   ============================================================ */
-
-.prism-quick-actions {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16rpx;
-  padding: 24rpx 16rpx;
-
-  .quick-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-
-    &:active {
-      opacity: 0.8;
-    }
-
-    .prism-badge {
-      top: 0;
-      right: 16rpx;
-    }
-
-    .prism-number-badge {
-      top: -4rpx;
-      right: 16rpx;
-    }
-  }
-
-  .quick-icon {
-    width: 80rpx;
-    height: 80rpx;
-    border-radius: 20rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 12rpx;
-
-    .fa, .fa-solid {
-      font-size: 32rpx;
-    }
-
-    // 当使用 prism-icon 时，覆盖尺寸
-    &.prism-icon {
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 20rpx;
-
-      .fa, .fa-solid, .iconfont {
-        font-size: 32rpx;
-      }
-    }
-  }
-
-  .quick-text {
-    font-size: 22rpx;
-    color: var(--prism-text-primary, #1D2129);
-  }
-
-  .dark-mode & {
-    .quick-item .quick-text {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-}
-
-/* ============================================================
-   代码展示
-   ============================================================ */
-
-/* 代码提示标签 - 用于行内展示类名、代码片段等 */
-.prism-code-hint {
-  display: inline-block;
-  font-size: 22rpx;
-  color: var(--prism-text-placeholder, #C9CDD4);
-  background: var(--prism-bg-color, #F7F8FA);
-  padding: 4rpx 12rpx;
-  border-radius: 6rpx;
-  font-family: 'Courier New', Consolas, Monaco, monospace;
-
-  .dark-mode & {
-    background: rgba(255, 255, 255, 0.06);
-    color: var(--prism-text-secondary, #A9AEB8);
-  }
-}

package/dist/styles/variables.scss

@@ -1,154 +0,0 @@
-/**
- * Prism UI - SCSS 变量定义
- * 此文件包含所有设计令牌和变量
- * 所有变量使用 $prism- 前缀，避免与用户项目冲突
- */
-
-/* ============================================================
-   一、浅色模式变量
-   ============================================================ */
-
-/* -------------------- 主题色 -------------------- */
-$prism-primary-color: #3478F6;      // 主题色
-$prism-primary-light: #EBF2FF;      // 主题浅色
-
-/* -------------------- 状态色 -------------------- */
-$prism-success-color: #00B42A;      // 成功色
-$prism-warning-color: #FF7D00;      // 警告色
-$prism-danger-color: #F53F3F;       // 危险色
-$prism-info-color: #86909C;         // 信息色
-
-/* -------------------- 文字颜色 -------------------- */
-$prism-text-primary: #1D2129;       // 主要文字
-$prism-text-regular: #4E5969;       // 常规文字
-$prism-text-secondary: #86909C;     // 次要文字
-$prism-text-placeholder: #C9CDD4;   // 占位符
-$prism-icon-color: #C9CDD4;         // 图标颜色
-
-/* -------------------- 边框颜色 -------------------- */
-$prism-border-color-base: #E5E6EB;         // 基础边框
-$prism-border-color-light: #F2F3F5;        // 浅色边框
-$prism-border-color-lighter: #F7F8FA;      // 更浅边框
-$prism-border-color-extra-light: #F7F8FA;  // 极浅边框
-
-/* -------------------- 背景颜色 -------------------- */
-$prism-bg-color-base: #F7F8FA;          // 页面背景
-$prism-bg-color: #F2F2F2;               // 内容背景
-$prism-bg-color-card: #FFFFFF;          // 卡片背景
-$prism-bg-color-input: #EBEEF2;         // 输入框背景
-
-/* ============================================================
-   二、深色模式变量
-   ============================================================ */
-
-/* -------------------- 主题色（深色） -------------------- */
-$prism-primary-color-dark: #3478F6;      // 深色模式主题色
-$prism-primary-light-dark: #1E3A5F;      // 深色模式主题浅色
-
-/* -------------------- 状态色（深色） -------------------- */
-$prism-success-color-dark: #00994D;      // 深色模式成功色
-$prism-warning-color-dark: #E06600;      // 深色模式警告色
-$prism-danger-color-dark: #D93636;       // 深色模式危险色
-$prism-info-color-dark: #6B7785;         // 深色模式信息色
-
-/* -------------------- 文字颜色（深色） -------------------- */
-$prism-text-primary-dark: #E5E6EB;       // 深色模式主要文字
-$prism-text-regular-dark: #C9CDD4;       // 深色模式常规文字
-$prism-text-secondary-dark: #86909C;     // 深色模式次要文字
-$prism-text-placeholder-dark: #6B7785;   // 深色模式占位符（更亮）
-$prism-icon-color-dark: #C9D1E0;         // 深色模式图标颜色
-
-/* -------------------- 边框颜色（深色） -------------------- */
-$prism-border-color-base-dark: #3D3D3D;  // 深色模式基础边框
-$prism-border-color-light-dark: #2D2D2D; // 深色模式浅色边框
-
-/* -------------------- 背景颜色（深色） -------------------- */
-$prism-bg-color-dark: #1A1A1A;           // 深色模式背景
-$prism-bg-color-page-dark: #121212;      // 深色模式页面背景
-$prism-bg-color-card-dark: #242424;      // 深色模式卡片背景
-$prism-bg-color-input-dark: #2A2A2A;     // 深色模式输入框背景
-
-/* ============================================================
-   三、主题色透明度
-   ============================================================ */
-$prism-primary-alpha-05: rgba(52, 120, 246, 0.05);
-$prism-primary-alpha-08: rgba(52, 120, 246, 0.08);
-$prism-primary-alpha-10: rgba(52, 120, 246, 0.1);
-$prism-primary-alpha-12: rgba(52, 120, 246, 0.12);
-$prism-primary-alpha-15: rgba(52, 120, 246, 0.15);
-$prism-primary-alpha-20: rgba(52, 120, 246, 0.2);
-$prism-primary-alpha-25: rgba(52, 120, 246, 0.25);
-$prism-primary-alpha-30: rgba(52, 120, 246, 0.3);
-$prism-primary-alpha-35: rgba(52, 120, 246, 0.35);
-$prism-primary-alpha-40: rgba(52, 120, 246, 0.4);
-$prism-primary-alpha-50: rgba(52, 120, 246, 0.5);
-
-/* ============================================================
-   四、状态色透明度
-   ============================================================ */
-// 成功色
-$prism-success-alpha-10: rgba(0, 180, 42, 0.1);
-$prism-success-alpha-12: rgba(0, 180, 42, 0.12);
-$prism-success-alpha-15: rgba(0, 180, 42, 0.15);
-
-// 警告色
-$prism-warning-alpha-10: rgba(255, 125, 0, 0.1);
-$prism-warning-alpha-15: rgba(255, 125, 0, 0.15);
-$prism-warning-alpha-25: rgba(255, 125, 0, 0.25);
-
-// 危险色
-$prism-danger-alpha-10: rgba(245, 63, 63, 0.1);
-$prism-danger-alpha-15: rgba(245, 63, 63, 0.15);
-
-// 紫色
-$prism-purple-color: #722ED1;
-$prism-purple-alpha-10: rgba(114, 46, 209, 0.1);
-$prism-purple-alpha-15: rgba(114, 46, 209, 0.15);
-
-/* ============================================================
-   五、白色透明度
-   ============================================================ */
-$prism-white-alpha-10: rgba(255, 255, 255, 0.1);
-$prism-white-alpha-15: rgba(255, 255, 255, 0.15);
-$prism-white-alpha-20: rgba(255, 255, 255, 0.2);
-$prism-white-alpha-25: rgba(255, 255, 255, 0.25);
-
-/* ============================================================
-   六、常用渐变色
-   ============================================================ */
-$prism-gradient-primary: linear-gradient(135deg, #3478F6 0%, #5da3f5 100%);
-$prism-gradient-primary-dark: linear-gradient(135deg, #1A2744 0%, #1E3A5F 60%, #2D4A6F 100%);
-$prism-gradient-header: linear-gradient(180deg, #2563EB 0%, #3478F6 60%, #5da3f5 100%);
-$prism-gradient-header-dark: linear-gradient(180deg, #1A2744 0%, #1E3A5F 60%, #2D4A6F 100%);
-$prism-gradient-page-top: linear-gradient(180deg, rgba(230, 242, 255, 0.75) 0%, rgba(255, 255, 255, 0.85) 100%);
-
-/* ============================================================
-   七、第三方品牌色
-   ============================================================ */
-$prism-wechat-color: #07C160;
-$prism-wechat-bg: #E9F7EF;
-$prism-wechat-alpha-15: rgba(7, 193, 96, 0.15);
-
-$prism-alipay-color: #1677FF;
-$prism-alipay-bg: #E8F4FF;
-$prism-alipay-alpha-15: rgba(22, 119, 255, 0.15);
-
-/* ============================================================
-   八、常用阴影
-   ============================================================ */
-$prism-shadow-primary: 0 8rpx 20rpx rgba(74, 144, 226, 0.35);
-$prism-shadow-primary-dark: 0 8rpx 24rpx rgba(74, 144, 226, 0.2);
-$prism-shadow-card: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
-$prism-shadow-card-dark: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
-
-/* ============================================================
-   九、统一间距
-   ============================================================ */
-// 页面边距（卡片与屏幕边缘的距离，符合 iOS/Material Design 标准）
-$prism-page-spacing: 32rpx;
-
-// 卡片/区块间距（卡片之间的距离）
-$prism-section-spacing: 32rpx;
-
-// 卡片内边距
-$prism-card-padding: 32rpx;