| <!DOCTYPE html>
|
| <html lang="zh">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>API密钥管理系统</title>
|
|
|
| <script src="https://cdn.tailwindcss.com"></script>
|
|
|
| <script>
|
| tailwind.config = {
|
| theme: {
|
| extend: {
|
| colors: {
|
| primary: {
|
| 50: '#f0f9ff',
|
| 100: '#e0f2fe',
|
| 200: '#bae6fd',
|
| 300: '#7dd3fc',
|
| 400: '#38bdf8',
|
| 500: '#0ea5e9',
|
| 600: '#0284c7',
|
| 700: '#0369a1',
|
| 800: '#075985',
|
| 900: '#0c4a6e',
|
| 950: '#082f49',
|
| },
|
| },
|
| animation: {
|
| 'fade-in': 'fadeIn 0.3s ease-in-out',
|
| 'fade-out': 'fadeOut 0.3s ease-in-out',
|
| 'slide-down': 'slideDown 0.3s ease-in-out',
|
| 'slide-up': 'slideUp 0.3s ease-in-out',
|
| 'expand': 'expand 0.3s ease-in-out',
|
| 'collapse': 'collapse 0.3s ease-in-out',
|
| },
|
| keyframes: {
|
| fadeIn: {
|
| '0%': { opacity: '0' },
|
| '100%': { opacity: '1' },
|
| },
|
| fadeOut: {
|
| '0%': { opacity: '1' },
|
| '100%': { opacity: '0' },
|
| },
|
| slideDown: {
|
| '0%': { maxHeight: '0', opacity: '0', transform: 'translateY(-10px)' },
|
| '100%': { maxHeight: '1000px', opacity: '1', transform: 'translateY(0)' }
|
| },
|
| slideUp: {
|
| '0%': { maxHeight: '1000px', opacity: '1', transform: 'translateY(0)' },
|
| '100%': { maxHeight: '0', opacity: '0', transform: 'translateY(-10px)' }
|
| },
|
| expand: {
|
| '0%': { transform: 'scaleY(0)', transformOrigin: 'top', opacity: '0' },
|
| '100%': { transform: 'scaleY(1)', transformOrigin: 'top', opacity: '1' }
|
| },
|
| collapse: {
|
| '0%': { transform: 'scaleY(1)', transformOrigin: 'top', opacity: '1' },
|
| '100%': { transform: 'scaleY(0)', transformOrigin: 'top', opacity: '0' }
|
| },
|
| },
|
| },
|
| },
|
| }
|
| </script>
|
|
|
| <script defer src="https://unpkg.com/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
|
| {% block head %}{% endblock %}
|
| </head>
|
| <body class="bg-gray-50 text-gray-900 min-h-screen" x-data="apiKeyManager()">
|
|
|
|
|
| <header class="bg-white shadow">
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
|
| <div class="grid grid-cols-3 items-center">
|
|
|
| <div class="flex items-center justify-start">
|
| <h1 class="text-2xl font-bold text-primary-700">
|
| API密钥管理系统
|
| </h1>
|
| </div>
|
|
|
|
|
| <div class="flex justify-center">
|
| {% block header_tabs %}{% endblock %}
|
| </div>
|
|
|
|
|
| <div class="flex items-center justify-end">
|
| <a href="{{ url_for('web.logout') }}" class="flex items-center px-3 py-2 text-sm font-medium text-primary-700 hover:text-primary-900 hover:bg-primary-50 rounded-md transition-colors">
|
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
| </svg>
|
| 退出登录
|
| </a>
|
| </div>
|
| </div>
|
| </div>
|
| </header>
|
|
|
|
|
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
| {% block content %}{% endblock %}
|
| </main>
|
|
|
|
|
| <div id="backToTop" class="back-to-top" title="回到顶部">
|
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
|
| </svg>
|
| </div>
|
|
|
|
|
| <div x-data="notificationSystem()"
|
| x-init="init()"
|
| @show-notification.window="add($event.detail.message, $event.detail.type)"
|
| class="fixed bottom-4 right-4 z-50 space-y-4"
|
| x-cloak>
|
| <template x-for="notification in notifications" :key="notification.id">
|
| <div x-show="notification.visible"
|
| x-transition:enter="transition ease-out duration-300"
|
| x-transition:enter-start="transform translate-y-2 opacity-0"
|
| x-transition:enter-end="transform translate-y-0 opacity-100"
|
| x-transition:leave="transition ease-in duration-200"
|
| x-transition:leave-start="transform translate-y-0 opacity-100"
|
| x-transition:leave-end="transform translate-y-2 opacity-0"
|
| :class="{
|
| 'bg-green-50 text-green-800 border-green-400': notification.type === 'success',
|
| 'bg-red-50 text-red-800 border-red-400': notification.type === 'error',
|
| 'bg-blue-50 text-blue-800 border-blue-400': notification.type === 'info'
|
| }"
|
| class="p-4 border-l-4 shadow-md rounded-r-lg flex justify-between items-center min-w-[300px]">
|
| <div x-text="notification.message"></div>
|
| <button @click="remove(notification.id)" class="ml-4 text-gray-500 hover:text-gray-700">
|
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
| <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
| </svg>
|
| </button>
|
| </div>
|
| </template>
|
| </div>
|
|
|
|
|
| <script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
| {% block scripts %}{% endblock %}
|
|
|
| <script>
|
|
|
| function notificationSystem() {
|
| return {
|
| notifications: [],
|
| nextId: 1,
|
| init() {
|
|
|
| },
|
| add(message, type = 'info') {
|
| const id = this.nextId++;
|
| const notification = {
|
| id,
|
| message,
|
| type,
|
| visible: true
|
| };
|
| this.notifications.push(notification);
|
|
|
|
|
| setTimeout(() => {
|
| this.remove(id);
|
| }, 3000);
|
| },
|
| remove(id) {
|
| const index = this.notifications.findIndex(n => n.id === id);
|
| if (index !== -1) {
|
|
|
| this.notifications[index].visible = false;
|
|
|
|
|
| setTimeout(() => {
|
| this.notifications = this.notifications.filter(n => n.id !== id);
|
| }, 300);
|
| }
|
| }
|
| };
|
| }
|
| </script>
|
| </body>
|
| </html>
|
|
|
