@tendaui/components 1.2.4 → 1.3.0

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/ListItem.tsx

@@ -1,36 +1,36 @@
-import React, { forwardRef } from "react";
-import classNames from "classnames";
-import useConfig from "../hooks/useConfig";
-import { TdListItemProps } from "./type";
-import { StyledProps } from "../common";
-
-export interface ListItemProps extends TdListItemProps, StyledProps {
-  /**
-   * 文本内容
-   */
-  children?: React.ReactNode;
-  content?: React.ReactNode;
-}
-
-/**
- * 列表组件
- */
-const ListItem = forwardRef<HTMLLIElement, ListItemProps>((props, ref) => {
-  const { children, className, style, action, content } = props;
-  const { classPrefix } = useConfig();
-
-  const actionElement = action && <ul className={`${classPrefix}-list-item__action`}>{action}</ul>;
-
-  return (
-    <li ref={ref} className={classNames(`${classPrefix}-list-item`, className)} style={style}>
-      <div className={`${classPrefix}-list-item-main`}>
-        {children ? children : content}
-        {actionElement}
-      </div>
-    </li>
-  );
-});
-
-ListItem.displayName = "ListItem";
-
-export default ListItem;
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import { TdListItemProps } from "./type";
+import { StyledProps } from "../common";
+
+export interface ListItemProps extends TdListItemProps, StyledProps {
+  /**
+   * 文本内容
+   */
+  children?: React.ReactNode;
+  content?: React.ReactNode;
+}
+
+/**
+ * 列表组件
+ */
+const ListItem = forwardRef<HTMLLIElement, ListItemProps>((props, ref) => {
+  const { children, className, style, action, content } = props;
+  const { classPrefix } = useConfig();
+
+  const actionElement = action && <ul className={`${classPrefix}-list-item__action`}>{action}</ul>;
+
+  return (
+    <li ref={ref} className={classNames(`${classPrefix}-list-item`, className)} style={style}>
+      <div className={`${classPrefix}-list-item-main`}>
+        {children ? children : content}
+        {actionElement}
+      </div>
+    </li>
+  );
+});
+
+ListItem.displayName = "ListItem";
+
+export default ListItem;