Add Vite React frontend prototype

2026-04-23 12:02:53 +08:00
commit 4cb403c956
11 changed files with 4961 additions and 0 deletions
@@ -0,0 +1,3 @@
 frontend/node_modules/
 frontend/dist/
 .DS_Store
@@ -0,0 +1,12 @@
 <!doctype html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>音流工坊</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
@@ -0,0 +1,23 @@
 {
  "name": "music-workshop-frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "lucide-react": "^0.525.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "vite": "^5.4.10"
  }
 }
@@ -0,0 +1,6 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
 };
@@ -0,0 +1,79 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 html,
 body,
 #root {
  height: 100%;
 }
 body {
  margin: 0;
  background: rgb(2 6 23);
  color: rgb(203 213 225);
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
 }
 * {
  box-sizing: border-box;
 }
 button,
 input,
 select,
 textarea {
  font: inherit;
 }
@layer utilities {
  .animate-in {
    animation-duration: 180ms;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
  }
  .fade-in {
    animation-name: fade-in;
  }
  .slide-in-from-bottom-4 {
    animation-name: slide-in-from-bottom;
  }
  .slide-in-from-right-4 {
    animation-name: slide-in-from-right;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes slide-in-from-bottom {
    from {
      transform: translateY(1rem);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes slide-in-from-right {
    from {
      transform: translateX(1rem);
    }
    to {
      transform: translateX(0);
    }
  }
 }
@@ -0,0 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
 ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
 );
@@ -0,0 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
 };
@@ -0,0 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 export default defineConfig({
  plugins: [react()]
 });