feat(layout): Layout-Einstellungen, Dark-Mode, Logo, Hilfe-Menü
- Settings Key-Value Store (DB + Cache) - Einstellungen → Layout: Seitenname, Logo, Button-Farbe, Dark/Light-Mode - Hilfe-Menü (Ebene 0): Handbuch + Changelog im Browser - Navigation erweitert: Einstellungen-Dropdown + Hilfe-Dropdown - CHANGELOG v0.4.0 Version: 0.4.0
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
Changelog
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-8">
|
||||
<div class="prose dark:prose-invert max-w-none">
|
||||
@php
|
||||
// Einfaches Markdown-to-HTML für den Changelog
|
||||
$lines = explode("\n", $content);
|
||||
$html = '';
|
||||
foreach ($lines as $line) {
|
||||
if (str_starts_with($line, '## ')) {
|
||||
$html .= '<h2 class="text-xl font-bold mt-6 mb-2 text-gray-900 dark:text-gray-100 border-b pb-1">'
|
||||
. e(substr($line, 3)) . '</h2>';
|
||||
} elseif (str_starts_with($line, '### ')) {
|
||||
$html .= '<h3 class="text-base font-semibold mt-4 mb-1 text-indigo-700 dark:text-indigo-400">'
|
||||
. e(substr($line, 4)) . '</h3>';
|
||||
} elseif (str_starts_with($line, '# ')) {
|
||||
$html .= '<h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">'
|
||||
. e(substr($line, 2)) . '</h1>';
|
||||
} elseif (str_starts_with($line, '- ')) {
|
||||
$html .= '<li class="ml-4 text-sm text-gray-700 dark:text-gray-300 list-disc">'
|
||||
. e(substr($line, 2)) . '</li>';
|
||||
} elseif (trim($line) === '---') {
|
||||
$html .= '<hr class="my-4 border-gray-200 dark:border-gray-700">';
|
||||
} elseif (trim($line) !== '') {
|
||||
$html .= '<p class="text-sm text-gray-600 dark:text-gray-400 my-1">'
|
||||
. e($line) . '</p>';
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
{!! $html !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
@@ -0,0 +1,77 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
Handbuch
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-8 space-y-8">
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">Erste Schritte</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
|
||||
Network-MGMT ist eine webbasierte Verwaltungsplattform für Netzwerk-Ressourcen
|
||||
mit rollenbasierter Zugriffskontrolle.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">Rollen & Rechte</h2>
|
||||
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left font-medium text-gray-600 dark:text-gray-300">Rolle</th>
|
||||
<th class="px-4 py-2 text-left font-medium text-gray-600 dark:text-gray-300">Beschreibung</th>
|
||||
<th class="px-4 py-2 text-left font-medium text-gray-600 dark:text-gray-300">Berechtigungen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<tr>
|
||||
<td class="px-4 py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded-full text-xs">admin</span></td>
|
||||
<td class="px-4 py-2 text-gray-700 dark:text-gray-300">Administrator</td>
|
||||
<td class="px-4 py-2 text-gray-600 dark:text-gray-400">Vollzugriff auf alle Funktionen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs">manager</span></td>
|
||||
<td class="px-4 py-2 text-gray-700 dark:text-gray-300">Manager</td>
|
||||
<td class="px-4 py-2 text-gray-600 dark:text-gray-400">Netzwerk lesen, anlegen, bearbeiten; Benutzer lesen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2"><span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full text-xs">user</span></td>
|
||||
<td class="px-4 py-2 text-gray-700 dark:text-gray-300">Benutzer</td>
|
||||
<td class="px-4 py-2 text-gray-600 dark:text-gray-400">Netzwerk lesen</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">Benutzerverwaltung</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
|
||||
Unter <strong>Einstellungen → Benutzerverwaltung</strong> können Administratoren
|
||||
neue Benutzer anlegen, bestehende bearbeiten und Rollen zuweisen.
|
||||
Der eigene Account kann nicht gelöscht werden.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">Layout-Einstellungen</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
|
||||
Unter <strong>Einstellungen → Layout</strong> kann der Seitenname, das Logo,
|
||||
die Button-Farbe sowie der Dark/Light-Mode konfiguriert werden.
|
||||
Änderungen werden sofort für alle Benutzer wirksam.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="pt-4 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-400 dark:text-gray-500">
|
||||
Network-MGMT · Version {{ config('app.version', '0.4.0') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user