Pre Merge pull request !143 from NuroDante/dev

2025-10-14 06:22:10 +08:00 · 2023-03-19 13:50:23 +00:00 · 2023-03-19 13:50:23 +00:00 · 8c3627e5ab
commit 8c3627e5ab
parent 6c7847fecc 6a004c43ae
22 changed files with 390 additions and 83 deletions
--- a/README.md
+++ b/README.md
@ -1,30 +1,62 @@
-## 总览
+#### 总览
+<p align="center">
+    <img src="readme/logo-t-y.png" alt="go-view" />
+</p>

-![logo](readme/logo-t-y.png)
+<h4 align="center">开源、精美、便捷的「数据可视化」低代码开发平台</h4>

-GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。
+#### 长期赞助商
+<div>
+  <div align="center" style="column-gap: 20px;">
+    <a
+      href="http://www.ccflow.org/?from=goviewGitee"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/ccflow-banner.png" alt="go-view" style="width: 250px;" width="250px" />
+    </a>
+    <span> &nbsp;</span>
+    <a
+      href="https://www.qeasy.cloud/"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/qyy-banner.png" alt="go-view" style="width: 250px;" width="250px"/>
+    </a>
+  </div>
+</div>

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

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

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

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

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

-文档-在线地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
+Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](https://idegitee.com/dromara/go-view)

-文档-源码地址：[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc)
+#### 🤯 后端项目看这里!

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

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

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

-技术点：
+- 【.NET】[https://gitee.com/sun_xiang_yu/go-view-dotnet](https://gitee.com/sun_xiang_yu/go-view-dotnet)
+
+#### 整体介绍

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

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

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

+- 入选 NaiveUI 社区精选资源推荐：[查看 NaiveUI 推荐列表](https://www.naiveui.com/zh-CN/light/docs/community)
+
+说明文档：
+![说明文档](readme/go-view-doc.png)
+
 工作台：
-![项目截图](readme/go-view-canvas.png)
+![工作台](readme/go-view-canvas.png)

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

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

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

 主要技术栈为：

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

 已完成图表：

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

 ## 浏览器支持

@ -81,52 +133,7 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图

 ## 安装

-本项目采用` pnpm` 进行包管理
-
-```shell
-#建议使用 nrm 切换到淘宝源 https://registry.npmmirror.com/
-#pnpm
-pnpm install
-
-#yarn
-yarn install
-
-#npm
-npm install
-```
-
-## 启动
-
-```shell
-#pnpm
-pnpm dev
-
-# npm
-npm run dev
-
-#yarn
-yarn dev
-
-#Makefile
-make dev
-```
-
-## 编译
-
-```shell
-#pnpm
-pnpm run build
-
-# npm
-npm run build
-
-#yarn
-yarn run build
-
-#Makefile
-make dist
-
-```
+请查看文档：[https://www.mtruning.club/](https://www.mtruning.club/)

 ## 代码提交

@ -142,10 +149,9 @@ make dist
 - style: 不影响程序逻辑的代码修改
 - chore: 不属于以上类型的其他类型(日常事务)

-## 交流
+## 交流群

-QQ 群：1030129384
-
-![QQ群](readme/go-view-qq.png)
+QQ 群：663629294
+<img width="260px" src="readme/go-view-qq.png" alt="QQ群" style="border-radius: 20px" />

 ![渲染海报](readme/logo-poster.png)
--- a/package.json
+++ b/package.json
@ -1,8 +1,8 @@
 {
  "name": "go-view",
-  "version": "1.1.11",
+  "version": "1.2.3",
  "engines": {
-    "node": ">=16.14 <18.0.0"
+    "node": ">=12.0"
  },
  "scripts": {
    "dev": "vite --host",
--- 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-echarts-color.png
+++ b/readme/go-view-echarts-color.png
--- a/readme/go-view-event.png
+++ b/readme/go-view-event.png
--- a/readme/go-view-indexpage.png
+++ b/readme/go-view-indexpage.png
--- a/readme/go-view-qq.png
+++ b/readme/go-view-qq.png
--- a/readme/go-view-theme.png
+++ b/readme/go-view-theme.png
--- a/readme/sponsors/ccflow-banner.png
+++ b/readme/sponsors/ccflow-banner.png
--- a/readme/sponsors/qyy-banner.png
+++ b/readme/sponsors/qyy-banner.png
--- a/src/layout/components/LayoutMain/index.vue
+++ b/src/layout/components/LayoutMain/index.vue
@ -2,12 +2,12 @@
  <router-view>
    <template #default="{ Component, route }">
      <component
-        v-if="route.noKeepAlive"
+        v-if="route.meta.noKeepAlive"
        :is="Component"
        :key="route.fullPath"
      ></component>
      <keep-alive v-else>
-        <component :is="Component" :key="route.fullPath"></component>
+        <component :is="Component" :key="route.meta?.key"></component>
      </keep-alive>
    </template>
  </router-view>
--- a/src/packages/components/Informations/Mores/Carousel/config.ts
+++ b/src/packages/components/Informations/Mores/Carousel/config.ts
@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { CarouselConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import logo from '@/assets/logo.png'
+
+// 示例图片资源
+const modules = import.meta.globEager("./images/*");
+const dataset = [logo]
+for (var item in modules) {
+  dataset.push(modules[item].default)
+}
+
+export const option = {
+  // 图片资源列表
+  dataset: dataset,
+  // 自动播放
+  autoplay: true,
+  // 自动播放的间隔（ms）
+  interval: 5000,
+  // 每页显示的图片数量
+  slidesPerview: 1,
+  // 轮播方向
+  direction: "horizontal",
+  // 拖曳切换
+  draggable: true,
+  // 居中显示
+  centeredSlides: false,
+  // 过渡效果
+  effect: "slide",
+  // 是否显示指示点
+  showDots: true,
+  // 指示器样式
+  dotType: "dot",
+  // 指示器位置
+  dotPlacement: "bottom",
+  // 显示箭头
+  showArrow: false,
+  // 图片样式
+  fit: "contain",
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CarouselConfig.key
+  public chartConfig = cloneDeep(CarouselConfig)
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Informations/Mores/Carousel/config.vue
+++ b/src/packages/components/Informations/Mores/Carousel/config.vue
@ -0,0 +1,176 @@
+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="路径" :alone="true">
+      <setting-item v-for="item, index in optionData.dataset" :key="index">
+        <n-input-group>
+          <n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
+          <n-button ghost @click="optionData.dataset.splice(index, 1)">
+            -
+          </n-button>
+        </n-input-group>
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.dataset.push('')">
+          +
+        </n-button>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="播放器">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.autoplay" size="small" />
+          <n-text>自动播放</n-text>
+        </n-space>
+      </setting-item>
+      <!-- 开启自动播放时，设置间隔时间 -->
+      <setting-item name="间隔时间">
+        <n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
+      </setting-item>
+      <setting-item name="轮播方向">
+        <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
+      </setting-item>
+      <setting-item name="过渡效果">
+        <n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
+      </setting-item>
+      <setting-item name="每页数量">
+        <n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.centeredSlides" size="small" />
+          <n-text>居中显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="图片样式">
+        <n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="指示器">
+      <setting-item name="样式">
+        <n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
+      </setting-item>
+      <setting-item name="位置">
+        <n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showDots" size="small" />
+          <n-text>显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showArrow" size="small" />
+          <n-text>箭头</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.draggable" size="small" />
+          <n-text>拖曳切换</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+// 字典
+const dotTypes = [
+  {
+    label: "点",
+    value: "dot"
+  },
+  {
+    label: "线",
+    value: "line"
+  }
+]
+const directions = [
+  {
+    label: "水平方向",
+    value: "horizontal"
+  },
+  {
+    label: "垂直方向",
+    value: "vertical"
+  }
+]
+const effects = [
+  {
+    label: "slide",
+    value: "slide"
+  },
+  {
+    label: "fade",
+    value: "fade"
+  },
+  {
+    label: "card",
+    value: "card"
+  },
+  {
+    label: "custom",
+    value: "custom"
+  }
+]
+const dotPlacements = [
+  {
+    label: "上边",
+    value: "top"
+  },
+  {
+    label: "下边",
+    value: "bottom"
+  },
+  {
+    label: "左边",
+    value: "left"
+  },
+  {
+    label: "右边",
+    value: "right"
+  }
+]
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  },
+]
+</script>
--- a/src/packages/components/Informations/Mores/Carousel/images/carousel.png
+++ b/src/packages/components/Informations/Mores/Carousel/images/carousel.png
--- a/src/packages/components/Informations/Mores/Carousel/images/carousel2.png
+++ b/src/packages/components/Informations/Mores/Carousel/images/carousel2.png
--- a/src/packages/components/Informations/Mores/Carousel/index.ts
+++ b/src/packages/components/Informations/Mores/Carousel/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const CarouselConfig: ConfigType = {
+  key: 'Carousel',
+  chartKey: 'VCarousel',
+  conKey: 'VCCarousel',
+  title: '轮播图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'photo.png'
+}
--- a/src/packages/components/Informations/Mores/Carousel/index.vue
+++ b/src/packages/components/Informations/Mores/Carousel/index.vue
@ -0,0 +1,47 @@
+<template>
+  <div>
+    <n-carousel :autoplay="autoplay" :interval="interval" :centered-slides="centeredSlides" :direction="direction"
+      :dot-placement="dotPlacement" :dot-type="dotType" :draggable="draggable" :effect="effect"
+      :slides-per-view="slidesPerview" :show-arrow="showArrow" :show-dots="showDots">
+      <n-image v-for="url in option.dataset" :object-fit="fit" preview-disabled :src="url"
+        :fallback-src="requireErrorImg()" :width="w" :height="h"></n-image>
+    </n-carousel>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { autoplay, interval, slidesPerview, direction, draggable, centeredSlides, effect, dotType, dotPlacement, showArrow, showDots, fit } = toRefs(props.chartConfig.option)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>
--- a/src/packages/components/Informations/Mores/index.ts
+++ b/src/packages/components/Informations/Mores/index.ts
@ -3,5 +3,6 @@ import { ImageCarouselConfig } from './ImageCarousel/index'
 import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
+import { CarouselConfig } from './Carousel/index'

 export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]
--- a/src/router/modules/project.router.ts
+++ b/src/router/modules/project.router.ts
@ -46,4 +46,11 @@ const projectRoutes: RouteRecordRaw = {
  ]
 }

+projectRoutes.children?.forEach(child => {
+  child.meta = {
+    ...child.meta,
+    key: 'reuse-project'
+  }
+})
+
 export default projectRoutes
--- a/src/views/chart/ContentHeader/headerRightBtn/index.vue
+++ b/src/views/chart/ContentHeader/headerRightBtn/index.vue
@ -58,7 +58,7 @@ const previewHandle = () => {
 // 发布
 const sendHandle = () => {
  goDialog({
-    message: '想体验发布功能，请前往 master-fetch 分支查看: https://gitee.com/MTrun/go-view/tree/master-fetch',
+    message: '想体验发布功能，请前往 master-fetch 分支查看: https://demo.mtruning.club/#/login',
    positiveText: '了然',
    closeNegativeText: true,
    onPositiveCallback: () => {}
--- a/src/views/project/layout/components/ProjectLayoutSider/index.vue
+++ b/src/views/project/layout/components/ProjectLayoutSider/index.vue
@ -45,8 +45,7 @@ const collapsed = ref<boolean>(false)
 const { getAsideCollapsedWidth } = toRefs(useSettingStore())

 const route = useRoute()
-const routeRame = computed(() => route.name)
-const menuValue = ref(routeRame)
+const menuValue = computed(() => route.name)

 const menuOptions = menuOptionsInit()