geo/apps/admin-web/src/components/PromptRuleTab.vue

<script setup lang="ts">
import {
  DeleteOutlined,
  EditOutlined,
  PauseCircleOutlined,
  PlayCircleOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message, type TableColumnsType } from "ant-design-vue";
import type { PromptRule, PromptRuleGroup } from "@geo/shared-types";
import { computed, reactive, ref, watch } from "vue";
import { useI18n } from "vue-i18n";

import PromptRuleModal from "@/components/PromptRuleModal.vue";
import { promptRulesApi } from "@/lib/api";
import { formatDateTime } from "@/lib/display";
import { formatError } from "@/lib/errors";

const queryClient = useQueryClient();
const { t } = useI18n();

const selectedGroupId = ref<number | "all" | "ungrouped">("all");
const ruleModalOpen = ref(false);
const editingRule = ref<PromptRule | null>(null);
const groupModalOpen = ref(false);
const editingGroupId = ref<number | null>(null);
const groupForm = reactive({ name: "" });
const page = ref(1);
const pageSize = ref(20);

const groupsQuery = useQuery({
  queryKey: ["promptRules", "groups"],
  queryFn: () => promptRulesApi.listGroups(),
});

const ruleListParams = computed(() => {
  const params: Record<string, unknown> = {
    page: page.value,
    page_size: pageSize.value,
  };
  if (selectedGroupId.value === "ungrouped") {
    params.ungrouped = true;
  } else if (selectedGroupId.value !== "all") {
    params.group_id = selectedGroupId.value;
  }
  return params;
});

const rulesQuery = useQuery({
  queryKey: computed(() => ["promptRules", "list", ruleListParams.value]),
  queryFn: () => promptRulesApi.list(ruleListParams.value),
});

const columns = computed<TableColumnsType<PromptRule>>(() => [
  { title: t("custom.promptRule.name"), dataIndex: "name", key: "name", width: 160 },
  { title: t("custom.promptRule.content"), dataIndex: "prompt_content", key: "prompt_content", ellipsis: true },
  { title: t("custom.promptRule.scene"), dataIndex: "scene", key: "scene", width: 120 },
  { title: t("custom.promptRule.tone"), dataIndex: "default_tone", key: "default_tone", width: 100 },
  { title: t("custom.promptRule.wordCount"), dataIndex: "default_word_count", key: "default_word_count", width: 100 },
  { title: t("custom.promptRule.articleCount"), dataIndex: "article_count", key: "article_count", width: 100 },
  { title: t("custom.promptRule.status"), dataIndex: "status", key: "status", width: 100 },
  { title: t("common.createdAt"), dataIndex: "created_at", key: "created_at", width: 168 },
  { title: t("common.actions"), key: "actions", width: 140, fixed: "right", align: "right" },
]);

const groupMutations = {
  create: useMutation({
    mutationFn: () => promptRulesApi.createGroup({ name: groupForm.name.trim() }),
    onSuccess: async () => {
      message.success(t("custom.messages.groupCreated"));
      groupModalOpen.value = false;
      await queryClient.invalidateQueries({ queryKey: ["promptRules", "groups"] });
    },
    onError: (error) => message.error(formatError(error)),
  }),
  update: useMutation({
    mutationFn: () =>
      promptRulesApi.updateGroup(editingGroupId.value as number, { name: groupForm.name.trim() }),
    onSuccess: async () => {
      message.success(t("custom.messages.groupUpdated"));
      groupModalOpen.value = false;
      await queryClient.invalidateQueries({ queryKey: ["promptRules", "groups"] });
    },
    onError: (error) => message.error(formatError(error)),
  }),
  remove: useMutation({
    mutationFn: (id: number) => promptRulesApi.removeGroup(id),
    onSuccess: async () => {
      message.success(t("custom.messages.groupDeleted"));
      if (selectedGroupId.value === editingGroupId.value) {
        selectedGroupId.value = "all";
      }
      await queryClient.invalidateQueries({ queryKey: ["promptRules"] });
    },
    onError: (error) => message.error(formatError(error)),
  }),
};

const ruleMutations = {
  remove: useMutation({
    mutationFn: (id: number) => promptRulesApi.remove(id),
    onSuccess: async () => {
      message.success(t("custom.messages.ruleDeleted"));
      await queryClient.invalidateQueries({ queryKey: ["promptRules"] });
    },
    onError: (error) => message.error(formatError(error)),
  }),
  toggleStatus: useMutation({
    mutationFn: ({ id, status }: { id: number; status: "enabled" | "disabled" }) =>
      promptRulesApi.toggleStatus(id, { status }),
    onSuccess: async (_data, variables) => {
      message.success(
        variables.status === "enabled"
          ? t("custom.messages.ruleEnabled")
          : t("custom.messages.ruleDisabled"),
      );
      await queryClient.invalidateQueries({ queryKey: ["promptRules"] });
    },
    onError: (error) => message.error(formatError(error)),
  }),
};

function openGroupModal(group?: PromptRuleGroup): void {
  editingGroupId.value = group?.id ?? null;
  groupForm.name = group?.name ?? "";
  groupModalOpen.value = true;
}

async function submitGroup(): Promise<void> {
  if (!groupForm.name.trim()) return;
  if (editingGroupId.value) {
    await groupMutations.update.mutateAsync();
  } else {
    await groupMutations.create.mutateAsync();
  }
}

function openRuleModal(rule?: PromptRule): void {
  editingRule.value = rule ?? null;
  ruleModalOpen.value = true;
}

function handleTableChange(nextPage: number, nextPageSize: number): void {
  page.value = nextPage;
  pageSize.value = nextPageSize;
}

watch(selectedGroupId, () => {
  page.value = 1;
});
</script>

<template>
  <div class="prompt-rule-tab">
    <div class="prompt-rule-tab__layout">
      <!-- Group sidebar -->
      <aside class="prompt-rule-tab__sidebar">
        <div class="prompt-rule-tab__sidebar-head">
          <h4>{{ t("custom.group.title") }}</h4>
          <a-button type="text" size="small" @click="openGroupModal()">
            <template #icon><PlusOutlined /></template>
          </a-button>
        </div>

        <div class="prompt-rule-tab__group-list">
          <div
            class="prompt-rule-tab__group-item"
            :class="{ 'prompt-rule-tab__group-item--active': selectedGroupId === 'all' }"
            @click="selectedGroupId = 'all'"
          >
            <span>{{ t("custom.group.allRules") }}</span>
          </div>

          <div
            v-for="group in groupsQuery.data.value ?? []"
            :key="group.id"
            class="prompt-rule-tab__group-item"
            :class="{ 'prompt-rule-tab__group-item--active': selectedGroupId === group.id }"
            @click="selectedGroupId = group.id"
          >
            <span>{{ group.name }}</span>
            <span class="prompt-rule-tab__group-actions">
              <a-button type="text" size="small" @click.stop="openGroupModal(group)">
                <template #icon><EditOutlined /></template>
              </a-button>
              <a-popconfirm
                :title="t('custom.group.deleteConfirm')"
                @confirm="groupMutations.remove.mutate(group.id)"
              >
                <a-button type="text" size="small" danger @click.stop>
                  <template #icon><DeleteOutlined /></template>
                </a-button>
              </a-popconfirm>
            </span>
          </div>

          <div
            class="prompt-rule-tab__group-item"
            :class="{ 'prompt-rule-tab__group-item--active': selectedGroupId === 'ungrouped' }"
            @click="selectedGroupId = 'ungrouped'"
          >
            <span>{{ t("custom.promptRule.ungrouped") }}</span>
          </div>
        </div>
      </aside>

      <!-- Rule list panel -->
      <div class="prompt-rule-tab__panel">
        <div class="prompt-rule-tab__panel-head">
          <span class="prompt-rule-tab__count">
            {{ t("templates.list.count", { count: rulesQuery.data.value?.total ?? 0 }) }}
          </span>
          <a-button type="primary" @click="openRuleModal()">
            <template #icon><PlusOutlined /></template>
            {{ t("common.create") }}
          </a-button>
        </div>

        <a-table
          :columns="columns"
          :data-source="rulesQuery.data.value?.items ?? []"
          :loading="rulesQuery.isPending.value"
          :pagination="{
            current: page,
            pageSize,
            total: rulesQuery.data.value?.total ?? 0,
            showSizeChanger: true,
          }"
          row-key="id"
          size="small"
          :scroll="{ x: 1100 }"
          @change="(p: any) => handleTableChange(p.current, p.pageSize)"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'prompt_content'">
              <span class="prompt-rule-tab__content-cell">{{ record.prompt_content }}</span>
            </template>
            <template v-else-if="column.key === 'scene'">
              {{ record.scene || "--" }}
            </template>
            <template v-else-if="column.key === 'default_tone'">
              {{ record.default_tone || "--" }}
            </template>
            <template v-else-if="column.key === 'default_word_count'">
              {{ record.default_word_count || "--" }}
            </template>
            <template v-else-if="column.key === 'status'">
              <a-tag :color="record.status === 'enabled' ? 'green' : 'default'">
                {{ record.status === "enabled" ? t("custom.promptRule.enabled") : t("custom.promptRule.disabled") }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'created_at'">
              {{ formatDateTime(record.created_at) }}
            </template>
            <template v-else-if="column.key === 'actions'">
              <div class="table-actions-row">
                <a-tooltip :title="t('common.edit')">
                  <a-button
                    type="text"
                    shape="circle"
                    size="small"
                    class="action-btn action-edit"
                    @click="openRuleModal(record)"
                  >
                    <EditOutlined />
                  </a-button>
                </a-tooltip>
                <a-tooltip
                  :title="record.status === 'enabled' ? t('custom.promptRule.disabled') : t('custom.promptRule.enabled')"
                >
                  <a-button
                    type="text"
                    shape="circle"
                    size="small"
                    :class="[
                      'action-btn',
                      record.status === 'enabled' ? 'action-disable' : 'action-enable',
                    ]"
                    @click="ruleMutations.toggleStatus.mutate({
                      id: record.id,
                      status: record.status === 'enabled' ? 'disabled' : 'enabled',
                    })"
                  >
                    <PauseCircleOutlined v-if="record.status === 'enabled'" />
                    <PlayCircleOutlined v-else />
                  </a-button>
                </a-tooltip>
                <a-popconfirm
                  :title="t('custom.promptRule.deleteConfirm')"
                  @confirm="ruleMutations.remove.mutate(record.id)"
                >
                  <a-button
                    type="text"
                    shape="circle"
                    size="small"
                    class="action-btn action-delete"
                    :title="t('common.delete')"
                  >
                    <DeleteOutlined />
                  </a-button>
                </a-popconfirm>
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </div>

    <!-- Group modal -->
    <a-modal
      :open="groupModalOpen"
      :title="editingGroupId ? t('custom.group.editTitle') : t('custom.group.createTitle')"
      :confirm-loading="groupMutations.create.isPending.value || groupMutations.update.isPending.value"
      @ok="submitGroup"
      @cancel="groupModalOpen = false"
    >
      <a-form layout="vertical" style="padding-top: 8px">
        <a-form-item :label="t('custom.group.name')" required>
          <a-input v-model:value="groupForm.name" :maxlength="50" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- Rule modal -->
    <PromptRuleModal v-model:open="ruleModalOpen" :rule="editingRule" />
  </div>
</template>

<style scoped>
.prompt-rule-tab__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
}

.prompt-rule-tab__sidebar {
  background: #f8fafc;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  padding: 16px;
}

.prompt-rule-tab__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.prompt-rule-tab__sidebar-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.prompt-rule-tab__group-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prompt-rule-tab__group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.prompt-rule-tab__group-item:hover {
  background: #f0f5ff;
}

.prompt-rule-tab__group-item--active {
  border-color: #bfd7ff;
  background: #eef5ff;
}

.prompt-rule-tab__group-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.prompt-rule-tab__group-item:hover .prompt-rule-tab__group-actions {
  opacity: 1;
}

.prompt-rule-tab__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.prompt-rule-tab__count {
  font-size: 13px;
  color: #8c8c8c;
}

.prompt-rule-tab__content-cell {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: #595959;
}

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