@ruixinkeji/prism-ui 1.0.0

package/styles/index.scss

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

package/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;
+  }
+}