feat: 翻译界面

modern.config.ts

@@ -19,6 +19,9 @@ export default defineConfig({
     polyfillPlugin(),
     tailwindcssPlugin(),
   ],
+  html: {
+    title: 'Hackerese',
+  },
   tools: {
     rspack(config, context) {
       context.appendPlugins([

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;
+}
+

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;
+}

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;

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;
+}

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;