@ruixinkeji/prism-ui 1.0.9 → 1.0.11

package/README.md

@@ -13,22 +13,74 @@
 ## 安装
 
 ```bash
-npm install @ruixinkeji/prism-ui
+npm install @ruixinkeji/prism-ui pinia
 ```
 
-## 使用
+## 快速开始
 
-```scss
-// main.js 或 App.vue
-@import "@/styles/index.scss";
+### 1. 初始化 Pinia
+
+```ts
+// main.ts
+import { createSSRApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(createPinia())
+  return { app }
+}
 ```
 
-## 深色模式
+### 2. 引入样式
 
 ```vue
-<view :class="{ 'dark-mode': isDark }">
-  <!-- 内容自动适配深色模式 -->
-</view>
+<!-- App.vue -->
+<style lang="scss">
+@import '@ruixinkeji/prism-ui/styles/index.scss';
+@import '@ruixinkeji/prism-ui/fonts/font-awesome.css';
+</style>
+```
+
+### 3. 配置 easycom（可选）
+
+在 `pages.json` 中添加：
+
+```json
+{
+  "easycom": {
+    "custom": {
+      "^Prism(.*)": "@ruixinkeji/prism-ui/components/Prism$1/Prism$1.vue"
+    }
+  }
+}
+```
+
+配置后可直接使用组件，无需 import：
+
+```vue
+<template>
+  <PrismNavBar title="首页" />
+  <PrismTabBar :tabs="tabs" />
+</template>
+```
+
+### 4. 手动引入组件
+
+```vue
+<script setup>
+import PrismNavBar from '@ruixinkeji/prism-ui/components/PrismNavBar/PrismNavBar.vue'
+import { useAppStore } from '@ruixinkeji/prism-ui/store/app'
+
+const appStore = useAppStore()
+</script>
+
+<template>
+  <view :class="{ 'dark-mode': appStore.isDarkMode }">
+    <PrismNavBar title="首页" />
+  </view>
+</template>
 ```
 
 ## 组件

package/easycom.json

@@ -0,0 +1,8 @@
+{
+  "easycom": {
+    "autoscan": false,
+    "custom": {
+      "^Prism(.*)": "@ruixinkeji/prism-ui/components/Prism$1/Prism$1.vue"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ruixinkeji/prism-ui",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Prism UI - 现代化玻璃态设计 uni-app 组件库",
   "main": "index.js",
   "module": "index.esm.js",
@@ -12,6 +12,7 @@
     "fonts",
     "store",
     "utils",
+    "easycom.json",
     "index.js",
     "index.esm.js",
     "index.d.ts",

package/styles/index.scss

@@ -7,40 +7,40 @@
  */
 
 // SCSS 变量（必须最先引入，供其他文件使用）
-@import './variables';
+@use './variables' as *;
 
 // 基础样式和 CSS 变量
-@import './base';
+@use './base';
 
 // 图标颜色主题
-@import './colors.scss';
+@use './colors';
 
 // 按钮组件
-@import './button';
+@use './button';
 
 // 表单组件
-@import './form';
+@use './form';
 
 // 卡片和容器组件
-@import './card';
+@use './card';
 
 // 列表组件
-@import './list';
+@use './list';
 
 // 弹出层组件
-@import './overlay';
+@use './overlay';
 
 // 数据展示组件
-@import './data';
+@use './data';
 
 // 反馈组件
-@import './feedback';
+@use './feedback';
 
 // 导航组件
-@import './navigation';
+@use './navigation';
 
 // 特效组件
-@import './effects';
+@use './effects';
 
 // 工具类
-@import './utilities';
+@use './utilities';

package/styles/variables.scss

@@ -8,7 +8,7 @@
  */
 
 // 引入主题文件（切换主题只需修改这一行）
-@import '../theme/blue.scss';
+@use '../theme/blue.scss' as *;
 
 /* ============================================================
    一、浅色模式变量（使用 !default，允许主题文件覆盖）