u

code/base-project/base-vue/packages/ao-design/src/descriptions/demo.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 示例数据
+const demoData = ref([
+  { label: '用户名', content: 'zhangsan', span: 1 },
+  { label: '邮箱', content: 'zhangsan@example.com', span: 1 },
+  { label: '手机号', content: '123456789', span: 1 },
+  { label: '地址', content: '北京市海淀区中关村', span: 1 },
+])
+</script>
+
+<template>
+  <div class="demo-container">
+    <!-- 1. Row 布局 -->
+    <div class="demo-block">
+      <h3>Row 布局</h3>
+      <ADescriptionsGroup
+        :data="demoData"
+        layout="row"
+        title="Row Layout"
+        :columns="3"
+      />
+    </div>
+
+    <!-- 2. Row Vertical 布局 -->
+    <div class="demo-block">
+      <h3>Row Vertical 布局</h3>
+      <ADescriptionsGroup
+        :data="demoData"
+        layout="row-vertical"
+        title="Row Vertical Layout"
+        :columns="3"
+      />
+    </div>
+
+    <!-- 3. Column 布局 -->
+    <div class="demo-block">
+      <h3>Column 布局</h3>
+      <ADescriptionsGroup
+        :data="demoData"
+        layout="column"
+        title="Column Layout"
+        :columns="3"
+      />
+    </div>
+
+    <!-- 4. Column Vertical 布局 -->
+    <div class="demo-block">
+      <h3>Column Vertical 布局</h3>
+      <ADescriptionsGroup
+        :data="demoData"
+        layout="column-vertical"
+        title="Column Vertical Layout"
+        :columns="3"
+      />
+    </div>
+
+    <!-- 5. 单独使用 ADescriptions -->
+    <div class="demo-block">
+      <h3>ADescriptions 单独使用</h3>
+      <ADescriptionsGroup title="单独 Descriptions" :columns="3">
+        <ADescriptions label="用户名">
+          zhangsan
+        </ADescriptions>
+        <ADescriptions label="邮箱">
+          zhangsan@example.com
+        </ADescriptions>
+        <ADescriptions label="手机号">
+          123456789
+        </ADescriptions>
+        <ADescriptions label="地址">
+          <div style="background-color: red;">
+            测试
+          </div>
+        </ADescriptions>
+      </ADescriptionsGroup>
+    </div>
+  </div>
+</template>
+
+<style>
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  gap: 40px;
+}
+
+.demo-block {
+  width: 80%;
+  max-width: 900px;
+  background: #fff;
+  padding: 20px 30px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.demo-block h3 {
+  margin-bottom: 16px;
+  font-weight: 600;
+  font-size: 18px;
+  color: #333;
+}
+</style>