2025/2/8第一次更新

node_modules/tnuiv3p-tn-time-line/CHANGELOG.md

@@ -0,0 +1,34 @@
+### 1.0.0
+
+_2023-07-10_
+
+- 发布1.0.0版本
+
+
+### 1.0.1
+
+_2023-07-11_
+
+- 优化样式
+
+
+### 1.0.2
+
+_2023-07-13_
+
+- 兼容新版TuniaoUI库文件
+
+
+### 1.0.3
+
+_2023-07-21_
+
+- 兼容支付宝小程序
+
+### 1.0.4
+
+- 更新github地址
+
+### 1.0.5
+
+- `TnTimeLineData`新增`dot-icon`属性设置节点图标

node_modules/tnuiv3p-tn-time-line/LICENSE

@@ -0,0 +1,13 @@
+Copyright (c) 2023-present， Tuniao Technology
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

node_modules/tnuiv3p-tn-time-line/README.md

@@ -0,0 +1,190 @@
+# 图鸟 UI vue3 uniapp Plugins - 时间轴
+
+![TuniaoUI vue3 uniapp](https://resource.tuniaokj.com/images/vue3/market/vue3-banner-min.jpg 'TuniaoUI vue3 uniapp')
+
+[Tuniao UI vue3官方仓库](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)
+
+该组件用于展示与时间相关的信息，如日志、签到记录等。
+
+## 安装
+
+```bash
+npm install tnuiv3p-tn-time-line
+```
+
+## 组件位置
+
+```bash
+tnuiv3p-tn-timeline/time-line.vue
+tnuiv3p-tn-timeline/time-line-item.vue
+tnuiv3p-tn-timeline/time-line-data.vue
+```
+
+## 平台差异说明
+
+| App(vue) | H5  | 微信小程序 | 支付宝小程序 |  ...   |
+| :------: | :-: | :--------: | :----------: | :----: |
+|    √     |  √  |     √      |      √       | 适配中 |
+
+## 基础使用
+
+在`TnTimeLineData`组件中自定义当前事件节点的内容，节点的内容放在默认的插槽中
+
+使用`TnTimeLineItem`包裹`TnTimeLineData`组件，该组件可以设置大节点的标题信息，也可以通过`slot="title"`插槽自定义标题内容
+
+使用`TnTimeLine`包裹着全部`TnTimeLineItem`节点
+
+```vue
+<script setup lang="ts">
+import TnTimeLine from 'tnuiv3p-tn-time-line/time-line.vue'
+import TnTimeLineItem from 'tnuiv3p-tn-time-line/time-line-item.vue'
+import TnTimeLineData from 'tnuiv3p-tn-time-line/time-line-data.vue'
+
+interface TimeLineDataItem {
+  date?: string
+  version?: string
+  content: string
+}
+
+interface TimeLineData {
+  month: string
+  icon?: string
+  data: TimeLineDataItem[]
+}
+
+// 时间轴数据
+const timeLineData: TimeLineData[] = [
+  {
+    month: '2023-07',
+    icon: 'moments',
+    data: [
+      {
+        date: '1',
+        version: '1.0.0',
+        content:
+          '图鸟科技，图鸟UI vue3 uniapp版本全新发布，欢迎各位开发者进行使用',
+      },
+      {
+        content:
+          '图鸟科技，图鸟UI vue3 uniapp版本全新发布，欢迎各位开发者进行使用',
+      },
+    ],
+  },
+  {
+    month: '2023-08',
+    icon: 'creative',
+    data: [
+      {
+        content:
+          '图鸟科技，图鸟UI vue3 uniapp版本全新发布，欢迎各位开发者进行使用',
+      },
+      {
+        date: '2',
+        version: '1.0.0',
+        content:
+          '图鸟科技，图鸟UI vue3 uniapp版本全新发布，欢迎各位开发者进行使用',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <view class="content">
+    <TnTimeLine>
+      <TnTimeLineItem
+        v-for="(item, index) in timeLineData"
+        :key="index"
+        :title="item.month"
+        :title-icon="item.icon !== undefined ? item.icon : ''"
+      >
+        <TnTimeLineData
+          v-for="(dataItem, dataIndex) in item.data"
+          :key="dataIndex"
+        >
+          <view
+            v-if="dataItem?.date"
+            class="time-line__title tn-flex justify-between items-center tn-gray-dark_text"
+          >
+            <view class="date">{{ dataItem?.date || '' }}</view>
+            <view class="version">{{ dataItem?.version || '' }}</view>
+          </view>
+          <view class="time-line__data">
+            {{ dataItem.content }}
+          </view>
+        </TnTimeLineData>
+      </TnTimeLineItem>
+    </TnTimeLine>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  position: relative;
+  width: 100%;
+  padding: 30rpx;
+
+  .time-line {
+    &__title {
+      font-size: 32rpx;
+      margin-bottom: 20rpx;
+    }
+  }
+}
+</style>
+```
+
+## API
+
+### TnTimeLine Props
+
+| 属性名    | 说明     | 类型    | 默认值 | 可选值  |
+| --------- | -------- | ------- | ------ | ------- |
+| show-line | 显示竖线 | Boolean | `true` | `false` |
+
+### TnTimeLine Slots
+
+| 插槽名  | 说明     | 子标签         |
+| ------- | -------- | -------------- |
+| default | 时间节点 | TnTimeLineItem |
+
+### TnTimeLineItem Props
+
+| 属性名         | 说明                                                                                                                  | 类型   | 默认值 | 可选值                                                            |
+| -------------- | --------------------------------------------------------------------------------------------------------------------- | ------ | ------ | ----------------------------------------------------------------- |
+| title          | 标题                                                                                                                  | String | -      | -                                                                 |
+| title-icon     | 标题icon                                                                                                              | String | -      | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
+| dot-bg-color   | 左边小点背景，可以使用图鸟内置的[背景色](https://vue3.tuniaokj.com/zh-CN/guide/style/background.html)、hex、rgb、rgba | String | -      | -                                                                 |
+| dot-text-color | 左边小点字体颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba       | String | -      | -                                                                 |
+
+### TnTimeLineItem Emits
+
+| 事件名 | 说明         | 类型         |
+| ------ | ------------ | ------------ |
+| click  | item点击事件 | `() => void` |
+
+### TnTimeLineItem Slots
+
+| 插槽名  | 说明           | 子标签         |
+| ------- | -------------- | -------------- |
+| default | 时间节点数据   | TnTimeLineData |
+| title   | 自定义标题数据 | -              |
+
+### TnTimeLineData Props
+
+| 属性名    | 说明                                                                                                          | 类型   | 默认值      | 可选值                                                            |
+| --------- | ------------------------------------------------------------------------------------------------------------- | ------ | ----------- | ----------------------------------------------------------------- |
+| dot-icon  | 节点图标                                                                                                      | String | circle-fill | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
+| dot-color | 左边节点点颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba | String | -           | -                                                                 |
+
+### TnTimeLineItem Emits
+
+| 事件名 | 说明             | 类型         |
+| ------ | ---------------- | ------------ |
+| click  | itemData点击事件 | `() => void` |
+
+### TnTimeLineItem Slots
+
+| 插槽名  | 说明             |
+| ------- | ---------------- |
+| default | 时间节点数据内容 |

node_modules/tnuiv3p-tn-time-line/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './time-line-item-custom'
+export * from './time-line-data-custom'

node_modules/tnuiv3p-tn-time-line/composables/time-line-data-custom.ts

@@ -0,0 +1,41 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '@tuniao/tnui-vue3-uniapp/hooks'
+
+import type { CSSProperties } from 'vue'
+import type { TimeLineDataProps } from '../time-line-data'
+
+export const useTimeLineDataCustomStyle = (props: TimeLineDataProps) => {
+  const ns = useNamespace('time-line-data')
+
+  // 解析颜色
+  const [dotColorClass, dotColorStyle] = useComponentColor(
+    toRef(props, 'dotColor'),
+    'text'
+  )
+
+  // dot对应的类
+  const dotClass = computed<string>(() => {
+    const cls: string[] = []
+
+    if (dotColorClass.value) cls.push(dotColorClass.value)
+
+    return cls.join(' ')
+  })
+
+  // dot样式
+  const dotStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (!dotColorClass.value) {
+      style.color = dotColorStyle.value || 'var(--tn-color-red)'
+    }
+
+    return style
+  })
+
+  return {
+    ns,
+    dotClass,
+    dotStyle,
+  }
+}

node_modules/tnuiv3p-tn-time-line/composables/time-line-item-custom.ts

@@ -0,0 +1,52 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '@tuniao/tnui-vue3-uniapp/hooks'
+
+import type { CSSProperties } from 'vue'
+import type { TimeLineItemProps } from '../time-line-item'
+
+export const useTimeLineCustomStyle = (props: TimeLineItemProps) => {
+  const ns = useNamespace('time-line-item')
+
+  // 解析颜色
+  const [dotBgColorClass, dotBgColorStyle] = useComponentColor(
+    toRef(props, 'dotBgColor'),
+    'bg'
+  )
+  const [dotTextColorClass, dotTextColorStyle] = useComponentColor(
+    toRef(props, 'dotTextColor'),
+    'text'
+  )
+
+  // dot对应的类
+  const dotClass = computed<string>(() => {
+    const cls: string[] = []
+
+    if (dotBgColorClass.value) cls.push(dotBgColorClass.value)
+    if (dotTextColorClass.value) cls.push(dotTextColorClass.value)
+
+    return cls.join(' ')
+  })
+
+  // dot样式
+  const dotStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (!dotBgColorClass.value) {
+      style.backgroundColor = dotBgColorStyle.value || 'var(--tn-color-blue)'
+    }
+
+    if (dotTextColorStyle.value) {
+      style.color = dotTextColorStyle.value
+    } else if (!dotBgColorClass.value && !dotTextColorClass.value) {
+      style.color = '#fff'
+    }
+
+    return style
+  })
+
+  return {
+    ns,
+    dotClass,
+    dotStyle,
+  }
+}

node_modules/tnuiv3p-tn-time-line/index.ts

@@ -0,0 +1,20 @@
+import { withInstall, withNoopInstall } from '@tuniao/tnui-vue3-uniapp/utils'
+import TimeLine from './time-line.vue'
+import TimeLineItem from './time-line-item.vue'
+import TimeLineData from './time-line-data.vue'
+
+const TnTimeLine = withInstall(TimeLine, { TimeLineItem })
+export default TnTimeLine
+
+export const TnTimeLineItem = withInstall(TimeLineItem, { TimeLineData })
+export const TnTimelineData = withNoopInstall(TimeLineData)
+
+export * from './time-line'
+export * from './time-line-item'
+export * from './time-line-data'
+
+export type {
+  TnTimeLineInstance,
+  TnTimeLineItemInstance,
+  TnTimeLineDataInstance,
+} from './instance'

node_modules/tnuiv3p-tn-time-line/instance.ts

@@ -0,0 +1,7 @@
+import type TimeLine from './time-line.vue'
+import type TimeLineItem from './time-line-item.vue'
+import type TimeLineData from './time-line-data.vue'
+
+export type TnTimeLineInstance = InstanceType<typeof TimeLine>
+export type TnTimeLineItemInstance = InstanceType<typeof TimeLineItem>
+export type TnTimeLineDataInstance = InstanceType<typeof TimeLineData>

node_modules/tnuiv3p-tn-time-line/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "tnuiv3p-tn-time-line",
+  "version": "1.0.5",
+  "description": "TuniaoUI vue3 uniapp 插件",
+  "keywords": [
+    "tn",
+    "tuniao",
+    "tuniao-ui",
+    "图鸟",
+    "uniapp",
+    "uniapp插件"
+  ],
+  "license": "Apache 2.0",
+  "author": "Tuniao Technology Co., Ltd.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HighSpecific/tnuiv3p-time-line"
+  },
+  "bugs": {
+    "url": "https://github.com/HighSpecific/tnuiv3p-time-line/issues"
+  },
+  "peerDependencies": {
+    "@tuniao/tn-icon": "^1.4.0",
+    "@tuniao/tn-style": "^1.0.17",
+    "@tuniao/tnui-vue3-uniapp": "^1.0.5",
+    "sass": "^1.61.0",
+    "typescript": "^5.1.6",
+    "vue": "^3.2.47"
+  },
+  "gitHead": ""
+}

node_modules/tnuiv3p-tn-time-line/theme-chalk/mixins/config.scss

@@ -0,0 +1,5 @@
+$namespace: 'tn' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;

node_modules/tnuiv3p-tn-time-line/theme-chalk/mixins/function.scss

@@ -0,0 +1,105 @@
+@use 'config';
+
+// BEM support Func
+// 块（Block）：代表一个独立的组件或页面中的一个大型部分。块可以看作是一个命名空间，用于包含相关元素和修饰符。例如，一个导航栏可以被视为一个块。
+// 元素（Element）：代表块的一部分，但不能独立存在。元素总是属于一个块，并且与该块紧密相关。元素由块名称和元素名称组成，中间由双下划线（__）连接。例如，一个导航栏可以包含多个链接，链接可以被视为导航栏块的元素。
+// 修饰符（Modifier）：代表块或元素的变体或状态。修饰符用于修改块或元素的外观或行为。修饰符由块名称或元素名称，连字符（-）和修饰符名称组成。例如，一个导航栏可以具有活动状态或浅色主题，这些状态可以通过添加修饰符类进行实现。
+
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str_index($selector, config.$modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + config.$state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector);
+}
+
+// join var name
+// joinVarName(('button', 'text-color')) => '--tn-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--tn-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--tn-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+// getCssVarWithDefault('button', 'text-color', 'red') => var(--tn-button-text-color, red)
+@function getCssVarWithDefault($args, $default) {
+  @return var(#{joinVarName($args)}, #{$default});
+}
+
+// bem('block', 'element', ''modifier) => 'tn-block__element--modifier'
+@function bem($block, $element: '', $modifier: '') {
+  $name: config.$namespace + config.$common-separator + $block;
+
+  @if $element != '' {
+    $name: $name + config.$element-separator + $element;
+  }
+
+  @if $modifier != '' {
+    $name: $name + config.$modifier-separator + $modifier;
+  }
+
+  @return $name;
+}
+
+// 字符串替换
+@function str-replace($string, $search, $replace) {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}

node_modules/tnuiv3p-tn-time-line/theme-chalk/mixins/mixins.scss

@@ -0,0 +1,134 @@
+@use 'function' as *;
+// forward mixins
+@forward 'config';
+@forward 'function';
+
+@use 'config' as *;
+
+// BEM
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector +
+      '.' +
+      $B +
+      $element-separator +
+      $unit +
+      ','};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector +
+      $selector +
+      $modifier-separator +
+      $unit +
+      ','};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+  $selector: &;
+  $interpolation: '';
+
+  @if $E-flag {
+    $interpolation: $element-separator + $E-flag;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$B + $interpolation + $modifier-separator + $modifier} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin spec-selector(
+  $specSelector: '',
+  $element: $E,
+  $modifier: false,
+  $block: $B
+) {
+  $modifierCombo: '';
+  $elementCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+  @if $element {
+    $elementCombo: $element-separator + $element;
+  }
+
+  @at-root {
+    #{&}#{$specSelector}.#{$block + $elementCombo + $modifierCombo} {
+      @content;
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block + $element-separator + $element + $modifierCombo} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content;
+  }
+}

node_modules/tnuiv3p-tn-time-line/theme-chalk/time-line-data.scss

@@ -0,0 +1,44 @@
+@use './mixins/mixins.scss' as *;
+@use './variables.scss' as *;
+
+@include b(time-line-data) {
+  position: relative;
+  width: 100%;
+  display: flex;
+  margin-top: 30rpx;
+
+  @include when(line) {
+    &::before {
+      content: ' ';
+      position: absolute;
+      left: calc(#{$itemDotWidth} / 2);
+      top: $itemDotWidth;
+      width: 2rpx;
+      height: calc(100% - (#{$itemDotWidth} / 2));
+      background-color: $lineColor;
+      // background-color: red;
+      transform: translateX(-50%);
+    }
+    &:last-of-type {
+      &::before {
+        height: calc(100% - #{$itemDotWidth} * 2 / 3);
+      }
+    }
+  }
+
+  @include e(dot) {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: $itemDotWidth;
+    height: $itemDotWidth;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e(content) {
+    flex-grow: 1;
+    margin-top: 6rpx;
+    padding-left: $dotDataSpacing;
+  }
+}

node_modules/tnuiv3p-tn-time-line/theme-chalk/time-line-item.scss

@@ -0,0 +1,58 @@
+@use './mixins/mixins.scss' as *;
+@use './mixins/config.scss' as *;
+@use './variables.scss' as *;
+
+@include b(time-line-item) {
+  position: relative;
+  width: 100%;
+  margin-top: 30rpx;
+
+  &:first-of-type {
+    margin-top: 0rpx;
+  }
+
+  /* 标题点 start */
+  @include e(title) {
+    position: relative;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+
+    @include m(dot) {
+      position: relative;
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: $itemDotWidth;
+      height: $itemDotWidth;
+      font-size: $itemDotFontSize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      line-height: 1;
+
+      @include when(line) {
+        &::before {
+          content: '';
+          position: absolute;
+          left: 50%;
+          bottom: -30rpx;
+          width: 2rpx;
+          height: 30rpx;
+          background-color: $lineColor;
+          transform: translate(-50%, calc(50% - 8rpx));
+        }
+      }
+    }
+
+    @include m(data) {
+      flex-grow: 1;
+      font-size: 36rpx;
+      color: var(--tn-color-gray);
+      padding-left: $dotDataSpacing;
+      line-height: 1;
+    }
+  }
+  /* 标题点 end */
+}

node_modules/tnuiv3p-tn-time-line/theme-chalk/time-line.scss

@@ -0,0 +1,6 @@
+@use './mixins/mixins.scss' as *;
+
+@include b(time-line) {
+  position: relative;
+  width: 100%;
+}

node_modules/tnuiv3p-tn-time-line/theme-chalk/variables.scss

@@ -0,0 +1,6 @@
+$itemDotWidth: 50rpx;
+$itemDotFontSize: 34rpx;
+
+$dotDataSpacing: 30rpx;
+
+$lineColor: var(--tn-color-gray-disabled);

node_modules/tnuiv3p-tn-time-line/time-line-data.ts

@@ -0,0 +1,28 @@
+import { buildProps } from '@tuniao/tnui-vue3-uniapp/utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const timeLineDataProps = buildProps({
+  /**
+   * @description 节点图标
+   */
+  dotIcon: {
+    type: String,
+    default: 'circle-fill'
+  },
+  /**
+   * @description 节点颜色
+   */
+  dotColor: String,
+})
+
+export const timeLineDataEmits = {
+  /**
+   * @description 点击事件
+   */
+  click: () => true,
+}
+
+export type TimeLineDataProps = ExtractPropTypes<typeof timeLineDataProps>
+
+export type TimeLineDataEmits = typeof timeLineDataEmits

node_modules/tnuiv3p-tn-time-line/time-line-data.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
+import { timeLineKey } from './tokens'
+import { timeLineDataEmits, timeLineDataProps } from './time-line-data'
+import { useTimeLineDataCustomStyle } from './composables'
+
+const props = defineProps(timeLineDataProps)
+const emits = defineEmits(timeLineDataEmits)
+
+const timeLineContext = inject(timeLineKey, undefined)
+
+const showLine = computed<boolean>(() =>
+  timeLineContext?.showLine.value === undefined
+    ? true
+    : timeLineContext?.showLine.value
+)
+
+const { ns, dotClass, dotStyle } = useTimeLineDataCustomStyle(props)
+
+// 点击事件
+const clickHandle = () => {
+  emits('click')
+}
+</script>
+
+// #ifdef MP-WEIXIN
+<script lang="ts">
+export default {
+  options: {
+    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    virtualHost: true,
+  },
+}
+</script>
+// #endif
+
+<template>
+  <view :class="[ns.b(), ns.is('line', showLine)]" @tap.stop="clickHandle">
+    <view :class="[ns.e('dot'), dotClass]" :style="dotStyle">
+      <TnIcon :name="dotIcon" />
+    </view>
+    <view :class="[ns.e('content')]">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './theme-chalk/time-line-data.scss';
+</style>

node_modules/tnuiv3p-tn-time-line/time-line-item.ts

@@ -0,0 +1,33 @@
+import { buildProps } from '@tuniao/tnui-vue3-uniapp/utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const timeLineItemProps = buildProps({
+  /**
+   * @description 标题
+   */
+  title: String,
+  /**
+   * @description 标题icon
+   */
+  titleIcon: String,
+  /**
+   * @description 节点背景
+   */
+  dotBgColor: String,
+  /**
+   * @description 节点字体颜色
+   */
+  dotTextColor: String,
+})
+
+export const timeLineItemEmits = {
+  /**
+   * @description 点击事件
+   */
+  click: () => true,
+}
+
+export type TimeLineItemProps = ExtractPropTypes<typeof timeLineItemProps>
+
+export type TimeLineItemEmits = typeof timeLineItemEmits

node_modules/tnuiv3p-tn-time-line/time-line-item.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
+import { timeLineKey } from './tokens'
+import { timeLineItemEmits, timeLineItemProps } from './time-line-item'
+import { useTimeLineCustomStyle } from './composables'
+
+const props = defineProps(timeLineItemProps)
+const emits = defineEmits(timeLineItemEmits)
+
+const timeLineContext = inject(timeLineKey, undefined)
+
+const showLine = computed<boolean>(() =>
+  timeLineContext?.showLine.value === undefined
+    ? true
+    : timeLineContext?.showLine.value
+)
+
+const { ns, dotClass, dotStyle } = useTimeLineCustomStyle(props)
+
+// 点击事件
+const clickHandle = () => {
+  emits('click')
+}
+</script>
+
+// #ifdef MP-WEIXIN
+<script lang="ts">
+export default {
+  options: {
+    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    virtualHost: true,
+  },
+}
+</script>
+// #endif
+
+<template>
+  <view :class="[ns.b()]">
+    <view :class="[ns.e('title')]" @tap.stop="clickHandle">
+      <view
+        :class="[ns.em('title', 'dot'), dotClass, ns.is('line', showLine)]"
+        :style="dotStyle"
+      >
+        <TnIcon v-if="titleIcon" :name="titleIcon" />
+      </view>
+      <view :class="[ns.em('title', 'data')]">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </view>
+    </view>
+    <view :class="[ns.e('data')]">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './theme-chalk/time-line-item.scss';
+</style>

node_modules/tnuiv3p-tn-time-line/time-line.ts

@@ -0,0 +1,15 @@
+import { buildProps } from '@tuniao/tnui-vue3-uniapp/utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const timeLineProps = buildProps({
+  /**
+   * @description 显示竖线
+   */
+  showLine: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+export type TimeLineProps = ExtractPropTypes<typeof timeLineProps>

node_modules/tnuiv3p-tn-time-line/time-line.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { provide, toRef } from 'vue'
+import { useNamespace } from '@tuniao/tnui-vue3-uniapp/hooks'
+import { timeLineKey } from './tokens'
+import { timeLineProps } from './time-line'
+
+const props = defineProps(timeLineProps)
+
+const ns = useNamespace('time-line')
+
+provide(timeLineKey, {
+  showLine: toRef(props, 'showLine'),
+})
+</script>
+
+<template>
+  <view :class="[ns.b()]">
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import './theme-chalk/time-line.scss';
+</style>

node_modules/tnuiv3p-tn-time-line/tokens/index.ts

@@ -0,0 +1 @@
+export * from './time-line'

node_modules/tnuiv3p-tn-time-line/tokens/time-line.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export type TimeLineContext = {
+  showLine: Ref<boolean>
+}
+
+export const timeLineKey: InjectionKey<TimeLineContext> = Symbol('timeLineKey')