feat(web): add AI joke generator page with favorites

2026-06-02 20:03:37 +08:00
parent 69670eb402
commit bec6f50182
1 changed files with 355 additions and 0 deletions
@@ -0,0 +1,355 @@
+<template>
+  <div class="generate-page">
+    <h1 class="page-title">
+      <span class="emoji">&#x2728;</span>
+      智能笑话生成器
+    </h1>
+
+    <!-- 场景选择 -->
+    <div class="section">
+      <div class="section-label">选择场景（可多选）</div>
+      <div class="scenario-chips">
+        <el-check-tag
+          v-for="s in predefinedScenarios"
+          :key="s"
+          :checked="selectedScenarios.includes(s)"
+          @change="toggleScenario(s)"
+          class="scenario-chip"
+        >
+          {{ s }}
+        </el-check-tag>
+      </div>
+    </div>
+
+    <!-- 关键词输入 -->
+    <div class="section">
+      <div class="section-label">添加关键词（可选）</div>
+      <el-input
+        v-model="keywordInput"
+        placeholder="输入关键词，如：加班、相亲、熊孩子..."
+        @keyup.enter="addKeyword"
+        clearable
+      >
+        <template #append>
+          <el-button @click="addKeyword">添加</el-button>
+        </template>
+      </el-input>
+      <div v-if="keywords.length" class="keyword-tags">
+        <el-tag
+          v-for="(kw, i) in keywords"
+          :key="i"
+          closable
+          @close="removeKeyword(i)"
+          class="keyword-tag"
+        >
+          {{ kw }}
+        </el-tag>
+      </div>
+    </div>
+
+    <!-- 生成按钮 -->
+    <div class="generate-actions">
+      <el-button
+        type="primary"
+        size="large"
+        :loading="loading"
+        :disabled="loading"
+        @click="handleGenerate"
+        class="generate-btn"
+      >
+        <span v-if="!loading">&#x1F3B2; 开始生成</span>
+        <span v-else>生成中...</span>
+      </el-button>
+      <el-button v-if="generatedJoke" size="large" @click="resetForm">
+        清空
+      </el-button>
+    </div>
+
+    <!-- 生成结果 -->
+    <div v-if="generatedJoke" class="result-card">
+      <h2 class="result-title">{{ generatedJoke.title }}</h2>
+      <pre class="result-content">{{ generatedJoke.content }}</pre>
+      <div class="result-actions">
+        <el-button type="primary" @click="handleGenerate">
+          &#x1F504; 重新生成
+        </el-button>
+        <el-button @click="handleFavorite" :type="isFavorited ? 'danger' : 'default'">
+          <span v-if="!isFavorited">&#x2764; 收藏</span>
+          <span v-else>&#x2714; 已收藏</span>
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 收藏列表 -->
+    <div v-if="favorites.length" class="favorites-section">
+      <h3>&#x1F4EC; 我的收藏 ({{ favorites.length }})</h3>
+      <div class="favorite-list">
+        <div
+          v-for="(fav, i) in favorites"
+          :key="fav.id"
+          class="favorite-item"
+        >
+          <div class="fav-title">{{ fav.title }}</div>
+          <div class="fav-content">{{ fav.content.substring(0, 100) }}...</div>
+          <div class="fav-meta">
+            <span class="fav-date">{{ formatDate(fav.created_at) }}</span>
+            <el-button type="danger" size="small" text @click="removeFavorite(i)">
+              删除
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { generateJoke } from '@/api/generate'
+
+const predefinedScenarios = ['职场', '校园', '社交', '家庭', '情感', '搞笑日常']
+
+const selectedScenarios = ref([])
+const keywordInput = ref('')
+const keywords = ref([])
+const loading = ref(false)
+const generatedJoke = ref(null)
+const isFavorited = ref(false)
+
+// 收藏
+const favorites = ref(JSON.parse(localStorage.getItem('joke_favorites') || '[]'))
+
+const STORAGE_KEY = 'joke_favorites'
+
+function toggleScenario(s) {
+  const idx = selectedScenarios.value.indexOf(s)
+  if (idx >= 0) {
+    selectedScenarios.value.splice(idx, 1)
+  } else {
+    selectedScenarios.value.push(s)
+  }
+}
+
+function addKeyword() {
+  const kw = keywordInput.value.trim()
+  if (kw && !keywords.value.includes(kw)) {
+    keywords.value.push(kw)
+    keywordInput.value = ''
+  }
+}
+
+function removeKeyword(i) {
+  keywords.value.splice(i, 1)
+}
+
+async function handleGenerate() {
+  loading.value = true
+  isFavorited.value = false
+  try {
+    const res = await generateJoke(keywords.value, selectedScenarios.value)
+    generatedJoke.value = res
+    // 检查是否已收藏
+    const exists = favorites.value.find(f => f.content === res.content)
+    isFavorited.value = !!exists
+  } catch (e) {
+    ElMessage.error(e.detail || '生成失败，请重试')
+    generatedJoke.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleFavorite() {
+  if (!generatedJoke.value) return
+  // 检查是否已存在
+  const exists = favorites.value.findIndex(f => f.content === generatedJoke.value.content)
+  if (exists >= 0) {
+    ElMessage.info('已经收藏过了')
+    return
+  }
+  favorites.value.unshift({
+    id: Date.now().toString(),
+    title: generatedJoke.value.title,
+    content: generatedJoke.value.content,
+    created_at: new Date().toISOString()
+  })
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(favorites.value))
+  isFavorited.value = true
+  ElMessage.success('收藏成功')
+}
+
+function removeFavorite(i) {
+  favorites.value.splice(i, 1)
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(favorites.value))
+  // 检查当前生成的是否也从收藏中被删除了
+  if (generatedJoke.value) {
+    const stillExists = favorites.value.find(f => f.content === generatedJoke.value.content)
+    isFavorited.value = !!stillExists
+  }
+}
+
+function resetForm() {
+  generatedJoke.value = null
+  isFavorited.value = false
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  return new Date(dateStr).toLocaleDateString('zh-CN')
+}
+</script>
+
+<style scoped>
+.generate-page {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 40px 24px;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  text-align: center;
+  margin-bottom: 40px;
+}
+.emoji {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.section {
+  margin-bottom: 28px;
+}
+.section-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 12px;
+}
+
+.scenario-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+:deep(.scenario-chip) {
+  padding: 8px 18px;
+  border-radius: 20px;
+  background: var(--bg-card);
+  border: 1.5px solid var(--border);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+:deep(.scenario-chip:hover) {
+  border-color: #9333ea;
+}
+:deep(.scenario-chip.is-checked) {
+  background: #9333ea;
+  border-color: #9333ea;
+  color: white;
+}
+
+.keyword-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+.keyword-tag {
+  background: #f3e8ff;
+  border-color: #9333ea;
+  color: #9333ea;
+}
+
+.generate-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+:deep(.generate-btn) {
+  padding: 12px 40px;
+  font-size: 16px;
+  background: linear-gradient(135deg, #9333ea, #7c3aed);
+  border: none;
+  border-radius: 24px;
+}
+:deep(.generate-btn:hover) {
+  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.4);
+}
+
+.result-card {
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  margin-bottom: 32px;
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+}
+.result-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+  text-align: center;
+}
+.result-content {
+  font-size: 16px;
+  line-height: 1.9;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  margin-bottom: 24px;
+}
+.result-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.favorites-section {
+  margin-top: 40px;
+}
+.favorites-section h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.favorite-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.favorite-item {
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  padding: 16px 20px;
+  border: 1px solid var(--border);
+}
+.fav-title {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+.fav-content {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+.fav-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.fav-date {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+</style>