# dynamic-island

**Repository Path**: tender_only/dynamic-island

## Basic Information

- **Project Name**: dynamic-island
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-28
- **Last Updated**: 2026-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 灵动岛 (Dynamic Island)
前端通知组件 | AI 工程化开发

一个轻量灵巧的 Vue3 弹窗通知组件，灵感源自灵动岛设计，支持多种通知类型、动画效果、拖拽定位和动态组件嵌入，零依赖、开箱即用。

<p align="center">
  <img src="https://img.shields.io/badge/Code%2099%25-AI%20Engineered-blue" alt="AI" />
  <img src="https://img.shields.io/badge/Powered%20by-TRAE CN-brightgreen" style="margin-left: 10px;" alt="TRAE" />
  <img src="https://img.shields.io/badge/Vue3-brightgreen" style="margin-left: 10px;" alt="VUE" />
  <img src="https://img.shields.io/badge/Typescript-brightgreen" style="margin-left: 10px;" alt="Typescript" />
</p>

## 演示截图
（部分截图，更多请查看：[在线示例](http://115.190.224.240:5173)）
<p align="center">
  <img src="./src/assets/20260329-170748.png" alt="灵动岛通知组件" style="max-width: 80%; border-radius: 8px; margin: 10px 0;" />
  <img src="./src/assets/20260329-170824.png" alt="多种通知类型" style="max-width: 80%; border-radius: 8px; margin: 10px 0;" />
  <img src="./src/assets/20260329-170855.png" alt="拖拽功能" style="max-width: 80%; border-radius: 8px; margin: 10px 0;" />
  <img src="./src/assets/20260329-170919.png" alt="动态组件嵌入" style="max-width: 80%; border-radius: 8px; margin: 10px 0;" />
  <img src="./src/assets/20260329-171421.png" alt="自定义样式" style="max-width: 80%; border-radius: 8px; margin: 10px 0;" />
</p>

## 功能特性
- 🎨 灵动岛风格 UI 设计
- 🚀 全局通知系统，支持队列管理
- 🎯 多种通知类型（default、success、error、warning、info）
- 📦 支持嵌入动态组件
- 🎭 多种动画效果（fade、slide、zoom、bounce）
- 🔄 手动关闭、自动关闭和常驻模式
- 🖱️ 拖拽功能，localStorage 记忆位置，位置持久化
- 🔊 通知声音
- 🎨 自定义样式支持
- 🎯 Vue3 + TypeScript，原生CSS无额外依赖

> 💡 后续还会优化和功能更新...

## 安装

```bash
npm install vue3-dynamic-island
```

## 使用方法

### 全局安装

在 App.vue 中引入组件，然后使用Island调用API显示通知(参考下边的基本使用和API示例)
```vue
<script setup>
import { DynamicIsland, Island } from 'vue3-dynamic-island'
</script>

<template>
  <div id="app">
    <!-- 必须添加此组件才能显示通知 -->
    <DynamicIsland />
    <router-view />
  </div>
</template>
```

### 基本使用
```vue
<script setup>
// 只需要引入 Island
import { Island } from 'vue3-dynamic-island'

const showNotification = () => {
  Island.success('提示', '操作完成！')
}
</script>

<template>
  <div>
    <button @click="showNotification">显示通知</button>
  </div>
</template>
```

## API
### Island

直接导入使用的简化 API：

#### show(options)
```typescript
Island.show({
  type: 'success',           // 'default' | 'success' | 'error' | 'warning' | 'info'
  title: '通知标题',
  subtitle: '可选副标题',
  icon: MyIconComponent,      // 可选自定义图标
  showIcon: true,             // 显示/隐藏图标
  showClose: true,            // 显示/隐藏关闭按钮
  duration: 3000,             // 自动关闭时长（毫秒）
  persistent: false,           // 不自动关闭
  animation: 'slide',          // 'fade' | 'slide' | 'zoom' | 'bounce'
  progress: 50,               // 进度值（0-100）
  showProgress: false,         // 显示进度条
  dynamicComponent: {          // 嵌入自定义组件
    component: MyComponent,
    props: {}
  },
  backgroundColor: '#ff0000',  // 自定义背景颜色
  textColor: '#ffffff',        // 自定义文字颜色
  soundEnabled: true,          // 启用声音
  memPosition: false,         // 记忆位置
  onClick: () => {},          // 点击回调
  onClose: () => {}           // 关闭回调
})
```

#### success(title, subtitle, options)

```typescript
Island.success('成功', '操作完成！')
```

#### error(title, subtitle, options)

```typescript
Island.error('错误', '操作失败！')
```

#### warning(title, subtitle, options)

```typescript
Island.warning('警告', '请检查您的输入')
```

#### info(title, subtitle, options)

```typescript
Island.info('信息', '您有 3 条新消息')
```

#### close(id)

通过 ID 关闭特定通知。

```typescript
const notificationId = Island.show({ title: '提示' })
Island.close(notificationId)
```

#### closeAll()

关闭所有通知。

```typescript
Island.closeAll()
```

#### clearQueue()

清空通知队列。

```typescript
Island.clearQueue()
```

## 示例

### 嵌入动态组件

```vue
<script setup>
import { Island } from 'vue3-dynamic-island'
import MyForm from './MyForm.vue'

const showForm = () => {
  Island.show({
    type: 'info',
    title: '用户表单',
    subtitle: '请填写您的信息',
    persistent: true,
    dynamicComponent: {
      component: MyForm,
      props: {
        onSubmit: (data) => {
          console.log('表单提交:', data)
          Island.closeAll()
        }
      }
    }
  })
}
</script>
```

### 自定义样式

```typescript
Island.show({
  title: '自定义样式',
  subtitle: '渐变背景',
  backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  textColor: '#ffffff'
})
```

### 进度条

```typescript
const notificationId = Island.show({
  type: 'info',
  title: '处理中',
  subtitle: '请稍候...',
  showProgress: true,
  progress: 0,
  persistent: true
})

// 模拟进度
let progress = 0
const interval = setInterval(() => {
  progress += 10
  Island.updateProgress(notificationId, progress)
  
  if (progress >= 100) {
    clearInterval(interval)
    Island.close(notificationId)
    Island.success('完成', '操作已完成！')
  }
}, 500)
```

## 拖拽功能
- 点击并拖拽通知的头部区域
- 位置会自动保存到 localStorage
- 组件会保持在视口边界内
- 距离屏幕边缘有 12px 的安全边距

## 浏览器支持

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 许可证

MIT

## 作者

piapia_

## 致谢

本项目是作者在 Trae CN AI 支持下共同完成。