src/components/layout/AdminShell.vue - master - yuya/updated-admin-ui

src/components/layout/AdminShell.vue
297 строк7 KB
yuya
update directory architecture
09 июл 2026, 14:02
09 июл 2026, 14:02361c5c8
<template>
  <section class="admin-dev-shell">
    <header class="admin-dev-header">
      <div class="admin-dev-brand">
        <span class="admin-dev-logo">
          <span>МЕДИА</span><span>ПОТОК</span>
        </span>
      </div>

      <label class="admin-dev-search">
        <i class="bx bx-search"></i>
        <input
          type="search"
          placeholder="Поиск по админке"
        />
      </label>

      <div class="admin-dev-user">
        <span class="admin-dev-user-meta">
          <span class="admin-dev-user-name">Демо пользователь</span>
          <span class="admin-dev-user-role">Администратор</span>
        </span>
        <span class="admin-dev-avatar">DU</span>
      </div>
    </header>

    <div class="admin-dev-body">
      <AdminSidebar />

      <main class="admin-dev-main">
        <div class="admin-dev-content-card">
          <AdminContentExplorer
            variant="page"
            :actions="contentPageActions"
            :standalone-actions="uploadContentActions"
            url="/content"
            @action-event="handleContentAction"
            @standalone-action-event="handleUploadAction"
          />
        </div>
      </main>
    </div>

    <ContentUploadModal
      v-if="isUploadModalVisible && selectedUploadType"
      :show="isUploadModalVisible"
      :type="selectedUploadType"
      @update:show="handleUploadModalVisibilityChange"
      @submit="handleUploadSubmit"
    />
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AdminSidebar from './AdminSidebar.vue';
import AdminContentExplorer from '~/features/content/components/AdminContentExplorer.vue';
import ContentUploadModal from '~/features/upload/components/ContentUploadModal.vue';

type UploadContentType = 'picture' | 'video' | 'audio' | 'widget'

type UploadSubmitPayload = {
  type: UploadContentType
}

const selectedUploadType = ref<UploadContentType | null>(null);
const isUploadModalVisible = ref(false);

const adminColorTokens = {
  accentSoft: '#256bfe'
};

const contentPageActions = [
  { key: 'row-action', title: 'Действие', icon: 'bx-bolt-circle', color: adminColorTokens.accentSoft }
];

const uploadContentActions = [
  { key: 'picture', title: 'Картинка', icon: 'bx-image-alt' },
  { key: 'widget', title: 'Медиашаблон', icon: 'bx-layout' },
  { key: 'video', title: 'Видео', icon: 'bx-movie-play' },
  { key: 'audio', title: 'Аудио', icon: 'bx-music' },
];

const uploadContentTypes = new Set<UploadContentType>(['picture', 'video', 'audio', 'widget']);

const isUploadContentType = (value: string): value is UploadContentType => uploadContentTypes.has(value as UploadContentType);

const handleContentAction = (_action: string, _row: unknown) => {
  // The admin prototype only demonstrates layout; editor canvas integration stays in the modal.
};

const handleUploadAction = (action: string) => {
  if (!isUploadContentType(action)) {
    return;
  }

  selectedUploadType.value = action;
  isUploadModalVisible.value = true;
};

const handleUploadModalVisibilityChange = (value: boolean) => {
  isUploadModalVisible.value = value;

  if (!value) {
    selectedUploadType.value = null;
  }
};

const handleUploadSubmit = (_payload: UploadSubmitPayload) => {
  // The upload form is mocked for the admin prototype.
};
</script>

<style scoped>
.admin-dev-shell {
  --admin-bg: #050713;
  --admin-surface: rgba(8, 11, 27, 0.96);
  --admin-surface-soft: rgba(16, 19, 44, 0.72);
  --admin-border: rgba(30, 34, 55, 0.74);
  --admin-text: #f6f8ff;
  --admin-text-secondary: #c8cddb;
  --admin-text-muted: #888fa2;
  --admin-accent-strong: #256bfe;
  --admin-accent: var(--admin-accent-strong);
  --admin-accent-soft: var(--admin-accent-strong);
  --admin-accent-rgb: 37, 107, 254;
  --admin-nav-z-top: 2147483600;

  width: 100%;
  max-width: 100vw;
  height: 100vh;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--admin-bg);
  color: #dce2f1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.admin-dev-header {
  height: 48px;
  display: grid;
  grid-template-columns: 180px minmax(240px, 520px) minmax(180px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(30, 34, 55, 0.74);
  background: rgba(8, 11, 27, 0.92);
  box-sizing: border-box;
}

.admin-dev-brand,
.admin-dev-user,
.admin-dev-search {
  min-width: 0;
  display: flex;
  align-items: center;
}

.admin-dev-brand {
  gap: 0;
}

.admin-dev-logo {
  display: inline-flex;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #f6f8ff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 18px;
  text-transform: uppercase;
}

.admin-dev-logo span:last-child {
  color: var(--admin-accent-strong);
}

.admin-dev-search {
  height: 30px;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(42, 49, 80, 0.76);
  border-radius: 7px;
  background: rgba(5, 7, 18, 0.76);
  color: rgba(136, 143, 162, 0.9);
  box-sizing: border-box;
}

.admin-dev-search i {
  flex: 0 0 auto;
  font-size: 15px;
}

.admin-dev-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f6f8ff;
  font: inherit;
  font-size: 12px;
}

.admin-dev-search input::placeholder {
  color: rgba(136, 143, 162, 0.62);
}

.admin-dev-user {
  justify-content: flex-end;
  gap: 10px;
}

.admin-dev-user-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.admin-dev-user-name {
  color: #f6f8ff;
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}

.admin-dev-user-role {
  color: rgba(136, 143, 162, 0.86);
  font-size: 10px;
  line-height: 13px;
  white-space: nowrap;
}

.admin-dev-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--admin-accent-rgb), 0.34);
  border-radius: 999px;
  background: rgba(var(--admin-accent-rgb), 0.14);
  color: #dce9ff;
  font-size: 10px;
  font-weight: 700;
}

.admin-dev-body {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  overflow: hidden;
}

.admin-dev-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
  background: #050713;
  box-sizing: border-box;
}

.admin-dev-content-card {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.admin-dev-content-card :deep(.content-picker) {
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
}

@media (max-width: 1000px) {
  .admin-dev-header {
    grid-template-columns: 170px minmax(180px, 1fr) auto;
  }

  .admin-dev-user-meta {
    display: none;
  }
}
</style>