oxy-uni-ui 1.1.0 → 1.2.3

package/components/oxy-list/oxy-list.vue

@@ -1,38 +1,61 @@
 <template>
-  <view :class="['oxy-list', customClass]" :style="customStyle">
-    <oxy-virtual-scroll
-      ref="virtualScrollRef"
-      :is-virtual="virtual"
-      :data="data"
-      :height="height"
-      :item-height="itemHeight"
-      :id-key="idKey"
-      :show-back-to-top="showBackToTop"
-      :back-to-top-threshold="backToTopThreshold"
+  <view :class="['oxy-list', 'oxy-virtual-scroll', customClass]" :style="customStyle">
+    <!-- 滚动内容区域 -->
+    <scroll-view
+      v-if="data.length"
+      :style="{ height: height }"
+      class="oxy-virtual-scroll__view"
+      :scroll-y="true"
+      :scroll-x="scrollX"
+      :upper-threshold="upperThreshold"
+      :lower-threshold="lowerThreshold"
+      :scroll-top="scrollTop"
+      :scroll-left="scrollLeft"
+      :scroll-with-animation="scrollWithAnimation"
+      :enable-back-to-top="enableBackToTop"
+      :show-scrollbar="showScrollbar"
+      :refresher-enabled="refresherEnabled"
+      :refresher-threshold="refresherThreshold"
+      :refresher-default-style="refresherDefaultStyle"
+      :refresher-background="refresherBackground"
       :refresher-triggered="triggered"
-      v-bind="{ ...defaultscrollConfig, ...scrollConfig }"
-      @scroll-to-upper="onScrollToUpper"
-      @scroll-to-lower="onScrollToLower"
-      @scroll="onScroll"
+      :enable-flex="enableFlex"
+      :scroll-anchoring="scrollAnchoring"
+      @scroll="handleScroll"
+      @scrolltoupper="onScrollToUpper"
+      @scrolltolower="onScrollToLower"
       @refresherrefresh="onRefresh"
       @refresherrestore="onRestore"
       @refresherabort="onAbort"
     >
-      <template #item="{ item }">
-        <slot name="item" :item="item"></slot>
-      </template>
-      <template #bottom>
-        <oxy-loadmore
-          v-if="loadmoreState"
-          :state="loadmoreState"
-          :loading-text="loadingText"
-          :finished-text="finishedText"
-          :error-text="errorText"
-          :loading-props="loadingProps"
-          @reload="onReload"
-        />
-      </template>
-    </oxy-virtual-scroll>
+      <view class="oxy-virtual-scroll__container" :style="{ height: totalHeight + 'px' }">
+        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+          <view v-for="(item, index) in virtualData" :key="index">
+            <slot name="item" :item="item" :index="startIndex + index"></slot>
+          </view>
+          <slot name="bottom">
+            <oxy-loadmore
+              v-if="loadmoreState"
+              :state="loadmoreState"
+              :loading-text="loadingText"
+              :finished-text="finishedText"
+              :error-text="errorText"
+              :loading-props="loadingProps"
+              @reload="onReload"
+            />
+          </slot>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view v-else>
+      <oxy-status-tip image="content" :tip="emptyText" />
+    </view>
+
+    <!-- 回到顶部按钮 -->
+    <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
+      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+    </view>
   </view>
 </template>
 
@@ -48,7 +71,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, toRefs } from 'vue'
 import { type ListExpose, listProps } from './types'
 import type {
   ScrollViewOnRefresherabortEvent,
@@ -56,18 +79,70 @@ import type {
   ScrollViewOnRefresherrestoreEvent,
   ScrollViewOnScrollEvent
 } from '@uni-helper/uni-app-types/index'
-import type { VirtualScrollInstance } from '../oxy-virtual-scroll/types'
+import { useVirtualScroll } from '../composables/useVirtualScroll'
 
 const props = defineProps(listProps)
 
 const emit = defineEmits(['scroll-to-lower', 'reload', 'scroll-to-upper', 'scroll', 'refresh', 'restore', 'abort'])
-const virtualScrollRef = ref<VirtualScrollInstance | null>(null)
 
 const defaultscrollConfig = {
-  refresherEnabled: true,
+  refresherEnabled: false,
   refresherThreshold: 60,
   scrollWithAnimation: false
-}
+} as const
+
+// 解构props用于组合式函数
+const {
+  data,
+  virtual,
+  height,
+  itemHeight,
+  idKey,
+  showBackToTop,
+  backToTopThreshold,
+  scrollY,
+  scrollX,
+  upperThreshold,
+  lowerThreshold,
+  scrollLeft,
+  scrollWithAnimation,
+  enableBackToTop,
+  showScrollbar,
+  refresherEnabled,
+  refresherThreshold,
+  refresherDefaultStyle,
+  refresherBackground,
+  triggered,
+  enableFlex,
+  scrollAnchoring
+} = toRefs(props)
+
+// 使用虚拟滚动组合式函数
+const {
+  scrollTop,
+  showBackTopBtn,
+  virtualData,
+  startIndex,
+  virtualOffsetY,
+  totalHeight,
+  displayData,
+  initScrollData,
+  initScrollEngine,
+  updateVisibleData,
+  scrollToTop: virtualScrollToTop,
+  scrollToBottom: virtualScrollToBottom,
+  scrollToPosition: virtualScrollToPosition,
+  scrollToElement: virtualScrollToElement,
+  scrollToElementById: virtualScrollToElementById,
+  onScroll: handleVirtualScroll
+} = useVirtualScroll({
+  data,
+  virtual,
+  height,
+  itemHeight,
+  idKey,
+  backToTopThreshold
+})
 
 const onScrollToLower = async () => {
   emit('scroll-to-lower')
@@ -78,7 +153,10 @@ const onScrollToUpper = async () => {
 const onReload = async () => {
   emit('reload')
 }
-const onScroll = async (event: ScrollViewOnScrollEvent) => {
+
+// 滚动事件处理
+const handleScroll = async (event: ScrollViewOnScrollEvent) => {
+  handleVirtualScroll(event.detail.scrollTop)
   emit('scroll', event)
 }
 
@@ -96,21 +174,24 @@ const onRestore = (e: ScrollViewOnRefresherrestoreEvent) => {
 const onAbort = (e: ScrollViewOnRefresherabortEvent) => {
   emit('abort', e)
 }
+
+// 滚动方法
 const scrollToTop = () => {
-  virtualScrollRef.value?.scrollToTop()
+  virtualScrollToTop()
 }
 const scrollToBottom = () => {
-  virtualScrollRef.value?.scrollToBottom()
+  virtualScrollToBottom()
 }
 const scrollToPosition = (position: number | string) => {
-  virtualScrollRef.value?.scrollToPosition(position)
+  virtualScrollToPosition(position)
 }
 const scrollToElement = (item: any) => {
-  virtualScrollRef.value?.scrollToElement(item)
+  virtualScrollToElement(item)
 }
 const scrollToElementById = (id: string | number) => {
-  virtualScrollRef.value?.scrollToElementById(id)
+  virtualScrollToElementById(id)
 }
+
 defineExpose<ListExpose>({
   scrollToTop,
   scrollToBottom,

package/components/oxy-list/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { makeBooleanProp } from '../common/props'
+import { makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 import { type LoadMoreState } from '../oxy-loadmore/types'
 import { type LoadingProps } from '../oxy-loading/types'
 import { virtualScrollProps } from '../oxy-virtual-scroll/types'
@@ -7,7 +7,7 @@ import { virtualScrollProps } from '../oxy-virtual-scroll/types'
 export const listProps = {
   ...virtualScrollProps,
 
-  loadmoreState: String as PropType<LoadMoreState>,
+  loadmoreState: String as PropType<LoadMoreState | ''>,
 
   /**
    * 加载提示文案
@@ -25,19 +25,7 @@ export const listProps = {
    * 加载中loading组件的属性
    * 参考loading组件
    */
-  loadingProps: Object as PropType<Partial<LoadingProps>>,
-  triggered: makeBooleanProp(false),
-  scrollConfig: {
-    type: Object as PropType<ScrollConfig>,
-    default: () => ({})
-  }
-}
-export type ScrollConfig = {
-  refresherEnabled: boolean
-  refresherThreshold: number
-  refresherBackground: string
-  animation: boolean
-  [key: string]: any
+  loadingProps: Object as PropType<Partial<LoadingProps>>
 }
 export type ListExpose = {
   scrollToTop: () => void

package/components/oxy-picker/oxy-picker.vue

@@ -293,6 +293,9 @@ function close() {
  */
 function showPopup() {
   if (props.disabled || props.readonly) return
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
 
   emit('open')
   popupShow.value = true

package/components/oxy-picker/types.ts

@@ -161,7 +161,11 @@ export const pickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>
 }
 
 export type PickerProps = ExtractPropTypes<typeof pickerProps>

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;

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-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,159 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-rich-text {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+
+  &.editable {
+    border: 1px solid $-rich-text-editable-border-color;
+
+  }
+
+  .rich-text-main {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+    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: 4px 8px;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    gap: 4px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid $-color-border-light;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+
+    .oxy-icon {
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      transition: all 0.2s ease;
+      color: $-color-secondary;
+      font-size: 18px;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        color: $-color-theme;
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    image {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      padding: 8px;
+      border-radius: 6px;
+      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: 16px;
+      height: 16px;
+      padding: 8px;
+      border-radius: 6px;
+      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(-1px);
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.08);
+        transform: translateY(0);
+      }
+    }
+  }
+
+  .reverse {
+    transform: scaleX(-1);
+  }
+
+  .dialog-title {
+    font-size: 16px;
+    line-height: 46px;
+    text-align: center;
+    height: 46px;
+    font-weight: $-fw-semibold;
+    color: $-color-black;
+
+  }
+
+  .oxy-rich-text__popup {
+    padding: 0 12px 12px 12px;
+
+    .oxy-rich-text__emoji-content {
+      display: flex;
+      font-size: 20px;
+      line-height: 35px;
+      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: 20px auto;
+    }
+
+    .oxy-rich-text__link-input {
+      margin-bottom: 16px;
+
+      .oxy-rich-text__link-label {
+        font-size: 14px;
+        color: $-color-secondary;
+        margin-bottom: 8px;
+      }
+    }
+
+    .oxy-rich-text__link-buttons {
+      display: flex;
+      gap: 12px;
+      margin-top: 20px;
+
+      .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: ['上移', '下移', '删除']
+}