@ebiz/designer-components 0.0.18-kzy.2 → 0.0.18-kzy.4

package/src/views/PageHeaderDemo.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="demo-container">
+    <h2>页面头部组件演示</h2>
+    
+    <div class="section">
+      <h3>基础用法</h3>
+      <div class="example">
+        <EbizPageHeader />
+      </div>
+      <div class="code">
+        <pre><code>&lt;EbizPageHeader /&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>功能说明</h3>
+      <div class="description">
+        <p>此组件会自动根据当前路由信息生成面包屑导航。确保路由配置中包含以下meta信息：</p>
+        <pre><code>
+// 路由配置示例
+{
+  path: '/hr',
+  component: HR,
+  meta: {
+    title: '人事管理',  // 面包屑显示的标题
+    icon: 'user'      // 面包屑的图标名称，使用TDesign图标
+  },
+  children: [
+    {
+      path: 'employee',
+      component: Employee,
+      meta: {
+        title: '员工管理',
+        icon: 'user-talk'
+      }
+    }
+  ]
+}
+        </code></pre>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>帮助文档跳转</h3>
+      <p>点击帮助文档按钮会自动跳转到 /help 路径，并带上当前路由作为查询参数。</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizPageHeader } from '../index.js'
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 24px;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.section {
+  margin-bottom: 32px;
+  border: 1px solid #e9e9e9;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+h3 {
+  padding: 16px;
+  margin: 0;
+  font-weight: 500;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.example {
+  padding: 24px;
+  border-bottom: 1px dashed #e9e9e9;
+}
+
+.code {
+  padding: 16px;
+  background-color: #f7f7f7;
+}
+
+pre {
+  margin: 0;
+  overflow-x: auto;
+}
+
+code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 14px;
+}
+
+.description {
+  padding: 16px;
+}
+</style> 

package/src/views/TableSortDemo.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="container">
+        <h1>表格排序组件演示</h1>
+
+        <div class="demo-section">
+            <h2>基础用法</h2>
+            <div class="demo-item">
+                <EbizTableSort icon="filter-sort" :field-options="fieldOptions" @sort="handleSort"
+                    @reset="handleReset" />
+            </div>
+            <div class="result" v-if="sortResult.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>自定义按钮</h2>
+            <div class="demo-item">
+                <EbizTableSort icon="filter" button-text="自定义排序" :field-options="fieldOptions" @sort="handleSort2" />
+            </div>
+            <div class="result" v-if="sortResult2.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult2, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>预设排序条件</h2>
+            <div class="demo-item">
+                <EbizTableSort :field-options="fieldOptions" :default-sort="defaultSort" @sort="handleSort3" />
+            </div>
+            <div class="result" v-if="sortResult3.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult3, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>多条件排序</h2>
+            <div class="demo-item">
+                <EbizTableSort :field-options="fieldOptions" :max-sort-items="3" @sort="handleSort4" />
+            </div>
+            <div class="result" v-if="sortResult4.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult4, null, 2) }}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTableSort } from '../index.js';
+
+// 字段选项
+const fieldOptions = [
+    { value: 'name', label: '姓名' },
+    { value: 'age', label: '年龄' },
+    { value: 'address', label: '地址' },
+    { value: 'createTime', label: '创建时间' },
+    { value: 'status', label: '状态' }
+];
+
+// 默认排序条件
+const defaultSort = [
+    { field: 'age', order: 'desc' }
+];
+
+// 排序结果
+const sortResult = ref([]);
+const sortResult2 = ref([]);
+const sortResult3 = ref([]);
+const sortResult4 = ref([]);
+
+// 处理排序
+const handleSort = (sort) => {
+    sortResult.value = sort;
+    console.log('排序条件：', sort);
+};
+
+const handleSort2 = (sort) => {
+    sortResult2.value = sort;
+    console.log('排序条件2：', sort);
+};
+
+const handleSort3 = (sort) => {
+    sortResult3.value = sort;
+    console.log('排序条件3：', sort);
+};
+
+const handleSort4 = (sort) => {
+    sortResult4.value = sort;
+    console.log('排序条件4：', sort);
+};
+
+// 处理重置
+const handleReset = () => {
+    sortResult.value = [];
+    console.log('重置排序');
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    padding: 20px;
+
+    h1 {
+        margin-bottom: 20px;
+    }
+
+    .demo-section {
+        margin-bottom: 30px;
+        padding: 20px;
+        border: 1px solid #eee;
+        border-radius: 6px;
+
+        h2 {
+            margin-bottom: 16px;
+            font-size: 18px;
+        }
+
+        .demo-item {
+            margin-bottom: 16px;
+        }
+
+        .result {
+            margin-top: 20px;
+            padding: 16px;
+            background-color: #f9f9f9;
+            border-radius: 4px;
+
+            h3 {
+                margin-bottom: 8px;
+                font-size: 16px;
+            }
+
+            pre {
+                font-family: monospace;
+            }
+        }
+    }
+}
+</style>

package/src/views/TableView.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="table-demo-container">
+    <h2>基础表格</h2>
+    <ebiz-table :data="tableData" :bordered="true" :hover="true">
+      <ebiz-table-column col-key="id" title="ID" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120" />
+      <ebiz-table-column col-key="age" title="年龄" width="80" :sorter="true" align="center" />
+      <ebiz-table-column col-key="address" title="地址" :ellipsis="true" />
+    </ebiz-table>
+
+    <h2>列类型演示</h2>
+    <ebiz-table :data="tableData" :bordered="true" :stripe="true" row-key="id">
+      <ebiz-table-column type="multiple" width="60" />
+      <ebiz-table-column type="index" title="序号" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120" />
+      <ebiz-table-column col-key="age" title="年龄" width="80" />
+      <ebiz-table-column col-key="address" title="地址" :ellipsis="true" />
+    </ebiz-table>
+
+    <h2>插槽用法</h2>
+    <ebiz-table :data="tableData" :bordered="true">
+      <ebiz-table-column col-key="id" title="ID" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120">
+        <template #default="{ row }">
+          <strong style="color: #0052d9">{{ row.name }}</strong>
+        </template>
+      </ebiz-table-column>
+      <ebiz-table-column col-key="age" title="年龄" width="80" />
+      <ebiz-table-column col-key="operation" title="操作" width="160">
+        <template #default="{ row }">
+          <button @click="handleEdit(row)" style="margin-right: 8px">编辑</button>
+          <button @click="handleDelete(row)">删除</button>
+        </template>
+      </ebiz-table-column>
+    </ebiz-table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTable, EbizTableColumn } from '../index.js';
+
+const tableData = ref([
+  { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
+  { id: 2, name: '李四', age: 35, address: '上海市浦东新区' },
+  { id: 3, name: '王五', age: 42, address: '广州市天河区' },
+  { id: 4, name: '赵六', age: 31, address: '深圳市南山区科技园' },
+  { id: 5, name: '钱七', age: 27, address: '杭州市西湖区' }
+]);
+
+const handleEdit = (row) => {
+  alert(`编辑: ${row.name}`);
+};
+
+const handleDelete = (row) => {
+  alert(`删除: ${row.name}`);
+};
+</script>
+
+<style scoped>
+.table-demo-container {
+  padding: 20px;
+}
+
+.table-demo-container h2 {
+  margin: 30px 0 15px;
+  font-size: 18px;
+}
+</style> 

package/src/views/TimePickerDemo.vue

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