测试

.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*"

.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"]
 }

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
   # image:
   #   src: /cover.png
   #   alt: eden-cover

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"
   }
 }

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 };

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,10 +28,15 @@ 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>

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>

lib/eden-design/packages/eden-ui/components/Menu/src/MenuItemCollapsible.vue → lib/eden-design/packages/eden-ui/components/Menu/src/MenuItemGroup.vue

@@ -8,7 +8,7 @@ import {
 
 <template>
   <CollapsibleRoot>
-    <CollapsibleTrigger>111</CollapsibleTrigger>
+    <CollapsibleTrigger>MenuItemGroup</CollapsibleTrigger>
   </CollapsibleRoot>
 </template>
 

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>

lib/eden-design/packages/eden-ui/components/Menu/types/Menu.ts

@@ -1,9 +1,19 @@
-export interface IMenuData {
-    title: string;
-    route: {
-      prop: string,
-      type: 'path' | 'name',
-      operation: 'push' | 'replace'
-    };
-    children?: IMenuData[];
-}
+export interface IMenuDataProps {
+  route?:
+    | {
+        path: string;
+        operation?: "push" | "replace";
+      }
+    | {
+        name: string;
+        operation?: "push" | "replace";
+      };
+  children?: IMenuData[];
+}
+export type IMenuData =
+  | (IMenuDataProps & {
+      title: string;
+    })
+  | (IMenuDataProps & {
+      groupName: string;
+    });

lib/eden-design/packages/eden-ui/index.ts

@@ -1,8 +1,13 @@
 import type { App } from "vue";
 import "./styles.scss";
-import { Menu } from "./components/Menu/index";
+import { Menu, MenuItem, MenuItemGroup, SubMenu } from "./components/Menu";
 
-const components = [Menu];
+const components = [
+  Menu,
+  MenuItem,
+  MenuItemGroup,
+  SubMenu,
+];
 const componentPrefix = "e";
 
 const install = (app: App) => {