Skip to content

Commit e596ccf

Browse files
chavyleungchavyleung
committed
更新[BoxJs TF]: 调整搜索条样式,搜索操作界面
1 parent 13a5fb8 commit e596ccf

3 files changed

Lines changed: 123 additions & 64 deletions

File tree

‎box/chavy.boxjs.html‎

Lines changed: 108 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@
3939
padding-top: constant(safe-area-inset-top);
4040
padding-top: env(safe-area-inset-top);
4141
}
42-
.v-app-bar .v-autocomplete {
42+
.v-app-bar .v-autocomplete,
43+
.v-input {
4344
box-sizing: border-box;
4445
}
4546
.v-bottom-navigation,
@@ -75,59 +76,96 @@
7576
<v-snackbar top app v-model="ui.snackbar.show" v-bind="ui.snackbar">{{ui.snackbar.msg}}</v-snackbar>
7677
<!-- 头部 -->
7778
<v-app-bar app dense :color="isDarkMode || !isWebApp ? undefined : 'primary'">
78-
<!-- 容器切换 Surge、QuanX、Loon -->
79-
<v-menu bottom left v-if="isMainView">
79+
<v-dialog v-model="ui.searchDialog.show" fullscreen scrollable>
8080
<template #activator="{ on }">
81-
<v-btn icon v-on="on" :dark="isWebApp">
82-
<v-avatar size="26"><img :src="env.icons[iconEnvThemeIdx]" /></v-avatar>
83-
</v-btn>
84-
</template>
85-
<v-list>
86-
<v-list-item dense v-for="(env, envIdx) in envs" :key="env.id" @click="switchEnv(env.id)">
87-
<v-list-item-avatar size="26"><v-img :src="env.icon" /></v-list-item-avatar>
88-
<v-list-item-title>{{env.id}}</v-list-item-title>
89-
</v-list-item>
90-
</v-list>
91-
</v-menu>
92-
<!-- 返回按钮 -->
93-
<v-btn icon :dark="isWebApp" @click="back" v-else>
94-
<v-icon>mdi-chevron-left</v-icon>
95-
</v-btn>
96-
<!-- 搜索条 -->
97-
<v-autocomplete
98-
v-bind="ui.searchBar"
99-
:items="apps"
100-
:label="`BoxJs - v${version}`"
101-
:filter="(item, queryText, itemText) => { return item.id.includes(queryText) || item.name.includes(queryText) }"
102-
color="primary"
103-
hide-no-data
104-
hide-details
105-
solo
106-
dense
107-
>
108-
<template #prepend-inner>
109-
<v-progress-circular v-show="isLoading" indeterminate :width="2" size="18" color="primary"></v-progress-circular>
81+
<!-- 搜索条 -->
82+
<v-autocomplete
83+
v-bind="ui.searchBar"
84+
:label="`BoxJs - v${version}`"
85+
v-on="on"
86+
color="primary"
87+
hide-no-data
88+
hide-details
89+
solo
90+
dense
91+
>
92+
<template #prepend-inner>
93+
<!-- 容器切换 Surge、QuanX、Loon -->
94+
<v-menu bottom left v-if="!isLoading && isMainView">
95+
<template #activator="{ on }">
96+
<v-avatar v-on="on" size="26" class="mr-2"><img :src="env.icons[iconEnvThemeIdx]" /></v-avatar>
97+
</template>
98+
<v-list>
99+
<v-list-item dense v-for="(env, envIdx) in envs" :key="env.id" @click="switchEnv(env.id)">
100+
<v-list-item-avatar size="26"><v-img :src="env.icon" /></v-list-item-avatar>
101+
<v-list-item-title>{{env.id}}</v-list-item-title>
102+
</v-list-item>
103+
</v-list>
104+
</v-menu>
105+
<!-- 返回按钮 -->
106+
<v-icon
107+
:dark="isDarkMode || !isWebApp ? undefined : 'primary'"
108+
@click="back"
109+
size="26"
110+
:dark="isWebApp"
111+
class="mr-2"
112+
v-else-if="!isLoading && !isMainView"
113+
>
114+
mdi-chevron-left
115+
</v-icon>
116+
<v-progress-circular
117+
v-show="isLoading"
118+
indeterminate
119+
:width="2"
120+
size="26"
121+
class="mr-2"
122+
color="primary"
123+
></v-progress-circular>
124+
</template>
125+
<template #append>
126+
<v-icon @click="ui.naviDrawer.show = true">mdi-menu</v-icon>
127+
</template>
128+
</v-autocomplete>
110129
</template>
111-
<template #item="{ item }">
112-
<v-list-item @click="switchAppView(item.id)" dense>
113-
<v-list-item-avatar><img :src="item.icon" /></v-list-item-avatar>
114-
<v-list-item-content>
115-
<v-list-item-title>{{`${item.name} (${item.id})`}}</v-list-item-title>
116-
<v-list-item-subtitle>{{item.repo}}</v-list-item-subtitle>
117-
<v-list-item-subtitle>{{item.author}}</v-list-item-subtitle>
118-
</v-list-item-content>
119-
<v-list-item-action>
120-
<v-btn icon @click.stop="favApp(item.id)">
121-
<v-icon :color="item.favIconColor" v-text="item.favIcon" />
130+
<v-card>
131+
<v-card-subtitle class="px-0">
132+
<v-app-bar :color="isDarkMode || !isWebApp ? undefined : 'primary'" dense>
133+
<v-btn icon dense :dark="isWebApp" @click="ui.searchDialog.show = false">
134+
<v-icon>mdi-chevron-left</v-icon>
122135
</v-btn>
123-
</v-list-item-action>
124-
</v-list-item>
125-
</template>
126-
</v-autocomplete>
127-
<!-- 侧栏开关 -->
128-
<v-btn icon @click="ui.naviDrawer.show = true">
129-
<v-avatar size="26"><img :src="box.syscfgs.orz3.icon" /></v-avatar>
130-
</v-btn>
136+
<v-text-field
137+
ref="search"
138+
v-model="ui.searchBar.input"
139+
:label="`BoxJs - v${version}`"
140+
autofocus
141+
dense
142+
hide-details
143+
solo
144+
></v-text-field>
145+
<v-btn icon @click="window.open(box.syscfgs.orz3.repo)">
146+
<v-avatar size="26"><img :src="box.syscfgs.orz3.icon" /></v-avatar>
147+
</v-btn>
148+
</v-app-bar>
149+
</v-card-subtitle>
150+
<v-card-text class="px-0">
151+
<v-list nav>
152+
<v-list-item v-for="(app, appIdx) in searchApps" @click="ui.searchDialog.show = false, switchAppView(app.id)" dense>
153+
<v-list-item-avatar><img :src="app.icon" /></v-list-item-avatar>
154+
<v-list-item-content>
155+
<v-list-item-title>{{`${app.name} (${app.id})`}}</v-list-item-title>
156+
<v-list-item-subtitle>{{app.repo}}</v-list-item-subtitle>
157+
<v-list-item-subtitle>{{app.author}}</v-list-item-subtitle>
158+
</v-list-item-content>
159+
<v-list-item-action>
160+
<v-btn icon @click.stop="ui.searchDialog.show = false, favApp(app.id)">
161+
<v-icon :color="app.favIconColor" v-text="app.favIcon" />
162+
</v-btn>
163+
</v-list-item-action>
164+
</v-list-item>
165+
</v-list>
166+
</v-card-text>
167+
</v-card>
168+
</v-dialog>
131169
</v-app-bar>
132170
<!-- 侧栏 -->
133171
<v-navigation-drawer app v-model="ui.naviDrawer.show" temporary right>
@@ -384,7 +422,7 @@
384422
<v-expansion-panel-content>
385423
<v-list dense nav class="ma-n4">
386424
<template v-for="(app, appIdx) in favApps" :key="app.id">
387-
<v-list-item dense three-line @click="switchAppView(app.id)">
425+
<v-list-item dense @click="switchAppView(app.id)">
388426
<v-list-item-avatar><v-img :src="app.icon" /></v-list-item-avatar>
389427
<v-list-item-content>
390428
<v-list-item-title>{{app.name}} ({{app.id}})</v-list-item-title>
@@ -426,7 +464,7 @@
426464
<v-expansion-panel-content>
427465
<v-list dense nav class="ma-n4">
428466
<template v-for="(app, appIdx) in sub.apps" :key="app.id">
429-
<v-list-item dense three-line @click="switchAppView(app.id)">
467+
<v-list-item dense @click="switchAppView(app.id)">
430468
<v-list-item-avatar><v-img :src="app.icon" /></v-list-item-avatar>
431469
<v-list-item-content>
432470
<v-list-item-title>{{app.name}} ({{app.id}})</v-list-item-title>
@@ -454,7 +492,7 @@
454492
<v-expansion-panel-content>
455493
<v-list dense nav class="ma-n4">
456494
<template v-for="(app, appIdx) in sysApps" :key="app.id">
457-
<v-list-item dense three-line @click="switchAppView(app.id)">
495+
<v-list-item dense @click="switchAppView(app.id)">
458496
<v-list-item-avatar><v-img :src="app.icon" /></v-list-item-avatar>
459497
<v-list-item-content>
460498
<v-list-item-title>{{app.name}} ({{app.id}})</v-list-item-title>
@@ -882,7 +920,7 @@ <h2>{{curapp.name}}</h2>
882920
</v-chip-group>
883921
</v-card-text>
884922
<v-card-actions>
885-
<v-btn text small color="red" @click="">抹掉数据</v-btn>
923+
<!-- <v-btn text small color="red" @click="">抹掉数据</v-btn> -->
886924
<v-spacer></v-spacer>
887925
<v-dialog v-model="ui.impGlobalBakDialog.show">
888926
<template #activator="{ on }">
@@ -917,7 +955,7 @@ <h2>{{curapp.name}}</h2>
917955
<v-card class="mt-4" v-if="box.globalbaks">
918956
<template v-for="(bak, bakIdx) in box.globalbaks">
919957
<v-divider v-if="bakIdx>0"></v-divider>
920-
<v-list-item three-line dense @click="switchBakView(bak.id)">
958+
<v-list-item dense @click="switchBakView(bak.id)">
921959
<v-list-item-content>
922960
<v-list-item-title>{{bak.name}}</v-list-item-title>
923961
<v-list-item-subtitle>{{dayjs(bak.createTime).format('YYYY-MM-DD HH:mm:ss')}}</v-list-item-subtitle>
@@ -1079,7 +1117,8 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
10791117
scrollY: {}, //记录每个界面的滚动值
10801118
overlay: { show: false, val: 60 },
10811119
snackbar: { show: false, color: 'primary', msg: '' },
1082-
searchBar: { menuProps: { closeOnContentClick: true } },
1120+
searchBar: { readonly: true, input: '' },
1121+
searchDialog: { show: false },
10831122
versionsheet: { show: false },
10841123
updatesheet: { show: false },
10851124
naviDrawer: { show: false },
@@ -1167,7 +1206,7 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
11671206
},
11681207
// 判断当前是否`主页面` (非二级页面)
11691208
isMainView() {
1170-
return this.path.split('/').length < 3
1209+
return !this.subview
11711210
},
11721211
// 判断当前是否`暗黑模式`
11731212
isDarkMode() {
@@ -1197,10 +1236,7 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
11971236
},
11981237
// 获取环境图标下标, 透明: 0, 彩色: 1 (默认)
11991238
iconEnvThemeIdx() {
1200-
if (this.isWebApp) {
1201-
return this.isTransparentIcons ? 0 : 1
1202-
}
1203-
return this.iconThemeIdx
1239+
return this.isDarkMode ? 0 : 1
12041240
},
12051241
// 判断是否有壁纸
12061242
isWallpaper() {
@@ -1342,9 +1378,11 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
13421378
const apps = []
13431379
apps.push(...this.subApps)
13441380
apps.push(...this.sysApps)
1345-
// apps.sort((a, b) => a.name.localeCompare(b.name))
13461381
return apps
13471382
},
1383+
searchApps() {
1384+
return this.apps.filter((app) => app.id.includes(this.ui.searchBar.input) || app.name.includes(this.ui.searchBar.input))
1385+
},
13481386
// 获取全局备份
13491387
baks() {
13501388
return this.box.globalbaks
@@ -1428,6 +1466,13 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
14281466
this.$vuetify.goTo(scrollY, { duration: 0, offset: offsetTop })
14291467
}
14301468
},
1469+
'ui.searchDialog.show': {
1470+
handler(newval) {
1471+
if (newval === false) {
1472+
this.ui.searchBar.input = ''
1473+
}
1474+
}
1475+
},
14311476
'box.usercfgs': {
14321477
deep: true,
14331478
handler(newval, oldval) {

‎box/chavy.boxjs.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const $ = new Env('BoxJs')
22

3-
$.version = '0.7.24'
3+
$.version = '0.7.25'
44
$.versionType = 'beta'
55

66
/**
@@ -37,6 +37,7 @@ $.html = $.name // `页面`类请求的响应体
3737

3838
// 页面源码地址
3939
$.web = `https://cdn.jsdelivr.net/gh/chavyleung/scripts@${$.version}/box/chavy.boxjs.html?_=${new Date().getTime()}`
40+
$.web = `http://192.168.50.109:8080/box/chavy.boxjs.html?_=${new Date().getTime()}`
4041
// 版本说明地址 (Release Note)
4142
$.ver = 'https://gitee.com/chavyleung/scripts/raw/master/box/release/box.release.tf.json'
4243

‎box/release/box.release.tf.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
{
22
"releases": [
3+
{
4+
"version": "0.7.25",
5+
"tags": ["beta"],
6+
"author": "@chavyleung",
7+
"icon": "https://avatars3.githubusercontent.com/u/29748519",
8+
"repo": "https://github.com/chavyleung",
9+
"notes": [
10+
{
11+
"name": "调整",
12+
"descs": ["搜索条样式", "搜索操作界面"]
13+
}
14+
]
15+
},
316
{
417
"version": "0.7.24",
518
"tags": ["beta"],

0 commit comments

Comments
 (0)