little-dizzy 2.8.0 → 2.9.0

package/README.md

@@ -1,14 +1,45 @@
-# LittleDizzy
+<p align="center">
+  <img src="https://img.shields.io/npm/v/little-dizzy?color=42b883&label=version" alt="version" />
+  <img src="https://img.shields.io/npm/l/little-dizzy?color=42b883" alt="license" />
+  <img src="https://img.shields.io/badge/vue-3.x-42b883" alt="vue" />
+</p>
 
-基于 Vue 3 的 UI 组件库，支持代码片段预览功能。
+<h1 align="center">🎨 LittleDizzy</h1>
 
-## 安装
+<p align="center">
+  一个轻量、优雅的 Vue 3 组件库，内置代码片段预览系统
+</p>
+
+<p align="center">
+  <a href="https://gitee.com/nizuinande/little-dizzy">📖 文档</a> ·
+  <a href="https://gitee.com/nizuinande/little-dizzy/issues">🐛 反馈</a>
+</p>
+
+---
+
+## ✨ 特性
+
+- 🚀 **基于 Vue 3** - 使用 Composition API，完美支持 Vue 3 生态
+- 📦 **开箱即用** - 提供丰富的基础组件和创意组件
+- 🎯 **按需引入** - 支持 Tree-shaking，按需加载不冗余
+- 💻 **代码片段系统** - 内置代码片段注册与展示功能
+- 🎨 **精美动画** - 组件内置流畅的过渡动画效果
+- 📱 **响应式设计** - 适配多种屏幕尺寸
+
+## 📦 安装
 
 ```bash
+# npm
 npm install little-dizzy
+
+# yarn
+yarn add little-dizzy
+
+# pnpm
+pnpm add little-dizzy
 ```
 
-## 使用方式
+## 🚀 快速开始
 
 ### 完整引入
 
@@ -16,6 +47,7 @@ npm install little-dizzy
 import { createApp } from 'vue'
 import LittleDizzy from 'little-dizzy'
 import 'little-dizzy/dist/styles/index.css'
+import App from './App.vue'
 
 const app = createApp(App)
 app.use(LittleDizzy)
@@ -26,17 +58,51 @@ app.mount('#app')
 
 ```javascript
 import { createApp } from 'vue'
-import { Button, Card, Modal } from 'little-dizzy'
+import { Button, Card, Modal, Message } from 'little-dizzy'
 import 'little-dizzy/dist/styles/index.css'
+import App from './App.vue'
 
 const app = createApp(App)
-app.component('Button', Button)
-app.component('Card', Card)
-app.component('Modal', Modal)
+
+// 注册需要的组件
+app.component('LdButton', Button)
+app.component('LdCard', Card)
+app.component('LdModal', Modal)
+
 app.mount('#app')
 ```
 
-## 组件列表
+## 📚 组件列表
+
+### 基础组件
+
+| 组件 | 描述 |
+|------|------|
+| **Button** | 按钮组件，支持多种类型和尺寸 |
+| **Card** | 卡片容器，支持头部、内容、底部插槽 |
+| **Modal** | 模态框，支持自定义内容和动画效果 |
+| **Message** | 消息提示，支持多种状态类型 |
+| **Table** | 表格组件，支持自定义列和插槽 |
+| **Carousel** | 轮播图组件，支持自动播放 |
+| **Backtop** | 返回顶部按钮 |
+| **Loading** | 加载状态指示器 |
+| **LzImg** | 图片组件，支持预览、多图切换 |
+
+### 创意组件
+
+| 组件 | 描述 |
+|------|------|
+| **ldFlipper** | 翻牌器动画组件 |
+| **ldLinearCard** | 渐变边框卡片 |
+| **ldThemeCard** | 主题切换卡片 |
+| **ldWeather** | 天气展示组件 |
+| **ldPrint** | 打字机效果组件 |
+| **lzbutton** | 创意按钮组件 |
+| **Lztext** | 文本动画组件 |
+| **lztheme** | 主题控制组件 |
+| **ldradio** | 创意单选组件 |
+
+## 🔧 组件示例
 
 ### Button 按钮
 
@@ -46,13 +112,15 @@ app.mount('#app')
   <Button type="success">成功按钮</Button>
   <Button type="warning">警告按钮</Button>
   <Button type="danger">危险按钮</Button>
+  <Button disabled>禁用按钮</Button>
 </template>
 ```
 
-**Props:**
-- `type`: 按钮类型，可选值 `primary` | `success` | `warning` | `danger` | `info` | `secondary`
-- `size`: 按钮尺寸，可选值 `small` | `medium` | `large`
-- `disabled`: 是否禁用
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| type | 按钮类型 | `primary` / `success` / `warning` / `danger` / `info` / `secondary` | - |
+| size | 按钮尺寸 | `small` / `medium` / `large` | `medium` |
+| disabled | 是否禁用 | boolean | false |
 
 ### Card 卡片
 
@@ -62,7 +130,7 @@ app.mount('#app')
     <template #header>
       <Button type="primary" size="small">操作</Button>
     </template>
-    <div>卡片内容</div>
+    <p>卡片内容区域</p>
     <template #footer>
       <Button type="secondary">取消</Button>
       <Button type="primary">确认</Button>
@@ -71,92 +139,230 @@ app.mount('#app')
 </template>
 ```
 
-**Props:**
-- `title`: 卡片标题
-- `shadow`: 是否显示阴影，默认 `true`
-
-**Slots:**
-- `default`: 卡片内容
-- `header`: 卡片头部
-- `footer`: 卡片底部
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 卡片标题 | string | - |
+| shadow | 是否显示阴影 | boolean | true |
 
 ### Modal 模态框
 
 ```vue
 <template>
   <Button @click="visible = true">打开模态框</Button>
-  <Modal :visible="visible" title="标题" @close="visible = false">
-    <div>模态框内容</div>
+  
+  <Modal 
+    v-model:visible="visible" 
+    title="提示" 
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  >
+    <p>这是一段内容...</p>
   </Modal>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+
 const visible = ref(false)
+
+const handleConfirm = () => {
+  console.log('确认')
+  visible.value = false
+}
+
+const handleCancel = () => {
+  visible.value = false
+}
 </script>
 ```
 
-**Props:**
-- `visible`: 是否显示
-- `title`: 标题
-- `showFooter`: 是否显示默认底部按钮
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| visible | 是否显示 | boolean | false |
+| title | 标题 | string | - |
+| width | 宽度 | string | '500px' |
+| showFooter | 是否显示底部按钮 | boolean | true |
+
+### Message 消息提示
+
+```javascript
+import { Message } from 'little-dizzy'
+
+// 基础用法
+Message.info('这是一条消息')
+Message.success('操作成功')
+Message.warning('警告信息')
+Message.error('错误信息')
+
+// 自定义配置
+Message({
+  type: 'success',
+  content: '自定义消息',
+  duration: 5000
+})
+```
+
+### LzImg 图片
+
+```vue
+<template>
+  <!-- 基础用法 -->
+  <LzImg 
+    src="https://example.com/image.jpg" 
+    width="300" 
+    height="200" 
+  />
+  
+  <!-- 开启预览 -->
+  <LzImg 
+    src="https://example.com/image.jpg" 
+    width="300" 
+    height="200"
+    preview 
+  />
+  
+  <!-- 多图预览 -->
+  <LzImg 
+    v-for="(src, index) in images" 
+    :key="index"
+    :src="src"
+    width="120"
+    height="120"
+    preview
+    :preview-src-list="images"
+  />
+</template>
+```
 
-**Events:**
-- `close`: 关闭时触发
-- `cancel`: 点击取消按钮
-- `confirm`: 点击确认按钮
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| src | 图片地址 | string | - |
+| width | 宽度 | string / number | - |
+| height | 高度 | string / number | - |
+| fit | 填充模式 | `fill` / `contain` / `cover` / `none` / `scale-down` | `cover` |
+| preview | 是否开启预览 | boolean | false |
+| previewSrcList | 预览图片列表 | array | [] |
+| round | 是否圆形 | boolean | false |
+| radius | 圆角大小 | string / number | - |
 
-## 代码片段系统
+## 💡 代码片段系统
 
-LittleDizzy 提供了代码片段注册系统，方便展示组件使用示例。
+LittleDizzy 内置代码片段注册系统，方便展示组件使用示例。
 
-### 注册自定义代码片段
+### 注册代码片段
 
 ```javascript
 import { registerSnippet } from 'little-dizzy'
 
 registerSnippet({
-  name: 'MyButton',
-  type: 'html',  // 'vue' | 'html' | 'css' | 'javascript'
-  label: '我的按钮',
-  code: `<button class="my-btn">Click Me</button>
-  
-<style>
-.my-btn {
-  padding: 10px 20px;
-  background: #42b883;
+  name: 'MyComponent',
+  type: 'vue',  // 'vue' | 'html' | 'css' | 'javascript'
+  label: '我的组件',
+  code: `<template>
+  <div class="my-component">
+    Hello World
+  </div>
+</template>
+
+<style scoped>
+.my-component {
+  padding: 20px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
-  border: none;
-  border-radius: 4px;
+  border-radius: 8px;
 }
 </style>`
 })
 ```
 
-### 获取所有代码片段
+### 获取代码片段
 
 ```javascript
-import { snippets } from 'little-dizzy'
+import { snippets, getSnippet } from 'little-dizzy'
 
+// 获取所有代码片段
 const allSnippets = snippets()
+
+// 获取单个代码片段
+const mySnippet = getSnippet('MyComponent')
 ```
 
-## 开发
+## 🛠 开发指南
 
 ```bash
+# 克隆项目
+git clone https://gitee.com/nizuinande/little-dizzy.git
+
+# 进入目录
+cd little-dizzy
+
 # 安装依赖
 npm install
 
 # 启动开发服务器
 npm run dev
 
-# 构建库
+# 构建组件库
 npm run build:lib
 
 # 构建演示站点
 npm run build
+
+# 预览构建结果
+npm run preview
 ```
 
-## License
+## 📁 项目结构
+
+```
+little-dizzy/
+├── src/
+│   ├── components/          # 组件源码
+│   │   ├── custom/          # 创意组件
+│   │   ├── Button.vue
+│   │   ├── Card.vue
+│   │   ├── Modal.vue
+│   │   └── ...
+│   ├── demo/                # 演示站点
+│   │   ├── views/
+│   │   ├── templates/
+│   │   └── App.vue
+│   ├── snippets/            # 代码片段
+│   ├── styles/              # 样式文件
+│   └── index.js             # 入口文件
+├── dist/                    # 构建输出
+├── package.json
+└── vite.config.js
+```
+
+## 🤝 贡献指南
+
+欢迎提交 Issue 或 Pull Request！
+
+1. Fork 本仓库
+2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 提交 Pull Request
+
+## 📄 更新日志
+
+### v2.8.0
+- 新增 `LzImg` 图片组件，支持预览和多图切换
+- 优化 Modal 组件动画效果
+- 首页增加动态效果
+
+### v2.7.0
+- 新增上一个/下一个组件导航
+- 优化侧边栏导航结构
+- 新增页面切换动画
+
+## 📜 License
+
+[MIT License](./LICENSE) © 2024 LittleDizzy
+
+---
 
-MIT
+<p align="center">
+  Made with ❤️ by <a href="https://gitee.com/nizuinande">fsk</a>
+</p>