Align older CRM pages with the Mento visual language.
Restyle list, form, settings, and secondary modules to match contacts/activities patterns with teal chrome, soft panels, and mobile layouts — without changing already-redesigned screens. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -4,6 +4,7 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import type {
|
||||
ProjectBoardBoardDto,
|
||||
ProjectBoardDto,
|
||||
@@ -143,35 +144,20 @@ onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div>
|
||||
<p class="eyebrow">پسازفروش</p>
|
||||
<h1>{{ board?.board.name || 'کاریز پروژه' }}</h1>
|
||||
<p class="lead">
|
||||
کارهای داخلی و تحویل را روی برد جابهجا کنید.
|
||||
<span v-if="board">{{ cardCount }} کارت</span>
|
||||
</p>
|
||||
<section class="page" dir="rtl">
|
||||
<header class="toolbar">
|
||||
<div class="title-block">
|
||||
<span class="brand-ico" aria-hidden="true">
|
||||
<UiIcon name="grid" :size="18" />
|
||||
</span>
|
||||
<div class="title-copy">
|
||||
<h1>{{ board?.board.name || 'کاریز پروژه' }}</h1>
|
||||
<p v-if="board" class="sub">{{ cardCount }} کارت</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn btn-ghost" type="button" :disabled="loading" @click="load">
|
||||
بروزرسانی
|
||||
</button>
|
||||
<RouterLink
|
||||
class="btn"
|
||||
:to="{
|
||||
name: 'project-card-new',
|
||||
query: selectedBoardId ? { boardId: selectedBoardId } : undefined,
|
||||
}"
|
||||
>
|
||||
کارت جدید
|
||||
</RouterLink>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="pipeline-bar">
|
||||
<label class="picker">
|
||||
<span>برد</span>
|
||||
<label class="board-pick">
|
||||
<span class="sr">انتخاب برد</span>
|
||||
<select
|
||||
:value="selectedBoardId"
|
||||
:disabled="loading || !boards.length"
|
||||
@@ -181,16 +167,33 @@ onMounted(load);
|
||||
{{ b.name }}{{ b.isDefault ? ' (پیشفرض)' : '' }}
|
||||
</option>
|
||||
</select>
|
||||
<UiIcon class="chev" name="chevron" :size="16" />
|
||||
</label>
|
||||
<button
|
||||
v-if="canCreateBoard"
|
||||
class="btn btn-ghost"
|
||||
type="button"
|
||||
@click="showCreate = !showCreate"
|
||||
>
|
||||
برد جدید
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<button class="btn-ghost-sm" type="button" :disabled="loading" @click="load">
|
||||
بروزرسانی
|
||||
</button>
|
||||
<button
|
||||
v-if="canCreateBoard"
|
||||
class="btn-ghost-sm"
|
||||
type="button"
|
||||
@click="showCreate = !showCreate"
|
||||
>
|
||||
برد جدید
|
||||
</button>
|
||||
<RouterLink
|
||||
class="btn primary"
|
||||
:to="{
|
||||
name: 'project-card-new',
|
||||
query: selectedBoardId ? { boardId: selectedBoardId } : undefined,
|
||||
}"
|
||||
>
|
||||
<UiIcon name="plus" :size="16" />
|
||||
کارت جدید
|
||||
</RouterLink>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<form
|
||||
v-if="showCreate && canCreateBoard"
|
||||
@@ -205,10 +208,10 @@ onMounted(load);
|
||||
required
|
||||
minlength="2"
|
||||
/>
|
||||
<button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
|
||||
<button class="btn primary" type="submit" :disabled="saving || newName.trim().length < 2">
|
||||
{{ saving ? 'در حال ساخت…' : 'ساخت' }}
|
||||
</button>
|
||||
<button class="btn btn-ghost" type="button" @click="showCreate = false">انصراف</button>
|
||||
<button class="btn-ghost-sm" type="button" @click="showCreate = false">انصراف</button>
|
||||
</form>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
@@ -225,8 +228,11 @@ onMounted(load);
|
||||
@drop="onDrop(stage.id, $event)"
|
||||
>
|
||||
<div class="column-head">
|
||||
<h2>{{ stage.name }}</h2>
|
||||
<span>{{ stage.cards.length }}</span>
|
||||
<div class="title-wrap">
|
||||
<span class="dot" aria-hidden="true" />
|
||||
<h2>{{ stage.name }}</h2>
|
||||
</div>
|
||||
<span class="count">{{ stage.cards.length }}</span>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<article
|
||||
@@ -258,134 +264,330 @@ onMounted(load);
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.page-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.2rem 0;
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
.lead,
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pipeline-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
overflow-x: clip;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
.picker {
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1 1 200px;
|
||||
gap: 0.55rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
min-width: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.picker select {
|
||||
flex: 1;
|
||||
|
||||
.brand-ico {
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #0f766e;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title-copy {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.sub,
|
||||
.muted {
|
||||
margin: 0.1rem 0 0;
|
||||
color: #64748b;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.board-pick {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.board-pick select {
|
||||
appearance: none;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.55rem 2rem 0.55rem 0.85rem;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.board-pick .chev {
|
||||
position: absolute;
|
||||
left: 0.65rem;
|
||||
pointer-events: none;
|
||||
color: #94a3b8;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
min-height: 42px;
|
||||
padding: 0.55rem 1rem;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
|
||||
}
|
||||
|
||||
.btn-ghost-sm {
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
color: #0f766e;
|
||||
border-radius: 10px;
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.create-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
padding: 0.85rem 1rem;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.create-box input {
|
||||
flex: 1 1 180px;
|
||||
border: 1px solid var(--line);
|
||||
min-width: 0;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: #fff;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #b42318;
|
||||
margin: 0;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.board {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(240px, 280px);
|
||||
gap: 0.85rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
scroll-snap-type: x proximity;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
background: #f6f7f9;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 0.75rem;
|
||||
min-height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
flex: 1 1 0;
|
||||
min-height: 420px;
|
||||
padding: 0.35rem 0.15rem 0.5rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.column.drop {
|
||||
outline: 2px dashed var(--accent);
|
||||
background: color-mix(in srgb, #ccfbf1 70%, transparent);
|
||||
border-color: #99f6e4;
|
||||
}
|
||||
|
||||
.column-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.65rem;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.15rem 0.25rem;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: #14b8a6;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.column-head h2 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
.column-head span {
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
|
||||
.count {
|
||||
font-size: 0.78rem;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
flex: 1;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.8rem;
|
||||
border: 1px solid color-mix(in srgb, #e2e8f0 70%, transparent);
|
||||
border-radius: 16px;
|
||||
padding: 0.95rem 1rem;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
cursor: grab;
|
||||
transition:
|
||||
box-shadow 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: color-mix(in srgb, #14b8a6 28%, #e2e8f0);
|
||||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
|
||||
}
|
||||
|
||||
.card.dragging {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin: 0.15rem 0 0;
|
||||
color: var(--muted);
|
||||
color: #64748b;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin: 0.5rem 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
margin: 1rem 0;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.sr {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.board-pick,
|
||||
.toolbar-actions {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.board-pick select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
margin-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar-actions .btn.primary {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 0 0 auto;
|
||||
width: min(320px, 86vw);
|
||||
min-width: min(320px, 86vw);
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.column {
|
||||
width: 88vw;
|
||||
min-width: 88vw;
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.create-box {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.create-box input,
|
||||
.create-box .btn,
|
||||
.create-box .btn-ghost-sm {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user