feature-org-not-admin-can-delete-user

Jiuling.Lei · jiuling · commit 8fd1420b4290 · 2025-12-19T11:42:09.000+08:00
diff --git a/frontend/src/components/organizations/LeaveOrganizationDialog.vue b/frontend/src/components/organizations/LeaveOrganizationDialog.vue
@@ -0,0 +1,150 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    width="400px"
+    :close-on-click-modal="!isLoading"
+    :close-on-press-escape="!isLoading"
+    :show-close="false"
+    @update:model-value="handleDialogClose"
+    class="leave-org-dialog"
+  >
+    <div class="p-[30px]">
+      <!-- Header with icon and close button -->
+      <div class="flex items-start justify-between mb-6">
+        <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16 18H22M12 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5Z" stroke="#D92D20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <button 
+          @click="handleCancel"
+          :disabled="isLoading"
+          class="text-gray-400 hover:text-gray-600 transition-colors"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="mb-8">
+        <h3 class="text-lg font-semibold text-gray-900 mb-3">{{ $t('organization.leaveOrgTitle') }}</h3>
+        <p class="text-gray-600 leading-relaxed">{{ $t('organization.leaveOrgContent') }}</p>
+      </div>
+      
+      <!-- Footer buttons -->
+      <div class="flex gap-3">
+        <button 
+          @click="handleCancel"
+          :disabled="isLoading"
+          class="flex-1 h-[44px] px-[10px] bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors font-medium"
+        >
+          {{ $t('organization.cancel') }}
+        </button>
+        <button 
+          @click="handleLeave"
+          :disabled="isLoading"
+          class="flex-1 h-[44px] px-[10px] text-white rounded-md font-medium transition-colors flex items-center justify-center"
+          :class="isLoading ? 'bg-gray-400 cursor-not-allowed' : 'bg-[#D92D20] hover:bg-[#B91C1C]'"
+        >
+          <svg v-if="isLoading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          {{ $t('organization.leaveOrgButton') }}
+        </button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ElMessage } from 'element-plus'
+import useFetchApi from '../../packs/useFetchApi'
+import useUserStore from '../../stores/UserStore'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  organizationName: {
+    type: String,
+    required: true
+  },
+  userRole: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'success'])
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const isLoading = ref(false)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const handleDialogClose = (value) => {
+  if (!isLoading.value) {
+    emit('update:modelValue', value)
+  }
+}
+
+const handleCancel = () => {
+  if (!isLoading.value) {
+    emit('update:modelValue', false)
+  }
+}
+
+const handleLeave = async () => {
+  if (isLoading.value) return
+  
+  isLoading.value = true
+  
+  try {
+    const { response, error } = await useFetchApi(`/organization/${props.organizationName}/members/${userStore.username}`, { body: JSON.stringify({role: props.userRole}) })
+      .delete()
+      .json()
+    
+    if (error.value) {
+      ElMessage.error(t('organization.leaveOrgFailure'))
+    } else if (response.value.ok) {
+      // Update organizations in store before redirect
+      await userStore.fetchOrgs()
+      ElMessage.success(t('organization.leaveOrgSuccess'))
+      
+      // Redirect to profile page
+      window.location.href = `/profile/${userStore.username}`
+    } else {
+      ElMessage.error(t('organization.leaveOrgFailure'))
+    }
+  } catch (error) {
+    console.error('Leave organization error:', error)
+    ElMessage.error(t('organization.leaveOrgNetworkError'))
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<style>
+.el-dialog.leave-org-dialog {
+  padding: 0 !important;
+}
+
+.el-dialog.leave-org-dialog .el-dialog__header {
+  padding: 0 !important;
+}
+
+.el-dialog.leave-org-dialog .el-dialog__body {
+  padding: 0 !important;
+}
+</style>
diff --git a/frontend/src/components/organizations/OrganizationDetail.vue b/frontend/src/components/organizations/OrganizationDetail.vue
@@ -90,16 +90,31 @@
           />
 
           <div class="mt-[16px] flex flex-wrap gap-[8px]">
-            <a v-for="user in membersList" :href="`/profile/${user.username}`">
-              <el-tooltip placement="bottom" effect="light">
-                <div class="flex flex-col items-center">
-                  <img :src="user.avatar || 'https://cdn.casbin.org/img/casbin.svg'" class="h-[52px] w-[52px] rounded-[50%] border p-[2px]" />
-                </div>
-                <template #content>
-                  <span class="text-xs py-[8px] px-[12px]">{{ user.nickname || user.name }} ( {{ user.role }} )</span>
-                </template>
-              </el-tooltip>
-            </a>
+            <div v-for="user in membersList" class="flex flex-col items-center gap-2">
+              <a :href="`/profile/${user.username}`">
+                <el-tooltip placement="bottom" effect="light">
+                  <div class="flex flex-col items-center">
+                    <img :src="user.avatar || 'https://cdn.casbin.org/img/casbin.svg'" class="h-[52px] w-[52px] rounded-[50%] border p-[2px]" />
+                  </div>
+                  <template #content>
+                    <span class="text-xs py-[8px] px-[12px]">{{ user.nickname || user.name }} ( {{ user.role }} )</span>
+                  </template>
+                </el-tooltip>
+              </a>
+            </div>
+          </div>
+
+          <!-- Leave Organization Button - only show for current user if they are a member and not admin/super_admin -->
+          <div v-if="userStore.isLoggedIn && role && role !== 'admin' && role !== 'super_admin'" class="mt-4">
+            <button 
+              @click="showLeaveOrgDialog = true"
+              class="px-2 py-1.5 text-sm text-black bg-white hover:bg-gray-200 rounded-md border border-gray-300 transition-colors duration-200 flex items-center gap-2"
+            >
+              <svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.25 8L10.75 10.5M10.75 8L8.25 10.5M7.75 1.64538C8.48296 1.94207 9 2.66066 9 3.5C9 4.33934 8.48296 5.05793 7.75 5.35462M6 7.5H4C3.06812 7.5 2.60218 7.5 2.23463 7.65224C1.74458 7.85523 1.35523 8.24458 1.15224 8.73463C1 9.10218 1 9.56812 1 10.5M6.75 3.5C6.75 4.60457 5.85457 5.5 4.75 5.5C3.64543 5.5 2.75 4.60457 2.75 3.5C2.75 2.39543 3.64543 1.5 4.75 1.5C5.85457 1.5 6.75 2.39543 6.75 3.5Z" stroke="#344054" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              {{ $t('organization.leaveOrg') }}
+            </button>
           </div>
         </div>
         <div class="grow px-[20px] py-[36px] sm:py-0">
@@ -113,13 +128,22 @@
     :loading="isDataLoading" 
     :text="$t('organization.loading')" 
   />
+
+  <!-- Leave Organization Dialog -->
+  <LeaveOrganizationDialog
+    v-model="showLeaveOrgDialog"
+    :organization-name="organizationData.name"
+    :user-role="currentUserRoleFromMembers"
+    @success="handleLeaveSuccess"
+  />
 </template>
 
 <script setup>
-  import { ref, onMounted, watch } from 'vue'
+  import { ref, onMounted, watch, computed } from 'vue'
   import InviteMember from './InviteMember.vue'
   import ProfileRepoList from '../shared/ProfileRepoList.vue'
   import LoadingSpinner from '../shared/LoadingSpinner.vue'
+  import LeaveOrganizationDialog from './LeaveOrganizationDialog.vue'
   import useFetchApi from '../../packs/useFetchApi'
   import { ElMessage } from 'element-plus'
   import useUserStore from '../../stores/UserStore'
@@ -139,11 +163,19 @@
   const verifiedStatus = ref('')
   const verifiedReason = ref('')
   const isDataLoading = ref(false)
+  const showLeaveOrgDialog = ref(false)
 
   const userStore = useUserStore()
 
   const role = ref('')
 
+  // 计算当前用户在成员列表中的角色
+  const currentUserRoleFromMembers = computed(() => {
+    if (!userStore.username || !membersList.value.length) return ''
+    const currentUser = membersList.value.find(user => user.username === userStore.username)
+    return currentUser?.role || ''
+  })
+
   const fetchOrgDetail = async () => {
     if (isDataLoading.value) {
       return false
@@ -198,6 +230,25 @@
     }
   }
 
+  const getOrganizationVerify = async () => {
+    try {
+      const { data, error } = await useFetchApi(`/organization/verify/${props.name}`).get().json()
+      if (error.value) {
+        ElMessage.warning(error.value.msg)
+      }
+      
+      verifiedStatus.value = data.value?.data?.status
+      verifiedReason.value = data.value?.data?.reason
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const handleLeaveSuccess = () => {
+    // Refresh member list after successful leave
+    fetchOrgMemberList()
+  }
+
   watch(
     () => userStore.isLoggedIn,
     () => {
diff --git a/frontend/src/locales/en_js/organization.js b/frontend/src/locales/en_js/organization.js
@@ -65,5 +65,13 @@ export const organization = {
     prompt: "New Prompt",
     collection: "New Collection",
     mcp: "New MCP",
-  }
+  },
+  leaveOrg: "Leave Organization",
+  leaveOrgTitle: "Leave this Organization?",
+  leaveOrgContent: "After leaving, you will lose access to all resources, projects, and permissions under this organization. To rejoin, please contact an organization admin to invite you again.",
+  leaveOrgButton: "Leave Organization",
+  cancel: "Cancel",
+  leaveOrgSuccess: "You have successfully left the organization.",
+  leaveOrgFailure: "Failed to leave organization, please try again later.",
+  leaveOrgNetworkError: "Network error, failed to leave, please try again later."
 }
diff --git a/frontend/src/locales/zh_js/organization.js b/frontend/src/locales/zh_js/organization.js
@@ -65,5 +65,13 @@ export const organization = {
     prompt: "新建提示词库",
     collection: "新建合集",
     mcp: "新建MCP",
-  }
+  },
+  leaveOrg: "退出组织",
+  leaveOrgTitle: "确认退出组织?",
+  leaveOrgContent: "离开后，你将无法再访问该组织的资源和协作内容。如果未来需要回到组织，请联系管理员重新添加。",
+  leaveOrgButton: "退出组织",
+  cancel: "取消",
+  leaveOrgSuccess: "你已成功退出该组织。",
+  leaveOrgFailure: "退出组织失败，请稍后重试。",
+  leaveOrgNetworkError: "网络异常，退出失败，请稍后重试。"
 }
diff --git a/frontend/src/stores/UserStore.js b/frontend/src/stores/UserStore.js
@@ -63,6 +63,14 @@ const useUserStore = defineStore('User', () => {
     initialized.value = initializedData
   }
 
+  async function fetchOrgs() {
+    if (!username.value) return
+    const { data } = await useFetchApi(`/user/${username.value}`).json()
+    if (data.value) {
+      orgs.value = data.value.data?.orgs ? data.value.data?.orgs : []
+    }
+  }
+
   async function fetchUserInfo() {
     if (!uuid.value) return
     const { data, error } = await useFetchApi(`/user/${uuid.value}?type=uuid`).json()
@@ -99,6 +107,7 @@ const useUserStore = defineStore('User', () => {
     clearStore,
     updateInitalized,
     fetchUserInfo,
+    fetchOrgs,
     timestamp
   }
 }, {
