diff --git a/config/routes.ts b/config/routes.ts
index 3a0d944a88e3f1f2f5cf18cbeb1186fb49c39140..b30128960174dcdf452a7fff25c8d4660abd709b 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -1,78 +1,78 @@
 export default [
     {
-        path: "/outline",
-        name: "outline",
-        component: "./Outline",
+        path: '/outline',
+        name: 'outline',
+        component: './Outline',
     },
     {
-        path: "/demand",
-        name: "demand",
-        component: "./Demand",
+        path: '/demand',
+        name: 'demand',
+        component: './Demand',
     },
     {
-        path: "/plan",
-        name: "plan",
+        path: '/plan',
+        name: 'plan',
         routes: [
             {
-                path: "/plan/create",
-                name: "create",
+                path: '/plan/create',
+                name: 'create',
                 hideInMenu: true,
-                component: "./Plan",
+                component: './Plan',
             },
             {
-                path: "/plan/:plan_id/edit",
-                name: "edit",
+                path: '/plan/:plan_id/edit',
+                name: 'edit',
                 hideInMenu: true,
-                component: "./Plan",
+                component: './Plan',
             },
             {
-                path: "/plan/:plan_id/report",
-                name: "report",
+                path: '/plan/:plan_id/report',
+                name: 'report',
                 hideInMenu: true,
-                component: "./Plan/Report"
+                component: './Plan/Report',
             },
             {
-                path: "/plan/:plan_id?",
+                path: '/plan/:plan_id?',
                 hideInMenu: true,
-                name: "plan",
-                component: "./Plan",
+                name: 'plan',
+                component: './Plan',
             },
-        ]
+        ],
     },
     {
-        path: "/cases",
-        name: "suite",
+        path: '/cases',
+        name: 'suite',
         routes: [
             {
-                path: "/cases/:mod_id?",
+                path: '/cases/:mod_id?',
                 hideInMenu: true,
-                component: "./Suite",
+                component: './Suite',
             },
-        ]
+        ],
     },
     {
-        path: "/task",
-        name: "task",
+        path: '/task',
+        name: 'task',
         routes: [
             {
-                path: "/task",
-                component: "./Task",
+                path: '/task',
+                component: './Task',
             },
             {
-                path: "/task/:task_id",
-                component: "./Task/Detail"
+                path: '/task/:task_id',
+                component: './Task/Detail',
             },
-        ]
+        ],
     },
     {
-        path: "/server",
-        name: "server",
-        component: "./Server",
+        path: '/server',
+        name: 'server',
+        component: './Server',
     },
     {
-        path: "/sys",
-        name: "sys",
-        component: "./Sys",
+        path: '/sys',
+        name: 'sys',
+        component: './Sys',
         routes: [
             /*             {
                             path: "approval",
@@ -90,48 +90,55 @@
                             }]
                         }, */
             {
-                path: "user",
-                name: "user-list",
-                access: "canTestAdmin",
+                path: 'user',
+                name: 'user-list',
+                access: 'canTestAdmin',
                 hideInMenu: true,
-                component: "./Sys/Users"
+                component: './Sys/Users',
             },
             {
-                path: "tag",
-                name: "tag",
+                path: 'tag',
+                name: 'tag',
                 hideInMenu: true,
-                component: "./Sys/Tags"
+                component: './Sys/Tags',
             },
             {
-                path: "suite",
-                name: "suite",
+                path: 'suite',
+                name: 'suite',
                 hideInMenu: true,
-                component: "./Sys/Suite"
+                component: './Sys/Suite',
             },
             {
-                redirect: 'tag'
-            }
-        ]
+                redirect: 'tag',
+            },
+        ],
     },
     {
-        path: "login",
-        name: "login",
+        path: 'login',
+        name: 'login',
         hideInMenu: true,
         layout: false,
-        component: "./Auth/Login",
+        component: './Auth/Login',
+    },
+    {
+        path: 'regist',
+        name: 'regist',
+        layout: false,
+        hideInMenu: true,
+        component: './Auth/Regist',
     },
     {
-        path: "regist",
-        name: "regist",
+        path: 'file-viewer',
+        name: 'file-viewer',
         layout: false,
         hideInMenu: true,
-        component: "./Auth/Regist"
+        component: './FileViewer',
     },
     {
-        path: "*",
-        redirect: "/outline",
+        path: '*',
+        redirect: '/outline',
     },
     {
-        component: "./404",
+        component: './404',
     },
 ];
diff --git a/package.json b/package.json
index f180e1201e37ebb896a4c6447c17c57d622a43fd..ad9473a68dbab20367a27b2b581413e82ec213c9 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
         "react-dnd": "^14.0.4",
         "react-dnd-html5-backend": "^14.0.2",
         "react-dom": "^17.0.0",
+        "react-file-viewer": "^1.2.1",
         "react-fittext": "^1.0.0",
         "react-helmet-async": "^1.0.4",
         "react-router": "^4.3.1",
@@ -145,4 +146,4 @@
     "resolutions": {
         "styled-components": "^5"
     }
-}
\ No newline at end of file
+}
diff --git a/src/app.tsx b/src/app.tsx
index 23de7a135c811e4cd406972e9f44dca81df84ebf..fc2b11e7519b6b29af2631954374db2a179f8f46 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -17,7 +17,7 @@ import zhCN from 'antd/lib/locale/zh_CN';
 const isDev = process.env.NODE_ENV === 'development';
 const ignorePathname = ["/login", "/regist"]
 
-const siteEnv = window.siteEnv
+const siteEnv = (window as any).siteEnv
 
 /** 获取用户信息比较慢的时候会展示一个 loading */
 export const initialStateConfig = {
@@ -92,18 +92,18 @@ export const layout: RunTimeLayoutConfig = (props) => {
         childrenRender(dom, props) {
             return <ConfigProvider locale={zhCN}>{dom}</ConfigProvider>
         },
-        headerRender: (props, dom) => <HeaderCls children={dom} />,
+        headerRender: (props, dom) => <HeaderCls >{dom}</HeaderCls>,
         menuItemRender,
         contentStyle: {
             margin: ~initialState?.location?.pathname.indexOf("/sys") ? 0 : 12,
         },
         links: isDev
             ? [
-                <Link to="/umi/plugin/openapi" target="_blank">
+                <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
                     <LinkOutlined />
                     <span>OpenAPI 文档</span>
                 </Link>,
-                <Link to="/~docs">
+                <Link key="docs" to="/~docs">
                     <BookOutlined />
                     <span>业务组件文档</span>
                 </Link>,
diff --git a/src/components/FileViewer/DocViewer.tsx b/src/components/FileViewer/DocViewer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c591c833f0ce97391dd02bcd34fce695f007ebf1
--- /dev/null
+++ b/src/components/FileViewer/DocViewer.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+/* @ts-ignore */
+import Loading from "@/components/Loading"
+
+type DocProps = {
+    filePath: string
+}
+
+export const TextViewer: React.FC<DocProps> = (props) => {
+    const { filePath } = props;
+    const [html, setHtml] = React.useState("")
+
+    const [loading, setLoading] = React.useState(true)
+
+    const fetcher = () => {
+        const jsonFile = new XMLHttpRequest();
+        jsonFile.open('GET', filePath, true);
+        jsonFile.send();
+        jsonFile.responseType = 'arraybuffer';
+        jsonFile.onreadystatechange = () => {
+            if (jsonFile.readyState === 4 && jsonFile.status === 200) {
+                const b = new Blob([jsonFile.response])
+                const r = new FileReader() as any
+                r.readAsText(b, "utf-8")
+                r.onload = () => {
+                    setLoading(false)
+                    setHtml(r.result.replace(/\n/g, "<br/>"))
+                }
+            }
+        };
+    }
+
+    React.useEffect(() => {
+        fetcher()
+    }, [])
+
+    if (loading)
+        return <Loading />
+
+    return (
+        <div dangerouslySetInnerHTML={{ __html: html }} style={{ padding: 20 }} />
+    )
+}
+
diff --git a/src/locales/en-US/menu.ts b/src/locales/en-US/menu.ts
index 5c08b55e27b667381baf09e8fb56a3d618faf974..ab1c4eacd979cd80355e09772091fba08a9bc18e 100644
--- a/src/locales/en-US/menu.ts
+++ b/src/locales/en-US/menu.ts
@@ -17,6 +17,7 @@ export default {
   "menu.sys.approval": "审批管理",
   "menu.sys.approval.approval": "待审批",
   "menu.sys.approval.record": "审批记录",
+  "menu.file-viewer": "文件预览",
 
   "menu.login": "用户登录",
   "menu.regist": "注册账号",
diff --git a/src/locales/zh-CN/menu.ts b/src/locales/zh-CN/menu.ts
index 99ed866f89a5649682d3585f40d168edf2135108..d0922efc53126e6422bc07f1e1fc7e30a8d1e209 100644
--- a/src/locales/zh-CN/menu.ts
+++ b/src/locales/zh-CN/menu.ts
@@ -17,6 +17,7 @@ export default {
   "menu.sys.approval": "审批管理",
   "menu.sys.approval.approval": "待审批",
   "menu.sys.approval.record": "审批记录",
+  "menu.file-viewer": "文件预览",
 
   "menu.login": "用户登录",
   "menu.regist": "注册账号",
diff --git a/src/pages/FileViewer/index.tsx b/src/pages/FileViewer/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3670a23a05847c01649206c71d6962f15a4e6658
--- /dev/null
+++ b/src/pages/FileViewer/index.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+/* @ts-ignore */
+import FileViewer from 'react-file-viewer'
+import { useLocation } from "umi"
+import { TextViewer } from "@/components/FileViewer/DocViewer"
+
+const Viewer: React.FC = () => {
+    const { query } = useLocation() as any
+    const { url, file_type } = query
+
+    const l = url.split('.')
+    const fType = l[l.length - 1]
+
+    const fileType = file_type ?? fType
+
+    if (fileType === "txt")
+        return <TextViewer filePath={url} />
+
+    return (
+        /* @ts-ignore */
+        <FileViewer
+            fileType={file_type ?? fType}
+            filePath={url}
+            onError={() => console.log('Failed to load')}
+            errorComponent={<>错误</>}
+            unsupportedComponent={() => <>暂不支持</>}
+        />
+    )
+}
+
+export default Viewer
\ No newline at end of file
diff --git a/src/pages/Outline/index.tsx b/src/pages/Outline/index.tsx
index 09ff7bbb86e8b557bdc5d907eb248c88254f3ac9..0500c31736cababe63a86f4779b33a723bae8afc 100644
--- a/src/pages/Outline/index.tsx
+++ b/src/pages/Outline/index.tsx
@@ -63,6 +63,14 @@ const TestDemand: React.FC = () => {
         message.success('下载成功');
     };
 
+
+    const handlePreview = (row: any): any => {
+        const l = row.name.split(".")
+        const fileType = l[l.length - 1]
+        if (["doc", "xls"].includes(fileType)) return message.warning("暂不支持07版之前的Office文件预览")
+        window.open(`/file-viewer?url=${location.origin}/api/outline/download/${row.id}&file_type=${fileType}`)
+    }
+
     const columns: TableColumnProps<any>[] = [
         {
             title: '标题',
@@ -77,21 +85,21 @@ const TestDemand: React.FC = () => {
             dataIndex: 'remark',
             ellipsis: true,
             width: 200,
-            render(_, row) {
-                return <OverflowText children={_} />
+            render(_) {
+                return <OverflowText >{_}</OverflowText>
             }
         },
         {
             title: '创建人',
             dataIndex: 'owner',
-            render(_, row) {
+            render(_) {
                 return _ || "-"
             }
         },
         {
             title: '创建日期',
             dataIndex: 'gmt_created',
-            render(_, row) {
+            render(_) {
                 return _ || "-"
             }
         },
@@ -102,6 +110,12 @@ const TestDemand: React.FC = () => {
             render(row) {
                 return (
                     <Space>
+                        <Typography.Link
+                            onClick={() => handlePreview(row)}
+                        >
+                            预览
+                        </Typography.Link>
+
                         {
                             access.canCurrentTester(row.owner) &&
                             <span onClick={() => handleEdit(row)}>