ClassHomeworkBoard/src/components/auth/README.md

认证组件

这个目录包含可复用的认证相关组件,可以在应用的任何地方使用。

组件列表

DeviceAuthDialog.vue

设备认证对话框,用于通过 namespace 和密码进行设备认证。

Props:

• showCancel (Boolean): 是否显示取消按钮,默认为 false

Events:

• @success: 认证成功时触发,传递认证数据
• @cancel: 点击取消按钮时触发

暴露的方法:

• reset(): 清空表单和错误信息

使用示例:

<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(): 清空表单和错误信息

使用示例:

<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(): 清空表单

使用示例:

<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: 关闭指南时触发

使用示例:

<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 中使用,以获得最佳的用户体验