样式

src/views/flow/index.vue

@@ -65,6 +65,21 @@
     </section>
 
     <div class="content">
+      <div class="search-bar">
+        <div class="search-input">
+          <Icon icon="mdi:magnify" class="search-icon" />
+          <input
+            v-model.trim="searchKeyword"
+            type="text"
+            class="search-field"
+            placeholder="搜索流程名称"
+          />
+        </div>
+        <span v-if="searchKeyword" class="search-meta">
+          共找到 {{ displayedFlows.length }} 条结果
+        </span>
+      </div>
+
       <div class="tabs-container" role="tablist" aria-label="EHR模块">
         <button
           class="el-tab-item"
@@ -91,9 +106,9 @@
       </div>
 
       <div role="tabpanel">
-        <div class="items-grid">
+        <div v-if="displayedFlows.length" class="items-grid">
           <div
-            v-for="item in activeTab.flowRespVOS"
+            v-for="item in displayedFlows"
             :key="item.id"
             class="item-card"
             :style="{
@@ -157,6 +172,11 @@
             </div> -->
           </div>
         </div>
+        <div v-else class="empty-state">
+          <Icon icon="mdi:file-search-outline" class="empty-icon" />
+          <p class="empty-title">没有找到相关流程</p>
+          <p class="empty-desc">试试换个名称关键词搜索</p>
+        </div>
       </div>
     </div>
 
@@ -361,6 +381,7 @@ const handleResize = () => {
 const tabs = ref([]);
 
 const activeKey = ref("all");
+const searchKeyword = ref("");
 
 const iconPalette = [
   {
@@ -435,6 +456,20 @@ const activeTab = computed(() => {
   );
 });
 
+const displayedFlows = computed(() => {
+  const keyword = searchKeyword.value.trim().toLowerCase();
+
+  if (!keyword) {
+    return activeTab.value.flowRespVOS || [];
+  }
+
+  return (allTab.value.flowRespVOS || []).filter((item) =>
+    String(item?.flowName || "")
+      .toLowerCase()
+      .includes(keyword)
+  );
+});
+
 const getAll = async () => {
   const res = await getFlows({
     pageNo: 1,
@@ -766,6 +801,60 @@ onBeforeUnmount(() => {
   /* height: 80vh; */
 }
 
+.search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.search-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: min(420px, 100%);
+  padding: 0 16px;
+  height: 46px;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.search-input:focus-within {
+  border-color: rgba(2, 64, 155, 0.28);
+  box-shadow: 0 12px 28px rgba(2, 64, 155, 0.1);
+}
+
+.search-icon {
+  flex-shrink: 0;
+  font-size: 18px;
+  color: #94a3b8;
+}
+
+.search-field {
+  width: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 14px;
+  color: #0f172a;
+}
+
+.search-field::placeholder {
+  color: #94a3b8;
+}
+
+.search-meta {
+  flex-shrink: 0;
+  font-size: 13px;
+  color: #64748b;
+}
+
 .tabs-container {
   display: flex;
   align-items: center;
@@ -957,6 +1046,35 @@ onBeforeUnmount(() => {
   line-height: 1.6;
 }
 
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 240px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px dashed #dbe3ee;
+  color: #64748b;
+}
+
+.empty-icon {
+  font-size: 42px;
+  color: #94a3b8;
+}
+
+.empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.empty-desc {
+  font-size: 13px;
+  color: #94a3b8;
+}
+
 .item-footer {
   display: flex;
   align-items: center;
@@ -992,6 +1110,15 @@ onBeforeUnmount(() => {
     padding: 56px 7vw 36px;
   }
 
+  .search-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-input {
+    width: 100%;
+  }
+
   .panel-head {
     flex-direction: column;
     align-items: flex-start;

src/views/login.vue

@@ -21,7 +21,7 @@
         <h1 class="text-2xl font-bold text-center">登录</h1>
 
         <!-- 用户名密码登陆 -->
-        <div>
+        <!-- <div>
           <el-form
             :model="form"
             :rules="rules"
@@ -62,7 +62,7 @@
               >
             </div>
           </div>
-        </div>
+        </div> -->
 
         <!-- 钉钉登陆 -->
         <div class="text-center">