feat(theme): 主题结构调整 增加actions自动构建

src/styles/header.scss

@@ -0,0 +1,83 @@
+@import "variables";
+
+.header {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .dividing {
+    flex: 1;
+    background: repeating-linear-gradient(90deg, var(--foreground), var(--foreground) 2px, transparent 0, transparent 10px);
+    display: block;
+    width: 100%;
+    height: 25px;
+  }
+
+  .menu {
+    margin: 20px 0;
+
+    &__inner {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        position: relative;
+        flex: 0 0 auto;
+        padding-bottom: 10px;
+
+        &.active {
+          color: var(--cyan);
+        }
+
+        &:not(:last-of-type) {
+          margin-right: 20px;
+        }
+      }
+    }
+
+    &__sub-inner {
+      position: absolute;
+      z-index: 99;
+      top: 35px;
+      left: 0;
+      display: none;
+      margin: 0;
+      padding: 10px;
+      list-style: none;
+      border: 2px solid var(--red);
+      background: var(--background);
+      box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background);
+
+      li {
+        padding: 5px;
+        white-space: nowrap;
+        text-decoration: underline;
+        color: var(--green);
+
+        &:not(:last-of-type) {
+          margin-right: 0;
+        }
+      }
+
+      &.open {
+        display: block;
+      }
+    }
+  }
+
+  .button {
+    background-color: transparent;
+    color: var(--foreground);
+    margin: 0 0 0 .5rem;
+    padding: 0;
+  }
+}