diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 508622ff35..6ef9450aaf 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -24,6 +24,7 @@
:out-style="config.style"
:style="getComponentStyleDefault(config.style)"
:prop-value="config.propValue"
+ :is-edit="false"
:element="config"
:search-count="searchCount"
/>
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
index de8e9c7951..f06f8c256f 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -12,6 +12,7 @@
{{ $t('panel.upComponent') }}
{{ $t('panel.downComponent') }}
{{ $t('panel.linkage_setting') }}
+ 新增Tab
@@ -137,6 +138,9 @@ export default {
getViewLinkageGather(requestInfo).then(rsp => {
this.$store.commit('setLinkageInfo', rsp.data)
})
+ },
+ addTab() {
+ bus.$emit('add-new-tab')
}
}
}
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 1b307388dd..e4d605547a 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -638,9 +638,9 @@ export default {
showViewDetails(index) {
this.$refs.wrapperChild[index].openChartDetailsDialog()
},
+
resizeView(index, item) {
if (item.type === 'view') {
- // console.log('view:resizeView')
this.$refs.wrapperChild[index].chartResize()
}
},
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index 18cca72236..2b24e3b948 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -27,6 +27,14 @@ export const assistList = [
label: '矩形',
icon: 'iconfont icon-juxing',
defaultClass: 'text-filter'
+ },
+ {
+ id: '10006',
+ component: 'de-tabs',
+ type: 'de-tabs',
+ label: '选项卡',
+ icon: 'iconfont icon-tabs',
+ defaultClass: 'text-filter'
}
]
@@ -142,6 +150,30 @@ const list = [
borderRadius: ''
}
},
+ {
+ id: '10006',
+ component: 'de-tabs',
+ label: '选项卡',
+ propValue: '',
+ icon: 'tabs',
+ type: 'de-tabs',
+ style: {
+ width: 200,
+ height: 200,
+ borderStyle: 'solid',
+ borderWidth: 1,
+ borderColor: '#000000',
+ backgroundColor: '#ffffff',
+ borderRadius: 0
+ },
+ options: {
+ tabList: [{
+ title: 'Tab1',
+ name: '1',
+ content: null
+ }]
+ }
+ },
{
id: '20001',
component: 'picture-add',
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
new file mode 100644
index 0000000000..399b9a89b4
--- /dev/null
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -0,0 +1,269 @@
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+
+
+ 编辑标题
+
+
+
+ 选择视图
+
+
+
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/styles/deicon/demo.css b/frontend/src/styles/deicon/demo.css
index 127f5c8dab..a67054a0a0 100644
--- a/frontend/src/styles/deicon/demo.css
+++ b/frontend/src/styles/deicon/demo.css
@@ -215,35 +215,35 @@
margin: 1em 0;
}
-.markdown >p,
-.markdown >blockquote,
-.markdown >.highlight,
-.markdown >ol,
-.markdown >ul {
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
width: 80%;
}
-.markdown ul >li {
+.markdown ul>li {
list-style: circle;
}
-.markdown >ul li,
-.markdown blockquote ul >li {
+.markdown>ul li,
+.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
-.markdown >ul li p,
-.markdown >ol li p {
+.markdown>ul li p,
+.markdown>ol li p {
margin: 0.6em 0;
}
-.markdown ol >li {
+.markdown ol>li {
list-style: decimal;
}
-.markdown >ol li,
-.markdown blockquote ol >li {
+.markdown>ol li,
+.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
@@ -260,7 +260,7 @@
font-weight: 600;
}
-.markdown >table {
+.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
@@ -269,14 +269,14 @@
margin-bottom: 24px;
}
-.markdown >table th {
+.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
-.markdown >table th,
-.markdown >table td {
+.markdown>table th,
+.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html
index e997334f0c..a854dab0db 100644
--- a/frontend/src/styles/deicon/demo_index.html
+++ b/frontend/src/styles/deicon/demo_index.html
@@ -54,6 +54,18 @@
+ -
+
+
44.tabs
+ 
+
+
+ -
+
+
洗浴
+ 
+
+
-
线性图标-取消下钻
@@ -360,9 +372,9 @@
@font-face {
font-family: 'iconfont';
- src: url('iconfont.woff2?t=1628652979833') format('woff2'),
- url('iconfont.woff?t=1628652979833') format('woff'),
- url('iconfont.ttf?t=1628652979833') format('truetype');
+ src: url('iconfont.woff2?t=1632382166116') format('woff2'),
+ url('iconfont.woff?t=1632382166116') format('woff'),
+ url('iconfont.ttf?t=1632382166116') format('truetype');
}
第二步:定义使用 iconfont 的样式
@@ -388,6 +400,24 @@
+ -
+
+
+ 44.tabs
+
+ .icon-tabs
+
+
+
+ -
+
+
+ 洗浴
+
+ .icon-xiyu
+
+
+
-
@@ -847,6 +877,22 @@
+ -
+
+
44.tabs
+ #icon-tabs
+
+
+ -
+
+
洗浴
+ #icon-xiyu
+
+
-