1

2025-07-30 18:56:14 +08:00 · 2025-07-30 18:56:14 +08:00 · e1df05b96e
parent 42c69231e6
commit e1df05b96e
30 changed files with 1351 additions and 166 deletions
--- a/index.html
+++ b/index.html
@ -5,7 +5,7 @@
  <link href="/vite.svg" rel="icon" type="image/svg+xml"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title></title>
-  <link href="/iconfont/iconfont.css" rel="stylesheet" type="text/css">
+  <link href="/iconfont/ali/iconfont.css" rel="stylesheet" type="text/css">
  <style>
    html {
      overflow: hidden;
@ -29,6 +29,6 @@
 <body>
 <div id="app"></div>
 <script src="/src/main.ts" type="module"></script>
-<script src="/iconfont/iconfont.js"></script>
+<script src="/iconfont/ali/iconfont.js"></script>
 </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -14,6 +14,7 @@
        "@idux/pro": "^2.6.3",
        "axios": "1.7.4",
        "decimal.js": "^10.4.3",
+        "echarts": "^6.0.0",
        "gridstack": "^12.0.0",
        "logan-web": "^1.1.0",
        "luxon": "^3.4.4",
@ -2940,6 +2941,22 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.139",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.139.tgz",
@ -6651,6 +6668,21 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "@idux/pro": "^2.6.3",
    "axios": "1.7.4",
    "decimal.js": "^10.4.3",
+    "echarts": "^6.0.0",
    "gridstack": "^12.0.0",
    "logan-web": "^1.1.0",
    "luxon": "^3.4.4",
--- a/plugin/file-watcher.ts
+++ b/plugin/file-watcher.ts
@ -0,0 +1,35 @@
+import { Plugin } from 'vite'
+import fs from 'fs'
+import path from 'path'
+
+interface FileWatcherOptions {
+  file: string;
+  fn: (content: string) => void;
+  delay?: number;
+}
+
+export function fileWatcher(options: FileWatcherOptions): Plugin {
+  const {file, fn, delay = 300} = options
+  let debounceTimer: NodeJS.Timeout | null = null
+
+  return {
+    name: 'file-watcher-plugin',
+    configureServer(server) {
+      server.watcher.add(path.resolve(file))
+
+      server.watcher.on('change', (filePath: string) => {
+        if (filePath === path.resolve(file)) {
+          if (debounceTimer) clearTimeout(debounceTimer)
+          debounceTimer = setTimeout(() => {
+            try {
+              const content = fs.readFileSync(filePath, 'utf-8')
+              fn(content)
+            } catch (error) {
+              console.error('文件变化处理失败:', error)
+            }
+          }, delay)
+        }
+      })
+    },
+  }
+}
--- a/plugin/iconfont-dts.ts
+++ b/plugin/iconfont-dts.ts
@ -0,0 +1,31 @@
+import fs from 'fs'
+
+interface IconfontJson {
+  font_family: string;
+  css_prefix_text: string;
+  glyphs: {
+    icon_id: string
+    font_class: string
+    unicode: string
+    name: string
+  }[];
+}
+
+export default function iconfontDts(outFile: string) {
+  return function (content: string) {
+    const json = JSON.parse(content) as IconfontJson
+    const names = json.glyphs.map(glyph => glyph.font_class)
+    console.log('正在生成文件：', outFile)
+    const dts = `export {}
+
+declare global {
+  namespace IconfontTypes {
+    type name = ${names.map(name => `'${name}'`).join('\n        | ')}
+  }
+}
+`
+    fs.writeFileSync(outFile, dts, {encoding: 'utf-8'})
+    console.log('文件生成完成')
+
+  }
+}
--- a/public/iconfont/ali/demo.css
+++ b/public/iconfont/ali/demo.css
@ -31,7 +31,7 @@
 }

 #tabs {
-  border-bottom: 1px solid #EEEEEE;
+  border-bottom: 1px solid #eee;
 }

 #tabs li {
@ -45,13 +45,13 @@
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
-  color: #666666;
+  color: #666;
 }


 #tabs .active {
  border-bottom-color: #FF0000;
-  color: #222222;
+  color: #222;
 }

 .tab-container .content {
@ -66,7 +66,7 @@
 }

 .main .logo {
-  color: #333333;
+  color: #333;
  text-align: left;
  margin-bottom: 30px;
  line-height: 1;
@ -78,7 +78,7 @@

 .main .logo a {
  font-size: 160px;
-  color: #333333;
+  color: #333;
 }

 .helps {
@ -89,7 +89,7 @@
  padding: 20px;
  margin: 10px 0;
  border: solid 1px #E7E1CD;
-  background-color: #FFFDEF;
+  background-color: #fffdef;
  overflow: auto;
 }

@ -118,7 +118,7 @@
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
-  color: #333333;
+  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
@ -142,12 +142,12 @@

 .icon_lists li .name,
 .icon_lists li .code-name {
-  color: #666666;
+  color: #666;
 }

 /* markdown 样式 */
 .markdown {
-  color: #666666;
+  color: #666;
  font-size: 14px;
  line-height: 1.8;
 }
@ -206,7 +206,7 @@
 .markdown hr {
  height: 1px;
  border: 0;
-  background: #E9E9E9;
+  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
 }
@ -219,16 +219,16 @@
 .markdown > blockquote,
 .markdown > .highlight,
 .markdown > ol,
-.markdown > ul {
+.markdown>ul {
  width: 80%;
 }

-.markdown ul > li {
+.markdown ul>li {
  list-style: circle;
 }

 .markdown > ul li,
-.markdown blockquote ul > li {
+.markdown blockquote ul>li {
  margin-left: 20px;
  padding-left: 4px;
 }
@ -238,12 +238,12 @@
  margin: 0.6em 0;
 }

-.markdown ol > li {
+.markdown ol>li {
  list-style: decimal;
 }

 .markdown > ol li,
-.markdown blockquote ol > li {
+.markdown blockquote ol>li {
  margin-left: 20px;
  padding-left: 4px;
 }
@ -251,7 +251,7 @@
 .markdown code {
  margin: 0 3px;
  padding: 0 5px;
-  background: #EEEEEE;
+  background: #eee;
  border-radius: 3px;
 }

@ -264,20 +264,20 @@
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
-  border: 1px solid #E9E9E9;
+  border: 1px solid #e9e9e9;
  width: 95%;
  margin-bottom: 24px;
 }

 .markdown > table th {
  white-space: nowrap;
-  color: #333333;
+  color: #333;
  font-weight: 600;
 }

 .markdown > table th,
 .markdown > table td {
-  border: 1px solid #E9E9E9;
+  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
 }
@ -289,7 +289,7 @@
 .markdown blockquote {
  font-size: 90%;
  color: #999999;
-  border-left: 4px solid #E9E9E9;
+  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
 }
@ -305,7 +305,7 @@
 }

 .markdown .waiting {
-  color: #CCCCCC;
+  color: #ccc;
 }

 .markdown h1:hover .anchor,
@ -319,7 +319,7 @@
 }

 .markdown > br,
-.markdown > p > br {
+.markdown>p>br {
  clear: both;
 }

@ -343,25 +343,25 @@
 .hljs-strong,
 .hljs-emphasis,
 .hljs-quote {
-  color: #DF5000;
+  color: #df5000;
 }

 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-type {
-  color: #A71D5D;
+  color: #a71d5d;
 }

 .hljs-literal,
 .hljs-symbol,
 .hljs-bullet,
 .hljs-attribute {
-  color: #0086B3;
+  color: #0086b3;
 }

 .hljs-section,
 .hljs-name {
-  color: #63A35C;
+  color: #63a35c;
 }

 .hljs-tag {
@ -374,17 +374,17 @@
 .hljs-selector-class,
 .hljs-selector-attr,
 .hljs-selector-pseudo {
-  color: #795DA3;
+  color: #795da3;
 }

 .hljs-addition {
  color: #55A532;
-  background-color: #EAFFEA;
+  background-color: #eaffea;
 }

 .hljs-deletion {
  color: #BD2C00;
-  background-color: #FFECEC;
+  background-color: #ffecec;
 }

 .hljs-link {
@ -427,7 +427,7 @@ pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection {
  text-shadow: none;
-  background: #B3D4FC;
+  background: #b3d4fc;
 }

 pre[class*="language-"]::selection,
@ -435,7 +435,7 @@ pre[class*="language-"] ::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] ::selection {
  text-shadow: none;
-  background: #B3D4FC;
+  background: #b3d4fc;
 }

@media print {
@ -455,7 +455,7 @@ pre[class*="language-"] {

 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  background: #F5F2F0;
+  background: #f5f2f0;
 }

 /* Inline code */
@ -473,7 +473,7 @@ pre[class*="language-"] {
 }

 .token.punctuation {
-  color: #999999;
+  color: #999;
 }

 .namespace {
@ -487,7 +487,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: #990055;
+  color: #905;
 }

 .token.selector,
@ -496,7 +496,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #669900;
+  color: #690;
 }

 .token.operator,
@ -504,14 +504,14 @@ pre[class*="language-"] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  color: #9A6E3A;
+  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
 }

 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  color: #0077AA;
+  color: #07a;
 }

 .token.function,
@ -522,7 +522,7 @@ pre[class*="language-"] {
 .token.regex,
 .token.important,
 .token.variable {
-  color: #EE9900;
+  color: #e90;
 }

 .token.important,
--- a/public/iconfont/ali/demo_index.html
+++ b/public/iconfont/ali/demo_index.html
@ -47,7 +47,7 @@
      <li class="dib"><span>Symbol</span></li>
    </ul>

-    <a class="nav-more" href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4902724" target="_blank">查看项目</a>
+    <a class="nav-more" href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4985351" target="_blank">查看项目</a>

  </div>
  <div class="tab-container">
@ -55,9 +55,63 @@
      <ul class="icon_lists dib-box">

        <li class="dib">
-          <span class="icon iconfont">&#xe601;</span>
-          <div class="name">删除</div>
-          <div class="code-name">&amp;#xe601;</div>
+          <span class="icon iconfont">&#xe667;</span>
+          <div class="name">menu</div>
+          <div class="code-name">&amp;#xe667;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe689;</span>
+          <div class="name">menu_3rolepermiss</div>
+          <div class="code-name">&amp;#xe689;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe65b;</span>
+          <div class="name">cog</div>
+          <div class="code-name">&amp;#xe65b;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe627;</span>
+          <div class="name">user</div>
+          <div class="code-name">&amp;#xe627;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe670;</span>
+          <div class="name">bar-chart</div>
+          <div class="code-name">&amp;#xe670;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe615;</span>
+          <div class="name">arrow-up</div>
+          <div class="code-name">&amp;#xe615;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe7de;</span>
+          <div class="name">exclamation circle-f</div>
+          <div class="code-name">&amp;#xe7de;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe7e2;</span>
+          <div class="name">check-circle-fill</div>
+          <div class="code-name">&amp;#xe7e2;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe600;</span>
+          <div class="name">map-pin</div>
+          <div class="code-name">&amp;#xe600;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe629;</span>
+          <div class="name">文本框</div>
+          <div class="code-name">&amp;#xe629;</div>
        </li>

        <li class="dib">
@ -67,9 +121,21 @@
        </li>

        <li class="dib">
-          <span class="icon iconfont">&#xe629;</span>
-          <div class="name">文本框</div>
-          <div class="code-name">&amp;#xe629;</div>
+          <span class="icon iconfont">&#xe601;</span>
+          <div class="name">删除</div>
+          <div class="code-name">&amp;#xe601;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe777;</span>
+          <div class="name">map-marker</div>
+          <div class="code-name">&amp;#xe777;</div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont">&#xe60a;</span>
+          <div class="name">循环</div>
+          <div class="code-name">&amp;#xe60a;</div>
        </li>

      </ul>
@ -90,9 +156,9 @@
        <pre><code class="language-css"
        >@font-face {
  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1745541124485') format('woff2'),
-       url('iconfont.woff?t=1745541124485') format('woff'),
-       url('iconfont.ttf?t=1745541124485') format('truetype');
+  src: url('iconfont.woff2?t=1753872505940') format('woff2'),
+       url('iconfont.woff?t=1753872505940') format('woff'),
+       url('iconfont.ttf?t=1753872505940') format('truetype');
 }
 </code></pre>
        <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -119,11 +185,92 @@
      <ul class="icon_lists dib-box">

        <li class="dib">
-          <span class="icon iconfont icon-shanchu"></span>
+          <span class="icon iconfont icon-menu"></span>
          <div class="name">
-            删除
+            menu
          </div>
-          <div class="code-name">.icon-shanchu
+          <div class="code-name">.icon-menu
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-menu_rolepermiss"></span>
+          <div class="name">
+            menu_3rolepermiss
+          </div>
+          <div class="code-name">.icon-menu_rolepermiss
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-cog"></span>
+          <div class="name">
+            cog
+          </div>
+          <div class="code-name">.icon-cog
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-user"></span>
+          <div class="name">
+            user
+          </div>
+          <div class="code-name">.icon-user
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-bar-chart"></span>
+          <div class="name">
+            bar-chart
+          </div>
+          <div class="code-name">.icon-bar-chart
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-arrow-up"></span>
+          <div class="name">
+            arrow-up
+          </div>
+          <div class="code-name">.icon-arrow-up
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-exclamationcircle-f"></span>
+          <div class="name">
+            exclamation circle-f
+          </div>
+          <div class="code-name">.icon-exclamationcircle-f
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-check-circle-fill"></span>
+          <div class="name">
+            check-circle-fill
+          </div>
+          <div class="code-name">.icon-check-circle-fill
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-map-pin"></span>
+          <div class="name">
+            map-pin
+          </div>
+          <div class="code-name">.icon-map-pin
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-wenbenkuang"></span>
+          <div class="name">
+            文本框
+          </div>
+          <div class="code-name">.icon-wenbenkuang
          </div>
        </li>

@ -137,11 +284,29 @@
        </li>

        <li class="dib">
-          <span class="icon iconfont icon-wenbenkuang"></span>
+          <span class="icon iconfont icon-shanchu"></span>
          <div class="name">
-            文本框
+            删除
          </div>
-          <div class="code-name">.icon-wenbenkuang
+          <div class="code-name">.icon-shanchu
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-mapmarker"></span>
+          <div class="name">
+            map-marker
+          </div>
+          <div class="code-name">.icon-mapmarker
+          </div>
+        </li>
+
+        <li class="dib">
+          <span class="icon iconfont icon-xunhuan"></span>
+          <div class="name">
+            循环
+          </div>
+          <div class="code-name">.icon-xunhuan
          </div>
        </li>

@ -174,10 +339,82 @@

        <li class="dib">
          <svg aria-hidden="true" class="icon svg-icon">
-            <use xlink:href="#icon-shanchu"></use>
+            <use xlink:href="#icon-menu"></use>
          </svg>
-          <div class="name">删除</div>
-          <div class="code-name">#icon-shanchu</div>
+          <div class="name">menu</div>
+          <div class="code-name">#icon-menu</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-menu_rolepermiss"></use>
+          </svg>
+          <div class="name">menu_3rolepermiss</div>
+          <div class="code-name">#icon-menu_rolepermiss</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-cog"></use>
+          </svg>
+          <div class="name">cog</div>
+          <div class="code-name">#icon-cog</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-user"></use>
+          </svg>
+          <div class="name">user</div>
+          <div class="code-name">#icon-user</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-bar-chart"></use>
+          </svg>
+          <div class="name">bar-chart</div>
+          <div class="code-name">#icon-bar-chart</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-arrow-up"></use>
+          </svg>
+          <div class="name">arrow-up</div>
+          <div class="code-name">#icon-arrow-up</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-exclamationcircle-f"></use>
+          </svg>
+          <div class="name">exclamation circle-f</div>
+          <div class="code-name">#icon-exclamationcircle-f</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-check-circle-fill"></use>
+          </svg>
+          <div class="name">check-circle-fill</div>
+          <div class="code-name">#icon-check-circle-fill</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-map-pin"></use>
+          </svg>
+          <div class="name">map-pin</div>
+          <div class="code-name">#icon-map-pin</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-wenbenkuang"></use>
+          </svg>
+          <div class="name">文本框</div>
+          <div class="code-name">#icon-wenbenkuang</div>
        </li>

        <li class="dib">
@ -190,10 +427,26 @@

        <li class="dib">
          <svg aria-hidden="true" class="icon svg-icon">
-            <use xlink:href="#icon-wenbenkuang"></use>
+            <use xlink:href="#icon-shanchu"></use>
          </svg>
-          <div class="name">文本框</div>
-          <div class="code-name">#icon-wenbenkuang</div>
+          <div class="name">删除</div>
+          <div class="code-name">#icon-shanchu</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-mapmarker"></use>
+          </svg>
+          <div class="name">map-marker</div>
+          <div class="code-name">#icon-mapmarker</div>
+        </li>
+
+        <li class="dib">
+          <svg aria-hidden="true" class="icon svg-icon">
+            <use xlink:href="#icon-xunhuan"></use>
+          </svg>
+          <div class="name">循环</div>
+          <div class="code-name">#icon-xunhuan</div>
        </li>

      </ul>
--- a/public/iconfont/ali/iconfont.css
+++ b/public/iconfont/ali/iconfont.css
@ -0,0 +1,71 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4985351 */
+  src: url('iconfont.woff2?t=1753872505940') format('woff2'),
+  url('iconfont.woff?t=1753872505940') format('woff'),
+  url('iconfont.ttf?t=1753872505940') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-menu:before {
+  content: "\e667";
+}
+
+.icon-menu_rolepermiss:before {
+  content: "\e689";
+}
+
+.icon-cog:before {
+  content: "\e65b";
+}
+
+.icon-user:before {
+  content: "\e627";
+}
+
+.icon-bar-chart:before {
+  content: "\e670";
+}
+
+.icon-arrow-up:before {
+  content: "\e615";
+}
+
+.icon-exclamationcircle-f:before {
+  content: "\e7de";
+}
+
+.icon-check-circle-fill:before {
+  content: "\e7e2";
+}
+
+.icon-map-pin:before {
+  content: "\e600";
+}
+
+.icon-wenbenkuang:before {
+  content: "\e629";
+}
+
+.icon-zujian:before {
+  content: "\e61e";
+}
+
+.icon-shanchu:before {
+  content: "\e601";
+}
+
+.icon-mapmarker:before {
+  content: "\e777";
+}
+
+.icon-xunhuan:before {
+  content: "\e60a";
+}
+
--- a/public/iconfont/ali/iconfont.js
+++ b/public/iconfont/ali/iconfont.js
--- a/public/iconfont/ali/iconfont.json
+++ b/public/iconfont/ali/iconfont.json
@ -0,0 +1,107 @@
+{
+  "id": "4985351",
+  "name": "回收监管",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "1174312",
+      "name": "menu",
+      "font_class": "menu",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "12891317",
+      "name": "menu_3rolepermiss",
+      "font_class": "menu_rolepermiss",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "1261484",
+      "name": "cog",
+      "font_class": "cog",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "10793071",
+      "name": "user",
+      "font_class": "user",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "32804214",
+      "name": "bar-chart",
+      "font_class": "bar-chart",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "1898529",
+      "name": "arrow-up",
+      "font_class": "arrow-up",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "6151171",
+      "name": "exclamation circle-f",
+      "font_class": "exclamationcircle-f",
+      "unicode": "e7de",
+      "unicode_decimal": 59358
+    },
+    {
+      "icon_id": "6151177",
+      "name": "check-circle-fill",
+      "font_class": "check-circle-fill",
+      "unicode": "e7e2",
+      "unicode_decimal": 59362
+    },
+    {
+      "icon_id": "11399087",
+      "name": "map-pin",
+      "font_class": "map-pin",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "11121385",
+      "name": "文本框",
+      "font_class": "wenbenkuang",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "10352352",
+      "name": "组件",
+      "font_class": "zujian",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "17716099",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "837051",
+      "name": "map-marker",
+      "font_class": "mapmarker",
+      "unicode": "e777",
+      "unicode_decimal": 59255
+    },
+    {
+      "icon_id": "31499371",
+      "name": "循环",
+      "font_class": "xunhuan",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    }
+  ]
+}
--- a/public/iconfont/ali/iconfont.ttf
+++ b/public/iconfont/ali/iconfont.ttf
--- a/public/iconfont/ali/iconfont.woff
+++ b/public/iconfont/ali/iconfont.woff
--- a/public/iconfont/ali/iconfont.woff2
+++ b/public/iconfont/ali/iconfont.woff2
--- a/public/iconfont/iconfont.css
+++ b/public/iconfont/iconfont.css
@ -1,27 +0,0 @@
-@font-face {
-  font-family: "iconfont"; /* Project id 4902724 */
-  src: url('iconfont.woff2?t=1745541124485') format('woff2'),
-  url('iconfont.woff?t=1745541124485') format('woff'),
-  url('iconfont.ttf?t=1745541124485') format('truetype');
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-shanchu:before {
-  content: "\e601";
-}
-
-.icon-zujian:before {
-  content: "\e61e";
-}
-
-.icon-wenbenkuang:before {
-  content: "\e629";
-}
-
--- a/public/iconfont/iconfont.js
+++ b/public/iconfont/iconfont.js
@ -1 +0,0 @@
-window._iconfont_svg_string_4902724='<svg><symbol id="icon-shanchu" viewBox="0 0 1024 1024"><path d="M92.748283 203.507071h838.503434v44.140606H92.748283zM644.402424 115.238788v44.127677h44.127677V115.238788c0-24.384646-19.75596-44.127677-43.998384-44.127677h-265.050505a43.97899 43.97899 0 0 0-31.172525 12.916364 43.918222 43.918222 0 0 0-12.825859 31.211313v44.127677h44.127677V115.238788h264.791919z m0 0" fill="#3D3D3D" ></path><path d="M203.073939 909.614545v-661.979798H158.946263V909.575758c0 24.410505 19.639596 44.179394 44.179394 44.179394h617.761616c24.410505 0 44.179394-19.639596 44.179394-44.179394V247.634747H820.926061v661.979798H203.073939z m0 0" fill="#3D3D3D" ></path><path d="M313.412525 335.90303h44.127677V733.090909h-44.127677V335.90303z m176.523637 0h44.127676V733.090909H489.936162V335.90303z m176.523636 0h44.127677V733.090909h-44.127677V335.90303z m0 0" fill="#3D3D3D" ></path></symbol><symbol id="icon-zujian" viewBox="0 0 1024 1024"><path d="M768 928H128a32 32 0 0 1-32-32V256a32 32 0 0 1 32-32h195.84A132.48 132.48 0 0 1 320 192a128 128 0 0 1 256 0 132.48 132.48 0 0 1-3.84 32H768a32 32 0 0 1 32 32v195.84A132.48 132.48 0 0 1 832 448a128 128 0 0 1 0 256 132.48 132.48 0 0 1-32-3.84V896a32 32 0 0 1-32 32z m-608-64h576v-216.96a32.64 32.64 0 0 1 19.2-29.44 32.64 32.64 0 0 1 33.92 5.76 64 64 0 1 0 0-94.72 31.36 31.36 0 0 1-33.92 5.76 32.64 32.64 0 0 1-19.2-29.44V288H519.04a32.64 32.64 0 0 1-29.44-19.2 31.36 31.36 0 0 1 5.76-33.92 64 64 0 1 0-94.72 0 31.36 31.36 0 0 1 5.76 33.92 32.64 32.64 0 0 1-29.44 19.2H160z" fill="#4D4D4D" ></path></symbol><symbol id="icon-wenbenkuang" viewBox="0 0 1024 1024"><path d="M914.56 1010.56H109.44a96 96 0 0 1-95.36-96V110.08A96 96 0 0 1 109.44 14.08h805.12a96 96 0 0 1 95.36 96v804.48a96 96 0 0 1-95.36 96zM109.44 78.08a32 32 0 0 0-31.36 32v804.48a32 32 0 0 0 31.36 32h805.12a32 32 0 0 0 31.36-32V110.08a32 32 0 0 0-31.36-32z" fill="#323333" ></path><path d="M287.36 238.08h448v71.68H553.6v476.8H471.04V309.76H287.36z" fill="#323333" ></path></symbol></svg>',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,a,o,d,l,c=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4902724,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?c(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),i()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(o=i,d=n.document,l=!1,h(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){l||(l=!0,o())}function h(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}})(window);
--- a/public/iconfont/iconfont.json
+++ b/public/iconfont/iconfont.json
@ -1,30 +0,0 @@
-{
-  "id": "4902724",
-  "name": "wh",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "17716099",
-      "name": "删除",
-      "font_class": "shanchu",
-      "unicode": "e601",
-      "unicode_decimal": 58881
-    },
-    {
-      "icon_id": "10352352",
-      "name": "组件",
-      "font_class": "zujian",
-      "unicode": "e61e",
-      "unicode_decimal": 58910
-    },
-    {
-      "icon_id": "11121385",
-      "name": "文本框",
-      "font_class": "wenbenkuang",
-      "unicode": "e629",
-      "unicode_decimal": 58921
-    }
-  ]
-}
--- a/public/iconfont/iconfont.ttf
+++ b/public/iconfont/iconfont.ttf
--- a/public/iconfont/iconfont.woff
+++ b/public/iconfont/iconfont.woff
--- a/public/iconfont/iconfont.woff2
+++ b/public/iconfont/iconfont.woff2
--- a/src/components/echarts/Charts.vue
+++ b/src/components/echarts/Charts.vue
@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { useEcharts } from '@/components/echarts/index.ts'
+import type { EChartsType } from 'echarts/core'
+
+const props = withDefaults(defineProps<{
+  reflush?: boolean
+  option: Echarts.Option
+}>(), {
+  reflush: true
+})
+
+const container = ref<HTMLElement | null>(null)
+let ins: EChartsType | null = null
+
+onMounted(() => {
+  if (props.reflush) {
+    watch(
+        () => props.option,
+        (newVal, _) => {
+          ins?.setOption(newVal)
+        },
+        {deep: true})
+  }
+
+  ins = useEcharts(container.value!)
+  ins.setOption(props.option)
+})
+
+onBeforeUnmount(() => {
+  ins?.dispose()
+})
+
+defineExpose({
+  getIns() {
+    return ins!
+  }
+})
+</script>
+
+<template>
+  <div ref="container"></div>
+</template>
+
--- a/src/components/echarts/echarts.d.ts
+++ b/src/components/echarts/echarts.d.ts
@ -0,0 +1,39 @@
+export {}
+
+declare global {
+  namespace Echarts {
+
+    import type {
+      // 系列类型的定义后缀都为 SeriesOption
+      BarSeriesOption,
+      LineSeriesOption
+    } from 'echarts/charts'
+    import type {
+      // 组件类型的定义后缀都为 ComponentOption
+      TitleComponentOption,
+      TooltipComponentOption,
+      GridComponentOption,
+      DatasetComponentOption,
+      LegendComponentOption,
+      AriaComponentOption
+    } from 'echarts/components'
+    import type {
+      ComposeOption,
+    } from 'echarts/core'
+
+
+    // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+    type Option = ComposeOption<
+        | BarSeriesOption
+        | LineSeriesOption
+        | TitleComponentOption
+        | TooltipComponentOption
+        | GridComponentOption
+        | DatasetComponentOption
+        | LegendComponentOption
+        | AriaComponentOption
+    >;
+
+  }
+}
+
--- a/src/components/echarts/index.ts
+++ b/src/components/echarts/index.ts
@ -0,0 +1,32 @@
+import * as echarts from 'echarts/core'
+import { BarChart, } from 'echarts/charts'
+import {
+  AriaComponent,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent
+} from 'echarts/components'
+import { SVGRenderer } from 'echarts/renderers'
+
+import type { App } from 'vue'
+
+const install = (_: App): void => {
+  echarts.use([
+    TooltipComponent,
+    GridComponent,
+    BarChart,
+    SVGRenderer,
+    LegendComponent,
+    AriaComponent
+  ])
+}
+export default {install}
+
+export function useEcharts(el: HTMLElement | string) {
+  if (typeof el === 'string') {
+    el = document.getElementById(el) as HTMLElement
+  }
+  return echarts.init(el)
+}
+
+
--- a/src/components/iconfont/Iconfont.vue
+++ b/src/components/iconfont/Iconfont.vue
@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+withDefaults(defineProps<{
+  name: IconfontTypes.name
+  wrapper?: boolean
+  className?: string
+}>(), {
+  wrapper: false
+})
+</script>
+
+<template>
+  <div v-if="wrapper" class="iconfont-wrapper">
+    <i :class="['icon-'+name, className]" class="iconfont"></i>
+  </div>
+  <i v-else :class="['icon-'+name, className]" class="iconfont"></i>
+</template>
+
+<style lang="stylus" scoped>
+
+
+</style>
--- a/src/components/iconfont/iconfont.d.ts
+++ b/src/components/iconfont/iconfont.d.ts
@ -0,0 +1,20 @@
+export {}
+
+declare global {
+  namespace IconfontTypes {
+    type name = 'menu'
+        | 'menu_rolepermiss'
+        | 'cog'
+        | 'user'
+        | 'bar-chart'
+        | 'arrow-up'
+        | 'exclamationcircle-f'
+        | 'check-circle-fill'
+        | 'map-pin'
+        | 'wenbenkuang'
+        | 'zujian'
+        | 'shanchu'
+        | 'mapmarker'
+        | 'xunhuan'
+  }
+}
--- a/src/dts/components.d.ts
+++ b/src/dts/components.d.ts
@ -7,9 +7,11 @@ export {}

 declare module 'vue' {
  export interface GlobalComponents {
+    Charts: typeof import('./../components/echarts/Charts.vue')['default']
    Dialog: typeof import('./../components/dialog/Dialog.vue')['default']
    District: typeof import('./../components/district/District.vue')['default']
    Funbar: typeof import('./../components/fun-bar/Funbar.vue')['default']
+    Iconfont: typeof import('./../components/iconfont/Iconfont.vue')['default']
    IxAvatar: typeof import('@idux/components/avatar')['IxAvatar']
    IxBreadcrumb: typeof import('@idux/components/breadcrumb')['IxBreadcrumb']
    IxBreadcrumbItem: typeof import('@idux/components/breadcrumb')['IxBreadcrumbItem']
@ -21,6 +23,7 @@ declare module 'vue' {
    IxCol: typeof import('@idux/components/grid')['IxCol']
    IxCollapse: typeof import('@idux/components/collapse')['IxCollapse']
    IxCollapsePanel: typeof import('@idux/components/collapse')['IxCollapsePanel']
+    IxDatePicker: typeof import('@idux/components/date-picker')['IxDatePicker']
    IxDivider: typeof import('@idux/components/divider')['IxDivider']
    IxDrawer: typeof import('@idux/components/drawer')['IxDrawer']
    IxDropdown: typeof import('@idux/components/dropdown')['IxDropdown']
@ -49,6 +52,7 @@ declare module 'vue' {
    IxSpace: typeof import('@idux/components/space')['IxSpace']
    IxTable: typeof import('@idux/components/table')['IxTable']
    IxTabs: typeof import('@idux/components/tabs')['IxTabs']
+    IxTag: typeof import('@idux/components/tag')['IxTag']
    IxTextarea: typeof import('@idux/components/textarea')['IxTextarea']
    IxTooltip: typeof import('@idux/components/tooltip')['IxTooltip']
    IxTreeSelect: typeof import('@idux/components/tree-select')['IxTreeSelect']
--- a/src/main.ts
+++ b/src/main.ts
@ -3,6 +3,7 @@ import '@/assets/styles/css/normalize.css'
 import idux from '@/common/idux'
 import '@/assets/styles/css/index.css'
 import router from '@/common/router/index.ts'
+import echarts from '@/components/echarts/index.ts'

 import { Settings } from 'luxon'
 import { createPinia } from 'pinia'
@ -16,6 +17,7 @@ createApp(App)
    })
    .use(createPinia().use(piniaPluginPersistedstate))
    .use(router)
+    .use(echarts)
    .use(idux)
    .mount('#app')

--- a/src/pages/dispose-recode/DisposeRecode.vue
+++ b/src/pages/dispose-recode/DisposeRecode.vue
@ -1,13 +1,292 @@
+<script lang="ts" setup>
+
+import { useFormGroup } from '@idux/cdk'
+import { TableColumn } from '@idux/components/table'
+import { TablePagination } from '@idux/components/table/src/types'
+import Charts from '@/components/echarts/Charts.vue'
+
+const chartOption = reactive<Echarts.Option>({
+  aria: {
+    enabled: true,
+    decal: {
+      show: true
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  legend: {
+    show: true,
+    top: 0
+  },
+  grid: {
+    outerBounds: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0
+    }
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
+      axisTick: {
+        alignWithLabel: true
+      }
+    }
+  ],
+  yAxis: [
+    {
+      axisLine: {
+        show: true
+      },
+      type: 'value'
+    }
+  ],
+  series: [
+    {
+      name: 'Direct1',
+      type: 'bar',
+      data: [ 10, 52, 200, 334, 390, 330, 220 ],
+    },
+    {
+      name: 'Direct2',
+      type: 'bar',
+      data: [ 10, 52, 200, 334, 390, 330, 220 ]
+    }
+  ]
+})
+
+interface Data {
+  id: string
+  pointName: string
+  street: string
+  microdistrict: string
+  propertyManagement: string
+  statusTxt: string
+  status: 'ZhengChang' | 'FenZhengChang'
+}
+
+const formGroup = useFormGroup({})
+
+const fullData: Data[] = []
+for (let index = 0; index < 10; index++) {
+  fullData.push({
+    id: index + '',
+    pointName: `Edrward ${index}`,
+    street: `Edrward ${index}`,
+    microdistrict: `Edrward ${index}`,
+    propertyManagement: `Edrward ${index}`,
+    statusTxt: `Edrward ${index}`,
+    status: index % 2 === 0 ? 'ZhengChang' : 'FenZhengChang',
+  })
+}
+const data = ref(fullData)
+const columns: TableColumn[] = [
+  {
+    title: '名称',
+    dataKey: 'pointName',
+    customCell: 'pointName'
+  },
+  {
+    title: '所属街道',
+    dataKey: 'street',
+  },
+  {
+    title: '所属小区',
+    dataKey: 'microdistrict',
+  },
+  {
+    title: '所属物业',
+    dataKey: 'propertyManagement'
+  },
+  {
+    title: '运营状态',
+    dataKey: 'statusTxt',
+    customCell: 'status',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    customCell: 'action',
+  }
+]
+
+const pagination = reactive<TablePagination>({
+  pageIndex: 1,
+  pageSize: 10,
+  total: 100,
+  size: 'sm',
+  showTotal: true,
+  onChange(pageIndex: number, pageSize: number) {
+    console.log('------', pageIndex, pageSize)
+    pagination.pageIndex = pageIndex
+    pagination.pageSize = pageSize
+  }
+})
+</script>
+
 <template>
-  <div>
-    处置记录
+  <div class="dispose-recode">
+    <div class="title">垃圾处置记录</div>
+    <div class="desc">管理和分析垃圾处置数据</div>
+    <IxCard class="graph-card">
+      <template #header>
+        <div class="graph-tool">
+          <div>垃圾处置量统计</div>
+          <IxDatePicker type="month"/>
+        </div>
+      </template>
+      <Charts :option="chartOption"/>
+    </IxCard>
+    <IxCard class="table-card">
+      <template #header>
+        <div class="table-tool">
+          <div>垃圾处置记录</div>
+          <IxForm :control="formGroup" class="search-form" layout="inline">
+            <IxFormItem messageTooltip>
+              <IxInput placeholder="请输入收纳点名称"/>
+            </IxFormItem>
+            <IxFormItem messageTooltip>
+              <IxInput placeholder="请输入收纳点名称"/>
+            </IxFormItem>
+          </IxForm>
+          <IxButton icon="download" mode="primary">导出</IxButton>
+        </div>
+      </template>
+      <IxTable :columns="columns" :dataSource="data" :pagination="pagination" autoHeight class="data-table" getKey="id">
+        <template #pointName="{record}">
+          <span style="color: #165DFF;border-radius: 100%;background-color: #165DFF1A;width: 2.25rem;height: 2.25rem;display: inline-flex;justify-content: center;align-items: center;margin-right: 0.5rem"><i class="iconfont icon-mapmarker" style="display: block"></i></span>
+          <span>{{ record.pointName }}</span>
+        </template>
+        <template #action>
+          <IxButton class="detail-btn" icon="eye" mode="text">查看</IxButton>
+        </template>
+        <template #status="{record}">
+          <IxTag v-if="record.status === 'ZhengChang'" status="success">{{ record.statusTxt }}</IxTag>
+          <IxTag v-else status="error">{{ record.statusTxt }}</IxTag>
+        </template>
+      </IxTable>
+    </IxCard>
  </div>
 </template>

-<script lang="ts" setup>
-
-</script>
-
 <style lang="stylus" scoped>
+.dispose-recode {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;

+  .title {
+    font-size: 1.75rem;
+    font-weight bold
+    color #1F2937
+  }
+
+  .desc {
+    color #687280
+    margin-top 1rem
+  }
+
+  .graph-card {
+    padding 0 1rem
+    margin 1rem 0
+    flex 1
+    display flex
+    flex-direction column
+
+    .graph-tool {
+      display: flex;
+      justify-content: space-between;
+      align-items center
+      padding 1rem
+      border-bottom 1px solid #E5E7EB
+
+      & > div:nth-child(1) {
+        flex 9
+        color #1D2129
+        font-weight 600
+        font-size 1.25rem
+      }
+
+      & > :deep(.ix-date-picker):nth-child(2) {
+        flex 1
+        display flex
+      }
+    }
+
+    & > :deep(.ix-card-body) {
+      flex 1
+      width 100%
+
+      & > div:first-child {
+        height: 100%;
+        width 100%;
+      }
+    }
+  }
+
+
+  .table-card {
+    display flex
+    flex-direction column
+    flex 1
+    padding 1rem
+
+    .table-tool {
+      display: flex;
+      justify-content: space-between;
+      align-items center
+      padding 1rem
+      border-bottom 1px solid #E5E7EB
+
+      & > div:nth-child(1) {
+        flex 17
+        color #1D2129
+        font-weight 600
+        font-size 1.25rem
+      }
+
+
+      .search-form {
+        flex 6
+
+        :deep(.ix-form-item) {
+          flex 2
+        }
+      }
+
+      & > :deep(.ix-button ) {
+        flex 1
+      }
+    }
+
+    & > :deep(.ix-card-body) {
+      flex 1
+      padding 0
+    }
+
+    .data-table {
+      :deep(.ix-table-thead .ix-table-cell) {
+        color: #6B7280
+        background-color: #F9FAFB
+        font-weight 500
+      }
+
+      :deep(.ix-table-thead th:not(:last-child))::before {
+        width 0;
+      }
+
+      .detail-btn {
+        color var(--ix-button-primary-bg-color)
+      }
+    }
+  }
+
+}
 </style>
--- a/src/pages/frame/ZsyFrame.vue
+++ b/src/pages/frame/ZsyFrame.vue
@ -9,6 +9,9 @@
      :type="type"
      class="zsy-frame"
  >
+    <template #siderFooter>
+      <IxLayoutSiderTrigger/>
+    </template>
    <template #headerExtra>
      <UserPanel/>
    </template>
@ -45,6 +48,7 @@ import {
  MenuCategory
 } from '@/common/app/contants.ts'
 import Nav from '@/common/router/nav.ts'
+import Iconfont from '@/components/iconfont/Iconfont.vue'

 const appSettingStore = useAppSettingStore()
 const logoImage = computed(() => {
@ -70,7 +74,11 @@ const menuTree = computed(() => {
        pid: it.pid,
        key: it.routeName,
        label: it.title,
-        type: it.menuCategory === MenuCategory.Page ? 'item' : 'sub',
+        // icon: it.icon,
+        icon: h(Iconfont, {className: 'ix-icon ixicon', name: it.icon as IconfontTypes.name}),
+        type: it.menuCategory === MenuCategory.Page ? 'item'
+            : it.menuCategory === MenuCategory.Group ? 'itemGroup'
+                : 'sub',
      }))) as MenuData[]
 })
 const wholeTheme = ref('light')
@ -83,6 +91,7 @@ const mergedTheme = computed(() => {
 })

 function openPageHandler(options: MenuClickOptions) {
+  if (options.type !== 'item') return
  Nav.open({
    insId: options.key as string,
    routeName: options.key as string
@ -92,11 +101,17 @@ function openPageHandler(options: MenuClickOptions) {
 </script>

 <style lang="stylus" scoped>
+
+.ixicon {
+  line-height: unset;
+}
+
 .zsy-frame {
  height: 100%;
  width: 100%;
  overflow hidden

+
  :deep(.ix-layout-content) {
    padding .5rem
  }
@ -138,11 +153,12 @@ function openPageHandler(options: MenuClickOptions) {
 .zsy-frame-content {
  width 100%
  height 100%
+  background-color #F9FAFB
+}

-  :deep(.ix-card-body) {
-    height 100%
-    width 100%
-    overflow auto
-  }
+.zsy-frame-content > :deep(.ix-card-body) {
+  height 100%
+  width 100%
+  overflow auto
 }
 </style>
--- a/src/pages/tsp/Tsp.vue
+++ b/src/pages/tsp/Tsp.vue
@ -1,59 +1,151 @@
 <script lang="ts" setup>
 import { SelectData } from '@idux/components/select/src/types'
 import { useFormGroup } from '@idux/cdk'
+import { TableColumn } from '@idux/components/table'
+import { TablePagination } from '@idux/components/table/src/types'

 const dataSource: SelectData[] = [
  {key: 'ZhengChang', label: '正常运营'},
  {key: 'FenZhengChang', label: '非正常运营'},
 ]
+
+interface Data {
+  id: string
+  pointName: string
+  street: string
+  microdistrict: string
+  propertyManagement: string
+  statusTxt: string
+  status: 'ZhengChang' | 'FenZhengChang'
+}
+
 const formGroup = useFormGroup({})
+
+const fullData: Data[] = []
+for (let index = 0; index < 10; index++) {
+  fullData.push({
+    id: index + '',
+    pointName: `Edrward ${index}`,
+    street: `Edrward ${index}`,
+    microdistrict: `Edrward ${index}`,
+    propertyManagement: `Edrward ${index}`,
+    statusTxt: `Edrward ${index}`,
+    status: index % 2 === 0 ? 'ZhengChang' : 'FenZhengChang',
+  })
+}
+const data = ref(fullData)
+const columns: TableColumn[] = [
+  {
+    title: '名称',
+    dataKey: 'pointName',
+    customCell: 'pointName'
+  },
+  {
+    title: '所属街道',
+    dataKey: 'street',
+  },
+  {
+    title: '所属小区',
+    dataKey: 'microdistrict',
+  },
+  {
+    title: '所属物业',
+    dataKey: 'propertyManagement'
+  },
+  {
+    title: '运营状态',
+    dataKey: 'statusTxt',
+    customCell: 'status',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    customCell: 'action',
+  }
+]
+
+const pagination = reactive<TablePagination>({
+  pageIndex: 1,
+  pageSize: 10,
+  total: 100,
+  size: 'sm',
+  showTotal: true,
+  onChange(pageIndex: number, pageSize: number) {
+    console.log('------', pageIndex, pageSize)
+    pagination.pageIndex = pageIndex
+    pagination.pageSize = pageSize
+  }
+})
 </script>
 <template>
  <div class="tsp">
-    <h2 class="title text-[clamp(1.5rem,3vw,1.75rem)] font-bold text-gray-800">临时收纳点管理</h2>
-    <p class="desc text-gray-500 mt-1">管理和监控所有临时垃圾收纳点的运营状态</p>
+    <div class="title">临时收纳点管理</div>
+    <div class="desc">管理和监控所有临时垃圾收纳点的运营状态</div>
    <IxSpace class="statistics-card" justify="space-between" size="1.5rem">
      <IxCard>
-        <span>收纳点总数</span>
-        <span>24</span>
-        <span>较上月增长 12%</span>
-        <span>图标</span>
+        <div>
+          <div>收纳点总数</div>
+          <div>24</div>
+          <div><i class="iconfont icon-arrow-up"></i>较上月增长 12%</div>
+        </div>
+        <Iconfont name="map-pin" wrapper/>
      </IxCard>
      <IxCard>
-        <span>正常运营数量</span>
-        <span>24</span>
-        <span>较上月增长 12%</span>
-        <span>图标</span>
+        <div>
+          <div>正常运营数量</div>
+          <div>24</div>
+          <div><i class="iconfont icon-arrow-up"></i>较上月增长 8%</div>
+        </div>
+        <Iconfont name="check-circle-fill" wrapper/>
      </IxCard>
      <IxCard>
-        <span>正常运营数量</span>
-        <span>24</span>
-        <span>较上月增长 12%</span>
-        <span>图标</span>
+        <div>
+          <div>非正常运营数量</div>
+          <div>24</div>
+          <div><i class="iconfont icon-arrow-up"></i>较上月增长 2%</div>
+        </div>
+        <Iconfont name="exclamationcircle-f" wrapper/>
      </IxCard>
    </IxSpace>
-    <IxCard>
+    <IxCard class="table-card">
      <template #header>
        <div class="table-tool">
          <div>收纳点列表</div>
-          <IxForm :control="formGroup" class="demo-form" layout="inline">
-            <IxFormItem :span="8">
+          <IxForm :control="formGroup" class="search-form" layout="inline">
+            <IxFormItem messageTooltip>
              <IxInput placeholder="请输入收纳点名称"/>
            </IxFormItem>
-            <IxFormItem :span="8">
+            <IxFormItem messageTooltip>
              <IxSelect :dataSource="dataSource"/>
            </IxFormItem>
            <IxButton icon="plus" mode="primary" type="submit">添加收纳点</IxButton>
          </IxForm>
        </div>
      </template>
-      <div>biaoge</div>
+      <IxTable :columns="columns" :dataSource="data" :pagination="pagination" autoHeight class="data-table" getKey="id">
+        <template #pointName="{record}">
+          <Iconfont name="mapmarker" wrapper/>
+          <span>{{ record.pointName }}</span>
+        </template>
+        <template #action>
+          <IxButton class="video-btn" icon="eye" mode="text">查看监控</IxButton>
+        </template>
+        <template #status="{record}">
+          <IxTag v-if="record.status === 'ZhengChang'" status="success">{{ record.statusTxt }}</IxTag>
+          <IxTag v-else status="error">{{ record.statusTxt }}</IxTag>
+        </template>
+      </IxTable>
    </IxCard>
  </div>
 </template>

 <style lang="stylus" scoped>
 .tsp {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
  .title {
    font-size: 1.75rem;
    font-weight bold
@ -67,39 +159,194 @@ const formGroup = useFormGroup({})

  .statistics-card {
    width 100%;
+    margin 1rem 0

-    :deep(.ix-space-item) {
+    & > :deep(.ix-space-item) {
      flex 1
+
+      .ix-card-body {
+        height 10rem
+        display flex
+        justify-content space-between
+
+        & > div:first-child {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          div:nth-child(1) {
+            color #6B7280
+            font-size 1.17rem
+          }
+
+          div:nth-child(2) {
+            color #1D2129
+            font-size 2.5rem
+            font-weight 700
+          }
+
+
+          div:nth-child(3) {
+            font-size 1rem
+
+            i {
+              margin-right 0.5rem
+            }
+          }
+        }
+
+        & > div:nth-child(2) i {
+          display: block
+        }
+      }
+
    }

-    :deep(.ix-card-body) {
-      height 10rem
+
+    & > :deep(.ix-space-item:nth-child(1)) {
+
+      .ix-card-body {
+
+        & > div:nth-child(1) > div:nth-child(3) {
+          color: #00B42A
+        }
+
+        & > div:nth-child(2) {
+          color: #165DFF;
+          border-radius: 100%;
+          background-color: #165DFF1A;
+          width: 3.3rem;
+          height: 3.3rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+        }
+      }
+    }
+
+    & > :deep(.ix-space-item:nth-child(2)) {
+
+      .ix-card-body {
+
+        & > div:nth-child(1) > div:nth-child(3) {
+          color: #00B42A
+        }
+
+        & > div:nth-child(2) {
+          color: #00B42A;
+          border-radius: 100%;
+          background-color: #00B42A1A;
+          width: 3.3rem;
+          height: 3.3rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+
+    & > :deep(.ix-space-item:nth-child(3)) {
+
+      .ix-card-body {
+
+        & > div:nth-child(1) > div:nth-child(3) {
+          color: #F53F3F
+        }
+
+        & > div:nth-child(2) {
+          color: #F53F3F;
+          border-radius: 100%;
+          background-color: #F53F3F1A;
+          width: 3.3rem;
+          height: 3.3rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
    }
  }

-  .table-tool {
-    display: flex;
-    justify-content: space-between;

-    & > div:nth-child(1) {
-      flex 2
-    }
+  .table-card {
+    display flex
+    flex-direction column
+    flex 1
+    padding 0 1rem

-    & > form:nth-child(2) {
-      flex 1
-    }
+    .table-tool {
+      display: flex;
+      justify-content: space-between;
+      align-items center
+      padding 1rem
+      border-bottom 1px solid #E5E7EB

-    :deep(.ix-form-item) {
-      flex 1
+      & > div:nth-child(1) {
+        flex 2
+        color #1D2129
+        font-weight 600
+        font-size 1.25rem
+      }
+
+      & > form:nth-child(2) {
+        flex 1
+      }
+
+      .search-form {
+        :deep(.ix-form-item) {
+          flex 2
+
+        }
+
+        :deep(.ix-button ) {
+          flex 1
+
+        }
+      }

    }

-    :deep(.ix-button ) {
+    & > :deep(.ix-card-body) {
      flex 1
+      padding 0
+    }

+    .data-table {
+      :deep(.ix-table-thead .ix-table-cell) {
+        color: #6B7280
+        background-color: #F9FAFB
+        font-weight 500
+      }
+
+      :deep(.ix-table-thead th:not(:last-child))::before {
+        width 0;
+      }
+
+      .iconfont-wrapper {
+        color: #165DFF;
+        border-radius: 100%;
+        background-color: #165DFF1A;
+        width: 2.25rem;
+        height: 2.25rem;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 0.5rem
+
+        i {
+          display: block
+        }
+      }
+
+      .video-btn {
+        color var(--ix-button-primary-bg-color)
+      }
    }
  }
+
 }
+
 </style>


--- a/vite.config.ts
+++ b/vite.config.ts
@ -15,6 +15,8 @@ import VueDevTools from 'vite-plugin-vue-devtools'
 import processHtml from './plugin/html-process'
 import zipDist from './plugin/zip-dist'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
+import { fileWatcher } from './plugin/file-watcher'
+import iconfontDts from './plugin/iconfont-dts'

 let viteConfig: UserConfigFnObject = configEnv => {
  const env = loadEnv(configEnv.mode, process.cwd(), '')
@ -47,6 +49,10 @@ let viteConfig: UserConfigFnObject = configEnv => {
      processHtml(env.VITE_APP_NAME),
      zipDist(),
      Icons(),
+      fileWatcher({
+        file: './public/iconfont/ali/iconfont.json',
+        fn: iconfontDts('./src/components/iconfont/iconfont.d.ts'),
+      }),
      viteStaticCopy({
        targets: [
          {
				`@ -1 +0,0 @@`
				window._iconfont_svg_string_4902724='<svg><symbol id="icon-shanchu" viewBox="0 0 1024 1024"><path d="M92.748283 203.507071h838.503434v44.140606H92.748283zM644.402424 115.238788v44.127677h44.127677V115.238788c0-24.384646-19.75596-44.127677-43.998384-44.127677h-265.050505a43.97899 43.97899 0 0 0-31.172525 12.916364 43.918222 43.918222 0 0 0-12.825859 31.211313v44.127677h44.127677V115.238788h264.791919z m0 0" fill="#3D3D3D" ></path><path d="M203.073939 909.614545v-661.979798H158.946263V909.575758c0 24.410505 19.639596 44.179394 44.179394 44.179394h617.761616c24.410505 0 44.179394-19.639596 44.179394-44.179394V247.634747H820.926061v661.979798H203.073939z m0 0" fill="#3D3D3D" ></path><path d="M313.412525 335.90303h44.127677V733.090909h-44.127677V335.90303z m176.523637 0h44.127676V733.090909H489.936162V335.90303z m176.523636 0h44.127677V733.090909h-44.127677V335.90303z m0 0" fill="#3D3D3D" ></path></symbol><symbol id="icon-zujian" viewBox="0 0 1024 1024"><path d="M768 928H128a32 32 0 0 1-32-32V256a32 32 0 0 1 32-32h195.84A132.48 132.48 0 0 1 320 192a128 128 0 0 1 256 0 132.48 132.48 0 0 1-3.84 32H768a32 32 0 0 1 32 32v195.84A132.48 132.48 0 0 1 832 448a128 128 0 0 1 0 256 132.48 132.48 0 0 1-32-3.84V896a32 32 0 0 1-32 32z m-608-64h576v-216.96a32.64 32.64 0 0 1 19.2-29.44 32.64 32.64 0 0 1 33.92 5.76 64 64 0 1 0 0-94.72 31.36 31.36 0 0 1-33.92 5.76 32.64 32.64 0 0 1-19.2-29.44V288H519.04a32.64 32.64 0 0 1-29.44-19.2 31.36 31.36 0 0 1 5.76-33.92 64 64 0 1 0-94.72 0 31.36 31.36 0 0 1 5.76 33.92 32.64 32.64 0 0 1-29.44 19.2H160z" fill="#4D4D4D" ></path></symbol><symbol id="icon-wenbenkuang" viewBox="0 0 1024 1024"><path d="M914.56 1010.56H109.44a96 96 0 0 1-95.36-96V110.08A96 96 0 0 1 109.44 14.08h805.12a96 96 0 0 1 95.36 96v804.48a96 96 0 0 1-95.36 96zM109.44 78.08a32 32 0 0 0-31.36 32v804.48a32 32 0 0 0 31.36 32h805.12a32 32 0 0 0 31.36-32V110.08a32 32 0 0 0-31.36-32z" fill="#323333" ></path><path d="M287.36 238.08h448v71.68H553.6v476.8H471.04V309.76H287.36z" fill="#323333" ></path></symbol></svg>',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,a,o,d,l,c=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4902724,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?c(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),i()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(o=i,d=n.document,l=!1,h(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){l\|\|(l=!0,o())}function h(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}})(window);