cd2e307402
主要内容： - 包含12个产业的完整教务系统前端代码 - 智能启动脚本 (start-industry.sh) - 可视化产业导航页面 (index.html) - 项目文档 (README.md) 优化内容： - 删除所有node_modules和.yoyo文件夹，从7.5GB减少到2.7GB - 添加.gitignore文件避免上传不必要的文件 - 自动依赖管理和智能启动系统 产业列表： 1. 文旅产业 (5150) 2. 智能制造 (5151) 3. 智能开发 (5152) 4. 财经商贸 (5153) 5. 视觉设计 (5154) 6. 交通物流 (5155) 7. 大健康 (5156) 8. 土木水利 (5157) 9. 食品产业 (5158) 10. 化工产业 (5159) 11. 能源产业 (5160) 12. 环保产业 (5161) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
88 lines
2.9 KiB
HTML
88 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Controlled Collapse</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/@arco-design/web-react@2.60.0/dist/css/arco.css">
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
<script src="https://unpkg.com/@arco-design/web-react@2.60.0/dist/arco.min.js"></script>
|
|
|
|
<script type="text/babel">
|
|
const { useState, useEffect } = React;
|
|
const { Collapse, Button } = arco;
|
|
const CollapseItem = Collapse.Item;
|
|
|
|
function App() {
|
|
const [activeKeys, setActiveKeys] = useState([]);
|
|
|
|
const handleChange = (keys, extra) => {
|
|
console.log('onChange received:', keys, 'type:', typeof keys, 'extra:', extra);
|
|
|
|
// Log the current state
|
|
console.log('Current activeKeys before update:', activeKeys);
|
|
|
|
// Arco Design Collapse in controlled mode always returns an array
|
|
// But we need to handle it properly
|
|
setActiveKeys(keys || []);
|
|
|
|
console.log('New activeKeys to be set:', keys);
|
|
};
|
|
|
|
const programmaticallyOpen = (key) => {
|
|
console.log('Programmatically opening:', key);
|
|
setActiveKeys(prev => {
|
|
if (!prev.includes(key)) {
|
|
return [...prev, key];
|
|
}
|
|
return prev;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: 20 }}>
|
|
<h2>Test Controlled Collapse</h2>
|
|
<p>Active Keys: {JSON.stringify(activeKeys)}</p>
|
|
|
|
<div style={{ marginBottom: 20 }}>
|
|
<Button onClick={() => programmaticallyOpen('1')} style={{ marginRight: 10 }}>
|
|
Open Panel 1
|
|
</Button>
|
|
<Button onClick={() => programmaticallyOpen('2')} style={{ marginRight: 10 }}>
|
|
Open Panel 2
|
|
</Button>
|
|
<Button onClick={() => programmaticallyOpen('vertical-1')} style={{ marginRight: 10 }}>
|
|
Open Panel 3
|
|
</Button>
|
|
<Button onClick={() => setActiveKeys([])}>
|
|
Close All
|
|
</Button>
|
|
</div>
|
|
|
|
<Collapse
|
|
activeKey={activeKeys}
|
|
onChange={handleChange}
|
|
expandIconPosition="right"
|
|
>
|
|
<CollapseItem header="Panel 1" name="1">
|
|
Content 1
|
|
</CollapseItem>
|
|
<CollapseItem header="Panel 2" name="2">
|
|
Content 2
|
|
</CollapseItem>
|
|
<CollapseItem header="Panel 3 (vertical)" name="vertical-1">
|
|
Content 3
|
|
</CollapseItem>
|
|
</Collapse>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
</script>
|
|
</body>
|
|
</html> |