# xyyd-template

**Repository Path**: plightfield/xyyd-template

## Basic Information

- **Project Name**: xyyd-template
- **Description**: 项目模板以及技术验证 demo
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-13
- **Last Updated**: 2023-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XYYD 启动项目模板

## 文件夹结构

1. 全局共用模块放置于 shared 文件夹中，并移除项目相关依赖

为何？shared 文件夹中的内容，可能会进行 npm 打包上传，在其他项目中使用

## 样式封装技术选型

1. [`@emotion/react`](https://emotion.sh/docs/introduction) 获得样式组件能力，但是更多为 `@emotion/styled` 提供依赖，使用：

```Javascript
const StyledCompo = styled.div`
  backgroundColor: red;
`;
```

声明样式组件，不建议样式组件中传入参数动态修改样式

动态修改样式优先使用 `style={{/* ... */}}` 绑定，或 `className={/* ... */}` 绑定

2. 采用 [tailwind](https://www.tailwindcss.cn/docs/guides/vite) 提供主题化能力

tailwind 配置为对 src 文件夹下的 js/ts/jsx/tsx 文件生效

**尽可能通过 tailwind 复用全局主题样式**，然后通过 js 动态修改 cssVariable 变更主题

搭配 vscode tailwind fold 插件，未编辑时收纳 tailwind 的 className 声明

搭配 [twin.macro](https://github.com/ben-rogerson/twin.macro) 和 vscode tailwind twin intellisense 插件，让 styled 中也能书写 tailwind 样式

```Javascript
const Container = styled.div`
  ${tw`bg-red-50`}
  color:white;
`;
```

主题设置为：

先将 tailwind.config 中的配置文件声明为 css variable 值

```Javascript tailwind.config.js
export default {
  // ...
  theme: {
    colors: {
      red: "var(--color-red)",
      "red-light": "var(--color-red-light)",
    }
  }
};
```

再在 css :root 配置中声明 css variable

```css main.css
:root {
  --color-red: red;
  --color-red-light: rgb(212, 119, 119);
}
```

最后应用 useCssVar hook 动态修改

```Javascript App.jsx
const themes = {
  theme1: {
    "--color-red": "red",
    "--color-red-light": "rgb(212, 119, 119)",
  },
  theme2: {
    "--color-red": "black",
    "--color-red-light": "rgb(100, 119, 119)",
  },
};

export default function App() {
  // 调用 setTheme 传入 themes.theme1 或 themes.theme2 修改
  // 主题配置文件因为是纯数据，也可以在后台进行配置
  const [theme, setTheme] = useState(themes.theme1);
  useCssVar(theme);
  // ...
}
```

3. 响应式

通过 `window.screen.availWidth` 和利用 `onResize` 进行反推，求出放大缩小前屏幕尺寸，并且对全局进行 `transform` 放大缩小

```Javascript
export default function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const handle = () => {
      if (!containerRef.current) return;
      containerRef.current.style.transform = `scale(${
        document.body.clientWidth / screen.availWidth
      })`;
    };
    handle();
    window.onresize = handle;
  }, []);
  return (
    <Container
      ref={containerRef}
      style={{
        transformOrigin: "left top",
        width: `${screen.availWidth}px`,
        height: `${screen.availHeight}px`,
      }}
    >
    </Container>
  );
}
```

基准设计尺寸有：1280px(最差笔记本) 1488px(普通笔记本放大 125%) 1920px（台式机） 2560px（高分屏） 3840px（超高分屏，imac）

提供 1400px, 1800px, 2400px, 3600px 四个屏幕断点，保证每个目标屏幕的识别

字体至少为 14 px，因为内容需要提供放大和缩小的空间，小屏中空间比较局促，需要 UI 支持

背景图片中间适应放置，保证正中心永远处于视口中心

## 样式规范

1. 类名采用小写字母中横线明明，如 `nav-bar`,`sider-title`,且命名需要符合语义

为何？tailwind 作用在类名上也是如此风格，且小写字母中横线命名是类名通用规则

为何？复合语义的命名维护成本更低

2. styled 中不要有超过两层以上嵌套，且第二层嵌套采用**子代组合选择器**

```Javascript
const Container = styled.div`
   backgroundColor: red;
   & > .some-class{
     backgroundColor: white
     // 不推荐 ×，不能高于两个层级
     .some-other-class{}
   }
`
// 推荐 √，多余两层用新的 styled
const OtherContainer = styled.div``
```

为何？样式写在 js 中，无法运用 postcss 的类名哈希，为了防止项目中相同类名冲突

为何？如果子代组合选择器嵌套太多，大大增加代码重构负担，并且提醒开发者是否需要拆分文件

3. 复杂的 tailwind 需要写在 styled 中

为何？太过于复杂的 tailwind 语法出现在标签上会被折叠，展开后剧烈影响代码结构