u

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

@@ -1,31 +1,47 @@
 <script setup lang="ts">
+import { NButton, NInput } from 'naive-ui'
 </script>
 
 <template>
-  <div style="display: flex; gap: 12px; flex-wrap: wrap; width: 300px;">
-    <!-- small 输入框，使用 slot 图标 -->
-    <AInput size="small" placeholder="Small 输入框">
-      <template #prefix>
-        <AIcon icon="material-symbols:10k-outline" />
-      </template>
-      <template #suffix>
-        <AIcon icon="material-symbols:10k-outline" />
-      </template>
-    </AInput>
+  <!-- 外层负责整个页面居中 -->
+  <div
+    style="
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+    "
+  >
+    <!-- 内层保留原来的布局 -->
+    <div
+      style="
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        width: 300px;
+      "
+    >
+      <AButton icon="solar:map-point-search-linear">
+        ABC
+      </AButton>
+      <AButton icon="solar:map-point-search-linear" />
+      <AInput size="small" placeholder="Small 输入框" password />
 
-    <!-- medium 输入框，使用 prop 图标 -->
-    <AInput
-      size="medium"
-      placeholder="Medium 输入框"
-      prefix-icon="material-symbols:10k-outline"
-      suffix-icon="material-symbols:10k-outline"
-    />
+      <AInput
+        size="medium"
+        placeholder="Medium 输入框"
+        clearable
+      />
 
-    <!-- large 输入框，prefix 用 slot，suffix 用 prop -->
-    <AInput size="large" placeholder="Large 输入框" suffix-icon="material-symbols:10k-outline">
-      <template #prefix>
-        <AIcon icon="material-symbols:10k-outline" />
-      </template>
-    </AInput>
+      <AInput
+        size="large"
+        placeholder="Large 输入框"
+        suffix-icon="solar:map-point-search-linear"
+      >
+        <template #prefix />
+      </AInput>
+    </div>
   </div>
 </template>

code/base-project/base-vue/src/main.ts

@@ -2,4 +2,5 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './style.scss'
 
+
 createApp(App).mount('#app')

code/base-project/base-vue/src/style.scss

@@ -1,5 +1,7 @@
 @use '@ao/ao-design/index.scss' as *;
 
+html,
 body {
-  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  margin: 0;
+  padding: 0;
 }