Skip to content

Commit af7109d

Browse files
haixin-fanghaixin-fang
committed
refactor: 重构提高性能和加载速度
1 parent c621fe4 commit af7109d

23 files changed

+572
-418
lines changed

‎bug.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@
2424
- 设计个logo
2525
- 布局优化 参考(https://epic.kcz66.com/demo/element-plus/)
2626
- 新增签名、评价表单
27-
- 表单新增提示,间距,html
27+
- 表单新增提示,间距,html
28+
- tab选中 初始化

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
1414
"clean:all": "pnpm clean:top && pnpm clean:modules",
1515
"prepare": "husky install",
16-
"build": "pnpm clean:top && pnpm --filter \"starfish-*\" build",
16+
"build": " pnpm --filter \"starfish-*\" build",
1717
"commit": "git-cz"
1818
},
1919
"engines": {

‎packages/editor/package.json

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
{
22
"name": "starfish-editor",
3-
"version": "1.0.16",
3+
"version": "1.1.3",
44
"publish": false,
55
"main": "dist/starfish-editor.umd.js",
66
"style": "dist/style.css",
77
"module": "dist/starfish-editor.es.js",
88
"types": "dist/types/starfish-editor.d.ts",
99
"exports": {
1010
".": {
11-
"import": "./dist/starfish-editor.es.js",
12-
"require": "./dist/starfish-editor.umd.js"
11+
"import": "./dist/starfish-editor.es.js"
1312
},
1413
"./dist/style.css": {
15-
"import": "./dist/style.css",
16-
"require": "./dist/style.css"
14+
"import": "./dist/style.css"
1715
},
1816
"./*": "./*"
1917
},
@@ -37,7 +35,7 @@
3735
"keycon": "^1.1.2",
3836
"mitt": "^3.0.0",
3937
"nanoid": "^4.0.0",
40-
"starfish-form": "^1.1.2",
38+
"starfish-form": "^1.2.3",
4139
"vue": "^3.2.37",
4240
"vue-codemirror": "^6.1.1",
4341
"vuedraggable": "^4.1.0",

‎packages/editor/src/common/formStyle.vue

+139-107
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,36 @@
33
<div class="label">
44
<label>{{ item.data.label }}</label>
55
<span v-if="item.data.required" class="item_require">*</span>
6-
<el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
6+
<el-tooltip
7+
v-if="item.data.tip"
8+
class="item"
9+
effect="dark"
10+
:content="item.data.tip"
11+
placement="top"
12+
>
713
<span class="tip iconfont icon-tishi"></span>
814
</el-tooltip>
915
</div>
1016
<div class="control">
11-
<el-button style="width: 100%" @click="onStyleSet" :type="code?'primary':''">{{code?'已设置':'设置'}}</el-button>
17+
<el-button
18+
style="width: 100%"
19+
@click="onStyleSet"
20+
:type="code ? 'primary' : ''"
21+
>{{ code ? "已设置" : "设置" }}</el-button
22+
>
1223
<custom-dialog ref="codeDialog" dialogclass="codeDialog" width="1000">
1324
<div class="custom_code">
14-
<codemirror v-model="code" placeholder=".starfish-form-css{}" :style="{ height: '400px' }" :autofocus="true" :extensions="extensions" :indent-with-tab="true" :tab-size="2" />
25+
<codemirror
26+
v-model="code"
27+
placeholder=".starfish-form-css{}"
28+
:style="{ height: '400px' }"
29+
:autofocus="true"
30+
:extensions="extensions"
31+
:indent-with-tab="true"
32+
:tab-size="2"
33+
/>
1534
</div>
16-
<el-footer class="my-Footer" style="text-align: center;">
35+
<el-footer class="my-Footer" style="text-align: center">
1736
<el-button type="primary" @click="saveCssStyle">确定</el-button>
1837
<el-button @click="closeCodeDialog">关闭</el-button>
1938
</el-footer>
@@ -22,117 +41,130 @@
2241
</div>
2342
</template>
2443
<script lang="ts">
25-
import { defineComponent, ref, getCurrentInstance } from "vue";
26-
import { css } from "@codemirror/lang-css";
27-
export default defineComponent({
28-
ControlType: "FormStyle", // 必须与文件名匹配
29-
isHide: true,
30-
props: {
31-
item: {
32-
type: Object,
33-
default: () => ({}),
44+
import { defineComponent, ref, getCurrentInstance } from "vue";
45+
import { css } from "@codemirror/lang-css";
46+
import { Codemirror } from "vue-codemirror";
47+
export default defineComponent({
48+
ControlType: "FormStyle", // 必须与文件名匹配
49+
isHide: true,
50+
props: {
51+
item: {
52+
type: Object,
53+
default: () => ({}),
54+
},
55+
data: {
56+
type: Object,
57+
default: () => ({}),
58+
},
59+
controlItems: {
60+
type: Array,
61+
default: () => [],
62+
},
63+
},
64+
components: {
65+
Codemirror,
66+
},
67+
setup(props) {
68+
const extensions = [css()];
69+
const codeDialog = ref();
70+
const code = ref();
71+
const { proxy } = getCurrentInstance() as any;
72+
return {
73+
code,
74+
extensions,
75+
codeDialog,
76+
onStyleSet() {
77+
codeDialog.value.init("表单样式表", "icon-biaodan");
78+
codeDialog.value.show();
3479
},
35-
data: {
36-
type: Object,
37-
default: () => ({}),
80+
saveCssStyle() {
81+
props.data[props.item.data.fieldName] = code.value;
82+
proxy.extractCssClass();
83+
proxy.insertCustomCssToHead(code.value);
84+
codeDialog.value.close();
3885
},
39-
controlItems: {
40-
type: Array,
41-
default: () => [],
86+
closeCodeDialog() {
87+
codeDialog.value.close();
4288
},
43-
},
44-
setup(props) {
45-
const extensions = [css()];
46-
const codeDialog = ref();
47-
const code = ref();
48-
const { proxy } = getCurrentInstance() as any;
49-
return {
50-
code,
51-
extensions,
52-
codeDialog,
53-
onStyleSet() {
54-
codeDialog.value.init("表单样式表", "icon-biaodan");
55-
codeDialog.value.show();
56-
},
57-
saveCssStyle() {
58-
props.data[props.item.data.fieldName] = code.value;
59-
proxy.extractCssClass();
60-
proxy.insertCustomCssToHead(code.value);
61-
codeDialog.value.close();
62-
},
63-
closeCodeDialog() {
64-
codeDialog.value.close();
65-
},
66-
extractCssClass() {
67-
const regExp = /\..*{/g;
68-
const result = code.value.match(regExp);
69-
const cssNameArray: any[] = [];
70-
if (!!result && result.length > 0) {
71-
result.forEach((rItem: any) => {
72-
const classArray = rItem.split(","); //切分逗号分割的多个class
73-
if (classArray.length > 0) {
74-
classArray.forEach((cItem: any) => {
75-
const caItem = cItem.trim();
76-
if (caItem.indexOf(".", 1) !== -1) {
77-
//查找第二个.位置
78-
const newClass = caItem.substring(caItem.indexOf(".") + 1, caItem.indexOf(".", 1)); //仅截取第一、二个.号之间的class
79-
if (newClass) {
80-
cssNameArray.push(newClass.trim());
81-
}
82-
} else if (caItem.indexOf(" ") !== -1) {
83-
//查找第一个空格位置
84-
const newClass = caItem.substring(caItem.indexOf(".") + 1, caItem.indexOf(" ")); //仅截取第一、二个.号之间的class
85-
if (newClass) {
86-
cssNameArray.push(newClass.trim());
87-
}
89+
extractCssClass() {
90+
const regExp = /\..*{/g;
91+
const result = code.value.match(regExp);
92+
const cssNameArray: any[] = [];
93+
if (!!result && result.length > 0) {
94+
result.forEach((rItem: any) => {
95+
const classArray = rItem.split(","); //切分逗号分割的多个class
96+
if (classArray.length > 0) {
97+
classArray.forEach((cItem: any) => {
98+
const caItem = cItem.trim();
99+
if (caItem.indexOf(".", 1) !== -1) {
100+
//查找第二个.位置
101+
const newClass = caItem.substring(
102+
caItem.indexOf(".") + 1,
103+
caItem.indexOf(".", 1)
104+
); //仅截取第一、二个.号之间的class
105+
if (newClass) {
106+
cssNameArray.push(newClass.trim());
107+
}
108+
} else if (caItem.indexOf(" ") !== -1) {
109+
//查找第一个空格位置
110+
const newClass = caItem.substring(
111+
caItem.indexOf(".") + 1,
112+
caItem.indexOf(" ")
113+
); //仅截取第一、二个.号之间的class
114+
if (newClass) {
115+
cssNameArray.push(newClass.trim());
116+
}
117+
} else {
118+
if (caItem.indexOf("{") !== -1) {
119+
//查找第一个{位置
120+
const newClass = caItem.substring(
121+
caItem.indexOf(".") + 1,
122+
caItem.indexOf("{")
123+
);
124+
cssNameArray.push(newClass.trim());
88125
} else {
89-
if (caItem.indexOf("{") !== -1) {
90-
//查找第一个{位置
91-
const newClass = caItem.substring(caItem.indexOf(".") + 1, caItem.indexOf("{"));
92-
cssNameArray.push(newClass.trim());
93-
} else {
94-
const newClass = caItem.substring(caItem.indexOf(".") + 1);
95-
cssNameArray.push(newClass.trim());
96-
}
126+
const newClass = caItem.substring(caItem.indexOf(".") + 1);
127+
cssNameArray.push(newClass.trim());
97128
}
98-
});
99-
}
100-
});
101-
}
102-
props.controlItems.find((item: any) => {
103-
if (item.data.fieldName == "csslist") {
104-
item.data.itemConfig.items = [];
105-
cssNameArray.forEach((cssName: string, index: number) => {
106-
item.data.itemConfig.items.push({
107-
label: cssName,
108-
value: cssName,
109-
select: false,
110-
id: index + 1,
111-
});
129+
}
112130
});
113-
return item;
114131
}
115132
});
116-
},
117-
insertCustomCssToHead(cssCode:string) {
118-
const head = document.getElementsByTagName("head")[0];
119-
const oldStyle = document.getElementById("starfish-custom-css");
120-
if (oldStyle) {
121-
head.removeChild(oldStyle); //先清除后插入！！
122-
}
123-
const newStyle: any = document.createElement("style");
124-
newStyle.type = "text/css";
125-
newStyle.rel = "stylesheet";
126-
newStyle.id = "starfish-custom-css";
127-
try {
128-
newStyle.appendChild(document.createTextNode(cssCode));
129-
} catch (ex) {
130-
newStyle.styleSheet.cssText = cssCode;
133+
}
134+
props.controlItems.find((item: any) => {
135+
if (item.data.fieldName == "csslist") {
136+
item.data.itemConfig.items = [];
137+
cssNameArray.forEach((cssName: string, index: number) => {
138+
item.data.itemConfig.items.push({
139+
label: cssName,
140+
value: cssName,
141+
select: false,
142+
id: index + 1,
143+
});
144+
});
145+
return item;
131146
}
147+
});
148+
},
149+
insertCustomCssToHead(cssCode: string) {
150+
const head = document.getElementsByTagName("head")[0];
151+
const oldStyle = document.getElementById("starfish-custom-css");
152+
if (oldStyle) {
153+
head.removeChild(oldStyle); //先清除后插入！！
154+
}
155+
const newStyle: any = document.createElement("style");
156+
newStyle.type = "text/css";
157+
newStyle.rel = "stylesheet";
158+
newStyle.id = "starfish-custom-css";
159+
try {
160+
newStyle.appendChild(document.createTextNode(cssCode));
161+
} catch (ex) {
162+
newStyle.styleSheet.cssText = cssCode;
163+
}
132164
133-
head.appendChild(newStyle);
134-
},
135-
};
136-
},
137-
});
165+
head.appendChild(newStyle);
166+
},
167+
};
168+
},
169+
});
138170
</script>

‎packages/editor/src/components/FormPreview.vue

+2-4
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,11 @@ import { Dynamicform } from "starfish-form";
7070
import uiControl from "@/controller/ui";
7171
import Clipboard from "clipboard";
7272
import { json } from "@codemirror/lang-json";
73-
// import { Codemirror } from "vue-codemirror";
74-
// import { json } from "@codemirror/lang-json";
73+
import { Codemirror } from "vue-codemirror";
7574
export default defineComponent({
7675
components: {
7776
Dynamicform,
78-
// Codemirror,
77+
Codemirror,
7978
},
8079
setup() {
8180
const previewShow = computed(() => formStore.get("previewShow"));
@@ -87,7 +86,6 @@ export default defineComponent({
8786
const codeDialog = ref();
8887
const code = ref();
8988
let clipboard: Clipboard;
90-
// const extensions = [json()];
9189
const dynamicform = ref();
9290
const previewDialog = ref<any>();
9391
// let editor: any = null;

‎packages/editor/src/components/NavList.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -235,13 +235,16 @@ import {
235235
import type {
236236
Controls,
237237
MenuBarData,
238-
MenuItem,
239238
AllFormItem,
240239
BaseComponentItem,
241240
} from "@/type";
242241
import { clearCanvas } from "@/utils/formKeycon";
243242
import { json } from "@codemirror/lang-json";
243+
import { Codemirror } from "vue-codemirror";
244244
export default defineComponent({
245+
components: {
246+
Codemirror,
247+
},
245248
props: {
246249
/** 顶部工具栏配置 */
247250
menu: {

0 commit comments

Comments
 (0)