@pisell/private-materials 6.7.1 → 6.7.2

package/lib/plus/webPosLogin/WebPosLogin.js

@@ -0,0 +1,334 @@
+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/webPosLogin/WebPosLogin.tsx
+var WebPosLogin_exports = {};
+__export(WebPosLogin_exports, {
+  default: () => WebPosLogin_default
+});
+module.exports = __toCommonJS(WebPosLogin_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_WebPosLoginCpt = __toESM(require("./WebPosLoginCpt"));
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_service = require("./service");
+var import_utils2 = require("../../utils");
+var useSearchParams = () => {
+  return new URLSearchParams(window.location.search);
+};
+var WebPosLogin = (props) => {
+  var _a, _b, _c;
+  const context = (0, import_useEngineContext.default)();
+  const { getApp = () => ({}) } = (_a = context.appHelper) == null ? void 0 : _a.utils;
+  const { backgroundImage, step: propsStep = "login", config } = props;
+  const [storeList, setStoreList] = (0, import_react.useState)(() => {
+    var _a2;
+    const app = getApp();
+    const storeList2 = (_a2 = app == null ? void 0 : app.storage) == null ? void 0 : _a2.getStorage("storeList");
+    if (!storeList2) {
+      return [];
+    }
+    return JSON.parse(storeList2);
+  });
+  const urlStep = useSearchParams().get("step");
+  const [step, setStep] = (0, import_react.useState)(() => {
+    if (urlStep && urlStep !== "undefined") {
+      return urlStep;
+    }
+    return props.step || "login";
+  });
+  const [userInfo, setUserInfo] = (0, import_react.useState)(() => {
+    var _a2;
+    const app = getApp();
+    const userInfo2 = ((_a2 = app == null ? void 0 : app.storage) == null ? void 0 : _a2.getStorage("userInfo")) || "{}";
+    const userInfoObj = JSON.parse(userInfo2);
+    return {
+      name: (userInfoObj == null ? void 0 : userInfoObj.name) || "",
+      avatar: (userInfoObj == null ? void 0 : userInfoObj.avatar) || ""
+    };
+  });
+  const [selectedStore, setSelectedStore] = (0, import_react.useState)(() => {
+    var _a2;
+    const app = getApp();
+    const selectedStore2 = ((_a2 = app == null ? void 0 : app.storage) == null ? void 0 : _a2.getStorage("selectedStore")) || "{}";
+    return JSON.parse(selectedStore2);
+  });
+  const [deviceList, setDeviceList] = (0, import_react.useState)(() => {
+    var _a2;
+    const app = getApp();
+    const deviceList2 = ((_a2 = app == null ? void 0 : app.storage) == null ? void 0 : _a2.getStorage("deviceList")) || "[]";
+    return JSON.parse(deviceList2);
+  });
+  const [lastUsedStoreId, setLastUsedStoreId] = (0, import_react.useState)(() => {
+    var _a2, _b2;
+    const app = getApp();
+    const lastUsedStore = ((_a2 = app == null ? void 0 : app.storage) == null ? void 0 : _a2.getStorage("selectedStore")) || "{}";
+    const lastUsedStoreId2 = ((_b2 = JSON.parse(lastUsedStore)) == null ? void 0 : _b2.id) || 0;
+    return parseInt(lastUsedStoreId2);
+  });
+  const [lastUsedDeviceId, setLastUsedDeviceId] = (0, import_react.useState)(() => {
+    var _a2, _b2;
+    const app = getApp();
+    const lastUsedDevice = ((_a2 = app == null ? void 0 : app.storage) == null ? void 0 : _a2.getStorage("lastUsedDevice")) || "{}";
+    const lastUsedDeviceId2 = ((_b2 = JSON.parse(lastUsedDevice)) == null ? void 0 : _b2.id) || 0;
+    return parseInt(lastUsedDeviceId2);
+  });
+  const [isShowGoBack, setIsShowGoBack] = (0, import_react.useState)(true);
+  import_utils2.request.setRequest(context.appHelper.utils.request);
+  const onLoginSuccess = async (res) => {
+    var _a2, _b2, _c2, _d, _e;
+    const app = getApp();
+    if (!res) {
+      return;
+    }
+    (_a2 = app == null ? void 0 : app.getPlugin("token")) == null ? void 0 : _a2.set(res == null ? void 0 : res.authorization);
+    (_b2 = app == null ? void 0 : app.storage) == null ? void 0 : _b2.setStorage(
+      "account",
+      JSON.stringify({ ...res == null ? void 0 : res.account, ...res })
+    );
+    setUserInfo({
+      name: ((_c2 = res == null ? void 0 : res.account) == null ? void 0 : _c2.name) || "",
+      avatar: ((_d = res == null ? void 0 : res.account) == null ? void 0 : _d.avatar) || ""
+    });
+    const tenant = await (0, import_service.getTenant)();
+    (_e = app == null ? void 0 : app.storage) == null ? void 0 : _e.setStorage("storeList", JSON.stringify(tenant || {}));
+    const lastUsedStore = tenant == null ? void 0 : tenant.find((item) => item.id == lastUsedStoreId);
+    if ((tenant == null ? void 0 : tenant.length) === 1) {
+      await handleStoreSelect(tenant[0], false);
+    } else if (lastUsedStore) {
+      await handleStoreSelect(lastUsedStore, false);
+    } else {
+      setStep("store");
+    }
+    setStoreList(tenant);
+  };
+  const onBack = () => {
+    if (step === "store") {
+      setStep("login");
+    } else if (step === "device") {
+      setStep("store");
+    }
+  };
+  const handleStoreSelect = async (shopInfo, isShowGoBack2 = true) => {
+    var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+    const app = getApp();
+    app.storage.setStorage("tenant_domain", (_a2 = shopInfo == null ? void 0 : shopInfo.tenant) == null ? void 0 : _a2.default_domain);
+    app.storage.setStorage("selectedStore", JSON.stringify(shopInfo));
+    setLastUsedStoreId(shopInfo.id);
+    setSelectedStore(shopInfo);
+    (_b2 = app == null ? void 0 : app.logger) == null ? void 0 : _b2.addLog({
+      type: "info",
+      title: "选择店铺页-点击店铺",
+      metadata: shopInfo || {}
+    });
+    try {
+      const res = await (0, import_service.getTenantDetail)();
+      if (!res) {
+        return;
+      }
+      if (!((_c2 = res == null ? void 0 : res.mypisell_data) == null ? void 0 : _c2.account_token)) {
+        (0, import_materials.PisellToast)({
+          content: import_utils.locales.getText("webpos-login-store-data-missing")
+        });
+        return;
+      }
+      (_e = app == null ? void 0 : app.getPlugin("token")) == null ? void 0 : _e.set((_d = res == null ? void 0 : res.mypisell_data) == null ? void 0 : _d.account_token, "pisellV1Token");
+      if (res.nocobase_tenant_token) {
+        (_f = app == null ? void 0 : app.getPlugin("token")) == null ? void 0 : _f.set(res.nocobase_tenant_token, "nocobaseToken");
+      }
+      await getDeviceListFunction();
+      setIsShowGoBack(isShowGoBack2);
+      (_g = app == null ? void 0 : app.logger) == null ? void 0 : _g.addLog({
+        type: "info",
+        title: "选择店铺页-选择店铺成功",
+        metadata: res || {}
+      });
+    } catch (err) {
+      (_h = app == null ? void 0 : app.logger) == null ? void 0 : _h.addLog({
+        type: "error",
+        title: "登录页-选择店铺失败",
+        metadata: err || {}
+      });
+    }
+  };
+  const getDeviceListFunction = async () => {
+    var _a2, _b2, _c2;
+    const app = getApp();
+    const type = "terminal";
+    const res = await (0, import_service.getDeviceList)({
+      type,
+      with: ["client"]
+    });
+    if (!res) {
+      return;
+    }
+    if ((res == null ? void 0 : res.length) > 0) {
+      app == null ? void 0 : app.storage.setStorage("deviceList", JSON.stringify(res || []));
+      setDeviceList(res);
+      setStep("device");
+      (_a2 = app == null ? void 0 : app.logger) == null ? void 0 : _a2.addLog({
+        type: "info",
+        title: "选择店铺页-获取设备列表成功-有云端设备",
+        metadata: res || {}
+      });
+    } else {
+      app.storage.setStorage("isLogin", true);
+      (_b2 = app == null ? void 0 : app.history) == null ? void 0 : _b2.reloadTo("/");
+      (_c2 = app == null ? void 0 : app.logger) == null ? void 0 : _c2.addLog({
+        type: "info",
+        title: "选择店铺页-获取设备列表成功-没有云端设备",
+        metadata: res || {}
+      });
+    }
+  };
+  const handleDissociateDevice = async () => {
+    var _a2, _b2, _c2, _d, _e;
+    const app = getApp();
+    const boundCloudDevice = JSON.parse(
+      ((_a2 = app == null ? void 0 : app.storage) == null ? void 0 : _a2.getStorage("boundCloudDevice")) || "{}"
+    );
+    if ((boundCloudDevice == null ? void 0 : boundCloudDevice.number) && ((_b2 = boundCloudDevice == null ? void 0 : boundCloudDevice.client) == null ? void 0 : _b2.number)) {
+      const res = await (0, import_service.dissociateDevice)({
+        number: (_c2 = boundCloudDevice == null ? void 0 : boundCloudDevice.client) == null ? void 0 : _c2.number,
+        dissociateDeviceNumber: boundCloudDevice == null ? void 0 : boundCloudDevice.number
+      });
+      if (!res) {
+        (_d = app == null ? void 0 : app.logger) == null ? void 0 : _d.addLog({
+          type: "error",
+          title: "选择设备页-解除设备绑定失败"
+        });
+        return false;
+      } else {
+        (_e = app == null ? void 0 : app.logger) == null ? void 0 : _e.addLog({
+          type: "info",
+          title: "选择设备页-解除设备绑定成功",
+          metadata: res || {}
+        });
+        return true;
+      }
+    }
+    return true;
+  };
+  const handleDeviceSelect = async (device) => {
+    var _a2, _b2, _c2, _d, _e;
+    const app = getApp();
+    app.storage.setStorage("lastUsedDevice", JSON.stringify(device));
+    setLastUsedDeviceId(device.id);
+    const deviceNumber = device == null ? void 0 : device.number;
+    const language = ((_a2 = app == null ? void 0 : app.locales) == null ? void 0 : _a2.getLocale()) || "en";
+    let _device = null;
+    try {
+      const _deviceOrigin = await app.plugins.get("device").getDeviceInfo({ language });
+      _device = (_deviceOrigin == null ? void 0 : _deviceOrigin.data) || null;
+      app == null ? void 0 : app.storage.setStorage("localDevice", JSON.stringify(_device || {}));
+    } catch (error) {
+      (_b2 = app == null ? void 0 : app.logger) == null ? void 0 : _b2.addLog({
+        type: "error",
+        title: "选择设备页-获取本机设备信息获取失败"
+      });
+    }
+    if (!_device) {
+      (_c2 = app == null ? void 0 : app.logger) == null ? void 0 : _c2.addLog({
+        type: "error",
+        title: "选择设备页-绑定设备失败-本机设备信息获取失败"
+      });
+      return;
+    } else {
+      (_d = app == null ? void 0 : app.logger) == null ? void 0 : _d.addLog({
+        type: "info",
+        title: "选择设备页-绑定设备-本机设备信息获取成功",
+        metadata: _device || {}
+      });
+    }
+    const dissociateRes = await handleDissociateDevice();
+    if (!dissociateRes) {
+      return;
+    }
+    const res = await (0, import_service.selectDevice)({
+      deviceNumber,
+      ..._device || {}
+    });
+    if (!res) {
+      return;
+    }
+    app.storage.setStorage("loginStatus", "success");
+    app.storage.setStorage("isLogin", true);
+    setTimeout(() => {
+      var _a3;
+      (_a3 = app == null ? void 0 : app.history) == null ? void 0 : _a3.reloadTo("/");
+    }, 500);
+    app == null ? void 0 : app.storage.setStorage("boundCloudDevice", JSON.stringify(res || {}));
+    app.pubsub.publish("dataManager", {
+      type: "get",
+      key: "DEVICE_NUMBER",
+      metadata: { msg: "webpo主动推送" }
+    });
+    (_e = app == null ? void 0 : app.logger) == null ? void 0 : _e.addLog({
+      type: "info",
+      title: "选择设备页-绑定设备成功",
+      metadata: res || {}
+    });
+  };
+  const handleChangeAccount = () => {
+    setStep("login");
+  };
+  const handleChangeStore = () => {
+    setStep("store");
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_WebPosLoginCpt.default,
+    {
+      loginConfig: config,
+      backgroundImage,
+      brandConfig: {
+        carouselItems: [{
+          type: "image",
+          url: "https://static.pisellcdn.com/defaultLogo.png"
+        }]
+      },
+      step,
+      showBackButton: isShowGoBack,
+      storeList,
+      deviceList,
+      userInfo,
+      selectedStore,
+      lastUsedStoreId,
+      lastUsedDeviceId,
+      locale: ((_c = (_b = context == null ? void 0 : context.engine) == null ? void 0 : _b.props) == null ? void 0 : _c.locale) || "en",
+      loading: false,
+      onStoreSelect: handleStoreSelect,
+      onDeviceSelect: handleDeviceSelect,
+      onChangeAccount: handleChangeAccount,
+      onChangeStore: handleChangeStore,
+      onBack,
+      onLoginSuccess
+    }
+  );
+};
+var WebPosLogin_default = WebPosLogin;

package/lib/plus/webPosLogin/WebPosLoginCpt.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WebPosLoginCptProps } from './types';
+import './WebPosLoginCpt.less';
+/**
+ * WebPosLoginCpt 主组件
+ * @description WebPOS 登录流程组件，包含登录、店铺选择、设备选择三个步骤
+ */
+declare const WebPosLoginCpt: React.FC<WebPosLoginCptProps>;
+export default WebPosLoginCpt;

package/lib/plus/webPosLogin/WebPosLoginCpt.js

@@ -0,0 +1,170 @@
+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/webPosLogin/WebPosLoginCpt.tsx
+var WebPosLoginCpt_exports = {};
+__export(WebPosLoginCpt_exports, {
+  default: () => WebPosLoginCpt_default
+});
+module.exports = __toCommonJS(WebPosLoginCpt_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_locales = __toESM(require("./locales"));
+var import_BrandPanel = __toESM(require("./components/BrandPanel"));
+var import_LoginPanel = __toESM(require("./components/LoginPanel"));
+var import_SelectStore = __toESM(require("./components/SelectStore"));
+var import_SelectDevice = __toESM(require("./components/SelectDevice"));
+var import_UserFooter = __toESM(require("./components/UserFooter"));
+var import_WebPosLoginCpt = require("./WebPosLoginCpt.less");
+var DEFAULT_BACKGROUND = "http://static.pisellcdn.com/defaultBg.png";
+var WebPosLoginCpt = (0, import_react.memo)((props) => {
+  const {
+    className = "",
+    style,
+    loginConfig,
+    backgroundImage,
+    brandConfig,
+    step = "login",
+    showBackButton = true,
+    storeList = [],
+    deviceList = [],
+    userInfo,
+    selectedStore,
+    lastUsedStoreId,
+    lastUsedDeviceId,
+    locale = "en",
+    loading = false,
+    onStoreSelect,
+    onDeviceSelect,
+    onChangeAccount,
+    onChangeStore,
+    onBack,
+    onLoginSuccess
+  } = props;
+  console.log(props, onLoginSuccess, "onLoginSuccess");
+  import_utils.locales.init(import_locales.default, locale);
+  const stepTitle = (0, import_react.useMemo)(() => {
+    const titles = {
+      login: "",
+      store: import_utils.locales.getText("webpos-login-select-store-title"),
+      device: import_utils.locales.getText("webpos-login-select-device-title")
+    };
+    return titles[step];
+  }, [step, locale]);
+  const shouldShowBackButton = (0, import_react.useMemo)(() => {
+    if (step === "login") return false;
+    return showBackButton;
+  }, [step, showBackButton]);
+  const renderRightContent = () => {
+    switch (step) {
+      case "login":
+        return /* @__PURE__ */ import_react.default.createElement(import_LoginPanel.default, { onLoginSuccess, config: loginConfig });
+      case "store":
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_SelectStore.default,
+          {
+            storeList,
+            locale,
+            loading,
+            lastUsedStoreId,
+            onSelect: onStoreSelect
+          }
+        );
+      case "device":
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_SelectDevice.default,
+          {
+            deviceList,
+            locale,
+            loading,
+            lastUsedDeviceId,
+            onSelect: onDeviceSelect
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  const renderFooter = () => {
+    if (step === "login") return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_UserFooter.default,
+      {
+        isShowChangeStore: storeList.length > 1,
+        userInfo,
+        selectedStore,
+        step,
+        locale,
+        onChangeAccount,
+        onChangeStore
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `webpos-login ${className}`.trim(),
+      style: {
+        ...style,
+        backgroundImage: `url(${backgroundImage || DEFAULT_BACKGROUND})`
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "webpos-login__backdrop" }),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "webpos-login__card" }, /* @__PURE__ */ import_react.default.createElement(import_BrandPanel.default, { config: brandConfig }), /* @__PURE__ */ import_react.default.createElement("div", { className: "webpos-login__right-panel" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "webpos-login__header" }, shouldShowBackButton && /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        className: "webpos-login__back-btn",
+        onClick: onBack,
+        type: "button",
+        "aria-label": import_utils.locales.getText("webpos-login-back")
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "path",
+          {
+            d: "M15 18L9 12L15 6",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      )
+    ), stepTitle && /* @__PURE__ */ import_react.default.createElement("h1", { className: "webpos-login__title" }, stepTitle)), /* @__PURE__ */ import_react.default.createElement("div", { className: "webpos-login__content" }, renderRightContent()), /* @__PURE__ */ import_react.default.createElement("div", { className: "webpos-login__footer" }, renderFooter())))
+  );
+});
+WebPosLoginCpt.displayName = "WebPosLoginCpt";
+var WebPosLoginCpt_default = WebPosLoginCpt;

package/lib/plus/webPosLogin/WebPosLoginCpt.less

@@ -0,0 +1,171 @@
+/**
+ * WebPosLogin 主组件样式
+ */
+.webpos-login {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  overflow: hidden;
+
+  /* 背景模糊遮罩层 */
+  &__backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: inherit;
+    background-size: inherit;
+    background-position: inherit;
+    filter: blur(20px);
+    transform: scale(1.1); /* 放大以避免边缘模糊不完整 */
+    z-index: 0;
+
+    /* 添加暗色遮罩增强对比 */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  /* 主内容卡片 */
+  &__card {
+    position: relative;
+    display: flex;
+    width: 83%;
+    max-width: 1600px;
+    min-height: 620px;
+    max-height: 700px;
+    background: #fff;
+    border-radius: 24px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
+    z-index: 1;
+    height: 81%;
+  }
+
+  /* 右侧交互区 */
+  &__right-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 400px;
+    padding: 32px 40px;
+    background: #fafafa;
+    border-radius: 0 24px 24px 0;
+    height: 100%;
+  }
+
+  /* 头部区域 */
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-height: 40px;
+    margin-bottom: 24px;
+  }
+
+  /* 返回按钮 */
+  &__back-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    color: #333;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  /* 步骤标题 */
+  &__title {
+    flex: 1;
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #1a1a1a;
+    text-align: center;
+    padding-right: 56px; /* 平衡返回按钮的宽度，使标题居中 */
+  }
+
+  /* 内容区 */
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* 底部用户信息区域 */
+  &__footer {
+    margin-top: auto;
+    padding-top: 16px;
+    border-top: 1px solid #eee;
+
+    &:empty {
+      display: none;
+      padding: 0;
+      border: none;
+    }
+  }
+}
+
+/* 响应式适配 */
+@media screen and (max-width: 1024px) {
+  .webpos-login {
+    &__card {
+      width: 83%;
+      min-height: 550px;
+    }
+
+    &__right-panel {
+      min-width: 600px;
+      padding: 24px 28px;
+    }
+
+    &__title {
+      font-size: 18px;
+      padding-right: 48px;
+    }
+  }
+}
+
+/* 小屏幕适配 */
+@media screen and (max-width: 768px) {
+  .webpos-login {
+    &__card {
+      flex-direction: column;
+      width: 95%;
+      min-height: auto;
+    }
+
+    &__right-panel {
+      min-width: auto;
+      border-radius: 0 0 24px 24px;
+    }
+  }
+}
+

package/lib/plus/webPosLogin/components/BrandPanel/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BrandPanelProps } from '../../types';
+import './index.less';
+/**
+ * BrandPanel 品牌区组件
+ * @description 登录页面左侧品牌展示区域，支持轮播图片/视频（预留），当前仅展示 Logo
+ */
+declare const BrandPanel: React.FC<BrandPanelProps>;
+export default BrandPanel;