Compare commits
No commits in common. "afff8a8d0751645bf922f0e38c8fbb80090716c6" and "37025d3f023bbac4a4cf95fbdf284e59bf24309a" have entirely different histories.
afff8a8d07
...
37025d3f02
|
|
@ -19,7 +19,7 @@ CREATE TABLE sys_tenant (
|
|||
updated_at TIMESTAMP(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
is_deleted SMALLINT DEFAULT 0
|
||||
);
|
||||
CREATE UNIQUE INDEX uk_tenant_code ON sys_tenant (tenant_code) WHERE is_deleted = 0;
|
||||
CREATE UNIQUE INDEX uk_tenant_code ON sys_tenant (tenant_code) WHERE is_deleted = FALSE;
|
||||
|
||||
-- 组织架构表
|
||||
DROP TABLE IF EXISTS sys_org CASCADE;
|
||||
|
|
@ -65,7 +65,7 @@ CREATE TABLE sys_user (
|
|||
updated_at TIMESTAMP(6) NOT NULL DEFAULT now(),
|
||||
is_platform_admin BOOLEAN DEFAULT false
|
||||
);
|
||||
CREATE INDEX uk_user_username ON sys_user (username) WHERE is_deleted = 0;
|
||||
CREATE UNIQUE INDEX uk_user_username ON sys_user (username) WHERE is_deleted = FALSE;
|
||||
|
||||
-- 角色表
|
||||
DROP TABLE IF EXISTS sys_role CASCADE;
|
||||
|
|
@ -83,7 +83,7 @@ CREATE TABLE sys_role (
|
|||
);
|
||||
|
||||
CREATE INDEX idx_sys_role_tenant ON sys_role (tenant_id);
|
||||
CREATE UNIQUE INDEX uk_role_code ON sys_role (tenant_id, role_code) WHERE is_deleted = 0;
|
||||
CREATE UNIQUE INDEX uk_role_code ON sys_role (tenant_id, role_code) WHERE is_deleted = FALSE;
|
||||
|
||||
-- 用户-角色关联表 (按 tenant_id 强约束，避免跨租户角色污染)
|
||||
DROP TABLE IF EXISTS sys_user_role CASCADE;
|
||||
|
|
|
|||
|
|
@ -54,19 +54,8 @@ public class RoleController {
|
|||
|
||||
@GetMapping
|
||||
@PreAuthorize("@ss.hasPermi('sys:role:list')")
|
||||
public ApiResponse<List<SysRole>> list(@RequestParam(required = false) Long tenantId) {
|
||||
QueryWrapper<SysRole> wrapper = new QueryWrapper<>();
|
||||
|
||||
if (authScopeService.isCurrentPlatformAdmin()) {
|
||||
if (tenantId != null) {
|
||||
wrapper.eq("tenant_id", tenantId);
|
||||
}
|
||||
} else {
|
||||
Long currentTenantId = getCurrentTenantId();
|
||||
wrapper.eq("tenant_id", currentTenantId);
|
||||
}
|
||||
|
||||
return ApiResponse.ok(sysRoleService.list(wrapper));
|
||||
public ApiResponse<List<SysRole>> list() {
|
||||
return ApiResponse.ok(sysRoleService.list());
|
||||
}
|
||||
|
||||
@GetMapping("/{id}/users")
|
||||
|
|
@ -252,21 +241,19 @@ public class RoleController {
|
|||
if (userId == null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// 修复：处理逻辑删除导致的唯一键冲突
|
||||
// 执行物理删除，彻底清除旧记录（包括已逻辑删除的）
|
||||
sysUserRoleMapper.physicalDelete(id, userId, role.getTenantId());
|
||||
|
||||
// 确保该用户属于该租户
|
||||
boolean hasMembership = sysTenantUserService.count(
|
||||
new com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper<com.imeeting.entity.SysTenantUser>()
|
||||
.eq(com.imeeting.entity.SysTenantUser::getUserId, userId)
|
||||
.eq(com.imeeting.entity.SysTenantUser::getTenantId, role.getTenantId())
|
||||
) > 0;
|
||||
if (!hasMembership) {
|
||||
return ApiResponse.error("用户不属于角色所在租户：" + role.getTenantId());
|
||||
QueryWrapper<SysUserRole> qw = new QueryWrapper<>();
|
||||
qw.eq("role_id", id).eq("user_id", userId).eq("tenant_id", role.getTenantId());
|
||||
if (sysUserRoleMapper.selectCount(qw) == 0) {
|
||||
boolean hasMembership = sysTenantUserService.count(
|
||||
new com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper<com.imeeting.entity.SysTenantUser>()
|
||||
.eq(com.imeeting.entity.SysTenantUser::getUserId, userId)
|
||||
.eq(com.imeeting.entity.SysTenantUser::getTenantId, role.getTenantId())
|
||||
) > 0;
|
||||
if (!hasMembership) {
|
||||
return ApiResponse.error("用户不属于角色所在租户：" + role.getTenantId());
|
||||
}
|
||||
toInsertUserIds.add(userId);
|
||||
}
|
||||
toInsertUserIds.add(userId);
|
||||
}
|
||||
|
||||
for (Long userId : toInsertUserIds) {
|
||||
|
|
@ -292,7 +279,9 @@ public class RoleController {
|
|||
if (!canAccessTenant(role.getTenantId())) {
|
||||
return ApiResponse.error("禁止跨租户解绑用户");
|
||||
}
|
||||
sysUserRoleMapper.physicalDelete(id, userId, role.getTenantId());
|
||||
QueryWrapper<SysUserRole> qw = new QueryWrapper<>();
|
||||
qw.eq("role_id", id).eq("user_id", userId).eq("tenant_id", role.getTenantId());
|
||||
sysUserRoleMapper.delete(qw);
|
||||
authVersionService.invalidateUserTenantAuth(userId, role.getTenantId());
|
||||
return ApiResponse.ok(true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,19 +5,12 @@ import com.baomidou.mybatisplus.core.mapper.BaseMapper;
|
|||
import com.imeeting.entity.SysUserRole;
|
||||
import org.apache.ibatis.annotations.Param;
|
||||
import org.apache.ibatis.annotations.Select;
|
||||
import org.apache.ibatis.annotations.Delete;
|
||||
import org.apache.ibatis.annotations.Mapper;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@Mapper
|
||||
public interface SysUserRoleMapper extends BaseMapper<SysUserRole> {
|
||||
@Delete("""
|
||||
DELETE FROM sys_user_role
|
||||
WHERE role_id = #{roleId} AND user_id = #{userId} AND tenant_id = #{tenantId}
|
||||
""")
|
||||
int physicalDelete(@Param("roleId") Long roleId, @Param("userId") Long userId, @Param("tenantId") Long tenantId);
|
||||
|
||||
@InterceptorIgnore(tenantLine = "true")
|
||||
@Select("""
|
||||
SELECT COUNT(1)
|
||||
|
|
|
|||
|
|
@ -54,29 +54,19 @@ public class SysTenantServiceImpl extends ServiceImpl<SysTenantMapper, SysTenant
|
|||
public boolean removeById(java.io.Serializable id) {
|
||||
Long tenantId = (Long) id;
|
||||
|
||||
// 1. 获取该租户下的所有用户 ID 和角色 ID
|
||||
// 1. 获取该租户下的所有用户 ID
|
||||
List<SysTenantUser> tenantUsers = sysTenantUserService.list(
|
||||
new LambdaQueryWrapper<SysTenantUser>().eq(SysTenantUser::getTenantId, tenantId)
|
||||
);
|
||||
List<Long> userIds = tenantUsers.stream().map(SysTenantUser::getUserId).collect(Collectors.toList());
|
||||
|
||||
List<SysRole> roles = sysRoleService.list(
|
||||
new LambdaQueryWrapper<SysRole>().eq(SysRole::getTenantId, tenantId)
|
||||
);
|
||||
List<Long> roleIds = roles.stream().map(SysRole::getRoleId).collect(Collectors.toList());
|
||||
|
||||
// 2. 逻辑删除角色权限关联
|
||||
if (roleIds != null && !roleIds.isEmpty()) {
|
||||
sysRolePermissionMapper.delete(new com.baomidou.mybatisplus.core.conditions.query.QueryWrapper<SysRolePermission>().in("role_id", roleIds));
|
||||
}
|
||||
|
||||
// 3. 逻辑删除租户下的角色
|
||||
// 2. 逻辑删除租户下的角色
|
||||
sysRoleService.lambdaUpdate()
|
||||
.set(SysRole::getIsDeleted, 1)
|
||||
.eq(SysRole::getTenantId, tenantId)
|
||||
.update();
|
||||
|
||||
// 4. 逻辑删除租户下的组织
|
||||
// 3. 逻辑删除租户下的组织
|
||||
sysOrgService.lambdaUpdate()
|
||||
.set(SysOrg::getIsDeleted, 1)
|
||||
.eq(SysOrg::getTenantId, tenantId)
|
||||
|
|
|
|||
|
|
@ -1,152 +0,0 @@
|
|||
package com.imeeting.biz;
|
||||
|
||||
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
||||
import com.fasterxml.jackson.databind.JsonNode;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import com.imeeting.entity.biz.AiModel;
|
||||
import com.imeeting.entity.biz.Meeting;
|
||||
import com.imeeting.entity.biz.MeetingTranscript;
|
||||
import com.imeeting.mapper.biz.MeetingMapper;
|
||||
import com.imeeting.mapper.biz.MeetingTranscriptMapper;
|
||||
import com.imeeting.service.biz.AiModelService;
|
||||
import org.junit.jupiter.api.Test;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.boot.test.context.SpringBootTest;
|
||||
|
||||
import java.net.URI;
|
||||
import java.net.http.HttpClient;
|
||||
import java.net.http.HttpRequest;
|
||||
import java.net.http.HttpResponse;
|
||||
import java.time.Duration;
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
/**
|
||||
* 总结模块分步分析测试类 - 真实数据版
|
||||
*/
|
||||
@SpringBootTest
|
||||
public class SummaryTest {
|
||||
|
||||
@Autowired
|
||||
private MeetingMapper meetingMapper;
|
||||
|
||||
@Autowired
|
||||
private MeetingTranscriptMapper transcriptMapper;
|
||||
|
||||
@Autowired
|
||||
private AiModelService aiModelService;
|
||||
|
||||
@Autowired
|
||||
private ObjectMapper objectMapper;
|
||||
|
||||
@Test
|
||||
public void testManualSummary() throws Exception {
|
||||
// --- 步骤 1: 准备测试数据 ---
|
||||
// 请替换为您数据库中真实的 meetingId
|
||||
Long testMeetingId = 3L;
|
||||
|
||||
Meeting meeting = meetingMapper.selectById(testMeetingId);
|
||||
if (meeting == null) {
|
||||
System.out.println("❌ 错误：未找到 ID 为 " + testMeetingId + " 的会议记录");
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取真实的 ASR 转录数据
|
||||
List<MeetingTranscript> transcripts = transcriptMapper.selectList(
|
||||
new LambdaQueryWrapper<MeetingTranscript>()
|
||||
.eq(MeetingTranscript::getMeetingId, testMeetingId)
|
||||
.orderByAsc(MeetingTranscript::getStartTime)
|
||||
);
|
||||
|
||||
if (transcripts.isEmpty()) {
|
||||
System.out.println("⚠️ 警告：该会议暂无转录明细数据 (MeetingTranscript)");
|
||||
// 如果没明细，您可以选择是否继续，或者手动造一点
|
||||
// return;
|
||||
}
|
||||
|
||||
String realAsrText = transcripts.stream()
|
||||
.map(t -> (t.getSpeakerName() != null ? t.getSpeakerName() : t.getSpeakerId()) + ": " + t.getContent())
|
||||
.collect(Collectors.joining("\n"));
|
||||
|
||||
System.out.println("\n--- [DEBUG] 提取到的真实转录文本 ---");
|
||||
System.out.println(realAsrText);
|
||||
|
||||
AiModel llmModel = aiModelService.getById(meeting.getSummaryModelId());
|
||||
if (llmModel == null) {
|
||||
System.out.println("❌ 错误：该会议未绑定总结模型配置");
|
||||
return;
|
||||
}
|
||||
|
||||
System.out.println("\n✅ 基础数据加载成功");
|
||||
System.out.println(" 模型名称: " + llmModel.getModelName());
|
||||
System.out.println(" 提示词模板快照: " + (meeting.getPromptContent() != null && meeting.getPromptContent().length() > 50
|
||||
? meeting.getPromptContent().substring(0, 50) + "..."
|
||||
: meeting.getPromptContent()));
|
||||
|
||||
// --- 步骤 2: 构造请求 Payload ---
|
||||
Map<String, Object> req = new HashMap<>();
|
||||
req.put("model", llmModel.getModelCode());
|
||||
req.put("temperature", llmModel.getTemperature());
|
||||
|
||||
List<Map<String, String>> messages = new ArrayList<>();
|
||||
// 系统角色注入 Prompt
|
||||
messages.add(Map.of("role", "system", "content", meeting.getPromptContent() != null ? meeting.getPromptContent() : "请总结以下会议内容"));
|
||||
// 用户角色注入 真实的 ASR 文本
|
||||
messages.add(Map.of("role", "user", "content", "以下是会议转录全文：\n" + realAsrText));
|
||||
req.put("messages", messages);
|
||||
|
||||
String jsonPayload = objectMapper.writerWithDefaultPrettyPrinter().writeValueAsString(req);
|
||||
System.out.println("\n--- [DEBUG] 发送给 AI 的请求 JSON ---");
|
||||
System.out.println(jsonPayload);
|
||||
|
||||
// --- 步骤 3: 发起网络请求 ---
|
||||
String url = llmModel.getBaseUrl() + (llmModel.getApiPath() != null ? llmModel.getApiPath() : "/v1/chat/completions");
|
||||
System.out.println("\n--- [DEBUG] 目标 URL: " + url);
|
||||
|
||||
HttpClient client = HttpClient.newBuilder()
|
||||
.connectTimeout(Duration.ofSeconds(10))
|
||||
.build();
|
||||
|
||||
HttpRequest request = HttpRequest.newBuilder()
|
||||
.uri(URI.create(url))
|
||||
.header("Content-Type", "application/json")
|
||||
.header("Authorization", "Bearer " + llmModel.getApiKey())
|
||||
.POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
|
||||
.build();
|
||||
|
||||
System.out.println("⏳ 正在请求第三方 AI 接口...");
|
||||
try {
|
||||
HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
|
||||
|
||||
System.out.println("\n--- [DEBUG] 接口返回状态码: " + response.statusCode());
|
||||
System.out.println("--- [DEBUG] 接口返回 Raw Body ---");
|
||||
System.out.println(response.body());
|
||||
|
||||
// --- 步骤 4: 解析结果 ---
|
||||
if (response.statusCode() == 200) {
|
||||
JsonNode respNode = objectMapper.readTree(response.body());
|
||||
if (respNode.has("choices")) {
|
||||
String finalContent = respNode.get("choices").get(0).get("message").get("content").asText();
|
||||
System.out.println("\n✨ 总结生成成功！结果如下：");
|
||||
System.out.println("------------------------------------");
|
||||
System.out.println(finalContent);
|
||||
System.out.println("------------------------------------");
|
||||
|
||||
// 可选：将结果更新回数据库以便前端查看
|
||||
// meeting.setSummaryContent(finalContent);
|
||||
// meetingMapper.updateById(meeting);
|
||||
} else {
|
||||
System.out.println("❌ 错误：返回结果中不包含 'choices' 字段，请检查厂商 API 适配。");
|
||||
}
|
||||
} else {
|
||||
System.out.println("❌ 接口请求失败，请检查 BaseUrl 和 ApiKey 是否正确。");
|
||||
}
|
||||
} catch (Exception e) {
|
||||
System.out.println("❌ 网络异常：" + e.getMessage());
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -50,8 +50,8 @@ export async function getUserDetail(id: number) {
|
|||
return resp.data.data as SysUser;
|
||||
}
|
||||
|
||||
export async function listRoles(tenantId?: number) {
|
||||
const resp = await http.get("/api/roles", { params: { tenantId } });
|
||||
export async function listRoles() {
|
||||
const resp = await http.get("/api/roles");
|
||||
return resp.data.data as SysRole[];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -246,9 +246,9 @@ export default function Login() {
|
|||
</Form>
|
||||
|
||||
<div className="login-footer">
|
||||
{/*<Text type="secondary">*/}
|
||||
{/* {t('login.demoAccount')}：<Text strong className="tabular-nums">admin</Text> / {t('login.password')}：<Text strong className="tabular-nums">123456</Text>*/}
|
||||
{/*</Text>*/}
|
||||
<Text type="secondary">
|
||||
{t('login.demoAccount')}：<Text strong className="tabular-nums">admin</Text> / {t('login.password')}：<Text strong className="tabular-nums">123456</Text>
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,109 +1,80 @@
|
|||
.roles-page-v2 {
|
||||
background-color: #f0f2f5;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
||||
.full-height-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Role List Styling */
|
||||
.role-list-container-v3 {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #e8e8e8 transparent;
|
||||
.full-height-card .ant-card-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.role-list-container-v3::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
.role-list-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.role-list-container-v3::-webkit-scrollbar-thumb {
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 3px;
|
||||
.role-row {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.role-item-card-v3 {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
.role-row:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.role-row-selected {
|
||||
background-color: #e6f7ff !important;
|
||||
border-right: 3px solid #1890ff;
|
||||
}
|
||||
|
||||
.role-item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
background: #fafafa;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.role-item-card-v3:hover {
|
||||
background: #f0f7ff;
|
||||
border-color: #e6f4ff;
|
||||
}
|
||||
|
||||
.role-item-card-v3.active {
|
||||
background: #e6f4ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.role-item-card-v3.active .role-name {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.role-item-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.role-item-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.role-name {
|
||||
font-size: 14px;
|
||||
.role-item-name {
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.role-code {
|
||||
.role-item-code {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.role-item-actions {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
.role-tabs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.role-item-card-v3:hover .role-item-actions {
|
||||
opacity: 1;
|
||||
.role-tabs .ant-tabs-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Tabs Styling */
|
||||
.role-detail-tabs .ant-tabs-nav {
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.role-detail-tabs .ant-tabs-content-holder {
|
||||
background: #fff;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
/* Tree Styling */
|
||||
.permission-tree-wrapper {
|
||||
background: #fafafa;
|
||||
.role-permission-tree-v2 {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.role-permission-node {
|
||||
|
|
@ -111,24 +82,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-tree-treenode {
|
||||
padding: 4px 0 !important;
|
||||
.mb-4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper:hover {
|
||||
background-color: #e6f4ff !important;
|
||||
}
|
||||
|
||||
/* Table Styling */
|
||||
.ant-table-small {
|
||||
background: transparent;
|
||||
.full-height-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
|
||||
|
|
|
|||
|
|
@ -16,16 +16,10 @@ import {
|
|||
Tabs,
|
||||
Empty,
|
||||
Select,
|
||||
Modal,
|
||||
Tooltip,
|
||||
Divider,
|
||||
Switch,
|
||||
Badge,
|
||||
Avatar,
|
||||
List
|
||||
Modal
|
||||
} from "antd";
|
||||
import type { DataNode } from "antd/es/tree";
|
||||
import { useEffect, useMemo, useState, useCallback } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
createRole,
|
||||
|
|
@ -52,10 +46,7 @@ import {
|
|||
KeyOutlined,
|
||||
UserOutlined,
|
||||
SaveOutlined,
|
||||
UserAddOutlined,
|
||||
TeamOutlined,
|
||||
FilterOutlined,
|
||||
ApartmentOutlined
|
||||
UserAddOutlined
|
||||
} from "@ant-design/icons";
|
||||
import PageHeader from "../components/shared/PageHeader";
|
||||
import "./Roles.css";
|
||||
|
|
@ -100,12 +91,8 @@ const toTreeData = (nodes: PermissionNode[], t: any): DataNode[] =>
|
|||
key: node.permId,
|
||||
title: (
|
||||
<span className="role-permission-node">
|
||||
<span style={{ fontSize: '14px' }}>{node.name}</span>
|
||||
{node.permType === "button" && (
|
||||
<Tag color="cyan" style={{ marginLeft: 8, fontSize: '10px', borderRadius: '10px', padding: '0 8px' }}>
|
||||
{t('permissions.permType') === '按钮' ? '按钮' : 'BTN'}
|
||||
</Tag>
|
||||
)}
|
||||
<span>{node.name}</span>
|
||||
{node.permType === "button" && <Tag color="blue" style={{ marginLeft: 8 }}>{t('permissions.permType') === '按钮' ? '按钮' : 'Button'}</Tag>}
|
||||
</span>
|
||||
),
|
||||
children: node.children && node.children.length > 0 ? toTreeData(node.children, t) : undefined
|
||||
|
|
@ -121,8 +108,10 @@ export default function Roles() {
|
|||
const [permissions, setPermissions] = useState<SysPermission[]>([]);
|
||||
const [selectedRole, setSelectedRole] = useState<SysRole | null>(null);
|
||||
|
||||
// Dictionaries
|
||||
const { items: statusDict } = useDict("sys_common_status");
|
||||
|
||||
// Platform admin check
|
||||
const isPlatformMode = useMemo(() => {
|
||||
const profileStr = sessionStorage.getItem("userProfile");
|
||||
if (profileStr) {
|
||||
|
|
@ -134,19 +123,23 @@ export default function Roles() {
|
|||
|
||||
const activeTenantId = useMemo(() => Number(localStorage.getItem("activeTenantId") || 0), []);
|
||||
|
||||
// Right side states
|
||||
const [selectedPermIds, setSelectedPermIds] = useState<number[]>([]);
|
||||
const [halfCheckedIds, setHalfCheckedIds] = useState<number[]>([]);
|
||||
const [roleUsers, setRoleUsers] = useState<SysUser[]>([]);
|
||||
const [loadingUsers, setLoadingUsers] = useState(false);
|
||||
|
||||
// User selection states
|
||||
const [allUsers, setAllUsers] = useState<SysUser[]>([]);
|
||||
const [userModalOpen, setUserModalOpen] = useState(false);
|
||||
const [selectedUserKeys, setSelectedUserKeys] = useState<number[]>([]);
|
||||
const [userSearchText, setUserSearchText] = useState("");
|
||||
|
||||
// Search
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [filterTenantId, setFilterTenantId] = useState<number | undefined>(undefined);
|
||||
|
||||
// Drawer (Only for Add/Edit basic info)
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<SysRole | null>(null);
|
||||
const [tenants, setTenants] = useState<SysTenant[]>([]);
|
||||
|
|
@ -193,23 +186,20 @@ export default function Roles() {
|
|||
message.success(t('common.success'));
|
||||
setUserModalOpen(false);
|
||||
selectRole(selectedRole);
|
||||
} catch (e) {}
|
||||
} catch (e) {
|
||||
// Handled by interceptor
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnbindUser = async (userId: number) => {
|
||||
if (!selectedRole) return;
|
||||
|
||||
// 安全校验：租户管理员角色至少保留一个关联用户
|
||||
if (selectedRole.roleCode === 'TENANT_ADMIN' && roleUsers.length <= 1) {
|
||||
message.warning('租户管理员角色必须至少保留一个关联用户，以防止租户孤立');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await unbindUserFromRole(selectedRole.roleId, userId);
|
||||
message.success(t('common.success'));
|
||||
selectRole(selectedRole);
|
||||
} catch (e) {}
|
||||
} catch (e) {
|
||||
// Handled by interceptor
|
||||
}
|
||||
};
|
||||
|
||||
const filteredModalUsers = useMemo(() => {
|
||||
|
|
@ -233,8 +223,15 @@ export default function Roles() {
|
|||
const loadRoles = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const list = await listRoles(isPlatformMode ? filterTenantId : activeTenantId);
|
||||
const list = await listRoles();
|
||||
let roles = list || [];
|
||||
|
||||
if (isPlatformMode && filterTenantId !== undefined) {
|
||||
roles = roles.filter(r => r.tenantId === filterTenantId);
|
||||
} else if (!isPlatformMode) {
|
||||
roles = roles.filter(r => r.tenantId === activeTenantId);
|
||||
}
|
||||
|
||||
setData(roles);
|
||||
if (roles.length > 0 && !selectedRole) {
|
||||
selectRole(roles[0]);
|
||||
|
|
@ -251,27 +248,33 @@ export default function Roles() {
|
|||
const selectRole = async (role: SysRole) => {
|
||||
setSelectedRole(role);
|
||||
try {
|
||||
// Load permissions for this role
|
||||
const ids = await listRolePermissions(role.roleId);
|
||||
const normalized = (ids || []).map((id) => Number(id)).filter((id) => !Number.isNaN(id));
|
||||
|
||||
// Filter out parents for Tree回显
|
||||
const leafIds = normalized.filter(id => {
|
||||
return !permissions.some(p => p.parentId === id);
|
||||
});
|
||||
setSelectedPermIds(leafIds);
|
||||
setHalfCheckedIds([]);
|
||||
|
||||
// Load users for this role
|
||||
setLoadingUsers(true);
|
||||
const users = await fetchUsersByRoleId(role.roleId);
|
||||
setRoleUsers(users || []);
|
||||
} catch (e) {} finally {
|
||||
} catch (e) {
|
||||
// Handled by interceptor
|
||||
} finally {
|
||||
setLoadingUsers(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadRoles();
|
||||
}, [filterTenantId]);
|
||||
}, []);
|
||||
|
||||
// Reload role detail if permissions list loaded later
|
||||
useEffect(() => {
|
||||
if (selectedRole && permissions.length > 0) {
|
||||
const leafIds = selectedPermIds.filter(id => {
|
||||
|
|
@ -316,7 +319,9 @@ export default function Roles() {
|
|||
message.success(t('common.success'));
|
||||
if (selectedRole?.roleId === id) setSelectedRole(null);
|
||||
loadRoles();
|
||||
} catch (e) {}
|
||||
} catch (e) {
|
||||
// Handled by interceptor
|
||||
}
|
||||
};
|
||||
|
||||
const submitBasic = async () => {
|
||||
|
|
@ -341,7 +346,9 @@ export default function Roles() {
|
|||
|
||||
setDrawerOpen(false);
|
||||
loadRoles();
|
||||
} catch (e) {} finally {
|
||||
} catch (e) {
|
||||
// Handled by interceptor
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
|
@ -353,240 +360,249 @@ export default function Roles() {
|
|||
const allPermIds = Array.from(new Set([...selectedPermIds, ...halfCheckedIds]));
|
||||
await saveRolePermissions(selectedRole.roleId, allPermIds);
|
||||
message.success(t('common.success'));
|
||||
} catch (e) {} finally {
|
||||
} catch (e) {
|
||||
// Handled by interceptor
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="roles-page-v2" style={{ height: 'calc(100vh - 64px)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
|
||||
<div className="roles-page-v2 p-6">
|
||||
<PageHeader
|
||||
title={t('roles.title')}
|
||||
subtitle={t('roles.subtitle')}
|
||||
extra={can("sys:role:create") && (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
icon={<PlusOutlined aria-hidden="true" />}
|
||||
onClick={openCreate}
|
||||
>
|
||||
{t('common.create')}
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1, padding: '0 24px 24px 24px', overflow: 'hidden' }}>
|
||||
<Row gutter={24} style={{ height: '100%' }}>
|
||||
{/* Left: Role List Side */}
|
||||
<Col span={7} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Card
|
||||
title={
|
||||
<Space>
|
||||
<ApartmentOutlined />
|
||||
<span>角色列表</span>
|
||||
<Badge count={filteredData.length} overflowCount={999} style={{ backgroundColor: '#f0f2f5', color: '#8c8c8c', boxShadow: 'none' }} />
|
||||
</Space>
|
||||
}
|
||||
bordered={false}
|
||||
className="shadow-sm"
|
||||
style={{ height: '100%', borderRadius: '12px', display: 'flex', flexDirection: 'column' }}
|
||||
bodyStyle={{ flex: 1, overflow: 'hidden', padding: '16px', display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<Space direction="vertical" size={12} style={{ width: '100%', marginBottom: 16 }}>
|
||||
{isPlatformMode && (
|
||||
<Select
|
||||
placeholder="按租户筛选"
|
||||
style={{ width: '100%' }}
|
||||
allowClear
|
||||
suffixIcon={<FilterOutlined />}
|
||||
value={filterTenantId}
|
||||
onChange={setFilterTenantId}
|
||||
options={tenants.map(t => ({ label: t.tenantName, value: t.id }))}
|
||||
/>
|
||||
)}
|
||||
<Input
|
||||
placeholder="搜索角色名称/编码"
|
||||
prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
<Row gutter={24} style={{ height: 'calc(100vh - 180px)' }}>
|
||||
{/* Left: Role List */}
|
||||
<Col span={8} style={{ height: '100%' }}>
|
||||
<Card
|
||||
title="角色列表"
|
||||
className="full-height-card shadow-sm"
|
||||
>
|
||||
<div className="mb-4 flex gap-2">
|
||||
{isPlatformMode && (
|
||||
<Select
|
||||
placeholder={t('users.tenantFilter')}
|
||||
style={{ width: 150 }}
|
||||
allowClear
|
||||
style={{ borderRadius: '6px' }}
|
||||
value={filterTenantId}
|
||||
onChange={setFilterTenantId}
|
||||
options={tenants.map(t => ({ label: t.tenantName, value: t.id }))}
|
||||
/>
|
||||
</Space>
|
||||
|
||||
<div className="role-list-container-v3" style={{ flex: 1, overflowY: 'auto', margin: '0 -16px', padding: '0 16px' }}>
|
||||
<List
|
||||
loading={loading}
|
||||
dataSource={filteredData}
|
||||
locale={{ emptyText: <Empty description="未找到角色" image={Empty.PRESENTED_IMAGE_SIMPLE} /> }}
|
||||
renderItem={(item) => (
|
||||
<div
|
||||
key={item.roleId}
|
||||
className={`role-item-card-v3 ${selectedRole?.roleId === item.roleId ? 'active' : ''}`}
|
||||
onClick={() => selectRole(item)}
|
||||
>
|
||||
<div className="role-item-main">
|
||||
<div className="role-item-name-row">
|
||||
<Text strong className="role-name">{item.roleName}</Text>
|
||||
{isPlatformMode && (
|
||||
<Tag color="blue" style={{ fontSize: '10px', scale: '0.8', margin: '0 0 0 4px', borderRadius: '10px' }}>
|
||||
{item.tenantId === 0 ? '系统' : (tenants.find(t => t.id === item.tenantId)?.tenantName || `租户:${item.tenantId}`)}
|
||||
</Tag>
|
||||
)}
|
||||
{item.status === 0 && <Tag color="error" style={{ fontSize: '10px', scale: '0.8', margin: 0 }}>已禁用</Tag>}
|
||||
)}
|
||||
<Input
|
||||
placeholder={t('roles.searchPlaceholder')}
|
||||
prefix={<SearchOutlined aria-hidden="true" />}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
allowClear
|
||||
aria-label={t('roles.searchPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
<div className="role-list-container" style={{ height: 'calc(100% - 60px)', overflowY: 'auto' }}>
|
||||
<Table
|
||||
rowKey="roleId"
|
||||
showHeader={false}
|
||||
dataSource={filteredData}
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
locale={{ emptyText: <Empty description={t('roles.selectRole')} /> }}
|
||||
onRow={(record) => ({
|
||||
onClick: () => selectRole(record),
|
||||
className: `cursor-pointer role-row ${selectedRole?.roleId === record.roleId ? 'role-row-selected' : ''}`
|
||||
})}
|
||||
columns={[
|
||||
{
|
||||
title: '角色',
|
||||
render: (_, record) => (
|
||||
<div className="role-item-content flex justify-between items-center p-2">
|
||||
<div className="role-item-main min-w-0">
|
||||
<div className="role-item-name font-medium truncate">{record.roleName}</div>
|
||||
<div className="role-item-code text-xs text-gray-400 truncate">{record.roleCode}</div>
|
||||
</div>
|
||||
<Text type="secondary" className="role-code">{item.roleCode}</Text>
|
||||
</div>
|
||||
<div className="role-item-actions">
|
||||
<Space size={4}>
|
||||
<Tooltip title="编辑详情">
|
||||
<Button type="text" size="small" icon={<EditOutlined />} onClick={e => openEditBasic(e, item)} />
|
||||
</Tooltip>
|
||||
{item.roleCode !== 'ADMIN' && (
|
||||
<Popconfirm title="确定删除？" onConfirm={e => handleRemove(e!, item.roleId)}>
|
||||
<Button type="text" size="small" danger icon={<DeleteOutlined />} onClick={e => e.stopPropagation()} />
|
||||
<div className="role-item-actions flex gap-1">
|
||||
{can("sys:role:update") && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EditOutlined aria-hidden="true" />}
|
||||
onClick={e => openEditBasic(e, record)}
|
||||
/>
|
||||
)}
|
||||
{can("sys:role:delete") && record.roleCode !== 'ADMIN' && (
|
||||
<Popconfirm
|
||||
title={`确定删除角色 "${record.roleName}" 吗？`}
|
||||
onConfirm={e => handleRemove(e!, record.roleId)}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined aria-hidden="true" />}
|
||||
onClick={e => e.stopPropagation()}
|
||||
/>
|
||||
</Popconfirm>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* Right: Detail Tabs */}
|
||||
<Col span={16} style={{ height: '100%' }}>
|
||||
{selectedRole ? (
|
||||
<Card
|
||||
className="full-height-card shadow-sm"
|
||||
title={
|
||||
<Space>
|
||||
<SafetyCertificateOutlined style={{ color: '#1890ff' }} aria-hidden="true" />
|
||||
<span className="truncate max-w-[200px] inline-block align-bottom">{selectedRole.roleName}</span>
|
||||
<Tag color="blue">{selectedRole.roleCode}</Tag>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SaveOutlined aria-hidden="true" />}
|
||||
loading={saving}
|
||||
onClick={savePermissions}
|
||||
disabled={!can("sys:role:permission:save") || (selectedRole.roleCode === 'TENANT_ADMIN' && !isPlatformMode)}
|
||||
>
|
||||
{t('roles.savePerms')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Tabs defaultActiveKey="permissions" className="role-tabs">
|
||||
<Tabs.TabPane
|
||||
tab={<Space><KeyOutlined aria-hidden="true" />{t('roles.funcPerms')}</Space>}
|
||||
key="permissions"
|
||||
>
|
||||
<div className="role-permission-tree-v2" style={{ maxHeight: 'calc(100vh - 400px)', overflowY: 'auto' }}>
|
||||
<Tree
|
||||
checkable
|
||||
selectable={false}
|
||||
checkStrictly={false}
|
||||
treeData={permissionTreeData}
|
||||
checkedKeys={selectedPermIds}
|
||||
onCheck={(keys, info) => {
|
||||
const checked = Array.isArray(keys) ? keys : keys.checked;
|
||||
const halfChecked = info.halfCheckedKeys || [];
|
||||
setSelectedPermIds(checked.map(k => Number(k)));
|
||||
setHalfCheckedIds(halfChecked.map(k => Number(k)));
|
||||
}}
|
||||
defaultExpandAll
|
||||
/>
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane
|
||||
tab={<Space><UserOutlined aria-hidden="true" />{t('roles.assignedUsers')} ({roleUsers.length})</Space>}
|
||||
key="users"
|
||||
>
|
||||
<div className="mb-4 flex justify-end">
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<UserAddOutlined aria-hidden="true" />}
|
||||
onClick={openUserModal}
|
||||
disabled={!can("sys:role:update")}
|
||||
>
|
||||
{t('common.create')}
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
rowKey="userId"
|
||||
size="small"
|
||||
loading={loadingUsers}
|
||||
dataSource={roleUsers}
|
||||
pagination={{ pageSize: 10, showTotal: (total) => t('common.total', { total }) }}
|
||||
columns={[
|
||||
{
|
||||
title: t('users.userInfo'),
|
||||
render: (_, r) => (
|
||||
<Space>
|
||||
<UserOutlined aria-hidden="true" />
|
||||
<div className="min-w-0">
|
||||
<div style={{ fontWeight: 500 }} className="truncate">{r.displayName}</div>
|
||||
<div style={{ fontSize: 12, color: '#8c8c8c' }} className="truncate">@{r.username}</div>
|
||||
</div>
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
{ title: t('users.phone'), dataIndex: 'phone', className: 'tabular-nums' },
|
||||
{ title: t('users.email'), dataIndex: 'email' },
|
||||
{
|
||||
title: t('common.status'),
|
||||
dataIndex: 'status',
|
||||
width: 80,
|
||||
render: (s: number) => {
|
||||
const item = statusDict.find(i => i.itemValue === String(s));
|
||||
return (
|
||||
<Tag color={s === 1 ? 'green' : 'red'}>
|
||||
{item ? item.itemLabel : (s === 1 ? '正常' : '禁用')}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('common.action'),
|
||||
key: 'action',
|
||||
width: 100,
|
||||
render: (_, record) => (
|
||||
<Popconfirm
|
||||
title={t('common.delete') + "?"}
|
||||
onConfirm={() => handleUnbindUser(record.userId)}
|
||||
disabled={!can("sys:role:update")}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
size="small"
|
||||
icon={<DeleteOutlined aria-hidden="true" />}
|
||||
disabled={!can("sys:role:update")}
|
||||
/>
|
||||
</Popconfirm>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* Right: Permission and User Management */}
|
||||
<Col span={17} style={{ height: '100%' }}>
|
||||
{selectedRole ? (
|
||||
<Card
|
||||
className="shadow-sm"
|
||||
bordered={false}
|
||||
style={{ height: '100%', borderRadius: '12px', display: 'flex', flexDirection: 'column' }}
|
||||
bodyStyle={{ flex: 1, overflow: 'hidden', padding: '0', display: 'flex', flexDirection: 'column' }}
|
||||
title={
|
||||
<Space size={16}>
|
||||
<div style={{ width: 40, height: 40, background: '#e6f7ff', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<SafetyCertificateOutlined style={{ fontSize: 20, color: '#1890ff' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 600 }}>{selectedRole.roleName}</div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>{selectedRole.roleCode}</Text>
|
||||
</div>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}
|
||||
loading={saving}
|
||||
onClick={savePermissions}
|
||||
disabled={!can("sys:role:permission:save") || (selectedRole.roleCode === 'TENANT_ADMIN' && !isPlatformMode)}
|
||||
style={{ borderRadius: '6px' }}
|
||||
>
|
||||
保存权限配置
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Tabs defaultActiveKey="permissions" className="role-detail-tabs" style={{ height: '100%' }}>
|
||||
<Tabs.TabPane
|
||||
tab={<Space><KeyOutlined />功能权限</Space>}
|
||||
key="permissions"
|
||||
>
|
||||
<div style={{ padding: '0 24px 24px 24px', height: 'calc(100vh - 350px)', overflowY: 'auto' }}>
|
||||
<div className="permission-tree-wrapper">
|
||||
<Tree
|
||||
checkable
|
||||
selectable={false}
|
||||
checkStrictly={false}
|
||||
treeData={permissionTreeData}
|
||||
checkedKeys={selectedPermIds}
|
||||
onCheck={(keys, info) => {
|
||||
const checked = Array.isArray(keys) ? keys : keys.checked;
|
||||
const halfChecked = info.halfCheckedKeys || [];
|
||||
setSelectedPermIds(checked.map(k => Number(k)));
|
||||
setHalfCheckedIds(halfChecked.map(k => Number(k)));
|
||||
}}
|
||||
defaultExpandAll
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
|
||||
<Tabs.TabPane
|
||||
tab={<Space><TeamOutlined />成员管理 ({roleUsers.length})</Space>}
|
||||
key="users"
|
||||
>
|
||||
<div style={{ padding: '0 24px 24px 24px', height: 'calc(100vh - 350px)', overflowY: 'auto' }}>
|
||||
<div className="mb-4 flex justify-between items-center">
|
||||
<Title level={5} style={{ margin: 0 }}>已分配用户</Title>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
icon={<UserAddOutlined />}
|
||||
onClick={openUserModal}
|
||||
disabled={!can("sys:role:update")}
|
||||
>
|
||||
关联用户
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
rowKey="userId"
|
||||
size="small"
|
||||
loading={loadingUsers}
|
||||
dataSource={roleUsers}
|
||||
pagination={{ pageSize: 10, size: 'small' }}
|
||||
columns={[
|
||||
{
|
||||
title: '用户信息',
|
||||
render: (_, r) => (
|
||||
<Space>
|
||||
<Avatar size="small" icon={<UserOutlined />} style={{ backgroundColor: '#f0f2f5', color: '#8c8c8c' }} />
|
||||
<div>
|
||||
<div style={{ fontWeight: 500 }}>{r.displayName}</div>
|
||||
<div style={{ fontSize: 11, color: '#bfbfbf' }}>@{r.username}</div>
|
||||
</div>
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
{ title: '手机号', dataIndex: 'phone', className: 'tabular-nums' },
|
||||
{ title: '状态', dataIndex: 'status', width: 80, render: (s: number) => <Badge status={s === 1 ? 'success' : 'error'} text={s === 1 ? '正常' : '禁用'} /> },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
render: (_, record) => (
|
||||
<Popconfirm title="移除关联？" onConfirm={() => handleUnbindUser(record.userId)} disabled={!can("sys:role:update")}>
|
||||
<Button type="text" danger size="small" icon={<DeleteOutlined />} disabled={!can("sys:role:update")} />
|
||||
</Popconfirm>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
) : (
|
||||
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fff', borderRadius: '12px' }}>
|
||||
<Empty description="请从左侧选择一个角色进行管理" />
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
) : (
|
||||
<Card className="full-height-card flex items-center justify-center shadow-sm">
|
||||
<Empty description={t('roles.selectRole')} />
|
||||
</Card>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* User Selection Modal */}
|
||||
<Modal
|
||||
title="关联用户到角色"
|
||||
title={t('roles.assignedUsers')}
|
||||
open={userModalOpen}
|
||||
onCancel={() => setUserModalOpen(false)}
|
||||
onOk={handleAddUsers}
|
||||
width={650}
|
||||
width={600}
|
||||
destroyOnClose
|
||||
>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div className="mb-4">
|
||||
<Input
|
||||
placeholder="搜索用户名/显示名"
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder={t('users.searchPlaceholder')}
|
||||
prefix={<SearchOutlined aria-hidden="true" />}
|
||||
value={userSearchText}
|
||||
onChange={e => setUserSearchText(e.target.value)}
|
||||
allowClear
|
||||
|
|
@ -596,49 +612,61 @@ export default function Roles() {
|
|||
rowKey="userId"
|
||||
size="small"
|
||||
dataSource={filteredModalUsers}
|
||||
pagination={{ pageSize: 6 }}
|
||||
pagination={{ pageSize: 5 }}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedUserKeys,
|
||||
onChange: (keys) => setSelectedUserKeys(keys as number[])
|
||||
}}
|
||||
columns={[
|
||||
{ title: '显示名称', dataIndex: 'displayName' },
|
||||
{ title: '用户名', dataIndex: 'username' },
|
||||
{ title: '手机号', dataIndex: 'phone' }
|
||||
{ title: t('users.displayName'), dataIndex: 'displayName' },
|
||||
{ title: t('users.username'), dataIndex: 'username' },
|
||||
{ title: t('users.org'), dataIndex: 'orgId', render: () => '-' } // Simplification
|
||||
]}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
{/* Basic Info Drawer */}
|
||||
<Drawer
|
||||
title={editing ? '编辑角色信息' : '创建新角色'}
|
||||
title={editing ? t('roles.drawerTitleEdit') : t('roles.drawerTitleCreate')}
|
||||
open={drawerOpen}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
width={420}
|
||||
width={400}
|
||||
destroyOnClose
|
||||
footer={
|
||||
<div style={{ textAlign: 'right', padding: '10px 16px' }}>
|
||||
<Space>
|
||||
<Button onClick={() => setDrawerOpen(false)}>取消</Button>
|
||||
<Button type="primary" loading={saving} onClick={submitBasic}>确定</Button>
|
||||
</Space>
|
||||
<div className="flex justify-end gap-2 p-2">
|
||||
<Button onClick={() => setDrawerOpen(false)}>{t('common.cancel')}</Button>
|
||||
<Button type="primary" loading={saving} onClick={submitBasic}>{t('common.confirm')}</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item label="所属租户" name="tenantId" rules={[{ required: true }]} hidden={!isPlatformMode}>
|
||||
<Select options={tenants.map(t => ({ label: t.tenantName, value: t.id }))} disabled={!!editing} />
|
||||
<Form.Item
|
||||
label={t('users.tenant')}
|
||||
name="tenantId"
|
||||
rules={[{ required: true }]}
|
||||
hidden={!isPlatformMode}
|
||||
>
|
||||
<Select
|
||||
options={tenants.map(t => ({ label: t.tenantName, value: t.id }))}
|
||||
disabled={!!editing}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="角色名称" name="roleName" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入角色名称" />
|
||||
{!isPlatformMode && (
|
||||
<Form.Item label={t('users.tenant')}>
|
||||
<Input value={tenants.find(t => t.id === activeTenantId)?.tenantName || "当前租户"} disabled />
|
||||
</Form.Item>
|
||||
)}
|
||||
<Form.Item label={t('roles.roleName')} name="roleName" rules={[{ required: true }]}>
|
||||
<Input placeholder={t('roles.roleName')} />
|
||||
</Form.Item>
|
||||
<Form.Item label="角色编码" name="roleCode" rules={[{ required: true }]}>
|
||||
<Input placeholder="由字母数字下划线组成" disabled={!!editing} />
|
||||
<Form.Item label={t('roles.roleCode')} name="roleCode" rules={[{ required: true }]}>
|
||||
<Input placeholder={t('roles.roleCode')} disabled={!!editing} />
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status" initialValue={1}>
|
||||
<Form.Item label={t('common.status')} name="status" initialValue={1}>
|
||||
<Select options={statusDict.map(i => ({ label: i.itemLabel, value: Number(i.itemValue) }))} />
|
||||
</Form.Item>
|
||||
<Form.Item label="备注" name="remark">
|
||||
<Input.TextArea rows={4} placeholder="角色功能描述..." />
|
||||
<Form.Item label={t('common.remark')} name="remark">
|
||||
<Input.TextArea rows={3} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -141,41 +141,6 @@ export default function Users() {
|
|||
|
||||
const selectedTenantId = Form.useWatch("tenantId", form);
|
||||
|
||||
const memberships = Form.useWatch("memberships", form) || [];
|
||||
|
||||
const tenantMap = useMemo(() => {
|
||||
const map: Record<number, string> = {};
|
||||
tenants.forEach(t => map[t.id] = t.tenantName);
|
||||
return map;
|
||||
}, [tenants]);
|
||||
|
||||
// 计算当前可用的角色选项
|
||||
const roleOptions = useMemo(() => {
|
||||
if (!isPlatformMode) {
|
||||
return roles.map(r => ({ label: r.roleName, value: r.roleId }));
|
||||
}
|
||||
|
||||
// 平台模式：根据 memberships 过滤角色
|
||||
const selectedTenantIds = new Set(memberships.map((m: any) => m?.tenantId).filter(Boolean));
|
||||
|
||||
return roles
|
||||
.filter(r => selectedTenantIds.has(r.tenantId))
|
||||
.map(r => {
|
||||
const tenantName = tenantMap[r.tenantId] || `租户:${r.tenantId}`;
|
||||
return {
|
||||
label: (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<span>{r.roleName}</span>
|
||||
<span style={{ color: '#bfbfbf', fontSize: '11px', marginLeft: 8 }}>[{tenantName}]</span>
|
||||
</div>
|
||||
),
|
||||
value: r.roleId,
|
||||
// 增加一个纯文本 label 用于搜索
|
||||
searchText: `${r.roleName} ${tenantName}`
|
||||
};
|
||||
});
|
||||
}, [isPlatformMode, roles, memberships, tenantMap]);
|
||||
|
||||
const loadBaseData = async () => {
|
||||
try {
|
||||
const promises: Promise<any>[] = [listRoles()];
|
||||
|
|
@ -224,6 +189,12 @@ export default function Users() {
|
|||
fetchOrgs();
|
||||
}, [selectedTenantId, isPlatformMode, activeTenantId]);
|
||||
|
||||
const tenantMap = useMemo(() => {
|
||||
const map: Record<number, string> = {};
|
||||
tenants.forEach(t => map[t.id] = t.tenantName);
|
||||
return map;
|
||||
}, [tenants]);
|
||||
|
||||
const orgTreeData = useMemo(() => buildOrgTree(orgs), [orgs]);
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
|
|
@ -566,8 +537,7 @@ export default function Users() {
|
|||
<Select
|
||||
mode="multiple"
|
||||
placeholder={t('users.roles')}
|
||||
options={roleOptions}
|
||||
optionFilterProp={isPlatformMode ? "searchText" : "label"}
|
||||
options={roles.map(r => ({ label: r.roleName, value: r.roleId }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Card, Row, Col, Typography, Tag, Space, Divider, Button, Skeleton, Empty, List, Avatar, Breadcrumb, Popover, Input, Select, message, Drawer, Form, Modal, Progress } from 'antd';
|
||||
import { Card, Row, Col, Typography, Tag, Space, Divider, Button, Skeleton, Empty, List, Avatar, Breadcrumb, Popover, Input, Select, message, Drawer, Form, Modal } from 'antd';
|
||||
import { LeftOutlined, UserOutlined, ClockCircleOutlined, AudioOutlined, RobotOutlined, LoadingOutlined, EditOutlined, SyncOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import dayjs from 'dayjs';
|
||||
import { getMeetingDetail, getTranscripts, updateSpeakerInfo, reSummary, updateMeeting, MeetingVO, MeetingTranscriptVO, getMeetingProgress, MeetingProgress } from '../../api/business/meeting';
|
||||
import { getMeetingDetail, getTranscripts, updateSpeakerInfo, reSummary, updateMeeting, MeetingVO, MeetingTranscriptVO } from '../../api/business/meeting';
|
||||
import { getAiModelPage, getAiModelDefault, AiModelVO } from '../../api/business/aimodel';
|
||||
import { getPromptPage, PromptTemplateVO } from '../../api/business/prompt';
|
||||
import { useDict } from '../../hooks/useDict';
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@ import { Card, Button, Input, Space, Tag, message, Popconfirm, Typography, Row,
|
|||
import {
|
||||
PlusOutlined, DeleteOutlined, SearchOutlined, CheckCircleOutlined,
|
||||
LoadingOutlined, UserOutlined, CalendarOutlined, PlayCircleOutlined,
|
||||
TeamOutlined, ClockCircleOutlined, EditOutlined, RightOutlined,
|
||||
SyncOutlined, InfoCircleOutlined
|
||||
TeamOutlined, ClockCircleOutlined, EditOutlined, RightOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { getMeetingPage, deleteMeeting, MeetingVO, getMeetingProgress, MeetingProgress } from '../../api/business/meeting';
|
||||
import dayjs from 'dayjs';
|
||||
import { Progress } from 'antd';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
// 状态标签组件：集成进度背景
|
||||
const IntegratedStatusTag: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
|
||||
// 进度显示组件
|
||||
const MeetingProgressDisplay: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
|
||||
const [progress, setProgress] = useState<MeetingProgress | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -29,183 +29,31 @@ const IntegratedStatusTag: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
|
|||
return () => clearInterval(timer);
|
||||
}, [meeting.id, meeting.status]);
|
||||
|
||||
const statusConfig: Record<number, { text: string; color: string; bgColor: string }> = {
|
||||
0: { text: '排队中', color: '#8c8c8c', bgColor: '#f5f5f5' },
|
||||
1: { text: '识别中', color: '#1890ff', bgColor: '#e6f7ff' },
|
||||
2: { text: '总结中', color: '#faad14', bgColor: '#fff7e6' },
|
||||
3: { text: '已完成', color: '#52c41a', bgColor: '#f6ffed' },
|
||||
4: { text: '失败', color: '#ff4d4f', bgColor: '#fff1f0' }
|
||||
};
|
||||
if (meeting.status !== 1 && meeting.status !== 2) return null;
|
||||
|
||||
const config = statusConfig[meeting.status] || statusConfig[0];
|
||||
const percent = progress?.percent || 0;
|
||||
const isProcessing = meeting.status === 1 || meeting.status === 2;
|
||||
const isError = percent < 0;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: '2px 10px',
|
||||
borderRadius: 6,
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
color: config.color,
|
||||
background: config.bgColor,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
border: `1px solid ${isProcessing ? 'transparent' : '#eee'}`,
|
||||
cursor: 'default',
|
||||
minWidth: 80,
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
{/* 进度填充背景 */}
|
||||
{isProcessing && percent > 0 && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: `${percent}%`,
|
||||
background: meeting.status === 1 ? 'rgba(24, 144, 255, 0.2)' : 'rgba(250, 173, 20, 0.2)',
|
||||
transition: 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
zIndex: 0
|
||||
}} />
|
||||
)}
|
||||
|
||||
<span style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
{isProcessing ? <SyncOutlined spin style={{ fontSize: 10 }} /> : null}
|
||||
{config.text}
|
||||
{isProcessing && <span style={{ fontFamily: 'monospace', marginLeft: 4 }}>{percent}%</span>}
|
||||
</span>
|
||||
<div style={{ padding: '0 24px 12px 24px', marginTop: -8 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
|
||||
<Text type="secondary" style={{ fontSize: 11 }}>
|
||||
{progress?.message || '处理中...'}
|
||||
</Text>
|
||||
{!isError && <Text strong style={{ color: '#1890ff', fontSize: 11 }}>{percent}%</Text>}
|
||||
</div>
|
||||
<Progress
|
||||
percent={isError ? 100 : percent}
|
||||
size="small"
|
||||
status={isError ? 'exception' : 'active'}
|
||||
showInfo={false}
|
||||
strokeColor={isError ? '#ff4d4f' : '#1890ff'}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 新增：提取进度信息 Hook 供卡片内部使用
|
||||
const useMeetingProgress = (meeting: MeetingVO) => {
|
||||
const [progress, setProgress] = useState<MeetingProgress | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (meeting.status !== 1 && meeting.status !== 2) return;
|
||||
const fetchProgress = async () => {
|
||||
try {
|
||||
const res = await getMeetingProgress(meeting.id);
|
||||
if (res.data && res.data.data) setProgress(res.data.data);
|
||||
} catch (err) {}
|
||||
};
|
||||
fetchProgress();
|
||||
const timer = setInterval(fetchProgress, 3000);
|
||||
return () => clearInterval(timer);
|
||||
}, [meeting.id, meeting.status]);
|
||||
|
||||
return progress;
|
||||
};
|
||||
|
||||
const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () => void }> = ({ item, config, fetchData }) => {
|
||||
const navigate = useNavigate();
|
||||
const progress = useMeetingProgress(item);
|
||||
const isProcessing = item.status === 1 || item.status === 2;
|
||||
|
||||
return (
|
||||
<List.Item style={{ marginBottom: 24 }}>
|
||||
<Card
|
||||
hoverable
|
||||
onClick={() => navigate(`/meetings/${item.id}`)}
|
||||
className="meeting-card"
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
border: 'none',
|
||||
height: '220px',
|
||||
position: 'relative',
|
||||
boxShadow: '0 6px 16px rgba(0,0,0,0.04)',
|
||||
transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)'
|
||||
}}
|
||||
bodyStyle={{ padding: 0, display: 'flex', height: '100%' }}
|
||||
>
|
||||
{/* 左侧状态装饰条 - 增加分析中的呼吸灯效果 */}
|
||||
<div
|
||||
className={isProcessing ? 'status-bar-active' : ''}
|
||||
style={{ width: 6, backgroundColor: config.color, borderRadius: '16px 0 0 16px' }}
|
||||
></div>
|
||||
|
||||
<div style={{ flex: 1, padding: '20px 24px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
{/* 右上角醒目图标 */}
|
||||
<div className="card-actions" style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }} onClick={e => e.stopPropagation()}>
|
||||
<Space size={8}>
|
||||
<Tooltip title="编辑">
|
||||
<div className="icon-btn edit" onClick={() => navigate(`/meetings/${item.id}`)}>
|
||||
<EditOutlined />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Popconfirm title="确定删除？" onConfirm={() => deleteMeeting(item.id).then(fetchData)}>
|
||||
<Tooltip title="删除">
|
||||
<div className="icon-btn delete">
|
||||
<DeleteOutlined />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 内容排版 */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<IntegratedStatusTag meeting={item} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 16, paddingRight: 40, height: '44px', overflow: 'hidden' }}>
|
||||
<Text strong style={{ fontSize: 16, color: '#262626', lineHeight: '22px' }} ellipsis={{ tooltip: item.title }}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Space direction="vertical" size={10} style={{ width: '100%' }}>
|
||||
<div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
|
||||
<CalendarOutlined style={{ marginRight: 10 }} />
|
||||
{dayjs(item.meetingTime).format('YYYY-MM-DD HH:mm')}
|
||||
</div>
|
||||
|
||||
{isProcessing ? (
|
||||
<div style={{
|
||||
fontSize: '12px',
|
||||
color: item.status === 1 ? '#1890ff' : '#faad14',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: item.status === 1 ? '#e6f7ff' : '#fff7e6',
|
||||
padding: '4px 8px',
|
||||
borderRadius: 4,
|
||||
marginTop: 2
|
||||
}}>
|
||||
<InfoCircleOutlined style={{ marginRight: 6 }} />
|
||||
<Text ellipsis style={{ color: 'inherit', fontSize: '12px' }}>
|
||||
{progress?.message || '等待引擎调度...'}
|
||||
</Text>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
|
||||
<TeamOutlined style={{ marginRight: 10 }} />
|
||||
<Text type="secondary" ellipsis style={{ maxWidth: '85%' }}>{item.participants || '无参与人员'}</Text>
|
||||
</div>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 底部详情提示 */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
{item.tags?.split(',').slice(0, 2).map(t => (
|
||||
<Tag key={t} style={{ border: '1px solid #f0f0f0', backgroundColor: '#fff', fontSize: 10, margin: 0, borderRadius: 4 }}>{t}</Tag>
|
||||
))}
|
||||
</div>
|
||||
<RightOutlined style={{ color: '#bfbfbf', fontSize: 12 }} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const Meetings: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
|
@ -298,14 +146,98 @@ const Meetings: React.FC = () => {
|
|||
dataSource={data}
|
||||
renderItem={(item) => {
|
||||
const config = statusConfig[item.status] || statusConfig[0];
|
||||
return <MeetingCardItem item={item} config={config} fetchData={fetchData} />;
|
||||
return (
|
||||
<List.Item style={{ marginBottom: 24 }}>
|
||||
<Card
|
||||
hoverable
|
||||
onClick={() => navigate(`/meetings/${item.id}`)}
|
||||
className="meeting-card"
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
border: 'none',
|
||||
height: 'auto',
|
||||
minHeight: '220px',
|
||||
position: 'relative',
|
||||
boxShadow: '0 6px 16px rgba(0,0,0,0.04)',
|
||||
transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)'
|
||||
}}
|
||||
bodyStyle={{ padding: 0, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<div style={{ display: 'flex', flex: 1 }}>
|
||||
{/* 左侧状态装饰条 */}
|
||||
<div style={{ width: 6, backgroundColor: config.color, borderRadius: '16px 0 0 16px' }}></div>
|
||||
|
||||
<div style={{ flex: 1, padding: '20px 24px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
{/* 右上角醒目图标 */}
|
||||
<div className="card-actions" style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }} onClick={e => e.stopPropagation()}>
|
||||
<Space size={8}>
|
||||
<Tooltip title="编辑">
|
||||
<div className="icon-btn edit" onClick={() => navigate(`/meetings/${item.id}`)}>
|
||||
<EditOutlined />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Popconfirm title="确定删除？" onConfirm={() => deleteMeeting(item.id).then(fetchData)}>
|
||||
<Tooltip title="删除">
|
||||
<div className="icon-btn delete">
|
||||
<DeleteOutlined />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 内容排版 */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Tag color={config.bgColor} style={{ color: config.color, border: 'none', borderRadius: 4, fontWeight: 600, fontSize: 11 }}>
|
||||
{item.status === 1 || item.status === 2 ? <LoadingOutlined spin style={{ marginRight: 4 }} /> : null}
|
||||
{config.text}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 16, paddingRight: 40, height: '44px', overflow: 'hidden' }}>
|
||||
<Text strong style={{ fontSize: 16, color: '#262626', lineHeight: '22px' }} ellipsis={{ tooltip: item.title }}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Space direction="vertical" size={10} style={{ width: '100%' }}>
|
||||
<div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
|
||||
<CalendarOutlined style={{ marginRight: 10 }} />
|
||||
{dayjs(item.meetingTime).format('YYYY-MM-DD HH:mm')}
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
|
||||
<TeamOutlined style={{ marginRight: 10 }} />
|
||||
<Text type="secondary" ellipsis style={{ maxWidth: '85%' }}>{item.participants || '无参与人员'}</Text>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 底部详情提示 */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
{item.tags?.split(',').slice(0, 2).map(t => (
|
||||
<Tag key={t} style={{ border: '1px solid #f0f0f0', backgroundColor: '#fff', fontSize: 10, margin: 0, borderRadius: 4 }}>{t}</Tag>
|
||||
))}
|
||||
</div>
|
||||
<RightOutlined style={{ color: '#bfbfbf', fontSize: 12 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 进度条显示 */}
|
||||
<MeetingProgressDisplay meeting={item} />
|
||||
</Card>
|
||||
</List.Item>
|
||||
);
|
||||
}}
|
||||
locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }}
|
||||
/>
|
||||
</Skeleton>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
{/* 精美底部分页 */}
|
||||
{total > 0 && (
|
||||
<div style={{ flexShrink: 0, display: 'flex', justifyContent: 'center', padding: '16px 0 8px 0' }}>
|
||||
<Pagination
|
||||
|
|
@ -324,14 +256,6 @@ const Meetings: React.FC = () => {
|
|||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
|
||||
}
|
||||
.status-bar-active {
|
||||
animation: statusBreathing 2s infinite ease-in-out;
|
||||
}
|
||||
@keyframes statusBreathing {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
.icon-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue