fix: move admin and web to correct locations

2026-05-21 21:45:31 +08:00
parent 89fa43d5fa
commit 7f51d200f1
36 changed files with 566 additions and 0 deletions
@@ -0,0 +1,71 @@
+<template>
+  <div class="detail-page" v-if="joke">
+    <div class="joke-detail">
+      <div class="tags">
+        <span class="tag type-tag" v-if="joke.type_name">{{ joke.type_name }}</span>
+        <span class="tag crowd-tag" v-if="joke.crowd_name">{{ joke.crowd_name }}</span>
+      </div>
+      <h1 class="title">{{ joke.title }}</h1>
+      <div class="content">{{ joke.content }}</div>
+      <div class="actions">
+        <button class="action-btn" @click="handleRandom">再看一条</button>
+      </div>
+      <div class="meta">
+        浏览 {{ joke.view_count }} | 赞 {{ joke.like_count }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getJoke } from '@/api/joke'
+
+const route = useRoute()
+const router = useRouter()
+const joke = ref(null)
+
+const loadJoke = async () => {
+  joke.value = await getJoke(route.params.id)
+}
+
+const handleRandom = () => {
+  router.push('/')
+  setTimeout(() => window.location.reload(), 100)
+}
+
+onMounted(() => loadJoke())
+</script>
+
+<style scoped>
+.joke-detail {
+  background: white;
+  padding: 30px;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+.tags { display: flex; gap: 10px; margin-bottom: 15px; }
+.tag { padding: 6px 14px; border-radius: 15px; font-size: 13px; }
+.type-tag { background: #FFF3E0; color: #FF9500; }
+.crowd-tag { background: #E3F2FD; color: #2196F3; }
+.title { font-size: 24px; margin-bottom: 20px; color: #333; }
+.content {
+  line-height: 1.8;
+  font-size: 17px;
+  color: #444;
+  white-space: pre-wrap;
+}
+.actions { margin-top: 30px; }
+.action-btn {
+  padding: 12px 30px;
+  background: linear-gradient(135deg, #FF9500, #FFB800);
+  color: white;
+  border: none;
+  border-radius: 25px;
+  font-size: 15px;
+  cursor: pointer;
+}
+.action-btn:hover { opacity: 0.9; }
+.meta { margin-top: 20px; color: #999; font-size: 14px; text-align: center; }
+</style>