chenx/qhmes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增 CLAUDE.md 文件以提供项目指导，添加 .claudeignore 文件以排除不必要的文件，更新 pom.xml 版本至 3.9.2，修复多个路径遍历和 SQL 注入漏洞，优化字典翻译切面逻辑，增强文件上传和下载的安全性，新增音频文件类型支持，改进动态数据源的安全校验。

Browse Source
This commit is contained in:
geht
2026-05-18 20:05:03 +08:00
parent 67ca5287e2
commit 140f4a816e
589 changed files with 65043 additions and 4682 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
jeecgboot-vue3/src/views/openapi/OpenApi.data.ts
View File

@@ -11,35 +11,34 @@ export const columns: BasicColumn[] = [
align:"center",
dataIndex: 'name'
},
{
title: '请求方法',
align:"center",
dataIndex: 'requestMethod'
},
{
title: '接口地址',
align:"center",
dataIndex: 'requestUrl'
dataIndex: 'requestUrl',
width: 120,
},
{
title: 'IP 黑名单',
title: '请求方式',
align:"center",
dataIndex: 'blackList'
},
// {
// title: '状态',
// align:"center",
// dataIndex: 'status'
// },
{
title: '创建人',
align:"center",
dataIndex: 'createBy'
dataIndex: 'requestMethod',
width: 100,
},
{
title: '创建时间',
title: '原始接口',
align:"center",
dataIndex: 'createTime'
dataIndex: 'originUrl',
ellipsis: true,
},
{
title: 'IP 白名单',
align:"center",
dataIndex: 'whiteList',
ellipsis: true,
customRender: ({ text }) => {
if (!text) return '不限制';
const count = text.split(/[,\n]/).filter(item => item.trim()).length;
return count + ' 条规则';
}
},
];
//查询数据
@@ -50,8 +49,8 @@ export const searchFormSchema: FormSchema[] = [
component: 'JInput',
},
{
label: "创建人",
field: "createBy",
label: "接口地址",
field: "requestUrl",
component: 'JInput',
},
];
@@ -68,12 +67,35 @@ export const formSchema: FormSchema[] = [
},
},
{
label: '原始地址',
label: '原始接口',
field: 'originUrl',
component: 'Input',
componentProps: {
placeholder: '当前系统的原始接口地址，如 /sys/user/list',
},
helpMessage: '当前系统中被代理的原始接口路径',
dynamicRules: () => {
return [
{ required: true, message: '请输入原始接口路径!' },
{
validator: (_, value) => {
if (value && !value.startsWith('/')) {
return Promise.reject('原始接口路径必须以 / 开头');
}
if (value && value.includes('//')) {
return Promise.reject('原始接口路径不能包含 //');
}
if (value && value.includes('..')) {
return Promise.reject('原始接口路径不能包含 ..');
}
return Promise.resolve();
},
},
];
},
},
{
label: '请求方法',
label: '请求方式',
field: 'requestMethod',
component: 'JSearchSelect',
componentProps:{
@@ -112,7 +134,7 @@ export const formSchema: FormSchema[] = [
},
dynamicRules: ({model,schema}) => {
return [
{ required: true, message: '请输入请求方法!'},
{ required: true, message: '请输入请求方式!'},
];
},
},
@@ -123,14 +145,36 @@ export const formSchema: FormSchema[] = [
dynamicDisabled:true
},
{
label: 'IP 黑名单',
field: 'blackList',
component: 'Input',
label: 'IP 白名单',
field: 'whiteList',
helpMessage: '支持精确IP、CIDR网段（如192.168.1.0/24）、通配符（如10.2.3.*），每行一个或逗号分隔，为空则不限制',
component: 'InputTextArea',
slot: 'whiteListSlot',
componentProps: {
rows: 5,
placeholder: '示例：\n192.168.1.100\n10.0.0.0/8\n172.16.*.*',
},
colProps: { span: 24 },
},
{
label: '请求体内容',
component:"Input",
field: 'body'
label: '备注',
field: 'comment',
component: 'InputTextArea',
componentProps: {
rows: 2,
placeholder: '请输入白名单备注说明',
},
colProps: { span: 24 },
},
{
label: '接口描述',
field: 'description',
component: 'InputTextArea',
componentProps: {
rows: 3,
placeholder: '请输入接口描述',
},
colProps: { span: 24 },
},
{
label: '删除标识',
@@ -240,6 +284,21 @@ export const openApiHeaderJVxeColumns: JVxeColumn[] = [
defaultValue:'',
customValue: ['1','0']
},
{
title: '参数类型',
key: 'paramType',
type: JVxeTypes.select,
width: '120px',
options: [
{ title: 'string', value: 'string' },
{ title: 'integer', value: 'integer' },
{ title: 'number', value: 'number' },
{ title: 'boolean', value: 'boolean' },
{ title: 'array', value: 'array' },
{ title: 'object', value: 'object' },
],
defaultValue: 'string',
},
{
title: '默认值',
key: 'defaultValue',
@@ -248,6 +307,14 @@ export const openApiHeaderJVxeColumns: JVxeColumn[] = [
placeholder: '请输入${title}',
defaultValue:'',
},
{
title: '示例值',
key: 'example',
type: JVxeTypes.input,
width: '200px',
placeholder: '请输入${title}',
defaultValue: '',
},
{
title: '备注',
key: 'note',
@@ -284,6 +351,21 @@ export const openApiParamJVxeColumns: JVxeColumn[] = [
defaultValue:'',
customValue: ['1','0']
},
{
title: '参数类型',
key: 'paramType',
type: JVxeTypes.select,
width: '120px',
options: [
{ title: 'string', value: 'string' },
{ title: 'integer', value: 'integer' },
{ title: 'number', value: 'number' },
{ title: 'boolean', value: 'boolean' },
{ title: 'array', value: 'array' },
{ title: 'object', value: 'object' },
],
defaultValue: 'string',
},
{
title: '默认值',
key: 'defaultValue',
@@ -292,6 +374,14 @@ export const openApiParamJVxeColumns: JVxeColumn[] = [
placeholder: '请输入${title}',
defaultValue:'',
},
{
title: '示例值',
key: 'example',
type: JVxeTypes.input,
width: '200px',
placeholder: '请输入${title}',
defaultValue: '',
},
{
title: '备注',
key: 'note',
@@ -301,12 +391,45 @@ export const openApiParamJVxeColumns: JVxeColumn[] = [
},
]
export const responseFieldJVxeColumns: JVxeColumn[] = [
{
title: '字段名',
key: 'fieldName',
type: JVxeTypes.input,
width: '200px',
placeholder: '请输入${title}',
defaultValue: '',
},
{
title: '类型',
key: 'fieldType',
type: JVxeTypes.select,
width: '120px',
options: [
{ title: 'string', value: 'string' },
{ title: 'integer', value: 'integer' },
{ title: 'number', value: 'number' },
{ title: 'boolean', value: 'boolean' },
{ title: 'array', value: 'array' },
{ title: 'object', value: 'object' },
],
defaultValue: 'string',
},
{
title: '说明',
key: 'fieldDesc',
type: JVxeTypes.input,
placeholder: '请输入${title}',
defaultValue: '',
},
];
// 高级查询数据
export const superQuerySchema = {
name: {title: '接口名称',order: 0,view: 'text', type: 'string',},
requestMethod: {title: '请求方法',order: 1,view: 'list', type: 'string',dictCode: '',},
requestMethod: {title: '请求方式',order: 1,view: 'list', type: 'string',dictCode: '',},
requestUrl: {title: '接口地址',order: 2,view: 'text', type: 'string',},
blackList: {title: 'IP 黑名单',order: 3,view: 'text', type: 'string',},
whiteList: {title: 'IP 白名单',order: 3,view: 'text', type: 'string',},
status: {title: '状态',order: 5,view: 'number', type: 'number',},
createBy: {title: '创建人',order: 6,view: 'text', type: 'string',},
createTime: {title: '创建时间',order: 7,view: 'datetime', type: 'string',},

98
jeecgboot-vue3/src/views/openapi/OpenApiAuth.data.ts
View File

@@ -1,48 +1,84 @@
import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';
import { rules} from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';
import { getWeekMonthQuarterYear } from '/@/utils';
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
//列表数据
export const columns: BasicColumn[] = [
{
title: '授权名称',
align: "center",
dataIndex: 'name'
title: '授权对象',
align: 'center',
dataIndex: 'name',
},
{
title: 'AK',
align: "center",
dataIndex: 'ak'
},
{
title: 'SK',
align: "center",
dataIndex: 'sk'
title: '访问密钥（AK）',
align: 'center',
dataIndex: 'ak',
ellipsis: true,
},
{
title: '创建人',
align: "center",
dataIndex: 'createBy'
align: 'center',
dataIndex: 'createBy',
},
{
title: '创建时间',
align: "center",
dataIndex: 'createTime'
align: 'center',
dataIndex: 'createTime',
},
];
//查询数据
export const searchFormSchema: FormSchema[] = [
{
label: '授权对象',
field: 'name',
component: 'JInput',
},
{
label: '访问密钥',
field: 'ak',
component: 'JInput',
},
];
//授权表单数据
export const authFormSchema: FormSchema[] = [
{
label: '授权对象',
field: 'name',
component: 'Input',
required: true,
},
{
label: '',
field: 'ak',
component: 'Input',
show: false,
},
{
label: '',
field: 'sk',
component: 'Input',
show: false,
},
{
label: '',
field: 'id',
component: 'Input',
show: false,
},
{
label: '',
field: 'systemUserId',
component: 'Input',
show: false,
},
// {
// title: '关联系统用户名',
// align: "center",
// dataIndex: 'createBy',
// },
];
// 高级查询数据
export const superQuerySchema = {
name: {title: '授权名称',order: 0,view: 'text', type: 'string',},
ak: {title: 'AK',order: 1,view: 'text', type: 'string',},
sk: {title: 'SK',order: 2,view: 'text', type: 'string',},
createBy: {title: '关联系统用户名',order: 3,view: 'text', type: 'string',},
createTime: {title: '创建时间',order: 4,view: 'datetime', type: 'string',},
// systemUserId: {title: '关联系统用户名',order: 5,view: 'text', type: 'string',},
name: { title: '授权对象', order: 0, view: 'text', type: 'string' },
ak: { title: '访问密钥（AK）', order: 1, view: 'text', type: 'string' },
sk: { title: '签名密钥（SK）', order: 2, view: 'text', type: 'string' },
createBy: { title: '创建人', order: 3, view: 'text', type: 'string' },
createTime: { title: '创建时间', order: 4, view: 'datetime', type: 'string' },
};

267
jeecgboot-vue3/src/views/openapi/OpenApiAuthList.vue
View File

@@ -1,44 +1,12 @@
<template>
<div class="p-2">
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="6">
<a-form-item name="name">
<template #label><span title="授权名称">授权名称</span></template>
<a-input placeholder="请输入授权名称" v-model:value="queryParam.name" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="createBy">
<template #label><span title="关联系统用户名">关联系统用户名</span></template>
<JSearchSelect dict="sys_user,username,username" v-model:value="queryParam.createBy" placeholder="请输入关联系统用户名" allow-clear ></JSearchSelect>
<!-- <a-input placeholder="请输入关联系统用户名" v-model:value="queryParam.systemUserId" allow-clear ></a-input>-->
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
<a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
</a>
</a-col>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div>
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" v-auth="'openapi:open_api_auth:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="primary" v-auth="'openapi:open_api_auth:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" v-auth="'openapi:open_api_auth:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
<a-button type="primary" v-auth="'openapi:open_api_auth:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="primary" v-auth="'openapi:open_api_auth:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" v-auth="'openapi:open_api_auth:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
@@ -57,15 +25,15 @@
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
</template>
<!--字段回显插槽-->
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<!-- 表单区域 -->
<OpenApiAuthModal ref="registerModal" @success="handleSuccess"></OpenApiAuthModal>
<AuthModal ref="authModal" @success="handleSuccess"></AuthModal>
<OpenApiAuthDrawer @register="registerAuthDrawer" @success="handleSuccess" />
<AuthDrawer @register="registerPermDrawer" @success="handleSuccess" />
</div>
</template>
@@ -73,63 +41,51 @@
import { ref, reactive } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, superQuerySchema } from './OpenApiAuth.data';
import {
list,
deleteOne,
batchDelete,
getImportUrl,
getExportUrl,
getGenAKSK, saveOrUpdate
} from "./OpenApiAuth.api";
import OpenApiAuthModal from './components/OpenApiAuthModal.vue'
import AuthModal from './components/AuthModal.vue'
import { useUserStore } from '/@/store/modules/user';
import JSearchSelect from "../../components/Form/src/jeecg/components/JSearchSelect.vue";
import { useDrawer } from '/@/components/Drawer';
import { useMessage } from '/@/hooks/web/useMessage';
import { columns, searchFormSchema, superQuerySchema } from './OpenApiAuth.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, getGenAKSK, saveOrUpdate } from './OpenApiAuth.api';
import OpenApiAuthDrawer from './components/OpenApiAuthDrawer.vue';
import AuthDrawer from './components/AuthDrawer.vue';
const formRef = ref();
const queryParam = reactive<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const authModal = ref();
const userStore = useUserStore();
const { createMessage } = useMessage();
const [registerAuthDrawer, { openDrawer: openAuthDrawer }] = useDrawer();
const [registerPermDrawer, { openDrawer: openPermDrawer }] = useDrawer();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '授权管理',
api: list,
columns,
canResize:false,
useSearchForm: false,
canResize: false,
formConfig: {
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
fieldMapToNumber: [],
fieldMapToTime: [],
},
actionColumn: {
width: 200,
width: 220,
fixed: 'right',
},
beforeFetch: async (params) => {
beforeFetch: (params) => {
return Object.assign(params, queryParam);
},
},
exportConfig: {
name: "授权管理",
name: '授权管理',
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
});
const [registerTable, { reload, updateTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({
xs:24,
sm:10,
xl:6,
xxl:10
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
importConfig: {
url: getImportUrl,
success: handleSuccess,
},
});
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
// 高级查询配置
const superQueryConfig = reactive(superQuerySchema);
@@ -141,163 +97,144 @@
Object.keys(params).map((k) => {
queryParam[k] = params[k];
});
searchQuery();
reload();
}
/**
* 新增事件
*/
function handleAdd() {
registerModal.value.disableSubmit = false;
registerModal.value.add();
}
/**
* 编辑事件
*/
function handleAuth(record: Recordable) {
authModal.value.disableSubmit = false;
authModal.value.edit(record);
openAuthDrawer(true, {
isUpdate: false,
showFooter: true,
});
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.authDrawerOpen = true;
registerModal.value.edit(record);
openAuthDrawer(true, {
record,
isUpdate: true,
showFooter: true,
});
}
/**
* 重置事件
* @param record
* 授权事件
*/
function handleAuth(record: Recordable) {
openPermDrawer(true, { record });
}
/**
* 重置AK/SK
*/
async function handleReset(record: Recordable) {
const AKSKObj = await getGenAKSK({});
record.ak = AKSKObj[0];
record.sk = AKSKObj[1];
saveOrUpdate(record,true);
// handleSuccess;
await saveOrUpdate(record, true);
reload();
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
openAuthDrawer(true, {
record,
isUpdate: true,
showFooter: false,
});
}
/**
* 删除事件
*/
async function handleDelete(record) {
await deleteOne({ id: record.id }, handleSuccess);
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
/**
* 操作栏
*/
/**
* 复制密钥
*/
async function handleCopyKeys(record: Recordable) {
const text = `访问密钥（AK）: ${record.ak}\n签名密钥（SK）: ${record.sk}`;
try {
await navigator.clipboard.writeText(text);
createMessage.success('密钥已复制到剪贴板');
} catch (_e) {
createMessage.error('复制失败，请手动复制');
}
}
function getTableAction(record) {
return [
{
label: '授权',
onClick: handleAuth.bind(null, record),
auth: 'openapi:open_api_auth:edit'
label: '复制密钥',
onClick: handleCopyKeys.bind(null, record),
},
{
label: '重置',
popConfirm: {
title: '是否重置AK,SK',
confirm: handleReset.bind(null, record),
placement: 'topLeft',
},
auth: 'openapi:open_api_auth:edit'
label: '分配接口',
onClick: handleAuth.bind(null, record),
auth: 'openapi:open_api_auth:edit',
},
];
}
/**
* 下拉操作栏
*/
function getDropDownAction(record) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
}, {
label: '修改对象',
onClick: handleEdit.bind(null, record),
auth: 'openapi:open_api_auth:edit',
},
{
label: '重置密钥',
popConfirm: {
title: '原密钥将失效，确认重置？',
confirm: handleReset.bind(null, record),
placement: 'topLeft',
},
auth: 'openapi:open_api_auth:edit',
},
{
label: '删除',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
placement: 'topLeft',
},
auth: 'openapi:open_api_auth:delete'
}
]
auth: 'openapi:open_api_auth:delete',
},
];
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//刷新数据
reload();
}
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust{
min-width: 100px !important;
}
.query-group-split-cust{
width: 30px;
display: inline-block;
text-align: center
}
.ant-form-item:not(.ant-form-item-with-help){
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),:deep(.ant-input-number){
width: 100%;
}
:deep(.ant-picker),:deep(.ant-input-number) {
width: 100%;
}
</style>

54
jeecgboot-vue3/src/views/openapi/OpenApiList.vue
View File

@@ -41,31 +41,30 @@
</template>
<!--字段回显插槽-->
<template v-slot:bodyCell="{ column, record, index, text }">
<template v-if="column.dataIndex === 'requestUrl'">
<a @click="handleCopyUrl(record)" title="点击复制完整接口地址">{{ text }}</a>
</template>
</template>
</BasicTable>
<!-- 表单区域 -->
<OpenApiModal @register="registerModal" @success="handleSuccess"></OpenApiModal>
<OpenApiDrawer @register="registerDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts" name="openapi-openApi" setup>
import {ref, reactive, computed, unref} from 'vue';
import {BasicTable, useTable, TableAction} from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage'
import {useModal} from '/@/components/Modal';
import OpenApiModal from './components/OpenApiModal.vue'
import OpenApiHeaderSubTable from './subTables/OpenApiHeaderSubTable.vue'
import OpenApiParamSubTable from './subTables/OpenApiParamSubTable.vue'
import {columns, searchFormSchema, superQuerySchema} from './OpenApi.data';
import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './OpenApi.api';
import {downloadFile} from '/@/utils/common/renderUtils';
import { useUserStore } from '/@/store/modules/user';
import { ref, reactive } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { useDrawer } from '/@/components/Drawer';
import { useMessage } from '/@/hooks/web/useMessage';
import OpenApiDrawer from './components/OpenApiDrawer.vue';
import { columns, searchFormSchema, superQuerySchema } from './OpenApi.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './OpenApi.api';
const queryParam = reactive<any>({});
// 展开key
const expandedRowKeys = ref<any[]>([]);
//注册model
const [registerModal, {openModal}] = useModal();
const userStore = useUserStore();
const { createMessage } = useMessage();
const API_DOMAIN = import.meta.env.VITE_GLOB_DOMAIN_URL;
const [registerDrawer, { openDrawer }] = useDrawer();
//注册table数据
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
tableProps:{
@@ -84,7 +83,7 @@
],
},
actionColumn: {
width: 120,
width: 200,
fixed:'right'
},
beforeFetch: (params) => {
@@ -130,7 +129,7 @@
* 新增事件
*/
function handleAdd() {
openModal(true, {
openDrawer(true, {
isUpdate: false,
showFooter: true,
});
@@ -139,7 +138,7 @@
* 编辑事件
*/
function handleEdit(record: Recordable) {
openModal(true, {
openDrawer(true, {
record,
isUpdate: true,
showFooter: true,
@@ -149,7 +148,7 @@
* 详情
*/
function handleDetail(record: Recordable) {
openModal(true, {
openDrawer(true, {
record,
isUpdate: true,
showFooter: false,
@@ -176,13 +175,26 @@
/**
* 操作栏
*/
/**
* 复制接口地址
*/
async function handleCopyUrl(record: Recordable) {
const url = API_DOMAIN + '/openapi/call/' + record.requestUrl;
try {
await navigator.clipboard.writeText(url);
createMessage.success('接口地址已复制');
} catch (_e) {
createMessage.error('复制失败，请手动复制');
}
}
function getTableAction(record){
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
auth: 'openapi:open_api:edit'
}
},
]
}

185
jeecgboot-vue3/src/views/openapi/components/AuthDrawer.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
title="接口授权"
width="720px"
destroyOnClose
@ok="handleSubmit"
>
<a-spin :spinning="confirmLoading">
<a-row :gutter="[12, 12]">
<a-col :span="12" v-for="item in apiList" :key="item.id">
<a-card
:class="['auth-api-card', { 'auth-api-card--checked': item.checked }]"
hoverable
:body-style="{ padding: '12px' }"
@click="handleSelect(item)"
>
<div style="display: flex; justify-content: space-between; align-items: center">
<span class="auth-api-name">{{ item.name }}</span>
<a-checkbox v-model:checked="item.checked" @click.stop @change="(e) => handleChange(e, item)" />
</div>
<div style="margin-top: 6px; color: #888; font-size: 12px">
<a-tag :color="getMethodColor(item.requestMethod)">{{ item.requestMethod }}</a-tag>
<span style="margin-left: 4px">{{ item.requestUrl }}</span>
</div>
</a-card>
</a-col>
</a-row>
<div v-if="apiList.length === 0 && !confirmLoading" style="text-align: center; padding: 40px 0; color: #999">
暂无接口数据
</div>
<div v-if="total > 0" style="margin-top: 16px; text-align: right">
<a-pagination
:current="pageNo"
:page-size="pageSize"
:page-size-options="['10', '20', '30']"
:total="total"
show-quick-jumper
show-size-changer
size="small"
@change="handlePageChange"
/>
</div>
</a-spin>
</BasicDrawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { getApiList, getPermissionList, permissionAddFunction } from '../OpenApiAuth.api';
import { useMessage } from '/@/hooks/web/useMessage';
const emit = defineEmits(['register', 'success']);
const { createMessage } = useMessage();
const confirmLoading = ref(false);
const apiAuthId = ref('');
const apiList = ref<any[]>([]);
const selectedRowKeys = ref<string[]>([]);
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
selectedRowKeys.value = [];
apiList.value = [];
pageNo.value = 1;
pageSize.value = 10;
total.value = 0;
apiAuthId.value = data.record?.id || '';
// Load existing permissions
try {
const permRes = await getPermissionList({ apiAuthId: apiAuthId.value });
if (permRes && permRes.length > 0) {
permRes.forEach((item) => {
if (item.ifCheckBox == '1') {
selectedRowKeys.value.push(item.id);
}
});
}
} catch (_e) {
// ignore
}
await reload();
});
async function reload() {
confirmLoading.value = true;
try {
const res = await getApiList({
pageNo: pageNo.value,
pageSize: pageSize.value,
column: 'createTime',
order: 'desc',
});
if (res.success) {
const records = res.result.records || [];
records.forEach((item) => {
item.checked = selectedRowKeys.value.includes(item.id);
});
apiList.value = records;
total.value = res.result.total || 0;
} else {
apiList.value = [];
total.value = 0;
}
} finally {
confirmLoading.value = false;
}
}
function handleSelect(item) {
item.checked = !item.checked;
toggleSelection(item.id, item.checked);
}
function handleChange(e, item) {
toggleSelection(item.id, e.target.checked);
}
function toggleSelection(id: string, checked: boolean) {
const idx = selectedRowKeys.value.indexOf(id);
if (checked && idx === -1) {
selectedRowKeys.value.push(id);
} else if (!checked && idx !== -1) {
selectedRowKeys.value.splice(idx, 1);
}
}
function handlePageChange(page, current) {
pageNo.value = page;
pageSize.value = current;
reload();
}
function getMethodColor(method: string) {
const map = { GET: 'green', POST: 'blue', PUT: 'orange', DELETE: 'red', PATCH: 'purple' };
return map[method] || 'default';
}
async function handleSubmit() {
confirmLoading.value = true;
try {
setDrawerProps({ confirmLoading: true });
const res = await permissionAddFunction({
apiId: selectedRowKeys.value.join(','),
apiAuthId: apiAuthId.value,
});
if (res.success) {
createMessage.success(res.message);
closeDrawer();
emit('success');
} else {
createMessage.warning(res.message);
}
} finally {
confirmLoading.value = false;
setDrawerProps({ confirmLoading: false });
}
}
</script>
<style lang="less" scoped>
.auth-api-card {
transition: all 0.2s;
border: 1px solid #d9d9d9;
&--checked {
border-color: #1890ff;
background-color: #e6f7ff;
}
}
.auth-api-name {
font-weight: 500;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
display: inline-block;
}
</style>

75
jeecgboot-vue3/src/views/openapi/components/OpenApiAuthDrawer.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
:title="title"
width="600px"
destroyOnClose
@ok="handleSubmit"
:showFooter="showFooter"
>
<BasicForm @register="registerForm" />
</BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { BasicForm, useForm } from '/@/components/Form/index';
import { authFormSchema } from '../OpenApiAuth.data';
import { saveOrUpdate } from '../OpenApiAuth.api';
import { useMessage } from '/@/hooks/web/useMessage';
import { USER_INFO_KEY } from '/@/enums/cacheEnum';
import { getAuthCache } from '/@/utils/auth';
const emit = defineEmits(['register', 'success']);
const { createMessage } = useMessage();
const isUpdate = ref(false);
const formDisabled = ref(false);
const showFooter = ref(true);
const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
labelWidth: 100,
schemas: authFormSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 },
});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
await resetFields();
showFooter.value = !!data?.showFooter;
setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
isUpdate.value = !!data?.isUpdate;
formDisabled.value = !data?.showFooter;
if (unref(isUpdate)) {
await setFieldsValue({ ...data.record });
} else {
// New record: set current user
const userData = getAuthCache(USER_INFO_KEY) as any;
await setFieldsValue({
systemUserId: userData?.id || '',
});
}
setProps({ disabled: !data?.showFooter });
});
const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(formDisabled) ? '编辑' : '详情'));
async function handleSubmit() {
try {
const values = await validate();
setDrawerProps({ confirmLoading: true });
const res = await saveOrUpdate(values, isUpdate.value);
if (res.success) {
createMessage.success(res.message);
closeDrawer();
emit('success');
} else {
createMessage.warning(res.message);
}
} finally {
setDrawerProps({ confirmLoading: false });
}
}
</script>

14
jeecgboot-vue3/src/views/openapi/components/OpenApiAuthForm.vue
View File

@@ -5,18 +5,18 @@
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="OpenApiAuthForm">
<a-row>
<a-col :span="24">
<a-form-item label="授权名称" v-bind="validateInfos.name" id="OpenApiAuthForm-name" name="name">
<a-input v-model:value="formData.name" placeholder="请输入授权名称" allow-clear ></a-input>
<a-form-item label="授权对象" v-bind="validateInfos.name" id="OpenApiAuthForm-name" name="name">
<a-input v-model:value="formData.name" placeholder="请输入授权对象" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="AK" v-bind="validateInfos.ak" id="OpenApiAuthForm-ak" name="ak">
<a-input v-model:value="formData.ak" placeholder="请输入AK" disabled allow-clear ></a-input>
<a-form-item label="访问密钥（AK）" v-bind="validateInfos.ak" id="OpenApiAuthForm-ak" name="ak">
<a-input v-model:value="formData.ak" placeholder="自动生成" disabled allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="SK" v-bind="validateInfos.sk" id="OpenApiAuthForm-sk" name="sk">
<a-input v-model:value="formData.sk" placeholder="请输入SK" disabled allow-clear ></a-input>
<a-form-item label="签名密钥（SK）" v-bind="validateInfos.sk" id="OpenApiAuthForm-sk" name="sk">
<a-input v-model:value="formData.sk" placeholder="自动生成" disabled allow-clear ></a-input>
</a-form-item>
</a-col>
<!-- <a-col :span="24">-->
@@ -63,7 +63,7 @@
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = reactive({
name:[{ required: true, message: '请输入授权名称!'},],
name:[{ required: true, message: '请输入授权对象!'},],
systemUserId:[{ required: true, message: '请输入关联系统用户名!'},],
});
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });

269
jeecgboot-vue3/src/views/openapi/components/OpenApiDrawer.vue Normal file
View File

@@ -0,0 +1,269 @@
<template>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
:title="title"
width="90%"
destroyOnClose
@ok="handleSubmit"
:showFooter="showFooter"
>
<!-- 上部：基本信息表单 -->
<BasicForm @register="registerForm" ref="formRef">
<template #whiteListSlot="{ model, field }">
<a-textarea
v-model:value="model[field]"
:rows="5"
placeholder="示例：&#10;192.168.1.100&#10;10.0.0.0/8&#10;172.16.*.*"
:disabled="formDisabled"
/>
<!-- 标签预览 -->
<div v-if="model[field]" style="margin-top: 8px">
<a-tag
v-for="item in parseWhiteList(model[field])"
:key="item"
color="green"
style="margin-bottom: 4px"
>
{{ item }}
</a-tag>
</div>
<!-- 整理按钮 -->
<div v-if="model[field] && !formDisabled" style="margin-top: 4px; text-align: right">
<a-button size="small" @click="formatWhiteList(model, field)">整 理</a-button>
</div>
</template>
</BasicForm>
<!-- 下部：Tabs -->
<a-tabs v-model:activeKey="activeTab" style="margin-top: 16px">
<a-tab-pane key="headers" tab="请求头">
<JVxeTable
keep-source
ref="openApiHeader"
:loading="openApiHeaderTable.loading"
:columns="openApiHeaderTable.columns"
:dataSource="openApiHeaderTable.dataSource"
:height="240"
:disabled="formDisabled"
:rowNumber="true"
:rowSelection="true"
:toolbar="true"
/>
</a-tab-pane>
<a-tab-pane key="params" tab="请求参数">
<JVxeTable
keep-source
ref="openApiParam"
:loading="openApiParamTable.loading"
:columns="openApiParamTable.columns"
:dataSource="openApiParamTable.dataSource"
:height="240"
:disabled="formDisabled"
:rowNumber="true"
:rowSelection="true"
:toolbar="true"
/>
</a-tab-pane>
<a-tab-pane key="body" tab="请求体">
<div style="border: 1px solid #d9d9d9; border-radius: 4px; min-height: 300px">
<CodeEditor v-model:value="bodyContent" mode="application/json" :readonly="formDisabled" />
</div>
</a-tab-pane>
<a-tab-pane key="response" tab="响应配置">
<div style="margin-bottom: 16px">
<h4 style="margin-bottom: 8px">响应示例</h4>
<div style="border: 1px solid #d9d9d9; border-radius: 4px; min-height: 200px">
<CodeEditor v-model:value="responseExample" mode="application/json" :readonly="formDisabled" />
</div>
</div>
<div>
<h4 style="margin-bottom: 8px">响应字段说明</h4>
<JVxeTable
keep-source
ref="responseField"
:loading="responseFieldTable.loading"
:columns="responseFieldTable.columns"
:dataSource="responseFieldTable.dataSource"
:height="240"
:disabled="formDisabled"
:rowNumber="true"
:rowSelection="true"
:toolbar="true"
/>
</div>
</a-tab-pane>
</a-tabs>
</BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { BasicForm, useForm } from '/@/components/Form/index';
import { CodeEditor } from '/@/components/CodeEditor';
import {
formSchema,
openApiHeaderJVxeColumns,
openApiParamJVxeColumns,
responseFieldJVxeColumns,
} from '../OpenApi.data';
import { saveOrUpdate, getGenPath } from '../OpenApi.api';
import { useMessage } from '/@/hooks/web/useMessage';
const emit = defineEmits(['register', 'success']);
const $message = useMessage();
const isUpdate = ref(true);
const formDisabled = ref(false);
const showFooter = ref(true);
const activeTab = ref('headers');
const bodyContent = ref('');
const responseExample = ref('');
const openApiHeader = ref();
const openApiParam = ref();
const responseField = ref();
const openApiHeaderTable = reactive({
loading: false,
dataSource: [] as any[],
columns: openApiHeaderJVxeColumns,
});
const openApiParamTable = reactive({
loading: false,
dataSource: [] as any[],
columns: openApiParamJVxeColumns,
});
const responseFieldTable = reactive({
loading: false,
dataSource: [] as any[],
columns: responseFieldJVxeColumns,
});
const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 12 },
});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
await reset();
showFooter.value = !!data?.showFooter;
setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
isUpdate.value = !!data?.isUpdate;
formDisabled.value = !data?.showFooter;
if (unref(isUpdate)) {
await setFieldsValue({
...data.record,
});
openApiHeaderTable.dataSource = data.record.headersJson ? JSON.parse(data.record.headersJson) : [];
openApiParamTable.dataSource = data.record.paramsJson ? JSON.parse(data.record.paramsJson) : [];
bodyContent.value = data.record.body || '';
responseExample.value = data.record.responseExample || '';
responseFieldTable.dataSource = data.record.responseFieldsJson ? JSON.parse(data.record.responseFieldsJson) : [];
} else {
const requestUrlObj = await getGenPath({});
await setFieldsValue({
requestUrl: requestUrlObj.result,
});
}
setProps({ disabled: !data?.showFooter });
});
const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(formDisabled) ? '编辑' : '详情'));
/** 解析白名单文本为条目数组 */
function parseWhiteList(text: string): string[] {
if (!text) return [];
return text
.split(/[,\n]/)
.map((s) => s.trim())
.filter(Boolean);
}
/** 整理白名单：去空行、去重、每行一个 */
function formatWhiteList(model: any, field: string) {
const items = parseWhiteList(model[field]);
const unique = [...new Set(items)];
model[field] = unique.join('\n');
}
async function reset() {
await resetFields();
activeTab.value = 'headers';
openApiHeaderTable.dataSource = [];
openApiParamTable.dataSource = [];
responseFieldTable.dataSource = [];
bodyContent.value = '';
responseExample.value = '';
}
async function handleSubmit() {
try {
const values = await validate();
setDrawerProps({ confirmLoading: true });
// Collect JVxeTable data
const headerData = await openApiHeader.value?.getTableData();
const paramData = await openApiParam.value?.getTableData();
const responseFieldData = await responseField.value?.getTableData();
const headersJson = headerData?.tableData?.length ? JSON.stringify(headerData.tableData) : null;
const paramsJson = paramData?.tableData?.length ? JSON.stringify(paramData.tableData) : null;
const responseFieldsJson = responseFieldData?.tableData?.length ? JSON.stringify(responseFieldData.tableData) : null;
// Validate body JSON
if (bodyContent.value) {
try {
if (typeof JSON.parse(bodyContent.value) != 'object') {
$message.createMessage.error('JSON格式化错误,请检查输入数据');
return;
}
} catch (e) {
$message.createMessage.error('JSON格式化错误,请检查输入数据');
return;
}
}
// Validate response example JSON
if (responseExample.value) {
try {
JSON.parse(responseExample.value);
} catch (e) {
$message.createMessage.error('响应示例JSON格式错误,请检查输入数据');
return;
}
}
const submitValues = {
...values,
headersJson,
paramsJson,
body: bodyContent.value || null,
responseExample: responseExample.value || null,
responseFieldsJson,
};
await saveOrUpdate(submitValues, isUpdate.value);
closeDrawer();
emit('success');
} finally {
setDrawerProps({ confirmLoading: false });
}
}
</script>
<style lang="less" scoped>
:deep(.ant-input-number) {
width: 100%;
}
:deep(.ant-calendar-picker) {
width: 100%;
}
</style>

1
jeecgboot-vue3/src/views/openapi/components/OpenApiModal.vue
View File

@@ -46,7 +46,6 @@
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { JVxeTable } from '/@/components/jeecg/JVxeTable';
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts';
import { formSchema, openApiHeaderJVxeColumns, openApiParamJVxeColumns } from '../OpenApi.data';
import { saveOrUpdate, queryOpenApiHeader, queryOpenApiParam, getGenPath } from '../OpenApi.api';