<template>
  <div style="padding: 24px">
    <a-typography-title :level="3" style="margin: 0 0 12px 0">
      Ant Design Vue Demo（front-process）
    </a-typography-title>

    <a-alert
      message="该页面由 front-system 通过 Wujie 挂载展示"
      type="success"
      show-icon
      style="margin-bottom: 16px"
    />

    <a-space>
      <a-button type="primary" @click="onClick">AntD 按钮</a-button>
      <a-tag color="blue">Vue3 + Vite</a-tag>
      <a-tag color="green">Ant Design Vue</a-tag>
    </a-space>

    <a-divider />

    <a-card title="示例表格" :bordered="false">
      <a-table :columns="columns" :data-source="data" :pagination="false" row-key="id" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import type { TableColumnsType } from 'ant-design-vue';
import { message } from 'ant-design-vue';

type Row = { id: number; name: string; status: string };

const columns: TableColumnsType<Row> = [
  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '状态', dataIndex: 'status', key: 'status', width: 120 }
];

const data: Row[] = [
  { id: 1, name: '流程A', status: '启用' },
  { id: 2, name: '流程B', status: '停用' }
];

function onClick() {
  message.success('Ant Design Vue 组件工作正常');
}
</script>

