@ebiz/designer-components 0.0.18 → 0.0.19-beta.10

package/src/views/TdesignDatePicker.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="tdesign-datepicker-demo">
+    <h2>TDesign 日期选择器示例</h2>
+
+    <div class="section">
+      <h3>基础日期选择器</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="baseDate" placeholder="请选择日期" />
+        <div class="result">选择的日期: {{ baseDate || '未选择' }}</div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>不同选择器模式</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="modeDate1" mode="date" placeholder="日期选择" />
+        <ebiz-tdesign-date-picker v-model="modeDate2" mode="month" placeholder="月份选择" />
+        <ebiz-tdesign-date-picker v-model="modeDate3" mode="year" placeholder="年份选择" />
+        <ebiz-tdesign-date-picker v-model="modeDate4" mode="week" placeholder="周选择" />
+        <ebiz-tdesign-date-picker v-model="modeDate5" mode="quarter" placeholder="季度选择" />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>不同尺寸</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="sizeDate1" size="small" placeholder="小尺寸" />
+        <ebiz-tdesign-date-picker v-model="sizeDate2" size="medium" placeholder="中等尺寸" />
+        <ebiz-tdesign-date-picker v-model="sizeDate3" size="large" placeholder="大尺寸" />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>日期格式</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="formatDate1" format="YYYY/MM/DD" placeholder="YYYY/MM/DD" />
+        <ebiz-tdesign-date-picker v-model="formatDate2" format="YYYY年MM月DD日" placeholder="YYYY年MM月DD日" />
+        <ebiz-tdesign-date-picker v-model="formatDate3" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>带时间选择</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker 
+          v-model="timeDate" 
+          enableTimePicker 
+          format="YYYY-MM-DD HH:mm:ss" 
+          placeholder="选择日期和时间" 
+        />
+        <div class="result">选择的日期和时间: {{ timeDate || '未选择' }}</div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>快捷选项</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker 
+          v-model="presetDate" 
+          placeholder="带预设的日期选择"
+          :presets="presetOptions"
+        />
+        <div class="result">选择的日期: {{ presetDate || '未选择' }}</div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>不同状态</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="statusDate1" status="default" placeholder="默认状态" />
+        <ebiz-tdesign-date-picker v-model="statusDate2" status="success" placeholder="成功状态" />
+        <ebiz-tdesign-date-picker v-model="statusDate3" status="warning" placeholder="警告状态" />
+        <ebiz-tdesign-date-picker v-model="statusDate4" status="error" placeholder="错误状态" />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>允许直接输入</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker 
+          v-model="inputDate" 
+          allowInput 
+          placeholder="可直接输入日期" 
+        />
+        <div class="result">输入的日期: {{ inputDate || '未输入' }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignDatePicker } from '../index.js';
+
+export default {
+  name: 'TdesignDatePickerDemo',
+  components: {
+    EbizTdesignDatePicker
+  },
+  data() {
+    return {
+      baseDate: '',
+      modeDate1: '',
+      modeDate2: '',
+      modeDate3: '',
+      modeDate4: '',
+      modeDate5: '',
+      sizeDate1: '',
+      sizeDate2: '',
+      sizeDate3: '',
+      formatDate1: '',
+      formatDate2: '',
+      formatDate3: '',
+      timeDate: '',
+      presetDate: '',
+      statusDate1: '',
+      statusDate2: '',
+      statusDate3: '',
+      statusDate4: '',
+      inputDate: '',
+      presetOptions: {
+        '最近一周': () => {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+          return start;
+        },
+        '最近一个月': () => {
+          const end = new Date();
+          const start = new Date();
+          start.setMonth(start.getMonth() - 1);
+          return start;
+        },
+        '最近三个月': () => {
+          const end = new Date();
+          const start = new Date();
+          start.setMonth(start.getMonth() - 3);
+          return start;
+        },
+        '今天': () => new Date(),
+        '昨天': () => {
+          const date = new Date();
+          date.setTime(date.getTime() - 3600 * 1000 * 24);
+          return date;
+        }
+      }
+    };
+  }
+};
+</script>
+
+<style scoped>
+.tdesign-datepicker-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;
+}
+
+.demo-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 16px;
+  align-items: center;
+}
+
+.result {
+  margin-left: 10px;
+  color: #666;
+}
+</style> 

package/src/views/TdesignDescriptions.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="container">
+    <h2>描述列表组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <EbizDescriptions title="配送信息" :column="2">
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>带边框</h3>
+      <EbizDescriptions title="配送信息" :column="2" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>带冒号</h3>
+      <EbizDescriptions title="配送信息" :column="2" colon>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>垂直布局</h3>
+      <EbizDescriptions title="配送信息" :column="2" layout="vertical" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义列数</h3>
+      <EbizDescriptions title="配送信息" :column="3" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址" :span="2">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义样式</h3>
+      <EbizDescriptions title="配送信息" :column="2" border table-border-color="#E7E7E7">
+        <EbizDescriptionsItem label="姓名" label-class-name="custom-label">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址" content-class-name="custom-content">
+          <span style="color: #0052d9">深圳市南山区深南大道10000号</span>
+        </EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizDescriptions, EbizDescriptionsItem } from '../index.js';
+</script>
+
+<style scoped>
+.container {
+  padding: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 32px;
+}
+
+h2 {
+  font-size: 24px;
+  margin-bottom: 24px;
+}
+
+h3 {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.custom-label {
+  font-weight: bold;
+  color: #0052d9;
+}
+
+.custom-content {
+  font-style: italic;
+}
+</style> 

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>