Sync admin settings and media with the public landing site.

Show logo in the navbar, add image upload fields for logo/team/work/blog/gallery, and drive site chrome from settings everywhere. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-30 22:10:45 +03:30
parent ceac76781b
commit c33a757af4
14 changed files with 189 additions and 49 deletions
@@ -0,0 +1,63 @@
+<template>
+  <div class="field">
+    <label v-if="label" class="label">{{ label }}</label>
+    <div class="row" style="gap: 0.75rem; align-items: flex-start">
+      <div style="flex: 1">
+        <input v-model="model" class="input" dir="ltr" :placeholder="placeholder" />
+        <div class="row" style="margin-top: 0.5rem">
+          <input type="file" accept="image/*" @change="onFile" />
+          <button type="button" class="btn ghost" :disabled="!file || uploading" @click="upload">
+            {{ uploading ? "در حال آپلود..." : "آپلود تصویر" }}
+          </button>
+        </div>
+        <p v-if="hint" class="muted" style="margin-top: 0.35rem">{{ hint }}</p>
+        <p v-if="err" class="muted" style="color: var(--danger); margin-top: 0.35rem">{{ err }}</p>
+      </div>
+      <img
+        v-if="model"
+        :src="model"
+        alt=""
+        style="width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #0c0e12"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { api } from "../lib/api";
+
+const model = defineModel<string>({ default: "" });
+defineProps<{
+  label?: string;
+  placeholder?: string;
+  hint?: string;
+}>();
+
+const file = ref<File | null>(null);
+const uploading = ref(false);
+const err = ref("");
+
+function onFile(e: Event) {
+  const input = e.target as HTMLInputElement;
+  file.value = input.files?.[0] || null;
+  err.value = "";
+}
+
+async function upload() {
+  if (!file.value) return;
+  uploading.value = true;
+  err.value = "";
+  try {
+    const fd = new FormData();
+    fd.append("file", file.value);
+    const { data } = await api.post("/admin/media/upload", fd);
+    model.value = data.url;
+    file.value = null;
+  } catch {
+    err.value = "آپلود ناموفق بود.";
+  } finally {
+    uploading.value = false;
+  }
+}
+</script>
@@ -23,11 +23,8 @@
        <label class="label">متن پست</label>
        <textarea v-model="form.content" class="textarea" style="min-height: 240px" placeholder="متن را عادی بنویسید. برای پاراگراف جدید Enter بزنید." />
      </div>
+      <ImageField v-model="form.coverUrl" label="تصویر کاور" />
      <div class="grid-2">
-        <div class="field">
-          <label class="label">آدرس تصویر کاور</label>
-          <input v-model="form.coverUrl" class="input" dir="ltr" placeholder="از بخش رسانه آپلود کنید و آدرس را اینجا بگذارید" />
-        </div>
        <div class="field">
          <label class="label">عنوان سئو</label>
          <input v-model="form.seoTitle" class="input" />
@@ -40,14 +37,11 @@
          <label class="label">آدرس Canonical</label>
          <input v-model="form.canonical" class="input" dir="ltr" />
        </div>
-        <div class="field">
-          <label class="label">تصویر اشتراک‌گذاری</label>
-          <input v-model="form.ogImage" class="input" dir="ltr" />
-        </div>
        <div class="field">
          <label class="label"><input v-model="form.published" type="checkbox" /> منتشر شود</label>
        </div>
      </div>
+      <ImageField v-model="form.ogImage" label="تصویر اشتراک‌گذاری (اختیاری)" />
      <p v-if="msg" class="muted">{{ msg }}</p>
      <button class="btn">ذخیره</button>
    </form>
@@ -58,6 +52,7 @@
 import { computed, onMounted, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { api } from "../lib/api";
+import ImageField from "../components/ImageField.vue";

 const route = useRoute();
 const router = useRouter();
@@ -7,10 +7,6 @@
          <label class="label">عنوان</label>
          <input v-model="form.title" class="input" required />
        </div>
-        <div class="field">
-          <label class="label">آدرس تصویر</label>
-          <input v-model="form.imageUrl" class="input" dir="ltr" required />
-        </div>
        <div class="field">
          <label class="label">دسته</label>
          <input v-model="form.category" class="input" />
@@ -20,14 +16,18 @@
          <input v-model.number="form.sortOrder" type="number" class="input" />
        </div>
      </div>
-      <button class="btn">افزودن</button>
+      <ImageField v-model="form.imageUrl" label="تصویر" />
+      <button class="btn" style="margin-top: 0.75rem" :disabled="!form.imageUrl">افزودن</button>
    </form>
    <table class="table">
      <thead>
-        <tr><th>عنوان</th><th>دسته</th><th>ترتیب</th><th></th></tr>
+        <tr><th>پیش‌نمایش</th><th>عنوان</th><th>دسته</th><th>ترتیب</th><th></th></tr>
      </thead>
      <tbody>
        <tr v-for="g in items" :key="g.id">
+          <td>
+            <img v-if="g.imageUrl" :src="g.imageUrl" alt="" style="width:48px;height:48px;object-fit:cover;border-radius:6px" />
+          </td>
          <td>{{ g.title }}</td>
          <td class="muted">{{ g.category || "—" }}</td>
          <td>{{ g.sortOrder }}</td>
@@ -41,6 +41,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { api } from "../lib/api";
+import ImageField from "../components/ImageField.vue";

 const items = ref<any[]>([]);
 const form = reactive({ title: "", imageUrl: "", category: "", sortOrder: 0, published: true });
@@ -52,6 +53,7 @@ async function load() {
 onMounted(load);

 async function create() {
+  if (!form.imageUrl) return;
  await api.post("/admin/gallery", form);
  form.title = "";
  form.imageUrl = "";
@@ -67,8 +67,9 @@
          <div class="field"><label class="label">نام پروژه</label><input v-model="item.title" class="input" /></div>
          <div class="field"><label class="label">دسته‌بندی</label><input v-model="item.cat" class="input" /></div>
          <div class="field"><label class="label">سال</label><input v-model="item.year" class="input" /></div>
+          <ImageField v-model="item.imageUrl" label="تصویر پروژه" placeholder="/api/uploads/..." />
        </div>
-        <button type="button" class="btn ghost" @click="form.items.push({ n: String(form.items.length + 1).padStart(2, '0'), title: '', cat: '', year: '' })">+ افزودن پروژه</button>
+        <button type="button" class="btn ghost" @click="form.items.push({ n: String(form.items.length + 1).padStart(2, '0'), title: '', cat: '', year: '', imageUrl: '' })">+ افزودن پروژه</button>
      </template>

      <!-- PROCESS -->
@@ -114,8 +115,9 @@
          </div>
          <div class="field"><label class="label">نام</label><input v-model="m.name" class="input" /></div>
          <div class="field"><label class="label">سمت</label><input v-model="m.role" class="input" /></div>
+          <ImageField v-model="m.imageUrl" label="تصویر عضو" placeholder="/api/uploads/..." />
        </div>
-        <button type="button" class="btn ghost" @click="form.members.push({ name: '', role: '' })">+ افزودن عضو</button>
+        <button type="button" class="btn ghost" @click="form.members.push({ name: '', role: '', imageUrl: '' })">+ افزودن عضو</button>
      </template>

      <!-- FOOTER -->
@@ -142,6 +144,7 @@
 import { computed, onMounted, reactive, ref } from "vue";
 import { useRoute } from "vue-router";
 import { api } from "../lib/api";
+import ImageField from "../components/ImageField.vue";

 const TITLES: Record<string, string> = {
  hero: "صفحه اول (هیرو)",
@@ -202,9 +205,13 @@ onMounted(async () => {
  if (key === "marquee") marqueeText.value = (form.items || []).join("\n");
  if (key === "manifesto") manifestoWordsText.value = wordsToText(form.words || []);
  if (key === "services" || key === "work" || key === "stats") form.items = form.items || [];
+  if (key === "work") {
+    form.items = form.items.map((i: any) => ({ ...i, imageUrl: i.imageUrl || "" }));
+  }
  if (key === "process") form.steps = form.steps || [];
-  if (key === "team") form.members = form.members || [];
-  if (key === "footer") {
+  if (key === "team") {
+    form.members = (form.members || []).map((m: any) => ({ ...m, imageUrl: m.imageUrl || "" }));
+  }  if (key === "footer") {
    footerMarqueeText.value = (form.marquee || []).join("\n");
  }
  ready.value = true;
@@ -1,6 +1,7 @@
 <template>
  <div>
    <h1>تنظیمات سایت</h1>
+    <p class="muted">این مقادیر روی هدر، فوتر و کل سایت اعمال می‌شوند.</p>
    <form v-if="form" class="card" @submit.prevent="save">
      <div class="grid-2">
        <div class="field">
@@ -26,17 +27,19 @@
        <div class="field">
          <label class="label">منطقه زمانی</label>
          <select v-model="form.timezone" class="input" dir="ltr">
-            <option value="Asia/Tehran">Asia/Tehran (ایران — تهران، اصفهان، مشهد و …)</option>
+            <option value="Asia/Tehran">Asia/Tehran (ایران)</option>
            <option value="UTC">UTC</option>
          </select>
-          <p class="muted" style="margin-top: 0.35rem">برای همهٔ شهرهای ایران فقط Asia/Tehran معتبر است.</p>
-        </div>
-        <div class="field" style="grid-column: 1 / -1">
-          <label class="label">آدرس لوگو</label>
-          <input v-model="form.logoUrl" class="input" dir="ltr" placeholder="از بخش رسانه آپلود کنید و آدرس را اینجا بگذارید" />
        </div>
      </div>

+      <ImageField
+        v-model="form.logoUrl"
+        label="لوگو"
+        placeholder="/api/uploads/..."
+        hint="لوگو در هدر سایت نمایش داده می‌شود. اگر خالی باشد نام برند نشان داده می‌شود."
+      />
+
      <h2 style="margin: 1.25rem 0 0.75rem; font-size: 1rem">شبکه‌های اجتماعی</h2>
      <div v-for="(s, i) in socials" :key="i" class="item-box">
        <div class="row" style="justify-content: space-between; margin-bottom: 0.5rem">
@@ -45,16 +48,16 @@
        </div>
        <div class="grid-2">
          <div class="field">
-            <label class="label">نام (مثلاً لینکدین)</label>
+            <label class="label">نام</label>
            <input v-model="s.label" class="input" />
          </div>
          <div class="field">
-            <label class="label">آدرس لینک</label>
+            <label class="label">لینک</label>
            <input v-model="s.url" class="input" dir="ltr" placeholder="https://..." />
          </div>
        </div>
      </div>
-      <button type="button" class="btn ghost" @click="socials.push({ label: '', url: '' })">+ افزودن شبکه اجتماعی</button>
+      <button type="button" class="btn ghost" @click="socials.push({ label: '', url: '' })">+ افزودن</button>

      <p v-if="msg" class="muted" style="margin-top: 1rem">{{ msg }}</p>
      <button class="btn" style="margin-top: 0.75rem">ذخیره</button>
@@ -65,6 +68,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { api } from "../lib/api";
+import ImageField from "../components/ImageField.vue";

 const form = ref<{
  brandName: string;
@@ -110,7 +114,7 @@ async function save() {
    };
    const { data } = await api.put("/admin/settings", payload);
    form.value.logoUrl = data.logoUrl || "";
-    msg.value = "ذخیره شد.";
+    msg.value = "ذخیره شد. برای دیدن در سایت صفحه را رفرش کنید.";
  } catch (e: any) {
    const detail = e?.response?.data?.message;
    msg.value = Array.isArray(detail)
@@ -1,16 +1,24 @@
 <template>
  <header class="fixed inset-x-0 top-0 z-50 border-b border-white/[0.06] bg-ink/70 backdrop-blur-md">
    <div class="mx-auto flex max-w-[1500px] items-center justify-between px-6 py-4 md:px-10">
-      <NuxtLink to="/" class="font-display text-lg font-extrabold tracking-tight">
-        {{ brand }}<span class="align-super text-[0.55em] text-volt">®</span>
+      <NuxtLink to="/" class="flex items-center gap-3 font-display text-lg font-extrabold tracking-tight">
+        <img
+          v-if="logoSrc"
+          :src="logoSrc"
+          :alt="brand"
+          class="h-9 w-auto max-w-[140px] object-contain"
+        />
+        <template v-else>
+          {{ brand }}<span class="align-super text-[0.55em] text-volt">®</span>
+        </template>
      </NuxtLink>
      <nav class="hidden items-center gap-6 text-sm text-ash md:flex">
-        <a href="#services" class="hover:text-volt">خدمات</a>
-        <a href="#work" class="hover:text-volt">نمونه کارها</a>
-        <a href="#team" class="hover:text-volt">تیم</a>
+        <a href="/#services" class="hover:text-volt">خدمات</a>
+        <a href="/#work" class="hover:text-volt">نمونه کارها</a>
+        <a href="/#team" class="hover:text-volt">تیم</a>
        <NuxtLink to="/blog" class="hover:text-volt">بلاگ</NuxtLink>
        <NuxtLink to="/gallery" class="hover:text-volt">گالری</NuxtLink>
-        <a href="#contact" class="text-bone hover:text-volt">تماس</a>
+        <a href="/#contact" class="text-bone hover:text-volt">تماس</a>
      </nav>
      <span class="text-xs text-ash tabular-nums" dir="ltr">{{ time }}</span>
    </div>
@@ -19,9 +27,16 @@

 <script setup lang="ts">
 import { formatClock } from "~/utils/timezone";
+import { mediaUrl } from "~/utils/media";
+
+const props = defineProps<{
+  brand?: string;
+  logoUrl?: string | null;
+  timezone?: string;
+}>();

-const props = defineProps<{ brand?: string; timezone?: string }>();
 const brand = computed(() => props.brand || "منتک");
+const logoSrc = computed(() => mediaUrl(props.logoUrl));
 const time = ref("");

 onMounted(() => {
@@ -10,7 +10,10 @@
      </div>
      <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <figure v-for="m in data.members" :key="m.name" class="group">
-          <div class="aspect-[3/4] bg-gradient-to-br from-smoke to-ink" />
+          <div
+            class="aspect-[3/4] bg-gradient-to-br from-smoke to-ink bg-cover bg-center"
+            :style="m.imageUrl ? { backgroundImage: `url(${m.imageUrl})` } : {}"
+          />
          <figcaption class="mt-4">
            <p class="font-display text-xl font-bold group-hover:text-volt transition-colors">
              {{ m.name }}
@@ -29,7 +32,7 @@ defineProps<{
    tag: string;
    headline: string;
    body: string;
-    members: Array<{ name: string; role: string }>;
+    members: Array<{ name: string; role: string; imageUrl?: string }>;
  };
 }>();
 </script>
@@ -1,14 +1,17 @@
 <template>
  <section id="work" class="px-6 py-28 md:px-10 md:py-40">
    <div class="mx-auto max-w-[1500px]">
-      <SectionTag index="۰۳" :title="data.tag" right="۱۴۰۲ — ۱۴۰۴" />
+      <SectionTag index="۰۳" :title="data.tag" right="نمونه‌کارها" />
      <div class="mt-16 grid gap-6 md:grid-cols-2">
        <article
          v-for="p in data.items"
          :key="p.n"
          class="group relative overflow-hidden border border-white/[0.07] bg-coal p-6 md:p-8"
        >
-          <div class="mb-16 aspect-[16/10] bg-gradient-to-br from-smoke to-ink" />
+          <div
+            class="mb-16 aspect-[16/10] bg-gradient-to-br from-smoke to-ink bg-cover bg-center"
+            :style="p.imageUrl ? { backgroundImage: `url(${p.imageUrl})` } : {}"
+          />
          <div class="flex items-end justify-between gap-4">
            <div>
              <p class="text-xs text-ash">{{ p.n }} / {{ p.year }}</p>
@@ -29,7 +32,7 @@
 defineProps<{
  data: {
    tag: string;
-    items: Array<{ n: string; title: string; cat: string; year: string }>;
+    items: Array<{ n: string; title: string; cat: string; year: string; imageUrl?: string }>;
  };
 }>();
 </script>
@@ -0,0 +1,14 @@
+export async function useSiteChrome() {
+  const { data } = await useAsyncData("site-chrome", () => fetchPublicSite(), {
+    getCachedData: () => undefined,
+  });
+
+  return computed(() => ({
+    brand: data.value?.settings?.brandName || "منتک",
+    logoUrl: data.value?.settings?.logoUrl || "",
+    timezone: data.value?.settings?.timezone || "Asia/Tehran",
+    tagline: data.value?.settings?.tagline || "",
+    email: data.value?.settings?.email || "",
+    phone: data.value?.settings?.phone || "",
+  }));
+}
@@ -1,6 +1,10 @@
 <template>
  <article v-if="post" class="min-h-screen px-6 pb-24 pt-28 md:px-10">
-    <SiteNavbar brand="منتک" />
+    <SiteNavbar
+      :brand="chrome.brand"
+      :logo-url="chrome.logoUrl"
+      :timezone="chrome.timezone"
+    />
    <div class="mx-auto max-w-[760px]">
      <NuxtLink to="/blog" class="text-sm text-ash hover:text-volt">→ بازگشت به بلاگ</NuxtLink>
      <h1 class="mt-8 font-display text-3xl font-extrabold leading-tight md:text-5xl">
@@ -15,9 +19,12 @@
 </template>

 <script setup lang="ts">
+const chrome = await useSiteChrome();
 const route = useRoute();
 const slug = String(route.params.slug);
-const { data: post } = await useAsyncData(`blog-${slug}`, () => fetchPublicPost(slug));
+const { data: post } = await useAsyncData(`blog-${slug}`, () => fetchPublicPost(slug), {
+  getCachedData: () => undefined,
+});

 if (!post.value) {
  throw createError({ statusCode: 404, statusMessage: "پست پیدا نشد" });
@@ -1,6 +1,10 @@
 <template>
  <div class="min-h-screen px-6 pb-24 pt-28 md:px-10">
-    <SiteNavbar brand="منتک" />
+    <SiteNavbar
+      :brand="chrome.brand"
+      :logo-url="chrome.logoUrl"
+      :timezone="chrome.timezone"
+    />
    <div class="mx-auto max-w-[1100px]">
      <h1 class="font-display text-4xl font-extrabold md:text-6xl">بلاگ</h1>
      <p class="mt-4 max-w-xl text-ash">یادداشت‌هایی درباره محصول، مهندسی و ساخت نرم‌افزار.</p>
@@ -23,7 +27,12 @@
 </template>

 <script setup lang="ts">
-const { data: posts } = await useAsyncData("blog-list", () => fetchPublicBlog());
-const { data: page } = await useAsyncData("page-blog", () => fetchPage("blog"));
+const chrome = await useSiteChrome();
+const { data: posts } = await useAsyncData("blog-list", () => fetchPublicBlog(), {
+  getCachedData: () => undefined,
+});
+const { data: page } = await useAsyncData("page-blog", () => fetchPage("blog"), {
+  getCachedData: () => undefined,
+});
 applyPageSeo(page.value?.seo);
 </script>
@@ -1,6 +1,10 @@
 <template>
  <div class="min-h-screen px-6 pb-24 pt-28 md:px-10">
-    <SiteNavbar brand="منتک" />
+    <SiteNavbar
+      :brand="chrome.brand"
+      :logo-url="chrome.logoUrl"
+      :timezone="chrome.timezone"
+    />
    <div class="mx-auto max-w-[1500px]">
      <h1 class="font-display text-4xl font-extrabold md:text-6xl">گالری</h1>
      <p class="mt-4 max-w-xl text-ash">تصاویر منتخب از پروژه‌ها و فضای استودیو.</p>
@@ -22,7 +26,12 @@
 </template>

 <script setup lang="ts">
-const { data: items } = await useAsyncData("gallery", () => fetchPublicGallery());
-const { data: page } = await useAsyncData("page-gallery", () => fetchPage("gallery"));
+const chrome = await useSiteChrome();
+const { data: items } = await useAsyncData("gallery", () => fetchPublicGallery(), {
+  getCachedData: () => undefined,
+});
+const { data: page } = await useAsyncData("page-gallery", () => fetchPage("gallery"), {
+  getCachedData: () => undefined,
+});
 applyPageSeo(page.value?.seo);
 </script>
@@ -1,6 +1,10 @@
 <template>
  <div v-if="site">
-    <SiteNavbar :brand="site.settings.brandName" :timezone="site.settings.timezone" />
+    <SiteNavbar
+      :brand="site.settings.brandName"
+      :logo-url="site.settings.logoUrl"
+      :timezone="site.settings.timezone"
+    />
    <main>
      <HeroSection :data="site.sections.hero" />
      <section class="relative overflow-hidden py-16 md:py-24">
@@ -0,0 +1,5 @@
+/** Resolve media/logo URLs for browser and SSR (relative /api/uploads/... stay as-is). */
+export function mediaUrl(url?: string | null) {
+  if (!url) return "";
+  return url;
+}