WIP: account info modal prototype with a little bit of pinia state mgmt.

src/views/AccountManagement/ModalHeader.vue

@@ -0,0 +1,32 @@
+<template>
+    <header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
+        border-b border-b-[1px] border-[#CBD5E1]
+    ">
+        <h1 class="flex text-base font-bold"> {{ headerText }}</h1>
+        <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
+            @click="closeModal"
+        />
+    </header>
+</template>
+
+<script>
+import { useModalStore } from '@/stores/modal.js';
+export default {
+    props: {
+        headerText: {
+            type: String,
+            required: true // 确保 headerText 是必填的
+        }
+    },
+    setup(props) {
+        const modalStore = useModalStore();
+        const { headerText, } = props;
+        const { closeModal } = modalStore;
+
+        return {
+            headerText,
+            closeModal,
+        };
+  }
+}
+</script>