refactor(client): 优化页面多处细节与样式兼容性
1. 调整全局滚动条样式仅适配Firefox浏览器,修复Chrome下表头错位问题 2. 替换站点logo为Ant Design风格图标并优化样式 3. 重构客户拜访列表操作栏:合并详情按钮到下拉菜单,缩小操作列宽度 4. 优化操作按钮文本与主键判断逻辑,使用key替代文本匹配
This commit is contained in:
1 parent
4fe77be1af
commit
ae79d5157b
4 files changed
+27
-19
No files matched your search
@@ -1,4 +1,3 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="32" height="32" viewBox="64 64 896 896" xmlns="http://www.w3.org/2000/svg">
|
||||||
<rect width="32" height="32" fill="#0A0B0D"/>
|
<path fill="#1890ff" d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"/>
|
||||||
<path d="M26.6677 23.7149H8.38057V20.6496H5.33301V8.38159H26.6677V23.7149ZM8.38057 20.6496H23.6201V11.4482H8.38057V20.6496ZM16.0011 16.0021L13.8461 18.1705L11.6913 16.0021L13.8461 13.8337L16.0011 16.0021ZM22.0963 16.0008L19.9414 18.1691L17.7865 16.0008L19.9414 13.8324L22.0963 16.0008Z" fill="#32F08C"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 453 B After Width: | Height: | Size: 379 B |
@@ -296,10 +296,14 @@ ol {
|
|||||||
background: rgba(255, 255, 255, 0.4);
|
background: rgba(255, 255, 255, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Firefox
|
// Firefox 专用(Chrome/Edge 不支持 -moz-appearance,会忽略整块)
|
||||||
* {
|
// 注意:Chrome 121+ 一旦设置 scrollbar-width,就会覆盖上面的 ::-webkit-scrollbar,
|
||||||
|
// 导致滚动条实际 10px 而 ::-webkit-scrollbar 仍报 4px,antd 据此计算固定列偏移会让表头与表体错位 6px
|
||||||
|
@supports (-moz-appearance: none) {
|
||||||
|
* {
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Firefox 深色变体
|
// Firefox 深色变体
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<div class="sider-inner">
|
<div class="sider-inner">
|
||||||
<!-- Logo区域 -->
|
<!-- Logo区域 -->
|
||||||
<div class="logo" @click="$router.push('/dashboard')">
|
<div class="logo" @click="$router.push('/dashboard')">
|
||||||
<img src="@/assets/vue.svg" alt="logo" class="logo-img" />
|
<ThunderboltOutlined class="logo-img" />
|
||||||
<h1 v-show="!collapsed" class="logo-title">智能电网IoT</h1>
|
<h1 v-show="!collapsed" class="logo-title">智能电网IoT</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -114,6 +114,7 @@ import {
|
|||||||
DownOutlined,
|
DownOutlined,
|
||||||
LogoutOutlined,
|
LogoutOutlined,
|
||||||
LockOutlined,
|
LockOutlined,
|
||||||
|
ThunderboltOutlined,
|
||||||
} from '@ant-design/icons-vue'
|
} from '@ant-design/icons-vue'
|
||||||
import { usePermissionStore, type MenuNode } from '@/stores/permission'
|
import { usePermissionStore, type MenuNode } from '@/stores/permission'
|
||||||
|
|
||||||
@@ -331,8 +332,9 @@ function handleUserMenuClick({ key }: { key: string }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo-img {
|
.logo-img {
|
||||||
width: 32px;
|
font-size: 32px;
|
||||||
height: 32px;
|
color: #1890ff;
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(24, 144, 255, 0.3));
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -233,11 +233,11 @@
|
|||||||
size="small"
|
size="small"
|
||||||
@click="handlePrimary(record)"
|
@click="handlePrimary(record)"
|
||||||
>{{ primaryAction(record)!.label }}</a-button>
|
>{{ primaryAction(record)!.label }}</a-button>
|
||||||
<a-button type="link" size="small" @click="openDetail(record)">查看详情</a-button>
|
|
||||||
<a-dropdown trigger="click">
|
<a-dropdown trigger="click">
|
||||||
<a-button type="link" size="small">更多 <DownOutlined /></a-button>
|
<a-button type="link" size="small">更多 <DownOutlined /></a-button>
|
||||||
<template #overlay>
|
<template #overlay>
|
||||||
<a-menu @click="({ key }) => handleMore(key as string, record)">
|
<a-menu @click="({ key }) => handleMore(key as string, record)">
|
||||||
|
<a-menu-item key="detail">查看详情</a-menu-item>
|
||||||
<a-menu-item key="edit">编辑</a-menu-item>
|
<a-menu-item key="edit">编辑</a-menu-item>
|
||||||
<a-menu-item v-if="canSurvey(record)" key="survey">一键发起勘察派单</a-menu-item>
|
<a-menu-item v-if="canSurvey(record)" key="survey">一键发起勘察派单</a-menu-item>
|
||||||
<a-menu-item v-if="record.status === 0" key="reassign">改派</a-menu-item>
|
<a-menu-item v-if="record.status === 0" key="reassign">改派</a-menu-item>
|
||||||
@@ -550,7 +550,7 @@ const columns = [
|
|||||||
{ title: '计划与到场时间 / GPS签到', key: 'plan', width: 190 },
|
{ title: '计划与到场时间 / GPS签到', key: 'plan', width: 190 },
|
||||||
{ title: '现场意向与成果评级', key: 'intent', width: 190 },
|
{ title: '现场意向与成果评级', key: 'intent', width: 190 },
|
||||||
{ title: '当前状态', key: 'status', width: 140, align: 'center' as const },
|
{ title: '当前状态', key: 'status', width: 140, align: 'center' as const },
|
||||||
{ title: '操作', key: 'action', width: 230, align: 'center' as const, fixed: 'right' as const },
|
{ title: '操作', key: 'action', width: 170, align: 'center' as const, fixed: 'right' as const },
|
||||||
];
|
];
|
||||||
|
|
||||||
const rowSelection = computed(() => ({
|
const rowSelection = computed(() => ({
|
||||||
@@ -762,24 +762,27 @@ function canSurvey(record: CustomerVisitInfo) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function primaryAction(record: CustomerVisitInfo): { label: string } | null {
|
type PrimaryActionKey = 'follow' | 'review' | 'project' | 'survey';
|
||||||
if (record.status === VISIT_STATUS.PENDING) return { label: '执行跟进' };
|
|
||||||
if (record.status === VISIT_STATUS.EVIDENCE) return { label: '审核现场取证' };
|
function primaryAction(record: CustomerVisitInfo): { key: PrimaryActionKey; label: string } | null {
|
||||||
if (record.status === VISIT_STATUS.SURVEY) return { label: '查看关联工程' };
|
if (record.status === VISIT_STATUS.PENDING) return { key: 'follow', label: '执行跟进' };
|
||||||
if (canSurvey(record)) return { label: '一键发起勘察派单' };
|
if (record.status === VISIT_STATUS.EVIDENCE) return { key: 'review', label: '审核取证' };
|
||||||
|
if (record.status === VISIT_STATUS.SURVEY) return { key: 'project', label: '查看工程' };
|
||||||
|
if (canSurvey(record)) return { key: 'survey', label: '发起派单' };
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handlePrimary(record: CustomerVisitInfo) {
|
function handlePrimary(record: CustomerVisitInfo) {
|
||||||
const action = primaryAction(record);
|
const action = primaryAction(record);
|
||||||
if (!action) return;
|
if (!action) return;
|
||||||
if (action.label === '执行跟进') return handleFollow(record);
|
if (action.key === 'follow') return handleFollow(record);
|
||||||
if (action.label === '审核现场取证') return openReview(record);
|
if (action.key === 'review') return openReview(record);
|
||||||
if (action.label === '查看关联工程') return handleViewProject(record);
|
if (action.key === 'project') return handleViewProject(record);
|
||||||
if (action.label === '一键发起勘察派单') return handleSurvey(record);
|
if (action.key === 'survey') return handleSurvey(record);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleMore(key: string, record: CustomerVisitInfo) {
|
function handleMore(key: string, record: CustomerVisitInfo) {
|
||||||
|
if (key === 'detail') return openDetail(record);
|
||||||
if (key === 'edit') return router.push({ name: 'CustomerVisitEdit', params: { id: record.id } });
|
if (key === 'edit') return router.push({ name: 'CustomerVisitEdit', params: { id: record.id } });
|
||||||
if (key === 'survey') return handleSurvey(record);
|
if (key === 'survey') return handleSurvey(record);
|
||||||
if (key === 'reassign') return openReassign(record);
|
if (key === 'reassign') return openReassign(record);
|
||||||
|
|||||||
Reference in new issue
Block a user