@bos-alpha/data
Version:
数据管理
527 lines (526 loc) • 36.3 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { Form, Input, Select, Radio, Button, List, message, Checkbox, Tooltip } from 'antd';
import styled from '@emotion/styled';
import { uuid, Icon, prefixCls, Modal } from '@bos-alpha/common';
import * as api from '@bos-alpha/common/lib/services';
import store from '../../store';
import { ModalTitle, FormBox, FooterButtons, exitConfirm } from '../import-steps';
import { AuthType } from '../auth-type';
import { KeyValGenerator } from '../key-val-generator';
import { PageGenerator } from '../key-val-generator/page';
import { BodyType } from '../body-type';
import { ShowMore } from '../show-more';
import { getAuthorization, getKvObject } from '../../utils';
var Item = Form.Item;
/**
* 导入任务api数据源配置
* @returns
*/
export var StepThree = function () {
var _a = store(), siteId = _a.siteId, taskId = _a.taskId, authId = _a.authId, apiAuthInfo = _a.apiAuthInfo, setState = _a.setState, preStep = _a.preStep, nextStep = _a.nextStep, setVisible = _a.setVisible;
// 当前任务所有数据源
var _b = useState([]), apiList = _b[0], setApiList = _b[1];
// 当前选中数据源
var _c = useState(''), currentKey = _c[0], setCurrentKey = _c[1];
// Digest Auth认证高级设置
var digestAuthInfo = useRef();
var _d = useState('raw'), initBodyType = _d[0], setInitBodyType = _d[1];
// 认证方式 用于编辑时界面更新
var _e = useState({ type: 'none' }), initAuthType = _e[0], setInitAuthType = _e[1];
var _f = useState(false), checked = _f[0], setChecked = _f[1];
var scrollRef = useRef();
var form = Form.useForm()[0];
useEffect(function () {
// 获取当前任务所有创建的api
getTaskApi();
}, []); // eslint-disable-line
var getTaskApi = function () { return __awaiter(void 0, void 0, void 0, function () {
var res, list;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, api.getDataImportDatasets({
params: {
taskId: taskId
}
})];
case 1:
res = _a.sent();
if (res.length > 0) {
list = res
.filter(function (item) { return item.type === 'API'; })
.map(function (item) { return ({
title: (item.name || '').split('.').slice(-1)[0],
key: item.id,
id: item.id,
// 设置每个数据源的配置信息 用于表单回填
params: item.params
}); });
setApiList(list);
parseJson2Form(list[0]);
}
else {
addNewRow(true);
}
return [2 /*return*/];
}
});
}); };
// 解析接口数据转为FormItem
var parseJson2Form = function (item) {
setCurrentKey(item.key);
var _a = item.params, authorization = _a.authorization, body = _a.body, _b = _a.headers, headers = _b === void 0 ? {} : _b, method = _a.method, name = _a.name, params = _a.params, path = _a.path, responseType = _a.responseType, url = _a.url, paging = _a.paging;
if (paging) {
setChecked(true);
}
// 认证方式
var _c = authorization || {}, _d = _c.type, type = _d === void 0 ? 'none' : _d, authRest = __rest(_c, ["type"]);
// OAuth2.0特殊处理
if (type === 'token') {
var _e = (authRest.token || '').split(' '), headerPrefix = _e[0], token = _e[1];
if (token) {
authRest.headerPrefix = headerPrefix;
authRest.token = token;
}
}
else if (type === 'digest') {
var username = authRest.username, password = authRest.password, digestRest = __rest(authRest, ["username", "password"]);
setState({
digestInfo: digestRest
});
}
setInitAuthType({ type: type });
// headers
var bodyType = headers['Content-Type'] === 'multipart/form-data'
? 'form-data'
: 'raw';
var reqHeaders = {};
Object.keys(headers).forEach(function (key) {
if (key !== 'Content-Type') {
reqHeaders[key] = headers[key];
}
});
setInitBodyType(bodyType);
form.setFieldsValue(__assign(__assign({ name: name, method: method, url: url, params: params, authType: type }, authRest), { headers: reqHeaders, bodyType: bodyType, body: body, responseType: responseType, path: path, paging: paging }));
};
// 添加新数据源
var addNewRow = function (isInit) {
var key = uuid();
setApiList(__spreadArray(__spreadArray([], (isInit ? [] : apiList), true), [
{
title: '数据源名称',
key: key,
params: {}
}
], false));
setInitAuthType({ type: 'none' });
setInitBodyType('raw');
setCurrentKey(key);
setChecked(false);
form.resetFields();
};
// 输入数据源名称
var onNameInput = function (e) {
setApiList(apiList.map(function (item) {
if (item.key === currentKey) {
item.title = e.target.value || '数据源名称';
}
return item;
}));
};
// 退出
var onExit = function (type) {
exitConfirm(__assign(__assign({}, (type === 'preStep'
? {
title: '返回上一步',
content: '未保存的配置将会丢失，确定返回上一步？'
}
: {})), { onOk: function () {
if (type === 'preStep') {
preStep();
}
else {
setVisible(false);
}
} }));
};
// 拷贝认证信息
var onAuthCopy = function () {
if (apiAuthInfo.type) {
console.log(apiAuthInfo);
var type = apiAuthInfo.type, authRest = __rest(apiAuthInfo, ["type"]);
// OAuth2.0特殊处理
if (type === 'token') {
var _a = (authRest.token || '').split(' '), headerPrefix = _a[0], token = _a[1];
if (token) {
authRest.headerPrefix = headerPrefix;
authRest.token = token;
}
}
setInitAuthType({ type: type });
form.setFieldsValue(__assign({ authType: type }, authRest));
}
else {
return message.warning('暂无认证信息');
}
};
// 移除数据源 通用接口移除已入库的数据源
var onRemove = function (item) {
if (apiList.length <= 1)
return message.warning('必须保留一项');
Modal.confirm({
title: '删除数据源',
content: "\u5C06\u8981\u5220\u9664\u6570\u636E\u6E90\u201C".concat(item.title, "\u201D\uFF0C\u662F\u5426\u786E\u5B9A\uFF1F"),
centered: true,
onOk: function () { return __awaiter(void 0, void 0, void 0, function () {
var newList;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!item.id) return [3 /*break*/, 2];
return [4 /*yield*/, api.deleteEntity('importTables', item.id, {
params: {
delRelation: true
}
})];
case 1:
_a.sent();
_a.label = 2;
case 2:
newList = apiList.filter(function (el) { return el.key !== item.key; });
setApiList(newList);
// 删除即当前选中
if (item.key === currentKey) {
parseJson2Form(newList[0]);
}
return [2 /*return*/, Promise.resolve()];
}
});
}); }
});
};
// 切换数据源
var onApiSwitch = function (item) { return __awaiter(void 0, void 0, void 0, function () {
var curApi;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (item.key === currentKey)
return [2 /*return*/];
curApi = apiList.find(function (item) { return item.key === currentKey; });
if (!(curApi && !curApi.id)) return [3 /*break*/, 2];
return [4 /*yield*/, onSave('save')];
case 1:
_a.sent();
_a.label = 2;
case 2:
parseJson2Form(item);
return [2 /*return*/];
}
});
}); };
// 校验并新增/编辑一条api数据源
var saveApiSource = function (curApiId, item) {
return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
var checkRes, err_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, api.postSitesApiTest(siteId, {
data: __assign(__assign({}, item), (curApiId
? {
id: curApiId
}
: {})),
params: {
taskId: taskId,
save: true
}
})];
case 1:
checkRes = _a.sent();
console.log(checkRes);
if (checkRes.id) {
resolve(curApiId || checkRes.id);
}
if (!checkRes.data && checkRes.message) {
Modal.error({
title: '数据源配置错误，未取得数据，请检查请求参数或数据路径',
content: _jsx(ShowMore, { children: checkRes.message }, void 0)
});
reject();
return [2 /*return*/];
}
resolve(curApiId || checkRes.id);
return [3 /*break*/, 3];
case 2:
err_1 = _a.sent();
reject(err_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); });
};
// save.仅保存
// add.创建新行 须保存
// next.保存并下一步
var onSave = function (type) {
return new Promise(function (resolve, reject) { return __awaiter(void 0, void 0, void 0, function () {
var vals, name_1, method, url, params, authType, headers, bodyType, body, responseType, path, oldPaging, paging, rep, authorization, itemConfig_1, curApiId, importTablesId_1, err_2;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 3, , 4]);
return [4 /*yield*/, form.validateFields()];
case 1:
vals = _a.sent();
name_1 = vals.name, method = vals.method, url = vals.url, params = vals.params, authType = vals.authType, headers = vals.headers, bodyType = vals.bodyType, body = vals.body, responseType = vals.responseType, path = vals.path, oldPaging = vals.paging;
paging = undefined;
// 使用分页
if (checked) {
paging = __assign({}, oldPaging);
if (!paging.maxPages || paging.maxPages === '不限') {
delete paging.maxPages;
}
rep = /^[0-9]*$/;
if (!paging.pageNumber) {
return [2 /*return*/, message.error('分页 pageNumber 起始值不能为空')];
}
else if (!rep.test(paging.pageNumber)) {
return [2 /*return*/, message.error('分页 pageNumber 必须是数字')];
}
if (paging.maxPages && !rep.test(paging.maxPages)) {
return [2 /*return*/, message.error('分页 pageNumber 最大值必须是数字')];
}
if (!paging.pageSize) {
return [2 /*return*/, message.error('分页 pageSize 不能为空')];
}
else if (!rep.test(paging.pageSize)) {
return [2 /*return*/, message.error('分页 pageSize 必须是数字')];
}
paging = __assign(__assign({}, paging), { pageSize: Number(paging.pageSize), pageNumber: Number(paging.pageNumber) });
}
authorization = getAuthorization(authType, vals, digestAuthInfo.current);
itemConfig_1 = {
authorization: __assign(__assign({}, authorization), (authId ? { authId: authId } : {})),
name: name_1,
method: method,
url: url,
params: getKvObject(params),
headers: __assign(__assign({}, getKvObject(headers)), { 'Content-Type': bodyType === 'form-data'
? 'multipart/form-data'
: 'application/json' }),
body: body || '{}',
responseType: responseType,
path: path,
paging: paging
};
curApiId = apiList.find(function (item) { return item.key === currentKey; }).id ||
'';
return [4 /*yield*/, saveApiSource(curApiId, itemConfig_1)];
case 2:
importTablesId_1 = _a.sent();
// 暂存认证信息
setState({
apiAuthInfo: authorization
});
// 保存
setApiList(apiList.map(function (item) {
if (item.key === currentKey) {
// 已入库的数据源
item.id = importTablesId_1;
// 已入库的数据源配置
item.params = itemConfig_1;
}
return item;
}));
if (type === 'add') {
scrollRef.current.scrollTo(0, 0);
addNewRow();
}
else if (type === 'next') {
nextStep();
}
if (type === 'save')
message.success('保存成功');
resolve();
return [3 /*break*/, 4];
case 3:
err_2 = _a.sent();
console.log(err_2);
if (err_2 && err_2.errorFields) {
message.error('信息输入不完整！');
}
reject();
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); });
};
return (_jsxs("div", { children: [_jsx(ModalTitle, __assign({ current: 2, onClose: function () { return onExit('close'); } }, { children: "\u7B2C\u4E09\u65B9\u5E73\u53F0API\u63A5\u53E3\u6570\u636E\u6E90" }), void 0), _jsxs(Container, { children: [_jsx("div", __assign({ className: "page-left" }, { children: _jsxs(FormBox, __assign({ offset: "false" }, { children: [_jsx(List, __assign({ header: "\u6570\u636E\u6E90" }, { children: apiList.map(function (item, index) { return (_jsxs(List.Item, __assign({ className: "list-item ".concat(item.key === currentKey ? 'active' : '') }, { children: [_jsx("div", __assign({ className: "api-name ellipsis", onClick: function () { return onApiSwitch(item); } }, { children: item.title }), void 0), _jsx(Icon, { className: "icon", type: "iconicon_subtracting", onClick: function () { return onRemove(item); } }, void 0)] }), item.key)); }) }), void 0), _jsxs("div", __assign({ className: "add-btn", onClick: function () { return onSave('add'); } }, { children: [_jsx(Icon, { className: "icon", type: "iconicon_addto" }, void 0), _jsx("span", { children: "\u6DFB\u52A0\u65B0\u63A5\u53E3\u6570\u636E\u6E90" }, void 0)] }), void 0)] }), void 0) }), void 0), _jsx("div", __assign({ className: "page-right" }, { children: _jsx(FormBox, __assign({ ref: scrollRef }, { children: _jsxs(Form, __assign({ form: form, labelCol: { span: 4 }, wrapperCol: { span: 20 }, labelAlign: "left", colon: false }, { children: [_jsxs("div", __assign({ className: "title" }, { children: ["\u57FA\u672C\u4FE1\u606F", _jsxs("span", __assign({ style: {
float: 'right',
color: 'rgb(40, 120, 255)'
} }, { children: ["\u65F6\u95F4\u53C2\u6570", _jsx(Tooltip, __assign({ title: '如对接的第三方接口需要传入开始时间和结束时间参数，调用接口时可以使用内置的时间函数lastTime()和now()，这两个时间函数可以用于url路径参数的值、Headers的值，Body的值。使用时采用大括号引用，如{lastTime()}。now()函数为本次对接任务调用本数据源接口的当前时间。lastTime()获取上一次任务运行调用本数据源接口时，调用now()函数的返回时间值。两个函数可以带一个string类型的日期时间格式参数，可以设置为"yyyy-MM-dd HH:mm:ss"等形式，如不带参数，则返回时间戳。任务运行第一次调用lastTime()的返回的时间是1970年1月1日0时0分0秒。' }, { children: _jsx(Icon, { type: 'iconicon_explain', style: {
color: 'rgb(40, 120, 255)',
marginLeft: 5,
cursor: 'pointer'
} }, void 0) }), void 0)] }), void 0)] }), void 0), _jsx(Item, __assign({ name: "name", label: "\u6570\u636E\u6E90\u540D\u79F0", required: true, rules: [
{
validator: function (rule, val) {
if (!val || val.trim() === '') {
return Promise.reject('请输入数据源名称');
}
return Promise.resolve();
}
}
] }, { children: _jsx(Input, { placeholder: "\u8BF7\u8F93\u5165\u6570\u636E\u540D\u79F0", onInput: onNameInput, maxLength: 50 }, void 0) }), void 0), _jsx(Item, __assign({ name: "method", label: "\u63A5\u53E3\u7C7B\u578B", initialValue: "GET", rules: [
{
required: true,
message: '请选择接口类型'
}
] }, { children: _jsx(Select, { options: [
{
label: 'GET',
value: 'GET'
},
{
label: 'POST',
value: 'POST'
}
], placeholder: "\u8BF7\u9009\u62E9\u63A5\u53E3\u7C7B\u578B" }, void 0) }), void 0), _jsx(Item, __assign({ name: "url", label: "URL", required: true, rules: [
{
validator: function (rule, val) {
if (!val || val.trim() === '') {
return Promise.reject('请输入URL');
}
else if (!/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/.test(val)) {
return Promise.reject('请输入正确的URL路径');
}
return Promise.resolve();
}
}
] }, { children: _jsx(Input.TextArea, { placeholder: "\u8BF7\u8F93\u5165URL", allowClear: true }, void 0) }), void 0), _jsxs("div", __assign({ className: "title", style: {
display: 'flex',
justifyContent: 'space-between'
} }, { children: [_jsx("span", { children: "\u5206\u9875" }, void 0), _jsxs("span", { children: [_jsx(Checkbox, __assign({ checked: checked, onChange: function (e) {
setChecked(e.target.checked);
} }, { children: "\u4F7F\u7528\u5206\u9875" }), void 0), _jsx(Tooltip, __assign({ title: '需要分页时，可以使用以下参数。接口调用使用输入参数时以{}，包围如{pageSize}；输出参数用于后台处理时获取对象总数等信息' }, { children: _jsx(Icon, { type: 'iconicon_explain', style: {
color: 'rgb(40, 120, 255)',
cursor: 'pointer'
} }, void 0) }), void 0)] }, void 0)] }), void 0), checked && (_jsx(Item, __assign({ name: "paging", initialValue: {
pageNumber: 1,
maxPages: '不限',
pageSize: 100
}, wrapperCol: { span: 24 } }, { children: _jsx(PageGenerator, {}, void 0) }), void 0)), _jsx("div", __assign({ className: "title" }, { children: "\u53C2\u6570" }), void 0), _jsx(Item, __assign({ name: "params", label: "URL\u8DEF\u5F84\u53C2\u6570" }, { children: _jsx(KeyValGenerator, {}, void 0) }), void 0), _jsxs("div", __assign({ className: "title" }, { children: ["\u8BA4\u8BC1", apiAuthInfo.type &&
apiList.findIndex(function (item) { return item.key === currentKey; }) > 0 ? (_jsx("span", __assign({ className: "copy-btn", onClick: onAuthCopy }, { children: "\u4ECE\u524D\u4E00\u4E2A\u63A5\u53E3\u590D\u5236\u8BA4\u8BC1\u4FE1\u606F" }), void 0)) : null] }), void 0), _jsx(AuthType, { initAuthType: initAuthType, onDigestSave: function (vals) {
return (digestAuthInfo.current = vals);
} }, void 0), _jsx("div", __assign({ className: "title" }, { children: "Headers" }), void 0), _jsx(Item, __assign({ name: "headers", label: "headers" }, { children: _jsx(KeyValGenerator, {}, void 0) }), void 0), _jsx("div", __assign({ className: "title" }, { children: "Body" }), void 0), _jsx(BodyType, { initBodyType: initBodyType }, void 0), _jsx("div", __assign({ className: "title" }, { children: "\u7ED3\u679C" }), void 0), _jsx(Item, __assign({ name: "responseType", label: "\u6570\u636E\u5F62\u5F0F", initialValue: "json" }, { children: _jsxs(Radio.Group, __assign({ onChange: function (e) {
form.setFieldsValue({
path: e.target.value === 'json'
? '$.data'
: '/obj'
});
form.validateFields(['path']);
} }, { children: [_jsx(Radio, __assign({ value: "xml" }, { children: "xml" }), void 0), _jsx(Radio, __assign({ value: "json" }, { children: "json" }), void 0)] }), void 0) }), void 0), _jsx(Item, __assign({ name: "path", label: "\u6570\u636E\u8DEF\u5F84", initialValue: "$.data", required: true, rules: [
{
validator: function (rule, val) {
var responseType = form.getFieldValue('responseType');
var msg = "\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u6570\u636E\u8DEF\u5F84\uFF0C".concat(responseType === 'json'
? 'json使用JSONPath格式'
: 'xml使用XPath');
if (!val) {
return Promise.reject(msg);
}
else if (val &&
responseType === 'json') {
if (!/^\$\./.test(val)) {
return Promise.reject(msg);
}
}
else if (val &&
responseType === 'xml') {
if (!/^\/obj$|^\/obj\//.test(val)) {
return Promise.reject(msg);
}
}
return Promise.resolve();
}
}
] }, { children: _jsx(Input, { placeholder: "xml\u4F7F\u7528XPath\uFF0Cjson\u4F7F\u7528JSONPath\u683C\u5F0F" }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0), _jsxs(FooterButtons, { children: [_jsx(Button, __assign({ className: "pre-step", type: "default", shape: "round", onClick: function () { return onExit('preStep'); } }, { children: "\u4E0A\u4E00\u6B65" }), void 0), _jsx(Button, __assign({ type: "primary", shape: "round", onClick: function () { return onSave('save'); } }, { children: "\u4FDD\u5B58" }), void 0), _jsx(Button, __assign({ type: "primary", shape: "round", onClick: function () { return onSave('next'); } }, { children: "\u4FDD\u5B58\u5E76\u4E0B\u4E00\u6B65" }), void 0)] }, void 0)] }, void 0)] }, void 0));
};
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n border: 1px solid #dfdfdf;\n & > .page-left {\n width: 218px;\n .", "-list-split .", "-list-header {\n font-size: 14px;\n font-weight: 500;\n padding: 10px 16px;\n }\n .list-item {\n padding: 9px 16px;\n &.active {\n background: rgba(40, 120, 255, 0.1);\n }\n .api-name {\n cursor: pointer;\n }\n .ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .icon {\n color: #ff0000;\n font-size: 16px;\n cursor: pointer;\n }\n }\n .add-btn {\n padding: 9px 16px;\n color: #2878ff;\n cursor: pointer;\n & > .icon {\n margin-right: 4px;\n }\n }\n }\n & > .page-right {\n flex: 1;\n padding-left: 20px;\n border-left: 1px solid #dedede;\n overflow: hidden;\n .title {\n font-size: 14px;\n font-weight: 500;\n padding: 10px 0;\n position: relative;\n & > .copy-btn {\n position: absolute;\n right: 0;\n top: 10px;\n color: #2878ff;\n font-weight: 400;\n font-size: 13px;\n cursor: pointer;\n }\n }\n }\n"], ["\n display: flex;\n border: 1px solid #dfdfdf;\n & > .page-left {\n width: 218px;\n .", "-list-split .", "-list-header {\n font-size: 14px;\n font-weight: 500;\n padding: 10px 16px;\n }\n .list-item {\n padding: 9px 16px;\n &.active {\n background: rgba(40, 120, 255, 0.1);\n }\n .api-name {\n cursor: pointer;\n }\n .ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .icon {\n color: #ff0000;\n font-size: 16px;\n cursor: pointer;\n }\n }\n .add-btn {\n padding: 9px 16px;\n color: #2878ff;\n cursor: pointer;\n & > .icon {\n margin-right: 4px;\n }\n }\n }\n & > .page-right {\n flex: 1;\n padding-left: 20px;\n border-left: 1px solid #dedede;\n overflow: hidden;\n .title {\n font-size: 14px;\n font-weight: 500;\n padding: 10px 0;\n position: relative;\n & > .copy-btn {\n position: absolute;\n right: 0;\n top: 10px;\n color: #2878ff;\n font-weight: 400;\n font-size: 13px;\n cursor: pointer;\n }\n }\n }\n"])), prefixCls, prefixCls);
var templateObject_1;