Initial SuperAdmin web panel (Vue 3)

2026-07-23 10:24:50 +03:30
commit 0f94a49b8d
63 changed files with 4762 additions and 0 deletions
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { LogoutOutlined, HomeOutlined } from '@ant-design/icons-vue'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+function goHome() {
+  router.push({ name: 'home' })
+}
+
+function logout() {
+  auth.logout()
+  router.push({ name: 'login' })
+}
+</script>
+
+<template>
+  <div class="shell">
+    <header class="topbar">
+      <button type="button" class="brand-btn" @click="goHome">
+        <span class="brand-dot" />
+        <span>
+          <strong>Super Admin</strong>
+          <small>آبشده</small>
+        </span>
+      </button>
+
+      <div class="topbar-actions">
+        <button type="button" class="icon-btn" title="داشبورد" @click="goHome">
+          <HomeOutlined />
+        </button>
+        <div class="user-chip">
+          <span class="avatar">{{ auth.user?.name?.slice(0, 1) || 'S' }}</span>
+          <span class="user-name">{{ auth.user?.name }}</span>
+        </div>
+        <button type="button" class="icon-btn" title="خروج" @click="logout">
+          <LogoutOutlined />
+        </button>
+      </div>
+    </header>
+
+    <main class="content">
+      <RouterView />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.shell {
+  min-height: 100vh;
+  background: #eef2f7;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid #e8eef5;
+}
+
+.brand-btn {
+  appearance: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  font-family: inherit;
+  color: #2d3748;
+  padding: 0;
+}
+
+.brand-dot {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, #3ad4b0, #20c997);
+  box-shadow: 0 8px 18px rgba(32, 201, 151, 0.28);
+}
+
+.brand-btn strong {
+  display: block;
+  font-size: 0.95rem;
+  font-weight: 800;
+}
+
+.brand-btn small {
+  display: block;
+  margin-top: 2px;
+  color: #8b95a8;
+  font-size: 0.75rem;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  border: none;
+  background: #f3f6fb;
+  color: #5b6b7c;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  font-size: 16px;
+}
+
+.user-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px 4px 4px;
+  border-radius: 999px;
+  background: #f3f6fb;
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(145deg, #9b7cff, #7c5cfc);
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.85rem;
+}
+
+.user-name {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #2d3748;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.content {
+  padding: 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .topbar { padding: 16px 24px; }
+  .content { padding: 24px; }
+}
+
+@media (max-width: 520px) {
+  .user-name { display: none; }
+}
+</style>