优化页面展示

pull/16/head
youngS 4 years ago
parent d5f5e8ca34
commit 8b7dd30adb
  1. 1
      fir_client/package.json
  2. 8
      fir_client/src/App.vue
  3. 22
      fir_client/src/components/FirAppBase.vue
  4. 39
      fir_client/src/components/FirAppInfosBase.vue
  5. 2
      fir_client/src/components/FirAppInfosdevices.vue
  6. 2
      fir_client/src/components/FirAppInfossupersign.vue
  7. 36
      fir_client/src/components/FirApps.vue
  8. 6
      fir_client/src/main.js
  9. 133
      fir_client/src/utils/index.js
  10. 2
      fir_ser/api/utils/serializer.py

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

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

@ -1,5 +1,6 @@
<template> <template>
<div ref="appbase"> <div ref="appbase">
<canvas ref="canvas" class="canvas" @mousemove="canvas_move" @mouseleave="canvas_leave"></canvas>
<el-container> <el-container>
<el-header> <el-header>
<FirHeader></FirHeader> <FirHeader></FirHeader>
@ -20,12 +21,32 @@
<script> <script>
import FirHeader from "@/components/FirHeader"; import FirHeader from "@/components/FirHeader";
import FirFooter from "@/components/FirFooter"; import FirFooter from "@/components/FirFooter";
import {show_beautpic,} from "../utils";
export default { export default {
name: "FirAppBase", name: "FirAppBase",
components: {FirFooter, FirHeader}, components: {FirFooter, FirHeader},
data() {
return {
'mousePosition': {},
}
},
mounted() { mounted() {
let canvas = this.$refs.canvas;
show_beautpic(this, canvas);
}, watch: {} }, 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> </script>
@ -33,4 +54,5 @@
.pbody { .pbody {
padding-top: 20px; padding-top: 20px;
} }
</style> </style>

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

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

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

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<el-container> <el-container>
<el-header style="height: 100px"> <el-header style="height: 100px">
<el-dialog <el-dialog
@ -56,14 +55,14 @@
<el-dialog class="upload-app" <el-dialog class="upload-app"
style="position: fixed"
:visible.sync="willuploadApp" :visible.sync="willuploadApp"
:destroy-on-close="true" :destroy-on-close="true"
:show-close="!uploading" :show-close="!uploading"
width="40%" width="40%"
:close-on-click-modal="false" :close-on-click-modal="false"
@closed="closeUpload"> @closed="closeUpload">
<div v-if="!uploading">
<div v-if="!uploading" style="">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<div class="grid-content bg-purple"> <div class="grid-content bg-purple">
@ -147,8 +146,9 @@
</el-row> </el-row>
</div> </div>
<div v-if="uploading">
<div v-if="uploading" class="wrap"> <canvas ref="canvas" class="canvas"/>
<div class="wrap">
<!--包裹所有元素的容器--> <!--包裹所有元素的容器-->
<div class="cube"> <div class="cube">
<!--前面图片 --> <!--前面图片 -->
@ -198,8 +198,7 @@
</div> </div>
</div> </div>
</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-progress :text-inside="true" :stroke-width="26" :percentage="uploadprocess" <el-progress :text-inside="true" :stroke-width="26" :percentage="uploadprocess"
v-if="uploadflag === true"></el-progress> v-if="uploadflag === true"></el-progress>
@ -484,7 +483,7 @@
dataURLtoFile, dataURLtoFile,
uploadaliyunoss, uploadaliyunoss,
uploadlocalstorage, uploadlocalstorage,
format_money format_money, show_beautpic
} from "../utils"; } from "../utils";
export default { export default {
@ -667,6 +666,11 @@
uploadstorage() { uploadstorage() {
this.uploadflag = true; this.uploadflag = true;
this.uploading = 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); 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 { .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 font-family: 'Open Sans', sans-serif
} }
@ -1244,6 +1254,7 @@
/*margin: 119px;*/ /*margin: 119px;*/
margin: 120px auto 119px auto; margin: 120px auto 119px auto;
position: relative; position: relative;
z-index: 9999;
} }
/*包裹所有容器样式*/ /*包裹所有容器样式*/
@ -1456,4 +1467,13 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.canvas {
position: absolute;
left: -0px;
margin-top: -60px;
height: 100%;
z-index: 999;
width: 100%;
}
</style> </style>

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

@ -343,3 +343,136 @@ export function format_money(s, n = 2) {
} }
return new_format_money 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);
}

@ -44,7 +44,7 @@ class UserInfoSerializer(serializers.ModelSerializer):
class Meta: class Meta:
model = models.UserInfo model = models.UserInfo
# fields="__all__" # 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', 'storage_active', 'supersign_active', 'free_download_times', 'download_times']
head_img = serializers.SerializerMethodField() head_img = serializers.SerializerMethodField()

Loading…
Cancel
Save