public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-09-28 23:27:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 升级Vue SFC深度选择器语法为::v-deep

Browse Source 
本次提交将项目中所有使用`::deep`的CSS深度选择器统一替换为Vue 3官方推荐的`::v-deep`语法，修复了旧版语法在新版本Vue生态中的兼容性问题，同时修正了部分组件的响应式表单定义方式，将`reactive`配合`Object.assign`的写法调整为更符合Vue 3组合式API规范的`ref`响应式状态写法，整体优化了代码的可维护性和兼容性。
This commit is contained in:
zhangtao
2026-05-11 15:46:18 +08:00
parent 4112942a14
commit 80d4f18e8b
64 changed files with 510 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/web/src/views/module_example/demo/index.vue
+9 -9
View File
@@ -497,7 +497,7 @@ const dialogVisible = reactive({
const detailFormData = ref<DemoTable>({});
const formData = reactive<DemoForm>({
const formData = ref<DemoForm>({
id: undefined,
name: "",
status: "0",
@@ -620,15 +620,15 @@ async function openEditDialog(type: "add" | "edit", row?: DemoTable) {
dialogVisible.type = type === "add" ? "create" : "update";
if (type === "add") {
dialogVisible.title = "新增示例";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
metadataList.value = [];
} else if (row?.id) {
dialogVisible.title = "修改";
const response = await DemoAPI.getDemoDetail(row.id);
Object.assign(formData, response.data.data);
if (formData.i && typeof formData.i === "object") {
metadataList.value = Object.entries(formData.i).map(([key, value]) => ({
Object.assign(formData.value, response.data.data);
if (formData.value.i && typeof formData.value.i === "object") {
metadataList.value = Object.entries(formData.value.i).map(([key, value]) => ({
key,
value: String(value),
}));
@@ -644,7 +644,7 @@ async function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
}
Object.assign(formData, initialFormData);
Object.assign(formData.value, initialFormData);
metadataList.value = [];
}
@@ -656,7 +656,7 @@ async function handleCloseDialog() {
async function handleSubmit() {
dataFormRef.value.validate(async (valid: boolean) => {
if (!valid) return;
const submitData = { ...formData };
const submitData = { ...formData.value };
if (metadataList.value.length > 0) {
const metadataObj: Record<string, string> = {};
metadataList.value.forEach((item) => {
@@ -668,7 +668,7 @@ async function handleSubmit() {
} else {
submitData.i = undefined;
}
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await DemoAPI.updateDemo(id, { id, ...submitData });
frontend/web/src/views/module_example/demo01/index.vue
+10 -10
View File
@@ -368,7 +368,7 @@ const dialogVisible = reactive({
const detailFormData = ref<Demo01Table>({});
const formData = reactive<Demo01Form>({
const formData = ref<Demo01Form>({
id: undefined,
name: "",
status: "0",
@@ -499,12 +499,12 @@ async function openEditDialog(type: "add" | "edit", row?: Demo01Table) {
dialogVisible.type = type === "add" ? "create" : "update";
if (type === "add") {
dialogVisible.title = "新增示例01";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
} else if (row?.id) {
dialogVisible.title = "修改";
const response = await Demo01API.getDemo01Detail(row.id);
Object.assign(formData, response.data.data);
Object.assign(formData.value, response.data.data);
}
demo01FormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -513,7 +513,7 @@ async function openEditDialog(type: "add" | "edit", row?: Demo01Table) {
async function resetForm() {
dataFormRef.value?.ref?.resetFields();
dataFormRef.value?.ref?.clearValidate();
Object.assign(formData, initialFormData);
Object.assign(formData.value, initialFormData);
}
async function handleCloseDialog() {
@@ -524,13 +524,13 @@ async function handleCloseDialog() {
async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await Demo01API.updateDemo01(id, { id, ...formData });
await Demo01API.updateDemo01(id, { id, ...formData.value });
await refreshUpdate();
} else {
await Demo01API.createDemo01(formData);
await Demo01API.createDemo01(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
@@ -627,11 +627,11 @@ function openExportModal() {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
</style>