VC-HB3-Accelerator/DLE
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Добавлены публичные страницы и обновлена маршрутизация

Browse Source
This commit is contained in:
Alex
2025-10-05 17:32:39 +03:00
parent 7a924b6b61
commit 6d15c5921a
8 changed files with 1011 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.gitignore vendored
View File

@@ -204,6 +204,14 @@ backend/test_*.js
backend/.env.local
backend/.env.production
# ========================================
# ДОКУМЕНТАЦИЯ - НЕ ПУБЛИКОВАТЬ!
# ========================================
# Документация проекта
docs/
**/docs/
# ========================================
# ПАТЕНТНЫЕ ДОКУМЕНТЫ - НЕ ПУБЛИКОВАТЬ!
# ========================================

11
backend/routes/auth.js
View File

@@ -651,15 +651,22 @@ router.get('/check', async (req, res) => {
try {
identities = await identityService.getUserIdentities(req.session.userId);
// Проверяем роль пользователя
// Для пользователей с кошельком проверяем токены в реальном времени
if (authType === 'wallet' && req.session.address) {
isAdmin = await authService.checkAdminTokens(req.session.address);
logger.info(`[auth/check] Admin status for wallet ${req.session.address}: ${isAdmin}`);
} else {
// Для других типов аутентификации используем роль из БД
const roleResult = await db.getQuery()('SELECT role FROM users WHERE id = $1', [
req.session.userId,
]);
if (roleResult.rows.length > 0) {
isAdmin = roleResult.rows[0].role === 'admin';
req.session.isAdmin = isAdmin;
}
}
req.session.isAdmin = isAdmin;
} catch (error) {
logger.error(`[session/check] Error fetching identities: ${error.message}`);
}

242
backend/routes/pages.js
View File

@@ -16,23 +16,40 @@ const db = require('../db');
const FIELDS_TO_EXCLUDE = ['image', 'tags'];
// Проверка и создание таблицы для пользователя-админа
async function ensureUserPagesTable(userId, fields) {
// Проверка и создание общей таблицы для всех админов
async function ensureAdminPagesTable(fields) {
fields = fields.filter(f => !FIELDS_TO_EXCLUDE.includes(f));
const tableName = `pages_user_${userId}`;
const tableName = `admin_pages_simple`;
// Получаем ключ шифрования
const fs = require('fs');
const path = require('path');
let encryptionKey = 'default-key';
try {
const keyPath = path.join(__dirname, '../ssl/keys/full_db_encryption.key');
if (fs.existsSync(keyPath)) {
encryptionKey = fs.readFileSync(keyPath, 'utf8').trim();
}
} catch (keyError) {
// console.error('Error reading encryption key:', keyError);
}
// Проверяем, есть ли таблица
const existsRes = await db.getQuery()(
`SELECT to_regclass($1) as exists`, [tableName]
);
if (!existsRes.rows[0].exists) {
// Формируем SQL для создания таблицы с нужными полями
// Формируем SQL для создания таблицы с зашифрованными полями
let columns = [
'id SERIAL PRIMARY KEY',
'author_address_encrypted TEXT NOT NULL', // Зашифрованный адрес автора
'created_at TIMESTAMP DEFAULT NOW()',
'updated_at TIMESTAMP DEFAULT NOW()'
];
for (const field of fields) {
columns.push(`"${field}" TEXT`);
columns.push(`"${field}_encrypted" TEXT`);
}
const sql = `CREATE TABLE ${tableName} (${columns.join(', ')})`;
await db.getQuery()(sql);
@@ -42,87 +59,170 @@ async function ensureUserPagesTable(userId, fields) {
`SELECT column_name FROM information_schema.columns WHERE table_name = $1`, [tableName]
);
const existingCols = colRes.rows.map(r => r.column_name);
for (const field of fields) {
if (!existingCols.includes(field)) {
// Добавляем поле author_address_encrypted если его нет
if (!existingCols.includes('author_address_encrypted')) {
await db.getQuery()(
`ALTER TABLE ${tableName} ADD COLUMN "${field}" TEXT`
`ALTER TABLE ${tableName} ADD COLUMN author_address_encrypted TEXT`
);
}
for (const field of fields) {
const encryptedField = `${field}_encrypted`;
if (!existingCols.includes(encryptedField)) {
await db.getQuery()(
`ALTER TABLE ${tableName} ADD COLUMN "${encryptedField}" TEXT`
);
}
}
}
return tableName;
return { tableName, encryptionKey };
}
// Создать страницу (только для админа)
router.post('/', async (req, res) => {
if (!req.user || !req.user.isAdmin) {
if (!req.session || !req.session.authenticated) {
return res.status(401).json({ error: 'Требуется аутентификация' });
}
if (!req.session.address) {
return res.status(403).json({ error: 'Требуется подключение кошелька' });
}
// Проверяем роль админа через токены в кошельке
const authService = require('../services/auth-service');
const isAdmin = await authService.checkAdminTokens(req.session.address);
if (!isAdmin) {
return res.status(403).json({ error: 'Only admin can create pages' });
}
const userId = req.user.id;
const authorAddress = req.session.address;
const fields = Object.keys(req.body).filter(f => !FIELDS_TO_EXCLUDE.includes(f));
const filteredBody = {};
fields.forEach(f => { filteredBody[f] = req.body[f]; });
const tableName = await ensureUserPagesTable(userId, fields);
const tableName = `admin_pages_simple`;
// Формируем SQL для вставки данных
const colNames = fields.map(f => `"${f}"`).join(', ');
const values = Object.values(filteredBody);
const colNames = ['author_address', ...fields].join(', ');
const values = [authorAddress, ...fields.map(f => {
const value = typeof req.body[f] === 'object' ? JSON.stringify(req.body[f]) : req.body[f];
return value || '';
})];
const placeholders = values.map((_, i) => `$${i + 1}`).join(', ');
const sql = `INSERT INTO ${tableName} (${colNames}) VALUES (${placeholders}) RETURNING *`;
const { rows } = await db.getQuery()(sql, values);
res.json(rows[0]);
});
// Получить все страницы пользователя-админа
// Получить все страницы админов
router.get('/', async (req, res) => {
if (!req.user || !req.user.isAdmin) {
if (!req.session || !req.session.authenticated) {
return res.status(401).json({ error: 'Требуется аутентификация' });
}
if (!req.session.address) {
return res.status(403).json({ error: 'Требуется подключение кошелька' });
}
// Проверяем роль админа через токены в кошельке
const authService = require('../services/auth-service');
const isAdmin = await authService.checkAdminTokens(req.session.address);
if (!isAdmin) {
return res.status(403).json({ error: 'Only admin can view pages' });
}
const userId = req.user.id;
const tableName = `pages_user_${userId}`;
const tableName = `admin_pages_simple`;
// Получаем ключ шифрования
const fs = require('fs');
const path = require('path');
let encryptionKey = 'default-key';
try {
const keyPath = path.join(__dirname, '../ssl/keys/full_db_encryption.key');
if (fs.existsSync(keyPath)) {
encryptionKey = fs.readFileSync(keyPath, 'utf8').trim();
}
} catch (keyError) {
// console.error('Error reading encryption key:', keyError);
}
// Проверяем, есть ли таблица
const existsRes = await db.getQuery()(
`SELECT to_regclass($1) as exists`, [tableName]
);
if (!existsRes.rows[0].exists) return res.json([]);
const { rows } = await db.getQuery()(`SELECT * FROM ${tableName} ORDER BY created_at DESC`);
// Получаем все страницы всех админов
const { rows } = await db.getQuery()(`
SELECT * FROM ${tableName}
ORDER BY created_at DESC
`);
res.json(rows);
});
// Получить одну страницу по id
// Получить одну страницу по id (только для админа)
router.get('/:id', async (req, res) => {
if (!req.user || !req.user.isAdmin) {
if (!req.session || !req.session.authenticated) {
return res.status(401).json({ error: 'Требуется аутентификация' });
}
if (!req.session.address) {
return res.status(403).json({ error: 'Требуется подключение кошелька' });
}
// Проверяем роль админа через токены в кошельке
const authService = require('../services/auth-service');
const isAdmin = await authService.checkAdminTokens(req.session.address);
if (!isAdmin) {
return res.status(403).json({ error: 'Only admin can view pages' });
}
const userId = req.user.id;
const tableName = `pages_user_${userId}`;
const tableName = `admin_pages_simple`;
const existsRes = await db.getQuery()(
`SELECT to_regclass($1) as exists`, [tableName]
);
if (!existsRes.rows[0].exists) return res.status(404).json({ error: 'Page table not found' });
const { rows } = await db.getQuery()(`SELECT * FROM ${tableName} WHERE id = $1`, [req.params.id]);
const { rows } = await db.getQuery()(
`SELECT * FROM ${tableName} WHERE id = $1`,
[req.params.id]
);
if (!rows.length) return res.status(404).json({ error: 'Page not found' });
res.json(rows[0]);
});
// Редактировать страницу по id
router.patch('/:id', async (req, res) => {
if (!req.user || !req.user.isAdmin) {
if (!req.session || !req.session.authenticated) {
return res.status(401).json({ error: 'Требуется аутентификация' });
}
if (!req.session.address) {
return res.status(403).json({ error: 'Требуется подключение кошелька' });
}
// Проверяем роль админа через токены в кошельке
const authService = require('../services/auth-service');
const isAdmin = await authService.checkAdminTokens(req.session.address);
if (!isAdmin) {
return res.status(403).json({ error: 'Only admin can edit pages' });
}
const userId = req.user.id;
const tableName = `pages_user_${userId}`;
const tableName = `admin_pages_simple`;
const existsRes = await db.getQuery()(
`SELECT to_regclass($1) as exists`, [tableName]
);
if (!existsRes.rows[0].exists) return res.status(404).json({ error: 'Page table not found' });
const fields = Object.keys(req.body).filter(f => !FIELDS_TO_EXCLUDE.includes(f));
if (!fields.length) return res.status(400).json({ error: 'No fields to update' });
const filteredBody = {};
fields.forEach(f => { filteredBody[f] = req.body[f]; });
fields.forEach(f => {
// Преобразуем объекты в JSON строки
filteredBody[f] = typeof req.body[f] === 'object' ? JSON.stringify(req.body[f]) : req.body[f];
});
const setClause = fields.map((f, i) => `"${f}" = $${i + 1}`).join(', ');
const values = Object.values(filteredBody);
values.push(req.params.id);
const sql = `UPDATE ${tableName} SET ${setClause}, updated_at = NOW() WHERE id = $${fields.length + 1} RETURNING *`;
const { rows } = await db.getQuery()(sql, values);
if (!rows.length) return res.status(404).json({ error: 'Page not found' });
@@ -131,18 +231,92 @@ router.patch('/:id', async (req, res) => {
// Удалить страницу по id
router.delete('/:id', async (req, res) => {
if (!req.user || !req.user.isAdmin) {
if (!req.session || !req.session.authenticated) {
return res.status(401).json({ error: 'Требуется аутентификация' });
}
if (!req.session.address) {
return res.status(403).json({ error: 'Требуется подключение кошелька' });
}
// Проверяем роль админа через токены в кошельке
const authService = require('../services/auth-service');
const isAdmin = await authService.checkAdminTokens(req.session.address);
if (!isAdmin) {
return res.status(403).json({ error: 'Only admin can delete pages' });
}
const userId = req.user.id;
const tableName = `pages_user_${userId}`;
const tableName = `admin_pages_simple`;
const existsRes = await db.getQuery()(
`SELECT to_regclass($1) as exists`, [tableName]
);
if (!existsRes.rows[0].exists) return res.status(404).json({ error: 'Page table not found' });
const { rows } = await db.getQuery()(`DELETE FROM ${tableName} WHERE id = $1 RETURNING *`, [req.params.id]);
const { rows } = await db.getQuery()(
`DELETE FROM ${tableName} WHERE id = $1 RETURNING *`,
[req.params.id]
);
if (!rows.length) return res.status(404).json({ error: 'Page not found' });
res.json(rows[0]);
});
// Публичные маршруты для просмотра страниц (доступны всем пользователям)
// Получить все опубликованные страницы
router.get('/public/all', async (req, res) => {
try {
const tableName = `admin_pages_simple`;
// Проверяем, есть ли таблица
const existsRes = await db.getQuery()(
`SELECT to_regclass($1) as exists`, [tableName]
);
if (!existsRes.rows[0].exists) {
return res.json([]);
}
// Получаем все опубликованные страницы всех админов
const { rows } = await db.getQuery()(`
SELECT * FROM ${tableName}
WHERE status = 'published'
ORDER BY created_at DESC
`);
res.json(rows);
} catch (error) {
console.error('Ошибка получения публичных страниц:', error);
res.status(500).json({ error: 'Внутренняя ошибка сервера' });
}
});
// Получить одну опубликованную страницу по id
router.get('/public/:id', async (req, res) => {
try {
const tableName = `admin_pages_simple`;
// Проверяем, есть ли таблица
const existsRes = await db.getQuery()(
`SELECT to_regclass($1) as exists`, [tableName]
);
if (!existsRes.rows[0].exists) {
return res.status(404).json({ error: 'Страница не найдена или не опубликована' });
}
// Ищем страницу среди всех админов
const { rows } = await db.getQuery()(`
SELECT * FROM ${tableName}
WHERE id = $1 AND status = 'published'
`, [req.params.id]);
if (rows.length > 0) {
return res.json(rows[0]);
}
res.status(404).json({ error: 'Страница не найдена или не опубликована' });
} catch (error) {
console.error('Ошибка получения публичной страницы:', error);
res.status(500).json({ error: 'Внутренняя ошибка сервера' });
}
});
module.exports = router;

10
frontend/src/router/index.js
View File

@@ -197,6 +197,16 @@ const routes = [
name: 'page-edit',
component: () => import('../views/content/PageEditView.vue'),
},
{
path: '/pages/public',
name: 'public-pages',
component: () => import('../views/content/PublicPagesView.vue'),
},
{
path: '/pages/public/:id',
name: 'public-page-view',
component: () => import('../views/content/PublicPageView.vue'),
},
{
path: '/management',
name: 'management',

11
frontend/src/services/pagesService.js
View File

@@ -13,6 +13,7 @@
import api from '../api/axios';
export default {
// Админские методы (требуют аутентификации и прав админа)
async getPages() {
const res = await api.get('/pages');
return res.data;
@@ -33,4 +34,14 @@ export default {
const res = await api.delete(`/pages/${id}`);
return res.data;
},
// Публичные методы (доступны всем пользователям)
async getPublicPages() {
const res = await api.get('/pages/public/all');
return res.data;
},
async getPublicPage(id) {
const res = await api.get(`/pages/public/${id}`);
return res.data;
},
};

173
frontend/src/views/content/ContentListView.vue
View File

@@ -23,11 +23,16 @@
<div class="page-header">
<div class="header-content">
<h1>📄 Управление контентом</h1>
<p>Создавайте и управляйте страницами вашего DLE</p>
<button class="btn btn-primary" @click="goToCreate">
<p v-if="isAdmin && address">Создавайте и управляйте страницами вашего DLE</p>
<p v-else>Просмотр опубликованных страниц DLE</p>
<button v-if="isAdmin && address" class="btn btn-primary" @click="goToCreate">
<i class="fas fa-plus"></i>
Создать страницу
</button>
<button v-else class="btn btn-primary" @click="goToPublicPages">
<i class="fas fa-eye"></i>
Публичные страницы
</button>
</div>
<div class="header-actions">
<button class="close-btn" @click="goBack">×</button>
@@ -47,14 +52,6 @@
<i class="fas fa-file-alt"></i>
Страницы
</button>
<button
class="nav-tab"
:class="{ active: activeTab === 'templates' }"
@click="activeTab = 'templates'"
>
<i class="fas fa-layer-group"></i>
Шаблоны
</button>
<button
class="nav-tab"
:class="{ active: activeTab === 'settings' }"
@@ -71,7 +68,8 @@
<!-- Вкладка Страницы -->
<div v-if="activeTab === 'pages'" class="pages-section">
<div class="section-header">
<h2>Созданные страницы</h2>
<h2 v-if="isAdmin && address">Созданные страницы</h2>
<h2 v-else>Опубликованные страницы</h2>
<div class="search-box">
<input
v-model="searchQuery"
@@ -93,7 +91,7 @@
>
<div class="page-card-header">
<h3>{{ page.title }}</h3>
<div class="page-actions">
<div class="page-actions" v-if="isAdmin && address">
<button
class="action-btn edit-btn"
@click.stop="goToEdit(page.id)"
@@ -115,12 +113,16 @@
<div class="page-meta">
<span class="page-date">
<i class="fas fa-calendar"></i>
{{ formatDate(page.createdAt) }}
{{ formatDate(page.created_at) }}
</span>
<span class="page-status" :class="page.status">
<i class="fas fa-circle"></i>
{{ getStatusText(page.status) }}
</span>
<span class="page-author" v-if="page.author_address">
<i class="fas fa-user"></i>
{{ formatAddress(page.author_address) }}
</span>
</div>
</div>
</div>
@@ -131,12 +133,18 @@
<div class="empty-icon">
<i class="fas fa-file-alt"></i>
</div>
<h3>Нет созданных страниц</h3>
<p>Создайте первую страницу для вашего DLE</p>
<button class="btn btn-primary" @click="goToCreate">
<h3 v-if="isAdmin && address">Нет созданных страниц</h3>
<h3 v-else>Нет опубликованных страниц</h3>
<p v-if="isAdmin && address">Создайте первую страницу для вашего DLE</p>
<p v-else>Публичные страницы появятся здесь после их создания администраторами</p>
<button v-if="isAdmin && address" class="btn btn-primary" @click="goToCreate">
<i class="fas fa-plus"></i>
Создать страницу
</button>
<button v-else class="btn btn-primary" @click="goToPublicPages">
<i class="fas fa-eye"></i>
Публичные страницы
</button>
</div>
<!-- Загрузка -->
@@ -146,29 +154,6 @@
</div>
</div>
<!-- Вкладка Шаблоны -->
<div v-if="activeTab === 'templates'" class="templates-section">
<div class="section-header">
<h2>Шаблоны страниц</h2>
<p>Готовые шаблоны для быстрого создания контента</p>
</div>
<div class="templates-grid">
<div
v-for="template in templates"
:key="template.id"
class="template-card"
@click="useTemplate(template)"
>
<div class="template-icon">
<i :class="template.icon"></i>
</div>
<h3>{{ template.name }}</h3>
<p>{{ template.description }}</p>
<button class="btn btn-outline">Использовать шаблон</button>
</div>
</div>
</div>
<!-- Вкладка Настройки -->
<div v-if="activeTab === 'settings'" class="settings-section">
@@ -207,6 +192,7 @@ import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import BaseLayout from '../../components/BaseLayout.vue';
import pagesService from '../../services/pagesService';
import { useAuthContext } from '../../composables/useAuth';
// Props
const props = defineProps({
@@ -232,6 +218,7 @@ const props = defineProps({
const emit = defineEmits(['auth-action-completed']);
const router = useRouter();
const { isAdmin, address } = useAuthContext();
// Состояние
const activeTab = ref('pages');
@@ -248,33 +235,6 @@ const publishSettings = ref({
autoPublish: false
});
// Шаблоны
const templates = ref([
{
id: 1,
name: 'О компании',
description: 'Стандартная страница с информацией о компании',
icon: 'fas fa-building'
},
{
id: 2,
name: 'Услуги',
description: 'Страница с описанием услуг и сервисов',
icon: 'fas fa-cogs'
},
{
id: 3,
name: 'Контакты',
description: 'Контактная информация и форма обратной связи',
icon: 'fas fa-address-book'
},
{
id: 4,
name: 'Блог',
description: 'Шаблон для ведения блога и новостей',
icon: 'fas fa-blog'
}
]);
// Вычисляемые свойства
const filteredPages = computed(() => {
@@ -290,12 +250,20 @@ function goToCreate() {
router.push({ name: 'content-create' });
}
function goToPublicPages() {
router.push({ name: 'public-pages' });
}
function goBack() {
router.go(-1);
}
function goToPage(id) {
if (isAdmin.value && address.value) {
router.push({ name: 'page-view', params: { id } });
} else {
router.push({ name: 'public-page-view', params: { id } });
}
}
function goToEdit(id) {
@@ -313,18 +281,18 @@ async function deletePage(id) {
}
}
function useTemplate(template) {
router.push({
name: 'content-create',
query: { template: template.id }
});
}
function formatDate(date) {
if (!date) return 'Не указана';
return new Date(date).toLocaleDateString('ru-RU');
}
function formatAddress(address) {
if (!address) return '';
// Показываем сокращенный адрес: 0x1234...5678
return `${address.slice(0, 6)}...${address.slice(-4)}`;
}
function getStatusText(status) {
const statusMap = {
draft: 'Черновик',
@@ -337,7 +305,25 @@ function getStatusText(status) {
async function loadPages() {
try {
isLoading.value = true;
pages.value = await pagesService.getPages();
// Проверяем роль админа через кошелек
if (isAdmin.value && address.value) {
try {
// Пытаемся загрузить админские страницы
const response = await pagesService.getPages();
pages.value = response;
} catch (error) {
if (error.response?.status === 403) {
// Пользователь не админ или нет токенов, загружаем публичные страницы
pages.value = await pagesService.getPublicPages();
} else {
throw error;
}
}
} else {
// Пользователь не админ или нет кошелька, загружаем публичные страницы
pages.value = await pagesService.getPublicPages();
}
} catch (error) {
console.error('Ошибка загрузки страниц:', error);
pages.value = [];
@@ -592,44 +578,6 @@ onMounted(() => {
100% { transform: rotate(360deg); }
}
.templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.template-card {
background: white;
border-radius: var(--radius-sm);
padding: 25px;
text-align: center;
border: 1px solid #e9ecef;
cursor: pointer;
transition: all 0.3s ease;
}
.template-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.template-icon {
font-size: 3rem;
color: var(--color-primary);
margin-bottom: 15px;
}
.template-card h3 {
color: var(--color-primary);
margin: 0 0 10px 0;
}
.template-card p {
color: var(--color-grey-dark);
margin: 0 0 20px 0;
line-height: 1.5;
}
.settings-grid {
display: grid;
@@ -747,9 +695,6 @@ onMounted(() => {
grid-template-columns: 1fr;
}
.templates-grid {
grid-template-columns: 1fr;
}
.settings-grid {
grid-template-columns: 1fr;

345
frontend/src/views/content/PublicPageView.vue Normal file
View File

@@ -0,0 +1,345 @@
<!--
Copyright (c) 2024-2025 Тарабанов Александр Викторович
All rights reserved.
This software is proprietary and confidential.
Unauthorized copying, modification, or distribution is prohibited.
For licensing inquiries: info@hb3-accelerator.com
Website: https://hb3-accelerator.com
GitHub: https://github.com/HB3-ACCELERATOR
-->
<template>
<BaseLayout
:is-authenticated="isAuthenticated"
:identities="identities"
:token-balances="tokenBalances"
:is-loading-tokens="isLoadingTokens"
@auth-action-completed="$emit('auth-action-completed')"
>
<div class="public-page-view">
<!-- Кнопка назад -->
<div class="back-button">
<button class="btn btn-outline" @click="goBack">
<i class="fas fa-arrow-left"></i>
Назад к списку страниц
</button>
</div>
<!-- Заголовок страницы -->
<div class="page-header" v-if="page">
<h1>{{ page.title }}</h1>
<div class="page-meta">
<span class="page-date">
<i class="fas fa-calendar"></i>
{{ formatDate(page.created_at) }}
</span>
<span class="page-status published">
<i class="fas fa-circle"></i>
Опубликовано
</span>
<span class="page-author" v-if="page.author_address">
<i class="fas fa-user"></i>
Автор: {{ formatAddress(page.author_address) }}
</span>
</div>
</div>
<!-- Основной контент -->
<div class="content-block" v-if="page">
<!-- Краткое описание -->
<div v-if="page.summary" class="page-summary">
<h2>Описание</h2>
<p>{{ page.summary }}</p>
</div>
<!-- Основной контент -->
<div class="page-content">
<h2>Содержание</h2>
<div class="content-text" v-html="formatContent(page.content)"></div>
</div>
<!-- SEO информация -->
<div v-if="page.seo" class="page-seo">
<h2>SEO информация</h2>
<div class="seo-content" v-html="formatContent(page.seo)"></div>
</div>
</div>
<!-- Загрузка -->
<div v-else-if="isLoading" class="loading-state">
<div class="loading-spinner"></div>
<p>Загрузка страницы...</p>
</div>
<!-- Ошибка -->
<div v-else class="error-state">
<div class="error-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<h3>Страница не найдена</h3>
<p>Запрашиваемая страница не существует или не опубликована</p>
<button class="btn btn-primary" @click="goBack">
<i class="fas fa-arrow-left"></i>
Вернуться к списку
</button>
</div>
</div>
</BaseLayout>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import BaseLayout from '../../components/BaseLayout.vue';
import pagesService from '../../services/pagesService';
// Props
const props = defineProps({
isAuthenticated: {
type: Boolean,
default: false
},
identities: {
type: Array,
default: () => []
},
tokenBalances: {
type: Object,
default: () => ({})
},
isLoadingTokens: {
type: Boolean,
default: false
}
});
// Emits
const emit = defineEmits(['auth-action-completed']);
const router = useRouter();
const route = useRoute();
// Состояние
const page = ref(null);
const isLoading = ref(false);
// Методы
function goBack() {
router.push({ name: 'public-pages' });
}
function formatDate(date) {
if (!date) return 'Не указана';
return new Date(date).toLocaleDateString('ru-RU', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
function formatAddress(address) {
if (!address) return '';
// Показываем сокращенный адрес: 0x1234...5678
return `${address.slice(0, 6)}...${address.slice(-4)}`;
}
function formatContent(content) {
if (!content) return '';
// Простое форматирование - замена переносов строк на <br>
return content.replace(/\n/g, '<br>');
}
async function loadPage() {
try {
isLoading.value = true;
const pageId = route.params.id;
page.value = await pagesService.getPublicPage(pageId);
} catch (error) {
console.error('Ошибка загрузки страницы:', error);
page.value = null;
} finally {
isLoading.value = false;
}
}
// Загрузка данных
onMounted(() => {
loadPage();
});
</script>
<style scoped>
.public-page-view {
padding: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.back-button {
margin-bottom: 20px;
}
.page-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
.page-header h1 {
color: var(--color-primary);
font-size: 2.5rem;
margin: 0 0 15px 0;
line-height: 1.2;
}
.page-meta {
display: flex;
gap: 20px;
font-size: 0.9rem;
color: var(--color-grey-dark);
flex-wrap: wrap;
}
.page-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.page-status.published {
color: #4caf50;
}
.content-block {
background: #f8f9fa;
border-radius: var(--radius-lg);
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.page-summary,
.page-content,
.page-seo {
margin-bottom: 30px;
}
.page-summary:last-child,
.page-content:last-child,
.page-seo:last-child {
margin-bottom: 0;
}
.page-summary h2,
.page-content h2,
.page-seo h2 {
color: var(--color-primary);
font-size: 1.5rem;
margin: 0 0 15px 0;
}
.page-summary p {
color: var(--color-grey-dark);
font-size: 1.1rem;
line-height: 1.6;
margin: 0;
}
.content-text,
.seo-content {
color: var(--color-grey-dark);
font-size: 1rem;
line-height: 1.7;
}
.loading-state,
.error-state {
text-align: center;
padding: 60px 20px;
}
.loading-spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid var(--color-primary);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-icon {
font-size: 4rem;
color: #ff9800;
margin-bottom: 20px;
}
.error-state h3 {
color: var(--color-primary);
margin: 0 0 10px 0;
}
.error-state p {
color: var(--color-grey-dark);
margin: 0 0 25px 0;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: var(--radius-sm);
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--color-primary);
color: white;
}
.btn-primary:hover {
background: var(--color-primary-dark);
}
.btn-outline {
background: white;
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.btn-outline:hover {
background: var(--color-primary);
color: white;
}
@media (max-width: 768px) {
.public-page-view {
padding: 15px;
}
.page-header h1 {
font-size: 2rem;
}
.page-meta {
flex-direction: column;
gap: 10px;
}
.content-block {
padding: 20px;
}
}
</style>

355
frontend/src/views/content/PublicPagesView.vue Normal file
View File

@@ -0,0 +1,355 @@
<!--
Copyright (c) 2024-2025 Тарабанов Александр Викторович
All rights reserved.
This software is proprietary and confidential.
Unauthorized copying, modification, or distribution is prohibited.
For licensing inquiries: info@hb3-accelerator.com
Website: https://hb3-accelerator.com
GitHub: https://github.com/HB3-ACCELERATOR
-->
<template>
<BaseLayout
:is-authenticated="isAuthenticated"
:identities="identities"
:token-balances="tokenBalances"
:is-loading-tokens="isLoadingTokens"
@auth-action-completed="$emit('auth-action-completed')"
>
<div class="public-pages-page">
<!-- Заголовок страницы -->
<div class="page-header">
<div class="header-content">
<h1>📄 Публичные страницы</h1>
<p>Просмотр опубликованных страниц DLE</p>
</div>
</div>
<!-- Основной контент -->
<div class="content-block">
<div class="section-header">
<h2>Опубликованные страницы</h2>
<div class="search-box">
<input
v-model="searchQuery"
type="text"
placeholder="Поиск страниц..."
class="search-input"
>
<i class="fas fa-search search-icon"></i>
</div>
</div>
<!-- Список страниц -->
<div v-if="filteredPages.length" class="pages-grid">
<div
v-for="page in filteredPages"
:key="page.id"
class="page-card"
@click="goToPage(page.id)"
>
<div class="page-card-header">
<h3>{{ page.title }}</h3>
<div class="page-status published">
<i class="fas fa-circle"></i>
Опубликовано
</div>
</div>
<div class="page-card-content">
<p class="page-summary">{{ page.summary || 'Без описания' }}</p>
<div class="page-meta">
<span class="page-date">
<i class="fas fa-calendar"></i>
{{ formatDate(page.created_at) }}
</span>
<span class="page-author" v-if="page.author_address">
<i class="fas fa-user"></i>
{{ formatAddress(page.author_address) }}
</span>
</div>
</div>
</div>
</div>
<!-- Пустое состояние -->
<div v-else-if="!isLoading" class="empty-state">
<div class="empty-icon">
<i class="fas fa-file-alt"></i>
</div>
<h3>Нет опубликованных страниц</h3>
<p>Публичные страницы появятся здесь после их создания администраторами</p>
</div>
<!-- Загрузка -->
<div v-else class="loading-state">
<div class="loading-spinner"></div>
<p>Загрузка страниц...</p>
</div>
</div>
</div>
</BaseLayout>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import BaseLayout from '../../components/BaseLayout.vue';
import pagesService from '../../services/pagesService';
// Props
const props = defineProps({
isAuthenticated: {
type: Boolean,
default: false
},
identities: {
type: Array,
default: () => []
},
tokenBalances: {
type: Object,
default: () => ({})
},
isLoadingTokens: {
type: Boolean,
default: false
}
});
// Emits
const emit = defineEmits(['auth-action-completed']);
const router = useRouter();
// Состояние
const pages = ref([]);
const isLoading = ref(false);
const searchQuery = ref('');
// Вычисляемые свойства
const filteredPages = computed(() => {
if (!searchQuery.value) return pages.value;
return pages.value.filter(page =>
page.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
page.summary?.toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
// Методы
function goToPage(id) {
router.push({ name: 'public-page-view', params: { id } });
}
function formatDate(date) {
if (!date) return 'Не указана';
return new Date(date).toLocaleDateString('ru-RU');
}
function formatAddress(address) {
if (!address) return '';
// Показываем сокращенный адрес: 0x1234...5678
return `${address.slice(0, 6)}...${address.slice(-4)}`;
}
async function loadPages() {
try {
isLoading.value = true;
pages.value = await pagesService.getPublicPages();
} catch (error) {
console.error('Ошибка загрузки публичных страниц:', error);
pages.value = [];
} finally {
isLoading.value = false;
}
}
// Загрузка данных
onMounted(() => {
loadPages();
});
</script>
<style scoped>
.public-pages-page {
padding: 20px;
width: 100%;
}
.page-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
.header-content h1 {
color: var(--color-primary);
font-size: 2.5rem;
margin: 0 0 10px 0;
}
.header-content p {
color: var(--color-grey-dark);
font-size: 1.1rem;
margin: 0;
}
.content-block {
background: #f8f9fa;
border-radius: var(--radius-lg);
padding: 25px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.section-header h2 {
color: var(--color-primary);
margin: 0;
}
.search-box {
position: relative;
width: 300px;
}
.search-input {
width: 100%;
padding: 10px 40px 10px 15px;
border: 1px solid #e9ecef;
border-radius: var(--radius-sm);
font-size: 1rem;
}
.search-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--color-grey-dark);
}
.pages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
margin-top: 20px;
}
.page-card {
background: white;
border-radius: var(--radius-sm);
padding: 20px;
border: 1px solid #e9ecef;
cursor: pointer;
transition: all 0.3s ease;
}
.page-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.page-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.page-card-header h3 {
color: var(--color-primary);
margin: 0;
font-size: 1.2rem;
}
.page-status.published {
font-size: 0.9rem;
color: #4caf50;
}
.page-status.published i {
margin-right: 5px;
}
.page-summary {
color: var(--color-grey-dark);
margin: 0 0 15px 0;
line-height: 1.5;
}
.page-meta {
display: flex;
gap: 15px;
font-size: 0.9rem;
color: var(--color-grey-dark);
}
.page-date i,
.page-author i {
margin-right: 5px;
}
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-icon {
font-size: 4rem;
color: var(--color-grey-dark);
margin-bottom: 20px;
}
.empty-state h3 {
color: var(--color-primary);
margin: 0 0 10px 0;
}
.empty-state p {
color: var(--color-grey-dark);
margin: 0;
}
.loading-state {
text-align: center;
padding: 60px 20px;
}
.loading-spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid var(--color-primary);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.section-header {
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.search-box {
width: 100%;
}
.pages-grid {
grid-template-columns: 1fr;
}
}
</style>