@ruixinkeji/prism-ui 1.0.0

package/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/styles/variables.scss

@@ -0,0 +1,138 @@
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ *
+ * 主题切换：修改下面的引入文件即可切换主题
+ * 可选主题：blue(默认) / green / purple / orange / red / cyan
+ */
+
+// 引入主题文件（切换主题只需修改这一行）
+@import '../theme/blue.scss';
+
+/* ============================================================
+   一、浅色模式变量（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+
+/* -------------------- 主题色 -------------------- */
+$prism-primary-color: #3478F6 !default;
+$prism-primary-light: #EBF2FF !default;
+
+/* -------------------- 状态色 -------------------- */
+$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-btn-text-color: #FFFFFF;           // 按钮文字（主题色背景上）
+
+/* -------------------- 边框颜色 -------------------- */
+$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 !default;
+$prism-primary-light-dark: #1E3A5F !default;
+
+/* -------------------- 状态色（深色） -------------------- */
+$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-btn-text-color-dark: #FFFFFF;           // 深色模式按钮文字
+
+/* -------------------- 边框颜色（深色） -------------------- */
+$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;     // 深色模式输入框背景
+
+/* ============================================================
+   三、主题色透明度（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+$prism-primary-alpha-05: rgba(52, 120, 246, 0.05) !default;
+$prism-primary-alpha-08: rgba(52, 120, 246, 0.08) !default;
+$prism-primary-alpha-10: rgba(52, 120, 246, 0.1) !default;
+$prism-primary-alpha-12: rgba(52, 120, 246, 0.12) !default;
+$prism-primary-alpha-15: rgba(52, 120, 246, 0.15) !default;
+$prism-primary-alpha-20: rgba(52, 120, 246, 0.2) !default;
+$prism-primary-alpha-25: rgba(52, 120, 246, 0.25) !default;
+$prism-primary-alpha-30: rgba(52, 120, 246, 0.3) !default;
+$prism-primary-alpha-35: rgba(52, 120, 246, 0.35) !default;
+$prism-primary-alpha-40: rgba(52, 120, 246, 0.4) !default;
+$prism-primary-alpha-50: rgba(52, 120, 246, 0.5) !default;
+
+/* ============================================================
+   主题色渐变（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+$prism-primary-gradient: linear-gradient(135deg, #3478F6 0%, #86B8FA 100%) !default;
+$prism-primary-gradient-alpha: linear-gradient(135deg, rgba(52, 120, 246, 0.08) 0%, rgba(134, 184, 250, 0.08) 100%) !default;
+$prism-primary-gradient-shadow: 0 8rpx 24rpx rgba(52, 120, 246, 0.3) !default;
+
+/* ============================================================
+   四、白色透明度
+   ============================================================ */
+$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-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);
+
+/* ============================================================
+   八、常用阴影（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+$prism-shadow-primary: 0 8rpx 20rpx rgba($prism-primary-color, 0.35) !default;
+$prism-shadow-primary-dark: 0 8rpx 24rpx rgba($prism-primary-color-dark, 0.2) !default;
+$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/theme/blue.scss

@@ -0,0 +1,36 @@
+/**
+ * Prism UI - 蓝色主题（默认）
+ *
+ * 使用方式：在 variables.scss 中修改引入
+ * @import '../theme/blue.scss';
+ *
+ * 颜色值来自 colors.scss 中的 $prism-blue-* 变量
+ */
+
+// ==================== 主题色 ====================
+$prism-primary-color: #3478F6;
+$prism-primary-light: #EBF2FF;
+$prism-primary-color-dark: #60A5FA;
+$prism-primary-light-dark: #1E3A5F;
+
+// ==================== 主题色透明度 ====================
+$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-primary-gradient: linear-gradient(135deg, #3478F6 0%, #86B8FA 100%);
+$prism-primary-gradient-alpha: linear-gradient(135deg, rgba(52, 120, 246, 0.08) 0%, rgba(134, 184, 250, 0.08) 100%);
+$prism-primary-gradient-shadow: 0 8rpx 24rpx rgba(52, 120, 246, 0.3);
+
+// ==================== 页面渐变 ====================
+$prism-gradient-header: linear-gradient(180deg, #2563EB 0%, #3478F6 60%, #86B8FA 100%);
+$prism-gradient-header-dark: linear-gradient(180deg, #1A2744 0%, #1E3A5F 60%, #2D4A6F 100%);

package/theme/cyan.scss

@@ -0,0 +1,32 @@
+/**
+ * Prism UI - 青色主题
+ * 颜色值来自 colors.scss 中的 $prism-cyan-* 变量
+ */
+
+// 主题色
+$prism-primary-color: #14C9C9;
+$prism-primary-light: #E8FAFA;
+$prism-primary-color-dark: #22D3EE;
+$prism-primary-light-dark: #1A3D3D;
+
+// 主题色透明度
+$prism-primary-alpha-05: rgba(20, 201, 201, 0.05);
+$prism-primary-alpha-08: rgba(20, 201, 201, 0.08);
+$prism-primary-alpha-10: rgba(20, 201, 201, 0.1);
+$prism-primary-alpha-12: rgba(20, 201, 201, 0.12);
+$prism-primary-alpha-15: rgba(20, 201, 201, 0.15);
+$prism-primary-alpha-20: rgba(20, 201, 201, 0.2);
+$prism-primary-alpha-25: rgba(20, 201, 201, 0.25);
+$prism-primary-alpha-30: rgba(20, 201, 201, 0.3);
+$prism-primary-alpha-35: rgba(20, 201, 201, 0.35);
+$prism-primary-alpha-40: rgba(20, 201, 201, 0.4);
+$prism-primary-alpha-50: rgba(20, 201, 201, 0.5);
+
+// 渐变色
+$prism-primary-gradient: linear-gradient(135deg, #14C9C9 0%, #67E8F9 100%);
+$prism-primary-gradient-alpha: linear-gradient(135deg, rgba(20, 201, 201, 0.08) 0%, rgba(103, 232, 249, 0.08) 100%);
+$prism-primary-gradient-shadow: 0 8rpx 24rpx rgba(20, 201, 201, 0.3);
+
+// 页面渐变
+$prism-gradient-header: linear-gradient(180deg, #08979C 0%, #14C9C9 60%, #67E8F9 100%);
+$prism-gradient-header-dark: linear-gradient(180deg, #1A3D3D 0%, #2A4D4D 60%, #3A5D5D 100%);

package/theme/green.scss

@@ -0,0 +1,32 @@
+/**
+ * Prism UI - 绿色主题
+ * 颜色值来自 colors.scss 中的 $prism-green-* 变量
+ */
+
+// 主题色
+$prism-primary-color: #00B42A;
+$prism-primary-light: #E8F7E8;
+$prism-primary-color-dark: #34D399;
+$prism-primary-light-dark: #1A3D2A;
+
+// 主题色透明度
+$prism-primary-alpha-05: rgba(0, 180, 42, 0.05);
+$prism-primary-alpha-08: rgba(0, 180, 42, 0.08);
+$prism-primary-alpha-10: rgba(0, 180, 42, 0.1);
+$prism-primary-alpha-12: rgba(0, 180, 42, 0.12);
+$prism-primary-alpha-15: rgba(0, 180, 42, 0.15);
+$prism-primary-alpha-20: rgba(0, 180, 42, 0.2);
+$prism-primary-alpha-25: rgba(0, 180, 42, 0.25);
+$prism-primary-alpha-30: rgba(0, 180, 42, 0.3);
+$prism-primary-alpha-35: rgba(0, 180, 42, 0.35);
+$prism-primary-alpha-40: rgba(0, 180, 42, 0.4);
+$prism-primary-alpha-50: rgba(0, 180, 42, 0.5);
+
+// 渐变色
+$prism-primary-gradient: linear-gradient(135deg, #00B42A 0%, #6EE7B7 100%);
+$prism-primary-gradient-alpha: linear-gradient(135deg, rgba(0, 180, 42, 0.08) 0%, rgba(110, 231, 183, 0.08) 100%);
+$prism-primary-gradient-shadow: 0 8rpx 24rpx rgba(0, 180, 42, 0.3);
+
+// 页面渐变
+$prism-gradient-header: linear-gradient(180deg, #009A23 0%, #00B42A 60%, #6EE7B7 100%);
+$prism-gradient-header-dark: linear-gradient(180deg, #1A3D2A 0%, #1E4D32 60%, #2D5D42 100%);

package/theme/orange.scss

@@ -0,0 +1,32 @@
+/**
+ * Prism UI - 橙色主题
+ * 颜色值来自 colors.scss 中的 $prism-orange-* 变量
+ */
+
+// 主题色
+$prism-primary-color: #FF7D00;
+$prism-primary-light: #FFF3E8;
+$prism-primary-color-dark: #FB923C;
+$prism-primary-light-dark: #3D2A1A;
+
+// 主题色透明度
+$prism-primary-alpha-05: rgba(255, 125, 0, 0.05);
+$prism-primary-alpha-08: rgba(255, 125, 0, 0.08);
+$prism-primary-alpha-10: rgba(255, 125, 0, 0.1);
+$prism-primary-alpha-12: rgba(255, 125, 0, 0.12);
+$prism-primary-alpha-15: rgba(255, 125, 0, 0.15);
+$prism-primary-alpha-20: rgba(255, 125, 0, 0.2);
+$prism-primary-alpha-25: rgba(255, 125, 0, 0.25);
+$prism-primary-alpha-30: rgba(255, 125, 0, 0.3);
+$prism-primary-alpha-35: rgba(255, 125, 0, 0.35);
+$prism-primary-alpha-40: rgba(255, 125, 0, 0.4);
+$prism-primary-alpha-50: rgba(255, 125, 0, 0.5);
+
+// 渐变色
+$prism-primary-gradient: linear-gradient(135deg, #FF7D00 0%, #FDBA74 100%);
+$prism-primary-gradient-alpha: linear-gradient(135deg, rgba(255, 125, 0, 0.08) 0%, rgba(253, 186, 116, 0.08) 100%);
+$prism-primary-gradient-shadow: 0 8rpx 24rpx rgba(255, 125, 0, 0.3);
+
+// 页面渐变
+$prism-gradient-header: linear-gradient(180deg, #D46B08 0%, #FF7D00 60%, #FDBA74 100%);
+$prism-gradient-header-dark: linear-gradient(180deg, #3D2A1A 0%, #4D3A2A 60%, #5D4A3A 100%);

package/theme/purple.scss

@@ -0,0 +1,32 @@
+/**
+ * Prism UI - 紫色主题
+ * 颜色值来自 colors.scss 中的 $prism-purple-* 变量
+ */
+
+// 主题色
+$prism-primary-color: #722ED1;
+$prism-primary-light: #F3E8FF;
+$prism-primary-color-dark: #A855F7;
+$prism-primary-light-dark: #2D1B4E;
+
+// 主题色透明度
+$prism-primary-alpha-05: rgba(114, 46, 209, 0.05);
+$prism-primary-alpha-08: rgba(114, 46, 209, 0.08);
+$prism-primary-alpha-10: rgba(114, 46, 209, 0.1);
+$prism-primary-alpha-12: rgba(114, 46, 209, 0.12);
+$prism-primary-alpha-15: rgba(114, 46, 209, 0.15);
+$prism-primary-alpha-20: rgba(114, 46, 209, 0.2);
+$prism-primary-alpha-25: rgba(114, 46, 209, 0.25);
+$prism-primary-alpha-30: rgba(114, 46, 209, 0.3);
+$prism-primary-alpha-35: rgba(114, 46, 209, 0.35);
+$prism-primary-alpha-40: rgba(114, 46, 209, 0.4);
+$prism-primary-alpha-50: rgba(114, 46, 209, 0.5);
+
+// 渐变色
+$prism-primary-gradient: linear-gradient(135deg, #722ED1 0%, #B37FEB 100%);
+$prism-primary-gradient-alpha: linear-gradient(135deg, rgba(114, 46, 209, 0.08) 0%, rgba(179, 127, 235, 0.08) 100%);
+$prism-primary-gradient-shadow: 0 8rpx 24rpx rgba(114, 46, 209, 0.3);
+
+// 页面渐变
+$prism-gradient-header: linear-gradient(180deg, #5B21B6 0%, #722ED1 60%, #B37FEB 100%);
+$prism-gradient-header-dark: linear-gradient(180deg, #1E1033 0%, #2D1B4E 60%, #3D2A5F 100%);

package/theme/red.scss

@@ -0,0 +1,32 @@
+/**
+ * Prism UI - 红色主题
+ * 颜色值来自 colors.scss 中的 $prism-red-* 变量
+ */
+
+// 主题色
+$prism-primary-color: #F53F3F;
+$prism-primary-light: #FFECE8;
+$prism-primary-color-dark: #F87171;
+$prism-primary-light-dark: #3D1A1A;
+
+// 主题色透明度
+$prism-primary-alpha-05: rgba(245, 63, 63, 0.05);
+$prism-primary-alpha-08: rgba(245, 63, 63, 0.08);
+$prism-primary-alpha-10: rgba(245, 63, 63, 0.1);
+$prism-primary-alpha-12: rgba(245, 63, 63, 0.12);
+$prism-primary-alpha-15: rgba(245, 63, 63, 0.15);
+$prism-primary-alpha-20: rgba(245, 63, 63, 0.2);
+$prism-primary-alpha-25: rgba(245, 63, 63, 0.25);
+$prism-primary-alpha-30: rgba(245, 63, 63, 0.3);
+$prism-primary-alpha-35: rgba(245, 63, 63, 0.35);
+$prism-primary-alpha-40: rgba(245, 63, 63, 0.4);
+$prism-primary-alpha-50: rgba(245, 63, 63, 0.5);
+
+// 渐变色
+$prism-primary-gradient: linear-gradient(135deg, #F53F3F 0%, #FCA5A5 100%);
+$prism-primary-gradient-alpha: linear-gradient(135deg, rgba(245, 63, 63, 0.08) 0%, rgba(252, 165, 165, 0.08) 100%);
+$prism-primary-gradient-shadow: 0 8rpx 24rpx rgba(245, 63, 63, 0.3);
+
+// 页面渐变
+$prism-gradient-header: linear-gradient(180deg, #CB2B2B 0%, #F53F3F 60%, #FCA5A5 100%);
+$prism-gradient-header-dark: linear-gradient(180deg, #3D1A1A 0%, #4D2A2A 60%, #5D3A3A 100%);