Refactor/center

.gitignore

@@ -106,4 +106,6 @@ dist
 # Wechat miniprogram
 miniprogram_npm
 
-.idea
+.idea
+
+project.private.config.json

components/nav/index.js

@@ -4,13 +4,10 @@ Component({
   },
   properties: {
     navType: {
-      type: 'string',
-      value: '',
-    },
-    titleText: {
-      type: 'string',
-      value: '',
+      type: String,
+      value: 'title',
     },
+    titleText: String,
   },
   data: {
     visible: false,
@@ -66,6 +63,13 @@ Component({
         isSidebar: false,
       },
     ],
+    statusHeight: 0,
+  },
+  lifetimes: {
+    ready() {
+      const statusHeight = wx.getWindowInfo().statusBarHeight;
+      this.setData({ statusHeight });
+    },
   },
   methods: {
     openDrawer() {

components/nav/index.json

@@ -2,7 +2,7 @@
   "component": true,
   "usingComponents": {
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
-    "t-button": "tdesign-miniprogram/button/button",
+    "t-icon": "tdesign-miniprogram/icon/icon",
     "t-drawer": "tdesign-miniprogram/drawer/drawer",
     "t-search": "tdesign-miniprogram/search/search"
   }

components/nav/index.less

@@ -2,14 +2,15 @@
 
 .home-navbar {
   .t-navbar {
-    --td-navbar-padding-top: @navbar-padding-top;
-    --td-navbar-height: calc(@nav-bar-height - @navbar-padding-top) !important;
-
     &__left {
-      margin: 0;
+      margin-left: 12rpx;
     }
   }
 
+  &__icon {
+    padding: 12rpx;
+  }
+
   &__left {
     display: flex;
     align-items: center;
@@ -25,4 +26,5 @@
       }
     }
   }
+  --td-drawer-title-font-size: 48rpx;
 }

components/nav/index.wxml

@@ -1,8 +1,8 @@
 <view class="home-navbar">
-  <t-navbar title="{{ titleText }}">
+  <t-navbar title="{{ navType === 'search' ? '' : titleText }}">
     <view slot="left">
       <view class="home-navbar__left">
-        <t-button bind:touchend="openDrawer" icon="view-list" size="large" variant="text" shape="square" />
+        <t-icon class="home-navbar__icon" bind:tap="openDrawer" name="view-list" size="48rpx" />
         <t-search
           shape="round"
           placeholder="请搜索你想要的内容"
@@ -12,5 +12,12 @@
       </view>
     </view>
   </t-navbar>
-  <t-drawer visible="{{visible}}" items="{{sidebar}}" placement="left" title="页面目录" bind:item-click="itemClick" />
+  <t-drawer
+    style="padding-top: {{statusHeight}}px;"
+    visible="{{visible}}"
+    items="{{sidebar}}"
+    placement="left"
+    title="页面目录"
+    bind:item-click="itemClick"
+  />
 </view>

mock/my/getPersonalInfo.js

@@ -4,7 +4,7 @@ export default {
     code: 200,
     message: 'success',
     data: {
-      image: '/../../images/avatar1.png',
+      image: '/images/avatar1.png',
       name: '小小轩',
       star: '天枰座',
       city: '深圳',

mock/my/getServiceList.js

@@ -5,14 +5,14 @@ export default {
     message: 'success',
     data: {
       service: [
-        { image: '/../images/image.png', name: '微信', type: 'weixin', url: '' },
-        { image: '/../images/image(1).png', name: 'QQ', type: 'QQ', url: '' },
-        { image: '/../images/image(2).png', name: '腾讯文档', type: 'document', url: '' },
-        { image: '/../images/image(3).png', name: '腾讯地图', type: 'map', url: '' },
-        { image: '/../images/image(4).png', name: '数据中心', type: 'data', url: '/pages/dataCenter/index' },
-        { image: '/../images/image(4).png', name: '数据中心', type: 'data', url: '/pages/dataCenter/index' },
-        { image: '/../images/image(4).png', name: '数据中心', type: 'data', url: '/pages/dataCenter/index' },
-        { image: '/../images/image(4).png', name: '数据中心', type: 'data', url: '/pages/dataCenter/index' },
+        { image: '/images/icon_wx.png', name: '微信', type: 'weixin', url: '' },
+        { image: '/images/icon_qq.png', name: 'QQ', type: 'QQ', url: '' },
+        { image: '/images/icon_doc.png', name: '腾讯文档', type: 'document', url: '' },
+        { image: '/images/icon_map.png', name: '腾讯地图', type: 'map', url: '' },
+        { image: '/images/icon_td.png', name: '数据中心', type: 'data', url: '/pages/dataCenter/index' },
+        { image: '/images/icon_td.png', name: '数据中心', type: 'data', url: '/pages/dataCenter/index' },
+        { image: '/images/icon_td.png', name: '数据中心', type: 'data', url: '/pages/dataCenter/index' },
+        { image: '/images/icon_td.png', name: '数据中心', type: 'data', url: '/pages/dataCenter/index' },
       ],
     },
   },

pages/dataCenter/index.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "数据中心",
+  "navigationStyle": "custom",
   "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-progress": "tdesign-miniprogram/progress/progress",
     "t-empty": "tdesign-miniprogram/empty/empty"
   }

pages/dataCenter/index.wxml

@@ -1,3 +1,4 @@
+<t-navbar title="数据中心" left-arrow />
 <view class="data-center">
   <view class="card first">
     <view class="card-header">

pages/login/login.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "",
+  "navigationStyle": "custom",
   "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-input": "tdesign-miniprogram/input/input",
     "t-icon": "tdesign-miniprogram/icon/icon",
     "t-link": "tdesign-miniprogram/link/link",

pages/login/login.wxml

@@ -1,3 +1,4 @@
+<t-navbar left-arrow />
 <view class="page login">
   <view class="login__title"> 欢迎登录 TDsign </view>
   <view class="login__content">

pages/loginCode/loginCode.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "",
+  "navigationStyle": "custom",
   "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-input": "tdesign-miniprogram/input/input",
     "t-link": "tdesign-miniprogram/link/link",
     "t-button": "tdesign-miniprogram/button/button"

pages/loginCode/loginCode.wxml

@@ -1,3 +1,4 @@
+<t-navbar left-arrow />
 <view class="page login-code">
   <view class="login-code__title"> 请输入验证码 </view>
   <view class="login-code__tips"> 验证码已通过短信发送至 {{ phoneNumber }} </view>

pages/my/index.less

@@ -2,7 +2,13 @@
   height: calc(100vh - 56px);
   overflow-y: auto;
 
-  --td-navbar-bg-color: #f5f6f7;
+  --td-navbar-bg-color: transparent;
+  .nav-bg {
+    width: 750rpx;
+    height: 200rpx;
+    position: fixed;
+    top: 0;
+  }
 
   &-info,
   &-service,
@@ -12,7 +18,7 @@
 
   &-info {
     border-radius: 24rpx;
-    margin: 0rpx 32rpx 0rpx 32rpx;
+    margin: 8rpx 32rpx 0rpx 32rpx;
     padding-bottom: 32rpx;
     overflow: hidden;
 
@@ -39,24 +45,27 @@
     }
 
     .split-line {
-      border-right: 2rpx solid #e7e7e7;
+      border-right: 1px solid #e7e7e7;
     }
 
-    &__person {
-      width: 390rpx;
-      height: 104rpx;
-      opacity: 1;
-      color: #000000e6;
-      font-size: 32rpx;
-      font-weight: 600;
+    // 头像margin-right
+    --td-spacer-1: 32rpx;
 
+    &__person {
       .name {
         line-height: 48rpx;
+        font-size: 32rpx;
+        color: #000000e6;
+        font-weight: 600;
       }
 
       .tags {
         display: flex;
-        margin-top: 16px;
+        margin-top: 16rpx;
+
+        --td-text-color-primary: #000000e6;
+        --td-tag-medium-font-size: 20rpx;
+        --td-tag-medium-icon-size: 24rpx;
       }
 
       .tag:not(:last-child) {

pages/my/index.wxml

@@ -1,22 +1,22 @@
 <view class="my">
-  <nav nav-type="title" title-text="我的" />
+  <image class="nav-bg" src="/images/bg_navbar.png" />
+  <nav title-text="我的" />
   <view class="my-info">
     <t-cell-group>
       <t-cell wx:if="{{isLoad}}" bordered="{{false}}">
         <t-avatar image="{{personalInfo.image}}" slot="left-icon" size="large" />
-        <view class="my-info__person" slot="note">
+        <view class="my-info__person" slot="description">
           <view class="name">{{personalInfo.name}}</view>
           <view class="tags">
             <t-tag class="tag" variant="light" icon="discount">{{personalInfo.star}}</t-tag>
             <t-tag class="tag" variant="light" icon="location">{{personalInfo.city}}</t-tag>
           </view>
         </view>
-        <t-icon slot="right-icon" name="edit" size="40rpx" bindtap="onNavigateTo" />
+        <t-icon slot="right-icon" name="edit" size="40rpx" color="#000000e6" bindtap="onNavigateTo" />
       </t-cell>
       <t-cell
         wx:if="{{!isLoad}}"
         title="请先登录/注册"
-        align="middle"
         bordered="{{false}}"
         t-class-title="cell-class-title"
         t-class-center="cell-class-center"
@@ -35,7 +35,7 @@
   </view>
 
   <view class="my-service">
-    <view class="my-service--tips"> 推荐服务 </view>
+    <view class="my-service--tips">推荐服务</view>
     <t-grid column="{{4}}" class="my-service__list">
       <t-grid-item
         class="my-service__list-item"

pages/my/info-edit/index.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "个人信息",
+  "navigationStyle": "custom",
   "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-input": "tdesign-miniprogram/input/input",
     "t-cell": "tdesign-miniprogram/cell/cell",
     "t-radio": "tdesign-miniprogram/radio/radio",

pages/my/info-edit/index.wxml

@@ -43,6 +43,7 @@
   <t-picker-item options="{{cities}}"></t-picker-item>
 </t-picker> -->
 
+<t-navbar title="个人信息" left-arrow />
 <view class="info-edit">
   <t-cell title="用户名" class="cell-class">
     <t-input

pages/release/index.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "发布动态",
+  "navigationStyle": "custom",
   "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-upload": "tdesign-miniprogram/upload/upload",
     "t-textarea": "tdesign-miniprogram/textarea/textarea",
     "t-cell": "tdesign-miniprogram/cell/cell",

pages/release/index.wxml

@@ -1,4 +1,4 @@
-<!-- pages/release/index.wxml -->
+<t-navbar title="发布动态" left-arrow />
 <view class="release-container">
   <view class="upload box">
     <t-upload

pages/search/index.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "搜索",
+  "navigationStyle": "custom",
   "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-search": "/miniprogram_npm/tdesign-miniprogram/search/search",
     "t-icon": "/miniprogram_npm/tdesign-miniprogram/icon/icon",
     "t-dialog": "/miniprogram_npm/tdesign-miniprogram/dialog/dialog",

pages/search/index.wxml

@@ -1,3 +1,4 @@
+<t-navbar title="搜索" left-arrow />
 <view class="search-page">
   <view class="search-input">
     <t-search

pages/setting/index.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "设置",
+  "navigationStyle": "custom",
   "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
     "t-cell": "tdesign-miniprogram/cell/cell",
     "t-icon": "tdesign-miniprogram/icon/icon"

pages/setting/index.wxml

@@ -1,3 +1,4 @@
+<t-navbar title="设置" left-arrow />
 <view class="setting">
   <t-cell-group wx:for="{{menuData}}" wx:for-item="item" wx:key="index" t-class="cell-group-class" theme="card">
     <t-cell

project.config.json

@@ -83,6 +83,20 @@
           "pathName": "pages/dataCenter/index",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "release",
+          "pathName": "pages/release/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "setting",
+          "pathName": "pages/setting/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }