DeXun/pickling-mes
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 顶部横向导航 + 登录页工业重设计 + 清除 placeholder 文本

Browse Source 
- Layout: 恢复顶部横向导航，图标换为 SVG 几何图形
- Login: 西门子风格重设计，去掉渐变/圆角/placeholder
- 全局清除所有输入框 placeholder 说明文字
- 修复 Equipment.vue 重复 style 属性
This commit is contained in:
wangyu
2026-05-27 17:04:48 +08:00
parent d4f334761f
commit fb28599365
10 changed files with 144 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/Equipment.vue
View File

@@ -19,7 +19,7 @@
<button class="btn btn-outline" @click="openDialog()">＋ 新增设备</button>
</div>
<!-- 状态汇总 -->
<div style="margin-left:auto;" class="flex-row" style="gap:16px;">
<div class="flex-row" style="margin-left:auto;gap:16px;">
<span v-for="s in statusSummary" :key="s.label" class="kv-label">
{{ s.label }} <span class="kv-value" :style="{color: s.color}">{{ s.count }}</span>
</span>

150
frontend/src/views/Layout.vue
View File

@@ -22,26 +22,22 @@
<div class="clock">{{ clock }}</div>
</div>
<!-- ─── BODY ─── -->
<div class="body-area">
<!-- ─── SIDEBAR ─── -->
<div class="sidebar">
<div
v-for="item in menuItems"
:key="item.path"
:class="['nav-item', { active: $route.path === item.path }]"
@click="$router.push(item.path)"
>
<span class="nav-icon" v-html="item.icon"></span>
<span class="nav-label">{{ item.title }}</span>
</div>
<!-- ─── NAV BAR ─── -->
<div class="nav-bar">
<div
v-for="item in menuItems"
:key="item.path"
:class="['nav-item', { active: $route.path === item.path }]"
@click="$router.push(item.path)"
>
<span class="nav-icon" v-html="item.icon"></span>
<span class="nav-label">{{ item.title }}</span>
</div>
</div>
<!-- ─── MAIN ─── -->
<div class="main-area">
<router-view />
</div>
<!-- ─── MAIN ─── -->
<div class="main-area">
<router-view />
</div>
<!-- ─── FOOTER ─── -->
@@ -59,18 +55,18 @@
import { mapGetters } from 'vuex'
const IC = {
dashboard: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6"/><rect x="9" y="1" width="6" height="6"/><rect x="1" y="9" width="6" height="6"/><rect x="9" y="9" width="6" height="6"/></svg>`,
material: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1L1 4.5v7L8 15l7-3.5v-7L8 1zm0 2l5 2.5v5.5L8 13 3 11V5.5L8 3z"/></svg>`,
production: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="9" width="3" height="6"/><rect x="5.5" y="6" width="3" height="9"/><rect x="10" y="2" width="3" height="13"/></svg>`,
plan: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="3" width="12" height="2"/><rect x="2" y="7" width="12" height="2"/><rect x="2" y="11" width="7" height="2"/></svg>`,
downtime: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><rect x="5.5" y="5" width="2" height="6" fill="currentColor" stroke="none"/><rect x="8.5" y="5" width="2" height="6" fill="currentColor" stroke="none"/></svg>`,
equipment: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm0 1.5a1 1 0 110 2 1 1 0 010-2zM6.8 1l-.4 1.8a5.2 5.2 0 00-1.6 1L3 3.3 1.3 6l1.5 1.1A5 5 0 002.5 8c0 .3 0 .6.05.9L1.3 10 3 12.7l1.8-.5c.48.4 1 .74 1.6 1L6.8 15h2.4l.4-1.8c.6-.26 1.12-.6 1.6-1l1.8.5L14.7 10l-1.3-1.1c.04-.3.06-.6.06-.9 0-.3-.02-.6-.06-.9L14.7 6 13 3.3l-1.8.5a5.2 5.2 0 00-1.6-1L9.2 1H6.8z"/></svg>`,
inspection: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6.5" cy="6.5" r="4.5"/><line x1="9.9" y1="9.9" x2="14" y2="14"/><circle cx="6.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/></svg>`,
message: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M1 2h14v10H9.5L8 14.5 6.5 12H1V2zm1.5 1.5v7h4l1.5 2.2 1.5-2.2h4v-7h-11z"/></svg>`,
process: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M1 8 Q3 3 5 8 Q7 13 9 8 Q11 3 13 8 Q14 10.5 15 8"/></svg>`,
tension: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 1.5a5.5 5.5 0 110 11 5.5 5.5 0 010-11z"/><line x1="8" y1="8" x2="11.5" y2="5" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="8" r="1.2"/></svg>`,
quality: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1l1.9 4.2 4.6.5-3.4 3.1 1 4.5L8 11.2l-4.1 2.1 1-4.5L1.5 5.7l4.6-.5z"/></svg>`,
capacity: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="10" width="3" height="5"/><rect x="5.5" y="7" width="3" height="8"/><rect x="10" y="4" width="3" height="11"/></svg>`,
dashboard: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="1" width="5" height="5"/><rect x="8" y="1" width="5" height="5"/><rect x="1" y="8" width="5" height="5"/><rect x="8" y="8" width="5" height="5"/></svg>`,
material: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1L1 4v6l6 3 6-3V4L7 1zm0 1.8L11.5 5v4.5L7 11.8 2.5 9.5V5L7 2.8z"/></svg>`,
production: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="8" width="3" height="5"/><rect x="5.5" y="5" width="3" height="8"/><rect x="10" y="2" width="3" height="11"/></svg>`,
plan: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="2" y="2.5" width="10" height="2"/><rect x="2" y="6" width="10" height="2"/><rect x="2" y="9.5" width="6" height="2"/></svg>`,
downtime: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="7" cy="7" r="5.5"/><rect x="5" y="4.5" width="1.8" height="5" fill="currentColor" stroke="none"/><rect x="7.2" y="4.5" width="1.8" height="5" fill="currentColor" stroke="none"/></svg>`,
equipment: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 4.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm0 1.4a1.1 1.1 0 110 2.2A1.1 1.1 0 017 5.9zM5.9 1l-.4 1.6A4.6 4.6 0 003.9 3.8L2.3 3.2 1.2 5.3l1.3 1A4.4 4.4 0 002.2 7c0 .25.02.5.06.75L1.2 8.7l1.1 2.1 1.6-.6c.44.37.9.68 1.6.93L5.9 13h2.2l.4-1.6c.6-.25 1.1-.56 1.6-.93l1.6.6 1.1-2.1-1.3-1c.04-.25.06-.5.06-.75 0-.25-.02-.5-.06-.75l1.3-1-1.1-2.1-1.6.6A4.6 4.6 0 008.1 2.6L7.7 1H5.9z"/></svg>`,
inspection: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="5.5" cy="5.5" r="4"/><line x1="8.5" y1="8.5" x2="13" y2="13"/><circle cx="5.5" cy="5.5" r="1.2" fill="currentColor" stroke="none"/></svg>`,
message: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M1 1.5h12v9H8.5L7 12.5 5.5 10.5H1V1.5zm1.3 1.3v6.4H6l1 1.6 1-1.6h3.7V2.8H2.3z"/></svg>`,
process: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M1 7 Q2.5 3 4 7 Q5.5 11 7 7 Q8.5 3 10 7 Q11 9 13 7"/></svg>`,
tension: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1a6 6 0 100 12A6 6 0 007 1zm0 1.3a4.7 4.7 0 110 9.4A4.7 4.7 0 017 2.3z"/><line x1="7" y1="7" x2="10" y2="4.5" stroke="currentColor" stroke-width="1.3"/><circle cx="7" cy="7" r="1.1"/></svg>`,
quality: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1l1.6 3.7 4 .5-3 2.7.9 4L7 9.8l-3.5 1.9.9-4-3-2.7 4-.5z"/></svg>`,
capacity: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="9" width="2.5" height="4"/><rect x="5" y="6.5" width="2.5" height="6.5"/><rect x="9" y="3.5" width="2.5" height="9.5"/></svg>`,
}
const MENU = [
@@ -135,7 +131,7 @@ export default {
// ─── TOP BAR ───
.top-bar {
height: 44px;
height: 46px;
background: $bg-secondary;
border-bottom: 1px solid $border;
display: flex;
@@ -148,29 +144,28 @@ export default {
.logo {
display: flex;
align-items: center;
gap: 7px;
gap: 8px;
flex-shrink: 0;
}
.logo-mark {
width: 24px;
height: 24px;
width: 26px;
height: 26px;
background: $sms-teal;
color: $bg-base;
font-size: 13px;
font-size: 14px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1px;
letter-spacing: 0;
border-radius: 2px;
}
.logo-text {
font-size: 12px;
font-weight: 700;
color: $text-primary;
letter-spacing: 1.5px;
letter-spacing: 1.8px;
text-transform: uppercase;
}
@@ -180,7 +175,6 @@ export default {
border-left: 1px solid $border;
padding-left: 14px;
white-space: nowrap;
letter-spacing: .3px;
}
.spacer { flex: 1; }
@@ -195,8 +189,8 @@ export default {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 1px;
padding: 2px 8px;
border-radius: 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
@@ -209,9 +203,9 @@ export default {
display: inline-block;
}
&.run { background: rgba($status-run, .12); color: $status-run; border: 1px solid rgba($status-run, .4); .dot { background: $status-run; } }
&.warn { background: rgba($status-warn, .12); color: $status-warn; border: 1px solid rgba($status-warn, .4); .dot { background: $status-warn; } }
&.stop { background: rgba($status-stop, .1); color: $status-stop; border: 1px solid $border; .dot { background: $status-stop; } }
&.run { background: rgba($status-run,.12); color: $status-run; border: 1px solid rgba($status-run,.35); .dot { background: $status-run; } }
&.warn { background: rgba($status-warn,.12); color: $status-warn; border: 1px solid rgba($status-warn,.35); .dot { background: $status-warn; } }
&.stop { background: rgba($text-muted,.08); color: $text-muted; border: 1px solid $border; .dot { background: $text-muted; } }
}
.top-user {
@@ -221,8 +215,8 @@ export default {
font-size: 11px;
color: $text-secondary;
.divider { color: $border-light; }
.logout { cursor: pointer; color: $text-muted; &:hover { color: $sms-teal; } }
.divider { color: $border; }
.logout { cursor: pointer; color: $text-muted; transition: color .12s; &:hover { color: $sms-teal; } }
}
.clock {
@@ -230,72 +224,52 @@ export default {
font-size: 13px;
font-weight: 700;
color: $sms-teal;
min-width: 70px;
min-width: 68px;
text-align: right;
letter-spacing: 1px;
}
// ─── BODY ───
.body-area {
flex: 1;
// ─── NAV BAR ───
.nav-bar {
height: 36px;
background: $bg-primary;
border-bottom: 1px solid $border;
display: flex;
overflow: hidden;
}
// ─── SIDEBAR ───
.sidebar {
width: 158px;
align-items: stretch;
overflow-x: auto;
flex-shrink: 0;
background: $bg-secondary;
border-right: 1px solid $border;
overflow-y: auto;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
padding: 6px 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 14px;
gap: 6px;
padding: 0 14px;
font-size: 11px;
font-weight: 500;
color: $text-secondary;
cursor: pointer;
user-select: none;
border-left: 2px solid transparent;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: all .12s;
letter-spacing: .2px;
user-select: none;
&:hover {
background: rgba($sms-teal, .06);
color: $text-primary;
}
&.active {
background: rgba($sms-teal, .10);
color: $sms-teal;
border-left-color: $sms-teal;
}
&:hover { color: $text-primary; background: rgba($sms-teal, .05); }
&.active { color: $sms-teal; border-bottom-color: $sms-teal; background: rgba($sms-teal, .07); }
}
.nav-icon {
width: 16px;
height: 16px;
width: 13px;
height: 13px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: .85;
opacity: .9;
::v-deep svg {
width: 16px;
height: 16px;
}
}
.nav-label {
white-space: nowrap;
::v-deep svg { width: 13px; height: 13px; }
}
// ─── MAIN AREA ───
@@ -310,12 +284,12 @@ export default {
scrollbar-width: thin;
scrollbar-color: $border transparent;
&::-webkit-scrollbar { width: 5px; }
&::-webkit-scrollbar-thumb { background: $border-light; border-radius: 1px; }
&::-webkit-scrollbar-thumb { background: $border; border-radius: 1px; }
}
// ─── FOOTER ───
.footer {
height: 24px;
height: 22px;
background: $bg-secondary;
border-top: 1px solid $border;
display: flex;

139
frontend/src/views/Login.vue
View File

@@ -1,44 +1,32 @@
<template>
<div class="login-page">
<div class="login-wrap">
<div class="login-panel">
<div class="login-header">
<div class="login-logo">SMS <span>L2</span></div>
<div class="login-title">推拉酸洗线 L2 过程控制系统</div>
<div class="login-sub">PUSH-PULL PICKLING LINE MES</div>
<div class="header-mark">S</div>
<div class="header-right">
<div class="header-title">SIMATIC L2</div>
<div class="header-sub">推拉酸洗线 过程控制系统</div>
</div>
</div>
<div class="login-form">
<div class="form-item">
<div class="form-label">用户名</div>
<input
v-model="form.username"
class="kv-input"
placeholder="请输入用户名"
@keyup.enter="handleLogin"
/>
<div class="login-body">
<div class="field-group">
<div class="field-label">用户名</div>
<input v-model="form.username" class="kv-input" autocomplete="username" @keyup.enter="handleLogin" />
</div>
<div class="form-item">
<div class="form-label">密码</div>
<input
v-model="form.password"
type="password"
class="kv-input"
placeholder="请输入密码"
@keyup.enter="handleLogin"
/>
<div class="field-group">
<div class="field-label">密码</div>
<input v-model="form.password" type="password" class="kv-input" autocomplete="current-password" @keyup.enter="handleLogin" />
</div>
<button
:class="['btn btn-primary', { loading }]"
style="width:100%;margin-top:20px;padding:9px;"
@click="handleLogin"
>
{{ loading ? '登录中...' : '登 录' }}
</button>
<div v-if="error" class="login-error">{{ error }}</div>
<button class="btn btn-primary fw" style="margin-top:18px;padding:7px;" :disabled="loading" @click="handleLogin">
{{ loading ? '验证中...' : '登录' }}
</button>
</div>
<div class="login-footer">
<span class="dot g"></span>系统就绪 &nbsp;|&nbsp; v1.0.0
<i class="dot g"></i>系统就绪
<span style="margin-left:auto;">v1.0.0</span>
</div>
</div>
</div>
@@ -57,7 +45,7 @@ export default {
methods: {
async handleLogin() {
if (!this.form.username || !this.form.password) {
this.error = '请输入用户名和密码'
this.error = '用户名和密码不能为空'
return
}
this.loading = true
@@ -83,76 +71,97 @@ export default {
display: flex;
align-items: center;
justify-content: center;
background: $bg-primary;
background-image:
radial-gradient(ellipse at 20% 50%, rgba(0,120,212,.08) 0%, transparent 60%),
radial-gradient(ellipse at 80% 30%, rgba(0,200,255,.05) 0%, transparent 60%);
background: $bg-base;
}
.login-wrap {
width: 380px;
.login-panel {
width: 360px;
background: $bg-card;
border: 1px solid $border;
border-radius: 8px;
border-top: 3px solid $sms-teal;
border-radius: 2px;
overflow: hidden;
}
.login-header {
padding: 32px 32px 24px;
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
background: $bg-panel;
border-bottom: 1px solid $border;
text-align: center;
}
.login-logo {
font-size: 20px;
font-weight: 700;
color: $sms-highlight;
letter-spacing: 2px;
margin-bottom: 8px;
span { color: $accent-yellow; }
.header-mark {
width: 36px;
height: 36px;
background: $sms-teal;
color: $bg-base;
font-size: 18px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
flex-shrink: 0;
}
.login-title {
.header-title {
font-size: 14px;
font-weight: 700;
color: $text-primary;
font-weight: 600;
margin-bottom: 4px;
letter-spacing: 2px;
}
.login-sub {
font-size: 11px;
color: $text-muted;
letter-spacing: .5px;
.header-sub {
font-size: 10px;
color: $text-secondary;
margin-top: 3px;
letter-spacing: .3px;
}
.login-form {
padding: 24px 32px;
.login-body {
padding: 24px;
}
.form-item {
.field-group {
margin-bottom: 14px;
.form-label { color: $text-secondary; font-size: 12px; margin-bottom: 6px; }
.kv-input { padding: 8px 10px; }
.field-label {
font-size: 10px;
font-weight: 700;
color: $text-secondary;
text-transform: uppercase;
letter-spacing: .6px;
margin-bottom: 6px;
}
.kv-input { padding: 7px 9px; font-size: 13px; }
}
.login-error {
margin-top: 10px;
font-size: 12px;
margin-top: 8px;
font-size: 11px;
color: $accent-red;
text-align: center;
padding: 5px 8px;
background: rgba($accent-red, .08);
border-left: 2px solid $accent-red;
}
.login-footer {
padding: 10px 32px;
padding: 8px 24px;
background: $bg-panel;
border-top: 1px solid $border;
font-size: 11px;
font-size: 10px;
color: $text-muted;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: .3px;
.dot { width: 6px; height: 6px; border-radius: 50%; &.g { background: $accent-green; } }
.dot {
width: 5px; height: 5px; border-radius: 50%; display: inline-block;
&.g { background: $status-run; }
}
}
</style>

2
frontend/src/views/Material.vue
View File

@@ -6,7 +6,7 @@
<div class="flex-row" style="flex-wrap:wrap;gap:12px;">
<div class="flex-row">
<span class="kv-label">卷号</span>
<input v-model="query.coil_no" class="kv-input" style="width:150px;" placeholder="搜索卷号..." @keyup.enter="fetchData" />
<input v-model="query.coil_no" class="kv-input" style="width:150px;" @keyup.enter="fetchData" />
</div>
<div class="flex-row">
<span class="kv-label">状态</span>

2
frontend/src/views/Message.vue
View File

@@ -5,7 +5,7 @@
<div class="flex-row" style="flex-wrap:wrap;gap:12px;">
<div class="flex-row">
<span class="kv-label">报文类型</span>
<input v-model="query.msg_type" class="kv-input" style="width:90px;" placeholder="PC01..." />
<input v-model="query.msg_type" class="kv-input" style="width:90px;" />
</div>
<div class="flex-row">
<span class="kv-label">方向</span>

2
frontend/src/views/PDI.vue
View File

@@ -164,7 +164,7 @@
</div>
<div class="form-field">
<div class="kv-label">工艺路径</div>
<input v-model="form.process_route" class="kv-input" placeholder="P1+P2+...+P6" />
<input v-model="form.process_route" class="kv-input" />
</div>
</div>

2
frontend/src/views/Plan.vue
View File

@@ -116,7 +116,7 @@
</div>
<div class="form-field">
<div class="kv-label">规格范围</div>
<input v-model="form.spec_range" class="kv-input" placeholder="如: 1.5-3.0mm" />
<input v-model="form.spec_range" class="kv-input" />
</div>
</div>
</div>

2
frontend/src/views/ProcessModel.vue
View File

@@ -233,7 +233,7 @@
</div>
<div class="form-field">
<div class="kv-label">备注（可选）</div>
<input v-model="calib.note" type="text" class="kv-input" placeholder="卷号/班次/现象描述" />
<input v-model="calib.note" type="text" class="kv-input" />
</div>
<div v-if="calcResult" class="calib-predict-row">
<span class="kv-label">模型预测速度</span>

2
frontend/src/views/Quality.vue
View File

@@ -231,7 +231,7 @@
</div>
<div class="form-field">
<div class="kv-label">缺陷位置</div>
<input v-model="form.defect_position" class="kv-input" placeholder="如: 操作侧头部" />
<input v-model="form.defect_position" class="kv-input" />
</div>
<div class="form-field">
<div class="kv-label">PI评分</div>

2
frontend/src/views/TensionModel.vue
View File

@@ -169,7 +169,7 @@
</div>
<div class="form-field">
<div class="kv-label">备注（可选）</div>
<input v-model="calib.note" type="text" class="kv-input" placeholder="卷号/传感器编号/描述" />
<input v-model="calib.note" type="text" class="kv-input" />
</div>
<button class="btn btn-primary fw" :disabled="calib.loading || !calib.measured_kn" @click="submitCalib">
{{ calib.loading ? '提交中...' : '提交修正数据' }}