mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-04 04:39:08 +08:00
fix: 修改闭合组件不规范的问题
This commit is contained in:
MTrun
parent
3747771078
commit
3a9f68384f
@ -5,10 +5,10 @@
|
||||
:date-locale="dateZhCN"
|
||||
:theme-overrides="getThemeOverrides"
|
||||
>
|
||||
<AppProvider>
|
||||
<I18n />
|
||||
<router-view />
|
||||
</AppProvider>
|
||||
<app-provider>
|
||||
<i18n></i18n>
|
||||
<router-view></router-view>
|
||||
</app-provider>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<n-loading-bar-provider>
|
||||
<n-dialog-provider>
|
||||
<DialogContent />
|
||||
<LoadingContent />
|
||||
<dialog-content></dialog-content>
|
||||
<loading-content></loading-content>
|
||||
<n-notification-provider>
|
||||
<n-message-provider>
|
||||
<MessageContent />
|
||||
<message-content></message-content>
|
||||
<slot></slot>
|
||||
</n-message-provider>
|
||||
</n-notification-provider>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<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>
|
||||
<!-- 右侧 -->
|
||||
<template #header-extra>
|
||||
<div @click="click">
|
||||
<slot name="header" />
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<n-collapse-item :title="name" :name="name">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
</template>
|
||||
|
||||
@ -1,237 +1,286 @@
|
||||
<template>
|
||||
<CollapseItem v-if="title" name="标题">
|
||||
<collapse-item v-if="title" name="标题">
|
||||
<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>
|
||||
<SettingItemBox name="标题">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker v-model:value="title.textStyle.color" size="small" />
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<setting-item-box name="标题">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="title.textStyle.color"
|
||||
size="small"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="title.textStyle.fontSize"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="副标题">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" v-model:value="title.subtextStyle.color" />
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="副标题">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="title.subtextStyle.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="title.subtextStyle.fontSize"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<CollapseItem v-if="xAxis" name="X轴">
|
||||
<collapse-item v-if="xAxis" name="X轴">
|
||||
<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>
|
||||
<SettingItemBox name="名称">
|
||||
<SettingItem name="颜色">
|
||||
<setting-item-box name="名称">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="xAxis.nameTextStyle.color"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="标签">
|
||||
<SettingItem v-show="inChart" name="展示">
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<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>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" v-model:value="xAxis.axisLabel.color" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="轴线">
|
||||
<SettingItem name="颜色">
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="xAxis.axisLabel.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="轴线">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="xAxis.axisLine.lineStyle.color"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.axisLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="对齐零">
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="对齐零">
|
||||
<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>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="刻度">
|
||||
<SettingItem v-show="inChart" name="展示">
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="刻度">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<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>
|
||||
</SettingItem>
|
||||
<SettingItem name="长度">
|
||||
</setting-item>
|
||||
<setting-item name="长度">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.axisTick.length"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="分割线">
|
||||
<SettingItem v-show="inChart" name="展示">
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="分割线">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<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>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="xAxis.splitLine.lineStyle.color"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.splitLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="类型">
|
||||
<n-select
|
||||
v-model:value="xAxis.splitLine.lineStyle.type"
|
||||
size="small"
|
||||
:options="axisConf.splitLint.lineStyle.type"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="位置">
|
||||
></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="xAxis.position"
|
||||
size="small"
|
||||
:options="axisConf.xposition"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
></n-select>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<CollapseItem v-if="yAxis" name="Y轴">
|
||||
<collapse-item v-if="yAxis" name="Y轴">
|
||||
<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>
|
||||
<SettingItemBox name="名称">
|
||||
<SettingItem name="颜色">
|
||||
<setting-item-box name="名称">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="yAxis.nameTextStyle.color"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="标签">
|
||||
<SettingItem v-show="inChart" name="展示">
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<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>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" v-model:value="yAxis.axisLabel.color" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="轴线">
|
||||
<SettingItem v-show="inChart" name="展示">
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="yAxis.axisLabel.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="轴线">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<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>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="yAxis.axisLine.lineStyle.color"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.axisLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="对齐零">
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="对齐零">
|
||||
<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>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="刻度">
|
||||
<SettingItem v-show="inChart" name="展示">
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="刻度">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<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>
|
||||
</SettingItem>
|
||||
<SettingItem name="长度">
|
||||
</setting-item>
|
||||
<setting-item name="长度">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.axisTick.length"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="分割线">
|
||||
<SettingItem v-show="inChart" name="展示">
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="分割线">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<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>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="yAxis.splitLine.lineStyle.color"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.splitLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="类型">
|
||||
<n-select
|
||||
v-model:value="yAxis.splitLine.lineStyle.type"
|
||||
size="small"
|
||||
:options="axisConf.splitLint.lineStyle.type"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="位置">
|
||||
></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="yAxis.position"
|
||||
size="small"
|
||||
:options="axisConf.yposition"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
></n-select>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<CollapseItem v-if="legend" name="图例">
|
||||
<collapse-item v-if="legend" name="图例">
|
||||
<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>
|
||||
<SettingItemBox name="图例文字">
|
||||
<SettingItem>
|
||||
<n-color-picker size="small" v-model:value="legend.textStyle.color" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<setting-item-box name="图例文字">
|
||||
<setting-item>
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="legend.textStyle.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, PropType, watchEffect, computed } from 'vue'
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { axisConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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-button
|
||||
secondary
|
||||
@ -8,12 +8,11 @@
|
||||
@click="positonHandle(item.key)"
|
||||
>
|
||||
<template #icon>
|
||||
<component :is="item.icon" />
|
||||
<component :is="item.icon" ></component>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-space>
|
||||
<!-- </SettingItemBox> -->
|
||||
<SettingItemBox name="边距">
|
||||
<setting-item-box name="边距">
|
||||
<n-input-number
|
||||
v-model:value="chartAttr.y"
|
||||
:min="0"
|
||||
@ -34,7 +33,7 @@
|
||||
<n-text depth="3">左</n-text>
|
||||
</template>
|
||||
</n-input-number>
|
||||
</SettingItemBox>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="go-setting-item" :style="{ width: width + 'px' }">
|
||||
<slot />
|
||||
<slot ></slot>
|
||||
<n-text class="name" depth="3">{{ name }}</n-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="item-right" justify="space-between" :style="{
|
||||
gridTemplateColumns: alone? '1fr': '1fr 1fr'
|
||||
}">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<SettingItemBox name="尺寸">
|
||||
<setting-item-box name="尺寸">
|
||||
<n-input-number
|
||||
v-model:value="chartAttr.w"
|
||||
:min="50"
|
||||
@ -20,7 +20,7 @@
|
||||
<n-text depth="3">高度</n-text>
|
||||
</template>
|
||||
</n-input-number>
|
||||
</SettingItemBox>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<CollapseItem name="通用样式">
|
||||
<SettingItemBox name="透明度" :alone="true">
|
||||
<collapse-item name="通用样式">
|
||||
<setting-item-box name="透明度" :alone="true">
|
||||
<!-- 透明度 -->
|
||||
<n-slider
|
||||
v-model:value="chartStyles.opacity"
|
||||
:step="0.1"
|
||||
:min="0"
|
||||
:max="1"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
></n-slider>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<n-button quaternary @click="handleClick" title="说明文档">
|
||||
<n-icon size="20" :depth="1">
|
||||
<DocumentTextIcon />
|
||||
<document-text-icon></document-text-icon>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
>
|
||||
<n-button quaternary>
|
||||
<n-icon size="20" :depth="1">
|
||||
<LanguageIcon />
|
||||
<language-icon></language-icon>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 骨架图 -->
|
||||
<Skeleton :repeat="3" :show="true"/>
|
||||
<go-skeleton :repeat="3" :show="true"></go-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,7 +1,7 @@
|
||||
import type { App } from 'vue'
|
||||
import LoadingComponent from './index.vue'
|
||||
import AsyncLoading from './index.vue'
|
||||
import AsyncSkeletonLoading from './Skeleton.vue'
|
||||
import AsyncSkeletonLoading from './GoSkeleton.vue'
|
||||
|
||||
// 正常组件
|
||||
export { LoadingComponent }
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- svg加载图 -->
|
||||
<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>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@click.stop="handleClick(item.key)"
|
||||
>
|
||||
<n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
|
||||
<component :is="item.icon" />
|
||||
<component :is="item.icon"></component>
|
||||
</n-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import Skeleton from './index.vue';
|
||||
import GoSkeleton from './index.vue';
|
||||
|
||||
export { Skeleton };
|
||||
export { GoSkeleton };
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div v-show="load">
|
||||
<div v-show="repeat == 1">
|
||||
<n-skeleton v-bind="$attrs" />
|
||||
<n-skeleton v-bind="$attrs"></n-skeleton>
|
||||
</div>
|
||||
<div v-show="repeat == 2">
|
||||
<n-skeleton v-bind="$attrs" />
|
||||
<n-skeleton v-bind="$attrs" style="width: 60%;" />
|
||||
<n-skeleton v-bind="$attrs"></n-skeleton>
|
||||
<n-skeleton v-bind="$attrs" style="width: 60%;"></n-skeleton>
|
||||
</div>
|
||||
<div v-show="repeat > 2">
|
||||
<n-skeleton v-bind="$attrs" :repeat="repeat - 2" />
|
||||
<n-skeleton v-bind="$attrs" style="width: 60%;" />
|
||||
<n-skeleton v-bind="$attrs" style="width: 50%;" />
|
||||
<n-skeleton v-bind="$attrs" :repeat="repeat - 2"></n-skeleton>
|
||||
<n-skeleton v-bind="$attrs" style="width: 60%;"></n-skeleton>
|
||||
<n-skeleton v-bind="$attrs" style="width: 50%;"></n-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<n-space justify="space-between">
|
||||
<n-h3 class="go-mb-0">系统设置</n-h3>
|
||||
<n-icon size="20" class="go-cursor-pointer" @click="closeHandle">
|
||||
<CloseIcon />
|
||||
<close-icon></close-icon>
|
||||
</n-icon>
|
||||
</n-space>
|
||||
</template>
|
||||
@ -19,7 +19,7 @@
|
||||
v-model:value="item.value"
|
||||
size="small"
|
||||
@update:value="handleChange($event, item)"
|
||||
/>
|
||||
></n-switch>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'number'">
|
||||
<n-input-number
|
||||
@ -30,7 +30,7 @@
|
||||
:suffix="item.suffix || null"
|
||||
:min="item.min || 0"
|
||||
@update:value="handleChange($event, item)"
|
||||
/>
|
||||
></n-input-number>
|
||||
</template>
|
||||
</n-space>
|
||||
<n-space>
|
||||
@ -38,7 +38,7 @@
|
||||
<n-tooltip v-if="item.tip" trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon size="21">
|
||||
<HelpOutlineIcon />
|
||||
<help-outline-icon></help-outline-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>{{ item.tip }}</span>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
@click="colorSelectHandle(item)"
|
||||
>
|
||||
<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>
|
||||
<span :style="{ color: item.hex }">{{ item.name }}</span>
|
||||
@ -16,7 +16,7 @@
|
||||
</n-space>
|
||||
<n-text>
|
||||
{{ item.hex }}
|
||||
<n-divider vertical />
|
||||
<n-divider vertical></n-divider>
|
||||
{{
|
||||
`rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
|
||||
}}
|
||||
@ -24,7 +24,7 @@
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
<n-divider />
|
||||
<n-divider></n-divider>
|
||||
<div
|
||||
class="content-left-item go-transition-quick"
|
||||
span="12 1000:6 1400:4 1800:4 2200:2"
|
||||
@ -33,7 +33,7 @@
|
||||
@click="colorSelectHandle(item)"
|
||||
>
|
||||
<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>
|
||||
<span :style="{ color: item.hex }">{{ item.name }}</span>
|
||||
@ -41,7 +41,7 @@
|
||||
</n-space>
|
||||
<n-text>
|
||||
{{ item.hex }}
|
||||
<n-divider vertical />
|
||||
<n-divider vertical></n-divider>
|
||||
{{
|
||||
`rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
|
||||
}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<n-button quaternary @click="modelShow = true" title="颜色">
|
||||
<n-icon size="20" :depth="1">
|
||||
<ColorWandIcon />
|
||||
<ColorWandIcon></ColorWandIcon>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
<n-modal v-model:show="modelShow">
|
||||
@ -9,13 +9,13 @@
|
||||
<n-space justify="space-between">
|
||||
<n-h3 class="title">主题颜色选择</n-h3>
|
||||
<n-icon size="20" class="go-cursor-pointer" @click="modelShow = false">
|
||||
<CloseIcon />
|
||||
<CloseIcon></CloseIcon>
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<n-divider />
|
||||
<n-divider></n-divider>
|
||||
<div class="model-content" ref="contentLeftRef">
|
||||
<div class="content-left" v-if="modelShow">
|
||||
<ColorList :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle" />
|
||||
<ColorList :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle"></ColorList>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="color-name-detail">
|
||||
@ -29,7 +29,7 @@
|
||||
v-if="appThemeDetail"
|
||||
class="select-color"
|
||||
:style="{ backgroundColor: designStore.appTheme }"
|
||||
/>
|
||||
></div>
|
||||
</div>
|
||||
<img :src="themeColorLogo" />
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<n-button quaternary @click="changeTheme" title="主题">
|
||||
<n-icon size="20" :depth="1">
|
||||
<MoonIcon v-if="designStore.darkTheme" />
|
||||
<SunnyIcon v-else />
|
||||
<moon-icon v-if="designStore.darkTheme"></moon-icon>
|
||||
<sunny-icon v-else></sunny-icon>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
:options="options"
|
||||
>
|
||||
<div class="user-info-box">
|
||||
<PersonIcon v-if="fallback" />
|
||||
<person-icon v-if="fallback"></person-icon>
|
||||
<n-avatar
|
||||
v-if="!fallback"
|
||||
round
|
||||
@ -14,12 +14,12 @@
|
||||
size="medium"
|
||||
:src="Person"
|
||||
@error="errorHandle"
|
||||
/>
|
||||
></n-avatar>
|
||||
</div>
|
||||
</n-dropdown>
|
||||
|
||||
<!-- 系统设置 model -->
|
||||
<SystemSet v-model:modelShow="modelShow" />
|
||||
<system-set v-model:modelShow="modelShow"></system-set>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import Footer from './index.vue'
|
||||
|
||||
export { Footer }
|
||||
3
src/layout/components/GoFooter/index.ts
Normal file
3
src/layout/components/GoFooter/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import GoFooter from './index.vue'
|
||||
|
||||
export { GoFooter }
|
||||
3
src/layout/components/GoHeader/index.ts
Normal file
3
src/layout/components/GoHeader/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import GoHeader from './index.vue'
|
||||
|
||||
export { GoHeader }
|
||||
@ -12,9 +12,9 @@
|
||||
<div>
|
||||
<n-space>
|
||||
<slot name="ri-left"> </slot>
|
||||
<LangSelect />
|
||||
<ThemeSelect />
|
||||
<ThemeColorSelect />
|
||||
<lang-select></lang-select>
|
||||
<Theme-select></Theme-select>
|
||||
<theme-color-select></theme-color-select>
|
||||
<slot name="ri-right"> </slot>
|
||||
</n-space>
|
||||
</div>
|
||||
@ -1,3 +0,0 @@
|
||||
import Header from './index.vue'
|
||||
|
||||
export { Header }
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Header>
|
||||
<GoHeader>
|
||||
<template #left>
|
||||
<slot name="left"></slot>
|
||||
</template>
|
||||
@ -10,12 +10,12 @@
|
||||
<slot name="ri-left"></slot>
|
||||
</template>
|
||||
<template #ri-right>
|
||||
<UserInfo />
|
||||
<uer-info></uer-info>
|
||||
<slot name="ri-right"></slot>
|
||||
</template>
|
||||
</Header>
|
||||
</GoHeader>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Header } from '@/layout/components/Header'
|
||||
import { GoHeader } from '@/layout/components/GoHeader'
|
||||
import { UserInfo } from '@/components/UserInfo'
|
||||
</script>
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
v-if="route.noKeepAlive"
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
/>
|
||||
></component>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
<component :is="Component" :key="route.fullPath"></component>
|
||||
</keep-alive>
|
||||
</template>
|
||||
</router-view>
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
v-if="route.noKeepAlive"
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
/>
|
||||
></component>
|
||||
<keep-alive v-else>
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
<component :is="Component" :key="route.fullPath"></component>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MainView />
|
||||
<MainView></MainView>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
@ -1,27 +1,38 @@
|
||||
<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="图形">
|
||||
<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>
|
||||
<n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
|
||||
<n-button size="small" @click="item.itemStyle.color = null">
|
||||
恢复默认
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
<n-input-number
|
||||
v-model:value="item.barWidth"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
/>
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="圆角">
|
||||
<n-input-number
|
||||
<n-input-number
|
||||
v-model:value="item.itemStyle.borderRadius"
|
||||
:min="0"
|
||||
size="small"
|
||||
/>
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
@ -29,7 +40,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
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'
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<VChart :theme="themeColor" :option="option" autoresize />
|
||||
<VChart :theme="themeColor" :option="option" autoresize></VChart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
|
||||
<SettingItemBox 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>
|
||||
<n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
|
||||
@ -14,14 +14,14 @@
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
/>
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="圆角">
|
||||
<n-input-number
|
||||
v-model:value="item.itemStyle.borderRadius"
|
||||
:min="0"
|
||||
size="small"
|
||||
/>
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<VChart :theme="themeColor" :option="option" autoresize />
|
||||
<VChart :theme="themeColor" :option="option" autoresize></VChart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -11,14 +11,14 @@
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color.colorStops[0].color"
|
||||
/>
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color.colorStops[1].color"
|
||||
/>
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
@ -27,21 +27,21 @@
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
/>
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
/>
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
/>
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="阴影" :alone="true">
|
||||
@ -50,7 +50,7 @@
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.shadowColor"
|
||||
/>
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
|
||||
</SettingItemBox>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<VChart :theme="themeColor" :option="option.options" autoresize />
|
||||
<VChart :theme="themeColor" :option="option.options" autoresize></VChart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<VChart :theme="themeColor" :option="option.options" autoresize />
|
||||
<VChart :theme="themeColor" :option="option.options" autoresize></VChart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<VChart :theme="themeColor" :option="option.options" autoresize />
|
||||
<VChart :theme="themeColor" :option="option.options" autoresize></VChart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<VChart :theme="themeColor" :option="option" autoresize />
|
||||
<VChart :theme="themeColor" :option="option" autoresize></VChart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { App } from 'vue'
|
||||
import { Skeleton } from '@/components/Skeleton'
|
||||
import { GoSkeleton } from '@/components/GoSkeleton'
|
||||
import { LoadingComponent } from '@/components/LoadingComponent'
|
||||
|
||||
/**
|
||||
@ -7,6 +7,6 @@ import { LoadingComponent } from '@/components/LoadingComponent'
|
||||
* @param app
|
||||
*/
|
||||
export function setupCustomComponents(app: App) {
|
||||
app.component('Skeleton', Skeleton)
|
||||
app.component('GoSkeleton', GoSkeleton)
|
||||
app.component('LoadingComponent', LoadingComponent)
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
class="go-cursor-pointer"
|
||||
@click="backHandle"
|
||||
>
|
||||
<ChevronBackOutlineIcon />
|
||||
<ChevronBackOutlineIcon></ChevronBackOutlineIcon>
|
||||
</n-icon>
|
||||
</n-space>
|
||||
</div>
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
:icon-size="16"
|
||||
:indent="18"
|
||||
@update:value="clickItemHandle"
|
||||
/>
|
||||
></n-menu>
|
||||
<div class="chart-content-list">
|
||||
<n-scrollbar>
|
||||
<ItemBox :menuOptions="packages.selectOptions" />
|
||||
<ItemBox :menuOptions="packages.selectOptions"></ItemBox>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon size="14" :depth="2">
|
||||
<BarChartIcon />
|
||||
<BarChartIcon></BarChartIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<!-- 图表 -->
|
||||
@ -22,20 +22,20 @@
|
||||
:icon-size="16"
|
||||
:indent="18"
|
||||
@update:value="clickItemHandle"
|
||||
/>
|
||||
></n-menu>
|
||||
<div class="menu-component-box">
|
||||
<Skeleton
|
||||
<GoSkeleton
|
||||
:load="!selectOptions"
|
||||
round
|
||||
text
|
||||
:repeat="2"
|
||||
style="width: 90%;"
|
||||
/>
|
||||
></GoSkeleton>
|
||||
<OptionContent
|
||||
v-if="selectOptions"
|
||||
:selectOptions="selectOptions"
|
||||
:key="selectValue"
|
||||
/>
|
||||
></OptionContent>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
v-for="colorItem in fetchShowColors(value.color)"
|
||||
:key="colorItem"
|
||||
:style="{ backgroundColor: colorItem }"
|
||||
/>
|
||||
></span>
|
||||
</div>
|
||||
<div
|
||||
class="theme-bottom"
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
v-model:value="canvasConfig.width"
|
||||
:validator="validator"
|
||||
@update:value="changeSizeHandle"
|
||||
/>
|
||||
></n-input-number>
|
||||
</n-form-item>
|
||||
<n-form-item label="高度">
|
||||
<n-input-number
|
||||
@ -16,7 +16,7 @@
|
||||
v-model:value="canvasConfig.height"
|
||||
:validator="validator"
|
||||
@update:value="changeSizeHandle"
|
||||
/>
|
||||
></n-input-number>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
:showPreview="true"
|
||||
:swatches="swatchesColors"
|
||||
v-model:value="canvasConfig.background"
|
||||
/>
|
||||
></n-color-picker>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-text>使用颜色</n-text>
|
||||
@ -63,7 +63,7 @@
|
||||
:round="false"
|
||||
:disabled="!canvasConfig.backgroundImage"
|
||||
:onUpdate="switchSelectColorHandle"
|
||||
/>
|
||||
></n-switch>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-text>背景</n-text>
|
||||
|
||||
@ -9,18 +9,18 @@
|
||||
placeholder="请输入图表名称"
|
||||
size="small"
|
||||
v-model:value="targetData.chartConfig.title"
|
||||
/>
|
||||
></n-input>
|
||||
</SettingItemBox>
|
||||
<!-- 尺寸 -->
|
||||
<SizeSetting :chartAttr="targetData.attr" />
|
||||
<SizeSetting :chartAttr="targetData.attr"></SizeSetting>
|
||||
<!-- 位置 -->
|
||||
<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>
|
||||
<!-- 全局设置 -->
|
||||
<GlobalSetting :optionData="targetData.option" :in-chart="true" />
|
||||
<GlobalSetting :optionData="targetData.option" :in-chart="true"></GlobalSetting>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<n-layout has-sider sider-placement="right">
|
||||
<n-layout-content>
|
||||
<!-- 图表拖拽区域 -->
|
||||
<ContentEdit />
|
||||
<ContentEdit></ContentEdit>
|
||||
</n-layout-content>
|
||||
<n-layout-sider
|
||||
collapse-mode="transform"
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
line['select'].has(item) && 'visible'
|
||||
]"
|
||||
:style="useComponentStyle(line['select'].get(item))"
|
||||
/>
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="go-edit-bottom">
|
||||
<EditHistory />
|
||||
<EditHistory></EditHistory>
|
||||
|
||||
<n-space class="bottom-ri">
|
||||
<!-- 快捷键提示 -->
|
||||
<n-popselect :options="shortcutKeyOptions" size="medium">
|
||||
<n-button class="scale-btn" quaternary size="mini">
|
||||
<n-icon class="lock-icon" size="18" :depth="2">
|
||||
<DicomOverlayIcon />
|
||||
<DicomOverlayIcon></DicomOverlayIcon>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</n-popselect>
|
||||
@ -20,7 +20,7 @@
|
||||
size="mini"
|
||||
:options="filterOptions"
|
||||
@update:value="selectHandle"
|
||||
/>
|
||||
></n-select>
|
||||
|
||||
<!-- 锁定缩放 -->
|
||||
<n-tooltip trigger="hover">
|
||||
@ -32,8 +32,8 @@
|
||||
size="18"
|
||||
:depth="2"
|
||||
>
|
||||
<LockClosedOutlineIcon v-if="lockScale" />
|
||||
<LockOpenOutlineIcon v-else />
|
||||
<LockClosedOutlineIcon v-if="lockScale"></LockClosedOutlineIcon>
|
||||
<LockOpenOutlineIcon v-else></LockOpenOutlineIcon>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</template>
|
||||
@ -52,7 +52,7 @@
|
||||
:disabled="lockScale"
|
||||
:marks="sliderMaks"
|
||||
@update:value="sliderHandle"
|
||||
/>
|
||||
></n-slider>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon size="21" :depth="3">
|
||||
<HelpOutlineIcon />
|
||||
<HelpOutlineIcon></HelpOutlineIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>最多只保留 20 条记录</span>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
>
|
||||
<slot></slot>
|
||||
<!-- 拖拽时的辅助线 -->
|
||||
<EditAlignLine />
|
||||
<EditAlignLine></EditAlignLine>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -8,15 +8,15 @@
|
||||
:key="index"
|
||||
:style="usePointStyle(point, index, item.attr, cursorResize)"
|
||||
@mousedown="useMousePointHandle($event, point, item.attr)"
|
||||
/>
|
||||
></div>
|
||||
|
||||
<!-- 选中 -->
|
||||
<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
|
||||
class="shape-modal-change"
|
||||
:class="{ selectActive: select, hoverActive: hover }"
|
||||
/>
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,13 +32,13 @@
|
||||
:themeSetting="themeSetting"
|
||||
:themeColor="themeColor"
|
||||
:style="useSizeStyle(item.attr)"
|
||||
/>
|
||||
></component>
|
||||
</EditShapeBox>
|
||||
</EditRange>
|
||||
</div>
|
||||
<!-- 底部控制 -->
|
||||
<template #bottom>
|
||||
<EditBottom />
|
||||
<EditBottom></EditBottom>
|
||||
</template>
|
||||
</ContentBox>
|
||||
</template>
|
||||
|
||||
@ -10,14 +10,14 @@
|
||||
preview-disabled
|
||||
:src="image"
|
||||
:fallback-src="requireErrorImg()"
|
||||
/>
|
||||
></n-image>
|
||||
<n-ellipsis>
|
||||
<n-text class="list-text">
|
||||
{{ props.componentData.chartConfig.title }}
|
||||
</n-text>
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<div :class="{ 'select-modal': select }" />
|
||||
<div :class="{ 'select-modal': select }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon size="16" :depth="2">
|
||||
<component :is="LayersIcon" />
|
||||
<component :is="LayersIcon"></component>
|
||||
</n-icon>
|
||||
</template>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
@mouseenter="mouseenterHandle(item)"
|
||||
@mouseleave="mouseleaveHandle(item)"
|
||||
@contextmenu="handleContextMenu($event)"
|
||||
/>
|
||||
></ListItem>
|
||||
</ContentBox>
|
||||
</template>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<n-button size="small" quaternary @click="goHomeHandle()">
|
||||
<template #icon>
|
||||
<n-icon :depth="3">
|
||||
<HomeIcon />
|
||||
<HomeIcon></HomeIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<n-space>
|
||||
<n-icon size="20" :depth="3">
|
||||
<FishIcon />
|
||||
<FishIcon></FishIcon>
|
||||
</n-icon>
|
||||
<n-text @click="handleFocus">
|
||||
工作空间 -
|
||||
@ -19,7 +19,7 @@
|
||||
placeholder="请输入项目名称"
|
||||
v-model:value.trim="title"
|
||||
@blur="handleBlur"
|
||||
/>
|
||||
></n-input>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
<n-layout>
|
||||
<HeaderPro>
|
||||
<template #left>
|
||||
<HeaderLeftBtn />
|
||||
<HeaderLeftBtn></HeaderLeftBtn>
|
||||
</template>
|
||||
<template #center>
|
||||
<HeaderTitle />
|
||||
<HeaderTitle></HeaderTitle>
|
||||
</template>
|
||||
<template #ri-left>
|
||||
<HeaderRightBtn />
|
||||
<HeaderRightBtn></HeaderRightBtn>
|
||||
</template>
|
||||
</HeaderPro>
|
||||
<n-layout-content content-style="overflow:hidden; display: flex">
|
||||
<ContentCharts />
|
||||
<ContentLayers />
|
||||
<ContentConfigurations />
|
||||
<ContentCharts></ContentCharts>
|
||||
<ContentLayers></ContentLayers>
|
||||
<ContentConfigurations></ContentConfigurations>
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
</div>
|
||||
@ -31,7 +31,7 @@
|
||||
:show="chartEditStore.getRightMenuShow"
|
||||
:on-clickoutside="onClickoutside"
|
||||
@select="handleMenuSelect"
|
||||
/>
|
||||
></n-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -15,13 +15,13 @@
|
||||
</transition-group>
|
||||
</aside>
|
||||
</div>
|
||||
<Header>
|
||||
<GoHeader>
|
||||
<template #left></template>
|
||||
<template #right>
|
||||
<LangSelect />
|
||||
<ThemeSelect />
|
||||
<LangSelect></LangSelect>
|
||||
<ThemeSelect></ThemeSelect>
|
||||
</template>
|
||||
</Header>
|
||||
</GoHeader>
|
||||
<div class="go-login">
|
||||
<div class="go-login-carousel">
|
||||
<n-carousel
|
||||
@ -63,7 +63,7 @@
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18">
|
||||
<PersonOutlineIcon />
|
||||
<PersonOutlineIcon></PersonOutlineIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
@ -77,7 +77,7 @@
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18">
|
||||
<LockClosedOutlineIcon />
|
||||
<LockClosedOutlineIcon></LockClosedOutlineIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
@ -109,7 +109,7 @@
|
||||
</div>
|
||||
|
||||
<div class="go-login-box-footer">
|
||||
<Footer />
|
||||
<GoFooter></GoFooter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -126,8 +126,8 @@ import { carouselInterval } from '@/settings/designSetting'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { ThemeSelect } from '@/components/ThemeSelect'
|
||||
import { LangSelect } from '@/components/LangSelect'
|
||||
import { Header } from '@/layout/components/Header'
|
||||
import { Footer } from '@/layout/components/Footer'
|
||||
import { GoHeader } from '@/layout/components/GoHeader'
|
||||
import { GoFooter } from '@/layout/components/GoFooter'
|
||||
import { PageEnum } from '@/enums/pageEnum'
|
||||
import { icon } from '@/plugins'
|
||||
import { StorageEnum } from '@/enums/storageEnum'
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
:chartConfig="item"
|
||||
:themeSetting="themeSetting"
|
||||
:themeColor="themeColor"
|
||||
/>
|
||||
></component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<!-- 展示层 -->
|
||||
<div :style="previewRefStyle" v-if="show">
|
||||
<!-- 渲染层 -->
|
||||
<RenderList :localStorageInfo="localStorageInfo" />
|
||||
<render-list :localStorageInfo="localStorageInfo"></render-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<div class="go-project">
|
||||
<n-layout has-sider position="absolute">
|
||||
<n-space vertical>
|
||||
<Sider />
|
||||
<Sider></Sider>
|
||||
</n-space>
|
||||
<n-layout>
|
||||
<HeaderPro />
|
||||
<HeaderPro></HeaderPro>
|
||||
<n-layout
|
||||
id="go-project-content-top"
|
||||
class="content-top"
|
||||
@ -14,7 +14,7 @@
|
||||
>
|
||||
<n-layout-content>
|
||||
<TransitionMain>
|
||||
<router-view />
|
||||
<router-view></router-view>
|
||||
</TransitionMain>
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
:hidden="['remove']"
|
||||
@close="deleteHanlde"
|
||||
@resize="resizeHandle"
|
||||
/>
|
||||
></MacOsControlBtn>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div class="list-content-img" @click="resizeHandle">
|
||||
@ -22,7 +22,7 @@
|
||||
"
|
||||
:alt="cardData.title"
|
||||
:fallback-src="requireErrorImg()"
|
||||
/>
|
||||
></n-image>
|
||||
</div>
|
||||
</div>
|
||||
<template #action>
|
||||
@ -37,7 +37,7 @@
|
||||
class="animation-twinkle"
|
||||
dot
|
||||
:color="cardData.release ? '#34c749' : '#fcbc40'"
|
||||
/>
|
||||
></n-badge>
|
||||
{{
|
||||
cardData.release
|
||||
? $t('project.release')
|
||||
@ -56,7 +56,7 @@
|
||||
>
|
||||
<n-button size="small">
|
||||
<template #icon>
|
||||
<component :is="item.icon" />
|
||||
<component :is="item.icon"></component>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
@ -66,7 +66,7 @@
|
||||
<template #trigger>
|
||||
<n-button size="small" @click="handleSelect(item.key)">
|
||||
<template #icon>
|
||||
<component :is="item.icon" />
|
||||
<component :is="item.icon"></component>
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
@ -7,12 +7,12 @@
|
||||
responsive="screen"
|
||||
>
|
||||
<n-grid-item v-for="(item, index) in list" :key="item.id">
|
||||
<Card
|
||||
<card
|
||||
:cardData="item"
|
||||
@resize="resizeHandle"
|
||||
@delete="deleteHandle($event, index)"
|
||||
@edit="editHandle"
|
||||
/>
|
||||
></card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</div>
|
||||
@ -22,7 +22,7 @@
|
||||
:cardData="modalData"
|
||||
@close="closeModal"
|
||||
@edit="editHandle"
|
||||
/>
|
||||
></ModalCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
:narrow="true"
|
||||
:hidden="['close']"
|
||||
@remove="closeHandle"
|
||||
/>
|
||||
></MacOsControlBtn>
|
||||
</n-space>
|
||||
<!-- 中间 -->
|
||||
<div class="list-content-img">
|
||||
@ -37,7 +37,7 @@
|
||||
<n-space class="list-footer" justify="space-between">
|
||||
<n-text depth="3">
|
||||
{{ $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-space>
|
||||
@ -46,7 +46,7 @@
|
||||
class="animation-twinkle"
|
||||
dot
|
||||
:color="cardData?.release ? '#34c749' : '#fcbc40'"
|
||||
/>
|
||||
></n-badge>
|
||||
{{
|
||||
cardData?.release
|
||||
? $t('project.release')
|
||||
@ -59,7 +59,7 @@
|
||||
<template #trigger>
|
||||
<n-button size="small" @click="handleSelect(item.key)">
|
||||
<template #icon>
|
||||
<component :is="item.icon" />
|
||||
<component :is="item.icon"></component>
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="go-project-items">
|
||||
<List />
|
||||
<List></List>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<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-tooltip v-if="collapsed" placement="right" trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button secondary @click="handleDoc">
|
||||
<template #icon>
|
||||
<n-icon size="18">
|
||||
<HelpOutlineIcon />
|
||||
<HelpOutlineIcon></HelpOutlineIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
@ -20,7 +20,7 @@
|
||||
<n-button v-else secondary @click="handleDoc">
|
||||
<template #icon>
|
||||
<n-icon size="18">
|
||||
<HelpOutlineIcon />
|
||||
<HelpOutlineIcon></HelpOutlineIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-text>{{ $t('global.help') }}</n-text>
|
||||
@ -31,7 +31,7 @@
|
||||
<n-button secondary @click="handleDoc">
|
||||
<template #icon>
|
||||
<n-icon size="18">
|
||||
<CodeSlashIcon />
|
||||
<CodeSlashIcon></CodeSlashIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
@ -44,7 +44,7 @@
|
||||
<n-button v-else secondary @click="handleCode">
|
||||
<template #icon>
|
||||
<n-icon size="18">
|
||||
<CodeSlashIcon />
|
||||
<CodeSlashIcon></CodeSlashIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-text v-show="!collapsed">{{ $t('global.code_addr') }}</n-text>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<template #header-extra>
|
||||
<n-text @click="closeHandle">
|
||||
<n-icon size="20">
|
||||
<component :is="CloseIcon" />
|
||||
<component :is="CloseIcon"></component>
|
||||
</n-icon>
|
||||
</n-text>
|
||||
</template>
|
||||
@ -23,7 +23,7 @@
|
||||
<component :is="item.title"></component>
|
||||
<template #icon>
|
||||
<n-icon size="18">
|
||||
<component :is="item.icon" />
|
||||
<component :is="item.icon"></component>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
<n-button ghost type="primary" size="small">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
|
||||
<DuplicateIcon v-show="!designStore.getDarkTheme" />
|
||||
<DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
|
||||
<DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateOutlineIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
@ -18,8 +18,8 @@
|
||||
<n-button v-else ghost type="primary">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
|
||||
<DuplicateIcon v-show="!designStore.getDarkTheme" />
|
||||
<DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
|
||||
<DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateOutlineIcon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>
|
||||
@ -27,7 +27,7 @@
|
||||
</span>
|
||||
</n-button>
|
||||
</div>
|
||||
<CreateModal :show="modalShow" @close="closeHandle" />
|
||||
<CreateModal :show="modalShow" @close="closeHandle"></CreateModal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import Header from './index.vue'
|
||||
import GoHeader from './index.vue'
|
||||
|
||||
export { Header }
|
||||
export { GoHeader }
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<Header>
|
||||
<go-header>
|
||||
<template #ri-left>
|
||||
</template>
|
||||
<template #ri-right>
|
||||
<UserInfo />
|
||||
<user-info></user-info>
|
||||
</template>
|
||||
</Header>
|
||||
</go-header>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Header } from '@/layout/components/Header'
|
||||
import { GoHeader } from '@/layout/components/GoHeader'
|
||||
import { UserInfo } from '@/components/UserInfo'
|
||||
</script>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<div class="go-project-sider-flex">
|
||||
<aside>
|
||||
<n-space vertical class="go-project-sider-top">
|
||||
<Create :collapsed="collapsed" />
|
||||
<Create :collapsed="collapsed"></Create>
|
||||
</n-space>
|
||||
<n-menu
|
||||
:value="menuValue"
|
||||
@ -22,11 +22,11 @@
|
||||
:collapsed-width="getAsideCollapsedWidth"
|
||||
:collapsed-icon-size="22"
|
||||
:default-expanded-keys="defaultExpandedKeys"
|
||||
/>
|
||||
></n-menu>
|
||||
</aside>
|
||||
<!-- 底部提示 -->
|
||||
<div class="sider-bottom">
|
||||
<AsideFooter :collapsed="collapsed" />
|
||||
<AsideFooter :collapsed="collapsed"></AsideFooter>
|
||||
</div>
|
||||
</div>
|
||||
</n-layout-sider>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
height="300"
|
||||
preview-disabled
|
||||
:src="requireErrorImg()"
|
||||
/>
|
||||
></n-image>
|
||||
<n-h3>暂时还没有东西呢</n-h3>
|
||||
</n-space>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="go-project-template-market">
|
||||
<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-space>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user