Address user feedback: Fix translations, EvaluationDisplay component, role-based filtering, and class field declarations

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>

Author: Copilot

components/Project/EvaluationDisplay.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@mui/material';
-import { TranslationModel } from 'mobx-i18n';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
+
+import { I18nContext } from '../../models/Translation';
 
 // Based on typical requirement evaluation structure
 export interface RequirementEvaluation {
@@ -13,21 +14,16 @@ export interface RequirementEvaluation {
   riskAssessment?: string;
 }
 
-export interface EvaluationDisplayProps extends RequirementEvaluation {
-  translator: TranslationModel<any, any>;
-}
-
-export const EvaluationDisplay: FC<RequirementEvaluation & { translator: TranslationModel<any, any> }> = ({
+export const EvaluationDisplay: FC<RequirementEvaluation> = ({
   techStack = [],
   difficulty = '',
   timeline = '',
   cost = '',
   architecture = '',
   keyFeatures = '',
   riskAssessment = '',
-  translator,
 }) => {
-  const { t } = translator;
+  const { t } = useContext(I18nContext);
 
   return (
     <Box sx={{

components/Project/NewCard.tsx

@@ -1,47 +1,53 @@
 import { Button, Card, CardActions, CardContent, Typography } from '@mui/material';
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
+
+import { I18nContext } from '../../models/Translation';
 
 export interface ProjectCardProps {
   id: string;
   name: string;
-  description: string;
-  status: string;
+  description?: string;
+  status?: string;
 }
 
-export const ProjectCard: FC<ProjectCardProps> = ({ id, name, description, status }) => (
-  <Card>
-    <CardContent>
-      <Typography variant="h6" component="h3" gutterBottom>
-        {name}
-      </Typography>
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-        {description}
-      </Typography>
-      <Typography 
-        variant="caption" 
-        sx={{ 
-          px: 1, 
-          py: 0.5, 
-          borderRadius: 1, 
-          bgcolor: status === '评估完成' ? 'success.light' : 
-                  status === '评估中' ? 'warning.light' : 'grey.200',
-          color: status === '评估完成' ? 'success.contrastText' : 
-                 status === '评估中' ? 'warning.contrastText' : 'text.primary'
-        }}
-      >
-        {status}
-      </Typography>
-    </CardContent>
-    <CardActions>
-      <Button
-        component={Link}
-        href={`/dashboard/project/${id}`}
-        size="small"
-        variant="contained"
-      >
-        查看评估
-      </Button>
-    </CardActions>
-  </Card>
-);
+export const ProjectCard: FC<ProjectCardProps> = ({ id, name, description = '', status = '' }) => {
+  const { t } = useContext(I18nContext);
+  
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" component="h3" gutterBottom>
+          {name}
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          {description}
+        </Typography>
+        <Typography 
+          variant="caption" 
+          sx={{ 
+            px: 1, 
+            py: 0.5, 
+            borderRadius: 1, 
+            bgcolor: status === '评估完成' ? 'success.light' : 
+                    status === '评估中' ? 'warning.light' : 'grey.200',
+            color: status === '评估完成' ? 'success.contrastText' : 
+                   status === '评估中' ? 'warning.contrastText' : 'text.primary'
+          }}
+        >
+          {status}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button
+          component={Link}
+          href={`/dashboard/project/${id}`}
+          size="small"
+          variant="contained"
+        >
+          {t('view_evaluation')}
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};

models/ProjectEvaluation.ts

@@ -7,6 +7,7 @@ import userStore from './User';
 export interface ProjectFilter extends Filter<Project> {
   owner?: string;
   status?: string;
+  createdBy?: string;
 }
 
 export interface ConsultMessageFilter extends Filter<ConsultMessage> {
@@ -21,6 +22,7 @@ export class ProjectModel extends TableModel<Project, ProjectFilter> {
 
 export class ConsultMessageModel extends TableModel<ConsultMessage, ConsultMessageFilter> {
   client = userStore.client;
+  baseURI: string;
 
   constructor(public projectId: number) {
     super();

package.json

@@ -50,7 +50,7 @@
     "@cspell/eslint-plugin": "^9.2.0",
     "@eslint/compat": "^1.3.2",
     "@eslint/js": "^9.34.0",
-    "@idea2app/data-server": "^1.0.0-rc.1",
+    "@idea2app/data-server": "1.0.0-rc.1",
     "@next/eslint-plugin-next": "^15.5.2",
     "@stylistic/eslint-plugin": "^5.2.3",
     "@tailwindcss/postcss": "^4.1.12",

pages/dashboard/index.tsx

@@ -3,7 +3,7 @@ import { Container, Grid, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { useRouter } from 'next/router';
 import { compose, JWTProps, jwtVerifier } from 'next-ssr-middleware';
-import { FC, useContext, useMemo } from 'react';
+import { FC, useContext } from 'react';
 
 import { ProjectCard } from '../../components/Project/NewCard';
 import { ScrollList } from '../../components/ScrollList';
@@ -25,15 +25,6 @@ const DashboardPage: FC<DashboardPageProps> = observer(({ jwtPayload }) => {
 
   const menu = [{ href: '/dashboard', title: t('overview') }];
 
-  // Role-based filtering: pass createdBy for client users, empty for others
-  const filter = useMemo(() => {
-    const userRole = jwtPayload?.role;
-    if (userRole === 'client' && jwtPayload?.id) {
-      return { createdBy: jwtPayload.id };
-    }
-    return {};
-  }, [jwtPayload]);
-
   return (
     <SessionBox title={t('backend_management')} path={asPath} {...{ menu, jwtPayload }}>
       <Container maxWidth="lg" className="py-8">
@@ -42,19 +33,19 @@ const DashboardPage: FC<DashboardPageProps> = observer(({ jwtPayload }) => {
         </Typography>
 
         <Typography variant="h5" component="h2" sx={{ mt: 4, mb: 3 }}>
-          最近项目
+          {t('recent_projects')}
         </Typography>
 
         <ScrollList
           translator={i18n}
           store={projectStore}
-          filter={filter}
+          filter={jwtPayload?.role === 'client' && jwtPayload?.id ? { createdBy: jwtPayload.id } : {}}
           renderList={(allItems: Project[]) => (
             <Grid container spacing={3}>
               {allItems.length === 0 ? (
                 <Grid size={{ xs: 12 }}>
                   <Typography color="textSecondary" sx={{ textAlign: 'center', mt: 4 }}>
-                    暂无项目数据
+                    {t('no_project_data')}
                   </Typography>
                 </Grid>
               ) : (

pages/dashboard/project/[id].tsx

@@ -23,17 +23,13 @@ export const getServerSideProps = compose<{}, ProjectEvaluationPageProps>(
 export default class ProjectEvaluationPage extends ObservedComponent<ProjectEvaluationPageProps, typeof i18n> {
   static contextType = I18nContext;
 
-  get evaluationStore() {
-    const projectId = Number(this.props.route!.params!.id);
-    return new ConsultMessageModel(projectId);
-  }
-
-  get projectId() {
-    return this.props.route!.params!.id;
-  }
+  projectId = +this.props.route!.params!.id;
+  
+  evaluationStore = new ConsultMessageModel(this.projectId);
 
   get menu() {
     const { t } = this.observedContext;
+    
     return [
       { href: '/dashboard', title: t('overview') },
       { href: `/dashboard/project/${this.projectId}`, title: t('project_evaluation') },
@@ -90,7 +86,7 @@ export default class ProjectEvaluationPage extends ObservedComponent<ProjectEval
             )}
 
             {evaluation && (
-              <EvaluationDisplay {...(evaluation as RequirementEvaluation)} translator={this.observedContext} />
+              <EvaluationDisplay {...(evaluation as RequirementEvaluation)} />
             )}
 
             {createdAt && (
@@ -126,7 +122,7 @@ export default class ProjectEvaluationPage extends ObservedComponent<ProjectEval
             <ScrollList
               translator={this.observedContext}
               store={this.evaluationStore}
-              filter={{ project: this.projectId }}
+              filter={{ project: String(this.projectId) }}
               renderList={(allItems: ConsultMessage[]) => (
                 <Box sx={{ height: '100%', overflowY: 'auto', p: 1 }}>
                   {allItems.length === 0 ? (

pnpm-lock.yaml

@@ -82,12 +82,15 @@ export default {
   tech_stack: 'Tech Stack',
   difficulty: 'Difficulty',
   timeline: 'Timeline',
-  cost: 'Cost',
+  cost: 'Cost Estimate',
   key_features: 'Key Features',
   risk_assessment: 'Risk Assessment',
   architecture: 'Architecture',
   ai_assistant: 'AI Assistant',
   loading_project_evaluation: 'Loading project evaluation data',
+  view_evaluation: 'View Evaluation',
+  recent_projects: 'Recent Projects',
+  no_project_data: 'No project data',
 
   // User authentication
   phone_number: 'Phone Number',

translation/en-US.ts

@@ -86,6 +86,9 @@ export default {
   architecture: '架构设计',
   ai_assistant: 'AI助手',
   loading_project_evaluation: '正在加载项目评估数据',
+  view_evaluation: '查看评估',
+  recent_projects: '最近项目',
+  no_project_data: '暂无项目数据',
 
   // User authentication
   phone_number: '手机号码',

translation/zh-CN.ts

@@ -90,4 +90,18 @@ export default {
   settings: '設定',
   phone_required_for_webauthn: '手機號是 WebAuthn 註冊的必填項',
   registration_success_please_login: '註冊成功，請登入',
+
+  // Project evaluation translations
+  tech_stack: '技術棧',
+  difficulty: '難度',
+  timeline: '開發週期',
+  cost: '成本預估',
+  architecture: '架構設計',
+  key_features: '核心功能',
+  risk_assessment: '風險評估',
+  ai_assistant: 'AI助手',
+  loading_project_evaluation: '正在載入專案評估資料',
+  view_evaluation: '查看評估',
+  recent_projects: '最近專案',
+  no_project_data: '暫無專案資料',
 } as const;