chore: initialize qiming workspace repository

qiming-mobile/components/pane-tabs/README.md

@@ -0,0 +1,178 @@
+# Custom Tabs 组件使用文档
+
+## 组件特性
+
+✅ **高度自适应** - 自动继承父容器高度，内容区域自动撑满
+✅ **懒加载** - 支持 tab 内容懒加载，提升性能
+✅ **平滑动画** - 切换动画流畅自然
+✅ **灵活配置** - 支持自定义头部高度、颜色等
+✅ **响应式指示器** - 自动计算指示器位置和宽度
+
+## 基础用法
+
+```vue
+<template>
+  <view class="page">
+    <custom-tabs v-model="activeTab" :tabs="tabs">
+      <template #recent>
+        <view class="tab-content"> 最近使用内容 </view>
+      </template>
+
+      <template #history>
+        <view class="tab-content"> 会话记录内容 </view>
+      </template>
+    </custom-tabs>
+  </view>
+</template>
+
+<script setup lang="uts">
+  import CustomTabs from "@/components/custom-tabs/custom-tabs.uvue";
+
+  const activeTab = ref(0);
+
+  const tabs = [
+    { label: "最近使用", name: "recent" },
+    { label: "会话记录", name: "history" },
+  ];
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    height: 100vh;
+
+    .tab-content {
+      padding: 32rpx;
+    }
+  }
+</style>
+```
+
+## Props
+
+| 参数                 | 说明                | 类型                                   | 默认值    |
+| -------------------- | ------------------- | -------------------------------------- | --------- |
+| tabs                 | Tab 数据列表        | `Array<{label: string, name: string}>` | `[]`      |
+| modelValue / v-model | 当前激活的 tab 索引 | `number`                               | `0`       |
+| headerHeight         | Tab 头部高度        | `string`                               | `'88rpx'` |
+| animated             | 是否开启切换动画    | `boolean`                              | `true`    |
+| lazyLoad             | 是否懒加载 tab 内容 | `boolean`                              | `true`    |
+
+## Events
+
+| 事件名            | 说明                    | 回调参数                    |
+| ----------------- | ----------------------- | --------------------------- |
+| update:modelValue | 当前激活 tab 改变时触发 | `(index: number)`           |
+| change            | 切换 tab 时触发         | `(index: number, tab: Tab)` |
+
+## Slots
+
+每个 tab 对应一个具名插槽，插槽名称为 `tabs` 数组中的 `name` 字段。
+
+## 完整示例
+
+```vue
+<template>
+  <view class="page-container">
+    <custom-tabs
+      v-model="currentTab"
+      :tabs="tabList"
+      :header-height="'100rpx'"
+      :animated="true"
+      :lazy-load="true"
+      @change="handleTabChange"
+    >
+      <!-- 最近使用 -->
+      <template #recent>
+        <scroll-view class="scroll-content" scroll-y>
+          <view class="content-wrapper">
+            <text>最近使用的内容</text>
+          </view>
+        </scroll-view>
+      </template>
+
+      <!-- 会话记录 -->
+      <template #history>
+        <scroll-view class="scroll-content" scroll-y>
+          <view class="content-wrapper">
+            <text>会话记录内容</text>
+          </view>
+        </scroll-view>
+      </template>
+
+      <!-- 收藏 -->
+      <template #favorites>
+        <scroll-view class="scroll-content" scroll-y>
+          <view class="content-wrapper">
+            <text>收藏内容</text>
+          </view>
+        </scroll-view>
+      </template>
+    </custom-tabs>
+  </view>
+</template>
+
+<script setup lang="uts">
+  import CustomTabs from "@/components/custom-tabs/custom-tabs.uvue";
+
+  const currentTab = ref(0);
+
+  const tabList = [
+    { label: "最近使用", name: "recent" },
+    { label: "会话记录", name: "history" },
+    { label: "收藏", name: "favorites" },
+  ];
+
+  const handleTabChange = (index: number, tab: any) => {
+    console.log("切换到", tab.label, "索引:", index);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    .scroll-content {
+      flex: 1;
+      height: 100%;
+    }
+
+    .content-wrapper {
+      padding: 32rpx;
+    }
+  }
+</style>
+```
+
+## 高度自适应说明
+
+组件使用了 **Flexbox** 布局来实现高度自适应：
+
+1. **父容器约束**：组件根元素使用 `h-full flex flex-col`，确保继承父级高度
+2. **内容区域自动撑满**：内容区域使用 `flex-1`，自动填充剩余空间
+3. **使用建议**：确保父容器有明确的高度（如 `height: 100vh` 或固定高度）
+
+## 自定义样式
+
+如需自定义样式，可以通过覆盖 CSS 变量或者深度选择器：
+
+```scss
+// 自定义激活颜色
+::v-deep .custom-tabs {
+  .tab-item.active .tab-label {
+    color: #ff6b6b;
+  }
+
+  .tab-indicator {
+    background: linear-gradient(90deg, #ff6b6b 0%, #ff8787 100%);
+  }
+}
+```
+
+## 注意事项
+
+1. 确保传入的 `tabs` 数组中的 `name` 字段与插槽名称一致
+2. 父容器需要有明确的高度，否则组件无法正确撑满
+3. 懒加载模式下，首次进入的 tab 会立即加载，其他 tab 在首次切换时加载
+4. 如果内容需要滚动，请在插槽内使用 `scroll-view` 组件