Done

frontend/src/components/CfTurnstile.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="cf-turnstile">
+    <div ref="turnstileWidget"></div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const turnstileWidget = ref(null)
+const emit = defineEmits(['verify'])
+
+onMounted(() => {
+  if (window.turnstile) {
+    window.turnstile.render(turnstileWidget.value, {
+      sitekey: 'your-site-key',
+      callback: (token) => {
+        emit('verify', token)
+      },
+    })
+  }
+})
+</script>
+
+<style scoped>
+.cf-turnstile {
+  margin: 1rem 0;
+}
+</style>

frontend/src/components/NavBar.vue

@@ -0,0 +1,33 @@
+<template>
+  <nav class="navbar">
+    <router-link to="/">首页</router-link>
+    <router-link to="/user/dashboard">用户面板</router-link>
+    <router-link to="/admin/dashboard" v-if="isAdmin">管理面板</router-link>
+    <button @click="logout">退出</button>
+  </nav>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+const isAdmin = computed(() => authStore.user?.role === 'admin')
+
+const logout = () => {
+  authStore.logout()
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.navbar {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: #f0f0f0;
+}
+</style>