index.pug 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. div(class="admin-blog")
  2. div(class="admin-blog__header")
  3. h1(class="admin-blog__title") Управление блогом
  4. button(
  5. @click="showArticleModal = true"
  6. class="admin-blog__add-btn"
  7. ) Новая статья
  8. div(class="admin-blog__content")
  9. div(class="admin-blog__filters")
  10. div(class="admin-blog__filter-group")
  11. label(class="admin-blog__label") Поиск
  12. input(
  13. v-model="searchQuery"
  14. type="text"
  15. class="admin-blog__input"
  16. placeholder="Поиск по заголовку..."
  17. )
  18. div(class="admin-blog__filter-group")
  19. label(class="admin-blog__label") Статус
  20. select(v-model="selectedStatus" class="admin-blog__select")
  21. option(value="") Все
  22. option(value="published") Опубликованные
  23. option(value="draft") Черновики
  24. div(class="admin-blog__list")
  25. div(
  26. v-for="article in filteredArticles"
  27. :key="article._id"
  28. class="admin-blog__item"
  29. )
  30. div(class="admin-blog__item-content")
  31. div(class="admin-blog__item-image")
  32. img(
  33. v-if="article.image"
  34. :src="article.image"
  35. :alt="article.title"
  36. class="admin-blog__image"
  37. )
  38. div(v-else class="admin-blog__no-image") Нет изображения
  39. div(class="admin-blog__item-info")
  40. h3(class="admin-blog__item-title") {{ article.title }}
  41. p(class="admin-blog__item-excerpt") {{ article.excerpt || 'Без описания' }}
  42. div(class="admin-blog__item-meta")
  43. span(class="admin-blog__item-date") {{ formatDate(article.createdAt) }}
  44. span(class="admin-blog__item-author") {{ article.author || 'Автор не указан' }}
  45. span(
  46. :class="getStatusClass(article.published)"
  47. ) {{ article.published ? 'Опубликовано' : 'Черновик' }}
  48. div(class="admin-blog__item-actions")
  49. button(
  50. @click="editArticle(article)"
  51. class="admin-blog__btn admin-blog__btn--edit"
  52. ) Редактировать
  53. button(
  54. @click="toggleArticleStatus(article)"
  55. :class="getToggleBtnClass(article.published)"
  56. ) {{ article.published ? 'В черновик' : 'Опубликовать' }}
  57. button(
  58. @click="deleteArticle(article._id)"
  59. class="admin-blog__btn admin-blog__btn--delete"
  60. ) Удалить
  61. // Модальное окно статьи
  62. div(v-if="showArticleModal" class="admin-blog__modal")
  63. div(class="admin-blog__modal-content")
  64. h3(class="admin-blog__modal-title") {{ editingArticle ? 'Редактирование' : 'Создание' }} статьи
  65. div(class="admin-blog__modal-form")
  66. div(class="admin-blog__form-group")
  67. label(class="admin-blog__label") Заголовок
  68. input(
  69. v-model="articleForm.title"
  70. type="text"
  71. class="admin-blog__input"
  72. placeholder="Введите заголовок статьи"
  73. )
  74. div(class="admin-blog__form-group")
  75. label(class="admin-blog__label") URL slug
  76. input(
  77. v-model="articleForm.slug"
  78. type="text"
  79. class="admin-blog__input"
  80. placeholder="url-slug"
  81. )
  82. div(class="admin-blog__form-group")
  83. label(class="admin-blog__label") Краткое описание
  84. textarea(
  85. v-model="articleForm.excerpt"
  86. class="admin-blog__textarea"
  87. placeholder="Краткое описание статьи"
  88. rows="3"
  89. )
  90. div(class="admin-blog__form-group")
  91. label(class="admin-blog__label") Ссылка на изображение
  92. input(
  93. v-model="articleForm.image"
  94. type="text"
  95. class="admin-blog__input"
  96. placeholder="https://example.com/image.jpg"
  97. )
  98. div(class="admin-blog__form-group")
  99. label(class="admin-blog__label") Автор
  100. input(
  101. v-model="articleForm.author"
  102. type="text"
  103. class="admin-blog__input"
  104. placeholder="Имя автора"
  105. )
  106. div(class="admin-blog__form-group")
  107. label(class="admin-blog__label") Содержание (Markdown)
  108. textarea(
  109. v-model="articleForm.content"
  110. class="admin-blog__textarea admin-blog__textarea--content"
  111. placeholder="Напишите содержание статьи в формате Markdown..."
  112. rows="10"
  113. )
  114. div(class="admin-blog__form-group")
  115. label(class="admin-blog__checkbox-label")
  116. input(
  117. v-model="articleForm.published"
  118. type="checkbox"
  119. class="admin-blog__checkbox"
  120. )
  121. span Опубликовать сразу
  122. div(class="admin-blog__form-group")
  123. label(class="admin-blog__label") Домены
  124. div(class="admin-blog__domains-list")
  125. label(
  126. v-for="domain in availableDomains"
  127. :key="domain._id"
  128. class="admin-blog__domain-label"
  129. )
  130. input(
  131. type="checkbox"
  132. :value="domain.domain"
  133. v-model="articleForm.domains"
  134. class="admin-blog__domain-checkbox"
  135. )
  136. span {{ domain.domain }}
  137. div(class="admin-blog__modal-actions")
  138. button(
  139. @click="saveArticle"
  140. class="admin-blog__btn admin-blog__btn--primary"
  141. ) {{ editingArticle ? 'Обновить' : 'Создать' }}
  142. button(
  143. @click="showArticleModal = false"
  144. class="admin-blog__btn admin-blog__btn--secondary"
  145. ) Отмена