sideBar组件

src/components/src/SideBar/index.ts

+import SideBar from "./index.vue";
+import { App } from "vue";
+
+SideBar.install = (app: App) => {
+  app.component(SideBar.name, SideBar);
+};
+
+export default SideBar;

src/components/src/SideBar/index.vue

+<template>
+  <!-- 左侧导航栏 -->
+  <nav
+    class="h-full bg-mBlack text-center text-xs flow-root"
+    style="color: rgba(255, 255, 255, 0.6);"
+    :style="{
+      width: sideBarWidth + 'px',
+    }"
+  >
+    <div
+      class="h-15 relative cursor-pointer"
+      style="margin-top: 21px;"
+      v-for="(menu, i) in menuList"
+      :key="i"
+      :class="{
+        'bg-mGray5 ': currentRoute === i,
+        '!mt-20': i === 0,
+      }"
+      @click="selectPage && selectPage(i)"
+    >
+      <div class="box-content" style="padding: 14px 0 5px 0;">
+        <i class="iconfont text-sm" v-html="menu.icon"></i>
+      </div>
+      <div style="line-height: 17px;">
+        {{ menu.name }}
+      </div>
+      <div
+        class="hidden absolute top-0 left-0 h-full bg-mBlue"
+        :class="{
+          '!block': currentRoute === i,
+        }"
+        style="width: 3px;"
+      ></div>
+    </div>
+  </nav>
+</template>
+<script setup lang="ts">
+import { onBeforeMount } from "vue";
+
+interface Props {
+  currentRoute?: number;
+  selectPage?: (i: number) => void;
+  menuList?: {
+    name: string;
+    icon: string;
+  }[];
+  iconfontLink?: string;
+  sideBarWidth?: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+  menuList: () => {
+    return [];
+  },
+  sideBarWidth: 62,
+});
+onBeforeMount(() => {
+  if (props.iconfontLink) {
+    const links = document.querySelectorAll("link");
+    let inserted = false;
+    for (let i = 0; i < links.length; ++i) {
+      if (props.iconfontLink === links[i].href) {
+        inserted = true;
+      }
+    }
+    if (!inserted) {
+      const linkEl = document.createElement("link");
+      linkEl.rel = "stylesheet";
+      linkEl.href = props.iconfontLink;
+      document.head.appendChild(linkEl);
+    }
+  }
+});
+</script>

src/stories/SideBar.stories.ts

+import { Story } from "@storybook/vue3";
+import SideBar from "../components/src/SideBar";
+
+export default {
+  title: "SideBar",
+  component: SideBar,
+};
+
+const Template: Story = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { SideBar },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: '<SideBar v-bind="args" />',
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+
+Primary.args = {
+  menuList: [
+    {
+      name: "存证",
+      icon: "&#xe62b;",
+    },
+    {
+      name: "溯源",
+      icon: "&#xe629;",
+    },
+    {
+      name: "管理",
+      icon: "&#xe62a;",
+    },
+  ],
+  currentRoute: 0,
+  iconfontLink: "//at.alicdn.com/t/font_1321935_cdom05madx.css",
+  selectPage(v: number) {
+    console.log(v, "show v");
+  },
+  sideBarWidth: 64,
+};

tailwind.config.js

@@ -5,6 +5,7 @@ module.exports = {
       spacing: {
         pcWidth: "1200px",
         12.5: "50px",
+        15: "60px",
         25: "100px",
         26.5: "106px",
         49: "196px",
@@ -58,7 +59,10 @@ module.exports = {
         mGray2: "rgba(74, 74, 74, 1)",
         mGray3: "rgba(162, 157, 202, 1)",
         mGray4: "rgba(53, 53, 53, 1)",
+        mGray5: "#39393e",
+        mBlack: "#27272a",
         mLightBlue: "rgba(21, 203, 186, 1)",
+        mBlue: "#3f79fe",
       },
       fontFamily: {
         PingFangSC: ["PingFangSC-Regular"],