diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index ddb61faeac2b8658d957a3bdc30b2d62a7c1811b..22f9ab051590eb683b3f6e020f23a4df15676e5e 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -9,6 +9,7 @@ const LoadingWrapper = styled(Row)`
     bottom: 0;
     top: 0;
     background: #fff;
+    z-index: 100;
     padding-top: 300px;
 `
 const Loading: React.FC = () => (
diff --git a/src/components/Public/StateTag.tsx b/src/components/Public/StateTag.tsx
index 61010df86512839321e915a5e396e8c66723a672..9798ca1ff89f1a59eeb8643b05be11efd618b684 100644
--- a/src/components/Public/StateTag.tsx
+++ b/src/components/Public/StateTag.tsx
@@ -2,43 +2,69 @@ import React from "react"
 import { Tag } from "antd"
 
 type IProps = {
-    state: string
+    status: string
 }
 
-const stateWordsMap = new Map([
-    ["success", "新建"],
-    ["success1", "分析中"],
-    ["success2", "评审中"],
-    ["success3", "已评审"],
-    ["success4", "运行中"],
-    ["success5", "已完成"],
-])
+export const stateWordsMap = new Map([
+    ["analysing", "分析中"],
+    ["reviewing", "评审中"],
+    ["accepted", "已接受"],
+    ["refused", "已拒绝"],
+
+    ["init", "初始化"],
+    ["waiting", "等待中"],
+    ["starting", "开始中"],
+    ["running", "运行中"],
+    ["stopping", "停止中"],
+    ["pedding", "待定中"],
+
+    ["finish", "已完成"],
+    ["stopped", "已停止"],
+    ["pause", "暂停"],
+    ["skip", "跳过"],
+    ["cancel", "取消"],
 
-const stateColorMap = new Map([
-    ["success", "#1890FF"],
-    ["success1", "#FAAD15"],
-    ["success2", "#FAAD15"],
-    ["success3", "#22BC3D"],
-    ["success4", "#22BC3D"],
-    ["success5", "rgba(0,0,0,.3)"],
+    ["success", "成功"],
+    ["fail", "失败"],
+    ["error", "错误"],
+    ["ignore", "忽略"],
+
+    ["online", "在线"],
+    ["offline", "下线"],
+    ["uninstalling", "卸载中"],
+    ["installing", "下载中"],
 ])
 
-const StateTag: React.FC<IProps> = (props) => {
-    const { state } = props
+export const planStatusMap = (state: any) => new Map([
+    ["running", { "color": "rgba(24,144,255,1)", "background": "rgba(24,144,255,.1)" }],
+    ["reviewing", { "color": "rgba(24,144,255,1)", "background": "rgba(24,144,255,.1)" }],
+
+    ["finish", { "color": "rgba(34,188,61,1)", "background": "rgba(34,188,61,.1)" }],
+    ["accepted", { "color": "rgba(34,188,61,1)", "background": "rgba(34,188,61,.1)" }],
+    ["success", { "color": "rgba(34,188,61,1)", "background": "rgba(34,188,61,.1)" }],
+
+    ["analysing", { "color": "rgba(250,173,21,1)", "background": "rgba(250,173,21,.1)" }],
+    ["pedding", { "color": "rgba(250,173,21,1)", "background": "rgba(250,173,21,.1)" }],
+
+    ["refused", { "color": "rgba(255,77,79,1)", "background": "rgba(255,77,79,.1)" }],
+    ["fail", { "color": "rgba(255,77,79,1)", "background": "rgba(255,77,79,.1)" }],
+    ["error", { "color": "rgba(255,77,79,1)", "background": "rgba(255,77,79,.1)" }],
+]).get(state) || { "color": "rgba(0,0,0,0.45)", "background": "rgba(0,0,0,0.03)" }
+
+export const StateTag: React.FC<IProps> = (props) => {
+    const { status } = props
 
     return (
         <Tag
-            color={stateColorMap.get(state)}
+            color={planStatusMap(status)?.color}
             style={{
                 width: 54,
                 margin: 0,
                 textAlign: "center",
-                color: ["success"].includes(state) ? "#ffffff" : "rgba(0,0,0,0.45)",
+                ...planStatusMap(status)
             }}
         >
-            {stateWordsMap.get(state)}
+            {stateWordsMap.get(status)}
         </Tag>
     )
-}
-
-export default StateTag
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/RichTextEditor/index.tsx b/src/components/RichTextEditor/index.tsx
index e70aadcf7ba31534dedd785e339d8d098fb256e4..ed995e515e6e0a4585e751f5abdfcd969605555f 100644
--- a/src/components/RichTextEditor/index.tsx
+++ b/src/components/RichTextEditor/index.tsx
@@ -30,6 +30,7 @@ const RichTextEditor: React.FC<IProps> = (props) => {
                 ...config,
                 placeholder: "请输入内容",
                 MENU_CONF: {
+                    
                 },
                 onCreated(vm) {
                     const tb = createToolbar({
diff --git a/src/pages/Plan/CreatePage.tsx b/src/pages/Plan/CreatePage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..747431a643916d100f2c3306eeefd9ed27e5ef97
--- /dev/null
+++ b/src/pages/Plan/CreatePage.tsx
@@ -0,0 +1,123 @@
+import React from "react"
+import { Table, Space, Typography, Row, Button, Col, Spin, Form, message, Input, Select } from "antd"
+import { createTestPlan, queryTestPlanList, updateTestPlanDetail } from "./services"
+import Loading from "@/components/Loading"
+import { history, request, useParams, useRequest } from "umi"
+import RichTextEditor from "@/components/RichTextEditor"
+
+import SuiteTable from "@/pages/Plan/components/ContentTable/Suite.table"
+import TaskTable from "@/pages/Plan/components/ContentTable/Task.table"
+import { CustomForm } from "@/components/CustomStyled"
+import { usePlanProvider } from "./hooks"
+/**
+ * 
+ * 测试方案
+ * 
+ */
+
+type IProps = {
+    [k: string]: any;
+}
+
+const TestPlan: React.FC<IProps> = (props) => {
+    const { refresh } = usePlanProvider()
+    const { plan_id } = useParams() as any
+    const { source, onOk } = props
+    const [form] = Form.useForm()
+    console.log(props, plan_id)
+
+    React.useEffect(() => {
+        if (source && JSON.stringify(source) !== "{}") {
+            const { req_id, title } = source
+            form.setFieldsValue({ req_id, title })
+        }
+    }, [source])
+
+    const [baseData, setBaseData] = React.useState({})
+
+    const { data: requirement, run } = useRequest(() => request(`/api/requirement`), { initialData: [], manual: true })
+
+    React.useEffect(() => {
+        run()
+    }, [])
+
+    const handleSave = () => {
+        form.validateFields()
+            .then(async (values) => {
+                const params = { ...baseData, ...values, reviewers: "xxxx" }
+                const isEditPage = plan_id && source
+                const { data, code, msg } = isEditPage ?
+                    await updateTestPlanDetail(plan_id, params) :
+                    await createTestPlan(params)
+                if (code !== 200) {
+                    message.error(msg)
+                    return
+                }
+                if (isEditPage) {
+                    onOk()
+                    refresh()
+                    message.success("操作成功")
+                }
+                else
+                    history.push(`/plan/${data.id}`)
+            })
+    }
+
+    return (
+        <div style={{ padding: 12, backgroundColor: "#fff" }}>
+            <Space style={{ width: "100%" }} direction="vertical">
+                <Row justify="space-between" align="middle">
+                    <Typography.Text strong>新建方案</Typography.Text>
+                    <Button type="primary" onClick={handleSave}>保存</Button>
+                </Row>
+                <Typography.Text strong>基础信息</Typography.Text>
+                <CustomForm
+                    form={form}
+                    labelCol={{ span: 2 }}
+                    wrapperCol={{ span: 16 }}
+                >
+                    <Form.Item label="方案名称" name="title" rules={[{ required: true, message: "方案名称不能为空" }]}>
+                        <Input allowClear autoComplete="off" placeholder="请输入" />
+                    </Form.Item>
+                    <Form.Item label="测试需求" name="req_id" rules={[{ required: true, message: "请选择测试需求" }]}>
+                        <Select
+                            options={
+                                requirement.map((i: any) => ({ label: i.title, value: i.id }))
+                            }
+                            placeholder="请选择测试需求"
+                        />
+                    </Form.Item>
+                </CustomForm>
+                <Typography.Text strong>描述</Typography.Text>
+                <div
+                    style={{
+                        height: 300,
+                        border: "1px solid rgba(0,0,0,0.15)",
+                        borderRadius: 2,
+                    }}
+                >
+                    <RichTextEditor
+                        defaultValue={plan_id ? source?.content : undefined}
+                        onEditorChange={(vm: any) => setBaseData((p) => ({ ...p, content: vm.children }))}
+                    />
+                </div>
+
+                <SuiteTable
+                    ids={source?.cases}
+                    onOk={
+                        (cases: any) => setBaseData((p) => ({ ...p, cases: cases.map((i: any) => i.id) }))
+                    }
+                />
+
+                <TaskTable
+                    ids={source?.tasks}
+                    onOk={
+                        (tasks: any) => setBaseData((p) => ({ ...p, tasks: tasks.map((i: any) => i.id) }))
+                    }
+                />
+            </Space >
+        </div>
+    )
+}
+
+export default TestPlan
\ No newline at end of file
diff --git a/src/pages/Plan/components/ContentTable/Suite.table.tsx b/src/pages/Plan/components/ContentTable/Suite.table.tsx
index 5581b40cc8a6bfad76192b3bc34ee6a9e4681c08..87535e1b3a66723605aac7c1f5d06b4f70a50aaf 100644
--- a/src/pages/Plan/components/ContentTable/Suite.table.tsx
+++ b/src/pages/Plan/components/ContentTable/Suite.table.tsx
@@ -1,15 +1,34 @@
 import React from "react"
-import { Table, Space, Typography, Row, Button, TableColumnType } from "antd"
+import { Table, Space, Typography, Row, Button, TableColumnType, Badge } from "antd"
 import SuiteSelet from "../SelectModal/Suite.selet"
 import { CustomTable } from "@/components/CustomStyled"
+import { isAvailableMap, runMethodMap } from "@/pages/Suite/utils"
+import { useRequest, useParams } from "umi"
+import { queryTestPlanCases } from "@/pages/Plan/services"
 
-const TableList: React.FC = (porps) => {
-    // const { dataSource } = props
+type IProps = {
+    [k: string]: any;
+}
+
+const TableList: React.FC<IProps> = (props) => {
+    const { onOk, canSelect = true } = props
+    const { plan_id } = useParams() as any
     const [source, setSource] = React.useState([])
     const ref = React.useRef(null) as any
 
+    React.useEffect(() => {
+        onOk && onOk(source)
+    }, [source])
+
+    const { run } = useRequest(queryTestPlanCases, { initialData: [], manual: true })
+
+    React.useEffect(() => {
+        if (plan_id)
+            run(plan_id).then((values) => setSource(values))
+    }, [plan_id])
+
     const handleAdd = async () => {
-        ref.current?.show()
+        ref.current?.show(source.map((i: any) => i.id))
     }
 
     const handleDelete = (row: any) => {
@@ -22,20 +41,36 @@ const TableList: React.FC = (porps) => {
             dataIndex: "name",
         },
         {
-            title: "用例名称",
-            dataIndex: "name",
+            title: "优先级",
+            dataIndex: "priority",
+            render(val: any) {
+                return `P${val}`
+            }
         },
         {
-            title: "用例名称",
-            dataIndex: "name",
+            title: "运行方式",
+            dataIndex: "run_method",
+            render(val: any) {
+                return val ? runMethodMap.get(val) : "-"
+            }
         },
         {
-            title: "用例名称",
-            dataIndex: "name",
+            title: "状态",
+            dataIndex: "is_available",
+            render(val: any) {
+                const s = isAvailableMap.get(val)
+                return val ?
+                    <Badge
+                        status={s === "可用" ? "success" : "default"}
+                        text={s}
+                    />
+                    : "-"
+            }
         },
+        canSelect &&
         {
             title: "操作",
-            render(row) {
+            render(row: any) {
                 return (
                     <span onClick={() => handleDelete(row)}>
                         <Typography.Link>
@@ -45,13 +80,16 @@ const TableList: React.FC = (porps) => {
                 )
             }
         },
-    ]
+    ].filter(Boolean)
 
     return (
         <Space direction="vertical" style={{ width: "100%" }}>
             <Row justify="space-between" align="middle">
                 <Typography.Text style={{ margin: 0 }} strong>用例</Typography.Text>
-                <Button onClick={handleAdd}>选择用例</Button>
+                {
+                    canSelect &&
+                    <Button onClick={handleAdd}>选择用例</Button>
+                }
             </Row>
             <CustomTable
                 columns={columns}
@@ -59,7 +97,10 @@ const TableList: React.FC = (porps) => {
                 size="small"
                 pagination={false}
             />
-            <SuiteSelet ref={ref} onOk={setSource} />
+            {
+                canSelect &&
+                <SuiteSelet ref={ref} onOk={setSource} />
+            }
         </Space>
     )
 }
diff --git a/src/pages/Plan/components/ContentTable/Task.table.tsx b/src/pages/Plan/components/ContentTable/Task.table.tsx
index 86870c11ad8fdd1a4bfded038b711aaa32237813..3a747273b4324bf69ca1d88468541c169b47ae91 100644
--- a/src/pages/Plan/components/ContentTable/Task.table.tsx
+++ b/src/pages/Plan/components/ContentTable/Task.table.tsx
@@ -2,13 +2,33 @@ import React from "react"
 import { Table, Space, Typography, Row, Button, TableColumnType } from "antd"
 import TaskSelect from "../SelectModal/Task.select"
 import { CustomTable } from "@/components/CustomStyled"
+import { runMethodMap } from "@/pages/Suite/utils"
+import { useParams, useRequest } from "umi"
+import { queryTestPlanTasks } from "@/pages/Plan/services"
 
-const TableList: React.FC = () => {
+type IProps = {
+    [k: string]: any;
+}
+
+const TableList: React.FC<IProps> = (props) => {
+    const { onOk, canSelect = true } = props
     const ref = React.useRef(null) as any
     const [source, setSource] = React.useState([])
+    const { plan_id } = useParams() as any
+
+    React.useEffect(() => {
+        onOk && onOk(source)
+    }, [source])
+
+    const { run } = useRequest(queryTestPlanTasks, { initialData: [], manual: true })
+
+    React.useEffect(() => {
+        if (plan_id)
+            run(plan_id).then((values) => setSource(values))
+    }, [plan_id])
 
     const handleAdd = async () => {
-        ref.current?.show()
+        ref.current?.show(source.map((i: any) => i.id))
     }
 
     const handleDelete = (row: any) => {
@@ -22,19 +42,23 @@ const TableList: React.FC = () => {
         },
         {
             title: "运行方式",
-            dataIndex: "name",
+            dataIndex: "run_method",
+            render(val: any) {
+                return val ? runMethodMap.get(val) : "-"
+            }
         },
         {
             title: "测试设备",
-            dataIndex: "name",
+            dataIndex: "device_ip",
         },
         {
             title: "备注",
             dataIndex: "desc",
         },
+        canSelect &&
         {
             title: "操作",
-            render(row) {
+            render(row: any) {
                 return (
                     <span onClick={() => handleDelete(row)}>
                         <Typography.Link>
@@ -44,13 +68,16 @@ const TableList: React.FC = () => {
                 )
             }
         },
-    ]
+    ].filter(Boolean)
 
     return (
         <Space direction="vertical" style={{ width: "100%" }}>
             <Row justify="space-between" align="middle">
                 <Typography.Text style={{ margin: 0 }} strong>测试任务</Typography.Text>
-                <Button onClick={handleAdd}>选择任务</Button>
+                {
+                    canSelect &&
+                    <Button onClick={handleAdd}>选择任务</Button>
+                }
             </Row>
             <CustomTable
                 columns={columns}
@@ -58,7 +85,10 @@ const TableList: React.FC = () => {
                 size="small"
                 pagination={false}
             />
-            <TaskSelect ref={ref} onOk={setSource} />
+            {
+                canSelect &&
+                <TaskSelect ref={ref} onOk={setSource} />
+            }
         </Space>
     )
 }
diff --git a/src/pages/Plan/components/LeftList/index.tsx b/src/pages/Plan/components/LeftList/index.tsx
index b710f2983a8ed7ca12baba0c7cca23ac4f8afe40..8ed6af8a17cf443eb78a87701cb60cc41d212c5a 100644
--- a/src/pages/Plan/components/LeftList/index.tsx
+++ b/src/pages/Plan/components/LeftList/index.tsx
@@ -1,9 +1,10 @@
 import React from "react";
-import { Button, Input, Row, Space, Tooltip, Typography } from "antd"
-import StateTag from "@/components/Public/StateTag";
+import { Button, Empty, Input, Row, Space, Tooltip, Typography } from "antd"
+import { StateTag } from "@/components/Public/StateTag";
 import { history, useParams } from "umi"
 import { usePlanProvider } from "../../hooks";
 import styled from "styled-components"
+import { SearchOutlined } from "@ant-design/icons";
 
 type PlanItemProps = {
     is_active?: number;
@@ -16,6 +17,7 @@ const activeCls = `
         color: rgba(24,144,255,1);
     }
 `
+
 const PlanItem = styled(Row) <PlanItemProps>`
     cursor: pointer;
     height: 32px;
@@ -30,7 +32,11 @@ type IProps = {
 
 const PlanLeftContent: React.FC<IProps> = () => {
     const { plan_id } = useParams() as any
-    const { planList } = usePlanProvider()
+    const { planList, run } = usePlanProvider()
+
+    const handleSearch = async (e: any) => {
+        if (e.code === "Enter") run({ content: e.target.value })
+    }
 
     return (
         <div>
@@ -46,9 +52,9 @@ const PlanLeftContent: React.FC<IProps> = () => {
                         placeholder="请输入搜索关键字"
                         autoComplete="off"
                         allowClear
-                        style={{ width: 150 }}
-                        onKeyUp={(e) => console.log(e)}
-                    // suffix
+                        style={{ width: 170 }}
+                        onKeyUp={handleSearch}
+                        suffix={<SearchOutlined />}
                     />
                     <Button
                         size="small"
@@ -60,28 +66,33 @@ const PlanLeftContent: React.FC<IProps> = () => {
                 </Space>
             </Row>
 
-            <Space direction="vertical" style={{ width: "100%" }}>
-                {
-                    planList.map((plan: any) => (
-                        <PlanItem
-                            justify="space-between"
-                            align="middle"
-                            key={plan.id}
-                            onClick={() => history.push(`/plan/${plan.id}`)}
-                            is_active={plan.id === +plan_id ? 1 : 0}
-                        >
-                            <div style={{ width: "calc(100% - 54px - 20px" }}>
-                                <Tooltip title={plan.title}>
-                                    <Typography.Text ellipsis >
-                                        {plan.title}
-                                    </Typography.Text>
-                                </Tooltip>
-                            </div>
-                            <StateTag state="success" />
-                        </PlanItem>
-                    ))
-                }
-            </Space>
+            {
+                planList.length === 0 ?
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: 200 }} /> :
+                    <Space direction="vertical" style={{ width: "100%" }} size={0}>
+                        {
+                            planList.map((plan: any) => (
+                                <PlanItem
+                                    justify="space-between"
+                                    align="middle"
+                                    key={plan.id}
+                                    onClick={() => history.push(`/plan/${plan.id}`)}
+                                    is_active={plan.id === +plan_id ? 1 : 0}
+                                >
+                                    <div style={{ width: "calc(100% - 54px - 20px" }}>
+                                        <Tooltip title={plan.title}>
+                                            <Typography.Text ellipsis >
+                                                {plan.title}
+                                            </Typography.Text>
+                                        </Tooltip>
+                                    </div>
+                                    <StateTag status={plan.status} />
+                                </PlanItem>
+                            ))
+                        }
+                    </Space>
+            }
+
         </div>
     )
 }
diff --git a/src/pages/Plan/components/RightContent/EditContent.tsx b/src/pages/Plan/components/RightContent/EditContent.tsx
deleted file mode 100644
index 6fa973fe4f8f7fe6cf7983cf279236da4a429661..0000000000000000000000000000000000000000
--- a/src/pages/Plan/components/RightContent/EditContent.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react"
-import { Space, Row, Typography, Button, Form, Input, Select, Radio, Col } from "antd"
-import RichTextEditor from "@/components/RichTextEditor"
-import styles from '@/global.less'
-
-type IProps = {
-    [k: string]: any
-}
-
-const PlanRighttEditContent: React.FC<IProps> = () => {
-
-    return (
-        <div>
-            <Space direction="vertical" style={{ width: "100%" }}>
-                <Row align="middle" justify="space-between">
-                    <Typography.Text strong>基础信息</Typography.Text>
-                    <Space>
-                        <Button type="primary">保存</Button>
-                    </Space>
-                </Row>
-
-                <Form layout="horizontal" wrapperCol={{ span: 14 }} labelCol={{ span: 4 }} className={styles["tl-form"]}>
-                    <Form.Item label="方案名称" name="name">
-                        <Input placeholder="请输入测试方案名称" />
-                    </Form.Item>
-
-                    <Form.Item label="测试需求" name="name">
-                        <Select placeholder="请选择测试需求"></Select>
-                    </Form.Item>
-
-                    <Form.Item label="评审人" name="name">
-                        <Select placeholder="请添加评审人，可多选"></Select>
-                    </Form.Item>
-                </Form>
-
-                <Space direction="vertical" style={{ width: "100%" }}>
-                    <Typography.Text strong>描述</Typography.Text>
-                    <div style={{ height: 300, border: "1px solid rgba(0,0,0,0.15)", borderRadius: 2 }}>
-                        <RichTextEditor />
-                    </div>
-                </Space>
-            </Space>
-        </div>
-    )
-}
-
-export default PlanRighttEditContent
\ No newline at end of file
diff --git a/src/pages/Plan/components/RightContent/index.tsx b/src/pages/Plan/components/RightContent/index.tsx
index d8e60f8b71149f729d7eacfdf2b791436313b009..895a4051d045cf05c23efaaea3b9e5507947dfe3 100644
--- a/src/pages/Plan/components/RightContent/index.tsx
+++ b/src/pages/Plan/components/RightContent/index.tsx
@@ -1,54 +1,156 @@
-import React from "react";
-import { Space, Row, Typography, Button, Form, Input, Select, Card } from "antd"
+import React, { useState } from "react";
+import { Space, Row, Typography, Button, Empty, Menu, Dropdown, Avatar, Divider, Col, message } from "antd"
 import RichTextEditor from "@/components/RichTextEditor";
+import { history, useParams, useRequest } from "umi";
+import { deleteTestPlan, queryTestPlanDetail } from "../../services";
+import Loading from "@/components/Loading";
+import { createEditor } from "@wangeditor/editor"
+import SuiteTable from "@/pages/Plan/components/ContentTable/Suite.table"
+import TaskTable from "@/pages/Plan/components/ContentTable/Task.table"
+import styled from "styled-components"
+import Logo from "@/assets/logo.png"
+import { ReactComponent as Priority } from "@/assets/case/priority.svg"
+import { stateWordsMap } from "@/components/Public/StateTag"
+import { MoreOutlined } from "@ant-design/icons"
+import CreatePage from "@/pages/Plan/CreatePage"
 
 type IProps = {
     [k: string]: any;
 }
 
+const PriorityAvatar = styled.div`
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    overflow: hidden;
+`
+
 const PlanRightContent: React.FC<IProps> = () => {
+    const { plan_id } = useParams() as any
+
+    const [edit, setEdit] = useState(false)
+    const { data, run, refresh } = useRequest(queryTestPlanDetail, { manual: true, initialData: null })
+
+    React.useEffect(() => {
+        if (plan_id)
+            run(plan_id)
+    }, [plan_id])
+
+    const handleMenuClick = (e: any) => {
+        switch (e.key) {
+            case "delete": return handleDelete()
+        }
+        return
+    }
+
+    const handleDelete = async () => {
+        const { code, msg } = await deleteTestPlan(plan_id)
+        if (code !== 200) return message.error(msg)
+        history.push(`/plan`)
+        message.success("操作成功！")
+    }
+
+    const handleEditOk = () => {
+        setEdit(false)
+        refresh()
+    }
+
+    if (edit)
+        return <CreatePage source={data} onOk={handleEditOk} />
+
+    if (plan_id && !data) return <Loading />
+
+    if (!plan_id) return (
+        <Row justify="center" style={{ paddingTop: 300, background: "#fff", height: "100%" }}>
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        </Row>
+    )
 
-    const [form] = Form.useForm()
     return (
-        <Space direction="vertical" style={{ width: "100%" }}>
-            <Space>
-                <Row>
-                    <Row justify="space-between" align="middle">
-                        <Typography.Text strong>基础信息</Typography.Text>
-                        <Button type="primary">保存</Button>
-                    </Row>
-                    <Form form={form} layout="horizontal" labelCol={{ span: 5 }}>
-                        <Form.Item label="方案名称" name="name">
-                            <Input placeholder="请输入测试方案名称" />
-                        </Form.Item>
-
-                        <Form.Item label="测试需求" name="demand">
-                            <Select placeholder="请选择测试需求" />
-                        </Form.Item>
-
-                        <Form.Item label="评审人" name="user">
-                            <Select placeholder="请添加评审人，可多选" />
-                        </Form.Item>
-                    </Form>
-                </Row>
-
-                <Row>
-                    <Row justify="space-between" align="middle">
-                        <Typography.Text strong>描述</Typography.Text>
-                    </Row>
-                    <div>
-                        <RichTextEditor />
-                    </div>
-                </Row>
-
-                <Card type="inner" title="用例和机器" extra={<Button >选择用例</Button>}>
-
-                </Card>
-
-                <Card type="inner" title="测试任务" extra={<Button >选择任务</Button>}>
-
-                </Card>
-            </Space>
+        <Space direction="vertical" style={{ width: "100%", padding: 12 }}>
+            <Row justify="space-between" align="middle">
+                <Space>
+                    <Space>
+                        <Typography.Text style={{ color: "rgba(0,0,0,0.45)", fontSize: 12 }}>创建于</Typography.Text>
+                        <Typography.Text style={{ color: "rgba(0,0,0,0.45)", fontSize: 12 }}>{data.gmt_created}</Typography.Text>
+                    </Space>
+                    <Space>
+                        <Typography.Text style={{ color: "rgba(0,0,0,0.45)", fontSize: 12 }}>更新于</Typography.Text>
+                        <Typography.Text style={{ color: "rgba(0,0,0,0.45)", fontSize: 12 }}>{data.gmt_modified}</Typography.Text>
+                    </Space>
+                </Space>
+                <Space>
+                    <Button size="small" onClick={() => setEdit(true)}>编辑</Button>
+                    <Dropdown
+                        overlay={
+                            <Menu onClick={handleMenuClick}>
+                                <Menu.Item key="delete">
+                                    删除
+                                </Menu.Item>
+                            </Menu>
+                        }
+                    >
+                        <span style={{ width: 24, cursor: "pointer" }}>
+                            <MoreOutlined />
+                        </span>
+                    </Dropdown>
+                </Space>
+            </Row>
+
+            <Typography.Text strong>
+                {data.title}
+            </Typography.Text>
+
+            <Row>
+                <Col span={6}>
+                    <Space size={12}>
+                        <Avatar shape="circle" src={Logo} />
+                        <Space direction="vertical" size={0}>
+                            <Typography.Text>{data?.owner}</Typography.Text>
+                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>负责人</Typography.Text>
+                        </Space>
+                    </Space>
+                </Col>
+                <Col span={6}>
+                    <Space size={12}>
+                        <PriorityAvatar >
+                            <Priority />
+                        </PriorityAvatar>
+                        <Space direction="vertical" size={0}>
+                            <Typography.Text>{stateWordsMap.get(data?.status)}</Typography.Text>
+                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>状态</Typography.Text>
+                        </Space>
+                    </Space>
+                </Col>
+            </Row>
+
+            <Divider style={{ margin: 0 }} />
+
+            <Typography.Text strong>
+                基础信息
+            </Typography.Text>
+
+            <Row>
+                <Col span={2}>测试需求</Col>
+                <Col span={20}>{data.req_id}</Col>
+            </Row>
+
+            <Divider style={{ margin: 0 }} />
+
+            <Row justify="space-between" align="middle">
+                <Typography.Text strong>描述</Typography.Text>
+            </Row>
+            <div
+                dangerouslySetInnerHTML={{
+                    __html: createEditor({ content: data?.content || [] }).getHtml()
+                }}
+            />
+
+            <SuiteTable ids={data.cases} canSelect={false} />
+            <TaskTable ids={data.tasks} canSelect={false} />
         </Space>
     )
 }
diff --git a/src/pages/Plan/components/SelectModal/Suite.selet.tsx b/src/pages/Plan/components/SelectModal/Suite.selet.tsx
index 67814caa193495b078fe2450b34e5e53233ffa97..1a045d1f055f0667fffe8654571085e2d7fbb05a 100644
--- a/src/pages/Plan/components/SelectModal/Suite.selet.tsx
+++ b/src/pages/Plan/components/SelectModal/Suite.selet.tsx
@@ -29,13 +29,12 @@ const ReactComponent: React.ForwardRefRenderFunction<IRefs, IProps> = (props, re
 
     const [visible, setVisible] = React.useState<boolean>(false)
     const [loading, setLoading] = React.useState<boolean>(false)
-    const [source, setSource] = React.useState<undefined | any>(undefined)
 
     React.useImperativeHandle(ref, () => ({
         show(_: any) {
-            setSource(_)
+            setSelectedKeys(_)
+            setCheckAll(_.length === cases.length)
             setVisible(true)
-            form.setFieldsValue(_)
         }
     }))
 
@@ -57,12 +56,9 @@ const ReactComponent: React.ForwardRefRenderFunction<IRefs, IProps> = (props, re
         setCheckAll(list.length === allCaseId.length);
     }
 
-    const [form] = Form.useForm()
-
     const handleCancel = () => {
         setVisible(false)
         setLoading(false)
-        setSource(undefined)
         setSelectedKeys([])
         setIndeterminate(false)
         setCheckAll(false)
@@ -81,15 +77,19 @@ const ReactComponent: React.ForwardRefRenderFunction<IRefs, IProps> = (props, re
         setSelectedKeys([])
     }
 
+    const handleKeyup = (e: any) => {
+
+    }
+
     return (
         <Modal
             visible={visible}
-            title={source ? "编辑" : "新建"}
+            title={"选择用例"}
             width={"40%"}
             footer={
                 <Row justify="space-between" align="middle">
                     <Typography.Text>
-                        {`共${allCaseId.length}条    已选中${selectedKeys.length}条`}
+                        {`共${allCaseId.length}条`}
                     </Typography.Text>
                     <Space align="end">
                         <Button onClick={handleCancel}>取消</Button>
@@ -100,7 +100,11 @@ const ReactComponent: React.ForwardRefRenderFunction<IRefs, IProps> = (props, re
             onCancel={handleCancel}
         >
             <Space direction="vertical" style={{ width: "100%" }}>
-                <Input />
+                <Input
+                    placeholder="请输入搜索关键字"
+                    onKeyUp={handleKeyup}
+                    allowClear
+                />
                 <Row>
                     <div style={{ width: 208, borderRight: "1px solid rgba(0,0,0,.1)", minHeight: "100%" }}>
                         <ModuleItem
diff --git a/src/pages/Plan/components/SelectModal/Task.select.tsx b/src/pages/Plan/components/SelectModal/Task.select.tsx
index 458b0da0cffcf14debb6a13f9057a908466834ba..fd17081b5b63cd3e78a032abe1be6f355fb9f885 100644
--- a/src/pages/Plan/components/SelectModal/Task.select.tsx
+++ b/src/pages/Plan/components/SelectModal/Task.select.tsx
@@ -17,31 +17,27 @@ const ReactComponent: React.ForwardRefRenderFunction<IRefs, IProps> = (props, re
 
     const [visible, setVisible] = React.useState<boolean>(false)
     const [loading, setLoading] = React.useState<boolean>(false)
-    const [source, setSource] = React.useState<undefined | any>(undefined)
     const [selectedKeys, setSelectedKeys] = React.useState<any[]>([])
 
     const { data: taskList, loading: taskLoading } = useRequest(queryTaskList, { initialData: [] })
 
     React.useImperativeHandle(ref, () => ({
         show(_: any) {
-            setSource(_)
+            setSelectedKeys(_)
             setVisible(true)
-            form.setFieldsValue(_)
         }
     }))
 
-    const [form] = Form.useForm()
-
     const handleCancel = () => {
         setVisible(false)
         setLoading(false)
-        setSource(undefined)
+        setSelectedKeys([])
     }
 
     const handleOk = async () => {
         if (loading) return
         setLoading(true)
-        onOk([])
+        onOk(taskList.filter((i: any) => selectedKeys.includes(i.id)))
         handleCancel()
     }
 
diff --git a/src/pages/Plan/index.tsx b/src/pages/Plan/index.tsx
index 1e4887637c992b83a9bd610f6b9318faa3acd868..8698c9d280ffaed5e97e683e620b798f2f22ec3d 100644
--- a/src/pages/Plan/index.tsx
+++ b/src/pages/Plan/index.tsx
@@ -1,20 +1,16 @@
 import React from "react"
-import { Table, Space, Typography, Row, Button, Col, Spin, Form, message, Input, Select } from "antd"
-import { createTestPlan, queryTestPlanList } from "./services"
-import { useRequest } from "umi"
-import AddModal from "./components/AddModal"
+import { Row, Spin, } from "antd"
+import { queryTestPlanList } from "./services"
 
 import LeftList from "./components/LeftList"
-import RightContent from "./components/RightContent"
-import EditContent from "./components/RightContent/EditContent"
+// import EditContent from "./components/RightContent/EditContent"
 import { Provider as PlanPageProvider } from "./hooks"
 import Loading from "@/components/Loading"
-import { history, request, useParams } from "umi"
-import RichTextEditor from "@/components/RichTextEditor"
+import { history, useParams, useRequest } from "umi"
+
+const CreatePage = React.lazy(() => import("@/pages/Plan/CreatePage"))
+const RightContent = React.lazy(() => import("@/pages/Plan/components/RightContent"))
 
-import SuiteTable from "@/pages/Plan/components/ContentTable/Suite.table"
-import TaskTable from "@/pages/Plan/components/ContentTable/Task.table"
-import { CustomForm } from "@/components/CustomStyled"
 /**
  * 
  * 测试方案
@@ -26,94 +22,41 @@ type IProps = {
 }
 
 const TestPlan: React.FC<IProps> = (props) => {
-    const [form] = Form.useForm()
-    const { data: requirement } = useRequest(() => request(`/api/requirement`), { initialData: [] })
-
-    const handleSave = () => {
-        form.validateFields()
-            .then(async (values) => {
-                const { code, msg } = await createTestPlan(values)
-                if (code !== 200) {
-                    message.error(msg)
-                    return
-                }
-            })
-    }
-
-    const requirementList = React.useMemo(() => {
-        if (requirement)
-            return requirement.map((i: any) => ({ label: i.title, value: i.id }))
-        return []
-    }, [requirement])
-
-    return (
-        <div style={{ padding: 12, backgroundColor: "#fff" }}>
-            <Space style={{ width: "100%" }} direction="vertical">
-                <Row justify="space-between" align="middle">
-                    <Typography.Text strong>新建方案</Typography.Text>
-                    <Button type="primary" onClick={handleSave}>保存</Button>
-                </Row>
-                <Typography.Text strong>基础信息</Typography.Text>
-                <CustomForm
-                    form={form}
-                    labelCol={{ span: 4 }}
-                    wrapperCol={{ span: 16 }}
-                >
-                    <Form.Item label="方案名称" name="name" rules={[{ required: true, message: "方案名称不能为空" }]}>
-                        <Input allowClear autoComplete="off" placeholder="请输入" />
-                    </Form.Item>
-                    <Form.Item label="测试需求" name="need" rules={[{ required: true, message: "请选择测试需求" }]}>
-                        <Select
-                            options={requirementList}
-                            placeholder="请选择测试需求"
-                        />
-                    </Form.Item>
-                </CustomForm>
-                <Typography.Text strong>描述</Typography.Text>
-                <div style={{
-                    height: 300,
-                    border: "1px solid rgba(0,0,0,0.15)",
-                    borderRadius: 2,
-                }}>
-                    <RichTextEditor />
-                </div>
-                <SuiteTable />
-
-                <TaskTable />
-            </Space >
-        </div >
-    )
-
-    /* console.log(props)
+    // console.log(props)
     const { route } = props
     const { plan_id } = useParams() as any
-    const { data, loading, run, refresh } = useRequest(queryTestPlanList, {})
+    const { data: planList, loading, run, refresh, mutate } = useRequest(queryTestPlanList, { initialData: [] })
 
     React.useEffect(() => {
-        if (route.name !== "create" && data && !plan_id) {
-            const plans = data.data
-            if (plans && plans.length > 0) {
-                history.replace(`/plan/${plans[0].id}`)
-            }
+        if (route.name !== "create" && !plan_id) {
+            run({})
+                .then(val => {
+                    if (val.length > 0) {
+                        history.replace(`/plan/${val[0].id}`)
+                    }
+                })
         }
-    }, [plan_id, data, props])
-
-    if (!data) return <Loading />
+    }, [plan_id, route.name])
 
     return (
-        <PlanPageProvider.Provider value={{ planList: data.data, run, refresh }}>
-            <Spin spinning={loading}>
-                <Row style={{ background: "#fff", minHeight: window.innerHeight }}>
-                    <div style={{ width: 400, borderRight: "1px solid rgba(0,0,0,0.1)" }}>
-                        <LeftList />
-                    </div>
-                    <div style={{ width: "calc(100% - 400px)" }}>
-                        <EditContent />
-                    </div>
-                </Row>
-            </Spin>
+        <PlanPageProvider.Provider value={{ planList, run, refresh, mutate }}>
+            <Row style={{ background: "#fff", minHeight: window.innerHeight }}>
+                <div style={{ width: 400, borderRight: "1px solid rgba(0,0,0,0.1)" }}>
+                    <LeftList />
+                </div>
+                <div style={{ width: "calc(100% - 400px)" }}>
+                    <React.Suspense fallback={<Loading />}>
+                        {
+                            route.name === "create" ?
+                                <CreatePage /> :
+                                <RightContent />
+                        }
+                    </React.Suspense>
+                </div>
+            </Row>
+            {loading && <Loading />}
         </PlanPageProvider.Provider>
-    ) */
+    )
 }
 
 export default TestPlan
\ No newline at end of file
diff --git a/src/pages/Plan/services.ts b/src/pages/Plan/services.ts
index 8da6dc460f3fdaeec828781383f9c0cd0652a813..99c44e5005544736d4a6f896d3240a247fb283d2 100644
--- a/src/pages/Plan/services.ts
+++ b/src/pages/Plan/services.ts
@@ -19,6 +19,14 @@ export const addTestPlanCases = async (plan_id: any, data: any) => {
     return request(`/api/plan/${plan_id}/cases`, { data, method: "post" })
 }
 
+export const queryTestPlanCases = async (plan_id: any) => {
+    return request(`/api/plan/${plan_id}/cases`)
+}
+
+export const queryTestPlanTasks = async (plan_id: any) => {
+    return request(`/api/plan/${plan_id}/tasks`)
+}
+
 //评审审核方案 
 export const reviewTestPlan = async (plan_id: any, data: any) => {
     return request(`/api/review/${plan_id}`, { data, method: "post" })