graph TB
    subgraph "Permission Management System"
        RBAC[Role-Based Access Control RBAC]
        
        subgraph "User Role Layer"
            SUPER[Super Administrator]
            ADMIN[Regular Administrator]
            AGENCY[Agency User]
            STREAMER[Streamer User]
            PLAYER[Player User]
            GUEST[Guest User]
        end
        
        subgraph "Permission Module Layer"
            USER_MGMT[User Management Permission]
            CONTENT_MGMT[Content Management Permission]
            FINANCE_MGMT[Finance Management Permission]
            SYSTEM_MGMT[System Management Permission]
            DATA_MGMT[Data Management Permission]
        end
        
        subgraph "Function Permission Layer"
            CREATE[Create Permission]
            READ[Read Permission]
            UPDATE[Update Permission]
            DELETE[Delete Permission]
            APPROVE[Approve Permission]
            EXPORT[Export Permission]
        end
    end
    
    %% Role Permission Relationships
    SUPER --> USER_MGMT
    SUPER --> CONTENT_MGMT
    SUPER --> FINANCE_MGMT
    SUPER --> SYSTEM_MGMT
    SUPER --> DATA_MGMT
    
    ADMIN --> USER_MGMT
    ADMIN --> CONTENT_MGMT
    ADMIN --> DATA_MGMT
    
    AGENCY --> USER_MGMT
    STREAMER --> CONTENT_MGMT
    
    %% Function Permission Relationships
    USER_MGMT --> CREATE
    USER_MGMT --> READ
    USER_MGMT --> UPDATE
    USER_MGMT --> APPROVE
    
    CONTENT_MGMT --> CREATE
    CONTENT_MGMT --> READ
    CONTENT_MGMT --> UPDATE
    CONTENT_MGMT --> DELETE
    
    FINANCE_MGMT --> READ
    FINANCE_MGMT --> EXPORT
    
    SYSTEM_MGMT --> CREATE
    SYSTEM_MGMT --> READ
    SYSTEM_MGMT --> UPDATE
    SYSTEM_MGMT --> DELETE
    
    DATA_MGMT --> READ
    DATA_MGMT --> EXPORT

    classDef roleClass fill:#e3f2fd
    classDef permissionClass fill:#f3e5f5
    classDef functionClass fill:#e8f5e8
    
    class SUPER,ADMIN,AGENCY,STREAMER,PLAYER,GUEST roleClass
    class USER_MGMT,CONTENT_MGMT,FINANCE_MGMT,SYSTEM_MGMT,DATA_MGMT permissionClass
    class CREATE,READ,UPDATE,DELETE,APPROVE,EXPORT functionClass

flowchart TD
    subgraph "Permission Management Main Page"
        HEADER["🏠 Page Header<br/>- Breadcrumb Navigation<br/>- User Information<br/>- Logout"]
        
        subgraph "Left Navigation Menu"
            NAV1["👥 User Management<br/>- User List<br/>- Role Management<br/>- Permission Assignment"]
            NAV2["📋 Review Management<br/>- Streamer Review<br/>- Content Review<br/>- Qualification Review"]
            NAV3["🏢 Agency Management<br/>- Agency List<br/>- Sub-account Management<br/>- Permission Configuration"]
            NAV4["⚙️ System Settings<br/>- Permission Configuration<br/>- Role Settings<br/>- Security Settings"]
        end
        
        subgraph "Main Content Area"
            CONTENT["📊 Permission Overview Dashboard<br/>- User Statistics<br/>- Permission Distribution<br/>- Review Status<br/>- Operation Logs"]
        end
        
        subgraph "Right Information Panel"
            SIDEBAR["📈 Real-time Statistics<br/>- Online Users<br/>- Pending Reviews<br/>- Permission Change Records<br/>- System Notifications"]
        end
    end
    
    HEADER --> NAV1
    HEADER --> NAV2
    HEADER --> NAV3
    HEADER --> NAV4
    
    NAV1 --> CONTENT
    NAV2 --> CONTENT
    NAV3 --> CONTENT
    NAV4 --> CONTENT
    
    CONTENT --> SIDEBAR

flowchart TD
    START([Enter User Management Page]) --> LOAD_USERS[Load User List]
    
    LOAD_USERS --> DISPLAY_TABLE[Display User Table]
    
    DISPLAY_TABLE --> USER_ACTIONS{User Action Selection}
    
    USER_ACTIONS -->|Search Users| SEARCH["🔍 Search Function<br/>- Search by Email<br/>- Filter by Role<br/>- Filter by Status<br/>- Filter by Registration Time"]
    
    USER_ACTIONS -->|View Details| VIEW_DETAIL["👁️ User Details Page<br/>- Basic Information<br/>- Permission List<br/>- Operation History<br/>- Login Records"]
    
    USER_ACTIONS -->|Edit User| EDIT_USER["✏️ Edit User Information<br/>- Modify Basic Information<br/>- Adjust User Role<br/>- Set Permissions<br/>- Account Status Management"]
    
    USER_ACTIONS -->|Batch Operations| BATCH_OPS["📦 Batch Operations<br/>- Batch Enable/Disable<br/>- Batch Role Change<br/>- Batch Permission Adjustment<br/>- Batch Data Export"]
    
    SEARCH --> FILTER_RESULTS[Display Filter Results]
    FILTER_RESULTS --> DISPLAY_TABLE
    
    VIEW_DETAIL --> DETAIL_ACTIONS{Detail Page Actions}
    DETAIL_ACTIONS -->|Edit| EDIT_USER
    DETAIL_ACTIONS -->|Return| DISPLAY_TABLE
    
    EDIT_USER --> VALIDATE[Validate Input Data]
    VALIDATE -->|Validation Passed| SAVE_CHANGES[Save Changes]
    VALIDATE -->|Validation Failed| SHOW_ERROR[Show Error Message]
    SHOW_ERROR --> EDIT_USER
    
    SAVE_CHANGES --> SUCCESS_MSG[Show Success Message]
    SUCCESS_MSG --> DISPLAY_TABLE
    
    BATCH_OPS --> CONFIRM_BATCH[Confirm Batch Operation]
    CONFIRM_BATCH -->|Confirm| EXECUTE_BATCH[Execute Batch Operation]
    CONFIRM_BATCH -->|Cancel| DISPLAY_TABLE
    
    EXECUTE_BATCH --> BATCH_RESULT[Show Batch Operation Result]
    BATCH_RESULT --> DISPLAY_TABLE

flowchart TD
    START([Enter Streamer Review Page]) --> LOAD_PENDING[Load Pending Streamer List]
    
    LOAD_PENDING --> DISPLAY_PENDING["📋 Display Pending List<br/>- Streamer Avatar<br/>- Basic Information<br/>- Submission Time<br/>- Review Status"]
    
    DISPLAY_PENDING --> SELECT_STREAMER[Select Pending Streamer]
    
    SELECT_STREAMER --> VIEW_PROFILE["📄 View Streamer Profile<br/>- Personal Information<br/>- Uploaded Photos<br/>- Video Materials<br/>- Identity Verification"]
    
    VIEW_PROFILE --> AI_CHECK["🤖 AI Pre-review<br/>- Image Content Detection<br/>- Violation Content Recognition<br/>- Authenticity Verification<br/>- Risk Assessment"]
    
    AI_CHECK --> AI_RESULT{AI Review Result}
    
    AI_RESULT -->|Passed| MANUAL_REVIEW["👨‍💼 Manual Review<br/>- Material Completeness Check<br/>- Authenticity Verification<br/>- Compliance Review<br/>- Quality Assessment"]
    
    AI_RESULT -->|Anomaly| FLAG_ISSUE["⚠️ Flag Issues<br/>- Violation Content<br/>- False Information<br/>- Inappropriate Images<br/>- Other Issues"]
    
    MANUAL_REVIEW --> REVIEW_DECISION{Review Decision}
    
    REVIEW_DECISION -->|Approved| APPROVE_STREAMER["✅ Review Approved<br/>- Update Review Status<br/>- Send Approval Email<br/>- Activate Streamer Account<br/>- Record Review Log"]
    
    REVIEW_DECISION -->|Rejected| REJECT_STREAMER["❌ Review Rejected<br/>- Fill Rejection Reason<br/>- Send Rejection Email<br/>- Provide Modification Suggestions<br/>- Record Rejection Log"]
    
    REVIEW_DECISION -->|Need Supplement| REQUEST_MORE["📝 Request Additional Materials<br/>- Specify Required Content<br/>- Send Supplement Notice<br/>- Set Supplement Deadline<br/>- Pause Review Process"]
    
    FLAG_ISSUE --> MANUAL_REVIEW
    
    APPROVE_STREAMER --> UPDATE_STATUS[Update Review Status]
    REJECT_STREAMER --> UPDATE_STATUS
    REQUEST_MORE --> UPDATE_STATUS
    
    UPDATE_STATUS --> SEND_NOTIFICATION[Send Notification]
    SEND_NOTIFICATION --> DISPLAY_PENDING

flowchart LR
    subgraph "Role Permission Configuration Interface"
        subgraph "Left Role List"
            ROLE_LIST["📋 Role List<br/>━━━━━━━━━<br/>🔴 Super Administrator<br/>🟡 Regular Administrator<br/>🔵 Agency User<br/>🟢 Streamer User<br/>🟣 Player User<br/>⚪ Guest User"]
        end
        
        subgraph "Middle Permission Tree"
            PERM_TREE["🌳 Permission Tree Structure<br/>━━━━━━━━━━━━<br/>📁 User Management<br/>  ├─ 👥 View Users<br/>  ├─ ✏️ Edit Users<br/>  ├─ ➕ Create Users<br/>  └─ 🗑️ Delete Users<br/>📁 Content Management<br/>  ├─ 👁️ View Content<br/>  ├─ ✅ Review Content<br/>  ├─ 📝 Edit Content<br/>  └─ 🗑️ Delete Content<br/>📁 Finance Management<br/>  ├─ 💰 View Finance<br/>  ├─ 📊 Generate Reports<br/>  └─ 💳 Process Refunds"]
        end
        
        subgraph "Right Operation Panel"
            ACTION_PANEL["⚙️ Operation Panel<br/>━━━━━━━━━━<br/>🔘 Select All Permissions<br/>🔘 Deselect All<br/>💾 Save Configuration<br/>🔄 Reset Configuration<br/>📋 Copy Permissions<br/>📥 Import Configuration<br/>📤 Export Configuration<br/>📜 View Logs"]
        end
    end
    
    ROLE_LIST -->|Select Role| PERM_TREE
    PERM_TREE -->|Configure Permissions| ACTION_PANEL
    ACTION_PANEL -->|Save| ROLE_LIST

flowchart TD
    START([Agency Login Backend]) --> CHECK_TYPE{Check Account Type}
    
    CHECK_TYPE -->|individual| NO_ACCESS["🚫 No Access Permission<br/>Individual accounts cannot manage sub-accounts"]
    
    CHECK_TYPE -->|agency/establishment| SHOW_MENU["📋 Show Sub-account Management Menu<br/>- Sub-account List<br/>- Batch Import<br/>- Permission Management<br/>- Advertisement Management"]
    
    SHOW_MENU --> SUB_MENU{Select Function}
    
    SUB_MENU -->|Sub-account List| LIST_SUBS["📊 Sub-account List Page<br/>━━━━━━━━━━━━━━━<br/>🔍 Search Box (Email/Name)<br/>📋 Table Display:<br/>  - Avatar | Name | Email<br/>  - Status | Creation Time<br/>  - Action Buttons<br/>📄 Pagination Controls"]
    
    SUB_MENU -->|Batch Import| IMPORT_EXCEL["📥 Excel Batch Import<br/>━━━━━━━━━━━━━━━<br/>📁 File Upload Area<br/>📋 Template Download Link<br/>📝 Import Rules Description:<br/>  - Email Format Validation<br/>  - Duplicate Email Check<br/>  - Atomic Operations<br/>▶️ Import Button"]
    
    SUB_MENU -->|Permission Management| PERM_MGMT["🔐 Sub-account Permission Management<br/>━━━━━━━━━━━━━━━━<br/>👤 Select Sub-account<br/>🎛️ Permission Switches:<br/>  - 🚫 Prohibit Login<br/>  - 📝 Edit Profile<br/>  - 💰 View Revenue<br/>  - 📊 Data Statistics<br/>💾 Save Settings"]
    
    SUB_MENU -->|Advertisement Management| AD_MGMT["📢 Sub-account Advertisement Management<br/>━━━━━━━━━━━━━━━━━<br/>👤 Select Sub-account<br/>💳 Purchase Ad Slots<br/>📅 Set Delivery Time<br/>🎯 Configure Display Position<br/>📊 View Ad Performance<br/>⏸️ Pause/Resume Ads"]
    
    LIST_SUBS --> SUB_ACTIONS{Sub-account Actions}
    
    SUB_ACTIONS -->|View Details| VIEW_SUB["👁️ Sub-account Details<br/>- Basic Information<br/>- Permission Status<br/>- Advertisement Status<br/>- Operation Records"]
    
    SUB_ACTIONS -->|Edit Information| EDIT_SUB["✏️ Edit Sub-account<br/>- Modify Basic Information<br/>- Adjust Permissions<br/>- Set Status<br/>- Remarks"]
    
    SUB_ACTIONS -->|Delete Account| DELETE_SUB["🗑️ Delete Confirmation<br/>⚠️ Warning Information<br/>✅ Confirm Delete<br/>❌ Cancel Operation"]
    
    IMPORT_EXCEL --> VALIDATE_FILE["🔍 File Validation<br/>- Format Check<br/>- Data Validation<br/>- Duplicate Detection<br/>- Error Report"]
    
    VALIDATE_FILE -->|Validation Passed| IMPORT_SUCCESS["✅ Import Success<br/>📊 Import Statistics<br/>📋 Success List<br/>🔄 Refresh Page"]
    
    VALIDATE_FILE -->|Validation Failed| IMPORT_ERROR["❌ Import Failed<br/>📋 Error List<br/>💡 Modification Suggestions<br/>🔄 Re-import"]
    
    IMPORT_SUCCESS --> LIST_SUBS
    IMPORT_ERROR --> IMPORT_EXCEL
    
    VIEW_SUB --> LIST_SUBS
    EDIT_SUB --> LIST_SUBS
    DELETE_SUB --> LIST_SUBS

flowchart TD
    REQUEST([User Initiates Request]) --> CHECK_LOGIN{Check Login Status}
    
    CHECK_LOGIN -->|Not Logged In| REDIRECT_LOGIN["🔐 Redirect to Login Page<br/>- Display Login Form<br/>- Record Original Request<br/>- Redirect After Login"]
    
    CHECK_LOGIN -->|Logged In| GET_TOKEN[Get User Token]
    
    GET_TOKEN --> VALIDATE_TOKEN{Validate Token Validity}
    
    VALIDATE_TOKEN -->|Invalid Token| CLEAR_SESSION["🗑️ Clear Session<br/>- Delete Local Token<br/>- Clear User Information<br/>- Redirect to Login Page"]
    
    VALIDATE_TOKEN -->|Valid Token| GET_USER_INFO[Get User Information]
    
    GET_USER_INFO --> CHECK_ROLE{Check User Role}
    
    CHECK_ROLE -->|Guest/Player| DENY_ACCESS["🚫 Deny Access<br/>- Display Insufficient Permissions<br/>- Provide Contact Information<br/>- Return to Homepage Link"]
    
    CHECK_ROLE -->|Streamer| CHECK_STREAMER_PERM["🎭 Check Streamer Permissions<br/>- Verify Review Status<br/>- Check Account Status<br/>- Confirm Function Permissions"]
    
    CHECK_ROLE -->|Agency| CHECK_AGENCY_PERM["🏢 Check Agency Permissions<br/>- Verify Agency Status<br/>- Check Sub-account Permissions<br/>- Confirm Management Scope"]
    
    CHECK_ROLE -->|Administrator| CHECK_ADMIN_PERM["👨‍💼 Check Administrator Permissions<br/>- Verify Administrator Level<br/>- Check Function Permissions<br/>- Confirm Operation Scope"]
    
    CHECK_STREAMER_PERM --> STREAMER_RESULT{Streamer Permission Result}
    CHECK_AGENCY_PERM --> AGENCY_RESULT{Agency Permission Result}
    CHECK_ADMIN_PERM --> ADMIN_RESULT{Administrator Permission Result}
    
    STREAMER_RESULT -->|Sufficient Permissions| GRANT_ACCESS["✅ Allow Access<br/>- Load User Interface<br/>- Display Available Functions<br/>- Record Access Log"]
    
    STREAMER_RESULT -->|Insufficient Permissions| PARTIAL_ACCESS["⚠️ Partial Access<br/>- Display Available Functions<br/>- Hide Restricted Functions<br/>- Suggest Upgrade"]
    
    AGENCY_RESULT -->|Sufficient Permissions| GRANT_ACCESS
    AGENCY_RESULT -->|Insufficient Permissions| PARTIAL_ACCESS
    
    ADMIN_RESULT -->|Sufficient Permissions| GRANT_ACCESS
    ADMIN_RESULT -->|Insufficient Permissions| PARTIAL_ACCESS
    
    REDIRECT_LOGIN --> LOGIN_FORM["📝 Login Form<br/>- Email Input Box<br/>- Password Input Box<br/>- Verification Code<br/>- Login Button"]
    
    LOGIN_FORM --> SUBMIT_LOGIN[Submit Login]
    SUBMIT_LOGIN --> CHECK_LOGIN

flowchart LR
    subgraph "Desktop Layout (>1200px)"
        DESKTOP["🖥️ Desktop<br/>━━━━━━━━━━━━━━━<br/>📊 Three-column Layout<br/>├─ Left Navigation (250px)<br/>├─ Main Content Area (auto)<br/>└─ Right Panel (300px)<br/>🎛️ Full Feature Display<br/>📋 Multi-column Table Display<br/>🔍 Advanced Search Panel"]
    end
    
    subgraph "Tablet Layout (768px-1200px)"
        TABLET["📱 Tablet<br/>━━━━━━━━━━━━━━━<br/>📊 Two-column Layout<br/>├─ Collapsible Navigation<br/>└─ Main Content Area<br/>🎛️ Core Feature Display<br/>📋 Adaptive Table Display<br/>🔍 Simplified Search"]
    end
    
    subgraph "Mobile Layout (<768px)"
        MOBILE["📱 Mobile<br/>━━━━━━━━━━━━━━━<br/>📊 Single-column Layout<br/>├─ Bottom Navigation<br/>└─ Full-screen Content<br/>🎛️ Basic Features<br/>📋 Card-style Display<br/>🔍 Quick Search"]
    end
    
    DESKTOP -->|Screen Shrink| TABLET
    TABLET -->|Screen Shrink| MOBILE
    MOBILE -->|Screen Expand| TABLET
    TABLET -->|Screen Expand| DESKTOP

flowchart LR
    subgraph "Permission Management Color System"
        PRIMARY["🔵 Primary Color<br/>#1976D2<br/>For main buttons, links"]
        
        SUCCESS["🟢 Success Color<br/>#4CAF50<br/>For success status, approval"]
        
        WARNING["🟡 Warning Color<br/>#FF9800<br/>For warning information, pending review"]
        
        ERROR["🔴 Error Color<br/>#F44336<br/>For error status, rejection"]
        
        INFO["🔵 Info Color<br/>#2196F3<br/>For information tips, help"]
        
        NEUTRAL["⚪ Neutral Color<br/>#9E9E9E<br/>For disabled status, borders"]
    end

flowchart TD
    subgraph "Permission Management Icon System"
        USER_ICONS["👥 User Related<br/>━━━━━━━━━<br/>👤 Individual User<br/>👥 User Group<br/>👨‍💼 Administrator<br/>🏢 Agency<br/>🎭 Streamer"]
        
        ACTION_ICONS["⚙️ Action Related<br/>━━━━━━━━━<br/>✏️ Edit<br/>👁️ View<br/>🗑️ Delete<br/>➕ Add<br/>💾 Save"]
        
        STATUS_ICONS["📊 Status Related<br/>━━━━━━━━━<br/>✅ Approved<br/>❌ Rejected<br/>⏳ Pending Review<br/>🔒 Locked<br/>🔓 Unlocked"]
        
        FUNCTION_ICONS["🎛️ Function Related<br/>━━━━━━━━━<br/>🔍 Search<br/>📋 List<br/>📊 Statistics<br/>⚙️ Settings<br/>📤 Export"]
    end

flowchart TD
    subgraph "Interaction Design Specifications"
        FEEDBACK["💬 Feedback Mechanism<br/>━━━━━━━━━━━━<br/>🎯 Immediate Feedback<br/>- Button Click Effects<br/>- Form Validation Tips<br/>- Operation Success/Failure<br/>⏱️ Loading States<br/>- Skeleton Screen Display<br/>- Progress Bar Indication<br/>- Loading Animation"]
        
        CONFIRM["⚠️ Confirmation Mechanism<br/>━━━━━━━━━━━━<br/>🔐 Sensitive Operations<br/>- Delete Confirmation Dialog<br/>- Permission Change Confirmation<br/>- Batch Operation Confirmation<br/>📝 Operation Records<br/>- Operation Log Recording<br/>- Change History Tracking<br/>- Undo Function"]
        
        HELP["❓ Help System<br/>━━━━━━━━━━━━<br/>💡 Operation Guidance<br/>- Onboarding Guide<br/>- Feature Descriptions<br/>- Keyboard Shortcuts<br/>📚 Help Documentation<br/>- Online Help<br/>- Video Tutorials<br/>- FAQ"]
    end