fix: 修改列表

src/layout/SubHead.tsx

@@ -13,7 +13,7 @@ function SubHead(props: RouteProps) {
     </Button>
   )
   
-  return item ? (
+  return item.joinTab ? (
     <h2 className={style.subhead}>
       {item.title}
       { renderHomeBtn }

src/page/scene/list.tsx

@@ -1,27 +1,56 @@
-import { Row, Empty, Button } from 'antd'
+import { Row, Empty, Button, List, Layout } from 'antd'
 import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from '../../store'
 import { scenesSelector, fetchScenes } from '../../store/scene'
 import { AddScene } from './add-scene'
-import { SignScene } from './sign-scene'
+import { SignScene, useSceneLinks } from './sign-scene'
 import style from './style.module.css'
 
 
+const { Header, Footer, Sider, Content } = Layout;
+
+
 export const SceneList = () => {
   const [adding, setAdding] = useState(false)
   const scenes = useSelector(scenesSelector)
+  const [link, setLink] = useState('')
   const dispatch = useDispatch()
 
   useEffect(() => {
     dispatch(fetchScenes())
   }, [dispatch])
+  const links = scenes.map(useSceneLinks)
+
+  useEffect(() => {
+    if (!link && links.length) {
+      setLink(links[0].gotoScene)
+    }
+  }, [link, links])
+  
+  // const renderScenes = scenes.map(scene => <SignScene {...scene} key={scene.id} />)
+  let renderLayer
   
-  const renderScenes = scenes.map(scene => <SignScene {...scene} key={scene.id} />)
-  const renderLayer = scenes.length
-    ? <Row gutter={16}>{renderScenes}</Row>
-    : <Empty description="暂无数据" image={Empty.PRESENTED_IMAGE_SIMPLE}>
-       { <Button type="primary" onClick={() => setAdding(true)}>立即创建</Button> } 
-      </Empty>
+  if (scenes.length) {
+    renderLayer = (
+      <Layout>
+        <Sider>
+        <List
+          className={style.sceneList}
+          loading={false}
+          itemLayout="horizontal"
+          dataSource={scenes}
+          renderItem={scene => <SignScene {...scene} key={scene.id} goto={str => setLink(str)} />} />
+        </Sider>
+        <Content>
+          {link && <iframe src={link} className={style.link}></iframe>}
+        </Content>
+      </Layout>
+    )
+  } else {
+    renderLayer = <Empty description="暂无数据" image={Empty.PRESENTED_IMAGE_SIMPLE}>
+      { <Button type="primary" onClick={() => setAdding(true)}>立即创建</Button> } 
+    </Empty>
+  }
   const renderHeader = !scenes.length
     ? null
     : <div className={style.header}>
@@ -30,12 +59,13 @@ export const SceneList = () => {
 
 
   return (
-    <>
+    <div className={style.sceneLayer}>
       { renderHeader }
+
       <div className="site-card-wrapper">
         { adding && <AddScene onClose={() => setAdding(false)} /> }
         { renderLayer }
       </div>
-    </>
+    </div>
   )
 }

src/page/scene/sign-scene.tsx

@@ -6,7 +6,7 @@ import { formatDistanceToNow, parseISO } from 'date-fns'
 import zh from 'date-fns/locale/zh-CN'
 
 import { EditScene } from './edit-scene'
-import { Card, Col, Avatar, Modal } from 'antd'
+import { Card, Col, Avatar, Modal, List, Skeleton } from 'antd'
 import { EditOutlined, PaperClipOutlined, DeleteOutlined, ExclamationCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import style from './style.module.css'
 import { useHistory } from 'react-router'
@@ -26,45 +26,50 @@ const confirm = (msg: string) => {
   })
 };
 
-const useSceneLinks = (scene: Scene) => {
+export const useSceneLinks = (scene: Scene) => {
   const history = useHistory()
   const goto = (link: string) => () => window.location.href = link
 
   switch (scene.type) {
     case SceneType.GIS:
       return {
-        gotoScene: goto(`http://data3d.4dage.com?sid=${scene.id}`),
+        gotoScene: `http://data3d.4dage.com?sid=${scene.id}`,
         editScene: () => history.push(`/${scene.id}/grid`)
       }
     case SceneType.LASER:
-      const gotoLink = goto(`https://laser.4dkankan.com/index.html?m=${scene.m}`)
+      const gotoLink = `https://laser.4dkankan.com/index.html?m=${scene.m}`
       return {
         gotoScene: gotoLink,
-        editScene: gotoLink
+        editScene: goto(gotoLink)
       }
     case SceneType.KANKAN:
       return {
-        gotoScene: goto(`https://www.4dkankan.com/spg.html?m=${scene.m}`),
+        gotoScene: `https://www.4dkankan.com/spg.html?m=${scene.m}`,
         editScene: goto(`https://www.4dkankan.com/epg.html?m=${scene.m}`)
       }
   }
 }
 
-export const SignScene = (scene: Scene) => {
+export const SignScene = (scene: Scene & { goto: (link: string) => void }) => {
   const [editIng, setEditIng] = useState(false)
   const date = parseISO(scene.time)
   const timeAgo = formatDistanceToNow(date, { locale: zh })
   const dispatch = useDispatch()
-  const deleteHandler = async () => {
+  const deleteHandler = async (ev) => {
+    ev.stopPropagation()
     if (await confirm('确定要删除此场景？')) {
       await dispatch(deleteScene(scene.id)).unwrap()
     }
   }
-  const { gotoScene, editScene } = useSceneLinks(scene)
+  const { gotoScene, editScene: editSceneRaw } =  useSceneLinks(scene)
+  const editScene = (ev) => {
+    ev.stopPropagation()
+    editSceneRaw()
+  }
 
   const renderActions = [
-    <PaperClipOutlined key="query" translate={undefined} onClick={gotoScene} />,
-    <SettingOutlined key="setting" translate={undefined} onClick={() => setEditIng(true)} />,
+    // <PaperClipOutlined key="query" translate={undefined} onClick={gotoScene} />,
+    // <SettingOutlined key="setting" translate={undefined} onClick={() => setEditIng(true)} />,
     <DeleteOutlined key="delete" translate={undefined} onClick={deleteHandler} />,
   ]
 
@@ -77,6 +82,10 @@ export const SignScene = (scene: Scene) => {
   return (
     <>
       {editIng && <EditScene onClose={() => setEditIng(false)} {...scene} />}
+      <List.Item actions={renderActions} className={style.scene}  onClick={() => scene.goto(gotoScene)}>
+        <List.Item.Meta title={scene.title}/>
+      </List.Item>
+{/* 
       <Col span={6} className={style.scene}>
         <Card
           bordered={true}
@@ -88,7 +97,7 @@ export const SignScene = (scene: Scene) => {
             description={`创建时间: ${timeAgo}`}
           />
         </Card>
-      </Col>
+      </Col> */}
     </>
   )
 }

src/page/scene/style.module.css

@@ -1,9 +1,28 @@
 .header {
   position: absolute;
   right: 0;
-  top: 0;
+  top: -80px;
+}
+
+.sceneList {
+  padding: 10px;
+  width: 300px;
 }
 
 .scene {
+  cursor: pointer;
   margin-bottom: 16px;
+}
+
+.sceneLayer {
+  margin: -22px -48px;
+  overflow: hidden;
+}
+
+.link {
+  width: 100%;
+  border: none;
+  height: calc(100vh - 89px);
+  margin: 0;
+  padding: 0;
 }

src/style.css

@@ -88,4 +88,28 @@ h1, h2, h3, h4, h5, h6 {
 .ant-card-cover img {
   height: 300px;
   object-fit: cover;
+}
+
+.ant-list-item-action > li,
+.ant-list-item-meta-description,
+.ant-list-item-meta-title {
+  color: #fff;
+}
+
+.ant-layout {
+  background: none;
+}
+
+.ant-layout-sider {
+  width: 300px !important;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #1b1b1b;
+
+  flex: 0 0 300px!important;
+  max-width: 300px!important;
+  min-width: 300px!important;
+  width: 300px!important;
+  height: 100%;
+  height: calc(100vh - 81px);
 }