@ebiz/designer-components 0.0.48 → 0.0.49

package/src/views/UploadDemo.vue

@@ -1,122 +1,122 @@
-<template>
-  <div class="upload-demo-container">
-    <h2>上传组件示例</h2>
-    
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <EbizUpload
-        :useInternalUpload="true"
-        :auto-upload="true"
-        tips="请选择文件上传"
-      >
-        <template #default>
-          <t-button>点击选择文件</t-button>
-        </template>
-      </EbizUpload>
-    </div>
-    
-    <div class="demo-section">
-      <h3>拖拽上传</h3>
-      <EbizUpload
-        :useInternalUpload="true"
-        :draggable="true"
-        :auto-upload="true"
-        tips="将文件拖拽到此区域即可上传"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h3>多文件上传</h3>
-      <EbizUpload
-        :useInternalUpload="true"
-        :multiple="true"
-        :auto-upload="true"
-        tips="可选择多个文件上传"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h3>图片上传</h3>
-      <EbizUpload
-        :useInternalUpload="true"
-        theme="image"
-        accept="image/*"
-        :auto-upload="true"
-        tips="请选择图片上传"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h3>手动上传</h3>
-      <EbizUpload
-        :useInternalUpload="true"
-        :auto-upload="false"
-        tips="选择文件后需手动点击上传按钮"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h3>文件大小限制</h3>
-      <EbizUpload
-        :useInternalUpload="true"
-        :size-limit="{ size: 1024, unit: 'KB' }"
-        :auto-upload="true"
-        tips="文件大小不能超过1MB"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h3>自定义上传按钮</h3>
-      <EbizUpload
-        :useInternalUpload="true"
-        :auto-upload="true"
-        theme="custom"
-      >
-        <template #default>
-          <t-button>点击选择文件</t-button>
-        </template>
-      </EbizUpload>
-    </div>
-
-    <div class="demo-section">
-      <h3>使用外部上传服务</h3>
-      <EbizUpload
-        :useInternalUpload="false"
-        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
-        :auto-upload="true"
-        tips="使用自定义上传地址"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'UploadDemo'
-};
-</script>
-
-<script setup>
-import { EbizUpload } from '../index.js';
-import { Button as TButton } from 'tdesign-vue-next';
-</script>
-
-<style lang="less" scoped>
-.upload-demo-container {
-  padding: 20px;
-
-  .demo-section {
-    margin-bottom: 30px;
-    padding: 20px;
-    border: 1px solid #eaeaea;
-    border-radius: 4px;
-
-    h3 {
-      margin-top: 0;
-      margin-bottom: 16px;
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-}
+<template>
+  <div class="upload-demo-container">
+    <h2>上传组件示例</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :auto-upload="true"
+        tips="请选择文件上传"
+      >
+        <template #default>
+          <t-button>点击选择文件</t-button>
+        </template>
+      </EbizUpload>
+    </div>
+    
+    <div class="demo-section">
+      <h3>拖拽上传</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :draggable="true"
+        :auto-upload="true"
+        tips="将文件拖拽到此区域即可上传"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>多文件上传</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :multiple="true"
+        :auto-upload="true"
+        tips="可选择多个文件上传"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>图片上传</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        theme="image"
+        accept="image/*"
+        :auto-upload="true"
+        tips="请选择图片上传"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>手动上传</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :auto-upload="false"
+        tips="选择文件后需手动点击上传按钮"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>文件大小限制</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :size-limit="{ size: 1024, unit: 'KB' }"
+        :auto-upload="true"
+        tips="文件大小不能超过1MB"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义上传按钮</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :auto-upload="true"
+        theme="custom"
+      >
+        <template #default>
+          <t-button>点击选择文件</t-button>
+        </template>
+      </EbizUpload>
+    </div>
+
+    <div class="demo-section">
+      <h3>使用外部上传服务</h3>
+      <EbizUpload
+        :useInternalUpload="false"
+        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+        :auto-upload="true"
+        tips="使用自定义上传地址"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UploadDemo'
+};
+</script>
+
+<script setup>
+import { EbizUpload } from '../index.js';
+import { Button as TButton } from 'tdesign-vue-next';
+</script>
+
+<style lang="less" scoped>
+.upload-demo-container {
+  padding: 20px;
+
+  .demo-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #eaeaea;
+    border-radius: 4px;
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
 </style> 

package/src/views/WatermarkDemo.vue

@@ -1,86 +1,86 @@
-<template>
-  <div class="watermark-demo">
-    <h1>水印组件演示</h1>
-    <div class="demo-section">
-      <h2>基础用法</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印示例' }">
-          <div class="content-box">
-            <p>这是被水印覆盖的内容</p>
-            <p>水印会显示在此内容之上</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <t-watermark :watermark-content="{ text: '文字水印' }" :y="120" :x="80" :width="120" :height="60">
-      <div style="width: 100%; height: 300px" />
-    </t-watermark>
-
-    <div class="demo-section">
-      <h2>自定义透明度和角度</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印' }" :alpha="0.2" :rotate="0">
-          <div class="content-box">
-            <p>此水印透明度为0.2且角度为0</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2>自定义间距和大小</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: '自定义水印' }" :width="150" :height="80" :gapX="100" :gapY="100">
-          <div class="content-box">
-            <p>此水印设置了自定义的宽高和间距</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2>可移动水印</h2>
-      <div class="demo-card">
-        <EbizWatermark :watermarkContent="{ text: '可移动水印' }" :movable="true">
-          <div class="content-box">
-            <p>此水印可以随着页面滚动而移动</p>
-          </div>
-        </EbizWatermark>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { EbizWatermark } from '../index.js';
-import { Watermark as TWatermark } from 'tdesign-vue-next';
-</script>
-
-<style scoped>
-.watermark-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-}
-
-.demo-card {
-  border: 1px solid #eee;
-  border-radius: 8px;
-  margin-top: 10px;
-  background-color: #fafafa;
-  overflow: hidden;
-}
-
-.content-box {
-  padding: 40px;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
+<template>
+  <div class="watermark-demo">
+    <h1>水印组件演示</h1>
+    <div class="demo-section">
+      <h2>基础用法</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印示例' }">
+          <div class="content-box">
+            <p>这是被水印覆盖的内容</p>
+            <p>水印会显示在此内容之上</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <t-watermark :watermark-content="{ text: '文字水印' }" :y="120" :x="80" :width="120" :height="60">
+      <div style="width: 100%; height: 300px" />
+    </t-watermark>
+
+    <div class="demo-section">
+      <h2>自定义透明度和角度</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印' }" :alpha="0.2" :rotate="0">
+          <div class="content-box">
+            <p>此水印透明度为0.2且角度为0</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>自定义间距和大小</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: '自定义水印' }" :width="150" :height="80" :gapX="100" :gapY="100">
+          <div class="content-box">
+            <p>此水印设置了自定义的宽高和间距</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>可移动水印</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: '可移动水印' }" :movable="true">
+          <div class="content-box">
+            <p>此水印可以随着页面滚动而移动</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizWatermark } from '../index.js';
+import { Watermark as TWatermark } from 'tdesign-vue-next';
+</script>
+
+<style scoped>
+.watermark-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+}
+
+.demo-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin-top: 10px;
+  background-color: #fafafa;
+  overflow: hidden;
+}
+
+.content-box {
+  padding: 40px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
 </style> 

package/src/components/EbizMindmap/README.md

@@ -1,8 +0,0 @@
-# 思维导图组件，组织关系图也是用的这个
-
-这是一个组织关系图组件，使用的@opentiny/huicharts下的MindmapChart实现，使用文档 @https://opentiny.design/tiny-charts/MindmapLayout
-
-官网的demo示例链接：https://opentiny.design/tiny-charts-playground/playground.html?name=MindmapChart-1&theme=hdesign-light
-
-我们的需求里面出了有部门之外，还需要有企业和岗位，企业下面有部门，部门下面有岗位和子部门，岗位下面没有子级
-

package/src/components/EbizMindmap/components/GridNode.vue

@@ -1,102 +0,0 @@
-<template>
-	<tiny-tooltip pre :content="tipContent" placement="bottom" effect="light">
-		<div class="grid-card" :style="style">
-			<img draggable="false" v-if="iconPath" :src="iconPath" />
-			<div class="text" :style="`bottom:${data.height / 2 }px`"> {{ data.text }}</div>
-		</div>
-	</tiny-tooltip>
-</template>
-
-<script  >
-import { Tooltip } from '@opentiny/vue'
-export default {
-	components: {
-		TinyTooltip:  Tooltip
-	},
-	props: {
-		data: Object,
-	},
-	data() {
-		let styleObject = {};
-		let data = this.data;
-		let iconPath;
-		let tipContent = [];
-		let icons = {
-			main: './image/charts/layout/servers_main.svg',
-			portal: './image/charts/layout/servers_portal.svg',
-			bms: './image/charts/layout/servers_bms.svg',
-			ecs: './image/charts/layout/servers_ecs.svg',
-			hecs: './image/charts/layout/servers_hecs.svg'
-		}
-		if(data.width) {
-			styleObject.width = data.width + 'px';
-		}
-		if(data.height) {
-			styleObject.height = data.height + 'px';
-		}
-		if(data.fill) {
-			styleObject.background = data.fill;
-		}
-		iconPath = icons[data.name];
-		if(data.name){
-			tipContent.push(`服务器名称：${data.name}`)
-		}
-		if(data.ip){
-			tipContent.push(`IP地址： ${data.ip}`)
-		}
-		if (data.iconPath) {
-			iconPath = data.iconPath;
-		}
-		return {
-        	style: styleObject,
-			iconPath: iconPath,
-			tipContent: tipContent.join('\n')
-    	}
-	},
-	mounted() {
-
-	},
-	computed: {
-
-	},
-
-	methods: {
-
-	}
-}
-</script>
-
-
-<style scoped>
-.grid-card {
-	width: 100%;
-	height: 100%;
-	border-radius: 50%;
-	border: 1px solid #6599ff;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #fff;
-	position: relative;
-	
-}
-
-.text {
-	position: absolute;
-	transform: translateY(100%);
-	width: calc(100% + 30px);
-	text-align: center;
-	font-size: 12px;
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	margin-bottom: -18px;
-    color: var(--ti-base-color-common-7);
-}
-img{
-}
-img + .text{
-  margin-bottom: -35px;
-}
-</style>

package/src/components/EbizMindmap/components/node.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="mindmap-card">
-    <div class="mindmap-top" :style="{ backgroundColor: dynamicBackgroundColor }">
-      <p>{{ data.text }}</p>
-    </div>
-    <div class="mindmap-con">
-      <h4>部门人数: {{ data.peopleNum }}人</h4>
-      <!-- <div class="mindmap-progress-container">
-        <tiny-progress class="progress" :stroke-width="8" :percentage="data.peopleNum"
-          :format="formatText"></tiny-progress>
-      </div> -->
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { Progress as TinyProgress } from '@opentiny/vue';
-
-const props = defineProps({
-  data: {
-    type: Object,
-    required: true
-  }
-});
-
-const dynamicBackgroundColor = computed(() => {
-  if (props.data.id.includes('root')) {
-    return '#2070F3';
-  } else if (props.data.id.includes('researchDept')) {
-    return '#F4840C';
-  } else if (props.data.id.includes('designDept')) {
-    return '#09AA71';
-  }
-  return '#E02128'; // 默认背景颜色
-});
-
-const formatText = () => {
-  return `${props.data.peopleNum}/100`;
-};
-</script>
-
-<style>
-.mindmap-card {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  overflow: hidden;
-  font-family: Arial, sans-serif;
-  padding-left: 4px;
-  padding-right: 8px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-}
-
-.mindmap-top {
-  height: 30%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 1px solid #cccccc;
-  margin-left: -16px;
-  margin-right: -16px;
-  color: white;
-}
-
-.mindmap-con {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0 10px;
-  margin-top: 10px;
-  box-sizing: border-box;
-  font-size: 12px;
-}
-
-.tiny-progress__text {
-  font-size: 12px !important;
-  width: 20%
-}
-
-.mindmap-progress-container {
-  width: 100%;
-  margin-top: 4px;
-  margin-bottom: 6px;
-}
-
-.tiny-progress tiny-progress--line progress {
-  width: 80%
-}
-</style>

package/src/components/EbizMindmap/components/vueNode.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="chart-container">
-    <div class='chart drag-manager-wrap' ref="chartRef">
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch } from 'vue';
-import MindmapChart from '../../charts/framework/charts/MindmapChart';
-import Demo from './node.vue';
-
-const props = defineProps({
-  option: {
-    type: Object,
-    required: true
-  },
-  layoutoption: {
-    type: Object,
-    required: true
-  }
-});
-
-const chartRef = ref(null);
-const integrateChart = ref(null);
-const newoption = ref({});
-const currentTheme = ref(localStorage.getItem('chartTheme') || 'hdesign-light');
-
-const renderChart = () => {
-  integrateChart.value = new MindmapChart();
-  integrateChart.value.init(chartRef.value);
-  newoption.value = JSON.parse(JSON.stringify(props.option));
-  newoption.value.component = Demo;
-  integrateChart.value.setOption(newoption.value);
-  integrateChart.value.canvas.onScale = (args) => { };
-  integrateChart.value.render();
-};
-
-onMounted(() => {
-  renderChart();
-});
-
-watch(() => props.layoutoption, (newValue) => {
-  chartRef.value.innerHTML = '';
-  newoption.value.layout.direction = newValue.direction;
-  newoption.value.layout.vGap = newValue.vGap;
-  newoption.value.layout.hGap = newValue.hGap;
-  newoption.value.layout.oneSide = [];
-  newoption.value.layout.oneSide.push(newValue.oneSideString);
-
-  integrateChart.value.init(chartRef.value);
-  integrateChart.value.setOption(newoption.value);
-  integrateChart.value.canvas.onScale = (args) => { };
-  integrateChart.value.render();
-}, { deep: true });
-</script>
-
-<style scoped>
-.drag-manager-wrap {
-  width: 100% !important;
-  height: 600px;
-  overflow: hidden;
-}
-</style>