Add standalone Leads module for prospect outreach before customers.
Import large Excel lists with duplicate checks, assign and kanban follow-up, convert to Person when ready; also fix OTP mobile mask order and SMS brand name to منتکت. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,831 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { canManageSettings } from '@/lib/roles';
|
||||
import {
|
||||
UiButton,
|
||||
UiEmptyState,
|
||||
UiPageHeader,
|
||||
UiPagination,
|
||||
} from '@/components/ui';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type {
|
||||
LeadDto,
|
||||
LeadImportJobDto,
|
||||
LeadStageDto,
|
||||
OrgUserDto,
|
||||
PaginatedResponse,
|
||||
} from '@mento/shared';
|
||||
import { brand } from '@mento/shared';
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
type SortKey = 'updated' | 'newest' | 'follow_up' | 'last_contact';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const isAdmin = computed(() => canManageSettings(auth.user?.role));
|
||||
|
||||
const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
|
||||
const loading = ref(false);
|
||||
const busy = ref(false);
|
||||
const error = ref('');
|
||||
const okMsg = ref('');
|
||||
const data = ref<PaginatedResponse<LeadDto> | null>(null);
|
||||
const stages = ref<LeadStageDto[]>([]);
|
||||
const users = ref<OrgUserDto[]>([]);
|
||||
const selected = ref<Set<string>>(new Set());
|
||||
const sortOpen = ref(false);
|
||||
const filterOpen = ref(false);
|
||||
const assignOpen = ref(false);
|
||||
const stageOpen = ref(false);
|
||||
const assignUserId = ref('');
|
||||
const bulkStageId = ref('');
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const importJob = ref<LeadImportJobDto | null>(null);
|
||||
let importTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const page = computed(() => {
|
||||
const raw = Number(route.query.page);
|
||||
return Number.isFinite(raw) && raw > 0 ? raw : 1;
|
||||
});
|
||||
const sort = computed<SortKey>(() => {
|
||||
const s = route.query.sort;
|
||||
if (s === 'newest' || s === 'follow_up' || s === 'last_contact') return s;
|
||||
return 'updated';
|
||||
});
|
||||
const stageId = computed(() =>
|
||||
typeof route.query.stageId === 'string' ? route.query.stageId : '',
|
||||
);
|
||||
const assigneeId = computed(() =>
|
||||
typeof route.query.assigneeId === 'string' ? route.query.assigneeId : '',
|
||||
);
|
||||
const unassigned = computed(
|
||||
() => route.query.unassigned === '1' || route.query.unassigned === 'true',
|
||||
);
|
||||
|
||||
const total = computed(() => data.value?.total ?? 0);
|
||||
const pageCount = computed(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)));
|
||||
const allSelected = computed(
|
||||
() =>
|
||||
Boolean(data.value?.items.length) &&
|
||||
data.value!.items.every((l) => selected.value.has(l.id)),
|
||||
);
|
||||
const selectedIds = computed(() => [...selected.value]);
|
||||
|
||||
const sortLabels: Record<SortKey, string> = {
|
||||
updated: 'آخرین بهروزرسانی',
|
||||
newest: 'جدیدترین',
|
||||
follow_up: 'پیگیری بعدی',
|
||||
last_contact: 'آخرین تماس',
|
||||
};
|
||||
|
||||
function formatDate(value: string | null) {
|
||||
if (!value) return '—';
|
||||
try {
|
||||
return formatJalaliNumeric(new Date(value));
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function closePopups() {
|
||||
sortOpen.value = false;
|
||||
filterOpen.value = false;
|
||||
assignOpen.value = false;
|
||||
stageOpen.value = false;
|
||||
}
|
||||
|
||||
function patchQuery(next: Record<string, string | undefined>) {
|
||||
const query = { ...route.query, ...next };
|
||||
for (const key of Object.keys(query)) {
|
||||
if (query[key] == null || query[key] === '') delete query[key];
|
||||
}
|
||||
void router.replace({ name: 'leads', query });
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
patchQuery({ q: q.value.trim() || undefined, page: undefined });
|
||||
}
|
||||
|
||||
function setSort(next: SortKey) {
|
||||
sortOpen.value = false;
|
||||
patchQuery({ sort: next === 'updated' ? undefined : next, page: undefined });
|
||||
}
|
||||
|
||||
function setStageFilter(id: string) {
|
||||
filterOpen.value = false;
|
||||
patchQuery({ stageId: id || undefined, page: undefined });
|
||||
}
|
||||
|
||||
function setAssigneeFilter(id: string) {
|
||||
filterOpen.value = false;
|
||||
patchQuery({
|
||||
assigneeId: id || undefined,
|
||||
unassigned: undefined,
|
||||
page: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
function setUnassigned(on: boolean) {
|
||||
filterOpen.value = false;
|
||||
patchQuery({
|
||||
unassigned: on ? '1' : undefined,
|
||||
assigneeId: undefined,
|
||||
page: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
function setPage(next: number) {
|
||||
if (next < 1 || next > pageCount.value) return;
|
||||
patchQuery({ page: next === 1 ? undefined : String(next) });
|
||||
}
|
||||
|
||||
function toggleOne(id: string, checked: boolean) {
|
||||
const next = new Set(selected.value);
|
||||
if (checked) next.add(id);
|
||||
else next.delete(id);
|
||||
selected.value = next;
|
||||
}
|
||||
|
||||
function toggleAll(checked: boolean) {
|
||||
if (!checked) {
|
||||
selected.value = new Set();
|
||||
return;
|
||||
}
|
||||
selected.value = new Set(data.value?.items.map((l) => l.id) ?? []);
|
||||
}
|
||||
|
||||
async function loadMeta() {
|
||||
const [stagesRes, usersRes] = await Promise.all([
|
||||
api.get<LeadStageDto[]>('/leads/stages'),
|
||||
api.get<OrgUserDto[]>('/users').catch(() => ({ data: [] as OrgUserDto[] })),
|
||||
]);
|
||||
stages.value = stagesRes.data;
|
||||
users.value = usersRes.data.filter((u) => u.isActive !== false);
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
closePopups();
|
||||
try {
|
||||
const { data: res } = await api.get<PaginatedResponse<LeadDto>>('/leads', {
|
||||
params: {
|
||||
q: q.value || undefined,
|
||||
page: page.value,
|
||||
limit: PAGE_SIZE,
|
||||
sort: sort.value === 'updated' ? undefined : sort.value,
|
||||
stageId: stageId.value || undefined,
|
||||
assigneeId: assigneeId.value || undefined,
|
||||
unassigned: unassigned.value ? '1' : undefined,
|
||||
},
|
||||
});
|
||||
data.value = res;
|
||||
selected.value = new Set(
|
||||
[...selected.value].filter((id) => res.items.some((l) => l.id === id)),
|
||||
);
|
||||
} catch (e) {
|
||||
error.value =
|
||||
axios.isAxiosError(e) && !e.response
|
||||
? 'اتصال به API برقرار نشد.'
|
||||
: 'بارگذاری لیدها ناموفق بود.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function assignSelected() {
|
||||
if (!assignUserId.value || !selectedIds.value.length) return;
|
||||
busy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.post('/leads/assign', {
|
||||
leadIds: selectedIds.value,
|
||||
assigneeId: assignUserId.value,
|
||||
});
|
||||
okMsg.value = `${toFaDigits(selectedIds.value.length)} لید تخصیص داده شد.`;
|
||||
selected.value = new Set();
|
||||
assignOpen.value = false;
|
||||
await load();
|
||||
} catch {
|
||||
error.value = 'تخصیص ناموفق بود.';
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function bulkStageSelected() {
|
||||
if (!bulkStageId.value || !selectedIds.value.length) return;
|
||||
busy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.post('/leads/bulk-stage', {
|
||||
leadIds: selectedIds.value,
|
||||
stageId: bulkStageId.value,
|
||||
});
|
||||
okMsg.value = `وضعیت ${toFaDigits(selectedIds.value.length)} لید بهروز شد.`;
|
||||
selected.value = new Set();
|
||||
stageOpen.value = false;
|
||||
await load();
|
||||
} catch {
|
||||
error.value = 'تغییر وضعیت گروهی ناموفق بود.';
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function archiveSelected() {
|
||||
if (!selectedIds.value.length) return;
|
||||
if (!confirm(`${toFaDigits(selectedIds.value.length)} لید بایگانی شود؟`)) return;
|
||||
busy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.post('/leads/archive', { leadIds: selectedIds.value });
|
||||
okMsg.value = `${toFaDigits(selectedIds.value.length)} لید بایگانی شد.`;
|
||||
selected.value = new Set();
|
||||
await load();
|
||||
} catch {
|
||||
error.value = 'بایگانی ناموفق بود.';
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function exportExcel() {
|
||||
busy.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data: blob } = await api.get<Blob>('/leads/export', {
|
||||
responseType: 'blob',
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${brand.filePrefix}-leads.xlsx`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} catch {
|
||||
error.value = 'خروجی اکسل ناموفق بود.';
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function stopImportPoll() {
|
||||
if (importTimer) {
|
||||
clearInterval(importTimer);
|
||||
importTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function pollImport(jobId: string) {
|
||||
try {
|
||||
const { data: job } = await api.get<LeadImportJobDto>(`/leads/imports/${jobId}`);
|
||||
importJob.value = job;
|
||||
if (job.status === 'done' || job.status === 'failed' || job.status === 'completed') {
|
||||
stopImportPoll();
|
||||
okMsg.value = `ورود: موفق ${toFaDigits(job.successCount)} · تکراری ${toFaDigits(job.duplicateCount)} · خطا ${toFaDigits(job.errorCount)}`;
|
||||
await load();
|
||||
}
|
||||
} catch {
|
||||
stopImportPoll();
|
||||
error.value = 'پیگیری وضعیت ورود ناموفق بود.';
|
||||
}
|
||||
}
|
||||
|
||||
function startImportPoll(jobId: string) {
|
||||
stopImportPoll();
|
||||
void pollImport(jobId);
|
||||
importTimer = setInterval(() => void pollImport(jobId), 1500);
|
||||
}
|
||||
|
||||
async function onImportFile(ev: Event) {
|
||||
const input = ev.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = '';
|
||||
if (!file) return;
|
||||
busy.value = true;
|
||||
error.value = '';
|
||||
okMsg.value = '';
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
const { data: job } = await api.post<LeadImportJobDto>('/leads/import/file', form, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
importJob.value = job;
|
||||
startImportPoll(job.id);
|
||||
} catch {
|
||||
error.value = 'ورود فایل ناموفق بود.';
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function goDetail(id: string) {
|
||||
void router.push({ name: 'lead-detail', params: { id } });
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [
|
||||
route.query.q,
|
||||
route.query.page,
|
||||
route.query.sort,
|
||||
route.query.stageId,
|
||||
route.query.assigneeId,
|
||||
route.query.unassigned,
|
||||
],
|
||||
() => {
|
||||
q.value = typeof route.query.q === 'string' ? route.query.q : '';
|
||||
void load();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await loadMeta();
|
||||
await load();
|
||||
const jobId = typeof route.query.jobId === 'string' ? route.query.jobId : '';
|
||||
if (jobId) startImportPoll(jobId);
|
||||
});
|
||||
|
||||
onBeforeUnmount(stopImportPoll);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page" @click="closePopups">
|
||||
<UiPageHeader title="لیدها" lead="مدیریت سرنخها، تخصیص و پیگیری">
|
||||
<template #actions>
|
||||
<RouterLink class="link-btn" :to="{ name: 'leads-board' }">
|
||||
<UiButton variant="ghost" size="sm">کاریز لیدها</UiButton>
|
||||
</RouterLink>
|
||||
<UiButton
|
||||
v-if="isAdmin"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
:disabled="busy"
|
||||
@click.stop="exportExcel"
|
||||
>
|
||||
خروجی اکسل
|
||||
</UiButton>
|
||||
<UiButton
|
||||
v-if="isAdmin"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
:disabled="busy"
|
||||
@click.stop="fileInput?.click()"
|
||||
>
|
||||
ورود از فایل
|
||||
</UiButton>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept=".xlsx,.xls,.csv"
|
||||
hidden
|
||||
@change="onImportFile"
|
||||
/>
|
||||
</template>
|
||||
</UiPageHeader>
|
||||
|
||||
<div class="toolbar">
|
||||
<form class="search" @submit.prevent="onSearch">
|
||||
<UiIcon name="search" :size="16" />
|
||||
<input v-model="q" type="search" placeholder="جستجو نام، موبایل، شهر…" />
|
||||
</form>
|
||||
<div class="toolbar-tools">
|
||||
<div class="pop">
|
||||
<button
|
||||
class="tool"
|
||||
type="button"
|
||||
@click.stop="sortOpen = !sortOpen; filterOpen = false"
|
||||
>
|
||||
<UiIcon name="trend" :size="16" />
|
||||
<span class="tool-label">مرتبسازی</span>
|
||||
</button>
|
||||
<ul v-if="sortOpen" class="menu">
|
||||
<li v-for="(label, key) in sortLabels" :key="key">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ on: sort === key }"
|
||||
@click.stop="setSort(key as SortKey)"
|
||||
>
|
||||
{{ label }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pop">
|
||||
<button
|
||||
class="tool"
|
||||
type="button"
|
||||
@click.stop="filterOpen = !filterOpen; sortOpen = false"
|
||||
>
|
||||
<UiIcon name="filter" :size="16" />
|
||||
<span class="tool-label">فیلتر</span>
|
||||
</button>
|
||||
<ul v-if="filterOpen" class="menu wide">
|
||||
<li class="menu-label">وضعیت</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ on: !stageId }"
|
||||
@click.stop="setStageFilter('')"
|
||||
>
|
||||
همه
|
||||
</button>
|
||||
</li>
|
||||
<li v-for="s in stages" :key="s.id">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ on: stageId === s.id }"
|
||||
@click.stop="setStageFilter(s.id)"
|
||||
>
|
||||
{{ s.name }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="menu-label">کارشناس</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ on: !assigneeId && !unassigned }"
|
||||
@click.stop="setAssigneeFilter('')"
|
||||
>
|
||||
همه
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ on: unassigned }"
|
||||
@click.stop="setUnassigned(true)"
|
||||
>
|
||||
بدون کارشناس
|
||||
</button>
|
||||
</li>
|
||||
<li v-for="u in users" :key="u.id">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ on: assigneeId === u.id }"
|
||||
@click.stop="setAssigneeFilter(u.id)"
|
||||
>
|
||||
{{ u.fullName }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedIds.length" class="bulk-bar" @click.stop>
|
||||
<span>{{ toFaDigits(selectedIds.length) }} مورد انتخابشده</span>
|
||||
<template v-if="isAdmin">
|
||||
<div class="pop">
|
||||
<UiButton size="sm" variant="ghost" @click="assignOpen = !assignOpen">
|
||||
تخصیص
|
||||
</UiButton>
|
||||
<div v-if="assignOpen" class="menu panel">
|
||||
<select v-model="assignUserId">
|
||||
<option value="">انتخاب کارشناس…</option>
|
||||
<option v-for="u in users" :key="u.id" :value="u.id">
|
||||
{{ u.fullName }}
|
||||
</option>
|
||||
</select>
|
||||
<UiButton size="sm" :disabled="!assignUserId || busy" @click="assignSelected">
|
||||
اعمال
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop">
|
||||
<UiButton size="sm" variant="ghost" @click="stageOpen = !stageOpen">
|
||||
تغییر وضعیت
|
||||
</UiButton>
|
||||
<div v-if="stageOpen" class="menu panel">
|
||||
<select v-model="bulkStageId">
|
||||
<option value="">انتخاب وضعیت…</option>
|
||||
<option v-for="s in stages" :key="s.id" :value="s.id">
|
||||
{{ s.name }}
|
||||
</option>
|
||||
</select>
|
||||
<UiButton size="sm" :disabled="!bulkStageId || busy" @click="bulkStageSelected">
|
||||
اعمال
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<UiButton size="sm" variant="ghost" :disabled="busy" @click="archiveSelected">
|
||||
بایگانی
|
||||
</UiButton>
|
||||
</div>
|
||||
|
||||
<p v-if="importJob && importJob.status !== 'done' && importJob.status !== 'completed' && importJob.status !== 'failed'" class="ok">
|
||||
ورود فایل: {{ toFaDigits(importJob.processedCount) }} / {{ toFaDigits(importJob.totalCount) }}
|
||||
</p>
|
||||
<p v-if="okMsg" class="ok">{{ okMsg }}</p>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<template v-else-if="data?.items.length">
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="check-col">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="allSelected"
|
||||
@click.stop
|
||||
@change="toggleAll(($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
</th>
|
||||
<th>نام</th>
|
||||
<th>موبایل</th>
|
||||
<th>شهر</th>
|
||||
<th>وضعیت</th>
|
||||
<th>کارشناس</th>
|
||||
<th>آخرین تماس</th>
|
||||
<th>پیگیری بعدی</th>
|
||||
<th>منبع</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="lead in data.items"
|
||||
:key="lead.id"
|
||||
class="row-click"
|
||||
@click="goDetail(lead.id)"
|
||||
>
|
||||
<td class="check-col" @click.stop>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selected.has(lead.id)"
|
||||
@change="toggleOne(lead.id, ($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{{ lead.title }}</strong>
|
||||
<span v-if="lead.contactName" class="sub">{{ lead.contactName }}</span>
|
||||
</td>
|
||||
<td dir="ltr">{{ lead.mobile || '—' }}</td>
|
||||
<td>{{ lead.city || '—' }}</td>
|
||||
<td>
|
||||
<span class="stage-pill">{{ lead.stageName }}</span>
|
||||
</td>
|
||||
<td>{{ lead.assigneeName || '—' }}</td>
|
||||
<td>{{ formatDate(lead.lastContactAt) }}</td>
|
||||
<td>{{ formatDate(lead.nextFollowUpAt) }}</td>
|
||||
<td>{{ lead.source || '—' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<UiPagination
|
||||
v-if="total"
|
||||
:page="page"
|
||||
:total-pages="pageCount"
|
||||
:total-items="total"
|
||||
@update:page="setPage"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<UiEmptyState
|
||||
v-else-if="!loading"
|
||||
title="لیدی ثبت نشده است."
|
||||
description="از ورود فایل استفاده کنید یا لید جدید بسازید."
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow-x: clip;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1 1 14rem;
|
||||
min-width: 180px;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0 0.75rem;
|
||||
min-height: var(--control-h);
|
||||
height: var(--control-h);
|
||||
color: var(--muted);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--accent-soft);
|
||||
}
|
||||
|
||||
.search input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.tool {
|
||||
min-height: var(--control-h);
|
||||
height: var(--control-h);
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
border-radius: var(--radius);
|
||||
padding: 0 0.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.pop {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
inset-inline-end: 0;
|
||||
z-index: 20;
|
||||
margin: 0;
|
||||
padding: 0.35rem;
|
||||
list-style: none;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
|
||||
min-width: 11rem;
|
||||
max-height: 18rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.menu.wide {
|
||||
min-width: 14rem;
|
||||
}
|
||||
|
||||
.menu.panel {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 0.65rem;
|
||||
min-width: 14rem;
|
||||
}
|
||||
|
||||
.menu button {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: none;
|
||||
text-align: start;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.menu button.on,
|
||||
.menu button:hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
padding: 0.35rem 0.55rem 0.15rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu select {
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0 0.5rem;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.bulk-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
padding: 0.55rem 0.75rem;
|
||||
background: var(--accent-soft);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 0.65rem 0.75rem;
|
||||
text-align: start;
|
||||
border-bottom: 1px solid var(--line);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
background: color-mix(in srgb, var(--surface-2, #f8fafc) 80%, #fff);
|
||||
}
|
||||
|
||||
.row-click {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.row-click:hover {
|
||||
background: color-mix(in srgb, var(--accent-soft) 55%, #fff);
|
||||
}
|
||||
|
||||
.check-col {
|
||||
width: 2.25rem;
|
||||
}
|
||||
|
||||
.sub {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.stage-pill {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ok {
|
||||
color: #0f766e;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #b91c1c;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.tool-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user