create-unibest 4.0.2 → 4.0.3

package/dist/index.js

@@ -6,7 +6,7 @@ import { green as green6, yellow as yellow5 } from "kolorist";
 import minimist from "minimist";
 
 // package.json
-var version = "4.0.2";
+var version = "4.0.3";
 var package_default = {
   name: "create-unibest",
   type: "module",
@@ -97,7 +97,7 @@ import path from "path";
 import { fileURLToPath } from "url";
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
-var FEATURES_DIR = path.resolve(__dirname, "../../features");
+var FEATURES_DIR = path.resolve(__dirname, "..", "..", "features");
 async function loadFeatureHooks(featureName) {
   const hooksPath = path.join(FEATURES_DIR, featureName, "hooks.ts");
   if (!fs.existsSync(hooksPath)) {
@@ -121,7 +121,7 @@ import { dirname } from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 var __filename2 = fileURLToPath2(import.meta.url);
 var __dirname2 = dirname(__filename2);
-var FEATURES_PATH = path2.join(__dirname2, "..", "..", "features");
+var FEATURES_PATH = path2.join(__dirname2, "..", "..", "..", "features");
 var FeatureInjector = class {
   constructor(projectPath) {
     this.projectPath = projectPath;

package/features/i18n/files/src/locale/README.md

@@ -0,0 +1,12 @@
+# 注意事项
+
+> 文件夹名字必须为 `locale`, 这是 `uniapp` 官方约定的，如果改为别的，标题将不能正常切换多语言（其他内容还是正常）。
+>
+> `xxx.json` 的 `xxx` 多语言标识必须与 `uniapp` 官方约定的一致，否则也会出现 BUG。
+>
+> 查看截图 `screenshots/i18n.png`。
+
+## 参考文档
+
+[uniapp 国际化开发指南](https://uniapp.dcloud.net.cn/tutorial/i18n.html)
+[uniapp 国际化-注意事项](https://uniapp.dcloud.net.cn/api/ui/locale.html#onlocalechange) 最下面的注意事项

package/features/i18n/files/src/locale/en.json

@@ -0,0 +1,10 @@
+{
+  "tabbar.home": "Home",
+  "tabbar.about": "About",
+  "tabbar.me": "Me",
+  "i18n.title": "En Title",
+  "alova.title": "Alova Request",
+  "weight": "{heavy}KG",
+  "detail": "{0}cm, {1}KG",
+  "introduction": "I am {name},height:{detail.height},weight:{detail.weight}"
+}

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

@@ -0,0 +1,81 @@
+import { createI18n } from 'vue-i18n'
+
+import en from './en.json'
+import zhHans from './zh-Hans.json' // 简体中文
+
+const messages = {
+  en,
+  'zh-Hans': zhHans, // key 不能乱写，查看uniapp官网
+}
+
+const i18n = createI18n({
+  locale: uni.getLocale(), // 获取已设置的语言，fallback 语言需要再 manifest.config.ts 中设置
+  messages,
+  allowComposition: true,
+})
+
+console.log(uni.getLocale())
+console.log(i18n.global.locale)
+
+/**
+ * 可以拿到原始的语言模板，非 vue 文件使用这个方法，
+ * @param { string } key 多语言的key，eg: "app.name"
+ * @returns {string} 返回原始的多语言模板，eg: "{heavy}KG"
+ */
+export function getTemplateByKey(key: string) {
+  if (!key) {
+    console.error(`[i18n] Function getTemplateByKey(), key param is required`)
+    return ''
+  }
+  const locale = uni.getLocale()
+  console.log('locale:', locale)
+
+  const message = messages[locale] // 拿到某个多语言的所有模板（是一个对象)
+  if (Object.keys(message).includes(key)) {
+    return message[key]
+  }
+
+  try {
+    const keyList = key.split('.')
+    return keyList.reduce((pre, cur) => {
+      return pre[cur]
+    }, message)
+  }
+  catch (error) {
+    console.error(`[i18n] Function getTemplateByKey(), key param ${key} is not existed.`)
+    return ''
+  }
+}
+
+/**
+ * formatI18n('我是{name},身高{detail.height},体重{detail.weight}',{name:'张三',detail:{height:178,weight:'75kg'}})
+ * 暂不支持数组
+ * @param template 多语言模板字符串，eg: `我是{name}`
+ * @param {object | undefined} data 需要传递的数据对象，里面的key与多语言字符串对应，eg: `{name:'菲鸽'}`
+ * @returns
+ */
+function formatI18n(template: string, data?: any) {
+  return template.replace(/\{([^}]+)\}/g, (match, key: string) => {
+    // console.log( match, key) // => { detail.height }  detail.height
+    const arr = key.trim().split('.')
+    let result = data
+    while (arr.length) {
+      const first = arr.shift()
+      result = result[first]
+    }
+    return result
+  })
+}
+
+/**
+ * t('introduction',{name:'张三',detail:{height:178,weight:'75kg'}})
+ * => formatI18n('我是{name},身高{detail.height},体重{detail.weight}',{name:'张三',detail:{height:178,weight:'75kg'}})
+ * 没有key的，可以不传 data；暂不支持数组
+ * @param template 多语言模板字符串，eg: `我是{name}`
+ * @param {object | undefined} data 需要传递的数据对象，里面的key与多语言字符串对应，eg: `{name:'菲鸽'}`
+ * @returns
+ */
+export function t(key, data?) {
+  return formatI18n(getTemplateByKey(key), data)
+}
+export default i18n

package/features/i18n/files/src/locale/zh-Hans.json

@@ -0,0 +1,10 @@
+{
+  "tabbar.home": "首页",
+  "tabbar.about": "关于",
+  "tabbar.me": "我的",
+  "i18n.title": "中文标题",
+  "alova.title": "Alova 请求",
+  "weight": "{heavy}公斤",
+  "detail": "{0}cm, {1}公斤",
+  "introduction": "我是 {name},身高:{detail.height},体重:{detail.weight}"
+}

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

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import i18n, { t } from '@/locale/index'
+import { setTabbarItem } from '@/tabbar/i18n'
+import { testI18n } from '@/utils/i18n'
+
+definePage({
+  style: {
+    navigationBarTitleText: '%i18n.title%',
+  },
+})
+
+const current = ref(uni.getLocale())
+const user = { name: '张三', detail: { height: 178, weight: '75kg' } }
+const languages = [
+  {
+    value: 'zh-Hans',
+    name: '中文',
+    checked: 'true',
+  },
+  {
+    value: 'en',
+    name: '英文',
+  },
+]
+
+function radioChange(evt) {
+  // console.log(evt)
+  current.value = evt.detail.value
+  // 下面2句缺一不可！！！
+  uni.setLocale(evt.detail.value)
+  i18n.global.locale = evt.detail.value
+
+  // 底部tabbar需要重新设置一下
+  setTabbarItem()
+  // 本页的标题也需要重新设置一下
+  uni.setNavigationBarTitle({
+    title: t('i18n.title'),
+  })
+}
+</script>
+
+<template>
+  <view class="mt-6 center flex-col">
+    <view class="p-4 text-red-500 leading-6">
+      经过我的测试发现，小程序里面会有2处BUG：
+      <view>
+        <text class="line-through"> 1. 页面标题多语言不生效 </text>
+        <text class="ml-2 text-green-500"> 已解决 </text>
+      </view>
+      <view>
+        <text class="line-through">
+          2. 多语言传递的参数不生效，如下 heavy
+        </text>
+        <text class="ml-2 text-green-500"> 已解决 </text>
+        <view class="ml-2 text-green-500">
+          把 $t 改为自定义的 t 即可
+        </view>
+      </view>
+    </view>
+    <view class="text-green-500">
+      多语言测试
+    </view>
+    <view class="m-4">
+      {{ $t("i18n.title") }}
+    </view>
+    <view class="text-gray-500 italic">
+      使用$t: {{ $t("weight", { heavy: 100 }) }}
+    </view>
+    <view class="m-4">
+      {{ $t("weight", { heavy: 100 }) }}
+    </view>
+    <view class="text-gray-500 italic">
+      使用t: {{ t("weight", { heavy: 100 }) }}
+    </view>
+    <view class="m-4">
+      {{ t("weight", { heavy: 100 }) }}
+    </view>
+    <view class="m-4">
+      {{ t("introduction", user) }}
+    </view>
+
+    <view class="mt-12 text-green-500">
+      切换语言
+    </view>
+    <view class="uni-list">
+      <radio-group class="radio-group" @change="radioChange">
+        <label
+          v-for="item in languages"
+          :key="item.value"
+          class="uni-list-cell uni-list-cell-pd"
+        >
+          <view>
+            <radio :value="item.value" :checked="item.value === current" />
+          </view>
+          <view>{{ item.name }}</view>
+        </label>
+      </radio-group>
+    </view>
+
+    <!-- http://localhost:9000/#/pages/index/i18n -->
+    <button class="mb-44 mt-20" @click="testI18n">
+      测试弹窗
+    </button>
+  </view>
+</template>
+
+<style lang="scss">
+.uni-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 12px;
+}
+
+.radio-group {
+  width: 200px;
+  margin: 10px auto;
+  border-radius: 12px;
+}
+
+.uni-list-cell {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #bcecd1;
+}
+</style>

package/features/i18n/files/src/store/token.ts

@@ -0,0 +1,323 @@
+import type {
+  ILoginForm,
+} from '@/api/login'
+import type { IAuthLoginRes } from '@/api/types/login'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue' // 修复：导入 computed
+import {
+  login as _login,
+  logout as _logout,
+  refreshToken as _refreshToken,
+  wxLogin as _wxLogin,
+  getWxCode,
+} from '@/api/login'
+import { isDoubleTokenRes, isSingleTokenRes } from '@/api/types/login'
+import { useUserStore } from './user'
+
+/**
+ * 是否是双token模式
+ */
+export const isDoubleTokenMode = import.meta.env.VITE_AUTH_MODE === 'double'
+// 初始化状态
+const tokenInfoState = isDoubleTokenMode
+  ? {
+      accessToken: '',
+      accessExpiresIn: 0,
+      refreshToken: '',
+      refreshExpiresIn: 0,
+    }
+  : {
+      token: '',
+      expiresIn: 0,
+    }
+
+export const useTokenStore = defineStore(
+  'token',
+  () => {
+    // 定义用户信息
+    const tokenInfo = ref<IAuthLoginRes>({ ...tokenInfoState })
+
+    // 添加一个时间戳 ref 作为响应式依赖
+    const nowTime = ref(Date.now())
+    /**
+     * 更新响应式数据:now
+     * 确保isTokenExpired/isRefreshTokenExpired重新计算,而不是用错误过期缓存值
+     * 可useTokenStore内部适时调用;也可链式调用:tokenStore.updateNowTime().hasLogin
+     * @returns 最新的tokenStore实例
+     */
+    const updateNowTime = () => {
+      nowTime.value = Date.now()
+      return useTokenStore()
+    }
+
+    // 设置用户信息
+    const setTokenInfo = (val: IAuthLoginRes) => {
+      updateNowTime()
+      tokenInfo.value = val
+
+      // 计算并存储过期时间
+      const now = Date.now()
+      if (isSingleTokenRes(val)) {
+        // 单token模式
+        const expireTime = now + val.expiresIn * 1000
+        uni.setStorageSync('accessTokenExpireTime', expireTime)
+      }
+      else if (isDoubleTokenRes(val)) {
+        // 双token模式
+        const accessExpireTime = now + val.accessExpiresIn * 1000
+        const refreshExpireTime = now + val.refreshExpiresIn * 1000
+        uni.setStorageSync('accessTokenExpireTime', accessExpireTime)
+        uni.setStorageSync('refreshTokenExpireTime', refreshExpireTime)
+      }
+    }
+
+    /**
+     * 判断token是否过期
+     */
+    const isTokenExpired = computed(() => {
+      if (!tokenInfo.value) {
+        return true
+      }
+
+      const now = nowTime.value
+      const expireTime = uni.getStorageSync('accessTokenExpireTime')
+
+      if (!expireTime)
+        return true
+      return now >= expireTime
+    })
+
+    /**
+     * 判断refreshToken是否过期
+     */
+    const isRefreshTokenExpired = computed(() => {
+      if (!isDoubleTokenMode)
+        return true
+
+      const now = nowTime.value
+      const refreshExpireTime = uni.getStorageSync('refreshTokenExpireTime')
+
+      if (!refreshExpireTime)
+        return true
+      return now >= refreshExpireTime
+    })
+
+    /**
+     * 登录成功后处理逻辑
+     * @param tokenInfo 登录返回的token信息
+     */
+    async function _postLogin(tokenInfo: IAuthLoginRes) {
+      setTokenInfo(tokenInfo)
+      const userStore = useUserStore()
+      await userStore.fetchUserInfo()
+    }
+
+    /**
+     * 用户登录
+     * 有的时候后端会用一个接口返回token和用户信息，有的时候会分开2个接口，一个获取token，一个获取用户信息
+     * （各有利弊，看业务场景和系统复杂度），这里使用2个接口返回的来模拟
+     * @param loginForm 登录参数
+     * @returns 登录结果
+     */
+    const login = async (loginForm: ILoginForm) => {
+      try {
+        const res = await _login(loginForm)
+        console.log('普通登录-res: ', res)
+        await _postLogin(res)
+        uni.showToast({
+          title: '登录成功',
+          icon: 'success',
+        })
+        return res
+      }
+      catch (error) {
+        console.error('登录失败:', error)
+        uni.showToast({
+          title: '登录失败，请重试',
+          icon: 'error',
+        })
+        throw error
+      }
+      finally {
+        updateNowTime()
+      }
+    }
+
+    /**
+     * 微信登录
+     * 有的时候后端会用一个接口返回token和用户信息，有的时候会分开2个接口，一个获取token，一个获取用户信息
+     * （各有利弊，看业务场景和系统复杂度），这里使用2个接口返回的来模拟
+     * @returns 登录结果
+     */
+    const wxLogin = async () => {
+      try {
+        // 获取微信小程序登录的code
+        const code = await getWxCode()
+        console.log('微信登录-code: ', code)
+        const res = await _wxLogin(code)
+        console.log('微信登录-res: ', res)
+        await _postLogin(res)
+        uni.showToast({
+          title: '登录成功',
+          icon: 'success',
+        })
+        return res
+      }
+      catch (error) {
+        console.error('微信登录失败:', error)
+        uni.showToast({
+          title: '微信登录失败，请重试',
+          icon: 'error',
+        })
+        throw error
+      }
+      finally {
+        updateNowTime()
+      }
+    }
+
+    /**
+     * 退出登录 并 删除用户信息
+     */
+    const logout = async () => {
+      try {
+        // TODO 实现自己的退出登录逻辑
+        await _logout()
+      }
+      catch (error) {
+        console.error('退出登录失败:', error)
+      }
+      finally {
+        updateNowTime()
+
+        // 无论成功失败，都需要清除本地token信息
+        // 清除存储的过期时间
+        uni.removeStorageSync('accessTokenExpireTime')
+        uni.removeStorageSync('refreshTokenExpireTime')
+        console.log('退出登录-清除用户信息')
+        tokenInfo.value = { ...tokenInfoState }
+        uni.removeStorageSync('token')
+        const userStore = useUserStore()
+        userStore.clearUserInfo()
+      }
+    }
+
+    /**
+     * 刷新token
+     * @returns 刷新结果
+     */
+    const refreshToken = async () => {
+      if (!isDoubleTokenMode) {
+        console.error('单token模式不支持刷新token')
+        throw new Error('单token模式不支持刷新token')
+      }
+
+      try {
+        // 安全检查，确保refreshToken存在
+        if (!isDoubleTokenRes(tokenInfo.value) || !tokenInfo.value.refreshToken) {
+          throw new Error('无效的refreshToken')
+        }
+
+        const refreshToken = tokenInfo.value.refreshToken
+        const res = await _refreshToken(refreshToken)
+        console.log('刷新token-res: ', res)
+        setTokenInfo(res)
+        return res
+      }
+      catch (error) {
+        console.error('刷新token失败:', error)
+        throw error
+      }
+      finally {
+        updateNowTime()
+      }
+    }
+
+    /**
+     * 获取有效的token
+     * 注意：在computed中不直接调用异步函数，只做状态判断
+     * 实际的刷新操作应由调用方处理
+     * 建议这样使用 tokenStore.updateNowTime().validToken
+     */
+    const getValidToken = computed(() => {
+      // token已过期，返回空
+      if (isTokenExpired.value) {
+        return ''
+      }
+
+      if (!isDoubleTokenMode) {
+        return isSingleTokenRes(tokenInfo.value) ? tokenInfo.value.token : ''
+      }
+      else {
+        return isDoubleTokenRes(tokenInfo.value) ? tokenInfo.value.accessToken : ''
+      }
+    })
+
+    /**
+     * 检查是否有登录信息（不考虑token是否过期）
+     */
+    const hasLoginInfo = computed(() => {
+      if (!tokenInfo.value) {
+        return false
+      }
+      if (isDoubleTokenMode) {
+        return isDoubleTokenRes(tokenInfo.value) && !!tokenInfo.value.accessToken
+      }
+      else {
+        return isSingleTokenRes(tokenInfo.value) && !!tokenInfo.value.token
+      }
+    })
+
+    /**
+     * 检查是否已登录且token有效
+     * 建议这样使用tokenStore.updateNowTime().hasLogin
+     */
+    const hasValidLogin = computed(() => {
+      console.log('hasValidLogin', hasLoginInfo.value, !isTokenExpired.value)
+      return hasLoginInfo.value && !isTokenExpired.value
+    })
+
+    /**
+     * 尝试获取有效的token，如果过期且可刷新，则刷新token
+     * @returns 有效的token或空字符串
+     */
+    const tryGetValidToken = async (): Promise<string> => {
+      updateNowTime()
+      if (!getValidToken.value && isDoubleTokenMode && !isRefreshTokenExpired.value) {
+        try {
+          await refreshToken()
+          return getValidToken.value
+        }
+        catch (error) {
+          console.error('尝试刷新token失败:', error)
+          return ''
+        }
+      }
+      return getValidToken.value
+    }
+
+    return {
+      // 核心API方法
+      login,
+      wxLogin,
+      logout,
+
+      // 认证状态判断（最常用的）
+      hasLogin: hasValidLogin,
+
+      // 内部系统使用的方法
+      refreshToken,
+      tryGetValidToken,
+      validToken: getValidToken,
+
+      // 调试或特殊场景可能需要直接访问的信息
+      tokenInfo,
+      setTokenInfo,
+      updateNowTime,
+    }
+  },
+  {
+    // 添加持久化配置，确保刷新页面后token信息不丢失
+    persist: true,
+  },
+)

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { CustomTabBarItem } from './types'
+import { getI18nText } from './i18n'
+import { tabbarStore } from './store'
+
+defineProps<{
+  item: CustomTabBarItem
+  index: number
+  isBulge?: boolean
+}>()
+
+function getImageByIndex(index: number, item: CustomTabBarItem) {
+  if (!item.iconActive) {
+    console.warn('image 模式下，需要配置 iconActive (高亮时的图片），否则无法切换高亮图片')
+    return item.icon
+  }
+  return tabbarStore.curIdx === index ? item.iconActive : item.icon
+}
+</script>
+
+<template>
+  <view class="flex flex-col items-center justify-center">
+    <template v-if="item.iconType === 'uiLib'">
+      <!-- TODO: 以下内容请根据选择的UI库自行替换 -->
+      <!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
+      <!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
+      <!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
+      <!-- <wd-icon :name="item.icon" size="20" /> -->
+    </template>
+    <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
+      <view :class="[item.icon, isBulge ? 'text-80px' : 'text-20px']" />
+    </template>
+    <template v-if="item.iconType === 'image'">
+      <image :src="getImageByIndex(index, item)" mode="scaleToFill" :class="isBulge ? 'h-80px w-80px' : 'h-24px w-24px'" />
+    </template>
+    <view v-if="!isBulge" class="mt-2px text-12px">
+      {{ getI18nText(item.text) }}
+    </view>
+    <!-- 角标显示 -->
+    <view v-if="item.badge">
+      <template v-if="item.badge === 'dot'">
+        <view class="absolute right-0 top-0 h-2 w-2 rounded-full bg-#f56c6c" />
+      </template>
+      <template v-else>
+        <view class="absolute top-0 box-border h-5 min-w-5 center rounded-full bg-#f56c6c px-1 text-center text-xs text-white -right-3">
+          {{ item.badge > 99 ? '99+' : item.badge }}
+        </view>
+      </template>
+    </view>
+  </view>
+</template>