ant-design-x-vue/es/conversations/style/index.mjs

Craft AI-driven interfaces effortlessly

import "../../_util/cssinjs/StyleContext.mjs";
import "vue";
import { unit as r } from "../../_util/cssinjs/util.mjs";
import "../../_util/cssinjs/theme/ThemeCache.mjs";
import "../../_util/warning.mjs";
import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
import { genStyleHooks as e } from "../../theme/genStyleUtils.mjs";
import { merge as l } from "../../_util/cssinjs-utils/util/statistic.mjs";
const t = (o) => {
  const { componentCls: i } = o;
  return {
    [i]: {
      display: "flex",
      flexDirection: "column",
      gap: o.paddingXXS,
      overflowY: "auto",
      padding: o.paddingSM,
      [`&${i}-rtl`]: {
        direction: "rtl"
      },
      // 会话列表
      [`& ${i}-list`]: {
        display: "flex",
        gap: o.paddingXXS,
        flexDirection: "column",
        paddingLeft: 0,
        [`& ${i}-item`]: {
          paddingInlineStart: o.paddingXL
        },
        [`& ${i}-label`]: {
          color: o.colorTextDescription
        }
      },
      // 会话列表项
      [`& ${i}-item`]: {
        display: "flex",
        height: o.controlHeightLG,
        minHeight: o.controlHeightLG,
        gap: o.paddingXS,
        padding: `0 ${r(o.paddingXS)}`,
        alignItems: "center",
        borderRadius: o.borderRadiusLG,
        cursor: "pointer",
        transition: `all ${o.motionDurationMid} ${o.motionEaseInOut}`,
        // 悬浮样式
        "&:hover": {
          backgroundColor: o.colorBgTextHover
        },
        // 选中样式
        "&-active": {
          backgroundColor: o.colorBgTextHover,
          [`& ${i}-label, ${i}-menu-icon`]: {
            color: o.colorText
          }
        },
        // 禁用样式
        "&-disabled": {
          cursor: "not-allowed",
          [`& ${i}-label`]: {
            color: o.colorTextDisabled
          }
        },
        // 悬浮、选中时激活操作菜单
        "&:hover, &-active": {
          [`& ${i}-menu-icon`]: {
            opacity: 1
          }
        }
      },
      // 会话名
      [`& ${i}-label`]: {
        flex: 1,
        overflow: "hidden",
        textOverflow: "ellipsis",
        color: o.colorText
      },
      // 会话操作菜单
      [`& ${i}-menu-icon`]: {
        opacity: 0,
        fontSize: o.fontSizeXL
      },
      // 会话图标
      [`& ${i}-group-title`]: {
        display: "flex",
        alignItems: "center",
        height: o.controlHeightLG,
        minHeight: o.controlHeightLG,
        padding: `0 ${r(o.paddingXS)}`
      }
    }
  };
}, n = () => ({}), f = e(
  "Conversations",
  (o) => {
    const i = l(o, {});
    return t(i);
  },
  n
);
export {
  f as default,
  n as prepareComponentToken
};