@ebiz/designer-components 0.1.21 → 0.1.22

package/src/views/EbizDetailViewDemo.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="demo-container">
+    <h1>详情视图演示</h1>
+    
+    <div class="demo-section">
+      <h2>基础用法 - 静态数据</h2>
+      <EbizDetailView
+        :data="staticData"
+        :columns="2"
+        layout="horizontal"
+        :gap="16"
+        :labelWidth="120"
+        labelColor="#666666"
+      >
+        <EbizDetailItem
+          label="姓名"
+          type="text"
+          :value="staticData.name"
+          :required="true"
+        />
+        <EbizDetailItem
+          label="邮箱"
+          type="text"
+          :value="staticData.email"
+        />
+        <EbizDetailItem
+          label="部门"
+          type="text"
+          :value="staticData.department"
+        />
+        <EbizDetailItem
+          label="状态"
+          type="status"
+          :value="staticData.status"
+        />
+        <EbizDetailItem
+          label="负责人"
+          type="user"
+          :value="staticData.manager"
+          @user-click="handleUserClick"
+        />
+        <EbizDetailItem
+          label="标签"
+          type="tags"
+          :value="staticData.tags"
+        />
+        <EbizDetailItem
+          label="入职日期"
+          type="date"
+          :value="staticData.joinDate"
+        />
+        <EbizDetailItem
+          label="薪资"
+          type="currency"
+          :value="staticData.salary"
+        />
+        <EbizDetailItem
+          label="附件"
+          type="file"
+          :value="staticData.files"
+          @download-file="handleDownloadFile"
+        />
+        <EbizDetailItem
+          label="个人主页"
+          type="link"
+          :value="staticData.website"
+          @link-click="handleLinkClick"
+        />
+      </EbizDetailView>
+    </div>
+
+    <div class="demo-section">
+      <h2>API数据源</h2>
+      <EbizDetailView
+        apiUrl="/api/user/detail"
+        apiMethod="GET"
+        :apiParams="{ id: 123 }"
+        :autoLoad="true"
+        :columns="3"
+        layout="vertical"
+        @data-loaded="handleDataLoaded"
+        @error="handleError"
+      >
+        <EbizDetailItem
+          label="用户ID"
+          type="number"
+          :value="apiData.id"
+        />
+        <EbizDetailItem
+          label="用户名"
+          type="text"
+          :value="apiData.username"
+        />
+        <EbizDetailItem
+          label="创建时间"
+          type="date"
+          :value="apiData.createTime"
+        />
+        <EbizDetailItem
+          label="最后登录"
+          type="date"
+          :value="apiData.lastLogin"
+        />
+        <EbizDetailItem
+          label="权限"
+          type="tags"
+          :value="apiData.permissions"
+        />
+        <EbizDetailItem
+          label="账户状态"
+          type="status"
+          :value="apiData.accountStatus"
+        />
+      </EbizDetailView>
+    </div>
+
+    <div class="demo-section">
+      <h2>垂直布局 - 单列显示</h2>
+      <EbizDetailView
+        :data="staticData"
+        :columns="1"
+        layout="vertical"
+        :gap="20"
+        labelColor="#333333"
+      >
+        <EbizDetailItem
+          label="详细描述"
+          type="html"
+          :value="staticData.description"
+          description="这是一个富文本字段"
+        />
+        <EbizDetailItem
+          label="工作经历"
+          type="text"
+          :value="staticData.experience"
+          description="工作经历详情"
+        />
+        <EbizDetailItem
+          label="技能评分"
+          type="number"
+          :value="staticData.skillScore"
+          description="技能综合评分"
+        />
+      </EbizDetailView>
+    </div>
+
+    <div class="demo-section">
+      <h2>事件演示</h2>
+      <div class="event-log">
+        <h3>事件日志：</h3>
+        <ul>
+          <li v-for="(log, index) in eventLogs" :key="index">
+            {{ log }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import EbizDetailView from '../components/EbizDetailView.vue'
+import EbizDetailItem from '../components/EbizDetailItem.vue'
+
+// 静态数据
+const staticData = ref({
+  name: '张三',
+  email: 'zhangsan@example.com',
+  department: '技术部',
+  status: {
+    text: '在职',
+    status: 'success'
+  },
+  manager: {
+    id: 1,
+    name: '李四',
+    department: '技术部',
+    avatar: 'https://avatars.githubusercontent.com/u/1?v=4'
+  },
+  tags: ['前端开发', 'Vue.js', 'React'],
+  joinDate: '2022-01-15',
+  salary: 15000,
+  files: [
+    {
+      id: 1,
+      name: '简历.pdf',
+      url: 'https://example.com/resume.pdf',
+      size: 1024000
+    },
+    {
+      id: 2,
+      name: '头像.jpg',
+      url: 'https://avatars.githubusercontent.com/u/1?v=4',
+      size: 256000
+    }
+  ],
+  website: {
+    text: '个人博客',
+    url: 'https://blog.example.com'
+  },
+  description: '<p>这是一个<strong>优秀</strong>的前端开发工程师，具有丰富的项目经验。</p><ul><li>精通Vue.js</li><li>熟悉React</li><li>了解Node.js</li></ul>',
+  experience: '拥有5年前端开发经验，参与过多个大型项目的开发和维护。',
+  skillScore: 95
+})
+
+// API数据
+const apiData = ref({})
+
+// 事件日志
+const eventLogs = ref([])
+
+// 事件处理函数
+const handleUserClick = (user) => {
+  eventLogs.value.unshift(`用户点击: ${user.name} (${user.department})`)
+}
+
+const handleDownloadFile = (file) => {
+  eventLogs.value.unshift(`文件下载: ${file.name}`)
+  // 实际下载逻辑
+  window.open(file.url, '_blank')
+}
+
+const handleLinkClick = (link) => {
+  eventLogs.value.unshift(`链接点击: ${link.text} -> ${link.url}`)
+  window.open(link.url, '_blank')
+}
+
+const handleDataLoaded = (data) => {
+  apiData.value = data
+  eventLogs.value.unshift(`API数据加载成功: ${JSON.stringify(data)}`)
+}
+
+const handleError = (error) => {
+  eventLogs.value.unshift(`API加载错误: ${error.message}`)
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+  padding: 20px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  background: #fafafa;
+}
+
+.demo-section h2 {
+  color: #666;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+
+.event-log {
+  margin-top: 20px;
+  padding: 15px;
+  background: #f5f5f5;
+  border-radius: 6px;
+}
+
+.event-log h3 {
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.event-log ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.event-log li {
+  padding: 5px 0;
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 14px;
+  color: #666;
+}
+
+.event-log li:last-child {
+  border-bottom: none;
+}
+</style> 

package/src/views/Home.vue

@@ -95,7 +95,8 @@ export default {
       { path: '/vxe-table', title: 'EbizVxeTable示例' },
       { path: '/meeting-room-selector', title: 'Ebiz会议室选择器组件示例' },
       { path: '/mobile-meeting-room-selector', title: 'Ebiz移动端会议室选择器组件示例' },
-      { path: '/file-list-demo', title: '文件列表demo' }
+      { path: '/file-list-demo', title: '文件列表demo' },
+      { path: '/detail-view-demo', title: 'Ebiz详情页组件示例' }
     ]
 
     return {