u

code/base-project/base-vue/src/App.vue

@@ -1,31 +1,48 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 
-const visible1 = ref(false)
-const visible2 = ref(false)
-const dragHandle = ref<HTMLElement | null>(null)
+const loading = ref(false)
+
+function toggleLoading() {
+  loading.value = !loading.value
+}
 </script>
 
 <template>
-  <!-- 默认 header 拖拽 -->
-  <AModal v-model:visible="visible1" :draggable="true">
-    <template #title>
-      Header 拖拽示例
-    </template>
-    <p>这是 header 拖拽</p>
-  </AModal>
-  <AButton @click="visible1 = true">
-    打开 Header 拖拽
-  </AButton>
+  <div class="main">
+    <!-- 卡片 -->
+    <ACard
+      :loading="loading"
+      title="标题"
+      sub-title="副标题"
+      style="width: 400px;"
+      hover-shadow
+      cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+    >
+      <template #actions>
+        actions
+      </template>
 
-<AModal v-model:visible="visible2" :draggable="true" draggable-selector=".drag-area">
-  <div class="drag-area" style="padding:10px; background:#ffdede; cursor:move">
-    拖拽这里
+      这里是内容
+
+      <template #footer>
+        这里是footer
+      </template>
+    </ACard>
+
+    <!-- 按钮 -->
+    <button style="margin-top: 16px;" @click="toggleLoading">
+      {{ loading ? '关闭 Loading' : '开启 Loading' }}
+    </button>
   </div>
-  <p>Modal 内容</p>
-</AModal>
-
-  <AButton @click="visible2 = true">
-    打开 Ref 拖拽
-  </AButton>
 </template>
+
+<style lang="scss" scoped>
+.main {
+  height: 800px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+</style>

code/base-project/base-vue/src/components.d.ts

@@ -8,7 +8,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ABadge: typeof import('@ao/ao-design')['Badge']
     AButton: typeof import('@ao/ao-design')['Button']
+    ACard: typeof import('@ao/ao-design')['Card']
     ACheckbox: typeof import('@ao/ao-design')['Checkbox']
     ACheckboxGroup: typeof import('@ao/ao-design')['CheckboxGroup']
     AConfigProvider: typeof import('@ao/ao-design')['ConfigProvider']