✨ 优化授权管理

Author: CodFrm

.github/workflows/build.yaml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - release/*
       - dev
 
 jobs:

.github/workflows/test.yaml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - release/*
       - dev
       - develop/*
   pull_request:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "scriptcat",
-  "version": "0.16.0",
+  "version": "0.15.1",
   "description": "脚本猫,一个可以执行用户脚本的浏览器扩展,万物皆可脚本化,让你的浏览器可以做更多的事情!",
   "author": "CodFrm",
   "license": "GPLv3",
@@ -16,7 +16,7 @@
     "changlog": "gitmoji-changelog"
   },
   "dependencies": {
-    "@arco-design/web-react": "^2.47.0",
+    "@arco-design/web-react": "^2.51.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",

package.json

@@ -35,4 +35,8 @@ export default class Cache {
   public del(key: string): void {
     this.map.delete(key);
   }
+
+  public list(): string[] {
+    return Array.from(this.map.keys());
+  }
 }

src/app/cache.ts

@@ -45,4 +45,19 @@ export default class PermissionController {
       confirm,
     });
   }
+
+  // 添加权限
+  addPermission(scriptId: number, permission: Permission) {
+    return this.msg.syncSend("addPermission", {
+      scriptId,
+      permission,
+    });
+  }
+
+  // 重置权限
+  resetPermission(scriptId: number) {
+    return this.msg.syncSend("resetPermission", {
+      scriptId,
+    });
+  }
 }

src/app/service/permission/controller.ts

@@ -198,6 +198,7 @@ script_setting: Script Setting
 basic_info: Basic Information
 update_url: Update URL
 permission_management: Permission Management
+add_permission: Add Permission
 # Script Setting Match ScriptSetting/Match
 match: Match
 user_setting: User Setting

src/locales/en-US/translation.yaml

@@ -199,6 +199,9 @@ script_setting: 脚本设置
 basic_info: 基本信息
 update_url: 更新URL
 permission_management: 授权管理
+add_permission: 添加授权
+permission_cors: 跨域(cors)
+permission_cookie: 管理cookie
 # 脚本设置Match ScriptSetting/Match
 match: 匹配
 user_setting: 用户设定

src/locales/zh-CN/translation.yaml

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "ScriptCat",
-  "version": "0.16.0",
+  "version": "0.15.1",
   "author": "CodFrm",
   "description": "脚本猫,一个用户脚本管理器,支持后台脚本、定时脚本、页面脚本,可编写脚本每天帮你自动处理事务.",
   "options_ui": {

src/manifest.json

@@ -289,7 +289,7 @@ const Match: React.FC<{
           </Popconfirm>
         </Space>
       </div>
-      <Table columns={columns} data={match} rowKey="id" />
+      <Table columns={columns} data={match} rowKey="id" pagination={false} />
       <Divider />
       <div className="flex flex-row justify-between pb-2">
         <Typography.Title heading={6}>{t("website_exclude")}</Typography.Title>
@@ -318,7 +318,7 @@ const Match: React.FC<{
           </Popconfirm>
         </Space>
       </div>
-      <Table columns={columns} data={exclude} rowKey="id" />
+      <Table columns={columns} data={exclude} rowKey="id" pagination={false} />
       <Divider />
     </>
   );

src/pages/components/ScriptSetting/Match.tsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from "react";
+import { Permission } from "@App/app/repo/permission";
+import { Script } from "@App/app/repo/scripts";
+import { useTranslation } from "react-i18next";
+import IoC from "@App/app/ioc";
+import PermissionController from "@App/app/service/permission/controller";
+import {
+  Space,
+  Popconfirm,
+  Message,
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  Select,
+  Typography,
+} from "@arco-design/web-react";
+import Table, { ColumnProps } from "@arco-design/web-react/es/Table";
+import { IconDelete } from "@arco-design/web-react/icon";
+
+const PermissionManager: React.FC<{
+  script: Script;
+}> = ({ script }) => {
+  const permissionCtrl = IoC.instance(
+    PermissionController
+  ) as PermissionController;
+  const [permission, setPermission] = useState<Permission[]>([]);
+  const [permissionVisible, setPermissionVisible] = useState<boolean>(false);
+  const [permissionValue, setPermissionValue] = useState<Permission>();
+
+  const { t } = useTranslation();
+
+  const columns: ColumnProps[] = [
+    {
+      title: t("type"),
+      dataIndex: "permission",
+      key: "permission",
+      width: 100,
+    },
+    {
+      title: t("permission_value"),
+      dataIndex: "permissionValue",
+      key: "permissionValue",
+    },
+    {
+      title: t("allow"),
+      dataIndex: "allow",
+      key: "allow",
+      render(col) {
+        if (col) {
+          return <span style={{ color: "#52c41a" }}>{t("yes")}</span>;
+        }
+        return <span style={{ color: "#f5222d" }}>{t("no")}</span>;
+      },
+    },
+    {
+      title: t("action"),
+      render(_, item: Permission) {
+        return (
+          <Space>
+            <Popconfirm
+              title={t("confirm_delete_permission")}
+              onOk={() => {
+                permissionCtrl
+                  .deletePermission(script!.id, {
+                    permission: item.permission,
+                    permissionValue: item.permissionValue,
+                  })
+                  .then(() => {
+                    Message.success(t("delete_success")!);
+                    setPermission(permission.filter((i) => i.id !== item.id));
+                  })
+                  .catch(() => {
+                    Message.error(t("delete_failed")!);
+                  });
+              }}
+            >
+              <Button type="text" iconOnly icon={<IconDelete />} />
+            </Popconfirm>
+          </Space>
+        );
+      },
+    },
+  ];
+
+  useEffect(() => {
+    if (script) {
+      permissionCtrl.getPermissions(script.id).then((list) => {
+        setPermission(list);
+      });
+    }
+  }, [script]);
+
+  return (
+    <>
+      <Modal
+        title={t("add_permission")}
+        visible={permissionVisible}
+        onCancel={() => setPermissionVisible(false)}
+        onOk={() => {
+          if (permissionValue) {
+            permission.push({
+              id: 0,
+              scriptId: script.id,
+              permission: permissionValue.permission,
+              permissionValue: permissionValue.permissionValue,
+              allow: permissionValue.allow,
+              createtime: new Date().getTime(),
+              updatetime: 0,
+            });
+            permissionCtrl
+              .addPermission(script.id, permissionValue)
+              .then(() => {
+                setPermission([...permission]);
+                setPermissionVisible(false);
+              });
+          }
+        }}
+      >
+        <Space className="w-full" direction="vertical">
+          <Select
+            value={permissionValue?.permission}
+            onChange={(e) => {
+              permissionValue &&
+                setPermissionValue({ ...permissionValue, permission: e });
+            }}
+          >
+            <Select.Option value="cors">{t("permission_cors")}</Select.Option>
+            <Select.Option value="cookie">
+              {t("permission_cookie")}
+            </Select.Option>
+          </Select>
+          <Input
+            value={permissionValue?.permissionValue}
+            onChange={(e) => {
+              permissionValue &&
+                setPermissionValue({ ...permissionValue, permissionValue: e });
+            }}
+          />
+          <Checkbox
+            checked={permissionValue?.allow}
+            onChange={(e) => {
+              permissionValue &&
+                setPermissionValue({ ...permissionValue, allow: e });
+            }}
+          >
+            {t("allow")}
+          </Checkbox>
+        </Space>
+      </Modal>
+      <div className="flex flex-row justify-between pb-2">
+        <Typography.Title heading={6}>
+          {t("permission_management")}
+        </Typography.Title>
+        <Space>
+          <Button
+            type="primary"
+            size="small"
+            onClick={() => {
+              setPermissionValue({
+                id: 0,
+                scriptId: script.id,
+                permission: "cors",
+                permissionValue: "",
+                allow: true,
+                createtime: 0,
+                updatetime: 0,
+              });
+              setPermissionVisible(true);
+            }}
+          >
+            {t("add_permission")}
+          </Button>
+          <Popconfirm
+            title={t("confirm_reset")}
+            onOk={() => {
+              permissionCtrl.resetPermission(script.id).then(() => {
+                setPermission([]);
+              });
+            }}
+          >
+            <Button type="primary" size="small" status="warning">
+              {t("reset")}
+            </Button>
+          </Popconfirm>
+        </Space>
+      </div>
+      <Table
+        columns={columns}
+        data={permission}
+        rowKey="id"
+        pagination={false}
+      />
+    </>
+  );
+};
+
+export default PermissionManager;