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

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

import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
import { workspaceApi } from "@/lib/api";
import {
  formatDateTime,
  getGenerateStatusMeta,
  getPublishStatusMeta,
  getTemplateMeta,
} from "@/lib/display";

const router = useRouter();
const { t } = useI18n();
const selectedArticleId = ref<number | null>(null);
const articleDrawerOpen = 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.templateType"),
    dataIndex: "template_name",
    key: "template_name",
    width: 180,
  },
  {
    title: t("common.generateStatus"),
    dataIndex: "generate_status",
    key: "generate_status",
    width: 140,
  },
  {
    title: t("common.publishStatus"),
    dataIndex: "publish_status",
    key: "publish_status",
    width: 140,
  },
  {
    title: t("common.wordCount"),
    dataIndex: "word_count",
    key: "word_count",
    width: 100,
  },
  {
    title: t("common.actions"),
    key: "actions",
    width: 200,
    align: 'right',
  },
]);

// 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 confirmDelete(articleId: number): void {
  // Mock delete function
}

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>
              <div class="table-title-sub">
                 <span style="color: #1f5cff; font-weight: 500; font-size: 11px;">自定义生成</span>
                 <span class="muted-dot">•</span>
                 <span class="muted">{{ record.source_label || formatDateTime(record.created_at) }}</span>
              </div>
            </div>
          </template>

          <template v-else-if="column.key === 'template_name'">
            <span style="color: #595959;">-</span>
          </template>

          <template v-else-if="column.key === 'generate_status'">
             <!-- Custom dot badge -->
            <div class="status-badge" :class="[record.generate_status === 'completed' ? 'badge-green' : 'badge-grey']">
               <span class="dot"></span>
               <span>已完成</span>
            </div>
          </template>

          <template v-else-if="column.key === 'publish_status'">
            <div
              class="status-badge"
              :class="[getPublishStatusMeta(record.publish_status).color === 'success' ? 'badge-green-filled' : 'badge-grey']"
            >
               <span class="dot" v-if="getPublishStatusMeta(record.publish_status).color !== 'success'"></span>
               <span>{{ getPublishStatusMeta(record.publish_status).label }}</span>
            </div>
          </template>

          <template v-else-if="column.key === 'word_count'">
            <span style="color: #595959;">{{ record.word_count || "-" }}</span>
          </template>

          <template v-else-if="column.key === 'actions'">
            <div class="table-actions-row">
              <a-button type="text" shape="circle" size="small" class="action-btn action-send"><SendOutlined /></a-button>
              <a-button type="text" shape="circle" size="small" class="action-btn action-edit"><EditOutlined /></a-button>
              <a-button type="text" shape="circle" size="small" class="action-btn action-eye" @click="openArticle(record.id)"><EyeOutlined /></a-button>
              <a-button type="text" shape="circle" size="small" class="action-btn action-copy"><CopyOutlined /></a-button>
              <a-button type="text" shape="circle" size="small" class="action-btn action-delete danger" @click="confirmDelete(record.id)"><DeleteOutlined /></a-button>
            </div>
          </template>
        </template>
      </a-table>
    </section>

    <ArticleDetailDrawer
      :open="articleDrawerOpen"
      :article-id="selectedArticleId"
      @close="articleDrawerOpen = false"
    />
  </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: 4px;
}
.table-title-col strong {
  font-size: 14px;
  color: #141414;
}
.table-title-sub {
  display: flex;
  align-items: center;
  gap: 6px;
}
.muted { color: #737373; font-size: 11px; }
.muted-dot { color: #d9d9d9; font-size: 10px; }

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.badge-green {
  background: transparent;
  color: #52c41a;
}
.badge-green .dot { background: #52c41a; }

.badge-green-filled {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #52c41a;
}
.badge-grey {
  background: #f5f5f5;
  color: #8c8c8c;
}
.badge-grey .dot { background: #d9d9d9; }

/* Actions */
.table-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.action-btn {
  color: #8c8c8c;
  font-size: 14px;
}
.action-send:hover { color: #1677ff; background: #e6f4ff; }
.action-edit:hover { color: #52c41a; background: #f6ffed; }
.action-eye:hover { color: #13c2c2; background: #e6fffb; }
.action-copy:hover { color: #1677ff; background: #e6f4ff; }
.action-delete:hover { color: #ff4d4f; background: #fff2f0; }

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