vue-color-ui 0.0.56 → 0.0.57

package/docs/README.md

@@ -0,0 +1,120 @@
+# vue-color-ui 文档
+
+欢迎使用 `vue-color-ui` 组件库文档。这里包含了所有组件的详细使用说明。
+
+## 📚 文档导航
+
+### 快速开始
+
+- [安装指南](#安装)
+- [Nuxt 3 快速开始](#nuxt-3-快速开始)
+- [基本使用](#基本使用)
+
+### 指南
+
+- [颜色系统](./guides/colors.md) - 了解颜色和渐变的使用
+
+### 组件文档
+
+#### 基础组件
+
+- [TIcon](./components/TIcon.md) - 图标组件
+- [TTitle](./components/TTitle.md) - 标题组件
+- [TAvatar](./components/TAvatar.md) - 头像组件
+- [TAvatarGroup](./components/TAvatarGroup.md) - 头像组组件
+- [TButton](./components/TButton.md) - 按钮组件
+- [TTag](./components/TTag.md) - 标签组件
+
+#### 导航组件
+
+- [TNavBar](./components/TNavBar.md) - 导航栏组件
+- [TTopBar](./components/TTopBar.md) - 顶部操作条
+- [TTabs](./components/TTabs.md) - 标签页组件
+- [TTab](./components/TTab.md) - 标签页子组件
+
+#### 卡片组件
+
+- [TNavCard](./components/TNavCard.md) - 导航卡片
+- [TNewCard](./components/TNewCard.md) - 新闻卡片
+- [TShareCard](./components/TShareCard.md) - 分享卡片
+- [TImageCard](./components/TImageCard.md) - 图片卡片
+- [TProductCard](./components/TProductCard.md) - 商品卡片
+- [TProfileCard](./components/TProfileCard.md) - 个人资料卡片
+- [TStatCard](./components/TStatCard.md) - 统计卡片
+
+#### 表单组件
+
+- [TSearchBar](./components/TSearchBar.md) - 搜索栏
+- [TInputBar](./components/TInputBar.md) - 输入栏
+
+#### 聊天组件
+
+- [ChatList](./components/ChatList.md) - 聊天列表
+- [ChatRoom](./components/ChatRoom.md) - 聊天室
+
+#### 布局组件
+
+- [GridGroup](./components/GridGroup.md) - 网格组
+- [Menu](./components/Menu.md) - 菜单组件
+
+#### 高级组件
+
+- [TVirtualScrollSlide](./components/TVirtualScrollSlide.md) - 虚拟滚动滑动组件
+- [TimeLine](./components/TimeLine.md) - 时间轴组件
+- [TSteps](./components/TSteps.md) - 步骤条组件
+- [DrawerModal](./components/DrawerModal.md) - 抽屉模态框
+- [Loading](./components/Loading.md) - 加载动画组件
+
+## 安装
+
+使用 npm 安装 `vue-color-ui`：
+
+```bash
+npm install vue-color-ui
+```
+
+## Nuxt 3 快速开始
+
+在 Nuxt 3 项目中快速配置 `vue-color-ui`：
+
+1. 创建插件文件 `plugins/vue-color-ui.ts`：
+
+```typescript
+import TempColorUI from "vue-color-ui";
+import "vue-color-ui/lib/style.css";
+import "vue-color-ui/lib/css/main.css";
+import "vue-color-ui/lib/css/animation.css";
+import "vue-color-ui/lib/css/icon.css";
+
+export default defineNuxtPlugin((app) => {
+  app.vueApp.use(TempColorUI);
+});
+```
+
+## 基本使用
+
+在你的 Vue 组件中，你可以直接使用 `vue-color-ui` 提供的组件。例如：
+
+```vue
+<template>
+  <TNavBar :items="navItems" />
+</template>
+
+<script setup>
+const navItems = [
+  { icon: "homefill", label: "首页" },
+  { icon: "similar", label: "分类" },
+  { img: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png", label: "积分" },
+  { icon: "cart", label: "购物车", badge: 99 },
+  { icon: "my", label: "我的" }
+];
+</script>
+```
+
+## 贡献
+
+这个项目是一个临时解决方案，等原作者更新了之后再决定是否继续维护。如果你有任何建议或发现任何问题，欢迎提交 issue 或 pull request。
+
+## 许可证
+
+[MIT](../LICENSE)

package/docs/components/ChatList.md

@@ -0,0 +1,171 @@
+# ChatList 组件
+
+`ChatList` 组件用于展示一个聊天列表，其中每一项都是一个 `ChatListItem`。该组件支持显示用户信息、未读消息数、消息内容等，并允许自定义头像、标签和各种状态。
+
+## 属性
+
+### ChatList属性
+
+| 属性名 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `items` | `ChatListItemOption[]` | `[]` | 聊天列表项的数组，每个项包含用户信息、时间、未读消息数等 |
+
+### ChatListItemOption属性
+
+| 属性名 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `userinfo` | `object` | `{}` | 用户信息对象，包含头像、名称、标签等 |
+| `userinfo.avatar` | `string` | `''` | 用户头像的URL |
+| `userinfo.avatarShape` | `string` | `'circle'` | 头像形状，可选值：`'circle'`、`'square'` |
+| `userinfo.name` | `string` | `''` | 用户名称 |
+| `userinfo.tag` | `string` | `''` | 用户标签 |
+| `userinfo.tagColor` | `string` | `'grey'` | 标签颜色 |
+| `time` | `string` | `''` | 消息时间 |
+| `roomId` | `string` | `''` | 聊天室ID |
+| `roomName` | `string` | `''` | 聊天室名称 |
+| `avatarName` | `string` | `'friendfill'` | 默认头像图标名称 |
+| `avatarBg` | `string` | `'grey'` | 头像背景颜色 |
+| `unread` | `string\|number` | `''` | 未读消息数 |
+| `unreadColor` | `string` | `'red'` | 未读消息数标签颜色 |
+| `badge` | `string` | `''` | 徽章内容 |
+| `icon` | `string` | `''` | 图标名称 |
+| `iconClass` | `string` | `''` | 图标样式类名 |
+| `isDisconnected` | `boolean` | `false` | 是否断开连接 |
+| `isCurrent` | `boolean` | `false` | 是否当前选中项 |
+| `content` | `string` | `''` | 消息内容 |
+| `event` | `Function` | `() => {}` | 点击事件回调函数 |
+
+## 示例
+
+### 示例 1: 基本使用
+
+```vue
+<template>
+  <ChatList :items="chatItems" />
+</template>
+
+<script setup>
+const chatItems = [
+  {
+    userinfo: {
+      avatar: "https://example.com/avatar1.jpg",
+      name: "用户1",
+      tag: "VIP",
+      tagColor: "red"
+    },
+    time: "10:30 AM",
+    unread: 2,
+    content: "Hello, how are you?",
+    event: (item) => console.log('Clicked on:', item)
+  },
+  {
+    userinfo: {
+      avatar: "https://example.com/avatar2.jpg",
+      name: "用户2"
+    },
+    isDisconnected: true,
+    content: "Disconnected"
+  }
+];
+</script>
+```
+
+### 示例 2: 自定义头像和标签
+
+```vue
+<template>
+  <ChatList :items="customChatItems" />
+</template>
+
+<script setup>
+const customChatItems = [
+  {
+    userinfo: {
+      avatar: "https://example.com/avatar3.jpg",
+      avatarShape: "square",
+      name: "用户3",
+      tag: "New",
+      tagColor: "blue"
+    },
+    time: "Yesterday",
+    unread: 5,
+    unreadColor: "green",
+    content: "New message received"
+  }
+];
+</script>
+```
+
+### 示例 3: 带徽章和图标的聊天项
+
+```vue
+<template>
+  <ChatList :items="badgeChatItems" />
+</template>
+
+<script setup>
+const badgeChatItems = [
+  {
+    userinfo: {
+      avatar: "https://example.com/avatar4.jpg",
+      name: "用户4"
+    },
+    badge: "Admin",
+    icon: "settings",
+    iconClass: "custom-icon-class",
+    content: "System settings updated"
+  }
+];
+</script>
+```
+
+### 示例 4: 使用回调函数处理点击事件
+
+```vue
+<template>
+  <ChatList :items="clickableChatItems" />
+</template>
+
+<script setup>
+const clickableChatItems = [
+  {
+    userinfo: {
+      avatar: "https://example.com/avatar5.jpg",
+      name: "用户5"
+    },
+    content: "Click me!",
+    event: (item) => alert('Clicked on: ' + item.userinfo.name)
+  }
+];
+</script>
+```
+
+## 属性类型定义
+
+### `ChatListItemOption`
+
+`ChatListItemOption` 是一个对象类型，包含以下属性：
+
+| 属性名 | 类型 | 描述 |
+| --- | --- | --- |
+| `userinfo` | `object` | 用户信息对象，包含头像、名称、标签等 |
+| `userinfo.avatar` | `string` | 用户头像的URL |
+| `userinfo.avatarShape` | `string` | 头像形状，可选值：`'circle'`、`'square'` |
+| `userinfo.name` | `string` | 用户名称 |
+| `userinfo.tag` | `string` | 用户标签 |
+| `userinfo.tagColor` | `string` | 标签颜色 |
+| `time` | `string` | 消息时间 |
+| `roomId` | `string` | 聊天室ID |
+| `roomName` | `string` | 聊天室名称 |
+| `avatarName` | `string` | 默认头像图标名称 |
+| `avatarBg` | `string` | 头像背景颜色 |
+| `unread` | `string\|number` | 未读消息数 |
+| `unreadColor` | `string` | 未读消息数标签颜色 |
+| `badge` | `string` | 徽章内容 |
+| `icon` | `string` | 图标名称 |
+| `iconClass` | `string` | 图标样式类名 |
+| `isDisconnected` | `boolean` | 是否断开连接 |
+| `isCurrent` | `boolean` | 是否当前选中项 |
+| `content` | `string` | 消息内容 |
+| `event` | `Function` | 点击事件回调函数 |
+

package/docs/components/ChatRoom.md

@@ -0,0 +1,175 @@
+# ChatRoom 组件
+
+`ChatRoom` 是一个聊天室组件，用于展示聊天消息列表，支持多种消息类型。
+
+## 属性
+
+| 属性名     | 类型            | 默认值 | 描述       |
+| ---------- | --------------- | ------ | ---------- |
+| `messages` | `ChatMessage[]` | `[]`   | 消息数组   |
+
+### ChatMessage 类型
+
+| 属性名    | 类型                                                         | 描述           |
+| --------- | ------------------------------------------------------------ | -------------- |
+| `id`      | `number`                                                     | 消息ID（必填） |
+| `type`    | `"text" \| "image" \| "audio" \| "location" \| "info" \| "markdown" \| "card" \| "link" \| string` | 消息类型 |
+| `content` | `string`                                                      | 消息内容       |
+| `date`    | `string`                                                      | 消息时间       |
+| `self`    | `boolean`                                                     | 是否自己发送   |
+| `avatar`  | `string`                                                      | 头像URL        |
+| `url`     | `string`                                                      | 链接URL（link/card类型） |
+| `title`   | `string`                                                      | 标题（link/card类型） |
+| `emoji`   | `string`                                                      | 表情（link/card类型） |
+| `icon`    | `string`                                                      | 图标名称（link/card类型） |
+| `iconColor` | `string`                                                   | 图标颜色（link/card类型） |
+
+## 插槽
+
+| 插槽名           | 参数              | 描述           |
+| ---------------- | ----------------- | -------------- |
+| `custom-message` | `{ message }`     | 自定义消息类型 |
+
+## 消息类型
+
+### text - 文本消息
+普通文本消息
+
+### image - 图片消息
+图片消息（当前版本暂未实现显示）
+
+### audio - 音频消息
+音频消息，显示音频时长
+
+### location - 位置消息
+位置消息，显示位置信息
+
+### info - 信息消息
+系统信息消息，如"对方撤回一条消息"
+
+### warning - 警告消息
+警告类型的消息
+
+### markdown - Markdown消息
+Markdown格式的消息（需自定义渲染）
+
+### card - 卡片消息
+卡片类型的消息，包含标题、描述、链接等
+
+### link - 链接消息
+链接类型的消息，显示链接预览
+
+## 示例
+
+### 基本使用
+
+```vue
+<template>
+  <ChatRoom :messages="messages" />
+</template>
+
+<script setup>
+const messages = [
+  {
+    id: 1,
+    type: "text",
+    content: "你好！",
+    date: "10:30",
+    self: true,
+    avatar: "https://example.com/avatar1.jpg"
+  },
+  {
+    id: 2,
+    type: "text",
+    content: "你好，有什么可以帮助你的吗？",
+    date: "10:31",
+    self: false,
+    avatar: "https://example.com/avatar2.jpg"
+  }
+];
+</script>
+```
+
+### 多种消息类型
+
+```vue
+<template>
+  <ChatRoom :messages="messages" />
+</template>
+
+<script setup>
+const messages = [
+  {
+    id: 1,
+    type: "text",
+    content: "这是一条文本消息",
+    date: "10:30",
+    self: true,
+    avatar: "https://example.com/avatar1.jpg"
+  },
+  {
+    id: 2,
+    type: "audio",
+    content: '3"',
+    date: "10:31",
+    self: true,
+    avatar: "https://example.com/avatar1.jpg"
+  },
+  {
+    id: 3,
+    type: "location",
+    content: "北京市朝阳区",
+    date: "10:32",
+    self: true,
+    avatar: "https://example.com/avatar1.jpg"
+  },
+  {
+    id: 4,
+    type: "info",
+    content: "对方撤回一条消息",
+    date: "",
+    self: false,
+    avatar: ""
+  },
+  {
+    id: 5,
+    type: "link",
+    content: "链接消息内容",
+    date: "10:35",
+    self: false,
+    avatar: "https://example.com/avatar2.jpg",
+    url: "https://example.com/article",
+    title: "文章标题",
+    emoji: "📊"
+  },
+  {
+    id: 6,
+    type: "card",
+    content: "卡片消息描述",
+    date: "10:36",
+    self: true,
+    avatar: "https://example.com/avatar1.jpg",
+    title: "卡片标题",
+    url: "https://example.com/details"
+  }
+];
+</script>
+```
+
+### 自定义消息类型
+
+```vue
+<template>
+  <ChatRoom :messages="messages">
+    <template #custom-message="{ message }">
+      <div v-if="message.type === 'markdown'" class="markdown-message">
+        <div v-html="message.content"></div>
+      </div>
+      <div v-else-if="message.type === 'custom-type'" class="custom-message">
+        {{ message.customContent }}
+      </div>
+    </template>
+  </ChatRoom>
+</template>
+```
+

package/docs/components/DrawerModal.md

@@ -0,0 +1,83 @@
+# DrawerModal 组件
+
+`DrawerModal` 是一个抽屉模态框组件，用于显示弹窗内容。
+
+## 属性
+
+| 属性名       | 类型      | 默认值 | 描述                     |
+| ------------ | --------- | ------ | ------------------------ |
+| `title`      | `string`  | -      | 模态框标题（必填）       |
+| `modelValue` | `boolean` | -      | 显示/隐藏状态（v-model） |
+
+## 事件
+
+| 事件名             | 参数              | 描述           |
+| ------------------ | ----------------- | -------------- |
+| `update:modelValue` | `(value: boolean)` | 状态变化时触发 |
+
+## 插槽
+
+| 插槽名 | 描述           |
+| ------ | -------------- |
+| 默认   | 模态框内容     |
+
+## 示例
+
+### 基本使用
+
+```vue
+<template>
+  <button @click="showModal = true">打开模态框</button>
+  <DrawerModal title="标题" v-model="showModal">
+    <p>这是模态框的内容</p>
+  </DrawerModal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const showModal = ref(false);
+</script>
+```
+
+### 自定义内容
+
+```vue
+<template>
+  <button @click="showModal = true">打开模态框</button>
+  <DrawerModal title="详细信息" v-model="showModal">
+    <div class="modal-content">
+      <h3>标题</h3>
+      <p>详细内容...</p>
+      <button @click="showModal = false">关闭</button>
+    </div>
+  </DrawerModal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const showModal = ref(false);
+</script>
+```
+
+### 在模态框中使用其他组件
+
+```vue
+<template>
+  <button @click="showModal = true">打开聊天列表</button>
+  <DrawerModal title="聊天列表" v-model="showModal">
+    <ChatList :items="chatItems" />
+  </DrawerModal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const showModal = ref(false);
+const chatItems = ref([
+  // ... 聊天项数据
+]);
+</script>
+```
+

package/docs/components/GridGroup.md

@@ -0,0 +1,101 @@
+# GridGroup 组件
+
+`GridGroup` 是一个网格组组件，用于展示图标网格列表。
+
+## 属性
+
+| 属性名        | 类型            | 默认值 | 描述                     |
+| ------------- | --------------- | ------ | ------------------------ |
+| `cuIconList`  | `GridGroupItem[]` | -    | 图标项数组               |
+| `gridCol`     | `number`        | `4`    | 网格列数                 |
+| `gridBorder`  | `boolean`       | `false` | 是否显示边框             |
+| `routeFn`     | `Function`      | -      | 自定义路由函数           |
+
+### GridGroupItem 类型
+
+| 属性名   | 类型     | 描述       |
+| -------- | -------- | ---------- |
+| `cuIcon` | `string` | 图标名称   |
+| `color`  | `string` | 图标颜色   |
+| `badge`  | `number` | 徽标数字   |
+| `name`   | `string` | 显示名称   |
+| `path`   | `string` | 路由路径   |
+| `link`   | `string` | 外部链接   |
+
+## 示例
+
+### 基本使用
+
+```vue
+<template>
+  <GridGroup :cuIconList="iconList" />
+</template>
+
+<script setup>
+const iconList = [
+  {
+    cuIcon: "cardboardfill",
+    color: "red",
+    badge: 120,
+    name: "VR",
+    link: "http://www.example.com/"
+  },
+  {
+    cuIcon: "recordfill",
+    color: "orange",
+    badge: 1,
+    name: "录像"
+  },
+  {
+    cuIcon: "picfill",
+    color: "yellow",
+    badge: 0,
+    name: "图像"
+  }
+];
+</script>
+```
+
+### 自定义列数
+
+```vue
+<template>
+  <GridGroup :cuIconList="iconList" :gridCol="3" />
+</template>
+```
+
+### 显示边框
+
+```vue
+<template>
+  <GridGroup :cuIconList="iconList" :gridBorder="true" />
+</template>
+```
+
+### 路由跳转
+
+```vue
+<template>
+  <GridGroup :cuIconList="iconList" />
+</template>
+
+<script setup>
+const iconList = [
+  {
+    cuIcon: "homefill",
+    color: "blue",
+    badge: 0,
+    name: "首页",
+    path: "/home"
+  },
+  {
+    cuIcon: "cart",
+    color: "red",
+    badge: 5,
+    name: "购物车",
+    path: "/cart"
+  }
+];
+</script>
+```
+