From 7277b85d5253c1219033b0e4114333702b975226 Mon Sep 17 00:00:00 2001
From: Crazy Urus <crazyurus@vip.qq.com>
Date: Sat, 17 Aug 2024 23:31:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BF=BB=E8=AF=91=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modern.config.ts              |   3 +
 src/global.css                |  33 +++++++++
 src/routes/index.css          | 126 ----------------------------------
 src/routes/layout.module.scss |  21 ++++++
 src/routes/layout.tsx         |  14 +++-
 src/routes/page.module.scss   |  15 ++++
 src/routes/page.tsx           | 120 +++++++++-----------------------
 7 files changed, 115 insertions(+), 217 deletions(-)
 create mode 100644 src/global.css
 delete mode 100644 src/routes/index.css
 create mode 100644 src/routes/layout.module.scss
 create mode 100644 src/routes/page.module.scss

diff --git a/modern.config.ts b/modern.config.ts
index 9367610..baea2ce 100644
--- a/modern.config.ts
+++ b/modern.config.ts
@@ -19,6 +19,9 @@ export default defineConfig({
     polyfillPlugin(),
     tailwindcssPlugin(),
   ],
+  html: {
+    title: 'Hackerese',
+  },
   tools: {
     rspack(config, context) {
       context.appendPlugins([
diff --git a/src/global.css b/src/global.css
new file mode 100644
index 0000000..a77fd1c
--- /dev/null
+++ b/src/global.css
@@ -0,0 +1,33 @@
+@layer tailwind-base,semi,tailwind-components,tailwind-utils;
+@layer tailwind-base{
+  @tailwind base;
+}
+@layer tailwind-components{
+  @tailwind components;
+}
+@layer tailwind-utils {
+  @tailwind utilities;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
diff --git a/src/routes/index.css b/src/routes/index.css
deleted file mode 100644
index e33a939..0000000
--- a/src/routes/index.css
+++ /dev/null
@@ -1,126 +0,0 @@
-@layer tailwind-base,semi,tailwind-components,tailwind-utils;
-@layer tailwind-base{
-  @tailwind base;
-}
-@layer tailwind-components{
-  @tailwind components;
-}
-@layer tailwind-utils {
-  @tailwind utilities;
-}
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-  background: linear-gradient(to bottom, transparent, #fff) #eceeef;
-}
-
-p {
-  margin: 0;
-}
-
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  box-sizing: border-box;
-}
-
-.container-box {
-  min-height: 100vh;
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-top: 10px;
-}
-
-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.title {
-  display: flex;
-  margin: 4rem 0 4rem;
-  align-items: center;
-  font-size: 4rem;
-  font-weight: 600;
-}
-
-.logo {
-  width: 6rem;
-  margin: 7px 0 0 1rem;
-}
-
-.name {
-  color: #4ecaff;
-}
-
-.description {
-  text-align: center;
-  line-height: 1.5;
-  font-size: 1.3rem;
-  color: #1b3a42;
-  margin-bottom: 5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 12px;
-  padding: 0.6rem 0.9rem;
-  font-size: 1.05rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.container-box .grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1100px;
-  margin-top: 3rem;
-}
-
-.card {
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100px;
-  color: inherit;
-  text-decoration: none;
-  transition: 0.15s ease;
-  width: 45%;
-}
-
-.card:hover,
-.card:focus {
-  transform: scale(1.05);
-}
-
-.card h2 {
-  display: flex;
-  align-items: center;
-  font-size: 1.5rem;
-  margin: 0;
-  padding: 0;
-}
-
-.card p {
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  margin-top: 1rem;
-}
-
-.arrow-right {
-  width: 1.3rem;
-  margin-left: 0.5rem;
-  margin-top: 3px;
-}
diff --git a/src/routes/layout.module.scss b/src/routes/layout.module.scss
new file mode 100644
index 0000000..1103e15
--- /dev/null
+++ b/src/routes/layout.module.scss
@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0 60px;
+  height: 56px;
+  border-bottom: 1px solid var(--semi-color-border);
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.body {
+  flex-grow: 1;
+  overflow-y: auto;
+}
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index 6433ea7..bcce854 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -1,9 +1,17 @@
 import { Outlet } from '@modern-js/runtime/router';
 
-export default function Layout() {
+import styles from './layout.module.scss';
+import '../global.css';
+
+function Layout(): JSX.Element {
   return (
-    <div>
-      <Outlet />
+    <div className={styles.container}>
+      <div className={styles.header}>Hackerese</div>
+      <div className={styles.body}>
+        <Outlet />
+      </div>
     </div>
   );
 }
+
+export default Layout;
diff --git a/src/routes/page.module.scss b/src/routes/page.module.scss
new file mode 100644
index 0000000..656f761
--- /dev/null
+++ b/src/routes/page.module.scss
@@ -0,0 +1,15 @@
+.container {
+  padding: 24px 60px;
+}
+
+.title {
+  margin: 36px 0 16px;
+  font-weight: bold;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin: 32px 0;
+}
diff --git a/src/routes/page.tsx b/src/routes/page.tsx
index 7e067a9..f6aa1ea 100644
--- a/src/routes/page.tsx
+++ b/src/routes/page.tsx
@@ -1,92 +1,36 @@
-import { Helmet } from '@modern-js/runtime/head';
-import './index.css';
+import { useState } from 'react';
+import { Button, TextArea } from '@douyinfe/semi-ui';
 
-const Index = () => (
-  <div className="container-box">
-    <Helmet>
-      <link
-        rel="icon"
-        type="image/x-icon"
-        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+import styles from './page.module.scss';
+
+function IndexPage(): JSX.Element {
+  const [text, setText] = useState('');
+  const [result, setResult] = useState('');
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>English</div>
+      <TextArea
+        value={text}
+        rows={8}
+        placeholder="Please enter"
+        onChange={setText}
       />
-    </Helmet>
-    <main>
-      <div className="title">
-        Welcome to
-        <img
-          className="logo"
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"
-          alt="Modern.js Logo"
-        />
-        <p className="name">Modern.js</p>
-      </div>
-      <p className="description">
-        Get started by editing <code className="code">src/routes/page.tsx</code>
-      </p>
-      <div className="grid">
-        <a
-          href="https://modernjs.dev/guides/get-started/introduction.html"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="card"
-        >
-          <h2>
-            Guide
-            <img
-              className="arrow-right"
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-            />
-          </h2>
-          <p>Follow the guides to use all features of Modern.js.</p>
-        </a>
-        <a
-          href="https://modernjs.dev/tutorials/foundations/introduction.html"
-          target="_blank"
-          className="card"
-          rel="noreferrer"
-        >
-          <h2>
-            Tutorials
-            <img
-              className="arrow-right"
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-            />
-          </h2>
-          <p>Learn to use Modern.js to create your first application.</p>
-        </a>
-        <a
-          href="https://modernjs.dev/configure/app/usage.html"
-          target="_blank"
-          className="card"
-          rel="noreferrer"
-        >
-          <h2>
-            Config
-            <img
-              className="arrow-right"
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-            />
-          </h2>
-          <p>Find all configuration options provided by Modern.js.</p>
-        </a>
-        <a
-          href="https://github.com/web-infra-dev/modern.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="card"
-        >
-          <h2>
-            Github
-            <img
-              className="arrow-right"
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-            />
-          </h2>
-          <p>View the source code of Github, feel free to contribute.</p>
-        </a>
+      <div className={styles.title}>Hackerese</div>
+      <TextArea
+        value={result}
+        rows={8}
+        readonly
+        placeholder="Result"
+        onChange={setResult}
+      />
+      <div className={styles.footer}>
+        <Button theme="solid">Translate</Button>
+        <Button>Copy</Button>
+        <Button>Reset</Button>
       </div>
-    </main>
-  </div>
-);
+    </div>
+  );
+}
 
-export default Index;
+export default IndexPage;