style(frontend): 去掉刷新提示条、隐藏弹窗滚动条并前置时区列
- 刷新按钮保持「刷新」文案,不再出现「同步中...」和顶部进度条,仅禁用防重复点击 - 任务编辑器 / 目录选择弹窗隐藏滚动条,滚轮与触控板仍可滚动 - 任务表「时区」列移到「调度周期」前面
This commit is contained in:
+15
-41
@@ -62,44 +62,9 @@
|
|||||||
/* ---------- 任务列表 ---------- */
|
/* ---------- 任务列表 ---------- */
|
||||||
|
|
||||||
.task-card {
|
.task-card {
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
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 {
|
.task-table {
|
||||||
border: 0;
|
border: 0;
|
||||||
@@ -134,12 +99,6 @@
|
|||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 「刷新」和「同步中...」字数不同,固定宽度避免刷新时工具栏左右跳动 */
|
|
||||||
.refresh-button {
|
|
||||||
min-width: 68px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-name-cell {
|
.task-name-cell {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -246,6 +205,21 @@
|
|||||||
overflow-y: auto;
|
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 > header,
|
||||||
.task-editor-modal > footer {
|
.task-editor-modal > footer {
|
||||||
flex: none;
|
flex: none;
|
||||||
|
|||||||
@@ -69,8 +69,8 @@ const ACTION_TYPE_OPTIONS = [
|
|||||||
|
|
||||||
const TABLE_COLUMNS: TableColumn[] = [
|
const TABLE_COLUMNS: TableColumn[] = [
|
||||||
{ key: 'name', title: '名称 / 任务标识', width: 250 },
|
{ key: 'name', title: '名称 / 任务标识', width: 250 },
|
||||||
{ key: 'schedule', title: '调度周期', width: 210 },
|
|
||||||
{ key: 'timezone', title: '时区', width: 120 },
|
{ key: 'timezone', title: '时区', width: 120 },
|
||||||
|
{ key: 'schedule', title: '调度周期', width: 210 },
|
||||||
{ key: 'status', title: '状态', width: 110 },
|
{ key: 'status', title: '状态', width: 110 },
|
||||||
{ key: 'timeout', title: '超时', width: 90 },
|
{ key: 'timeout', title: '超时', width: 90 },
|
||||||
{ key: 'actions', title: '操作', align: 'right', width: 260 },
|
{ key: 'actions', title: '操作', align: 'right', width: 260 },
|
||||||
@@ -378,9 +378,6 @@ export function TaskDashboard() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<Card padding="none" className="task-card">
|
<Card padding="none" className="task-card">
|
||||||
{refreshing ? (
|
|
||||||
<div className="refresh-bar" role="progressbar" aria-label="正在刷新" />
|
|
||||||
) : null}
|
|
||||||
<div className="toolbar">
|
<div className="toolbar">
|
||||||
<SearchField
|
<SearchField
|
||||||
className="toolbar-search"
|
className="toolbar-search"
|
||||||
@@ -420,11 +417,10 @@ export function TaskDashboard() {
|
|||||||
</TextButton>
|
</TextButton>
|
||||||
) : null}
|
) : null}
|
||||||
<TextButton
|
<TextButton
|
||||||
className="refresh-button"
|
|
||||||
onClick={() => void refreshAll()}
|
onClick={() => void refreshAll()}
|
||||||
disabled={refreshing}
|
disabled={refreshing}
|
||||||
>
|
>
|
||||||
{refreshing ? '同步中...' : '刷新'}
|
刷新
|
||||||
</TextButton>
|
</TextButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user