AppCard 应用卡片组件

用于展示应用列表，包含图标、名称、描述、状态等信息的卡片组件。

基础用法

🤖

已发布

智能助手

AI 智能对话助手应用

创建者: 张三2024-01-15

<template>
  <x-app-card
    :id="'app-001'"
    :name="'智能助手'"
    :description="'AI 智能对话助手应用'"
    :icon="'🤖'"
    :icon-bg-color="'#409eff'"
    :status="'published'"
    :creator="'张三'"
    :create-time="'2024-01-15'"
    @click="handleClick"
    @edit="handleEdit"
    @delete="handleDelete"
    @publish="handlePublish"
  />
</template>

<script setup>
import { AppCard } from '@xto/business'

const handleClick = (id) => {
  console.log('点击应用:', id)
}

const handleEdit = (id) => {
  console.log('编辑应用:', id)
}

const handleDelete = (id) => {
  console.log('删除应用:', id)
}

const handlePublish = (id) => {
  console.log('发布应用:', id)
}
</script>

应用状态

支持三种状态：已发布、草稿、已归档。

📱

已发布

已发布应用

📝

草稿

草稿应用

📦

已归档

已归档应用

<template>
  <div style="display: flex; gap: 16px;">
    <!-- 已发布 -->
    <x-app-card :name="'已发布应用'" :status="'published'" />

    <!-- 草稿 -->
    <x-app-card :name="'草稿应用'" :status="'draft'" />

    <!-- 已归档 -->
    <x-app-card :name="'已归档应用'" :status="'archived'" />
  </div>
</template>

禁用状态

📱

草稿

禁用应用

<template>
  <x-app-card :name="'禁用应用'" :disabled="true" />
</template>

API

Props

属性	说明	类型	默认值
id	应用 ID	string	''
name	应用名称	string	''
description	应用描述	string	''
icon	应用图标（emoji 或图片 URL）	string	'📱'
iconBgColor	应用图标背景色	string	'#409eff'
status	应用状态	'published' | 'draft' | 'archived'	'draft'
creator	创建者	string	''
createTime	创建时间	string	''
category	应用分类	string	''
disabled	是否禁用	boolean	false

Events

事件名	说明
click	点击卡片时触发
edit	点击编辑按钮时触发
delete	点击删除按钮时触发
publish	点击发布按钮时触发（仅草稿状态显示）