feat: 测试 monorepo - 初始化admin 和 fe 项目

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -1,2 +1,2 @@
 node_modules
-node_modules/**/node_modules
+node_modules/**/node_modules

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "none"
+}

docs/frontend/样式解决方案.md

@@ -0,0 +1,166 @@
+## 针对 CSS 在开发中的一些痛点
+
+1. 统一的设计方案：一套变量如果通过 CS 实现，需要维护庞大的变量文件，增加维护成本
+2. HTML 结构复杂，通过 class 指定。需要语义化，会产生大量命名，持续维护
+
+3. 当体量大后，在开发时，需来回滚动或者分屏操作，体验不友好
+
+4. 针对复杂功能，如（响应式设计）媒体查询、主题定制等的实现。若想用传统方案实现，会很复杂
+
+https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
+
+## CSS 实用类和“关注点分离”
+
+在过去的几年里，我编写 CSS 的方式已经从非常“语义”的方法转变为更像通常所说的“函数式 CSS”。
+
+以这种方式编写 CSS 会引起许多开发人员的强烈反应，因此我想解释一下我是如何达到这一点的，并分享我在此过程中获得的一些经验教训和见解。
+
+### 第 1 阶段：“语义”CSS
+
+CSS Zen Garden 采用第一种方法
+
+### 第 2 阶段：将样式与结构解耦
+
+Bootstrap 或 Bulma 等 UI 框架则采用第二种方法
+
+两者本质上都不是“错误的”。这只是根据特定情况下对您来说更重要的事情而做出的决定。
+
+对于您正在从事的项目，哪个更有价值：可重新设计 HTML 或可重用 CSS？
+
+针对可重用 CSS 进行优化将是我从事的各种项目的正确选择
+
+### 第 3 阶段：与内容无关的 CSS 组件
+
+我此时的目标是明确避免创建基于我的内容的类，而是尝试以尽可能可重用的方式命名所有内容。
+这导致类名如下：
+
+- .card
+- .btn、.btn--primary、.btn--secondary
+- .badge
+- .card-list、.card-list-item
+- .img--round
+- .modal-form, .modal-form-section
+
+当我开始专注于创建可重用的类时，我注意到了一些其他事情：
+组件做的事情越多，或者组件越具体，重用就越困难。
+
+### 第 4 阶段：与内容无关的组件 + 实用程序类
+
+间隔实用程序
+
+如果只有孩子需要样式，也许独立地设置孩子的样式而不是使用花哨的伪选择器将它们作为组设置样式会更简单？
+
+在元素旁边添加一些间距的最可重用的方法是一个类，让我们说“这个元素旁边应该有一些空间”。
+
+### 第 5 阶段：实用优先 CSS
+
+一旦我明白了这一点，不久之后我就为我需要的常见视觉调整构建了一整套实用程序类，例如：
+文本大小、颜色和粗细
+边框颜色、宽度和位置
+背景颜色
+弹性盒实用程序
+填充和边距助手
+令人惊奇的是，在您意识到之前，您可以构建全新的 UI 组件，而无需编写任何新的 CSS。
+看看我的一个项目中的这种“产品卡”组件：
+
+```css
+.image-card-with-a-full-width-section-and-a-split-section {
+}
+```
+
+当然不是，这太荒谬了。相反，我们可能想用更小的组件来组合它，就像我们之前讨论过的那样。
+这些组件可能是什么？
+好吧，也许它被装在一张卡片里。但并非所有卡片都有阴影，因此我们可以使用 .card--shadowed 修饰符，或者我们可以创建一个可应用于任何元素的 .shadow 实用程序。这听起来更可重用，所以让我们这样做吧。
+事实证明，我们网站上的一些卡片没有圆角，但这张卡片有。我们可以将其设为 .card--rounded，但我们网站上的其他元素有时也会舍入相同的数量，但这些元素不是卡片。圆形实用程序将更具可重用性。
+上面的图片怎么样？也许这就像一个 .img-- 适合的东西，所以它填满了卡片？好吧，网站上还有其他一些地方我们需要将某些内容调整到其父级宽度，而且它并不总是图像。也许只是一个 .fit 助手会更好。
+...你可以看到我要说的。
+如果您遵循这条路线足够远并关注可重用性，那么使用可重用实用程序构建此组件就是自然的目的地。
+
+强制一致性
+
+```html
+<button
+  class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple"
+>
+  Button Text
+</button>
+```
+
+```html
+<ui-button color="purple">Save</ui-button>
+```
+
+```vue
+<template>
+  <button class="f6 br3 ph3 pv2" :class="colorClasses">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: ['color'],
+  computed: {
+    colorClasses() {
+      return {
+        purple: 'white bg-purple hover-bg-light-purple',
+        lightGray: 'mid-gray bg-light-gray hover-bg-light-silver',
+        // ...
+      }[this.color]
+    },
+  },
+}
+</script>
+```
+
+对于很多项目来说，这都是一个很好的方法，但我仍然认为在很多用例中，创建 CSS 组件比创建基于模板的组件更实用。
+对于我从事的此类项目，创建一个新的 .btn-purple 类来捆绑这 7 个实用程序通常比致力于模板化网站上的每个小部件更简单。
+
+我之所以将我所采用的 CSS 方法称为“实用程序优先”，是因为我尝试利用实用程序来构建我能构建的所有内容，并且只在重复模式出现时才提取它们。
+
+如果您使用 Less 作为预处理器，则可以使用现有的类作为 mixin。
+
+不幸的是，如果不为每个实用程序类创建单独的 mixin，则无法在 Sass 或 Stylus 中执行此操作，因此需要做更多的工作。
+
+当然，组件中的每个声明并不总是都来自实用程序。元素之间的复杂交互（例如将鼠标悬停在父级上时更改子级的属性）很难仅使用实用程序来完成，因此请使用您的最佳判断并做任何感觉更简单的事情。
+不再有过早的抽象
+采用组件优先的 CSS 方法意味着您可以为事物创建组件，即使它们永远不会被重用。这种过早的抽象是样式表中大量膨胀和复杂性的根源。
+以导航栏为例。您在应用程序中重写了多少次主导航标记？
+在我的项目中，我通常只这样做一次；在我的主布局文件中。
+如果您首先使用实用程序构建内容，并且仅在看到令人担忧的重复时才提取组件，那么您可能永远不需要提取导航栏组件。
+相反，您的导航栏可能看起来像这样：
+
+```html
+<nav class="bg-brand py-4 flex-spaced" text className="peek">
+  <div><!-- Logo goes here --></div>
+  <div>
+    <!-- Menu items go here -->
+  </div>
+</nav>
+```
+
+这不就是内联样式吗？
+很容易看到这种方法，并认为它就像在 HTML 元素上添加样式标签并添加您需要的任何属性，但根据我的经验，这是非常不同的。
+使用内联样式，您选择的值没有任何限制。
+一个标签可以是 font-size: 14px，另一个可以是 font-size: 13px，另一个可以是 font-size: .9em，另一个可以是 font-size: .85rem。
+这与您在为每个新组件编写新 CSS 时面临的空白画布问题相同。
+实用程序迫使您选择：
+这是 text-sm 还是 text-xs？
+我应该使用 py-3 还是 py-4？
+我想要 text-dark-soft 还是 text-dark-faint？
+你不能只选择任何想要的值；您必须从精选列表中进行选择。
+您最终会得到 10 或 12 种文本颜色，而不是 380 种文本颜色。
+我的经验是，以实用性优先构建事物会比以组件优先构建外观更一致的设计，尽管乍一听上去可能不直观。
+
+从哪儿开始
+如果您对这种方法感兴趣，那么这里有一些值得一试的框架：
+
+最近，我还发布了自己的免费开源 PostCSS 框架，名为 Tailwind CSS，它是围绕实用程序优先并从重复模式中提取组件的理念而设计的：
+如果您有兴趣查看，请访问 Tailwind CSS 网站并尝试一下。
+
+## 价值体现
+
+- 行内样式 无复用性，不合适
+- 组件样式 通用组件库 固定风格，不合适
+- 传统形式 响应式 主题替换等复杂功能实现复杂
+- 原子化 CSS 可灵活定制，最合适