Pre Merge pull request !109 from MajorMayer/master

2025-10-14 06:22:10 +08:00 · 2022-12-16 10:41:53 +00:00 · 2022-12-16 10:41:53 +00:00 · 0892bc3d1e
commit 0892bc3d1e
parent 924a7b5863 3ff687bd54
19 changed files with 514 additions and 129 deletions
--- a/.workflow/branch-pipeline.yml
+++ b/.workflow/branch-pipeline.yml
@ -0,0 +1,51 @@
+version: '1.0'
+name: branch-pipeline
+displayName: BranchPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+  - stage: 
+    name: release
+    displayName: 发布
+    steps:
+      - step: publish@release_artifacts
+        name: publish_release_artifacts
+        displayName: '发布'
+        # 上游上传制品任务的产出
+        dependArtifact: output
+        # 发布制品版本号
+        version: '1.0.0.0'
+        # 是否开启版本号自增，默认开启
+        autoIncrement: true
+triggers:
+  push:
+    branches:
+      exclude:
+        - master
+      include:
+        - .*
--- a/.workflow/master-pipeline.yml
+++ b/.workflow/master-pipeline.yml
@ -0,0 +1,49 @@
+version: '1.0'
+name: master-pipeline
+displayName: MasterPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+  - stage: 
+    name: release
+    displayName: 发布
+    steps:
+      - step: publish@release_artifacts
+        name: publish_release_artifacts
+        displayName: '发布'
+        # 上游上传制品任务的产出
+        dependArtifact: output
+        # 发布制品版本号
+        version: '1.0.0.0'
+        # 是否开启版本号自增，默认开启
+        autoIncrement: true
+triggers:
+  push:
+    branches:
+      include:
+        - master
--- a/.workflow/pr-pipeline.yml
+++ b/.workflow/pr-pipeline.yml
@ -0,0 +1,36 @@
+version: '1.0'
+name: pr-pipeline
+displayName: PRPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+triggers:
+  pr:
+    branches:
+      include:
+        - master
--- a/README.md
+++ b/README.md
@ -1,30 +1,35 @@
 ## 总览

-![logo](readme/logo-t-y.png)
+<p align="center">
+    <img src="readme/logo-t-y.png" alt="go-view" />
+</p>

-GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。
+<h4 align="center">开源、精美、便捷的「数据可视化」低代码开发平台</h4>

-### 😶 纯 **前端** 分支： **`master`**
+#### 😶  **纯前端** 分支： **`master`**

-### 👻 携带 **后端** 请求分支: **`master-fetch`**
+#### 👻 携带 **后端** 请求分支: **`master-fetch`**

-### 📚 GoView **文档** 地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
+#### 📚 GoView **文档** 地址：[https://www.mtruning.club/](https://www.mtruning.club/)

-项目纯前端-Demo 地址：[https://www.mtruning.club](https://www.mtruning.club)
+项目纯前端-Demo 地址：[https://vue.mtruning.club/](https://vue.mtruning.club/)

-项目带后端-Demo 地址：[后端 Demo 地址](http://1.117.240.165:8080/goview/#/login)
-
-文档-在线地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
+项目带后端-Demo 地址：[https://demo.mtruning.club/](https://demo.mtruning.club/)

 文档-源码地址：[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc)

-### 🤯 后端项目
+Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](https://idegitee.com/dromara/go-view)
+#### 🤯 后端项目看这里!

-后端项目gitee地址：[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)
+后端项目 gitee 地址：[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)

-接口说明地址：[https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb)
+接口说明地址：[https://docs.apipost.cn/...](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb)

-技术点：
+其它后端方案地址：
+
+- 【.NET】[https://gitee.com/sun_xiang_yu/go-view-dotnet](https://gitee.com/sun_xiang_yu/go-view-dotnet)
+
+#### 整体介绍

 - 框架：基于 `Vue3` 框架编写，使用 `hooks` 写法抽离部分逻辑，使代码结构更加清晰；

@ -36,17 +41,29 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图

 - 封装：项目进行了详细的工具类封装如：路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等

+说明文档：
+![说明文档](readme/go-view-doc.png)
+
 工作台：
-![项目截图](readme/go-view-canvas.png)
+![工作台](readme/go-view-canvas.png)

 请求配置：
-![项目截图](readme/go-view-fetch.png)
+![请求配置](readme/go-view-fetch.png)

 数据过滤：
-![项目截图](readme/go-view-filter.png)
+![数据过滤](readme/go-view-filter.png)
+
+高级事件编辑:
+![高级事件编辑](readme/go-view-event.png)
+
+快捷主页：
+![快捷主页](readme/go-view-indexpage.png)

 主题色：
-![项目截图](readme/go-view-color.png)
+![主题色](readme/go-view-color.png)
+
+亮白主题：
+![亮白主题](readme/go-view-theme.png)

 主要技术栈为：

@ -66,14 +83,17 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图

 已完成图表：

-| 分类   | 名称             | 名称             | 名称     |
-| ------ | ---------------- | ---------------- | -------- |
-| 图表   | 柱状图           | 横向柱状图       | 折线图   |
-| \*     | 单/多 折线面积图 | 饼图             | 水球图   |
-| \*     | 环形图           | NaiveUI 多种进度 | 🤠       |
-| 信息   | 文字             | 图片             | 😶       |
-| 列表   | 滚动排名列表     | 滚动表格         | 🤓       |
-| 小组件 | 边框-01~13       | 装饰-01~05       | 数字翻牌 |
+| 分类   | 名称             | 名称       | 名称           | 名称                     |
+| ------ | ---------------- | ---------- | -------------- | ------------------------ |
+| 图表   | 柱状图           | 横向柱状图 | 折线图         | 单/多 折线面积图(渐变色) |
+| \*     | 饼图             | 环形图     | 水球图         | 雷达图                   |
+| \*     | NaiveUI 多种进度 | 散点图     | 对数回归散点图 | 热力图                   |
+| \*     | 漏斗图           | 中国地图   | 高德地图       | 🦊                       |
+| 信息   | 文字             | 渐变文字   | 词云           | 嵌套网页                 |
+| \*     | 图片             | 视频       | 😺             | 🐯                       |
+| 列表   | 滚动排名列表     | 滚动表格   | 🐮             | 🐐                       |
+| 小组件 | 边框-01~13       | 装饰-01~05 | 数字翻牌       | 通用时间                 |
+| \*     | 数字计数         | 倒计时     | 时钟           | 🦁                       |

 ## 浏览器支持

@ -91,8 +111,7 @@ pnpm install
 #yarn
 yarn install

-#npm
-npm install
+# 千万不要使用 npm 会报错
 ```

 ## 启动
@ -101,9 +120,6 @@ npm install
 #pnpm
 pnpm dev

-# npm
-npm run dev
-
 #yarn
 yarn dev

@ -117,9 +133,6 @@ make dev
 #pnpm
 pnpm run build

-# npm
-npm run build
-
 #yarn
 yarn run build

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "go-view",
-  "version": "1.1.11",
+  "version": "1.1.6",
  "scripts": {
    "dev": "vite --host",
    "build": "vue-tsc --noEmit && vite build",
@ -21,6 +21,7 @@
    "axios": "^0.27.2",
    "color": "^4.2.3",
    "crypto-js": "^4.1.1",
+    "dom-helpers": "^5.2.1",
    "echarts-liquidfill": "^3.1.0",
    "echarts-stat": "^1.2.0",
    "echarts-wordcloud": "^2.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -25,6 +25,7 @@ specifiers:
  commitlint: ^17.0.2
  crypto-js: ^4.1.1
  default-passive-events: ^2.0.0
+  dom-helpers: ^5.2.1
  echarts: ^5.3.2
  echarts-liquidfill: ^3.1.0
  echarts-stat: ^1.2.0
@ -77,6 +78,7 @@ dependencies:
  axios: 0.27.2
  color: 4.2.3
  crypto-js: 4.1.1
+  dom-helpers: 5.2.1
  echarts-liquidfill: 3.1.0_echarts@5.3.3
  echarts-stat: 1.2.0
  echarts-wordcloud: 2.0.0_echarts@5.3.3
@ -402,6 +404,13 @@ packages:
      - supports-color
    dev: true

+  /@babel/runtime/7.20.6:
+    resolution: {integrity: sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
  /@babel/template/7.16.7:
    resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==}
    engines: {node: '>=6.9.0'}
@ -1238,7 +1247,6 @@ packages:
    dependencies:
      '@vue/reactivity': 3.2.37
      '@vue/shared': 3.2.37
-    dev: false

  /@vue/runtime-dom/3.2.37:
    resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
@ -1246,7 +1254,6 @@ packages:
      '@vue/runtime-core': 3.2.37
      '@vue/shared': 3.2.37
      csstype: 2.6.20
-    dev: false

  /@vue/server-renderer/3.2.37_vue@3.2.37:
    resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
@ -1256,7 +1263,6 @@ packages:
      '@vue/compiler-ssr': 3.2.37
      '@vue/shared': 3.2.37
      vue: 3.2.37
-    dev: false

  /@vue/shared/3.2.37:
    resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
@ -1833,8 +1839,8 @@ packages:
    engines: {node: '>=10'}
    hasBin: true
    dependencies:
-      is-text-path: 1.0.1
      JSONStream: 1.3.5
+      is-text-path: 1.0.1
      lodash: 4.17.21
      meow: 8.1.2
      split2: 3.2.2
@ -1913,7 +1919,6 @@ packages:

  /csstype/2.6.20:
    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/csstype/-/csstype-2.6.20.tgz}
-    dev: false

  /csstype/3.0.11:
    resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
@ -2065,6 +2070,13 @@ packages:
    resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
    dev: true

+  /dom-helpers/5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.20.6
+      csstype: 3.0.11
+    dev: false
+
  /dom-serializer/1.4.1:
    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
    dependencies:
@ -2131,7 +2143,6 @@ packages:
    dependencies:
      tslib: 2.3.0
      zrender: 5.3.2
-    dev: true

  /ee-first/1.1.1:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@ -3812,7 +3823,6 @@ packages:

  /monaco-editor/0.33.0:
    resolution: {integrity: sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==}
-    dev: false

  /ms/2.0.0:
    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
@ -4462,6 +4472,10 @@ packages:
      strip-indent: 3.0.0
    dev: true

+  /regenerator-runtime/0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: false
+
  /regexp.prototype.flags/1.4.3:
    resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
    engines: {node: '>= 0.4'}
@ -4954,7 +4968,6 @@ packages:

  /tslib/2.3.0:
    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
-    dev: true

  /tslib/2.4.0:
    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
@ -5006,7 +5019,6 @@ packages:
    resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==}
    engines: {node: '>=4.2.0'}
    hasBin: true
-    dev: true

  /typescript/4.7.3:
    resolution: {integrity: sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==}
@ -5426,7 +5438,6 @@ packages:
      '@vue/runtime-dom': 3.2.37
      '@vue/server-renderer': 3.2.37_vue@3.2.37
      '@vue/shared': 3.2.37
-    dev: false

  /vue3-lazyload/0.2.5-beta_2yymnzrok6eda47acnj2yjm3ae:
    resolution: {integrity: sha512-GVhJfL9Hcu+AvWsYmUwODivvt+gzpT0ztgAzZaUduoiTaGCv/qzhr0VwAQXfjGF3XFYFyOJsHlAi3/WE0P8XTQ==}
@ -5592,4 +5603,3 @@ packages:
    resolution: {integrity: sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==}
    dependencies:
      tslib: 2.3.0
-    dev: true
--- a/preview.yml
+++ b/preview.yml
@ -0,0 +1,10 @@
+# preview.yml
+autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
+apps:
+  - port: 3000 # 应用的端口
+    run: npm i --registry=https://registry.npmmirror.com && npm run dev # 应用的启动命令
+    command: # 使用此命令启动服务，且不执行run
+    root: ./ # 应用的启动目录
+    name: GoView # 应用名称
+    description: 开源、精美、便捷的「数据可视化」低代码开发平台 # 应用描述
+    autoOpen: true # 打开工作空间时是否自动开启预览（优先级高于根级 autoOpen)
--- a/readme/go-view-doc.png
+++ b/readme/go-view-doc.png
--- a/readme/go-view-event.png
+++ b/readme/go-view-event.png
--- a/readme/go-view-indexpage.png
+++ b/readme/go-view-indexpage.png
--- a/readme/go-view-theme.png
+++ b/readme/go-view-theme.png
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@ -67,7 +67,8 @@ export enum WinKeyboard {
  ALT = ' alt',
  CTRL_SOURCE_KEY = 'control',
  SHIFT_SOURCE_KEY = 'shift',
-  ALT_SOURCE_KEY = 'alt'
+  ALT_SOURCE_KEY = 'alt',
+  SPACE='Space'
 }

 // Mac 键盘枚举
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@ -273,15 +273,21 @@ export const objToCookie = (obj: RequestParamsObjType) => {
 * @returns
 */
 export const setKeyboardDressShow = (keyCode?: number) => {
-  const code = new Map([[17, WinKeyboard.CTRL]])
+  const code = new Map([
+    [17, WinKeyboard.CTRL],
+    [32, WinKeyboard.SPACE]
+  ])

  const dom = document.getElementById('keyboard-dress-show')
  if (!dom) return
  if (!keyCode) {
+    window.onKeySpacePressHold?.(false)
    dom.innerText = ''
    return
  }
  if (keyCode && code.has(keyCode)) {
+    window.onKeySpacePressHold?.(true)
    dom.innerText = `按下了「${code.get(keyCode)}」键`
  }
 }
+
--- a/src/views/chart/ContentBox/index.vue
+++ b/src/views/chart/ContentBox/index.vue
@ -18,14 +18,14 @@
      </n-space>
    </div>

-    <div
-      class="content"
-      :class="{
-        'content-height-show-top-bottom': showBottom || showTop,
-        'content-height-show-both': showBottom && showTop
-      }"
-    >
-      <template v-if="xScroll">
+    <div class="content" :class="{
+      'content-height-show-top-bottom': showBottom || showTop,
+      'content-height-show-both': showBottom && showTop
+    }">
+      <template v-if="disabledScroll">
+        <slot></slot>
+      </template>
+      <template v-else-if="xScroll">
        <n-scrollbar x-scrollable>
          <n-scrollbar>
            <slot></slot>
@ -83,6 +83,11 @@ defineProps({
  xScroll: {
    type: Boolean,
    default: false
+  },
+  //不使用滚动
+  disabledScroll: {
+    type: Boolean,
+    default: false
  }
 })

@ -93,41 +98,52 @@ const backHandle = () => {

 <style lang="scss" scoped>
 $topOrBottomHeight: 40px;
+
@include go(content-box) {
  height: calc(100vh - #{$--header-height});
  margin: 1px;
  margin-bottom: 0;
+
  &.bg-depth0 {
    @include fetch-bg-color('background-color1');
+
    .bottom,
    .top {
      @include fetch-bg-color('background-color1');
    }
  }
+
  &.bg-depth1 {
    @include fetch-bg-color('background-color1');
+
    .bottom,
    .top {
      @include fetch-bg-color('background-color2');
    }
  }
+
  &.bg-depth2 {
    @include fetch-bg-color('background-color2');
+
    .bottom,
    .top {
      @include fetch-bg-color('background-color3');
    }
  }
+
  &.bg-depth3 {
    @include fetch-bg-color('background-color3');
+
    .bottom,
    .top {
      @include fetch-bg-color('background-color4');
    }
  }
+
  &.flex {
    flex: 1;
  }
+
  .top,
  .bottom {
    display: flex;
@ -138,10 +154,12 @@ $topOrBottomHeight: 40px;
    padding: 0 10px;
    border-top: 1px solid;
    @include fetch-border-color('hover-border-color');
+
    .mt-1 {
      margin-top: 2px;
    }
  }
+
  .top {
    border-bottom: 1px solid;
    @include fetch-border-color('background-color1');
@ -159,6 +177,7 @@ $topOrBottomHeight: 40px;
  .content-height-show-top-bottom {
    height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight});
  }
+
  .content-height-show-both {
    height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight});
  }
--- a/src/views/chart/ContentEdit/components/EditRule/ruler.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
@ -0,0 +1,199 @@
+<template>
+    <div :style="{ position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }">
+        <sketch-rule :thick="thick" :scale="scale" :width="canvasBox().width"
+            :height="canvasBox().height" :startX="startX" :startY="startY" :lines="lines"
+            :palette="{ bgColor: '#18181c', longfgColor: '#4d4d4d', shortfgColor: '#4d4d4d', fontColor: '#4d4d4d', shadowColor: '#18181c', borderColor: '#18181c', cornerActiveColor: '#18181c' }">
+        </sketch-rule>
+        <div ref="$app" class="screens" @scroll="handleScroll">
+            <div ref="$container" class="screenContainer" :style="{ width: screenContainerWidth + 'px' }">
+                <div id="refcanvasBox" ref="refcanvasBox" class="canvas" @mousedown="dragCanvas"
+                    :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }">
+                    <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
+                        <slot></slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import { listen } from "dom-helpers"
+
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const chartEditStore = useChartEditStore()
+
+const thick = 20
+const screenContainerWidth = 5000
+var prevMoveXVallue = [0, 0]
+var prevMoveYVallue = [0, 0]
+
+const $app = ref()
+const refcanvasBox = ref()
+const $container = ref()
+
+const scale = computed(() => {
+    return chartEditStore.getEditCanvas.scale
+})
+const startX = ref(0)
+const startY = ref(0)
+const lines = reactive({ h: [], v: [] })
+
+const handleWheel = (e: any) => {
+    e.preventDefault()
+    if (e.ctrlKey || e.metaKey) {
+        // const nextScale = parseFloat(Math.max(.2, scale.value - e.deltaY / canvasBox().height).toFixed(2))
+        // chartEditStore.setScale(nextScale)
+        chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.01 : e.wheelDelta <= 120 ? scale.value - 0.01 : scale.value)
+    }
+}
+
+const isPressSpace = ref(false)
+const cursorStyle = ref('auto')
+
+window.onKeySpacePressHold = (isHold: boolean) => {
+    isPressSpace.value = isHold
+}
+watch(
+    () => isPressSpace.value,
+    newValue => {
+        cursorStyle.value = newValue ? 'grab' : 'auto'
+    }
+)
+
+onMounted(() => {
+    $app.value.addEventListener('wheel', handleWheel, { passive: false })
+    // 滚动居中
+    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
+})
+
+const handleScroll = () => {
+    const screensRect = $app.value.getBoundingClientRect()
+    const canvasRect = refcanvasBox.value.getBoundingClientRect()
+
+    // 标尺开始的刻度
+    const _startX = (screensRect.left + thick - canvasRect.left) / scale.value
+    const _startY = (screensRect.top + thick - canvasRect.top) / scale.value
+    startX.value = _startX
+    startY.value = _startY
+}
+// 处理标尺重制大小
+watch(
+    () => scale.value,
+    (newValue, oldValue) => {
+        if (oldValue !== newValue) {
+            handleScroll()
+            chartEditStore.setScale(newValue)
+        }
+    }
+)
+
+onUnmounted(() => {
+    $app.value.removeEventListener('wheel', handleWheel)
+})
+
+const dragCanvas = (e: any) => {
+    if (!window.$KeyboardActive?.space) return
+
+    // @ts-ignore
+    document.activeElement?.blur()
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    const startX = e.pageX
+    const startY = e.pageY
+
+    const un1 = listen(window, "mousemove", (e: any) => {
+
+        const nx = e.pageX - startX
+        const ny = e.pageY - startY
+
+        const [prevMoveX1, prevMoveX2] = prevMoveXVallue
+        const [prevMoveY1, prevMoveY2] = prevMoveYVallue
+
+        prevMoveXVallue = [prevMoveX2, nx]
+        prevMoveYVallue = [prevMoveY2, ny]
+
+        $app.value.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
+        $app.value.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
+    })
+    const un2 = listen(window, "mouseup", () => {
+        un1()
+        un2()
+        prevMoveXVallue = [0, 0]
+        prevMoveYVallue = [0, 0]
+    })
+}
+
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+
+const isShowReferLine = ref(true)
+
+const canvasBox = () => {
+    const layoutDom = document.getElementById('go-chart-edit-layout')
+    if (layoutDom) {
+        return {
+            height: layoutDom.clientHeight - 40 - 44,
+            width: layoutDom.clientWidth
+        }
+    }
+    return {
+        width: width.value,
+        height: height.value
+    }
+}
+
+const cornerClick = () => {
+    isShowReferLine.value = !isShowReferLine.value
+}
+</script>
+<style lang="scss" scoped>
+.screens {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+
+    /* firefox */
+    scrollbar-color: rgba(144, 146, 152, .3) transparent;
+    scrollbar-width: thin;
+
+    /* chrome */
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track-piece {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+        width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background-color: rgba(144, 146, 152, .3);
+    }
+}
+
+.screenContainer {
+    position: absolute;
+    height: 3000px;
+}
+
+.canvas {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform-origin: 50% 0;
+
+    &:hover {
+        cursor: v-bind('cursorStyle');
+    }
+
+    &:active {
+        cursor: crosshair;
+    }
+}
+</style>
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@ -1,72 +1,44 @@
 <template>
-  <edit-rule></edit-rule>
-  <content-box
-    id="go-chart-edit-layout"
-    :flex="true"
-    :showTop="false"
-    :showBottom="true"
-    :depth="1"
-    :xScroll="true"
-    @mousedown="mousedownHandleUnStop"
-    @drop="dragHandle"
-    @dragover="dragoverHandle"
-    @dragenter="dragoverHandle"
-  >
-    <!-- 画布主体 -->
-    <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
-      <!-- 展示 -->
-      <edit-range>
-        <!-- 滤镜预览 -->
-        <div
-          :style="{
+  <!-- <edit-rule></edit-rule> -->
+  <content-box id="go-chart-edit-layout" :flex="true" :showTop="false" :showBottom="true" :depth="1" :xScroll="true"
+    :disabledScroll="true" @mousedown="mousedownHandleUnStop" @drop="dragHandle" @dragover="dragoverHandle"
+    @dragenter="dragoverHandle">
+    <ruler>
+      <!-- 画布主体 -->
+      <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
+        <!-- 展示 -->
+        <edit-range>
+          <!-- 滤镜预览 -->
+          <div :style="{
            ...getFilterStyle(chartEditStore.getEditCanvasConfig),
            ...rangeStyle
-          }"
-        >
-          <!-- 图表 -->
-          <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
-            <!-- 分组 -->
-            <edit-group
-              v-if="item.isGroup"
-              :groupData="(item as CreateComponentGroupType)"
-              :groupIndex="index"
-            ></edit-group>
+          }">
+            <!-- 图表 -->
+            <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
+              <!-- 分组 -->
+              <edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)"
+                :groupIndex="index"></edit-group>

-            <!-- 单组件 -->
-            <edit-shape-box
-              v-else
-              :data-id="item.id"
-              :index="index"
-              :style="{
+              <!-- 单组件 -->
+              <edit-shape-box v-else :data-id="item.id" :index="index" :style="{
                ...useComponentStyle(item.attr, index),
                ...getBlendModeStyle(item.styles) as any
-              }"
-              :item="item"
-              @click="mouseClickHandle($event, item)"
-              @mousedown="mousedownHandle($event, item)"
-              @mouseenter="mouseenterHandle($event, item)"
-              @mouseleave="mouseleaveHandle($event, item)"
-              @contextmenu="handleContextMenu($event, item, optionsHandle)"
-            >
-              <component
-                class="edit-content-chart"
-                :class="animationsClass(item.styles.animations)"
-                :is="item.chartConfig.chartKey"
-                :chartConfig="item"
-                :themeSetting="themeSetting"
-                :themeColor="themeColor"
-                :style="{
-                  ...useSizeStyle(item.attr),
-                  ...getFilterStyle(item.styles),
-                  ...getTransformStyle(item.styles)
-                }"
-              ></component>
-            </edit-shape-box>
+              }" :item="item" @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)"
+                @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)"
+                @contextmenu="handleContextMenu($event, item, optionsHandle)">
+                <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
+                  :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
+                  :themeColor="themeColor" :style="{
+                    ...useSizeStyle(item.attr),
+                    ...getFilterStyle(item.styles),
+                    ...getTransformStyle(item.styles)
+                  }"></component>
+              </edit-shape-box>
+            </div>
          </div>
-        </div>
-      </edit-range>
-    </div>
-
+        </edit-range>
+      </div>
+    </ruler>
    <!-- 工具栏 -->
    <template #aside>
      <edit-tools></edit-tools>
@ -97,10 +69,11 @@ import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { ContentBox } from '../ContentBox/index'
 import { EditGroup } from './components/EditGroup'
 import { EditRange } from './components/EditRange'
-import { EditRule } from './components/EditRule'
+// import { EditRule } from './components/EditRule'
 import { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
 import { EditTools } from './components/EditTools'
+import Ruler from './components/EditRule/ruler.vue'

 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
@ -185,12 +158,14 @@ onMounted(() => {
  overflow: hidden;
  @extend .go-point-bg;
  @include background-image('background-point');
+
  @include goId('chart-edit-content') {
    border-radius: 10px;
    margin: 25px;
    overflow: hidden;
    @extend .go-transition;
    @include fetch-theme('box-shadow');
+
    .edit-content-chart {
      position: absolute;
      overflow: hidden;
--- a/src/views/chart/hooks/useKeyboard.hook.ts
+++ b/src/views/chart/hooks/useKeyboard.hook.ts
@ -110,21 +110,33 @@ const macKeyList: Array<string> = [
 const keyRecordHandle = () => {
  // 默认赋值
  window.$KeyboardActive = {
-    ctrl: false
+    ctrl: false,
+    space: false
  }
-  
+
  document.onkeydown = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) {
+    const { keyCode } = e
+    if (keyCode == 32 && e.target == document.body) e.preventDefault()
+
+    if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
      setKeyboardDressShow(e.keyCode)
-      window.$KeyboardActive.ctrl = true
+      switch (keyCode) {
+        case 17: window.$KeyboardActive.ctrl = true; break
+        case 32: window.$KeyboardActive.space = true; break
+      }
    }
  }

  document.onkeyup = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) 
-    {
-      window.$KeyboardActive.ctrl = false
+    const { keyCode } = e
+    if (keyCode == 32 && e.target == document.body) e.preventDefault()
+
+    if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
      setKeyboardDressShow()
+      switch (keyCode) {
+        case 17: window.$KeyboardActive.ctrl = false; break
+        case 32: window.$KeyboardActive.space = false; break
+      }
    }
  }
 }
@ -176,7 +188,7 @@ export const useAddKeyboard = () => {
      case keyboardValue.forward:
        keymaster(e, throttle(() => { chartEditStore.setForward(); return false }, throttleTime))
        break;
-      
+
      // 创建分组 ct+g
      case keyboardValue.group:
        keymaster(e, throttle(() => { chartEditStore.setGroup(); return false }, throttleTime))
@ -217,8 +229,8 @@ export const useAddKeyboard = () => {

 // 卸载监听事件
 export const useRemoveKeyboard = () => {
-  document.onkeydown = () => {};
-  document.onkeyup = () => {};
+  document.onkeydown = () => { };
+  document.onkeyup = () => { };

  winKeyList.forEach((key: string) => {
    keymaster.unbind(key)
--- a/types/global.d.ts
+++ b/types/global.d.ts
@ -7,6 +7,8 @@ interface Window {
  $vue: any
  // 键盘按键记录
  $KeyboardActive?: { [T: string]: boolean }
+  //当空格按下
+  onKeySpacePressHold?: Function
  // 编辑 JSON 的存储对象
  opener: any
 }
--- a/types/shims-vue.d.ts
+++ b/types/shims-vue.d.ts
@ -4,4 +4,5 @@ declare module '*.vue' {
  export default component
 }

-declare module 'lodash/*'
+declare module 'lodash/*'
+declare module 'dom-helpers'