queenshow/src/modules/editor/components/CompUI/basicUI/Text/ToolbarComp.tsx

import {
  IconLineHeight,
  IconTextCenter,
  IconTextJustify,
  IconTextLeft,
  IconTextRight,
} from "@/assets/icons";
import { css } from "@linaria/core";
import { Button, Dropdown, InputNumber, Menu, Tooltip } from "ant-design-vue";

import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
import Pickr from "@simonwep/pickr";
import "@simonwep/pickr/dist/themes/nano.min.css";
import { queenApi } from "queenjs";
import { defineComponent, onMounted, ref, watch, onUnmounted } from "vue";
import { any, bool, string } from "vue-types";

export const TextColor = defineComponent({
  props: {
    value: string().def("#666666"),
  },
  emits: ["change"],
  setup(props, { emit }) {
    let picker: any = null;
    let emitFlagRef = ref(true);
    function initPicker() {
      picker = Pickr.create({
        el: ".color_picker",
        theme: "nano",
        default: props.value,
        i18n: {
          "btn:save": "确定",
        },
        components: {
          preview: true,
          opacity: false,
          hue: true,
          interaction: {
            hex: false,
            rgba: false,
            input: true,
            save: true,
          },
        },
      });

      picker.on("save", (color: any) => {
        picker.hide();
        const hexa = color.toHEXA().toString();
        if (!emitFlagRef.value) {
          emitFlagRef.value = true;
          return;
        }
        emit("change", hexa);
      });
    }
    watch(
      () => props.value,
      () => {
        console.log(props.value);
        emitFlagRef.value = false;
        picker.setColor(props.value);
      }
    );
    onMounted(() => {
      initPicker();
    });
    onUnmounted(() => {
      console.log("destroy");
      if (picker) {
        picker.destroyAndRemove();
        picker = null;
      }
    });

    return () => (
      <div
        class={ColorPicker}
        onClick={() => {
          picker?.show();
        }}
      >
        <div class={"color_picker"} id="color_picker"></div>
      </div>
    );
  },
});

export const AlignComp = defineComponent({
  props: {
    value: string<"left" | "right" | "center" | "justify">().def("left"),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const aligns = [
      {
        label: "左对齐",
        key: "left",
        icon: <IconTextLeft />,
      },
      {
        label: "居中对齐",
        key: "center",
        icon: <IconTextCenter />,
      },
      {
        label: "右对齐",
        key: "right",
        icon: <IconTextRight />,
      },
      {
        label: "两端对齐",
        key: "justify",
        icon: <IconTextJustify />,
      },
    ];

    const overlay = () => {
      return (
        <Menu>
          {aligns.map((e: any) => {
            return (
              <Menu.Item
                class={props.value == e.key ? currStyle : null}
                onClick={() => {
                  emit("change", e.key);
                }}
              >
                <Tooltip placement="right" title={e.label}>
                  {e.icon}
                </Tooltip>
              </Menu.Item>
            );
          })}
        </Menu>
      );
    };
    const currIcon = (key: string) => {
      const item = aligns.find((e) => {
        return e.key == key;
      });
      return item ? item.icon : null;
    };
    return () => (
      <Dropdown
        overlay={overlay()}
        overlayClassName={"editor_toolbar_drop"}
        trigger={"click"}
        placement="bottom"
      >
        <Button type="text" icon={currIcon(props.value)}></Button>
      </Dropdown>
    );
  },
});

export const LineHeightComp = defineComponent({
  props: {
    value: string().def("1.5"),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const options = [1, 1.5, 2, 2.5, 3];

    const overlay = () => {
      return (
        <Menu>
          {options.map((e: any) => {
            return (
              <Menu.Item
                class={props.value == e ? currStyle : null}
                onClick={() => {
                  emit("change", e);
                }}
              >
                {e}
              </Menu.Item>
            );
          })}
        </Menu>
      );
    };

    return () => (
      <Dropdown
        overlay={overlay()}
        overlayClassName={"editor_toolbar_drop"}
        trigger={"click"}
        placement="bottom"
      >
        <Button type="text" icon={<IconLineHeight />}></Button>
      </Dropdown>
    );
  },
});

export const FontStyleComp = defineComponent({
  props: {
    icon: any(),
    value: bool().def(false),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const triggerStyle = () => {
      emit("change", !props.value);
    };
    return () => (
      <Button
        type="text"
        class={props.value ? currStyle : null}
        icon={props.icon}
        onClick={triggerStyle}
      ></Button>
    );
  },
});

export const FontFamily = defineComponent({
  props: {
    value: string().def(""),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const options = [
      { label: "默认字体", value: "" },
      { label: "宋体", value: "宋体,Songti,STSong,serif" },
      { label: "黑体", value: "黑体,Heiti,STHeiti,sans-serif" },
      { label: "仿宋", value: "仿宋,FangSong,STFangsong,serif" },
      { label: "楷体", value: "楷体,KaiTi,STKaiti,sans-serif" },
    ];
    return () => {
      return (
        <Select
          options={options}
          value={props.value || ""}
          onChange={(v) => {
            emit("change", v);
          }}
        ></Select>
      );
    };
  },
});
export const FontSize = defineComponent({
  props: {
    value: string().def("12px"),
  },
  emits: ["change"],
  setup(props, { emit }) {
    return () => {
      return (
        <InputNumber
          defaultValue={12}
          min={12}
          max={60}
          value={parseInt(props.value) || 12}
          onChange={(value: any) => {
            emit("change", value + "px");
          }}
        />
      );
    };
  },
});
export const LinkButton = defineComponent({
  props: {
    icon: any(),
    value: any(),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const showLinkInput = async () => {
      const res = await queenApi.showInput({
        title: "请输入链接地址",
        defaultValue: "http://",
      });
      emit("change", res);
    };
    return () => (
      <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
    );
  },
});

const currStyle = css`
  color: @inf-primary-color;
  &:hover,
  &:focus {
    color: @inf-primary-color;
  }
`;
const ColorPicker = css`
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  cursor: pointer;
  .pickr {
    width: 100%;
    height: 100%;

    .pcr-button {
      width: 100%;
      height: 100%;
      border: 1px solid transparent;
    }
    border-radius: 2px;
    input {
      &:focus,
      &.pcr-active {
        border-color: @inf-primary-color;
        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
      }
    }
    button {
      &:focus,
      &.pcr-active {
        border-color: @inf-primary-color;
        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
      }
    }
  }
  .pcr-app {
    input {
      &:focus,
      &.pcr-active {
        border-color: @inf-primary-color;
        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
      }
    }
    button {
      &:focus,
      &.pcr-active {
        border-color: @inf-primary-color;
        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
      }
    }
  }
`;