@pisell/materials 1.0.512 → 1.0.514

package/lib/components/profileMenu/index.less

@@ -0,0 +1,112 @@
+.profile-menu-wrap {
+  display: flex;
+box-sizing: border-box;
+  gap: 10px;
+  width: fit-content;
+  align-items: center;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 16px;
+
+  border-radius: 50px;
+  border: 1px solid var(--Gray-100, #f2f4f7);
+  background: var(--Base-White, #fff);
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  /* Shadow/sm */
+  // box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
+  //   0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+
+  &:hover {
+    border-color: var(--Gray-200, #e5e7eb);
+    box-shadow: 0px 2px 4px 0px rgba(16, 24, 40, 0.15);
+  }
+
+  .profile-menu-icon {
+    display: flex;
+    align-items: center;
+  }
+
+}
+
+
+.profile-menu-user-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  padding: 0;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    flex-wrap: nowrap;
+  }
+
+  &-name {
+    color: var(--Gray-700, #344054);
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-email {
+    color: var(--Gray-600, #475467);
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.profile-menu-dropdown {
+  .ant-dropdown-menu {
+    padding: 8px;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-100, #f2f4f7);
+    background: var(--Base-White, #fff);
+    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
+      0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+
+    .ant-dropdown-menu-item {
+      padding: 8px 12px;
+      border-radius: 6px;
+      min-height: 40px;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background: var(--Gray-50, #f9fafb);
+      }
+
+      &:active {
+        background: var(--Gray-100, #f2f4f7);
+      }
+
+      .profile-menu-user-info-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        width: 100%;
+        flex-wrap: nowrap;
+      }
+    }
+
+    .ant-dropdown-menu-item-divider {
+      margin: 8px 0;
+      background-color: var(--Gray-100, #f2f4f7);
+    }
+  }
+}

package/lib/index.d.ts

@@ -104,6 +104,7 @@ export { default as PisellToast } from './components/pisellToast';
 export { default as PisellWalletPassCard } from './components/pisellWalletPassCard';
 export { default as PisellScan } from './components/pisellScan';
 export { default as PisellAlert } from './components/pisellAlert';
+export { default as ProfileMenu } from './components/profileMenu';
 export { default as PisellCard } from './components/pisellCard';
 export { default as CropPhoto } from './components/cropPhoto';
 export { default as PisellQrcode } from './components/pisellQrcode';

package/lib/index.js

@@ -139,6 +139,7 @@ __export(src_exports, {
   Popconfirm: () => import_antd21.Popconfirm,
   Popover: () => import_antd22.Popover,
   ProductCard: () => import_productCard.default,
+  ProfileMenu: () => import_profileMenu.default,
   Progress: () => import_antd23.Progress,
   QRCode: () => import_qrcode.default,
   Radio: () => import_radio.default,
@@ -290,6 +291,7 @@ var import_pisellToast = __toESM(require("./components/pisellToast"));
 var import_pisellWalletPassCard = __toESM(require("./components/pisellWalletPassCard"));
 var import_pisellScan = __toESM(require("./components/pisellScan"));
 var import_pisellAlert = __toESM(require("./components/pisellAlert"));
+var import_profileMenu = __toESM(require("./components/profileMenu"));
 var import_pisellCard = __toESM(require("./components/pisellCard"));
 var import_cropPhoto = __toESM(require("./components/cropPhoto"));
 var import_pisellQrcode = __toESM(require("./components/pisellQrcode"));
@@ -448,6 +450,7 @@ var import_pisellList01 = __toESM(require("./components/pisellList01"));
   Popconfirm,
   Popover,
   ProductCard,
+  ProfileMenu,
   Progress,
   QRCode,
   Radio,

package/lowcode/profile-menu/meta.ts

@@ -0,0 +1,175 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'ProfileMenu',
+  title: '个人中心菜单',
+  category: '通用',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.0',
+    exportName: 'ProfileMenu',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      title: {
+        label: "入口菜单设置"
+      },
+      display: "block",
+      type: "group",
+      items: [
+        {
+          name: 'showBadge',
+          title: { label: '显示徽标', tip: '是否在头像右上角显示徽标' },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'badgeCount',
+          title: { label: '徽标数量', tip: '徽标显示的数字' },
+          propType: 'number',
+          defaultValue: 1,
+          setter: 'NumberSetter',
+        },
+        {
+          name: 'menuIcon',
+          title: { label: '菜单图标', tip: '左侧菜单图标' },
+          propType: { type: 'oneOfType', value: ['string', 'node'] },
+          setter: [{
+            componentName: 'IconSetter',
+          }, {
+            componentName: 'SlotSetter',
+          }],
+        },
+        {
+          name: 'userName',
+          title: { label: '用户名', tip: '显示的用户名' },
+          propType: 'string',
+          setter: 'StringSetter',
+        },
+        {
+          name: 'email',
+          title: { label: '邮箱', tip: '显示的邮箱地址' },
+          propType: 'string',
+          setter: 'StringSetter',
+        },
+        {
+          name: 'isShowUserName',
+          title: { label: '显示用户名', tip: '是否显示用户名' },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'isShowEmail',
+          title: { label: '显示邮箱', tip: '是否显示邮箱' },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+      ]
+    },
+    {
+      title: {
+        label: "菜单字段设置"
+      },
+      display: "block",
+      type: "group",
+      items: [
+        {
+          name: 'isShowUserInfo',
+          title: { 
+            label: '显示用户信息展示区域', 
+            tip: '在下拉菜单顶部显示用户信息' 
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'menuItems',
+          title: { label: '下拉菜单项', tip: '下拉菜单的配置项' },
+          propType: {
+            type: 'arrayOf',
+            value: {
+              type: 'shape',
+              value: {
+                key: 'string',
+                label: 'string',
+                icon: 'node',
+                danger: 'bool',
+                disabled: 'bool',
+              },
+            },
+          },
+          setter: {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'ObjectSetter',
+                props: {
+                  config: {
+                    items: [
+                      {
+                        name: 'key',
+                        title: '唯一标识',
+                        setter: 'StringSetter',
+                      },
+                      {
+                        name: 'label',
+                        title: '菜单项文本',
+                        setter: 'StringSetter',
+                      },
+                      {
+                        name: 'icon',
+                        title: '图标',
+                        setter: 'IconSetter',
+                      },
+                      {
+                        name: 'danger',
+                        title: '危险项',
+                        setter: 'BoolSetter',
+                      },
+                      {
+                        name: 'disabled',
+                        title: '禁用',
+                        setter: 'BoolSetter',
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        },
+        {
+          name: 'placement',
+          title: { label: '弹出位置', tip: '下拉菜单弹出的位置' },
+          propType: {
+            type: 'oneOf',
+            value: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
+          },
+          defaultValue: 'bottomRight',
+          setter: {
+            componentName: 'SelectSetter',
+            props: {
+              options: [
+                { label: '左下', value: 'bottomLeft' },
+                { label: '下居中', value: 'bottomCenter' },
+                { label: '右下', value: 'bottomRight' },
+                { label: '左上', value: 'topLeft' },
+                { label: '上居中', value: 'topCenter' },
+                { label: '右上', value: 'topRight' },
+              ],
+            },
+          },
+        },
+      ]
+    }
+  ],
+  configure: { supports: { style: true, className: true } },
+};

package/lowcode/profile-menu/snippets.ts

@@ -0,0 +1,67 @@
+export default [
+  {
+    title: '个人中心菜单',
+    screenshot: '',
+    schema: {
+      componentName: 'ProfileMenu',
+      props: {
+        isShowEmail: true,
+        isShowUserName: true,
+        isShowUserInfo: false,
+        menuIcon: {
+          type: "JSSlot",
+          value: [
+            {
+              componentName: "Icon",
+              props: {
+                type: "MenuOutlined",
+                size: 20,
+                rotate: 0,
+                spin: false,
+              },
+            },
+          ],
+        },
+        menuItems: [
+          {
+            key: 'account',
+            label: 'My Account',
+            icon: {
+              type: "JSSlot",
+              value: [
+                {
+                  componentName: "Icon",
+                  props: {
+                    type: "UserOutlined",
+                  },
+                },
+              ],
+            },
+          },
+          {
+            type: 'divider',
+          },
+          {
+            key: 'logout',
+            label: 'Log Out',
+            icon: {
+              type: "JSSlot",
+              value: [
+                {
+                  componentName: "Icon",
+                  props: {
+                    type: "LogoutOutlined",
+                  },
+                },
+              ],
+            },
+            danger: true,
+          },
+        ],
+        placement: 'bottomRight',
+        showBadge: false,
+        badgeCount: 1,
+      },
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.512",
+  "version": "1.0.514",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -69,8 +69,8 @@
     "libphonenumber-js": "^1.11.17",
     "swiper": "^8.4.7",
     "@pisell/date-picker": "1.0.114",
-    "@pisell/icon": "0.0.10",
-    "@pisell/utils": "1.0.43"
+    "@pisell/utils": "1.0.43",
+    "@pisell/icon": "0.0.10"
   },
   "peerDependencies": {
     "react": "^18.0.0",