YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(web): 移除顶栏 AI 快捷操作区并优化差旅领导意见事件样式

Browse Source 
- TopBar 移除 AI 模式下的公司切换/AI 模式切换快捷操作块及 showAiModeUtilityActions 计算属性，清理 top-bar.css 对应样式
- TravelRequestDetailView 领导意见事件重构为状态/意见/审批人结构化布局，travel-request-detail-view.css 补充对应样式
- 同步更新 topbar-ai-mode-switch、ai-sidebar-rail-mode、travel-request-detail-leader-approval 测试
This commit is contained in:
caoxiaozhu
2026-06-21 22:56:34 +08:00
parent 24b5b71b0f
commit 1986b0d945
7 changed files with 129 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/assets/styles/components/top-bar.css
View File

@@ -380,14 +380,6 @@
min-width: 0;
}
.topbar-utility-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 0;
}
.topbar-icon-btn {
position: relative;
width: 34px;
@@ -1329,10 +1321,6 @@
gap: 12px;
}
.topbar-utility-actions {
gap: 8px;
}
.topbar-icon-btn {
width: 30px;
height: 30px;
@@ -1413,7 +1401,6 @@
.search-wrap,
.search-wrap.wide,
.topbar-toolset,
.topbar-utility-actions,
.detail-alert-strip,
.month-chip,
.qa-filter,
@@ -1429,10 +1416,6 @@
justify-content: flex-end;
}
.topbar-utility-actions {
justify-content: flex-end;
}
.topbar-ai-mode-toggle {
width: 34px;
height: 34px;

114
web/src/assets/styles/views/travel-request-detail-view.css
View File

@@ -717,8 +717,12 @@
.application-leader-opinion {
display: grid;
gap: 10px;
margin-top: 12px;
gap: 12px;
margin-top: 14px;
padding: 14px;
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .16);
background: linear-gradient(180deg, rgba(248, 251, 255, .98) 0%, #ffffff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}
.application-leader-opinion-head {
@@ -726,7 +730,9 @@
align-items: center;
justify-content: space-between;
gap: 12px;
color: #475569;
padding-bottom: 10px;
border-bottom: 1px solid #e2e8f0;
color: #334155;
font-size: 14px;
line-height: 1.5;
}
@@ -741,15 +747,26 @@
}
.application-leader-opinion-head span i {
margin-top: 1px;
color: #334155;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--theme-primary-active, #255b7d);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .22);
border-radius: 999px;
background: rgba(var(--theme-primary-rgb, 58, 124, 165), .08);
font-size: 18px;
}
.application-leader-opinion-head strong {
padding: 4px 10px;
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), .18);
border-radius: 999px;
background: rgba(var(--theme-primary-rgb, 58, 124, 165), .08);
color: var(--theme-primary-active);
font-weight: 800;
font-size: 14px;
font-size: 13px;
}
.application-leader-opinion-timeline {
@@ -779,13 +796,19 @@
}
.application-leader-opinion-event {
--leader-opinion-tone: var(--theme-primary, #3a7ca5);
--leader-opinion-soft-bg: #f8fbff;
--leader-opinion-soft-border: #dbeafe;
position: relative;
display: grid;
gap: 8px;
padding: 12px 14px;
gap: 10px;
padding: 14px 16px 14px 18px;
border: 1px solid #dbe4ee;
border-left: 4px solid var(--leader-opinion-tone);
border-radius: 4px;
background: #ffffff;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
overflow: hidden;
}
.application-leader-opinion-event::before {
@@ -801,11 +824,23 @@
box-shadow: 0 0 0 1px rgba(var(--theme-primary-rgb, 58, 124, 165), .34);
}
.application-leader-opinion-event.danger {
--leader-opinion-tone: #dc2626;
--leader-opinion-soft-bg: #fff7f7;
--leader-opinion-soft-border: #fecaca;
}
.application-leader-opinion-event.danger::before {
background: #dc2626;
box-shadow: 0 0 0 1px rgba(220, 38, 38, .32);
}
.application-leader-opinion-event.success {
--leader-opinion-tone: #16a34a;
--leader-opinion-soft-bg: #f0fdf4;
--leader-opinion-soft-border: #bbf7d0;
}
.application-leader-opinion-event.success::before {
background: #16a34a;
box-shadow: 0 0 0 1px rgba(22, 163, 74, .32);
@@ -827,8 +862,17 @@
font-weight: 850;
}
.application-leader-opinion-event-status {
min-height: 30px;
padding: 4px 10px;
border: 1px solid var(--leader-opinion-soft-border);
border-radius: 999px;
background: var(--leader-opinion-soft-bg);
color: var(--leader-opinion-tone);
}
.application-leader-opinion-event-head i {
color: var(--theme-primary-active, #255b7d);
color: currentColor;
font-size: 16px;
}
@@ -847,10 +891,36 @@
font-weight: 720;
}
.application-leader-opinion-event p {
.application-leader-opinion-event-head time {
padding: 4px 9px;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #ffffff;
color: #475569;
white-space: nowrap;
}
.application-leader-opinion-event-body {
display: grid;
gap: 5px;
padding: 10px 12px;
border: 1px solid var(--leader-opinion-soft-border);
border-radius: 4px;
background: var(--leader-opinion-soft-bg);
}
.application-leader-opinion-event-body span {
color: #64748b;
font-size: 12px;
font-weight: 850;
line-height: 1.4;
}
.application-leader-opinion-event-body p {
margin: 0;
color: #334155;
font-size: 13px;
color: #0f172a;
font-size: 15px;
font-weight: 850;
line-height: 1.65;
}
@@ -860,6 +930,23 @@
gap: 8px;
}
.application-leader-opinion-event-foot span {
min-height: 26px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #ffffff;
color: #475569;
}
.application-leader-opinion-event-foot i {
color: var(--leader-opinion-tone);
font-size: 14px;
}
.detail-expense-table {
--expense-editor-control-height: 34px;
--expense-editor-control-line-height: 16px;
@@ -2361,4 +2448,3 @@
border-left: 0;
}
}

18
web/src/components/layout/TopBar.vue
View File

@@ -367,23 +367,6 @@
</div>
</template>
<div v-if="showAiModeUtilityActions" class="topbar-utility-actions" aria-label="AI模式快捷操作">
<button class="company-switcher" type="button" aria-label="切换公司">
<span>{{ displayCompanyName }}</span>
<i class="mdi mdi-chevron-down"></i>
</button>
<button
type="button"
class="topbar-ai-mode-toggle"
:class="{ active: isTopbarAiMode }"
:aria-pressed="isTopbarAiMode"
:aria-label="topbarWorkbenchModeTitle"
:title="topbarWorkbenchModeTitle"
@click="toggleTopbarWorkbenchMode"
>
<span class="topbar-ai-mode-toggle__glyph">AI</span>
</button>
</div>
</div>
</header>
</template>
@@ -488,7 +471,6 @@ const displayCompanyName = computed(() => String(props.companyName || '远光软
const isTopbarAiMode = computed(() => props.workbenchMode === 'ai')
const topbarWorkbenchModeTitle = computed(() => (isTopbarAiMode.value ? 'AI 模式，点击切换传统模式' : '传统模式，点击切换 AI 模式'))
const isWorkbenchAiHome = computed(() => isWorkbench.value && isTopbarAiMode.value)
const showAiModeUtilityActions = computed(() => isTopbarAiMode.value && !isWorkbench.value)
const MAX_NOTIFICATION_ITEMS = 30
const {
markDocumentInboxRowRead,

14
web/src/views/TravelRequestDetailView.vue
View File

@@ -165,15 +165,21 @@
:class="event.tone"
>
<div class="application-leader-opinion-event-head">
<span>
<span class="application-leader-opinion-event-status">
<i :class="event.type === 'returned' ? 'mdi mdi-arrow-u-left-top' : 'mdi mdi-check-circle-outline'"></i>
{{ event.title }}
</span>
<time v-if="event.time">{{ event.time }}</time>
</div>
<p>{{ event.opinion }}</p>
<footer>
<span>{{ event.operator }}</span>
<div class="application-leader-opinion-event-body">
<span>意见</span>
<p>{{ event.opinion }}</p>
</div>
<footer class="application-leader-opinion-event-foot">
<span class="application-leader-opinion-operator">
<em>审批人</em>
{{ event.operator }}
</span>
<span v-if="event.returnCount">第 {{ event.returnCount }} 次退回</span>
</footer>
</article>