animate

src/styles/app.css

@@ -319,7 +319,7 @@ a.hover:hover {
 
 /*滚动条里面小方块*/
 ::-webkit-scrollbar-thumb {
-  background-color: var(--color-scrollbar);
+  background-color: var(--color-scrollbar) !important;
   border-radius: 4px;
 }
 

src/styles/props.css

@@ -340,6 +340,15 @@
         }
       }
     }
+
+    .t-input--auto-width {
+      max-width: 100%;
+
+      .t-input__input-pre {
+        max-width: 100%;
+        text-overflow: ellipsis;
+      }
+    }
   }
 
   ::-webkit-scrollbar {

src/styles/tdesign.css

@@ -13,7 +13,7 @@
 
   &.t-is-error {
     box-shadow: none;
-    border-color: var(--color-error);
+    border-color: var(--color-error) !important;
   }
 
   &.t-input--prefix > .t-input__prefix,
@@ -102,7 +102,7 @@
       display: block;
       padding: 0 16px;
       line-height: 32px;
-      border-radius: 4px;
+      border-radius: 2px;
 
       &:hover {
         background-color: var(--color-background-popup-hover);
@@ -130,6 +130,10 @@
     width: 100%;
     border-top: 1px solid var(--color-border-input);
   }
+
+  &::-webkit-scrollbar {
+    width: 7px !important;
+  }
 }
 
 .t-popup__content {
@@ -156,11 +160,6 @@
     }
   }
 
-  /*滚动条里面小方块*/
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar) !important;
-  }
-
   &::-webkit-scrollbar {
     width: 7px !important;
   }
@@ -305,6 +304,7 @@
       max-width: 100%;
       .t-input .t-input__inner {
         text-overflow: ellipsis;
+        margin-right: 10px;
       }
     }
   }

src/views/components/AnimateFrames.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="animate-frames">
+  <div class="animate-frames props">
     <div class="head">
       <label>{{ animate.name }} </label>
       <t-icon
@@ -32,10 +32,9 @@
                 </t-tooltip>
                 <t-tooltip content="添加属性">
                   <t-dropdown
-                    :options="[
-                      { content: '操作一', value: 1 },
-                      { content: '操作二', value: 2 },
-                    ]"
+                    :options="propOptions"
+                    @click="addProp(i, $event)"
+                    :minColumnWidth="150"
                   >
                     <t-icon name="file-add" class="hover ml-4" />
                   </t-dropdown>
@@ -66,75 +65,85 @@
                     {{ propDescriptions[prop].label }}
                   </label>
 
-                  <t-input-number
-                    v-if="propDescriptions[prop].type === 'number'"
-                    v-model="item[prop]"
-                    theme="normal"
-                    :placeholder="propDescriptions[prop].placeholder"
-                    :min="propDescriptions[prop].min"
-                    :max="propDescriptions[prop].max"
-                    :step="propDescriptions[prop].step"
-                  />
-                  <t-select
-                    v-else-if="propDescriptions[prop].type === 'select'"
-                    v-model="item[prop]"
-                    :placeholder="propDescriptions[prop].placeholder"
-                    :options="propDescriptions[prop].options"
-                  />
-                  <t-color-picker
-                    v-else-if="propDescriptions[prop].type === 'color'"
-                    v-model="item[prop]"
-                    :placeholder="propDescriptions[prop].placeholder"
-                    format="CSS"
-                    :enable-alpha="true"
-                    :color-modes="
-                      propDescriptions[prop].colorModes ||
-                      propDescriptions[prop].colorModesFn(
-                        item[propDescriptions[prop].colorModesBind]
-                      )
-                    "
-                    :show-primary-color-preview="false"
-                    :clearable="true"
-                  />
-                  <t-switch
-                    v-else-if="propDescriptions[prop].type === 'bool'"
-                    v-model="item[prop]"
-                    class="ml-8 mt-8"
-                    size="small"
-                  />
-                  <t-select
-                    v-else-if="propDescriptions[prop].type === 'child'"
-                    v-model="item[prop]"
-                    :placeholder="propDescriptions[prop].placeholder"
-                  >
-                    <t-option
-                      v-for="(child, i) in selections.pen.children"
-                      :key="i"
-                      :value="i"
-                      :label="`状态${i + 1}`"
+                  <div>
+                    <t-input-number
+                      class="w-full"
+                      v-if="propDescriptions[prop].type === 'number'"
+                      v-model="item[prop]"
+                      theme="normal"
+                      :placeholder="propDescriptions[prop].placeholder"
+                      :min="propDescriptions[prop].min"
+                      :max="propDescriptions[prop].max"
+                      :step="propDescriptions[prop].step"
                     />
-                  </t-select>
-                  <t-input
-                    v-else
-                    v-model="item[prop]"
-                    :placeholder="propDescriptions[prop].placeholder"
-                  />
+                    <t-select
+                      class="w-full"
+                      v-else-if="propDescriptions[prop].type === 'select'"
+                      v-model="item[prop]"
+                      :placeholder="propDescriptions[prop].placeholder"
+                      :options="propDescriptions[prop].options"
+                    />
+                    <t-color-picker
+                      class="w-full"
+                      v-else-if="propDescriptions[prop].type === 'color'"
+                      v-model="item[prop]"
+                      :placeholder="propDescriptions[prop].placeholder"
+                      format="CSS"
+                      :enable-alpha="true"
+                      :color-modes="
+                        propDescriptions[prop].colorModes ||
+                        propDescriptions[prop].colorModesFn(
+                          item[propDescriptions[prop].colorModesBind]
+                        )
+                      "
+                      :show-primary-color-preview="false"
+                    />
+                    <t-switch
+                      v-else-if="propDescriptions[prop].type === 'bool'"
+                      v-model="item[prop]"
+                      class="ml-8 mt-8"
+                      size="small"
+                    />
+                    <t-select
+                      class="w-full"
+                      v-else-if="propDescriptions[prop].type === 'child'"
+                      v-model="item[prop]"
+                      :placeholder="propDescriptions[prop].placeholder"
+                    >
+                      <t-option
+                        v-for="(child, i) in selections.pen.children"
+                        :key="i"
+                        :value="i"
+                        :label="`状态${i + 1}`"
+                      />
+                    </t-select>
+                    <t-input
+                      class="w-full"
+                      v-else
+                      v-model="item[prop]"
+                      :placeholder="propDescriptions[prop].placeholder"
+                    />
+                  </div>
                 </template>
                 <template v-else>
                   <label>
                     {{ prop }}
                   </label>
-                  <t-input v-model="item[prop]" />
+                  <div>
+                    <t-input class="w-full" v-model="item[prop]" />
+                  </div>
                 </template>
+
+                <t-icon name="close" class="hover" />
               </div>
             </section>
           </t-collapse-panel>
         </t-collapse>
         <t-divider />
         <div class="mt-16 px-16">
-          <t-button class="w-full" @click="addFrame" style="height: 30px"
-            >添加帧</t-button
-          >
+          <t-button class="w-full" @click="addFrame" style="height: 30px">
+            添加帧
+          </t-button>
         </div>
       </template>
       <div class="flex column center blank" v-else>
@@ -163,25 +172,23 @@ const { selections }: { selections: any } = useSelection();
 
 const openedCollapses = ref([0]);
 
-const frameProps: any = reactive({});
+const frameProps: any = ref([]);
 
 const propDescriptions: any = {
   visible: {
     label: '显示',
     type: 'bool',
-    sort: 0,
   },
   scale: {
     label: '缩放',
     type: 'number',
-    sort: 1,
     min: 0.01,
     max: 100,
+    placeholder: '缩放比例',
   },
   rotate: {
     label: '旋转',
     type: 'number',
-    sort: 2,
     min: 0,
     max: 360,
     placeholder: '°',
@@ -189,19 +196,17 @@ const propDescriptions: any = {
   x: {
     label: 'X位移',
     type: 'number',
-    sort: 3,
     placeholder: 'px',
   },
   y: {
     label: 'Y位移',
     type: 'number',
-    sort: 4,
     placeholder: 'px',
   },
   color: {
     label: '前景颜色',
     type: 'color',
-    sort: 5,
+    colorModes: ['monochrome'],
   },
   bkType: {
     label: '背景类型',
@@ -220,39 +225,33 @@ const propDescriptions: any = {
         value: 2,
       },
     ],
-    sort: 6,
   },
   background: {
     label: '背景颜色',
     type: 'color',
     colorModesFn: (t: number) => {
-      if (t) {
+      if (t > 0) {
         return ['linear-gradient'];
       } else {
         return ['monochrome'];
       }
     },
     colorModesBind: 'bkType',
-    sort: 7,
   },
   text: {
     label: '文字',
-    sort: 8,
   },
   showChild: {
     label: '状态',
     type: 'child',
-    sort: 9,
   },
   flipX: {
     label: '水平翻转',
     type: 'bool',
-    sort: 10,
   },
   flipY: {
     label: '垂直翻转',
     type: 'bool',
-    sort: 11,
   },
   progress: {
     label: '进度',
@@ -260,19 +259,16 @@ const propDescriptions: any = {
     step: 0.1,
     min: 0,
     max: 1,
-    placeholder: '0 - 1',
-    sort: 12,
+    placeholder: '0 - 1之间',
   },
   progressColor: {
     label: '进度颜色',
     type: 'color',
     colorModes: ['monochrome'],
-    sort: 13,
   },
   verticalProgress: {
     label: '垂直进度',
     type: 'bool',
-    sort: 14,
   },
   globalAlpha: {
     label: '透明度',
@@ -280,52 +276,212 @@ const propDescriptions: any = {
     step: 0.1,
     min: 0,
     max: 1,
-    placeholder: '0 - 1',
-    sort: 15,
+    placeholder: '0 - 1之间',
   },
   dash: {
     label: '线条样式',
     type: 'select',
     options: [
       {
-        label: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 20px;">
-                  <g fill="none" stroke="black" stroke-width="1">
-                    <path d="M0 9 l85 0" />
-                  </g>
-                </svg>`,
+        label: `—————————`,
         value: 0,
       },
       {
-        label: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 20px;">
-                  <g fill="none" stroke="black" stroke-width="1">
-                    <path stroke-dasharray="5 5" d="M0 9 l85 0" />
-                  </g>
-                </svg>`,
+        label: `- - - - - - - - - - - - -`,
         value: 1,
       },
       {
-        label: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 20px;">
-                  <g fill="none" stroke="black" stroke-width="1">
-                    <path stroke-dasharray="10 10" d="M0 9 l85 0" />
-                  </g>
-                </svg>`,
+        label: `—  —  —  —  —  — — `,
         value: 2,
       },
       {
-        label: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 20px;">
-                  <g fill="none" stroke="black" stroke-width="1">
-                    <path stroke-dasharray="10 10 2 10" d="M0 9 l85 0" />
-                  </g>
-                </svg>`,
+        label: `— - — - — - — - —`,
         value: 3,
       },
     ],
-    sort: 16,
+  },
+  gradientRadius: {
+    label: '背景渐变半径',
+    type: 'number',
+    min: 0,
+    max: 1,
+    placeholder: '0 - 1之间',
+  },
+  lineWidth: {
+    label: '线条宽度',
+    type: 'number',
+    min: 1,
+    placeholder: 'px',
+  },
+  strokeType: {
+    label: '线条渐变',
+    type: 'bool',
+  },
+  lineGradientColors: {
+    label: '线条渐变颜色',
+    type: 'color',
+    colorModes: ['linear-gradient'],
+  },
+  fontFamily: {
+    label: '显示阴影',
+    type: 'select',
+    options: [
+      {
+        label: '新宋体',
+        value: '新宋体',
+      },
+      {
+        label: '微软雅黑',
+        value: '微软雅黑',
+      },
+      {
+        label: '黑体',
+        value: '黑体',
+      },
+      {
+        label: '楷体',
+        value: '楷体',
+      },
+      {
+        label: '-apple-system',
+        value: '-apple-system',
+      },
+      {
+        label: 'BlinkMacSystemFont',
+        value: 'BlinkMacSystemFont',
+      },
+      {
+        label: 'PingFang SC',
+        value: 'PingFang SC',
+      },
+      {
+        label: 'Hiragino Sans GB',
+        value: 'Hiragino Sans GB',
+      },
+      {
+        label: 'Microsoft YaHei UI',
+        value: 'Microsoft YaHei UI',
+      },
+      {
+        label: 'Microsoft YaHei',
+        value: 'Microsoft YaHei',
+      },
+      {
+        label: 'fangsong',
+        value: 'fangsong',
+      },
+      {
+        label: 'Source Han Sans CN',
+        value: 'Source Han Sans CN',
+      },
+      {
+        label: 'sans-serif',
+        value: 'sans-serif',
+      },
+      {
+        label: 'serif',
+        value: 'serif',
+      },
+      {
+        label: 'Apple Color Emoji',
+        value: 'Apple Color Emoji',
+      },
+      {
+        label: 'Segoe UI Emoji',
+        value: 'Segoe UI Emoji',
+      },
+      {
+        label: 'Segoe UI Symbol',
+        value: 'Segoe UI Symbol',
+      },
+    ],
+  },
+  fontSize: {
+    label: '字体大小',
+    type: 'number',
+    min: 1,
+    placeholder: 'px',
+  },
+  textColor: {
+    label: '文字颜色',
+    type: 'color',
+    colorModes: ['monochrome'],
+  },
+  textBackground: {
+    label: '文字背景',
+    type: 'color',
+    colorModes: ['monochrome'],
+  },
+  fontStyle: {
+    label: '文字倾斜',
+    type: 'select',
+    options: [
+      {
+        label: `正常`,
+        value: 'normal',
+      },
+      {
+        label: `倾斜`,
+        value: 'italic',
+      },
+    ],
+  },
+  fontWeight: {
+    label: '文字加粗',
+    type: 'select',
+    options: [
+      {
+        label: `正常`,
+        value: 'normal',
+      },
+      {
+        label: `加粗`,
+        value: 'bold',
+      },
+    ],
+  },
+  textHasShadow: {
+    label: '文字阴影',
+    type: 'bool',
+  },
+  shadow: {
+    label: '显示阴影',
+    type: 'bool',
+  },
+  shadowColor: {
+    label: '阴影颜色',
+    type: 'color',
+    colorModes: ['monochrome'],
+  },
+  shadowBlur: {
+    label: '阴影模糊半径',
+    type: 'number',
+    min: 0,
+    placeholder: '正数',
+  },
+  shadowOffsetX: {
+    label: '阴影X偏移',
+    type: 'number',
+    placeholder: 'px',
+  },
+  shadowOffsetY: {
+    label: '阴影Y偏移',
+    type: 'number',
+    placeholder: 'px',
   },
 };
 
+const propOptions: any = reactive([]);
+
 onMounted(() => {
   onChangeCollapse([0]);
+
+  Object.keys(propDescriptions).forEach((key) => {
+    propOptions.push({
+      value: key,
+      content: propDescriptions[key].label,
+    });
+  });
 });
 
 const addFrame = (i?: number) => {
@@ -342,19 +498,26 @@ const onChangeCollapse = (val: number[]) => {
   if (!animate.frames.length) {
     return;
   }
+  frameProps.value = [];
+  for (let i = 0; i < animate.frames.length; i++) {
+    frameProps.value[i] = [];
+  }
   for (const i of val) {
-    frameProps[i] = [];
-    for (const key in animate.frames[i]) {
+    Object.keys(animate.frames[i]).forEach((key) => {
       if (key !== 'duration') {
-        frameProps[i].push(key);
+        frameProps.value[i].push(key);
       }
-    }
-    frameProps[i].sort((a: any, b: any) => {
-      a.sort > b.sort ? 1 : -1;
     });
   }
 };
 
+const addProp = (i: number, e: { value: string }) => {
+  const found = frameProps.value[i].findIndex((key: string) => key === e.value);
+  if (found < 0) {
+    frameProps.value[i].push(e.value);
+  }
+};
+
 const close = () => {
   emit('close');
 };
@@ -390,6 +553,26 @@ const close = () => {
     }
   }
 
+  .form-item {
+    position: relative;
+
+    & > div {
+      width: 190px;
+      flex-shrink: 0;
+    }
+
+    & > svg {
+      flex-shrink: 0;
+      visibility: hidden;
+    }
+
+    &:hover {
+      & > svg {
+        visibility: visible;
+      }
+    }
+  }
+
   :deep(.t-collapse) {
     .t-collapse-panel__header {
       .t-input {

src/views/components/PenAnimates.vue

@@ -364,7 +364,7 @@ onBeforeMount(() => {
   const p = meta2d.findOne(pen.id);
   if (p?.calculative?.start) {
     // @ts-ignore
-    isPlaying.value = p?.calculative?.playAnimate;
+    isPlaying.value = p?.currentAnimation;
   }
 
   penTree.value = getPenTree();