From 663542a4559f8968efbc02cb883e188d82418540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=B3=E6=B8=85=E7=88=BD?= <eison.icu@gmail.com>
Date: Tue, 25 Mar 2025 14:26:25 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=A7=81=E5=9F=9F=E6=93=8D=E7=9B=98?=
 =?UTF-8?q?=E6=89=8B=E3=80=91=20=E6=93=8D=E7=9B=98=E6=89=8B=E7=AB=AFUI=20-?=
 =?UTF-8?q?=20=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cunkebao/pages.json                     |   7 +
 Cunkebao/pages/device/index.vue         | 558 ++++++++++++++++++++++++
 Cunkebao/pages/profile/index.vue        |  14 +-
 Cunkebao/pages/scenarios/index.vue      |   2 -
 Cunkebao/static/images/icons/filter.svg |   9 +
 5 files changed, 580 insertions(+), 10 deletions(-)
 create mode 100644 Cunkebao/pages/device/index.vue
 create mode 100644 Cunkebao/static/images/icons/filter.svg

diff --git a/Cunkebao/pages.json b/Cunkebao/pages.json
index 0e77c8ab..1acf943d 100644
--- a/Cunkebao/pages.json
+++ b/Cunkebao/pages.json
@@ -21,6 +21,13 @@
         "navigationBarTitleText": "我的"
       }
     },
+    {
+      "path": "pages/device/index",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "设备管理"
+      }
+    },
     {
       "path": "pages/scenarios/index",
       "style": {
diff --git a/Cunkebao/pages/device/index.vue b/Cunkebao/pages/device/index.vue
new file mode 100644
index 00000000..bd2f5446
--- /dev/null
+++ b/Cunkebao/pages/device/index.vue
@@ -0,0 +1,558 @@
+<!-- 设备管理页面 -->
+<template>
+  <view class="device-container">
+    <!-- 顶部导航栏 -->
+    <view class="header">
+      <view class="back-icon" @click="goBack">
+        <u-icon name="arrow-left" size="44" color="#000000"></u-icon>
+      </view>
+      <view class="title">设备管理</view>
+      <view class="header-right">
+        <view class="add-btn" @click="addDevice">
+          <u-icon name="plus" size="30" color="#ffffff"></u-icon>
+          <text class="add-text">添加设备</text>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 统计卡片 -->
+    <view class="stats-cards">
+      <view class="stat-card">
+        <view class="stat-label">总设备数</view>
+        <view class="stat-value blue">42</view>
+      </view>
+      <view class="stat-card">
+        <view class="stat-label">在线设备</view>
+        <view class="stat-value green">35</view>
+      </view>
+    </view>
+    
+    <!-- 内容区域 -->
+    <view class="content-container">
+      <!-- 搜索和筛选区域 -->
+      <view class="search-bar">
+        <view class="search-input">
+          <u-search 
+            placeholder="搜索设备IMEI/备注" 
+            v-model="searchKeyword"
+            :show-action="false"
+            :clearabled="true"
+            bgColor="#fff"
+            searchIconSize="50"
+            shape="round"
+          ></u-search>
+        </view>
+        <view class="filter-btn" @click="showFilter">
+          <image src="/static/images/icons/filter.svg" class="filter-icon"></image>
+        </view>
+        <view class="refresh-btn" @click="refreshList">
+          <u-icon name="reload" size="48" color="#333"></u-icon>
+        </view>
+      </view>
+      
+      <!-- 状态筛选 -->
+      <view class="filter-bar">
+        <view class="status-filter" @click="showStatusPopup">
+          <text>{{ statusText }}</text>
+          <u-icon name="arrow-down" size="28" color="#333"></u-icon>
+        </view>
+        <view class="select-all">
+          <u-checkbox v-model="selectAll" size="40" iconSize="35" shape="circle" activeColor="#4080ff"></u-checkbox>
+          <text class="select-text">全选</text>
+        </view>
+        <view class="delete-btn" @click="deleteDevices" :class="{disabled: !hasSelected}">
+          删除
+        </view>
+      </view>
+      
+      <!-- 设备列表 -->
+      <view class="device-list">
+        <!-- 设备项 1 -->
+        <view class="device-item">
+          <view class="device-checkbox">
+            <u-checkbox size="40" iconSize="35" v-model="device1Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
+          </view>
+          <view class="device-info">
+            <view class="device-header">
+              <view class="device-name">设备 1</view>
+              <view class="device-status online">在线</view>
+            </view>
+            <view class="device-imei">IMEI: sd123123</view>
+            <view class="device-wx">微信号: wxid_hxdxdoal</view>
+            <view class="device-likes">
+              <text>好友数: 435</text>
+              <text class="today-stats">今日新增: +20</text>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 设备项 2 -->
+        <view class="device-item">
+          <view class="device-checkbox">
+            <u-checkbox v-model="device2Selected" shape="circle" activeColor="#4080ff"
+            size="40" iconSize="35"
+            ></u-checkbox>
+          </view>
+          <view class="device-info">
+            <view class="device-header">
+              <view class="device-name">设备 2</view>
+              <view class="device-status online">在线</view>
+            </view>
+            <view class="device-imei">IMEI: sd123124</view>
+            <view class="device-wx">微信号: wxid_2i7sncgq</view>
+            <view class="device-likes">
+              <text>好友数: 143</text>
+              <text class="today-stats">今日新增: +26</text>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 设备项 3 -->
+        <view class="device-item">
+          <view class="device-checkbox">
+            <u-checkbox size="40" iconSize="35" v-model="device3Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
+          </view>
+          <view class="device-info">
+            <view class="device-header">
+              <view class="device-name">设备 3</view>
+              <view class="device-status online">在线</view>
+            </view>
+            <view class="device-imei">IMEI: sd123125</view>
+            <view class="device-wx">微信号: wxid_yunzn4lp</view>
+            <view class="device-likes">
+              <text>好友数: 707</text>
+              <text class="today-stats">今日新增: +48</text>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 设备项 4 -->
+        <view class="device-item">
+          <view class="device-checkbox">
+            <u-checkbox size="40" iconSize="35" v-model="device4Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
+          </view>
+          <view class="device-info">
+            <view class="device-header">
+              <view class="device-name">设备 4</view>
+              <view class="device-status offline">离线</view>
+            </view>
+            <view class="device-imei">IMEI: sd123126</view>
+            <view class="device-wx">微信号: wxid_4k39dnsc</view>
+            <view class="device-likes">
+              <text>好友数: 529</text>
+              <text class="today-stats">今日新增: +0</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 状态选择弹窗 -->
+    <u-picker
+      :show="statusPickerShow"
+      :columns="[statusOptions]"
+      @confirm="confirmStatus"
+      @cancel="cancelStatus"
+      confirmColor="#4080ff"
+      title="选择状态"
+    ></u-picker>
+    
+    <!-- 底部导航栏 -->
+    <CustomTabBar active="profile"></CustomTabBar>
+  </view>
+</template>
+
+<script>
+import CustomTabBar from '@/components/CustomTabBar.vue'
+
+export default {
+  components: {
+    CustomTabBar
+  },
+  data() {
+    return {
+      searchKeyword: '',
+      selectAll: false,
+      device1Selected: false,
+      device2Selected: false,
+      device3Selected: false,
+      device4Selected: false,
+      statusPickerShow: false,
+      statusOptions: [
+        { text: '全部状态', value: 'all' },
+        { text: '在线', value: 'online' },
+        { text: '离线', value: 'offline' }
+      ],
+      currentStatus: 'all'
+    }
+  },
+  computed: {
+    hasSelected() {
+      return this.device1Selected || this.device2Selected || this.device3Selected || this.device4Selected;
+    },
+    statusText() {
+      const selected = this.statusOptions.find(option => option.value === this.currentStatus);
+      return selected ? selected.text : '全部状态';
+    }
+  },
+  methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack();
+    },
+    
+    // 添加设备
+    addDevice() {
+      uni.showToast({
+        title: '添加设备功能待实现',
+        icon: 'none'
+      });
+    },
+    
+    // 刷新列表
+    refreshList() {
+      uni.showLoading({
+        title: '刷新中'
+      });
+      
+      setTimeout(() => {
+        uni.hideLoading();
+        uni.showToast({
+          title: '刷新成功',
+          icon: 'success'
+        });
+      }, 1000);
+    },
+    
+    // 显示筛选
+    showFilter() {
+      uni.showToast({
+        title: '筛选功能待实现',
+        icon: 'none'
+      });
+    },
+    
+    // 显示状态选择
+    showStatusPopup() {
+      this.statusPickerShow = true;
+    },
+    
+    // 确认状态选择
+    confirmStatus(e) {
+      this.currentStatus = e.value[0];
+      this.statusPickerShow = false;
+      
+      // 应用筛选逻辑
+      this.applyStatusFilter();
+    },
+    
+    // 应用状态筛选
+    applyStatusFilter() {
+      uni.showLoading({
+        title: '筛选中'
+      });
+      
+      // 模拟筛选过程
+      setTimeout(() => {
+        uni.hideLoading();
+        
+        // 提示用户
+        uni.showToast({
+          title: `已筛选: ${this.statusText}`,
+          icon: 'none'
+        });
+        
+        // 这里可以添加实际的设备筛选逻辑
+        // 根据 this.currentStatus 对设备列表进行筛选
+      }, 500);
+    },
+    
+    // 取消状态选择
+    cancelStatus() {
+      this.statusPickerShow = false;
+    },
+    
+    // 删除设备
+    deleteDevices() {
+      if (!this.hasSelected) return;
+      
+      uni.showModal({
+        title: '确认删除',
+        content: '确定要删除选中的设备吗？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({
+              title: '删除成功',
+              icon: 'success'
+            });
+            this.device1Selected = false;
+            this.device2Selected = false;
+            this.device3Selected = false;
+            this.device4Selected = false;
+            this.selectAll = false;
+          }
+        }
+      });
+    }
+  },
+  watch: {
+    selectAll(newVal) {
+      this.device1Selected = newVal;
+      this.device2Selected = newVal;
+      this.device3Selected = newVal;
+      this.device4Selected = newVal;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device-container {
+  min-height: 100vh;
+  background-color: #f9fafb;
+  padding-bottom: 180rpx;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 25rpx 30rpx;
+  background-color: #fff;
+  border-bottom: 1px solid #e9e9e9;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  
+  .back-icon {
+    width: 60rpx;
+    color: #000;
+    padding: 10rpx;
+    border-radius: 50%;
+    
+    &:active {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+  }
+  
+  .title {
+    position: absolute;
+    font-size: 40rpx;
+    float: left;
+    margin-left: 70rpx;
+  }
+  
+  .header-right {
+    .add-btn {
+      display: flex;
+      align-items: center;
+      background-color: #2563EB;
+      border-radius: 20rpx;
+      padding: 15rpx 30rpx;
+      color: #fff;
+      text-indent: 15rpx;
+      
+      .add-text {
+        color: #fff;
+        font-size: 28rpx;
+        margin-left: 8rpx;
+      }
+    }
+  }
+}
+
+.stats-cards {
+  display: flex;
+  justify-content: space-between;
+  padding: 20rpx;
+  margin-top: 130rpx;  // 添加顶部边距，为固定header留出空间
+  
+  .stat-card {
+    flex: 1;
+    background-color: #fff;
+    border-radius: 35rpx;
+    padding: 30rpx;
+    margin: 15rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+    
+    .stat-label {
+      font-size: 28rpx;
+      color: #666;
+    }
+    
+    .stat-value {
+      font-size: 55rpx;
+      font-weight: bold;
+      font-family: 'Digital-Bold', sans-serif;
+      
+      &.blue {
+        color: #4080ff;
+      }
+      
+      &.green {
+        color: #2fc25b;
+      }
+    }
+  }
+}
+
+.content-container {
+  margin: 0 30rpx;
+  background-color: #fff;
+  border-radius: 35rpx;
+  overflow: hidden;
+  border: 2rpx solid #e9e9e9;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  
+  .search-input {
+    flex: 1;
+    border: 1px solid #e9e9e9;
+    border-radius: 20rpx;
+    padding: 10rpx 20rpx;
+  }
+  
+  .filter-btn, .refresh-btn {
+    margin-left: 20rpx;
+    width: 80rpx;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 20rpx;
+    border: 2rpx solid #e9e9e9;
+  }
+}
+
+.filter-icon {
+  width: 43rpx;
+  height: 43rpx;
+}
+
+.filter-bar {
+  display: flex;
+  align-items: center;
+  padding: 10rpx 25rpx;
+
+  .status-filter {
+    display: flex;
+    align-items: center;
+    font-size: 28rpx;
+    color: #333;
+    padding: 10rpx 20rpx;
+    border-radius: 20rpx;
+    background-color: #fff;
+    border: 1rpx solid #e5e5e5;
+    min-width: 180rpx;
+    justify-content: space-between;
+    
+    text {
+      margin-right: 10rpx;
+    }
+    
+    &:active {
+      background-color: #f8f8f8;
+    }
+  }
+  
+  .select-all {
+    display: flex;
+    align-items: center;
+    margin-right: auto;
+    margin-left: 20rpx;
+    
+    .select-text {
+      font-size: 28rpx;
+      color: #333;
+      margin-left: 10rpx;
+    }
+  }
+  
+  .delete-btn {
+    margin-left: 30rpx;
+    background-color: #ee6666;
+    color: #fff;
+    padding: 10rpx 30rpx;
+    border-radius: 20rpx;
+    font-size: 28rpx;
+    
+    &.disabled {
+      background-color: #cccccc;
+    }
+  }
+}
+
+.device-list {
+  padding: 0;
+  
+  .device-item {
+    display: flex;
+    background-color: #fff;
+    padding: 30rpx;
+    margin: 25rpx;
+    border-radius: 20rpx;
+    border: 2rpx solid #e9e9e9;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .device-checkbox {
+      margin-right: 10rpx;
+      display: flex;
+      align-items: center;
+    }
+    
+    .device-info {
+      flex: 1;
+      
+      .device-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15rpx;
+        
+        .device-name {
+          font-size: 32rpx;
+          font-weight: bold;
+          color: #333;
+        }
+        
+        .device-status {
+          font-size: 24rpx;
+          padding: 6rpx 20rpx;
+          border-radius: 20rpx;
+          
+          &.online {
+            background-color: #e6f7f0;
+            color: #2fc25b;
+          }
+          
+          &.offline {
+            background-color: #f7eae9;
+            color: #ee6666;
+          }
+        }
+      }
+      
+      .device-imei, .device-wx {
+        font-size: 32rpx;
+        color: #666;
+      }
+      
+      .device-likes {
+        display: flex;
+        justify-content: space-between;
+        font-size: 32rpx;
+        color: #666;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/Cunkebao/pages/profile/index.vue b/Cunkebao/pages/profile/index.vue
index 9e71001e..7f6deeb4 100644
--- a/Cunkebao/pages/profile/index.vue
+++ b/Cunkebao/pages/profile/index.vue
@@ -4,7 +4,7 @@
     <view class="header">
       <view class="title">我的</view>
       <view class="header-icons">
-        <u-icon name="setting" size="50" color="#000000" class="icon-setting" @click="goToSetting"></u-icon>
+        <u-icon name="setting" size="45" color="#000000" class="icon-setting" @click="goToSetting"></u-icon>
         <u-icon name="bell" size="50" color="#000000" class="icon-bell" @click="goToNotification"></u-icon>
       </view>
     </view>
@@ -161,14 +161,14 @@ export default {
   min-height: 90vh;
   background-color: #f9fafb;
   position: relative;
-  padding-top: 50rpx;
+  padding-top: 46rpx;
 }
 
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 25rpx 30rpx;
+  padding: 30rpx 30rpx;
   background-color: #fff;
   border-bottom: 1px solid #e9e9e9;
   position: fixed;
@@ -178,9 +178,7 @@ export default {
   z-index: 999;
   
   .title {
-    font-size: 45rpx;
-    font-weight: bold;
-    color: #2664ec;
+    font-size: 40rpx;
   }
   
   .header-icons {
@@ -197,7 +195,7 @@ export default {
   margin: 35rpx;
   margin-top: 120rpx;
   background-color: #fff;
-  border-radius: 16rpx;
+  border-radius: 35rpx;
   padding: 50rpx;
   display: flex;
   align-items: center;
@@ -255,7 +253,7 @@ export default {
 .menu-list {
   margin: 35rpx;
   background-color: #fff;
-  border-radius: 16rpx;
+  border-radius: 35rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
   
diff --git a/Cunkebao/pages/scenarios/index.vue b/Cunkebao/pages/scenarios/index.vue
index aecd8de3..7eb63cce 100644
--- a/Cunkebao/pages/scenarios/index.vue
+++ b/Cunkebao/pages/scenarios/index.vue
@@ -310,8 +310,6 @@ export default {
   .title {
     position: absolute;
     font-size: 40rpx;
-    font-weight: bold;
-    color: #2563EB;
     float: left;
     margin-left: 70rpx;
   }
diff --git a/Cunkebao/static/images/icons/filter.svg b/Cunkebao/static/images/icons/filter.svg
new file mode 100644
index 00000000..4872a6b3
--- /dev/null
+++ b/Cunkebao/static/images/icons/filter.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 5L9 12V19L15 21V12L21 5H3Z" 
+        stroke="#333333" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+        fill="none" />
+</svg> 
\ No newline at end of file