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.

src/components/auth/README.md

@@ -0,0 +1,133 @@
+# 认证组件
+
+这个目录包含可复用的认证相关组件,可以在应用的任何地方使用。
+
+## 组件列表
+
+### DeviceAuthDialog.vue
+设备认证对话框,用于通过 namespace 和密码进行设备认证。
+
+**Props:**
+- `showCancel` (Boolean): 是否显示取消按钮,默认为 `false`
+
+**Events:**
+- `@success`: 认证成功时触发,传递认证数据
+- `@cancel`: 点击取消按钮时触发
+
+**暴露的方法:**
+- `reset()`: 清空表单和错误信息
+
+**使用示例:**
+```vue
+<template>
+  <v-dialog v-model="dialog">
+    <DeviceAuthDialog
+      :show-cancel="true"
+      @success="handleSuccess"
+      @cancel="dialog = false"
+    />
+  </v-dialog>
+</template>
+
+<script setup>
+import DeviceAuthDialog from '@/components/auth/DeviceAuthDialog.vue'
+</script>
+```
+
+---
+
+### TokenInputDialog.vue
+Token 输入对话框,用于手动输入 KV 授权 Token。
+
+**Props:**
+- `showCancel` (Boolean): 是否显示取消按钮,默认为 `false`
+
+**Events:**
+- `@success`: Token 验证成功时触发
+- `@cancel`: 点击取消按钮时触发
+
+**暴露的方法:**
+- `reset()`: 清空表单和错误信息
+
+**使用示例:**
+```vue
+<template>
+  <v-dialog v-model="dialog">
+    <TokenInputDialog
+      :show-cancel="true"
+      @success="handleSuccess"
+      @cancel="dialog = false"
+    />
+  </v-dialog>
+</template>
+
+<script setup>
+import TokenInputDialog from '@/components/auth/TokenInputDialog.vue'
+</script>
+```
+
+---
+
+### AlternativeCodeDialog.vue
+替代代码输入对话框（功能暂未实现）。
+
+**Props:**
+- `showCancel` (Boolean): 是否显示取消按钮,默认为 `false`
+
+**Events:**
+- `@submit`: 提交代码时触发,传递代码内容
+- `@cancel`: 点击取消按钮时触发
+
+**暴露的方法:**
+- `reset()`: 清空表单
+
+**使用示例:**
+```vue
+<template>
+  <v-dialog v-model="dialog">
+    <AlternativeCodeDialog
+      :show-cancel="true"
+      @submit="handleSubmit"
+      @cancel="dialog = false"
+    />
+  </v-dialog>
+</template>
+
+<script setup>
+import AlternativeCodeDialog from '@/components/auth/AlternativeCodeDialog.vue'
+</script>
+```
+
+---
+
+### FirstTimeGuide.vue
+初次使用指南,介绍 Classworks KV 的功能和使用方式。
+
+**Events:**
+- `@close`: 关闭指南时触发
+
+**使用示例:**
+```vue
+<template>
+  <v-dialog v-model="dialog">
+    <FirstTimeGuide @close="dialog = false" />
+  </v-dialog>
+</template>
+
+<script setup>
+import FirstTimeGuide from '@/components/auth/FirstTimeGuide.vue'
+</script>
+```
+
+## 设计原则
+
+1. **可复用性**: 所有组件都被设计为独立可复用的,可以在应用的任何地方使用
+2. **独立性**: 每个组件都包含自己的逻辑和样式,不依赖外部状态
+3. **统一接口**: 所有对话框组件都遵循相同的 props 和 events 模式
+4. **响应式设计**: 组件适配各种屏幕尺寸
+
+## 注意事项
+
+- 这些组件需要配合 Vuetify 使用
+- 组件内部使用了 `@/utils/settings` 和 `@/axios/axios`,确保这些依赖可用
+- 建议将这些组件包裹在 `v-dialog` 中使用,以获得最佳的用户体验