From 853eabd98afb2fd27539a90d47fb9f6c7cf16530 Mon Sep 17 00:00:00 2001
From: wangxulei <727869402@qq.com>
Date: Fri, 10 Jan 2025 23:04:00 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/.env.production               |   2 +-
 web/src/views/dashboard/index.vue | 444 +++++++++++++++++++++++++++---
 web/src/views/login/login.vue     |   6 +-
 3 files changed, 406 insertions(+), 46 deletions(-)

diff --git a/web/.env.production b/web/.env.production
index 89f2b52..5939ecc 100644
--- a/web/.env.production
+++ b/web/.env.production
@@ -2,7 +2,7 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = '/api'
+VUE_APP_BASE_API = 'http://8.146.211.120:8080/api'
 
 # system name
 VUE_APP_SYSTEM_NAME = 'DD STORE'
diff --git a/web/src/views/dashboard/index.vue b/web/src/views/dashboard/index.vue
index 72db72a..ddd020d 100644
--- a/web/src/views/dashboard/index.vue
+++ b/web/src/views/dashboard/index.vue
@@ -1,58 +1,418 @@
 <template>
   <div class="dashboard-container">
 
+
+    <div class="dashboard-editor-container">
+      <div>
+        <a href="https://github.com/iimeepo/vue-admin-template" target="_blank" class="github-corner" aria-label="View source on Github">
+          <svg
+            width="80"
+            height="80"
+            viewBox="0 0 250 250"
+            style="fill:#40c9c6; color:#fff;"
+            aria-hidden="true"
+          >
+            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+            <path
+              d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+              fill="currentColor"
+              style="transform-origin: 130px 106px;"
+              class="octo-arm"
+            />
+            <path
+              d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+              fill="currentColor"
+              class="octo-body"
+            />
+          </svg>
+        </a>
+      </div>
+
+      <el-row :gutter="40" class="panel-group">
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <div class="card-panel">
+            <div class="card-panel-icon-wrapper icon-people">
+              <i class="el-icon-user-solid" />
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                用户总数
+              </div>
+              <span class="card-panel-num">102400</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <div class="card-panel">
+            <div class="card-panel-icon-wrapper icon-message">
+              <i class="el-icon-document" />
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                文章总数
+              </div>
+              <span class="card-panel-num">81212</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <div class="card-panel">
+            <div class="card-panel-icon-wrapper icon-money">
+              <i class="el-icon-chat-dot-square" />
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                评论总数
+              </div>
+              <span class="card-panel-num">9280</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <div class="card-panel">
+            <div class="card-panel-icon-wrapper icon-shopping">
+              <i class="el-icon-view" />
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                阅读总数
+              </div>
+              <span class="card-panel-num">13600</span>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="32">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <raddar-chart />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <pie-chart />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <bar-chart />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="16">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>阅读量排行</span>
+            </div>
+            <el-table
+              :data="tableData"
+              style="width: 100%"
+            >
+              <el-table-column
+                prop="sort"
+                label="排名"
+              />
+              <el-table-column
+                prop="address"
+                label="地区"
+              />
+              <el-table-column
+                prop="number"
+                label="人数"
+              />
+            </el-table>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>收益排行</span>
+            </div>
+            <div class="block">
+              <div style="padding-top:35px;" class="progress-item">
+                <span>Vue</span>
+                <el-progress :percentage="70" />
+              </div>
+              <div class="progress-item">
+                <span>JavaScript</span>
+                <el-progress :percentage="18" />
+              </div>
+              <div class="progress-item">
+                <span>CSS</span>
+                <el-progress :percentage="12" />
+              </div>
+              <div class="progress-item">
+                <span>PHP</span>
+                <el-progress :percentage="22" />
+              </div>
+              <div class="progress-item">
+                <span>Hyperf</span>
+                <el-progress :percentage="38" />
+              </div>
+              <div class="progress-item">
+                <span>ESLint</span>
+                <el-progress :percentage="100" status="success" />
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>待办事项</span>
+            </div>
+            <div class="block">
+              <el-timeline>
+                <el-timeline-item
+                  v-for="(activity, index) in activities"
+                  :key="index"
+                  :icon="activity.icon"
+                  :type="activity.type"
+                  :color="activity.color"
+                  :size="activity.size"
+                  :timestamp="activity.timestamp"
+                >
+                  {{ activity.content }}
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
+  import { mapGetters } from 'vuex'
+  import BarChart from './components/BarChart'
+  import PieChart from './components/PieChart'
+  import RaddarChart from './components/RaddarChart'
+
   export default {
     name: 'Dashboard',
+    components: {
+      BarChart,
+      PieChart,
+      RaddarChart
+    },
     data() {
       return {
-        user:{id:1,displayName:'June',avatar:''}
-    }
-    },
-    mounted(){
-      const { IMUI } = this.$refs;
-      //初始化表情包。
-      //从后端请求联系人数据，包装成下面的样子
-      const contacts = [{
-        id: 2,
-        displayName: '丽安娜',
-        avatar:'http://8.146.211.120:8080/upload/notes/note (6).jpg',
-        index: 'L',
-        unread: 0,
-        //最近一条消息的内容，如果值为空，不会出现在“聊天”列表里面。
-        //lastContentRender 函数会将 file 消息转换为 '[文件]', image 消息转换为 '[图片]'，对 text 会将文字里的表情标识替换为img标签,
-        lastContent: IMUI.lastContentRender({type:'text',content:'你在干嘛呢？'}),
-        //最近一条消息的发送时间
-        lastSendTime: 1566047865417
-      }];
-      IMUI.initContacts(contacts);
-    },
-    methods: {
-      handleSend(message, next, file) {
-        console.log('发送了信息')
-        //执行到next消息会停止转圈，如果接口调用失败，可以修改消息的状态 next({status:'failed'});
-        next();
-      },
-      handlePullMessages(contact, next) {
-        console.log('拉取信息')
-        //从后端请求消息数据，包装成下面的样子
-        const messages = [{
-          id: '唯一消息ID',
-          status: 'succeed',
-          type: 'text',
-          sendTime: 1566047865417,
-          content: '你什么才能对接完？',
-          toContactId: contact.id,
-          fromUser:this.user
+        tableData: [{
+          sort: '1',
+          address: '北京',
+          number: 23423
+        }, {
+          sort: '2',
+          address: '上海',
+          number: 2312
+        }, {
+          sort: '3',
+          address: '广州',
+          number: 2231
+        }, {
+          sort: '4',
+          address: '深圳',
+          number: 1234
+        }, {
+          sort: '5',
+          address: '杭州',
+          number: 123
+        }],
+        activities: [{
+          content: '支持使用图标',
+          timestamp: '2018-04-12 20:46',
+          size: 'large',
+          type: 'primary',
+          icon: 'el-icon-more'
+        }, {
+          content: '支持自定义颜色',
+          timestamp: '2018-04-03 20:46',
+          color: '#0bbd87'
+        }, {
+          content: '支持自定义尺寸',
+          timestamp: '2018-04-03 20:46',
+          size: 'large'
+        }, {
+          content: '默认样式的节点',
+          timestamp: '2018-04-03 20:46'
         }]
-        //将第二个参数设为true，表示已到末尾，聊天窗口顶部会显示“暂无更多消息”，不然会一直转圈。
-        next(messages,true);
-      },
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'name'
+      ])
     }
-
   }
 </script>
 
+<style lang="scss" scoped>
+  .dashboard-editor-container {
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .github-corner {
+      position: absolute;
+      top: 0px;
+      border: 0;
+      right: 0;
+    }
+
+    .chart-wrapper {
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+    }
+  }
+
+  .panel-group {
+    margin-top: 18px;
+
+    .card-panel-col {
+      margin-bottom: 32px;
+    }
+
+    .card-panel {
+      height: 108px;
+      cursor: pointer;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      color: #666;
+      background: #fff;
+      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+      border-color: rgba(0, 0, 0, .05);
+
+      &:hover {
+        .card-panel-icon-wrapper {
+          color: #fff;
+        }
+
+        .icon-people {
+          background: #40c9c6;
+        }
+
+        .icon-message {
+          background: #36a3f7;
+        }
+
+        .icon-money {
+          background: #f4516c;
+        }
+
+        .icon-shopping {
+          background: #34bfa3
+        }
+      }
+
+      .icon-people {
+        font-size: 48px;
+        color: #40c9c6;
+      }
+
+      .icon-message {
+        font-size: 48px;
+        color: #36a3f7;
+      }
+
+      .icon-money {
+        font-size: 48px;
+        color: #f4516c;
+      }
+
+      .icon-shopping {
+        font-size: 48px;
+        color: #34bfa3
+      }
+
+      .card-panel-icon-wrapper {
+        float: left;
+        margin: 14px 0 0 14px;
+        padding: 16px;
+        transition: all 0.38s ease-out;
+        border-radius: 6px;
+      }
+
+      .card-panel-icon {
+        float: left;
+        font-size: 48px;
+      }
+
+      .card-panel-description {
+        float: right;
+        font-weight: bold;
+        margin: 26px;
+        margin-left: 0px;
+
+        .card-panel-text {
+          line-height: 18px;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 16px;
+          margin-bottom: 12px;
+        }
+
+        .card-panel-num {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+
+  .github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+
+  @keyframes octocat-wave {
+    0%,
+    100% {
+      transform: rotate(0)
+    }
+    20%,
+    60% {
+      transform: rotate(-25deg)
+    }
+    40%,
+    80% {
+      transform: rotate(10deg)
+    }
+  }
+
+  @media (max-width:500px) {
+    .github-corner:hover .octo-arm {
+      animation: none
+    }
+    .github-corner .octo-arm {
+      animation: octocat-wave 560ms ease-in-out
+    }
+  }
+
+  @media (max-width:550px) {
+    .card-panel-description {
+      display: none;
+    }
+
+    .card-panel-icon-wrapper {
+      float: none !important;
+      width: 100%;
+      height: 100%;
+      margin: 0 !important;
+
+      .svg-icon {
+        display: block;
+        margin: 14px auto !important;
+        float: none !important;
+      }
+    }
+  }
+
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
+  }
+</style>
diff --git a/web/src/views/login/login.vue b/web/src/views/login/login.vue
index aa4aa68..2e7e6a7 100644
--- a/web/src/views/login/login.vue
+++ b/web/src/views/login/login.vue
@@ -38,7 +38,7 @@
                             z-0
                         "></div>
         <div class="w-full max-w-md z-10">
-          <div class="sm:text-4xl xl:text-4xl font-bold leading-tight mb-6"></div>
+          <div class="sm:text-4xl xl:text-4xl font-bold leading-tight mb-6">小红书社区后台管理系统</div>
           <div class="sm:text-sm xl:text-md text-gray-200 font-normal"></div>
         </div>
         <ul class="circles">
@@ -207,11 +207,11 @@
             </div>
 
             <div style="font-weight: 500;font-size: 13px;letter-spacing: 1px;">
-<!--              <span>门店账号：用户名:demo   密码：111111</span><br/><br/>-->
+              <span>账号：用户名:admin   密码：111111</span><br/><br/>
 <!--              <span>管理端账号：用户名:admin  密码：111111</span><br/><br/>-->
 <!--              <span>商业合作：qq: 7827869402   vx: MAMBA_4EVER24</span><br/><br/>-->
 <!--              <span> <a target="_blank" style="text-decoration: underline;" href="http://8.146.211.120:8086/"> 完整版演示 http://8.146.211.120:8086/</a></span><br/><br/>-->
-<!--              <span> <a target="_blank" style="text-decoration: underline;" href="http://8.146.211.120:8087/"> 移动端登陆 http://8.146.211.120:8087/</a></span>-->
+              <span> <a target="_blank" style="text-decoration: underline;" href="http://8.146.211.120:8081/"> 移动端登陆 http://8.146.211.120:8081/</a></span>
 
             </div>
             <!--                            <p class="-->