feat: 更新样式和组件,优化用户界面

This commit is contained in:
zhanghao 2026-08-28 10:47:25 +08:00
parent 7225f7ea60
commit 28639f0771
10 changed files with 590 additions and 62 deletions

View File

@ -3,17 +3,17 @@
* Keep surfaces on one base color and express hierarchy through paired shadows. * Keep surfaces on one base color and express hierarchy through paired shadows.
*/ */
:root { :root {
--neu-bg: #e0e5ec; --neu-bg: #e7ecef;
--neu-shadow-light: rgba(255, 255, 255, 0.82); --neu-shadow-light: rgba(255, 255, 255, 0.88);
--neu-shadow-dark: rgba(163, 177, 198, 0.58); --neu-shadow-dark: rgba(164, 178, 187, 0.56);
--neu-text-primary: #344054; --neu-text-primary: #263840;
--neu-text-secondary: #566273; --neu-text-secondary: #52636b;
--neu-text-muted: #7a8797; --neu-text-muted: #839198;
--neu-primary: #465a9b; --neu-primary: #167c80;
--neu-primary-strong: #38497f; --neu-primary-strong: #0e5e63;
--neu-danger: #b84a52; --neu-danger: #bd5e59;
--neu-success: #397a68; --neu-success: #2d7d68;
--neu-warning: #a66a2c; --neu-warning: #a96d2b;
--neu-radius-sm: 8px; --neu-radius-sm: 8px;
--neu-radius-md: 12px; --neu-radius-md: 12px;
--neu-radius-lg: 16px; --neu-radius-lg: 16px;
@ -22,7 +22,7 @@
--neu-shadow-raised-hover: 9px 9px 18px var(--neu-shadow-dark), -9px -9px 18px var(--neu-shadow-light); --neu-shadow-raised-hover: 9px 9px 18px var(--neu-shadow-dark), -9px -9px 18px var(--neu-shadow-light);
--neu-shadow-inset: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light); --neu-shadow-inset: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
--neu-shadow-pressed: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light); --neu-shadow-pressed: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
--neu-focus-ring: 0 0 0 2px rgba(70, 90, 155, 0.32); --neu-focus-ring: 0 0 0 2px rgba(22, 124, 128, 0.28);
--el-bg-color: var(--neu-bg); --el-bg-color: var(--neu-bg);
--el-bg-color-page: var(--neu-bg); --el-bg-color-page: var(--neu-bg);
@ -72,18 +72,18 @@
} }
html.dark { html.dark {
--neu-bg: #292d34; --neu-bg: #293337;
--neu-shadow-light: rgba(69, 75, 86, 0.72); --neu-shadow-light: rgba(74, 87, 92, 0.68);
--neu-shadow-dark: rgba(12, 14, 18, 0.72); --neu-shadow-dark: rgba(11, 16, 18, 0.78);
--neu-text-primary: #edf0f5; --neu-text-primary: #edf4f3;
--neu-text-secondary: #c4cad4; --neu-text-secondary: #c4d0d0;
--neu-text-muted: #9aa3b1; --neu-text-muted: #98a7a8;
--neu-primary: #8999d5; --neu-primary: #6fc3be;
--neu-primary-strong: #9eabe0; --neu-primary-strong: #8bd3cd;
--neu-danger: #df858b; --neu-danger: #e28a83;
--neu-success: #71b6a2; --neu-success: #73bea2;
--neu-warning: #d7a164; --neu-warning: #d8a465;
--neu-focus-ring: 0 0 0 2px rgba(137, 153, 213, 0.36); --neu-focus-ring: 0 0 0 2px rgba(111, 195, 190, 0.34);
--el-bg-color: var(--neu-bg); --el-bg-color: var(--neu-bg);
--el-bg-color-page: var(--neu-bg); --el-bg-color-page: var(--neu-bg);
--el-bg-color-overlay: var(--neu-bg); --el-bg-color-overlay: var(--neu-bg);
@ -855,3 +855,520 @@ body {
max-width: calc(100vw - 28px); max-width: calc(100vw - 28px);
} }
} }
@media (max-width: 480px) {
#app .page-container .row-cards {
grid-template-columns: 1fr;
}
}
/* Cockpit keeps a separate full-screen shell, but uses the same tactile
* language as the rest of the application. */
#app .cockpit-shell .header-container,
#app .cockpit-shell .page-container,
#app .cockpit-shell .page-container > .left-container,
#app .cockpit-shell .page-container > .center-container,
#app .cockpit-shell .page-container > .right-container,
#app .cockpit-shell .page-container .task-container,
#app .cockpit-shell .page-container .alarm-container,
#app .cockpit-shell .page-container .map-container,
#app .cockpit-shell .page-container .map-box,
#app .cockpit-shell .page-container .video-container,
#app .cockpit-shell .page-container .single-video-container {
border-color: transparent !important;
background: var(--neu-bg) !important;
color: var(--neu-text-primary) !important;
}
#app .cockpit-shell .header-container {
margin: 0;
padding: 0 18px;
}
#app .cockpit-shell .application-title,
#app .cockpit-shell .date,
#app .cockpit-shell .container-title,
#app .cockpit-shell .map-container .title,
#app .cockpit-shell .page-container .title,
#app .cockpit-shell .page-container .robot-state {
color: var(--neu-primary) !important;
}
#app .cockpit-shell .binary-strip {
color: var(--neu-text-muted) !important;
opacity: 0.65;
}
#app .cockpit-shell .nav-btn,
#app .cockpit-shell .page-container .robot-box .robot,
#app .cockpit-shell .page-container .task-box,
#app .cockpit-shell .page-container .alarm-box,
#app .cockpit-shell .page-container .btn-container {
border: 0 !important;
border-radius: var(--neu-radius-sm) !important;
background: var(--neu-bg) !important;
color: var(--neu-text-secondary) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .cockpit-shell .nav-btn:hover,
#app .cockpit-shell .nav-btn.active,
#app .cockpit-shell .page-container .robot-box .robot:hover,
#app .cockpit-shell .page-container .robot-box .robot.active,
#app .cockpit-shell .page-container .btn-container:hover {
border-color: transparent !important;
background: var(--neu-bg) !important;
color: var(--neu-primary) !important;
box-shadow: var(--neu-shadow-pressed) !important;
}
#app .cockpit-shell .page-container .robot-box .bot-name,
#app .cockpit-shell .page-container .robot-box .robot .bot-name,
#app .cockpit-shell .page-container .item-title,
#app .cockpit-shell .page-container .item-detail,
#app .cockpit-shell .page-container .alarm-info {
color: var(--neu-text-secondary) !important;
}
#app .cockpit-shell .page-container .right-container,
#app .cockpit-shell .page-container .left-container {
padding: 16px !important;
}
/* The flow header and side panels are framed tools rather than flat white
* strips, which keeps the editor legible while matching the application shell. */
#app .page__container > .el-header,
#app .page__container > .container > .el-aside,
#app .page__container > .container > .el-main {
border-color: transparent !important;
background: var(--neu-bg) !important;
color: var(--neu-text-primary);
}
#app .page__container > .container > .el-aside {
border-radius: var(--neu-radius-md) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .page .flow-node-card,
#app .page .group__container,
#app .page .node__container {
border-color: transparent !important;
background: var(--neu-bg);
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .page .terminal-node__icon,
#app .page .condition-summary__item,
#app .page .loop-body-count,
#app .page .child__container {
border-color: transparent !important;
background: var(--neu-bg) !important;
box-shadow: var(--neu-shadow-inset) !important;
}
#app .page .flow-node-card,
#app .page .node__container {
border-left-color: var(--node-accent, var(--neu-primary)) !important;
}
#app .page .terminal-node__title,
#app .page .condition-summary__title,
#app .page .loop-body-title {
color: var(--neu-text-primary) !important;
}
#app .page .terminal-node__description,
#app .page .condition-summary__text,
#app .page .flow-node-executor {
color: var(--neu-text-muted) !important;
}
/* Authentication and lock views use the same neutral canvas on every entry
* point, including the native controls rendered outside Element Plus. */
#app .login,
#app .register,
#app .lock-container {
padding: 24px;
background: var(--neu-bg) !important;
color: var(--neu-text-primary) !important;
}
#app .login-form,
#app .register-form,
#app .lock-card {
overflow: hidden;
box-shadow: var(--neu-shadow-raised-hover), var(--neu-shadow-inset) !important;
}
#app .login-form .el-form-item,
#app .register-form .el-form-item {
margin-bottom: 19px;
}
#app .login-form .el-button--primary,
#app .register-form .el-button--primary,
#app .unlock-btn {
min-height: 44px;
border-radius: var(--neu-radius-md) !important;
background: var(--neu-primary) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .login-form .el-button--primary:hover,
#app .register-form .el-button--primary:hover,
#app .unlock-btn:hover:not(:disabled) {
background: var(--neu-primary-strong) !important;
}
#app .lock-icon {
background: var(--neu-bg) !important;
color: var(--neu-primary) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
@media (max-width: 900px) {
#app .cockpit-shell .application-title {
font-size: 17px;
letter-spacing: 1px;
}
#app .cockpit-shell .binary-strip {
display: none;
}
}
/* Shared business surfaces. These selectors intentionally target the page
* shells used across modules so local feature styles can keep their layout. */
#app .app-main > .app-container,
#app .app-main > .page-container,
#app .app-main > .container,
#app .app-main > .page,
#app .app-main > .robot-device-page,
#app .app-main > .robot-page,
#app .app-main > .is-container,
#app .app-main > .im-container,
#app .app-main > .main-workspace,
#app .app-main > .box-container {
min-height: 100%;
border: 0 !important;
border-radius: var(--neu-radius-lg) !important;
background: var(--neu-bg) !important;
color: var(--neu-text-primary);
}
#app .app-main > .app-container {
padding: 22px !important;
box-shadow: var(--neu-shadow-inset) !important;
}
#app .app-main > .page-container,
#app .app-main > .container,
#app .app-main > .main-workspace,
#app .app-main > .box-container {
padding: 18px !important;
}
#app .app-container > .el-row.mb8,
#app .app-container .top-right-btn,
#app .app-container .table-search,
#app .app-container .search-form,
#app .app-container .filter-container {
border: 0 !important;
border-radius: var(--neu-radius-md) !important;
background: var(--neu-bg) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .app-container > .el-row.mb8 {
align-items: center;
min-height: 54px;
margin: 0 0 16px !important;
padding: 8px 12px;
}
#app .app-container .table-search,
#app .app-container .search-form,
#app .app-container .filter-container {
margin-bottom: 16px;
padding: 12px 16px;
}
#app .app-container .el-table,
#app .app-container .el-table__inner-wrapper,
#app .app-container .el-pagination,
#app .app-container .pagination-container {
border-radius: var(--neu-radius-md) !important;
}
#app .app-container .el-table {
overflow: hidden;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .page-container > .main-layout,
#app .page-container .left-panel,
#app .page-container .right-panel,
#app .page-container .left-container,
#app .page-container .center-container,
#app .page-container .right-container,
#app .page-container .context-container,
#app .page-container .taskList-container,
#app .page-container .run-log-container,
#app .page-container .report-container,
#app .page-container .test-container,
#app .page-container .indicator-container,
#app .page-container .score-table-container,
#app .page-container .card-container,
#app .page-container .tree-container {
border: 0 !important;
border-radius: var(--neu-radius-md) !important;
background: var(--neu-bg) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .page-container > .main-layout {
padding: 14px !important;
}
#app .app-main > .container > .el-table,
#app .app-main > .container .schemaList,
#app .app-main > .container .context-container,
#app .app-main > .container .report-container,
#app .app-main > .container .metrics-container,
#app .app-main > .container .page-header {
border: 0 !important;
border-radius: var(--neu-radius-md) !important;
background: var(--neu-bg) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .app-main > .container > .el-table {
overflow: hidden;
}
#app .app-main > .container .page-header {
margin-bottom: 18px;
padding: 12px 16px !important;
}
/* Layout wrappers stay open so individual panels retain a clear hierarchy. */
#app .page-container > .main-layout,
#app .app-main > .container .context-container,
#app .app-main > .container .metrics-container {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#app aside,
#app .sub-navbar,
#app .form-header,
#app .copyright,
#app .topmenu-container,
#app .topbar-menu {
border-color: transparent !important;
background: var(--neu-bg) !important;
color: var(--neu-text-secondary) !important;
}
#app aside,
#app .sub-navbar,
#app .form-header {
border-radius: var(--neu-radius-sm) !important;
box-shadow: var(--neu-shadow-inset) !important;
}
#app .copyright {
box-shadow: inset 0 4px 8px -10px var(--neu-shadow-dark);
}
#app .page-container .row-cards {
gap: 18px;
}
#app .page-container .row-cards .card,
#app .robot-device-page .status-strip {
border: 0 !important;
border-radius: var(--neu-radius-md) !important;
background: var(--neu-bg) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .page-container .row-cards .card {
min-height: 96px;
padding: 14px 20px !important;
}
#app .page-container .row-cards .stat-label,
#app .page-container .row-cards .stat-number,
#app .robot-device-page .status-strip strong,
#app .robot-device-page .status-strip span {
color: var(--neu-text-primary) !important;
}
#app .page-container .row-cards .stat-label,
#app .robot-device-page .status-strip span {
color: var(--neu-text-muted) !important;
}
#app .page-container .row-cards .icon-container,
#app .robot-device-page .device-icon {
border-radius: var(--neu-radius-sm) !important;
background: var(--neu-bg) !important;
color: var(--neu-primary) !important;
box-shadow: var(--neu-shadow-inset) !important;
}
#app .robot-device-page .status-strip {
margin-bottom: 18px;
padding: 16px 20px;
}
#app .robot-device-page .status-strip strong.online {
color: var(--neu-success) !important;
}
#app .robot-device-page .status-strip strong.fault {
color: var(--neu-danger) !important;
}
#app .page-heading h2,
#app .flow-heading__name,
#app .container-title,
#app .section-title,
#app .panel-title {
color: var(--neu-text-primary) !important;
}
#app .page-heading p,
#app .robot-selector,
#app .section-subtitle,
#app .muted,
#app .text-muted {
color: var(--neu-text-muted) !important;
}
/* Operator screens and editors use denser nested panels. */
#app .page__container,
#app .page__container > .container,
#app .page__container .flow__container,
#app .canvas-toolbar,
#app .flow-heading,
#app .btn__container,
#app .flow__container .vue-flow__controls,
#app .monitor-container,
#app .robot-container,
#app .video-container,
#app .voice-container,
#app .alarm-container,
#app .ocr-container,
#app .model-container,
#app .stream-container,
#app .jointControl-container,
#app .microphone-container,
#app .speech-container,
#app .chat-container {
border-color: transparent !important;
background: var(--neu-bg) !important;
color: var(--neu-text-primary);
}
#app .page__container .canvas-toolbar,
#app .page__container .flow-heading,
#app .page__container .btn__container {
border-radius: var(--neu-radius-md) !important;
box-shadow: var(--neu-shadow-raised-sm) !important;
}
#app .page__container .flow__container {
border-radius: var(--neu-radius-md) !important;
box-shadow: var(--neu-shadow-inset) !important;
}
#app .el-empty,
#app .el-result,
#app .el-statistic,
#app .el-descriptions,
#app .el-collapse,
#app .el-timeline,
#app .el-upload,
#app .el-transfer {
color: var(--neu-text-secondary);
}
#app .el-form-item__label,
#app .el-checkbox__label,
#app .el-radio__label {
color: var(--neu-text-secondary) !important;
}
#app .el-table .el-table__cell {
color: var(--neu-text-secondary) !important;
}
#app .el-table .el-table__body tr {
transition: transform 150ms ease, box-shadow 150ms ease;
}
#app .el-table .el-table__body tr:hover {
transform: translateX(2px);
}
#app .el-loading-mask {
background: color-mix(in srgb, var(--neu-bg) 82%, transparent) !important;
backdrop-filter: blur(2px);
}
/* Consistent focus treatment for native controls in custom pages. */
#app input:not(.el-input__inner),
#app textarea,
#app select {
border: 0;
border-radius: var(--neu-radius-sm);
background: var(--neu-bg);
color: var(--neu-text-primary);
box-shadow: var(--neu-shadow-inset);
}
#app button:not(.el-button):not(.unlock-btn) {
color: var(--neu-text-secondary);
}
#app button:not(.el-button):not(.unlock-btn):hover {
color: var(--neu-primary);
}
@media (max-width: 768px) {
#app .app-main > .app-container,
#app .app-main > .page-container,
#app .app-main > .main-workspace,
#app .app-main > .box-container {
padding: 14px !important;
border-radius: var(--neu-radius-md) !important;
}
#app .app-container > .el-row.mb8 {
gap: 8px;
height: auto;
}
#app .page-container .row-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#app .robot-device-page .status-strip {
align-items: stretch;
flex-wrap: wrap;
gap: 14px;
}
#app .robot-device-page .status-strip .filters {
width: 100%;
justify-content: stretch;
}
#app .robot-device-page .status-strip .filters > * {
flex: 1 1 180px;
}
}

View File

@ -56,10 +56,10 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column prop="errorMessage" label="状态信息" min-width="180" show-overflow-tooltip> <el-table-column prop="errorMessage" label="状态信息" min-width="180" show-overflow-tooltip>
<template #default="{ row }">{{ row.errorMessage || '运行正常' }}</template> <template #default="{ row }">{{ row.errorMessage || '运行正常' }}</template>
</el-table-column> --> </el-table-column>
<!-- <el-table-column prop="lastSeenTime" label="最后上报" width="180" /> --> <el-table-column prop="lastSeenTime" label="最后上报" width="180" />
<el-table-column label="操作" fixed="right" align="center"> <el-table-column label="操作" fixed="right" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-button v-if="controlRoute(row.deviceKind)" link type="primary" <el-button v-if="controlRoute(row.deviceKind)" link type="primary"

View File

@ -89,8 +89,8 @@
<el-table-column label="终端名称" align="center" prop="name" show-overflow-tooltip/> <el-table-column label="终端名称" align="center" prop="name" show-overflow-tooltip/>
<el-table-column label="主机" align="center" prop="host" show-overflow-tooltip/> <el-table-column label="主机" align="center" prop="host" show-overflow-tooltip/>
<el-table-column label="端口号" align="center" prop="port" show-overflow-tooltip/> <el-table-column label="端口号" align="center" prop="port" show-overflow-tooltip/>
<!-- <el-table-column label="说明" align="center" prop="description" show-overflow-tooltip/> <el-table-column label="说明" align="center" prop="description" show-overflow-tooltip/>
<el-table-column label="备注" align="center" prop="remake" show-overflow-tooltip/> --> <el-table-column label="备注" align="center" prop="remake" show-overflow-tooltip/>
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="状态" align="center" prop="status">
<template #default="scope"> <template #default="scope">
<el-switch <el-switch

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="container"> <div class="container cockpit-shell">
<div class="header"> <div class="header">
<Header @active-page="activePage" /> <Header @active-page="activePage" />
</div> </div>
@ -28,23 +28,34 @@ const activePage = (page) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container.cockpit-shell {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: #000d2e; background: var(--neu-bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: var(--neu-text-primary);
.header { .header {
height: 64px; height: 64px;
background: linear-gradient(180deg, rgba(0, 20, 70, 0.98) 0%, rgba(0, 10, 50, 0.95) 100%); background: var(--neu-bg);
border-bottom: 1px solid rgba(0, 194, 255, 0.3); border-bottom: 0;
box-shadow: 0 8px 16px -12px var(--neu-shadow-dark), 0 -4px 10px -10px var(--neu-shadow-light);
z-index: 2;
} }
.body-box { .body-box {
flex: 1; flex: 1;
min-height: 0;
padding: 14px;
}
}
@media (max-width: 768px) {
.container.cockpit-shell .body-box {
padding: 8px;
} }
} }
</style> </style>

View File

@ -32,7 +32,7 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6"> <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
<el-form-item label="厂商" prop="manufacturer"> <el-form-item label="厂商" prop="manufacturer">
<el-input <el-input
v-model="queryParams.manufacturer" v-model="queryParams.manufacturer"
@ -42,7 +42,7 @@
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
</el-col> --> </el-col>
</template> </template>
</TableSearch> </TableSearch>
@ -86,8 +86,8 @@
<el-table-column label="手机型号" prop="phoneModel" /> <el-table-column label="手机型号" prop="phoneModel" />
<el-table-column label="系统版本" prop="osVersion" /> <el-table-column label="系统版本" prop="osVersion" />
<el-table-column label="操作系统" prop="osSystem" width="100" /> <el-table-column label="操作系统" prop="osSystem" width="100" />
<!-- <el-table-column label="厂商" align="center" prop="manufacturer" /> <el-table-column label="厂商" align="center" prop="manufacturer" />
<el-table-column label="额外参数" align="center" prop="specifications" :show-overflow-tooltip="true" width="180"/> --> <el-table-column label="额外参数" align="center" prop="specifications" :show-overflow-tooltip="true" width="180"/>
<el-table-column label="状态" align="center" width="100"> <el-table-column label="状态" align="center" width="100">
<template #default="scope"> <template #default="scope">
<el-switch <el-switch
@ -139,12 +139,12 @@
<el-form-item label="系统版本" prop="osVersion"> <el-form-item label="系统版本" prop="osVersion">
<el-input v-model="form.osVersion" placeholder="请输入系统版本" /> <el-input v-model="form.osVersion" placeholder="请输入系统版本" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="厂商" prop="manufacturer"> <el-form-item label="厂商" prop="manufacturer">
<el-input v-model="form.manufacturer" /> <el-input v-model="form.manufacturer" />
</el-form-item> </el-form-item>
<el-form-item label="规格参数" prop="specifications"> <el-form-item label="规格参数" prop="specifications">
<el-input v-model="form.specifications" /> <el-input v-model="form.specifications" />
</el-form-item> --> </el-form-item>
<el-form-item label="备注"> <el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item> </el-form-item>

View File

@ -72,9 +72,9 @@
<el-table height="100%" v-loading="loading" :data="tableDataList" @selection-change="handleSelectionChange"> <el-table height="100%" v-loading="loading" :data="tableDataList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="用例名称" prop="caseName" /> <el-table-column label="用例名称" prop="caseName" />
<!-- <el-table-column label="预期结果" prop="expectedResult" :show-overflow-tooltip="true" width="200" /> <el-table-column label="预期结果" prop="expectedResult" :show-overflow-tooltip="true" width="200" />
<el-table-column label="前置条件" prop="precondition" show-overflow-tooltip="true" width="200" /> <el-table-column label="前置条件" prop="precondition" show-overflow-tooltip="true" width="200" />
<el-table-column label="测试步骤" align="center" prop="testSteps" show-overflow-tooltip="true" width="200"/> --> <el-table-column label="测试步骤" align="center" prop="testSteps" show-overflow-tooltip="true" width="200"/>
<el-table-column label="测试描述" align="center" prop="testDescription" show-overflow-tooltip="true" width="200" /> <el-table-column label="测试描述" align="center" prop="testDescription" show-overflow-tooltip="true" width="200" />
<el-table-column label="状态" align="center" width="100"> <el-table-column label="状态" align="center" width="100">
<template #default="scope"> <template #default="scope">
@ -142,7 +142,7 @@
<el-form-item label="用例名称" prop="caseName"> <el-form-item label="用例名称" prop="caseName">
<el-input v-model="form.caseName" placeholder="请输入用例名称" /> <el-input v-model="form.caseName" placeholder="请输入用例名称" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="预期结果" prop="expectedResult"> <el-form-item label="预期结果" prop="expectedResult">
<el-input type="textarea" v-model="form.expectedResult" placeholder="请输入预期结果" /> <el-input type="textarea" v-model="form.expectedResult" placeholder="请输入预期结果" />
</el-form-item> </el-form-item>
<el-form-item label="前置条件" prop="precondition"> <el-form-item label="前置条件" prop="precondition">
@ -150,7 +150,7 @@
</el-form-item> </el-form-item>
<el-form-item label="测试步骤" prop="testSteps"> <el-form-item label="测试步骤" prop="testSteps">
<el-input type="textarea" v-model="form.testSteps" placeholder="请输入测试步骤" /> <el-input type="textarea" v-model="form.testSteps" placeholder="请输入测试步骤" />
</el-form-item> --> </el-form-item>
<el-form-item label="测试描述" prop="testDescription"> <el-form-item label="测试描述" prop="testDescription">
<el-input type="textarea" v-model="form.testDescription" /> <el-input type="textarea" v-model="form.testDescription" />
</el-form-item> </el-form-item>
@ -199,8 +199,8 @@ const data = reactive({
}, },
rules: { rules: {
caseName: [{ required: true, message: "用例名称不能为空", trigger: "blur" }], caseName: [{ required: true, message: "用例名称不能为空", trigger: "blur" }],
// expectedResult: [{ required: true, message: "预期结果不能为空", trigger: "blur" }], expectedResult: [{ required: true, message: "预期结果不能为空", trigger: "blur" }],
// testSteps: [{ required: true, message: "测试步骤为空", trigger: "blur" }], testSteps: [{ required: true, message: "测试步骤为空", trigger: "blur" }],
testDescription: [{ required: true, message: "测试描述不能为空", trigger: "blur" }] testDescription: [{ required: true, message: "测试描述不能为空", trigger: "blur" }]
}, },
}); });

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container tree-sidebar-manage-wrap"> <div class="app-container tree-sidebar-manage-wrap">
<!-- <tree-panel title="组织机构" :tree-data="deptOptions" search-placeholder="请输入部门名称" storage-key="dept-sidebar-width" :defaultExpandAll="true" @node-click="handleNodeClick" @refresh="getDeptTree" ref="deptTreeRef" /> --> <tree-panel title="组织机构" :tree-data="deptOptions" search-placeholder="请输入部门名称" storage-key="dept-sidebar-width" :defaultExpandAll="true" @node-click="handleNodeClick" @refresh="getDeptTree" ref="deptTreeRef" />
<div class="tree-sidebar-content"> <div class="tree-sidebar-content">
<div class="content-inner"> <div class="content-inner">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">

View File

@ -94,24 +94,24 @@
prop="taskName" prop="taskName"
show-overflow-tooltip show-overflow-tooltip
/> />
<!-- <el-table-column <el-table-column
align="center" align="center"
label="分组名称" label="分组名称"
prop="groupName" prop="groupName"
show-overflow-tooltip show-overflow-tooltip
/> --> />
<el-table-column <el-table-column
align="center" align="center"
label="任务描述" label="任务描述"
prop="taskDesc" prop="taskDesc"
show-overflow-tooltip show-overflow-tooltip
/> />
<!-- <el-table-column <el-table-column
align="center" align="center"
label="备注" label="备注"
prop="remark" prop="remark"
show-overflow-tooltip show-overflow-tooltip
/> --> />
<el-table-column align="center" label="状态" prop="status"> <el-table-column align="center" label="状态" prop="status">
<template #default="scope"> <template #default="scope">
<el-switch <el-switch
@ -195,7 +195,7 @@
<el-form-item label="任务描述" prop="taskDesc"> <el-form-item label="任务描述" prop="taskDesc">
<el-input v-model="form.taskDesc" placeholder="请输入任务描述" /> <el-input v-model="form.taskDesc" placeholder="请输入任务描述" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="所属分组"> <el-form-item label="所属分组">
<el-select v-model="form.groupId" placeholder="请选择所属分组"> <el-select v-model="form.groupId" placeholder="请选择所属分组">
<el-option <el-option
v-for="group in groupList" v-for="group in groupList"
@ -204,7 +204,7 @@
:value="group.value" :value="group.value"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> --> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input <el-input
v-model="form.remark" v-model="form.remark"

View File

@ -118,7 +118,7 @@
prop="detectDesc" prop="detectDesc"
show-overflow-tooltip show-overflow-tooltip
/> />
<!-- <el-table-column align="center" label="所属分组" prop="groupId"> <el-table-column align="center" label="所属分组" prop="groupId">
<template #default="scope"> <template #default="scope">
{{ {{
groupList?.find((item) => item.value === scope.row.groupId)[ groupList?.find((item) => item.value === scope.row.groupId)[
@ -132,7 +132,7 @@
label="备注" label="备注"
prop="remark" prop="remark"
show-overflow-tooltip show-overflow-tooltip
/> --> />
<el-table-column align="center" label="启用状态" prop="status"> <el-table-column align="center" label="启用状态" prop="status">
<template #default="scope"> <template #default="scope">
<el-switch <el-switch
@ -230,7 +230,7 @@
<el-form-item label="检测项描述" prop="detectDesc"> <el-form-item label="检测项描述" prop="detectDesc">
<el-input v-model="form.detectDesc" placeholder="请输入检测项描述" /> <el-input v-model="form.detectDesc" placeholder="请输入检测项描述" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="所属分组" prop="groupId"> <el-form-item label="所属分组" prop="groupId">
<el-select v-model="form.groupId" placeholder="请选择所属分组"> <el-select v-model="form.groupId" placeholder="请选择所属分组">
<el-option <el-option
v-for="group in groupList" v-for="group in groupList"
@ -244,7 +244,7 @@
<el-select v-model="form.sceneCode" placeholder="请输入检测项描述"> <el-select v-model="form.sceneCode" placeholder="请输入检测项描述">
<el-option v-for="item in sceneList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in sceneList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> --> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input <el-input
v-model="form.remark" v-model="form.remark"

View File

@ -145,14 +145,14 @@
/> />
<el-table-column label="音色" width="80" align="center" prop="voiceType" /> <el-table-column label="音色" width="80" align="center" prop="voiceType" />
<el-table-column label="语种" width="80" align="center" prop="dialect" /> <el-table-column label="语种" width="80" align="center" prop="dialect" />
<!-- <el-table-column <el-table-column
label="预期结果" label="预期结果"
align="center" align="center"
prop="expectedResult" prop="expectedResult"
min-width="150" min-width="150"
show-overflow-tooltip show-overflow-tooltip
/> --> />
<!-- <el-table-column label="状态" align="center" prop="status" /> --> <el-table-column label="状态" align="center" prop="status" />
<el-table-column <el-table-column
label="备注" label="备注"
align="center" align="center"