create-unibest 4.0.2 → 4.0.4

package/features/i18n/files/src/tabbar/config.ts

@@ -0,0 +1,145 @@
+import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
+import type { CustomTabBarItem, NativeTabBarItem } from './types'
+
+/**
+ * tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
+ * 0: 'NO_TABBAR' `无 tabbar`
+ * 1: 'NATIVE_TABBAR'  `原生 tabbar`
+ * 2: 'CUSTOM_TABBAR' `自定义 tabbar`
+ *
+ * 温馨提示：本文件的任何代码更改了之后，都需要重新运行，否则 pages.json 不会更新导致配置不生效
+ */
+export const TABBAR_STRATEGY_MAP = {
+  NO_TABBAR: 0,
+  NATIVE_TABBAR: 1,
+  CUSTOM_TABBAR: 2,
+}
+
+// TODO: 1/3. 通过这里切换使用tabbar的策略
+// 如果是使用 NO_TABBAR(0)，nativeTabbarList 和 customTabbarList 都不生效
+// 如果是使用 NATIVE_TABBAR(1)，只需要配置 nativeTabbarList，customTabbarList 不生效
+// 如果是使用 CUSTOM_TABBAR(2)，只需要配置 customTabbarList，nativeTabbarList 不生效
+export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR
+
+// TODO: 2/3. 使用 NATIVE_TABBAR 时，更新下面的 tabbar 配置
+export const nativeTabbarList: NativeTabBarItem[] = [
+  {
+    iconPath: 'static/tabbar/home.png',
+    selectedIconPath: 'static/tabbar/homeHL.png',
+    pagePath: 'pages/index/index',
+    text: '%tabbar.home%',
+  },
+  {
+    iconPath: 'static/tabbar/personal.png',
+    selectedIconPath: 'static/tabbar/personalHL.png',
+    pagePath: 'pages/me/me',
+    text: '%tabbar.me%',
+  },
+]
+
+// TODO: 3/3. 使用 CUSTOM_TABBAR 时，更新下面的 tabbar 配置
+// 如果需要配置鼓包，需要在 'tabbar/store.ts' 里面设置，最后在 `tabbar/index.vue` 里面更改鼓包的图片
+export const customTabbarList: CustomTabBarItem[] = [
+  {
+    text: '%tabbar.home%',
+    pagePath: 'pages/index/index',
+    // 注意 unocss 图标需要如下处理：（二选一）
+    // 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
+    // 2）配置到 unocss.config.ts 的 safelist 中
+    iconType: 'unocss',
+    icon: 'i-carbon-home',
+    // badge: 'dot',
+  },
+  // 鼓包配置示例（2025-12-31）
+  // 中间鼓包tabbarItem配置：通常是扫描按钮、发布按钮、更多按钮等，点击触发业务逻辑
+  // {
+  //   pagePath: 'pages/me/me',
+  //   text: '我的',
+  //   // 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
+  //   // 2）配置到 unocss.config.ts 的 safelist 中
+  //   iconType: 'image',
+  //   icon: '/static/tabbar/scan.png',
+  //   isBulge: true,
+  // },
+  {
+    pagePath: 'pages/i18n/index',
+    text: '%i18n.title%',
+    iconType: 'unocss',
+    icon: 'i-carbon-ibm-watson-language-translator',
+    // badge: 10,
+  },
+  {
+    pagePath: 'pages/me/me',
+    text: '%tabbar.me%',
+    iconType: 'unocss',
+    icon: 'i-carbon-user',
+    // badge: 10,
+  },
+
+  // 其他类型演示
+  // 1、uiLib
+  // {
+  //   pagePath: 'pages/index/index',
+  //   text: '首页',
+  //   iconType: 'uiLib',
+  //   icon: 'home',
+  // },
+  // 2、iconfont
+  // {
+  //   pagePath: 'pages/index/index',
+  //   text: '首页',
+  //   // 注意 iconfont 图标需要额外加上 'iconfont'，如下
+  //   iconType: 'iconfont',
+  //   icon: 'iconfont icon-my',
+  // },
+  // 3、image
+  // {
+  //   pagePath: 'pages/index/index',
+  //   text: '首页',
+  //   // 使用 ‘image’时，需要配置 icon + iconActive 2张图片
+  //   iconType: 'image',
+  //   icon: '/static/tabbar/home.png',
+  //   iconActive: '/static/tabbar/homeHL.png',
+  // },
+]
+
+/**
+ * 是否启用 tabbar 缓存
+ * NATIVE_TABBAR(1) 和 CUSTOM_TABBAR(2) 时，需要tabbar缓存
+ */
+export const tabbarCacheEnable
+  = [TABBAR_STRATEGY_MAP.NATIVE_TABBAR, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR].includes(selectedTabbarStrategy)
+
+/**
+ * 是否启用自定义 tabbar
+ * CUSTOM_TABBAR(2) 时，启用自定义tabbar
+ */
+export const customTabbarEnable = [TABBAR_STRATEGY_MAP.CUSTOM_TABBAR].includes(selectedTabbarStrategy)
+
+/**
+ * 是否需要隐藏原生 tabbar
+ * CUSTOM_TABBAR(2) 时，需要隐藏原生tabbar
+ */
+export const needHideNativeTabbar = selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR
+
+const _tabbarList = customTabbarEnable ? customTabbarList.map(item => ({ text: item.text, pagePath: item.pagePath })) : nativeTabbarList
+export const tabbarList = customTabbarEnable ? customTabbarList : nativeTabbarList
+
+// NATIVE_TABBAR(1) 时，显示原生Tabbar，在i18n的情况下需要 setTabbarItem (框架已经处理)
+export const isNativeTabbar = selectedTabbarStrategy === TABBAR_STRATEGY_MAP.NATIVE_TABBAR
+
+const _tabbar: TabBar = {
+  // 只有微信小程序支持 custom。App 和 H5 不生效
+  custom: selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR,
+  color: '#999999',
+  selectedColor: '#018d71',
+  backgroundColor: '#F8F8F8',
+  borderStyle: 'black',
+  height: '50px',
+  fontSize: '10px',
+  iconWidth: '24px',
+  spacing: '3px',
+  list: _tabbarList as unknown as TabBar['list'],
+}
+
+export const tabBar = tabbarCacheEnable ? _tabbar : undefined

package/features/i18n/files/src/tabbar/i18n.ts

@@ -0,0 +1,29 @@
+import { t } from '@/locale'
+import { isCurrentPageTabbar } from '@/utils'
+import { isNativeTabbar, tabbarList } from './config'
+
+// h5 中一直可以生效，小程序里面默认是无法动态切换的，这里借助vue模板自带响应式的方式
+// 直接替换 %xxx% 为 t('xxx')即可
+export function getI18nText(key: string) {
+  // 获取 %xxx% 中的 xxx
+  const match = key.match(/%(.+?)%/)
+  if (match) {
+    key = match[1]
+  }
+  console.log('设置多语言：', key)
+  return t(key)
+}
+
+export function setTabbarItem() {
+// 只有使用原生Tabbar才需要 setTabbarItem
+// 而且只有当前页是tabbar页才能设置
+  console.log('设置多语言：setTabBarItem', isNativeTabbar, isCurrentPageTabbar())
+  if (isNativeTabbar && isCurrentPageTabbar()) {
+    tabbarList.forEach((item, index) => {
+      uni.setTabBarItem({
+        index,
+        text: getI18nText(item.text),
+      })
+    })
+  }
+}

package/features/i18n/files/src/tabbar/index.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+// i-carbon-code
+import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
+import { setTabbarItem } from './i18n'
+import { tabbarList, tabbarStore } from './store'
+import TabbarItem from './TabbarItem.vue'
+
+// #ifdef MP-WEIXIN
+// 将自定义节点设置成虚拟的（去掉自定义组件包裹层），更加接近Vue组件的表现，能更好的使用flex属性
+defineOptions({
+  virtualHost: true,
+})
+// #endif
+
+/**
+ * 中间的鼓包tabbarItem的点击事件
+ */
+function handleClickBulge() {
+  uni.showToast({
+    title: '点击了中间的鼓包tabbarItem',
+    icon: 'none',
+  })
+}
+
+function handleClick(index: number) {
+  // 点击原来的不做操作
+  if (index === tabbarStore.curIdx) {
+    return
+  }
+  if (tabbarList[index].isBulge) {
+    handleClickBulge()
+    return
+  }
+  const url = tabbarList[index].pagePath
+  tabbarStore.setCurIdx(index)
+  if (tabbarCacheEnable) {
+    uni.switchTab({ url })
+  }
+  else {
+    uni.navigateTo({ url })
+  }
+}
+// #ifndef MP-WEIXIN || MP-ALIPAY
+// 因为有了 custom:true， 微信里面不需要多余的hide操作
+onLoad(() => {
+  // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
+  needHideNativeTabbar
+  && uni.hideTabBar({
+    fail(err) {
+      console.log('hideTabBar fail: ', err)
+    },
+    success(res) {
+      // console.log('hideTabBar success: ', res)
+    },
+  })
+})
+// #endif
+
+// #ifdef MP-ALIPAY
+onMounted(() => {
+  // 解决支付宝自定义tabbar 未隐藏导致有2个 tabBar 的问题; 注意支付宝很特别，需要在 onMounted 钩子调用
+  customTabbarEnable // 另外，支付宝里面，只要是 customTabbar 都需要隐藏
+  && uni.hideTabBar({
+    fail(err) {
+      console.log('hideTabBar fail: ', err)
+    },
+    success(res) {
+      // console.log('hideTabBar success: ', res)
+    },
+  })
+})
+// #endif
+const activeColor = 'var(--wot-color-theme, #1890ff)'
+const inactiveColor = '#666'
+function getColorByIndex(index: number) {
+  return tabbarStore.curIdx === index ? activeColor : inactiveColor
+}
+
+// 注意，上面处理的是自定义tabbar，下面处理的是原生tabbar，参考：https://unibest.tech/base/10-i18n
+onShow(() => {
+  setTabbarItem()
+})
+</script>
+
+<template>
+  <view v-if="customTabbarEnable" class="h-50px pb-safe">
+    <view class="border-and-fixed bg-white" @touchmove.stop.prevent>
+      <view class="h-50px flex items-center">
+        <view
+          v-for="(item, index) in tabbarList" :key="index"
+          class="flex flex-1 flex-col items-center justify-center"
+          :style="{ color: getColorByIndex(index) }"
+          @click="handleClick(index)"
+        >
+          <view v-if="item.isBulge" class="relative">
+            <!-- 中间一个鼓包tabbarItem的处理 -->
+            <view class="bulge">
+              <TabbarItem :item="item" :index="index" class="text-center" is-bulge />
+            </view>
+          </view>
+          <TabbarItem v-else :item="item" :index="index" class="relative px-3 text-center" />
+        </view>
+      </view>
+
+      <view class="pb-safe" />
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.border-and-fixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  border-top: 1px solid #eee;
+  box-sizing: border-box;
+}
+// 中间鼓包的样式
+.bulge {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform-origin: top center;
+  transform: translateX(-50%) scale(0.5) translateY(-33%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 250rpx;
+  height: 250rpx;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: inset 0 0 0 1px #fefefe;
+
+  &:active {
+    // opacity: 0.8;
+  }
+}
+</style>

package/features/i18n/files/src/types/i18n.d.ts

@@ -0,0 +1,8 @@
+export {}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $t: (key: string, opt?: Record<string, any>) => string
+    $tm: (key: string, opt?: Record<string, any>) => [] | { [p: string]: any }
+  }
+}

package/features/i18n/files/src/utils/i18n.ts

@@ -0,0 +1,10 @@
+import { t } from '@/locale/index'
+
+/** 非vue 文件使用 i18n */
+export function testI18n() {
+  // 下面同样生效
+  uni.showModal({
+    title: 'i18n 测试',
+    content: t('i18n.title'),
+  })
+}

package/features/i18n/files/src/utils/index.ts

@@ -0,0 +1,179 @@
+import type { PageMetaDatum, SubPackages } from '@uni-helper/vite-plugin-uni-pages'
+import { isMpWeixin } from '@uni-helper/uni-env'
+import { pages, subPackages } from '@/pages.json'
+import { isPageTabbar } from '@/tabbar/store'
+
+export type PageInstance = Page.PageInstance<AnyObject, object> & { $page: Page.PageInstance<AnyObject, object> & { fullPath: string } }
+
+export function getLastPage() {
+  // getCurrentPages() 至少有1个元素，所以不再额外判断
+  // const lastPage = getCurrentPages().at(-1)
+  // 上面那个在低版本安卓中打包会报错，所以改用下面这个【虽然我加了 src/interceptions/prototype.ts，但依然报错】
+  const pages = getCurrentPages()
+  return pages[pages.length - 1] as PageInstance
+}
+
+/**
+ * 获取当前页面路由的 path 路径和 redirectPath 路径
+ * path 如 '/pages/login/login'
+ * redirectPath 如 '/pages/demo/base/route-interceptor'
+ */
+export function currRoute() {
+  const lastPage = getLastPage() as PageInstance
+  if (!lastPage) {
+    return {
+      path: '',
+      query: {},
+    }
+  }
+  const currRoute = lastPage.$page
+  // console.log('lastPage.$page:', currRoute)
+  // console.log('lastPage.$page.fullpath:', currRoute.fullPath)
+  // console.log('lastPage.$page.options:', currRoute.options)
+  // console.log('lastPage.options:', (lastPage as any).options)
+  // 经过多端测试，只有 fullPath 靠谱，其他都不靠谱
+  const { fullPath } = currRoute
+  // console.log(fullPath)
+  // eg: /pages/login/login?redirect=%2Fpages%2Fdemo%2Fbase%2Froute-interceptor (小程序)
+  // eg: /pages/login/login?redirect=%2Fpages%2Froute-interceptor%2Findex%3Fname%3Dfeige%26age%3D30(h5)
+  return parseUrlToObj(fullPath)
+}
+
+export function ensureDecodeURIComponent(url: string) {
+  if (url.startsWith('%')) {
+    return ensureDecodeURIComponent(decodeURIComponent(url))
+  }
+  return url
+}
+/**
+ * 解析 url 得到 path 和 query
+ * 比如输入url: /pages/login/login?redirect=%2Fpages%2Fdemo%2Fbase%2Froute-interceptor
+ * 输出: {path: /pages/login/login, query: {redirect: /pages/demo/base/route-interceptor}}
+ */
+export function parseUrlToObj(url: string) {
+  const [path, queryStr] = url.split('?')
+  // console.log(path, queryStr)
+
+  if (!queryStr) {
+    return {
+      path,
+      query: {},
+    }
+  }
+  const query: Record<string, string> = {}
+  queryStr.split('&').forEach((item) => {
+    const [key, value] = item.split('=')
+    // console.log(key, value)
+    query[key] = ensureDecodeURIComponent(value) // 这里需要统一 decodeURIComponent 一下，可以兼容h5和微信y
+  })
+  return { path, query }
+}
+/**
+ * 得到所有的需要登录的 pages，包括主包和分包的
+ * 这里设计得通用一点，可以传递 key 作为判断依据，默认是 excludeLoginPath, 与 route-block 配对使用
+ * 如果没有传 key，则表示所有的 pages，如果传递了 key, 则表示通过 key 过滤
+ */
+export function getAllPages(key?: string) {
+  // 这里处理主包
+  const mainPages = (pages as PageMetaDatum[])
+    .filter(page => !key || page[key])
+    .map(page => ({
+      ...page,
+      path: `/${page.path}`,
+    }))
+
+  // 这里处理分包
+  const subPages: PageMetaDatum[] = []
+  ;(subPackages as SubPackages).forEach((subPageObj) => {
+    // console.log(subPageObj)
+    const { root } = subPageObj
+
+    subPageObj.pages
+      .filter(page => !key || page[key])
+      .forEach((page) => {
+        subPages.push({
+          ...page,
+          path: `/${root}/${page.path}`,
+        })
+      })
+  })
+  const result = [...mainPages, ...subPages]
+  // console.log(`getAllPages by ${key} result: `, result)
+  return result
+}
+
+export function getCurrentPageI18nKey() {
+  const routeObj = currRoute()
+
+  let currPage = (pages as PageMetaDatum[]).find(page => `/${page.path}` === routeObj.path)
+  if (!currPage) {
+    // 在主包中找不到对应的页面，则在分包中找
+    const allSubPages: PageMetaDatum[] = []
+    subPackages?.forEach((config) => {
+      config.pages?.forEach((cur) => {
+        allSubPages.push({
+          ...cur,
+          path: `/${config.root}/${cur.path}`,
+        })
+      })
+    })
+    currPage = allSubPages.find(page => page.path === routeObj.path)
+    if (!currPage) {
+      console.warn('路由不正确')
+      return ''
+    }
+  }
+  console.log(currPage)
+  console.log(currPage.style.navigationBarTitleText)
+  return currPage.style?.navigationBarTitleText || ''
+}
+
+export function isCurrentPageTabbar() {
+  const { path } = currRoute()
+  return isPageTabbar(path)
+}
+
+/**
+ * 根据微信小程序当前环境，判断应该获取的 baseUrl
+ */
+export function getEnvBaseUrl() {
+  // 请求基准地址
+  let baseUrl = import.meta.env.VITE_SERVER_BASEURL
+
+  // # 有些同学可能需要在微信小程序里面根据 develop、trial、release 分别设置上传地址，参考代码如下。
+  const VITE_SERVER_BASEURL__WEIXIN_DEVELOP = 'https://ukw0y1.laf.run'
+  const VITE_SERVER_BASEURL__WEIXIN_TRIAL = 'https://ukw0y1.laf.run'
+  const VITE_SERVER_BASEURL__WEIXIN_RELEASE = 'https://ukw0y1.laf.run'
+
+  // 微信小程序端环境区分
+  if (isMpWeixin) {
+    const {
+      miniProgram: { envVersion },
+    } = uni.getAccountInfoSync()
+
+    switch (envVersion) {
+      case 'develop':
+        baseUrl = VITE_SERVER_BASEURL__WEIXIN_DEVELOP || baseUrl
+        break
+      case 'trial':
+        baseUrl = VITE_SERVER_BASEURL__WEIXIN_TRIAL || baseUrl
+        break
+      case 'release':
+        baseUrl = VITE_SERVER_BASEURL__WEIXIN_RELEASE || baseUrl
+        break
+    }
+  }
+
+  return baseUrl
+}
+
+/**
+ * 是否是双token模式
+ */
+export const isDoubleTokenMode = import.meta.env.VITE_AUTH_MODE === 'double'
+
+/**
+ * 首页路径，通过 page.json 里面的 type 为 home 的页面获取，如果没有，则默认是第一个页面
+ * 通常为 /pages/index/index
+ */
+export const HOME_PAGE = `/${(pages as PageMetaDatum[]).find(page => page.type === 'home')?.path || (pages as PageMetaDatum[])[0].path}`

package/features/i18n/hooks.ts

@@ -0,0 +1,9 @@
+import type { FeatureContext } from '../../packages/cli/src/features/interface'
+
+export async function preApply(ctx: FeatureContext) {
+  console.log(`[i18n] Pre-apply for ${ctx.projectPath}`)
+}
+
+export async function postApply(ctx: FeatureContext) {
+  console.log(`[i18n] Post-apply for ${ctx.projectPath}`)
+}

package/features/i18n/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@unibest/feature-i18n",
+  "version": "1.0.0",
+  "description": "unibest i18n feature",
+  "dependencies": {
+    "dayjs": "^1.11.0",
+    "vue-i18n": "^9.0.0"
+  }
+}

package/features/i18n/schema.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "locales": {
+      "type": "array",
+      "items": { "type": "string" },
+      "default": ["zh-Hans", "en"],
+      "description": "支持的语言列表"
+    }
+  },
+  "required": []
+}

package/features/login/files/src/pages/auth/README.md

@@ -0,0 +1,20 @@
+# 登录页
+需要输入账号、密码/验证码的登录页。
+
+## 适用性
+
+本页面主要用于 `h5` 和 `APP`。
+
+小程序通常有平台的登录方式 `uni.login` 通常用不到登录页，所以不适用于 `小程序`。（即默认情况下，小程序环境是不会走登录拦截逻辑的。）
+
+但是如果您的小程序也需要现实的 `登录页` 那也是可以使用的。
+
+在 `src/router/config.ts` 中有一个变量 `LOGIN_PAGE_ENABLE_IN_MP` 来控制是否在小程序中使用 `H5的登录页`。
+
+更多信息请看 `src/router` 文件夹的内容。
+
+## 登录跳转
+
+目前登录的跳转逻辑主要在 `src/router/interceptor.ts` 和 `src/pages/login/login.vue` 里面，默认会在登录后自动重定向到来源/配置的页面。
+
+如果与您的业务不符，您可以自行修改。

package/features/login/files/src/pages/auth/login.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { useTokenStore } from '@/store/token'
+
+definePage({
+  style: {
+    navigationBarTitleText: '登录',
+  },
+})
+
+const tokenStore = useTokenStore()
+async function doLogin() {
+  if (tokenStore.hasLogin) {
+    uni.navigateBack()
+    return
+  }
+  try {
+    // 调用登录接口
+    await tokenStore.login({
+      username: '菲鸽',
+      password: '123456',
+    })
+    uni.navigateBack()
+  }
+  catch (error) {
+    console.log('登录失败', error)
+  }
+}
+</script>
+
+<template>
+  <view class="login">
+    <!-- 本页面是非MP的登录页，主要用于 h5 和 APP -->
+    <view class="text-center">
+      登录页
+    </view>
+    <button class="mt-4 w-40 text-center" @click="doLogin">
+      点击模拟登录
+    </button>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

package/features/login/files/src/pages/auth/register.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { LOGIN_PAGE } from '@/router/config'
+
+definePage({
+  style: {
+    navigationBarTitleText: '注册',
+  },
+})
+
+function doRegister() {
+  uni.showToast({
+    title: '注册成功',
+  })
+  // 注册成功后跳转到登录页
+  uni.navigateTo({
+    url: LOGIN_PAGE,
+  })
+}
+</script>
+
+<template>
+  <view class="login">
+    <view class="text-center">
+      注册页
+    </view>
+    <button class="mt-4 w-40 text-center" @click="doRegister">
+      点击模拟注册
+    </button>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>