oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-rich-text/mp-html/node/node.vue

@@ -1,37 +1,37 @@
 <template>
-  <view @tap="nodeTap" :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="(ctrl.root&&opts[5]!=='simple'?'border:1px solid black;padding:5px;display:block;':'')+attrs.style">
+  <view @tap="nodeTap" :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="(ctrl.root&&opts[5]!=='simple'?'border:1px solid black;padding:10rpx;display:block;':'')+attrs.style">
     <block v-for="(n, i) in nodes" v-bind:key="i">
       <!-- 图片 -->
       <!-- 占位图 -->
       <image v-if="n.name==='img'&&!n.t&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
       <!-- 显示图片 -->
       <!-- #ifdef H5 || (APP-PLUS && VUE2) -->
-      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
       <!-- #endif -->
       <!-- #ifndef H5 || (APP-PLUS && VUE2) -->
       <!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
       <rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="[{attrs:{style:n.attrs.style||'',src:n.attrs.src},name:'img'}]" :data-i="i" @tap.stop="imgTap" />
       <!-- #endif -->
       <!-- #ifdef APP-HARMONY -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id||('n'+i)" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+ctrl[i]+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <image v-else-if="n.name==='img'" :id="n.attrs.id||('n'+i)" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+ctrl[i]+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
       <!-- #endif -->
       <!-- #ifndef H5 || APP-PLUS || MP-KUAISHOU -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:'+(ctrl['h'+i]||1)+'px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="!opts[5]&&opts[3]&&!n.attrs.ignore" :image-menu-prevent="opts[5]||!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:'+(ctrl['h'+i]||1)+'px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="!opts[5]&&opts[3]&&!n.attrs.ignore" :image-menu-prevent="opts[5]||!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
       <!-- #endif -->
       <!-- #ifdef MP-KUAISHOU -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
       <!-- #endif -->
       <!-- #ifdef APP-PLUS && VUE3 -->
-      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:3px;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl['e'+i]&&opts[5]!=='simple'?'border:1px dashed black;padding:6rpx;':'')+(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
       <!-- #endif -->
       <!-- 文本 -->
       <text v-else-if="n.type==='text'&&!ctrl['e'+i]" :data-i="i" :user-select="opts[4]" :decode="!opts[5]" @tap="editStart">{{n.text}}
         <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text>
       </text>
-      <text v-else-if="n.type==='text'&&ctrl['e'+i]===1" :data-i="i" style="border:1px dashed black;min-width:50px;width:auto;padding:5px;display:block" @tap.stop="editStart">{{n.text}}
+      <text v-else-if="n.type==='text'&&ctrl['e'+i]===1" :data-i="i" style="border:1px dashed black;min-width:100rpx;width:auto;padding:10rpx;display:block" @tap.stop="editStart">{{n.text}}
         <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text>
       </text>
-      <textarea v-else-if="n.type==='text'" :style="opts[5]==='simple'?'':'border:1px dashed black;'+'min-width:50px;width:auto;padding:5px'" auto-height maxlength="-1" :focus="ctrl['e'+i]===3" :value="n.text" :data-i="i" @input="editInput" @blur="editEnd" />
+      <textarea v-else-if="n.type==='text'" :style="opts[5]==='simple'?'':'border:1px dashed black;'+'min-width:100rpx;width:auto;padding:10rpx'" auto-height maxlength="-1" :focus="ctrl['e'+i]===3" :value="n.text" :data-i="i" @input="editInput" @blur="editEnd" />
       <text v-else-if="n.name==='br'">\n</text>
       <!-- 链接 -->
       <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
@@ -114,6 +114,7 @@ module.exports = {
 </script>
 <script>
 import Parser from '../parser'
+import { unitConvert } from '../../../common/util'
 function getTop(e) {
   let top
   top = e.currentTarget.offsetTop
@@ -393,13 +394,23 @@ export default {
                 changing: val => {
                   if (Math.abs(val - value) > 2) {
                     // 字号变换超过 2 时更新到视图
-                    parent.changeStyle('font-size', i, val + 'px', value + 'px')
+                    parent.changeStyle(
+                      'font-size',
+                      i,
+                      unitConvert(val, 0, { output: 'px' }),
+                      unitConvert(value, 0, { output: 'px' })
+                    )
                     value = e.detail.value
                   }
                 },
                 change: val => {
                   if (val !== value) {
-                    parent.changeStyle('font-size', i, val + 'px', value + 'px')
+                    parent.changeStyle(
+                      'font-size',
+                      i,
+                      unitConvert(val, 0, { output: 'px' }),
+                      unitConvert(value, 0, { output: 'px' })
+                    )
                   }
                   this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style)
                 }
@@ -915,7 +926,7 @@ export default {
 
 /deep/ .md-table,
 /deep/ .md-blockquote {
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 
 /deep/ .md-table {
@@ -937,7 +948,7 @@ export default {
 
 /deep/ .md-th,
 /deep/ .md-td {
-  padding: 6px 13px !important;
+  padding: 12rpx 28rpx !important;
   border: 1px solid #dfe2e5;
 }
 
@@ -956,7 +967,7 @@ export default {
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   font-size: 85%;
   background-color: rgba(27, 31, 35, 0.05);
-  border-radius: 3px;
+  border-radius: 6rpx;
 }
 
 /deep/ .md-pre .md-code {
@@ -983,14 +994,14 @@ export default {
 
   /* #endif */
   /deep/ ._video {
-    width: 300px;
-    height: 225px;
+    width: 600rpx;
+    height: 450rpx;
     display: inline-block;
     background-color: black;
   }
 /* a 标签默认效果 */
 ._a {
-  padding: 1.5px 0 1.5px 0;
+  padding: 4rpx 0 4rpx 0;
   color: #366092;
   word-break: break-all;
 }
@@ -1080,7 +1091,7 @@ export default {
 ._ol,
 ._ul {
   display: block;
-  padding-left: 40px;
+  padding-left: 80rpx;
   margin: 1em 0;
 }
 
@@ -1154,8 +1165,8 @@ export default {
 
 /* #ifdef APP-PLUS */
 ._video {
-  width: 300px;
-  height: 225px;
+  width: 600rpx;
+  height: 450rpx;
 }
 /* #endif */
 </style>

package/components/oxy-rich-text/oxy-rich-text.vue

@@ -2,7 +2,7 @@
   <view class="oxy-rich-text" :style="customStyle" :class="{ editable }">
     <view v-if="editable" class="editor_toolbox">
       <template v-for="(button, index) in toolButtons" :key="index">
-        <image width="16px" height="16px" v-if="button.icon" :src="button.icon" alt="" @click="button.tap()" />
+        <image width="32rpx" height="32rpx" v-if="button.icon" :src="button.icon" alt="" @click="button.tap()" />
         <oxy-icon v-else size="18" :name="button.name" :class="button.class" @click="button.tap()" />
       </template>
     </view>
@@ -20,7 +20,7 @@
       ></mp-html>
     </view>
 
-    <oxy-popup v-model="dialog" position="bottom" closable @close="dialog = false">
+    <oxy-popup v-model="dialog" position="bottom" :max-width="popupMaxWidth" closable @close="dialog = false">
       <view class="oxy-rich-text__popup">
         <view class="dialog-title">{{ translate('insert' + (dialogType === 'emoji' ? 'Emoji' : 'Template')) }}</view>
         <template v-if="dialogType === 'emoji'">
@@ -40,7 +40,7 @@
         </template>
       </view>
     </oxy-popup>
-    <oxy-popup v-model="linkDialog" position="bottom" closable @close="linkDialog = false">
+    <oxy-popup v-model="linkDialog" position="bottom" :max-width="popupMaxWidth" closable @close="linkDialog = false">
       <view class="oxy-rich-text__popup">
         <view class="dialog-title">{{ translate('insertLink') }}</view>
         <view class="oxy-rich-text__link-input">
@@ -110,9 +110,9 @@ const emit = defineEmits<{
 }>()
 const { translate } = useTranslate('richText')
 const templates = [
-  '<section style="text-align: center; margin: 0px auto;"><section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;"><span style="font-size: 18px; color: #595959;">标题</span></section></section>',
-  '<div style="width: 100%; box-sizing: border-box; border-radius: 5px; background-color: #f6f6f6; padding: 10px; margin: 10px 0"><div>卡片</div><div style="font-size: 12px; color: gray">正文</div></div>',
-  '<div style="border: 1px solid gray; box-shadow: 3px 3px 0px #cfcfce; padding: 10px; margin: 10px 0">段落</div>'
+  '<section style="text-align: center; margin: 0 auto;"><section style="border-radius: 8rpx; border: 1px solid #757576; display: inline-block; padding: 10rpx 40rpx;"><span style="font-size: 36rpx; color: #595959;">标题</span></section></section>',
+  '<div style="width: 100%; box-sizing: border-box; border-radius: 10rpx; background-color: #f6f6f6; padding: 20rpx; margin: 20rpx 0"><div>卡片</div><div style="font-size: 32rpx; color: gray">正文</div></div>',
+  '<div style="border: 1px solid gray; box-shadow: 6rpx 6rpx 0 #cfcfce; padding: 20rpx; margin: 20rpx 0">段落</div>'
 ]
 const emojis = [
   ['😄', '😷', '😂', '😝', '😳', '😱', '😔', '😒', '😉'],
@@ -143,61 +143,61 @@ const actions = ref([
 
 const customTagStyle = {
   p: `
-    font-size: 16px;
+    font-size: 32rpx;
     color: var(--oxy-rich-text-primary-color, #262626);
   `,
   h1: `
-    margin:18px 0 10px 0;
-    font-size: 24px;
+    margin: 36rpx 0 20rpx 0;
+    font-size: 52rpx;
     font-weight: 700;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h2: `
-    margin:14px 0 10px 0;
-    font-size: 20px;
+    margin: 28rpx 0 20rpx 0;
+    font-size: 44rpx;
     font-weight: 600;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h3: `
-    margin:12px 0 8px 0;
-    font-size: 18px;
+    margin: 24rpx 0 16rpx 0;
+    font-size: 40rpx;
     font-weight: 600;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h4: `
-    margin:12px 0 8px 0;
-    font-size: 16px;
+    margin: 24rpx 0 16rpx 0;
+    font-size: 36rpx;
     font-weight: 600;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h5: `
-    margin:10px 0 8px 0;
-    font-size: 15px;
+    margin: 20rpx 0 16rpx 0;
+    font-size: 34rpx;
     font-weight: 600;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h6: `
-    margin:8px 0 8px 0;
-    font-size: 14px;
+    margin: 16rpx 0;
+    font-size: 32rpx;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   blockquote: `
-    margin:14px 0;
-    padding: 10px 12px;
+    margin: 28rpx 0;
+    padding: 20rpx 24rpx;
     color: var(--oxy-rich-text-blockquote-color, #555);
     background: var(--oxy-rich-text-blockquote-bg, #f7f8fa);
-    border-left: 4px solid var(--oxy-rich-text-blockquote-border-color, #007AFF);
+    border-left: 8rpx solid var(--oxy-rich-text-blockquote-border-color, #007AFF);
   `,
   'blockquote>p': `
     margin-block-start: 0;
     margin-block-end: 0;
   `,
   ul: `
-    margin: 0 0 10px 0;
+    margin: 0 0 20rpx 0;
     color: var(--oxy-rich-text-list-color, #444);
   `,
   li: `
-    margin: 6px 0;
+    margin: 12rpx 0;
     line-height: 1.65;
     color: var(--oxy-rich-text-list-color, #444);
   `,
@@ -218,35 +218,35 @@ const customTagStyle = {
     padding: 0;
     border: none;
     background: var(--oxy-rich-text-hr-color, #e5e6eb);
-    margin: 18px 0;
+    margin: 36rpx 0;
   `,
   table: `
     border-spacing: 0;
     overflow: auto;
     min-width: 100%;
-    margin: 12px 0;
+    margin: 24rpx 0;
     border-collapse: collapse;
   `,
   th: `
     border: 1px solid var(--oxy-rich-text-table-border-color, #e5e6eb);
     background: var(--oxy-rich-text-table-head-bg, #f7f8fa);
     color: var(--oxy-rich-text-table-head-color, #333);
-    padding: 8px 12px;
+    padding: 16rpx 24rpx;
     font-weight: 600;
   `,
   td: `
     border: 1px solid var(--oxy-rich-text-table-border-color, #e5e6eb);
     color: var(--oxy-rich-text-table-text-color, #444);
-    padding: 8px 12px;
+    padding: 16rpx 24rpx;
   `,
   pre: `
-    border-radius: 6px;
+    border-radius: 12rpx;
     white-space: pre;
     background: var(--oxy-rich-text-code-bg, #2d2d2d);
     color: var(--oxy-rich-text-code-color, #f8f8f2);
-    font-size: 13px;
+    font-size: 30rpx;
     line-height: 1.65;
-    padding: 12px;
+    padding: 24rpx;
     overflow: auto;
     position: relative;
   `

package/components/oxy-rich-text/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
-import { baseProps } from '../common/props'
+import { baseProps, makeStringProp } from '../common/props'
 
 export const richTextProps = {
   ...baseProps,
@@ -15,6 +15,11 @@ export const richTextProps = {
     type: Boolean,
     default: false
   },
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   uploadMethod: {
     type: Function as any,
     default: null

package/components/oxy-row/oxy-row.vue

@@ -18,7 +18,7 @@ export default {
 import { computed, type CSSProperties } from 'vue'
 import { useChildren } from '../composables/useChildren'
 import { ROW_KEY, rowProps } from './types'
-import { addUnit, objToStyle } from '../common/util'
+import { withDefaultUnit, objToStyle } from '../common/util'
 
 const props = defineProps(rowProps)
 const { linkChildren } = useChildren(ROW_KEY)
@@ -31,8 +31,8 @@ const rowStyle = computed(() => {
   if (gutter < 0) {
     console.error('[Oxy ui] warning(oxy-row): attribute gutter must be greater than or equal to 0')
   } else if (gutter) {
-    style.marginLeft = addUnit(gutter / 2)
-    style.marginRight = addUnit(gutter / 2)
+    style.marginLeft = withDefaultUnit(gutter / 2)
+    style.marginRight = withDefaultUnit(gutter / 2)
   }
   return `${objToStyle(style)}${props.customStyle}`
 })

package/components/oxy-row/types.ts

@@ -10,7 +10,7 @@ export const ROW_KEY: InjectionKey<RowProvide> = Symbol('oxy-row')
 export const rowProps = {
   ...baseProps,
   /**
-   * 列元素之间的间距（单位为px）
+   * 列元素之间的间距（单位为rpx）
    */
   gutter: makeNumberProp(0)
 }

package/components/oxy-search/index.scss

@@ -48,7 +48,7 @@
   display: flex;
   padding: $-search-padding;
   align-items: center;
-  background: #fff;
+  background: $-search-bg;
 
   @include e(block) {
     flex: 1;
@@ -97,7 +97,7 @@
     align-items: center;
   }
   @include edeep(search-icon) {
-    margin-right: 8px;
+    margin-right: 16rpx;
     color: $-search-icon-color;
     font-size: $-search-icon-size;
   }
@@ -105,7 +105,7 @@
     position: absolute;
     font-size: $-search-icon-size;
     top: 50%;
-    left: 16px;
+    left: 32rpx;
     transform: translateY(-50%);
     color: $-search-icon-color;
   }
@@ -116,7 +116,7 @@
   @include edeep(clear) {
     position: absolute;
     right: 0;
-    padding: 6px 9px 6px 7px;
+    padding: 16rpx 24rpx 16rpx 20rpx;
     color: $-search-cancel-color;
   }
   @include edeep(clear-icon) {
@@ -135,14 +135,14 @@
     background: $-search-light-bg;
 
     .oxy-search__block {
-      background: #fff;
+      background: $-search-light-input-bg;
     }
 
     .oxy-search__cover {
-      background: #fff;
+      background: $-search-light-input-bg;
     }
   }
   @include when(without-cancel) {
     padding-right: $-search-side-padding;
   }
-}
+}

package/components/oxy-segmented/index.scss

@@ -40,21 +40,24 @@
   width: 100%;
   background-color: $-segmented-item-bg-color;
   padding: $-segmented-padding;
-  border-radius: 4px;
+  border-radius: $-segmented-radius;
   box-sizing: border-box;
 
 
   @include e(item) {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
-    border-radius: 4px;
+    border-radius: $-segmented-radius;
     flex: 1;
     min-width: 0;
     z-index: 1;
-    min-height: 28px;
-    line-height: 28px;
-    padding: 0 12px;
-    font-size: 14px;
+    min-height: 56rpx;
+    line-height: 1.2;
+    padding: 0 24rpx;
+    font-size: $-fs-content;
     color: $-segmented-item-color;
     font-weight: 400;
 
@@ -63,18 +66,18 @@
     }
 
     @include when(large) {
-      min-height: 32px;
-      line-height: 32px;
-      padding: 0 12px;
-      font-size: 16px;
+      min-height: 64rpx;
+      line-height: 1.2;
+      padding: 0 24rpx;
+      font-size: $-fs-title;
     }
 
 
     @include when(small) {
-      min-height: 24px;
-      line-height: 24px;
-      padding: 0 7px;
-      font-size: 12px;
+      min-height: 48rpx;
+      line-height: 1.2;
+      padding: 0 16rpx;
+      font-size: $-fs-secondary;
     }
 
     @include when(disabled) {
@@ -84,7 +87,7 @@
 
     @include m(active) {
       background-color: $-segmented-item-acitve-bg;
-      border-radius: 4px;
+      border-radius: $-segmented-radius;
       height: calc(100% - $-segmented-padding * 2);
       @include when(disabled) {
         opacity: 0.8;
@@ -98,4 +101,4 @@
     text-overflow: ellipsis;
   }
 
-}
+}

package/components/oxy-segmented/oxy-segmented.vue

@@ -32,9 +32,10 @@ export default {
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
-import { getRect, isObj, objToStyle, addUnit, pause, isEqual } from '../common/util'
+import { getRect, isObj, objToStyle, pause, isEqual, unitConvert } from '../common/util'
 import type { CSSProperties } from 'vue'
 import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
+import { useWindowResize } from '../composables/useWindowResize'
 const $item = '.oxy-segmented__item'
 
 const props = defineProps(segmentedProps)
@@ -63,7 +64,24 @@ watch(
   }
 )
 
+watch(
+  () => props.options,
+  async () => {
+    updateCurrentIndex()
+    await pause()
+    updateActiveStyle(false)
+  },
+  {
+    deep: true
+  }
+)
+
 const { proxy } = getCurrentInstance() as any
+const handleWindowResize = async () => {
+  await pause()
+  updateActiveStyle(false)
+}
+useWindowResize(handleWindowResize)
 
 onMounted(async () => {
   updateCurrentIndex()
@@ -77,15 +95,17 @@ onMounted(async () => {
  */
 function updateActiveStyle(animation: boolean = true) {
   getRect($item, true, proxy).then((rects) => {
+    if (!Array.isArray(rects) || rects.length === 0 || !rects[state.activeIndex]) return
     const rect = rects[state.activeIndex]
     const style: CSSProperties = {
       position: 'absolute',
-      width: addUnit(rect.width!),
+      // getRect 返回的是真实像素值，需按 px 输出避免宽屏下激活块尺寸偏大
+      width: unitConvert(rect.width, 0, { output: 'px' }),
       'z-index': 0
     }
     const left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0)
     if (left) {
-      style.transform = `translateX(${left}px)`
+      style.transform = `translateX(${unitConvert(left, 0, { output: 'px' })})`
     }
     if (animation) {
       style.transition = 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)'