feat_default-props&pen.propsDialog

src/services/defaults.ts

@@ -959,6 +959,22 @@ export const formComponents = [
           progress: 0.8,
           background: 'rgba(225, 227, 232, 1)',
           lineWidth: 0,
+          props: {
+            custom: [
+              {
+                key: 'progress',
+                label: '进度',
+                type: 'number',
+                max: 1,
+                min: 0,
+              },
+              {
+                key: 'progressColor',
+                label: '进度颜色',
+                type: 'color',
+              },
+            ],
+          },
         },
       },
       {
@@ -968,7 +984,7 @@ export const formComponents = [
           width: 100,
           height: 100,
           name: 'image',
-          icon: '\uea35',
+          icon: '\uea86',
           iconFamily: 'l-icon',
         },
       },
@@ -979,7 +995,7 @@ export const formComponents = [
           width: 100,
           height: 100,
           name: 'image',
-          image: cdn + '/img/logo.png',
+          image: (cdn ? cdn + '/v' : '') + '/img/logo.png',
         },
       },
       {
@@ -989,7 +1005,7 @@ export const formComponents = [
           width: 100,
           height: 100,
           name: 'gif',
-          image: cdn + '/png/电信机房/防火墙.gif',
+          image: (cdn ? cdn + '/v' : '') + '/png/电信机房/防火墙.gif',
         },
       },
       {
@@ -1002,6 +1018,15 @@ export const formComponents = [
           name: 'video',
           video:
             'https://video.699pic.com/videos/17/69/11/a_aa3jeKZ0D63g1556176911_10s.mp4',
+          props: {
+            custom: [
+              {
+                key: 'video',
+                label: '视频地址',
+                type: 'string',
+              },
+            ],
+          },
         },
       },
       {
@@ -1016,6 +1041,29 @@ export const formComponents = [
             'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv',
           mediaDataSource: {},
           optionalConfig: {},
+          props: {
+            custom: [
+              {
+                key: 'video',
+                label: '视频地址',
+                type: 'string',
+              },
+              {
+                key: 'mediaDataSource',
+                label: '媒体数据源',
+                type: 'code',
+                placeholder:
+                  '具体配置参考:https://github.com/bilibili/flv.js/blob/master/docs/api.md',
+              },
+              {
+                key: 'optionalConfig',
+                label: '配置',
+                type: 'code',
+                placeholder:
+                  '具体配置参考:https://github.com/bilibili/flv.js/blob/master/docs/api.md',
+              },
+            ],
+          },
         },
       },
       {
@@ -1023,10 +1071,19 @@ export const formComponents = [
         icon: 'l-yinpin',
         data: {
           width: 200,
-          height: 200,
+          height: 40,
           externElement: true,
           name: 'video',
           audio: 'https://www.xzmp3.com/down/597caee79849.mp3',
+          props: {
+            custom: [
+              {
+                key: 'audio',
+                label: '视频地址',
+                type: 'string',
+              },
+            ],
+          },
         },
       },
       {
@@ -1038,7 +1095,7 @@ export const formComponents = [
           disableAnchor: true,
           name: 'square',
           lineWidth: 0,
-          image: '/img/avatar.png',
+          image: (cdn ? cdn + '/v' : '') + '/img/avatar.png',
           imageRadius: 0.5,
           background: '#689f38',
           borderRadius: 0.5,
@@ -1098,6 +1155,15 @@ export const formComponents = [
           text: '当前时间',
           timeFormat:
             '`${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒 星期${week}`',
+          props: {
+            custom: [
+              {
+                key: 'timeFormat',
+                label: '显示格式',
+                type: 'string',
+              },
+            ],
+          },
         },
       },
       {
@@ -1111,6 +1177,20 @@ export const formComponents = [
           calculativeTime: '2023/9/23 00:00:00', //配置未来的时间
           timeFormat:
             '`距离杭州亚运会还有：${day}天${hours}时${minutes}分${seconds}秒`',
+          props: {
+            custom: [
+              {
+                key: 'timeFormat',
+                label: '显示格式',
+                type: 'string',
+              },
+              {
+                key: 'calculativeTime',
+                label: '参考时间',
+                type: 'string',
+              },
+            ],
+          },
         },
       },
       {
@@ -1148,6 +1228,33 @@ export const formComponents = [
             },
           ],
           text: '时间轴',
+          props: {
+            custom: [
+              {
+                key: 'mode',
+                label: '标签分布',
+                type: 'select',
+                options: [
+                  { label: '同侧', value: 'same' },
+                  { label: '交叉', value: 'alternate' },
+                ],
+              },
+              {
+                key: 'labelAlign',
+                label: '标签对齐',
+                type: 'select',
+                options: [
+                  { label: '顶部', value: 'top' },
+                  { label: '底部', value: 'bottom' },
+                ],
+              },
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
       {
@@ -1185,6 +1292,33 @@ export const formComponents = [
               content: '事件四',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'mode',
+                label: '标签分布',
+                type: 'select',
+                options: [
+                  { label: '同侧', value: 'same' },
+                  { label: '交叉', value: 'alternate' },
+                ],
+              },
+              {
+                key: 'labelAlign',
+                label: '标签对齐',
+                type: 'select',
+                options: [
+                  { label: '靠左', value: 'left' },
+                  { label: '靠右', value: 'right' },
+                ],
+              },
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
       {
@@ -1193,6 +1327,7 @@ export const formComponents = [
         data: {
           width: 200,
           height: 200,
+          hiddenText: true,
           name: 'calendar',
         },
       },
@@ -1206,7 +1341,7 @@ export const formComponents = [
         name: '列表',
         icon: 'l-liebiao',
         data: {
-          width: 200,
+          width: 400,
           height: 200,
           name: 'list',
           headingColor: '#000',

src/views/components/PenProps.vue

@@ -884,6 +884,16 @@
                     @change="changeValue(item.key)"
                     :placeholder="item.placeholder"
                   />
+                  <t-button
+                    v-else-if="item.type === 'code'"
+                    shape="square"
+                    variant="outline"
+                    style="width: 24px"
+                    @click="showPropsEdit(item)"
+                  >
+                    <t-icon name="ellipsis" slot="icon"
+                  /></t-button>
+
                   <t-input
                     class="w-full"
                     v-else
@@ -990,6 +1000,25 @@
             </div>
             <div class="gray" style="font-size: 12px">支持Markdown格式</div>
           </t-dialog>
+          <t-dialog
+            v-if="propsDialog.show"
+            :visible="true"
+            :header="propsDialog.header"
+            @confirm="onOkPropsEdit"
+            @close="propsDialog.show = false"
+            :width="700"
+          >
+            <div class="py-8">
+              <CodeEditor
+                :json="true"
+                v-model="propsDialog.value"
+                style="height: 300px"
+              />
+            </div>
+            <div class="gray" style="font-size: 12px">
+              {{ propsDialog.placeholder }}
+            </div>
+          </t-dialog>
           <t-space />
         </t-space>
       </t-tab-panel>
@@ -1043,6 +1072,10 @@ const tooltipDialog = reactive<any>({
   show: false,
 });
 
+const propsDialog = reactive<any>({
+  show: false,
+});
+
 const iconsDrawer = reactive<any>({
   show: false,
 });
@@ -1216,6 +1249,20 @@ const onOkTooltip = () => {
   tooltipDialog.show = false;
 };
 
+const showPropsEdit = (item: any) => {
+  propsDialog.key = item.key;
+  propsDialog.header = `${item.label}(${item.key})`;
+  propsDialog.value = data.pen[item.key];
+  propsDialog.placeholder = item.placeholder;
+  propsDialog.show = true;
+};
+
+const onOkPropsEdit = () => {
+  data.pen[propsDialog.key] = propsDialog.value;
+  updatePen(data.pen, propsDialog.key);
+  propsDialog.show = false;
+};
+
 const onChangeIcon = (params: any) => {
   Object.assign(data.pen, params);
   meta2d.setValue({

src/views/components/View.vue

@@ -779,7 +779,6 @@ const meta2dOptions: Options = {
   height: 1080,
   color: '#bdc7db',
   disableAnchor: true,
-  domShapes: ['threeDSence', 'list'],
   defaultFormat: { ...defaultFormat },
 };