geo/apps/admin-web/src/views/CustomGenerateView.vue

<script setup lang="ts">
import {
  ThunderboltOutlined,
  ClockCircleOutlined,
} from "@ant-design/icons-vue";
import { ref } from "vue";
import { useI18n } from "vue-i18n";

import CustomArticleTab from "@/components/CustomArticleTab.vue";
import InstantTaskTab from "@/components/InstantTaskTab.vue";
import PromptRuleTab from "@/components/PromptRuleTab.vue";
import ScheduleTaskTab from "@/components/ScheduleTaskTab.vue";
import InstantGenerateModal from "@/components/InstantGenerateModal.vue";
import ScheduleTaskModal from "@/components/ScheduleTaskModal.vue";

const { t } = useI18n();

const activeTab = ref("articles");
const instantModalOpen = ref(false);
const scheduleModalOpen = ref(false);

function openInstantModal(): void {
  instantModalOpen.value = true;
}

function openScheduleModal(): void {
  scheduleModalOpen.value = true;
}
</script>

<template>
  <div class="custom-view">

    <section class="custom-view__cards">
      <div class="custom-view__card custom-view__card--instant" @click="openInstantModal">
        <div class="custom-view__card-icon custom-view__card-icon--instant">
          <ThunderboltOutlined />
        </div>
        <div>
          <h4>{{ t("custom.cards.instantTitle") }}</h4>
          <p>{{ t("custom.cards.instantDesc") }}</p>
        </div>
      </div>
      <div class="custom-view__card custom-view__card--schedule" @click="openScheduleModal">
        <div class="custom-view__card-icon custom-view__card-icon--schedule">
          <ClockCircleOutlined />
        </div>
        <div>
          <h4>{{ t("custom.cards.scheduleTitle") }}</h4>
          <p>{{ t("custom.cards.scheduleDesc") }}</p>
        </div>
      </div>
    </section>

    <section class="custom-view__tabs-card">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="articles" :tab="t('custom.tabs.articles')">
          <CustomArticleTab />
        </a-tab-pane>
        <a-tab-pane key="instantTasks" :tab="t('custom.tabs.instantTasks')">
          <InstantTaskTab />
        </a-tab-pane>
        <a-tab-pane key="scheduleTasks" :tab="t('custom.tabs.scheduleTasks')">
          <ScheduleTaskTab />
        </a-tab-pane>
        <a-tab-pane key="promptRules" :tab="t('custom.tabs.promptRules')">
          <PromptRuleTab />
        </a-tab-pane>
      </a-tabs>
    </section>

    <InstantGenerateModal v-model:open="instantModalOpen" />
    <ScheduleTaskModal v-model:open="scheduleModalOpen" />
  </div>
</template>

<style scoped>
.custom-view {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.custom-view__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.custom-view__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.custom-view__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.custom-view__card h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #141414;
}

.custom-view__card p {
  margin: 0;
  font-size: 13px;
  color: #8c8c8c;
}

.custom-view__card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.custom-view__card-icon--instant {
  background: #fff7e6;
  color: #fa8c16;
}

.custom-view__card-icon--schedule {
  background: #e6f7ff;
  color: #1677ff;
}

.custom-view__tabs-card {
  padding: 24px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
}

@media (max-width: 720px) {
  .custom-view__cards {
    grid-template-columns: 1fr;
  }
}
</style>