From 009ca7e8f1bf03592b2b4f5bae02a6d0bee57dd9 Mon Sep 17 00:00:00 2001
From: yanghi <191894349@qq.com>
Date: Sun, 14 Aug 2022 17:57:10 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components.d.ts | 26 +++-
src/components/base/BaseText.vue | 53 +++++++
src/config/component.config.json | 34 -----
src/config/component.config.ts | 137 ++++++++++++++++++
src/config/editor.config.ts | 27 ++--
src/main.ts | 3 +
src/router/index.ts | 2 +-
src/store/index.ts | 15 +-
src/utils/util.js | 47 ++++++
src/views/Panel.vue | 6 +-
.../layout}/Components.vue | 31 ++--
.../layout}/ComponentsOptions.vue | 0
.../layout}/DrawingBroad.vue | 16 +-
src/{components => views/layout}/Grid.vue | 0
tsconfig.json | 6 +-
vite.config.ts | 6 +-
16 files changed, 323 insertions(+), 86 deletions(-)
create mode 100644 src/components/base/BaseText.vue
delete mode 100644 src/config/component.config.json
create mode 100644 src/config/component.config.ts
create mode 100644 src/utils/util.js
rename src/{components => views/layout}/Components.vue (76%)
rename src/{components => views/layout}/ComponentsOptions.vue (100%)
rename src/{components => views/layout}/DrawingBroad.vue (86%)
rename src/{components => views/layout}/Grid.vue (100%)
diff --git a/components.d.ts b/components.d.ts
index 7edf44a..27b0eb5 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,24 +7,42 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
- Components: typeof import('./src/components/Components.vue')['default']
- ComponentsOptions: typeof import('./src/components/ComponentsOptions.vue')['default']
- DrawingBroad: typeof import('./src/components/DrawingBroad.vue')['default']
+ BaseText: typeof import('./src/components/base/BaseText.vue')['default']
+ Click: typeof import('./src/components/common/click.vue')['default']
+ Components: typeof import('./src/components/layout/Components.vue')['default']
+ ComponentsOptions: typeof import('./src/components/layout/ComponentsOptions.vue')['default']
+ DrawingBroad: typeof import('./src/components/layout/DrawingBroad.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
+ ElCol: typeof import('element-plus/es')['ElCol']
+ ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElContainer: typeof import('element-plus/es')['ElContainer']
+ ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+ ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
+ ElForm: typeof import('element-plus/es')['ElForm']
+ ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+ ElOption: typeof import('element-plus/es')['ElOption']
+ ElRadio: typeof import('element-plus/es')['ElRadio']
+ ElRow: typeof import('element-plus/es')['ElRow']
+ ElSelect: typeof import('element-plus/es')['ElSelect']
+ ElSwitch: typeof import('element-plus/es')['ElSwitch']
+ ElTable: typeof import('element-plus/es')['ElTable']
+ ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
- Grid: typeof import('./src/components/Grid.vue')['default']
+ FormItem: typeof import('./src/components/common/formItem.vue')['default']
+ Grid: typeof import('./src/components/layout/Grid.vue')['default']
+ Preview: typeof import('./src/components/common/preview.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
+ Upload: typeof import('./src/components/common/upload.vue')['default']
}
}
diff --git a/src/components/base/BaseText.vue b/src/components/base/BaseText.vue
new file mode 100644
index 0000000..8ea7821
--- /dev/null
+++ b/src/components/base/BaseText.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/config/component.config.json b/src/config/component.config.json
deleted file mode 100644
index af5d994..0000000
--- a/src/config/component.config.json
+++ /dev/null
@@ -1,34 +0,0 @@
-// 组件的属性 写好的组件需要在这里填写
-{
- "button":{
- "content":"",
- "layout":{
- "display":"",
- "width":"",
- "height":""
- },
- "styles":{
-
- },
- "animates":{
- "show":{
-
- },
- "hide":{
-
- }
- },
- "methods":{
-
- },
- "data":{
-
- },
- "slots":{
-
- }
- },
- "text":{
-
- }
-}
\ No newline at end of file
diff --git a/src/config/component.config.ts b/src/config/component.config.ts
new file mode 100644
index 0000000..4f59ea4
--- /dev/null
+++ b/src/config/component.config.ts
@@ -0,0 +1,137 @@
+// 组件的属性 写好的组件需要在这里填写
+
+export default {
+ 'base-text': {
+ title: '文本',
+ domId: '',
+ domName: '',
+ base: [
+ {
+ type: 'textarea',
+ label: '文本内容',
+ val: '默认文本',
+ isNecessary: true
+ }
+ ],
+ style: [
+ {
+ type: 'font',
+ label: '字体',
+ attr: ['font-weight', 'text-decoration', 'font-style', 'text-align'],
+ val: ['400', 'none', 'inherit', 'left'],
+ isNecessary: false
+ }, {
+ type: 'color-picker',
+ label: '字体颜色',
+ attr: 'color',
+ val: '#333333',
+ isNecessary: true
+ }, {
+ type: 'input-number',
+ label: '容器高度',
+ attr: 'height',
+ val: '',
+ unit: 'px',
+ isNecessary: false
+ }, {
+ type: 'upload',
+ label: '背景图',
+ attr: 'background-image',
+ val: '',
+ isNecessary: false
+ }, {
+ type: 'color-picker',
+ label: '背景颜色',
+ attr: 'background-color',
+ val: '',
+ isNecessary: false
+ }, {
+ type: 'select',
+ label: '背景尺寸',
+ attr: 'background-size',
+ val: 'contain',
+ options: [
+ {
+ name: '无',
+ val: 'inherit'
+ }, {
+ name: '宽高裁剪',
+ val: 'cover'
+ }, {
+ name: '宽高自适应',
+ val: 'contain'
+ }
+ ]
+ }, {
+ type: 'input-number',
+ label: '字体大小',
+ attr: 'font-size',
+ val: 12,
+ unit: 'px',
+ step: 1,
+ max: 100,
+ min: 10,
+ isNecessary: false
+ }, {
+ type: 'input-number',
+ label: '文本行距',
+ attr: 'line-height',
+ val: 1.5,
+ step: 0.5,
+ max: 12,
+ min: 0.5,
+ isNecessary: false
+ }, {
+ type: 'input-number',
+ label: '字间距',
+ attr: 'letter-spacing',
+ val: 0,
+ step: 1,
+ max: 50,
+ min: 0,
+ unit: 'px',
+ isNecessary: false
+ }, {
+ type: 'input-number',
+ label: '上边距',
+ attr: 'padding-top',
+ val: 10,
+ unit: 'px',
+ min: 0,
+ max: 50,
+ step: 1,
+ isNecessary: true
+ }, {
+ type: 'input-number',
+ label: '右边距',
+ attr: 'padding-right',
+ val: 15,
+ unit: 'px',
+ min: 0,
+ max: 50,
+ step: 1,
+ isNecessary: true
+ }, {
+ type: 'input-number',
+ label: '下边距',
+ attr: 'padding-bottom',
+ val: 10,
+ unit: 'px',
+ min: 0,
+ max: 50,
+ step: 1,
+ isNecessary: true
+ }, {
+ type: 'input-number',
+ label: '左边距',
+ attr: 'padding-left',
+ val: 15,
+ unit: 'px',
+ min: 0,
+ max: 50,
+ step: 1,
+ isNecessary: true
+ }
+ ]
+ }
+}
diff --git a/src/config/editor.config.ts b/src/config/editor.config.ts
index cf43a3d..a3b8ef4 100644
--- a/src/config/editor.config.ts
+++ b/src/config/editor.config.ts
@@ -1,8 +1,7 @@
//注册组件
interface componentType {
label: string,
- preview: string,
- render: string,
+ icon: string,
key: string
}
@@ -25,23 +24,27 @@ const registerConfig = new createEditorConfig();
registerConfig.register({
label: '按钮',
- preview: `ElButton`,
- render: `ElButton`,
- key: "button"
+ icon: `TurnOff`,
+ key: "ElButton"
});
registerConfig.register({
label: '单选框',
- preview: `ElRadio`,
- render: `ElRadio`,
- key: "radio"
+ icon: `TurnOff`,
+ key: "ElRadio"
});
registerConfig.register({
label: '日历',
- preview: `el-calendar`,
- render: `el-calendar`,
- key: "image"
+ icon: `Calendar`,
+ key: "el-calendar"
});
-export default registerConfig;
\ No newline at end of file
+registerConfig.register({
+ label: '文本',
+ icon: `EditPen`,
+ key: "base-text"
+});
+
+
+export default registerConfig;
diff --git a/src/main.ts b/src/main.ts
index c709eec..6e59b21 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
const pinia = createPinia();
+//自定义组件需要先进行注册
+import BaseText from "@/components/base/BaseText.vue";
+app.component("BaseText", BaseText);
app.use(pinia);
app.use(ElementPlus);
app.use(router);
diff --git a/src/router/index.ts b/src/router/index.ts
index 14c3ad3..311902e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,7 +11,7 @@ const routes: Array = [
{
path: "/",
name: "main",
- component: () => import("@/views/main.vue"),
+ component: () => import("@/views/Main.vue"),
children: [
],
diff --git a/src/store/index.ts b/src/store/index.ts
index 54ba93a..d761ae9 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,20 +2,21 @@ import { reactive } from 'vue';
import { defineStore } from 'pinia';
import config from "@/config/editor.config";
import data from "@/config/data.json";
+import cArgs from "@/config/component.config";
interface componentType {
label: string,
- preview: string,
- render: string,
+ icon: string,
key: string
}
// 使用setup模式定义
export const userMainStore = defineStore('mainStore', () => {
- const list: Array = reactive(config.componentList);
- const tList: Array = reactive([]);
-
+ //
//json schema
const tree = reactive(data);
-
- return {list,tList,tree}; //暴露
+ const componentArgs = reactive(cArgs);
+ const list: Array = reactive(config.componentList);
+ const tList: Array = reactive([]);
+
+ return {list,tList,tree,componentArgs}; //暴露
});
\ No newline at end of file
diff --git a/src/utils/util.js b/src/utils/util.js
new file mode 100644
index 0000000..8939ec3
--- /dev/null
+++ b/src/utils/util.js
@@ -0,0 +1,47 @@
+
+export default {
+ createDomID(len) {
+ return Number(Math.random().toString().substr(3, len)).toString(36)
+ },
+ copyObj(obj) {
+ return JSON.parse(JSON.stringify(obj))
+ },
+ parseTime(time, cFormat) {
+ if (arguments.length === 0) {
+ return null
+ }
+ const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+ let date
+ if (typeof time === 'object') {
+ date = time
+ } else {
+ if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+ time = parseInt(time)
+ }
+ if ((typeof time === 'number') && (time.toString().length === 10)) {
+ console.log('is number')
+ time = time * 1000
+ }
+ date = new Date(time)
+ }
+ const formatObj = {
+ y: date.getFullYear(),
+ m: date.getMonth() + 1,
+ d: date.getDate(),
+ h: date.getHours(),
+ i: date.getMinutes(),
+ s: date.getSeconds(),
+ a: date.getDay()
+ }
+ const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+ let value = formatObj[key]
+ // Note: getDay() returns 0 on Sunday
+ if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+ if (result.length > 0 && value < 10) {
+ value = '0' + value
+ }
+ return value || 0
+ })
+ return time_str
+ }
+}
diff --git a/src/views/Panel.vue b/src/views/Panel.vue
index 18a7583..8729856 100644
--- a/src/views/Panel.vue
+++ b/src/views/Panel.vue
@@ -119,9 +119,9 @@
@@ -21,7 +19,7 @@ const containerStyle = computed(() => ({
-
+
@@ -66,8 +64,11 @@ const containerStyle = computed(() => ({
margin: auto;
overflow: auto;
- >div{
+ >div {
height: 100%;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
}
&::-webkit-scrollbar {
@@ -87,7 +88,6 @@ const containerStyle = computed(() => ({
-webkit-box-shadow: inset 0 0 .0625rem rgba(0, 0, 0, 0.2);
border-radius: 0;
background: #fff;
-
}
}
}
diff --git a/src/components/Grid.vue b/src/views/layout/Grid.vue
similarity index 100%
rename from src/components/Grid.vue
rename to src/views/layout/Grid.vue
diff --git a/tsconfig.json b/tsconfig.json
index 737f62a..5d67666 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,8 +16,10 @@
"baseUrl": ".",
"paths": {
"@/*":["src/*"]
- }
+ },
+ "suppressImplicitAnyIndexErrors": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/config/comp.config.ts"],
- "references": [{ "path": "./tsconfig.node.json" }]
+ "references": [{ "path": "./tsconfig.node.json" }],
+
}
diff --git a/vite.config.ts b/vite.config.ts
index 52d1d77..8c3fb77 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,7 +15,9 @@ export default defineConfig({
},
resolve: {
alias: {
- '@': resolve(__dirname, './src')},
+ '@': resolve(__dirname, './src'),
+ "components": resolve(__dirname,'./src/components')
+ },
},
plugins: [vue(),
AutoImport({
@@ -31,7 +33,7 @@ export default defineConfig({
additionalData: '@import "./src/assets/css/color.scss";'
}
},
- modules:{},
+ modules: {},
postcss: {
plugins: [
postCssPxToRem({
--
Gitee
From a06cd16eb2bb5c0da40ff676f6911b4515f0bdf1 Mon Sep 17 00:00:00 2001
From: yanghi <191894349@qq.com>
Date: Sun, 14 Aug 2022 19:55:26 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=B0=81=E8=A3=85=E7=BB=84=E4=BB=B6?=
=?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components.d.ts | 1 +
src/components/base/BaseText.vue | 14 +-
src/config/component.config.ts | 2 +-
src/config/editor.config.ts | 33 +--
src/store/index.ts | 8 -
src/views/Panel.vue | 2 +-
yarn.lock | 390 ++++++++++++++++++++++++++++++-
7 files changed, 408 insertions(+), 42 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index 217d33f..5937c89 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,7 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
+ BaseText: typeof import('./src/components/base/BaseText.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElIcon: typeof import('element-plus/es')['ElIcon']
diff --git a/src/components/base/BaseText.vue b/src/components/base/BaseText.vue
index 8ea7821..dafd15d 100644
--- a/src/components/base/BaseText.vue
+++ b/src/components/base/BaseText.vue
@@ -1,3 +1,8 @@
+
+
+
-
-
-
-
-