@pisell/materials 3.3.82 → 3.3.83

package/lib/components/pisellLookup/PisellLookup.less

@@ -0,0 +1,637 @@
+/**
+ * PisellLookup 组件样式
+ */
+
+@prefix: pisell-lookup;
+
+.@{prefix} {
+  position: relative;
+
+  // ============ 内容区样式 ============
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &-search-area {
+    // Modal/Drawer 中的搜索区域
+    margin-bottom: 8px;
+  }
+
+  &-search-area-with-close {
+    display: flex;
+    align-items: stretch;
+    gap: 24px;
+    margin-bottom: 8px;
+
+    .pisell-lookup-trigger-input {
+      flex: 1;
+    }
+
+    .pisell-lookup-modal-close-btn {
+      flex-shrink: 0;
+    }
+  }
+
+  // ============ 结果区样式 ============
+
+  &-result {
+    min-height: 100px;
+  }
+
+  &-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+  }
+
+  // ============ 加载状态样式 ============
+
+  &-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+  }
+
+  // ============ Inline 模式样式 ============
+
+  &-inline {
+    width: 100%;
+    position: relative;
+
+    .@{prefix}-result-inline {
+      position: absolute;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+      margin-top: 4px;
+      padding: 16px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      max-height: 400px;
+      overflow-y: auto;
+    }
+  }
+
+  // ============ Popup 模式样式 ============
+
+  &-popup {
+    width: 100%;
+    position: relative;
+
+    .@{prefix}-result-popup {
+      padding: 16px;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+  }
+
+  // ============ 触发器样式 ============
+
+  &-trigger {
+    &-input {
+      // Input 触发器样式 - 根据设计稿定制
+    }
+
+    &-button {
+      // 按钮触发器样式
+    }
+
+    &-icon {
+      // 图标触发器样式
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    &-text {
+      // 文本触发器样式
+      cursor: pointer;
+      color: #1890ff;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &-custom {
+      // 自定义触发器容器
+      display: inline-block;
+    }
+  }
+
+  // ============ Input 样式覆盖 ============
+
+  // 覆盖 Ant Design Input 默认样式（适用于所有尺寸）
+  &-trigger-input.pisell-lowcode-input-affix-wrapper {
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    padding: 4px 4px 4px 16px;
+    background-color: #ffffff;
+
+    &:hover {
+      border-color: #d0d5dd;
+    }
+
+    &:focus,
+    &.pisell-lowcode-input-affix-wrapper-focused {
+      border-color: #7f56d9;
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0 0 0 2px rgba(127, 86, 217, 0.1);
+    }
+
+    // Input 文本样式
+    .pisell-lowcode-input {
+      color: #000000;
+      font-size: 16px;
+      line-height: 24px;
+
+      &::placeholder {
+        color: #667085;
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+  }
+
+  // 小号输入框
+  &-trigger-input.pisell-lowcode-input-affix-wrapper-sm {
+    padding: 2px 2px 2px 12px;
+
+    .pisell-lookup-input-clear {
+      .anticon {
+        font-size: 18px;
+      }
+
+      .pisell-lookup-input-clear-text {
+        font-size: 14px;
+        line-height: 20px;
+      }
+    }
+
+    .pisell-lookup-input-scan {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+
+    .pisell-lookup-input-confirm {
+      padding: 8px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  // 大号输入框
+  &-trigger-input.pisell-lowcode-input-affix-wrapper-lg {
+    padding: 6px 6px 6px 16px;
+
+    .pisell-lookup-input-clear {
+      .anticon {
+        font-size: 20px;
+      }
+    }
+
+    .pisell-lookup-input-scan {
+      font-size: 28px;
+      width: 28px;
+      height: 28px;
+    }
+
+    .pisell-lookup-input-confirm {
+      padding: 10px;
+    }
+  }
+
+  // ============ Input 后缀区域样式 ============
+
+  &-input {
+    &-suffix {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    &-clear {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      padding: 6px 4px;
+      cursor: pointer;
+      color: #7f56d9;
+      user-select: none;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      .anticon {
+        font-size: 24px;
+        color: #7f56d9;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+      }
+
+      &-text {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        color: #7f56d9;
+      }
+    }
+
+    &-scan {
+      cursor: pointer;
+      color: #000000;
+      font-size: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    &-confirm {
+      background-color: #7f56d9;
+      border-color: #7f56d9;
+      border-radius: 8px;
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+      padding: 10px;
+      height: auto;
+      min-width: auto;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 22px;
+      color: #ffffff;
+
+      &:hover {
+        background-color: #6941c6 !important;
+        border-color: #6941c6 !important;
+        color: #ffffff !important;
+      }
+
+      &:active {
+        background-color: #53389e !important;
+        border-color: #53389e !important;
+        color: #ffffff !important;
+      }
+
+      span {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 22px;
+      }
+
+      &.pisell-lowcode-btn-sm {
+        padding: 10px;
+        height: auto;
+        font-size: 16px;
+        line-height: 22px;
+      }
+
+      &.pisell-lowcode-btn-middle {
+        padding: 10px;
+        height: auto;
+        font-size: 16px;
+        line-height: 22px;
+      }
+    }
+  }
+
+  // ============ 辅助区样式 ============
+
+  &-auxiliary {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  // ============ 搜索历史样式 ============
+
+  &-history {
+    &-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+    }
+
+    &-item {
+      cursor: pointer;
+      background-color: #f2f4f7;
+      border: 1.5px solid #d0d5dd;
+      border-radius: 6px;
+      padding: 4px 6px 4px 12px;
+      color: #344054;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      margin: 0;
+
+      &:hover {
+        opacity: 0.8;
+        background-color: #f2f4f7;
+        border-color: #d0d5dd;
+      }
+
+      .pisell-lowcode-tag-close-icon {
+        color: #344054;
+        font-size: 12px;
+        margin-left: 2px;
+
+        &:hover {
+          color: #344054;
+        }
+
+        .anticon {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  // ============ 联想词样式 ============
+
+  &-suggestions {
+    &-title {
+      margin-bottom: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #475467;
+    }
+
+    &-list {
+      // 联想词列表样式
+
+      .pisell-lowcode-list-item {
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        border: none;
+        color: #101828;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+
+        &:hover {
+          background-color: #f9fafb;
+        }
+
+        .anticon {
+          color: #667085;
+        }
+      }
+    }
+
+    &-item {
+      padding: 8px 12px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      color: #101828;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+
+      &:hover {
+        background-color: #f9fafb;
+      }
+    }
+  }
+
+  // ============ 热门搜索样式 ============
+
+  &-hotwords {
+    &-title {
+      margin-bottom: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #475467;
+
+      .anticon {
+        display: none; // 隐藏火焰图标，根据设计稿
+      }
+    }
+
+    &-list {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4px 16px;
+      width: 100%;
+    }
+
+    &-item {
+      cursor: pointer;
+      color: #101828;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  // ============ Modal 样式 ============
+
+  &-modal {
+    &-container {
+      // Modal 容器样式
+    }
+
+    &-wrapper {
+      background: #ffffff99;
+      backdrop-filter: blur(8px);
+      border: 1px solid #ffffff;
+      border-radius: 8px;
+      padding: 8px;
+    }
+
+    &-close-btn {
+      background-color: #ffffff;
+      border: 1px solid #d0d5dd;
+      border-radius: 8px;
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+      padding: 0 20px;
+      height: 56px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      color: #344054;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+      flex-shrink: 0;
+
+      &:hover {
+        background-color: #f9fafb !important;
+        border-color: #d0d5dd !important;
+        color: #344054 !important;
+      }
+
+      &:active {
+        background-color: #f2f4f7 !important;
+        border-color: #d0d5dd !important;
+      }
+
+      .anticon {
+        font-size: 20px;
+        color: #344054;
+      }
+
+      span {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+      }
+    }
+
+    &-content {
+      // Modal 内容区样式
+    }
+  }
+
+  // ============ Drawer 样式 ============
+
+  &-drawer {
+    &-container {
+      // Drawer 容器样式
+    }
+
+    &-content {
+      // Drawer 内容区样式
+    }
+  }
+
+  // ============ Popup 样式 ============
+
+  &-popup {
+    // Popup 样式
+  }
+
+  // ============ Detached 样式 ============
+
+  &-detached {
+    // Detached 样式
+  }
+}
+
+// ============ Modal 全局样式覆盖 ============
+
+.pisell-lookup-modal-container {
+  // 当没有遮罩层时，允许点击穿透到背后内容
+  &.pisell-lookup-modal-no-mask {
+    .pisell-lowcode-modal-wrap {
+      pointer-events: none;
+    }
+
+    .pisell-lowcode-modal {
+      pointer-events: auto;
+    }
+  }
+
+  .pisell-lowcode-modal-header {
+    display: none;
+  }
+
+  .pisell-lowcode-modal-body {
+    padding: 0;
+  }
+
+  .pisell-lowcode-modal-content {
+    padding: 0 !important;
+    background: transparent;
+    box-shadow: none;
+  }
+}
+
+// ============ Modal 自定义挂载点样式 ============
+
+.pisell-lookup-modal-custom-container {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+
+  .pisell-lowcode-modal,
+  .pisell-lowcode-modal {
+    margin: 0 !important;
+    max-width: none !important;
+    top: 8px !important;
+    left: 0 !important;
+    right: 0 !important;
+    padding: 0 !important;
+  }
+}
+
+// ============ Drawer 全局样式覆盖 ============
+
+.pisell-lookup-drawer-container {
+  // 当没有遮罩层时，允许点击穿透到背后内容
+  &.pisell-lookup-drawer-no-mask {
+    .pisell-lowcode-drawer-mask {
+      pointer-events: none;
+    }
+
+    .pisell-lowcode-drawer-content-wrapper {
+      pointer-events: auto;
+    }
+  }
+
+  .pisell-lowcode-drawer-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .pisell-lowcode-drawer-body {
+    padding: 24px;
+    background-color: #fafafa;
+  }
+
+  .pisell-lowcode-drawer-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000000;
+    line-height: 24px;
+  }
+
+  .pisell-lowcode-drawer-close {
+    color: #000000;
+
+    &:hover {
+      color: #000000;
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    .anticon {
+      font-size: 16px;
+    }
+  }
+}