Henry_Du/ClassHomeworkBoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/ZeroCatDev/Classworks

Browse Source
This commit is contained in:
干冰DryIce
2025-11-02 12:09:46 +08:00
parent 5c27a30fde 97fe02143f
commit c36e4defc2
31 changed files with 3677 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.vue
+273 -26
View File
@@ -7,6 +7,31 @@
<v-spacer />
<template #append>
<!-- 只读 Token 警告 -->
<v-chip
v-if="tokenDisplayInfo.readonly"
color="warning"
variant="tonal"
class="mx-2"
prepend-icon="mdi-lock-alert"
>
只读
</v-chip>
<!-- 学生名称显示 chip（始终蓝色） -->
<v-chip
v-if="tokenDisplayInfo.show"
color="primary"
variant="tonal"
class="mx-2"
prepend-icon="mdi-account"
:style="{ cursor: tokenDisplayInfo.disabled ? 'default' : 'pointer' }"
@click="handleTokenChipClick"
>
{{ tokenDisplayInfo.text }}
</v-chip>
<v-btn icon="mdi-chat" variant="text" @click="isChatOpen = true" />
<v-btn
icon="mdi-bell"
variant="text"
@@ -17,7 +42,17 @@
<v-btn icon="mdi-cog" variant="text" @click="$router.push('/settings')" />
</template>
</v-app-bar>
<div class="d-flex">
<!-- 初始化选择卡片，仅在首页且需要授权时显示；不影响顶栏 -->
<init-service-chooser v-if="shouldShowInit" @done="settingsTick++" />
<!-- 学生姓名管理组件 -->
<StudentNameManager
v-if="!shouldShowInit"
ref="studentNameManager"
@token-info-updated="updateTokenDisplayInfo"
/>
<div v-if="!shouldShowInit" class="d-flex">
<!-- 主要内容区域 -->
<v-container class="main-window flex-grow-1 no-select" fluid>
<!-- 有内容的科目卡片 -->
@@ -36,6 +71,7 @@
border
height="100%"
class="glow-track"
:class="{ 'glow-highlight': highlightedCards[item.key] }"
@click="!isEditingDisabled && openDialog(item.key)"
@mousemove="handleMouseMove"
@touchmove="handleTouchMove"
@@ -59,7 +95,7 @@
<!-- 单独显示空科目 -->
<div class="empty-subjects mt-4">
<template v-if="emptySubjectDisplay === 'button'">
<v-btn-group divided variant="outlined">
<v-btn-group divided variant="tonal">
<v-btn
v-for="subject in unusedSubjects"
:key="subject.name"
@@ -180,6 +216,7 @@
<!-- 出勤统计区域 -->
<v-col
v-ripple="{ class: `text-${['primary','secondary','info','success','warning','error'][Math.floor(Math.random()*6)]}` }"
v-if="state.studentList && state.studentList.length"
class="attendance-area no-select"
cols="1"
@@ -541,6 +578,9 @@
<!-- 添加ICP备案悬浮组件 -->
<FloatingICP />
<!-- 设备聊天室（右下角浮窗） -->
<ChatWidget v-model="isChatOpen" :show-button="false" />
<!-- 添加确认对话框 -->
<v-dialog v-model="confirmDialog.show" max-width="400">
<v-card>
@@ -608,8 +648,8 @@
确认应用
</v-btn>
</v-card-actions>
</v-card>
</v-dialog><br/><br/><br/>
</v-card> </v-dialog
><br /><br /><br />
</template>
<script>
@@ -617,7 +657,10 @@ import MessageLog from "@/components/MessageLog.vue";
import RandomPicker from "@/components/RandomPicker.vue";
import FloatingToolbar from "@/components/FloatingToolbar.vue";
import FloatingICP from "@/components/FloatingICP.vue";
import ChatWidget from "@/components/ChatWidget.vue";
import HomeworkEditDialog from "@/components/HomeworkEditDialog.vue";
import InitServiceChooser from "@/components/InitServiceChooser.vue";
import StudentNameManager from "@/components/StudentNameManager.vue";
import dataProvider from "@/utils/dataProvider";
import {
getSetting,
@@ -631,7 +674,15 @@ import "../styles/transitions.scss";
import "../styles/global.scss";
import { pinyin } from "pinyin-pro";
import { debounce, throttle } from "@/utils/debounce";
import { Base64 } from 'js-base64';
import { Base64 } from "js-base64";
import {
getSocket,
on as socketOn,
off as socketOff,
joinToken,
leaveAll,
onConnect as onSocketConnect,
} from "@/utils/socketClient";
export default {
name: "Classworks 作业板",
@@ -641,6 +692,9 @@ export default {
FloatingToolbar,
FloatingICP,
HomeworkEditDialog,
InitServiceChooser,
ChatWidget,
StudentNameManager,
},
data() {
const defaultSubjects = [
@@ -653,7 +707,7 @@ export default {
{ name: "政治", order: 6 },
{ name: "历史", order: 7 },
{ name: "地理", order: 8 },
{ name: "其他", order: 9 }
{ name: "其他", order: 9 },
];
return {
@@ -684,7 +738,7 @@ export default {
snackbarText: "",
fontSize: getSetting("font.size"),
datePickerDialog: false,
selectedDate: new Date().toISOString().split("T")[0].replace(/-/g, ''),
selectedDate: new Date().toISOString().split("T")[0].replace(/-/g, ""),
selectedDateObj: new Date(),
refreshInterval: null,
showNoDataMessage: false,
@@ -721,6 +775,28 @@ export default {
cancelHandler: null,
icons: {},
},
settingsTick: 0,
isChatOpen: false,
highlightedCards: {}, // 记录哪些卡片需要高亮
// Token 显示信息（统一显示 token 信息和学生姓名）
tokenDisplayInfo: {
show: false,
readonly: false, // 是否是只读 token
text: '',
color: 'primary',
variant: 'tonal',
icon: 'mdi-account',
disabled: false
},
// 实时刷新信息
realtimeInfo: {
show: false,
time: "",
key: "",
},
$offKvChanged: null,
$offConnect: null,
debouncedRealtimeRefresh: null,
};
},
@@ -782,7 +858,7 @@ export default {
(key) => this.state.boardData.homework[key].content?.trim()
);
return this.state.availableSubjects
.filter(subject => !usedKeys.includes(subject.name))
.filter((subject) => !usedKeys.includes(subject.name))
.sort((a, b) => a.order - b.order);
},
emptySubjects() {
@@ -853,6 +929,16 @@ export default {
showAntiScreenBurnCard() {
return getSetting("display.showAntiScreenBurnCard");
},
shouldShowInit() {
const provider = getSetting("server.provider");
const isKv = provider === "kv-server" || provider === "classworkscloud";
const token = getSetting("server.kvToken");
// 仅首页
const onHome = this.$route?.path === "/";
// 依赖 settingsTick 使其在设置变更时重新计算
void this.settingsTick;
return onHome && isKv && (!token || token === "");
},
filteredStudents() {
let students = [...this.state.studentList];
@@ -915,7 +1001,7 @@ export default {
subjectOrder() {
return [...this.state.availableSubjects]
.sort((a, b) => a.order - b.order)
.map(subject => subject.name);
.map((subject) => subject.name);
},
},
@@ -956,6 +1042,24 @@ export default {
this.updateSettings();
});
// 连接学生姓名管理组件
this.$nextTick(() => {
const studentNameManager = this.$refs.studentNameManager;
if (studentNameManager) {
this.studentNameInfo.name = studentNameManager.currentStudentName;
this.studentNameInfo.isStudent = studentNameManager.isStudentToken;
this.studentNameInfo.openDialog = () => studentNameManager.openDialog();
// 监听学生姓名变化
this.$watch(() => studentNameManager.currentStudentName, (newName) => {
this.studentNameInfo.name = newName;
});
this.$watch(() => studentNameManager.isStudentToken, (isStudent) => {
this.studentNameInfo.isStudent = isStudent;
});
}
});
document.addEventListener(
"fullscreenchange",
this.fullscreenChangeHandler
@@ -976,6 +1080,14 @@ export default {
this.checkHashForRandomPicker();
window.addEventListener("hashchange", this.checkHashForRandomPicker);
// 实时频道：加入设备房间并监听键变化
this.setupRealtimeChannel();
// 初始化 Token 显示信息
this.$nextTick(() => {
this.updateTokenDisplayInfo();
});
} catch (err) {
console.error("初始化失败:", err);
this.showError("初始化失败，请刷新页面重试");
@@ -1008,9 +1120,63 @@ export default {
);
window.removeEventListener("hashchange", this.checkHashForRandomPicker);
// 退出设备房间并清理监听
try {
if (this.$offKvChanged) this.$offKvChanged();
if (this.$offConnect) this.$offConnect();
leaveAll();
} catch (e) {
void e;
}
},
methods: {
// 更新 Token 显示信息
updateTokenDisplayInfo() {
const manager = this.$refs.studentNameManager
if (!manager || !manager.hasToken) {
this.tokenDisplayInfo.show = false
this.tokenDisplayInfo.readonly = false
return
}
const displayName = manager.displayName
const isReadOnly = manager.isReadOnly
const isStudent = manager.isStudentToken
// 设置只读状态（对所有类型的 token 都显示）
this.tokenDisplayInfo.readonly = isReadOnly
// 只有学生类型的 token 才显示名称 chip
if (!isStudent) {
this.tokenDisplayInfo.show = false
return
}
// 设置学生名称显示（始终蓝色）
this.tokenDisplayInfo.text = displayName
this.tokenDisplayInfo.color = 'primary'
this.tokenDisplayInfo.icon = 'mdi-account'
this.tokenDisplayInfo.disabled = isReadOnly // 只读时不可点击
this.tokenDisplayInfo.show = true
},
// 处理 Token Chip 点击
handleTokenChipClick() {
console.log('Token chip clicked')
const manager = this.$refs.studentNameManager
console.log('Manager:', manager)
console.log('Is student token:', manager?.isStudentToken)
if (manager && manager.isStudentToken) {
console.log('Opening dialog...')
manager.openDialog()
} else {
console.log('Cannot open dialog - conditions not met')
}
},
ensureDate(dateInput) {
if (dateInput instanceof Date) {
return dateInput;
@@ -1085,10 +1251,13 @@ export default {
if (response.error.code === "NOT_FOUND") {
this.state.showNoDataMessage = true;
this.state.noDataMessage = response.error.message;
this.state.boardData = {
homework: {},
attendance: { absent: [], late: [], exclude: [] },
};
// 只有当前没有数据时才设置为空，避免覆盖已有的本地数据
if (!this.state.boardData || (!this.state.boardData.homework && !this.state.boardData.attendance)) {
this.state.boardData = {
homework: {},
attendance: { absent: [], late: [], exclude: [] },
};
}
} else {
throw new Error(response.error.message);
}
@@ -1106,11 +1275,16 @@ export default {
this.$message.success("下载成功", "数据已更新");
}
} catch (error) {
this.state.boardData = {
homework: {},
attendance: { absent: [], late: [], exclude: [] },
};
// 数据加载失败时不覆盖现有数据，只显示错误信息
console.error("数据加载失败:", error);
this.$message.error("下载失败", error.message);
// 如果当前没有任何数据，才初始化为空数据
if (!this.state.boardData || (!this.state.boardData.homework && !this.state.boardData.attendance)) {
this.state.boardData = {
homework: {},
attendance: { absent: [], late: [], exclude: [] },
};
}
} finally {
this.loading.download = false;
}
@@ -1194,9 +1368,7 @@ export default {
const response = await dataProvider.loadData("classworks-list-main");
if (response.success != false && Array.isArray(response)) {
this.state.studentList = response.map(
(student) => student.name
);
this.state.studentList = response.map((student) => student.name);
}
} catch (error) {
console.warn(
@@ -1214,7 +1386,9 @@ export default {
async loadSubjects() {
try {
const subjectsResponse = await dataProvider.loadData("classworks-config-subject");
const subjectsResponse = await dataProvider.loadData(
"classworks-config-subject"
);
if (subjectsResponse && Array.isArray(subjectsResponse)) {
// 更新科目列表
this.state.availableSubjects = subjectsResponse;
@@ -1370,6 +1544,8 @@ export default {
this.state.contentStyle = { "font-size": `${this.state.fontSize}px` };
this.setupAutoRefresh();
this.updateBackendUrl();
// 触发依赖刷新（例如 shouldShowInit）
this.settingsTick++;
},
async handleDateSelect(newDate) {
@@ -1393,10 +1569,7 @@ export default {
.catch(() => {});
// Load both data and subjects in parallel
await Promise.all([
this.downloadData(),
this.loadSubjects()
]);
await Promise.all([this.downloadData(), this.loadSubjects()]);
}
} catch (error) {
console.error("Date processing error:", error);
@@ -1430,6 +1603,80 @@ export default {
}));
},
// 实时频道：加入设备房间并监听键变化
setupRealtimeChannel() {
try {
const token = getSetting("server.kvToken");
if (!token) {
console.warn("未配置 KV Token，无法加入实时频道");
return;
}
// Ensure socket created
getSocket();
joinToken(token);
// Re-join on reconnect
this.$offConnect = onSocketConnect(() => joinToken(token));
// Debounce refresh to avoid storms
if (!this.debouncedRealtimeRefresh) {
this.debouncedRealtimeRefresh = debounce(async () => {
const oldHomework = JSON.parse(
JSON.stringify(this.state.boardData.homework)
);
await this.downloadData();
const now = new Date();
const hh = String(now.getHours()).padStart(2, "0");
const mm = String(now.getMinutes()).padStart(2, "0");
const ss = String(now.getSeconds()).padStart(2, "0");
// 使用消息记录工具发送通知
this.$message?.info(
"数据已更新",
`已于 ${hh}:${mm}:${ss} 自动刷新`
); // 检测哪些科目发生了变化
const changed = {};
for (const key in this.state.boardData.homework) {
const oldContent = oldHomework[key]?.content || "";
const newContent =
this.state.boardData.homework[key]?.content || "";
if (oldContent !== newContent) {
changed[key] = true;
}
}
// 删除的科目也算变化
for (const key in oldHomework) {
if (!this.state.boardData.homework[key]) {
changed[key] = true;
}
}
// 设置高亮
this.highlightedCards = changed;
// 3秒后移除高亮
setTimeout(() => {
this.highlightedCards = {};
}, 10000);
}, 800);
}
const handler = (msg) => {
// Expect msg = { uuid, key, action, created?, updatedAt?, deletedAt?, batch? }
if (!msg) return;
// We only care about current date key changes
const expectedKey = `classworks-data-${this.state.dateString}`;
if (msg.key !== expectedKey) return;
if (msg.action !== "upsert" && msg.action !== "delete") return;
// Trigger a debounced refresh
this.debouncedRealtimeRefresh?.(msg.key);
};
this.$offKvChanged = socketOn("kv-key-changed", handler);
} catch (e) {
console.warn("实时频道初始化失败", e);
}
},
setAllPresent() {
this.state.boardData.attendance = {
@@ -1728,7 +1975,7 @@ export default {
try {
const binaryString = atob(configParam);
const bytes = Uint8Array.from(binaryString, c => c.charCodeAt(0));
const bytes = Uint8Array.from(binaryString, (c) => c.charCodeAt(0));
const decodedString = new TextDecoder().decode(bytes);
const decodedConfig = JSON.parse(decodedString);
console.log("从URL读取配置:", decodedConfig);