faceRollingKB

示例：

<script setup lang="ts">
const form = Provide(FormModel<TData>);
form.mode = FormMode.edit;
form.items = [
describeControl({
type: controlWrap('t-input'),
label: 'xxx：',
prop: 'yyy',
value: '',
validator: [FormValidator.required, FormValidator.max(50)],
options: {
placeholder: '请输入 xxx'
}
}),
];
form.resetData();
function onConfirm() {
form
.validate()
.then(() => {
return service.save(form.data);
})
.then(() => {
MessagePlugin.success('操作成功');
})
.catch((err) => {
MessagePlugin.error(err?.message || err);
});
};
</script>

<template>
<div v-if="form.data" v-grid.form="2" class="ph-20 gr-24 gc-12 mb-24">
<q-form-item prop="aaa"></q-form-item>
<q-form-item prop="bbb"></q-form-item>
<q-form-item v-if="form.data.bbb === '???'" prop="ccc"></q-form-item>
<q-form-item prop="ddd"></q-form-item>
</div>
</template>

<style scoped lang="less"></style>

表单设计不建议使用 vuex 或 pinia ，这两个都是用来管理全局变量的，管理局部模块化数据的话就有点吃力，我是使用 vue 自带的 providers ，再根据自己的想法封装了一套依赖注入来实现的，整体表单通过 FormModel 管理数据和表单项配置，并共享给整个组件树，每个表单项也都有专门的 FormControl 来对接表单的各种操作，但是从 0 到 1 的成本有点高，你要有心理准备

经验上讲，必须产品和设计配合第三方 UI 库，否则还是自己做适配来的方便

class Dep {
constructor(value) {
this._value = value;
}

_value
get value() {
return this._value;
}

set value(newValue) {
this._value = newValue;
}
}

不要锁不要队列，只看最终一致性的话，数据库的压力最小

computed 本身就是为了扩展 data ，设计成 property 是最合适的，跟 method 没什么关系；而且要是调方法也有缓存，你 debugger 的时候岂不是心里一万个草泥马么？

哎，仿佛几年前的 ie，我遇到的问题是输入完成后键盘消失但是页面底部出现一块有时候白色有时候灰色的背景，头疼

实践中发现 rem 单位用处不大，使用 px 单位再加上 media 就可以同时适配不同尺寸的页面，当然设计也要根据页面尺寸来