animates

src/styles/app.css

@@ -214,6 +214,10 @@ a.hover:hover {
   flex: 1;
 }
 
+.center {
+  text-align: center;
+}
+
 .w-full {
   width: 100%;
 }

src/styles/props.css

@@ -137,6 +137,11 @@
   .t-button {
     height: 24px;
     border-color: var(--color-desc);
+
+    &.t-button--theme-primary {
+      border-color: var(--color-primary);
+    }
+
     &:hover {
       border-color: var(--color-primary);
       color: var(--color-primary);
@@ -323,6 +328,19 @@
     }
   }
 
+  .t-color-picker__trigger {
+    &.small {
+      width: 90px;
+
+      .t-input {
+        width: 90px;
+        .t-input__inner {
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
   ::-webkit-scrollbar {
     width: 2px;
     height: 6px;

src/styles/tdesign.css

@@ -52,7 +52,7 @@
   }
 
   &.t-is-selected {
-    background-color: var(--color-background-popup-hover);
+    background: none;
     color: var(--color);
   }
 }
@@ -173,6 +173,7 @@
   .t-divider {
     margin: 4px 0;
     width: 100%;
+    border-top: 1px solid var(--color-border-input);
   }
 }
 
@@ -199,6 +200,15 @@
       }
     }
   }
+
+  /*滚动条里面小方块*/
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar) !important;
+  }
+
+  &::-webkit-scrollbar {
+    width: 7px !important;
+  }
 }
 
 .t-tooltip {
@@ -442,7 +452,7 @@
 .t-popup__arrow {
   &::before {
     background-color: var(--color-background-popup);
-    box-shadow: none;
+    box-shadow: none !important;
   }
 }
 
@@ -451,7 +461,7 @@
 }
 
 .t-button--variant-base {
-  color: #000000e6;
+  color: var(--color);
 
   &:hover {
     color: #000000e6;

src/styles/var.css

@@ -61,4 +61,5 @@
   --td-text-color-placeholder: var(--color-desc);
   --td-brand-color: var(--color-primary);
   --td-bg-color-component: var(--color-border-input);
+  --td-brand-color-light: var(--color-border-input);
 }

src/views/components/PenAnimates.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="animates">
+    <template v-if="pen.animates.length">
+      <t-collapse
+        v-model="openedCollapses"
+        :borderless="true"
+        :expand-on-row-click="false"
+      >
+        <t-collapse-panel v-for="(item, i) in pen.animates" :value="i">
+          <template #header>
+            <input v-model="item.name" />
+          </template>
+          <template #headerRightContent>
+            <t-popconfirm
+              content="确认删除该动画吗"
+              @confirm="pen.animates.splice(i, 1)"
+            >
+              <t-space size="small">
+                <t-icon name="delete" class="hover" />
+              </t-space>
+            </t-popconfirm>
+          </template>
+          <div class="form-item">
+            <label>动画类型</label>
+            <t-select
+              v-model="item.animate"
+              clearable
+              placeholder="动画"
+              :options="animateList"
+              @change="changeAnimate(item)"
+            />
+          </div>
+        </t-collapse-panel>
+      </t-collapse>
+      <div class="mt-8 px-16">
+        <t-button class="w-full" @click="addAnimate" style="height: 30px">
+          添加动画
+        </t-button>
+      </div>
+    </template>
+    <div class="flex column center blank" v-else>
+      <img src="/img/blank.png" />
+      <div class="gray center">还没有动画</div>
+      <div class="mt-8">
+        <t-button @click="addAnimate" style="height: 30px">添加动画</t-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
+
+const { pen } = defineProps<{
+  pen: any;
+}>();
+
+const openedCollapses = ref([0]);
+
+const animateList = [
+  {
+    label: '闪烁',
+    value: '闪烁',
+    data: [],
+  },
+  {
+    label: '缩放',
+    value: '缩放',
+    data: [],
+  },
+  {
+    label: '旋转',
+    value: '旋转',
+    data: [],
+  },
+  {
+    label: '上下跳动',
+    value: '上下跳动',
+    data: [],
+  },
+  {
+    label: '左右跳动',
+    value: '左右跳动',
+    data: [],
+  },
+  {
+    label: '颜色变化',
+    value: '颜色变化',
+    data: [],
+  },
+  {
+    label: '文字变化',
+    value: '文字变化',
+    data: [],
+  },
+  {
+    label: '状态变化',
+    value: '状态变化',
+    data: [],
+  },
+  {
+    label: '翻转',
+    value: '翻转',
+    data: [],
+  },
+  {
+    label: '自定义',
+    value: 'custom',
+    data: [],
+  },
+];
+
+onBeforeMount(() => {
+  if (!pen.animates) {
+    pen.animates = [];
+  }
+});
+
+const addAnimate = () => {
+  openedCollapses.value.push(pen.animates.length);
+  pen.animates.push({
+    name: '动画' + (pen.animates.length + 1),
+  });
+};
+
+const changeAnimate = (item: any) => {};
+</script>
+<style lang="postcss" scoped>
+.animates {
+  height: 100%;
+
+  .blank {
+    height: 70%;
+    img {
+      padding: 16px;
+      opacity: 0.9;
+    }
+  }
+
+  :deep(.t-collapse) {
+    .t-collapse-panel__header {
+      input {
+        outline: none;
+        border: none;
+        background: none;
+        color: var(--color);
+      }
+    }
+
+    .t-collapse-panel__icon:hover {
+      background: none;
+      svg {
+        color: var(--color-primary);
+      }
+    }
+  }
+}
+</style>

src/views/components/PenProps.vue

@@ -929,7 +929,9 @@
           <t-space />
         </t-space>
       </t-tab-panel>
-      <t-tab-panel :value="2" label="动画"> </t-tab-panel>
+      <t-tab-panel :value="2" label="动画">
+        <PenAnimates :pen="data.pen" />
+      </t-tab-panel>
       <t-tab-panel :value="3" label="数据"> </t-tab-panel>
       <t-tab-panel :value="4" label="交互"> </t-tab-panel>
     </t-tabs>
@@ -941,6 +943,8 @@ import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
 import { getCookie } from '@/services/cookie';
 import { useSelection } from '@/services/selections';
 
+import PenAnimates from './PenAnimates.vue';
+
 const headers = {
   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
 };
@@ -1152,17 +1156,5 @@ onUnmounted(() => {
 </script>
 <style lang="postcss" scoped>
 .props {
-  :deep(.t-color-picker__trigger) {
-    &.small {
-      width: 90px;
-
-      .t-input {
-        width: 90px;
-        .t-input__inner {
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
 }
 </style>