Merge branch 'local' of https://github.com/le5le-com/visualization-design into local

src/services/defaults.ts

@@ -1005,10 +1005,11 @@ export const formComponents = [
           width: 164,
           height: 6,
           borderRadius: 0.5,
-          progressColor: '#4583ff',
+          progressColor: '#4583FF',
           progress: 0.8,
-          background: 'rgba(225, 227, 232, 1)',
+          background: '#303746',
           lineWidth: 0,
+          borderWidth: 0,
           props: {
             custom: [
               {
@@ -1179,13 +1180,13 @@ export const formComponents = [
           fontSize: 12,
           icon: '\uea10',
           iconFamily: 'l-icon',
-          iconColor: '#52c41a',
+          iconColor: '#FFFFFF99', //#52c41a
           iconSize: 12,
           iconAlign: 'left',
           iconLeft: 8,
           textAlign: 'right',
-          color: '#52c41a',
-          background: '#f6ffed',
+          color: '#FFFFFFAA',
+          background: '#282E3B', //#f6ffed
           textLeft: -6,
         },
       },
@@ -1231,6 +1232,7 @@ export const formComponents = [
           height: 40,
           text: '倒计时',
           deadline: '2024/1/1 00:00:00', //配置未来的时间
+          borderWidth: 0,
           timeFormat:
             '`距离2024年还有：${day}天${hours}时${minutes}分${seconds}秒`',
           props: {
@@ -1254,11 +1256,11 @@ export const formComponents = [
         icon: 'l-shuipingshijianzhou',
         data: {
           name: 'timeline',
-          width: 500,
+          width: 300,
           height: 40,
           hiddenText: true,
           direction: 'horizontal',
-          labelAlign: '', //left/right/alternate/top/bottom
+          labelAlign: 'left', //left/right/alternate/top/bottom
           mode: 'alternate', //alternate
           data: [
             {
@@ -1324,12 +1326,12 @@ export const formComponents = [
         data: {
           name: 'timeline',
           width: 40,
-          height: 500,
+          height: 300,
           text: '时间轴',
           hiddenText: true,
           direction: 'vertical',
           labelAlign: 'left', //left/right/alternate/top/bottom
-          // mode: 'alternate', //alternate
+          mode: 'alternate', //alternate
           data: [
             {
               label: '2022-01-01',
@@ -1431,9 +1433,12 @@ export const formComponents = [
           width: 400,
           height: 200,
           name: 'list',
-          headingColor: '#000',
+          headingColor: '#FFFFFFE6',
           headingSize: 16,
-          background: '#fff',
+          background: '#282E3B',
+          textColor: '#FFFFFF66',
+          hoverTextColor: '#FFFFFF66',
+          // borderWidth:1,
           data: [
             {
               title: '列表标题',
@@ -1700,6 +1705,8 @@ export const formComponents = [
           expanded: ['1', '2'],
           fontSize: 20,
           disableInput: true,
+          textColor: '#FFFFFF',
+          hoverTextColor: '#FFFFFF',
           // iconFamily:'l-icon',
           // icon:'\ue607',
           data: [
@@ -1828,7 +1835,7 @@ export const formComponents = [
         icon: 'l-quanjuxiaoxi',
         data: {
           width: 200,
-          height: 46,
+          height: 40,
           text: '用于表示普通操作信息提示',
           borderRadius: 6,
           name: 'rectangle',
@@ -1837,15 +1844,16 @@ export const formComponents = [
           iconColor: '#4583ff',
           iconSize: 17.5,
           iconAlign: 'left',
-          iconLeft: 8,
+          iconLeft: 10,
           textAlign: 'left',
           color: 'rgba(235, 235, 235, 1)',
-          background: '#272C33',
+          background: '#282E3B',
           textLeft: 30,
+          lineWidth: 0,
           shadow: false,
-          textColor: '#FFF',
+          textColor: '#FFFFFF',
           hoverTextColor: 'rgba(0, 0, 0, 1)',
-          shadowColor: '#313740',
+          shadowColor: '#00000014',
           shadowOffsetX: 6,
           shadowOffsetY: 6,
           shadowBlur: 20,
@@ -1863,25 +1871,26 @@ export const formComponents = [
           icon: '\ue6e4',
           iconFamily: 'l-icon',
           iconColor: '#4583ff',
-          iconSize: 17.5,
+          iconSize: 18,
           iconAlign: 'left-top',
-          iconLeft: 8,
-          iconTop: 8,
+          iconLeft: 15,
+          iconTop: 20,
           textAlign: 'left',
           textBaseline: 'top',
-          textLeft: 30,
-          textTop: 30,
+          textLeft: 40,
+          textTop: 50,
           color: 'rgba(235, 235, 235, 1)',
-          background: '#272C33',
+          background: '#282E3B',
           shadow: false,
           textColor: '#FFFFFF99',
           hoverTextColor: '#666666',
-          shadowColor: 'rgba(250, 247, 247, 0.5)',
+          shadowColor: '#0000000D',
           shadowOffsetX: 6,
           shadowOffsetY: 6,
-          shadowBlur: 20,
+          textWidth: 300,
+          shadowBlur: 24,
           heading: '标题名称',
-          headingColor: '#FFF',
+          headingColor: '#FFFFFFE6',
           headingSize: 16,
           // headingWeight: 'bold',
           props: {
@@ -2117,22 +2126,23 @@ export const formComponents = [
           width: 64,
           height: 64,
           name: 'rectangle',
-          activeBackground: '#eee',
-          background: 'rgba(255, 255, 255, 1)',
+          activeBackground: '#282E3B',
+          background: '#282E3B',
           borderRadius: 0.1,
           color: '#eee',
-          hoverBackground: '#eee',
+          hoverBackground: '#282E3B',
           hoverColor: '#eee',
-          hoverTextColor: '#c5c5c5',
+          hoverTextColor: '#FFFFFFE6',
           iconAlign: 'top',
-          iconColor: 'rgba(0, 0, 0, 1)',
+          iconColor: '#FFFFFFE6',
           iconSize: 20,
           iconTop: 10,
           text: 'TOP',
           textBaseline: 'bottom',
-          textColor: '#c5c5c5',
+          lineWidth: 0,
+          textColor: '#FFFFFFE6',
           textTop: -2,
-          icon: '\ue6a6',
+          icon: '\uec57',
           iconFamily: 'l-icon',
           events: [
             {
@@ -2336,11 +2346,11 @@ export const formComponents = [
                 label: '分页大小',
                 type: 'code',
               },
-              {
-                key: 'maxPageBtn',
-                label: '最多显示页码数按钮数',
-                type: 'number',
-              },
+              // {
+              //   key: 'maxPageBtn',
+              //   label: '最多显示页码数按钮数',
+              //   type: 'number',
+              // },
             ],
           },
         },
@@ -2353,32 +2363,32 @@ export const formComponents = [
           width: 500,
           height: 40,
           hiddenText: true,
-          direction: 'horizontal',
+          direction: 'vertical',//horizontal/vertical
           labelAlign: '', //left/right/alternate/top/bottom
-          mode: 'alternate', //alternate
+          // theme: 'dot', //dot
           current: 2,
           data: [
             {
-              label: '已完成的步骤',
-              content: '内容',
+              title: '已完成的步骤',
+              content: '这里是提示文字dsafsdfadfafadsfdfadfadsfdafdafdasfsdfdfadfdafasdffdfadds',
+              status:'finish' //default/process/finish/error
               // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
             },
             {
-              label: '已完成的步骤',
-              content: '内容',
-            },
-            {
-              label: '进行中的步骤',
-              content: '内容',
+              title: '出错的步骤',
+              content: '这里是提示文字ssss',
+              status:'error' //default/process/finish/error
             },
             {
-              label: '未进行中的步骤',
-              content: '内容',
+              title: '进行中的步骤',
+              content: '这里是提示文字',
+              status:'process' //default/process/finish/error
             },
             {
-              label: '未进行中的步骤',
-              content: '内容',
-            },
+              title: '未完成的步骤',
+              content: '这里是提示文字',
+              status:'default' //default/process/finish/error
+            }
           ],
         },
       },
@@ -2422,7 +2432,6 @@ export const formComponents = [
           selectedKeys: ['0'],
           theme: 'multiple',
           disableInput: true,
-
           data: [
             { text: '场景一', key: '0' },
             { text: '场景二', key: '1', isForbidden: true },
@@ -2678,7 +2687,7 @@ export const formComponents = [
         icon: 'l-yansexuanzekuang',
         data: {
           name: 'inputDom',
-          width: 200,
+          width: 32,
           height: 32,
           externElement: true,
           prefix: false,
@@ -2717,9 +2726,9 @@ export const formComponents = [
           barHeight: 4,
           min: 0,
           max: 100,
-          color: '#1890ff',
-          background: '#D4D6D9',
-          textColor: '#222222',
+          color: '#4583FF1890ff',
+          background: '#303746',
+          textColor: '#FFFFFF66',
           unit: '%',
         },
       },
@@ -2910,8 +2919,10 @@ export const formComponents = [
           width: 120,
           height: 128,
           switch: true,
-          color: '#748E9173',
-          background: '#748E9140',
+          color: '#4583FF',
+          background: '#4583FF33',
+          offColor: '#FF5D3C',
+          onColor: '#58CC84',
           disableInput: true,
         },
       },
@@ -2924,7 +2935,7 @@ export const formComponents = [
           height: 128,
           disableAnchor: true,
           color: '#4583FF',
-          fontColor: '#FFFFFFB3',
+          textColor: '#FFFFFFB3',
           background: '#FF5D3C33',
           activeBacground: '#FF5D3C',
           value: -10,
@@ -2948,7 +2959,7 @@ export const formComponents = [
           markColor: '#fff',
           background: '#FF5D3C33',
           activeBackground: '#FF5D3C',
-          fontColor: '#FFFFFFB3',
+          textColor: '#FFFFFFB3',
           sub: 5,
           barrel: {
             x: 0.3,

src/views/Index.vue

@@ -23,7 +23,11 @@ import PenProps from './components/PenProps.vue';
 import PensProps from './components/PensProps.vue';
 
 import { useSelection, SelectionMode } from '@/services/selections';
+import {onMounted} from "vue";
 
+onMounted(()=>{
+  selections.mode = SelectionMode.File
+})
 const { selections } = useSelection();
 </script>
 

src/views/components/PenAnimates.vue

@@ -225,12 +225,25 @@ const props = defineProps<{
   pen: any;
 }>();
 function changeAnimateAutoPlay(value,item) {
-  props.pen.animations.forEach(i=>{
-    if(i.name !== item.name){
-      i.autoPlay = false
+  if(value){
+    props.pen.autoPlay = true;
+    if(props.pen.animations.length === 1){
+      item.autoPlay = true
+      return
     }
-  })
-  item.autoPlay = true
+    props.pen.animations.forEach(i=>{
+      if(i.name !== item.name){
+        i.autoPlay = false
+      }
+    })
+    item.autoPlay = true
+  }else {
+    let allFalse = props.pen.animations.every(i=>!i.autoPlay);
+    if(allFalse) {
+      props.pen.autoPlay = false
+      props.pen.frames = null
+    }
+  }
 }
 const penTree: any = ref([]);