Merge pull request #10 from yuanyxh/yuanyxh

feat: project variation
yuanyxh · Sep 11, 2023 · 012ab72 · 012ab72
2 parents c9fc84c + 5482240
commit 012ab72
Show file tree

Hide file tree

Showing 54 changed files with 1,110 additions and 233 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -29,7 +29,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <title>React App</title>
+    <title>illustrate</title>
   </head>
   <body ontouchstart>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "illustrate",
+  "name": "illustrate",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/components/ExtraInformation/ExtraInformation.module.css b/src/components/ExtraInformation/ExtraInformation.module.css
@@ -0,0 +1,34 @@
+.extra-information {
+  margin: 10px 0;
+  padding: 10px;
+  border: var(--border);
+  border-radius: var(--border-radius-base);
+}
+
+.title {
+  font-size: calc(var(--font-size-base) * 1.1);
+  font-weight: var(--font-weight-primary);
+  color: var(--text-color);
+}
+
+.wrapper,
+.other {
+  margin-top: 10px;
+}
+
+.other {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.platform {
+  color: var(--color-info);
+}
+
+.platform-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 10px;
+}
diff --git a/src/components/ExtraInformation/ExtraInformation.tsx b/src/components/ExtraInformation/ExtraInformation.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Platform } from '@/enum';
+import Tip from '@/components/Tip/Tip';
+import Text from '@/components/Text/Text';
+import style from './ExtraInformation.module.css';
+
+interface ExtraInformationProps {
+  platform: {
+    [key in keyof typeof Platform]?: key extends 'blog'
+      ? { title: string; url: string }
+      : { url: string };
+  };
+}
+
+export default function ExtraInformation(props: ExtraInformationProps) {
+  const { platform } = props;
+
+  return (
+    <Tip type="primary">
+      {{
+        header() {
+          return <span>案例相关链接：</span>;
+        },
+        body() {
+          return (
+            <div className={style['wrapper']}>
+              <div className={style['foremost']}>
+                <span className={style['platform']}>{Platform['blog']}：</span>
+
+                <Link to={platform['blog']?.url || ''} target="_blank">
+                  <Text type="primary">{platform['blog']?.title}</Text>
+                </Link>
+              </div>
+
+              <div className={style['other']}>
+                <span className={style['platform']}>发布平台：</span>
+
+                <p className={style['platform-item']}>
+                  {Object.keys(platform).map((key) => (
+                    <Link
+                      key={key}
+                      to={platform[key as keyof typeof Platform]?.url || ''}
+                      target="_blank"
+                    >
+                      <Text type="primary">
+                        {Platform[key as keyof typeof Platform]}
+                      </Text>
+                    </Link>
+                  ))}
+                </p>
+              </div>
+            </div>
+          );
+        }
+      }}
+    </Tip>
+
+    // <div className={style['extra-information']}>
+    //   <h1 className={style['title']}>案例相关链接：</h1>
+
+    //   {/* <div className={style['wrapper']}>
+    //     {Object.keys(platform).map((key) => (
+    //       <div key={key} className={style['group']}>
+    //         <span className={style['platform']}>
+    //           {Platform[key as keyof typeof Platform]}：
+    //         </span>
+
+    //         {platform[key as keyof typeof Platform]?.map(({ title, url }) => (
+    //           <Link key={url} to={url} target="_blank">
+    //             <Text type="primary">{title}</Text>
+    //           </Link>
+    //         ))}
+    //       </div>
+    //     ))}
+    //   </div> */}
+    // </div>
+  );
+}
diff --git a/src/components/InputNumber/InputNumber.module.css b/src/components/InputNumber/InputNumber.module.css
@@ -37,7 +37,7 @@
   align-items: center;
   height: auto;
   position: absolute;
-  z-index: 1;
+  z-index: var(--z-index-normal);
   top: 1px;
   bottom: 1px;
   width: var(--input-number-btn-width);

diff --git a/src/components/Overlay/Overlay.module.css b/src/components/Overlay/Overlay.module.css
@@ -1,7 +1,7 @@
 .overlay {
   position: fixed;
   inset: 0;
-  z-index: 2000;
+  z-index: var(--z-index-highest);
   background-color: var(--overlay-color-lighter);
   overflow: auto;
 }
diff --git a/src/components/ScreenBoundary/ScreenBoundary.module.css b/src/components/ScreenBoundary/ScreenBoundary.module.css
@@ -0,0 +1,23 @@
+.screen-boundary {
+  margin: 10px;
+  margin-top: 50px;
+}
+
+.title {
+  padding: 10px;
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-primary);
+  color: var(--color-warning);
+}
+
+.desc {
+  margin-top: 15px;
+  font-size: var(--font-size-large);
+  line-height: var(--font-line-height-primary);
+  color: var(--text-color-regular);
+}
+
+.footer {
+  margin-top: 15px;
+  text-align: end;
+}
diff --git a/src/components/ScreenBoundary/ScreenBoundary.tsx b/src/components/ScreenBoundary/ScreenBoundary.tsx
@@ -0,0 +1,51 @@
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import Card from '@/components/Card/Card';
+import Text from '@/components/Text/Text';
+import Button from '@/components/Button/Button';
+import { ScreenContext } from '@/layout/Layout';
+import style from './ScreenBoundary.module.css';
+
+interface ScreenBoundaryProps extends ChildProps {
+  children: React.ReactElement;
+  displayInMobile?: boolean;
+}
+
+export default function ScreenBoundary(props: ScreenBoundaryProps) {
+  const { children, displayInMobile = false } = props;
+
+  const isSmallScreen = useContext(ScreenContext);
+
+  if (isSmallScreen && displayInMobile === false) {
+    return (
+      <Card className={style['screen-boundary']}>
+        {{
+          header() {
+            return <h1 className={style['title']}>温馨提示</h1>;
+          },
+          body() {
+            return (
+              <>
+                <Text block type="info">
+                  此页不建议在移动端或小屏设备上渲染
+                </Text>
+
+                <p className={style['desc']}>
+                  基于技术或用户体验考虑，当前页面暂不支持在此环境中展示，建议使用大屏设备体验，如电脑、平板等。
+                </p>
+
+                <footer className={style['footer']}>
+                  <Link to={'/'}>
+                    <Button type="primary">返回首页</Button>
+                  </Link>
+                </footer>
+              </>
+            );
+          }
+        }}
+      </Card>
+    );
+  }
+
+  return children;
+}
diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css
@@ -44,7 +44,7 @@
   display: none;
   position: absolute;
   top: 110%;
-  background-color: #fff;
+  background-color: var(--bg-color);
   border: 1px solid var(--border-color-light);
   box-shadow: var(--box-shadow-light);
   border-radius: var(--border-radius-base);
@@ -53,7 +53,7 @@
   line-height: 20px;
   width: 100%;
   word-wrap: break-word;
-  z-index: 10;
+  z-index: var(--z-index-useful);
 }
 
 .select-options-item {

diff --git a/src/components/Tip/Tip.module.css b/src/components/Tip/Tip.module.css
@@ -0,0 +1,81 @@
+.tip {
+  --tip-background-color: var(--fill-color-extra-light);
+  --tip-border-left-color: var(--border-color);
+
+  position: relative;
+  margin: 20px 0;
+  padding: 8px 16px;
+  background-color: var(--tip-background-color);
+  border-radius: 4px;
+  border-left: 5px solid var(--tip-border-left-color);
+}
+
+.tip-primary {
+  --tip-background-color: var(--color-primary-light-9);
+  --tip-border-left-color: var(--color-primary);
+}
+
+.tip-success {
+  --tip-background-color: var(--color-success-light-9);
+  --tip-border-left-color: var(--color-success-dark-2);
+}
+
+.tip-info {
+  --tip-background-color: var(--color-info-light-9);
+  --tip-border-left-color: var(--color-info);
+}
+
+.tip-warning {
+  --tip-background-color: var(--color-warning-light-9);
+  --tip-border-left-color: var(--color-warning);
+}
+
+.tip-danger {
+  --tip-background-color: var(--color-danger-light-9);
+  --tip-border-left-color: var(--color-danger);
+}
+
+.tip-title {
+  margin: 1rem 0;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-primary);
+  line-height: 1.7;
+}
+
+.tip-desc {
+  font-size: var(--font-size-base);
+  color: var(--text-color);
+  word-break: break-all;
+}
+
+.tip-close {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  background: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+}
+
+.tip-close i {
+  font-size: var(--font-size-small);
+  color: var(--text-color);
+}
+
+.tip-leave {
+  animation: leave var(--transition-duration-fast);
+  transform-origin: top center;
+}
+
+@keyframes leave {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}