pen data

src/styles/app.css

@@ -340,6 +340,10 @@ a.hover:hover {
   padding-bottom: 12px;
 }
 
+.pb-16 {
+  padding-bottom: 16px;
+}
+
 .px-16 {
   padding-left: 16px;
   padding-right: 16px;

src/views/components/Actions.vue

@@ -2,17 +2,14 @@
   <div class="props">
     <div v-for="(a, index) in data.actions" class="mb-12">
       <div class="flex middle between">
-        <div class="flex middle">
-          <t-icon name="arrow-right" class="mr-4" />
-          动作{{ index + 1 }}
-        </div>
+        <div class="flex middle">动作{{ index + 1 }}</div>
         <t-icon
           name="close"
           class="hover"
           @click="data.actions.splice(index, 1)"
         />
       </div>
-      <div class="px-16 py-4">
+      <div class="py-4">
         <div class="form-item mt-4">
           <label>动作类型</label>
           <t-select

src/views/components/FileProps.vue

@@ -88,10 +88,20 @@
                 <div class="form-item">
                   <label>缩放方式</label>
                   <t-radio-group class="ml-8" default-value="1">
-                    <t-radio value="1" title="宽高中较小的铺满"
-                      >自动铺满</t-radio
+                    <t-radio
+                      value="1"
+                      title="宽高中较小的铺满"
+                      style="width: 200px"
                     >
-                    <t-radio value="2" title="高度等比例缩放">宽度铺满</t-radio>
+                      自动铺满
+                    </t-radio>
+                    <t-radio
+                      value="2"
+                      title="高度等比例缩放"
+                      style="width: 200px"
+                    >
+                      宽度铺满
+                    </t-radio>
                     <t-radio value="3" title="宽度等比例缩放">高度铺满</t-radio>
                   </t-radio-group>
                 </div>

src/views/components/PenAnimates.vue

@@ -191,7 +191,7 @@
         </t-collapse-panel>
       </t-collapse>
       <t-divider />
-      <div class="mt-16 px-16">
+      <div class="p-16">
         <t-button class="w-full" @click="addAnimate" style="height: 30px">
           添加动画
         </t-button>

src/views/components/PenDatas.vue

@@ -68,7 +68,7 @@
           </t-dropdown>
         </div>
       </div>
-      <div class="mt-8">
+      <div class="mt-8 pb-16">
         <t-dropdown
           :options="options"
           @click="addRealTime"
@@ -470,11 +470,13 @@ const options = ref<any>([
   {
     value: 'progress',
     content: '进度',
+    type: 'number',
     keywords: true,
   },
   {
     value: 'showChild',
     content: '状态',
+    type: 'number',
     keywords: true,
   },
   {
@@ -906,8 +908,12 @@ onUnmounted(() => {
       margin-right: 4px;
     }
 
-    div {
+    & > div {
       width: 110px;
+      &.t-switch {
+        width: fit-content;
+        margin-left: 4px;
+      }
     }
 
     :deep(.t-input) {

src/views/components/PenEvents.vue

@@ -5,13 +5,14 @@
         v-model="openedCollapses"
         :borderless="true"
         :expand-on-row-click="true"
-        expand-icon-placement="right"
+        expand-icon-placement="left"
       >
-        <t-collapse-panel
-          v-for="(item, i) in pen.events"
-          :value="i"
-          :header="`交互事件${i + 1}`"
-        >
+        <t-collapse-panel v-for="(item, i) in pen.events" :value="i">
+          <template #header>
+            <div @click.stop class="head">
+              <t-select v-model="item.name" :options="options" autoWidth />
+            </div>
+          </template>
           <template #headerRightContent>
             <t-space size="small" @click.stop>
               <t-popconfirm
@@ -24,18 +25,11 @@
             </t-space>
           </template>
 
-          <!-- <div class="form-item">
-            <label>交互事件</label>
-            <t-select v-model="item.name" :options="options" />
-          </div> -->
-          <div class="form-item banner">
-            <label>执行动作</label>
-          </div>
-          <!-- <Actions class="mt-8" :data="trigger" /> -->
+          <Actions :data="pen.events[i]" />
         </t-collapse-panel>
       </t-collapse>
       <t-divider />
-      <div class="mt-16 px-16">
+      <div class="p-16">
         <t-dropdown
           :options="options"
           @click="addEvent"
@@ -79,6 +73,7 @@ import { MessagePlugin } from 'tdesign-vue-next';
 import axios from 'axios';
 import { debounce } from '@/services/debouce';
 
+import Actions from './Actions.vue';
 import { updatePen } from './pen';
 
 const route = useRoute();
@@ -165,6 +160,16 @@ onUnmounted(() => {});
     }
   }
 
+  .head {
+    :deep(.t-select) {
+      width: fit-content;
+
+      .t-input {
+        border-color: transparent;
+      }
+    }
+  }
+
   .banner {
     background-color: var(--color-background-input);
     padding: 0 12px;