1
0
mirror of https://github.com/ZeroCatDev/Classworks.git synced 2025-07-05 11:09:29 +00:00
This commit is contained in:
SunWuyuan 2025-03-09 15:45:27 +08:00
parent f9e1dd5412
commit cc950d1fc6
No known key found for this signature in database
GPG Key ID: A6A54CF66F56BB64
2 changed files with 172 additions and 42 deletions

View File

@ -53,33 +53,35 @@
<v-container class="main-window flex-grow-1" fluid> <v-container class="main-window flex-grow-1" fluid>
<!-- 有内容的科目卡片 --> <!-- 有内容的科目卡片 -->
<div ref="gridContainer" class="grid-masonry"> <div ref="gridContainer" class="grid-masonry">
<div <TransitionGroup name="grid">
v-for="item in sortedItems" <div
:key="item.key" v-for="item in sortedItems"
class="grid-item" :key="item.key"
:style="{ class="grid-item"
'grid-row-end': `span ${item.rowSpan}`, :style="{
order: item.order, 'grid-row-end': `span ${item.rowSpan}`,
}" order: item.order,
> }"
<v-card
border
height="100%"
@click="!isEditingDisabled && openDialog(item.key)"
> >
<v-card-title>{{ item.name }}</v-card-title> <v-card
<v-card-text :style="state.contentStyle"> border
<v-list> height="100%"
<v-list-item @click="!isEditingDisabled && openDialog(item.key)"
v-for="text in splitPoint(item.content)" >
:key="text" <v-card-title>{{ item.name }}</v-card-title>
> <v-card-text :style="state.contentStyle">
{{ text }} <v-list>
</v-list-item> <v-list-item
</v-list> v-for="text in splitPoint(item.content)"
</v-card-text> :key="text"
</v-card> >
</div> {{ text }}
</v-list-item>
</v-list>
</v-card-text>
</v-card>
</div>
</TransitionGroup>
</div> </div>
<!-- 单独显示空科目 --> <!-- 单独显示空科目 -->
@ -98,22 +100,24 @@
</v-btn-group> </v-btn-group>
</template> </template>
<div v-else class="empty-subjects-grid"> <div v-else class="empty-subjects-grid">
<v-card <TransitionGroup name="v-list">
v-for="subject in unusedSubjects" <v-card
:key="subject.key" v-for="subject in unusedSubjects"
border :key="subject.key"
class="empty-subject-card" border
:disabled="isEditingDisabled" class="empty-subject-card"
@click="openDialog(subject.key)" :disabled="isEditingDisabled"
> @click="openDialog(subject.key)"
<v-card-title class="text-subtitle-1"> >
{{ subject.name }} <v-card-title class="text-subtitle-1">
</v-card-title> {{ subject.name }}
<v-card-text class="text-center"> </v-card-title>
<v-icon size="small" color="grey"> mdi-plus </v-icon> <v-card-text class="text-center">
<div class="text-caption text-grey">点击添加作业</div> <v-icon size="small" color="grey"> mdi-plus </v-icon>
</v-card-text> <div class="text-caption text-grey">点击添加作业</div>
</v-card> </v-card-text>
</v-card>
</TransitionGroup>
</div> </div>
</div> </div>
</v-container> </v-container>
@ -292,6 +296,7 @@ import dataProvider from "@/utils/dataProvider";
import { getSetting, watchSettings, setSetting } from "@/utils/settings"; import { getSetting, watchSettings, setSetting } from "@/utils/settings";
import { useDisplay } from "vuetify"; import { useDisplay } from "vuetify";
import "../styles/index.scss"; import "../styles/index.scss";
import "../styles/transitions.scss"; //
import { debounce, throttle } from "@/utils/debounce"; import { debounce, throttle } from "@/utils/debounce";
export default { export default {

125
src/styles/transitions.scss Normal file
View File

@ -0,0 +1,125 @@
// Material Design 3 动画曲线
$emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
$emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
$standard-easing: cubic-bezier(0.2, 0.0, 0, 1.0);
$standard-decelerate: cubic-bezier(0.0, 0.0, 0.0, 1.0);
$standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
// 网格项目的进入和离开动画
.grid-item {
transition: transform 400ms $emphasized-decelerate,
opacity 200ms $standard-easing;
will-change: transform, opacity;
backface-visibility: hidden;
&.v-enter-active {
transition: transform 400ms $emphasized-decelerate,
opacity 250ms $standard-easing;
}
&.v-move {
transition: transform 400ms $emphasized-decelerate;
z-index: 1;
}
&.v-leave-active {
position: absolute !important;
transition: transform 300ms $emphasized-accelerate,
opacity 200ms $standard-accelerate;
}
&.v-enter-from,
&.v-leave-to {
opacity: 0;
transform: scale(0.95);
}
}
// 空科目卡片动画
.empty-subject-card {
transition: all 250ms $standard-easing;
&:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
}
// 列表项目动画
.v-list-enter-active {
transition: all 400ms $emphasized-decelerate;
}
.v-list-leave-active {
transition: all 300ms $emphasized-accelerate;
}
.v-list-enter-from,
.v-list-leave-to {
opacity: 0;
transform: translateX(-24px);
}
// 出勤数据变化动画
.attendance-area {
h2, h3 {
transition: all 300ms $standard-easing;
}
}
// 卡片展开收起动画
.v-card {
transition: all 400ms $emphasized-decelerate;
&:active {
transform: scale(0.98);
transition-duration: 100ms;
}
}
// 修改对话框过渡动画 - 移除点击波纹效果
.v-dialog {
&::before {
display: none !important;
}
}
// 对话框过渡动画
.v-dialog {
// 禁用原生点击波纹效果
&::before,
&::after {
display: none !important;
}
// 禁用卡片点击效果
.v-card {
transition: none;
&:active {
transform: none;
}
}
}
// 保持对话框本身的过渡动画
.v-dialog-transition-enter-active {
transition: transform 400ms $emphasized-decelerate,
opacity 300ms $standard-easing;
}
.v-dialog-transition-leave-active {
transition: transform 250ms $emphasized-accelerate,
opacity 200ms $standard-accelerate;
}
// 按钮状态变化动画
.v-btn {
transition: background-color 250ms $standard-easing,
transform 200ms $emphasized-decelerate;
&:active {
transform: scale(0.96);
transition-duration: 100ms;
}
}