@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/styles/index.scss

@@ -0,0 +1,43 @@
+/**
+ * Prism UI - 主入口样式文件
+ * @ruixin/prism-ui
+ *
+ * 现代化玻璃态设计 uni-app 组件库
+ * 支持深浅主题切换
+ */
+
+// 基础样式和 CSS 变量
+@import './base';
+
+// 图标颜色主题
+@import '../theme/colors.scss';
+
+// 按钮组件
+@import './button';
+
+// 表单组件
+@import './form';
+
+// 卡片和容器组件
+@import './card';
+
+// 列表组件
+@import './list';
+
+// 弹出层组件
+@import './overlay';
+
+// 数据展示组件
+@import './data';
+
+// 反馈组件
+@import './feedback';
+
+// 导航组件
+@import './navigation';
+
+// 特效组件
+@import './effects';
+
+// 工具类
+@import './utilities';

package/dist/styles/list.scss

@@ -0,0 +1,184 @@
+/**
+ * Prism UI - 列表组件样式
+ * 菜单列表、列表项卡片等
+ */
+
+/* ============================================================
+   菜单列表 - 可独立使用，也可嵌套在卡片内
+   ============================================================ */
+
+.prism-menu-list {
+  position: relative;
+  border-radius: 16rpx;
+  overflow: hidden;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+
+  .dark-mode & {
+    background: var(--prism-bg-color-card, #1E1E1E);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+  }
+
+  // 当同时使用 prism-card 时，去掉 padding
+  &.prism-card {
+    padding: 0;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 28rpx 24rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+    transition: background 0.2s ease;
+
+    // 第一个 item 需要顶部圆角
+    &:first-child {
+      border-radius: 16rpx 16rpx 0 0;
+    }
+
+    // 最后一个 item 需要底部圆角
+    &:last-child {
+      border-bottom: none;
+      border-radius: 0 0 16rpx 16rpx;
+    }
+
+    // 只有一个 item 时需要全部圆角
+    &:only-child {
+      border-radius: 16rpx;
+    }
+
+    &:active {
+      background: var(--prism-bg-color, #F7F8FA);
+    }
+
+    .dark-mode & {
+      border-bottom-color: var(--prism-border-color-light, #2D2D2D);
+
+      &:active {
+        background: var(--prism-bg-color, #2A2A2A);
+      }
+    }
+  }
+
+  .menu-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  .menu-icon {
+    margin-right: 20rpx;
+
+    // 当使用 prism-icon 时，覆盖默认尺寸为 sm
+    &.prism-icon {
+      width: 56rpx;
+      height: 56rpx;
+      border-radius: 12rpx;
+
+      .fa, .fa-solid, .fa-regular, .iconfont {
+        font-size: 24rpx;
+      }
+    }
+  }
+
+  .menu-text {
+    font-size: 30rpx;
+    color: var(--prism-text-primary, #1D2129);
+
+    .dark-mode & {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+
+  .menu-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-value {
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+    margin-right: 8rpx;
+  }
+
+  .menu-arrow,
+  .arrow {
+    font-size: 28rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+}
+
+/* ============================================================
+   列表项卡片 - 左图标 + 中间内容 + 右箭头
+   ============================================================ */
+
+.prism-list-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  .dark-mode & {
+    background: var(--prism-bg-color-card, #1E1E1E);
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.2);
+  }
+
+  .list-item-icon {
+    width: 88rpx;
+    height: 88rpx;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 24rpx;
+    flex-shrink: 0;
+
+    .fa {
+      font-size: 36rpx;
+    }
+  }
+
+  .list-item-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .list-item-title {
+    display: block;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+    margin-bottom: 6rpx;
+
+    .dark-mode & {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+
+  .list-item-desc {
+    display: block;
+    font-size: 24rpx;
+    color: var(--prism-text-secondary, #86909C);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .dark-mode & {
+      color: var(--prism-text-secondary, #A9AEB8);
+    }
+  }
+
+  .list-item-arrow {
+    font-size: 28rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+    margin-left: 16rpx;
+  }
+}

package/dist/styles/navigation.scss

@@ -0,0 +1,501 @@
+/**
+ * Prism UI - 导航组件样式
+ * Steps 步骤条、Breadcrumb 面包屑、DropdownMenu 下拉菜单
+ */
+
+/* ============================================================
+   Steps 步骤条
+   ============================================================ */
+
+.prism-steps {
+  display: flex;
+  width: 100%;
+
+  /* 水平步骤条 */
+  &--horizontal {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  /* 垂直步骤条 */
+  &--vertical {
+    flex-direction: column;
+
+    .prism-step {
+      flex-direction: row;
+      align-items: flex-start;
+
+      &__line {
+        width: 2rpx;
+        height: 60rpx;
+        position: absolute;
+        left: 50%;
+        top: 100%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+}
+
+.prism-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+
+  &__icon {
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24rpx;
+    font-weight: 600;
+    background: var(--prism-bg-color, #F7F8FA);
+    color: var(--prism-text-secondary, #86909C);
+    border: 2rpx solid var(--prism-border-color-base, #E5E6EB);
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+
+    .fa {
+      font-size: 24rpx;
+    }
+  }
+
+  &__title {
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+    margin-top: 12rpx;
+    text-align: center;
+    transition: all 0.3s ease;
+  }
+
+  &__desc {
+    font-size: 22rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+    margin-top: 4rpx;
+    text-align: center;
+  }
+
+  &__line {
+    position: absolute;
+    top: 24rpx;
+    left: calc(50% + 30rpx);
+    right: calc(-50% + 30rpx);
+    height: 2rpx;
+    background: var(--prism-border-color-base, #E5E6EB);
+    transition: all 0.3s ease;
+  }
+
+  &:last-child .prism-step__line {
+    display: none;
+  }
+
+  /* 已完成状态 */
+  &--finished {
+    .prism-step__icon {
+      background: var(--prism-primary-color, #3478F6);
+      border-color: var(--prism-primary-color, #3478F6);
+      color: #fff;
+    }
+
+    .prism-step__title {
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    .prism-step__line {
+      background: var(--prism-primary-color, #3478F6);
+    }
+  }
+
+  /* 进行中状态 */
+  &--process {
+    .prism-step__icon {
+      background: var(--prism-primary-color, #3478F6);
+      border-color: var(--prism-primary-color, #3478F6);
+      color: #fff;
+      box-shadow: 0 4rpx 12rpx rgba(52, 120, 246, 0.3);
+    }
+
+    .prism-step__title {
+      color: var(--prism-primary-color, #3478F6);
+      font-weight: 600;
+    }
+  }
+
+  /* 等待状态 */
+  &--wait {
+    .prism-step__icon {
+      background: var(--prism-bg-color, #F7F8FA);
+      border-color: var(--prism-border-color-base, #E5E6EB);
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+  }
+
+  /* 错误状态 */
+  &--error {
+    .prism-step__icon {
+      background: var(--prism-danger-color, #F53F3F);
+      border-color: var(--prism-danger-color, #F53F3F);
+      color: #fff;
+    }
+
+    .prism-step__title {
+      color: var(--prism-danger-color, #F53F3F);
+    }
+  }
+
+  .dark-mode & {
+    &__icon {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.15);
+    }
+
+    &__line {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    &--finished {
+      .prism-step__icon {
+        background: var(--prism-primary-color, #3478F6);
+        border-color: var(--prism-primary-color, #3478F6);
+      }
+
+      .prism-step__title {
+        color: var(--prism-text-primary, #E5E6EB);
+      }
+
+      .prism-step__line {
+        background: var(--prism-primary-color, #3478F6);
+      }
+    }
+
+    &--process {
+      .prism-step__icon {
+        box-shadow: 0 4rpx 16rpx rgba(52, 120, 246, 0.4);
+      }
+    }
+  }
+}
+
+/* ============================================================
+   Breadcrumb 面包屑
+   ============================================================ */
+
+.prism-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 26rpx;
+  gap: 8rpx;
+}
+
+.prism-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  color: var(--prism-text-secondary, #86909C);
+  transition: color 0.2s ease;
+
+  &:last-child {
+    color: var(--prism-text-primary, #1D2129);
+    font-weight: 500;
+
+    .prism-breadcrumb__separator {
+      display: none;
+    }
+  }
+
+  &--link {
+    color: var(--prism-text-secondary, #86909C);
+
+    &:active {
+      color: var(--prism-primary-color, #3478F6);
+    }
+  }
+
+  .dark-mode & {
+    color: var(--prism-text-secondary, #86909C);
+
+    &:last-child {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+}
+
+.prism-breadcrumb__separator {
+  color: var(--prism-text-placeholder, #C9CDD4);
+  font-size: 22rpx;
+
+  .fa {
+    font-size: 20rpx;
+  }
+}
+
+/* ============================================================
+   DropdownMenu 下拉菜单
+   ============================================================ */
+
+.prism-dropdown {
+  position: relative;
+}
+
+.prism-dropdown__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 88rpx;
+  background: var(--prism-bg-color-card, #fff);
+  border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+
+  .dark-mode & {
+    background: var(--prism-bg-color-card, #242424);
+    border-bottom-color: rgba(255, 255, 255, 0.08);
+  }
+}
+
+.prism-dropdown__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: 0 24rpx;
+  height: 100%;
+  font-size: 28rpx;
+  color: var(--prism-text-primary, #1D2129);
+  transition: all 0.2s ease;
+
+  .prism-dropdown__arrow {
+    font-size: 20rpx;
+    color: var(--prism-text-secondary, #86909C);
+    transition: transform 0.3s ease;
+  }
+
+  &--active {
+    color: var(--prism-primary-color, #3478F6);
+
+    .prism-dropdown__arrow {
+      color: var(--prism-primary-color, #3478F6);
+      transform: rotate(180deg);
+    }
+  }
+
+  .dark-mode & {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+}
+
+.prism-dropdown__popup {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--prism-bg-color-card, #fff);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+  border-radius: 16rpx;
+  z-index: 100;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+
+  &--show {
+    max-height: 600rpx;
+  }
+
+  .dark-mode & {
+    background: var(--prism-bg-color-card, #242424);
+    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
+  }
+}
+
+.prism-dropdown__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 32rpx;
+  font-size: 28rpx;
+  color: var(--prism-text-primary, #1D2129);
+  transition: background 0.2s ease;
+
+  &:active {
+    background: var(--prism-bg-color, #F7F8FA);
+  }
+
+  &--selected {
+    color: var(--prism-primary-color, #3478F6);
+
+    .prism-dropdown__check {
+      display: block;
+    }
+  }
+
+  .prism-dropdown__check {
+    display: none;
+    color: var(--prism-primary-color, #3478F6);
+    font-size: 28rpx;
+  }
+
+  .dark-mode & {
+    color: var(--prism-text-primary, #E5E6EB);
+
+    &:active {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+}
+
+.prism-dropdown__mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+
+  &--show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+/* ============================================================
+   PrismTabs 标签页组件
+   ============================================================ */
+
+/* Line 类型 - 下划线风格 */
+.prism-tabs--line {
+  display: flex;
+  justify-content: flex-start;
+  gap: 48rpx;
+}
+
+.prism-tabs--line .prism-tabs__item {
+  padding: 8rpx 0;
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--prism-text-secondary, #86909C);
+  text-align: center;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.prism-tabs--line .prism-tabs__item.active {
+  color: var(--prism-text-primary, #1D2129);
+  font-weight: 600;
+}
+
+.prism-tabs--line .prism-tabs__item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4rpx;
+  background: var(--prism-primary-color, #3478F6);
+  border-radius: 2rpx;
+}
+
+.dark-mode .prism-tabs--line .prism-tabs__item {
+  color: var(--prism-text-secondary, #86909C);
+}
+
+.dark-mode .prism-tabs--line .prism-tabs__item.active {
+  color: var(--prism-primary-color, #3478F6);
+}
+
+/* Chrome 类型 - 浏览器标签风格 */
+.prism-tabs--chrome {
+  display: flex;
+  align-items: flex-end;
+  padding: 2rpx 20rpx 0 20rpx;
+  position: relative;
+  max-height: 100rpx;
+  overflow: hidden;
+}
+
+.prism-tabs--chrome .prism-tabs__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16rpx 32rpx;
+  font-size: 28rpx;
+  line-height: 1.4;
+  color: var(--prism-text-secondary, #86909C);
+  font-weight: 400;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 16rpx 16rpx 0 0;
+  position: relative;
+  transition: all 0.25s ease;
+}
+
+.prism-tabs--chrome .prism-tabs__item::before,
+.prism-tabs--chrome .prism-tabs__item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  width: 16rpx;
+  height: 16rpx;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.prism-tabs--chrome .prism-tabs__item::before {
+  left: -16rpx;
+  background: radial-gradient(circle at 0 0, transparent 16rpx, #ffffff 16rpx);
+}
+
+.prism-tabs--chrome .prism-tabs__item::after {
+  right: -16rpx;
+  background: radial-gradient(circle at 100% 0, transparent 16rpx, #ffffff 16rpx);
+}
+
+.prism-tabs--chrome .prism-tabs__item.active {
+  color: var(--prism-text-primary, #1D2129);
+  font-weight: 600;
+  background: #ffffff;
+  z-index: 2;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);
+}
+
+.prism-tabs--chrome .prism-tabs__item.active::before,
+.prism-tabs--chrome .prism-tabs__item.active::after {
+  opacity: 1;
+}
+
+/* Chrome 类型内容区域 */
+.prism-tabs__content {
+  background: #ffffff;
+  padding: 20rpx 24rpx;
+  border-radius: 16rpx;
+}
+
+/* Chrome 类型深色模式 */
+.dark-mode .prism-tabs--chrome .prism-tabs__item {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--prism-text-secondary, #86909C);
+}
+
+.dark-mode .prism-tabs--chrome .prism-tabs__item::before {
+  background: radial-gradient(circle at 0 0, transparent 16rpx, rgba(255, 255, 255, 0.12) 16rpx);
+}
+
+.dark-mode .prism-tabs--chrome .prism-tabs__item::after {
+  background: radial-gradient(circle at 100% 0, transparent 16rpx, rgba(255, 255, 255, 0.12) 16rpx);
+}
+
+.dark-mode .prism-tabs--chrome .prism-tabs__item.active {
+  background: rgba(255, 255, 255, 0.12);
+  color: #E5E6EB;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode .prism-tabs__content {
+  background: rgba(255, 255, 255, 0.12);
+}