feat: 优化课程列表功能和班级排名样式

- 修复课程列表单元展开/收起功能 - 优化日历页面跳转到课程列表的延迟时间 - 恢复复合技能课和垂直技能课的分割线及收缩功能 - 添加班级排名第一二三名的特殊样式图标 - 修复Collapse组件onChange事件处理 - 优化课程自动选中和滚动定位功能 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-11 15:51:09 +08:00
parent 561d5c286d
commit c969677ef6
18 changed files with 599 additions and 47 deletions
--- a/test-collapse-controlled.html
+++ b/test-collapse-controlled.html
@@ -0,0 +1,88 @@
+<!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>