OptimusX
/
OneAuth
mirror of https://github.com/veypi/OneAuth.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 重构组织详情页UI和权限控制

Browse Source
v3
veypi 1 week ago
parent 178fa755d4
commit 800d7fd4fd
6 changed files with 884 additions and 322 deletions
Show Stats Download Patch File Download Diff File

2
agents.md
Unescape Escape View File

@ -12,9 +12,9 @@
```bash ```bash
//重置数据库 //重置数据库
go run cli/main.go db drop && go run cli/main.go db migrate go run cli/main.go db drop && go run cli/main.go db migrate
// 运行, 可以通过 http://localhost:4000/_api.json 查看接口列表
go run cli/main.go -p 4000 go run cli/main.go -p 4000
``` ```
可以通过 http://localhost:4000/_api.json 查看接口列表
## UI 界面开发指南 ## UI 界面开发指南

89
auth/auth.go
Unescape Escape View File

@ -214,11 +214,11 @@ func (a *appAuth) extractPermissions() []models.Permission {
func (a *appAuth) initRole(roleDef models.RoleDefinition) error { func (a *appAuth) initRole(roleDef models.RoleDefinition) error {
// 查找或创建系统角色 // 查找或创建系统角色
var role models.Role var role models.Role
err := cfg.DB().Where("code = ? AND org_id = ''", roleDef.Code).First(&role).Error err := cfg.DB().Where("code = ? AND org_id IS NULL", roleDef.Code).First(&role).Error
if err != nil { if err != nil {
// 创建新角色 // 创建新角色
role = models.Role{ role = models.Role{
OrgID: "", OrgID: nil,
Code: roleDef.Code, Code: roleDef.Code,
Name: roleDef.Name, Name: roleDef.Name,
Description: roleDef.Description, Description: roleDef.Description,
@ -426,13 +426,13 @@ func (a *appAuth) GrantRole(ctx context.Context, userID, orgID, roleCode string)
if orgID != "" { if orgID != "" {
query = query.Where("org_id = ?", orgID) query = query.Where("org_id = ?", orgID)
} else { } else {
query = query.Where("org_id = ''") query = query.Where("org_id IS NULL")
} }
if err := query.First(&role).Error; err != nil { if err := query.First(&role).Error; err != nil {
// 如果指定了 OrgID 但没找到，尝试查找全局角色 // 如果指定了 OrgID 但没找到，尝试查找全局角色
if orgID != "" { if orgID != "" {
query = cfg.DB().Where("code = ? AND org_id = ''", roleCode) query = cfg.DB().Where("code = ? AND org_id IS NULL", roleCode)
if err := query.First(&role).Error; err != nil { if err := query.First(&role).Error; err != nil {
return fmt.Errorf("role not found: %s", roleCode) return fmt.Errorf("role not found: %s", roleCode)
} }
@ -443,17 +443,26 @@ func (a *appAuth) GrantRole(ctx context.Context, userID, orgID, roleCode string)
// 检查是否已存在 // 检查是否已存在
var count int64 var count int64
cfg.DB().Model(&models.UserRole{}). roleQuery := cfg.DB().Model(&models.UserRole{}).
Where("user_id = ? AND org_id = ? AND role_id = ?", userID, orgID, role.ID). Where("user_id = ? AND role_id = ?", userID, role.ID)
Count(&count) if orgID != "" {
roleQuery = roleQuery.Where("org_id = ?", orgID)
} else {
roleQuery = roleQuery.Where("org_id IS NULL")
}
roleQuery.Count(&count)
if count > 0 { if count > 0 {
return nil // 已存在 return nil // 已存在
} }
var orgIDPtr *string
if orgID != "" {
orgIDPtr = &orgID
}
userRole := models.UserRole{ userRole := models.UserRole{
UserID: userID, UserID: userID,
OrgID: orgID, OrgID: orgIDPtr,
RoleID: role.ID, RoleID: role.ID,
ExpireAt: nil, // 默认不过期 ExpireAt: nil, // 默认不过期
} }
@ -472,13 +481,13 @@ func (a *appAuth) RevokeRole(ctx context.Context, userID, orgID, roleCode string
if orgID != "" { if orgID != "" {
query = query.Where("org_id = ?", orgID) query = query.Where("org_id = ?", orgID)
} else { } else {
query = query.Where("org_id = ''") query = query.Where("org_id IS NULL")
} }
if err := query.First(&role).Error; err != nil { if err := query.First(&role).Error; err != nil {
// 如果没找到，尝试查找全局角色 // 如果没找到，尝试查找全局角色
if orgID != "" { if orgID != "" {
if err := cfg.DB().Where("code = ? AND org_id = ''", roleCode).First(&role).Error; err != nil { if err := cfg.DB().Where("code = ? AND org_id IS NULL", roleCode).First(&role).Error; err != nil {
return nil // 角色不存在，无需撤销 return nil // 角色不存在，无需撤销
} }
} else { } else {
@ -486,8 +495,14 @@ func (a *appAuth) RevokeRole(ctx context.Context, userID, orgID, roleCode string
} }
} }
if err := cfg.DB().Where("user_id = ? AND org_id = ? AND role_id = ?", userID, orgID, role.ID). // 构建删除条件
Delete(&models.UserRole{}).Error; err != nil { deleteQuery := cfg.DB().Where("user_id = ? AND role_id = ?", userID, role.ID)
if orgID != "" {
deleteQuery = deleteQuery.Where("org_id = ?", orgID)
} else {
deleteQuery = deleteQuery.Where("org_id IS NULL")
}
if err := deleteQuery.Delete(&models.UserRole{}).Error; err != nil {
return err return err
} }
incUserPermVersion(userID) incUserPermVersion(userID)
@ -506,18 +521,27 @@ func (a *appAuth) GrantResourcePerm(ctx context.Context, userID, orgID, permissi
// 检查是否已存在 // 检查是否已存在
var existing models.UserPermission var existing models.UserPermission
err := cfg.DB().Where("user_id = ? AND org_id = ? AND permission_id = ? AND resource_id = ?", query := cfg.DB().Where("user_id = ? AND permission_id = ? AND resource_id = ?",
userID, orgID, permissionID, resourceID). userID, permissionID, resourceID)
First(&existing).Error if orgID != "" {
query = query.Where("org_id = ?", orgID)
} else {
query = query.Where("org_id IS NULL")
}
err := query.First(&existing).Error
if err == nil { if err == nil {
// 已存在 // 已存在
return nil return nil
} }
var orgIDPtr *string
if orgID != "" {
orgIDPtr = &orgID
}
userPerm := models.UserPermission{ userPerm := models.UserPermission{
UserID: userID, UserID: userID,
OrgID: orgID, OrgID: orgIDPtr,
PermissionID: permissionID, PermissionID: permissionID,
ResourceID: resourceID, ResourceID: resourceID,
ExpireAt: nil, // 默认不过期 ExpireAt: nil, // 默认不过期
@ -535,9 +559,14 @@ func (a *appAuth) RevokeResourcePerm(ctx context.Context, userID, orgID, permiss
if strings.Count(permissionID, ":") == 1 { if strings.Count(permissionID, ":") == 1 {
permissionID = fmt.Sprintf("%s:%s", a.appKey, permissionID) permissionID = fmt.Sprintf("%s:%s", a.appKey, permissionID)
} }
if err := cfg.DB().Where("user_id = ? AND org_id = ? AND permission_id = ? AND resource_id = ?", query := cfg.DB().Where("user_id = ? AND permission_id = ? AND resource_id = ?",
userID, orgID, permissionID, resourceID). userID, permissionID, resourceID)
Delete(&models.UserPermission{}).Error; err != nil { if orgID != "" {
query = query.Where("org_id = ?", orgID)
} else {
query = query.Where("org_id IS NULL")
}
if err := query.Delete(&models.UserPermission{}).Error; err != nil {
return err return err
} }
incUserPermVersion(userID) incUserPermVersion(userID)
@ -546,14 +575,24 @@ func (a *appAuth) RevokeResourcePerm(ctx context.Context, userID, orgID, permiss
func (a *appAuth) RevokeAll(ctx context.Context, userID, orgID string) error { func (a *appAuth) RevokeAll(ctx context.Context, userID, orgID string) error {
// 删除用户角色 // 删除用户角色
if err := cfg.DB().Where("user_id = ? AND org_id = ?", userID, orgID). roleQuery := cfg.DB().Where("user_id = ?", userID)
Delete(&models.UserRole{}).Error; err != nil { if orgID != "" {
roleQuery = roleQuery.Where("org_id = ?", orgID)
} else {
roleQuery = roleQuery.Where("org_id IS NULL")
}
if err := roleQuery.Delete(&models.UserRole{}).Error; err != nil {
return err return err
} }
// 删除用户特定权限 // 删除用户特定权限
if err := cfg.DB().Where("user_id = ? AND org_id = ?", userID, orgID). permQuery := cfg.DB().Where("user_id = ?", userID)
Delete(&models.UserPermission{}).Error; err != nil { if orgID != "" {
permQuery = permQuery.Where("org_id = ?", orgID)
} else {
permQuery = permQuery.Where("org_id IS NULL")
}
if err := permQuery.Delete(&models.UserPermission{}).Error; err != nil {
return err return err
} }
@ -602,9 +641,9 @@ func (a *appAuth) checkPermissionDB(ctx context.Context, userID, orgID, permissi
Where("user_id = ? AND (expire_at IS NULL OR expire_at > ?)", userID, time.Now()) Where("user_id = ? AND (expire_at IS NULL OR expire_at > ?)", userID, time.Now())
if orgID != "" { if orgID != "" {
roleQuery = roleQuery.Where("org_id = ? OR org_id = ''", orgID) roleQuery = roleQuery.Where("org_id = ? OR org_id IS NULL", orgID)
} else { } else {
roleQuery = roleQuery.Where("org_id = ''") roleQuery = roleQuery.Where("org_id IS NULL")
} }
if err := roleQuery.Pluck("role_id", &roleIDs).Error; err != nil { if err := roleQuery.Pluck("role_id", &roleIDs).Error; err != nil {

6
models/auth.go
Unescape Escape View File

@ -38,7 +38,7 @@ func (Permission) TableName() string {
// Role 角色表（不关联 app，可跨应用） // Role 角色表（不关联 app，可跨应用）
type Role struct { type Role struct {
vigo.Model vigo.Model
OrgID string `json:"org_id" gorm:"index;size:36" desc:"组织ID，空=系统预设"` OrgID *string `json:"org_id" gorm:"index;size:36" desc:"组织ID，空=系统预设"`
Code string `json:"code" gorm:"index;size:50" desc:"角色代码"` Code string `json:"code" gorm:"index;size:50" desc:"角色代码"`
Name string `json:"name" desc:"角色名称"` Name string `json:"name" desc:"角色名称"`
Description string `json:"description" desc:"角色描述"` Description string `json:"description" desc:"角色描述"`
@ -73,7 +73,7 @@ func (RolePermission) TableName() string {
type UserRole struct { type UserRole struct {
vigo.Model vigo.Model
UserID string `json:"user_id" gorm:"index;size:36" desc:"用户ID"` UserID string `json:"user_id" gorm:"index;size:36" desc:"用户ID"`
OrgID string `json:"org_id" gorm:"index;size:36" desc:"组织ID"` OrgID *string `json:"org_id" gorm:"index;size:36" desc:"组织ID"`
RoleID string `json:"role_id" gorm:"index;size:36" desc:"角色ID"` RoleID string `json:"role_id" gorm:"index;size:36" desc:"角色ID"`
ExpireAt *time.Time `json:"expire_at" desc:"过期时间（可选）"` ExpireAt *time.Time `json:"expire_at" desc:"过期时间（可选）"`
@ -91,7 +91,7 @@ func (UserRole) TableName() string {
type UserPermission struct { type UserPermission struct {
vigo.Model vigo.Model
UserID string `json:"user_id" gorm:"index;size:36" desc:"用户ID"` UserID string `json:"user_id" gorm:"index;size:36" desc:"用户ID"`
OrgID string `json:"org_id" gorm:"index;size:36" desc:"组织ID"` OrgID *string `json:"org_id" gorm:"index;size:36" desc:"组织ID"`
PermissionID string `json:"permission_id" gorm:"index;size:100" desc:"权限ID"` PermissionID string `json:"permission_id" gorm:"index;size:100" desc:"权限ID"`
ResourceID string `json:"resource_id" gorm:"index;size:100" desc:"具体资源ID，* 表示所有"` ResourceID string `json:"resource_id" gorm:"index;size:100" desc:"具体资源ID，* 表示所有"`
ExpireAt *time.Time `json:"expire_at" desc:"过期时间（可选）"` ExpireAt *time.Time `json:"expire_at" desc:"过期时间（可选）"`

6
models/oauth.go
Unescape Escape View File

@ -22,7 +22,7 @@ type OAuthClient struct {
RedirectURIs string `json:"redirect_uris" gorm:"type:text"` // JSON数组 RedirectURIs string `json:"redirect_uris" gorm:"type:text"` // JSON数组
AllowedScopes string `json:"allowed_scopes" gorm:"size:500"` // 空格分隔 AllowedScopes string `json:"allowed_scopes" gorm:"size:500"` // 空格分隔
OwnerID string `json:"owner_id" gorm:"not null"` OwnerID string `json:"owner_id" gorm:"not null"`
OrgID string `json:"org_id" gorm:"index"` OrgID *string `json:"org_id" gorm:"index"`
Status int `json:"status" gorm:"default:1"` Status int `json:"status" gorm:"default:1"`
// 外键关联 // 外键关联
@ -40,7 +40,7 @@ type OAuthAuthorizationCode struct {
Code string `json:"code" gorm:"uniqueIndex;size:100;not null"` Code string `json:"code" gorm:"uniqueIndex;size:100;not null"`
ClientID string `json:"client_id" gorm:"index;not null"` ClientID string `json:"client_id" gorm:"index;not null"`
UserID string `json:"user_id" gorm:"index;not null"` UserID string `json:"user_id" gorm:"index;not null"`
OrgID string `json:"org_id" gorm:"index"` OrgID *string `json:"org_id" gorm:"index"`
RedirectURI string `json:"redirect_uri" gorm:"size:500"` RedirectURI string `json:"redirect_uri" gorm:"size:500"`
Scope string `json:"scope" gorm:"size:200"` Scope string `json:"scope" gorm:"size:200"`
CodeChallenge string `json:"-" gorm:"size:128"` CodeChallenge string `json:"-" gorm:"size:128"`
@ -63,7 +63,7 @@ type OAuthToken struct {
vigo.Model vigo.Model
ClientID string `json:"client_id" gorm:"index;not null"` ClientID string `json:"client_id" gorm:"index;not null"`
UserID string `json:"user_id" gorm:"index;not null"` UserID string `json:"user_id" gorm:"index;not null"`
OrgID string `json:"org_id" gorm:"index"` OrgID *string `json:"org_id" gorm:"index"`
AccessToken string `json:"-" gorm:"uniqueIndex;size:255;not null"` AccessToken string `json:"-" gorm:"uniqueIndex;size:255;not null"`
RefreshToken string `json:"-" gorm:"uniqueIndex;size:255"` RefreshToken string `json:"-" gorm:"uniqueIndex;size:255"`
TokenType string `json:"token_type" gorm:"size:20;default:'Bearer'"` TokenType string `json:"token_type" gorm:"size:20;default:'Bearer'"`

390
ui/page/sys/org/detail.html
Unescape Escape View File

@ -1,132 +1,364 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="description" content="Org Detail"> <meta name="description" content="Org Detail">
<title>{{ $t('org.detail') }}</title> <title>{{ org ? org.name : ($t('org.detail') || 'Organization Detail') }}</title>
<style> <style>
body {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.page-header { .page-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; flex-wrap: wrap;
gap: var(--spacing-md);
} }
.section {
background: #fff; .header-left {
padding: 20px; display: flex;
align-items: center;
gap: var(--spacing-md);
}
.btn-back {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--bg-color-tertiary);
color: var(--text-color);
border: 1px solid var(--border-color);
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-back:hover {
background: var(--border-color);
}
.header-actions {
display: flex;
gap: var(--spacing-sm);
}
.section {
background: var(--bg-color-secondary);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
margin-bottom: 20px; border: 1px solid var(--border-color);
} }
.section-title { .section-title {
font-size: 18px; font-size: var(--font-size-lg);
font-weight: bold; font-weight: 600;
margin-bottom: 15px; margin-bottom: var(--spacing-md);
color: var(--text-color); color: var(--text-color);
display: flex;
align-items: center;
gap: var(--spacing-sm);
} }
.info-grid { .info-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px; gap: var(--spacing-lg);
} }
.info-item { .info-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: var(--spacing-xs);
} }
.info-label { .info-label {
font-size: 14px; font-size: var(--font-size-sm);
color: var(--text-color-secondary); color: var(--text-color-secondary);
} }
.info-value { .info-value {
font-size: 16px; font-size: var(--font-size-md);
font-weight: 500; font-weight: 500;
color: var(--text-color);
} }
.btn-danger {
background-color: var(--color-danger); .org-icon-large {
width: 64px;
height: 64px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
display: flex;
align-items: center;
justify-content: center;
color: white; color: white;
padding: 8px 16px; font-size: 28px;
border-radius: var(--radius-md); font-weight: bold;
cursor: pointer;
border: none;
} }
.btn-edit {
background-color: var(--color-info); .org-header-info {
color: white; display: flex;
padding: 8px 16px; align-items: center;
border-radius: var(--radius-md); gap: var(--spacing-lg);
cursor: pointer; margin-bottom: var(--spacing-lg);
border: none; }
.org-header-text {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.org-header-name {
font-size: var(--font-size-2xl);
font-weight: 600;
color: var(--text-color);
} }
.org-header-desc {
font-size: var(--font-size-md);
color: var(--text-color-secondary);
}
/* Members Table */
.members-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-md);
}
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
th, td { th, td {
text-align: left; text-align: left;
padding: 10px; padding: var(--spacing-sm) var(--spacing-md);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
th { th {
background-color: var(--bg-color-tertiary); background-color: var(--bg-color-tertiary);
font-weight: 600; font-weight: 600;
font-size: var(--font-size-sm);
color: var(--text-color-secondary);
}
td {
font-size: var(--font-size-md);
color: var(--text-color);
}
tr:hover td {
background-color: var(--bg-color-tertiary);
}
.role-badge {
display: inline-flex;
align-items: center;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 500;
}
.role-admin {
background-color: var(--color-primary);
color: var(--color-primary-text);
}
.role-member {
background-color: var(--bg-color-tertiary);
color: var(--text-color-secondary);
} }
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xl);
gap: var(--spacing-md);
color: var(--text-color-secondary);
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-lg);
gap: var(--spacing-sm);
color: var(--text-color-secondary);
text-align: center;
}
.empty-state i {
font-size: 48px;
color: var(--border-color);
}
</style> </style>
</head> </head>
<body> <body>
<!-- Loading State -->
<div class="loading-state" v-if="loading">
<div class="spinner"></div>
<span>{{ $t('common.loading') || 'Loading...' }}</span>
</div>
<template v:if="!loading && org">
<!-- Page Header -->
<div class="page-header"> <div class="page-header">
<h1>{{ org ? org.name : 'Loading...' }}</h1> <div class="header-left">
<div class="actions"> <button class="btn-back" @click="goBack" title="{{ $t('common.back') || 'Back' }}">
<button class="btn-edit" @click="editOrg">{{ $t('common.edit') }}</button> <i class="fas fa-arrow-left"></i>
<button class="btn-danger" @click="deleteOrg">{{ $t('common.delete') }}</button> </button>
<h1>{{ $t('org.detail') || 'Organization Detail' }}</h1>
</div>
<div class="header-actions">
<v-btn variant="outline" :click="openEditModal">
<i class="fas fa-edit"></i>
{{ $t('common.edit') || 'Edit' }}
</v-btn>
<v-btn color="danger" :click="deleteOrg">
<i class="fas fa-trash"></i>
{{ $t('common.delete') || 'Delete' }}
</v-btn>
</div> </div>
</div> </div>
<!-- Org Info Section -->
<div class="section"> <div class="section">
<div class="section-title">{{ $t('org.info') }}</div> <div class="org-header-info">
<div class="info-grid" v-if="org"> <div class="org-icon-large">{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</div>
<div class="org-header-text">
<div class="org-header-name">{{ org.name }}</div>
<div class="org-header-desc">{{ org.description || ($t('org.no_description') || 'No description') }}</div>
</div>
</div>
<div class="info-grid">
<div class="info-item"> <div class="info-item">
<span class="info-label">ID</span> <span class="info-label">ID</span>
<span class="info-value">{{ org.id }}</span> <span class="info-value">{{ org.id }}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">Name</span> <span class="info-label">{{ $t('org.created_at') || 'Created At' }}</span>
<span class="info-value">{{ org.name }}</span> <span class="info-value">{{ formatDate(org.created_at) }}</span>
</div> </div>
<div class="info-item"> <div class="info-item" v:if="org.updated_at">
<span class="info-label">Created At</span> <span class="info-label">{{ $t('org.updated_at') || 'Updated At' }}</span>
<span class="info-value">{{ new Date(org.created_at).toLocaleDateString() }}</span> <span class="info-value">{{ formatDate(org.updated_at) }}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Members Section -->
<div class="section"> <div class="section">
<div class="section-title">{{ $t('org.members') }}</div> <div class="members-header">
<table> <div class="section-title">
<i class="fas fa-users"></i>
{{ $t('org.members') || 'Members' }}
<span style="font-size: var(--font-size-sm); color: var(--text-color-tertiary);">({{ members.length }})</span>
</div>
</div>
<div class="empty-state" v:if="members.length === 0">
<i class="fas fa-user-slash"></i>
<p>{{ $t('org.no_members') || 'No members yet' }}</p>
</div>
<table v:if="members.length > 0">
<thead> <thead>
<tr> <tr>
<th>Username</th> <th>{{ $t('user.username') || 'Username' }}</th>
<th>Role</th> <th>{{ $t('user.email') || 'Email' }}</th>
<th>Actions</th> <th>{{ $t('user.role') || 'Role' }}</th>
<th>{{ $t('common.actions') || 'Actions' }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="member in members"> <tr v:for="member in members">
<td>{{ member.username }}</td> <td>{{ member.username }}</td>
<td>{{ member.role }}</td> <td>{{ member.email || '-' }}</td>
<td> <td>
<button class="btn-sm btn-danger" @click="removeMember(member.id)">Remove</button> <span class="role-badge" :class="member.role === 'admin' ? 'role-admin' : 'role-member'">
{{ member.role || 'member' }}
</span>
</td>
<td>
<v-btn size="sm" color="danger" variant="outline" :click="() => removeMember(member)"
v:if="member.id !== currentUserId">
<i class="fas fa-user-minus"></i>
{{ $t('org.remove_member') || 'Remove' }}
</v-btn>
<span v:else style="color: var(--text-color-tertiary); font-size: var(--font-size-sm);">
{{ $t('org.you') || 'You' }}
</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</template>
<!-- Edit Dialog -->
<v-dialog v:visible="showEditModal" title="{{ $t('org.edit') || 'Edit Organization' }}">
<v-input type="text" v:value="editForm.name" label="{{ $t('org.name') || 'Organization Name' }}" required
placeholder="{{ $t('org.name_placeholder') || 'Enter organization name' }}">
</v-input>
<v-input type="textarea" v:value="editForm.description" label="{{ $t('org.description') || 'Description' }}"
placeholder="{{ $t('org.desc_placeholder') || 'Enter organization description (optional)' }}">
</v-input>
<div vslot="footer">
<v-btn variant="outline" :click="closeEditModal">{{ $t('common.cancel') || 'Cancel' }}</v-btn>
<v-btn color="primary" :disabled="!editForm.name" :click="saveOrg">
{{ $t('common.save') || 'Save' }}
</v-btn>
</div>
</v-dialog>
</body> </body>
<script setup> <script setup>
orgId = $router.params.id; orgId = $router.params.id;
org = null; org = null;
members = []; members = [];
loading = false;
currentUserId = $env.$vbase.user?.id;
// Edit modal state
showEditModal = false;
editForm = {
name: "",
description: ""
};
loadData = async () => { loadData = async () => {
loading = true;
try { try {
const [orgRes, membersRes] = await Promise.all([ const [orgRes, membersRes] = await Promise.all([
$axios.get(`/api/orgs/${orgId}`), $axios.get(`/api/orgs/${orgId}`),
@ -136,30 +368,80 @@
members = membersRes || []; members = membersRes || [];
} catch (e) { } catch (e) {
$message.error(e.message); $message.error(e.message);
if (e.status === 404) {
$router.push('/org');
}
} finally {
loading = false;
} }
}; };
editOrg = () => { formatDate = (dateStr) => {
$message.info("Edit feature coming soon"); if (!dateStr) return '-';
const date = new Date(dateStr);
return date.toLocaleString();
};
goBack = () => {
$router.back();
};
// Edit modal
openEditModal = () => {
editForm = {
name: org.name,
description: org.description || ""
};
showEditModal = true;
};
closeEditModal = () => {
showEditModal = false;
};
saveOrg = async () => {
if (!editForm.name) return;
try {
await $axios.patch(`/api/orgs/${orgId}`, {
name: editForm.name,
description: editForm.description
});
$message.success($t('org.updated') || "Updated successfully");
closeEditModal();
loadData();
} catch (e) {
$message.error(e.message);
}
}; };
deleteOrg = async () => { deleteOrg = async () => {
try { try {
await $message.confirm("Are you sure you want to delete this organization?"); await $message.confirm($t('org.delete_confirm') || `Are you sure you want to delete "${org.name}"?`);
await $axios.delete(`/api/orgs/${orgId}`); await $axios.delete(`/api/orgs/${orgId}`);
$message.success("Deleted"); $message.success($t('org.deleted') || "Deleted successfully");
$router.push('/org'); $router.push('/org');
} catch (e) { } catch (e) {
// Cancelled or error // Cancelled
} }
}; };
removeMember = async (userId) => { removeMember = async (member) => {
// Implement remove logic try {
$message.info("Remove member feature coming soon"); await $message.confirm($t('org.remove_confirm') || `Remove "${member.username}" from organization?`);
// API might not support this yet, but prepare for it
await $axios.delete(`/api/orgs/${orgId}/members/${member.id}`);
$message.success($t('org.member_removed') || "Member removed");
loadData();
} catch (e) {
// Cancelled or not implemented
if (e.status === 404) {
$message.info($t('org.feature_coming') || "Feature coming soon");
}
}
}; };
</script> </script>
<script> <script>
$data.loadData(); $data.loadData();
</script> </script>
</html> </html>

373
ui/page/sys/org/index.html
Unescape Escape View File

@ -1,143 +1,383 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="description" content="Org List"> <meta name="description" content="Org Management">
<title>{{ $t('nav.org') }}</title> <title>{{ $t('nav.org') }}</title>
<style> <style>
body {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
height: 100vh;
box-sizing: border-box;
overflow: hidden;
}
.page-header { .page-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; flex-wrap: wrap;
gap: var(--spacing-md);
} }
.search-box {
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--bg-color-secondary);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
min-width: 280px;
}
.search-box input {
border: none;
background: transparent;
outline: none;
font-size: var(--font-size-md);
color: var(--text-color);
width: 100%;
}
.search-box input::placeholder {
color: var(--text-color-tertiary);
}
.org-grid { .org-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px; gap: var(--spacing-lg);
overflow-y: auto;
padding-bottom: var(--spacing-lg);
flex: 1;
} }
.org-card { .org-card {
background: #fff; background: var(--bg-color-secondary);
border-radius: var(--radius-md); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
padding: 20px; padding: var(--spacing-lg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: var(--spacing-md);
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s; transition: all var(--transition-base);
border: 1px solid var(--border-color);
} }
.org-card:hover { .org-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
border-color: var(--color-primary);
} }
.org-name {
.org-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-sm);
}
.org-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-text);
font-size: var(--font-size-xl);
font-weight: bold; font-weight: bold;
font-size: 18px; }
.org-actions {
display: flex;
gap: var(--spacing-xs);
opacity: 0;
transition: opacity var(--transition-fast);
}
.org-card:hover .org-actions {
opacity: 1;
}
.org-name {
font-weight: 600;
font-size: var(--font-size-lg);
color: var(--text-color); color: var(--text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.org-meta {
font-size: 14px; .org-desc {
font-size: var(--font-size-sm);
color: var(--text-color-secondary); color: var(--text-color-secondary);
line-height: 1.5;
min-height: 40px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} }
.btn-create {
padding: 8px 16px; .org-meta {
background-color: var(--color-primary); display: flex;
color: white; justify-content: space-between;
border: none; align-items: center;
border-radius: var(--radius-md); font-size: var(--font-size-sm);
cursor: pointer; color: var(--text-color-tertiary);
padding-top: var(--spacing-sm);
border-top: 1px solid var(--border-color);
} }
.modal-overlay {
position: fixed; .org-meta-item {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-xs);
}
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; justify-content: center;
z-index: 1000; padding: var(--spacing-xl);
gap: var(--spacing-md);
color: var(--text-color-secondary);
flex: 1;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
} }
.modal-content {
background: #fff;
padding: 20px;
border-radius: var(--radius-lg);
width: 400px;
max-width: 90%;
} }
.modal-actions {
.empty-state {
display: flex; display: flex;
justify-content: flex-end; flex-direction: column;
gap: 10px; align-items: center;
margin-top: 20px; justify-content: center;
padding: var(--spacing-xl);
gap: var(--spacing-md);
color: var(--text-color-secondary);
text-align: center;
flex: 1;
}
.empty-state i {
font-size: 64px;
color: var(--border-color);
}
.empty-state h3 {
font-size: var(--font-size-xl);
color: var(--text-color);
} }
</style> </style>
</head> </head>
<body> <body>
<div class="page-header"> <div class="page-header">
<h1>{{ $t('nav.org') }}</h1> <h1>{{ $t('nav.org') }}</h1>
<button class="btn-create" @click="openCreateModal">{{ $t('common.create') }}</button> <div style="display: flex; gap: var(--spacing-md); align-items: center;">
<div class="search-box">
<i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
<input type="text" v:value="searchQuery"
:placeholder="$t('org.search_placeholder') || 'Search organizations...'">
</div>
<v-btn color="primary" :click="openCreateModal">
<i class="fas fa-plus"></i>
{{ $t('org.create') }}
</v-btn>
</div>
</div> </div>
<div class="org-grid"> <!-- Loading State -->
<div class="org-card" v-for="org in orgs" @click="goToDetail(org.id)"> <div class="loading-state" v-if="loading">
<div class="org-name">{{ org.name }}</div> <div class="spinner"></div>
<div class="org-meta">ID: {{ org.id }}</div> <span>{{ $t('common.loading') || 'Loading...' }}</span>
<div class="org-meta">Role: {{ org.role || 'Member' }}</div>
</div> </div>
<!-- Empty State -->
<div class="empty-state" v-if="!loading && filteredOrgs.length === 0">
<i class="fas fa-building"></i>
<h3>{{ $t('org.no_orgs') || 'No Organizations' }}</h3>
<p>{{ $t('org.no_orgs_desc') || 'Create your first organization to get started' }}</p>
<v-btn color="primary" :click="openCreateModal" v-if="searchQuery === ''">
<i class="fas fa-plus"></i>
{{ $t('org.create_first') || 'Create Organization' }}
</v-btn>
</div> </div>
<!-- Create Modal --> <!-- Org Grid -->
<div class="modal-overlay" v-if="showCreateModal"> <div class="org-grid" v-if="!loading && filteredOrgs.length > 0">
<div class="modal-content"> <div class="org-card" v-for="org in filteredOrgs" @click="goToDetail(org.id)">
<h3>{{ $t('org.create') }}</h3> <div class="org-header">
<div class="form-group"> <div class="org-icon">{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</div>
<label>{{ $t('org.name') }}</label> <div class="org-actions" @click.stop>
<input type="text" v:value="newOrgName" class="form-input" style="width: 100%; margin-top: 5px;"> <v-btn icon size="sm" variant="outline" :click="() => openEditModal(org)">
<i class="fas fa-edit"></i>
</v-btn>
<v-btn icon size="sm" color="danger" variant="outline" :click="() => deleteOrg(org)">
<i class="fas fa-trash"></i>
</v-btn>
</div>
</div>
<div class="org-name">{{ org.name }}</div>
<div class="org-desc">{{ org.description || ($t('org.no_description') || 'No description') }}</div>
<div class="org-meta">
<div class="org-meta-item">
<i class="fas fa-id-card"></i>
<span>ID: {{ org.id }}</span>
</div> </div>
<div class="modal-actions"> <div class="org-meta-item" v-if="org.member_count !== undefined">
<button @click="closeCreateModal" class="btn-cancel">{{ $t('common.cancel') }}</button> <i class="fas fa-users"></i>
<button @click="createOrg" class="btn-confirm">{{ $t('common.confirm') }}</button> <span>{{ org.member_count }} {{ $t('org.members') || 'members' }}</span>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Create/Edit Dialog -->
<v-dialog v:visible="showModal"
:title="isEdit ? ($t('org.edit') || 'Edit Organization') : ($t('org.create') || 'Create Organization')">
<form @submit.prevent="saveOrg" style="display: grid; gap: 16px;">
<v-input v-for="item in formItems" :type="item.type || 'text'" :label="$t(item.labelKey) || item.label"
:required="item.required" :placeholder="$t(item.placeholderKey) || item.placeholder"
v:value="formData[item.name]" :disabled="item.name === 'code' && isEdit">
</v-input>
</form>
<div vslot="footer">
<v-btn variant="outline" :click="closeModal">{{ $t('common.cancel') || 'Cancel' }}</v-btn>
<v-btn color="primary" :click="saveOrg">
{{ isEdit ? ($t('common.save') || 'Save') : ($t('common.create') || 'Create') }}
</v-btn>
</div>
</v-dialog>
</body> </body>
<script setup> <script setup>
// State
orgs = []; orgs = [];
showCreateModal = false; loading = false;
newOrgName = ""; searchQuery = "";
showModal = false;
isEdit = false;
formData = {
id: null,
name: "",
code: "",
description: "",
logo: ""
};
formItems = [
{name: 'name', labelKey: 'org.name', label: 'Organization Name', required: true, placeholderKey: 'org.name_placeholder', placeholder: 'Enter organization name'},
{name: 'code', labelKey: 'org.code', label: 'Organization Code', required: true, placeholderKey: 'org.code_placeholder', placeholder: 'Enter organization code (unique)'},
{name: 'logo', labelKey: 'org.logo', label: 'Logo URL', required: true, placeholderKey: 'org.logo_placeholder', placeholder: 'Enter logo URL'},
{name: 'description', type: 'textarea', labelKey: 'org.description', label: 'Description', placeholderKey: 'org.desc_placeholder', placeholder: 'Enter organization description (optional)'}
];
// Computed filtered orgs
filteredOrgs = () => {
if (!searchQuery) return orgs;
const query = searchQuery.toLowerCase();
return orgs.filter(org =>
org.name.toLowerCase().includes(query) ||
(org.description && org.description.toLowerCase().includes(query)) ||
(org.code && org.code.toLowerCase().includes(query))
);
};
// Load orgs
loadOrgs = async () => { loadOrgs = async () => {
loading = true;
try { try {
const res = await $axios.get('/api/orgs'); const res = await $axios.get('/api/orgs');
orgs = res || []; orgs = res.items || [];
} catch (e) { } catch (e) {
$message.error(e.message); $message.error(e.message);
} finally {
loading = false;
} }
}; };
// Modal operations
openCreateModal = () => { openCreateModal = () => {
showCreateModal = true; isEdit = false;
newOrgName = ""; formData = {id: null, name: "", code: "", description: "", logo: "https://via.placeholder.com/150"};
showModal = true;
};
openEditModal = (org) => {
isEdit = true;
formData = {...org};
showModal = true;
}; };
closeCreateModal = () => { closeModal = () => {
showCreateModal = false; showModal = false;
}; };
createOrg = async () => { // Save (create or update)
if (!newOrgName) return; saveOrg = async () => {
if (!formData.name || !formData.code) {
$message.error($t('org.required_fields') || "Name and Code are required");
return;
}
try { try {
await $axios.post('/api/orgs', { name: newOrgName }); if (isEdit) {
$message.success("Created successfully"); await $axios.patch(`/api/orgs/${formData.id}`, {
closeCreateModal(); name: formData.name,
description: formData.description,
logo: formData.logo
});
$message.success($t('org.updated') || "Updated successfully");
} else {
await $axios.post('/api/orgs', {
name: formData.name,
code: formData.code,
description: formData.description,
logo: formData.logo
});
$message.success($t('org.created') || "Created successfully");
}
closeModal();
loadOrgs(); loadOrgs();
} catch (e) { } catch (e) {
console.warn(e)
$message.error(e.message); $message.error(e.message);
} }
}; };
// Delete
deleteOrg = async (org) => {
try {
await $message.confirm($t('org.delete_confirm') || `Are you sure you want to delete "${org.name}"?`);
await $axios.delete(`/api/orgs/${org.id}`);
$message.success($t('org.deleted') || "Deleted successfully");
loadOrgs();
} catch (e) {
// Cancelled
}
};
// Navigate to detail
goToDetail = (id) => { goToDetail = (id) => {
$router.push('/org/' + id); $router.push('/org/' + id);
}; };
@ -145,4 +385,5 @@
<script> <script>
$data.loadOrgs(); $data.loadOrgs();
</script> </script>
</html> </html>

Write Preview
Loading…
Cancel
Save