Mistj's Digital Garden | Mistj's Digital Garden

通过命令，按提示创建，可以快速创建代码模板：

看了下文档还是非常简单：Create Your First Extension | Raycast API

从网上找了一个生成身份证号的接口，代码示例：

import {
  ActionPanel,
  Detail,
  List,
  Action,
  showToast,
  Toast,
  Clipboard,
  popToRoot,
  closeMainWindow, PopToRootType
} from "@raycast/api";
import axios from "axios";
import { useEffect, useState } from "react";
import { AxiosResponse } from "axios";

interface IdCardResult {
  id?: string;
  name?: string;
  checkValid?: boolean;
  location?: string;
  male?: boolean;
  birthday?: string;
  age?: number;
}

interface IdCardResultList {
  code?: number;
  msg?: string;
  data?: IdCardResult[];
}

export default function Command() {
  const [data, setData] = useState<IdCardResult[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = {
          count: 10,
          // 可以写生日日期例如 1999-05-02
          birthday: "",
          areaID: null,
          male: false,
          includeName: false,
          minAge: null,
          maxAge: null
        };
        const response: AxiosResponse<IdCardResultList> = await axios.post("https://****", data);
        if (!response || !response.data) {
          throw new Error("Network response was not ok");
        }
        console.log(response.data.data);
        setData(response.data?.data ?? []);
      } catch (err) {
        const e = err as Error;
        setError(e.message);
        showToast({
          style: Toast.Style.Failure,
          title: "Error fetching data",
          message: e.message
        });
      }
    };
    fetchData();
  }, []);

  if (error) {
    return <Detail markdown={`# Error: ${error}`} />;
  }

  if (!data) {
    return <Detail markdown="# Loading..." />;
  }

  return (
    <List>
      {data.map((button) => (
        <List.Item
          key={button.id}
          title={`${button.id} - ${button.location} - ${button.age}岁`}
          actions={
            <ActionPanel>
              <Action
                title="Copy"
                onAction={async () => {
                  await Clipboard.copy(`${button.id}`, { concealed: true });
                  await showToast({ title: "Copied", message: `${button.id}` });
                  await popToRoot({ clearSearchBar: true });
                  await closeMainWindow({ popToRootType: PopToRootType.Suspended });
                }}
              />
            </ActionPanel>
          }
        />
      ))}
    </List>
  );
}

import {
  ActionPanel,
  Detail,
  List,
  Action,
  showToast,
  Toast,
  Clipboard,
  popToRoot,
  closeMainWindow, PopToRootType
} from "@raycast/api";
import axios from "axios";
import { useEffect, useState } from "react";
import { AxiosResponse } from "axios";

interface IdCardResult {
  id?: string;
  name?: string;
  checkValid?: boolean;
  location?: string;
  male?: boolean;
  birthday?: string;
  age?: number;
}

interface IdCardResultList {
  code?: number;
  msg?: string;
  data?: IdCardResult[];
}

export default function Command() {
  const [data, setData] = useState<IdCardResult[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = {
          count: 10,
          // 可以写生日日期例如 1999-05-02
          birthday: "",
          areaID: null,
          male: false,
          includeName: false,
          minAge: null,
          maxAge: null
        };
        const response: AxiosResponse<IdCardResultList> = await axios.post("https://****", data);
        if (!response || !response.data) {
          throw new Error("Network response was not ok");
        }
        console.log(response.data.data);
        setData(response.data?.data ?? []);
      } catch (err) {
        const e = err as Error;
        setError(e.message);
        showToast({
          style: Toast.Style.Failure,
          title: "Error fetching data",
          message: e.message
        });
      }
    };
    fetchData();
  }, []);

  if (error) {
    return <Detail markdown={`# Error: ${error}`} />;
  }

  if (!data) {
    return <Detail markdown="# Loading..." />;
  }

  return (
    <List>
      {data.map((button) => (
        <List.Item
          key={button.id}
          title={`${button.id} - ${button.location} - ${button.age}岁`}
          actions={
            <ActionPanel>
              <Action
                title="Copy"
                onAction={async () => {
                  await Clipboard.copy(`${button.id}`, { concealed: true });
                  await showToast({ title: "Copied", message: `${button.id}` });
                  await popToRoot({ clearSearchBar: true });
                  await closeMainWindow({ popToRootType: PopToRootType.Suspended });
                }}
              />
            </ActionPanel>
          }
        />
      ))}
    </List>
  );
}

效果如图

0x032-如何开发一个raycast插件