Feat: 前端改版 Web 端界面与业务作业流程
按设计稿改版登录后的全部页面，登录页与 Logo 资源未改动。 - 全局外壳：浅色侧边栏与分组菜单、左下角用户卡片、Ctrl/⌘K 搜索面板、 测试模式提示条、深色模式配色、窄屏适配 - 共用组件：页头 PageHeader、托盘流程条 FlowStepper、扫码反馈 ScanFeedback、 缩短单号 DocNo、托盘档案链接 PalletCodeLink、图标 SfIcon、上级资料选择 MasterRefSelect，以及编号段解析等工具 - 工作台重做；新增托盘档案页；托盘追溯增加单托盘入口，报表托盘号可跳转档案 - 基础资料维护：各页加指标条、名称代替 ID、详情面板；三步式批量导入预览； 分配用户对话框标注增减；7 个新增/编辑对话框统一布局 - 业务管理：发货出库、仓库入库、工厂装填、客户现场使用、退回仓库改为 列表 + 详情面板 + 全屏作业区；写入流程、幂等键与防串单逻辑保持不变 - 修复入库页扫码反馈条因同名状态变量遮蔽组件而不显示的问题，并新增契约检查 - 新增入库粘贴解析、退回、装填的行为测试与现场使用页新流程测试， 同步更新业务与工作台契约脚本 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -6,6 +6,8 @@
|
||||
@use './shierfeng.scss';
|
||||
|
||||
@use './data-pages.scss';
|
||||
@use './sf-shell.scss';
|
||||
@use './sf-master.scss';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,8 @@
|
||||
@use './variables.module.scss' as vars;
|
||||
|
||||
// ==========================================
|
||||
// 侧边导航：位于底色之上，内容区为右侧内嵌面板
|
||||
// ==========================================
|
||||
#app {
|
||||
|
||||
.main-container {
|
||||
@@ -10,24 +13,54 @@
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
margin-left: 0!important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
--sf-menu-text: var(--sf-text-2, #3d4350);
|
||||
--sf-menu-icon: var(--sf-text-4, #6b717d);
|
||||
--sf-menu-group: var(--sf-text-4, #6b717d);
|
||||
--sf-menu-hover: var(--sf-hover, rgba(15, 17, 21, 0.045));
|
||||
--sf-menu-active-bg: var(--sf-surface, #fff);
|
||||
--sf-menu-active-text: var(--sf-text-1, #0f1115);
|
||||
--sf-menu-active-icon: var(--sf-accent, #007787);
|
||||
--sf-menu-active-ring: var(--sf-ring, 0 0 0 1px #e7e9ec);
|
||||
--el-menu-bg-color: transparent;
|
||||
--el-menu-hover-bg-color: var(--sf-menu-hover);
|
||||
--el-menu-text-color: var(--sf-menu-text);
|
||||
--el-menu-active-color: var(--sf-menu-active-text);
|
||||
--el-menu-item-height: 36px;
|
||||
--el-menu-sub-item-height: 36px;
|
||||
--el-menu-base-level-padding: 12px;
|
||||
--el-menu-level-padding: 14px;
|
||||
--el-menu-item-font-size: 13.5px;
|
||||
|
||||
transition: width 0.28s;
|
||||
width: vars.$base-sidebar-width !important;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
font-size: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--el-border-color-lighter, #e4e7ed);
|
||||
box-shadow: 2px 0 10px 0 rgba(15, 34, 58, 0.05);
|
||||
background: var(--sf-ground, #f5f6f7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.theme-dark {
|
||||
--sf-menu-text: #c9cdd4;
|
||||
--sf-menu-icon: #8d939d;
|
||||
--sf-menu-group: #8d939d;
|
||||
--sf-menu-hover: rgba(255, 255, 255, 0.06);
|
||||
--sf-menu-active-bg: rgba(255, 255, 255, 0.1);
|
||||
--sf-menu-active-text: #ffffff;
|
||||
--sf-menu-active-icon: var(--el-color-primary-light-3, #4daab6);
|
||||
--sf-menu-active-ring: none;
|
||||
background: #15171c;
|
||||
}
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
@@ -37,176 +70,169 @@
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-logo {
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
.el-menu a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
padding: 4px 0 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:not(.el-menu--collapse) {
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
// 菜单项：圆角胶囊
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin: 1px 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 8px;
|
||||
color: var(--sf-menu-text);
|
||||
font-size: 13.5px;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
|
||||
.el-menu-item.is-active {
|
||||
font-weight: 600;
|
||||
background-color: rgba(0, 133, 150, 0.12) !important;
|
||||
color: var(--current-color, #008596) !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--sf-menu-hover) !important;
|
||||
color: var(--sf-menu-active-text);
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item, .menu-title {
|
||||
.sf-menu-icon,
|
||||
.svg-icon {
|
||||
flex: none;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
margin-right: 10px !important;
|
||||
color: var(--sf-menu-icon);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-color: var(--sf-menu-active-bg) !important;
|
||||
box-shadow: var(--sf-menu-active-ring);
|
||||
color: var(--sf-menu-active-text) !important;
|
||||
font-weight: 500;
|
||||
|
||||
.sf-menu-icon,
|
||||
.svg-icon {
|
||||
color: var(--sf-menu-active-icon);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title,
|
||||
.el-menu-item {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.el-menu-item .el-menu-tooltip__trigger {
|
||||
display: inline-block !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
.el-sub-menu__icon-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--el-menu-base-level-padding, 20px);
|
||||
margin-top: -6px;
|
||||
width: auto !important;
|
||||
.el-sub-menu__icon-arrow {
|
||||
right: 10px;
|
||||
width: 12px !important;
|
||||
font-size: 12px;
|
||||
color: var(--sf-menu-group);
|
||||
}
|
||||
|
||||
// 一级目录展开时作为分组标题：小字号、无图标
|
||||
.el-menu:not(.el-menu--collapse) {
|
||||
& > div > .el-sub-menu {
|
||||
margin-top: 10px;
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--sf-menu-group);
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
.sf-menu-icon,
|
||||
.svg-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
color: var(--sf-menu-active-text);
|
||||
}
|
||||
}
|
||||
|
||||
& > .el-menu {
|
||||
padding: 2px 0 0;
|
||||
}
|
||||
|
||||
// 分组内一级子项与顶层菜单项左对齐
|
||||
& > .el-menu > div > a > .el-menu-item,
|
||||
& > .el-menu > div > .el-sub-menu > .el-sub-menu__title {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-sub-menu .el-menu-item {
|
||||
padding-left: 38px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.sub-menu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
color: vars.$base-menu-color-active !important;
|
||||
}
|
||||
|
||||
& .theme-dark .el-menu:not(.el-menu--collapse) .el-menu-item.is-active {
|
||||
background-color: rgba(0, 133, 150, 0.26) !important;
|
||||
color: #38bdf8 !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: vars.$base-sidebar-width !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--el-menu-base-level-padding, 20px);
|
||||
margin-top: -6px;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .theme-dark .el-sub-menu .el-menu-item {
|
||||
background-color: vars.$base-sub-menu-background;
|
||||
|
||||
&:hover {
|
||||
background-color: vars.$base-sub-menu-hover !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba(0, 133, 150, 0.28) !important;
|
||||
color: #38bdf8 !important;
|
||||
}
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
color: var(--sf-menu-active-text);
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 54px !important;
|
||||
width: vars.$collapsed-sidebar-width !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
.sub-menu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
|
||||
.el-tooltip {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
overflow: hidden;
|
||||
|
||||
&>.el-sub-menu__title {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
margin-left: vars.$collapsed-sidebar-width;
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
width: 100% !important;
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
justify-content: center;
|
||||
margin: 1px 10px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-tooltip__trigger {
|
||||
justify-content: center;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.sf-menu-icon,
|
||||
.svg-icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
&>.el-sub-menu__title {
|
||||
&>span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
&>i {
|
||||
& > .el-sub-menu__title {
|
||||
& > span,
|
||||
& > i {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
@@ -222,15 +248,16 @@
|
||||
min-width: vars.$base-sidebar-width !important;
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
// 移动端：抽屉式导航
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
width: vars.$base-sidebar-width !important;
|
||||
box-shadow: 8px 0 32px rgba(16, 24, 40, 0.12);
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
@@ -251,47 +278,60 @@
|
||||
}
|
||||
}
|
||||
|
||||
// when menu collapsed
|
||||
// 折叠态弹出的子菜单
|
||||
.el-menu--vertical {
|
||||
.el-sub-menu {
|
||||
.el-sub-menu__icon-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--el-menu-base-level-padding, 20px);
|
||||
margin-top: -6px;
|
||||
width: auto !important;
|
||||
}
|
||||
--el-menu-item-height: 36px;
|
||||
--el-menu-sub-item-height: 36px;
|
||||
|
||||
.el-menu--popup {
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
&>.el-menu {
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
border-radius: 6px;
|
||||
font-size: 13.5px;
|
||||
|
||||
.sf-menu-icon,
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
.el-menu-item.is-active {
|
||||
color: var(--sf-accent, #007787);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-sub-menu .el-sub-menu__icon-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
margin-top: -6px;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: var(--sf-hover, rgba(0, 0, 0, 0.05)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// the scroll bar appears when the sub-menu is too long
|
||||
>.el-menu--popup {
|
||||
> .el-menu--popup {
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
background: var(--sf-border-strong, #c0c4cc);
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,8 +21,9 @@ $menuLightText: #303133;
|
||||
$menuLightActiveText: #409EFF;
|
||||
|
||||
// 基础变量
|
||||
$base-sidebar-width: 200px;
|
||||
$sideBarWidth: 200px;
|
||||
$base-sidebar-width: 232px;
|
||||
$collapsed-sidebar-width: 64px;
|
||||
$sideBarWidth: 232px;
|
||||
|
||||
// 菜单暗色变量
|
||||
$base-menu-color: #bfcbd9;
|
||||
|
||||
Reference in New Issue
Block a user