Merge pull request #53 from guanweiwang/main

yokowu · web-flow · commit 4f2db72fcbf8 · 2025-07-04T11:41:58.000+08:00
feat: 优化用户展示, 更多贡献榜
diff --git a/ui/src/components/avatar/index.tsx b/ui/src/components/avatar/index.tsx
@@ -1,6 +1,5 @@
 import Logo from '@/assets/images/logo.png';
 import { Avatar as MuiAvatar, type SxProps } from '@mui/material';
-import { Icon } from '@c-x/ui';
 import { type ReactNode } from 'react';
 
 interface AvatarProps {
@@ -41,21 +40,15 @@ function stringAvatar(name: string) {
 
 const Avatar = (props: AvatarProps) => {
   const src = props.src;
+  const avatarObj = props.name ? stringAvatar(props.name) : undefined;
   return (
     <MuiAvatar
-      // sx={{
-      //   img: { objectFit: 'contain' },
-      //   bgcolor: 'transparent',
-      //   ...props.sx,
-      // }}
-
+      sx={props.name ? { ...avatarObj!.sx, ...props.sx } : props.sx}
       {...(props.name
-        ? stringAvatar(props.name)
-        : {
-            children: <img src={Logo} alt='logo' />,
-          })}
+        ? { children: avatarObj!.children }
+        : { children: <img src={Logo} alt='logo' /> })}
       src={src}
-    ></MuiAvatar>
+    />
   );
 };
 
diff --git a/ui/src/components/markDown/code.tsx b/ui/src/components/markDown/code.tsx
@@ -0,0 +1,60 @@
+// @ts-nocheck
+import React from 'react';
+
+const Code = () => {
+  return (
+    <div style={{ height: 420 }}>
+      <MonacoEditor
+        height='100%'
+        language={getBaseLanguageId(data?.program_language || 'plaintext')}
+        value={editorValue}
+        theme='vs-dark'
+        options={{
+          readOnly: true,
+          minimap: { enabled: false },
+          fontSize: 14,
+          scrollBeyondLastLine: false,
+          wordWrap: 'on',
+          lineNumbers: 'on',
+          glyphMargin: false,
+          folding: false,
+          overviewRulerLanes: 0,
+          guides: {
+            indentation: true,
+            highlightActiveIndentation: true,
+            highlightActiveBracketPair: false,
+          },
+          renderLineHighlight: 'none',
+          cursorStyle: 'line',
+          cursorBlinking: 'solid',
+          cursorWidth: 0,
+          contextmenu: false,
+          selectionHighlight: false,
+          selectOnLineNumbers: false,
+          occurrencesHighlight: 'off',
+          links: false,
+          hover: { enabled: false },
+          codeLens: false,
+          dragAndDrop: false,
+          mouseWheelZoom: false,
+          accessibilitySupport: 'off',
+          bracketPairColorization: { enabled: false },
+          matchBrackets: 'never',
+        }}
+        onMount={(editor) => {
+          editorRef.current = editor;
+          setEditorReady(true);
+          // 隐藏光标
+          const editorDom = editor.getDomNode();
+          if (editorDom) {
+            const style = document.createElement('style');
+            style.innerHTML = `.monaco-editor .cursor { display: none !important; }`;
+            editorDom.appendChild(style);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default Code;
diff --git a/ui/src/components/user/index.tsx b/ui/src/components/user/index.tsx
@@ -0,0 +1,43 @@
+import { Stack, Link, Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import Avatar from '../avatar';
+
+const User = ({
+  id,
+  username = '',
+  email = '',
+}: {
+  id?: string;
+  username?: string;
+  email?: string;
+}) => {
+  return (
+    <Stack>
+      <Link
+        component={RouterLink}
+        to={id ? `/dashboard/member/${id}` : ''}
+        sx={{
+          '&:hover': {
+            color: id ? 'info.main' : 'text.primary',
+          },
+          cursor: 'pointer',
+        }}
+      >
+        <Stack direction={'row'} alignItems={'center'} gap={1}>
+          <Avatar
+            name={username}
+            sx={{ width: 22, height: 22, fontSize: 14 }}
+          />
+          <Typography>{username}</Typography>
+        </Stack>
+      </Link>
+      {email && (
+        <Typography color='text.auxiliary' sx={{ fontSize: 14 }}>
+          {email}
+        </Typography>
+      )}
+    </Stack>
+  );
+};
+
+export default User;
diff --git a/ui/src/pages/admin/adminTable.tsx b/ui/src/pages/admin/adminTable.tsx
@@ -17,7 +17,7 @@ import dayjs from 'dayjs';
 import { DomainAdminUser } from '@/api/types';
 import { Controller, useForm } from 'react-hook-form';
 import { useEffect, useState } from 'react';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import User from '@/components/user';
 
 const AddAdminModal = ({
   open,
@@ -182,6 +182,9 @@ const AdminTable = () => {
     {
       title: '账号',
       dataIndex: 'username',
+      render: (text) => {
+        return <User username={text} />;
+      },
     },
     {
       title: '最近活跃时间',
diff --git a/ui/src/pages/admin/loginHistory.tsx b/ui/src/pages/admin/loginHistory.tsx
@@ -5,7 +5,8 @@ import dayjs from 'dayjs';
 import { useRequest } from 'ahooks';
 import { getAdminLoginHistory } from '@/api/User';
 import { ColumnsType } from '@c-x/ui/dist/Table';
-import { DomainListAdminLoginHistoryResp, DomainAdminUser } from '@/api/types';
+import { DomainListAdminLoginHistoryResp } from '@/api/types';
+import User from '@/components/user';
 
 type LoginHistory = NonNullable<
   DomainListAdminLoginHistoryResp['login_histories']
@@ -18,7 +19,7 @@ const LoginHistory = () => {
       title: '账号',
       dataIndex: 'user',
       render: (user, record) => {
-        return record?.user?.username;
+        return <User username={record!.user!.username!} />;
       },
     },
     {
diff --git a/ui/src/pages/chat/index.tsx b/ui/src/pages/chat/index.tsx
@@ -1,23 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Ellipsis } from '@c-x/ui';
+import { Table } from '@c-x/ui';
 import { getListChatRecord } from '@/api/Billing';
-import { aggregatedTime } from '@/utils';
 import dayjs from 'dayjs';
-import { convertTokensToRMB } from '@/utils';
 
 import Card from '@/components/card';
-import { Box, Stack, styled, Chip } from '@mui/material';
+import { Box } from '@mui/material';
 import StyledLabel from '@/components/label';
 
 import ChatDetailModal from './chatDetailModal';
 import { ColumnsType } from '@c-x/ui/dist/Table';
-import { DomainChatRecord } from '@/api/types';
+import { DomainChatRecord, DomainUser } from '@/api/types';
 import { addCommasToNumber } from '@/utils';
-
-const StyledHighlightText = styled('span')(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
-  fontWeight: 700,
-}));
+import User from '@/components/user';
 
 const Chat = () => {
   const [page, setPage] = useState(1);
@@ -47,9 +41,15 @@ const Chat = () => {
     {
       dataIndex: 'user',
       title: '成员',
-      width: 160,
-      render(value: DomainChatRecord['user']) {
-        return value?.username;
+      width: 260,
+      render(value: DomainUser) {
+        return (
+          <User
+            id={value.id!}
+            username={value.username!}
+            email={value.email!}
+          />
+        );
       },
     },
     {
diff --git a/ui/src/pages/completion/index.tsx b/ui/src/pages/completion/index.tsx
@@ -1,29 +1,18 @@
-import React, {
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-  useRef,
-} from 'react';
-import { DomainCompletionRecord } from '@/api/types';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { DomainCompletionRecord, DomainUser } from '@/api/types';
 import { getListCompletionRecord } from '@/api/Billing';
 import { useRequest } from 'ahooks';
 import { Table } from '@c-x/ui';
 import Card from '@/components/card';
 import {
-  Box,
-  Button,
   ButtonBase,
-  Chip,
   Stack,
-  alpha,
   MenuItem,
   Select,
   FormControl,
   InputLabel,
   Autocomplete,
   TextField,
-  InputAdornment,
 } from '@mui/material';
 import { getListUser } from '@/api/User';
 import dayjs from 'dayjs';
@@ -33,6 +22,7 @@ import CompletionDetailModal from './completionDetailModal';
 import StyledLabel from '@/components/label';
 import { LANG_OPTIONS } from './constant';
 import { ArrowDropDown as ArrowDropDownIcon } from '@mui/icons-material';
+import User from '@/components/user';
 
 // 防抖 hook
 function useDebounce(fn: (...args: any[]) => void, delay: number) {
@@ -113,8 +103,14 @@ const Completion = () => {
     {
       dataIndex: 'user',
       title: '成员',
-      render(value: DomainCompletionRecord['user']) {
-        return value?.username;
+      render(value: DomainUser) {
+        return (
+          <User
+            id={value.id!}
+            username={value.username!}
+            email={value.email!}
+          />
+        );
       },
     },
     {
diff --git a/ui/src/pages/dashboard/components/contributionModal.tsx b/ui/src/pages/dashboard/components/contributionModal.tsx
@@ -0,0 +1,64 @@
+import { Box, Stack } from '@mui/material';
+import { DomainUserCodeRank } from '@/api/types';
+import { Modal } from '@c-x/ui';
+import { StyledItem, StyledSerialNumber, StyledText } from './statisticCard';
+
+const ContributionModal = ({
+  open,
+  onCancel,
+  data,
+}: {
+  open: boolean;
+  onCancel: () => void;
+  data: DomainUserCodeRank[];
+}) => {
+  return (
+    <Modal
+      open={open}
+      onCancel={onCancel}
+      title='用户贡献榜'
+      showCancel={false}
+      okText='关闭'
+    >
+      <Box
+        gap={0.5}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {data.map((item, index) => (
+          <Stack
+            direction='row'
+            alignItems='center'
+            justifyContent='space-between'
+            key={item.username}
+          >
+            <StyledItem>
+              <StyledSerialNumber num={index + 1}>
+                {index + 1}
+              </StyledSerialNumber>
+              <Stack
+                direction='row'
+                alignItems='center'
+                gap={1.5}
+                sx={{
+                  flex: 1,
+                  minWidth: 0,
+                }}
+              >
+                {/* <Avatar size={24} src={item.avatar} /> */}
+                <StyledText className='active-user-name'>
+                  {item.username}
+                </StyledText>
+              </Stack>
+            </StyledItem>
+            <Box sx={{ fontSize: 14 }}>{item.lines}</Box>
+          </Stack>
+        ))}
+      </Box>
+    </Modal>
+  );
+};
+
+export default ContributionModal;
diff --git a/ui/src/pages/dashboard/components/statisticCard.tsx b/ui/src/pages/dashboard/components/statisticCard.tsx
diff --git a/ui/src/pages/user/index.tsx b/ui/src/pages/user/index.tsx
diff --git a/ui/src/pages/user/loginHistory.tsx b/ui/src/pages/user/loginHistory.tsx
diff --git a/ui/src/pages/user/memberManage.tsx b/ui/src/pages/user/memberManage.tsx
