@pisell/private-materials 3.4.105 → 3.4.106

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/index.less

@@ -11,6 +11,8 @@
 }
 
 .device-detail-drawer {
+  --device-detail-drawer-header-height: 88px;
+
   .ant-drawer-body {
     height: 100%;
     padding: 0;
@@ -18,262 +20,154 @@
 
   &__root {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    width: 100%;
     height: 100%;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px;
-    background: #e6f4ff;
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    background: #dbeafe;
-    color: #1677ff;
-  }
-
-  &__heading {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__name {
-    font-size: 15px;
-    font-weight: 600;
-    color: rgba(0, 0, 0, 0.88);
-  }
-
-  &__type {
-    margin-top: 2px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.45);
-  }
-
-  &__content {
-    flex: 1;
     min-height: 0;
-    padding: 20px 10px;
-    overflow: auto;
-    background: #f5f6f8;
-  }
 
-  &__card {
-    border-radius: 10px;
+    &.is-smart {
+      .device-detail-drawer__header {
+        background: #e6f4ff;
+      }
 
-    & + & {
-      margin-top: 12px;
+      .device-detail-drawer__icon {
+        background: #dbeafe;
+        color: #1677ff;
+      }
     }
 
-    .ant-card-head {
-      min-height: 42px;
-      padding: 0 16px;
-    }
+    &.is-dumb {
+      .device-detail-drawer__header {
+        background: #fffbe6;
+      }
 
-    .ant-card-head-title {
-      padding: 10px 0;
-      font-size: 14px;
-      font-weight: 600;
+      .device-detail-drawer__icon {
+        background: #fff1b8;
+        color: #faad14;
+      }
     }
 
-    .ant-card-body {
-      padding: 16px;
+    &.is-integrated {
+      .device-detail-drawer__header {
+        background: #eef7e8;
+      }
+
+      .device-detail-drawer__icon {
+        background: #d9ead2;
+        color: #389e0d;
+      }
     }
   }
 
-  &__info-list {
+  &__sidebar {
     display: flex;
+    flex: 0 0 72px;
     flex-direction: column;
-    gap: 12px;
+    align-items: stretch;
+    height: 100%;
+    min-height: 0;
+    border-right: 1px solid #f0f0f0;
+    background: #fafafa;
   }
 
-  &__info-row {
+  &__sidebar-item {
+    position: relative;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    font-size: 14px;
-
-    > span:first-child {
-      color: rgba(0, 0, 0, 0.55);
+    justify-content: center;
+    gap: 4px;
+    box-sizing: border-box;
+    height: var(--device-detail-drawer-header-height);
+    min-height: var(--device-detail-drawer-header-height);
+    width: 100%;
+    padding: 8px 4px;
+    color: rgba(0, 0, 0, 0.55);
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+
+    .anticon {
+      font-size: 18px;
     }
 
-    strong {
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
+    span {
+      font-size: 12px;
+      line-height: 16px;
     }
-  }
-
-  &__info-two-row {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    font-size: 14px;
 
-    > span:first-child {
-      color: rgba(0, 0, 0, 0.55);
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background: transparent;
+      content: '';
     }
 
-    strong {
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
+    &:hover,
+    &.is-active {
+      color: #1677ff;
+      background: #fff;
     }
-  }
 
-  &__profile-card {
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 180px;
-    padding: 8px 10px;
-    border-radius: 6px;
-    background: #f5f6f8;
-    color: rgba(0, 0, 0, 0.72);
+    &.is-active::before {
+      background: #1677ff;
+    }
   }
 
-  &__report-list {
+  &__main {
     display: flex;
+    flex: 1;
     flex-direction: column;
-    gap: 12px;
-  }
-
-  &__last-seen {
-    font-size: 12px;
-    font-weight: 400;
-    color: rgba(0, 0, 0, 0.45);
-  }
-
-  &__report-card {
-    border-radius: 8px;
-    background: #fafafa;
-
-    .ant-card-head {
-      min-height: 38px;
-      padding: 0 12px;
-    }
-
-    .ant-card-head-title {
-      padding: 8px 0;
-      font-size: 13px;
-      font-weight: 600;
-    }
-
-    .ant-card-body {
-      padding: 12px;
-    }
+    min-width: 0;
+    min-height: 0;
   }
 
-  &__report-rows {
+  &__header {
     display: flex;
-    flex-direction: column;
+    align-items: center;
     gap: 12px;
+    box-sizing: border-box;
+    min-height: var(--device-detail-drawer-header-height);
+    padding: 16px;
   }
 
-  &__report-row {
+  &__icon {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    font-size: 14px;
-  }
-
-  &__report-label {
-    flex-shrink: 0;
-    color: rgba(0, 0, 0, 0.55);
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
   }
 
-  &__report-value,
-  &__json-value {
+  &__heading {
+    flex: 1;
     min-width: 0;
-    color: rgba(0, 0, 0, 0.88);
-    text-align: right;
-    word-break: break-word;
-  }
-
-  &__battery-value {
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
   }
 
-  &__battery-icon {
-    position: relative;
-    box-sizing: border-box;
-    width: 24px;
-    height: 12px;
-    border: 1.5px solid rgba(0, 0, 0, 0.65);
-    border-radius: 3px;
-
-    &::before {
-      position: absolute;
-      top: 2px;
-      right: -4px;
-      width: 2px;
-      height: 6px;
-      border-radius: 0 2px 2px 0;
-      background: rgba(0, 0, 0, 0.65);
-      content: '';
-    }
-
-    &.is-charging {
-      border-color: #16a34a;
-
-      &::before {
-        background: #16a34a;
-      }
-    }
-  }
-
-  &__battery-fill {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    max-width: 17px;
-    height: 5px;
-    border-radius: 1px;
-    background: #16a34a;
-  }
-
-  &__battery-bolt {
-    position: absolute;
-    top: -3px;
-    left: 8px;
-    width: 7px;
-    height: 14px;
-    background: #f59e0b;
-    clip-path: polygon(45% 0, 100% 0, 62% 42%, 100% 42%, 35% 100%, 48% 56%, 0 56%);
-  }
-
-  &__battery-status {
-    color: #16a34a;
+  &__name {
+    font-size: 15px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
   }
 
-  &__online-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
+  &__type {
+    margin-top: 2px;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
   }
 
-  &__status-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.25);
-
-    &.is-online {
-      background: #16a34a;
-    }
+  &__content {
+    flex: 1;
+    min-height: 0;
+    padding: 24px;
+    overflow: auto;
+    background: #fff;
   }
 
   &__footer {

package/lib/plus/saasDevice/devicePlanning/components/DeviceTable/index.js

@@ -35,8 +35,10 @@ module.exports = __toCommonJS(DeviceTable_exports);
 var import_react = __toESM(require("react"));
 var import_materials = require("@pisell/materials");
 var import_icons = require("@ant-design/icons");
-var import_classnames = __toESM(require("classnames"));
 var import_constants = require("../../constants");
+var import_DeviceIcon = __toESM(require("../shared/DeviceIcon"));
+var import_LinkStatusTag = __toESM(require("../shared/LinkStatusTag"));
+var import_OnlineStatus = __toESM(require("../shared/OnlineStatus"));
 var import_index = require("./index.less");
 var DeviceTable = ({
   activeKind,
@@ -56,57 +58,70 @@ var DeviceTable = ({
   onRowClick
 }) => {
   const columns = (0, import_react.useMemo)(
-    () => [
-      {
+    () => {
+      const nameColumn = {
         title: getText("pisell2.saas.device-planning.column.name"),
         dataIndex: "name",
         key: "name",
         render: (name, record) => {
           var _a;
-          return /* @__PURE__ */ import_react.default.createElement("span", { className: "saas-device-planning-device-table__device-name" }, ((_a = record._raw.type) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: record._raw.type.icon }) : null, name);
+          return /* @__PURE__ */ import_react.default.createElement("span", { className: "saas-device-planning-device-table__device-name" }, ((_a = record._raw.type) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react.default.createElement(
+            import_DeviceIcon.default,
+            {
+              className: "saas-device-planning-device-table__device-icon",
+              icon: record._raw.type.icon,
+              kind: record._raw.type_kind
+            }
+          ) : null, name);
         }
-      },
-      {
+      };
+      const typeColumn = {
         title: getText("pisell2.saas.device-planning.column.device-type"),
         dataIndex: "typeName",
         key: "typeName"
-      },
-      {
+      };
+      const modelColumn = {
         title: getText("pisell2.saas.device-planning.column.device-model"),
         dataIndex: "modelName",
         key: "modelName"
-      },
-      {
-        title: getText("pisell2.saas.device-planning.column.profile"),
-        dataIndex: "profileName",
-        key: "profileName"
-      },
-      {
-        title: getText("pisell2.saas.device-planning.column.link-status"),
-        dataIndex: "link",
-        key: "link",
-        width: 140,
-        render: (value) => /* @__PURE__ */ import_react.default.createElement(import_materials.Tag, { color: value === "linked" ? "green" : "gold" }, getText(`pisell2.saas.device-planning.status.${value}`) || value)
-      },
-      {
-        title: getText("pisell2.saas.device-planning.column.online-status"),
-        dataIndex: "status",
-        key: "status",
-        width: 140,
-        render: (value) => /* @__PURE__ */ import_react.default.createElement("span", { className: "saas-device-planning-device-table__online-status" }, /* @__PURE__ */ import_react.default.createElement(
-          "span",
-          {
-            className: (0, import_classnames.default)(
-              "saas-device-planning-device-table__status-dot",
-              {
-                "is-online": value === "online"
-              }
-            )
-          }
-        ), getText(`pisell2.saas.device-planning.status.${value}`) || value)
+      };
+      if (activeKind === "dumb") {
+        return [nameColumn, typeColumn, modelColumn];
       }
-    ],
-    [getText]
+      return [
+        nameColumn,
+        typeColumn,
+        modelColumn,
+        {
+          title: getText("pisell2.saas.device-planning.column.profile"),
+          dataIndex: "profileName",
+          key: "profileName"
+        },
+        {
+          title: getText("pisell2.saas.device-planning.column.link-status"),
+          dataIndex: "link",
+          key: "link",
+          width: 140,
+          render: (value) => /* @__PURE__ */ import_react.default.createElement(import_LinkStatusTag.default, { value, getText })
+        },
+        {
+          title: getText("pisell2.saas.device-planning.column.online-status"),
+          dataIndex: "status",
+          key: "status",
+          width: 140,
+          render: (value) => /* @__PURE__ */ import_react.default.createElement(
+            import_OnlineStatus.default,
+            {
+              value,
+              getText,
+              className: "saas-device-planning-device-table__online-status",
+              dotClassName: "saas-device-planning-device-table__status-dot"
+            }
+          )
+        }
+      ];
+    },
+    [activeKind, getText]
   );
   const pagedData = (0, import_react.useMemo)(() => {
     const start = (page - 1) * pageSize;

package/lib/plus/saasDevice/devicePlanning/components/DeviceTable/index.less

@@ -34,10 +34,31 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
+    font-weight: 500;
+  }
+
+  &__device-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
 
-    .anticon {
+    &.is-smart {
+      background: #e6f4ff;
       color: #1677ff;
     }
+
+    &.is-dumb {
+      background: #fffbe6;
+      color: #faad14;
+    }
+
+    &.is-integrated {
+      background: #eef7e8;
+      color: #389e0d;
+    }
   }
 
   &__online-status {

package/lib/plus/saasDevice/devicePlanning/components/EditDeviceModal/index.js

@@ -35,13 +35,11 @@ module.exports = __toCommonJS(EditDeviceModal_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_types = require("../../types");
+var import_utils = require("../../utils");
+var import_I18nNameFormItem = __toESM(require("../shared/I18nNameFormItem"));
+var import_OnlineWarningAlert = __toESM(require("../shared/OnlineWarningAlert"));
 var import_index = require("./index.less");
-var isProfileRequired = (model) => {
-  var _a, _b;
-  return Boolean((_b = (_a = model == null ? void 0 : model.data) == null ? void 0 : _a.profile_structure) == null ? void 0 : _b.required);
-};
 var EditDeviceModal = ({
   open,
   record,
@@ -58,9 +56,10 @@ var EditDeviceModal = ({
     if (!record) return void 0;
     return models.find((item) => item.code === record._raw.model_code) || record._raw.model;
   }, [models, record]);
-  const profileRequired = isProfileRequired(currentModel);
+  const profileRequired = (0, import_utils.isProfileRequired)(currentModel);
   const profiles = (currentModel == null ? void 0 : currentModel.active_profiles) || [];
   const online = (record == null ? void 0 : record.status) === "online";
+  const showProfile = (record == null ? void 0 : record._raw.type_kind) === "smart";
   (0, import_react.useEffect)(() => {
     if (!open || !record) return;
     form.setFieldsValue({
@@ -75,7 +74,7 @@ var EditDeviceModal = ({
     onSubmit(record.id, {
       workarea_id: values.workarea_id,
       name: values.name,
-      profile_id: values.profile_id || null
+      profile_id: showProfile ? values.profile_id || null : null
     });
   };
   return /* @__PURE__ */ import_react.default.createElement(
@@ -87,19 +86,26 @@ var EditDeviceModal = ({
       onCancel,
       okText: getText("pisell2.saas.device-planning.detail.save"),
       cancelText: getText("pisell2.saas.device-planning.detail.cancel"),
-      okButtonProps: { loading: submitting, onClick: handleOk },
-      cancelButtonProps: { disabled: submitting },
+      okButtonProps: {
+        block: true,
+        size: "large",
+        loading: submitting,
+        onClick: handleOk
+      },
+      cancelButtonProps: {
+        block: true,
+        size: "large",
+        type: "default",
+        disabled: submitting
+      },
       destroyOnClose: true,
       maskClosable: false,
       width: 520,
       className: "edit-device-modal"
     },
     record ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, layout: "vertical", preserve: false }, online ? /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Alert,
+      import_OnlineWarningAlert.default,
       {
-        type: "warning",
-        showIcon: true,
-        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ExclamationCircleFilled, null),
         message: getText(
           "pisell2.saas.device-planning.edit.online-title"
         ),
@@ -147,21 +153,15 @@ var EditDeviceModal = ({
         }
       )
     ), /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
+      import_I18nNameFormItem.default,
       {
         name: "name",
         label: getText("pisell2.saas.device-planning.detail.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" })
-    ), profileRequired || profiles.length > 0 ? /* @__PURE__ */ import_react.default.createElement(
+        requiredMessage: getText(
+          "pisell2.saas.device-planning.add.device-name-required"
+        )
+      }
+    ), showProfile && (profileRequired || profiles.length > 0) ? /* @__PURE__ */ import_react.default.createElement(
       import_antd.Form.Item,
       {
         name: "profile_id",

package/lib/plus/saasDevice/devicePlanning/components/WorkAreaModal/index.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_materials = require("@pisell/materials");
 var import_types = require("../../types");
+var import_I18nNameFormItem = __toESM(require("../shared/I18nNameFormItem"));
 var WorkAreaModal = ({
   open,
   mode,
@@ -70,35 +71,39 @@ var WorkAreaModal = ({
         mode === "create" ? "pisell2.saas.device-planning.modal.create" : "pisell2.saas.device-planning.modal.save"
       ),
       cancelText: getText("pisell2.saas.device-planning.modal.cancel"),
-      okButtonProps: { loading: submitting, onClick: handleOk },
-      cancelButtonProps: { disabled: submitting },
+      okButtonProps: {
+        block: true,
+        size: "large",
+        loading: submitting,
+        onClick: handleOk
+      },
+      cancelButtonProps: {
+        block: true,
+        size: "large",
+        type: "default",
+        disabled: submitting
+      },
       destroyOnClose: true,
       maskClosable: false,
       width: 520,
       className: "saas-device-planning-workarea-modal"
     },
     /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, layout: "vertical", preserve: false }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
+      import_I18nNameFormItem.default,
       {
         name: "name",
         label: getText("pisell2.saas.device-planning.modal.name"),
-        required: true,
-        rules: [
-          {
-            validator: (0, import_types.validateI18nRequired)(
-              getText("pisell2.saas.device-planning.modal.name-required")
-            )
-          }
-        ]
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_materials.BaseTranslation, { renderMode: "edit" })
+        requiredMessage: getText(
+          "pisell2.saas.device-planning.modal.name-required"
+        )
+      }
     ), /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
+      import_I18nNameFormItem.default,
       {
         name: "description",
-        label: getText("pisell2.saas.device-planning.modal.description")
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_materials.BaseTranslation, { renderMode: "edit", type: "textarea" })
+        label: getText("pisell2.saas.device-planning.modal.description"),
+        textarea: true
+      }
     ))
   );
 };