refactor: 架构升级

2026-09-13 00:50:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,160 @@
+<!--
+uni-badge 数字角标组件示例
+
+官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-badge.html
+插件市场：https://ext.dcloud.net.cn/plugin?name=uni-badge
+-->
+
+<template>
+  <view class="container">
+    <uni-card is-full :is-shadow="false">
+      <text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
+    </uni-card>
+    
+    <!-- 基础用法 -->
+    <uni-section title="基础用法" type="line" padding>
+      <view class="example-body">
+        <uni-badge class="uni-badge-left-margin" text="1" />
+        <uni-badge class="uni-badge-left-margin" text="2" type="primary" />
+        <uni-badge class="uni-badge-left-margin" text="34" type="success" />
+        <uni-badge class="uni-badge-left-margin" text="45" type="warning" />
+        <uni-badge class="uni-badge-left-margin" text="123" type="info" />
+      </view>
+    </uni-section>
+    
+    <!-- 无底色 -->
+    <uni-section title="无底色" type="line" padding>
+      <view class="example-body">
+        <uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
+        <uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
+        <uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
+        <uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
+        <uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
+      </view>
+    </uni-section>
+    
+    <!-- 自定义样式 -->
+    <uni-section title="自定义样式" type="line" padding>
+      <view class="example-body">
+        <uni-badge 
+          class="uni-badge-left-margin" 
+          text="2" 
+          type="primary" 
+          :custom-style="{background: '#4335d6'}"
+        />
+        <uni-badge 
+          class="uni-badge-left-margin" 
+          text="2" 
+          type="primary" 
+          :custom-style="customStyle"
+        />
+      </view>
+    </uni-section>
+    
+    <!-- 定位: absolute 属性 -->
+    <uni-section title="定位: aboslute 属性" sub-title="注：在安卓端不支持 nvue" type="line" padding>
+      <uni-badge 
+        class="uni-badge-left-margin" 
+        :text="value" 
+        absolute="rightTop" 
+        size="small"
+      >
+        <view class="box">
+          <text class="box-text">右上</text>
+        </view>
+      </uni-badge>
+    </uni-section>
+    
+    <!-- 偏移: offset 属性(存在 aboslute) -->
+    <uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
+      <uni-badge 
+        class="uni-badge-left-margin" 
+        :text="8" 
+        absolute="rightTop" 
+        :offset="[-3, -3]" 
+        size="small"
+      >
+        <view class="box">
+          <text class="box-text">右上</text>
+        </view>
+      </uni-badge>
+    </uni-section>
+    
+    <!-- 仅显示点: is-dot 属性 -->
+    <uni-section title="仅显示点: is-dot 属性" type="line" padding>
+      <uni-badge 
+        class="uni-badge-left-margin" 
+        :is-dot="true" 
+        :text="value" 
+        absolute="rightTop" 
+        size="small"
+      >
+        <view class="box">
+          <text class="box-text">圆点</text>
+        </view>
+      </uni-badge>
+    </uni-section>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: 0,
+      customStyle: {
+        backgroundColor: '#62ed0d',
+        color: '#fff'
+      }
+    }
+  },
+  mounted() {
+    const timer = setInterval(() => {
+      if (this.value >= 199) {
+        clearInterval(timer)
+        return
+      }
+      this.value++
+    }, 100)
+  }
+}
+</script>
+
+<style lang="scss">
+/* #ifdef MP-ALIPAY */
+.uni-badge {
+  margin-left: 20rpx;
+}
+/* #endif */
+
+.example-body {
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.uni-badge-left-margin {
+  margin-left: 10px;
+}
+
+.uni-badge-absolute {
+  margin-left: 40px;
+}
+
+.box {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background-color: #DCDFE6;
+  color: #fff;
+  font-size: 12px;
+}
+
+.box-text {
+  text-align: center;
+  color: #fff;
+  font-size: 12px;
+}
+</style>