feat(pages/source): 添加书源管理页面及功能

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "Codegeex.CommitMessageStyle": "ConventionalCommits"
+    "Codegeex.CommitMessageStyle": "ConventionalCommits",
+    "Codegeex.GenerationPreference": "line by line"
 }

src/common/css/page.css

@@ -113,7 +113,7 @@
   width: 100%;
   padding: 12px 12px;
   border-radius: 8px;
-  background-color: rgba(255,255,255,0.1);
+  background-color: #161616;
   align-items: center;
   margin-bottom: 8px;
 }
@@ -149,23 +149,35 @@
   color: black;
 }
 
+.menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  background-color: rgba(0,0,0,0.8);
+  justify-content: center;
+  flex-direction: column;
+  transform: translateX(100%);
+}
+
 @keyframes In {
   100% {
     transform: translateX(-336px);
-    /* opacity: 1; */
   }
 
   0% {
     transform: translateX(0%);
-    /* opacity: 0; */
   }
 }
 
 .animation-in {
   animation-name: In;
   animation-duration: 200ms;
-  margin-left: 336px;
   animation-timing-function: ease-out;
+  animation-delay: 50ms;
+  margin-left: 336px;
 }
 
 @keyframes Out {
@@ -183,8 +195,9 @@
 .animation-out {
   animation-name: Out;
   animation-duration: 200ms;
-  margin-left: 0;
   animation-timing-function: ease-in;
+  animation-delay: 50ms;
+  margin-left: 0;
 }
 
 @keyframes InBack {
@@ -202,8 +215,9 @@
 .animation-in-back {
   animation-name: InBack;
   animation-duration: 200ms;
-  margin-left: -336px;
+  animation-delay: 50ms;
   animation-timing-function: ease-out;
+  margin-left: -336px;
 }
 
 @keyframes OutBack {
@@ -221,8 +235,9 @@
 .animation-out-back {
   animation-name: OutBack;
   animation-duration: 200ms;
-  margin-left: 0;
+  animation-delay: 50ms;
   animation-timing-function: ease-in;
+  margin-left: 0;
 }
 
 /* style reset classes */

src/manifest.json

@@ -29,6 +29,14 @@
         "component": "about",
         "launchMode": "singleTask"
       },
+      "pages/setting": {
+        "component": "setting",
+        "launchMode": "singleTask"
+      },
+      "pages/source": {
+        "component": "source",
+        "launchMode": "singleTask"
+      },
       "pages/detail": {
         "component": "detail"
       }

src/pages/setting/setting.ux

@@ -142,7 +142,6 @@ export default {
         storage.get({
           key: item.name,
           success: (data) => {
-            console.log(data)
             item.value = JSON.parse(data)
           }
         })

src/pages/source/source.ux

@@ -0,0 +1,107 @@
+<template>
+  <div class="page {{pageClass}}" id="page" @swipe="pageSwipe">
+    <div class="topbar">
+      <image src="/common/icon/back.png" class="icon" @click="back()" />
+      <text class="title">书源管理</text>
+      <image src="/common/icon/menu.png" class="icon" @click="toggleMenu" />
+    </div>
+    <div class="body">
+      <swiper class="body-swiper" id="body-swiper" style="height: {{swiperHeight}}px" indicator="false" loop="false">
+        <div class="swiper-container">
+          <scroll class="body-container" scroll-y="true" bounces="true">
+            <block for="item in list">
+              <div class="card" @click="toggleMenu(item)">
+                <div class="col grow">
+                  <text class="card-btn-text margin-0">{{ item.title }}</text>
+                </div>
+                <image src="/common/icon/check{{ item.value ? '-active' : ''}}.png" class="icon"
+                  @click="setValue(item, !item.value)" />
+              </div>
+            </block>
+          </scroll>
+          <div class="menu {{ menu }}" @click="toggleMenu" @swipe="toggleMenu">
+            <block if="activeItem">
+              <div class="card">
+                <image src="/common/icon/up.png" class="icon" />
+                <text class="card-btn-text center">置顶</text>
+              </div>
+              <div class="card">
+                <image src="/common/icon/down.png" class="icon" />
+                <text class="card-btn-text center">置底</text>
+              </div>
+              <div class="card">
+                <image src="/common/icon/password.png" class="icon" />
+                <text class="card-btn-text center">登录</text>
+              </div>
+              <div class="card">
+                <image src="/common/icon/search.png" class="icon" />
+                <text class="card-btn-text center">搜索</text>
+              </div>
+              <div class="card">
+                <image src="/common/icon/trash.png" class="icon" />
+                <text class="card-btn-text center">删除</text>
+              </div>
+              <div class="card" @click="setValue(activeItem, !activeItem.value)">
+                <image src="/common/icon/check{{ activeItem.value ? '-active' : ''}}.png" class="icon" />
+                <text class="card-btn-text center">{{ activeItem.value ? "禁用" : "启用" }}发现</text>
+              </div>
+            </block>
+            <block else>
+              <div class="card">
+                <image src="/common/icon/web.png" class="icon" />
+                <text class="card-btn-text center">网络导入</text>
+              </div>
+              <div class="card">
+                <image src="/common/icon/group.png" class="icon" />
+                <text class="card-btn-text center">分组管理</text>
+              </div>
+              <div class="card">
+                <image src="/common/icon/trash.png" class="icon" />
+                <text class="card-btn-text center">清空书源</text>
+              </div>
+              <div class="card">
+                <image src="/common/icon/help.png" class="icon" />
+                <text class="card-btn-text center">帮助</text>
+              </div>
+            </block>
+          </div>
+        </div>
+      </swiper>
+    </div>
+  </div>
+</template>
+
+<script>
+const {template, router} = global
+
+export default {
+  ...template,
+  private: {
+    ...template.private,
+    list: [{title: "书源1", value: true}],
+    menu: "",
+    activeItem: undefined
+  },
+  ...router,
+  setValue(item, value, evt) {
+    item.value = value
+    evt.stopPropagation()
+  },
+  toggleMenu(item) {
+    if (item.title) this.activeItem = item
+    if (item.stopPropagation) item.stopPropagation()
+    if (this.menu === "animation-in") {
+      setTimeout(() => {
+        this.activeItem = undefined
+      }, 200)
+      this.menu = "animation-out-back"
+    } else {
+      this.menu = "animation-in"
+    }
+  }
+}
+</script>
+
+<style>
+@import url(../../common/css/page.css);
+</style>

src/utils/index.js

@@ -2,7 +2,7 @@ import systemRouter from "@system.router"
 
 const config = {
   animationDuration: 200,
-  animationDelay: 50
+  animationDelay: 100
 }
 
 let thisObj = undefined
@@ -46,7 +46,6 @@ const on = {
 
     thisObj.$element("body-swiper").getBoundingClientRect({
       success: (rect) => {
-        console.log(`body-swiper: ${rect.left}, ${rect.top}, ${rect.width}, ${rect.height}`)
         thisObj.swiperHeight = rect.height
       }
     })