feat: lots of improvement (#4)

* chore(CI): use new cloudflare page action

* feat(env): use env load base url

* feat: update dependencies and refactor components

- Added @hello-pangea/dnd for drag-and-drop functionality.
- Updated TypeScript definitions for React and React DOM to version 19.
- Refactored Container component to improve class name handling.
- Introduced LoadError component for better error handling in data loading scenarios.
- Removed OrganizationEditor component as part of the reorganization of components.
- Enhanced UploadImage component with additional features and improved user experience.
- Updated EventEditor and OrganizationEditor components to utilize new error handling and UI improvements.
- Adjusted various components to ensure consistent styling and functionality.

.env.example

@@ -1 +1 @@
-FEC_API_TOKEN=
+PUBLIC_API_URL=

.github/workflows/deploy.yaml

@@ -16,13 +16,15 @@ jobs:
       # Run your project's build step
       - name: Use Yarn 4
         run: corepack enable
+      - name: Inject Environment Variables
+        run: |
+          echo "PUBLIC_API_URL=${{ vars.PUBLIC_API_URL }}" >> .env
       - name: Build
         run: yarn install --immutable && yarn build
       - name: Publish
-        uses: cloudflare/pages-action@v1
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: fcc-cms-6b4t # e.g. 'my-project'
-          directory: dist # e.g. 'dist'
+          command: pages deploy dist --project-name=fcc-cms-6b4t
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -10,6 +10,7 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
+    "@hello-pangea/dnd": "^17.0.0",
     "@mantine/core": "^7.15.1",
     "@mantine/dates": "^7.15.1",
     "@mantine/dropzone": "^7.15.1",
@@ -41,8 +42,8 @@
     "@rsbuild/plugin-svgr": "^1.0.6",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "tailwindcss": "^3.4.16",

src/api/index.ts

@@ -1,10 +1,7 @@
 import axios from "axios";
 
-// export const BASEURL = "https://api.furryeventchina.com";
-export const BASEURL = "http://localhost:8787";
-
 const Axios = axios.create({
-  baseURL: BASEURL,
+  baseURL: import.meta.env.PUBLIC_API_URL,
 });
 
 Axios.interceptors.request.use(

src/components/Container/index.tsx

@@ -1,16 +1,16 @@
-import { twMerge } from "tailwind-merge";
+import { twMerge } from 'tailwind-merge';
 
 export default function DefaultContainer(
   props: React.DetailedHTMLProps<
     React.HTMLAttributes<HTMLDivElement>,
     HTMLDivElement
-  >
+  >,
 ) {
   const { children, className, ...reset } = props;
   return (
     <div
       {...reset}
-      className={twMerge("shadow-xl p-4 rounded-xl bg-white", className)}
+      className={twMerge('shadow p-4 rounded-xl bg-white', className)}
     >
       {children}
     </div>

src/components/Error/index.tsx

@@ -0,0 +1,23 @@
+import DefaultContainer from '@/components/Container';
+import { Container, Title, Text, Group, Button } from '@mantine/core';
+import { useNavigate } from 'react-router-dom';
+
+export default function LoadError() {
+  const navigate = useNavigate();
+
+  return (
+    <DefaultContainer className="shadow sticky top-0 z-10">
+      <Container className="flex flex-col items-center justify-center">
+        <Title className="text-slate-700">发生了错误...</Title>
+        <Text c="dimmed" size="lg" ta="center">
+          加载数据时发生了错误，最大的可能是这个数据不存在，如果持续遇到这个问题，请把地址报告给开发者。
+        </Text>
+        <Group justify="center">
+          <Button variant="subtle" size="md" onClick={() => navigate(-1)}>
+            返回
+          </Button>
+        </Group>
+      </Container>
+    </DefaultContainer>
+  );
+}