Skip to content

Commit

Permalink
更新[BoxJs]: 页面完全独立化, 修复应用会话、清空会话属性无效问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@chavyleung
chavyleung committed Aug 12, 2020
1 parent 5d434c1 commit 4974cb0
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 37 deletions.
107 changes: 79 additions & 28 deletions box/chavy.boxjs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
<v-menu bottom left v-if="isMainView">
<template #activator="{ on }">
<v-btn icon v-on="on">
<v-avatar size="26"><img :src="env.icon" /></v-avatar>
<v-avatar size="26"><img :src="env.icons[iconEnvThemeIdx]" /></v-avatar>
</v-btn>
</template>
<v-list>
Expand Down Expand Up @@ -189,7 +189,6 @@
label="透明图标"
v-model="box.usercfgs.isTransparentIcons"
@change="saveUserCfgs"
:disabled="!isDarkMode"
:hide-details="isDarkMode"
:persistent-hint="true"
hint="明亮主题下强制使用彩色图标"
Expand All @@ -204,8 +203,39 @@
<v-switch
dense
class="mt-0"
hide-details
label="隐藏悬浮图标"
label="勿扰模式"
hint="不再发出系统通知 (仍记日志)"
persistent-hint
v-model="box.usercfgs.isMute"
@change="saveUserCfgs"
></v-switch>
<v-spacer></v-spacer>
<v-btn fab small text>
<v-avatar size="32"><v-icon>mdi-volume-off</v-icon></v-avatar>
</v-btn>
</v-list-item>
<v-list-item class="mt-4">
<v-switch
dense
class="mt-0"
label="隐藏帮助按钮"
hint="隐藏悬浮按钮中的帮忙"
persistent-hint
v-model="box.usercfgs.isHideHelp"
@change="saveUserCfgs"
></v-switch>
<v-spacer></v-spacer>
<v-btn fab small text @click="window.open(box.syscfgs.boxjs.repo)">
<v-avatar size="32"><v-icon>mdi-help</v-icon></v-avatar>
</v-btn>
</v-list-item>
<v-list-item class="mt-4">
<v-switch
dense
class="mt-0"
label="隐藏悬浮按钮"
hint="右下角悬浮按钮"
persistent-hint
v-model="box.usercfgs.isHideBoxIcon"
@change="saveUserCfgs"
></v-switch>
Expand All @@ -220,8 +250,9 @@
<v-switch
dense
class="mt-0"
hide-details
label="隐藏我的标题"
hint="底栏`我的`二字 (只显示图标)"
persistent-hint
v-model="box.usercfgs.isHideMyTitle"
@change="saveUserCfgs"
></v-switch>
Expand All @@ -233,39 +264,34 @@
<v-icon v-else size="32">mdi-face-profile</v-icon>
</v-btn>
</v-list-item>
<v-list-item class="mt-4">
<v-switch dense class="mt-0" hide-details label="勿扰模式" v-model="box.usercfgs.isMute" @change="saveUserCfgs"></v-switch>
<v-spacer></v-spacer>
<v-btn fab small text>
<v-avatar size="32"><v-icon>mdi-volume-off</v-icon></v-avatar>
</v-btn>
</v-list-item>
<v-list-item class="mt-4">
<v-switch
dense
class="mt-0"
hide-details
label="隐藏帮助按钮"
v-model="box.usercfgs.isHideHelp"
label="隐藏刷新按钮"
hint="双击悬浮按钮也可刷新页面"
persistent-hint
v-model="box.usercfgs.isHideRefresh"
@change="saveUserCfgs"
></v-switch>
<v-spacer></v-spacer>
<v-btn fab small text @click="window.open(box.syscfgs.boxjs.repo)">
<v-avatar size="32"><v-icon>mdi-help</v-icon></v-avatar>
<v-btn fab small text>
<v-avatar size="32"><v-icon>mdi-refresh</v-icon></v-avatar>
</v-btn>
</v-list-item>
<v-list-item class="mt-4">
<v-switch
dense
class="mt-0"
hide-details
label="隐藏刷新按钮"
v-model="box.usercfgs.isHideRefresh"
label="调试模式 (页面)"
hint="每次访问都获取最新的页面"
persistent-hint
v-model="box.usercfgs.isDebugWeb"
@change="saveUserCfgs"
></v-switch>
<v-spacer></v-spacer>
<v-btn fab small text>
<v-avatar size="32"><v-icon>mdi-refresh</v-icon></v-avatar>
<v-avatar size="32"><v-icon>mdi-language-html5</v-icon></v-avatar>
</v-btn>
</v-list-item>
<!-- <v-list-item class="mt-4">
Expand Down Expand Up @@ -675,7 +701,7 @@ <h2>{{curapp.name}}</h2>
</v-btn>
</v-subheader>
<template v-for="(sub, subIdx) in appSubs" :key="sub.id">
<v-list-item dense two-line @click="">
<v-list-item dense two-line @click="reloadAppSub(sub)">
<v-list-item-avatar v-if="sub.icon"><v-img :src="sub.icon" /></v-list-item-avatar>
<v-list-item-avatar v-else color="primary"><v-icon dark>mdi-account</v-icon></v-list-item-avatar>
<v-list-item-content>
Expand Down Expand Up @@ -910,7 +936,7 @@ <h2>{{curbak.name}}</h2>
<v-btn dark fab small color="success" @click="">
<v-icon>mdi-export-variant</v-icon>
</v-btn>
<v-btn dark v-if="!box.usercfgs.isHideRefresh" fab small color="orange" @click="">
<v-btn dark v-if="!box.usercfgs.isHideRefresh" fab small color="orange" @dblclick="window.location.reload()">
<v-icon>mdi-refresh</v-icon>
</v-btn>
</v-speed-dial>
Expand All @@ -935,6 +961,7 @@ <h2>{{curbak.name}}</h2>
data() {
return {
ui: {
isCors: false,
path: null,
bfpath: null,
view: null,
Expand Down Expand Up @@ -966,6 +993,10 @@ <h2>{{curbak.name}}</h2>
version() {
return this.box.syscfgs.version
},
// 判断是否需要跨域请求
isCors() {
return this.ui.isCors
},
// 判断当前是否`WebApp`
isWebApp() {
return window.navigator.standalone
Expand Down Expand Up @@ -1038,6 +1069,13 @@ <h2>{{curbak.name}}</h2>
}
return 1
},
// 获取环境图标下标, 透明: 0, 彩色: 1 (默认)
iconEnvThemeIdx() {
if (this.isWebApp) {
return this.isTransparentIcons ? 0 : 1
}
return this.iconThemeIdx
},
isSaveUserCfgs: {
set(val) {
this.ui.isSaveUserCfgs = val
Expand Down Expand Up @@ -1161,7 +1199,7 @@ <h2>{{curbak.name}}</h2>
watch: {
'ui.path': {
handler(newval, oldval) {
if (!this.isWebApp) {
if (!this.isWebApp && !this.isCors) {
history.pushState({ title: 'BoxJs' }, '', newval)
}
const [, view, subview] = newval.split('/')
Expand Down Expand Up @@ -1200,10 +1238,21 @@ <h2>{{curbak.name}}</h2>
}
},
async created() {
// 如果 url 参数中指定的 baseURL, 则后续的请求都请求到指定的域
if (window.location.search) {
const [, baseURL] = /baseURL=(.*?)(&|$)/.exec(window.location.search)
axios.defaults.baseURL = baseURL || ''
this.ui.isCors = true
}
// 根据路径跳转视图
this.path = location.pathname
if (!this.isCors) {
const path = location.pathname
this.path = path === '/' ? '/app' : path
} else {
this.path = '/app'
}
// 监听浏览器后退事件
window.addEventListener('popstate', () => (this.path = location.pathname), false)
window.addEventListener('popstate', () => (this.path = path), false)
// 获取 BoxJs 数据, 取到数据再渲染页面
await axios.get('/query/boxdata').then((resp) => (this.box = resp.data))
// 获取全局备份
Expand All @@ -1223,6 +1272,8 @@ <h2>{{curbak.name}}</h2>
back() {
if (this.view === 'bak' && !this.bfpath) {
this.path = '/my'
} else if (this.view === 'app' && !this.bfpath) {
this.path = '/app'
} else {
this.path = this.bfpath
}
Expand Down Expand Up @@ -1449,7 +1500,7 @@ <h2>{{curbak.name}}</h2>
const curSessions = [{ key, val }]
const datas = [...session.datas, ...curSessions]
axios
.post('/api/save', [{ key, val }])
.post('/api/save', datas)
.then((resp) => {
delete resp.data.usercfgs
Object.assign(this.box, resp.data)
Expand All @@ -1461,7 +1512,7 @@ <h2>{{curbak.name}}</h2>
this.ui.overlay.show = true
const datas = this.curapp.datas
const data = datas.find((data) => data.key === key)
data.val = null
data.val = ''
axios
.post('/api/save', datas)
.then((resp) => {
Expand Down
58 changes: 49 additions & 9 deletions box/chavy.boxjs.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const $ = new Env('BoxJs')

$.version = '0.7.4'
$.version = '0.7.5'
$.versionType = 'beta'

// 存储`用户偏好`
Expand All @@ -21,8 +21,6 @@ $.json = $.name // `接口`类请求的响应体
$.html = $.name // `页面`类请求的响应体

$.web = `https://cdn.jsdelivr.net/gh/chavyleung/scripts@${$.version}/box/chavy.boxjs.html`
// $.web = `http://192.168.50.109:8080/box/chavy.boxjs.html?_=${new Date().getTime()}`
// $.web = `http://192.168.8.112:8080/box/chavy.boxjs.html?_=${new Date().getTime()}`

!(async () => {
// 勿扰模式
Expand All @@ -35,6 +33,8 @@ $.web = `https://cdn.jsdelivr.net/gh/chavyleung/scripts@${$.version}/box/chavy.b
$.isGet = $request.method === 'GET'
// 请求类型: POST
$.isPost = $request.method === 'POST'
// 请求类型: OPTIONS
$.isOptions = $request.method === 'OPTIONS'

// 请求类型: page、api、query
$.type = 'page'
Expand All @@ -48,8 +48,12 @@ $.web = `https://cdn.jsdelivr.net/gh/chavyleung/scripts@${$.version}/box/chavy.b
// 升级用户数据
upgradeUserData()

// 处理预检请求
if ($.isOptions) {
await handleOptions()
}
// 处理`页面`请求
if ($.isPage) {
else if ($.isPage) {
$.type = 'page'
await handlePage()
}
Expand Down Expand Up @@ -97,8 +101,10 @@ function getDomain(url) {
* 处理`页面`请求
*/
async function handlePage() {
// 调试模式: 是否每次都获取新的页面
const isDebugWeb = [true, 'true'].includes($.getdata('@chavy_boxjs_userCfgs.isDebugWeb'))
const cache = $.getjson($.KEY_web_cache, null)
if (cache && cache.version === $.version) {
if (!isDebugWeb && cache && cache.version === $.version) {
$.html = cache.cache
} else {
await $.http.get($.web).then(
Expand Down Expand Up @@ -156,6 +162,8 @@ async function handleApi() {
}
}

async function handleOptions() {}

/**
* ===================================
* 获取基础数据
Expand Down Expand Up @@ -504,14 +512,46 @@ function upgradeUserData() {
* ===================================
*/
function doneBox() {
if ($.isPage) donePage()
if ($.isOptions) doneOptions()
else if ($.isPage) donePage()
else if ($.isQuery) doneQuery()
else if ($.isApi) doneApi()
else $.done()
}

function getBaseDoneHeaders(mixHeaders = {}) {
return Object.assign(
{
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST,GET,OPTIONS,PUT,DELETE',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
},
mixHeaders
)
}

function getHtmlDoneHeaders() {
return getBaseDoneHeaders({
'Content-Type': 'text/html;charset=UTF-8'
})
}
function getJsonDoneHeaders() {
return getBaseDoneHeaders({
'Content-Type': 'text/json; charset=utf-8'
})
}

function doneOptions() {
const headers = getBaseDoneHeaders()
if ($.isSurge() || $.isLoon()) {
$.done({ response: { headers } })
} else if ($.isQuanX()) {
$.done({ headers })
}
}

function donePage() {
const headers = { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'text/html;charset=UTF-8' }
const headers = getHtmlDoneHeaders()
if ($.isSurge() || $.isLoon()) {
$.done({ response: { status: 200, headers, body: $.html } })
} else if ($.isQuanX()) {
Expand All @@ -521,7 +561,7 @@ function donePage() {

function doneQuery() {
$.json = $.toStr($.json)
const headers = { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'text/json; charset=utf-8' }
const headers = getJsonDoneHeaders()
if ($.isSurge() || $.isLoon()) {
$.done({ response: { status: 200, headers, body: $.json } })
} else if ($.isQuanX()) {
Expand All @@ -531,7 +571,7 @@ function doneQuery() {

function doneApi() {
$.json = $.toStr($.json)
const headers = { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'text/json; charset=utf-8' }
const headers = getJsonDoneHeaders()
if ($.isSurge() || $.isLoon()) {
$.done({ response: { status: 200, headers, body: $.json } })
} else if ($.isQuanX()) {
Expand Down

0 comments on commit 4974cb0

Please sign in to comment.