oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-qrcode/types.ts

@@ -0,0 +1,42 @@
+import type { PropType } from 'vue'
+import { baseProps, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+// 二维码样式
+export type ClQrcodeMode = 'rect' | 'circular' | 'line' | 'rectSmall'
+
+export const qrcodeProps = {
+  ...baseProps,
+  /** 二维码内容 */
+  text: makeStringProp(''),
+  /** 二维码中心图标 */
+  logo: makeStringProp(''),
+  /** 二维码宽度，number 与纯数字字符串按 rpx 处理 */
+  width: makeNumericProp(400),
+  /** 二维码高度，number 与纯数字字符串按 rpx 处理 */
+  height: makeNumericProp(400),
+  /** 二维码中心图标大小，number 与纯数字字符串按 rpx 处理 */
+  logoSize: makeNumericProp(80),
+  /** 二维码内边距，number 与纯数字字符串按 rpx 处理 */
+  padding: makeNumericProp(0),
+  /** 二维码前景色 */
+  foreground: makeStringProp('#000'),
+  /** 二维码背景颜色 */
+  background: makeStringProp('#FFFFFF'),
+  /** 二维码错误级别
+   *  默认值：H
+   *  可选值：L、M、Q、H
+   * */
+  ecc: {
+    type: String as PropType<'L' | 'M' | 'Q' | 'H'>,
+    default: 'H'
+  },
+  /** 二维码样式 rect 普通矩形、circular 小圆点、line 线条、rectSmall 小方格*/
+  mode: {
+    type: String as PropType<ClQrcodeMode>,
+    default: 'circular'
+  },
+  /** 二维码边框颜色 */
+  pdColor: makeStringProp(''),
+  /** 二维码边框圆角，number 与纯数字字符串按 rpx 处理 */
+  pdRadius: makeNumericProp(0)
+}

package/components/oxy-radio/index.scss

@@ -29,7 +29,7 @@
           color: $-dark-color-gray;
         }
       }
-  
+
       @include when(button) {
         .oxy-radio__label {
           border-color: #c8c9cc;
@@ -44,7 +44,7 @@
           }
         }
       }
-  
+
       @include when(dot) {
         .oxy-radio__shape {
           border-color: #c8c9cc;
@@ -64,7 +64,7 @@
   justify-content: space-between;
   align-items: center;
   text-align: center;
-  line-height: 1.2;
+  // line-height: 1.2;
 
   @include when(first) {
     margin-top: 0;
@@ -92,7 +92,7 @@
     vertical-align: top;
     font-size: $-radio-label-fs;
     color: $-radio-label-color;
-    line-height: 20px;
+    line-height: 40rpx;
     word-break: break-all;
   }
   @include when(checked) {
@@ -109,7 +109,7 @@
 
   @include when(dot) {
     .oxy-radio__shape {
-      border: 2px solid $-radio-dot-border-color;
+      border: 4rpx solid $-radio-dot-border-color;
       border-radius: 50%;
       position: relative;
       display: inline-block;
@@ -145,7 +145,7 @@
   @include when(button) {
     display: inline-block;
     margin-top: 0;
-    margin-right: 10px;
+    margin-right: 20rpx;
 
     .oxy-radio__shape {
       display: none;
@@ -154,7 +154,7 @@
       height: $-radio-button-height;
       min-width: $-radio-button-min-width;
       max-width: $-radio-button-max-width;
-      padding: 5px 15px;
+      padding: 10rpx 30rpx;
       margin-right: 0;
       border-radius: $-radio-button-radius;
       background-color: $-radio-button-bg;
@@ -187,7 +187,7 @@
     }
     .oxy-radio__shape {
       display: block;
-      margin-right: 4px;
+      margin-right: 8rpx;
       float: left;
       &::after {
         content: "";
@@ -198,7 +198,7 @@
 
     @include when(dot) {
       .oxy-radio__shape {
-        margin-top: 2px;
+        margin-top: 4rpx;
       }
       @include when(large) {
         .oxy-radio__shape {
@@ -210,7 +210,7 @@
     &.icon-placement-right {
       .oxy-radio__shape {
         margin-right: 0;
-        margin-left: 4px;
+        margin-left: 8rpx;
         float: right;
       }
     }
@@ -257,18 +257,18 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-radio) {
-    padding: 13px 15px;
+    padding: 26rpx 30rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 14px 15px;
+      padding: 28rpx 30rpx;
     }
   }
 
   @include when(button-radio) {
     display: inline-flex;
     width: 33.3333%;
-    padding: 12px 12px 0px 0px;
+    padding: 24rpx 24rpx 0 0;
     box-sizing: border-box;
 
     .oxy-radio__label {

package/components/oxy-radio/oxy-radio.vue

@@ -16,7 +16,7 @@
     >
       <slot></slot>
     </view>
-    <view class="oxy-radio__shape" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''">
+    <view v-if="shapeValue !== 'button'" class="oxy-radio__shape" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''">
       <oxy-icon v-if="shapeValue === 'check'" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''" name="check"></oxy-icon>
     </view>
   </view>

package/components/oxy-radio-group/index.scss

@@ -11,11 +11,11 @@
   background-color: $-radio-bg;
   font-size: 0;
 
-  // 上下20px 左右15px 内部间隔12px
+  // 上下40rpx 左右30rpx 内部间隔24rpx
   @include when(button) {
     width: 100%;
     height: 100%;
-    padding: 8px 3px 20px 15px;
+    padding: 16rpx 6rpx 40rpx 30rpx;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-rate/types.ts

@@ -31,16 +31,16 @@ export const rateProps = {
   /**
    * 图标大小
    * 类型: string
-   * 默认值: '16px'
+   * 默认值: '32rpx'
    */
-  size: makeStringProp('16px'),
+  size: makeStringProp('32rpx'),
 
   /**
    * 图标间距
    * 类型: string
-   * 默认值: '4px'
+   * 默认值: '8rpx'
    */
-  space: makeStringProp('4px'),
+  space: makeStringProp('8rpx'),
 
   /**
    * 未选中的图标颜色

package/components/oxy-resize/index.scss

@@ -5,8 +5,8 @@
 
   @include e(container) {
     position: absolute;
-    min-width: 1px;
-    min-height: 1px;
+    min-width: 2rpx;
+    min-height: 2rpx;
   }
 
   @include e(wrapper) {

package/components/oxy-resize/oxy-resize.vue

@@ -13,7 +13,7 @@
         :scroll-left="expandScrollLeft"
         @scroll="onScrollHandler"
       >
-        <view class="oxy-resize__wrapper--placeholder" style="height: 100000px; width: 100000px"></view>
+        <view class="oxy-resize__wrapper--placeholder" style="height: 200000rpx; width: 200000rpx"></view>
       </scroll-view>
       <!--监听插槽变小-->
       <scroll-view
@@ -43,7 +43,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onMounted, ref } from 'vue'
-import { addUnit, objToStyle, uuid } from '../common/util'
+import { objToStyle, unitConvert, uuid } from '../common/util'
 import { resizeProps } from './types'
 
 const props = defineProps(resizeProps)
@@ -59,8 +59,8 @@ const scrollEventCount = ref<number>(0)
 
 const rootStyle = computed(() => {
   const style: Record<string, string | number> = {
-    width: addUnit(width.value),
-    height: addUnit(height.value)
+    width: unitConvert(width.value, 0, { output: 'px' }),
+    height: unitConvert(height.value, 0, { output: 'px' })
   }
   return `${objToStyle(style)}${props.customStyle}`
 })

package/components/oxy-resize/types.ts

@@ -2,5 +2,8 @@ import { baseProps, makeStringProp } from '../common/props'
 
 export const resizeProps = {
   ...baseProps,
+  /**
+   * 自定义容器类名
+   */
   customContainerClass: makeStringProp('')
 }

package/components/oxy-rich-text/icon/emjio.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766975046008" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1819" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M508.544 66.88A448 448 0 0 0 60.992 514.432a448 448 0 0 0 447.552 447.552 448 448 0 0 0 447.552-447.552 448 448 0 0 0-447.552-447.552z m0 831.104a384 384 0 0 1-383.552-383.552 384 384 0 0 1 383.552-383.552 384 384 0 0 1 383.552 383.552 384 384 0 0 1-383.552 383.552z" fill="#666666" p-id="1820"></path><path d="M367.488 404.48m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#666666" p-id="1821"></path><path d="M635.52 404.48m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="1822" fill="#666666"></path><path d="M669.248 613.056a31.936 31.936 0 0 0-44.16 9.664c-20.8 32.448-67.968 53.44-120.064 53.44-52.096 0-99.2-20.928-120-53.376a32 32 0 1 0-53.888 34.496c32.768 51.136 99.392 82.88 173.888 82.88 74.56 0 141.184-31.744 173.952-82.944a32 32 0 0 0-9.728-44.16z" fill="#666666" p-id="1823"></path></svg>

package/components/oxy-rich-text/icon/quote.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766975139977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4924" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M156.09136 606.57001a457.596822 457.596822 0 0 1 221.680239-392.516385 50.844091 50.844091 0 1 1 50.844091 86.943396 355.90864 355.90864 0 0 0-138.804369 152.532274h16.77855a152.532274 152.532274 0 1 1-152.532274 152.532274z m406.752731 0a457.596822 457.596822 0 0 1 221.680239-392.007944 50.844091 50.844091 0 1 1 50.844091 86.943396 355.90864 355.90864 0 0 0-138.804369 152.532274h16.77855a152.532274 152.532274 0 1 1-152.532274 152.532274z" fill="#666666" p-id="4925"></path></svg>

package/components/oxy-rich-text/icon/text.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766975077860" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2823" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M859.428571 256a18.285714 18.285714 0 0 1-18.285714-18.285714V146.285714H182.857143v91.428572a18.285714 18.285714 0 0 1-36.571429 0v-109.714286a18.285714 18.285714 0 0 1 18.285715-18.285714h694.857142a18.285714 18.285714 0 0 1 18.285715 18.285714v109.714286a18.285714 18.285714 0 0 1-18.285715 18.285714z" p-id="2824"></path><path d="M512 932.571429a18.285714 18.285714 0 0 1-18.285714-18.285715V128a18.285714 18.285714 0 0 1 36.571428 0V914.285714a18.285714 18.285714 0 0 1-18.285714 18.285715z" p-id="2825"></path><path d="M694.857143 932.571429H329.142857a18.285714 18.285714 0 0 1 0-36.571429h365.714286a18.285714 18.285714 0 0 1 0 36.571429z" fill="#666666" p-id="2826"></path></svg>

package/components/oxy-rich-text/icon/title.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766975122092" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3948" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M308.623635 461.155909h406.75273v-355.90864a50.844091 50.844091 0 1 1 101.688183 0v813.505462a50.844091 50.844091 0 0 1-101.688183 0v-355.90864h-406.75273v355.90864a50.844091 50.844091 0 0 1-101.688183 0v-813.505462a50.844091 50.844091 0 0 1 101.688183 0z" fill="#666666" p-id="3949"></path></svg>

package/components/oxy-rich-text/index.scss

@@ -0,0 +1,160 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-rich-text {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+  text-align: left;
+
+  &.editable {
+    border: 1px solid $-rich-text-editable-border-color;
+
+  }
+
+  .rich-text-main {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16rpx;
+    position: relative;
+
+  }
+
+  :deep(.mp-html) {
+    // Styles are now handled via tagStyle prop
+  }
+
+  .editor_toolbox {
+    width: 100%;
+    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
+    padding: 8rpx 16rpx;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    gap: 8rpx;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid $-color-border-light;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+
+    .oxy-icon {
+      cursor: pointer;
+      width: 64rpx;
+      height: 64rpx;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 12rpx;
+      transition: all 0.2s ease;
+      color: $-color-secondary;
+      font-size: 36rpx;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        color: $-color-theme;
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    image {
+      width: 32rpx;
+      height: 32rpx;
+      cursor: pointer;
+      padding: 16rpx;
+      border-radius: 12rpx;
+      transition: all 0.2s ease;
+      box-sizing: content-box;
+      display: inline-block;
+      vertical-align: middle;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    svg {
+      cursor: pointer;
+      width: 32rpx;
+      height: 32rpx;
+      padding: 16rpx;
+      border-radius: 12rpx;
+      transition: all 0.2s ease;
+      box-sizing: content-box;
+      display: inline-block;
+      vertical-align: middle;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        transform: translateY(-2rpx);
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.08);
+        transform: translateY(0);
+      }
+    }
+  }
+
+  .reverse {
+    transform: scaleX(-1);
+  }
+
+  .dialog-title {
+    font-size: 32rpx;
+    line-height: 92rpx;
+    text-align: center;
+    height: 92rpx;
+    font-weight: $-fw-semibold;
+    color: $-color-black;
+
+  }
+
+  .oxy-rich-text__popup {
+    padding: 0 24rpx 24rpx 24rpx;
+
+    .oxy-rich-text__emoji-content {
+      display: flex;
+      font-size: 40rpx;
+      line-height: 70rpx;
+      text-align: center;
+
+      .oxy-rich-text__emoji-block {
+        flex: 1;
+      }
+    }
+
+    .oxy-rich-text__popup-divider {
+      border-top: 1px dashed $-rich-text-popup-divider-color;
+      width: 80%;
+      height: 0;
+      margin: 40rpx auto;
+    }
+
+    .oxy-rich-text__link-input {
+      margin-bottom: 32rpx;
+
+      .oxy-rich-text__link-label {
+        font-size: 28rpx;
+        color: $-color-secondary;
+        margin-bottom: 16rpx;
+      }
+    }
+
+    .oxy-rich-text__link-buttons {
+      display: flex;
+      gap: 24rpx;
+      margin-top: 40rpx;
+
+      .oxy-button {
+        flex: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+<template>
+    <view class="card" @click="onClick" :style="[customStyle]" :data-i="$attrs['data-i']">
+        <image class="card-img" mode="aspectFill" :src="src" />
+        <view class="text-wrap text-wrap-width" v-if="!!desc">
+            <view class="title one-t">{{title}}</view>
+            <view class="desc one-t">{{desc}}</view>
+        </view>
+        <view v-else class="text-wrap-width title more-t">{{title}}</view>
+        <image class="card-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAABCFBMVEUAAAC/v7+qqqqZmZmLi6KJnZ2ImZmHlpaGlKGMjJmSkp6Li5eQkJuKlZ+Pj5mOjpeJkpuNjZ6IkJmHj5eLi5uKkpmGjZqJj5uLi5eIjpmIjZiKj5qKj5mJjpiHjJqJjZaGj5iKj5eIjJmKjpqHi5eGjZeIi5eHjZiIi5eHjJiIjpaHjJeIjZiGjJeIjZiGjJaGjJeIi5aGjJeHi5eHi5aHjJeHjJaHjJeGi5eHjJaHjJeGi5aGi5aHjJeHjJaGjJeGjJeHjJaHi5eGi5eHjJaHjJeGjJaGjJeHi5aHjJeHjJeHi5aGjJeHi5aGjJaHi5eGjJaHi5eHjJaGi5eGi5aHjJeGi5aGi5apAvjmAAAAV3RSTlMABAYKCw0PERMUFRYXGBkbHB0eICEjJiksLS8wMjQ1ODk7PD9ATFZXWFlaW1xdXl+Hi6msu7/Dx8vMzs/R0tTV19na3N3f4uTn6evs7e7v8PHy9PX7/P18cCTXAAABEklEQVRo3u2YWU5CQRQFn4qCM4LzhIoDAorzrIgCigiCimf/O/Gj3UIlmJxaQFXSea/T90aRMcYYY4zpG0ZPu9cZMnAi6SsLBjqS9LnJBcqSpC53Sjs/kqSPNaxwGAqtFbrQXKILjQW68DpPF17m6EI9TRdqM3TheZouVCbpQnkcK5RC4T5BF27jdOFqhC5cDtOFixhdOB+iC2cDdOEoggttLrDbk6QW5/+WJB1T/r1e+FAHWT/2q/35scsiF/w3cdZ/R13Y+8H/MMb6Hycgfz74n6ZYfzXJ+mspyF8I/vos68cep0X4eV2EB4SD4H9bZP3vy+yTtL3KjrGddXgQ34BXCVvwMmT7P69zjDHGGGP6gF83lHISOctsKQAAAABJRU5ErkJggg=="></image>
+    </view>
+</template>
+
+<script>
+    export default {
+        props: {
+            mode: {
+                type: Boolean,
+                default: false
+            },
+            src: String,
+            title: String,
+            desc: String,
+            url: String,
+            color: String,
+            bgcolor: String,
+            border: String
+        },
+        data () {
+            return {
+                
+            }
+        },
+        computed: {
+            customStyle () {
+                return {
+                    'background-color': this.bgColor || '#a4d0ff',
+                    border: this.border || '1px solid #FFF',
+                    color: this.color || '#000'
+                } 
+            }
+        },
+        methods: {
+            onClick (e) {
+              if (this.url && this.url.trim().length > 6 && !this.mode) {
+                  uni.navigateTo({ url: this.url })
+              }
+              this.$emit('click', e)
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .one-t {
+    	overflow: hidden;
+    	white-space: nowrap;
+    	text-overflow: ellipsis;
+    	transition: all linear 0.2s;
+    }
+    
+    .more-t {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break:break-all;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        transition: all linear 0.2s;
+    }
+    
+    .card {
+        
+        width: 80%;
+        margin: 10rpx auto;
+        max-width: 700rpx;
+        max-height: 140rpx;
+        
+        box-sizing: border-box;
+        overflow: hidden;
+        
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        
+        padding: 20rpx 0 20rpx 10rpx;
+        border-radius: 12rpx;
+        
+        &-img {
+            width: 96rpx;
+            height: 96rpx;
+            border-radius: 12rpx;
+            flex: 0 0 96rpx;
+        }
+        
+        &-icon {
+            width: 30rpx;
+            height: 96rpx;
+        }
+        
+        .text-wrap {
+            
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            
+            &-width {
+                width: 72%;
+            }
+        }
+        
+        .title {
+            font-weight: bold;
+            font-size: 34rpx;
+            line-height: 48rpx;
+        }
+        
+        .desc {
+            font-size: 27rpx;
+            line-height: 37rpx;
+        }
+    }
+</style>

package/components/oxy-rich-text/mp-html/card/index.js

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Card 插件
+ */
+function Card (vm) {
+}
+
+export default Card

package/components/oxy-rich-text/mp-html/editable/config.js

@@ -0,0 +1,15 @@
+// 以下项目可以删减或更换顺序，但不能添加或更改名字
+export default {
+  // 普通标签的菜单项
+  node: ['大小', '颜色', '斜体', '粗体', '下划线', '居中', '缩进', '上移', '下移', '删除'],
+  // 可以设置的文字颜色，此项可以添加 css 颜色
+  color: ['red', 'yellow', 'blue', 'green', 'gray', 'white', 'black'],
+  // 图片的菜单项
+  img: ['换图', '宽度', '超链接', '预览图', '禁用预览', '上移', '下移', '删除'],
+  // 链接的菜单项
+  link: ['更换链接', '上移', '下移', '删除'],
+  // 音视频的菜单项
+  media: ['封面', '循环', '自动播放', '上移', '下移', '删除'],
+  // 卡片的菜单项
+  card: ['上移', '下移', '删除']
+}