完成部分页面UI

src/components/common/AuthModal.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref } from 'vue'
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+import { useUserStore } from '@/stores/user'
+
+const visible = ref(false)
+const loading = ref(false)
+const formState = ref({
+  username: '',
+  password: '',
+  remember: true
+})
+
+const show = () => visible.value = true
+const close = () => visible.value = false
+
+const handleSubmit = async () => {
+  loading.value = true
+  try {
+    await useUserStore().login(formState.value)
+    close()
+  } finally {
+    loading.value = false
+  }
+}
+
+defineExpose({ 
+  show,
+  close
+})
+</script>
+
+<template>
+  <a-modal
+    :visible="visible"
+    title="欢迎登录"
+    :footer="null"
+    :width="400"
+    :maskClosable="false"
+    @cancel="close"
+    :wrapClassName="'auth-modal'"
+  >
+    <a-form
+      layout="vertical"
+      :model="formState"
+      @finish="handleSubmit"
+      class="px-8 pb-6"
+    >
+      <a-form-item name="username">
+        <a-input
+          v-model:value="formState.username"
+          placeholder="用户名"
+          size="large"
+          autocomplete="username"
+          class="rounded-lg hover:border-primary focus:border-primary"
+        >
+          <template #prefix><UserOutlined class="text-gray-400" /></template>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item name="password">
+        <a-input-password
+          v-model:value="formState.password"
+          placeholder="密码"
+          size="large"
+          autocomplete="current-password"
+          class="rounded-lg hover:border-primary"
+        >
+          <template #prefix><LockOutlined class="text-gray-400" /></template>
+        </a-input-password>
+      </a-form-item>
+
+      <a-form-item>
+        <a-button
+          type="primary"
+          html-type="submit"
+          :loading="loading"
+          block
+          size="large"
+          class="rounded-lg transition-all hover:shadow-md"
+        >
+          立即登录
+        </a-button>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<style scoped>
+:deep(.ant-modal-body) {
+  padding: 40px;
+}
+:deep(.ant-input-affix-wrapper) {
+  padding: 12px 16px;
+}
+</style>