feat: tablist ui

src/pages/home/index.vue

@@ -5,6 +5,7 @@ import User from './user/index.vue';
 import Local from './local/index.vue';
 import Menu from './menu/index.vue';
 import {NLayout, NLayoutContent} from 'naive-ui';
+import TabList from './tab/index.vue';
 
 defineOptions({
   name: 'Home',
@@ -25,7 +26,9 @@ defineOptions({
 
     <NLayout class="content" hasSider>
       <Menu />
-      <NLayoutContent />
+      <NLayoutContent>
+        <TabList />
+      </NLayoutContent>
     </NLayout>
   </div>
 </template>

src/pages/home/menu/index.css

@@ -2,6 +2,7 @@
   flex-direction: column;
   height: 100%;
   overflow: hidden;
+  border-inline-end: 1px solid var(--background-color);
 
   & > :deep(.n-layout-sider-scroll-container) {
     display: flex;

src/pages/home/tab/index.css

@@ -0,0 +1,34 @@
+.tab-list {
+  display: flex;
+  width: 100%;
+  padding-bottom: 2px;
+  background-color: var(--layout-background-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tab-item {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 10px 16px;
+  font-size: 14px;
+  cursor: pointer;
+
+  &:deep(.i-icon) {
+    margin-left: 8px;
+    cursor: pointer;
+  }
+}
+
+.tab-item-active {
+  color: var(--primary-color);
+}
+
+.close {
+  border-radius: 50%;
+  transition: background 200ms linear;
+
+  &:hover {
+    background-color: var(--primary-color-9);
+  }
+}

src/pages/home/tab/index.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+import {CloseSmall} from '@icon-park/vue-next';
+
+defineOptions({name: 'HomeTabList'});
+</script>
+
+<template>
+  <ul class="tab-list">
+    <li class="tab-item">首页</li>
+    <li :class="['tab-item', 'tab-item-active']">
+      首页
+      <CloseSmall
+        theme="outline"
+        size="14"
+        class="close"
+      />
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+@import './index.css';
+</style>

src/stores/count.ts

@@ -1,42 +0,0 @@
-import {defineStore} from 'pinia';
-
-type CountState = {
-  count: number;
-};
-
-type CountGetters = {
-  doubleCount: () => void;
-};
-
-type CountAction = {
-  increment: () => void;
-  reduce: () => void;
-};
-
-export const useCountState = defineStore<
-string,
-CountState,
-CountGetters,
-CountAction
->('count', {
-  state() {
-    return {
-      count: 0,
-    };
-  },
-  getters: {
-    doubleCount() {
-      return this.count * 2;
-    },
-  },
-  actions: {
-    increment() {
-      this.count
-        = process.env.IS_E2E === 'true' ? this.count + 2 : this.count + 1;
-    },
-    reduce() {
-      this.count
-        = process.env.IS_E2E === 'true' ? this.count - 2 : this.count - 1;
-    },
-  },
-});

src/stores/index.ts

@@ -1,2 +1,2 @@
-export * from './count';
+export * from './tab';
 export {storeToRefs} from 'pinia';

src/stores/tab.ts

@@ -0,0 +1,39 @@
+import {defineStore} from 'pinia';
+
+type State = {
+  activeKey: string;
+  tabList: {
+    key: string;
+    url: string;
+    label: string;
+  }[];
+};
+
+type Action = {
+  setActiveKey: (key: string) => void;
+  clear: () => void;
+};
+
+export const useTabStore = defineStore<string, State, any, Action>(
+  'tab',
+  {
+    state() {
+      return {
+        activeKey: '-1',
+        tabList: [
+          {key: '-1', label: '首页', url: '/'},
+          {key: '1', label: '审核列表', url: '/shenhe'},
+        ],
+      };
+    },
+    actions: {
+      clear() {
+        this.tabList = [];
+        this.activeKey = '';
+      },
+      setActiveKey(key) {
+        this.activeKey = key;
+      },
+    },
+  },
+);

src/styles/variable.css

@@ -12,6 +12,7 @@
   --accent-color: #fcaf17;
   --background-color: #f5f5f5;
   --layout-background-color: white;
+  --border-color: '#eee';
 
   /* font */
   --tip-font-size: 12px;