mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
fix: 修改闭合组件不规范的问题
This commit is contained in:
MTrun
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user