github/ChatLab
1
0
Fork 0
mirror of https://github.com/hellodigua/ChatLab.git synced 2026-05-26 16:40:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 样式优化

Browse Source
This commit is contained in:
digua
2026-03-27 22:56:47 +08:00
committed by digua
parent 073c6bece5
commit 64b52e40f4
9 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/main.css
+3
View File
@@ -19,6 +19,9 @@
/* 分析页面使用的更深背景 - 统一使用 zinc-900 */
--color-page-dark: #18181b;
/* 模块暗色模式半透明背景色 */
--color-card-dark: rgba(255, 255, 255, 0.03);
}
/* 全局滚动条样式 */
src/components/UI/SectionCard.vue
+2 -2
View File
@@ -36,9 +36,9 @@ const contentStyle = computed(() => {
</script>
<template>
<div class="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
<div class="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-white/5 dark:bg-card-dark">
<!-- 标题区域 -->
<div class="px-5 py-3" :class="{ 'border-b border-gray-200 dark:border-gray-800': showDivider && $slots.default }">
<div class="px-5 py-3" :class="{ 'border-b border-gray-200 dark:border-white/5': showDivider && $slots.default }">
<div class="flex items-center justify-between">
<div>
<p class="font-semibold text-gray-900 dark:text-white whitespace-nowrap">{{ title }}</p>
src/components/UI/StatCard.vue
+7 -7
View File
@@ -29,17 +29,17 @@ const valueColorMap: Record<string, string> = {
}
const iconBgMap: Record<string, string> = {
pink: 'bg-pink-100 dark:bg-pink-900/30',
amber: 'bg-amber-100 dark:bg-amber-900/30',
blue: 'bg-blue-100 dark:bg-blue-900/30',
green: 'bg-green-100 dark:bg-green-900/30',
red: 'bg-red-100 dark:bg-red-900/30',
gray: 'bg-gray-100 dark:bg-gray-800',
pink: 'bg-pink-100 dark:bg-pink-500/10',
amber: 'bg-amber-100 dark:bg-amber-500/10',
blue: 'bg-blue-100 dark:bg-blue-500/10',
green: 'bg-green-100 dark:bg-green-500/10',
red: 'bg-red-100 dark:bg-red-500/10',
gray: 'bg-gray-100 dark:bg-white/5',
}
</script>
<template>
<div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900">
<div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/5 dark:bg-card-dark">
<!-- 带图标的布局 -->
<template v-if="icon">
<div class="flex items-center gap-3">
src/components/analysis/Overview/OverviewActionTools.vue
+3 -3
View File
@@ -16,7 +16,7 @@ const emit = defineEmits<{
{{ t('analysis.overview.tools') }}
</span>
<button
class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/10 dark:bg-[#161616] dark:text-gray-300 dark:hover:border-white/20 dark:hover:bg-[#1f1f1f] dark:hover:text-white"
class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/5 dark:bg-white/5 dark:text-gray-300 dark:hover:border-white/10 dark:hover:bg-white/10 dark:hover:text-white"
@click="emit('openIncrementalImport')"
>
<div class="flex items-center gap-2.5">
@@ -33,7 +33,7 @@ const emit = defineEmits<{
</button>
<button
class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/10 dark:bg-[#161616] dark:text-gray-300 dark:hover:border-white/20 dark:hover:bg-[#1f1f1f] dark:hover:text-white"
class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/5 dark:bg-white/5 dark:text-gray-300 dark:hover:border-white/10 dark:hover:bg-white/10 dark:hover:text-white"
@click="emit('openSessionIndex')"
>
<div class="flex items-center gap-2.5">
@@ -50,7 +50,7 @@ const emit = defineEmits<{
</button>
<button
class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/10 dark:bg-[#161616] dark:text-gray-300 dark:hover:border-white/20 dark:hover:bg-[#1f1f1f] dark:hover:text-white"
class="group flex w-full items-center justify-between rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm font-medium text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:border-white/5 dark:bg-white/5 dark:text-gray-300 dark:hover:border-white/10 dark:hover:bg-white/10 dark:hover:text-white"
@click="emit('openMessageExport')"
>
<div class="flex items-center gap-2.5">
src/components/analysis/Overview/OverviewIdentityCard.vue
+6 -6
View File
@@ -78,7 +78,7 @@ const themeColors = {
}
// GitHub 风格：标准的空白格底色
const emptyColor = computed(() => (isDark.value ? '#161b22' : '#ebedf0'))
const emptyColor = computed(() => (isDark.value ? 'rgba(255, 255, 255, 0.03)' : '#ebedf0'))
const chartOption = computed<EChartsOption>(() => ({
tooltip: {
@@ -162,7 +162,7 @@ const chartOption = computed<EChartsOption>(() => ({
itemStyle: {
borderRadius: 3,
borderWidth: 2,
borderColor: isDark.value ? '#0f0f0f' : '#ffffff',
borderColor: isDark.value ? 'transparent' : '#ffffff',
},
},
],
@@ -171,12 +171,12 @@ const chartOption = computed<EChartsOption>(() => ({
function initChart() {
if (!chartRef.value) return
chartInstance = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
chartInstance.setOption(chartOption.value)
chartInstance.setOption({ backgroundColor: 'transparent', ...chartOption.value })
}
function updateChart() {
if (!chartInstance) return
chartInstance.setOption(chartOption.value, { notMerge: true })
chartInstance.setOption({ backgroundColor: 'transparent', ...chartOption.value }, { notMerge: true })
}
function handleResize() {
@@ -203,7 +203,7 @@ onUnmounted(() => {
<template>
<div
class="relative overflow-hidden rounded-[24px] border border-gray-200/60 bg-white p-8 shadow-sm dark:border-white/5 dark:bg-[#0f0f0f]"
class="relative overflow-hidden rounded-[24px] border border-gray-200/60 bg-white p-8 shadow-sm dark:border-white/5 dark:bg-card-dark"
>
<div class="relative flex gap-8">
<!-- 左侧：身份信息 + 日历 -->
@@ -227,7 +227,7 @@ onUnmounted(() => {
<div class="mt-4 flex flex-col gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-2">
<div
class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400"
>
<UIcon v-if="session.type === 'group'" name="i-heroicons-user-group" class="h-3.5 w-3.5" />
<UIcon v-else name="i-heroicons-user" class="h-3.5 w-3.5" />
src/components/charts/EChart.vue
+3 -3
View File
@@ -73,16 +73,16 @@ function initChart() {
// 创建新实例
chartInstance = echarts.init(chartRef.value, isDark.value ? 'dark' : undefined)
chartInstance.setOption(props.option)
chartInstance.setOption({ backgroundColor: 'transparent', ...props.option })
}
// 更新图表
// 更新图表
function updateChart() {
if (!chartInstance) {
initChart()
return
}
chartInstance.setOption(props.option, { notMerge: true })
chartInstance.setOption({ backgroundColor: 'transparent', ...props.option }, { notMerge: true })
}
// 调整大小
src/components/charts/EChartCalendar.vue
+2 -2
View File
@@ -163,13 +163,13 @@ function initChart() {
chartInstance = echarts.init(chartRef.value, isDark.value ? 'dark' : undefined, {
renderer: 'canvas',
})
chartInstance.setOption(option.value)
chartInstance.setOption({ backgroundColor: 'transparent', ...option.value })
}
// 更新图表
function updateChart() {
if (!chartInstance) return
chartInstance.setOption(option.value, { notMerge: true })
chartInstance.setOption({ backgroundColor: 'transparent', ...option.value }, { notMerge: true })
}
// 响应窗口大小变化
src/components/charts/EChartGraph.vue
+2 -2
View File
@@ -225,13 +225,13 @@ function initChart() {
chartInstance = echarts.init(chartRef.value, isDark.value ? 'dark' : undefined, {
renderer: 'canvas',
})
chartInstance.setOption(option.value)
chartInstance.setOption({ backgroundColor: 'transparent', ...option.value })
}
// 更新图表
function updateChart() {
if (!chartInstance) return
chartInstance.setOption(option.value, { notMerge: true })
chartInstance.setOption({ backgroundColor: 'transparent', ...option.value }, { notMerge: true })
}
// 响应窗口大小变化
src/pages/private-chat/components/OverviewTab.vue
+3 -3
View File
@@ -157,7 +157,7 @@ watch(
/>
<div
v-else
class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-pink-100 dark:bg-pink-900/30"
class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-pink-100 dark:bg-pink-500/10"
>
<span class="text-2xl font-bold text-pink-600 dark:text-pink-400">
{{ memberComparisonData.member1.name.charAt(0) }}
@@ -176,7 +176,7 @@ watch(
<!-- 中间对比条 -->
<div class="flex-1">
<div class="relative h-8 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
<div class="relative h-8 overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
<div
class="absolute left-0 top-0 h-full rounded-l-full bg-pink-500 transition-all"
:style="{ width: `${memberComparisonData.member1.percentage}%` }"
@@ -202,7 +202,7 @@ watch(
/>
<div
v-else
class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30"
class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-500/10"
>
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">
{{ memberComparisonData.member2.name.charAt(0) }}