oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into reform-mp

Browse Source
This commit is contained in:
hw
2025-11-18 13:45:13 +08:00
parent 9c8316c385 07c3cb2f13
commit f1aec24f34
424 changed files with 37728 additions and 1604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-ele/src/api/ai/image/index.ts
View File

@@ -9,9 +9,11 @@ export namespace AiImageApi {
label: string; // Make Variations 文本
style: number; // 样式: 2（Primary）、3（Green）
}
// AI 绘图
/** AI 绘图 */
export interface Image {
id: number; // 编号
userId: number;
platform: string; // 平台
model: string; // 模型
prompt: string; // 提示词
@@ -82,6 +84,7 @@ export function deleteImageMy(id: number) {
}
// ================ midjourney 专属 ================
// 【Midjourney】生成图片
export function midjourneyImagine(data: AiImageApi.ImageMidjourneyImagineReq) {
return requestClient.post(`/ai/image/midjourney/imagine`, data);
@@ -93,6 +96,7 @@ export function midjourneyAction(data: AiImageApi.ImageMidjourneyAction) {
}
// ================ 绘图管理 ================
// 查询绘画分页
export function getImagePage(params: any) {
return requestClient.get<AiImageApi.Image[]>(`/ai/image/page`, { params });

1
apps/web-ele/src/api/ai/knowledge/knowledge/index.ts
View File

@@ -27,6 +27,7 @@ export function getKnowledge(id: number) {
`/ai/knowledge/get?id=${id}`,
);
}
// 新增知识库
export function createKnowledge(data: AiKnowledgeKnowledgeApi.Knowledge) {
return requestClient.post('/ai/knowledge/create', data);

8
apps/web-ele/src/api/ai/knowledge/segment/index.ts
View File

@@ -48,9 +48,13 @@ export function updateKnowledgeSegment(
}
// 修改知识库分段状态
export function updateKnowledgeSegmentStatus(data: any) {
return requestClient.put('/ai/knowledge/segment/update-status', data);
export function updateKnowledgeSegmentStatus(id: number, status: number) {
return requestClient.put('/ai/knowledge/segment/update-status', {
id,
status,
});
}
// 删除知识库分段
export function deleteKnowledgeSegment(id: number) {
return requestClient.delete(`/ai/knowledge/segment/delete?id=${id}`);

50
apps/web-ele/src/api/ai/workflow/index.ts
View File

@@ -2,28 +2,48 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export function getWorkflowPage(params: PageParam) {
return requestClient.get<PageResult<any>>('/ai/workflow/page', {
params,
});
export namespace AiWorkflowApi {
/** 工作流 */
export interface Workflow {
id?: number; // 编号
name: string; // 工作流名称
code: string; // 工作流标识
graph: string; // 工作流模型 JSON 数据
remark?: string; // 备注
status: number; // 状态
createTime?: Date; // 创建时间
}
}
export const getWorkflow = (id: number | string) => {
return requestClient.get(`/ai/workflow/get?id=${id}`);
};
/** 查询工作流管理列表 */
export function getWorkflowPage(params: PageParam) {
return requestClient.get<PageResult<AiWorkflowApi.Workflow>>(
'/ai/workflow/page',
{ params },
);
}
export const createWorkflow = (data: any) => {
/** 查询工作流详情 */
export function getWorkflow(id: number) {
return requestClient.get<AiWorkflowApi.Workflow>(`/ai/workflow/get?id=${id}`);
}
/** 新增工作流 */
export function createWorkflow(data: AiWorkflowApi.Workflow) {
return requestClient.post('/ai/workflow/create', data);
};
}
export const updateWorkflow = (data: any) => {
/** 修改工作流 */
export function updateWorkflow(data: AiWorkflowApi.Workflow) {
return requestClient.put('/ai/workflow/update', data);
};
}
export const deleteWorkflow = (id: number | string) => {
/** 删除工作流 */
export function deleteWorkflow(id: number) {
return requestClient.delete(`/ai/workflow/delete?id=${id}`);
};
}
export const testWorkflow = (data: any) => {
/** 测试工作流 */
export function testWorkflow(data: any) {
return requestClient.post('/ai/workflow/test', data);
};
}

35
apps/web-ele/src/api/crm/business/index.ts
View File

@@ -5,19 +5,6 @@ import type { CrmPermissionApi } from '#/api/crm/permission';
import { requestClient } from '#/api/request';
export namespace CrmBusinessApi {
/** 商机产品信息 */
export interface BusinessProduct {
id: number;
productId: number;
productName: string;
productNo: string;
productUnit: number;
productPrice: number;
businessPrice: number;
count: number;
totalPrice: number;
}
/** 商机信息 */
export interface Business {
id: number;
@@ -49,7 +36,21 @@ export namespace CrmBusinessApi {
products?: BusinessProduct[];
}
export interface BusinessStatus {
/** 商机产品信息 */
export interface BusinessProduct {
id: number;
productId: number;
productName: string;
productNo: string;
productUnit: number;
productPrice: number;
businessPrice: number;
count: number;
totalPrice: number;
}
/** 商机更新状态请求 */
export interface BusinessUpdateStatusReqVO {
id: number;
statusId: number | undefined;
endStatus: number | undefined;
@@ -97,7 +98,9 @@ export function updateBusiness(data: CrmBusinessApi.Business) {
}
/** 修改商机状态 */
export function updateBusinessStatus(data: CrmBusinessApi.BusinessStatus) {
export function updateBusinessStatus(
data: CrmBusinessApi.BusinessUpdateStatusReqVO,
) {
return requestClient.put('/crm/business/update-status', data);
}
@@ -120,6 +123,6 @@ export function getBusinessPageByContact(params: PageParam) {
}
/** 商机转移 */
export function transferBusiness(data: CrmPermissionApi.TransferReq) {
export function transferBusiness(data: CrmPermissionApi.BusinessTransferReqVO) {
return requestClient.put('/crm/business/transfer', data);
}

16
apps/web-ele/src/api/crm/business/status/index.ts
View File

@@ -3,14 +3,6 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace CrmBusinessStatusApi {
/** 商机状态信息 */
export interface BusinessStatusType {
[x: string]: any;
id?: number;
name: string;
percent: number;
}
/** 商机状态组信息 */
export interface BusinessStatus {
id?: number;
@@ -21,6 +13,14 @@ export namespace CrmBusinessStatusApi {
createTime?: Date;
statuses?: BusinessStatusType[];
}
/** 商机状态信息 */
export interface BusinessStatusType {
id?: number;
name: string;
percent: number;
[x: string]: any;
}
}
/** 默认商机状态 */

2
apps/web-ele/src/api/crm/clue/index.ts
View File

@@ -71,7 +71,7 @@ export function exportClue(params: any) {
}
/** 线索转移 */
export function transferClue(data: CrmPermissionApi.TransferReq) {
export function transferClue(data: CrmPermissionApi.BusinessTransferReqVO) {
return requestClient.put('/crm/clue/transfer', data);
}

14
apps/web-ele/src/api/crm/contact/index.ts
View File

@@ -38,13 +38,13 @@ export namespace CrmContactApi {
}
/** 联系人商机关联请求 */
export interface ContactBusinessReq {
export interface ContactBusinessReqVO {
contactId: number;
businessIds: number[];
}
/** 商机联系人关联请求 */
export interface BusinessContactReq {
export interface BusinessContactReqVO {
businessId: number;
contactIds: number[];
}
@@ -108,33 +108,33 @@ export function getSimpleContactList() {
/** 批量新增联系人商机关联 */
export function createContactBusinessList(
data: CrmContactApi.ContactBusinessReq,
data: CrmContactApi.ContactBusinessReqVO,
) {
return requestClient.post('/crm/contact/create-business-list', data);
}
/** 批量新增商机联系人关联 */
export function createBusinessContactList(
data: CrmContactApi.BusinessContactReq,
data: CrmContactApi.BusinessContactReqVO,
) {
return requestClient.post('/crm/contact/create-business-list2', data);
}
/** 解除联系人商机关联 */
export function deleteContactBusinessList(
data: CrmContactApi.ContactBusinessReq,
data: CrmContactApi.ContactBusinessReqVO,
) {
return requestClient.delete('/crm/contact/delete-business-list', { data });
}
/** 解除商机联系人关联 */
export function deleteBusinessContactList(
data: CrmContactApi.BusinessContactReq,
data: CrmContactApi.BusinessContactReqVO,
) {
return requestClient.delete('/crm/contact/delete-business-list2', { data });
}
/** 联系人转移 */
export function transferContact(data: CrmPermissionApi.TransferReq) {
export function transferContact(data: CrmPermissionApi.BusinessTransferReqVO) {
return requestClient.put('/crm/contact/transfer', data);
}

29
apps/web-ele/src/api/crm/contract/index.ts
View File

@@ -5,19 +5,6 @@ import type { CrmPermissionApi } from '#/api/crm/permission';
import { requestClient } from '#/api/request';
export namespace CrmContractApi {
/** 合同产品信息 */
export interface ContractProduct {
id: number;
productId: number;
productName: string;
productNo: string;
productUnit: number;
productPrice: number;
contractPrice: number;
count: number;
totalPrice: number;
}
/** 合同信息 */
export interface Contract {
id: number;
@@ -50,6 +37,20 @@ export namespace CrmContractApi {
creatorName: string;
updateTime?: Date;
products?: ContractProduct[];
contactName?: string;
}
/** 合同产品信息 */
export interface ContractProduct {
id: number;
productId: number;
productName: string;
productNo: string;
productUnit: number;
productPrice: number;
contractPrice: number;
count: number;
totalPrice: number;
}
}
@@ -117,7 +118,7 @@ export function submitContract(id: number) {
}
/** 合同转移 */
export function transferContract(data: CrmPermissionApi.TransferReq) {
export function transferContract(data: CrmPermissionApi.BusinessTransferReqVO) {
return requestClient.put('/crm/contract/transfer', data);
}

10
apps/web-ele/src/api/crm/customer/index.ts
View File

@@ -16,6 +16,7 @@ export namespace CrmCustomerApi {
ownerUserId: number; // 负责人的用户编号
ownerUserName?: string; // 负责人的用户名称
ownerUserDept?: string; // 负责人的部门名称
ownerUserDeptName?: string; // 负责人的部门名称
lockStatus?: boolean;
dealStatus?: boolean;
mobile: string; // 手机号
@@ -34,8 +35,11 @@ export namespace CrmCustomerApi {
creatorName?: string; // 创建人名称
createTime: Date; // 创建时间
updateTime: Date; // 更新时间
poolDay?: number; // 距离进入公海天数
}
export interface CustomerImport {
/** 客户导入请求 */
export interface CustomerImportReqVO {
ownerUserId: number;
file: File;
updateSupport: boolean;
@@ -83,7 +87,7 @@ export function importCustomerTemplate() {
}
/** 导入客户 */
export function importCustomer(data: CrmCustomerApi.CustomerImport) {
export function importCustomer(data: CrmCustomerApi.CustomerImportReqVO) {
return requestClient.upload('/crm/customer/import', data);
}
@@ -95,7 +99,7 @@ export function getCustomerSimpleList() {
}
/** 客户转移 */
export function transferCustomer(data: CrmPermissionApi.TransferReq) {
export function transferCustomer(data: CrmPermissionApi.BusinessTransferReqVO) {
return requestClient.put('/crm/customer/transfer', data);
}

24
apps/web-ele/src/api/crm/followup/index.ts
View File

@@ -3,18 +3,6 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace CrmFollowUpApi {
/** 关联商机信息 */
export interface Business {
id: number;
name: string;
}
/** 关联联系人信息 */
export interface Contact {
id: number;
name: string;
}
/** 跟进记录信息 */
export interface FollowUpRecord {
id: number; // 编号
@@ -32,6 +20,18 @@ export namespace CrmFollowUpApi {
creator: string;
creatorName?: string;
}
/** 关联商机信息 */
export interface Business {
id: number;
name: string;
}
/** 关联联系人信息 */
export interface Contact {
id: number;
name: string;
}
}
/** 查询跟进记录分页 */

16
apps/web-ele/src/api/crm/operateLog/index.ts
View File

@@ -5,12 +5,6 @@ import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { requestClient } from '#/api/request';
export namespace CrmOperateLogApi {
/** 操作日志查询参数 */
export interface OperateLogQuery {
bizType: number;
bizId: number;
}
/** 操作日志信息 */
export interface OperateLog {
id: number;
@@ -22,10 +16,18 @@ export namespace CrmOperateLogApi {
creatorName?: string;
createTime: Date;
}
/** 操作日志查询请求 */
export interface OperateLogQueryReqVO {
bizType: number;
bizId: number;
}
}
/** 获得操作日志 */
export function getOperateLogPage(params: CrmOperateLogApi.OperateLogQuery) {
export function getOperateLogPage(
params: CrmOperateLogApi.OperateLogQueryReqVO,
) {
return requestClient.get<PageResult<SystemOperateLogApi.OperateLog>>(
'/crm/operate-log/page',
{ params },

9
apps/web-ele/src/api/crm/permission/index.ts
View File

@@ -17,14 +17,15 @@ export namespace CrmPermissionApi {
}
/** 数据权限转移请求 */
export interface TransferReq {
export interface BusinessTransferReqVO {
id: number; // 模块编号
newOwnerUserId: number; // 新负责人的用户编号
oldOwnerPermissionLevel?: number; // 老负责人加入团队后的权限级别
toBizTypes?: number[]; // 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择
}
export interface PermissionListReq {
/** 权限列表请求 */
export interface PermissionListReqVO {
bizId: number; // 模块数据编号
bizType: number; // 模块类型
}
@@ -54,7 +55,9 @@ export enum PermissionLevelEnum {
}
/** 获得数据权限列表（查询团队成员列表） */
export function getPermissionList(params: CrmPermissionApi.PermissionListReq) {
export function getPermissionList(
params: CrmPermissionApi.PermissionListReqVO,
) {
return requestClient.get<CrmPermissionApi.Permission[]>(
'/crm/permission/list',
{ params },

29
apps/web-ele/src/api/crm/receivable/index.ts
View File

@@ -3,14 +3,6 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace CrmReceivableApi {
/** 合同信息 */
export interface Contract {
id?: number;
name?: string;
no: string;
totalPrice: number;
}
/** 回款信息 */
export interface Receivable {
id: number;
@@ -35,20 +27,17 @@ export namespace CrmReceivableApi {
updateTime: Date; // 更新时间
}
export interface ReceivablePageParam extends PageParam {
no?: string;
planId?: number;
customerId?: number;
contractId?: number;
sceneType?: number;
auditStatus?: number;
/** 合同信息 */
export interface Contract {
id?: number;
name?: string;
no: string;
totalPrice: number;
}
}
/** 查询回款列表 */
export function getReceivablePage(
params: CrmReceivableApi.ReceivablePageParam,
) {
export function getReceivablePage(params: PageParam) {
return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
'/crm/receivable/page',
{ params },
@@ -56,9 +45,7 @@ export function getReceivablePage(
}
/** 查询回款列表，基于指定客户 */
export function getReceivablePageByCustomer(
params: CrmReceivableApi.ReceivablePageParam,
) {
export function getReceivablePageByCustomer(params: PageParam) {
return requestClient.get<PageResult<CrmReceivableApi.Receivable>>(
'/crm/receivable/page-by-customer',
{ params },

18
apps/web-ele/src/api/crm/receivable/plan/index.ts
View File

@@ -29,20 +29,10 @@ export namespace CrmReceivablePlanApi {
returnTime: Date;
};
}
export interface PlanPageParam extends PageParam {
customerId?: number;
contractId?: number;
contractNo?: string;
sceneType?: number;
remindType?: number;
}
}
/** 查询回款计划列表 */
export function getReceivablePlanPage(
params: CrmReceivablePlanApi.PlanPageParam,
) {
export function getReceivablePlanPage(params: PageParam) {
return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
'/crm/receivable-plan/page',
{ params },
@@ -50,9 +40,7 @@ export function getReceivablePlanPage(
}
/** 查询回款计划列表(按客户) */
export function getReceivablePlanPageByCustomer(
params: CrmReceivablePlanApi.PlanPageParam,
) {
export function getReceivablePlanPageByCustomer(params: PageParam) {
return requestClient.get<PageResult<CrmReceivablePlanApi.Plan>>(
'/crm/receivable-plan/page-by-customer',
{ params },
@@ -98,7 +86,7 @@ export function deleteReceivablePlan(id: number) {
}
/** 导出回款计划 Excel */
export function exportReceivablePlan(params: PageParam) {
export function exportReceivablePlan(params: any) {
return requestClient.download('/crm/receivable-plan/export-excel', {
params,
});

158
apps/web-ele/src/api/crm/statistics/customer.ts
View File

@@ -1,15 +1,24 @@
import { requestClient } from '#/api/request';
export namespace CrmStatisticsCustomerApi {
/** 客户总量分析(按日期) */
export interface CustomerSummaryByDate {
/** 客户统计请求 */
export interface CustomerSummaryReqVO {
times: string[];
interval: number;
deptId: number;
userId: number;
userIds: number[];
}
/** 客户总量分析(按日期)响应 */
export interface CustomerSummaryByDateRespVO {
time: string;
customerCreateCount: number;
customerDealCount: number;
}
/** 客户总量分析(按用户) */
export interface CustomerSummaryByUser {
/** 客户总量分析(按用户)响应 */
export interface CustomerSummaryByUserRespVO {
ownerUserName: string;
customerCreateCount: number;
customerDealCount: number;
@@ -17,28 +26,28 @@ export namespace CrmStatisticsCustomerApi {
receivablePrice: number;
}
/** 客户跟进次数分析(按日期) */
export interface FollowUpSummaryByDate {
/** 客户跟进次数分析(按日期)响应 */
export interface FollowUpSummaryByDateRespVO {
time: string;
followUpRecordCount: number;
followUpCustomerCount: number;
}
/** 客户跟进次数分析(按用户) */
export interface FollowUpSummaryByUser {
/** 客户跟进次数分析(按用户)响应 */
export interface FollowUpSummaryByUserRespVO {
ownerUserName: string;
followupRecordCount: number;
followupCustomerCount: number;
}
/** 客户跟进方式统计 */
export interface FollowUpSummaryByType {
/** 客户跟进方式统计响应 */
export interface FollowUpSummaryByTypeRespVO {
followUpType: string;
followUpRecordCount: number;
}
/** 合同摘要信息 */
export interface CustomerContractSummary {
/** 合同摘要信息响应 */
export interface CustomerContractSummaryRespVO {
customerName: string;
contractName: string;
totalPrice: number;
@@ -51,54 +60,46 @@ export namespace CrmStatisticsCustomerApi {
orderDate: Date;
}
/** 客户公海分析(按日期) */
export interface PoolSummaryByDate {
/** 客户公海分析(按日期)响应 */
export interface PoolSummaryByDateRespVO {
time: string;
customerPutCount: number;
customerTakeCount: number;
}
/** 客户公海分析(按用户) */
export interface PoolSummaryByUser {
/** 客户公海分析(按用户)响应 */
export interface PoolSummaryByUserRespVO {
ownerUserName: string;
customerPutCount: number;
customerTakeCount: number;
}
/** 客户成交周期(按日期) */
export interface CustomerDealCycleByDate {
/** 客户成交周期(按日期)响应 */
export interface CustomerDealCycleByDateRespVO {
time: string;
customerDealCycle: number;
}
/** 客户成交周期(按用户) */
export interface CustomerDealCycleByUser {
/** 客户成交周期(按用户)响应 */
export interface CustomerDealCycleByUserRespVO {
ownerUserName: string;
customerDealCycle: number;
customerDealCount: number;
}
/** 客户成交周期(按地区) */
export interface CustomerDealCycleByArea {
/** 客户成交周期(按地区)响应 */
export interface CustomerDealCycleByAreaRespVO {
areaName: string;
customerDealCycle: number;
customerDealCount: number;
}
/** 客户成交周期(按产品) */
export interface CustomerDealCycleByProduct {
/** 客户成交周期(按产品)响应 */
export interface CustomerDealCycleByProductRespVO {
productName: string;
customerDealCycle: number;
customerDealCount: number;
}
export interface CustomerSummaryParams {
times: string[];
interval: number;
deptId: number;
userId: number;
userIds: number[];
}
}
export function getDatas(activeTabName: any, params: any) {
@@ -167,69 +168,63 @@ export function getChartDatas(activeTabName: any, params: any) {
/** 客户总量分析(按日期) */
export function getCustomerSummaryByDate(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.CustomerSummaryByDate[]>(
'/crm/statistics-customer/get-customer-summary-by-date',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.CustomerSummaryByDateRespVO[]
>('/crm/statistics-customer/get-customer-summary-by-date', { params });
}
/** 客户总量分析(按用户) */
export function getCustomerSummaryByUser(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.CustomerSummaryByUser[]>(
'/crm/statistics-customer/get-customer-summary-by-user',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.CustomerSummaryByUserRespVO[]
>('/crm/statistics-customer/get-customer-summary-by-user', { params });
}
/** 客户跟进次数分析(按日期) */
export function getFollowUpSummaryByDate(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.FollowUpSummaryByDate[]>(
'/crm/statistics-customer/get-follow-up-summary-by-date',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.FollowUpSummaryByDateRespVO[]
>('/crm/statistics-customer/get-follow-up-summary-by-date', { params });
}
/** 客户跟进次数分析(按用户) */
export function getFollowUpSummaryByUser(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.FollowUpSummaryByUser[]>(
'/crm/statistics-customer/get-follow-up-summary-by-user',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.FollowUpSummaryByUserRespVO[]
>('/crm/statistics-customer/get-follow-up-summary-by-user', { params });
}
/** 获取客户跟进方式统计数 */
export function getFollowUpSummaryByType(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.FollowUpSummaryByType[]>(
'/crm/statistics-customer/get-follow-up-summary-by-type',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.FollowUpSummaryByTypeRespVO[]
>('/crm/statistics-customer/get-follow-up-summary-by-type', { params });
}
/** 合同摘要信息(客户转化率页面) */
export function getContractSummary(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.CustomerContractSummary[]>(
'/crm/statistics-customer/get-contract-summary',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.CustomerContractSummaryRespVO[]
>('/crm/statistics-customer/get-contract-summary', { params });
}
/** 获取客户公海分析(按日期) */
export function getPoolSummaryByDate(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.PoolSummaryByDate[]>(
return requestClient.get<CrmStatisticsCustomerApi.PoolSummaryByDateRespVO[]>(
'/crm/statistics-customer/get-pool-summary-by-date',
{ params },
);
@@ -237,9 +232,9 @@ export function getPoolSummaryByDate(
/** 获取客户公海分析(按用户) */
export function getPoolSummaryByUser(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.PoolSummaryByUser[]>(
return requestClient.get<CrmStatisticsCustomerApi.PoolSummaryByUserRespVO[]>(
'/crm/statistics-customer/get-pool-summary-by-user',
{ params },
);
@@ -247,39 +242,36 @@ export function getPoolSummaryByUser(
/** 获取客户成交周期(按日期) */
export function getCustomerDealCycleByDate(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.CustomerDealCycleByDate[]>(
'/crm/statistics-customer/get-customer-deal-cycle-by-date',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.CustomerDealCycleByDateRespVO[]
>('/crm/statistics-customer/get-customer-deal-cycle-by-date', { params });
}
/** 获取客户成交周期(按用户) */
export function getCustomerDealCycleByUser(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.CustomerDealCycleByUser[]>(
'/crm/statistics-customer/get-customer-deal-cycle-by-user',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.CustomerDealCycleByUserRespVO[]
>('/crm/statistics-customer/get-customer-deal-cycle-by-user', { params });
}
/** 获取客户成交周期(按地区) */
export function getCustomerDealCycleByArea(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<CrmStatisticsCustomerApi.CustomerDealCycleByArea[]>(
'/crm/statistics-customer/get-customer-deal-cycle-by-area',
{ params },
);
return requestClient.get<
CrmStatisticsCustomerApi.CustomerDealCycleByAreaRespVO[]
>('/crm/statistics-customer/get-customer-deal-cycle-by-area', { params });
}
/** 获取客户成交周期(按产品) */
export function getCustomerDealCycleByProduct(
params: CrmStatisticsCustomerApi.CustomerSummaryParams,
params: CrmStatisticsCustomerApi.CustomerSummaryReqVO,
) {
return requestClient.get<
CrmStatisticsCustomerApi.CustomerDealCycleByProduct[]
CrmStatisticsCustomerApi.CustomerDealCycleByProductRespVO[]
>('/crm/statistics-customer/get-customer-deal-cycle-by-product', { params });
}

23
apps/web-ele/src/api/crm/statistics/funnel.ts
View File

@@ -3,22 +3,22 @@ import type { PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace CrmStatisticsFunnelApi {
/** 销售漏斗统计数据 */
export interface FunnelSummary {
/** 销售漏斗统计数据响应 */
export interface FunnelSummaryRespVO {
customerCount: number; // 客户数
businessCount: number; // 商机数
businessWinCount: number; // 赢单数
}
/** 商机分析(按日期) */
export interface BusinessSummaryByDate {
/** 商机分析(按日期)响应 */
export interface BusinessSummaryByDateRespVO {
time: string; // 时间
businessCreateCount: number; // 商机数
totalPrice: number | string; // 商机金额
}
/** 商机转化率分析(按日期) */
export interface BusinessInversionRateSummaryByDate {
/** 商机转化率分析(按日期)响应 */
export interface BusinessInversionRateSummaryByDateRespVO {
time: string; // 时间
businessCount: number; // 商机数量
businessWinCount: number; // 赢单商机数
@@ -61,7 +61,7 @@ export function getChartDatas(activeTabName: any, params: any) {
/** 获取销售漏斗统计数据 */
export function getFunnelSummary(params: any) {
return requestClient.get<CrmStatisticsFunnelApi.FunnelSummary>(
return requestClient.get<CrmStatisticsFunnelApi.FunnelSummaryRespVO>(
'/crm/statistics-funnel/get-funnel-summary',
{ params },
);
@@ -77,16 +77,15 @@ export function getBusinessSummaryByEndStatus(params: any) {
/** 获取新增商机分析(按日期) */
export function getBusinessSummaryByDate(params: any) {
return requestClient.get<CrmStatisticsFunnelApi.BusinessSummaryByDate[]>(
'/crm/statistics-funnel/get-business-summary-by-date',
{ params },
);
return requestClient.get<
CrmStatisticsFunnelApi.BusinessSummaryByDateRespVO[]
>('/crm/statistics-funnel/get-business-summary-by-date', { params });
}
/** 获取商机转化率分析(按日期) */
export function getBusinessInversionRateSummaryByDate(params: any) {
return requestClient.get<
CrmStatisticsFunnelApi.BusinessInversionRateSummaryByDate[]
CrmStatisticsFunnelApi.BusinessInversionRateSummaryByDateRespVO[]
>('/crm/statistics-funnel/get-business-inversion-rate-summary-by-date', {
params,
});

28
apps/web-ele/src/api/crm/statistics/performance.ts
View File

@@ -1,25 +1,27 @@
import { requestClient } from '#/api/request';
export namespace CrmStatisticsPerformanceApi {
/** 员工业绩统计 */
export interface Performance {
/** 员工业绩统计请求 */
export interface PerformanceReqVO {
times: string[];
deptId: number;
userId: number;
}
/** 员工业绩统计响应 */
export interface PerformanceRespVO {
time: string;
currentMonthCount: number;
lastMonthCount: number;
lastYearCount: number;
}
export interface PerformanceParams {
times: string[];
deptId: number;
userId: number;
}
}
/** 员工获得合同金额统计 */
export function getContractPricePerformance(
params: CrmStatisticsPerformanceApi.PerformanceParams,
params: CrmStatisticsPerformanceApi.PerformanceReqVO,
) {
return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
return requestClient.get<CrmStatisticsPerformanceApi.PerformanceRespVO[]>(
'/crm/statistics-performance/get-contract-price-performance',
{ params },
);
@@ -27,9 +29,9 @@ export function getContractPricePerformance(
/** 员工获得回款统计 */
export function getReceivablePricePerformance(
params: CrmStatisticsPerformanceApi.PerformanceParams,
params: CrmStatisticsPerformanceApi.PerformanceReqVO,
) {
return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
return requestClient.get<CrmStatisticsPerformanceApi.PerformanceRespVO[]>(
'/crm/statistics-performance/get-receivable-price-performance',
{ params },
);
@@ -37,9 +39,9 @@ export function getReceivablePricePerformance(
/** 员工获得签约合同数量统计 */
export function getContractCountPerformance(
params: CrmStatisticsPerformanceApi.PerformanceParams,
params: CrmStatisticsPerformanceApi.PerformanceReqVO,
) {
return requestClient.get<CrmStatisticsPerformanceApi.Performance[]>(
return requestClient.get<CrmStatisticsPerformanceApi.PerformanceRespVO[]>(
'/crm/statistics-performance/get-contract-count-performance',
{ params },
);

28
apps/web-ele/src/api/crm/statistics/portrait.ts
View File

@@ -3,33 +3,33 @@ import type { PageParam } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace CrmStatisticsPortraitApi {
/** 客户基础统计信息 */
export interface CustomerBase {
/** 客户基础统计响应 */
export interface CustomerBaseRespVO {
customerCount: number;
dealCount: number;
dealPortion: number | string;
}
/** 客户行业统计信息 */
export interface CustomerIndustry extends CustomerBase {
/** 客户行业统计响应 */
export interface CustomerIndustryRespVO extends CustomerBaseRespVO {
industryId: number;
industryPortion: number | string;
}
/** 客户来源统计信息 */
export interface CustomerSource extends CustomerBase {
/** 客户来源统计响应 */
export interface CustomerSourceRespVO extends CustomerBaseRespVO {
source: number;
sourcePortion: number | string;
}
/** 客户级别统计信息 */
export interface CustomerLevel extends CustomerBase {
/** 客户级别统计响应 */
export interface CustomerLevelRespVO extends CustomerBaseRespVO {
level: number;
levelPortion: number | string;
}
/** 客户地区统计信息 */
export interface CustomerArea extends CustomerBase {
/** 客户地区统计响应 */
export interface CustomerAreaRespVO extends CustomerBaseRespVO {
areaId: number;
areaName: string;
areaPortion: number | string;
@@ -58,7 +58,7 @@ export function getDatas(activeTabName: any, params: any) {
/** 获取客户行业统计数据 */
export function getCustomerIndustry(params: PageParam) {
return requestClient.get<CrmStatisticsPortraitApi.CustomerIndustry[]>(
return requestClient.get<CrmStatisticsPortraitApi.CustomerIndustryRespVO[]>(
'/crm/statistics-portrait/get-customer-industry-summary',
{ params },
);
@@ -66,7 +66,7 @@ export function getCustomerIndustry(params: PageParam) {
/** 获取客户来源统计数据 */
export function getCustomerSource(params: PageParam) {
return requestClient.get<CrmStatisticsPortraitApi.CustomerSource[]>(
return requestClient.get<CrmStatisticsPortraitApi.CustomerSourceRespVO[]>(
'/crm/statistics-portrait/get-customer-source-summary',
{ params },
);
@@ -74,7 +74,7 @@ export function getCustomerSource(params: PageParam) {
/** 获取客户级别统计数据 */
export function getCustomerLevel(params: PageParam) {
return requestClient.get<CrmStatisticsPortraitApi.CustomerLevel[]>(
return requestClient.get<CrmStatisticsPortraitApi.CustomerLevelRespVO[]>(
'/crm/statistics-portrait/get-customer-level-summary',
{ params },
);
@@ -82,7 +82,7 @@ export function getCustomerLevel(params: PageParam) {
/** 获取客户地区统计数据 */
export function getCustomerArea(params: PageParam) {
return requestClient.get<CrmStatisticsPortraitApi.CustomerArea[]>(
return requestClient.get<CrmStatisticsPortraitApi.CustomerAreaRespVO[]>(
'/crm/statistics-portrait/get-customer-area-summary',
{ params },
);

20
apps/web-ele/src/api/crm/statistics/rank.ts
View File

@@ -3,8 +3,8 @@ import type { PageParam } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace CrmStatisticsRankApi {
/** 排行统计数据 */
export interface Rank {
/** 排行统计响应 */
export interface RankRespVO {
count: number;
nickname: string;
deptName: string;
@@ -45,7 +45,7 @@ export function getDatas(activeTabName: any, params: any) {
/** 获得合同排行榜 */
export function getContractPriceRank(params: PageParam) {
return requestClient.get<CrmStatisticsRankApi.Rank[]>(
return requestClient.get<CrmStatisticsRankApi.RankRespVO[]>(
'/crm/statistics-rank/get-contract-price-rank',
{ params },
);
@@ -53,7 +53,7 @@ export function getContractPriceRank(params: PageParam) {
/** 获得回款排行榜 */
export function getReceivablePriceRank(params: PageParam) {
return requestClient.get<CrmStatisticsRankApi.Rank[]>(
return requestClient.get<CrmStatisticsRankApi.RankRespVO[]>(
'/crm/statistics-rank/get-receivable-price-rank',
{ params },
);
@@ -61,7 +61,7 @@ export function getReceivablePriceRank(params: PageParam) {
/** 签约合同排行 */
export function getContractCountRank(params: PageParam) {
return requestClient.get<CrmStatisticsRankApi.Rank[]>(
return requestClient.get<CrmStatisticsRankApi.RankRespVO[]>(
'/crm/statistics-rank/get-contract-count-rank',
{ params },
);
@@ -69,7 +69,7 @@ export function getContractCountRank(params: PageParam) {
/** 产品销量排行 */
export function getProductSalesRank(params: PageParam) {
return requestClient.get<CrmStatisticsRankApi.Rank[]>(
return requestClient.get<CrmStatisticsRankApi.RankRespVO[]>(
'/crm/statistics-rank/get-product-sales-rank',
{ params },
);
@@ -77,7 +77,7 @@ export function getProductSalesRank(params: PageParam) {
/** 新增客户数排行 */
export function getCustomerCountRank(params: PageParam) {
return requestClient.get<CrmStatisticsRankApi.Rank[]>(
return requestClient.get<CrmStatisticsRankApi.RankRespVO[]>(
'/crm/statistics-rank/get-customer-count-rank',
{ params },
);
@@ -85,7 +85,7 @@ export function getCustomerCountRank(params: PageParam) {
/** 新增联系人数排行 */
export function getContactsCountRank(params: PageParam) {
return requestClient.get<CrmStatisticsRankApi.Rank[]>(
return requestClient.get<CrmStatisticsRankApi.RankRespVO[]>(
'/crm/statistics-rank/get-contacts-count-rank',
{ params },
);
@@ -93,7 +93,7 @@ export function getContactsCountRank(params: PageParam) {
/** 跟进次数排行 */
export function getFollowCountRank(params: PageParam) {
return requestClient.get<CrmStatisticsRankApi.Rank[]>(
return requestClient.get<CrmStatisticsRankApi.RankRespVO[]>(
'/crm/statistics-rank/get-follow-count-rank',
{ params },
);
@@ -101,7 +101,7 @@ export function getFollowCountRank(params: PageParam) {
/** 跟进客户数排行 */
export function getFollowCustomerCountRank(params: PageParam) {
return requestClient.get<CrmStatisticsRankApi.Rank[]>(
return requestClient.get<CrmStatisticsRankApi.RankRespVO[]>(
'/crm/statistics-rank/get-follow-customer-count-rank',
{ params },
);

61
apps/web-ele/src/api/erp/finance/account/index.ts Normal file
View File

@@ -0,0 +1,61 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpAccountApi {
/** 结算账户信息 */
export interface Account {
id?: number; // 结算账户编号
no: string; // 账户编码
remark: string; // 备注
status: number; // 开启状态
sort: number; // 排序
defaultStatus: boolean; // 是否默认
name: string; // 账户名称
}
}
/** 查询结算账户分页 */
export function getAccountPage(params: PageParam) {
return requestClient.get<PageResult<ErpAccountApi.Account>>(
'/erp/account/page',
{ params },
);
}
/** 查询结算账户精简列表 */
export function getAccountSimpleList() {
return requestClient.get<ErpAccountApi.Account[]>('/erp/account/simple-list');
}
/** 查询结算账户详情 */
export function getAccount(id: number) {
return requestClient.get<ErpAccountApi.Account>(`/erp/account/get?id=${id}`);
}
/** 新增结算账户 */
export function createAccount(data: ErpAccountApi.Account) {
return requestClient.post('/erp/account/create', data);
}
/** 修改结算账户 */
export function updateAccount(data: ErpAccountApi.Account) {
return requestClient.put('/erp/account/update', data);
}
/** 修改结算账户默认状态 */
export function updateAccountDefaultStatus(id: number, defaultStatus: boolean) {
return requestClient.put('/erp/account/update-default-status', null, {
params: { id, defaultStatus },
});
}
/** 删除结算账户 */
export function deleteAccount(id: number) {
return requestClient.delete(`/erp/account/delete?id=${id}`);
}
/** 导出结算账户 Excel */
export function exportAccount(params: any) {
return requestClient.download('/erp/account/export-excel', { params });
}

95
apps/web-ele/src/api/erp/finance/payment/index.ts Normal file
View File

@@ -0,0 +1,95 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpFinancePaymentApi {
/** 付款单信息 */
export interface FinancePayment {
id?: number; // 付款单编号
no: string; // 付款单号
supplierId?: number; // 供应商编号
supplierName?: string; // 供应商名称
paymentTime?: Date; // 付款时间
totalPrice: number; // 合计金额，单位：元
discountPrice: number; // 优惠金额
paymentPrice: number; // 实际付款金额
status: number; // 状态
remark: string; // 备注
fileUrl?: string; // 附件
accountId?: number; // 付款账户
accountName?: string; // 账户名称
financeUserId?: number; // 财务人员
financeUserName?: string; // 财务人员姓名
creator?: string; // 创建人
creatorName?: string; // 创建人姓名
items?: FinancePaymentItem[]; // 付款明细
bizNo?: string; // 业务单号
}
/** 付款单项 */
export interface FinancePaymentItem {
id?: number;
row_id?: number; // 前端使用的临时 ID
bizId: number; // 业务ID
bizType: number; // 业务类型
bizNo: string; // 业务编号
totalPrice: number; // 应付金额
paidPrice: number; // 已付金额
paymentPrice: number; // 本次付款
remark?: string; // 备注
}
}
/** 查询付款单分页 */
export function getFinancePaymentPage(params: PageParam) {
return requestClient.get<PageResult<ErpFinancePaymentApi.FinancePayment>>(
'/erp/finance-payment/page',
{
params,
},
);
}
/** 查询付款单详情 */
export function getFinancePayment(id: number) {
return requestClient.get<ErpFinancePaymentApi.FinancePayment>(
`/erp/finance-payment/get?id=${id}`,
);
}
/** 新增付款单 */
export function createFinancePayment(
data: ErpFinancePaymentApi.FinancePayment,
) {
return requestClient.post('/erp/finance-payment/create', data);
}
/** 修改付款单 */
export function updateFinancePayment(
data: ErpFinancePaymentApi.FinancePayment,
) {
return requestClient.put('/erp/finance-payment/update', data);
}
/** 更新付款单的状态 */
export function updateFinancePaymentStatus(id: number, status: number) {
return requestClient.put('/erp/finance-payment/update-status', null, {
params: { id, status },
});
}
/** 删除付款单 */
export function deleteFinancePayment(ids: number[]) {
return requestClient.delete('/erp/finance-payment/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出付款单 Excel */
export function exportFinancePayment(params: any) {
return requestClient.download('/erp/finance-payment/export-excel', {
params,
});
}

95
apps/web-ele/src/api/erp/finance/receipt/index.ts Normal file
View File

@@ -0,0 +1,95 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpFinanceReceiptApi {
/** 收款单项 */
export interface FinanceReceiptItem {
id?: number;
row_id?: number; // 前端使用的临时 ID
bizId: number; // 业务ID
bizType: number; // 业务类型
bizNo: string; // 业务编号
totalPrice: number; // 应收金额
receiptedPrice: number; // 已收金额
receiptPrice: number; // 本次收款
remark?: string; // 备注
}
/** 收款单信息 */
export interface FinanceReceipt {
id?: number; // 收款单编号
no: string; // 收款单号
customerId: number; // 客户编号
customerName?: string; // 客户名称
receiptTime: Date; // 收款时间
totalPrice: number; // 合计金额，单位：元
discountPrice: number; // 优惠金额
receiptPrice: number; // 实际收款金额
status: number; // 状态
remark: string; // 备注
fileUrl?: string; // 附件
accountId?: number; // 收款账户
accountName?: string; // 账户名称
financeUserId?: number; // 财务人员
financeUserName?: string; // 财务人员姓名
creator?: string; // 创建人
creatorName?: string; // 创建人姓名
items?: FinanceReceiptItem[]; // 收款明细
bizNo?: string; // 业务单号
}
}
/** 查询收款单分页 */
export function getFinanceReceiptPage(params: PageParam) {
return requestClient.get<PageResult<ErpFinanceReceiptApi.FinanceReceipt>>(
'/erp/finance-receipt/page',
{
params,
},
);
}
/** 查询收款单详情 */
export function getFinanceReceipt(id: number) {
return requestClient.get<ErpFinanceReceiptApi.FinanceReceipt>(
`/erp/finance-receipt/get?id=${id}`,
);
}
/** 新增收款单 */
export function createFinanceReceipt(
data: ErpFinanceReceiptApi.FinanceReceipt,
) {
return requestClient.post('/erp/finance-receipt/create', data);
}
/** 修改收款单 */
export function updateFinanceReceipt(
data: ErpFinanceReceiptApi.FinanceReceipt,
) {
return requestClient.put('/erp/finance-receipt/update', data);
}
/** 更新收款单的状态 */
export function updateFinanceReceiptStatus(id: number, status: number) {
return requestClient.put('/erp/finance-receipt/update-status', null, {
params: { id, status },
});
}
/** 删除收款单 */
export function deleteFinanceReceipt(ids: number[]) {
return requestClient.delete('/erp/finance-receipt/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出收款单 Excel */
export function exportFinanceReceipt(params: any) {
return requestClient.download('/erp/finance-receipt/export-excel', {
params,
});
}

62
apps/web-ele/src/api/erp/product/category/index.ts Normal file
View File

@@ -0,0 +1,62 @@
import { requestClient } from '#/api/request';
export namespace ErpProductCategoryApi {
/** 产品分类信息 */
export interface ProductCategory {
id?: number; // 分类编号
parentId?: number; // 父分类编号
name: string; // 分类名称
code?: string; // 分类编码
sort?: number; // 分类排序
status?: number; // 开启状态
children?: ProductCategory[]; // 子分类
}
}
/** 查询产品分类列表 */
export function getProductCategoryList(params?: any) {
return requestClient.get<ErpProductCategoryApi.ProductCategory[]>(
'/erp/product-category/list',
{ params },
);
}
/** 查询产品分类精简列表 */
export function getProductCategorySimpleList() {
return requestClient.get<ErpProductCategoryApi.ProductCategory[]>(
'/erp/product-category/simple-list',
);
}
/** 查询产品分类详情 */
export function getProductCategory(id: number) {
return requestClient.get<ErpProductCategoryApi.ProductCategory>(
`/erp/product-category/get?id=${id}`,
);
}
/** 新增产品分类 */
export function createProductCategory(
data: ErpProductCategoryApi.ProductCategory,
) {
return requestClient.post('/erp/product-category/create', data);
}
/** 修改产品分类 */
export function updateProductCategory(
data: ErpProductCategoryApi.ProductCategory,
) {
return requestClient.put('/erp/product-category/update', data);
}
/** 删除产品分类 */
export function deleteProductCategory(id: number) {
return requestClient.delete(`/erp/product-category/delete?id=${id}`);
}
/** 导出产品分类 Excel */
export function exportProductCategory(params: any) {
return requestClient.download('/erp/product-category/export-excel', {
params,
});
}

61
apps/web-ele/src/api/erp/product/product/index.ts Normal file
View File

@@ -0,0 +1,61 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpProductApi {
/** 产品信息 */
export interface Product {
id?: number; // 产品编号
name: string; // 产品名称
barCode: string; // 产品条码
categoryId: number; // 产品类型编号
unitId: number; // 单位编号
unitName?: string; // 单位名字
status: number; // 产品状态
standard: string; // 产品规格
remark: string; // 产品备注
expiryDay: number; // 保质期天数
weight: number; // 重量（kg）
purchasePrice: number; // 采购价格，单位：元
salePrice: number; // 销售价格，单位：元
minPrice: number; // 最低价格，单位：元
}
}
/** 查询产品分页 */
export function getProductPage(params: PageParam) {
return requestClient.get<PageResult<ErpProductApi.Product>>(
'/erp/product/page',
{ params },
);
}
/** 查询产品精简列表 */
export function getProductSimpleList() {
return requestClient.get<ErpProductApi.Product[]>('/erp/product/simple-list');
}
/** 查询产品详情 */
export function getProduct(id: number) {
return requestClient.get<ErpProductApi.Product>(`/erp/product/get?id=${id}`);
}
/** 新增产品 */
export function createProduct(data: ErpProductApi.Product) {
return requestClient.post('/erp/product/create', data);
}
/** 修改产品 */
export function updateProduct(data: ErpProductApi.Product) {
return requestClient.put('/erp/product/update', data);
}
/** 删除产品 */
export function deleteProduct(id: number) {
return requestClient.delete(`/erp/product/delete?id=${id}`);
}
/** 导出产品 Excel */
export function exportProduct(params: any) {
return requestClient.download('/erp/product/export-excel', { params });
}

54
apps/web-ele/src/api/erp/product/unit/index.ts Normal file
View File

@@ -0,0 +1,54 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpProductUnitApi {
/** 产品单位信息 */
export interface ProductUnit {
id?: number; // 单位编号
name: string; // 单位名字
status: number; // 单位状态
}
}
/** 查询产品单位分页 */
export function getProductUnitPage(params: PageParam) {
return requestClient.get<PageResult<ErpProductUnitApi.ProductUnit>>(
'/erp/product-unit/page',
{ params },
);
}
/** 查询产品单位精简列表 */
export function getProductUnitSimpleList() {
return requestClient.get<ErpProductUnitApi.ProductUnit[]>(
'/erp/product-unit/simple-list',
);
}
/** 查询产品单位详情 */
export function getProductUnit(id: number) {
return requestClient.get<ErpProductUnitApi.ProductUnit>(
`/erp/product-unit/get?id=${id}`,
);
}
/** 新增产品单位 */
export function createProductUnit(data: ErpProductUnitApi.ProductUnit) {
return requestClient.post('/erp/product-unit/create', data);
}
/** 修改产品单位 */
export function updateProductUnit(data: ErpProductUnitApi.ProductUnit) {
return requestClient.put('/erp/product-unit/update', data);
}
/** 删除产品单位 */
export function deleteProductUnit(id: number) {
return requestClient.delete(`/erp/product-unit/delete?id=${id}`);
}
/** 导出产品单位 Excel */
export function exportProductUnit(params: any) {
return requestClient.download('/erp/product-unit/export-excel', { params });
}

100
apps/web-ele/src/api/erp/purchase/in/index.ts Normal file
View File

@@ -0,0 +1,100 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpPurchaseInApi {
/** 采购入库信息 */
export interface PurchaseIn {
id?: number; // 入库工单编号
no?: string; // 采购入库号
supplierId?: number; // 供应商编号
inTime?: Date; // 入库时间
totalCount?: number; // 合计数量
totalPrice?: number; // 合计金额，单位：元
status?: number; // 状态
remark?: string; // 备注
outCount?: number; // 采购出库数量
returnCount?: number; // 采购退货数量
discountPercent?: number; // 折扣百分比
discountPrice?: number; // 折扣金额
paymentPrice?: number; // 实际支付金额
otherPrice?: number; // 其他费用
totalProductPrice?: number; // 合计商品金额
taxPrice?: number; // 合计税额
items?: PurchaseInItem[]; // 采购入库明细
}
/** 采购项信息 */
export interface PurchaseInItem {
count?: number;
id?: number;
orderItemId?: number;
productBarCode?: string;
productId?: number;
productName: string;
productPrice: number;
productUnitId?: number;
productUnitName?: string;
totalProductPrice?: number;
remark: string;
stockCount?: number;
taxPercent?: number;
taxPrice?: number;
totalPrice?: number;
warehouseId?: number;
inCount?: number;
}
}
/** 查询采购入库分页 */
export function getPurchaseInPage(params: PageParam) {
return requestClient.get<PageResult<ErpPurchaseInApi.PurchaseIn>>(
'/erp/purchase-in/page',
{
params,
},
);
}
/** 查询采购入库详情 */
export function getPurchaseIn(id: number) {
return requestClient.get<ErpPurchaseInApi.PurchaseIn>(
`/erp/purchase-in/get?id=${id}`,
);
}
/** 新增采购入库 */
export function createPurchaseIn(data: ErpPurchaseInApi.PurchaseIn) {
return requestClient.post('/erp/purchase-in/create', data);
}
/** 修改采购入库 */
export function updatePurchaseIn(data: ErpPurchaseInApi.PurchaseIn) {
return requestClient.put('/erp/purchase-in/update', data);
}
/** 更新采购入库的状态 */
export function updatePurchaseInStatus(id: number, status: number) {
return requestClient.put('/erp/purchase-in/update-status', null, {
params: {
id,
status,
},
});
}
/** 删除采购入库 */
export function deletePurchaseIn(ids: number[]) {
return requestClient.delete('/erp/purchase-in/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出采购入库 Excel */
export function exportPurchaseIn(params: any) {
return requestClient.download('/erp/purchase-in/export-excel', {
params,
});
}

97
apps/web-ele/src/api/erp/purchase/order/index.ts Normal file
View File

@@ -0,0 +1,97 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpPurchaseOrderApi {
/** 采购订单信息 */
export interface PurchaseOrder {
id?: number; // 订单工单编号
no?: string; // 采购订单号
supplierId?: number; // 供应商编号
supplierName?: string; // 供应商名称
orderTime?: Date | string; // 订单时间
totalCount?: number; // 合计数量
totalPrice?: number; // 合计金额，单位：元
totalProductPrice?: number; // 产品金额，单位：元
discountPercent?: number; // 优惠率，百分比
discountPrice?: number; // 优惠金额，单位：元
depositPrice?: number; // 定金金额，单位：元
accountId?: number; // 结算账户编号
status?: number; // 状态
remark?: string; // 备注
fileUrl?: string; // 附件地址
inCount?: number; // 采购入库数量
count?: number; // 数量
returnCount?: number; // 采购退货数量
inStatus?: number; // 入库状态
returnStatus?: number; // 退货状态
productNames?: string; // 产品名称列表
creatorName?: string; // 创建人名称
createTime?: Date; // 创建时间
items?: PurchaseOrderItem[]; // 订单项列表
}
/** 采购订单项信息 */
export interface PurchaseOrderItem {
id?: number; // 订单项编号
orderId?: number; // 采购订单编号
productId?: number; // 产品编号
productName?: string; // 产品名称
productBarCode?: string; // 产品条码
productUnitId?: number; // 产品单位编号
productUnitName?: string; // 产品单位名称
productPrice?: number; // 产品单价，单位：元
totalProductPrice?: number; // 产品总价，单位：元
count?: number; // 数量
totalPrice?: number; // 总价，单位：元
taxPercent?: number; // 税率，百分比
taxPrice?: number; // 税额，单位：元
totalTaxPrice?: number; // 含税总价，单位：元
remark?: string; // 备注
stockCount?: number; // 库存数量（显示字段）
}
}
/** 查询采购订单分页 */
export function getPurchaseOrderPage(params: PageParam) {
return requestClient.get<PageResult<ErpPurchaseOrderApi.PurchaseOrder>>(
'/erp/purchase-order/page',
{ params },
);
}
/** 查询采购订单详情 */
export function getPurchaseOrder(id: number) {
return requestClient.get<ErpPurchaseOrderApi.PurchaseOrder>(
`/erp/purchase-order/get?id=${id}`,
);
}
/** 新增采购订单 */
export function createPurchaseOrder(data: ErpPurchaseOrderApi.PurchaseOrder) {
return requestClient.post('/erp/purchase-order/create', data);
}
/** 修改采购订单 */
export function updatePurchaseOrder(data: ErpPurchaseOrderApi.PurchaseOrder) {
return requestClient.put('/erp/purchase-order/update', data);
}
/** 更新采购订单的状态 */
export function updatePurchaseOrderStatus(id: number, status: number) {
return requestClient.put('/erp/purchase-order/update-status', null, {
params: { id, status },
});
}
/** 删除采购订单 */
export function deletePurchaseOrder(ids: number[]) {
return requestClient.delete('/erp/purchase-order/delete', {
params: { ids: ids.join(',') },
});
}
/** 导出采购订单 Excel */
export function exportPurchaseOrder(params: any) {
return requestClient.download('/erp/purchase-order/export-excel', { params });
}

96
apps/web-ele/src/api/erp/purchase/return/index.ts Normal file
View File

@@ -0,0 +1,96 @@
import type { PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpPurchaseReturnApi {
/** 采购退货信息 */
export interface PurchaseReturn {
id?: number; // 采购退货编号
no?: string; // 采购退货号
supplierId?: number; // 供应商编号
returnTime?: Date; // 退货时间
totalCount?: number; // 合计数量
totalPrice: number; // 合计金额，单位：元
discountPercent?: number; // 折扣百分比
discountPrice?: number; // 折扣金额
status?: number; // 状态
remark?: string; // 备注
totalTaxPrice?: number; // 合计税额
otherPrice?: number; // 其他费用
items?: PurchaseReturnItem[];
}
/** 采购退货项 */
export interface PurchaseReturnItem {
count?: number;
id?: number;
orderItemId?: number;
productBarCode?: string;
productId?: number;
productName: string;
productPrice: number;
productUnitId?: number;
productUnitName?: string;
totalProductPrice?: number;
remark: string;
stockCount?: number;
taxPercent?: number;
taxPrice?: number;
totalPrice?: number;
warehouseId?: number;
}
}
/** 查询采购退货分页 */
export function getPurchaseReturnPage(params: any) {
return requestClient.get<PageResult<ErpPurchaseReturnApi.PurchaseReturn>>(
'/erp/purchase-return/page',
{
params,
},
);
}
/** 查询采购退货详情 */
export function getPurchaseReturn(id: number) {
return requestClient.get<ErpPurchaseReturnApi.PurchaseReturn>(
`/erp/purchase-return/get?id=${id}`,
);
}
/** 新增采购退货 */
export function createPurchaseReturn(
data: ErpPurchaseReturnApi.PurchaseReturn,
) {
return requestClient.post('/erp/purchase-return/create', data);
}
/** 修改采购退货 */
export function updatePurchaseReturn(
data: ErpPurchaseReturnApi.PurchaseReturn,
) {
return requestClient.put('/erp/purchase-return/update', data);
}
/** 更新采购退货的状态 */
export function updatePurchaseReturnStatus(id: number, status: number) {
return requestClient.put('/erp/purchase-return/update-status', null, {
params: { id, status },
});
}
/** 删除采购退货 */
export function deletePurchaseReturn(ids: number[]) {
return requestClient.delete('/erp/purchase-return/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出采购退货 Excel */
export function exportPurchaseReturn(params: any) {
return requestClient.download('/erp/purchase-return/export-excel', {
params,
});
}

66
apps/web-ele/src/api/erp/purchase/supplier/index.ts Normal file
View File

@@ -0,0 +1,66 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpSupplierApi {
/** 供应商信息 */
export interface Supplier {
id?: number; // 供应商编号
name: string; // 供应商名称
contact: string; // 联系人
mobile: string; // 手机号码
telephone: string; // 联系电话
email: string; // 电子邮箱
fax: string; // 传真
remark: string; // 备注
status: number; // 开启状态
sort: number; // 排序
taxNo: string; // 纳税人识别号
taxPercent: number; // 税率
bankName: string; // 开户行
bankAccount: string; // 开户账号
bankAddress: string; // 开户地址
}
}
/** 查询供应商分页 */
export function getSupplierPage(params: PageParam) {
return requestClient.get<PageResult<ErpSupplierApi.Supplier>>(
'/erp/supplier/page',
{ params },
);
}
/** 获得供应商精简列表 */
export function getSupplierSimpleList() {
return requestClient.get<ErpSupplierApi.Supplier[]>(
'/erp/supplier/simple-list',
);
}
/** 查询供应商详情 */
export function getSupplier(id: number) {
return requestClient.get<ErpSupplierApi.Supplier>(
`/erp/supplier/get?id=${id}`,
);
}
/** 新增供应商 */
export function createSupplier(data: ErpSupplierApi.Supplier) {
return requestClient.post('/erp/supplier/create', data);
}
/** 修改供应商 */
export function updateSupplier(data: ErpSupplierApi.Supplier) {
return requestClient.put('/erp/supplier/update', data);
}
/** 删除供应商 */
export function deleteSupplier(id: number) {
return requestClient.delete(`/erp/supplier/delete?id=${id}`);
}
/** 导出供应商 Excel */
export function exportSupplier(params: any) {
return requestClient.download('/erp/supplier/export-excel', { params });
}

66
apps/web-ele/src/api/erp/sale/customer/index.ts Normal file
View File

@@ -0,0 +1,66 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpCustomerApi {
/** 客户信息 */
export interface Customer {
id?: number; // 客户编号
name: string; // 客户名称
contact: string; // 联系人
mobile: string; // 手机号码
telephone: string; // 联系电话
email: string; // 电子邮箱
fax: string; // 传真
remark: string; // 备注
status: number; // 开启状态
sort: number; // 排序
taxNo: string; // 纳税人识别号
taxPercent: number; // 税率
bankName: string; // 开户行
bankAccount: string; // 开户账号
bankAddress: string; // 开户地址
}
}
/** 查询客户分页 */
export function getCustomerPage(params: PageParam) {
return requestClient.get<PageResult<ErpCustomerApi.Customer>>(
'/erp/customer/page',
{ params },
);
}
/** 查询客户精简列表 */
export function getCustomerSimpleList() {
return requestClient.get<ErpCustomerApi.Customer[]>(
'/erp/customer/simple-list',
);
}
/** 查询客户详情 */
export function getCustomer(id: number) {
return requestClient.get<ErpCustomerApi.Customer>(
`/erp/customer/get?id=${id}`,
);
}
/** 新增客户 */
export function createCustomer(data: ErpCustomerApi.Customer) {
return requestClient.post('/erp/customer/create', data);
}
/** 修改客户 */
export function updateCustomer(data: ErpCustomerApi.Customer) {
return requestClient.put('/erp/customer/update', data);
}
/** 删除客户 */
export function deleteCustomer(id: number) {
return requestClient.delete(`/erp/customer/delete?id=${id}`);
}
/** 导出客户 Excel */
export function exportCustomer(params: any) {
return requestClient.download('/erp/customer/export-excel', { params });
}

98
apps/web-ele/src/api/erp/sale/order/index.ts Normal file
View File

@@ -0,0 +1,98 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpSaleOrderApi {
/** 销售订单信息 */
export interface SaleOrder {
id?: number; // 订单工单编号
no: string; // 销售订单号
customerId: number; // 客户编号
accountId?: number; // 收款账户编号
orderTime: Date; // 订单时间
totalCount: number; // 合计数量
totalPrice: number; // 合计金额，单位：元
status: number; // 状态
remark: string; // 备注
outCount: number; // 销售出库数量
fileUrl?: string; // 附件地址
inCount?: number; // 采购入库数量
returnCount: number; // 销售退货数量
totalProductPrice?: number; // 产品金额，单位：元
discountPercent?: number; // 优惠率，百分比
discountPrice?: number; // 优惠金额，单位：元
depositPrice?: number; // 定金金额，单位：元
items?: SaleOrderItem[]; // 销售订单产品明细列表
}
/** 销售订单项 */
export interface SaleOrderItem {
id?: number; // 订单项编号
orderId?: number; // 采购订单编号
productId?: number; // 产品编号
productName?: string; // 产品名称
productBarCode?: string; // 产品条码
productUnitId?: number; // 产品单位编号
productUnitName?: string; // 产品单位名称
productPrice?: number; // 产品单价，单位：元
totalProductPrice?: number; // 产品总价，单位：元
count?: number; // 数量
totalPrice?: number; // 总价，单位：元
taxPercent?: number; // 税率，百分比
taxPrice?: number; // 税额，单位：元
totalTaxPrice?: number; // 含税总价，单位：元
remark?: string; // 备注
stockCount?: number; // 库存数量（显示字段）
}
}
/** 查询销售订单分页 */
export function getSaleOrderPage(params: PageParam) {
return requestClient.get<PageResult<ErpSaleOrderApi.SaleOrder>>(
'/erp/sale-order/page',
{ params },
);
}
/** 查询销售订单详情 */
export function getSaleOrder(id: number) {
return requestClient.get<ErpSaleOrderApi.SaleOrder>(
`/erp/sale-order/get?id=${id}`,
);
}
/** 查询销售订单项列表 */
export function getSaleOrderItemListByOrderId(orderId: number) {
return requestClient.get<ErpSaleOrderApi.SaleOrderItem[]>(
`/erp/sale-order/item/list-by-order-id?orderId=${orderId}`,
);
}
/** 新增销售订单 */
export function createSaleOrder(data: ErpSaleOrderApi.SaleOrder) {
return requestClient.post('/erp/sale-order/create', data);
}
/** 修改销售订单 */
export function updateSaleOrder(data: ErpSaleOrderApi.SaleOrder) {
return requestClient.put('/erp/sale-order/update', data);
}
/** 更新销售订单的状态 */
export function updateSaleOrderStatus(id: number, status: number) {
return requestClient.put('/erp/sale-order/update-status', null, {
params: { id, status },
});
}
/** 删除销售订单 */
export function deleteSaleOrder(ids: number[]) {
return requestClient.delete('/erp/sale-order/delete', {
params: { ids: ids.join(',') },
});
}
/** 导出销售订单 Excel */
export function exportSaleOrder(params: any) {
return requestClient.download('/erp/sale-order/export-excel', { params });
}

95
apps/web-ele/src/api/erp/sale/out/index.ts Normal file
View File

@@ -0,0 +1,95 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpSaleOutApi {
/** 销售出库信息 */
export interface SaleOut {
id?: number; // 销售出库编号
no?: string; // 销售出库号
customerId?: number; // 客户编号
saleUserId?: number; // 客户编号
outTime?: Date; // 出库时间
totalCount?: number; // 合计数量
totalPrice?: number; // 合计金额，单位：元
status?: number; // 状态
remark?: string; // 备注
discountPercent?: number; // 折扣百分比
discountPrice?: number; // 折扣金额
otherPrice?: number; // 其他费用
totalProductPrice?: number; // 合计商品金额
taxPrice?: number; // 合计税额
totalTaxPrice?: number; // 合计税额
fileUrl?: string; // 附件地址
items?: SaleOutItem[];
}
/** 销售出库项 */
export interface SaleOutItem {
count?: number;
id?: number;
orderItemId?: number;
productBarCode?: string;
productId?: number;
productName: string;
productPrice: number;
productUnitId?: number;
productUnitName?: string;
totalProductPrice?: number;
remark: string;
stockCount?: number;
taxPercent?: number;
taxPrice?: number;
totalPrice?: number;
warehouseId?: number;
outCount?: number;
}
}
/** 查询销售出库分页 */
export function getSaleOutPage(params: PageParam) {
return requestClient.get<PageResult<ErpSaleOutApi.SaleOut>>(
'/erp/sale-out/page',
{
params,
},
);
}
/** 查询销售出库详情 */
export function getSaleOut(id: number) {
return requestClient.get<ErpSaleOutApi.SaleOut>(`/erp/sale-out/get?id=${id}`);
}
/** 新增销售出库 */
export function createSaleOut(data: ErpSaleOutApi.SaleOut) {
return requestClient.post('/erp/sale-out/create', data);
}
/** 修改销售出库 */
export function updateSaleOut(data: ErpSaleOutApi.SaleOut) {
return requestClient.put('/erp/sale-out/update', data);
}
/** 更新销售出库的状态 */
export function updateSaleOutStatus(id: number, status: number) {
return requestClient.put('/erp/sale-out/update-status', null, {
params: { id, status },
});
}
/** 删除销售出库 */
export function deleteSaleOut(ids: number[]) {
return requestClient.delete('/erp/sale-out/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出销售出库 Excel */
export function exportSaleOut(params: any) {
return requestClient.download('/erp/sale-out/export-excel', {
params,
});
}

96
apps/web-ele/src/api/erp/sale/return/index.ts Normal file
View File

@@ -0,0 +1,96 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpSaleReturnApi {
/** 销售退货信息 */
export interface SaleReturn {
id?: number; // 销售退货编号
no?: string; // 销售退货号
customerId?: number; // 客户编号
returnTime?: Date; // 退货时间
totalCount?: number; // 合计数量
totalPrice?: number; // 合计金额，单位：元
status?: number; // 状态
remark?: string; // 备注
discountPercent?: number; // 折扣百分比
discountPrice?: number; // 折扣金额
otherPrice?: number; // 其他费用
totalProductPrice?: number; // 合计商品金额
taxPrice?: number; // 合计税额
totalTaxPrice?: number; // 合计税额
fileUrl?: string; // 附件地址
items?: SaleReturnItem[];
}
/** 销售退货项 */
export interface SaleReturnItem {
count?: number;
id?: number;
orderItemId?: number;
productBarCode?: string;
productId?: number;
productName: string;
productPrice: number;
productUnitId?: number;
productUnitName?: string;
totalProductPrice?: number;
remark: string;
stockCount?: number;
taxPercent?: number;
taxPrice?: number;
totalPrice?: number;
warehouseId?: number;
returnCount?: number;
}
}
/** 查询销售退货分页 */
export function getSaleReturnPage(params: PageParam) {
return requestClient.get<PageResult<ErpSaleReturnApi.SaleReturn>>(
'/erp/sale-return/page',
{
params,
},
);
}
/** 查询销售退货详情 */
export function getSaleReturn(id: number) {
return requestClient.get<ErpSaleReturnApi.SaleReturn>(
`/erp/sale-return/get?id=${id}`,
);
}
/** 新增销售退货 */
export function createSaleReturn(data: ErpSaleReturnApi.SaleReturn) {
return requestClient.post('/erp/sale-return/create', data);
}
/** 修改销售退货 */
export function updateSaleReturn(data: ErpSaleReturnApi.SaleReturn) {
return requestClient.put('/erp/sale-return/update', data);
}
/** 更新销售退货的状态 */
export function updateSaleReturnStatus(id: number, status: number) {
return requestClient.put('/erp/sale-return/update-status', null, {
params: { id, status },
});
}
/** 删除销售退货 */
export function deleteSaleReturn(ids: number[]) {
return requestClient.delete('/erp/sale-return/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出销售退货 Excel */
export function exportSaleReturn(params: any) {
return requestClient.download('/erp/sale-return/export-excel', {
params,
});
}

31
apps/web-ele/src/api/erp/statistics/purchase/index.ts Normal file
View File

@@ -0,0 +1,31 @@
import { requestClient } from '#/api/request';
export namespace ErpPurchaseStatisticsApi {
/** 采购全局统计 */
export interface PurchaseSummaryRespVO {
todayPrice: number; // 今日采购金额
yesterdayPrice: number; // 昨日采购金额
monthPrice: number; // 本月采购金额
yearPrice: number; // 今年采购金额
}
/** 采购时间段统计 */
export interface PurchaseTimeSummaryRespVO {
time: string; // 时间
price: number; // 采购金额
}
}
/** 获得采购统计 */
export function getPurchaseSummary() {
return requestClient.get<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(
'/erp/purchase-statistics/summary',
);
}
/** 获得采购时间段统计 */
export function getPurchaseTimeSummary() {
return requestClient.get<
ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]
>('/erp/purchase-statistics/time-summary');
}

31
apps/web-ele/src/api/erp/statistics/sale/index.ts Normal file
View File

@@ -0,0 +1,31 @@
import { requestClient } from '#/api/request';
export namespace ErpSaleStatisticsApi {
/** 销售全局统计 */
export interface SaleSummaryRespVO {
todayPrice: number; // 今日销售金额
yesterdayPrice: number; // 昨日销售金额
monthPrice: number; // 本月销售金额
yearPrice: number; // 今年销售金额
}
/** 销售时间段统计 */
export interface SaleTimeSummaryRespVO {
time: string; // 时间
price: number; // 销售金额
}
}
/** 获得销售统计 */
export function getSaleSummary() {
return requestClient.get<ErpSaleStatisticsApi.SaleSummaryRespVO>(
'/erp/sale-statistics/summary',
);
}
/** 获得销售时间段统计 */
export function getSaleTimeSummary() {
return requestClient.get<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(
'/erp/sale-statistics/time-summary',
);
}

87
apps/web-ele/src/api/erp/stock/check/index.ts Normal file
View File

@@ -0,0 +1,87 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpStockCheckApi {
/** 库存盘点单信息 */
export interface StockCheck {
id?: number; // 盘点编号
no: string; // 盘点单号
checkTime: Date; // 盘点时间
totalCount: number; // 合计数量
totalPrice: number; // 合计金额，单位：元
status: number; // 状态
remark: string; // 备注
fileUrl?: string; // 附件
productNames?: string; // 产品信息
creatorName?: string; // 创建人
items?: StockCheckItem[]; // 盘点产品清单
}
/** 库存盘点项 */
export interface StockCheckItem {
id?: number; // 编号
warehouseId?: number; // 仓库编号
productId?: number; // 产品编号
productName?: string; // 产品名称
productUnitId?: number; // 产品单位编号
productUnitName?: string; // 产品单位名称
productBarCode?: string; // 产品条码
count?: number; // 盈亏数量
actualCount?: number; // 实际库存
productPrice?: number; // 产品单价
totalPrice?: number; // 总价
stockCount?: number; // 账面库存
remark?: string; // 备注
}
}
/** 查询库存盘点单分页 */
export function getStockCheckPage(params: PageParam) {
return requestClient.get<PageResult<ErpStockCheckApi.StockCheck>>(
'/erp/stock-check/page',
{
params,
},
);
}
/** 查询库存盘点单详情 */
export function getStockCheck(id: number) {
return requestClient.get<ErpStockCheckApi.StockCheck>(
`/erp/stock-check/get?id=${id}`,
);
}
/** 新增库存盘点单 */
export function createStockCheck(data: ErpStockCheckApi.StockCheck) {
return requestClient.post('/erp/stock-check/create', data);
}
/** 修改库存盘点单 */
export function updateStockCheck(data: ErpStockCheckApi.StockCheck) {
return requestClient.put('/erp/stock-check/update', data);
}
/** 更新库存盘点单的状态 */
export function updateStockCheckStatus(id: number, status: number) {
return requestClient.put('/erp/stock-check/update-status', null, {
params: { id, status },
});
}
/** 删除库存盘点 */
export function deleteStockCheck(ids: number[]) {
return requestClient.delete('/erp/stock-check/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出库存盘点单 Excel */
export function exportStockCheck(params: any) {
return requestClient.download('/erp/stock-check/export-excel', {
params,
});
}

86
apps/web-ele/src/api/erp/stock/in/index.ts Normal file
View File

@@ -0,0 +1,86 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpStockInApi {
/** 其它入库单信息 */
export interface StockIn {
id?: number; // 入库编号
no: string; // 入库单号
supplierId: number; // 供应商编号
supplierName?: string; // 供应商名称
inTime: Date; // 入库时间
totalCount: number; // 合计数量
totalPrice: number; // 合计金额，单位：元
status: number; // 状态
remark: string; // 备注
fileUrl?: string; // 附件
productNames?: string; // 产品信息
creatorName?: string; // 创建人
items?: StockInItem[]; // 入库产品清单
}
/** 其它入库单产品信息 */
export interface StockInItem {
id?: number; // 编号
warehouseId: number; // 仓库编号
productId: number; // 产品编号
productName?: string; // 产品名称
productUnitId?: number; // 产品单位编号
productUnitName?: string; // 产品单位名称
productBarCode?: string; // 产品条码
count: number; // 数量
productPrice: number; // 产品单价
totalPrice: number; // 总价
stockCount?: number; // 库存数量
remark?: string; // 备注
}
}
/** 查询其它入库单分页 */
export function getStockInPage(params: PageParam) {
return requestClient.get<PageResult<ErpStockInApi.StockIn>>(
'/erp/stock-in/page',
{
params,
},
);
}
/** 查询其它入库单详情 */
export function getStockIn(id: number) {
return requestClient.get<ErpStockInApi.StockIn>(`/erp/stock-in/get?id=${id}`);
}
/** 新增其它入库单 */
export function createStockIn(data: ErpStockInApi.StockIn) {
return requestClient.post('/erp/stock-in/create', data);
}
/** 修改其它入库单 */
export function updateStockIn(data: ErpStockInApi.StockIn) {
return requestClient.put('/erp/stock-in/update', data);
}
/** 更新其它入库单的状态 */
export function updateStockInStatus(id: number, status: number) {
return requestClient.put('/erp/stock-in/update-status', null, {
params: { id, status },
});
}
/** 删除其它入库单 */
export function deleteStockIn(ids: number[]) {
return requestClient.delete('/erp/stock-in/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出其它入库单 Excel */
export function exportStockIn(params: any) {
return requestClient.download('/erp/stock-in/export-excel', {
params,
});
}

87
apps/web-ele/src/api/erp/stock/move/index.ts Normal file
View File

@@ -0,0 +1,87 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpStockMoveApi {
/** 库存调拨单信息 */
export interface StockMove {
id?: number; // 调拨编号
no: string; // 调拨单号
outTime: Date; // 调拨时间
totalCount: number; // 合计数量
totalPrice: number; // 合计金额，单位：元
status: number; // 状态
remark: string; // 备注
fileUrl?: string; // 附件
fromWarehouseId?: number; // 来源仓库编号
createTime: Date; // 创建时间
creator: string; // 创建人
creatorName: string; // 创建人名称
productNames: string; // 产品名称
items?: StockMoveItem[]; // 子表信息
}
/** 库存调拨单子表信息 */
export interface StockMoveItem {
count: number; // 数量
fromWarehouseId?: number; // 来源仓库ID
id?: number; // ID
productBarCode: string; // 产品条形码
productId?: number; // 产品ID
productName?: string; // 产品名称
productPrice: number; // 产品单价
productUnitName?: string; // 产品单位
remark?: string; // 备注
stockCount: number; // 库存数量
toWarehouseId?: number; // 目标仓库ID
totalPrice?: number; // 总价
}
}
/** 查询库存调拨单分页 */
export function getStockMovePage(params: PageParam) {
return requestClient.get<PageResult<ErpStockMoveApi.StockMove>>(
'/erp/stock-move/page',
{
params,
},
);
}
/** 查询库存调拨单详情 */
export function getStockMove(id: number) {
return requestClient.get<ErpStockMoveApi.StockMove>(
`/erp/stock-move/get?id=${id}`,
);
}
/** 新增库存调拨单 */
export function createStockMove(data: ErpStockMoveApi.StockMove) {
return requestClient.post('/erp/stock-move/create', data);
}
/** 修改库存调拨单 */
export function updateStockMove(data: ErpStockMoveApi.StockMove) {
return requestClient.put('/erp/stock-move/update', data);
}
/** 更新库存调拨单的状态 */
export function updateStockMoveStatus(id: number, status: number) {
return requestClient.put('/erp/stock-move/update-status', null, {
params: { id, status },
});
}
/** 删除库存调拨单 */
export function deleteStockMove(ids: number[]) {
return requestClient.delete('/erp/stock-move/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出库存调拨单 Excel */
export function exportStockMove(params: any) {
return requestClient.download('/erp/stock-move/export-excel', { params });
}

85
apps/web-ele/src/api/erp/stock/out/index.ts Normal file
View File

@@ -0,0 +1,85 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpStockOutApi {
/** 其它出库单信息 */
export interface StockOut {
id?: number; // 出库编号
no: string; // 出库单号
customerId: number; // 客户编号
outTime: Date; // 出库时间
totalCount: number; // 合计数量
totalPrice: number; // 合计金额，单位：元
status: number; // 状态
remark: string; // 备注
fileUrl?: string; // 附件
items?: StockOutItem[]; // 出库产品清单
}
/** 其它出库单产品信息 */
export interface StockOutItem {
id?: number; // 编号
warehouseId?: number; // 仓库编号
productId?: number; // 产品编号
productName?: string; // 产品名称
productUnitId?: number; // 产品单位编号
productUnitName?: string; // 产品单位名称
productBarCode?: string; // 产品条码
count: number; // 数量
productPrice: number; // 产品单价
totalPrice: number; // 总价
stockCount?: number; // 库存数量
remark?: string; // 备注
}
}
/** 查询其它出库单分页 */
export function getStockOutPage(params: PageParam) {
return requestClient.get<PageResult<ErpStockOutApi.StockOut>>(
'/erp/stock-out/page',
{
params,
},
);
}
/** 查询其它出库单详情 */
export function getStockOut(id: number) {
return requestClient.get<ErpStockOutApi.StockOut>(
`/erp/stock-out/get?id=${id}`,
);
}
/** 新增其它出库单 */
export function createStockOut(data: ErpStockOutApi.StockOut) {
return requestClient.post('/erp/stock-out/create', data);
}
/** 修改其它出库单 */
export function updateStockOut(data: ErpStockOutApi.StockOut) {
return requestClient.put('/erp/stock-out/update', data);
}
/** 更新其它出库单的状态 */
export function updateStockOutStatus(id: number, status: number) {
return requestClient.put('/erp/stock-out/update-status', null, {
params: { id, status },
});
}
/** 删除其它出库单 */
export function deleteStockOut(ids: number[]) {
return requestClient.delete('/erp/stock-out/delete', {
params: {
ids: ids.join(','),
},
});
}
/** 导出其它出库单 Excel */
export function exportStockOut(params: any) {
return requestClient.download('/erp/stock-out/export-excel', {
params,
});
}

31
apps/web-ele/src/api/erp/stock/record/index.ts Normal file
View File

@@ -0,0 +1,31 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpStockRecordApi {
/** 产品库存明细 */
export interface StockRecord {
id?: number; // 编号
productId: number; // 产品编号
warehouseId: number; // 仓库编号
count: number; // 出入库数量
totalCount: number; // 总库存量
bizType: number; // 业务类型
bizId: number; // 业务编号
bizItemId: number; // 业务项编号
bizNo: string; // 业务单号
}
}
/** 查询产品库存明细分页 */
export function getStockRecordPage(params: PageParam) {
return requestClient.get<PageResult<ErpStockRecordApi.StockRecord>>(
'/erp/stock-record/page',
{ params },
);
}
/** 导出产品库存明细 Excel */
export function exportStockRecord(params: any) {
return requestClient.download('/erp/stock-record/export-excel', { params });
}

51
apps/web-ele/src/api/erp/stock/stock/index.ts Normal file
View File

@@ -0,0 +1,51 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpStockApi {
/** 产品库存信息 */
export interface Stock {
id?: number; // 编号
productId: number; // 产品编号
warehouseId: number; // 仓库编号
count: number; // 库存数量
}
/** 产品库存查询参数 */
export interface StockQueryReqVO {
productId: number;
warehouseId: number;
}
}
/** 查询产品库存分页 */
export function getStockPage(params: PageParam) {
return requestClient.get<PageResult<ErpStockApi.Stock>>('/erp/stock/page', {
params,
});
}
/** 获得产品库存数量 */
export function getStockCount(productId: number, warehouseId?: number) {
const params: any = { productId };
if (warehouseId !== undefined) {
params.warehouseId = warehouseId;
}
return requestClient.get<number>('/erp/stock/get-count', {
params,
});
}
/** 导出产品库存 Excel */
export function exportStock(params: any) {
return requestClient.download('/erp/stock/export-excel', {
params,
});
}
/** 获取库存数量 */
export function getWarehouseStockCount(params: ErpStockApi.StockQueryReqVO) {
return requestClient.get<number>('/erp/stock/get-count', {
params,
});
}

71
apps/web-ele/src/api/erp/stock/warehouse/index.ts Normal file
View File

@@ -0,0 +1,71 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace ErpWarehouseApi {
/** 仓库信息 */
export interface Warehouse {
id?: number; // 仓库编号
name: string; // 仓库名称
address: string; // 仓库地址
sort: number; // 排序
remark: string; // 备注
principal: string; // 负责人
warehousePrice: number; // 仓储费，单位：元
truckagePrice: number; // 搬运费，单位：元
status: number; // 开启状态
defaultStatus: boolean; // 是否默认
}
}
/** 查询仓库分页 */
export function getWarehousePage(params: PageParam) {
return requestClient.get<PageResult<ErpWarehouseApi.Warehouse>>(
'/erp/warehouse/page',
{ params },
);
}
/** 查询仓库精简列表 */
export function getWarehouseSimpleList() {
return requestClient.get<ErpWarehouseApi.Warehouse[]>(
'/erp/warehouse/simple-list',
);
}
/** 查询仓库详情 */
export function getWarehouse(id: number) {
return requestClient.get<ErpWarehouseApi.Warehouse>(
`/erp/warehouse/get?id=${id}`,
);
}
/** 新增仓库 */
export function createWarehouse(data: ErpWarehouseApi.Warehouse) {
return requestClient.post('/erp/warehouse/create', data);
}
/** 修改仓库 */
export function updateWarehouse(data: ErpWarehouseApi.Warehouse) {
return requestClient.put('/erp/warehouse/update', data);
}
/** 修改仓库默认状态 */
export function updateWarehouseDefaultStatus(
id: number,
defaultStatus: boolean,
) {
return requestClient.put('/erp/warehouse/update-default-status', null, {
params: { id, defaultStatus },
});
}
/** 删除仓库 */
export function deleteWarehouse(id: number) {
return requestClient.delete(`/erp/warehouse/delete?id=${id}`);
}
/** 导出仓库 Excel */
export function exportWarehouse(params: any) {
return requestClient.download('/erp/warehouse/export-excel', { params });
}

4
apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts
View File

@@ -1,5 +1,3 @@
import type { PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace MallKefuConversationApi {
@@ -28,7 +26,7 @@ export namespace MallKefuConversationApi {
/** 获得客服会话列表 */
export function getConversationList() {
return requestClient.get<PageResult<MallKefuConversationApi.Conversation>>(
return requestClient.get<MallKefuConversationApi.Conversation[]>(
'/promotion/kefu-conversation/list',
);
}

11
apps/web-ele/src/api/mp/account/index.ts
View File

@@ -5,18 +5,19 @@ import { requestClient } from '#/api/request';
export namespace MpAccountApi {
/** 公众号账号信息 */
export interface Account {
id?: number;
id: number;
name: string;
account: string;
appId: string;
appSecret: string;
token: string;
account?: string;
appId?: string;
appSecret?: string;
token?: string;
aesKey?: string;
qrCodeUrl?: string;
remark?: string;
createTime?: Date;
}
// TODO @dylan：这个直接使用 Account，简化一点；
export interface AccountSimple {
id: number;
name: string;

3
apps/web-ele/src/components/markdown-view/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { default as MarkdownView } from './markdown-view.vue';
export * from './typing';

206
apps/web-ele/src/components/markdown-view/markdown-view.vue Normal file
View File

@@ -0,0 +1,206 @@
<script setup lang="ts">
import type { MarkdownViewProps } from './typing';
import { computed, onMounted, ref } from 'vue';
import { MarkdownIt } from '@vben/plugins/markmap';
import { useClipboard } from '@vueuse/core';
import { ElMessage } from 'element-plus';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.min.css';
// 定义组件属性
const props = defineProps<MarkdownViewProps>();
const { copy } = useClipboard(); // 初始化 copy 到粘贴板
const contentRef = ref<HTMLElement | null>(null);
const md = new MarkdownIt({
highlight(str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
const copyHtml = `<div id="copy" data-copy='${str}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`;
return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
} catch {}
}
return ``;
},
});
/** 渲染 markdown */
const renderedMarkdown = computed(() => {
return md.render(props.content);
});
/** 初始化 */
onMounted(async () => {
// 添加 copy 监听
contentRef.value?.addEventListener('click', (e: any) => {
if (e.target.id === 'copy') {
copy(e.target?.dataset?.copy);
ElMessage.success('复制成功!');
}
});
});
</script>
<template>
<div ref="contentRef" class="markdown-view" v-html="renderedMarkdown"></div>
</template>
<style lang="scss">
.markdown-view {
max-width: 100%;
font-family: 'PingFang SC';
font-size: 0.95rem;
font-weight: 400;
line-height: 1.6rem;
color: #3b3e55;
text-align: left;
letter-spacing: 0;
pre {
position: relative;
}
pre code.hljs {
width: auto;
}
code.hljs {
width: auto;
padding-top: 20px;
border-radius: 6px;
@media screen and (min-width: 1536px) {
width: 960px;
}
@media screen and (max-width: 1536px) and (min-width: 1024px) {
width: calc(100vw - 400px - 64px - 32px * 2);
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
width: calc(100vw - 32px * 2);
}
@media screen and (max-width: 768px) {
width: calc(100vw - 16px * 2);
}
}
p,
code.hljs {
margin-bottom: 16px;
}
p {
//margin-bottom: 1rem !important;
margin: 0;
margin-bottom: 3px;
}
/* 标题通用格式 */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 24px 0 8px;
font-weight: 600;
color: #3b3e55;
}
h1 {
font-size: 22px;
line-height: 32px;
}
h2 {
font-size: 20px;
line-height: 30px;
}
h3 {
font-size: 18px;
line-height: 28px;
}
h4 {
font-size: 16px;
line-height: 26px;
}
h5 {
font-size: 16px;
line-height: 24px;
}
h6 {
font-size: 16px;
line-height: 24px;
}
/* 列表（有序，无序） */
ul,
ol {
padding: 0;
margin: 0 0 8px;
font-size: 16px;
line-height: 24px;
color: #3b3e55; // var(--color-CG600);
}
li {
margin: 4px 0 0 20px;
margin-bottom: 1rem;
}
ol > li {
margin-bottom: 1rem;
list-style-type: decimal;
// 表达式,修复有序列表序号展示不全的问题
// &:nth-child(n + 10) {
// margin-left: 30px;
// }
// &:nth-child(n + 100) {
// margin-left: 30px;
// }
}
ul > li {
margin-right: 11px;
margin-bottom: 1rem;
font-size: 16px;
line-height: 24px;
color: #3b3e55; // var(--color-G900);
list-style-type: disc;
}
ol ul,
ol ul > li,
ul ul,
ul ul li {
margin-bottom: 1rem;
margin-left: 6px;
// list-style: circle;
font-size: 16px;
list-style: none;
}
ul ul ul,
ul ul ul li,
ol ol,
ol ol > li,
ol ul ul,
ol ul ul > li,
ul ol,
ul ol > li {
list-style: square;
}
}
</style>

3
apps/web-ele/src/components/markdown-view/typing.ts Normal file
View File

@@ -0,0 +1,3 @@
export type MarkdownViewProps = {
content: string;
};

3
apps/web-ele/src/components/operate-log/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { default as OperateLog } from './operate-log.vue';
export type { OperateLogProps } from './typing';

50
apps/web-ele/src/components/operate-log/operate-log.vue Normal file
View File

@@ -0,0 +1,50 @@
<script setup lang="ts">
import type { OperateLogProps } from './typing';
import { DICT_TYPE } from '@vben/constants';
import { getDictLabel, getDictObj } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { ElTag, ElTimeline, ElTimelineItem } from 'element-plus';
defineOptions({ name: 'OperateLogV2' });
withDefaults(defineProps<OperateLogProps>(), {
logList: () => [],
});
function getUserTypeColor(userType: number) {
const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
if (dict && dict.colorType) {
return `hsl(var(--${dict.colorType}))`;
}
return 'hsl(var(--primary))';
}
</script>
<template>
<div>
<ElTimeline>
<ElTimelineItem
v-for="log in logList"
:key="log.id"
:color="getUserTypeColor(log.userType)"
>
<template #dot>
<p
:style="{ backgroundColor: getUserTypeColor(log.userType) }"
class="absolute left-1 top-0 flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
>
{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
</p>
</template>
<p class="ml-2">{{ formatDateTime(log.createTime) }}</p>
<p class="ml-2 mt-2">
<ElTag :color="getUserTypeColor(log.userType)">
{{ log.userName }}
</ElTag>
{{ log.action }}
</p>
</ElTimelineItem>
</ElTimeline>
</div>
</template>

5
apps/web-ele/src/components/operate-log/typing.ts Normal file
View File

@@ -0,0 +1,5 @@
import type { SystemOperateLogApi } from '#/api/system/operate-log';
export interface OperateLogProps {
logList: SystemOperateLogApi.OperateLog[]; // 操作日志列表
}

2
apps/web-ele/src/components/table-action/icons.ts
View File

@@ -10,4 +10,6 @@ export const ACTION_ICON = {
MORE: 'lucide:ellipsis-vertical',
VIEW: 'lucide:eye',
COPY: 'lucide:copy',
BOOK: 'lucide:book',
AUDIT: 'lucide:file-check',
};

113
apps/web-ele/src/router/routes/modules/ai.ts Normal file
View File

@@ -0,0 +1,113 @@
import type { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/ai',
name: 'Ai',
meta: {
title: 'Ai',
hideInMenu: true,
},
children: [
{
path: 'image/square',
component: () => import('#/views/ai/image/square/index.vue'),
name: 'AiImageSquare',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '绘图作品',
activePath: '/ai/image',
},
},
{
path: 'knowledge/document',
component: () => import('#/views/ai/knowledge/document/index.vue'),
name: 'AiKnowledgeDocument',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '知识库文档',
activePath: '/ai/knowledge',
},
},
{
path: 'knowledge/document/create',
component: () => import('#/views/ai/knowledge/document/form/index.vue'),
name: 'AiKnowledgeDocumentCreate',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '创建文档',
activePath: '/ai/knowledge',
},
},
{
path: 'knowledge/document/update',
component: () => import('#/views/ai/knowledge/document/form/index.vue'),
name: 'AiKnowledgeDocumentUpdate',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '修改文档',
activePath: '/ai/knowledge',
},
},
{
path: 'knowledge/retrieval',
component: () =>
import('#/views/ai/knowledge/knowledge/retrieval/index.vue'),
name: 'AiKnowledgeRetrieval',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '文档召回测试',
activePath: '/ai/knowledge',
},
},
{
path: 'knowledge/segment',
component: () => import('#/views/ai/knowledge/segment/index.vue'),
name: 'AiKnowledgeSegment',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '知识库分段',
activePath: '/ai/knowledge',
},
},
{
path: String.raw`workflow/create/:id(\d+)/:type(update|create)`,
component: () => import('#/views/ai/workflow/form/index.vue'),
name: 'AiWorkflowCreate',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '设计 AI 工作流',
activePath: '/ai/workflow',
},
},
{
path: 'console/workflow/:type/:id',
component: () => import('#/views/ai/workflow/form/index.vue'),
name: 'AiWorkflowUpdate',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '设计 AI 工作流',
activePath: '/ai/workflow',
},
},
],
},
];
export default routes;

90
apps/web-ele/src/router/routes/modules/crm.ts Normal file
View File

@@ -0,0 +1,90 @@
import type { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/crm',
name: 'CrmCenter',
meta: {
title: '客户管理',
icon: 'simple-icons:civicrm',
keepAlive: true,
hideInMenu: true,
},
children: [
{
path: 'clue/detail/:id',
name: 'CrmClueDetail',
meta: {
title: '线索详情',
activePath: '/crm/clue',
},
component: () => import('#/views/crm/clue/detail/index.vue'),
},
// {
// path: 'customer/detail/:id',
// name: 'CrmCustomerDetail',
// meta: {
// title: '客户详情',
// activePath: '/crm/customer',
// },
// component: () => import('#/views/crm/customer/detail/index.vue'),
// },
// {
// path: 'business/detail/:id',
// name: 'CrmBusinessDetail',
// meta: {
// title: '商机详情',
// activePath: '/crm/business',
// },
// component: () => import('#/views/crm/business/detail/index.vue'),
// },
// {
// path: 'contract/detail/:id',
// name: 'CrmContractDetail',
// meta: {
// title: '合同详情',
// activePath: '/crm/contract',
// },
// component: () => import('#/views/crm/contract/detail/index.vue'),
// },
{
path: 'receivable-plan/detail/:id',
name: 'CrmReceivablePlanDetail',
meta: {
title: '回款计划详情',
activePath: '/crm/receivable-plan',
},
component: () => import('#/views/crm/receivable/plan/detail/index.vue'),
},
{
path: 'receivable/detail/:id',
name: 'CrmReceivableDetail',
meta: {
title: '回款详情',
activePath: '/crm/receivable',
},
component: () => import('#/views/crm/receivable/detail/index.vue'),
},
// {
// path: 'contact/detail/:id',
// name: 'CrmContactDetail',
// meta: {
// title: '联系人详情',
// activePath: '/crm/contact',
// },
// component: () => import('#/views/crm/contact/detail/index.vue'),
// },
{
path: 'product/detail/:id',
name: 'CrmProductDetail',
meta: {
title: '产品详情',
activePath: '/crm/product',
},
component: () => import('#/views/crm/product/detail/index.vue'),
},
],
},
];
export default routes;

77
apps/web-ele/src/views/ai/chat/index/data.ts Normal file
View File

@@ -0,0 +1,77 @@
import type { VbenFormSchema } from '#/adapter/form';
import { AiModelTypeEnum } from '@vben/constants';
import { getModelSimpleList } from '#/api/ai/model/model';
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'systemMessage',
label: '角色设定',
component: 'Textarea',
componentProps: {
rows: 4,
placeholder: '请输入角色设定',
},
},
{
component: 'ApiSelect',
fieldName: 'modelId',
label: '模型',
componentProps: {
api: () => getModelSimpleList(AiModelTypeEnum.CHAT),
labelField: 'name',
valueField: 'id',
allowClear: true,
placeholder: '请选择模型',
},
rules: 'required',
},
{
fieldName: 'temperature',
label: '温度参数',
component: 'InputNumber',
componentProps: {
placeholder: '请输入温度参数',
class: 'w-full',
precision: 2,
min: 0,
max: 2,
},
rules: 'required',
},
{
fieldName: 'maxTokens',
label: '回复数 Token 数',
component: 'InputNumber',
componentProps: {
placeholder: '请输入回复数 Token 数',
class: 'w-full',
min: 0,
max: 8192,
},
rules: 'required',
},
{
fieldName: 'maxContexts',
label: '上下文数量',
component: 'InputNumber',
componentProps: {
placeholder: '请输入上下文数量',
class: 'w-full',
min: 0,
max: 20,
},
rules: 'required',
},
];
}

690
apps/web-ele/src/views/ai/chat/index/index.vue Normal file
View File

@@ -0,0 +1,690 @@
<script lang="ts" setup>
import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
import type { AiChatMessageApi } from '#/api/ai/chat/message';
import { computed, nextTick, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { alert, confirm, Page, useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
ElButton,
ElContainer,
ElFooter,
ElHeader,
ElMain,
ElMessage,
ElSwitch,
} from 'element-plus';
import { getChatConversationMy } from '#/api/ai/chat/conversation';
import {
deleteByConversationId,
getChatMessageListByConversationId,
sendChatMessageStream,
} from '#/api/ai/chat/message';
import ConversationList from './modules/conversation/list.vue';
import ConversationUpdateForm from './modules/conversation/update-form.vue';
import MessageFileUpload from './modules/message/file-upload.vue';
import MessageListEmpty from './modules/message/list-empty.vue';
import MessageList from './modules/message/list.vue';
import MessageLoading from './modules/message/loading.vue';
import MessageNewConversation from './modules/message/new-conversation.vue';
/** AI 聊天对话 列表 */
defineOptions({ name: 'AiChat' });
const route = useRoute();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ConversationUpdateForm,
destroyOnClose: true,
});
// 聊天对话
const conversationListRef = ref();
const activeConversationId = ref<null | number>(null); // 选中的对话编号
const activeConversation = ref<AiChatConversationApi.ChatConversation | null>(
null,
); // 选中的 Conversation
const conversationInProgress = ref(false); // 对话是否正在进行中。目前只有【发送】消息时，会更新为 true，避免切换对话、删除对话等操作
// 消息列表
const messageRef = ref();
const activeMessageList = ref<AiChatMessageApi.ChatMessage[]>([]); // 选中对话的消息列表
const activeMessageListLoading = ref<boolean>(false); // activeMessageList 是否正在加载中
const activeMessageListLoadingTimer = ref<any>(); // activeMessageListLoading Timer 定时器。如果加载速度很快，就不进入加载中
// 消息滚动
const textSpeed = ref<number>(50); // Typing speed in milliseconds
const textRoleRunning = ref<boolean>(false); // Typing speed in milliseconds
// 发送消息输入框
const isComposing = ref(false); // 判断用户是否在输入
const conversationInAbortController = ref<any>(); // 对话进行中 abort 控制器(控制 stream 对话)
const inputTimeout = ref<any>(); // 处理输入中回车的定时器
const prompt = ref<string>(); // prompt
const enableContext = ref<boolean>(true); // 是否开启上下文
const enableWebSearch = ref<boolean>(false); // 是否开启联网搜索
const uploadFiles = ref<string[]>([]); // 上传的文件 URL 列表
// 接收 Stream 消息
const receiveMessageFullText = ref('');
const receiveMessageDisplayedText = ref('');
// =========== 【聊天对话】相关 ===========
/** 获取对话信息 */
async function getConversation(id: null | number) {
if (!id) {
return;
}
const conversation: AiChatConversationApi.ChatConversation =
await getChatConversationMy(id);
if (!conversation) {
return;
}
activeConversation.value = conversation;
activeConversationId.value = conversation.id;
}
/**
* 点击某个对话
*
* @param conversation 选中的对话
* @return 是否切换成功
*/
async function handleConversationClick(
conversation: AiChatConversationApi.ChatConversation,
) {
// 对话进行中，不允许切换
if (conversationInProgress.value) {
await alert('对话中，不允许切换!');
return false;
}
// 更新选中的对话 id
activeConversationId.value = conversation.id;
activeConversation.value = conversation;
// 刷新 message 列表
await getMessageList();
// 滚动底部
await scrollToBottom(true);
prompt.value = '';
// 清空输入框
prompt.value = '';
// 清空文件列表
uploadFiles.value = [];
return true;
}
/** 删除某个对话*/
async function handlerConversationDelete(
delConversation: AiChatConversationApi.ChatConversation,
) {
// 删除的对话如果是当前选中的，那么就重置
if (activeConversationId.value === delConversation.id) {
await handleConversationClear();
}
}
/** 清空选中的对话 */
async function handleConversationClear() {
// 对话进行中，不允许切换
if (conversationInProgress.value) {
await alert('对话中，不允许切换!');
return false;
}
activeConversationId.value = null;
activeConversation.value = null;
activeMessageList.value = [];
// 清空输入框和文件列表
prompt.value = '';
uploadFiles.value = [];
}
async function openChatConversationUpdateForm() {
formModalApi.setData({ id: activeConversationId.value }).open();
}
/** 对话更新成功，刷新最新信息 */
async function handleConversationUpdateSuccess() {
await getConversation(activeConversationId.value);
}
/** 处理聊天对话的创建成功 */
async function handleConversationCreate() {
// 创建对话
await conversationListRef.value.createConversation();
}
/** 处理聊天对话的创建成功 */
async function handleConversationCreateSuccess() {
// 创建新的对话，清空输入框
prompt.value = '';
// 清空文件列表
uploadFiles.value = [];
}
// =========== 【消息列表】相关 ===========
/** 获取消息 message 列表 */
async function getMessageList() {
try {
if (activeConversationId.value === null) {
return;
}
// Timer 定时器，如果加载速度很快，就不进入加载中
activeMessageListLoadingTimer.value = setTimeout(() => {
activeMessageListLoading.value = true;
}, 60);
// 获取消息列表
activeMessageList.value = await getChatMessageListByConversationId(
activeConversationId.value,
);
// 滚动到最下面
await nextTick();
await scrollToBottom();
} finally {
// time 定时器，如果加载速度很快，就不进入加载中
if (activeMessageListLoadingTimer.value) {
clearTimeout(activeMessageListLoadingTimer.value);
}
// 加载结束
activeMessageListLoading.value = false;
}
}
/**
* 消息列表
*
* 和 {@link #getMessageList()} 的差异是，把 systemMessage 考虑进去
*/
const messageList = computed(() => {
if (activeMessageList.value.length > 0) {
return activeMessageList.value;
}
// 没有消息时，如果有 systemMessage 则展示它
if (activeConversation.value?.systemMessage) {
return [
{
id: 0,
type: 'system',
content: activeConversation.value.systemMessage,
},
];
}
return [];
});
/** 处理删除 message 消息 */
function handleMessageDelete() {
if (conversationInProgress.value) {
alert('回答中，不能删除!');
return;
}
// 刷新 message 列表
getMessageList();
}
/** 处理 message 清空 */
async function handlerMessageClear() {
if (!activeConversationId.value) {
return;
}
try {
// 确认提示
await confirm('确认清空对话消息？');
// 清空对话
await deleteByConversationId(activeConversationId.value);
// 刷新 message 列表
activeMessageList.value = [];
} catch {}
}
/** 回到 message 列表的顶部 */
function handleGoTopMessage() {
messageRef.value.handlerGoTop();
}
// =========== 【发送消息】相关 ===========
/** 处理来自 keydown 的发送消息 */
async function handleSendByKeydown(event: any) {
// 判断用户是否在输入
if (isComposing.value) {
return;
}
// 进行中不允许发送
if (conversationInProgress.value) {
return;
}
const content = prompt.value?.trim() as string;
if (event.key === 'Enter') {
if (event.shiftKey) {
// 插入换行
prompt.value += '\r\n';
event.preventDefault(); // 防止默认的换行行为
} else {
// 发送消息
await doSendMessage(content);
event.preventDefault(); // 防止默认的提交行为
}
}
}
/** 处理来自【发送】按钮的发送消息 */
function handleSendByButton() {
doSendMessage(prompt.value?.trim() as string);
}
/** 处理 prompt 输入变化 */
function handlePromptInput(event: any) {
// 非输入法 输入设置为 true
if (!isComposing.value) {
// 回车 event data 是 null
if (event.data === null || event.data === 'null') {
return;
}
isComposing.value = true;
}
// 清理定时器
if (inputTimeout.value) {
clearTimeout(inputTimeout.value);
}
// 重置定时器
inputTimeout.value = setTimeout(() => {
isComposing.value = false;
}, 400);
}
function onCompositionstart() {
isComposing.value = true;
}
function onCompositionend() {
setTimeout(() => {
isComposing.value = false;
}, 200);
}
/** 真正执行【发送】消息操作 */
async function doSendMessage(content: string) {
// 校验
if (content.length === 0) {
ElMessage.error('发送失败，原因：内容为空！');
return;
}
if (activeConversationId.value === null) {
ElMessage.error('还没创建对话，不能发送!');
return;
}
// 准备附件 URL 数组
const attachmentUrls = [...uploadFiles.value];
// 清空输入框和文件列表
prompt.value = '';
uploadFiles.value = [];
// 执行发送
await doSendMessageStream({
conversationId: activeConversationId.value,
content,
attachmentUrls,
} as AiChatMessageApi.ChatMessage);
}
/** 真正执行【发送】消息操作 */
async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
// 创建 AbortController 实例，以便中止请求
conversationInAbortController.value = new AbortController();
// 标记对话进行中
conversationInProgress.value = true;
// 设置为空
receiveMessageFullText.value = '';
try {
// 1.1 先添加两个假数据，等 stream 返回再替换
activeMessageList.value.push(
{
id: -1,
conversationId: activeConversationId.value,
type: 'user',
content: userMessage.content,
attachmentUrls: userMessage.attachmentUrls || [],
createTime: new Date(),
} as AiChatMessageApi.ChatMessage,
{
id: -2,
conversationId: activeConversationId.value,
type: 'assistant',
content: '思考中...',
reasoningContent: '',
createTime: new Date(),
} as AiChatMessageApi.ChatMessage,
);
// 1.2 滚动到最下面
await nextTick();
await scrollToBottom(); // 底部
// 1.3 开始滚动
textRoll().then();
// 2. 发送 event stream
let isFirstChunk = true; // 是否是第一个 chunk 消息段
await sendChatMessageStream(
userMessage.conversationId,
userMessage.content,
conversationInAbortController.value,
enableContext.value,
enableWebSearch.value,
async (res: any) => {
const { code, data, msg } = JSON.parse(res.data);
if (code !== 0) {
await alert(`对话异常! ${msg}`);
// 如果未接收到消息，则进行删除
if (receiveMessageFullText.value === '') {
activeMessageList.value.pop();
}
return;
}
// 如果内容和推理内容都为空，就不处理
if (data.receive.content === '' && !data.receive.reasoningContent) {
return;
}
// 首次返回需要添加一个 message 到页面，后面的都是更新
if (isFirstChunk) {
isFirstChunk = false;
// 弹出两个假数据
activeMessageList.value.pop();
activeMessageList.value.pop();
// 更新返回的数据
activeMessageList.value.push(data.send, data.receive);
data.send.attachmentUrls = userMessage.attachmentUrls;
}
// 处理 reasoningContent
if (data.receive.reasoningContent) {
const lastMessage =
activeMessageList.value[activeMessageList.value.length - 1];
// 累加推理内容
lastMessage.reasoningContent =
(lastMessage.reasoningContent || '') +
data.receive.reasoningContent;
}
// 处理正常内容
if (data.receive.content !== '') {
receiveMessageFullText.value =
receiveMessageFullText.value + data.receive.content;
}
// 滚动到最下面
await scrollToBottom();
},
(error: any) => {
// 异常提示，并停止流
alert(`对话异常!`);
stopStream();
// 需要抛出异常，禁止重试
throw error;
},
() => {
stopStream();
},
userMessage.attachmentUrls,
);
} catch {}
}
/** 停止 stream 流式调用 */
async function stopStream() {
// tip：如果 stream 进行中的 message，就需要调用 controller 结束
if (conversationInAbortController.value) {
conversationInAbortController.value.abort();
}
// 设置为 false
conversationInProgress.value = false;
}
/** 编辑 message：设置为 prompt，可以再次编辑 */
function handleMessageEdit(message: AiChatMessageApi.ChatMessage) {
prompt.value = message.content;
}
/** 刷新 message：基于指定消息，再次发起对话 */
function handleMessageRefresh(message: AiChatMessageApi.ChatMessage) {
doSendMessage(message.content);
}
// ============== 【消息滚动】相关 =============
/** 滚动到 message 底部 */
async function scrollToBottom(isIgnore?: boolean) {
await nextTick();
if (messageRef.value) {
messageRef.value.scrollToBottom(isIgnore);
}
}
/** 自提滚动效果 */
async function textRoll() {
let index = 0;
try {
// 只能执行一次
if (textRoleRunning.value) {
return;
}
// 设置状态
textRoleRunning.value = true;
receiveMessageDisplayedText.value = '';
async function task() {
// 调整速度
const diff =
(receiveMessageFullText.value.length -
receiveMessageDisplayedText.value.length) /
10;
if (diff > 5) {
textSpeed.value = 10;
} else if (diff > 2) {
textSpeed.value = 30;
} else if (diff > 1.5) {
textSpeed.value = 50;
} else {
textSpeed.value = 100;
}
// 对话结束，就按 30 的速度
if (!conversationInProgress.value) {
textSpeed.value = 10;
}
if (index < receiveMessageFullText.value.length) {
receiveMessageDisplayedText.value +=
receiveMessageFullText.value[index];
index++;
// 更新 message
const lastMessage =
activeMessageList.value[activeMessageList.value.length - 1];
if (lastMessage)
lastMessage.content = receiveMessageDisplayedText.value;
// 滚动到住下面
await scrollToBottom();
// 重新设置任务
timer = setTimeout(task, textSpeed.value);
} else {
// 不是对话中可以结束
if (conversationInProgress.value) {
// 重新设置任务
timer = setTimeout(task, textSpeed.value);
} else {
textRoleRunning.value = false;
clearTimeout(timer);
}
}
}
let timer = setTimeout(task, textSpeed.value);
} catch {}
}
/** 初始化 */
onMounted(async () => {
// 如果有 conversationId 参数，则默认选中
if (route.query.conversationId) {
const id = route.query.conversationId as unknown as number;
activeConversationId.value = id;
await getConversation(id);
}
// 获取列表数据
activeMessageListLoading.value = true;
await getMessageList();
});
</script>
<template>
<Page auto-content-height>
<ElContainer class="absolute left-0 top-0 m-4 h-full w-full flex-1">
<!-- 左侧：对话列表 -->
<ConversationList
class="!bg-card"
:active-id="activeConversationId"
ref="conversationListRef"
@on-conversation-create="handleConversationCreateSuccess"
@on-conversation-click="handleConversationClick"
@on-conversation-clear="handleConversationClear"
@on-conversation-delete="handlerConversationDelete"
/>
<!-- 右侧：详情部分 -->
<ElContainer class="bg-card mx-4">
<ElHeader
class="!bg-card border-border flex !h-12 items-center justify-between border-b !px-4"
>
<div class="text-lg font-bold">
{{ activeConversation?.title ? activeConversation?.title : '对话' }}
<span v-if="activeMessageList.length > 0">
({{ activeMessageList.length }})
</span>
</div>
<div class="flex w-72 justify-end" v-if="activeConversation">
<ElButton
type="primary"
plain
class="mr-2 px-2"
size="small"
@click="openChatConversationUpdateForm"
>
<span v-html="activeConversation?.modelName"></span>
<IconifyIcon icon="lucide:settings" class="ml-2 size-4" />
</ElButton>
<ElButton
size="small"
class="mr-2 px-2"
@click="handlerMessageClear"
>
<IconifyIcon icon="lucide:trash-2" color="#787878" />
</ElButton>
<ElButton size="small" class="mr-2 px-2">
<IconifyIcon icon="lucide:download" color="#787878" />
</ElButton>
<ElButton
size="small"
class="mr-2 px-2"
@click="handleGoTopMessage"
>
<IconifyIcon icon="lucide:arrow-up" color="#787878" />
</ElButton>
</div>
</ElHeader>
<ElMain class="relative m-0 h-full w-full p-0">
<div class="absolute inset-0 m-0 overflow-y-hidden p-0">
<MessageLoading v-if="activeMessageListLoading" />
<MessageNewConversation
v-if="!activeConversation"
@on-new-conversation="handleConversationCreate"
/>
<MessageListEmpty
v-if="
!activeMessageListLoading &&
messageList.length === 0 &&
activeConversation
"
@on-prompt="doSendMessage"
/>
<MessageList
v-if="!activeMessageListLoading && messageList.length > 0"
ref="messageRef"
:conversation="activeConversation as any"
:list="messageList as any"
@on-delete-success="handleMessageDelete"
@on-edit="handleMessageEdit"
@on-refresh="handleMessageRefresh"
/>
</div>
</ElMain>
<ElFooter class="!bg-card flex flex-col !p-0">
<form
class="border-border mx-4 mb-8 mt-2 flex flex-col rounded-xl border p-2"
>
<textarea
class="box-border h-24 resize-none overflow-auto rounded-md p-2 focus:outline-none"
v-model="prompt"
@keydown="handleSendByKeydown"
@input="handlePromptInput"
@compositionstart="onCompositionstart"
@compositionend="onCompositionend"
placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
></textarea>
<div class="flex justify-between pb-0 pt-1">
<div class="flex items-center gap-3">
<MessageFileUpload
v-model="uploadFiles"
:disabled="conversationInProgress"
/>
<div class="flex items-center">
<ElSwitch v-model="enableContext" size="small" />
<span class="ml-1 text-sm text-gray-400">上下文</span>
</div>
<div class="flex items-center">
<ElSwitch v-model="enableWebSearch" size="small" />
<span class="ml-1 text-sm text-gray-400">联网搜索</span>
</div>
</div>
<ElButton
type="primary"
@click="handleSendByButton"
:loading="conversationInProgress"
v-if="conversationInProgress === false"
>
<IconifyIcon
:icon="
conversationInProgress
? 'lucide:loader'
: 'lucide:send-horizontal'
"
/>
{{ conversationInProgress ? '进行中' : '发送' }}
</ElButton>
<ElButton
type="danger"
@click="stopStream()"
v-if="conversationInProgress === true"
>
<IconifyIcon icon="lucide:circle-stop" />
停止
</ElButton>
</div>
</form>
</ElFooter>
</ElContainer>
</ElContainer>
<FormModal @success="handleConversationUpdateSuccess" />
</Page>
</template>

397
apps/web-ele/src/views/ai/chat/index/modules/conversation/list.vue Normal file
View File

@@ -0,0 +1,397 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
import { h, onMounted, ref, toRefs, watch } from 'vue';
import { confirm, prompt, useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon, SvgGptIcon } from '@vben/icons';
import {
ElAside,
ElAvatar,
ElButton,
ElEmpty,
ElInput,
ElMessage,
} from 'element-plus';
import {
createChatConversationMy,
deleteChatConversationMy,
deleteChatConversationMyByUnpinned,
getChatConversationMyList,
updateChatConversationMy,
} from '#/api/ai/chat/conversation';
import { $t } from '#/locales';
import RoleRepository from '../role/repository.vue';
const props = defineProps({
activeId: {
type: [Number, null] as PropType<null | number>,
default: null,
},
});
const emits = defineEmits([
'onConversationCreate',
'onConversationClick',
'onConversationClear',
'onConversationDelete',
]);
const [Drawer, drawerApi] = useVbenDrawer({
connectedComponent: RoleRepository,
});
const searchName = ref<string>(''); // 对话搜索
const activeConversationId = ref<null | number>(null); // 选中的对话，默认为 null
const hoverConversationId = ref<null | number>(null); // 悬浮上去的对话
const conversationList = ref([] as AiChatConversationApi.ChatConversation[]); // 对话列表
const conversationMap = ref<any>({}); // 对话分组 (置顶、今天、三天前、一星期前、一个月前)
const loading = ref<boolean>(false); // 加载中
const loadingTime = ref<any>();
/** 搜索对话 */
async function searchConversation() {
// 恢复数据
if (searchName.value.trim().length === 0) {
conversationMap.value = await getConversationGroupByCreateTime(
conversationList.value,
);
} else {
// 过滤
const filterValues = conversationList.value.filter((item) => {
return item.title.includes(searchName.value.trim());
});
conversationMap.value =
await getConversationGroupByCreateTime(filterValues);
}
}
/** 点击对话 */
async function handleConversationClick(id: number) {
// 过滤出选中的对话
const filterConversation = conversationList.value.find((item) => {
return item.id === id;
});
// 回调 onConversationClick
// noinspection JSVoidFunctionReturnValueUsed
const success = emits('onConversationClick', filterConversation) as any;
// 切换对话
if (success) {
activeConversationId.value = id;
}
}
/** 获取对话列表 */
async function getChatConversationList() {
try {
// 加载中
loadingTime.value = setTimeout(() => {
loading.value = true;
}, 50);
// 1.1 获取 对话数据
conversationList.value = await getChatConversationMyList();
// 1.2 排序
conversationList.value.sort((a, b) => {
return Number(b.createTime) - Number(a.createTime);
});
// 1.3 没有任何对话情况
if (conversationList.value.length === 0) {
activeConversationId.value = null;
conversationMap.value = {};
return;
}
// 2. 对话根据时间分组(置顶、今天、一天前、三天前、七天前、30 天前)
conversationMap.value = await getConversationGroupByCreateTime(
conversationList.value,
);
} finally {
// 清理定时器
if (loadingTime.value) {
clearTimeout(loadingTime.value);
}
// 加载完成
loading.value = false;
}
}
/** 按照 creteTime 创建时间，进行分组 */
async function getConversationGroupByCreateTime(
list: AiChatConversationApi.ChatConversation[],
) {
// 排序、指定、时间分组(今天、一天前、三天前、七天前、30天前)
// noinspection NonAsciiCharacters
const groupMap: any = {
置顶: [],
今天: [],
一天前: [],
三天前: [],
七天前: [],
三十天前: [],
};
// 当前时间的时间戳
const now = Date.now();
// 定义时间间隔常量（单位：毫秒）
const oneDay = 24 * 60 * 60 * 1000;
const threeDays = 3 * oneDay;
const sevenDays = 7 * oneDay;
const thirtyDays = 30 * oneDay;
for (const conversation of list) {
// 置顶
if (conversation.pinned) {
groupMap['置顶'].push(conversation);
continue;
}
// 计算时间差（单位：毫秒）
const diff = now - Number(conversation.createTime);
// 根据时间间隔判断
if (diff < oneDay) {
groupMap['今天'].push(conversation);
} else if (diff < threeDays) {
groupMap['一天前'].push(conversation);
} else if (diff < sevenDays) {
groupMap['三天前'].push(conversation);
} else if (diff < thirtyDays) {
groupMap['七天前'].push(conversation);
} else {
groupMap['三十天前'].push(conversation);
}
}
return groupMap;
}
/** 新建对话 */
async function handleConversationCreate() {
// 1. 创建对话
const conversationId = await createChatConversationMy({
roleId: undefined,
} as unknown as AiChatConversationApi.ChatConversation);
// 2. 刷新列表
await getChatConversationList();
// 3. 回调
emits('onConversationCreate', conversationId);
}
/** 清空未置顶的对话 */
async function handleConversationClear() {
await confirm({
title: '清空未置顶的对话',
content: h('div', {}, [
h('p', '确认清空未置顶的对话吗？'),
h('p', '清空后，未置顶的对话将被删除，无法恢复！'),
]),
});
// 清空
await deleteChatConversationMyByUnpinned();
// 刷新列表
await getChatConversationList();
// 回调
emits('onConversationClear');
}
/** 删除对话 */
async function handleConversationDelete(id: number) {
await confirm({
title: '删除对话',
content: h('div', {}, [
h('p', '确认删除该对话吗？'),
h('p', '删除后，该对话将被删除，无法恢复！'),
]),
});
// 删除
await deleteChatConversationMy(id);
// 刷新列表
await getChatConversationList();
// 回调
emits('onConversationDelete', id);
}
/** 置顶对话 */
async function handleConversationPin(conversation: any) {
// 更新
await updateChatConversationMy({
id: conversation.id,
pinned: !conversation.pinned,
} as AiChatConversationApi.ChatConversation);
// 刷新列表
await getChatConversationList();
}
/** 编辑对话 */
async function handleConversationEdit(conversation: any) {
const title = await prompt({
title: '编辑对话',
content: '请输入对话标题',
defaultValue: conversation.title,
});
// 更新
await updateChatConversationMy({
id: conversation.id,
title,
} as AiChatConversationApi.ChatConversation);
// 刷新列表
await getChatConversationList();
// 提示
ElMessage.success($t('ui.actionMessage.operationSuccess'));
}
/** 打开角色仓库 */
async function handleRoleRepositoryOpen() {
drawerApi.open();
}
/** 监听 activeId 变化 */
watch(
() => props.activeId,
(newValue) => {
activeConversationId.value = newValue;
},
);
const { activeId } = toRefs(props);
/** 初始化 */
onMounted(async () => {
// 获取对话列表
await getChatConversationList();
// 设置选中的对话
if (activeId.value) {
activeConversationId.value = activeId.value;
}
});
defineExpose({ getChatConversationList });
</script>
<template>
<ElAside
class="bg-card relative flex h-full flex-col overflow-hidden border-r border-gray-200"
width="280px"
>
<Drawer />
<!-- 头部 -->
<div class="flex flex-col p-4">
<div class="mb-4 flex flex-row items-center justify-between">
<div class="text-lg font-bold">对话</div>
<div class="flex flex-row">
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="handleConversationCreate"
>
<IconifyIcon icon="lucide:plus" />
</ElButton>
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="handleConversationClear"
>
<IconifyIcon icon="lucide:trash" />
</ElButton>
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="handleRoleRepositoryOpen"
>
<IconifyIcon icon="lucide:user" />
</ElButton>
</div>
</div>
<ElInput
v-model="searchName"
placeholder="搜索对话"
@keyup.enter="searchConversation"
>
<template #suffix>
<IconifyIcon icon="lucide:search" />
</template>
</ElInput>
</div>
<!-- 对话列表 -->
<div class="flex-1 overflow-y-auto px-4">
<div v-if="loading" class="flex h-full items-center justify-center">
<div class="text-sm text-gray-400">加载中...</div>
</div>
<div v-else-if="Object.keys(conversationMap).length === 0">
<ElEmpty description="暂无对话" />
</div>
<div v-else>
<div
v-for="(conversations, groupName) in conversationMap"
:key="groupName"
>
<div
v-if="conversations.length > 0"
class="mb-2 mt-4 text-xs text-gray-400"
>
{{ groupName }}
</div>
<div
v-for="conversation in conversations"
:key="conversation.id"
class="group relative mb-2 cursor-pointer rounded-lg p-2 transition-all hover:bg-gray-100"
:class="{
'bg-gray-100': activeConversationId === conversation.id,
}"
@click="handleConversationClick(conversation.id)"
@mouseenter="hoverConversationId = conversation.id"
@mouseleave="hoverConversationId = null"
>
<div class="flex items-center">
<ElAvatar
v-if="conversation.roleAvatar"
:src="conversation.roleAvatar"
:size="28"
/>
<SvgGptIcon v-else class="size-7" />
<div class="ml-2 flex-1 overflow-hidden">
<div class="truncate text-sm font-medium">
{{ conversation.title }}
</div>
</div>
<div
v-if="hoverConversationId === conversation.id"
class="flex flex-row"
>
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click.stop="handleConversationPin(conversation)"
>
<IconifyIcon
:icon="
conversation.pinned ? 'lucide:pin-off' : 'lucide:pin'
"
/>
</ElButton>
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click.stop="handleConversationEdit(conversation)"
>
<IconifyIcon icon="lucide:edit" />
</ElButton>
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click.stop="handleConversationDelete(conversation.id)"
>
<IconifyIcon icon="lucide:trash" />
</ElButton>
</div>
</div>
</div>
</div>
</div>
</div>
</ElAside>
</template>

82
apps/web-ele/src/views/ai/chat/index/modules/conversation/update-form.vue Normal file
View File

@@ -0,0 +1,82 @@
<script lang="ts" setup>
import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
getChatConversationMy,
updateChatConversationMy,
} from '#/api/ai/chat/conversation';
import { $t } from '#/locales';
import { useFormSchema } from '../../data';
const emit = defineEmits(['success']);
const formData = ref<AiChatConversationApi.ChatConversation>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 110,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as AiChatConversationApi.ChatConversation;
try {
await updateChatConversationMy(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<AiChatConversationApi.ChatConversation>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getChatConversationMy(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-2/5" title="设定">
<Form class="mx-4" />
</Modal>
</template>

304
apps/web-ele/src/views/ai/chat/index/modules/message/file-upload.vue Normal file
View File

@@ -0,0 +1,304 @@
<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { formatFileSize, getFileIcon } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { useUpload } from '#/components/upload/use-upload';
export interface FileItem {
name: string;
size: number;
url?: string;
uploading?: boolean;
progress?: number;
raw?: File;
}
const props = withDefaults(
defineProps<{
acceptTypes?: string;
disabled?: boolean;
limit?: number;
maxSize?: number;
modelValue?: string[];
}>(),
{
modelValue: () => [],
limit: 5,
maxSize: 10,
acceptTypes:
'.jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.txt,.xls,.xlsx,.ppt,.pptx,.csv,.md',
disabled: false,
},
);
const emit = defineEmits<{
'update:modelValue': [value: string[]];
uploadError: [error: any];
uploadSuccess: [file: FileItem];
}>();
const fileInputRef = ref<HTMLInputElement>();
const fileList = ref<FileItem[]>([]);
const uploadedUrls = ref<string[]>([]);
const showTooltip = ref(false);
const hideTimer = ref<NodeJS.Timeout | null>(null);
const { httpRequest } = useUpload();
/** 监听 v-model 变化 */
watch(
() => props.modelValue,
(newVal) => {
uploadedUrls.value = [...newVal];
if (newVal.length === 0) {
fileList.value = [];
}
},
{ immediate: true, deep: true },
);
/** 是否有文件 */
const hasFiles = computed(() => fileList.value.length > 0);
/** 是否达到上传限制 */
const isLimitReached = computed(() => fileList.value.length >= props.limit);
/** 触发文件选择 */
function triggerFileInput() {
fileInputRef.value?.click();
}
/** 显示 tooltip */
function showTooltipHandler() {
if (hideTimer.value) {
clearTimeout(hideTimer.value);
hideTimer.value = null;
}
showTooltip.value = true;
}
/** 隐藏 tooltip */
function hideTooltipHandler() {
hideTimer.value = setTimeout(() => {
showTooltip.value = false;
hideTimer.value = null;
}, 300);
}
/** 处理文件选择 */
async function handleFileSelect(event: Event) {
const target = event.target as HTMLInputElement;
const files = [...(target.files || [])];
if (files.length === 0) {
return;
}
if (files.length + fileList.value.length > props.limit) {
ElMessage.error(`最多只能上传 ${props.limit} 个文件`);
target.value = '';
return;
}
for (const file of files) {
if (file.size > props.maxSize * 1024 * 1024) {
ElMessage.error(`文件 ${file.name} 大小超过 ${props.maxSize}MB`);
continue;
}
const fileItem: FileItem = {
name: file.name,
size: file.size,
uploading: true,
progress: 0,
raw: file,
};
fileList.value.push(fileItem);
await uploadFile(fileItem);
}
target.value = '';
}
/** 上传文件 */
async function uploadFile(fileItem: FileItem) {
try {
const progressInterval = setInterval(() => {
if (fileItem.progress! < 90) {
fileItem.progress = (fileItem.progress || 0) + Math.random() * 10;
}
}, 100);
const response = await httpRequest(fileItem.raw!);
clearInterval(progressInterval);
fileItem.uploading = false;
fileItem.progress = 100;
// 调试日志
console.log('上传响应:', response);
// 兼容不同的返回格式：{ url: '...' } 或 { data: '...' } 或直接是字符串
const fileUrl =
(response as any)?.url || (response as any)?.data || response;
fileItem.url = fileUrl;
console.log('提取的文件 URL:', fileUrl);
// 只有当 URL 有效时才添加到列表
if (fileUrl && typeof fileUrl === 'string') {
uploadedUrls.value.push(fileUrl);
emit('uploadSuccess', fileItem);
updateModelValue();
} else {
throw new Error('上传返回的 URL 无效');
}
} catch (error) {
fileItem.uploading = false;
ElMessage.error(`文件 ${fileItem.name} 上传失败`);
emit('uploadError', error);
const index = fileList.value.indexOf(fileItem);
if (index !== -1) {
removeFile(index);
}
}
}
/** 删除文件 */
function removeFile(index: number) {
const removedFile = fileList.value[index];
fileList.value.splice(index, 1);
if (removedFile?.url) {
const urlIndex = uploadedUrls.value.indexOf(removedFile.url);
if (urlIndex !== -1) {
uploadedUrls.value.splice(urlIndex, 1);
}
}
updateModelValue();
}
/** 更新 v-model */
function updateModelValue() {
emit('update:modelValue', [...uploadedUrls.value]);
}
/** 清空文件 */
function clearFiles() {
fileList.value = [];
uploadedUrls.value = [];
updateModelValue();
}
defineExpose({
triggerFileInput,
clearFiles,
});
onUnmounted(() => {
if (hideTimer.value) {
clearTimeout(hideTimer.value);
}
});
</script>
<template>
<div
v-if="!disabled"
class="relative inline-block"
@mouseenter="showTooltipHandler"
@mouseleave="hideTooltipHandler"
>
<!-- 文件上传按钮 -->
<button
type="button"
class="relative flex h-8 w-8 items-center justify-center rounded-full border-0 bg-transparent text-gray-600 transition-all duration-200 hover:bg-gray-100"
:class="{ 'text-blue-500 hover:bg-blue-50': hasFiles }"
:disabled="isLimitReached"
@click="triggerFileInput"
>
<IconifyIcon icon="lucide:paperclip" :size="16" />
<!-- 文件数量徽章 -->
<span
v-if="hasFiles"
class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white"
>
{{ fileList.length }}
</span>
</button>
<!-- 隐藏的文件输入框 -->
<input
ref="fileInputRef"
type="file"
multiple
style="display: none"
:accept="acceptTypes"
@change="handleFileSelect"
/>
<!-- Hover 显示的文件列表 -->
<div
v-if="hasFiles && showTooltip"
class="animate-in fade-in slide-in-from-bottom-1 absolute bottom-[calc(100%+8px)] left-1/2 z-[1000] min-w-[240px] max-w-[320px] -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg duration-200"
@mouseenter="showTooltipHandler"
@mouseleave="hideTooltipHandler"
>
<!-- Tooltip 箭头 -->
<div
class="absolute -bottom-[5px] left-1/2 h-0 w-0 -translate-x-1/2 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-200"
>
<div
class="absolute bottom-[1px] left-1/2 h-0 w-0 -translate-x-1/2 border-l-[4px] border-r-[4px] border-t-[4px] border-l-transparent border-r-transparent border-t-white"
></div>
</div>
<!-- 文件列表 -->
<div
class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-400 scrollbar-thumb-rounded-sm max-h-[200px] overflow-y-auto"
>
<div
v-for="(file, index) in fileList"
:key="index"
class="mb-1 flex items-center justify-between rounded-md bg-gray-50 p-2 text-xs transition-all duration-200 last:mb-0 hover:bg-gray-100"
:class="{ 'opacity-70': file.uploading }"
>
<div class="flex min-w-0 flex-1 items-center">
<IconifyIcon
:icon="getFileIcon(file.name)"
class="mr-2 flex-shrink-0 text-blue-500"
/>
<span
class="mr-1 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-medium text-gray-900"
>
{{ file.name }}
</span>
<span class="flex-shrink-0 text-[11px] text-gray-500">
({{ formatFileSize(file.size) }})
</span>
</div>
<div class="ml-2 flex flex-shrink-0 items-center gap-1">
<div
v-if="file.uploading"
class="h-1 w-[60px] overflow-hidden rounded-full bg-gray-200"
>
<div
class="h-full bg-blue-500 transition-all duration-300"
:style="{ width: `${file.progress || 0}%` }"
></div>
</div>
<button
v-else-if="!disabled"
type="button"
class="flex h-5 w-5 items-center justify-center rounded text-red-500 hover:bg-red-50"
@click="removeFile(index)"
>
<IconifyIcon icon="lucide:x" :size="12" />
</button>
</div>
</div>
</div>
</div>
</div>
</template>

53
apps/web-ele/src/views/ai/chat/index/modules/message/files.vue Normal file
View File

@@ -0,0 +1,53 @@
<script setup lang="ts">
import { computed } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { getFileIcon, getFileNameFromUrl, getFileTypeClass } from '@vben/utils';
const props = defineProps<{
attachmentUrls?: string[];
}>();
/** 过滤掉空值的附件列表 */
const validAttachmentUrls = computed(() => {
return (props.attachmentUrls || []).filter((url) => url && url.trim());
});
/** 点击文件 */
function handleFileClick(url: string) {
window.open(url, '_blank');
}
</script>
<template>
<div v-if="validAttachmentUrls.length > 0" class="mt-2">
<div class="flex flex-wrap gap-2">
<div
v-for="(url, index) in validAttachmentUrls"
:key="index"
class="max-w-70 flex min-w-40 cursor-pointer items-center rounded-lg border border-transparent bg-gray-100 p-3 transition-all duration-200 hover:-translate-y-1 hover:bg-gray-200 hover:shadow-lg"
@click="handleFileClick(url)"
>
<div class="mr-3 flex-shrink-0">
<div
class="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br font-bold text-white"
:class="getFileTypeClass(getFileNameFromUrl(url))"
>
<IconifyIcon
:icon="getFileIcon(getFileNameFromUrl(url))"
:size="20"
/>
</div>
</div>
<div class="min-w-0 flex-1">
<div
class="mb-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-tight text-gray-800"
:title="getFileNameFromUrl(url)"
>
{{ getFileNameFromUrl(url) }}
</div>
</div>
</div>
</div>
</div>
</template>

103
apps/web-ele/src/views/ai/chat/index/modules/message/knowledge.vue Normal file
View File

@@ -0,0 +1,103 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { ElTooltip } from 'element-plus';
const props = defineProps<{
segments: {
content: string;
documentId: number;
documentName: string;
id: number;
}[];
}>();
const document = ref<null | {
id: number;
segments: {
content: string;
id: number;
}[];
title: string;
}>(null); // 知识库文档列表
const dialogVisible = ref(false); // 知识引用详情弹窗
const documentRef = ref<HTMLElement>(); // 知识引用详情弹窗 Ref
/** 按照 document 聚合 segments */
const documentList = computed(() => {
if (!props.segments) return [];
const docMap = new Map();
props.segments.forEach((segment) => {
if (!docMap.has(segment.documentId)) {
docMap.set(segment.documentId, {
id: segment.documentId,
title: segment.documentName,
segments: [],
});
}
docMap.get(segment.documentId).segments.push({
id: segment.id,
content: segment.content,
});
});
return [...docMap.values()];
});
/** 点击 document 处理 */
function handleClick(doc: any) {
document.value = doc;
dialogVisible.value = true;
}
</script>
<template>
<!-- 知识引用列表 -->
<div
v-if="segments && segments.length > 0"
class="mt-2 rounded-lg bg-gray-50 p-2"
>
<div class="mb-2 flex items-center text-sm text-gray-400">
<IconifyIcon icon="lucide:file-text" class="mr-1" /> 知识引用
</div>
<div class="flex flex-wrap gap-2">
<div
v-for="(doc, index) in documentList"
:key="index"
class="bg-card cursor-pointer rounded-lg p-2 px-3 transition-all hover:bg-blue-50"
@click="handleClick(doc)"
>
<div class="mb-1 text-sm text-gray-600">
{{ doc.title }}
<span class="ml-1 text-xs text-gray-300">
（{{ doc.segments.length }} 条）
</span>
</div>
</div>
</div>
</div>
<ElTooltip placement="top-start" trigger="click">
<div ref="documentRef"></div>
<template #content>
<div class="mb-3 text-base font-bold">{{ document?.title }}</div>
<div class="max-h-[60vh] overflow-y-auto">
<div
v-for="(segment, index) in document?.segments"
:key="index"
class="border-b-solid border-b-gray-200 p-3 last:border-b-0"
>
<div
class="mb-2 block w-fit rounded-sm px-2 py-1 text-xs text-gray-400"
>
分段 {{ segment.id }}
</div>
<div class="mt-2 text-sm leading-[1.6] text-gray-600">
{{ segment.content }}
</div>
</div>
</div>
</template>
</ElTooltip>
</template>

39
apps/web-ele/src/views/ai/chat/index/modules/message/list-empty.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 消息列表为空时，展示 prompt 列表 -->
<script setup lang="ts">
const emits = defineEmits(['onPrompt']);
const promptList = [
{
prompt: '今天气怎么样?',
},
{
prompt: '写一首好听的诗歌?',
},
]; // prompt 列表
/** 选中 prompt 点击 */
async function handlerPromptClick(prompt: any) {
emits('onPrompt', prompt.prompt);
}
</script>
<template>
<div class="relative flex h-full w-full flex-row justify-center">
<!-- center-container -->
<div class="flex flex-col justify-center">
<!-- title -->
<div class="text-center text-3xl font-bold">芋道 AI</div>
<!-- role-list -->
<div class="mt-5 flex w-96 flex-wrap items-center justify-center">
<div
v-for="prompt in promptList"
:key="prompt.prompt"
@click="handlerPromptClick(prompt)"
class="m-2.5 flex w-44 cursor-pointer justify-center rounded-lg border border-gray-200 leading-10 hover:bg-gray-100"
>
{{ prompt.prompt }}
</div>
</div>
</div>
</div>
</template>

242
apps/web-ele/src/views/ai/chat/index/modules/message/list.vue Normal file
View File

@@ -0,0 +1,242 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
import type { AiChatMessageApi } from '#/api/ai/chat/message';
import { computed, nextTick, onMounted, ref, toRefs } from 'vue';
import { IconifyIcon, SvgGptIcon } from '@vben/icons';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';
import { formatDateTime } from '@vben/utils';
import { useClipboard } from '@vueuse/core';
import { ElAvatar, ElButton, ElMessage } from 'element-plus';
import { deleteChatMessage } from '#/api/ai/chat/message';
import { MarkdownView } from '#/components/markdown-view';
import MessageFiles from './files.vue';
import MessageKnowledge from './knowledge.vue';
import MessageReasoning from './reasoning.vue';
import MessageWebSearch from './web-search.vue';
const props = defineProps({
conversation: {
type: Object as PropType<AiChatConversationApi.ChatConversation>,
required: true,
},
list: {
type: Array as PropType<AiChatMessageApi.ChatMessage[]>,
required: true,
},
});
const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']);
const { copy } = useClipboard(); // 初始化 copy 到粘贴板
const userStore = useUserStore();
// 判断"消息列表"滚动的位置(用于判断是否需要滚动到消息最下方)
const messageContainer: any = ref(null);
const isScrolling = ref(false); // 用于判断用户是否在滚动
const userAvatar = computed(
() => userStore.userInfo?.avatar || preferences.app.defaultAvatar,
);
const { list } = toRefs(props); // 定义 emits
// ============ 处理对话滚动 ==============
/** 滚动到底部 */
async function scrollToBottom(isIgnore?: boolean) {
// 注意要使用 nextTick 以免获取不到 dom
await nextTick();
if (isIgnore || !isScrolling.value) {
messageContainer.value.scrollTop =
messageContainer.value.scrollHeight - messageContainer.value.offsetHeight;
}
}
function handleScroll() {
const scrollContainer = messageContainer.value;
const scrollTop = scrollContainer.scrollTop;
const scrollHeight = scrollContainer.scrollHeight;
const offsetHeight = scrollContainer.offsetHeight;
isScrolling.value = scrollTop + offsetHeight < scrollHeight - 100;
}
/** 回到底部 */
async function handleGoBottom() {
const scrollContainer = messageContainer.value;
scrollContainer.scrollTop = scrollContainer.scrollHeight;
}
/** 回到顶部 */
async function handlerGoTop() {
const scrollContainer = messageContainer.value;
scrollContainer.scrollTop = 0;
}
defineExpose({ scrollToBottom, handlerGoTop }); // 提供方法给 parent 调用
// ============ 处理消息操作 ==============
/** 复制 */
async function copyContent(content: string) {
await copy(content);
ElMessage.success('复制成功！');
}
/** 删除 */
async function handleDelete(id: number) {
// 删除 message
await deleteChatMessage(id);
ElMessage.success('删除成功！');
// 回调
emits('onDeleteSuccess');
}
/** 刷新 */
async function handleRefresh(message: AiChatMessageApi.ChatMessage) {
emits('onRefresh', message);
}
/** 编辑 */
async function handleEdit(message: AiChatMessageApi.ChatMessage) {
emits('onEdit', message);
}
/** 初始化 */
onMounted(async () => {
messageContainer.value.addEventListener('scroll', handleScroll);
});
</script>
<template>
<div ref="messageContainer" class="relative h-full overflow-y-auto">
<div
v-for="(item, index) in list"
:key="index"
class="mt-12 flex flex-col overflow-y-hidden px-5"
>
<!-- 左侧消息：system、assistant -->
<div v-if="item.type !== 'user'" class="flex flex-row">
<div class="avatar">
<ElAvatar
v-if="conversation.roleAvatar"
:src="conversation.roleAvatar"
:size="28"
/>
<SvgGptIcon v-else class="size-7" />
</div>
<div class="mx-4 flex flex-col text-left">
<div class="text-left leading-10">
{{ formatDateTime(item.createTime) }}
</div>
<div
class="relative flex flex-col break-words rounded-lg bg-gray-100 p-2.5 pb-1 pt-2.5 shadow-sm"
>
<MessageReasoning
:reasoning-content="item.reasoningContent || ''"
:content="item.content || ''"
/>
<MarkdownView
class="text-sm text-gray-600"
:content="item.content"
/>
<MessageFiles :attachment-urls="item.attachmentUrls" />
<MessageKnowledge v-if="item.segments" :segments="item.segments" />
<MessageWebSearch
v-if="item.webSearchPages"
:web-search-pages="item.webSearchPages"
/>
</div>
<div class="mt-2 flex flex-row">
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="copyContent(item.content)"
>
<IconifyIcon icon="lucide:copy" />
</ElButton>
<ElButton
v-if="item.id > 0"
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="handleDelete(item.id)"
>
<IconifyIcon icon="lucide:trash" />
</ElButton>
</div>
</div>
</div>
<!-- 右侧消息：user -->
<div v-else class="flex flex-row-reverse justify-start">
<div class="avatar">
<ElAvatar :src="userAvatar" :size="28" />
</div>
<div class="mx-4 flex flex-col text-left">
<div class="text-left leading-8">
{{ formatDateTime(item.createTime) }}
</div>
<div
v-if="item.attachmentUrls && item.attachmentUrls.length > 0"
class="mb-2 flex flex-row-reverse"
>
<MessageFiles :attachment-urls="item.attachmentUrls" />
</div>
<div class="flex flex-row-reverse">
<div
v-if="item.content && item.content.trim()"
class="inline w-auto whitespace-pre-wrap break-words rounded-lg bg-blue-500 p-2.5 text-sm text-white shadow-sm"
>
{{ item.content }}
</div>
</div>
<div class="mt-2 flex flex-row-reverse">
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="copyContent(item.content)"
>
<IconifyIcon icon="lucide:copy" />
</ElButton>
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="handleDelete(item.id)"
>
<IconifyIcon icon="lucide:trash" />
</ElButton>
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="handleRefresh(item)"
>
<IconifyIcon icon="lucide:refresh-cw" />
</ElButton>
<ElButton
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
text
@click="handleEdit(item)"
>
<IconifyIcon icon="lucide:edit" />
</ElButton>
</div>
</div>
</div>
</div>
</div>
<!-- 回到底部按钮 -->
<div
v-if="isScrolling"
class="z-1000 absolute bottom-0 right-1/2"
@click="handleGoBottom"
>
<ElButton circle>
<IconifyIcon icon="lucide:chevron-down" />
</ElButton>
</div>
</template>

9
apps/web-ele/src/views/ai/chat/index/modules/message/loading.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
import { ElSkeleton } from 'element-plus';
</script>
<template>
<div class="p-8">
<ElSkeleton :rows="5" animated />
</div>
</template>

25
apps/web-ele/src/views/ai/chat/index/modules/message/new-conversation.vue Normal file
View File

@@ -0,0 +1,25 @@
<script setup lang="ts">
import { ElButton } from 'element-plus';
const emits = defineEmits(['onNewConversation']);
/** 新建 conversation 聊天对话 */
function handlerNewChat() {
emits('onNewConversation');
}
</script>
<template>
<div class="flex h-full w-full flex-row justify-center">
<div class="flex flex-col justify-center">
<div class="text-center text-sm text-gray-400">
点击下方按钮，开始你的对话吧
</div>
<div class="mt-5 flex flex-row justify-center">
<ElButton type="primary" round @click="handlerNewChat">
新建对话
</ElButton>
</div>
</div>
</div>
</template>

83
apps/web-ele/src/views/ai/chat/index/modules/message/reasoning.vue Normal file
View File

@@ -0,0 +1,83 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { MarkdownView } from '#/components/markdown-view';
const props = defineProps<{
content?: string;
reasoningContent?: string;
}>();
const isExpanded = ref(true); // 默认展开
/** 判断是否应该显示组件 */
const shouldShowComponent = computed(() => {
return props.reasoningContent && props.reasoningContent.trim() !== '';
});
/** 标题文本 */
const titleText = computed(() => {
const hasReasoningContent =
props.reasoningContent && props.reasoningContent.trim() !== '';
const hasContent = props.content && props.content.trim() !== '';
if (hasReasoningContent && !hasContent) {
return '深度思考中';
}
return '已深度思考';
});
/** 切换展开/收起 */
function toggleExpanded() {
isExpanded.value = !isExpanded.value;
}
</script>
<template>
<div v-if="shouldShowComponent" class="mt-2.5">
<!-- 标题栏 -->
<div
class="flex cursor-pointer items-center justify-between rounded-t-lg border border-b-0 border-gray-200/60 bg-gradient-to-r from-blue-50 to-purple-50 p-2 transition-all duration-200 hover:from-blue-100 hover:to-purple-100"
@click="toggleExpanded"
>
<div class="flex items-center gap-1.5 text-sm font-medium text-gray-700">
<IconifyIcon icon="lucide:brain" class="text-blue-600" :size="16" />
<span>{{ titleText }}</span>
</div>
<IconifyIcon
icon="lucide:chevron-down"
class="text-gray-500 transition-transform duration-200"
:class="{ 'rotate-180': isExpanded }"
:size="14"
/>
</div>
<!-- 内容区 -->
<div
v-show="isExpanded"
class="scrollbar-thin max-h-[300px] overflow-y-auto rounded-b-lg border border-t-0 border-gray-200/60 bg-white/70 p-3 shadow-sm backdrop-blur-sm"
>
<MarkdownView
v-if="props.reasoningContent"
class="text-sm leading-relaxed text-gray-700"
:content="props.reasoningContent"
/>
</div>
</div>
</template>
<style scoped>
/* 自定义滚动条 */
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
@apply rounded-sm bg-gray-400/40;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
@apply bg-gray-400/60;
}
</style>

173
apps/web-ele/src/views/ai/chat/index/modules/message/web-search.vue Normal file
View File

@@ -0,0 +1,173 @@
<script setup lang="ts">
import type { AiChatMessageApi } from '#/api/ai/chat/message';
import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
defineProps<{
webSearchPages?: AiChatMessageApi.WebSearchPage[];
}>();
const isExpanded = ref(false); // 默认收起
const selectedResult = ref<AiChatMessageApi.WebSearchPage | null>(null); // 选中的搜索结果
const iconLoadError = ref<Record<number, boolean>>({}); // 记录图标加载失败
const [Drawer, drawerApi] = useVbenDrawer({
title: '联网搜索详情',
closable: true,
footer: true,
onCancel() {
drawerApi.close();
},
onConfirm() {
if (selectedResult.value?.url) {
window.open(selectedResult.value.url, '_blank');
}
drawerApi.close();
},
});
/** 切换展开/收起 */
function toggleExpanded() {
isExpanded.value = !isExpanded.value;
}
/** 点击搜索结果 */
function handleClick(result: AiChatMessageApi.WebSearchPage) {
selectedResult.value = result;
drawerApi.open();
}
/** 图标加载失败处理 */
function handleIconError(index: number) {
iconLoadError.value[index] = true;
}
</script>
<template>
<div v-if="webSearchPages && webSearchPages.length > 0" class="mt-2.5">
<!-- 标题栏：可点击展开/收起 -->
<div
class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray-600 transition-colors hover:text-blue-500"
@click="toggleExpanded"
>
<div class="flex items-center gap-1.5">
<IconifyIcon icon="lucide:search" :size="14" />
<span>联网搜索结果 ({{ webSearchPages.length }} 条)</span>
</div>
<IconifyIcon
:icon="isExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'"
class="text-xs transition-transform duration-200"
:size="12"
/>
</div>
<!-- 可展开的搜索结果列表 -->
<div
v-show="isExpanded"
class="flex flex-col gap-2 transition-all duration-200 ease-in-out"
>
<div
v-for="(page, index) in webSearchPages"
:key="index"
class="cursor-pointer rounded-md bg-white p-2.5 transition-all hover:bg-blue-50"
@click="handleClick(page)"
>
<div class="flex items-start gap-2">
<!-- 网站图标 -->
<div class="mt-0.5 h-4 w-4 flex-shrink-0">
<img
v-if="page.icon && !iconLoadError[index]"
:src="page.icon"
:alt="page.name"
class="h-full w-full rounded-sm object-contain"
@error="handleIconError(index)"
/>
<IconifyIcon
v-else
icon="lucide:link"
class="h-full w-full text-gray-600"
/>
</div>
<!-- 内容区域 -->
<div class="min-w-0 flex-1">
<!-- 网站名称 -->
<div class="mb-1 truncate text-xs text-gray-400">
{{ page.name }}
</div>
<!-- 主标题 -->
<div
class="mb-1 line-clamp-2 text-sm font-medium leading-snug text-blue-600"
>
{{ page.title }}
</div>
<!-- 描述 -->
<div class="mb-1 line-clamp-2 text-xs leading-snug text-gray-600">
{{ page.snippet }}
</div>
<!-- URL -->
<div class="truncate text-xs text-green-700">
{{ page.url }}
</div>
</div>
</div>
</div>
</div>
<!-- 联网搜索详情 Drawer -->
<Drawer class="w-[600px]" cancel-text="关闭" confirm-text="访问原文">
<div v-if="selectedResult">
<!-- 标题区域 -->
<div class="mb-4 flex items-start gap-3">
<div class="mt-0.5 h-6 w-6 flex-shrink-0">
<img
v-if="selectedResult.icon"
:src="selectedResult.icon"
:alt="selectedResult.name"
class="h-full w-full rounded-sm object-contain"
/>
<IconifyIcon
v-else
icon="lucide:link"
class="h-full w-full text-gray-600"
/>
</div>
<div class="min-w-0 flex-1">
<div class="mb-2 text-lg font-bold text-gray-900">
{{ selectedResult.title }}
</div>
<div class="mb-1 text-sm text-gray-500">
{{ selectedResult.name }}
</div>
<div class="break-all text-sm text-green-700">
{{ selectedResult.url }}
</div>
</div>
</div>
<!-- 内容区域 -->
<div class="space-y-4">
<!-- 简短描述 -->
<div>
<div class="mb-2 text-sm font-semibold text-gray-900">简短描述</div>
<div
class="rounded-lg bg-gray-50 p-3 text-sm leading-relaxed text-gray-700"
>
{{ selectedResult.snippet }}
</div>
</div>
<!-- 内容摘要 -->
<div v-if="selectedResult.summary">
<div class="mb-2 text-sm font-semibold text-gray-900">内容摘要</div>
<div
class="max-h-[50vh] overflow-y-auto whitespace-pre-wrap rounded-lg bg-gray-50 p-3 text-sm leading-relaxed text-gray-900"
>
{{ selectedResult.summary }}
</div>
</div>
</div>
</div>
</Drawer>
</div>
</template>

43
apps/web-ele/src/views/ai/chat/index/modules/role/category-list.vue Normal file
View File

@@ -0,0 +1,43 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import { ElButton } from 'element-plus';
defineProps({
categoryList: {
type: Array as PropType<string[]>,
required: true,
},
active: {
type: String,
required: false,
default: '全部',
},
});
const emits = defineEmits(['onCategoryClick']); // 定义回调
/** 处理分类点击事件 */
async function handleCategoryClick(category: string) {
emits('onCategoryClick', category);
}
</script>
<template>
<div class="flex flex-wrap items-center">
<div
class="mr-2 flex flex-row"
v-for="category in categoryList"
:key="category"
>
<ElButton
size="small"
round
:type="category === active ? 'primary' : 'default'"
@click="handleCategoryClick(category)"
>
{{ category }}
</ElButton>
</div>
</div>
</template>

123
apps/web-ele/src/views/ai/chat/index/modules/role/list.vue Normal file
View File

@@ -0,0 +1,123 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import {
ElAvatar,
ElButton,
ElCard,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
} from 'element-plus';
const props = defineProps({
loading: {
type: Boolean,
required: true,
},
roleList: {
type: Array as PropType<AiModelChatRoleApi.ChatRole[]>,
required: true,
},
showMore: {
type: Boolean,
required: false,
default: false,
},
});
const emits = defineEmits(['onDelete', 'onEdit', 'onUse', 'onPage']);
const tabsRef = ref<any>();
/** 操作：编辑、删除 */
async function handleMoreClick(type: string, role: any) {
if (type === 'delete') {
emits('onDelete', role);
} else {
emits('onEdit', role);
}
}
/** 选中 */
function handleUseClick(role: any) {
emits('onUse', role);
}
/** 滚动 */
async function handleTabsScroll() {
if (tabsRef.value) {
const { scrollTop, scrollHeight, clientHeight } = tabsRef.value;
if (scrollTop + clientHeight >= scrollHeight - 20 && !props.loading) {
emits('onPage');
}
}
}
</script>
<template>
<div
class="relative flex h-full flex-wrap content-start items-start overflow-auto px-6 pb-36"
ref="tabsRef"
@scroll="handleTabsScroll"
>
<div class="mb-5 mr-5 inline-block" v-for="role in roleList" :key="role.id">
<ElCard
class="relative rounded-lg"
body-style="position: relative; display: flex; flex-direction: row; justify-content: flex-start; width: 240px; max-width: 240px; padding: 15px 15px 10px;"
>
<!-- 更多操作 -->
<div v-if="showMore" class="absolute right-2 top-0">
<ElDropdown>
<ElButton link>
<IconifyIcon icon="lucide:ellipsis-vertical" />
</ElButton>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem @click="handleMoreClick('edit', role)">
<div class="flex items-center">
<IconifyIcon icon="lucide:edit" color="#787878" />
<span class="text-primary">编辑</span>
</div>
</ElDropdownItem>
<ElDropdownItem @click="handleMoreClick('delete', role)">
<div class="flex items-center">
<IconifyIcon icon="lucide:trash" color="red" />
<span class="text-red-500">删除</span>
</div>
</ElDropdownItem>
</ElDropdownMenu>
</template>
</ElDropdown>
</div>
<!-- 角色信息 -->
<div>
<ElAvatar :src="role.avatar" class="h-10 w-10 overflow-hidden" />
</div>
<div class="ml-2 w-4/5">
<div class="h-20">
<div class="max-w-32 text-lg font-bold">
{{ role.name }}
</div>
<div class="mt-2 text-sm">
{{ role.description }}
</div>
</div>
<div class="mt-1 flex flex-row-reverse">
<ElButton type="primary" size="small" @click="handleUseClick(role)">
使用
</ElButton>
</div>
</div>
</ElCard>
</div>
</div>
</template>

261
apps/web-ele/src/views/ai/chat/index/modules/role/repository.vue Normal file
View File

@@ -0,0 +1,261 @@
<script setup lang="ts">
import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
ElButton,
ElContainer,
ElInput,
ElMain,
ElTabPane,
ElTabs,
} from 'element-plus';
import { createChatConversationMy } from '#/api/ai/chat/conversation';
import { deleteMy, getCategoryList, getMyPage } from '#/api/ai/model/chatRole';
import Form from '../../../../model/chatRole/modules/form.vue';
import RoleCategoryList from './category-list.vue';
import RoleList from './list.vue';
const router = useRouter();
const [Drawer] = useVbenDrawer({
title: '角色管理',
footer: false,
class: 'w-2/5',
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const loading = ref<boolean>(false); // 加载中
const activeTab = ref<string>('my-role'); // 选中的角色 Tab
const search = ref<string>(''); // 加载中
const myRoleParams = reactive({
pageNo: 1,
pageSize: 50,
});
const myRoleList = ref<AiModelChatRoleApi.ChatRole[]>([]); // my 分页大小
const publicRoleParams = reactive({
pageNo: 1,
pageSize: 50,
});
const publicRoleList = ref<AiModelChatRoleApi.ChatRole[]>([]); // public 分页大小
const activeCategory = ref<string>('全部'); // 选择中的分类
const categoryList = ref<string[]>([]); // 角色分类类别
/** tabs 点击 */
async function handleTabsClick(tab: any) {
// 设置切换状态
activeTab.value = tab;
// 切换的时候重新加载数据
await getActiveTabsRole();
}
/** 获取 my role 我的角色 */
async function getMyRole(append?: boolean) {
const params: AiModelChatRoleApi.ChatRolePageReqVO = {
...myRoleParams,
name: search.value,
publicStatus: false,
};
const { list } = await getMyPage(params);
if (append) {
myRoleList.value.push(...list);
} else {
myRoleList.value = list;
}
}
/** 获取 public role 公共角色 */
async function getPublicRole(append?: boolean) {
const params: AiModelChatRoleApi.ChatRolePageReqVO = {
...publicRoleParams,
category: activeCategory.value === '全部' ? '' : activeCategory.value,
name: search.value,
publicStatus: true,
};
const { list } = await getMyPage(params);
if (append) {
publicRoleList.value.push(...list);
} else {
publicRoleList.value = list;
}
}
/** 获取选中的 tabs 角色 */
async function getActiveTabsRole() {
if (activeTab.value === 'my-role') {
myRoleParams.pageNo = 1;
await getMyRole();
} else {
publicRoleParams.pageNo = 1;
await getPublicRole();
}
}
/** 获取角色分类列表 */
async function getRoleCategoryList() {
categoryList.value = ['全部', ...(await getCategoryList())];
}
/** 处理分类点击 */
async function handlerCategoryClick(category: string) {
// 切换选择的分类
activeCategory.value = category;
// 筛选
await getActiveTabsRole();
}
async function handlerAddRole() {
formModalApi.setData({ formType: 'my-create' }).open();
}
/** 编辑角色 */
async function handlerCardEdit(role: any) {
formModalApi.setData({ formType: 'my-update', id: role.id }).open();
}
/** 添加角色成功 */
async function handlerAddRoleSuccess() {
// 刷新数据
await getActiveTabsRole();
}
/** 删除角色 */
async function handlerCardDelete(role: any) {
await deleteMy(role.id);
// 刷新数据
await getActiveTabsRole();
}
/** 角色分页：获取下一页 */
async function handlerCardPage(type: string) {
try {
loading.value = true;
if (type === 'public') {
publicRoleParams.pageNo++;
await getPublicRole(true);
} else {
myRoleParams.pageNo++;
await getMyRole(true);
}
} finally {
loading.value = false;
}
}
/** 选择 card 角色：新建聊天对话 */
async function handlerCardUse(role: any) {
// 1. 创建对话
const data: AiChatConversationApi.ChatConversation = {
roleId: role.id,
} as unknown as AiChatConversationApi.ChatConversation;
const conversationId = await createChatConversationMy(data);
// 2. 跳转页面
await router.push({
path: '/ai/chat',
query: {
conversationId,
},
});
}
/** 初始化 */
onMounted(async () => {
// 获取分类
await getRoleCategoryList();
// 获取 role 数据
await getActiveTabsRole();
});
</script>
<template>
<Drawer>
<ElContainer
class="bg-card absolute inset-0 flex h-full w-full flex-col overflow-hidden"
>
<FormModal @success="handlerAddRoleSuccess" />
<ElMain class="relative m-0 flex-1 overflow-hidden p-0">
<div class="z-100 absolute right-0 top--1 mr-5 mt-5">
<!-- 搜索输入框 -->
<ElInput
v-model="search"
class="w-60"
placeholder="请输入搜索的内容"
@keyup.enter="getActiveTabsRole"
>
<template #suffix>
<IconifyIcon icon="lucide:search" />
</template>
</ElInput>
<ElButton
v-if="activeTab === 'my-role'"
type="primary"
@click="handlerAddRole"
class="ml-5"
>
<IconifyIcon icon="lucide:user" class="mr-1.5" />
添加角色
</ElButton>
</div>
<!-- 标签页内容 -->
<ElTabs
v-model="activeTab"
class="relative h-full p-4"
@tab-click="handleTabsClick"
>
<ElTabPane
name="my-role"
class="flex h-full flex-col overflow-y-auto"
label="我的角色"
>
<RoleList
:loading="loading"
:role-list="myRoleList"
:show-more="true"
@on-delete="handlerCardDelete"
@on-edit="handlerCardEdit"
@on-use="handlerCardUse"
@on-page="handlerCardPage('my')"
class="mt-5"
/>
</ElTabPane>
<ElTabPane
name="public-role"
class="flex h-full flex-col overflow-y-auto"
label="公共角色"
>
<RoleCategoryList
:category-list="categoryList"
:active="activeCategory"
@on-category-click="handlerCategoryClick"
class="mx-6"
/>
<RoleList
:role-list="publicRoleList"
@on-delete="handlerCardDelete"
@on-edit="handlerCardEdit"
@on-use="handlerCardUse"
@on-page="handlerCardPage('public')"
class="mt-5"
loading
/>
</ElTabPane>
</ElTabs>
</ElMain>
</ElContainer>
</Drawer>
</template>

128
apps/web-ele/src/views/ai/image/index/index.vue Normal file
View File

@@ -0,0 +1,128 @@
<script lang="ts" setup>
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import { nextTick, onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { AiModelTypeEnum, AiPlatformEnum } from '@vben/constants';
import { ElSegmented } from 'element-plus';
import { getModelSimpleList } from '#/api/ai/model/model';
import Common from './modules/common/index.vue';
import Dall3 from './modules/dall3/index.vue';
import ImageList from './modules/list.vue';
import Midjourney from './modules/midjourney/index.vue';
import StableDiffusion from './modules/stable-diffusion/index.vue';
const imageListRef = ref<any>(); // image 列表 ref
const dall3Ref = ref<any>(); // dall3(openai) ref
const midjourneyRef = ref<any>(); // midjourney ref
const stableDiffusionRef = ref<any>(); // stable diffusion ref
const commonRef = ref<any>(); // stable diffusion ref
const selectPlatform = ref('common'); // 选中的平台
const platformOptions = [
{
label: '通用',
value: 'common',
},
{
label: 'DALL3 绘画',
value: AiPlatformEnum.OPENAI,
},
{
label: 'MJ 绘画',
value: AiPlatformEnum.MIDJOURNEY,
},
{
label: 'SD 绘图',
value: AiPlatformEnum.STABLE_DIFFUSION,
},
];
const models = ref<AiModelModelApi.Model[]>([]); // 模型列表
/** 绘画 start */
async function handleDrawStart() {}
/** 绘画 complete */
async function handleDrawComplete() {
await imageListRef.value.getImageList();
}
/** 重新生成：将画图详情填充到对应平台 */
async function handleRegeneration(image: AiImageApi.Image) {
// 切换平台
selectPlatform.value = image.platform;
// 根据不同平台填充 image
await nextTick();
switch (image.platform) {
case AiPlatformEnum.MIDJOURNEY: {
midjourneyRef.value.settingValues(image);
break;
}
case AiPlatformEnum.OPENAI: {
dall3Ref.value.settingValues(image);
break;
}
case AiPlatformEnum.STABLE_DIFFUSION: {
stableDiffusionRef.value.settingValues(image);
break;
}
// No default
}
// TODO @fan：貌似 other 重新设置不行？
}
/** 组件挂载的时候 */
onMounted(async () => {
// 获取模型列表
models.value = await getModelSimpleList(AiModelTypeEnum.IMAGE);
});
</script>
<template>
<Page auto-content-height>
<div class="absolute inset-0 m-4 flex h-full w-full flex-row">
<div class="bg-card left-0 mr-4 flex w-96 flex-col rounded-lg p-4">
<div class="flex justify-center">
<ElSegmented v-model="selectPlatform" :options="platformOptions" />
</div>
<div class="mt-8 h-full overflow-y-auto">
<Common
v-if="selectPlatform === 'common'"
ref="commonRef"
:models="models"
@on-draw-complete="handleDrawComplete"
/>
<Dall3
v-if="selectPlatform === AiPlatformEnum.OPENAI"
ref="dall3Ref"
:models="models"
@on-draw-start="handleDrawStart"
@on-draw-complete="handleDrawComplete"
/>
<Midjourney
v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY"
ref="midjourneyRef"
:models="models"
/>
<StableDiffusion
v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
ref="stableDiffusionRef"
:models="models"
@on-draw-complete="handleDrawComplete"
/>
</div>
</div>
<div class="bg-card flex-1">
<ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
</div>
</div>
</Page>
</template>

136
apps/web-ele/src/views/ai/image/index/modules/card.vue Normal file
View File

@@ -0,0 +1,136 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import type { AiImageApi } from '#/api/ai/image';
import { onMounted, ref, toRefs, watch } from 'vue';
import { confirm } from '@vben/common-ui';
import { AiImageStatusEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { ElButton, ElCard, ElImage, ElMessage } from 'element-plus';
const props = defineProps({
detail: {
type: Object as PropType<AiImageApi.Image>,
default: () => ({}),
},
});
const emits = defineEmits(['onBtnClick', 'onMjBtnClick']);
const cardImageRef = ref<any>(); // 卡片 image ref
/** 处理点击事件 */
async function handleButtonClick(type: string, detail: AiImageApi.Image) {
emits('onBtnClick', type, detail);
}
/** 处理 Midjourney 按钮点击事件 */
async function handleMidjourneyBtnClick(
button: AiImageApi.ImageMidjourneyButtons,
) {
await confirm(`确认操作 "${button.label} ${button.emoji}" ?`);
emits('onMjBtnClick', button, props.detail);
}
/** 监听详情 */
const { detail } = toRefs(props);
watch(detail, async (newVal) => {
await handleLoading(newVal.status);
});
const loading = ref();
/** 处理加载状态 */
async function handleLoading(status: number) {
// 情况一：如果是生成中，则设置加载中的 loading
if (status === AiImageStatusEnum.IN_PROGRESS) {
loading.value = ElMessage({
message: `生成中...`,
type: 'info',
});
} else {
// 情况二：如果已经生成结束，则移除 loading
if (loading.value) {
setTimeout(() => loading.value.close(), 100);
}
}
}
/** 初始化 */
onMounted(async () => {
await handleLoading(props.detail.status);
});
</script>
<template>
<ElCard class="relative flex h-auto w-80 flex-col rounded-lg">
<!-- 图片操作区 -->
<div class="flex flex-row justify-between">
<div>
<ElButton v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
生成中
</ElButton>
<ElButton v-else-if="detail?.status === AiImageStatusEnum.SUCCESS">
已完成
</ElButton>
<ElButton
type="danger"
v-else-if="detail?.status === AiImageStatusEnum.FAIL"
>
异常
</ElButton>
</div>
<div class="flex">
<ElButton
class="m-0 p-2"
text
@click="handleButtonClick('download', detail)"
>
<IconifyIcon icon="lucide:download" />
</ElButton>
<ElButton
class="m-0 p-2"
text
@click="handleButtonClick('regeneration', detail)"
>
<IconifyIcon icon="lucide:refresh-cw" />
</ElButton>
<ElButton
class="m-0 p-2"
text
@click="handleButtonClick('delete', detail)"
>
<IconifyIcon icon="lucide:trash" />
</ElButton>
<ElButton
class="m-0 p-2"
text
@click="handleButtonClick('more', detail)"
>
<IconifyIcon icon="lucide:ellipsis-vertical" />
</ElButton>
</div>
</div>
<!-- 图片展示区域 -->
<div class="mt-5 h-72 flex-1 overflow-hidden" ref="cardImageRef">
<ElImage class="w-full rounded-lg" :src="detail?.picUrl" />
<div v-if="detail?.status === AiImageStatusEnum.FAIL">
{{ detail?.errorMessage }}
</div>
</div>
<!-- Midjourney 专属操作按钮 -->
<div class="mt-2 flex w-full flex-wrap justify-start">
<ElButton
size="small"
v-for="(button, index) in detail?.buttons"
:key="index"
class="m-2 ml-0 min-w-10"
@click="handleMidjourneyBtnClick(button)"
>
{{ button.label }}{{ button.emoji }}
</ElButton>
</div>
</ElCard>
</template>

226
apps/web-ele/src/views/ai/image/index/modules/common/index.vue Normal file
View File

@@ -0,0 +1,226 @@
<!-- dall3 -->
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import { ref, watch } from 'vue';
import { confirm } from '@vben/common-ui';
import {
AiPlatformEnum,
ImageHotWords,
OtherPlatformEnum,
} from '@vben/constants';
import {
ElButton,
ElInputNumber,
ElOption,
ElSelect,
ElSpace,
} from 'element-plus';
import { drawImage } from '#/api/ai/image';
const props = defineProps({
models: {
type: Array<AiModelModelApi.Model>,
default: () => [] as AiModelModelApi.Model[],
},
}); // 接收父组件传入的模型列表
const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
const drawIn = ref<boolean>(false); // 生成中
const selectHotWord = ref<string>(''); // 选中的热词
const prompt = ref<string>(''); // 提示词
const width = ref<number>(512); // 图片宽度
const height = ref<number>(512); // 图片高度
const otherPlatform = ref<string>(AiPlatformEnum.TONG_YI); // 平台
const platformModels = ref<AiModelModelApi.Model[]>([]); // 模型列表
const modelId = ref<number>(); // 选中的模型
/** 选择热词 */
async function handleHotWordClick(hotWord: string) {
// 情况一：取消选中
if (selectHotWord.value === hotWord) {
selectHotWord.value = '';
return;
}
// 情况二：选中
selectHotWord.value = hotWord; // 选中
prompt.value = hotWord; // 替换提示词
}
/** 图片生成 */
async function handleGenerateImage() {
// 二次确认
await confirm(`确认生成内容?`);
try {
// 加载中
drawIn.value = true;
// 回调
emits('onDrawStart', otherPlatform.value);
// 发送请求
const form = {
platform: otherPlatform.value,
modelId: modelId.value, // 模型
prompt: prompt.value, // 提示词
width: width.value, // 图片宽度
height: height.value, // 图片高度
options: {},
} as unknown as AiImageApi.ImageDrawReq;
await drawImage(form);
} finally {
// 回调
emits('onDrawComplete', otherPlatform.value);
// 加载结束
drawIn.value = false;
}
}
/** 填充值 */
async function settingValues(detail: AiImageApi.Image) {
prompt.value = detail.prompt;
width.value = detail.width;
height.value = detail.height;
}
/** 平台切换 */
async function handlerPlatformChange(platform: any) {
// 根据选择的平台筛选模型
platformModels.value = props.models.filter(
(item: AiModelModelApi.Model) => item.platform === platform,
);
// 切换平台，默认选择一个模型
modelId.value =
platformModels.value.length > 0 && platformModels.value[0]
? platformModels.value[0].id
: undefined;
}
/** 监听 models 变化 */
watch(
() => props.models,
() => {
handlerPlatformChange(otherPlatform.value);
},
{ immediate: true, deep: true },
);
defineExpose({ settingValues });
</script>
<template>
<div class="prompt">
<b>画面描述</b>
<p>建议使用"形容词 + 动词 + 风格"的格式，使用"，"隔开</p>
<el-input
v-model="prompt"
:maxlength="1024"
:rows="5"
type="textarea"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-word-limit
/>
</div>
<div class="mt-8 flex flex-col">
<div>
<b>随机热词</b>
</div>
<ElSpace wrap class="mt-4 flex flex-wrap justify-start">
<ElButton
round
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@click="handleHotWordClick(hotWord)"
>
{{ hotWord }}
</ElButton>
</ElSpace>
</div>
<div class="mt-8">
<div>
<b>平台</b>
</div>
<ElSpace wrap class="mt-4 w-full">
<ElSelect
v-model="otherPlatform"
placeholder="Select"
size="large"
class="!w-80"
@change="handlerPlatformChange"
>
<ElOption
v-for="item in OtherPlatformEnum"
:key="item.key"
:value="item.key"
:label="item.name"
>
{{ item.name }}
</ElOption>
</ElSelect>
</ElSpace>
</div>
<div class="mt-8">
<div>
<b>模型</b>
</div>
<ElSpace wrap class="mt-4 w-full">
<ElSelect
v-model="modelId"
placeholder="Select"
size="large"
class="!w-80"
>
<ElOption
v-for="item in platformModels"
:key="item.id"
:value="item.id"
:label="item.name"
>
{{ item.name }}
</ElOption>
</ElSelect>
</ElSpace>
</div>
<div class="mt-8">
<div>
<b>图片尺寸</b>
</div>
<div class="mt-4 flex items-center gap-2">
<ElInputNumber
v-model="width"
placeholder="图片宽度"
controls-position="right"
class="!w-32"
/>
<span class="mx-2">×</span>
<ElInputNumber
v-model="height"
placeholder="图片高度"
controls-position="right"
class="!w-32"
/>
</div>
</div>
<div class="mt-12 flex justify-center">
<ElButton
type="primary"
size="large"
round
:loading="drawIn"
:disabled="prompt.length === 0"
@click="handleGenerateImage"
>
{{ drawIn ? '生成中' : '生成内容' }}
</ElButton>
</div>
</template>

260
apps/web-ele/src/views/ai/image/index/modules/dall3/index.vue Normal file
View File

@@ -0,0 +1,260 @@
<!-- dall3 -->
<script setup lang="ts">
import type { ImageModel, ImageSize } from '@vben/constants';
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import { ref } from 'vue';
import { confirm } from '@vben/common-ui';
import {
AiPlatformEnum,
Dall3Models,
Dall3SizeList,
Dall3StyleList,
ImageHotWords,
} from '@vben/constants';
import { ElButton, ElImage, ElMessage, ElSpace } from 'element-plus';
import { drawImage } from '#/api/ai/image';
const props = defineProps({
models: {
type: Array<AiModelModelApi.Model>,
default: () => [] as AiModelModelApi.Model[],
},
}); // 接收父组件传入的模型列表
const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
const prompt = ref<string>(''); // 提示词
const drawIn = ref<boolean>(false); // 生成中
const selectHotWord = ref<string>(''); // 选中的热词
const selectModel = ref<string>('dall-e-3'); // 模型
const selectSize = ref<string>('1024x1024'); // 选中 size
const style = ref<string>('vivid'); // style 样式
/** 选择热词 */
async function handleHotWordClick(hotWord: string) {
// 情况一：取消选中
if (selectHotWord.value === hotWord) {
selectHotWord.value = '';
return;
}
// 情况二：选中
selectHotWord.value = hotWord;
prompt.value = hotWord;
}
/** 选择 model 模型 */
async function handleModelClick(model: ImageModel) {
selectModel.value = model.key;
// 可以在这里添加模型特定的处理逻辑
// 例如，如果未来需要根据不同模型设置不同参数
if (model.key === 'dall-e-3') {
// DALL-E-3 模型特定的处理
style.value = 'vivid'; // 默认设置vivid风格
} else if (model.key === 'dall-e-2') {
// DALL-E-2 模型特定的处理
style.value = 'natural'; // 如果有其他DALL-E-2适合的默认风格
}
// 更新其他相关参数
// 例如可以默认选择最适合当前模型的尺寸
const recommendedSize = Dall3SizeList.find(
(size) =>
(model.key === 'dall-e-3' && size.key === '1024x1024') ||
(model.key === 'dall-e-2' && size.key === '512x512'),
);
if (recommendedSize) {
selectSize.value = recommendedSize.key;
}
}
/** 选择 style 样式 */
async function handleStyleClick(imageStyle: ImageModel) {
style.value = imageStyle.key;
}
/** 选择 size 大小 */
async function handleSizeClick(imageSize: ImageSize) {
selectSize.value = imageSize.key;
}
/** 图片生产 */
async function handleGenerateImage() {
// 从 models 中查找匹配的模型
const matchedModel = props.models.find(
(item) =>
item.model === selectModel.value &&
item.platform === AiPlatformEnum.OPENAI,
);
if (!matchedModel) {
ElMessage.error('该模型不可用，请选择其它模型');
return;
}
// 二次确认
await confirm(`确认生成内容?`);
try {
// 加载中
drawIn.value = true;
// 回调
emits('onDrawStart', AiPlatformEnum.OPENAI);
const imageSize = Dall3SizeList.find(
(item) => item.key === selectSize.value,
) as ImageSize;
const form = {
platform: AiPlatformEnum.OPENAI,
prompt: prompt.value, // 提示词
modelId: matchedModel.id, // 使用匹配到的模型
style: style.value, // 图像生成的风格
width: imageSize.width, // size 不能为空
height: imageSize.height, // size 不能为空
options: {
style: style.value, // 图像生成的风格
},
} as AiImageApi.ImageDrawReq;
// 发送请求
await drawImage(form);
} finally {
// 回调
emits('onDrawComplete', AiPlatformEnum.OPENAI);
// 加载结束
drawIn.value = false;
}
}
/** 填充值 */
async function settingValues(detail: AiImageApi.Image) {
prompt.value = detail.prompt;
selectModel.value = detail.model;
style.value = detail.options?.style;
const imageSize = Dall3SizeList.find(
(item) => item.key === `${detail.width}x${detail.height}`,
) as ImageSize;
await handleSizeClick(imageSize);
}
/** 暴露组件方法 */
defineExpose({ settingValues });
</script>
<template>
<div class="prompt">
<b>画面描述</b>
<p>建议使用"形容词 + 动词 + 风格"的格式，使用"，"隔开</p>
<el-input
v-model="prompt"
:maxlength="1024"
:rows="5"
type="textarea"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-word-limit
/>
</div>
<div class="mt-8 flex flex-col">
<div><b>随机热词</b></div>
<ElSpace wrap class="mt-4 flex flex-wrap justify-start">
<ElButton
round
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@click="handleHotWordClick(hotWord)"
>
{{ hotWord }}
</ElButton>
</ElSpace>
</div>
<div class="mt-8">
<div><b>模型选择</b></div>
<ElSpace wrap class="mt-4 flex flex-wrap gap-2">
<div
class="flex w-28 cursor-pointer flex-col items-center overflow-hidden rounded-lg border-2"
:class="[
selectModel === model.key ? '!border-blue-500' : 'border-transparent',
]"
v-for="model in Dall3Models"
:key="model.key"
@click="handleModelClick(model)"
>
<ElImage
:preview-src-list="[]"
:src="model.image"
fit="contain"
class="w-full"
/>
<div class="text-sm font-bold text-gray-600">
{{ model.name }}
</div>
</div>
</ElSpace>
</div>
<div class="mt-8">
<div><b>风格选择</b></div>
<ElSpace wrap class="mt-4 flex flex-wrap gap-2">
<div
class="flex w-28 cursor-pointer flex-col items-center overflow-hidden rounded-lg border-2"
:class="[
style === imageStyle.key ? 'border-blue-500' : 'border-transparent',
]"
v-for="imageStyle in Dall3StyleList"
:key="imageStyle.key"
>
<ElImage
:preview-src-list="[]"
:src="imageStyle.image"
fit="contain"
@click="handleStyleClick(imageStyle)"
/>
<div class="text-sm font-bold text-gray-600">
{{ imageStyle.name }}
</div>
</div>
</ElSpace>
</div>
<div class="mt-8 w-full">
<div><b>画面比例</b></div>
<ElSpace wrap class="mt-5 flex w-full flex-wrap gap-2">
<div
class="flex cursor-pointer flex-col items-center"
v-for="imageSize in Dall3SizeList"
:key="imageSize.key"
@click="handleSizeClick(imageSize)"
>
<div
class="bg-card flex h-12 w-12 flex-col items-center justify-center rounded-lg border p-0"
:class="[
selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
]"
>
<div :style="imageSize.style"></div>
</div>
<div class="text-sm font-bold text-gray-600">
{{ imageSize.name }}
</div>
</div>
</ElSpace>
</div>
<div class="mt-12 flex justify-center">
<ElButton
type="primary"
size="large"
round
:loading="drawIn"
:disabled="prompt.length === 0"
@click="handleGenerateImage"
>
{{ drawIn ? '生成中' : '生成内容' }}
</ElButton>
</div>
</template>

206
apps/web-ele/src/views/ai/image/index/modules/detail.vue Normal file
View File

@@ -0,0 +1,206 @@
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import { ref, toRefs, watch } from 'vue';
import {
AiPlatformEnum,
Dall3StyleList,
StableDiffusionClipGuidancePresets,
StableDiffusionSamplers,
StableDiffusionStylePresets,
} from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElImage } from 'element-plus';
import { getImageMy } from '#/api/ai/image';
const props = defineProps({
id: {
type: Number,
required: true,
},
});
const detail = ref<AiImageApi.Image>({} as AiImageApi.Image); // 图片详细信息
/** 获取图片详情 */
async function getImageDetail(id: number) {
detail.value = await getImageMy(id);
}
const { id } = toRefs(props);
watch(
id,
async (newVal) => {
if (newVal) {
await getImageDetail(newVal);
}
},
{ immediate: true },
);
</script>
<template>
<div class="mb-5 w-full overflow-hidden break-words">
<div class="mt-2">
<ElImage class="rounded-lg" :src="detail?.picUrl" />
</div>
</div>
<!-- 时间 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="text-lg font-bold">时间</div>
<div class="mt-2">
<div>提交时间：{{ formatDateTime(detail.createTime) }}</div>
<div>生成时间：{{ formatDateTime(detail.finishTime) }}</div>
</div>
</div>
<!-- 模型 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="text-lg font-bold">模型</div>
<div class="mt-2">
{{ detail.model }}({{ detail.height }}x{{ detail.width }})
</div>
</div>
<!-- 提示词 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="text-lg font-bold">提示词</div>
<div class="mt-2">
{{ detail.prompt }}
</div>
</div>
<!-- 图片地址 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="text-lg font-bold">图片地址</div>
<div class="mt-2">
{{ detail.picUrl }}
</div>
</div>
<!-- StableDiffusion 专属 -->
<div
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.sampler
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">采样方法</div>
<div class="mt-2">
{{
StableDiffusionSamplers.find(
(item) => item.key === detail?.options?.sampler,
)?.name
}}
</div>
</div>
<div
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.clipGuidancePreset
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">CLIP</div>
<div class="mt-2">
{{
StableDiffusionClipGuidancePresets.find(
(item) => item.key === detail?.options?.clipGuidancePreset,
)?.name
}}
</div>
</div>
<div
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.stylePreset
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">风格</div>
<div class="mt-2">
{{
StableDiffusionStylePresets.find(
(item) => item.key === detail?.options?.stylePreset,
)?.name
}}
</div>
</div>
<div
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.steps
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">迭代步数</div>
<div class="mt-2">{{ detail?.options?.steps }}</div>
</div>
<div
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.scale
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">引导系数</div>
<div class="mt-2">{{ detail?.options?.scale }}</div>
</div>
<div
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.seed
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">随机因子</div>
<div class="mt-2">{{ detail?.options?.seed }}</div>
</div>
<!-- Dall3 专属 -->
<div
v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">风格选择</div>
<div class="mt-2">
{{
Dall3StyleList.find((item) => item.key === detail?.options?.style)?.name
}}
</div>
</div>
<!-- Midjourney 专属 -->
<div
v-if="
detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.version
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">模型版本</div>
<div class="mt-2">{{ detail?.options?.version }}</div>
</div>
<div
v-if="
detail.platform === AiPlatformEnum.MIDJOURNEY &&
detail?.options?.referImageUrl
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="text-lg font-bold">参考图</div>
<div class="mt-2">
<ElImage :src="detail.options.referImageUrl" />
</div>
</div>
</template>

222
apps/web-ele/src/views/ai/image/index/modules/list.vue Normal file
View File

@@ -0,0 +1,222 @@
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { confirm, useVbenDrawer } from '@vben/common-ui';
import { AiImageStatusEnum } from '@vben/constants';
import { downloadFileFromImageUrl } from '@vben/utils';
import { useDebounceFn } from '@vueuse/core';
import { ElButton, ElCard, ElMessage, ElPagination } from 'element-plus';
import {
deleteImageMy,
getImageListMyByIds,
getImagePageMy,
midjourneyAction,
} from '#/api/ai/image';
import ImageCard from './card.vue';
import ImageDetail from './detail.vue';
const emits = defineEmits(['onRegeneration']);
const router = useRouter();
const [Drawer, drawerApi] = useVbenDrawer({
title: '图片详情',
footer: false,
});
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
}); // 图片分页相关的参数
const pageTotal = ref<number>(0); // page size
const imageList = ref<AiImageApi.Image[]>([]); // image 列表
const imageListRef = ref<any>(); // ref
const inProgressImageMap = ref<{}>({}); // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
const inProgressTimer = ref<any>(); // 生成中的 image 定时器，轮询生成进展
const showImageDetailId = ref<number>(0); // 图片详情的图片编号
/** 处理查看绘图作品 */
function handleViewPublic() {
router.push({
name: 'AiImageSquare',
});
}
/** 查看图片的详情 */
async function handleDetailOpen() {
drawerApi.open();
}
/** 获得 image 图片列表 */
async function getImageList() {
const loading = ElMessage({
message: `加载中...`,
type: 'info',
duration: 0,
});
try {
// 1. 加载图片列表
const { list, total } = await getImagePageMy(queryParams);
imageList.value = list;
pageTotal.value = total;
// 2. 计算需要轮询的图片
const newWatImages: any = {};
imageList.value.forEach((item: any) => {
if (item.status === AiImageStatusEnum.IN_PROGRESS) {
newWatImages[item.id] = item;
}
});
inProgressImageMap.value = newWatImages;
} finally {
// 关闭正在"加载中"的 Loading
loading.close();
}
}
const debounceGetImageList = useDebounceFn(getImageList, 80);
/** 轮询生成中的 image 列表 */
async function refreshWatchImages() {
const imageIds = Object.keys(inProgressImageMap.value).map(Number);
if (imageIds.length === 0) {
return;
}
const list = (await getImageListMyByIds(imageIds)) as AiImageApi.Image[];
const newWatchImages: any = {};
list.forEach((image) => {
if (image.status === AiImageStatusEnum.IN_PROGRESS) {
newWatchImages[image.id] = image;
} else {
const index = imageList.value.findIndex(
(oldImage) => image.id === oldImage.id,
);
if (index !== -1) {
// 更新 imageList
imageList.value[index] = image;
}
}
});
inProgressImageMap.value = newWatchImages;
}
/** 图片的点击事件 */
async function handleImageButtonClick(
type: string,
imageDetail: AiImageApi.Image,
) {
// 详情
if (type === 'more') {
showImageDetailId.value = imageDetail.id;
await handleDetailOpen();
return;
}
// 删除
if (type === 'delete') {
await confirm(`是否删除照片?`);
await deleteImageMy(imageDetail.id);
await getImageList();
ElMessage.success('删除成功!');
return;
}
// 下载
if (type === 'download') {
await downloadFileFromImageUrl({
fileName: imageDetail.model,
source: imageDetail.picUrl,
});
return;
}
// 重新生成
if (type === 'regeneration') {
emits('onRegeneration', imageDetail);
}
}
/** 处理 Midjourney 按钮点击事件 */
async function handleImageMidjourneyButtonClick(
button: AiImageApi.ImageMidjourneyButtons,
imageDetail: AiImageApi.Image,
) {
// 1. 构建 params 参数
const data = {
id: imageDetail.id,
customId: button.customId,
} as AiImageApi.ImageMidjourneyAction;
// 2. 发送 action
await midjourneyAction(data);
// 3. 刷新列表
await getImageList();
}
defineExpose({ getImageList });
/** 组件挂在的时候 */
onMounted(async () => {
// 获取 image 列表
await getImageList();
// 自动刷新 image 列表
inProgressTimer.value = setInterval(async () => {
await refreshWatchImages();
}, 1000 * 3);
});
/** 组件取消挂在的时候 */
onUnmounted(async () => {
if (inProgressTimer.value) {
clearInterval(inProgressTimer.value);
}
});
</script>
<template>
<Drawer class="w-2/5">
<ImageDetail :id="showImageDetailId" />
</Drawer>
<ElCard
class="flex h-full w-full flex-col"
:body-style="{
margin: 0,
padding: 0,
height: '100%',
position: 'relative',
display: 'flex',
flexDirection: 'column',
}"
>
<template #header>
绘画任务
<ElButton @click="handleViewPublic">绘画作品</ElButton>
</template>
<div
class="flex flex-1 flex-wrap content-start overflow-y-auto p-3 pb-28 pt-5"
ref="imageListRef"
>
<ImageCard
v-for="image in imageList"
:key="image.id"
:detail="image"
@on-btn-click="handleImageButtonClick"
@on-mj-btn-click="handleImageMidjourneyButtonClick"
class="mb-3 mr-3"
/>
</div>
<div
class="bg-card sticky bottom-0 z-50 flex h-16 items-center justify-center shadow-sm"
>
<ElPagination
:total="pageTotal"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
:page-sizes="[10, 20, 30, 40, 50]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="debounceGetImageList"
@current-change="debounceGetImageList"
/>
</div>
</ElCard>
</template>

257
apps/web-ele/src/views/ai/image/index/modules/midjourney/index.vue Normal file
View File

@@ -0,0 +1,257 @@
<!-- dall3 -->
<script setup lang="ts">
import type { ImageModel, ImageSize } from '@vben/constants';
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import { ref } from 'vue';
import { confirm } from '@vben/common-ui';
import {
AiPlatformEnum,
ImageHotWords,
MidjourneyModels,
MidjourneySizeList,
MidjourneyVersions,
NijiVersionList,
} from '@vben/constants';
import {
ElButton,
ElImage,
ElMessage,
ElOption,
ElSelect,
ElSpace,
} from 'element-plus';
import { midjourneyImagine } from '#/api/ai/image';
import { ImageUpload } from '#/components/upload';
const props = defineProps({
models: {
type: Array<AiModelModelApi.Model>,
default: () => [] as AiModelModelApi.Model[],
},
}); // 接收父组件传入的模型列表
const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
const drawIn = ref<boolean>(false); // 生成中
const selectHotWord = ref<string>(''); // 选中的热词
const prompt = ref<string>(''); // 提示词
const referImageUrl = ref<any>(); // 参考图
const selectModel = ref<string>('midjourney'); // 选中的模型
const selectSize = ref<string>('1:1'); // 选中 size
const selectVersion = ref<any>('6.0'); // 选中的 version
const versionList = ref<any>(MidjourneyVersions); // version 列表
/** 选择热词 */
async function handleHotWordClick(hotWord: string) {
// 情况一：取消选中
if (selectHotWord.value === hotWord) {
selectHotWord.value = '';
return;
}
// 情况二：选中
selectHotWord.value = hotWord; // 选中
prompt.value = hotWord; // 设置提示次
}
/** 点击 size 尺寸 */
async function handleSizeClick(imageSize: ImageSize) {
selectSize.value = imageSize.key;
}
/** 点击 model 模型 */
async function handleModelClick(model: ImageModel) {
selectModel.value = model.key;
versionList.value =
model.key === 'niji' ? NijiVersionList : MidjourneyVersions;
selectVersion.value = versionList.value[0].value;
}
/** 图片生成 */
async function handleGenerateImage() {
// 从 models 中查找匹配的模型
const matchedModel = props.models.find(
(item) =>
item.model === selectModel.value &&
item.platform === AiPlatformEnum.MIDJOURNEY,
);
if (!matchedModel) {
ElMessage.error('该模型不可用，请选择其它模型');
return;
}
// 二次确认
await confirm(`确认生成内容?`);
try {
// 加载中
drawIn.value = true;
// 回调
emits('onDrawStart', AiPlatformEnum.MIDJOURNEY);
// 发送请求
const imageSize = MidjourneySizeList.find(
(item) => selectSize.value === item.key,
) as ImageSize;
const req = {
prompt: prompt.value,
modelId: matchedModel.id,
width: imageSize.width,
height: imageSize.height,
version: selectVersion.value,
referImageUrl: referImageUrl.value,
} as AiImageApi.ImageMidjourneyImagineReq;
await midjourneyImagine(req);
} finally {
// 回调
emits('onDrawComplete', AiPlatformEnum.MIDJOURNEY);
// 加载结束
drawIn.value = false;
}
}
/** 填充值 */
async function settingValues(detail: AiImageApi.Image) {
// 提示词
prompt.value = detail.prompt;
// image size
const imageSize = MidjourneySizeList.find(
(item) => item.key === `${detail.width}:${detail.height}`,
) as ImageSize;
selectSize.value = imageSize.key;
// 选中模型
const model = MidjourneyModels.find(
(item) => item.key === detail.options?.model,
) as ImageModel;
await handleModelClick(model);
// 版本
selectVersion.value = versionList.value.find(
(item: any) => item.value === detail.options?.version,
).value;
// image
referImageUrl.value = detail.options.referImageUrl;
}
/** 暴露组件方法 */
defineExpose({ settingValues });
</script>
<template>
<div class="prompt">
<b>画面描述</b>
<p>建议使用"形容词+动词+风格"的格式，使用"，"隔开.</p>
<el-input
v-model="prompt"
:maxlength="1024"
:rows="5"
type="textarea"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-word-limit
/>
</div>
<div class="mt-8 flex flex-col">
<div><b>随机热词</b></div>
<ElSpace wrap class="mt-4 flex flex-wrap gap-2">
<ElButton
round
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@click="handleHotWordClick(hotWord)"
>
{{ hotWord }}
</ElButton>
</ElSpace>
</div>
<div class="mt-8">
<div><b>尺寸</b></div>
<ElSpace wrap class="mt-4 flex w-full flex-wrap gap-2">
<div
class="flex cursor-pointer flex-col items-center overflow-hidden"
v-for="imageSize in MidjourneySizeList"
:key="imageSize.key"
@click="handleSizeClick(imageSize)"
>
<div
class="bg-card flex h-12 w-12 items-center justify-center rounded-lg border p-0"
:class="[
selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
]"
>
<div :style="imageSize.style"></div>
</div>
<div class="text-sm font-bold text-gray-600">{{ imageSize.key }}</div>
</div>
</ElSpace>
</div>
<div class="mt-8">
<div><b>模型</b></div>
<ElSpace wrap class="mt-4 flex flex-wrap gap-2">
<div
v-for="model in MidjourneyModels"
:key="model.key"
class="flex max-w-40 cursor-pointer flex-col items-center overflow-hidden"
:class="[
selectModel === model.key
? 'rounded border-blue-500'
: 'border-transparent',
]"
>
<ElImage
:preview-src-list="[]"
:src="model.image"
fit="contain"
@click="handleModelClick(model)"
/>
<div class="text-sm font-bold text-gray-600">{{ model.name }}</div>
</div>
</ElSpace>
</div>
<div class="mt-8">
<div><b>版本</b></div>
<ElSpace wrap class="mt-5 flex w-full flex-wrap gap-2">
<ElSelect
v-model="selectVersion"
class="!w-80"
clearable
placeholder="请选择版本"
>
<ElOption
v-for="item in versionList"
:key="item.value"
:value="item.value"
:label="item.label"
>
{{ item.label }}
</ElOption>
</ElSelect>
</ElSpace>
</div>
<div class="mt-8">
<div><b>参考图</b></div>
<ElSpace wrap class="mt-4">
<ImageUpload v-model:value="referImageUrl" :show-description="false" />
</ElSpace>
</div>
<div class="mt-8 flex justify-center">
<ElButton
type="primary"
size="large"
round
:disabled="prompt.length === 0"
@click="handleGenerateImage"
>
{{ drawIn ? '生成中' : '生成内容' }}
</ElButton>
</div>
</template>

309
apps/web-ele/src/views/ai/image/index/modules/stable-diffusion/index.vue Normal file
View File

@@ -0,0 +1,309 @@
<!-- dall3 -->
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import { ref } from 'vue';
import { alert, confirm } from '@vben/common-ui';
import {
AiPlatformEnum,
ImageHotEnglishWords,
StableDiffusionClipGuidancePresets,
StableDiffusionSamplers,
StableDiffusionStylePresets,
} from '@vben/constants';
import {
ElButton,
ElInputNumber,
ElMessage,
ElOption,
ElSelect,
ElSpace,
} from 'element-plus';
import { drawImage } from '#/api/ai/image';
const props = defineProps({
models: {
type: Array<AiModelModelApi.Model>,
default: () => [] as AiModelModelApi.Model[],
},
}); // 接收父组件传入的模型列表
const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
function hasChinese(str: string) {
return /[\u4E00-\u9FA5]/.test(str);
}
// 定义属性
const drawIn = ref<boolean>(false); // 生成中
const selectHotWord = ref<string>(''); // 选中的热词
// 表单
const prompt = ref<string>(''); // 提示词
const width = ref<number>(512); // 图片宽度
const height = ref<number>(512); // 图片高度
const sampler = ref<string>('DDIM'); // 采样方法
const steps = ref<number>(20); // 迭代步数
const seed = ref<number>(42); // 控制生成图像的随机性
const scale = ref<number>(7.5); // 引导系数
const clipGuidancePreset = ref<string>('NONE'); // 文本提示相匹配的图像(clip_guidance_preset) 简称 CLIP
const stylePreset = ref<string>('3d-model'); // 风格
/** 选择热词 */
async function handleHotWordClick(hotWord: string) {
// 情况一：取消选中
if (selectHotWord.value === hotWord) {
selectHotWord.value = '';
return;
}
// 情况二：选中
selectHotWord.value = hotWord; // 选中
prompt.value = hotWord; // 替换提示词
}
/** 图片生成 */
async function handleGenerateImage() {
// 从 models 中查找匹配的模型
const selectModel = 'stable-diffusion-v1-6';
const matchedModel = props.models.find(
(item) =>
item.model === selectModel &&
item.platform === AiPlatformEnum.STABLE_DIFFUSION,
);
if (!matchedModel) {
ElMessage.error('该模型不可用，请选择其它模型');
return;
}
// 二次确认
if (hasChinese(prompt.value)) {
await alert('暂不支持中文！');
return;
}
await confirm(`确认生成内容?`);
try {
// 加载中
drawIn.value = true;
// 回调
emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION);
// 发送请求
const form = {
modelId: matchedModel.id,
prompt: prompt.value, // 提示词
width: width.value, // 图片宽度
height: height.value, // 图片高度
options: {
seed: seed.value, // 随机种子
steps: steps.value, // 图片生成步数
scale: scale.value, // 引导系数
sampler: sampler.value, // 采样算法
clipGuidancePreset: clipGuidancePreset.value, // 文本提示相匹配的图像 CLIP
stylePreset: stylePreset.value, // 风格
},
} as unknown as AiImageApi.ImageDrawReq;
await drawImage(form);
} finally {
// 回调
emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION);
// 加载结束
drawIn.value = false;
}
}
/** 填充值 */
async function settingValues(detail: AiImageApi.Image) {
prompt.value = detail.prompt;
width.value = detail.width;
height.value = detail.height;
seed.value = detail.options?.seed;
steps.value = detail.options?.steps;
scale.value = detail.options?.scale;
sampler.value = detail.options?.sampler;
clipGuidancePreset.value = detail.options?.clipGuidancePreset;
stylePreset.value = detail.options?.stylePreset;
}
/** 暴露组件方法 */
defineExpose({ settingValues });
</script>
<template>
<div class="prompt">
<b>画面描述</b>
<p>建议使用"形容词 + 动词 + 风格"的格式，使用"，"隔开</p>
<el-input
v-model="prompt"
:maxlength="1024"
:rows="5"
type="textarea"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-word-limit
/>
</div>
<!-- 热词区域 -->
<div class="mt-8 flex flex-col">
<div><b>随机热词</b></div>
<ElSpace wrap class="mt-4 flex flex-wrap gap-2">
<ElButton
round
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotEnglishWords"
:key="hotWord"
@click="handleHotWordClick(hotWord)"
>
{{ hotWord }}
</ElButton>
</ElSpace>
</div>
<!-- 参数项：采样方法 -->
<div class="mt-8">
<div><b>采样方法</b></div>
<ElSpace wrap class="mt-4 w-full">
<ElSelect
v-model="sampler"
placeholder="Select"
size="large"
class="!w-80"
>
<ElOption
v-for="item in StableDiffusionSamplers"
:key="item.key"
:value="item.key"
:label="item.name"
>
{{ item.name }}
</ElOption>
</ElSelect>
</ElSpace>
</div>
<!-- CLIP -->
<div class="mt-8">
<div><b>CLIP</b></div>
<ElSpace wrap class="mt-4 w-full">
<ElSelect
v-model="clipGuidancePreset"
placeholder="Select"
size="large"
class="!w-80"
>
<ElOption
v-for="item in StableDiffusionClipGuidancePresets"
:key="item.key"
:value="item.key"
:label="item.name"
>
{{ item.name }}
</ElOption>
</ElSelect>
</ElSpace>
</div>
<!-- 风格 -->
<div class="mt-8">
<div><b>风格</b></div>
<ElSpace wrap class="mt-4 w-full">
<ElSelect
v-model="stylePreset"
placeholder="Select"
size="large"
class="!w-80"
>
<ElOption
v-for="item in StableDiffusionStylePresets"
:key="item.key"
:label="item.name"
:value="item.key"
>
{{ item.name }}
</ElOption>
</ElSelect>
</ElSpace>
</div>
<!-- 图片尺寸 -->
<div class="mt-8">
<div><b>图片尺寸</b></div>
<ElSpace wrap class="mt-4 w-full">
<div class="flex items-center gap-2">
<ElInputNumber
v-model="width"
placeholder="图片宽度"
controls-position="right"
class="!w-32"
/>
</div>
<span class="mx-2">×</span>
<div class="flex items-center gap-2">
<ElInputNumber
v-model="height"
placeholder="图片高度"
controls-position="right"
class="!w-32"
/>
</div>
</ElSpace>
</div>
<!-- 迭代步数 -->
<div class="mt-8">
<div><b>迭代步数</b></div>
<ElSpace wrap class="mt-4 w-full">
<ElInputNumber
v-model="steps"
size="large"
class="!w-80"
placeholder="Please input"
controls-position="right"
/>
</ElSpace>
</div>
<!-- 引导系数 -->
<div class="mt-8">
<div><b>引导系数</b></div>
<ElSpace wrap class="mt-4 w-full">
<ElInputNumber
v-model="scale"
size="large"
class="!w-80"
placeholder="Please input"
controls-position="right"
/>
</ElSpace>
</div>
<!-- 随机因子 -->
<div class="mt-8">
<div><b>随机因子</b></div>
<ElSpace wrap class="mt-4 w-full">
<ElInputNumber
v-model="seed"
size="large"
class="!w-80"
placeholder="Please input"
controls-position="right"
/>
</ElSpace>
</div>
<!-- 生成按钮 -->
<div class="mt-12 flex justify-center">
<ElButton
type="primary"
size="large"
round
:loading="drawIn"
:disabled="prompt.length === 0"
@click="handleGenerateImage"
>
{{ drawIn ? '生成中' : '生成内容' }}
</ElButton>
</div>
</template>

2
apps/web-ele/src/views/ai/image/manager/index.vue
View File

@@ -23,7 +23,7 @@ async function handleDelete(row: AiImageApi.Image) {
text: $t('ui.actionMessage.deleting', [row.id]),
});
try {
await deleteImage(row.id as number);
await deleteImage(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
handleRefresh();
} finally {

90
apps/web-ele/src/views/ai/image/square/index.vue Normal file
View File

@@ -0,0 +1,90 @@
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import { onMounted, reactive, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { useDebounceFn } from '@vueuse/core';
import { ElImage, ElInput, ElPagination } from 'element-plus';
import { getImagePageMy } from '#/api/ai/image';
const loading = ref(true); // 列表的加载中
const list = ref<AiImageApi.Image[]>([]); // 列表的数据
const total = ref(0); // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
publicStatus: true,
prompt: undefined,
});
/** 查询列表 */
async function getList() {
loading.value = true;
try {
const data = await getImagePageMy(queryParams);
list.value = data.list;
total.value = data.total;
} finally {
loading.value = false;
}
}
const debounceGetList = useDebounceFn(getList, 80);
/** 搜索按钮操作 */
function handleQuery() {
queryParams.pageNo = 1;
getList();
}
/** 初始化 */
onMounted(async () => {
await getList();
});
</script>
<template>
<Page auto-content-height>
<div class="bg-card p-5">
<ElInput
v-model="queryParams.prompt"
class="mb-5 w-full"
size="large"
placeholder="请输入要搜索的内容"
@keyup.enter="handleQuery"
>
<template #suffix>
<IconifyIcon icon="lucide:search" class="cursor-pointer" />
</template>
</ElInput>
<div
class="bg-card grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5 shadow-sm"
>
<div
v-for="item in list"
:key="item.id"
class="bg-card relative cursor-pointer overflow-hidden transition-transform duration-300 hover:scale-105"
>
<ElImage
:src="item.picUrl"
class="block h-auto w-full transition-transform duration-300 hover:scale-110"
/>
</div>
</div>
<!-- 分页 -->
<ElPagination
:total="total"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
:page-sizes="[10, 20, 30, 40, 50]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="debounceGetList"
@current-change="debounceGetList"
class="mt-5"
/>
</div>
</Page>
</template>

180
apps/web-ele/src/views/ai/knowledge/document/data.ts Normal file
View File

@@ -0,0 +1,180 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';
import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getModelSimpleList } from '#/api/ai/model/model';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'name',
label: '知识库名称',
rules: 'required',
},
{
fieldName: 'description',
label: '知识库描述',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入知识库描述',
},
},
{
component: 'ApiSelect',
fieldName: 'embeddingModelId',
label: '向量模型',
componentProps: {
api: () => getModelSimpleList(AiModelTypeEnum.EMBEDDING),
labelField: 'name',
valueField: 'id',
allowClear: true,
placeholder: '请选择向量模型',
},
rules: 'required',
},
{
fieldName: 'topK',
label: '检索 topK',
component: 'InputNumber',
componentProps: {
placeholder: '请输入检索 topK',
min: 0,
max: 10,
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
{
fieldName: 'similarityThreshold',
label: '检索相似度阈值',
component: 'InputNumber',
componentProps: {
placeholder: '请输入检索相似度阈值',
min: 0,
max: 1,
step: 0.01,
precision: 2,
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
{
fieldName: 'status',
label: '是否启用',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '文件名称',
component: 'Input',
componentProps: {
placeholder: '请输入文件名称',
allowClear: true,
},
},
{
fieldName: 'status',
label: '是否启用',
component: 'Select',
componentProps: {
placeholder: '请选择是否启用',
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
];
}
/** 列表的字段 */
export function useGridColumns(
onStatusChange?: (
newStatus: number,
row: AiKnowledgeDocumentApi.KnowledgeDocument,
) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '文档编号',
minWidth: 100,
},
{
field: 'name',
title: '文件名称',
minWidth: 200,
},
{
field: 'contentLength',
title: '字符数',
minWidth: 100,
},
{
field: 'tokens',
title: 'Token 数',
minWidth: 100,
},
{
field: 'segmentMaxTokens',
title: '分片最大 Token 数',
minWidth: 150,
},
{
field: 'retrievalCount',
title: '召回次数',
minWidth: 100,
},
{
field: 'status',
title: '是否启用',
minWidth: 100,
align: 'center',
cellRender: {
attrs: { beforeChange: onStatusChange },
name: 'CellSwitch',
props: {
activeValue: CommonStatusEnum.ENABLE,
inactiveValue: CommonStatusEnum.DISABLE,
},
},
},
{
field: 'createTime',
title: '上传时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
minWidth: 150,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

200
apps/web-ele/src/views/ai/knowledge/document/form/index.vue Normal file
View File

@@ -0,0 +1,200 @@
<script setup lang="ts">
import {
getCurrentInstance,
onBeforeUnmount,
onMounted,
provide,
ref,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { IconifyIcon } from '@vben/icons';
import { ElCard } from 'element-plus';
import { getKnowledgeDocument } from '#/api/ai/knowledge/document';
import ProcessStep from './modules/process-step.vue';
import SplitStep from './modules/split-step.vue';
import UploadStep from './modules/upload-step.vue';
const route = useRoute();
const router = useRouter();
const uploadDocumentRef = ref();
const documentSegmentRef = ref();
const processCompleteRef = ref();
const currentStep = ref(0); // 步骤控制
const steps = [
{ title: '上传文档' },
{ title: '文档分段' },
{ title: '处理并完成' },
];
const formData = ref({
knowledgeId: undefined, // 知识库编号
id: undefined, // 编辑的文档编号(documentId)
segmentMaxTokens: 500, // 分段最大 token 数
list: [] as Array<{
count?: number; // 段落数量
id: number; // 文档编号
name: string; // 文档名称
process?: number; // 处理进度
segments: Array<{
content?: string;
contentLength?: number;
tokens?: number;
}>;
url: string; // 文档 URL
}>, // 用于存储上传的文件列表
}); // 表单数据
provide('parent', getCurrentInstance()); // 提供 parent 给子组件使用
const tabs = useTabs();
/** 返回列表页 */
function handleBack() {
// 关闭当前页签
tabs.closeCurrentTab();
// 跳转到列表页
router.push({
name: 'AiKnowledgeDocument',
query: {
knowledgeId: route.query.knowledgeId,
},
});
}
/** 初始化数据 */
async function initData() {
if (route.query.knowledgeId) {
formData.value.knowledgeId = route.query.knowledgeId as any;
}
// 【修改场景】从路由参数中获取文档 ID
const documentId = route.query.id;
if (documentId) {
// 获取文档信息
formData.value.id = documentId as any;
const document = await getKnowledgeDocument(documentId as any);
formData.value.segmentMaxTokens = document.segmentMaxTokens;
formData.value.list = [
{
id: document.id,
name: document.name,
url: document.url,
segments: [],
},
];
// 进入下一步
goToNextStep();
}
}
/** 切换到下一步 */
function goToNextStep() {
if (currentStep.value < steps.length - 1) {
currentStep.value++;
}
}
/** 切换到上一步 */
function goToPrevStep() {
if (currentStep.value > 0) {
currentStep.value--;
}
}
/** 添加组件卸载前的清理代码 */
onBeforeUnmount(() => {
// 清理所有的引用
uploadDocumentRef.value = null;
documentSegmentRef.value = null;
processCompleteRef.value = null;
});
/** 暴露方法给子组件使用 */
defineExpose({
goToNextStep,
goToPrevStep,
handleBack,
});
/** 初始化 */
onMounted(async () => {
await initData();
});
</script>
<template>
<Page auto-content-height>
<div class="mx-auto">
<!-- 头部导航栏 -->
<div
class="bg-card absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b px-4"
>
<!-- 左侧标题 -->
<div class="flex w-48 items-center overflow-hidden">
<IconifyIcon
icon="lucide:arrow-left"
class="size-5 flex-shrink-0 cursor-pointer"
@click="handleBack"
/>
<span class="ml-2.5 truncate text-base">
{{ formData.id ? '编辑知识库文档' : '创建知识库文档' }}
</span>
</div>
<!-- 步骤条 -->
<div class="flex h-full flex-1 items-center justify-center">
<div class="flex h-full w-96 items-center justify-between">
<div
v-for="(step, index) in steps"
:key="index"
class="relative mx-4 flex h-full cursor-pointer items-center"
:class="[
currentStep === index
? 'border-b-2 border-solid border-blue-500 text-blue-500'
: 'text-gray-500',
]"
>
<div
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
:class="[
currentStep === index
? 'border-blue-500 bg-blue-500 text-white'
: 'border-gray-300 bg-white text-gray-500',
]"
>
{{ index + 1 }}
</div>
<span class="whitespace-nowrap text-base font-bold">
{{ step.title }}
</span>
</div>
</div>
</div>
</div>
<!-- 主体内容 -->
<ElCard :body-style="{ padding: '10px' }" class="mb-4">
<div class="mt-12">
<!-- 第一步：上传文档 -->
<div v-if="currentStep === 0" class="mx-auto w-[560px]">
<UploadStep v-model="formData" ref="uploadDocumentRef" />
</div>
<!-- 第二步：文档分段 -->
<div v-if="currentStep === 1" class="mx-auto w-[560px]">
<SplitStep v-model="formData" ref="documentSegmentRef" />
</div>
<!-- 第三步：处理并完成 -->
<div v-if="currentStep === 2" class="mx-auto w-[560px]">
<ProcessStep v-model="formData" ref="processCompleteRef" />
</div>
</div>
</ElCard>
</div>
</Page>
</template>

158
apps/web-ele/src/views/ai/knowledge/document/form/modules/process-step.vue Normal file
View File

@@ -0,0 +1,158 @@
<script setup lang="ts">
import { computed, inject, onBeforeUnmount, onMounted, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { ElButton, ElProgress } from 'element-plus';
import { getKnowledgeSegmentProcessList } from '#/api/ai/knowledge/segment';
const props = defineProps({
modelValue: {
type: Object,
required: true,
},
});
const emit = defineEmits(['update:modelValue']);
const parent = inject('parent') as any;
const pollingTimer = ref<null | number>(null); // 轮询定时器 ID，用于跟踪和清除轮询进程
/** 判断文件处理是否完成 */
function isProcessComplete(file: any) {
return file.progress === 100;
}
/** 判断所有文件是否都处理完成 */
const allProcessComplete = computed(() => {
return props.modelValue.list.every((file: any) => isProcessComplete(file));
});
/** 完成按钮点击事件处理 */
function handleComplete() {
if (parent?.exposed?.handleBack) {
parent.exposed.handleBack();
}
}
/** 获取文件处理进度 */
async function getProcessList() {
try {
// 1. 调用 API 获取处理进度
const documentIds = props.modelValue.list
.filter((item: any) => item.id)
.map((item: any) => item.id);
if (documentIds.length === 0) {
return;
}
const result = await getKnowledgeSegmentProcessList(documentIds);
// 2.1更新进度
const updatedList = props.modelValue.list.map((file: any) => {
const processInfo = result.find(
(item: any) => item.documentId === file.id,
);
if (processInfo) {
// 计算进度百分比：已嵌入数量 / 总数量 * 100
const progress =
processInfo.embeddingCount && processInfo.count
? Math.floor((processInfo.embeddingCount / processInfo.count) * 100)
: 0;
return {
...file,
progress,
count: processInfo.count || 0,
};
}
return file;
});
// 2.2 更新数据
emit('update:modelValue', {
...props.modelValue,
list: updatedList,
});
// 3. 如果未完成，继续轮询
if (!updatedList.every((file: any) => isProcessComplete(file))) {
pollingTimer.value = window.setTimeout(getProcessList, 3000);
}
} catch (error) {
// 出错后也继续轮询
console.error('获取处理进度失败:', error);
pollingTimer.value = window.setTimeout(getProcessList, 5000);
}
}
/** 组件挂载时开始轮询 */
onMounted(() => {
// 1. 初始化进度为 0
const initialList = props.modelValue.list.map((file: any) => ({
...file,
progress: 0,
}));
emit('update:modelValue', {
...props.modelValue,
list: initialList,
});
// 2. 开始轮询获取进度
getProcessList();
});
/** 组件卸载前清除轮询 */
onBeforeUnmount(() => {
// 1. 清除定时器
if (pollingTimer.value) {
clearTimeout(pollingTimer.value);
pollingTimer.value = null;
}
});
</script>
<template>
<div>
<!-- 文件处理列表 -->
<div class="mt-4 grid grid-cols-1 gap-2">
<div
v-for="(file, index) in modelValue.list"
:key="index"
class="flex items-center rounded-sm border-l-4 border-l-blue-500 px-3 py-1 shadow-sm transition-all duration-300 hover:bg-blue-50"
>
<!-- 文件图标和名称 -->
<div class="mr-2 flex min-w-48 items-center">
<IconifyIcon icon="lucide:file-text" class="mr-2 text-blue-500" />
<span class="break-all text-sm text-gray-600">
{{ file.name }}
</span>
</div>
<!-- 处理进度 -->
<div class="flex-1">
<ElProgress
:percentage="file.progress || 0"
:stroke-width="10"
:status="isProcessComplete(file) ? 'success' : undefined"
/>
</div>
<!-- 分段数量 -->
<div class="ml-2 text-sm text-gray-400">
分段数量：{{ file.count ? file.count : '-' }}
</div>
</div>
</div>
<!-- 底部完成按钮 -->
<div class="mt-5 flex justify-end">
<ElButton
:type="allProcessComplete ? 'primary' : 'default'"
:disabled="!allProcessComplete"
@click="handleComplete"
>
完成
</ElButton>
</div>
</div>
</template>

286
apps/web-ele/src/views/ai/knowledge/document/form/modules/split-step.vue Normal file
View File

@@ -0,0 +1,286 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import {
ElButton,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElEmpty,
ElForm,
ElFormItem,
ElInputNumber,
ElMessage,
ElTooltip,
} from 'element-plus';
import {
createKnowledgeDocumentList,
updateKnowledgeDocument,
} from '#/api/ai/knowledge/document';
import { splitContent } from '#/api/ai/knowledge/segment';
const props = defineProps({
modelValue: {
type: Object as PropType<any>,
required: true,
},
});
const emit = defineEmits(['update:modelValue']);
const parent = inject('parent', null); // 获取父组件实例
const modelData = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val),
}); // 表单数据
const splitLoading = ref(false); // 分段加载状态
const currentFile = ref<any>(null); // 当前选中的文件
const submitLoading = ref(false); // 提交按钮加载状态
/** 选择文件 */
async function selectFile(index: number) {
currentFile.value = modelData.value.list[index];
await splitContentFile(currentFile.value);
}
/** 获取文件分段内容 */
async function splitContentFile(file: any) {
if (!file || !file.url) {
ElMessage.warning('文件 URL 不存在');
return;
}
splitLoading.value = true;
try {
// 调用后端分段接口，获取文档的分段内容、字符数和 Token 数
file.segments = await splitContent(
file.url,
modelData.value.segmentMaxTokens,
);
} catch (error) {
console.error('获取分段内容失败:', file, error);
} finally {
splitLoading.value = false;
}
}
/** 处理预览分段 */
async function handleAutoSegment() {
// 如果没有选中文件，默认选中第一个
if (
!currentFile.value &&
modelData.value.list &&
modelData.value.list.length > 0
) {
currentFile.value = modelData.value.list[0];
}
// 如果没有选中文件，提示请先选择文件
if (!currentFile.value) {
ElMessage.warning('请先选择文件');
return;
}
// 获取分段内容
await splitContentFile(currentFile.value);
}
/** 上一步按钮处理 */
function handlePrevStep() {
const parentEl = parent || getCurrentInstance()?.parent;
if (parentEl && typeof parentEl.exposed?.goToPrevStep === 'function') {
parentEl.exposed.goToPrevStep();
}
}
/** 保存操作 */
async function handleSave() {
// 保存前验证
if (
!currentFile?.value?.segments ||
currentFile.value.segments.length === 0
) {
ElMessage.warning('请先预览分段内容');
return;
}
// 设置按钮加载状态
submitLoading.value = true;
try {
if (modelData.value.id) {
// 修改场景
await updateKnowledgeDocument({
id: modelData.value.id,
segmentMaxTokens: modelData.value.segmentMaxTokens,
});
} else {
// 新增场景
const data = await createKnowledgeDocumentList({
knowledgeId: modelData.value.knowledgeId,
segmentMaxTokens: modelData.value.segmentMaxTokens,
list: modelData.value.list.map((item: any) => ({
name: item.name,
url: item.url,
})),
});
modelData.value.list.forEach((document: any, index: number) => {
document.id = data[index];
});
}
// 进入下一步
const parentEl = parent || getCurrentInstance()?.parent;
if (parentEl && typeof parentEl.exposed?.goToNextStep === 'function') {
parentEl.exposed.goToNextStep();
}
} catch (error: any) {
console.error('保存失败:', modelData.value, error);
} finally {
// 关闭按钮加载状态
submitLoading.value = false;
}
}
/** 初始化 */
onMounted(async () => {
// 确保 segmentMaxTokens 存在
if (!modelData.value.segmentMaxTokens) {
modelData.value.segmentMaxTokens = 500;
}
// 如果没有选中文件，默认选中第一个
if (
!currentFile.value &&
modelData.value.list &&
modelData.value.list.length > 0
) {
currentFile.value = modelData.value.list[0];
}
// 如果有选中的文件，获取分段内容
if (currentFile.value) {
await splitContentFile(currentFile.value);
}
});
</script>
<template>
<div>
<!-- 上部分段设置部分 -->
<div class="mb-5">
<div class="mb-5 flex items-center justify-between">
<div class="flex items-center text-base font-bold">
分段设置
<ElTooltip placement="top">
<template #content>
系统会自动将文档内容分割成多个段落，您可以根据需要调整分段方式和内容。
</template>
<IconifyIcon
icon="lucide:circle-alert"
class="ml-1 text-gray-400"
/>
</ElTooltip>
</div>
<div>
<ElButton type="primary" size="small" @click="handleAutoSegment">
预览分段
</ElButton>
</div>
</div>
<div class="mb-5">
<ElForm :label-col="{ span: 5 }">
<ElFormItem label="最大 Token 数">
<ElInputNumber
v-model="modelData.segmentMaxTokens"
:min="1"
:max="2048"
controls-position="right"
class="!w-full"
/>
</ElFormItem>
</ElForm>
</div>
</div>
<div class="mb-2.5">
<div class="mb-2.5 text-base font-bold">分段预览</div>
<!-- 文件选择器 -->
<div class="mb-2.5">
<ElDropdown
v-if="modelData.list && modelData.list.length > 0"
trigger="click"
>
<div class="flex cursor-pointer items-center">
<IconifyIcon icon="lucide:file-text" class="mr-1" />
<span>{{ currentFile?.name || '请选择文件' }}</span>
<span
v-if="currentFile?.segments"
class="ml-1 text-sm text-gray-500"
>
({{ currentFile.segments.length }}个分片)
</span>
<IconifyIcon icon="lucide:chevron-down" class="ml-1" />
</div>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem
v-for="(file, index) in modelData.list"
:key="index"
@click="selectFile(index)"
>
{{ file.name }}
<span v-if="file.segments" class="ml-1 text-sm text-gray-500">
({{ file.segments.length }} 个分片)
</span>
</ElDropdownItem>
</ElDropdownMenu>
</template>
</ElDropdown>
<div v-else class="text-gray-400">暂无上传文件</div>
</div>
<!-- 文件内容预览 -->
<div class="max-h-[600px] overflow-y-auto rounded-md p-4">
<div v-if="splitLoading" class="flex items-center justify-center py-5">
<IconifyIcon icon="lucide:loader" class="is-loading" />
<span class="ml-2.5">正在加载分段内容...</span>
</div>
<template
v-else-if="
currentFile &&
currentFile.segments &&
currentFile.segments.length > 0
"
>
<div
v-for="(segment, index) in currentFile.segments"
:key="index"
class="mb-2.5"
>
<div class="mb-1 text-sm text-gray-500">
分片-{{ index + 1 }} · {{ segment.contentLength || 0 }} 字符数 ·
{{ segment.tokens || 0 }} Token
</div>
<div class="bg-card rounded-md p-2">
{{ segment.content }}
</div>
</div>
</template>
<ElEmpty v-else description="暂无预览内容" />
</div>
</div>
<!-- 添加底部按钮 -->
<div class="mt-5 flex justify-between">
<div>
<ElButton v-if="!modelData.id" @click="handlePrevStep">上一步</ElButton>
</div>
<div>
<ElButton type="primary" :loading="submitLoading" @click="handleSave">
保存并处理
</ElButton>
</div>
</div>
</div>
</template>

270
apps/web-ele/src/views/ai/knowledge/document/form/modules/upload-step.vue Normal file
View File

@@ -0,0 +1,270 @@
<script setup lang="ts">
import type { UploadProps, UploadRequestOptions } from 'element-plus';
import type { PropType } from 'vue';
import type { AxiosProgressEvent } from '#/api/infra/file';
import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { generateAcceptedFileTypes } from '@vben/utils';
import {
ElButton,
ElForm,
ElFormItem,
ElMessage,
ElUpload,
} from 'element-plus';
import { useUpload } from '#/components/upload/use-upload';
const props = defineProps({
modelValue: {
type: Object as PropType<any>,
required: true,
},
});
const emit = defineEmits(['update:modelValue']);
const formRef = ref(); // 表单引用
const uploadRef = ref(); // 上传组件引用
const parent = inject('parent', null); // 获取父组件实例
const { uploadUrl, httpRequest } = useUpload(); // 使用上传组件的钩子
const fileList = ref<UploadProps['fileList']>([]); // 文件列表
const uploadingCount = ref(0); // 上传中的文件数量
const supportedFileTypes = [
'TXT',
'MARKDOWN',
'MDX',
'PDF',
'HTML',
'XLSX',
'XLS',
'DOC',
'DOCX',
'CSV',
'EML',
'MSG',
'PPTX',
'XML',
'EPUB',
'PPT',
'MD',
'HTM',
]; // 支持的文件类型和大小限制
const allowedExtensions = new Set(
supportedFileTypes.map((ext) => ext.toLowerCase()),
); // 小写的扩展名列表
const maxFileSize = 15; // 最大文件大小(MB)
const acceptedFileTypes = computed(() =>
generateAcceptedFileTypes(supportedFileTypes),
); // 构建 accept 属性值，用于限制文件选择对话框中可见的文件类型
/** 表单数据 */
const modelData = computed({
get: () => {
return props.modelValue;
},
set: (val) => emit('update:modelValue', val),
});
/** 确保 list 属性存在 */
function ensureListExists() {
if (!props.modelValue.list) {
emit('update:modelValue', {
...props.modelValue,
list: [],
});
}
}
/** 是否所有文件都已上传完成 */
const isAllUploaded = computed(() => {
return (
modelData.value.list &&
modelData.value.list.length > 0 &&
uploadingCount.value === 0
);
});
/**
* 上传前检查文件类型和大小
*
* @param file 待上传的文件
* @returns 是否允许上传
*/
function beforeUpload(file: any) {
// 1.1 检查文件扩展名
const fileName = file.name.toLowerCase();
const fileExtension = fileName.slice(
Math.max(0, fileName.lastIndexOf('.') + 1),
);
if (!allowedExtensions.has(fileExtension)) {
ElMessage.error('不支持的文件类型！');
return false;
}
// 1.2 检查文件大小
if (!(file.size / 1024 / 1024 < maxFileSize)) {
ElMessage.error(`文件大小不能超过 ${maxFileSize} MB！`);
return false;
}
// 2. 增加上传中的文件计数
uploadingCount.value++;
return true;
}
async function customRequest(info: UploadRequestOptions) {
const file = info.file as File;
const name = file?.name;
try {
// 上传文件
const progressEvent: AxiosProgressEvent = (e) => {
const percent = Math.trunc((e.loaded / e.total!) * 100);
info.onProgress!({ percent });
};
const res = await httpRequest(info.file as File, progressEvent);
info.onSuccess!(res);
ElMessage.success('上传成功');
ensureListExists();
emit('update:modelValue', {
...props.modelValue,
list: [
...props.modelValue.list,
{
name,
url: res,
},
],
});
} catch (error: any) {
console.error(error);
info.onError!(error);
} finally {
uploadingCount.value = Math.max(0, uploadingCount.value - 1);
}
}
/**
* 从列表中移除文件
*
* @param index 要移除的文件索引
*/
function removeFile(index: number) {
// 从列表中移除文件
const newList = [...props.modelValue.list];
newList.splice(index, 1);
// 更新表单数据
emit('update:modelValue', {
...props.modelValue,
list: newList,
});
}
/** 下一步按钮处理 */
function handleNextStep() {
// 1.1 检查是否有文件上传
if (!modelData.value.list || modelData.value.list.length === 0) {
ElMessage.warning('请上传至少一个文件');
return;
}
// 1.2 检查是否有文件正在上传
if (uploadingCount.value > 0) {
ElMessage.warning('请等待所有文件上传完成');
return;
}
// 2. 获取父组件的goToNextStep方法
const parentEl = parent || getCurrentInstance()?.parent;
if (parentEl && typeof parentEl.exposed?.goToNextStep === 'function') {
parentEl.exposed.goToNextStep();
}
}
/** 初始化 */
onMounted(() => {
ensureListExists();
});
</script>
<template>
<ElForm ref="formRef" :model="modelData" label-width="0" class="mt-5">
<ElFormItem class="mb-5">
<div class="w-full">
<div
class="w-full rounded-md border-2 border-dashed border-gray-200 p-5 text-center hover:border-blue-500"
>
<ElUpload
ref="uploadRef"
class="upload-demo"
:action="uploadUrl"
v-model:file-list="fileList"
:accept="acceptedFileTypes"
:show-file-list="false"
:before-upload="beforeUpload"
:http-request="customRequest"
:multiple="true"
drag
>
<div class="flex flex-col items-center justify-center py-5">
<IconifyIcon
icon="ep:upload-filled"
class="mb-2.5 text-xs text-gray-400"
/>
<div class="ant-upload-text text-base text-gray-400">
拖拽文件至此，或者
<em class="cursor-pointer not-italic text-blue-500">
选择文件
</em>
</div>
<div class="mt-2.5 text-sm text-gray-400">
已支持 {{ supportedFileTypes.join('、') }}，每个文件不超过
{{ maxFileSize }} MB。
</div>
</div>
</ElUpload>
</div>
<div
v-if="modelData.list && modelData.list.length > 0"
class="mt-4 grid grid-cols-1 gap-2"
>
<div
v-for="(file, index) in modelData.list"
:key="index"
class="flex items-center justify-between rounded-sm border-l-4 border-l-blue-500 px-3 py-1 shadow-sm transition-all duration-300 hover:bg-blue-50"
>
<div class="flex items-center">
<IconifyIcon icon="lucide:file-text" class="mr-2 text-blue-500" />
<span class="break-all text-sm text-gray-600">
{{ file.name }}
</span>
</div>
<ElButton
type="danger"
text
link
@click="removeFile(index)"
class="ml-2"
>
<IconifyIcon icon="lucide:trash-2" />
</ElButton>
</div>
</div>
</div>
</ElFormItem>
<ElFormItem>
<div class="flex w-full justify-end">
<ElButton
type="primary"
@click="handleNextStep"
:disabled="!isAllUploaded"
>
下一步
</ElButton>
</div>
</ElFormItem>
</ElForm>
</template>

191
apps/web-ele/src/views/ai/knowledge/document/index.vue Normal file
View File

@@ -0,0 +1,191 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { confirm, Page } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictLabel } from '@vben/hooks';
import { ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteKnowledgeDocument,
getKnowledgeDocumentPage,
updateKnowledgeDocumentStatus,
} from '#/api/ai/knowledge/document';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
/** AI 知识库文档列表 */
defineOptions({ name: 'AiKnowledgeDocument' });
const route = useRoute();
const router = useRouter();
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
/** 创建知识库文档 */
function handleCreate() {
router.push({
name: 'AiKnowledgeDocumentCreate',
query: { knowledgeId: route.query.knowledgeId },
});
}
/** 编辑知识库文档 */
function handleEdit(id: number) {
router.push({
name: 'AiKnowledgeDocumentUpdate',
query: { id, knowledgeId: route.query.knowledgeId },
});
}
/** 删除知识库文档 */
async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
});
try {
await deleteKnowledgeDocument(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
loadingInstance.close();
}
}
/** 跳转到知识库分段页面 */
function handleSegment(id: number) {
router.push({
name: 'AiKnowledgeSegment',
query: { documentId: id },
});
}
/** 更新文档状态 */
async function handleStatusChange(
newStatus: number,
row: AiKnowledgeDocumentApi.KnowledgeDocument,
): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
confirm({
content: `你要将${row.name}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
})
.then(async () => {
// 更新文档状态
await updateKnowledgeDocumentStatus({
id: row.id,
status: newStatus,
});
// 提示并返回成功
ElMessage.success($t('ui.actionMessage.operationSuccess'));
resolve(true);
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(handleStatusChange),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getKnowledgeDocumentPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
knowledgeId: route.query.knowledgeId,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<AiKnowledgeDocumentApi.KnowledgeDocument>,
});
/** 初始化 */
onMounted(() => {
// 如果知识库 ID 不存在，显示错误提示并关闭页面
if (!route.query.knowledgeId) {
ElMessage.error('知识库 ID 不存在，无法查看文档列表');
// 关闭当前路由，返回到知识库列表页面
router.back();
}
});
</script>
<template>
<Page auto-content-height>
<Grid table-title="知识库文档列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['知识库文档']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['ai:knowledge:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['ai:knowledge:update'],
onClick: handleEdit.bind(null, row.id),
},
{
label: '分段',
type: 'primary',
link: true,
icon: ACTION_ICON.BOOK,
auth: ['ai:knowledge:query'],
onClick: handleSegment.bind(null, row.id),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['ai:knowledge:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

172
apps/web-ele/src/views/ai/knowledge/knowledge/data.ts Normal file
View File

@@ -0,0 +1,172 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getModelSimpleList } from '#/api/ai/model/model';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'name',
label: '知识库名称',
componentProps: {
placeholder: '请输入知识库名称',
},
rules: 'required',
},
{
fieldName: 'description',
label: '知识库描述',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入知识库描述',
},
},
{
component: 'ApiSelect',
fieldName: 'embeddingModelId',
label: '向量模型',
componentProps: {
api: () => getModelSimpleList(AiModelTypeEnum.EMBEDDING),
labelField: 'name',
valueField: 'id',
allowClear: true,
placeholder: '请选择向量模型',
},
rules: 'required',
},
{
fieldName: 'topK',
label: '检索 topK',
component: 'InputNumber',
componentProps: {
placeholder: '请输入检索 topK',
min: 0,
max: 10,
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
{
fieldName: 'similarityThreshold',
label: '检索相似度阈值',
component: 'InputNumber',
componentProps: {
placeholder: '请输入检索相似度阈值',
min: 0,
max: 1,
step: 0.01,
precision: 2,
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
{
fieldName: 'status',
label: '是否启用',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '知识库名称',
component: 'Input',
componentProps: {
placeholder: '请输入知识库名称',
allowClear: true,
},
},
{
fieldName: 'status',
label: '是否启用',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择是否启用',
allowClear: true,
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
minWidth: 100,
},
{
field: 'name',
title: '知识库名称',
minWidth: 150,
},
{
field: 'description',
title: '知识库描述',
minWidth: 200,
},
{
field: 'embeddingModel',
title: '向量化模型',
minWidth: 150,
},
{
field: 'status',
title: '是否启用',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
width: 280,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

166
apps/web-ele/src/views/ai/knowledge/knowledge/index.vue Normal file
View File

@@ -0,0 +1,166 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiKnowledgeKnowledgeApi } from '#/api/ai/knowledge/knowledge';
import { useRouter } from 'vue-router';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteKnowledge,
getKnowledgePage,
} from '#/api/ai/knowledge/knowledge';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
/** 创建知识库 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑知识库 */
function handleEdit(row: AiKnowledgeKnowledgeApi.Knowledge) {
formModalApi.setData(row).open();
}
/** 删除知识库 */
async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
});
try {
await deleteKnowledge(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
loadingInstance.close();
}
}
/** 跳转到知识库文档页面 */
const router = useRouter();
function handleDocument(id: number) {
router.push({
name: 'AiKnowledgeDocument',
query: { knowledgeId: id },
});
}
/** 跳转到文档召回测试页面 */
function handleRetrieval(id: number) {
router.push({
name: 'AiKnowledgeRetrieval',
query: { id },
});
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getKnowledgePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<AiKnowledgeKnowledgeApi.Knowledge>,
});
</script>
<template>
<Page auto-content-height>
<template #doc>
<DocAlert title="AI 手册" url="https://doc.iocoder.cn/ai/build/" />
</template>
<FormModal @success="handleRefresh" />
<Grid table-title="AI 知识库列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['AI 知识库']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['ai:knowledge:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['ai:knowledge:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('ui.widgets.document'),
type: 'primary',
link: true,
icon: ACTION_ICON.BOOK,
auth: ['ai:knowledge:query'],
onClick: handleDocument.bind(null, row.id),
},
{
label: '召回测试',
type: 'primary',
link: true,
icon: ACTION_ICON.SEARCH,
auth: ['ai:knowledge:query'],
onClick: handleRetrieval.bind(null, row.id),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['ai:knowledge:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

89
apps/web-ele/src/views/ai/knowledge/knowledge/modules/form.vue Normal file
View File

@@ -0,0 +1,89 @@
<script lang="ts" setup>
import type { AiKnowledgeKnowledgeApi } from '#/api/ai/knowledge/knowledge';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
createKnowledge,
getKnowledge,
updateKnowledge,
} from '#/api/ai/knowledge/knowledge';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<AiKnowledgeKnowledgeApi.Knowledge>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['AI 知识库'])
: $t('ui.actionTitle.create', ['AI 知识库']);
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 140,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as AiKnowledgeKnowledgeApi.Knowledge;
try {
await (formData.value?.id
? updateKnowledge(data)
: createKnowledge(data));
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<AiKnowledgeKnowledgeApi.Knowledge>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getKnowledge(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

214
apps/web-ele/src/views/ai/knowledge/knowledge/retrieval/index.vue Normal file
View File

@@ -0,0 +1,214 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
ElButton,
ElCard,
ElEmpty,
ElInput,
ElInputNumber,
ElMessage,
} from 'element-plus';
import { getKnowledge } from '#/api/ai/knowledge/knowledge';
import { searchKnowledgeSegment } from '#/api/ai/knowledge/segment';
/** 知识库文档召回测试 */
defineOptions({ name: 'KnowledgeDocumentRetrieval' });
const route = useRoute();
const router = useRouter();
const loading = ref(false); // 加载状态
const segments = ref<any[]>([]); // 召回结果
const queryParams = reactive({
id: undefined,
content: '',
topK: 10,
similarityThreshold: 0.5,
});
/** 执行召回测试 */
async function getRetrievalResult() {
if (!queryParams.content) {
ElMessage.warning('请输入查询文本');
return;
}
loading.value = true;
segments.value = [];
try {
const data = await searchKnowledgeSegment({
knowledgeId: queryParams.id,
content: queryParams.content,
topK: queryParams.topK,
similarityThreshold: queryParams.similarityThreshold,
});
segments.value = data || [];
} finally {
loading.value = false;
}
}
/** 切换段落展开状态 */
function toggleExpand(segment: any) {
segment.expanded = !segment.expanded;
}
/** 获取知识库配置信息 */
async function getKnowledgeInfo(id: number) {
try {
const knowledge = await getKnowledge(id);
if (knowledge) {
queryParams.topK = knowledge.topK || queryParams.topK;
queryParams.similarityThreshold =
knowledge.similarityThreshold || queryParams.similarityThreshold;
}
} catch {}
}
/** 初始化 */
onMounted(() => {
// 如果知识库 ID 不存在，显示错误提示并关闭页面
if (!route.query.id) {
ElMessage.error('知识库 ID 不存在，无法进行召回测试');
router.back();
return;
}
queryParams.id = route.query.id as any;
// 获取知识库信息并设置默认值
getKnowledgeInfo(queryParams.id as any);
});
</script>
<template>
<Page auto-content-height>
<div class="flex w-full gap-4">
<ElCard class="w-3/4 flex-1">
<div class="mb-15">
<h3 class="m-2 text-lg font-semibold leading-none tracking-tight">
召回测试
</h3>
<div class="m-2 text-sm text-gray-500">
根据给定的查询文本测试召回效果。
</div>
</div>
<div>
<div class="relative m-2">
<ElInput
v-model="queryParams.content"
:rows="8"
type="textarea"
placeholder="请输入文本"
/>
<div class="absolute bottom-2 right-2 text-sm text-gray-400">
{{ queryParams.content?.length }} / 200
</div>
</div>
<div class="m-2 flex items-center">
<span class="w-16 text-gray-500">topK:</span>
<ElInputNumber
v-model="queryParams.topK"
:min="1"
:max="20"
controls-position="right"
class="!w-full"
/>
</div>
<div class="m-2 flex items-center">
<span class="w-16 text-gray-500">相似度:</span>
<ElInputNumber
v-model="queryParams.similarityThreshold"
class="!w-full"
controls-position="right"
:min="0"
:max="1"
:precision="2"
:step="0.01"
/>
</div>
<div class="flex justify-end">
<ElButton
type="primary"
@click="getRetrievalResult"
:loading="loading"
>
测试
</ElButton>
</div>
</div>
</ElCard>
<ElCard class="min-w-300 flex-1">
<!-- 加载中状态 -->
<template v-if="loading">
<div class="flex h-72 items-center justify-center">
<ElEmpty description="正在检索中..." />
</div>
</template>
<!-- 有段落 -->
<template v-else-if="segments.length > 0">
<div class="mb-15 font-bold">{{ segments.length }} 个召回段落</div>
<div>
<div
v-for="(segment, index) in segments"
:key="index"
class="mt-2 rounded border border-solid border-gray-200 px-2 py-2"
>
<div
class="mb-2 flex items-center justify-between gap-8 text-sm text-gray-500"
>
<span>
分段({{ segment.id }}) · {{ segment.contentLength }} 字符数 ·
{{ segment.tokens }} Token
</span>
<span
class="whitespace-nowrap rounded-full bg-blue-50 px-2 py-1 text-sm text-blue-500"
>
score: {{ segment.score }}
</span>
</div>
<div
class="mb-2 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 text-sm transition-all duration-100"
:class="{
'line-clamp-2 max-h-40': !segment.expanded,
'max-h-[1500px]': segment.expanded,
}"
>
{{ segment.content }}
</div>
<div class="flex items-center justify-between gap-8">
<div class="flex items-center gap-1 text-sm text-gray-500">
<IconifyIcon icon="lucide:file-text" />
<span>{{ segment.documentName || '未知文档' }}</span>
</div>
<ElButton size="small" @click="toggleExpand(segment)">
{{ segment.expanded ? '收起' : '展开' }}
<IconifyIcon
:icon="
segment.expanded
? 'lucide:chevron-up'
: 'lucide:chevron-down'
"
/>
</ElButton>
</div>
</div>
</div>
</template>
<!-- 无召回结果 -->
<template v-else>
<div class="flex h-72 items-center justify-center">
<ElEmpty description="暂无召回结果" />
</div>
</template>
</ElCard>
</div>
</Page>
</template>

130
apps/web-ele/src/views/ai/knowledge/segment/data.ts Normal file
View File

@@ -0,0 +1,130 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'documentId',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'content',
label: '切片内容',
component: 'Textarea',
componentProps: {
placeholder: '请输入切片内容',
rows: 6,
showCount: true,
},
rules: 'required',
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'documentId',
label: '文档编号',
component: 'Input',
componentProps: {
placeholder: '请输入文档编号',
allowClear: true,
},
},
{
fieldName: 'status',
label: '是否启用',
component: 'Select',
componentProps: {
placeholder: '请选择是否启用',
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
];
}
/** 列表的字段 */
export function useGridColumns(
onStatusChange?: (
newStatus: number,
row: AiKnowledgeSegmentApi.KnowledgeSegment,
) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '分段编号',
minWidth: 100,
},
{
type: 'expand',
width: 40,
slots: { content: 'expand_content' },
},
{
field: 'content',
title: '切片内容',
minWidth: 250,
},
{
field: 'contentLength',
title: '字符数',
minWidth: 100,
},
{
field: 'tokens',
title: 'token 数量',
minWidth: 120,
},
{
field: 'retrievalCount',
title: '召回次数',
minWidth: 100,
},
{
field: 'status',
title: '状态',
minWidth: 100,
align: 'center',
cellRender: {
attrs: { beforeChange: onStatusChange },
name: 'CellSwitch',
props: {
activeValue: CommonStatusEnum.ENABLE,
inactiveValue: CommonStatusEnum.DISABLE,
},
},
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
width: 150,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

171
apps/web-ele/src/views/ai/knowledge/segment/index.vue Normal file
View File

@@ -0,0 +1,171 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictLabel } from '@vben/hooks';
import { ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteKnowledgeSegment,
getKnowledgeSegmentPage,
updateKnowledgeSegmentStatus,
} from '#/api/ai/knowledge/segment';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const route = useRoute();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
/** 创建知识库片段 */
function handleCreate() {
formModalApi.setData({ documentId: route.query.documentId }).open();
}
/** 编辑知识库片段 */
function handleEdit(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
formModalApi.setData(row).open();
}
/** 删除知识库片段 */
async function handleDelete(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.id]),
});
try {
await deleteKnowledgeSegment(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
handleRefresh();
} finally {
loadingInstance.close();
}
}
/** 更新知识库片段状态 */
async function handleStatusChange(
newStatus: number,
row: AiKnowledgeSegmentApi.KnowledgeSegment,
): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
confirm({
content: `你要将片段 ${row.id} 的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
})
.then(async () => {
// 更新片段状态
await updateKnowledgeSegmentStatus(row.id!, newStatus);
// 提示并返回成功
ElMessage.success($t('ui.actionMessage.operationSuccess'));
resolve(true);
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(handleStatusChange),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getKnowledgeSegmentPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<AiKnowledgeSegmentApi.KnowledgeSegment>,
});
/** 初始化 */
onMounted(() => {
gridApi.formApi.setFieldValue('documentId', route.query.documentId);
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="handleRefresh" />
<Grid table-title="分段列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['分段']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['ai:knowledge:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #expand_content="{ row }">
<div
class="whitespace-pre-wrap border-l-4 border-blue-500 px-2.5 py-5 leading-5"
>
<div class="mb-2 text-sm font-bold text-gray-600">完整内容：</div>
{{ row.content }}
</div>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['ai:knowledge:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['ai:knowledge:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

89
apps/web-ele/src/views/ai/knowledge/segment/modules/form.vue Normal file
View File

@@ -0,0 +1,89 @@
<script lang="ts" setup>
import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
createKnowledgeSegment,
getKnowledgeSegment,
updateKnowledgeSegment,
} from '#/api/ai/knowledge/segment';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<AiKnowledgeSegmentApi.KnowledgeSegment>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['分段'])
: $t('ui.actionTitle.create', ['分段']);
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 140,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as AiKnowledgeSegmentApi.KnowledgeSegment;
try {
await (formData.value?.id
? updateKnowledgeSegment(data)
: createKnowledgeSegment(data));
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<AiKnowledgeSegmentApi.KnowledgeSegment>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getKnowledgeSegment(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-ele/src/views/ai/mindmap/manager/index.vue
View File

@@ -30,7 +30,7 @@ async function handleDelete(row: AiMindmapApi.MindMap) {
text: $t('ui.actionMessage.deleting', [row.id]),
});
try {
await deleteMindMap(row.id as number);
await deleteMindMap(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
handleRefresh();
} finally {

29
apps/web-ele/src/views/ai/music/index/index.vue Normal file
View File

@@ -0,0 +1,29 @@
<script lang="ts" setup>
import type { Nullable, Recordable } from '@vben/types';
import { ref, unref } from 'vue';
import { Page } from '@vben/common-ui';
import List from './list/index.vue';
import Mode from './mode/index.vue';
defineOptions({ name: 'AiMusicIndex' });
const listRef = ref<Nullable<{ generateMusic: (...args: any) => void }>>(null);
function generateMusic(args: { formData: Recordable<any> }) {
unref(listRef)?.generateMusic(args.formData);
}
</script>
<template>
<Page auto-content-height>
<div class="flex h-full items-stretch">
<!-- 模式 -->
<Mode class="flex-none" @generate-music="generateMusic" />
<!-- 音频列表 -->
<List ref="listRef" class="flex-auto" />
</div>
</Page>
</template>

99
apps/web-ele/src/views/ai/music/index/list/audioBar/index.vue Normal file
View File

@@ -0,0 +1,99 @@
<script lang="ts" setup>
import { inject, reactive, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { formatPast } from '@vben/utils';
import { ElImage, ElSlider } from 'element-plus';
defineOptions({ name: 'AiMusicAudioBarIndex' });
const currentSong = inject<any>('currentSong', {});
const audioRef = ref<HTMLAudioElement | null>(null);
const audioProps = reactive<any>({
autoplay: true,
paused: false,
currentTime: '00:00',
duration: '00:00',
muted: false,
volume: 50,
}); // 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
function toggleStatus(type: string) {
audioProps[type] = !audioProps[type];
if (type === 'paused' && audioRef.value) {
if (audioProps[type]) {
audioRef.value.pause();
} else {
audioRef.value.play();
}
}
}
/** 更新播放位置 */
function audioTimeUpdate(args: any) {
audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss');
}
</script>
<template>
<div
class="b-1 b-l-none h-18 bg-card flex items-center justify-between border border-solid border-rose-100 px-2"
>
<!-- 歌曲信息 -->
<div class="flex gap-2.5">
<ElImage
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
class="!w-[45px]"
/>
<div>
<div>{{ currentSong.name }}</div>
<div class="text-xs text-gray-400">{{ currentSong.singer }}</div>
</div>
</div>
<!-- 音频controls -->
<div class="flex items-center gap-3">
<IconifyIcon
icon="majesticons:back-circle"
class="size-5 cursor-pointer text-gray-300"
/>
<IconifyIcon
:icon="
audioProps.paused
? 'mdi:arrow-right-drop-circle'
: 'solar:pause-circle-bold'
"
class="size-7 cursor-pointer"
@click="toggleStatus('paused')"
/>
<IconifyIcon
icon="majesticons:next-circle"
class="size-5 cursor-pointer text-gray-300"
/>
<div class="flex items-center gap-4">
<span>{{ audioProps.currentTime }}</span>
<ElSlider v-model="audioProps.duration" color="#409eff" class="!w-40" />
<span>{{ audioProps.duration }}</span>
</div>
<!-- 音频 -->
<audio
v-bind="audioProps"
ref="audioRef"
controls
v-show="!audioProps"
@timeupdate="audioTimeUpdate"
>
<!-- <source :src="audioUrl" /> -->
</audio>
</div>
<div class="flex items-center gap-4">
<IconifyIcon
:icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'"
class="size-5 cursor-pointer"
@click="toggleStatus('muted')"
/>
<ElSlider v-model="audioProps.volume" color="#409eff" class="!w-40" />
</div>
</div>
</template>

100
apps/web-ele/src/views/ai/music/index/list/index.vue Normal file
View File

@@ -0,0 +1,100 @@
<script setup lang="ts">
import type { Recordable } from '@vben/types';
import { provide, ref } from 'vue';
import { ElCol, ElEmpty, ElRow, ElTabPane, ElTabs } from 'element-plus';
import audioBar from './audioBar/index.vue';
import songCard from './songCard/index.vue';
import songInfo from './songInfo/index.vue';
defineOptions({ name: 'AiMusicListIndex' });
const currentType = ref('mine');
const loading = ref(false); // loading 状态
const currentSong = ref({}); // 当前音乐
const mySongList = ref<Recordable<any>[]>([]);
const squareSongList = ref<Recordable<any>[]>([]);
function generateMusic(formData: Recordable<any>) {
loading.value = true;
setTimeout(() => {
mySongList.value = Array.from({ length: 20 }, (_, index) => {
return {
id: index,
audioUrl: '',
videoUrl: '',
title: `我走后${index}`,
imageUrl:
'https://www.carsmp3.com/data/attachment/forum/201909/19/091020q5kgre20fidreqyt.jpg',
desc: 'Metal, symphony, film soundtrack, grand, majesticMetal, dtrack, grand, majestic',
date: '2024年04月30日 14:02:57',
lyric: `<div class="_words_17xen_66"><div>大江东去，浪淘尽，千古风流人物。
</div><div>故垒西边，人道是，三国周郎赤壁。
</div><div>乱石穿空，惊涛拍岸，卷起千堆雪。
</div><div>江山如画，一时多少豪杰。
</div><div>
</div><div>遥想公瑾当年，小乔初嫁了，雄姿英发。
</div><div>羽扇纶巾，谈笑间，樯橹灰飞烟灭。
</div><div>故国神游，多情应笑我，早生华发。
</div><div>人生如梦，一尊还酹江月。</div></div>`,
};
});
loading.value = false;
}, 3000);
}
function setCurrentSong(music: Recordable<any>) {
currentSong.value = music;
}
defineExpose({
generateMusic,
});
provide('currentSong', currentSong);
</script>
<template>
<div class="flex flex-col">
<div class="flex flex-auto overflow-hidden">
<ElTabs
v-model="currentType"
class="flex-auto px-5"
tab-position="bottom"
>
<!-- 我的创作 -->
<ElTabPane name="mine" label="我的创作" v-loading="loading">
<ElRow v-if="mySongList.length > 0" :gutter="12">
<ElCol v-for="song in mySongList" :key="song.id" :span="24">
<songCard :song-info="song" @play="setCurrentSong(song)" />
</ElCol>
</ElRow>
<ElEmpty v-else description="暂无音乐" />
</ElTabPane>
<!-- 试听广场 -->
<ElTabPane name="square" label="试听广场" v-loading="loading">
<ElRow v-if="squareSongList.length > 0" :gutter="12">
<ElCol v-for="song in squareSongList" :key="song.id" :span="24">
<songCard :song-info="song" @play="setCurrentSong(song)" />
</ElCol>
</ElRow>
<ElEmpty v-else description="暂无音乐" />
</ElTabPane>
</ElTabs>
<!-- songInfo -->
<songInfo class="flex-none" />
</div>
<audioBar class="flex-none" />
</div>
</template>
<style lang="scss" scoped>
:deep(.el-tabs) {
.el-tabs__content {
padding: 0 7px;
overflow: auto;
}
}
</style>

50
apps/web-ele/src/views/ai/music/index/list/songCard/index.vue Normal file
View File

@@ -0,0 +1,50 @@
<script lang="ts" setup>
import { inject } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { ElImage } from 'element-plus';
defineOptions({ name: 'AiMusicSongCardIndex' });
defineProps({
songInfo: {
type: Object,
default: () => ({}),
},
});
const emits = defineEmits(['play']);
const currentSong = inject<any>('currentSong', {});
function playSong() {
emits('play');
}
</script>
<template>
<div class="mb-3 flex rounded p-3">
<div class="relative" @click="playSong">
<ElImage :src="songInfo.imageUrl" class="w-20 flex-none" />
<div
class="absolute left-0 top-0 flex h-full w-full cursor-pointer items-center justify-center bg-black bg-opacity-40"
>
<IconifyIcon
:icon="
currentSong.id === songInfo.id
? 'solar:pause-circle-bold'
: 'mdi:arrow-right-drop-circle'
"
:size="30"
/>
</div>
</div>
<div class="ml-2">
<div>{{ songInfo.title }}</div>
<div class="mt-2 line-clamp-2 text-xs">
{{ songInfo.desc }}
</div>
</div>
</div>
</template>

25
apps/web-ele/src/views/ai/music/index/list/songInfo/index.vue Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts" setup>
import { inject } from 'vue';
import { ElButton, ElCard, ElImage } from 'element-plus';
defineOptions({ name: 'AiMusicSongInfoIndex' });
const currentSong = inject<any>('currentSong', {});
</script>
<template>
<ElCard class="!mb-0 w-40 leading-6">
<ElImage :src="currentSong.imageUrl" class="h-full w-full" />
<div class="">{{ currentSong.title }}</div>
<div class="line-clamp-1 text-xs">
{{ currentSong.desc }}
</div>
<div class="text-xs">
{{ currentSong.date }}
</div>
<ElButton size="small" round class="my-2">信息复用</ElButton>
<div class="text-xs" v-html="currentSong.lyric"></div>
</ElCard>
</template>

66
apps/web-ele/src/views/ai/music/index/mode/desc.vue Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts" setup>
import { reactive } from 'vue';
import { ElInput, ElOption, ElSelect, ElSwitch } from 'element-plus';
import Title from '../title/index.vue';
defineOptions({ name: 'AiMusicModeDesc' });
const formData = reactive({
desc: '',
pure: false,
version: '3',
});
defineExpose({
formData,
});
</script>
<template>
<div>
<Title
title="音乐/歌词说明"
desc="描述您想要的音乐风格和主题，使用流派和氛围而不是特定的艺术家和歌曲"
>
<ElInput
v-model="formData.desc"
type="textarea"
:autosize="{ minRows: 6, maxRows: 6 }"
:maxlength="1200"
:show-word-limit="true"
placeholder="一首关于糟糕分手的欢快歌曲"
/>
</Title>
<Title title="纯音乐" class="mt-5" desc="创建一首没有歌词的歌曲">
<template #extra>
<ElSwitch v-model="formData.pure" size="small" />
</template>
</Title>
<Title
title="版本"
desc="描述您想要的音乐风格和主题，使用流派和氛围而不是特定的艺术家和歌曲"
>
<ElSelect v-model="formData.version" class="w-full" placeholder="请选择">
<ElOption
v-for="item in [
{
value: '3',
label: 'V3',
},
{
value: '2',
label: 'V2',
},
]"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</ElSelect>
</Title>
</div>
</template>

Some files were not shown because too many files have changed in this diff Show More