Skip to content

Commit 03c5404

Browse files
freeshineitfreeshineit
committed
feat: update demo
1 parent 44e33ca commit 03c5404

38 files changed

+1237
-74
lines changed

‎examples/with-react-vite/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"classnames": "^2.5.1",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
16+
"react-router-dom": "^6.23.0",
1617
"@ezuikit/control-date-picker": "workspace:*",
1718
"@ezuikit/control-ptz": "workspace:*",
1819
"@ezuikit/control-aichat": "workspace:*",
@@ -32,7 +33,8 @@
3233
"pretty-quick": "^4.0.0",
3334
"terser": "^5.36.0",
3435
"typescript": "5.3.3",
35-
"vite": "5.4.10"
36+
"vite": "5.4.10",
37+
"vite-plugin-require-transform": "^1.0.21"
3638
},
3739
"engines": {
3840
"node": ">=18"

‎examples/with-react-vite/src/index.css‎

Lines changed: 7 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,7 @@
1-
html,body {
2-
padding: 0;
3-
margin: 0;
4-
}
5-
6-
7-
#root {
8-
display: flex;
9-
flex-direction: column;
10-
justify-content: center;
11-
align-items: center;
12-
}
13-
14-
.player-wrapper {
15-
display: flex;
16-
flex-direction: column;
17-
justify-content: center;
18-
width: 600px;
19-
}
20-
21-
#player-container {
22-
width: 600px;
23-
height: 400px;
24-
background-color: #000;
25-
}
26-
27-
28-
.form {
29-
display: flex;
30-
flex-direction: column;
31-
padding: 20px 0;
32-
}
33-
34-
.form input:not([type="checkbox"]) {
35-
width: 490px;
36-
max-width: 100%;
37-
}
38-
39-
.form-item {
40-
margin-bottom: 5px;
41-
label {
42-
width: 100px;
43-
display: inline-flex;
44-
}
45-
}
1+
* { margin: 0; padding: 0; box-sizing: border-box; }
2+
.app { display: flex; min-height: 100vh; }
3+
.sidebar { width: 220px; padding: 16px; background: #f5f5f5; display: flex; flex-direction: column; gap: 8px; }
4+
.sidebar h3 { margin-bottom: 8px; }
5+
.sidebar a { text-decoration: none; color: #333; padding: 8px 12px; border-radius: 4px; }
6+
.sidebar a:hover, .sidebar a.active { background: #1890ff; color: #fff; }
7+
.content { flex: 1; padding: 24px; }

‎examples/with-react-vite/src/index.tsx‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,49 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
3+
import { HashRouter, Routes, Route, NavLink } from "react-router-dom";
4+
import "./index.css";
5+
6+
import Home from "./pages/Home";
7+
import DatePickerDemo from "./pages/DatePickerDemo";
8+
import PtzDemo from "./pages/PtzDemo";
9+
import AIChatDemo from "./pages/AIChatDemo";
10+
import TalkDemo from "./pages/TalkDemo";
11+
import TimeLineDemo from "./pages/TimeLineDemo";
12+
import ZoomDemo from "./pages/ZoomDemo";
13+
import BroadcastDemo from "./pages/BroadcastDemo";
14+
15+
function App() {
16+
return (
17+
<HashRouter>
18+
<div className="app">
19+
<nav className="sidebar">
20+
<h3>EZUIKit Controls</h3>
21+
<NavLink to="/">首页</NavLink>
22+
<NavLink to="/date-picker">DatePicker 日期选择</NavLink>
23+
<NavLink to="/ptz">Ptz 云台控制</NavLink>
24+
<NavLink to="/aichat">AIChat AI对话</NavLink>
25+
<NavLink to="/talk">Talk 对讲</NavLink>
26+
<NavLink to="/time-line">TimeLine 时间轴</NavLink>
27+
<NavLink to="/zoom">Zoom 缩放</NavLink>
28+
<NavLink to="/broadcast">Broadcast 云广播</NavLink>
29+
</nav>
30+
<main className="content">
31+
<Routes>
32+
<Route path="/" element={<Home />} />
33+
<Route path="/date-picker" element={<DatePickerDemo />} />
34+
{/* <Route path="/ptz" element={<PtzDemo />} />
35+
<Route path="/aichat" element={<AIChatDemo />} />
36+
<Route path="/talk" element={<TalkDemo />} />
37+
<Route path="/time-line" element={<TimeLineDemo />} />
38+
<Route path="/zoom" element={<ZoomDemo />} />
39+
<Route path="/broadcast" element={<BroadcastDemo />} /> */}
40+
</Routes>
41+
</main>
42+
</div>
43+
</HashRouter>
44+
);
45+
}
346

447
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
5-
<div />
48+
<App />
649
);

‎examples/with-react-vite/src/pages/AIChatDemo.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { useEffect, useRef } from "react";
2+
import AIChat from "@ezuikit/control-aichat";
3+
4+
export default function AIChatDemo() {
5+
const containerRef = useRef<HTMLDivElement>(null);
6+
7+
useEffect(() => {
8+
let aiChat: AIChat | null = null;
9+
10+
if (containerRef.current) {
11+
aiChat = new AIChat({
12+
container: containerRef.current,
13+
language: "zh",
14+
isMobile: false,
15+
isAICloudEnabled: true,
16+
accessToken: "your-access-token",
17+
deviceSerial: "your-device-serial",
18+
channelNo: 1,
19+
});
20+
21+
aiChat.on(AIChat.EVENTS.messageSent, (data: any) => {
22+
console.log("AIChat messageSent:", data);
23+
});
24+
25+
aiChat.on(AIChat.EVENTS.videoPlay, (data: any) => {
26+
console.log("AIChat videoPlay:", data);
27+
});
28+
29+
aiChat.open();
30+
}
31+
32+
return () => {
33+
aiChat?.destroy();
34+
};
35+
}, []);
36+
37+
return (
38+
<div>
39+
<h2>AIChat AI视频搜索对话</h2>
40+
<div ref={containerRef} style={{ width: 400, height: 600, position: "relative" }} />
41+
</div>
42+
);
43+
}

‎examples/with-react-vite/src/pages/BroadcastDemo.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useEffect, useRef } from "react";
2+
import Broadcast from "@ezuikit/control-broadcast";
3+
4+
export default function BroadcastDemo() {
5+
const containerRef = useRef<HTMLDivElement>(null);
6+
7+
useEffect(() => {
8+
let broadcast: Broadcast | null = null;
9+
10+
if (containerRef.current) {
11+
broadcast = new Broadcast({
12+
container: containerRef.current,
13+
deviceSerial: "your-device-serial",
14+
channelNo: 1,
15+
accessToken: "your-access-token",
16+
language: "zh",
17+
direction: "bottom",
18+
});
19+
20+
broadcast.on(Broadcast.EVENTS.requestQueryVoiceList, () => {
21+
console.log("Broadcast: 请求语音列表");
22+
});
23+
24+
broadcast.on(Broadcast.EVENTS.requestSendVoice, (data: any) => {
25+
console.log("Broadcast: 下发语音", data);
26+
});
27+
28+
broadcast.on(Broadcast.EVENTS.requestSendVoiceOnce, (data: any) => {
29+
console.log("Broadcast: 下发临时语音", data);
30+
});
31+
32+
broadcast.open();
33+
}
34+
35+
return () => {
36+
broadcast?.destroy();
37+
};
38+
}, []);
39+
40+
return (
41+
<div>
42+
<h2>Broadcast 云广播</h2>
43+
<div ref={containerRef} style={{ width: 400, height: 500, position: "relative" }} />
44+
</div>
45+
);
46+
}

‎examples/with-react-vite/src/pages/DatePickerDemo.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import '@ezuikit/control-date-picker/dist/style.css';
2+
import React, { useEffect, useRef } from "react";
3+
import * as DatePicker from '@ezuikit/control-date-picker';
4+
5+
6+
console.log("DatePicker", DatePicker)
7+
8+
export default function DatePickerDemo() {
9+
const pickerRef = useRef<HTMLDivElement>(null);
10+
useEffect(() => {
11+
// let datePicker: DatePicker | null = null;
12+
13+
// if (pickerRef.current) {
14+
// datePicker = new DatePicker(pickerRef.current, {
15+
// language: "zh",
16+
// current: new Date(),
17+
// onChange: (date, mode) => {
18+
// console.log("DatePicker onChange:", date, mode);
19+
// },
20+
// onCell: (date, mode) => {
21+
// console.log("DatePicker onCell:", date, mode);
22+
// },
23+
// });
24+
// }
25+
26+
return () => {
27+
// datePicker?.destroy();
28+
};
29+
}, []);
30+
31+
return (
32+
<div>
33+
<h2>DatePicker 日期选择器</h2>
34+
<section>
35+
<h3>DatePicker</h3>
36+
<div ref={pickerRef} style={{ width: 300 }} />
37+
</section>
38+
</div>
39+
);
40+
}

‎examples/with-react-vite/src/pages/Home.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
3+
export default function Home() {
4+
return (
5+
<div>
6+
<h1>EZUIKit Controls 示例</h1>
7+
<p>请从左侧导航选择一个控件查看示例。</p>
8+
</div>
9+
);
10+
}

‎examples/with-react-vite/src/pages/PtzDemo.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { useEffect, useRef } from "react";
2+
import { Ptz } from "@ezuikit/control-ptz";
3+
4+
export default function PtzDemo() {
5+
const containerRef = useRef<HTMLDivElement>(null);
6+
7+
useEffect(() => {
8+
let ptz: Ptz | null = null;
9+
10+
if (containerRef.current) {
11+
ptz = new Ptz(containerRef.current, {
12+
language: "zh",
13+
accessToken: "your-access-token",
14+
deviceSerial: "your-device-serial",
15+
channelNo: 1,
16+
onDirection: (info) => {
17+
console.log("Ptz direction:", info);
18+
return () => {};
19+
},
20+
onSpeedChange: (speed) => {
21+
console.log("Ptz speed:", speed);
22+
},
23+
});
24+
}
25+
26+
return () => {
27+
ptz?.destroy();
28+
};
29+
}, []);
30+
31+
return (
32+
<div>
33+
<h2>Ptz 云台控制</h2>
34+
<div ref={containerRef} style={{ width: 300, height: 300 }} />
35+
</div>
36+
);
37+
}

‎examples/with-react-vite/src/pages/TalkDemo.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useEffect, useRef, useState } from "react";
2+
import Talk from "@ezuikit/control-talk";
3+
4+
export default function TalkDemo() {
5+
const talkRef = useRef<Talk | null>(null);
6+
const [isTalking, setIsTalking] = useState(false);
7+
8+
useEffect(() => {
9+
talkRef.current = new Talk({
10+
deviceSerial: "your-device-serial",
11+
channelNo: "1",
12+
accessToken: "your-access-token",
13+
env: { domain: "https://open.ys7.com" },
14+
capacity: { support_talk: null, support_switch_talkmode: null },
15+
});
16+
17+
return () => {
18+
talkRef.current?.destroy();
19+
};
20+
}, []);
21+
22+
const startTalk = () => {
23+
talkRef.current?.startTalk((isGb) => {
24+
console.log("Talk started, isGb:", isGb);
25+
setIsTalking(true);
26+
});
27+
};
28+
29+
const stopTalk = () => {
30+
talkRef.current?.stopTalk();
31+
setIsTalking(false);
32+
};
33+
34+
return (
35+
<div>
36+
<h2>Talk 对讲</h2>
37+
<p>状态: {isTalking ? "对讲中..." : "未开始"}</p>
38+
<button onClick={startTalk} disabled={isTalking}>开始对讲</button>
39+
<button onClick={stopTalk} disabled={!isTalking} style={{ marginLeft: 8 }}>停止对讲</button>
40+
</div>
41+
);
42+
}

0 commit comments

Comments
 (0)