From a022685918fc0413f2ea9610ede8de60dd6f4697 Mon Sep 17 00:00:00 2001
From: "chen.home" <1147347984@qq.com>
Date: Wed, 24 Aug 2022 00:14:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E5=A2=9E=E5=8A=A0=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=B1=95=E7=A4=BA=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/module/user.ts                 | 30 ++++++++++++
 src/layouts/BasicLayout/index.vue   |  9 +++-
 src/views/list/cardList/index.vue   |  7 +++
 src/views/list/commonList/index.vue | 72 +++++++++++++++++++++++++++++
 4 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 src/views/list/cardList/index.vue
 create mode 100644 src/views/list/commonList/index.vue

diff --git a/mock/module/user.ts b/mock/module/user.ts
index dec678d..27c8bb0 100644
--- a/mock/module/user.ts
+++ b/mock/module/user.ts
@@ -107,6 +107,36 @@ const userRoutes = [
       },
     ],
   },
+  {
+    name: 'list',
+    path: '/list',
+    redirect: '/list/commonList',
+    meta: {
+      title: '列表页',
+      requiresAuth: true,
+      icon: 'icon-park-outline:list-two',
+    },
+    children: [
+      {
+        name: 'list_commonList',
+        path: '/list/commonList',
+        meta: {
+          title: '常用列表',
+          requiresAuth: true,
+          icon: 'icon-park-outline:list-view',
+        },
+      },
+      {
+        name: 'list_cardList',
+        path: '/list/cardList',
+        meta: {
+          title: '卡片列表',
+          requiresAuth: true,
+          icon: 'icon-park-outline:view-grid-list',
+        },
+      },
+    ],
+  },
 ];
 
 export default [
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 03370a6..b0516be 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -59,4 +59,11 @@ import {
 const appStore = useAppStore();
 </script>
 
-<style scoped></style>
+<style scoped>
+.n-layout-sider {
+  box-shadow: 2px 0 8px #1d23290d;
+}
+.n-layout-header {
+  box-shadow: 0 1px 2px #00152914;
+}
+</style>
diff --git a/src/views/list/cardList/index.vue b/src/views/list/cardList/index.vue
new file mode 100644
index 0000000..dcae1a5
--- /dev/null
+++ b/src/views/list/cardList/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>卡片列表页</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue
new file mode 100644
index 0000000..65f87cb
--- /dev/null
+++ b/src/views/list/commonList/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <n-space vertical size="large">
+    <n-card>
+      <n-grid :x-gap="12" :y-gap="8" :cols="23">
+        <n-gi :span="5">
+          <n-grid :cols="5">
+            <n-grid-item :span="1" class="flex-center">条件1</n-grid-item>
+            <n-grid-item :span="4"><n-input v-model:value="model.condition_1" placeholder="Input" /></n-grid-item>
+          </n-grid>
+        </n-gi>
+        <n-gi :span="5">
+          <n-grid :cols="5">
+            <n-grid-item :span="1" class="flex-center">条件2</n-grid-item>
+            <n-grid-item :span="4"><n-input v-model:value="model.condition_2" placeholder="Input" /></n-grid-item>
+          </n-grid>
+        </n-gi>
+        <n-gi :span="5">
+          <n-grid :cols="5">
+            <n-grid-item :span="1" class="flex-center">条件3</n-grid-item>
+            <n-grid-item :span="4"><n-input v-model:value="model.condition_3" placeholder="Input" /></n-grid-item>
+          </n-grid>
+        </n-gi>
+        <n-gi :span="5">
+          <n-grid :cols="5">
+            <n-grid-item :span="1" class="flex-center">条件4</n-grid-item>
+            <n-grid-item :span="4"><n-input v-model:value="model.condition_4" placeholder="Input" /></n-grid-item>
+          </n-grid>
+        </n-gi>
+        <n-gi :span="3">
+          <n-space justify="space-between">
+            <n-button type="primary">
+              <template #icon><i-icon-park-outline-search /></template>
+              搜索
+            </n-button>
+            <n-button strong secondary>
+              <template #icon><i-icon-park-outline-redo /></template>
+              重置
+            </n-button>
+          </n-space>
+        </n-gi>
+      </n-grid>
+    </n-card>
+    <n-card>
+      <div class="flex gap-4">
+        <n-button type="primary">
+          <template #icon><i-icon-park-outline-add-one /></template>
+          新建
+        </n-button>
+        <n-button strong secondary>
+          <template #icon><i-icon-park-outline-afferent /></template>
+          批量导入
+        </n-button>
+        <n-button strong secondary class="ml-a">
+          <template #icon><i-icon-park-outline-download /></template>
+          下载
+        </n-button>
+      </div>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const model = ref({
+  condition_1: '',
+  condition_2: '',
+  condition_3: '',
+  condition_4: '',
+});
+</script>
+
+<style scoped></style>