tntweb admin
1.0.0
tntweb-admin هو مشروع يساعد المستخدمين على دمج المكتبات البيئية ذات الصلة بالتركيز والتفاعل ويحتوي على إرشادات أفضل الممارسات لتزويد المستخدمين بتجربة غير تقليدية، بما في ذلك على سبيل المثال لا الحصر الوظائف التالية:
تم تطوير هذا المشروع وبنائه باستخدام حزمة الويب، كما أنه يوفر إصدارًا من vite-concent-pro يعتمد على vite.
مثال على الانترنت
git clone https://github.com/tnfe/concent-pro.git
cd concent-pronpm i --registry=https://registry.npmjs.orgnpm start （包含启动前端 和 mock服务）
// 如需分开启动
npm run api （启动mock服务）
npm run app （启动前端）npm run test (jest测试)
npm run lint (eslint校验)
npm run lintfix (eslint修复) git commit -am 'xxxx_msg' (触发 husky钩子 pre-commit: npm run lintfix)
git push (触发 husky钩子 pre-commit: npm run test)
src/configs/menussrc/pagesيمكنك الرجوع إلى
src/pages/_DemoTempalteلعرض نموذج التعليمات البرمجية بعد بدء المشروع، قم بزيارة localhost:3000/template للوصول إلى صفحة المكون.
يمكن إضافة الوحدات في دليل src/models ، أو يمكن إضافة وحدات الأعمال في مكان قريب في pages/XxxComp. لاحظ أنه يجب عرضها في ملف src/models/index.ts ، ويتم الاحتفاظ بأسماء الوحدات بشكل موحد في src/configs/c2Mods.ts الملف
// src/configs/c2Mods.ts文件
export const HELLO = modName('Hello');
export type T_HELLO = typeof HELLO;
hello ضمن src/models ، وافصل بين state الوحدة reducer computed | ____models
| |____hello
| | |____state.ts
| | |____reducer.ts
| | |____computed.ts
| | |____index.tsتعريف الحالة [مطلوب]
function getInitialState ( ) {
return {
str : '' ,
loading : false ,
} ;
}
export type St = ReturnType < typeof getInitialState > ;
export default getInitialState ;تحديد الطريقة [اختياري]
import { St } from './state' ;
import { VoidPayload , AC } from 'types/store' ;
import { T_HELLO } from 'configs/c2Mods' ;
import { delay } from 'utils/timer' ;
type IAC = AC < T_HELLO > ;
export function simpleChange ( payload : string , moduleState : St , ac : IAC ) {
return { str : payload } ;
}
export async function complexChange ( payload : string , moduleState : St , ac : IAC ) {
await ac . setState ( { loading : true } ) ;
await delay ( 2000 ) ;
// 下面两句可合写为：return {str:payload, loading: false};
ac . dispatch ( simpleChange , payload ) ; // 当前文件内复用其他reducer逻辑
return { loading : false } ;
}تحديد الحساب [اختياري]
import { St } from './state' ;
// only value change will triiger this function to execute again
export function reversedStr ( { str } : St ) {
return str . split ( '' ) . reverse ( ) . join ( '' ) ;
} يعرض الملف src/models/hello/index.ts الوحدة النمطية
import { HELLO } from 'configs/c2Mods' ;
import state from './state' ;
import * as computed from './computed' ;
import * as reducer from './reducer' ;
export default {
[ HELLO ] : {
state ,
computed ,
reducer ,
}
} ;
يقدم الملف src/models/index.ts الوحدات النمطية ويدمجها في الوحدة الجذرية
import global from './global'; // 覆写concent内置的$$global模块
import Hello from './hello';
const toExport = {
...Hello,
...global,
};
export default toExport;
يستخدم مكون المهمة useC2Mod لاستهلاك بيانات الوحدة واستخدام أساليب الوحدة
import { useC2Mod } from 'services/concent' ;
import { HELLO } from 'configs/c2Mods' ;
export function SomeComp ( ) {
// state:数据，mr:方法
const { state , mr } = useC2Mod ( HELLO ) ;
} إذا كانت المكونات المقسمة إلى صفحة واحدة لا تتضمن إعادة استخدام عبر الصفحات، فمن المستحسن وضعها بالقرب، وإذا أعيد استخدامها لاحقًا، فانقلها إلى components/** .
يوصى بوضع حالة الوحدة المكونة من صفحتين في مكان قريب
|____config # CRA webpack相关配置[由npm run eject弹出]
|____mock # mock api配置
|____public # webpack-dev-server 静态资源目录
|____scripts # npm 脚本
|____src # 项目源码
|____configs
| |____constant # 各种常量定义处目录
| |____runConcent.ts # 启动concent
| |____menus.ts # 站点菜单配置(包含了路由)
|
|____index.tsx # app入口文件
|____utils # 通用的非业务相关工具函数集合（可以进一步按用途分类）
|____models # [[business models(全局模块配置)]]
| |____index.js # 如需全局各个组件共享的model，可提升到此处导出（model可就近放置也可放到models目录下）
| |____global # [[ 一个标准的模块文件(可以copy到各处，只需修改meta里的模块名即可 ]]
| | |____index.ts # 模型导出文件
| | |____reducer.ts # 修改模块数据方法(可选)
| | |____computed.ts # 模块数据的计算函数(可选)
| | |____watch.ts # 模块数据的观察函数(可选)
| | |____lifecycle.ts # 模块生命周期配置(可选)
| | |____state.ts # 模块状态(必需)
| | |____meta.ts # 模块元数据文件- 导出整个模块的描述对象、相关类型、钩子等
| |____...
| |
|____components # [[多个页面复用的基础组件集合]]
|
|____pages # [[页面组件，通常也是路由组件]]
| |____PageFoo
| |____ model # 当前页面的model定义，方便就近打开就近查看（定义可见models/global）
| |____ dumb # 当前页面的一些业务笨组件（如果出现多个页面重用则可以进一步调整到components/dumb下）
|
|____types # 类型定义目录
| |____store # store相关的各种类型推导文件(这是一个固定的文件，无需用户改动)
| |____mods # 模型推导辅助文件，无需用户修改
| |____ev-map # 事件相关的类型定义
| |____domain # 业务领域相关的对象类型定义，通常是后端返回的对象
| |____biz # 其他一些全局通用的前端定义的对象类型
|
|
|____services # [[services，涉及业务io相关、业务通用逻辑相关下沉到此处]]
| |____domain # 领域模型相关服务
| | |____user
| | |____ticket
| |____common-func # 和领域无关的基础业务函数集合
| |____http # 其他业务基础服务
| |____...
المتصفحات الحديثة وIE10.
آي إي/إيدج | فايرفوكس | الكروم | سفاري | الأوبرا |
|---|---|---|---|---|
| IE10، الحافة | الإصدارين الأخيرين | الإصدارين الأخيرين | الإصدارين الأخيرين | الإصدارين الأخيرين |
