diff --git a/src/api/componentTestCase.ts b/src/api/componentTestCase.ts index 4464238..e8f216f 100644 --- a/src/api/componentTestCase.ts +++ b/src/api/componentTestCase.ts @@ -9,3 +9,7 @@ export function getTreeComponents(params?: { name: string, identifier: string, r return axios.get(`${urlPrefix}/componentTestCase/tree/instance`, { params }); } +// 查询单个组件的测试用例列表 +export function getComponentTestCaseList(params?: { componentBaseId: string, identifier: string }) { + return axios.get(`${urlPrefix}componentTestCase/tree/testcase`, { params }); +} \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentTest/index.tsx b/src/pages/componentDevelopment/componentTest/index.tsx index d0ff6a7..32b8ab1 100644 --- a/src/pages/componentDevelopment/componentTest/index.tsx +++ b/src/pages/componentDevelopment/componentTest/index.tsx @@ -46,7 +46,7 @@ const ComponentTest = () => {
{/* 面包屑导航 */} {currentView === 'test' && ( -
+
组件测试 diff --git a/src/pages/componentDevelopment/componentTest/style/testInstance.module.less b/src/pages/componentDevelopment/componentTest/style/testInstance.module.less new file mode 100644 index 0000000..1fb106d --- /dev/null +++ b/src/pages/componentDevelopment/componentTest/style/testInstance.module.less @@ -0,0 +1,338 @@ +.test-instance { + height: 100%; + display: flex; + flex-direction: column; + background: #f0f2f5; + + // 顶部标签栏 + .tabs { + background: #fff; + border-bottom: 1px solid #e5e6eb; + padding: 10px 24px; + display: flex; + align-items: center; + + .tab-left { + display: flex; + gap: 8px; + } + + .tab-center { + flex: 1; + display: flex; + margin-left: 20%; + gap: 8px; + } + + .tab-right { + display: flex; + gap: 8px; + } + } + + // 主内容区 + .main-content { + flex: 1; + display: flex; + overflow: hidden; + background: #f0f2f5; + + // 左侧面板 + .left-panel { + width: 280px; + background: #fff; + border-right: 1px solid #e5e6eb; + display: flex; + flex-direction: column; + + .panel-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + border-bottom: 1px solid #e5e6eb; + font-size: 18px; + font-weight: 700; + color: #1d2129; + + .icon-btn { + cursor: pointer; + color: #4e5969; + font-size: 16px; + + &:hover { + color: #165dff; + } + } + } + + .tree-container { + flex: 1; + overflow-y: auto; + + .tree-list { + .tree-item { + display: flex; + align-items: center; + padding: 8px 5px; + margin-bottom: 4px; + border-radius: 4px; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: #f2f3f5; + } + + .item-icon { + margin-right: 8px; + font-size: 12px; + } + + .item-text { + flex: 1; + font-size: 13px; + color: #4e5969; + } + + .item-actions { + display: flex; + gap: 8px; + opacity: 1; + transition: opacity 0.2s; + + svg { + font-size: 14px; + color: #86909c; + cursor: pointer; + + &:hover { + color: #165dff; + } + } + } + } + } + } + } + + // 中间流程图区域 + .center-panel { + display: flex; + align-items: center; + justify-content: center; + padding: 16px 120px; + overflow: auto; + + .flow-wrapper { + display: flex; + flex-direction: row; + align-items: center; + gap: 0; + + .flow-node { + display: flex; + flex-direction: row; + align-items: center; + + .node-box { + background: #fff; + border-radius: 6px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + min-width: 160px; + + .node-header { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + border-bottom: 1px solid #e5e6eb; + + .node-icon { + font-size: 12px; + } + + .node-title { + font-size: 12px; + font-weight: 500; + color: #1d2129; + } + } + + .node-label { + padding: 4px 10px; + font-size: 10px; + color: #86909c; + text-align: center; + } + + &.node-start { + .node-header { + background: #5a6c7d; + color: #fff; + border-radius: 6px 6px 0 0; + + .node-title { + color: #fff; + } + } + } + + &.node-end { + .node-header { + background: #5a6c7d; + color: #fff; + border-radius: 6px 6px 0 0; + + .node-title { + color: #fff; + } + } + } + + &.node-component { + .node-header { + background: #ffb800; + color: #fff; + border-radius: 6px 6px 0 0; + + .node-title { + color: #fff; + } + } + + .node-body { + padding: 8px; + + .node-function { + font-size: 11px; + font-weight: 500; + color: #1d2129; + margin-bottom: 6px; + } + + .node-params { + display: flex; + flex-direction: column; + gap: 3px; + margin-bottom: 4px; + + .param-item { + display: flex; + align-items: center; + gap: 4px; + + .param-dot { + width: 5px; + height: 5px; + border-radius: 50%; + background: #86909c; + } + + .param-label { + font-size: 10px; + color: #4e5969; + } + } + } + + .param-item-right { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 4px; + + .param-dot { + width: 5px; + height: 5px; + border-radius: 50%; + background: #86909c; + } + + .param-label { + font-size: 10px; + color: #4e5969; + } + } + } + } + } + + .node-connector { + display: flex; + flex-direction: row; + align-items: center; + margin: 0; + + .connector-line { + width: 24px; + height: 2px; + background: #d9d9d9; + } + + .connector-dot { + width: 5px; + height: 5px; + border-radius: 50%; + background: #d9d9d9; + margin-left: -2px; + } + } + } + } + } + + // 右侧面板 + .right-panel { + flex: 1; + background: #fff; + border-left: 1px solid #e5e6eb; + display: flex; + flex-direction: column; + + .panel-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + border-bottom: 1px solid #e5e6eb; + font-size: 14px; + font-weight: 500; + color: #1d2129; + + .header-actions { + display: flex; + gap: 12px; + + .icon-btn { + cursor: pointer; + font-size: 16px; + opacity: 0.6; + transition: opacity 0.2s; + + &:hover { + opacity: 1; + } + } + } + } + + .log-content { + flex: 1; + overflow-y: auto; + padding: 20px; + + .log-empty { + text-align: center; + color: #86909c; + font-size: 13px; + line-height: 1.8; + + p { + margin: 8px 0; + } + } + } + } + } +} diff --git a/src/pages/componentDevelopment/componentTest/testInstance.tsx b/src/pages/componentDevelopment/componentTest/testInstance.tsx index a458bd2..17ed678 100644 --- a/src/pages/componentDevelopment/componentTest/testInstance.tsx +++ b/src/pages/componentDevelopment/componentTest/testInstance.tsx @@ -1,20 +1,197 @@ -import React from 'react'; -import { Button } from '@arco-design/web-react'; -import { IconLeft } from '@arco-design/web-react/icon'; +import React, { useEffect, useState } from 'react'; +import { Button, Space, Tree, Collapse } from '@arco-design/web-react'; +import { IconLeft, IconPlus, IconEdit, IconDelete, IconLink, IconSend } from '@arco-design/web-react/icon'; +import styles from './style/testInstance.module.less'; +import { getComponentDesign } from '@/api/componentDevelopProcess'; + +const CollapseItem = Collapse.Item; const TestInstance = ({ instance, onBack }: { instance: any; onBack: () => void }) => { + const [activeTab, setActiveTab] = useState('link'); + + const getDesign = async () => { + const res: any = await getComponentDesign(instance.id); + console.log('res:', res); + }; + + useEffect(() => { + getDesign(); + }, [instance]); + return ( -
-
- +
+ {/* 顶部标签栏 */} +
+
+ +
+
+ + + + +
+
+
+ +
+ {/* 左侧测试用例列表 */} +
+
+ 测试用例 +
+
+ + }> +
+
+ 测试类型 +
+ + + +
+
+
+ 视频回调jck|ssss +
+ + + +
+
+
+ 短剧题图识别 +
+ + + +
+
+
+ + +
+
+ + {/* 中间流程图区域 */} +
+
+ {/* 开始节点 */} +
+
+
+ 🔧 + 开始 +
+
流程协作接口
+
+
+
+
+
+
+ + {/* 组件节点 */} +
+
+
+ ⭐ + 计算组件#1 +
+
+
lineMove
+
circleMove
+
+
+ + input +
+
+ + strpos ARR +
+
+ + ufNum INT +
+
+ + ufNum INT +
+
+
+ output + +
+
+
+
+
+
+
+
+ + {/* 结束节点 */} +
+
+
+ 📍 + 结束 +
+
流程协作接口
+
+
+
+
+ + {/* 右侧运行日志 */} +
+
+ 运行日志 +
+ 📋 + 📁 + 💾 + 📊 + 🗑️ +
+
+
+
+

连接信息：连接成功！

+

未启动任务或任务已完成

+
+
+
-

测试实例: {instance?.name}

-

实例标识: {instance?.identifier}

-

运行状态: {instance?.runStatus}

-

运行类型: {instance?.runType}

- {/* 这里添加你的测试实例内容 */}
); }; diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 85303c1..20dffff 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -11,7 +11,11 @@ import { localGet, localRemove, openWindow } from '@/utils/common'; import logoImage from '@/public/assets/logo.png'; import store from '@/store'; import { updateUserInfo } from '@/store/user'; -import { getMyComponents, getPubComponents, getTeamComponents } from '@/api/components'; +import { + getMyComponents, + getPubComponents, + getTeamComponents, +} from '@/api/components'; import { getPublishPage } from '@/api/flow'; import dayjs from 'dayjs'; @@ -33,7 +37,7 @@ function Login() { { promise: getMyComponents(), key: 'myLibs' }, { promise: getPubComponents(), key: 'pubLibs' }, { promise: getTeamComponents(), key: 'teamLibs' }, - { promise: getPublishPage(), key: 'pubFlow' } + { promise: getPublishPage(), key: 'pubFlow' }, // {promise: appId ? getMineSubs({id: appId}) : Promise.resolve(null), key: 'myFlow'}, // {promise: getEventList(), key: 'eventList'} ]; @@ -44,7 +48,7 @@ function Login() { teamLibs: null, pubFlow: null, // myFlow: null, - updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss') + updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), }; const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}'); @@ -79,7 +83,10 @@ function Login() { // 更新本地存储数据 obj[key] = res?.data || null; - sessionStorage.setItem(`compLibs${userInfo.userId}`, JSON.stringify(obj)); + sessionStorage.setItem( + `compLibs${userInfo.userId}`, + JSON.stringify(obj) + ); } catch (error) { console.error(`加载${key}失败:`, error); } @@ -92,9 +99,31 @@ function Login() { const handleLogin = async () => { const url = new URL(window.location.href); const code = url.searchParams.get('code'); + const token = url.searchParams.get('token'); const { origin, pathname } = window.location; - setIsNeedLogin(code === null); + setIsNeedLogin(code === null && token === null); + + // 处理 URL 中的 token 参数 + if (token) { + try { + // 记录登录状态 + localStorage.setItem('userStatus', 'login'); + // 保存 Token + setToken(token); + // 获取用户信息 + // await fetchUserInfo(); + + // 清除 URL 中的 token 参数 + url.searchParams.delete('token'); + window.history.replaceState({}, '', url.pathname + url.search); + // 跳转首页 + window.location.href = '/dashboard/workplace'; + return; + } catch (error) { + console.error('Token login error:', error); + } + } if (code) { const callbackUrl = `${origin}/`; @@ -102,7 +131,7 @@ function Login() { // 根据code向后端获取token const res: any = await getToken({ authCode: code, - callbackUrl + callbackUrl, } as any); if (res && res.code === 200) { @@ -112,13 +141,15 @@ function Login() { // await userStore.info(); // 如果有对应的Redux操作，可以在这里dispatch if (localGet('system_name') === 'pc') { - openWindow(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/isdp/`, { - target: '_self' - }); + openWindow( + `${window.location.protocol}//${window.location.hostname}:${window.location.port}/isdp/`, + { + target: '_self', + } + ); localRemove('system_name'); return; - } - else { + } else { fetchUserInfo(); router.push('/dashboard/workplace'); } @@ -139,12 +170,10 @@ function Login() {
<>
- -
工业软件组件化构建开发与运行支撑环境
+ +
+ 工业软件组件化构建开发与运行支撑环境 +
@@ -159,8 +188,12 @@ function Login() {

获取授权中...

-
- +
+ @@ -182,4 +215,4 @@ function Login() { Login.displayName = 'LoginPage'; -export default Login; \ No newline at end of file +export default Login;