|
|
@@ -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);
|
ananzhusen