feat(ui): finalize shared shells and loading states
This commit is contained in:
caoxiaozhu
@@ -6,13 +6,21 @@
|
||||
:error="errorMessage"
|
||||
:empty="!visibleEmployees.length"
|
||||
:empty-state="emptyState"
|
||||
:show-pagination="!loading && !errorMessage && visibleEmployees.length > 0"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:pages="pageNumbers"
|
||||
:show-page-size="false"
|
||||
:summary="paginationSummary"
|
||||
:total="visibleEmployees.length"
|
||||
:total-pages="totalPages"
|
||||
loading-title="数字员工资产同步中"
|
||||
loading-message="正在加载数字员工资产"
|
||||
loading-icon="mdi mdi-view-list-outline"
|
||||
hint="归集后台自动执行的数字员工技能，可查看技能内容、执行计划、启动状态和最近版本。"
|
||||
@update:current-page="currentPage = $event"
|
||||
>
|
||||
<template #filters>
|
||||
<label class="search-filter">
|
||||
<label class="list-search">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
<input
|
||||
:value="keyword"
|
||||
@@ -127,51 +135,21 @@
|
||||
@click="emit('open-employee-detail', employee)"
|
||||
>
|
||||
<td>
|
||||
<div class="skill-name-cell">
|
||||
<span class="skill-avatar" :class="employee.badgeTone">{{ employee.short }}</span>
|
||||
<div>
|
||||
<strong>{{ employee.name }}</strong>
|
||||
<span class="skill-list-subtitle">{{ employee.summary || employee.code }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<strong class="doc-id">{{ employee.name }}</strong>
|
||||
</td>
|
||||
<td><span class="scope-pill skill-type-pill">{{ employee.skillCategory }}</span></td>
|
||||
<td><span class="doc-kind-tag application">{{ employee.skillCategory }}</span></td>
|
||||
<td>{{ employee.owner }}</td>
|
||||
<td><span class="scope-pill">{{ employee.scope }}</span></td>
|
||||
<td><span class="type-tag other">{{ employee.scope }}</span></td>
|
||||
<td>{{ employee.executionMode }}</td>
|
||||
<td>
|
||||
<span :class="['status-pill', employee.statusTone]">{{ employee.status }}</span>
|
||||
<span :class="['status-tag', employee.statusTone]">{{ employee.status }}</span>
|
||||
</td>
|
||||
<td><span :class="['status-pill', employee.enabledTone]">{{ employee.enabledLabel }}</span></td>
|
||||
<td><span :class="['status-tag', employee.enabledTone]">{{ employee.enabledLabel }}</span></td>
|
||||
<td>{{ employee.updatedAt || '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<footer v-if="!loading && !errorMessage && visibleEmployees.length" class="list-foot digital-employee-pagination">
|
||||
<span class="page-summary">共 {{ visibleEmployees.length }} 条，目前第 {{ currentPage }} / {{ totalPages }} 页</span>
|
||||
<div class="pager" aria-label="员工技能分页">
|
||||
<button class="page-nav" type="button" :disabled="currentPage === 1" @click="currentPage--">
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</button>
|
||||
<button
|
||||
v-for="page in pageNumbers"
|
||||
:key="page"
|
||||
class="page-number"
|
||||
:class="{ active: currentPage === page }"
|
||||
type="button"
|
||||
@click="currentPage = page"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button class="page-nav" type="button" :disabled="currentPage === totalPages" @click="currentPage++">
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
</EnterpriseListPage>
|
||||
</template>
|
||||
|
||||
@@ -228,6 +206,9 @@ const pageNumbers = computed(() => {
|
||||
const start = Math.max(1, Math.min(currentPage.value - 3, total - 6))
|
||||
return Array.from({ length: 7 }, (_, index) => start + index)
|
||||
})
|
||||
const paginationSummary = computed(() =>
|
||||
`共 ${props.visibleEmployees.length} 条，目前第 ${currentPage.value} / ${totalPages.value} 页`
|
||||
)
|
||||
const emptyState = {
|
||||
eyebrow: '数字员工',
|
||||
title: '暂无匹配的数字员工',
|
||||
@@ -261,7 +242,7 @@ function selectFilter(type, value) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped src="../../assets/styles/views/audit-view.css"></style>
|
||||
<style scoped src="../../assets/styles/views/digital-employees-view.css"></style>
|
||||
|
||||
<style scoped>
|
||||
.digital-employee-list-panel {
|
||||
@@ -269,62 +250,8 @@ function selectFilter(type, value) {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel :deep(.table-wrap) {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .digital-employee-pagination {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .digital-employee-pagination .page-summary {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager button:hover:not(.active):not(:disabled) {
|
||||
background: #fff;
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager button.active {
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager button:disabled {
|
||||
color: #cbd5e1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,104 +2,114 @@
|
||||
<section class="digital-employee-list-panel digital-work-records">
|
||||
<Transition name="skill-view" mode="out-in">
|
||||
<!-- 列表视图 -->
|
||||
<div v-if="!selectedRunDetail" key="list" class="digital-work-records-list-stage">
|
||||
<div class="list-toolbar">
|
||||
<div class="filter-set">
|
||||
<label class="search-filter">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
<input
|
||||
v-model="listKeyword"
|
||||
type="search"
|
||||
placeholder="搜索摘要、Run ID..."
|
||||
/>
|
||||
</label>
|
||||
|
||||
<AuditPickerFilter
|
||||
id="module"
|
||||
title="选择工作模块"
|
||||
close-label="关闭选择"
|
||||
:active-filter-popover="activeFilterPopover"
|
||||
:label="activeModule === '全部' ? '工作模块' : activeModule"
|
||||
:options="modulePickerOptions"
|
||||
:selected-value="activeModule"
|
||||
@toggle="toggleFilterPopover"
|
||||
@close="closeFilterPopover"
|
||||
@select="selectModule"
|
||||
<EnterpriseListPage
|
||||
v-if="!selectedRunDetail"
|
||||
key="list"
|
||||
variant="digital-employee-list-panel digital-work-records-list-stage"
|
||||
:panel="false"
|
||||
:loading="loading && !runs.length"
|
||||
:error="errorMessage"
|
||||
:empty="!visibleRuns.length"
|
||||
:empty-state="workRecordsEmptyState"
|
||||
:show-pagination="!loading && !errorMessage && visibleRuns.length > 0"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:pages="pageNumbers"
|
||||
:show-page-size="false"
|
||||
:summary="paginationSummary"
|
||||
:total="filteredRuns.length"
|
||||
:total-pages="totalPages"
|
||||
loading-title="工作记录同步中"
|
||||
loading-message="正在读取数字员工近期执行记录"
|
||||
loading-icon="mdi mdi-clipboard-text-clock-outline"
|
||||
error-title="工作记录加载失败"
|
||||
@update:current-page="currentPage = $event"
|
||||
>
|
||||
<template #filters>
|
||||
<label class="list-search">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
<input
|
||||
v-model="listKeyword"
|
||||
type="search"
|
||||
placeholder="搜索摘要、Run ID..."
|
||||
/>
|
||||
</label>
|
||||
|
||||
<AuditPickerFilter
|
||||
id="status"
|
||||
title="选择执行状态"
|
||||
close-label="关闭选择"
|
||||
:active-filter-popover="activeFilterPopover"
|
||||
:label="activeStatus === '全部' ? '执行状态' : activeStatus"
|
||||
:options="statusPickerOptions"
|
||||
:selected-value="activeStatus"
|
||||
@toggle="toggleFilterPopover"
|
||||
@close="closeFilterPopover"
|
||||
@select="selectStatus"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<button
|
||||
v-if="listKeyword || activeFilterTokens.length"
|
||||
class="ghost-filter-btn"
|
||||
type="button"
|
||||
@click="resetFilters"
|
||||
>
|
||||
<i class="mdi mdi-filter-remove-outline"></i>
|
||||
<span>清空筛选</span>
|
||||
</button>
|
||||
<button
|
||||
class="create-btn digital-refresh-action"
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
@click="loadWorkRecords(true)"
|
||||
>
|
||||
<i class="mdi mdi-refresh"></i>
|
||||
<span>{{ loading ? '刷新中...' : '刷新' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="hint">
|
||||
<i class="mdi mdi-information-outline"></i>
|
||||
查看数字员工近期执行记录、状态和结果摘要。
|
||||
</p>
|
||||
|
||||
<div v-if="activeFilterTokens.length" class="active-filter-strip">
|
||||
<span v-for="token in activeFilterTokens" :key="token" class="active-filter-chip">
|
||||
{{ token }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap digital-table-wrap" :class="{ 'is-empty': !loading && !errorMessage && !visibleRuns.length }">
|
||||
<div v-if="loading && !runs.length" class="table-state">
|
||||
<TableLoadingState
|
||||
variant="panel"
|
||||
title="工作记录同步中"
|
||||
message="正在读取数字员工近期执行记录"
|
||||
icon="mdi mdi-clipboard-text-clock-outline"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="errorMessage" class="table-state error">
|
||||
<i class="mdi mdi-alert-circle-outline"></i>
|
||||
<p>{{ errorMessage }}</p>
|
||||
</div>
|
||||
|
||||
<TableEmptyState
|
||||
v-else-if="!visibleRuns.length"
|
||||
eyebrow="工作记录"
|
||||
title="暂无匹配的工作记录"
|
||||
description="当前没有符合搜索条件的数字员工工作记录。"
|
||||
icon="mdi mdi-clipboard-text-clock-outline"
|
||||
tone="theme"
|
||||
art-label="RECORDS"
|
||||
<AuditPickerFilter
|
||||
id="module"
|
||||
title="选择工作模块"
|
||||
close-label="关闭选择"
|
||||
:active-filter-popover="activeFilterPopover"
|
||||
:label="activeModule === '全部' ? '工作模块' : activeModule"
|
||||
:options="modulePickerOptions"
|
||||
:selected-value="activeModule"
|
||||
@toggle="toggleFilterPopover"
|
||||
@close="closeFilterPopover"
|
||||
@select="selectModule"
|
||||
/>
|
||||
|
||||
<table v-else class="digital-employees-table digital-work-records-table">
|
||||
<AuditPickerFilter
|
||||
id="status"
|
||||
title="选择执行状态"
|
||||
close-label="关闭选择"
|
||||
:active-filter-popover="activeFilterPopover"
|
||||
:label="activeStatus === '全部' ? '执行状态' : activeStatus"
|
||||
:options="statusPickerOptions"
|
||||
:selected-value="activeStatus"
|
||||
@toggle="toggleFilterPopover"
|
||||
@close="closeFilterPopover"
|
||||
@select="selectStatus"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<button
|
||||
v-if="listKeyword || activeFilterTokens.length"
|
||||
class="ghost-filter-btn"
|
||||
type="button"
|
||||
@click="resetFilters"
|
||||
>
|
||||
<i class="mdi mdi-filter-remove-outline"></i>
|
||||
<span>清空筛选</span>
|
||||
</button>
|
||||
<AuditPickerFilter
|
||||
id="refreshInterval"
|
||||
title="选择刷新时间"
|
||||
close-label="关闭刷新时间选择"
|
||||
:active-filter-popover="activeFilterPopover"
|
||||
:label="`刷新时间 ${refreshIntervalLabel}`"
|
||||
:options="refreshIntervalPickerOptions"
|
||||
:selected-value="refreshInterval"
|
||||
@toggle="toggleFilterPopover"
|
||||
@close="closeFilterPopover"
|
||||
@select="changeRefreshInterval"
|
||||
/>
|
||||
<button
|
||||
class="create-btn digital-refresh-action digital-refresh-now"
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
aria-label="立即刷新工作记录"
|
||||
@click="loadWorkRecords(true)"
|
||||
>
|
||||
<i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'"></i>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #meta>
|
||||
<div v-if="activeFilterTokens.length" class="active-filter-strip">
|
||||
<span v-for="token in activeFilterTokens" :key="token" class="active-filter-chip">
|
||||
{{ token }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #error>
|
||||
<i class="mdi mdi-alert-circle-outline"></i>
|
||||
<p>{{ errorMessage }}</p>
|
||||
</template>
|
||||
|
||||
<template #table>
|
||||
<table class="digital-work-records-table">
|
||||
<colgroup>
|
||||
<col class="col-time">
|
||||
<col class="col-module">
|
||||
@@ -132,12 +142,9 @@
|
||||
<td>{{ resolveWorkRecordModuleLabel(run) }}</td>
|
||||
<td>{{ resolveWorkRecordSourceLabel(run.source) }}</td>
|
||||
<td>
|
||||
<div class="work-record-status-stack">
|
||||
<span class="status-pill" :class="resolveWorkRecordStatusTone(run)">
|
||||
{{ resolveWorkRecordStatusLabel(run) }}
|
||||
</span>
|
||||
<span>{{ resolveWorkRecordStatusNote(run) }}</span>
|
||||
</div>
|
||||
<span class="status-tag" :class="resolveWorkRecordStatusTone(run)">
|
||||
{{ resolveWorkRecordStatusLabel(run) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="work-record-summary-cell">
|
||||
<strong>{{ resolveWorkRecordTitle(run) }}</strong>
|
||||
@@ -148,30 +155,8 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<footer v-if="!loading && !errorMessage && visibleRuns.length" class="list-foot digital-employee-pagination">
|
||||
<span class="page-summary">共 {{ filteredRuns.length }} 条，目前第 {{ currentPage }} / {{ totalPages }} 页</span>
|
||||
<div class="pager" aria-label="工作记录分页">
|
||||
<button class="page-nav" type="button" :disabled="currentPage === 1" @click="currentPage--">
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</button>
|
||||
<button
|
||||
v-for="page in pageNumbers"
|
||||
:key="page"
|
||||
class="page-number"
|
||||
:class="{ active: currentPage === page }"
|
||||
type="button"
|
||||
@click="currentPage = page"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button class="page-nav" type="button" :disabled="currentPage === totalPages" @click="currentPage++">
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
</EnterpriseListPage>
|
||||
|
||||
<!-- 详情视图 (全屏样式，参考 AuditJsonRiskRuleDetail) -->
|
||||
<div v-else key="detail" class="json-risk-editor-shell panel work-records-detail-stage">
|
||||
@@ -298,11 +283,15 @@
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import AuditPickerFilter from './AuditPickerFilter.vue'
|
||||
import TableEmptyState from '../shared/TableEmptyState.vue'
|
||||
import EnterpriseListPage from '../shared/EnterpriseListPage.vue'
|
||||
import TableLoadingState from '../shared/TableLoadingState.vue'
|
||||
import { fetchAgentRunDetail, fetchAgentRuns } from '../../services/agentAssets.js'
|
||||
import { useToast } from '../../composables/useToast.js'
|
||||
import { AGENT_RUN_POLL_INTERVAL_MS } from '../../utils/agentRunMonitor.js'
|
||||
import {
|
||||
DEFAULT_REFRESH_INTERVAL_MS,
|
||||
REFRESH_INTERVAL_OPTIONS,
|
||||
formatRefreshInterval
|
||||
} from '../../utils/refreshIntervalOptions.js'
|
||||
import {
|
||||
formatWorkRecordDateTime,
|
||||
formatWorkRecordSummary,
|
||||
@@ -330,6 +319,7 @@ const detailLoading = ref(false)
|
||||
const detailError = ref('')
|
||||
const selectedRunId = ref('')
|
||||
const selectedRunDetail = ref(null)
|
||||
const refreshInterval = ref(DEFAULT_REFRESH_INTERVAL_MS)
|
||||
|
||||
watch(detailOpen, (newVal) => {
|
||||
emit('detail-open-change', newVal)
|
||||
@@ -392,6 +382,14 @@ const listKeyword = ref('')
|
||||
const activeModule = ref('全部')
|
||||
const activeStatus = ref('全部')
|
||||
const activeFilterPopover = ref('')
|
||||
const workRecordsEmptyState = {
|
||||
eyebrow: '工作记录',
|
||||
title: '暂无匹配的工作记录',
|
||||
description: '当前没有符合搜索条件的数字员工工作记录。',
|
||||
icon: 'mdi mdi-clipboard-text-clock-outline',
|
||||
tone: 'theme',
|
||||
artLabel: 'RECORDS'
|
||||
}
|
||||
|
||||
const modulePickerOptions = computed(() => {
|
||||
const set = new Set(runs.value.map((run) => resolveWorkRecordModuleLabel(run)))
|
||||
@@ -408,6 +406,11 @@ const statusPickerOptions = computed(() => {
|
||||
...Array.from(set).map(s => ({ label: s, value: s }))
|
||||
]
|
||||
})
|
||||
const refreshIntervalPickerOptions = REFRESH_INTERVAL_OPTIONS.map((option) => ({
|
||||
label: `每 ${option.label}`,
|
||||
value: option.value
|
||||
}))
|
||||
const refreshIntervalLabel = computed(() => formatRefreshInterval(refreshInterval.value))
|
||||
|
||||
const activeFilterTokens = computed(() => {
|
||||
const tokens = []
|
||||
@@ -449,6 +452,9 @@ const pageNumbers = computed(() => {
|
||||
const start = Math.max(1, Math.min(currentPage.value - 3, total - 6))
|
||||
return Array.from({ length: 7 }, (_, index) => start + index)
|
||||
})
|
||||
const paginationSummary = computed(() =>
|
||||
`共 ${filteredRuns.value.length} 条，目前第 ${currentPage.value} / ${totalPages.value} 页`
|
||||
)
|
||||
|
||||
watch(
|
||||
() => [listKeyword.value, activeModule.value, activeStatus.value],
|
||||
@@ -486,6 +492,12 @@ function selectStatus(val) {
|
||||
closeFilterPopover()
|
||||
}
|
||||
|
||||
function changeRefreshInterval(value) {
|
||||
refreshInterval.value = Number(value) || DEFAULT_REFRESH_INTERVAL_MS
|
||||
closeFilterPopover()
|
||||
startPolling()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
listKeyword.value = ''
|
||||
activeModule.value = '全部'
|
||||
@@ -564,7 +576,7 @@ function startPolling() {
|
||||
stopPolling()
|
||||
pollTimer = window.setInterval(() => {
|
||||
loadWorkRecords(false)
|
||||
}, AGENT_RUN_POLL_INTERVAL_MS)
|
||||
}, refreshInterval.value)
|
||||
}
|
||||
|
||||
function stopPolling() {
|
||||
@@ -586,86 +598,104 @@ onBeforeUnmount(() => {
|
||||
|
||||
<style scoped src="../../assets/styles/views/audit-view.css"></style>
|
||||
<style scoped src="../../assets/styles/views/audit-view-part2.css"></style>
|
||||
<style scoped src="../../assets/styles/views/digital-employees-view.css"></style>
|
||||
<style scoped src="../../assets/styles/components/digital-employee-work-records.css"></style>
|
||||
|
||||
<style scoped>
|
||||
.digital-employee-list-panel {
|
||||
.digital-work-records {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel,
|
||||
.digital-work-records-list-stage {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .digital-table-wrap {
|
||||
.digital-work-records-table {
|
||||
min-width: 1180px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.digital-work-records-table .col-time { width: 14%; }
|
||||
.digital-work-records-table .col-module { width: 13%; }
|
||||
.digital-work-records-table .col-source { width: 10%; }
|
||||
.digital-work-records-table .col-status { width: 16%; }
|
||||
.digital-work-records-table .col-summary { width: 31%; }
|
||||
.digital-work-records-table .col-trace { width: 16%; }
|
||||
|
||||
.work-record-row {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.work-record-row:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px rgba(58, 124, 165, 0.28);
|
||||
}
|
||||
|
||||
.work-record-summary-cell {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.work-record-summary-cell strong,
|
||||
.work-record-summary-cell span,
|
||||
.work-record-summary-cell em {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.work-record-summary-cell strong {
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.work-record-summary-cell span {
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.work-record-summary-cell em {
|
||||
margin-top: 6px;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.work-record-trace-cell {
|
||||
color: #2563eb !important;
|
||||
}
|
||||
|
||||
.work-records-detail-stage,
|
||||
.work-record-detail-shell {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .digital-employee-pagination {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
.digital-work-records :deep(.toolbar-actions .picker-filter),
|
||||
.digital-work-records :deep(.toolbar-actions .picker-trigger) {
|
||||
min-width: 148px;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .digital-employee-pagination .page-summary {
|
||||
justify-self: start;
|
||||
.digital-refresh-now {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
.digital-refresh-now .mdi {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
.work-record-detail-body.inline-detail {
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager button:hover:not(.active):not(:disabled) {
|
||||
background: #fff;
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager button.active {
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.digital-employee-list-panel .pager button:disabled {
|
||||
color: #cbd5e1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.digital-work-records-list-stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.work-records-detail-stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -150,6 +150,7 @@ const {
|
||||
startDocumentInboxPolling,
|
||||
stopDocumentInboxPolling
|
||||
} = useDocumentCenterInbox()
|
||||
let inboxInitialRefreshTimer = null
|
||||
|
||||
const sidebarMeta = {
|
||||
overview: { label: '分析看板' },
|
||||
@@ -159,7 +160,6 @@ const sidebarMeta = {
|
||||
policies: { label: '知识管理' },
|
||||
audit: { label: '规则中心' },
|
||||
digitalEmployees: { label: '数字员工' },
|
||||
logs: { label: '系统日志' },
|
||||
employees: { label: '员工管理' },
|
||||
settings: { label: '系统设置' }
|
||||
}
|
||||
@@ -173,8 +173,27 @@ const decoratedNavItems = computed(() =>
|
||||
}))
|
||||
)
|
||||
|
||||
function clearInboxInitialRefreshTimer() {
|
||||
if (inboxInitialRefreshTimer && typeof window !== 'undefined') {
|
||||
window.clearTimeout(inboxInitialRefreshTimer)
|
||||
inboxInitialRefreshTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleInboxInitialRefresh() {
|
||||
if (typeof window === 'undefined') {
|
||||
return
|
||||
}
|
||||
|
||||
clearInboxInitialRefreshTimer()
|
||||
inboxInitialRefreshTimer = window.setTimeout(() => {
|
||||
inboxInitialRefreshTimer = null
|
||||
void refreshDocumentInbox()
|
||||
}, props.activeView === 'documents' ? 1200 : 6000)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void refreshDocumentInbox()
|
||||
scheduleInboxInitialRefresh()
|
||||
startDocumentInboxPolling()
|
||||
})
|
||||
|
||||
@@ -271,7 +290,18 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.activeView,
|
||||
(activeView, previousView) => {
|
||||
if (activeView === 'documents' && previousView !== 'documents') {
|
||||
clearInboxInitialRefreshTimer()
|
||||
void refreshDocumentInbox({ force: true })
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInboxInitialRefreshTimer()
|
||||
stopDocumentInboxPolling()
|
||||
closeCollapsedUserMenuNow()
|
||||
})
|
||||
|
||||
@@ -149,16 +149,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="isLogs">
|
||||
<div class="kpi-chips">
|
||||
<div v-for="kpi in logsKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
||||
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
|
||||
<span class="chip-label">{{ kpi.label }}</span>
|
||||
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="showDigitalEmployeeWorkRecordKpis">
|
||||
<div class="kpi-chips">
|
||||
<div
|
||||
@@ -229,11 +219,7 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => null
|
||||
},
|
||||
logsSummary: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
},
|
||||
requestSummary: {
|
||||
requestSummary: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
},
|
||||
@@ -253,10 +239,6 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
logDetailMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
detailAlerts: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
@@ -284,9 +266,8 @@ const isChat = computed(() => props.activeView === 'chat')
|
||||
const isOverview = computed(() => props.activeView === 'overview')
|
||||
const isWorkbench = computed(() => props.activeView === 'workbench')
|
||||
const isRequestDetail = computed(() => ['requests', 'documents', 'audit', 'digitalEmployees'].includes(props.activeView) && props.detailMode)
|
||||
const isDocuments = computed(() => props.activeView === 'documents' && !props.detailMode)
|
||||
const isRequests = computed(() => props.activeView === 'requests')
|
||||
const isLogs = computed(() => props.activeView === 'logs' && !props.logDetailMode)
|
||||
const isDocuments = computed(() => props.activeView === 'documents' && !props.detailMode)
|
||||
const isRequests = computed(() => props.activeView === 'requests')
|
||||
const isDigitalEmployees = computed(() => props.activeView === 'digitalEmployees')
|
||||
const isApproval = computed(() => props.activeView === 'approval')
|
||||
const isPolicies = computed(() => props.activeView === 'policies')
|
||||
@@ -328,21 +309,6 @@ const documentKpis = computed(() => {
|
||||
]
|
||||
})
|
||||
|
||||
const logsKpis = computed(() => {
|
||||
const summary = props.logsSummary ?? {}
|
||||
const total = Number(summary.total ?? 0)
|
||||
const errors = Number(summary.errors ?? 0)
|
||||
const warnings = Number(summary.warnings ?? 0)
|
||||
const info = Number(summary.info ?? 0)
|
||||
|
||||
return [
|
||||
{ label: '系统日志', value: total, unit: '条', meta: '当前', trend: 'up', color: 'var(--theme-primary)' },
|
||||
{ label: '错误数量', value: errors, unit: '条', meta: errors > 0 ? '需要关注' : '运行正常', trend: errors > 0 ? 'down' : 'up', color: '#ef4444' },
|
||||
{ label: '告警数量', value: warnings, unit: '条', meta: warnings > 0 ? '建议排查' : '暂无告警', trend: warnings > 0 ? 'down' : 'up', color: '#f59e0b' },
|
||||
{ label: '正常数量', value: info, unit: '条', meta: total ? `占比 ${Math.round((info / total) * 100)}%` : '等待数据', trend: 'up', color: 'var(--success)' }
|
||||
]
|
||||
})
|
||||
|
||||
const showDigitalEmployeeWorkRecordKpis = computed(() => {
|
||||
const summary = props.digitalEmployeeSummary ?? {}
|
||||
return isDigitalEmployees.value && summary.section === 'workRecords'
|
||||
|
||||
267
web/src/components/shared/FloatingLightBandWindow.vue
Normal file
267
web/src/components/shared/FloatingLightBandWindow.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="floating-light-band-window" :class="[variant, tone, motionClass]">
|
||||
<span class="floating-light-band-window__mark" aria-hidden="true">
|
||||
<i :class="icon"></i>
|
||||
</span>
|
||||
|
||||
<div v-if="hasCopy" class="floating-light-band-window__copy">
|
||||
<strong v-if="displayTitle">{{ displayTitle }}</strong>
|
||||
<span v-if="displayMessage">{{ displayMessage }}</span>
|
||||
</div>
|
||||
|
||||
<span class="floating-light-band-window__progress" aria-hidden="true"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
icon: { type: String, default: 'mdi mdi-loading' },
|
||||
message: { type: String, default: '' },
|
||||
motion: {
|
||||
type: String,
|
||||
default: 'loop',
|
||||
validator: (value) => ['loop', 'entry'].includes(value)
|
||||
},
|
||||
title: { type: String, default: '' },
|
||||
tone: {
|
||||
type: String,
|
||||
default: 'theme',
|
||||
validator: (value) => ['theme', 'sky', 'success'].includes(value)
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'panel',
|
||||
validator: (value) => ['entry', 'panel', 'detail', 'overlay', 'drawer', 'banner'].includes(value)
|
||||
}
|
||||
})
|
||||
|
||||
const displayTitle = computed(() => (props.variant === 'banner' && props.message ? '' : props.title))
|
||||
const displayMessage = computed(() => props.message || (props.variant === 'banner' ? props.title : ''))
|
||||
const hasCopy = computed(() => Boolean(displayTitle.value || displayMessage.value))
|
||||
const motionClass = computed(() => `motion-${props.motion}`)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-light-band-window {
|
||||
--accent: var(--theme-primary);
|
||||
--accent-deep: var(--theme-primary-active);
|
||||
--accent-rgb: var(--theme-primary-rgb, 58, 124, 165);
|
||||
|
||||
width: min(380px, 100%);
|
||||
max-width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
gap: 12px 14px;
|
||||
align-items: center;
|
||||
padding: 22px 24px 20px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.26);
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 20px 46px rgba(15, 23, 42, 0.14);
|
||||
color: var(--muted);
|
||||
animation: floatingLightBandWindowIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.floating-light-band-window.theme,
|
||||
.floating-light-band-window.sky {
|
||||
--accent: var(--theme-primary);
|
||||
--accent-deep: var(--theme-primary-active);
|
||||
--accent-rgb: var(--theme-primary-rgb, 58, 124, 165);
|
||||
}
|
||||
|
||||
.floating-light-band-window.success {
|
||||
--accent: var(--success);
|
||||
--accent-deep: var(--success-hover);
|
||||
--accent-rgb: var(--success-rgb, 47, 133, 90);
|
||||
}
|
||||
|
||||
.floating-light-band-window.entry {
|
||||
width: min(360px, calc(100% - 48px));
|
||||
}
|
||||
|
||||
.floating-light-band-window.detail,
|
||||
.floating-light-band-window.drawer {
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
padding: 18px 20px 16px;
|
||||
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.floating-light-band-window.overlay {
|
||||
width: min(360px, 100%);
|
||||
}
|
||||
|
||||
.floating-light-band-window.banner {
|
||||
width: 100%;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
gap: 8px 10px;
|
||||
padding: 8px 10px 7px;
|
||||
border-color: rgba(var(--accent-rgb), 0.18);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
box-shadow: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.floating-light-band-window__mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.2);
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--accent) 10%, white);
|
||||
color: var(--accent-deep);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.floating-light-band-window.detail .floating-light-band-window__mark,
|
||||
.floating-light-band-window.drawer .floating-light-band-window__mark {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.floating-light-band-window.banner .floating-light-band-window__mark {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.floating-light-band-window__copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.floating-light-band-window__copy strong {
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
line-height: 1.35;
|
||||
font-weight: 750;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.floating-light-band-window__copy span {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.floating-light-band-window.detail .floating-light-band-window__copy strong,
|
||||
.floating-light-band-window.drawer .floating-light-band-window__copy strong {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.floating-light-band-window.banner .floating-light-band-window__copy {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.floating-light-band-window.banner .floating-light-band-window__copy strong,
|
||||
.floating-light-band-window.banner .floating-light-band-window__copy span {
|
||||
color: var(--accent-deep);
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.floating-light-band-window__progress {
|
||||
position: relative;
|
||||
grid-column: 1 / -1;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(var(--accent-rgb), 0.08),
|
||||
rgba(var(--accent-rgb), 0.16),
|
||||
rgba(var(--accent-rgb), 0.08)
|
||||
);
|
||||
}
|
||||
|
||||
.floating-light-band-window.banner .floating-light-band-window__progress {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.floating-light-band-window__progress::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 46%;
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(var(--accent-rgb), 0),
|
||||
var(--accent),
|
||||
var(--accent-deep),
|
||||
color-mix(in srgb, var(--accent) 40%, white),
|
||||
rgba(var(--accent-rgb), 0)
|
||||
);
|
||||
box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.36);
|
||||
transform: translateX(-105%);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.floating-light-band-window.motion-loop .floating-light-band-window__progress::before {
|
||||
animation: floatingLightBandSweep 980ms cubic-bezier(0.2, 0, 0, 1) infinite;
|
||||
}
|
||||
|
||||
.floating-light-band-window.motion-entry .floating-light-band-window__progress::before {
|
||||
width: 100%;
|
||||
background: var(--accent);
|
||||
transform-origin: left center;
|
||||
animation: floatingLightBandEntry 840ms cubic-bezier(0.2, 0, 0, 1) both;
|
||||
}
|
||||
|
||||
@keyframes floatingLightBandWindowIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.92, 0.92, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatingLightBandSweep {
|
||||
from {
|
||||
transform: translateX(-105%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(215%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatingLightBandEntry {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.floating-light-band-window {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.floating-light-band-window.motion-entry .floating-light-band-window__progress::before {
|
||||
width: 100%;
|
||||
background: var(--accent);
|
||||
animation: none !important;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.floating-light-band-window.motion-loop .floating-light-band-window__progress::before {
|
||||
animation: floatingLightBandSweep 1800ms linear infinite !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +1,30 @@
|
||||
<template>
|
||||
<div
|
||||
class="table-loading"
|
||||
:class="[variant, tone]"
|
||||
role="status"
|
||||
:aria-label="ariaLabel"
|
||||
aria-live="polite"
|
||||
>
|
||||
<span class="table-loading__spinner" aria-hidden="true">
|
||||
<i :class="icon"></i>
|
||||
</span>
|
||||
|
||||
<div v-if="hasCopy" class="table-loading__copy">
|
||||
<strong v-if="title">{{ title }}</strong>
|
||||
<p v-if="message">{{ message }}</p>
|
||||
<span v-if="floating" class="table-loading-anchor" aria-hidden="true"></span>
|
||||
<Teleport to="body" :disabled="!floating">
|
||||
<div
|
||||
class="table-loading"
|
||||
:class="[variant, tone, { 'screen-floating': floating, 'modal-floating': floating && blocking }]"
|
||||
role="status"
|
||||
:aria-label="ariaLabel"
|
||||
aria-live="polite"
|
||||
>
|
||||
<FloatingLightBandWindow
|
||||
:icon="icon"
|
||||
:message="message"
|
||||
:motion="motion"
|
||||
:title="title"
|
||||
:tone="tone"
|
||||
:variant="variant"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import FloatingLightBandWindow from './FloatingLightBandWindow.vue'
|
||||
|
||||
const props = defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
@@ -34,50 +39,75 @@ const props = defineProps({
|
||||
title: { type: String, default: '' },
|
||||
message: { type: String, default: '' },
|
||||
icon: { type: String, default: 'mdi mdi-loading' },
|
||||
motion: {
|
||||
type: String,
|
||||
default: 'loop',
|
||||
validator: (value) => ['loop', 'entry'].includes(value)
|
||||
},
|
||||
floating: { type: Boolean, default: false },
|
||||
blocking: { type: Boolean, default: false },
|
||||
showSkeleton: { type: Boolean, default: true },
|
||||
skeletonRows: { type: Number, default: 5 }
|
||||
})
|
||||
|
||||
const hasCopy = computed(() => Boolean(props.title || props.message))
|
||||
|
||||
const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).join(', ') || 'Loading')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-loading {
|
||||
--accent: var(--theme-primary);
|
||||
--accent-deep: var(--theme-primary-active);
|
||||
width: 100%;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.table-loading.theme,
|
||||
.table-loading.sky {
|
||||
--accent: var(--theme-primary);
|
||||
--accent-deep: var(--theme-primary-active);
|
||||
.table-loading-anchor {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-loading.success {
|
||||
--accent: var(--success);
|
||||
--accent-deep: var(--success-hover);
|
||||
.table-loading.screen-floating {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 430;
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(248, 250, 252, 0.08);
|
||||
backdrop-filter: blur(0.5px);
|
||||
-webkit-backdrop-filter: blur(0.5px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.table-loading.screen-floating.modal-floating {
|
||||
z-index: 560;
|
||||
background: rgba(15, 23, 42, 0.18);
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.table-loading.panel {
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 12px;
|
||||
padding: 28px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-loading.panel.screen-floating {
|
||||
min-height: 100dvh;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.table-loading.detail {
|
||||
min-height: 180px;
|
||||
display: flex;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
justify-items: center;
|
||||
padding: 22px 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-loading.overlay,
|
||||
@@ -97,86 +127,9 @@ const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).jo
|
||||
}
|
||||
|
||||
.table-loading.banner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
display: block;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
color: #255b7d;
|
||||
}
|
||||
|
||||
.table-loading__spinner {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border: 3px solid #e2e8f0;
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
color: var(--accent-deep);
|
||||
animation: table-spinner-rotate 0.8s linear infinite !important;
|
||||
}
|
||||
|
||||
.table-loading.detail .table-loading__spinner {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.table-loading.banner .table-loading__spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.table-loading__spinner i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-loading__copy {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.table-loading.panel .table-loading__copy,
|
||||
.table-loading.overlay .table-loading__copy,
|
||||
.table-loading.drawer .table-loading__copy {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.table-loading.detail .table-loading__copy {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.table-loading.banner .table-loading__copy {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.table-loading__copy strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.table-loading__copy p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.table-loading.banner .table-loading__copy strong {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-loading.banner .table-loading__copy p {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@keyframes table-spinner-rotate {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user