fix: 完善个人中心卡片管理

2026-08-03 16:49:31 +08:00
parent 8fb24f94ab
commit 3f8ff30bbc
8 changed files with 192 additions and 2 deletions
--- a/ai_knowledge_base_v2/apps/user-client/src/App.vue
+++ b/ai_knowledge_base_v2/apps/user-client/src/App.vue
@@ -36,6 +36,7 @@ const helpCardHistory = ref<TeacherHelpCard[]>([]);
 const shareDraftHistory = ref<ShareDraft[]>([]);
 const reportHistory = ref<PeriodicReport[]>([]);
 const personalCenterLoading = ref(false);
+const cardOperationPending = ref(false);
 const finishingTopic = ref(false);
 const generatingHelpCard = ref(false);
 const generatingShareDraft = ref(false);
@@ -322,6 +323,62 @@ async function copyShareDraft() {
  }
 }

+async function copyHistoryHelpCard(card: TeacherHelpCard) {
+  try {
+    await copyText(card.content);
+    const updated = await api.markHelpCardCopied(card.id);
+    helpCardHistory.value = helpCardHistory.value.map((item) => item.id === updated.id ? updated : item);
+    showToast("求助卡已复制，可再次粘贴给老师");
+  } catch (error) {
+    handleError(error, "复制失败，请稍后重试");
+  }
+}
+
+async function copyHistoryShareDraft(draft: ShareDraft) {
+  try {
+    await copyText(draft.content);
+    const updated = await api.markShareDraftCopied(draft.id);
+    shareDraftHistory.value = shareDraftHistory.value.map((item) => item.id === updated.id ? updated : item);
+    showToast("分享稿已复制，可再次粘贴到班级群");
+  } catch (error) {
+    handleError(error, "复制失败，请稍后重试");
+  }
+}
+
+async function deleteHistoryHelpCard(cardId: number, done: (success: boolean) => void) {
+  if (cardOperationPending.value) return;
+  cardOperationPending.value = true;
+  try {
+    await api.deleteHelpCard(cardId);
+    helpCardHistory.value = helpCardHistory.value.filter((item) => item.id !== cardId);
+    if (helpCard.value?.id === cardId) helpCard.value = null;
+    showToast("求助卡已删除");
+    done(true);
+  } catch (error) {
+    done(false);
+    handleError(error, "求助卡删除失败");
+  } finally {
+    cardOperationPending.value = false;
+  }
+}
+
+async function deleteHistoryShareDraft(draftId: number, done: (success: boolean) => void) {
+  if (cardOperationPending.value) return;
+  cardOperationPending.value = true;
+  try {
+    await api.deleteShareDraft(draftId);
+    shareDraftHistory.value = shareDraftHistory.value.filter((item) => item.id !== draftId);
+    if (shareDraft.value?.id === draftId) shareDraft.value = null;
+    showToast("分享稿已删除");
+    done(true);
+  } catch (error) {
+    done(false);
+    handleError(error, "分享稿删除失败");
+  } finally {
+    cardOperationPending.value = false;
+  }
+}
+
 async function openPersonalCenter(section: "overview" | "review" | "records" = "overview") {
  personalCenterSection.value = section;
  personalCenterOpen.value = true;
@@ -522,8 +579,13 @@ async function copyText(text: string) {
      :reports="reportHistory"
      :help-cards="helpCardHistory"
      :share-drafts="shareDraftHistory"
+      :operation-pending="cardOperationPending"
      @close="personalCenterOpen = false"
      @logout="personalCenterOpen = false; logoutDialogOpen = true"
+      @copy-help-card="copyHistoryHelpCard"
+      @copy-share-draft="copyHistoryShareDraft"
+      @delete-help-card="deleteHistoryHelpCard"
+      @delete-share-draft="deleteHistoryShareDraft"
    />

    <AppDialog v-if="helpCardDialogOpen" title="老师求助卡" labelled-by="help-card-title" @close="helpCardDialogOpen = false">
--- a/ai_knowledge_base_v2/apps/user-client/src/components/PersonalCenterDialog.vue
+++ b/ai_knowledge_base_v2/apps/user-client/src/components/PersonalCenterDialog.vue
@@ -4,11 +4,13 @@ import {
  CheckCircle2,
  ChevronDown,
  CircleMinus,
+  Copy,
  LifeBuoy,
  LogOut,
  PackageCheck,
  Share2,
  Sparkles,
+  Trash2,
 } from "@lucide/vue";
 import { computed, ref } from "vue";

@@ -26,15 +28,21 @@ const props = defineProps<{
  reports: PeriodicReport[];
  helpCards: TeacherHelpCard[];
  shareDrafts: ShareDraft[];
+  operationPending: boolean;
 }>();

-defineEmits<{
+const emit = defineEmits<{
  close: [];
  logout: [];
+  copyHelpCard: [card: TeacherHelpCard];
+  copyShareDraft: [draft: ShareDraft];
+  deleteHelpCard: [cardId: number, done: (success: boolean) => void];
+  deleteShareDraft: [draftId: number, done: (success: boolean) => void];
 }>();

 const activeSection = ref<CenterSection>(props.initialSection);
 const activeCardSection = ref<CardSection>("help");
+const deletingCard = ref<{ type: CardSection; id: number } | null>(null);
 const entitlement = computed(() => props.user.entitlement);
 const displayName = computed(() => props.user.nickname?.trim() || props.user.name);
 const nameInitial = computed(() => displayName.value.slice(0, 1));
@@ -75,6 +83,19 @@ function settlementStatusLabel(status: string) {
    failed: "整理失败",
  }[status] || status;
 }
+
+function submitDeleteCard() {
+  if (!deletingCard.value || props.operationPending) return;
+  const target = deletingCard.value;
+  const done = (success: boolean) => {
+    if (success) deletingCard.value = null;
+  };
+  if (target.type === "help") {
+    emit("deleteHelpCard", target.id, done);
+    return;
+  }
+  emit("deleteShareDraft", target.id, done);
+}
 </script>

 <template>
@@ -247,6 +268,16 @@ function settlementStatusLabel(status: string) {
                </div>
                <ChevronDown :size="17" aria-hidden="true" />
              </summary>
+              <div class="card-history-actions">
+                <button type="button" class="copy" @click="emit('copyHelpCard', item)">
+                  <Copy :size="15" aria-hidden="true" />
+                  {{ item.copied ? "再次复制" : "复制卡片" }}
+                </button>
+                <button type="button" class="delete" @click="deletingCard = { type: 'help', id: item.id }">
+                  <Trash2 :size="15" aria-hidden="true" />
+                  删除
+                </button>
+              </div>
              <pre>{{ item.content }}</pre>
            </details>
          </div>
@@ -276,6 +307,16 @@ function settlementStatusLabel(status: string) {
                </div>
                <ChevronDown :size="17" aria-hidden="true" />
              </summary>
+              <div class="card-history-actions">
+                <button type="button" class="copy" @click="emit('copyShareDraft', item)">
+                  <Copy :size="15" aria-hidden="true" />
+                  {{ item.copied ? "再次复制" : "复制卡片" }}
+                </button>
+                <button type="button" class="delete" @click="deletingCard = { type: 'share', id: item.id }">
+                  <Trash2 :size="15" aria-hidden="true" />
+                  删除
+                </button>
+              </div>
              <pre>{{ item.content }}</pre>
            </details>
          </div>
@@ -294,6 +335,25 @@ function settlementStatusLabel(status: string) {
      </div>
    </template>
  </AppDialog>
+
+  <AppDialog
+    v-if="deletingCard"
+    title="删除卡片"
+    labelled-by="delete-card-title"
+    @close="deletingCard = null"
+  >
+    <p class="confirm-copy">
+      确定删除这张{{ deletingCard.type === "help" ? "老师求助卡" : "班级分享稿" }}吗？删除后无法恢复。
+    </p>
+    <template #footer>
+      <div class="dialog-actions">
+        <button type="button" class="dialog-secondary" :disabled="operationPending" @click="deletingCard = null">取消</button>
+        <button type="button" class="dialog-danger" :disabled="operationPending" @click="submitDeleteCard">
+          {{ operationPending ? "删除中..." : "删除" }}
+        </button>
+      </div>
+    </template>
+  </AppDialog>
 </template>

 <style scoped>
@@ -349,7 +409,7 @@ function settlementStatusLabel(status: string) {
 .report-record > time { display: block; padding: 0 12px 6px; }
 .report-record pre { max-height: 260px; overflow: auto; margin: 0; padding: 11px 12px; border-top: 1px solid var(--chat-border); background: #fbfcfc; color: var(--chat-muted); font: inherit; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
 .records-section { align-content: start; }
-.card-type-tabs { position: sticky; top: -1px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 0 4px; background: #fff; }
+.card-type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 0 4px; background: #fff; }
 .card-type-tabs button { min-width: 0; min-height: 52px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--chat-border); border-radius: 13px; background: #fff; color: var(--chat-muted); font-size: 12px; font-weight: 700; text-align: left; }
 .card-type-tabs button[aria-selected="true"] { border-color: rgba(20, 148, 119, 0.42); background: var(--chat-brand-soft); color: var(--chat-brand-dark); box-shadow: 0 5px 16px rgba(27, 68, 55, 0.07); }
 .card-type-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -372,6 +432,10 @@ function settlementStatusLabel(status: string) {
 .card-history-item summary > svg { transition: transform 0.18s ease; }
 .card-history-item[open] summary > svg { transform: rotate(180deg); }
 .card-history-item pre { max-height: 300px; overflow: auto; margin: 0; padding: 12px; border-top: 1px solid var(--chat-border); background: #fbfcfc; color: var(--chat-muted); font: inherit; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
+.card-history-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px 10px; border-top: 1px solid var(--chat-border); background: #fff; }
+.card-history-actions button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 0; border-radius: 10px; font-size: 12px; font-weight: 700; }
+.card-history-actions .copy { background: var(--chat-brand-soft); color: var(--chat-brand-dark); }
+.card-history-actions .delete { background: #fff2f1; color: var(--chat-danger); }
 .center-empty { margin: 0; padding: 22px 14px; border-radius: 14px; background: #f6f8f7; color: var(--chat-muted); font-size: 13px; line-height: 1.7; text-align: center; }
 .center-empty.small { padding: 14px; font-size: 12px; }
 .personal-center-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
--- a/ai_knowledge_base_v2/apps/user-client/src/services/api.ts
+++ b/ai_knowledge_base_v2/apps/user-client/src/services/api.ts
@@ -93,9 +93,11 @@ export const api = {
  generateHelpCard: (sessionId: number) => request<TeacherHelpCard>(`/chat/session/${sessionId}/help-card`, { method: "POST", body: JSON.stringify({}) }),
  markHelpCardCopied: (cardId: number) => request<TeacherHelpCard>(`/chat/help-card/${cardId}/copied`, { method: "POST", body: JSON.stringify({}) }),
  helpCards: (limit = 20) => request<TeacherHelpCard[]>(`/chat/help-card/list?limit=${limit}`),
+  deleteHelpCard: (cardId: number) => request<null>(`/chat/help-card/${cardId}`, { method: "DELETE" }),
  generateShareDraft: (sessionId: number) => request<ShareDraft>(`/chat/session/${sessionId}/share-draft`, { method: "POST", body: JSON.stringify({}) }),
  markShareDraftCopied: (draftId: number) => request<ShareDraft>(`/chat/share-draft/${draftId}/copied`, { method: "POST", body: JSON.stringify({}) }),
  shareDrafts: (limit = 20) => request<ShareDraft[]>(`/chat/share-draft/list?limit=${limit}`),
+  deleteShareDraft: (draftId: number) => request<null>(`/chat/share-draft/${draftId}`, { method: "DELETE" }),
  practiceReview: () => request<PracticeReviewResult>("/user/growth-profile"),
  periodicReports: (limit = 10) => request<PeriodicReport[]>(`/user/periodic-report/list?limit=${limit}`),
  stop: (sessionId: number) => request<null>("/chat/stop", { method: "POST", body: JSON.stringify({ sessionId }) }),