@ebiz/designer-components 0.1.88 → 0.1.90

package/src/views/EbizDetailViewDemo.vue

@@ -1,413 +1,413 @@
-<template>
-  <div class="demo-container">
-    <h1>详情视图演示</h1>
-
-    <div class="demo-section">
-      <h2>基础用法 - 字段配置</h2>
-      <EbizDetailView :dataId="10" :apiConfig="{
-        apiId: '2532',
-        key: 'release_note_detail'
-      }" :fields="basicFields" :columns="3" layout="horizontal" :gap="20" :labelWidth="100" labelColor="#333333">
-
-        <template #detail-item-name="{ data }">
-          <EbizDetailItem label="姓名" type="text" :value="data.visitors" :required="true" />
-        </template>
-        <template #detail-item-status="{ data }">
-          <EbizDetailItem label="状态" type="status" :value="data.status" />
-        </template>
-      </EbizDetailView>
-    </div>
-
-
-    <div class="demo-section">
-      <h2>TDesign栅格布局 - span功能和响应式</h2>
-      <div class="demo-description">
-        <p><strong>功能升级：</strong>现已使用 <a href="https://tdesign.tencent.com/vue-next/components/grid" target="_blank">TDesign栅格系统</a>，提供更强大的响应式支持！</p>
-        <p><strong>核心优势：</strong></p>
-        <ul>
-          <li>基于24栅格系统，更灵活的布局控制</li>
-          <li>内置响应式断点(xs/sm/md/lg/xl/xxl)</li>
-          <li>更好的浏览器兼容性（基于flexbox）</li>
-          <li>自动处理移动端适配，无需手动CSS</li>
-        </ul>
-        <p><strong>配置示例：</strong></p>
-        <pre><code>// 字段配置
-{
-  key: 'description', 
-  label: '个人描述', 
-  type: 'html', 
-  span: 4  // 跨越4列
-}
-
-// 响应式配置
-responsive: {
-  xs: 1,   // <576px  单列
-  sm: 1,   // ≥576px  单列  
-  md: 2,   // ≥768px  双列
-  lg: 2,   // ≥992px  双列
-  xl: 3,   // ≥1200px 三列
-  xxl: 4   // ≥1400px 四列
-}</code></pre>
-      </div>
-      <EbizDetailView 
-        :data="staticData" 
-        :fields="spanFields" 
-        :columns="4" 
-        layout="horizontal" 
-        :labelWidth="80" 
-        labelColor="#666666"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h2>响应式测试</h2>
-      <div class="demo-description">
-        <p><strong>测试说明：</strong>调整浏览器窗口大小，观察布局自动适配效果。</p>
-        <p><strong>断点说明：</strong></p>
-        <ul>
-          <li>xs: &lt;576px - 显示1列</li>
-          <li>sm: ≥576px - 显示2列</li>
-          <li>md: ≥768px - 显示2列</li>
-          <li>lg: ≥992px - 显示3列</li>
-          <li>xl: ≥1200px - 显示4列</li>
-          <li>xxl: ≥1400px - 显示4列</li>
-        </ul>
-      </div>
-      <EbizDetailView 
-        :data="staticData" 
-        :fields="basicFields" 
-        layout="horizontal" 
-        :gap="24" 
-        :labelWidth="100" 
-        labelColor="#333"
-        :responsive="{
-          xs: 1,
-          sm: 2, 
-          md: 2,
-          lg: 3,
-          xl: 4,
-          xxl: 4
-        }"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h2>自定义字段 - 使用slot</h2>
-      <EbizDetailView :dataId="10" :apiConfig="{
-        apiId: '2532',
-        key: 'release_note_detail'
-              }" :columns="3" layout="horizontal" :gap="16" :labelWidth="50" labelColor="#666666">
-        <template #default="{data}">
-            <EbizDetailItem label="姓名" type="text" :value="data.visitors" />
-            <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="data.release_time" />
-            <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" />
-        </template>
-      </EbizDetailView>
-    </div>
-    
-    <div class="demo-section">
-      <h2>增强的Slot支持 - 使用wrapItem函数</h2>
-      <div class="demo-description">
-        <p><strong>新增功能：</strong></p>
-        <ul>
-          <li><strong>内置栅格：</strong>EbizDetailItem 内部已集成 TDesign 栅格布局</li>
-          <li><strong>简化使用：</strong>直接在 EbizDetailItem 上设置 span 等属性</li>
-          <li><strong>响应式支持：</strong>支持 xs/sm/md/lg/xl/xxl 断点配置</li>
-          <li><strong>更好封装：</strong>组件更独立，无需外层包装</li>
-        </ul>
-        <p><strong>使用示例：</strong></p>
-        <pre><code>&lt;EbizDetailItem 
-  label="标题"
-  :value="content"
-  :span="2"    // 默认跨2列
-  :xs="4"      // 超小屏跨4列 
-  :md="3" /&gt;   // 中等屏跨3列</code></pre>
-      </div>
-      
-      <EbizDetailView :data="staticData" :columns="4" layout="horizontal" :gap="20" :labelWidth="80">
-        <template #default="{data}">
-          <!-- 现在直接使用EbizDetailItem，无需外层包装 -->
-          <EbizDetailItem 
-            label="姓名" 
-            type="text" 
-            :value="data.name" 
-            :required="true" 
-            :span="4" />
-          
-          <EbizDetailItem 
-            label="邮箱" 
-            type="text" 
-            :value="data.email" 
-            :span="6" />
-          
-          <EbizDetailItem 
-            label="个人网站" 
-            type="link" 
-            :value="data.website" 
-            :span="4"
-            @link-click="handleLinkClick" />
-
-          <!-- 响应式配置示例 -->
-          <EbizDetailItem 
-            label="技能标签" 
-            type="tags" 
-            :value="data.tags" 
-            :span="4" 
-            :lg="12" />
-          
-          <EbizDetailItem 
-            label="状态" 
-            type="status" 
-            :value="data.status" 
-            :span="4" />
-          
-          <!-- 跨列的详细描述 -->
-          <EbizDetailItem 
-            label="详细描述" 
-            layout="vertical"
-            type="html" 
-            :value="data.description" 
-            :span="12"
-            :xs="12" />
-        </template>
-      </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 basicFields = ref([
-  { key: 'name', label: '姓名', type: 'text', required: true },
-  { key: 'email', label: '邮箱', type: 'text' },
-  { key: 'department', label: '部门', type: 'text' },
-  { key: 'status', label: '状态', type: 'status' },
-  { key: 'manager', label: '负责人', type: 'user' },
-  { key: 'tags', label: '标签', type: 'tags' }
-])
-
-// 列跨度演示字段配置
-const spanFields = ref([
-  { key: 'name', label: '姓名', type: 'text', span: 1 },
-  { key: 'email', label: '邮箱', type: 'text', span: 1 },
-  { key: 'department', label: '部门', type: 'text', span: 1 },
-  { key: 'status', label: '状态', type: 'status', span: 1 },
-  { key: 'description', label: '个人描述', type: 'html', span: 4 },
-  { key: 'manager', label: '负责人', type: 'user', span: 2 },
-  { key: 'tags', label: '技能标签', type: 'tags', span: 2 },
-  { key: 'experience', label: '工作经验', type: 'text', span: 3 },
-  { key: 'skillScore', label: '技能分数', type: 'number', span: 1 }
-])
-
-// 事件处理函数
-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;
-}
-
-.demo-description {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: #f8f9fa;
-  border-radius: 6px;
-  border-left: 4px solid #0052d9;
-}
-
-.demo-description p {
-  margin: 8px 0;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.demo-description code {
-  padding: 2px 6px;
-  background: #e9ecef;
-  border-radius: 3px;
-  font-size: 12px;
-  color: #d63384;
-}
-
-.demo-description pre {
-  margin: 10px 0;
-  padding: 12px;
-  background: #2d3748;
-  color: #e2e8f0;
-  border-radius: 4px;
-  overflow-x: auto;
-  font-size: 12px;
-}
-
-.demo-description pre code {
-  background: none;
-  color: inherit;
-  padding: 0;
-}
-
-.demo-description ul {
-  margin: 10px 0;
-  padding-left: 20px;
-}
-
-.demo-description li {
-  margin: 4px 0;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.demo-description a {
-  color: #0052d9;
-  text-decoration: none;
-}
-
-.demo-description a:hover {
-  text-decoration: underline;
-}
+<template>
+  <div class="demo-container">
+    <h1>详情视图演示</h1>
+
+    <div class="demo-section">
+      <h2>基础用法 - 字段配置</h2>
+      <EbizDetailView :dataId="10" :apiConfig="{
+        apiId: '2532',
+        key: 'release_note_detail'
+      }" :fields="basicFields" :columns="3" layout="horizontal" :gap="20" :labelWidth="100" labelColor="#333333">
+
+        <template #detail-item-name="{ data }">
+          <EbizDetailItem label="姓名" type="text" :value="data.visitors" :required="true" />
+        </template>
+        <template #detail-item-status="{ data }">
+          <EbizDetailItem label="状态" type="status" :value="data.status" />
+        </template>
+      </EbizDetailView>
+    </div>
+
+
+    <div class="demo-section">
+      <h2>TDesign栅格布局 - span功能和响应式</h2>
+      <div class="demo-description">
+        <p><strong>功能升级：</strong>现已使用 <a href="https://tdesign.tencent.com/vue-next/components/grid" target="_blank">TDesign栅格系统</a>，提供更强大的响应式支持！</p>
+        <p><strong>核心优势：</strong></p>
+        <ul>
+          <li>基于24栅格系统，更灵活的布局控制</li>
+          <li>内置响应式断点(xs/sm/md/lg/xl/xxl)</li>
+          <li>更好的浏览器兼容性（基于flexbox）</li>
+          <li>自动处理移动端适配，无需手动CSS</li>
+        </ul>
+        <p><strong>配置示例：</strong></p>
+        <pre><code>// 字段配置
+{
+  key: 'description', 
+  label: '个人描述', 
+  type: 'html', 
+  span: 4  // 跨越4列
+}
+
+// 响应式配置
+responsive: {
+  xs: 1,   // <576px  单列
+  sm: 1,   // ≥576px  单列  
+  md: 2,   // ≥768px  双列
+  lg: 2,   // ≥992px  双列
+  xl: 3,   // ≥1200px 三列
+  xxl: 4   // ≥1400px 四列
+}</code></pre>
+      </div>
+      <EbizDetailView 
+        :data="staticData" 
+        :fields="spanFields" 
+        :columns="4" 
+        layout="horizontal" 
+        :labelWidth="80" 
+        labelColor="#666666"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h2>响应式测试</h2>
+      <div class="demo-description">
+        <p><strong>测试说明：</strong>调整浏览器窗口大小，观察布局自动适配效果。</p>
+        <p><strong>断点说明：</strong></p>
+        <ul>
+          <li>xs: &lt;576px - 显示1列</li>
+          <li>sm: ≥576px - 显示2列</li>
+          <li>md: ≥768px - 显示2列</li>
+          <li>lg: ≥992px - 显示3列</li>
+          <li>xl: ≥1200px - 显示4列</li>
+          <li>xxl: ≥1400px - 显示4列</li>
+        </ul>
+      </div>
+      <EbizDetailView 
+        :data="staticData" 
+        :fields="basicFields" 
+        layout="horizontal" 
+        :gap="24" 
+        :labelWidth="100" 
+        labelColor="#333"
+        :responsive="{
+          xs: 1,
+          sm: 2, 
+          md: 2,
+          lg: 3,
+          xl: 4,
+          xxl: 4
+        }"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h2>自定义字段 - 使用slot</h2>
+      <EbizDetailView :dataId="10" :apiConfig="{
+        apiId: '2532',
+        key: 'release_note_detail'
+              }" :columns="3" layout="horizontal" :gap="16" :labelWidth="50" labelColor="#666666">
+        <template #default="{data}">
+            <EbizDetailItem label="姓名" type="text" :value="data.visitors" />
+            <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="data.release_time" />
+            <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" />
+        </template>
+      </EbizDetailView>
+    </div>
+    
+    <div class="demo-section">
+      <h2>增强的Slot支持 - 使用wrapItem函数</h2>
+      <div class="demo-description">
+        <p><strong>新增功能：</strong></p>
+        <ul>
+          <li><strong>内置栅格：</strong>EbizDetailItem 内部已集成 TDesign 栅格布局</li>
+          <li><strong>简化使用：</strong>直接在 EbizDetailItem 上设置 span 等属性</li>
+          <li><strong>响应式支持：</strong>支持 xs/sm/md/lg/xl/xxl 断点配置</li>
+          <li><strong>更好封装：</strong>组件更独立，无需外层包装</li>
+        </ul>
+        <p><strong>使用示例：</strong></p>
+        <pre><code>&lt;EbizDetailItem 
+  label="标题"
+  :value="content"
+  :span="2"    // 默认跨2列
+  :xs="4"      // 超小屏跨4列 
+  :md="3" /&gt;   // 中等屏跨3列</code></pre>
+      </div>
+      
+      <EbizDetailView :data="staticData" :columns="4" layout="horizontal" :gap="20" :labelWidth="80">
+        <template #default="{data}">
+          <!-- 现在直接使用EbizDetailItem，无需外层包装 -->
+          <EbizDetailItem 
+            label="姓名" 
+            type="text" 
+            :value="data.name" 
+            :required="true" 
+            :span="4" />
+          
+          <EbizDetailItem 
+            label="邮箱" 
+            type="text" 
+            :value="data.email" 
+            :span="6" />
+          
+          <EbizDetailItem 
+            label="个人网站" 
+            type="link" 
+            :value="data.website" 
+            :span="4"
+            @link-click="handleLinkClick" />
+
+          <!-- 响应式配置示例 -->
+          <EbizDetailItem 
+            label="技能标签" 
+            type="tags" 
+            :value="data.tags" 
+            :span="4" 
+            :lg="12" />
+          
+          <EbizDetailItem 
+            label="状态" 
+            type="status" 
+            :value="data.status" 
+            :span="4" />
+          
+          <!-- 跨列的详细描述 -->
+          <EbizDetailItem 
+            label="详细描述" 
+            layout="vertical"
+            type="html" 
+            :value="data.description" 
+            :span="12"
+            :xs="12" />
+        </template>
+      </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 basicFields = ref([
+  { key: 'name', label: '姓名', type: 'text', required: true },
+  { key: 'email', label: '邮箱', type: 'text' },
+  { key: 'department', label: '部门', type: 'text' },
+  { key: 'status', label: '状态', type: 'status' },
+  { key: 'manager', label: '负责人', type: 'user' },
+  { key: 'tags', label: '标签', type: 'tags' }
+])
+
+// 列跨度演示字段配置
+const spanFields = ref([
+  { key: 'name', label: '姓名', type: 'text', span: 1 },
+  { key: 'email', label: '邮箱', type: 'text', span: 1 },
+  { key: 'department', label: '部门', type: 'text', span: 1 },
+  { key: 'status', label: '状态', type: 'status', span: 1 },
+  { key: 'description', label: '个人描述', type: 'html', span: 4 },
+  { key: 'manager', label: '负责人', type: 'user', span: 2 },
+  { key: 'tags', label: '技能标签', type: 'tags', span: 2 },
+  { key: 'experience', label: '工作经验', type: 'text', span: 3 },
+  { key: 'skillScore', label: '技能分数', type: 'number', span: 1 }
+])
+
+// 事件处理函数
+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;
+}
+
+.demo-description {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border-left: 4px solid #0052d9;
+}
+
+.demo-description p {
+  margin: 8px 0;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.demo-description code {
+  padding: 2px 6px;
+  background: #e9ecef;
+  border-radius: 3px;
+  font-size: 12px;
+  color: #d63384;
+}
+
+.demo-description pre {
+  margin: 10px 0;
+  padding: 12px;
+  background: #2d3748;
+  color: #e2e8f0;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 12px;
+}
+
+.demo-description pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+}
+
+.demo-description ul {
+  margin: 10px 0;
+  padding-left: 20px;
+}
+
+.demo-description li {
+  margin: 4px 0;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.demo-description a {
+  color: #0052d9;
+  text-decoration: none;
+}
+
+.demo-description a:hover {
+  text-decoration: underline;
+}
 </style>