@zfqh/uniapp 0.1.1 → 0.1.2

package/docs/guide/project-frame.md

@@ -253,15 +253,39 @@ export function getToken() {
 
 ## 样式接入
 
-`@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 插件使用）。
 
 ## 快速入口
 

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/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 */
 

package/lib/styles/index.scss

@@ -1,25 +1,13 @@
 @import '@gmcb/uv-ui/index.scss';
-@import './font.scss';
-@import './spacing.scss';
-@import './opacity.scss';
-@import './sizing.scss';
-@import './layout.scss';
-@import './shadow.scss';
 @import './border.scss';
 @import './bg.scss';
-@import './text.scss';
-@import './animate.scss';
+@import './text.scss';
+@import './layout.scss';
+@import './flex.scss';
 /* #ifndef APP-NVUE */
-@import './reset-vue.scss';
-@import './flex-vue.scss';
-@import './layout-vue.scss';
-@import './sizing-vue.scss';
+@import './reset-vue.scss';
 @import './text-vue.scss';
-@import './bg-vue.scss';
-@import './animate-vue.scss';
 /* #endif */
 /* #ifdef APP-NVUE */
-@import './flex-nvue.scss';
-@import './layout-nvue.scss';
-@import './text-nvue.scss';
+@import './text-nvue.scss';
 /* #endif */

package/lib/styles/layout.scss

@@ -1,76 +1,18 @@
-.overflow-hidden {
-  overflow: hidden;
-}
-.inset-0 {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.inset-x-0 {
-  left: 0;
-  right: 0;
-}
-.inset-y-0 {
-  top: 0;
-  bottom: 0;
-}
-@for $i from 0 through 50 {
-  $s: $i * 2;
-  .top-#{$s}px {
-    top: #{$s}px;
-  }
-  .right-#{$s}px {
-    right: #{$s}px;
-  }
-  .bottom-#{$s}px {
-    bottom: #{$s}px;
-  }
-  .left-#{$s}px {
-    left: #{$s}px;
-  }
-  .top-#{$s}rpx {
-    top: #{$s}rpx;
-  }
-  .right-#{$s}rpx {
-    right: #{$s}rpx;
-  }
-  .bottom-#{$s}rpx {
-    bottom: #{$s}rpx;
-  }
-  .left-#{$s}rpx {
-    left: #{$s}rpx;
-  }
-}
-@for $i from 1 through 50 {
-  $s: $i * 2;
-  .-top-#{$s}px {
-    top: -#{$s}px;
-  }
-  .-right-#{$s}px {
-    right: -#{$s}px;
-  }
-  .-bottom-#{$s}px {
-    bottom: -#{$s}px;
-  }
-  .-left-#{$s}px {
-    left: -#{$s}px;
-  }
-  .-top-#{$s}rpx {
-    top: -#{$s}rpx;
-  }
-  .-right-#{$s}rpx {
-    right: -#{$s}rpx;
-  }
-  .-bottom-#{$s}rpx {
-    bottom: -#{$s}rpx;
-  }
-  .-left-#{$s}rpx {
-    left: -#{$s}rpx;
-  }
-}
-@for $n from 0 through 10 {
-  .z-#{$n} {
-    z-index: $n;
-  }
+/* #ifdef H5 */
+page {
+/* #endif */
+  .relative {
+    position: relative;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .sticky {
+    position: sticky;
+  }
+/* #ifdef H5 */
 }
+/* #endif */

package/lib/styles/reset-vue.scss

@@ -11,7 +11,9 @@ page {
   width: 100%;
   height: 100%;
   font-family: Microsoft YaHei;
-  color: $uv-main-color;
+  color: $uv-main-color;
+  display: flex;
+  flex-direction: column;
 }
 
 view,

package/lib/styles/text-nvue.scss

@@ -9,13 +9,4 @@
     text-overflow: ellipsis;
     lines: $n;
   }
-}
-@for $i from 8 through 11 {
-  $s: $i * 2;
-  .text-#{$i}px {
-    font-size: #{$i}px;
-  }
-  .text-#{$s}rpx {
-    font-size: #{$s}rpx;
-  }
-}
+}