init project.

jaywcjlove · Jun 27, 2023 · 2b769ac · 2b769ac
1 parent 8a23189
commit 2b769ac
Show file tree

Hide file tree

Showing 46 changed files with 2,217 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,33 @@
-# Generated by Cargo
-# will have compiled files and executables
-/target/
+dist
+build
+lib
+node_modules
+server/public/*
 
-# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
-# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
-Cargo.lock
+server/public/*
+!server/public/.gitkeep
 
-# These are backup files generated by rustfmt
-**/*.rs.bk
+npm-debug.log*
+lerna-debug.log
+yarn-error.log
+package-lock.json
+
+.DS_Store
+.cache
+.vscode
+.idea
+.env
+
+*.mpassword
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*
+
+# IDEA
+*.iml
+*.ipr
+*.iws
+.idea/
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run prettier
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -0,0 +1,5 @@
+{
+  "*.{js,jsx,ts,tsx,md,json}": [
+    "prettier --write"
+  ]
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,19 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+**/*.yml
+**/*.d.ts
+package.json
+node_modules
+dist
+build
+lib
+test
+
+package.json
+coverage
+dist
+build
+cjs
+esm
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,15 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    },
+    {
+      "files": ".lintstagedrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
-# pml
+`P`assword `M`anager `L`ite
+===
+
 Password Manager Lite.
diff --git a/client/.kktrc.ts b/client/.kktrc.ts
@@ -0,0 +1,30 @@
+import webpack from 'webpack';
+import { LoaderConfOptions, WebpackConfiguration, MockerAPIOptions } from 'kkt';
+import pkg from './package.json';
+
+export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
+  // Get the project version.
+  conf.plugins!.push(
+    new webpack.DefinePlugin({
+      VERSION: JSON.stringify(pkg.version),
+      DEBUG: JSON.stringify(env),
+    }),
+  );
+  if (env === 'production') {
+    conf.output = { ...conf.output, publicPath: './' };
+  } else {
+    conf.proxySetup = (app): MockerAPIOptions => {
+      return {
+        path: {
+          _proxy: {
+            changeHost: true,
+            proxy: {
+              '/api/(.*)': 'http://localhost:3002/',
+            },
+          },
+        },
+      };
+    };
+  }
+  return conf;
+};
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,2 @@
+Web Clinet
+===
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "private": true,
+  "description": "client",
+  "scripts": {
+    "build": "kkt build",
+    "start": "kkt start"
+  },
+  "dependencies": {
+    "@react-login-page/page3": "^0.4.11",
+    "@tanstack/react-query": "^4.24.10",
+    "@uiw/copy-to-clipboard": "^1.0.12",
+    "@uiw/formatter": "^2.0.1",
+    "@wcj/dark-mode": "^1.0.15",
+    "framer-motion": "^10.12.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.0",
+    "react-router-dom": "^6.8.1",
+    "styled-components": "^5.3.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "http-proxy-middleware": "^2.0.6",
+    "kkt": "^7.4.6"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+  <meta name="description" content="Password Manager Lite">
+	<title>PML</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/client/src/comps/Button.tsx b/client/src/comps/Button.tsx
@@ -0,0 +1,57 @@
+import styled, { css } from 'styled-components';
+
+export const buttonStyles = css`
+  color: rgba(var(--color-initial) / 0.855);
+  border-radius: 0.25rem;
+  padding: 5px 10px;
+  --tt-btn-background-color: rgba(var(--color-initial) / 0.155);
+  background-color: var(--tt-btn-background-color);
+  box-shadow: inset 0 0 0 1px rgba(var(--color-initial) / 0.2), 0 1px 2px rgba(var(--color-initial) / 0.1);
+  --tt-btn-color: rgba(var(--color-initial) / 0.9);
+  color: var(--tt-btn-color);
+  transition: all 0.6s;
+  box-shadow: 0 0 0 0 transparent;
+  &:hover {
+    background-clip: padding-box;
+    --tt-btn-hover-background-color: rgba(var(--color-initial) / 0.255);
+    background-color: var(--tt-btn-hover-background-color);
+    --tt-btn-hover-color: rgba(var(--color-initial) / 0.9);
+    color: var(--tt-btn-hover-color);
+  }
+  &:active {
+    --tt-btn-active-background-color: rgba(var(--color-initial) / 0.155);
+    background-color: var(--tt-btn-active-background-color);
+  }
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(var(--color-initial) / 0.35);
+  }
+`;
+
+interface ButtonProps {
+  danger?: boolean;
+}
+
+export const Button = styled.button<ButtonProps>`
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: center;
+  min-height: 30px;
+  min-width: 30px;
+  text-align: left;
+  vertical-align: middle;
+  transition: all 0.3s;
+  ${({ danger }) =>
+    danger &&
+    css`
+      --tt-btn-color: rgba(var(--color-initial-op) / 0.9) !important;
+      --tt-btn-background-color: #dc3545 !important;
+      --color-initial-op: 255 255 255 !important;
+      --color-initial: 220 53 69 !important;
+    `}
+  ${buttonStyles}
+`;
diff --git a/client/src/comps/ErrorPage.tsx b/client/src/comps/ErrorPage.tsx
@@ -0,0 +1,33 @@
+import React, { forwardRef, PropsWithoutRef } from 'react';
+import styled from 'styled-components';
+import { useRouteError } from 'react-router-dom';
+
+const Wrapper = styled.div`
+  padding: 0 23px;
+`;
+
+const Status = styled.em`
+  font-weight: bold;
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 21px;
+`;
+
+export interface ErrorPageProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const ErrorPage = forwardRef<HTMLDivElement, PropsWithoutRef<ErrorPageProps>>(
+  ({ children, ...htmlProps }, ref) => {
+    const error = useRouteError() as Response;
+    console.log('error:', error);
+    return (
+      <Wrapper id="error-page" {...htmlProps} ref={ref}>
+        <h1>Oops!</h1>
+        <p>抱歉，发生了意外错误。</p>
+        <p>
+          {error?.status && <Status>{error?.status}</Status>}
+          {error?.statusText && <i>{decodeURI(error?.statusText || '')}</i>}
+        </p>
+      </Wrapper>
+    );
+  },
+);