feat:

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+.prettierrc.js
 
 /cypress/videos/
 /cypress/screenshots/

src/components/dataease-tabs/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <el-tabs :class="['de-tabs', ...tabClassName]" :style="tabStyle" v-bind="$attrs">
+    <slot></slot>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+defineOptions({ name: 'DataeaseTabs' });
+const props = defineProps({
+  /* 颜色可以单词，如red；也可以是颜色值 */
+  // 字体颜色
+  fontColor: String,
+  // 激活字体颜色
+  activeColor: String,
+  // 边框颜色 如果是none就无边框 如果是none Card类型激活的下滑线也消失
+  borderColor: String,
+  // 激活边框颜色 目前只针对card类型
+  borderActiveColor: String,
+  // 样式类型  radioGroup只在Card类型有效, 同时必须给borderColor borderActiveColor
+  styleType: {
+    type: String,
+    default: '',
+    validator: (val: string) => ['', 'radioGroup'].includes(val),
+  },
+});
+
+const tabStyle = computed(() => [
+  { '--de-font-color': props.fontColor },
+  { '--de-active-color': props.activeColor },
+  { '--de-border-color': props.borderColor },
+  { '--de-border-active-color': props.borderActiveColor },
+]);
+const tabClassName = computed(() =>
+  props.styleType
+    ? [props.styleType, props.fontColor && 'fontColor', props.activeColor && 'activeColor']
+    : [
+        props.fontColor && 'fontColor',
+        props.activeColor && 'activeColor',
+        noBorder.value ? 'noBorder' : props.borderColor && 'borderColor',
+        props.borderActiveColor && 'borderActiveColor',
+      ]
+);
+
+const noBorder = computed(() => props.borderColor === 'none');
+</script>
+
+<style lang="scss">
+.de-tabs {
+  &.el-tabs--card {
+    > .el-tabs__header {
+      height: auto !important;
+    }
+  }
+  &.fontColor {
+    .el-tabs__item {
+      color: var(--de-font-color);
+
+      &.is-active {
+        color: var(--el-color-primary);
+      }
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+
+  &.activeColor {
+    .el-tabs__item {
+      &.is-active {
+        color: var(--de-active-color);
+      }
+
+      &:hover {
+        color: var(--de-active-color);
+      }
+    }
+
+    .el-tabs__active-bar {
+      background-color: var(--de-active-color);
+    }
+  }
+
+  // card样式的边框
+  &.noBorder.el-tabs--card {
+    > .el-tabs__header {
+      border-bottom: none;
+
+      .el-tabs__nav {
+        border: none;
+      }
+
+      .el-tabs__item {
+        border-left: none;
+      }
+
+      .el-tabs__item.is-active {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &.borderActiveColor.el-tabs--card {
+    > .el-tabs__header .el-tabs__item.is-active {
+      border-bottom-color: var(--de-border-active-color);
+    }
+  }
+
+  &.borderColor.el-tabs--card {
+    > .el-tabs__header {
+      border-bottom-color: var(--de-border-color);
+
+      .el-tabs__nav {
+        border-color: var(--de-border-color);
+      }
+
+      .el-tabs__item {
+        border-left-color: var(--de-border-color);
+      }
+    }
+
+    .el-tabs__item {
+      &.is-active {
+        color: var(--de-active-color);
+      }
+
+      &:hover {
+        color: var(--de-active-color);
+      }
+    }
+
+    .el-tabs__active-bar {
+      background-color: var(--de-active-color);
+    }
+  }
+
+  // 简洁样式的边框
+  &.noBorder {
+    .el-tabs__nav-wrap::after {
+      background: none;
+    }
+  }
+
+  &.borderColor {
+    .el-tabs__nav-wrap::after {
+      background: var(--de-border-color);
+    }
+  }
+
+  // radioGroup 类型
+  &.radioGroup.el-tabs--card {
+    > .el-tabs__header {
+      border-bottom: none;
+
+      .el-tabs__nav {
+        border: none;
+      }
+
+      .el-tabs__item {
+        border: 1px solid var(--de-border-color);
+        border-right: 0;
+
+        &:first-child {
+          border-left: 1px solid var(--de-border-color);
+          border-radius: 4px 0 0 4px;
+        }
+
+        &:last-child {
+          border-right: 1px solid var(--de-border-color);
+          border-radius: 0 4px 4px 0;
+        }
+
+        &.is-active {
+          border: 1px solid var(--de-border-active-color);
+
+          & + .el-tabs__item {
+            border-left: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.ts

@@ -1,8 +1,8 @@
-import { defineAsyncComponent } from 'vue'
-import { type RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
+import { defineAsyncComponent } from 'vue';
+import { type RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
 
-export const Layout = () => import('@/layout/index.vue')
-const modules: any = import.meta.glob('./modules/*.ts')
+export const Layout = () => import('@/layout/index.vue');
+const modules: any = import.meta.glob('./modules/*.ts');
 
 /** 常驻路由 */
 export const constantRoutes: RouteRecordRaw[] = [
@@ -18,68 +18,68 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: {
           title: '首页',
           icon: 'HomeFilled',
-          affix: true
-        }
-      }
-    ]
+          affix: true,
+        },
+      },
+    ],
   },
 
   {
     path: '/403',
     component: () => import('@/views/error-page/403.vue'),
     meta: {
-      hidden: true
-    }
+      hidden: true,
+    },
   },
   {
     path: '/404',
     component: () => import('@/views/error-page/404.vue'),
     meta: {
-      hidden: true
+      hidden: true,
     },
-    alias: '/:pathMatch(.*)*'
+    alias: '/:pathMatch(.*)*',
   },
   {
     path: '/router-demo',
     component: Layout,
     name: 'RouterDemo',
     meta: {
       title: '路由示例',
-      icon: 'Share'
+      icon: 'Share',
     },
     children: [
       {
         path: 'docs',
         component: () => import('@/views/router-demo/RouterDocs.vue'),
         name: 'RouterDocs',
         meta: {
-          title: '官方文档'
-        }
+          title: '官方文档',
+        },
       },
       {
         path: 'menu',
         component: () => import('@/views/router-demo/RouterMenu.vue'),
         name: 'RouterMenu',
         meta: {
-          title: '路由与菜单'
-        }
+          title: '路由与菜单',
+        },
       },
       {
         path: 'detail',
         component: () => import('@/views/router-demo/RouterDetail.vue'),
         name: 'RouterDetail',
         meta: {
           activeMenu: '/router-demo/menu',
-          hidden: true
-        }
+          hidden: true,
+        },
       },
       {
         path: 'keep-alive',
         component: () => import('@/views/router-demo/RouterKeepAlive.vue'),
         name: 'RouterKeepAlive',
         meta: {
-          title: '组件缓存'
-        }
+          title: '组件缓存',
+        },
       },
       {
         path: 'keep-alive-detail',
@@ -88,10 +88,10 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: {
           cache: true,
           activeMenu: '/router-demo/menu',
-          hidden: true
-        }
-      }
-    ]
+          hidden: true,
+        },
+      },
+    ],
   },
 
   {
@@ -100,44 +100,52 @@ export const constantRoutes: RouteRecordRaw[] = [
     name: 'Components',
     meta: {
       title: '组件',
-      icon: 'Grid'
+      icon: 'Grid',
     },
     children: [
+      {
+        path: 'tabs-demo',
+        component: () => import('@/views/components/DETabsDemo.vue'),
+        name: 'DETabsDemo',
+        meta: {
+          title: 'DE 标签页',
+        },
+      },
       {
         path: 'layout-content',
         component: () => import('@/views/components/LayoutContentDemo.vue'),
         name: 'LayoutContentDemo',
         meta: {
-          title: '页面布局'
-        }
+          title: '页面布局',
+        },
       },
       {
         path: 'card-view',
         component: () => import('@/views/components/ViewCardDemo.vue'),
         name: 'ViewCardDemo',
         meta: {
-          title: '查看Card'
-        }
-      }
-    ]
-  }
-]
+          title: '查看Card',
+        },
+      },
+    ],
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: constantRoutes as RouteRecordRaw[],
   // 刷新时，滚动条位置还原
-  scrollBehavior: () => ({ left: 0, top: 0 })
-})
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+});
 
 // 重置路由
 export function resetRouter() {
   router.getRoutes().forEach((route) => {
-    const { name } = route
+    const { name } = route;
     if (name && router.hasRoute(name)) {
-      router.removeRoute(name)
+      router.removeRoute(name);
     }
-  })
+  });
 }
 
-export default router
+export default router;