diff --git a/src/App.vue b/src/App.vue
index 2ba7568..d39ce61 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -476,4 +476,38 @@ ul {
 ul li {
     list-style-type: none;
 }
+
+h2 {
+    font-size: 24px;
+}
+
+.h1,
+.h2,
+.h3,
+h1,
+h2,
+h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 100;
+}
+
+h3,
+h4,
+h5 {
+    margin-top: 5px;
+    font-weight: 600;
+}
+
+h3 {
+    font-size: 16px;
+}
 </style> 
\ No newline at end of file
diff --git a/src/api/staff/aStaffApi.js b/src/api/staff/aStaffApi.js
new file mode 100644
index 0000000..ec7186e
--- /dev/null
+++ b/src/api/staff/aStaffApi.js
@@ -0,0 +1,132 @@
+import request from '@/utils/request'
+
+// 查询员工信息
+export function queryStaffInfos(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/query.staff.infos',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 重置员工密码
+export function resetStaffPwd(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/user.resetStaffPwd',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 修改员工信息
+export function modifyStaff(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/user.staff.modify',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除员工
+export function deleteStaff(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/user.staff.delete',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取组织列表
+export function listOrgs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/org.listOrgs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+    
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取字典数据
+export function getDict(dictName, dictType) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dict.getDict',
+      method: 'get',
+      params: { dictName, dictType }
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传文件
+export function uploadImage(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/uploadImage',
+      method: 'post',
+      data,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '上传文件失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/staff/aStaffDetailApi.js b/src/api/staff/aStaffDetailApi.js
new file mode 100644
index 0000000..fad02f5
--- /dev/null
+++ b/src/api/staff/aStaffDetailApi.js
@@ -0,0 +1,216 @@
+import request from '@/utils/request'
+
+// 获取员工信息
+export function getStaffInfo(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/query.staff.infos',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取员工组织信息
+export function getStaffOrgs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/user.listStaffOrgs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取员工角色信息
+export function getStaffRoles(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/user.listStaffRoles',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取员工权限信息
+export function getStaffPrivileges(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/query.user.privilege',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取员工关联小区
+export function listStaffCommunities(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/role.listAStaffCommunity',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取员工小区失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 重置员工密码
+export function resetStaffPassword(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/user.resetStaffPwd',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '重置密码失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新员工信息
+export function updateStaff(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/user.staff.modify',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '更新员工信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取字典数据
+export function getDict(dictType, dictCd) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dict/getDict',
+      method: 'get',
+      params: {
+        dictType,
+        dictCd
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取字典数据失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取待关联小区列表
+export function listWaitStaffCommunities(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/role.listWaitAStaffCommunity',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取待关联小区失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存员工小区关联
+export function saveStaffCommunity(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/role.saveStaffCommunity',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '保存员工小区失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除员工小区关联
+export function deleteStaffCommunity(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/role.deleteStaffCommunity',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '删除员工小区失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/staff/aStaffDetailCommunitys.vue b/src/components/staff/aStaffDetailCommunitys.vue
new file mode 100644
index 0000000..760643f
--- /dev/null
+++ b/src/components/staff/aStaffDetailCommunitys.vue
@@ -0,0 +1,119 @@
+<template>
+  <div >
+    <el-row>
+      <el-col :span="24" class="text-right">
+        <el-button type="primary" size="small" @click="openAddStaffCommunityModal">
+          {{ $t('aStaffDetailCommunitys.relateCommunity') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="communitys" border style="width: 100%">
+        <el-table-column prop="staffName" :label="$t('aStaffDetailCommunitys.staffName')" align="center" />
+        <el-table-column prop="staffId" :label="$t('aStaffDetailCommunitys.staffId')" align="center" />
+        <el-table-column prop="communityId" :label="$t('aStaffDetailCommunitys.communityId')" align="center" />
+        <el-table-column prop="communityName" :label="$t('aStaffDetailCommunitys.communityName')" align="center" />
+        <el-table-column :label="$t('aStaffDetailCommunitys.operation')" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="openDeleteRoleCommunityModel(scope.row)">
+              {{ $t('aStaffDetailCommunitys.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]"
+            :page-size="pagination.size" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </el-col>
+      </el-row>
+    </div>
+    
+    <add-a-staff-community ref="addCommunity" @success="handleAddCommunitySuccess" />
+    <delete-a-staff-community ref="deleteCommunity" @success="handleDeleteCommunitySuccess" />
+  </div>
+</template>
+
+<script>
+import { listStaffCommunities } from '@/api/staff/aStaffDetailApi'
+import AddAStaffCommunity from '@/components/staff/addAStaffCommunity'
+import DeleteAStaffCommunity from '@/components/staff/deleteAStaffCommunity'
+
+export default {
+  name: 'AStaffDetailCommunitys',
+  props: {
+    staffId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      communitys: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  watch: {
+    staffId: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.loadData()
+        }
+      }
+    }
+  },
+  components:{
+    AddAStaffCommunity,
+    DeleteAStaffCommunity,
+  },
+  methods: {
+    async loadData() {
+      try {
+        const response = await listStaffCommunities({
+          staffId: this.staffId,
+          page: this.pagination.current,
+          row: this.pagination.size
+        })
+        this.communitys = response.data || []
+        this.pagination.total = response.records || 0
+      } catch (error) {
+        this.$message.error(this.$t('aStaffDetailCommunitys.loadError'))
+      }
+    },
+    openAddStaffCommunityModal() {
+      this.$refs.addCommunity.open({
+        staffId: this.staffId
+      })
+    },
+    openDeleteRoleCommunityModel(community) {
+      this.$refs.deleteCommunity.open(community)
+    },
+    handleSizeChange(size) {
+      this.pagination.size = size
+      this.loadData()
+    },
+    handleCurrentChange(page) {
+      this.pagination.current = page
+      this.loadData()
+    },
+    handleAddCommunitySuccess() {
+      this.loadData()
+      this.$message.success(this.$t('aStaffDetailList.addCommunitySuccess'))
+    },
+    handleDeleteCommunitySuccess() {
+      this.loadData()
+      this.$message.success(this.$t('aStaffDetailList.deleteCommunitySuccess'))
+    }
+  }
+}
+</script>
+
diff --git a/src/components/staff/addAStaffCommunity.vue b/src/components/staff/addAStaffCommunity.vue
new file mode 100644
index 0000000..4908f2e
--- /dev/null
+++ b/src/components/staff/addAStaffCommunity.vue
@@ -0,0 +1,138 @@
+<template>
+  <el-dialog :title="$t('addAStaffCommunity.community')" :visible.sync="visible" width="60%" :before-close="handleClose">
+    <el-card>
+      <el-row>
+        <el-col :span="12">
+          <el-input v-model="searchForm.communityName" :placeholder="$t('addAStaffCommunity.searchPlaceholder')" clearable
+            @keyup.enter.native="searchCommunities">
+            <el-button slot="append" icon="el-icon-search" @click="searchCommunities" />
+          </el-input>
+        </el-col>
+      </el-row>
+
+      <el-table class="margin-top" :data="communities" border style="width: 100%">
+        <el-table-column width="55">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.checked" @change="handleCheckChange(scope.row)" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="communityId" :label="$t('addAStaffCommunity.communityId')" align="center" />
+        <el-table-column prop="name" :label="$t('addAStaffCommunity.communityName')" align="center" />
+        <el-table-column prop="address" :label="$t('addAStaffCommunity.communityAddress')" align="center" />
+      </el-table>
+
+      <el-pagination class="margin-top" :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]"
+        :page-size="pagination.size" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </el-card>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('addAStaffCommunity.cancel') }}</el-button>
+      <el-button type="primary" @click="addStaffCommunity">{{ $t('addAStaffCommunity.submit') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listWaitStaffCommunities, saveStaffCommunity } from '@/api/staff/aStaffDetailApi'
+
+export default {
+  name: 'AddAStaffCommunity',
+  data() {
+    return {
+      visible: false,
+      searchForm: {
+        communityName: ''
+      },
+      communities: [],
+      selectedCommunities: [],
+      staffId: '',
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.staffId = params.staffId
+      this.visible = true
+      this.loadCommunities()
+    },
+    handleClose() {
+      this.visible = false
+      this.resetForm()
+    },
+    resetForm() {
+      this.searchForm.communityName = ''
+      this.communities = []
+      this.selectedCommunities = []
+      this.pagination.current = 1
+      this.pagination.total = 0
+    },
+    async loadCommunities() {
+      try {
+        const response = await listWaitStaffCommunities({
+          staffId: this.staffId,
+          page: this.pagination.current,
+          row: this.pagination.size,
+          nameLike: this.searchForm.communityName
+        })
+        this.communities = (response.data || []).map(item => {
+          return {
+            ...item,
+            checked: false
+          }
+        })
+        this.pagination.total = response.records || 0
+      } catch (error) {
+        this.$message.error(this.$t('addAStaffCommunity.loadError'))
+      }
+    },
+    searchCommunities() {
+      this.pagination.current = 1
+      this.loadCommunities()
+    },
+    handleCheckChange(row) {
+      if (row.checked) {
+        this.selectedCommunities.push({
+          communityId: row.communityId,
+          communityName: row.name
+        })
+      } else {
+        this.selectedCommunities = this.selectedCommunities.filter(
+          item => item.communityId !== row.communityId
+        )
+      }
+    },
+    handleSizeChange(size) {
+      this.pagination.size = size
+      this.loadCommunities()
+    },
+    handleCurrentChange(page) {
+      this.pagination.current = page
+      this.loadCommunities()
+    },
+    async addStaffCommunity() {
+      if (this.selectedCommunities.length === 0) {
+        this.$message.warning(this.$t('addAStaffCommunity.selectCommunity'))
+        return
+      }
+
+      try {
+        await saveStaffCommunity({
+          staffId: this.staffId,
+          communitys: this.selectedCommunities
+        })
+        this.$message.success(this.$t('addAStaffCommunity.addSuccess'))
+        this.handleClose()
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(this.$t('addAStaffCommunity.addError'))
+      }
+    }
+  }
+}
+</script>
+
diff --git a/src/components/staff/deleteAStaffCommunity.vue b/src/components/staff/deleteAStaffCommunity.vue
new file mode 100644
index 0000000..9538b28
--- /dev/null
+++ b/src/components/staff/deleteAStaffCommunity.vue
@@ -0,0 +1,73 @@
+<template>
+  <el-dialog
+    :title="$t('deleteAStaffCommunity.confirmOperation')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose">
+    <div class="text-center">
+      <p>{{ $t('deleteAStaffCommunity.confirmDelete') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('deleteAStaffCommunity.cancel') }}</el-button>
+      <el-button type="primary" @click="deleteStaffCommunity">{{ $t('deleteAStaffCommunity.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteStaffCommunity } from '@/api/staff/aStaffDetailApi'
+
+export default {
+  name: 'DeleteAStaffCommunity',
+  data() {
+    return {
+      visible: false,
+      community: {}
+    }
+  },
+  methods: {
+    open(community) {
+      this.community = community
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    async deleteStaffCommunity() {
+      try {
+        await deleteStaffCommunity(this.community)
+        this.$message.success(this.$t('deleteAStaffCommunity.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(this.$t('deleteAStaffCommunity.deleteError'))
+      }
+    }
+  }
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "deleteAStaffCommunity": {
+      "confirmOperation": "Confirm Your Operation",
+      "confirmDelete": "Are you sure you want to delete this community?",
+      "cancel": "Cancel",
+      "confirm": "Confirm Delete",
+      "deleteSuccess": "Community deleted successfully",
+      "deleteError": "Failed to delete community"
+    }
+  },
+  "zh": {
+    "deleteAStaffCommunity": {
+      "confirmOperation": "请确认您的操作",
+      "confirmDelete": "确定删除隶属小区？",
+      "cancel": "点错了",
+      "confirm": "确认删除",
+      "deleteSuccess": "小区删除成功",
+      "deleteError": "小区删除失败"
+    }
+  }
+}
+</i18n>
\ No newline at end of file
diff --git a/src/components/staff/deleteStaff.vue b/src/components/staff/deleteStaff.vue
index 85bd1b6..8ca2cf6 100644
--- a/src/components/staff/deleteStaff.vue
+++ b/src/components/staff/deleteStaff.vue
@@ -1,60 +1,60 @@
 <!-- components/staff/deleteStaff.vue -->
 <template>
-    <el-dialog
-      :title="$t('staff.confirmOperation')"
-      :visible.sync="visible"
-      width="40%"
-      @close="handleClose"
-    >
-      <div class="text-center">
-        <p>{{ $t('staff.confirmDelete') }}</p>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleClose">{{ $t('staff.wrongClick') }}</el-button>
-        <el-button type="danger" @click="deleteStaff">{{ $t('staff.confirmDeleteAction') }}</el-button>
-      </span>
-    </el-dialog>
-  </template>
-  
-  <script>
-  import { deleteStaff } from '@/api/staff/staffApi'
-  
-  export default {
-    name: 'DeleteStaff',
-    props: {
-      visible: {
-        type: Boolean,
-        default: false
-      },
-      staffInfo: {
-        type: Object,
-        default: () => ({})
-      }
+  <el-dialog
+    :title="$t('staff.confirmOperation')"
+    :visible.sync="visible"
+    width="40%"
+    @close="handleClose"
+  >
+    <div class="text-center">
+      <p>{{ $t('staff.confirmDelete') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('staff.wrongClick') }}</el-button>
+      <el-button type="danger" @click="deleteStaff">{{ $t('staff.confirmDeleteAction') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteStaff } from '@/api/staff/staffApi'
+
+export default {
+  name: 'DeleteStaff',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
     },
-    data() {
-      return {
-        loading: false
-      }
+    staffInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:visible', false)
     },
-    methods: {
-      handleClose() {
-        this.$emit('update:visible', false)
-      },
-      async deleteStaff() {
-        try {
-          this.loading = true
-          await deleteStaff({
-            userId: this.staffInfo.userId
-          })
-          this.$message.success(this.$t('staff.deleteSuccess'))
-          this.$emit('success')
-          this.handleClose()
-        } catch (error) {
-          this.$message.error(error.message)
-        } finally {
-          this.loading = false
-        }
+    async deleteStaff() {
+      try {
+        this.loading = true
+        await deleteStaff({
+          userId: this.staffInfo.userId
+        })
+        this.$message.success(this.$t('staff.deleteSuccess'))
+        this.$emit('success')
+        this.handleClose()
+      } catch (error) {
+        this.$message.error(error.message)
+      } finally {
+        this.loading = false
       }
     }
   }
-  </script>
\ No newline at end of file
+}
+</script>
diff --git a/src/components/staff/editStaff.vue b/src/components/staff/editStaff.vue
index 8e7c0d1..c502646 100644
--- a/src/components/staff/editStaff.vue
+++ b/src/components/staff/editStaff.vue
@@ -1,191 +1,200 @@
 <!-- components/staff/editStaff.vue -->
 <template>
-    <el-dialog
-      :title="$t('staff.modifyStaff')"
-      :visible.sync="visible"
-      width="50%"
-      @close="handleClose"
-    >
-      <el-form ref="form" :model="editStaffInfo" label-width="120px">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item :label="$t('staff.name')" prop="username">
-              <el-input
-                v-model="editStaffInfo.username"
-                :placeholder="$t('staff.requiredName')"
-              />
-            </el-form-item>
-            <el-form-item :label="$t('staff.email')" prop="email">
-              <el-input
-                v-model="editStaffInfo.email"
-                :placeholder="$t('staff.optionalEmail')"
-              />
-            </el-form-item>
-            <el-form-item :label="$t('staff.phone')" prop="tel">
-              <el-input
-                v-model="editStaffInfo.tel"
-                :placeholder="$t('staff.requiredPhone')"
-              />
-            </el-form-item>
-            <el-form-item :label="$t('staff.gender')" prop="sex">
-              <el-select
-                v-model="editStaffInfo.sex"
-                :placeholder="$t('staff.requiredGender')"
-                style="width: 100%"
-              >
-                <el-option :value="0" :label="$t('staff.male')" />
-                <el-option :value="1" :label="$t('staff.female')" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('staff.address')" prop="address">
-              <el-input
-                v-model="editStaffInfo.address"
-                :placeholder="$t('staff.requiredAddress')"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" style="text-align: center">
-            <el-image
-              style="width: 200px; height: 200px"
-              :src="editStaffInfo.photoUrl"
-              fit="cover"
+  <el-dialog
+    :title="$t('staff.modifyStaff')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="editStaffInfo" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('staff.name')" prop="username">
+            <el-input
+              v-model="editStaffInfo.username"
+              :placeholder="$t('staff.requiredName')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('email')" prop="email">
+            <el-input
+              v-model="editStaffInfo.email"
+              :placeholder="$t('staff.optionalEmail')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('staff.phone')" prop="tel">
+            <el-input
+              v-model="editStaffInfo.tel"
+              :placeholder="$t('staff.requiredPhone')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('staff.gender')" prop="sex">
+            <el-select
+              v-model="editStaffInfo.sex"
+              :placeholder="$t('staff.requiredGender')"
+              style="width: 100%"
             >
-              <div slot="error" class="image-slot">
-                <i class="el-icon-picture-outline"></i>
-              </div>
-            </el-image>
-            <div style="margin-top: 20px">
-              <el-upload
-                action=""
-                :auto-upload="false"
-                :show-file-list="false"
-                :on-change="handlePhotoChange"
-              >
-                <el-button type="primary">{{ $t('staff.uploadPhoto') }}</el-button>
-              </el-upload>
+              <el-option :value="0" :label="$t('staff.male')" />
+              <el-option :value="1" :label="$t('staff.female')" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('staff.address')" prop="address">
+            <el-input
+              v-model="editStaffInfo.address"
+              :placeholder="$t('staff.requiredAddress')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" style="text-align: center">
+          <el-image
+            style="width: 200px; height: 200px"
+            :src="editStaffInfo.photoUrl"
+            fit="cover"
+          >
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
             </div>
-          </el-col>
-        </el-row>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleClose">{{ $t('staff.cancel') }}</el-button>
-        <el-button type="primary" @click="editStaffSubmit">{{ $t('staff.edit') }}</el-button>
-      </span>
-    </el-dialog>
-  </template>
-  
-  <script>
-  import { modifyStaff } from '@/api/staff/staffApi'
-  
-  export default {
-    name: 'EditStaff',
-    props: {
-      visible: {
-        type: Boolean,
-        default: false
-      },
-      staffInfo: {
-        type: Object,
-        default: () => ({})
-      }
+          </el-image>
+          <div style="margin-top: 20px">
+            <el-upload
+              action=""
+              :auto-upload="false"
+              :show-file-list="false"
+              :on-change="handlePhotoChange"
+            >
+              <el-button type="primary">{{ $t('staff.uploadPhoto') }}</el-button>
+            </el-upload>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('staff.cancel') }}</el-button>
+      <el-button type="primary" @click="editStaffSubmit">{{ $t('staff.edit') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { modifyStaff } from '@/api/staff/staffApi'
+
+export default {
+  name: 'EditStaff',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
     },
-    data() {
-      return {
-        loading: false,
-        editStaffInfo: {
-          userId: '',
-          username: '',
-          email: '',
-          tel: '',
-          sex: '',
-          address: '',
-          photo: '',
-          photoUrl: '',
-          relCd: '',
-          relCds: [],
-          branchOrgs: [],
-          departmentOrgs: [],
-          parentOrgId: '',
-          parentOrgName: '',
-          parentTwoOrgId: '',
-          orgNewName: '',
-          orgId: ''
-        }
+    staffInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      editStaffInfo: {
+        userId: '',
+        username: '',
+        email: '',
+        tel: '',
+        sex: '',
+        address: '',
+        photo: '',
+        photoUrl: '',
+        relCd: '',
+        relCds: [],
+        branchOrgs: [],
+        departmentOrgs: [],
+        parentOrgId: '',
+        parentOrgName: '',
+        parentTwoOrgId: '',
+        orgNewName: '',
+        orgId: ''
       }
-    },
-    watch: {
-      staffInfo: {
-        immediate: true,
-        handler(val) {
-          if (val) {
-            this.editStaffInfo = {
-              ...val,
-              username: val.name,
-              photoUrl: val.faceUrl || '/img/noPhoto.jpg'
-            }
+    }
+  },
+  watch: {
+    staffInfo: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.editStaffInfo = {
+            ...val,
+            username: val.name,
+            photoUrl: val.faceUrl || '/img/noPhoto.jpg'
           }
         }
       }
+    }
+  },
+  methods: {
+    open(row){
+      this.editStaffInfo = {
+            ...row,
+            username: row.name,
+            photoUrl: row.faceUrl || '/img/noPhoto.jpg'
+          }
+      this.visible = true
     },
-    methods: {
-      handleClose() {
-        this.$emit('update:visible', false)
-      },
-      handlePhotoChange(file) {
-        if (file.size > 2 * 1024 * 1024) {
-          this.$message.error(this.$t('staff.photoSizeLimit'))
-          return false
-        }
-        
-        const reader = new FileReader()
-        reader.onload = (e) => {
-          this.editStaffInfo.photoUrl = e.target.result
-          // Here you would typically upload the file to server
-          // and set editStaffInfo.photo to the returned file ID
-          this.editStaffInfo.photo = file.uid // Temporary, replace with actual file ID
-        }
-        reader.readAsDataURL(file.raw)
-      },
-      validateForm() {
-        if (!this.editStaffInfo.username) {
-          this.$message.error(this.$t('staff.requiredName'))
-          return false
-        }
-        if (!this.editStaffInfo.tel) {
-          this.$message.error(this.$t('staff.requiredPhone'))
-          return false
-        }
-        if (this.editStaffInfo.sex === '') {
-          this.$message.error(this.$t('staff.requiredGender'))
-          return false
-        }
-        if (!this.editStaffInfo.address) {
-          this.$message.error(this.$t('staff.requiredAddress'))
-          return false
+    handleClose() {
+      this.$emit('update:visible', false)
+    },
+    handlePhotoChange(file) {
+      if (file.size > 2 * 1024 * 1024) {
+        this.$message.error(this.$t('staff.photoSizeLimit'))
+        return false
+      }
+      
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        this.editStaffInfo.photoUrl = e.target.result
+        // Here you would typically upload the file to server
+        // and set editStaffInfo.photo to the returned file ID
+        this.editStaffInfo.photo = file.uid // Temporary, replace with actual file ID
+      }
+      reader.readAsDataURL(file.raw)
+    },
+    validateForm() {
+      if (!this.editStaffInfo.username) {
+        this.$message.error(this.$t('staff.requiredName'))
+        return false
+      }
+      if (!this.editStaffInfo.tel) {
+        this.$message.error(this.$t('staff.requiredPhone'))
+        return false
+      }
+      if (this.editStaffInfo.sex === '') {
+        this.$message.error(this.$t('staff.requiredGender'))
+        return false
+      }
+      if (!this.editStaffInfo.address) {
+        this.$message.error(this.$t('staff.requiredAddress'))
+        return false
+      }
+      return true
+    },
+    async editStaffSubmit() {
+      if (!this.validateForm()) return
+      
+      try {
+        this.loading = true
+        const data = {
+          ...this.editStaffInfo,
+          name: this.editStaffInfo.username,
+          staffId: this.editStaffInfo.userId
         }
-        return true
-      },
-      async editStaffSubmit() {
-        if (!this.validateForm()) return
         
-        try {
-          this.loading = true
-          const data = {
-            ...this.editStaffInfo,
-            name: this.editStaffInfo.username,
-            staffId: this.editStaffInfo.userId
-          }
-          
-          await modifyStaff(data)
-          this.$message.success(this.$t('staff.modifySuccess'))
-          this.$emit('success')
-          this.handleClose()
-        } catch (error) {
-          this.$message.error(error.message)
-        } finally {
-          this.loading = false
-        }
+        await modifyStaff(data)
+        this.visible =false
+        this.$message.success(this.$t('staff.modifySuccess'))
+        this.$emit('success')
+        this.handleClose()
+      } catch (error) {
+        this.$message.error(error.message)
+      } finally {
+        this.loading = false
       }
     }
   }
-  </script>
\ No newline at end of file
+}
+</script>
diff --git a/src/components/staff/resetStaffPwd.vue b/src/components/staff/resetStaffPwd.vue
index 2ffa080..28230c2 100644
--- a/src/components/staff/resetStaffPwd.vue
+++ b/src/components/staff/resetStaffPwd.vue
@@ -1,66 +1,71 @@
 <!-- components/staff/resetStaffPwd.vue -->
 <template>
-    <el-dialog
-      :title="$t('staff.confirmOperation')"
-      :visible.sync="visible"
-      width="30%"
-      @close="handleClose"
-    >
-      <div class="text-center">
-        <p>{{ $t('staff.confirmResetPassword') }}?</p>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleClose">{{ $t('staff.wrongClick') }}</el-button>
-        <el-button type="primary" @click="resetStaffPwd">{{ $t('staff.confirmReset') }}</el-button>
-      </span>
-    </el-dialog>
-  </template>
-  
-  <script>
-  import { resetStaffPwd } from '@/api/staff/staffApi'
-  
-  export default {
-    name: 'ResetStaffPwd',
-    props: {
-      visible: {
-        type: Boolean,
-        default: false
-      },
-      staffInfo: {
-        type: Object,
-        default: () => ({})
-      }
+  <el-dialog
+    :title="$t('staff.confirmOperation')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="text-center">
+      <p>{{ $t('staff.confirmResetPassword') }}?</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('staff.wrongClick') }}</el-button>
+      <el-button type="primary" @click="resetStaffPwd">{{ $t('staff.confirmReset') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { resetStaffPwd } from '@/api/staff/staffApi'
+
+export default {
+  name: 'ResetStaffPwd',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
     },
-    data() {
-      return {
-        loading: false
-      }
+    staffInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    open(row){
+        this.visible = true
+        this.staffInfo = {...row}
+    },
+    handleClose() {
+      this.visible = false
+      this.$emit('update:visible', false)
     },
-    methods: {
-      handleClose() {
-        this.$emit('update:visible', false)
-      },
-      async resetStaffPwd() {
-        try {
-          this.loading = true
-          const data = {
-            communityId: '-1',
-            staffId: this.staffInfo.userId
-          }
-          
-          const res = await resetStaffPwd(data)
-          this.$message.success(
-            this.$t('staff.resetPasswordSuccess', { pwd: res.pwd }),
-            10000
-          )
-          this.$emit('success')
-          this.handleClose()
-        } catch (error) {
-          this.$message.error(error.message)
-        } finally {
-          this.loading = false
+    async resetStaffPwd() {
+      try {
+        this.loading = true
+        const data = {
+          communityId: '-1',
+          staffId: this.staffInfo.userId
         }
+        
+        const res = await resetStaffPwd(data)
+        this.$message.success(
+          this.$t('staff.resetPasswordSuccess', { pwd: res.pwd }),
+          10000
+        )
+        this.$emit('success')
+        this.handleClose()
+      } catch (error) {
+        this.$message.error(error.message)
+      } finally {
+        this.loading = false
       }
     }
   }
-  </script>
\ No newline at end of file
+}
+</script>
diff --git a/src/components/staff/staffDetailOrgPrivilege.vue b/src/components/staff/staffDetailOrgPrivilege.vue
new file mode 100644
index 0000000..9028bb4
--- /dev/null
+++ b/src/components/staff/staffDetailOrgPrivilege.vue
@@ -0,0 +1,158 @@
+<template>
+  <el-row class="margin-top" :gutter="20">
+    <el-col :span="18">
+      <el-card>
+        <div class="text-left">
+          <h5>{{ $t('staffDetailOrgPrivilege.relatedOrg') }}</h5>
+          <el-row v-for="(item, index) in orgs" :key="index" class="margin-top">
+            <el-col :span="12">{{ $t('staffDetailOrgPrivilege.org') }}：{{ item.orgName }}</el-col>
+            <el-col :span="12">{{ $t('staffDetailOrgPrivilege.position') }}：{{ item.relCdName }}</el-col>
+          </el-row>
+        </div>
+      </el-card>
+
+      <el-card class="margin-top">
+        <div class="text-left">
+          <h5>{{ $t('staffDetailOrgPrivilege.relatedRole') }}</h5>
+          <el-row v-for="(item, index) in roles" :key="index">
+            <el-col :span="24">
+              <p v-if="item.roleCommunityDtoList.length > 0">{{ item.roleName }}</p>
+            </el-col>
+          </el-row>
+        </div>
+      </el-card>
+    </el-col>
+
+    <el-col :span="6">
+      <el-card>
+        <div class="mail-box-header border-radius-top text-left">
+          <h2>{{ $t('staffDetailOrgPrivilege.staffPrivilege') }}</h2>
+        </div>
+
+        <el-tree :data="privilegesTree" node-key="id" default-expand-all :props="treeProps" :expand-on-click-node="false">
+        </el-tree>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { getStaffOrgs, getStaffRoles, getStaffPrivileges } from '@/api/staff/aStaffDetailApi'
+
+export default {
+  name: 'StaffDetailOrgPrivilege',
+  props: {
+    staffId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      orgs: [],
+      roles: [],
+      privileges: [],
+      privilegesTree: [],
+      treeProps: {
+        children: 'children',
+        label: 'text'
+      }
+    }
+  },
+  watch: {
+    staffId: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.loadData()
+        }
+      }
+    }
+  },
+  methods: {
+    async loadData() {
+      await Promise.all([
+        this.loadStaffOrgs(),
+        this.loadStaffRoles(),
+        this.loadStaffPrivileges()
+      ])
+      this.buildPrivilegesTree()
+    },
+    async loadStaffOrgs() {
+      try {
+        const response = await getStaffOrgs({
+          staffId: this.staffId,
+          page: 1,
+          row: 999
+        })
+        this.orgs = response.data || []
+      } catch (error) {
+        this.$message.error(this.$t('staffDetailOrgPrivilege.loadOrgsError'))
+      }
+    },
+    async loadStaffRoles() {
+      try {
+        const response = await getStaffRoles({
+          staffId: this.staffId,
+          page: 1,
+          row: 999
+        })
+        this.roles = response.data || []
+      } catch (error) {
+        this.$message.error(this.$t('staffDetailOrgPrivilege.loadRolesError'))
+      }
+    },
+    async loadStaffPrivileges() {
+      try {
+        const response = await getStaffPrivileges({
+          staffId: this.staffId
+        })
+        this.privileges = response.datas || []
+      } catch (error) {
+        this.$message.error(this.$t('staffDetailOrgPrivilege.loadPrivilegesError'))
+      }
+    },
+    buildPrivilegesTree() {
+      const groupMap = new Map()
+
+      // 构建组节点
+      this.privileges.forEach(item => {
+        if (!groupMap.has(item.gId)) {
+          groupMap.set(item.gId, {
+            id: `g_${item.gId}`,
+            gId: item.gId,
+            text: item.gName,
+            children: []
+          })
+        }
+      })
+
+      // 构建菜单节点
+      this.privileges.forEach(item => {
+        const group = groupMap.get(item.gId)
+        let menu = group.children.find(m => m.mId === item.mId)
+
+        if (!menu) {
+          menu = {
+            id: `m_${item.mId}`,
+            mId: item.mId,
+            text: item.mName,
+            children: []
+          }
+          group.children.push(menu)
+        }
+
+        // 添加权限节点
+        menu.children.push({
+          id: `p_${item.pId}`,
+          pId: item.pId,
+          text: item.pName
+        })
+      })
+
+      this.privilegesTree = Array.from(groupMap.values())
+    }
+  }
+}
+</script>
+
diff --git a/src/i18n/index.js b/src/i18n/index.js
index a59d50b..6bfbb19 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -112,6 +112,8 @@ import { messages as supplierTypeManageMessages } from '../views/scm/supplierTyp
 import { messages as supplierManageMessages } from '../views/scm/supplierManageLang'
 import { messages as supplierCouponMessages } from '../views/scm/supplierCouponLang'
 import { messages as supplierCouponBuyMessages } from '../views/scm/supplierCouponBuyLang'
+import { messages as aStaffMessages } from '../views/staff/aStaffLang'
+import { messages as aStaffDetailMessages } from '../views/staff/aStaffDetailLang'
 
 Vue.use(VueI18n)
 
@@ -228,6 +230,8 @@ const messages = {
     ...supplierManageMessages.en,
     ...supplierCouponMessages.en,
     ...supplierCouponBuyMessages.en,
+    ...aStaffMessages.en,
+    ...aStaffDetailMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -340,6 +344,8 @@ const messages = {
     ...supplierManageMessages.zh,
     ...supplierCouponMessages.zh,
     ...supplierCouponBuyMessages.zh,
+    ...aStaffMessages.zh,
+    ...aStaffDetailMessages.zh,
   }
 }
 
diff --git a/src/main.js b/src/main.js
index 2eb3119..b1e87a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,11 +5,23 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import i18n from './i18n'
 
-Vue.prototype.hasPrivilege = function(privilegeCode) {
-  // 这里实现你的权限检查逻辑
-  // 例如从 Vuex store 或本地存储中获取用户权限列表
-  const userPrivileges =  []
-  return userPrivileges.includes(privilegeCode)
+Vue.prototype.hasPrivilege = function(_privaleges) {
+  // 确保 _privaleges 是数组，如果不是则转换为数组
+  const privilegesToCheck = Array.isArray(_privaleges) ? _privaleges : [_privaleges];
+  
+  // 从本地存储获取用户权限
+  let userPrivileges = localStorage.getItem('hc_staff_privilege');
+  
+  // 如果存在用户权限，则转换为数组
+  if (userPrivileges) {
+    userPrivileges = userPrivileges.split(',');
+  } else {
+    // 如果没有权限数据，直接返回 false
+    return false;
+  }
+  
+  // 检查用户是否有任一所需权限
+  return privilegesToCheck.some(item => userPrivileges.includes(item));
 }
 Vue.prototype.toDoc = function(url) {
   window.open('http://www.homecommunity.cn/'+url, '_blank')
diff --git a/src/router/index.js b/src/router/index.js
index bec7722..ad062e2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -542,10 +542,20 @@ const routes = [
         component: () => import('@/views/scm/supplierCouponList.vue')
       },
       {
-        path:'/pages/scm/supplierCouponBuy',
-        name:'/pages/scm/supplierCouponBuy',
+        path: '/pages/scm/supplierCouponBuy',
+        name: '/pages/scm/supplierCouponBuy',
         component: () => import('@/views/scm/supplierCouponBuyList.vue')
-        },
+      },
+      {
+        path: '/pages/staff/aStaff',
+        name: '/pages/staff/aStaff',
+        component: () => import('@/views/staff/aStaffList.vue')
+      },
+      {
+        path: '/views/staff/aStaffDetail',
+        name: '/views/staff/aStaffDetail',
+        component: () => import('@/views/staff/aStaffDetailList.vue')
+      },
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/views/scm/supplierCouponBuyLang.js b/src/views/scm/supplierCouponBuyLang.js
index 5198cda..38811b7 100644
--- a/src/views/scm/supplierCouponBuyLang.js
+++ b/src/views/scm/supplierCouponBuyLang.js
@@ -27,9 +27,6 @@ export const messages = {
         remark: 'Remark'
       },
       fetchError: 'Failed to fetch coupon purchase records'
-    },
-    common: {
-      search: 'Search'
     }
   },
   zh: {
@@ -60,9 +57,6 @@ export const messages = {
         remark: '备注'
       },
       fetchError: '获取优惠券购买记录失败'
-    },
-    common: {
-      search: '查询'
     }
   }
 }
\ No newline at end of file
diff --git a/src/views/staff/aStaffDetailLang.js b/src/views/staff/aStaffDetailLang.js
new file mode 100644
index 0000000..dbcdb48
--- /dev/null
+++ b/src/views/staff/aStaffDetailLang.js
@@ -0,0 +1,130 @@
+export const messages = {
+  en: {
+    aStaffDetailList: {
+      staffInfo: 'Staff Information',
+      back: 'Back',
+      edit: 'Edit',
+      resetPwd: 'Reset Password',
+      staffId: 'Staff ID',
+      userName: 'Name',
+      idCard: 'ID Card',
+      tel: 'Phone',
+      sex: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      address: 'Address',
+      orgPrivilege: 'Organization Privilege',
+      community: 'Community',
+      loadError: 'Failed to load staff information',
+      resetSuccess: 'Password reset successful',
+      editSuccess: 'Staff information updated',
+      addCommunitySuccess: 'Community added successfully',
+      deleteCommunitySuccess: 'Community removed successfully'
+    },
+    "staffDetailOrgPrivilege": {
+      "relatedOrg": "Related Organization",
+      "org": "Organization",
+      "position": "Position",
+      "relatedRole": "Related Roles",
+      "staffPrivilege": "Staff Privileges",
+      "loadOrgsError": "Failed to load organizations",
+      "loadRolesError": "Failed to load roles",
+      "loadPrivilegesError": "Failed to load privileges"
+    },
+    "aStaffDetailCommunitys": {
+      "relateCommunity": "Relate Community",
+      "staffName": "Staff Name",
+      "staffId": "Staff ID",
+      "communityId": "Community ID",
+      "communityName": "Community Name",
+      "operation": "Operation",
+      "delete": "Delete",
+      "loadError": "Failed to load community data"
+    },
+    "addAStaffCommunity": {
+      "community": "Community",
+      "searchPlaceholder": "Enter community name",
+      "communityId": "Community ID",
+      "communityName": "Community Name",
+      "communityAddress": "Community Address",
+      "cancel": "Cancel",
+      "submit": "Submit",
+      "loadError": "Failed to load community data",
+      "selectCommunity": "Please select at least one community",
+      "addSuccess": "Community added successfully",
+      "addError": "Failed to add community"
+    },
+    "deleteAStaffCommunity": {
+      "confirmOperation": "Confirm Your Operation",
+      "confirmDelete": "Are you sure you want to delete this community?",
+      "cancel": "Cancel",
+      "confirm": "Confirm Delete",
+      "deleteSuccess": "Community deleted successfully",
+      "deleteError": "Failed to delete community"
+    }
+  },
+  zh: {
+    aStaffDetailList: {
+      staffInfo: '员工信息',
+      back: '返回',
+      edit: '修改',
+      resetPwd: '重置密码',
+      staffId: '编号',
+      userName: '名称',
+      idCard: '身份证',
+      tel: '手机',
+      sex: '性别',
+      male: '男',
+      female: '女',
+      address: '住址',
+      orgPrivilege: '组织权限',
+      community: '小区',
+      loadError: '加载员工信息失败',
+      resetSuccess: '密码重置成功',
+      editSuccess: '员工信息修改成功',
+      addCommunitySuccess: '小区关联成功',
+      deleteCommunitySuccess: '小区删除成功'
+    },
+    "staffDetailOrgPrivilege": {
+      "relatedOrg": "关联组织",
+      "org": "组织",
+      "position": "岗位",
+      "relatedRole": "关联角色",
+      "staffPrivilege": "员工权限",
+      "loadOrgsError": "加载组织失败",
+      "loadRolesError": "加载角色失败",
+      "loadPrivilegesError": "加载权限失败"
+    },
+    "aStaffDetailCommunitys": {
+      "relateCommunity": "关联小区",
+      "staffName": "员工名称",
+      "staffId": "员工编号",
+      "communityId": "小区编号",
+      "communityName": "小区名称",
+      "operation": "操作",
+      "delete": "删除",
+      "loadError": "加载小区数据失败"
+    },
+    "addAStaffCommunity": {
+      "community": "小区",
+      "searchPlaceholder": "输入小区名称",
+      "communityId": "小区ID",
+      "communityName": "小区名称",
+      "communityAddress": "小区地址",
+      "cancel": "取消",
+      "submit": "提交",
+      "loadError": "加载小区数据失败",
+      "selectCommunity": "请至少选择一个小区",
+      "addSuccess": "小区关联成功",
+      "addError": "小区关联失败"
+    },
+    "deleteAStaffCommunity": {
+      "confirmOperation": "请确认您的操作",
+      "confirmDelete": "确定删除隶属小区？",
+      "cancel": "点错了",
+      "confirm": "确认删除",
+      "deleteSuccess": "小区删除成功",
+      "deleteError": "小区删除失败"
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/staff/aStaffDetailList.vue b/src/views/staff/aStaffDetailList.vue
new file mode 100644
index 0000000..7f4fbcc
--- /dev/null
+++ b/src/views/staff/aStaffDetailList.vue
@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <div class="flex justify-between">
+        <div class="text-title">{{ $t('aStaffDetailList.staffInfo') }}</div>
+        <div>
+          <el-button type="primary" size="small" style="margin-left:10px" @click="goBack">
+            <i class="el-icon-close"></i>{{ $t('aStaffDetailList.back') }}
+          </el-button>
+          <el-button v-if="hasPrivilege('502022082992300002,502022101832220184')" type="primary" size="small"
+            style="margin-left:10px" @click="openEditStaffModel">
+            <i class="el-icon-edit"></i>{{ $t('aStaffDetailList.edit') }}
+          </el-button>
+          <el-button type="primary" size="small" style="margin-left:10px" @click="resetStaffPwd">
+            <i class="el-icon-refresh"></i>{{ $t('aStaffDetailList.resetPwd') }}
+          </el-button>
+        </div>
+      </div>
+
+      <div class="margin-top flex justify-start">
+        <div class="text-center vc-float-left" style="width: 150px;" v-if="staffDetailInfo.photo">
+          <img width="120px" height="140px" class="border-radius" :src="staffDetailInfo.photo" @error="errorLoadImg" />
+        </div>
+        <div class="text-center vc-float-left" style="width: 150px;" v-else>
+          <img width="120px" height="140px" class="border-radius" src="/img/noPhoto.jpg" />
+        </div>
+        <el-row style="min-height: 160px;width: 100%; " class="text-left">
+          <el-col :span="24">
+            <el-row class="margin-bottom margin-top">
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('aStaffDetailList.staffId') }}：</label>
+                  <label>{{ staffDetailInfo.staffId }}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('aStaffDetailList.userName') }}：</label>
+                  <label>{{ staffDetailInfo.userName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('aStaffDetailList.idCard') }}：</label>
+                  <label>{{ staffDetailInfo.idCard }}</label>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('aStaffDetailList.tel') }}：</label>
+                  <label>{{ staffDetailInfo.tel }}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('aStaffDetailList.sex') }}：</label>
+                  <label>{{ staffDetailInfo.sex == '0' ? $t('aStaffDetailList.male') : $t('aStaffDetailList.female')
+                  }}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="col-form-label">{{ $t('aStaffDetailList.address') }}：</label>
+                  <label>{{ staffDetailInfo.address }}</label>
+                </div>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+
+      <divider />
+
+      <div class="margin-top-sm">
+        <el-tabs v-model="staffDetailInfo.currentTab">
+          <el-tab-pane :label="$t('aStaffDetailList.orgPrivilege')" name="staffDetailOrgPrivilege"></el-tab-pane>
+          <el-tab-pane :label="$t('aStaffDetailList.community')" name="aStaffDetailCommunitys"></el-tab-pane>
+        </el-tabs>
+      </div>
+      <div v-if="staffDetailInfo.currentTab !== 'staffDetailOrgPrivilege'">
+        <a-staff-detail-communitys ref="communitys" :staff-id="staffDetailInfo.staffId" />
+      </div>
+    </el-card>
+
+    <div v-if="staffDetailInfo.currentTab === 'staffDetailOrgPrivilege'">
+      <staff-detail-org-privilege ref="orgPrivilege" :staff-id="staffDetailInfo.staffId" />
+    </div>
+
+
+    <reset-staff-pwd ref="resetPwd" @success="handleResetSuccess" />
+    <edit-staff ref="editStaff" @success="handleEditSuccess" />
+  </div>
+</template>
+
+<script>
+import { getStaffInfo } from '@/api/staff/aStaffDetailApi'
+import StaffDetailOrgPrivilege from '@/components/staff/staffDetailOrgPrivilege'
+import AStaffDetailCommunitys from '@/components/staff/aStaffDetailCommunitys'
+import ResetStaffPwd from '@/components/staff/resetStaffPwd'
+import EditStaff from '@/components/staff/editStaff'
+
+import divider from '@/components/system/divider'
+
+export default {
+  name: 'AStaffDetailList',
+  components: {
+    StaffDetailOrgPrivilege,
+    AStaffDetailCommunitys,
+    ResetStaffPwd,
+    EditStaff,
+    divider
+  },
+  data() {
+    return {
+      staffDetailInfo: {
+        staffId: '',
+        userName: '',
+        idCard: '',
+        tel: '',
+        sex: '',
+        address: '',
+        photo: '/img/noPhoto.jpg',
+        currentTab: 'staffDetailOrgPrivilege'
+      }
+    }
+  },
+  created() {
+    this.staffDetailInfo.staffId = this.$route.query.staffId
+    if (this.staffDetailInfo.staffId) {
+      this.loadStaffInfo()
+    }
+  },
+  methods: {
+    async loadStaffInfo() {
+      try {
+        const response = await getStaffInfo({
+          staffId: this.staffDetailInfo.staffId,
+          row: 1,
+          page: 1
+        })
+        Object.assign(this.staffDetailInfo, response.staffs[0])
+        //this.staffDetailInfo.photo = `/callComponent/download/getFile/fileByObjId?objId=${this.staffDetailInfo.staffId}&communityId=${this.$store.getters.communityId}&fileTypeCd=12000&time=${new Date().getTime()}`
+      } catch (error) {
+        this.$message.error(this.$t('aStaffDetailList.loadError'))
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    openEditStaffModel() {
+      this.$refs.editStaff.open(this.staffDetailInfo)
+    },
+    resetStaffPwd() {
+      this.$refs.resetPwd.open({
+        userId: this.staffDetailInfo.staffId,
+        name: this.staffDetailInfo.userName
+      })
+    },
+    errorLoadImg() {
+      this.staffDetailInfo.photo = "/img/noPhoto.jpg"
+    },
+    handleResetSuccess() {
+      this.$message.success(this.$t('aStaffDetailList.resetSuccess'))
+    },
+    handleEditSuccess() {
+      this.loadStaffInfo()
+      this.$message.success(this.$t('aStaffDetailList.editSuccess'))
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.text-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.vc-float-left {
+  float: left;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.vc-line-primary {
+  height: 1px;
+  background-color: #409EFF;
+  margin: 20px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/staff/aStaffLang.js b/src/views/staff/aStaffLang.js
new file mode 100644
index 0000000..723a644
--- /dev/null
+++ b/src/views/staff/aStaffLang.js
@@ -0,0 +1,86 @@
+export const messages = {
+  en: {
+    staff: {
+      searchConditions: 'Search Conditions',
+      staffIdPlaceholder: 'Enter Staff ID',
+      staffNamePlaceholder: 'Enter Staff Name',
+      phonePlaceholder: 'Enter Phone Number',
+      search: 'Search',
+      staffInfo: 'Staff Information',
+      add: 'Add',
+      staffId: 'Staff ID',
+      name: 'Name',
+      phone: 'Phone',
+      relatedOrg: 'Related Organization',
+      position: 'Position',
+      idCard: 'ID Card',
+      address: 'Address',
+      gender: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      operations: 'Operations',
+      edit: 'Edit',
+      resetPwd: 'Reset Password',
+      delete: 'Delete',
+      details: 'Details',
+      tip: 'Tip: The default password for new employees is 123456. After assigning roles and permissions to the community and associating roles with employees, they can log in.',
+      confirmOperation: 'Please confirm your operation',
+      confirmReset: 'Are you sure to reset the password?',
+      confirmResetPassword: 'Are you sure to reset the password?',
+      cancel: 'Cancel',
+      confirmResetBtn: 'Confirm Reset',
+      editStaff: 'Edit Staff',
+      requiredName: 'Required, enter staff name',
+      requiredPosition: 'Required, select position',
+      optionalIdCard: 'Optional, enter ID card',
+      requiredPhone: 'Required, enter phone number',
+      requiredGender: 'Required, select gender',
+      requiredAddress: 'Required, enter address',
+      uploadPhoto: 'Upload Photo',
+      confirmDelete: 'Are you sure to delete? Before deleting an employee, please confirm that the employee has completed the relevant approval process. After deletion, the relevant process cannot continue. Please operate with caution!',
+      confirmDeleteBtn: 'Confirm Delete'
+    }
+  },
+  zh: {
+    staff: {
+      searchConditions: '查询条件',
+      staffIdPlaceholder: '请输入员工ID',
+      staffNamePlaceholder: '请输入员工名称',
+      phonePlaceholder: '请输入手机号',
+      search: '查询',
+      staffInfo: '员工信息',
+      add: '添加',
+      staffId: '员工编号',
+      name: '名称',
+      phone: '手机号',
+      relatedOrg: '关联组织',
+      position: '岗位',
+      idCard: '身份证',
+      address: '地址',
+      gender: '性别',
+      male: '男',
+      female: '女',
+      operations: '操作',
+      edit: '修改',
+      resetPwd: '重置密码',
+      delete: '删除',
+      details: '详情',
+      tip: '温馨提示：新添加员工默认密码为123456，角色权限分配小区并且角色关联员工后可登录',
+      confirmOperation: '请确认您的操作',
+      confirmReset: '确认是否重置密码',
+      confirmResetPassword: '确认是否重置密码',
+      cancel: '点错了',
+      confirmResetBtn: '确认重置',
+      editStaff: '修改员工',
+      requiredName: '必填，请填写员工名称',
+      requiredPosition: '必填，请选择岗位',
+      optionalIdCard: '可选，请填写身份证',
+      requiredPhone: '必填，请填写手机号码',
+      requiredGender: '必填，请选择员工性别',
+      requiredAddress: '必填，请填写家庭住址',
+      uploadPhoto: '上传照片',
+      confirmDelete: '确认是否删除，删除员工前请确认员工已完成相关审批流程，删除后相关流程将无法继续进行，请慎重操作！',
+      confirmDeleteBtn: '确认删除'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/staff/aStaffList.vue b/src/views/staff/aStaffList.vue
new file mode 100644
index 0000000..c6b2ea1
--- /dev/null
+++ b/src/views/staff/aStaffList.vue
@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <el-card class="box-card margin-bottom">
+      <div slot="header" class="clearfix flex justify-between">
+        <span>{{ $t('staff.searchConditions') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input :placeholder="$t('staff.staffIdPlaceholder')" v-model="searchConditions.staffId" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input :placeholder="$t('staff.staffNamePlaceholder')" v-model="searchConditions.name" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input :placeholder="$t('staff.phonePlaceholder')" v-model="searchConditions.tel" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="queryStaff">
+            {{ $t('staff.search') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <el-card class="box-card">
+      <div slot="header" class="clearfix  flex justify-between">
+        <span>{{ $t('staff.staffInfo') }}</span>
+        <el-button v-if="hasPrivilege(['502022082992310001', '502022101889270183'])" type="primary" size="small"
+          class="float-right" @click="openAddStaffPage">
+          {{ $t('staff.add') }}
+        </el-button>
+      </div>
+
+      <el-table :data="staffList" border style="width: 100%">
+        <el-table-column prop="userId" :label="$t('staff.staffId')" align="center" />
+        <el-table-column prop="name" :label="$t('staff.name')" align="center" />
+        <el-table-column prop="tel" :label="$t('staff.phone')" align="center" />
+        <el-table-column prop="orgName" :label="$t('staff.relatedOrg')" align="center" />
+        <el-table-column prop="relCdName" :label="$t('staff.position')" align="center" />
+        <el-table-column prop="idCard" :label="$t('staff.idCard')" align="center" />
+        <el-table-column prop="address" :label="$t('staff.address')" align="center" />
+        <el-table-column :label="$t('staff.gender')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.sex === 0 ? $t('staff.male') : $t('staff.female') }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('staff.operations')" align="center" width="300">
+          <template slot-scope="scope">
+            <el-button v-if="hasPrivilege(['502022082992300002', '502022101832220184'])" size="mini"
+              @click="openEditStaff(scope.row)">
+              {{ $t('staff.edit') }}
+            </el-button>
+            <el-button size="mini" @click="openResetPwd(scope.row)">
+              {{ $t('staff.resetPwd') }}
+            </el-button>
+            <el-button
+              v-if="scope.row.relCd !== '600311000001' && hasPrivilege(['502022082920350003', '502022101887680185'])"
+              size="mini" type="danger" @click="openDeleteStaff(scope.row)">
+              {{ $t('staff.delete') }}
+            </el-button>
+            <el-button size="mini" type="info" @click="openStaffDetail(scope.row)">
+              {{ $t('staff.details') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="16">
+          <div class="tip-text">{{ $t('staff.tip') }}</div>
+        </el-col>
+        <el-col :span="8" class="text-right">
+          <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+            :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+            @current-change="handlePageChange" />
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <reset-staff-pwd ref="resetPwdDialog" @success="queryStaff" />
+    <edit-staff ref="editStaffDialog" @success="queryStaff" />
+    <delete-staff ref="deleteStaffDialog" @success="queryStaff" />
+  </div>
+</template>
+
+<script>
+import { queryStaffInfos } from '@/api/staff/aStaffApi'
+import ResetStaffPwd from '@/components/staff/resetStaffPwd'
+import EditStaff from '@/components/staff/editStaff'
+import DeleteStaff from '@/components/staff/deleteStaff'
+import { getDict } from '@/api/community/communityApi'
+
+export default {
+  name: 'AStaffList',
+  components: {
+    ResetStaffPwd,
+    EditStaff,
+    DeleteStaff
+  },
+  data() {
+    return {
+      searchConditions: {
+        staffId: '',
+        name: '',
+        tel: ''
+      },
+      staffList: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      relCds: []
+    }
+  },
+  created() {
+    this.getDictData()
+    this.queryStaff()
+  },
+  methods: {
+    async getDictData() {
+      try {
+        const res = await getDict('u_org_staff_rel', 'rel_cd')
+        if (res.code === 0) {
+          this.relCds = res.data
+        }
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    async queryStaff() {
+      try {
+        const params = {
+          ...this.searchConditions,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+
+        const res = await queryStaffInfos(params)
+        console.log(res)
+
+        this.staffList = res.staffs.map(staff => {
+          const relCdItem = this.relCds.find(item => item.statusCd === staff.relCd)
+          return {
+            ...staff,
+            relCdName: relCdItem ? relCdItem.name : ''
+          }
+        })
+        this.pagination.total = res.data.total
+
+      } catch (error) {
+        console.error('查询员工信息失败:', error)
+      }
+    },
+    openResetPwd(staff) {
+      this.$refs.resetPwdDialog.open(staff)
+    },
+    openEditStaff(staff) {
+      this.$refs.editStaffDialog.open(staff)
+    },
+    openDeleteStaff(staff) {
+      this.$refs.deleteStaffDialog.open(staff)
+    },
+    openStaffDetail(staff) {
+      this.$router.push(`/views/staff/aStaffDetail?staffId=${staff.userId}`)
+    },
+    openAddStaffPage() {
+      this.$router.push('/views/staff/addStaff')
+    },
+    handleSizeChange(size) {
+      this.pagination.size = size
+      this.queryStaff()
+    },
+    handlePageChange(page) {
+      this.pagination.current = page
+      this.queryStaff()
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  margin-bottom: 20px;
+}
+
+.float-right {
+  float: right;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-bottom {
+  margin-bottom: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.tip-text {
+  color: #999;
+  font-size: 12px;
+  padding: 10px 0;
+}
+</style>
\ No newline at end of file