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>
100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Arco Collapse Behavior</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/@arco-design/web-react@2.66.5/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.66.5/dist/arco.min.js"></script>
|
|
|
|
<script type="text/babel">
|
|
const { useState } = React;
|
|
const { Collapse, Button, Space } = arco;
|
|
const CollapseItem = Collapse.Item;
|
|
|
|
function App() {
|
|
// 测试受控模式
|
|
const [controlledKeys, setControlledKeys] = useState([]);
|
|
|
|
const handleControlledChange = (keys, extra, type) => {
|
|
console.log('=== Controlled Mode ===');
|
|
console.log('onChange keys:', keys);
|
|
console.log('keys type:', typeof keys);
|
|
console.log('Is Array:', Array.isArray(keys));
|
|
console.log('extra:', extra);
|
|
console.log('type:', type);
|
|
setControlledKeys(keys);
|
|
};
|
|
|
|
const programmaticallyOpen = (key) => {
|
|
setControlledKeys(prev => {
|
|
if (!prev.includes(key)) {
|
|
console.log('Programmatically opening:', key);
|
|
return [...prev, key];
|
|
}
|
|
return prev;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: 20 }}>
|
|
<h2>Controlled Mode Test</h2>
|
|
<p>Active Keys: {JSON.stringify(controlledKeys)}</p>
|
|
|
|
<Space style={{ marginBottom: 20 }}>
|
|
<Button onClick={() => programmaticallyOpen('1')}>Open Unit 1</Button>
|
|
<Button onClick={() => programmaticallyOpen('2')}>Open Unit 2</Button>
|
|
<Button onClick={() => programmaticallyOpen('vertical-1')}>Open Vertical 1</Button>
|
|
<Button onClick={() => setControlledKeys([])}>Close All</Button>
|
|
<Button onClick={() => setControlledKeys(['1', '2', 'vertical-1'])}>Open All</Button>
|
|
</Space>
|
|
|
|
<Collapse
|
|
activeKey={controlledKeys}
|
|
onChange={handleControlledChange}
|
|
expandIconPosition="right"
|
|
>
|
|
<CollapseItem header="复合能力课 - 单元 1" name="1">
|
|
<div>课程内容 1</div>
|
|
</CollapseItem>
|
|
<CollapseItem header="复合能力课 - 单元 2" name="2">
|
|
<div>课程内容 2</div>
|
|
</CollapseItem>
|
|
<CollapseItem header="垂直能力课 - 单元 1" name="vertical-1">
|
|
<div>垂直课程内容</div>
|
|
</CollapseItem>
|
|
</Collapse>
|
|
|
|
<hr style={{ margin: '40px 0' }} />
|
|
|
|
<h2>Uncontrolled Mode Test (for comparison)</h2>
|
|
<Collapse
|
|
defaultActiveKey={['1']}
|
|
onChange={(keys) => {
|
|
console.log('=== Uncontrolled Mode ===');
|
|
console.log('onChange keys:', keys);
|
|
console.log('keys type:', typeof keys);
|
|
console.log('Is Array:', Array.isArray(keys));
|
|
}}
|
|
expandIconPosition="right"
|
|
>
|
|
<CollapseItem header="Uncontrolled - Panel 1" name="u1">
|
|
<div>Content 1</div>
|
|
</CollapseItem>
|
|
<CollapseItem header="Uncontrolled - Panel 2" name="u2">
|
|
<div>Content 2</div>
|
|
</CollapseItem>
|
|
</Collapse>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
</script>
|
|
</body>
|
|
</html> |