feat(eden): scss 颜色变量

ba-archive · Jan 1, 2024 · 1adc3f0 · 1adc3f0
1 parent 44541c2
commit 1adc3f0
Show file tree

Hide file tree

Showing 15 changed files with 579 additions and 61 deletions.
diff --git a/.github/workflows/deploy-eden-docs.yml b/.github/workflows/deploy-eden-docs.yml
@@ -54,3 +54,13 @@ jobs:
           REMOTE_USER: ${{ secrets.SERVER_USER_PRODUCTION }}
           TARGET: "/var/www/eden-docs"
           EXCLUDE: ".git*"
+      - name: Demo rsync deploy
+        uses: easingthemes/ssh-deploy@main
+        with:
+          SSH_PRIVATE_KEY: ${{ secrets.SERVER_PASS_PRODUCTION }}
+          ARGS: "-rltgoDzvO --delete"
+          SOURCE: "./lib/eden-design/dist/"
+          REMOTE_HOST: ${{ secrets.SERVER_HOST_PRODUCTION }}
+          REMOTE_USER: ${{ secrets.SERVER_USER_PRODUCTION }}
+          TARGET: "/var/www/eden-docs/demo"
+          EXCLUDE: ".git*"
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,7 +13,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "cSpell.words": ["lintstagedrc", "unocss"]
 }
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/lib/eden-design/docs/index.md b/lib/eden-design/docs/index.md
@@ -14,8 +14,8 @@ hero:
       text: 设计规范
       link: /guideline/design/
     - theme: alt
-      text: 设计语言
-      link: /guideline/design/design-language
+      text: Demo
+      link: https://eden.blue-archive.io/demo/index.html/button
   # image:
   #   src: /cover.png
   #   alt: eden-cover

diff --git a/lib/eden-design/package.json b/lib/eden-design/package.json
@@ -34,6 +34,10 @@
     "@vue/eslint-config-typescript": "^11.0.3",
     "prettier": "^2.8.8",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-sort-exports": "^0.8.0"
+    "eslint-plugin-sort-exports": "^0.8.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-vue": "^9.15.1"
   }
 }
diff --git a/lib/eden-design/packages/eden-ui/components/Menu/index.ts b/lib/eden-design/packages/eden-ui/components/Menu/index.ts
@@ -1,9 +1,27 @@
 import Menu from "./src/Menu.vue";
+import MenuItem from "./src/MenuItem.vue";
+import MenuItemGroup from "./src/MenuItemGroup.vue";
+import SubMenu from "./src/SubMenu.vue";
 import type { App } from "vue";
 Menu.name = "menu";
+MenuItem.name = "menu-item";
+MenuItemGroup.name = "menu-item-group";
+SubMenu.name = "sub-menu";
 
 Menu.install = (app: App) => {
   app.component(Menu.name, Menu);
 };
 
-export { Menu };
+MenuItem.install = (app: App) => {
+  app.component(MenuItem.name, MenuItem);
+};
+
+MenuItemGroup.install = (app: App) => {
+  app.component(MenuItemGroup.name, MenuItemGroup);
+};
+
+SubMenu.install = (app: App) => {
+  app.component(SubMenu.name, SubMenu);
+};
+
+export { Menu, MenuItem, MenuItemGroup, SubMenu };
diff --git a/lib/eden-design/packages/eden-ui/components/Menu/src/Menu.vue b/lib/eden-design/packages/eden-ui/components/Menu/src/Menu.vue
@@ -1,9 +1,22 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { IMenuData } from "../types/Menu";
+import SubMenu from "./SubMenu.vue";
+import MenuItem from "./MenuItem.vue";
 const props = defineProps<{
   title?: string;
   data?: IMenuData[];
 }>();
+
+const menuItemTriage = [
+  {
+    keyIs: "groupName",
+    component: SubMenu,
+  },
+  {
+    keyIs: "title",
+    component: MenuItem,
+  },
+];
 </script>
 
 <template>
@@ -15,39 +28,49 @@ const props = defineProps<{
       <div class="eden-ui__menu__header--title">
         <slot name="title"></slot>
       </div>
-      <div class="eden--ui__menu__header--content" v-if="!props.data">
-        <slot></slot>
-      </div>
-      <div class="eden--ui__menu__header--content" v-else></div>
+    </div>
+    <div class="eden--ui__menu__content" v-if="!props.data">
+      <slot></slot>
+    </div>
+    <div class="eden--ui__menu__content" v-else>
+      <component
+        v-for="item in props.data"
+        :is="menuItemTriage.find(triage => item[triage.keyIs])?.component"
+      />
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.eden-ui__menu {
-  font-family: var(--eden-main-font);
-  width: 256px;
-  padding-left: 20px;
-  padding-top: 32px;
-  border-right: 1px solid #00000010;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+@import "../../../style/color.scss";
 
-  &__header {
+@include theme {
+  .eden-ui__menu {
+    font-family: var(--eden-main-font);
+    width: 256px;
+    padding-left: 20px;
+    padding-top: 32px;
+    border-right: 1px solid #00000010;
     display: flex;
-    gap: 12px;
-    align-items: center;
+    flex-direction: column;
+    gap: 16px;
 
-    &--logo {
-      max-width: 48px;
-      max-height: 48px;
-      object-fit: contain;
-    }
+    &__header {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      color: themeColor("color-text-5");
+
+      &--logo {
+        max-width: 48px;
+        max-height: 48px;
+        object-fit: contain;
+      }
 
-    &--title {
-      font-family: var(--eden-title-font);
-      font-weight: var(--eden-title-font-weight);
+      &--title {
+        font-family: var(--eden-title-font);
+        font-weight: var(--eden-title-font-weight);
+      }
     }
   }
 }

diff --git a/lib/eden-design/packages/eden-ui/components/Menu/src/MenuItem.vue b/lib/eden-design/packages/eden-ui/components/Menu/src/MenuItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div></div>
+  <div>MenuItem</div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/...mponents/Menu/src/MenuItemCollapsible.vue → ...-ui/components/Menu/src/MenuItemGroup.vue b/...mponents/Menu/src/MenuItemCollapsible.vue → ...-ui/components/Menu/src/MenuItemGroup.vue
@@ -8,7 +8,7 @@ import {
 
 <template>
   <CollapsibleRoot>
-    <CollapsibleTrigger>111</CollapsibleTrigger>
+    <CollapsibleTrigger>MenuItemGroup</CollapsibleTrigger>
   </CollapsibleRoot>
 </template>
 

diff --git a/lib/eden-design/packages/eden-ui/components/Menu/src/SubMenu.vue b/lib/eden-design/packages/eden-ui/components/Menu/src/SubMenu.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from "radix-vue";
+import { IMenuData } from "../types/Menu";
+const props = withDefaults(defineProps<IMenuData>(), {
+  title: "SubMenu",
+  route: {
+    path: "/",
+  },
+});
+</script>
+
+<template>
+  <CollapsibleRoot>
+    <CollapsibleTrigger>{{ props.title }}</CollapsibleTrigger>
+  </CollapsibleRoot>
+</template>
+
+<style scoped lang="scss"></style>