Theme Documentation

<script setup>
import { useConfirm } from '~/composables/useConfirm'
import Button from '~/components/theme/Button.vue'

const { confirm, info, success, warning, error } = useConfirm()

// 显示确认模态框
const showConfirm = () => {
  confirm('确认操作', '您确定要执行此操作吗？', async () => {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 1500))
    // 操作完成后自动关闭模态框
  })
}

// 显示信息模态框
const showInfo = () => {
  info('信息提示', '这是一条重要信息，请注意查看。')
}

// 显示成功模态框
const showSuccess = () => {
  success('操作成功', '您的操作已成功完成！')
}

// 显示警告模态框
const showWarning = () => {
  warning('警告提示', '此操作可能存在风险，请谨慎处理。')
}

// 显示错误模态框
const showError = () => {
  error('操作失败', '抱歉，您的操作未能完成。')
}
</script>

<template>
  <div class="space-y-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
      <Button @click="showConfirm" color="primary">确认模态框</Button>
      <Button @click="showInfo" color="info">信息模态框</Button>
      <Button @click="showSuccess" color="success">成功模态框</Button>
      <Button @click="showWarning" color="warning">警告模态框</Button>
      <Button @click="showError" color="error">错误模态框</Button>
    </div>
  </div>
</template>

<script setup>
import { useConfirm } from '~/composables/useConfirm'
import { ref } from 'vue'
import Button from '~/components/theme/Button.vue'

const { confirm } = useConfirm()
const result = ref('点击按钮查看结果')

// 带回调的确认模态框
const showConfirmWithCallback = () => {
  confirm('删除确认', '您确定要删除此项目吗？此操作无法撤销。', async () => {
    // 模拟异步删除操作
    await new Promise(resolve => setTimeout(resolve, 1500))
    result.value = '项目已删除！'
  })
}

// 用户取消不会执行回调
const showCancelOperation = () => {
  confirm('取消测试', '点击"取消"按钮不会执行回调函数。', async () => {
    result.value = '这段文字不会显示，除非点击了"确认"按钮'
  })
}
</script>

<template>
  <div class="space-y-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      <Button @click="showConfirmWithCallback" color="error">删除项目</Button>
      <Button @click="showCancelOperation" color="secondary">测试取消操作</Button>
    </div>
    <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
      <p>操作结果：{{ result }}</p>
    </div>
  </div>
</template>