refactor(Design): 重构设计页面组件和逻辑

- 修改 QuestionAction 组件,优化题前隐藏和题后跳转的逻辑和界面
- 更新 ChooseQuestion 组件,改进选项索引的处理方式
- 调整 Design/Index 组件,替换 BaseSelect 为 Choice 组件
- 更新 components.d.ts,添加 VanButton 和 VanDialog 的类型声明
This commit is contained in:
陈昱达
2025-03-05 16:14:09 +08:00
parent 5f32c9eeee
commit af00e94f87
12 changed files with 1072 additions and 273 deletions

View File

@@ -0,0 +1,100 @@
<template>
<van-field
v-model="element.stem"
:label="element.stem"
:required="element.config.is_required === 1"
label-align="top"
class="base-select"
>
<template #label>
<div
:contenteditable="active"
class="van-field"
@blur="saveStem($event, element)"
v-html="element.stem"
></div>
</template>
<template #input>
<van-checkbox-group>
<template v-for="(item, index) in element.options" :key="index">
<option-action v-model:data="element.options[index]" :active="active">
<template #item="{ element: it, index: itIndex }">
<van-checkbox
:key="itIndex"
:name="it.value"
:label="it.label"
:disabled="it.disabled"
icon-size="0.45rem"
>
<template #default>
<div class="flex align-center van-cell">
<div
class="van-cell--borderless"
:contenteditable="active"
@blur="saveOption($event, it)"
v-html="it.option"
></div>
<div v-if="it.is_other">
<input class="other-input" type="text" />
</div>
</div>
</template>
</van-checkbox>
</template>
</option-action>
</template>
</van-checkbox-group>
</template>
</van-field>
</template>
<script setup>
import OptionAction from '@/views/Design/components/ActionCompoents/OptionAction.vue';
import { ref } from 'vue';
const props = defineProps({
element: {
type: Object,
default: () => {
return {
stem: ''
};
}
},
active: {
type: Boolean,
default: false
}
});
const element = ref(props.element);
const saveOption = (e, ele) => {
ele.option = e.target.innerHTML;
};
const saveStem = (e, ele) => {
ele.stem = e.target.innerHTML;
};
</script>
<style scoped lang="scss">
.base-select {
& .van-checkbox-group {
width: 100%;
& .van-checkbox {
width: 100%;
& ::v-deep .van-checkbox__label {
width: 100%;
}
}
}
& .other-input {
width: 100px;
height: 20px;
margin-left: 20px;
padding: 3px 5px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
}
</style>