fdb2 1.0.7 → 1.0.9

package/src/platform/database/layout.vue

@@ -1,367 +1,367 @@
-<template>
-  <div class="database-layout">
-    <!-- 主要内容区域 -->
-    <main class="main-content-modern">
-      <div class="content-wrapper">
-        <router-view />
-      </div>
-    </main>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// 空的script标签用于保持组件结构
-</script>
-
-<style scoped>
-/* 主布局样式 */
-.database-layout {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-}
-
-/* 现代导航栏样式 */
-.navbar-modern {
-  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-  border-bottom: 1px solid #e2e8f0;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  padding: 0.75rem 0;
-  position: sticky;
-  top: 0;
-  z-index: 1030;
-  backdrop-filter: blur(10px);
-}
-
-/* 品牌区域 */
-.navbar-brand-wrapper {
-  margin-right: 2rem;
-}
-
-.navbar-brand-modern {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  text-decoration: none;
-  color: #1e293b;
-  transition: all 0.3s ease;
-}
-
-.navbar-brand-modern:hover {
-  color: #667eea;
-  transform: translateX(2px);
-}
-
-.brand-icon {
-  width: 45px;
-  height: 45px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 1.5rem;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-  transition: all 0.3s ease;
-}
-
-.brand-icon:hover {
-  transform: rotate(5deg) scale(1.05);
-  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
-}
-
-.brand-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.brand-name {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #1e293b;
-  letter-spacing: -0.025em;
-}
-
-.brand-subtitle {
-  font-size: 0.75rem;
-  color: #64748b;
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-/* 移动端切换按钮 */
-.navbar-toggler-modern {
-  background: none;
-  border: none;
-  padding: 0.5rem;
-  cursor: pointer;
-  display: none;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.navbar-toggler-line {
-  width: 25px;
-  height: 3px;
-  background: linear-gradient(90deg, #667eea, #764ba2);
-  border-radius: 2px;
-  transition: all 0.3s ease;
-}
-
-/* 导航折叠区域 */
-.navbar-collapse-modern {
-  background: transparent;
-}
-
-/* 主导航样式 */
-.navbar-nav-modern {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.nav-item-modern {
-  position: relative;
-}
-
-.nav-link-modern {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1.25rem;
-  border-radius: 12px;
-  color: #64748b;
-  text-decoration: none;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.nav-link-modern:hover {
-  background: rgba(102, 126, 234, 0.1);
-  color: #667eea;
-  transform: translateY(-1px);
-}
-
-.nav-link-modern.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-.nav-icon {
-  font-size: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-}
-
-.nav-text {
-  font-size: 0.95rem;
-  font-weight: 600;
-  letter-spacing: 0.025em;
-}
-
-.nav-indicator {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 4px;
-  height: 4px;
-  background: white;
-  border-radius: 50%;
-  opacity: 0;
-  transition: all 0.3s ease;
-}
-
-.nav-link-modern.active .nav-indicator {
-  opacity: 1;
-}
-
-/* 用户菜单样式 */
-.nav-icon-only {
-  padding: 0.75rem;
-  min-width: auto;
-}
-
-.notification-dot {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 8px;
-  height: 8px;
-  background: #ef4444;
-  border-radius: 50%;
-  border: 2px solid white;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-.user-menu-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem;
-  border-radius: 12px;
-  transition: all 0.3s ease;
-}
-
-.user-menu-toggle:hover {
-  background: rgba(102, 126, 234, 0.1);
-}
-
-.user-avatar {
-  width: 40px;
-  height: 40px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 1.25rem;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.user-name {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.user-role {
-  font-size: 0.75rem;
-  color: #64748b;
-  font-weight: 500;
-}
-
-.dropdown-arrow {
-  color: #94a3b8;
-  font-size: 0.75rem;
-  transition: all 0.3s ease;
-}
-
-.user-menu-toggle:hover .dropdown-arrow {
-  color: #667eea;
-  transform: translateY(1px);
-}
-
-/* 现代下拉菜单样式 */
-.dropdown-menu-modern {
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 16px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
-  padding: 0.75rem;
-  min-width: 280px;
-  backdrop-filter: blur(10px);
-  margin-top: 0.75rem;
-}
-
-.dropdown-header {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: #94a3b8;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid #f1f5f9;
-  margin-bottom: 0.5rem;
-}
-
-.dropdown-item-modern {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  border-radius: 8px;
-  color: #374151;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  margin-bottom: 2px;
-}
-
-.dropdown-item-modern:hover {
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  color: #667eea;
-  transform: translateX(4px);
-}
-
-.dropdown-item-modern.text-danger:hover {
-  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
-  color: #dc2626;
-}
-
-.dropdown-item-content {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.dropdown-item-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: inherit;
-}
-
-.dropdown-item-desc {
-  font-size: 0.75rem;
-  color: #94a3b8;
-}
-
-.dropdown-divider-modern {
-  margin: 0.75rem -0.75rem;
-  border: none;
-  border-top: 1px solid #f1f5f9;
-}
-
-/* 主要内容区域 */
-.main-content-modern {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: transparent;
-  overflow: hidden;
-}
-
-.content-wrapper {
-  flex: 1;
-  background: rgba(255, 255, 255, 0.3);
-  backdrop-filter: blur(8px);
-  overflow-y: auto;
-  height: 100%;
-}
-
-
-
-/* 动画效果 */
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.6; transform: scale(1.2); }
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .content-wrapper {
-    padding: 0.5rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .content-wrapper {
-    padding: 0.25rem;
-  }
-}
+<template>
+  <div class="database-layout">
+    <!-- 主要内容区域 -->
+    <main class="main-content-modern">
+      <div class="content-wrapper">
+        <router-view />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 空的script标签用于保持组件结构
+</script>
+
+<style scoped>
+/* 主布局样式 */
+.database-layout {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+/* 现代导航栏样式 */
+.navbar-modern {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  border-bottom: 1px solid #e2e8f0;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  padding: 0.75rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 1030;
+  backdrop-filter: blur(10px);
+}
+
+/* 品牌区域 */
+.navbar-brand-wrapper {
+  margin-right: 2rem;
+}
+
+.navbar-brand-modern {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  text-decoration: none;
+  color: #1e293b;
+  transition: all 0.3s ease;
+}
+
+.navbar-brand-modern:hover {
+  color: #667eea;
+  transform: translateX(2px);
+}
+
+.brand-icon {
+  width: 45px;
+  height: 45px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  transition: all 0.3s ease;
+}
+
+.brand-icon:hover {
+  transform: rotate(5deg) scale(1.05);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+}
+
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.brand-name {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1e293b;
+  letter-spacing: -0.025em;
+}
+
+.brand-subtitle {
+  font-size: 0.75rem;
+  color: #64748b;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+/* 移动端切换按钮 */
+.navbar-toggler-modern {
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.navbar-toggler-line {
+  width: 25px;
+  height: 3px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+/* 导航折叠区域 */
+.navbar-collapse-modern {
+  background: transparent;
+}
+
+/* 主导航样式 */
+.navbar-nav-modern {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.nav-item-modern {
+  position: relative;
+}
+
+.nav-link-modern {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.25rem;
+  border-radius: 12px;
+  color: #64748b;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-link-modern:hover {
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  transform: translateY(-1px);
+}
+
+.nav-link-modern.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.nav-icon {
+  font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+}
+
+.nav-text {
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+}
+
+.nav-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  background: white;
+  border-radius: 50%;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.nav-link-modern.active .nav-indicator {
+  opacity: 1;
+}
+
+/* 用户菜单样式 */
+.nav-icon-only {
+  padding: 0.75rem;
+  min-width: auto;
+}
+
+.notification-dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 8px;
+  height: 8px;
+  background: #ef4444;
+  border-radius: 50%;
+  border: 2px solid white;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.user-menu-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+
+.user-menu-toggle:hover {
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.25rem;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.user-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.user-role {
+  font-size: 0.75rem;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.dropdown-arrow {
+  color: #94a3b8;
+  font-size: 0.75rem;
+  transition: all 0.3s ease;
+}
+
+.user-menu-toggle:hover .dropdown-arrow {
+  color: #667eea;
+  transform: translateY(1px);
+}
+
+/* 现代下拉菜单样式 */
+.dropdown-menu-modern {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
+  padding: 0.75rem;
+  min-width: 280px;
+  backdrop-filter: blur(10px);
+  margin-top: 0.75rem;
+}
+
+.dropdown-header {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid #f1f5f9;
+  margin-bottom: 0.5rem;
+}
+
+.dropdown-item-modern {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 8px;
+  color: #374151;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  margin-bottom: 2px;
+}
+
+.dropdown-item-modern:hover {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  color: #667eea;
+  transform: translateX(4px);
+}
+
+.dropdown-item-modern.text-danger:hover {
+  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+  color: #dc2626;
+}
+
+.dropdown-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dropdown-item-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+.dropdown-item-desc {
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+
+.dropdown-divider-modern {
+  margin: 0.75rem -0.75rem;
+  border: none;
+  border-top: 1px solid #f1f5f9;
+}
+
+/* 主要内容区域 */
+.main-content-modern {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+  overflow: hidden;
+}
+
+.content-wrapper {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(8px);
+  overflow-y: auto;
+  height: 100%;
+}
+
+
+
+/* 动画效果 */
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.2); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .content-wrapper {
+    padding: 0.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .content-wrapper {
+    padding: 0.25rem;
+  }
+}
 </style>