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

2025-10-05 17:32:39 +03:00
parent 7a924b6b61
commit 6d15c5921a
8 changed files with 1011 additions and 156 deletions
--- a/frontend/src/views/content/ContentListView.vue
+++ b/frontend/src/views/content/ContentListView.vue
@@ -21,13 +21,18 @@
    <div class="content-management-page">
      <!-- Заголовок страницы -->
      <div class="page-header">
-        <div class="header-content">
+          <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) {
-  router.push({ name: 'page-view', params: { 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;
--- a/frontend/src/views/content/PublicPageView.vue
+++ b/frontend/src/views/content/PublicPageView.vue
@@ -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>
--- a/frontend/src/views/content/PublicPagesView.vue
+++ b/frontend/src/views/content/PublicPagesView.vue
@@ -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>