新增客户端提示升级

app/Http/Controllers/Api/SystemController.php

@@ -221,89 +221,6 @@ class SystemController extends AbstractController
         return Base::getIpInfo(Request::input("ip"));
     }
 
-    /**
-     * @api {get} api/system/get/appinfo          09. 获取应用下载信息
-     *
-     * @apiVersion 1.0.0
-     * @apiGroup system
-     * @apiName get__appinfo
-     *
-     * @apiSuccess {Number} ret     返回状态码（1正确、0错误）
-     * @apiSuccess {String} msg     返回信息（错误描述）
-     * @apiSuccess {Object} data    返回数据
-     */
-    public function get__appinfo() {
-        $array = [
-            'name' => '',
-            'version' => '',
-            'list' => [],
-        ];
-        //
-        $files = [
-            base_path("package.json"),
-            base_path("electron/package.json")
-        ];
-        $dist = base_path("electron/dist");
-        foreach ($files as $file) {
-            if (file_exists($file)) {
-                $packageArray = json_decode(file_get_contents($file), true);
-                $array['name'] = $packageArray['name'] ?? 'No app';
-                $array['version'] = $packageArray['version'] ?? '';
-                //
-                $list = [
-                    [
-                        'icon' => 'logo-apple',
-                        'name' => 'macOS Intel',
-                        'file' => "{$array['name']}-{$array['version']}.dmg"
-                    ],
-                    [
-                        'icon' => 'logo-apple',
-                        'name' => 'macOS M1',
-                        'file' => "{$array['name']}-{$array['version']}-arm64.dmg"
-                    ],
-                    [
-                        'icon' => 'logo-windows',
-                        'name' => 'Windows x64',
-                        'file' => "{$array['name']} Setup {$array['version']}.exe"
-                    ]
-                ];
-                foreach ($list as $item) {
-                    if (file_exists("{$dist}/{$item['file']}")) {
-                        $item['url'] = Base::fillUrl('api/system/get/appdown?file=' . urlencode($item['file']));
-                        $item['size'] = filesize("{$dist}/{$item['file']}");
-                        $array['list'][] = $item;
-                    }
-                }
-            }
-            if (count($array['list']) > 0) {
-                break;
-            }
-        }
-        //
-        if (count($array['list']) == 0) {
-            return Base::retError('No file');
-        }
-        return Base::retSuccess('success', $array);
-    }
-
-    /**
-     * @api {get} api/system/get/appdown          10. 下载应用
-     *
-     * @apiVersion 1.0.0
-     * @apiGroup system
-     * @apiName get__appdown
-     *
-     * @apiParam {String} file        文件名称
-     */
-    public function get__appdown() {
-        $file = Request::input("file");
-        $path = base_path("electron/dist/" . $file);
-        if (!file_exists($path)) {
-            return Base::ajaxError("No file");
-        }
-        return Response::download($path);
-    }
-
     /**
      * @api {post} api/system/imgupload          11. 上传图片
      *

resources/assets/js/components/AppDown.vue

@@ -0,0 +1,195 @@
+<template>
+    <div v-if="repoStatus" class="common-app-down">
+        <div v-if="isElectron" class="common-app-down-link" @click="openExternal(repoData.html_url)">
+            <Icon type="md-download"/> {{$L(repoTitle)}}
+        </div>
+        <a v-else class="common-app-down-link" :href="repoData.html_url" target="_blank">
+            <Icon type="md-download"/> {{$L(repoTitle)}}
+        </a>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import MarkdownPreview from "./MDEditor/components/preview";
+Vue.component('MarkdownPreview', MarkdownPreview)
+
+import axios from "axios";
+
+export default {
+    name: 'AppDown',
+    data() {
+        return {
+            repoName: 'kuaifan/dootask',
+            repoData: {},
+            repoStatus: 0, // 0 没有，1有客户端，2客户端有新版本
+        }
+    },
+    mounted() {
+        this.getReleases();
+    },
+    computed: {
+        repoTitle() {
+            return this.repoStatus == 2 ? '更新客户端' : '客户端下载';
+        }
+    },
+    watch: {
+        repoData: {
+            handler(data) {
+                if (!data.tag_name) {
+                    this.repoStatus = 0;
+                    return;
+                }
+                if (!this.isElectron) {
+                    // 网页只提示有客户端下载
+                    this.repoStatus = 1;
+                    return;
+                }
+                // 客户端提示更新
+                let currentVersion = window.systemInformation.version;
+                let latestVersion = $A.leftDelete(data.tag_name.toLowerCase(), "v")
+                if (this.compareVersion(latestVersion, currentVersion) === 1) {
+                    // 有新版本
+                    this.$Notice.close("app-down");
+                    this.$nextTick(() => {
+                        this.$Notice.info({
+                            name: "app-down",
+                            title: this.$L("更新提示"),
+                            duration: 0,
+                            onClose: () => {
+                                // 关闭提示后显示更新按钮
+                                this.repoStatus = 2;
+                            },
+                            render: h => {
+                                return h('span', [
+                                    h('span', [
+                                        h('span', this.$L('发现新版本') + ": "),
+                                        h('Tag', {
+                                            props: {
+                                                color: 'volcano'
+                                            }
+                                        }, data.tag_name)
+                                    ]),
+                                    h('MarkdownPreview', {
+                                        class: 'common-app-down-body',
+                                        props: {
+                                            initialValue: data.body
+                                        }
+                                    }),
+                                    h('div', {
+                                        class: 'common-app-down-link',
+                                        on: {
+                                            click: () => {
+                                                this.openExternal(data.html_url);
+                                            }
+                                        },
+                                    }, [
+                                        h('Icon', {
+                                            props: {
+                                                type: 'md-download'
+                                            },
+                                            style: {
+                                                marginRight: '5px'
+                                            }
+                                        }),
+                                        h('span', this.$L('立即升级'))
+                                    ]),
+                                ])
+                            }
+                        });
+                    })
+                }
+            },
+            deep: true
+        }
+    },
+    methods: {
+        getReleases() {
+            let appdown = this.$store.state.method.getStorageJson("cacheAppdown");
+            if (appdown.time && appdown.time + 3600 > Math.round(new Date().getTime() / 1000)) {
+                this.chackReleases(appdown.data)
+                return;
+            }
+            ;(() => {
+                axios
+                    .get("https://api.github.com/repos/" + this.repoName + "/releases/latest")
+                    .then(({status, data}) => {
+                        if (status === 200) {
+                            this.$store.state.method.setStorage("cacheAppdown", {
+                                time: Math.round(new Date().getTime() / 1000),
+                                data: data
+                            });
+                            this.chackReleases(data)
+                        }
+                    });
+            })();
+        },
+
+        chackReleases(data) {
+            let hostname = window.location.hostname;
+            if (hostname == '127.0.0.1') {
+                hostname = "www.dootask.com"
+            }
+            let assets = data.assets || [];
+            let asset = assets.find(({browser_download_url}) => {
+                return $A.strExists(browser_download_url, hostname)
+            });
+            if (asset) {
+                this.repoData = data;
+            }
+        },
+
+        compareVersion(version1, version2) {
+            let pA = 0, pB = 0;
+            // 寻找当前区间的版本号
+            const findDigit = (str, start) => {
+                let i = start;
+                while (str[i] !== '.' && i < str.length) {
+                    i++;
+                }
+                return i;
+            }
+
+            while (pA < version1.length && pB < version2.length) {
+                const nextA = findDigit(version1, pA);
+                const nextB = findDigit(version2, pB);
+                const numA = +version1.substr(pA, nextA - pA);
+                const numB = +version2.substr(pB, nextB - pB);
+                if (numA !== numB) {
+                    return numA > numB ? 1 : -1;
+                }
+                pA = nextA + 1;
+                pB = nextB + 1;
+            }
+            // 若arrayA仍有小版本号
+            while (pA < version1.length) {
+                const nextA = findDigit(version1, pA);
+                const numA = +version1.substr(pA, nextA - pA);
+                if (numA > 0) {
+                    return 1;
+                }
+                pA = nextA + 1;
+            }
+            // 若arrayB仍有小版本号
+            while (pB < version2.length) {
+                const nextB = findDigit(version2, pB);
+                const numB = +version2.substr(pB, nextB - pB);
+                if (numB > 0) {
+                    return -1;
+                }
+                pB = nextB + 1;
+            }
+            // 版本号完全相同
+            return 0;
+        },
+
+        openExternal(url) {
+            try {
+                this.$electron.shell.openExternal(url);
+            } catch (e) {
+                window.location.href = url;
+            }
+        }
+    }
+};
+</script>

resources/assets/js/pages/download.vue

@@ -1,59 +0,0 @@
-<template>
-    <div class="page-download">
-        <PageTitle :title="$L('下载')"/>
-        <div v-if="loadIng > 0" class="download-load">
-            <Loading/>
-        </div>
-        <div class="download-body">
-            <canvas class="orb-canvas-1"></canvas>
-            <canvas class="orb-canvas-2"></canvas>
-            <div v-if="name" class="download-name">{{name}}</div>
-            <div v-if="version" class="download-version">v{{version}}</div>
-            <ul v-if="list.length > 0" class="download-list">
-                <li v-for="(item, key) in list" :key="key">
-                    <div class="app-icon">
-                        <Icon :type="item.icon"/>
-                    </div>
-                    <div class="app-name">{{item.name}}</div>
-                    <div class="app-size">{{$A.bytesToSize(item.size)}}</div>
-                    <div class="app-button">
-                        <a :href="item.url" target="_blank">{{$L('立即下载')}}</a>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            loadIng: 0,
-
-            name: "Loading",
-            version: "",
-            list: []
-        }
-    },
-    mounted() {
-        this.getAppInfo()
-    },
-    methods: {
-        getAppInfo() {
-            this.loadIng++;
-            this.$store.dispatch("call", {
-                url: 'system/get/appinfo',
-            }).then(({data}) => {
-                this.loadIng--;
-                this.name = data.name;
-                this.version = data.version;
-                this.list = data.list;
-            }).catch(({msg}) => {
-                this.loadIng--;
-                $A.modalError(msg);
-            });
-        }
-    }
-}
-</script>

resources/assets/js/pages/login.vue

@@ -43,14 +43,14 @@
                 <div class="login-forgot">{{$L('忘记密码了？')}}<a href="javascript:void(0)" @click="forgotPassword">{{$L('重置密码')}}</a></div>
             </div>
         </div>
-        <div v-if="downList.length > 0" class="download-app">
+        <AppDown/>
-            <Button icon="md-download" type="primary" to="./download" target="_blank">{{$L('客户端下载')}}</Button>
-        </div>
     </div>
 </template>
 
 <script>
+import AppDown from "../components/AppDown";
 export default {
+    components: {AppDown},
     data() {
         return {
             loadIng: 0,
@@ -65,15 +65,10 @@ export default {
             code: '',
 
             demoAccount: {},
-
-            downList: [],
         }
     },
     mounted() {
         this.getDemoAccount();
-        if (!this.isElectron) {
-            this.getAppInfo();
-        }
     },
     computed: {
         currentLanguage() {
@@ -95,16 +90,6 @@ export default {
             });
         },
 
-        getAppInfo() {
-            this.$store.dispatch("call", {
-                url: 'system/get/appinfo',
-            }).then(({data}) => {
-                this.downList = data.list;
-            }).catch(() => {
-                this.downList = [];
-            });
-        },
-
         forgotPassword() {
             $A.modalWarning("请联系管理员！");
         },

resources/assets/js/pages/manage/dashboard.vue

@@ -91,16 +91,16 @@
                 </ul>
             </template>
         </div>
-        <div v-if="downList.length > 0" class="download-app">
+        <AppDown/>
-            <Button icon="md-download" type="primary" @click="goDownApp">{{$L('客户端下载')}}</Button>
-        </div>
     </div>
 </template>
 
 <script>
 import {mapState} from "vuex";
+import AppDown from "../../components/AppDown";
 
 export default {
+    components: {AppDown},
     data() {
         return {
             nowTime: $A.Time(),
@@ -120,9 +120,6 @@ export default {
         this.nowInterval = setInterval(() => {
             this.nowTime = $A.Time();
         }, 1000)
-        if (!this.isElectron) {
-            this.getAppInfo();
-        }
     },
 
     destroyed() {
@@ -214,20 +211,6 @@ export default {
     },
 
     methods: {
-        getAppInfo() {
-            this.$store.dispatch("call", {
-                url: 'system/get/appinfo',
-            }).then(({data}) => {
-                this.downList = data.list;
-            }).catch(() => {
-                this.downList = [];
-            });
-        },
-
-        goDownApp() {
-            this.goForward({path: '/manage/download'});
-        },
-
         getTask() {
             let data = {complete: "no"};
             switch (this.dashboard) {

resources/assets/js/routes.js

@@ -68,18 +68,8 @@ export default [
                 path: 'file',
                 component: () => import('./pages/manage/file.vue'),
             },
-            {
-                name: 'manage-download',
-                path: 'download',
-                component: () => import('./pages/download.vue'),
-            },
         ]
     },
-    {
-        name: 'download',
-        path: '/download',
-        component: () => import('./pages/download.vue'),
-    },
     {
         name: 'login',
         path: '/login',

resources/assets/sass/components/_.scss

@@ -1,3 +1,4 @@
+@import "app-down";
 @import "auto-tip";
 @import "circle";
 @import "drawer-overlay";

resources/assets/sass/components/app-down.scss

@@ -0,0 +1,48 @@
+.common-app-down {
+    position: absolute;
+    bottom: 26px;
+    right: 26px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+}
+
+.common-app-down-link {
+    display: inline-block;
+    cursor: pointer;
+    line-height: 32px;
+    height: 32px;
+    padding: 0 15px;
+    font-size: 14px;
+    border-radius: 4px;
+    color: #fff;
+    background-color: #8bcf70;
+    border-color: #8bcf70;
+    &:hover {
+        color: #fff;
+        opacity: 0.9;
+    }
+}
+
+.common-app-down-body {
+    max-height: 168px;
+    overflow: auto;
+    margin: 18px 0;
+    .markdown-preview {
+        margin: -20px -12px;
+        h2 {
+            font-size: 18px !important;
+            padding-top: 2px !important;
+        }
+        ul {
+            li {
+                padding: 2px 0 2px 2px !important;
+                &:after {
+                    top: 10px !important;
+                    width: 6px !important;
+                    height: 6px !important;
+                }
+            }
+        }
+    }
+}

resources/assets/sass/pages/_.scss

@@ -1,7 +1,6 @@
 @import "common";
 @import "page-calendar";
 @import "page-dashboard";
-@import "page-download";
 @import "page-file";
 @import "page-login";
 @import "page-manage";

resources/assets/sass/pages/page-dashboard.scss

@@ -150,12 +150,6 @@
             }
         }
     }
-    .download-app {
-        position: absolute;
-        bottom: 26px;
-        right: 26px;
-        z-index: 1;
-    }
     .nopage {
         width: 100%;
         height: 100%;
@@ -210,8 +204,5 @@
                 }
             }
         }
-        .download-app {
-            display: none;
-        }
     }
 }

resources/assets/sass/pages/page-download.scss

@@ -1,214 +0,0 @@
-.page-download {
-    overflow: auto;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    .download-load {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    .download-body {
-        position: relative;
-        margin-top: 50px;
-        .orb-canvas-1 {
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 500px;
-            height: 500px;
-            z-index: -1;
-            background: linear-gradient(rgba(186, 117, 255, 0.49) 26.56%, rgb(57, 19, 184) 100%);
-            opacity: .1;
-            transform: translate(-50%, 0) rotate(-90deg);
-            margin-top: 20px;
-            margin-left: -50px;
-            border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
-        }
-        .orb-canvas-2 {
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 500px;
-            height: 500px;
-            background: linear-gradient(rgba(47, 184, 255, 0.42) 31.77%, rgb(158, 236, 217) 100%);
-            z-index: -1;
-            animation: 25s ease 0s infinite alternate none running izRuqW;
-            opacity: .1;
-            transform: translate(-50%, 0) rotate(-90deg);
-            margin-top: 120px;
-            margin-left: 50px;
-            border-radius: 51% 49% 58% 42% / 34% 78% 22% 66%;
-        }
-        .download-name {
-            color: #2A2A2A;
-            text-align: center;
-            font-size: 24px;
-            padding-top: 64px;
-            line-height: 1;
-        }
-        .download-version {
-            color: #8a919c;
-            text-align: center;
-            font-size: 14px;
-            padding-top: 20px;
-            line-height: 1;
-        }
-        .download-list {
-            margin-top: 100px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            > li {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                list-style: none;
-                background: rgba(255,255,255,.7);
-                border-radius: 20px;
-                overflow: hidden;
-                margin: 0 12px;
-                padding: 30px 46px;
-                position: relative;
-                z-index: 5;
-                box-shadow: 0 30px 70px 0 rgba(223, 227, 234, 0.5);
-                .app-icon,
-                .app-name,
-                .app-size {
-                    transition: all 0.3s ease-in-out;
-                }
-                .app-icon {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 60px;
-                    > i {
-                        font-size: 60px;
-                        &.ivu-icon-logo-windows {
-                            font-size: 52px;
-                        }
-                    }
-                }
-                .app-name {
-                    margin-top: 15px;
-                    font-size: 18px;
-                }
-                .app-size {
-                    margin-top: 15px;
-                    opacity: 0.6;
-                }
-                .app-button {
-                    margin-top: 22px;
-                    > a {
-                        display: inline-block;
-                        position: relative;
-                        z-index: 1;
-                        line-height: 32px;
-                        border-radius: 6px;
-                        text-align: center;
-                        padding: 0 18px;
-                        text-transform: capitalize;
-                        transition: all 0.3s ease-in-out;
-                        color: #8bcf70;
-                        border: 1px solid #8bcf70;
-                        &:before {
-                            content: '';
-                            position: absolute;
-                            width: 100%;
-                            height: 100%;
-                            top: 0;
-                            left: 0;
-                            border-radius: 36px;
-                            transition: all 0.3s ease-in-out;
-                            transform: scale(0,1);
-                            z-index: -1;
-                        }
-                        &:hover {
-                            &:before {
-                                border-radius: 4px;
-                                background: #ffffff;
-                                transform: scale(1);
-                            }
-                        }
-                    }
-                }
-                &:before {
-                    content: '';
-                    position: absolute;
-                    z-index: -1;
-                    width: 100%;
-                    height: 100%;
-                    top:0;
-                    left:0;
-                    background: linear-gradient( 130deg, rgb(131,239,146) 0%, rgb(0,211,139) 100%);
-                    opacity: 0;
-                    transition: all 0.3s ease-in-out;
-                }
-                &:after {
-                    content: '';
-                    position: absolute;
-                    width: 160px;
-                    height: 160px;
-                    border-radius: 50%;
-                    background: rgba(255,255,255,0.13);
-                    z-index: -1;
-                    top:-80px;
-                    right: -80px;
-                    opacity: 0;
-                    transform: scale(0.2);
-                    transition: all 0.3s ease-in-out;
-                }
-                &:hover {
-                    .app-icon,
-                    .app-name,
-                    .app-size {
-                        color: #ffffff
-                    }
-                    .app-button {
-                        > a {
-                            color: #ffffff;
-                            border-color: #ffffff;
-                            &:hover {
-                                color: #0de49d;
-                            }
-                        }
-                    }
-                    &:before {
-                        opacity: 1;
-                    }
-                    &:after {
-                        opacity: 1;
-                        transform: scale(1);
-                        transition-duration: 1s;
-                    }
-                }
-            }
-            @media (max-width: 720px) {
-                flex-direction: column;
-                > li {
-                    padding: 52px 64px;
-                    margin-bottom: 32px;
-                }
-            }
-        }
-    }
-    &.manage-box-view {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .download-body {
-            transform: translateY(-16%);
-            .download-name {
-                padding-top: 16%;
-            }
-        }
-    }
-}
-

resources/assets/sass/pages/page-login.scss

@@ -125,18 +125,4 @@
             }
         }
     }
-    .download-app {
-        position: absolute;
-        bottom: 26px;
-        right: 26px;
-        z-index: 1;
-    }
-}
-
-@media (max-width: 768px) {
-    .page-login {
-        .download-app {
-            display: none;
-        }
-    }
 }