style(frontend): 去掉刷新提示条、隐藏弹窗滚动条并前置时区列
- 刷新按钮保持「刷新」文案,不再出现「同步中...」和顶部进度条,仅禁用防重复点击 - 任务编辑器 / 目录选择弹窗隐藏滚动条,滚轮与触控板仍可滚动 - 任务表「时区」列移到「调度周期」前面
This commit is contained in:
+15
-41
@@ -62,44 +62,9 @@
|
||||
/* ---------- 任务列表 ---------- */
|
||||
|
||||
.task-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 手动刷新时的顶部进度条:不改变表格布局,也避免旧数据看起来像「残影」 */
|
||||
.refresh-bar {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
overflow: hidden;
|
||||
background-color: var(--su-color-primary-soft);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.refresh-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 40%;
|
||||
background-color: var(--su-color-primary);
|
||||
animation: refresh-slide 1.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes refresh-slide {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(250%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 表格嵌在卡片里:去掉自身描边与圆角,避免「卡片套卡片」 */
|
||||
.task-table {
|
||||
border: 0;
|
||||
@@ -134,12 +99,6 @@
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* 「刷新」和「同步中...」字数不同,固定宽度避免刷新时工具栏左右跳动 */
|
||||
.refresh-button {
|
||||
min-width: 68px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.task-name-cell {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
@@ -246,6 +205,21 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 弹窗内容仍可用滚轮 / 触控板滚动,但不显示右侧滚动条 */
|
||||
.task-editor-modal > div,
|
||||
.directory-picker-modal > div,
|
||||
.directory-picker-body {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.task-editor-modal > div::-webkit-scrollbar,
|
||||
.directory-picker-modal > div::-webkit-scrollbar,
|
||||
.directory-picker-body::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.task-editor-modal > header,
|
||||
.task-editor-modal > footer {
|
||||
flex: none;
|
||||
|
||||
@@ -69,8 +69,8 @@ const ACTION_TYPE_OPTIONS = [
|
||||
|
||||
const TABLE_COLUMNS: TableColumn[] = [
|
||||
{ key: 'name', title: '名称 / 任务标识', width: 250 },
|
||||
{ key: 'schedule', title: '调度周期', width: 210 },
|
||||
{ key: 'timezone', title: '时区', width: 120 },
|
||||
{ key: 'schedule', title: '调度周期', width: 210 },
|
||||
{ key: 'status', title: '状态', width: 110 },
|
||||
{ key: 'timeout', title: '超时', width: 90 },
|
||||
{ key: 'actions', title: '操作', align: 'right', width: 260 },
|
||||
@@ -378,9 +378,6 @@ export function TaskDashboard() {
|
||||
</section>
|
||||
|
||||
<Card padding="none" className="task-card">
|
||||
{refreshing ? (
|
||||
<div className="refresh-bar" role="progressbar" aria-label="正在刷新" />
|
||||
) : null}
|
||||
<div className="toolbar">
|
||||
<SearchField
|
||||
className="toolbar-search"
|
||||
@@ -420,11 +417,10 @@ export function TaskDashboard() {
|
||||
</TextButton>
|
||||
) : null}
|
||||
<TextButton
|
||||
className="refresh-button"
|
||||
onClick={() => void refreshAll()}
|
||||
disabled={refreshing}
|
||||
>
|
||||
{refreshing ? '同步中...' : '刷新'}
|
||||
刷新
|
||||
</TextButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user