vue-color-ui 0.0.21 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +172 -0
  2. package/lib/style.css +1 -1
  3. package/lib/temp-color-ui.js +552 -524
  4. package/lib/temp-color-ui.umd.cjs +2 -2
  5. package/package.json +1 -1
  6. package/type/chat.d.ts +6 -1
  7. package/types/pkg/ChatList/ChatListItem.vue.d.ts +46 -11
package/README.md CHANGED
@@ -212,6 +212,178 @@ const handleItemClick = (item, index) => {
212
212
  | `badge` | `number` | 徽标数字（可选） |
213
213
  | `path` | `string` | 导航项对应的路由路径 |
214
214
 
215
+
216
+ ## ChatList组件使用文档
217
+
218
+ `ChatList` 组件用于展示一个聊天列表，其中每一项都是一个 `ChatListItem`。该组件支持显示用户信息、未读消息数、消息内容等，并允许自定义头像、标签和各种状态。
219
+
220
+ ### 属性
221
+
222
+ #### ChatList属性
223
+
224
+ | 属性名 | 类型 | 默认值 | 描述 |
225
+ | --- | --- | --- | --- |
226
+ | `items` | `ChatListItemOption[]` | `[]` | 聊天列表项的数组，每个项包含用户信息、时间、未读消息数等 |
227
+
228
+ #### ChatListItemOption属性
229
+
230
+ | 属性名 | 类型 | 默认值 | 描述 |
231
+ | --- | --- | --- | --- |
232
+ | `userinfo` | `object` | `{}` | 用户信息对象，包含头像、名称、标签等 |
233
+ | `userinfo.avatar` | `string` | `''` | 用户头像的URL |
234
+ | `userinfo.avatarShape` | `string` | `'circle'` | 头像形状，可选值：`'circle'`、`'square'` |
235
+ | `userinfo.name` | `string` | `''` | 用户名称 |
236
+ | `userinfo.tag` | `string` | `''` | 用户标签 |
237
+ | `userinfo.tagColor` | `string` | `'grey'` | 标签颜色 |
238
+ | `time` | `string` | `''` | 消息时间 |
239
+ | `roomId` | `string` | `''` | 聊天室ID |
240
+ | `roomName` | `string` | `''` | 聊天室名称 |
241
+ | `avatarName` | `string` | `'friendfill'` | 默认头像图标名称 |
242
+ | `avatarBg` | `string` | `'grey'` | 头像背景颜色 |
243
+ | `unread` | `string\|number` | `''` | 未读消息数 |
244
+ | `unreadColor` | `string` | `'red'` | 未读消息数标签颜色 |
245
+ | `badge` | `string` | `''` | 徽章内容 |
246
+ | `icon` | `string` | `''` | 图标名称 |
247
+ | `iconClass` | `string` | `''` | 图标样式类名 |
248
+ | `isDisconnected` | `boolean` | `false` | 是否断开连接 |
249
+ | `isCurrent` | `boolean` | `false` | 是否当前选中项 |
250
+ | `content` | `string` | `''` | 消息内容 |
251
+ | `event` | `Function` | `() => {}` | 点击事件回调函数 |
252
+
253
+ ### 示例
254
+
255
+ #### 示例 1: 基本使用
256
+
257
+ ```vue
258
+ <template>
259
+ <ChatList :items="chatItems" />
260
+ </template>
261
+
262
+ <script setup>
263
+ const chatItems = [
264
+ {
265
+ userinfo: {
266
+ avatar: "https://example.com/avatar1.jpg",
267
+ name: "用户1",
268
+ tag: "VIP",
269
+ tagColor: "red"
270
+ },
271
+ time: "10:30 AM",
272
+ unread: 2,
273
+ content: "Hello, how are you?",
274
+ event: (item) => console.log('Clicked on:', item)
275
+ },
276
+ {
277
+ userinfo: {
278
+ avatar: "https://example.com/avatar2.jpg",
279
+ name: "用户2"
280
+ },
281
+ isDisconnected: true,
282
+ content: "Disconnected"
283
+ }
284
+ ];
285
+ </script>
286
+ ```
287
+
288
+ #### 示例 2: 自定义头像和标签
289
+
290
+ ```vue
291
+ <template>
292
+ <ChatList :items="customChatItems" />
293
+ </template>
294
+
295
+ <script setup>
296
+ const customChatItems = [
297
+ {
298
+ userinfo: {
299
+ avatar: "https://example.com/avatar3.jpg",
300
+ avatarShape: "square",
301
+ name: "用户3",
302
+ tag: "New",
303
+ tagColor: "blue"
304
+ },
305
+ time: "Yesterday",
306
+ unread: 5,
307
+ unreadColor: "green",
308
+ content: "New message received"
309
+ }
310
+ ];
311
+ </script>
312
+ ```
313
+
314
+ #### 示例 3: 带徽章和图标的聊天项
315
+
316
+ ```vue
317
+ <template>
318
+ <ChatList :items="badgeChatItems" />
319
+ </template>
320
+
321
+ <script setup>
322
+ const badgeChatItems = [
323
+ {
324
+ userinfo: {
325
+ avatar: "https://example.com/avatar4.jpg",
326
+ name: "用户4"
327
+ },
328
+ badge: "Admin",
329
+ icon: "settings",
330
+ iconClass: "custom-icon-class",
331
+ content: "System settings updated"
332
+ }
333
+ ];
334
+ </script>
335
+ ```
336
+
337
+ #### 示例 4: 使用回调函数处理点击事件
338
+
339
+ ```vue
340
+ <template>
341
+ <ChatList :items="clickableChatItems" />
342
+ </template>
343
+
344
+ <script setup>
345
+ const clickableChatItems = [
346
+ {
347
+ userinfo: {
348
+ avatar: "https://example.com/avatar5.jpg",
349
+ name: "用户5"
350
+ },
351
+ content: "Click me!",
352
+ event: (item) => alert('Clicked on: ' + item.userinfo.name)
353
+ }
354
+ ];
355
+ </script>
356
+ ```
357
+
358
+ ### 属性类型定义
359
+
360
+ #### `ChatListItemOption`
361
+
362
+ `ChatListItemOption` 是一个对象类型，包含以下属性：
363
+
364
+ | 属性名 | 类型 | 描述 |
365
+ | --- | --- | --- |
366
+ | `userinfo` | `object` | 用户信息对象，包含头像、名称、标签等 |
367
+ | `userinfo.avatar` | `string` | 用户头像的URL |
368
+ | `userinfo.avatarShape` | `string` | 头像形状，可选值：`'circle'`、`'square'` |
369
+ | `userinfo.name` | `string` | 用户名称 |
370
+ | `userinfo.tag` | `string` | 用户标签 |
371
+ | `userinfo.tagColor` | `string` | 标签颜色 |
372
+ | `time` | `string` | 消息时间 |
373
+ | `roomId` | `string` | 聊天室ID |
374
+ | `roomName` | `string` | 聊天室名称 |
375
+ | `avatarName` | `string` | 默认头像图标名称 |
376
+ | `avatarBg` | `string` | 头像背景颜色 |
377
+ | `unread` | `string\|number` | 未读消息数 |
378
+ | `unreadColor` | `string` | 未读消息数标签颜色 |
379
+ | `badge` | `string` | 徽章内容 |
380
+ | `icon` | `string` | 图标名称 |
381
+ | `iconClass` | `string` | 图标样式类名 |
382
+ | `isDisconnected` | `boolean` | 是否断开连接 |
383
+ | `isCurrent` | `boolean` | 是否当前选中项 |
384
+ | `content` | `string` | 消息内容 |
385
+ | `event` | `Function` | 点击事件回调函数 |
386
+
215
387
  ## TTag 组件使用文档
216
388
 
217
389
  `TTag` 是一个用于显示标签的 Vue 组件，支持多种样式和自定义内容。
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .nav-list{display:flex;flex-wrap:wrap;padding:0 20px;justify-content:space-between}.nav-li{padding:15px;border-radius:6px;width:45%;margin:0 2.5% 20px;background-image:url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);background-size:cover;background-position:center;position:relative;z-index:1}.nav-li:after{content:"";position:absolute;z-index:-1;background-color:inherit;width:100%;height:100%;left:0;bottom:-10%;border-radius:5px;opacity:.2;transform:scale(.9)}.nav-li.cur{color:#fff;background:#5eb95e;box-shadow:2px 2px 3px #5eb95e66}.nav-title{font-size:16px;font-weight:300}.nav-title:first-letter{font-size:20px;margin-right:2px}.nav-name{font-size:14px;text-transform:Capitalize;margin-top:10px;position:relative}.nav-name:before{content:"";position:absolute;display:block;width:20px;height:3px;background:#fff;bottom:0;right:0;opacity:.5}.nav-name:after{content:"";position:absolute;display:block;width:50px;height:1px;background:#fff;bottom:0;right:20px;opacity:.3}.nav-name:first-letter{font-weight:700;font-size:18px;margin-right:1px}.nav-li text{position:absolute;right:15px;top:15px;font-size:26px;width:30px;height:30px;text-align:center;line-height:30px}.text-light{font-weight:300}@keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}@-webkit-keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}.cu-card-cover[data-v-bbdb83ff]{width:100%}.cu-card .content img[data-v-bbdb83ff]{width:33%;object-fit:cover}.cu-card-cover{width:100%}.cu-card .content img{width:33%;object-fit:cover}.emoji-panel[data-v-64a06dd5]{position:absolute;bottom:50px;background-color:#fff;border:1px solid #ccc;padding:10px;display:flex;flex-wrap:wrap;z-index:1000}.emoji-panel span[data-v-64a06dd5]{cursor:pointer;font-size:24px;margin:5px}.tab-content{padding:10px 16px;background:#fff}
1
+ .nav-list{display:flex;flex-wrap:wrap;padding:0 20px;justify-content:space-between}.nav-li{padding:15px;border-radius:6px;width:45%;margin:0 2.5% 20px;background-image:url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);background-size:cover;background-position:center;position:relative;z-index:1}.nav-li:after{content:"";position:absolute;z-index:-1;background-color:inherit;width:100%;height:100%;left:0;bottom:-10%;border-radius:5px;opacity:.2;transform:scale(.9)}.nav-li.cur{color:#fff;background:#5eb95e;box-shadow:2px 2px 3px #5eb95e66}.nav-title{font-size:16px;font-weight:300}.nav-title:first-letter{font-size:20px;margin-right:2px}.nav-name{font-size:14px;text-transform:Capitalize;margin-top:10px;position:relative}.nav-name:before{content:"";position:absolute;display:block;width:20px;height:3px;background:#fff;bottom:0;right:0;opacity:.5}.nav-name:after{content:"";position:absolute;display:block;width:50px;height:1px;background:#fff;bottom:0;right:20px;opacity:.3}.nav-name:first-letter{font-weight:700;font-size:18px;margin-right:1px}.nav-li text{position:absolute;right:15px;top:15px;font-size:26px;width:30px;height:30px;text-align:center;line-height:30px}.text-light{font-weight:300}@keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}@-webkit-keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}.cu-card-cover[data-v-bbdb83ff]{width:100%}.cu-card .content img[data-v-bbdb83ff]{width:33%;object-fit:cover}.cu-card-cover{width:100%}.cu-card .content img{width:33%;object-fit:cover}.emoji-panel[data-v-6780e869]{position:absolute;bottom:50px;background-color:#fff;border:1px solid #ccc;padding:10px;display:flex;flex-wrap:wrap;z-index:1000}.emoji-panel span[data-v-6780e869]{cursor:pointer;font-size:24px;margin:5px}input[data-v-6780e869]:focus{outline:none}.tab-content{padding:10px 16px;background:#fff}