大更新

Author: yqz

.cursor/rules/rule.mdc

@@ -0,0 +1,5 @@
+---
+alwaysApply: true
+---
+
+任何前端代码的编写都要求和之前项目整体的前端的风格，颜色搭配保持一致

frontend/src/api/feedback-admin.js

@@ -0,0 +1,9 @@
+import { request } from './http'
+
+export function fetchPendingFeedback(page = 0, size = 50) {
+  return request(`/api/v1/admin/feedback/pending?page=${page}&size=${size}`, {
+    method: 'GET',
+    withAuth: true
+  })
+}
+

frontend/src/api/feedback.js

@@ -0,0 +1,9 @@
+import { request } from './http'
+
+export function createFeedback(payload) {
+  return request('/api/v1/feedback', {
+    method: 'POST',
+    body: JSON.stringify(payload)
+  })
+}
+

frontend/src/api/http.js

@@ -10,7 +10,8 @@ function resolveApiBase() {
   const v = import.meta.env.VITE_API_BASE
   if (v === '') return ''
   if (v != null && v !== '') return v
-  return import.meta.env.DEV ? 'http://8.138.32.217:8082' : ''
+  // 开发环境默认走同域 /api（由 Vite proxy 转到本机后端），避免误连远端导致 token/权限不一致
+  return ''
 }
 
 export const API_BASE = resolveApiBase()
@@ -69,12 +70,14 @@ export async function request(path, options = {}) {
     const err = new Error(msg)
     err.code = json.code
     err.httpStatus = res.status
+    err.traceId = json.traceId
     throw err
   }
 
   if (!res.ok) {
     const err = new Error(`HTTP ${res.status}`)
     err.httpStatus = res.status
+    err.traceId = json?.traceId
     throw err
   }
 

frontend/src/components/BlogHeader.vue

@@ -1,7 +1,8 @@
 <template>
-  <header class="site-top-bar" role="banner">
-    <div class="site-top-bar-inner">
-      <div class="site-top-actions">
+  <div>
+    <header class="site-top-bar" role="banner">
+      <div class="site-top-bar-inner">
+        <div class="site-top-actions">
         <a
           class="top-action-btn"
           href="https://github.com/yyyCode/OpenBlog.git"
@@ -18,15 +19,14 @@
           </span>
           项目源码
         </a>
-        <button type="button" class="top-action-btn" aria-label="面试内容" @click="onInterviewClick">
+        <button type="button" class="top-action-btn" aria-label="问题反馈" @click="openFeedback">
           <span class="top-action-ico" aria-hidden="true">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M9 2h6v3H9z" />
-              <path d="M7 5h10a2 2 0 0 1 2 2v12a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V7a2 2 0 0 1 2-2z" />
-              <path d="M9 11h6M9 15h6" />
+              <path d="M4 4h16v16H4z" />
+              <path d="M22 6l-10 7L2 6" />
             </svg>
           </span>
-          面试内容
+          问题反馈
         </button>
       </div>
       <button
@@ -37,17 +37,60 @@
       >
         <span class="theme-toggle-icon" aria-hidden="true">{{ isDark ? '☀' : '☽' }}</span>
         <span class="theme-toggle-text">{{ isDark ? '浅色' : '深色' }}</span>
-      </button>
-    </div>
-  </header>
+        </button>
+      </div>
+    </header>
+
+    <Teleport to="body">
+      <div v-if="feedbackOpen" class="ob-dialog-overlay" role="dialog" aria-modal="true" aria-label="问题反馈">
+        <div class="ob-dialog card">
+          <div class="ob-dialog-title">问题反馈</div>
+          <div class="ob-dialog-desc">欢迎提交问题与建议（同一 IP 每天仅可提交一次）。</div>
+
+          <div class="field" style="margin-top: 14px">
+            <div class="label">提交者名字</div>
+            <input v-model="fbName" class="input" type="text" maxlength="50" placeholder="例如：张三" />
+          </div>
+          <div class="field">
+            <div class="label">内容</div>
+            <textarea
+              v-model="fbContent"
+              class="textarea"
+              rows="6"
+              maxlength="2000"
+              placeholder="请描述你遇到的问题或建议"
+            ></textarea>
+          </div>
+
+          <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px">
+            <button type="button" class="btn" :disabled="fbLoading" @click="closeFeedback">取消</button>
+            <button type="button" class="btn primary" :disabled="fbLoading || !canSubmit" @click="submitFeedback">
+              {{ fbLoading ? '提交中…' : '提交' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { toggleTheme as applyToggle } from '../theme'
 import { showMessage } from '../utils/message'
+import { createFeedback } from '../api/feedback'
 
 const isDark = ref(false)
+const feedbackOpen = ref(false)
+const fbName = ref('')
+const fbContent = ref('')
+const fbLoading = ref(false)
+
+const canSubmit = computed(() => {
+  const n = (fbName.value || '').trim()
+  const c = (fbContent.value || '').trim()
+  return n.length > 0 && c.length > 0
+})
 
 function sync() {
   isDark.value = document.documentElement.getAttribute('data-theme') === 'dark'
@@ -62,7 +105,68 @@ function onToggle() {
   sync()
 }
 
-function onInterviewClick() {
-  showMessage('功能暂未开放')
+function openFeedback() {
+  feedbackOpen.value = true
+}
+
+function closeFeedback() {
+  if (fbLoading.value) return
+  feedbackOpen.value = false
+}
+
+async function submitFeedback() {
+  if (!canSubmit.value || fbLoading.value) return
+  fbLoading.value = true
+  try {
+    await createFeedback({
+      submitterName: fbName.value.trim(),
+      content: fbContent.value.trim()
+    })
+    showMessage('提交成功，感谢反馈')
+    fbName.value = ''
+    fbContent.value = ''
+    feedbackOpen.value = false
+  } catch (e) {
+    const traceId = e?.traceId ? `（traceId ${e.traceId}）` : ''
+    const prefix = e?.code ? `错误码 ${e.code}` : e?.httpStatus ? `HTTP ${e.httpStatus}` : ''
+    const msg = e?.message || '提交失败'
+    showMessage(`${prefix ? prefix + '：' : ''}${msg}${traceId}`)
+  } finally {
+    fbLoading.value = false
+  }
 }
 </script>
+
+<style scoped>
+.ob-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10060;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.42);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+.ob-dialog {
+  width: min(520px, 100%);
+  padding: 20px 18px 18px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+}
+
+.ob-dialog-title {
+  font-size: 18px;
+  font-weight: 950;
+  color: var(--text);
+}
+
+.ob-dialog-desc {
+  margin-top: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--muted);
+}
+</style>

frontend/src/layouts/ConsoleLayout.vue

@@ -74,6 +74,15 @@
             </span>
             评论
           </router-link>
+          <router-link to="/console/feedback" class="console-nav-item" active-class="active">
+            <span class="console-nav-ico" aria-hidden="true">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M4 4h16v16H4z" />
+                <path d="M22 6l-10 7L2 6" />
+              </svg>
+            </span>
+            问题反馈
+          </router-link>
           <router-link to="/console/attachments" class="console-nav-item" active-class="active">
             <span class="console-nav-ico" aria-hidden="true">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

frontend/src/router/index.js

@@ -17,6 +17,7 @@ import ConsoleChangelogView from '../views/ConsoleChangelogView.vue'
 import ConsoleAttachmentsView from '../views/ConsoleAttachmentsView.vue'
 import ConsoleCommentsView from '../views/ConsoleCommentsView.vue'
 import ConsoleSystemView from '../views/ConsoleSystemView.vue'
+import ConsoleFeedbackView from '../views/ConsoleFeedbackView.vue'
 
 const routes = [
   {
@@ -44,6 +45,7 @@ const routes = [
       { path: 'articles/manage', name: 'consoleArticleManage', component: ConsoleArticleManageView },
       { path: 'articles/new', name: 'consoleArticleCompose', component: ConsoleArticleComposeView },
       { path: 'changelog', name: 'consoleChangelog', component: ConsoleChangelogView },
+      { path: 'feedback', name: 'consoleFeedback', component: ConsoleFeedbackView },
       { path: 'attachments', name: 'consoleAttachments', component: ConsoleAttachmentsView },
       { path: 'comments', name: 'consoleComments', component: ConsoleCommentsView },
       { path: 'system', name: 'consoleSystem', component: ConsoleSystemView }

frontend/src/views/ConsoleChangelogView.vue

@@ -198,8 +198,10 @@ async function saveChangelog() {
   } catch (e) {
     const apiCode = e?.code
     const httpStatus = e?.httpStatus
+    const traceId = e?.traceId ? `traceId ${e.traceId}` : ''
     const prefix = apiCode ? `错误码 ${apiCode}` : httpStatus ? `HTTP ${httpStatus}` : ''
-    changelogError.value = prefix ? `${prefix}：${e?.message || '保存失败'}` : e?.message || '保存失败'
+    const head = [prefix, traceId].filter(Boolean).join('，')
+    changelogError.value = head ? `${head}：${e?.message || '保存失败'}` : e?.message || '保存失败'
     changelogSuccess.value = ''
   }
 }
@@ -216,8 +218,10 @@ async function removeChangelog() {
   } catch (e) {
     const apiCode = e?.code
     const httpStatus = e?.httpStatus
+    const traceId = e?.traceId ? `traceId ${e.traceId}` : ''
     const prefix = apiCode ? `错误码 ${apiCode}` : httpStatus ? `HTTP ${httpStatus}` : ''
-    changelogError.value = prefix ? `${prefix}：${e?.message || '删除失败'}` : e?.message || '删除失败'
+    const head = [prefix, traceId].filter(Boolean).join('，')
+    changelogError.value = head ? `${head}：${e?.message || '删除失败'}` : e?.message || '删除失败'
     changelogSuccess.value = ''
   }
 }

frontend/src/views/ConsoleFeedbackView.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="console-page">
+    <header class="console-page-header">
+      <div class="console-page-title">
+        <h1>问题反馈</h1>
+        <div style="color: var(--console-muted, var(--muted)); font-size: 13px; margin-top: 6px">
+          展示所有待处理反馈（同一 IP 每天仅可提交一次）。
+        </div>
+      </div>
+      <div>
+        <button class="btn" style="padding: 8px 12px" @click="load">刷新</button>
+      </div>
+    </header>
+
+    <div class="console-card console-inner-card">
+      <div v-if="loading" style="color: var(--console-muted, var(--muted))">加载中...</div>
+      <div v-else-if="items.length === 0" style="color: var(--console-muted, var(--muted))">暂无待处理反馈</div>
+
+      <div v-else class="fb-list">
+        <div v-for="f in items" :key="f.id" class="fb-item">
+          <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 12px">
+            <div style="font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+              {{ f.submitterName || '匿名' }}
+            </div>
+            <div style="color: var(--console-muted, var(--muted)); font-size: 12px; white-space: nowrap">
+              {{ formatDateTime(f.createdAt) }}
+            </div>
+          </div>
+          <div style="margin-top: 10px; white-space: pre-wrap; line-height: 1.7">{{ f.content }}</div>
+          <div style="margin-top: 10px; color: var(--console-muted, var(--muted)); font-size: 12px">
+            提交日：{{ f.submitDay || '' }} · 状态：{{ f.status || '' }} · ID：{{ f.id }}
+          </div>
+        </div>
+      </div>
+
+      <div v-if="error" class="error" style="margin-top: 10px">{{ error }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { fetchPendingFeedback } from '../api/feedback-admin'
+
+const loading = ref(false)
+const items = ref([])
+const error = ref('')
+
+function formatDateTime(v) {
+  if (!v) return ''
+  const t = new Date(v).getTime()
+  if (Number.isNaN(t)) return ''
+  return new Date(t).toISOString().replace('T', ' ').slice(0, 19)
+}
+
+async function load() {
+  loading.value = true
+  error.value = ''
+  try {
+    const resp = await fetchPendingFeedback(0, 100)
+    items.value = resp?.items || []
+  } catch (e) {
+    const traceId = e?.traceId ? `traceId ${e.traceId}` : ''
+    const prefix = e?.code ? `错误码 ${e.code}` : e?.httpStatus ? `HTTP ${e.httpStatus}` : ''
+    const head = [prefix, traceId].filter(Boolean).join('，')
+    error.value = head ? `${head}：${e?.message || '加载失败'}` : e?.message || '加载失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => load())
+</script>
+
+<style scoped>
+.fb-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fb-item {
+  padding: 14px 14px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface-soft);
+}
+</style>
+

src/main/java/com/yqz/openblog/common/GlobalExceptionHandler.java

@@ -7,6 +7,8 @@
 import org.slf4j.LoggerFactory;
 import org.springframework.web.bind.annotation.ExceptionHandler;
 import org.springframework.web.bind.annotation.RestControllerAdvice;
+import org.springframework.security.access.AccessDeniedException;
+import org.springframework.security.authorization.AuthorizationDeniedException;
 
 /**
  * 统一异常处理（MVP）。
@@ -29,6 +31,15 @@ public ResponseEntity<ApiResponse<Object>> onValidation(MethodArgumentNotValidEx
         return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(ApiResponse.fail(4001, "参数校验失败"));
     }
 
+    /**
+     * 方法级鉴权（@PreAuthorize）失败会抛出 AuthorizationDeniedException；
+     * 以前会落到兜底 Exception -> 5001，导致前端误判为“服务器异常”。
+     */
+    @ExceptionHandler({AuthorizationDeniedException.class, AccessDeniedException.class})
+    public ResponseEntity<ApiResponse<Object>> onAccessDenied(Exception ex) {
+        return ResponseEntity.status(HttpStatus.FORBIDDEN).body(ApiResponse.fail(4030, "无权限"));
+    }
+
     @ExceptionHandler(Exception.class)
     public ResponseEntity<ApiResponse<Object>> onOther(Exception ex) {
         log.error("unhandled server error", ex);