优化页面展示

fir_client/package.json

@@ -17,6 +17,7 @@
     "qiniu-js": "^2.5.5",
     "qrcodejs2": "^0.0.2",
     "vue": "^2.6.10",
+    "vue-clipboard2": "^0.3.1",
     "vue-cookies": "^1.7.0",
     "vue-lazyload": "^1.3.3",
     "vue-qr": "^2.3.0",

fir_client/src/App.vue

@@ -71,5 +71,13 @@
         content: "\e625";
     }
 
+    .canvas {
+        position: fixed;
+        left: -0px;
+        top: 58px;
+        height: 100%;
+        z-index: -2;
+        width: 100%;
+    }
 
 </style>

fir_client/src/components/FirAppBase.vue

@@ -1,5 +1,6 @@
 <template>
     <div ref="appbase">
+        <canvas ref="canvas" class="canvas" @mousemove="canvas_move" @mouseleave="canvas_leave"></canvas>
         <el-container>
             <el-header>
                 <FirHeader></FirHeader>
@@ -20,12 +21,32 @@
 <script>
     import FirHeader from "@/components/FirHeader";
     import FirFooter from "@/components/FirFooter";
+    import {show_beautpic,} from "../utils";
 
     export default {
         name: "FirAppBase",
         components: {FirFooter, FirHeader},
+        data() {
+            return {
+                'mousePosition': {},
+            }
+        },
         mounted() {
+            let canvas = this.$refs.canvas;
+            show_beautpic(this, canvas);
         }, watch: {}
+        , methods: {
+            canvas_move(e) {
+                this.mousePosition.x = e.pageX;
+                this.mousePosition.y = e.pageY;
+            },
+            // eslint-disable-next-line no-unused-vars
+            canvas_leave(e) {
+                let canvas = this.$refs.canvas;
+                this.mousePosition.x = canvas.width / 2;
+                this.mousePosition.y = canvas.height / 2;
+            },
+        }
     }
 </script>
 
@@ -33,4 +54,5 @@
     .pbody {
         padding-top: 20px;
     }
+
 </style>

fir_client/src/components/FirAppInfosBase.vue

@@ -7,14 +7,21 @@
                         <img ref="icon_url" :src="icon_url" class="appicon" style="width:100px; height:100px" alt="">
                     </div>
                     <div class="badges">
-                        <span class="bundleid">SHORT<b class="short">&nbsp;&nbsp;{{ appinfos.short }}</b></span>
+                        <el-tooltip content="复制到剪切板" placement="top">
+                             <span class="bundleid short"
+                                   v-clipboard:copy="short_full_url"
+                                   v-clipboard:success="copy_success"
+                             >&nbsp;{{short_full_url }}</span>
+                        </el-tooltip>
                         <span>{{ master_release.release_type |getapptype }}</span>
-                        <span><i class="el-icon-cloudy"></i><b class="ng-binding">{{ appinfos.count_hits }}</b></span>
+                        <el-tooltip content="下载量" placement="top">
+                            <span><i class="el-icon-cloudy"></i><b class="short">{{ appinfos.count_hits }}</b></span>
+                        </el-tooltip>
                         <span class="bundleid ng-binding">BundleID<b class="ng-binding">&nbsp;&nbsp;{{ appinfos.bundle_id }}</b></span>
                         <span class="version ng-scope">{{ master_release.minimum_os_version }}&nbsp; 或者高版本</span>
                         <span class="short ng-scope" v-if="appinfos.issupersign">超级签</span>
 
-                        <el-popover
+                        <el-popover v-if="$store.state.userinfo.role === 3"
                                     placement="right"
                                     width="288">
                             <div style="text-align: center; margin: 0">
@@ -54,17 +61,16 @@
                                                                           style="transform:rotateX(180deg);"></i>应用合并</a>
                             </el-col>
 
-                            <el-col :span="3"
-                                    v-if="(appinfos.type===1 && master_release.release_type ===1) || appinfos.issupersign ">
-                                <a class="" ref="devices" @click="devices"><i class="el-icon-mobile-phone"></i>设备列表</a>
-                            </el-col>
-
                             <el-col :span="3"
                                     v-if="appinfos.type===1  || appinfos.issupersign ">
                                 <a class="" ref="supersign" @click="supersign"><i
                                         class="el-icon-ship"></i>超级签名</a>
                             </el-col>
 
+                            <el-col :span="3"
+                                    v-if="(appinfos.type===1 && master_release.release_type ===1) || appinfos.issupersign ">
+                                <a class="" ref="devices" @click="devices"><i class="el-icon-mobile-phone"></i>设备列表</a>
+                            </el-col>
 
                         </el-row>
                     </div>
@@ -115,9 +121,13 @@
                 activity: {
                     editing: false
                 },
+                short_full_url: '',
             }
         },
         methods: {
+            copy_success() {
+                this.$message.success('复制剪切板成功');
+            },
             save_qr() {
                 let dtype = "I";
                 if (this.master_release.release_type === 0) {
@@ -138,12 +148,16 @@
                 for (let key in this.$refs) {
                     if (key === "qr") continue;
                     if (key === item) {
+                        if (this.$refs[key]) {
                             this.$refs[key].classList.add('active');
                             this.$store.dispatch('doappInfoIndex', [[index, index], [index, index]]);
+                        }
                     } else {
+                        if (this.$refs[key]) {
                             this.$refs[key].classList.remove('active');
                         }
                     }
+                }
             },
             appDownload() {
                 let routeData = this.$router.resolve({name: 'FirDownload', params: {short: this.appinfos.short}});
@@ -173,7 +187,7 @@
                 this.$router.push({name: 'FirAppInfoscombo'});
             },
             devices() {
-                this.setfunactive('devices', 57);
+                this.setfunactive('devices', 70);
                 // if (this.appinfos.issupersign) {
                 //     this.$router.push({
                 //         "name": 'FirSuperSignBase',
@@ -185,7 +199,7 @@
                 // }
             },
             supersign() {
-                this.setfunactive('supersign', 70);
+                this.setfunactive('supersign', 57);
                 this.$router.push({name: 'FirAppInfossupersign'});
             },
             set_icon_url() {
@@ -213,6 +227,7 @@
                     this.$store.dispatch("doUserinfo", data.userinfo);
                     this.appinfos["icon_url"] = this.master_release.icon_url;
                     this.$store.dispatch('doucurrentapp', this.appinfos);
+                    this.short_full_url = this.appinfos.preview_url + "/" + this.appinfos.short;
                 } else if (data.code === 1003) {
                     this.$router.push({name: 'FirApps'});
                 } else {
@@ -327,6 +342,10 @@
         color: #6f6ef8
     }
 
+    .page-app .badges .short:hover {
+        cursor: pointer;
+    }
+
     .page-app .badges b {
         display: inline-block;
         padding-left: 12px;

fir_client/src/components/FirAppInfosdevices.vue

@@ -41,7 +41,7 @@
         },
         methods: {},
         mounted() {
-            this.$store.dispatch('doappInfoIndex', [[57, 57], [57, 57]]);
+            this.$store.dispatch('doappInfoIndex', [[70, 70], [70, 70]]);
             if (!this.currentapp.app_id) {
                 this.currentapp = this.$store.state.currentapp;
                 if (this.currentapp.master_release) {

fir_client/src/components/FirAppInfossupersign.vue

@@ -183,7 +183,7 @@
             }
         },
         mounted() {
-            this.$store.dispatch('doappInfoIndex', [[70, 70], [70, 70]]);
+            this.$store.dispatch('doappInfoIndex', [[57, 57], [57, 57]]);
             if (!this.currentapp.app_id) {
                 this.appinit();
             }

fir_client/src/components/FirApps.vue

@@ -1,7 +1,6 @@
 <template>
     <div>
         <el-container>
-
             <el-header style="height: 100px">
 
                 <el-dialog
@@ -56,14 +55,14 @@
 
 
                 <el-dialog class="upload-app"
+                           style="position: fixed"
                            :visible.sync="willuploadApp"
                            :destroy-on-close="true"
                            :show-close="!uploading"
                            width="40%"
                            :close-on-click-modal="false"
                            @closed="closeUpload">
-
+                    <div v-if="!uploading">
-                    <div v-if="!uploading" style="">
                         <el-row :gutter="20">
                             <el-col :span="6">
                                 <div class="grid-content bg-purple">
@@ -147,8 +146,9 @@
                         </el-row>
 
                     </div>
-
+                    <div v-if="uploading">
-                    <div v-if="uploading" class="wrap">
+                        <canvas ref="canvas" class="canvas"/>
+                        <div class="wrap">
                             <!--包裹所有元素的容器-->
                             <div class="cube">
                                 <!--前面图片 -->
@@ -198,8 +198,7 @@
                             </div>
 
                         </div>
-
+                    </div>
-
                     <span slot="footer" class="dialog-footer">
                         <el-progress :text-inside="true" :stroke-width="26" :percentage="uploadprocess"
                                      v-if="uploadflag === true"></el-progress>
@@ -484,7 +483,7 @@
         dataURLtoFile,
         uploadaliyunoss,
         uploadlocalstorage,
-        format_money
+        format_money, show_beautpic
     } from "../utils";
 
     export default {
@@ -667,6 +666,11 @@
             uploadstorage() {
                 this.uploadflag = true;
                 this.uploading = true;
+                // eslint-disable-next-line no-unused-vars
+                this.timmer = setTimeout(data => {
+                    let canvas = this.$refs.canvas;
+                    show_beautpic(this, canvas, 999);
+                }, 100);
 
                 let file = dataURLtoFile(this.analyseappinfo.icon, this.analyseappinfo.png_key);
 
@@ -1025,6 +1029,12 @@
     }
 
 
+    /*/deep/ .el-dialog__body {*/
+    /*    background-image: url("../assets/b6.png");*/
+    /*    border: 0;*/
+    /*}*/
+
+
     .page-apps .card.app .action a, .page-apps .card.app .appname, .page-apps .card.app table tr td, .upload-modal .state-form .release-body .input-addon {
         font-family: 'Open Sans', sans-serif
     }
@@ -1244,6 +1254,7 @@
         /*margin: 119px;*/
         margin: 120px auto 119px auto;
         position: relative;
+        z-index: 9999;
     }
 
     /*包裹所有容器样式*/
@@ -1456,4 +1467,13 @@
         bottom: 0;
         left: 0;
     }
+
+    .canvas {
+        position: absolute;
+        left: -0px;
+        margin-top: -60px;
+        height: 100%;
+        z-index: 999;
+        width: 100%;
+    }
 </style>

fir_client/src/main.js

@@ -161,6 +161,12 @@ Vue.use(VueLazyload, {
     preLoad: 1
 });
 
+// 引入点击复制组件
+import VueClipboard from 'vue-clipboard2'
+
+VueClipboard.config.autoSetContainer = true;
+Vue.use(VueClipboard);
+
 new Vue({
     render: h => h(App),
     router,

fir_client/src/utils/index.js

@@ -343,3 +343,136 @@ export function format_money(s, n = 2) {
     }
     return new_format_money
 }
+
+export function show_beautpic(father, canvas, nb = 666) {
+    let ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    ctx.lineWidth = .3;
+    ctx.strokeStyle = (new Color(150)).style;
+
+    father.mousePosition = {
+        x: 30 * canvas.width / 100,
+        y: 30 * canvas.height / 100
+    };
+
+    let dots = {
+        nb: nb,
+        distance: 100,
+        d_radius: 150,
+        array: []
+    };
+
+    function colorValue(min) {
+        return Math.floor(Math.random() * 255 + min);
+    }
+
+    function createColorStyle(r, g, b) {
+        return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
+    }
+
+    function mixComponents(comp1, weight1, comp2, weight2) {
+        return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
+    }
+
+    function averageColorStyles(dot1, dot2) {
+        let color1 = dot1.color,
+            color2 = dot2.color;
+
+        let r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
+            g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
+            b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
+        return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
+    }
+
+    function Color(min) {
+        min = min || 0;
+        this.r = colorValue(min);
+        this.g = colorValue(min);
+        this.b = colorValue(min);
+        this.style = createColorStyle(this.r, this.g, this.b);
+    }
+
+    function Dot() {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+
+        this.vx = -.5 + Math.random();
+        this.vy = -.5 + Math.random();
+
+        this.radius = Math.random() * 2;
+
+        this.color = new Color();
+    }
+
+    Dot.prototype = {
+        draw: function () {
+            ctx.beginPath();
+            ctx.fillStyle = this.color.style;
+            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+            ctx.fill();
+        }
+    };
+
+    function createDots() {
+        for (let i = 0; i < dots.nb; i++) {
+            dots.array.push(new Dot());
+        }
+    }
+
+    function moveDots() {
+        for (let i = 0; i < dots.nb; i++) {
+
+            let dot = dots.array[i];
+
+            if (dot.y < 0 || dot.y > canvas.height) {
+                // dot.vx = dot.vx;
+                dot.vy = -dot.vy;
+            } else if (dot.x < 0 || dot.x > canvas.width) {
+                dot.vx = -dot.vx;
+                // dot.vy = dot.vy;
+            }
+            dot.x += dot.vx;
+            dot.y += dot.vy;
+        }
+    }
+
+    function connectDots() {
+        for (let i = 0; i < dots.nb * 0.3; i++) {
+            for (let j = 0; j < dots.nb * 0.3; j++) {
+                let i_dot = dots.array[i];
+                let j_dot = dots.array[j];
+
+                if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
+                    if ((i_dot.x - father.mousePosition.x) < dots.d_radius && (i_dot.y - father.mousePosition.y) < dots.d_radius && (i_dot.x - father.mousePosition.x) > -dots.d_radius && (i_dot.y - father.mousePosition.y) > -dots.d_radius) {
+                        ctx.beginPath();
+                        ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
+                        ctx.moveTo(i_dot.x, i_dot.y);
+                        ctx.lineTo(j_dot.x, j_dot.y);
+                        ctx.stroke();
+                        ctx.closePath();
+                    }
+                }
+            }
+        }
+    }
+
+    function drawDots() {
+        for (let i = 0; i < dots.nb; i++) {
+            let dot = dots.array[i];
+            dot.draw();
+        }
+    }
+
+    function animateDots() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        moveDots();
+        connectDots();
+        drawDots();
+
+        requestAnimationFrame(animateDots);
+    }
+
+    createDots();
+    requestAnimationFrame(animateDots);
+}

fir_ser/api/utils/serializer.py

@@ -44,7 +44,7 @@ class UserInfoSerializer(serializers.ModelSerializer):
     class Meta:
         model = models.UserInfo
         # fields="__all__"
-        fields = ["username", "uid", "mobile", "job", "email", "domain_name", "last_login", "first_name",
+        fields = ["username", "uid", "mobile", "job", "email", "domain_name", "role", "first_name",
                   'head_img', 'storage_active', 'supersign_active', 'free_download_times', 'download_times']
 
     head_img = serializers.SerializerMethodField()