From ca691461ea72547c573f07ac7a3ae5cd0f8864da Mon Sep 17 00:00:00 2001
From: WANGFan <15871339963@163.com>
Date: Sat, 5 Jul 2025 14:12:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=9C=E7=B4=A2=E6=A0=8F=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                           |   1 +
 src/components/s-layout-tools/index.vue       |  20 +++
 .../component/common-layouts/head-page.vue    | 163 ++++++++++++++++++
 src/views/component/common-layouts/index.vue  |  18 +-
 4 files changed, 198 insertions(+), 4 deletions(-)
 create mode 100644 src/components/s-layout-tools/index.vue
 create mode 100644 src/views/component/common-layouts/head-page.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index b9def46..ce61cdd 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     SFullPage: typeof import('./components/s-full-page/index.vue')['default']
     SInternalLinkPage: typeof import('./components/s-internal-link-page/index.vue')['default']
     SLangProvider: typeof import('./components/s-lang-provider/index.vue')['default']
+    SLayoutTools: typeof import('./components/s-layout-tools/index.vue')['default']
     SMainTransition: typeof import('./components/s-main-transition/index.vue')['default']
     SPinyinPro: typeof import('./components/s-pinyin-pro/index.vue')['default']
     SQrcodeDraw: typeof import('./components/s-qrcode-draw/index.vue')['default']
diff --git a/src/components/s-layout-tools/index.vue b/src/components/s-layout-tools/index.vue
new file mode 100644
index 0000000..bb9622f
--- /dev/null
+++ b/src/components/s-layout-tools/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="tools">
+    <a-space>
+      <slot name="left"> </slot>
+    </a-space>
+    <a-space>
+      <slot name="right"> </slot>
+    </a-space>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.tools {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/component/common-layouts/head-page.vue b/src/views/component/common-layouts/head-page.vue
new file mode 100644
index 0000000..3b71ab9
--- /dev/null
+++ b/src/views/component/common-layouts/head-page.vue
@@ -0,0 +1,163 @@
+<template>
+  <a-space direction="vertical" fill size="medium">
+    <a-card title="头部工具栏">
+      <s-layout-tools>
+        <template #left>
+          <a-button type="primary">
+            <template #icon>
+              <icon-plus />
+            </template>
+            新增
+          </a-button>
+          <a-button type="primary" status="danger">
+            <template #icon>
+              <icon-delete />
+            </template>
+            删除
+          </a-button>
+        </template>
+        <template #right>
+          <a-input-search :style="{ width: '200px' }" placeholder="请输入关键字" search-button />
+          <a-button type="primary" status="success">
+            <template #icon>
+              <icon-download />
+            </template>
+          </a-button>
+          <a-button type="primary">
+            <template #icon>
+              <icon-refresh />
+            </template>
+          </a-button>
+        </template>
+      </s-layout-tools>
+    </a-card>
+    <a-card title="搜索栏布局">
+      <a-grid :colGap="12" :rowGap="12" :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :collapsed="collapsed">
+        <a-grid-item>
+          <div style="display: flex; column-gap: 12px; align-items: center">
+            <span style="white-space: nowrap">姓名</span>
+            <a-input style="width: 100%" v-model="form.name" placeholder="请输入姓名" allow-clear />
+          </div>
+        </a-grid-item>
+        <a-grid-item>
+          <div style="display: flex; column-gap: 12px; align-items: center">
+            <span style="white-space: nowrap">手机号</span>
+            <a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
+          </div>
+        </a-grid-item>
+        <a-grid-item>
+          <div style="display: flex; column-gap: 12px; align-items: center">
+            <span style="white-space: nowrap">邮箱</span>
+            <a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
+          </div>
+        </a-grid-item>
+        <a-grid-item>
+          <div style="display: flex; column-gap: 12px; align-items: center">
+            <span style="white-space: nowrap">状态</span>
+            <a-input style="width: 100%" v-model="form.name" placeholder="请输入状态" allow-clear />
+          </div>
+        </a-grid-item>
+        <a-grid-item>
+          <div style="display: flex; column-gap: 12px; align-items: center">
+            <span style="white-space: nowrap">类型</span>
+            <a-input style="width: 100%" v-model="form.name" placeholder="请输入类型" allow-clear />
+          </div>
+        </a-grid-item>
+        <a-grid-item>
+          <div style="display: flex; column-gap: 12px; align-items: center">
+            <span style="white-space: nowrap">机构</span>
+            <a-input style="width: 100%" v-model="form.name" placeholder="请输入机构" allow-clear />
+          </div>
+        </a-grid-item>
+        <a-grid-item suffix>
+          <a-space>
+            <a-button type="primary">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button>
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+            <a-button type="text" @click="collapsed = !collapsed">
+              <template #icon>
+                <icon-down />
+              </template>
+              <span>展开</span>
+            </a-button>
+          </a-space>
+        </a-grid-item>
+      </a-grid>
+      <!-- <a-row :gutter="12">
+        <a-col flex="auto">
+          <a-grid :cols="3" :colGap="12">
+            <a-grid-item>
+              <div style="display: flex; align-items: center; column-gap: 12px">
+                <span style="white-space: nowrap">姓名</span>
+                <a-input style="width: 100%" v-model="form.name" placeholder="请输入姓名" allow-clear />
+              </div>
+            </a-grid-item>
+            <a-grid-item>
+              <div style="display: flex; align-items: center; column-gap: 12px">
+                <span style="white-space: nowrap">手机号</span>
+                <a-input v-model="form.phone" placeholder="请输入手机号" allow-clear />
+              </div>
+            </a-grid-item>
+            <a-grid-item>
+              <div style="display: flex; align-items: center; column-gap: 12px">
+                <span style="white-space: nowrap">邮箱</span>
+                <a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
+              </div>
+            </a-grid-item>
+          </a-grid>
+        </a-col>
+        <a-col flex="none">
+          <a-space>
+            <a-button type="primary">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button>
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+            <a-button type="text">
+              <template #icon>
+                <icon-down />
+              </template>
+              <span>展开</span>
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row> -->
+    </a-card>
+  </a-space>
+</template>
+
+<script setup lang="ts">
+const form = ref<any>({
+  name: "",
+  phone: "",
+  email: "",
+  address: "",
+  status: null
+});
+
+const collapsed = ref<boolean>(false);
+</script>
+
+<style lang="scss" scoped>
+.tools-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/component/common-layouts/index.vue b/src/views/component/common-layouts/index.vue
index e8f5a84..164d44c 100644
--- a/src/views/component/common-layouts/index.vue
+++ b/src/views/component/common-layouts/index.vue
@@ -2,13 +2,16 @@
   <s-full-page>
     <s-fold-page v-model:width="siderWidth">
       <template #sider>
-        <a-menu :style="{ width: '100%', height: '100%' }" :selected-keys="[currentMenu]">
+        <a-menu :style="{ width: '100%', height: '100%' }" :selected-keys="[currentMenu]" @menu-item-click="onMenuItem">
           <a-menu-item v-for="item in menuData" :key="item.id">{{ item.title }}</a-menu-item>
         </a-menu>
       </template>
       <template #content>
-        <div class="content">
-          <FoldPage v-if="currentMenu == 1" />
+        <div class="content" v-if="currentMenu == 1">
+          <head-page />
+        </div>
+        <div class="content" v-if="currentMenu == 2">
+          <fold-page />
         </div>
       </template>
     </s-fold-page>
@@ -17,13 +20,20 @@
 
 <script setup lang="ts">
 import FoldPage from "@/views/component/common-layouts/fold-page.vue";
+import HeadPage from "@/views/component/common-layouts/head-page.vue";
 interface MenuData {
   id: number;
   title: string;
 }
 const siderWidth = ref<number>(250);
-const menuData = ref<MenuData[]>([{ id: 1, title: "可折叠布局" }]);
+const menuData = ref<MenuData[]>([
+  { id: 1, title: "头部布局" },
+  { id: 2, title: "可折叠布局" }
+]);
 const currentMenu = ref<number>(1);
+const onMenuItem = (e: number) => {
+  currentMenu.value = e;
+};
 </script>
 
 <style lang="scss" scoped>