feat: add refresh button in mask dialog

app/src/api/mask.ts

@@ -10,7 +10,12 @@ type ListMaskResponse = CommonResponse & {
 export async function listMasks(): Promise<ListMaskResponse> {
   try {
     const resp = await axios.get("/conversation/mask/view");
-    return resp.data;
+    return (
+      resp.data ?? {
+        status: true,
+        data: [],
+      }
+    );
   } catch (e) {
     return {
       status: false,

app/src/dialogs/MaskDialog.tsx

@@ -30,6 +30,7 @@ import {
   MousePointerSquareDashed,
   Pencil,
   Plus,
+  RotateCw,
   Search,
   Trash,
 } from "lucide-react";
@@ -557,6 +558,7 @@ function searchMasks(search: string, masks: Mask[]): Mask[] {
 
 function MaskSelector() {
   const { t } = useTranslation();
+  const global = useDispatch();
   const [search, setSearch] = useState("");
 
   const custom_masks = useSelector(selectCustomMasks);
@@ -570,6 +572,8 @@ function MaskSelector() {
   const [open, setOpen] = useState(false);
   const [selected, dispatch] = useReducer(reducer, { ...initialCustomMask });
 
+  const [loading, setLoading] = useState(false);
+
   const event = (e: any) => {
     dispatch(e);
     setOpen(true);
@@ -583,25 +587,42 @@ function MaskSelector() {
         open={open}
         onOpenChange={setOpen}
       />
-      <div className={`mask-header`}>
+      <div
-        <Button variant={`outline`} size={`icon`} className={`shrink-0`}>
+        className={`mask-header-actions flex flex-row translate-y-[-0.5rem] mb-1`}
-          <Search className={`h-4 w-4`} />
+      >
-        </Button>
-        <Input
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder={t("mask.search")}
-          className={`mx-2`}
-        />
         <Button
-          size={`icon`}
           className={`shrink-0`}
           onClick={() => {
             dispatch({ type: "reset" });
             setOpen(true);
           }}
         >
-          <Plus className={`h-4 w-4`} />
+          <Plus className={`h-4 w-4 mr-1`} />
+          {t("mask.create")}
+        </Button>
+        <div className={`grow`} />
+        <Button
+          variant={`outline`}
+          size={`icon`}
+          className={`shrink-0`}
+          onClick={async () => {
+            setLoading(true);
+            await updateMasks(global);
+            setLoading(false);
+          }}
+        >
+          <RotateCw className={cn(`h-4 w-4`, loading && "animate-spin")} />
+        </Button>
+      </div>
+      <div className={`mask-header`}>
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={t("mask.search")}
+          className={`mr-2`}
+        />
+        <Button variant={`outline`} size={`icon`} className={`shrink-0`}>
+          <Search className={`h-4 w-4`} />
         </Button>
       </div>
 

app/src/resources/i18n/cn.json

@@ -397,7 +397,7 @@
     "dashboard": "仪表盘",
     "users": "后台管理",
     "user": "用户管理",
-    "broadcast": "公告通知",
+    "broadcast": "通知管理",
     "channel": "渠道设置",
     "settings": "系统设置",
     "prize": "价格设定",