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

<script setup lang="ts">
import {
  ExperimentOutlined,
  FileTextOutlined,
  NodeIndexOutlined,
  RocketOutlined,
  TrophyOutlined,
  FileDoneOutlined,
  CloudUploadOutlined,
  BlockOutlined,
  AppstoreOutlined,
  ArrowRightOutlined,
  PlaySquareOutlined,
} from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import type { RecentArticle, TemplateCard } from "@geo/shared-types";
import { message } from "ant-design-vue";
import type { TableColumnsType } from "ant-design-vue";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

import ArticleActionGroup from "@/components/ArticleActionGroup.vue";
import ArticleGenerateStatus from "@/components/ArticleGenerateStatus.vue";
import ArticlePublishStatus from "@/components/ArticlePublishStatus.vue";
import ArticleSourceMeta from "@/components/ArticleSourceMeta.vue";
import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
import PublishArticleModal from "@/components/PublishArticleModal.vue";
import { articlesApi, workspaceApi } from "@/lib/api";
import { getTemplateMeta } from "@/lib/display";
import { buildArticleClipboardContent, resolveArticleActionState } from "@/lib/article-list-actions";
import { formatError } from "@/lib/errors";

const queryClient = useQueryClient();
const router = useRouter();
const { t } = useI18n();
const selectedArticleId = ref<number | null>(null);
const articleDrawerOpen = ref(false);
const selectedPublishArticleId = ref<number | null>(null);
const publishModalOpen = ref(false);

const overviewQuery = useQuery({
  queryKey: ["workspace", "overview"],
  queryFn: () => workspaceApi.overview(),
});
const recentArticlesQuery = useQuery({
  queryKey: ["workspace", "recent-articles"],
  queryFn: () => workspaceApi.recentArticles(),
});
const templateCardsQuery = useQuery({
  queryKey: ["workspace", "template-cards"],
  queryFn: () => workspaceApi.templateCards(),
});

const statIcons = [
  FileDoneOutlined,
  CloudUploadOutlined,
  BlockOutlined,
  PlaySquareOutlined,
];

const statItems = computed(() => {
  const overview = overviewQuery.data.value;
  return [
    { label: t("workspace.metrics.articles"), value: overview?.article_count ?? 0, icon: statIcons[0] },
    { label: t("workspace.metrics.published"), value: overview?.published_count ?? 0, icon: statIcons[1] },
    { label: t("workspace.metrics.brands"), value: overview?.brand_count ?? 0, icon: statIcons[2] },
    { label: t("workspace.metrics.platforms"), value: overview?.supported_platform_count ?? 0, icon: statIcons[3] },
  ];
});

const articleColumns = computed<TableColumnsType<RecentArticle>>(() => [
  {
    title: t("common.title"),
    dataIndex: "title",
    key: "title",
  },
  {
    title: t("common.generateStatus"),
    dataIndex: "generate_status",
    key: "generate_status",
    width: 128,
  },
  {
    title: t("common.publishStatus"),
    dataIndex: "publish_status",
    key: "publish_status",
    width: 148,
  },
  {
    title: t("common.wordCount"),
    dataIndex: "word_count",
    key: "word_count",
    width: 100,
  },
  {
    title: t("common.actions"),
    key: "actions",
    width: 188,
    align: "right",
  },
]);

const deleteMutation = useMutation({
  mutationFn: (articleId: number) => articlesApi.remove(articleId),
  onSuccess: async () => {
    message.success(t("templates.list.deleteSuccess"));
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["workspace"] }),
      queryClient.invalidateQueries({ queryKey: ["articles"] }),
    ]);
  },
  onError: (error) => {
    message.error(formatError(error) || t("templates.list.deleteError"));
  },
});

// Helper for the gradient classes based on index/type
function getTemplateCardClass(idx: number): string {
  const classes = ["card-yellow", "card-blue-light", "card-blue-deep", "card-grey"];
  return classes[idx % classes.length];
}

function getTemplateBgColorClass(idx: number): string {
  const classes = ["bg-yellow", "bg-blue-light", "bg-blue-deep", "bg-grey"];
  return classes[idx % classes.length];
}

const templateIconMap: Record<string, unknown> = {
  top_x_article: TrophyOutlined,
  product_review: ExperimentOutlined,
  research_report: FileTextOutlined,
  brand_search_expansion: NodeIndexOutlined,
};

function resolveTemplateIcon(template: TemplateCard): unknown {
  return templateIconMap[template.template_key] ?? RocketOutlined;
}

function openTemplate(template: TemplateCard): void {
  void router.push({
    path: "/articles/wizard",
    query: { template_id: String(template.id) },
  });
}

function openArticle(articleId: number): void {
  selectedArticleId.value = articleId;
  articleDrawerOpen.value = true;
}

function openPublish(articleId: number): void {
  selectedPublishArticleId.value = articleId;
  publishModalOpen.value = true;
}

async function openEditor(article: RecentArticle): Promise<void> {
  try {
    const detail = await articlesApi.detail(article.id);

    if (detail.generate_status !== "completed" && detail.source_type === "template" && detail.template_id) {
      await router.push({
        name: "article-wizard",
        query: {
          template_id: String(detail.template_id),
          article_id: String(detail.id),
        },
      });
      return;
    }

    await router.push({ name: "article-editor", params: { id: String(detail.id) } });
  } catch (error) {
    message.error(formatError(error) || t("common.noData"));
  }
}

async function copyArticle(articleId: number): Promise<void> {
  try {
    const detail = await articlesApi.detail(articleId);
    const content = buildArticleClipboardContent(detail);

    if (!content) {
      message.warning(t("common.noData"));
      return;
    }

    await navigator.clipboard.writeText(content);
    message.success(t("common.copySuccess"));
  } catch (error) {
    message.error(formatError(error) || t("common.noData"));
  }
}

async function handleDelete(articleId: number): Promise<void> {
  await deleteMutation.mutateAsync(articleId);
}

function refreshDashboard(): void {
  void Promise.all([
    overviewQuery.refetch(),
    recentArticlesQuery.refetch(),
    templateCardsQuery.refetch(),
  ]);
}
</script>

<template>
  <div class="workspace-view">
    <!-- Top Grid Layout (Templates / Overview) -->
    <div class="workspace-header-grid">
      <!-- Templates Section -->
      <section class="panel panel-templates">
        <h3 class="panel-title">{{ t("workspace.sections.templates") }}</h3>
        
        <div class="template-cards-container" v-if="templateCardsQuery.data.value?.length">
          <div 
            v-for="(template, idx) in templateCardsQuery.data.value" 
            :key="template.id"
            class="template-card"
            :class="getTemplateCardClass(idx)"
            @click="openTemplate(template)"
          >
            <div class="template-icon-wrapper" :class="getTemplateBgColorClass(idx)">
              <component :is="resolveTemplateIcon(template)" class="template-icon" />
            </div>
            <h4 class="template-title">{{ template.template_name }}</h4>
            <p class="template-desc">{{ getTemplateMeta(template.template_key).helper }}</p>
            <div class="template-action">
              <span>立即生成</span>
              <ArrowRightOutlined class="template-arrow" />
            </div>
          </div>

          <!-- Pending Expansion Card (mocked to fill 4 blocks if needed, logic dynamic based on API but design mockup has a fixed 4th card) -->
          <div v-if="templateCardsQuery.data.value.length < 4" class="template-card card-grey dummy-card">
            <div class="template-icon-wrapper bg-grey">
              <AppstoreOutlined class="template-icon" />
            </div>
            <h4 class="template-title">模板持续扩展中</h4>
            <p class="template-desc">敬请期待...</p>
          </div>
        </div>
        <a-empty v-else :description="t('workspace.emptyTemplates')" />
      </section>

      <!-- Overview Data Section -->
      <section class="panel panel-overview">
        <h3 class="panel-title">{{ t("workspace.sections.overview") }}</h3>
        <div class="overview-grid">
          <div v-for="item in statItems" :key="item.label" class="overview-cell">
            <div class="overview-icon-container">
               <component :is="item.icon" />
            </div>
            <div class="overview-info">
              <strong class="overview-val">{{ item.value }}</strong>
              <span class="overview-label">{{ item.label }}</span>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- Recent Table Section -->
    <section class="panel panel-recent">
      <div class="recent-header">
        <h3 class="panel-title" style="margin: 0;">{{ t("workspace.sections.recent") }}</h3>
        <a-button type="link" size="small" @click="refreshDashboard">刷新</a-button>
      </div>
      
      <a-table
        :columns="articleColumns"
        :data-source="recentArticlesQuery.data.value || []"
        :loading="recentArticlesQuery.isPending.value"
        :pagination="false"
        row-key="id"
        class="custom-table"
      >
        <template #emptyText>{{ t("workspace.noRecentArticles") }}</template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'title'">
            <div class="table-title-col">
              <strong>{{ record.title || t("article.untitled") }}</strong>
              <ArticleSourceMeta
                :source-type="record.source_type"
                :generation-mode="record.generation_mode"
                :created-at="record.created_at"
              />
            </div>
          </template>

          <template v-else-if="column.key === 'generate_status'">
            <ArticleGenerateStatus :status="record.generate_status" />
          </template>

          <template v-else-if="column.key === 'publish_status'">
            <ArticlePublishStatus
              :status="record.publish_status"
              :article-id="record.id"
            />
          </template>

          <template v-else-if="column.key === 'word_count'">
            {{ record.word_count || "--" }}
          </template>

          <template v-else-if="column.key === 'actions'">
            <ArticleActionGroup
              v-bind="resolveArticleActionState(record.generate_status)"
              :delete-confirm-title="t('templates.list.deleteConfirm')"
              :delete-loading="deleteMutation.isPending.value"
              @publish="openPublish(record.id)"
              @edit="openEditor(record)"
              @preview="openArticle(record.id)"
              @copy="copyArticle(record.id)"
              @delete="handleDelete(record.id)"
            />
          </template>
        </template>
      </a-table>
    </section>

    <ArticleDetailDrawer
      :open="articleDrawerOpen"
      :article-id="selectedArticleId"
      @close="articleDrawerOpen = false"
    />

    <PublishArticleModal
      v-model:open="publishModalOpen"
      :article-id="selectedPublishArticleId"
    />
  </div>
</template>

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

/* Panel Containers */
.panel {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.panel-title {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  display: flex;
  align-items: center;
}
.panel-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #1f5cff;
  border-radius: 2px;
  margin-right: 8px;
}

/* Top Layout Grid */
.workspace-header-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 20px;
}

/* --- Templates --- */
.template-cards-container {
  display: flex;
  gap: 16px;
  flex: 1;
}

.template-card {
  flex: 1;
  border-radius: 12px;
  padding: 20px 16px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.template-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.template-icon {
  font-size: 16px;
}

.template-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}
.template-desc {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.5;
  margin: 0 0 16px 0;
  flex: 1;
}
.template-action {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.template-arrow {
  font-size: 10px;
}

/* Card Themes */
/* Yellow Top X */
.card-yellow {
  background: linear-gradient(180deg, #fffbf2 0%, #fff6e0 100%);
  border: 1px solid #ffecb3;
}
.bg-yellow { background: #ffe58f; color: #fa8c16; }
.card-yellow .template-action { color: #fa8c16; }

/* Light Blue Product Review */
.card-blue-light {
  background: linear-gradient(180deg, #f0f7ff 0%, #e6f0ff 100%);
  border: 1px solid #d6e4ff;
}
.bg-blue-light { background: #bae0ff; color: #1677ff; }
.card-blue-light .template-action { color: #1677ff; }

/* Blue Deep Research */
.card-blue-deep {
  background: linear-gradient(135deg, #e6f4ff 0%, #d4e8ff 100%);
  border: 1px solid #bae0ff;
}
.bg-blue-deep { background: #91caff; color: #0958d9; }
.card-blue-deep .template-action { color: #0958d9; }

/* Grey Expansion */
.card-grey {
  background: #fcfcfc;
  border: 1px dashed #d9d9d9;
}
.bg-grey { background: #f0f0f0; color: #8c8c8c; }
.card-grey .template-action { display: none; }
.dummy-card { pointer-events: none; }


/* --- Overview Grid --- */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  flex: 1;
}
.overview-cell {
  background: #f7f9fc;
  border: 1px solid #f0f3fa;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.overview-icon-container {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e6f4ff;
  color: #1677ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.overview-info {
  display: flex;
  flex-direction: column;
}
.overview-val {
  font-size: 20px;
  font-weight: 800;
  color: #141414;
  line-height: 1.2;
}
.overview-label {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 2px;
}


/* --- Recent Table Section --- */
.recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Table customizing */
.custom-table :deep(.ant-table-thead > tr > th) {
  background: #fafafa !important;
  color: #8c8c8c;
  font-weight: 500;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.custom-table :deep(.ant-table-tbody > tr > td) {
  font-size: 13px;
  border-bottom: 1px solid #f9f9f9;
  padding: 16px;
}

/* Table Cells */
.table-title-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.table-title-col strong {
  font-size: 14px;
  color: #141414;
}

@media (max-width: 1200px) {
  .workspace-header-grid {
    grid-template-columns: 1fr;
  }
}
</style>