feat(ui): standardize design system, modals, sidebar, and form inputs
- Implement unified design system tokens, 10px radius, and IRANSans typography - Modernize sidebar with Gemini-style collapsed expander, square 1:1 items, and elevated profile flyout - Standardize all modal dialogs with 16px padding, fixed header/footer, 16px medium title, and sticky bottom actions - Refactor DealFormView and CustomFieldsSection with standard UiField, UiInput, and UiSelect components - Add draggable bottom-left QuickCreate floating action button
This commit is contained in:
s.esmaeili
@@ -7,6 +7,17 @@ import type {
|
||||
FaqArticleDto,
|
||||
UpdateFaqArticleRequest,
|
||||
} from '@mento/shared';
|
||||
import {
|
||||
UiBadge,
|
||||
UiButton,
|
||||
UiCard,
|
||||
UiEmptyState,
|
||||
UiField,
|
||||
UiInput,
|
||||
UiPageHeader,
|
||||
UiTextarea,
|
||||
} from '@/components/ui';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
@@ -116,282 +127,204 @@ onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div class="head-copy">
|
||||
<h1>پایگاه دانش (FAQ)</h1>
|
||||
<p class="lead">سؤالات پرتکرار برای کاهش تیکت تکراری.</p>
|
||||
</div>
|
||||
</header>
|
||||
<section class="crm-page faq-page" dir="rtl">
|
||||
<UiPageHeader
|
||||
title="پایگاه دانش و سؤالات متداول"
|
||||
description="سؤالات پرتکرار و پاسخ‌های جامع برای تسریع در پاسخگویی پشتیبانان و کاهش تیکت‌های مکرر"
|
||||
/>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="ok" class="ok">{{ ok }}</p>
|
||||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
<div v-if="error" class="crm-alert crm-alert-danger">{{ error }}</div>
|
||||
<div v-if="ok" class="crm-alert crm-alert-success">{{ ok }}</div>
|
||||
|
||||
<form class="panel" @submit.prevent="save">
|
||||
<h2>{{ editingId ? 'ویرایش مقاله' : 'مقاله جدید' }}</h2>
|
||||
<div class="field">
|
||||
<label>سؤال</label>
|
||||
<input v-model="question" required maxlength="500" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>پاسخ</label>
|
||||
<textarea v-model="answer" rows="4" required />
|
||||
</div>
|
||||
<div class="row-fields">
|
||||
<div class="field">
|
||||
<label>دسته</label>
|
||||
<input v-model="category" maxlength="100" placeholder="مثلاً نصب" />
|
||||
<UiCard :title="editingId ? 'ویرایش مقاله' : 'مقاله جدید'" class="editor-card">
|
||||
<form class="crm-form" @submit.prevent="save">
|
||||
<UiField label="پرسش / عنوان مقاله" required>
|
||||
<UiInput v-model="question" required maxlength="500" placeholder="مثلاً نحوه فعال‌سازی حساب کاربری..." />
|
||||
</UiField>
|
||||
|
||||
<UiField label="پاسخ کامل" required>
|
||||
<UiTextarea v-model="answer" :rows="4" required placeholder="توضیحات و راهنمای گام‌به‌گام..." />
|
||||
</UiField>
|
||||
|
||||
<div class="form-grid-extra">
|
||||
<UiField label="دسته‌بندی">
|
||||
<UiInput v-model="category" maxlength="100" placeholder="مثلاً مالی، فنی، نصب" />
|
||||
</UiField>
|
||||
|
||||
<UiField label="ترتیب نمایش">
|
||||
<UiInput v-model.number="position" type="number" min="0" />
|
||||
</UiField>
|
||||
|
||||
<div class="publish-toggle-wrap">
|
||||
<label class="publish-label">
|
||||
<input v-model="isPublished" type="checkbox" />
|
||||
<span>منتشرشده در پورتال</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>ترتیب</label>
|
||||
<input v-model.number="position" type="number" min="0" />
|
||||
</div>
|
||||
<label class="check">
|
||||
<input v-model="isPublished" type="checkbox" />
|
||||
منتشرشده
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn primary" type="submit" :disabled="saving">
|
||||
{{ saving ? '…' : editingId ? 'ذخیره تغییرات' : 'افزودن' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="editingId"
|
||||
class="btn ghost"
|
||||
type="button"
|
||||
@click="resetForm"
|
||||
>
|
||||
انصراف
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="list">
|
||||
<article v-for="row in items" :key="row.id" class="card">
|
||||
<header>
|
||||
<strong>{{ row.question }}</strong>
|
||||
<span v-if="!row.isPublished" class="tag muted-tag">پیش‌نویس</span>
|
||||
<span v-if="row.category" class="tag">{{ row.category }}</span>
|
||||
</header>
|
||||
<p>{{ row.answer }}</p>
|
||||
<div class="card-actions">
|
||||
<button class="btn ghost" type="button" @click="startEdit(row)">
|
||||
<div class="form-actions-row">
|
||||
<UiButton type="submit" :loading="saving">
|
||||
{{ editingId ? 'ذخیره تغییرات' : 'افزودن مقاله' }}
|
||||
</UiButton>
|
||||
<UiButton v-if="editingId" variant="ghost" type="button" @click="resetForm">
|
||||
انصراف
|
||||
</UiButton>
|
||||
</div>
|
||||
</form>
|
||||
</UiCard>
|
||||
|
||||
<UiEmptyState
|
||||
v-if="!loading && !items.length"
|
||||
title="هنوز مقاله‌ای ثبت نشده است"
|
||||
description="با ثبت اولین سؤال و پاسخ، پایگاه دانش سازمان را تکمیل کنید."
|
||||
icon="document"
|
||||
/>
|
||||
|
||||
<div v-else class="articles-list">
|
||||
<UiCard v-for="row in items" :key="row.id" class="article-card">
|
||||
<div class="article-content">
|
||||
<div class="article-title-row">
|
||||
<strong class="article-question">{{ row.question }}</strong>
|
||||
<div class="article-badges">
|
||||
<UiBadge :variant="row.isPublished ? 'success' : 'neutral'">
|
||||
{{ row.isPublished ? 'منتشرشده' : 'پیش‌نویس' }}
|
||||
</UiBadge>
|
||||
<UiBadge v-if="row.category" variant="info">
|
||||
{{ row.category }}
|
||||
</UiBadge>
|
||||
</div>
|
||||
</div>
|
||||
<p class="article-answer">{{ row.answer }}</p>
|
||||
</div>
|
||||
|
||||
<div class="article-actions">
|
||||
<UiButton variant="secondary" size="sm" @click="startEdit(row)">
|
||||
<template #icon>
|
||||
<UiIcon name="pencil" />
|
||||
</template>
|
||||
ویرایش
|
||||
</button>
|
||||
<button class="btn danger" type="button" @click="remove(row)">
|
||||
</UiButton>
|
||||
<UiButton variant="danger" size="sm" @click="remove(row)">
|
||||
<template #icon>
|
||||
<UiIcon name="trash" />
|
||||
</template>
|
||||
حذف
|
||||
</button>
|
||||
</UiButton>
|
||||
</div>
|
||||
</article>
|
||||
<p v-if="!loading && !items.length" class="empty">هنوز مقاله‌ای نیست.</p>
|
||||
</UiCard>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
max-width: 720px;
|
||||
min-width: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
.faq-page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-6);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.head-copy {
|
||||
min-width: 0;
|
||||
.editor-card {
|
||||
padding: var(--sp-6);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.3rem;
|
||||
font-size: clamp(1.45rem, 2.5vw, 1.85rem);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.list {
|
||||
.form-grid-extra {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
|
||||
padding: 1.1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.row-fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: 1fr 1fr auto;
|
||||
gap: var(--sp-4);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.row-fields .field {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.85rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 5.5rem;
|
||||
padding: 0.65rem 0.85rem;
|
||||
}
|
||||
|
||||
.check {
|
||||
.publish-toggle-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: inherit;
|
||||
padding-bottom: 0.5rem;
|
||||
height: var(--control-h, 40px);
|
||||
}
|
||||
|
||||
.btn {
|
||||
.publish-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 0.95rem;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 700;
|
||||
border: 1px solid transparent;
|
||||
gap: var(--sp-2);
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: #fff;
|
||||
color: #0f766e;
|
||||
border-color: #99f6e4;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
background: #fff;
|
||||
color: #b91c1c;
|
||||
border-color: #fecaca;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-actions,
|
||||
.card-actions {
|
||||
.form-actions-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-2);
|
||||
margin-top: var(--sp-2);
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 18px;
|
||||
padding: 0.9rem 1rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
|
||||
.articles-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.card header {
|
||||
.article-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--sp-4);
|
||||
padding: var(--sp-4) var(--sp-5);
|
||||
}
|
||||
|
||||
.article-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.article-title-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0 0 0.65rem;
|
||||
white-space: pre-wrap;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.75rem;
|
||||
color: #0f766e;
|
||||
.article-question {
|
||||
font-size: var(--fs-md);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.muted-tag {
|
||||
color: #64748b;
|
||||
.article-badges {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.error {
|
||||
.article-answer {
|
||||
margin: 0;
|
||||
color: #b91c1c;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--lh-relaxed);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.ok {
|
||||
margin: 0;
|
||||
color: #0f766e;
|
||||
font-weight: 600;
|
||||
.article-actions {
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 1rem;
|
||||
border: 1px dashed #e2e8f0;
|
||||
border-radius: 18px;
|
||||
color: #64748b;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.form-grid-extra {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.row-fields {
|
||||
.article-card {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.row-fields .field {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.form-actions,
|
||||
.card-actions {
|
||||
flex-direction: column;
|
||||
.article-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user