u

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const items = Array.from({ length: 10 }, (_, i) => ({
+  prefix: `图标${i + 1}`,
+  content: `这是内容${i + 1}`,
+  suffix: `操作${i + 1}`,
+}))
+</script>
+
+<template>
+  <div class="main">
+    <AList header="列表 Header" footer="列表 Footer" style="width: 1000px;height:400px">
+      <AListItem v-for="(item, index) in items" :key="index">
+        <template #prefix>
+          {{ item.prefix }}
+        </template>
+        {{ item.content }}
+        <template #suffix>
+          {{ item.suffix }}
+        </template>
+      </AListItem>
+    </AList>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  height: 800px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #eeeeee;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

code/base-project/base-vue/packages/ao-design/src/list/index.scss

@@ -65,4 +65,13 @@ $list-prefix: '#{$prefix}-list';
       background: $separator-color;
     }
   }
+
+  .#{$list-prefix}-load {
+    background: $bg-color-container;
+    text-align: center;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

code/base-project/base-vue/packages/ao-design/src/list/list.tsx

@@ -143,6 +143,11 @@ export default defineComponent({
       return content ? <div class={`${prefixCls}-footer`}>{content}</div> : null
     }
 
+    // TODO:暂时想不到什么好的设计方案
+    const renderLoad = () => {
+      <div class={`${prefixCls}-load`}></div>
+    }
+
     return () => (
       <div
         class={[