@ebiz/designer-components 0.0.18 → 0.0.19

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/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>