feat: add tenant and user management with migrations, handlers, and tests
- Implemented tenant and user management features including: - Tenant creation and management with associated migrations. - User creation and management with associated migrations. - Tenant membership management with associated migrations. - Platform user roles management with associated migrations. - Quota management with associated migrations. - Article and template management with associated migrations. - Added HTTP handlers for templates and workspaces. - Created tests for protected and public routes. - Introduced a script to check tenant scope in SQL queries. - Documented task plan for backend completion and frontend foundation.
This commit is contained in:
@@ -0,0 +1,557 @@
|
||||
<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="[record.publish_status === 'published' ? 'badge-green-filled' : 'badge-grey']">
|
||||
<span class="dot" v-if="record.publish_status !== 'published'"></span>
|
||||
<span>{{ record.publish_status === 'published' ? '发布成功' : '未发布' }}</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: #bfbfbf; 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>
|
||||
Reference in New Issue
Block a user