Olobase Admin iskeletini indridiğinizde projeniz önceden oluşturulmuş varsayılan admin layout'u ile başlatılacaktır. Bu layout'un .vue şablonu src/layout/Admin.vue dosyasında bulunur ve src/routes/admin.js içindeki kimlik doğrulamalı rotaya aşağıdaki şekilde bağlanır:
src/router/admin.js
import AdminLayout from "@/layouts/Admin";
//...
export default {
path: "/",
name: "home",
redirect: "/dashboard",
component: AdminLayout,
meta: {
title: i18n.t("routes.home"),
},
children: [
//...
],
};
Her bölge için bir slota sahip özelleştirilebilir ana düzeni VaLayout olarak adlandırılmıştır.
Ad | Açıklama |
---|---|
VaAppBar | Kenar çubuğu alanı VNavigationDrawer, içerik başlığı bölgesi, ek özel mesajlar veya kimliğe bürünme durumu gibi önemli bildirimler vb. için ideal yerdir. |
VaBreadcrumbs | İçerik başlığı bölgesi, VBreadcrumb'lar ve/veya ek özel mesajlar veya kimliğe bürünme durumu gibi önemli bildirimler vb. İçin ideal yer. |
VaFooter | Alt bilgi alanına bazı kurumsal bilgileri ve bağlantıları koyabilirsiniz. |
VaAside | İhtiyacınız olan her şeyi koyabileceğiniz 2. sol veya sağ yan alan. |
Aşağıdaki bağlantılar bölümüne bakın.
Varsayılan VAppBar uygulama başlığını, başlık menülerini, doğrudan kaynak oluşturma bağlantılarını, genel yenileme eylemini, profil menüsünü içerir. Profil kullanıcısı açılır menüsü misafir modunda görünmez.
Özellik | Tür | Açıklama |
---|---|---|
title | string |
Varsayılan başlığı değiştirmek için OlobaseAdmin.setOptions() metodu içerisindeki title anahtarı değerini değiştirin. |
elevation | number|string |
Bileşenin gölge derecesini ayarlar. (Bknz. Vuetify Elevations). |
headerMenu | array |
Başlık bağlantıları en tepede görünür hale getirmeyi sağlar. |
disableCreate | boolean |
Oluşturma menüsünü devre dışı bırakır. |
disableReload | boolean |
Yeniden yükleme (sayfa yenileme) tuşunu devre dışı bırakır. |
color | string |
VNavigationDrawer için ana rengi ayarlar. |
sidebarColor | string |
VNavigationDrawer için belirtilen rengi ayarlar. |
listItemColor | string |
VNavigationDrawer liste öğleri için belirtilen rengi ayarlar. |
density | string |
Bileşenin kullandığı dikey yüksekliği ayarlar. Varsayılan "compact". Alabileceği değerler: 'default' | 'prominent' | 'comfortable' | 'compact'. |
listItemDensity | string |
List-item bileşenlerinin kullandığı dikey yüksekliği ayarlar. Varsayılan "compact". Alabileceği değerler: 'default' | 'prominent' | 'comfortable' | 'compact'. |
flat | boolean |
AppBar gölgesini kaldırır. |
Mevcut kullanıcının izinleri varsa, eylem bağlantıları oluşturma kayıtlı kaynaklarınızdan otomatik olarak oluşturulacaktır.
Yeniden yükleme tuşu, veri sağlayıcınızdan (örneğin getList, getOne veya getMany) gelen her listeleme çağrısını dinamik olarak yeniler. Manuel bir tıklama ile içerik yeni bir listeleme çağrısı gönderir. Bu tuş sadece listeleme sayfalarında gözükür.
Vuetify VNavigationDrawer bileşeni ile hiyerarşik menüye sahip varsayılan özelleştirilebilir bölümdür. Bu bölüm
packages/admin/src/components/layout/AppBar.vue
src/layout/Admin.vue
<template>
<v-app>
<va-layout
v-if="authenticatedUser"
>
<template #appbar>
<va-app-bar
:key="getCurrentLocale"
color="primary"
density="compact"
:header-menu="getHeaderMenu"
sidebar-color="white"
>
<template v-slot:logo>
<div class="mb-1" style="letter-spacing: 1px;">logo</div>
</template>
<template v-slot:avatar>
<v-avatar v-if="avatarExists" size="24px">
<v-img
:src="getAvatar"
alt="Avatar"
></v-img>
</v-avatar>
<v-icon v-else>mdi-account-circle</v-icon>
</template>
<template v-slot:profile>
<v-card min-width="300">
<v-list nav>
<v-list-item
v-if="getFullname"
:prepend-avatar="getAvatar"
>
<div class="list-item-content">
<v-list-item-title class="title">{{ getFullname }}</v-list-item-title>
<v-list-item-subtitle v-if="getEmail">{{ getEmail }}</v-list-item-subtitle>
</div>
</v-list-item>
<v-divider></v-divider>
<v-card flat>
<v-card-text style="padding:9px">
<v-list-item
v-for="(item, index) in getProfileMenu"
:key="index"
link
:to="item.link"
@click="item.logout ? logout() : null"
class=" mt-2"
>
<template v-slot:prepend>
<v-icon>{{ item.icon }}</v-icon>
</template>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
</v-card-text>
</v-card>
</v-list>
</v-card>
</template>
</va-app-bar>
</template>
<template #header>
<va-breadcrumbs />
</template>
<template #aside>
<va-aside />
</template>
<template #footer>
<va-footer
:key="getCurrentLocale"
:menu="getFooterMenu"
>
<span style="font-size:13px">© 2023</span>
</va-footer>
</template>
</va-layout>
</v-app>
</template>
<script>
import isEmpty from "lodash/isEmpty"
import { useDisplay } from "vuetify";
import { mapActions } from "vuex";
import Trans from "@/i18n/translation";
export default {
name: "App",
inject: ["admin"],
data() {
return {
authenticatedUser: null,
};
},
async created() {
/**
* Set default locale
*/
const lang = Trans.guessDefaultLocale();
if (lang && Trans.supportedLocales.includes(lang)) { // assign browser language
await Trans.switchLanguage(lang);
}
/**
* Check user is authenticated
*/
this.authenticatedUser = await this.checkAuth();
if (! this.authenticatedUser) {
this.$router.push({name: "login"});
} else {
//
// Please do not remove it, it periodically updates the session lifetime.
// Thus, as long as the user's browser is open, the user logged in to the application,
// otherwise the session will be closed when the ttl period expires.
//
this.admin.http.post('/auth/session', { update: 1 });
}
},
computed: {
avatarExists() {
let base64Image = this.$store.getters["auth/getAvatar"];
if (base64Image == "undefined" || base64Image == "null" || isEmpty(base64Image)) {
return false;
}
return true;
},
getAvatar() {
let base64Image = this.$store.getters["auth/getAvatar"];
if (base64Image == "undefined" || base64Image == "null" || isEmpty(base64Image)) {
return this.admin.getConfig().avatar.base64; // default avatar image
}
return base64Image;
},
getEmail() {
return this.$store.getters["auth/getEmail"];
},
getFullname() {
return this.$store.getters["auth/getFullname"];
},
getCurrentLocale() {
return this.$store.getters[`getLocale`];
},
getHeaderMenu() {
return [];
},
getProfileMenu() {
return [
{
icon: "mdi-account",
text: this.$t("va.account"),
link: "/account",
},
{
icon: "mdi-key-variant",
text: this.$t("va.changePassword"),
link: "/password",
},
{
icon: "mdi-logout",
text: this.$t("va.logout"),
logout: true,
},
];
},
getFooterMenu() {
return [
{
href: "https://oloma.dev/end-user-license-agreement",
text: this.$t("menu.terms"),
},
]
}
},
methods: {
...mapActions({
checkAuth: "auth/checkAuth",
}),
logout() {
this.$store.dispatch("auth/logout");
},
},
};</script>
VaAppBar layout logo ve navbar-logo olmak üzere iki ayrı slot içerisinden logo eklemenize izin verir.
<template v-slot:logo>
<div class="mb-1" style="letter-spacing: 1px;">logo</div>
</template>
Header bölümündeki logo ya alternatif olarak navbar-logo slotu ile navigasyon üzerinde de logo ekleyebilirsiniz.
<template v-slot:navbar-logo>
<div class="navbar-logo ml-14">
<img src="/src/assets/logo/navbar-logo.png" border="0" />
</div>
</template>
VaAppBar layout header-buttons slotunu kullanarak kendi tuşlarınızı oluşturabilirsiniz.
<template v-slot:header-buttons>
<v-btn
icon
small
>
<v-badge :color="yellow" dot>
<v-icon>mdi-cart-outline</v-icon>
</v-badge>
</v-btn>
<v-btn v-if="!authenticatedUser" :to="{ name: 'login' }">{{ $t("menu.login") }}</v-btn>
</template>
Bu alan VFooter bileşeni içinde bazı kurumsal bilgilerin gösterilmesini sağlayan altbilgi alanıdır.
Özellik | Tür | Açıklama |
---|---|---|
footerMenu | array |
Menu bağlantıları. |
Slotlar
Ad | Açıklama |
---|---|
default | Sağ taraftaki bilgiler. |
Breadcrumb'lar için v-breadcrumbs bileşenini kullananarak geçerli rotadan otomatik olarak hiyerarşik bağlantılar oluşturur.
Bağlamsallaştırılmış bazı ek bilgiler koyduğunuz özelleştirilebilir alandır. Herhangi bir bağlamda, herhangi bir yerden içerik entegrasyonu için VaAsideLayout bileşeni kullanılır.
Nitelikler | Tür | Açıklama |
---|---|---|
location | string |
Açılan bölümün pozisyonu. Alabileceği değerler: 'top' | 'end' | 'bottom' | 'start' | 'left' | 'right'. |
width | number |
Açılan bölümün genişliği. |
olobase-demo-ui/src/resources/Companies/List.vue
<template>
<div>
<va-aside-layout
:title="asideTitle"
>
<companies-form
v-if="action !== 'show'"
:id="id"
:item="item"
@saved="onSaved"
></companies-form>
</va-aside-layout>
<va-list
class="mb-0"
@action="onAction"
:filters="filters"
:fields="fields"
:items-per-page="50"
disable-create-redirect
>
<va-data-table-server
row-show
disable-show
disable-create-redirect
disable-edit-redirect
@item-action="onAction"
>
</va-data-table-server>
</va-list>
</div>
</template>
Daha fazla detay için demo uygulamamızdaki companies modülüne gözatın.
Gezinmeyi destekleyen bileşenlere yerleştirilebilecek tüm gezinme menüleri, bir bağlantıyı temsil eden basit bir nesne dizisidir. Gezinmeyi destekleyen bileşenler; header, profile, sidebar ve footer menü olmak üzere toplam 4 farklı bileşenden oluşur.
Aşağıdaki gibi basit bir menü dizisini bu bileşenlere göndererek menüler oluşturulur.
[
{
icon: "mdi-account",
text: this.$t("menu.profile"),
link: "/profile",
},
{
icon: "mdi-settings",
text: this.$t("menu.settings"),
link: "/settings",
},
]
Sidebar menu örneği:
src/_nav.js
export default {
build: async function(t, admin) {
return [
{
icon: "mdi-view-dashboard-outline",
text: t("menu.dashboard"),
link: "/dashboard",
},
{
icon: "mdi-cart-variant",
text: t("menu.plans"),
children: [
{
icon: "circle",
text: t("menu.subscriptions"),
link: "/subscriptions",
},
{
icon: "circle",
text: t("menu.services"),
link: "/services",
},
]
},
];
} // end func
} // end class
Menüyü yetkilere göre dinamik olarak oluşturmak için ilgili belgeye gözatın.
Nesne bağlantı yapısı:
Nitelik | Tür | Açıklama |
---|---|---|
icon | string |
Sol tarafta gösterilen menü simgesi. Geçerli bir mdi olmalıdır ve yalnızca kenar çubuğu ve profil menüsünde desteklenir. |
text | string |
Bağlantı etiketi. |
link | string | object |
Geçerli Vue yönlendirici menüsü. Child olan bağlantılar ile kullanılamaz. |
href | string |
Sadece harici bağlantı için kullanın. Target değeri boş olarak gönderilir. Child olan bağlantılar ile kullanılamaz. |
children | array |
Yalnızca kenar çubuğu için hiyerarşik menüye yönelik alt bağlantılar için kullanılır. Bağlantı veya href ile kullanılamaz. |
expanded | boolean |
Children bağlantılarını varsayılan olarak genişletilmiş olarak gösterir. Yalnızca child olan bağlantıları etkiler. |
heading | string |
Bağlantıyı yalnızca kenar çubuğu menüsü için bölüm etiketi başlığına dönüştürür. Kendi bünyesindeki diğer tüm özellikler devre dışı kalır. |
divider | boolean |
Bağlantıyı yalnızca kenar çubuğu menüsü için ayırıcıya dönüştürür. Kendi bünyesindeki diğer tüm özellikler devre dışı kalır. |