WIP: account edit modal layout done (now: without password rows)

src/views/AccountManagement/AccountAdmin/index.vue

@@ -42,7 +42,7 @@
                     </Column>
                     <Column field="edit" :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500">
                         <template #body="slotProps">                            
-                            <img src="@/assets/icon-edit.svg" alt="Edit" class="cursor-pointer"/>
+                            <img src="@/assets/icon-edit.svg" alt="Edit" class="cursor-pointer" @click="onEditBtnClick(slotProps.data.id)"/>
                         </template></Column>
                 </DataTable>
             </div>
@@ -66,7 +66,7 @@ function repeatAccountList(accountList, N) {
         // 复制每次的对象并将其添加到新数组中
         accountList.forEach(account => {
             // 创建一个新的对象，避免直接引用
-            const newAccount = { ...account };
+            const newAccount = { ...account, id: account.id + i };
             repeatedList.push(newAccount);
         });
     }
@@ -168,6 +168,9 @@ export default {
         onDetailBtnClick(dataId){
             this.openModal();
         },
+        onEditBtnClick(dataId){
+            this.openModal();
+        },
         ...mapActions(useModalStore, ['openModal']),
     },
     created() {

src/views/AccountManagement/ModalAccountEdit.vue

@@ -0,0 +1,76 @@
+<template>
+    <div id="modal_account_edit" class="w-[600px] h-[296px] bg-[#FFFFFF] rounded
+        shadow-lg flex flex-col">
+        <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"> {{ i18next.t("AcctMgmt.AccountEdit") }}</h1>
+            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
+                @click="onCloseBtnClick"
+            />
+        </header>
+        
+        <main class="flex row h-[96px] my-[32px] flex-col px-8">
+            <div class="input-row w-full flex py-3">
+                <span class="field-label w-[68px] text-sm flex items-center font-medium mr-4 justify-end">{{ i18next.t("AcctMgmt.Account") }} </span>
+                <input class="w-[454px] rounded p-1 btn btn-sm btn-neutralborder border-[1px] border-[#64748B] flex items-center h-[40px]"/>
+            </div>
+            <div class="input-row w-full flex py-3 items-center">
+                <span class="field-label w-[68px] text-sm flex items-center font-medium mr-4 justify-end">{{ i18next.t("AcctMgmt.FullName") }} </span>
+                <input class="w-[454px] rounded p-1 btn btn-sm btn-neutralborder border-[1px] border-[#64748B] flex items-center h-[40px]"/>
+            </div>
+        </main>
+        <footer class="flex row footer justify-end pr-[32px]">            
+            <button class="cancel-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
+                flex justify-center items-center text-[#4E5969] font-medium"
+                @click="onCancelBtnClick"
+            >
+                {{ i18next.t("Global.Cancel") }}
+            </button>
+            <button class="confirm-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 bg-[#0099FF]
+                flex justify-center items-center text-[#ffffff] font-medium  ml-[16px]"
+                @click="onConfirmBtnClick"
+            >
+                {{ i18next.t("Global.Confirm") }}
+            </button>
+        </footer>       
+    </div>
+</template>
+
+<script>
+import i18next from "@/i18n/i18n.js";
+import { mapActions, } from 'pinia';
+import { useModalStore } from '@/stores/modal.js';
+
+export default {
+    setup() {
+      return {
+
+      };
+    },
+    data() {
+        return {
+            i18next: i18next,
+        };
+    },
+    methods: {
+        onConfirmBtnClick(){
+            //TODO:
+        },
+        onCloseBtnClick(){
+            this.closeModal();
+        },
+        onCancelBtnClick(){
+            this.closeModal();
+        },
+        ...mapActions(useModalStore, ['closeModal']),
+    }
+};
+
+</script>
+<style>
+#modal_account_edit {
+    background-color: #ffffff;
+    backdrop-filter: opacity(1); /*防止子元件繼承父元件的透明度 */
+}
+</style>

src/views/AccountManagement/ModalContainer.vue

@@ -1,21 +1,16 @@
 <template>
     <div id="modal_container" v-if="modalStore.isModalOpen" class="fixed w-screen h-screen bg-gray-800
         flex justify-center items-center">
-      <button @click="modalStore.openModal" class="flex px-4 py-2 bg-blue-500 text-white rounded">
-        Open Modal
-      </button>
 
-      <button @click="modalStore.closeModal" class="flex px-4 py-2 bg-blue-500 text-white rounded">
-        Close Modal
-      </button>
-  
-
-    </div>
+      <div class="flex">
+        <ModalAccountEdit/>
+      </div>
+    </div>    
   </template>
   
   <script>
   import { useModalStore } from '@/stores/modal.js';
-  
+  import ModalAccountEdit from './ModalAccountEdit.vue';
   export default {
     setup() {
       const modalStore = useModalStore();
@@ -23,11 +18,14 @@
         modalStore,
       };
     },
+    components: {
+      ModalAccountEdit,
+    }
   };
   </script>
 <style>
 #modal_container {
     z-index: 9999;
-    background-color: rgb(254,254,254);
+    background-color: rgba(254,254,254, 0.8);
 }
 </style>