1
0
mirror of https://github.com/ZeroCatDev/Classworks.git synced 2026-02-04 16:03:10 +00:00

feat(grid): 优化只读模式下的作业网格组件

- 实现只读令牌状态检测功能,动态显示不同图标
- 在卡片和按钮中根据只读状态切换图标(加号或取消图标)
- 添加StudentNameManager组件依赖注入
- 重构组件数据结构,添加isReadOnlyToken响应式数据
- 实现异步检查只读状态的方法,支持多种访问方式
- 优化卡片文本显示,只读时显示"当日无作业"提示而不是“点击添加作业”
This commit is contained in:
chenziang 2025-12-31 19:56:13 +08:00
parent 46570636df
commit 9c78356bf5
No known key found for this signature in database
GPG Key ID: A3174D7BE243D848

View File

@ -153,7 +153,9 @@
variant="tonal" variant="tonal"
@click="handleCardClick('dialog', subject.name)" @click="handleCardClick('dialog', subject.name)"
> >
<v-icon start size="small">mdi-plus</v-icon> <v-icon start size="small">
{{ isReadOnlyToken ? 'mdi-cancel' : 'mdi-plus' }}
</v-icon>
{{ subject.name }} {{ subject.name }}
</v-chip> </v-chip>
</div> </div>
@ -165,7 +167,9 @@
:key="subject.name" :key="subject.name"
@click="handleCardClick('dialog', subject.name)" @click="handleCardClick('dialog', subject.name)"
> >
<v-icon start> mdi-plus</v-icon> <v-icon start>
{{ isReadOnlyToken ? 'mdi-cancel' : 'mdi-plus' }}
</v-icon>
{{ subject.name }} {{ subject.name }}
</v-btn> </v-btn>
</v-btn-group> </v-btn-group>
@ -183,8 +187,14 @@
{{ subject.name }} {{ subject.name }}
</v-card-title> </v-card-title>
<v-card-text class="text-center"> <v-card-text class="text-center">
<v-icon color="grey" size="small"> mdi-plus</v-icon> <template v-if="isReadOnlyToken">
<div class="text-caption text-grey">点击添加作业</div> <v-icon color="grey" size="small"> mdi-cancel </v-icon>
<div class="text-caption text-grey"> 当日无作业 </div>
</template>
<template v-else>
<v-icon color="grey" size="small"> mdi-plus </v-icon>
<div class="text-caption text-grey"> 点击添加作业 </div>
</template>
</v-card-text> </v-card-text>
</v-card> </v-card>
</TransitionGroup> </TransitionGroup>
@ -233,10 +243,17 @@ export default {
}, },
}, },
emits: ["open-dialog", "open-attendance", "disabled-click"], emits: ["open-dialog", "open-attendance", "disabled-click"],
mounted() { data() {
return {
isReadOnlyToken: false,
}
},
async mounted() {
/* eslint-disable no-undef */
this.resizeObserver = new ResizeObserver(() => { this.resizeObserver = new ResizeObserver(() => {
this.resizeAllGridItems(); this.resizeAllGridItems();
}); });
/* eslint-enable no-undef */
// Observe the grid container for width changes // Observe the grid container for width changes
if (this.$refs.gridContainer) { if (this.$refs.gridContainer) {
@ -256,6 +273,9 @@ export default {
}); });
} }
}); });
//
await this.checkReadOnlyStatus();
}, },
updated() { updated() {
// When items change, re-observe new items // When items change, re-observe new items
@ -276,6 +296,53 @@ export default {
} }
}, },
methods: { methods: {
async checkReadOnlyStatus() {
// StudentNameManager
try {
// Vue 2$parent$root访
let manager = null;
// 访
if (this.$parent && this.$parent.$refs && this.$parent.$refs.studentNameManager) {
manager = this.$parent.$refs.studentNameManager;
} else if (this.$root && this.$root.$refs && this.$root.$refs.studentNameManager) {
manager = this.$root.$refs.studentNameManager;
}
if (manager && typeof manager.isReadOnly !== 'undefined') {
this.isReadOnlyToken = manager.isReadOnly;
} else {
// 访managertoken
// 使utils/settings
const { getSetting } = await import('@/utils/settings');
const token = getSetting('server.kvToken');
if (token) {
// APItoken
const { default: axios } = await import('@/axios/axios');
const serverUrl = getSetting('server.domain');
if (serverUrl) {
try {
const tokenResponse = await axios.get(`${serverUrl}/kv/_token`, {
headers: {
Authorization: `Bearer ${token}`
}
});
if (tokenResponse.data && typeof tokenResponse.data.isReadOnly !== 'undefined') {
this.isReadOnlyToken = tokenResponse.data.isReadOnly;
}
} catch (err) {
console.error('获取Token信息失败:', err);
}
}
}
}
} catch (error) {
console.error('检查只读状态失败:', error);
}
},
resizeGridItem(item) { resizeGridItem(item) {
const grid = this.$refs.gridContainer; const grid = this.$refs.gridContainer;
if (!grid) return; if (!grid) return;