@zfqh/uniapp 0.1.1 → 0.1.3

package/docs/guide/getting-started.md

@@ -34,14 +34,14 @@ export function createApp() {
 }
 ```
 
-`@zfqh/uniapp` 插件安装时会把 `app.config.globalProperties.$store` 赋值给 `uni.$store`。请求、导航、权限、登录等能力会读取 `uni.$store`，所以请先挂载 store，再注册本插件。
+请求、导航、权限、登录等能力会读取 store 状态，所以请先挂载 store，再注册本插件。
 
 Store 使用入口请按上下文区分：
 
 - 组件的 Composition API 或 `<script setup>` 中使用 `import { useStore } from 'vuex'`。
 - 自定义 hooks / composables 中也使用 `useStore()`。
 - Options API 组件中可使用 `this.$store`。
-- 请求、导航、权限、webview 消息等普通 TS 模块中使用 `uni.$store`。
+- 普通 TS 模块中使用 `uni.$store`。
 
 详见 [Store 使用位置](./project-frame.md#store-使用位置)。
 
@@ -124,7 +124,6 @@ import { defineConfig } from '@zfqh/uniapp';
 import { app } from '@zfqh/uniapp/lib/configs/app';
 import { brand } from '@zfqh/uniapp/lib/configs/brand';
 import { getTencentToken } from '@zfqh/uniapp/lib/apis';
-import store from '@/store';
 
 defineConfig({
   app: app.merchant,
@@ -149,7 +148,7 @@ defineConfig({
         create_time: data.createTime,
         expire_time: data.expirationTime,
         bucket: data.bucket,
-        region: store.state.storeConfig.isGlobalAccelerate ? 'accelerate' : data.region,
+        region: uni.$store.state.storeConfig.isGlobalAccelerate ? 'accelerate' : data.region,
       };
     },
   },

package/docs/guide/project-frame.md

@@ -110,7 +110,6 @@ import { defineConfig } from '@zfqh/uniapp';
 import { app } from '@zfqh/uniapp/lib/configs/app';
 import { brand } from '@zfqh/uniapp/lib/configs/brand';
 import { getTencentToken } from '@zfqh/uniapp/lib/apis';
-import store from '@/store';
 
 defineConfig({
   app: app.merchant,
@@ -135,7 +134,7 @@ defineConfig({
         create_time: data.createTime,
         expire_time: data.expirationTime,
         bucket: data.bucket,
-        region: store.state.storeConfig.isGlobalAccelerate ? 'accelerate' : data.region,
+        region: uni.$store.state.storeConfig.isGlobalAccelerate ? 'accelerate' : data.region,
       };
     },
   },
@@ -197,13 +196,13 @@ export default defineConfig({
 
 | 路径 | 用途 |
 | --- | --- |
-| `uni.$store.state.login.info.token` | 请求拦截器注入 `Authorization`。 |
-| `uni.$store.state.login.info.tenantId` | 业务请求注入 `Tenant-Id`。 |
-| `uni.$store.state.system.info.appLanguage` | 业务请求注入 `X-Language`。 |
-| `uni.$store.state.system.info.appVersion` | 非 App 环境下读取版本名。 |
-| `uni.$store.state.system.info.appVersionCode` | 非 App 环境下读取版本号。 |
-| `uni.$store.getters.isLogin` | 导航登录拦截判断。 |
-| `uni.$store.dispatch('logout')` | `401` 时触发退出登录。 |
+| `store.state.login.info.token` | 请求拦截器注入 `Authorization`。 |
+| `store.state.login.info.tenantId` | 业务请求注入 `Tenant-Id`。 |
+| `store.state.system.info.appLanguage` | 业务请求注入 `X-Language`。 |
+| `store.state.system.info.appVersion` | 非 App 环境下读取版本名。 |
+| `store.state.system.info.appVersionCode` | 非 App 环境下读取版本号。 |
+| `store.getters.isLogin` | 导航登录拦截判断。 |
+| `store.dispatch('logout')` | `401` 时触发退出登录。 |
 
 推荐在注册插件前完成：
 
@@ -219,9 +218,9 @@ app.use(uniapp);
 | 场景 | 推荐用法 | 说明 |
 | --- | --- | --- |
 | Vue 组件的 Composition API / `<script setup>` | `import { useStore } from 'vuex'` 后调用 `const store = useStore()` | 组件实例处于 Vue 上下文内，应使用 Vuex 官方组合式 API，便于类型推导、测试和组件复用。 |
-| 自定义 hooks / composables | `import { useStore } from 'vuex'` 后在 hook 内调用 `useStore()` | hooks 同样运行在组件 setup 上下文里，不要直接读取全局 `uni.$store`。 |
+| 自定义 hooks / composables | `import { useStore } from 'vuex'` 后在 hook 内调用 `useStore()` | hooks 同样运行在组件 setup 上下文里。 |
 | Options API 组件 | `this.$store` | 组件实例已注入 `$store` 时可使用实例属性；现有 `g-*` 组件源码也采用这种方式读取部分系统状态。 |
-| 请求、导航、toast、权限、webview 消息等普通 TS 模块 | `uni.$store` | 这些模块不在 Vue setup 上下文中，无法调用 `useStore()`，因此通过插件挂载到 `uni.$store` 的全局 store 读取登录态和全局状态。 |
+| 请求、导航、toast、权限、webview 消息等普通 TS 模块 | `uni.$store` | 这些模块不在 Vue setup 上下文中，无法调用 `useStore()`，因此直接引入 store 实例读取登录态和全局状态。 |
 
 组件或 hooks 中推荐写法：
 
@@ -241,27 +240,41 @@ export function useLoginInfo() {
 }
 ```
 
-普通模块中推荐写法：
-
-```ts
-export function getToken() {
-  return uni.$store?.state?.login?.info?.token;
-}
-```
-
-`uni.$store` 是为了让脱离组件树的工具函数能够访问 store，不建议在组件 setup 或 hooks 中把它作为首选入口。
-
 ## 样式接入
 
-`@zfqh/uniapp` 提供一套 UnoCSS 风格的工具样式类，需要在项目全局样式中导入一次：
+`@zfqh/uniapp` 内置的静态样式仅覆盖平台差异类和使用 `$uv-*` SCSS 变量的语义色类，间距、尺寸、字号、圆角、透明度、阴影等通用原子类由 `@gmcb/vite` 的 unocss 插件在构建时动态生成。
+
+在项目全局样式中导入静态样式，放在 `App.vue` 的 `<style>` 块：
 
 ```scss
-/* App.vue 的 <style> 块 */
 @import '@zfqh/uniapp/lib/styles/index.scss';
 ```
 
 此入口同时引入 `@gmcb/uv-ui/index.scss`，无需再单独导入 uv-ui 基础样式。
 
+### 配置 unocss 插件
+
+在 `vite.config.js` 中注册 unocss 插件，并传入 `blockList` 避免与内置静态类名冲突：
+
+```js
+import { join } from 'path';
+import { defineConfig } from '@gmcb/vite';
+import { unocss } from '@gmcb/vite/lib/plugins';
+import { blockList } from '@gmcb/vite/lib/unocss';
+
+// 解决工程化和非工程化编译兼容问题
+const uni = require(join(process.cwd(), 'node_modules/@dcloudio/vite-plugin-uni')).default;
+
+export default defineConfig({
+  plugins: [
+    uni(),
+    unocss({
+      blockList,
+    }),
+  ],
+});
+```
+
 ### 覆盖 SCSS 主题变量
 
 如果项目通过 `defineConfig({ color })` 覆盖了主题色，建议同步覆盖 SCSS 变量，确保 uv-ui 组件和工具类使用一致的颜色。在 `uni.scss` 中先导入 `@gmcb/uv-ui/theme.scss` 默认变量，再声明同名变量覆盖：

package/docs/index.md

@@ -1,6 +1,6 @@
 # @zfqh/uniapp
 
-`@zfqh/uniapp` 是面向 uni-app Vue 3 项目的公共能力包，包含配置系统、环境配置、请求封装、导航提示、COS 上传、应用更新、hooks、工具函数、Vuex modules、mixins、`g-*` 公共组件和工具样式类。
+`@zfqh/uniapp` 是面向 uni-app Vue 3 项目的公共能力包，包含配置系统、环境配置、请求封装、导航提示、COS 上传、应用更新、hooks、工具函数、Vuex modules、mixins、`g-*` 公共组件和工具样式类（内置平台差异及语义色类，完整原子类需配合 `@gmcb/vite` 的 unocss 插件使用）。
 
 ## 快速入口
 
@@ -74,7 +74,7 @@ export function createApp() {
 
 ## 使用约定
 
-- 项目需要提供符合约定的 Vuex store：请求读取 `uni.$store.state.login.info.token`，导航读取 `uni.$store.getters.isLogin`，`401` 会触发 `uni.$store.dispatch('logout')`。
-- Store 入口按上下文区分：组件和 hooks 的 Composition API 中使用 `import { useStore } from 'vuex'`，Options API 组件中使用 `this.$store`，请求、导航、权限、webview 消息等普通模块中使用 `uni.$store`。
+- 项目需要提供符合约定的 Vuex store：请求读取 `store.state.login.info.token`，导航读取 `store.getters.isLogin`，`401` 会触发 `store.dispatch('logout')`。
+- Store 入口按上下文区分：组件的 Composition API 中使用 `import { useStore } from 'vuex'`，Options API 组件中使用 `this.$store`，普通 TS 模块中使用 `uni.$store`。
 - 多环境配置推荐使用 `@env/.env.<env>.ts`，并通过 `defineEnvConfig` 输出配置。
 - 根入口未导出的 `apis`、`modules`、`mixins` 请按 [深度引用](./api/index.md#深度引用) 从构建产物路径引入。

package/lib/components/g-back-button/g-back-button.vue

@@ -1,10 +1,10 @@
 <template>
   <view class="back-button" :style="[_customStyle]">
-    <view class="flex justify-center" @click="goBack" :class="[showHome ? '' : 'back']">
+    <view class="flex justify-center items-center" @click="goBack" :class="[showHome ? '' : 'back']">
       <g-icon v-if="showIcon" :type="type" :font="iconFont" :name="iconName" :size="iconSize || 18" :color="color" />
       <uv-icon v-else :name="iconName" :size="iconSize || 22" :color="color" />
     </view>
-    <view v-if="showHome" class="flex justify-center" @click="goHome">
+    <view v-if="showHome" class="flex justify-center items-center" @click="goHome">
       <g-icon
         v-if="showIcon"
         :type="type"

package/lib/components/g-checkbox-list/g-checkbox-list.vue

@@ -4,7 +4,7 @@
       <view
         v-for="(item, index) in dataList"
         :key="item.key"
-        class="flex justify-between pr-20rpx"
+        class="flex justify-between items-center pr-20rpx"
         :class="{ 'uv-border-top': border && index > 0 }"
         :style="[style]"
         @tap="select(item)"

package/lib/components/g-float/g-float.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="float" :style="[style]" @tap.stop="click">
     <slot>
-      <g-icon :name="iconName" :font="iconFont" :size="iconSize" :color="iconColor" class="flex" />
+      <g-icon :name="iconName" :font="iconFont" :size="iconSize" :color="iconColor" class="flex items-center" />
     </slot>
   </view>
 </template>

package/lib/components/g-grid-image/g-grid-image.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="grid" :style="[_style]">
     <view v-for="(item, index) in list" :key="index" :style="[_imageStyle]" class="overflow-hidden" @tap.stop="click(item)">
-      <image :src="item.image" style="width: 100%; height: 100%" :mode="mode" class="flex" />
+      <image :src="item.image" style="width: 100%; height: 100%" :mode="mode" class="flex items-center" />
     </view>
   </view>
 </template>

package/lib/components/g-grid-swiper/g-grid-swiper.vue

@@ -4,7 +4,7 @@
       <swiper-item v-for="(list, index) in dataList" :key="index">
         <uv-grid :col="col" :border="false" align="left">
           <uv-grid-item v-for="(ele, i) in list" :key="i" bgColor="transparent" :customStyle="_colStyle">
-            <view class="flex justify-center flex-col" :style="[_itemStyle(ele)]" @tap.stop="click(index, i)">
+            <view class="flex justify-center items-center flex-col" :style="[_itemStyle(ele)]" @tap.stop="click(index, i)">
               <uv-image
                 v-if="ele[iconKey]"
                 :src="ele[iconKey]"

package/lib/components/g-more/g-more.vue

@@ -1,11 +1,11 @@
 <template>
   <view :style="[style]">
-    <view class="flex" @tap.stop="click">
+    <view class="flex items-center" @tap.stop="click">
       <slot name="text">
         <text> {{ text }} </text>
       </slot>
       <slot name="arrow">
-        <g-icon :name="iconName" :size="iconSize" class="flex" />
+        <g-icon :name="iconName" :size="iconSize" class="flex items-center" />
       </slot>
     </view>
   </view>

package/lib/components/g-page-container/g-page-container.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="container" :style="[containerStyle]">
     <view v-if="showHeader" class="header" id="page_header" :style="[_headerStyle]">
-      <view v-if="showNavbar" class="flex justify-center" :style="[_navbarStyle]">
+      <view v-if="showNavbar" class="flex justify-center items-center" :style="[_navbarStyle]">
         <view :style="[_leftStyle]">
           <g-back-button
             v-if="showBack"

package/lib/components/g-popup/g-popup.vue

@@ -20,7 +20,7 @@
     <view :style="[_customStyle]">
       <slot v-if="opts.showHeader" name="header">
         <view
-          class="flex"
+          class="flex items-center"
           :class="[{ 'border-b': opts.headerBorder }, { 'justify-start': opts.titleAlign === 'left', 'justify-end': opts.titleAlign === 'right', 'justify-center': opts.titleAlign === 'center', 'justify-between': opts.titleAlign === 'between', 'justify-around': opts.titleAlign === 'around' }]"
           :style="[_headerStyle]"
         >
@@ -31,7 +31,7 @@
       </slot>
       <slot v-if="opts.showContent" name="content">
         <scroll-view scroll-y :style="[_scrollStyle]">
-          <view class="flex justify-center break-all" :class="[{ 'text-left': opts.align === 'left', 'text-right': opts.align === 'right', 'text-center': opts.align === 'center' }]" :style="[_contentStyle]">
+          <view class="flex justify-center items-center break-all" :class="[{ 'text-left': opts.align === 'left', 'text-right': opts.align === 'right', 'text-center': opts.align === 'center' }]" :style="[_contentStyle]">
             <slot name="default">
               <rich-text :nodes="opts.content" />
             </slot>
@@ -41,7 +41,7 @@
       <slot v-if="opts.showFooter" name="footer">
         <view
           v-if="opts.showConfirm || opts.showCancel"
-          class="flex justify-center footer"
+          class="flex justify-center items-center footer"
           :class="{ 'border-t': opts.footerBorder }"
           :style="[_footerStyle]"
         >

package/lib/components/g-refresh-view/g-refresh-view.vue

@@ -19,7 +19,7 @@
     @refresherabort="refresherabort"
   >
     <slot v-if="mode === 'none' && enabled" name="refresher">
-      <view class="w-full flex flex-col justify-center text-tips" :style="[_loadingStyle]">
+      <view class="w-full flex flex-col justify-center items-center text-tips" :style="[_loadingStyle]">
         <slot v-if="completed" name="completeText" :text="completeText">
           <text> {{ completeText }} </text>
         </slot>

package/lib/components/g-search/g-search.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="search-input flex" @tap="click()" :style="[style]" :class="[shape]">
+  <view class="search-input flex items-center" @tap="click()" :style="[style]" :class="[shape]">
     <slot name="icon">
       <uv-icon name="search" size="20" class="text-tips" />
     </slot>
@@ -14,7 +14,7 @@
       @change="change"
     >
       <swiper-item v-for="(keyword, index) in data" :key="index">
-        <text class="ml-16rpx flex h-full" :style="[_inputStyle, _placeholderStyle]"> {{ keyword }} </text>
+        <text class="ml-16rpx flex h-full items-center" :style="[_inputStyle, _placeholderStyle]"> {{ keyword }} </text>
       </swiper-item>
     </swiper>
     <view v-else class="flex-1 ml-16rpx h-full relative">
@@ -33,12 +33,12 @@
         @input="input()"
       />
       <view v-if="clearable" class="search-input-clear" @tap.stop="clear" :style="[closeStyle]">
-        <uv-icon v-if="keyword" name="close-circle-fill" class="flex text-tips" :size="clearSize" />
+        <uv-icon v-if="keyword" name="close-circle-fill" class="flex text-tips items-center" :size="clearSize" />
       </view>
     </view>
     <view v-if="showButton" @tap.stop="search()">
       <slot name="button">
-        <view class="flex" :style="[buttonStyle]">
+        <view class="flex items-center" :style="[buttonStyle]">
           <uv-line direction="col" :color="lineColor" length="26" margin="0 16rpx" />
           <text class="text-26rpx"> 搜索 </text>
         </view>

package/lib/components/g-share-photo/g-share-photo.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="flex justify-center flex-col" :style="[customStyle]" @tap.stop="$uv.throttle(click)">
+  <view class="flex justify-center items-center flex-col" :style="[customStyle]" @tap.stop="$uv.throttle(click)">
     <image :src="url" :style="[style]" mode="heightFix" />
     <text v-if="text" :style="[textStyle]"> {{ text }} </text>
   </view>

package/lib/components/g-share-view/g-share-view.vue

@@ -1,9 +1,9 @@
 <template>
-  <view class="flex flex-col pt-20rpx pl-20rpx pr-20rpx" :style="[customStyle]">
+  <view class="flex flex-col items-center pt-20rpx pl-20rpx pr-20rpx" :style="[customStyle]">
     <view v-if="title" class="w-full pl-20rpx">
       <text class="font-bold" :style="[titleStyle]"> {{ title }} </text>
     </view>
-    <view class="w-full flex flex-wrap">
+    <view class="w-full flex flex-wrap items-center">
       <template v-for="item in buttons" :key="item.type">
         <g-share-weixin
           v-if="hasWeixin && item.type === 'weixin'"

package/lib/components/g-share-weixin/g-share-weixin.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="flex justify-center flex-col" :style="[customStyle]" @tap.stop="$uv.throttle(click)">
+  <view class="flex justify-center items-center flex-col" :style="[customStyle]" @tap.stop="$uv.throttle(click)">
     <image :src="url" :style="[style]" mode="heightFix" />
     <text v-if="text" :style="[textStyle]"> {{ text }} </text>
   </view>

package/lib/components/g-tag-editor/g-tag-editor.vue

@@ -11,7 +11,7 @@
         :customStyle="_tagStyle"
         @close="removeTag(i)"
       />
-      <view v-if="!disabled" class="flex-1 flex" style="min-width: 160rpx">
+      <view v-if="!disabled" class="flex-1 flex items-center" style="min-width: 160rpx">
         <input
           v-model.trim="content"
           class="box-border flex-1"
@@ -51,7 +51,7 @@
     <view v-for="(item, index) in list" :key="index" class="tag-editor-labels">
       <view v-if="item.title" :style="[titleStyle]"> {{ item.title }} </view>
       <view v-if="item.list" class="flex items-start">
-        <view class="flex-1 flex flex-wrap">
+        <view class="flex-1 flex flex-wrap items-center">
           <uv-tags
             v-for="ele in item.list"
             :key="ele.label"

package/lib/components/g-trtc-room/g-trtc-room.vue

@@ -14,7 +14,7 @@
       </view>
       <view :style="[titleStyle]">
         <slot v-if="!start || !enableCamera" name="title">
-          <view class="flex flex-col justify-center">
+          <view class="flex flex-col justify-center items-center">
             <uv-avatar :src="avatar" size="120rpx" mode="aspectFill" class="u-flex" />
             <text v-if="title" class="text-28rpx mt-12rpx"> {{ title }} </text>
             <text v-if="description" :class="[title ? 'mt-6rpx' : 'mt-12rpx']" class="text-24rpx">

package/lib/hooks/useI18n.js

@@ -1,16 +1,10 @@
-// #ifdef APP-NVUE
-import { ref, inject } from 'vue';
-import { showLocale, defaultLocale } from '../utils/locale';
-// #endif
 // #ifndef APP-NVUE
 import { useI18n as vueUseI18n } from 'vue-i18n';
 // #endif
 let _useI18n;
 // #ifdef APP-NVUE
 _useI18n = function () {
-    const locale = ref(defaultLocale);
-    const t = inject('t', showLocale);
-    return { t, locale };
+    return uni.$i18n.global;
 };
 // #endif
 // #ifndef APP-NVUE

package/lib/index.d.ts

@@ -5,6 +5,7 @@ import cos from './utils/cos';
 import './utils/uni';
 export * from './hooks';
 export * from './utils';
+export * from './utils/locale';
 export * from './utils/file';
 export * from './utils/storage';
 export * from './utils/pages';

package/lib/index.js

@@ -6,6 +6,7 @@ import cos from './utils/cos';
 import './utils/uni';
 export * from './hooks';
 export * from './utils';
+export * from './utils/locale';
 export * from './utils/file';
 export * from './utils/storage';
 export * from './utils/pages';
@@ -25,8 +26,6 @@ const install = (app) => {
     // #ifdef MP
     app.mixin(deep);
     // #endif
-    const { $store } = app.config.globalProperties;
-    uni.$store = $store;
 };
 export default {
     install,

package/lib/styles/bg.scss

@@ -1,12 +1,3 @@
-.bg-transparent {
-  background-color: transparent;
-}
-.bg-white {
-  background-color: #ffffff;
-}
-.bg-black {
-  background-color: #000000;
-}
 .bg-primary {
   background-color: $uv-primary;
 }
@@ -67,24 +58,12 @@
 .bg-info-disabled {
   background-color: $uv-info-disabled;
 }
-.bg-main {
-  background-color: $uv-main-color;
-}
-.bg-content {
-  background-color: $uv-content-color;
-}
-.bg-tips {
-  background-color: $uv-tips-color;
-}
-.bg-light {
-  background-color: $uv-light-color;
-}
 .bg-border {
   background-color: $uv-border-color;
 }
 .bg {
   background-color: $uv-bg-color;
-}
+}
 .bg-light {
   background-color: $uv-bg-light-color;
 }

package/lib/styles/border.scss

@@ -8,79 +8,6 @@
   border-style: solid;
   border-color: $uv-border-color;
 }
-.border-0 {
-  border-width: 0;
-}
-.border-t-0 {
-  border-top-width: 0;
-}
-.border-r-0 {
-  border-right-width: 0;
-}
-.border-b-0 {
-  border-bottom-width: 0;
-}
-.border-l-0 {
-  border-left-width: 0;
-}
-@for $i from 1 through 4 {
-  $s: $i * 2;
-  .border-width-#{$s}px {
-    border-width: #{$s}px;
-  }
-  .border-width-#{$s}rpx {
-    border-width: #{$s}rpx;
-  }
-  .border-t-width-#{$s}px {
-    border-top-width: #{$s}px;
-  }
-  .border-t-width-#{$s}rpx {
-    border-top-width: #{$s}rpx;
-  }
-  .border-r-width-#{$s}px {
-    border-right-width: #{$s}px;
-  }
-  .border-r-width-#{$s}rpx {
-    border-right-width: #{$s}rpx;
-  }
-  .border-b-width-#{$s}px {
-    border-bottom-width: #{$s}px;
-  }
-  .border-b-width-#{$s}rpx {
-    border-bottom-width: #{$s}rpx;
-  }
-  .border-l-width-#{$s}px {
-    border-left-width: #{$s}px;
-  }
-  .border-l-width-#{$s}rpx {
-    border-left-width: #{$s}rpx;
-  }
-  .border-x-width-#{$s}px {
-    border-left-width: #{$s}px;
-    border-right-width: #{$s}px;
-  }
-  .border-x-width-#{$s}rpx {
-    border-left-width: #{$s}rpx;
-    border-right-width: #{$s}rpx;
-  }
-  .border-y-width-#{$s}px {
-    border-top-width: #{$s}px;
-    border-bottom-width: #{$s}px;
-  }
-  .border-y-width-#{$s}rpx {
-    border-top-width: #{$s}rpx;
-    border-bottom-width: #{$s}rpx;
-  }
-}
-.border-solid {
-  border-style: solid;
-}
-.border-dashed {
-  border-style: dashed;
-}
-.border-dotted {
-  border-style: dotted;
-}
 .border-t {
   border-top-width: 1px;
   border-top-style: solid;
@@ -131,88 +58,4 @@
 }
 .border-info {
   border-color: $uv-info;
-}
-.border-main {
-  border-color: $uv-main-color;
-}
-.border-light {
-  border-color: $uv-light-color;
-}
-.border-content {
-  border-color: $uv-content-color;
-}
-.border-transparent {
-  border-color: transparent;
-}
-.rounded-0 {
-  border-radius: 0;
-}
-.rounded-full {
-  border-radius: 9999px;
-}
-
-@for $i from 1 through 50 {
-  $s: $i * 2;
-  .rounded-#{$s}px {
-    border-radius: #{$s}px;
-  }
-  .rounded-t-#{$s}px {
-    border-top-left-radius: #{$s}px;
-    border-top-right-radius: #{$s}px;
-  }
-  .rounded-b-#{$s}px {
-    border-bottom-left-radius: #{$s}px;
-    border-bottom-right-radius: #{$s}px;
-  }
-  .rounded-l-#{$s}px {
-    border-top-left-radius: #{$s}px;
-    border-bottom-left-radius: #{$s}px;
-  }
-  .rounded-r-#{$s}px {
-    border-top-right-radius: #{$s}px;
-    border-bottom-right-radius: #{$s}px;
-  }
-  .rounded-tl-#{$s}px {
-    border-top-left-radius: #{$s}px;
-  }
-  .rounded-tr-#{$s}px {
-    border-top-right-radius: #{$s}px;
-  }
-  .rounded-bl-#{$s}px {
-    border-bottom-left-radius: #{$s}px;
-  }
-  .rounded-br-#{$s}px {
-    border-bottom-right-radius: #{$s}px;
-  }
-  .rounded-#{$s}rpx {
-    border-radius: #{$s}rpx;
-  }
-  .rounded-t-#{$s}rpx {
-    border-top-left-radius: #{$s}rpx;
-    border-top-right-radius: #{$s}rpx;
-  }
-  .rounded-b-#{$s}rpx {
-    border-bottom-left-radius: #{$s}rpx;
-    border-bottom-right-radius: #{$s}rpx;
-  }
-  .rounded-l-#{$s}rpx {
-    border-top-left-radius: #{$s}rpx;
-    border-bottom-left-radius: #{$s}rpx;
-  }
-  .rounded-r-#{$s}rpx {
-    border-top-right-radius: #{$s}rpx;
-    border-bottom-right-radius: #{$s}rpx;
-  }
-  .rounded-tl-#{$s}rpx {
-    border-top-left-radius: #{$s}rpx;
-  }
-  .rounded-tr-#{$s}rpx {
-    border-top-right-radius: #{$s}rpx;
-  }
-  .rounded-bl-#{$s}rpx {
-    border-bottom-left-radius: #{$s}rpx;
-  }
-  .rounded-br-#{$s}rpx {
-    border-bottom-right-radius: #{$s}rpx;
-  }
-}
+}

package/lib/styles/{flex-vue.scss → flex.scss}

@@ -1,16 +1,17 @@
-page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .flex {
-    display: flex;
+/* #ifdef H5 */
+page {
+/* #endif */
+  .flex {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
     flex-direction: row;
-    align-items: center;
   }
-  .flex-inline {
-    display: inline-flex;
+  .flex-inline {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
     flex-direction: row;
-    align-items: center;
   }
   .flex-row {
     flex-direction: row;
@@ -33,7 +34,7 @@ page {
   .flex-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
-  @for $n from 0 through 5 {
+  @for $n from 0 through 8 {
     .flex-#{$n} {
       flex: $n;
     }
@@ -71,5 +72,7 @@ page {
   .justify-around {
     justify-content: space-around;
   }
-}
+/* #ifdef H5 */
+}
+/* #endif */