oxy-uni-ui 1.0.1 → 1.1.0

package/components/common/abstracts/variable.scss

@@ -227,7 +227,7 @@ $-calendar-range-color: var(--oxy-calendar-range-color, rgba(#4d80f0, 0.09)) !de
 $-calendar-active-border: var(--oxy-calendar-active-border, 8px) !default;
 $-calendar-info-fs: var(--oxy-calendar-info-fs, 10px) !default;
 $-calendar-item-margin-bottom: var(--oxy-calendar-item-margin-bottom, 4px) !default;
- 
+
 
 /* checkbox */
 $-checkbox-margin: var(--oxy-checkbox-margin, 10px) !default; // 多个复选框距离
@@ -361,7 +361,7 @@ $-textarea-color: var(--oxy-textarea-color, #262626) !default; // 文字颜色
 $-textarea-icon-color: var(--oxy-textarea-icon-color, #bfbfbf) !default; // 图标颜色
 $-textarea-clear-color: var(--oxy-textarea-clear-color, #585858) !default; // 关闭按钮颜色
 $-textarea-count-color: var(--oxy-textarea-count-color, #bfbfbf) !default; // 计数文字颜色
-$-textarea-count-current-color: var(--oxy-textarea-count-current-color, #262626) !default; // 当前长度颜色
+$-textarea-count-current-color: var(--oxy-textarea-count-current-color, $default-theme) !default; // 当前长度颜色
 $-textarea-bg: var(--oxy-textarea-bg, $-color-white) !default; // 默认背景颜色
 $-textarea-cell-border-color: var(--oxy-textarea-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
 $-textarea-cell-padding: var(--oxy-textarea-cell-padding, 10px) !default; // cell 容器padding
@@ -641,6 +641,28 @@ $-tag-close-size: var(--oxy-tag-close-size, 14px) !default; // 关闭按钮字
 $-tag-close-color: var(--oxy-tag-close-color, $-tag-info-color) !default; // 关闭按钮颜色
 $-tag-close-active-color: var(--oxy-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色
 
+/* corner */
+$-corner-font-size: var(--oxy-corner-fs, $-fs-secondary) !default; // 字号
+$-corner-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
+$-corner-color: var(--oxy-corner-color, $-color-white) !default; // 字体颜色
+$-corner-primary-color: var(--oxy-corner-primary-color, $-color-theme) !default; // 主颜色
+$-corner-info-color: var(--oxy-corner-info-color, #7e8fae) !default; // info 颜色
+$-corner-success-color: var(--oxy-corner-success-color, $-color-success) !default; // success 颜色
+$-corner-warning-color: var(--oxy-corner-warning-color, $-color-warning) !default; // warning 颜色
+$-corner-danger-color: var(--oxy-corner-danger-color, $-color-danger) !default; // danger 颜色
+$-corner-primary-bg: var(--oxy-corner-primary-bg, resultColor(90deg, $-color-theme, 'dark' 'light', #018cfc #5fb5fe, 0% 100%)) !default; // 主背景颜色
+$-corner-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-color-info, 'dark' 'light', #647ba7 #9aa8cb, 0% 100%)) !default; // info 背景颜色
+$-corner-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'dark' 'light', #19be6b #84e3ab, 0% 100%)) !default; // success 背景颜色
+$-corner-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'dark' 'light', #ff8124 #ffb48f, 0% 100%)) !default; // warning 背景颜色
+$-corner-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'dark' 'light', #fa4350 #fea1a8, 0% 100%)) !default; // danger 背景颜色
+$-corner-horizontal-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
+$-corner-horizontal-font-weight: var(--oxy-corner-fs, $-fw-semibold) !default; // 字号
+$-corner-horizontal-primary-bg: var(--oxy-corner-primary-bg, resultColor(90deg, $-color-theme, 'light' 'dark', #ffffff #cceaff, 0% 100%)) !default; // 主背景颜色
+$-corner-horizontal-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-color-info, 'light' 'dark', #ffffff #adb6c6, 0% 100%)) !default; // info 背景颜色
+$-corner-horizontal-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'light' 'dark', #ffffff #b2ebcf, 0% 100%)) !default; // success 背景颜色
+$-corner-horizontal-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'light' 'dark', #ffffff #fcedd6, 0% 100%)) !default; // warning 背景颜色
+$-corner-horizontal-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'light' 'dark', #ffffff #ffd5d8, 0% 100%)) !default; // danger 背景颜色
+
 /* toast */
 $-toast-color: var(--oxy-toast-color, $-color-white) !default; // 文字颜色
 $-toast-padding: var(--oxy-toast-padding, 16px 24px) !default; // padding
@@ -728,7 +750,7 @@ $-upload-evoke-disabled-color: var(--oxy-upload-evoke-disabled-color, rgba(0, 0,
 $-upload-close-icon-size: var(--oxy-upload-close-icon-size, 16px) !default; // 移除按钮尺寸
 $-upload-close-icon-color: var(--oxy-upload-close-icon-color, rgba(0, 0, 0, 0.65)) !default; // 移除按钮颜色
 $-upload-progress-fs: var(--oxy-upload-progress-fs, 14px) !default; // 进度文字字号
-$-upload-file-fs: var(--oxy-upload-file-fs, 12px) !default; // 文件名字号
+$-upload-file-fs: var(--oxy-upload-file-fs, 14px) !default; // 文件名字号
 $-upload-file-color: var(--oxy-upload-file-color, $-color-secondary) !default; // 文件名字颜色
 $-upload-preview-name-fs: var(--oxy-upload-preview-name-fs, 12px) !default; // 预览图片名字号
 $-upload-preview-icon-size: var(--oxy-upload-preview-icon-size, 24px) !default; // 预览内部图标尺寸
@@ -736,6 +758,9 @@ $-upload-preview-name-bg: var(--oxy-upload-preview-name-bg, rgba(0, 0, 0, 0.6))
 $-upload-preview-name-height: var(--oxy-upload-preview-name-height, 22px) !default; // 预览文件名背景高度
 $-upload-cover-icon-size: var(--oxy-upload-cover-icon-size, 22px) !default; // 视频/文件图标尺寸
 
+/* file-list */
+$-file-list-height: var(--oxy-file-list-height, 100px) !default; // 文件高度
+
 /* curtain */
 $-curtain-content-radius: var(--oxy-curtain-content-radius, 24px) !default; // 内容圆角
 $-curtain-content-close-color: var(--oxy-curtain-content-close-color, $-color-white) !default; // 关闭按钮颜色
@@ -971,4 +996,7 @@ $-signature-footer-margin-top: var(--oxy-signature-footer-margin-top, 8px) !defa
 $-signature-button-margin-left: var(--oxy-signature-button-margin-left, 8px) !default; // 底部按钮左边距
 
 
-
+/* tree */
+$-tree-node-current-bg:var(--oxy-tree-node-current-bg, var(--oxy-color-theme, #4d80ef1a));
+$-tree-node-current-color:var(--oxy-tree-node-current-color, $-text-primary-color);
+$-tree-node-disabled-color:var(--oxy-tree-node-disabled-color, $-color-icon-disabled);

package/components/common/util.ts

@@ -720,6 +720,17 @@ export function isVideoUrl(url: string): boolean {
   return videoRegex.test(url)
 }
 
+/**
+ * 检查提供的URL是否为音频文件。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是音频文件，则为true；否则为false。
+ */
+export function isAudioUrl(url: string): boolean {
+  // 使用正则表达式匹配音频文件URL
+  const audioRegex = /\.(mp3|wav|ogg|flac|aac|m4a|wma|amr|aac)(?=$|[?#])/i
+  return audioRegex.test(url)
+}
+
 /**
  * 检查提供的URL是否为图片URL。
  * @param url 待检查的URL字符串。
@@ -731,6 +742,39 @@ export function isImageUrl(url: string): boolean {
   return imageRegex.test(url)
 }
 
+/**
+ * 检查提供的URL是否为PDF文件。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是PDF文件，则为true；否则为false。
+ */
+export function isPdfUrl(url: string): boolean {
+  // 使用正则表达式匹配PDF文件URL
+  const pdfRegex = /\.(pdf)(?=$|[?#])/i
+  return pdfRegex.test(url)
+}
+
+/**
+ * 检查提供的URL是否为文档文件。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是文档文件，则为true；否则为false。
+ */
+export function isDocUrl(url: string): boolean {
+  // 使用正则表达式匹配文档文件URL
+  const docRegex = /\.(doc|docx|ppt|pptx|odt|odp|ods|odg|odf|txt|rtf|tex|wpd|wps|wp)(?=$|[?#])/i
+  return docRegex.test(url)
+}
+
+/**
+ * 检查提供的URL是否为excel文件。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是excel文件，则为true；否则为false。
+ */
+export function isExcelUrl(url: string): boolean {
+  // 使用正则表达式匹配excel文件URL
+  const excelRegex = /\.(xls|xlsx|xlsm|xlsb|xltx|xltm|xla|xlam|xll|xlw)(?=$|[?#])/i
+  return excelRegex.test(url)
+}
+
 /**
  * 判断环境是否是H5
  */

package/components/oxy-checkbox/index.scss

@@ -1,5 +1,5 @@
-@import "./../common/abstracts/_mixin.scss";
-@import "./../common/abstracts/variable.scss";
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
 
 .oxy-theme-dark {
   @include b(checkbox) {
@@ -38,7 +38,6 @@
       }
 
       @include when(button) {
-
         .oxy-checkbox__label {
           border-color: #c8c9cc;
           background: #3a3a3c;
@@ -66,7 +65,6 @@
         }
       }
     }
-
   }
 }
 
@@ -137,8 +135,35 @@
     transition: opacity 0.2s;
   }
 
+  @include edeep(indeterminate) {
+    color: $-checkbox-check-color;
+    font-size: $-checkbox-icon-size;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  @include when(indeterminate) {
+    .oxy-checkbox__shape {
+      color: $-checkbox-checked-color;
+      background: currentColor;
+      border-color: currentColor;
+    }
+
+    :deep(.oxy-checkbox__indeterminate) {
+      opacity: 1;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    :deep(.oxy-checkbox__check) {
+      display: none;
+    }
+  }
+
   @include when(checked) {
     .oxy-checkbox__shape {
+      display: inline-block;
       color: $-checkbox-checked-color;
       background: currentColor;
       border-color: currentColor;
@@ -151,8 +176,13 @@
       top: 50%;
       transform: translate(-50%, -50%);
     }
+
+    :deep(.oxy-checkbox__indeterminate) {
+      display: none;
+    }
   }
 
+
   @include when(button) {
     display: inline-block;
     margin-bottom: 0;
@@ -265,7 +295,7 @@
     }
 
     &:last-child::after {
-      content: "";
+      content: '';
       display: table;
       clear: both;
     }
@@ -282,4 +312,4 @@
       font-size: $-checkbox-large-label-fs;
     }
   }
-}
+}

package/components/oxy-checkbox/oxy-checkbox.vue

@@ -1,10 +1,10 @@
 <template>
   <view
     :class="`oxy-checkbox ${innerCell ? 'is-cell-box' : ''} ${innerShape === 'button' ? 'is-button-box' : ''} ${isChecked ? 'is-checked' : ''} ${
-      isFirst ? 'is-first-child' : ''
-    } ${isLast ? 'is-last-child' : ''} ${innerInline ? 'is-inline' : ''} ${innerShape === 'button' ? 'is-button' : ''} ${
-      innerDisabled ? 'is-disabled' : ''
-    } ${innerSize ? 'is-' + innerSize : ''} ${customClass}`"
+      indeterminate ? 'is-indeterminate' : ''
+    } ${isFirst ? 'is-first-child' : ''} ${isLast ? 'is-last-child' : ''} ${innerInline ? 'is-inline' : ''} ${
+      innerShape === 'button' ? 'is-button' : ''
+    } ${innerDisabled ? 'is-disabled' : ''} ${innerSize ? 'is-' + innerSize : ''} ${customClass}`"
     :style="customStyle"
     @click="toggle"
   >
@@ -14,6 +14,7 @@
       :class="`oxy-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
       :style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
     >
+      <oxy-icon custom-class="oxy-checkbox__indeterminate" name="decrease" />
       <oxy-icon custom-class="oxy-checkbox__check" name="check-bold" />
     </view>
     <!--shape为button时只保留oxy-checkbox__label-->

package/components/oxy-checkbox/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type CheckShape = 'circle' | 'square' | 'button'
 
@@ -15,6 +15,7 @@ export const checkboxProps = {
     required: true,
     default: false
   },
+  indeterminate: makeBooleanProp(false),
   /**
    * 单选框形状，可选值：circle / square / button
    */

package/components/oxy-col-picker/index.scss

@@ -60,9 +60,8 @@
         color: $-input-placeholder-color;
       }
     }
-  
   }
-  
+
   @include edeep(arrow) {
     display: block;
     font-size: $-cell-icon-size;
@@ -76,13 +75,13 @@
     color: $-col-picker-selected-color;
     overflow: hidden;
   }
-  
-  @include e(selected-container){
+
+  @include e(selected-container) {
     position: relative;
     display: flex;
     user-select: none;
   }
-  
+
   @include e(selected-item) {
     flex: 0 0 auto;
     height: $-col-picker-selected-height;
@@ -93,7 +92,7 @@
       font-weight: $-col-picker-selected-fw;
     }
   }
-  
+
   @include e(selected-line) {
     position: absolute;
     bottom: 5px;
@@ -105,11 +104,11 @@
     border-radius: calc($-col-picker-line-height / 2);
     box-shadow: $-col-picker-line-box-shadow;
   }
-  
-  @include e(list-container){
+
+  @include e(list-container) {
     position: relative;
   }
-  
+
   @include e(list) {
     height: $-col-picker-list-height;
     padding-bottom: $-col-picker-list-padding-bottom;
@@ -119,7 +118,7 @@
     font-size: $-col-picker-list-fs;
     -webkit-overflow-scrolling: touch;
   }
-  
+
   @include e(list-item) {
     display: flex;
     padding: $-col-picker-list-item-padding;
@@ -136,17 +135,21 @@
       color: $-col-picker-list-color-disabled;
     }
   }
-  
+
   @include e(list-item-label) {
     line-height: 1.285;
   }
-  
+
   @include e(list-item-tip) {
     margin-top: 2px;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
-  
+
+  @include e(confirm) {
+    padding: 12px 25px 14px;
+  }
+
   @include edeep(checked) {
     display: block;
     margin-left: 4px;
@@ -154,7 +157,7 @@
     color: $-col-picker-list-color-checked;
     opacity: 0;
   }
-  
+
   @include e(loading) {
     display: flex;
     position: absolute;
@@ -165,4 +168,4 @@
     align-items: center;
     justify-content: center;
   }
-}
+}

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

@@ -83,6 +83,9 @@
           </view>
         </view>
       </view>
+      <view v-if="showConfirm" class="oxy-col-picker__confirm">
+        <oxy-button block @click="handleBtnConfirm">{{ confirmText || translate('confirm') }}</oxy-button>
+      </view>
     </oxy-action-sheet>
   </view>
 </template>
@@ -102,7 +105,7 @@ import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyLoading from '../oxy-loading/oxy-loading.vue'
 import OxyActionSheet from '../oxy-action-sheet/oxy-action-sheet.vue'
 import OxyCell from '../oxy-cell/oxy-cell.vue'
-import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, reactive } from 'vue'
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, type ComponentPublicInstance, reactive } from 'vue'
 import { addUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { colPickerProps, type ColPickerExpose } from './types'
@@ -314,7 +317,7 @@ function getSelectedItem(value: string | number, colIndex: number, selectList: R
   }
 }
 
-function chooseItem(colIndex: number, index: number) {
+function chooseItem(colIndex: number, index: number, triggerColChange: boolean = true) {
   const item = selectList.value[colIndex][index]
   if (item.disabled) return
 
@@ -331,7 +334,9 @@ function chooseItem(colIndex: number, index: number) {
     updateLineAndScroll(true)
   }
 
-  handleColChange(colIndex, item, index)
+  if (triggerColChange) {
+    handleColChange(colIndex, item, index)
+  }
 }
 
 function handleColChange(colIndex: number, item: Record<string, any>, index: number, callback?: () => void) {
@@ -396,6 +401,26 @@ function handleColChange(colIndex: number, item: Record<string, any>, index: num
       }
     })
 }
+function handleBtnConfirm() {
+  const { beforeConfirm } = props
+  if (beforeConfirm) {
+    beforeConfirm(
+      pickerColSelected.value,
+      pickerColSelected.value.map((item, colIndex) => {
+        return getSelectedItem(item, colIndex, selectList.value)
+      }),
+      (isPass: boolean) => {
+        if (isPass) {
+          onConfirm()
+        } else {
+          loading.value = false
+        }
+      }
+    )
+  } else {
+    onConfirm()
+  }
+}
 function onConfirm() {
   isChange.value = false
   loading.value = false

package/components/oxy-col-picker/types.ts

@@ -100,6 +100,18 @@ export const colPickerProps = {
    * 弹窗层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * 是否显示确定按钮
+   */
+  showConfirm: makeBooleanProp(false),
+  /**
+   * 多选时，添加按钮文字
+   */
+  addText: String,
+  /**
+   * 确定按钮文字
+   */
+  confirmText: String,
   /**
    * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
    */

package/components/oxy-corner/index.scss

@@ -0,0 +1,138 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@mixin corner-type-style ($normalColor, $normalBg) {
+  background: $normalBg;
+  color: $normalColor;
+}
+@include b(corner) {
+  position: relative;
+  @include e(box) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+    @include when(primary) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-primary-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-primary-color, $-corner-horizontal-primary-bg);
+        }
+      }
+    }
+    @include when(info) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-info-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-info-color, $-corner-horizontal-info-bg);
+        }
+      }
+    }
+    @include when(success) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-success-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-success-color, $-corner-horizontal-success-bg);
+        }
+      }
+    }
+    @include when(warning) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-warning-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-warning-color, $-corner-horizontal-warning-bg);
+        }
+      }
+    }
+    @include when(danger) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-danger-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-danger-color, $-corner-horizontal-danger-bg);
+        }
+      }
+    }
+    &:not(.is-horizontal) {
+      &.is-top-left{
+        top: 0;
+        left: 0;
+        right: auto;
+        .oxy-corner__text {
+          transform: rotate(-45deg);
+          top: 10px;
+          left: -26px;
+        }
+      }
+      &.is-bottom-left{
+        bottom: 0;
+        left: 0;
+        top: auto;
+        .oxy-corner__text {
+          transform: rotate(-135deg);
+          bottom: 10px;
+          left: -26px;
+          top: auto;
+          > span{
+            transform: rotate(180deg);
+            display: inline-block;
+          }
+        }
+      }
+      &.is-bottom-right{
+        bottom: 0;
+        right: 0;
+        top: auto;
+        .oxy-corner__text {
+          transform: rotate(135deg);
+          bottom: 10px;
+          right: -26px;
+          top: auto;
+          > span{
+            transform: rotate(180deg);
+            display: inline-block;
+          }
+        }
+      }
+      .oxy-corner__text {
+        width: 106px;
+        height: 32px;
+        position: absolute;
+        right: -26px;
+        top: 10px;
+        text-align: center;
+        line-height: 32px;
+        overflow: hidden;
+        transform: rotate(45deg);
+        box-sizing: border-box;
+        white-space: nowrap;
+        text-align: center;
+        font-size: $-corner-font-size;
+        font-weight: $-corner-font-weight;
+      }
+    }
+    &.is-horizontal {
+      width: 160px;
+      height: 40px;
+      .oxy-corner__text {
+        padding-right: 20px;
+        box-sizing: border-box;
+        font-size: $-corner-horizontal-font-size;
+        font-weight: $-corner-horizontal-font-weight;
+        line-height: 40px;
+        text-align: right;
+      }
+    }
+  }
+}

package/components/oxy-corner/oxy-corner.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="oxy-corner">
+    <slot />
+    <view v-if="text || $slots.text" :class="textClass">
+      <view class="oxy-corner__text">
+        <slot name="text">
+          <span>{{ text }}</span>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-corner',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { cornerProps } from './types'
+
+const props = defineProps(cornerProps)
+
+const cornerClass = ref<string>('')
+
+watch(
+  [() => () => props.position, () => props.mode],
+  () => {
+    computeCornerClass()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.type,
+  (newValue) => {
+    if (!newValue) return
+    const type = ['primary', 'info', 'success', 'warning', 'danger']
+    if (type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
+    computeCornerClass()
+  },
+  { immediate: true }
+)
+
+const textClass = computed(() => {
+  return `oxy-corner__box ${props.customClass} ${cornerClass.value}`
+})
+
+function computeCornerClass() {
+  const { type, position, mode } = props
+  let cornerClassList: string[] = []
+  type && cornerClassList.push(`is-${type}`)
+  position && cornerClassList.push(`is-${position}`)
+  mode && cornerClassList.push(`is-${mode}`)
+  cornerClass.value = cornerClassList.join(' ')
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-corner/types.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type CornerType = 'primary' | 'info' | 'success' | 'warning' | 'danger'
+export type CornerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+export type CornerMode = '' | 'horizontal'
+
+export const cornerProps = {
+  ...baseProps,
+
+  /**
+   * 角标类型
+   * 类型：string
+   * 可选值：'primary' / 'info' / 'success' / 'warning' / 'danger'
+   * 默认值：'primary'
+   */
+  type: makeStringProp<CornerType>('primary'),
+
+  /**
+   * 角标位置
+   * 类型：string
+   * 可选值：'top-left' / 'top-right' / 'bottom-left' / 'bottom-right'
+   * 默认值：'top-right'
+   */
+  position: makeStringProp<CornerPosition>('top-right'),
+
+  /**
+   * 角标模式
+   * 类型：string
+   * 可选值：'horizontal'
+   * 默认值：''
+   */
+  mode: makeStringProp<CornerMode>(''),
+
+  /**
+   * 角标文字
+   * 类型：string
+   * 默认值：空字符串
+   */
+  text: makeStringProp('')
+}
+
+export type CornerProps = ExtractPropTypes<typeof cornerProps>