fix: 合并解决冲突

package.json

@@ -24,6 +24,7 @@
 		"china-area-data": "^5.0.1",
 		"codemirror": "5.65.18",
 		"crypto-js": "4.2.0",
+		"dayjs": "^1.11.13",
 		"driver.js": "1.3.1",
 		"echarts": "5.5.1",
 		"element-plus": "2.8.7",

src/layout/logo/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-		<img :src="logo" class="layout-logo-img" width="91px"/>
+		<img :src="logo" class="layout-logo-img" width="73px"/>
 	</div>
 	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
 		<img :src="logo" class="layout-logo-size-img"/>

src/layout/navMenu/horizontal.vue

@@ -5,7 +5,9 @@
 				<template v-for="val in menuLists">
 					<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 						<template #title>
-							<SvgIcon :name="val.meta.icon" />
+							<navIcon v-if="val.path == '/marketing'" :val=val style="margin-right: 8px;" />
+							<navIcon v-else-if="val.path == '/system'" :val=val style="margin-right: 8px;" />
+							<SvgIcon v-else :name="val.meta.icon" />
 							<span>{{ other.setMenuI18n(val) }}</span>
 						</template>
 						<SubItem :chil="val.children" />
@@ -13,7 +15,8 @@
 					<template v-else>
 						<el-menu-item :index="val.path" :key="val.path">
 							<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-								<SvgIcon :name="val.meta.icon" />
+								<navIcon v-if="val.path == '/home'" :val=val style="margin-right: 8px;" />
+								<SvgIcon v-else :name="val.meta.icon" />
 								{{ other.setMenuI18n(val) }}
 							</template>
 							<template #title v-else>
@@ -38,6 +41,7 @@ import other from '/@/utils/other';
 import mittBus from '/@/utils/mitt';
 
 // 引入组件
+const navIcon = defineAsyncComponent(() => import('/@/layout/navMenu/navIcon.vue'));
 const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
 
 // 定义父组件传过来的值
@@ -49,6 +53,10 @@ const props = defineProps({
 	},
 });
 
+props.menuList.forEach((item) => {
+    console.log(JSON.stringify(item));
+})
+
 // 定义变量内容
 const elMenuHorizontalScrollRef = ref();
 const stores = useRoutesList();

src/theme/app.scss

@@ -363,6 +363,21 @@ body,
 		color: var(--menu-bar-active-font-color) !important;
 		border-bottom: 2px solid var(--el-color-primary) !important;
 	}
+	/* 自定义菜单icon */
+	.el-menu-item svg,
+	.el-sub-menu svg {
+	    path {
+	        fill: #ffffff !important;
+		}
+	}
+	.el-menu-item.is-active svg,
+	.el-menu-item:hover svg,
+	.el-sub-menu.is-active svg,
+	.el-sub-menu:hover svg {
+	    path {
+	        fill: rgba(22, 122, 240, 1) !important;
+		}
+	}
 }
 
 /* 横向菜单下拉弹出层菜单项高亮字体颜色 */

src/views/home/index.vue

@@ -1,53 +1,41 @@
 <template>
-	<div>
-		<splitpanes style="height: 410px">
-			<pane size="20">
-				<custom-panel :title="'访客趋势图'">
-					<visitor-trend-chart />
-				</custom-panel>
-			</pane>
-			<pane size="40">
-				<custom-panel :title="'访客趋势图'">
-					<visitor-trend-chart />
-				</custom-panel>
-			</pane>
-			<pane size="40">
-				<custom-panel :title="'访客趋势图'">
-					<visitor-trend-chart />
-				</custom-panel>
-			</pane>
-		</splitpanes>
-		<splitpanes style="height: 410px">
-			<pane size="40">
-				<custom-panel :title="'访客趋势图'">
-					<visitor-trend-chart />
-				</custom-panel>
-			</pane>
-			<pane size="30">
-				<custom-panel :title="'关键词频率'">
-					<keyword-frequency :chart-data="chartData" />
-				</custom-panel>
-			</pane>
-			<pane size="30">
-				<custom-panel :title="'关键词频率'" @reload="chartData = chartData.slice().sort(() => Math.random() - 0.5)">
-					<keyword-frequency :chart-data="chartData" />
-				</custom-panel>
-			</pane>
-		</splitpanes>
-	</div>
+  <el-row :gutter="12" style="padding: 12px; row-gap: 12px;">
+    <el-col :xs="24" :sm="10" :md="8" :lg="6" :xl="5">
+      <userInfo />
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="16" :lg="10" :xl="10">
+      <custom-panel :title="'访客趋势图'">
+        <visitor-trend />
+      </custom-panel>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="9">
+      <custom-panel :title="'引用域'">
+        <traffic-sources />
+      </custom-panel>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="9">
+      <custom-panel :title="'引用域'">
+        <traffic-sources />
+      </custom-panel>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="9">
+      <custom-panel :title="'引用域'">
+        <traffic-sources />
+      </custom-panel>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="9">
+      <custom-panel :title="'引用域'">
+        <traffic-sources />
+      </custom-panel>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts" name="home">
 import { defineAsyncComponent,ref } from 'vue';
 
 const customPanel = defineAsyncComponent(() => import('./custom-panel.vue'));
-const visitorTrendChart = defineAsyncComponent(() => import('./visitor-trend-chart.vue'));
-const keywordFrequency = defineAsyncComponent(() => import('./echarts/keyword-frequency.vue'));
-const chartData =ref( [
-  { name: '下载', value: 30, color: '#ff6384' },
-  { name: '张三', value: 20, color: '#36a2eb' },
-  { name: '里斯', value: 25, color: '#cc65fe' },
-  { name: '王五', value: 15, color: '#ffce56' },
-  { name: '宅六', value: 10, color: '#4bc0c0' },
-]);
-</script>
+const userInfo = defineAsyncComponent(() => import('./user-info.vue'));
+const visitorTrend = defineAsyncComponent(() => import('./visitor-trend.vue'));
+const trafficSources = defineAsyncComponent(() => import('./traffic-sources.vue'));
+</script>

src/views/home/traffic-sources.vue

@@ -0,0 +1,142 @@
+<!-- 引用域 -->
+<template>
+  <div class="visitor-trend">
+    <div ref="chartRef" style="width: 100%; height: 300px;"></div>
+    <div style="position: absolute;top: 20px;right: 0;">
+      <el-select v-model="value" style="width: 84px;">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
+
+const value = ref('7');
+const options = [
+  {
+    value: '7',
+    label: '7天',
+    selected: true,
+  },
+  {
+    value: '30',
+    label: '30天',
+  },
+]
+
+const chartRef = ref(null);
+let chartInstance = null;
+
+// 生成随机数据
+const generateRandomData = () => {
+  const categories = Array.from({ length: 6 }, (_, i) => i + 1);
+  return categories.map(item => ({
+    y: '192.168.3.' + item,
+    x: Math.floor(Math.random() * 10000) + 1 // 生成1-100的随机数
+  }));
+};
+
+// 初始化图表
+const initChart = () => {
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+  
+  chartInstance = echarts.init(chartRef.value);
+  const data = generateRandomData();
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: '{b}[{c}]'
+    },
+    grid: {
+      left: '0%',
+      right: '5%',
+      bottom: '0%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      boundaryGap: [0, 0.01],
+      axisLabel: {
+        color: 'rgba(100, 100, 100, 1)',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#999'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(230, 230, 230, 1)',
+          type: 'dashed',
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: data.map(item => item.y),
+      axisLabel: {
+        color: 'rgba(100, 100, 100, 1)',
+        formatter: function(value) {
+          return value.match(/.{1,15}/g).join('\n');;
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(230, 230, 230, 1)',
+        }
+      },
+      axisTick: {
+        alignWithLabel: true,
+        show: false,
+      }
+    },
+    series: [
+      {
+        name: '数值',
+        type: 'bar',
+        data: data.map(item => item.x),
+        itemStyle: {
+          color: 'rgba(22, 122, 240, 1)',
+          borderRadius: [0, 8, 8, 0] // 右上和右下圆角
+        },
+        barWidth: '16',
+        label: {
+          show: false,
+          // position: 'right',
+          // formatter: '{c}'
+        }
+      }
+    ]
+  };
+  
+  chartInstance.setOption(option);
+  
+  // 响应式调整
+  window.addEventListener('resize', () => {
+    chartInstance.resize();
+  });
+};
+
+onMounted(() => {
+  initChart();
+});
+
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    window.removeEventListener('resize', () => {
+      chartInstance.resize();
+    });
+    chartInstance.dispose();
+  }
+});
+
+</script>

src/views/home/user-info.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="user-info">
+    <el-card>
+      <div class="flex" style="height: 226px; ">
+        <el-avatar :size="100" style="margin-top: 8px;" :src="user.avatar" @error="errorHandler">
+          <img :src="user.avatar" />
+        </el-avatar>
+        <div class="detail">
+          <div class="nickname">{{ user.nickname }}</div>
+          <div class="username">@{{ user.username }}</div>
+          <div class="email">{{ user.email }}</div>
+          <div class="postName">{{ user.postList[0].postName }}</div>
+          <div class="dept">
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0_1_110)">
+                <path d="M5.25 3.25L2.75 5V11" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 1L7.75 2.75V6L9.5 7.25V11H5.25V1Z"
+                  stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M1 11H11" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
+              </g>
+              <defs>
+                <clipPath id="clip0_1_110">
+                  <rect width="12" height="12" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+            {{ user.dept.name }}
+          </div>
+        </div>
+      </div>
+      <div class="task-list">
+        <div class="task-item">
+          <div class="task-title">代办任务</div>
+          <div class="task-num">0</div>
+          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3.125 11.875H26.875V25.625C26.875 26.3154 26.3154 26.875 25.625 26.875H4.375C3.68464 26.875 3.125 26.3154 3.125 25.625V11.875Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
+            <path d="M3.125 6.25C3.125 5.55964 3.68464 5 4.375 5H25.625C26.3154 5 26.875 5.55964 26.875 6.25V11.875H3.125V6.25Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
+            <path d="M10 19.375L13.75 23.125L21.25 15.625" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 3.125V8.125" stroke="#167AF0" stroke-width="2" stroke-linecap="round"/>
+            <path d="M20 3.125V8.125" stroke="#167AF0" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="task-item">
+          <div class="task-title">抄送任务</div>
+          <div class="task-num">0</div>
+          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M26.875 3.125L18.5625 26.875L13.8125 16.1875L3.125 11.4375L26.875 3.125Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
+            <path d="M26.8751 3.125L13.8126 16.1875" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+const errorHandler = () => {
+  return './src/assets/avatar.png'
+}
+const postName = computed(() => {
+  return user.postList?.forEach((item: any) => {
+    return item.postName
+  })?.join('|')
+})
+
+const user = {
+  "userId": "1",
+  "username": "admin",
+  "avatar": "/admin/sys-file/s3demo/063a1ea1f6714226851de23f1329672b.png",
+  "dept": {
+    "deptId": "4",
+    "name": "销售部",
+  },
+  "postList": [
+    {
+      "postName": "CTO",
+    }
+  ],
+  "nickname": "管理员",
+  "name": "管理员",
+  "email": "[email protected]"
+}
+</script>
+<style scoped lang="scss">
+.user-info {
+  .flex {
+    padding-top: 44px;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+
+    .detail {
+      .nickname {
+        font-size: 20px;
+        font-weight: 600;
+      }
+
+      .username {
+        font-size: 12px;
+        line-height: 14px;
+        color: rgba(136, 136, 136, 1);
+        margin-top: 8px;
+      }
+
+      .email {
+        font-size: 12px;
+        line-height: 14px;
+        color: rgba(136, 136, 136, 1);
+        margin-top: 8px;
+      }
+
+      .postName {
+        display: inline-block;
+        font-size: 12px;
+        line-height: 14px;
+        color: rgba(136, 136, 136, 1);
+        margin-top: 8px;
+        border: 1px solid rgba(22, 122, 240, 1);
+        line-height: 20px;
+        border-width: 1px;
+        border-radius: 4px;
+        font-family: Source Han Sans SC;
+        font-size: 11px;
+        color: rgba(22, 122, 240, 1);
+        padding: 0 4px;
+      }
+
+      .dept {
+        font-size: 12px;
+        line-height: 14px;
+        color: rgba(136, 136, 136, 1);
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .task-list {
+    height: 140px; 
+    padding-top: 60px; 
+    width: 100%; 
+    max-width: 280px;
+    margin: 0 auto; 
+    display: flex; 
+    justify-content: space-between; 
+    border-top: 1px solid rgba(230, 230, 230, 1);
+    .task-item {
+      position: relative;
+      padding-left: 42px;
+      svg {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+    .task-title {
+      line-height: 17px;
+      color: rgba(100, 100, 100, 1);
+      font-size: 14px;
+    }
+    .task-num {
+      font-size: 18px;
+      line-height: 22px;
+      color: rgba(18, 18, 18, 1);
+    }
+  }
+}
+</style>

src/views/home/visitor-overview.vue

@@ -0,0 +1,39 @@
+<!-- 
+UserInfoPanel 或 UserProfileCard
+显示当前用户的基本信息和权限
+
+访客趋势图组件
+VisitorTrendChart 或 TrafficTrendGraph
+展示访客数量随时间变化的折线图/面积图
+
+引用域组件
+ReferralDomainsTable 或 TrafficSourcesPanel
+显示流量来源域名的列表和占比
+
+访客地图组件
+VisitorMap 或 GeoTrackingMap
+地理分布可视化的地图组件
+
+访客概览组件
+VisitorOverview 或 TrafficSummaryCard
+关键指标的概览统计卡片
+
+关键词频率组件
+KeywordFrequencyChart 或 SearchTermsTable
+展示搜索关键词及其频率的组件 
+-->
+
+
+
+<template>
+  <el-calendar v-model="value"/>
+</template>
+
+<script setup lang="ts" name="systemSysSchedule">
+const value = ref(new Date())
+</script>
+<style>
+.el-calendar-table .el-calendar-day{
+  height: 40px;
+}
+</style>

src/views/home/visitor-trend-chart.vue

@@ -1,9 +0,0 @@
-<!-- 访客趋势图组件 -->
-<template>
-</template>
-
-<script setup lang="ts" name="visitorTrendChart">
-</script>
-
-<style scoped lang="scss">
-</style>

src/views/home/visitor-trend.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="visitor-trend">
+    <div ref="chartRef" style="width: 100%; height: 300px;"></div>
+    <div style="position: absolute;top: 20px;right: 0;">
+      <el-select v-model="value" style="width: 84px;">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
+import dayjs from 'dayjs';
+
+const value = ref('7');
+const options = [
+  {
+    value: '7',
+    label: '7天',
+    selected: true,
+  },
+  {
+    value: '30',
+    label: '30天',
+  },
+]
+const chartRef = ref(null);
+let chartInstance = null;
+
+// 示例数据
+const data = [
+  { date: '2025-01-01', visit: 12, visitor: 80, user: 50, duration: 3.2, bounceRate: 32 },
+  { date: '2025-01-02', visit: 13, visitor: 92, user: 62, duration: 4.1, bounceRate: 28 },
+  { date: '2025-01-03', visit: 10, visitor: 71, user: 41, duration: 3.8, bounceRate: 35 },
+  { date: '2025-01-04', visit: 13, visitor: 94, user: 64, duration: 4.5, bounceRate: 26 },
+  { date: '2025-01-05', visit: 9, visitor: 60, user: 30, duration: 2.9, bounceRate: 42 },
+  { date: '2025-01-06', visit: 23, visitor: 30, user: 60, duration: 5.2, bounceRate: 22 },
+  { date: '2025-01-07', visit: 21, visitor: 10, user: 70, duration: 4.8, bounceRate: 25 },
+];
+
+// 配置颜色
+const colorList = [
+  'rgba(255, 154, 95, 1)',   // 访问量
+  'rgba(91, 88, 225, 1)',    // 访客量
+  'rgba(88, 206, 82, 1)',    // 用户管理
+  'rgba(237, 49, 168, 1)',   // 平均停留时长
+  'rgba(22, 122, 240, 1)'    // 跳出率
+];
+
+onMounted(() => {
+  chartInstance = echarts.init(chartRef.value);
+
+  // 准备数据
+  const dateList = data.map(item => item.date);
+
+  const WEEK_DAYS = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      borderColor: 'rgba(204, 204, 204, 1)',
+      borderWidth: 1,
+      borderRadius: 0,
+      formatter: function (params) {
+        const date = params[0].axisValue;
+        let result = `<div style="font-weight: bold; font-size: 12px; color: rgba(18, 18, 18, 1); margin-bottom: 5px;">${dayjs(date).format('YYYY年MM月DD日')}&nbsp;${WEEK_DAYS[dayjs(date).day()]}</div>`;
+        params.forEach(item => {
+          let value = item.value;
+          // // 特殊处理不同指标的单位
+          // if (item.seriesName === '平均停留时长') {
+          //   value = value + ' 分钟';
+          // } else if (item.seriesName === '跳出率') {
+          //   value = value + '%';
+          // }
+          result += `<div style="font-size: 12px; color: #666; margin-top: 2px;">${item.marker} <span style="font-weight: bold; color: #000000;">${value}</span> ${item.seriesName}</div>`;
+        });
+        return result;
+      },
+    },
+    legend: {
+      data: ['访问量', '访客量', '用户管理', '平均停留时间（秒）', '跳出率'],
+      top: 0,
+      left: 0,
+    },
+    grid: {
+      left: '0%',
+      right: '5%',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: dateList,
+      axisLabel: {
+        formatter: function (value) {
+          // 格式化日期显示
+          return value.split('-').slice(1).join('-');
+        },
+        // rotate: 30  // 日期标签旋转30度防止重叠
+        color: 'rgba(100, 100, 100, 1)',
+      },
+      axisLine: {
+        lineStyle: {
+          // color: 'rgba(22, 122, 240, 1)',
+          // width: 2,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        name: '访问量',
+        type: 'line',
+        data: data.map(item => item.visit),
+        symbol: 'circle',
+        symbolSize: 2,
+        itemStyle: {
+          color: colorList[0]
+        },
+        lineStyle: {
+          width: 2
+        }
+      },
+      {
+        name: '访客量',
+        type: 'line',
+        data: data.map(item => item.visitor),
+        symbol: 'circle',
+        symbolSize: 2,
+        itemStyle: {
+          color: colorList[1]
+        },
+        lineStyle: {
+          width: 2
+        }
+      },
+      {
+        name: '用户管理',
+        type: 'line',
+        data: data.map(item => item.user),
+        symbol: 'circle',
+        symbolSize: 2,
+        itemStyle: {
+          color: colorList[2]
+        },
+        lineStyle: {
+          width: 2
+        }
+      },
+      {
+        name: '平均停留时间（秒）',
+        type: 'line',
+        data: data.map(item => item.duration),
+        symbol: 'circle',
+        symbolSize: 2,
+        itemStyle: {
+          color: colorList[3]
+        },
+        lineStyle: {
+          width: 2
+        }
+      },
+      {
+        name: '跳出率',
+        type: 'line',
+        data: data.map(item => item.bounceRate),
+        symbol: 'circle',
+        symbolSize: 2,
+        itemStyle: {
+          color: colorList[4]
+        },
+        lineStyle: {
+          width: 2
+        }
+      }
+    ],
+    color: colorList
+  };
+
+  chartInstance.setOption(option);
+
+  // 响应式调整
+  const handleResize = () => chartInstance?.resize();
+  window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  chartInstance?.dispose();
+});
+</script>
+
+<style>
+.visitor-trend {
+  position: relative;
+  padding-top: 20px;
+  height: 340px;
+}
+
+/* 下拉框整体样式 */
+.visitor-trend .el-select__wrapper {
+  border: 1px solid rgba(22, 122, 240, 1);
+}
+
+.visitor-trend .el-select__selected-item {
+  color: rgba(22, 122, 240, 1); /* 文字颜色 */
+}
+
+.visitor-trend .el-select__caret {
+  color: rgba(22, 122, 240, 1); /* 三角形颜色 */
+}
+</style>