feat: 初始化云升数码展示页面项目 - Vue 3 + PocketBase 全栈架构
This commit is contained in:
@@ -0,0 +1,554 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light theme colors */
|
||||
--color-primary-50: 239 246 255;
|
||||
--color-primary-100: 219 234 254;
|
||||
--color-primary-200: 191 219 254;
|
||||
--color-primary-300: 147 197 253;
|
||||
--color-primary-400: 96 165 250;
|
||||
--color-primary-500: 59 130 246;
|
||||
--color-primary-600: 37 99 235;
|
||||
--color-primary-700: 29 78 216;
|
||||
--color-primary-800: 30 64 175;
|
||||
--color-primary-900: 30 58 138;
|
||||
|
||||
--color-surface: 255 255 255;
|
||||
--color-surface-hover: 248 250 252;
|
||||
--color-surface-border: 226 232 240;
|
||||
|
||||
--color-text-primary: 15 23 42;
|
||||
--color-text-secondary: 71 85 105;
|
||||
--color-text-muted: 148 163 184;
|
||||
--color-text-inverse: 255 255 255;
|
||||
|
||||
--color-accent-500: 14 165 233;
|
||||
--color-accent-600: 2 132 199;
|
||||
|
||||
--color-success: 34 197 94;
|
||||
--color-warning: 234 179 8;
|
||||
--color-error: 239 68 68;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-primary-50: 30 58 138;
|
||||
--color-primary-100: 30 64 175;
|
||||
--color-primary-200: 29 78 216;
|
||||
--color-primary-300: 37 99 235;
|
||||
--color-primary-400: 59 130 246;
|
||||
--color-primary-500: 96 165 250;
|
||||
--color-primary-600: 147 197 253;
|
||||
--color-primary-700: 191 219 254;
|
||||
--color-primary-800: 219 234 254;
|
||||
--color-primary-900: 239 246 255;
|
||||
|
||||
--color-surface: 15 23 42;
|
||||
--color-surface-hover: 30 41 59;
|
||||
--color-surface-border: 51 65 85;
|
||||
|
||||
--color-text-primary: 248 250 252;
|
||||
--color-text-secondary: 203 213 225;
|
||||
--color-text-muted: 148 163 184;
|
||||
--color-text-inverse: 15 23 42;
|
||||
|
||||
--color-accent-500: 56 189 248;
|
||||
--color-accent-600: 14 165 233;
|
||||
|
||||
--color-success: 74 222 128;
|
||||
--color-warning: 250 204 21;
|
||||
--color-error: 248 113 113;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-surface-border;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-surface text-text-primary antialiased;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-primary-500/30 text-text-primary;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-text-muted/30 rounded-full hover:bg-text-muted/50 transition-colors;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
/* Focus visible */
|
||||
:focus-visible {
|
||||
@apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-surface;
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Buttons */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm hover:shadow-md;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply btn bg-surface-hover text-text-primary border border-surface-border hover:bg-surface-border active:bg-surface-border/50;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply btn bg-transparent text-text-secondary hover:bg-surface-hover hover:text-text-primary active:bg-surface-border;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply btn bg-error/10 text-error hover:bg-error/20 active:bg-error/30;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
@apply btn p-2.5;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply px-3 py-1.5 text-xs gap-1.5;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply px-6 py-3 text-base gap-2;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
@apply bg-surface border border-surface-border rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:border-primary-500/20;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply card hover:-translate-y-1;
|
||||
}
|
||||
|
||||
.card-interactive {
|
||||
@apply card-hover cursor-pointer;
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.input {
|
||||
@apply w-full px-4 py-2.5 rounded-xl bg-surface border border-surface-border text-text-primary placeholder:text-text-muted transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
@apply border-error focus:border-error focus:ring-error/20;
|
||||
}
|
||||
|
||||
.label {
|
||||
@apply block text-sm font-medium text-text-secondary mb-1.5;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
@apply input min-h-[120px] resize-y;
|
||||
}
|
||||
|
||||
.select {
|
||||
@apply input appearance-none bg-no-repeat bg-right pr-10;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-position: right 0.75rem center;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply badge bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@apply badge bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@apply badge bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
@apply badge bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300;
|
||||
}
|
||||
|
||||
.badge-neutral {
|
||||
@apply badge bg-surface-border text-text-secondary;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
.section {
|
||||
@apply py-16 sm:py-24 lg:py-32;
|
||||
}
|
||||
|
||||
.section-sm {
|
||||
@apply py-10 sm:py-16;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.heading-1 {
|
||||
@apply text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-text-primary;
|
||||
}
|
||||
|
||||
.heading-2 {
|
||||
@apply text-3xl sm:text-4xl font-bold tracking-tight text-text-primary;
|
||||
}
|
||||
|
||||
.heading-3 {
|
||||
@apply text-2xl sm:text-3xl font-semibold tracking-tight text-text-primary;
|
||||
}
|
||||
|
||||
.heading-4 {
|
||||
@apply text-xl sm:text-2xl font-semibold tracking-tight text-text-primary;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
@apply text-base text-text-secondary leading-relaxed;
|
||||
}
|
||||
|
||||
.text-body-lg {
|
||||
@apply text-lg text-text-secondary leading-relaxed;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
@apply text-sm text-text-muted;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
@apply text-xs text-text-muted;
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply text-primary-600 hover:text-primary-700 underline-offset-2 hover:underline transition-colors;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.4s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-down {
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Stagger animations */
|
||||
.stagger-1 { animation-delay: 50ms; }
|
||||
.stagger-2 { animation-delay: 100ms; }
|
||||
.stagger-3 { animation-delay: 150ms; }
|
||||
.stagger-4 { animation-delay: 200ms; }
|
||||
.stagger-5 { animation-delay: 250ms; }
|
||||
.stagger-6 { animation-delay: 300ms; }
|
||||
|
||||
/* Glass morphism */
|
||||
.glass {
|
||||
@apply bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl border border-white/20 dark:border-slate-700/50;
|
||||
}
|
||||
|
||||
.glass-strong {
|
||||
@apply bg-white/80 dark:bg-slate-900/80 backdrop-blur-2xl border border-white/30 dark:border-slate-700/50;
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
@apply bg-gradient-to-r from-primary-600 via-primary-500 to-accent-500 bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
@apply h-px bg-surface-border border-none my-6;
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
@apply w-px h-full bg-surface-border border-none mx-6;
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.tooltip {
|
||||
@apply relative inline-block;
|
||||
}
|
||||
|
||||
.tooltip::before {
|
||||
@apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-slate-900 rounded opacity-0 invisible transition-all duration-200 whitespace-nowrap;
|
||||
content: attr(data-tooltip);
|
||||
}
|
||||
|
||||
.tooltip:hover::before {
|
||||
@apply opacity-100 visible translate-y-0;
|
||||
}
|
||||
|
||||
/* Loading skeleton */
|
||||
.skeleton {
|
||||
@apply animate-pulse bg-surface-border rounded;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
@apply skeleton h-4 w-full;
|
||||
}
|
||||
|
||||
.skeleton-title {
|
||||
@apply skeleton h-6 w-3/4;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
@apply skeleton rounded-full;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
@apply skeleton rounded-2xl;
|
||||
}
|
||||
|
||||
/* Article content */
|
||||
.prose {
|
||||
@apply text-text-secondary leading-relaxed;
|
||||
}
|
||||
|
||||
.prose h1 { @apply text-3xl font-bold text-text-primary mt-10 mb-4 pb-2 border-b border-surface-border; }
|
||||
.prose h2 { @apply text-2xl font-bold text-text-primary mt-10 mb-4; }
|
||||
.prose h3 { @apply text-xl font-semibold text-text-primary mt-8 mb-3; }
|
||||
.prose h4 { @apply text-lg font-semibold text-text-primary mt-6 mb-2; }
|
||||
.prose p { @apply mb-6 leading-relaxed; }
|
||||
.prose a { @apply text-primary-600 hover:text-primary-700 underline-offset-2 hover:underline; }
|
||||
.prose strong { @apply font-semibold text-text-primary; }
|
||||
.prose em { @apply italic; }
|
||||
.prose code { @apply px-1.5 py-0.5 bg-surface-border rounded text-sm font-mono text-primary-600; }
|
||||
.prose pre { @apply bg-slate-900 rounded-xl p-4 overflow-x-auto my-6; }
|
||||
.prose pre code { @apply bg-transparent p-0 text-slate-100; }
|
||||
.prose ul { @apply list-disc list-inside mb-6 space-y-2; }
|
||||
.prose ol { @apply list-decimal list-inside mb-6 space-y-2; }
|
||||
.prose li { @apply leading-relaxed; }
|
||||
.prose blockquote { @apply border-l-4 border-primary-500 pl-4 italic text-text-muted my-6; }
|
||||
.prose img { @apply rounded-xl my-6 max-w-full h-auto; }
|
||||
.prose video { @apply rounded-xl my-6 max-w-full; }
|
||||
.prose audio { @apply w-full my-4; }
|
||||
.prose table { @apply w-full border-collapse my-6; }
|
||||
.prose th, .prose td { @apply px-4 py-2 border border-surface-border text-left; }
|
||||
.prose th { @apply bg-surface-hover font-semibold; }
|
||||
.prose hr { @apply my-8 border-surface-border; }
|
||||
.prose kbd { @apply px-2 py-1 bg-surface-border rounded text-sm font-mono; }
|
||||
|
||||
/* Music player */
|
||||
.music-player {
|
||||
@apply fixed bottom-4 right-4 z-50 glass-strong rounded-2xl shadow-xl border border-white/20 dark:border-slate-700/50 transition-all duration-300;
|
||||
}
|
||||
|
||||
.music-player.minimized {
|
||||
@apply bottom-4 right-4 w-16 h-16 p-0;
|
||||
}
|
||||
|
||||
/* Admin layout */
|
||||
.admin-sidebar {
|
||||
@apply fixed inset-y-0 left-0 z-40 w-64 bg-surface border-r border-surface-border transform transition-transform duration-300 lg:translate-x-0 -translate-x-full;
|
||||
}
|
||||
|
||||
.admin-sidebar.open {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
@apply fixed top-0 left-0 right-0 z-30 h-16 bg-surface/80 backdrop-blur-xl border-b border-surface-border lg:left-64;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
@apply pt-16 lg:pl-64 min-h-screen transition-all duration-300;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.table-container {
|
||||
@apply overflow-x-auto rounded-xl border border-surface-border;
|
||||
}
|
||||
|
||||
.table {
|
||||
@apply w-full text-sm;
|
||||
}
|
||||
|
||||
.table th {
|
||||
@apply px-4 py-3 text-left font-semibold text-text-secondary bg-surface-hover border-b border-surface-border;
|
||||
}
|
||||
|
||||
.table td {
|
||||
@apply px-4 py-3 border-b border-surface-border/50;
|
||||
}
|
||||
|
||||
.table tr:last-child td {
|
||||
@apply border-b-0;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
@apply transition-colors hover:bg-surface-hover;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.dropdown {
|
||||
@apply absolute right-0 top-full mt-2 w-48 bg-surface border border-surface-border rounded-xl shadow-lg py-1 opacity-0 invisible transform translate-y-2 transition-all duration-200 z-50;
|
||||
}
|
||||
|
||||
.dropdown.open {
|
||||
@apply opacity-100 visible translate-y-0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@apply flex items-center gap-2 px-4 py-2 text-sm text-text-secondary hover:bg-surface-hover hover:text-text-primary transition-colors;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
@apply h-px bg-surface-border my-1;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
@apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@apply bg-surface rounded-2xl shadow-xl max-h-[90vh] overflow-hidden w-full max-w-2xl transform transition-all;
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
@apply max-w-4xl;
|
||||
}
|
||||
|
||||
.modal-xl {
|
||||
@apply max-w-6xl;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
@apply fixed bottom-4 right-4 z-50 flex items-center gap-3 px-4 py-3 bg-surface border border-surface-border rounded-xl shadow-xl transform transition-all duration-300;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
@apply border-green-500/50 bg-green-500/10;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
@apply border-red-500/50 bg-red-500/10;
|
||||
}
|
||||
|
||||
.toast.warning {
|
||||
@apply border-yellow-500/50 bg-yellow-500/10;
|
||||
}
|
||||
|
||||
.toast.info {
|
||||
@apply border-primary-500/50 bg-primary-500/10;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.text-pretty {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gradient-border {
|
||||
@apply relative;
|
||||
background: linear-gradient(to right, var(--color-surface), var(--color-surface)) padding-box,
|
||||
linear-gradient(to right, rgb(var(--color-primary-500)), rgb(var(--color-accent-500))) border-box;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
.shimmer {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(var(--color-surface-border)) 25%,
|
||||
rgb(var(--color-surface-hover)) 50%,
|
||||
rgb(var(--color-surface-border)) 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
.dark .shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(var(--color-surface-border)) 25%,
|
||||
rgb(var(--color-surface-hover)) 50%,
|
||||
rgb(var(--color-surface-border)) 75%
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user