feat:时间曲线编辑器新增重置按钮

src/views/components/PenAnimates.vue

@@ -133,20 +133,28 @@
             </div>
 
             <div class="form-item mt-8">
-              <label>动画时长</label>
+              <label>动画时长
+                <t-tooltip content="需配置时间曲线使用，单独设置无效" placement="right">
+                  <HelpCircleIcon style="font-size: 14px" class="ml-4 hover"/>
+                </t-tooltip></label>
               <t-input-number
                 theme="column"
                 :min="1"
-                placeholder="动画运行时长"
+                placeholder="动画运行时长，单位秒"
                 v-model="item.duration"
                 @change="changeValue(i)"
               ></t-input-number>
             </div>
 
             <div class="form-item mt-8">
-              <label>时间曲线</label>
+              <label>时间曲线
+                <t-tooltip content="需同时配置动画时长，并且运动速度配置将失效" placement="right">
+                  <HelpCircleIcon style="font-size: 14px" class="ml-4 hover"/>
+                </t-tooltip>
+              </label>
+
               <BezierEditor
-                  style="width: 200px"
+                style="width: 200px"
                 v-model="item.animateTimingFunction"
                 @change="changeValue(i)"
               ></BezierEditor>
@@ -303,7 +311,7 @@ import { deepClone } from '@meta2d/core';
 import AnimateFrames from './AnimateFrames.vue';
 import { defaultPureColor } from '@/services/defaults';
 import { MessagePlugin } from 'tdesign-vue-next';
-import {StopCircleIcon, PlayCircleIcon, EditIcon, DeleteIcon} from 'tdesign-icons-vue-next';
+import {StopCircleIcon, PlayCircleIcon, EditIcon, DeleteIcon, HelpCircleIcon} from 'tdesign-icons-vue-next';
 import CodeEditor from "@/views/components/common/CodeEditor.vue";
 import {cdn} from "@/services/api";
 import BezierEditor from "@/views/components/common/BezierEditor.vue";

src/views/components/common/BezierEditor.vue

@@ -33,13 +33,15 @@
 
     <div class="controls">
       <div class="label">{{ modelValue }}</div>
-<!--      <button @click="reset">重置</button>-->
+
+      <RefreshIcon class="resetIcon hover" @click="reset"/>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
+import {RefreshIcon} from "tdesign-icons-vue-next";
 
 const props = defineProps({
   modelValue: String,
@@ -112,8 +114,12 @@ function onMouseUp() {
 const reset = () => {
   p1.value = { x: 0.25, y: 0.75 }
   p2.value = { x: 0.75, y: 0.25 }
-  emit('update:modelValue', formatVal())
-  emit('reset',formatVal())
+
+  const updatedValue = formatVal();
+
+  emit('update:modelValue', updatedValue);  // 更新v-model值
+  emit('reset', updatedValue);              // 触发重置事件（如果有其他监听器）
+  emit('change', updatedValue)
 }
 function onSvgMouseDown(e) {
   if (!svg.value) return
@@ -171,20 +177,8 @@ onBeforeUnmount(() => {
 }
 .controls {
   display: flex;
-  gap: 12px;
+  width: 100%;
+  justify-content: space-between;
   align-items: center;
 }
-
-button {
-  padding: 4px 10px;
-  font-size: 12px;
-  border: 1px solid #aaa;
-  background: #f3f3f3;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-button:hover {
-  background: #e0e0e0;
-}
 </style>