oxy-uni-ui 1.2.3 → 2.0.0

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: 24rpx; 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: 48rpx;
     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: 40rpx;
     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: 36rpx;
     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: 32rpx;
     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: 30rpx;
     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: 28rpx;
     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: 26rpx;
     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

@@ -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: 12rpx 18rpx 12rpx 14rpx;
     color: $-search-cancel-color;
   }
   @include edeep(clear-icon) {

package/components/oxy-segmented/index.scss

@@ -40,21 +40,21 @@
   width: 100%;
   background-color: $-segmented-item-bg-color;
   padding: $-segmented-padding;
-  border-radius: 4px;
+  border-radius: 8rpx;
   box-sizing: border-box;
 
 
   @include e(item) {
     position: relative;
     text-align: center;
-    border-radius: 4px;
+    border-radius: 8rpx;
     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: 56rpx;
+    padding: 0 24rpx;
+    font-size: 28rpx;
     color: $-segmented-item-color;
     font-weight: 400;
 
@@ -63,18 +63,18 @@
     }
 
     @include when(large) {
-      min-height: 32px;
-      line-height: 32px;
-      padding: 0 12px;
-      font-size: 16px;
+      min-height: 64rpx;
+      line-height: 64rpx;
+      padding: 0 24rpx;
+      font-size: 32rpx;
     }
 
 
     @include when(small) {
-      min-height: 24px;
-      line-height: 24px;
-      padding: 0 7px;
-      font-size: 12px;
+      min-height: 48rpx;
+      line-height: 48rpx;
+      padding: 0 14rpx;
+      font-size: 24rpx;
     }
 
     @include when(disabled) {
@@ -84,7 +84,7 @@
 
     @include m(active) {
       background-color: $-segmented-item-acitve-bg;
-      border-radius: 4px;
+      border-radius: 8rpx;
       height: calc(100% - $-segmented-padding * 2);
       @include when(disabled) {
         opacity: 0.8;
@@ -98,4 +98,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)'