style(frontend): 去掉刷新提示条、隐藏弹窗滚动条并前置时区列

- 刷新按钮保持「刷新」文案,不再出现「同步中...」和顶部进度条,仅禁用防重复点击
- 任务编辑器 / 目录选择弹窗隐藏滚动条,滚轮与触控板仍可滚动
- 任务表「时区」列移到「调度周期」前面
This commit is contained in:
2026-11-02 23:43:31 +08:00
parent c7a66c22b6
commit d7a6e17531
2 changed files with 17 additions and 47 deletions
+15 -41
View File
@@ -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;
+2 -6
View File
@@ -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>