Love_Chengke/ClassHelper
1
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(courseware,docs): 完善课件传输与岛编辑并统一全仓文档

Browse Source 
- 增加课件上传、班级可见范围、设备补收与传输进度
- 整合自定义灵动岛编辑器和相关客户端交互
- 同步三端契约、数据库迁移、部署配置与隔离回归
- 按源码统一文档与官网说明，移除过时任务书和审查记录
- 保持产品版本为 1.4.0
This commit is contained in:
LoveChengke committed 2026-10-18 11:53:37 +08:00
1 parent 536379036a
commit c7f215a09c
127 files changed
+4334 -8482
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/desktop-client/src/renderer/components/IslandComponentSettings.vue
+254
View File
@@ -0,0 +1,254 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import {
ISLAND_COMPONENT_LABELS,
type IslandComponentNode,
type IslandComponentKind,
} from '@classhelper/shared';
const props = defineProps<{ node: IslandComponentNode }>();
const emit = defineEmits<{ change: []; remove: []; duplicate: []; wrap: [kind: IslandComponentKind] }>();
const node = computed(() => props.node),
tab = ref('content');
watch(
() => props.node.id,
() => {
tab.value = 'content';
},
);
const fonts = {
secondaryFontSize: '辅助文字',
bodyFontSize: '正文',
emphasizedFontSize: '强调文字',
largeFontSize: '大号文字',
} as const;
const containers = ['group', 'stack', 'slide', 'rolling'] as const;
</script>
<template>
<div class="component-settings">
<h3>{{ ISLAND_COMPONENT_LABELS[node.kind] }}</h3>
<el-tabs v-model="tab" stretch>
<el-tab-pane label="内容" name="content">
<el-form label-position="top">
<template v-if="node.kind === 'clock'">
<el-form-item label="12 小时制">
<el-switch v-model="node.settings.hour12" @change="emit('change')" />
</el-form-item>
<el-form-item label="显示秒">
<el-switch v-model="node.settings.seconds" @change="emit('change')" />
</el-form-item>
</template>
<el-form-item v-else-if="node.kind === 'countdown'" label="倒计时目标">
<el-select v-model="node.settings.target" @change="emit('change')">
<el-option label="自动：距上课 / 下课" value="auto" />
<el-option label="下一节课" value="next" />
<el-option label="本节下课" value="end" />
<el-option label="放学" value="school" />
</el-select>
</el-form-item>
<template v-else-if="node.kind === 'text'">
<el-form-item label="文字内容">
<el-input v-model="node.settings.text" type="textarea" :rows="3" @change="emit('change')" />
</el-form-item>
<el-form-item label="启用模板变量">
<el-switch v-model="node.settings.template" @change="emit('change')" />
</el-form-item>
<p class="hint">支持 {date} 日期、{time} 时间、{course} 当前课程。</p>
</template>
<template v-else-if="node.kind === 'schedule'">
<el-form-item label="显示课程">
<el-select v-model="node.settings.display" @change="emit('change')">
<el-option label="当前课程" value="current" />
<el-option label="下一节课" value="next" />
<el-option label="今日课表" value="today" />
</el-select>
</el-form-item>
<el-form-item v-if="node.settings.display === 'today'" label="显示节数">
<el-input-number v-model="node.settings.count" :min="1" :max="30" @change="emit('change')" />
</el-form-item>
<el-form-item label="显示课程时间">
<el-switch v-model="node.settings.showPeriod" @change="emit('change')" />
</el-form-item>
<el-form-item label="显示上课进度">
<el-switch v-model="node.settings.showProgress" @change="emit('change')" />
</el-form-item>
</template>
<template v-else-if="containers.includes(node.kind as (typeof containers)[number])">
<el-form-item label="排列方向">
<el-select v-model="node.settings.direction" @change="emit('change')">
<el-option label="横向" value="horizontal" />
<el-option label="纵向" value="vertical" />
</el-select>
</el-form-item>
<el-form-item label="组件间距">
<el-input-number v-model="node.settings.gap" :min="0" :max="80" @change="emit('change')" />
</el-form-item>
<el-form-item v-if="node.kind === 'slide'" label="切换间隔（秒）">
<el-input-number
v-model="node.settings.interval"
:min="1"
:max="300"
@change="emit('change')"
/>
</el-form-item>
<el-form-item v-if="node.kind === 'rolling'" label="滚动速度">
<el-input-number v-model="node.settings.speed" :min="1" :max="200" @change="emit('change')" />
</el-form-item>
</template>
<p v-else class="hint">此组件使用实时数据。可在外观和高级设置中调整显示。</p>
<el-divider />
<el-form-item label="包裹到容器">
<el-select
data-action="wrap"
model-value=""
placeholder="选择容器类型"
@change="(kind: IslandComponentKind) => emit('wrap', kind)"
>
<el-option
v-for="kind in containers"
:key="kind"
:label="ISLAND_COMPONENT_LABELS[kind]"
:value="kind"
/>
</el-select>
</el-form-item>
<div class="actions">
<el-button @click="emit('duplicate')">复制组件</el-button>
<el-button type="danger" plain @click="emit('remove')">删除</el-button>
</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="外观" name="appearance">
<el-form label-position="top">
<el-form-item label="独立外观">
<el-switch v-model="node.appearance.resourceOverridingEnabled" @change="emit('change')" />
</el-form-item>
<p class="hint">关闭时沿用灵动岛的整体外观。</p>
<el-form-item v-for="(label, key) in fonts" :key="key" :label="`${label}字号`">
<el-input-number
v-model="node.appearance[key]"
:disabled="!node.appearance.resourceOverridingEnabled"
:min="8"
:max="96"
@change="emit('change')"
/>
</el-form-item>
<el-form-item label="自定义文字颜色">
<el-switch
v-model="node.appearance.customForegroundEnabled"
:disabled="!node.appearance.resourceOverridingEnabled"
@change="emit('change')"
/>
<el-color-picker
v-if="node.appearance.customForegroundEnabled"
v-model="node.appearance.foreground"
@change="emit('change')"
/>
</el-form-item>
<el-form-item label="自定义背景颜色">
<el-switch
v-model="node.appearance.customBackgroundEnabled"
:disabled="!node.appearance.resourceOverridingEnabled"
@change="emit('change')"
/>
<el-color-picker
v-if="node.appearance.customBackgroundEnabled"
v-model="node.appearance.background"
@change="emit('change')"
/>
</el-form-item>
<el-form-item label="自定义背景透明度">
<el-switch
v-model="node.appearance.customBackgroundOpacityEnabled"
:disabled="!node.appearance.resourceOverridingEnabled"
@change="emit('change')"
/>
<el-input-number
v-if="node.appearance.customBackgroundOpacityEnabled"
v-model="node.appearance.backgroundOpacity"
:min="0"
:max="1"
:step="0.05"
@change="emit('change')"
/>
</el-form-item>
<el-form-item label="自定义圆角">
<el-switch
v-model="node.appearance.customCornerRadiusEnabled"
:disabled="!node.appearance.resourceOverridingEnabled"
@change="emit('change')"
/>
<el-input-number
v-if="node.appearance.customCornerRadiusEnabled"
v-model="node.appearance.cornerRadius"
:min="0"
:max="100"
@change="emit('change')"
/>
</el-form-item>
<el-form-item label="组件透明度">
<el-slider
v-model="node.appearance.opacity"
:min="0"
:max="1"
:step="0.05"
@change="emit('change')"
/>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="高级" name="advanced">
<el-form label-position="top">
<el-form-item label="对齐方式">
<el-select v-model="node.advanced.align" @change="emit('change')">
<el-option
v-for="(label, key) in { stretch: '拉伸', start: '起始', center: '居中', end: '末端' }"
:key="key"
:label="label"
:value="key"
/>
</el-select>
</el-form-item>
<el-form-item label="固定宽度（px）">
<el-input-number v-model="node.advanced.width" :min="0" :max="2000" @change="emit('change')" />
</el-form-item>
<el-form-item label="最大宽度（px）">
<el-input-number v-model="node.advanced.maxWidth" :min="0" :max="2000" @change="emit('change')" />
</el-form-item>
<p class="hint">宽度为 0 时自适应；对齐在父容器设定宽度时生效。</p>
<el-form-item label="隐藏条件">
<el-checkbox-group v-model="node.advanced.hideRules" @change="emit('change')">
<el-checkbox label="上课时" value="in-class" />
<el-checkbox label="没有消息时" value="no-message" />
<el-checkbox label="没有当前课程时" value="no-class" />
</el-checkbox-group>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</template>
<style scoped>
h3 {
margin: 0 0 6px;
}
.hint {
color: var(--ch-text-secondary);
line-height: 1.6;
font-size: 12px;
}
.actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.el-select {
width: 100%;
}
.el-form-item :deep(.el-form-item__content) {
gap: 10px;
}
.el-checkbox-group {
display: flex;
flex-direction: column;
}
</style>