├── .dockerignore
├── .env.development
├── .env.production
├── .eslintrc
├── .gitea
    └── workflows
    │   └── deploy.yaml
├── .gitignore
├── .prettierrc
├── LICENSE
├── Makefile
├── README.md
├── app
    ├── components
    │   ├── ActionMenu
    │   │   └── index.tsx
    │   ├── CodeEditor
    │   │   └── index.tsx
    │   ├── DebounceSelect
    │   │   └── index.tsx
    │   ├── GoogleAd
    │   │   ├── index.tsx
    │   │   └── script.tsx
    │   ├── GrayControl
    │   │   └── index.tsx
    │   ├── IssueEditor
    │   │   └── index.tsx
    │   ├── IssueLabel
    │   │   └── index.tsx
    │   ├── MarkdownEditor
    │   │   ├── index.client.tsx
    │   │   └── index.tsx
    │   ├── MarkdownView
    │   │   └── index.tsx
    │   ├── NavigationProcess
    │   │   └── NavigationProcess.tsx
    │   ├── Search
    │   │   ├── SearchList
    │   │   │   ├── index.tsx
    │   │   │   └── item.tsx
    │   │   └── index.tsx
    │   ├── TextArea
    │   │   └── index.tsx
    │   ├── UpdateScript
    │   │   └── index.tsx
    │   └── layout
    │   │   └── MainLayout
    │   │       └── index.tsx
    ├── context-manager.ts
    ├── entry.client.tsx
    ├── entry.server.tsx
    ├── i18n.ts
    ├── i18next.server.ts
    ├── root.tsx
    ├── routes
    │   ├── $lng
    │   │   ├── index.tsx
    │   │   ├── invite-confirm
    │   │   │   └── index.tsx
    │   │   ├── post-script.tsx
    │   │   ├── script-show-page
    │   │   │   ├── $id.tsx
    │   │   │   └── $id
    │   │   │   │   ├── code.tsx
    │   │   │   │   ├── comment.tsx
    │   │   │   │   ├── diff.tsx
    │   │   │   │   ├── index.tsx
    │   │   │   │   ├── issue.tsx
    │   │   │   │   ├── issue
    │   │   │   │       ├── $issueId
    │   │   │   │       │   └── comment.tsx
    │   │   │   │       ├── create.tsx
    │   │   │   │       └── index.tsx
    │   │   │   │   ├── manage.tsx
    │   │   │   │   ├── permission.tsx
    │   │   │   │   ├── permission
    │   │   │   │       ├── accessRole.tsx
    │   │   │   │       ├── inviteModal.tsx
    │   │   │   │       ├── userGroup.tsx
    │   │   │   │       └── userModal.tsx
    │   │   │   │   ├── statistic.tsx
    │   │   │   │   ├── statistic
    │   │   │   │       ├── advanced.tsx
    │   │   │   │       └── index.tsx
    │   │   │   │   ├── update.tsx
    │   │   │   │   └── version.tsx
    │   │   ├── search.tsx
    │   │   ├── search
    │   │   │   └── index.tsx
    │   │   ├── sitemap.tsx
    │   │   ├── users.notify.tsx
    │   │   ├── users.tsx
    │   │   ├── users.webhook.tsx
    │   │   └── users
    │   │   │   └── $id.tsx
    │   ├── api.tsx
    │   └── index.tsx
    ├── services
    │   ├── http.ts
    │   ├── scripts
    │   │   ├── api.ts
    │   │   ├── issues
    │   │   │   ├── api.ts
    │   │   │   └── types.ts
    │   │   └── types.ts
    │   ├── users
    │   │   ├── api.ts
    │   │   └── types.ts
    │   ├── utils.ts
    │   └── utils
    │   │   ├── api.ts
    │   │   └── type.ts
    ├── styles
    │   ├── app.css
    │   ├── github-markdown-css.css
    │   └── invite-confirm.css
    └── utils
    │   ├── cookie.ts
    │   ├── errors.ts
    │   ├── i18n.ts
    │   ├── icon.tsx
    │   └── utils.ts
├── crowdin.yml
├── deploy
    ├── docker
    │   └── Dockerfile
    ├── gateway
    │   ├── Chart.yaml
    │   ├── README.md
    │   ├── _helpers.tpl
    │   ├── templates
    │   │   └── gateway.yaml
    │   └── values.yaml
    └── helm
    │   ├── .helmignore
    │   ├── Chart.yaml
    │   ├── templates
    │       ├── NOTES.txt
    │       ├── _helpers.tpl
    │       ├── deployment.yaml
    │       ├── hpa.yaml
    │       ├── ingress.yaml
    │       ├── service.yaml
    │       ├── serviceaccount.yaml
    │       └── tests
    │       │   └── test-connection.yaml
    │   └── values.yaml
├── package-lock.json
├── package.json
├── public
    ├── ads.txt
    ├── assets
    │   └── logo.png
    ├── baidu_verify_codeva-aj6KRqtFfK.html
    ├── favicon.ico
    ├── locales
    │   ├── ach-UG
    │   │   └── common.json
    │   ├── en
    │   │   └── common.json
    │   ├── zh-CN
    │   │   └── common.json
    │   └── zh-TW
    │   │   └── common.json
    └── robots.txt
├── remix.config.cjs
├── remix.env.d.ts
├── scripts
    └── prebuild.tsx
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
└── types
    └── monaco.d.ts


/.dockerignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # /.cache
 3 | # /build
 4 | # /public/build
 5 | 
 6 | # app/styles/*.css
 7 | 
 8 | /.idea
 9 | /.vscode
10 | 


--------------------------------------------------------------------------------
/.env.development:
--------------------------------------------------------------------------------
1 | APP_API_URL = 'https://test.scriptcat.org/api/v2'
2 | APP_API_PROXY = 'https://test.scriptcat.org/api/v2'
3 | APP_BBS_OAUTH_CLIENT = 'dC37Fgznr5aAFZU'
4 | 
5 | APP_ENV=development


--------------------------------------------------------------------------------
/.env.production:
--------------------------------------------------------------------------------
1 | APP_API_URL = 'https://scriptcat.org/api/v2'
2 | APP_API_PROXY = 'https://scriptcat.org/api/v2'
3 | APP_BBS_OAUTH_CLIENT = '80mfto0y3b8v'


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "@remix-run/eslint-config",
 4 |     "@remix-run/eslint-config/node"
 5 |   ],
 6 |   "rules": {
 7 |     "react/jsx-no-target-blank": [
 8 |       false
 9 |     ]
10 |   }
11 | }


--------------------------------------------------------------------------------
/.gitea/workflows/deploy.yaml:
--------------------------------------------------------------------------------
  1 | name: Release
  2 | 
  3 | on:
  4 |   push:
  5 |     branches:
  6 |       - main
  7 |       - release/*
  8 |       - test/*
  9 | 
 10 | env:
 11 |   APP_NAME: ${{ github.event.repository.name }}
 12 |   NAMESPACE: app
 13 |   REGISTRY: ${{ secrets.DOCKER_REGISTRY && secrets.DOCKER_REGISTRY || 'docker.io' }}
 14 |   REGISTRY_MIRROR: ${{ secrets.DOCKER_REGISTRY_MIRROR && secrets.DOCKER_REGISTRY_MIRROR || 'docker.io' }}
 15 |   REPOSITORY: ${{ github.repository }}
 16 |   DOMAIN: scriptcat.org
 17 |   ENV: ${{ startsWith(github.ref, 'refs/heads/release/') && 'pre' || startsWith(github.ref, 'refs/heads/test/') && 'test' || github.ref=='refs/heads/main' && 'prod' }}
 18 |   RUNNER_TOOL_CACHE: /toolcache
 19 |   BASEIMAGE: ${{ secrets.BASEIMAGE && secrets.BASEIMAGE || '' }}
 20 | 
 21 | 
 22 | jobs:
 23 |   deploy:
 24 |     runs-on: ubuntu-latest
 25 |     steps:
 26 |     - uses: actions/checkout@v3
 27 | 
 28 |     - name: debug
 29 |       run: |
 30 |         echo $ACTIONS_CACHE_URL
 31 | 
 32 |     - name: Use Node.js
 33 |       uses: actions/setup-node@v4
 34 |       with:
 35 |         node-version: "20.x"
 36 |         cache: 'npm'
 37 | 
 38 |     - name: Build
 39 |       run: |
 40 |         npm ci
 41 |         npm run build
 42 | 
 43 |     - name: Set up QEMU
 44 | #      uses: docker/setup-qemu-action@v3
 45 |       uses: actions/setup-qemu-action@v3
 46 | 
 47 |     - name: Set up Docker Buildx
 48 | #      uses: docker/setup-buildx-action@v3
 49 |       uses: actions/setup-buildx-action@v3
 50 |       with:
 51 |         driver-opts: |
 52 |           image=${{ env.REGISTRY_MIRROR }}/moby/buildkit:buildx-stable-1
 53 | 
 54 |     - name: Login to Docker Hub
 55 | #      uses: docker/login-action@v3
 56 |       uses: actions/login-action@v3
 57 |       with:
 58 |         registry: ${{ env.REGISTRY }}
 59 |         username: ${{ secrets.DOCKER_USERNAME }}
 60 |         password: ${{ secrets.DOCKER_TOKEN }}
 61 | 
 62 |     - name: Set outputs
 63 |       id: vars
 64 |       run: |
 65 |         echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
 66 | 
 67 |     - name: Docker build and push
 68 | #      use: docker/build-push-action@v5
 69 |       uses: actions/build-push-action@v6
 70 |       with:
 71 |         push: true
 72 |         file: deploy/docker/Dockerfile
 73 |         tags: ${{ env.REGISTRY }}/${{ env.REPOSITORY }}:${{ env.ENV }}.${{ steps.vars.outputs.sha_short }}
 74 |         context: .
 75 |         build-args: |
 76 |           BASEIMAGE=${{ env.BASEIMAGE }}/node:20-alpine3.16
 77 | 
 78 |     - name: Set up kubeconfig
 79 | #      uses: azure/k8s-set-context@v3
 80 |       uses: actions/k8s-set-context@v4
 81 |       with:
 82 |         method: kubeconfig
 83 |         kubeconfig: ${{ secrets.KUBE_CONFIG }}
 84 |         context: k8s-context
 85 | 
 86 |     - name: Set up Helm
 87 | #      uses: azure/setup-helm@v3
 88 |       uses: actions/setup-helm@v4
 89 |       with:
 90 |          version: 'v3.13.1' # default is latest (stable)
 91 | 
 92 |     - name: Deploy ${{ env.ENV }}
 93 |       env:
 94 |         APP_NAME: ${{ env.ENV=='prod' && env.APP_NAME || format('{0}-{1}', env.APP_NAME, env.ENV) }}
 95 |         DOMAIN: ${{ env.ENV=='prod' && env.DOMAIN || format('{0}.{1}', env.ENV, env.DOMAIN) }}
 96 |         RESOURCE_CPU: ${{ env.ENV=='prod' && '500m' || '100m' }}
 97 |         RESOURCE_MEMORY: ${{ env.ENV=='prod' && '512Mi' || '128Mi' }}
 98 |         INNER_DOMAIN: ${{ env.ENV=='prod' && 'scriptlist-cago' || format('scriptlist-{0}-cago', env.ENV) }}
 99 |         APP_BBS_OAUTH_CLIENT: ${{ env.ENV=='prod' && '80mfto0y3b8v' || env.ENV=='pre' && '5uk70yummcoe' || 'sxIv1i8H1ZwnSAH' }}
100 |         AUTO_SCALING: ${{ env.ENV=='prod' && 'true' || 'false' }}
101 |         AUTO_SCALING_MIN_REPLICAS: ${{ env.ENV=='prod' && '2' || '1' }}
102 |       run: |
103 |         cd deploy/helm
104 |         helm upgrade --install \
105 |         --namespace $NAMESPACE $APP_NAME . -f values.yaml \
106 |         --set image.tag=${{ env.ENV }}.${{ steps.vars.outputs.sha_short }} --set image.repository=$REGISTRY/$REPOSITORY \
107 |         --set env[0].value=https://$DOMAIN/api/v2 \
108 |         --set env[1].value=http://$INNER_DOMAIN.app.svc.cluster.local/api/v2 \
109 |         --set env[2].value=$APP_BBS_OAUTH_CLIENT \
110 |         --set ingress.hosts[0].host=$DOMAIN \
111 |         --set ingress.tls[0].hosts[0]=$DOMAIN \
112 |         --set resources.requests.cpu=$RESOURCE_CPU \
113 |         --set resources.requests.memory=$RESOURCE_MEMORY \
114 |         --set autoscaling.enabled=$AUTO_SCALING \
115 |         --set autoscaling.minReplicas=$AUTO_SCALING_MIN_REPLICAS
116 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | /.cache
 4 | /build
 5 | /public/build
 6 | /public/styles/*
 7 | /public/assets/monaco-editor/*
 8 | .env
 9 | 
10 | /.idea
11 | /.vscode
12 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true
3 | }
4 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | 
2 | prod:
3 | 	npm run build
4 | 	APP_API_URL=https://scriptcat.org/api/v2 APP_API_PROXY=https://scriptcat.org/api/v2 APP_BBS_OAUTH_CLIENT=80mfto0y3b8v npm run start
5 | 
6 | 
7 | docker:
8 | 	docker build -t scriptcat-list-frontend -f deploy/docker/Dockerfile .
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Scriptlist
 2 | > 脚本猫,脚本站
 3 | 
 4 | ## 运行
 5 | 
 6 | ```bash
 7 | npm i
 8 | # 复制环境变量, 如果你不开发后端的话, 直接复制 .env.production 即可
 9 | cp .env.production .env
10 | # dev
11 | npm run dev
12 | # build
13 | npm run build
14 | ```
15 | 


--------------------------------------------------------------------------------
/app/components/ActionMenu/index.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   DeleteOutlined,
  3 |   ExclamationCircleOutlined,
  4 |   FileExclamationOutlined,
  5 | } from '@ant-design/icons';
  6 | import { Dropdown, Menu, Modal, Select, Space } from 'antd';
  7 | import { useContext } from 'react';
  8 | import { useTranslation } from 'react-i18next';
  9 | import { UserContext } from '~/context-manager';
 10 | import TextArea from '../TextArea';
 11 | 
 12 | const { Option } = Select;
 13 | export type MenuItemKey = 'delete';
 14 | 
 15 | export type DeleteLevel = 'admin' | 'super_moderator' | 'moderator';
 16 | export type ActionMenuProps = {
 17 |   children: React.ReactNode;
 18 |   uid: number | number[];
 19 |   deleteLevel: DeleteLevel; // 删除等级 管理员 超级版主 版主
 20 |   allowSelfDelete: boolean; // 允许自己删除
 21 |   onDeleteClick: () => void;
 22 |   // 处罚
 23 |   punish?: boolean;
 24 |   onPunishClick?: () => void;
 25 | };
 26 | 
 27 | const ActionMenu: React.FC<ActionMenuProps> = ({
 28 |   children,
 29 |   deleteLevel,
 30 |   allowSelfDelete,
 31 |   uid,
 32 |   onDeleteClick,
 33 |   punish,
 34 |   onPunishClick,
 35 | }) => {
 36 |   const user = useContext(UserContext);
 37 |   const authorMap = new Map<number, boolean>();
 38 |   const { t } = useTranslation();
 39 | 
 40 |   const [modal, contextHolder] = Modal.useModal();
 41 |   if (uid instanceof Array) {
 42 |     uid.forEach((v) => authorMap.set(v, true));
 43 |   } else {
 44 |     authorMap.set(uid, true);
 45 |   }
 46 |   let items = [];
 47 |   if (user.user) {
 48 |     // 判断用户等级是否为管理员 或者 允许作者删除
 49 |     if (
 50 |       (user.user.is_admin > 0 &&
 51 |         (user.user.is_admin === 1 ||
 52 |           (deleteLevel === 'super_moderator' && user.user.is_admin <= 2) ||
 53 |           (deleteLevel === 'moderator' && user.user.is_admin <= 3))) ||
 54 |       (allowSelfDelete && authorMap.has(user.user.user_id))
 55 |     ) {
 56 |       items.push({
 57 |         label: (
 58 |           <Space className="anticon-middle">
 59 |             <DeleteOutlined />
 60 |             <span>{t('delete')}</span>
 61 |           </Space>
 62 |         ),
 63 |         key: 'delete',
 64 |       });
 65 |       if (punish) {
 66 |         items.push({
 67 |           label: (
 68 |             <Space className="anticon-middle">
 69 |               <ExclamationCircleOutlined />
 70 |               <span>{t('punish')}</span>
 71 |             </Space>
 72 |           ),
 73 |           key: 'punish',
 74 |         });
 75 |       }
 76 |     }
 77 |   }
 78 |   items.push({
 79 |     label: (
 80 |       <Space className="anticon-middle">
 81 |         <FileExclamationOutlined />
 82 |         <span>{t('report')}</span>
 83 |       </Space>
 84 |     ),
 85 |     key: 'report',
 86 |   });
 87 |   return (
 88 |     <div>
 89 |       {contextHolder}
 90 |       <Dropdown
 91 |         menu={{
 92 |           items: items,
 93 |           onClick: (value) => {
 94 |             if (value.key === 'report') {
 95 |               window.open(
 96 |                 'https://bbs.tampermonkey.net.cn/forum-75-1.html',
 97 |                 '_blank'
 98 |               );
 99 |             } else if (value.key === 'punish') {
100 |               modal.confirm({
101 |                 title: t('confirm_punish'),
102 |                 content: (
103 |                   <Space
104 |                     direction="vertical"
105 |                     style={{
106 |                       width: '100%',
107 |                     }}
108 |                   >
109 |                     <span>{t('select_punish_option')}</span>
110 |                     <Select defaultValue="lucy" style={{ width: '100%' }}>
111 |                       <Option value="jack">Jack</Option>
112 |                       <Option value="lucy">Lucy</Option>
113 |                       <Option value="disabled" disabled>
114 |                         Disabled
115 |                       </Option>
116 |                       <Option value="Yiminghe">yiminghe</Option>
117 |                     </Select>
118 |                     <span>{t('punish_reason')}</span>
119 |                     <TextArea
120 |                       rows={2}
121 |                       style={{ width: '100%', border: '1px solid #444' }}
122 |                     />
123 |                   </Space>
124 |                 ),
125 |                 icon: <ExclamationCircleOutlined />,
126 |                 okText: t('confirm'),
127 |                 cancelText: t('cancel'),
128 |                 onOk: () => {
129 |                   onDeleteClick();
130 |                 },
131 |               });
132 |             } else {
133 |               modal.confirm({
134 |                 title: t('confirm_delete'),
135 |                 content: t('delete_warning'),
136 |                 icon: <ExclamationCircleOutlined />,
137 |                 okText: t('confirm'),
138 |                 cancelText: t('cancel'),
139 |                 onOk: () => {
140 |                   onDeleteClick();
141 |                 },
142 |               });
143 |             }
144 |           }
145 |         }}
146 |       >
147 |         {children}
148 |       </Dropdown>
149 |     </div>
150 |   );
151 | };
152 | 
153 | export default ActionMenu;
154 | 


--------------------------------------------------------------------------------
/app/components/CodeEditor/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useImperativeHandle, useState } from 'react';
  2 | import { useEffect } from 'react';
  3 | 
  4 | let script: HTMLScriptElement;
  5 | let codeScript: HTMLScriptElement;
  6 | if (typeof document !== 'undefined') {
  7 |   const initCode = document.createElement('script');
  8 |   initCode.innerHTML = `
  9 |     window.callbacks=[];
 10 |     window.onInitCodeEditor=(callbacks)=>{
 11 |       window.callbacks.push(callbacks);
 12 |     }
 13 |   `;
 14 |   document.head.append(initCode);
 15 |   script = document.createElement('script');
 16 |   script.src = '/assets/monaco-editor/min/vs/loader.js';
 17 |   script.onload = () => {
 18 |     codeScript = document.createElement('script');
 19 |     codeScript.innerHTML = `const dark = document.querySelector("body.dark") ? true : false;
 20 |   require.config({ paths: { vs: "/assets/monaco-editor/min/vs" } });
 21 |   window.initCodeEditor = function (id, code, readOnly, diff, diffCode) {
 22 |     return new Promise((resolve, reject) => {
 23 |       require(["vs/editor/editor.main"], function () {
 24 |         let el = document.getElementById("container-" + id);
 25 |         if (!el) {
 26 |           return;
 27 |         }
 28 |         el.innerHTML = "";
 29 |         el.style.display = "block";
 30 |         if(!diff){
 31 |         let editor = monaco.editor.create(el, {
 32 |           value: code,
 33 |           language: "javascript",
 34 |           readOnly: readOnly,
 35 |           theme: dark ? "vs-dark" : "vs",
 36 |           automaticLayout: true,
 37 |         });
 38 |         resolve(editor);
 39 |       }else{
 40 |         let diffEditor = monaco.editor.createDiffEditor(el,{
 41 |           readOnly: true,
 42 |           theme: dark ? "vs-dark" : "vs",
 43 |         });
 44 |         let originalModel = monaco.editor.createModel(code, "javascript");
 45 |         let modifiedModel = monaco.editor.createModel(diffCode, "javascript");
 46 |         diffEditor.setModel({
 47 |           original: originalModel,
 48 |           modified: modifiedModel
 49 |         });
 50 |         resolve(diffEditor);
 51 |       }
 52 |       });
 53 |     });
 54 |   };
 55 |   window.callbacks.forEach((callback) => {
 56 |     callback();
 57 |   });
 58 |   window.callbacks = [];
 59 |   `;
 60 |     document.head.append(codeScript);
 61 |   };
 62 | 
 63 |   document.head.append(script);
 64 | }
 65 | 
 66 | type Props = {
 67 |   id: string;
 68 |   code?: string;
 69 |   diffCode?: string;
 70 |   readOnly?: boolean;
 71 |   diff?: boolean;
 72 | };
 73 | 
 74 | // 因为服务端渲染的原因,remix不能配置,这里直接加载相关js文件进行导入.需要将monaco-editor的js文件存放在./public/assets/monaco-editor下
 75 | const CodeEditor: React.ForwardRefRenderFunction<
 76 |   { editor: monaco.editor.IEditor },
 77 |   Props
 78 | > = ({ id, code, diffCode, readOnly, diff }, ref) => {
 79 |   const [_editor, setEditor] = useState<any>(null);
 80 |   useImperativeHandle(ref, () => ({
 81 |     editor: _editor,
 82 |   }));
 83 | 
 84 |   useEffect(() => {
 85 |     let editor: monaco.editor.ICodeEditor | null = null;
 86 |     if (
 87 |       typeof window === 'undefined' ||
 88 |       typeof (
 89 |         window as unknown as {
 90 |           initCodeEditor: any;
 91 |         }
 92 |       ).initCodeEditor === 'undefined'
 93 |     ) {
 94 |       (
 95 |         window as unknown as {
 96 |           onInitCodeEditor: (callback: () => void) => void;
 97 |         }
 98 |       ).onInitCodeEditor(async () => {
 99 |         editor = await (
100 |           window as unknown as {
101 |             initCodeEditor: (
102 |               id: string,
103 |               code: string,
104 |               readOnly?: boolean,
105 |               diff?: boolean,
106 |               diffCode?: string
107 |             ) => Promise<monaco.editor.ICodeEditor>;
108 |           }
109 |         ).initCodeEditor(id, code || '', readOnly || false, diff, diffCode);
110 |         setEditor(editor);
111 |       });
112 |     } else {
113 |       (
114 |         window as unknown as {
115 |           initCodeEditor: (
116 |             id: string,
117 |             code: string,
118 |             readOnly: boolean,
119 |             diff?: boolean,
120 |             diffCode?: string
121 |           ) => Promise<monaco.editor.ICodeEditor>;
122 |         }
123 |       )
124 |         .initCodeEditor(id, code || '', readOnly || false, diff, diffCode)
125 |         .then((ret) => {
126 |           editor = ret;
127 |           setEditor(editor);
128 |         });
129 |     }
130 |     return () => {
131 |       editor && editor.dispose();
132 |     };
133 |   }, []);
134 |   return (
135 |     <>
136 |       <div className="h-full">
137 |         <div
138 |           id={'container-' + id}
139 |           className="overflow-hidden"
140 |           style={{ width: '100%', height: '100%', display: 'none' }}
141 |         >
142 |           {code}
143 |         </div>
144 |       </div>
145 |     </>
146 |   );
147 | };
148 | export default React.forwardRef(CodeEditor);
149 | 


--------------------------------------------------------------------------------
/app/components/DebounceSelect/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useMemo, useRef, useState } from 'react';
 2 | import { Select, SelectProps, Spin } from 'antd';
 3 | import { debounce } from 'lodash-es';
 4 | export interface DebounceSelectProps<ValueType = any>
 5 |   extends Omit<SelectProps<ValueType | ValueType[]>, 'options' | 'children'> {
 6 |   fetchOptions: (search: string) => Promise<ValueType[]>;
 7 |   debounceTimeout?: number;
 8 |   maxCount?: number;
 9 | }
10 | 
11 | export function DebounceSelect<
12 |   ValueType extends {
13 |     key?: string;
14 |     label: React.ReactNode;
15 |     value: string | number;
16 |   } = any
17 | >({
18 |   fetchOptions,
19 |   debounceTimeout = 800,
20 |   maxCount,
21 |   onChange,
22 |   ...props
23 | }: DebounceSelectProps<ValueType>) {
24 |   const [fetching, setFetching] = useState(false);
25 |   const [options, setOptions] = useState<ValueType[]>([]);
26 |   const fetchRef = useRef(0);
27 | 
28 |   const debounceFetcher = useMemo(() => {
29 |     const loadOptions = (value: string) => {
30 |       fetchRef.current += 1;
31 |       const fetchId = fetchRef.current;
32 |       setOptions([]);
33 |       setFetching(true);
34 | 
35 |       fetchOptions(value).then((newOptions) => {
36 |         if (fetchId !== fetchRef.current) {
37 |           // for fetch callback order
38 |           return;
39 |         }
40 | 
41 |         setOptions(newOptions);
42 |         setFetching(false);
43 |       });
44 |     };
45 |     return debounce(loadOptions, debounceTimeout);
46 |   }, [fetchOptions, debounceTimeout]);
47 |   const hanldeChange = (
48 |     value: ValueType | ValueType[],
49 |     option: ValueType | ValueType[]
50 |   ) => {
51 |     if (maxCount !== undefined && value !== undefined && Array.isArray(value)) {
52 |       if (value.length > maxCount) {
53 |         value = value.slice(value.length - maxCount, value.length);
54 |       }
55 |     }
56 |     onChange && onChange(value, value);
57 |   };
58 | 
59 |   return (
60 |     <Select
61 |       filterOption={false}
62 |       onSearch={debounceFetcher}
63 |       notFoundContent={
64 |         fetching ? (
65 |           <div className="flex justify-center items-center min-h-[50px]">
66 |             <Spin size="small" />
67 |           </div>
68 |         ) : null
69 |       }
70 |       onChange={hanldeChange}
71 |       {...props}
72 |       options={options}
73 |     />
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/app/components/GoogleAd/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | 
 3 | const GoogleAd: React.FC<{
 4 |   width: string;
 5 |   height: string;
 6 | }> = ({ width, height }) => {
 7 |   useEffect(() => {
 8 |     let cnt = 0;
 9 |     let t = setInterval(() => {
10 |       try {
11 |         // @ts-ignore
12 |         (adsbygoogle = window.adsbygoogle || []).push({});
13 |         clearInterval(t);
14 |         // @ts-ignore
15 |         t = null;
16 |       } catch (e) {
17 |         cnt++;
18 |         if (cnt > 10) {
19 |           clearInterval(t);
20 |           // @ts-ignore
21 |           t = null;
22 |         }
23 |       }
24 |     }, 500);
25 |     return () => {
26 |       t && clearInterval(t);
27 |     };
28 |   }, []);
29 |   return (
30 |     <div
31 |       className="ad"
32 |       style={{
33 |         width: '100%',
34 |         maxHeight: height,
35 |         overflow: 'hidden',
36 |         textAlign: 'center',
37 |       }}
38 |     >
39 |       <ins
40 |         className="adsbygoogle"
41 |         style={{ display: 'block' }}
42 |         data-ad-client="ca-pub-8009073269666226"
43 |         data-ad-slot="5802101414"
44 |         data-ad-format="horizontal"
45 |       ></ins>
46 |     </div>
47 |   );
48 | };
49 | 
50 | export default GoogleAd;
51 | 


--------------------------------------------------------------------------------
/app/components/GoogleAd/script.tsx:
--------------------------------------------------------------------------------
 1 | import { useLocation } from '@remix-run/react';
 2 | 
 3 | const GoogleAdScript: React.FC = () => {
 4 |   const location = useLocation();
 5 |   // 如果pathname匹配/script-show-page/367/
 6 |   if (!/\/script-show-page\/\d+[/]?$/.test(location.pathname)) {
 7 |     return <></>;
 8 |   }
 9 |   return (
10 |     <>
11 |       <script
12 |         async
13 |         src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8009073269666226"
14 |         crossOrigin="anonymous"
15 |       ></script>
16 |     </>
17 |   );
18 | };
19 | 
20 | export default GoogleAdScript;
21 | 


--------------------------------------------------------------------------------
/app/components/GrayControl/index.tsx:
--------------------------------------------------------------------------------
  1 | import { CloseOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
  2 | import { Button, Input, Select, Slider, Tooltip } from 'antd';
  3 | import React from 'react';
  4 | import { useTranslation } from 'react-i18next';
  5 | 
  6 | export type GrayControlProps = {
  7 |   index: number;
  8 |   onClose: (index: number) => void;
  9 |   onChange: (index: number, value: GrayControlValue) => void;
 10 |   value: GrayControlValue;
 11 | };
 12 | 
 13 | type Control = {
 14 |   type: GrayControlType;
 15 |   params: {
 16 |     weight?: number;
 17 |     weight_day?: number;
 18 |     cookie_regex?: string;
 19 |   };
 20 | };
 21 | 
 22 | export type GrayControlValue = {
 23 |   target_version: string;
 24 |   controls: Control[];
 25 | };
 26 | 
 27 | type GrayControlType = 'weight' | 'cookie' | 'pre-release';
 28 | 
 29 | const GrayControl: React.FC<GrayControlProps> = ({
 30 |   index,
 31 |   onClose,
 32 |   onChange,
 33 |   value,
 34 | }) => {
 35 |   const { t } = useTranslation();
 36 | 
 37 |   return (
 38 |     <div
 39 |       style={{
 40 |         minWidth: '200px',
 41 |         border: '1px solid',
 42 |         padding: '8px',
 43 |         marginLeft: '8px',
 44 |       }}
 45 |       className="flex flex-col gap-1"
 46 |     >
 47 |       <div className="flex flex-row justify-between">
 48 |         <h4 className="text-base">{t('strategy', { index: index + 1 })}</h4>
 49 |         <Button
 50 |           type="text"
 51 |           icon={<CloseOutlined />}
 52 |           size="small"
 53 |           onClick={() => {
 54 |             onClose(index);
 55 |           }}
 56 |         />
 57 |       </div>
 58 |       <div className="flex flex-row gap-1">
 59 |         {value.controls.map((control, controlsIndex) => (
 60 |           <div
 61 |             key={controlsIndex}
 62 |             className="flex flex-col gap-1"
 63 |             style={{ minWidth: '100px' }}
 64 |           >
 65 |             <Select
 66 |               dropdownMatchSelectWidth
 67 |               value={control.type}
 68 |               onChange={(val) => {
 69 |                 value.controls[controlsIndex].type = val;
 70 |                 onChange(index, {
 71 |                   target_version: value.target_version,
 72 |                   controls: value.controls,
 73 |                 });
 74 |               }}
 75 |             >
 76 |               <Select.Option value="weight">{t('weight')}</Select.Option>
 77 |               <Select.Option value="pre-release">{t('pre_release_user')}</Select.Option>
 78 |             </Select>
 79 |             {control.type == 'weight' && (
 80 |               <>
 81 |                 <Slider
 82 |                   value={control.params.weight}
 83 |                   onChange={(val) => {
 84 |                     value.controls[controlsIndex].params.weight = val;
 85 |                     onChange(index, {
 86 |                       target_version: value.target_version,
 87 |                       controls: value.controls,
 88 |                     });
 89 |                   }}
 90 |                   tooltip={{
 91 |                     formatter: (val?: number) =>
 92 |                       t('pre_release_slider_tooltip', { val: val || 0 }),
 93 |                   }}
 94 |                 />
 95 |                 <Tooltip
 96 |                   title={t('pre_release_tooltip', { weight_day: control.params.weight_day })}
 97 |                 >
 98 |                   <Input
 99 |                     value={control.params.weight_day}
100 |                     onChange={(val) => {
101 |                       value.controls[controlsIndex].params.weight_day =
102 |                         parseInt(val.target.value);
103 |                       onChange(index, {
104 |                         target_version: value.target_version,
105 |                         controls: value.controls,
106 |                       });
107 |                     }}
108 |                     addonAfter={t('days')}
109 |                   />
110 |                 </Tooltip>
111 |               </>
112 |             )}
113 |             {control.type == 'cookie' && (
114 |               <Input placeholder={t('cookie_regex_placeholder')} />
115 |             )}
116 |           </div>
117 |         ))}
118 |         {value.controls.length < 3 && (
119 |           <Button
120 |             type="text"
121 |             icon={<PlusOutlined />}
122 |             size="small"
123 |             onClick={() => {
124 |               onChange(index, {
125 |                 target_version: value.target_version,
126 |                 controls: [...value.controls, { type: 'weight', params: {} }],
127 |               });
128 |             }}
129 |           />
130 |         )}
131 |         {value.controls.length > 1 && (
132 |           <Button
133 |             type="text"
134 |             icon={<MinusOutlined />}
135 |             size="small"
136 |             onClick={() => {
137 |               onChange(index, {
138 |                 target_version: value.target_version,
139 |                 controls: value.controls.slice(0, value.controls.length - 1),
140 |               });
141 |             }}
142 |           />
143 |         )}
144 |       </div>
145 |       <h4 className="text-base">{t('pre_release_target_version')}</h4>
146 |       <Tooltip title={t('pre_release_tooltip_version')}>
147 |         <Select
148 |           mode="tags"
149 |           value={value.target_version}
150 |           dropdownMatchSelectWidth
151 |           onChange={(vals) => {
152 |             if (vals.length == 0) {
153 |               onChange(index, {
154 |                 target_version: 'latest',
155 |                 controls: value.controls,
156 |               });
157 |             } else {
158 |               onChange(index, {
159 |                 target_version: vals[vals.length - 1],
160 |                 controls: value.controls,
161 |               });
162 |             }
163 |           }}
164 |         >
165 |           <Select.Option value="latest">{t('latest_official_version')}</Select.Option>
166 |           <Select.Option value="pre-latest">{t('latest_pre_release_version')}</Select.Option>
167 |           <Select.Option value="all-latest">{t('latest_version')}</Select.Option>
168 |           <Select.Option value="latest^1">{t('previous_official_version')}</Select.Option>
169 |           <Select.Option value="pre-latest^1">{t('previous_pre_release_version')}</Select.Option>
170 |         </Select>
171 |       </Tooltip>
172 |     </div>
173 |   );
174 | };
175 | 
176 | export default GrayControl;
177 | 


--------------------------------------------------------------------------------
/app/components/IssueEditor/index.tsx:
--------------------------------------------------------------------------------
 1 | const IssueEditor: React.FC<{}> = () => {
 2 |   return (
 3 |     <>
 4 |       <div className="flex flex-row">
 5 |         <div className="flex flex-col basis-3/4"></div>
 6 |         <div className="flex flex-col basis-1/3"></div>
 7 |       </div>
 8 |     </>
 9 |   );
10 | };
11 | 
12 | export default IssueEditor;
13 | 


--------------------------------------------------------------------------------
/app/components/IssueLabel/index.tsx:
--------------------------------------------------------------------------------
 1 | import type { TagProps } from 'antd';
 2 | import { Tag } from 'antd';
 3 | import { useTranslation } from 'react-i18next';
 4 | 
 5 | const IssueLabel: React.FC<TagProps & { label: string }> = (props) => {
 6 |   const { t } = useTranslation();
 7 | 
 8 |   const IssueTagMap: { [key: string]: string[] } = {
 9 |     feature: [t('feature'), 'geekblue'],
10 |     question: [t('question'), 'cyan'],
11 |     bug: [t('bug'), 'red'],
12 |   };
13 | 
14 |   return IssueTagMap[props.label] ? (
15 |     <Tag
16 |       {...props}
17 |       className="anticon-middle"
18 |       color={IssueTagMap[props.label][1]}
19 |     >
20 |       {IssueTagMap[props.label][0]}
21 |     </Tag>
22 |   ) : (
23 |     <Tag {...props} className="anticon-middle">
24 |       {props.label || 'null'}
25 |     </Tag>
26 |   );
27 | };
28 | 
29 | export default IssueLabel;
30 | 


--------------------------------------------------------------------------------
/app/components/MarkdownEditor/index.client.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useImperativeHandle } from 'react';
  2 | import Editor from '@toast-ui/editor';
  3 | import { useState } from 'react';
  4 | import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
  5 | import Prism from 'prismjs';
  6 | import { message, Spin } from 'antd';
  7 | import { UploadImage } from '~/services/utils/api';
  8 | import { useContext } from 'react';
  9 | import { UserContext } from '~/context-manager';
 10 | import { useTranslation } from 'react-i18next';
 11 | 
 12 | export type MarkdownEditorRef =
 13 |   | { editor: Editor | undefined; setMarkdown: (markdown: string) => void }
 14 |   | undefined;
 15 | 
 16 | const MarkdownEditor: React.ForwardRefRenderFunction<
 17 |   MarkdownEditorRef,
 18 |   {
 19 |     id: string;
 20 |     comment: string;
 21 |     linkId: number;
 22 |     initialValue?: string;
 23 |     isCreate?: boolean;
 24 |     placeholder?: string;
 25 |   }
 26 | > = ({ id, comment, linkId, initialValue, isCreate, placeholder }, ref) => {
 27 |   const user = useContext(UserContext);
 28 |   const [editor, setEditor] = useState<Editor | undefined>();
 29 |   const [prompt, setPrompt] = useState('');
 30 |   const [imageLoading, setImageLoading] = useState(false);
 31 |   const { t } = useTranslation();
 32 | 
 33 |   useImperativeHandle(
 34 |     ref,
 35 |     () => {
 36 |       return {
 37 |         editor,
 38 |         setMarkdown: (markdown) => {
 39 |           if (editor) {
 40 |             editor.setMarkdown(markdown);
 41 |             localStorage['autosave_' + id] = markdown;
 42 |           }
 43 |         },
 44 |       };
 45 |     },
 46 |     [editor, id]
 47 |   );
 48 | 
 49 |   useEffect(() => {
 50 |     if (!editor) {
 51 |       setEditor((editor) => {
 52 |         if (!editor) {
 53 |           const dark = document.querySelector('body.dark') ? true : false;
 54 |           if (!initialValue && localStorage['autosave_' + id]) {
 55 |             // eslint-disable-next-line react-hooks/exhaustive-deps
 56 |             initialValue = localStorage['autosave_' + id];
 57 |           }
 58 |           return new Editor({
 59 |             el: document.querySelector('#markdown-editor-' + id)!,
 60 |             previewStyle: 'tab',
 61 |             height: '400px',
 62 |             placeholder: placeholder || t('input_feedback_content'),
 63 |             hooks: {
 64 |               addImageBlobHook: async (blob, callback) => {
 65 |                 setImageLoading(true);
 66 |                 const resp = await UploadImage(blob, comment, linkId);
 67 |                 setImageLoading(false);
 68 |                 if (resp.code === 0) {
 69 |                   callback(
 70 |                     user.env?.APP_API_URL + '/resource/image/' + resp.data.id,
 71 |                     (blob as File).name
 72 |                   );
 73 |                 } else {
 74 |                   message.error(t('image_upload_failed'));
 75 |                 }
 76 |                 return false;
 77 |               },
 78 |             },
 79 |             plugins: [[codeSyntaxHighlight, { highlighter: Prism }]],
 80 |             autofocus: false,
 81 |             theme: dark ? 'dark' : 'default',
 82 |             initialValue: initialValue,
 83 |           });
 84 |         }
 85 | 
 86 |         return editor;
 87 |       });
 88 |     }
 89 |     const interval = setInterval(() => {
 90 |       setEditor((editor) => {
 91 |         if (editor && editor.getMarkdown()) {
 92 |           localStorage['autosave_' + id] = editor.getMarkdown();
 93 |           setPrompt(new Date().toLocaleTimeString() + ' ' + t('autosaved'));
 94 |         }
 95 |         return editor;
 96 |       });
 97 |     }, 10000);
 98 |     return () => {
 99 |       editor && editor.destroy();
100 |       clearInterval(interval);
101 |     };
102 |   }, []);
103 |   return (
104 |     <>
105 |       <div className="flex flex-col">
106 |         <div id={'markdown-editor-' + id} className="w-full"></div>
107 |         {prompt && <span className="text-gray-400">{prompt}</span>}
108 |         {imageLoading && (
109 |           <Spin
110 |             tip={t('uploading_image')}
111 |             className="!relative top-[-250px] !h-0"
112 |           ></Spin>
113 |         )}
114 |       </div>
115 |     </>
116 |   );
117 | };
118 | 
119 | export default React.forwardRef(MarkdownEditor);
120 | 


--------------------------------------------------------------------------------
/app/components/MarkdownEditor/index.tsx:
--------------------------------------------------------------------------------
 1 | import tuiEditor from '@toast-ui/editor/dist/toastui-editor.css';
 2 | import tuiEditorDark from '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 3 | import prismCss from 'prismjs/themes/prism.css';
 4 | import { LinksFunction } from '@remix-run/node';
 5 | 
 6 | export const markdownEditorLinks: LinksFunction = () => [
 7 |   { rel: 'stylesheet', href: tuiEditor },
 8 |   { rel: 'stylesheet', href: tuiEditorDark },
 9 |   { rel: 'stylesheet', href: prismCss },
10 | ];
11 | 


--------------------------------------------------------------------------------
/app/components/MarkdownView/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef } from 'react';
 2 | import { marked } from 'marked';
 3 | import { useLocation } from '@remix-run/react';
 4 | import githubCss from '~/styles/github-markdown-css.css';
 5 | import Prism from 'prismjs';
 6 | import prismCss from 'prismjs/themes/prism.min.css';
 7 | import xss, { whiteList } from 'xss';
 8 | import { LinksFunction } from '@remix-run/node';
 9 | // toolbar
10 | import prismToolbarCss from 'prismjs/plugins/toolbar/prism-toolbar.min.css';
11 | import 'prismjs/plugins/toolbar/prism-toolbar.min';
12 | // plugin
13 | import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min';
14 | 
15 | export const markdownViewLinks: LinksFunction = () => [
16 |   { rel: 'stylesheet', href: githubCss },
17 |   { rel: 'stylesheet', href: prismCss },
18 |   { rel: 'stylesheet', href: prismToolbarCss },
19 | ];
20 | 
21 | class MarkdownRenderer extends marked.Renderer {
22 |   link(href: string, title: string, text: string) {
23 |     const baseUrl = this.options.baseUrl || '';
24 |     if (!(href.startsWith('http://') || href.startsWith('https://'))) {
25 |       if (href.startsWith('.')) {
26 |         href = baseUrl + href.substring(1);
27 |       } else if (
28 |         href.startsWith('/') ||
29 |         href.startsWith('#') ||
30 |         href.startsWith('?')
31 |       ) {
32 |         href = baseUrl + href;
33 |       } else {
34 |         href = baseUrl + '/' + href;
35 |       }
36 |     }
37 |     return (
38 |       '<a href="' +
39 |       href +
40 |       '"' +
41 |       (title ? ' title="' + title + '"' : '') +
42 |       '>' +
43 |       text +
44 |       '</a>'
45 |     );
46 |   }
47 | 
48 |   html(html: string): string {
49 |     // 判断是否为html标签，并加上controls="controls"属性
50 |     if (html.startsWith('<video') && !html.includes('controls="controls"')) {
51 |       html = html.replace('<video', '<video controls="controls"');
52 |     }
53 |     return html;
54 |   }
55 | }
56 | 
57 | const MarkdownView: React.FC<{ id: string; content: string }> = ({
58 |   id,
59 |   content,
60 | }) => {
61 |   const location = useLocation();
62 |   const html = marked(content, {
63 |     baseUrl: location.pathname,
64 |     mangle: true,
65 |     gfm: true,
66 |     renderer: new MarkdownRenderer(),
67 |     breaks: true,
68 |   });
69 |   const ref = useRef<HTMLDivElement>(null);
70 |   useEffect(() => {
71 |     ref.current && Prism.highlightAllUnder(ref.current, false);
72 |   }, []);
73 |   const l = whiteList;
74 |   l.input = ['type', 'checked', 'disabled'];
75 |   l.code = ['class'];
76 |   l.h1 = ['id'];
77 |   l.h2 = ['id'];
78 |   l.h3 = ['id'];
79 |   l.h4 = ['id'];
80 |   l.h5 = ['id'];
81 |   l.h6 = ['id'];
82 |   return (
83 |     <div
84 |       className="viewer markdown-body"
85 |       data-prismjs-copy="copy"
86 |       data-prismjs-copy-error="error"
87 |       data-prismjs-copy-success="success"
88 |       dangerouslySetInnerHTML={{
89 |         __html: xss(html, {
90 |           whiteList: l,
91 |         }),
92 |       }}
93 |       ref={ref}
94 |     ></div>
95 |   );
96 | };
97 | 
98 | export default MarkdownView;
99 | 


--------------------------------------------------------------------------------
/app/components/NavigationProcess/NavigationProcess.tsx:
--------------------------------------------------------------------------------
 1 | import { useNavigation } from '@remix-run/react';
 2 | import { Progress } from 'antd';
 3 | import { useEffect, useState } from 'react';
 4 | 
 5 | export default function NavigationProcess() {
 6 |   const navigation = useNavigation();
 7 |   const [percent, setPercent] = useState(0);
 8 |   const [show, setShow] = useState(false);
 9 | 
10 |   useEffect(() => {
11 |     if (navigation.state === 'loading') {
12 |       setShow(true);
13 |       setPercent(30);
14 |     } else {
15 |       setPercent(100);
16 |       setTimeout(() => {
17 |         setShow(false);
18 |       }, 500);
19 |     }
20 |   }, [navigation]);
21 | 
22 |   return (
23 |     show && (
24 |       <Progress
25 |         percent={percent}
26 |         className="w-full"
27 |         style={{
28 |           position: 'fixed',
29 |           top: -12,
30 |           height: '2px',
31 |           zIndex: 100,
32 |           // overflow: 'hidden',
33 |         }}
34 |         size="small"
35 |         showInfo={false}
36 |         strokeColor="#1890ff"
37 |         strokeLinecap="butt"
38 |       />
39 |     )
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/app/components/Search/SearchList/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Link, useLocation } from '@remix-run/react';
  2 | import { ConfigProvider, Empty, List, message } from 'antd';
  3 | import { useEffect, useState, isValidElement, cloneElement } from 'react';
  4 | import type { Script } from '~/services/scripts/types';
  5 | import { replaceSearchParam } from '~/services/utils';
  6 | import SearchItem from './item';
  7 | import { useTranslation } from 'react-i18next';
  8 | import ClipboardJS from 'clipboard';
  9 | import { useLocale } from 'remix-i18next';
 10 | 
 11 | // 搜索结果列表
 12 | const SearchList: React.FC<{
 13 |   list: Script[];
 14 |   page: number;
 15 |   total: number;
 16 | }> = (props) => {
 17 |   const location = useLocation();
 18 |   const [total, setTotal] = useState(props.total);
 19 |   const [list, setList] = useState(props.list);
 20 |   const locale = '/' + useLocale();
 21 |   const { t } = useTranslation();
 22 |   useEffect(() => {
 23 |     setTotal(props.total);
 24 |     setList(props.list);
 25 |   }, [props.list, props.total]);
 26 | 
 27 |   useEffect(() => {
 28 |     const clipboard = new ClipboardJS('.copy-script-link', {
 29 |       text: (target) => {
 30 |         message.success(t('copy_success'));
 31 |         return (
 32 |           target.getAttribute('script-name') +
 33 |           '\n' +
 34 |           window.location.origin +
 35 |           locale +
 36 |           '/script-show-page/' +
 37 |           target.getAttribute('script-id')
 38 |         );
 39 |       },
 40 |     });
 41 |     return () => {
 42 |       clipboard.destroy();
 43 |     };
 44 |   }, []);
 45 | 
 46 |   return (
 47 |     <>
 48 |       <div className="flex flex-col gap-3">
 49 |         <ConfigProvider
 50 |           renderEmpty={() => <Empty description={t('no_search_result')} />}
 51 |         >
 52 |           <List
 53 |             dataSource={list}
 54 |             renderItem={(script, index) => (
 55 |               <div className="mb-3" key={script.id}>
 56 |                 <SearchItem
 57 |                   key={script.id}
 58 |                   script={script}
 59 |                   onDelete={() => {
 60 |                     list.splice(index, 1);
 61 |                     setList([...list]);
 62 |                     setTotal((total) => total - 1);
 63 |                   }}
 64 |                 />
 65 |               </div>
 66 |             )}
 67 |             pagination={{
 68 |               showSizeChanger: false,
 69 |               hideOnSinglePage: true,
 70 |               defaultCurrent: props.page,
 71 |               current: props.page,
 72 |               pageSize: 20,
 73 |               total: total,
 74 |               itemRender: (current, type, originalElement) => {
 75 |                 if (current === 0) return originalElement;
 76 |                 if (type.startsWith('jump') && isValidElement(originalElement) && originalElement.type === "a") {
 77 |                   return cloneElement(originalElement, {
 78 |                     href: location.pathname + replaceSearchParam(location.search, {
 79 |                       page: current,
 80 |                     })
 81 |                   } as React.HTMLProps<HTMLAnchorElement>);;
 82 |                 }
 83 |                 return (
 84 |                   <Link
 85 |                     to={{
 86 |                       search: replaceSearchParam(location.search, {
 87 |                         page: current,
 88 |                       }),
 89 |                     }}
 90 |                   >
 91 |                     {type !== 'page' ? originalElement : current}
 92 |                   </Link>
 93 |                 );
 94 |               },
 95 |             }}
 96 |           ></List>
 97 |         </ConfigProvider>
 98 |       </div>
 99 |     </>
100 |   );
101 | };
102 | 
103 | export default SearchList;
104 | 


--------------------------------------------------------------------------------
/app/components/Search/index.tsx:
--------------------------------------------------------------------------------
 1 | import { SearchOutlined } from '@ant-design/icons';
 2 | import { Link, useNavigate, useSearchParams } from '@remix-run/react';
 3 | import { Input } from 'antd';
 4 | import { useState } from 'react';
 5 | import { useTranslation } from 'react-i18next';
 6 | import { useLocale } from 'remix-i18next';
 7 | 
 8 | const Search: React.FC<{ className?: string }> = ({ className }) => {
 9 |   const locale = '/' + useLocale();
10 |   const navigate = useNavigate();
11 |   const params = useSearchParams();
12 |   const { t } = useTranslation();
13 |   const [keyword, setKeyword] = useState(params[0].get('keyword') || '');
14 |   const [clsName] = useState(
15 |     (className ? className + ' ' : '') +
16 |       'flex flex-row justify-between items-center px-4 ' +
17 |       'bg-white dark:bg-gray-900 rounded-lg border-2 border-gray-200 dark:border-gray-900'
18 |   );
19 | 
20 |   return (
21 |     <div className={clsName}>
22 |       <Input
23 |         placeholder={t('search_scripts_placeholder')}
24 |         size="large"
25 |         variant="borderless"
26 |         defaultValue={keyword}
27 |         onChange={(e) => setKeyword(e.target.value)}
28 |         onPressEnter={(event) => {
29 |           const target = event.target as HTMLInputElement;
30 |           navigate({
31 |             pathname: locale + '/search',
32 |             search: target.value ? `keyword=` + target.value : '',
33 |           });
34 |         }}
35 |       />
36 |       <Link
37 |         to={{
38 |           pathname: locale + '/search',
39 |           search: keyword ? 'keyword=' + keyword : '',
40 |         }}
41 |       >
42 |         <SearchOutlined className="!text-black dark:!text-white text-xl cursor-pointer" />
43 |       </Link>
44 |     </div>
45 |   );
46 | };
47 | 
48 | export default Search;
49 | 


--------------------------------------------------------------------------------
/app/components/TextArea/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef } from 'react';
 2 | import { theme, Input } from 'antd';
 3 | import { TextAreaProps, TextAreaRef } from 'antd/es/input/TextArea';
 4 | 
 5 | const TextArea: React.ForwardRefRenderFunction<TextAreaRef, TextAreaProps> = (
 6 |   props,
 7 |   _ref
 8 | ) => {
 9 |   const { token } = theme.useToken();
10 |   const ref = useRef<TextAreaRef>(null);
11 | 
12 |   useEffect(() => {
13 |     if (ref.current && ref.current.resizableTextArea) {
14 |       ref.current.resizableTextArea.textArea.style.backgroundColor =
15 |         token.colorBgContainer;
16 |       ref.current.resizableTextArea.textArea.style.color = token.colorText;
17 |     }
18 |   }, [ref, token.colorBgContainer]);
19 | 
20 |   let style = Object.assign(
21 |     {
22 |       backgroundColor: token.colorBgContainer,
23 |       borderColor: token.colorBorder,
24 |       color: token.colorText,
25 |     },
26 |     props.style
27 |   );
28 | 
29 |   return <Input.TextArea {...props} style={style} ref={ref} />;
30 | };
31 | 
32 | export default React.forwardRef(TextArea);
33 | 


--------------------------------------------------------------------------------
/app/context-manager.ts:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | import type { Script } from './services/scripts/types';
 3 | import type { User } from './services/users/types';
 4 | 
 5 | export type UserContextData = {
 6 |   user?: User;
 7 |   dark?: boolean;
 8 |   darkMode?: 'light' | 'dark' | 'auto';
 9 |   env?: {
10 |     APP_API_URL: string;
11 |   };
12 | };
13 | 
14 | export const UserContext = createContext<UserContextData>({});
15 | 
16 | export type ScriptContextData = {
17 |   script?: Script;
18 | };
19 | 
20 | export const ScriptContext = createContext<ScriptContextData>({});
21 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
 1 | import { RemixBrowser } from '@remix-run/react';
 2 | import { startTransition, StrictMode } from 'react';
 3 | import { hydrate as ReactHydrate } from 'react-dom';
 4 | import i18n from './i18n';
 5 | import i18next from 'i18next';
 6 | import { I18nextProvider, initReactI18next } from 'react-i18next';
 7 | import LanguageDetector from 'i18next-browser-languagedetector';
 8 | import Backend from 'i18next-http-backend';
 9 | import { getInitialNamespaces } from 'remix-i18next';
10 | 
11 | async function hydrate() {
12 |   await i18next
13 |     .use(initReactI18next) // Tell i18next to use the react-i18next plugin
14 |     .use(LanguageDetector) // Setup a client-side language detector
15 |     .use(Backend) // Setup your backend
16 |     .init({
17 |       ...i18n, // spread the configuration
18 |       // This function detects the namespaces your routes rendered while SSR use
19 |       ns: getInitialNamespaces(),
20 |       backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
21 |       detection: {
22 |         // Here only enable htmlTag detection, we'll detect the language only
23 |         // server-side with remix-i18next, by using the `<html lang>` attribute
24 |         // we can communicate to the client the language detected server-side
25 |         order: ['htmlTag'],
26 |         // Because we only use htmlTag, there's no reason to cache the language
27 |         // on the browser, so we disable it
28 |         caches: [],
29 |       },
30 |     });
31 | 
32 |   startTransition(() => {
33 |     ReactHydrate(
34 |       <I18nextProvider i18n={i18next}>
35 |         <StrictMode>
36 |           <RemixBrowser />
37 |         </StrictMode>
38 |       </I18nextProvider>,
39 |       document
40 |     );
41 |   });
42 | }
43 | 
44 | if (window.requestIdleCallback) {
45 |   window.requestIdleCallback(hydrate);
46 | } else {
47 |   // Safari doesn't support requestIdleCallback
48 |   // https://caniuse.com/requestidlecallback
49 |   window.setTimeout(hydrate, 1);
50 | }
51 | 


--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
  1 | import { PassThrough } from 'stream';
  2 | import type { EntryContext } from '@remix-run/node';
  3 | import { Response } from '@remix-run/node';
  4 | import { RemixServer } from '@remix-run/react';
  5 | import { renderToPipeableStream } from 'react-dom/server';
  6 | import { createInstance } from 'i18next';
  7 | import i18next from './i18next.server';
  8 | import { I18nextProvider, initReactI18next } from 'react-i18next';
  9 | import Backend from 'i18next-fs-backend';
 10 | import i18n from './i18n'; // your i18n configuration file
 11 | import { resolve } from 'node:path';
 12 | import { getLocale } from './utils/i18n';
 13 | import { isbot } from 'isbot';
 14 | 
 15 | const ABORT_DELAY = 10 * 1000;
 16 | 
 17 | export default async function handleRequest(
 18 |   request: Request,
 19 |   responseStatusCode: number,
 20 |   responseHeaders: Headers,
 21 |   remixContext: EntryContext
 22 | ) {
 23 |   const url = new URL(request.url);
 24 |   const splitPath = url.pathname.split('/');
 25 |   if (splitPath.length > 1) {
 26 |     let lng = await i18next.getLocale(request);
 27 |     switch (splitPath[1].toLowerCase()) {
 28 |       case 'api':
 29 |         if (process.env.NODE_ENV === 'development') {
 30 |           // 反向代理
 31 |           let url = request.url.replace(
 32 |             /^.*?\/api\/v2/g,
 33 |             process.env.APP_API_PROXY || 'http://localhost:3000/api/v2'
 34 |           );
 35 |           let proxyUrl = new URL(
 36 |             process.env.APP_API_PROXY || 'http://localhost:3000/api/v2'
 37 |           );
 38 |           let headers = new Headers();
 39 |           request.headers.forEach((value, key) => {
 40 |             if (key == 'host') {
 41 |               headers.set('host', proxyUrl.host);
 42 |             } else {
 43 |               headers.set(key, request.headers.get(key)!);
 44 |             }
 45 |           });
 46 |           return fetch(url, {
 47 |             method: request.method,
 48 |             headers: headers,
 49 |             body: request.body,
 50 |             redirect: request.redirect,
 51 |           });
 52 |         }
 53 |         break;
 54 |       case 'u':
 55 |       case 's':
 56 |         if (splitPath[2].match(/^\d+$/)) {
 57 |           const type =
 58 |             splitPath[1].toLowerCase() == 'u'
 59 |               ? (splitPath[1] = 'users')
 60 |               : (splitPath[1] = 'script-show-page');
 61 |           return new Response(null, {
 62 |             status: 301,
 63 |             headers: {
 64 |               Location: `/${lng}/${type}/${splitPath[2]}`,
 65 |             },
 66 |           });
 67 |         } else
 68 |           throw new Response('Page not found', {
 69 |             status: 404,
 70 |             statusText: 'Not Found',
 71 |           });
 72 |       case 'script-show-page':
 73 |       case 'users':
 74 |       case 'search':
 75 |       case 'invite-confirm':
 76 |       case 'post-script':
 77 |         // 如果是以下面的路径开头的,则获取语言并重定向路径
 78 |         let path = `/${lng}${url.pathname}`;
 79 |         if (url.search) {
 80 |           path += url.search;
 81 |         }
 82 |         return new Response(null, {
 83 |           status: 301,
 84 |           headers: {
 85 |             Location: path,
 86 |           },
 87 |         });
 88 |     }
 89 |   }
 90 | 
 91 |   if (url.pathname.match(/\/[us]\/\d+\/?$/)) {
 92 |     return new Response(null, {
 93 |       status: 301,
 94 |       headers: {
 95 |         Location: url.pathname.replace(/\/[us]\//, (match) =>
 96 |           match === '/u/' ? '/users/' : '/script-show-page/'
 97 |         ),
 98 |       },
 99 |     });
100 |   }
101 |   let callbackName = isbot(request.headers.get('user-agent'))
102 |     ? 'onAllReady'
103 |     : 'onShellReady';
104 |   // let callbackName = 'onAllReady';
105 | 
106 |   let instance = createInstance();
107 |   let lng = getLocale(request);
108 | 
109 |   let ns = i18next.getRouteNamespaces(remixContext);
110 | 
111 |   await instance
112 |     .use(initReactI18next) // Tell our instance to use react-i18next
113 |     .use(Backend) // Setup our backend
114 |     .init({
115 |       ...i18n, // spread the configuration
116 |       lng, // The locale we detected above
117 |       ns, // The namespaces the routes about to render wants to use
118 |       backend: { loadPath: resolve('./public/locales/{{lng}}/{{ns}}.json') },
119 |     });
120 | 
121 |   return new Promise((resolve, reject) => {
122 |     let didError = false;
123 | 
124 |     let { pipe, abort } = renderToPipeableStream(
125 |       <I18nextProvider i18n={instance}>
126 |         <RemixServer context={remixContext as any} url={request.url} />
127 |       </I18nextProvider>,
128 |       {
129 |         [callbackName]: () => {
130 |           let body = new PassThrough();
131 | 
132 |           responseHeaders.set('Content-Type', 'text/html');
133 | 
134 |           resolve(
135 |             new Response(body, {
136 |               headers: responseHeaders,
137 |               status: didError ? 500 : responseStatusCode,
138 |             })
139 |           );
140 | 
141 |           pipe(body);
142 |         },
143 |         onShellError(error: unknown) {
144 |           reject(error);
145 |         },
146 |         onError(error: unknown) {
147 |           didError = true;
148 | 
149 |           console.error(error);
150 |         },
151 |       }
152 |     );
153 | 
154 |     setTimeout(abort, ABORT_DELAY);
155 |   });
156 | }
157 | 


--------------------------------------------------------------------------------
/app/i18n.ts:
--------------------------------------------------------------------------------
 1 | import 'dayjs/locale/en';
 2 | import 'dayjs/locale/zh-cn';
 3 | import 'dayjs/locale/zh-tw';
 4 | 
 5 | export default {
 6 |   // This is the list of languages your application supports
 7 |   supportedLngs: ['en', 'zh-CN', 'zh-TW', 'ach-UG'],
 8 |   // This is the language you want to use in case
 9 |   // if the user language is not in the supportedLngs
10 |   fallbackLng: 'en',
11 |   // The default namespace of i18next is "translation", but you can customize it here
12 |   defaultNS: 'common',
13 |   // Disabling suspense is recommended
14 |   react: { useSuspense: false },
15 | };
16 | 


--------------------------------------------------------------------------------
/app/i18next.server.ts:
--------------------------------------------------------------------------------
 1 | import Backend from 'i18next-fs-backend';
 2 | import { resolve } from 'node:path';
 3 | import { RemixI18Next } from 'remix-i18next';
 4 | import i18n from '~/i18n'; // your i18n configuration file
 5 | 
 6 | let i18next = new RemixI18Next({
 7 |   detection: {
 8 |     supportedLanguages: i18n.supportedLngs,
 9 |     fallbackLanguage: i18n.fallbackLng,
10 |   },
11 |   // This is the configuration for i18next used
12 |   // when translating messages server-side only
13 |   i18next: {
14 |     ...i18n,
15 |     backend: {
16 |       loadPath: resolve('./public/locales/{{lng}}/{{ns}}.json'),
17 |     },
18 |   },
19 |   // The i18next plugins you want RemixI18next to use for `i18n.getFixedT` inside loaders and actions.
20 |   // E.g. The Backend plugin for loading translations from the file system
21 |   // Tip: You could pass `resources` to the `i18next` configuration and avoid a backend here
22 |   plugins: [Backend],
23 | });
24 | 
25 | export default i18next;
26 | 


--------------------------------------------------------------------------------
/app/routes/$lng/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Button, Card, Checkbox, Space } from 'antd';
  2 | import { QuestionCircleFilled, CodeFilled } from '@ant-design/icons';
  3 | import { useEffect, useState } from 'react';
  4 | import { useTranslation } from 'react-i18next';
  5 | 
  6 | import UAParser from 'ua-parser-js';
  7 | import Search from '~/components/Search';
  8 | 
  9 | export default function Index() {
 10 |   const [installUrl] = useState('https://docs.scriptcat.org/docs/use/use');
 11 |   const { t } = useTranslation();
 12 |   const [browser, setBrowser] = useState(t("browser"));
 13 | 
 14 |   useEffect(() => {
 15 |     const ua = new UAParser(navigator.userAgent);
 16 |     // TODO: 跳转到对应的商店
 17 |     switch (ua.getBrowser().name) {
 18 |       case 'Edge':
 19 |         return setBrowser('Edge');
 20 |       case 'Chrome':
 21 |         return setBrowser('Chrome');
 22 |       case 'Firefox':
 23 |         return setBrowser('Firefox');
 24 |     }
 25 |   }, []);
 26 | 
 27 |   return (
 28 |     <div className="flex flex-col text-black dark:text-white gap-4">
 29 |       <div className="flex flex-col items-center gap-2">
 30 |         <span className="text-5xl m-0">Script Cat</span>
 31 |         <span>{t('home_page_subtitle')}</span>
 32 |         <Search className="w-full md:w-4/5" />
 33 |         <span className="text-2xl">{t('powerful_script_extension')}</span>
 34 |         <span>{t('more_possibilities_for_your_browser')}</span>
 35 |         <Space className="flex flex-row justify-center">
 36 |           <div>
 37 |             <Checkbox className="checkbox-round !text-base" checked={true}>
 38 |               {t('greasemonkey_script')}
 39 |             </Checkbox>
 40 |             <Checkbox className="checkbox-round !text-base" checked={true}>
 41 |               {t('background_script')}
 42 |             </Checkbox>
 43 |           </div>
 44 |           <div>
 45 |             <Checkbox className="checkbox-round !text-base" checked={true}>
 46 |               {t('scheduled_script')}
 47 |             </Checkbox>
 48 |             <Checkbox className="checkbox-round !text-base" checked={true}>
 49 |               {t('cloud_script')}
 50 |             </Checkbox>
 51 |           </div>
 52 |         </Space>
 53 |         <Button
 54 |           type="primary"
 55 |           className="!px-6"
 56 |           size="large"
 57 |           target={'_blank'}
 58 |           href={installUrl}
 59 |         >
 60 |           {t('add_scriptcat_to')} {browser}
 61 |         </Button>
 62 |       </div>
 63 |       <div className="flex flex-col justify-between gap-6 lg:flex-row">
 64 |         <Card className="flex-1 !rounded-xl">
 65 |           <div className="text-center flex flex-col sm:max-lg:flex-row">
 66 |             <div className="card-title">
 67 |               <img
 68 |                 style={{
 69 |                   width: '64px',
 70 |                   height: '64px',
 71 |                   display: 'inline-block',
 72 |                 }}
 73 |                 src="/assets/logo.png"
 74 |                 alt="logo"
 75 |               />
 76 |               <p className="text-3xl m-0">{t('scriptcat')}</p>
 77 |             </div>
 78 |             <div className="text-left text-gray-500">
 79 |               <p className="m-0">{t('scriptcat_description')}</p>
 80 |               <p className="m-0 mt-2 font-bold">
 81 |                 {t('if_you_have_installed_other_script_managers')}
 82 |               </p>
 83 |               <p className="m-0 font-bold">
 84 |                 {t('if_you_want_to_use_scriptcat')}{' '}
 85 |                 <a target="_blank" href={installUrl} rel="noreferrer">
 86 |                   {t('install_scriptcat')}
 87 |                 </a>
 88 |               </p>
 89 |             </div>
 90 |           </div>
 91 |         </Card>
 92 |         <Card className="flex-1 !rounded-xl">
 93 |           <div className="text-center flex flex-col sm:max-lg:flex-row">
 94 |             <div className="card-title">
 95 |               <QuestionCircleFilled
 96 |                 className="text-6xl"
 97 |                 style={{ color: '#4695d5' }}
 98 |               />
 99 |               <p className="text-3xl m-0">{t('common_questions')}</p>
100 |             </div>
101 |             <div className="text-left text-gray-500">
102 |               <p className="m-0 font-bold">
103 |                 {t('what_are_greasemonkey_scripts')}
104 |               </p>
105 |               <p className="m-0">
106 |                 {t('greasemonkey_scripts_can_extend_web_page_functionality')}
107 |               </p>
108 |               <p className="m-0 font-bold"> {t('what_is_scriptcat')}</p>
109 |               <p className="m-0">
110 |                 {t(
111 |                   'scriptcat_is_based_on_greasemonkey_and_supports_most_greasemonkey_scripts'
112 |                 )}
113 |               </p>
114 |               <p className="m-0 font-bold">
115 |                 {t('how_to_use_greasemonkey_scripts')}
116 |               </p>
117 |               <p>
118 |                 {t(
119 |                   'using_greasemonkey_scripts_requires_installing_greasemonkey_manager'
120 |                 )}
121 |               </p>
122 |             </div>
123 |           </div>
124 |         </Card>
125 |         <Card className="flex-1 !rounded-xl">
126 |           <div className="text-center flex flex-col sm:max-lg:flex-row">
127 |             <div className="card-title">
128 |               <CodeFilled className="text-6xl" style={{ color: '#4695d5' }} />
129 |               <p className="text-3xl m-0">{t('become_a_developer')}</p>
130 |             </div>
131 |             <div className="text-left text-gray-500">
132 |               <p className="m-0">
133 |                 {t('as_a_forum_developer_we_can_offer_the_following_benefits')}
134 |               </p>
135 |               <p className="m-0">{t('1_forum_homepage_recommendation')}</p>
136 |               <p className="m-0">
137 |                 {t('2_wechat_official_account_article_recommendation')}
138 |               </p>
139 |               <p className="m-0">
140 |                 {t(
141 |                   '3_you_will_be_invited_to_a_technical_community_of_developers'
142 |                 )}
143 |               </p>
144 |               <p className="m-0">
145 |                 {t(
146 |                   '4_if_you_are_willing_we_will_also_display_your_information'
147 |                 )}
148 |               </p>
149 |               <p className="m-0">
150 |                 {t('5_forum_and_channel_developer_user_group_permissions')}
151 |               </p>
152 |               <p className="m-0">{t('6_and_more')}</p>
153 |               <p className="m-0">
154 |                 {t(
155 |                   'if_you_also_want_to_become_a_developer_please_refer_to_our_tutorial'
156 |                 )}
157 |                 <a
158 |                   href="https://bbs.tampermonkey.net.cn/thread-1234-1-1.html"
159 |                   target="_blank"
160 |                   rel="noreferrer"
161 |                 >
162 |                   {t('tampermonkey_chinese_website')}
163 |                 </a>
164 |               </p>
165 |             </div>
166 |           </div>
167 |         </Card>
168 |       </div>
169 |     </div>
170 |   );
171 | }
172 | 


--------------------------------------------------------------------------------
/app/routes/$lng/invite-confirm/index.tsx:
--------------------------------------------------------------------------------
  1 | import type { LinksFunction } from '@remix-run/node';
  2 | import { useTranslation } from 'react-i18next';
  3 | 
  4 | import pageStylesHref from '~/styles/invite-confirm.css';
  5 | import { Badge, Button, Card, Divider, message } from 'antd';
  6 | import { json, redirect } from '@remix-run/node';
  7 | import type { LoaderFunction } from '@remix-run/node';
  8 | import { useLocale } from 'remix-i18next';
  9 | 
 10 | import {
 11 |   GetInviteMessage,
 12 |   HandleInvite,
 13 |   inviteDetail,
 14 | } from '~/services/scripts/api';
 15 | import { useLoaderData, useRevalidator } from '@remix-run/react';
 16 | 
 17 | export const loader: LoaderFunction = async ({ request }) => {
 18 |   let { searchParams } = new URL(request.url);
 19 |   let code = searchParams.get('code');
 20 |   if (code === null) {
 21 |     return redirect('/');
 22 |   }
 23 |   const resp = await GetInviteMessage(code, request);
 24 |   if (resp.code != 0) {
 25 |     throw new Response(resp.msg, {
 26 |       status: 403,
 27 |       statusText: 'Forbidden',
 28 |     });
 29 |   }
 30 |   return json({ data: resp.data, code });
 31 | };
 32 | 
 33 | export const links: LinksFunction = () => [
 34 |   { rel: 'stylesheet', href: pageStylesHref },
 35 | ];
 36 | export default function inviteConfirm() {
 37 |   const revalidator = useRevalidator();
 38 |   const data = useLoaderData<{ data: inviteDetail; code: string }>();
 39 |   console.log('codeData',data)
 40 |   const codeData = data.data;
 41 |   const invite_status = codeData.invite_status;
 42 |   const code = data.code;
 43 |   const isGroup = codeData.group !== undefined;
 44 |   const username = codeData.script.username;
 45 |   const scriptname = codeData.script.name;
 46 |   const locale = '/' + useLocale();
 47 |   const { t } = useTranslation();
 48 |   const sbumitInvite = async (status: boolean) => {
 49 |     const result = await HandleInvite(code, status);
 50 |     if (result.code == 0) {
 51 |       message.success(t('submit_success'));
 52 |       revalidator.revalidate();
 53 |     } else {
 54 |       message.error(result.msg);
 55 |     }
 56 |   };
 57 |   const acceptInvite = () => sbumitInvite(true);
 58 |   const rejectInvite = () => sbumitInvite(false);
 59 |   function InviteDetail({ invite_status }: { invite_status: number }) {
 60 |     //1 未使用，2使用，3过期，4等待，5拒绝
 61 |     if (invite_status === 1) {
 62 |       return (
 63 |         <>
 64 |           {' '}
 65 |           <div>
 66 |             {isGroup
 67 |               ? t('invite_you_join_group', {
 68 |                   inviter: username,
 69 |                   holder: scriptname,
 70 |                   property: codeData.group?.name,
 71 |                 })
 72 |               : t('invite_you_join', {
 73 |                   inviter: username,
 74 |                   holder: scriptname,
 75 |                 })}
 76 |           </div>
 77 |           {!isGroup ? (
 78 |             <>
 79 |               <div className="my-2">
 80 |                 {t('join_you_will_have_following_role_list')}：
 81 |               </div>
 82 |               <div>
 83 |                 {(() => {
 84 |                   if (codeData.access?.role === 'guest') {
 85 |                     return (
 86 |                       <Badge
 87 |                         className="!my-1"
 88 |                         color="#000"
 89 |                         text={t('readable')}
 90 |                       />
 91 |                     );
 92 |                   }
 93 |                   if (codeData.access?.role === 'manager') {
 94 |                     return (
 95 |                       <>
 96 |                         <Badge
 97 |                           className="!my-1"
 98 |                           color="#000"
 99 |                           text={t('readable')}
100 |                         />
101 |                         <Badge
102 |                           className="!my-1"
103 |                           color="#000"
104 |                           text={t('writeable')}
105 |                         />
106 |                       </>
107 |                     );
108 |                   }
109 |                   return <></>;
110 |                 })()}
111 |               </div>
112 |             </>
113 |           ) : (
114 |             <></>
115 |           )}
116 |           <div className="flex justify-end items-center mt-10">
117 |             <Button onClick={acceptInvite} type="primary">
118 |               {t('agree')}
119 |             </Button>
120 |             <Button
121 |               onClick={rejectInvite}
122 |               className="ml-2"
123 |               type="primary"
124 |               danger
125 |             >
126 |               {t('reject')}
127 |             </Button>
128 |           </div>
129 |         </>
130 |       );
131 |     } else if (invite_status === 2) {
132 |       return (
133 |         <div className="min-h-[150px] flex  text-lg flex-col items-center">
134 |           <div>
135 |             {isGroup
136 |               ? t('invite_you_join_group', {
137 |                   inviter: username,
138 |                   holder: scriptname,
139 |                   property: codeData.group?.name,
140 |                 })
141 |               : t('invite_you_join', {
142 |                   inviter: username,
143 |                   holder: scriptname,
144 |                 })}
145 |           </div>
146 |           <div className="mt-3">{code + ' ' + t('used')}</div>
147 |         </div>
148 |       );
149 |     } else if (invite_status === 3) {
150 |       return (
151 |         <div className="min-h-[150px] flex  text-lg flex-col items-center">
152 |           <div>
153 |             {isGroup
154 |               ? t('invite_you_join_group', {
155 |                   inviter: username,
156 |                   holder: scriptname,
157 |                   property: codeData.group?.name,
158 |                 })
159 |               : t('invite_you_join', {
160 |                   inviter: username,
161 |                   holder: scriptname,
162 |                 })}
163 |           </div>
164 |           <div className="mt-3">{code + ' ' + t('expired')}</div>
165 |         </div>
166 |       );
167 |     } else if (invite_status === 4) {
168 |       return (
169 |         <div className="min-h-[150px] flex  text-lg flex-col items-center">
170 |           <div>
171 |             {isGroup
172 |               ? t('invite_you_join_group', {
173 |                   inviter: username,
174 |                   holder: scriptname,
175 |                   property: codeData.group?.name,
176 |                 })
177 |               : t('invite_you_join', {
178 |                   inviter: username,
179 |                   holder: scriptname,
180 |                 })}
181 |           </div>
182 |           <div className="mt-3">{code + ' ' + t('pending')}</div>
183 |         </div>
184 |       );
185 |     } else if (invite_status === 5) {
186 |       return (
187 |         <div className="min-h-[150px] flex  text-lg flex-col items-center">
188 |           <div>
189 |             {isGroup
190 |               ? t('invite_you_join_group', {
191 |                   inviter: username,
192 |                   holder: scriptname,
193 |                   property: codeData.group?.name,
194 |                 })
195 |               : t('invite_you_join', {
196 |                   inviter: username,
197 |                   holder: scriptname,
198 |                 })}
199 |           </div>
200 |           <div className="mt-3">{code + ' ' + t('rejected')}</div>
201 |         </div>
202 |       );
203 |     }
204 |     return <></>;
205 |   }
206 |   return (
207 |     <div className="h-full flex justify-center items-center text-xl">
208 |       <Card
209 |         title={<div className='flex justify-center'>{t('invite_confirm')}</div>}
210 |         className="w-[40%] max-w-[500px]"
211 |       >
212 |         <InviteDetail invite_status={invite_status} />
213 |         <div className='flex justify-center'>
214 |         <Button href={locale +"/script-show-page/"+codeData.script.id}>{t('back_script_page')}</Button>
215 |         </div>
216 |       </Card>
217 |       {/* <div className="flex w-[40%] flex-col max-w-[500px] bg-white rounded-md p-5">
218 |         <div className="flex justify-center text-xl w-full">
219 |           {t('invite_confirm')}
220 |         </div>
221 |         <Divider />
222 |       </div> */}
223 |     </div>
224 |   );
225 | }
226 | 


--------------------------------------------------------------------------------
/app/routes/$lng/post-script.tsx:
--------------------------------------------------------------------------------
 1 | import { LinksFunction, LoaderFunction } from '@remix-run/node';
 2 | import type { V2_MetaFunction } from '@remix-run/react';
 3 | import { useNavigate } from '@remix-run/react';
 4 | import { Card, message } from 'antd';
 5 | import { useTranslation } from 'react-i18next';
 6 | import { useLocale } from 'remix-i18next';
 7 | import { markdownEditorLinks } from '~/components/MarkdownEditor';
 8 | import UpdateScript from '~/components/UpdateScript';
 9 | import i18next from '~/i18next.server';
10 | import { CreateScript } from '~/services/scripts/api';
11 | import { getLocale } from '~/utils/i18n';
12 | 
13 | export const links: LinksFunction = () => [...markdownEditorLinks()];
14 | 
15 | export const meta: V2_MetaFunction = ({
16 |   data,
17 | }: {
18 |   data: { title: string; description: string };
19 | }) => {
20 |   return [{ title: data.title }, { description: data.description }, {
21 |     name: "viewport",
22 |     content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
23 |   },];
24 | };
25 | 
26 | export const loader: LoaderFunction = async ({ request }) => {
27 |   const t = await i18next.getFixedT(getLocale(request, 'en') ?? 'en');
28 |   return {
29 |     title: t('submit_new_script') + ' - ScriptCat',
30 |     description: t('home_page_description'),
31 |   };
32 | };
33 | 
34 | export default function PostScript() {
35 |   const navigate = useNavigate();
36 |   const { t } = useTranslation();
37 |   const locale = '/' + useLocale();
38 |   return (
39 |     <>
40 |       <Card>
41 |         <UpdateScript
42 |           onSubmit={async (params) => {
43 |             const resp = await CreateScript(params);
44 |             if (resp.code !== 0) {
45 |               message.error(resp.msg);
46 |               return false;
47 |             }
48 |             message.success(t('submit_success'));
49 |             navigate({
50 |               pathname: locale + '/script-show-page/' + resp.data.id,
51 |             });
52 |             return true;
53 |           }}
54 |         />
55 |       </Card>
56 |     </>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id.tsx:
--------------------------------------------------------------------------------
  1 | import type { V2_MetaFunction } from '@remix-run/react';
  2 | import {
  3 |   Link,
  4 |   Outlet,
  5 |   useRouteError,
  6 |   isRouteErrorResponse,
  7 |   useLoaderData,
  8 |   useLocation,
  9 | } from '@remix-run/react';
 10 | import type { MenuProps } from 'antd';
 11 | import { Space, Tag } from 'antd';
 12 | import { Alert, message } from 'antd';
 13 | import { Menu } from 'antd';
 14 | import type { LoaderFunction } from '@remix-run/node';
 15 | import { json } from '@remix-run/node';
 16 | import { getScript } from '~/services/scripts/api';
 17 | import type { Script } from '~/services/scripts/types';
 18 | import { ScriptContext, UserContext } from '~/context-manager';
 19 | import { useContext } from 'react';
 20 | import { useState } from 'react';
 21 | import { useEffect } from 'react';
 22 | import ClipboardJS from 'clipboard';
 23 | import { forwardHeaders } from '~/utils/cookie';
 24 | import { scriptName } from '~/utils/utils';
 25 | import { useTranslation } from 'react-i18next';
 26 | import { useLocale } from 'remix-i18next';
 27 | import i18next from '~/i18next.server';
 28 | import { getLocale } from '~/utils/i18n';
 29 | export type LoaderData = {
 30 |   script: Script & { issue_num: number; role: string };
 31 |   title: string;
 32 | };
 33 | 
 34 | export const meta: V2_MetaFunction = ({ data, location }) => {
 35 |   if (!data) {
 36 |     return [{ title: 'Not Found - ScriptCat' }, { description: 'Not Found' }, {
 37 |       name: "viewport",
 38 |       content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 39 |     },];
 40 |   }
 41 | 
 42 |   return [{ title: data.title }, { description: data.script.description }, {
 43 |     name: "viewport",
 44 |     content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 45 |   },];
 46 | };
 47 | 
 48 | export function ErrorBoundary() {
 49 |   const caught = useRouteError();
 50 |   return <span className="text-2xl dark:text-white">{isRouteErrorResponse(caught) ? caught.data : 'Unknown Error'}</span>;
 51 | }
 52 | 
 53 | export const loader: LoaderFunction = async ({ params, request }) => {
 54 |   const script = await getScript(parseInt(params.id as string), request);
 55 |   if (script.data.code !== 0) {
 56 |     throw new Response(script.data.msg, {
 57 |       status: 404,
 58 |       statusText: 'Not Found',
 59 |     });
 60 |   }
 61 |   const t = await i18next.getFixedT(getLocale(request, 'en') ?? 'en');
 62 |   const pathname = new URL(request.url).pathname;
 63 |   const match = /\d+\/(\w+)(\/|$)/g.exec(pathname);
 64 |   const current = match ? match[1] : 'home';
 65 |   const map: { [key: string]: string } = {
 66 |     code: t('code'),
 67 |     issue: t('issue'),
 68 |     comment: t('comment'),
 69 |     version: t('version_list'),
 70 |     update: t('update_script'),
 71 |     statistic: t('script_statistic'),
 72 |     manage: t('script_manage'),
 73 |   };
 74 |   const title =
 75 |     (script?.data?.data?.name ?? 'Script ') +
 76 |     (map[current] ? ' - ' + map[current] : '');
 77 |   return json({ script: script.data.data, title: title } as LoaderData, {
 78 |     headers: forwardHeaders(script),
 79 |   });
 80 | };
 81 | 
 82 | export default function ScriptShowPage() {
 83 |   const users = useContext(UserContext);
 84 |   const data = useLoaderData<LoaderData>();
 85 |   const location = useLocation();
 86 |   const match = /\d+\/(\w+)(\/|$)/g.exec(location.pathname);
 87 |   const current = match ? match[1] : 'home';
 88 |   const [forbidden, setForbidden] = useState(false);
 89 |   const { t } = useTranslation();
 90 |   const locale = '/' + useLocale();
 91 | 
 92 |   useEffect(() => {
 93 |     const clipboard = new ClipboardJS('.copy-script-link', {
 94 |       text: (target) => {
 95 |         message.success(t('copy_success'));
 96 |         return (
 97 |           target.getAttribute('script-name') +
 98 |           '\n' +
 99 |           window.location.origin +
100 |           locale +
101 |           '/script-show-page/' +
102 |           target.getAttribute('script-id')
103 |         );
104 |       },
105 |     });
106 |     return () => {
107 |       clipboard.destroy();
108 |     };
109 |   }, []);
110 |   useEffect(() => {
111 |     const clipboard = new ClipboardJS('.copy-require-link', {
112 |       text: (target) => {
113 |         message.success(t('copy_success'));
114 |         return target.getAttribute('require-link') || '';
115 |       },
116 |     });
117 |     return () => {
118 |       clipboard.destroy();
119 |     };
120 |   }, []);
121 |   const items: MenuProps['items'] = [
122 |     {
123 |       key: 'home',
124 |       label: <Link to={'./'}>{t('home')}</Link>,
125 |     },
126 |     {
127 |       key: 'code',
128 |       label: <Link to={'./code'}>{t('code')}</Link>,
129 |     },
130 |     {
131 |       key: 'issue',
132 |       label: (
133 |         <Link to={'./issue'}>
134 |           <Space>
135 |             {t('issue')}
136 |             {data.script.issue_num > 0 && (
137 |               <Tag
138 |                 className="dark:!bg-gray-600 !bg-gray-200"
139 |                 style={{
140 |                   border: 0,
141 |                   borderRadius: '50%',
142 |                   fontWeight: '500',
143 |                 }}
144 |               >
145 |                 {data.script.issue_num > 99 ? '99+' : data.script.issue_num}
146 |               </Tag>
147 |             )}
148 |           </Space>
149 |         </Link>
150 |       ),
151 |     },
152 |     {
153 |       key: 'comment',
154 |       label: <Link to={'./comment'}>{t('comment')}</Link>,
155 |     },
156 |     {
157 |       key: 'version',
158 |       label: <Link to={'./version'}>{t('version_list')}</Link>,
159 |     },
160 |   ];
161 |   if (
162 |     users.user &&
163 |     (users.user.user_id === data.script.user_id ||
164 |       users.user.is_admin === 1 ||
165 |       data.script.role === 'manager')
166 |   ) {
167 |     items.push(
168 |       ...[
169 |         {
170 |           key: 'update',
171 |           label: <Link to={'./update'}>{t('update_script')}</Link>,
172 |         },
173 |         {
174 |           key: 'statistic',
175 |           label: <Link to={'./statistic'}>{t('script_statistic')}</Link>,
176 |         },
177 |         {
178 |           key: 'manage',
179 |           label: <Link to={'./manage'}>{t('script_manage')}</Link>,
180 |         },
181 |       ]
182 |     );
183 |   }
184 |   useEffect(() => {
185 |     if (
186 |       !(
187 |         users.user &&
188 |         (users.user.user_id === data.script.user_id ||
189 |           users.user.is_admin === 1 ||
190 |           data.script.role === 'manager')
191 |       ) &&
192 |       ['update', 'statistic', 'manage'].indexOf(current) !== -1
193 |     ) {
194 |       setForbidden(true);
195 |     } else {
196 |       setForbidden(false);
197 |     }
198 |   }, [users.user, data.script.user_id, current]);
199 | 
200 |   return (
201 |     <>
202 |       <div className="flex flex-col gap-3">
203 |         {data.script.archive == 1 && (
204 |           <Alert
205 |             message={t('script_archived')}
206 |             description={t('script_archived_description')}
207 |             type="warning"
208 |             showIcon
209 |             closable
210 |           />
211 |         )}
212 |         {data.script.danger == 1 && (
213 |           <Alert
214 |             message={t('script_code_obfuscated')}
215 |             description={t('script_code_obfuscated_description')}
216 |             type="error"
217 |             showIcon
218 |             closable
219 |           />
220 |         )}
221 |         <Link
222 |           to={locale + '/script-show-page/' + data.script.id}
223 |           className="text-2xl !text-black dark:!text-white dark:hover:!text-[#1677ff] hover:!text-[#1677ff]"
224 |         >
225 |           {scriptName(data.script)}
226 |         </Link>
227 |         <Menu selectedKeys={[current]} mode="horizontal" items={items}></Menu>
228 | 
229 |         <ScriptContext.Provider value={{ script: data.script }}>
230 |           {forbidden ? (
231 |             <span className="text-2xl dark:text-white">
232 |               {t('no_permission')}
233 |             </span>
234 |           ) : (
235 |             <Outlet />
236 |           )}
237 |         </ScriptContext.Provider>
238 |       </div>
239 |     </>
240 |   );
241 | }
242 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/code.tsx:
--------------------------------------------------------------------------------
 1 | import type { LoaderFunction } from '@remix-run/node';
 2 | import { json } from '@remix-run/node';
 3 | import { useLoaderData } from '@remix-run/react';
 4 | import { Card } from 'antd';
 5 | import { getScript } from '~/services/scripts/api';
 6 | import type { LoaderData } from '../$id';
 7 | import CodeEditor from '~/components/CodeEditor';
 8 | import { forwardHeaders } from '~/utils/cookie';
 9 | import { getLocale } from '~/utils/i18n';
10 | import i18next from '~/i18next.server';
11 | 
12 | export const loader: LoaderFunction = async ({ params, request }) => {
13 |   const lng = getLocale(request, 'en')!;
14 |   let t = await i18next.getFixedT(lng);
15 |   const script = await getScript(parseInt(params.id as string), request, true);
16 |   if (script.data.code != 0) {
17 |     throw new Response(script.data.msg, {
18 |       status: 404,
19 |       statusText: 'Not Found',
20 |     });
21 |   }
22 |   return json({ script: script.data.data } as LoaderData, {
23 |     headers: forwardHeaders(script),
24 |   });
25 | };
26 | 
27 | export default function Code() {
28 |   const data = useLoaderData<LoaderData>();
29 |   return (
30 |     <Card>
31 |       <div id="code" className="code w-full h-[500px]">
32 |         <CodeEditor
33 |           id="view-code"
34 |           code={data.script.script.code || ''}
35 |           readOnly={true}
36 |         />
37 |       </div>
38 |     </Card>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/comment.tsx:
--------------------------------------------------------------------------------
  1 | import type { LinksFunction, LoaderFunction } from '@remix-run/node';
  2 | import { json } from '@remix-run/node';
  3 | import { Link, useLoaderData } from '@remix-run/react';
  4 | import {
  5 |   Avatar,
  6 |   Button,
  7 |   Card,
  8 |   ConfigProvider,
  9 |   Divider,
 10 |   Empty,
 11 |   List,
 12 |   message,
 13 |   Rate,
 14 |   Skeleton,
 15 |   Space,
 16 |   theme,
 17 |   Typography,
 18 | } from 'antd';
 19 | import { useContext, useEffect, useRef, useState } from 'react';
 20 | import InfiniteScroll from 'react-infinite-scroll-component';
 21 | import { formatDate, useDark } from '~/utils/utils';
 22 | import MarkdownView, { markdownViewLinks } from '~/components/MarkdownView';
 23 | import {
 24 |   DeleteScore,
 25 |   GetMyScore,
 26 |   ScoreList,
 27 |   SubmitScore,
 28 | } from '~/services/scripts/api';
 29 | import type { ScoreItem } from '~/services/scripts/types';
 30 | import { ScriptContext, UserContext } from '~/context-manager';
 31 | import ActionMenu from '~/components/ActionMenu';
 32 | import { useTranslation } from 'react-i18next';
 33 | import TextArea from '~/components/TextArea';
 34 | 
 35 | export const links: LinksFunction = () => [...markdownViewLinks()];
 36 | 
 37 | type LoaderData = {
 38 |   id: number;
 39 |   list: ScoreItem[];
 40 |   total: number;
 41 |   myScore: ScoreItem;
 42 | };
 43 | 
 44 | export const loader: LoaderFunction = async ({ params, request }) => {
 45 |   const id = parseInt(params.id as string);
 46 |   const list = await ScoreList(id, undefined, request);
 47 |   const my = await GetMyScore(id, request);
 48 |   return json({
 49 |     id: id,
 50 |     list: list.data.list,
 51 |     total: list.data.total,
 52 |     myScore: my,
 53 |   } as LoaderData);
 54 | };
 55 | 
 56 | export default function Comment() {
 57 |   const loaderData = useLoaderData<LoaderData>();
 58 |   const [loading, setLoading] = useState(false);
 59 |   const [data, setData] = useState(loaderData.list);
 60 |   const [total, setTotal] = useState(loaderData.total);
 61 |   const [page, setPage] = useState(1);
 62 |   const user = useContext(UserContext);
 63 |   const script = useContext(ScriptContext);
 64 |   const [submitLoading, setSubmitLoading] = useState(false);
 65 |   const [score, setScore] = useState(
 66 |     (loaderData.myScore && loaderData.myScore.score / 10) || 5
 67 |   );
 68 |   const [scoreMessage, setScoreMessage] = useState(
 69 |     loaderData.myScore && loaderData.myScore.message
 70 |   );
 71 |   const { t } = useTranslation();
 72 | 
 73 |   const onSubmit = async () => {
 74 |     setSubmitLoading(true);
 75 |     const resp = await SubmitScore(loaderData.id, scoreMessage, score * 10);
 76 |     setSubmitLoading(false);
 77 |     if (resp.code === 0) {
 78 |       message.success(t('comment_success'));
 79 |       for (let i = 0; i < data.length; i++) {
 80 |         if (data[i].user_id === user.user?.user_id) {
 81 |           data[i].score = score * 10;
 82 |           data[i].message = scoreMessage;
 83 |           setData([...data]);
 84 |           return;
 85 |         }
 86 |       }
 87 |       setData([
 88 |         {
 89 |           id: 0,
 90 |           user_id: user.user!.user_id,
 91 |           username: user.user!.username,
 92 |           avatar: user.user!.avatar,
 93 |           score: score * 10,
 94 |           message: scoreMessage,
 95 |           createtime: new Date().getTime() / 1000,
 96 |         },
 97 |         ...data,
 98 |       ]);
 99 |     } else {
100 |       message.error(resp.msg);
101 |     }
102 |     setSubmitLoading(false);
103 |   };
104 | 
105 |   const loadMoreData = async () => {
106 |     if (loading) {
107 |       return;
108 |     }
109 |     setLoading(true);
110 |     const list = await ScoreList(loaderData.id, { page: page + 1 });
111 |     setData([...data, ...list.list]);
112 |     setLoading(false);
113 |     setPage((page) => page + 1);
114 |   };
115 | 
116 |   return (
117 |     <Card>
118 |       <Space className="w-full" direction="vertical">
119 |         <Card title={t('write_comment')}>
120 |           {user.user && (
121 |             <TextArea
122 |               showCount
123 |               maxLength={100}
124 |               style={{
125 |                 height: 120,
126 |               }}
127 |               value={scoreMessage}
128 |               onChange={(v) => {
129 |                 setScoreMessage(v.target.value);
130 |               }}
131 |               placeholder={t('write_comment_placeholder')}
132 |             />
133 |           )}
134 |           {!user.user && (
135 |             <Empty className="border-t" description={t('login_to_comment')}>
136 |               <Button
137 |                 type="primary"
138 |                 onClick={() => {
139 |                   const btn = document.querySelector(
140 |                     '#go-to-login'
141 |                   ) as HTMLButtonElement;
142 |                   btn.click();
143 |                 }}
144 |               >
145 |                 {t('login')}
146 |               </Button>
147 |             </Empty>
148 |           )}
149 |           <Card.Meta
150 |             className="!mt-2 justify-end"
151 |             title={
152 |               <Rate
153 |                 defaultValue={score}
154 |                 onChange={(value) => setScore(value)}
155 |                 tooltips={[
156 |                   t('rate_1'),
157 |                   t('rate_2'),
158 |                   t('rate_3'),
159 |                   t('rate_4'),
160 |                   t('rate_5'),
161 |                 ]}
162 |               />
163 |             }
164 |           />
165 |           <Card.Meta
166 |             className="!mt-2 justify-end"
167 |             title={
168 |               <Button
169 |                 type="primary"
170 |                 loading={submitLoading}
171 |                 onClick={onSubmit}
172 |                 disabled={user.user ? false : true}
173 |               >
174 |                 {t('commit_comment')}
175 |               </Button>
176 |             }
177 |           />
178 |         </Card>
179 |         <Card title={t('user_scores')}>
180 |           <InfiniteScroll
181 |             dataLength={data.length}
182 |             next={loadMoreData}
183 |             hasMore={data.length < total}
184 |             loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
185 |             endMessage={<Divider plain>{t('all_comments_loaded')}</Divider>}
186 |             scrollableTarget="scrollableDiv"
187 |           >
188 |             <ConfigProvider
189 |               renderEmpty={() => <Empty description={t('no_scores_yet')} />}
190 |             >
191 |               <List
192 |                 dataSource={data}
193 |                 renderItem={(item, index) => (
194 |                   <List.Item key={item.id} className="!block !px-0">
195 |                     <div className="flex flex-col gap-2">
196 |                       <div className="flex flex-row justify-between">
197 |                         <div className="flex flex-row items-center gap-2">
198 |                           <Link to={'/users/' + item.user_id} target="_blank">
199 |                             <Avatar src={item.avatar} />
200 |                           </Link>
201 |                           <div className="flex flex-col">
202 |                             <Link to={'/users/' + item.user_id} target="_blank">
203 |                               {item.username}
204 |                             </Link>
205 |                             <span className="text-xs text-gray-400">
206 |                               {formatDate(item.createtime)}
207 |                             </span>
208 |                           </div>
209 |                           <Rate
210 |                             value={item.score / 10}
211 |                             disabled
212 |                             allowHalf
213 |                           ></Rate>
214 |                         </div>
215 |                         <ActionMenu
216 |                           uid={item.user_id}
217 |                           deleteLevel="super_moderator"
218 |                           allowSelfDelete={false}
219 |                           onDeleteClick={async () => {
220 |                             const resp = await DeleteScore(
221 |                               script.script!.id,
222 |                               item.id
223 |                             );
224 |                             if (resp.code == 0) {
225 |                               message.success('删除成功');
226 |                               data.splice(index, 1);
227 |                               setData([...data]);
228 |                               setTotal((total) => total - 1);
229 |                             } else {
230 |                               message.error(resp.msg);
231 |                             }
232 |                           }}
233 |                         >
234 |                           <Button type="link">{t('action')}</Button>
235 |                         </ActionMenu>
236 |                       </div>
237 |                       <MarkdownView
238 |                         id={'score-' + item.id}
239 |                         content={item.message}
240 |                       ></MarkdownView>
241 |                     </div>
242 |                   </List.Item>
243 |                 )}
244 |               />
245 |             </ConfigProvider>
246 |           </InfiniteScroll>
247 |         </Card>
248 |       </Space>
249 |     </Card>
250 |   );
251 | }
252 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/diff.tsx:
--------------------------------------------------------------------------------
 1 | import type { LoaderFunction } from '@remix-run/node';
 2 | import { redirect, Response } from '@remix-run/node';
 3 | import { json } from '@remix-run/node';
 4 | import { useLoaderData } from '@remix-run/react';
 5 | import { Card } from 'antd';
 6 | import { getScriptByVersion } from '~/services/scripts/api';
 7 | import CodeEditor from '~/components/CodeEditor';
 8 | import type { Script } from '~/services/scripts/types';
 9 | import { getLocale } from '~/utils/i18n';
10 | import i18next from '~/i18next.server';
11 | 
12 | type LoaderData = {
13 |   script1: Script;
14 |   script2: Script;
15 | };
16 | 
17 | export const loader: LoaderFunction = async ({ params, request }) => {
18 |   const lng = getLocale(request, 'en')!;
19 |   let t = await i18next.getFixedT(lng);
20 | 
21 |   const id = parseInt(params.id as string);
22 |   const url = new URL(request.url);
23 |   const version1 = url.searchParams.get('version1');
24 |   const version2 = url.searchParams.get('version2');
25 |   if (!version1 || !version2) {
26 |     return redirect('/script-show-page/' + id);
27 |   }
28 |   let script1 = await getScriptByVersion(id, version1, true, request);
29 |   if (!script1) {
30 |     throw new Response(t('script_version_not_found'), {
31 |       status: 404,
32 |       statusText: 'Not Found',
33 |     });
34 |   }
35 |   let script2 = await getScriptByVersion(id, version2, true, request);
36 |   if (!script2) {
37 |     throw new Response(t('script_version_not_found'), {
38 |       status: 404,
39 |       statusText: 'Not Found',
40 |     });
41 |   }
42 |   // 如果脚本1大于脚本2，则交换两个脚本
43 |   if (script1.script.id > script2.script.id) {
44 |     const temp = script1;
45 |     script1 = script2;
46 |     script2 = temp;
47 |   }
48 |   return json({ script1, script2 } as LoaderData);
49 | };
50 | 
51 | export default function Code() {
52 |   const data = useLoaderData<LoaderData>();
53 |   return (
54 |     <Card>
55 |       <div id="code" className="code w-full h-[500px]">
56 |         <CodeEditor
57 |           id="view-code"
58 |           code={data.script1.script.code}
59 |           diffCode={data.script2.script.code}
60 |           readOnly={true}
61 |           diff
62 |         />
63 |       </div>
64 |     </Card>
65 |   );
66 | }
67 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/index.tsx:
--------------------------------------------------------------------------------
  1 | import { LinksFunction, LoaderFunction, json } from '@remix-run/node';
  2 | import { Link, useLoaderData } from '@remix-run/react';
  3 | import {
  4 |   Avatar,
  5 |   Button,
  6 |   Card,
  7 |   ConfigProvider,
  8 |   Empty,
  9 |   List,
 10 |   Rate,
 11 |   Space,
 12 |   message,
 13 | } from 'antd';
 14 | import { useEffect } from 'react';
 15 | import { useContext, useState } from 'react';
 16 | import { useTranslation } from 'react-i18next';
 17 | import ActionMenu from '~/components/ActionMenu';
 18 | import MarkdownView, { markdownViewLinks } from '~/components/MarkdownView';
 19 | import SearchItem from '~/components/Search/SearchList/item';
 20 | import { ScriptContext } from '~/context-manager';
 21 | import {
 22 |   DeleteScore,
 23 |   GetMyScore,
 24 |   ScoreList,
 25 |   ScriptState,
 26 | } from '~/services/scripts/api';
 27 | import type {
 28 |   ScoreItem,
 29 |   WatchLevel as WatchLevelType,
 30 | } from '~/services/scripts/types';
 31 | import { formatDate } from '~/utils/utils';
 32 | 
 33 | export const links: LinksFunction = () => [...markdownViewLinks()];
 34 | 
 35 | type LoaderData = {
 36 |   id: number;
 37 |   list: ScoreItem[];
 38 |   total: number;
 39 |   myScore: ScoreItem;
 40 | };
 41 | 
 42 | export const loader: LoaderFunction = async ({ params, request }) => {
 43 |   const id = parseInt(params.id as string);
 44 |   const list = await ScoreList(id, undefined, request);
 45 |   const my = await GetMyScore(id, request);
 46 |   return json({
 47 |     id: id,
 48 |     list: list.data.list,
 49 |     total: list.data.total,
 50 |     myScore: my,
 51 |   } as LoaderData);
 52 | };
 53 | 
 54 | export default function Index() {
 55 |   const loaderData = useLoaderData<LoaderData>();
 56 |   const [scoreData, setScoreData] = useState<ScoreItem[]>(loaderData.list);
 57 |   const script = useContext(ScriptContext);
 58 |   const [watch, setWatch] = useState<WatchLevelType>(0);
 59 |   const { t } = useTranslation();
 60 | 
 61 |   useEffect(() => {
 62 |     if (script.script) {
 63 |       ScriptState(script.script.id).then((resp) => {
 64 |         setWatch(resp.data.watch);
 65 |       });
 66 |     }
 67 |   }, [script.script]);
 68 |   if (!script.script) {
 69 |     return <div>错误: {t('script_not_exist')}</div>;
 70 |   }
 71 |   return (
 72 |     <>
 73 |       <SearchItem
 74 |         script={script.script}
 75 |         action
 76 |         watch={watch}
 77 |         onWatch={(level) => {
 78 |           setWatch(level);
 79 |         }}
 80 |       ></SearchItem>
 81 |       <Card>
 82 |         <MarkdownView content={script.script.content || ''} id={'readme'} />
 83 |       </Card>
 84 |       <Card title={t('script_score')}>
 85 |         <Space className="w-full" direction="vertical">
 86 |           <ConfigProvider
 87 |             renderEmpty={() => (
 88 |               <Empty
 89 |                 description={
 90 |                   <Space direction="vertical">
 91 |                     <span>{t('no_scores_yet')}</span>
 92 |                     <Button type="link">
 93 |                       <Link to={'./comment'}>{t('go_to_score')}</Link>
 94 |                     </Button>
 95 |                   </Space>
 96 |                 }
 97 |               />
 98 |             )}
 99 |           >
100 |             <List
101 |               dataSource={scoreData}
102 |               renderItem={(item, index) => (
103 |                 <List.Item key={item.id} className="!block !px-0">
104 |                   <div className="flex flex-col gap-2">
105 |                     <div className="flex flex-row justify-between">
106 |                       <div className="flex flex-row items-center gap-2">
107 |                         <Link to={'/users/' + item.user_id} target="_blank">
108 |                           <Avatar src={item.avatar} />
109 |                         </Link>
110 |                         <div className="flex flex-col">
111 |                           <Link to={'/users/' + item.user_id} target="_blank">
112 |                             {item.username}
113 |                           </Link>
114 |                           <span className="text-xs text-gray-400">
115 |                             {formatDate(item.createtime)}
116 |                           </span>
117 |                         </div>
118 |                         <Rate value={item.score / 10} disabled allowHalf></Rate>
119 |                       </div>
120 |                       <ActionMenu
121 |                         uid={item.user_id}
122 |                         deleteLevel="super_moderator"
123 |                         allowSelfDelete={false}
124 |                         onDeleteClick={async () => {
125 |                           const resp = await DeleteScore(
126 |                             script.script!.id,
127 |                             item.id
128 |                           );
129 |                           if (resp.code == 0) {
130 |                             message.success(t('delete_success'));
131 |                             scoreData.splice(index, 1);
132 |                             setScoreData([...scoreData]);
133 |                           } else {
134 |                             message.error(resp.msg);
135 |                           }
136 |                         }}
137 |                       >
138 |                         <Button type="link">{t('action')}</Button>
139 |                       </ActionMenu>
140 |                     </div>
141 |                     <MarkdownView
142 |                       id={'score-' + item.id}
143 |                       content={item.message}
144 |                     ></MarkdownView>
145 |                   </div>
146 |                 </List.Item>
147 |               )}
148 |             />
149 |           </ConfigProvider>
150 |           {scoreData.length > 0 && (
151 |             <div className="w-full text-center">
152 |               <Button type="link">
153 |                 <Link to={'./comment'}>{t('view_more')}</Link>
154 |               </Button>
155 |             </div>
156 |           )}
157 |         </Space>
158 |       </Card>
159 |     </>
160 |   );
161 | }
162 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/issue.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "@remix-run/react";
2 | 
3 | export default function Issue() {
4 |   return <Outlet />;
5 | }
6 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/issue/create.tsx:
--------------------------------------------------------------------------------
  1 | import { LinksFunction } from '@remix-run/node';
  2 | import { useNavigate } from '@remix-run/react';
  3 | import type { InputRef } from 'antd';
  4 | import { message } from 'antd';
  5 | import { Button, Card, Input, Select, Space } from 'antd';
  6 | import { useContext, useRef, useState } from 'react';
  7 | import { useTranslation } from 'react-i18next';
  8 | import { useLocale } from 'remix-i18next';
  9 | import { ClientOnly } from 'remix-utils';
 10 | import IssueLabel from '~/components/IssueLabel';
 11 | import { markdownEditorLinks } from '~/components/MarkdownEditor';
 12 | import type { MarkdownEditorRef } from '~/components/MarkdownEditor/index.client';
 13 | import MarkdownEditor from '~/components/MarkdownEditor/index.client';
 14 | import { ScriptContext } from '~/context-manager';
 15 | import { SubmitIssue } from '~/services/scripts/issues/api';
 16 | 
 17 | export const links: LinksFunction = () => [...markdownEditorLinks()];
 18 | 
 19 | export default function Create() {
 20 |   const script = useContext(ScriptContext);
 21 |   const editor = useRef<MarkdownEditorRef>();
 22 |   const title = useRef<InputRef>(null);
 23 |   const [labels, setLabels] = useState<string[]>([]);
 24 |   const [loading, setLoading] = useState(false);
 25 |   const { t } = useTranslation();
 26 |   const locale = '/' + useLocale();
 27 | 
 28 |   const navigate = useNavigate();
 29 |   const onSubmit = async () => {
 30 |     setLoading(true);
 31 |     const resp = await SubmitIssue(script.script!.id, {
 32 |       title: title.current!.input!.value,
 33 |       content: editor.current!.editor!.getMarkdown(),
 34 |       labels: labels,
 35 |     });
 36 |     setLoading(false);
 37 |     if (resp.code === 0) {
 38 |       editor.current?.setMarkdown('');
 39 |       message.success(t('submit_success'));
 40 |       navigate({
 41 |         pathname:
 42 |           locale +
 43 |           '/script-show-page/' +
 44 |           script.script!.id +
 45 |           '/issue/' +
 46 |           resp.data.id +
 47 |           '/comment',
 48 |       });
 49 |     } else {
 50 |       message.error(resp.msg);
 51 |     }
 52 |   };
 53 |   return (
 54 |     <Card>
 55 |       <div className="flex flex-row gap-3">
 56 |         <div className="flex flex-col basis-3/4 gap-2">
 57 |           <Input placeholder={t('describe_content')} ref={title} />
 58 |           <ClientOnly fallback={<div></div>}>
 59 |             {() => (
 60 |               <MarkdownEditor
 61 |                 id="create-issue"
 62 |                 comment="issue"
 63 |                 linkId={script.script!.id}
 64 |                 ref={editor}
 65 |               />
 66 |             )}
 67 |           </ClientOnly>
 68 |           <Space className="justify-end">
 69 |             <Button type="primary" onClick={onSubmit}>
 70 |               {t('submit_feedback')}
 71 |             </Button>
 72 |           </Space>
 73 |         </div>
 74 |         <div className="flex flex-col basis-1/4">
 75 |           <Space direction="vertical">
 76 |             <span className="text-lg font-bold">{t('labels')}</span>
 77 |             <Select
 78 |               mode="multiple"
 79 |               showArrow
 80 |               tagRender={({ value, closable, onClose }) => {
 81 |                 const onPreventMouseDown = (event: any) => {
 82 |                   event.preventDefault();
 83 |                   event.stopPropagation();
 84 |                 };
 85 |                 return (
 86 |                   <IssueLabel
 87 |                     label={value}
 88 |                     className="anticon-middle"
 89 |                     onMouseDown={onPreventMouseDown}
 90 |                     closable={closable}
 91 |                     onClose={onClose}
 92 |                     style={{ marginRight: 3 }}
 93 |                   />
 94 |                 );
 95 |               }}
 96 |               style={{ width: '100%' }}
 97 |               options={[
 98 |                 { label: t('feature'), value: 'feature' },
 99 |                 { label: t('question'), value: 'question' },
100 |                 { label: t('bug'), value: 'bug' },
101 |               ]}
102 |               loading={loading}
103 |               onChange={(value) => setLabels(value)}
104 |             />
105 |           </Space>
106 |         </div>
107 |       </div>
108 |     </Card>
109 |   );
110 | }
111 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/issue/index.tsx:
--------------------------------------------------------------------------------
  1 | import { CheckCircleTwoTone, InfoCircleTwoTone } from '@ant-design/icons';
  2 | import type { LoaderFunction } from '@remix-run/node';
  3 | import { json } from '@remix-run/node';
  4 | import { Link, useLoaderData, useLocation } from '@remix-run/react';
  5 | import { Button, Card, Space, Table, Tag, Tooltip } from 'antd';
  6 | import Column from 'antd/lib/table/Column';
  7 | import { formatDate } from '~/utils/utils';
  8 | import { IssueList } from '~/services/scripts/issues/api';
  9 | import type {
 10 |   Issue as IssueItem,
 11 |   IssueStatusType,
 12 | } from '~/services/scripts/issues/types';
 13 | import { useContext } from 'react';
 14 | import { UserContext } from '~/context-manager';
 15 | import { replaceSearchParam } from '~/services/utils';
 16 | import IssueLabel from '~/components/IssueLabel';
 17 | import { useTranslation } from 'react-i18next';
 18 | 
 19 | type LoaderData = {
 20 |   list: IssueItem[];
 21 |   total: number;
 22 |   page: number;
 23 | };
 24 | 
 25 | export const loader: LoaderFunction = async ({ params, request }) => {
 26 |   const url = new URL(request.url);
 27 |   const page = parseInt(url.searchParams.get('page') || '1');
 28 |   const data = await IssueList(
 29 |     parseInt(params.id as string),
 30 |     {
 31 |       page: page,
 32 |     },
 33 |     request
 34 |   );
 35 |   return json({
 36 |     list: data.data.list,
 37 |     total: data.data.total,
 38 |     page: page,
 39 |   } as LoaderData);
 40 | };
 41 | 
 42 | export default function Issue() {
 43 |   const data = useLoaderData<LoaderData>();
 44 |   const user = useContext(UserContext);
 45 |   const location = useLocation();
 46 |   const { t } = useTranslation();
 47 | 
 48 |   return (
 49 |     <Card>
 50 |       <Space className="mb-2">
 51 |         <Tooltip
 52 |           title={
 53 |             user.user
 54 |               ? t('create_feedback_description')
 55 |               : t('login_required_message')
 56 |           }
 57 |         >
 58 |           <Button type="primary" disabled={user.user ? false : true}>
 59 |             <Link to={'./create'}>{t('create_feedback')}</Link>
 60 |           </Button>
 61 |         </Tooltip>
 62 |       </Space>
 63 |       <Table
 64 |         rowKey={(record) => record.id}
 65 |         dataSource={data.list}
 66 |         pagination={{
 67 |           hideOnSinglePage: true,
 68 |           showSizeChanger: false,
 69 |           pageSize: 20,
 70 |           total: data.total,
 71 |           current: data.page,
 72 |           itemRender: (current, type, originalElement) => {
 73 |             if (type !== 'page') {
 74 |               return (
 75 |                 <Link
 76 |                   to={{
 77 |                     search: replaceSearchParam(location.search, {
 78 |                       page: current,
 79 |                     }),
 80 |                   }}
 81 |                 >
 82 |                   {originalElement}
 83 |                 </Link>
 84 |               );
 85 |             }
 86 |             return (
 87 |               <Link
 88 |                 to={{
 89 |                   search: replaceSearchParam(location.search, {
 90 |                     page: current,
 91 |                   }),
 92 |                 }}
 93 |               >
 94 |                 {current}
 95 |               </Link>
 96 |             );
 97 |           },
 98 |         }}
 99 |         size="small"
100 |       >
101 |         <Column
102 |           title={t('title')}
103 |           dataIndex="title"
104 |           key="title"
105 |           render={(title, record: IssueItem) => {
106 |             return (
107 |               <div className="flex flex-col">
108 |                 <Link
109 |                   to={'./' + record.id + '/comment'}
110 |                   className="text-base text-gray-500"
111 |                 >
112 |                   {title}
113 |                 </Link>
114 |                 <span className="text-xs">
115 |                   {formatDate(record.createtime)} {record.username}
116 |                 </span>
117 |               </div>
118 |             );
119 |           }}
120 |         />
121 |         <Column
122 |           title={t('labels')}
123 |           dataIndex="labels"
124 |           key="labels"
125 |           width={200}
126 |           render={(labels: string[]) => {
127 |             return (
128 |               <div className="flex flex-row">
129 |                 {labels &&
130 |                   labels.map((label) => (
131 |                     <IssueLabel key={label} label={label} />
132 |                   ))}
133 |               </div>
134 |             );
135 |           }}
136 |         />
137 |         <Column
138 |           title={t('status')}
139 |           dataIndex="status"
140 |           key="status"
141 |           width={120}
142 |           render={(status: IssueStatusType) => {
143 |             switch (status) {
144 |               case 1:
145 |                 return (
146 |                   <Tag icon={<InfoCircleTwoTone />} color="blue">
147 |                     {t('pending')}
148 |                   </Tag>
149 |                 );
150 |               default:
151 |                 return (
152 |                   <Tag
153 |                     icon={<CheckCircleTwoTone twoToneColor="#52c41a" />}
154 |                     color="green"
155 |                   >
156 |                     {t('resolved')}
157 |                   </Tag>
158 |                 );
159 |             }
160 |           }}
161 |         />
162 |       </Table>
163 |     </Card>
164 |   );
165 | }
166 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/permission.tsx:
--------------------------------------------------------------------------------
 1 | import { ApartmentOutlined, UserOutlined } from '@ant-design/icons';
 2 | import { LoaderFunction } from '@remix-run/node';
 3 | import { Outlet, useLocation } from '@remix-run/react';
 4 | import { Button, Card, Menu, MenuProps } from 'antd';
 5 | import { useEffect, useState } from 'react';
 6 | import { useTranslation } from 'react-i18next';
 7 | import { useMediaQueryState } from '~/utils/utils';
 8 | 
 9 | 
10 | 
11 | export default function Permission() {
12 |   const [activeMenu, setActiveMenu] = useState<string>('');
13 |   const { t } = useTranslation();
14 |   const location = useLocation();
15 |   const menuList = [
16 |     {
17 |       label: t('access_role_manage'),
18 |       key: 'accessRole',
19 |       icon: <ApartmentOutlined />,
20 |     },
21 |     {
22 |       label: t('user_group_manage'),
23 |       key: 'userGroup',
24 |       icon: <UserOutlined />,
25 |     },
26 |   ];
27 |   const menuClick: MenuProps['onClick'] = (event) => {
28 |     setActiveMenu(event.key);
29 |   };
30 |   const isMobile = useMediaQueryState({ query: '(max-width: 850px)' });
31 |   useEffect(() => {
32 |     if (menuList[0] != null && menuList[0].key !== undefined) {
33 |       setActiveMenu(menuList[0].key as string);
34 |     }
35 |   }, []);
36 |   return (
37 |     <Card>
38 |       <div className={(isMobile ? 'flex-col flex' : 'flex') + ' min-h-[380px]'}>
39 |         <Menu
40 |           className="shrink-0"
41 |           selectedKeys={[activeMenu]}
42 |           onClick={menuClick}
43 |           style={isMobile ? {} : { width: 180 }}
44 |           mode={isMobile ? 'horizontal' : 'vertical'}
45 |           items={menuList}
46 |         />
47 |       </div>
48 |       <Outlet />
49 |     </Card>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/permission/accessRole.tsx:
--------------------------------------------------------------------------------
  1 | import { useTranslation } from 'react-i18next';
  2 | import {
  3 |   Avatar,
  4 |   Button,
  5 |   ConfigProvider,
  6 |   Empty,
  7 |   List,
  8 |   Modal,
  9 |   Select,
 10 | } from 'antd';
 11 | import { useEffect, useState } from 'react';
 12 | import {
 13 |   DeleteAccess,
 14 |   GetAccessRoleList,
 15 |   UpdateAccessRole,
 16 | } from '~/services/scripts/api';
 17 | import { Link } from '@remix-run/react';
 18 | import { useLocale } from 'remix-i18next';
 19 | import { ExclamationCircleOutlined } from '@ant-design/icons';
 20 | import { message } from 'antd';
 21 | import { timestampToDateObj } from '~/utils/utils';
 22 | import { UserModal } from './userModal';
 23 | 
 24 | export const AccessRole: React.FC<{ id: number }> = ({ id }) => {
 25 |   const { t } = useTranslation();
 26 |   const [openUserDialog, setopenUserDialog] = useState(false);
 27 |   const [total, setTotal] = useState(0);
 28 |   const [modal, contextHolder] = Modal.useModal();
 29 | 
 30 |   const [deleteLoading, setDeleteLoading] = useState(false);
 31 |   const locale = '/' + useLocale();
 32 |   const [list, setList] = useState<Array<any>>([]);
 33 |   const [page, setPage] = useState(1);
 34 |   const [listLoading, setListLoading] = useState(false);
 35 |   const getPageData = () => {
 36 |     setListLoading(true);
 37 |     GetAccessRoleList(id, page)
 38 |       .then((res) => {
 39 |         if (res.code === 0) {
 40 |           setList(res.data.list);
 41 |           setTotal(res.data.total);
 42 |         }
 43 |       })
 44 |       .finally(() => {
 45 |         setListLoading(false);
 46 |       });
 47 |   };
 48 |   useEffect(() => {
 49 |     getPageData();
 50 |   }, [page]);
 51 |   return (
 52 |     <div>
 53 |       <div className="flex justify-between items-center mb-2">
 54 |         <span className="text-lg">{t('access_role_manage')}</span>
 55 |         <Button
 56 |           onClick={() => setopenUserDialog(true)}
 57 |           type="primary"
 58 |           className="min-w-[100px]"
 59 |         >
 60 |           {t('add_user')}
 61 |         </Button>
 62 |       </div>
 63 |       <div>
 64 |         <ConfigProvider
 65 |           renderEmpty={() => <Empty description={t('no_access_role')} />}
 66 |         >
 67 |           <List
 68 |             loading={listLoading}
 69 |             dataSource={list}
 70 |             renderItem={(script, index) => (
 71 |               <div className="mb-3 flex">
 72 |                 <div className="flex grow">
 73 |                   <Avatar className="!mr-3" size="large" src={script.avatar}>
 74 |                     {script.avatar === '' && script.name?.length > 1
 75 |                       ? script.name[0]
 76 |                       : ''}
 77 |                   </Avatar>
 78 |                   <div>
 79 |                     <Link
 80 |                       className="text-sm"
 81 |                       to={locale + '/users/' + script.link_id}
 82 |                       target="_blank"
 83 |                     >
 84 |                       {script.name || script.username}
 85 |                     </Link>
 86 |                     <div>{script.updatetime}</div>
 87 |                   </div>
 88 |                 </div>
 89 |                 <div className="flex items-center">
 90 |                   {script.invite_status === 3 ? (
 91 |                     <div className="text-red-400 mr-5">{t('wait_confirm')}</div>
 92 |                   ) : (
 93 |                     <></>
 94 |                   )}
 95 | 
 96 |                   <div>
 97 |                     {script.expiretime !== 0
 98 |                       ? t(
 99 |                           'format_date',
100 |                           timestampToDateObj(script.expiretime)
101 |                         ) + t('expire')
102 |                       : t('no_expire')}
103 |                   </div>
104 |                   <Select
105 |                     className="min-w-[110px] !mx-2"
106 |                     value={script.role}
107 |                     onChange={async (roleName: 'visitor' | 'admin') => {
108 |                       const result = await UpdateAccessRole(id, script.id, {
109 |                         expiretime: script.expiretime,
110 |                         role: roleName,
111 |                       });
112 |                       if (result.code == 0) {
113 |                         setList([
114 |                           ...list.map((listItem) => {
115 |                             if (listItem.id !== script.id) {
116 |                               return {
117 |                                 ...listItem,
118 |                               };
119 |                             } else {
120 |                               return {
121 |                                 ...listItem,
122 |                                 role: roleName,
123 |                               };
124 |                             }
125 |                           }),
126 |                         ]);
127 |                         message.success(t('update_success'));
128 |                       } else {
129 |                         message.error(result.msg);
130 |                       }
131 |                     }}
132 |                     options={[
133 |                       { value: 'guest', label: t('visitor') },
134 |                       { value: 'manager', label: t('admin') },
135 |                     ]}
136 |                   />
137 |                   <Button
138 |                     loading={deleteLoading}
139 |                     onClick={async () => {
140 |                       modal.confirm({
141 |                         title: t('confirm_delete'),
142 |                         content: t('delete_confirm'),
143 |                         icon: <ExclamationCircleOutlined />,
144 |                         okText: t('confirm'),
145 |                         cancelText: t('cancel'),
146 |                         onOk: async () => {
147 |                           setDeleteLoading(true);
148 |                           const result = await DeleteAccess(id, script.id);
149 |                           setDeleteLoading(false);
150 |                           if (result.code == 0) {
151 |                             message.success(t('delete_success'));
152 |                             getPageData();
153 |                           } else {
154 |                             message.error(result.msg);
155 |                           }
156 |                         },
157 |                       });
158 |                     }}
159 |                     type="link"
160 |                     danger
161 |                   >
162 |                     {t('delete')}
163 |                   </Button>
164 |                 </div>
165 |               </div>
166 |             )}
167 |             pagination={{
168 |               onChange: (page) => {
169 |                 setPage(page);
170 |               },
171 |               showSizeChanger: false,
172 |               hideOnSinglePage: true,
173 |               defaultCurrent: page,
174 |               current: page,
175 |               pageSize: 20,
176 |               total: total,
177 |             }}
178 |           ></List>
179 |         </ConfigProvider>
180 |       </div>
181 |       {openUserDialog && (
182 |         <UserModal
183 |           status={openUserDialog}
184 |           onChange={(status) => {
185 |             if (status === false) {
186 |               getPageData();
187 |             }
188 |             setopenUserDialog(status);
189 |           }}
190 |           id={id}
191 |         ></UserModal>
192 |       )}
193 |       {contextHolder}
194 |     </div>
195 |   );
196 | };
197 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/permission/inviteModal.tsx:
--------------------------------------------------------------------------------
  1 | import { useTranslation } from 'react-i18next';
  2 | import {
  3 |   Button,
  4 |   Form,
  5 |   InputNumber,
  6 |   Modal,
  7 |   Select,
  8 |   Switch,
  9 |   message,
 10 |   theme,
 11 | } from 'antd';
 12 | import { useCallback, useEffect, useRef, useState } from 'react';
 13 | import { CreateInviteCode, GetInviteList } from '~/services/scripts/api';
 14 | import { CheckCircleTwoTone } from '@ant-design/icons';
 15 | import ClipboardJS from 'clipboard';
 16 | import TextArea from '~/components/TextArea';
 17 | 
 18 | export const InviteModal: React.FC<{
 19 |   status: boolean;
 20 |   onChange: (status: boolean) => void;
 21 |   id: number;
 22 |   groupID?: number;
 23 | }> = ({ status, onChange, id, groupID }) => {
 24 |   const { t } = useTranslation();
 25 |   const [openSuccessModal, setOpenSuccessModal] = useState(false);
 26 |   const [inviteCodeText, setInviteCodeText] = useState('');
 27 |   const codeTextRef = useRef('');
 28 |   codeTextRef.current = inviteCodeText;
 29 |   useEffect(() => {
 30 |     if (openSuccessModal === false) {
 31 |       setInviteCodeText('');
 32 |     }
 33 |   }, [openSuccessModal]);
 34 |   const handleOk = () => {
 35 |     form
 36 |       .validateFields()
 37 |       .then((values) => {
 38 |         CreateInviteCode(id, groupID, {
 39 |           audit: values.audit,
 40 |           count: values.count,
 41 |           days: values.days,
 42 |         }).then((resp) => {
 43 |           if (resp.code == 0) {
 44 |             message.success(t('submit_success'));
 45 |             const inviteBaseURL =
 46 |               window.location.origin + '/invite-confirm?code=';
 47 |             setInviteCodeText(
 48 |               resp.data.code
 49 |                 .map((code) => {
 50 |                   return inviteBaseURL + code;
 51 |                 })
 52 |                 .join('\n')
 53 |             );
 54 |             setOpenSuccessModal(true);
 55 |           } else {
 56 |             message.error(resp.msg);
 57 |           }
 58 |         });
 59 |       })
 60 |       .catch((err) => {});
 61 |   };
 62 |   const handleCancel = () => {
 63 |     onChange(false);
 64 |   };
 65 |   const [form] = Form.useForm();
 66 |   const { token } = theme.useToken();
 67 | 
 68 |   let clipboard: undefined | ClipboardJS = undefined;
 69 |   useEffect(() => {
 70 |     clipboard = new ClipboardJS('.copy-btn', {
 71 |       text: () => {
 72 |         return codeTextRef.current;
 73 |       },
 74 |     });
 75 | 
 76 |     clipboard.on('success', function (e: any) {
 77 |       message.success(t('copy_success'));
 78 |     });
 79 |     clipboard.on('error', function (e: any) {
 80 |       message.warning(t('copy_fail'));
 81 |     });
 82 |     return () => {
 83 |       clipboard?.destroy && clipboard.destroy();
 84 |     };
 85 |   }, []);
 86 | 
 87 |   return (
 88 |     <>
 89 |       <Modal
 90 |         title={t('create_invite_code')}
 91 |         open={status}
 92 |         onOk={handleOk}
 93 |         onCancel={handleCancel}
 94 |         cancelText={t('cancel')}
 95 |         okText={t('create')}
 96 |       >
 97 |         <div>
 98 |           <Form
 99 |             labelCol={{ span: 4 }}
100 |             layout="horizontal"
101 |             form={form}
102 |             initialValues={{ layout: 'horizontal' }}
103 |           >
104 |             <Form.Item label={t('create_number')} name="count" initialValue={1}>
105 |               <InputNumber className="!w-full" min={1} precision={0} />
106 |             </Form.Item>
107 |             <Form.Item label={t('expiry_date')} name="days" initialValue={0}>
108 |               <Select
109 |                 options={[
110 |                   { value: 1, label: 1 + t('days') },
111 |                   { value: 3, label: 3 + t('days') },
112 |                   { value: 7, label: 7 + t('days') },
113 |                   { value: 15, label: 15 + t('days') },
114 |                   { value: 0, label: t('no_limit') },
115 |                 ]}
116 |               />
117 |             </Form.Item>
118 |             <Form.Item
119 |               label={t('administrator_review')}
120 |               name="audit"
121 |               initialValue={false}
122 |               valuePropName="checked"
123 |             >
124 |               <Switch></Switch>
125 |             </Form.Item>
126 |           </Form>
127 |         </div>
128 |       </Modal>
129 |       <Modal
130 |         title={
131 |           <div className="flex items-center">
132 |             <CheckCircleTwoTone className="mr-1" twoToneColor="#52c41a" />
133 |             <span>{t('create_success')}</span>
134 |           </div>
135 |         }
136 |         onCancel={() => setOpenSuccessModal(false)}
137 |         style={{ top: 10 }}
138 |         open={openSuccessModal}
139 |         footer={[
140 |           <Button key="copy" className="copy-btn" type="primary">
141 |             {t('copy_link')}
142 |           </Button>,
143 |           <Button key="back" onClick={() => setOpenSuccessModal(false)}>
144 |             {t('disable')}
145 |           </Button>,
146 |         ]}
147 |       >
148 |         <div>
149 |           <div className="mb-3">{t('create_invite_list_as_follows')}:</div>
150 |           <TextArea
151 |             className="!bg-transparent"
152 |             value={inviteCodeText}
153 |             autoSize={{ minRows: 5, maxRows: 10 }}
154 |           />
155 |         </div>
156 |       </Modal>
157 |     </>
158 |   );
159 | };
160 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/statistic.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet, useLocation, useNavigate } from '@remix-run/react';
 2 | import { Card, Divider, Radio } from 'antd';
 3 | import { useState } from 'react';
 4 | import { useTranslation } from 'react-i18next';
 5 | 
 6 | export default function Statistic() {
 7 |   const location = useLocation();
 8 |   const [mode, setMode] = useState<'basic' | 'advanced'>(
 9 |     location.pathname.indexOf('advanced') === -1 ? 'basic' : 'advanced'
10 |   );
11 |   const navigate = useNavigate();
12 |   const { t } = useTranslation();
13 | 
14 |   return (
15 |     <Card>
16 |       <Radio.Group
17 |         value={mode}
18 |         onChange={(value) => {
19 |           setMode(value.target.value);
20 |         }}
21 |         className="w-full"
22 |         style={{
23 |           display: 'flex',
24 |           flexDirection: 'row',
25 |           justifyContent: 'center',
26 |         }}
27 |       >
28 |         <Radio.Button
29 |           value="basic"
30 |           onClick={() => {
31 |             // 跳转到基础统计页面
32 |             navigate('.');
33 |           }}
34 |           style={{
35 |             flex: 1,
36 |             textAlign: 'center',
37 |           }}
38 |         >
39 |           {t('basic_statistics')}
40 |         </Radio.Button>
41 |         <Radio.Button
42 |           value="advanced"
43 |           onClick={() => {
44 |             // 跳转到高级统计页面
45 |             navigate('./advanced');
46 |           }}
47 |           style={{
48 |             flex: 1,
49 |             textAlign: 'center',
50 |           }}
51 |         >
52 |           {t('advanced_statistics')}
53 |         </Radio.Button>
54 |       </Radio.Group>
55 |       <Divider />
56 |       <Outlet />
57 |     </Card>
58 |   );
59 | }
60 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/statistic/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Card, Divider } from 'antd';
  2 | import { useState, useEffect } from 'react';
  3 | import { Line } from '@ant-design/plots';
  4 | import type { LoaderFunction } from '@remix-run/node';
  5 | import { json } from '@remix-run/node';
  6 | import type { Statistics, StatisticsChart } from '~/services/scripts/types';
  7 | import { GetRealtime, GetStatistics } from '~/services/scripts/api';
  8 | import { useLoaderData } from '@remix-run/react';
  9 | import { useContext } from 'react';
 10 | import { ScriptContext } from '~/context-manager';
 11 | import { splitNumber } from '~/utils/utils';
 12 | import { useTranslation } from 'react-i18next';
 13 | 
 14 | const PvUv: React.FC<{
 15 |   title: string;
 16 |   uv: StatisticsChart;
 17 |   pv: StatisticsChart;
 18 | }> = ({ title, uv, pv }) => {
 19 |   const data = [{}];
 20 | 
 21 |   for (let i = 0; i < uv.x.length; i++) {
 22 |     data.push(
 23 |       {
 24 |         name: 'uv',
 25 |         date: uv.x[i],
 26 |         num: uv.y[i],
 27 |       },
 28 |       {
 29 |         name: 'pv',
 30 |         date: pv.x[i],
 31 |         num: pv.y[i],
 32 |       }
 33 |     );
 34 |   }
 35 | 
 36 |   const config = {
 37 |     data,
 38 |     xField: 'date',
 39 |     yField: 'num',
 40 |     seriesField: 'name',
 41 |   };
 42 | 
 43 |   return (
 44 |     <div className="flex flex-col items-center w-full">
 45 |       <span>{title}</span>
 46 |       <Line className="w-full" {...config} />
 47 |     </div>
 48 |   );
 49 | };
 50 | 
 51 | const RealtimeColumn: React.FC<{ scriptId: number }> = ({ scriptId }) => {
 52 |   const [chartData, setChartData] = useState([{}]);
 53 |   const { t } = useTranslation();
 54 | 
 55 |   useEffect(() => {
 56 |     const time = setInterval(async () => {
 57 |       const resp = await GetRealtime(scriptId);
 58 |       const data = resp.data;
 59 |       const chartData = [];
 60 |       for (let i = 0; i < data.download.x.length; i++) {
 61 |         chartData.push(
 62 |           {
 63 |             name: '安装',
 64 |             time: data.download.x[i],
 65 |             num: data.download.y[i],
 66 |           },
 67 |           {
 68 |             name: '更新',
 69 |             time: data.update.x[i],
 70 |             num: data.update.y[i],
 71 |           }
 72 |         );
 73 |       }
 74 |       setChartData(chartData);
 75 |     }, 2000);
 76 |     return () => {
 77 |       clearInterval(time);
 78 |     };
 79 |   });
 80 | 
 81 |   const config = {
 82 |     data: chartData,
 83 |     xField: 'time',
 84 |     yField: 'num',
 85 |     seriesField: 'name',
 86 |   };
 87 | 
 88 |   return (
 89 |     <div className="flex flex-col items-center w-full">
 90 |       <span>{t('realtime_update_download')}</span>
 91 |       <Line
 92 |         className="w-full"
 93 |         renderer="canvas"
 94 |         animation={false}
 95 |         {...config}
 96 |       />
 97 |     </div>
 98 |   );
 99 | };
100 | 
101 | export type LoaderData = {
102 |   data: Statistics;
103 | };
104 | 
105 | export const loader: LoaderFunction = async ({ params, request }) => {
106 |   const resp = await GetStatistics(parseInt(params.id as string), request);
107 |   if (resp.code != 0) {
108 |     throw new Response(resp.msg, {
109 |       status: 403,
110 |       statusText: 'Forbidden',
111 |     });
112 |   }
113 |   return json({ data: resp.data } as LoaderData);
114 | };
115 | 
116 | export default function Basic() {
117 |   const data = useLoaderData<LoaderData>();
118 |   const script = useContext(ScriptContext);
119 |   const { t } = useTranslation();
120 | 
121 |   return (
122 |     <>
123 |       <Card className="!p-0">
124 |         <Card.Grid hoverable={false} className="!w-full !p-2">
125 |           <div className="flex flex-row justify-between statistic">
126 |             <div className="flex flex-col border-r pr-4 gap-1">
127 |               <span></span>
128 |               <span>{t('today')}</span>
129 |               <span>{t('yesterday')}</span>
130 |               <span>{t('this_week')}</span>
131 |             </div>
132 |             <div className="flex flex-col border-r p-4">
133 |               <span>{t('page_views')}</span>
134 |               <span className="text-lg font-bold">
135 |                 {splitNumber(data.data.page_pv.today.toString())}
136 |               </span>
137 |               <span>{splitNumber(data.data.page_pv.yesterday.toString())}</span>
138 |               <span>{splitNumber(data.data.page_pv.week.toString())}</span>
139 |             </div>
140 |             <div className="flex flex-col border-r p-4">
141 |               <span>{t('visitors')}</span>
142 |               <span className="text-lg font-bold">
143 |                 {splitNumber(data.data.page_uv.today.toString())}
144 |               </span>
145 |               <span>{splitNumber(data.data.page_uv.yesterday.toString())}</span>
146 |               <span>{splitNumber(data.data.page_uv.week.toString())}</span>
147 |             </div>
148 |             <div className="flex flex-col border-r p-4">
149 |               <span>{t('installs')}</span>
150 |               <span className="text-lg font-bold">
151 |                 {splitNumber(data.data.download_uv.today.toString())}
152 |               </span>
153 |               <span>
154 |                 {splitNumber(data.data.download_uv.yesterday.toString())}
155 |               </span>
156 |               <span>{splitNumber(data.data.download_uv.week.toString())}</span>
157 |             </div>
158 |             <div className="flex flex-col border-r p-4">
159 |               <span>{t('updates')}</span>
160 |               <span className="text-lg font-bold">
161 |                 {splitNumber(data.data.update_uv.today.toString())}
162 |               </span>
163 |               <span>
164 |                 {splitNumber(data.data.update_uv.yesterday.toString())}
165 |               </span>
166 |               <span>{splitNumber(data.data.update_uv.week.toString())}</span>
167 |             </div>
168 |             {/* {user.user!.is_admin == 1 && (
169 |               <div className="flex flex-col p-4">
170 |                 <span>{t('platform_users')}</span>
171 |                 <span className="text-lg font-bold">
172 |                   {splitNumber(data.data.page['today-member'].toString())}
173 |                 </span>
174 |                 <span>
175 |                   {splitNumber(data.data.page['yesterday-member'].toString())}
176 |                 </span>
177 |                 <span>
178 |                   {splitNumber(data.data.page['week-member'].toString())}
179 |                 </span>
180 |               </div>
181 |             )} */}
182 |           </div>
183 |         </Card.Grid>
184 |       </Card>
185 |       <Divider />
186 |       <div>
187 |         <RealtimeColumn scriptId={script.script!.id} />
188 |       </div>
189 |       <Divider />
190 |       <div>
191 |         <PvUv
192 |           title={t('30_day_install_uv_pv')}
193 |           uv={data.data.uv_chart.download}
194 |           pv={data.data.pv_chart.download}
195 |         />
196 |       </div>
197 |       <Divider />
198 |       <div className="flex flex-row justify-between">
199 |         <PvUv
200 |           title={t('30_day_update_uv_pv')}
201 |           uv={data.data.uv_chart.update}
202 |           pv={data.data.pv_chart.update}
203 |         />
204 |       </div>
205 |       <Divider />
206 |       <div className="text-center">
207 |         <span>{t('data_disclaimer')}</span>
208 |       </div>
209 |     </>
210 |   );
211 | }
212 | 


--------------------------------------------------------------------------------
/app/routes/$lng/script-show-page/$id/update.tsx:
--------------------------------------------------------------------------------
 1 | import type { LinksFunction, LoaderFunction } from '@remix-run/node';
 2 | import { json } from '@remix-run/node';
 3 | import { useLoaderData, useNavigate } from '@remix-run/react';
 4 | import { Card, message } from 'antd';
 5 | import { getScript, UpdateCode } from '~/services/scripts/api';
 6 | import type { LoaderData } from '../$id';
 7 | import UpdateScript from '~/components/UpdateScript';
 8 | import { useTranslation } from 'react-i18next';
 9 | import { useLocale } from 'remix-i18next';
10 | import { markdownEditorLinks } from '~/components/MarkdownEditor';
11 | 
12 | export const links: LinksFunction = () => [...markdownEditorLinks()];
13 | 
14 | export const loader: LoaderFunction = async ({ params, request }) => {
15 |   const script = await getScript(parseInt(params.id as string), request, true);
16 |   return json({ script: script.data.data } as LoaderData, {
17 |     headers: script.headers as any,
18 |   });
19 | };
20 | 
21 | export default function Update() {
22 |   const data = useLoaderData<LoaderData>();
23 |   const navigate = useNavigate();
24 |   const { t } = useTranslation();
25 |   const locale = '/' + useLocale();
26 | 
27 |   return (
28 |     <Card>
29 |       <UpdateScript
30 |         script={data.script}
31 |         onSubmit={async (params) => {
32 |           let resp = await UpdateCode(data.script.id, params);
33 |           if (resp.code === 0) {
34 |             message.success(t('update_success'));
35 |             navigate({
36 |               pathname: locale + '/script-show-page/' + data.script.id,
37 |             });
38 |             return true;
39 |           }
40 |           message.error(resp.msg);
41 |           return false;
42 |         }}
43 |       ></UpdateScript>
44 |     </Card>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/app/routes/$lng/search.tsx:
--------------------------------------------------------------------------------
  1 | import { RiseOutlined, TagsOutlined } from '@ant-design/icons';
  2 | import type { LoaderFunction } from '@remix-run/node';
  3 | import { json } from '@remix-run/node';
  4 | import {
  5 |   Link,
  6 |   Outlet,
  7 |   useLoaderData,
  8 |   useNavigate,
  9 |   useSearchParams,
 10 | } from '@remix-run/react';
 11 | import {
 12 |   Avatar,
 13 |   Card,
 14 |   Collapse,
 15 |   ConfigProvider,
 16 |   Radio,
 17 |   Space,
 18 |   Tag,
 19 | } from 'antd';
 20 | import { useTranslation } from 'react-i18next';
 21 | import { useLocale } from 'remix-i18next';
 22 | import i18n from '~/i18n';
 23 | import { lastScoreScript, search } from '~/services/scripts/api';
 24 | import type { Script } from '~/services/scripts/types';
 25 | import { replaceSearchParam } from '~/services/utils';
 26 | import { scriptName } from '~/utils/utils';
 27 | 
 28 | // 加载热门脚本与分类等不希望重新加载的数据
 29 | export const unstable_shouldReload = () => false;
 30 | 
 31 | interface loaderResponse {
 32 |   rank: {
 33 |     score: Script[];
 34 |     update: Script[];
 35 |   };
 36 | }
 37 | 
 38 | // 脚本列表使用嵌套路由实现
 39 | export const loader: LoaderFunction = async ({ request }) => {
 40 |   const score = await lastScoreScript();
 41 |   const update = await search({
 42 |     sort: 'updatetime',
 43 |     size: 10,
 44 |   });
 45 |   return json({
 46 |     rank: {
 47 |       score: score.data.list,
 48 |       update: update.data.list,
 49 |     },
 50 |   });
 51 | };
 52 | 
 53 | const rankColor = [
 54 |   '#f50',
 55 |   '#f50',
 56 |   '#87d068',
 57 |   '#87d068',
 58 |   '#b379dd',
 59 |   '#b379dd',
 60 |   '#2db7f5',
 61 |   '#2db7f5',
 62 |   '#dc7884',
 63 |   '#dc7884',
 64 | ];
 65 | 
 66 | const RankList: React.FC<{ list: Script[] }> = ({ list }) => {
 67 |   const locale = useLocale();
 68 |   return (
 69 |     <div className="flex flex-col gap-[2px]">
 70 |       {list.map((item, index) => (
 71 |         <div key={index} className="my-[2px]">
 72 |           <Link
 73 |             to={'/' + locale + '/script-show-page/' + item.id}
 74 |             target="_blank"
 75 |             className="text-sm !block !truncate !text-black dark:!text-white"
 76 |           >
 77 |             {item.script.meta_json['icon'] ? (
 78 |               <img
 79 |                 style={{
 80 |                   display: 'inline-block',
 81 |                   width: 24,
 82 |                   height: 24,
 83 |                   borderRadius: '2px',
 84 |                 }}
 85 |                 src={item.script.meta_json['icon'][0]}
 86 |               />
 87 |             ) : (
 88 |               <Tag
 89 |                 className="!m-0"
 90 |                 color={rankColor[index]}
 91 |                 style={index === 9 ? { padding: '0 3px' } : {}}
 92 |               >
 93 |                 {index + 1}
 94 |               </Tag>
 95 |             )}
 96 |             <span className="ml-1">{scriptName(item)}</span>
 97 |           </Link>
 98 |         </div>
 99 |       ))}
100 |     </div>
101 |   );
102 | };
103 | 
104 | export default function Search() {
105 |   const loader = useLoaderData<loaderResponse>();
106 |   const params = useSearchParams();
107 |   const sort = params[0].get('sort') || 'today_download';
108 |   const script_type = params[0].get('script_type') || '';
109 |   const navigate = useNavigate();
110 |   const { t } = useTranslation();
111 | 
112 |   return (
113 |     <>
114 |       <div className="flex flex-row gap-3">
115 |         <div className="flex flex-col !gap-3 basis-full min-[900px]:basis-3/4">
116 |           <Card>
117 |             <div className="flex flex-col !gap-3">
118 |               <div>
119 |                 <Space>
120 |                   <TagsOutlined />
121 |                   <span>{t('category')}</span>
122 |                   <Radio.Group
123 |                     defaultValue={script_type}
124 |                     size="small"
125 |                     onChange={(val) => {
126 |                       let search = replaceSearchParam(location.search, {
127 |                         script_type: val.target.value,
128 |                       });
129 |                       navigate({ search }, { replace: true });
130 |                     }}
131 |                   >
132 |                     <Radio.Button value="">{t('all')}</Radio.Button>
133 |                     <Radio.Button value="1">{t('user_script')}</Radio.Button>
134 |                     <Radio.Button value="2">{t('library')}</Radio.Button>
135 |                     <Radio.Button value="3">
136 |                       {t('background_script')}
137 |                     </Radio.Button>
138 |                     <Radio.Button value="4">
139 |                       {t('scheduled_script')}
140 |                     </Radio.Button>
141 |                   </Radio.Group>
142 |                 </Space>
143 |               </div>
144 |               <div>
145 |                 <Space>
146 |                   <RiseOutlined />
147 |                   <span>{t('sort')}</span>
148 |                   <Radio.Group
149 |                     defaultValue={sort}
150 |                     size="small"
151 |                     onChange={(val) => {
152 |                       let search = replaceSearchParam(location.search, {
153 |                         sort: val.target.value,
154 |                       });
155 |                       navigate({ search }, { replace: true });
156 |                     }}
157 |                   >
158 |                     <Radio.Button value="today_download">
159 |                       {t('daily_install')}
160 |                     </Radio.Button>
161 |                     <Radio.Button value="total_download">
162 |                       {t('total_install')}
163 |                     </Radio.Button>
164 |                     <Radio.Button value="score">{t('rating')}</Radio.Button>
165 |                     <Radio.Button value="createtime">
166 |                       {t('latest_release')}
167 |                     </Radio.Button>
168 |                     <Radio.Button value="updatetime">
169 |                       {t('recent_update')}
170 |                     </Radio.Button>
171 |                   </Radio.Group>
172 |                 </Space>
173 |               </div>
174 |             </div>
175 |           </Card>
176 |           <Outlet />
177 |         </div>
178 |         <div className="flex-col gap-3 hidden basis-1/4 min-[900px]:flex overflow-hidden">
179 |           <Card>
180 |             <Card.Meta
181 |               title={
182 |                 <div className="flex flex-row justify-between items-center">
183 |                   <span>{t('learn_scripts')}</span>
184 |                   <span className="text-xs">
185 |                     <a
186 |                       href="https://bbs.tampermonkey.net.cn/forum-75-1.html"
187 |                       className="text-gray-400"
188 |                       target="_blank"
189 |                     >
190 |                       {t('suggestions_complaints_reports')}
191 |                     </a>
192 |                   </span>
193 |                 </div>
194 |               }
195 |               description={
196 |                 <span
197 |                   className="text-gray-400"
198 |                   dangerouslySetInnerHTML={{
199 |                     __html: t('learn_scripts_slogan'),
200 |                   }}
201 |                 ></span>
202 |               }
203 |             ></Card.Meta>
204 |           </Card>
205 |           <ConfigProvider
206 |             theme={{
207 |               components: {
208 |                 Collapse: {
209 |                   contentPadding: '6px 6px',
210 |                 },
211 |               },
212 |             }}
213 |           >
214 |             <Collapse
215 |               defaultActiveKey={['1', '2', '3']}
216 |               className="rank-collapse"
217 |             >
218 |               <Collapse.Panel header={t('latest_scripts')} key="3">
219 |                 <RankList list={loader.rank.update} />
220 |               </Collapse.Panel>
221 |               <Collapse.Panel header={t('latest_ratings')} key="2">
222 |                 <RankList list={loader.rank.score} />
223 |               </Collapse.Panel>
224 |             </Collapse>
225 |           </ConfigProvider>
226 |         </div>
227 |       </div>
228 |     </>
229 |   );
230 | }
231 | 


--------------------------------------------------------------------------------
/app/routes/$lng/search/index.tsx:
--------------------------------------------------------------------------------
 1 | import type { LoaderFunction } from '@remix-run/node';
 2 | import { json } from '@remix-run/node';
 3 | import type { V2_MetaFunction } from '@remix-run/react';
 4 | import { useLoaderData } from '@remix-run/react';
 5 | import SearchList from '~/components/Search/SearchList';
 6 | import i18next from '~/i18next.server';
 7 | import type { ScriptType, SortType } from '~/services/scripts/api';
 8 | import { search } from '~/services/scripts/api';
 9 | import type { SearchResponse } from '~/services/scripts/types';
10 | import { getLocale } from '~/utils/i18n';
11 | 
12 | export type LoaderData = {
13 |   resp: SearchResponse;
14 |   page: number;
15 |   title: string;
16 | };
17 | 
18 | export const meta: V2_MetaFunction = ({ data }: { data: LoaderData }) => {
19 |   return [
20 |     {
21 |       title: data.title,
22 |     }, {
23 |       name: "viewport",
24 |       content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
25 |     },
26 |   ];
27 | };
28 | 
29 | // 脚本列表使用嵌套路由实现
30 | export const loader: LoaderFunction = async ({ request }) => {
31 |   const url = new URL(request.url);
32 |   const page = parseInt(url.searchParams.get('page') || '1');
33 |   const resp = await search(
34 |     {
35 |       page: page,
36 |       keyword: url.searchParams.get('keyword') || '',
37 |       sort: (url.searchParams.get('sort') as SortType) || 'today_download',
38 |       script_type: (url.searchParams.get('script_type') as ScriptType) || '',
39 |       domain: url.searchParams.get('domain') || '',
40 |     },
41 |     request
42 |   );
43 |   const t = await i18next.getFixedT(getLocale(request, 'en') ?? 'en');
44 |   return json({
45 |     resp: resp,
46 |     title: t('userscript_list') + ' - ScriptCat',
47 |     page: page,
48 |   } as LoaderData);
49 | };
50 | 
51 | export default function Index() {
52 |   const loader = useLoaderData<LoaderData>();
53 | 
54 |   return (
55 |     <>
56 |       <SearchList
57 |         list={loader.resp.data.list}
58 |         total={loader.resp.data.total}
59 |         page={loader.page}
60 |       />
61 |     </>
62 |   );
63 | }
64 | 


--------------------------------------------------------------------------------
/app/routes/$lng/sitemap.tsx:
--------------------------------------------------------------------------------
  1 | import type { LoaderFunction } from '@remix-run/node';
  2 | import { search } from '~/services/scripts/api';
  3 | import { json } from '@remix-run/node';
  4 | import { useLoaderData, useLocation } from '@remix-run/react';
  5 | import type { SearchResponse } from '~/services/scripts/types';
  6 | import { useTranslation } from 'react-i18next';
  7 | import { useLocale } from 'remix-i18next';
  8 | import { Card, theme } from 'antd';
  9 | import type { Script } from '~/services/scripts/types';
 10 | import { Flex } from 'antd';
 11 | import { lngMap } from '~/utils/i18n';
 12 | export type LoaderData = {
 13 |   resp: SearchResponse;
 14 | };
 15 | // 搜索结果列表
 16 | const SitemapList: React.FC<{
 17 |   list: Script[];
 18 | }> = (props) => {
 19 |   const { token } = theme.useToken();
 20 |   const locale = '/' + useLocale();
 21 |   return (
 22 |     <>
 23 |       <Flex className="-mt-3 -ml-3" wrap="wrap">
 24 |         {props.list.map((item) => (
 25 |           <div
 26 |             className="basis-1/1 xl:basis-1/4 lg:basis-1/3 md:basis-1/2 overflow-hidden truncate pt-3 pl-3"
 27 |             style={{ color: token.colorLink }}
 28 |             key={item.id}
 29 |           >
 30 |             <a href={locale + '/script-show-page/' + item.id}>{item.name}</a>
 31 |           </div>
 32 |         ))}
 33 |       </Flex>
 34 |     </>
 35 |   );
 36 | };
 37 | 
 38 | const getAllLanguageList = function () {
 39 |   let localeList = [];
 40 |   for (const [, lng] of Object.entries(lngMap)) {
 41 |     for (const [key, value] of Object.entries(lng)) {
 42 |       if (!value.hide) {
 43 |         localeList.push({
 44 |           key: key,
 45 |           ...value,
 46 |         });
 47 |       }
 48 |     }
 49 |   }
 50 |   return localeList;
 51 | };
 52 | 
 53 | const LanguageList: React.FC<{}> = () => {
 54 |   const location = useLocation();
 55 |   const uLocale = '/' + useLocale();
 56 |   const languageList = getAllLanguageList().map((item) => {
 57 |     return {
 58 |       ...item,
 59 |       url: location.pathname.replace(uLocale, '/' + item.key),
 60 |     };
 61 |   });
 62 |   return (
 63 |     <>
 64 |       <Flex className="-mt-3 -ml-3" wrap="wrap">
 65 |         {languageList.map((languageObj) => (
 66 |           <div
 67 |             className="basis-1/4 overflow-hidden truncate pt-3 pl-3"
 68 |             key={languageObj.key}
 69 |           >
 70 |             <a href={languageObj.url}>
 71 |               {languageObj.name + '(' + languageObj.key + ')'}
 72 |             </a>
 73 |           </div>
 74 |         ))}
 75 |       </Flex>
 76 |     </>
 77 |   );
 78 | };
 79 | 
 80 | // 脚本列表使用嵌套路由实现
 81 | export const loader: LoaderFunction = async ({ request }) => {
 82 |   const resp = await search(
 83 |     {
 84 |       page: 1,
 85 |       keyword: '',
 86 |       size: 100,
 87 |       sort: 'today_download',
 88 |       script_type: '',
 89 |       domain: '',
 90 |     },
 91 |     request
 92 |   );
 93 |   return json({
 94 |     resp: resp,
 95 |   } as LoaderData);
 96 | };
 97 | 
 98 | export default function Sitemap() {
 99 |   const loader = useLoaderData<LoaderData>();
100 |   const { t } = useTranslation();
101 |   return (
102 |     <>
103 |       <Card className='!mb-5' title={t('language_title')}>
104 |         <div>
105 |           <LanguageList></LanguageList>
106 |         </div>
107 |       </Card>
108 |       <Card title={t('sitemap_title')}>
109 |         <div>
110 |           <SitemapList list={loader.resp.data.list}></SitemapList>
111 |         </div>
112 |       </Card>
113 |     </>
114 |   );
115 | }
116 | 


--------------------------------------------------------------------------------
/app/routes/$lng/users.notify.tsx:
--------------------------------------------------------------------------------
  1 | import type { LoaderFunction } from '@remix-run/node';
  2 | import { json } from '@remix-run/node';
  3 | import type { V2_MetaFunction } from '@remix-run/react';
  4 | import { useLoaderData } from '@remix-run/react';
  5 | import { Card, Checkbox, message, Space } from 'antd';
  6 | import { useState } from 'react';
  7 | import { useTranslation } from 'react-i18next';
  8 | import i18next from '~/i18next.server';
  9 | import { SetUsetNotify, UserConfig } from '~/services/users/api';
 10 | import type { UserConfig as UserConfigItem } from '~/services/users/types';
 11 | import { getLocale } from '~/utils/i18n';
 12 | 
 13 | export const meta: V2_MetaFunction = ({ data }: { data: LoaderData }) => {
 14 |   return [{ title: data.title     }, {
 15 |     name: "viewport",
 16 |     content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 17 |   },];
 18 | };
 19 | 
 20 | export type LoaderData = {
 21 |   config: UserConfigItem;
 22 |   title: string;
 23 | };
 24 | 
 25 | export const loader: LoaderFunction = async ({ request }) => {
 26 |   const lng = getLocale(request, 'en')!;
 27 |   let t = await i18next.getFixedT(lng);
 28 |   const resp = await UserConfig(request);
 29 |   if (resp.code != 0) {
 30 |     throw new Response(t('no_permission_access'), {
 31 |       status: 403,
 32 |       statusText: 'Forbidden',
 33 |     });
 34 |   }
 35 |   return json({
 36 |     config: resp.data,
 37 |     title: t('user_notification_management') + ' - ScriptCat',
 38 |   } as LoaderData);
 39 | };
 40 | 
 41 | export default function Notify() {
 42 |   const data = useLoaderData<LoaderData>();
 43 |   const [notifyChecked, setNotifyChecked] = useState(data.config.notify);
 44 |   const [loading, setLoading] = useState(false);
 45 |   const { t } = useTranslation();
 46 | 
 47 |   const notifyItem = [
 48 |     {
 49 |       key: 'at',
 50 |       description: t('at_me_send_email_notification'),
 51 |     },
 52 |     {
 53 |       key: 'create_script',
 54 |       description: t('notify_when_user_create_script'),
 55 |     },
 56 |     {
 57 |       key: 'score',
 58 |       description: t('notify_when_my_script_scored'),
 59 |     },
 60 |     {
 61 |       key: 'script_update',
 62 |       description: t('notify_when_followed_script_updated'),
 63 |     },
 64 |     {
 65 |       key: 'script_issue',
 66 |       description: t('notify_when_followed_script_created_feedback'),
 67 |     },
 68 |     {
 69 |       key: 'script_issue_comment',
 70 |       description: t('notify_when_followed_feedback_has_new_comment'),
 71 |     },
 72 |   ];
 73 | 
 74 |   return (
 75 |     <Card>
 76 |       <Space direction="vertical">
 77 |         <span>{t('system_will_send_email_when_events_occur')}</span>
 78 |         {notifyItem.map((item, index) => (
 79 |           <Checkbox
 80 |             key={item.key}
 81 |             onChange={async (checked) => {
 82 |               setLoading(true);
 83 |               notifyChecked[item.key] = checked.target.checked;
 84 |               let resp = await SetUsetNotify(notifyChecked);
 85 |               setLoading(false);
 86 |               if (resp.code == 0) {
 87 |                 setLoading(false);
 88 |                 setNotifyChecked(notifyChecked);
 89 |               } else {
 90 |                 message.error(resp.msg);
 91 |               }
 92 |             }}
 93 |             checked={notifyChecked[item.key]}
 94 |           >
 95 |             {item.description}
 96 |           </Checkbox>
 97 |         ))}
 98 |       </Space>
 99 |     </Card>
100 |   );
101 | }
102 | 


--------------------------------------------------------------------------------
/app/routes/$lng/users.tsx:
--------------------------------------------------------------------------------
  1 | import type { LoaderFunction } from '@remix-run/node';
  2 | import { json } from '@remix-run/node';
  3 | import type { V2_MetaFunction } from '@remix-run/react';
  4 | import { Outlet, useRouteError, useLoaderData, isRouteErrorResponse } from '@remix-run/react';
  5 | import { Avatar, Button, Card, Tag } from 'antd';
  6 | import { useContext } from 'react';
  7 | import { useTranslation } from 'react-i18next';
  8 | import { UserContext } from '~/context-manager';
  9 | import i18next from '~/i18next.server';
 10 | import { GetFollow, GetUserInfo } from '~/services/users/api';
 11 | import type { Follow, User } from '~/services/users/types';
 12 | import { getLocale } from '~/utils/i18n';
 13 | 
 14 | type LoaderData = {
 15 |   user: User;
 16 |   follow: Follow;
 17 |   title: string;
 18 | };
 19 | 
 20 | export const meta: V2_MetaFunction = ({ data }) => {
 21 |   const ret = [{ title: 'Unknown - ScriptCat' }, { description: 'Not Found' }, {
 22 |     name: "viewport",
 23 |     content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 24 |   }];
 25 |   if (data && data.user) ret[0] = { title: data.user.username + ' - ScriptCat' };
 26 |   return ret;
 27 | };
 28 | 
 29 | export function ErrorBoundary() {
 30 |   const caught = useRouteError();
 31 |   return <span className="text-2xl">{isRouteErrorResponse(caught) ? caught.data : 'Unknown Error'}</span>;
 32 | }
 33 | 
 34 | export const loader: LoaderFunction = async ({ params, request }) => {
 35 |   const lng = getLocale(request, 'en')!;
 36 |   let t = await i18next.getFixedT(lng);
 37 |   if (params.id) {
 38 |     const user = await GetUserInfo(parseInt(params.id as string));
 39 |     if (!user) {
 40 |       throw new Response(t('user_not_found'), {
 41 |         status: 404,
 42 |         statusText: 'Not Found',
 43 |       });
 44 |     }
 45 |     const follow = await GetFollow(parseInt(params.id as string));
 46 |     return json({
 47 |       user: user,
 48 |       follow: follow,
 49 |       title: t('user_not_found') + ' - ScriptCat',
 50 |     } as LoaderData);
 51 |   }
 52 |   throw new Response(t('user_not_found'), {
 53 |     status: 404,
 54 |     statusText: 'Not Found',
 55 |   });
 56 | };
 57 | 
 58 | export default function Users() {
 59 |   const currentUser = useContext(UserContext);
 60 |   const data = useLoaderData<LoaderData>();
 61 |   const user = data.user;
 62 |   const follow = data.follow;
 63 |   const { t } = useTranslation();
 64 |   return (
 65 |     <>
 66 |       <div>
 67 |         {currentUser.user && user.user_id === currentUser.user.user_id && (
 68 |           <Card title={<span>{t('personal_center')}</span>} className="!mb-3">
 69 |             <Button.Group>
 70 |               <Button type="primary" href="/post-script">
 71 |                 {t('user_publish_script')}
 72 |               </Button>
 73 |               <Button href="/users/webhook">{t('set_webhook')}</Button>
 74 |               <Button href="/users/notify">{t('notification_settings')}</Button>
 75 |             </Button.Group>
 76 |           </Card>
 77 |         )}
 78 |         <Card className="!mb-3">
 79 |           <div className="flex flex-col items-center">
 80 |             <div className="flex flex-row flex-wrap justify-center">
 81 |               <Avatar size={36} src={user.avatar} />
 82 |               <Button
 83 |                 type="link"
 84 |                 href={'https://bbs.tampermonkey.net.cn?' + user.user_id}
 85 |                 className="!text-3xl"
 86 |                 style={{
 87 |                   padding: 0,
 88 |                   border: 0,
 89 |                   margin: 0,
 90 |                 }}
 91 |               >
 92 |                 {user.username}
 93 |               </Button>
 94 |               <span className="text-3xl ml-2">{t('script_written')}</span>
 95 |             </div>
 96 |             {user.is_admin == 1 && <Tag color={'#f50'}>{t('admin')}</Tag>}
 97 |             {user.is_admin == 2 && (
 98 |               <Tag color={'#2db7f5'}>{t('super_moderator')}</Tag>
 99 |             )}
100 |             {user.is_admin == 3 && (
101 |               <Tag color={'#87d068'}>{t('moderator')}</Tag>
102 |             )}
103 |             <span>
104 |               {follow.following} {t('following')} {follow.followers}{' '}
105 |               {t('followers')}
106 |             </span>
107 |           </div>
108 |         </Card>
109 |         <Outlet />
110 |       </div>
111 |     </>
112 |   );
113 | }
114 | 


--------------------------------------------------------------------------------
/app/routes/$lng/users.webhook.tsx:
--------------------------------------------------------------------------------
  1 | import { ExclamationCircleOutlined } from '@ant-design/icons';
  2 | import type { LoaderFunction } from '@remix-run/node';
  3 | import { json } from '@remix-run/node';
  4 | import type { V2_MetaFunction } from '@remix-run/react';
  5 | import { useLoaderData } from '@remix-run/react';
  6 | import { Button, Card, message, Modal, Steps } from 'antd';
  7 | import { useContext } from 'react';
  8 | import { useState } from 'react';
  9 | import { useTranslation } from 'react-i18next';
 10 | import { UserContext } from '~/context-manager';
 11 | import i18next from '~/i18next.server';
 12 | import { GetWebhook, RefreshWebhookToken } from '~/services/users/api';
 13 | import type { Webhook as WebhookResp } from '~/services/users/types';
 14 | import { getLocale } from '~/utils/i18n';
 15 | 
 16 | export type LoaderData = {
 17 |   token: WebhookResp;
 18 |   title: string;
 19 | };
 20 | 
 21 | export const meta: V2_MetaFunction = ({ data }: { data: LoaderData }) => {
 22 |   return [{ title: data?.title ?? 'Unknown - ScriptCat' }, {
 23 |     name: "viewport",
 24 |     content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 25 |   },];
 26 | };
 27 | 
 28 | export const loader: LoaderFunction = async ({ request }) => {
 29 |   const resp = await GetWebhook(request);
 30 |   if (resp.code != 0) {
 31 |     throw new Response(resp.msg, {
 32 |       status: 403,
 33 |       statusText: 'Forbidden',
 34 |     });
 35 |   }
 36 |   const t = await i18next.getFixedT(getLocale(request, 'en') ?? 'en');
 37 |   return json({
 38 |     token: resp.data,
 39 |     title: t('webhook_management') + ' - ScriptCat',
 40 |   } as LoaderData);
 41 | };
 42 | 
 43 | export default function Webhook() {
 44 |   const data = useLoaderData<LoaderData>();
 45 |   const [modal, contextHolder] = Modal.useModal();
 46 |   const [current, setCurrent] = useState(0);
 47 |   const [token, setToken] = useState(data.token.token);
 48 |   const user = useContext(UserContext);
 49 |   const [loading, setLoading] = useState(false);
 50 |   const { t } = useTranslation();
 51 |   const onChange = (value: number) => {
 52 |     setCurrent(value);
 53 |   };
 54 |   return (
 55 |     <>
 56 |       <Card title={t('webhook_title')}>
 57 |         <span>{t('webhook_description')}</span>
 58 |         {contextHolder}
 59 |         <div className="flex flex-col">
 60 |           <span className="text-base">{t('webhook_binding_description')}</span>
 61 |           <span className="text-base">
 62 |             {t('webhook_push_event_description')}
 63 |           </span>
 64 |           <span className="text-base">
 65 |             {t('webhook_sync_script_description')}
 66 |           </span>
 67 |           <span className="text-base">
 68 |             {t('webhook_sync_script_manual_auto')}
 69 |           </span>
 70 |           <span className="text-base">
 71 |             {t('webhook_sync_type_before_first_push')}
 72 |           </span>
 73 |         </div>
 74 | 
 75 |         <Steps current={current} onChange={onChange} direction="vertical">
 76 |           <Steps.Step
 77 |             title={t('webhook_step1_title')}
 78 |             description={t('webhook_step1_description')}
 79 |           />
 80 |           <Steps.Step
 81 |             title={t('webhook_step2_title')}
 82 |             description={t('webhook_step2_description')}
 83 |           />
 84 |           <Steps.Step
 85 |             title={t('webhook_step3_title')}
 86 |             description={
 87 |               <div className="flex flex-col">
 88 |                 <span className="text-lg mt-2">
 89 |                   {t('webhook_step3_select_event')}
 90 |                 </span>
 91 |                 <span className="text-sm">
 92 |                   {t('webhook_step3_push_event_description')}
 93 |                 </span>
 94 |                 <span className="text-sm">
 95 |                   {t('webhook_step3_release_event_description')}
 96 |                 </span>
 97 |               </div>
 98 |             }
 99 |           />
100 |         </Steps>
101 |         <div className="flex flex-col">
102 |           <span className="text-lg">Url</span>
103 |           <span className="text-sm">
104 |             {user.env?.APP_API_URL}/webhook/{user.user?.user_id}
105 |           </span>
106 |           <span className="text-lg mt-2">Content-Type</span>
107 |           <span className="text-sm">application/json</span>
108 |           <span className="text-lg mt-2">Secret</span>
109 |           <span className="text-sm">{token}</span>
110 |         </div>
111 |         <Button
112 |           type="primary"
113 |           danger
114 |           className="!mt-2"
115 |           loading={loading}
116 |           onClick={() => {
117 |             modal.confirm({
118 |               title: t('webhook_refresh_secret_confirm_title'),
119 |               content: t('webhook_refresh_secret_confirm_content'),
120 |               icon: <ExclamationCircleOutlined />,
121 |               okText: t('confirm'),
122 |               cancelText: t('cancel'),
123 |               onOk: async () => {
124 |                 setLoading(true);
125 |                 const resp = await RefreshWebhookToken();
126 |                 setLoading(false);
127 |                 if (resp.code === 0) {
128 |                   setToken(resp.data.token);
129 |                   message.success(t('webhook_refresh_success_message'));
130 |                 } else {
131 |                   message.error(resp.msg);
132 |                 }
133 |               },
134 |             });
135 |           }}
136 |         >
137 |           {t('webhook_refresh_secret_button')}
138 |         </Button>
139 |       </Card>
140 |     </>
141 |   );
142 | }
143 | 


--------------------------------------------------------------------------------
/app/routes/$lng/users/$id.tsx:
--------------------------------------------------------------------------------
 1 | import type { LoaderFunction } from '@remix-run/node';
 2 | import { json } from '@remix-run/node';
 3 | import { useLoaderData } from '@remix-run/react';
 4 | import SearchList from '~/components/Search/SearchList';
 5 | import { search } from '~/services/scripts/api';
 6 | import type { Script } from '~/services/scripts/types';
 7 | 
 8 | type LoaderData = {
 9 |   script: {
10 |     list: Script[];
11 |     total: number;
12 |     page: number;
13 |   };
14 | };
15 | 
16 | export const loader: LoaderFunction = async ({ params, request }) => {
17 |   const url = new URL(request.url);
18 |   const page = parseInt(url.searchParams.get('page') || '1');
19 |   const resp = await search(
20 |     {
21 |       user_id: parseInt(params.id as string),
22 |       sort: 'today_download',
23 |       page: page,
24 |       size: 20,
25 |     },
26 |     request
27 |   );
28 |   return json({
29 |     script: {
30 |       list: resp.data.list,
31 |       total: resp.data.total,
32 |       page: page,
33 |     },
34 |   } as LoaderData);
35 | };
36 | 
37 | export default function User() {
38 |   const data = useLoaderData<LoaderData>();
39 |   return (
40 |     <>
41 |       <SearchList
42 |         list={data.script.list}
43 |         total={data.script.total}
44 |         page={data.script.page}
45 |       />
46 |     </>
47 |   );
48 | }
49 | 


--------------------------------------------------------------------------------
/app/routes/api.tsx:
--------------------------------------------------------------------------------
1 | export default function API() {
2 |   return <></>;
3 | }
4 | 


--------------------------------------------------------------------------------
/app/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { LoaderFunction } from '@remix-run/node';
2 | import { i18nRedirect } from '~/utils/i18n';
3 | 
4 | export const loader: LoaderFunction = i18nRedirect;
5 | 
6 | export default function Index() {
7 |   return <div>Redirect</div>;
8 | }
9 | 


--------------------------------------------------------------------------------
/app/services/http.ts:
--------------------------------------------------------------------------------
 1 | import { message } from 'antd';
 2 | import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
 3 | import axios from 'axios';
 4 | 
 5 | let instance: AxiosInstance = axios.create({
 6 |   baseURL: typeof window == 'undefined' ? process.env.APP_API_PROXY : '/v2/api',
 7 |   timeout: 300000,
 8 |   validateStatus: (status: number) => status < 500,
 9 | });
10 | 
11 | export interface Params {
12 |   [key: string]: any;
13 | }
14 | 
15 | export interface APIResponse {
16 |   [key: string]: any;
17 |   code: number;
18 |   msg: string;
19 | }
20 | 
21 | export interface APIDataResponse<T> extends APIResponse {
22 |   data: T;
23 | }
24 | 
25 | export interface APIListResponse<T> extends APIResponse {
26 |   data: {
27 |     list: T[];
28 |     total: number;
29 |   };
30 | }
31 | 
32 | // 初始化axios,会分两种情况,后端与前端,调用时的初始化参数不同
33 | export function InitAxios(config: AxiosRequestConfig) {
34 |   instance = axios.create(config);
35 |   instance.interceptors.response.use(
36 |     (res) => {
37 |       return res;
38 |     },
39 |     (err) => {
40 |       typeof window !== 'undefined' && message.error('网络错误！请求失败！');
41 |       return Promise.reject(err);
42 |     }
43 |   );
44 | }
45 | 
46 | export function request<T>(
47 |   config: AxiosRequestConfig
48 | ): Promise<AxiosResponse<T>> {
49 |   return instance.request(config);
50 | }
51 | 


--------------------------------------------------------------------------------
/app/services/scripts/issues/api.ts:
--------------------------------------------------------------------------------
  1 | import type { APIResponse } from '~/services/http';
  2 | import { request } from '~/services/http';
  3 | import { paramsToSearch } from '~/services/utils';
  4 | import type {
  5 |   IssueListResponse,
  6 |   IssueResponse,
  7 |   IssueCommentListResponse,
  8 |   IsWatchIssueResponse,
  9 |   WatchListResponse,
 10 | } from './types';
 11 | 
 12 | type IssueListParams = {
 13 |   page?: number;
 14 |   size?: number;
 15 |   keyword?: string;
 16 |   labels?: string;
 17 |   status?: string;
 18 | };
 19 | 
 20 | export async function IssueList(
 21 |   scriptId: number,
 22 |   params?: IssueListParams,
 23 |   req?: Request
 24 | ) {
 25 |   const resp = await request<IssueListResponse>({
 26 |     url: '/scripts/' + scriptId + '/issues?' + paramsToSearch(params),
 27 |     method: 'GET',
 28 |     headers: {
 29 |       Cookie: (req && req.headers.get('Cookie')) || '',
 30 |     },
 31 |   });
 32 |   return resp.data;
 33 | }
 34 | 
 35 | export async function GetIssue(
 36 |   scriptId: number,
 37 |   issueId: number,
 38 |   req?: Request
 39 | ) {
 40 |   const resp = await request<IssueResponse>({
 41 |     url: '/scripts/' + scriptId + '/issues/' + issueId,
 42 |     method: 'GET',
 43 |     headers: {
 44 |       Cookie: (req && req.headers.get('Cookie')) || '',
 45 |     },
 46 |   });
 47 |   if (resp.status === 404) {
 48 |     return null;
 49 |   }
 50 |   return resp.data.data;
 51 | }
 52 | 
 53 | export async function IssueCommentList(
 54 |   scriptId: number,
 55 |   issueId: number,
 56 |   req?: Request
 57 | ) {
 58 |   const resp = await request<IssueCommentListResponse>({
 59 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/comment',
 60 |     headers: {
 61 |       Cookie: (req && req.headers.get('Cookie')) || '',
 62 |     },
 63 |   });
 64 |   if (resp.status === 404) {
 65 |     return null;
 66 |   }
 67 |   return resp.data.data.list;
 68 | }
 69 | 
 70 | export async function PostComment(
 71 |   scriptId: number,
 72 |   issueId: number,
 73 |   content: string
 74 | ) {
 75 |   const resp = await request<APIResponse>({
 76 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/comment',
 77 |     method: 'POST',
 78 |     data: {
 79 |       content,
 80 |     },
 81 |   });
 82 |   return resp.data;
 83 | }
 84 | 
 85 | export async function UpdateComment(
 86 |   scriptId: number,
 87 |   issueId: number,
 88 |   commentId: number,
 89 |   content: string
 90 | ) {
 91 |   const resp = await request<APIResponse>({
 92 |     url:
 93 |       '/scripts/' + scriptId + '/issues/' + issueId + '/comment/' + commentId,
 94 |     method: 'PUT',
 95 |     data: {
 96 |       content,
 97 |     },
 98 |   });
 99 |   return resp.data;
100 | }
101 | 
102 | export async function CloseIssue(scriptId: number, issueId: number) {
103 |   const resp = await request<APIResponse>({
104 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/close',
105 |     method: 'PUT',
106 |   });
107 |   return resp.data;
108 | }
109 | 
110 | export async function OpenIssue(scriptId: number, issueId: number) {
111 |   const resp = await request<APIResponse>({
112 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/open',
113 |     method: 'PUT',
114 |   });
115 |   return resp.data;
116 | }
117 | 
118 | export async function UpdateLabels(
119 |   scriptId: number,
120 |   issueId: number,
121 |   labels: string[]
122 | ) {
123 |   const resp = await request<APIResponse>({
124 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/labels',
125 |     method: 'PUT',
126 |     data: {
127 |       labels,
128 |     },
129 |   });
130 |   return resp.data;
131 | }
132 | 
133 | export async function ListWatchIssue(scriptId: number, issueId: number) {
134 |   const resp = await request<WatchListResponse>({
135 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/watchs',
136 |     method: 'GET',
137 |   });
138 |   return resp.data;
139 | }
140 | 
141 | export async function IsWatchIssue(
142 |   scriptId: number,
143 |   issueId: number,
144 |   req?: Request
145 | ) {
146 |   const resp = await request<IsWatchIssueResponse>({
147 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/watch',
148 |     method: 'GET',
149 |     headers: {
150 |       Cookie: (req && req.headers.get('Cookie')) || '',
151 |     },
152 |   });
153 |   return resp.data.data;
154 | }
155 | 
156 | export async function WatchIssue(scriptId: number, issueId: number) {
157 |   const resp = await request<APIResponse>({
158 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/watch',
159 |     method: 'PUT',
160 |     data: { watch: true },
161 |   });
162 |   return resp.data;
163 | }
164 | 
165 | export async function UnwatchIssue(scriptId: number, issueId: number) {
166 |   const resp = await request<APIResponse>({
167 |     url: '/scripts/' + scriptId + '/issues/' + issueId + '/watch',
168 |     method: 'PUT',
169 |     data: { watch: false },
170 |   });
171 |   return resp.data;
172 | }
173 | 
174 | export async function SubmitIssue(
175 |   scriptId: number,
176 |   param: {
177 |     title: string;
178 |     content?: string;
179 |     labels?: string[];
180 |   }
181 | ) {
182 |   const resp = await request<IssueResponse>({
183 |     url: '/scripts/' + scriptId + '/issues',
184 |     method: 'POST',
185 |     data: param,
186 |   });
187 |   return resp.data;
188 | }
189 | 
190 | export async function DeleteIssue(scriptId: number, issueId: number) {
191 |   const resp = await request<APIResponse>({
192 |     url: '/scripts/' + scriptId + '/issues/' + issueId,
193 |     method: 'DELETE',
194 |   });
195 |   return resp.data;
196 | }
197 | 
198 | export async function DeleteIssueComment(
199 |   scriptId: number,
200 |   issueId: number,
201 |   commentId: number
202 | ) {
203 |   const resp = await request<APIResponse>({
204 |     url:
205 |       '/scripts/' + scriptId + '/issues/' + issueId + '/comment/' + commentId,
206 |     method: 'DELETE',
207 |   });
208 |   return resp.data;
209 | }
210 | 


--------------------------------------------------------------------------------
/app/services/scripts/issues/types.ts:
--------------------------------------------------------------------------------
 1 | import type { APIDataResponse, APIListResponse } from '~/services/http';
 2 | import type { User } from '~/services/users/types';
 3 | 
 4 | export type IssueStatusType = 1 | 3;
 5 | 
 6 | export type IssueListResponse = APIListResponse<Issue>;
 7 | 
 8 | export type IssueResponse = APIDataResponse<Issue>;
 9 | 
10 | export type WatchListResponse = APIListResponse<User>;
11 | 
12 | export type IsWatchIssueResponse = APIDataResponse<IsWatchIssue>;
13 | 
14 | export type IsWatchIssue = { watch: boolean };
15 | 
16 | export type Issue = {
17 |   id: number;
18 |   user_id: number;
19 |   avatar: string;
20 |   title: string;
21 |   content: string;
22 |   username: string;
23 |   labels: string[];
24 |   status: IssueStatusType; // 0:删除 1: 待解决 3: 已关闭
25 |   createtime: number;
26 |   updatetime: number;
27 | };
28 | 
29 | export type IssueCommentListResponse = APIListResponse<IssueComment>;
30 | 
31 | export type IssueComment = {
32 |   id: number;
33 |   user_id: number;
34 |   avatar: string;
35 |   username: string;
36 |   content: string;
37 |   type: 1 | 2 | 3 | 4 | 5 | 6; // 1:comment 2:change-title 3:change-label 4:open 5:close 6:delete
38 |   createtime: number;
39 | };
40 | 


--------------------------------------------------------------------------------
/app/services/scripts/types.ts:
--------------------------------------------------------------------------------
  1 | import type { GrayControlValue } from '~/components/GrayControl';
  2 | import type { APIDataResponse, APIListResponse } from '../http';
  3 | 
  4 | export type SearchResponse = APIListResponse<Script>;
  5 | 
  6 | export type ScriptListResponse = APIListResponse<Script>;
  7 | 
  8 | export type ScriptVersionListResponse = APIListResponse<ScriptCode>;
  9 | 
 10 | export type ScriptResponse = APIDataResponse<Script>;
 11 | 
 12 | export type ScriptSettingResponse = APIDataResponse<ScriptSetting>;
 13 | 
 14 | export type CreateScriptResponse = APIDataResponse<Script>;
 15 | 
 16 | export type ScriptStateResponse = APIDataResponse<{
 17 |   watch: WatchLevel;
 18 | }>;
 19 | 
 20 | export type StatisticsResponse = APIDataResponse<Statistics>;
 21 | 
 22 | export type PieChart = Array<{ key: string; value: number }>;
 23 | 
 24 | export type AdvStatistics = {
 25 |   statistics_key: string;
 26 |   whitelist?: string[];
 27 |   limit: { quota: number; usage: number };
 28 |   pv: Overview;
 29 |   uv: Overview;
 30 |   ip: Overview;
 31 |   use_time: Overview;
 32 |   new_old_user: PieChart;
 33 |   version: PieChart;
 34 |   system: PieChart;
 35 |   browser: PieChart;
 36 | };
 37 | 
 38 | export type AdvStatisticsResponse = APIDataResponse<AdvStatistics>;
 39 | 
 40 | export type AdvRealtimeChart = {
 41 |   chart: StatisticsChart;
 42 | };
 43 | 
 44 | export type AdvRealtimeChartResponse = APIDataResponse<AdvRealtimeChart>;
 45 | 
 46 | export type AdvRealtime = {};
 47 | 
 48 | export type AdvRealtimeResponse = APIDataResponse<AdvRealtime>;
 49 | 
 50 | export type RealtimeResponse = APIDataResponse<Realtime>;
 51 | 
 52 | export type OriginListResponse = APIListResponse<PieChart>;
 53 | 
 54 | export type VisitDomainResponse = APIListResponse<PieChart>;
 55 | 
 56 | export type VisitListItem = {
 57 |   visitor_id: string;
 58 |   operation_page: string;
 59 |   duration: number;
 60 |   visit_time: number;
 61 |   exit_time: number;
 62 | };
 63 | 
 64 | export type VisitListResponse = APIListResponse<VisitListItem>;
 65 | 
 66 | export type UpdateWhitelistResponse = APIDataResponse<{ whitelist: string[] }>;
 67 | 
 68 | export type Script = {
 69 |   id: number;
 70 |   user_id: number;
 71 |   post_id: number;
 72 |   avatar: string;
 73 |   username: string;
 74 |   name: string;
 75 |   description: string;
 76 |   script: ScriptCode;
 77 |   content?: string;
 78 |   score: number; // 总分
 79 |   score_num: number; // 评分人数
 80 |   today_install: number; // 今日安装
 81 |   total_install: number; // 总安装
 82 |   unwell: 1 | 2; // 不适内容
 83 |   public: 1 | 2 | 3; // 是否公开
 84 |   archive: 1 | 2; // 归档
 85 |   danger: 1 | 2; // 存在危险性
 86 |   type: 1 | 2 | 3; // 1: 普通脚本, 2: 订阅脚本, 3: 库
 87 |   enable_pre_release: 1 | 2; // 是否开启预发布
 88 |   category: Category[];
 89 |   createtime: number;
 90 |   updatetime: number;
 91 | };
 92 | 
 93 | export interface Category {
 94 |   id: number;
 95 |   name: string;
 96 |   num: number;
 97 | }
 98 | 
 99 | export type ScriptCode = {
100 |   id: number;
101 |   code: string;
102 |   changelog: string;
103 |   is_pre_release: number;
104 |   version: string;
105 |   meta_json: { [key: string]: string[] };
106 |   createtime: number;
107 |   updatetime: number;
108 | };
109 | 
110 | export type ScoreListResponse = APIListResponse<ScoreItem>;
111 | export type MyScoreResponse = APIDataResponse<ScoreItem>;
112 | 
113 | export type ScoreItem = {
114 |   id: number;
115 |   user_id: number;
116 |   username: string;
117 |   avatar: string;
118 |   score: number;
119 |   message: string;
120 |   createtime: number;
121 | };
122 | 
123 | export type ScriptSetting = {
124 |   sync_url: string;
125 |   content_url: string;
126 |   definition_url: string;
127 |   sync_mode: 1 | 2; // 1 自动 2 手动
128 |   gray_controls: GrayControlValue[];
129 |   enable_pre_release: 1 | 2; // 是否开启预发布
130 | };
131 | 
132 | export type WatchLevel = 0 | 1 | 2 | 3;
133 | 
134 | export type Overview = {
135 |   today: number;
136 |   yesterday: number;
137 |   week: number;
138 | };
139 | 
140 | export type Statistics = {
141 |   page_pv: Overview;
142 |   page_uv: Overview;
143 |   download_uv: Overview;
144 |   update_uv: Overview;
145 |   uv_chart: {
146 |     download: StatisticsChart;
147 |     update: StatisticsChart;
148 |   };
149 |   pv_chart: {
150 |     download: StatisticsChart;
151 |     update: StatisticsChart;
152 |   };
153 | };
154 | 
155 | export type StatisticsChart = {
156 |   x: string[];
157 |   y: number[];
158 | };
159 | 
160 | export type Realtime = {
161 |   download: StatisticsChart;
162 |   update: StatisticsChart;
163 | };
164 | 
165 | export interface ScriptGroup {
166 |   createtime: number;
167 |   description: string;
168 |   id: number;
169 |   member: Array<any>;
170 |   member_count: number;
171 |   name: string;
172 | }
173 | 
174 | type IsAny<T> = number extends T & number ? true : false;
175 | 
176 | 
177 | 
178 | 
179 | export interface sortItem<
180 |   T extends {
181 |     field: any;
182 |     order: any;
183 |   } = {
184 |     field: any;
185 |     order: any;
186 |   }
187 | > {
188 |   field: IsAny<T['field']> extends true ? string : T['field'];
189 |   order: IsAny<T['order']> extends true ? string : T['order'];
190 | }
191 | 
192 | 


--------------------------------------------------------------------------------
/app/services/users/api.ts:
--------------------------------------------------------------------------------
 1 | import type { APIResponse } from '../http';
 2 | import { request } from '../http';
 3 | import type {
 4 |   Follow,
 5 |   GetFollowResponse,
 6 |   LoginUserinfoResponse,
 7 |   User,
 8 |   UserConfigResponse,
 9 |   WebhookResponse,
10 | } from './types';
11 | 
12 | export async function getCurrentUserAndRefushToken(req: Request): Promise<{
13 |   user: User;
14 |   setCookie?: string[];
15 | }> {
16 |   const resp = await request<LoginUserinfoResponse>({
17 |     url: '/users',
18 |     method: 'GET',
19 |     headers: {
20 |       Cookie: (req && req.headers.get('Cookie')) || '',
21 |     },
22 |   });
23 |   return { user: resp.data.data, setCookie: resp.headers['set-cookie'] };
24 | }
25 | 
26 | export async function GetUserInfo(uid: number) {
27 |   const resp = await request<LoginUserinfoResponse>({
28 |     url: '/users/' + uid + '/info',
29 |     method: 'GET',
30 |   });
31 |   if (resp.status == 404) {
32 |     return null;
33 |   }
34 |   return resp.data.data;
35 | }
36 | 
37 | export async function GetFollow(uid: number) {
38 |   const resp = await request<GetFollowResponse>({
39 |     url: '/users/' + uid + '/follow',
40 |     method: 'GET',
41 |   });
42 |   return resp.data.data;
43 | }
44 | 
45 | export async function GetWebhook(req?: Request) {
46 |   const resp = await request<WebhookResponse>({
47 |     url: '/users/webhook',
48 |     method: 'GET',
49 |     headers: {
50 |       cookie: req?.headers.get('cookie') || '',
51 |     },
52 |   });
53 |   return resp.data;
54 | }
55 | 
56 | export async function RefreshWebhookToken() {
57 |   const resp = await request<WebhookResponse>({
58 |     url: '/users/webhook',
59 |     method: 'PUT',
60 |   });
61 |   return resp.data;
62 | }
63 | 
64 | export async function UserConfig(req: Request) {
65 |   const resp = await request<UserConfigResponse>({
66 |     url: '/users/config',
67 |     method: 'GET',
68 |     headers: {
69 |       cookie: req.headers.get('cookie') || '',
70 |     },
71 |   });
72 |   return resp.data;
73 | }
74 | 
75 | export async function SetUsetNotify(notify: { [key: string]: boolean }) {
76 |   const resp = await request<APIResponse>({
77 |     url: '/users/config',
78 |     method: 'PUT',
79 |     data: {
80 |       notify
81 |     },
82 |   });
83 |   return resp.data;
84 | }
85 | 


--------------------------------------------------------------------------------
/app/services/users/types.ts:
--------------------------------------------------------------------------------
 1 | import type { APIDataResponse } from '../http';
 2 | 
 3 | export type LoginUserinfoResponse = APIDataResponse<User>;
 4 | 
 5 | export type WebhookResponse = APIDataResponse<Webhook>;
 6 | 
 7 | export type UserConfigResponse = APIDataResponse<UserConfig>;
 8 | 
 9 | export type GetFollowResponse = APIDataResponse<Follow>;
10 | 
11 | export interface User {
12 |   user_id: number;
13 |   username: string;
14 |   avatar: string;
15 |   is_admin: 0 | 1 | 2 | 3;
16 | }
17 | 
18 | export interface Follow {
19 |   is_follow: boolean;
20 |   // 粉丝
21 |   followers: number;
22 |   // 关注
23 |   following: number;
24 | }
25 | 
26 | export type Webhook = {
27 |   token: string;
28 | };
29 | 
30 | export type UserConfig = {
31 |   notify: { [key: string]: boolean };
32 | };
33 | 


--------------------------------------------------------------------------------
/app/services/utils.ts:
--------------------------------------------------------------------------------
 1 | import type { Params } from './http';
 2 | 
 3 | export function paramsToSearch(params?: Params) {
 4 |   if (!params) return '';
 5 |   return Object.keys(params)
 6 |     .map((k) => k + '=' + encodeURIComponent(params[k]))
 7 |     .join('&');
 8 | }
 9 | 
10 | export function replaceSearchParam(
11 |   search: string,
12 |   params: { [key: string]: any }
13 | ): string {
14 |   for (const key in params) {
15 |     if (search.indexOf(key + '=') > -1) {
16 |       const regex = new RegExp(key + '=.*?(&|$)');
17 |       search = search.replace(regex, key + '=' + params[key] + '$1');
18 |     } else {
19 |       search += (search ? '&' : '') + key + '=' + params[key];
20 |     }
21 |   }
22 |   return search;
23 | }
24 | 


--------------------------------------------------------------------------------
/app/services/utils/api.ts:
--------------------------------------------------------------------------------
 1 | import type { APIDataResponse } from '../http';
 2 | import { request } from '../http';
 3 | 
 4 | export async function UploadImage(
 5 |   image: Blob | File,
 6 |   comment: string,
 7 |   linkId: number
 8 | ) {
 9 |   const formData = new FormData();
10 |   formData.append('image', image);
11 |   formData.append('comment', comment);
12 |   formData.append('link_id', linkId.toString());
13 |   const resp = await request<APIDataResponse<{ id: number }>>({
14 |     url: '/resource/image',
15 |     method: 'POST',
16 |     data: formData,
17 |     headers: {
18 |       'Content-Type': 'multipart/form-data',
19 |     },
20 |   });
21 |   return resp.data;
22 | }
23 | 


--------------------------------------------------------------------------------
/app/services/utils/type.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scriptscat/scriptlist-frontend/8bc6ba2d22025dbe8edfba039ab2cb21cc5e5e4a/app/services/utils/type.ts


--------------------------------------------------------------------------------
/app/styles/app.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | body {
  6 |   margin: 0;
  7 | }
  8 | 
  9 | .ant-layout-header {
 10 |   height: 48px;
 11 |   padding: 0 50px;
 12 |   line-height: 48px;
 13 | }
 14 | 
 15 | h1,
 16 | h2,
 17 | h3,
 18 | h4,
 19 | h5,
 20 | h6 {
 21 |   margin: 0;
 22 | }
 23 | 
 24 | .header-menu .light-menu-item>*,
 25 | .header-menu .dark-menu-item>* {
 26 |   vertical-align: middle !important;
 27 | }
 28 | 
 29 | .checkbox-round .dark-checkbox,
 30 | .checkbox-round .light-checkbox {
 31 |   border-radius: 50%;
 32 |   overflow: hidden;
 33 | }
 34 | 
 35 | 
 36 | .rank-collapse .light-collapse-content-box,
 37 | .rank-collapse .dark-collapse-content-box {
 38 |   padding: 4px 4px !important;
 39 |   overflow: hidden;
 40 | }
 41 | 
 42 | .statistic span {
 43 |   display: block;
 44 |   height: 24px;
 45 |   font-size: 12px;
 46 |   line-height: 16px;
 47 |   text-align: right;
 48 | }
 49 | 
 50 | .border-start-radius-0,
 51 | .border-start-radius-0 .ant-select-selector {
 52 |   border-start-start-radius: 0 !important;
 53 |   border-end-start-radius: 0 !important;
 54 | }
 55 | 
 56 | .text-nowrap {
 57 |   text-wrap: nowrap;
 58 | }
 59 | 
 60 | .markdown-body ul {
 61 |   list-style: disc;
 62 | }
 63 | 
 64 | .markdown-body ol {
 65 |   list-style: decimal;
 66 | }
 67 | 
 68 | .markdown-body img, svg, video, canvas, audio, iframe, embed, object {
 69 |   display:inline ; 
 70 |   vertical-align: baseline;
 71 | }
 72 | 
 73 | .dark textarea::placeholder {
 74 |   color: rgba(255, 255, 255, 0.45) !important;
 75 | }
 76 | 
 77 | .dark .ant-input-data-count {
 78 |   color: rgba(255, 255, 255, 0.45) !important;
 79 | }
 80 | 
 81 | .card-title {
 82 |   min-width: 180px;
 83 |   align-content: center;
 84 | }
 85 | 
 86 | /* 宽度大于768px */
 87 | @media (min-width: 768px) {
 88 |   .ant-layout {
 89 |     --ant-layout-header-height: 48px !important;
 90 |     --ant-layout-footer-padding: 24px 50px !important;
 91 |   }
 92 |   .ant-menu-css-var {
 93 |     --ant-menu-item-padding-inline: 16px !important;
 94 |     --ant-menu-icon-margin-inline-end: 10px !important;
 95 |   }
 96 |   .right-banner {
 97 |     padding-right: 16px;
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/app/styles/invite-confirm.css:
--------------------------------------------------------------------------------
1 | .ant-layout {
2 |   min-height: 100vh !important;
3 | }
4 | .ant-layout-content {
5 |   flex-basis: 0px !important;
6 | }
7 | 


--------------------------------------------------------------------------------
/app/utils/cookie.ts:
--------------------------------------------------------------------------------
 1 | import { AxiosResponse, AxiosResponseHeaders } from 'axios';
 2 | 
 3 | export function parseCookie(cookieHeader: string) {
 4 |   if (!cookieHeader) return {};
 5 |   return cookieHeader
 6 |     .split(';')
 7 |     .reduce((cookies: { [key: string]: string }, cookie) => {
 8 |       const [key, value] = cookie.split('=');
 9 |       cookies[key.trim()] = value;
10 |       return cookies;
11 |     }, {});
12 | }
13 | 
14 | export function getToken(request: Request) {
15 |   const cookieHeader = request.headers.get('Cookie');
16 |   if (cookieHeader) {
17 |     const cookie = parseCookie(cookieHeader);
18 |     return cookie.token;
19 |   }
20 |   return undefined;
21 | }
22 | 
23 | export function forwardHeaders(resp: AxiosResponse): Headers {
24 |   let headers = new Headers();
25 |   if (resp.headers['set-cookie']) {
26 |     resp.headers['set-cookie'].forEach((val) => {
27 |       headers.append('set-cookie', val);
28 |     });
29 |   }
30 |   return headers;
31 | }
32 | 


--------------------------------------------------------------------------------
/app/utils/errors.ts:
--------------------------------------------------------------------------------
 1 | export type Response = {
 2 |   status: number,
 3 |   statusText?: string
 4 | }
 5 | 
 6 | export class ResponseError extends Error {
 7 |   public response: Response;
 8 | 
 9 |   constructor(message: string, response: Response) {
10 |     super(message);
11 |     this.response = response;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/app/utils/i18n.ts:
--------------------------------------------------------------------------------
 1 | import { json, redirect } from '@remix-run/node';
 2 | import i18next from '~/i18next.server';
 3 | 
 4 | export async function i18nRedirect({ request }: { request: Request }) {
 5 |   // 在路径前面加上语言前缀,然后重定向
 6 |   let locale = await i18next.getLocale(request);
 7 |   if (!locale) {
 8 |     return new Response('Not Found', { status: 404 });
 9 |   }
10 |   const url = new URL(request.url);
11 |   let path = `/${locale}${url.pathname}`;
12 |   if (url.search) {
13 |     path += url.search;
14 |   }
15 |   return redirect(path, 301);
16 | }
17 | 
18 | export const lngMap: {
19 |   [key: string]: {
20 |     [key: string]: { name: string; value: string; hide?: boolean };
21 |   };
22 | } = {
23 |   en: { en: { name: 'English', value: 'en' } },
24 |   zh: {
25 |     'zh-CN': { name: '简体中文', value: 'zh-CN' },
26 |     'zh-TW': { name: '繁體中文', value: 'zh-TW' },
27 |   },
28 |   ach: {
29 |     'ach-UG': { name: '伪语言', value: 'ach-UG', hide: true },
30 |   },
31 | };
32 | 
33 | // 根据路径获取语言
34 | export function getLocale(request: Request, defaultLocale?: string) {
35 |   return getLocaleByURL(request.url) || defaultLocale;
36 | }
37 | 
38 | export function getLocaleByURL(url: string) {
39 |   let split = new URL(url).pathname.split('/');
40 |   if (split.length < 1) {
41 |     return 'en';
42 |   }
43 |   let locale = split[1];
44 |   split = locale.split('-');
45 |   let lng = split[0];
46 |   if (split.length === 1) {
47 |     if (lngMap[lng] && lngMap[lng][locale]) {
48 |       return lngMap[lng][locale].value;
49 |     }
50 |   } else if (split.length === 2) {
51 |     locale = split[0] + '-' + split[1].toUpperCase();
52 |     if (lngMap[lng] && lngMap[lng][locale]) {
53 |       return lngMap[lng][locale].value;
54 |     }
55 |   }
56 |   return '';
57 | }
58 | 
59 | export function getLocaleName(locale: string) {
60 |   let split = locale.split('-');
61 |   let lng = split[0];
62 |   if (split.length === 1) {
63 |     if (lngMap[lng] && lngMap[lng][locale]) {
64 |       return lngMap[lng][locale].name;
65 |     }
66 |   } else if (split.length === 2) {
67 |     if (lngMap[lng] && lngMap[lng][locale]) {
68 |       return lngMap[lng][locale].name;
69 |     }
70 |   }
71 |   return '';
72 | }
73 | 


--------------------------------------------------------------------------------
/app/utils/icon.tsx:
--------------------------------------------------------------------------------
 1 | import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
 2 | import Icon, { HomeOutlined } from '@ant-design/icons';
 3 | 
 4 | export function sunLineIcon(props: Partial<CustomIconComponentProps>) {
 5 |   return (
 6 |     <Icon
 7 |       component={() => (
 8 |         <svg fill='currentColor'  {...props} style={{ height: '1rem', width: '1rem' }} viewBox="0 0 24 24">
 9 |           <path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z" />
10 |         </svg>
11 |       )}
12 |      
13 |     />
14 |   );
15 | }
16 | 
17 | export function moonLineIcon(props: Partial<CustomIconComponentProps>) {
18 |     return (
19 |       <Icon
20 |         component={() => (
21 |           <svg fill='currentColor' {...props} style={{ height: '1rem', width: '1rem' }} viewBox="0 0 24 24">
22 |             <path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z" />
23 |           </svg>
24 |         )}
25 |        
26 |       />
27 |     );
28 |   }
29 | 


--------------------------------------------------------------------------------
/app/utils/utils.ts:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useEffect, useState } from 'react';
 2 | import { UserContext } from '../context-manager';
 3 | import type { Script } from '~/services/scripts/types';
 4 | import dayjs from 'dayjs';
 5 | import i18next from 'i18next';
 6 | import { MediaQueryAllQueryable, useMediaQuery } from 'react-responsive';
 7 | 
 8 | export function formatDate(value: number) {
 9 |   // 如果大于一年，显示年月日
10 |   if (value < new Date().getTime() / 1000 - 365 * 24 * 60 * 60) {
11 |     return dayjs(new Date(value * 1000)).format(i18next.t('time_format'));
12 |   }
13 |   return dayjs(new Date(value * 1000)).fromNow();
14 | }
15 | 
16 | export function timestampToDateObj(value: number) {
17 |   const date = new Date(value * 1000);
18 |   return {
19 |     year: date.getFullYear(),
20 |     month: date.getMonth() + 1,
21 |     day: date.getDate(),
22 |   };
23 | }
24 | 
25 | export function useDark() {
26 |   const user = useContext(UserContext);
27 |   return user.dark;
28 | }
29 | 
30 | // 分割数字 例如 1000=>1,000
31 | export function splitNumber(num: string): string {
32 |   return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
33 | }
34 | 
35 | export function unixToTime(unix: number) {
36 |   const date = new Date(unix * 1000);
37 |   return date.toLocaleString();
38 | }
39 | 
40 | // 秒转化为几分钟:几秒,并填充0
41 | export function secondToMinute(second: number) {
42 |   if (!second) {
43 |     return '00:00';
44 |   }
45 |   const minute = Math.floor(second / 60);
46 |   const s = second % 60;
47 |   return `${minute < 10 ? '0' + minute : minute}:${s < 10 ? '0' + s : s}`;
48 | }
49 | 
50 | export function scriptName(script: Script) {
51 |   return script.script.meta_json['name:zh-cn'] || script.name;
52 | }
53 | 
54 | export function scriptDescription(script: Script) {
55 |   return script.script.meta_json['description:zh-cn'] || script.description;
56 | }
57 | type MediaQuerySettings = Partial<
58 |   MediaQueryAllQueryable & {
59 |     query?: string;
60 |   }
61 | >;
62 | 
63 | export const MediaContext = createContext(false);
64 | 
65 | export function useMediaQueryState(settings: MediaQuerySettings) {
66 |   const mediaQuery = useMediaQuery(settings);
67 |   const [mediaState, setMediaState] = useState(useContext(MediaContext));
68 |   useEffect(() => {
69 |     setMediaState(mediaQuery);
70 |   }, [mediaQuery]);
71 |   return mediaState;
72 | }
73 | 


--------------------------------------------------------------------------------
/crowdin.yml:
--------------------------------------------------------------------------------
1 | project_id: '620320'
2 | api_token_env: CROWDIN_PERSONAL_TOKEN
3 | preserve_hierarchy: true
4 | 
5 | files:
6 |   # JSON 翻译文件
7 |   - source: /public/locales/zh-CN/**/*
8 |     translation: /public/locales/%locale%/**/%original_file_name%
9 | 


--------------------------------------------------------------------------------
/deploy/docker/Dockerfile:
--------------------------------------------------------------------------------
 1 | ARG BASEIMAGE=node:20-alpine3.16
 2 | 
 3 | FROM ${BASEIMAGE}
 4 | 
 5 | EXPOSE 3000
 6 | 
 7 | WORKDIR /www
 8 | 
 9 | COPY . .
10 | 
11 | CMD [ "npm","start" ]


--------------------------------------------------------------------------------
/deploy/gateway/Chart.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: v2
 2 | name: cago-gateway
 3 | description: A Helm chart for Kubernetes
 4 | 
 5 | # A chart can be either an 'application' or a 'library' chart.
 6 | #
 7 | # Application charts are a collection of templates that can be packaged into versioned archives
 8 | # to be deployed.
 9 | #
10 | # Library charts provide useful utilities or functions for the chart developer. They're included as
11 | # a dependency of application charts to inject those utilities and functions into the rendering
12 | # pipeline. Library charts do not define any templates and therefore cannot be deployed.
13 | type: application
14 | 
15 | # This is the chart version. This version number should be incremented each time you make changes
16 | # to the chart and its templates, including the app version.
17 | # Versions are expected to follow Semantic Versioning (https://semver.org/)
18 | version: 0.1.0
19 | 
20 | # This is the version number of the application being deployed. This version number should be
21 | # incremented each time you make changes to the application. Versions are not expected to
22 | # follow Semantic Versioning. They should reflect the version the application is using.
23 | # It is recommended to use it with quotes.
24 | appVersion: "1.16.0"
25 | 


--------------------------------------------------------------------------------
/deploy/gateway/README.md:
--------------------------------------------------------------------------------
1 | # 灰度发布
2 | 
3 | 灰度发布helm


--------------------------------------------------------------------------------
/deploy/gateway/_helpers.tpl:
--------------------------------------------------------------------------------
 1 | {{/*
 2 | Expand the name of the chart.
 3 | */}}
 4 | {{- define "cago.name" -}}
 5 | {{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
 6 | {{- end }}
 7 | 
 8 | {{/*
 9 | Create a default fully qualified app name.
10 | We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
11 | If release name contains chart name it will be used as a full name.
12 | */}}
13 | {{- define "cago.fullname" -}}
14 | {{- if .Values.fullnameOverride }}
15 | {{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
16 | {{- else }}
17 | {{- $name := default .Chart.Name .Values.nameOverride }}
18 | {{- if contains $name .Release.Name }}
19 | {{- .Release.Name | trunc 63 | trimSuffix "-" }}
20 | {{- else }}
21 | {{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
22 | {{- end }}
23 | {{- end }}
24 | {{- end }}
25 | 
26 | {{/*
27 | Create chart name and version as used by the chart label.
28 | */}}
29 | {{- define "cago.chart" -}}
30 | {{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
31 | {{- end }}
32 | 
33 | {{/*
34 | Common labels
35 | */}}
36 | {{- define "cago.labels" -}}
37 | helm.sh/chart: {{ include "cago.chart" . }}
38 | {{ include "cago.selectorLabels" . }}
39 | {{- if .Chart.AppVersion }}
40 | app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
41 | {{- end }}
42 | app.kubernetes.io/managed-by: {{ .Release.Service }}
43 | {{- end }}
44 | 
45 | {{/*
46 | Selector labels
47 | */}}
48 | {{- define "cago.selectorLabels" -}}
49 | app.kubernetes.io/name: {{ include "cago.name" . }}
50 | app.kubernetes.io/instance: {{ .Release.Name }}
51 | {{- end }}
52 | 
53 | {{/*
54 | Create the name of the service account to use
55 | */}}
56 | {{- define "cago.serviceAccountName" -}}
57 | {{- if .Values.serviceAccount.create }}
58 | {{- default (include "cago.fullname" .) .Values.serviceAccount.name }}
59 | {{- else }}
60 | {{- default "default" .Values.serviceAccount.name }}
61 | {{- end }}
62 | {{- end }}
63 | 


--------------------------------------------------------------------------------
/deploy/gateway/templates/gateway.yaml:
--------------------------------------------------------------------------------
 1 | # 支持灰度发布,使用istio-gateway实现流量控制
 2 | apiVersion: networking.istio.io/v1alpha3
 3 | kind: Gateway
 4 | metadata:
 5 |   name: {{ .Values.project }}-gateway
 6 | spec:
 7 |   selector:
 8 |     istio: ingressgateway
 9 |   servers:
10 |     - port:
11 |         number: 80
12 |         name: http
13 |         protocol: HTTP
14 |       hosts:
15 |         {{- range .Values.istio.hosts }}
16 |         - {{ . | quote }}
17 |         {{- end }}
18 | 
19 | ---
20 | 
21 | apiVersion: networking.istio.io/v1alpha3
22 | kind: VirtualService
23 | metadata:
24 |   name: {{ .Values.project }}
25 | spec:
26 |   hosts:
27 |     {{- range .Values.istio.hosts }}
28 |     - {{ . | quote }}
29 |     {{- end }}
30 |   gateways:
31 |     - {{ .Values.project }}-gateway
32 |   http:
33 |     {{- if .Values.istio.canary.enabled }}
34 |     - match:
35 |         {{- toYaml .Values.istio.canary.match | nindent 8 }}
36 |       route:
37 |         - destination:
38 |             host: {{ .Values.project }}-canary-scriptcat-list-frontend
39 |     - match:
40 |         {{- toYaml .Values.istio.match | nindent 8 }}
41 |       route:
42 |         - destination:
43 |             host: {{ .Values.project }}-scriptcat-list-frontend
44 |     {{ else }}
45 |     - match:
46 |         {{- toYaml .Values.istio.match | nindent 8 }}
47 |       route:
48 |         - destination:
49 |             host: {{ .Values.project }}-scriptcat-list-frontend
50 |     {{ end }}
51 | 


--------------------------------------------------------------------------------
/deploy/gateway/values.yaml:
--------------------------------------------------------------------------------
 1 | # 项目名 需要使用
 2 | project: scriptlist-frontend
 3 | 
 4 | nameOverride: ""
 5 | fullnameOverride: ""
 6 | 
 7 | istio:
 8 |   hosts:
 9 |     - scriptcat.org
10 |   match:
11 |   canary:
12 |     enabled: false
13 |     match: # 染色规则
14 |       - headers:
15 |           cookie:
16 |             regex: "^(.*?;)?(token=.+?)(;.*)?$"
17 | 
18 | 


--------------------------------------------------------------------------------
/deploy/helm/.helmignore:
--------------------------------------------------------------------------------
 1 | # Patterns to ignore when building packages.
 2 | # This supports shell glob matching, relative path matching, and
 3 | # negation (prefixed with !). Only one pattern per line.
 4 | .DS_Store
 5 | # Common VCS dirs
 6 | .git/
 7 | .gitignore
 8 | .bzr/
 9 | .bzrignore
10 | .hg/
11 | .hgignore
12 | .svn/
13 | # Common backup files
14 | *.swp
15 | *.bak
16 | *.tmp
17 | *.orig
18 | *~
19 | # Various IDEs
20 | .project
21 | .idea/
22 | *.tmproj
23 | .vscode/
24 | 


--------------------------------------------------------------------------------
/deploy/helm/Chart.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: v2
 2 | name: scriptcat-list-frontend
 3 | description: A Helm chart for Kubernetes
 4 | 
 5 | # A chart can be either an 'application' or a 'library' chart.
 6 | #
 7 | # Application charts are a collection of templates that can be packaged into versioned archives
 8 | # to be deployed.
 9 | #
10 | # Library charts provide useful utilities or functions for the chart developer. They're included as
11 | # a dependency of application charts to inject those utilities and functions into the rendering
12 | # pipeline. Library charts do not define any templates and therefore cannot be deployed.
13 | type: application
14 | 
15 | # This is the chart version. This version number should be incremented each time you make changes
16 | # to the chart and its templates, including the app version.
17 | # Versions are expected to follow Semantic Versioning (https://semver.org/)
18 | version: 0.1.0
19 | 
20 | # This is the version number of the application being deployed. This version number should be
21 | # incremented each time you make changes to the application. Versions are not expected to
22 | # follow Semantic Versioning. They should reflect the version the application is using.
23 | # It is recommended to use it with quotes.
24 | appVersion: "1.16.0"
25 | 


--------------------------------------------------------------------------------
/deploy/helm/templates/NOTES.txt:
--------------------------------------------------------------------------------
 1 | 1. Get the application URL by running these commands:
 2 | {{- if .Values.ingress.enabled }}
 3 | {{- range $host := .Values.ingress.hosts }}
 4 |   {{- range .paths }}
 5 |   http{{ if $.Values.ingress.tls }}s{{ end }}://{{ $host.host }}{{ .path }}
 6 |   {{- end }}
 7 | {{- end }}
 8 | {{- else if contains "NodePort" .Values.service.type }}
 9 |   export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "scriptcat-list-frontend.fullname" . }})
10 |   export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
11 |   echo http://$NODE_IP:$NODE_PORT
12 | {{- else if contains "LoadBalancer" .Values.service.type }}
13 |      NOTE: It may take a few minutes for the LoadBalancer IP to be available.
14 |            You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "scriptcat-list-frontend.fullname" . }}'
15 |   export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "scriptcat-list-frontend.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}")
16 |   echo http://$SERVICE_IP:{{ .Values.service.port }}
17 | {{- else if contains "ClusterIP" .Values.service.type }}
18 |   export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "scriptcat-list-frontend.name" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
19 |   export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
20 |   echo "Visit http://127.0.0.1:8080 to use your application"
21 |   kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT
22 | {{- end }}
23 | 


--------------------------------------------------------------------------------
/deploy/helm/templates/_helpers.tpl:
--------------------------------------------------------------------------------
 1 | {{/*
 2 | Expand the name of the chart.
 3 | */}}
 4 | {{- define "scriptcat-list-frontend.name" -}}
 5 | {{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
 6 | {{- end }}
 7 | 
 8 | {{/*
 9 | Create a default fully qualified app name.
10 | We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
11 | If release name contains chart name it will be used as a full name.
12 | */}}
13 | {{- define "scriptcat-list-frontend.fullname" -}}
14 | {{- if .Values.fullnameOverride }}
15 | {{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
16 | {{- else }}
17 | {{- $name := default .Chart.Name .Values.nameOverride }}
18 | {{- if contains $name .Release.Name }}
19 | {{- .Release.Name | trunc 63 | trimSuffix "-" }}
20 | {{- else }}
21 | {{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
22 | {{- end }}
23 | {{- end }}
24 | {{- end }}
25 | 
26 | {{/*
27 | Create chart name and version as used by the chart label.
28 | */}}
29 | {{- define "scriptcat-list-frontend.chart" -}}
30 | {{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
31 | {{- end }}
32 | 
33 | {{/*
34 | Common labels
35 | */}}
36 | {{- define "scriptcat-list-frontend.labels" -}}
37 | helm.sh/chart: {{ include "scriptcat-list-frontend.chart" . }}
38 | {{ include "scriptcat-list-frontend.selectorLabels" . }}
39 | {{- if .Chart.AppVersion }}
40 | app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
41 | {{- end }}
42 | app.kubernetes.io/managed-by: {{ .Release.Service }}
43 | {{- end }}
44 | 
45 | {{/*
46 | Selector labels
47 | */}}
48 | {{- define "scriptcat-list-frontend.selectorLabels" -}}
49 | app.kubernetes.io/name: {{ include "scriptcat-list-frontend.name" . }}
50 | app.kubernetes.io/instance: {{ .Release.Name }}
51 | {{- end }}
52 | 
53 | {{/*
54 | Create the name of the service account to use
55 | */}}
56 | {{- define "scriptcat-list-frontend.serviceAccountName" -}}
57 | {{- if .Values.serviceAccount.create }}
58 | {{- default (include "scriptcat-list-frontend.fullname" .) .Values.serviceAccount.name }}
59 | {{- else }}
60 | {{- default "default" .Values.serviceAccount.name }}
61 | {{- end }}
62 | {{- end }}
63 | 


--------------------------------------------------------------------------------
/deploy/helm/templates/deployment.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: apps/v1
 2 | kind: Deployment
 3 | metadata:
 4 |   name: {{ include "scriptcat-list-frontend.fullname" . }}
 5 |   labels:
 6 |     {{- include "scriptcat-list-frontend.labels" . | nindent 4 }}
 7 | spec:
 8 |   {{- if not .Values.autoscaling.enabled }}
 9 |   replicas: {{ .Values.replicaCount }}
10 |   {{- end }}
11 |   selector:
12 |     matchLabels:
13 |       {{- include "scriptcat-list-frontend.selectorLabels" . | nindent 6 }}
14 |   template:
15 |     metadata:
16 |       {{- with .Values.podAnnotations }}
17 |       annotations:
18 |         {{- toYaml . | nindent 8 }}
19 |       {{- end }}
20 |       labels:
21 |         {{- include "scriptcat-list-frontend.selectorLabels" . | nindent 8 }}
22 |     spec:
23 |       {{- with .Values.imagePullSecrets }}
24 |       imagePullSecrets:
25 |         {{- toYaml . | nindent 8 }}
26 |       {{- end }}
27 |       serviceAccountName: {{ include "scriptcat-list-frontend.serviceAccountName" . }}
28 |       securityContext:
29 |         {{- toYaml .Values.podSecurityContext | nindent 8 }}
30 |       containers:
31 |         - name: {{ .Chart.Name }}
32 |           securityContext:
33 |             {{- toYaml .Values.securityContext | nindent 12 }}
34 |           image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
35 |           imagePullPolicy: {{ .Values.image.pullPolicy }}
36 |           ports:
37 |             - name: http
38 |               containerPort: 3000
39 |               protocol: TCP
40 |           livenessProbe:
41 |             httpGet:
42 |               path: /
43 |               port: http
44 |           readinessProbe:
45 |             httpGet:
46 |               path: /
47 |               port: http
48 |           resources:
49 |             {{- toYaml .Values.resources | nindent 12 }}
50 |           {{- with .Values.env }}
51 |           env:
52 |             {{- toYaml . | nindent 12 }}
53 |           {{- end }}
54 |       {{- with .Values.nodeSelector }}
55 |       nodeSelector:
56 |         {{- toYaml . | nindent 8 }}
57 |       {{- end }}
58 |       {{- with .Values.affinity }}
59 |       affinity:
60 |         {{- toYaml . | nindent 8 }}
61 |       {{- end }}
62 |       {{- with .Values.tolerations }}
63 |       tolerations:
64 |         {{- toYaml . | nindent 8 }}
65 |       {{- end }}
66 | 


--------------------------------------------------------------------------------
/deploy/helm/templates/hpa.yaml:
--------------------------------------------------------------------------------
 1 | {{- if .Values.autoscaling.enabled }}
 2 | apiVersion: autoscaling/v2
 3 | kind: HorizontalPodAutoscaler
 4 | metadata:
 5 |   name: {{ include "scriptcat-list-frontend.fullname" . }}
 6 |   labels:
 7 |     {{- include "scriptcat-list-frontend.labels" . | nindent 4 }}
 8 | spec:
 9 |   scaleTargetRef:
10 |     apiVersion: apps/v1
11 |     kind: Deployment
12 |     name: {{ include "scriptcat-list-frontend.fullname" . }}
13 |   minReplicas: {{ .Values.autoscaling.minReplicas }}
14 |   maxReplicas: {{ .Values.autoscaling.maxReplicas }}
15 |   metrics:
16 |     {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
17 |     - type: Resource
18 |       resource:
19 |         name: cpu
20 |         target:
21 |           averageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
22 |           type: Utilization
23 |     {{- end }}
24 |     {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
25 |     - type: Resource
26 |       resource:
27 |         name: memory
28 |         target:
29 |           averageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
30 |           type: Utilization
31 |     {{- end }}
32 | {{- end }}
33 | 


--------------------------------------------------------------------------------
/deploy/helm/templates/ingress.yaml:
--------------------------------------------------------------------------------
 1 | {{- if .Values.ingress.enabled -}}
 2 | {{- $fullName := include "scriptcat-list-frontend.fullname" . -}}
 3 | {{- $svcPort := .Values.service.port -}}
 4 | {{- if and .Values.ingress.className (not (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion)) }}
 5 |   {{- if not (hasKey .Values.ingress.annotations "kubernetes.io/ingress.class") }}
 6 |   {{- $_ := set .Values.ingress.annotations "kubernetes.io/ingress.class" .Values.ingress.className}}
 7 |   {{- end }}
 8 | {{- end }}
 9 | {{- if semverCompare ">=1.19-0" .Capabilities.KubeVersion.GitVersion -}}
10 | apiVersion: networking.k8s.io/v1
11 | {{- else if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}}
12 | apiVersion: networking.k8s.io/v1beta1
13 | {{- else -}}
14 | apiVersion: extensions/v1beta1
15 | {{- end }}
16 | kind: Ingress
17 | metadata:
18 |   name: {{ $fullName }}
19 |   labels:
20 |     {{- include "scriptcat-list-frontend.labels" . | nindent 4 }}
21 |   {{- with .Values.ingress.annotations }}
22 |   annotations:
23 |     {{- toYaml . | nindent 4 }}
24 |   {{- end }}
25 | spec:
26 |   {{- if and .Values.ingress.className (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion) }}
27 |   ingressClassName: {{ .Values.ingress.className }}
28 |   {{- end }}
29 |   {{- if .Values.ingress.tls }}
30 |   tls:
31 |     {{- range .Values.ingress.tls }}
32 |     - hosts:
33 |         {{- range .hosts }}
34 |         - {{ . | quote }}
35 |         {{- end }}
36 |       secretName: {{ .secretName }}
37 |     {{- end }}
38 |   {{- end }}
39 |   rules:
40 |     {{- range .Values.ingress.hosts }}
41 |     - host: {{ .host | quote }}
42 |       http:
43 |         paths:
44 |           {{- range .paths }}
45 |           - path: {{ .path }}
46 |             {{- if and .pathType (semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion) }}
47 |             pathType: {{ .pathType }}
48 |             {{- end }}
49 |             backend:
50 |               {{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }}
51 |               service:
52 |                 name: {{ $fullName }}
53 |                 port:
54 |                   number: {{ $svcPort }}
55 |               {{- else }}
56 |               serviceName: {{ $fullName }}
57 |               servicePort: {{ $svcPort }}
58 |               {{- end }}
59 |           {{- end }}
60 |     {{- end }}
61 | {{- end }}


--------------------------------------------------------------------------------
/deploy/helm/templates/service.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: v1
 2 | kind: Service
 3 | metadata:
 4 |   name: {{ include "scriptcat-list-frontend.fullname" . }}
 5 |   labels:
 6 |     {{- include "scriptcat-list-frontend.labels" . | nindent 4 }}
 7 | spec:
 8 |   type: {{ .Values.service.type }}
 9 |   ports:
10 |     - port: {{ .Values.service.port }}
11 |       targetPort: http
12 |       protocol: TCP
13 |       name: http
14 |   selector:
15 |     {{- include "scriptcat-list-frontend.selectorLabels" . | nindent 4 }}
16 | 


--------------------------------------------------------------------------------
/deploy/helm/templates/serviceaccount.yaml:
--------------------------------------------------------------------------------
 1 | {{- if .Values.serviceAccount.create -}}
 2 | apiVersion: v1
 3 | kind: ServiceAccount
 4 | metadata:
 5 |   name: {{ include "scriptcat-list-frontend.serviceAccountName" . }}
 6 |   labels:
 7 |     {{- include "scriptcat-list-frontend.labels" . | nindent 4 }}
 8 |   {{- with .Values.serviceAccount.annotations }}
 9 |   annotations:
10 |     {{- toYaml . | nindent 4 }}
11 |   {{- end }}
12 | {{- end }}
13 | 


--------------------------------------------------------------------------------
/deploy/helm/templates/tests/test-connection.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: v1
 2 | kind: Pod
 3 | metadata:
 4 |   name: "{{ include "scriptcat-list-frontend.fullname" . }}-test-connection"
 5 |   labels:
 6 |     {{- include "scriptcat-list-frontend.labels" . | nindent 4 }}
 7 |   annotations:
 8 |     "helm.sh/hook": test
 9 | spec:
10 |   containers:
11 |     - name: wget
12 |       image: busybox
13 |       command: ['wget']
14 |       args: ['{{ include "scriptcat-list-frontend.fullname" . }}:{{ .Values.service.port }}']
15 |   restartPolicy: Never
16 | 


--------------------------------------------------------------------------------
/deploy/helm/values.yaml:
--------------------------------------------------------------------------------
 1 | # Default values for scriptcat-docs.
 2 | # This is a YAML-formatted file.
 3 | # Declare variables to be passed into your templates.
 4 | 
 5 | replicaCount: 1
 6 | 
 7 | image:
 8 |   repository: scriptcat/list-frontend
 9 |   pullPolicy: IfNotPresent
10 |   # Overrides the image tag whose default is the chart appVersion.
11 |   tag: ''
12 | 
13 | env:
14 |   - name: APP_API_URL
15 |     value: https://scriptcat.org/api/v2
16 |   - name: APP_API_PROXY
17 |     value: http://scriptlist-cago.app.svc.cluster.local/api/v2
18 |   - name: APP_BBS_OAUTH_CLIENT
19 |     value: 80mfto0y3b8v
20 |   - name: APP_ENV
21 |     value: prod
22 | 
23 | imagePullSecrets: []
24 | nameOverride: ''
25 | fullnameOverride: ''
26 | 
27 | serviceAccount:
28 |   # Specifies whether a service account should be created
29 |   create: false
30 |   # Annotations to add to the service account
31 |   annotations: {}
32 |   # The name of the service account to use.
33 |   # If not set and create is true, a name is generated using the fullname template
34 |   name: ''
35 | 
36 | podAnnotations: {}
37 | 
38 | podSecurityContext:
39 |   {}
40 |   # fsGroup: 2000
41 | 
42 | securityContext:
43 |   {}
44 |   # capabilities:
45 |   #   drop:
46 |   #   - ALL
47 |   # readOnlyRootFilesystem: true
48 |   # runAsNonRoot: true
49 |   # runAsUser: 1000
50 | 
51 | service:
52 |   type: ClusterIP
53 |   port: 80
54 | 
55 | ingress:
56 |   enabled: true
57 |   className: 'k3s-backup-nginx'
58 |   annotations:
59 |     nginx.ingress.kubernetes.io/proxy-body-size: "10m"
60 |     # kubernetes.io/ingress.class: nginx
61 |     # kubernetes.io/tls-acme: "true"
62 |   hosts:
63 |     - host: scriptcat.org
64 |       paths:
65 |         - path: /
66 |           pathType: ImplementationSpecific
67 |   tls:
68 |     - secretName: scriptcat-org-tls
69 |       hosts:
70 |         - scriptcat.org
71 | 
72 | resources:
73 |   # We usually recommend not to specify default resources and to leave this as a conscious
74 |   # choice for the user. This also increases chances charts run on environments with little
75 |   # resources, such as Minikube. If you do want to specify resources, uncomment the following
76 |   # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
77 |   limits:
78 |     cpu: 1000m
79 |     memory: 1024Mi
80 |   requests:
81 |     cpu: 500m
82 |     memory: 512Mi
83 | 
84 | autoscaling:
85 |   enabled: true
86 |   minReplicas: 1
87 |   maxReplicas: 100
88 |   targetCPUUtilizationPercentage: 80
89 |   # targetMemoryUtilizationPercentage: 80
90 | 
91 | nodeSelector: {}
92 | 
93 | tolerations: []
94 | 
95 | affinity: {}
96 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scriptlist-frontend",
 3 |   "private": true,
 4 |   "description": "",
 5 |   "license": "MIT",
 6 |   "sideEffects": false,
 7 |   "scripts": {
 8 |     "clean": "rimraf ./public/build",
 9 |     "build": "npm run prebuild && remix build",
10 |     "dev": "npm run predev && remix dev",
11 |     "start": "remix-serve build",
12 |     "predev": "ts-node --project ./tsconfig.node.json ./scripts/prebuild.tsx",
13 |     "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./scripts/prebuild.tsx",
14 |     "crowdin": "crowdin"
15 |   },
16 |   "dependencies": {
17 |     "@ant-design/icons": "^5.3.7",
18 |     "@ant-design/plots": "^1.2.4",
19 |     "@ant-design/static-style-extract": "^1.0.2",
20 |     "@antv/g-base": "0.5.11",
21 |     "@remix-run/node": "^1.16.1",
22 |     "@remix-run/react": "^1.16.1",
23 |     "@remix-run/serve": "^1.16.1",
24 |     "@toast-ui/editor": "^3.2.2",
25 |     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
26 |     "antd": "^5.19.2",
27 |     "axios": "^1.5.1",
28 |     "clipboard": "^2.0.11",
29 |     "dayjs": "^1.11.10",
30 |     "github-markdown-css": "^5.3.0",
31 |     "i18next": "^23.5.1",
32 |     "i18next-browser-languagedetector": "^7.1.0",
33 |     "i18next-fs-backend": "^2.2.0",
34 |     "i18next-http-backend": "^2.2.2",
35 |     "isbot": "^5.1.9",
36 |     "lodash-es": "^4.17.21",
37 |     "marked": "^4.3.0",
38 |     "monaco-editor": "^0.50.0",
39 |     "prismjs": "^1.27.0",
40 |     "react": "^18.2.0",
41 |     "react-dom": "^18.2.0",
42 |     "react-icons": "^5.2.1",
43 |     "react-infinite-scroll-component": "^6.1.0",
44 |     "react-responsive": "^10.0.0",
45 |     "remix-i18next": "^5.4.0",
46 |     "remix-utils": "^3.2.0",
47 |     "ua-parser-js": "^1.0.37",
48 |     "xss": "^1.0.13"
49 |   },
50 |   "devDependencies": {
51 |     "@remix-run/dev": "^1.16.1",
52 |     "@remix-run/eslint-config": "^1.16.1",
53 |     "@remix-run/v1-route-convention": "^0.1.4",
54 |     "@types/lodash": "^4.14.202",
55 |     "@types/lodash-es": "^4.17.12",
56 |     "@types/marked": "^4.0.3",
57 |     "@types/prismjs": "^1.26.2",
58 |     "@types/react": "^18.2.0",
59 |     "@types/react-dom": "^18.2.0",
60 |     "@types/ua-parser-js": "^0.7.36",
61 |     "autoprefixer": "^10.4.7",
62 |     "concurrently": "^7.1.0",
63 |     "cross-env": "^7.0.3",
64 |     "eslint": "^8.51.0",
65 |     "less": "^4.1.2",
66 |     "postcss": "^8.4.13",
67 |     "rimraf": "^5.0.7",
68 |     "tailwindcss": "^3.3.3",
69 |     "ts-node": "^10.9.1",
70 |     "tslib": "^2.6.2",
71 |     "typescript": "^5.2.2"
72 |   },
73 |   "engines": {
74 |     "node": ">=18"
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/public/ads.txt:
--------------------------------------------------------------------------------
1 | google.com, pub-8009073269666226, DIRECT, f08c47fec0942fa0


--------------------------------------------------------------------------------
/public/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scriptscat/scriptlist-frontend/8bc6ba2d22025dbe8edfba039ab2cb21cc5e5e4a/public/assets/logo.png


--------------------------------------------------------------------------------
/public/baidu_verify_codeva-aj6KRqtFfK.html:
--------------------------------------------------------------------------------
1 | 05b20094ee5b83d4c94df39aa96c09af


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scriptscat/scriptlist-frontend/8bc6ba2d22025dbe8edfba039ab2cb21cc5e5e4a/public/favicon.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | #
2 | # robots.txt for ScriptCat
3 | #
4 | 
5 | User-agent: *
6 | Allow: /
7 | Disallow: /ach-UG/
8 | 


--------------------------------------------------------------------------------
/remix.config.cjs:
--------------------------------------------------------------------------------
 1 | const {
 2 |   createRoutesFromFolders,
 3 | } = require("@remix-run/v1-route-convention");
 4 | /**
 5 |  * @type {import('@remix-run/dev').AppConfig}
 6 |  */
 7 | module.exports = {
 8 |   serverDependenciesToBundle: ['axios', 'marked', 'lodash-es'],
 9 |   ignoredRouteFiles: ['**/.*', '**/*.css'],
10 |   tailwind: true,
11 |   // appDirectory: "app",
12 |   // assetsBuildDirectory: "public/build",
13 |   // serverBuildPath: "build/index.js",
14 |   // publicPath: "/build/",
15 |   future: {
16 |     v2_dev: {
17 |       port: 8002,
18 |     },
19 |     v2_meta: true,
20 |     v2_errorBoundary: true,
21 |     v2_normalizeFormMethod: true,
22 |     v2_headers: true,
23 |     v2_routeConvention: true,
24 |   },
25 |   routes(defineRoutes) {
26 |     // uses the v1 convention, works in v1.15+ and v2
27 |     return createRoutesFromFolders(defineRoutes);
28 |   },
29 |   serverModuleFormat: 'cjs',
30 | };
31 | 


--------------------------------------------------------------------------------
/remix.env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@remix-run/dev" />
2 | /// <reference types="@remix-run/node/globals" />
3 | 


--------------------------------------------------------------------------------
/scripts/prebuild.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import fs from 'fs';
 3 | import { extractStyle } from '@ant-design/static-style-extract';
 4 | import { StyleProvider } from '@ant-design/cssinjs';
 5 | import { ConfigProvider, theme } from 'antd';
 6 | 
 7 | const outputPath = './public/styles/antd.min.css';
 8 | 
 9 | const css = extractStyle((node) => (
10 |   <>
11 |     <ConfigProvider
12 |       theme={{
13 |         algorithm: theme.defaultAlgorithm,
14 |       }}
15 |     >
16 |       <StyleProvider hashPriority="high">{node}</StyleProvider>
17 |     </ConfigProvider>
18 |     <ConfigProvider
19 |       theme={{
20 |         algorithm: theme.darkAlgorithm,
21 |       }}
22 |     >
23 |       <StyleProvider hashPriority="high">{node}</StyleProvider>
24 |     </ConfigProvider>
25 |   </>
26 | ));
27 | 
28 | // 创建目录
29 | fs.mkdirSync('./public/styles', { recursive: true });
30 | // 生成css
31 | fs.writeFileSync(outputPath, css);
32 | 
33 | // 拷贝monoac
34 | fs.cpSync(
35 |   './node_modules/monaco-editor/min/vs',
36 |   './public/assets/monaco-editor/min/vs',
37 |   { recursive: true }
38 | );
39 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
3 |   theme: {
4 |     extend: {},
5 |   },
6 |   plugins: [],
7 |   darkMode: 'class',
8 | };
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "remix.env.d.ts",
 4 |     "**/*.ts",
 5 |     "**/*.tsx"
 6 |   ],
 7 |   "compilerOptions": {
 8 |     "lib": [
 9 |       "DOM",
10 |       "DOM.Iterable",
11 |       "ES2019"
12 |     ],
13 |     "isolatedModules": true,
14 |     "esModuleInterop": true,
15 |     "jsx": "react-jsx",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "target": "ES2019",
19 |     "module": "esnext",
20 |     "strict": true,
21 |     "baseUrl": ".",
22 |     "paths": {
23 |       "~/*": [
24 |         "./app/*"
25 |       ]
26 |     },
27 |     "noEmit": true,
28 |     "forceConsistentCasingInFileNames": true,
29 |     "allowJs": true
30 |   }
31 | }


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"strictNullChecks": true,
 4 | 		"module": "NodeNext",
 5 | 		"jsx": "react",
 6 | 		"esModuleInterop": true
 7 | 	},
 8 | 	"include": [
 9 | 		"next-env.d.ts",
10 | 		"**/*.ts",
11 | 		"**/*.tsx"
12 | 	]
13 | }


--------------------------------------------------------------------------------