NeteaseYanxuan · mannix-lei · Nov 12, 2024 · Nov 12, 2024
diff --git a/.changeset/angry-crabs-cheer.md b/.changeset/angry-crabs-cheer.md
@@ -0,0 +1,5 @@
+---
+"@ossa/loki": major
+---
+
+add timeline
diff --git a/packages/ossa-demo/src/app.config.ts b/packages/ossa-demo/src/app.config.ts
@@ -12,6 +12,7 @@ export default {
     "components/button/demo/index",
     "components/color/demo/index",
     "components/countdown/demo/index",
+    "components/timeline/demo/index",
     "components/tag/demo/index",
     "components/icon/demo/index",
     "components/radio/demo/index",

diff --git a/packages/ossa-demo/src/components/timeline/__test__/e2e.js b/packages/ossa-demo/src/components/timeline/__test__/e2e.js
@@ -0,0 +1,86 @@
+/// <reference types="Cypress" />
+
+//author by mannix
+//Date on 2024/11/12
+//Page in Timeline
+
+describe("Timeline", function () {
+  context("Timeline Basic Testing", function () {
+    before(function () {
+      // 进入Timeline页
+      cy.visit("#/components/timeline/demo/index");
+    });
+
+    it("solution #1: 基础用法", function () {
+      cy.get(".ossa-timeline").should(($tab) => {
+        expect($tab).to.have.length(1);
+        expect($tab.find(".ossa-timeline-item")).to.have.length(4);
+      });
+    });
+
+    it("solution #2: 设置颜色", function () {
+      cy.get(".ossa-timeline").should(($tab) => {
+        expect($tab).to.have.length(1);
+        expect($tab.find(".ossa-timeline-item")).to.have.length(4);
+        expect($tab.find(".ossa-timeline-item").eq(1)).to.have.css(
+          "color",
+          "rgb(0, 128, 0)"
+        );
+        expect($tab.find(".ossa-timeline-item").eq(2)).to.have.css(
+          "color",
+          "rgb(255, 0, 0)"
+        );
+        expect($tab.find(".ossa-timeline-item").eq(3)).to.have.css(
+          "color",
+          "rgb(255, 255, 0)"
+        );
+      });
+    });
+
+    it("solution #3: 使用Icon", function () {
+      cy.get(".ossa-timeline").should(($tab) => {
+        expect($tab).to.have.length(1);
+        expect($tab.find(".ossa-timeline-item")).to.have.length(4);
+        expect($tab.find(".ossa-timeline-item").eq(0)).to.have.css(
+          "color",
+          "rgb(7, 193, 96)"
+        );
+        expect($tab.find(".ossa-timeline-item").eq(1)).to.have.css(
+          "color",
+          "rgb(7, 193, 96)"
+        );
+        expect($tab.find(".ossa-timeline-item").eq(2)).to.have.css(
+          "color",
+          "rgb(244, 143, 24)"
+        );
+        expect($tab.find(".ossa-timeline-item").eq(3)).to.have.css(
+          "color",
+          "rgb(217, 217, 217)"
+        );
+      });
+    });
+
+    it("solution #4: 丰富内容", function () {
+      cy.get(".ossa-timeline").should(($tab) => {
+        expect($tab).to.have.length(1);
+        expect($tab.find(".ossa-timeline-item")).to.have.length(4);
+        expect($tab.find(".ossa-timeline-item").eq(0)).to.have.css(
+          "color",
+          "rgb(7, 193, 96)"
+        );
+        expect($tab.find(".ossa-timeline-item").eq(1)).to.have.css(
+          "color",
+          "rgb(244, 143, 24)"
+        );
+        expect($tab.find(".ossa-timeline-item").eq(2)).to.have.css(
+          "color",
+          "rgb(217, 217, 217)"
+        );
+        expect($tab.find(".ossa-timeline-item").eq(3)).to.have.css(
+          "color",
+          "rgb(7, 193, 96)"
+        );
+      });
+    });
+  });
+});
diff --git a/packages/ossa-demo/src/components/timeline/demo/index.config.ts b/packages/ossa-demo/src/components/timeline/demo/index.config.ts
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/ossa-demo/src/components/timeline/demo/index.scss b/packages/ossa-demo/src/components/timeline/demo/index.scss
@@ -0,0 +1 @@
+.demo-timeline {}
diff --git a/packages/ossa-demo/src/components/timeline/demo/index.tsx b/packages/ossa-demo/src/components/timeline/demo/index.tsx
@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from "react";
+import Taro from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import classNames from "classnames";
+import DemoBlock from "../../demoBlock";
+import DemoHeader from "../../demoHeader";
+import { OsTimeline } from "ossaui";
+import DemoTable from "../../demoTable";
+import "./index.scss";
+
+function getClassObject() {
+  const classObject = {
+    page: true,
+    ["demo-tag"]: true,
+  };
+  return classObject;
+}
+
+const initialListApi = {
+  title: "API",
+  head: ["参数", "说明", "类型", "默认值"],
+  data: [
+    {
+      list: ["items", "时间轴数据", "Array", "[]"],
+    },
+    {
+      list: ["onClick", "点击时触发，可选", "event对象", ""],
+    },
+    {
+      list: ["pending", "是否有未完成项", "boolean", "false"],
+    },
+  ],
+};
+
+const initialItemApi = {
+  title: '',
+  head: ["items参数", "说明", "类型", "默认值"],
+  data: [
+    {
+      list: ["title", "标题", "string", ""],
+    },
+    {
+      list: ["color", "颜色", "string", ""],
+    },
+    {
+      list: ["icon", "图标", "string", ""],
+    },
+    {
+      list: ["content", "内容", "Array", ""],
+    },
+    {
+      list: ["iconColor", "图标颜色", "string", "#7F7F7F"],
+    },
+  ],
+};
+const initialListEvent = {
+  title: "Event",
+  head: ["函数名", "说明", "参数"],
+  data: [
+    {
+      list: ["onClick", "点击时触发，可选", "event对象"],
+    },
+  ],
+};
+
+export default function Index() {
+  const [listApi] = useState(initialListApi);
+  const [listItemApi] = useState(initialItemApi);
+
+  const [listEvent] = useState(initialListEvent);
+  const classObject = getClassObject(); //组件修饰
+
+  useEffect(() => {
+    Taro.setNavigationBarTitle({
+      title: "Timeline 时间轴",
+    });
+  }, []);
+
+  return (
+    <View className={classNames(classObject)}>
+      <DemoHeader title='Timeline 时间轴'></DemoHeader>
+      <DemoBlock title='基础用法'>
+        <View className='block-section'>
+          <OsTimeline
+            items={[
+              { title: "刷牙洗脸" },
+              { title: "吃早餐" },
+              { title: "上班" },
+              { title: "睡觉" },
+            ]}
+          ></OsTimeline>
+        </View>
+      </DemoBlock>
+
+      <DemoBlock title='设置颜色'>
+        <View className='block-section'>
+          <OsTimeline
+            items={[
+              { title: "刷牙洗脸" },
+              { title: "吃早餐", color: "green" },
+              { title: "上班", color: "red" },
+              { title: "睡觉", color: "yellow" },
+            ]}
+          ></OsTimeline>
+        </View>
+      </DemoBlock>
+
+      <DemoBlock title='使用Icon'>
+        <View className='block-section'>
+          <OsTimeline
+            items={[
+              {
+                title: "刷牙洗脸",
+                iconColor: "#07c160",
+                icon: "check-selected",
+              },
+              { title: "吃早餐", icon: "record", iconColor: "#07c160" },
+              { title: "上班", icon: "classify", iconColor: "#F48F18" },
+              { title: "睡觉", icon: "delete-pressed", iconColor: "#d9d9d9" },
+            ]}
+          ></OsTimeline>
+        </View>
+      </DemoBlock>
+
+      <DemoBlock title='丰富内容'>
+        <View className='block-section'>
+          <OsTimeline
+            pending
+            items={[
+              {
+                title: "刷牙洗脸",
+                content: ["大概8:00"],
+                iconColor: "#07c160",
+                icon: "check-selected",
+              },
+              {
+                title: "吃早餐",
+                content: ["牛奶+面包", "餐后记得吃药"],
+                icon: "record",
+                iconColor: "#F48F18",
+              },
+              {
+                title: "上班",
+                iconColor: "#d9d9d9",
+                content: ["查看邮件", "写PPT", "发送PPT给领导"],
+                icon: "avatar",
+              },
+              {
+                title: "睡觉",
+                content: ["不超过23:00"],
+                icon: "choose-selected",
+                iconColor: "#07c160",
+              },
+            ]}
+          ></OsTimeline>
+        </View>
+      </DemoBlock>
+      <DemoBlock>
+        <DemoTable list={listApi}></DemoTable>
+      </DemoBlock>
+
+      <DemoBlock>
+        <DemoTable list={listItemApi}></DemoTable>
+      </DemoBlock>
+
+      <DemoBlock>
+        <DemoTable list={listEvent}></DemoTable>
+      </DemoBlock>
+    </View>
+  );
+}
diff --git a/packages/ossa-demo/src/pages/dataDisplay/index.tsx b/packages/ossa-demo/src/pages/dataDisplay/index.tsx
@@ -38,6 +38,10 @@ export default class Index extends Component<null, IState> {
           title: "倒计时",
           id: "countdown",
         },
+        {
+          title: "时间轴",
+          id: "timeline",
+        },
       ],
     };
   }

diff --git a/packages/ossa-doc/docs/组件/timeline.md b/packages/ossa-doc/docs/组件/timeline.md
@@ -0,0 +1,108 @@
+---
+sidebar_position: 30
+demo_url: "https://neteaseyanxuan.github.io/OSSA/#/components/timeline/demo/index"
+---
+
+# Timeline 时间轴
+
+## 介绍
+
+时间轴
+
+## 用法
+
+### 基础用法
+
+```jsx
+<OsTimeline
+  items={[
+    { title: "开心" },
+    { title: "写代码" },
+    { title: "下班" },
+    { title: "睡觉" },
+  ]}
+></OsTimeline>
+```
+
+### 设置颜色
+
+```jsx
+<OsTimeline
+  items={[
+    { title: "开心", color: "normal" },
+    { title: "写代码", color: "warning" },
+    { title: "下班", color: "error" },
+  ]}
+></OsTimeline>
+```
+
+### 使用 Icon
+
+```jsx
+<OsTimeline
+  items={[
+    { title: "开心", icon: "check-selected" },
+    { title: "写代码", icon: "record" },
+    { title: "下班", icon: "avatar" },
+    { title: "睡觉", icon: "choose-selected" },
+  ]}
+></OsTimeline>
+```
+
+### 丰富内容
+
+```jsx
+<OsTimeline
+  items={[
+    {
+      title: "刷牙洗脸",
+      content: ["大概8:00"],
+      iconColor: "#07c160",
+      icon: "check-selected",
+    },
+    {
+      title: "吃早餐",
+      content: ["牛奶+面包", "餐后记得吃药"],
+      icon: "record",
+      iconColor: "#F48F18",
+    },
+    {
+      title: "上班",
+      iconColor: "#d9d9d9",
+      content: ["查看邮件", "写PPT", "发送PPT给领导"],
+      icon: "avatar",
+    },
+    {
+      title: "睡觉",
+      content: ["不超过23:00"],
+      icon: "choose-selected",
+      iconColor: "#07c160",
+    },
+  ]}
+></OsTimeline>
+```
+
+## API
+
+### 属性
+
+| 参数         | 说明                                  | 类型    | 默认值                                                  |
+| ------------ | ------------------------------------- | ------- | ------------------------------------------------------- |
+| items        | 时间轴的数据                            | object[]| []                                                      |
+| pending      | 最后一项是否为未完成态                    | boolean | false                                                   |
+
+### items
+| 参数         | 说明                                  | 类型    | 默认值                                                  |
+| ------------ | ------------------------------------- | ------- | ------------------------------------------------------- |
+| title        | 标题                                  | string  | -                                                       |
+| content      | 内容                                  | string[]| []                                                      |
+| icon         | 图标                                  | string  | -                                                       |
+| iconColor    | 图标颜色                               | string  | #7F7F7                                                  |
+| color        | 颜色                                  | string  | -                                                       |
+
+
+### 方法
+
+| 函数名  | 说明             | 参数       |
+| ------- | ---------------- | ---------- |
+| onClick | 点击时触发，可选 | event 对象 |