@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/styles/overlay.scss

@@ -0,0 +1,182 @@
+/**
+ * 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

@@ -0,0 +1,134 @@
+/**
+ * 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

@@ -0,0 +1,154 @@
+/**
+ * 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;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@ruixinkeji/prism-ui",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Prism UI - 现代化玻璃态设计 uni-app 组件库",
   "main": "index.js",
   "module": "index.esm.js",
   "types": "index.d.ts",
   "files": [
+    "dist",
     "styles",
     "theme",
     "components",
@@ -52,15 +53,11 @@
   },
   "peerDependencies": {
     "pinia": "^2.0.0",
-    "sass": "^1.0.0",
     "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "pinia": {
       "optional": true
-    },
-    "sass": {
-      "optional": false
     }
   },
   "devDependencies": {

package/styles/base.scss

@@ -2,7 +2,6 @@
  * Prism UI - 基础样式
  * CSS 变量定义和全局样式重置
  */
-@use './variables' as *;
 
 /* ============================================================
    一、CSS 变量定义 - 支持动态主题切换

package/styles/card.scss

@@ -3,7 +3,6 @@
  *
  * 基础样式 .prism-card-base 定义在 @/styles/colors.scss
  */
-@use './variables' as *;
 
 /* ============================================================
    prism-card - 卡片容器（带背景）

package/styles/colors.scss

@@ -2,7 +2,6 @@
  * Prism UI 颜色主题系统
  * 使用 SCSS 变量定义，自动注入到所有组件
  */
-@use './variables' as *;
 /**
  *
  * 📦 包含内容：

package/styles/effects.scss

@@ -2,7 +2,6 @@
  * Prism UI - 特效组件样式
  * 悬浮按钮、霓虹灯效果、动画等
  */
-@use './variables' as *;
 
 /* ============================================================
    悬浮按钮

package/styles/form.scss

@@ -2,7 +2,6 @@
  * Prism UI - 表单组件样式
  * 输入框、复选框、选项卡等
  */
-@use './variables' as *;
 
 /* ============================================================
    输入框容器

package/styles/index.scss

@@ -7,40 +7,40 @@
  */
 
 // SCSS 变量（必须最先引入，供其他文件使用）
-@use './variables' as *;
+@import './variables';
 
 // 基础样式和 CSS 变量
-@use './base';
+@import './base';
 
 // 图标颜色主题
-@use './colors';
+@import './colors.scss';
 
 // 按钮组件
-@use './button';
+@import './button';
 
 // 表单组件
-@use './form';
+@import './form';
 
 // 卡片和容器组件
-@use './card';
+@import './card';
 
 // 列表组件
-@use './list';
+@import './list';
 
 // 弹出层组件
-@use './overlay';
+@import './overlay';
 
 // 数据展示组件
-@use './data';
+@import './data';
 
 // 反馈组件
-@use './feedback';
+@import './feedback';
 
 // 导航组件
-@use './navigation';
+@import './navigation';
 
 // 特效组件
-@use './effects';
+@import './effects';
 
 // 工具类
-@use './utilities';
+@import './utilities';

package/styles/navigation.scss

@@ -2,7 +2,6 @@
  * Prism UI - 导航组件样式
  * Steps 步骤条、Breadcrumb 面包屑、DropdownMenu 下拉菜单
  */
-@use './variables' as *;
 
 /* ============================================================
    Steps 步骤条

package/styles/variables.scss

@@ -8,7 +8,7 @@
  */
 
 // 引入主题文件（切换主题只需修改这一行）
-@use '../theme/blue.scss' as *;
+@import '../theme/blue.scss';
 
 /* ============================================================
    一、浅色模式变量（使用 !default，允许主题文件覆盖）