fix: 完成通行权限首页UI

manifest.config.ts

@@ -1,6 +1,7 @@
 // manifest.config.ts
 import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'
-import path from 'node:path'
+// import path from 'node:path'
+import * as path from 'path'
 import { loadEnv } from 'vite'
 
 // 获取环境变量的范例

package.json

@@ -122,6 +122,8 @@
     "@uni-helper/vite-plugin-uni-pages": "0.2.20",
     "@uni-helper/vite-plugin-uni-platform": "^0.0.4",
     "@unocss/preset-legacy-compat": "^0.59.4",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/runtime-core": "^3.5.13",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.20",

src/components/TopNavigation/TopNavigation.vue

@@ -26,11 +26,14 @@
           class="pos-absolute left-3 h-5 w-5"
           @click="back"
         ></image>
-        <view class="flex flex-items-center">
+        <view class="flex-1 text-center">
-          <view class="line-clamp-1 max-w-60 break-all">
+          <view class="line-clamp-1 max-w-60 break-all mx-auto">
             {{ title }}
           </view>
         </view>
+        <view class="pos-absolute right--3">
+          <slot></slot>
+        </view>
       </view>
     </view>
   </view>

src/hooks/useRequest.ts

@@ -1,4 +1,5 @@
 import { UnwrapRef } from 'vue'
+import { IResData } from '@/typings'
 
 type IUseRequestOptions<T> = {
   /** 是否立即执行 */

src/pages.json

@@ -278,6 +278,14 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/personnel-passage/access-authority/access-authority",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "subPackages": []

src/pages/home/home.vue

@@ -122,7 +122,8 @@
         {
           id: 106,
           icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
-          name: '通行权限'
+          name: '通行权限',
+          url: '/pages/personnel-passage/access-authority/access-authority'
         },
         {
           id: 230,

src/pages/personnel-passage/access-authority/access-authority.vue

@@ -0,0 +1,384 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="passage-container">
+    <TopNavigation title="通行权限">
+      <view class="header-right mr-4">
+        <image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
+      </view>
+    </TopNavigation>
+
+    <!-- 替换原来的 banner 部分为 AccessSwiper -->
+    <AccessSwiper class="mt-4" />
+
+    <!-- 权限组快捷入口 -->
+    <view class="quick-actions">
+      <view class="quick-item">
+        <view class="quick-content">
+          <text class="quick-title">添加权限组</text>
+          <text class="quick-desc">门禁授权</text>
+          <image class="quick-icon" src="/static/images/icon_add_group.png" mode="aspectFit" />
+        </view>
+      </view>
+      <view class="quick-item">
+        <view class="quick-content">
+          <text class="quick-title">下发权限</text>
+          <text class="quick-desc">同步权限到设备</text>
+          <image class="quick-icon" src="/static/images/icon_publish.png" mode="aspectFit" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 人员管理 -->
+    <view class="feature-item">
+      <view class="feature-left">
+        <image
+          class="feature-icon"
+          src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png"
+        />
+        <view class="feature-text">
+          <text class="feature-title">人员管理</text>
+          <text class="feature-desc">团队管理内录入人员信息/人脸/指纹/卡</text>
+        </view>
+      </view>
+      <image class="arrow" src="/static/images/icon_black_right.png" />
+    </view>
+
+    <!-- 通行权限组 -->
+    <view class="access-authority-group">
+      <view class="feature-item">
+        <view class="feature-left">
+          <image
+            class="feature-icon"
+            src="https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.png"
+          />
+          <view class="feature-text">
+            <text class="feature-title">通行权限组</text>
+            <text class="feature-desc">配置人员在某段时间能开某个门</text>
+          </view>
+        </view>
+        <image class="arrow" src="/static/images/icon_black_right.png" />
+      </view>
+
+      <!-- 时间计划和门禁点分组 -->
+      <view class="sub-features">
+        <view class="sub-item">
+          <image
+            class="sub-icon"
+            src="https://file.hikmall.com/prod/image/0526d084da4a49579f832dd4588dcb16.png"
+          />
+          <text>通行时间计划</text>
+        </view>
+        <view class="sub-item">
+          <image
+            class="sub-icon"
+            src="https://file.hikmall.com/prod/image/7ea5f88d404442eeb958fbe0904777d1.png"
+          />
+          <text>门禁点分组</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 权限查询 -->
+    <view class="feature-item">
+      <view class="feature-left">
+        <image
+          class="feature-icon"
+          src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
+        />
+        <view class="feature-text">
+          <text class="feature-title">权限查询</text>
+          <text class="feature-desc">查询人员通行权限，与信息下发状态</text>
+        </view>
+      </view>
+      <image class="arrow" src="/static/images/icon_black_right.png" />
+    </view>
+
+    <!-- 下发记录 -->
+    <view class="feature-item">
+      <view class="feature-left">
+        <image
+          class="feature-icon"
+          src="https://file.hikmall.com/prod/image/e6860e8e5cc64369accadae5347fb0c1.png"
+        />
+        <view class="feature-text">
+          <text class="feature-title">下发记录</text>
+          <text class="feature-desc">查询下发状态与结果</text>
+        </view>
+      </view>
+      <image class="arrow" src="/static/images/icon_black_right.png" />
+    </view>
+  </view>
+
+  <!-- 底部导航 -->
+  <view class="tab-bar">
+    <view class="tab-item active">
+      <image
+        class="tab-icon"
+        src="https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png"
+      />
+      <text>通行权限</text>
+    </view>
+    <view class="tab-item">
+      <image
+        class="tab-icon"
+        src="https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png"
+      />
+      <text>门禁控制</text>
+    </view>
+    <view class="tab-item">
+      <image
+        class="tab-icon"
+        src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
+      />
+      <text>通行记录</text>
+    </view>
+  </view>
+  <!--  </view>-->
+</template>
+
+<script setup>
+  import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
+  import AccessSwiper from './components/AccessSwiper.vue'
+</script>
+
+<style scoped lang="scss">
+  .passage-container {
+    min-height: 100vh;
+    padding: 0 16px;
+    background-color: #f5f6fa;
+  }
+
+  .header-right {
+    display: flex;
+    gap: 8px; // 图标之间的间距
+    align-items: end;
+
+    .icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .banner {
+    padding: 20px;
+    margin-bottom: 16px;
+    background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
+    border-radius: 12px;
+
+    .banner-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #fff;
+
+      .banner-text {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .banner-title {
+          font-size: 18px;
+          font-weight: bold;
+        }
+
+        .banner-desc {
+          font-size: 14px;
+          opacity: 0.8;
+        }
+      }
+
+      .banner-btn {
+        padding: 6px 12px;
+        font-size: 14px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 16px;
+      }
+    }
+  }
+
+  .quick-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin: 12px 0;
+
+    .quick-item {
+      position: relative;
+      height: 50px;
+      padding: 12px;
+      border-radius: 8px;
+
+      &:first-child {
+        background-color: #eef4ff;
+        // background: red;
+        .quick-icon {
+          background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
+        }
+      }
+
+      &:last-child {
+        background-color: #fff7f2;
+        .quick-icon {
+          background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
+        }
+      }
+
+      .quick-content {
+        position: relative;
+        height: 100%;
+
+        .quick-title {
+          font-size: 15px;
+          font-weight: 500;
+          color: #333;
+        }
+
+        .quick-desc {
+          display: block;
+          margin-top: 8px;
+          font-size: 11px;
+          color: #666;
+        }
+
+        .quick-icon {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 45px;
+          height: 45px;
+          // padding: 8px;
+          border-radius: 50%;
+          transform: translateY(-50%);
+
+          image {
+            width: 100%;
+            height: 100%;
+            filter: brightness(0) invert(1); // 将图标改为白色
+          }
+        }
+      }
+    }
+  }
+
+  //.feature-list {
+  //  padding: 4px 0;
+  //  background-color: #fff;
+  //border-radius: 12px;
+
+  .access-authority-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 12px;
+    background-color: #fff;
+    border-radius: 12px;
+  }
+
+  .feature-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    margin-bottom: 12px;
+    background-color: #fff;
+    border-radius: 12px;
+    //border-bottom: 1px solid #f5f5f5;
+
+    .feature-left {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      .feature-icon {
+        width: 24px;
+        height: 24px;
+      }
+
+      .feature-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .feature-title {
+          font-size: 16px;
+          font-weight: 500;
+        }
+
+        .feature-desc {
+          font-size: 12px;
+          color: #666;
+        }
+      }
+    }
+
+    .arrow {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  //}
+
+  .sub-features {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    padding: 0 16px 12px 16px;
+
+    .sub-item {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      padding: 12px;
+      background-color: #f5f6fa;
+      border-radius: 8px;
+
+      .sub-icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      text {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .tab-bar {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-around;
+    padding: 8px 0;
+    background-color: #fff;
+    border-top: 1px solid #f5f5f5;
+
+    .tab-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      align-items: center;
+
+      .tab-icon {
+        width: 24px;
+        height: 24px;
+      }
+
+      text {
+        font-size: 12px;
+      }
+
+      &.active {
+        color: #2b5cff;
+      }
+    }
+  }
+</style>

src/pages/personnel-passage/access-authority/components/AccessSwiper.vue

@@ -0,0 +1,200 @@
+<template>
+  <swiper
+    class="swiper-container"
+    :indicator-dots="true"
+    :autoplay="true"
+    :interval="3000"
+    :duration="500"
+    indicator-active-color="#FFFFFF"
+    indicator-color="rgba(255, 255, 255, 0.4)"
+  >
+    <!-- 访客通行卡片 -->
+    <swiper-item>
+      <view class="visitor-card">
+        <view class="card-content">
+          <view class="card-left">
+            <text class="card-title">访客人员，临时通行</text>
+            <text class="card-desc">使用访客管理，来访轻松搞定</text>
+            <view class="card-btn">看详情 ></view>
+          </view>
+          <view class="card-right">
+            <image src="/static/images/visitor-illustration.png" mode="aspectFit" />
+          </view>
+        </view>
+      </view>
+    </swiper-item>
+
+    <swiper-item>
+      <view class="visitor-card">
+        <view class="card-content">
+          <view class="card-left">
+            <text class="card-title">通行权限使用说明</text>
+            <text class="card-desc">区分长期通行与临时通行,对长期通信人员下发通行权限</text>
+            <view class="card-btn">看详情 ></view>
+          </view>
+          <view class="card-right">
+            <image src="/static/images/visitor-illustration.png" mode="aspectFit" />
+          </view>
+        </view>
+      </view>
+    </swiper-item>
+
+    <!-- 提醒卡片 -->
+    <swiper-item>
+      <view class="remind-card">
+        <view class="card-header">
+          <text class="remind-tag">提醒</text>
+          <text class="remind-text">您有11条信息未同步到设备</text>
+          <image class="arrow-icon" src="/static/images/icon_white_right.png" mode="aspectFit" />
+        </view>
+        <view class="stats-container">
+          <view class="stat-item">
+            <text class="stat-num">2</text>
+            <text class="stat-label">人员/通行规则</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-num">0</text>
+            <text class="stat-label">人脸</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-num">7</text>
+            <text class="stat-label">指纹</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-num">0</text>
+            <text class="stat-label">卡片</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-num">2</text>
+            <text class="stat-label">密码</text>
+          </view>
+        </view>
+      </view>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+  .swiper-container {
+    height: 140px;
+    overflow: hidden;
+    border-radius: 12px;
+  }
+
+  //   .swiper-card {
+  //     height: 100%;
+  //     padding: 24px 16px;
+  //     border-radius: 12px;
+  //   }
+
+  .visitor-card {
+    height: 100%;
+    padding: 16px 16px;
+    background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
+    border-radius: 12px;
+
+    .card-content {
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+      height: 100%;
+      color: #fff;
+
+      .card-left {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .card-title {
+          font-size: 18px;
+          font-weight: 500;
+        }
+
+        .card-desc {
+          font-size: 10px;
+          opacity: 0.8;
+        }
+
+        .card-btn {
+          width: fit-content;
+          padding: 4px 8px;
+          margin-top: 15px;
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 12px;
+        }
+      }
+
+      .card-right {
+        width: 120px;
+        height: 120px;
+
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .remind-card {
+    height: 100%;
+    padding: 16px;
+    color: #fff;
+    background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
+    border-radius: 12px;
+
+    .card-header {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      padding: 4px;
+      margin-bottom: 10px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 4px;
+
+      .remind-tag {
+        padding: 2px 6px;
+        font-size: 11px;
+        // background: rgba(255, 255, 255, 0.2);
+        // border-radius: 4px;
+      }
+
+      .remind-text {
+        flex: 1;
+        font-size: 12px;
+      }
+
+      .arrow-icon {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    .stats-container {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 12px;
+      padding-top: 12px;
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        align-items: center;
+
+        .stat-num {
+          font-size: 18px;
+          font-weight: 500;
+        }
+
+        .stat-label {
+          font-size: 11px;
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+</style>

src/service/user.ts

@@ -62,8 +62,8 @@ interface TeamInfo {
 }
 
 // 获取用户信息
-export const getUserInfoApi = (params: UserInfo) => {
+export const getUserInfoApi = () => {
-  return http.post('/v1/user/detail', params)
+  return http.post('/v1/user/detail')
 }
 
 export interface resetPasswordRequest {

src/types/uni-pages.d.ts

@@ -33,7 +33,8 @@ interface NavigateToOptions {
        "/pages/attendance/attendance-add-group/attendance-staff" |
        "/pages/attendance/attendance-add-group/attendance-time" |
        "/pages/attendance/attendance-add-group/outside-rules" |
-       "/pages/attendance/attendance-add-group/special-date-set";
+       "/pages/attendance/attendance-add-group/special-date-set" |
+       "/pages/personnel-passage/access-authority/access-authority";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "esModuleInterop": true,
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",

vite-plugins/copyNativeRes.ts

@@ -1,5 +1,6 @@
 import fs from 'fs-extra'
-import path from 'path'
+// import path from 'path'
+import * as path from 'path'
 
 export function copyNativeRes() {
   const waitPath = path.resolve(__dirname, '../src/nativeResources')