@ruixinkeji/prism-ui 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ruixinkeji/prism-ui",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Prism UI - 现代化玻璃态设计 uni-app 组件库",
   "main": "index.js",
   "module": "index.esm.js",
@@ -8,8 +8,6 @@
   "files": [
     "dist/prism-ui.css",
     "dist/prism-ui.min.css",
-    "styles",
-    "theme",
     "components",
     "fonts",
     "store",

package/styles/base.scss

@@ -1,227 +0,0 @@
-/**
- * Prism UI - 基础样式
- * CSS 变量定义和全局样式重置
- */
-
-/* ============================================================
-   一、CSS 变量定义 - 支持动态主题切换
-   ============================================================ */
-
-/* -------------------- 浅色模式（默认） -------------------- */
-:root, page {
-  // 主题色
-  --prism-primary-color: #{$prism-primary-color};  // 主要按钮、链接、选中状态
-  --prism-primary-light: #{$prism-primary-light};  // 主题色浅色背景、hover 状态
-  --prism-primary-alpha-15: #{$prism-primary-alpha-15};  // 主题色 15% 透明度
-  --prism-primary-alpha-25: #{$prism-primary-alpha-25};  // 主题色 25% 透明度
-  --prism-primary-alpha-35: #{$prism-primary-alpha-35};  // 主题色 35% 透明度
-  --prism-primary-gradient: #{$prism-primary-gradient};  // 主题色渐变
-  --prism-primary-gradient-alpha: #{$prism-primary-gradient-alpha};  // 主题色半透明渐变
-  --prism-primary-gradient-shadow: #{$prism-primary-gradient-shadow};  // 主题色渐变阴影
-  --prism-btn-text-color: #{$prism-btn-text-color};  // 按钮文字颜色
-
-  // 状态色
-  --prism-success-color: #{$prism-success-color};  // 成功提示、完成状态
-  --prism-warning-color: #{$prism-warning-color};  // 警告提示、待处理状态
-  --prism-danger-color: #{$prism-danger-color};    // 错误提示、删除操作
-  --prism-info-color: #{$prism-info-color};        // 信息提示、辅助说明
-
-  // 文字颜色
-  --prism-text-primary: #{$prism-text-primary};      // 标题、重要信息
-  --prism-text-regular: #{$prism-text-regular};      // 正文内容
-  --prism-text-secondary: #{$prism-text-secondary};  // 描述、辅助信息
-  --prism-text-placeholder: #{$prism-text-placeholder};  // 输入框占位符
-  --prism-text-code: #{$prism-primary-color};        // 代码文字，浅色模式用主题色
-  --prism-icon-color: #{$prism-icon-color};          // 图标默认颜色
-
-  // 边框颜色
-  --prism-border-color-base: #{$prism-border-color-base};  // 输入框、卡片边框
-  --prism-border-color-light: #{$prism-border-color-light};  // 分割线、列表边框
-
-  // 背景颜色
-  --prism-bg-color: #{$prism-bg-color};      // 内容区域背景
-  --prism-bg-color-page: #{$prism-bg-color-base}; // 页面最底层背景
-  --prism-bg-color-card: #{$prism-bg-color-card};  // 卡片、弹窗、菜单背景
-  --prism-bg-color-icon-btn: rgba(59, 130, 246, 0.12);  // 图标按钮背景
-
-  // 阴影
-  --prism-shadow-color: rgba(0, 0, 0, 0.08);  // 卡片、弹窗阴影
-
-  // 输入框
-  --prism-input-bg: #{$prism-bg-color-input};          // 输入框背景
-  --prism-input-text: #{$prism-text-primary};          // 输入框文字
-  --prism-input-placeholder: #{$prism-text-placeholder};  // 输入框占位符
-  --prism-input-border: #{$prism-border-color-base};   // 输入框边框
-}
-
-/* -------------------- 深色模式 -------------------- */
-.dark-mode {
-  // 主题色
-  --prism-primary-color: #{$prism-primary-color-dark};
-  --prism-primary-light: #{$prism-primary-light-dark};
-  --prism-primary-alpha-15: #{$prism-primary-alpha-15};
-  --prism-primary-alpha-25: #{$prism-primary-alpha-25};
-  --prism-primary-alpha-35: #{$prism-primary-alpha-35};
-  --prism-primary-gradient: #{$prism-primary-gradient};
-  --prism-primary-gradient-alpha: #{$prism-primary-gradient-alpha};
-  --prism-primary-gradient-shadow: #{$prism-primary-gradient-shadow};
-  --prism-btn-text-color: #{$prism-btn-text-color-dark};  // 按钮文字颜色
-
-  // 状态色
-  --prism-success-color: #{$prism-success-color-dark};
-  --prism-warning-color: #{$prism-warning-color-dark};
-  --prism-danger-color: #{$prism-danger-color-dark};
-  --prism-info-color: #{$prism-info-color-dark};
-
-  // 文字颜色
-  --prism-text-primary: #{$prism-text-primary-dark};
-  --prism-text-regular: #{$prism-text-regular-dark};
-  --prism-text-secondary: #{$prism-text-secondary-dark};
-  --prism-text-placeholder: #{$prism-text-placeholder-dark};
-  --prism-text-code: #{$prism-text-regular-dark};  // 代码文字，深色模式用常规文字色
-  --prism-icon-color: #{$prism-icon-color-dark};
-
-  // 边框颜色
-  --prism-border-color-base: #{$prism-border-color-base-dark};
-  --prism-border-color-light: #{$prism-border-color-light-dark};
-
-  // 背景颜色（深色模式三层背景：page 最深 → bg 中间 → card 最亮）
-  --prism-bg-color: #{$prism-bg-color-dark};            // #1A1A1A 内容区域
-  --prism-bg-color-page: #{$prism-bg-color-page-dark};  // #121212 页面底层
-  --prism-bg-color-card: #{$prism-bg-color-card-dark};  // #242424 卡片
-  --prism-bg-color-icon-btn: #{$prism-primary-alpha-15};
-
-  // 阴影
-  --prism-shadow-color: rgba(0, 0, 0, 0.3);
-
-  // 输入框
-  --prism-input-bg: #{$prism-bg-color-input-dark};
-  --prism-input-text: #{$prism-text-primary-dark};
-  --prism-input-placeholder: #{$prism-text-placeholder-dark};
-  --prism-input-border: #{$prism-border-color-base-dark};
-}
-
-/* ============================================================
-   二、全局样式重置
-   ============================================================ */
-
-/* -------------------- 页面基础样式 -------------------- */
-page {
-  background-color: var(--prism-bg-color-page);
-  font-size: 28rpx;
-  color: var(--prism-text-primary);
-  line-height: 1.6;
-  width: 100%;
-  max-width: 100vw;
-  overflow-x: hidden;
-  overscroll-behavior: none;
-}
-
-/* #ifdef H5 */
-/* H5 环境下的容器背景色，防止页面切换闪白 */
-uni-app, uni-page, uni-page-wrapper, uni-page-body {
-  background-color: var(--prism-bg-color-page) !important;
-}
-
-/* 固定 tabbar 页面容器高度，防止切换时高度跳动 */
-uni-page-wrapper, uni-page-body {
-  min-height: 100vh !important;
-  height: 100vh !important;
-}
-/* #endif */
-
-/* -------------------- 页面容器 -------------------- */
-.prism-page {
-  width: 100%;
-  min-height: 100vh;
-  background: var(--prism-bg-color-page);
-  position: relative;
-}
-
-/* -------------------- 主内容区（scroll-view） -------------------- */
-.prism-main {
-  height: 100vh;
-  box-sizing: border-box;
-  background: var(--prism-bg-color-page);
-}
-
-/* -------------------- 元素盒模型重置 -------------------- */
-view, scroll-view, swiper, button, input, textarea, label, navigator {
-  box-sizing: border-box;
-}
-
-/* -------------------- Button 重置 -------------------- */
-button {
-  margin: 0 !important;
-  padding: 0;
-  background: none;
-  border: none;
-  line-height: inherit;
-  font-size: inherit;
-  color: inherit;
-  width: auto !important;
-  min-width: 0 !important;
-}
-
-button::after {
-  display: none !important;
-}
-
-/* -------------------- 表单元素样式 -------------------- */
-input, textarea {
-  color: var(--prism-text-primary) !important;
-  background-color: transparent !important;
-  caret-color: var(--prism-primary-color);
-}
-
-.input-placeholder,
-.uni-input-placeholder {
-  color: var(--prism-text-placeholder) !important;
-}
-
-/* #ifdef H5 */
-input::placeholder,
-textarea::placeholder {
-  color: var(--prism-text-placeholder) !important;
-}
-/* #endif */
-
-/* -------------------- 固定底部容器 -------------------- */
-.prism-fixed-bottom {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 24rpx 30rpx;
-  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
-  background: var(--prism-bg-color-card, #fff);
-  border-top: 1rpx solid var(--prism-border-color-light, #E5E6EB);
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
-  z-index: 100;
-
-  .dark-mode & {
-    background: var(--prism-bg-color-card, #242424);
-    border-top-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.3);
-  }
-}
-
-/* -------------------- 固定顶部容器 -------------------- */
-.prism-fixed-top {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  padding: 24rpx 30rpx;
-  padding-top: calc(24rpx + env(safe-area-inset-top));
-  background: var(--prism-bg-color-card, #fff);
-  border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-  z-index: 100;
-
-  .dark-mode & {
-    background: var(--prism-bg-color-card, #242424);
-    border-bottom-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
-  }
-}

package/styles/button.scss

@@ -1,120 +0,0 @@
-/**
- * Prism UI - 按钮组件样式
- * 支持多种颜色、风格和尺寸
- */
-
-/* ============================================================
-   按钮基础样式
-   ============================================================ */
-
-.prism-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: 16rpx;
-  font-weight: 600;
-  line-height: 1;
-  transition: all 0.3s ease;
-  gap: 8rpx;
-
-  &:active {
-    opacity: 0.9;
-    transform: scale(0.99);
-  }
-
-  &::after {
-    border: none;
-  }
-
-  /* -------------------- 尺寸修饰符 -------------------- */
-  &--lg {
-    height: 100rpx;
-    padding: 0 48rpx;
-    font-size: 34rpx;
-  }
-
-  &--md {
-    height: 88rpx;
-    padding: 0 40rpx;
-    font-size: 32rpx;
-  }
-
-  &--sm {
-    height: 72rpx;
-    padding: 0 32rpx;
-    font-size: 28rpx;
-  }
-
-  &--xs {
-    height: 56rpx;
-    padding: 0 24rpx;
-    font-size: 24rpx;
-    border-radius: 12rpx;
-  }
-
-  /* -------------------- 块级按钮 -------------------- */
-  &--block {
-    width: 100%;
-    display: flex;
-  }
-
-  /* -------------------- 圆角按钮 -------------------- */
-  &--round {
-    border-radius: 100rpx;
-  }
-
-}
-
-/* ============================================================
-   渐变按钮
-   ============================================================ */
-
-.prism-btn-gradient {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: 16rpx;
-  font-weight: 600;
-  line-height: 1;
-  transition: all 0.3s ease;
-  padding: 16rpx 32rpx;
-  color: #FFFFFF;
-
-  &:active {
-    opacity: 0.9;
-    transform: scale(0.99);
-  }
-
-  &--blue {
-    background: linear-gradient(135deg, #3478F6 0%, #5da3f5 100%);
-    box-shadow: 0 8rpx 24rpx rgba(52, 120, 246, 0.3);
-  }
-
-  &--green {
-    background: linear-gradient(135deg, #00B42A 0%, #52c41a 100%);
-    box-shadow: 0 8rpx 24rpx rgba(0, 180, 42, 0.3);
-  }
-
-  &--purple {
-    background: linear-gradient(135deg, #722ED1 0%, #9254DE 100%);
-    box-shadow: 0 8rpx 24rpx rgba(114, 46, 209, 0.3);
-  }
-
-  &--orange {
-    background: linear-gradient(135deg, #FF7D00 0%, #FFA940 100%);
-    box-shadow: 0 8rpx 24rpx rgba(255, 125, 0, 0.3);
-  }
-}
-
-/* ============================================================
-   禁用状态
-   ============================================================ */
-
-.prism-btn--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* 注意：.prism-icon-btn 已统一在 @/styles/colors.scss 中定义 */

package/styles/card.scss

@@ -1,306 +0,0 @@
-/**
- * Prism UI - 卡片和容器组件样式
- *
- * 基础样式 .prism-card-base 定义在 @/styles/colors.scss
- */
-
-/* ============================================================
-   prism-card - 卡片容器（带背景）
-
-   结构：
-   .prism-card
-     .card-title    - 卡片标题（带左侧色块）
-     .card-desc     - 卡片描述
-     内容
-   ============================================================ */
-
-.prism-card {
-  position: relative;
-  border-radius: 20rpx;
-  padding: 32rpx;
-  transition: all 0.2s ease;
-  background: var(--prism-bg-color-card, #FFFFFF);
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-
-  .dark-mode & {
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
-  }
-
-  // 卡片标题（带左侧色块）
-  .card-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    margin-bottom: $prism-section-spacing;
-    padding-left: 16rpx;
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 6rpx;
-      height: 32rpx;
-      background: var(--prism-primary-color, #3478F6);
-      border-radius: 3rpx;
-    }
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-
-  // 卡片描述
-  .card-desc {
-    display: block;
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-    line-height: 1.5;
-
-    .dark-mode & {
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-
-  // 子区块（复用 prism-section 的 subsection 结构）
-  .subsection {
-    margin-bottom: $prism-section-spacing;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .subsection-title {
-    font-size: 26rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-
-    .dark-mode & {
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-
-  .subsection-desc {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    padding: 16rpx 24rpx;
-    margin-bottom: 16rpx;
-    background: var(--prism-bg-color, #F7F8FA);
-    border-radius: 8rpx;
-    line-height: 1.5;
-
-    .dark-mode & {
-      background: rgba(255, 255, 255, 0.06);
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-}
-
-
-/* ============================================================
-   prism-section - 区块容器（透明背景）
-
-   结构：
-   .prism-section
-     .section-title     - 区块标题
-     .section-desc      - 区块描述
-     .subsection        - 子区块
-       .subsection-title  - 子区块标题
-       .subsection-desc   - 子区块描述
-       内容
-   ============================================================ */
-
-.prism-section {
-  padding: $prism-section-spacing $prism-page-spacing;
-
-  // 相邻 section 之间的间距（减半避免叠加过大）
-  & + & {
-    padding-bottom: calc($prism-section-spacing / 2);
-  }
-
-  // 区块标题
-  .section-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    margin-bottom: $prism-section-spacing;
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-
-  // 区块描述
-  .section-desc {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-    line-height: 1.5;
-
-    .dark-mode & {
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-
-  // prism-section 内的卡片间距（排除 glass 形态）
-  .prism-card:not(.glass) {
-    margin-bottom: $prism-section-spacing;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // 子区块
-  .subsection {
-    margin-bottom: $prism-section-spacing;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // 子区块标题
-  .subsection-title {
-    font-size: 26rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-
-    .dark-mode & {
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-
-  // 子区块描述
-  .subsection-desc {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    padding: 16rpx 24rpx;
-    margin-bottom: 16rpx;
-    background: var(--prism-bg-color, #F7F8FA);
-    border-radius: 8rpx;
-    line-height: 1.5;
-
-    .dark-mode & {
-      background: rgba(255, 255, 255, 0.06);
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-}
-
-/* ============================================================
-   区块头部
-   ============================================================ */
-
-.prism-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16rpx;
-}
-
-.prism-section-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  padding: 24rpx 0;
-  color: var(--prism-text-primary, #1D2129);
-
-  .dark-mode & {
-    color: var(--prism-text-primary, #E5E6EB);
-  }
-}
-
-.prism-more-link {
-  display: flex;
-  align-items: center;
-  gap: 4rpx;
-
-  .more-text,
-  .more-icon {
-    font-size: 24rpx;
-    color: var(--prism-primary-color, #3478F6);
-  }
-}
-
-/* ============================================================
-   prism-grid - 通用宫格布局
-
-   用法：
-   .prism-grid.col-{3|4|5}   - 指定列数（默认4列）
-
-   结构：
-   .prism-grid.col-4
-     .grid-item
-       .prism-icon.{color}
-       .grid-label
-   ============================================================ */
-
-.prism-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16rpx;
-
-  &.col-3 { grid-template-columns: repeat(3, 1fr); }
-  &.col-4 { grid-template-columns: repeat(4, 1fr); }
-  &.col-5 { grid-template-columns: repeat(5, 1fr); }
-
-  // glass 形态
-  &.glass {
-    padding: 24rpx 16rpx;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-radius: 16rpx;
-    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-
-    .dark-mode & {
-      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
-    }
-  }
-
-  .grid-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-
-    &:active {
-      opacity: 0.8;
-    }
-
-    // 图标下边距
-    .prism-icon {
-      margin-bottom: 12rpx;
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 20rpx;
-
-      .fa, .fa-solid, .iconfont {
-        font-size: 32rpx;
-      }
-    }
-
-    .prism-badge {
-      top: -4rpx;
-      right: 16rpx;
-    }
-
-    .prism-number-badge {
-      top: -4rpx;
-      right: 12rpx;
-    }
-  }
-
-  .grid-label {
-    font-size: 22rpx;
-    color: var(--prism-text-primary, #1D2129);
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-}