6 天以前 452e5c5e9a340367c8fdb14b0bdecc96dcb29491
src/views/dashboard/analytics/modules/ai-insights.vue
@@ -1,10 +1,5 @@
<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' });
@@ -71,28 +66,28 @@
        {{ 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>