feat(migrations): Harden task audit tracking and optimize article templates

- Added migration to harden task audit tracking by modifying audit_logs and related tables.
- Introduced operator_id to several tables for better tracking of actions.
- Updated article_templates with new prompt templates for various article types, enhancing content generation.
- Created prompt_rules and schedule_tasks tables to manage content generation rules and scheduling.
- Added foreign key constraints to articles for better data integrity.

apps/admin-web/src/views/TemplatesView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { 
   DeleteOutlined, 
-  EyeOutlined, 
+  EditOutlined,
   PlusOutlined, 
+  BlockOutlined,
   ReloadOutlined,
   LoadingOutlined,
   ExperimentOutlined,
@@ -16,12 +17,11 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { message } from "ant-design-vue";
 import type { ArticleListItem, ArticleListParams, TemplateListItem } from "@geo/shared-types";
 import type { TableColumnsType } from "ant-design-vue";
+import type { Dayjs } from "dayjs";
 import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 
-import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
-import PageHero from "@/components/PageHero.vue";
 import { articlesApi, templatesApi } from "@/lib/api";
 import { formatError } from "@/lib/errors";
 import {
@@ -37,16 +37,17 @@ const router = useRouter();
 const { t } = useI18n();
 
 const pickerOpen = ref(false);
-const articleDrawerOpen = ref(false);
-const selectedArticleId = ref<number | null>(null);
 const page = ref(1);
 const pageSize = ref(10);
+const draftGenerationRange = ref<[Dayjs, Dayjs] | null>(null);
 
 const draftFilters = reactive<{
   template_id?: number;
   publish_status?: string;
   generate_status?: string;
   keyword?: string;
+  created_from?: string;
+  created_to?: string;
 }>({
   keyword: "",
 });
@@ -56,6 +57,8 @@ const appliedFilters = reactive<{
   publish_status?: string;
   generate_status?: string;
   keyword?: string;
+  created_from?: string;
+  created_to?: string;
 }>({
   keyword: "",
 });
@@ -84,6 +87,12 @@ const articleParams = computed<ArticleListParams>(() => {
   if (appliedFilters.keyword?.trim()) {
     params.keyword = appliedFilters.keyword.trim();
   }
+  if (appliedFilters.created_from) {
+    params.created_from = appliedFilters.created_from;
+  }
+  if (appliedFilters.created_to) {
+    params.created_to = appliedFilters.created_to;
+  }
 
   return params;
 });
@@ -110,7 +119,7 @@ const deleteMutation = useMutation({
 });
 
 const templateOptions = computed(() =>
-  (templateListQuery.data.value || []).map((template) => ({
+  (templateListQuery.data.value || []).map((template: TemplateListItem) => ({
     label: template.template_name,
     value: template.id,
   })),
@@ -175,6 +184,8 @@ function applyFilters(): void {
   appliedFilters.publish_status = draftFilters.publish_status;
   appliedFilters.generate_status = draftFilters.generate_status;
   appliedFilters.keyword = draftFilters.keyword?.trim() || "";
+  appliedFilters.created_from = draftGenerationRange.value?.[0]?.toISOString();
+  appliedFilters.created_to = draftGenerationRange.value?.[1]?.toISOString();
 }
 
 function getTemplateCardClass(idx: number): string {
@@ -203,6 +214,7 @@ function resetFilters(): void {
   draftFilters.publish_status = undefined;
   draftFilters.generate_status = undefined;
   draftFilters.keyword = "";
+  draftGenerationRange.value = null;
   applyFilters();
 }
 
@@ -215,15 +227,29 @@ function startTemplate(template: TemplateListItem): 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 openEditor(article: ArticleListItem): void {
+  if ((article.generate_status === "draft" || article.generate_status === "failed") && article.template_id) {
+    void router.push({
+      name: "article-wizard",
+      query: {
+        template_id: String(article.template_id),
+        article_id: String(article.id),
+      },
+    });
+    return;
+  }
+
+  void router.push({ name: "article-editor", params: { id: String(article.id) } });
+}
+
+function canEditArticle(status: string): boolean {
+  return status === "completed" || status === "draft" || status === "failed";
 }
 
 watch(
   () => articleListQuery.data.value?.items ?? [],
-  (items) => {
-    const hasGeneratingArticles = items.some((item) =>
+  (items: ArticleListItem[]) => {
+    const hasGeneratingArticles = items.some((item: ArticleListItem) =>
       item.generate_status === "generating" || item.generate_status === "running",
     );
 
@@ -268,81 +294,91 @@ function stopArticlePolling(): void {
 async function handleDelete(articleId: number): Promise<void> {
   await deleteMutation.mutateAsync(articleId);
 }
-
-function handleDrawerClose(): void {
-  articleDrawerOpen.value = false;
-  selectedArticleId.value = null;
-}
 </script>
 
 <template>
   <div class="templates-view">
-    <PageHero
-      eyebrow="Article Creation"
-      :title="t('route.templates.title')"
-      :description="t('route.templates.description')"
-    >
-      <template #actions>
-        <a-button disabled>{{ t("templates.actions.batchGenerate") }}</a-button>
-        <a-button type="primary" @click="openTemplatePicker">
-          <template #icon><PlusOutlined /></template>
-          {{ t("templates.actions.chooseTemplate") }}
-        </a-button>
-      </template>
-    </PageHero>
-
-    <section class="templates-view__filters">
-      <div class="templates-view__filters-grid">
-        <div class="templates-view__filter">
-          <label>{{ t("templates.filters.template") }}</label>
-          <a-select
-            v-model:value="draftFilters.template_id"
-            allow-clear
-            :options="templateOptions"
-            :placeholder="t('common.selectPlease')"
-          />
+    <section class="templates-view__top-card">
+      <div class="templates-view__header">
+        <div class="templates-view__header-title">
+          <h2>{{ t('route.templates.title') }}</h2>
+          <p>{{ t('route.templates.description') }}</p>
         </div>
-
-        <div class="templates-view__filter">
-          <label>{{ t("templates.filters.publishStatus") }}</label>
-          <a-select
-            v-model:value="draftFilters.publish_status"
-            allow-clear
-            :options="publishStatusOptions"
-            :placeholder="t('common.selectPlease')"
-          />
-        </div>
-
-        <div class="templates-view__filter">
-          <label>{{ t("templates.filters.generateStatus") }}</label>
-          <a-select
-            v-model:value="draftFilters.generate_status"
-            allow-clear
-            :options="generateStatusOptions"
-            :placeholder="t('common.selectPlease')"
-          />
-        </div>
-
-        <div class="templates-view__filter">
-          <label>{{ t("templates.filters.keyword") }}</label>
-          <a-input
-            v-model:value="draftFilters.keyword"
-            :placeholder="t('templates.filters.keywordPlaceholder')"
-            @pressEnter="applyFilters"
-          />
+        <div class="templates-view__header-actions">
+          <a-button class="batch-generate-btn">
+            <template #icon><BlockOutlined /></template>
+            {{ t("templates.actions.batchGenerate") }}
+          </a-button>
+          <a-button type="primary" @click="openTemplatePicker">
+            <template #icon><PlusOutlined /></template>
+            {{ t("templates.actions.chooseTemplate") }}
+          </a-button>
         </div>
       </div>
 
-      <div class="templates-view__filter-actions">
-        <div class="templates-view__filter-note">
-          {{ t("templates.filters.unsupportedDate") }}
-        </div>
-        <div class="templates-view__filter-buttons">
-          <a-button @click="resetFilters">{{ t("common.reset") }}</a-button>
-          <a-button type="primary" @click="applyFilters">
-            <template #icon><ReloadOutlined /></template>
-            {{ t("common.refresh") }}
-          </a-button>
+      <a-divider style="margin: 0; border-color: #f0f0f0;" />
+
+      <div class="templates-view__filters">
+        <div class="templates-view__filters-inline">
+          <div class="templates-view__filter-item">
+            <label>{{ t("templates.filters.template") }}:</label>
+            <a-select
+              v-model:value="draftFilters.template_id"
+              allow-clear
+              :options="templateOptions"
+              :placeholder="t('common.selectPlease')"
+              @change="applyFilters"
+            />
+          </div>
+
+          <div class="templates-view__filter-item">
+            <label>{{ t("templates.filters.publishStatus") }}:</label>
+            <a-select
+              v-model:value="draftFilters.publish_status"
+              allow-clear
+              :options="publishStatusOptions"
+              :placeholder="t('common.selectPlease')"
+              @change="applyFilters"
+            />
+          </div>
+
+          <div class="templates-view__filter-item">
+            <label>{{ t("templates.filters.generationTime") }}:</label>
+            <a-range-picker
+              v-model:value="draftGenerationRange"
+              allow-clear
+              show-time
+              format="YYYY-MM-DD HH:mm"
+              :placeholder="[
+                t('templates.filters.generationTimeStart'),
+                t('templates.filters.generationTimeEnd'),
+              ]"
+              @change="applyFilters"
+            />
+          </div>
+
+          <div class="templates-view__filter-item">
+            <label>{{ t("templates.filters.generateStatus") }}:</label>
+            <a-select
+              v-model:value="draftFilters.generate_status"
+              allow-clear
+              :options="generateStatusOptions"
+              :placeholder="t('common.selectPlease')"
+              @change="applyFilters"
+            />
+          </div>
+
+          <div class="templates-view__filter-item">
+            <label>{{ t("templates.filters.keyword") }}:</label>
+            <a-input-search
+              v-model:value="draftFilters.keyword"
+              :placeholder="t('templates.filters.keywordPlaceholder')"
+              @search="applyFilters"
+              @pressEnter="applyFilters"
+            />
+          </div>
+
+          <a-button @click="resetFilters" class="templates-view__reset-btn">{{ t("common.reset") }}</a-button>
         </div>
       </div>
     </section>
@@ -412,9 +448,15 @@ function handleDrawerClose(): void {
 
           <template v-else-if="column.key === 'actions'">
             <div class="templates-view__actions">
-              <a-tooltip :title="t('templates.list.preview')">
-                <a-button size="small" @click="openArticle(record.id)">
-                  <template #icon><EyeOutlined /></template>
+              <a-tooltip
+                :title="canEditArticle(record.generate_status) ? t('templates.list.edit') : t('templates.list.editDisabled')"
+              >
+                <a-button
+                  size="small"
+                  :disabled="!canEditArticle(record.generate_status)"
+                  @click="openEditor(record)"
+                >
+                  <template #icon><EditOutlined /></template>
                 </a-button>
               </a-tooltip>
               <a-popconfirm
@@ -461,14 +503,6 @@ function handleDrawerClose(): void {
         </article>
       </div>
     </a-modal>
-
-
-
-    <ArticleDetailDrawer
-      :open="articleDrawerOpen"
-      :article-id="selectedArticleId"
-      @close="handleDrawerClose"
-    />
   </div>
 </template>
 
@@ -479,48 +513,91 @@ function handleDrawerClose(): void {
   gap: 22px;
 }
 
-.templates-view__filters,
+.templates-view__top-card {
+  background: #fff;
+  border: 1px solid #e6edf5;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.templates-view__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 24px;
+}
+
+.templates-view__header-title h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.4;
+}
+
+.templates-view__header-title p {
+  margin: 6px 0 0 0;
+  font-size: 13px;
+  color: #8c8c8c;
+}
+
+.templates-view__header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.batch-generate-btn {
+  color: #1677ff;
+  border-color: #1677ff;
+}
+
+.templates-view__filters {
+  padding: 20px 24px;
+}
+
 .templates-view__table-card {
   padding: 24px;
   background: #fff;
   border: 1px solid #e6edf5;
-  border-radius: 24px;
+  border-radius: 12px;
 }
 
-.templates-view__filters-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.templates-view__filter {
+.templates-view__filters-inline {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px 24px;
+}
+
+.templates-view__reset-btn {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.templates-view__filter-item {
+  display: flex;
+  align-items: center;
   gap: 8px;
 }
 
-.templates-view__filter label {
-  color: #445164;
-  font-size: 13px;
-  font-weight: 600;
+.templates-view__filter-item label {
+  color: #101828;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
 }
 
-.templates-view__filter-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-top: 18px;
+.templates-view__filter-item :deep(.ant-select) {
+  min-width: 140px;
 }
 
-.templates-view__filter-note {
-  color: var(--muted);
-  font-size: 12px;
+.templates-view__filter-item :deep(.ant-picker) {
+  width: 320px;
 }
 
-.templates-view__filter-buttons {
-  display: flex;
-  gap: 12px;
+.templates-view__filter-item :deep(.ant-input-affix-wrapper),
+.templates-view__filter-item :deep(.ant-input-search) {
+  width: 240px;
 }
 
 .templates-view__table-head {
@@ -645,33 +722,20 @@ function handleDrawerClose(): void {
   background: #fcfcfc;
   border: 1px dashed #d9d9d9;
 }
-.bg-grey { background: #f0f0f0; color: #8c8c8c; }
-.card-grey .template-action { display: none; }
 
-@media (max-width: 1080px) {
-  .templates-view__filters-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+@media (max-width: 1200px) {
+  .templates-view__filter-item :deep(.ant-picker) {
+    width: 280px;
   }
 }
 
-@media (max-width: 720px) {
-  .templates-view__filters-grid,
-  .templates-view__picker-grid {
-    grid-template-columns: 1fr;
-  }
+.bg-grey { background: #f0f0f0; color: #8c8c8c; }
+.card-grey .template-action { display: none; }
 
-  .templates-view__filter-actions,
+@media (max-width: 720px) {
   .templates-view__table-head {
     flex-direction: column;
     align-items: stretch;
   }
-
-  .templates-view__filter-buttons {
-    width: 100%;
-  }
-
-  .templates-view__filter-buttons :deep(.ant-btn) {
-    flex: 1;
-  }
 }
 </style>