WCS 分片上传 Demo

演示使用 WCS 分片上传功能上传文件

点击选择文件或拖拽文件到此处

支持图片、视频、音频文件

使用说明

  • 支持图片、视频、音频文件上传
  • 大文件会自动使用分片上传，提升上传速度和稳定性
  • 上传过程中可以查看实时进度
  • 上传完成后会返回文件的下载链接（已转换为 https）
  • 需要先登录才能使用上传功能

语言切换

Button 按钮

Dialog 对话框

Select 选择器

当前选择：option1

Popover 气泡卡片

Input 输入框

输入内容：

Textarea 多行输入

输入内容：

useCopyText 复制功能测试

预设文本测试：

• 复制后可以在其他地方粘贴（Ctrl+V 或 Cmd+V）验证

• 方式1测试: useCopyText(text)

• 方式2测试: useCopyText({ el: element, text: text })

图片裁剪 - 移动模式对比

Bounded 模式（图片必须在容器内，默认）

Infinite 模式（不做任何限制，可以随意拖动）

1. 加载成功（默认）

加载成功的图片

2. 加载失败

加载失败的图片

3. 自定义加载中（图片Cover）

自定义加载中...

自定义加载中的图片

4. 自定义加载失败

自定义加载失败的图片

5. 组合示例（自定义加载中 + 自定义加载失败）

加载中...

组合示例图片

6. 加载中（点击按钮触发加载过程）

点击"触发加载中状态"按钮查看加载动画

提示：点击按钮后会先显示加载状态，2秒后图片加载完成

1. 基础用法

已选择: 0 项 -

2. 限制最大选择数量（最多3项）

已选择: 0 / 3 项

3. 自定义样式（团队成员选择器）

已选择成员: 无

组件特性：

  • 支持多选功能，v-model 双向绑定
  • 可限制最大选择数量（max-selections）
  • 支持自定义下拉项样式（#option 插槽）
  • 支持自定义标签样式（#tag 插槽）
  • 响应式设计，兼容各浏览器
  • 优雅的动画效果和交互

单选模式 (SmartAction)

选择后自动关闭弹窗，支持禁用选项

已选择: 无

多选 - Count 模式

显示 "已选择 N 项"，支持最大数量限制

已选择: 无 (最多5项)

多选 - First+Count 模式

显示 "第一项 +N"，适合空间有限的场景

已选择: 无 (最多3项)

多选 - Tags 模式

显示内联标签，每个标签可单独删除，支持最小和最大数量限制

已选择: 无 (最少1项，最多3项)

默认选中值

通过设置 v-model 的初始值实现默认选中

单选默认选中 "动作2"

当前值: action2

多选默认选中 "动作1" 和 "动作3"

当前值: action1, action3

外部修改选中值

通过外部按钮控制组件的选中状态，展示 v-model 的双向绑定

单选外部控制

当前值: action1

多选外部控制

当前值: action2

📖 组件特性和用法：

  • 单选模式 (SmartAction)：选择后自动关闭弹窗，modelValue 类型为 string | number | undefined
  • 多选模式 (SmartActionMultiple)：选择后保持弹窗打开，modelValue 类型为 (string | number)[]
  • 三种显示模式：
    • count - 显示 "已选择 N 项"
    • first-count - 显示 "第一项 +N"
    • tags - 显示内联标签，每个标签可单独删除
  • 最小/最大限制：
    • 达到 max 时，未选中的选项自动禁用
    • 达到 min 时，已选中的选项无法取消
  • 类型安全：单选和多选组件类型完全独立，TypeScript 自动推导，无需手动断言
  • 逻辑复用：SmartActionItem 同时支持单选和多选模式，自动适配父组件上下文

<!-- 单选 -->

<SmartAction v-model="value" placeholder="请选择">

<SmartActionItem label="选项1" value="1" />

</SmartAction>

<!-- 多选 - Tags 模式 -->

<SmartActionMultiple

v-model="values"

display-mode="tags"

:min="1"

:max="3"

>

<SmartActionItem label="选项1" value="1" />

</SmartActionMultiple>

Drawer 抽屉

FullLoader 全屏加载

InlineLoader 行内加载

v-inline-loader 指令

Confirm 确认弹窗

ImagePreview 图片预览

Activity Dialog 活动弹窗

User Feedback 用户反馈

Invitation Dialog 邀请弹窗

Subscription Dialog 订阅弹窗

Notify Quick Panel 通知快捷面板

Notify Full List 通知完整列表

基础用法

默认配置：蓝紫色渐变波纹，响应式高度，自适应柱数

配置示例

根据不同的 bar 宽度、颜色和圆角配置

蓝色 (细 bar)

波纹色: bg-gray-300
进度色: bg-blue-500
柱宽: 4px | 柱间: 2px | 圆角: 10px

橙色 (粗 bar)

波纹色: bg-orange-100
进度色: bg-orange-500
柱宽: 4px | 柱间: 1px | 圆角: 2px

绿色 (超细 bar)

波纹色: bg-green-200
进度色: bg-green-500
柱宽: 1px | 柱间: 1px | 圆角: 1px

紫色 (中等 bar)

波纹色: bg-purple-200
进度色: bg-purple-400
柱宽: 3px | 柱间: 2px | 圆角: 1px

蓝绿色 (有背景)

波纹色: bg-teal-200
背景色: bg-teal-50
进度背景: bg-teal-500
进度色: bg-teal-400
柱宽: 2px | 柱间: 1px | 圆角: 1px

响应式布局（Container Queries）

组件自动根据容器宽度调整布局。≥448px 时为横向布局，448px 以下时为纵向布局

宽容器示例（横向布局）

窄容器示例（纵向布局 - 448px 以下）

📖 组件特性和用法：

  • 双层波形架构：静态波形和进度波形，通过容器宽度裁剪实现进度显示
  • 自动计算 bar 数量：根据容器宽度和 barWidth 自动计算，响应容器尺寸变化
  • 骨架屏：波形未准备好时显示 Skeleton 组件，提升用户体验
  • Container Queries 响应式布局：使用 Tailwind v4 Container Queries 实现智能响应
    • 容器宽度 ≥448px：横向布局，波形和时间显示在同一行
    • 容器宽度 448px 以下：纵向布局，波形和时间显示上下排列
    • 可通过 barContainerClass 配置项强制指定布局方向
  • 完全可配置：
    • waveColor - 静态波形颜色 (Tailwind 类名)
    • progressColor - 进度波形颜色 (Tailwind 类名)
    • backgroundColor - 容器背景色 (Tailwind 类名)
    • progressBgColor - 进度波形容器背景色 (Tailwind 类名)
    • barWidth - Bar 宽度 (px)，bar 数量会自动计算
    • barGap - Bar 之间的间距 (px)
    • barRadius - Bar 圆角半径 (px)
  • 颜色准确：完全使用 Tailwind CSS，无 CSS 混合模式失真
  • 加载状态：显示 InlineLoader 加载动画，初始加载和缓冲时显示

<!-- 基础使用 -->

<AudioPlayer

url="https://example.com/audio.wav"

:config="{...}"

/>

基础动画示例（默认占位）

状态: 加载中...

带控制面板

SVG 渲染

Canvas 渲染

自定义占位示例

加载中...

图标占位

渐变占位

动画加载中

动画占位

Lottie 动画使用说明

• 支持 SVG、Canvas、HTML 三种渲染方式

• 可控制播放、暂停、速度、方向等

• 支持本地文件和在线动画链接

• 支持自定义占位内容：使用 #placeholder slot

• 动画加载时显示占位，加载完成后平滑过渡到动画

• 使用 body-class 属性控制容器样式

• 基于 lottie-web 库实现

• 动画文件可通过 Adobe After Effects + Bodymovin 导出

代码示例： 

<LottiePlayer
  path="/assets/lottie/animation.json"
  body-class="w-32 h-32"
  :show-controls="true"
>
  <template #placeholder>
    <div class="loading-content">
      <Icon name="mdi:loading" class="animate-spin" />
      <span>加载中...</span>
    </div>
  </template>
</LottiePlayer>
基础用法
按钮内嵌 icon
状态指示 icon
评分/收藏 icon
交互/切换 icon
列表/导航 icon

一、组件调用 (RedDotIndicator)

触发方式 (Trigger)

支持 hover（鼠标悬停/触摸）、click（点击）、none（不触发）三种方式
hover
click
none
handler

位置与尺寸

位置 (Position)
尺寸 (Size)

高级功能

偏移值 (Offset)
as-child 模式
自定义红点 Slot

二、指令调用 (v-red-dot)

使用 v-red-dot 指令可以更简洁地为元素添加红点，支持字符串和对象两种用法
字符串用法
对象用法

三、函数式清除 (useGlobalRedDot)

通过 useGlobalRedDot() 获取红点管理器，可以编程式地设置、获取、清除红点
单个清除 (removeRedDot)
设置红点 (setRedDot)
批量清除（根据前缀）(getRedDotsByPrefix + removeRedDot)
当前前缀红点数量: 0
清空所有红点 (clearRedDots)
当前红点总数: 0
其他方法
getRedDot(key) : 获取红点状态 (false)
hasRedDot(key) : 检查是否存在 (false)
getAllRedDots() : 获取所有红点 key 列表 (0 个)
hasAnyRedDot : 是否有任何红点 (true)
重置演示

场景1: Dialog 挂载

展示如何挂载一个对话框组件，使用标准的 props 传递。关闭对话框后会自动卸载。

场景2: 普通组件挂载

展示如何挂载一个普通组件（非对话框），可以挂载到指定的容器中。

场景3: 自动监听销毁

展示 autoUnmount: true 的使用。 组件会监听 isOpen 状态变化，当状态变为 false 时自动卸载。

场景4: 完全手动控制销毁

展示手动调用 unmount() 方法， 外部完全控制组件的生命周期。

场景5: defineModel 双向绑定

演示 defineModel 与标准 v-model 输入框的联动。 父组件的输入框是为了方面初始化和演示，他的更新只会影响初始化挂载组件的那一刻，后续的更新不会影响挂载组件。

父级状态：来自父组件的初始内容

子组件输入框中每次修改都会触发 update:modelValue，从而同步父级状态。

提示：通过 mountComponent 传入的 props 仅在初始化时生效——它们不会像父子组件那样保持响应式。 这受限于createApp的实现，无法用正常的方式像父子组件那样保持响应式。

提示：打开浏览器控制台可以查看组件的生命周期日志。