完成世界书、骰子、apiconfig页面处理

2026-04-30 01:35:10 +08:00
parent a3e3711b2b
commit ba9b925c32
4602 changed files with 785225 additions and 23 deletions
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,115 @@
+/* Import global styles */
+@import './styles/variables.css';
+@import './styles/reset.css';
+
+/* ==================== Main Layout ==================== */
+.app {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  overflow: hidden;
+}
+
+.main-container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  min-width: 0;
+  gap: 0; /* Panels have their own borders */
+  padding: 0;
+  margin-top: 0; /* Ensure panels start from top */
+}
+
+/* Smooth transitions for theme changes */
+.app,
+.app * {
+  transition: background-color var(--transition-normal), 
+              color var(--transition-normal),
+              border-color var(--transition-normal),
+              box-shadow var(--transition-normal);
+}
+
+/* ==================== Panel Layout - 1:2:1 Ratio ==================== */
+.sidebar-left {
+  flex: 0 0 25%;  /* 左侧 25% */
+  min-width: 0;
+  max-width: none;
+  background-color: var(--color-bg-secondary);
+  border-right: 1px solid var(--color-border);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-xs);
+  transition: box-shadow var(--transition-normal);
+}
+
+.chat-area {
+  flex: 0 0 50%;  /* 中间 50% */
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg-primary);
+  overflow: hidden;
+  position: relative;
+}
+
+/* Subtle gradient background for visual interest */
+.chat-area::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 30%, rgba(109, 140, 255, 0.04) 0%, transparent 50%),
+    radial-gradient(circle at 80% 70%, rgba(109, 140, 255, 0.03) 0%, transparent 50%),
+    linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-subtle) 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.chat-area > * {
+  position: relative;
+  z-index: 1;
+}
+
+.sidebar-right {
+  flex: 0 0 25%;  /* 右侧 25% */
+  min-width: 0;
+  max-width: none;
+  background-color: var(--color-bg-secondary);
+  border-left: 1px solid var(--color-border);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-xs);
+  transition: box-shadow var(--transition-normal);
+}
+
+/* Custom scrollbar for webkit browsers */
+.sidebar-left::-webkit-scrollbar,
+.sidebar-right::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-left::-webkit-scrollbar-track,
+.sidebar-right::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-left::-webkit-scrollbar-thumb,
+.sidebar-right::-webkit-scrollbar-thumb {
+  background-color: var(--color-scrollbar);
+  border-radius: var(--radius-full);
+}
+
+.sidebar-left::-webkit-scrollbar-thumb:hover,
+.sidebar-right::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-scrollbar-hover);
+}