@ebiz/designer-components 0.1.131 → 0.1.133

package/src/views/PageHeaderDemo.vue

@@ -1,105 +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;
-}
+<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/PaginationDemo.vue

@@ -1,97 +1,97 @@
-<template>
-  <div class="pagination-demo">
-    <h1>EbizPagination 分页组件示例</h1>
-    
-    <h2>基础分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="100" />
-    </div>
-    
-    <h2>带数据总量显示的分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="685" />
-    </div>
-    
-    <h2>带页面展示数量选择的分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="645" :pageSizeOptions="[10, 20, 30, 50]" :defaultPageSize="30" />
-    </div>
-    
-    <h2>带快速跳转的分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="101" :pageSize="20" :showJumper="true" />
-    </div>
-    
-    <h2>极简版分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="100" :theme="'simple'" :showJumper="true" />
-    </div>
-    
-    <h2>迷你版分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="100" :size="'small'" />
-    </div>
-    
-    <h2>极简迷你版分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="100" :theme="'simple'" :size="'small'" :showJumper="true" />
-    </div>
-    
-    <h2>自定义显示内容</h2>
-    <div class="demo-section">
-      <EbizPagination :total="200">
-        <template #totalContent>
-          <span style="color: #0052d9;">共 {{ 200 }} 条数据</span>
-        </template>
-      </EbizPagination>
-    </div>
-    
-    <h2>事件处理</h2>
-    <div class="demo-section">
-      <EbizPagination 
-        :total="500" 
-        :current="currentPage" 
-        :pageSize="pageSize"
-        @change="handlePaginationChange" 
-      />
-      <p>当前页码: {{ currentPage }}, 每页条数: {{ pageSize }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizPagination } from '../index.js';
-
-const currentPage = ref(1);
-const pageSize = ref(10);
-
-const handlePaginationChange = (pageInfo) => {
-  currentPage.value = pageInfo.current;
-  pageSize.value = pageInfo.pageSize;
-  console.log('分页变化', pageInfo);
-};
-</script>
-
-<style scoped>
-.pagination-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-  padding: 16px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-
-h1 {
-  font-size: 24px;
-  margin-bottom: 20px;
-}
-
-h2 {
-  font-size: 18px;
-  margin: 10px 0;
-}
+<template>
+  <div class="pagination-demo">
+    <h1>EbizPagination 分页组件示例</h1>
+    
+    <h2>基础分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" />
+    </div>
+    
+    <h2>带数据总量显示的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="685" />
+    </div>
+    
+    <h2>带页面展示数量选择的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="645" :pageSizeOptions="[10, 20, 30, 50]" :defaultPageSize="30" />
+    </div>
+    
+    <h2>带快速跳转的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="101" :pageSize="20" :showJumper="true" />
+    </div>
+    
+    <h2>极简版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :theme="'simple'" :showJumper="true" />
+    </div>
+    
+    <h2>迷你版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :size="'small'" />
+    </div>
+    
+    <h2>极简迷你版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :theme="'simple'" :size="'small'" :showJumper="true" />
+    </div>
+    
+    <h2>自定义显示内容</h2>
+    <div class="demo-section">
+      <EbizPagination :total="200">
+        <template #totalContent>
+          <span style="color: #0052d9;">共 {{ 200 }} 条数据</span>
+        </template>
+      </EbizPagination>
+    </div>
+    
+    <h2>事件处理</h2>
+    <div class="demo-section">
+      <EbizPagination 
+        :total="500" 
+        :current="currentPage" 
+        :pageSize="pageSize"
+        @change="handlePaginationChange" 
+      />
+      <p>当前页码: {{ currentPage }}, 每页条数: {{ pageSize }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizPagination } from '../index.js';
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+const handlePaginationChange = (pageInfo) => {
+  currentPage.value = pageInfo.current;
+  pageSize.value = pageInfo.pageSize;
+  console.log('分页变化', pageInfo);
+};
+</script>
+
+<style scoped>
+.pagination-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 16px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+h2 {
+  font-size: 18px;
+  margin: 10px 0;
+}
 </style>