feat: Add ReadOnlyTokenWarning component and implement student name management dialog

- Introduced ReadOnlyTokenWarning.vue to alert users when using a read-only token. - Added StudentNameManager.vue for managing student names with a dialog interface. - Implemented AlternativeCodeDialog.vue for entering alternative codes (functionality pending). - Created DeviceAuthDialog.vue for device authentication using namespace and password. - Developed FirstTimeGuide.vue to guide users through the initial setup of Classworks KV. - Added TokenInputDialog.vue for manual input of KV authorization tokens. - Updated settings.vue to include a button for opening Classworks KV. - Enhanced error handling and user feedback across components.
2025-11-01 19:31:41 +08:00
parent a2b0cc9e08
commit df3c8e5a12
12 changed files with 2003 additions and 154 deletions
@@ -0,0 +1,103 @@
+<template>
+  <v-card>
+    <v-card-title>输入授权 Token</v-card-title>
+    <v-card-text>
+      <v-text-field
+        v-model="token"
+        label="KV 授权 Token"
+        placeholder="粘贴从授权页面获取的 Token"
+        variant="outlined"
+        density="comfortable"
+        hide-details="auto"
+        clearable
+      />
+      <v-alert
+        v-if="error"
+        type="error"
+        variant="tonal"
+        class="mt-3"
+      >
+        {{ error }}
+      </v-alert>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        v-if="showCancel"
+        variant="text"
+        @click="$emit('cancel')"
+      >
+        取消
+      </v-btn>
+      <v-btn
+        :disabled="!token || verifying"
+        :loading="verifying"
+        color="primary"
+        @click="saveToken"
+      >
+        保存 Token
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getSetting, setSetting } from '@/utils/settings'
+import axios from '@/axios/axios'
+
+defineProps({
+  showCancel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['success', 'cancel'])
+
+const token = ref('')
+const verifying = ref(false)
+const error = ref('')
+
+const saveToken = async () => {
+  if (!token.value || verifying.value) return
+  error.value = ''
+  verifying.value = true
+
+  try {
+    const serverUrl = getSetting('server.domain')
+    if (!serverUrl) throw new Error('未配置服务器域名')
+
+    await axios.get(`${serverUrl}/kv/_info`, {
+      headers: {
+        Accept: 'application/json',
+        'x-app-token': token.value,
+      },
+    })
+
+    // 验证通过再保存
+    setSetting('server.kvToken', token.value)
+    emit('success')
+
+  } catch (err) {
+    const status = err?.response?.status
+    if (status === 401 || status === 403) {
+      error.value = 'Token 无效或无权限,请确认后重试'
+    } else if (status === 404) {
+      error.value = '命名空间不存在或服务器未就绪'
+    } else {
+      error.value = err?.response?.data?.message || err?.message || '验证失败,请稍后重试'
+    }
+  } finally {
+    verifying.value = false
+  }
+}
+
+// 暴露清空表单的方法
+defineExpose({
+  reset: () => {
+    token.value = ''
+    error.value = ''
+  }
+})
+</script>