tore/ya-aliya-soprovozhdayu-dogov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2: убрал форму вопросов, добавил статус источника

Browse Source
This commit is contained in:
tore 2026-09-14 20:35:02 +00:00
parent 029571c04e
commit 83b4b06a6e
1 changed files with 23 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
index.html
View File

@ -24,20 +24,9 @@
.step-list li { position: relative; padding-left: var(--kt-ai-space-10); margin-bottom: var(--kt-ai-space-3); } .step-list li { position: relative; padding-left: var(--kt-ai-space-10); margin-bottom: var(--kt-ai-space-3); }
.step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--kt-ai-primary); color: var(--kt-ai-bg); border-radius: var(--kt-ai-radius-full); text-align: center; line-height: 28px; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); } .step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--kt-ai-primary); color: var(--kt-ai-bg); border-radius: var(--kt-ai-radius-full); text-align: center; line-height: 28px; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); }
.link-hint { color: var(--kt-ai-link); font-size: var(--kt-ai-text-sm); } .link-hint { color: var(--kt-ai-link); font-size: var(--kt-ai-text-sm); }
.empty-state { text-align: center; padding: var(--kt-ai-space-12) var(--kt-ai-space-6); color: var(--kt-ai-fg-muted); } .no-source { color: var(--kt-ai-fg-muted); font-style: italic; }
.category-filter { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); justify-content: center; margin-top: var(--kt-ai-space-6); } .category-filter { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); justify-content: center; margin-top: var(--kt-ai-space-6); }
.filter-chip { cursor: pointer; } .filter-chip { cursor: pointer; }
.filter-chip[data-active="true"] { data-tone: "primary"; }
.add-question-form { max-width: 600px; margin: var(--kt-ai-space-8) auto; display: none; }
.add-question-form[data-visible="true"] { display: block; }
.tabs { display: flex; gap: var(--kt-ai-space-2); border-bottom: 1px solid var(--kt-ai-border); margin-bottom: var(--kt-ai-space-6); }
.tab { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--kt-ai-fg-muted); }
.tab[data-active="true"] { border-bottom-color: var(--kt-ai-primary); color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); }
.my-questions-list { margin-top: var(--kt-ai-space-4); }
.my-question-item { display: flex; justify-content: space-between; align-items: center; padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); margin-bottom: var(--kt-ai-space-2); }
.toast { position: fixed; bottom: var(--kt-ai-space-6); right: var(--kt-ai-space-6); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-radius: var(--kt-ai-radius-xl); box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1000; display: none; }
.toast[data-visible="true"] { display: block; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
</style> </style>
</head> </head>
<body class="kt-ai-app" data-kt-data-mode="demo"> <body class="kt-ai-app" data-kt-data-mode="demo">
@ -50,9 +39,6 @@
</div> </div>
<span class="kt-ai-spacer"></span> <span class="kt-ai-spacer"></span>
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span> <span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
<span class="kt-ai-spacer"></span>
<button class="kt-ai-btn" data-variant="ghost" id="btnMyQuestions">Мои вопросы</button>
<button class="kt-ai-btn" data-variant="primary" id="btnAddQuestion">Задать вопрос</button>
</div> </div>
</header> </header>
@ -82,49 +68,17 @@
<span class="kt-ai-chip filter-chip" data-category="other">Другое</span> <span class="kt-ai-chip filter-chip" data-category="other">Другое</span>
</div> </div>
<div class="tabs" id="tabs" style="display:none"> <div id="emptyState" class="kt-ai-empty" style="display:none;text-align:center;padding:var(--kt-ai-space-12) var(--kt-ai-space-6)">
<div class="tab" data-tab="all" data-active="true">База знаний</div>
<div class="tab" data-tab="my">Мои вопросы</div>
</div>
<div id="emptyState" class="empty-state" style="display:none">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-faint)" stroke-width="1.5" style="margin-bottom:var(--kt-ai-space-4)"> <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-faint)" stroke-width="1.5" style="margin-bottom:var(--kt-ai-space-4)">
<circle cx="11" cy="11" r="8"></circle> <circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path> <path d="m21 21-4.35-4.35"></path>
</svg> </svg>
<h3 style="color:var(--kt-ai-fg);margin-bottom:var(--kt-ai-space-2)">Ничего не найдено</h3> <h3 style="color:var(--kt-ai-fg);margin-bottom:var(--kt-ai-space-2)">Ничего не найдено</h3>
<p>Попробуйте изменить поисковый запрос или категорию</p> <p style="color:var(--kt-ai-fg-muted)">Попробуйте изменить поисковый запрос или категорию</p>
</div> </div>
<div class="qa-grid" id="qaGrid"></div> <div class="qa-grid" id="qaGrid"></div>
<form class="add-question-form kt-ai-card" id="addQuestionForm" style="padding:var(--kt-ai-space-6)">
<h2 style="margin-bottom:var(--kt-ai-space-4)">Новый вопрос</h2>
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
<label for="questionTitle">Ваш вопрос</label>
<input type="text" class="kt-ai-input" id="questionTitle" required placeholder="Кратко сформулируйте вопрос">
</div>
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
<label for="questionCategory">Категория</label>
<select class="kt-ai-select" id="questionCategory">
<option value="create">Создание заявки</option>
<option value="approve">Согласование</option>
<option value="find">Поиск решений</option>
<option value="other">Другое</option>
</select>
</div>
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
<label for="questionDetails">Подробности (необязательно)</label>
<textarea class="kt-ai-textarea" id="questionDetails" rows="4" placeholder="Опишите вашу ситуацию подробнее"></textarea>
</div>
<div style="display:flex;gap:var(--kt-ai-space-3)">
<button type="submit" class="kt-ai-btn" data-variant="primary">Отправить вопрос</button>
<button type="button" class="kt-ai-btn" data-variant="ghost" id="btnCancelAdd">Отмена</button>
</div>
</form>
<div class="my-questions-list" id="myQuestionsList" style="display:none"></div>
</main> </main>
<footer class="kt-ai-wrap kt-ai-pagefoot"> <footer class="kt-ai-wrap kt-ai-pagefoot">
@ -133,8 +87,6 @@
<span style="color:var(--kt-ai-fg-muted)">База знаний для сотрудников</span> <span style="color:var(--kt-ai-fg-muted)">База знаний для сотрудников</span>
</footer> </footer>
<div class="toast" id="toast"></div>
<script> <script>
// === Демо-данные: база знаний === // === Демо-данные: база знаний ===
const DEMO_DATA = [ const DEMO_DATA = [
@ -142,14 +94,14 @@ const DEMO_DATA = [
id: 1, id: 1,
category: 'create', category: 'create',
question: 'Как создать заявку в портале?', question: 'Как создать заявку в портале?',
answer: '<ol class="step-list"><li>Войдите в портал по ссылке <a href="#" class="link-hint">portal.kazakhtelecom.kz</a></li><li>Нажмите кнопку «Создать заявку» в верхнем меню</li><li>Заполните обязательные поля: тип договора, контрагент, сумма</li><li>Прикрепите скан-копии документов</li><li>Нажмите «Отправить на согласование»</li></ol><p class="link-hint" style="margin-top:var(--kt-ai-space-3)">📄 <a href="#">Полная инструкция (PDF, 2.4 МБ)</a></p>', answer: '<ol class="step-list"><li>Войдите в портал по ссылке <a href="#" class="link-hint">portal.kazakhtelecom.kz</a></li><li>Нажмите кнопку «Создать заявку» в верхнем меню</li><li>Заполните обязательные поля: тип договора, контрагент, сумма</li><li>Прикрепите скан-копии документов</li><li>Нажмите «Отправить на согласование»</li></ol>',
link: 'portal.kazakhtelecom.kz/new' link: null
}, },
{ {
id: 2, id: 2,
category: 'create', category: 'create',
question: 'Какие документы нужны для создания заявки?', question: 'Какие документы нужны для создания заявки?',
answer: '<ol class="step-list"><li>Устав контрагента (действующая редакция)</li><li>Свидетельство о регистрации (ОГРН)</li><li>Приказ о назначении руководителя</li><li>Доверенность (если подписывает не руководитель)</li><li>Коммерческое предложение или счёт</li></ol><p class="link-hint" style="margin-top:var(--kt-ai-space-3)">📄 <a href="#">Чек-лист документов (PDF)</a></p>', answer: '<ol class="step-list"><li>Устав контрагента (действующая редакция)</li><li>Свидетельство о регистрации (ОГРН)</li><li>Приказ о назначении руководителя</li><li>Доверенность (если подписывает не руководитель)</li><li>Коммерческое предложение или счёт</li></ol>',
link: null link: null
}, },
{ {
@ -163,15 +115,15 @@ const DEMO_DATA = [
id: 4, id: 4,
category: 'approve', category: 'approve',
question: 'Сколько времени занимает согласование?', question: 'Сколько времени занимает согласование?',
answer: '<p>Нормативные сроки:</p><ul class="step-list"><li>До 500 тыс. ₸ — 3 рабочих дня</li><li>От 500 тыс. до 5 млн ₸ — 5 рабочих дней</li><li>Свыше 5 млн ₸ — 10 рабочих дней</li></ul><p class="link-hint" style="margin-top:var(--kt-ai-space-3)">⏱ <a href="#">Отследить статус заявки</a></p>', answer: '<p>Нормативные сроки:</p><ul class="step-list"><li>До 500 тыс. ₸ — 3 рабочих дня</li><li>От 500 тыс. до 5 млн ₸ — 5 рабочих дней</li><li>Свыше 5 млн ₸ — 10 рабочих дней</li></ul>',
link: 'portal.kazakhtelecom.kz/status' link: null
}, },
{ {
id: 5, id: 5,
category: 'find', category: 'find',
question: 'Где найти решение по договору?', question: 'Где найти решение по договору?',
answer: '<ol class="step-list"><li>Откройте портал в разделе «Мои заявки»</li><li>Найдите нужный договор по номеру или названию</li><li>Кликните на строку заявки</li><li>Перейдите на вкладку «Решения»</li><li>Скачайте файл с подписью и печатью</li></ol><p class="link-hint" style="margin-top:var(--kt-ai-space-3)">📂 <a href="#">Перейти к моим заявкам</a></p>', answer: '<ol class="step-list"><li>Откройте портал в разделе «Мои заявки»</li><li>Найдите нужный договор по номеру или названию</li><li>Кликните на строку заявки</li><li>Перейдите на вкладку «Решения»</li><li>Скачайте файл с подписью и печатью</li></ol>',
link: 'portal.kazakhtelecom.kz/my' link: null
}, },
{ {
id: 6, id: 6,
@ -197,11 +149,13 @@ const DEMO_DATA = [
]; ];
// === Состояние приложения === // === Состояние приложения ===
const FILTERS = [
{ id: 'category', label: 'Категория', affects: ['table'] }
];
let state = { let state = {
currentTab: 'all',
currentCategory: 'all', currentCategory: 'all',
searchQuery: '', searchQuery: ''
myQuestions: JSON.parse(localStorage.getItem('myQuestions') || '[]')
}; };
// === Инициализация === // === Инициализация ===
@ -238,7 +192,12 @@ function renderQA() {
} }
emptyState.style.display = 'none'; emptyState.style.display = 'none';
grid.innerHTML = data.map(q => ` grid.innerHTML = data.map(q => {
const linkHtml = q.link
? `<p class="link-hint" style="margin-top:var(--kt-ai-space-3)">📄 <a href="${q.link}" target="_blank" rel="noopener">Полная инструкция</a></p>`
: `<p class="no-source" style="margin-top:var(--kt-ai-space-3);font-size:var(--kt-ai-text-sm)">Источника пока нет</p>`;
return `
<div class="kt-ai-card qa-card" data-id="${q.id}" data-expanded="false" onclick="toggleCard(${q.id})"> <div class="kt-ai-card qa-card" data-id="${q.id}" data-expanded="false" onclick="toggleCard(${q.id})">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:var(--kt-ai-space-3)"> <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:var(--kt-ai-space-3)">
<h3 style="margin:0;color:var(--kt-ai-fg)">${q.question}</h3> <h3 style="margin:0;color:var(--kt-ai-fg)">${q.question}</h3>
@ -248,35 +207,10 @@ function renderQA() {
</div> </div>
<div class="qa-answer"> <div class="qa-answer">
${q.answer} ${q.answer}
${linkHtml}
</div> </div>
</div> </div>
`).join(''); `}).join('');
}
// === Рендеринг моих вопросов ===
function renderMyQuestions() {
const list = document.getElementById('myQuestionsList');
if (state.myQuestions.length === 0) {
list.innerHTML = '<div class="empty-state"><p style="color:var(--kt-ai-fg-muted)">Вы ещё не задали ни одного вопроса</p></div>';
return;
}
list.innerHTML = state.myQuestions.map((q, idx) => `
<div class="my-question-item">
<div>
<strong style="color:var(--kt-ai-fg)">${q.title}</strong>
<span class="kt-ai-chip" style="margin-left:var(--kt-ai-space-2)" data-tone="gray">${getCategoryName(q.category)}</span>
${q.details ? `<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm);margin-top:var(--kt-ai-space-1)">${q.details}</p>` : ''}
</div>
<span class="kt-ai-chip" data-tone="orange">На рассмотрении</span>
</div>
`).join('');
}
function getCategoryName(cat) {
const names = { create: 'Создание', approve: 'Согласование', find: 'Поиск', other: 'Другое' };
return names[cat] || cat;
} }
// === Переключение карточки === // === Переключение карточки ===
@ -308,80 +242,6 @@ function setupEventListeners() {
renderQA(); renderQA();
}); });
}); });
// Кнопка "Задать вопрос"
document.getElementById('btnAddQuestion').addEventListener('click', () => {
document.getElementById('addQuestionForm').dataset.visible = 'true';
document.getElementById('qaGrid').style.display = 'none';
document.getElementById('tabs').style.display = 'none';
});
// Отмена добавления
document.getElementById('btnCancelAdd').addEventListener('click', () => {
document.getElementById('addQuestionForm').dataset.visible = 'false';
document.getElementById('qaGrid').style.display = 'grid';
document.getElementById('tabs').style.display = 'flex';
});
// Отправка формы
document.getElementById('addQuestionForm').addEventListener('submit', (e) => {
e.preventDefault();
const title = document.getElementById('questionTitle').value;
const category = document.getElementById('questionCategory').value;
const details = document.getElementById('questionDetails').value;
state.myQuestions.push({ title, category, details, date: new Date().toISOString() });
localStorage.setItem('myQuestions', JSON.stringify(state.myQuestions));
document.getElementById('addQuestionForm').reset();
document.getElementById('addQuestionForm').dataset.visible = 'false';
document.getElementById('qaGrid').style.display = 'grid';
document.getElementById('tabs').style.display = 'flex';
showToast('Вопрос отправлен! Мы ответим в течение 2 рабочих дней');
renderMyQuestions();
});
// Кнопка "Мои вопросы"
document.getElementById('btnMyQuestions').addEventListener('click', () => {
state.currentTab = state.currentTab === 'my' ? 'all' : 'my';
updateTabs();
});
// Табы
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
state.currentTab = tab.dataset.tab;
updateTabs();
});
});
}
function updateTabs() {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(t => t.dataset.active = t.dataset.tab === state.currentTab ? 'true' : 'false');
if (state.currentTab === 'all') {
document.getElementById('qaGrid').style.display = 'grid';
document.getElementById('myQuestionsList').style.display = 'none';
document.getElementById('categoryFilter').style.display = 'flex';
document.getElementById('searchInput').parentElement.style.display = 'block';
} else {
document.getElementById('qaGrid').style.display = 'none';
document.getElementById('myQuestionsList').style.display = 'block';
document.getElementById('categoryFilter').style.display = 'none';
document.getElementById('searchInput').parentElement.style.display = 'none';
renderMyQuestions();
}
}
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.dataset.visible = 'true';
setTimeout(() => {
toast.dataset.visible = 'false';
}, 4000);
} }
// Сделать функцию доступной глобально // Сделать функцию доступной глобально