chenjunyi/cdTestPlant3
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

修复说明reuse文件夹图片丢失问题

Browse Source
This commit is contained in:
管理员
2026-04-16 17:29:40 +08:00
parent 96bd1bdf9a
commit d1b5fdcdd3
6 changed files with 676 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

526
cdTMP/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
cdTMP/package.json
View File

@@ -13,29 +13,29 @@
"dependencies": {
"@arco-design/color": "^0.4.0",
"@arco-design/web-vue": "^2.57.0",
"@tanstack/vue-query": "^5.95.2",
"@tanstack/vue-query": "^5.99.0",
"@tinymce/tinymce-vue": "^6.3.0",
"@vueuse/core": "^14.2.1",
"axios": "^1.13.6",
"axios": "^1.15.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"dayjs": "^1.11.20",
"file2md5": "^1.3.0",
"lodash-es": "^4.17.23",
"lodash-es": "^4.18.1",
"mammoth": "^1.12.0",
"mitt": "^3.0.1",
"nprogress": "^0.2.0",
"pinia": "^3.0.4",
"pinyin-match": "^1.2.10",
"postcss-import": "^16.1.1",
"qs": "^6.15.0",
"qs": "^6.15.1",
"tailwind-merge": "^3.5.0",
"tinymce": "^7.9.1",
"tw-animate-css": "^1.4.0",
"vue": "^3.5.31",
"vue": "^3.5.32",
"vue-clipboard3": "^2.0.0",
"vue-color-kit": "^1.0.6",
"vue-data-ui": "^3.16.5",
"vue-data-ui": "^3.17.13",
"vue-router": "^5.0.4",
"vuedraggable": "^2.24.3"
},
@@ -43,23 +43,23 @@
"@tailwindcss/postcss": "^4.2.2",
"@tailwindcss/vite": "^4.2.2",
"@types/lodash-es": "^4.17.12",
"@types/node": "^25.5.0",
"@types/node": "^25.6.0",
"@types/nprogress": "^0.2.3",
"@types/qs": "^6.15.0",
"@vitejs/plugin-vue": "^6.0.5",
"@vitejs/plugin-vue": "^6.0.6",
"@vitejs/plugin-vue-jsx": "^5.1.5",
"@vue/babel-plugin-jsx": "^2.0.1",
"browserslist": "^4.28.1",
"eslint": "^10.1.0",
"browserslist": "^4.28.2",
"eslint": "^10.2.0",
"eslint-plugin-vue": "^10.8.0",
"less": "^4.6.4",
"less-loader": "^12.3.2",
"postcss": "^8.5.8",
"prettier": "^3.8.1",
"postcss": "^8.5.10",
"prettier": "^3.8.3",
"rollup-plugin-visualizer": "^7.0.1",
"tailwindcss": "^4.2.2",
"typescript": "^6.0.2",
"vite": "^8.0.3",
"vite": "^8.0.8",
"vue-eslint-parser": "^10.4.0"
}
}

162
cdTMP/src/components/ai-button/index.vue
View File

@@ -1,81 +1,81 @@
<style scoped>
button {
position: relative;
padding: 10px 20px;
border-radius: 0px;
border: 1px solid rgb(61, 106, 255);
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
background: transparent;
color: rgb(61, 106, 255);
overflow: hidden;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
button:hover {
background: rgb(61, 106, 255);
box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
color: #fff;
cursor: pointer;
}
button:hover::before {
-webkit-animation: sh02 0.5s 0s linear;
-moz-animation: sh02 0.5s 0s linear;
animation: sh02 0.5s 0s linear;
}
button::before {
content: "";
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #fff;
box-shadow: 0 0 50px 30px #fff;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
@keyframes sh02 {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
</style>
<template>
<button>AI生成测试项</button>
</template>
<style scoped>
button {
position: relative;
padding: 10px 20px;
border-radius: 0px;
border: 1px solid rgb(61, 106, 255);
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
background: transparent;
color: rgb(61, 106, 255);
overflow: hidden;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
button:hover {
background: rgb(61, 106, 255);
box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
color: #fff;
cursor: pointer;
}
button:hover::before {
-webkit-animation: sh02 0.5s 0s linear;
-moz-animation: sh02 0.5s 0s linear;
animation: sh02 0.5s 0s linear;
}
button::before {
content: "";
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #fff;
box-shadow: 0 0 50px 30px #fff;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
@keyframes sh02 {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
</style>
<template>
<button>AI生成测试项</button>
</template>

483
cdTMP/src/components/ui/particles-bg/ParticlesBg.vue
View File

@@ -1,250 +1,233 @@
<template>
<div
ref="canvasContainerRef"
:class="$props.class"
aria-hidden="true"
>
<canvas ref="canvasRef"></canvas>
</div>
</template>
<script setup lang="ts">
import { useMouse, useDevicePixelRatio } from '@vueuse/core';
import { ref, onMounted, onBeforeUnmount, watch, computed, reactive } from 'vue';
type Circle = {
x: number;
y: number;
translateX: number;
translateY: number;
size: number;
alpha: number;
targetAlpha: number;
dx: number;
dy: number;
magnetism: number;
};
type Props = {
color?: string;
quantity?: number;
staticity?: number;
ease?: number;
class?: string;
};
const props = withDefaults(defineProps<Props>(), {
color: '#FFF',
quantity: 100,
staticity: 50,
ease: 50,
class: '',
});
const canvasRef = ref<HTMLCanvasElement | null>(null);
const canvasContainerRef = ref<HTMLDivElement | null>(null);
const context = ref<CanvasRenderingContext2D | null>(null);
const circles = ref<Circle[]>([]);
const mouse = reactive<{ x: number; y: number }>({ x: 0, y: 0 });
const canvasSize = reactive<{ w: number; h: number }>({ w: 0, h: 0 });
const { x: mouseX, y: mouseY } = useMouse();
const { pixelRatio } = useDevicePixelRatio();
const color = computed(() => {
// Remove the leading '#' if it's present
let hex = props.color.replace(/^#/, '');
// If the hex code is 3 characters, expand it to 6 characters
if (hex.length === 3) {
hex = hex
.split('')
.map((char) => char + char)
.join('');
}
// Parse the r, g, b values from the hex string
const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255; // Extract the red component
const g = (bigint >> 8) & 255; // Extract the green component
const b = bigint & 255; // Extract the blue component
// Return the RGB values as a string separated by spaces
return `${r} ${g} ${b}`;
});
onMounted(() => {
if (canvasRef.value) {
context.value = canvasRef.value.getContext('2d');
}
initCanvas();
animate();
window.addEventListener('resize', initCanvas);
});
onBeforeUnmount(() => {
window.removeEventListener('resize', initCanvas);
});
watch([mouseX, mouseY], () => {
onMouseMove();
});
function initCanvas() {
resizeCanvas();
drawParticles();
}
function onMouseMove() {
if (canvasRef.value) {
const rect = canvasRef.value.getBoundingClientRect();
const { w, h } = canvasSize;
const x = mouseX.value - rect.left - w / 2;
const y = mouseY.value - rect.top - h / 2;
const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
if (inside) {
mouse.x = x;
mouse.y = y;
}
}
}
function resizeCanvas() {
if (canvasContainerRef.value && canvasRef.value && context.value) {
circles.value.length = 0;
canvasSize.w = canvasContainerRef.value.offsetWidth;
canvasSize.h = canvasContainerRef.value.offsetHeight;
canvasRef.value.width = canvasSize.w * pixelRatio.value;
canvasRef.value.height = canvasSize.h * pixelRatio.value;
canvasRef.value.style.width = canvasSize.w + 'px';
canvasRef.value.style.height = canvasSize.h + 'px';
context.value.scale(pixelRatio.value, pixelRatio.value);
}
}
function circleParams(): Circle {
const x = Math.floor(Math.random() * canvasSize.w);
const y = Math.floor(Math.random() * canvasSize.h);
const translateX = 0;
const translateY = 0;
const size = Math.floor(Math.random() * 2) + 1;
const alpha = 0;
const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
const dx = (Math.random() - 0.5) * 0.2;
const dy = (Math.random() - 0.5) * 0.2;
const magnetism = 0.1 + Math.random() * 4;
return {
x,
y,
translateX,
translateY,
size,
alpha,
targetAlpha,
dx,
dy,
magnetism,
};
}
function drawCircle(circle: Circle, update = false) {
if (context.value) {
const { x, y, translateX, translateY, size, alpha } = circle;
context.value.translate(translateX, translateY);
context.value.beginPath();
context.value.arc(x, y, size, 0, 2 * Math.PI);
context.value.fillStyle = `rgba(${color.value.split(' ').join(', ')}, ${alpha})`;
context.value.fill();
context.value.setTransform(pixelRatio.value, 0, 0, pixelRatio.value, 0, 0);
if (!update) {
circles.value.push(circle);
}
}
}
function clearContext() {
if (context.value) {
context.value.clearRect(0, 0, canvasSize.w, canvasSize.h);
}
}
function drawParticles() {
clearContext();
const particleCount = props.quantity;
for (let i = 0; i < particleCount; i++) {
const circle = circleParams();
drawCircle(circle);
}
}
function remapValue(
value: number,
start1: number,
end1: number,
start2: number,
end2: number,
): number {
const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
return remapped > 0 ? remapped : 0;
}
function animate() {
clearContext();
circles.value.forEach((circle, i) => {
// Handle the alpha value
const edge = [
circle.x + circle.translateX - circle.size, // distance from left edge
canvasSize.w - circle.x - circle.translateX - circle.size, // distance from right edge
circle.y + circle.translateY - circle.size, // distance from top edge
canvasSize.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
];
const closestEdge = edge.reduce((a, b) => Math.min(a, b));
const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2));
if (remapClosestEdge > 1) {
circle.alpha += 0.02;
if (circle.alpha > circle.targetAlpha) circle.alpha = circle.targetAlpha;
} else {
circle.alpha = circle.targetAlpha * remapClosestEdge;
}
circle.x += circle.dx;
circle.y += circle.dy;
circle.translateX +=
(mouse.x / (props.staticity / circle.magnetism) - circle.translateX) / props.ease;
circle.translateY +=
(mouse.y / (props.staticity / circle.magnetism) - circle.translateY) / props.ease;
// circle gets out of the canvas
if (
circle.x < -circle.size ||
circle.x > canvasSize.w + circle.size ||
circle.y < -circle.size ||
circle.y > canvasSize.h + circle.size
) {
// remove the circle from the array
circles.value.splice(i, 1);
// create a new circle
const newCircle = circleParams();
drawCircle(newCircle);
// update the circle position
} else {
drawCircle(
{
...circle,
x: circle.x,
y: circle.y,
translateX: circle.translateX,
translateY: circle.translateY,
alpha: circle.alpha,
},
true,
);
}
});
window.requestAnimationFrame(animate);
}
</script>
<template>
<div ref="canvasContainerRef" :class="$props.class" aria-hidden="true">
<canvas ref="canvasRef"></canvas>
</div>
</template>
<script setup lang="ts">
import { useMouse, useDevicePixelRatio } from "@vueuse/core"
import { ref, onMounted, onBeforeUnmount, watch, computed, reactive } from "vue"
type Circle = {
x: number
y: number
translateX: number
translateY: number
size: number
alpha: number
targetAlpha: number
dx: number
dy: number
magnetism: number
}
type Props = {
color?: string
quantity?: number
staticity?: number
ease?: number
class?: string
}
const props = withDefaults(defineProps<Props>(), {
color: "#FFF",
quantity: 100,
staticity: 50,
ease: 50,
class: ""
})
const canvasRef = ref<HTMLCanvasElement | null>(null)
const canvasContainerRef = ref<HTMLDivElement | null>(null)
const context = ref<CanvasRenderingContext2D | null>(null)
const circles = ref<Circle[]>([])
const mouse = reactive<{ x: number; y: number }>({ x: 0, y: 0 })
const canvasSize = reactive<{ w: number; h: number }>({ w: 0, h: 0 })
const { x: mouseX, y: mouseY } = useMouse()
const { pixelRatio } = useDevicePixelRatio()
const color = computed(() => {
// Remove the leading '#' if it's present
let hex = props.color.replace(/^#/, "")
// If the hex code is 3 characters, expand it to 6 characters
if (hex.length === 3) {
hex = hex
.split("")
.map((char) => char + char)
.join("")
}
// Parse the r, g, b values from the hex string
const bigint = parseInt(hex, 16)
const r = (bigint >> 16) & 255 // Extract the red component
const g = (bigint >> 8) & 255 // Extract the green component
const b = bigint & 255 // Extract the blue component
// Return the RGB values as a string separated by spaces
return `${r} ${g} ${b}`
})
onMounted(() => {
if (canvasRef.value) {
context.value = canvasRef.value.getContext("2d")
}
initCanvas()
animate()
window.addEventListener("resize", initCanvas)
})
onBeforeUnmount(() => {
window.removeEventListener("resize", initCanvas)
})
watch([mouseX, mouseY], () => {
onMouseMove()
})
function initCanvas() {
resizeCanvas()
drawParticles()
}
function onMouseMove() {
if (canvasRef.value) {
const rect = canvasRef.value.getBoundingClientRect()
const { w, h } = canvasSize
const x = mouseX.value - rect.left - w / 2
const y = mouseY.value - rect.top - h / 2
const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2
if (inside) {
mouse.x = x
mouse.y = y
}
}
}
function resizeCanvas() {
if (canvasContainerRef.value && canvasRef.value && context.value) {
circles.value.length = 0
canvasSize.w = canvasContainerRef.value.offsetWidth
canvasSize.h = canvasContainerRef.value.offsetHeight
canvasRef.value.width = canvasSize.w * pixelRatio.value
canvasRef.value.height = canvasSize.h * pixelRatio.value
canvasRef.value.style.width = canvasSize.w + "px"
canvasRef.value.style.height = canvasSize.h + "px"
context.value.scale(pixelRatio.value, pixelRatio.value)
}
}
function circleParams(): Circle {
const x = Math.floor(Math.random() * canvasSize.w)
const y = Math.floor(Math.random() * canvasSize.h)
const translateX = 0
const translateY = 0
const size = Math.floor(Math.random() * 2) + 1
const alpha = 0
const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1))
const dx = (Math.random() - 0.5) * 0.2
const dy = (Math.random() - 0.5) * 0.2
const magnetism = 0.1 + Math.random() * 4
return {
x,
y,
translateX,
translateY,
size,
alpha,
targetAlpha,
dx,
dy,
magnetism
}
}
function drawCircle(circle: Circle, update = false) {
if (context.value) {
const { x, y, translateX, translateY, size, alpha } = circle
context.value.translate(translateX, translateY)
context.value.beginPath()
context.value.arc(x, y, size, 0, 2 * Math.PI)
context.value.fillStyle = `rgba(${color.value.split(" ").join(", ")}, ${alpha})`
context.value.fill()
context.value.setTransform(pixelRatio.value, 0, 0, pixelRatio.value, 0, 0)
if (!update) {
circles.value.push(circle)
}
}
}
function clearContext() {
if (context.value) {
context.value.clearRect(0, 0, canvasSize.w, canvasSize.h)
}
}
function drawParticles() {
clearContext()
const particleCount = props.quantity
for (let i = 0; i < particleCount; i++) {
const circle = circleParams()
drawCircle(circle)
}
}
function remapValue(value: number, start1: number, end1: number, start2: number, end2: number): number {
const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
return remapped > 0 ? remapped : 0
}
function animate() {
clearContext()
circles.value.forEach((circle, i) => {
// Handle the alpha value
const edge = [
circle.x + circle.translateX - circle.size, // distance from left edge
canvasSize.w - circle.x - circle.translateX - circle.size, // distance from right edge
circle.y + circle.translateY - circle.size, // distance from top edge
canvasSize.h - circle.y - circle.translateY - circle.size // distance from bottom edge
]
const closestEdge = edge.reduce((a, b) => Math.min(a, b))
const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2))
if (remapClosestEdge > 1) {
circle.alpha += 0.02
if (circle.alpha > circle.targetAlpha) circle.alpha = circle.targetAlpha
} else {
circle.alpha = circle.targetAlpha * remapClosestEdge
}
circle.x += circle.dx
circle.y += circle.dy
circle.translateX += (mouse.x / (props.staticity / circle.magnetism) - circle.translateX) / props.ease
circle.translateY += (mouse.y / (props.staticity / circle.magnetism) - circle.translateY) / props.ease
// circle gets out of the canvas
if (circle.x < -circle.size || circle.x > canvasSize.w + circle.size || circle.y < -circle.size || circle.y > canvasSize.h + circle.size) {
// remove the circle from the array
circles.value.splice(i, 1)
// create a new circle
const newCircle = circleParams()
drawCircle(newCircle)
// update the circle position
} else {
drawCircle(
{
...circle,
x: circle.x,
y: circle.y,
translateX: circle.translateX,
translateY: circle.translateY,
alpha: circle.alpha
},
true
)
}
})
window.requestAnimationFrame(animate)
}
</script>

117
cdTMP/src/views/dashboard/workplace/components/cpns/hooks/vueDataUI.ts
View File

@@ -2,12 +2,10 @@ import { Ref, computed } from "vue"
import { storeToRefs } from "pinia"
import { useAppStore } from "@/store"
// 单个每月项目数量对象格式
interface IData {
mouth: string
count: number
}
// 响应.data的数据格式
interface ResData {
data: IData[]
}
@@ -15,7 +13,8 @@ interface ResData {
function useVueDataUI(data: Ref<ResData>) {
const appStore = useAppStore()
const { theme } = storeToRefs(appStore)
// 结构pinia储存的主体响应式变量
// 基础数据集
const initialData = [
{
name: "项目数量",
@@ -27,36 +26,38 @@ function useVueDataUI(data: Ref<ResData>) {
smooth: true
}
]
const chartData = computed<any[]>(() => {
const chartData = computed(() => {
if (data.value) {
const countData = data.value.data.map((it) => it.count)
initialData[0].series = countData
// 注意：这里直接修改了 initialData[0].series，为避免副作用，建议每次返回新对象
return [
{
...initialData[0],
series: countData
}
]
}
return initialData
})
// 暗黑模式识别(这是存在pinia的)
const darkMode = document.body.getAttribute("arco-theme")
const initialConfig = {
theme: darkMode === "dark" ? "celebrationNight" : "",
// 基础配置（不包含颜色相关部分）
const baseConfig = {
responsive: false,
customPalette: [],
downsample: { threshold: 500 },
chart: {
fontFamily: "inherit",
backgroundColor: "#FFFFFFff",
color: "#1A1A1Aff",
height: 300,
width: 1200,
padding: { top: 36, right: 24, bottom: 48, left: 48 },
highlighter: { color: "#1A1A1Aff", opacity: 5, useLine: false, lineDasharray: 2, lineWidth: 1 },
highlighter: { opacity: 5, useLine: false, lineDasharray: 2, lineWidth: 1 },
grid: {
stroke: "#e1e5e8ff",
showVerticalLines: false,
showHorizontalLines: false,
position: "middle",
frame: {
show: false,
stroke: "#E1E5E8ff",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
@@ -64,7 +65,6 @@ function useVueDataUI(data: Ref<ResData>) {
},
labels: {
show: true,
color: "#1A1A1Aff",
fontSize: 12,
axis: { yLabel: "", yLabelOffsetX: 0, xLabel: "", xLabelOffsetY: 14, fontSize: 12 },
zeroLine: { show: true },
@@ -81,22 +81,8 @@ function useVueDataUI(data: Ref<ResData>) {
scaleMax: 20
},
xAxisLabels: {
color: "#1A1A1Aff",
show: true,
values: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
values: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
fontSize: 12,
showOnlyFirstAndLast: false,
showOnlyAtModulo: false,
@@ -108,26 +94,22 @@ function useVueDataUI(data: Ref<ResData>) {
},
comments: { show: true, showInTooltip: true, width: 200, offsetX: 0, offsetY: 0 },
labels: { fontSize: 10, prefix: "", suffix: "" },
legend: { color: "#1A1A1Aff", show: false, fontSize: 16 },
legend: { show: false, fontSize: 16 },
title: {
text: "项目每月统计",
color: "#1A1A1Aff",
fontSize: 18,
bold: true,
textAlign: "left",
paddingLeft: 5,
paddingRight: 0,
subtitle: { color: "#CCCCCCff", text: "", fontSize: 16, bold: false },
subtitle: { text: "", fontSize: 16, bold: false },
show: true
},
tooltip: {
show: true,
color: "#1A1A1Aff",
backgroundColor: "#FFFFFFff",
fontSize: 14,
customFormat: null,
borderRadius: 4,
borderColor: "#e1e5e8",
borderWidth: 1,
backgroundOpacity: 30,
position: "center",
@@ -170,16 +152,73 @@ function useVueDataUI(data: Ref<ResData>) {
},
showTable: false
}
const chartConfig = computed(() => {
const isDark = theme.value === "dark"
// 计算 Y 轴最大值
let scaleMax = 10
if (data.value) {
const countData = data.value.data.map((it) => it.count)
initialConfig.chart.grid.labels.yAxis.scaleMax = Math.max(...countData) ? Math.max(...countData) : 10
scaleMax = Math.max(...countData) || 10
}
// 动态生成颜色相关配置
return {
...initialConfig,
theme: theme.value === "dark" ? "celebrationNight" : ""
...baseConfig,
// 不设置 theme，完全自定义
chart: {
...baseConfig.chart,
// 背景色
backgroundColor: isDark ? "#1A1A1Aff" : "#FFFFFFff",
// 全局文字颜色
color: isDark ? "#FFFFFFFF" : "#1A1A1Aff",
highlighter: {
...baseConfig.chart.highlighter,
color: isDark ? "#FFFFFFFF" : "#1A1A1Aff"
},
grid: {
...baseConfig.chart.grid,
stroke: isDark ? "#444444ff" : "#e1e5e8ff",
frame: {
...baseConfig.chart.grid.frame,
stroke: isDark ? "#444444ff" : "#E1E5E8ff"
},
labels: {
...baseConfig.chart.grid.labels,
color: isDark ? "#FFFFFFFF" : "#1A1A1Aff",
yAxis: {
...baseConfig.chart.grid.labels.yAxis,
scaleMax
},
xAxisLabels: {
...baseConfig.chart.grid.labels.xAxisLabels,
color: isDark ? "#FFFFFFFF" : "#1A1A1Aff"
}
}
},
legend: {
...baseConfig.chart.legend,
color: isDark ? "#FFFFFFFF" : "#1A1A1Aff"
},
title: {
...baseConfig.chart.title,
color: isDark ? "#FFFFFFFF" : "#1A1A1Aff",
subtitle: {
...baseConfig.chart.title.subtitle,
color: isDark ? "#AAAAAAff" : "#CCCCCCff"
}
},
tooltip: {
...baseConfig.chart.tooltip,
color: isDark ? "#FFFFFFFF" : "#1A1A1Aff",
backgroundColor: isDark ? "#333333ff" : "#FFFFFFff",
borderColor: isDark ? "#555555ff" : "#e1e5e8"
}
}
}
})
return { chartData, chartConfig }
}

4
cdTMP/src/views/dashboard/workplace/components/cpns/st-project-chart.vue
View File

@@ -3,7 +3,7 @@
<a-spin class="chartContainer" :loading="isPending" tip="图标数据加载中...">
<div class="flex justify-center items-center" v-if="!isPending">
<template v-if="isError">
<img class="w-[200px] h-[300px]" src="@/assets/img/ErrorLoad.svg" alt="" />
<img class="w-50 h-75" src="@/assets/img/ErrorLoad.svg" alt="" />
</template>
<template v-else>
<VueUiXy :dataset="chartData" :config="chartConfig" :style="{ padding: '10px' }" />
@@ -28,6 +28,8 @@ const { isPending, data, isError } = useQuery({
// vue-data-ui图表
const { chartData, chartConfig } = useVueDataUI(data)
// 暗黑模式配置
</script>
<style lang="less" scoped>