first submit

src/components/HeadTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="head-title">
+    {{ title }}
+    <div v-if="subTitle" class="sub-title">{{ subTitle }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.head-title {
+  padding-top: 20rpx;
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #3D3D3D;
+  line-height: 44rpx;
+
+  .sub-title {
+    margin: 8rpx 0 4rpx;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #999999;
+    line-height: 28rpx;
+  }
+}
+</style>

src/components/HomeContainer.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="home-container" :style="customHomeStyle" ref="containerRef">
+    <div class="container" :style="customStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    customHomeStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      scrollTimer: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.addScrollListener()
+    })
+  },
+  beforeDestroy() {
+    this.removeScrollListener()
+  },
+  methods: {
+    addScrollListener() {
+      const container = this.$refs.containerRef
+      if (container) {
+        container.addEventListener('scroll', this.handleScroll)
+      }
+    },
+    removeScrollListener() {
+      const container = this.$refs.containerRef
+      if (container) {
+        container.removeEventListener('scroll', this.handleScroll)
+      }
+      if (this.scrollTimer) {
+        clearTimeout(this.scrollTimer)
+      }
+    },
+    handleScroll() {
+      // 触发滚动事件
+      this.$emit('scroll')
+      
+      // 清除之前的定时器
+      if (this.scrollTimer) {
+        clearTimeout(this.scrollTimer)
+      }
+      
+      // 设置新的定时器，停止滚动后触发停止事件
+      this.scrollTimer = setTimeout(() => {
+        this.$emit('scroll-end')
+      }, 200)
+    },
+    
+    // 滚动到顶部方法
+    scrollToTop() {
+      const container = this.$refs.containerRef
+      if (container) {
+        container.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  height: 100%;
+  overflow: auto;
+  background: #FFFFFF;
+
+  .container {
+    width: 100%;
+    padding: 20rpx;
+    min-height: calc(100vh - 80rpx);
+    overflow: auto;
+    box-sizing: border-box;
+    background: url("../static/images/home-bg.png") no-repeat;
+    background-size: 100% auto;
+    
+  }
+}
+</style>

src/components/UserInfo.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div class="user-info">
+      亲爱的，{{ name }}
+    </div>
+
+    <div v-if="subTitle || $scopedSlots.default" class="sub-title">
+      <slot>{{ subTitle }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import userIcon from "@/static/images/user-icon.png";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    subTitle: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      userIcon,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.user-info {
+  padding: 4rpx 0 4rpx 130rpx;
+  font-weight: 400;
+  font-size: 48rpx;
+  color: #FFFFFF;
+  background: url("../static/images/user-icon.png") no-repeat;
+  background-size: auto 100%;
+}
+
+.sub-title {
+  padding: 28rpx 0;
+  font-weight: 400;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 40rpx;
+}
+</style>

src/components/approve-history/approve-history.vue

@@ -0,0 +1,149 @@
+<template>
+  <view class="approval-history">
+    <view v-for="(item, index) in historyList" :key="index" class="approval-item">
+      <view class="timeline">
+        <view class="circle" :class="{ 'circle-submit': item.action !== 'PENDING' }"></view>
+        <view class="line" v-if="index < historyList.length - 1" :class="{ 'line-submit': item.action !== 'PENDING' }">
+        </view>
+      </view>
+      <view class="content">
+        <view class="header">
+          <text class="name">{{ item.operatorName }}</text>
+          <text class="date">{{ item.operationTime }}</text>
+        </view>
+        <view v-if="item.comment" class="approval-content">{{ item.action === 'REJECT' ? `审批驳回：${item.comment}`
+          : `${item.comment}` }}</view>
+      </view>
+    </view>
+
+    <!-- 空状态 -->
+    <view v-if="historyList.length === 0" class="empty-state">
+      <text class="empty-text">暂无审批记录</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ApproveHistory',
+  props: {
+    // 审批历史数据列表
+    historyList: {
+      type: Array,
+      default: () => []
+    },
+    // 是否显示空状态
+    showEmpty: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    // 格式化后的历史数据
+    formattedHistory() {
+      return this.historyList.map(item => ({
+        operatorName: item.operatorName || '未知用户',
+        operationTime: item.operationTime || '',
+        comment: item.comment || '',
+        status: item.status || '',
+        nodeName: item.nodeName || ''
+      }))
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.approval-history {
+  padding: 15px;
+
+  .approval-item {
+    display: flex;
+    margin-bottom: 1rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .timeline {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-right: 12px;
+
+      .circle {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: #409EFF;
+        border: 2px solid #fff;
+        box-shadow: 0 0 0 2px #409EFF;
+      }
+
+      .circle-submit {
+        background-color: #909399 !important;
+        box-shadow: 0 0 0 2px #909399 !important;
+      }
+
+      .line {
+        width: 2px;
+        flex: 1;
+        background-color: #409EFF;
+        margin-top: 4px;
+      }
+
+      .line-submit {
+        background-color: #909399 !important;
+      }
+    }
+
+    .content {
+      flex: 1;
+      position: relative;
+      bottom: 8rpx;
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .name {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+        }
+
+        .date {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+
+      .approval-content {
+        font-size: 13px;
+        color: #666;
+        border: 1px solid #DDDDDD;
+        line-height: 1.5;
+        background-color: #f8f9fa;
+        padding: 10px;
+        border-radius: 6px;
+      }
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 40px 0;
+
+    .empty-text {
+      font-size: 14px;
+      color: #999;
+    }
+  }
+}
+</style>

src/components/custom-tabbar.vue

@@ -0,0 +1,150 @@
+<template>
+  <view class="custom-tabbar">
+    <view v-for="(item, index) in list" :key="index" @click="switchTab(item)" class="tabbar-item">
+      <image :src="currentPage === item.pagePath ? item.selectedIconPath : item.iconPath"
+        style="width: 24px; height: 24px;" />
+      <text style="font-size: 12px; margin-top: 4px;">{{ item.text }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          pagePath: "pages/home/index",
+          iconPath: "/static/images/tabbar/home.png",
+          selectedIconPath: "/static/images/tabbar/home_.png",
+          text: "首页"
+        },
+        {
+          pagePath: "pages/myToDoList/index",
+          iconPath: "/static/images/tabbar/message.png",
+          selectedIconPath: "/static/images/tabbar/message_.png",
+          text: "消息"
+        },
+        {
+          pagePath: "pages/work/index",
+          iconPath: "/static/images/tabbar/work.png",
+          selectedIconPath: "/static/images/tabbar/work_.png",
+          text: "工作台"
+        },
+        {
+          pagePath: "pages/mine/index",
+          iconPath: "/static/images/tabbar/mine.png",
+          selectedIconPath: "/static/images/tabbar/mine_.png",
+          text: "我的"
+        }
+      ],
+      currentPage: ""
+    };
+  },
+  mounted() {
+    this.updateCurrentPage();
+  },
+  methods: {
+    switchTab(item) {
+      uni.switchTab({
+        url: `/${item.pagePath}` // 确保路径以 "/" 开头
+      });
+    },
+    updateCurrentPage() {
+      const pages = getCurrentPages();
+      if (pages.length > 0) {
+        let route = pages[pages.length - 1].route;
+        // 统一路径格式（如去掉 "/" 前缀）
+        this.currentPage = route.startsWith('/') ? route.substring(1) : route;
+      }
+    },
+    
+    // 获取未读消息数量
+    async getUnreadMessageCount() {
+      try {
+        // 这里需要调用实际的获取未读消息数量的接口
+        // 示例接口：假设是获取待办列表的接口
+        const { listCheckPendingTasks } = require('@/api/myToDoList/myToDoList.js');
+        const response = await listCheckPendingTasks({ pageNum: 1, pageSize: 1 });
+        
+        // 假设接口返回的total字段是未读消息总数
+        const unreadCount = response.total || 0;
+        
+        // 更新消息tab的未读数量
+        const messageTab = this.list.find(item => item.text === '消息');
+        if (messageTab) {
+          messageTab.unreadCount = unreadCount;
+        }
+      } catch (error) {
+        console.error('获取未读消息数量失败:', error);
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.custom-tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  display: flex;
+  justify-content: space-around;
+  background: #fff;
+  padding: 0;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  /* 移除重复的padding设置，改为在特定条件下应用 */
+}
+
+.tabbar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.icon-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+.badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 12px;
+  height: 12px;
+  background-color: #F55B5D;
+  border-radius: 50%;
+  z-index: 10;
+}
+
+/* 为iOS Safari浏览器添加安全区域支持 */
+/* 仅在独立浏览器环境中应用，避免在App嵌套环境中造成双重padding */
+@media screen and (max-width: 768px) and (orientation: portrait), 
+       screen and (max-width: 1024px) and (orientation: landscape) {
+  /* 检测移动设备环境 */
+  @supports (padding-bottom: env(safe-area-inset-bottom)) {
+    /* 确保只在独立浏览器而非App WebView中应用 */
+    .custom-tabbar {
+      padding-bottom: env(safe-area-inset-bottom, 0px);
+    }
+  }
+}
+
+/* 兼容性处理 */
+@supports (-webkit-touch-callout: none) and (not (min-device-width: 768px)) {
+  /* 针对移动设备的WebView特殊处理 */
+  .custom-tabbar {
+    /* App内嵌时，使用绝对定位确保贴合底部 */
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+</style>

src/components/fuzzy-select/fuzzy-select.vue

@@ -0,0 +1,237 @@
+<template>
+  <view class="fuzzy-select-container">
+    <!-- 搜索输入框 -->
+    <uni-easyinput ref="inputRef" v-model="searchKeyword" :placeholder="placeholder" :clearable="true"
+      :disabled="disabled" @input="handleInput" @focus="showDropdown = true" @blur="handleBlur" />
+
+    <!-- 下拉选项列表 -->
+    <view v-if="showDropdown && filteredOptions.length > 0" class="dropdown-list">
+      <scroll-view scroll-y="true" class="dropdown-scroll">
+        <view v-for="(option, index) in filteredOptions" :key="index" class="dropdown-item"
+          @click="selectOption(option)">
+          {{ option[dataText] }}
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 无匹配结果提示 -->
+    <view v-if="showDropdown && filteredOptions.length === 0 && searchKeyword" class="no-result">
+      无匹配结果
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "FuzzySelect",
+  props: {
+    // 绑定值
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    // 选项列表
+    options: {
+      type: Array,
+      default: () => []
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      default: '请输入搜索'
+    },
+    // 值字段名
+    dataValue: {
+      type: String,
+      default: 'value'
+    },
+    // 显示文本字段名
+    dataText: {
+      type: String,
+      default: 'text'
+    },
+    // 是否开启搜索
+    filterable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      searchKeyword: '',
+      showDropdown: false,
+      filteredOptions: this.options,
+      selectedOption: null
+    }
+  },
+  watch: {
+    options(newOptions) {
+      this.filterOptions(this.searchKeyword, newOptions)
+      // 当options更新后，需要重新根据当前value设置选中项
+      this.updateSelectedOption(this.value)
+    },
+    value(newValue) {
+      // 只有当value确实变化时才更新选中项
+      if (newValue !== this.selectedOption?.[this.dataValue]) {
+        this.updateSelectedOption(newValue)
+      }
+    }
+  },
+  mounted() {
+    this.updateSelectedOption(this.value)
+  },
+  methods: {
+    // 根据value值更新选中的选项
+    updateSelectedOption(value) {
+      
+      if (!value) {
+        this.searchKeyword = ''
+        this.selectedOption = null
+        return
+      }
+
+      const foundOption = this.options.find(option =>
+        String(option[this.dataValue]) === String(value)
+      )
+
+      if (foundOption) {
+        
+        this.selectedOption = foundOption
+        this.searchKeyword = foundOption[this.dataText]
+        // 确保filteredOptions包含当前选中的选项
+        if (!this.filteredOptions.some(opt => String(opt[this.dataValue]) === String(value))) {
+          this.filteredOptions = this.options
+        }
+      } else {
+        this.searchKeyword = ''
+        this.selectedOption = null
+      }
+    },
+    // 处理输入
+    handleInput(value) {
+      if (this.disabled) return;
+      this.searchKeyword = value
+      this.filterOptions(value)
+      this.showDropdown = true
+    },
+
+    // 过滤选项
+    filterOptions(keyword = '', options = this.options) {
+      if (!this.filterable || !keyword.trim()) {
+        this.filteredOptions = options
+        return
+      }
+
+      const lowerKeyword = keyword.toLowerCase()
+      this.filteredOptions = options.filter(option => {
+        const text = String(option[this.dataText] || '').toLowerCase()
+        const value = String(option[this.dataValue] || '').toLowerCase()
+        return text.includes(lowerKeyword) || value.includes(lowerKeyword)
+      })
+    },
+
+    // 选择选项
+    selectOption(option) {
+      if (this.disabled) return;
+      this.selectedOption = option
+      this.searchKeyword = option[this.dataText]
+      this.$emit('input', option[this.dataValue])
+      this.$emit('change', option[this.dataValue])
+      this.showDropdown = false
+    },
+
+    // 处理失焦
+    handleBlur() {
+      // 延迟隐藏下拉框，确保点击选项能触发
+      setTimeout(() => {
+        this.showDropdown = false
+      }, 200)
+    },
+
+    // 清空搜索
+    clearSearch() {
+      this.searchKeyword = ''
+      this.filteredOptions = this.options
+      this.selectedOption = null
+      this.$emit('input', '')
+      this.$emit('change', '')
+    },
+
+    // 聚焦输入框
+    focus() {
+      if (this.$refs.inputRef) {
+        this.$refs.inputRef.focus()
+      }
+    },
+
+    // 失焦输入框
+    blur() {
+      if (this.$refs.inputRef) {
+        this.$refs.inputRef.blur()
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.fuzzy-select-container {
+  position: relative;
+  width: 100%;
+}
+
+.dropdown-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 999;
+  margin-top: 4px;
+}
+
+.dropdown-scroll {
+  max-height: 200px;
+}
+
+.dropdown-item {
+  padding: 12px 16px;
+  font-size: 14px;
+  color: #333;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f5f5;
+}
+
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.no-result {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 12px 16px;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #999;
+  text-align: center;
+  z-index: 999;
+  margin-top: 4px;
+}
+</style>

src/components/h-collapse-item/h-collapse-item.vue

@@ -0,0 +1,138 @@
+<template>
+    <uni-collapse-item :name="name" :show-animation="showAnimation" :disabled="disabled" ref="collapseItem" @change="handleCollapseChange">
+        <template #title>
+            <view class="h-collapse-item-title">
+                <view v-if="iconUrl" class="title-icon"
+                    :style="{ backgroundImage: iconUrl ? 'url(' + iconUrl + ')' : '' }"></view>
+                <text class="title-text">{{ title }}</text>
+            </view>
+        </template>
+        <view ref="contentSlot">
+            <slot></slot>
+        </view>
+    </uni-collapse-item>
+</template>
+
+<script>
+export default {
+    name: 'eikonCollapseItem',
+    props: {
+        // 折叠面板名称
+        name: {
+            type: String,
+            default: ''
+        },
+        // 标题文本
+        title: {
+            type: String,
+            default: ''
+        },
+        // 是否显示动画
+        showAnimation: {
+            type: Boolean,
+            default: true
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        // 图标URL地址（可选）
+        iconUrl: {
+            type: String,
+            default: ''
+        },
+        
+    },
+    mounted() {
+       
+    },
+    methods: {
+        handleCollapseChange(e) {
+            // 当折叠面板状态变化时，如果是展开状态，重新计算高度
+            if (e.detail.show) {
+                this.$nextTick(() => {
+                    this.updateCollapseHeight();
+                });
+            }
+        },
+      
+        updateCollapseHeight() {
+            
+            // 强制重新渲染折叠面板
+            if (this.$refs.collapseItem && this.$refs.collapseItem.$el) {
+                // 触发uni-collapse-item的重新渲染
+                const collapseItem = this.$refs.collapseItem;
+                if (collapseItem.isOpen) {
+                    // 如果是展开状态，强制重新计算高度
+                    this.$nextTick(() => {
+                        if (collapseItem.resize) {
+                            collapseItem.resize();
+                        } else {
+                            // 如果resize方法不存在，使用uni-app的节点查询获取高度
+                            const query = uni.createSelectorQuery().in(this);
+                            query.select('.uni-collapse-item__wrap').boundingClientRect(data => {
+                                debugger
+                                if (data) {
+                                    // 获取内容区域的实际高度 - 使用ref而不是ID选择器
+                                    const contentQuery = uni.createSelectorQuery().in(this);
+                                    contentQuery.select('.uni-collapse-item__wrap-content').boundingClientRect(contentData => {
+                                        if (contentData && contentData.height > 0) {
+                                            // 设置折叠面板高度为内容高度
+                                            const wrapElement = collapseItem.$el.querySelector('.uni-collapse-item__wrap');
+                                            if (wrapElement) {
+                                                wrapElement.style.height = contentData.height + 'px';
+                                            }
+                                        }
+                                    }).exec();
+                                }
+                            }).exec();
+                        }
+                    });
+                }
+            }
+        }
+    },
+    beforeDestroy() {
+        if (this.contentObserver) {
+            this.contentObserver.disconnect();
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .uni-collapse-item__title {
+    height: 96rpx !important;
+    padding-left: 28rpx;
+}
+
+// 确保内容区域在展开时高度自适应
+::v-deep .uni-collapse-item__wrap {
+    // 保持原有行为，不设置固定高度
+}
+
+::v-deep .uni-collapse-item__content {
+    // 移除任何可能影响动画的高度限制
+    // 让uni-collapse-item自己管理高度
+}
+
+.h-collapse-item-title {
+    display: flex;
+    align-items: center;
+
+    .title-icon {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 8px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    .title-text {
+        font-size: 14px;
+        color: #333;
+    }
+}
+</style>

src/components/h-legend/h-legend.vue

@@ -0,0 +1,74 @@
+<template>
+  <view class="h-legend-container">
+    <view v-for="(item, index) in legendData" :key="index" class="legend-item"
+      :style="{ marginRight: index === legendData.length - 1 ? '0' : itemSpacing + 'rpx' }">
+      <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
+      <text class="legend-text" :style="{ fontSize: textSize + 'rpx', color: textColor }">
+        {{ item.name }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'HLegend',
+  props: {
+    // 图例数据数组
+    legendData: {
+      type: Array,
+      default: () => []
+    },
+    // 图例颜色块大小
+    colorSize: {
+      type: Number,
+      default: 24
+    },
+    // 文字大小
+    textSize: {
+      type: Number,
+      default: 24
+    },
+    // 文字颜色
+    textColor: {
+      type: String,
+      default: '#333333'
+    },
+    // 图例间距
+    itemSpacing: {
+      type: Number,
+      default: 32
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.h-legend-container {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  overflow-x: auto;
+  padding: 16rpx 0;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.legend-color {
+  border-radius: 4rpx;
+  margin-right: 12rpx;
+  margin-top: 2rpx;
+  flex-shrink: 0;
+  width: 45rpx;
+  height: 22rpx;
+}
+
+.legend-text {
+  font-weight: 400;
+  white-space: nowrap;
+}
+</style>

src/components/h-line/h-line.vue

@@ -0,0 +1,200 @@
+<template>
+  <view class="h-line-container">
+    <!-- 单个长条容器 -->
+    <view class="single-line-container" :style="{
+      height: lineHeight + 'rpx'
+    }">
+      <!-- 背景条 -->
+      <view class="line-background" :style="{
+        borderRadius: borderRadius + 'rpx',
+        backgroundColor: backgroundColor
+      }"></view>
+
+      <!-- 背景条 -->
+      <view class="line-background" :style="{
+        borderRadius: borderRadius + 'rpx',
+        backgroundColor: backgroundColor
+      }"></view>
+
+      <!-- 分段进度条 -->
+      <view v-for="(item, index) in data" :key="index" class="segment-progress" :style="{
+        width: calculateSegmentWidth(item) + '%',
+        left: calculateSegmentLeft(index) + '%',
+        backgroundColor: item.color || defaultColor,
+        borderRadius: getSegmentBorderRadius(index) + 'rpx'
+      }">
+        <!-- 每个分段的数值显示 -->
+        <text v-if="item.value > 0" class="segment-text">
+          {{ item.value }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'HLine',
+  props: {
+    // 数据数组
+    data: {
+      type: Array,
+      default: () => []
+    },
+    // 总数量（用于计算百分比）
+    total: {
+      type: Number,
+      default: 0
+    },
+    // 条宽度
+    itemWidth: {
+      type: Number,
+      default: 200
+    },
+    // 条高度
+    lineHeight: {
+      type: String,
+      default: '40'
+    },
+    // 条间距
+    itemSpacing: {
+      type: Number,
+      default: 32
+    },
+    // 圆角大小
+    borderRadius: {
+      type: Number,
+      default: 20
+    },
+    // 背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#f5f5f5'
+    },
+    // 默认进度条颜色
+    defaultColor: {
+      type: String,
+      default: '#4873E3'
+    },
+    // 是否显示百分比
+    showPercentage: {
+      type: Boolean,
+      default: true
+    },
+ 
+  
+    // 百分比文字大小
+    percentageSize: {
+      type: Number,
+      default: 24
+    },
+    // 百分比文字颜色
+    percentageColor: {
+      type: String,
+      default: '#666666'
+    }
+  },
+  computed: {
+    // 计算总数量（如果未传入total，则使用data中所有值的和）
+    computedTotal() {
+      if (this.total > 0) {
+        return this.total;
+      }
+      return this.data.reduce((sum, item) => sum + (item.value || 0), 0);
+    }
+  },
+  methods: {
+    // 计算每个分段的宽度百分比
+    calculateSegmentWidth(item) {
+      if (this.computedTotal === 0) return 0;
+      const percentage = (item.value / this.computedTotal) * 100;
+      // 确保最小宽度为1%，以便显示
+      return Math.max(1, percentage);
+    },
+
+    // 计算每个分段的左侧位置
+    calculateSegmentLeft(index) {
+      if (index === 0) return 0;
+      let left = 0;
+      for (let i = 0; i < index; i++) {
+        left += this.calculateSegmentWidth(this.data[i]);
+      }
+      return left;
+    },
+
+    // 获取分段圆角样式
+    getSegmentBorderRadius(index) {
+      if (this.data.length === 1) {
+        return this.borderRadius;
+      }
+      if (index === 0) {
+        return `${this.borderRadius} 0 0 ${this.borderRadius}`;
+      }
+      if (index === this.data.length - 1) {
+        return `0 ${this.borderRadius} ${this.borderRadius} 0`;
+      }
+      return 0;
+    },
+
+    // 计算总百分比
+    calculateTotalPercentage() {
+      if (this.computedTotal === 0) return 0;
+      return Math.round((this.computedTotal / this.total) * 100);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.h-line-container {
+  display: flex;
+  align-items: center;
+  padding: 8rpx 0;
+  width: 100%;
+}
+
+.single-line-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 20rpx;
+}
+
+.line-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.segment-progress {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  z-index: 2;
+  transition: width 0.3s ease;
+}
+
+.segment-progress {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  z-index: 2;
+  transition: width 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.segment-text {
+  font-size: 23rpx;
+  font-weight: 500;
+  color: #ffffff;
+  text-shadow: 0 0 2rpx rgba(0, 0, 0, 0.5);
+}
+</style>

src/components/h-rank-line/h-rank-line.vue

@@ -0,0 +1,104 @@
+<template>
+  <view class="h-rank-line-container">
+    <!-- 左侧进度条区域 -->
+    <view class="progress-section">
+      <!-- 灰条背景 -->
+      <view class="gray-bar">
+        <!-- 蓝条，根据百分比显示 -->
+        <view class="blue-bar" :style="{ width: percentage + '%' }">
+          <!-- 蓝条结尾的竖条 -->
+          <view class="end-line"></view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 右侧插槽区域 -->
+    <view class="slot-section">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'HRankLine',
+  props: {
+    // 百分比值，范围0-100
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (value) => {
+        return value >= 0 && value <= 100
+      }
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.h-rank-line-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 60rpx;
+
+}
+
+.progress-section {
+  flex: 1;
+  margin-right: 20rpx;
+}
+
+.gray-bar {
+  position: relative;
+  width: 100%;
+  height: 24rpx;
+  background: #f0f0f0;
+  border-radius: 12rpx;
+  // overflow: hidden;
+}
+
+.blue-bar {
+  position: relative;
+  height: 100%;
+  background: linear-gradient(90deg, #0098FA 0%, #0098FA 100%);
+  border-radius: 12rpx 0 0 12rpx;
+  transition: width 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.end-line {
+  width: 4rpx;
+  height: 35rpx;
+  background: #0098FA;
+  border-radius: 2rpx;
+  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+  margin-right: -2rpx;
+}
+
+.slot-section {
+  flex-shrink: 0;
+  min-width: 100rpx;
+  text-align: right;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .h-rank-line-container {
+    height: 50rpx;
+  }
+
+  .gray-bar {
+    height: 20rpx;
+  }
+
+  .end-line {
+    height: 35rpx;
+  }
+}
+</style>

src/components/h-search/h-search.vue

@@ -0,0 +1,128 @@
+<template>
+    <u-search v-model="internalValue" :placeholder="placeholder" :showAction="showAction" :actionText="actionText"
+        @search="handleSearch" @custom="handleCustom" @clear="handleClear" :disabled="disabled" :maxlength="maxlength"
+        :height="height" :bgColor="bgColor" :color="color" :searchIconColor="searchIconColor"
+        :clearButton="clearButton" />
+</template>
+
+<script>
+export default {
+    name: 'HSearch',
+    props: {
+        // 双向绑定的值
+        value: {
+            type: String,
+            default: ''
+        },
+        // 占位符文本
+        placeholder: {
+            type: String,
+            default: '请输入关键词'
+        },
+        // 是否显示搜索按钮
+        showAction: {
+            type: Boolean,
+            default: true
+        },
+        // 搜索按钮文本
+        actionText: {
+            type: String,
+            default: '搜索'
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        // 最大输入长度
+        maxlength: {
+            type: Number,
+            default: 100
+        },
+        // 搜索框高度
+        height: {
+            type: Number,
+            default: 64
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: '#f5f5f5'
+        },
+        // 文字颜色
+        color: {
+            type: String,
+            default: '#333333'
+        },
+        // 搜索图标颜色
+        searchIconColor: {
+            type: String,
+            default: '#999999'
+        },
+        // 是否显示清除按钮
+        clearButton: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            internalValue: this.value
+        };
+    },
+    watch: {
+        value(newVal) {
+            this.internalValue = newVal;
+        },
+        internalValue(newVal) {
+            this.$emit('input', newVal);
+            this.$emit('update:value', newVal);
+        }
+    },
+    methods: {
+        // 处理搜索事件
+        handleSearch(value) {
+            this.$emit('search', value);
+        },
+        // 处理自定义事件（点击搜索按钮）
+        handleCustom(value) {
+            this.$emit('custom', value);
+        },
+        // 处理清除事件
+        handleClear() {
+            this.internalValue = '';
+            this.$emit('clear');
+            this.$emit('search', '');
+        },
+        // 聚焦搜索框
+        focus() {
+            this.$refs.uSearch && this.$refs.uSearch.focus();
+        },
+        // 失焦搜索框
+        blur() {
+            this.$refs.uSearch && this.$refs.uSearch.blur();
+        },
+        // 清空搜索框
+        clear() {
+            this.internalValue = '';
+            this.handleClear();
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+// 可以在这里添加自定义样式
+.h-search-container {
+    width: 100%;
+}
+
+::v-deep .u-search__content {
+
+
+    .u-search__content__input {
+        height: 80rpx !important;
+        
+    }
+}
+</style>

src/components/h-tabs/h-tabs.vue

@@ -0,0 +1,105 @@
+<template>
+  <view class="h-tabs" :style="{ '--active-color': activeColor }">
+    <view v-for="item in tabs" :key="item[valueKey]" :class="{ active: item[valueKey] === currentValue }"
+      :style="[item[valueKey] === currentValue ? item.activeStyle : item.style]" class="h-tabs-item"
+      @click="handleTabClick(item)">
+      {{ item[labelKey] }}
+      <!-- 显示红点 -->
+      <view v-if="item.unreadCount > 0" class="h-tabs-red-dot"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'HTabs',
+  props: {
+    tabs: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    valueKey: {
+      type: String,
+      default: 'type'
+    },
+    labelKey: {
+      type: String,
+      default: 'title'
+    },
+    activeColor: {
+      type: String,
+      default: '#2A70D1'
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.currentValue = newVal;
+    }
+  },
+  methods: {
+    handleTabClick(item) {
+      this.currentValue = item[this.valueKey];
+      this.$emit('input', this.currentValue);
+      this.$emit('change', this.currentValue, item);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.h-tabs {
+  display: flex;
+  padding: 0 0 32rpx;
+  font-size: 28rpx;
+  color: #666666;
+  line-height: 32rpx;
+  gap: 48rpx;
+  width: 100%;
+
+  // 默认样式
+  .h-tabs-item {
+    position: relative;
+    cursor: pointer;
+    padding: 0 8rpx;
+
+    &.active {
+      font-size: 36rpx;
+      color: var(--active-color);
+      line-height: 42rpx;
+
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: -12rpx;
+        left: 0;
+        width: 50%;
+        height: 6rpx;
+        background: var(--active-color);
+        border-radius: 12rpx;
+        transition: all 0.3s ease;
+      }
+    }
+  }
+
+  // 红点样式
+  .h-tabs-red-dot {
+    position: absolute;
+    top: -4rpx;
+    right: 0;
+    width: 16rpx;
+    height: 16rpx;
+    background-color: #FF4D4F;
+    border-radius: 50%;
+    transform: translateX(50%);
+  }
+}
+</style>

src/components/list-card/list-card.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="list-card-container" @click="handleClick" :class="containerStyle">
+    <slot v-if="showChecked" name="checkbox">
+
+    </slot>
+    <view class="list-card">
+      <view class="list-card-header">
+        <slot name="title"></slot>
+        <slot name="icon"></slot>
+      </view>
+      <view class="list-card-content">
+        <slot></slot>
+      </view>
+
+    </view>
+    <slot name="footer"></slot>
+  </view>
+
+</template>
+
+<script>
+export default {
+  name: 'ListCard',
+  props: {
+    showChecked: {
+      type: Boolean,
+      default: false
+    },
+    containerStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      checked: false
+    }
+  },
+
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-card-container {
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.08);
+  border: 2rpx solid #F0F8FF;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+
+
+
+  .list-card {
+    width: 100%;
+
+    .list-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24rpx;
+
+      .list-card-checkbox {
+        margin-right: 16rpx;
+      }
+    }
+
+    .list-card-content {
+      // 默认内容样式
+    }
+  }
+}
+</style>

src/components/list-icon/list-icon.vue

@@ -0,0 +1,38 @@
+<template>
+  <view class="list-icon" :style="divStyle">
+    {{ text }}
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ListIcon',
+  props: {
+    divStyle: {
+      type: Object,
+      default: () => ({
+        backgroundColor: '#5972C0'
+      })
+    },
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 60rpx;
+  height: 40rpx;
+  padding: 0 16rpx;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: #FFFFFF;
+  line-height: 1;
+}
+</style>

src/components/list-user/list-user.vue

@@ -0,0 +1,134 @@
+<template>
+  <view class="personnel-list" v-if="data && data.length">
+    <view class="personnel-item" v-for="(item, index) of data" :key="item.id || index" @click="handleItemClick(item, index)">
+      <view class="personnel-img">
+        <UserAvatar :userName="item.nickName || item.userName" :avatarLink="item.avatar" />
+      </view>
+      <view class="personnel-name">{{ item.nickName || item.userName }}</view>
+      <view v-if="showDelete" class="delete-icon" @click.stop="handleDelete(index)">
+        <uni-icons type="close" size="16" color="#999"></uni-icons>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import UserAvatar from '@/pages/attendance/components/UserAvatar.vue'
+
+export default {
+  name: 'ListUser',
+  components: {
+    UserAvatar
+  },
+  props: {
+    // 人员数据数组
+    data: {
+      type: Array,
+      default: () => []
+    },
+    // 是否显示删除图标
+    showDelete: {
+      type: Boolean,
+      default: false
+    },
+    // 禁用状态
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 处理删除操作
+    handleDelete(index) {
+      if (!this.data || !this.data.length || this.disabled) return
+
+      // 创建新数组（避免直接修改props）
+      const newData = [...this.data]
+      const deletedItem = newData.splice(index, 1)[0]
+
+      // 向外传递删除后的数组和删除的项
+      this.$emit('update:data', newData)
+      this.$emit('delete', {
+        deletedItem,
+        index,
+        newData
+      })
+
+      uni.showToast({
+        title: '删除成功',
+        icon: 'success',
+        duration: 1500
+      })
+    },
+
+    // 处理人员项点击
+    handleItemClick(item, index) {
+      this.$emit('click', {
+        clickedItem: item,
+        index,
+        data: this.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.personnel-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  margin: 20rpx 0;
+}
+
+.personnel-item {
+  display: flex;
+  align-items: center;
+  background: #f8f9fa;
+  border-radius: 24rpx;
+  padding: 12rpx 20rpx;
+  position: relative;
+
+  .personnel-img {
+    width: 60rpx;
+    height: 60rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 16rpx;
+    flex-shrink: 0;
+  }
+
+  .personnel-name {
+    font-size: 28rpx;
+    color: #333;
+    font-weight: 500;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .delete-icon {
+    width: 40rpx;
+    height: 40rpx;
+    border-radius: 50%;
+    background: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 16rpx;
+    flex-shrink: 0;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: #e0e0e0;
+    }
+
+    &:active {
+      background: #d0d0d0;
+    }
+  }
+}
+</style>

src/components/no-data/no-data.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="no-data-container">
+    <!-- 图标 -->
+    <view class="no-data-icon">
+      <uni-icons 
+        :type="iconType" 
+        :size="iconSize" 
+        :color="iconColor" 
+      />
+    </view>
+    
+    <!-- 提示文字 -->
+    <text class="no-data-text">
+      {{ text }}
+    </text>
+  </view>
+</template>
+
+<script>
+// 导入uni-ui图标组件
+import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
+
+export default {
+  name: 'NoData',
+  components: {
+    uniIcons
+  },
+  props: {
+    // 提示文字
+    text: {
+      type: String,
+      default: '暂无数据'
+    },
+    // 图标类型
+    iconType: {
+      type: String,
+      default: 'search' // 可以使用其他图标如: 'info', 'help', 'minus', etc.
+    },
+    // 图标大小
+    iconSize: {
+      type: [Number, String],
+      default: 60
+    },
+    // 图标颜色
+    iconColor: {
+      type: String,
+      default: '#C0C4CC'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.no-data-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  padding: 40rpx 0; /* 添加上下padding值 */
+  
+  .no-data-icon {
+    margin-bottom: 20rpx;
+    opacity: 0.5;
+  }
+  
+  .no-data-text {
+    font-size: 28rpx;
+    color: #909399;
+    font-weight: 400;
+  }
+}
+</style>

src/components/statistic-table/statistic-table.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="table-container">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th v-for="column in columns" :key="column.props">{{ column.title }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in data" :key="index"
+          :class="{ 'odd-row': (index + 1) % 2 !== 0, 'even-row': (index + 1) % 2 === 0 }">
+          
+          <td v-for="column in columns" :key="`${column.props}-${index}`">
+            <!-- 如果列配置了slot属性，则使用插槽 -->
+            <slot v-if="column.slot" :name="`column-${column.props}`" :row="row" :index="index">
+              <!-- 默认插槽内容 -->
+              {{ row[column.props] }}
+            </slot>
+            <!-- 如果没有配置slot属性，则显示普通文本 -->
+            <template v-else>
+              {{ row[column.props] || '-' }}
+            </template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableList',
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+      validator: (value) => {
+        return value.every(column => {
+          return column.props && column.title;
+        });
+      }
+    },
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  created() {
+    console.log(this.columns,this.data);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  
+  /* 强制显示滚动条 */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: #525861 #f1f1f1; /* Firefox */
+  
+  /* 自定义滚动条样式 - 更明显的滚动条 */
+  &::-webkit-scrollbar {
+    height: 12px; /* 增加滚动条高度 */
+    width: 12px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 6px;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #525861; /* 使用主题色 */
+    border-radius: 6px;
+    border: 2px solid #f1f1f1;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #525861; /* 悬停时加深颜色 */
+  }
+  
+  &::-webkit-scrollbar-corner {
+    background: #f1f1f1;
+  }
+}
+
+.data-table {
+  width: auto;
+  min-width: 100%;
+  border-collapse: collapse;
+  border: 2rpx solid #ccc;
+  border-radius: 16rpx;
+  table-layout: auto;
+
+  th,
+  td {
+    padding: 12rpx;
+    height: 48rpx;
+    text-align: left;
+    white-space: nowrap;
+    overflow: visible;
+    text-overflow: clip;
+    // border-bottom: 1rpx solid #ccc;
+  }
+
+  th {
+    background-color: #f5f5f5;
+    font-weight: bold;
+    color: #666;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    
+    /* 确保表头内容完全展示 */
+    white-space: nowrap;
+    overflow: visible;
+    text-overflow: clip;
+  }
+
+  .odd-row {
+    background-color: #fff !important;
+  }
+
+  .even-row {
+    background-color: #f5f5f5 !important;
+  }
+
+  tr:hover {
+    background-color: #e0e0e0;
+  }
+}
+</style>

src/components/text-switch/text-switch.vue

@@ -0,0 +1,218 @@
+<!-- import textSwitch from "@/components/text-li-switch/text-li-switch.vue" -->
+<!-- <textSwitch v-model="prop.must" uncheck_text="非必选" checked_text="必选" @change="switchChange"></textSwitch> -->
+<!-- @change可以不写 -->
+
+
+<template>
+	<view>
+		<view class="switch_box row-b-c" :class="{ 'disabled-switch': disabled }"
+			:style="{ backgroundColor: checked ? checkedbg : uncheckedbg, width: width + 'rpx', height: height + 'rpx', borderRadius: '100px' }"
+			@click="changeSwitch">
+			<view class="switch_text c-white" :class="checked ? ['to_left'] : ['_right', 'c-black']"
+				:style="{ fontSize: size + 'rpx', 'padding-right': padding_right }">{{ checked ? checked_text :
+					uncheck_text }}
+			</view>
+			<view class="round" :style="{
+				left: checked ? '100%' : '2rpx',
+				marginLeft: checked ? '-' + (Number(height) - 6) + 'rpx' : '', width: + height + 'rpx',
+				height: + height - 10 + 'rpx',
+				width: + height - 10 + 'rpx',
+				borderRadius: height / 2 + 'rpx'
+			}">
+			</view>
+			<!-- 禁用遮罩层 -->
+			<view v-if="disabled" class="disabled-overlay"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	emits: ['click', 'change', 'update:modelValue', 'input'],
+	model: {
+		prop: 'modelValue',
+		event: 'update:modelValue'
+	},
+
+	props: {
+		modelValue: [String], // 修改为接收字符串值
+		checkedbg: {
+			type: String,
+			default: '#626FF0'
+		},
+		uncheckedbg: {
+			type: String,
+			default: '#F67072'
+		},
+		width: {
+			type: String,
+			default: '130'
+		},
+		height: {
+			type: String,
+			default: '50'
+		},
+		uncheck_text: {
+			type: String,
+			default: ''
+		},
+		checked_text: {
+			type: String,
+			default: ''
+		},
+		size: {
+			type: String,
+			default: '24'
+		},
+		checked_value: {
+			type: String,
+			default: 'QUALIFIED'
+		},
+		uncheck_value: {
+			type: String,
+			default: 'UNQUALIFIED'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			checked: false, // 修改为布尔值
+			padding_right: '20rpx'
+		}
+	},
+	created() {
+		if (this.uncheck_text.length > this.checked_text.length) {
+			this.padding_right = '10rpx'
+		}
+		// 根据传入的值初始化选中状态
+		this.updateCheckedState();
+	},
+	watch: {
+		modelValue: {
+			handler(newVal) {
+				this.updateCheckedState();
+			},
+			deep: true,
+			immediate: true
+		},
+		checked_value: {
+			handler() {
+				this.updateCheckedState();
+			},
+			deep: true
+		},
+		uncheck_value: {
+			handler() {
+				this.updateCheckedState();
+			},
+			deep: true
+		}
+	},
+	methods: {
+		// 根据传入的值更新选中状态
+		updateCheckedState() {
+			if (this.modelValue === this.checked_value) {
+				this.checked = true;
+			} else if (this.modelValue === this.uncheck_value) {
+				this.checked = false;
+			}
+			// 如果传入的值既不等于checked_value也不等于uncheck_value，保持当前状态
+		},
+		
+		changeSwitch: function (e) {
+			// 如果禁用状态，阻止切换
+			if (this.disabled) {
+				return;
+			}
+			
+			this.checked = !this.checked;
+			
+			// 根据开关状态确定要传递的值
+			const current_value = this.checked ? this.checked_value : this.uncheck_value;
+			
+			// TODO 兼容 vue2
+			this.$emit('input', current_value);
+			// TODO　兼容　vue3
+			this.$emit('update:modelValue', current_value);
+
+			this.$emit('change', current_value)
+		}
+	}
+}
+</script>
+
+<style>
+.row-c-c {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.c-white {
+	color: #FFFFFF;
+}
+
+.c-black {
+	color: #FFFFFF;
+}
+
+
+/* ---------- */
+.switch_box {
+	position: relative;
+	border: 1rpx solid #EEEEEE;
+	background-color: #F6F6F6;
+	transition: all 0.4s;
+	display: flex;
+	align-items: center;
+}
+
+.round {
+	position: absolute;
+	background-color: #FFFFFF;
+	transition: all 0.4s;
+}
+
+.to_left {
+	left: 0;
+	margin-left: 0;
+}
+
+.to_right {
+	left: 100%;
+	margin-left: -50rpx;
+}
+
+.switch_text {
+	position: absolute;
+	padding: 0 20rpx;
+}
+
+._right {
+	right: 0;
+	border-right: none !important;
+}
+
+/* 禁用状态样式 */
+.disabled-switch {
+	pointer-events: none;
+	user-select: none;
+	opacity: 0.6;
+	position: relative;
+}
+
+.disabled-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(128, 128, 128, 0.3);
+	border-radius: 100px;
+	z-index: 10;
+	pointer-events: none;
+}
+</style>

src/components/text-tag/text-tag.vue

@@ -0,0 +1,113 @@
+<template>
+    <view class="text-tag-container">
+        <view v-for="(item, index) in localTags" :key="index" class="tag-item" :style="getTagItemStyle(item)">
+            <text class="tag-text" :style="getTagTextStyle(item)">{{ item[labelColumn] }}</text>
+
+            <u-icon v-if="showClose" name="close" color="#666666" size="14" @click="handleRemove(index)" />
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'TextTag',
+    props: {
+        tags: {
+            type: Array,
+            default: () => []
+        },
+        showClose: {
+            type: Boolean,
+            default: true
+        },
+        labelColumn: {
+            type: String,
+            default: 'label'
+        },
+        // 全局tag-item样式配置
+        tagItemStyle: {
+            type: Object,
+            default: () => ({})
+        },
+        // 全局tag-text样式配置
+        tagTextStyle: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    data() {
+        return {
+            localTags: [...this.tags]
+        };
+    },
+    watch: {
+        tags(newVal) {
+            
+            this.localTags = [...newVal];
+        }
+    },
+    methods: {
+        handleRemove(index) {
+            this.localTags.splice(index, 1);
+            this.$emit('remove', [...this.localTags]);
+         
+        },
+        // 获取tag-item样式
+        getTagItemStyle(item) {
+            const baseStyle = {
+                display: 'flex',
+                alignItems: 'center',
+                padding: '4px 12px',
+                backgroundColor: '#f0f0f0',
+                borderRadius: '16px',
+                fontSize: '14px'
+            };
+            
+            // 合并全局样式和item中的样式
+            const mergedStyle = {
+                ...baseStyle,
+                ...this.tagItemStyle,
+                ...(item.tagItemStyle || {})
+            };
+            
+            return mergedStyle;
+        },
+        // 获取tag-text样式
+        getTagTextStyle(item) {
+            const baseStyle = {
+                marginRight: '8px'
+            };
+            
+            // 合并全局样式和item中的样式
+            const mergedStyle = {
+                ...baseStyle,
+                ...this.tagTextStyle,
+                ...(item.tagTextStyle || {})
+            };
+            
+            return mergedStyle;
+        }
+    }
+};
+</script>
+
+<style scoped>
+.text-tag-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.tag-item {
+    display: flex;
+    align-items: center;
+    padding: 4px 12px;
+    background-color: #f0f0f0;
+    border-radius: 16px;
+    font-size: 14px;
+}
+
+.tag-text {
+    margin-right: 8px;
+}
+</style>

src/components/timeline-record/TimelineRecord.vue

@@ -0,0 +1,103 @@
+
+<template>
+  <view class="vertical-timeline">
+    <uni-section :title="sectionTitle" type="line" padding>
+      <view v-if="flatSteps.length > 0">
+        <uni-steps
+          :options="flatSteps"
+          :active="activeStep"
+          direction="column"
+        />
+      </view>
+      <view v-else class="no-record">
+        <uni-icons type="flag-filled" size="60" color="#ccc"></uni-icons>
+        <text>暂无打卡记录</text>
+      </view>
+    </uni-section>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'VerticalTimeline',
+  props: {
+    records: {
+      type: Array,
+      default: () => []
+    },
+    sectionTitle: {
+      type: String,
+      default: '打卡记录'
+    },
+    statusColorMap: {
+      type: Object,
+      default: () => ({
+        正常: '#67C23A',
+        迟到: '#F56C6C',
+        早退: '#E6A23C',
+        异常: '#909399'
+      })
+    }
+  },
+  computed: {
+    activeStep() {
+      return this.flatSteps.length - 1
+    },
+    flatSteps() {
+      if (!this.records || this.records.length === 0) return []
+      
+      // 提取items数组并排序
+      const items = this.records[0]?.items || []
+      const sorted = [...items].sort((a, b) => 
+        new Date(a.checkInTime) - new Date(b.checkInTime)
+      )
+
+      return sorted.map(item => ({
+        title: this.formatTime(item.checkInTime),
+        desc: `${this.getTypeText(item.checkInType)} - ${item.checkInPosition}`,
+        color: this.getStatusColor(item)
+      }))
+    }
+  },
+  methods: {
+    formatTime(timeStr) {
+      // return timeStr ? timeStr.split(' ')[1].substr(0,5) : '--:--'
+      return timeStr
+    },
+    getTypeText(type) {
+      const map = {
+        CLOCK_IN: '上班打卡',
+        CLOCK_OUT: '下班打卡'
+      }
+      return map[type] || type
+    },
+    getStatusColor(item) {
+      // 可根据实际业务逻辑判断状态
+      return this.statusColorMap.正常
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vertical-timeline {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 10px 0;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+}
+
+.no-record {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: #999;
+
+  text {
+    margin-top: 8px;
+    font-size: 14px;
+  }
+}
+</style>

src/components/uni-section/uni-section.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="uni-section">
+		<view class="uni-section-header" @click="onClick">
+				<view class="uni-section-header__decoration" v-if="type" :class="type" />
+        <slot v-else name="decoration"></slot>
+
+        <view class="uni-section-header__content">
+          <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
+          <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
+        </view>
+
+        <view class="uni-section-header__slot-right">
+          <slot name="right"></slot>
+        </view>
+		</view>
+
+		<view class="uni-section-content" :style="{padding: _padding}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * Section 标题栏
+	 * @description 标题栏
+	 * @property {String} type = [line|circle|square] 标题装饰类型
+	 * 	@value line 竖线
+	 * 	@value circle 圆形
+	 * 	@value square 正方形
+	 * @property {String} title 主标题
+	 * @property {String} titleFontSize 主标题字体大小
+	 * @property {String} titleColor 主标题字体颜色
+	 * @property {String} subTitle 副标题
+	 * @property {String} subTitleFontSize 副标题字体大小
+	 * @property {String} subTitleColor 副标题字体颜色
+	 * @property {String} padding 默认插槽 padding
+	 */
+
+	export default {
+		name: 'UniSection',
+    emits:['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			title: {
+				type: String,
+				required: true,
+				default: ''
+			},
+      titleFontSize: {
+        type: String,
+        default: '14px'
+      },
+			titleColor:{
+				type: String,
+				default: '#333'
+			},
+			subTitle: {
+				type: String,
+				default: ''
+			},
+      subTitleFontSize: {
+        type: String,
+        default: '12px'
+      },
+      subTitleColor: {
+        type: String,
+        default: '#999'
+      },
+			padding: {
+				type: [Boolean, String],
+				default: false
+			}
+		},
+    computed:{
+      _padding(){
+        if(typeof this.padding === 'string'){
+          return this.padding
+        }
+
+        return this.padding?'10px':''
+      }
+    },
+		watch: {
+			title(newVal) {
+				if (uni.report && newVal !== '') {
+					uni.report('title', newVal)
+				}
+			}
+		},
+    methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	$uni-primary: #2979ff !default;
+
+	.uni-section {
+		background-color: #fff;
+    .uni-section-header {
+      position: relative;
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      flex-direction: row;
+      align-items: center;
+      padding: 12px 10px;
+      font-weight: normal;
+
+      &__decoration{
+        margin-right: 6px;
+        background-color: $uni-primary;
+        &.line {
+          width: 4px;
+          height: 12px;
+          border-radius: 10px;
+        }
+
+        &.circle {
+          width: 8px;
+          height: 8px;
+          border-top-right-radius: 50px;
+          border-top-left-radius: 50px;
+          border-bottom-left-radius: 50px;
+          border-bottom-right-radius: 50px;
+        }
+
+        &.square {
+          width: 8px;
+          height: 8px;
+        }
+      }
+
+      &__content {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: column;
+        flex: 1;
+        color: #333;
+
+        .distraction {
+          flex-direction: row;
+          align-items: center;
+        }
+        &-sub {
+          margin-top: 2px;
+        }
+      }
+
+      &__slot-right{
+        font-size: 14px;
+      }
+    }
+
+    .uni-section-content{
+      font-size: 14px;
+    }
+	}
+</style>