appnify
/
web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 接口生成页面弹窗改为平铺

master
luoer 2023-10-24 17:02:00 +08:00
parent d7da0bd5f9
commit 5ccefbd65a
5 changed files with 123 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -6,7 +6,7 @@ VITE_TITLE = 绝弹管理后台
# 网站副标题
VITE_SUBTITLE = 快速开发web应用的模板工具
# 接口前缀 说明：参见 axios 的 baseURL
VITE_API = http://127.0.0.1:3030/
VITE_API = https://nest.dev.juetan.cn/
# =====================================================================================
# 开发设置

146
src/pages/my/dev.vue
View File

@ -1,66 +1,76 @@
<template>
<bread-page>
<a-input v-model="name" placeholder="中文名称"></a-input>
<a-button @click="editorRef?.open()">打开</a-button>
<a-tabs type="capsule" @change="onChange">
<a-tab-pane v-for="tag in tags" :key="tag.name" :title="tag.description">
<a-form :model="{}" layout="vertical">
<a-form-item label="新增接口">
<a-radio-group type="button" v-model="type.create">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="修改接口">
<a-radio-group type="button" v-model="type.modify">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="查询接口">
<a-radio-group type="button" v-model="type.select">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="删除接口">
<a-radio-group type="button" v-model="type.delete">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
<editor-modal ref="editorRef"></editor-modal>
<div class="h-full grid grid-cols-[auto_auto_1fr]">
<div class="w-[300px]">
<a-tabs type="capsule" @change="onChange">
<a-tab-pane v-for="tag in tags" :key="tag.name" :title="tag.description">
<a-form :model="{}" layout="vertical">
<a-form-item label="新增接口">
<a-radio-group type="button" v-model="type.create">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="修改接口">
<a-radio-group type="button" v-model="type.modify">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="查询接口">
<a-radio-group type="button" v-model="type.select">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="删除接口">
<a-radio-group type="button" v-model="type.delete">
<a-radio
v-for="route in routes.filter((i) => i.tag === tag.name)"
:value="route.operationId"
:key="route.path"
>
{{ route.description }}
</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
</div>
<a-divider direction="vertical"></a-divider>
<div class="h-full grid grid-rows-[auto_1fr] gap-2">
<div>
<a-button type="primary" @click="onOpen">确定</a-button>
</div>
<editor-modal class="bg-gray-100" :content="content"></editor-modal>
</div>
</div>
</bread-page>
</template>
<script setup lang="ts">
import doc from "@/dd.json";
import editorModal from "./editor.vue";
import ejs from "ejs";
import template from "./page.ejs?raw";
const editorRef = ref<InstanceType<typeof editorModal>>();
const content = ref("");
const { tags, routes } = doc;
const type = ref({
create: undefined,
@ -68,11 +78,37 @@ const type = ref({
modify: undefined,
delete: undefined,
});
const name = ref('')
const onChange = (value: string | number) => {
console.log(value);
};
const onOpen = () => {
const data = {
tag: '',
operationId: '',
create: {},
select: {},
modify: {},
delete: {},
};
for (const route of doc.routes) {
if (route.operationId === type.value.create) {
data.create = route;
}
if (route.operationId === type.value.select) {
data.select = route;
}
if (route.operationId === type.value.modify) {
data.modify = route;
}
if (route.operationId === type.value.delete) {
data.delete = route;
}
}
console.log(data);
content.value = ejs.render(template, data);
};
</script>
<style lang="less" scoped></style>

44
src/pages/my/editor.vue
View File

@ -1,20 +1,14 @@
<template>
<a-modal v-model:visible="visible" :width="1280" title="编辑代码" title-align="start" @close="onClose">
<div class="h-[700px]">
<div id="editor1" class="w-full h-full"></div>
</div>
</a-modal>
<div ref="editorRef" class="w-full h-full border"></div>
</template>
<script setup lang="ts">
import ejs from "ejs";
import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
import pageStr from "./page.ejs?raw";
self.MonacoEnvironment = {
getWorker(_, label) {
@ -34,26 +28,32 @@ self.MonacoEnvironment = {
},
};
const visible = ref(false);
let editor: monaco.editor.IStandaloneCodeEditor | undefined;
const onClose = () => {
editor?.dispose();
};
defineExpose({
async open() {
visible.value = true;
await nextTick();
const box = document.getElementById("editor1")!;
const code = ejs.render(pageStr, {
tag: "user",
operationId: "addUser",
});
editor = monaco.editor.create(box, {
value: code,
const editorRef = ref<HTMLElement | null>(null);
onMounted(async () => {
await nextTick();
if (editorRef.value) {
editor = monaco.editor.create(editorRef.value, {
value: "",
language: "html",
});
}
});
const props = defineProps({
content: {
type: String,
default: "",
},
});
watch(
() => props.content,
(value) => {
editor?.setValue(value);
}
);
</script>
<style lang="less" scoped></style>

16
src/pages/my/page.ejs
View File

@ -10,7 +10,7 @@ import { createColumn, updateColumn, useAniTable } from "@/components";
const [aniTable, aniCtx] = useAniTable({
data: async (model, paging) => {
return api.<%= tag %>.<%= operationId %>({ ...model, ...paging });
return api.<%= select.tag %>.<%= operationId %>({ ...model, ...paging });
},
columns: [
{
@ -65,22 +65,24 @@ const [aniTable, aniCtx] = useAniTable({
class: "!grid grid-cols-2 gap-x-6",
},
items: [
<%_ for(const item of create.bodyParams) { _%>
{
field: "username",
label: "登录账号",
type: "input",
required: true,
field: "<%= item.name %>",
label: "<%= item.description %>",
type: "<%= item.type %>",
required: <%= item.required %>,
},
<%_ } _%>
],
submit: ({ model }) => {
return api.<%= tag %>.<%= operationId %>(model);
return api.<%= create.tag %>.<%= create.operationId %>(model);
},
},
modify: {
extend: true,
title: "修改用户",
submit: ({ model }) => {
return api.<%= tag %>.<%= operationId %>(model.id, model);
return api.<%= modify.tag %>.<%= modify.operationId %>(model.id, model);
},
},
});

8
src/pages/post/media/index.vue
View File

@ -70,14 +70,6 @@ const table = useTable({
{
title: "文件名称",
dataIndex: "name",
// render: ({ record }) => {
// return (
// <div class="flex items-center">
// <i class={`${getIcon(record.mimetype)} text-xl mr-2`}></i>
// {record.name}
// </div>
// );
// },
render({ record }) {
return (
<div class="flex items-center">