Muyue
610d4bb686
Replace gradient backgrounds and solid colors with:
- Dark gradient backgrounds (#0f0c29, #302b63, #24243e)
- Semi-transparent glass cards with backdrop-filter blur
- Subtle white borders at 15-20% opacity
- Soft shadows for depth
- White text with appropriate opacity levels
- Consistent accent colors (blue/purple)
Components updated:
- CollaborativeInput: Main form with glass effect
- CollaborativeSession: Session header and panels
- DocumentViewer: Content display with dark theme
- NetworkStatus: Status indicator with glass
- App: Root background with gradient
Design features:
- Consistent spacing and border radius (12-20px)
- Smooth transitions on hover
- Accessible text contrast
- Professional, modern appearance
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useCollaborationStore } from './stores/collaboration'
|
|
import CollaborativeInput from './components/CollaborativeInput.vue'
|
|
import CollaborativeSession from './components/CollaborativeSession.vue'
|
|
import NetworkStatus from './components/NetworkStatus.vue'
|
|
|
|
const collaborationStore = useCollaborationStore()
|
|
|
|
const showSession = ref(false)
|
|
const currentSessionId = ref(null)
|
|
|
|
function handleCollaborationCreated(session) {
|
|
currentSessionId.value = session.sessionId
|
|
showSession.value = true
|
|
}
|
|
|
|
function startNewCollaboration() {
|
|
collaborationStore.clearCurrentSession()
|
|
showSession.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app">
|
|
<NetworkStatus />
|
|
|
|
<!-- Input Mode -->
|
|
<div v-if="!showSession">
|
|
<CollaborativeInput @session-created="handleCollaborationCreated" />
|
|
</div>
|
|
|
|
<!-- Session Mode -->
|
|
<div v-else>
|
|
<button @click="startNewCollaboration" class="new-session-btn">
|
|
New Session
|
|
</button>
|
|
|
|
<CollaborativeSession
|
|
v-if="currentSessionId"
|
|
:session-id="currentSessionId"
|
|
@session-completed="startNewCollaboration"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background-color: #f5f7fa;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
#app {
|
|
min-height: 100vh;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.app {
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
|
}
|
|
|
|
.new-session-btn {
|
|
position: fixed;
|
|
top: 2rem;
|
|
right: 2rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: rgba(102, 126, 234, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 50;
|
|
}
|
|
|
|
.new-session-btn:hover {
|
|
background: rgba(102, 126, 234, 0.95);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
</style>
|