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

src/styles/app.css

@@ -234,6 +234,10 @@ a.hover:hover {
   margin-left: 8px;
 }
 
+.ml-12 {
+  margin-left: 12px;
+}
+
 .ml-16 {
   margin-left: 16px;
 }

src/styles/props.css

@@ -294,7 +294,23 @@
     }
 
     .t-upload__dragger-progress-info {
+      position: absolute;
+      background: #303746a0;
       display: none;
+      max-width: 100%;
+      align-items: center;
+      justify-content: center;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: 0;
+    }
+
+    &:hover {
+      .t-upload__dragger-progress-info {
+        display: flex;
+      }
     }
   }
 

src/views/components/PenProps.vue

@@ -3,7 +3,35 @@
     <t-tabs v-model="data.tab">
       <t-tab-panel :value="1" label="外观">
         <t-space direction="vertical" class="py-16 w-full">
-          <div class="form-item">
+          <div class="form-item px-12">
+            <label>ID</label>
+            <t-input
+              class="w-full"
+              placeholder="唯一标识"
+              v-model.number="data.pen.id"
+              @change="changeValue('id')"
+            />
+          </div>
+          <div class="form-item px-12" style="margin-top: -12px">
+            <label>名称</label>
+            <t-input
+              class="w-full"
+              placeholder="名称"
+              v-model.number="data.pen.name"
+              @change="changeValue('name')"
+            />
+          </div>
+          <div class="form-item px-12" style="margin-top: -12px">
+            <label>标签</label>
+            <t-taginput
+              class="w-full"
+              placeholder="标签"
+              v-model="data.pen.tags"
+              @change="changeValue('tags')"
+            />
+          </div>
+          <t-divider style="margin: -8px 0" />
+          <div class="form-item" style="margin-top: -12px">
             <t-input
               class="ml-4"
               label="X"
@@ -653,6 +681,7 @@
               <t-space direction="vertical" size="small" class="w-full">
                 <div>
                   <t-upload
+                    ref="uploadRef"
                     v-model="data.images"
                     action="/api/image/upload"
                     theme="image"
@@ -663,11 +692,114 @@
                     @success="fileSuccessed"
                     @remove="fileRemoved"
                   >
-                    <template #fileListDisplay></template>
+                    <template #fileListDisplay>
+                      <a class="mr-4" @click="upload"> 点击上传 </a>
+                      / 拖拽图片到此区域
+                    </template>
                   </t-upload>
                 </div>
-                <div class="form-item">
-                  <div class="flex middle" style="margin-left: -10px"></div>
+                <div class="form-item hover-icons" style="margin-left: -12px">
+                  <t-input
+                    class="ml-4"
+                    label="W"
+                    v-model.number="data.pen.iconWidth"
+                    placeholder="自适应"
+                    min="1"
+                    style="width: 80px"
+                    :format="decimalPlaces"
+                    @change="changeValue('iconWidth')"
+                  />
+                  <t-tooltip
+                    v-if="data.pen.imageRatio"
+                    content="固定比例"
+                    placement="top"
+                  >
+                    <t-icon
+                      name="link"
+                      class="ml-4 hover"
+                      @click="data.pen.imageRatio = !data.pen.imageRatio"
+                    />
+                  </t-tooltip>
+                  <t-tooltip v-else content="不固定比例" placement="top">
+                    <t-icon
+                      name="link-unlink"
+                      class="ml-4 hover icon"
+                      @click="data.pen.imageRatio = !data.pen.imageRatio"
+                    />
+                  </t-tooltip>
+
+                  <t-input
+                    class="ml-4"
+                    label="H"
+                    placeholder="自适应"
+                    v-model.number="data.pen.iconHeight"
+                    min="1"
+                    style="width: 80px"
+                    :format="decimalPlaces"
+                    @change="changeValue('iconHeight')"
+                  />
+
+                  <t-checkbox
+                    class="ml-8"
+                    v-model="data.pen.isBottom"
+                    @change="changeValue('isBottom')"
+                  >
+                    置底
+                  </t-checkbox>
+                </div>
+                <div class="flex">
+                  <label style="width: 30px; color: var(--color)">Url：</label>
+                  {{ data.pen.image }}
+                </div>
+              </t-space>
+            </t-collapse-panel>
+            <t-collapse-panel
+              v-if="data.pen.props.custom"
+              value="4"
+              header="属性"
+            >
+              <t-space direction="vertical" size="small" class="w-full">
+                <div v-for="item in data.pen.props.custom" class="form-item">
+                  <label>{{ item.label }}</label>
+                  <t-checkbox
+                    class="ml-8"
+                    v-if="item.type === 'bool'"
+                    v-model="data.pen[item.key]"
+                    @change="changeValue(item.key)"
+                  />
+                  <t-input
+                    class="w-full"
+                    v-else-if="item.type === 'number'"
+                    v-model.number="data.pen[item.key]"
+                    @change="changeValue(item.key)"
+                    :placeholder="item.placeholder"
+                  />
+                  <t-color-picker
+                    class="w-full"
+                    v-else-if="item.type === 'color'"
+                    format="CSS"
+                    :color-modes="['monochrome']"
+                    :show-primary-color-preview="false"
+                    v-model="data.pen[item.key]"
+                    @change="changeValue(item.key)"
+                    :placeholder="item.placeholder"
+                  />
+                  <t-select
+                    class="w-full"
+                    v-else-if="item.type === 'select'"
+                    size="small"
+                    :options="item.options"
+                    v-model="data.pen[item.key]"
+                    @change="changeValue(item.key)"
+                    :placeholder="item.placeholder"
+                  />
+                  <t-input
+                    class="w-full"
+                    v-else
+                    v-model="data.pen[item.key]"
+                    @change="changeValue(item.key)"
+                    :placeholder="item.placeholder"
+                  />
                 </div>
               </t-space>
             </t-collapse-panel>
@@ -723,18 +855,25 @@
               禁用锚点
             </t-checkbox>
           </div>
+          <t-divider style="margin: -8px 0" />
+          <div class="form-item px-16" style="margin-top: -12px">
+            <label style="width: 60px">鼠标提示</label>
+            <t-button shape="square" variant="outline" style="width: 24px">
+              <t-icon name="ellipsis" slot="icon"
+            /></t-button>
+          </div>
           <t-space />
         </t-space>
       </t-tab-panel>
-      <t-tab-panel :value="2" label="事件"> </t-tab-panel>
-      <t-tab-panel :value="3" label="动画"> </t-tab-panel>
-      <t-tab-panel :value="4" label="数据"> </t-tab-panel>
+      <t-tab-panel :value="2" label="动画"> </t-tab-panel>
+      <t-tab-panel :value="3" label="数据"> </t-tab-panel>
+      <t-tab-panel :value="4" label="交互"> </t-tab-panel>
     </t-tabs>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onUnmounted, reactive } from 'vue';
+import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
 import { getCookie } from '@/services/cookie';
 import { useSelection } from '@/services/selections';
 
@@ -743,6 +882,8 @@ const headers = {
 };
 const updataData = { directory: '/项目' };
 
+const uploadRef = ref();
+
 const data = reactive<any>({
   tab: 1,
   pen: {},
@@ -799,6 +940,25 @@ onBeforeMount(() => {
       },
     ];
   }
+
+  // 测试代码
+  data.pen.props.custom = [
+    { label: '数字', key: 'a', type: 'number', placeholder: '输入提示' },
+    { label: '文本', key: 'b' },
+    { label: '布尔', key: 'c', type: 'bool', placeholder: '输入提示' },
+    { label: '颜色', key: 'd', type: 'color', placeholder: '输入提示' },
+    {
+      label: '下拉框',
+      key: 'd',
+      type: 'select',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+      placeholder: '输入提示',
+    },
+  ];
+  // end
   data.pen.shadow = !!data.pen.shadowColor;
   getRect();
   meta2d.on('translatePens', getRect);
@@ -840,6 +1000,16 @@ const changeValue = (prop: string) => {
     } else {
       v.shadowColor = '';
     }
+  } else if (prop === 'lineGradientColors') {
+    //@ts-ignore
+    if (meta2d.store.active[0].name === 'line') {
+      //@ts-ignore
+      meta2d.store.active[0].calculative.gradientColorStop = null;
+    } else {
+      //@ts-ignore
+      meta2d.store.active[0].calculative.lineGradient = null;
+    }
+    //不同模式切换不同的系统配色
   }
   meta2d.setValue(v);
 };
@@ -868,6 +1038,10 @@ const fileRemoved = () => {
   data.background = [];
 };
 
+const upload = () => {
+  uploadRef.value.triggerUpload();
+};
+
 onUnmounted(() => {
   meta2d.off('translatePens', getRect);
   meta2d.off('resizePens', getRect);