refactor: standardize code formatting and linting configuration

- Replace .eslintrc.js with .eslintrc.cjs for better ES module compatibility
- Add .prettierrc configuration for consistent code formatting
- Update package.json with new lint and format scripts
- Add nodemon.json for development hot reloading configuration
- Standardize code formatting across all JavaScript and Vue files
- Update web admin SPA with improved linting rules and formatting
- Add prettier configuration to web admin SPA

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
千羽
2025-08-07 18:19:31 +09:00
parent 4a0eba117c
commit 8a74bf5afe
124 changed files with 20878 additions and 18757 deletions

View File

@@ -1,66 +1,45 @@
<template>
<div class="glass-strong rounded-3xl p-6">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
<h2 class="text-xl font-bold text-gray-800 flex items-center">
<div class="mb-6 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
<h2 class="flex items-center text-xl font-bold text-gray-800">
<i class="fas fa-robot mr-2 text-purple-500" />
模型使用分布
</h2>
<el-radio-group
v-model="modelPeriod"
size="small"
@change="handlePeriodChange"
>
<el-radio-button label="daily">
今日
</el-radio-button>
<el-radio-button label="total">
累计
</el-radio-button>
<el-radio-group v-model="modelPeriod" size="small" @change="handlePeriodChange">
<el-radio-button label="daily"> 今日 </el-radio-button>
<el-radio-button label="total"> 累计 </el-radio-button>
</el-radio-group>
</div>
<div
v-if="dashboardStore.dashboardModelStats.length === 0"
class="text-center py-12 text-gray-500"
class="py-12 text-center text-gray-500"
>
<i class="fas fa-chart-pie text-4xl mb-3 opacity-30" />
<i class="fas fa-chart-pie mb-3 text-4xl opacity-30" />
<p>暂无模型使用数据</p>
</div>
<div
v-else
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
>
<div v-else class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<!-- 饼图 -->
<div
class="relative"
style="height: 300px;"
>
<div class="relative" style="height: 300px">
<canvas ref="chartCanvas" />
</div>
<!-- 数据列表 -->
<div class="space-y-3">
<div
v-for="(stat, index) in sortedStats"
:key="stat.model"
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
:key="stat.model"
class="flex items-center justify-between rounded-lg bg-gray-50 p-3"
>
<div class="flex items-center gap-3">
<div
class="w-4 h-4 rounded"
:style="`background-color: ${getColor(index)}`"
/>
<div class="h-4 w-4 rounded" :style="`background-color: ${getColor(index)}`" />
<span class="font-medium text-gray-700">{{ stat.model }}</span>
</div>
<div class="text-right">
<p class="font-semibold text-gray-800">
{{ formatNumber(stat.requests) }} 请求
</p>
<p class="text-sm text-gray-500">
{{ formatNumber(stat.totalTokens) }} tokens
</p>
<p class="font-semibold text-gray-800">{{ formatNumber(stat.requests) }} 请求</p>
<p class="text-sm text-gray-500">{{ formatNumber(stat.totalTokens) }} tokens</p>
</div>
</div>
</div>
@@ -93,23 +72,25 @@ const getColor = (index) => {
const createChart = () => {
if (!chartCanvas.value || !dashboardStore.dashboardModelStats.length) return
if (chart) {
chart.destroy()
}
const { colorSchemes } = useChartConfig()
const colors = colorSchemes.primary
chart = new Chart(chartCanvas.value, {
type: 'doughnut',
data: {
labels: sortedStats.value.map(stat => stat.model),
datasets: [{
data: sortedStats.value.map(stat => stat.requests),
backgroundColor: sortedStats.value.map((_, index) => colors[index % colors.length]),
borderWidth: 0
}]
labels: sortedStats.value.map((stat) => stat.model),
datasets: [
{
data: sortedStats.value.map((stat) => stat.requests),
backgroundColor: sortedStats.value.map((_, index) => colors[index % colors.length]),
borderWidth: 0
}
]
},
options: {
responsive: true,
@@ -120,9 +101,13 @@ const createChart = () => {
},
tooltip: {
callbacks: {
label: function(context) {
label: function (context) {
const stat = sortedStats.value[context.dataIndex]
const percentage = ((stat.requests / dashboardStore.dashboardModelStats.reduce((sum, s) => sum + s.requests, 0)) * 100).toFixed(1)
const percentage = (
(stat.requests /
dashboardStore.dashboardModelStats.reduce((sum, s) => sum + s.requests, 0)) *
100
).toFixed(1)
return [
`${stat.model}: ${percentage}%`,
`请求: ${formatNumber(stat.requests)}`,
@@ -141,9 +126,13 @@ const handlePeriodChange = async () => {
createChart()
}
watch(() => dashboardStore.dashboardModelStats, () => {
createChart()
}, { deep: true })
watch(
() => dashboardStore.dashboardModelStats,
() => {
createChart()
},
{ deep: true }
)
onMounted(() => {
createChart()
@@ -158,4 +147,4 @@ onUnmounted(() => {
<style scoped>
/* 组件特定样式 */
</style>
</style>

View File

@@ -1,25 +1,17 @@
<template>
<div class="glass-strong rounded-3xl p-6 mb-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
<h2 class="text-xl font-bold text-gray-800 flex items-center">
<div class="glass-strong mb-8 rounded-3xl p-6">
<div class="mb-6 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
<h2 class="flex items-center text-xl font-bold text-gray-800">
<i class="fas fa-chart-area mr-2 text-blue-500" />
使用趋势
</h2>
<div class="flex items-center gap-3">
<el-radio-group
v-model="granularity"
size="small"
@change="handleGranularityChange"
>
<el-radio-button label="day">
按天
</el-radio-button>
<el-radio-button label="hour">
按小时
</el-radio-button>
<el-radio-group v-model="granularity" size="small" @change="handleGranularityChange">
<el-radio-button label="day"> 按天 </el-radio-button>
<el-radio-button label="hour"> 按小时 </el-radio-button>
</el-radio-group>
<el-select
v-model="trendPeriod"
size="small"
@@ -35,11 +27,8 @@
</el-select>
</div>
</div>
<div
class="relative"
style="height: 300px;"
>
<div class="relative" style="height: 300px">
<canvas ref="chartCanvas" />
</div>
</div>
@@ -66,15 +55,15 @@ const periodOptions = [
const createChart = () => {
if (!chartCanvas.value || !dashboardStore.trendData.length) return
if (chart) {
chart.destroy()
}
const { getGradient } = useChartConfig()
const ctx = chartCanvas.value.getContext('2d')
const labels = dashboardStore.trendData.map(item => {
const labels = dashboardStore.trendData.map((item) => {
if (granularity.value === 'hour') {
// 小时粒度使用hour字段
const date = new Date(item.hour)
@@ -85,7 +74,7 @@ const createChart = () => {
}
return item.date
})
chart = new Chart(ctx, {
type: 'line',
data: {
@@ -93,7 +82,7 @@ const createChart = () => {
datasets: [
{
label: '请求次数',
data: dashboardStore.trendData.map(item => item.requests),
data: dashboardStore.trendData.map((item) => item.requests),
borderColor: '#667eea',
backgroundColor: getGradient(ctx, '#667eea', 0.1),
yAxisID: 'y',
@@ -101,7 +90,7 @@ const createChart = () => {
},
{
label: 'Token使用量',
data: dashboardStore.trendData.map(item => item.tokens),
data: dashboardStore.trendData.map((item) => item.tokens),
borderColor: '#f093fb',
backgroundColor: getGradient(ctx, '#f093fb', 0.1),
yAxisID: 'y1',
@@ -172,9 +161,13 @@ const handleGranularityChange = async () => {
createChart()
}
watch(() => dashboardStore.trendData, () => {
createChart()
}, { deep: true })
watch(
() => dashboardStore.trendData,
() => {
createChart()
},
{ deep: true }
)
onMounted(() => {
createChart()
@@ -189,4 +182,4 @@ onUnmounted(() => {
<style scoped>
/* 组件特定样式 */
</style>
</style>