更新cxm,ccr以及其他未更新的

2024-12-10 10:28:04 +08:00 · 2024-12-10 10:28:04 +08:00 · 639a0fd504
commit 639a0fd504
parent 014aec6757
88 changed files with 5226 additions and 284 deletions
--- a/rust/blog_os/.cargo/config.toml
+++ b/rust/blog_os/.cargo/config.toml
@ -0,0 +1,9 @@
 [unstable]
 build-std-features = ["compiler-builtins-mem"]
 build-std = ["core", "compiler_builtins"]
 [build]
 target = "x86_64-blog_os.json"
 [target.'cfg(target_os = "none")']
 runner = "bootimage runner"
--- a/rust/blog_os/Cargo.toml
+++ b/rust/blog_os/Cargo.toml
@ -0,0 +1,12 @@
 [package]
 name = "blog_os"
 version = "0.1.0"
 edition = "2018"
 # 使用 `cargo build` 编译时需要的配置
 [profile.dev]
 panic = "abort" # 禁用panic时栈展开
 # 使用 `cargo build --release` 编译时需要的配置
 [profile.release]
 panic = "abort" # 禁用 panic 时栈展开
--- a/rust/blog_os/src/main.rs
+++ b/rust/blog_os/src/main.rs
@ -0,0 +1,15 @@
 // src/main.rs
 #![no_std] // 不链接Rust标准库
 #![no_main] // 禁用所有Rust层级的入口点
 use core::panic::PanicInfo;
 /// 这个函数将在panic时被调用
 #[panic_handler]
 fn panic(_info: &PanicInfo) -> ! {
    loop {}
 }
 #[no_mangle] // 不重整函数名
 pub extern "C" fn _start() -> ! {
    // 因为编译器会寻找一个名为`_start`的函数，所以这个函数就是入口点
    // 默认命名为`_start`
    loop {}
 }
--- a/rust/blog_os/x86_64-blog_os.json
+++ b/rust/blog_os/x86_64-blog_os.json
@ -0,0 +1,15 @@
 {
  "llvm-target": "x86_64-unknown-none",
  "data-layout": "e-m:e-i64:64-f80:128-n8:16:32:64-S128",
  "arch": "x86_64",
  "target-endian": "little",
  "target-pointer-width": "64",
  "target-c-int-width": "32",
  "os": "none",
  "executables": true,
  "linker-flavor": "ld.lld",
  "linker": "rust-lld",
  "panic-strategy": "abort",
  "disable-redzone": true,
  "features": "-mmx,-sse,+soft-float"
 }
--- a/rust/svg/src/App.css
+++ b/rust/svg/src/App.css
@ -210,8 +210,8 @@
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  stroke-dasharray: var(--path-length) var(--path-length);
  animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  stroke-linecap: round;
--- a/rust/svg/src/App.tsx
+++ b/rust/svg/src/App.tsx
@ -56,7 +56,7 @@ const App: React.FC = () => {
  };
  const handleDownloadCss = () => {
-    const animationCss = `
+    const animationCss = `/* 注意：每个路径都需要在 SVG 中设置 --path-length 变量 */
 .animated-text {
  max-width: 100%;
  height: auto;
@ -66,8 +66,9 @@ const App: React.FC = () => {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  /* 使用每个路径自己的长度 */
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  stroke-dasharray: var(--path-length) var(--path-length);
  animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  stroke-linecap: round;
@ -88,14 +89,12 @@ const App: React.FC = () => {
    stroke-dasharray: var(--path-length) var(--path-length);
  }
  /* 慢速绘画过程 */
  50% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
  }
  /* 慢慢填充效果 */
  60% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
@ -103,7 +102,6 @@ const App: React.FC = () => {
    opacity: 1;
  }
  /* 保持填充状态 */
  75% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
@ -111,7 +109,6 @@ const App: React.FC = () => {
    opacity: 1;
  }
  /* 变回线条 */
  85% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
@ -119,7 +116,6 @@ const App: React.FC = () => {
    opacity: 1;
  }
  /* 线条消失 */
  95% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
@ -133,6 +129,13 @@ const App: React.FC = () => {
    fill: transparent;
    opacity: 0;
  }
 }
 /* 确保在暗色模式下的颜色正确 */
@media (prefers-color-scheme: dark) {
  .animated-text path {
    stroke: currentColor;
  }
 }`;
    const blob = new Blob([animationCss], { type: 'text/css' });
--- a/rust/svg/src/lib.rs
+++ b/rust/svg/src/lib.rs
@ -210,7 +210,8 @@ impl FontHandler {
                            paths.push(Path::new()
                                .set("d", builder.path_data)
-                                .set("fill", "currentColor"));
+                                .set("fill", "currentColor")
                                .set("style", format!("--path-length: {};", builder.path_length)));
                        }
                    }
--- a/rust/svg/src/vite-env.d.ts
+++ b/rust/svg/src/vite-env.d.ts
@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/rust/temp/Cargo.toml
+++ b/rust/temp/Cargo.toml
@ -0,0 +1,6 @@
 [package]
 name = "temp"
 version = "0.1.0"
 edition = "2021"
 [dependencies]
--- a/rust/temp/src/core/mod.rs
+++ b/rust/temp/src/core/mod.rs
@ -1,84 +0,0 @@
 use std::sync::{Arc, RwLock};
 use tokio::io::{AsyncReadExt};
 use tokio::{net, runtime};
 use crate::request::{Method,Request};
 use crate::route::{Route};
 use crate::respond::{Respond};
 pub struct Server {
    listener_addr: &'static str,
    listener_port: i32,
    status: bool,
    routes:RwLock<Vec<Route>>,
 }
 impl Server {
    pub fn new(listener_port:i32) -> Arc<Self> {
        if listener_port < 1 || listener_port > 65535 {
            panic!("listener port must be between 1 and 65535");
        }
        Arc::new(
            Self {
                listener_addr: "127.0.0.1",
                listener_port,
                status: false,
                routes: RwLock::new(Vec::new()),
            }
        )
    }
    pub fn start(self: Arc<Self>) {
        let address=format!("{}:{}", self.listener_addr, self.listener_port);
        let rt = runtime::Runtime::new().unwrap();
        println!("Listening on {}", address);
        let listener =rt.block_on(async { net::TcpListener::bind(address).await.expect("Failed to bind listener") });
        rt.block_on(self.receive(listener));
    }
 }
 impl Server {
    async fn receive(self:Arc<Self>,listener:net::TcpListener) {
        loop {
            let (mut socket, _) = listener.accept().await.expect("Failed to accept connection");
            let server = self.clone();
            tokio::spawn(async move {
                let mut buf = [0; 1024];
                if let Err(e) = socket.read(&mut buf).await {
                    println!("Failed to read from socket: {}", e);
                    return;
                }
                let content = match String::from_utf8(buf.to_vec()) {
                    Ok(s) => s,
                    Err(e1) => {
                        println!("Failed to convert buffer to string: {}", e1);
                        return;
                    }
                };
                let request = match Request::build(content) {
                    Some(req) => req,
                    None => {
                        println!("Request parsing failed");
                        return;
                    }
                };
                let respond=Respond::build(socket);
                for route in server.routes.read().expect("Unable to read route").iter() {
                    if request.method() == &route.method {
                        (route.function)(request, respond);
                        return;
                    }else {
                        println!("Request parsing failed");
                    }
                }
            });
        }
    }
 }
 impl Server {
    pub fn route(self:&Arc<Self>, path: &'static str, method: &'static str, function: impl Fn(Request, Arc<Respond>) + Send + Sync + 'static) {
        let test_method=method.to_uppercase().as_str().into();
        if test_method == Method::Uninitialized {panic!("该方法未被定义")}
        let route = Route { path, method:test_method, function: Box::new(function) };
        self.routes.write().expect("Route write failed").push(route);
    }
 }
--- a/rust/temp/src/main.rs
+++ b/rust/temp/src/main.rs
@ -1,14 +0,0 @@
 use core::Server;
 mod core;
 mod request;
 mod respond;
 mod route;
 fn main() {
    let server = Server::new( 8000);
    server.route("/","get",|request, respond| {
        respond.send();
        println!("{}",request.method())
    });
    server.start();
 }
--- a/rust/temp/src/request/mod.rs
+++ b/rust/temp/src/request/mod.rs
@ -1,102 +0,0 @@
 use std::collections::HashMap;
 use std::fmt::Display;
 pub enum Method {
    Get,
    Post,
    Uninitialized
 }
 impl From<&str> for Method {
    fn from(s: &str) -> Method {
        match s{
            "GET" => Method::Get,
            "POST" => Method::Post,
            _ => Method::Uninitialized
        }
    }
 }
 impl Display for Method {
    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
        let method = match self {
            Method::Get => {"GET"}
            Method::Post => {"POST"}
            Method::Uninitialized => {"Uninitialized"}
        };
        write!(f, "{}", method)
    }
 }
 impl PartialEq for Method {
    fn eq(&self, other: &Self) -> bool {
        match (self, other) {
            (Method::Get, Method::Get) => true,
            (Method::Post, Method::Post) => true,
            (Method::Uninitialized, Method::Uninitialized) => true,
            _ => false,
        }
    }
 }
 pub enum Version {
    V1_1,
    Uninitialized
 }
 impl From<&str> for Version {
    fn from(s: &str) -> Version {
        match s {
            "HTTP/1.1" => Version::V1_1,
            _ => Version::Uninitialized
        }
    }
 }
 pub enum Resource{
    Path(String),
 }
 pub struct Request{
    method: Method,
    version: Version,
    resource: Resource,
    headers: HashMap<String, String>,
 }
 impl Request{
    pub fn build(content:String) -> Option<Request>{
        let mut content =content.lines();
        let request_line =content.next().unwrap_or("");
        if request_line.is_empty(){return None}
        let request_line:Vec<_> = request_line.split_whitespace().collect();
        if request_line.len()<3 {return None}
        let method=request_line[0];
        let resource=request_line[1];
        let version=request_line[2];
        if method.is_empty()||resource.is_empty()||version.is_empty() {return None}
        let mut headers =HashMap::<String, String>::new();
        for i in content {
            if i.len()==0 { break;}
            let parts:Vec<&str> = i.split(": ").collect();
            if parts.len() == 2 {
                headers.insert(parts[0].to_string(), parts[1].to_string());
            }
        };
        Some(Request{
            method: method.into(),
            version: version.into(),
            resource: Resource::Path(resource.to_string()),
            headers,
        })
    }
 }
 impl Request {
    pub fn method(&self) -> &Method {
        &self.method
    }
 }
--- a/rust/temp/src/respond/mod.rs
+++ b/rust/temp/src/respond/mod.rs
@ -1,60 +0,0 @@
 use std::collections::HashMap;
 use std::sync::Arc;
 use tokio::sync::Mutex;
 use tokio::io::AsyncWriteExt;
 use tokio::net::TcpStream;
 use tokio::task;
 pub struct Respond<'a>{
    version:&'a str,
    status_code:&'a str,
    status_message:&'a str,
    headers:HashMap<&'a str, &'a str>,
    body:&'a str,
    socket:Arc<Mutex<TcpStream>>
 }
 impl Respond<'_> {
    pub fn build(socket: TcpStream) -> Arc<Respond<'static>> {
        Arc::new(Respond {
            version: "HTTP/1.1",
            status_code: "200",
            status_message: "OK",
            headers: HashMap::new(),
            body: "Hello, world!",
            socket: Arc::new(Mutex::new(socket))
        })
    }
    fn format_message(self:Arc<Self>) -> String {
        let mut massage =String::new();
        let status_line= format!("{} {} {}\r\n", self.status_message,self.version,self.status_message);
        massage.push_str(&status_line);
        let mut header =String::new();
        for (key, value) in self.headers.iter() {
            header += &format!("{}: {}\r\n", key, value);
        }
        massage.push_str("\n\n");
        massage.push_str(self.body);
        massage
    }
    pub fn send(self: Arc<Self>) {
        let socket = self.socket.clone();
        let message = self.format_message();
        task::spawn(async move {
            let mut socket = socket.lock().await;
            if let Ok(_) = socket.write_all(message.as_ref()).await {
                if let Err(e) = socket.flush().await {
                    println!("Failed to flush: {}", e);
                }
            } else {
                println!("Failed to send content");
            }
        });
    }
 }
--- a/rust/temp/src/route/mod.rs
+++ b/rust/temp/src/route/mod.rs
@ -1,10 +0,0 @@
 use std::sync::Arc;
 use crate::request::{Method, Request};
 use crate::respond::{Respond};
 pub(crate) struct Route {
    pub path: &'static str,
    pub method: Method,
    pub function: Box<dyn Fn(Request,Arc<Respond>) + Send + Sync>,
 }
--- a/rust/wasm/life_game/src/index.js
+++ b/rust/wasm/life_game/src/index.js
@ -32,16 +32,12 @@ const renderLoop = () => {
 const drawGrid = () => {
    ctx.beginPath();
    ctx.strokeStyle = GRID_COLOR;
    // 画垂直线
    for (let i = 0; i <= width; i++) {
        ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);
        ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
    }
    // 画水平线
    for (let j = 0; j <= height; j++) {
-        ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);
+        ctx.lineTo(0, j * (CELL_SIZE + 1) + 1);
        ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);
    }
--- a/web/chess/README.md
+++ b/web/chess/README.md
@ -0,0 +1,50 @@
 # React + TypeScript + Vite
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 ## Expanding the ESLint configuration
 If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 - Configure the top-level `parserOptions` property like this:
 ```js
 export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
 })
 ```
 - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
 - Optionally add `...tseslint.configs.stylisticTypeChecked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
 ```js
 // eslint.config.js
 import react from 'eslint-plugin-react'
 export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
 })
 ```
--- a/web/chess/eslint.config.js
+++ b/web/chess/eslint.config.js
@ -0,0 +1,28 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
 )
--- a/web/chess/index.html
+++ b/web/chess/index.html
@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/web/chess/src/App.tsx
+++ b/web/chess/src/App.tsx
@ -189,6 +189,7 @@ const Game: React.FC = () => {
    useEffect(()=>{
        drawChess(chessGame);
        console.log(chessGame?.render())
    },[])
    function chessBoardClick(e: React.MouseEvent<HTMLCanvasElement>) {
        const client=e.currentTarget.getBoundingClientRect();
--- a/web/chess/tsconfig.app.json
+++ b/web/chess/tsconfig.app.json
@ -0,0 +1,25 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
 }
--- a/web/chess/tsconfig.json
+++ b/web/chess/tsconfig.json
@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/web/chess/tsconfig.node.json
+++ b/web/chess/tsconfig.node.json
@ -0,0 +1,23 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/web/chess/vite.config.ts
+++ b/web/chess/vite.config.ts
@ -0,0 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()]
 });
--- a/web/cxm/README.md
+++ b/web/cxm/README.md
@ -0,0 +1,50 @@
 # React + TypeScript + Vite
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 ## Expanding the ESLint configuration
 If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 - Configure the top-level `parserOptions` property like this:
 ```js
 export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
 })
 ```
 - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
 - Optionally add `...tseslint.configs.stylisticTypeChecked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
 ```js
 // eslint.config.js
 import react from 'eslint-plugin-react'
 export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
 })
 ```
--- a/web/cxm/eslint.config.js
+++ b/web/cxm/eslint.config.js
@ -0,0 +1,28 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
 )
--- a/web/cxm/index.html
+++ b/web/cxm/index.html
@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/web/cxm/package.json
+++ b/web/cxm/package.json
@ -0,0 +1,35 @@
 {
  "name": "cxm",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@studio-freight/lenis": "^1.0.33",
    "gsap": "^3.12.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/parser": "^7.26.3",
    "@babel/types": "^7.26.3",
    "@eslint/js": "^9.15.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.4",
    "csstype": "^3.1.3",
    "eslint": "^9.15.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.12.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.15.0",
    "vite": "^6.0.1"
  }
 }
--- a/web/cxm/src/App.css
+++ b/web/cxm/src/App.css
@ -0,0 +1,54 @@
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
 }
 .App {
  width: 100%;
  height: 100%;
  overflow: hidden;
 }
 .logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
 }
 .logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
 }
@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
 }
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
 }
 .card {
  padding: 2em;
 }
 .read-the-docs {
  color: #888;
 }
--- a/web/cxm/src/App.d.ts
+++ b/web/cxm/src/App.d.ts
@ -0,0 +1,3 @@
 import './App.css';
 declare function App(): import("react/jsx-runtime").JSX.Element;
 export default App;
--- a/web/cxm/src/App.js
+++ b/web/cxm/src/App.js
@ -0,0 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Parallax } from './components/Parallax';
 import './App.css';
 function App() {
    return (_jsx("div", { className: "App", children: _jsx(Parallax, {}) }));
 }
 export default App;
--- a/web/cxm/src/App.tsx
+++ b/web/cxm/src/App.tsx
@ -0,0 +1,12 @@
 import { Parallax } from './components/Parallax';
 import './App.css';
 function App() {
  return (
    <div className="App">
      <Parallax />
    </div>
  );
 }
 export default App;
--- a/web/cxm/src/assets/z.woff2
+++ b/web/cxm/src/assets/z.woff2
--- a/web/cxm/src/components/ImageModal.css
+++ b/web/cxm/src/components/ImageModal.css
@ -0,0 +1,40 @@
 .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
 }
 .modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .modal-close {
  position: absolute;
  top: -2rem;
  right: -2rem;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 1001;
 }
 .modal-image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
 } 
--- a/web/cxm/src/components/ImageModal.d.ts
+++ b/web/cxm/src/components/ImageModal.d.ts
@ -0,0 +1,7 @@
 import './ImageModal.css';
 interface ImageModalProps {
    image: string;
    onClose: () => void;
 }
 export declare const ImageModal: ({ image, onClose }: ImageModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};
--- a/web/cxm/src/components/ImageModal.js
+++ b/web/cxm/src/components/ImageModal.js
@ -0,0 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import './ImageModal.css';
 export const ImageModal = ({ image, onClose }) => {
    useEffect(() => {
        const handleEsc = (e) => {
            if (e.key === 'Escape') {
                onClose();
            }
        };
        window.addEventListener('keydown', handleEsc);
        return () => window.removeEventListener('keydown', handleEsc);
    }, [onClose]);
    return (_jsx("div", { className: "modal-overlay", onClick: onClose, children: _jsxs("div", { className: "modal-content", onClick: e => e.stopPropagation(), children: [_jsx("button", { className: "modal-close", onClick: onClose, children: "\u00D7" }), _jsx("img", { src: image, alt: "", className: "modal-image" })] }) }));
 };
--- a/web/cxm/src/components/ImageModal.tsx
+++ b/web/cxm/src/components/ImageModal.tsx
@ -0,0 +1,28 @@
 import { useEffect } from 'react';
 import './ImageModal.css';
 interface ImageModalProps {
  image: string;
  onClose: () => void;
 }
 export const ImageModal = ({ image, onClose }: ImageModalProps) => {
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, [onClose]);
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        <img src={image} alt="" className="modal-image" />
      </div>
    </div>
  );
 }; 
--- a/web/cxm/src/components/Parallax.css
+++ b/web/cxm/src/components/Parallax.css
@ -0,0 +1,530 @@
@font-face {
  font-family: 'PP Neue Corp Wide';
  src: url('../assets/z.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
 }
 :root {
  --color-neutral-900: #0a0a0a;
  --color-light: #ffffff;
  --color-black: #0a0a0a;
  --container-padding: 2rem;
  --section-padding: 4rem;
  --color-dark-rgb: 10, 10, 10;
  --bg-gradient-start: #1a1a2e;
  --bg-gradient-end: #0a0a0a;
 }
 body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end));
  color: var(--color-light);
 }
 html {
  overflow-x: hidden;
  scroll-behavior: smooth;
 }
 #root {
  width: 100%;
  height: 100%;
 }
 .parallax {
  width: 100%;
  position: relative;
  min-height: 100vh;
  overflow: visible;
 }
 .parallax__header {
  z-index: 2;
  padding: var(--section-padding) var(--container-padding);
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: visible;
 }
 .parallax__visuals {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 120%;
  position: absolute;
  top: 0;
  left: 0;
 }
 .parallax__black-line-overflow {
  z-index: 20;
  background-color: var(--color-black);
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
 }
 .parallax__layers {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
 }
 .parallax__layer-img {
  pointer-events: none;
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 117.5%;
  position: absolute;
  top: -17.5%;
  left: 0;
 }
 .parallax__layer-title {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
 }
 .parallax__title {
  pointer-events: auto;
  text-align: center;
  text-transform: none;
  margin-top: 0;
  margin-bottom: .1em;
  margin-right: .075em;
  font-family: 'PP Neue Corp Wide', sans-serif;
  font-size: 11vw;
  font-weight: 800;
  line-height: 1;
  position: relative;
 }
 .parallax__fade {
  z-index: 30;
  background: linear-gradient(to top, 
    rgba(10, 10, 10, 1) 0%, 
    rgba(10, 10, 10, 0.95) 15%, 
    rgba(10, 10, 10, 0.85) 30%, 
    rgba(10, 10, 10, 0.75) 45%, 
    rgba(10, 10, 10, 0.6) 60%,
    rgba(10, 10, 10, 0.4) 75%, 
    rgba(10, 10, 10, 0.2) 85%, 
    rgba(10, 10, 10, 0.1) 92%, 
    transparent 100%
  );
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0;
  left: 0;
 }
 .parallax__content {
  padding: var(--section-padding) var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  z-index: 2;
  background: linear-gradient(to bottom, 
    rgba(26, 42, 46, 0.95) 0%,
    rgba(10, 10, 10, 0.98) 85%,
    var(--color-black) 100%
  );
 }
 .osmo-icon-svg {
  width: 8em;
  position: relative;
  color: var(--color-light);
 }
 .travel-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
 }
 .travel-item {
  padding: 2rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: relative;
 }
 .travel-item:hover {
  transform: translateY(-5px);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
 }
 .travel-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%
  );
  pointer-events: none;
 }
 .travel-item h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-light);
  font-family: 'PP Neue Corp Wide', sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 .travel-item p {
  color: var(--color-light);
  line-height: 1.8;
  opacity: 0.9;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
 }
 .travel-item::after {
  content: '点击查看图片';
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.3s ease;
 }
 .travel-item:hover::after {
  opacity: 0.7;
 }
@media (max-width: 768px) {
  .travel-intro h2 {
    font-size: 2rem;
  }
  .travel-grid {
    grid-template-columns: 1fr;
  }
 }
 .container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, 0.98) 0%,
    rgba(26, 42, 46, 0.95) 100%
  );
 }
 .slider {
  position: absolute;
  top: 5vh;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  perspective: 300px;
  perspective-origin: 50% 50%;
 }
 .card {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 50%;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
  background-color: #000;
 }
 .card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  top: 0;
  left: 0;
 }
 .copy {
  display: none;
 }
 h1 {
  display: none;
 }
 h1 span {
  display: none;
 }
@media(max-width: 768px) {
  .card {
    width: 90%;
    height: 300px;
  }
 }
 .slider-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom,
    var(--color-black) 0%,
    rgba(26, 42, 46, 0.95) 15%,
    rgba(10, 10, 10, 0.98) 100%
  );
  margin-top: -2px;
 }
 .slider-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.5;
  animation: gridMove 30s linear infinite;
  pointer-events: none;
 }
 .circle-decoration {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  pointer-events: none;
 }
 .circle-left {
  left: -150px;
  top: 20%;
 }
 .circle-right {
  right: -150px;
  bottom: 20%;
 }
 .number-decoration {
  position: absolute;
  font-size: 120px;
  font-weight: 800;
  color: #ffffff;
  font-family: 'PP Neue Corp Wide', sans-serif;
 }
 .number-top {
  top: 5%;
  right: 10%;
 }
 .number-bottom {
  bottom: 5%;
  left: 10%;
 }
 .side-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85) !important;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.3em;
  font-weight: 500;
  transition: all 0.3s ease;
  text-shadow: none;
  z-index: 10;
  mix-blend-mode: normal;
 }
 .side-text:hover {
  text-shadow: none;
  transform: translateY(-50%) scale(1.05);
 }
 .side-text-left {
  left: 3rem;
 }
 .side-text-right {
  right: 2rem;
  writing-mode: vertical-lr;
 }
 .side-text::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 150px;
  background: linear-gradient(
    to bottom, 
    transparent, 
    rgba(255, 255, 255, 0.5), 
    transparent
  );
  left: 50%;
  transform: translateX(-50%);
  top: -150px;
 }
 .side-text::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 150px;
  background: linear-gradient(
    to bottom, 
    transparent, 
    rgba(255, 255, 255, 0.5), 
    transparent
  );
  left: 50%;
  transform: translateX(-50%);
  bottom: -150px;
 }
 .year-display {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.5em;
  font-weight: 500;
  text-shadow: none;
  z-index: 10;
  mix-blend-mode: normal;
 }
 .year-display:hover {
  text-shadow: none;
 }
@media (max-width: 768px) {
  .side-text {
    display: none;
  }
 }
@keyframes gridMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
  }
 }
 .card:hover {
  transform: translate(-50%, -50%);
 }
 /* 添加旅行卡片的悬停效果 */
 .travel-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 .travel-item:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .travel-item h3 {
  transition: color 0.3s ease;
 }
 .travel-item:hover h3 {
  color: #fff;
 }
 .travel-item p {
  transition: opacity 0.3s ease;
 }
 .travel-item:hover p {
  opacity: 0.9;
 }
 .parallax__content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-black) 100%
  );
  pointer-events: none;
 }
--- a/web/cxm/src/components/Parallax.d.ts
+++ b/web/cxm/src/components/Parallax.d.ts
@ -0,0 +1,2 @@
 import './Parallax.css';
 export declare const Parallax: () => import("react/jsx-runtime").JSX.Element;
--- a/web/cxm/src/components/Parallax.js
+++ b/web/cxm/src/components/Parallax.js
--- a/web/cxm/src/components/Parallax.tsx
+++ b/web/cxm/src/components/Parallax.tsx
@ -0,0 +1,394 @@
 import { useEffect, useRef, useState } from 'react';
 import gsap from 'gsap';
 import { CustomEase } from 'gsap/CustomEase';
 import ScrollTrigger from 'gsap/ScrollTrigger';
 import Lenis from '@studio-freight/lenis';
 import './Parallax.css';
 import layer1 from '../assets/b1.png';
 import layer2 from '../assets/b2.webp';
 import layer3 from '../assets/b3.webp';
 import { ImageModal } from './ImageModal';
 // 导入旅行图片
 import changbaishan from '../assets/a/changbaishan.jpg';
 import chongqing from '../assets/a/chongqing.jpg';
 import haerbing from '../assets/a/haerbing.jpg';
 import qindao from '../assets/a/qindao.jpg';
 import qinghuangdao from '../assets/a/qinghuangdao.jpg';
 import shichuan from '../assets/a/shichuan.jpg';
 import tianjin from '../assets/a/tianjin.jpg';
 import xizhang from '../assets/a/xizhang.jpg';
 import taian from '../assets/a/taian.jpg';
 // 导入滑动卡片图片
 import a1 from '../assets/b/a1.jpg';
 import a2 from '../assets/b/a2.jpg';
 import a3 from '../assets/b/a3.jpg';
 import a4 from '../assets/b/a4.jpg';
 import a5 from '../assets/b/a5.jpg';
 import a6 from '../assets/b/a6.jpg';
 import a7 from '../assets/b/a7.jpg';
 import a8 from '../assets/b/a8.jpg';
 import a9 from '../assets/b/a9.jpg';
 import a10 from '../assets/b/a10.jpg';
 import a11 from '../assets/b/a11.jpg';
 import a12 from '../assets/b/a12.jpg';
 import a13 from '../assets/b/a13.jpg';
 import a14 from '../assets/b/a14.jpg';
 import a15 from '../assets/b/a15.jpg';
 import a16 from '../assets/b/a16.jpg';
 import a17 from '../assets/b/a17.jpg';
 import a18 from '../assets/b/a18.jpg';
 import a19 from '../assets/b/a19.jpg';
 import a20 from '../assets/b/a20.jpg';
 import a21 from '../assets/b/a21.jpg';
 gsap.registerPlugin(CustomEase, ScrollTrigger);
 // 添加 CustomEase
 CustomEase.create("cubic", "0.83, 0, 0.17, 1");
 // 在组件外部创建图片数组
 const allImages = [
  a1, a2, a3, a4, a5, a6, a7, a8, a9, a10,
  a11, a12, a13, a14, a15, a16, a17, a18,
  a19, a20, a21
 ];
 // 在组件外部添加一个用于跟踪最近使用的图片的数组
 let recentlyUsedImages: typeof allImages[number][] = [];
 // 修改节流函数，使用闭包来保存状态
 function throttle(func: Function, limit: number) {
  let inThrottle: boolean;
  let lastResult: any;
  return function(this: any, ...args: any[]) {
    if (!inThrottle) {
      lastResult = func.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
    return lastResult;
  }
 }
 // 在组件内部，但在 useEffect 外部定义
 function initializeCards() {
  const cards = Array.from(document.querySelectorAll(".card"));
  gsap.set(cards, {
    y: i => -15 + (15 * i) + "%",
    z: i => 15 * i,
    transformOrigin: "50% 50%"
  });
 }
 export const Parallax = () => {
  const layersRef = useRef<HTMLDivElement>(null);
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [displayedCards, setDisplayedCards] = useState<string[]>(() => {
    const shuffled = [...allImages].sort(() => 0.5 - Math.random());
    const initial = shuffled.slice(0, 5);
    return initial;
  });
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      orientation: 'vertical',
      gestureOrientation: 'vertical',
      smoothWheel: true,
    });
    let rafId: number;
    let isAnimating = false;
    let autoPlayInterval: ReturnType<typeof setInterval>;
    function raf(time: number) {
      lenis.raf(time);
      rafId = requestAnimationFrame(raf);
    }
    rafId = requestAnimationFrame(raf);
    const scrollHandler = () => {
      ScrollTrigger.update();
    };
    lenis.on('scroll', scrollHandler);
    if (layersRef.current) {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: layersRef.current,
          start: "top top",
          end: "bottom top",
          scrub: 1,
          invalidateOnRefresh: true,
        }
      });
      const layers = [
        { layer: "1", yPercent: 50 },
        { layer: "2", yPercent: 35 },
        { layer: "3", yPercent: 25 },
        { layer: "4", yPercent: 15 }
      ];
      layers.forEach((layerObj) => {
        const element = layersRef.current!.querySelector(`[data-parallax-layer="${layerObj.layer}"]`);
        if (element) {
          gsap.set(element, {
            y: 0,
            force3D: true
          });
          tl.to(element, {
            yPercent: layerObj.yPercent,
            ease: "none",
            force3D: true,
          }, 0);
        }
      });
    }
    // 修改 handleClick 函数
    const handleClick = () => {
      if (isAnimating) return;
      isAnimating = true;
      const slider = document.querySelector(".slider");
      if (!slider) return;
      const cards = Array.from(slider.querySelectorAll(".card"));
      const lastCard = cards[cards.length - 1];
      if (lastCard) {
        const currentDisplayed = new Set(displayedCards);
        const usedImages = new Set(recentlyUsedImages);
        const availableImages = allImages.filter(img => 
          !currentDisplayed.has(img) && !usedImages.has(img)
        );
        let newImage: string;
        if (availableImages.length < 5) {
          recentlyUsedImages = [];
          const newAvailableImages = allImages.filter(img => !currentDisplayed.has(img));
          const randomIndex = Math.floor(Math.random() * newAvailableImages.length);
          newImage = newAvailableImages[randomIndex];
        } else {
          const randomIndex = Math.floor(Math.random() * availableImages.length);
          newImage = availableImages[randomIndex];
        }
        recentlyUsedImages.push(newImage);
        // 更新状态，新图片添加到开头
        const newState = [newImage, ...displayedCards.slice(0, -1)];
        setDisplayedCards(newState);
        // 先创建新的卡片元素
        const newCard = lastCard.cloneNode(true) as HTMLElement;
        const newImg = newCard.querySelector('img');
        if (newImg) {
          newImg.src = newImage;
        }
        // 执行动画
        gsap.to(lastCard, {
          y: "+=150%",
          duration: 0.75,
          ease: "cubic",
          onComplete: () => {
            // 用新卡片替换旧卡片
            slider.replaceChild(newCard, lastCard);
            slider.prepend(newCard);
            gsap.set(cards, {
              clearProps: "all"
            });
            initializeCards();
            isAnimating = false;
          }
        });
      }
    };
    // 动播放函数
    const autoPlay = () => {
      if (!isAnimating) {
        handleClick();
      }
    };
    // 节流后的点击处理函数
    const throttledHandleClick = throttle(handleClick, 1000);
    // 开始自动播放
    autoPlayInterval = setInterval(autoPlay, 2000);
    // 鼠标进入时暂停自动播放
    const handleMouseEnter = () => {
      clearInterval(autoPlayInterval);
    };
    // 鼠标离开时恢复自动播放
    const handleMouseLeave = () => {
      autoPlayInterval = setInterval(autoPlay, 2000);
    };
    // 初始化卡片位置
    initializeCards();
    const slider = document.querySelector(".slider");
    if (slider) {
      slider.addEventListener("click", throttledHandleClick);
      slider.addEventListener("mouseenter", handleMouseEnter);
      slider.addEventListener("mouseleave", handleMouseLeave);
    }
    return () => {
      if (rafId) {
        cancelAnimationFrame(rafId);
      }
      const slider = document.querySelector(".slider");
      if (slider) {
        slider.removeEventListener("click", throttledHandleClick);
        slider.removeEventListener("mouseenter", handleMouseEnter);
        slider.removeEventListener("mouseleave", handleMouseLeave);
      }
      clearInterval(autoPlayInterval);
      lenis.destroy();
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, []);
  // 3. 添加始化函数
  useEffect(() => {
    // 只保留卡片初始化
    initializeCards();
  }, []);
  return (
    <div className="parallax">
      <section className="parallax__header">
        <div className="parallax__visuals">
          <div className="parallax__black-line-overflow"></div>
          <div ref={layersRef} data-parallax-layers className="parallax__layers">
            <img 
              src={layer3}
              loading="eager"
              width="800"
              data-parallax-layer="1"
              alt=""
              className="parallax__layer-img"
            />
            <img 
              src={layer2}
              loading="eager"
              width="800"
              data-parallax-layer="2"
              alt=""
              className="parallax__layer-img"
            />
            <div data-parallax-layer="3" className="parallax__layer-title">
              <h2 className="parallax__title">旅行故事</h2>
            </div>
            <img 
              src={layer1}
              loading="eager"
              width="800"
              data-parallax-layer="4"
              alt=""
              className="parallax__layer-img"
            />
          </div>
          <div className="parallax__fade"></div>
        </div>
      </section>
      <section className="parallax__content">
        <div className="travel-grid">
          <div className="travel-item" onClick={() => setSelectedImage(xizhang)}>
            <h3>西藏</h3>
            <p>在海拔4000米的高原上，感受着最接近天空的信仰。布达拉宫的庄严肃穆，大昭寺的虔诚香火，以及纳木错圣湖的碧蓝湖水，都让人内心无比平静。高原的星空璀璨得让人屏息。</p>
          </div>
          <div className="travel-item" onClick={() => setSelectedImage(shichuan)}>
            <h3>四川</h3>
            <p>在成都的宽窄巷子，感受悠闲的四川文化。稻城丁的雪山、草与湖泊构成了人间最后的香格里拉。乐山大佛巍峨庄严，都江堰千年智慧，让人不禁感叹古人的匠心。</p>
          </div>
          <div className="travel-item" onClick={() => setSelectedImage(chongqing)}>
            <h3>重庆</h3>
            <p>夜幕降临，这座不夜城开始绽放光。洪崖洞层层叠叠的灯光倒映在江面，两江交汇处的璀璨夜景令人沉醉。子坝轻轨穿楼而过，解放碑的繁华夜色，构成了这座立体城市最迷人的画卷。</p>
          </div>
          <div className="travel-item" onClick={() => setSelectedImage(haerbing)}>
            <h3>哈尔滨</h3>
            <p>冰雪世界的晶莹剔透，中央大街的欧式建筑，松花江的冰雪奇缘。在零下20度的寒冬感受着这座城市独特的俄罗斯风情和冰雪艺术。</p>
          </div>
          <div className="travel-item" onClick={() => setSelectedImage(changbaishan)}>
            <h3>长白山</h3>
            <p>天池的深邃神秘，瀑布的气势磅礴，温泉的温暖治愈。在这座火山与冰雪的天堂，感受大自然的鬼斧神工体验东北原始森林的神秘。</p>
          </div>
          <div className="travel-item" onClick={() => setSelectedImage(qindao)}>
            <h3>青岛</h3>
            <p>的海轻抚，八关的建，酒博物馆金色回。漫步在海边，品尝着新鲜的海鲜，欣赏着这座充满德国风情的海滨城市。</p>
          </div>
          <div className="travel-item" onClick={() => setSelectedImage(qinghuangdao)}>
            <h3>秦皇岛</h3>
            <p>在万里长的起点北戴河，听着渤海湾的浪涛。漫步在白色的沙滩上，日出东方，霞满。这里有最美的海岸线，也有最动人的历史故事。</p>
          </div>
          <div className="travel-item" onClick={() => setSelectedImage(tianjin)}>
            <h3>天津</h3>
            <p>五大洋楼群诉着百年历史，意式风情区的地域情调。古文化街的津味小吃，海河两岸的璨夜景。在这座中西合璧的城市里，感受着独特的海派文化。</p>
          </div>
          <div className="travel-item" onClick={() => setSelectedImage(taian)}>
            <h3>泰安</h3>
            <p>泰山巍峨雄伟，云海日出壮观无比。上南天门，俯瞰众渺小。岱庙的古老建，诉着千历史。这里不仅是五岳之首，更是中华文化的精神象征。</p>
          </div>
        </div>
        {selectedImage && (
          <ImageModal 
            image={selectedImage}
            onClose={() => setSelectedImage(null)}
          />
        )}
      </section>
      <section className="slider-section">
        <div className="circle-decoration circle-left"></div>
        <div className="circle-decoration circle-right"></div>
        <div className="number-decoration number-top">01</div>
        <div className="number-decoration number-bottom">21</div>
        <div className="side-text side-text-left">
          TRAVEL MEMORIES · 旅行记忆
        </div>
        <div className="side-text side-text-right">
          PHOTO COLLECTION · 影像集
        </div>
        <div className="year-display">
          2022 - 2024
        </div>
        <div className="container">
          <div className="slider">
            {displayedCards.map((img, index) => (
              <div className="card" key={index}>
                <img src={img} alt="" />
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
 }; 
--- a/web/cxm/src/index.css
+++ b/web/cxm/src/index.css
@ -0,0 +1,98 @@
 :root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
 }
 a:hover {
  color: #535bf2;
 }
 body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
 }
 h1 {
  font-size: 3.2em;
  line-height: 1.1;
 }
 button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
 }
 button:hover {
  border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
 }
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
 }
 #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
 }
 html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
 }
 html.lenis {
  height: auto;
 }
 .lenis.lenis-smooth {
  scroll-behavior: auto;
 }
 .lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
 }
 .lenis.lenis-stopped {
  overflow: hidden;
 }
--- a/web/cxm/src/main.d.ts
+++ b/web/cxm/src/main.d.ts
@ -0,0 +1 @@
 import './index.css';
--- a/web/cxm/src/main.js
+++ b/web/cxm/src/main.js
@ -0,0 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App.tsx';
 createRoot(document.getElementById('root')).render(_jsx(StrictMode, { children: _jsx(App, {}) }));
--- a/web/cxm/src/main.tsx
+++ b/web/cxm/src/main.tsx
@ -0,0 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
 )
--- a/web/cxm/src/vite-env.d.ts
+++ b/web/cxm/src/vite-env.d.ts
@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/web/cxm/tsconfig.app.json
+++ b/web/cxm/tsconfig.app.json
@ -0,0 +1,13 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "paths": {
      "@babel/*": ["./node_modules/@babel/*"]
    }
  },
  "include": ["src"]
 }
--- a/web/cxm/tsconfig.app.tsbuildinfo
+++ b/web/cxm/tsconfig.app.tsbuildinfo
@ -0,0 +1 @@
 {"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/imagemodal.tsx","./src/components/parallax.tsx"],"errors":true,"version":"5.6.3"}
--- a/web/cxm/tsconfig.json
+++ b/web/cxm/tsconfig.json
@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/web/cxm/tsconfig.node.json
+++ b/web/cxm/tsconfig.node.json
@ -0,0 +1,8 @@
 {
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2015",
    "moduleResolution": "bundler"
  },
  "include": ["vite.config.ts"]
 }
--- a/web/cxm/tsconfig.node.tsbuildinfo
+++ b/web/cxm/tsconfig.node.tsbuildinfo
@ -0,0 +1 @@
 {"root":["./vite.config.ts"],"errors":true,"version":"5.6.3"}
--- a/web/cxm/vite.config.d.ts
+++ b/web/cxm/vite.config.d.ts
@ -0,0 +1,2 @@
 declare const _default: import("vite").UserConfig;
 export default _default;
--- a/web/cxm/vite.config.js
+++ b/web/cxm/vite.config.js
@ -0,0 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 // https://vite.dev/config/
 export default defineConfig({
    plugins: [react()],
 });
--- a/web/cxm/vite.config.ts
+++ b/web/cxm/vite.config.ts
@ -0,0 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
 })
--- a/web/czr/.eslintrc.cjs
+++ b/web/czr/.eslintrc.cjs
@ -0,0 +1,84 @@
 /**
 * This is intended to be a basic starting point for linting in your app.
 * It relies on recommended configs out of the box for simplicity, but you can
 * and should modify this configuration to best suit your team's needs.
 */
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    commonjs: true,
    es6: true,
  },
  ignorePatterns: ["!**/.server", "!**/.client"],
  // Base config
  extends: ["eslint:recommended"],
  overrides: [
    // React
    {
      files: ["**/*.{js,jsx,ts,tsx}"],
      plugins: ["react", "jsx-a11y"],
      extends: [
        "plugin:react/recommended",
        "plugin:react/jsx-runtime",
        "plugin:react-hooks/recommended",
        "plugin:jsx-a11y/recommended",
      ],
      settings: {
        react: {
          version: "detect",
        },
        formComponents: ["Form"],
        linkComponents: [
          { name: "Link", linkAttribute: "to" },
          { name: "NavLink", linkAttribute: "to" },
        ],
        "import/resolver": {
          typescript: {},
        },
      },
    },
    // Typescript
    {
      files: ["**/*.{ts,tsx}"],
      plugins: ["@typescript-eslint", "import"],
      parser: "@typescript-eslint/parser",
      settings: {
        "import/internal-regex": "^~/",
        "import/resolver": {
          node: {
            extensions: [".ts", ".tsx"],
          },
          typescript: {
            alwaysTryTypes: true,
          },
        },
      },
      extends: [
        "plugin:@typescript-eslint/recommended",
        "plugin:import/recommended",
        "plugin:import/typescript",
      ],
    },
    // Node
    {
      files: [".eslintrc.cjs"],
      env: {
        node: true,
      },
    },
  ],
 };
--- a/web/czr/app/components/Carousel.tsx
+++ b/web/czr/app/components/Carousel.tsx
@ -0,0 +1,36 @@
 import { useState, useEffect, useCallback } from 'react';
 interface CarouselProps {
  items: {
    content: React.ReactNode;
  }[];
  interval?: number;
 }
 export function Carousel({ 
  items, 
  interval = 5000
 }: CarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const goToNext = useCallback(() => {
    setCurrentIndex((current) => (current + 1) % items.length);
  }, [items.length]);
  useEffect(() => {
    if (interval > 0) {
      const timer = setInterval(goToNext, interval);
      return () => clearInterval(timer);
    }
  }, [interval, goToNext]);
  return (
    <div className="relative">
      <div className="flex justify-center items-center">
        <div>
          {items[currentIndex].content}
        </div>
      </div>
    </div>
  );
 }
--- a/web/czr/app/components/Navigation.tsx
+++ b/web/czr/app/components/Navigation.tsx
@ -0,0 +1,116 @@
 import { Link, useLocation } from '@remix-run/react';
 import { useState } from 'react';
 export default function Navigation() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const location = useLocation();
  const isActive = (path: string) => location.pathname === path;
  const navItems = [
    { path: '/', label: '首页' },
    { path: '/solutions', label: '解决方案' },
    { path: '/innovations', label: '创新' },
    { path: '/about', label: '关于我们' },
  ];
  return (
    <nav className="nav-container">
      <div className="nav-content">
        <Link to="/" className="nav-logo">
          <svg
            className="animated-text"
            preserveAspectRatio="xMidYMid meet"
            viewBox="47.4 25.200005 455.2 109.8"
            xmlns="http://www.w3.org/2000/svg"
            style={{ 
              width: '120px',  // 设置固定宽度
              height: 'auto',  // 高度自动调整保持比例
              color: '#1a1a1a' // 设置logo颜色
            }}
          >
            <path
              d="M 119.200005 86.90001 L 120.9 87.70001 L 120.700005 98.600006 Q 120.3 109.600006 120.3 114.00001 Q 120.3 118.00001 119.6 120.850006 Q 118.9 123.700005 117.9 123.700005 Q 117 123.700005 117 124.350006 Q 117 125.00001 115.450005 124.850006 Q 113.9 124.700005 114.25 123.65001 Q 114.6 122.600006 114.3 105.50001 Q 114.200005 94.00001 114 90.90001 Q 113.8 87.8 112.8 86.600006 Q 111.600006 84.8 112 84.40001 Q 112.4 84.00001 114.8 85.00001 L 119.200005 86.90001 ZM 109.95 47.250008 Q 110.600006 47.100006 112.7 47.300003 Q 117 47.90001 118 48.300003 Q 119 48.700005 119 49.800003 Q 119 51.200005 111.5 58.800007 Q 106.7 63.800007 105.350006 65.55 Q 104 67.3 104 68.70001 Q 104 70.90001 104.55 71.25001 Q 105.100006 71.600006 105.55 75.40001 Q 106 79.20001 106.350006 79.20001 Q 106.7 79.20001 114.25 72.50001 Q 121.8 65.8 123.3 64.90001 Q 124.6 64.00001 127.9 63.900005 Q 131.20001 63.800007 132 64.600006 Q 132.8 65.40001 132.3 66.45001 Q 131.8 67.50001 130.70001 67.50001 Q 128.9 67.50001 124.05 71.20001 Q 119.200005 74.90001 114.3 79.90001 Q 107.9 86.40001 106.65 88.65001 Q 105.4 90.90001 105.4 95.40001 Q 105.4 100.3 104.2 101.40001 Q 103.100006 102.50001 102.2 101.950005 Q 101.3 101.40001 99.7 98.40001 Q 97.8 94.700005 96.2 93.40001 L 94.7 92.3 L 97 89.90001 Q 99.3 87.600006 100 84.8 Q 100.3 83.3 100.45 81.100006 Q 100.600006 78.90001 100.45 77.3 Q 100.3 75.70001 100 75.70001 Q 99.4 75.70001 95.4 83.8 L 91.3 91.700005 L 91.3 100.8 L 91.3 109.90001 L 89.100006 110.200005 Q 87.100006 110.700005 84.100006 108.90001 Q 78.3 105.600006 73.8 108.90001 Q 71.9 110.30001 70.25 110.50001 Q 68.6 110.700005 68.1 109.50001 Q 67.6 108.50001 67.6 106.15001 Q 67.6 103.8 69.15 103.200005 Q 70.7 102.600006 71.2 102.90001 Q 71.7 103.100006 77.05 97.3 Q 82.4 91.50001 83.3 89.700005 Q 84.4 87.40001 82.600006 87.70001 Q 81.2 87.8 78.3 89.40001 Q 73.8 91.90001 72.25 91.3 Q 70.7 90.700005 70.2 85.90001 Q 69.8 83.50001 70.4 81.95001 Q 71 80.40001 74.9 73.90001 Q 76.7 70.70001 78.4 67.00001 Q 80.1 63.300007 79.8 63.000008 Q 79.5 62.70001 76.45 64.90001 Q 73.4 67.100006 71.2 69.20001 Q 68.3 71.90001 66.55 75.20001 Q 64.8 78.50001 61.85 79.90001 Q 58.9 81.3 58.15 80.850006 Q 57.4 80.40001 57.4 76.90001 L 57.4 73.3 L 63.4 69.00001 Q 79.5 57.400005 82.4 54.90001 Q 84.2 53.200005 85.2 52.90001 Q 86.2 52.600006 89.5 52.90001 Q 92.8 53.300003 94.25 54.050003 Q 95.7 54.800003 95.7 56.400005 Q 95.7 57.20001 92.7 59.400005 Q 89.7 61.600006 88.5 63.900005 L 87.3 66.100006 L 89.8 68.600006 Q 92.4 71.00001 94.4 70.8 Q 95.9 70.70001 96.850006 69.600006 Q 97.8 68.50001 100.2 63.900005 Q 103.7 57.20001 105.850006 54.100006 Q 108 51.000008 108 50.300003 Q 108 49.600006 108.8 48.300003 Q 109.3 47.40001 109.95 47.250008 ZM 106.350006 58.600006 Q 106.4 58.300007 106.350006 58.100006 Q 106.3 57.900005 106.2 57.900005 Q 105.5 57.900005 104.7 59.70001 Q 104.2 60.900005 104.4 61.000008 Q 104.9 61.20001 105.8 59.70001 Q 105.9 59.500008 106 59.300007 Q 106.3 58.900005 106.350006 58.600006 ZM 84.8 71.600006 Q 84.2 71.600006 83.350006 74.350006 Q 82.5 77.100006 82.9 77.600006 Q 83.9 78.40001 84.9 76.40001 Q 85.5 75.100006 85.5 74.00001 Q 85.5 71.600006 84.8 71.600006 ZM 80.5 35.90001 Q 81.6 36.40001 84.2 37.500008 Q 87.3 39.000008 89.5 42.200005 Q 90.9 44.300003 91.100006 45.15001 Q 91.3 46.000008 90.9 47.500008 Q 90.4 48.800003 89.7 49.40001 Q 89 50.000008 87.4 50.40001 Q 84.7 51.200005 84.4 50.850006 Q 84.100006 50.500008 80.6 51.800003 Q 79.7 52.100006 78.95 52.350006 Q 78.2 52.600006 77.75 52.700005 Q 77.3 52.800003 77.3 52.700005 Q 77.3 52.600006 79.7 49.700005 Q 85.2 43.100006 80.3 38.500008 Q 78.7 37.000008 78.7 36.000008 Q 78.7 35.200005 80.5 35.90001 Z"
              fill="currentColor"
              style={{ "--path-length": "1019.60175" } as React.CSSProperties}
            />
            <path
              d="M 201.5 57.600006 Q 202.7 58.20001 205.5 59.000008 Q 208 59.600006 209.20001 61.150005 Q 210.4 62.70001 209.3 63.900005 Q 208.70001 64.90001 207.6 68.25001 Q 206.5 71.600006 205.1 73.40001 Q 204.20001 74.600006 204.20001 74.90001 Q 204.20001 75.20001 205.3 75.8 Q 206.6 76.50001 206.75 77.75001 Q 206.9 79.00001 205.8 79.70001 L 199.2 83.40001 Q 193.8 86.600006 192.1 87.100006 Q 190.9 87.3 190.35 88.350006 Q 189.8 89.40001 188.9 92.600006 Q 186.5 100.90001 188.1 101.90001 Q 188.6 102.200005 193.9 102.8 Q 199.2 103.40001 206.8 102.200005 Q 214.4 101.00001 216.5 99.40001 Q 217.3 98.700005 217.3 96.00001 Q 217.3 93.3 218.1 91.8 Q 218.70001 90.90001 218.9 90.8 Q 219.1 90.700005 219.6 91.40001 Q 220.20001 92.50001 223.3 94.00001 Q 224.5 94.50001 225.3 95.100006 Q 226.1 95.700005 225.9 96.00001 Q 225.6 96.700005 226.4 99.00001 Q 226.8 100.50001 226.75 101.25001 Q 226.70001 102.00001 226 103.200005 Q 223.5 107.00001 211.1 109.700005 Q 202.4 111.700005 193 110.600006 Q 183.6 109.50001 180.9 106.30001 Q 179.6 104.50001 179.75 101.05 Q 179.9 97.600006 181.5 94.90001 L 183.2 91.8 L 181.6 90.600006 Q 180.1 89.40001 180.1 86.00001 Q 180.1 83.600006 180.45 83.100006 Q 180.8 82.600006 182.9 81.90001 Q 185.7 81.00001 188.1 78.90001 Q 190.1 77.20001 193.1 73.00001 Q 196.1 68.8 196.6 66.8 Q 196.9 65.70001 196.7 65.55 Q 196.5 65.40001 195 66.40001 Q 192.9 67.50001 191.7 69.3 Q 190.7 70.70001 188.4 72.40001 Q 186.1 74.100006 185.1 74.100006 Q 184.2 74.100006 182.35 72.45001 Q 180.5 70.8 179.4 69.100006 Q 178.5 67.70001 178.55 67.50001 Q 178.6 67.3 180 67.3 Q 181.5 67.3 185.4 65.90001 Q 189.3 64.50001 189.3 63.900005 Q 189.3 63.500008 191.65 62.250008 Q 194 61.000008 195.9 59.000008 Q 198.6 56.100006 201.5 57.600006 ZM 170.55 45.550003 Q 170.9 45.300003 172.8 45.500008 Q 176.9 46.200005 177.9 49.800003 Q 178.4 51.200005 173.9 56.600006 Q 169.4 62.000008 169.4 62.650005 Q 169.4 63.300007 165.4 67.50001 Q 158.5 74.90001 158.5 76.600006 Q 158.5 77.3 161.3 77.70001 Q 164.1 78.100006 164.4 78.40001 Q 164.7 78.70001 164 84.8 Q 163.6 89.00001 163.65 90.100006 Q 163.7 91.200005 164.6 91.90001 Q 165.9 92.90001 166.6 94.200005 Q 166.8 94.600006 167.05 94.700005 Q 167.3 94.8 167.8 94.450005 Q 168.3 94.100006 169.05 93.3 Q 169.8 92.50001 171.2 91.00001 Q 175.8 85.70001 175.5 87.100006 Q 175.4 87.600006 173.8 89.90001 Q 170.7 94.40001 167 101.90001 Q 163.3 109.40001 163.3 111.200005 Q 163.3 113.40001 162.05 114.350006 Q 160.8 115.30001 159.3 114.65001 Q 157.8 114.00001 157.5 111.90001 Q 157 110.100006 156.3 107.40001 Q 155.9 105.80001 156 104.80001 Q 156.1 103.8 157.1 101.90001 L 158.7 98.8 L 157.1 94.50001 Q 155.5 90.200005 155.6 87.600006 L 155.6 85.20001 L 153.1 86.3 Q 150.7 87.40001 148.4 89.00001 Q 146.7 90.3 145.4 90.450005 Q 144.1 90.600006 143.8 89.600006 Q 143.6 88.8 143.3 85.100006 Q 143.1 82.50001 143.4 81.75001 Q 143.7 81.00001 145.7 79.70001 Q 147.7 78.40001 150 76.100006 Q 152.3 73.8 157.6 68.00001 Q 161 64.100006 165.7 56.500008 Q 170.4 48.90001 170.2 47.200005 Q 170.2 45.800003 170.55 45.550003 Z"
              fill="currentColor"
              style={{ "--path-length": "659.9861" } as React.CSSProperties}
            />
            <path
              d="M 291.9 67.40001 Q 291.6 68.600006 290.3 69.3 Q 289.1 70.00001 285.05 75.00001 Q 281 80.00001 279.1 81.70001 Q 277.4 83.3 277.35 84.100006 Q 277.3 84.90001 278.5 86.40001 Q 280 88.100006 279.8 90.15001 Q 279.6 92.200005 277.3 98.3 Q 272.7 109.90001 276 110.600006 Q 278.3 111.100006 285.95 111.05001 Q 293.6 111.00001 295.7 110.40001 Q 298.1 109.80001 299.95 107.700005 Q 301.8 105.600006 302.2 103.00001 Q 302.8 100.00001 303.9 96.65001 Q 305 93.3 305.4 93.3 Q 306 93.3 306 95.100006 Q 306 96.90001 308.4 100.200005 Q 309.9 102.200005 310.4 103.50001 Q 310.9 104.80001 310.9 106.80001 Q 311 112.40001 307.35 114.80001 Q 303.7 117.200005 295.3 117.100006 Q 289.2 117.100006 282.6 117.200005 Q 278.5 117.30001 276.75 117.100006 Q 275 116.90001 273.4 116.00001 Q 271.6 115.200005 271 114.30001 Q 270.4 113.40001 269.9 111.100006 Q 269.2 108.50001 269.65 106.350006 Q 270.1 104.200005 271.2 104.200005 Q 271.8 104.200005 271.8 103.200005 Q 271.8 102.200005 273.2 98.00001 Q 274.6 93.8 275.2 93.00001 Q 275.9 91.90001 276.15 89.55 Q 276.4 87.20001 275.9 86.40001 Q 275.4 85.8 275.15 85.90001 Q 274.9 86.00001 274.2 87.00001 Q 273 88.600006 271.1 89.700005 Q 269.5 90.8 263.3 96.75001 Q 257.1 102.700005 252.5 107.700005 Q 249.9 110.700005 246.85 112.700005 Q 243.8 114.700005 241.85 115.00001 Q 239.9 115.30001 239.2 113.80001 Q 238.4 111.100006 244.8 106.200005 Q 248.8 103.200005 258.45 92.15001 Q 268.1 81.100006 267.4 80.50001 Q 267 80.20001 262.7 82.8 Q 259.8 84.600006 255.65 86.55 Q 251.5 88.50001 250.6 88.50001 Q 249.9 88.50001 248.85 86.25001 Q 247.8 84.00001 247.8 82.50001 Q 247.8 81.100006 248.2 80.600006 Q 248.6 80.100006 250.5 79.600006 Q 253.1 78.90001 255.5 76.50001 Q 259.7 72.50001 258.1 75.50001 Q 257.3 77.00001 258.2 76.8 Q 259 76.600006 261.6 75.100006 L 271.4 69.70001 Q 278.3 65.90001 281 63.150005 Q 283.7 60.400005 283.95 60.400005 Q 284.2 60.400005 286.25 62.150005 Q 288.3 63.900005 289.15 63.900005 Q 290 63.900005 291.2 65.100006 Q 292.2 66.20001 291.9 67.40001 ZM 284.45 43.300003 Q 286.6 42.90001 288.3 44.40001 Q 289.3 45.40001 289.7 45.000008 Q 290 44.700005 290.4 45.600006 Q 290.5 45.800003 290.6 46.000008 Q 290.8 47.000008 290.5 47.65001 Q 290.2 48.300003 288.8 49.40001 Q 286.1 51.600006 282.5 53.950005 Q 278.9 56.300007 278.35 56.300007 Q 277.8 56.300007 274.8 58.800007 Q 271.8 61.300007 269.2 63.900005 Q 267.2 66.100006 266.3 65.8 Q 266.1 65.70001 266.7 64.95001 Q 267.3 64.20001 268.45 62.900005 Q 269.6 61.600006 271.1 60.100006 Q 276.5 54.700005 276.5 54.000008 Q 276.6 52.600006 271.5 55.40001 Q 270.7 55.800003 269.8 56.400005 Q 263.1 60.400005 259.8 56.20001 Q 258.2 53.90001 258.2 53.40001 Q 258.2 52.90001 260 52.90001 Q 262 52.90001 265.15 51.700005 Q 268.3 50.500008 275.9 46.90001 Q 282.3 43.700005 284.45 43.300003 Z"
              fill="currentColor"
              style={{ "--path-length": "663.6744" } as React.CSSProperties}
            />
            <path
              d="M 358.65 38.750008 Q 358.9 39.300003 358.9 41.000008 Q 358.9 43.000008 357.75 45.950005 Q 356.6 48.90001 355.6 49.300003 Q 355 49.500008 351.85 53.250008 Q 348.7 57.000008 348.7 57.400005 Q 348.7 57.900005 351.4 59.100006 Q 355 60.70001 355.7 62.300007 Q 356.4 63.900005 355.9 69.90001 L 355.6 76.90001 L 359.2 72.90001 Q 363 68.70001 364.8 66.20001 Q 366.1 64.3 366.15 63.750008 Q 366.2 63.20001 365.4 62.000008 Q 364.4 60.500008 364.45 59.95001 Q 364.5 59.400005 365.8 59.400005 Q 367.2 59.400005 370.6 57.70001 Q 375.7 55.000008 380.3 57.000008 Q 381.2 57.400005 381.4 56.20001 Q 381.5 55.100006 381.5 51.600006 Q 381.5 45.700005 380.7 44.250008 Q 379.9 42.800003 381.2 41.90001 Q 384 39.800003 385.8 41.90001 Q 387.6 44.000008 387.6 49.000008 Q 387.6 53.100006 389.8 57.100006 Q 391.7 60.70001 394.9 64.15001 Q 398.1 67.600006 400.7 68.90001 Q 402.9 70.100006 403.15 71.70001 Q 403.4 73.3 401.4 73.90001 Q 395.8 75.600006 390.6 78.90001 L 386.5 81.600006 L 386 92.3 Q 385.3 107.600006 383.9 114.55001 Q 382.5 121.50001 379.7 122.200005 Q 378 122.600006 377.7 121.950005 Q 377.4 121.30001 378.1 118.30001 Q 378.8 114.700005 379.2 100.8 Q 379.2 100.50001 379.2 100.00001 Q 379.7 88.100006 378.9 87.20001 Q 378.2 86.40001 375.3 88.50001 Q 375.2 88.600006 375 88.700005 L 374.9 88.8 L 374.6 89.00001 Q 371.8 91.00001 369.65 92.00001 Q 367.5 93.00001 364.1 95.40001 Q 361.8 97.00001 361.1 97.25001 Q 360.4 97.50001 359.8 96.700005 Q 358.9 95.50001 358.9 92.50001 Q 358.9 90.700005 359.25 90.00001 Q 359.6 89.3 360.5 89.00001 Q 362 88.40001 368.15 81.350006 Q 374.3 74.3 373.6 74.55 Q 372.9 74.8 368.95 76.70001 Q 365 78.600006 364.35 78.25001 Q 363.7 77.90001 363.7 75.45001 Q 363.7 73.00001 366.8 69.100006 Q 370.3 64.600006 369.7 64.3 Q 369.5 64.20001 369.2 64.20001 Q 368.5 64.20001 366.1 67.8 L 361 75.20001 Q 356.5 81.100006 355.7 84.00001 Q 354.9 86.90001 355.1 95.90001 Q 355.4 106.30001 355.05 107.15001 Q 354.7 108.00001 352.1 108.00001 Q 349.5 108.00001 345.9 105.200005 Q 342.3 102.40001 338.8 100.850006 Q 335.3 99.3 333.05 96.200005 Q 330.8 93.100006 330.8 92.700005 Q 331.1 91.600006 334.6 93.3 Q 337.7 94.90001 337.7 93.600006 Q 337.7 92.90001 339.05 91.05 Q 340.4 89.200005 342.15 84.75001 Q 343.9 80.3 344.6 79.20001 Q 346 76.600006 344.5 76.600006 Q 343.1 76.8 338.2 78.90001 Q 333.4 81.20001 330.25 81.350006 Q 327.1 81.50001 326.9 79.40001 Q 326.8 78.600006 327.05 78.25001 Q 327.3 77.90001 328.2 77.90001 Q 329.6 77.90001 334.75 74.90001 Q 339.9 71.90001 343.9 70.70001 L 348 69.40001 L 348 65.100006 Q 348 60.20001 346.5 60.20001 Q 345.7 60.100006 344.6 61.100006 Q 342.9 62.600006 342 62.20001 Q 341.9 62.000008 341.9 61.800007 Q 341.9 61.500008 344.6 58.050007 Q 347.3 54.600006 347.3 53.90001 Q 347.3 53.200005 350.3 48.65001 Q 353.3 44.100006 354.75 41.15001 Q 356.2 38.200005 357.6 38.200005 Q 358.4 38.200005 358.65 38.750008 ZM 388.6 59.70001 Q 387.8 59.600006 386.9 66.40001 Q 385.8 76.50001 387.1 76.50001 Q 388.1 76.50001 390.95 75.100006 Q 393.8 73.70001 394.5 72.90001 Q 395.1 72.00001 394.9 71.350006 Q 394.7 70.70001 393.4 68.8 Q 391.3 66.00001 390.4 63.20001 Q 389.2 59.70001 388.6 59.70001 ZM 378.1 61.500008 Q 377.6 61.70001 377.2 62.20001 Q 375.3 63.800007 373.15 66.70001 Q 371 69.600006 371.3 70.100006 Q 371.7 70.40001 376.3 68.8 Q 379.9 67.70001 380.4 66.95001 Q 380.9 66.20001 381.1 61.70001 Q 381.2 59.100006 378.1 61.500008 ZM 379.55 75.20001 Q 378.9 75.20001 375.45 78.90001 Q 372 82.600006 372 83.3 Q 372 84.100006 376 82.100006 Q 378.9 80.600006 379.55 79.95001 Q 380.2 79.3 380.2 77.600006 Q 380.2 75.20001 379.55 75.20001 ZM 346.8 84.00001 Q 346.2 83.40001 345.8 84.90001 Q 345.8 85.00001 345.8 85.3 Q 345.3 87.600006 345.8 87.3 Q 346 87.20001 346.6 86.20001 Q 347.4 84.70001 346.8 84.00001 Z"
              fill="currentColor"
              style={{ "--path-length": "1026.061" } as React.CSSProperties}
            />
            <path
              d="M 471.4 45.40001 Q 471.6 45.700005 471.8 45.800003 Q 473.7 47.40001 474.1 48.40001 Q 474.5 49.40001 474.5 52.500008 L 474.5 56.800007 L 478.5 57.20001 Q 482.6 57.500008 483.5 58.900005 Q 484.2 59.900005 484.05 60.400005 Q 483.9 60.900005 482.8 61.800007 Q 481.1 63.000008 477.6 63.500008 Q 474.5 64.00001 473.35 65.350006 Q 472.2 66.70001 471.8 70.50001 Q 471.3 74.50001 471 75.8 Q 471 76.100006 471 76.350006 Q 471 76.600006 471.5 76.8 Q 472 77.00001 472.8 77.00001 Q 473.6 77.00001 475.3 77.00001 Q 479 77.00001 480.15 77.40001 Q 481.3 77.8 481.8 79.100006 Q 482.1 79.90001 480.25 84.75001 Q 478.4 89.600006 476.2 94.00001 L 475.1 96.3 L 477.5 98.200005 Q 479.9 100.3 485.2 103.700005 Q 489.7 106.700005 491.15 108.50001 Q 492.6 110.30001 492.6 112.80001 Q 492.6 117.50001 487.5 117.200005 Q 485.7 117.100006 485.25 116.80001 Q 484.8 116.50001 484.9 115.40001 Q 485.1 113.80001 484.1 112.30001 Q 483.4 111.100006 478.05 107.15001 Q 472.7 103.200005 471.1 102.600006 Q 470.3 102.3 468.2 103.90001 Q 466.5 105.40001 462.4 106.950005 Q 458.3 108.50001 456.2 108.50001 Q 451.3 108.50001 447.45 106.450005 Q 443.6 104.40001 442.1 101.00001 L 440.9 98.600006 L 440.4 102.700005 Q 439.8 106.700005 439.8 110.200005 Q 439.9 113.80001 439.2 114.65001 Q 438.5 115.50001 436.3 114.600006 Q 435 114.100006 434 113.00001 Q 433 111.90001 431.7 109.40001 Q 429.2 104.80001 427.65 103.100006 Q 426.1 101.40001 424.6 101.850006 Q 423.1 102.3 420.75 101.65001 Q 418.4 101.00001 417.8 100.100006 Q 416.9 98.600006 417.8 97.40001 Q 418.7 96.200005 422.3 93.90001 Q 427.3 90.8 431.2 87.600006 L 435.1 84.50001 L 435.1 78.20001 Q 435.1 71.90001 435.7 69.3 Q 436.3 66.70001 435.8 66.40001 Q 435.3 66.100006 430.4 69.50001 Q 422.2 75.00001 419 71.70001 Q 418.5 71.20001 418.35 70.850006 Q 418.2 70.50001 418.65 70.100006 Q 419.1 69.70001 420 69.25001 Q 420.9 68.8 422.8 68.00001 Q 426.6 66.50001 431.9 63.400005 Q 436.5 60.70001 437.35 59.050007 Q 438.2 57.400005 438.2 51.100006 Q 438.2 45.40001 438.95 45.40001 Q 439.7 45.40001 442.55 48.550003 Q 445.4 51.700005 445.4 54.100006 Q 445.4 55.40001 445.75 56.050007 Q 446.1 56.70001 447.1 57.20001 Q 448.9 57.900005 451.15 57.900005 Q 453.4 57.900005 454.2 58.70001 Q 455.9 60.400005 453.1 61.100006 Q 452.1 61.300007 450.3 61.500008 Q 445.5 62.000008 444.45 62.800007 Q 443.4 63.600006 442.55 69.95001 Q 441.7 76.3 442.2 76.75001 Q 442.7 77.20001 444 75.90001 Q 445.9 74.3 445.8 75.350006 Q 445.7 76.40001 443.8 79.40001 Q 442.1 82.00001 441.7 83.40001 Q 441.3 84.8 441.3 88.200005 Q 441.3 90.100006 441.3 90.950005 Q 441.3 91.8 441.45 92.450005 Q 441.6 93.100006 441.85 93.00001 Q 442.1 92.90001 442.4 92.90001 Q 443.1 92.8 443.55 93.40001 Q 444 94.00001 444.6 95.8 Q 445.9 100.200005 449.7 101.3 Q 453.5 102.40001 457.8 99.600006 Q 459.3 98.700005 459.95 98.3 Q 460.6 97.90001 461.05 97.3 Q 461.5 96.700005 461.45 96.450005 Q 461.4 96.200005 460.7 95.55 Q 460 94.90001 459.25 94.450005 Q 458.5 94.00001 456.7 92.90001 Q 447.4 87.8 447.4 87.100006 Q 447.4 86.600006 448.35 86.55 Q 449.3 86.50001 450.75 86.8 Q 452.2 87.100006 453.7 87.600006 Q 455.7 88.50001 456.25 88.50001 Q 456.8 88.50001 457.5 87.50001 Q 458.4 86.3 458.05 84.90001 Q 457.7 83.50001 459.3 81.8 Q 460.5 80.50001 462.4 75.40001 Q 464.3 70.3 463.7 69.70001 Q 463.4 69.40001 460.3 70.50001 Q 457.6 71.40001 456.15 70.90001 Q 454.7 70.40001 453.1 68.20001 Q 452.4 67.20001 452.5 66.90001 Q 452.6 66.600006 453.4 66.3 Q 455.4 65.600006 459.9 63.550007 Q 464.4 61.500008 465 61.20001 Q 466.1 60.20001 467 46.500008 Q 467.2 44.500008 467.2 43.90001 Q 467.5 42.200005 471.4 45.40001 ZM 469.2 84.90001 Q 468.2 85.20001 467.5 86.00001 Q 466.5 87.20001 465.5 88.8 Q 464.5 90.40001 464.5 91.00001 Q 464.5 91.3 466.1 91.3 Q 467.7 91.3 469.55 88.600006 Q 471.4 85.90001 471.4 85.20001 Q 471.4 83.90001 469.2 84.90001 ZM 433.1 94.850006 Q 432.5 94.8 431 97.00001 Q 429.8 98.600006 429.9 99.8 Q 430 101.00001 431.3 101.00001 Q 432.2 101.00001 432.55 100.3 Q 432.9 99.600006 433.3 97.00001 Q 433.7 94.90001 433.1 94.850006 Z"
              fill="currentColor"
              style={{ "--path-length": "768.58575" } as React.CSSProperties}
            />
          </svg>
        </Link>
        {/* 桌面端导航链接 */}
        <div className="nav-links">
          {navItems.map((item) => (
            <Link
              key={item.path}
              to={item.path}
              className={`nav-link ${isActive(item.path) ? 'active' : ''}`}
            >
              {item.label}
            </Link>
          ))}
        </div>
        {/* 移动端菜单按钮 */}
        <button
          className="mobile-menu-button"
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          aria-label="Toggle menu"
        >
          <svg
            className="w-6 h-6"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            {isMobileMenuOpen ? (
              <path d="M6 18L18 6M6 6l12 12" />
            ) : (
              <path d="M4 6h16M4 12h16M4 18h16" />
            )}
          </svg>
        </button>
      </div>
      {/* 移动端导航菜单 */}
      {isMobileMenuOpen && (
        <div className="mobile-nav">
          <div className="mobile-nav-links">
            {navItems.map((item) => (
              <Link
                key={item.path}
                to={item.path}
                className={`mobile-nav-link ${isActive(item.path) ? 'active' : ''}`}
                onClick={() => setIsMobileMenuOpen(false)}
              >
                {item.label}
              </Link>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
 }
--- a/web/czr/app/entry.client.tsx
+++ b/web/czr/app/entry.client.tsx
@ -0,0 +1,18 @@
 /**
 * By default, Remix will handle hydrating your app on the client for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.client
 */
 import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>
  );
 });
--- a/web/czr/app/entry.server.tsx
+++ b/web/czr/app/entry.server.tsx
@ -0,0 +1,89 @@
 /**
 * By default, Remix will handle generating the HTTP Response for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.server
 */
 import { PassThrough } from "node:stream";
 import type { AppLoadContext, EntryContext } from "@remix-run/node";
 import { createReadableStreamFromReadable } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 const ABORT_DELAY = 5_000;
 export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  loadContext: AppLoadContext
 ) {
  return isbot(request.headers.get("user-agent") || "")
    ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
    : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
 }
 function handleBotRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
 ) {
  return new Promise((resolve, reject) => {
    const { pipe, abort } = renderToPipeableStream(
      <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
      {
        onAllReady() {
          const body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);
          responseHeaders.set("Content-Type", "text/html");
          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            })
          );
          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
      }
    );
    setTimeout(abort, ABORT_DELAY);
  });
 }
 function handleBrowserRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
 ) {
  return new Promise((resolve, reject) => {
    const { pipe, abort } = renderToPipeableStream(
      <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
      {
        onShellReady() {
          const body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);
          responseHeaders.set("Content-Type", "text/html");
          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            })
          );
          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
      }
    );
    setTimeout(abort, ABORT_DELAY);
  });
 }
--- a/web/czr/app/env.ts
+++ b/web/czr/app/env.ts
@ -0,0 +1,27 @@
 export interface EnvConfig {
  VITE_PORT: string;
  VITE_ADDRESS: string;
  VITE_INIT_STATUS: string;
  VITE_API_BASE_URL: string;
  VITE_API_USERNAME: string;
  VITE_API_PASSWORD: string;
  VITE_PATTERN: string;
 }
 export const DEFAULT_CONFIG: EnvConfig = {
  VITE_PORT: "22100",
  VITE_ADDRESS: "localhost",
  VITE_INIT_STATUS: "0",
  VITE_API_BASE_URL: "http://127.0.0.1:22000",
  VITE_API_USERNAME: "",
  VITE_API_PASSWORD: "",
  VITE_PATTERN: "true",
 } as const;
 // 扩展 ImportMeta 接口
 declare global {
  interface ImportMetaEnv extends EnvConfig {}
  interface ImportMeta {
    readonly env: ImportMetaEnv;
  }
 }
--- a/web/czr/app/hooks/ParticleImage.tsx
+++ b/web/czr/app/hooks/ParticleImage.tsx
@ -0,0 +1,3 @@
 import React from 'react';
 import { useEffect, useRef, useState } from 'react';
 // ... 其他导入保持不变
--- a/web/czr/app/index.css
+++ b/web/czr/app/index.css
@ -0,0 +1,196 @@
@import "@radix-ui/themes/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
 :root {
  --transition-duration: 150ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --hljs-theme: 'github';
 }
 :root[class~="dark"] {
  --hljs-theme: 'github-dark';
 }
 /* 确保 Radix UI 主题类包裹整个应用 */
 .radix-themes {
  transition:
    background-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing);
  min-height: 100%;
 }
 /* 基础布局样式 */
 html, 
 body {
  height: 100%;
 }
 /* 添加暗色模式支持 */
 .radix-themes-dark {
  @apply dark;
 }
 /* 隐藏不活跃的主题样式 */
 [data-theme="light"] .hljs-dark {
  display: none;
 }
 [data-theme="dark"] .hljs-light {
  display: none;
 }
 /* 导航栏基础样式 */
 .nav-container {
  @apply fixed top-0 left-0 right-0 z-50;
  @apply bg-white/80 dark:bg-gray-900/80;
  @apply backdrop-blur-sm;
  @apply border-b border-gray-200 dark:border-gray-700;
 }
 .nav-content {
  @apply container mx-auto px-4;
  @apply flex items-center justify-between;
  @apply h-16;
 }
 .nav-logo {
  @apply text-xl font-bold;
  @apply text-gray-800 dark:text-white;
  @apply hover:text-gray-600 dark:hover:text-gray-300;
  @apply transition-colors duration-200;
 }
 .nav-links {
  @apply hidden md:flex items-center space-x-8;
 }
 .nav-link {
  @apply text-gray-600 dark:text-gray-300;
  @apply hover:text-gray-900 dark:hover:text-white;
  @apply transition-colors duration-200;
  @apply font-medium;
 }
 /* 移动端菜单按钮 */
 .mobile-menu-button {
  @apply md:hidden;
  @apply p-2 rounded-md;
  @apply text-gray-600 dark:text-gray-300;
  @apply hover:bg-gray-100 dark:hover:bg-gray-800;
  @apply transition-colors duration-200;
 }
 /* 移动端导航菜单 */
 .mobile-nav {
  @apply md:hidden;
  @apply fixed top-16 left-0 right-0;
  @apply bg-white dark:bg-gray-900;
  @apply border-b border-gray-200 dark:border-gray-700;
  @apply shadow-lg;
 }
 .mobile-nav-links {
  @apply flex flex-col space-y-4;
  @apply p-4;
 }
 .mobile-nav-link {
  @apply text-gray-600 dark:text-gray-300;
  @apply hover:text-gray-900 dark:hover:text-white;
  @apply transition-colors duration-200;
  @apply font-medium;
  @apply block;
  @apply py-2;
 }
 /* 激活状态的导航链接 */
 .nav-link.active,
 .mobile-nav-link.active {
  @apply text-blue-600 dark:text-blue-400;
 }
 /* 注意：每个路径都需要在 SVG 中设置 --path-length 变量 */
 .animated-text {
  max-width: 100%;
  height: auto;
 }
 .animated-text path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  /* 使用每个路径自己的长度 */
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  stroke-linecap: round;
  stroke-linejoin: round;
 }
@keyframes logo-anim {
  0% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    opacity: 0;
    fill: transparent;
  }
  5% {
    opacity: 1;
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
  }
  50% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
  }
  60% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }
  75% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }
  95% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 0;
  }
 }
 /* 确保在暗色模式下的颜色正确 */
@media (prefers-color-scheme: dark) {
  .animated-text path {
    stroke: currentColor;
  }
 }
--- a/web/czr/app/init.tsx
+++ b/web/czr/app/init.tsx
@ -0,0 +1,508 @@
 import React, { createContext, useState } from "react";
 import { DEFAULT_CONFIG } from "app/env";
 import { HttpClient } from "core/http";
 import { ThemeModeToggle } from "hooks/themeMode";
 import {
  Theme,
  Button,
  Select,
  Flex,
  Container,
  Heading,
  Text,
  Box,
  TextField,
 } from "@radix-ui/themes";
 import { toast } from "hooks/notification";
 import { Echoes } from "hooks/echoes";
 interface SetupContextType {
  currentStep: number;
  setCurrentStep: (step: number) => void;
 }
 const SetupContext = createContext<SetupContextType>({
  currentStep: 1,
  setCurrentStep: () => {},
 });
 // 步骤组件的通用属性接口
 interface StepProps {
  onNext: () => void;
 }
 const StepContainer: React.FC<{ title: string; children: React.ReactNode }> = ({
  title,
  children,
 }) => (
  <Box style={{ width: "90%", maxWidth: "600px", margin: "0 auto" }}>
    <Heading size="5" mb="4" weight="bold">
      {title}
    </Heading>
    <Flex direction="column" gap="4">
      {children}
    </Flex>
  </Box>
 );
 // 通用的导航按钮组件
 const NavigationButtons: React.FC<
  StepProps & { loading?: boolean; disabled?: boolean }
 > = ({ onNext, loading = false, disabled = false }) => (
  <Flex justify="end" mt="4">
    <Button
      size="3"
      disabled={loading || disabled}
      onClick={onNext}
      style={{ width: "100%" }}
    >
      {loading ? "处理中..." : "下一步"}
    </Button>
  </Flex>
 );
 // 修改输入框组件
 const InputField: React.FC<{
  label: string;
  name: string;
  defaultValue?: string | number;
  hint?: string;
  required?: boolean;
 }> = ({ label, name, defaultValue, hint, required = true }) => (
  <Box mb="4">
    <Text as="label" size="2" weight="medium" className="block mb-2">
      {label} {required && <Text color="red">*</Text>}
    </Text>
    <TextField.Root
      name={name}
      defaultValue={defaultValue?.toString()}
      required={required}
    >
      <TextField.Slot></TextField.Slot>
    </TextField.Root>
    {hint && (
      <Text color="gray" size="1" mt="1">
        {hint}
      </Text>
    )}
  </Box>
 );
 const Introduction: React.FC<StepProps> = ({ onNext }) => (
  <StepContainer title="安装说明">
    <Text size="3" style={{ lineHeight: 1.6 }}>
      欢迎使用 Echoes
    </Text>
    <NavigationButtons onNext={onNext} />
  </StepContainer>
 );
 const DatabaseConfig: React.FC<StepProps> = ({ onNext }) => {
  const [dbType, setDbType] = useState("postgresql");
  const [loading, setLoading] = useState(false);
  const http = HttpClient.getInstance();
  const validateForm = () => {
    const getRequiredFields = () => {
      switch (dbType) {
        case "sqllite":
          return ["db_prefix", "db_name"];
        case "postgresql":
        case "mysql":
          return [
            "db_host",
            "db_prefix",
            "db_port",
            "db_user",
            "db_password",
            "db_name",
          ];
        default:
          return [];
      }
    };
    const requiredFields = getRequiredFields();
    const emptyFields: string[] = [];
    requiredFields.forEach((field) => {
      const input = document.querySelector(
        `[name="${field}"]`,
      ) as HTMLInputElement;
      if (input && (!input.value || input.value.trim() === "")) {
        emptyFields.push(field);
      }
    });
    if (emptyFields.length > 0) {
      const fieldNames = emptyFields.map((field) => {
        switch (field) {
          case "db_host":
            return "数据库地址";
          case "db_prefix":
            return "数据库前缀";
          case "db_port":
            return "端口";
          case "db_user":
            return "用户名";
          case "db_password":
            return "密码";
          case "db_name":
            return "数据库名";
          default:
            return field;
        }
      });
      toast.error(`请填写以下必填项：${fieldNames.join("、")}`);
      return false;
    }
    return true;
  };
  const handleNext = async () => {
    const validation = validateForm();
    if (validation !== true) {
      return;
    }
    setLoading(true);
    try {
      const formData = {
        db_type: dbType,
        host:
          (
            document.querySelector('[name="db_host"]') as HTMLInputElement
          )?.value?.trim() ?? "",
        db_prefix:
          (
            document.querySelector('[name="db_prefix"]') as HTMLInputElement
          )?.value?.trim() ?? "",
        port: Number(
          (
            document.querySelector('[name="db_port"]') as HTMLInputElement
          )?.value?.trim() ?? 0,
        ),
        user:
          (
            document.querySelector('[name="db_user"]') as HTMLInputElement
          )?.value?.trim() ?? "",
        password:
          (
            document.querySelector('[name="db_password"]') as HTMLInputElement
          )?.value?.trim() ?? "",
        db_name:
          (
            document.querySelector('[name="db_name"]') as HTMLInputElement
          )?.value?.trim() ?? "",
      };
      await http.post("/sql", formData);
      let oldEnv = import.meta.env ?? DEFAULT_CONFIG;
      const viteEnv = Object.entries(oldEnv).reduce(
        (acc, [key, value]) => {
          if (key.startsWith("VITE_")) {
            acc[key] = value;
          }
          return acc;
        },
        {} as Record<string, any>,
      );
      const newEnv = {
        ...viteEnv,
        VITE_INIT_STATUS: "2",
      };
      await http.dev("/env", {
        method: "POST",
        body: JSON.stringify(newEnv),
      });
      Object.assign(import.meta.env, newEnv);
      toast.success("数据库配置成功！");
      setTimeout(() => onNext(), 1000);
    } catch (error: any) {
      console.error(error);
      toast.error(error.message, error.title);
    } finally {
      setLoading(false);
    }
  };
  return (
    <StepContainer title="数据库配置">
      <div>
        <Box mb="6">
          <Text as="label" size="2" weight="medium" mb="2" className="block">
            数据库类型
          </Text>
          <Select.Root value={dbType} onValueChange={setDbType}>
            <Select.Trigger />
            <Select.Content>
              <Select.Group>
                <Select.Item value="postgresql">PostgreSQL</Select.Item>
                <Select.Item value="mysql">MySQL</Select.Item>
                <Select.Item value="sqllite">SQLite</Select.Item>
              </Select.Group>
            </Select.Content>
          </Select.Root>
        </Box>
        {dbType === "postgresql" && (
          <>
            <InputField
              label="数据库地址"
              name="db_host"
              defaultValue="localhost"
              hint="通常使 localhost"
              required
            />
            <InputField
              label="数据库前缀"
              name="db_prefix"
              defaultValue="echoec_"
              hint="通常使用 echoec_"
              required
            />
            <InputField
              label="端口"
              name="db_port"
              defaultValue={5432}
              hint="PostgreSQL 默认端口为 5432"
              required
            />
            <InputField
              label="用户名"
              name="db_user"
              defaultValue="postgres"
              required
            />
            <InputField
              label="密码"
              name="db_password"
              defaultValue="postgres"
              required
            />
            <InputField
              label="数据库名"
              name="db_name"
              defaultValue="echoes"
              required
            />
          </>
        )}
        {dbType === "mysql" && (
          <>
            <InputField
              label="数据库地址"
              name="db_host"
              defaultValue="localhost"
              hint="通常使用 localhost"
              required
            />
            <InputField
              label="数据库前缀"
              name="db_prefix"
              defaultValue="echoec_"
              hint="通常使用 echoec_"
              required
            />
            <InputField
              label="端口"
              name="db_port"
              defaultValue={3306}
              hint="mysql 默认端口为 3306"
              required
            />
            <InputField
              label="用户名"
              name="db_user"
              defaultValue="root"
              required
            />
            <InputField
              label="密码"
              name="db_password"
              defaultValue="mysql"
              required
            />
            <InputField
              label="数据库名"
              name="db_name"
              defaultValue="echoes"
              required
            />
          </>
        )}
        {dbType === "sqllite" && (
          <>
            <InputField
              label="数据库前缀"
              name="db_prefix"
              defaultValue="echoec_"
              hint="通常使用 echoec_"
              required
            />
            <InputField
              label="数据库名"
              name="db_name"
              defaultValue="echoes.db"
              required
            />
          </>
        )}
        <NavigationButtons
          onNext={handleNext}
          loading={loading}
          disabled={loading}
        />
      </div>
    </StepContainer>
  );
 };
 interface InstallReplyData {
  token: string;
  username: string;
  password: string;
 }
 const AdminConfig: React.FC<StepProps> = ({ onNext }) => {
  const [loading, setLoading] = useState(false);
  const http = HttpClient.getInstance();
  const handleNext = async () => {
    setLoading(true);
    try {
      const formData = {
        username: (
          document.querySelector('[name="admin_username"]') as HTMLInputElement
        )?.value,
        password: (
          document.querySelector('[name="admin_password"]') as HTMLInputElement
        )?.value,
        email: (
          document.querySelector('[name="admin_email"]') as HTMLInputElement
        )?.value,
      };
      const response = (await http.post(
        "/administrator",
        formData,
      )) as InstallReplyData;
      const data = response;
      localStorage.setItem("token", data.token);
      let oldEnv = import.meta.env ?? DEFAULT_CONFIG;
      const viteEnv = Object.entries(oldEnv).reduce(
        (acc, [key, value]) => {
          if (key.startsWith("VITE_")) {
            acc[key] = value;
          }
          return acc;
        },
        {} as Record<string, any>,
      );
      const newEnv = {
        ...viteEnv,
        VITE_INIT_STATUS: "3",
        VITE_API_USERNAME: data.username,
        VITE_API_PASSWORD: data.password,
      };
      await http.dev("/env", {
        method: "POST",
        body: JSON.stringify(newEnv),
      });
      Object.assign(import.meta.env, newEnv);
      toast.success("管理员账号创建成功！");
      onNext();
    } catch (error: any) {
      console.error(error);
      toast.error(error.message, error.title);
    } finally {
      setLoading(false);
    }
  };
  return (
    <StepContainer title="创建管理员账号">
      <div className="space-y-6">
        <InputField label="用户名" name="admin_username" />
        <InputField label="密码" name="admin_password" />
        <InputField label="邮箱" name="admin_email" />
        <NavigationButtons onNext={handleNext} loading={loading} />
      </div>
    </StepContainer>
  );
 };
 const SetupComplete: React.FC = () => (
  <StepContainer title="安装完成">
    <Flex direction="column" align="center" gap="4">
      <Text size="5" weight="medium">
        恭喜！安装已完成
      </Text>
      <Text size="3">系统正在重启中，请稍候...</Text>
      <Box mt="4">
        <Flex justify="center">
          <Box className="animate-spin rounded-full h-8 w-8 border-b-2 border-current"></Box>
        </Flex>
      </Box>
    </Flex>
  </StepContainer>
 );
 export default function SetupPage() {
  const [currentStep, setCurrentStep] = useState(() => {
    return Number(import.meta.env.VITE_INIT_STATUS ?? 0) + 1;
  });
  return (
    <Theme
      grayColor="gray"
      accentColor="gray"
      radius="medium"
      panelBackground="solid"
      appearance="inherit"
    >
      <Box className="min-h-screen w-full">
        <Box position="fixed" top="2" right="4">
          <ThemeModeToggle />
        </Box>
        <Flex justify="center" pt="2">
          <Box className="w-20 h-20">
            <Echoes />
          </Box>
        </Flex>
        <Flex direction="column" className="min-h-screen w-full pb-4">
          <Container className="w-full">
            <SetupContext.Provider value={{ currentStep, setCurrentStep }}>
              {currentStep === 1 && (
                <Introduction onNext={() => setCurrentStep(currentStep + 1)} />
              )}
              {currentStep === 2 && (
                <DatabaseConfig
                  onNext={() => setCurrentStep(currentStep + 1)}
                />
              )}
              {currentStep === 3 && (
                <AdminConfig onNext={() => setCurrentStep(currentStep + 1)} />
              )}
              {currentStep === 4 && <SetupComplete />}
            </SetupContext.Provider>
          </Container>
        </Flex>
      </Box>
    </Theme>
  );
 }
--- a/web/czr/app/root.tsx
+++ b/web/czr/app/root.tsx
@ -0,0 +1,31 @@
 import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
 } from "@remix-run/react";
 import "./index.css"
 import Navigation from '~/components/Navigation';
 export default function App() {
  return (
    <html lang="zh">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body suppressHydrationWarning={true}>
        <Navigation />
        <div className="pt-16">
          <Outlet />
        </div>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
 }
--- a/web/czr/app/routes.tsx
+++ b/web/czr/app/routes.tsx
@ -0,0 +1,46 @@
 import ErrorPage from "hooks/error";
 import layout from "themes/echoes/layout";
 import article from "themes/echoes/article";
 import about from "themes/echoes/about";
 import { useLocation } from "react-router-dom";
 import post from "themes/echoes/post";
 export default function Routes() {
  const location = useLocation();
  let path = location.pathname;
  const args = {
    title: "我的页面",
    theme: "dark",
    nav: '<a href="/">index</a><a href="/error">error</a><a href="/about">about</a><a href="/post">post</a>',
  };
  console.log(path);
  path = path.split("/")[1];
  if (path === "error") {
    return layout.render({
      children: ErrorPage.render(args),
      args,
    });
  }
  if (path === "about") {
    return layout.render({
      children: about.render(args),
      args,
    });
  }
  if (path === "post") {
    return layout.render({
      children: post.render(args),
      args,
    });
  }
  return layout.render({
    children: article.render(args),
    args,
  });
 }
--- a/web/czr/app/routes/_index.tsx
+++ b/web/czr/app/routes/_index.tsx
@ -0,0 +1,146 @@
 import type { MetaFunction } from "@remix-run/node";
 export const meta: MetaFunction = () => {
  return [
    { title: "新纪元科技 - 引领创新未来" },
    { name: "description", content: "专注于环保科技创新，为可持续发展提供解决方案" },
  ];
 };
 export default function Index() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-white text-gray-800">
      {/* Hero区域 */}
      <div className="relative overflow-hidden bg-gradient-to-r from-green-50 to-blue-50">
        <div className="max-w-7xl mx-auto px-4 py-24">
          <div className="text-center">
            <h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
              创新科技，守护地球
            </h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-10">
              致力于开发环保科技解决方案，用创新力量推动可持续发展
            </p>
            <button className="bg-gradient-to-r from-green-600 to-blue-600 text-white px-8 py-3 rounded-full font-semibold 
              hover:opacity-90 transition-all duration-300 hover:scale-105 hover:shadow-lg">
              了解更多
            </button>
          </div>
        </div>
      </div>
      {/* 核心技术 */}
      <section className="py-20 bg-white" id="innovations">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-16">核心创新技术</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            <div className="text-center group transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl rounded-xl p-6">
              <div className="bg-green-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 
                group-hover:bg-green-100 transition-colors duration-300 group-hover:scale-110">
                <svg className="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-4">智能环保系统</h3>
              <p className="text-gray-600">采用AI技术优化资源利用，提高能源使用效率</p>
            </div>
            <div className="text-center group transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl rounded-xl p-6">
              <div className="bg-blue-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 
                group-hover:bg-blue-100 transition-colors duration-300 group-hover:scale-110">
                <svg className="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-4">新能源转换</h3>
              <p className="text-gray-600">创新能源转换技术，实现清洁能源的高效利用</p>
            </div>
            <div className="text-center group transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl rounded-xl p-6">
              <div className="bg-cyan-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 
                group-hover:bg-cyan-100 transition-colors duration-300 group-hover:scale-110">
                <svg className="w-10 h-10 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-4">生态监测</h3>
              <p className="text-gray-600">全方位环境监测系统，保护生态平衡</p>
            </div>
          </div>
        </div>
      </section>
      {/* 解决方案 */}
      <section className="py-20 bg-gradient-to-r from-green-50 to-blue-50" id="solutions">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-16">创新解决方案</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white rounded-lg p-8 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
              <h3 className="text-xl font-semibold mb-4">智慧城市环保系统</h3>
              <p className="text-gray-600 mb-4">整合城市环境数据，提供智能化环保解决方案</p>
              <ul className="text-gray-600 space-y-2">
                <li>• 空气质量实时监测</li>
                <li>• 智能垃圾分类系统</li>
                <li>• 城市能源管理优化</li>
              </ul>
            </div>
            <div className="bg-white rounded-lg p-8 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
              <h3 className="text-xl font-semibold mb-4">工业节能方案</h3>
              <p className="text-gray-600 mb-4">为工业企业提供全方位的节能减排解决方案</p>
              <ul className="text-gray-600 space-y-2">
                <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">• 能源使用效率优化</li>
                <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">• 废物循环利用系统</li>
                <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">• 清洁生产技术改造</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      {/* 页脚 */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h4 className="text-lg font-semibold mb-4">关于我们</h4>
              <p className="text-gray-400">新纪元科技致力于环保科技创新，为地球可持续发展贡献力量</p>
            </div>
            <div>
              <h4 className="text-lg font-semibold mb-4">联系方式</h4>
              <p className="text-gray-400">电话：400-888-8888</p>
              <p className="text-gray-400">邮箱：contact@xingjiyuan.com</p>
            </div>
            <div>
              <h4 className="text-lg font-semibold mb-4">解决方案</h4>
              <ul className="text-gray-400 space-y-2">
                <li>
                  <a href="#" className="hover:text-white transition-colors duration-200 hover:translate-x-2 inline-block">
                    智慧城市
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors duration-200 hover:translate-x-2 inline-block">
                    工业节能
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors duration-200 hover:translate-x-2 inline-block">
                    生态监测
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-semibold mb-4">公司地址</h4>
              <p className="text-gray-400">中国上海市浦东新区科技创新大道888号</p>
            </div>
          </div>
          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>© 2024 新纪元科技 版权所有</p>
          </div>
        </div>
      </footer>
    </div>
  );
 } 
--- a/web/czr/app/routes/about.tsx
+++ b/web/czr/app/routes/about.tsx
@ -0,0 +1,67 @@
 import type { MetaFunction } from "@remix-run/node";
 export const meta: MetaFunction = () => {
  return [
    { title: "关于我们 - 新纪元科技" },
    { name: "description", content: "了解新纪元科技的使命与愿景" },
  ];
 };
 export default function About() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-white text-gray-800">
      {/* 页面标题 */}
      <div className="bg-gradient-to-r from-green-50 to-blue-50 py-20">
        <div className="max-w-7xl mx-auto px-4">
          <h1 className="text-4xl font-bold text-center bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
            关于我们
          </h1>
          <p className="text-center text-gray-600 mt-4 max-w-2xl mx-auto">
            致力于用科技创新推动环保事业发展
          </p>
        </div>
      </div>
      {/* 公司介绍 */}
      <div className="py-20">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="transform transition-all duration-500 hover:scale-105">
              <h2 className="text-3xl font-bold mb-6 relative after:content-[''] after:absolute after:bottom-0 
                after:left-0 after:w-20 after:h-1 after:bg-gradient-to-r after:from-green-500 after:to-blue-500">
                公司简介
              </h2>
              <p className="text-gray-600 mb-4">
                新纪元科技成立于2020年，是一家专注于环保科技创新的高新技术企业。我们致力于通过技术创新解决环境问题，推动可持续发展。
              </p>
              <p className="text-gray-600">
                公司拥有一支专业的研发团队，在环保技术领域具有深厚的积累和创新能力。
              </p>
            </div>
            <div className="transform transition-all duration-500 hover:scale-105">
              <h2 className="text-3xl font-bold mb-6 relative after:content-[''] after:absolute after:bottom-0 
                after:left-0 after:w-20 after:h-1 after:bg-gradient-to-r after:from-green-500 after:to-blue-500">
                愿景使命
              </h2>
              <div className="space-y-4">
                <div>
                  <h3 className="text-xl font-semibold mb-2">愿景</h3>
                  <p className="text-gray-600">成为全球领先的环保科技创新企业</p>
                </div>
                <div>
                  <h3 className="text-xl font-semibold mb-2">使命</h3>
                  <p className="text-gray-600">用科技创新守护地球家园</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* 页脚 */}
      <footer className="bg-gray-900 text-white py-12">
        {/* 同首页页脚内容 */}
      </footer>
    </div>
  );
 } 
--- a/web/czr/app/routes/innovations.tsx
+++ b/web/czr/app/routes/innovations.tsx
@ -0,0 +1,157 @@
 import type { MetaFunction } from "@remix-run/node";
 import { ImageLoader } from "hooks/ParticleImage";
 import { useLoaderData } from "@remix-run/react";
 import { Carousel } from "~/components/Carousel";
 export const meta: MetaFunction = () => {
  return [
    { title: "创新技术 - 新纪元科技" },
    { name: "description", content: "新纪元科技的创新技术" },
  ];
 };
 export const loader = () => {
  return { 
    isClient: true,
    innovations: [
      {
        title: "智能环境监测",
        image: "/a1.jpg",
      },
      {
        title: "清洁能源技术",
        image: "/a2.jpg",
      },
      {
        title: "废物处理创新",
        image: "/a3.jpg",
      }
    ]
  };
 };
 export default function Innovations() {
  const { isClient, innovations } = useLoaderData<typeof loader>();
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-white text-gray-800">
      {/* 头部区域：标题 + 轮播图 */}
      <div className="relative bg-gradient-to-b from-green-50 to-blue-50/30 pt-16 pb-32 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4">
          {/* 标题部分 */}
          <div className="text-center mb-16">
            <h1 className="text-5xl font-bold bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
              创新技术
            </h1>
            <p className="text-gray-600 mt-6 text-lg max-w-2xl mx-auto">
              引领环保科技发展，推动行业技术革新
            </p>
          </div>
          {/* 轮播图部分 */}
          {isClient ? (
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-b from-transparent to-white/10 pointer-events-none" />
              <div className="flex justify-center">
                <div className="w-[600px]">
                  <Carousel
                    items={innovations.map((innovation) => ({
                      content: (
                        <div className="w-[600px] h-[400px] relative rounded-xl overflow-hidden">
                          <ImageLoader
                            src={innovation.image}
                            alt={innovation.title}
                            className="relative z-[1]"
                            containerClassName="w-full h-full"
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent z-[2]" />
                          <div className="absolute bottom-0 left-0 right-0 p-8 z-[3]">
                            <h3 className="text-white text-3xl font-bold mb-2">{innovation.title}</h3>
                            <p className="text-white/80 text-lg">探索环保科技的无限可能</p>
                          </div>
                        </div>
                      ),
                    }))}
                    interval={5000}
                  />
                </div>
              </div>
            </div>
          ) : (
            <div className="flex justify-center">
              <div className="w-[600px] h-[400px] bg-gray-100 rounded-xl" />
            </div>
          )}
        </div>
      </div>
      {/* 技术详情部分 */}
      <div className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-20">
            <span className="bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
              核心技术详解
            </span>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-lg p-8 shadow-lg transform transition-all duration-300 
              hover:-translate-y-2 hover:shadow-xl">
              <div className="bg-green-50 w-16 h-16 rounded-full flex items-center justify-center mb-6 
                transform transition-all duration-300 hover:scale-110 hover:rotate-12">
                <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-4 relative">
                <span className="relative z-10">AI环境优化</span>
                <span className="absolute bottom-0 left-0 w-full h-2 bg-green-100 transform -skew-x-12"></span>
              </h3>
              <p className="text-gray-600">
                运用人工智能技术，实现环境数据的智能分析和决策优化，提供精准的环境治理方案。
              </p>
            </div>
            <div className="bg-white rounded-lg p-8 shadow-lg transform transition-all duration-300 
              hover:-translate-y-2 hover:shadow-xl">
              <div className="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mb-6 
                transform transition-all duration-300 hover:scale-110 hover:rotate-12">
                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-4 relative">
                <span className="relative z-10">清洁能源转换</span>
                <span className="absolute bottom-0 left-0 w-full h-2 bg-blue-100 transform -skew-x-12"></span>
              </h3>
              <p className="text-gray-600">
                创新的能源转换技术，提高清洁能源利用效率，推动色能源革命。
              </p>
            </div>
            <div className="bg-white rounded-lg p-8 shadow-lg transform transition-all duration-300 
              hover:-translate-y-2 hover:shadow-xl">
              <div className="bg-purple-50 w-16 h-16 rounded-full flex items-center justify-center mb-6 
                transform transition-all duration-300 hover:scale-110 hover:rotate-12">
                <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-4 relative">
                <span className="relative z-10">生态修复系统</span>
                <span className="absolute bottom-0 left-0 w-full h-2 bg-purple-100 transform -skew-x-12"></span>
              </h3>
              <p className="text-gray-600">
                综合性生态环境修复解决方案，助力自然生态系统恢复与保护
              </p>
            </div>
          </div>
        </div>
      </div>
      {/* 页脚 */}
      <footer className="bg-gray-900 text-white py-12">
        {/* 同首页页脚内容 */}
      </footer>
    </div>
  );
 } 
--- a/web/czr/app/routes/solutions.tsx
+++ b/web/czr/app/routes/solutions.tsx
@ -0,0 +1,105 @@
 import type { MetaFunction } from "@remix-run/node";
 import { ImageLoader } from "hooks/ParticleImage";
 import { useLoaderData } from "@remix-run/react";
 export const meta: MetaFunction = () => {
  return [
    { title: "解决方案 - 新纪元科技" },
    { name: "description", content: "新纪元科技提供的环保科技解决方案" },
  ];
 };
 export const loader = () => {
  return { isClient: true };
 };
 export default function Solutions() {
  const { isClient } = useLoaderData<typeof loader>();
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-white text-gray-800">
      {/* 页面标题和轮播图 */}
      <div className="bg-gradient-to-r from-green-50 to-blue-50 py-20">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex flex-col items-center">
            {isClient ? (
              <div className="w-[60px] md:w-[70px] h-[60px] md:h-[70px]">
                {/* 轮播图代码从这里开始 */}
              </div>
            ) : (
              <div className="w-[60px] md:w-[70px] h-[60px] md:h-[70px] bg-gray-100 rounded-lg" />
            )}
            <h1 className="text-4xl font-bold text-center mt-8 bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
              解决方案
            </h1>
            <p className="text-center text-gray-600 mt-4 max-w-2xl mx-auto">
              为不同行业提供定制化的环保科技解决方案，助力企业实现可持续发展
            </p>
          </div>
        </div>
      </div>
      {/* 解决方案详情 */}
      <div className="py-20">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="bg-white rounded-lg p-8 shadow-lg transform transition-all duration-300 
              hover:-translate-y-2 hover:shadow-xl border border-transparent hover:border-green-100">
              <h2 className="text-2xl font-bold mb-6 relative inline-block">
                <span className="relative z-10">智慧城市解决方案</span>
                <span className="absolute bottom-0 left-0 w-full h-2 bg-green-100 transform -skew-x-12"></span>
              </h2>
              <div className="space-y-4">
                <p className="text-gray-600">通过智能技术优化城市环境管理</p>
                <ul className="space-y-2 text-gray-600">
                  <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">
                    • 智能环境监测系统
                  </li>
                  <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">
                    • 城市垃圾分类管理
                  </li>
                  <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">
                    • 智慧能源管理平台
                  </li>
                  <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">
                    • 城市空气质量优化
                  </li>
                </ul>
              </div>
            </div>
            <div className="bg-white rounded-lg p-8 shadow-lg transform transition-all duration-300 
              hover:-translate-y-2 hover:shadow-xl border border-transparent hover:border-green-100">
              <h2 className="text-2xl font-bold mb-6 relative inline-block">
                <span className="relative z-10">工业节能方案</span>
                <span className="absolute bottom-0 left-0 w-full h-2 bg-green-100 transform -skew-x-12"></span>
              </h2>
              <div className="space-y-4">
                <p className="text-gray-600">帮助工业企业实现节能减排</p>
                <ul className="space-y-2 text-gray-600">
                  <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">
                    • 工业能源审计
                  </li>
                  <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">
                    • 节能改造方案
                  </li>
                  <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">
                    • 废物循环利用
                  </li>
                  <li className="transition-all duration-200 hover:text-green-600 hover:translate-x-2">
                    • 清洁生产技术
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* 页脚 - 可以提取为共享组件 */}
      <footer className="bg-gray-900 text-white py-12">
        {/* 同首页页脚内容 */}
      </footer>
    </div>
  );
 } 
--- a/web/czr/app/styles/navigation.css
+++ b/web/czr/app/styles/navigation.css
@ -0,0 +1,5 @@
 .nav-logo svg {
  width: 120px;
  height: auto;
  color: #1a1a1a;
 } 
--- a/web/czr/hooks/ParticleImage.tsx
+++ b/web/czr/hooks/ParticleImage.tsx
@ -0,0 +1,711 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
 import * as THREE from 'three';
 import { gsap } from 'gsap';
 import throttle from 'lodash/throttle';
 interface HSL {
  h: number;
  s: number;
  l: number;
 }
 interface Particle {
  x: number;
  y: number;
  z: number;
  originalX: number;
  originalY: number;
  originalColor: THREE.Color;
  delay: number;
 }
 const createErrorParticles = (width: number, height: number) => {
  const particles: Particle[] = [];
  const positionArray: number[] = [];
  const colorArray: number[] = [];
  const errorColor = new THREE.Color(0.8, 0, 0);
  const size = Math.min(width, height);
  const scaleFactor = size * 0.3;
  const particlesPerLine = 50;
  // X 形状的两条线
  const lines = [
    // 左上到右下的线
    { start: [-1, 1], end: [1, -1] },
    // 右上到左下的线
    { start: [1, 1], end: [-1, -1] }
  ];
  lines.forEach(line => {
    for (let i = 0; i < particlesPerLine; i++) {
      const t = i / (particlesPerLine - 1);
      const x = line.start[0] + (line.end[0] - line.start[0]) * t;
      const y = line.start[1] + (line.end[1] - line.start[1]) * t;
      // 添加一些随机偏移
      const randomOffset = 0.1;
      const randomX = x + (Math.random() - 0.5) * randomOffset;
      const randomY = y + (Math.random() - 0.5) * randomOffset;
      const scaledX = randomX * scaleFactor;
      const scaledY = randomY * scaleFactor;
      particles.push({
        x: scaledX,
        y: scaledY,
        z: 0,
        originalX: scaledX,
        originalY: scaledY,
        originalColor: errorColor,
        delay: 0
      });
      // 修改初始位置生成方式
      const angle = Math.random() * Math.PI * 2;
      const distance = size * 2;
      positionArray.push(
        Math.cos(angle) * distance,
        Math.sin(angle) * distance,
        0
      );
      // 初始颜色设置为最终颜色的一半亮度
      colorArray.push(errorColor.r * 0.5, errorColor.g * 0.5, errorColor.b * 0.5);
    }
  });
  const particleSize = Math.max(1.2, (size / 200) * 1.2);
  return { particles, positionArray, colorArray, particleSize };
 };
 // 修改 createSmileParticles 函数
 const createSmileParticles = (width: number, height: number) => {
  const particles: Particle[] = [];
  const positionArray: number[] = [];
  const colorArray: number[] = [];
  const size = Math.min(width, height);
  const scale = size / 200;
  const radius = size * 0.35;
  const particleSize = Math.max(1.2, scale * 1.2);
  const particleColor = new THREE.Color(0.8, 0.6, 0);
  // 预先计算所有需要的粒子位置
  const allPoints: { x: number; y: number }[] = [];
  // 计算脸部轮廓的点
  const outlinePoints = Math.floor(60 * scale);
  for (let i = 0; i < outlinePoints; i++) {
    const angle = (i / outlinePoints) * Math.PI * 2;
    allPoints.push({
      x: Math.cos(angle) * radius,
      y: Math.sin(angle) * radius
    });
  }
  // 修改眼睛的生成方式
  const eyeOffset = radius * 0.3;
  const eyeY = radius * 0.15;
  const eyeSize = radius * 0.1; // 稍微减小眼睛尺寸
  const eyePoints = Math.floor(20 * scale);
  [-1, 1].forEach(side => {
    // 使用同心圆的方式生成眼睛
    const eyeCenterX = side * eyeOffset;
    const rings = 3; // 同心圆的数量
    for (let ring = 0; ring < rings; ring++) {
      const ringRadius = eyeSize * (1 - ring / rings); // 从外到内递减半径
      const pointsInRing = Math.floor(eyePoints / rings);
      for (let i = 0; i < pointsInRing; i++) {
        const angle = (i / pointsInRing) * Math.PI * 2;
        allPoints.push({
          x: eyeCenterX + Math.cos(angle) * ringRadius,
          y: eyeY + Math.sin(angle) * ringRadius
        });
      }
    }
    // 添加中心点
    allPoints.push({
      x: eyeCenterX,
      y: eyeY
    });
  });
  // 计算嘴巴的点
  const smileWidth = radius * 0.6;
  const smileY = -radius * 0.35;
  const smilePoints = Math.floor(25 * scale);
  for (let i = 0; i < smilePoints; i++) {
    const t = i / (smilePoints - 1);
    const x = (t * 2 - 1) * smileWidth;
    const y = smileY + Math.pow(x / smileWidth, 2) * radius * 0.2;
    allPoints.push({ x, y });
  }
  // 为所有点创建粒子
  allPoints.forEach(point => {
    particles.push({
      x: point.x,
      y: point.y,
      z: 0,
      originalX: point.x,
      originalY: point.y,
      originalColor: particleColor,
      delay: 0
    });
    // 生成初始位置（从外围圆形区域开始）
    const initAngle = Math.random() * Math.PI * 2;
    const distance = size * 2;
    positionArray.push(
      Math.cos(initAngle) * distance,
      Math.sin(initAngle) * distance,
      0
    );
    // 初始颜色设置为最终颜色的一半亮度
    colorArray.push(
      particleColor.r * 0.5,
      particleColor.g * 0.5,
      particleColor.b * 0.5
    );
  });
  return { particles, positionArray, colorArray, particleSize };
 };
 // 在文件开头添加新的 helper 函数
 const easeOutCubic = (t: number) => {
  return 1 - Math.pow(1 - t, 3);
 };
 const customEase = (t: number) => {
  return t < 0.5
    ? 4 * t * t * t
    : 1 - Math.pow(-2 * t + 2, 3) / 2;
 };
 // 在文件开头添加新的 LoaderStatus 接口
 interface LoaderStatus {
  isLoading: boolean;
  hasError: boolean;
  timeoutError: boolean;
  animationPhase: 'assembling' | 'image' | 'dissolving' | 'transitioning';
 }
 // 修改 ParticleImage 组件的 props 接口
 interface ParticleImageProps {
  src?: string;
  status?: LoaderStatus;
  onLoad?: () => void;
  onAnimationComplete?: () => void;
  transitionType?: 'in' | 'out' | 'none';
  previousParticles?: Particle[];
  onParticlesCreated?: (particles: Particle[]) => void;
  onAnimationPhaseChange?: (phase: 'assembling' | 'image' | 'dissolving' | 'transitioning') => void;
 }
 // 修改 BG_CONFIG
 const BG_CONFIG = {
  colors: {
    from: 'rgb(10,37,77)',
    via: 'rgb(8,27,57)', 
    to: 'rgb(2,8,23)'
  },
  className: 'bg-gradient-to-br from-[rgb(248,250,252)] via-[rgb(241,245,249)] to-[rgb(236,241,247)] dark:from-[rgb(10,37,77)] dark:via-[rgb(8,27,57)] dark:to-[rgb(2,8,23)]',
  size: {
    container: ''
  }
 };
 // 修改图像采样函数
 const createParticlesFromImage = (imageData: ImageData, width: number, height: number) => {
  const particles: Particle[] = [];
  const positionArray: number[] = [];
  const colorArray: number[] = [];
  // 根据容器尺寸计算缩放因子
  const aspectRatio = width / height;
  const scaleFactor = width / 2;  // 使用容器宽度的一半作为基准
  // 固定粒子数量以保持一致的视觉效果
  const particlesPerSide = Math.floor(Math.min(150, Math.max(80, Math.min(width, height) / 4))); 
  const stepX = width / particlesPerSide;
  const stepY = height / particlesPerSide;
  for (let y = 0; y < height; y += stepY) {
    for (let x = 0; x < width; x += stepX) {
      const pixelX = Math.floor(x);
      const pixelY = Math.floor(y);
      const i = (pixelY * width + pixelX) * 4;
      const r = imageData.data[i] / 255;
      const g = imageData.data[i + 1] / 255;
      const b = imageData.data[i + 2] / 255;
      // 计算亮度并设置最小值
      const brightness = Math.max(0.1, (r + g + b) / 3);
      // 将坐标映射到容器范围
      const px = ((x / width) * 2 - 1) * scaleFactor;
      const py = ((1 - y / height) * 2 - 1) * (scaleFactor / aspectRatio);
      // 创建粒子
      const finalColor = new THREE.Color(
        Math.max(0.1, r),
        Math.max(0.1, g),
        Math.max(0.1, b)
      );
      particles.push({
        x: px,
        y: py,
        z: 0,
        originalX: px,
        originalY: py,
        originalColor: finalColor,
        delay: Math.random() * 0.3
      });
      // 设置初始位置
      const angle = Math.random() * Math.PI * 2;
      const distance = Math.max(width, height);
      positionArray.push(
        Math.cos(angle) * distance,
        Math.sin(angle) * distance,
        0
      );
      // 设置初始颜色
      colorArray.push(
        finalColor.r * 0.3,
        finalColor.g * 0.3,
        finalColor.b * 0.3
      );
    }
  }
  // 调整粒子大小
  const particleSize = Math.max(2, Math.min(width, height) / 150);
  return { particles, positionArray, colorArray, particleSize };
 };
 // 优化动画效果
 const animateParticles = (
  particles: Particle[],
  geometry: THREE.BufferGeometry,
  onComplete?: () => void
 ) => {
  const positionAttribute = geometry.attributes.position;
  const colorAttribute = geometry.attributes.color;
  particles.forEach((particle, i) => {
    const i3 = i * 3;
    // 位置动画
    gsap.to(positionAttribute.array, {
      duration: 1 + Math.random() * 0.5,
      delay: particle.delay,
      [i3]: particle.originalX,
      [i3 + 1]: particle.originalY,
      [i3 + 2]: 0,
      ease: "power2.out",
      onUpdate: () => void (positionAttribute.needsUpdate = true)
    });
    // 颜色动画
    gsap.to(colorAttribute.array, {
      duration: 0.8,
      delay: particle.delay,
      [i3]: particle.originalColor.r,
      [i3 + 1]: particle.originalColor.g,
      [i3 + 2]: particle.originalColor.b,
      ease: "power2.inOut",
      onUpdate: () => {
        colorAttribute.needsUpdate = true;
        return;
      },
      onComplete: i === particles.length - 1 ? onComplete : undefined
    });
  });
 };
 export const ParticleImage = ({ 
  src, 
  status,
  onLoad,
  onAnimationComplete,
  transitionType = 'in',
  previousParticles,
  onParticlesCreated,
  onAnimationPhaseChange
 }: ParticleImageProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const sceneRef = useRef<THREE.Scene>();
  const cameraRef = useRef<THREE.OrthographicCamera>();
  const rendererRef = useRef<THREE.WebGLRenderer>();
  const animationFrameRef = useRef<number>();
  const geometryRef = useRef<THREE.BufferGeometry>();
  const materialRef = useRef<THREE.PointsMaterial>();
  const pointsRef = useRef<THREE.Points>();
  // 清理函数
  const cleanup = useCallback(() => {
    if (animationFrameRef.current) {
      cancelAnimationFrame(animationFrameRef.current);
    }
    // 清理 Three.js 资源
    if (geometryRef.current) {
      geometryRef.current.dispose();
    }
    if (materialRef.current) {
      materialRef.current.dispose();
    }
    if (pointsRef.current) {
      if (pointsRef.current.geometry) {
        pointsRef.current.geometry.dispose();
      }
      if (pointsRef.current.material instanceof THREE.Material) {
        pointsRef.current.material.dispose();
      }
      sceneRef.current?.remove(pointsRef.current);
    }
    if (rendererRef.current) {
      rendererRef.current.dispose();
      if (containerRef.current?.contains(rendererRef.current.domElement)) {
        containerRef.current.removeChild(rendererRef.current.domElement);
      }
    }
    // 清理 GSAP 动画
    gsap.killTweensOf('*');
  }, []);
  useEffect(() => {
    if (!containerRef.current || !src) return;
    const width = containerRef.current.offsetWidth;
    const height = containerRef.current.offsetHeight;
    // 建错误动画函数
    const showErrorAnimation = () => {
      if (!sceneRef.current) return;
      const { particles, positionArray, colorArray, particleSize } = createErrorParticles(width, height);
      // ... 其余错误动画代码 ...
    };
    const timeoutId = setTimeout(() => showErrorAnimation(), 5000);
    // 初始化场景
    const scene = new THREE.Scene();
    sceneRef.current = scene;
    // 调整相机视角
    const camera = new THREE.OrthographicCamera(
      width / -2,
      width / 2,
      height / 2,
      height / -2,
      1,
      1000
    );
    camera.position.z = 500;
    cameraRef.current = camera;
    const renderer = new THREE.WebGLRenderer({ 
      alpha: true,
      antialias: true 
    });
    renderer.setSize(width, height);
    rendererRef.current = renderer;
    containerRef.current.appendChild(renderer.domElement);
    // 加载图片
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      clearTimeout(timeoutId);
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (ctx) {
        // 计算目标尺寸和裁剪区域
        const targetAspect = width / height;
        const imgAspect = img.width / img.height;
        let sourceWidth = img.width;
        let sourceHeight = img.height;
        let sourceX = 0;
        let sourceY = 0;
        // 裁剪源图片，确保比例匹配目标容器
        if (imgAspect > targetAspect) {
          sourceWidth = img.height * targetAspect;
          sourceX = (img.width - sourceWidth) / 2;
        } else {
          sourceHeight = img.width / targetAspect;
          sourceY = (img.height - sourceHeight) / 2;
        }
        canvas.width = width;
        canvas.height = height;
        // 清除画布
        ctx.clearRect(0, 0, width, height);
        // 绘制图像
        ctx.drawImage(
          img,
          sourceX, sourceY, sourceWidth, sourceHeight,
          0, 0, width, height
        );
        const imageData = ctx.getImageData(0, 0, width, height);
        const { particles, positionArray, colorArray, particleSize } = createParticlesFromImage(imageData, width, height);
        // 通知父组件新的粒子已创建
        onParticlesCreated?.(particles);
        // 创建粒子系统
        const geometry = new THREE.BufferGeometry();
        geometryRef.current = geometry;
        const material = new THREE.PointsMaterial({
          size: particleSize,
          vertexColors: true,
          transparent: true,
          opacity: 1,
          sizeAttenuation: true,
          blending: THREE.AdditiveBlending,
          depthWrite: false,
          depthTest: false
        });
        materialRef.current = material;
        geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
        geometry.setAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
        const points = new THREE.Points(geometry, material);
        pointsRef.current = points;
        scene.add(points);
        // 动画分
        const timeline = gsap.timeline();
        const positionAttribute = geometry.attributes.position;
        const colorAttribute = geometry.attributes.color;
        // 立即执动画
        if (transitionType === 'in') {
          // 设置初始位置和颜色
          particles.forEach((particle, i) => {
            const i3 = i * 3;
            // 设置随机初始位置
            positionAttribute.array[i3] = (Math.random() - 0.5) * width * 2;
            positionAttribute.array[i3 + 1] = (Math.random() - 0.5) * height * 2;
            positionAttribute.array[i3 + 2] = Math.random() * 100;
            // 设置初始颜色
            colorAttribute.array[i3] = particle.originalColor.r * 0.2;
            colorAttribute.array[i3 + 1] = particle.originalColor.g * 0.2;
            colorAttribute.array[i3 + 2] = particle.originalColor.b * 0.2;
          });
          positionAttribute.needsUpdate = true;
          colorAttribute.needsUpdate = true;
          // 创建动画
          particles.forEach((particle, i) => {
            const i3 = i * 3;
            // 位置动画
            gsap.to(positionAttribute.array, {
              duration: 2,
              delay: particle.delay,
              [i3]: particle.originalX,
              [i3 + 1]: particle.originalY,
              [i3 + 2]: 0,
              ease: "power2.inOut",
              onUpdate: () => { positionAttribute.needsUpdate = true; }
            });
            // 颜色动画
            gsap.to(colorAttribute.array, {
              duration: 1.8,
              delay: particle.delay + 0.2,
              [i3]: particle.originalColor.r,
              [i3 + 1]: particle.originalColor.g,
              [i3 + 2]: particle.originalColor.b,
              ease: "power2.inOut",
              onUpdate: () => { colorAttribute.needsUpdate = true; }
            });
          });
        } else if (transitionType === 'out') {
          particles.forEach((particle, i) => {
            const i3 = i * 3;
            gsap.to(colorAttribute.array, {
              duration: 1,
              [i3]: particle.originalColor.r * 0.2,
              [i3 + 1]: particle.originalColor.g * 0.2,
              [i3 + 2]: particle.originalColor.b * 0.2,
              ease: "power2.in",
              onUpdate: () => {
                colorAttribute.needsUpdate = true;
              }
            });
          });
        }
        // 画循环
        const animate = () => {
          animationFrameRef.current = requestAnimationFrame(animate);
          renderer.render(scene, camera);
        };
        animate();
        onLoad?.();
      }
    };
    img.src = src;
    return () => {
      clearTimeout(timeoutId);
      cleanup();
    };
  }, [src, cleanup, onLoad, onAnimationComplete, transitionType, previousParticles, onParticlesCreated]);
  return <div ref={containerRef} className="w-full h-full" />;
 };
 // 修改 ImageLoader 组件的 props 接口
 interface ImageLoaderProps {
  src?: string;
  alt: string;
  className?: string;
  containerClassName?: string;  // 新增容器类名属性
 }
 // 修改 ImageLoader 组件
 export const ImageLoader = ({ src, alt, className = '', containerClassName = '' }: ImageLoaderProps) => {
  const [status, setStatus] = useState<LoaderStatus>({
    isLoading: true,
    hasError: false,
    timeoutError: false,
    animationPhase: 'assembling'
  });
  const [showImage, setShowImage] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout>();
  const loadingRef = useRef(false);
  const imageRef = useRef<HTMLImageElement | null>(null);
  const [currentParticles, setCurrentParticles] = useState<Particle[]>([]);
  // 动画循环
  const startAnimationCycle = useCallback(async () => {
    while (true) {
      // 1. 粒子组合成图像
      setStatus(prev => ({ ...prev, animationPhase: 'assembling' }));
      setShowImage(false);
      await new Promise(resolve => setTimeout(resolve, 2500));
      // 2. 显示实际图片
      setShowImage(true);
      await new Promise(resolve => setTimeout(resolve, 3000));
      // 3. 隐藏图片，显示粒子
      setShowImage(false);
      setStatus(prev => ({ ...prev, animationPhase: 'dissolving' }));
      await new Promise(resolve => setTimeout(resolve, 3000));
      // 4. 粒子过渡状态
      setStatus(prev => ({ ...prev, animationPhase: 'transitioning' }));
      await new Promise(resolve => setTimeout(resolve, 1500));
    }
  }, []);
  // 处理图片预加载
  const preloadImage = useCallback(() => {
    if (!src || loadingRef.current) return;
    loadingRef.current = true;
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      imageRef.current = img;
      setStatus(prev => ({
        ...prev,
        isLoading: false,
        hasError: false,
        timeoutError: false
      }));
      startAnimationCycle();
    };
    img.onerror = () => {
      setStatus(prev => ({
        ...prev,
        isLoading: false,
        hasError: true,
        timeoutError: false
      }));
    };
    img.src = src;
  }, [src, startAnimationCycle]);
  useEffect(() => {
    preloadImage();
    return () => {
      loadingRef.current = false;
    };
  }, [preloadImage]);
  return (
    <div className={`relative shrink-0 overflow-hidden ${containerClassName}`}>
      <div className={`absolute inset-0 ${BG_CONFIG.className} rounded-lg overflow-hidden`}>
        <ParticleImage 
          src={src} 
          status={status}
          onParticlesCreated={setCurrentParticles}
          onAnimationPhaseChange={(phase) => {
            setStatus(prev => ({ ...prev, animationPhase: phase }));
          }}
        />
      </div>
      {!status.hasError && !status.timeoutError && imageRef.current && (
        <div className="absolute inset-0 rounded-lg overflow-hidden">
          <img 
            src={imageRef.current.src}
            alt={alt}
            className={`
              w-full h-full object-cover
              transition-opacity duration-1000
              ${className}
              ${showImage ? 'opacity-100' : 'opacity-0'}
            `}
            style={{ 
              visibility: showImage ? 'visible' : 'hidden',
              objectFit: 'cover',
              objectPosition: 'center'
            }}
          />
        </div>
      )}
    </div>
  );
 };
--- a/web/czr/hooks/error.tsx
+++ b/web/czr/hooks/error.tsx
@ -0,0 +1,42 @@
 import React, { useState, useEffect } from "react";
 import { Template } from "interface/template";
 export default new Template({}, ({ args }) => {
  const [text, setText] = useState("");
  const fullText = "404 - 页面不见了 :(";
  const typingSpeed = 100;
  useEffect(() => {
    let currentIndex = 0;
    const typingEffect = setInterval(() => {
      if (currentIndex < fullText.length) {
        setText(fullText.slice(0, currentIndex + 1));
        currentIndex++;
      } else {
        clearInterval(typingEffect);
      }
    }, typingSpeed);
    return () => clearInterval(typingEffect);
  }, []);
  return (
    <div className="min-h-screen flex items-center justify-center bg-[--background] transition-colors duration-300">
      <div className="text-center">
        <h1 className="text-6xl font-bold text-[--foreground] mb-4">
          {text}
          <span className="animate-pulse">|</span>
        </h1>
        <p className="text-[--muted-foreground] text-xl">
          抱歉，您访问的页面已经离家出走了
        </p>
        <button
          onClick={() => (window.location.href = "/")}
          className="mt-8 px-6 py-3 bg-[--primary] hover:bg-[--primary-foreground] text-[--primary-foreground] hover:text-[--primary] rounded-lg transition-colors duration-300"
        >
          返回首页
        </button>
      </div>
    </div>
  );
 });
--- a/web/czr/hooks/loading.tsx
+++ b/web/czr/hooks/loading.tsx
@ -0,0 +1,103 @@
 import React, { createContext, useState, useContext } from "react";
 interface LoadingContextType {
  isLoading: boolean;
  showLoading: () => void;
  hideLoading: () => void;
 }
 const LoadingContext = createContext<LoadingContextType>({
  isLoading: false,
  showLoading: () => {},
  hideLoading: () => {},
 });
 export const LoadingProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
 }) => {
  const [isLoading, setIsLoading] = useState(false);
  const showLoading = () => setIsLoading(true);
  const hideLoading = () => setIsLoading(false);
  return (
    <LoadingContext.Provider value={{ isLoading, showLoading, hideLoading }}>
      {children}
      {isLoading && (
        <div className="fixed inset-0 flex flex-col items-center justify-center bg-black/25 dark:bg-black/40 z-[999999]">
          <div className="loading-spinner mb-2" />
          <div className="text-custom-p-light dark:text-custom-p-dark text-sm">
            加载中...
          </div>
        </div>
      )}
      <style>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
        .loading-spinner {
          width: 30px;
          height: 30px;
          border: 3px solid rgba(59, 130, 246, 0.2);
          border-radius: 50%;
          border-top-color: #3B82F6;
          animation: spin 0.8s linear infinite;
        }
        .dark .loading-spinner {
          border: 3px solid rgba(96, 165, 250, 0.2);
          border-top-color: #60A5FA;
        }
      `}</style>
    </LoadingContext.Provider>
  );
 };
 // 全局loading实例
 let globalShowLoading: (() => void) | null = null;
 let globalHideLoading: (() => void) | null = null;
 export const LoadingContainer: React.FC = () => {
  const { showLoading, hideLoading } = useContext(LoadingContext);
  React.useEffect(() => {
    globalShowLoading = showLoading;
    globalHideLoading = hideLoading;
    return () => {
      globalShowLoading = null;
      globalHideLoading = null;
    };
  }, [showLoading, hideLoading]);
  return null;
 };
 // 导出loading方法
 export const loading = {
  show: () => {
    if (!globalShowLoading) {
      console.warn("Loading system not initialized");
      return;
    }
    globalShowLoading();
  },
  hide: () => {
    if (!globalHideLoading) {
      console.warn("Loading system not initialized");
      return;
    }
    globalHideLoading();
  },
 };
--- a/web/czr/hooks/notification.tsx
+++ b/web/czr/hooks/notification.tsx
@ -0,0 +1,182 @@
 // @ts-nocheck
 import React, { createContext, useState, useContext } from "react";
 import { Button, Flex, Card, Text, Box } from "@radix-ui/themes";
 import {
  CheckCircledIcon,
  CrossCircledIcon,
  InfoCircledIcon,
 } from "@radix-ui/react-icons";
 // 定义通知类型枚举
 export enum NotificationType {
  SUCCESS = "success",
  ERROR = "error",
  INFO = "info",
 }
 // 通知类型定义
 type Notification = {
  id: string;
  type: NotificationType;
  title: string;
  message?: string;
 };
 // 通知配置类型定义
 type NotificationConfig = {
  icon: React.ReactNode;
  bgColor: string;
 };
 // 通知配置映射
 const notificationConfigs: Record<NotificationType, NotificationConfig> = {
  [NotificationType.SUCCESS]: {
    icon: <CheckCircledIcon className="w-5 h-5 text-white" />,
    bgColor: "bg-[rgba(0,168,91,0.85)]",
  },
  [NotificationType.ERROR]: {
    icon: <CrossCircledIcon className="w-5 h-5 text-white" />,
    bgColor: "bg-[rgba(225,45,57,0.85)]",
  },
  [NotificationType.INFO]: {
    icon: <InfoCircledIcon className="w-5 h-5 text-white" />,
    bgColor: "bg-[rgba(38,131,255,0.85)]",
  },
 };
 // 修改通知上下文类型定义
 type NotificationContextType = {
  show: (type: NotificationType, title: string, message?: string) => void;
  success: (title: string, message?: string) => void;
  error: (title: string, message?: string) => void;
  info: (title: string, message?: string) => void;
 };
 const NotificationContext = createContext<NotificationContextType>({
  show: () => {},
  success: () => {},
  error: () => {},
  info: () => {},
 });
 // 简化全局 toast 对象定义
 export const toast: NotificationContextType = {
  show: () => {},
  success: () => {},
  error: () => {},
  info: () => {},
 };
 export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
 }) => {
  const [notifications, setNotifications] = useState<Notification[]>([]);
  // 统一参数顺序：title 在前，message 在后
  const show = (type: NotificationType, title: string, message?: string) => {
    const id = Math.random().toString(36).substring(2, 9);
    const newNotification = { id, type, title, message };
    setNotifications((prev) => [...prev, newNotification]);
    setTimeout(() => {
      setNotifications((prev) =>
        prev.filter((notification) => notification.id !== id),
      );
    }, 3000);
  };
  // 简化快捷方法定义
  const contextValue = {
    show,
    success: (title: string, message?: string) =>
      show(NotificationType.SUCCESS, title, message),
    error: (title: string, message?: string) =>
      show(NotificationType.ERROR, title, message),
    info: (title: string, message?: string) =>
      show(NotificationType.INFO, title, message),
  };
  // 初始化全局方法
  React.useEffect(() => {
    Object.assign(toast, contextValue);
  }, []);
  const closeNotification = (id: string) => {
    setNotifications((prev) =>
      prev.filter((notification) => notification.id !== id),
    );
  };
  return (
    <NotificationContext.Provider value={contextValue}>
      {notifications.length > 0 && (
        <Box
          position="fixed"
          top="4"
          className="fixed top-4 right-4 z-[1000] flex flex-col gap-2 w-full max-w-[360px] px-4 md:px-0 md:right-6"
        >
          {notifications.map((notification) => (
            <Card
              key={notification.id}
              className="p-0 overflow-hidden shadow-lg w-full"
            >
              <Flex
                direction="column"
                gap="2"
                className={`relative min-h-[52px] p-4 ${notificationConfigs[notification.type].bgColor}`}
              >
                <Button
                  variant="ghost"
                  onClick={() => closeNotification(notification.id)}
                  className="absolute right-2 top-2 p-1 min-w-0 h-auto text-white opacity-70 cursor-pointer bg-transparent border-none text-sm hover:opacity-100 transition-opacity"
                >
                  ✕
                </Button>
                <Flex direction="column" gap="1.5" className="pr-6">
                  <Flex align="center" gap="2">
                    <span className="flex items-center justify-center">
                      {notificationConfigs[notification.type].icon}
                    </span>
                    {notification.title && (
                      <Text
                        weight="bold"
                        size="2"
                        className="text-white leading-tight"
                      >
                        {notification.title}
                      </Text>
                    )}
                  </Flex>
                  <Text size="2" className="text-white/80 leading-normal">
                    {notification.message}
                  </Text>
                </Flex>
                <div className="h-0.5 w-full bg-white/10 mt-1">
                  <div
                    className="h-full bg-white/20 animate-[progress_3s_linear]"
                    style={{
                      transformOrigin: "left",
                    }}
                  />
                </div>
              </Flex>
            </Card>
          ))}
        </Box>
      )}
      {children}
    </NotificationContext.Provider>
  );
 };
 // 导出hook
 export const useNotification = () => {
  const context = useContext(NotificationContext);
  if (!context) {
    throw new Error(
      "useNotification must be used within a NotificationProvider",
    );
  }
  return context;
 };
--- a/web/czr/hooks/themeMode.tsx
+++ b/web/czr/hooks/themeMode.tsx
@ -0,0 +1,133 @@
 import React, { useState, useEffect } from "react";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { Button } from "@radix-ui/themes";
 const THEME_KEY = "theme-preference";
 // 添加这个脚本来预先设置主题，避免闪烁
 const themeScript = `
  (function() {
    function getInitialTheme() {
      const savedTheme = localStorage.getItem("${THEME_KEY}");
      if (savedTheme) return savedTheme;
      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
      const theme = isDark ? "dark" : "light";
      localStorage.setItem("${THEME_KEY}", theme);
      return theme;
    }
    document.documentElement.className = getInitialTheme();
  })()
 `;
 export const ThemeScript = () => {
  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
 };
 export const ThemeModeToggle: React.FC = () => {
  const [isDark, setIsDark] = useState<boolean | null>(null);
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const savedTheme = localStorage.getItem(THEME_KEY);
      const initialIsDark = savedTheme === 'dark' || document.documentElement.className === 'dark';
      setIsDark(initialIsDark);
    }
  }, []);
  useEffect(() => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === 'class') {
          const isDarkTheme = document.documentElement.className === 'dark';
          setIsDark(isDarkTheme);
        }
      });
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  const toggleTheme = () => {
    if (isDark === null) return;
    const newIsDark = !isDark;
    setIsDark(newIsDark);
    const newTheme = newIsDark ? "dark" : "light";
    document.documentElement.className = newTheme;
    localStorage.setItem(THEME_KEY, newTheme);
  };
  if (isDark === null) {
    return (
      <Button
        variant="ghost"
        className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
        aria-label="Loading theme"
      >
        <MoonIcon className="w-full h-full" />
      </Button>
    );
  }
  return (
    <Button
      variant="ghost"
      onClick={toggleTheme}
      className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
      aria-label="Toggle theme"
    >
      {isDark ? (
        <SunIcon className="w-full h-full" />
      ) : (
        <MoonIcon className="w-full h-full" />
      )}
    </Button>
  );
 };
 // 更新类型定义
 declare global {
  interface Window {
    __THEME__?: "light" | "dark";
  }
 }
 export const useThemeMode = () => {
  const [mode, setMode] = useState<"light" | "dark">("light");
  useEffect(() => {
    if (typeof window !== "undefined") {
      const saved = localStorage.getItem(THEME_KEY);
      if (saved) {
        setMode(saved as "light" | "dark");
      } else {
        const isDark = window.matchMedia(
          "(prefers-color-scheme: dark)",
        ).matches;
        setMode(isDark ? "dark" : "light");
      }
      // 监听主题变化事件
      const handleThemeChange = (e: CustomEvent) => {
        setMode(e.detail.theme);
      };
      window.addEventListener(
        "theme-change",
        handleThemeChange as EventListener,
      );
      return () =>
        window.removeEventListener(
          "theme-change",
          handleThemeChange as EventListener,
        );
    }
  }, []);
  return { mode };
 };
--- a/web/czr/index.html
+++ b/web/czr/index.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Remix App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/entry.client.tsx"></script>
  </body>
 </html> 
--- a/web/czr/package.json
+++ b/web/czr/package.json
@ -0,0 +1,81 @@
 {
  "name": "frontend",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "dev": "remix vite:dev",
    "build": "vite build",
    "preview": "vite preview",
    "serve:static": "node server/static.js",
    "typecheck": "tsc",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "format": "prettier --write .",
    "clean": "rm -rf dist",
    "start": "node server/static.js",
    "generate:html": "node server/entry.server.js"
  },
  "dependencies": {
    "@heroicons/react": "^2.2.0",
    "@radix-ui/react-icons": "^1.3.2",
    "@radix-ui/themes": "^3.1.6",
    "@remix-run/node": "^2.14.0",
    "@remix-run/react": "^2.14.0",
    "@remix-run/serve": "^2.14.0",
    "@tailwindcss/typography": "^0.5.15",
    "@types/axios": "^0.14.4",
    "@types/react-syntax-highlighter": "^15.5.13",
    "@types/three": "^0.170.0",
    "axios": "^1.7.7",
    "bootstrap-icons": "^1.11.3",
    "cors": "^2.8.5",
    "express": "^4.21.1",
    "gsap": "^3.12.5",
    "html-react-parser": "^5.1.19",
    "isbot": "^4.1.0",
    "r": "^0.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^9.0.1",
    "react-syntax-highlighter": "^15.6.1",
    "rehype-raw": "^7.0.0",
    "three": "^0.171.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.14.0",
    "@types/cors": "^2.8.17",
    "@types/express": "^5.0.0",
    "@types/lodash": "^4.17.13",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "concurrently": "^9.1.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.57.1",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.38",
    "prettier": "^3.3.3",
    "tailwindcss": "^3.4.4",
    "tsx": "^4.19.2",
    "typescript": "^5.1.6",
    "vite": "^5.4.11",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=20.0.0"
  },
  "markdownlint-config": {
    "$schema": null
  },
  "remix": {
    "future": {
      "v3_lazyRouteDiscovery": true
    }
  }
 }
--- a/web/czr/postcss.config.js
+++ b/web/czr/postcss.config.js
@ -0,0 +1,6 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 };
--- a/web/czr/server/entry.server.js
+++ b/web/czr/server/entry.server.js
@ -0,0 +1,42 @@
 import { renderToString } from 'react-dom/server';
 import { RemixServer } from '@remix-run/react';
 import { createReadStream, createWriteStream } from 'fs';
 import { mkdir } from 'fs/promises';
 import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const projectRoot = resolve(__dirname, '..');
 async function generateHTML() {
  try {
    const distDir = resolve(projectRoot, 'dist');
    await mkdir(distDir, { recursive: true });
    const html = `
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/assets/index.js"></script>
  </body>
 </html>`;
    const indexPath = resolve(distDir, 'index.html');
    const writer = createWriteStream(indexPath);
    writer.write(html);
    writer.end();
    console.log('HTML file generated successfully at:', indexPath);
  } catch (error) {
    console.error('Error generating HTML:', error);
    process.exit(1);
  }
 }
 generateHTML(); 
--- a/web/czr/server/env.ts
+++ b/web/czr/server/env.ts
@ -0,0 +1,32 @@
 import fs from "fs/promises";
 import path from "path";
 export async function readEnvFile() {
  const envPath = path.resolve(process.cwd(), ".env");
  try {
    const content = await fs.readFile(envPath, "utf-8");
    return content.split("\n").reduce(
      (acc, line) => {
        const [key, value] = line.split("=").map((s) => s.trim());
        if (key && value) {
          acc[key] = value.replace(/["']/g, "");
        }
        return acc;
      },
      {} as Record<string, string>,
    );
  } catch {
    return {};
  }
 }
 export async function writeEnvFile(env: Record<string, string>) {
  const envPath = path.resolve(process.cwd(), ".env");
  const content = Object.entries(env)
    .map(
      ([key, value]) =>
        `${key}=${typeof value === "string" ? `"${value}"` : value}`,
    )
    .join("\n");
  await fs.writeFile(envPath, content, "utf-8");
 }
--- a/web/czr/server/express.ts
+++ b/web/czr/server/express.ts
@ -0,0 +1,71 @@
 import express from "express";
 import cors from "cors";
 import { DEFAULT_CONFIG } from "../app/env";
 import { readEnvFile, writeEnvFile } from "./env";
 const app = express();
 const address = process.env.VITE_ADDRESS ?? DEFAULT_CONFIG.VITE_ADDRESS;
 const port = Number(process.env.VITE_PORT ?? DEFAULT_CONFIG.VITE_PORT);
 const ALLOWED_ORIGIN = `http://${address}:${port}`;
 // 配置 CORS，只允许来自 Vite 服务器的请求
 app.use(
  cors({
    origin: (origin, callback) => {
      if (!origin || origin === ALLOWED_ORIGIN) {
        callback(null, true);
      } else {
        callback(new Error("不允许的来源"));
      }
    },
    credentials: true,
  }),
 );
 // 添加 IP 和端口检查中间件
 const checkAccessMiddleware = (
  req: express.Request,
  res: express.Response,
  next: express.NextFunction,
 ) => {
  const clientIp = req.ip === "::1" ? "localhost" : req.ip;
  const clientPort = Number(req.get("origin")?.split(":").pop() ?? 0);
  const isLocalIp = clientIp === "localhost" || clientIp === "127.0.0.1";
  const isAllowedPort = clientPort === port;
  if (isLocalIp && isAllowedPort) {
    next();
  } else {
    res.status(403).json({
      error: "禁止访问",
      detail: `仅允许 ${address}:${port} 访问`,
    });
  }
 };
 app.use(checkAccessMiddleware);
 app.use(express.json());
 app.get("/env", async (req, res) => {
  try {
    const envData = await readEnvFile();
    res.json(envData);
  } catch (error) {
    res.status(500).json({ error: "读取环境变量失败" });
  }
 });
 app.post("/env", async (req, res) => {
  try {
    const newEnv = req.body;
    await writeEnvFile(newEnv);
    res.json({ success: true });
  } catch (error) {
    res.status(500).json({ error: "更新环境变量失败" });
  }
 });
 app.listen(port + 1, address, () => {
  console.log(`内部服务器运行在 http://${address}:${port + 1}`);
 });
--- a/web/czr/server/production.js
+++ b/web/czr/server/production.js
@ -0,0 +1,23 @@
 import express from 'express';
 import { createRequestHandler } from "@remix-run/express";
 import * as build from "../build/server/index.js";
 const app = express();
 // 静态文件服务
 app.use(express.static("public"));
 app.use(express.static("build/client"));
 // Remix 请求处理
 app.all(
  "*",
  createRequestHandler({
    build,
    mode: "production",
  })
 );
 const port = process.env.PORT || 3000;
 app.listen(port, () => {
  console.log(`Express server listening on port ${port}`);
 }); 
--- a/web/czr/server/static.js
+++ b/web/czr/server/static.js
@ -0,0 +1,31 @@
 import express from 'express';
 import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const projectRoot = resolve(__dirname, '..');
 const app = express();
 const port = process.env.PORT || 3000;
 // 设置静态文件目录
 app.use(express.static(resolve(projectRoot, 'dist')));
 // 所有路由都返回 index.html
 app.get('*', (req, res) => {
  res.sendFile(resolve(projectRoot, 'dist', 'index.html'));
 });
 // 确保dist目录存在
 import { mkdir } from 'fs/promises';
 try {
  await mkdir(resolve(projectRoot, 'dist'), { recursive: true });
 } catch (error) {
  console.error('Error creating dist directory:', error);
 }
 app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
  console.log('Static files directory:', resolve(projectRoot, 'dist'));
  console.log('Index file path:', resolve(projectRoot, 'dist', 'index.html'));
 }); 
--- a/web/czr/src/entry.client.tsx
+++ b/web/czr/src/entry.client.tsx
@ -0,0 +1,7 @@
 import { RemixBrowser } from "@remix-run/react";
 import { startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
 startTransition(() => {
  hydrateRoot(document, <RemixBrowser />);
 }); 
--- a/web/czr/start.bat
+++ b/web/czr/start.bat
@ -0,0 +1,79 @@
@echo off
 title CZR启动程序
 echo 正在启动程序...
 :: 创建日志文件
 echo %date% %time% > startup_log.txt
 echo =============== 启动日志 =============== >> startup_log.txt
 :: 获取批处理文件所在目录
 cd /d "%~dp0"
 echo 当前目录: %CD% >> startup_log.txt
 :: 检查czr目录是否存在
 if not exist "czr" (
    echo 错误：找不到czr文件夹！ >> startup_log.txt
    echo 错误：找不到czr文件夹！
    echo 当前目录是：%CD%
    echo 请确保start.bat文件与czr文件夹在同一目录
    type startup_log.txt
    pause
    exit /b 1
 )
 :: 切换到czr目录
 cd czr
 echo 已进入czr目录: %CD% >> startup_log.txt
 :: 检查package.json是否存在
 if not exist "package.json" (
    echo 错误：在czr目录中找不到package.json文件！ >> startup_log.txt
    echo 错误：在czr目录中找不到package.json文件！
    echo 当前目录是：%CD%
    type startup_log.txt
    pause
    exit /b 1
 )
 :: 检查是否安装了Node.js
 where npm >nul 2>nul
 if %ERRORLEVEL% neq 0 (
    echo 错误：未安装Node.js或npm！ >> startup_log.txt
    echo 错误：未安装Node.js或npm！
    echo 请先安装Node.js: https://nodejs.org/
    type startup_log.txt
    pause
    exit /b 1
 )
 :: 检查node_modules是否存在
 if not exist "node_modules" (
    echo node_modules文件夹不存在，正在安装依赖... >> startup_log.txt
    echo node_modules文件夹不存在，正在安装依赖...
    call npm install
    if %ERRORLEVEL% neq 0 (
        echo npm install 失败！ >> startup_log.txt
        echo npm install 失败！
        type startup_log.txt
        pause
        exit /b 1
    )
 )
 :: 执行npm run start
 echo 正在执行 npm run start... >> startup_log.txt
 echo 正在执行 npm run start...
 call npm run start
 :: 如果npm命令执行失败
 if %ERRORLEVEL% neq 0 (
    echo 执行npm run start时出错！ >> startup_log.txt
    echo 执行npm run start时出错！
    echo 错误代码：%ERRORLEVEL%
    type startup_log.txt
    pause
    exit /b 1
 )
 type startup_log.txt
 pause 
--- a/web/czr/styles/echoes.css
+++ b/web/czr/styles/echoes.css
@ -0,0 +1,88 @@
 .animated-text {
    max-width: 100%;
    height: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .animated-text path {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 2;
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
    animation: logo-anim 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: center;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation-play-state: running !important;
    will-change: transform;
  }
  @keyframes logo-anim {
    0% {
      stroke-dashoffset: var(--path-length);
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
      opacity: 0;
    }
    5% {
      opacity: 1;
      stroke-dashoffset: var(--path-length);
      stroke-dasharray: var(--path-length) var(--path-length);
    }
    50% {
      stroke-dashoffset: 0;
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
    }
    60%, 75% {
      stroke-dashoffset: 0;
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: currentColor;
      opacity: 1;
    }
    85% {
      stroke-dashoffset: 0;
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
      opacity: 1;
    }
    95% {
      stroke-dashoffset: var(--path-length);
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
      opacity: 1;
    }
    100% {
      stroke-dashoffset: var(--path-length);
      stroke-dasharray: var(--path-length) var(--path-length);
      fill: transparent;
      opacity: 0;
    }
  }
  @media (prefers-color-scheme: dark) {
    .animated-text path {
      stroke: currentColor;
    }
  }
  @media (hover: none) and (pointer: coarse) {
    .animated-text {
      touch-action: manipulation;
      cursor: pointer;
    }
  }
--- a/web/czr/tailwind.config.ts
+++ b/web/czr/tailwind.config.ts
@ -0,0 +1,36 @@
 import type { Config } from "tailwindcss";
 import typography from '@tailwindcss/typography';
 export default {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./common/**/*.{js,jsx,ts,tsx}",
    "./core/**/*.{js,jsx,ts,tsx}",
    "./hooks/**/*.{js,jsx,ts,tsx}",
    "./themes/**/*.{js,jsx,ts,tsx}",
  ],
  darkMode: 'class',
  important: true,
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
      },
      keyframes: {
        progress: {
          from: { transform: "scaleX(1)" },
          to: { transform: "scaleX(0)" },
        },
      },
      animation: {
        progress: "progress 3s linear",
      },
      zIndex: {
        "-10": "-10",
      },
    },
  },
  plugins: [
    typography,
  ],
 } satisfies Config;
--- a/web/czr/tsconfig.json
+++ b/web/czr/tsconfig.json
@ -0,0 +1,32 @@
 {
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["app/*"]
    },
    // Vite takes care of building everything, not tsc.
    "noEmit": true
  }
 }
--- a/web/czr/vite.config.ts
+++ b/web/czr/vite.config.ts
@ -0,0 +1,39 @@
 import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
      }
    }),
    tsconfigPaths(),
  ],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: [
            'react',
            'react-dom',
            'three',
            'gsap'
          ],
          ui: ['@radix-ui/themes', '@radix-ui/react-icons'],
        },
        assetFileNames: 'assets/[name]-[hash][extname]',
        chunkFileNames: 'assets/[name]-[hash].js',
        entryFileNames: 'assets/[name]-[hash].js'
      }
    }
  },
  base: '',
 })
		`@ -0,0 +1,2 @@`
							`import './Parallax.css';`
							`export declare const Parallax: () => import("react/jsx-runtime").JSX.Element;`
		`@ -0,0 +1 @@`
							`{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/imagemodal.tsx","./src/components/parallax.tsx"],"errors":true,"version":"5.6.3"}`
		`@ -0,0 +1 @@`
							`{"root":["./vite.config.ts"],"errors":true,"version":"5.6.3"}`
		`@ -0,0 +1,2 @@`
							`declare const _default: import("vite").UserConfig;`
							`export default _default;`