添加 Android 打包工作流并实现响应式设计

- 在 GitHub Actions 中添加 Android 打包工作流，支持 ARM64、ARMv7 和 x86_64 架构
- 创建 CI 脚本用于解析提交信息和应用版本号
- 移除标题栏的旋转屏幕按钮，简化窗口控制
- 创建响应式设计 hooks (useResponsive) 用于检测屏幕尺寸
- 更新 StudentManager 组件以支持移动端响应式布局
- 在移动设备上自动调整表格列宽、按钮大小和字体大小
- 移动端隐藏标签列以节省空间
- 按钮在移动端使用垂直布局和更小的尺寸

src/App.tsx

@@ -52,7 +52,7 @@ function MainContent(): React.JSX.Element {
   const [authVisible, setAuthVisible] = useState(false)
   const [authPassword, setAuthPassword] = useState("")
   const [authLoading, setAuthLoading] = useState(false)
-  const [isPortraitMode, setIsPortraitMode] = useState(defaultPortraitMode)
+  const [isPortraitMode] = useState(defaultPortraitMode)
   const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultPortraitMode)
   const [floatingSidebarExpanded, setFloatingSidebarExpanded] = useState(false)
   const [syncConflictVisible, setSyncConflictVisible] = useState(false)
@@ -149,7 +149,8 @@ function MainContent(): React.JSX.Element {
       const res = await api.dbSyncApply(strategy)
       if (res?.success && res?.data?.success) {
         messageApi.success(
-          res.data.message || `同步完成（同步 ${res.data.synced_records} 条，解决冲突 ${res.data.resolved_conflicts} 条）`
+          res.data.message ||
+            `同步完成（同步 ${res.data.synced_records} 条，解决冲突 ${res.data.resolved_conflicts} 条）`
         )
         window.dispatchEvent(
           new CustomEvent("ss:data-updated", { detail: { category: "all", source: "sync" } })
@@ -178,7 +179,11 @@ function MainContent(): React.JSX.Element {
       try {
         syncCheckingRef.current = true
         const statusRes = await api.dbGetStatus()
-        if (!statusRes?.success || statusRes?.data?.type !== "postgresql" || !statusRes?.data?.connected) {
+        if (
+          !statusRes?.success ||
+          statusRes?.data?.type !== "postgresql" ||
+          !statusRes?.data?.connected
+        ) {
           return
         }
 
@@ -279,40 +284,6 @@ function MainContent(): React.JSX.Element {
     if (key === "settings") navigate("/settings")
   }
 
-  const toggleOrientationMode = async () => {
-    const api = (window as any).api
-    if (!api) return
-
-    const nextPortraitMode = !isPortraitMode
-    try {
-      const maximized = await api.windowIsMaximized()
-      if (maximized) {
-        await api.windowMaximize()
-      }
-      if (nextPortraitMode) {
-        await api.windowSetResizable(false)
-        await api.windowResize(940, 1600)
-        setSidebarCollapsed(true)
-        setFloatingSidebarExpanded(false)
-      } else {
-        await api.windowSetResizable(true)
-        await api.windowResize(2560, 1440)
-        setSidebarCollapsed(false)
-        setFloatingSidebarExpanded(false)
-      }
-      setIsPortraitMode(nextPortraitMode)
-    } catch (error) {
-      messageApi.error(t("common.error"))
-      console.error("Failed to toggle orientation mode:", error)
-    }
-  }
-
-  useEffect(() => {
-    if (!isPortraitMode || !sidebarCollapsed) {
-      setFloatingSidebarExpanded(false)
-    }
-  }, [isPortraitMode, sidebarCollapsed])
-
   const toggleSidebar = () => {
     if (isPortraitMode && sidebarCollapsed) {
       setFloatingSidebarExpanded((prev) => !prev)
@@ -357,7 +328,6 @@ function MainContent(): React.JSX.Element {
           floatingExpand={isPortraitMode}
           floatingExpanded={floatingSidebarExpanded}
           onToggleSidebar={toggleSidebar}
-          onToggleOrientation={toggleOrientationMode}
         />
 
         <OOBE visible={wizardVisible} onComplete={() => setWizardVisible(false)} />
@@ -396,7 +366,9 @@ function MainContent(): React.JSX.Element {
           maskClosable={false}
           destroyOnClose
         >
-          <div style={{ marginBottom: "10px", color: "var(--ss-text-secondary)", fontSize: "12px" }}>
+          <div
+            style={{ marginBottom: "10px", color: "var(--ss-text-secondary)", fontSize: "12px" }}
+          >
             自动同步发现冲突，请选择冲突时优先保留哪一侧的数据。
           </div>
           <div

src/components/ContentArea.tsx

@@ -28,9 +28,7 @@ const SettlementHistory = lazy(() =>
 const AutoScoreManager = lazy(() =>
   loadAutoScoreManager().then((m) => ({ default: m.AutoScoreManager }))
 )
-const RewardSettings = lazy(() =>
-  loadRewardSettings().then((m) => ({ default: m.RewardSettings }))
-)
+const RewardSettings = lazy(() => loadRewardSettings().then((m) => ({ default: m.RewardSettings })))
 const BoardManager = lazy(() => loadBoardManager().then((m) => ({ default: m.BoardManager })))
 
 const warmupRouteChunks = () =>
@@ -60,7 +58,6 @@ interface ContentAreaProps {
   floatingExpand: boolean
   floatingExpanded: boolean
   onToggleSidebar: () => void
-  onToggleOrientation: () => void
 }
 
 export function ContentArea({
@@ -74,7 +71,6 @@ export function ContentArea({
   floatingExpand,
   floatingExpanded,
   onToggleSidebar,
-  onToggleOrientation,
 }: ContentAreaProps): React.JSX.Element {
   const { t } = useTranslation()
 
@@ -153,13 +149,17 @@ export function ContentArea({
             size="small"
             onClick={onToggleSidebar}
             icon={
-              floatingExpand && sidebarCollapsed
-                ? floatingExpanded
-                  ? <MenuFoldOutlined />
-                  : <MenuUnfoldOutlined />
-                : sidebarCollapsed
-                  ? <MenuUnfoldOutlined />
-                  : <MenuFoldOutlined />
+              floatingExpand && sidebarCollapsed ? (
+                floatingExpanded ? (
+                  <MenuFoldOutlined />
+                ) : (
+                  <MenuUnfoldOutlined />
+                )
+              ) : sidebarCollapsed ? (
+                <MenuUnfoldOutlined />
+              ) : (
+                <MenuFoldOutlined />
+              )
             }
             title={sidebarCollapsed ? "展开导航栏" : "收起导航栏"}
             style={{ width: "32px", height: "32px" }}
@@ -199,12 +199,7 @@ export function ContentArea({
             )}
           </Space>
         </div>
-        {showWindowControls && (
-          <WindowControls
-            isPortraitMode={isPortraitMode}
-            onToggleOrientation={onToggleOrientation}
-          />
-        )}
+        {showWindowControls && <WindowControls />}
       </div>
 
       <Content style={{ flex: 1, overflowY: "auto", overflowX: "hidden" }}>

src/components/StudentManager.tsx

@@ -5,6 +5,7 @@ import { UploadOutlined } from "@ant-design/icons"
 import { useTranslation } from "react-i18next"
 import { TagEditorDialog } from "./TagEditorDialog"
 import { getAvatarFromExtraJson, setAvatarInExtraJson } from "../utils/studentAvatar"
+import { useResponsive, useIsMobile, useIsTablet } from "../hooks/useResponsive"
 
 const createXlsxWorker = () => {
   return new Worker(new URL("../workers/xlsxWorker.ts", import.meta.url), {
@@ -48,6 +49,9 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
   const xlsxWorkerRef = useRef<Worker | null>(null)
   const [form] = Form.useForm()
   const [messageApi, contextHolder] = message.useMessage()
+  const isMobile = useIsMobile()
+  const isTablet = useIsTablet()
+  const breakpoint = useResponsive()
 
   useEffect(() => {
     xlsxWorkerRef.current = createXlsxWorker()
@@ -470,107 +474,148 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
     }
   }
 
-  const columns: ColumnsType<student> = [
-    {
-      title: t("students.avatar"),
-      key: "avatar",
-      width: 88,
-      align: "center",
-      render: (_, row) =>
-        row.avatarUrl ? (
-          <img
-            src={row.avatarUrl}
-            alt={row.name}
+  const columns: ColumnsType<student> = useMemo(() => {
+    const baseColumns: ColumnsType<student> = [
+      {
+        title: t("students.avatar"),
+        key: "avatar",
+        width: isMobile ? 60 : 88,
+        align: "center",
+        render: (_, row) =>
+          row.avatarUrl ? (
+            <img
+              src={row.avatarUrl}
+              alt={row.name}
+              style={{
+                width: isMobile ? 24 : 32,
+                height: isMobile ? 24 : 32,
+                borderRadius: "50%",
+                objectFit: "cover",
+                border: "1px solid var(--ss-border-color)",
+              }}
+            />
+          ) : (
+            <div
+              style={{
+                width: isMobile ? 24 : 32,
+                height: isMobile ? 24 : 32,
+                borderRadius: "50%",
+                margin: "0 auto",
+                backgroundColor: "var(--ss-bg-color)",
+                border: "1px dashed var(--ss-border-color)",
+                color: "var(--ss-text-secondary)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: isMobile ? 10 : 12,
+              }}
+            >
+              -
+            </div>
+          ),
+      },
+      {
+        title: t("students.name"),
+        dataIndex: "name",
+        key: "name",
+        width: isMobile ? 80 : 100,
+        ellipsis: true,
+      },
+      {
+        title: t("students.currentScore"),
+        dataIndex: "score",
+        key: "score",
+        width: isMobile ? 100 : 160,
+        align: "center",
+        render: (score: number) => (
+          <span
             style={{
-              width: 32,
-              height: 32,
-              borderRadius: "50%",
-              objectFit: "cover",
-              border: "1px solid var(--ss-border-color)",
-            }}
-          />
-        ) : (
-          <div
-            style={{
-              width: 32,
-              height: 32,
-              borderRadius: "50%",
-              margin: "0 auto",
-              backgroundColor: "var(--ss-bg-color)",
-              border: "1px dashed var(--ss-border-color)",
-              color: "var(--ss-text-secondary)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 12,
+              fontWeight: "bold",
+              color:
+                score > 0
+                  ? "var(--ant-color-success, #52c41a)"
+                  : score < 0
+                    ? "var(--ant-color-error, #ff4d4f)"
+                    : "inherit",
+              fontSize: isMobile ? 12 : 14,
             }}
           >
-            -
-          </div>
+            {score > 0 ? `+${score}` : score}
+          </span>
         ),
-    },
-    { title: t("students.name"), dataIndex: "name", key: "name", width: 100 },
-    {
-      title: t("students.currentScore"),
-      dataIndex: "score",
-      key: "score",
-      width: 160,
-      align: "center",
-      render: (score: number) => (
-        <span
-          style={{
-            fontWeight: "bold",
-            color:
-              score > 0
-                ? "var(--ant-color-success, #52c41a)"
-                : score < 0
-                  ? "var(--ant-color-error, #ff4d4f)"
-                  : "inherit",
-          }}
-        >
-          {score > 0 ? `+${score}` : score}
-        </span>
-      ),
-    },
-    {
-      title: t("students.tags"),
-      dataIndex: "tags",
-      key: "tags",
-      width: 200,
-      render: (tags: string[] = []) => (
-        <Space>
-          {tags.length === 0 ? (
-            <span style={{ color: "var(--ss-text-secondary)" }}>{t("students.noTags")}</span>
-          ) : (
-            tags.slice(0, 3).map((tag) => (
-              <Tag key={tag} color="blue">
-                {tag}
+      },
+      {
+        title: t("students.tags"),
+        dataIndex: "tags",
+        key: "tags",
+        width: isMobile ? 120 : 200,
+        render: (tags: string[] = []) => (
+          <Space size={isMobile ? 2 : 4}>
+            {tags.length === 0 ? (
+              <span style={{ color: "var(--ss-text-secondary)", fontSize: isMobile ? 10 : 12 }}>
+                {t("students.noTags")}
+              </span>
+            ) : (
+              tags.slice(0, isMobile ? 2 : 3).map((tag) => (
+                <Tag key={tag} color="blue" style={{ fontSize: isMobile ? 10 : 12, margin: 0 }}>
+                  {tag}
+                </Tag>
+              ))
+            )}
+            {tags.length > (isMobile ? 2 : 3) && (
+              <Tag style={{ fontSize: isMobile ? 10 : 12, margin: 0 }}>
+                +{tags.length - (isMobile ? 2 : 3)}
               </Tag>
-            ))
-          )}
-          {tags.length > 3 && <Tag>+{tags.length - 3}</Tag>}
-        </Space>
-      ),
-    },
-    {
-      title: t("common.operation"),
-      key: "operation",
-      width: 220,
-      render: (_, row) => (
-        <Space>
-          <Button type="link" disabled={!canEdit} onClick={() => handleOpenTagEditor(row)}>
-            {t("students.editTags")}
-          </Button>
-          <Button type="link" disabled={!canEdit} onClick={() => handleOpenAvatarEditor(row)}>
-            {t("students.editAvatar")}
-          </Button>
-          <Button type="link" danger disabled={!canEdit} onClick={() => handleDelete(row.id)}>
-            {t("common.delete")}
-          </Button>
-        </Space>
-      ),
-    },
-  ]
+            )}
+          </Space>
+        ),
+      },
+      {
+        title: t("common.operation"),
+        key: "operation",
+        width: isMobile ? 150 : 220,
+        fixed: isMobile ? "right" : undefined,
+        render: (_, row) => (
+          <Space size={isMobile ? 4 : 8} direction={isMobile ? "vertical" : "horizontal"}>
+            <Button
+              type="link"
+              size={isMobile ? "small" : "middle"}
+              disabled={!canEdit}
+              onClick={() => handleOpenTagEditor(row)}
+              style={{ padding: isMobile ? "2px 4px" : undefined }}
+            >
+              {t("students.editTags")}
+            </Button>
+            <Button
+              type="link"
+              size={isMobile ? "small" : "middle"}
+              disabled={!canEdit}
+              onClick={() => handleOpenAvatarEditor(row)}
+              style={{ padding: isMobile ? "2px 4px" : undefined }}
+            >
+              {t("students.editAvatar")}
+            </Button>
+            <Button
+              type="link"
+              danger
+              size={isMobile ? "small" : "middle"}
+              disabled={!canEdit}
+              onClick={() => handleDelete(row.id)}
+              style={{ padding: isMobile ? "2px 4px" : undefined }}
+            >
+              {t("common.delete")}
+            </Button>
+          </Space>
+        ),
+      },
+    ]
+
+    if (isMobile) {
+      return baseColumns.filter((col) => col.key !== "tags")
+    }
+
+    return baseColumns
+  }, [t, canEdit, isMobile, isTablet, breakpoint])
 
   const paginatedData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize)
 
@@ -649,7 +694,12 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
             placeholder={t("students.importTextPlaceholder")}
             disabled={!canEdit || textImportLoading}
           />
-          <Button type="primary" loading={textImportLoading} disabled={!canEdit} onClick={handleImportTextNames}>
+          <Button
+            type="primary"
+            loading={textImportLoading}
+            disabled={!canEdit}
+            onClick={handleImportTextNames}
+          >
             {t("students.importByText")}
           </Button>
           <Button

src/components/WindowControls.tsx

@@ -4,19 +4,10 @@ import {
   BorderOutlined,
   CloseOutlined,
   FullscreenExitOutlined,
-  RotateRightOutlined,
 } from "@ant-design/icons"
 import { useEffect, useState } from "react"
 
-interface WindowControlsProps {
-  isPortraitMode: boolean
-  onToggleOrientation: () => void
-}
-
-export function WindowControls({
-  isPortraitMode,
-  onToggleOrientation,
-}: WindowControlsProps): React.JSX.Element {
+export function WindowControls(): React.JSX.Element {
   const [isMaximized, setIsMaximized] = useState(false)
 
   useEffect(() => {
@@ -76,14 +67,6 @@ export function WindowControls({
         } as React.CSSProperties
       }
     >
-      <Button
-        type="text"
-        onClick={onToggleOrientation}
-        title={isPortraitMode ? "切换到横屏模式" : "切换到竖屏模式"}
-        style={{ width: "46px", height: "32px", borderRadius: 0 }}
-      >
-        <RotateRightOutlined />
-      </Button>
       <Button
         type="text"
         onClick={minimize}

src/hooks/useResponsive.ts

@@ -0,0 +1,88 @@
+import { useState, useEffect } from "react"
+
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
+
+export interface Breakpoints {
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+  xxl: number
+}
+
+const defaultBreakpoints: Breakpoints = {
+  xs: 480,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+}
+
+export function useResponsive(customBreakpoints?: Partial<Breakpoints>): Breakpoint {
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>("lg")
+  const breakpoints = { ...defaultBreakpoints, ...customBreakpoints }
+
+  useEffect(() => {
+    const updateBreakpoint = () => {
+      const width = window.innerWidth
+
+      if (width < breakpoints.xs) {
+        setBreakpoint("xs")
+      } else if (width < breakpoints.sm) {
+        setBreakpoint("sm")
+      } else if (width < breakpoints.md) {
+        setBreakpoint("md")
+      } else if (width < breakpoints.lg) {
+        setBreakpoint("lg")
+      } else if (width < breakpoints.xl) {
+        setBreakpoint("xl")
+      } else {
+        setBreakpoint("xxl")
+      }
+    }
+
+    updateBreakpoint()
+    window.addEventListener("resize", updateBreakpoint)
+    return () => window.removeEventListener("resize", updateBreakpoint)
+  }, [breakpoints])
+
+  return breakpoint
+}
+
+export function useScreenSize() {
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [])
+
+  return screenSize
+}
+
+export function useIsMobile() {
+  const breakpoint = useResponsive()
+  return breakpoint === "xs" || breakpoint === "sm"
+}
+
+export function useIsTablet() {
+  const breakpoint = useResponsive()
+  return breakpoint === "md"
+}
+
+export function useIsDesktop() {
+  const breakpoint = useResponsive()
+  return breakpoint === "lg" || breakpoint === "xl" || breakpoint === "xxl"
+}