@donglegeyu/company-ui 1.2.7 → 1.2.9

package/dist/cjs/basic-components/CompanyDrawer/index.js

@@ -25,8 +25,11 @@ module.exports = __toCommonJS(CompanyDrawer_exports);
 var import_antd = require("antd");
 var import_theme = require("../../theme");
 var import_jsx_runtime = require("react/jsx-runtime");
-var CompanyDrawer = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Drawer, { ...props }) });
+var CompanyDrawer = ({
+  closable = { placement: "end" },
+  ...restProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Drawer, { closable, ...restProps }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/basic-components/CompanyFloatButton/index.d.ts

@@ -1,3 +1,13 @@
 import React from "react";
-import type { FloatButtonProps } from "antd";
-export declare const CompanyFloatButton: React.FC<FloatButtonProps>;
+import { FloatButton } from "antd";
+import type { FloatButtonProps, FloatButtonRef, FloatButtonGroupProps } from "antd";
+export type CompanyFloatButtonProps = FloatButtonProps;
+export type CompanyFloatButtonRef = FloatButtonRef;
+export type CompanyFloatButtonGroupProps = FloatButtonGroupProps;
+export type CompanyFloatButtonBackTopProps = React.ComponentProps<typeof FloatButton.BackTop>;
+export declare const CompanyFloatButton: React.ForwardRefExoticComponent<FloatButtonProps & React.RefAttributes<import("antd/es/float-button/FloatButton").FloatButtonElement>> & {
+    Group: React.FC<Readonly<FloatButtonGroupProps>>;
+    BackTop: React.ForwardRefExoticComponent<import("antd/es/float-button/BackTop").BackTopProps & React.RefAttributes<FloatButtonRef>>;
+    _InternalPanelDoNotUseOrYouWillBeFired: React.FC<import("antd/es/float-button/PurePanel").PurePanelProps>;
+};
+export declare const CompanyBackTop: React.FC<CompanyFloatButtonBackTopProps>;

package/dist/cjs/basic-components/CompanyFloatButton/index.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,21 +16,45 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/basic-components/CompanyFloatButton/index.tsx
 var CompanyFloatButton_exports = {};
 __export(CompanyFloatButton_exports, {
+  CompanyBackTop: () => CompanyBackTop,
   CompanyFloatButton: () => CompanyFloatButton
 });
 module.exports = __toCommonJS(CompanyFloatButton_exports);
+var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_theme = require("../../theme");
 var import_jsx_runtime = require("react/jsx-runtime");
-var CompanyFloatButton = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.FloatButton, { ...props }) });
+var CompanyFloatButtonComponent = import_react.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.FloatButton, { ref, ...props }) });
+});
+var CompanyFloatButtonGroup = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.FloatButton.Group, { ...props }) });
+};
+var CompanyFloatButtonBackTop = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.FloatButton.BackTop, { ...props }) });
+};
+var CompanyFloatButton = Object.assign(CompanyFloatButtonComponent, {
+  Group: CompanyFloatButtonGroup,
+  BackTop: CompanyFloatButtonBackTop
+});
+var CompanyBackTop = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.FloatButton.BackTop, { ...props }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CompanyBackTop,
   CompanyFloatButton
 });

package/dist/cjs/basic-components/CompanyForm/index.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 import type { FormProps } from "antd";
+import "./index.scss";
+export interface CompanyFormProps extends FormProps {
+    labelMaxWidth?: number;
+    labelAlignVertical?: 'center' | 'start';
+}
 export declare const CompanyForm: (<Values = any>(props: FormProps<Values> & {
     children?: React.ReactNode;
 } & React.RefAttributes<import("@rc-component/form/lib/interface").FormRef<Values>>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>) & Pick<React.FC<{}>, "displayName"> & {
@@ -8,7 +13,7 @@ export declare const CompanyForm: (<Values = any>(props: FormProps<Values> & {
     useWatch: typeof import("@rc-component/form").useWatch;
     Item: (<Values_1 = any>(props: import("antd").FormItemProps<Values_1>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>) & {
         useStatus: () => {
-            status?: "" | "success" | "warning" | "error" | "validating" | undefined;
+            status?: "" | "success" | "error" | "warning" | "validating" | undefined;
             errors: React.ReactNode[];
             warnings: React.ReactNode[];
         };

package/dist/cjs/basic-components/CompanyForm/index.js

@@ -24,10 +24,50 @@ __export(CompanyForm_exports, {
 module.exports = __toCommonJS(CompanyForm_exports);
 var import_antd = require("antd");
 var import_theme = require("../../theme");
+var import_index = require("./index.scss");
 var import_jsx_runtime = require("react/jsx-runtime");
-var CompanyForm = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Form, { ...props }) });
+var requiredMarkRight = (labelNode, { required }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  labelNode,
+  required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#ff4d4f", marginLeft: 4 }, children: "*" })
+] });
+var CompanyFormComponent = ({
+  labelMaxWidth = 8,
+  labelAlignVertical = "center",
+  layout = "horizontal",
+  requiredMark,
+  className,
+  style,
+  ...restProps
+}) => {
+  const mergedStyle = {
+    ["--company-label-max-width"]: `${labelMaxWidth}em`,
+    ...style
+  };
+  const mergedRequiredMark = requiredMark !== void 0 ? requiredMark : layout === "vertical" ? requiredMarkRight : true;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: import_theme.companyTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_antd.Form,
+    {
+      ...restProps,
+      layout,
+      requiredMark: mergedRequiredMark,
+      "data-label-align": labelAlignVertical,
+      className: `company-form${className ? ` ${className}` : ""}`,
+      style: mergedStyle
+    }
+  ) });
 };
+var CompanyForm = Object.assign(CompanyFormComponent, {
+  Item: import_antd.Form.Item,
+  List: import_antd.Form.List,
+  Provider: import_antd.Form.Provider,
+  useForm: import_antd.Form.useForm,
+  useWatch: import_antd.Form.useWatch,
+  useFormItemStatus: import_antd.Form.useFormItemStatus,
+  ErrorList: import_antd.Form.ErrorList,
+  useFormInstance: import_antd.Form.useFormInstance,
+  PREFIX: import_antd.Form.PREFIX,
+  NAME: import_antd.Form.NAME
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CompanyForm

package/dist/cjs/basic-components/CompanyForm/index.scss

@@ -0,0 +1,63 @@
+.company-form {
+  --company-label-max-width: 8em;
+
+  &[data-label-align="start"] {
+    .ant-form-item-horizontal .ant-form-item-label {
+      align-items: flex-start;
+    }
+  }
+
+  .ant-form-item-horizontal.label-top {
+    .ant-form-item-label {
+      align-items: flex-start !important;
+      padding-top: 0.4em;
+
+      > label {
+        align-items: flex-start !important;
+
+        &::before {
+          align-self: flex-start !important;
+          top: 0 !important;
+        }
+      }
+    }
+  }
+
+  .ant-form-item-horizontal {
+    .ant-form-item-label {
+      width: var(--company-label-max-width);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-form-item-label > label {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      justify-content: flex-end;
+      height: auto;
+      white-space: normal;
+      word-break: break-word;
+      line-height: 1.14;
+      align-items: flex-end;
+
+      &::after {
+        flex-shrink: 0;
+        align-self: flex-end;
+      }
+
+      &::before {
+        flex-shrink: 0;
+        align-self: flex-start;
+        position: relative;
+        top: 0.25em;
+      }
+    }
+
+    .ant-form-item-control {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}

package/dist/cjs/shared-components/BaseInfoForm/index.d.ts

@@ -14,11 +14,13 @@ export interface FormField {
     }[];
     rules?: any[];
     required?: boolean;
+    rows?: number;
 }
 export interface BaseInfoFormProps {
     value: Record<string, any>;
     fields: FormField[];
     layout?: 'horizontal' | 'vertical';
+    labelMaxWidth?: number;
     onChange?: (value: Record<string, any>) => void;
     onFieldChange?: (field: string, value: any) => void;
 }

package/dist/cjs/shared-components/BaseInfoForm/index.js

@@ -31,10 +31,11 @@ var BaseInfoForm = (0, import_react.forwardRef)(({
   value,
   fields,
   layout = "horizontal",
+  labelMaxWidth = 8,
   onChange,
   onFieldChange
 }, ref) => {
-  const [form] = import_antd.Form.useForm();
+  const [form] = import_basic_components.CompanyForm.useForm();
   const [contentWidth, setContentWidth] = (0, import_react.useState)(1200);
   const formRef = (0, import_react.useRef)(null);
   const prevValueRef = (0, import_react.useRef)(value);
@@ -114,6 +115,7 @@ var BaseInfoForm = (0, import_react.forwardRef)(({
           {
             placeholder: field.placeholder ?? "请输入",
             disabled: field.disabled,
+            rows: field.rows,
             style: { width: "100%" }
           }
         );
@@ -130,25 +132,34 @@ var BaseInfoForm = (0, import_react.forwardRef)(({
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: formRef, className: "base-info-form", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_antd.Form,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
     {
-      form,
-      initialValues: value,
-      layout,
-      onValuesChange: handleValuesChange,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Row, { gutter: 24, children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Col, { span: getColSpan(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_antd.Form.Item,
+      ref: formRef,
+      className: "base-info-form",
+      style: { ["--company-label-max-width"]: `${labelMaxWidth}em` },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_basic_components.CompanyForm,
         {
-          label: field.label,
-          name: field.name,
-          rules: field.rules,
-          required: field.required,
-          children: renderField(field)
+          form,
+          initialValues: value,
+          layout,
+          onValuesChange: handleValuesChange,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Row, { gutter: 24, children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Col, { span: getColSpan(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_basic_components.CompanyForm.Item,
+            {
+              label: field.label,
+              name: field.name,
+              rules: field.rules,
+              required: field.required,
+              className: field.type === "textarea" ? "label-top" : void 0,
+              children: renderField(field)
+            }
+          ) }, field.name)) })
         }
-      ) }, field.name)) })
+      )
     }
-  ) });
+  );
 });
 BaseInfoForm.displayName = "BaseInfoForm";
 var BaseInfoForm_default = BaseInfoForm;

package/dist/cjs/shared-components/BaseInfoForm/index.scss

@@ -1,4 +1,5 @@
 .base-info-form.base-info-form {
+  --company-label-max-width: 8em;
   width: 100%;
 
   .ant-form-item.ant-form-item {
@@ -8,11 +9,14 @@
   }
 
   .ant-form-item-label.ant-form-item-label {
-    width: 80px;
+    width: var(--company-label-max-width);
     flex-shrink: 0;
   }
 
   .ant-form-item-label > label {
     justify-content: flex-end;
+    white-space: normal;
+    word-break: break-word;
+    align-items: flex-start;
   }
 }

package/dist/cjs/shared-components/FilterOptionsDrawer/index.js

@@ -46,7 +46,7 @@ function FilterOptionsDrawer({
   onClose,
   onSave
 }) {
-  const [schemeName, setSchemeName] = (0, import_react.useState)(editName);
+  const [form] = import_basic_components.CompanyForm.useForm();
   const [editingId, setEditingId] = (0, import_react.useState)(editId);
   const [localOptions, setLocalOptions] = (0, import_react.useState)([]);
   const [dragIndex, setDragIndex] = (0, import_react.useState)(null);
@@ -61,25 +61,28 @@ function FilterOptionsDrawer({
           defaultValue: opt.defaultValue
         }))
       );
-      setSchemeName(editName);
+      form.setFieldsValue({ schemeName: editName });
       setEditingId(editId);
     }
-  }, [open, options, editName, editId]);
+  }, [open, options, editName, editId, form]);
   const handleClose = (0, import_react.useCallback)(() => {
     onClose == null ? void 0 : onClose();
   }, [onClose]);
-  const handleSave = (0, import_react.useCallback)(() => {
-    if (!schemeName.trim())
-      return;
-    const selectedCount = localOptions.filter((opt) => opt.checked).length;
-    if (selectedCount === 0)
-      return;
-    onSave == null ? void 0 : onSave({
-      name: schemeName.trim(),
-      id: editingId,
-      options: [...localOptions]
-    });
-  }, [schemeName, localOptions, editingId, onSave]);
+  const handleSave = (0, import_react.useCallback)(async () => {
+    try {
+      const values = await form.validateFields();
+      const name = values.schemeName.trim();
+      const selectedCount = localOptions.filter((opt) => opt.checked).length;
+      if (selectedCount === 0)
+        return;
+      onSave == null ? void 0 : onSave({
+        name,
+        id: editingId,
+        options: [...localOptions]
+      });
+    } catch {
+    }
+  }, [form, localOptions, editingId, onSave]);
   const handleCheckedChange = (0, import_react.useCallback)((index, checked) => {
     setLocalOptions(
       (prev) => prev.map((item, i) => i === index ? { ...item, checked } : item)
@@ -123,22 +126,22 @@ function FilterOptionsDrawer({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_basic_components.CompanyButton, { type: "primary", style: { marginLeft: 8 }, onClick: handleSave, children: "保存" })
       ] }),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "view-name-section", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 14, fontWeight: 400, color: "rgba(0, 0, 0, 0.85)", marginBottom: 4 }, children: [
-            "视图名称",
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#ff4d4f", marginLeft: 4 }, children: "*" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_basic_components.CompanyInput,
-            {
-              value: schemeName,
-              onChange: (e) => setSchemeName(e.target.value),
-              placeholder: "请输入视图名称（最多8个字）",
-              maxLength: 8,
-              showCount: true
-            }
-          )
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_basic_components.CompanyForm, { layout: "vertical", form, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_basic_components.CompanyForm.Item,
+          {
+            label: "视图名称",
+            name: "schemeName",
+            rules: [{ required: true, message: "请输入视图名称" }],
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_basic_components.CompanyInput,
+              {
+                placeholder: "请输入视图名称（最多8个字）",
+                maxLength: 8,
+                showCount: true
+              }
+            )
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "rgba(0, 0, 0, 0.45)", marginTop: 24, marginBottom: 8 }, children: "勾选并调整视图条件顺序后保存" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: localOptions.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",

package/dist/cjs/template-components/DetailPageTemplate/index.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import './index.scss';
+export interface DetailFieldItem {
+    label: string;
+    value: ReactNode;
+}
+export interface DetailTagItem {
+    text: ReactNode;
+    variant?: 'default' | 'volcano' | 'success' | 'warning';
+}
+export interface DetailTabItem {
+    key: string;
+    label: ReactNode;
+    children: ReactNode;
+    disabled?: boolean;
+}
+interface DetailPageTemplateProps {
+    title: string;
+    showBack?: boolean;
+    onBack?: () => void;
+    titleActions?: ReactNode;
+    avatar?: ReactNode;
+    primaryName?: ReactNode;
+    tags?: DetailTagItem[];
+    infoFields?: DetailFieldItem[];
+    infoColumns?: number;
+    infoArea?: ReactNode;
+    tabs?: DetailTabItem[];
+    activeTab?: string;
+    onTabChange?: (key: string) => void;
+    showDivider?: boolean;
+    children?: ReactNode;
+}
+export default function DetailPageTemplate({ title, showBack, onBack, titleActions, avatar, primaryName, tags, infoFields, infoColumns, infoArea, tabs, activeTab: controlledActiveTab, onTabChange, showDivider, children, }: DetailPageTemplateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/template-components/DetailPageTemplate/index.js

@@ -0,0 +1,152 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/template-components/DetailPageTemplate/index.tsx
+var DetailPageTemplate_exports = {};
+__export(DetailPageTemplate_exports, {
+  default: () => DetailPageTemplate
+});
+module.exports = __toCommonJS(DetailPageTemplate_exports);
+var import_react = require("react");
+var import_basic_components = require("../../basic-components");
+var import_PageTitle = __toESM(require("../../shared-components/PageTitle"));
+var import_index = require("./index.scss");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DetailPageTemplate({
+  title,
+  showBack = false,
+  onBack,
+  titleActions,
+  avatar,
+  primaryName,
+  tags,
+  infoFields,
+  infoColumns = 3,
+  infoArea,
+  tabs,
+  activeTab: controlledActiveTab,
+  onTabChange,
+  showDivider = true,
+  children
+}) {
+  var _a;
+  const [internalActiveTab, setInternalActiveTab] = (0, import_react.useState)(((_a = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a.key) ?? "");
+  const [isScrolling, setIsScrolling] = (0, import_react.useState)(false);
+  const scrollTimeoutRef = (0, import_react.useRef)(null);
+  const activeTab = controlledActiveTab ?? internalActiveTab;
+  const handleTabChange = (0, import_react.useCallback)(
+    (key) => {
+      if (onTabChange) {
+        onTabChange(key);
+      } else {
+        setInternalActiveTab(key);
+      }
+    },
+    [onTabChange]
+  );
+  const handleScroll = (0, import_react.useCallback)((e) => {
+    const target = e.currentTarget;
+    setIsScrolling(true);
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+    scrollTimeoutRef.current = setTimeout(() => {
+      setIsScrolling(false);
+    }, 150);
+    if (target.scrollTop > 0) {
+      target.classList.add("scrolled");
+    } else {
+      target.classList.remove("scrolled");
+    }
+  }, []);
+  const tagVariantClass = {
+    default: "dpt-tag-default",
+    volcano: "dpt-tag-volcano",
+    success: "dpt-tag-success",
+    warning: "dpt-tag-warning"
+  };
+  const hasHeader = avatar !== void 0 || primaryName !== void 0 || tags && tags.length > 0;
+  const hasInfoCard = hasHeader || infoFields && infoFields.length > 0 || infoArea;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "detail-page-template", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_PageTitle.default,
+      {
+        title,
+        showBack,
+        onBack,
+        className: "dpt-page-title",
+        actions: titleActions
+      }
+    ),
+    hasInfoCard && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-card", children: [
+      hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-top", children: [
+        (avatar !== void 0 || primaryName !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-info-identity", children: [
+          avatar !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-avatar", children: avatar }),
+          primaryName !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-primary-name", children: primaryName })
+        ] }),
+        tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-info-tags", children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_basic_components.CompanyTag, { className: tagVariantClass[tag.variant ?? "default"], children: tag.text }, index)) })
+      ] }),
+      infoFields && infoFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "dpt-info-fields",
+          style: { gridTemplateColumns: `repeat(${infoColumns}, minmax(0, 1fr))` },
+          children: infoFields.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dpt-field-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dpt-field-label", children: [
+              field.label,
+              "："
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dpt-field-value", children: field.value ?? "--" })
+          ] }, index))
+        }
+      ),
+      infoArea
+    ] }),
+    showDivider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dpt-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: `dpt-content${isScrolling ? " scrolling" : ""}`,
+        onScroll: handleScroll,
+        children: tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_basic_components.CompanyTabs,
+          {
+            activeKey: activeTab,
+            onChange: handleTabChange,
+            items: tabs.map((tab) => ({
+              key: tab.key,
+              label: tab.label,
+              disabled: tab.disabled,
+              children: tab.children
+            }))
+          }
+        ) : children
+      }
+    ) })
+  ] });
+}