@ebiz/designer-components 0.1.0 → 0.1.2

package/src/views/TimePickerDemo.vue

@@ -1,147 +1,147 @@
-<template>
-  <div class="time-picker-demo">
-    <h2>时间选择器 EbizTimePicker</h2>
-    
-    <h3>基本用法</h3>
-    <div class="demo-section">
-      <EbizTimePicker v-model="value1" placeholder="请选择时间" />
-      <div class="demo-value">选中值: {{ value1 }}</div>
-    </div>
-    
-    <h3>时间格式</h3>
-    <div class="demo-section">
-      <EbizTimePicker v-model="value2" format="HH:mm" placeholder="时分格式 HH:mm" />
-      <div class="demo-value">选中值: {{ value2 }}</div>
-    </div>
-    
-    <h3>禁用状态</h3>
-    <div class="demo-section">
-      <EbizTimePicker v-model="value3" disabled placeholder="禁用状态" />
-    </div>
-    
-    <h3>时间范围选择</h3>
-    <div class="demo-section">
-      <EbizTimePicker v-model="value4" range placeholder="请选择时间范围" />
-      <div class="demo-value">选中值: {{ value4 }}</div>
-    </div>
-    
-    <h3>步长设置</h3>
-    <div class="demo-section">
-      <EbizTimePicker v-model="value5" :steps="[2, 10, 15]" placeholder="步长：时(2) 分(10) 秒(15)" />
-      <div class="demo-value">选中值: {{ value5 }}</div>
-    </div>
-    
-    <h3>禁用时间</h3>
-    <div class="demo-section">
-      <EbizTimePicker v-model="value6" :disable-time="disableTime" placeholder="上午禁用" />
-      <div class="demo-value">选中值: {{ value6 }}</div>
-    </div>
-    
-    <h3>不同尺寸</h3>
-    <div class="demo-section">
-      <div class="size-row">
-        <EbizTimePicker v-model="value7" size="small" placeholder="小尺寸" />
-        <EbizTimePicker v-model="value7" size="medium" placeholder="中尺寸(默认)" />
-        <EbizTimePicker v-model="value7" size="large" placeholder="大尺寸" />
-      </div>
-    </div>
-    
-    <h3>提示信息</h3>
-    <div class="demo-section">
-      <EbizTimePicker v-model="value8" tips="这是一个提示文本" placeholder="带提示信息" />
-    </div>
-    
-    <h3>前置/后置插槽</h3>
-    <div class="demo-section">
-      <EbizTimePicker v-model="value9" placeholder="带前置内容">
-        <template #prepend>
-          <span class="prepend-content">时间:</span>
-        </template>
-      </EbizTimePicker>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizTimePicker } from '../index.js';
-
-// 基本用法
-const value1 = ref('');
-
-// 时间格式
-const value2 = ref('');
-
-// 禁用状态
-const value3 = ref('12:30:00');
-
-// 时间范围选择
-const value4 = ref(['09:00:00', '18:00:00']);
-
-// 步长设置
-const value5 = ref('');
-
-// 禁用时间
-const value6 = ref('');
-const disableTime = (h) => {
-  // 禁用上午时间段 (0-12点)
-  return h < 12;
-};
-
-// 不同尺寸
-const value7 = ref('');
-
-// 提示信息
-const value8 = ref('');
-
-// 前置/后置插槽
-const value9 = ref('');
-</script>
-
-<style scoped>
-.time-picker-demo {
-  padding: 20px;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-h2 {
-  margin-bottom: 30px;
-  font-weight: 500;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 10px;
-}
-
-h3 {
-  margin-top: 30px;
-  margin-bottom: 15px;
-  font-weight: 400;
-  font-size: 18px;
-  color: #333;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-}
-
-.demo-value {
-  margin-top: 10px;
-  color: #606060;
-  font-size: 14px;
-  padding: 5px 0;
-}
-
-.size-row {
-  display: flex;
-  gap: 20px;
-  align-items: center;
-}
-
-.prepend-content {
-  padding: 0 10px;
-  color: #0052D9;
-}
+<template>
+  <div class="time-picker-demo">
+    <h2>时间选择器 EbizTimePicker</h2>
+    
+    <h3>基本用法</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value1" placeholder="请选择时间" />
+      <div class="demo-value">选中值: {{ value1 }}</div>
+    </div>
+    
+    <h3>时间格式</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value2" format="HH:mm" placeholder="时分格式 HH:mm" />
+      <div class="demo-value">选中值: {{ value2 }}</div>
+    </div>
+    
+    <h3>禁用状态</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value3" disabled placeholder="禁用状态" />
+    </div>
+    
+    <h3>时间范围选择</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value4" range placeholder="请选择时间范围" />
+      <div class="demo-value">选中值: {{ value4 }}</div>
+    </div>
+    
+    <h3>步长设置</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value5" :steps="[2, 10, 15]" placeholder="步长：时(2) 分(10) 秒(15)" />
+      <div class="demo-value">选中值: {{ value5 }}</div>
+    </div>
+    
+    <h3>禁用时间</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value6" :disable-time="disableTime" placeholder="上午禁用" />
+      <div class="demo-value">选中值: {{ value6 }}</div>
+    </div>
+    
+    <h3>不同尺寸</h3>
+    <div class="demo-section">
+      <div class="size-row">
+        <EbizTimePicker v-model="value7" size="small" placeholder="小尺寸" />
+        <EbizTimePicker v-model="value7" size="medium" placeholder="中尺寸(默认)" />
+        <EbizTimePicker v-model="value7" size="large" placeholder="大尺寸" />
+      </div>
+    </div>
+    
+    <h3>提示信息</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value8" tips="这是一个提示文本" placeholder="带提示信息" />
+    </div>
+    
+    <h3>前置/后置插槽</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value9" placeholder="带前置内容">
+        <template #prepend>
+          <span class="prepend-content">时间:</span>
+        </template>
+      </EbizTimePicker>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTimePicker } from '../index.js';
+
+// 基本用法
+const value1 = ref('');
+
+// 时间格式
+const value2 = ref('');
+
+// 禁用状态
+const value3 = ref('12:30:00');
+
+// 时间范围选择
+const value4 = ref(['09:00:00', '18:00:00']);
+
+// 步长设置
+const value5 = ref('');
+
+// 禁用时间
+const value6 = ref('');
+const disableTime = (h) => {
+  // 禁用上午时间段 (0-12点)
+  return h < 12;
+};
+
+// 不同尺寸
+const value7 = ref('');
+
+// 提示信息
+const value8 = ref('');
+
+// 前置/后置插槽
+const value9 = ref('');
+</script>
+
+<style scoped>
+.time-picker-demo {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 30px;
+  font-weight: 500;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+h3 {
+  margin-top: 30px;
+  margin-bottom: 15px;
+  font-weight: 400;
+  font-size: 18px;
+  color: #333;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+.demo-value {
+  margin-top: 10px;
+  color: #606060;
+  font-size: 14px;
+  padding: 5px 0;
+}
+
+.size-row {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.prepend-content {
+  padding: 0 10px;
+  color: #0052D9;
+}
 </style> 

package/src/views/TimelineDemo.vue

@@ -1,161 +1,161 @@
-<template>
-  <div class="timeline-demo">
-    <h1>TDesign Timeline 组件示例</h1>
-    
-    <h2>基础时间轴</h2>
-    <div class="demo-section">
-      <EbizTimeline>
-        <EbizTimelineItem label="2022-01-01" content="事件一" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" />
-      </EbizTimeline>
-    </div>
-    
-    <h2>时间轴方向</h2>
-    <div class="demo-section">
-      <h3>水平方向</h3>
-      <EbizTimeline layout="horizontal">
-        <EbizTimelineItem label="2022-01-01" content="事件一" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" />
-      </EbizTimeline>
-    </div>
-    
-    <h2>时间轴主题</h2>
-    <div class="demo-section">
-      <h3>点状主题</h3>
-      <EbizTimeline theme="dot">
-        <EbizTimelineItem label="2022-01-01" content="事件一" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" />
-      </EbizTimeline>
-    </div>
-    
-    <h2>不同的展示方式</h2>
-    <div class="demo-section">
-      <h3>左侧展示</h3>
-      <EbizTimeline mode="left">
-        <EbizTimelineItem label="2022-01-01" content="事件一" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" />
-      </EbizTimeline>
-      
-      <h3>右侧展示</h3>
-      <EbizTimeline mode="right">
-        <EbizTimelineItem label="2022-01-01" content="事件一" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" />
-      </EbizTimeline>
-      
-      <h3>同侧展示</h3>
-      <EbizTimeline mode="same">
-        <EbizTimelineItem label="2022-01-01" content="事件一" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" />
-      </EbizTimeline>
-    </div>
-    
-    <h2>标签位置</h2>
-    <div class="demo-section">
-      <h3>标签在左侧</h3>
-      <EbizTimeline labelAlign="left">
-        <EbizTimelineItem label="2022-01-01" content="事件一" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" />
-      </EbizTimeline>
-      
-      <h3>标签在顶部</h3>
-      <EbizTimeline labelAlign="top">
-        <EbizTimelineItem label="2022-01-01" content="事件一" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" />
-      </EbizTimeline>
-    </div>
-    
-    <h2>自定义节点颜色</h2>
-    <div class="demo-section">
-      <EbizTimeline>
-        <EbizTimelineItem label="2022-01-01" content="事件一" dotColor="primary" />
-        <EbizTimelineItem label="2022-02-01" content="事件二" dotColor="warning" />
-        <EbizTimelineItem label="2022-03-01" content="事件三" dotColor="error" />
-        <EbizTimelineItem label="2022-04-01" content="事件四" dotColor="success" />
-      </EbizTimeline>
-    </div>
-    
-    <h2>使用插槽自定义内容</h2>
-    <div class="demo-section">
-      <EbizTimeline>
-        <EbizTimelineItem label="2022-01-01">
-          <div class="custom-content">
-            <h4>自定义内容一</h4>
-            <p>这是一个自定义内容示例</p>
-          </div>
-        </EbizTimelineItem>
-        <EbizTimelineItem label="2022-02-01">
-          <div class="custom-content">
-            <h4>自定义内容二</h4>
-            <p>这是一个自定义内容示例</p>
-          </div>
-        </EbizTimelineItem>
-      </EbizTimeline>
-    </div>
-    
-    <h2>加载状态</h2>
-    <div class="demo-section">
-      <EbizTimeline>
-        <EbizTimelineItem label="2022-01-01" content="已完成" />
-        <EbizTimelineItem label="2022-02-01" content="进行中" loading />
-        <EbizTimelineItem label="2022-03-01" content="未开始" />
-        <EbizTimelineItem label="2022-04-01" content="未开始" />
-      </EbizTimeline>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { EbizTimeline, EbizTimelineItem } from '../index.js';
-</script>
-
-<style scoped>
-.timeline-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 40px;
-}
-
-h1 {
-  margin-bottom: 30px;
-}
-
-h2 {
-  margin: 20px 0;
-}
-
-h3 {
-  margin: 15px 0;
-}
-
-.custom-content {
-  padding: 10px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-
-.custom-content h4 {
-  margin: 0 0 10px 0;
-}
-
-.custom-content p {
-  margin: 0;
-}
+<template>
+  <div class="timeline-demo">
+    <h1>TDesign Timeline 组件示例</h1>
+    
+    <h2>基础时间轴</h2>
+    <div class="demo-section">
+      <EbizTimeline>
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>时间轴方向</h2>
+    <div class="demo-section">
+      <h3>水平方向</h3>
+      <EbizTimeline layout="horizontal">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>时间轴主题</h2>
+    <div class="demo-section">
+      <h3>点状主题</h3>
+      <EbizTimeline theme="dot">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>不同的展示方式</h2>
+    <div class="demo-section">
+      <h3>左侧展示</h3>
+      <EbizTimeline mode="left">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+      
+      <h3>右侧展示</h3>
+      <EbizTimeline mode="right">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+      
+      <h3>同侧展示</h3>
+      <EbizTimeline mode="same">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>标签位置</h2>
+    <div class="demo-section">
+      <h3>标签在左侧</h3>
+      <EbizTimeline labelAlign="left">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+      
+      <h3>标签在顶部</h3>
+      <EbizTimeline labelAlign="top">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>自定义节点颜色</h2>
+    <div class="demo-section">
+      <EbizTimeline>
+        <EbizTimelineItem label="2022-01-01" content="事件一" dotColor="primary" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" dotColor="warning" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" dotColor="error" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" dotColor="success" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>使用插槽自定义内容</h2>
+    <div class="demo-section">
+      <EbizTimeline>
+        <EbizTimelineItem label="2022-01-01">
+          <div class="custom-content">
+            <h4>自定义内容一</h4>
+            <p>这是一个自定义内容示例</p>
+          </div>
+        </EbizTimelineItem>
+        <EbizTimelineItem label="2022-02-01">
+          <div class="custom-content">
+            <h4>自定义内容二</h4>
+            <p>这是一个自定义内容示例</p>
+          </div>
+        </EbizTimelineItem>
+      </EbizTimeline>
+    </div>
+    
+    <h2>加载状态</h2>
+    <div class="demo-section">
+      <EbizTimeline>
+        <EbizTimelineItem label="2022-01-01" content="已完成" />
+        <EbizTimelineItem label="2022-02-01" content="进行中" loading />
+        <EbizTimelineItem label="2022-03-01" content="未开始" />
+        <EbizTimelineItem label="2022-04-01" content="未开始" />
+      </EbizTimeline>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizTimeline, EbizTimelineItem } from '../index.js';
+</script>
+
+<style scoped>
+.timeline-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+h1 {
+  margin-bottom: 30px;
+}
+
+h2 {
+  margin: 20px 0;
+}
+
+h3 {
+  margin: 15px 0;
+}
+
+.custom-content {
+  padding: 10px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.custom-content h4 {
+  margin: 0 0 10px 0;
+}
+
+.custom-content p {
+  margin: 0;
+}
 </style> 

package/src/views/Title.vue

@@ -1,20 +1,20 @@
-<template>
-  <div>
-    <ebiz-route-breadcrumb />
-    <ebiz-title />
-  </div>
-</template>
-
-<script>
-import { EbizTitle } from '@/index.js'
-
-export default {
-  name: 'TitleDemo',
-  components: {
-    EbizTitle
-  }
-}
-</script>
-
-<style scoped>
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-title />
+  </div>
+</template>
+
+<script>
+import { EbizTitle } from '@/index.js'
+
+export default {
+  name: 'TitleDemo',
+  components: {
+    EbizTitle
+  }
+}
+</script>
+
+<style scoped>
 </style>