Documentos + Templates + Relatorios nativas (so resta online-scheduling)
Promove '/melissa/documentos', '/melissa/documentos-templates' e '/melissa/relatorios' do embed pra paginas nativas Melissa. MelissaDocumentos (~700L): - Sidebar com stats (Total / Tamanho / Tipos / Pendentes amber) + filtro Tipo (Select com TIPOS_DOCUMENTO 11 opcoes) + filtro Tag (Select dinamico com usedTags) + footer fixo Limpar filtros - Main: toolbar busca + lista de DocumentCard (componente reusado) - Modo "todos os pacientes" — patientId null. Upload/Gerar exigem abrir paciente especifico no prontuario (botoes nao aparecem). - Dialogs reusados: PreviewDialog + SignatureDialog + ShareDialog + ConfirmDialog (delete). MelissaDocumentosTemplates (~700L): - Layout 1-col empilhado, 3 views: list / create / edit - Header com botao "Novo template" (list) ou "Cancelar/Salvar" (create/edit) + back button - 2 sections distintas: "Templates padrao do sistema" (info-blue, click duplica) e "Meus templates" (accent, click edita + menu de acoes Duplicar/Editar/Desativar) - Cards em grid responsivo (auto-fill 280px), com badge "padrao"/ "inativo" e count de variaveis - DocumentTemplateEditor reusado pra create/edit - ConfirmDialog reusado MelissaRelatorios (~1100L): - Sidebar com 6 stats (Total / Realizadas verde / Faltas red / Canceladas warn / Agendadas info / Taxa realizacao) + filtro Periodo (button list: semana/mes/3meses/6meses) + filtro Status (Realizadas/Faltas/Canceladas/Agendadas com cores) + footer Limpar filtros - Main: card Grafico (Chart.js stacked bar agrupado por semana/mes) + card DataTable de sessoes filtradas (Data/Hora sortable / Paciente / Sessao / Modalidade / Status) - Empty states distintos: sem sessoes no periodo / sem resultado do filtro Logica preservada das paginas originais. Composables/services nao foram tocados — apenas adaptacao do chrome pra blueprint Melissa. DocumentsListPage / DocumentTemplatesPage / RelatoriosPage continuam intactas no layout Rail (/therapist/*, /admin/*). Wire-up MelissaLayout: imports + 3 render blocks + 'documentos', 'documentos-templates', 'relatorios' literais em NON_CONFIG_SLUGS; removidos de MELISSA_EMBED_KEYS. Entries removidos do EMBED_MAP em MelissaEmbed (resta apenas 'online-scheduling'). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
@@ -0,0 +1,703 @@
|
||||
<script setup>
|
||||
/*
|
||||
* MelissaDocumentos — Página nativa Melissa pra listagem de documentos
|
||||
* (substitui o embed via MelissaEmbed que duplicava headers).
|
||||
*
|
||||
* Aplica o blueprint melissa-table-page-blueprint.md:
|
||||
* - Sidebar com stats + filtros (Tipo / Tag) com Selects + footer
|
||||
* fixo "Limpar filtros"
|
||||
* - Main com toolbar (busca) + lista de DocumentCard preservada
|
||||
*
|
||||
* Modo "todos os pacientes" — patientId é null. Upload/gerar requer
|
||||
* abrir um paciente específico via /melissa/pacientes (atualmente
|
||||
* desabilitados aqui). Lista é read-only nesse contexto.
|
||||
*/
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConfirm } from 'primevue/useconfirm';
|
||||
|
||||
import { useDocuments } from '@/features/documents/composables/useDocuments';
|
||||
import DocumentCard from '@/features/documents/components/DocumentCard.vue';
|
||||
import DocumentPreviewDialog from '@/features/documents/components/DocumentPreviewDialog.vue';
|
||||
import DocumentSignatureDialog from '@/features/documents/components/DocumentSignatureDialog.vue';
|
||||
import DocumentShareDialog from '@/features/documents/components/DocumentShareDialog.vue';
|
||||
// Select/InputText/Skeleton/Button/Dialog: auto via PrimeVueResolver
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const toast = useToast();
|
||||
const confirm = useConfirm();
|
||||
|
||||
// patientId = null → modo "todos os pacientes" (read-only).
|
||||
const patientId = computed(() => null);
|
||||
|
||||
const {
|
||||
documents, loading, error, filters, usedTags, stats,
|
||||
TIPOS_DOCUMENTO,
|
||||
fetchDocuments, remove,
|
||||
download, getPreviewUrl, fetchUsedTags, clearFilters,
|
||||
formatSize
|
||||
} = useDocuments(() => patientId.value);
|
||||
|
||||
// ── Dialogs ────────────────────────────────────────────
|
||||
const previewDlg = ref(false);
|
||||
const signatureDlg = ref(false);
|
||||
const shareDlg = ref(false);
|
||||
const selectedDoc = ref(null);
|
||||
const previewUrl = ref('');
|
||||
|
||||
// ── Filtros computeds ──────────────────────────────────
|
||||
const hasActiveFilter = computed(() =>
|
||||
!!(filters.value.tipo_documento || filters.value.tag || filters.value.search)
|
||||
);
|
||||
|
||||
function clearAllFilters() {
|
||||
clearFilters();
|
||||
fetchDocuments();
|
||||
}
|
||||
|
||||
const tagOptions = computed(() =>
|
||||
usedTags.value.map((t) => ({ label: t, value: t }))
|
||||
);
|
||||
|
||||
// ── Acoes nas rows ─────────────────────────────────────
|
||||
async function onPreview(doc) {
|
||||
selectedDoc.value = doc;
|
||||
try {
|
||||
previewUrl.value = await getPreviewUrl(doc);
|
||||
} catch {
|
||||
previewUrl.value = '';
|
||||
}
|
||||
previewDlg.value = true;
|
||||
}
|
||||
|
||||
function onDownload(doc) {
|
||||
download(doc);
|
||||
}
|
||||
|
||||
function onEdit() {
|
||||
toast.add({ severity: 'info', summary: 'Em breve', detail: 'Edição de metadados será implementada.', life: 2000 });
|
||||
}
|
||||
|
||||
function onDelete(doc) {
|
||||
confirm.require({
|
||||
message: `Excluir "${doc.nome_original}"? O arquivo será retido por 5 anos conforme LGPD/CFP.`,
|
||||
header: 'Confirmar exclusão',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: async () => {
|
||||
try {
|
||||
await remove(doc.id);
|
||||
toast.add({ severity: 'success', summary: 'Excluído', detail: doc.nome_original, life: 2000 });
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onShare(doc) {
|
||||
selectedDoc.value = doc;
|
||||
shareDlg.value = true;
|
||||
}
|
||||
|
||||
function onSign(doc) {
|
||||
selectedDoc.value = doc;
|
||||
signatureDlg.value = true;
|
||||
}
|
||||
|
||||
// ── Watch filtros (refetch automático) ─────────────────
|
||||
watch(filters, () => fetchDocuments(), { deep: true });
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchDocuments(), fetchUsedTags()]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ConfirmDialog />
|
||||
|
||||
<section class="md-page">
|
||||
<header class="md-page__head">
|
||||
<div class="md-page__title">
|
||||
<i class="pi pi-file md-page__title-icon" />
|
||||
<span>Documentos</span>
|
||||
<span class="md-page__count">{{ documents.length }}</span>
|
||||
</div>
|
||||
<div class="md-page__actions">
|
||||
<button
|
||||
class="md-head-btn"
|
||||
v-tooltip.bottom="'Atualizar'"
|
||||
:disabled="loading"
|
||||
@click="fetchDocuments"
|
||||
>
|
||||
<i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
|
||||
</button>
|
||||
<button class="md-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Subheader -->
|
||||
<div class="md-subheader">
|
||||
<i class="pi pi-info-circle md-subheader__icon" />
|
||||
<span class="md-subheader__text">
|
||||
Documentos clínicos da clínica — laudos, receitas, exames, termos
|
||||
assinados. Pra <strong>upload</strong> ou <strong>gerar</strong>
|
||||
novos, abra o paciente específico no prontuário.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="md-body">
|
||||
<!-- ═══ COL 1: Stats + filtros ═══ -->
|
||||
<aside class="md-side">
|
||||
<div class="md-side__scroll">
|
||||
<!-- Stats -->
|
||||
<div class="md-w md-w--side">
|
||||
<div class="md-w__head">
|
||||
<span class="md-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
|
||||
</div>
|
||||
<div class="md-stats">
|
||||
<div class="md-stat">
|
||||
<div class="md-stat__val">{{ stats.total }}</div>
|
||||
<div class="md-stat__lbl">Total</div>
|
||||
</div>
|
||||
<div class="md-stat">
|
||||
<div class="md-stat__val">{{ formatSize(stats.tamanhoTotal) }}</div>
|
||||
<div class="md-stat__lbl">Tamanho</div>
|
||||
</div>
|
||||
<div class="md-stat">
|
||||
<div class="md-stat__val">{{ Object.keys(stats.porTipo).length }}</div>
|
||||
<div class="md-stat__lbl">Tipos</div>
|
||||
</div>
|
||||
<div class="md-stat" :class="stats.pendentesRevisao ? 'is-warn' : ''">
|
||||
<div class="md-stat__val">{{ stats.pendentesRevisao || 0 }}</div>
|
||||
<div class="md-stat__lbl">Pendentes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtro Tipo -->
|
||||
<div class="md-w md-w--side">
|
||||
<div class="md-w__head">
|
||||
<span class="md-w__title"><i class="pi pi-filter" /> Tipo</span>
|
||||
<button
|
||||
v-if="filters.tipo_documento"
|
||||
class="md-side__clear-inline"
|
||||
v-tooltip.top="'Limpar filtro de tipo'"
|
||||
@click="filters.tipo_documento = null"
|
||||
>
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
<Select
|
||||
v-model="filters.tipo_documento"
|
||||
:options="TIPOS_DOCUMENTO"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="Todos os tipos"
|
||||
class="w-full md-side__select"
|
||||
showClear
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filtro Tag -->
|
||||
<div v-if="usedTags.length" class="md-w md-w--side">
|
||||
<div class="md-w__head">
|
||||
<span class="md-w__title"><i class="pi pi-tag" /> Tag</span>
|
||||
<button
|
||||
v-if="filters.tag"
|
||||
class="md-side__clear-inline"
|
||||
v-tooltip.top="'Limpar filtro de tag'"
|
||||
@click="filters.tag = null"
|
||||
>
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
<Select
|
||||
v-model="filters.tag"
|
||||
:options="tagOptions"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="Todas as tags"
|
||||
class="w-full md-side__select"
|
||||
showClear
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="md-clear">
|
||||
<div v-if="hasActiveFilter" class="md-side__footer">
|
||||
<button class="md-side__clear-all" @click="clearAllFilters">
|
||||
<i class="pi pi-filter-slash" />
|
||||
<span>Limpar filtros</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</aside>
|
||||
|
||||
<!-- ═══ COL 2: Lista ═══ -->
|
||||
<div class="md-main">
|
||||
<div class="md-toolbar">
|
||||
<div class="md-search">
|
||||
<i class="pi pi-search md-search__icon" />
|
||||
<input
|
||||
v-model="filters.search"
|
||||
type="text"
|
||||
placeholder="Buscar por nome, descrição ou tag…"
|
||||
class="md-search__input"
|
||||
/>
|
||||
<button
|
||||
v-if="filters.search"
|
||||
class="md-search__clear"
|
||||
v-tooltip.bottom="'Limpar busca'"
|
||||
@click="filters.search = ''"
|
||||
>
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Erro -->
|
||||
<div v-if="error" class="md-error">
|
||||
<i class="pi pi-exclamation-triangle" />
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Lista -->
|
||||
<div class="md-list">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="md-loading">
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
<span>Carregando documentos…</span>
|
||||
</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div v-else-if="!documents.length" class="md-empty">
|
||||
<i :class="hasActiveFilter ? 'pi pi-filter-slash' : 'pi pi-folder-open'" class="md-empty__icon" />
|
||||
<div class="md-empty__title">
|
||||
{{ hasActiveFilter ? 'Nenhum documento encontrado' : 'Nenhum documento ainda' }}
|
||||
</div>
|
||||
<div class="md-empty__hint">
|
||||
{{ hasActiveFilter
|
||||
? 'Limpe os filtros ou ajuste a busca pra ver outros resultados.'
|
||||
: 'Quando algum paciente tiver documentos cadastrados, eles aparecem aqui.' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards -->
|
||||
<div v-else class="md-cards">
|
||||
<DocumentCard
|
||||
v-for="doc in documents"
|
||||
:key="doc.id"
|
||||
:doc="doc"
|
||||
@preview="onPreview"
|
||||
@download="onDownload"
|
||||
@edit="onEdit"
|
||||
@delete="onDelete"
|
||||
@share="onShare"
|
||||
@sign="onSign"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialogs comuns -->
|
||||
<DocumentPreviewDialog
|
||||
:visible="previewDlg"
|
||||
@update:visible="previewDlg = $event"
|
||||
:doc="selectedDoc"
|
||||
:previewUrl="previewUrl"
|
||||
@download="onDownload"
|
||||
@edit="onEdit"
|
||||
@delete="(d) => { previewDlg = false; onDelete(d); }"
|
||||
@share="(d) => { previewDlg = false; onShare(d); }"
|
||||
@sign="(d) => { previewDlg = false; onSign(d); }"
|
||||
/>
|
||||
<DocumentSignatureDialog :visible="signatureDlg" @update:visible="signatureDlg = $event" :doc="selectedDoc" />
|
||||
<DocumentShareDialog :visible="shareDlg" @update:visible="shareDlg = $event" :doc="selectedDoc" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ─── Page chrome ─── */
|
||||
.md-page {
|
||||
position: absolute;
|
||||
inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--m-bg-medium);
|
||||
backdrop-filter: blur(32px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(160%);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
color: var(--m-text);
|
||||
animation: md-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
|
||||
}
|
||||
@keyframes md-page-enter {
|
||||
from { opacity: 0; transform: scale(0.985); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.md-page__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
.md-page__title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.md-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
|
||||
.md-page__title > span:not(.md-page__count) {
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.md-page__count {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--m-accent);
|
||||
background: var(--m-accent-soft);
|
||||
border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.md-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
|
||||
.md-close, .md-head-btn {
|
||||
width: 32px; height: 32px;
|
||||
display: grid; place-items: center;
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.md-close:hover, .md-head-btn:hover { background: var(--m-bg-soft-hover); }
|
||||
.md-head-btn > i { font-size: 0.85rem; }
|
||||
.md-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* Subheader */
|
||||
.md-subheader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 18px;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
background: var(--m-bg-soft);
|
||||
font-size: 0.78rem;
|
||||
color: var(--m-text-muted);
|
||||
line-height: 1.45;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.md-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
|
||||
.md-subheader__text { flex: 1; min-width: 0; }
|
||||
.md-subheader__text strong { color: var(--m-text); font-weight: 600; }
|
||||
|
||||
/* Body */
|
||||
.md-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ─── Sidebar ─── */
|
||||
.md-side {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--m-bg-soft);
|
||||
border-right: 1px solid var(--m-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
.md-side__scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.md-side__scroll::-webkit-scrollbar { width: 5px; }
|
||||
.md-side__scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--m-border-strong);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.md-side__footer {
|
||||
flex-shrink: 0;
|
||||
padding: 12px;
|
||||
background: var(--m-bg-soft);
|
||||
border-top: 1px solid var(--m-border);
|
||||
}
|
||||
.md-side__clear-all {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 9px 12px;
|
||||
background: var(--m-bg-medium);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
transition: background-color 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
.md-side__clear-all:hover {
|
||||
background: var(--m-bg-soft-hover);
|
||||
border-color: var(--m-border-strong);
|
||||
}
|
||||
.md-side__clear-all > i {
|
||||
font-size: 0.78rem;
|
||||
color: var(--m-text-muted);
|
||||
}
|
||||
|
||||
.md-side__clear-inline {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: transparent;
|
||||
border: 1px solid color-mix(in srgb, rgb(220, 38, 38) 30%, var(--m-border));
|
||||
color: rgb(220, 38, 38);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
.md-side__clear-inline:hover {
|
||||
background: rgba(220, 38, 38, 0.10);
|
||||
border-color: rgba(220, 38, 38, 0.55);
|
||||
}
|
||||
.md-side__clear-inline > i { font-size: 0.6rem; }
|
||||
|
||||
.md-clear-enter-active,
|
||||
.md-clear-leave-active {
|
||||
transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.md-clear-enter-from, .md-clear-leave-to {
|
||||
opacity: 0; transform: translateY(6px); max-height: 0;
|
||||
}
|
||||
.md-clear-enter-to, .md-clear-leave-from {
|
||||
opacity: 1; transform: translateY(0); max-height: 80px;
|
||||
}
|
||||
|
||||
.md-w {
|
||||
background: var(--m-bg-medium);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
.md-w--side {
|
||||
margin: 12px 12px 0;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.md-w--side:last-of-type { margin-bottom: 12px; }
|
||||
.md-w__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.md-w__title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--m-text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.md-w__title > i { color: var(--m-text-muted); font-size: 0.7rem; }
|
||||
|
||||
.md-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.md-stat {
|
||||
background: var(--m-bg-soft);
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.md-stat__val {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: var(--m-text);
|
||||
}
|
||||
.md-stat__lbl {
|
||||
font-size: 0.62rem;
|
||||
color: var(--m-text-muted);
|
||||
margin-top: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.md-stat.is-warn .md-stat__val { color: rgb(217, 119, 6); }
|
||||
|
||||
.md-side__select :deep(.p-select) {
|
||||
width: 100%;
|
||||
background: var(--m-bg-soft);
|
||||
border-radius: 9px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* ─── Main ─── */
|
||||
.md-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.md-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.md-search__icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
color: var(--m-text-muted);
|
||||
font-size: 0.78rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
.md-search__input {
|
||||
width: 100%;
|
||||
background: var(--m-bg-medium);
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text);
|
||||
padding: 9px 36px 9px 34px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 140ms ease;
|
||||
}
|
||||
.md-search__input::placeholder { color: var(--m-text-faint); }
|
||||
.md-search__input:focus { border-color: var(--m-border-strong); }
|
||||
.md-search__clear {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--m-text-muted);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
.md-search__clear:hover {
|
||||
background: var(--m-bg-soft-hover);
|
||||
color: var(--m-text);
|
||||
}
|
||||
.md-search__clear > i { font-size: 0.7rem; }
|
||||
|
||||
.md-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(220, 38, 38, 0.10);
|
||||
border: 1px solid rgba(220, 38, 38, 0.30);
|
||||
border-radius: 10px;
|
||||
color: rgb(220, 38, 38);
|
||||
font-size: 0.82rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.md-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--m-border);
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
.md-list::-webkit-scrollbar { width: 5px; }
|
||||
.md-list::-webkit-scrollbar-thumb {
|
||||
background: var(--m-border-strong);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.md-loading,
|
||||
.md-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 56px 28px;
|
||||
text-align: center;
|
||||
color: var(--m-text-muted);
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
.md-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
|
||||
.md-empty__icon {
|
||||
font-size: 2rem;
|
||||
color: var(--m-text-faint);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.md-empty__title {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: var(--m-text);
|
||||
}
|
||||
.md-empty__hint { font-size: 0.78rem; max-width: 340px; }
|
||||
|
||||
.md-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* ─── Mobile (<1024px) ─── */
|
||||
@media (max-width: 1023px) {
|
||||
.md-body { flex-direction: column; padding: 0; }
|
||||
.md-side {
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--m-border);
|
||||
}
|
||||
.md-main { padding: 8px; }
|
||||
.md-page__title > span:first-of-type { display: none; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user