@ebiz/designer-components 0.0.18-tj.1

package/src/views/TdesignForm.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="tdesign-form-demo">
+    <h2>TDesign 表单示例</h2>
+    
+    <div class="section">
+      <h3>基础表单</h3>
+      <ebiz-tdesign-form :data="baseFormData" :rules="baseFormRules" @submit="handleSubmit">
+        <ebiz-tdesign-form-item label="用户名" name="username">
+          <ebiz-tdesign-input v-model="baseFormData.username" placeholder="请输入用户名" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item label="密码" name="password">
+          <ebiz-tdesign-input v-model="baseFormData.password" type="password" placeholder="请输入密码" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item>
+          <ebiz-tdesign-button theme="primary" type="submit" content="提交" />
+          <ebiz-tdesign-button style="margin-left: 10px;" type="reset" content="重置" />
+        </ebiz-tdesign-form-item>
+      </ebiz-tdesign-form>
+    </div>
+    
+    <div class="section">
+      <h3>不同标签对齐方式</h3>
+      <div class="form-wrapper">
+        <div class="form-item">
+          <h4>左对齐</h4>
+          <ebiz-tdesign-form :data="alignFormData" label-align="left">
+            <ebiz-tdesign-form-item label="用户名" name="username">
+              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电子邮箱" name="email">
+              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+        
+        <div class="form-item">
+          <h4>右对齐</h4>
+          <ebiz-tdesign-form :data="alignFormData" label-align="right">
+            <ebiz-tdesign-form-item label="用户名" name="username">
+              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电子邮箱" name="email">
+              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+        
+        <div class="form-item">
+          <h4>顶部对齐</h4>
+          <ebiz-tdesign-form :data="alignFormData" label-align="top">
+            <ebiz-tdesign-form-item label="用户名" name="username">
+              <ebiz-tdesign-input v-model="alignFormData.username" placeholder="请输入用户名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电子邮箱" name="email">
+              <ebiz-tdesign-input v-model="alignFormData.email" placeholder="请输入电子邮箱" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同布局类型</h3>
+      <div class="form-wrapper">
+        <div class="form-item">
+          <h4>垂直布局</h4>
+          <ebiz-tdesign-form :data="layoutFormData" layout="vertical">
+            <ebiz-tdesign-form-item label="姓名" name="name">
+              <ebiz-tdesign-input v-model="layoutFormData.name" placeholder="请输入姓名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电话" name="phone">
+              <ebiz-tdesign-input v-model="layoutFormData.phone" placeholder="请输入电话" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+        
+        <div class="form-item">
+          <h4>行内布局</h4>
+          <ebiz-tdesign-form :data="layoutFormData" layout="inline">
+            <ebiz-tdesign-form-item label="姓名" name="name">
+              <ebiz-tdesign-input v-model="layoutFormData.name" placeholder="请输入姓名" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item label="电话" name="phone">
+              <ebiz-tdesign-input v-model="layoutFormData.phone" placeholder="请输入电话" />
+            </ebiz-tdesign-form-item>
+            
+            <ebiz-tdesign-form-item>
+              <ebiz-tdesign-button theme="primary" content="搜索" />
+            </ebiz-tdesign-form-item>
+          </ebiz-tdesign-form>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>表单校验</h3>
+      <ebiz-tdesign-form 
+        :data="validateFormData" 
+        :rules="validateFormRules" 
+        show-error-message 
+        status-icon
+        @validate="handleValidate"
+        @submit="handleSubmit"
+      >
+        <ebiz-tdesign-form-item label="用户名" name="username" help="请输入3-20个字符">
+          <ebiz-tdesign-input v-model="validateFormData.username" placeholder="请输入用户名" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item label="电子邮箱" name="email">
+          <ebiz-tdesign-input v-model="validateFormData.email" placeholder="请输入电子邮箱" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item label="年龄" name="age">
+          <ebiz-tdesign-input v-model="validateFormData.age" type="number" placeholder="请输入年龄" />
+        </ebiz-tdesign-form-item>
+        
+        <ebiz-tdesign-form-item>
+          <ebiz-tdesign-button theme="primary" type="submit" content="提交" />
+          <ebiz-tdesign-button style="margin-left: 10px;" type="reset" content="重置" />
+        </ebiz-tdesign-form-item>
+      </ebiz-tdesign-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignForm, EbizTdesignFormItem, EbizTdesignInput, EbizTdesignButton } from '../index.js';
+
+export default {
+  name: 'TdesignFormDemo',
+  components: {
+    EbizTdesignForm,
+    EbizTdesignFormItem,
+    EbizTdesignInput,
+    EbizTdesignButton
+  },
+  data() {
+    return {
+      // 基础表单数据
+      baseFormData: {
+        username: '',
+        password: ''
+      },
+      // 基础表单校验规则
+      baseFormRules: {
+        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+      },
+      
+      // 对齐方式表单数据
+      alignFormData: {
+        username: '',
+        email: ''
+      },
+      
+      // 布局类型表单数据
+      layoutFormData: {
+        name: '',
+        phone: ''
+      },
+      
+      // 表单校验数据
+      validateFormData: {
+        username: '',
+        email: '',
+        age: ''
+      },
+      // 表单校验规则
+      validateFormRules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { min: 3, max: 20, message: '用户名长度应该在3-20个字符之间', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的电子邮箱格式', trigger: 'blur' }
+        ],
+        age: [
+          { required: true, message: '请输入年龄', trigger: 'blur' },
+          { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
+          { validator: (val) => val >= 18, message: '年龄必须大于等于18岁', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    handleSubmit(e) {
+      console.log('表单提交', e);
+      alert('表单提交成功！');
+    },
+    handleValidate(params) {
+      console.log('表单校验结果', params);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.tdesign-form-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+h4 {
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: #666;
+}
+
+.form-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.form-item {
+  flex: 1;
+  min-width: 300px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+</style> 

package/src/views/TdesignIcon.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="tdesign-icon-demo">
+    <h2>TDesign 图标示例</h2>
+    
+    <div class="section">
+      <h3>基础图标</h3>
+      <div class="icon-row">
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="add" />
+          <div class="icon-name">add</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="check" />
+          <div class="icon-name">check</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="close" />
+          <div class="icon-name">close</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="delete" />
+          <div class="icon-name">delete</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="help-circle" />
+          <div class="icon-name">help-circle</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="info-circle" />
+          <div class="icon-name">info-circle</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>图标尺寸</h3>
+      <div class="icon-row">
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="add" size="small" />
+          <div class="icon-name">small</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="add" size="medium" />
+          <div class="icon-name">medium</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="add" size="large" />
+          <div class="icon-name">large</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="add" size="24px" />
+          <div class="icon-name">24px</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="add" size="2em" />
+          <div class="icon-name">2em</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>图标颜色</h3>
+      <div class="icon-row">
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="heart-filled" color="#ff0000" />
+          <div class="icon-name">红色</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="heart-filled" color="#0052d9" />
+          <div class="icon-name">蓝色</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="heart-filled" color="#00a870" />
+          <div class="icon-name">绿色</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="heart-filled" color="#ffaa00" />
+          <div class="icon-name">橙色</div>
+        </div>
+        <div class="icon-item">
+          <ebiz-tdesign-icon name="heart-filled" color="#9c27b0" />
+          <div class="icon-name">紫色</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>常用图标</h3>
+      <div class="icon-row">
+        <div class="icon-item" v-for="iconName in commonIcons" :key="iconName">
+          <ebiz-tdesign-icon :name="iconName" />
+          <div class="icon-name">{{ iconName }}</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>点击事件</h3>
+      <div class="icon-row">
+        <div class="icon-item">
+          <ebiz-tdesign-icon 
+            name="thumb-up" 
+            size="large" 
+            color="#0052d9" 
+            @click="handleIconClick"
+          />
+          <div class="icon-name">点击图标</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignIcon } from '../index.js'
+
+export default {
+  name: 'TdesignIconDemo',
+  components: {
+    EbizTdesignIcon
+  },
+  data() {
+    return {
+      commonIcons: [
+        'user',
+        'setting',
+        'edit',
+        'search',
+        'mail',
+        'calendar',
+        'upload',
+        'download',
+        'chevron-down',
+        'chevron-up',
+        'chevron-left',
+        'chevron-right'
+      ]
+    }
+  },
+  methods: {
+    handleIconClick(_e) {
+      alert('图标被点击了！')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdesign-icon-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+.icon-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 16px;
+}
+
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.icon-item:hover {
+  background-color: #e8f3ff;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.icon-name {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #666;
+}
+</style> 

package/src/views/TdesignImage.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="container">
+    <h1>TDesign 图片组件示例</h1>
+    
+    <div class="section">
+      <h2>基础用法</h2>
+      <div class="example-block">
+        <t-image src="https://tdesign.tencent.com/vue-next/assets/image1.jpg" :style="{ width: '100px', height: '100px' }" />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image src="https://tdesign.tencent.com/vue-next/assets/image1.jpg" :style="{ width: '100px', height: '100px' }" /&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同填充模式</h2>
+      <div class="example-block image-fit-container">
+        <div v-for="fit in fitList" :key="fit" class="image-fit-item">
+          <t-image
+            :style="{ width: '100px', height: '100px' }"
+            src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+            :fit="fit"
+          />
+          <div class="image-fit-text">fit: {{ fit }}</div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>// 可选值: fill（默认）, contain, cover, none, scale-down
+&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  fit="cover"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同形状</h2>
+      <div class="example-block">
+        <div v-for="shape in shapeList" :key="shape" class="image-shape-item">
+          <t-image
+            :style="{ width: '100px', height: '100px' }"
+            src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+            :shape="shape"
+          />
+          <div class="image-shape-text">shape: {{ shape }}</div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>// 可选值: square（默认）, circle, round
+&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  shape="circle"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片加载状态</h2>
+      <div class="example-block">
+        <t-image
+          :style="{ width: '100px', height: '100px' }"
+          src="https://tdesign.tencent.com/vue-next/assets/image-error.jpg"
+          :error="'加载失败'"
+          :loading="'加载中...'"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image-error.jpg"
+  :error="'加载失败'"
+  :loading="'加载中...'"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片懒加载</h2>
+      <div class="example-block">
+        <t-image
+          :style="{ width: '100px', height: '100px' }"
+          src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+          :lazy="true"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  :lazy="true"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片上展示悬浮内容</h2>
+      <div class="example-block">
+        <t-image
+          :style="{ width: '100px', height: '100px' }"
+          src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+          :overlay-content="'悬浮内容'"
+          overlay-trigger="hover"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  :overlay-content="'悬浮内容'"
+  overlay-trigger="hover"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图集模式</h2>
+      <div class="example-block">
+        <t-image
+          :style="{ width: '100px', height: '100px' }"
+          src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+          :gallery="true"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;t-image
+  :style="{ width: '100px', height: '100px' }"
+  src="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  :gallery="true"
+/&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TdesignImage',
+  setup() {
+    const fitList = ['fill', 'contain', 'cover', 'none', 'scale-down'];
+    const shapeList = ['square', 'round', 'circle'];
+    
+    return {
+      fitList,
+      shapeList
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  padding: 20px;
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 24px;
+  color: #0052d9;
+}
+
+.section {
+  margin-bottom: 32px;
+}
+
+h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.example-block {
+  margin-bottom: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.code-block {
+  background-color: #f5f5f5;
+  padding: 12px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+code {
+  color: #333;
+}
+
+.image-fit-container,
+.image-shape-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.image-fit-item,
+.image-shape-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.image-fit-text,
+.image-shape-text {
+  font-size: 14px;
+  color: #666;
+}
+</style>