顶部栏问题

Author: yqz

frontend/src/components/BlogHeader.vue

@@ -1,8 +1,7 @@
 <template>
-  <div>
-    <header class="site-top-bar" role="banner">
-      <div class="site-top-bar-inner">
-        <div class="site-top-actions">
+  <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"
@@ -19,14 +18,15 @@
           </span>
           项目源码
         </a>
-        <button type="button" class="top-action-btn" aria-label="问题反馈" @click="openFeedback">
+        <button type="button" class="top-action-btn" aria-label="面试内容" @click="onInterviewClick">
           <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="M4 4h16v16H4z" />
-              <path d="M22 6l-10 7L2 6" />
+              <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" />
             </svg>
           </span>
-          问题反馈
+          面试内容
         </button>
       </div>
       <button
@@ -37,60 +37,17 @@
       >
         <span class="theme-toggle-icon" aria-hidden="true">{{ isDark ? '☀' : '☽' }}</span>
         <span class="theme-toggle-text">{{ isDark ? '浅色' : '深色' }}</span>
-        </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>
+      </button>
+    </div>
+  </header>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { 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'
@@ -105,68 +62,7 @@ function onToggle() {
   sync()
 }
 
-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
-  }
+function onInterviewClick() {
+  showMessage('功能暂未开放')
 }
 </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>