feat(task): task detail

app/management/person/collection/detail/page.tsx

@@ -2,13 +2,16 @@
 
 import { getProjectDetailById } from "@/components/label/api/project"
 import { ProjectDetail } from "@/components/label/api/project/typing"
-import { useAllUserStore, useBackUrlStore } from "@/components/label/store/auth"
+import {
+  useAllUserStore,
+  useBackUrlStore,
+  usePermissionStore,
+} from "@/components/label/store/auth"
 import {
   Breadcrumbs,
   Button,
   Group,
   Paper,
-  SegmentedControl,
   Stack,
   Text,
   UnstyledButton,
@@ -33,6 +36,12 @@ export default function CollectionDetailPage() {
 
   const { backTitle, setBackProps } = useBackUrlStore()
   const { userOpts } = useAllUserStore()
+  const permissions = usePermissionStore((s) => s.detailInfo?.permissions)
+
+  const canConfig = useMemo(() => {
+    const v = permissions?.project?.config?.[0]
+    return typeof v === "boolean" ? v : true
+  }, [permissions])
 
   const [selectKey, setSelectedKey] = useState<TabKey>(
     (backTitle as TabKey) || "own"
@@ -131,6 +140,62 @@ export default function CollectionDetailPage() {
     ))
   }, [info?.name, router, type])
 
+  const menuItems = useMemo(() => {
+    const arr: Array<{ label: string; key: TabKey }> = [
+      { label: "我的任务", key: "own" },
+      { label: "任务列表", key: "all" },
+    ]
+    if (canConfig) arr.push({ label: "任务配置", key: "setting" })
+    return arr
+  }, [canConfig])
+
+  useEffect(() => {
+    if (menuItems.some((i) => i.key === selectKey)) return
+    queueMicrotask(() => {
+      setSelectedKey(menuItems[0]?.key ?? "own")
+    })
+  }, [menuItems, selectKey])
+
+  const DetailMenuItems = () => {
+    return (
+      <Group gap={0} wrap="nowrap">
+        {menuItems.map((item, index) => {
+          const active = item.key === selectKey
+          return (
+            <UnstyledButton
+              key={item.key}
+              onClick={() => {
+                const next = item.key
+                setSelectedKey(next)
+                const backUrl = type
+                  ? `/management/person/collection/detail?id=${projectId}&type=${type}`
+                  : `/management/person/collection/detail?id=${projectId}`
+                setBackProps(backUrl, next)
+              }}
+              style={{
+                paddingLeft: 14,
+                paddingRight: 14,
+                paddingTop: 6,
+                paddingBottom: 6,
+                borderTopLeftRadius: index === 0 ? 10 : 0,
+                borderBottomLeftRadius: index === 0 ? 10 : 0,
+                borderTopRightRadius: index === menuItems.length - 1 ? 10 : 0,
+                borderBottomRightRadius:
+                  index === menuItems.length - 1 ? 10 : 0,
+                background: active
+                  ? "var(--mantine-color-brand-filled)"
+                  : "rgba(0,0,0,0.04)",
+              }}>
+              <Text size="sm" fw={600} c={active ? "white" : "dimmed"}>
+                {item.label}
+              </Text>
+            </UnstyledButton>
+          )
+        })}
+      </Group>
+    )
+  }
+
   return (
     <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
       <Paper
@@ -155,52 +220,34 @@ export default function CollectionDetailPage() {
             </Button>
             <Breadcrumbs separator=">">{breadcrumbsItems}</Breadcrumbs>
           </Group>
-          <SegmentedControl
-            value={selectKey}
-            data={[
-              { label: "我的任务", value: "own" },
-              { label: "任务列表", value: "all" },
-              { label: "任务配置", value: "setting" },
-            ]}
-            onChange={(v) => {
-              const next = v as TabKey
-              setSelectedKey(next)
-              const backUrl = type
-                ? `/management/person/collection/detail?id=${projectId}&type=${type}`
-                : `/management/person/collection/detail?id=${projectId}`
-              setBackProps(backUrl, next)
-            }}
-          />
         </Group>
       </Paper>
 
-      <Paper
-        withBorder
-        p="md"
-        radius="md"
-        style={{
-          borderColor: "rgba(0,0,0,0.06)",
-          flex: 1,
-          minHeight: 0,
-          display: "flex",
-        }}>
-        <Stack style={{ flex: 1, minHeight: 0 }} gap="md">
-          {selectKey === "own" ? (
-            <OwnTaskTableContainer info={info} userEnums={userEnums} />
-          ) : null}
-          {selectKey === "all" ? (
-            <TaskTableContainer info={info} userEnums={userEnums} />
-          ) : null}
-          {selectKey === "board" ? <TaskBoardContainer /> : null}
-          {selectKey === "setting" ? (
-            <InfoSettingContainer
-              info={info}
-              userEnums={userEnums}
-              update={updateProjectInfo}
-            />
-          ) : null}
-        </Stack>
-      </Paper>
+      <Stack style={{ flex: 1, minHeight: 0 }} gap="md">
+        {selectKey === "own" ? (
+          <OwnTaskTableContainer
+            info={info}
+            userEnums={userEnums}
+            menuAction={DetailMenuItems}
+          />
+        ) : null}
+        {selectKey === "all" ? (
+          <TaskTableContainer
+            info={info}
+            userEnums={userEnums}
+            menuAction={DetailMenuItems}
+          />
+        ) : null}
+        {selectKey === "board" ? <TaskBoardContainer /> : null}
+        {selectKey === "setting" ? (
+          <InfoSettingContainer
+            info={info}
+            userEnums={userEnums}
+            updateAction={updateProjectInfo}
+            menuAction={DetailMenuItems}
+          />
+        ) : null}
+      </Stack>
     </Stack>
   )
 }