@pisell/private-materials 3.4.105 → 3.4.106

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/NewPeripheralInfoFields.js

@@ -0,0 +1,87 @@
+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/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/NewPeripheralInfoFields.tsx
+var NewPeripheralInfoFields_exports = {};
+__export(NewPeripheralInfoFields_exports, {
+  default: () => NewPeripheralInfoFields_default
+});
+module.exports = __toCommonJS(NewPeripheralInfoFields_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_types = require("../../../../types");
+var validateRequired = (message) => [
+  {
+    required: true,
+    message
+  }
+];
+var NewPeripheralInfoFields = ({
+  workAreas,
+  workAreaId,
+  currentWorkAreaId,
+  getText,
+  translation
+}) => /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-new-info" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-section-title" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "InfoCircleOutlined" }), getText("pisell2.saas.device-planning.connect.new-info")), /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "8px" } }), /* @__PURE__ */ import_react.default.createElement(
+  import_antd.Form.Item,
+  {
+    name: "name",
+    label: getText("pisell2.saas.device-planning.add.device-name"),
+    required: true,
+    rules: [
+      {
+        validator: (0, import_types.validateI18nRequired)(
+          getText("pisell2.saas.device-planning.add.device-name-required")
+        )
+      }
+    ]
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_materials.BaseTranslation, { renderMode: "edit" })
+), /* @__PURE__ */ import_react.default.createElement(
+  import_antd.Form.Item,
+  {
+    name: "workarea_id",
+    label: getText("pisell2.saas.device-planning.edit.work-area"),
+    required: true,
+    rules: validateRequired(
+      getText("pisell2.saas.device-planning.edit.work-area-required")
+    )
+  },
+  /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Select,
+    {
+      value: workAreaId,
+      options: workAreas.map((area) => ({
+        label: `${translation(area.name) || area.id}${area.id === currentWorkAreaId ? ` (${getText("pisell2.saas.device-planning.connect.current")})` : ""}`,
+        value: area.id
+      }))
+    }
+  )
+));
+var NewPeripheralInfoFields_default = NewPeripheralInfoFields;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/PickExistingDeviceStep.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { DeviceItem, DeviceKind, I18nText, WorkAreaItem } from '../../../../types';
+interface PickExistingDeviceStepProps {
+    workAreas: WorkAreaItem[];
+    selectedWorkAreaId?: number;
+    currentWorkAreaId?: number;
+    filteredDevices: DeviceItem[];
+    connectedDeviceIds: number[];
+    loading: boolean;
+    pickingDeviceId?: number;
+    keyword: string;
+    targetKind: DeviceKind;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    getWorkAreaDeviceCount: (area: WorkAreaItem) => number;
+    getDeviceCountText: (count: number) => string;
+    onWorkAreaChange: (id: number) => void;
+    onKeywordChange: (value: string) => void;
+    onPickDevice: (device: DeviceItem) => void;
+}
+declare const PickExistingDeviceStep: React.FC<PickExistingDeviceStepProps>;
+export default PickExistingDeviceStep;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/PickExistingDeviceStep.js

@@ -0,0 +1,129 @@
+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/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/PickExistingDeviceStep.tsx
+var PickExistingDeviceStep_exports = {};
+__export(PickExistingDeviceStep_exports, {
+  default: () => PickExistingDeviceStep_default
+});
+module.exports = __toCommonJS(PickExistingDeviceStep_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
+var import_utils = require("../../../../utils");
+var PickExistingDeviceStep = ({
+  workAreas,
+  selectedWorkAreaId,
+  currentWorkAreaId,
+  filteredDevices,
+  connectedDeviceIds,
+  loading,
+  pickingDeviceId,
+  keyword,
+  targetKind,
+  getText,
+  translation,
+  getWorkAreaDeviceCount,
+  getDeviceCountText,
+  onWorkAreaChange,
+  onKeywordChange,
+  onPickDevice
+}) => {
+  var _a;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-areas" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-section-title" }, getText("pisell2.saas.device-planning.connect.work-areas")), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-section-desc" }, getText("pisell2.saas.device-planning.connect.select-area")), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-area-list" }, workAreas.map((area) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: area.id,
+      role: "button",
+      tabIndex: 0,
+      className: `device-detail-drawer__connect-area${selectedWorkAreaId === area.id ? " is-active" : ""}`,
+      onClick: () => onWorkAreaChange(area.id)
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-area-header" }, /* @__PURE__ */ import_react.default.createElement("strong", null, translation(area.name) || area.id), area.id === currentWorkAreaId ? /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__connect-current" }, getText("pisell2.saas.device-planning.connect.current")) : null),
+    /* @__PURE__ */ import_react.default.createElement("span", null, getDeviceCountText(getWorkAreaDeviceCount(area)))
+  )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-targets" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-workarea-name" }, translation(
+    (_a = workAreas.find((area) => area.id === selectedWorkAreaId)) == null ? void 0 : _a.name
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-filters" }, /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Input,
+    {
+      allowClear: true,
+      prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null),
+      value: keyword,
+      placeholder: getText("pisell2.saas.device-planning.connect.search"),
+      onChange: (event) => onKeywordChange(event.target.value)
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-device-list" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: loading || Boolean(pickingDeviceId) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-device-grid" }, filteredDevices.map((device) => {
+    var _a2, _b;
+    const disabled = connectedDeviceIds.includes(device.id);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: device.id,
+        role: "button",
+        tabIndex: disabled || pickingDeviceId ? -1 : 0,
+        "aria-disabled": disabled || Boolean(pickingDeviceId),
+        className: (0, import_classnames.default)(
+          "device-detail-drawer__connect-device-card",
+          {
+            "is-disabled": disabled || Boolean(pickingDeviceId)
+          }
+        ),
+        onClick: () => {
+          if (!disabled && !pickingDeviceId) {
+            onPickDevice(device);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: `device-detail-drawer__connect-device-icon is-${device.type_kind}`
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_materials.Icon,
+          {
+            type: ((_a2 = device.type) == null ? void 0 : _a2.icon) || "DesktopOutlined",
+            color: import_utils.DEVICE_ICON_COLOR[device.type_kind]
+          }
+        )
+      ),
+      /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, translation(device.name) || device.id), /* @__PURE__ */ import_react.default.createElement("span", null, translation((_b = device.type) == null ? void 0 : _b.name) || device.type_code))
+    );
+  })), !filteredDevices.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-empty" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Empty,
+    {
+      image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE,
+      description: getText(
+        targetKind === "smart" ? "pisell2.saas.device-planning.connect.no-smart" : "pisell2.saas.device-planning.connect.no-peripherals"
+      )
+    }
+  )) : null))));
+};
+var PickExistingDeviceStep_default = PickExistingDeviceStep;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/PickNewPeripheralStep.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { DeviceBrandItem, DeviceModelItem, I18nText } from '../../../../types';
+interface PickNewPeripheralStepProps {
+    loading: boolean;
+    models: DeviceModelItem[];
+    brands: DeviceBrandItem[];
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    onSelect: (model: DeviceModelItem) => void;
+}
+declare const PickNewPeripheralStep: React.FC<PickNewPeripheralStepProps>;
+export default PickNewPeripheralStep;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/PickNewPeripheralStep.js

@@ -0,0 +1,56 @@
+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/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/PickNewPeripheralStep.tsx
+var PickNewPeripheralStep_exports = {};
+__export(PickNewPeripheralStep_exports, {
+  default: () => PickNewPeripheralStep_default
+});
+module.exports = __toCommonJS(PickNewPeripheralStep_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_DeviceModelPicker = __toESM(require("../../../shared/DeviceModelPicker"));
+var PickNewPeripheralStep = ({
+  loading,
+  models,
+  brands,
+  getText,
+  translation,
+  onSelect
+}) => /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-targets" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: loading }, /* @__PURE__ */ import_react.default.createElement(
+  import_DeviceModelPicker.default,
+  {
+    activeKind: "dumb",
+    models,
+    brands,
+    getText,
+    translation,
+    onSelect
+  }
+)));
+var PickNewPeripheralStep_default = PickNewPeripheralStep;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useConnectDeviceModal.d.ts

@@ -0,0 +1,56 @@
+import type { CreateDeviceConnectionPayload, DeviceBrandItem, DeviceConnectionItem, DeviceItem, DeviceModelItem, I18nText, LangDict, UpdateDeviceConnectionPayload, WorkAreaItem } from '../../../types';
+export declare type ConnectMode = 'existing' | 'new' | 'edit';
+export declare type ConnectStep = 'pick' | 'config';
+export declare type NetworkMethod = 'auto' | 'manual';
+export interface ConnectFormValues {
+    name?: LangDict;
+    workarea_id?: number;
+    connection_type?: string;
+    connection_method?: NetworkMethod;
+    connection_ip?: string;
+    profile_ids?: number[];
+}
+export interface UseConnectDeviceModalParams {
+    open: boolean;
+    mode: ConnectMode;
+    currentDevice: DeviceItem;
+    editConnection?: DeviceConnectionItem;
+    connectedDeviceIds: number[];
+    currentWorkAreaId?: number;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    onSubmit?: (payload: CreateDeviceConnectionPayload) => void;
+    onUpdate?: (id: number, payload: UpdateDeviceConnectionPayload) => void;
+}
+/** 管理连接弹窗的 existing/new/edit 三种模式状态和最终连接 payload 组装。 */
+export declare const useConnectDeviceModal: ({ open, mode, currentDevice, editConnection, connectedDeviceIds, currentWorkAreaId, getText, translation, onSubmit, onUpdate, }: UseConnectDeviceModalParams) => {
+    step: ConnectStep;
+    workAreas: WorkAreaItem[];
+    brands: DeviceBrandItem[];
+    models: DeviceModelItem[];
+    selectedWorkAreaId: number | undefined;
+    selectedModel: DeviceModelItem | undefined;
+    keyword: string;
+    editFormValues: ConnectFormValues | undefined;
+    loading: boolean;
+    detailLoading: boolean;
+    pickingDeviceId: number | undefined;
+    currentIsSmart: boolean;
+    targetKind: "smart" | "dumb";
+    peripheral: DeviceItem | undefined;
+    smartDevice: DeviceItem | undefined;
+    profileOptions: {
+        label: string;
+        value: number;
+    }[];
+    profileRequired: boolean;
+    filteredDevices: DeviceItem[];
+    getWorkAreaDeviceCount: (area: WorkAreaItem) => number;
+    getDeviceCountText: (count: number) => string;
+    setSelectedWorkAreaId: import("react").Dispatch<import("react").SetStateAction<number | undefined>>;
+    setKeyword: import("react").Dispatch<import("react").SetStateAction<string>>;
+    handlePickDevice: (device: DeviceItem) => void;
+    handlePickModel: (model: DeviceModelItem) => void;
+    handleBackToPick: () => void;
+    handleSubmit: (values: ConnectFormValues) => void;
+};

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useConnectDeviceModal.js

@@ -0,0 +1,229 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useConnectDeviceModal.ts
+var useConnectDeviceModal_exports = {};
+__export(useConnectDeviceModal_exports, {
+  useConnectDeviceModal: () => useConnectDeviceModal
+});
+module.exports = __toCommonJS(useConnectDeviceModal_exports);
+var import_react = require("react");
+var import_serve = require("../../../serve");
+var import_types = require("../../../types");
+var import_constants = require("../../../constants");
+var import_utils = require("../../../utils");
+var needsNetworkConfig = (connectionType) => connectionType === "ethernet" || connectionType === "wifi";
+var useConnectDeviceModal = ({
+  open,
+  mode,
+  currentDevice,
+  editConnection,
+  connectedDeviceIds,
+  currentWorkAreaId,
+  getText,
+  translation,
+  onSubmit,
+  onUpdate
+}) => {
+  const [step, setStep] = (0, import_react.useState)("pick");
+  const [workAreas, setWorkAreas] = (0, import_react.useState)([]);
+  const [selectedWorkAreaId, setSelectedWorkAreaId] = (0, import_react.useState)();
+  const [devices, setDevices] = (0, import_react.useState)([]);
+  const [models, setModels] = (0, import_react.useState)([]);
+  const [brands, setBrands] = (0, import_react.useState)([]);
+  const [selectedDevice, setSelectedDevice] = (0, import_react.useState)();
+  const [selectedModel, setSelectedModel] = (0, import_react.useState)();
+  const [keyword, setKeyword] = (0, import_react.useState)("");
+  const [editFormValues, setEditFormValues] = (0, import_react.useState)();
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [detailLoading, setDetailLoading] = (0, import_react.useState)(false);
+  const [pickingDeviceId, setPickingDeviceId] = (0, import_react.useState)();
+  const currentIsSmart = currentDevice.type_kind === "smart";
+  const targetKind = currentIsSmart ? "dumb" : "smart";
+  const peripheral = currentIsSmart && mode === "new" ? void 0 : currentIsSmart ? selectedDevice : currentDevice;
+  const smartDevice = currentIsSmart ? currentDevice : selectedDevice;
+  const fallbackProfileModel = (peripheral == null ? void 0 : peripheral.model_code) ? models.find((model) => model.code === peripheral.model_code) : void 0;
+  const profileSource = mode === "new" ? selectedModel : (peripheral == null ? void 0 : peripheral.model) || fallbackProfileModel;
+  const profileOptions = ((profileSource == null ? void 0 : profileSource.active_profiles) || []).map((profile) => ({
+    label: translation(profile.name) || String(profile.id),
+    value: profile.id
+  }));
+  const profileRequired = (0, import_utils.isProfileRequired)(profileSource);
+  const getWorkAreaDeviceCount = (area) => targetKind === "smart" ? area.smart_devices_count || 0 : area.dumb_devices_count || 0;
+  const getDeviceCountText = (count) => {
+    const key = targetKind === "smart" ? count === 1 ? "pisell2.saas.device-planning.connect.smart-count-one" : "pisell2.saas.device-planning.connect.smart-count-many" : count === 1 ? "pisell2.saas.device-planning.connect.peripheral-count-one" : "pisell2.saas.device-planning.connect.peripheral-count-many";
+    return getText(key).replace("{N}", String(count));
+  };
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    setStep(mode === "edit" ? "config" : "pick");
+    setSelectedDevice(void 0);
+    setSelectedModel(void 0);
+    setKeyword("");
+    setEditFormValues(void 0);
+    setPickingDeviceId(void 0);
+    setLoading(true);
+    setDetailLoading(mode === "edit");
+    Promise.all([
+      (0, import_serve.getWorkAreas)(),
+      mode === "new" ? (0, import_serve.getDeviceBrands)() : Promise.resolve([]),
+      (0, import_serve.getDeviceTypes)({
+        kind: "dumb",
+        with: ["activeModels", "activeModels.activeProfiles", "activeModels.brand"]
+      }),
+      mode === "edit" && (editConnection == null ? void 0 : editConnection.id) ? (0, import_serve.getDeviceConnectionDetail)(editConnection.id) : Promise.resolve(null)
+    ]).then(([areas, brandList, types, detail]) => {
+      var _a, _b, _c, _d;
+      setWorkAreas(areas);
+      setBrands(brandList);
+      setModels((0, import_utils.flattenDeviceModels)(types));
+      const defaultWorkAreaId = currentWorkAreaId || ((_a = areas[0]) == null ? void 0 : _a.id);
+      setSelectedWorkAreaId(defaultWorkAreaId);
+      if (detail) {
+        setSelectedDevice(
+          currentIsSmart ? detail.target_device || void 0 : detail.source_device || void 0
+        );
+        setEditFormValues({
+          connection_type: (_b = detail.config) == null ? void 0 : _b.connection_type,
+          connection_method: ((_c = detail.config) == null ? void 0 : _c.connection_method) === "manual" ? "manual" : "auto",
+          connection_ip: String(((_d = detail.config) == null ? void 0 : _d.connection_ip) || ""),
+          profile_ids: detail.profile_ids || (detail.profiles || []).map((profile) => profile.id)
+        });
+      }
+    }).finally(() => {
+      setLoading(false);
+      setDetailLoading(false);
+    });
+  }, [currentIsSmart, currentWorkAreaId, editConnection == null ? void 0 : editConnection.id, mode, open]);
+  (0, import_react.useEffect)(() => {
+    if (!open || !selectedWorkAreaId) return;
+    setLoading(true);
+    if (mode === "new") {
+      setLoading(false);
+      return;
+    }
+    (0, import_serve.getDevices)({
+      workarea_id: selectedWorkAreaId,
+      type_kind: targetKind,
+      with: ["type", "model", "model.activeProfiles", "workarea"]
+    }).then((list) => setDevices(list)).finally(() => setLoading(false));
+  }, [mode, open, selectedWorkAreaId, targetKind]);
+  const filteredDevices = (0, import_react.useMemo)(() => {
+    const value = (0, import_constants.normalizeText)(keyword);
+    return devices.filter(
+      (device) => value ? (0, import_constants.normalizeText)(translation(device.name)).includes(value) : true
+    );
+  }, [devices, keyword, translation]);
+  const resetConnectionConfig = () => {
+    setEditFormValues(void 0);
+  };
+  const handlePickDevice = (device) => {
+    if (connectedDeviceIds.includes(device.id)) return;
+    if (pickingDeviceId) return;
+    resetConnectionConfig();
+    setPickingDeviceId(device.id);
+    (0, import_serve.getDeviceDetail)(device.id).then((detail) => setSelectedDevice(detail || device)).catch(() => setSelectedDevice(device)).finally(() => {
+      setPickingDeviceId(void 0);
+      setStep("config");
+    });
+  };
+  const handlePickModel = (model) => {
+    resetConnectionConfig();
+    setSelectedModel(model);
+    setStep("config");
+  };
+  const handleBackToPick = () => {
+    resetConnectionConfig();
+    setSelectedDevice(void 0);
+    setSelectedModel(void 0);
+    setStep("pick");
+  };
+  const handleSubmit = (values) => {
+    if (!smartDevice || !values.connection_type) return;
+    const config = {
+      connection_type: values.connection_type
+    };
+    if (needsNetworkConfig(values.connection_type)) {
+      config.connection_method = values.connection_method || "auto";
+      if (values.connection_method === "manual") {
+        config.connection_ip = String(values.connection_ip || "").trim();
+      }
+    }
+    const profileIds = values.profile_ids || [];
+    if (mode === "edit") {
+      if (!editConnection || !onUpdate) return;
+      onUpdate(editConnection.id, {
+        config,
+        profile_ids: profileIds
+      });
+      return;
+    }
+    const payload = mode === "new" ? {
+      type: "dumb",
+      source_device_id: smartDevice.id,
+      target_device_action: "new",
+      target_device: {
+        workarea_id: values.workarea_id || currentWorkAreaId || 0,
+        model_code: (selectedModel == null ? void 0 : selectedModel.code) || "",
+        name: values.name || { ...import_types.EMPTY_I18N }
+      },
+      config,
+      profile_ids: profileIds
+    } : {
+      type: "dumb",
+      source_device_id: smartDevice.id,
+      target_device_id: peripheral == null ? void 0 : peripheral.id,
+      target_device_action: "existing",
+      config,
+      profile_ids: profileIds
+    };
+    onSubmit == null ? void 0 : onSubmit(payload);
+  };
+  return {
+    step,
+    workAreas,
+    brands,
+    models,
+    selectedWorkAreaId,
+    selectedModel,
+    keyword,
+    editFormValues,
+    loading,
+    detailLoading,
+    pickingDeviceId,
+    currentIsSmart,
+    targetKind,
+    peripheral,
+    smartDevice,
+    profileOptions,
+    profileRequired,
+    filteredDevices,
+    getWorkAreaDeviceCount,
+    getDeviceCountText,
+    setSelectedWorkAreaId,
+    setKeyword,
+    handlePickDevice,
+    handlePickModel,
+    handleBackToPick,
+    handleSubmit
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useConnectDeviceModal
+});

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useDeviceConnections.d.ts

@@ -0,0 +1,20 @@
+import type { CreateDeviceConnectionPayload, DeviceKind, DeviceRow, UpdateDeviceConnectionPayload } from '../../../types';
+import type { DrawerTabKey } from '../components/DrawerSidebar';
+interface UseDeviceConnectionsParams {
+    open: boolean;
+    activeTab: DrawerTabKey;
+    activeKind: DeviceKind;
+    displayRecord?: DeviceRow;
+    onConnectionsChanged?: () => void;
+}
+/** 管理详情抽屉连接页的连接列表加载和连接增删改请求。 */
+export declare const useDeviceConnections: ({ open, activeTab, activeKind, displayRecord, onConnectionsChanged, }: UseDeviceConnectionsParams) => {
+    connections: import("../../../types").DeviceConnectionItem[];
+    loading: boolean;
+    submitting: boolean;
+    deleting: boolean;
+    handleCreateConnection: (payload: CreateDeviceConnectionPayload) => Promise<void>;
+    handleUpdateConnection: (id: number, payload: UpdateDeviceConnectionPayload) => Promise<void>;
+    handleDeleteConnection: (id: number) => Promise<void>;
+};
+export {};