CaiWuXiTong/resources/views/system_settings/databases/index.blade.php

<x-layouts.admin>
    <x-slot name="title">数据库管理</x-slot>

    <x-slot name="content">
        <div class="my-6">
            @include('system_settings.partials.navigation')

            @if ($errors->any())
                <div class="mb-5 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
                    @foreach ($errors->all() as $error)<p>{{ $error }}</p>@endforeach
                </div>
            @endif

            <section aria-labelledby="system-database-heading">
                <div class="mb-3">
                    <h2 id="system-database-heading" class="font-semibold text-gray-900">系统数据库</h2>
                    <p class="mt-1 text-xs leading-5 text-gray-600">
                        @if ($systemDatabase['mode'] === 'bootstrap')
                            当前仅用于首次登录。连接团队共享系统数据库后，用户、权限、设置和云数据库配置才会统一。
                        @else
                            当前已使用团队共享系统数据库，系统用户、侧边栏权限、系统设置和云数据库配置都保存在这里。
                        @endif
                    </p>
                </div>

                <div class="overflow-x-auto rounded-xl border border-[#D8D2C7] bg-white">
                    <table class="min-w-full divide-y divide-[#D8D2C7] text-sm">
                        <thead class="bg-[#F7F0DE] text-left text-gray-700">
                            <tr>
                                <th class="px-5 py-3 font-semibold">名称</th>
                                <th class="px-5 py-3 font-semibold">地址</th>
                                <th class="px-5 py-3 font-semibold">数据库</th>
                                <th class="px-5 py-3 text-right font-semibold">操作</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr data-system-database="fixed">
                                <td class="px-5 py-4 font-semibold text-gray-900">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span>{{ $systemDatabase['name'] }}</span>
                                        <span @class([
                                            'inline-flex rounded-full px-2.5 py-1 text-xs font-semibold',
                                            'bg-yellow-100 text-[#935F07]' => $systemDatabase['mode'] === 'bootstrap',
                                            'bg-green-100 text-[#53793E]' => $systemDatabase['mode'] === 'shared',
                                        ])>
                                            {{ $systemDatabase['mode'] === 'bootstrap' ? '临时 · 待切换' : '共享 · 已连接' }}
                                        </span>
                                    </div>
                                    <p class="mt-1 text-xs font-normal text-gray-500">{{ strtoupper($systemDatabase['driver']) }} 系统数据库</p>
                                </td>
                                <td class="px-5 py-4 text-gray-600">{{ $systemDatabase['host'] }}{{ $systemDatabase['port'] ? ':' . $systemDatabase['port'] : '' }}</td>
                                <td class="px-5 py-4 text-gray-600">{{ $systemDatabase['database'] ?: $systemDatabase['connection'] }}</td>
                                <td class="px-5 py-4 text-right whitespace-nowrap">
                                    <a href="{{ route('system-settings.databases.system.edit') }}" class="font-semibold text-[#856632] hover:text-[#6A5129] hover:underline">
                                        {{ $systemDatabase['mode'] === 'bootstrap' ? '连接' : '重新验证' }}
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="mt-7" aria-labelledby="cloud-databases-heading">
                <div class="mb-3 flex flex-wrap items-end justify-between gap-3">
                    <div>
                        <h2 id="cloud-databases-heading" class="font-semibold text-gray-900">云数据库</h2>
                        <p class="mt-1 text-xs leading-5 text-gray-600">可以添加多个。每条密码均加密保存到上方的财务系统配置数据库。</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        @if ($systemDatabase['mode'] === 'shared')
                            <a href="{{ route('system-settings.databases.dictionary') }}" class="inline-flex h-[34px] items-center gap-2 rounded-lg border border-[#D8D2C7] bg-white px-4 text-[13px] font-medium text-[#171717] hover:border-[#856632] hover:bg-[#F7F0DE] focus:outline-none focus:ring-2 focus:ring-[#856632]/20">
                                <span class="material-icons-outlined text-lg text-[#856632]" aria-hidden="true">data_object</span>查看数据字典
                            </a>
                        @endif
                        @if ($editable)
                            <a href="{{ route('system-settings.databases.create') }}" class="inline-flex h-[34px] items-center gap-2 rounded-lg bg-[#856632] px-4 text-[13px] font-medium text-white hover:bg-[#6A5129] focus:outline-none focus:ring-2 focus:ring-[#856632]/20">
                                <span class="material-icons-outlined text-lg" aria-hidden="true">add</span>添加云数据库
                            </a>
                        @endif
                    </div>
                </div>

                <div class="overflow-x-auto rounded-xl border border-[#D8D2C7] bg-white">
                    <table class="min-w-full divide-y divide-[#D8D2C7] text-sm">
                        <thead class="bg-[#F7F0DE] text-left text-gray-700">
                            <tr>
                                <th class="px-5 py-3 font-semibold">名称</th>
                                <th class="px-5 py-3 font-semibold">地址</th>
                                <th class="px-5 py-3 font-semibold">数据库</th>
                                <th class="px-5 py-3 font-semibold">状态</th>
                                <th class="px-5 py-3 text-right font-semibold">操作</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse ($connections as $connection)
                                <tr>
                                    <td class="px-5 py-4 font-semibold text-gray-900">{{ $connection->name }}<span class="mt-1 block text-xs font-normal text-gray-600">{{ match ($connection->driver) { 'pgsql' => 'PostgreSQL · SSL', 'mysql' => 'MySQL / MariaDB · TLS', default => 'SQL Server' } }}</span></td>
                                    <td class="px-5 py-4 text-gray-600">{{ $connection->host }}:{{ $connection->port }}</td>
                                    <td class="px-5 py-4 text-gray-600">{{ $connection->database_name }}</td>
                                    <td class="px-5 py-4">
                                        <span @class([
                                            'inline-flex rounded-full px-2.5 py-1 text-xs font-semibold',
                                            'bg-green-100 text-green-700' => $connection->enabled,
                                            'bg-gray-100 text-gray-600' => ! $connection->enabled,
                                        ])>{{ $connection->enabled ? '启用' : '停用' }}</span>
                                    </td>
                                    <td class="px-5 py-4 text-right whitespace-nowrap">
                                        <form method="POST" action="{{ route('system-settings.databases.test', $connection->id) }}" class="inline">
                                            @csrf
                                            <button type="submit" class="font-semibold text-gray-600 hover:text-[#856632] hover:underline">测试</button>
                                        </form>
                                        <a href="{{ route('system-settings.databases.edit', $connection->id) }}" class="ml-4 font-semibold text-[#856632] hover:text-[#6A5129] hover:underline">修改</a>
                                        <form method="POST" action="{{ route('system-settings.databases.destroy', $connection->id) }}" class="ml-4 inline" onsubmit="return confirm('确定删除这个数据库配置吗？')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="font-semibold text-red-600 hover:underline">删除</button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-5 py-12 text-center text-gray-500">
                                        {{ $systemDatabase['mode'] === 'bootstrap'
                                            ? '连接团队共享系统数据库后，两套云数据库配置会自动显示在这里。'
                                            : '共享系统数据库中还没有云数据库配置。' }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </x-slot>
</x-layouts.admin>