mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改闭合组件不规范的问题

Browse Source
This commit is contained in:
MTrun 2022-03-14 16:07:35 +08:00
parent db0641c937
commit b60843d3ed
77 changed files with 395 additions and 332 deletions
src
App.vue
components
AppProvider
AppProvider.vue
ChartItemSetting
CollapseItem.vueGlobalSetting.vuePositionSetting.vueSettingItem.vueSettingItemBox.vueSizeSetting.vueStylesSetting.vue
Doc
index.vue
LangSelect
index.vue
LoadingComponent
Skeleton.vueindex.tsindex.vue
MacOsControlBtn
index.vue
Skeleton
index.tsindex.vue
SystemSet
index.vue
ThemeColorSelect
components
ColorList.vue
index.vue
ThemeSelect
index.vue
UserInfo
index.vue
layout
components
Footer
index.ts
GoFooter
index.tsindex.vue
GoHeader
index.tsindex.vue
Header
index.ts
HeaderPro
index.vue
Main
index.vue
TransitionMain
index.vue
index.vueparentLayout.vue
packages/components/Charts
Bars
BarCommon
config.vueindex.vue
BarCrossrange
config.vueindex.vue
Lines
LineCommon
config.vueindex.vue
LineGradientSingle
index.vue
LineGradients
index.vue
Pies/PieCommon
index.vue
plugins
customComponents.ts
views
chart
ContentBox
index.vue
ContentCharts
components/OptionContent
index.vue
index.vue
ContentConfigurations
components
CanvasPage
components/ChartThemeColor
index.vue
index.vue
ChartSetting
index.vue
index.vue
ContentEdit
components
EditAlignLine
index.vue
EditBottom
index.vue
EditHistory
index.vue
EditRange
index.vue
EditShapeBox
index.vue
index.vue
ContentLayers
components/ListItem
index.vue
index.vue
HeaderLeftBtn
index.vue
HeaderTitle
index.vue
index.vue
login
index.vue
preview
components/RenderList
index.vue
index.vue
project
index.vue
items
components
Card
index.vue
List
index.vue
ModalCard
index.vue
index.vue
layout/components
AsideFooter
index.vue
Create
components/CreateModal
index.vue
index.vue
Header
index.tsindex.vue
Sider
index.vue
mtTemplate
index.vue
templateMarket
index.vue

8
src/App.vue

@ -5,10 +5,10 @@
:date-locale="dateZhCN" :date-locale="dateZhCN"
:theme-overrides="getThemeOverrides" :theme-overrides="getThemeOverrides"
> >
<AppProvider> <app-provider>
<I18n /> <i18n></i18n>
<router-view /> <router-view></router-view>
</AppProvider> </app-provider>
</n-config-provider> </n-config-provider>
</template> </template>

6
src/components/AppProvider/AppProvider.vue

@ -1,11 +1,11 @@
<template> <template>
<n-loading-bar-provider> <n-loading-bar-provider>
<n-dialog-provider> <n-dialog-provider>
<DialogContent /> <dialog-content></dialog-content>
<LoadingContent /> <loading-content></loading-content>
<n-notification-provider> <n-notification-provider>
<n-message-provider> <n-message-provider>
<MessageContent /> <message-content></message-content>
<slot></slot> <slot></slot>
</n-message-provider> </n-message-provider>
</n-notification-provider> </n-notification-provider>

6
src/components/ChartItemSetting/CollapseItem.vue

@ -1,15 +1,15 @@
<template> <template>
<n-divider style="margin: 10px 0;" /> <n-divider style="margin: 10px 0;"></n-divider>
<n-collapse arrow-placement="right" :default-expanded-names="expanded ? name : null" accordion> <n-collapse arrow-placement="right" :default-expanded-names="expanded ? name : null" accordion>
<!-- 右侧 --> <!-- 右侧 -->
<template #header-extra> <template #header-extra>
<div @click="click"> <div @click="click">
<slot name="header" /> <slot name="header"></slot>
</div> </div>
</template> </template>
<n-collapse-item :title="name" :name="name"> <n-collapse-item :title="name" :name="name">
<slot /> <slot></slot>
</n-collapse-item> </n-collapse-item>
</n-collapse> </n-collapse>
</template> </template>

319
src/components/ChartItemSetting/GlobalSetting.vue

@ -1,237 +1,286 @@
<template> <template>
<CollapseItem v-if="title" name="标题"> <collapse-item v-if="title" name="标题">
<template #header> <template #header>
<n-switch v-show="inChart" v-model:value="title.show" size="small" /> <n-switch
v-show="inChart"
v-model:value="title.show"
size="small"
></n-switch>
</template> </template>
<SettingItemBox name="标题"> <setting-item-box name="标题">
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker v-model:value="title.textStyle.color" size="small" /> <n-color-picker
</SettingItem> v-model:value="title.textStyle.color"
<SettingItem name="大小"> size="small"
></n-color-picker>
</setting-item>
<setting-item name="大小">
<n-input-number <n-input-number
v-model:value="title.textStyle.fontSize" v-model:value="title.textStyle.fontSize"
:min="1" :min="1"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
<SettingItemBox name="副标题"> <setting-item-box name="副标题">
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker size="small" v-model:value="title.subtextStyle.color" /> <n-color-picker
</SettingItem> size="small"
<SettingItem name="大小"> v-model:value="title.subtextStyle.color"
></n-color-picker>
</setting-item>
<setting-item name="大小">
<n-input-number <n-input-number
v-model:value="title.subtextStyle.fontSize" v-model:value="title.subtextStyle.fontSize"
:min="1" :min="1"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
</CollapseItem> </collapse-item>
<CollapseItem v-if="xAxis" name="X轴"> <collapse-item v-if="xAxis" name="X轴">
<template #header> <template #header>
<n-switch v-show="inChart" v-model:value="xAxis.show" size="small" /> <n-switch
v-show="inChart"
v-model:value="xAxis.show"
size="small"
></n-switch>
</template> </template>
<SettingItemBox name="名称"> <setting-item-box name="名称">
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker <n-color-picker
size="small" size="small"
v-model:value="xAxis.nameTextStyle.color" v-model:value="xAxis.nameTextStyle.color"
/> ></n-color-picker>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
<SettingItemBox name="标签"> <setting-item-box name="标签">
<SettingItem v-show="inChart" name="展示"> <setting-item v-show="inChart" name="展示">
<n-space> <n-space>
<n-switch v-model:value="xAxis.axisLabel.show" size="small" /> <n-switch
v-model:value="xAxis.axisLabel.show"
size="small"
></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker size="small" v-model:value="xAxis.axisLabel.color" /> <n-color-picker
</SettingItem> size="small"
</SettingItemBox> v-model:value="xAxis.axisLabel.color"
<SettingItemBox name="轴线"> ></n-color-picker>
<SettingItem name="颜色"> </setting-item>
</setting-item-box>
<setting-item-box name="轴线">
<setting-item name="颜色">
<n-color-picker <n-color-picker
v-model:value="xAxis.axisLine.lineStyle.color" v-model:value="xAxis.axisLine.lineStyle.color"
size="small" size="small"
/> ></n-color-picker>
</SettingItem> </setting-item>
<SettingItem name="粗细"> <setting-item name="粗细">
<n-input-number <n-input-number
v-model:value="xAxis.axisLine.lineStyle.width" v-model:value="xAxis.axisLine.lineStyle.width"
:min="1" :min="1"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </setting-item>
<SettingItem name="对齐零"> <setting-item name="对齐零">
<n-space> <n-space>
<n-switch v-model:value="xAxis.axisLine.onZero" size="small" /> <n-switch
v-model:value="xAxis.axisLine.onZero"
size="small"
></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
<SettingItemBox name="刻度"> <setting-item-box name="刻度">
<SettingItem v-show="inChart" name="展示"> <setting-item v-show="inChart" name="展示">
<n-space> <n-space>
<n-switch v-model:value="xAxis.axisTick.show" size="small" /> <n-switch v-model:value="xAxis.axisTick.show" size="small"></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
<SettingItem name="长度"> <setting-item name="长度">
<n-input-number <n-input-number
v-model:value="xAxis.axisTick.length" v-model:value="xAxis.axisTick.length"
:min="1" :min="1"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
<SettingItemBox name="分割线"> <setting-item-box name="分割线">
<SettingItem v-show="inChart" name="展示"> <setting-item v-show="inChart" name="展示">
<n-space> <n-space>
<n-switch v-model:value="xAxis.splitLine.show" size="small" /> <n-switch
v-model:value="xAxis.splitLine.show"
size="small"
></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker <n-color-picker
v-model:value="xAxis.splitLine.lineStyle.color" v-model:value="xAxis.splitLine.lineStyle.color"
size="small" size="small"
/> ></n-color-picker>
</SettingItem> </setting-item>
<SettingItem name="粗细"> <setting-item name="粗细">
<n-input-number <n-input-number
v-model:value="xAxis.splitLine.lineStyle.width" v-model:value="xAxis.splitLine.lineStyle.width"
:min="1" :min="1"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </setting-item>
<SettingItem name="类型"> <setting-item name="类型">
<n-select <n-select
v-model:value="xAxis.splitLine.lineStyle.type" v-model:value="xAxis.splitLine.lineStyle.type"
size="small" size="small"
:options="axisConf.splitLint.lineStyle.type" :options="axisConf.splitLint.lineStyle.type"
/> ></n-select>
</SettingItem> </setting-item>
<SettingItem name="位置"> <setting-item name="位置">
<n-select <n-select
v-model:value="xAxis.position" v-model:value="xAxis.position"
size="small" size="small"
:options="axisConf.xposition" :options="axisConf.xposition"
/> ></n-select>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
</CollapseItem> </collapse-item>
<CollapseItem v-if="yAxis" name="Y轴"> <collapse-item v-if="yAxis" name="Y轴">
<template #header> <template #header>
<n-switch v-show="inChart" v-model:value="yAxis.show" size="small" /> <n-switch
v-show="inChart"
v-model:value="yAxis.show"
size="small"
></n-switch>
</template> </template>
<SettingItemBox name="名称"> <setting-item-box name="名称">
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker <n-color-picker
size="small" size="small"
v-model:value="yAxis.nameTextStyle.color" v-model:value="yAxis.nameTextStyle.color"
/> ></n-color-picker>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
<SettingItemBox name="标签"> <setting-item-box name="标签">
<SettingItem v-show="inChart" name="展示"> <setting-item v-show="inChart" name="展示">
<n-space> <n-space>
<n-switch v-model:value="yAxis.axisLabel.show" size="small" /> <n-switch
v-model:value="yAxis.axisLabel.show"
size="small"
></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker size="small" v-model:value="yAxis.axisLabel.color" /> <n-color-picker
</SettingItem> size="small"
</SettingItemBox> v-model:value="yAxis.axisLabel.color"
<SettingItemBox name="轴线"> ></n-color-picker>
<SettingItem v-show="inChart" name="展示"> </setting-item>
</setting-item-box>
<setting-item-box name="轴线">
<setting-item v-show="inChart" name="展示">
<n-space> <n-space>
<n-switch v-model:value="yAxis.axisLine.show" size="small" /> <n-switch v-model:value="yAxis.axisLine.show" size="small"></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker <n-color-picker
v-model:value="yAxis.axisLine.lineStyle.color" v-model:value="yAxis.axisLine.lineStyle.color"
size="small" size="small"
/> ></n-color-picker>
</SettingItem> </setting-item>
<SettingItem name="粗细"> <setting-item name="粗细">
<n-input-number <n-input-number
v-model:value="yAxis.axisLine.lineStyle.width" v-model:value="yAxis.axisLine.lineStyle.width"
:min="1" :min="1"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </setting-item>
<SettingItem name="对齐零"> <setting-item name="对齐零">
<n-space> <n-space>
<n-switch v-model:value="yAxis.axisLine.onZero" size="small" /> <n-switch
v-model:value="yAxis.axisLine.onZero"
size="small"
></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
<SettingItemBox name="刻度"> <setting-item-box name="刻度">
<SettingItem v-show="inChart" name="展示"> <setting-item v-show="inChart" name="展示">
<n-space> <n-space>
<n-switch v-model:value="yAxis.axisTick.show" size="small" /> <n-switch v-model:value="yAxis.axisTick.show" size="small"></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
<SettingItem name="长度"> <setting-item name="长度">
<n-input-number <n-input-number
v-model:value="yAxis.axisTick.length" v-model:value="yAxis.axisTick.length"
:min="1" :min="1"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
<SettingItemBox name="分割线"> <setting-item-box name="分割线">
<SettingItem v-show="inChart" name="展示"> <setting-item v-show="inChart" name="展示">
<n-space> <n-space>
<n-switch v-model:value="yAxis.splitLine.show" size="small" /> <n-switch
v-model:value="yAxis.splitLine.show"
size="small"
></n-switch>
</n-space> </n-space>
</SettingItem> </setting-item>
<SettingItem name="颜色"> <setting-item name="颜色">
<n-color-picker <n-color-picker
v-model:value="yAxis.splitLine.lineStyle.color" v-model:value="yAxis.splitLine.lineStyle.color"
size="small" size="small"
/> ></n-color-picker>
</SettingItem> </setting-item>
<SettingItem name="粗细"> <setting-item name="粗细">
<n-input-number <n-input-number
v-model:value="yAxis.splitLine.lineStyle.width" v-model:value="yAxis.splitLine.lineStyle.width"
:min="1" :min="1"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </setting-item>
<SettingItem name="类型"> <setting-item name="类型">
<n-select <n-select
v-model:value="yAxis.splitLine.lineStyle.type" v-model:value="yAxis.splitLine.lineStyle.type"
size="small" size="small"
:options="axisConf.splitLint.lineStyle.type" :options="axisConf.splitLint.lineStyle.type"
/> ></n-select>
</SettingItem> </setting-item>
<SettingItem name="位置"> <setting-item name="位置">
<n-select <n-select
v-model:value="yAxis.position" v-model:value="yAxis.position"
size="small" size="small"
:options="axisConf.yposition" :options="axisConf.yposition"
/> ></n-select>
</SettingItem> </setting-item>
</SettingItemBox> </setting-item-box>
</CollapseItem> </collapse-item>
<CollapseItem v-if="legend" name="图例"> <collapse-item v-if="legend" name="图例">
<template #header> <template #header>
<n-switch v-show="inChart" v-model:value="legend.show" size="small" /> <n-switch
v-show="inChart"
v-model:value="legend.show"
size="small"
></n-switch>
</template> </template>
<SettingItemBox name="图例文字"> <setting-item-box name="图例文字">
<SettingItem> <setting-item>
<n-color-picker size="small" v-model:value="legend.textStyle.color" /> <n-color-picker
</SettingItem> size="small"
</SettingItemBox> v-model:value="legend.textStyle.color"
</CollapseItem> ></n-color-picker>
</setting-item>
</setting-item-box>
</collapse-item>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { toRefs, PropType, watchEffect, computed } from 'vue' import { PropType, computed } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index' import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { axisConf } from '@/packages/chartConfiguration/echarts/index' import { axisConf } from '@/packages/chartConfiguration/echarts/index'
import { import {

9
src/components/ChartItemSetting/PositionSetting.vue

@ -1,5 +1,5 @@
<template> <template>
<n-divider style="margin: 10px 0;" /> <n-divider style="margin: 10px 0;" ></n-divider>
<n-space :size="8" justify="space-between" style="margin-top: 10px;"> <n-space :size="8" justify="space-between" style="margin-top: 10px;">
<n-button <n-button
secondary secondary
@ -8,12 +8,11 @@
@click="positonHandle(item.key)" @click="positonHandle(item.key)"
> >
<template #icon> <template #icon>
<component :is="item.icon" /> <component :is="item.icon" ></component>
</template> </template>
</n-button> </n-button>
</n-space> </n-space>
<!-- </SettingItemBox> --> <setting-item-box name="边距">
<SettingItemBox name="边距">
<n-input-number <n-input-number
v-model:value="chartAttr.y" v-model:value="chartAttr.y"
:min="0" :min="0"
@ -34,7 +33,7 @@
<n-text depth="3">左</n-text> <n-text depth="3">左</n-text>
</template> </template>
</n-input-number> </n-input-number>
</SettingItemBox> </setting-item-box>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/components/ChartItemSetting/SettingItem.vue

@ -1,6 +1,6 @@
<template> <template>
<div class="go-setting-item" :style="{ width: width + 'px' }"> <div class="go-setting-item" :style="{ width: width + 'px' }">
<slot /> <slot ></slot>
<n-text class="name" depth="3">{{ name }}</n-text> <n-text class="name" depth="3">{{ name }}</n-text>
</div> </div>
</template> </template>

2
src/components/ChartItemSetting/SettingItemBox.vue

@ -4,7 +4,7 @@
<div class="item-right" justify="space-between" :style="{ <div class="item-right" justify="space-between" :style="{
gridTemplateColumns: alone? '1fr': '1fr 1fr' gridTemplateColumns: alone? '1fr': '1fr 1fr'
}"> }">
<slot /> <slot></slot>
</div> </div>
</div> </div>
</template> </template>

4
src/components/ChartItemSetting/SizeSetting.vue

@ -1,5 +1,5 @@
<template> <template>
<SettingItemBox name="尺寸"> <setting-item-box name="尺寸">
<n-input-number <n-input-number
v-model:value="chartAttr.w" v-model:value="chartAttr.w"
:min="50" :min="50"
@ -20,7 +20,7 @@
<n-text depth="3">高度</n-text> <n-text depth="3">高度</n-text>
</template> </template>
</n-input-number> </n-input-number>
</SettingItemBox> </setting-item-box>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

10
src/components/ChartItemSetting/StylesSetting.vue

@ -1,15 +1,15 @@
<template> <template>
<CollapseItem name="通用样式"> <collapse-item name="通用样式">
<SettingItemBox name="透明度" :alone="true"> <setting-item-box name="透明度" :alone="true">
<!-- 透明度 --> <!-- 透明度 -->
<n-slider <n-slider
v-model:value="chartStyles.opacity" v-model:value="chartStyles.opacity"
:step="0.1" :step="0.1"
:min="0" :min="0"
:max="1" :max="1"
/> ></n-slider>
</SettingItemBox> </setting-item-box>
</CollapseItem> </collapse-item>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/components/Doc/index.vue

@ -1,7 +1,7 @@
<template> <template>
<n-button quaternary @click="handleClick" title="说明文档"> <n-button quaternary @click="handleClick" title="说明文档">
<n-icon size="20" :depth="1"> <n-icon size="20" :depth="1">
<DocumentTextIcon /> <document-text-icon></document-text-icon>
</n-icon> </n-icon>
</n-button> </n-button>
</template> </template>

2
src/components/LangSelect/index.vue

@ -7,7 +7,7 @@
> >
<n-button quaternary> <n-button quaternary>
<n-icon size="20" :depth="1"> <n-icon size="20" :depth="1">
<LanguageIcon /> <language-icon></language-icon>
</n-icon> </n-icon>
</n-button> </n-button>
</n-dropdown> </n-dropdown>

2
src/components/LoadingComponent/Skeleton.vue

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<!-- 骨架图 --> <!-- 骨架图 -->
<Skeleton :repeat="3" :show="true"/> <go-skeleton :repeat="3" :show="true"></go-skeleton>
</div> </div>
</template> </template>

2
src/components/LoadingComponent/index.ts

@ -1,7 +1,7 @@
import type { App } from 'vue' import type { App } from 'vue'
import LoadingComponent from './index.vue' import LoadingComponent from './index.vue'
import AsyncLoading from './index.vue' import AsyncLoading from './index.vue'
import AsyncSkeletonLoading from './Skeleton.vue' import AsyncSkeletonLoading from './GoSkeleton.vue'
// 正常组件 // 正常组件
export { LoadingComponent } export { LoadingComponent }

2
src/components/LoadingComponent/index.vue

@ -1,7 +1,7 @@
<template> <template>
<!-- svg加载图 --> <!-- svg加载图 -->
<div class="go-loading-svg go-flex-center"> <div class="go-loading-svg go-flex-center">
<img src="~@/assets/images/tips/loadingSvg.svg" alt="" /> <img src="~@/assets/images/tips/loadingSvg.svg" alt=""></div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

2
src/components/MacOsControlBtn/index.vue

@ -7,7 +7,7 @@
@click.stop="handleClick(item.key)" @click.stop="handleClick(item.key)"
> >
<n-icon size="10" class="icon-base" :class="{ hover: !disabled }"> <n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
<component :is="item.icon" /> <component :is="item.icon"></component>
</n-icon> </n-icon>
</div> </div>
</template> </template>

4
src/components/Skeleton/index.ts

@ -1,3 +1,3 @@
import Skeleton from './index.vue'; import GoSkeleton from './index.vue';
export { Skeleton }; export { GoSkeleton };

12
src/components/Skeleton/index.vue

@ -1,16 +1,16 @@
<template> <template>
<div v-show="load"> <div v-show="load">
<div v-show="repeat == 1"> <div v-show="repeat == 1">
<n-skeleton v-bind="$attrs" /> <n-skeleton v-bind="$attrs"></n-skeleton>
</div> </div>
<div v-show="repeat == 2"> <div v-show="repeat == 2">
<n-skeleton v-bind="$attrs" /> <n-skeleton v-bind="$attrs"></n-skeleton>
<n-skeleton v-bind="$attrs" style="width: 60%;" /> <n-skeleton v-bind="$attrs" style="width: 60%;"></n-skeleton>
</div> </div>
<div v-show="repeat > 2"> <div v-show="repeat > 2">
<n-skeleton v-bind="$attrs" :repeat="repeat - 2" /> <n-skeleton v-bind="$attrs" :repeat="repeat - 2"></n-skeleton>
<n-skeleton v-bind="$attrs" style="width: 60%;" /> <n-skeleton v-bind="$attrs" style="width: 60%;"></n-skeleton>
<n-skeleton v-bind="$attrs" style="width: 50%;" /> <n-skeleton v-bind="$attrs" style="width: 50%;"></n-skeleton>
</div> </div>
</div> </div>
</template> </template>

8
src/components/SystemSet/index.vue

@ -5,7 +5,7 @@
<n-space justify="space-between"> <n-space justify="space-between">
<n-h3 class="go-mb-0">系统设置</n-h3> <n-h3 class="go-mb-0">系统设置</n-h3>
<n-icon size="20" class="go-cursor-pointer" @click="closeHandle"> <n-icon size="20" class="go-cursor-pointer" @click="closeHandle">
<CloseIcon /> <close-icon></close-icon>
</n-icon> </n-icon>
</n-space> </n-space>
</template> </template>
@ -19,7 +19,7 @@
v-model:value="item.value" v-model:value="item.value"
size="small" size="small"
@update:value="handleChange($event, item)" @update:value="handleChange($event, item)"
/> ></n-switch>
</template> </template>
<template v-else-if="item.type === 'number'"> <template v-else-if="item.type === 'number'">
<n-input-number <n-input-number
@ -30,7 +30,7 @@
:suffix="item.suffix || null" :suffix="item.suffix || null"
:min="item.min || 0" :min="item.min || 0"
@update:value="handleChange($event, item)" @update:value="handleChange($event, item)"
/> ></n-input-number>
</template> </template>
</n-space> </n-space>
<n-space> <n-space>
@ -38,7 +38,7 @@
<n-tooltip v-if="item.tip" trigger="hover"> <n-tooltip v-if="item.tip" trigger="hover">
<template #trigger> <template #trigger>
<n-icon size="21"> <n-icon size="21">
<HelpOutlineIcon /> <help-outline-icon></help-outline-icon>
</n-icon> </n-icon>
</template> </template>
<span>{{ item.tip }}</span> <span>{{ item.tip }}</span>

10
src/components/ThemeColorSelect/components/ColorList.vue

@ -8,7 +8,7 @@
@click="colorSelectHandle(item)" @click="colorSelectHandle(item)"
> >
<n-space> <n-space>
<div class="content-left-item-color" :style="{ backgroundColor: item.hex }" /> <div class="content-left-item-color" :style="{ backgroundColor: item.hex }"></div>
<n-space vertical> <n-space vertical>
<n-space> <n-space>
<span :style="{ color: item.hex }">{{ item.name }}</span> <span :style="{ color: item.hex }">{{ item.name }}</span>
@ -16,7 +16,7 @@
</n-space> </n-space>
<n-text> <n-text>
{{ item.hex }} {{ item.hex }}
<n-divider vertical /> <n-divider vertical></n-divider>
{{ {{
`rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})` `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
}} }}
@ -24,7 +24,7 @@
</n-space> </n-space>
</n-space> </n-space>
</div> </div>
<n-divider /> <n-divider></n-divider>
<div <div
class="content-left-item go-transition-quick" class="content-left-item go-transition-quick"
span="12 1000:6 1400:4 1800:4 2200:2" span="12 1000:6 1400:4 1800:4 2200:2"
@ -33,7 +33,7 @@
@click="colorSelectHandle(item)" @click="colorSelectHandle(item)"
> >
<n-space> <n-space>
<div class="content-left-item-color" :style="{ backgroundColor: item.hex }" /> <div class="content-left-item-color" :style="{ backgroundColor: item.hex }"></div>
<n-space vertical> <n-space vertical>
<n-space> <n-space>
<span :style="{ color: item.hex }">{{ item.name }}</span> <span :style="{ color: item.hex }">{{ item.name }}</span>
@ -41,7 +41,7 @@
</n-space> </n-space>
<n-text> <n-text>
{{ item.hex }} {{ item.hex }}
<n-divider vertical /> <n-divider vertical></n-divider>
{{ {{
`rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})` `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
}} }}

10
src/components/ThemeColorSelect/index.vue

@ -1,7 +1,7 @@
<template> <template>
<n-button quaternary @click="modelShow = true" title="颜色"> <n-button quaternary @click="modelShow = true" title="颜色">
<n-icon size="20" :depth="1"> <n-icon size="20" :depth="1">
<ColorWandIcon /> <ColorWandIcon></ColorWandIcon>
</n-icon> </n-icon>
</n-button> </n-button>
<n-modal v-model:show="modelShow"> <n-modal v-model:show="modelShow">
@ -9,13 +9,13 @@
<n-space justify="space-between"> <n-space justify="space-between">
<n-h3 class="title">主题颜色选择</n-h3> <n-h3 class="title">主题颜色选择</n-h3>
<n-icon size="20" class="go-cursor-pointer" @click="modelShow = false"> <n-icon size="20" class="go-cursor-pointer" @click="modelShow = false">
<CloseIcon /> <CloseIcon></CloseIcon>
</n-icon> </n-icon>
</n-space> </n-space>
<n-divider /> <n-divider></n-divider>
<div class="model-content" ref="contentLeftRef"> <div class="model-content" ref="contentLeftRef">
<div class="content-left" v-if="modelShow"> <div class="content-left" v-if="modelShow">
<ColorList :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle" /> <ColorList :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle"></ColorList>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="color-name-detail"> <div class="color-name-detail">
@ -29,7 +29,7 @@
v-if="appThemeDetail" v-if="appThemeDetail"
class="select-color" class="select-color"
:style="{ backgroundColor: designStore.appTheme }" :style="{ backgroundColor: designStore.appTheme }"
/> ></div>
</div> </div>
<img :src="themeColorLogo" /> <img :src="themeColorLogo" />
</div> </div>

4
src/components/ThemeSelect/index.vue

@ -1,8 +1,8 @@
<template> <template>
<n-button quaternary @click="changeTheme" title="主题"> <n-button quaternary @click="changeTheme" title="主题">
<n-icon size="20" :depth="1"> <n-icon size="20" :depth="1">
<MoonIcon v-if="designStore.darkTheme" /> <moon-icon v-if="designStore.darkTheme"></moon-icon>
<SunnyIcon v-else /> <sunny-icon v-else></sunny-icon>
</n-icon> </n-icon>
</n-button> </n-button>
</template> </template>

6
src/components/UserInfo/index.vue

@ -6,7 +6,7 @@
:options="options" :options="options"
> >
<div class="user-info-box"> <div class="user-info-box">
<PersonIcon v-if="fallback" /> <person-icon v-if="fallback"></person-icon>
<n-avatar <n-avatar
v-if="!fallback" v-if="!fallback"
round round
@ -14,12 +14,12 @@
size="medium" size="medium"
:src="Person" :src="Person"
@error="errorHandle" @error="errorHandle"
/> ></n-avatar>
</div> </div>
</n-dropdown> </n-dropdown>
<!-- 系统设置 model --> <!-- 系统设置 model -->
<SystemSet v-model:modelShow="modelShow" /> <system-set v-model:modelShow="modelShow"></system-set>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

3
src/layout/components/Footer/index.ts

@ -1,3 +0,0 @@
import Footer from './index.vue'
export { Footer }

3
src/layout/components/GoFooter/index.ts Normal file

@ -0,0 +1,3 @@
import GoFooter from './index.vue'
export { GoFooter }

0
src/layout/components/Footer/index.vue → src/layout/components/GoFooter/index.vue

3
src/layout/components/GoHeader/index.ts Normal file

@ -0,0 +1,3 @@
import GoHeader from './index.vue'
export { GoHeader }

6
src/layout/components/Header/index.vue → src/layout/components/GoHeader/index.vue

@ -12,9 +12,9 @@
<div> <div>
<n-space> <n-space>
<slot name="ri-left"> </slot> <slot name="ri-left"> </slot>
<LangSelect /> <lang-select></lang-select>
<ThemeSelect /> <Theme-select></Theme-select>
<ThemeColorSelect /> <theme-color-select></theme-color-select>
<slot name="ri-right"> </slot> <slot name="ri-right"> </slot>
</n-space> </n-space>
</div> </div>

3
src/layout/components/Header/index.ts

@ -1,3 +0,0 @@
import Header from './index.vue'
export { Header }

8
src/layout/components/HeaderPro/index.vue

@ -1,5 +1,5 @@
<template> <template>
<Header> <GoHeader>
<template #left> <template #left>
<slot name="left"></slot> <slot name="left"></slot>
</template> </template>
@ -10,12 +10,12 @@
<slot name="ri-left"></slot> <slot name="ri-left"></slot>
</template> </template>
<template #ri-right> <template #ri-right>
<UserInfo /> <uer-info></uer-info>
<slot name="ri-right"></slot> <slot name="ri-right"></slot>
</template> </template>
</Header> </GoHeader>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Header } from '@/layout/components/Header' import { GoHeader } from '@/layout/components/GoHeader'
import { UserInfo } from '@/components/UserInfo' import { UserInfo } from '@/components/UserInfo'
</script> </script>

4
src/layout/components/Main/index.vue

@ -5,9 +5,9 @@
v-if="route.noKeepAlive" v-if="route.noKeepAlive"
:is="Component" :is="Component"
:key="route.fullPath" :key="route.fullPath"
/> ></component>
<keep-alive v-else> <keep-alive v-else>
<component :is="Component" :key="route.fullPath" /> <component :is="Component" :key="route.fullPath"></component>
</keep-alive> </keep-alive>
</template> </template>
</router-view> </router-view>

4
src/layout/components/TransitionMain/index.vue

@ -6,9 +6,9 @@
v-if="route.noKeepAlive" v-if="route.noKeepAlive"
:is="Component" :is="Component"
:key="route.fullPath" :key="route.fullPath"
/> ></component>
<keep-alive v-else> <keep-alive v-else>
<component :is="Component" :key="route.fullPath" /> <component :is="Component" :key="route.fullPath"></component>
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>

2
src/layout/index.vue

@ -1,5 +1,5 @@
<template> <template>
<MainView /> <MainView></MainView>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

2
src/layout/parentLayout.vue

@ -1,3 +1,3 @@
<template> <template>
<router-view /> <router-view></router-view>
</template> </template>

31
src/packages/components/Charts/Bars/BarCommon/config.vue

@ -1,27 +1,38 @@
<template> <template>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true"> <CollapseItem
v-for="(item, index) in seriesList"
:key="index"
:name="`柱状图-${index + 1}`"
:expanded="true"
>
<SettingItemBox name="图形"> <SettingItemBox name="图形">
<SettingItem name="颜色"> <SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" /> <n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.itemStyle.color"
></n-color-picker>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem>
<n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button> <n-button size="small" @click="item.itemStyle.color = null">
恢复默认
</n-button>
</SettingItem> </SettingItem>
<SettingItem name="宽度"> <SettingItem name="宽度">
<n-input-number <n-input-number
v-model:value="item.barWidth" v-model:value="item.barWidth"
:min="1" :min="1"
:max="100" :max="100"
size="small" size="small"
placeholder="自动计算" placeholder="自动计算"
/> ></n-input-number>
</SettingItem> </SettingItem>
<SettingItem name="圆角"> <SettingItem name="圆角">
<n-input-number <n-input-number
v-model:value="item.itemStyle.borderRadius" v-model:value="item.itemStyle.borderRadius"
:min="0" :min="0"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
</CollapseItem> </CollapseItem>
@ -29,7 +40,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { PropType, computed } from 'vue' import { PropType, computed } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index' import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/ChartItemSetting/index'
import { option } from './config' import { option } from './config'
const props = defineProps({ const props = defineProps({

2
src/packages/components/Charts/Bars/BarCommon/index.vue

@ -1,5 +1,5 @@
<template> <template>
<VChart :theme="themeColor" :option="option" autoresize /> <VChart :theme="themeColor" :option="option" autoresize></VChart>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

6
src/packages/components/Charts/Bars/BarCrossrange/config.vue

@ -2,7 +2,7 @@
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true"> <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
<SettingItemBox name="图形"> <SettingItemBox name="图形">
<SettingItem name="颜色"> <SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" /> <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
</SettingItem> </SettingItem>
<SettingItem> <SettingItem>
<n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button> <n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
@ -14,14 +14,14 @@
:max="100" :max="100"
size="small" size="small"
placeholder="自动计算" placeholder="自动计算"
/> ></n-input-number>
</SettingItem> </SettingItem>
<SettingItem name="圆角"> <SettingItem name="圆角">
<n-input-number <n-input-number
v-model:value="item.itemStyle.borderRadius" v-model:value="item.itemStyle.borderRadius"
:min="0" :min="0"
size="small" size="small"
/> ></n-input-number>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
</CollapseItem> </CollapseItem>

2
src/packages/components/Charts/Bars/BarCrossrange/index.vue

@ -1,5 +1,5 @@
<template> <template>
<VChart :theme="themeColor" :option="option" autoresize /> <VChart :theme="themeColor" :option="option" autoresize></VChart>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

12
src/packages/components/Charts/Lines/LineCommon/config.vue

@ -11,14 +11,14 @@
size="small" size="small"
:modes="['hex']" :modes="['hex']"
v-model:value="item.lineStyle.color.colorStops[0].color" v-model:value="item.lineStyle.color.colorStops[0].color"
/> ></n-color-picker>
</SettingItem> </SettingItem>
<SettingItem name="颜色"> <SettingItem name="颜色">
<n-color-picker <n-color-picker
size="small" size="small"
:modes="['hex']" :modes="['hex']"
v-model:value="item.lineStyle.color.colorStops[1].color" v-model:value="item.lineStyle.color.colorStops[1].color"
/> ></n-color-picker>
</SettingItem> </SettingItem>
<SettingItem name="宽度"> <SettingItem name="宽度">
<n-input-number <n-input-number
@ -27,21 +27,21 @@
:max="100" :max="100"
size="small" size="small"
placeholder="自动计算" placeholder="自动计算"
/> ></n-input-number>
</SettingItem> </SettingItem>
<SettingItem name="类型"> <SettingItem name="类型">
<n-select <n-select
v-model:value="item.lineStyle.type" v-model:value="item.lineStyle.type"
size="small" size="small"
:options="lineConf.lineStyle.type" :options="lineConf.lineStyle.type"
/> ></n-select>
</SettingItem> </SettingItem>
<SettingItem name="类型"> <SettingItem name="类型">
<n-select <n-select
v-model:value="item.lineStyle.type" v-model:value="item.lineStyle.type"
size="small" size="small"
:options="lineConf.lineStyle.type" :options="lineConf.lineStyle.type"
/> ></n-select>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
<SettingItemBox name="阴影" :alone="true"> <SettingItemBox name="阴影" :alone="true">
@ -50,7 +50,7 @@
size="small" size="small"
:modes="['hex']" :modes="['hex']"
v-model:value="item.lineStyle.shadowColor" v-model:value="item.lineStyle.shadowColor"
/> ></n-color-picker>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>

2
src/packages/components/Charts/Lines/LineCommon/index.vue

@ -1,5 +1,5 @@
<template> <template>
<VChart :theme="themeColor" :option="option.options" autoresize /> <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@ -1,5 +1,5 @@
<template> <template>
<VChart :theme="themeColor" :option="option.options" autoresize /> <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/packages/components/Charts/Lines/LineGradients/index.vue

@ -1,5 +1,5 @@
<template> <template>
<VChart :theme="themeColor" :option="option.options" autoresize /> <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/packages/components/Charts/Pies/PieCommon/index.vue

@ -1,5 +1,5 @@
<template> <template>
<VChart :theme="themeColor" :option="option" autoresize /> <VChart :theme="themeColor" :option="option" autoresize></VChart>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

4
src/plugins/customComponents.ts

@ -1,5 +1,5 @@
import type { App } from 'vue' import type { App } from 'vue'
import { Skeleton } from '@/components/Skeleton' import { GoSkeleton } from '@/components/GoSkeleton'
import { LoadingComponent } from '@/components/LoadingComponent' import { LoadingComponent } from '@/components/LoadingComponent'
/** /**
@ -7,6 +7,6 @@ import { LoadingComponent } from '@/components/LoadingComponent'
* @param app * @param app
*/ */
export function setupCustomComponents(app: App) { export function setupCustomComponents(app: App) {
app.component('Skeleton', Skeleton) app.component('GoSkeleton', GoSkeleton)
app.component('LoadingComponent', LoadingComponent) app.component('LoadingComponent', LoadingComponent)
} }

2
src/views/chart/ContentBox/index.vue

@ -18,7 +18,7 @@
class="go-cursor-pointer" class="go-cursor-pointer"
@click="backHandle" @click="backHandle"
> >
<ChevronBackOutlineIcon /> <ChevronBackOutlineIcon></ChevronBackOutlineIcon>
</n-icon> </n-icon>
</n-space> </n-space>
</div> </div>

4
src/views/chart/ContentCharts/components/OptionContent/index.vue

@ -9,10 +9,10 @@
:icon-size="16" :icon-size="16"
:indent="18" :indent="18"
@update:value="clickItemHandle" @update:value="clickItemHandle"
/> ></n-menu>
<div class="chart-content-list"> <div class="chart-content-list">
<n-scrollbar> <n-scrollbar>
<ItemBox :menuOptions="packages.selectOptions" /> <ItemBox :menuOptions="packages.selectOptions"></ItemBox>
</n-scrollbar> </n-scrollbar>
</div> </div>
</div> </div>

10
src/views/chart/ContentCharts/index.vue

@ -9,7 +9,7 @@
> >
<template #icon> <template #icon>
<n-icon size="14" :depth="2"> <n-icon size="14" :depth="2">
<BarChartIcon /> <BarChartIcon></BarChartIcon>
</n-icon> </n-icon>
</template> </template>
<!-- 图表 --> <!-- 图表 -->
@ -22,20 +22,20 @@
:icon-size="16" :icon-size="16"
:indent="18" :indent="18"
@update:value="clickItemHandle" @update:value="clickItemHandle"
/> ></n-menu>
<div class="menu-component-box"> <div class="menu-component-box">
<Skeleton <GoSkeleton
:load="!selectOptions" :load="!selectOptions"
round round
text text
:repeat="2" :repeat="2"
style="width: 90%;" style="width: 90%;"
/> ></GoSkeleton>
<OptionContent <OptionContent
v-if="selectOptions" v-if="selectOptions"
:selectOptions="selectOptions" :selectOptions="selectOptions"
:key="selectValue" :key="selectValue"
/> ></OptionContent>
</div> </div>
</div> </div>
</aside> </aside>

2
src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue

@ -17,7 +17,7 @@
v-for="colorItem in fetchShowColors(value.color)" v-for="colorItem in fetchShowColors(value.color)"
:key="colorItem" :key="colorItem"
:style="{ backgroundColor: colorItem }" :style="{ backgroundColor: colorItem }"
/> ></span>
</div> </div>
<div <div
class="theme-bottom" class="theme-bottom"

8
src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@ -8,7 +8,7 @@
v-model:value="canvasConfig.width" v-model:value="canvasConfig.width"
:validator="validator" :validator="validator"
@update:value="changeSizeHandle" @update:value="changeSizeHandle"
/> ></n-input-number>
</n-form-item> </n-form-item>
<n-form-item label="高度"> <n-form-item label="高度">
<n-input-number <n-input-number
@ -16,7 +16,7 @@
v-model:value="canvasConfig.height" v-model:value="canvasConfig.height"
:validator="validator" :validator="validator"
@update:value="changeSizeHandle" @update:value="changeSizeHandle"
/> ></n-input-number>
</n-form-item> </n-form-item>
</n-form> </n-form>
@ -52,7 +52,7 @@
:showPreview="true" :showPreview="true"
:swatches="swatchesColors" :swatches="swatchesColors"
v-model:value="canvasConfig.background" v-model:value="canvasConfig.background"
/> ></n-color-picker>
</n-space> </n-space>
<n-space> <n-space>
<n-text>使用颜色</n-text> <n-text>使用颜色</n-text>
@ -63,7 +63,7 @@
:round="false" :round="false"
:disabled="!canvasConfig.backgroundImage" :disabled="!canvasConfig.backgroundImage"
:onUpdate="switchSelectColorHandle" :onUpdate="switchSelectColorHandle"
/> ></n-switch>
</n-space> </n-space>
<n-space> <n-space>
<n-text>背景</n-text> <n-text>背景</n-text>

8
src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@ -9,18 +9,18 @@
placeholder="请输入图表名称" placeholder="请输入图表名称"
size="small" size="small"
v-model:value="targetData.chartConfig.title" v-model:value="targetData.chartConfig.title"
/> ></n-input>
</SettingItemBox> </SettingItemBox>
<!-- 尺寸 --> <!-- 尺寸 -->
<SizeSetting :chartAttr="targetData.attr" /> <SizeSetting :chartAttr="targetData.attr"></SizeSetting>
<!-- 位置 --> <!-- 位置 -->
<PositionSetting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/> <PositionSetting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
<!-- 样式 --> <!-- 样式 -->
<StylesSetting :chartStyles="targetData.styles" /> <StylesSetting :chartStyles="targetData.styles"></StylesSetting>
<!-- 自定义配置项 --> <!-- 自定义配置项 -->
<component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component> <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
<!-- 全局设置 --> <!-- 全局设置 -->
<GlobalSetting :optionData="targetData.option" :in-chart="true" /> <GlobalSetting :optionData="targetData.option" :in-chart="true"></GlobalSetting>
</div> </div>
</template> </template>

2
src/views/chart/ContentConfigurations/index.vue

@ -2,7 +2,7 @@
<n-layout has-sider sider-placement="right"> <n-layout has-sider sider-placement="right">
<n-layout-content> <n-layout-content>
<!-- 图表拖拽区域 --> <!-- 图表拖拽区域 -->
<ContentEdit /> <ContentEdit></ContentEdit>
</n-layout-content> </n-layout-content>
<n-layout-sider <n-layout-sider
collapse-mode="transform" collapse-mode="transform"

2
src/views/chart/ContentEdit/components/EditAlignLine/index.vue

@ -9,7 +9,7 @@
line['select'].has(item) && 'visible' line['select'].has(item) && 'visible'
]" ]"
:style="useComponentStyle(line['select'].get(item))" :style="useComponentStyle(line['select'].get(item))"
/> ></div>
</div> </div>
</template> </template>

12
src/views/chart/ContentEdit/components/EditBottom/index.vue

@ -1,13 +1,13 @@
<template> <template>
<div class="go-edit-bottom"> <div class="go-edit-bottom">
<EditHistory /> <EditHistory></EditHistory>
<n-space class="bottom-ri"> <n-space class="bottom-ri">
<!-- 快捷键提示 --> <!-- 快捷键提示 -->
<n-popselect :options="shortcutKeyOptions" size="medium"> <n-popselect :options="shortcutKeyOptions" size="medium">
<n-button class="scale-btn" quaternary size="mini"> <n-button class="scale-btn" quaternary size="mini">
<n-icon class="lock-icon" size="18" :depth="2"> <n-icon class="lock-icon" size="18" :depth="2">
<DicomOverlayIcon /> <DicomOverlayIcon></DicomOverlayIcon>
</n-icon> </n-icon>
</n-button> </n-button>
</n-popselect> </n-popselect>
@ -20,7 +20,7 @@
size="mini" size="mini"
:options="filterOptions" :options="filterOptions"
@update:value="selectHandle" @update:value="selectHandle"
/> ></n-select>
<!-- 锁定缩放 --> <!-- 锁定缩放 -->
<n-tooltip trigger="hover"> <n-tooltip trigger="hover">
@ -32,8 +32,8 @@
size="18" size="18"
:depth="2" :depth="2"
> >
<LockClosedOutlineIcon v-if="lockScale" /> <LockClosedOutlineIcon v-if="lockScale"></LockClosedOutlineIcon>
<LockOpenOutlineIcon v-else /> <LockOpenOutlineIcon v-else></LockOpenOutlineIcon>
</n-icon> </n-icon>
</n-button> </n-button>
</template> </template>
@ -52,7 +52,7 @@
:disabled="lockScale" :disabled="lockScale"
:marks="sliderMaks" :marks="sliderMaks"
@update:value="sliderHandle" @update:value="sliderHandle"
/> ></n-slider>
</n-space> </n-space>
</div> </div>
</template> </template>

2
src/views/chart/ContentEdit/components/EditHistory/index.vue

@ -22,7 +22,7 @@
<n-tooltip trigger="hover"> <n-tooltip trigger="hover">
<template #trigger> <template #trigger>
<n-icon size="21" :depth="3"> <n-icon size="21" :depth="3">
<HelpOutlineIcon /> <HelpOutlineIcon></HelpOutlineIcon>
</n-icon> </n-icon>
</template> </template>
<span>最多只保留 20 条记录</span> <span>最多只保留 20 条记录</span>

2
src/views/chart/ContentEdit/components/EditRange/index.vue

@ -6,7 +6,7 @@
> >
<slot></slot> <slot></slot>
<!-- 拖拽时的辅助线 --> <!-- 拖拽时的辅助线 -->
<EditAlignLine /> <EditAlignLine></EditAlignLine>
</div> </div>
</template> </template>

6
src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@ -8,15 +8,15 @@
:key="index" :key="index"
:style="usePointStyle(point, index, item.attr, cursorResize)" :style="usePointStyle(point, index, item.attr, cursorResize)"
@mousedown="useMousePointHandle($event, point, item.attr)" @mousedown="useMousePointHandle($event, point, item.attr)"
/> ></div>
<!-- 选中 --> <!-- 选中 -->
<div class="shape-modal" :style="useSizeStyle(item.attr)"> <div class="shape-modal" :style="useSizeStyle(item.attr)">
<div class="shape-modal-select" :class="{ active: select }" /> <div class="shape-modal-select" :class="{ active: select }"></div>
<div <div
class="shape-modal-change" class="shape-modal-change"
:class="{ selectActive: select, hoverActive: hover }" :class="{ selectActive: select, hoverActive: hover }"
/> ></div>
</div> </div>
</div> </div>
</template> </template>

4
src/views/chart/ContentEdit/index.vue

@ -32,13 +32,13 @@
:themeSetting="themeSetting" :themeSetting="themeSetting"
:themeColor="themeColor" :themeColor="themeColor"
:style="useSizeStyle(item.attr)" :style="useSizeStyle(item.attr)"
/> ></component>
</EditShapeBox> </EditShapeBox>
</EditRange> </EditRange>
</div> </div>
<!-- 底部控制 --> <!-- 底部控制 -->
<template #bottom> <template #bottom>
<EditBottom /> <EditBottom></EditBottom>
</template> </template>
</ContentBox> </ContentBox>
</template> </template>

4
src/views/chart/ContentLayers/components/ListItem/index.vue

@ -10,14 +10,14 @@
preview-disabled preview-disabled
:src="image" :src="image"
:fallback-src="requireErrorImg()" :fallback-src="requireErrorImg()"
/> ></n-image>
<n-ellipsis> <n-ellipsis>
<n-text class="list-text"> <n-text class="list-text">
{{ props.componentData.chartConfig.title }} {{ props.componentData.chartConfig.title }}
</n-text> </n-text>
</n-ellipsis> </n-ellipsis>
</div> </div>
<div :class="{ 'select-modal': select }" /> <div :class="{ 'select-modal': select }"></div>
</div> </div>
</template> </template>

4
src/views/chart/ContentLayers/index.vue

@ -8,7 +8,7 @@
> >
<template #icon> <template #icon>
<n-icon size="16" :depth="2"> <n-icon size="16" :depth="2">
<component :is="LayersIcon" /> <component :is="LayersIcon"></component>
</n-icon> </n-icon>
</template> </template>
@ -21,7 +21,7 @@
@mouseenter="mouseenterHandle(item)" @mouseenter="mouseenterHandle(item)"
@mouseleave="mouseleaveHandle(item)" @mouseleave="mouseleaveHandle(item)"
@contextmenu="handleContextMenu($event)" @contextmenu="handleContextMenu($event)"
/> ></ListItem>
</ContentBox> </ContentBox>
</template> </template>

2
src/views/chart/HeaderLeftBtn/index.vue

@ -3,7 +3,7 @@
<n-button size="small" quaternary @click="goHomeHandle()"> <n-button size="small" quaternary @click="goHomeHandle()">
<template #icon> <template #icon>
<n-icon :depth="3"> <n-icon :depth="3">
<HomeIcon /> <HomeIcon></HomeIcon>
</n-icon> </n-icon>
</template> </template>
</n-button> </n-button>

4
src/views/chart/HeaderTitle/index.vue

@ -1,7 +1,7 @@
<template> <template>
<n-space> <n-space>
<n-icon size="20" :depth="3"> <n-icon size="20" :depth="3">
<FishIcon /> <FishIcon></FishIcon>
</n-icon> </n-icon>
<n-text @click="handleFocus"> <n-text @click="handleFocus">
工作空间 - 工作空间 -
@ -19,7 +19,7 @@
placeholder="请输入项目名称" placeholder="请输入项目名称"
v-model:value.trim="title" v-model:value.trim="title"
@blur="handleBlur" @blur="handleBlur"
/> ></n-input>
</n-space> </n-space>
</template> </template>

14
src/views/chart/index.vue

@ -4,19 +4,19 @@
<n-layout> <n-layout>
<HeaderPro> <HeaderPro>
<template #left> <template #left>
<HeaderLeftBtn /> <HeaderLeftBtn></HeaderLeftBtn>
</template> </template>
<template #center> <template #center>
<HeaderTitle /> <HeaderTitle></HeaderTitle>
</template> </template>
<template #ri-left> <template #ri-left>
<HeaderRightBtn /> <HeaderRightBtn></HeaderRightBtn>
</template> </template>
</HeaderPro> </HeaderPro>
<n-layout-content content-style="overflow:hidden; display: flex"> <n-layout-content content-style="overflow:hidden; display: flex">
<ContentCharts /> <ContentCharts></ContentCharts>
<ContentLayers /> <ContentLayers></ContentLayers>
<ContentConfigurations /> <ContentConfigurations></ContentConfigurations>
</n-layout-content> </n-layout-content>
</n-layout> </n-layout>
</div> </div>
@ -31,7 +31,7 @@
:show="chartEditStore.getRightMenuShow" :show="chartEditStore.getRightMenuShow"
:on-clickoutside="onClickoutside" :on-clickoutside="onClickoutside"
@select="handleMenuSelect" @select="handleMenuSelect"
/> ></n-dropdown>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

18
src/views/login/index.vue

@ -15,13 +15,13 @@
</transition-group> </transition-group>
</aside> </aside>
</div> </div>
<Header> <GoHeader>
<template #left></template> <template #left></template>
<template #right> <template #right>
<LangSelect /> <LangSelect></LangSelect>
<ThemeSelect /> <ThemeSelect></ThemeSelect>
</template> </template>
</Header> </GoHeader>
<div class="go-login"> <div class="go-login">
<div class="go-login-carousel"> <div class="go-login-carousel">
<n-carousel <n-carousel
@ -63,7 +63,7 @@
> >
<template #prefix> <template #prefix>
<n-icon size="18"> <n-icon size="18">
<PersonOutlineIcon /> <PersonOutlineIcon></PersonOutlineIcon>
</n-icon> </n-icon>
</template> </template>
</n-input> </n-input>
@ -77,7 +77,7 @@
> >
<template #prefix> <template #prefix>
<n-icon size="18"> <n-icon size="18">
<LockClosedOutlineIcon /> <LockClosedOutlineIcon></LockClosedOutlineIcon>
</n-icon> </n-icon>
</template> </template>
</n-input> </n-input>
@ -109,7 +109,7 @@
</div> </div>
<div class="go-login-box-footer"> <div class="go-login-box-footer">
<Footer /> <GoFooter></GoFooter>
</div> </div>
</div> </div>
</template> </template>
@ -126,8 +126,8 @@ import { carouselInterval } from '@/settings/designSetting'
import { useDesignStore } from '@/store/modules/designStore/designStore' import { useDesignStore } from '@/store/modules/designStore/designStore'
import { ThemeSelect } from '@/components/ThemeSelect' import { ThemeSelect } from '@/components/ThemeSelect'
import { LangSelect } from '@/components/LangSelect' import { LangSelect } from '@/components/LangSelect'
import { Header } from '@/layout/components/Header' import { GoHeader } from '@/layout/components/GoHeader'
import { Footer } from '@/layout/components/Footer' import { GoFooter } from '@/layout/components/GoFooter'
import { PageEnum } from '@/enums/pageEnum' import { PageEnum } from '@/enums/pageEnum'
import { icon } from '@/plugins' import { icon } from '@/plugins'
import { StorageEnum } from '@/enums/storageEnum' import { StorageEnum } from '@/enums/storageEnum'

2
src/views/preview/components/RenderList/index.vue

@ -11,7 +11,7 @@
:chartConfig="item" :chartConfig="item"
:themeSetting="themeSetting" :themeSetting="themeSetting"
:themeColor="themeColor" :themeColor="themeColor"
/> ></component>
</div> </div>
</template> </template>

2
src/views/preview/index.vue

@ -5,7 +5,7 @@
<!-- 展示层 --> <!-- 展示层 -->
<div :style="previewRefStyle" v-if="show"> <div :style="previewRefStyle" v-if="show">
<!-- 渲染层 --> <!-- 渲染层 -->
<RenderList :localStorageInfo="localStorageInfo" /> <render-list :localStorageInfo="localStorageInfo"></render-list>
</div> </div>
</div> </div>
</div> </div>

6
src/views/project/index.vue

@ -2,10 +2,10 @@
<div class="go-project"> <div class="go-project">
<n-layout has-sider position="absolute"> <n-layout has-sider position="absolute">
<n-space vertical> <n-space vertical>
<Sider /> <Sider></Sider>
</n-space> </n-space>
<n-layout> <n-layout>
<HeaderPro /> <HeaderPro></HeaderPro>
<n-layout <n-layout
id="go-project-content-top" id="go-project-content-top"
class="content-top" class="content-top"
@ -14,7 +14,7 @@
> >
<n-layout-content> <n-layout-content>
<TransitionMain> <TransitionMain>
<router-view /> <router-view></router-view>
</TransitionMain> </TransitionMain>
</n-layout-content> </n-layout-content>
</n-layout> </n-layout>

10
src/views/project/items/components/Card/index.vue

@ -9,7 +9,7 @@
:hidden="['remove']" :hidden="['remove']"
@close="deleteHanlde" @close="deleteHanlde"
@resize="resizeHandle" @resize="resizeHandle"
/> ></MacOsControlBtn>
</div> </div>
<!-- 中间 --> <!-- 中间 -->
<div class="list-content-img" @click="resizeHandle"> <div class="list-content-img" @click="resizeHandle">
@ -22,7 +22,7 @@
" "
:alt="cardData.title" :alt="cardData.title"
:fallback-src="requireErrorImg()" :fallback-src="requireErrorImg()"
/> ></n-image>
</div> </div>
</div> </div>
<template #action> <template #action>
@ -37,7 +37,7 @@
class="animation-twinkle" class="animation-twinkle"
dot dot
:color="cardData.release ? '#34c749' : '#fcbc40'" :color="cardData.release ? '#34c749' : '#fcbc40'"
/> ></n-badge>
{{ {{
cardData.release cardData.release
? $t('project.release') ? $t('project.release')
@ -56,7 +56,7 @@
> >
<n-button size="small"> <n-button size="small">
<template #icon> <template #icon>
<component :is="item.icon" /> <component :is="item.icon"></component>
</template> </template>
</n-button> </n-button>
</n-dropdown> </n-dropdown>
@ -66,7 +66,7 @@
<template #trigger> <template #trigger>
<n-button size="small" @click="handleSelect(item.key)"> <n-button size="small" @click="handleSelect(item.key)">
<template #icon> <template #icon>
<component :is="item.icon" /> <component :is="item.icon"></component>
</template> </template>
</n-button> </n-button>
</template> </template>

6
src/views/project/items/components/List/index.vue

@ -7,12 +7,12 @@
responsive="screen" responsive="screen"
> >
<n-grid-item v-for="(item, index) in list" :key="item.id"> <n-grid-item v-for="(item, index) in list" :key="item.id">
<Card <card
:cardData="item" :cardData="item"
@resize="resizeHandle" @resize="resizeHandle"
@delete="deleteHandle($event, index)" @delete="deleteHandle($event, index)"
@edit="editHandle" @edit="editHandle"
/> ></card>
</n-grid-item> </n-grid-item>
</n-grid> </n-grid>
</div> </div>
@ -22,7 +22,7 @@
:cardData="modalData" :cardData="modalData"
@close="closeModal" @close="closeModal"
@edit="editHandle" @edit="editHandle"
/> ></ModalCard>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

8
src/views/project/items/components/ModalCard/index.vue

@ -21,7 +21,7 @@
:narrow="true" :narrow="true"
:hidden="['close']" :hidden="['close']"
@remove="closeHandle" @remove="closeHandle"
/> ></MacOsControlBtn>
</n-space> </n-space>
<!-- 中间 --> <!-- 中间 -->
<div class="list-content-img"> <div class="list-content-img">
@ -37,7 +37,7 @@
<n-space class="list-footer" justify="space-between"> <n-space class="list-footer" justify="space-between">
<n-text depth="3"> <n-text depth="3">
{{ $t('project.last_edit') }}: {{ $t('project.last_edit') }}:
<n-time :time="new Date()" format="yyyy-MM-dd hh:mm" /> <n-time :time="new Date()" format="yyyy-MM-dd hh:mm"></n-time>
</n-text> </n-text>
<!-- 工具 --> <!-- 工具 -->
<n-space> <n-space>
@ -46,7 +46,7 @@
class="animation-twinkle" class="animation-twinkle"
dot dot
:color="cardData?.release ? '#34c749' : '#fcbc40'" :color="cardData?.release ? '#34c749' : '#fcbc40'"
/> ></n-badge>
{{ {{
cardData?.release cardData?.release
? $t('project.release') ? $t('project.release')
@ -59,7 +59,7 @@
<template #trigger> <template #trigger>
<n-button size="small" @click="handleSelect(item.key)"> <n-button size="small" @click="handleSelect(item.key)">
<template #icon> <template #icon>
<component :is="item.icon" /> <component :is="item.icon"></component>
</template> </template>
</n-button> </n-button>
</template> </template>

2
src/views/project/items/index.vue

@ -1,6 +1,6 @@
<template> <template>
<div class="go-project-items"> <div class="go-project-items">
<List /> <List></List>
</div> </div>
</template> </template>

10
src/views/project/layout/components/AsideFooter/index.vue

@ -1,13 +1,13 @@
<template> <template>
<div class="go-aside-footer"> <div class="go-aside-footer">
<n-divider class="go-mt-0" /> <n-divider class="go-mt-0"></n-divider>
<n-space justify="space-around"> <n-space justify="space-around">
<n-tooltip v-if="collapsed" placement="right" trigger="hover"> <n-tooltip v-if="collapsed" placement="right" trigger="hover">
<template #trigger> <template #trigger>
<n-button secondary @click="handleDoc"> <n-button secondary @click="handleDoc">
<template #icon> <template #icon>
<n-icon size="18"> <n-icon size="18">
<HelpOutlineIcon /> <HelpOutlineIcon></HelpOutlineIcon>
</n-icon> </n-icon>
</template> </template>
</n-button> </n-button>
@ -20,7 +20,7 @@
<n-button v-else secondary @click="handleDoc"> <n-button v-else secondary @click="handleDoc">
<template #icon> <template #icon>
<n-icon size="18"> <n-icon size="18">
<HelpOutlineIcon /> <HelpOutlineIcon></HelpOutlineIcon>
</n-icon> </n-icon>
</template> </template>
<n-text>{{ $t('global.help') }}</n-text> <n-text>{{ $t('global.help') }}</n-text>
@ -31,7 +31,7 @@
<n-button secondary @click="handleDoc"> <n-button secondary @click="handleDoc">
<template #icon> <template #icon>
<n-icon size="18"> <n-icon size="18">
<CodeSlashIcon /> <CodeSlashIcon></CodeSlashIcon>
</n-icon> </n-icon>
</template> </template>
</n-button> </n-button>
@ -44,7 +44,7 @@
<n-button v-else secondary @click="handleCode"> <n-button v-else secondary @click="handleCode">
<template #icon> <template #icon>
<n-icon size="18"> <n-icon size="18">
<CodeSlashIcon /> <CodeSlashIcon></CodeSlashIcon>
</n-icon> </n-icon>
</template> </template>
<n-text v-show="!collapsed">{{ $t('global.code_addr') }}</n-text> <n-text v-show="!collapsed">{{ $t('global.code_addr') }}</n-text>

4
src/views/project/layout/components/Create/components/CreateModal/index.vue

@ -8,7 +8,7 @@
<template #header-extra> <template #header-extra>
<n-text @click="closeHandle"> <n-text @click="closeHandle">
<n-icon size="20"> <n-icon size="20">
<component :is="CloseIcon" /> <component :is="CloseIcon"></component>
</n-icon> </n-icon>
</n-text> </n-text>
</template> </template>
@ -23,7 +23,7 @@
<component :is="item.title"></component> <component :is="item.title"></component>
<template #icon> <template #icon>
<n-icon size="18"> <n-icon size="18">
<component :is="item.icon" /> <component :is="item.icon"></component>
</n-icon> </n-icon>
</template> </template>
</n-button> </n-button>

10
src/views/project/layout/components/Create/index.vue

@ -5,8 +5,8 @@
<n-button ghost type="primary" size="small"> <n-button ghost type="primary" size="small">
<template #icon> <template #icon>
<n-icon> <n-icon>
<DuplicateOutlineIcon v-show="designStore.getDarkTheme" /> <DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
<DuplicateIcon v-show="!designStore.getDarkTheme" /> <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateOutlineIcon>
</n-icon> </n-icon>
</template> </template>
</n-button> </n-button>
@ -18,8 +18,8 @@
<n-button v-else ghost type="primary"> <n-button v-else ghost type="primary">
<template #icon> <template #icon>
<n-icon> <n-icon>
<DuplicateOutlineIcon v-show="designStore.getDarkTheme" /> <DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
<DuplicateIcon v-show="!designStore.getDarkTheme" /> <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateOutlineIcon>
</n-icon> </n-icon>
</template> </template>
<span> <span>
@ -27,7 +27,7 @@
</span> </span>
</n-button> </n-button>
</div> </div>
<CreateModal :show="modalShow" @close="closeHandle" /> <CreateModal :show="modalShow" @close="closeHandle"></CreateModal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'

4
src/views/project/layout/components/Header/index.ts

@ -1,3 +1,3 @@
import Header from './index.vue' import GoHeader from './index.vue'
export { Header } export { GoHeader }

8
src/views/project/layout/components/Header/index.vue

@ -1,13 +1,13 @@
<template> <template>
<Header> <go-header>
<template #ri-left> <template #ri-left>
</template> </template>
<template #ri-right> <template #ri-right>
<UserInfo /> <user-info></user-info>
</template> </template>
</Header> </go-header>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Header } from '@/layout/components/Header' import { GoHeader } from '@/layout/components/GoHeader'
import { UserInfo } from '@/components/UserInfo' import { UserInfo } from '@/components/UserInfo'
</script> </script>

6
src/views/project/layout/components/Sider/index.vue

@ -14,7 +14,7 @@
<div class="go-project-sider-flex"> <div class="go-project-sider-flex">
<aside> <aside>
<n-space vertical class="go-project-sider-top"> <n-space vertical class="go-project-sider-top">
<Create :collapsed="collapsed" /> <Create :collapsed="collapsed"></Create>
</n-space> </n-space>
<n-menu <n-menu
:value="menuValue" :value="menuValue"
@ -22,11 +22,11 @@
:collapsed-width="getAsideCollapsedWidth" :collapsed-width="getAsideCollapsedWidth"
:collapsed-icon-size="22" :collapsed-icon-size="22"
:default-expanded-keys="defaultExpandedKeys" :default-expanded-keys="defaultExpandedKeys"
/> ></n-menu>
</aside> </aside>
<!-- 底部提示 --> <!-- 底部提示 -->
<div class="sider-bottom"> <div class="sider-bottom">
<AsideFooter :collapsed="collapsed" /> <AsideFooter :collapsed="collapsed"></AsideFooter>
</div> </div>
</div> </div>
</n-layout-sider> </n-layout-sider>

2
src/views/project/mtTemplate/index.vue

@ -6,7 +6,7 @@
height="300" height="300"
preview-disabled preview-disabled
:src="requireErrorImg()" :src="requireErrorImg()"
/> ></n-image>
<n-h3>暂时还没有东西呢</n-h3> <n-h3>暂时还没有东西呢</n-h3>
</n-space> </n-space>
</div> </div>

2
src/views/project/templateMarket/index.vue

@ -1,7 +1,7 @@
<template> <template>
<div class="go-project-template-market"> <div class="go-project-template-market">
<n-space vertical> <n-space vertical>
<n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()" /> <n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()"></n-image>
<n-h3>暂时还没有东西呢</n-h3> <n-h3>暂时还没有东西呢</n-h3>
</n-space> </n-space>
</div> </div>