first commit

2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
--- a/uni_modules/tdesign-uniapp/components/back-top/README.en-US.md
+++ b/uni_modules/tdesign-uniapp/components/back-top/README.en-US.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+### BackTop Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+fixed | Boolean | true | \- | N
+icon | String / Boolean / Object | true | \- | N
+scroll-top | Number | 0 | \- | N
+text | String | '' | \- | N
+theme | String | round | options: round/half-round/round-dark/half-round-dark | N
+visibility-height | Number | 200 | \- | N
+
+### BackTop Events
+
+name | params | description
+-- | -- | --
+to-top | \- | \-
+
+### BackTop Slots
+
+name | Description
+-- | --
+\- | \-
+icon | \-
+
+### BackTop External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | -
+--td-back-top-round-bg-color | @bg-color-container | -
+--td-back-top-round-border-color | @component-border | -
+--td-back-top-round-border-radius | @radius-circle | -
+--td-back-top-round-color | @text-color-primary | -
+--td-back-top-round-dark-bg-color | @gray-color-13 | -
+--td-back-top-round-dark-color | @text-color-anti | -
--- a/uni_modules/tdesign-uniapp/components/back-top/README.md
+++ b/uni_modules/tdesign-uniapp/components/back-top/README.md
@@ -0,0 +1,67 @@
+---
+title: BackTop 返回顶部
+description: 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TBackTop from '@tdesign/uniapp/back-top/back-top.vue';
+```
+
+### 基础返回顶部
+
+{{ base }}
+
+## API
+
+### BackTop Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
+icon | String / Boolean / Object | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` | N
+scroll-top | Number | 0 | 页面滚动距离 | N
+text | String | '' | 文案 | N
+theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
+visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N
+
+### BackTop Events
+
+名称 | 参数 | 描述
+-- | -- | --
+to-top | \- | 点击触发
+
+### BackTop Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+icon |  自定义图标内容
+
+### BackTop External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | -
+--td-back-top-round-bg-color | @bg-color-container | -
+--td-back-top-round-border-color | @component-border | -
+--td-back-top-round-border-radius | @radius-circle | -
+--td-back-top-round-color | @text-color-primary | -
+--td-back-top-round-dark-bg-color | @gray-color-13 | -
+--td-back-top-round-dark-color | @text-color-anti | -
--- a/uni_modules/tdesign-uniapp/components/back-top/back-top.css
+++ b/uni_modules/tdesign-uniapp/components/back-top/back-top.css
@@ -0,0 +1,65 @@
+.t-back-top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: height 0.2s;
+  height: auto;
+}
+.t-back-top--fixed {
+  position: fixed;
+  right: var(--td-spacer, 16rpx);
+  bottom: calc(var(--td-spacer-2, 32rpx) + env(safe-area-inset-bottom));
+}
+.t-back-top--round,
+.t-back-top--round-dark {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: var(--td-back-top-round-border-radius, var(--td-radius-circle, 50%));
+}
+.t-back-top--round,
+.t-back-top--half-round {
+  color: var(--td-back-top-round-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  border: 1rpx solid var(--td-back-top-round-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+  background-color: var(--td-back-top-round-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-back-top--round-dark,
+.t-back-top--half-round-dark {
+  color: var(--td-back-top-round-dark-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-back-top-round-dark-bg-color, var(--td-gray-color-13, #242424));
+}
+.t-back-top--half-round,
+.t-back-top--half-round-dark {
+  width: 120rpx;
+  height: 80rpx;
+  border-radius: 0;
+  border-top-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
+  border-bottom-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
+  flex-direction: row;
+  right: 0;
+}
+.t-back-top__text--round,
+.t-back-top__text--round-dark,
+.t-back-top__text--half-round,
+.t-back-top__text--half-round-dark {
+  font-weight: 600;
+  font-size: var(--td-font-size, 20rpx);
+  line-height: 24rpx;
+}
+.t-back-top__text--half-round,
+.t-back-top__text--half-round-dark {
+  width: 48rpx;
+}
+.t-back-top__icon:not(:empty) + .t-back-top__text--half-round,
+.t-back-top__icon:not(:empty) + .t-back-top__text--half-round-dark {
+  margin-left: 8rpx;
+}
+.t-back-top__icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 44rpx;
+}
--- a/uni_modules/tdesign-uniapp/components/back-top/back-top.vue
+++ b/uni_modules/tdesign-uniapp/components/back-top/back-top.vue
@@ -0,0 +1,122 @@
+<template>
+  <view
+    v-if="!hidden"
+    :style="tools._style([customStyle])"
+    :class="tClass + ' ' + tools.cls(classPrefix, [['fixed', fixed], theme])"
+    aria-role="button"
+    @click="toTop"
+  >
+    <view
+      :class="classPrefix + '__icon'"
+      aria-hidden
+    >
+      <slot name="icon" />
+      <block
+        v-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="tClassIcon"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+          @click="_icon.click || ''"
+        />
+      </block>
+    </view>
+    <view
+      v-if="!!text"
+      :class="classPrefix + '__text--' + theme + ' ' + tClassText"
+    >
+      {{ text }}
+    </view>
+    <slot />
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-back-top`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-text`,
+  ],
+  mixins: [
+    ChildrenMixin(RELATION_MAP.BackTop),
+  ],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'to-top',
+  ],
+  watch: {
+    icon() {
+      this.setIcon();
+    },
+    scrollTop: {
+      handler(value) {
+        const { visibilityHeight } = this;
+        this.hidden = value < visibilityHeight;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    const { icon } = this;
+    this.setIcon(icon);
+  },
+  methods: {
+    setIcon(v) {
+      this._icon = calcIcon(v, 'backtop');
+    },
+
+    toTop() {
+      this.$emit('to-top');
+      if (this[RELATION_MAP.BackTop]) {
+        this[RELATION_MAP.BackTop]?.scrollToTop();
+        this.hidden = true;
+      } else {
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 300,
+        });
+      }
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _icon: null,
+      hidden: true,
+      tools,
+    };
+  },
+});
+</script>
+<style scoped>
+@import './back-top.css';
+</style>
--- a/uni_modules/tdesign-uniapp/components/back-top/props.ts
+++ b/uni_modules/tdesign-uniapp/components/back-top/props.ts
@@ -0,0 +1,48 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBackTopProps } from './type';
+export default {
+  /** 是否绝对定位固定到屏幕右下方 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` */
+  icon: {
+    type: [String, Boolean, Object],
+    default: true as TdBackTopProps['icon'],
+  },
+  /** 页面滚动距离 */
+  scrollTop: {
+    type: Number,
+    default: 0,
+  },
+  /** 文案 */
+  text: {
+    type: String,
+    default: '',
+  },
+  /** 预设的样式类型 */
+  theme: {
+    type: String,
+    default: 'round' as TdBackTopProps['theme'],
+    validator(val: TdBackTopProps['theme']): boolean {
+      if (!val) return true;
+      return ['round', 'half-round', 'round-dark', 'half-round-dark'].includes(val);
+    },
+  },
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight: {
+    type: Number,
+    default: 200,
+  },
+  /** 点击触发 */
+  onToTop: {
+    type: Function,
+    default: () => ({}),
+  },
+};
--- a/uni_modules/tdesign-uniapp/components/back-top/type.ts
+++ b/uni_modules/tdesign-uniapp/components/back-top/type.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdBackTopProps {
+  /**
+   * 是否绝对定位固定到屏幕右下方
+   * @default true
+   */
+  fixed?: boolean;
+  /**
+   * 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'`
+   * @default true
+   */
+  icon?: string | boolean | object;
+  /**
+   * 页面滚动距离
+   * @default 0
+   */
+  scrollTop?: number;
+  /**
+   * 文案
+   * @default ''
+   */
+  text?: string;
+  /**
+   * 预设的样式类型
+   * @default round
+   */
+  theme?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
+  /**
+   * 滚动高度达到此参数值才出现
+   * @default 200
+   */
+  visibilityHeight?: number;
+  /**
+   * 点击触发
+   */
+  onToTop?: () => void;
+}