| | |
| | | <script lang="ts" setup> |
| | | import { computed } from 'vue'; |
| | | |
| | | import { CountTo } from '@vben/common-ui'; |
| | | import { IconifyIcon } from '@vben/icons'; |
| | | |
| | | import { Col, Row } from 'ant-design-vue'; |
| | | |
| | | defineOptions({ name: 'DashboardAiInsights' }); |
| | | |
| | |
| | | {{ activeOrderCount }} 个工单可分析 |
| | | </span> |
| | | </div> |
| | | <Row :gutter="16"> |
| | | <Col v-for="cap in capabilities" :key="cap.key" :lg="6" :md="12" :sm="12" :xl="6" :xs="12" class="mb-3"> |
| | | <div class="grid grid-cols-2 gap-3 lg:grid-cols-4"> |
| | | <div |
| | | v-for="cap in capabilities" |
| | | :key="cap.key" |
| | | class="group flex cursor-pointer items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg" |
| | | @click="emit('navigate', cap.route)" |
| | | > |
| | | <div |
| | | class="group flex cursor-pointer items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg" |
| | | @click="emit('navigate', cap.route)" |
| | | class="flex size-10 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br shadow-md transition-transform duration-300 group-hover:scale-110" |
| | | :class="cap.gradient" |
| | | > |
| | | <div |
| | | class="flex size-10 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br shadow-md transition-transform duration-300 group-hover:scale-110" |
| | | :class="cap.gradient" |
| | | > |
| | | <IconifyIcon :icon="cap.icon" class="size-5 text-white" /> |
| | | </div> |
| | | <div class="min-w-0 flex-1"> |
| | | <div class="text-sm font-medium text-gray-800 dark:text-gray-100"> |
| | | {{ cap.title }} |
| | | </div> |
| | | <div class="text-xs text-gray-400">{{ cap.desc }}</div> |
| | | </div> |
| | | <IconifyIcon icon="lucide:chevron-right" class="size-4 text-gray-300 transition-transform duration-200 group-hover:translate-x-0.5" /> |
| | | <IconifyIcon :icon="cap.icon" class="size-5 text-white" /> |
| | | </div> |
| | | </Col> |
| | | </Row> |
| | | <div class="min-w-0 flex-1"> |
| | | <div class="text-sm font-medium text-gray-800 dark:text-gray-100"> |
| | | {{ cap.title }} |
| | | </div> |
| | | <div class="text-xs text-gray-400">{{ cap.desc }}</div> |
| | | </div> |
| | | <IconifyIcon icon="lucide:chevron-right" class="size-4 text-gray-300 transition-transform duration-200 group-hover:translate-x-0.5" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |