@atooyu/uxto-ui 1.0.6 → 1.0.7

package/dist/style.css

@@ -2415,20 +2415,22 @@ to {
 .u-read-more__toggle-icon[data-v-e27ed42c] {
   font-size: 12px;
 }
-.u-tabbar[data-v-cdd03f9f] {
+.u-tabbar[data-v-9b683b39] {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 999;
   width: 100%;
+  pointer-events: none;
 }
-.u-tabbar__nav-wrap[data-v-cdd03f9f] {
+.u-tabbar__nav-wrap[data-v-9b683b39] {
+  pointer-events: auto;
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: calc(10px + env(safe-area-inset-bottom));
-  /* 鴻蒙兼容 */
+  /* 鸿蒙兼容 */
   bottom: calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
   z-index: 5;
   height: 56px;
@@ -2441,7 +2443,7 @@ to {
   padding: 0 8px;
   box-sizing: border-box;
 }
-.u-tabbar__tab-btn[data-v-cdd03f9f] {
+.u-tabbar__tab-btn[data-v-9b683b39] {
   flex: 1;
   height: 40px;
   border-radius: 20px;
@@ -2456,36 +2458,23 @@ to {
   overflow: hidden;
   min-width: 0;
 }
-.u-tabbar__tab-btn--active[data-v-cdd03f9f] {
+.u-tabbar__tab-btn--active[data-v-9b683b39] {
   background: #ffffff;
-  color: #0c958e;
   box-shadow: inset 0 0 0 1px rgba(17, 135, 128, 0.14);
 }
-.u-tabbar__tab-icon[data-v-cdd03f9f] {
-  font-size: 16px;
-  font-weight: 700;
-  color: rgba(255, 255, 255, 0.9);
-  flex-shrink: 0;
-}
-.u-tabbar__tab-btn--active .u-tabbar__tab-icon[data-v-cdd03f9f] {
-  color: #0c958e;
-}
-.u-tabbar__tab-text[data-v-cdd03f9f] {
+.u-tabbar__tab-text[data-v-9b683b39] {
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.u-tabbar__tab-btn--active .u-tabbar__tab-text[data-v-cdd03f9f] {
-  color: #0c958e;
-}
-.u-tabbar__center[data-v-cdd03f9f] {
+.u-tabbar__center[data-v-9b683b39] {
   position: relative;
   width: 72px;
   height: 56px;
   flex-shrink: 0;
 }
-.u-tabbar__center-btn[data-v-cdd03f9f] {
+.u-tabbar__center-btn[data-v-9b683b39] {
   position: absolute;
   left: 50%;
   top: -22px;
@@ -2493,36 +2482,33 @@ to {
   width: 72px;
   height: 72px;
   border-radius: 50%;
-  border: 2px solid #dff7f4;
-  background: linear-gradient(180deg, #65d8d1 0%, #21b5ae 100%);
-  color: #fff;
+  border: 3px solid #9fe4dd;
+  background: #ffffff;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1px;
-  box-shadow: 0 8px 20px rgba(8, 112, 106, 0.3);
+  gap: 2px;
+  box-shadow: 0 8px 20px rgba(8, 112, 106, 0.25);
   transition: all 200ms ease;
 }
-.u-tabbar__center-btn[data-v-cdd03f9f]:active {
+.u-tabbar__center-btn[data-v-9b683b39]:active {
   transform: translateX(-50%) scale(0.95);
 }
-.u-tabbar__center-btn--active[data-v-cdd03f9f] {
-  background: #ffffff;
+.u-tabbar__center-btn--active[data-v-9b683b39] {
   border-color: #12b6af;
+  box-shadow: 0 8px 24px rgba(8, 112, 106, 0.35);
 }
-.u-tabbar__center-btn--active .u-tabbar__center-brand[data-v-cdd03f9f],
-.u-tabbar__center-btn--active .u-tabbar__center-text[data-v-cdd03f9f] {
-  color: #12b6af;
-}
-.u-tabbar__center-brand[data-v-cdd03f9f] {
+.u-tabbar__center-brand[data-v-9b683b39] {
   font-size: 22px;
   line-height: 1;
   font-weight: 700;
-  color: #fff;
+  color: #12b6af;
+  letter-spacing: 1px;
 }
-.u-tabbar__center-text[data-v-cdd03f9f] {
+.u-tabbar__center-text[data-v-9b683b39] {
   font-size: 12px;
   letter-spacing: 0.5px;
-  color: #fff;
+  color: #12b6af;
+  font-weight: 500;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atooyu/uxto-ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "跨平台 UI 组件库 - 支持 Android、iOS、鸿蒙",
   "keywords": [
     "uxto-ui",

package/src/components/u-icon/icons/account-fill.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
+</svg>

package/src/components/u-icon/icons/home-fill.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M12 3L4 9v12h6v-6h4v6h6V9l-8-6z"/>
+</svg>

package/src/components/u-icon/icons/home.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+</svg>

package/src/components/u-icon/icons/user-fill.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
+</svg>

package/src/components/u-icon/index.ts

@@ -71,6 +71,10 @@ import upload from './icons/upload.svg'
 import user from './icons/user.svg'
 import account from './icons/account.svg'
 import group from './icons/group.svg'
+import home from './icons/home.svg'
+import homeFill from './icons/home-fill.svg'
+import accountFill from './icons/account-fill.svg'
+import userFill from './icons/user-fill.svg'
 import warning from './icons/warning.svg'
 import warningO from './icons/warning-o.svg'
 import zoomIn from './icons/zoom-in.svg'
@@ -145,11 +149,17 @@ export const icons: Record<string, string> = {
 
   // 用户类
   'user': user,
+  'user-fill': userFill,
   'account': account,
+  'account-fill': accountFill,
   'group': group,
   'smile': smile,
   'smile-o': smileO,
 
+  // 导航类 - 新增首页图标
+  'home': home,
+  'home-fill': homeFill,
+
   // 安全类
   'lock': lock,
   'unlock': unlock,

package/src/components/u-tabbar/u-tabbar.vue

@@ -8,8 +8,18 @@
         :class="{ 'u-tabbar__tab-btn--active': modelValue === leftTab.value }"
         @click="switchTab(leftTab.value)"
       >
-        <text class="u-tabbar__tab-icon">{{ leftTab.icon }}</text>
-        <text class="u-tabbar__tab-text">{{ leftTab.label }}</text>
+        <u-icon
+          v-if="leftTab.icon"
+          :name="leftTab.icon"
+          :size="16"
+          :color="modelValue === leftTab.value ? activeColor : inactiveColor"
+        />
+        <text
+          class="u-tabbar__tab-text"
+          :style="{ color: modelValue === leftTab.value ? activeColor : inactiveColor }"
+        >
+          {{ leftTab.label }}
+        </text>
       </view>
 
       <!-- 中间占位 + 凸起按钮 -->
@@ -19,8 +29,12 @@
           :class="{ 'u-tabbar__center-btn--active': modelValue === centerTab.value }"
           @click="switchTab(centerTab.value)"
         >
-          <text class="u-tabbar__center-brand">{{ centerBrand }}</text>
-          <text class="u-tabbar__center-text">{{ centerLabel }}</text>
+          <text class="u-tabbar__center-brand" :style="{ color: modelValue === centerTab.value ? activeColor : '#ffffff' }">
+            {{ centerBrand }}
+          </text>
+          <text class="u-tabbar__center-text" :style="{ color: modelValue === centerTab.value ? activeColor : '#ffffff' }">
+            {{ centerLabel }}
+          </text>
         </view>
       </view>
 
@@ -30,36 +44,63 @@
         :class="{ 'u-tabbar__tab-btn--active': modelValue === rightTab.value }"
         @click="switchTab(rightTab.value)"
       >
-        <text class="u-tabbar__tab-icon">{{ rightTab.icon }}</text>
-        <text class="u-tabbar__tab-text">{{ rightTab.label }}</text>
+        <u-icon
+          v-if="rightTab.icon"
+          :name="rightTab.icon"
+          :size="16"
+          :color="modelValue === rightTab.value ? activeColor : inactiveColor"
+        />
+        <text
+          class="u-tabbar__tab-text"
+          :style="{ color: modelValue === rightTab.value ? activeColor : inactiveColor }"
+        >
+          {{ rightTab.label }}
+        </text>
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-interface TabItem {
+import UIcon from '../u-icon/u-icon.vue'
+
+export interface TabItem {
+  /** 标签文字 */
   label: string
-  icon: string
+  /** 图标名称 */
+  icon?: string
+  /** 标识值 */
   value: string
 }
 
-interface Props {
+export interface Props {
+  /** 当前选中的tab值 */
   modelValue?: string
+  /** 左侧Tab配置 */
   leftTab?: TabItem
+  /** 中间Tab配置 */
   centerTab?: TabItem
+  /** 右侧Tab配置 */
   rightTab?: TabItem
+  /** 中间品牌文字 */
   centerBrand?: string
+  /** 中间标签文字 */
   centerLabel?: string
+  /** 激活状态颜色 */
+  activeColor?: string
+  /** 未激活状态颜色 */
+  inactiveColor?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: 'home',
-  leftTab: () => ({ label: '首页', icon: '⌂', value: 'home' }),
-  centerTab: () => ({ label: '图域', icon: 'TU', value: 'center' }),
-  rightTab: () => ({ label: '我的', icon: '◉', value: 'mine' }),
+  leftTab: () => ({ label: '首页', icon: 'home-fill', value: 'home' }),
+  centerTab: () => ({ label: '图域', value: 'center' }),
+  rightTab: () => ({ label: '我的', icon: 'account-fill', value: 'mine' }),
   centerBrand: 'TU',
-  centerLabel: '图域'
+  centerLabel: '图域',
+  activeColor: '#0c958e',
+  inactiveColor: '#ffffff'
 })
 
 const emit = defineEmits<{
@@ -67,6 +108,10 @@ const emit = defineEmits<{
   'tab-change': [value: string]
 }>()
 
+/**
+ * 切换tab
+ * @param tab - 目标tab值
+ */
 const switchTab = (tab: string) => {
   emit('update:modelValue', tab)
   emit('tab-change', tab)
@@ -86,6 +131,7 @@ export default {
 // 薄荷主题色
 $--mint-1: #12b6af;
 $--mint-2: #9fe4dd;
+$--mint-3: #65d8d1;
 $--ink: #1b4d4a;
 $--paper: #ffffff;
 
@@ -96,126 +142,107 @@ $--paper: #ffffff;
   bottom: 0;
   z-index: 999;
   width: 100%;
-}
-
-// 导航栏容器 - 胶囊形状
-.u-tabbar__nav-wrap {
-  position: absolute;
-  left: 14px;
-  right: 14px;
-  bottom: calc(10px + env(safe-area-inset-bottom));
-  /* 鴻蒙兼容 */
-  bottom: calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
-  z-index: 5;
-  height: 56px;
-  border-radius: 28px;
-  background: linear-gradient(90deg, $--mint-1 0%, $--mint-2 100%);
-  box-shadow: 0 10px 24px rgba(7, 114, 108, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px;
-  box-sizing: border-box;
-}
-
-// Tab按钮
-.u-tabbar__tab-btn {
-  flex: 1;
-  height: 40px;
-  border-radius: 20px;
-  background: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  font-size: 14px;
-  transition: all 200ms ease;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-
-  &--active {
-    background: $--paper;
-    color: #0c958e;
-    box-shadow: inset 0 0 0 1px rgba(17, 135, 128, 0.14);
+  pointer-events: none;
+
+  &__nav-wrap {
+    pointer-events: auto;
+    position: absolute;
+    left: 14px;
+    right: 14px;
+    bottom: calc(10px + env(safe-area-inset-bottom));
+    /* 鸿蒙兼容 */
+    bottom: calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
+    z-index: 5;
+    height: 56px;
+    border-radius: 28px;
+    background: linear-gradient(90deg, $--mint-1 0%, $--mint-2 100%);
+    box-shadow: 0 10px 24px rgba(7, 114, 108, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px;
+    box-sizing: border-box;
   }
-}
-
-.u-tabbar__tab-icon {
-  font-size: 16px;
-  font-weight: 700;
-  color: rgba(255, 255, 255, 0.9);
-  flex-shrink: 0;
-}
-
-.u-tabbar__tab-btn--active .u-tabbar__tab-icon {
-  color: #0c958e;
-}
 
-.u-tabbar__tab-text {
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.u-tabbar__tab-btn--active .u-tabbar__tab-text {
-  color: #0c958e;
-}
+  // Tab按钮
+  &__tab-btn {
+    flex: 1;
+    height: 40px;
+    border-radius: 20px;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    font-size: 14px;
+    transition: all 200ms ease;
+    white-space: nowrap;
+    overflow: hidden;
+    min-width: 0;
+
+    &--active {
+      background: $--paper;
+      box-shadow: inset 0 0 0 1px rgba(17, 135, 128, 0.14);
+    }
+  }
 
-// 中间区域 - 占位
-.u-tabbar__center {
-  position: relative;
-  width: 72px;
-  height: 56px;
-  flex-shrink: 0;
-}
+  &__tab-text {
+    font-weight: 600;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-// 中间凸起按钮
-.u-tabbar__center-btn {
-  position: absolute;
-  left: 50%;
-  top: -22px;
-  transform: translateX(-50%);
-  width: 72px;
-  height: 72px;
-  border-radius: 50%;
-  border: 2px solid #dff7f4;
-  background: linear-gradient(180deg, #65d8d1 0%, #21b5ae 100%);
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1px;
-  box-shadow: 0 8px 20px rgba(8, 112, 106, 0.3);
-  transition: all 200ms ease;
-
-  &:active {
-    transform: translateX(-50%) scale(0.95);
+  // 中间区域 - 占位
+  &__center {
+    position: relative;
+    width: 72px;
+    height: 56px;
+    flex-shrink: 0;
   }
 
-  &--active {
+  // 中间凸起按钮
+  &__center-btn {
+    position: absolute;
+    left: 50%;
+    top: -22px;
+    transform: translateX(-50%);
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    border: 3px solid $--mint-2;
     background: $--paper;
-    border-color: $--mint-1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    box-shadow: 0 8px 20px rgba(8, 112, 106, 0.25);
+    transition: all 200ms ease;
+
+    &:active {
+      transform: translateX(-50%) scale(0.95);
+    }
 
-    .u-tabbar__center-brand,
-    .u-tabbar__center-text {
-      color: $--mint-1;
+    &--active {
+      border-color: $--mint-1;
+      box-shadow: 0 8px 24px rgba(8, 112, 106, 0.35);
     }
   }
-}
 
-.u-tabbar__center-brand {
-  font-size: 22px;
-  line-height: 1;
-  font-weight: 700;
-  color: #fff;
-}
+  &__center-brand {
+    font-size: 22px;
+    line-height: 1;
+    font-weight: 700;
+    color: $--mint-1;
+    letter-spacing: 1px;
+  }
 
-.u-tabbar__center-text {
-  font-size: 12px;
-  letter-spacing: 0.5px;
-  color: #fff;
+  &__center-text {
+    font-size: 12px;
+    letter-spacing: 0.5px;
+    color: $--mint-1;
+    font-weight: 500;
+  }
 }
-</style>
+</style>