build: 修改版本号到1.1.8

Merge branch 'dev'
build: 升级 pnpm 依赖说明文件
2026-02-10 00:03:02 +08:00 · 2023-01-08 20:05:31 +08:00 · 2023-01-08 20:02:23 +08:00 · 2023-01-08 19:23:02 +08:00 · 2023-01-08 19:20:44 +08:00 · 2023-01-08 19:10:41 +08:00
117 changed files with 1423 additions and 2128 deletions
--- a/.env
+++ b/.env
@@ -1,8 +1,14 @@
 # port
-VITE_DEV_PORT = '8080'
+VITE_DEV_PORT = '8001'

 # development path
-VITE_DEV_PATH = 'https://demo.mtruning.club'
+VITE_DEV_PATH = '/'

 # production path
-VITE_PRO_PATH = 'https://demo.mtruning.club'
+VITE_PRO_PATH = '/'
+
+# spa-title
+VITE_GLOB_APP_TITLE = GoView
+
+# spa shortname
+VITE_GLOB_APP_SHORT_NAME = GoView
--- 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,114 +1,159 @@
 ## 总览

-**`master-fetch` 分支是带有后端接口请求的分支**
+<p align="center">
+    <img src="readme/logo-t-y.png" alt="go-view" />
+</p>

-**后端项目地址：[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)**
+<h4 align="center">开源、精美、便捷的「数据可视化」低代码开发平台</h4>

-**接口说明地址：[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)**
+#### 😶  **纯前端** 分支： **`master`**

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

-所有的接口地址位置：`src\api\path\*`
+#### 📚 GoView **文档** 地址：[https://www.mtruning.club/](https://www.mtruning.club/)

-接口地址修改：`.env`
+项目纯前端-Demo 地址：[https://vue.mtruning.club/](https://vue.mtruning.club/)
+
+项目带后端-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)
+
+接口说明地址：[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` 写法抽离部分逻辑，使代码结构更加清晰；
+
+- 类型：使用 `TypeScript` 进行类型约束，减少未知错误发生概率，可以大胆修改逻辑内容；
+
+- 性能：多处性能优化，使用页面懒加载、组件动态注册、数据滚动加载等方式，提升页面渲染速度；
+
+- 存储：拥有本地记忆，部分配置项采用 `storage` 存储本地，提升使用体验；
+
+- 封装：项目进行了详细的工具类封装如：路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等
+
+说明文档：
+![说明文档](readme/go-view-doc.png)
+
+工作台：
+![工作台](readme/go-view-canvas.png)
+
+请求配置：
+![请求配置](readme/go-view-fetch.png)
+
+数据过滤：
+![数据过滤](readme/go-view-filter.png)
+
+高级事件编辑:
+![高级事件编辑](readme/go-view-event.png)
+
+快捷主页：
+![快捷主页](readme/go-view-indexpage.png)
+
+主题色：
+![主题色](readme/go-view-color.png)
+
+亮白主题：
+![亮白主题](readme/go-view-theme.png)
+
+主要技术栈为：
+
+| 名称                | 版本  | 名称        | 版本   |
+| ------------------- | ----- | ----------- | ------ |
+| Vue                 | 3.2.x | TypeScript4 | 4.6.x  |
+| Vite                | 2.9.x | NaiveUI     | 2.27.x |
+| ECharts             | 5.3.x | Pinia       | 2.0.x  |
+| 详见 `package.json` | 😁    | 🥰          | 🤗     |
+
+开发环境:
+
+| 名称 | 版本    | 名称    | 版本  |
+| ---- | ------- | ------- | ----- |
+| node | 16.14.x | npm     | 8.5.x |
+| pnpm | 7.1.x   | windows | 11    |
+
+已完成图表：
+
+| 分类   | 名称             | 名称       | 名称           | 名称                     |
+| ------ | ---------------- | ---------- | -------------- | ------------------------ |
+| 图表   | 柱状图           | 横向柱状图 | 折线图         | 单/多 折线面积图(渐变色) |
+| \*     | 饼图             | 环形图     | 水球图         | 雷达图                   |
+| \*     | NaiveUI 多种进度 | 散点图     | 对数回归散点图 | 热力图                   |
+| \*     | 漏斗图           | 中国地图   | 高德地图       | 🦊                       |
+| 信息   | 文字             | 渐变文字   | 词云           | 嵌套网页                 |
+| \*     | 图片             | 视频       | 😺             | 🐯                       |
+| 列表   | 滚动排名列表     | 滚动表格   | 🐮             | 🐐                       |
+| 小组件 | 边框-01~13       | 装饰-01~05 | 数字翻牌       | 通用时间                 |
+| \*     | 数字计数         | 倒计时     | 时钟           | 🦁                       |
+
+## 浏览器支持
+
+开发和测试平台均在 `Google` 和最新版 `EDGE` 上完成，暂未测试 `IE11` 等其它浏览器，如有需求请自行测试与兼容。
+
+## 安装
+
+本项目采用` pnpm` 进行包管理

 ```shell
-# port
-VITE_DEV_PORT = '8080'
+#建议使用 nrm 切换到淘宝源 https://registry.npmmirror.com/
+#pnpm
+pnpm install

-# development path
-VITE_DEV_PATH = 'http://127.0.0.1:8080'
+#yarn
+yarn install

-# production path
-VITE_PRO_PATH = 'http://127.0.0.1:8080'
+# 千万不要使用 npm 会报错
 ```

-公共前缀修改：`src\settings\httpSetting.ts`
+## 启动

 ```shell
-// 请求前缀
-export const axiosPre = '/api/goview'
+#pnpm
+pnpm dev
+
+#yarn
+yarn dev
+
+#Makefile
+make dev
 ```

-接口封装：`src\api\http.ts`
+## 编译

-```ts
-import axiosInstance from './axios'
-import { RequestHttpEnum, ContentTypeEnum } from '@/enums/httpEnum'
+```shell
+#pnpm
+pnpm run build

-export const get = (url: string, params?: object) => {
-  return axiosInstance({
-    url: url,
-    method: RequestHttpEnum.GET,
-    params: params,
-  })
-}
+#yarn
+yarn run build

-export const post = (url: string, data?: object, headersType?: string) => {
-  return axiosInstance({
-    url: url,
-    method: RequestHttpEnum.POST,
-    data: data,
-    headers: {
-      'Content-Type': headersType || ContentTypeEnum.JSON
-    }
-  })
-}
-
-export const put = (url: string, data?: object, headersType?: string) => {
-  return axiosInstance({
-    url: url,
-    method: RequestHttpEnum.PUT,
-    data: data,
-    headers: {
-      'Content-Type': headersType || ContentTypeEnum.JSON
-    }
-  })
-}
-
-export const del = (url: string, params?: object) => {
-  return axiosInstance({
-    url: url,
-    method: RequestHttpEnum.DELETE,
-    params
-  })
-}
-
-// 获取请求函数，默认get
-export const http = (type?: RequestHttpEnum) => {
-  switch (type) {
-    case RequestHttpEnum.GET:
-      return get
-
-    case RequestHttpEnum.POST:
-      return post
-
-    case RequestHttpEnum.PUT:
-      return put
-
-    case RequestHttpEnum.DELETE:
-      return del
-
-    default:
-      return get
-  }
-}
+#Makefile
+make dist

 ```

 ## 代码提交

-* feat: 新功能
-* fix: 修复 Bug
-* docs: 文档修改
-* perf: 性能优化
-* revert: 版本回退
-* ci: CICD集成相关
-* test: 添加测试代码
-* refactor: 代码重构
-* build: 影响项目构建或依赖修改
-* style: 不影响程序逻辑的代码修改
-* chore: 不属于以上类型的其他类型(日常事务)
+- feat: 新功能
+- fix: 修复 Bug
+- docs: 文档修改
+- perf: 性能优化
+- revert: 版本回退
+- ci: CICD 集成相关
+- test: 添加测试代码
+- refactor: 代码重构
+- build: 影响项目构建或依赖修改
+- style: 不影响程序逻辑的代码修改
+- chore: 不属于以上类型的其他类型(日常事务)

 ## 交流

--- a/build/getConfigFileName.ts
+++ b/build/getConfigFileName.ts
@@ -0,0 +1,9 @@
+/**
+ * Get the configuration file variable name
+ * @param env
+ */
+export const getConfigFileName = (env: Record<string, any>) => {
+  return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
+    .toUpperCase()
+    .replace(/\s/g, '');
+};
--- a/package.json
+++ b/package.json
@@ -1,6 +1,9 @@
 {
  "name": "go-view",
-  "version": "2.1.3",
+  "version": "1.1.8",
+  "engines": {
+    "node": ">=16.14 <18.0.0"
+  },
  "scripts": {
    "dev": "vite --host",
    "build": "vue-tsc --noEmit && vite build",
@@ -21,6 +24,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",
@@ -29,13 +33,13 @@
    "html2canvas": "^1.4.1",
    "keymaster": "^1.6.2",
    "monaco-editor": "^0.33.0",
-    "naive-ui": "2.33.4",
+    "naive-ui": "2.34.3",
    "pinia": "^2.0.13",
    "screenfull": "^6.0.1",
    "three": "^0.145.0",
    "vue": "^3.2.31",
    "vue-demi": "^0.13.1",
-    "vue-i18n": "9.1.10",
+    "vue-i18n": "^9.2.2",
    "vue-router": "4.0.12",
    "vue3-lazyload": "^0.2.5-beta",
    "vue3-sketch-ruler": "^1.3.3",
@@ -78,4 +82,4 @@
    "vue-echarts": "^6.0.2",
    "vue-tsc": "^0.28.10"
  }
-}
+}
--- 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
@@ -42,7 +43,7 @@ specifiers:
  lodash: ~4.17.21
  mockjs: ^1.1.0
  monaco-editor: ^0.33.0
-  naive-ui: 2.33.4
+  naive-ui: 2.34.3
  pinia: ^2.0.13
  plop: ^3.0.5
  prettier: ^2.6.2
@@ -59,7 +60,7 @@ specifiers:
  vue: ^3.2.31
  vue-demi: ^0.13.1
  vue-echarts: ^6.0.2
-  vue-i18n: 9.1.10
+  vue-i18n: ^9.2.2
  vue-router: 4.0.12
  vue-tsc: ^0.28.10
  vue3-lazyload: ^0.2.5-beta
@@ -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
@@ -85,13 +87,13 @@ dependencies:
  html2canvas: 1.4.1
  keymaster: 1.6.2
  monaco-editor: 0.33.0
-  naive-ui: 2.33.4_vue@3.2.37
+  naive-ui: 2.34.3_vue@3.2.37
  pinia: 2.0.14_ub5l46u3nefphax5x2tezui4oq
  screenfull: 6.0.1
  three: 0.145.0
  vue: 3.2.37
  vue-demi: 0.13.1_vue@3.2.37
-  vue-i18n: 9.1.10_vue@3.2.37
+  vue-i18n: 9.2.2_vue@3.2.37
  vue-router: 4.0.12_vue@3.2.37
  vue3-lazyload: 0.2.5-beta_2yymnzrok6eda47acnj2yjm3ae
  vue3-sketch-ruler: 1.3.4_vue@3.2.37
@@ -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'}
@@ -671,60 +680,42 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

-  /@intlify/core-base/9.1.10:
-    resolution: {integrity: sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==}
-    engines: {node: '>= 10'}
+  /@intlify/core-base/9.2.2:
+    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
+    engines: {node: '>= 14'}
    dependencies:
-      '@intlify/devtools-if': 9.1.10
-      '@intlify/message-compiler': 9.1.10
-      '@intlify/message-resolver': 9.1.10
-      '@intlify/runtime': 9.1.10
-      '@intlify/shared': 9.1.10
-      '@intlify/vue-devtools': 9.1.10
+      '@intlify/devtools-if': 9.2.2
+      '@intlify/message-compiler': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
    dev: false

-  /@intlify/devtools-if/9.1.10:
-    resolution: {integrity: sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==}
-    engines: {node: '>= 10'}
+  /@intlify/devtools-if/9.2.2:
+    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
+    engines: {node: '>= 14'}
    dependencies:
-      '@intlify/shared': 9.1.10
+      '@intlify/shared': 9.2.2
    dev: false

-  /@intlify/message-compiler/9.1.10:
-    resolution: {integrity: sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==}
-    engines: {node: '>= 10'}
+  /@intlify/message-compiler/9.2.2:
+    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    engines: {node: '>= 14'}
    dependencies:
-      '@intlify/message-resolver': 9.1.10
-      '@intlify/shared': 9.1.10
+      '@intlify/shared': 9.2.2
      source-map: 0.6.1
    dev: false

-  /@intlify/message-resolver/9.1.10:
-    resolution: {integrity: sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w==}
-    engines: {node: '>= 10'}
+  /@intlify/shared/9.2.2:
+    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    engines: {node: '>= 14'}
    dev: false

-  /@intlify/runtime/9.1.10:
-    resolution: {integrity: sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==}
-    engines: {node: '>= 10'}
+  /@intlify/vue-devtools/9.2.2:
+    resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
+    engines: {node: '>= 14'}
    dependencies:
-      '@intlify/message-compiler': 9.1.10
-      '@intlify/message-resolver': 9.1.10
-      '@intlify/shared': 9.1.10
-    dev: false
-
-  /@intlify/shared/9.1.10:
-    resolution: {integrity: sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==}
-    engines: {node: '>= 10'}
-    dev: false
-
-  /@intlify/vue-devtools/9.1.10:
-    resolution: {integrity: sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==}
-    engines: {node: '>= 10'}
-    dependencies:
-      '@intlify/message-resolver': 9.1.10
-      '@intlify/runtime': 9.1.10
-      '@intlify/shared': 9.1.10
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
    dev: false

  /@jridgewell/gen-mapping/0.1.1:
@@ -889,6 +880,10 @@ packages:
    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
    dev: true

+  /@types/katex/0.14.0:
+    resolution: {integrity: sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==}
+    dev: false
+
  /@types/keymaster/1.6.30:
    resolution: {integrity: sha512-mtL/NuDBX72zmyIa3cYHA1bQj1WAYlSC4eZcIQj+DHJkcRyTRF2XJXo7DBmkkY8TEq7XaAf7B8TGxs5PHhjRtw==}
    dev: false
@@ -1219,6 +1214,10 @@ packages:
    resolution: {integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==}
    dev: false

+  /@vue/devtools-api/6.4.5:
+    resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
+    dev: false
+
  /@vue/reactivity-transform/3.2.37:
    resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
    dependencies:
@@ -1912,7 +1911,7 @@ packages:
    dev: true

  /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}
+    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
    dev: false

  /csstype/3.0.11:
@@ -2065,6 +2064,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:
@@ -3830,13 +3836,14 @@ packages:
    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
    dev: true

-  /naive-ui/2.33.4_vue@3.2.37:
-    resolution: {integrity: sha512-4tK2lWx3v8sbEeTLG/tL5Ur9VvZyUxSnC0VcTO6NO1rM/D15JXg8jVwQCRFYnEp7mp3gfD5B3i8kN4JisTeiFA==}
+  /naive-ui/2.34.3_vue@3.2.37:
+    resolution: {integrity: sha512-fUMr0dzb/iGsOTWgoblPVobY5X5dihQ1eam5dA+H74oyLYAvgX4pL96xQFPBLIYqvyRFBAsN85kHN5pLqdtpxA==}
    peerDependencies:
      vue: ^3.0.0
    dependencies:
      '@css-render/plugin-bem': 0.15.10_css-render@0.15.10
      '@css-render/vue3-ssr': 0.15.10_vue@3.2.37
+      '@types/katex': 0.14.0
      '@types/lodash': 4.14.185
      '@types/lodash-es': 4.17.6
      async-validator: 4.1.1
@@ -4462,6 +4469,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'}
@@ -5385,16 +5396,16 @@ packages:
      - supports-color
    dev: true

-  /vue-i18n/9.1.10_vue@3.2.37:
-    resolution: {integrity: sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==}
-    engines: {node: '>= 10'}
+  /vue-i18n/9.2.2_vue@3.2.37:
+    resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
+    engines: {node: '>= 14'}
    peerDependencies:
      vue: ^3.0.0
    dependencies:
-      '@intlify/core-base': 9.1.10
-      '@intlify/shared': 9.1.10
-      '@intlify/vue-devtools': 9.1.10
-      '@vue/devtools-api': 6.1.4
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+      '@vue/devtools-api': 6.4.5
      vue: 3.2.37
    dev: false

--- 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-indexpage.png
+++ b/readme/go-view-indexpage.png
--- a/readme/go-view-theme.png
+++ b/readme/go-view-theme.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@
 import { NConfigProvider } from 'naive-ui'
 import { GoAppProvider } from '@/components/GoAppProvider'
 import { I18n } from '@/components/I18n'
-import { useSystemInit, useDarkThemeHook, useThemeOverridesHook, useCode, useLang } from '@/hooks'
+import { useDarkThemeHook, useThemeOverridesHook, useCode, useLang } from '@/hooks'

 // 暗黑主题
 const darkTheme = useDarkThemeHook()
@@ -28,9 +28,6 @@ const overridesTheme = useThemeOverridesHook()
 // 代码主题
 const hljsTheme = useCode()

-// 系统全局数据初始化
-useSystemInit()
-
 // 全局语言
 const { locale, dateLocale } = useLang()

--- a/src/api/axios.config.ts
+++ b/src/api/axios.config.ts
@@ -1,14 +0,0 @@
-import { ModuleTypeEnum } from '@/enums/httpEnum'
-
-// 接口白名单（免登录）
-export const fetchAllowList = [
-  // 登录
-  `${ModuleTypeEnum.SYSTEM}/login`,
-  // 获取 OSS 接口
-  `${ModuleTypeEnum.SYSTEM}/getOssInfo`,
-  // 预览获取数据
-  `${ModuleTypeEnum.PROJECT}/getData`,
-]
-
-// 接口黑名单
-export const fetchBlockList = []
--- a/src/api/axios.ts
+++ b/src/api/axios.ts
@@ -1,80 +1,29 @@
-import axios, { AxiosResponse, AxiosRequestConfig, Axios } from 'axios'
-import { ResultEnum, ModuleTypeEnum } from "@/enums/httpEnum"
-import { PageEnum, ErrorPageNameMap } from "@/enums/pageEnum"
-import { StorageEnum } from '@/enums/storageEnum'
-import { axiosPre } from '@/settings/httpSetting'
-import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
-import { redirectErrorPage, getLocalStorage, routerTurnByName, isPreview } from '@/utils'
-import { fetchAllowList } from './axios.config'
-import includes from 'lodash/includes'
-
-export interface MyResponseType<T> {
-  code: ResultEnum
-  data: T
-  message: string
-}
-
-export interface MyRequestInstance extends Axios {
-  <T = any>(config: AxiosRequestConfig): Promise<MyResponseType<T>>
-}
+import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
+import { ResultEnum } from "@/enums/httpEnum"
+import { ErrorPageNameMap } from "@/enums/pageEnum"
+import { redirectErrorPage } from '@/utils'

 const axiosInstance = axios.create({
-  baseURL: `${import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : ''}${axiosPre}`,
+  baseURL: import.meta.env.DEV ? import.meta.env.VITE_DEV_PATH : import.meta.env.VITE_PRO_PATH,
  timeout: ResultEnum.TIMEOUT,
-}) as unknown as MyRequestInstance
+})

 axiosInstance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
-    // 白名单校验
-    if (includes(fetchAllowList, config.url)) return config
-    // 获取 token
-    const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
-    // 重新登录
-    if (!info) {
-      routerTurnByName(PageEnum.BASE_LOGIN_NAME)
-      return config
-    }
-    const userInfo = info[SystemStoreEnum.USER_INFO]
-    config.headers = {
-      ...config.headers,
-      [userInfo[SystemStoreUserInfoEnum.TOKEN_NAME] || 'token']: userInfo[SystemStoreUserInfoEnum.USER_TOKEN] || ''
-    }
    return config
  },
-  (err: AxiosRequestConfig) => {
-    Promise.reject(err)
+  (error: AxiosRequestConfig) => {
+    Promise.reject(error)
  }
 )

 // 响应拦截器
 axiosInstance.interceptors.response.use(
  (res: AxiosResponse) => {
-    // 预览页面错误不进行处理
-    if (isPreview()) {
-      return Promise.resolve(res.data)
-    }
    const { code } = res.data as { code: number }
-
-    // 成功
-    if (code === ResultEnum.SUCCESS) {
-      return Promise.resolve(res.data)
-    }
-
-    // 登录过期
-    if (code === ResultEnum.TOKEN_OVERDUE) {
-      window['$message'].error(window['$t']('http.token_overdue_message'))
-      routerTurnByName(PageEnum.BASE_LOGIN_NAME)
-      return Promise.resolve(res.data)
-    }
-
-    // 固定错误码重定向
-    if (ErrorPageNameMap.get(code)) {
-      redirectErrorPage(code)
-      return Promise.resolve(res.data)
-    }
-    
-    // 提示错误
-    window['$message'].error(window['$t']((res.data as any).msg))
+    if (code === ResultEnum.DATA_SUCCESS) return Promise.resolve(res.data)
+    // 重定向
+    if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
    return Promise.resolve(res.data)
  },
  (err: AxiosResponse) => {
--- a/src/api/http.ts
+++ b/src/api/http.ts
@@ -9,16 +9,16 @@ import {
 } from '@/enums/httpEnum'
 import type { RequestGlobalConfigType, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'

-export const get = <T = any>(url: string, params?: object) => {
-  return axiosInstance<T>({
+export const get = (url: string, params?: object) => {
+  return axiosInstance({
    url: url,
    method: RequestHttpEnum.GET,
-    params: params,
+    params: params
  })
 }

-export const post = <T = any>(url: string, data?: object, headersType?: string) => {
-  return axiosInstance<T>({
+export const post = (url: string, data?: object, headersType?: string) => {
+  return axiosInstance({
    url: url,
    method: RequestHttpEnum.POST,
    data: data,
@@ -28,8 +28,8 @@ export const post = <T = any>(url: string, data?: object, headersType?: string)
  })
 }

-export const patch = <T = any>(url: string, data?: object, headersType?: string) => {
-  return axiosInstance<T>({
+export const patch = (url: string, data?: object, headersType?: string) => {
+  return axiosInstance({
    url: url,
    method: RequestHttpEnum.PATCH,
    data: data,
@@ -39,8 +39,8 @@ export const patch = <T = any>(url: string, data?: object, headersType?: string)
  })
 }

-export const put = <T = any>(url: string, data?: object, headersType?: ContentTypeEnum) => {
-  return axiosInstance<T>({
+export const put = (url: string, data?: object, headersType?: ContentTypeEnum) => {
+  return axiosInstance({
    url: url,
    method: RequestHttpEnum.PUT,
    data: data,
@@ -50,8 +50,8 @@ export const put = <T = any>(url: string, data?: object, headersType?: ContentTy
  })
 }

-export const del = <T = any>(url: string, params?: object) => {
-  return axiosInstance<T>({
+export const del = (url: string, params?: object) => {
+  return axiosInstance({
    url: url,
    method: RequestHttpEnum.DELETE,
    params
@@ -82,11 +82,11 @@ export const http = (type?: RequestHttpEnum) => {
 }
 const prefix = 'javascript:'
 // 对输入字符进行转义处理
-export const translateStr = (target: string | Record<any, any>) => {
+export const translateStr = (target: string | object) => {
  if (typeof target === 'string') {
    if (target.startsWith(prefix)) {
      const funcStr = target.split(prefix)[1]
-      let result
+      let result;
      try {
        result = new Function(`${funcStr}`)()
      } catch (error) {
@@ -100,8 +100,8 @@ export const translateStr = (target: string | Record<any, any>) => {
  }
  for (const key in target) {
    if (Object.prototype.hasOwnProperty.call(target, key)) {
-      const subTarget = target[key]
-      target[key] = translateStr(subTarget)
+      const subTarget = (target as any)[key];
+      (target as any)[key] = translateStr(subTarget)
    }
  }
  return target
--- a/src/api/mock/test.mock.ts
+++ b/src/api/mock/test.mock.ts
@@ -26,12 +26,8 @@ export default {
    msg: '请求成功',
    data: {
      dimensions: ['name', 'value'],
-      source: [
-        { name: '厦门', 'value|0-40': 20 },
-        { name: '南阳', 'value|20-60': 40 },
-        { name: '北京', 'value|40-80': 60 },
-        { name: '上海', 'value|60-100': 80 },
-        { name: '新疆', value: 100 }
+      "source|2-5": [
+        { 'name|+1': ["厦门","福州","北京","上海","新疆","郑州","湖南","内蒙古"], 'value|0-40': 20 },
      ]
    }
  },
--- a/src/api/path/index.ts
+++ b/src/api/path/index.ts
@@ -1,2 +0,0 @@
-export * from '@/api/path/project.api'
-export * from '@/api/path/system.api'
--- a/src/api/path/project.api.ts
+++ b/src/api/path/project.api.ts
@@ -1,98 +0,0 @@
-import { http } from '@/api/http'
-import { httpErrorHandle } from '@/utils'
-import { ContentTypeEnum, RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEnum'
-import { ProjectItem, ProjectDetail } from './project'
-
-// * 项目列表
-export const projectListApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.GET)<ProjectItem[]>(`${ModuleTypeEnum.PROJECT}/list`, data)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
-
-// * 新增项目
-export const createProjectApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.POST)<{
-      /**
-       * 项目id
-       */
-      id: number
-    }>(`${ModuleTypeEnum.PROJECT}/create`, data)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
-
-// * 获取项目
-export const fetchProjectApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.GET)<ProjectDetail>(`${ModuleTypeEnum.PROJECT}/getData`, data)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
-
-// * 保存项目
-export const saveProjectApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.POST)(
-      `${ModuleTypeEnum.PROJECT}/save/data`,
-      data,
-      ContentTypeEnum.FORM_URLENCODED
-    )
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
-
-// * 修改项目基础信息
-export const updateProjectApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/edit`, data)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
-
-// * 删除项目
-export const deleteProjectApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.DELETE)(`${ModuleTypeEnum.PROJECT}/delete`, data)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
-
-// * 修改发布状态 [-1未发布,1发布]
-export const changeProjectReleaseApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.PUT)(`${ModuleTypeEnum.PROJECT}/publish`, data)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
-
-// * 上传文件
-export const uploadFile = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.POST)<{
-      /**
-       * 文件地址
-       */
-      fileName: string
-    }>(`${ModuleTypeEnum.PROJECT}/upload`, data, ContentTypeEnum.FORM_DATA)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
--- a/src/api/path/project.d.ts
+++ b/src/api/path/project.d.ts
@@ -1,39 +0,0 @@
-export type ProjectItem = {
-  /**
-   * 项目 id
-   */
-  id: string
-  /**
-   * 项目名称
-   */
-  projectName: string
-  /**
-   * 项目状态:\
-   * -1: 未发布\
-   * 1: 已发布
-   */
-  state: number
-  /**
-   * 创建时间
-   */
-  createTime: string
-  /**
-   * 预览图片url
-   */
-  indexImage: string
-  /**
-   * 创建者 id
-   */
-  createUserId: string
-  /**
-   * 项目备注
-   */
-  remarks: string
-}
-
-export interface ProjectDetail extends ProjectItem {
-  /**
-   * 项目参数
-   */
-   content: string
-}
--- a/src/api/path/system.api.ts
+++ b/src/api/path/system.api.ts
@@ -1,39 +0,0 @@
-import { http } from '@/api/http'
-import { httpErrorHandle } from '@/utils'
-import { RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEnum'
-import { LoginResult } from './system'
-
-// * 登录
-export const loginApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.POST)<LoginResult>(`${ModuleTypeEnum.SYSTEM}/login`, data)
-    return res
-  } catch (err) {
-    httpErrorHandle()
-  }
-}
-
-// * 登出
-export const logoutApi = async () => {
-  try {
-    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/logout`)
-    return res
-  } catch (err) {
-    httpErrorHandle()
-  }
-}
-
-// * 获取 oss 上传接口
-export const ossUrlApi = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.GET)<{
-      /**
-       * bucket 地址
-       */
-      bucketURL?: string
-    }>(`${ModuleTypeEnum.SYSTEM}/getOssInfo`, data)
-    return res
-  } catch (err) {
-    httpErrorHandle()
-  }
-}
--- a/src/api/path/system.d.ts
+++ b/src/api/path/system.d.ts
@@ -1,26 +0,0 @@
-export interface LoginResult {
-  token: {
-    /**
-     * token 值
-     */
-    tokenValue: string
-    /**
-     * token key
-     */
-    tokenName: string
-  }
-  userinfo: {
-    /**
-     * 昵称
-     */
-    nickname: string
-    /**
-     * 用户名
-     */
-    username: string
-    /**
-     * 用户 id
-     */
-    id: string
-  }
-}
--- a/src/components/GoLangSelect/index.vue
+++ b/src/components/GoLangSelect/index.vue
@@ -14,16 +14,19 @@
 </template>

 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import { useLangStore } from '@/store/modules/langStore/langStore'
 import { langList } from '@/i18n/index'
 import { LangEnum } from '@/enums/styleEnum'
 import { icon } from '@/plugins'

 const { LanguageIcon } = icon.ionicons5
+const { locale } = useI18n();
 const langStore = useLangStore()
 const options = langList

 const handleSelect = (key: LangEnum) => {
+  locale.value = key;
  langStore.changeLang(key)
 }
 </script>
--- a/src/components/GoSystemInfo/index.vue
+++ b/src/components/GoSystemInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
    <n-list bordered class="go-system-info">
      <template #header>
        <n-space justify="space-between">
@@ -51,10 +51,10 @@ const props = defineProps({

 const emit = defineEmits(['update:modelShow'])
 const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
-const modelShow = ref(false)
+const modelShowRef = ref(false)

 watch(() => props.modelShow, (newValue) => {
-  modelShow.value = newValue
+  modelShowRef.value = newValue
 })

 const closeHandle = () => {
--- a/src/components/GoSystemSet/index.vue
+++ b/src/components/GoSystemSet/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
    <n-list bordered class="go-system-setting">
      <template #header>
        <n-space justify="space-between">
@@ -82,7 +82,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelShow'])
 const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
 const settingStore = useSettingStore()
-const modelShow = ref(false)
+const modelShowRef = ref(false)

 const list = reactive<ListType[]>([
  {
@@ -168,7 +168,7 @@ const list = reactive<ListType[]>([
 ])

 watch(() => props.modelShow, (newValue) => {
-  modelShow.value = newValue
+  modelShowRef.value = newValue
 })

 const closeHandle = () => {
--- a/src/components/GoUserInfo/index.vue
+++ b/src/components/GoUserInfo/index.vue
@@ -27,9 +27,7 @@
 <script lang="ts" setup>
 import { h, ref } from 'vue'
 import { NAvatar, NText } from 'naive-ui'
-import { renderIcon, getLocalStorage } from '@/utils'
-import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
-import { StorageEnum } from '@/enums/storageEnum'
+import { renderIcon } from '@/utils'
 import { logout, renderLang } from '@/utils'
 import { GoSystemSet } from '@/components/GoSystemSet/index'
 import { GoSystemInfo } from '@/components/GoSystemInfo/index'
@@ -66,17 +64,7 @@ const renderUserInfo = () => {
      }),
      h('div', null, [
        h('div', null, [
-            h(NText, { depth: 2 }, {
-                default: () => {
-                    const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
-                    if (info) {
-                        return info[SystemStoreEnum.USER_INFO][SystemStoreUserInfoEnum.USER_NAME];
-                    }
-                    else {
-                        return 'admin';
-                    }
-                }
-            })
+          h(NText, { depth: 2 }, { default: () => '奔跑的面条' })
        ])
      ])
    ]
@@ -149,4 +137,4 @@ const handleSelect = (key: string) => {
  cursor: pointer;
  transform: scale(0.7);
 }
-</style>
+</style>
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -46,6 +46,7 @@ export enum MenuEnum {
  UN_GROUP = 'unGroup',
  // 后退
  BACK = 'back',
+  // 前进
  FORWORD = 'forward',
  // 保存
  SAVE = 'save',
@@ -66,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 键盘枚举
@@ -77,17 +79,6 @@ export enum MacKeyboard {
  ALT = '⌥',
  CTRL_SOURCE_KEY = '⌘',
  SHIFT_SOURCE_KEY = '⇧',
-  ALT_SOURCE_KEY = '⌥'
-}
-
-// 同步状态枚举
-export enum SyncEnum {
-  // 等待
-  PENDING,
-  // 开始
-  START,
-  // 成功
-  SUCCESS,
-  // 失败
-  FAILURE
+  ALT_SOURCE_KEY = '⌥',
+  SPACE = 'Space'
 }
--- a/src/enums/httpEnum.ts
+++ b/src/enums/httpEnum.ts
@@ -1,18 +1,13 @@
-// 模块 Path 前缀分类
-export enum ModuleTypeEnum {
-  SYSTEM = 'sys',
-  PROJECT = 'project',
-}
-
-// 请求结果集
+/**
+ * @description: 请求结果集
+ */
 export enum ResultEnum {
  DATA_SUCCESS = 0,
  SUCCESS = 200,
  SERVER_ERROR = 500,
  SERVER_FORBIDDEN = 403,
  NOT_FOUND = 404,
-  TOKEN_OVERDUE = 886,
-  TIMEOUT = 60000,
+  TIMEOUT = 60000
 }

 // 数据相关
@@ -33,13 +28,9 @@ export enum RequestContentTypeEnum {
  SQL = 1
 }

-// 头部
-export enum RequestHttpHeaderEnum {
-  TOKEN = 'Token',
-  COOKIE = 'Cookie'
-}
-
-// 请求方法
+/**
+ * @description: 请求方法
+ */
 export enum RequestHttpEnum {
  GET = 'get',
  POST = 'post',
@@ -120,7 +111,9 @@ export type RequestParams = {
  }
 }

-// 常用的contentTyp类型
+/**
+ * @description:  常用的contentTyp类型
+ */
 export enum ContentTypeEnum {
  // json
  JSON = 'application/json;charset=UTF-8',
--- a/src/enums/pageEnum.ts
+++ b/src/enums/pageEnum.ts
@@ -26,15 +26,10 @@ export enum PageEnum {
  //重定向
  REDIRECT = '/redirect',
  REDIRECT_NAME = 'Redirect',
-
-  // 未发布
-  REDIRECT_UN_PUBLISH = '/redirect/unPublish',
-  REDIRECT_UN_PUBLISH_NAME = 'redirect-un-publish',
-
-  // 重载
  RELOAD = '/reload',
  RELOAD_NAME = 'Reload',

+
  // 首页
  BASE_HOME = '/project',
  BASE_HOME_NAME = 'Project',
--- a/src/enums/storageEnum.ts
+++ b/src/enums/storageEnum.ts
@@ -1,8 +1,10 @@
 export enum StorageEnum {
  // 全局设置
-  GO_SETTING_STORE = 'GO_SETTING',
+  GO_SYSTEM_SETTING_STORE = 'GO_SYSTEM_SETTING',
+  // token 等信息
+  GO_ACCESS_TOKEN_STORE = 'GO_ACCESS_TOKEN',
  // 登录信息
-  GO_SYSTEM_STORE = 'GO_SYSTEM',
+  GO_LOGIN_INFO_STORE = 'GO_LOGIN_INFO',
  // 语言
  GO_LANG_STORE = 'GO_LANG',
  // 当前选择的主题
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -2,7 +2,6 @@ export * from '@/hooks/useTheme.hook'
 export * from '@/hooks/usePreviewScale.hook'
 export * from '@/hooks/useCode.hook'
 export * from '@/hooks/useChartDataFetch.hook'
-export * from '@/hooks/useSystemInit.hook'
 export * from '@/hooks/useChartDataPondFetch.hook'
 export * from '@/hooks/useLifeHandler.hook'
 export * from '@/hooks/useLang.hook'
--- a/src/hooks/useSystemInit.hook.ts
+++ b/src/hooks/useSystemInit.hook.ts
@@ -1,23 +0,0 @@
-import { useSystemStore } from '@/store/modules/systemStore/systemStore'
-import { SystemStoreEnum } from '@/store/modules/systemStore/systemStore.d'
-import { ResultEnum } from '@/enums/httpEnum'
-import { ossUrlApi } from '@/api/path'
-
-
-// * 初始化
-export const useSystemInit = async () => {
-  const systemStore = useSystemStore()
-
-  // 获取 OSS 信息的 url 地址，用来拼接展示图片的地址
-  const getOssUrl = async () => {
-    const res = await ossUrlApi({})
-    if (res && res.code === ResultEnum.SUCCESS) {
-      systemStore.setItem(SystemStoreEnum.FETCH_INFO, {
-        OSSUrl: res.data?.bucketURL
-      })
-    }
-  }
-
-  // 执行
-  getOssUrl()
-}
--- a/src/i18n/en/index.ts
+++ b/src/i18n/en/index.ts
@@ -11,8 +11,6 @@ const global = {
  help: 'Help',
  contact: 'About Software',
  logout: 'Logout',
-  logout_success: 'Logout success！',
-  logout_failure: 'Logout Failed！',
  // system setting
  sys_set: 'System Setting',
  lang_set: 'Language Setting',
@@ -28,14 +26,8 @@ const global = {
  r_more: 'More',
 }

-const http = {
-  error_message: 'The interface is abnormal, please check the interface!',
-  token_overdue_message: 'Login expired, please log in again!'
-}
-
 export default {
  global,
-  http,
  login,
  project
 }
--- a/src/i18n/en/login.ts
+++ b/src/i18n/en/login.ts
@@ -2,6 +2,6 @@ export default {
  desc: "Login",
  form_auto: "Sign in automatically",
  form_button: "Login",
-  login_success: "Login success!",
-  login_message: "Please complete the letter!",
+  login_success: "Login success",
+  login_message: "Please complete the letter",
 }
--- a/src/i18n/en/project.ts
+++ b/src/i18n/en/project.ts
@@ -1,8 +1,6 @@
 export default {
  create_btn: 'Creat',
-  create_success: 'Creat Success!',
-  create_failure: 'Failed to create, please try again later！',
-  create_tip: 'Please select a content for development!',
+  create_tip: 'Please select a content for development',
  project: 'Project',
  my: 'My',
  new_project: 'New Project',
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -23,6 +23,8 @@ export const langList = [
 ]

 const i18n = createI18n({
+  legacy: false,
+  globalInjection:true,
  locale: langStorage?.lang || lang,
  fallbackLocale: langStorage?.lang || lang,
  messages: {
--- a/src/i18n/zh/index.ts
+++ b/src/i18n/zh/index.ts
@@ -11,8 +11,6 @@ const global = {
  help: '帮助中心',
  contact: '关于软件',
  logout: '退出登录',
-  logout_success: '退出成功！',
-  logout_failure: '退出失败！',
  // 系统设置
  sys_set: '系统设置',
  lang_set: '语言设置',
@@ -20,27 +18,16 @@ const global = {
  r_edit: '编辑',
  r_preview: '预览',
  r_copy: '克隆',
-  r_copy_success: '克隆成功！',
  r_rename: '重命名',
-  r_rename_success: '重命名成功！',
  r_publish: '发布',
-  r_publish_success: '成功发布！',
  r_unpublish: '取消发布',
-  r_unpublish_success: '取消成功！',
  r_download: '下载',
  r_delete: '删除',
-  r_delete_success: '删除成功！',
  r_more: '更多',
 }

-const http = {
-  error_message: '获取数据失败，请稍后重试！',
-  token_overdue_message: '登录过期，请重新登录！'
-}
-
 export default {
  global,
-  http,
  login,
  project
 }
--- a/src/i18n/zh/login.ts
+++ b/src/i18n/zh/login.ts
@@ -2,6 +2,6 @@ export default {
  desc: "登录",
  form_auto: "自动登录",
  form_button: "登录",
+  login_success: "登录成功",
  login_message: "请填写完整信息",
-  login_success: "登录成功！",
 }
--- a/src/i18n/zh/project.ts
+++ b/src/i18n/zh/project.ts
@@ -1,8 +1,6 @@
 export default {
  // aside
  create_btn: '新建',
-  create_success: '新建成功！',
-  create_failure: '新建失败，请稍后重试！',
  create_tip: '从哪里出发好呢？',
  project: '项目',
  my: '我的',
--- a/src/packages/components/Charts/Bars/CapsuleChart/index.vue
+++ b/src/packages/components/Charts/Bars/CapsuleChart/index.vue
@@ -111,18 +111,18 @@ watch(
  }
 )

-const calcData = (data: any) => {
-  mergeConfig(props.chartConfig.option)
-  calcCapsuleLengthAndLabelData()
-}
-
-const mergeConfig = (data: any) => {
-  state.mergedConfig = cloneDeep(data || {})
+const calcData = (data: any, type?: string) => {
+  let cloneConfig = cloneDeep(props.chartConfig.option || {})
+  state.mergedConfig = cloneConfig
+  if (type == 'preview') {
+    cloneConfig.dataset = data
+  }
+  calcCapsuleLengthAndLabelData(state.mergedConfig.dataset)
 }

 // 数据解析
-const calcCapsuleLengthAndLabelData = () => {
-  const { source } = state.mergedConfig.dataset
+const calcCapsuleLengthAndLabelData = (dataset: any) => {
+  const { source } = dataset
  if (!source.length) return

  state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
@@ -151,7 +151,7 @@ onMounted(() => {

 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  calcData(newData)
+  calcData(newData, 'preview')
 })
 </script>

--- a/src/plugins/customComponents.ts
+++ b/src/plugins/customComponents.ts
@@ -8,10 +8,7 @@ import { SketchRule } from 'vue3-sketch-ruler'
 * @param app
 */
 export function setupCustomComponents(app: App) {
-  // 骨架屏
  app.component('GoSkeleton', GoSkeleton)
-  // 加载
  app.component('GoLoading', GoLoading)
-  // 标尺
  app.component('SketchRule', SketchRule)
 }
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -54,7 +54,6 @@ import {
  ArrowForward as ArrowForwardIcon,
  Planet as PawIcon,
  Search as SearchIcon,
-  Reload as ReloadIcon,
  ChevronUpOutline as ChevronUpOutlineIcon,
  ChevronDownOutline as ChevronDownOutlineIcon,
  Pulse as PulseIcon,
@@ -94,7 +93,6 @@ import {
  FitToScreen as FitToScreenIcon,
  FitToHeight as FitToHeightIcon,
  FitToWidth as FitToWidthIcon,
-  Save as SaveIcon,
  Carbon3DCursor as Carbon3DCursorIcon,
  Carbon3DSoftware as Carbon3DSoftwareIcon,
  Filter as FilterIcon,
@@ -212,8 +210,6 @@ const ionicons5 = {
  PawIcon,
  // 搜索（放大镜）
  SearchIcon,
-  // 加载
-  ReloadIcon,
  // 过滤器
  FilterIcon,
  // 向上
@@ -281,8 +277,6 @@ const carbon = {
  FitToScreenIcon,
  FitToHeightIcon,
  FitToWidthIcon,
-  // 保存
-  SaveIcon,
  // 成组
  Carbon3DCursorIcon,
  // 解组
--- a/src/router/base.ts
+++ b/src/router/base.ts
@@ -1,13 +1,13 @@
 import { RouteRecordRaw } from 'vue-router'
 import type { AppRouteRecordRaw } from '@/router/types';
-import { ErrorPage404, ErrorPage403, ErrorPage500, Layout, RedirectHome, RedirectUnPublish } from '@/router/constant';
+import { ErrorPage404, ErrorPage403, ErrorPage500, Layout } from '@/router/constant';
 import { PageEnum } from '@/enums/pageEnum'
 import { GoReload } from '@/components/GoReload'


 export const LoginRoute: RouteRecordRaw = {
-  path: PageEnum.BASE_LOGIN,
-  name: PageEnum.BASE_LOGIN_NAME,
+  path: '/login',
+  name: 'Login',
  component: () => import('@/views/login/index.vue'),
  meta: {
    title: '登录',
@@ -60,21 +60,22 @@ export const ReloadRoute: AppRouteRecordRaw = {
  },
 }

-export const RedirectRoute: RouteRecordRaw[] = [
-  {
-    path: PageEnum.REDIRECT,
-    name: PageEnum.REDIRECT_NAME,
-    component: RedirectHome,
-    meta: {
-      title: PageEnum.REDIRECT_NAME,
-    },
+export const RedirectRoute: AppRouteRecordRaw = {
+  path: PageEnum.REDIRECT,
+  name: PageEnum.REDIRECT_NAME,
+  component: Layout,
+  meta: {
+    title: PageEnum.REDIRECT_NAME,
  },
-  {
-    path: PageEnum.REDIRECT_UN_PUBLISH,
-    name: PageEnum.REDIRECT_UN_PUBLISH_NAME,
-    component: RedirectUnPublish,
-    meta: {
-      title: PageEnum.REDIRECT_UN_PUBLISH_NAME,
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: PageEnum.REDIRECT_NAME,
+      component: () => import('@/views/redirect/index.vue'),
+      meta: {
+        title: PageEnum.REDIRECT_NAME,
+        hideBreadcrumb: true,
+      },
    },
-  },
-]
+  ],
+};
--- a/src/router/constant.ts
+++ b/src/router/constant.ts
@@ -4,10 +4,6 @@ export const ErrorPage403 = () => import('@/views/exception/403.vue');

 export const ErrorPage500 = () => import('@/views/exception/500.vue');

-export const RedirectHome = () => import('@/views/redirect/index.vue');
-
-export const RedirectUnPublish = () => import('@/views/redirect/UnPublish.vue');
-
 export const Layout = () => import('@/layout/index.vue');

 export const ParentLayout = () => import('@/layout/parentLayout.vue');
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,8 +1,9 @@
 import type { App } from 'vue'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { RedirectRoute } from '@/router/base'
 import { createRouterGuards } from './router-guards'
 import { PageEnum } from '@/enums/pageEnum'
-import { HttpErrorPage, LoginRoute, ReloadRoute, RedirectRoute } from '@/router/base'
+import { HttpErrorPage, LoginRoute, ReloadRoute } from '@/router/base'
 import { Layout } from '@/router/constant'

 import modules from '@/router/modules'
@@ -18,7 +19,6 @@ const RootRoute: Array<RouteRecordRaw> = [
    },
    children: [
      ...HttpErrorPage,
-      ...RedirectRoute,
      modules.projectRoutes,
      modules.chartRoutes,
      modules.previewRoutes,
@@ -28,7 +28,7 @@ const RootRoute: Array<RouteRecordRaw> = [
 ]


-export const constantRouter: any[] = [LoginRoute, ...RootRoute, ReloadRoute];
+export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute, ReloadRoute];

 const router = createRouter({
  history: createWebHashHistory(''),
--- a/src/router/router-guards.ts
+++ b/src/router/router-guards.ts
@@ -1,15 +1,7 @@
 import { Router } from 'vue-router';
-import { PageEnum, PreviewEnum } from '@/enums/pageEnum'
+import { PageEnum } from '@/enums/pageEnum'
 import { loginCheck } from '@/utils'

-// 路由白名单
-const routerAllowList = [
-  // 登录
-  PageEnum.BASE_LOGIN_NAME,
-  // 预览
-  PreviewEnum.CHART_PREVIEW_NAME
-]
-
 export function createRouterGuards(router: Router) {
  // 前置
  router.beforeEach(async (to, from, next) => {
@@ -20,8 +12,10 @@ export function createRouterGuards(router: Router) {
      next({ name: PageEnum.ERROR_PAGE_NAME_404 })
    }

-    // @ts-ignore
-    if (!routerAllowList.includes(to.name) && !loginCheck()) {
+    if (!loginCheck()) {
+      if (to.name === PageEnum.BASE_LOGIN_NAME) {
+        next()
+      }
      next({ name: PageEnum.BASE_LOGIN_NAME })
    }
    next()
--- a/src/settings/designSetting.ts
+++ b/src/settings/designSetting.ts
@@ -61,9 +61,6 @@ export const editToJsonInterval = 5000
 // 数据请求间隔
 export const requestInterval = 30

-// 工作台自动保存间隔（s）
-export const saveInterval = 30
-
 // 数据请求间隔单位
 export const requestIntervalUnit = RequestHttpIntervalEnum.SECOND

--- a/src/settings/httpSetting.ts
+++ b/src/settings/httpSetting.ts
@@ -1,2 +0,0 @@
-// 请求前缀
-export const axiosPre = '/api/goview'
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -1,6 +1,5 @@
 import { CreateComponentType, CreateComponentGroupType, FilterEnum } from '@/packages/index.d'
 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-import { SyncEnum } from '@/enums/editPageEnum'
 import {
  RequestHttpEnum,
  RequestContentTypeEnum,
@@ -13,29 +12,6 @@ import {
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'

-// 项目数据枚举
-export enum ProjectInfoEnum {
-  // ID
-  PROJECT_ID = "projectId",
-  // 名称
-  PROJECT_NAME = 'projectName',
-  // 描述
-  REMARKS = 'remarks',
-  // 缩略图
-  THUMBNAIL= 'thumbnail',
-  // 是否公开发布
-  RELEASE = 'release'
-}
-
-// 项目数据
-export type ProjectInfoType = {
-  [ProjectInfoEnum.PROJECT_ID]: string,
-  [ProjectInfoEnum.PROJECT_NAME]: string,
-  [ProjectInfoEnum.REMARKS]: string,
-  [ProjectInfoEnum.THUMBNAIL]: string,
-  [ProjectInfoEnum.RELEASE]: boolean
-}
-
 // 编辑画布属性
 export enum EditCanvasTypeEnum {
  EDIT_LAYOUT_DOM = 'editLayoutDom',
@@ -44,13 +20,12 @@ export enum EditCanvasTypeEnum {
  SCALE = 'scale',
  USER_SCALE = 'userScale',
  LOCK_SCALE = 'lockScale',
-  SAVE_STATUS = 'saveStatus',
  IS_CREATE = 'isCreate',
  IS_DRAG = 'isDrag',
  IS_SELECT = 'isSelect'
 }

-// 编辑区域（临时）
+// 编辑区域
 export type EditCanvasType = {
  // 编辑区域 DOM
  [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null
@@ -67,13 +42,11 @@ export type EditCanvasType = {
  [EditCanvasTypeEnum.IS_CREATE]: boolean
  // 拖拽中
  [EditCanvasTypeEnum.IS_DRAG]: boolean
-  // 保存状态
-  [EditCanvasTypeEnum.SAVE_STATUS]: SyncEnum
  // 框选中
  [EditCanvasTypeEnum.IS_SELECT]: boolean
 }

-// 画布数据/滤镜/背景色/宽高主题等
+// 滤镜/背景色/宽高主题等
 export enum EditCanvasConfigEnum {
  WIDTH = 'width',
  HEIGHT = 'height',
@@ -85,14 +58,7 @@ export enum EditCanvasConfigEnum {
  PREVIEW_SCALE_TYPE = 'previewScaleType'
 }

-// 画布属性（需保存）
-export type EditCanvasConfigType = {
-  // ID
-  [EditCanvasConfigEnum.PROJECT_ID]: string,
-  // 项目名称
-  [EditCanvasConfigEnum.PROJECT_NAME]: string,
-  // 项目描述
-  [EditCanvasConfigEnum.REMARKS]: string,
+export interface EditCanvasConfigType {
  // 滤镜-启用
  [FilterEnum.FILTERS_SHOW]: boolean
  // 滤镜-色相
@@ -164,7 +130,6 @@ export type RecordChartType = {

 // Store 枚举
 export enum ChartEditStoreEnum {
-  PROJECT_INFO = 'projectInfo',
  EDIT_RANGE = 'editRange',
  EDIT_CANVAS = 'editCanvas',
  RIGHT_MENU_SHOW = 'rightMenuShow',
@@ -226,7 +191,6 @@ export interface RequestConfigType extends RequestPublicConfigType {

 // Store 类型
 export interface ChartEditStoreType {
-  [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType
  [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
  [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
  [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -10,22 +10,14 @@ import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settin
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 // 全局设置
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
-// 历史类型
-import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-// 画布枚举
-import { MenuEnum, SyncEnum } from '@/enums/editPageEnum'
-
 import {
-  getUUID,
-  loadingStart,
-  loadingFinish,
-  loadingError,
-  isString,
-  isArray
-} from '@/utils'
-
+  HistoryActionTypeEnum,
+  HistoryItemType,
+  HistoryTargetTypeEnum
+} from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+import { MenuEnum } from '@/enums/editPageEnum'
+import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils'
 import {
-  ProjectInfoType,
  ChartEditStoreEnum,
  ChartEditStorage,
  ChartEditStoreType,
@@ -44,14 +36,6 @@ const settingStore = useSettingStore()
 export const useChartEditStore = defineStore({
  id: 'useChartEditStore',
  state: (): ChartEditStoreType => ({
-    // 项目数据
-    projectInfo: {
-      projectId: '',
-      projectName: '',
-      remarks: '',
-      thumbnail: '',
-      release: false
-    },
    // 画布属性
    editCanvas: {
      // 编辑区域 Dom
@@ -70,9 +54,7 @@ export const useChartEditStore = defineStore({
      // 拖拽中
      isDrag: false,
      // 框选中
-      isSelect: false,
-      // 同步中
-      saveStatus: SyncEnum.PENDING
+      isSelect: false
    },
    // 右键菜单
    rightMenuShow: false,
@@ -150,9 +132,6 @@ export const useChartEditStore = defineStore({
    componentList: []
  }),
  getters: {
-    getProjectInfo(): ProjectInfoType {
-      return this.projectInfo
-    },
    getMousePosition(): MousePositionType {
      return this.mousePosition
    },
@@ -187,10 +166,6 @@ export const useChartEditStore = defineStore({
    }
  },
  actions: {
-    // * 设置 peojectInfo 数据项
-    setProjectInfo<T extends keyof ProjectInfoType,  K extends ProjectInfoType[T]>(key: T, value: K) {
-      this.projectInfo[key] = value
-    },
    // * 设置 editCanvas 数据项
    setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
      this.editCanvas[key] = value
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
@@ -1,5 +1,5 @@
 export enum ChartModeEnum {
-  SINGLE= 'single',
+  SINGLE = 'single',
  DOUBLE = 'double'
 }

@@ -13,7 +13,9 @@ export enum ChartLayoutStoreEnum {
  CHARTS = 'charts',
  DETAILS = 'details',
  Chart_TYPE = 'chartType',
-  LAYER_TYPE = 'layerType'
+  LAYER_TYPE = 'layerType',
+  PERCENTAGE = 'percentage',
+  RE_POSITION_CANVAS = 'rePositionCanvas'
 }

 export interface ChartLayoutType {
@@ -27,4 +29,8 @@ export interface ChartLayoutType {
  [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum
  // 层级展示方式
  [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
+  // 当前正在加载的数量
+  [ChartLayoutStoreEnum.PERCENTAGE]: number
+  // 是否重置当前画布位置
+  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@@ -24,6 +24,10 @@ export const useChartLayoutStore = defineStore({
    chartType: ChartModeEnum.SINGLE,
    // 图层类型（默认图片）
    layerType: LayerModeEnum.THUMBNAIL,
+    // 当前加载数量
+    percentage: 0,
+    // 是否重置当前画布位置
+    rePositionCanvas: false,
    // 防止值不存在
    ...storageChartLayout
  }),
@@ -42,6 +46,12 @@ export const useChartLayoutStore = defineStore({
    },
    getLayerType(): LayerModeEnum {
      return this.layerType
+    },
+    getPercentage(): number {
+      return this.percentage
+    },
+    getRePositionCanvas(): boolean {
+      return this.rePositionCanvas
    }
  },
  actions: {
@@ -49,11 +59,19 @@ export const useChartLayoutStore = defineStore({
      this.$patch(state => {
        state[key] = value
      })
+      // 存储本地
      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
+      // 这里需要标记重置画布位置
+      this.rePositionCanvas = true;
      // 重新计算拖拽区域缩放比例
      setTimeout(() => {
        chartEditStore.computedScale()
      }, 500)
+    },
+    setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
+      this.$patch(state => {
+        state[key] = value
+      })
    }
  }
 })
--- a/src/store/modules/langStore/langStore.ts
+++ b/src/store/modules/langStore/langStore.ts
@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 import { lang } from '@/settings/designSetting'
 import { LangStateType } from './langStore.d'
 import { LangEnum } from '@/enums/styleEnum'
-import i18n from '@/i18n/index'
 import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
@@ -25,10 +24,8 @@ export const useLangStore = defineStore({
  actions: {
    changeLang(lang: LangEnum): void {
      const settingStore = useSettingStore()
-      
      if (this.lang === lang) return
      this.lang = lang
-      i18n.global.locale = lang
      setLocalStorage(GO_LANG_STORE, this.$state)

      if (settingStore.getChangeLangReload) {
--- a/src/store/modules/settingStore/settingStore.ts
+++ b/src/store/modules/settingStore/settingStore.ts
@@ -4,10 +4,10 @@ import { asideCollapsedWidth } from '@/settings/designSetting'
 import { SettingStoreType, ToolsStatusEnum } from './settingStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
-const { GO_SETTING_STORE } = StorageEnum
+const { GO_SYSTEM_SETTING_STORE } = StorageEnum

 const storageSetting: SettingStoreType = getLocalStorage(
-  GO_SETTING_STORE
+  GO_SYSTEM_SETTING_STORE
 )

 // 全局设置
@@ -48,7 +48,7 @@ export const useSettingStore = defineStore({
      this.$patch(state => {
        state[key] = value
      })
-      setLocalStorage(GO_SETTING_STORE, this.$state)
+      setLocalStorage(GO_SYSTEM_SETTING_STORE, this.$state)
    }
  }
 })
--- a/src/store/modules/systemStore/systemStore.d.ts
+++ b/src/store/modules/systemStore/systemStore.d.ts
@@ -1,31 +0,0 @@
-export enum SystemStoreUserInfoEnum {
-  USER_TOKEN = 'userToken',
-  TOKEN_NAME = 'tokenName',
-  USER_ID = 'userId',
-  USER_NAME = 'userName',
-  NICK_NAME = 'nickName',
-}
-
-export interface UserInfoType {
-  [SystemStoreUserInfoEnum.USER_TOKEN]?: string,
-  [SystemStoreUserInfoEnum.TOKEN_NAME]?: string,
-  [SystemStoreUserInfoEnum.USER_ID]?: string,
-  [SystemStoreUserInfoEnum.USER_NAME]?: string,
-  [SystemStoreUserInfoEnum.NICK_NAME]?: string,
-}
-
-export interface FetchInfoType {
-  OSSUrl?: string,
-}
-
-export enum SystemStoreEnum {
-  // 用户
-  USER_INFO = 'userInfo',
-  // 请求
-  FETCH_INFO = 'fetchInfo'
-}
-
-export interface SystemStoreType {
-  [SystemStoreEnum.USER_INFO]: UserInfoType
-  [SystemStoreEnum.FETCH_INFO]: FetchInfoType
-}
--- a/src/store/modules/systemStore/systemStore.ts
+++ b/src/store/modules/systemStore/systemStore.ts
@@ -1,40 +0,0 @@
-import { defineStore } from 'pinia'
-import { SystemStoreType, UserInfoType, FetchInfoType } from './systemStore.d'
-import { setLocalStorage, getLocalStorage } from '@/utils'
-import { StorageEnum } from '@/enums/storageEnum'
-
-const { GO_SYSTEM_STORE } = StorageEnum
-
-const storageSystem: SystemStoreType = getLocalStorage(GO_SYSTEM_STORE)
-
-// 系统数据记录
-export const useSystemStore = defineStore({
-  id: 'useSystemStore',
-  state: (): SystemStoreType => storageSystem || {
-    userInfo: {
-      userId: undefined,
-      userName: undefined,
-      userToken: undefined,
-      nickName: undefined
-    },
-    fetchInfo: {
-      OSSUrl: undefined
-    }
-  },
-  getters: {
-    getUserInfo(): UserInfoType {
-      return this.userInfo
-    },
-    getFetchInfo(): FetchInfoType {
-      return this.fetchInfo
-    },
-  },
-  actions: {
-    setItem<T extends keyof SystemStoreType, K extends SystemStoreType[T]>(key: T, value: K): void {
-      this.$patch(state => {
-        state[key] = value
-      });
-      setLocalStorage(GO_SYSTEM_STORE, this.$state)
-    }
-  }
-})
--- a/src/styles/common/mixins/mixins.scss
+++ b/src/styles/common/mixins/mixins.scss
@@ -17,7 +17,7 @@
 }

@mixin deep() {
-  :deep {
+  :deep() {
    @content;
  }
 }
--- a/src/utils/file.ts
+++ b/src/utils/file.ts
@@ -1,65 +1,3 @@
-/**
- * * base64转file
- * @param dataurl 
- * @param fileName 
- * @returns 
- */
-export const base64toFile = (dataurl: string, fileName: string) => {
-  let dataArr = dataurl.split(","),
-  mime = (dataArr as any[])[0].match(/:(.*?);/)[1],
-  bstr = atob(dataArr[1]),
-  n = bstr.length,
-  u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  return new File([u8arr], fileName, { type: mime });
-}
-
-/**
- * * file转url
- */
- export const fileToUrl = (file: File): string => {
-  const Url = URL || window.URL || window.webkitURL
-  const ImageUrl = Url.createObjectURL(file)
-  return ImageUrl
-}
-
-/**
- * * url转file
- */
- export const urlToFile = (fileUrl: string, fileName = `${new Date().getTime()}`): File => {
-  const dataArr = fileUrl.split(',')
-  const mime = (dataArr as any[])[0].match(/:(.*);/)[1]
-  const originStr = atob(dataArr[1])
-  return new File([originStr], `${fileName}`, { type: mime })
-}
-
-/**
- * * file转base64
- * @param file 文件数据
- * @param callback 回调函数 
- */
-export const fileTobase64 = (file: File, callback: Function) => {
-  let reader = new FileReader()
-  reader.readAsDataURL(file)
-  reader.onload = function (e: ProgressEvent<FileReader>) {
-    if (e.target) {
-      let base64 = e.target.result
-      callback(base64)
-    }
-  }
-}
-
-/**
- * * canvas转file
- * @param canvas 
- */
-export const canvastoFile = (canvas: HTMLCanvasElement, name?: string) => {
-  const dataurl = canvas.toDataURL('image/png')
-  return urlToFile(dataurl, name)
-}
-
 /**
 * *获取上传的文件数据
 * @param { File } file 文件对象
@@ -113,4 +51,4 @@ export const downloadTextFile = (
  // 字符内容转变成blob地址
  const blob = new Blob([content])
  downloadByA(URL.createObjectURL(blob), filename, fileSuffix)
-}
+}
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -1,6 +0,0 @@
-/**
- * * 请求失败统一处理
- */
-export const httpErrorHandle = () => {
-  window['$message'].error(window['$t']('http.error_message'))
-}
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -7,4 +7,3 @@ export * from '@/utils/plugin'
 export * from '@/utils/components'
 export * from '@/utils/type'
 export * from '@/utils/file'
-export * from '@/utils/http'
--- a/src/utils/plugin.ts
+++ b/src/utils/plugin.ts
@@ -35,7 +35,7 @@ export const loadingError = () => {
 * })
 * ```
 */
- export const goDialog = (
+export const goDialog = (
  params: {
    // 基本
    type?: DialogEnum
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -1,12 +1,11 @@
 import { useRoute } from 'vue-router'
-import { ResultEnum, RequestHttpHeaderEnum } from '@/enums/httpEnum'
-import { ErrorPageNameMap, PageEnum, PreviewEnum } from '@/enums/pageEnum'
+import { ResultEnum } from '@/enums/httpEnum'
+import { ErrorPageNameMap, PageEnum } from '@/enums/pageEnum'
 import { docPath, giteeSourceCodePath } from '@/settings/pathConst'
-import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
+import { cryptoDecode } from './crypto'
 import { StorageEnum } from '@/enums/storageEnum'
-import { clearLocalStorage, getLocalStorage, clearCookie } from './storage'
+import { clearLocalStorage, getLocalStorage } from './storage'
 import router from '@/router'
-import { logoutApi } from '@/api/path'

 /**
 * * 根据名字跳转路由
@@ -102,20 +101,11 @@ export const reloadRoutePage = () => {
 }

 /**
- * * 退出登录
+ * * 退出
 */
-export const logout = async () => {
-  try {
-    const res = await logoutApi()
-    if(res && res.code === ResultEnum.SUCCESS) {
-      window['$message'].success(window['$t']('global.logout_success'))
-      clearCookie(RequestHttpHeaderEnum.COOKIE)
-      clearLocalStorage(StorageEnum.GO_SYSTEM_STORE)
-      routerTurnByName(PageEnum.BASE_LOGIN_NAME)
-    }
-  } catch (error) {
-    window['$message'].success(window['$t']('global.logout_failure'))
-  }
+export const logout = () => {
+  clearLocalStorage(StorageEnum.GO_LOGIN_INFO_STORE)
+  routerTurnByName(PageEnum.BASE_LOGIN_NAME)
 }

 /**
@@ -167,7 +157,7 @@ export const fetchRouteParams = () => {
 * * 通过硬解析获取当前路由下的参数
 * @returns object
 */
-export const fetchRouteParamsLocation = () => {
+ export const fetchRouteParamsLocation = () => {
  try {
    return document.location.hash.split('/').pop() || ''
  } catch (error) {
@@ -185,29 +175,19 @@ export const goHome = () => {
 }

 /**
- * * 判断是否登录
+ * * 判断是否登录（现阶段是有 login 数据即可）
 * @return boolean
 */
 export const loginCheck = () => {
  try {
-    const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
+    const info = getLocalStorage(StorageEnum.GO_LOGIN_INFO_STORE)
    if (!info) return false
-    if (info[SystemStoreEnum.USER_INFO][SystemStoreUserInfoEnum.USER_TOKEN]) {
+    const decodeInfo = cryptoDecode(info)
+    if (decodeInfo) {
      return true
    }
    return false
  } catch (error) {
    return false
  }
-}
-
-/**
- * * 预览地址
- * @returns 
- */
- export const previewPath = (id?: string | number) => {
-  const { origin, pathname } = document.location
-  const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
-  const previewPath = `${origin}${pathname}${path}/${id || fetchRouteParamsLocation()}`
-  return previewPath
-}
+} 
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -68,41 +68,3 @@ export const getSessionStorage: (k: string) => any = (k: string) => {
 export const clearSessioStorage = (name: string) => {
  window.sessionStorage.removeItem(name)
 }
-
-/**
- * * 设置 cookie
- * @param name 键名
- * @param cvalue 键值
- * @param exdays 过期时间
- */
-export const setCookie = (name: string, cvalue: string, exdays: number) => {
-  const d = new Date();
-  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
-  const expires = "expires=" + d.toUTCString();
-  document.cookie = name + "=" + cvalue + "; " + expires;
-}
-
-/**
- * * 获取 cookie
- * @param cname 键名
- * @returns string
- */
-export const getCookie = (cname: string) => {
-  const name = cname + "=";
-  const ca = document.cookie.split(';');
-  for (let i = 0; i < ca.length; i++) {
-    let c = ca[i];
-    while (c.charAt(0) == ' ') c = c.substring(1);
-    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
-  }
-  return "";
-}
-
-/**
- * * 清除 cookie 
- * @param name 键名
- * @returns string
- */
-export const clearCookie = (name: string) => {
-  setCookie(name, "", -1);
-}
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -113,6 +113,29 @@ export const isMac = () => {
  return /macintosh|mac os x/i.test(navigator.userAgent)
 }

+/**
+ * * file转url
+ */
+export const fileToUrl = (file: File): string => {
+  const Url = URL || window.URL || window.webkitURL
+  const ImageUrl = Url.createObjectURL(file)
+  return ImageUrl
+}
+
+/**
+ * * file转base64
+ */
+export const fileTobase64 = (file: File, callback: Function) => {
+  let reader = new FileReader()
+  reader.readAsDataURL(file)
+  reader.onload = function (e: ProgressEvent<FileReader>) {
+    if (e.target) {
+      let base64 = e.target.result
+      callback(base64)
+    }
+  }
+}
+
 /**
 * * 挂载监听
 */
@@ -250,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)) {
+    if (keyCode == 32) 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,7 +83,11 @@ defineProps({
  xScroll: {
    type: Boolean,
    default: false
-  }
+  },
+  disabledScroll: {
+    type: Boolean,
+    default: false
+  },
 })

 const backHandle = () => {
@@ -93,41 +97,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 +153,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 +176,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/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@@ -131,20 +131,16 @@ import { backgroundImageSize } from '@/settings/designSetting'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { UploadCustomRequestOptions } from 'naive-ui'
-import { loadAsyncComponent, fetchRouteParamsLocation } from '@/utils'
+import { fileToUrl, loadAsyncComponent } from '@/utils'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
-import { ResultEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
-import { uploadFile} from '@/api/path'

 const { ColorPaletteIcon } = icon.ionicons5
 const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon

 const chartEditStore = useChartEditStore()
-const systemStore = useSystemStore()
 const canvasConfig = chartEditStore.getEditCanvasConfig
 const editCanvas = chartEditStore.getEditCanvas

@@ -272,30 +268,11 @@ const clearColor = () => {
 // 自定义上传操作
 const customRequest = (options: UploadCustomRequestOptions) => {
  const { file } = options
-  nextTick(async () => {
+  nextTick(() => {
    if (file.file) {
-      // 修改名称
-      const newNameFile = new File(
-        [file.file],
-        `${fetchRouteParamsLocation()}_index_background.png`,
-        { type: file.file.type }
-      )
-      let uploadParams = new FormData()
-      uploadParams.append('object', newNameFile)
-      const uploadRes = await uploadFile(uploadParams)
-
-      if(uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
-        chartEditStore.setEditCanvasConfig(
-          EditCanvasConfigEnum.BACKGROUND_IMAGE,
-          `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}?time=${new Date().getTime()}`
-        )
-        chartEditStore.setEditCanvasConfig(
-          EditCanvasConfigEnum.SELECT_COLOR,
-          false
-        )
-        return
-      }
-      window['$message'].error('添加图片失败，请稍后重试！')
+      const ImageUrl = fileToUrl(file.file)
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, ImageUrl)
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
    } else {
      window['$message'].error('添加图片失败，请稍后重试！')
    }
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-pond-control" v-model:show="modelShow" :mask-closable="false">
+  <n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">
    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
      <template #header></template>
      <template #header-extra> </template>
@@ -37,7 +37,6 @@

  <!-- 请求配置model -->
  <pond-data-request
-    v-if="requestShow"
    v-model:modelShow="requestShow"
    :targetDataRequest="editData"
    :isEdit="isEdit"
@@ -59,7 +58,7 @@ import { icon } from '@/plugins'
 import { getUUID, goDialog } from '@/utils'
 import { cloneDeep } from 'lodash'

-defineProps({
+const props = defineProps({
  modelShow: Boolean
 })

@@ -68,6 +67,7 @@ const { PencilIcon } = icon.ionicons5
 const { chartEditStore, targetData } = useTargetData()
 const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)
 const requestShow = ref(false)
+const modelShowRef = ref(false)
 const loading = ref(false)
 const isEdit = ref(false)
 const editData = ref<RequestDataPondItemType>()
@@ -82,6 +82,10 @@ const pondData = computed(() => {
  return data[0]
 })

+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+
 watch(
  () => pondData.value,
  newValue => {
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" :closeOnEsc="false">
+  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
      <template #header></template>
      <template #header-extra> </template>
@@ -29,12 +29,11 @@
 </template>

 <script script lang="ts" setup>
-import { toRefs, PropType } from 'vue'
+import { ref, toRefs, PropType, watch } from 'vue'
 import { RequestContentTypeEnum } from '@/enums/httpEnum'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
 import { RequestTargetConfig } from './components/RequestTargetConfig'
-import { useSync } from '@/views/chart/hooks/useSync.hook'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'

 const props = defineProps({
@@ -44,17 +43,25 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:modelShow', 'sendHandle'])

-const { targetData } = useTargetData()
-const { dataSyncUpdate } = useSync()
-
 // 解构基础配置
 const { chartConfig } = toRefs(props.targetData as CreateComponentType)
 const { requestContentType } = toRefs((props.targetData as CreateComponentType).request)
+const modelShowRef = ref(false)
 const requestContentTypeObj = {
  [RequestContentTypeEnum.DEFAULT]: '普通请求',
  [RequestContentTypeEnum.SQL]: 'SQL 请求'
 }

+watch(
+  () => props.modelShow,
+  newValue => {
+    modelShowRef.value = newValue
+  },
+  {
+    immediate: true
+  }
+)
+
 const closeHandle = () => {
  emit('update:modelShow', false)
 }
@@ -62,7 +69,6 @@ const closeHandle = () => {
 const closeAndSendHandle = () => {
  emit('update:modelShow', false)
  emit('sendHandle')
-  dataSyncUpdate()
 }
 </script>

--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" :closeOnEsc="false">
+  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
      <template #header></template>
      <template #header-extra> </template>
@@ -42,13 +42,12 @@
 </template>

 <script script lang="ts" setup>
-import { PropType, ref, watchEffect } from 'vue'
+import { PropType, ref, watch } from 'vue'
 import { RequestContentTypeEnum } from '@/enums/httpEnum'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
 import { RequestTargetConfig } from './components/RequestTargetConfig'
 import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { useSync } from '@/views/chart/hooks/useSync.hook'
 import { goDialog } from '@/utils'

 const props = defineProps({
@@ -57,9 +56,14 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:modelShow', 'editSaveHandle'])

-const { dataSyncUpdate } = useSync()
 const pondName = ref()
 const inputInstRef = ref()
+const modelShowRef = ref(false)
+
+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+

 const closeHandle = () => {
  emit('update:modelShow', false)
@@ -78,7 +82,6 @@ const closeAndSendHandle = () => {
    onPositiveCallback: () => {
      emit('update:modelShow', false)
      emit('editSaveHandle', props.targetDataRequest)
-      dataSyncUpdate()
    }
  })
 }
--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue
@@ -5,8 +5,6 @@
      <edit-history></edit-history>
      <!-- CTRL按键触发展示 -->
      <n-text id="keyboard-dress-show" depth="3"></n-text>
-      <n-divider vertical />
-      <edit-data-sync></edit-data-sync>
    </n-space>

    <n-space class="bottom-ri">
@@ -57,8 +55,7 @@
 import { reactive, ref, toRefs, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 import { EditHistory } from '../EditHistory/index'
-import { EditShortcutKey } from '../EditShortcutKey/index'
-import { EditDataSync } from '../EditDataSync/index'
+import EditShortcutKey from '../EditShortcutKey/index.vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -147,10 +144,6 @@ $max-width: 670px;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 0 10px;
-  width: 100%;
-  min-width: $min-width;
-  height: 40px;
  .bottom-ri {
    position: relative;
    top: 15px;
@@ -172,7 +165,7 @@ $max-width: 670px;
    .scale-slider {
      position: relative;
      top: -4px;
-      width: 200px;
+      width: 100px;
    }
  }
 }
--- a/src/views/chart/ContentEdit/components/EditDataSync/index.ts
+++ b/src/views/chart/ContentEdit/components/EditDataSync/index.ts
@@ -1,3 +0,0 @@
-import EditDataSync from './index.vue'
-
-export { EditDataSync }
--- a/src/views/chart/ContentEdit/components/EditDataSync/index.vue
+++ b/src/views/chart/ContentEdit/components/EditDataSync/index.vue
@@ -1,97 +0,0 @@
-<template>
-  <div class="go-edit-data-sync go-flex-items-center">
-    <n-tooltip trigger="hover">
-      <template #trigger>
-        <n-text class="status-desc go-ml-2" :type="descType" depth="3">
-          {{ statusDesc }}
-        </n-text>
-      </template>
-      <span>{{saveInterval}}s 更新一次</span>
-    </n-tooltip>
-    <n-spin
-      v-show="statusDesc === statusDescObj[1]['text']"
-      class="go-ml-2"
-      size="small"
-    >
-      <template #icon>
-        <n-icon size="13">
-          <reload-icon />
-        </n-icon>
-      </template>
-    </n-spin>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, toRefs, watch } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { SyncEnum } from '@/enums/editPageEnum'
-import { icon } from '@/plugins'
-import { saveInterval } from '@/settings/designSetting'
-
-const { ReloadIcon } = icon.ionicons5
-
-const chartEditStore = useChartEditStore()
-const designStore = useDesignStore()
-
-const { saveStatus } = toRefs(chartEditStore.getEditCanvas)
-const themeColor = ref(designStore.getAppTheme)
-
-const statusDesc = ref('')
-const descType = ref('')
-let setTimeoutIns: NodeJS.Timeout = setTimeout(() => {})
-
-const statusDescObj = {
-  [SyncEnum.PENDING]: {
-    text: '等待自动同步',
-    type: '',
-  },
-  [SyncEnum.START]: {
-    text: '正在同步中',
-    type: 'success',
-  },
-  [SyncEnum.SUCCESS]: {
-    text: '同步成功！',
-    type: 'success',
-  },
-  [SyncEnum.FAILURE]: {
-    text: '同步失败!',
-    type: 'error',
-  },
-}
-
-watch(
-  () => saveStatus.value,
-  newData => {
-    clearTimeout(setTimeoutIns)
-    statusDesc.value = statusDescObj[newData]['text']
-    descType.value = statusDescObj[newData]['type']
-    // 3秒重置展示
-    setTimeoutIns = setTimeout(() => {
-      statusDesc.value = statusDescObj[SyncEnum.PENDING]['text']
-      descType.value = statusDescObj[SyncEnum.PENDING]['type']
-    }, 3000)
-  },
-  {
-    immediate: true,
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-@include go('edit-data-sync') {
-  @include deep() {
-    .n-spin {
-      width: 13px;
-      height: 13px;
-    }
-  }
-  .status-desc {
-    cursor: default;
-    color: v-bind('themeColor');
-    font-size: 12px;
-    opacity: 0.8;
-  }
-}
-</style>
--- a/src/views/chart/ContentEdit/components/EditHistory/index.vue
+++ b/src/views/chart/ContentEdit/components/EditHistory/index.vue
@@ -133,6 +133,9 @@ const options = computed(() => {
 </script>

 <style lang="scss" scoped>
+.mr-10 {
+  margin-right: 10px;
+}
 .edit-history-popover {
  .btn-text {
    font-size: 12px;
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -55,6 +55,8 @@ const rangeModelStyle = computed(() => {
  position: relative;
  transform-origin: left top;
  background-size: cover;
+  border-radius: 20px;
+  overflow: hidden;
  @include fetch-border-color('hover-border-color');
  @include fetch-bg-color('background-color2');
  @include go(edit-range-model) {
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -1,49 +1,166 @@
 <template>
-  <sketch-rule
-    v-if="configShow"
-    :thick="thick"
-    :scale="scale"
-    :width="canvasBox().width"
-    :height="canvasBox().height"
-    :startX="startX"
-    :startY="startY"
-    :lines="lines"
-  ></sketch-rule>
+  <div class="go-sketch-rule">
+    <sketch-rule
+      v-if="sketchRuleReDraw"
+      :thick="thick"
+      :scale="scale"
+      :width="canvasBox().width"
+      :height="canvasBox().height"
+      :startX="startX"
+      :startY="startY"
+      :lines="lines"
+      :palette="paletteStyle"
+    >
+    </sketch-rule>
+    <div ref="$app" class="edit-screens" @scroll="handleScroll">
+      <div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
+        <div
+          ref="refSketchRuleBox"
+          class="canvas"
+          @mousedown="dragCanvas"
+          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
+        >
+          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 修复右下角白点用的 -->
+    <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div>
+  </div>
 </template>
-
 <script setup lang="ts">
-import { ref, toRefs, computed, watch, nextTick, onBeforeUnmount } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import throttle from 'lodash/throttle'

 const chartEditStore = useChartEditStore()
 const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()

-const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-const { scale, lockScale } = toRefs(chartEditStore.getEditCanvas)
-const { getLayers, getCharts, getDetails } = toRefs(chartLayoutStore)
-
-const configShow = ref(true)
-
-// x轴标尺开始的坐标数值
-const startX = -10
-// y轴标尺开始的坐标数值
-const startY = -10
-// 标尺的厚度
 const thick = 20
-// 初始化水平标尺上的参考线
-const lines = {
-  h: [],
-  v: []
+let prevMoveXValue = [0, 0]
+let prevMoveYValue = [0, 0]
+
+const $app = ref()
+const sketchRuleReDraw = ref(true)
+const refSketchRuleBox = ref()
+const $container = ref()
+const isPressSpace = ref(false)
+const cursorStyle = ref('auto')
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+const startX = ref(0)
+const startY = ref(0)
+const lines = reactive({ h: [], v: [] })
+
+const scale = computed(() => {
+  return chartEditStore.getEditCanvas.scale
+})
+
+// 滚动条拖动的高度
+const containerWidth = computed(() => {
+  return `${height.value * 2}px`
+})
+
+// 主题
+const paletteStyle = computed(() => {
+  const isDarkTheme = designStore.getDarkTheme
+  return isDarkTheme
+    ? {
+        bgColor: '#18181c',
+        longfgColor: '#4d4d4d',
+        shortfgColor: '#4d4d4d',
+        fontColor: '#4d4d4d',
+        shadowColor: '#18181c',
+        borderColor: '#18181c',
+        cornerActiveColor: '#18181c'
+      }
+    : {}
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 处理鼠标拖动
+const handleWheel = (e: any) => {
+  if (e.ctrlKey || e.metaKey) {
+    e.preventDefault()
+    let resScale = scale.value
+    // 放大(200%)
+    if (e.wheelDelta >= 0 && scale.value < 2) {
+      resScale = scale.value + 0.05
+      chartEditStore.setScale(resScale)
+      return
+    }
+    // 缩小(10%)
+    if (e.wheelDelta < 0 && scale.value > 0.1) {
+      resScale = scale.value - 0.05
+      chartEditStore.setScale(resScale)
+    }
+  }
 }

+// 滚动条处理
+const handleScroll = () => {
+  if (!$app.value) return
+  const screensRect = $app.value.getBoundingClientRect()
+  const canvasRect = refSketchRuleBox.value.getBoundingClientRect()
+  // 标尺开始的刻度
+  startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
+  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
+}
+
+// 拖拽处理
+const dragCanvas = (e: any) => {
+  e.preventDefault()
+  e.stopPropagation()
+
+  if (e.which == 2) isPressSpace.value = true
+  else if (!window.$KeyboardActive?.space) return
+  // @ts-ignore
+  document.activeElement?.blur()
+
+  const startX = e.pageX
+  const startY = e.pageY
+
+  const listenMousemove = listen(window, 'mousemove', (e: any) => {
+    const nx = e.pageX - startX
+    const ny = e.pageY - startY
+
+    const [prevMoveX1, prevMoveX2] = prevMoveXValue
+    const [prevMoveY1, prevMoveY2] = prevMoveYValue
+
+    prevMoveXValue = [prevMoveX2, nx]
+    prevMoveYValue = [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 listenMouseup = listen(window, 'mouseup', () => {
+    listenMousemove()
+    listenMouseup()
+    prevMoveXValue = [0, 0]
+    prevMoveYValue = [0, 0]
+    isPressSpace.value = false
+  })
+}
+
+// 计算画布大小
 const canvasBox = () => {
  const layoutDom = document.getElementById('go-chart-edit-layout')
  if (layoutDom) {
    return {
-      height: layoutDom.clientHeight - 40,
+      height: layoutDom.clientHeight - 25,
      width: layoutDom.clientWidth
    }
  }
@@ -53,83 +170,109 @@ const canvasBox = () => {
  }
 }

-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
-
-// 处理标尺重制大小
-const ruleChangeHandle = () => {
-  configShow.value = false
+// 重绘标尺
+const reDraw = () => {
+  sketchRuleReDraw.value = false
  setTimeout(() => {
-    configShow.value = true
-  })
+    sketchRuleReDraw.value = true
+  }, 10)
 }

-const ruleChangeHandleTimeOut = () => {
-  if (lockScale.value) {
-    setTimeout(() => {
-      ruleChangeHandle()
-    }, 500)
+// 滚动居中
+const canvasPosCenter = () => {
+  const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
+  const { width, height } = canvasBox()
+
+  $app.value.scrollLeft = containerWidth / 2 - width / 2
+  $app.value.scrollTop = containerHeight / 2 - height / 2
+}
+
+// 处理主题变化
+watch(
+  () => designStore.getDarkTheme,
+  () => {
+    reDraw()
  }
-}
+)

+// // 处理标尺重制大小
 watch(
  () => scale.value,
-  () => ruleChangeHandle()
+  (newValue, oldValue) => {
+    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
+      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
+      handleScroll()
+      setTimeout(() => {
+        canvasPosCenter()
+        reDraw()
+      }, 400)
+    } else {
+      throttle(reDraw, 20)
+    }
+  }
 )

+// 处理鼠标样式
 watch(
-  () => getLayers.value,
-  () => ruleChangeHandleTimeOut()
+  () => isPressSpace.value,
+  newValue => {
+    cursorStyle.value = newValue ? 'grab' : 'auto'
+  }
 )

-watch(
-  () => getCharts.value,
-  () => ruleChangeHandleTimeOut()
-)
+onMounted(() => {
+  if ($app.value) {
+    $app.value.addEventListener('wheel', handleWheel, { passive: false })
+    canvasPosCenter()
+  }
+})

-watch(
-  () => getDetails.value,
-  () => ruleChangeHandleTimeOut()
-)
+onUnmounted(() => {
+  if ($app.value) {
+    $app.value.removeEventListener('wheel', handleWheel)
+  }
+})

+window.onKeySpacePressHold = (isHold: boolean) => {
+  isPressSpace.value = isHold
+}
 </script>

 <style>
 /* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
 此库有计划 Vue3 版本，但是开发的时候还没发布 */
-
 #mb-ruler {
  top: 0;
  left: 0;
 }
-/* 适配底部的工具栏不遮盖 */
-#mb-ruler .v-container {
-  height: calc(100% - 65px) !important;
-}
+
 /* 横线 */
 #mb-ruler .v-container .lines .line {
  /* 最大缩放 200% */
  width: 200vw !important;
  border-top: 1px dashed v-bind('themeColor') !important;
 }
+
 #mb-ruler .v-container .indicator {
  border-bottom: 1px dashed v-bind('themeColor') !important;
 }
+
 /* 竖线 */
 #mb-ruler .h-container .lines .line {
  /* 最大缩放 200% */
  height: 200vh !important;
  border-left: 1px dashed v-bind('themeColor') !important;
 }
+
 #mb-ruler .h-container .indicator {
  border-left: 1px dashed v-bind('themeColor') !important;
 }
+
 /* 坐标数值背景颜色 */
 #mb-ruler .indicator .value {
  background-color: rgba(0, 0, 0, 0);
 }
+
 /* 删除按钮 */
 #mb-ruler .line .del {
  padding: 0;
@@ -142,3 +285,72 @@ watch(
  border-width: 0 !important;
 }
 </style>
+
+<style lang="scss" scoped>
+@include go('sketch-rule') {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  .edit-screens {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+    padding-bottom: 0px;
+
+    /* firefox */
+    scrollbar-color: rgba(144, 146, 152, 0.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, 0.3);
+    }
+  }
+
+  .fix-edit-screens-block {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    background-color: $--color-dark-bg-1;
+  }
+
+  .edit-screen-container {
+    position: absolute;
+    height: v-bind('containerWidth');
+    top: 0;
+    left: 0;
+  }
+
+  .canvas {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 0;
+    transform: translateY(-50%);
+
+    &:hover {
+      cursor: v-bind('cursorStyle');
+    }
+
+    &:active {
+      cursor: crosshair;
+    }
+  }
+}
+</style>
--- a/src/views/chart/ContentEdit/components/EditSelect/index.vue
+++ b/src/views/chart/ContentEdit/components/EditSelect/index.vue
@@ -93,7 +93,7 @@ watch(
    position: absolute;
    width: 100%;
    height: 100%;
-    border-radius: 10px;
+    border-radius: 5px;
    overflow: hidden;
  }
  .select-border {
@@ -107,7 +107,7 @@ watch(
  .select-background {
    top: 2px;
    left: 2px;
-    opacity: 0.03;
+    opacity: 0.2;
    background-color: v-bind('themeColor');
  }
 }
--- a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue
+++ b/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="modelShow" :mask-closable="true" @afterLeave="closeHandle">
+  <n-modal v-model:show="modelShowRef" :mask-closable="true" @afterLeave="closeHandle">
    <n-table class="model-content" :bordered="false" :single-line="false">
      <thead>
        <tr>
@@ -19,7 +19,8 @@
        <tr v-for="(item, index) in shortcutKeyOptions" :key="index">
          <td>{{ item.label }}</td>
          <td>{{ item.win }}</td>
-          <td>
+          <td v-if="item.macSource">{{ item.mac }}</td>
+          <td v-else>
            <n-gradient-text :size="22">{{ item.mac.substr(0, 1) }}</n-gradient-text>
            + {{ item.mac.substr(3) }}
          </td>
@@ -30,39 +31,37 @@
 </template>

 <script setup lang="ts">
+import { watch, ref } from 'vue'
 import { icon } from '@/plugins'
 import { WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'

 const { CloseIcon } = icon.ionicons5
+const modelShowRef = ref(false)

 const emit = defineEmits(['update:modelShow'])

-defineProps({
+const props = defineProps({
  modelShow: Boolean
 })

+
+watch(() => props.modelShow, (newValue) => {
+  modelShowRef.value = newValue
+})
+
 // 快捷键
 const shortcutKeyOptions = [
  {
-    label: '向上移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ `,
+    label: '拖拽画布',
+    win: `${WinKeyboard.SPACE.toUpperCase()} + 🖱️ `,
+    mac: `${MacKeyboard.SPACE.toUpperCase()} + 🖱️ `,
+    macSource: true
+  },
+  {
+    label: '向 上/右/下/左 移动',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ 或 → 或 ↓ 或 ←`,
    mac: `${MacKeyboard.CTRL.toUpperCase()} + ↑ `
  },
-  {
-    label: '向右移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + → `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + → `
-  },
-  {
-    label: '向下移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ↓ `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ↓ `
-  },
-  {
-    label: '向左移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ← `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ← `
-  },
  {
    label: '锁定',
    win: `${WinKeyboard.CTRL.toUpperCase()} + L `,
@@ -113,27 +112,23 @@ const shortcutKeyOptions = [
    win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + Z `,
    mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + Z `
  },
-  {
-    label: '保存',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + S `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + S `,
-  },
  {
    label: '多选',
    win: `${WinKeyboard.CTRL.toUpperCase()} + 🖱️ `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + 🖱️ `
+    mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + 🖱️ `
  },
  {
    label: '创建分组',
    win: `${WinKeyboard.CTRL.toUpperCase()} + G / 🖱️ `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + G / 🖱️`
+    mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + G / 🖱️`
  },
  {
    label: '解除分组',
    win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `
+    mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + G `
  }
 ]
+
 const closeHandle = () => {
  emit('update:modelShow', false)
 }
--- a/src/views/chart/ContentEdit/components/EditShortcutKey/index.ts
+++ b/src/views/chart/ContentEdit/components/EditShortcutKey/index.ts
@@ -1,3 +1,2 @@
 import EditShortcutKey from './index.vue'
-
 export { EditShortcutKey }
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
@@ -7,6 +7,7 @@ import { useSync } from '@/views/chart/hooks/useSync.hook'
 export const useFile = () => {
  const importUploadFileListRef = ref()
  const { updateComponent } = useSync()
+
  // 上传-前置
  //@ts-ignore
  const importBeforeUpload = ({ file }) => {
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
@@ -6,7 +6,7 @@ import { ChartEnum } from '@/enums/pageEnum'
 import { SavePageEnum } from '@/enums/editPageEnum'
 import { editToJsonInterval } from '@/settings/designSetting'

-const { updateComponent, dataSyncUpdate } = useSync()
+const { updateComponent } = useSync()
 const chartEditStore = useChartEditStore()

 // 侦听器更新
@@ -15,17 +15,11 @@ const useSyncUpdateHandle = () => {
  let timer: any
  const updateFn = (e: any) => updateComponent(e!.detail, true, false)
  const syncData = async () => {
-    dataSyncUpdate && (await dataSyncUpdate())
    dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
  }

  // 开启侦听
  const use = () => {
-    // // 1、定时同步数据
-    // timer = setInterval(() => {
-    //   // 窗口激活并且处于工作台
-    //   document.hasFocus() && syncData()
-    // }, editToJsonInterval)
    // // 1、定时同步数据
    // timer = setInterval(() => {
    //   // 窗口激活并且处于工作台
@@ -40,7 +34,6 @@ const useSyncUpdateHandle = () => {

  // 关闭侦听
  const unUse = () => {
-    // clearInterval(timer)
    // clearInterval(timer)
    removeEventListener(SavePageEnum.JSON, updateFn)
    removeEventListener('blur', syncData)
--- a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
@@ -9,7 +9,7 @@ export const exportHandle = () => {

  // 导出数据
  downloadTextFile(
-    JSON.stringify(chartEditStore.getStorageInfo || {}, (k, v) => {
+    JSON.stringify(chartEditStore.getStorageInfo || [], (k, v) => {
      return v === undefined ? null : v
    }),
    undefined,
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -62,6 +62,9 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType

 // * 框选
 export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
+  if (e.which == 2) return
+  if (window.$KeyboardActive?.space) return
+
  mousedownHandleUnStop(e)

  // 记录点击初始位置
@@ -149,7 +152,7 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C
        }
      }
    })
-  }, 20)
+  }, 30)

  // 鼠标抬起
  const mouseup = () => {
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <edit-rule></edit-rule>
+  <!-- <edit-rule></edit-rule> -->
  <content-box
    id="go-chart-edit-layout"
    :flex="true"
@@ -7,65 +7,68 @@
    :showBottom="true"
    :depth="1"
    :xScroll="true"
+    :disabledScroll="true"
    @mousedown="mousedownHandleUnStop"
    @drop="dragHandle"
    @dragover="dragoverHandle"
    @dragenter="dragoverHandle"
  >
-    <!-- 画布主体 -->
-    <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>
+    <edit-rule>
+      <!-- 画布主体 -->
+      <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>

-            <!-- 单组件 -->
-            <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>
+    </edit-rule>

    <!-- 工具栏 -->
    <template #aside>
@@ -91,7 +94,6 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore

 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
-import { useSync } from '../hooks/useSync.hook'
 import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'

@@ -105,7 +107,6 @@ import { EditTools } from './components/EditTools'

 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
-const { dataSyncFetch, intervalDataSyncUpdate } = useSync()

 // 布局处理
 useLayout()
@@ -174,13 +175,9 @@ const rangeStyle = computed(() => {
  }
 })

+// 键盘事件
 onMounted(() => {
-  // 键盘事件
  useAddKeyboard()
-  // 获取数据
-  dataSyncFetch()
-  // 定时更新数据
-  intervalDataSyncUpdate()
 })
 </script>

@@ -191,12 +188,13 @@ 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/ContentHeader/headerLeftBtn/index.vue
+++ b/src/views/chart/ContentHeader/headerLeftBtn/index.vue
@@ -29,44 +29,26 @@
        </template>
        <span>{{ item.title }}</span>
      </n-tooltip>
-
-      <n-divider vertical />
-
-      <!-- 保存 -->
-      <n-tooltip placement="bottom" trigger="hover">
-        <template #trigger>
-          <div class="save-btn" >
-            <n-button size="small" type="primary" ghost @click="dataSyncUpdate()">
-              <template #icon>
-                <n-icon>
-                  <SaveIcon></SaveIcon>
-                </n-icon>
-              </template>
-            </n-button>
-          </div>
-        </template>
-        <span>保存</span>
-      </n-tooltip>
    </n-space>
  </n-space>
 </template>

 <script setup lang="ts">
-import { toRefs, ref, Ref, reactive, computed } from 'vue'
+import { toRefs, Ref, reactive, computed } from 'vue'
 import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
 import { useRemoveKeyboard } from '../../hooks/useKeyboard.hook'
-import { useSync } from '../../hooks/useSync.hook'
+
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'

 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
-const { SaveIcon } = icon.carbon
 const { setItem } = useChartLayoutStore()
-const { dataSyncUpdate } = useSync()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 const chartEditStore = useChartEditStore()
 const chartHistoryStore = useChartHistoryStore()
@@ -148,7 +130,7 @@ const clickHistoryHandle = (item: ItemType<HistoryStackEnum>) => {
 // 返回首页
 const goHomeHandle = () => {
  goDialog({
-    message: '确定已保存了数据（Ctrl / ⌘ + S），并返回到首页吗？',
+    message: '返回将不会保存任何操作',
    isMaskClosable: true,
    onPositiveCallback: () => {
      goHome()
--- a/src/views/chart/ContentHeader/headerRightBtn/index.vue
+++ b/src/views/chart/ContentHeader/headerRightBtn/index.vue
@@ -1,98 +1,29 @@
 <template>
-  <n-space>
-    <n-button
-      v-for="item in btnList"
-      :key="item.key"
-      :type="item.type()"
-      ghost
-      @click="item.event"
-    >
+  <n-space class="go-mt-0">
+    <n-button v-for="item in btnList" :key="item.title" ghost @click="item.event">
      <template #icon>
        <component :is="item.icon"></component>
      </template>
-      <span>{{ item.title() }}</span>
+      <span>{{ item.title }}</span>
    </n-button>
  </n-space>
-
-  <!-- 发布管理弹窗 -->
-  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
-    <n-list bordered class="go-system-setting">
-      <template #header>
-        <n-space justify="space-between">
-          <n-h3 class="go-mb-0">发布管理</n-h3>
-          <n-icon size="20" class="go-cursor-pointer" @click="closeHandle">
-            <close-icon></close-icon>
-          </n-icon>
-        </n-space>
-      </template>
-
-      <n-list-item>
-        <n-space :size="10">
-          <n-alert :show-icon="false" title="预览地址：" type="success">
-            {{ previewPath() }}
-          </n-alert>
-          <n-space vertical>
-            <n-button tertiary type="primary" @click="copyPreviewPath()">
-              复制地址
-            </n-button>
-            <n-button :type="release ? 'warning' : 'primary'" @click="sendHandle">
-              {{ release ? '取消发布' : '发布大屏' }}
-            </n-button>
-          </n-space>
-        </n-space>
-      </n-list-item>
-
-      <n-list-item>
-        <n-space :size="10">
-          <n-button @click="modelShowHandle">关闭弹窗</n-button>
-        </n-space>
-      </n-list-item>
-    </n-list>
-  </n-modal>
 </template>

 <script setup lang="ts">
-import { ref, shallowReactive, watchEffect } from 'vue'
-import { useRoute } from 'vue-router'
-import { useClipboard } from '@vueuse/core'
+import { shallowReactive } from 'vue'
+import { renderIcon, goDialog, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
-import { ResultEnum } from '@/enums/httpEnum'
+import { useRoute } from 'vue-router'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { changeProjectReleaseApi } from '@/api/path'
-import {
-  previewPath,
-  renderIcon,
-  fetchPathByName,
-  routerTurnByPath,
-  setSessionStorage,
-  getLocalStorage,
-  httpErrorHandle,
-  fetchRouteParamsLocation,
-} from '@/utils'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { icon } from '@/plugins'

-const { BrowsersOutlineIcon, SendIcon, CloseIcon } = icon.ionicons5
+const { BrowsersOutlineIcon, SendIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()

-const previewPathRef = ref(previewPath())
-const { copy, isSupported } = useClipboard({ source: previewPathRef })
-
 const routerParamsInfo = useRoute()

-const modelShow = ref<boolean>(false)
-const release = ref<boolean>(false)
-
-watchEffect(() => {
-  release.value = chartEditStore.getProjectInfo.release || false
-})
-
-// 关闭弹窗
-const closeHandle = () => {
-  modelShow.value = false
-}
-
 // 预览
 const previewHandle = () => {
  const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
@@ -101,100 +32,55 @@ const previewHandle = () => {
  // id 标识
  const previewId = typeof id === 'string' ? id : id[0]
  const storageInfo = chartEditStore.getStorageInfo
-  const sessionStorageInfo =
-    getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []

  if (sessionStorageInfo?.length) {
-    const repeateIndex = sessionStorageInfo.findIndex(
-      (e: { id: string }) => e.id === previewId
-    )
+    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === previewId)
    // 重复替换
    if (repeateIndex !== -1) {
-      sessionStorageInfo.splice(repeateIndex, 1, {
-        id: previewId,
-        ...storageInfo,
-      })
+      sessionStorageInfo.splice(repeateIndex, 1, { id: previewId, ...storageInfo })
      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
    } else {
      sessionStorageInfo.push({
-        id: previewId,
-        ...storageInfo,
+        id: previewId, ...storageInfo
      })
      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
    }
  } else {
-    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [
-      { id: previewId, ...storageInfo },
-    ])
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id: previewId, ...storageInfo }])
  }
  // 跳转
  routerTurnByPath(path, [previewId], undefined, true)
 }

-// 模态弹窗
-const modelShowHandle = () => {
-  modelShow.value = !modelShow.value
-}
-
-// 复制预览地址
-const copyPreviewPath = (successText?: string, failureText?: string) => {
-  if (isSupported) {
-    copy()
-    window['$message'].success(successText || '复制成功！')
-  } else {
-    window['$message'].error(failureText || '复制失败！')
-  }
-}
-
 // 发布
-const sendHandle = async () => {
-  const res = (await changeProjectReleaseApi({
-    id: fetchRouteParamsLocation(),
-    // 反过来
-    state: release.value ? -1 : 1,
-  }))
-
-  if (res && res.code === ResultEnum.SUCCESS) {
-    modelShowHandle()
-    if (!release.value) {
-      copyPreviewPath('发布成功！已复制地址到剪贴板~', '发布成功！')
-    } else {
-      window['$message'].success(`已取消发布`)
-    }
-    chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, !release.value)
-  } else {
-    httpErrorHandle()
-  }
+const sendHandle = () => {
+  goDialog({
+    message: '想体验发布功能，请前往 master-fetch 分支查看: https://gitee.com/MTrun/go-view/tree/master-fetch',
+    positiveText: '了然',
+    closeNegativeText: true,
+    onPositiveCallback: () => {}
+  })
 }

 const btnList = shallowReactive([
  {
-    key: 'preview',
-    title: () => '预览',
-    type: () => 'default',
+    select: true,
+    title: '预览',
    icon: renderIcon(BrowsersOutlineIcon),
-    event: previewHandle,
+    event: previewHandle
  },
  {
-    key: 'release',
-    title: () => (release.value ? '已发布' : '发布'),
+    select: true,
+    title: '发布',
    icon: renderIcon(SendIcon),
-    type: () => (release.value ? 'primary' : 'default'),
-    event: modelShowHandle,
-  },
-])
-</script>
-
-<style lang="scss" scoped>
-@include go('system-setting') {
-  @extend .go-background-filter;
-  min-width: 100px;
-  max-width: 60vw;
-  padding-bottom: 20px;
-  @include deep() {
-    .n-list-item:not(:last-child) {
-      border-bottom: 0;
-    }
+    event: sendHandle
  }
+])
+
+</script>
+<style lang="scss" scoped>
+.align-center {
+  margin-top: -4px;
 }
 </style>
--- a/src/views/chart/ContentHeader/headerTitle/index.vue
+++ b/src/views/chart/ContentHeader/headerTitle/index.vue
@@ -6,7 +6,9 @@
    <n-text @click="handleFocus">
      工作空间 -
      <n-button v-show="!focus" secondary round size="tiny">
-        <span class="title">{{ comTitle }}</span>
+        <span class="title">
+          {{ comTitle }}
+        </span>
      </n-button>
    </n-text>

@@ -27,31 +29,29 @@
 </template>

 <script setup lang="ts">
-import { ref, nextTick, computed, watchEffect } from 'vue'
-import { ResultEnum } from '@/enums/httpEnum'
-import { fetchRouteParamsLocation, httpErrorHandle } from '@/utils'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { updateProjectApi } from '@/api/path'
-import { useSync } from '../../hooks/useSync.hook'
+import { ref, nextTick, computed } from 'vue'
+import { fetchRouteParamsLocation } from '@/utils'
 import { icon } from '@/plugins'
-
-const chartEditStore = useChartEditStore()
-const { dataSyncUpdate } = useSync()
 const { FishIcon } = icon.ionicons5

 const focus = ref<boolean>(false)
 const inputInstRef = ref(null)

-const title = ref<string>(fetchRouteParamsLocation())
+// 根据路由 id 参数获取项目信息
+const fetchProhectInfoById = () => {
+  const id = fetchRouteParamsLocation()
+  if (id.length) {
+    return id[0]
+  }
+  return ''
+}

-watchEffect(() => {
-  title.value = chartEditStore.getProjectInfo.projectName || ''
-})
+const title = ref<string>(fetchProhectInfoById() || '')

 const comTitle = computed(() => {
-  title.value = title.value && title.value.replace(/\s/g, '')
-  return title.value.length ? title.value : fetchRouteParamsLocation()
+  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+  title.value = title.value.replace(/\s/g, '')
+  return title.value.length ? title.value : '新项目'
 })

 const handleFocus = () => {
@@ -61,18 +61,8 @@ const handleFocus = () => {
  })
 }

-const handleBlur = async () => {
+const handleBlur = () => {
  focus.value = false
-  chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, title.value || '')
-  const res = (await updateProjectApi({
-    id: fetchRouteParamsLocation(),
-    projectName: title.value
-  }))
-  if (res && res.code === ResultEnum.SUCCESS) {
-    dataSyncUpdate()
-  } else {
-    httpErrorHandle()
-  }
 }
 </script>
 <style lang="scss" scoped>
--- a/src/views/chart/ContentLoad/index.ts
+++ b/src/views/chart/ContentLoad/index.ts
@@ -0,0 +1,3 @@
+import ContentLoad from './index.vue'
+
+export { ContentLoad }
--- a/src/views/chart/ContentLoad/index.vue
+++ b/src/views/chart/ContentLoad/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <n-modal :show="showModal" :close-on-esc="false" transform-origin="center">
+    <div>
+      <span> 拼命加载中... </span>
+      <n-progress type="line" :color="themeColor" :percentage="percentage" style="width: 300px" />
+    </div>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const chartLayoutStore = useChartLayoutStore()
+const designStore = useDesignStore()
+const showModal = ref(false)
+const percentage = ref(0)
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 监听百分比
+watch(
+  () => chartLayoutStore.getPercentage,
+  newValue => {
+    if (newValue === 0) {
+      setTimeout(() => {
+        percentage.value = newValue
+        showModal.value = false
+      }, 500);
+      return
+    }
+    percentage.value = newValue
+    showModal.value = newValue > 0
+  }
+)
+</script>
--- a/src/views/chart/hooks/useKeyboard.hook.ts
+++ b/src/views/chart/hooks/useKeyboard.hook.ts
@@ -1,5 +1,4 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useSync } from './useSync.hook' 
 import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum'
 import throttle from 'lodash/throttle'
 import debounce from 'lodash/debounce'
@@ -8,7 +7,7 @@ import { setKeyboardDressShow } from '@/utils'

 // Keymaster可以支持识别以下组合键： ⇧，shift，option，⌥，alt，ctrl，control，command，和⌘
 const chartEditStore = useChartEditStore()
-const useSyncIns = useSync()
+
 const winCtrlMerge = (e: string) => `${WinKeyboard.CTRL}+${e}`
 const winShiftMerge = (e: string) => `${WinKeyboard.SHIFT}+${e}`
 const winAltMerge = (e: string) => `${WinKeyboard.ALT}+${e}`
@@ -24,7 +23,6 @@ export const winKeyboardValue = {
  [MenuEnum.DELETE]: 'delete',
  [MenuEnum.BACK]: winCtrlMerge('z'),
  [MenuEnum.FORWORD]: winCtrlMerge(winShiftMerge('z')),
-  [MenuEnum.SAVE]: winCtrlMerge('s'),
  [MenuEnum.GROUP]: winCtrlMerge('g'),
  [MenuEnum.UN_GROUP]: winCtrlMerge(winShiftMerge('g')),
  [MenuEnum.LOCK]: winCtrlMerge('l'),
@@ -50,7 +48,6 @@ export const macKeyboardValue = {
  [MenuEnum.DELETE]: macCtrlMerge('backspace'),
  [MenuEnum.BACK]: macCtrlMerge('z'),
  [MenuEnum.FORWORD]: macCtrlMerge(macShiftMerge('z')),
-  [MenuEnum.SAVE]: macCtrlMerge('s'),
  [MenuEnum.GROUP]: macCtrlMerge('g'),
  [MenuEnum.UN_GROUP]: macCtrlMerge(macShiftMerge('g')),
  [MenuEnum.LOCK]: macCtrlMerge('l'),
@@ -74,7 +71,6 @@ const winKeyList: Array<string> = [
  winKeyboardValue.back,
  winKeyboardValue.forward,

-  winKeyboardValue.save,
  winKeyboardValue.group,
  winKeyboardValue.unGroup,

@@ -100,7 +96,6 @@ const macKeyList: Array<string> = [
  macKeyboardValue.back,
  macKeyboardValue.forward,

-  macKeyboardValue.save,
  macKeyboardValue.group,
  macKeyboardValue.unGroup,

@@ -115,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
+      }
    }
  }
 }
@@ -208,11 +215,6 @@ export const useAddKeyboard = () => {
      case keyboardValue.show:
        keymaster(e, throttle(() => { chartEditStore.setShow(); return false }, throttleTime))
        break;
-
-      // 保存 ct+s
-      case keyboardValue.save:
-        keymaster(e, throttle(() => { useSyncIns.dataSyncUpdate(); return false }, 200))
-        break;
    }
  }
  winKeyList.forEach((key: string) => {
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -1,21 +1,11 @@
-import { onUnmounted } from 'vue';
-import html2canvas from 'html2canvas'
-import { getUUID, httpErrorHandle, fetchRouteParamsLocation, base64toFile } from '@/utils'
+import { getUUID } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
-import { StylesSetting } from '@/components/Pages/ChartItemSetting'
-import { useSystemStore } from '@/store/modules/systemStore/systemStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
-import { saveInterval } from '@/settings/designSetting'
-import throttle from 'lodash/throttle'
-// 接口状态
-import { ResultEnum } from '@/enums/httpEnum'
-// 接口
-import { saveProjectApi, fetchProjectApi, uploadFile, updateProjectApi } from '@/api/path'
-// 画布枚举
-import { SyncEnum } from '@/enums/editPageEnum'
-import { BaseEvent, EventLife, CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
+import { BaseEvent, EventLife, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 import merge from 'lodash/merge'

@@ -97,8 +87,7 @@ const componentMerge = (newObject: any, sources: any, notComponent = false) => {
 export const useSync = () => {
  const chartEditStore = useChartEditStore()
  const chartHistoryStore = useChartHistoryStore()
-  const systemStore = useSystemStore()
-
+  const chartLayoutStore = useChartLayoutStore()
  /**
   * * 组件动态注册
   * @param projectData 项目数据
@@ -164,7 +153,13 @@ export const useSync = () => {
    for (const key in projectData) {
      // 组件
      if (key === ChartEditStoreEnum.COMPONENT_LIST) {
+        let loadIndex = 0
+        const listLength = projectData[key].length;
        for (const comItem of projectData[key]) {
+          // 设置加载数量
+          let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+          chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
+          // 判断类型
          if (comItem.isGroup) {
            // 创建分组
            let groupClass = new PublicGroupConfigClass()
@@ -195,137 +190,12 @@ export const useSync = () => {
        componentMerge(chartEditStore[key], projectData[key], true)
      }
    }
-  }

-  /**
-   * * 赋值全局数据
-   * @param projectData 项目数据
-   * @returns
-   */
-  const updateStoreInfo = (projectData: {
-    id: string,
-    projectName: string,
-    indexImage: string,
-    remarks: string,
-    state: number
-  }) => {
-    const { id, projectName, remarks, indexImage, state } = projectData
-    // ID
-    chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, id)
-    // 名称
-    chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, projectName)
-    // 描述
-    chartEditStore.setProjectInfo(ProjectInfoEnum.REMARKS, remarks)
-    // 缩略图
-    chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)
-    // 发布
-    chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, state === 1)
-  }
-
-  // * 数据获取
-  const dataSyncFetch = async () => {
-    // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复
-    // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复
-    chartEditStore.componentList = []
-    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
-    try {
-      const res = await fetchProjectApi({ projectId: fetchRouteParamsLocation() })
-      if (res && res.code === ResultEnum.SUCCESS) {
-        if (res.data) {
-          updateStoreInfo(res.data)
-          // 更新全局数据
-          await updateComponent(JSON.parse(res.data.content))
-          return
-        }else {
-          chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
-        }
-        setTimeout(() => {
-          chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
-        }, 1000)
-        return
-      }
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-    } catch (error) {
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-      httpErrorHandle()
-    }
-  }
-
-  // * 数据保存
-  const dataSyncUpdate = throttle(async (updateImg = true) => {
-    if(!fetchRouteParamsLocation()) return
-
-    let projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID];
-    if(projectId === null || projectId === ''){
-      window['$message'].error('数据初未始化成功,请刷新页面！')
-      return
-    }
-
-    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
-
-    // 异常处理：缩略图上传失败不影响JSON的保存
-    try {
-      if (updateImg) {
-        // 获取缩略图片
-        const range = document.querySelector('.go-edit-range') as HTMLElement
-        // 生成图片
-        const canvasImage: HTMLCanvasElement = await html2canvas(range, {
-          backgroundColor: null,
-          allowTaint: true,
-          useCORS: true
-        })
-
-        // 上传预览图
-        let uploadParams = new FormData()
-        uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`))
-        const uploadRes = await uploadFile(uploadParams)
-        // 保存预览图
-        if(uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
-          await updateProjectApi({
-            id: fetchRouteParamsLocation(),
-            indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
-          })
-        }
-      }
-    } catch (e) {
-      console.log(e)
-    }
-
-    // 保存数据
-    let params = new FormData()
-    params.append('projectId', projectId)
-    params.append('content', JSON.stringify(chartEditStore.getStorageInfo || {}))
-    const res= await saveProjectApi(params)
-
-    if (res && res.code === ResultEnum.SUCCESS) {
-      // 成功状态
-      setTimeout(() => {
-        chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
-      }, 1000)
-      return
-    }
-    // 失败状态
-    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-  }, 3000)
-
-  // * 定时处理
-  const intervalDataSyncUpdate = () => {
-    // 定时获取数据
-    const syncTiming = setInterval(() => {
-      dataSyncUpdate()
-    }, saveInterval * 1000)
-
-    // 销毁
-    onUnmounted(() => {
-      clearInterval(syncTiming)
-    })
+    // 清除数量
+    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
  }

  return {
-    updateComponent,
-    updateStoreInfo,
-    dataSyncFetch,
-    dataSyncUpdate,
-    intervalDataSyncUpdate
+    updateComponent
  }
 }
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -32,6 +32,8 @@
    :on-clickoutside="onClickOutSide"
    @select="handleMenuSelect"
  ></n-dropdown>
+  <!-- 加载蒙层 -->
+  <content-load></content-load>
 </template>

 <script setup lang="ts">
@@ -53,6 +55,7 @@ const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle
 const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
 const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
 const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
+const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))

 // 右键
 const {
--- a/src/views/edit/index.vue
+++ b/src/views/edit/index.vue
@@ -38,14 +38,10 @@ import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { SavePageEnum } from '@/enums/editPageEnum'
 import { getSessionStorageInfo } from '../preview/utils'
 import type { ChartEditStorageType } from '../preview/index.d'
-import { setSessionStorage, fetchRouteParamsLocation } from '@/utils'
+import { setSessionStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
-import { useSync } from '@/views/chart/hooks/useSync.hook'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-const chartEditStore = useChartEditStore()
-const { dataSyncUpdate } = useSync()
+
 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
 const showOpenFilePicker: Function = (window as any).showOpenFilePicker
 const content = ref('')
@@ -97,11 +93,6 @@ async function updateSync() {
    const detail = JSON.parse(content.value)
    delete detail.id
    // 保持id不变
-    // 带后端版本额外处理请求
-    if (dataSyncUpdate) {
-      chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
-      await dataSyncUpdate(false) // JSON界面保存不上传缩略图
-    }
    window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
  } catch (e) {
    window['$message'].error('内容格式有误')
--- a/src/views/exception/403.vue
+++ b/src/views/exception/403.vue
@@ -4,7 +4,7 @@
      <img src="~@/assets/images/exception/403.svg" alt="" />
    </div>
    <div class="text-center">
-      <h1>抱歉，你无权访问该页面</h1>
+      <h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
    </div>
    <n-button type="primary" @click="goHome">回到首页</n-button>
  </div>
--- a/src/views/exception/404.vue
+++ b/src/views/exception/404.vue
@@ -4,7 +4,7 @@
      <img src="~@/assets/images/exception/404.svg" alt="" />
    </div>
    <div class="text-center">
-      <h1>抱歉，你访问的页面不存在</h1>
+      <h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
    </div>
    <n-button type="primary" @click="goHome">回到首页</n-button>
  </div>
--- a/src/views/exception/500.vue
+++ b/src/views/exception/500.vue
@@ -4,9 +4,9 @@
      <img src="~@/assets/images/exception/500.svg" alt="" />
    </div>
    <div class="text-center">
-      <h1 class="text-base text-gray-500">抱歉，服务器出错了，建议您重新登录呢</h1>
+      <h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
    </div>
-    <n-button type="primary" secondary @click="goLogin">重新登录</n-button>
+    <n-button type="primary" secondary @click="goHome">回到首页</n-button>
  </div>
 </template>

@@ -14,8 +14,8 @@
 import { PageEnum } from '@/enums/pageEnum'
 import { routerTurnByName } from '@/utils'

-function goLogin() {
-  routerTurnByName(PageEnum.BASE_LOGIN_NAME)
+function goHome() {
+  routerTurnByName(PageEnum.BASE_HOME_NAME)
 }
 </script>

--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -118,38 +118,45 @@
 import { reactive, ref, onMounted } from 'vue'
 import shuffle from 'lodash/shuffle'
 import { carouselInterval } from '@/settings/designSetting'
-import { useSystemStore } from '@/store/modules/systemStore/systemStore'
-import { SystemStoreUserInfoEnum, SystemStoreEnum } from '@/store/modules/systemStore/systemStore.d'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { GoThemeSelect } from '@/components/GoThemeSelect'
 import { GoLangSelect } from '@/components/GoLangSelect'
 import { LayoutHeader } from '@/layout/components/LayoutHeader'
 import { LayoutFooter } from '@/layout/components/LayoutFooter'
 import { PageEnum } from '@/enums/pageEnum'
-import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
-import { routerTurnByName } from '@/utils'
-import { loginApi } from '@/api/path'
+import { StorageEnum } from '@/enums/storageEnum'
+import { routerTurnByName, cryptoEncode, setLocalStorage } from '@/utils'
+const { GO_LOGIN_INFO_STORE } = StorageEnum
+
+const { PersonOutlineIcon, LockClosedOutlineIcon } = icon.ionicons5

 interface FormState {
  username: string
  password: string
 }

-const { GO_SYSTEM_STORE } = StorageEnum
-const { PersonOutlineIcon, LockClosedOutlineIcon } = icon.ionicons5
-
 const formRef = ref()
 const loading = ref(false)
 const autoLogin = ref(true)
 const show = ref(false)
 const showBg = ref(false)
-const systemStore = useSystemStore()
+const designStore = useDesignStore()

 const t = window['$t']

+onMounted(() => {
+  setTimeout(() => {
+    show.value = true
+  }, 300)
+  setTimeout(() => {
+    showBg.value = true
+  }, 100)
+})
+
 const formInline = reactive({
  username: 'admin',
-  password: 'admin',
+  password: '123456',
 })

 const rules = {
@@ -189,58 +196,38 @@ const getImageUrl = (name: string, folder: string) => {
  return new URL(`../../assets/images/${folder}/${name}.png`, import.meta.url).href
 }

-// 打乱图片顺序
+// 打乱
 const shuffleHandle = () => {
  shuffleTimiing.value = setInterval(() => {
    bgList.value = shuffle(bgList.value)
  }, carouselInterval)
 }

-// 登录
-const handleSubmit = async (e: Event) => {
+// 点击事件
+const handleSubmit = (e: Event) => {
  e.preventDefault()
  formRef.value.validate(async (errors: any) => {
    if (!errors) {
      const { username, password } = formInline
      loading.value = true
-      // 提交请求
-      const res = await loginApi({
-        username,
-        password
-      })
-      if(res && res.data) {
-        const { tokenValue, tokenName } = res.data.token
-        const { nickname, username, id } = res.data.userinfo
-
-        // 存储到 pinia 
-        systemStore.setItem(SystemStoreEnum.USER_INFO, {
-          [SystemStoreUserInfoEnum.USER_TOKEN]: tokenValue,
-          [SystemStoreUserInfoEnum.TOKEN_NAME]: tokenName,
-          [SystemStoreUserInfoEnum.USER_ID]: id,
-          [SystemStoreUserInfoEnum.USER_NAME]: username,
-          [SystemStoreUserInfoEnum.NICK_NAME]: nickname,
-          t
-        })
-        
-        window['$message'].success(t('login.login_success'))
-        routerTurnByName(PageEnum.BASE_HOME_NAME, true)
-      }
-      loading.value = false
+      setLocalStorage(
+        GO_LOGIN_INFO_STORE,
+        cryptoEncode(
+          JSON.stringify({
+            username,
+            password,
+          })
+        )
+      )
+      window['$message'].success(`${t('login.login_success')}!`)
+      routerTurnByName(PageEnum.BASE_HOME_NAME, true)
    } else {
-      window['$message'].error(t('login.login_message'))
+      window['$message'].error(`${t('login.login_message')}!`)
    }
  })
 }

 onMounted(() => {
-  setTimeout(() => {
-    show.value = true
-  }, 300)
-
-  setTimeout(() => {
-    showBg.value = true
-  }, 100)
-
  shuffleHandle()
 })
 </script>
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -2,7 +2,7 @@
  <div
    class="chart-item"
    v-for="(item, index) in localStorageInfo.componentList"
-    :class="animationsClass(item.styles.animations)"
+    :class="[animationsClass(item.styles.animations), !item.isGroup && 'hidden']"
    :key="item.id"
    :style="{
      ...getComponentAttrStyle(item.attr, index),
@@ -78,6 +78,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 .chart-item {
  position: absolute;
-  overflow: hidden;
+  &.hidden {
+    overflow: hidden;
+  }
 }
 </style>
--- a/src/views/preview/hooks/useComInstall.hook.ts
+++ b/src/views/preview/hooks/useComInstall.hook.ts
@@ -8,7 +8,7 @@ export const useComInstall = (localStorageInfo: ChartEditStorageType) => {

  // 注册组件(一开始无法获取window['$vue'])
  const intervalTiming = setInterval(() => {
-    if (window['$vue']?.component) {
+    if (window['$vue'].component) {
      clearInterval(intervalTiming)

      const intComponent = (target: CreateComponentType) => {
--- a/src/views/preview/hooks/useScale.hook.ts
+++ b/src/views/preview/hooks/useScale.hook.ts
@@ -4,7 +4,6 @@ import type { ChartEditStorageType } from '../index.d'
 import { PreviewScaleEnum } from '@/enums/styleEnum'

 export const useScale = (localStorageInfo: ChartEditStorageType) => {
-
  const entityRef = ref()
  const previewRef = ref()
  const width = ref(localStorageInfo.editCanvasConfig.width)
--- a/src/views/preview/index.d.ts
+++ b/src/views/preview/index.d.ts
@@ -1,6 +1,5 @@
 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'

 export interface ChartEditStorageType extends ChartEditStorage {
-  id: string,
-  isRelease?: boolean
+  id: string
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
奔跑的面条	fb93d35c91	build: 修改版本号到1.1.8	2023-01-08 20:05:31 +08:00
奔跑的面条	fc2b1fc42e	Merge branch 'dev'	2023-01-08 20:02:23 +08:00
奔跑的面条	d46a0b5134	build: 升级 pnpm 依赖说明文件	2023-01-08 19:23:02 +08:00
奔跑的面条	45cadcecc3	fix: 处理 model 报错	2023-01-08 19:20:44 +08:00
奔跑的面条	7b262c9db2	fix: 处理 i18n 报错和 props 报错	2023-01-08 19:10:41 +08:00
奔跑的面条	4e091c7f49	!121 修改胶囊柱图mock数据，解决胶囊主图labe不变化bug Merge pull request !121 from daidai/dev	2023-01-08 09:13:15 +00:00
刘嘉威	1310234803	fix: 修改胶囊柱图mock数据，解决胶囊主图labe不变化bug	2023-01-03 16:59:04 +08:00
奔跑的面条	8fd121a335	build: 修改版本号到1.1.7	2022-12-31 20:57:56 +08:00
奔跑的面条	d183c5815b	build: 修改版本号到1.1.12	2022-12-31 20:53:29 +08:00
奔跑的面条	661f56e773	build: 1.1.12	2022-12-31 20:53:02 +08:00
奔跑的面条	3c1b741c37	fix: 处理创建分组后，预览不显示的bug	2022-12-31 20:50:08 +08:00
奔跑的面条	36fdc22634	style: 格式化文件	2022-12-31 20:33:21 +08:00
奔跑的面条	5261a09381	!120 胶囊柱图展示数据不刷新 Merge pull request !120 from daidai/dev	2022-12-31 12:18:50 +00:00
刘嘉威	25864dc3b6	fix: 胶囊柱图预览时数据更新页面不更新bug	2022-12-26 17:37:29 +08:00
奔跑的面条	09c2ec06d4	fix: 补充丢失的flow文件	2022-12-22 19:43:24 +08:00
奔跑的面条	2378be571d	build: 限制node版本	2022-12-22 14:51:51 +08:00
奔跑的面条	59fd7ebceb	perf: 优化框选功能	2022-12-22 01:31:42 +08:00
奔跑的面条	e0d99a6b28	perf: 优化缩放时辅助线的渲染	2022-12-22 01:13:40 +08:00
奔跑的面条	e4514505c3	perf: 优化画布放大缩小的体验	2022-12-22 00:51:25 +08:00
奔跑的面条	f2c49b171e	perf: 优化画布缩放体验	2022-12-20 20:00:21 +08:00
奔跑的面条	de9e304dd4	perf: 优化加载进度条体验	2022-12-20 17:05:13 +08:00
奔跑的面条	1fb57ad1ff	feat: 新增加载提示	2022-12-20 16:54:04 +08:00
奔跑的面条	65127ced7f	perf: 新增快捷键说明	2022-12-20 15:16:25 +08:00
奔跑的面条	5b1458b22f	fix: 解决 deep 报错	2022-12-20 15:09:12 +08:00
奔跑的面条	6f74be7092	!116 fix: 修复画布无法滚动 Merge pull request !116 from jeo_young/dev	2022-12-18 08:36:36 +00:00
jeo young	1f9790e5f5	fix: 画布不能滚动	2022-12-18 10:24:49 +08:00
奔跑的面条	0b8ab9adfa	style: 修改错误单词	2022-12-18 00:00:41 +08:00
奔跑的面条	a17d7a4182	style: 优化代码格式	2022-12-17 22:25:19 +08:00
奔跑的面条	4ef77fcf25	!115 画布优化 Merge pull request !115 from MajorMayer/dev	2022-12-17 13:57:38 +00:00
jeo young	d204b459d9	fix: 去掉多余代码	2022-12-17 17:56:36 +08:00
jeo young	6ae6645d3c	fix: 画布scale始终保持居中 feat: 鼠标中键按住可拖拽画布	2022-12-17 17:53:53 +08:00
奔跑的面条	a925ced533	perf: 修改进度条的长度	2022-12-17 15:35:50 +08:00
jeo young	8dcccef54d	fix: 修复按住空格键时不允许框选	2022-12-17 01:33:27 +08:00
jeo young	dff639e901	feat: 按住鼠标中键可以拖拽画布	2022-12-17 01:32:03 +08:00
jeo young	0376703fd2	fix: 画布变化后始终居中	2022-12-17 00:56:42 +08:00
jeo young	7341ff11f3	fix: 空格热键导致ctrl 无法多选组件	2022-12-16 23:27:02 +08:00
奔跑的面条	57193beeab	fix: 处理标尺展示不全的问题	2022-12-16 22:47:55 +08:00
奔跑的面条	405e884e70	perf: 优化画布拖拽逻辑	2022-12-16 22:18:24 +08:00
奔跑的面条	0d4e83c940	build: 新增dom-helpers依赖	2022-12-16 19:36:14 +08:00
奔跑的面条	b8ed389f60	!110 画布优化 Merge pull request !110 from MajorMayer/dev	2022-12-16 11:34:53 +00:00
jeo young	b308275d99	fix: 画布优化	2022-12-16 19:08:34 +08:00
奔跑的面条	f9c715c72c	build: 升级版本到1.1.6	2022-12-16 14:01:47 +08:00
奔跑的面条	e2b3118d9d	Merge branch 'dev'	2022-12-16 13:57:02 +08:00
奔跑的面条	f4c3a2b04f	docs: 修改首页说明	2022-12-16 10:04:25 +08:00
奔跑的面条	31a8957de9	!106 docs: add Cloud IDE preview link Merge pull request !106 from aresn/master	2022-12-16 01:49:34 +00:00
奔跑的面条	46f20f61b5	update README.md. Signed-off-by: 奔跑的面条 <1262327911@qq.com>	2022-12-09 08:11:47 +00:00
aresn	dba5ab3ef3	update README.md. Signed-off-by: aresn <admin@aresn.com>	2022-12-07 09:51:33 +00:00
aresn	2251bebee6	add preview.yml. Signed-off-by: aresn <admin@aresn.com>	2022-12-07 09:49:48 +00:00
奔跑的面条	3ac9ffc73c	Merge branch 'dev'	2022-11-22 12:44:51 +08:00
奔跑的面条	c420ae467f	Merge branch 'dev'	2022-11-21 10:49:25 +08:00
奔跑的面条	8334fe5bcc	build: 升级版本到 1.1.5	2022-11-19 21:04:53 +08:00
奔跑的面条	f99edce6f4	Merge branch 'dev'	2022-11-19 21:04:32 +08:00
奔跑的面条	f47acca703	update README.md. Signed-off-by: 奔跑的面条 <1262327911@qq.com>	2022-11-10 10:13:19 +00:00
奔跑的面条	73a6c6b920	update README.md. Signed-off-by: 奔跑的面条 <1262327911@qq.com>	2022-11-10 10:10:58 +00:00
奔跑的面条	672f7a0a7c	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-11-05 21:46:26 +08:00
奔跑的面条	de78fb2149	docs: 新增文档截图	2022-11-05 18:19:33 +08:00
奔跑的面条	4a59e69bbe	docs: 修改首页地址	2022-11-02 19:46:19 +08:00
奔跑的面条	a442e13a7b	feat: 升级版本到1.1.4	2022-11-02 19:05:16 +08:00
奔跑的面条	4d093a4a80	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-11-02 19:02:38 +08:00
奔跑的面条	7e59d8d36c	docs: 修改链接地址	2022-11-02 09:57:28 +08:00
奔跑的面条	8241077495	update README.md. Signed-off-by: 奔跑的面条 <1262327911@qq.com>	2022-10-29 12:09:36 +00:00
奔跑的面条	82b29a2f8b	docs: 优化说明文档	2022-10-29 19:57:02 +08:00
奔跑的面条	b789d80f98	fix: 修改主页说明	2022-10-29 19:51:33 +08:00
奔跑的面条	a8c80e2366	docs: 修改主页说明	2022-10-29 19:50:30 +08:00
奔跑的面条	bdbdd37789	build: 升级版本到1.1.3	2022-10-15 17:17:34 +08:00
奔跑的面条	c8fb5b9152	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-10-15 17:12:13 +08:00
奔跑的面条	aef155e039	fix: 修复组件导入数据错乱的问题	2022-10-09 16:37:30 +08:00
奔跑的面条	443573455b	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-10-09 09:28:38 +08:00
奔跑的面条	d811ab7dfa	build: 撤回错误版本号	2022-10-08 21:12:58 +08:00
奔跑的面条	5f79ab6e6d	build: 升级版本到1.1.2	2022-10-08 21:12:27 +08:00
奔跑的面条	502edbca5d	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-10-08 21:05:48 +08:00
奔跑的面条	1a04267cb7	build: 升级版本到1.1.1	2022-10-08 20:59:55 +08:00
奔跑的面条	9c2c1bdfa1	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-10-08 20:59:25 +08:00
奔跑的面条	72e93f3768	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-09-27 20:16:07 +08:00
奔跑的面条	e6f2066d42	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-09-22 14:15:00 +08:00
奔跑的面条	2812c39524	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-09-21 19:54:29 +08:00
奔跑的面条	491485856e	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-09-19 20:46:37 +08:00
奔跑的面条	abde7e176d	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-09-19 20:13:50 +08:00
奔跑的面条	bab8faadee	add default pipeline template yaml	2022-09-19 11:58:32 +00:00
奔跑的面条	427d72fb8b	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-09-18 16:48:28 +08:00
奔跑的面条	dc5b20a329	build: 升级版本到1.1.0	2022-09-18 16:33:26 +08:00
奔跑的面条	4cb934eef3	Merge branch 'dev' of https://gitee.com/MTrun/go-view	2022-09-18 16:32:34 +08:00
奔跑的面条	35e8cea0b5	docs: 更新已完成图表说明	2022-09-17 23:00:51 +08:00