Skip to content

Commit

Permalink
feat: add screen adaptation prompt
Browse files Browse the repository at this point in the history
  • Loading branch information
@wswmsword
wswmsword committed Dec 10, 2024
1 parent 46bffe7 commit 758db2f
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 3 deletions.
141 changes: 141 additions & 0 deletions src/components/Notice.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<script setup lang="ts">
const { t } = useI18n()
</script>

<template>
<van-notice-bar
class="notice"
wrapable
background="white"
color="#323233"
>
<i18n-t keypath="menus.adaptation-info" tag="p">
<template #min>
<code>min()</code>
</template>
<template #max>
<code>max()</code>
</template>
<template #option>
<code>maxDisplayWidth</code>
</template>
</i18n-t>

<i18n-t keypath="menus.compatibility-info" tag="p">
<template #documentation>
<a target="_blank" href="https://easy-temps.github.io/easy-docs/vue3-vant-mobile/browser-adaptation">{{ t("menus.doc") }}</a>
</template>
</i18n-t>

<ul>
<i18n-t keypath="menus.browser-support.min-max-clamp" tag="li">
<template #compat_min>
<span class="yes-min">{{ t("menus.browser-support.compat") }}</span><span class="no-min">{{ t("menus.browser-support.not-compat") }}</span>
</template>
<template #min>
<code>min()</code>
</template>
<template #max>
<code>max()</code>
</template>
<template #clamp>
<code>clamp()</code>
</template>
</i18n-t>
<i18n-t keypath="menus.browser-support.calc" tag="li">
<template #compat_calc>
<span class="yes-calc">{{ t("menus.browser-support.compat") }}</span><span class="no-calc">{{ t("menus.browser-support.not-compat") }}</span>
</template>
<template #calc>
<code>calc()</code>
</template>
</i18n-t>
<i18n-t keypath="menus.browser-support.vw" tag="li">
<template #compat_vw>
<span class="yes-vw">{{ t("menus.browser-support.compat") }}</span><span class="no-vw">{{ t("menus.browser-support.not-compat") }}</span>
</template>
<template #vw>
<code>vw</code>
</template>
</i18n-t>
</ul>

<p class="show">
{{ t('menus.consider-compatibility') }}
</p>
</van-notice-bar>
</template>

<style scoped>
.notice {
font-size: 11px;
line-height: 17px;
}
code {
background: rgba(142, 150, 170, 0.14);
padding: 2px 6px;
color: #51a13c;
border-radius: 4px;
}
p {
margin: 9px 0;
}
a {
text-decoration: underline;
color: #51a13c;
text-underline-offset: 3px;
}
.yes-min,
.yes-vw,
.yes-calc {
color: green;
display: none;
}
.no-min,
.no-vw,
.no-calc {
color: red;
display: none;
}
.show {
display: none;
}
@supports (left: min(1px, 2px)) {
.yes-min {
display: inline;
}
}
@supports not (left: min(1px, 2px)) {
.no-min {
display: inline;
}
}
@supports (left: calc(1px + 2px)) {
.yes-calc {
display: inline;
}
}
@supports not (left: calc(1px + 2px)) {
.no-calc {
display: inline;
}
}
@supports (left: 1vw) {
.yes-vw {
display: inline;
}
}
@supports not (left: 1vw) {
.no-vw {
display: inline;
}
}
@supports (left: min(1px, 2px)) and (left: calc(1px + 2px)) and (left: 1vw) {
.show {
display: block;
}
}
</style>
14 changes: 13 additions & 1 deletion src/locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,19 @@
"settings": "Settings",
"basicSettings": "Basic Settings",
"exampleComponents": "Example components",
"forgot-password": "Forgot Password"
"forgot-password": "Forgot Password",
"prompt": "Prompt",
"adaptation-info": "Screen adaptation is implemented using {min} and {max}. If style issues occur due to compatibility problems, open the vite.config.ts file, remove the {option} option, and disable desktop adaptation.",
"compatibility-info": "If you need to meet both compatibility and desktop adaptation requirements, please refer to the {documentation} for detailed information.",
"doc": "documentation",
"browser-support": {
"min-max-clamp": "The current browser is {compat_min} with {min}, {max}, and {clamp}.",
"calc": "The current browser is {compat_calc} with {calc}.",
"vw": "The current browser is {compat_vw} with {vw}.",
"compat": "compatible",
"not-compat": "not compatible"
},
"consider-compatibility": "Please consider whether the actual deployment scenario of the application requires compatibility adjustments."
},
"mock": {
"fromAsyncData": "Data from asynchronous requests",
Expand Down
14 changes: 13 additions & 1 deletion src/locales/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,19 @@
"settings": "设置",
"basicSettings": "基本设置",
"exampleComponents": "示例组件",
"forgot-password": "忘记密码"
"forgot-password": "忘记密码",
"prompt": "提示",
"adaptation-info": "屏幕适配通过 {min} 和 {max} 实现，若兼容性导致了样式错乱，请打开 vite.config.ts 文件，删除 {option} 选项，关闭桌面端适配。",
"compatibility-info": "若需同时满足兼容性和桌面端适配，请查看{documentation}了解详细信息。",
"doc": "文档",
"browser-support": {
"min-max-clamp": "当前浏览器{compat_min} {min}、{max} 和 {clamp}。",
"calc": "当前浏览器{compat_calc} {calc}。",
"vw": "当前浏览器{compat_vw} {vw}。",
"compat": "已兼容",
"not-compat": "未兼容"
},
"consider-compatibility": "请考虑应用的真实投放场景是否需要考虑兼容性。"
},
"mock": {
"fromAsyncData": "来自异步请求的数据",
Expand Down
4 changes: 4 additions & 0 deletions src/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ const menuItems = computed(() => ([
</template>
</VanCellGroup>

<VanCellGroup :title="t('menus.prompt')" :inset="true">
<Notice />
</VanCellGroup>

<van-popup v-model:show="showLanguagePicker" position="bottom">
<van-picker
v-model="languageValues"
Expand Down
2 changes: 1 addition & 1 deletion src/types/auto-imports.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,6 @@ declare global {
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
import('vue')
}
2 changes: 2 additions & 0 deletions src/types/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ declare module 'vue' {
Chart: typeof import('./../components/Chart/index.vue')['default']
GhostButton: typeof import('./../components/GhostButton.vue')['default']
NavBar: typeof import('./../components/NavBar.vue')['default']
Notice: typeof import('./../components/Notice.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
TabBar: typeof import('./../components/TabBar.vue')['default']
Expand All @@ -23,6 +24,7 @@ declare module 'vue' {
VanIcon: typeof import('vant/es')['Icon']
VanImage: typeof import('vant/es')['Image']
VanNavBar: typeof import('vant/es')['NavBar']
VanNoticeBar: typeof import('vant/es')['NoticeBar']
VanPicker: typeof import('vant/es')['Picker']
VanPopup: typeof import('vant/es')['Popup']
VanSpace: typeof import('vant/es')['Space']
Expand Down

5 comments on commit 758db2f

@CharleeWa
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

很棒的工作！辛苦了 ❤ 。 关于浏览器对CSS函数支持说明，我有不同的想法。我认为这应该出现在文档说明文中，可能不适合出现在示例的首页或者二级路由内，因为这可能会让刚接触模板的开发者增加心智负担，他们可能没有时间去研究技术细节，而是由于顾虑会放弃对模板的使用，尽管我们这样做对开发者是有好处的。在浏览器控制台当中打印这类警告可能是最常见的做法，毕竟绝大部分开发者一开始可能不会遇到这些问题，对此，JS CSS.supports 也许是一个好的方法。顺着这个思路，我在想有没有一种可能，在运行时检测到不支持这类CSS函数时自动屏蔽掉对桌面端访问的支持，换成 vw， 这更智能但不太现实 🙈。想知道你的一些想法。

@wswmsword
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

运行时检测 min() 之类 CSS 函数是否支持，不支持替换成备选的纯 vw，这个方法不太行，这样要准备 2～3 倍代码量：

.a {
  width: min(10vw, 75px);
}

@supports (width: min(10vw, 75px)) {
  width: 10vw;
}

这个是 CSS supports，另一边 JS supports 的代价更大，且有更无害的方法来解决这种兼容问题，所以如果采取 supports 不如放弃 min(vw, px) 适配。

关于适配提示可以考虑放到控制台，不过我感觉这个问题就是选 A/B 的复杂程度，只是给出删除 maxDisplayWidth 选项的提醒，如果精简提醒是否可行：

模版的主页，包含一个灰色框框，框住了 min() 等 CSS 函数的兼容信息文字

把上面灰色框框部分的兼容信息删除，这些过于细节了。主页或二级页面放提醒，可能可以直接解决用户的疑惑，引导去文档，放控制台有点假设用户遇到问题之后一定会打开控制台。

@CharleeWa
Copy link
Collaborator

@CharleeWa CharleeWa commented on 758db2f Dec 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同意！控制台打印警告虽好，但不易查看；supports 兼容的想法不如不做适配，代价太大了。 兼容性提示信息可以放到二级页面，新增加一个cell 引导用户跳转。不过，我还是保留我的想法，兼容说明已经在文档体现出来了，不用在示例里面体现出来，因为示例是模板功能性补充。示例Demo是开发者第一眼的内容，用户的顾虑问题还是会存在。

@wswmsword
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好的，我先移除这个提示。是否考虑在“我的” Tab 页面内加一个“文档”链接 cell。

@CharleeWa
Copy link
Collaborator

@CharleeWa CharleeWa commented on 758db2f Dec 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以的 😀

Please sign in to comment.