feacture:暂存

src/views/home/index.vue

@@ -13,6 +13,21 @@
         <traffic-sources />
       </custom-panel>
     </el-col>
+    <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
+      <custom-panel :title="'访客地图'">
+        <visitor-overview />
+      </custom-panel>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="10" :lg="6" :xl="6">
+      <custom-panel :title="'访客概览'">
+        <visitor-overview />
+      </custom-panel>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="14" :lg="8" :xl="8">
+      <custom-panel :title="'关键词频率'">
+        <visitor-overview />
+      </custom-panel>
+    </el-col>
   </el-row>
 </template>
 
@@ -23,4 +38,5 @@ const customPanel = defineAsyncComponent(() => import('./custom-panel.vue'));
 const userInfo = defineAsyncComponent(() => import('./user-info.vue'));
 const visitorTrend = defineAsyncComponent(() => import('./visitor-trend.vue'));
 const trafficSources = defineAsyncComponent(() => import('./traffic-sources.vue'));
+const VisitorOverview = defineAsyncComponent(() => import('./visitor-overview.vue'));
 </script>

src/views/home/user-info.vue

@@ -2,9 +2,11 @@
   <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="avatar">
+          <el-avatar :size="100" :src="user.avatar" @error="errorHandler">
+            <img :src="user.avatar" />
+          </el-avatar>
+        </div>
         <div class="detail">
           <div class="nickname">{{ user.nickname }}</div>
           <div class="username">@{{ user.username }}</div>
@@ -78,7 +80,7 @@ const user = {
   ],
   "nickname": "管理员",
   "name": "管理员",
-  "email": "ru@qq.com"
+  "email": "88888888@qq.com"
 }
 </script>
 <style scoped lang="scss">
@@ -88,8 +90,15 @@ const user = {
     display: flex;
     justify-content: center;
     box-sizing: border-box;
+    .avatar {
+      margin-top: 8px;
+      width: 50%;
+      padding-left: calc(50% - 110px);
+    }
 
     .detail {
+      width: 50%;
+      padding-left: 10px;
       .nickname {
         font-size: 20px;
         font-weight: 600;

src/views/home/visitor-overview.vue

@@ -1,39 +1,8 @@
-<!-- 
-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 setup lang="ts">
 </script>
-<style>
-.el-calendar-table .el-calendar-day{
-  height: 40px;
-}
+<style scoped lang="scss">
 </style>