Merge pull request #4 from ismdeep/fix#2

fix: Can't display the home page application list
OpenAtom-Linyaps · Nov 9, 2022 · bf93cef · bf93cef
2 parents 5535867 + 49a49b4
commit bf93cef
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 52 deletions.
diff --git a/.doraemon/build/build-for-proxy.bash b/.doraemon/build/build-for-proxy.bash
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+set -eux
+
+tag=${1:?}
+
+NODE_OPTIONS=--openssl-legacy-provider yarn build --mode proxy
+docker buildx build --platform linux/amd64 --pull --push -t "hub.deepin.com/wuhan_v23_linglong/linglong-web-store:${tag}" .
diff --git a/.doraemon/build/pre-build.bash b/.doraemon/build/pre-build.bash
@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+set -eux
+
+# yarn --registry=http://registry-npm.sndu.cn/ install
+NODE_OPTIONS=--openssl-legacy-provider yarn build  --mode hongkong
diff --git a/.env.proxy b/.env.proxy
@@ -0,0 +1,4 @@
+#.env.local
+NODE_ENV=local
+VUE_APP_AXIOS_BASEURL=
+VUE_APP_HOME_PAGE_URL=
diff --git a/Dockerfile b/Dockerfile
@@ -2,12 +2,5 @@
 #
 # SPDX-License-Identifier: LGPL-3.0-or-later
 
-FROM hub.deepin.com/library/node:16 AS builder
-WORKDIR /src
-COPY . .
-RUN set -eux; \
-    yarn install; \
-    yarn build
-
 FROM hub.deepin.com/library/nginx:latest
-COPY --from=builder /src/dist/ /usr/share/nginx/html
+COPY ./dist/ /usr/share/nginx/html
diff --git a/package.json b/package.json
@@ -5,9 +5,9 @@
   "scripts": {
     "local": "vue-cli-service serve --mode local",
     "serve": "vue-cli-service serve --mode dev",
-    "build": "vue-cli-service build",
-    "release": "vue-cli-service serve --mode release",
     "hongkong": "vue-cli-service serve --mode hongkong",
+    "release": "vue-cli-service serve --mode release",
+    "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

diff --git a/src/components/AppCard.vue b/src/components/AppCard.vue
@@ -4,11 +4,16 @@
 
 <template>
   <div class="app-card" :title="description">
-    <el-image style="width: auto; height: 160px" :src="imageURI"> </el-image>
+    <el-image class='app-logo' :src="imageURI"> </el-image>
     <div class="app-card-control">
       <span>
         {{ name }}
-        <el-button type="default" class="install-button" size="small" @click="onInstall(id)" round>Install</el-button>
+        <el-button class="install-button"
+                   type="default"
+                   size="small"
+                   @click="onInstall(id)"
+                   round
+        >INSTALL</el-button>
       </span>
     </div>
   </div>
@@ -84,12 +89,17 @@ export default defineComponent({
   font-size: 12px;
   line-height: 1;
   font-weight: 700;
-  letter-spacing: 0em;
+  letter-spacing: 0;
   font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
   border-radius: 18px;
   padding: 6px 14px;
   background-color: #f5f5f7;
   color: #0071e3;
 }
 
+.app-logo {
+  width: auto;
+  height: 160px;
+}
+
 </style>
diff --git a/src/components/Main.vue b/src/components/Main.vue
@@ -3,29 +3,45 @@
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
 <template>
-  <div id="main">
-    <div id="topbar">
-      <el-button round type="danger" size="small" @click="gotoLink()"> Get Linglong </el-button>
+  <div class='main'>
+    <!-- header -->
+    <div class='topbar'>
+      <el-button round type='danger' size='small' @click='gotoLink()'> Get Linglong</el-button>
     </div>
-    <div id="card-gird" v-loading="dataLoadingFlag">
-      <div v-for="item in appList" :key="item.appId">
-        <AppCard v-if="true" :imageURI="item.icon" :name="item.name" :id="item.appId" :description="item.description" />
+    <!-- header -->
+
+    <!-- cards -->
+    <div v-loading='dataLoadingFlag'>
+      <div v-if='!appList || appList.length === 0'>
+        <el-empty :image-size='200' />
+      </div>
+      <div v-if='appList && appList.length > 0'>
+        <div class='card-gird'>
+          <AppCard v-for='item in appList' :key='item.appId'
+                   :imageURI='item.icon'
+                   :name='item.name'
+                   :id='item.appId'
+                   :description='item.description' />
+        </div>
       </div>
     </div>
-    <div id="page-next">
-      <span class="demonstration"></span>
+    <!-- cards -->
+
+    <!-- pagination -->
+    <div class='pagination-body'>
       <el-pagination
-      @current-change="nextClick"
-      background layout="prev, pager, next"
-      :page-size="size"
-      :total="total">
+        @current-change='nextClick'
+        background layout='prev, pager, next'
+        :page-size='size'
+        :hide-on-single-page='true'
+        :total='total'>
       </el-pagination>
     </div>
+    <!-- pagination -->
   </div>
-  <br>
 </template>
 
-<script lang="ts">
+<script lang='ts'>
 import { defineComponent, ref, onMounted } from 'vue';
 import AppCard from './AppCard.vue';
 import axios from 'axios';
@@ -36,62 +52,60 @@ export default defineComponent({
     AppCard,
   },
   data() {
-    return {
-    }
+    return {};
   },
   methods: {
     gotoLink() {
-      window.open(`${process.env.VUE_APP_HOME_PAGE_URL}/guide/start/install.html`)
-    }
+      window.open(`${process.env.VUE_APP_HOME_PAGE_URL}/guide/start/install.html`);
+    },
   },
   setup() {
-    const appList = ref([])
-    const dataLoadingFlag = ref()
-    const total = ref()
-    const size = 24
+    const appList = ref([]);
+    const dataLoadingFlag = ref();
+    const total = ref();
+    const size = 24;
     const service = axios.create({
       baseURL: process.env.VUE_APP_AXIOS_BASEURL, // url = base url + request url
       timeout: 10000, // request timeout
-    })
+    });
     const getList = (pageIndex = 1, pageSize = size) => {
-      dataLoadingFlag.value = true
+      dataLoadingFlag.value = true;
       service.get(`/api/v0/web-store/apps`, {
         params: {
           page: pageIndex,
           size: pageSize,
-        }
-      }).then(function (response) {
-        appList.value = response.data.data.list
-        total.value = response.data.data.total
-        dataLoadingFlag.value = false
-      }).catch(function (error) {
+        },
+      }).then(function(response) {
+        appList.value = response.data.data.list;
+        total.value = response.data.data.total;
+        dataLoadingFlag.value = false;
+      }).catch(function(error) {
         console.log(error);
       });
-    }
+    };
     onMounted(() => getList());
     return {
       appList,
       total,
       size,
       dataLoadingFlag,
       nextClick(pageIndex) {
-        console.log(pageIndex);
-        getList(pageIndex)
+        getList(pageIndex);
       },
     };
   },
 });
 </script>
 
 <style scoped>
-#main {
+.main {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
 }
 
-#topbar {
+.topbar {
   height: 60px;
   width: 100%;
   flex: 0 0 auto;
@@ -104,16 +118,16 @@ export default defineComponent({
   flex-direction: row;
 }
 
-#topbar>.el-input {
+.topbar > .el-input {
   width: 300px;
   padding-right: 10px;
 }
 
-#topbar> :nth-child(1) {
+.topbar > :nth-child(1) {
   margin: 10px;
 }
 
-#card-gird {
+.card-gird {
   margin: 1% 5% 1% 5%;
   flex: 1 1 auto;
   display: grid;
@@ -124,7 +138,8 @@ export default defineComponent({
   text-align: center;
 }
 
-#page-next {
+.pagination-body {
+  margin-bottom: 10px;
   margin-left: auto;
   margin-right: auto;
 }