254 lines
10 KiB
Vue
254 lines
10 KiB
Vue
|
<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>
|