@ruixinkeji/prism-ui 1.0.0

package/README.md

@@ -0,0 +1,141 @@
+# Prism UI
+
+现代化玻璃态设计 uni-app 组件库
+
+## 特性
+
+- 玻璃态设计风格
+- 深色/浅色主题自动切换
+- 14 种颜色 + 5 种形态
+- 原子化 CSS 类
+- H5/小程序/App 多端支持
+
+## 安装
+
+```bash
+npm install @ruixin/prism-ui
+```
+
+## 使用
+
+```scss
+// main.js 或 App.vue
+@import "@/styles/index.scss";
+```
+
+## 深色模式
+
+```vue
+<view :class="{ 'dark-mode': isDark }">
+  <!-- 内容自动适配深色模式 -->
+</view>
+```
+
+## 组件
+
+### 按钮
+
+```html
+<!-- 颜色：primary / success / warning / danger / blue / green / purple 等 -->
+<button class="prism-btn primary">主题色</button>
+<button class="prism-btn success">成功</button>
+<button class="prism-btn danger">危险</button>
+
+<!-- 形态：solid / gradient / glass / outline -->
+<button class="prism-btn primary solid">实心</button>
+<button class="prism-btn primary gradient">渐变</button>
+<button class="prism-btn primary glass">玻璃</button>
+<button class="prism-btn primary outline">轮廓</button>
+
+<!-- 尺寸：xs / sm / md / lg / xl -->
+<button class="prism-btn primary md">中等</button>
+<button class="prism-btn primary lg">大号</button>
+```
+
+### 卡片
+
+```html
+<view class="prism-card">普通卡片</view>
+<view class="prism-card glass">玻璃卡片</view>
+<view class="prism-card primary gradient">渐变卡片</view>
+```
+
+### 图标
+
+```html
+<!-- 图标容器 -->
+<view class="prism-icon blue">
+  <text class="fa fa-home"></text>
+</view>
+
+<!-- 图标按钮 -->
+<view class="prism-icon-btn primary">
+  <text class="fa fa-plus"></text>
+</view>
+```
+
+### 表单
+
+```html
+<view class="prism-input-box">
+  <input placeholder="请输入" />
+</view>
+<view class="prism-checkbox checked"></view>
+<view class="prism-switch active"></view>
+```
+
+### 数据展示
+
+```html
+<view class="prism-avatar md"></view>
+<view class="prism-badge">99</view>
+<view class="prism-progress">
+  <view class="progress-bar" style="width:60%"></view>
+</view>
+```
+
+## 颜色系统
+
+### 14 种颜色
+
+purple / blue / green / red / orange / cyan / yellow / pink / magenta / indigo / teal / violet / rose / ai
+
+### 语义化别名
+
+- `primary` → 主题色（跟随 theme 设置）
+- `success` → 绿色
+- `warning` → 橙色
+- `danger` → 红色
+- `info` → 青色
+
+### 5 种形态
+
+- 默认 - 自适应深浅模式
+- `solid` - 实心
+- `gradient` - 渐变
+- `glass` - 玻璃态
+- `outline` - 轮廓
+
+## 主题切换
+
+修改 `src/styles/variables.scss` 中的引入：
+
+```scss
+// 可选：blue / green / purple / orange / red / cyan
+@import '../theme/blue.scss';
+```
+
+## CSS 变量
+
+```scss
+--prism-primary-color      // 主题色
+--prism-bg-color-card      // 卡片背景
+--prism-bg-color-page      // 页面背景
+--prism-text-primary       // 主要文字
+--prism-text-secondary     // 次要文字
+--prism-border-color-light // 边框颜色
+```
+
+## License
+
+MIT

package/components/PrismAIAssist/PrismAIAssist.vue

@@ -0,0 +1,98 @@
+<template>
+  <view class="prism-ai-assist" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <view class="ai-btn" :class="{ 'loading': isLoading }" @click="handleClick">
+      <text class="fa" :class="isLoading ? 'fa-spinner fa-spin' : 'fa-wand-magic-sparkles'"></text>
+      <text class="ai-text">{{ isLoading ? loadingText : text }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'AI帮我完善'
+  },
+  loadingText: {
+    type: String,
+    default: 'AI优化中...'
+  }
+});
+
+const emit = defineEmits(['click']);
+
+const appStore = useAppStore();
+const isLoading = ref(false);
+
+function handleClick() {
+  if (isLoading.value) return;
+  emit('click', {
+    setLoading: (val) => {
+      isLoading.value = val;
+    }
+  });
+}
+
+// 暴露方法给父组件
+defineExpose({
+  setLoading: (val) => {
+    isLoading.value = val;
+  }
+});
+</script>
+
+<style lang="scss">
+.prism-ai-assist {
+  display: inline-flex;
+
+  .ai-btn {
+    height: 64rpx;
+    padding: 0 4rpx;
+    background: transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: 12rpx;
+    font-size: 30rpx;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:active {
+      opacity: 0.7;
+      transform: scale(0.98);
+    }
+
+    &.loading {
+      pointer-events: none;
+    }
+
+    .fa {
+      font-size: 36rpx;
+      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 25%, #c44569 50%, #764ba2 75%, #667eea 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .ai-text {
+      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 25%, #c44569 50%, #764ba2 75%, #667eea 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+  }
+}
+
+// 旋转动画
+@keyframes fa-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.fa-spin {
+  animation: fa-spin 1s infinite linear;
+}
+</style>