Merge pull request 'Optimize global styles and add API documentation.' (#23) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/23

README.md

@@ -15,6 +15,7 @@ __*!!!警告!!!*__
 - [社区介绍](#小程序社区)
 - [项目设计](#第三代小程序)
 - [贡献规范](#社区贡献规范)
+- [API文档](https://docs.apipost.cn/preview/e737de418d4ef150/419d45d8c97d6a9f)
 - [入门文档(等待撰写)](#第三代掌上教务处小程序)
 - [设计架构(等待撰写)](#第三代掌上教务处小程序)
 

miniprogram/app.scss

@@ -5,30 +5,90 @@ $theme-color-red: #FF9393;
 $theme-color-light-layout: #F8F8F8;
 $theme-color-light-background: #f4f0f1;
 $theme-color-light-title: rgba(0, 0, 0, .65);
-$theme-color-light-text: rgba(0, 0, 0, .55);
+$theme-color-light-text: rgba(0, 0, 0, .5);
 
-$theme-color-dark-layout: #191919;
+$theme-color-dark-layout: #1f1f1f;
-$theme-color-dark-background: #1f1f1f;
+$theme-color-dark-background: #181615;
 $theme-color-dark-title: rgba(255, 255, 255, .65);
-$theme-color-dark-text: rgba(255, 255, 255, .55);
+$theme-color-dark-text: rgba(255, 255, 255, .5);
 
 $black-filter: brightness(0) opacity(.65);
 $white-filter: brightness(100) opacity(.65);
 $blue-filter: opacity(.65);
 
+// 页面容器外边距
+view.container {
+    width: 88%;
+    padding: 0 6%;
+}
 
+// 带阴影的 card
+view.card {
+    width: calc( 100% - 36px );
+    padding: 0 18px;
+    border-radius: 15px;
+    background-color: $theme-color-light-layout;
+    box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .08), 
+                0 0.3px 0.9px 0 rgba(0, 0, 0, .05);
+}
+
+// 顶部导航栏阴影
+view.top-shadow {
+    position: fixed;
+    z-index: 9999;
+    width: 100%;
+    height: 10px;
+    top: -10px;
+    box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .05);
+}
 
 page {
-    background-color: #f4f0f1;
+    background-color: $theme-color-light-background;
     color: $theme-color-light-text;
-    font-weight: 500;
+}
-    font-size: .9em;
+
+view, text {
+    font-size: .99em;
     font-family: Hiragino Sans GB, MicroSoft YaHei;
 }
 
+view.h1 {
+    color: $theme-color-light-title;
+    font-size: 1.5em;
+}
+
+view.h2 {
+    color: $theme-color-light-title;
+    font-size: 1.3em;
+}
+
+view.h3 {
+    color: $theme-color-light-title;
+    font-size: 1em;
+}
+ 
 @media (prefers-color-scheme: dark){
     page {
-      background-color: #1f1f1f;
+        background-color: $theme-color-dark-background;
         color: $theme-color-dark-text;
     }
+
+    view.card {
+        background-color: $theme-color-dark-layout;
+    }
+
+    view.h1 {
+        color: $theme-color-dark-title;
+        font-size: 1.2em;
+    }
+
+    view.h2 {
+        color: $theme-color-dark-title;
+        font-size: 1.3em;
+    }
+    
+    view.h3 {
+        color: $theme-color-dark-title;
+        font-size: 1em;
+    }
 }

miniprogram/pages/Account/Account.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationBarTitleText": "设置"
 }

miniprogram/pages/Account/Account.scss

@@ -0,0 +1,39 @@
+@import "../../app.scss";
+
+view.container {
+
+    // 用户卡片
+    view.user-card {
+        margin-top: 20px;
+        height: 100px;
+        display: flex;
+        padding-top: 20px;
+        padding-bottom: 20px;
+
+        view.avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 1000px;
+            overflow: hidden;
+        }
+        
+        view.info {
+            width: calc(100% - 80px - 20px);
+            padding-left: 20px;
+            
+            view.nick {
+                margin: 4px 0;
+            }
+
+            view.student {
+                margin: 1px 0;
+            }
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    view.container view.user-card view.avatar{
+        filter: brightness(.8);
+    }
+}

miniprogram/pages/Account/Account.wxml

@@ -1 +1,22 @@
-<!-- <text>pages/Account/Account.wxml</text> -->
+
+<!-- 顶部的阴影 -->
+<view class="top-shadow"></view>
+
+<!-- 页面容器 -->
+<view class="container">
+
+    <!-- 用户卡片 -->
+    <view class="user-card card">
+        <view class="avatar">
+            <open-data type="userAvatarUrl" />
+        </view>
+        <view class="info">
+            <view class="nick h1">
+                <open-data type="userNickName" />
+            </view>
+            <view class="student">秦浩轩</view>
+            <view class="student">1806240113</view>
+        </view>
+    </view>
+
+</view>

miniprogram/pages/Timetable/StatusBar.scss

@@ -9,7 +9,7 @@ view.status-bar {
     display: flex;
     position: fixed;
     justify-content: space-between;
-    background-color: #F8F8F8;
+    background-color: $theme-color-light-layout;
 
     view.select {
         flex: 1;
@@ -111,7 +111,7 @@ view.status-bar-blank {
     }
 
     view.status-bar {
-        background-color: #191919;
+        background-color: $theme-color-dark-layout;
       
         view.select image {
             filter: $white-filter;

miniprogram/theme.json

@@ -11,9 +11,9 @@
   },
 
   "dark": {
-    "navigationBarBackgroundColor": "#191919",
+    "navigationBarBackgroundColor": "#1f1f1f",
     "navigationBarTextStyle": "white",
-    "backgroundColor": "#1f1f1f",
+    "backgroundColor": "#191919",
 
     "tabBarColor": "#666666",
     "tabBarImage0": "image/navBar/0_dark.png",

project.config.json

@@ -26,9 +26,9 @@
         "uploadWithSourceMap": true,
         "compileHotReLoad": false,
         "lazyloadPlaceholderEnable": false,
-    "useMultiFrameRuntime": true,
+        "useMultiFrameRuntime": false,
-    "useApiHook": true,
+        "useApiHook": false,
-    "useApiHostProcess": true,
+        "useApiHostProcess": false,
         "babelSetting": {
             "ignore": [],
             "disablePlugins": [],

project.private.config.json

@@ -0,0 +1,23 @@
+{
+  "condition": {
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "name": "Account",
+          "pathName": "pages/Account/Account",
+          "query": "",
+          "scene": null
+        }
+      ]
+    }
+  }
+}