{{ item.name }}
-
-
+
+
+
+
-
+
@@ -45,238 +49,232 @@
diff --git a/src/visual-editor/components/left-aside/components/data-source/index.vue b/src/visual-editor/components/left-aside/components/data-source/index.vue
index 68961cf..f64488e 100644
--- a/src/visual-editor/components/left-aside/components/data-source/index.vue
+++ b/src/visual-editor/components/left-aside/components/data-source/index.vue
@@ -18,28 +18,30 @@
diff --git a/src/visual-editor/components/left-aside/components/data-source/utils.tsx b/src/visual-editor/components/left-aside/components/data-source/utils.tsx
index a32bee1..e77b21c 100644
--- a/src/visual-editor/components/left-aside/components/data-source/utils.tsx
+++ b/src/visual-editor/components/left-aside/components/data-source/utils.tsx
@@ -6,87 +6,87 @@
* @Description:
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\left-aside\components\data-source\utils.tsx
*/
-import { generateNanoid } from '@/visual-editor/utils'
-import type { FetchApiItem } from '@/visual-editor/visual-editor.utils'
-import { RequestEnum } from '@/enums/httpEnum'
-import MonacoEditor from '@/visual-editor/components/common/monaco-editor/MonacoEditor'
-import { useVisualData } from '@/visual-editor/hooks/useVisualData'
-import type { VisualEditorModel } from '@/visual-editor/visual-editor.utils'
-import { useModal } from '@/visual-editor/hooks/useModal'
-import { ElMessage } from 'element-plus'
+import { generateNanoid } from '@/visual-editor/utils';
+import type { FetchApiItem } from '@/visual-editor/visual-editor.utils';
+import { RequestEnum } from '@/enums/httpEnum';
+import MonacoEditor from '@/visual-editor/components/common/monaco-editor/MonacoEditor';
+import { useVisualData } from '@/visual-editor/hooks/useVisualData';
+import type { VisualEditorModel } from '@/visual-editor/visual-editor.utils';
+import { useModal } from '@/visual-editor/hooks/useModal';
+import { ElMessage } from 'element-plus';
/**
- * @description 导入丝袜哥
+ * @description 导入丝袜哥, eg: 简单的解析代码,需要根据自己需要完善
* @param {object} swagger 丝袜哥JSON字符串
* @returns { apis, models }
*/
export const importSwaggerJson = (swagger: any) => {
- swagger = typeof swagger == 'string' ? JSON.parse(swagger) : swagger
- const models: VisualEditorModel[] = []
+ swagger = typeof swagger == 'string' ? JSON.parse(swagger) : swagger;
+ const models: VisualEditorModel[] = [];
Object.keys(swagger.definitions).forEach((model) => {
- const properties = swagger.definitions[model].properties
+ const properties = swagger.definitions[model].properties;
const modelItem: VisualEditorModel = {
name: model,
key: generateNanoid(),
- entitys: []
- }
+ entitys: [],
+ };
Object.keys(properties).forEach((field) => {
modelItem.entitys.push({
key: field,
name: properties[field].description || field,
type: properties[field].type,
- value: ''
- })
- })
- models.push(modelItem)
- })
- const apis: FetchApiItem[] = []
+ value: '',
+ });
+ });
+ models.push(modelItem);
+ });
+ const apis: FetchApiItem[] = [];
Object.keys(swagger.paths).forEach((url) => {
Object.keys(swagger.paths[url]).forEach((method) => {
- const apiUrlObj = swagger.paths[url][method]
- const model = apiUrlObj.parameters?.[0]?.schema?.$ref?.split('/').pop()
- const bindTarget = model ? models.find((item) => item.name == model) : undefined
- typeof bindTarget == 'object' && (bindTarget.name = apiUrlObj.summary)
+ const apiUrlObj = swagger.paths[url][method];
+ const model = apiUrlObj.parameters?.[0]?.schema?.$ref?.split('/').pop();
+ const bindTarget = model ? models.find((item) => item.name == model) : undefined;
+ typeof bindTarget == 'object' && (bindTarget.name = apiUrlObj.summary);
const api: FetchApiItem = {
key: generateNanoid(),
name: apiUrlObj.summary,
options: {
url: url, // 请求的url
method: method.toLocaleUpperCase() as RequestEnum, // 请求的方法
- contentType: apiUrlObj.produces[0] || apiUrlObj.consumes[0] // 请求的内容类型
+ contentType: apiUrlObj.produces[0] || apiUrlObj.consumes[0], // 请求的内容类型
},
data: {
bind: bindTarget?.key || '', // 请求绑定对应的某个实体
- recv: '' // 响应的结果绑定到某个实体上
- }
- }
- apis.push(api)
- })
- })
- return { apis, models }
-}
+ recv: '', // 响应的结果绑定到某个实体上
+ },
+ };
+ apis.push(api);
+ });
+ });
+ return { apis, models };
+};
/**
* @description 显示导入swagger JSON模态框
*/
export const useImportSwaggerJsonModal = () => {
- const { updateModel, updateFetchApi } = useVisualData()
+ const { updateModel, updateFetchApi } = useVisualData();
- const shema = {}
+ const shema = {};
const handleSchemaChange = (val) => {
try {
- const newObj = JSON.parse(val)
- Object.assign(shema, newObj)
+ const newObj = JSON.parse(val);
+ Object.assign(shema, newObj);
} catch (e) {
- console.log('JSON格式有误:', e)
+ console.log('JSON格式有误:', e);
}
- }
+ };
return {
showImportSwaggerJsonModal: () =>
useModal({
title: '导入swagger JSON (支持swagger: 2.0)',
props: {
- width: 760
+ width: 760,
},
content: () => (
{
),
onConfirm: () => {
try {
- const { models, apis } = importSwaggerJson(shema)
- updateModel(models, true)
- updateFetchApi(apis, true)
- ElMessage.success('导入成功!')
- console.log({ models, apis }, '导入的swagger')
+ const { models, apis } = importSwaggerJson(shema);
+ updateModel(models, true);
+ updateFetchApi(apis, true);
+ ElMessage.success('导入成功!');
+ console.log({ models, apis }, '导入的swagger');
} catch (e) {
- ElMessage.success('导入失败!请检查swagger JSON是否有误!')
+ ElMessage.success('导入失败!请检查swagger JSON是否有误!');
}
- }
- })
- }
-}
+ },
+ }),
+ };
+};
diff --git a/src/visual-editor/components/left-aside/components/page-tree/index.vue b/src/visual-editor/components/left-aside/components/page-tree/index.vue
index bd2f4ff..5243b10 100644
--- a/src/visual-editor/components/left-aside/components/page-tree/index.vue
+++ b/src/visual-editor/components/left-aside/components/page-tree/index.vue
@@ -1,11 +1,6 @@
- 添加页面
{{ node.label }}({{ data.path }})
- 默认
+ 默认
-
+
- 编辑
- 删除
- 编辑
+ 删除
+ 设为首页
@@ -50,157 +41,148 @@
-const rules = {
- title: [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
- path: [{ required: true, message: '请输入页面路径', trigger: 'blur' }]
-}
+
diff --git a/src/visual-editor/components/left-aside/index.vue b/src/visual-editor/components/left-aside/index.vue
index 7923640..ae0669d 100644
--- a/src/visual-editor/components/left-aside/index.vue
+++ b/src/visual-editor/components/left-aside/index.vue
@@ -12,71 +12,64 @@
-
+
{{ tabItem.label }}
-
+
-const tabs = Object.keys(components)
- .map((name) => {
- const { label, icon, order } = components[name]
- return { label, icon, name, order }
- })
- .sort((a, b) => a.order - b.order)
+
diff --git a/src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx b/src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx
index 5520654..3355a07 100644
--- a/src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx
+++ b/src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx
@@ -6,38 +6,40 @@
* @Description: 动画组件
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\animate\Animate.tsx
*/
-import { defineComponent, reactive, ref, watchEffect } from 'vue'
-import { ElTabs, ElTabPane, ElRow, ElCol, ElButton, ElSwitch, ElAlert } from 'element-plus'
-import { animationTabs } from './animateConfig'
-import styles from './animate.module.scss'
-import { onClickOutside } from '@vueuse/core'
-import { useVisualData } from '@/visual-editor/hooks/useVisualData'
-import type { Animation } from '@/visual-editor/visual-editor.utils'
-import { useAnimate } from '@/hooks/useAnimate'
+import { defineComponent, reactive, ref, watchEffect } from 'vue';
+import { ElTabs, ElTabPane, ElRow, ElCol, ElButton, ElSwitch, ElAlert, ElIcon } from 'element-plus';
+import { animationTabs } from './animateConfig';
+import styles from './animate.module.scss';
+import { onClickOutside } from '@vueuse/core';
+import { useVisualData } from '@/visual-editor/hooks/useVisualData';
+import type { Animation } from '@/visual-editor/visual-editor.utils';
+import { useAnimate } from '@/hooks/useAnimate';
+import { Plus, CaretRight } from '@element-plus/icons-vue';
+import 'element-plus/es/components/alert/style/css';
export const Animate = defineComponent({
setup() {
- const { currentBlock } = useVisualData()
- const target = ref>()
+ const { currentBlock } = useVisualData();
+ const target = ref>();
const state = reactive({
activeName: '',
isAddAnimates: false, // 是否显示添加动画集
- changeTargetIndex: -1 // 要修改的动画的索引
- })
+ changeTargetIndex: -1, // 要修改的动画的索引
+ });
- onClickOutside(target, () => (state.isAddAnimates = false))
+ onClickOutside(target, () => (state.isAddAnimates = false));
watchEffect((onInvalidate) => {
if (state.isAddAnimates) {
- state.activeName = 'in'
+ state.activeName = 'in';
} else {
- state.changeTargetIndex = -1
+ state.changeTargetIndex = -1;
}
onInvalidate(() => {
- console.log('onInvalidate')
- })
- })
+ console.log('onInvalidate');
+ });
+ });
/**
* @description 运行动画
@@ -45,47 +47,47 @@ export const Animate = defineComponent({
const runAnimation = (animation: Animation | Animation[] = []) => {
let animateEl =
(window.$$refs[currentBlock.value._vid]?.$el as HTMLElement) ??
- (window.$$refs[currentBlock.value._vid] as HTMLElement)
+ (window.$$refs[currentBlock.value._vid] as HTMLElement);
- animateEl = animateEl?.closest('.list-group-item')?.firstChild as HTMLElement
+ animateEl = animateEl?.closest('.list-group-item')?.firstChild as HTMLElement;
if (animateEl) {
- useAnimate(animateEl, animation)
+ useAnimate(animateEl, animation);
}
- }
+ };
/**
* @description 点击要修改的动画名称
*/
const clickAnimateName = (index) => {
- state.changeTargetIndex = index
- state.isAddAnimates = true
- }
+ state.changeTargetIndex = index;
+ state.isAddAnimates = true;
+ };
/**
* @description 删除动画
* @param index 要删除的动画的索引
* @returns
*/
- const delAnimate = (index: number) => currentBlock.value.animations?.splice(index, 1)
+ const delAnimate = (index: number) => currentBlock.value.animations?.splice(index, 1);
/**
* @description 添加/修改 动画
*/
const addOrChangeAnimate = (animateItem: Animation) => {
const animation: Animation = {
- ...animateItem
- }
+ ...animateItem,
+ };
if (state.changeTargetIndex == -1) {
- currentBlock.value.animations?.push(animation)
+ currentBlock.value.animations?.push(animation);
} else {
// 修改动画
- currentBlock.value.animations![state.changeTargetIndex] = animation
- state.changeTargetIndex = -1
+ currentBlock.value.animations![state.changeTargetIndex] = animation;
+ state.changeTargetIndex = -1;
}
- state.isAddAnimates = false
- console.log(currentBlock.value.animations, '当前组件的动画')
- }
+ state.isAddAnimates = false;
+ console.log(currentBlock.value.animations, '当前组件的动画');
+ };
// 已添加的动画列表组件
const AddedAnimateList = () => (
@@ -104,11 +106,12 @@ export const Animate = defineComponent({
clickAnimateName(index)} class={'label'}>
{item.label}
- runAnimation(item)}
- class={'el-icon-caret-right play'}
- title={'播放'}
- >
+
+ runAnimation(item)} class={'play'} title={'播放'}>
+
+
+
+
),
default: () => (
@@ -129,12 +132,12 @@ export const Animate = defineComponent({
@@ -166,7 +169,7 @@ export const Animate = defineComponent({
type={'primary'}
disabled={!currentBlock.value.animations}
plain
- icon={'el-icon-plus'}
+ icon={Plus}
onClick={() => (state.isAddAnimates = true)}
>
添加动画
@@ -175,7 +178,7 @@ export const Animate = defineComponent({
type={'primary'}
disabled={!currentBlock.value.animations?.length}
plain
- icon={'el-icon-caret-right'}
+ icon={CaretRight}
onClick={() => runAnimation(currentBlock.value.animations)}
>
播放动画
@@ -184,6 +187,6 @@ export const Animate = defineComponent({