部分 render 组件

0jinxing · Apr 23, 2021 · dc0d3a8 · dc0d3a8
commit dc0d3a8
Show file tree

Hide file tree

Showing 20 changed files with 7,594 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "wx-miniprogram-report",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "antd": "^4.15.2",
+    "classnames": "^2.3.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "typescript": "^4.1.2",
+    "vite": "^2.1.5"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,25 @@
+#root {
+  padding: 32px;
+}
+@media (max-width: 820px), print {
+  #root {
+    padding: 0;
+  }
+  .paper {
+    margin: 0 !important;
+    box-shadow: none !important;
+    height: 100% !important;
+  }
+}
+
+.paper {
+  box-sizing: border-box;
+  width: 210mm;
+  margin: 0 auto;
+  padding: 32px;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.ant-table-tbody > tr.ant-table-row:hover > td {
+  background-color: unset !important;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { CategoryType } from "./audits";
+import data from "./audits.json";
+import Categories from "./components/Categories";
+import "./App.css";
+import ScoringHeader from "./components/ScoringHeader";
+import TaskDetail from "./components/TaskDetail";
+
+function App() {
+  const categories: CategoryType[] = [
+    {
+      type: "summary",
+      text: "总分",
+      score: data.score,
+      level: data.level,
+    },
+    ...data.categories,
+  ];
+
+  return (
+    <div className="paper">
+      <h1
+        style={{
+          fontSize: 24,
+          textAlign: "center",
+          marginBottom: 20,
+          paddingBottom: 20,
+        }}
+      >
+        体验评分
+      </h1>
+      <Categories categories={categories} />
+
+      {data.categories.map((i) => (
+        <ScoringHeader {...i} />
+      ))}
+      <TaskDetail headings={data.tasks[20].headings} details={data.tasks[20].details} />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/audits.d.ts b/src/audits.d.ts
@@ -0,0 +1,54 @@
+export type LevelType = "A" | "B" | "C" | "D" | string;
+
+export type CategoryType = {
+  type: string;
+  text: string;
+  score: number;
+  level: LevelType;
+};
+
+export type TaskMetaType = {
+  id: string;
+  passedTitle: string;
+  failedTitle: string;
+  description: string;
+  document: string;
+};
+
+export type TaskHeadingType = {
+  key: string;
+  text: string;
+};
+
+export type TaskStackType = Array<{
+  func: string;
+  file: string;
+  line: number;
+  column: number;
+}>;
+
+export type TaskDetailType = Record<
+  string,
+  string | number | boolean | string[] | number[] | TaskStackType
+>;
+
+export type TaskType = {
+  meta: TaskMetaType;
+  weight: number;
+  scoreDisplayMode: "numeric" | "not-applicable" | "not-accurate" | string;
+  scoringCategory: "best-practice" | "performance" | "accessibility" | string;
+  status: "failed" | "passed" | string;
+  title: string;
+  headings: TaskHeadingType[];
+  details: TaskDetailType[];
+  score: number;
+  failedSummary: string;
+};
+
+export type AuditsType = {
+  isGameApp: boolean;
+  score: number;
+  level: LevelType;
+  tasks: TaskType[];
+  categories: CategoryType[];
+};