@ebiz/designer-components 0.0.18-tj.1 → 0.0.19-beta.1

package/src/views/UploadDemo.vue

@@ -0,0 +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;
+    }
+  }
+}
+</style> 

package/src/views/WatermarkDemo.vue

@@ -0,0 +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;
+}
+</style>