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/side-bar/README.en-US.md
+++ b/uni_modules/tdesign-uniapp/components/side-bar/README.en-US.md
@@ -0,0 +1,58 @@
+:: BASE_DOC ::
+
+## API
+
+### SideBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+value | String / Number | - | `v-model:value` is supported | N
+default-value | String / Number | - | uncontrolled property | N
+
+### SideBar Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: number \| string, label: string })` | \-
+click | `(context: { value: number \| string; label: string })` | \-
+
+### SideBar Slots
+
+name | Description
+-- | --
+\- | \-
+
+
+### SideBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/side-bar-item/type.ts) | N
+disabled | Boolean | false | \- | N
+icon | String / Object | - | \- | N
+label | String | - | \- | N
+value | String / Number | - | \- | N
+
+### SideBarItem Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-side-bar-bg-color | @bg-color-secondarycontainer | -
+--td-side-bar-height | 100% | -
+--td-side-bar-width | 206rpx | -
+--td-side-bar-active-color | @brand-color | -
+--td-side-bar-border-radius | 18rpx | -
+--td-side-bar-color | @text-color-primary | -
+--td-side-bar-disabled-color | @text-color-disabled | -
+--td-side-bar-font | @font-body-large | -
+--td-side-bar-icon-size | 40rpx | -
+--td-side-bar-item-height | auto | -
--- a/uni_modules/tdesign-uniapp/components/side-bar/README.md
+++ b/uni_modules/tdesign-uniapp/components/side-bar/README.md
@@ -0,0 +1,89 @@
+---
+title: SideBar 侧边栏
+description: 用于信息分类后的展示切换或锚点，位于页面左侧。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSideBar from '@tdesign/uniapp/side-bar/side-bar.vue';
+import TSideBarItem from '@tdesign/uniapp/side-bar-item/side-bar-item.vue';
+```
+
+### 锚点用法
+
+{{ base }}
+
+### 切页用法
+
+{{ switch }}
+
+### 带图标侧边导航
+
+{{ with-icon }}
+
+### 自定义样式
+
+{{ custom }}
+
+## API
+
+### SideBar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+value | String / Number | - | 选项值。支持语法糖 `v-model:value` | N
+default-value | String / Number | - | 选项值。非受控属性 | N
+
+### SideBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: number \| string, label: string })` | 选项值发生变化时触发
+click | `(context: { value: number \| string; label: string })` | 点击选项时触发
+
+### SideBar Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义侧边导航栏内容
+
+
+### SideBarItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+badge-props | Object | - | 透传至 Badge 组件。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/side-bar-item/type.ts) | N
+disabled | Boolean | false | 是否禁用 | N
+icon | String / Object | - | 图标，传对象则透传至 Icon | N
+label | String | - | 展示的标签 | N
+value | String / Number | - | 当前选项的值 | N
+
+### SideBarItem Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义侧边导航项内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-side-bar-bg-color | @bg-color-secondarycontainer | -
+--td-side-bar-height | 100% | -
+--td-side-bar-width | 206rpx | -
+--td-side-bar-active-color | @brand-color | -
+--td-side-bar-border-radius | 18rpx | -
+--td-side-bar-color | @text-color-primary | -
+--td-side-bar-disabled-color | @text-color-disabled | -
+--td-side-bar-font | @font-body-large | -
+--td-side-bar-icon-size | 40rpx | -
+--td-side-bar-item-height | auto | -
--- a/uni_modules/tdesign-uniapp/components/side-bar/props.ts
+++ b/uni_modules/tdesign-uniapp/components/side-bar/props.ts
@@ -0,0 +1,26 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 选项值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 选项值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 选项值发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击选项时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
--- a/uni_modules/tdesign-uniapp/components/side-bar/side-bar-item-props.ts
+++ b/uni_modules/tdesign-uniapp/components/side-bar/side-bar-item-props.ts
@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 透传至 Badge 组件 */
+  badgeProps: {
+    type: Object,
+  },
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 图标，传对象则透传至 Icon */
+  icon: {
+    type: [String, Object],
+  },
+  /** 展示的标签 */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** 当前选项的值 */
+  value: {
+    type: [String, Number],
+  },
+};
--- a/uni_modules/tdesign-uniapp/components/side-bar/side-bar.css
+++ b/uni_modules/tdesign-uniapp/components/side-bar/side-bar.css
@@ -0,0 +1,14 @@
+.t-side-bar {
+  display: flex;
+  flex-direction: column;
+  width: var(--td-side-bar-width, 206rpx);
+  height: var(--td-side-bar-height, 100%);
+  overflow-y: auto;
+}
+.t-side-bar::-webkit-scrollbar {
+  display: none;
+}
+.t-side-bar__padding {
+  flex: 1;
+  background-color: var(--td-side-bar-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
--- a/uni_modules/tdesign-uniapp/components/side-bar/side-bar.vue
+++ b/uni_modules/tdesign-uniapp/components/side-bar/side-bar.vue
@@ -0,0 +1,84 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="tools._style([customStyle])"
+  >
+    <slot />
+    <view :class="classPrefix + '__padding'" />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import tools from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-side-bar`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.SideBarItem)],
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+    'change',
+  ],
+  data() {
+    return {
+      classPrefix: name,
+      prefix,
+      tools,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(e) {
+        this.dataValue = e;
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler(v) {
+        const sideBarItems = this.children || [];
+        sideBarItems.forEach((item, index) => {
+          item.updateActive(v);
+          item.isFirstChild = index === 0;
+          item.isLastChild = index === sideBarItems.length - 1;
+        });
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    innerAfterUnLinked(child) {
+      const index = this.children.findIndex(item => item === child);
+      this.children.splice(index, 1);
+    },
+    doChange({ value, label }) {
+      this._trigger('change', { value, label });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './side-bar.css';
+</style>
--- a/uni_modules/tdesign-uniapp/components/side-bar/type.ts
+++ b/uni_modules/tdesign-uniapp/components/side-bar/type.ts
@@ -0,0 +1,24 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSideBarProps {
+  /**
+   * 选项值
+   */
+  value?: string | number;
+  /**
+   * 选项值，非受控属性
+   */
+  defaultValue?: string | number;
+  /**
+   * 选项值发生变化时触发
+   */
+  onChange?: (context: { value: number | string; label: string }) => void;
+  /**
+   * 点击选项时触发
+   */
+  onClick?: (context: { value: number | string; label: string }) => void;
+}