@tendaui/components 1.2.4 → 1.3.1

package/ip-input/_example/full-featured.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import IPInput from "../IPInput";
+
+const FullFeaturedExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <IPInput
+        value={value}
+        onChange={setValue}
+        allowIPv6={true}
+        allowCIDR={true}
+        showClear={true}
+        placeholder="输入 IPv4 或 IPv6 地址"
+        tips="支持 IPv4、IPv6 和 CIDR 格式"
+      />
+      <div
+        style={{
+          padding: "12px",
+          background: "#f5f5f5",
+          borderRadius: "4px",
+          fontSize: "12px"
+        }}
+      >
+        <strong>当前值：</strong>
+        {value || "(空)"}
+      </div>
+    </div>
+  );
+};
+
+export default FullFeaturedExample;

package/ip-input/_example/ipv6.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import IPInput from "../IPInput";
+
+const IPv6Example = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <IPInput
+        value={value}
+        onChange={(val) => {
+          setValue(val);
+          console.log("值:", val);
+        }}
+        allowIPv6={true}
+        allowCIDR={true}
+        placeholder="2001:db8::1"
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>当前值: {value || "(空)"}</div>
+    </div>
+  );
+};
+
+export default IPv6Example;

package/ip-input/_example/keyboard-navigation.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import IPInput from "../IPInput";
+
+const KeyboardNavigationExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <div style={{ color: "#666", fontSize: "12px" }}>
+      <p style={{ fontWeight: "bold" }}>键盘操作说明：</p>
+      <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+        <li>输入 3 位数字自动跳转到下一段</li>
+        <li>输入 . 或空格跳转到下一段</li>
+        <li>左/右箭头键在段之间移动</li>
+        <li>在段开头按 Backspace 跳转到上一段</li>
+      </ul>
+    </div>
+    <IPInput placeholder="192.168.0.1" autoFocus />
+  </div>
+);
+
+export default KeyboardNavigationExample;

package/ip-input/_example/paste-demo.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import IPInput from "../IPInput";
+
+const PasteDemoExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ color: "#666", fontSize: "12px" }}>
+        尝试粘贴以下内容：
+        <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+          <li>192.168.0.1</li>
+          <li>192.168.0.1/24</li>
+          <li>abc 10.0.0.1 xyz（会自动提取 IP）</li>
+          <li>2001:db8::1（需要开启 IPv6）</li>
+        </ul>
+      </div>
+      <IPInput value={value} onChange={setValue} allowCIDR={true} allowIPv6={true} showClear={true} />
+      <div style={{ color: "#666", fontSize: "12px" }}>当前值: {value || "(空)"}</div>
+    </div>
+  );
+};
+
+export default PasteDemoExample;

package/ip-input/_example/states.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import IPInput from "../IPInput";
+
+const StatesExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>正常状态</div>
+      <IPInput defaultValue="192.168.0.1" />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>禁用状态</div>
+      <IPInput defaultValue="192.168.0.1" disabled />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>只读状态</div>
+      <IPInput defaultValue="192.168.0.1" readOnly />
+    </div>
+  </div>
+);
+
+export default StatesExample;

package/ip-input/_example/with-cidr.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import IPInput from "../IPInput";
+
+const WithCIDRExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <IPInput
+        value={value}
+        onChange={(val) => {
+          setValue(val);
+          console.log("值:", val);
+        }}
+        allowCIDR={true}
+        showClear={true}
+        placeholder="192.168.0.1/24"
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>当前值: {value || "(空)"}</div>
+    </div>
+  );
+};
+
+export default WithCIDRExample;

package/layout/_example/combine-left.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Layout } from "../index";
+
+const { Header, Content, Footer, Aside } = Layout;
+
+// 定义演示用的样式
+const demoStyles = {
+  header: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    lineHeight: "64px",
+    textAlign: "center" as const
+  },
+  aside: {
+    background: "var(--td-brand-color-8)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    background: "var(--td-brand-color-5)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    height: "120px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "12px",
+    textAlign: "center" as const,
+    lineHeight: "48px"
+  }
+};
+
+const CombineLeftLayout = () => (
+  <Layout>
+    <Header style={demoStyles.header}>Header</Header>
+    <Layout>
+      <Aside style={demoStyles.aside}>Aside</Aside>
+      <Layout>
+        <Content style={demoStyles.content}>Content</Content>
+        <Footer style={demoStyles.footer}>Copyright @ 2019-2024 All Rights Reserved</Footer>
+      </Layout>
+    </Layout>
+  </Layout>
+);
+
+export default CombineLeftLayout;

package/layout/_example/combine-right.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Layout } from "../index";
+
+const { Header, Content, Footer, Aside } = Layout;
+
+// 定义演示用的样式
+const demoStyles = {
+  header: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    lineHeight: "64px",
+    textAlign: "center" as const
+  },
+  aside: {
+    background: "var(--td-brand-color-8)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    background: "var(--td-brand-color-5)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    height: "120px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "12px",
+    textAlign: "center" as const,
+    lineHeight: "48px"
+  }
+};
+
+const CombineRightLayout = () => (
+  <Layout>
+    <Header style={demoStyles.header}>Header</Header>
+    <Layout>
+      <Layout>
+        <Content style={demoStyles.content}>Content</Content>
+        <Footer style={demoStyles.footer}>Copyright @ 2019-2024 All Rights Reserved</Footer>
+      </Layout>
+      <Aside style={demoStyles.aside}>Aside</Aside>
+    </Layout>
+  </Layout>
+);
+
+export default CombineRightLayout;

package/layout/_example/custom-aside-width.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Layout } from "../index";
+
+const { Header, Content, Footer, Aside } = Layout;
+
+// 定义演示用的样式
+const demoStyles = {
+  header: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    lineHeight: "64px",
+    textAlign: "center" as const
+  },
+  aside: {
+    background: "var(--td-brand-color-8)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    background: "var(--td-brand-color-5)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    height: "120px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "12px",
+    textAlign: "center" as const,
+    lineHeight: "48px"
+  }
+};
+
+const CustomAsideWidthLayout = () => (
+  <Layout>
+    <Header style={demoStyles.header}>Header</Header>
+    <Layout>
+      <Aside width="80px" style={demoStyles.aside}>
+        Aside (80px)
+      </Aside>
+      <Layout>
+        <Content style={demoStyles.content}>Content</Content>
+        <Footer style={demoStyles.footer}>Copyright @ 2019-2024 All Rights Reserved</Footer>
+      </Layout>
+    </Layout>
+  </Layout>
+);
+
+export default CustomAsideWidthLayout;

package/layout/_example/custom-height.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Layout } from "../index";
+
+const { Header, Content, Footer } = Layout;
+
+// 定义演示用的样式
+const demoStyles = {
+  header: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    lineHeight: "64px",
+    textAlign: "center" as const
+  },
+  content: {
+    background: "var(--td-brand-color-5)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    height: "120px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "12px",
+    textAlign: "center" as const,
+    lineHeight: "48px"
+  }
+};
+
+const CustomHeightLayout = () => (
+  <Layout>
+    <Header height="80px" style={demoStyles.header}>
+      Header (80px)
+    </Header>
+    <Content style={demoStyles.content}>Content</Content>
+    <Footer height="60px" style={demoStyles.footer}>
+      Footer (60px)
+    </Footer>
+  </Layout>
+);
+
+export default CustomHeightLayout;

package/layout/_example/double-sidebar.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Layout } from "../index";
+
+const { Header, Content, Footer, Aside } = Layout;
+
+// 定义演示用的样式
+const demoStyles = {
+  header: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    lineHeight: "64px",
+    textAlign: "center" as const
+  },
+  aside: {
+    background: "var(--td-brand-color-8)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    background: "var(--td-brand-color-5)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    height: "120px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "12px",
+    textAlign: "center" as const,
+    lineHeight: "48px"
+  }
+};
+
+const DoubleSidebarLayout = () => (
+  <Layout>
+    <Aside width="100px" style={demoStyles.aside}>
+      Left Aside
+    </Aside>
+    <Layout>
+      <Header style={demoStyles.header}>Header</Header>
+      <Content style={demoStyles.content}>Content</Content>
+      <Footer style={demoStyles.footer}>Copyright @ 2019-2024 All Rights Reserved</Footer>
+    </Layout>
+    <Aside width="200px" style={demoStyles.aside}>
+      Right Aside
+    </Aside>
+  </Layout>
+);
+
+export default DoubleSidebarLayout;

package/layout/_example/side-navigation-right.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Layout } from "../index";
+
+const { Header, Content, Footer, Aside } = Layout;
+
+// 定义演示用的样式
+const demoStyles = {
+  header: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    lineHeight: "64px",
+    textAlign: "center" as const
+  },
+  aside: {
+    background: "var(--td-brand-color-8)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    background: "var(--td-brand-color-5)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    height: "120px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "12px",
+    textAlign: "center" as const,
+    lineHeight: "48px"
+  }
+};
+
+const SideNavigationRightLayout = () => (
+  <Layout>
+    <Layout>
+      <Content style={demoStyles.content}>Content</Content>
+      <Footer style={demoStyles.footer}>Copyright @ 2019-2024 All Rights Reserved</Footer>
+    </Layout>
+    <Aside style={demoStyles.aside}>Aside</Aside>
+  </Layout>
+);
+
+export default SideNavigationRightLayout;

package/layout/_example/side-navigation.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Layout } from "../index";
+
+const { Header, Content, Footer, Aside } = Layout;
+
+// 定义演示用的样式
+const demoStyles = {
+  header: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    lineHeight: "64px",
+    textAlign: "center" as const
+  },
+  aside: {
+    background: "var(--td-brand-color-8)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    background: "var(--td-brand-color-5)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    height: "120px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "12px",
+    textAlign: "center" as const,
+    lineHeight: "48px"
+  }
+};
+
+const SideNavigationLayout = () => (
+  <Layout>
+    <Aside style={demoStyles.aside}>Aside</Aside>
+    <Layout>
+      <Content style={demoStyles.content}>Content</Content>
+      <Footer style={demoStyles.footer}>Copyright @ 2019-2024 All Rights Reserved</Footer>
+    </Layout>
+  </Layout>
+);
+
+export default SideNavigationLayout;

package/layout/_example/top-navigation.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Layout } from "../index";
+
+const { Header, Content, Footer } = Layout;
+
+// 定义演示用的样式
+const demoStyles = {
+  header: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    lineHeight: "64px",
+    textAlign: "center" as const
+  },
+  content: {
+    background: "var(--td-brand-color-5)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "14px",
+    height: "120px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  footer: {
+    background: "var(--td-brand-color-9)",
+    color: "var(--td-text-color-anti)",
+    fontSize: "12px",
+    textAlign: "center" as const,
+    lineHeight: "48px"
+  }
+};
+
+const TopNavigationLayout = () => (
+  <Layout>
+    <Header style={demoStyles.header}>Header</Header>
+    <Content style={demoStyles.content}>Content</Content>
+    <Footer style={demoStyles.footer}>Copyright @ 2019-2024 All Rights Reserved</Footer>
+  </Layout>
+);
+
+export default TopNavigationLayout;

package/list/_example/async-loading.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const AsyncLoadingList = () => {
+  const [asyncLoading, setAsyncLoading] = useState<React.ReactNode>("");
+
+  const listData = [
+    { id: 1, content: "列表内容列表内容列表内容" },
+    { id: 2, content: "列表内容列表内容列表内容" },
+    { id: 3, content: "列表内容列表内容列表内容" },
+    { id: 4, content: "列表内容列表内容列表内容" }
+  ];
+
+  const handleAsyncLoading = (val: string) => {
+    if (val === "loading-custom") {
+      setAsyncLoading(<div style={{ textAlign: "center", padding: "12px", color: "#999" }}>没有更多数据了</div>);
+    } else {
+      setAsyncLoading(val);
+    }
+  };
+
+  const onLoadMore = () => {
+    console.log("加载更多");
+    handleAsyncLoading("loading");
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+        <button onClick={() => handleAsyncLoading("load-more")}>显示加载更多</button>
+        <button onClick={() => handleAsyncLoading("loading")}>显示加载中</button>
+        <button onClick={() => handleAsyncLoading("loading-custom")}>自定义底部</button>
+        <button onClick={() => handleAsyncLoading("")}>隐藏加载状态</button>
+      </div>
+      <List asyncLoading={asyncLoading} onLoadMore={onLoadMore}>
+        {listData.map((item) => (
+          <ListItem key={item.id}>{item.content}</ListItem>
+        ))}
+      </List>
+    </div>
+  );
+};
+
+export default AsyncLoadingList;

package/list/_example/default.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const DefaultList = () => {
+  const listData = [
+    { id: 1, content: "列表内容的描述性文字" },
+    { id: 2, content: "列表内容的描述性文字" },
+    { id: 3, content: "列表内容的描述性文字" },
+    { id: 4, content: "列表内容的描述性文字" }
+  ];
+
+  return (
+    <List>
+      {listData.map((item) => (
+        <ListItem key={item.id}>{item.content}</ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default DefaultList;

package/list/_example/header-footer.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const HeaderFooterList = () => {
+  const listData = [
+    { id: 1, content: "列表内容列表内容列表内容" },
+    { id: 2, content: "列表内容列表内容列表内容" },
+    { id: 3, content: "列表内容列表内容列表内容" },
+    { id: 4, content: "列表内容列表内容列表内容" }
+  ];
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>字符串头部/底部</h4>
+        <List header="这里是 Header" footer="这里是 Footer">
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>自定义头部/底部</h4>
+        <List
+          header={<div style={{ fontWeight: "bold", color: "var(--td-brand-color)" }}>自定义 Header</div>}
+          footer={<div style={{ textAlign: "center", color: "#999" }}>自定义 Footer</div>}
+        >
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+    </div>
+  );
+};
+
+export default HeaderFooterList;