🔱: [client] sync upgrade with 6 commits [trident-sync]

chore:
build: publish success
fix: 修复新页面编辑无法正确获取数据的bug

Closes https://github.com/fast-crud/fast-crud/issues/460
fix: 修复antdv4示例没有源码跳转按钮的bug
pref: 添加代码编辑器功能

- 新增 fs-editor-code组件实现代码编辑功能
- 支持 javascript、json、yaml三种语言
- 集成 monaco-editor 并配置相关 worker
- 添加代码格式校验功能
- 在 fast-extends 中引入新功能模块
This commit is contained in:
GitHub Actions Bot
2025-03-30 19:24:09 +00:00
parent 6f30d82394
commit 88a4e5051b
14 changed files with 240 additions and 8 deletions
@@ -40,6 +40,7 @@ export default defineComponent({
position: fixed;
right: 3px;
bottom: 20px;
z-index: 1000;
.fs-source-link {
text-align: left;
cursor: pointer;
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { BasicLayout, LockScreen, UserDropdown } from "/@/vben/layouts";
import FsSourceLink from "./components/source-link/index.vue";
import { computed } from "vue";
import { VBEN_DOC_URL } from "/@/vben/constants";
import { BookOpenText } from "/@/vben/icons";
@@ -43,5 +43,8 @@ async function handleLogout() {
<template #lock-screen>
<LockScreen :avatar @to-login="handleLogout" />
</template>
<template #extra>
<FsSourceLink />
</template>
</BasicLayout>
</template>
+1 -1
View File
@@ -188,7 +188,7 @@ const mockUtil: any = {
handle(req: any) {
let id = req.params.id;
id = parseInt(id);
const current = findById(req.body.id, list);
const current = findById(id, list);
return {
code: 0,
msg: "success",
@@ -2,7 +2,6 @@ import "./iconify";
import "./iconfont";
import FastCrud from "./fast-crud";
import permission from "./permission";
function install(app: any, options: any = {}) {
app.use(FastCrud, options);
app.use(permission);
@@ -304,6 +304,12 @@ export const crudResources = [
path: "/crud/component/editor",
component: "/crud/component/editor/index.vue"
},
{
title: "代码编辑器",
name: "ComponentCode",
path: "/crud/component/code",
component: "/crud/component/code/index.vue"
},
{
title: "图标",
name: "ComponentIcon",
@@ -21,6 +21,7 @@ export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<
return {
crudOptions: {
id: "right-table",
pagination: {
showSizeChanger: false, // antdv
showQuickJumper: false // antdv
@@ -31,6 +31,7 @@ export default function ({ crudExpose, context: { asideTableRef } }: CreateCrudO
};
return {
crudOptions: {
id: "main-table",
table: {
customRow(record: any, index: number) {
const clazz = record.id === currentRow.value ? "fs-current-row" : "";
@@ -21,6 +21,7 @@ export default function ({ crudExpose, context: { props, ctx } }: CreateCrudOpti
return {
crudOptions: {
id: "sub-table",
table: {
customRow(record: any, index: number) {
const clazz = record.id === props.modelValue ? "fs-current-row" : "";
@@ -0,0 +1,42 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/ComponentJson";
export function GetList(query: any) {
return request({
url: apiPrefix + "/page",
method: "get",
data: query
});
}
export function AddObj(obj: any) {
return request({
url: apiPrefix + "/add",
method: "post",
data: obj
});
}
export function UpdateObj(obj: any) {
return request({
url: apiPrefix + "/update",
method: "post",
data: obj
});
}
export function DelObj(id: any) {
return request({
url: apiPrefix + "/delete",
method: "post",
params: { id }
});
}
export function GetObj(id: any) {
return request({
url: apiPrefix + "/get",
method: "get",
params: { id }
});
}
@@ -0,0 +1,110 @@
import * as api from "./api";
import { FsEditorCodeValidators } from "@fast-crud/fast-extends";
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, ValueBuilderContext, ValueResolveContext } from "@fast-crud/fast-crud";
export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
if (form.id == null) {
form.id = row.id;
}
return await api.UpdateObj(form);
};
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest
},
form: {
wrapper: {
async onOpened({ mode, formRef }) {
// if (!formRef.form.async) {
// setTimeout(() => {
// formRef.form.async = { aaa: "11", bb: "111" };
// }, 2000);
// }
}
}
},
columns: {
javascript: {
title: "js code",
type: "editor-code",
form: {
show: true,
component: {
language: "javascript"
}
}
},
yaml: {
title: "yaml",
type: "editor-code",
form: {
show: true,
rules: FsEditorCodeValidators.yamlRule,
component: {
language: "yaml",
schema: {
//数据校验提示
type: "object",
properties: {
p1: {
enum: ["v1", "v2"],
description: "数据校验提示"
},
property: {
description: "I have a description"
},
titledProperty: {
title: "I have a title",
description: "I also have a description"
},
markdown: {
markdownDescription: "Even **markdown** _descriptions_ `are` ~~not~~ supported!"
}
}
}
}
}
},
json: {
title: "json",
type: "editor-code",
form: {
show: true,
rules: FsEditorCodeValidators.jsonRule,
component: {
language: "json",
vModel: "modelValue",
schema: {
//校验提示
type: "object",
properties: {
p1: {
enum: ["v1", "v2"],
description: "数据校验示例"
}
}
},
config: {}
}
}
}
}
}
};
}
@@ -0,0 +1,32 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding" />
</fs-page>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud.js";
export default defineComponent({
name: "ComponentCode",
setup() {
const { crudRef, crudBinding } = useFsRef();
const monacoRef = ref();
// 页面打开后获取列表数据
onMounted(async () => {
const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
await crudExpose.doRefresh();
});
return {
crudBinding,
crudRef,
monacoRef
};
}
});
</script>
@@ -0,0 +1,24 @@
import mockUtil from "/src/mock/base";
const options: any = {
name: "ComponentJson",
idGenerator: 0
};
const list: any = [
{
json: '{"p1":1,"b":2}',
yaml: `
property: 1
p1: 3
services:
certd:
container_name: certd
`,
javascript: `console.log(123)`
},
{
json: '{"p1":3,"b":4}'
}
];
options.list = list;
const mock = mockUtil.buildMock(options);
export default mock;